/* ═══════════════════════════════════════════════════════════════════════════
   ISA – gemeinsames Stylesheet (ST-1)
   ───────────────────────────────────────────────────────────────────────────
   Aufbau, bitte einhalten:
     1. TOKENS   – Farb-/Layout-Variablen + Themes. Gilt für alle Seiten.
     2. BASIS    – das wenige, was in index.html und isa.html nachweislich gleich war.
     3. EDITOR   – alles aus isa.html,   gekapselt in  body.page-editor { … }
     4. LISTE    – alles aus index.html, gekapselt in  body.page-liste  { … }

   ⚠️ WARUM DIE KAPSELUNG: Die beiden Seiten waren NICHT kollisionsfrei.
      - Beide definieren `.btn-icon` mit unterschiedlicher Optik.
      - index.html stylt nackte Elemente (`header`, `button`, `table`, `th`, `td`,
        `input[type=…]`) – die hätten im Editor u.a. die Scan-Tabelle und jeden
        Button umgestaltet.
      - isa.html hat einen harten Reset (`* { margin:0; padding:0 }`) – der hätte
        die Login-Karte zerlegt.
      Ein blosses Aneinanderhaengen der beiden <style>-Bloecke waere also ein
      stiller Layout-Bug gewesen. Die Kapselung per CSS-Nesting haelt ausserdem die
      SPEZIFITAETS-VERHAELTNISSE INNERHALB eines Blocks exakt so, wie sie vorher
      waren (jede Regel bekommt denselben Aufschlag) – nur einzelne Regeln zu
      scopen wuerde die Reihenfolge verdrehen.

   Neue Regeln gehoeren in den Block ihrer Seite. Etwas, das beide brauchen,
   kommt nach BASIS – aber nur, wenn es wirklich auf beiden Seiten gleich ist.
   Kein Build-Step: diese Datei laedt der Browser genau so, wie sie hier steht.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   1. TOKENS
   Vereinigung beider Variablensaetze. Die gemeinsamen Werte waren in beiden
   Dateien identisch (nur unterschiedlich geschrieben: #fff vs #FFFFFF).
   Seitenspezifisch waren: --ok/--warn (nur Liste), --red-active und die
   Layout-Masse (nur Editor). Sie stehen jetzt gemeinsam hier.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --red: #E30613; --red-hover: #C10510; --red-active: #A70409;
  --white: #FFFFFF; --black: #111111; --dark-gray: #333333;
  --light-gray: #F2F2F2; --border: #E0E0E0; --disabled: #999999;
  --ok: #1B7F3B; --warn: #996A00;
  --sidebar-width: 240px; --header-height: 56px; --footer-height: 64px; --pager-height: 44px;
  color-scheme: light;
}
/* Syn: nur der Akzent (Buttons/UI), Basis bleibt hell */
:root[data-theme="syn"] { --red: oklch(0.519 0.088 196.8); --red-hover: oklch(0.46 0.088 196.8); --red-active: oklch(0.40 0.088 196.8); }
/* Standard-Dunkel: Neutrals invertiert, Akzent aufgehellt für Kontrast */
:root[data-theme="dunkel"] {
  --white: #1e1e1e; --black: #ececec; --dark-gray: #bdbdbd;
  --light-gray: #2a2a2a; --border: #3a3a3a; --disabled: #8a8a8a;
  --red: #ff4d5a; --red-hover: #ff6b76; --red-active: #e53e4b;
  --ok: #4ade80; --warn: #fbbf24;
  color-scheme: dark;
}
/* Dunkel: die einzigen hartkodierten Farben nachziehen. Bleibt bewusst ausserhalb
   der Seitenbloecke – :root ist ein Vorfahre von <body>, laesst sich dort also nicht
   verschachteln. Die Klassennamen sind eindeutig je Seite, daher kollisionsfrei. */
:root[data-theme="dunkel"] .sync-status.ok { color: #4ade80; }
:root[data-theme="dunkel"] .sync-status.warn { color: #fbbf24; }
:root[data-theme="dunkel"] .save-dot,
:root[data-theme="dunkel"] .sidebar-item .item-dot.has-data { background: #4ade80; }
:root[data-theme="dunkel"] .banner { background: #3a2f10; border-color: #5c4a12; }
:root[data-theme="dunkel"] .badge.local { background: #4a3a10; color: #f0c674; }
:root[data-theme="dunkel"] .badge.dirty { background: #16304f; color: #8ab4ff; }
:root[data-theme="dunkel"] .btn-danger { border-color: #5a2a2a; }
:root[data-theme="dunkel"] .btn-danger:hover { background: #3a1a1a; }


/* ═══════════════════════════════════════════════════════════════
   2. BASIS – in beiden Dateien wortgleich gewesen.
   Der Hintergrund gehoert NICHT hierher: Liste = --light-gray, Editor = --white.
   ═══════════════════════════════════════════════════════════════ */
html, body { height: 100%; margin: 0; font-family: Inter, system-ui, sans-serif; font-size: 15px; color: var(--black); }

/* Animationen top-level: @keyframes laesst sich nicht sinnvoll verschachteln. */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 10%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--red) 20%, transparent); } }

/* Odoo-Erbe, Teil 1 – Containing-Block fuer position:fixed reparieren.
   Stammt aus der aufgegebenen Odoo-Einbettung (siehe docs/archiv/odoo_deployment.md):
   Odoo-Themes setzten transform/filter/… auf die Vorfahrenkette, wodurch
   position:fixed nicht mehr zum Viewport greift. Die reinen Odoo-Selektoren
   (#wrapwrap, #wrap, #isa-root) sind ersatzlos entfernt – die Elemente gibt es hier nicht.

   ⚠️ NUR NOCH `html` (U-7, 27.07.2026). `body.page-editor` und `body.page-editor main` standen
   hier bis dahin mit drin – als Gegenmittel gegen Odoo, das es nicht mehr gibt. Sie schlugen
   nebenbei die Zurueck-Geste tot; die ist inzwischen ersatzlos entfernt (siehe changelog.md),
   damit setzt gar nichts mehr einen Transform auf body oder #main. Der Reset waere dort also
   reine Attrappe: ein !important, das gegen nichts schuetzt. */
html {
  transform: none !important;
  filter: none !important;
  perspective: none !important;
  will-change: auto !important;
  contain: none !important;
  backdrop-filter: none !important;
}

/* Update-Hinweis des Serviceworkers ("Neue Version verfuegbar"). Auf BEIDEN Seiten identisch,
   deshalb BASIS. Das Element steht in KEINER der HTML-Dateien – shared/register-serviceworker.js
   erzeugt es nur dann, wenn wirklich eine neue Version wartet.

   ⚠️ ID-SELEKTOREN, KEINE KLASSEN. body.page-editor traegt einen harten Reset
   (& *, & *::before, & *::after { box-sizing; margin:0; padding:0 }) mit Spezifitaet (0,1,1).
   Eine Klassenregel aus BASIS hat (0,1,0) und VERLIERT dagegen: das Banner haette auf isa.html
   weder Innenabstand noch Knopfpolster – auf index.html saehe es dagegen richtig aus, und genau
   solche halbseitigen Fehler faellt beim Entwickeln niemandem auf. #id ist (1,0,0) und gewinnt.
   Aus demselben Grund hat der Knopf eine eigene ID: body.page-liste stylt nackte <button>.

   Farben ueber --black/--white/--red: die invertieren im dunklen Theme von selbst. Deshalb braucht
   es hier – anders als bei .banner – KEINEN :root[data-theme="dunkel"]-Nachtrag.

   z-index 150: ueber Header und #sidebar-pager des Editors (100), aber UNTER allen Modalen
   (200/300/400, .modal-overlay 99999) – waehrend eines offenen Dialogs soll nichts darueber liegen.
   Unten RECHTS verankert, weil unten links auf isa.html der fixierte #sidebar-pager sitzt. */
#isa-update-banner {
  position: fixed; right: 16px; bottom: 16px; z-index: 150;
  display: flex; align-items: center; gap: 12px;
  max-width: calc(100vw - 32px);
  padding: 12px 14px; border-radius: 8px;
  background: var(--black); color: var(--white);
  font-family: inherit; font-size: 13px; line-height: 1.3;
  box-shadow: 0 6px 24px rgba(0,0,0,0.28);
}
#isa-update-btn {
  flex-shrink: 0;
  font-family: inherit; font-size: 13px; font-weight: 600;
  background: var(--red); color: var(--white);
  border: none; border-radius: 6px; padding: 7px 12px;
  cursor: pointer; white-space: nowrap;
}
#isa-update-btn:hover:not(:disabled) { background: var(--red-hover); }
#isa-update-btn:disabled { opacity: .6; cursor: default; }


/* ═══════════════════════════════════════════════════════════════
   3. EDITOR  (isa.html)  –  <body class="page-editor">
   ═══════════════════════════════════════════════════════════════ */
/* Die Zurueck-Geste (.slide-out-right + transition + prefers-reduced-motion) stand hier bis
   zum 27.07.2026 und ist ersatzlos entfernt – zusammen mit dem 320-ms-Warten in goToList().
   Sie lief seit dem Odoo-Ausbau nicht mehr sichtbar, war als Effekt nicht gewollt, und die
   Wartezeit kostete bei jedem Zurueck-Klick spuerbar Zeit ohne Gegenwert. */
body.page-editor {
  background: var(--white);
  box-sizing: border-box;

  & *, & *::before, & *::after { box-sizing: border-box; margin: 0; padding: 0; }

  & #app-header { position: fixed; top: 0; left: 0; right: 0; height: var(--header-height); background: var(--white); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 24px; z-index: 100; gap: 16px; }
  & .header-logo { font-weight: 700; font-size: 18px; color: var(--red); letter-spacing: -0.3px; flex-shrink: 0; position: relative; padding-left: 16px; }
  & .header-logo span { color: var(--black); }
  & .btn-back { background: none; border: none; color: var(--dark-gray); font-size: 26px; line-height: 1; padding: 0 6px; margin-left: -8px; cursor: pointer; flex-shrink: 0; transition: color 150ms, transform 150ms; transform: scaleX(1.3); }
  & .btn-back:hover { color: var(--red); transform: scaleX(1.3) translateX(-2px); }
  & .header-title { font-size: 14px; font-weight: 500; color: var(--dark-gray); padding-left: 16px; position: relative; }
  & .report-titel-wrap { display: flex; align-items: center; gap: 8px; padding-left: 16px; position: relative; }
  /* Einheitliche Header-Trennlinien: feste Höhe, mittig – unabhängig von der Elementhöhe (Titel-Feld ist höher) */
  & .header-logo::before, & .header-title::before, & .report-titel-wrap::before {
    content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 1px; height: 22px; background: var(--border);
  }
  & .report-titel-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--disabled); font-weight: 700; }
  & .report-titel { font-size: 14px; font-weight: 600; color: var(--black); border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; min-width: 240px; max-width: 360px; background: var(--white); white-space: nowrap; overflow: hidden; min-height: 1.2em; cursor: text; }
  & .report-titel:hover { border-color: var(--disabled); }
  & .report-titel:focus { border-color: var(--red); box-shadow: 0 0 0 2px color-mix(in srgb, var(--red) 12%, transparent); outline: none; }
  & .report-titel:empty:before { content: attr(data-placeholder); color: var(--disabled); font-weight: 400; font-style: italic; }
  & .req { color: var(--red); font-weight: 700; margin-left: 2px; cursor: help; }
  & input.field-req { background: color-mix(in srgb, var(--red) 6%, var(--white)); border-color: color-mix(in srgb, var(--red) 35%, var(--border)); }
  & input.field-req:focus { border-color: var(--red); }
  & .header-spacer { flex: 1; }
  & .save-indicator { font-size: 12px; color: var(--disabled); display: flex; align-items: center; gap: 6px; opacity: 0; transition: opacity 0.3s; }
  & .save-indicator.visible { opacity: 1; }
  & .sync-status { font-size: 12px; color: var(--disabled); margin: 0 4px; white-space: nowrap; }
  & .sync-status.ok { color: #1B7F3B; }
  & .sync-status.warn { color: #996A00; }
  /* Sitzungs-Banner (toter Token). ID-Selektoren aus demselben Grund wie bei #isa-update-banner
     oben: der harte Reset von body.page-editor (& *, …) hat (0,1,1) und schlüge eine reine
     Klassenregel. Verankert oben RECHTS unter dem Header – unten rechts sitzt schon das
     Update-Banner des Serviceworkers, beide können gleichzeitig auftreten.
     z-index 150 wie dort: über Header und Pager (100), unter allen Modalen. */
  & #session-banner { display: none; }
  & #session-banner.show {
    position: fixed; top: calc(var(--header-height) + 16px); right: 16px; z-index: 150;
    display: flex; align-items: center; gap: 12px;
    max-width: calc(100vw - 32px);
    padding: 12px 14px; border-radius: 8px;
    background: var(--black); color: var(--white);
    font-size: 13px; line-height: 1.3;
    box-shadow: 0 6px 24px rgba(0,0,0,0.28);
  }
  & #session-relogin-btn {
    flex-shrink: 0;
    font-family: inherit; font-size: 13px; font-weight: 600;
    background: var(--red); color: var(--white);
    border: none; border-radius: 6px; padding: 7px 12px;
    cursor: pointer; white-space: nowrap;
  }
  & #session-relogin-btn:hover { background: var(--red-hover); }
  & .save-dot { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; }
  & .btn-icon { background: none; border: 1px solid var(--border); border-radius: 6px; padding: 6px 12px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--dark-gray); transition: all 150ms; display: flex; align-items: center; gap: 6px; }
  & .btn-icon:hover { border-color: var(--red); color: var(--red); }
  & #layout { display: flex; height: 100vh; padding-top: var(--header-height); }
  & #sidebar { width: var(--sidebar-width); flex-shrink: 0; background: var(--light-gray); border-right: 1px solid var(--border); overflow-y: auto; overflow-x: hidden; position: fixed; top: var(--header-height); bottom: var(--pager-height); left: 0; }
  & .sidebar-section-group { padding: 8px 0; }
  & .sidebar-tab-bar { display: flex; border-bottom: 1px solid var(--border); }
  & .sidebar-tab { flex: 1; padding: 8px 4px; font-size: 11px; font-weight: 600; text-align: center; cursor: pointer; color: var(--disabled); border-bottom: 2px solid transparent; transition: all 120ms; }
  & .sidebar-tab.active { color: var(--red); border-bottom-color: var(--red); }
  /* Sidebar-Item: Name links, Fähnchen mittig-rechts, Dot ganz rechts */
  & .sidebar-item { display: flex; align-items: center; gap: 6px; padding: 10px 12px; cursor: pointer; font-size: 13px; font-weight: 400; color: var(--dark-gray); border-left: 3px solid transparent; transition: all 100ms; position: relative; }
  & .sidebar-item:hover { background: var(--border); color: var(--black); }
  & .sidebar-item.active { background: var(--white); color: var(--red); font-weight: 600; border-left-color: var(--red); }
  & .sidebar-item .item-num { font-size: 11px; color: var(--disabled); min-width: 24px; flex-shrink: 0; }
  & .sidebar-item.active .item-num { color: var(--red); }
  & .sidebar-item .item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Fähnchen: standardmäßig unsichtbar, nur sichtbar wenn .active */
  & .sidebar-item .item-flag { font-size: 11px; flex-shrink: 0; display: none; color: var(--red); }
  & .sidebar-item .item-flag.active { display: inline; }
  & .sidebar-item .item-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border); flex-shrink: 0; }
  & .sidebar-item .item-dot.has-data { background: #22c55e; }
  & .sidebar-bookmarks { padding: 8px 0; display: none; }
  & .sidebar-bookmarks.show { display: block; }
  & .bookmark-link { display: flex; align-items: center; gap: 8px; padding: 8px 16px; cursor: pointer; font-size: 12px; color: var(--dark-gray); }
  & .bookmark-link:hover { background: var(--border); }
  & .bookmark-link::before { content: '⚑'; font-size: 11px; }
  /* U-11: gemerkte Elemente hängen eingerückt unter ihrer Rubrik. `.bookmark-group` ist eine
     Rubrik, die NUR wegen eines Elements in der Liste steht – das Fähnchen ist deshalb blass,
     sie ist nicht selbst gemerkt. */
  & .bookmark-link.bookmark-group::before { opacity: 0.35; }
  & .bookmark-link.bookmark-sub { padding: 6px 16px 6px 34px; font-size: 11px; color: var(--disabled); }
  & .bookmark-link.bookmark-sub::before { content: '›'; font-size: 12px; }
  & .bookmark-link.bookmark-sub:hover { color: var(--black); }
  & #main { margin-left: var(--sidebar-width); flex: 1; overflow-y: auto; padding-bottom: 24px; }
  & .section-wrapper { max-width: 800px; margin: 0 auto; padding: 40px; }
  & .section-header { margin-bottom: 32px; position: relative; }
  & .section-header h1 { font-size: 26px; font-weight: 700; color: var(--black); margin-bottom: 8px; padding-right: 120px; }
  & .section-header p { font-size: 14px; color: var(--dark-gray); }
  & .section-intro { background: var(--light-gray); border-left: 3px solid var(--red); border-radius: 0 6px 6px 0; padding: 14px 16px; margin-bottom: 24px; font-size: 13px; color: var(--dark-gray); line-height: 1.6; }
  & .bookmark-btn { position: absolute; top: 0; right: 0; background: none; border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: 13px; color: var(--disabled); transition: all 120ms; }
  & .bookmark-btn:hover, & .bookmark-btn.active { border-color: var(--red); color: var(--red); }
  & .card { background: var(--white); border: 1px solid var(--border); border-radius: 6px; padding: 24px; margin-bottom: 24px; }
  & .card-title { font-size: 14px; font-weight: 700; color: var(--black); margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }
  & .card-title::before { content: ''; display: block; width: 3px; height: 16px; background: var(--red); border-radius: 2px; }
  & .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  & .col-span-2 { grid-column: 1 / -1; }
  & .form-group { display: flex; flex-direction: column; gap: 6px; align-self: start; }
  & .form-group label { font-size: 12px; font-weight: 500; color: var(--dark-gray); }
  & .form-group input[type="text"], & .form-group input[type="number"], & .form-group input[type="date"],
  & .form-group textarea, & .form-group select {
    border: 1px solid var(--border); border-radius: 6px; padding: 9px 12px; font-size: 14px;
    font-family: Inter, sans-serif; color: var(--black); background: var(--white);
    transition: border-color 150ms; width: 100%; outline: none;
  }
  & .form-group input:focus, & .form-group textarea:focus, & .form-group select:focus { border-color: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 10%, transparent); }
  & .form-group textarea { resize: vertical; min-height: 80px; }
  & .form-group select { cursor: pointer; }
  /* O-1: Abstands-Utilities statt wiederholter Inline-Styles */
  & .mt-8 { margin-top: 8px; }
  & .mt-12 { margin-top: 12px; }
  & .settings-box .form-group, & .settings-box .form-grid { margin-bottom: 12px; }
  & .radio-group { display: flex; gap: 0; }
  & .radio-group label { flex: 1; text-align: center; padding: 8px 12px; font-size: 13px; font-weight: 500; cursor: pointer; border: 1px solid var(--border); background: var(--white); color: var(--dark-gray); transition: all 120ms; white-space: nowrap; }
  & .radio-group label:first-child { border-radius: 6px 0 0 6px; }
  & .radio-group label:last-child { border-radius: 0 6px 6px 0; }
  & .radio-group label:not(:last-child) { border-right: none; }
  & .radio-group input[type="radio"] { display: none; }
  & .radio-group input[type="radio"]:checked + label { background: var(--red); color: var(--white); border-color: var(--red); z-index: 1; }
  & .repeat-container { display: flex; flex-direction: column; gap: 16px; margin-bottom: 16px; }
  & .repeat-item { border: 1px solid var(--border); border-radius: 6px; padding: 20px; background: var(--light-gray); position: relative; scroll-margin-top: 12px; }
  & .repeat-item-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 8px; }
  & .repeat-item-title { font-size: 13px; font-weight: 700; color: var(--black); flex: 1; }
  /* U-6: gemeinsame Basis für beide Buttons der Kopfzeile. Feste height + line-height:1 +
     align-items:center sind der eigentliche Fix: das Fähnchen-Glyph ⚑ bringt sonst eine
     eigene Zeilenhöhe mit und macht seinen Button höher als den daneben. */
  & .btn-remove, & .btn-block-bookmark { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 28px; padding: 0 10px; line-height: 1; background: none; border: 1px solid var(--border); border-radius: 4px; cursor: pointer; font-size: 12px; color: var(--disabled); transition: all 120ms; flex-shrink: 0; }
  & .btn-remove { width: 28px; padding: 0; }   /* nur Papierkorb-Icon, quadratisch */
  & .btn-remove:hover { border-color: var(--red); color: var(--red); }
  /* Inline-Fähnchen im Wiederholungs-Block */
  & .btn-block-bookmark:hover, & .btn-block-bookmark.active { border-color: var(--red); color: var(--red); }
  /* U-5: Repeat-Items einklappbar. Ausgeblendet wird per CSS, nicht durch Abriss des DOM –
     sonst brechen reRenderSonstigesItem() (ersetzt .form-grid) und addNestedAndUpdate()
     (ersetzt das Item per outerHTML). !important, weil einzelne Kinder Inline-Styles
     tragen (z.B. #vlans_section_<i> mit display:block). */
  & .repeat-item.collapsed > *:not(.repeat-item-header) { display: none !important; }
  & .repeat-item.collapsed { padding: 10px 14px; }
  & .repeat-item.collapsed .repeat-item-header { margin-bottom: 0; }
  & .repeat-item-toggle { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; background: none; border: none; cursor: pointer; color: var(--disabled); flex-shrink: 0; transition: transform 150ms, color 120ms; }
  & .repeat-item-toggle:hover { color: var(--red); }
  & .repeat-item.collapsed .repeat-item-toggle { transform: rotate(-90deg); }
  & .repeat-item-header .repeat-item-title { cursor: pointer; }
  & .repeat-collapse-bar { display: flex; gap: 4px; justify-content: flex-end; margin-bottom: 8px; }
  & .btn-mini-link { background: none; border: none; padding: 2px 6px; font-size: 12px; color: var(--dark-gray); cursor: pointer; text-decoration: underline; }
  & .btn-mini-link:hover { color: var(--red); }
  & .btn-add { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: var(--white); border: 1px dashed var(--red); border-radius: 6px; color: var(--red); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 150ms; }
  & .btn-add:hover { background: color-mix(in srgb, var(--red) 4%, transparent); }
  & .photo-area { border: 1px dashed var(--border); border-radius: 6px; padding: 20px; text-align: center; cursor: pointer; transition: border-color 150ms; }
  & .photo-area:hover { border-color: var(--red); }
  & .photo-area input { display: none; }
  & .photo-area p { font-size: 13px; color: var(--disabled); margin-top: 8px; }
  & .photo-preview { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  & .photo-thumb { position: relative; width: 80px; height: 80px; }
  & .photo-thumb img { width: 80px; height: 80px; object-fit: cover; border-radius: 4px; border: 1px solid var(--border); }
  & .photo-thumb .remove-photo { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; background: var(--red); border: none; border-radius: 50%; color: white; font-size: 11px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
  /* N-3: Seitenwechsler – kleine fixierte Leiste unten über der Sidebar */
  & #sidebar-pager { position: fixed; bottom: 0; left: 0; width: var(--sidebar-width); height: var(--pager-height); background: var(--white); border-top: 1px solid var(--border); border-right: 1px solid var(--border); display: flex; align-items: center; justify-content: center; gap: 24px; z-index: 100; }
  & .pager-divider { width: 1px; height: 22px; background: var(--border); flex-shrink: 0; }
  & .pager-btn { background: none; border: none; color: var(--dark-gray); font-size: 26px; line-height: 1; padding: 0 10px; cursor: pointer; transition: color 150ms, transform 150ms; transform: scaleX(1.3); }
  & .pager-btn:hover:not(:disabled) { color: var(--red); }
  & #pager-prev:hover:not(:disabled) { transform: scaleX(1.3) translateX(-2px); }
  & #pager-next:hover:not(:disabled) { transform: scaleX(1.3) translateX(2px); }
  & #pager-prev:active:not(:disabled) { transform: scaleX(1.3) translateX(-2px) scale(0.82); }
  & #pager-next:active:not(:disabled) { transform: scaleX(1.3) translateX(2px) scale(0.82); }
  & .pager-btn:disabled { opacity: .35; cursor: default; }
  & .btn-primary { background: var(--red); color: var(--white); border: none; border-radius: 6px; padding: 10px 20px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 150ms; display: inline-flex; align-items: center; gap: 8px; }
  & .btn-primary:hover { background: var(--red-hover); }
  & .btn-primary:active { background: var(--red-active); transform: scale(0.98); }
  & .btn-secondary { background: var(--white); color: var(--red); border: 1px solid var(--red); border-radius: 6px; padding: 10px 20px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 150ms; display: inline-flex; align-items: center; gap: 8px; }
  & .btn-secondary:hover { background: var(--light-gray); }
  & .btn-outline { background: var(--white); color: var(--dark-gray); border: 1px solid var(--border); border-radius: 6px; padding: 10px 20px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 150ms; display: inline-flex; align-items: center; gap: 8px; }
  /* O-7: echte Aktions-Buttons beim Klick kurz zusammenziehen (Kacheln/Karten bewusst ausgenommen) */
  & .btn-icon:active, & .btn-primary:active, & .btn-secondary:active, & .btn-outline:active, & .btn-add:active, & .btn-remove:active,
  & .btn-block-bookmark:active, & .card-bookmark-btn:active, & .bookmark-btn:active { transform: scale(0.97); }
  & .btn-back:active { transform: scaleX(1.3) scale(0.97); }
  & .btn-outline:hover { border-color: var(--dark-gray); color: var(--black); }
  /* Abschluss: Export-/Import-Buttons gleich groß (Grid, gleiche Spaltenbreite) */
  & .export-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
  & .export-grid > button { justify-content: center; }
  & #modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; }
  & #modal-overlay.open { display: flex; align-items: center; justify-content: center; }
  /* PDF-Ladeindikator: liegt über allem (auch über dem Vorschau-Modal, z-index 200) */
  & #pdf-loading { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 300; align-items: center; justify-content: center; }
  & #pdf-loading.show { display: flex; }
  & .pdf-loading-box { background: var(--white); color: var(--black); border-radius: 8px; padding: 24px 32px; display: flex; align-items: center; gap: 14px; font-size: 14px; font-weight: 600; box-shadow: 0 8px 32px rgba(0,0,0,0.25); }
  & .pdf-spinner { width: 22px; height: 22px; border: 3px solid var(--border); border-top-color: var(--red); border-radius: 50%; animation: spin 700ms linear infinite; flex-shrink: 0; }
  & .modal { background: var(--white); border-radius: 8px; width: 95vw; height: 95vh; max-width: 1600px; overflow: hidden; display: flex; flex-direction: column; }
  & .modal-header { padding: 20px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
  & .modal-header h2 { font-size: 18px; font-weight: 700; }
  & .modal-close { background: none; border: 1px solid var(--border); border-radius: 4px; padding: 6px 12px; cursor: pointer; font-size: 13px; }
  & .modal-body { flex: 1; overflow: hidden; padding: 0; }
  & .modal-body iframe { width: 100%; height: 100%; min-height: calc(95vh - 130px); border: none; }
  & .modal-footer { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; gap: 12px; justify-content: flex-end; flex-shrink: 0; }
  & #settings-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 300; }
  & #settings-modal.open { display: flex; align-items: center; justify-content: center; }
  & .settings-box { background: var(--white); border-radius: 8px; width: 540px; padding: 32px; max-height: 90vh; overflow-y: auto; }
  & .settings-box h2 { font-size: 18px; font-weight: 700; margin-bottom: 20px; }
  /* U-6: generischer Bestätigungsdialog (löst confirm() beim Löschen ab). z-index über
     allen anderen Modals, damit er auch aus einem offenen Dialog heraus sichtbar bleibt. */
  & #confirm-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 400; }
  & #confirm-modal.open { display: flex; align-items: center; justify-content: center; }
  & .confirm-box { background: var(--white); border-radius: 8px; width: 440px; max-width: 92vw; padding: 28px; box-shadow: 0 8px 32px rgba(0,0,0,0.25); }
  & .confirm-box h2 { font-size: 17px; font-weight: 700; margin-bottom: 10px; }
  & .confirm-box p { font-size: 14px; color: var(--dark-gray); line-height: 1.5; margin-bottom: 24px; }
  & .confirm-footer { display: flex; gap: 12px; justify-content: flex-end; }
  /* Der Konflikt-Dialog hat DREI Knoepfe. Sie sind zusammen ueber 470 px breit und passen damit
     nicht in die 440-px-Box (384 px Innenbreite) – nebeneinander brachen sie unsauber um, mit
     einem einzelnen rechtsbuendigen Knopf in der zweiten Zeile. Gestapelt statt gequetscht.
     column-reverse: die DOM-Reihenfolge (Abbrechen, Alternative, OK) bleibt fuer die Tastatur
     richtig – Abbrechen bekommt den Fokus und ist der erste Tab-Stopp – waehrend optisch die
     sichere Hauptwahl oben steht und Abbrechen unten. Umgeschaltet von askConfirm(). */
  & .confirm-footer.dreifach { flex-direction: column-reverse; align-items: stretch; }
  /* .btn-primary/.btn-outline sind inline-flex ohne justify-content: ueber die volle Breite
     gestreckt klebte die Beschriftung sonst links. */
  & .confirm-footer.dreifach button { justify-content: center; }
  /* ⚠️ ZWINGEND, nicht kosmetisch: .btn-outline setzt display:inline-flex und schlaegt damit das
     hidden-Attribut des Browsers. Ohne diese Regel steht der dritte Knopf (#confirm-alt) in JEDEM
     Loeschdialog – dort ist er sinnlos und tut nichts. */
  & .confirm-footer button[hidden] { display: none; }
  /* Scan-Import-Vorschau: breiter als die Settings-Box, weil eine Tabelle darin steht. */
  & #scan-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 300; }
  & #scan-modal.open { display: flex; align-items: center; justify-content: center; }
  & .scan-box { background: var(--white); border-radius: 8px; width: 1000px; max-width: 95vw; max-height: 90vh; padding: 28px; display: flex; flex-direction: column; }
  & .scan-box h2 { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
  & .scan-hint { font-size: 13px; color: var(--dark-gray); margin-bottom: 16px; }
  & .scan-tabelle-wrap { overflow: auto; flex: 1; border: 1px solid var(--border); border-radius: 6px; }
  & .scan-tabelle { width: 100%; border-collapse: collapse; font-size: 13px; }
  & .scan-tabelle th { position: sticky; top: 0; background: var(--light-gray); text-align: left; padding: 8px 10px; font-weight: 600; border-bottom: 1px solid var(--border); white-space: nowrap; }
  & .scan-tabelle td { padding: 6px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
  & .scan-tabelle tr:last-child td { border-bottom: none; }
  & .scan-tabelle td.mono { font-family: ui-monospace, Consolas, monospace; white-space: nowrap; }
  & .scan-tabelle select { border: 1px solid var(--border); border-radius: 5px; padding: 4px 6px; font-size: 12px; width: 100%; background: var(--white); color: var(--black); }
  & .scan-badge { font-size: 11px; padding: 2px 7px; border-radius: 10px; white-space: nowrap; }
  & .scan-badge.neu { background: #E7F5EC; color: #1B7A3D; }
  & .scan-badge.upd { background: #FFF3E0; color: #A65B00; }
  & .scan-rest { font-size: 11px; color: var(--dark-gray); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  & .scan-footer { padding-top: 16px; display: flex; gap: 12px; align-items: center; justify-content: flex-end; }
  & .scan-zaehler { margin-right: auto; font-size: 13px; color: var(--dark-gray); }
  & .settings-section-title { font-size: 12px; font-weight: 700; color: var(--dark-gray); text-transform: uppercase; letter-spacing: 0.5px; margin: 20px 0 10px; border-top: 1px solid var(--border); padding-top: 16px; }
  & .settings-section-title:first-of-type { border-top: none; padding-top: 0; }
  & .tag { display: inline-block; background: color-mix(in srgb, var(--red) 10%, transparent); color: var(--red); font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 4px; }
  & .hint { font-size: 12px; color: var(--disabled); margin-top: 4px; }
  & .info-box { background: color-mix(in srgb, var(--red) 5%, transparent); border-left: 3px solid var(--red); padding: 12px 16px; border-radius: 0 6px 6px 0; margin-bottom: 20px; font-size: 13px; }
  & .gz-row { display: grid; grid-template-columns: 48px 60px 1fr 1fr; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); }
  & .gz-row:last-child { border-bottom: none; }
  & .gz-row label.day-label { font-size: 13px; font-weight: 500; color: var(--dark-gray); cursor: pointer; }
  & .gz-row input[type="checkbox"] { cursor: pointer; width: 16px; height: 16px; accent-color: var(--red); }
  & .gz-row input[type="time"] { border: 1px solid var(--border); border-radius: 4px; padding: 5px 8px; font-size: 13px; font-family: Inter, sans-serif; }
  & .gz-row input[type="time"]:disabled { background: var(--light-gray); color: var(--disabled); }
  & .repeat-item.just-added { border-color: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 10%, transparent); animation: pulse 800ms ease; }
  /* Gemerkter Card-Block / Repeat-Item: rote Umrandung */
  /* Glow folgt dem Theme-Akzent (var(--red)) – sonst bliebe er im Syn-/Dunkel-Mode rot */
  & .card.block-bookmarked, & .repeat-item.block-bookmarked { border-color: var(--red); box-shadow: 0 0 0 2px color-mix(in srgb, var(--red) 20%, transparent); }
  & .card-bookmark-btn { background: none; border: 1px solid var(--border); border-radius: 4px; padding: 3px 8px; cursor: pointer; font-size: 12px; color: var(--disabled); transition: all 120ms; margin-left: auto; flex-shrink: 0; }
  & .card-bookmark-btn:hover, & .card-bookmark-btn.active { border-color: var(--red); color: var(--red); }
  & .nested-repeat { background: var(--white); border: 1px solid var(--border); border-radius: 4px; padding: 12px; margin-top: 8px; }
  & .nested-repeat-title { font-size: 12px; font-weight: 700; color: var(--dark-gray); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; }
  & .nested-item { display: grid; gap: 8px; padding: 8px; background: var(--light-gray); border-radius: 4px; margin-bottom: 8px; position: relative; }
  & .nested-item .btn-remove-mini { position: absolute; top: 4px; right: 4px; background: none; border: none; color: var(--disabled); cursor: pointer; font-size: 14px; width: 20px; height: 20px; border-radius: 3px; display: flex; align-items: center; justify-content: center; padding: 0; }
  & .nested-item .btn-remove-mini:hover { background: var(--white); color: var(--red); }
  & .btn-add-mini { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--white); border: 1px dashed var(--border); border-radius: 4px; color: var(--dark-gray); font-size: 12px; font-weight: 500; cursor: pointer; transition: all 120ms; }
  & .btn-add-mini:hover { border-color: var(--red); color: var(--red); }
  & .device-choice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
  & .device-choice button { padding: 20px 16px; background: var(--white); border: 2px solid var(--border); border-radius: 8px; cursor: pointer; transition: all 150ms; font-size: 14px; font-weight: 600; color: var(--dark-gray); display: flex; flex-direction: column; align-items: center; gap: 8px; }
  & .device-choice button:hover { border-color: var(--red); color: var(--red); background: color-mix(in srgb, var(--red) 3%, transparent); }
  & .device-choice button .dc-icon { display: flex; align-items: center; justify-content: center; }
  & .device-choice button .dc-hint { font-size: 11px; font-weight: 400; color: var(--disabled); }
  & .btn-quick { background: var(--white); color: var(--dark-gray); border: 1px solid var(--border); border-radius: 6px; padding: 6px 12px; font-size: 12px; font-weight: 500; cursor: pointer; transition: all 120ms; }
  & .btn-quick:hover { border-color: var(--red); color: var(--red); }
  & .cond-box { overflow: hidden; transition: max-height 0.3s ease, opacity 0.2s ease; max-height: 0; opacity: 0; }
  & .cond-box.show { max-height: none; opacity: 1; }

  /* Odoo-Erbe, Teil 2: Modal-Overlays vollflächig pinnen + hoher z-index, damit sie über
     dem ISA-Header liegen. Wirkt auch ohne Odoo – bleibt deshalb bestehen. */
  & #modal-overlay, & #settings-modal, & #scan-modal, & #confirm-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    z-index: 99999 !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   4. LISTE + LOGIN  (index.html)  –  <body class="page-liste">
   ═══════════════════════════════════════════════════════════════ */
body.page-liste {
  background: var(--light-gray);
  box-sizing: border-box;

  & * { box-sizing: border-box; }

  & .hidden { display: none !important; }
  & header { background: var(--white); border-bottom: 2px solid var(--red); padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; }
  & header h1 { margin: 0; font-size: 20px; }
  & header h1 span { color: var(--red); }
  & .userbox { font-size: 13px; color: var(--dark-gray); display: flex; gap: 12px; align-items: center; }
  & .wrap { max-width: 1100px; margin: 0 auto; padding: 24px; }
  & button { font-family: inherit; font-size: 14px; border: 1px solid var(--border); background: var(--white); border-radius: 6px; padding: 8px 14px; cursor: pointer; transition: transform 120ms, background 120ms; }
  & button:hover { background: var(--light-gray); }
  & button:active:not(:disabled) { transform: scale(0.97); }
  & button.primary { background: var(--red); color: var(--white); border-color: var(--red); }
  & button.primary:hover { background: var(--red-hover); }
  & button:disabled { opacity: .5; cursor: not-allowed; }
  & input[type=text], & input[type=email], & input[type=password] { font-family: inherit; font-size: 14px; border: 1px solid var(--border); border-radius: 6px; padding: 9px 12px; width: 100%; }
  /* Login */
  & .login-card { max-width: 380px; margin: 8vh auto; background: var(--white); border: 1px solid var(--border); border-radius: 10px; padding: 28px; }
  & .login-card h2 { margin: 0 0 4px; }
  & .login-card p { margin: 0 0 20px; color: var(--dark-gray); font-size: 13px; }
  & .field { margin-bottom: 14px; }
  & .field label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 5px; color: var(--dark-gray); }
  & .err { color: var(--red); font-size: 13px; margin-top: 10px; min-height: 18px; }
  /* Toolbar */
  & .toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
  & .toolbar .spacer { flex: 1; }
  & .banner { background: #FFF8E1; border: 1px solid #FFE082; color: var(--warn); padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; font-size: 13px; }
  /* Trenner zwischen Provider-Anmeldung und Passwortformular. Faellt mit dem Passwortweg weg,
     sobald der nur noch ein Weg ist. */
  & .oauth-trenner { display: flex; align-items: center; gap: 10px; margin: 16px 0; font-size: 12px; color: var(--dark-gray); }
  & .oauth-trenner::before, & .oauth-trenner::after { content: ''; flex: 1; height: 1px; background: var(--border); }
  /* Table */
  & table { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
  & th, & td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 14px; }
  & th { background: var(--light-gray); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--dark-gray); }
  & tr:last-child td { border-bottom: none; }
  & td.title-cell input { border: 1px solid transparent; background: transparent; padding: 6px 8px; }
  & td.title-cell input:hover { border-color: var(--border); }
  & td.title-cell input:focus { border-color: var(--red); background: var(--white); }
  /* Titel als contenteditable-<div> (kein echtes Formularfeld → kein Passwortmanager-Autofill) */
  & td.title-cell .titel { border: 1px solid transparent; background: transparent; padding: 6px 8px; border-radius: 6px; min-height: 1.4em; outline: none; font-size: 14px; white-space: nowrap; overflow: hidden; }
  & td.title-cell .titel:hover { border-color: var(--border); }
  & td.title-cell .titel:focus { border-color: var(--red); background: var(--white); }
  & td.title-cell .titel:empty:before { content: attr(data-placeholder); color: var(--disabled); }
  & .badge { display: inline-block; font-size: 11px; padding: 2px 7px; border-radius: 10px; margin-left: 6px; }
  & .badge.local { background: #FFF3CD; color: var(--warn); }
  & .badge.dirty { background: #E7F0FF; color: #1256b8; }
  & .row-actions { display: flex; gap: 6px; justify-content: flex-end; }
  /* Analysenummer (I-20260723NE) und Datum sind unteilbar – ohne nowrap bricht der
     Browser sie um, sobald der Titel breit wird, und die Zeile wird doppelt hoch.
     Die Titelspalte gibt den Platz ab, sie schneidet ohnehin ab (.titel: overflow:hidden). */
  & th.nowrap, & td.nowrap { white-space: nowrap; }
  /* Icon-Buttons der Zeilenaktionen: quadratisch, Icon mittig (Bearbeiten, Löschen) */
  & button.btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; line-height: 1; }
  /* Klicks gehen an den Button, nicht an das SVG darin – sonst ist e.target das <svg>
     bzw. ein <path>, und Handler, die e.target als Button behandeln, laufen ins Leere. */
  & button svg { pointer-events: none; }
  & .btn-danger { color: var(--red); border-color: #F3C2C2; }
  & .btn-danger:hover { background: #FDECEC; }
  & .empty { padding: 40px; text-align: center; color: var(--disabled); }
  & .status-select { font-family: inherit; font-size: 13px; border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; }
  & .theme-select { font-family: inherit; font-size: 13px; border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; background: var(--white); color: var(--black); }
  & .more-row { margin-top: 12px; text-align: center; }
  /* Merge-Modal */
  & .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
  & .modal-card { background: var(--white); border-radius: 10px; max-width: 520px; width: 100%; padding: 26px; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
  & .modal-card h2 { margin: 0 0 4px; }
  & .modal-sub { margin: 0 0 18px; color: var(--dark-gray); font-size: 13px; }
  & .lead-toggle { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
  & .lead-toggle label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 400; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; }
  & .lead-toggle input { margin: 0; }
  & .merge-stats { background: var(--light-gray); border-radius: 6px; padding: 12px 14px; font-size: 13px; line-height: 1.7; color: var(--dark-gray); margin: 16px 0; }
  & .merge-stats b { color: var(--black); }
  & .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
}
