/* geometry UI v2 — Design-System, 1:1 aus design/mockup-v2-report.html uebernommen.
   Grundregel des Breitbild-Layouts (UIUX_V2.md §4): die Breite gehoert den DATEN, nicht dem
   Fliesstext. Prosa bleibt bei 72 Zeichen, Tabellen/Diagramme/Matrizen nehmen die volle Breite.
   Farben sind die validierte Dataviz-Referenzpalette (Validator: alle Checks bestanden, aqua
   braucht wegen Kontrast Direktbeschriftung — die hat es ueberall). */
:root {
  color-scheme: light;
  --page:#f9f9f7; --surface:#fcfcfb; --sunk:#f2f2ee;
  --ink:#0b0b0b; --ink-2:#52514e; --ink-3:#898781;
  --grid:#e1e0d9; --baseline:#c3c2b7; --ring:rgba(11,11,11,.10);
  --blue:#2a78d6; --orange:#eb6834; --aqua:#1baf7a;
  --good:#0ca30c; --warning:#fab219; --serious:#ec835a; --critical:#d03b3b;
  --rail-l:15rem; --rail-r:26rem;
}
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark;
    --page:#0d0d0d; --surface:#1a1a19; --sunk:#131312;
    --ink:#fff; --ink-2:#c3c2b7; --ink-3:#898781;
    --grid:#2c2c2a; --baseline:#383835; --ring:rgba(255,255,255,.10);
    --blue:#3987e5; --orange:#d95926; --aqua:#199e70; }
}
* { margin:0; box-sizing:border-box; }
body { font-family:system-ui,-apple-system,"Segoe UI",sans-serif; background:var(--page); color:var(--ink); line-height:1.5; }
a { color:var(--blue); }
.prose { max-width:72ch; }
h1 { font-size:1.5rem; letter-spacing:-.01em; }
h2 { font-size:.78rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); font-weight:600; margin-bottom:.8rem; }
h3 { font-size:.95rem; margin-bottom:.3rem; }
.tiny { font-size:.78rem; color:var(--ink-3); }
.muted { color:var(--ink-2); }
.num { font-variant-numeric:tabular-nums; }
.card { background:var(--surface); border:1px solid var(--ring); border-radius:14px; padding:1.15rem 1.3rem; }
.chip { display:inline-block; font-size:.72rem; border:1px solid var(--ring); border-radius:999px; padding:.1rem .55rem; color:var(--ink-2); white-space:nowrap; }
/* Wortmarke geoMetry. Die Bildmarke ist das 2x2-Raster der Antwort-Matrix: gefuellt =
   zitiert, Umriss = Marke genannt, blass = nicht vorgekommen. Sie folgt der Schriftgroesse
   und den Farbvariablen, also auch dem Dunkelmodus. */
.brand { display:inline-flex; align-items:center; gap:.45rem; font-weight:700; font-size:1rem;
         color:var(--ink); text-decoration:none; letter-spacing:-.01em; }
.brand .wm { color:var(--ink); }
.brand .wm b { color:var(--blue); font-weight:inherit; }
.brand .mark { width:1.3em; height:1.3em; flex:none; display:block; }
.btn { display:inline-block; border:1px solid var(--ring); background:var(--surface); color:var(--ink); border-radius:9px;
       padding:.42rem .85rem; font-size:.82rem; font-weight:600; text-decoration:none; cursor:pointer; }
.btn.primary { background:var(--blue); border-color:var(--blue); color:#fff; }
.note { border:1px solid var(--ring); border-left:4px solid var(--blue); border-radius:12px;
        padding:.75rem .95rem; font-size:.83rem; background:var(--surface); }
.note b { display:block; margin-bottom:.15rem; }
.note.warn { border-left-color:var(--warning); } .note.crit { border-left-color:var(--critical); }

/* ---------- drei Zonen ---------- */
.app { display:grid; grid-template-columns:var(--rail-l) minmax(0,1fr) var(--rail-r); gap:1.75rem;
       padding:1.5rem 2rem 5rem; align-items:start; max-width:2100px; margin-inline:auto; }
.rail { position:sticky; top:1.5rem; }
.rail .who { font-size:1.15rem; font-weight:700; line-height:1.2; word-break:break-word; }
.rail dl { margin:.9rem 0 1.2rem; font-size:.78rem; }
.rail dt { color:var(--ink-3); }
.rail dd { margin:0 0 .5rem; color:var(--ink); }
.rail .acts-top { display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:1rem; }
.nav a { display:block; font-size:.83rem; color:var(--ink-2); text-decoration:none; padding:.3rem 0 .3rem .7rem;
         border-left:2px solid var(--grid); }
.nav a.on, .nav a:hover { color:var(--ink); border-left-color:var(--blue); }
main { display:grid; gap:1.2rem; min-width:0; }
/* Grid- und Flex-Kinder haben min-width:auto und schrumpfen deshalb NICHT unter ihren Inhalt:
   eine breite Tabelle sprengt dann den Rahmen, obwohl .tblwrap scrollen koennte. Gemessen am
   2026-08-24: Startseite lief bei 390px um 475px ueber. Deshalb hier hart auf 0. */
.app > *, main > *, main > * > * { min-width:0; }

/* ---------- Hero ---------- */
.hero { display:grid; grid-template-columns:minmax(13rem,20rem) minmax(0,1fr); gap:2.5rem; align-items:start; }
.bignum { font-size:3.6rem; font-weight:700; line-height:1; letter-spacing:-.02em; }  /* proportional, NICHT tabular */
.bignum small { font-size:1.05rem; font-weight:600; color:var(--ink-3); }
.spread { font-size:.78rem; color:var(--ink-3); margin-top:.5rem; }
.axcap { font-size:.72rem; color:var(--ink-3); margin-bottom:.35rem; }

/* ---------- Antwort-Matrix ---------- */
.mxwrap { display:grid; grid-template-columns:auto minmax(0,1fr); gap:2.5rem; align-items:start; }
.matrix { display:grid; gap:6px; justify-content:start; }
.cell { aspect-ratio:1; border-radius:7px; border:1px solid var(--grid); background:var(--sunk);
        cursor:pointer; padding:0; transition:transform .08s; }
.cell.hit { background:var(--blue); border-color:var(--blue); }
.cell.brand { background:var(--surface); border:2px solid var(--blue); }
.cell:hover { outline:2px solid var(--ink-3); outline-offset:1px; }
.cell:active { transform:scale(.94); }
.mxlegend { display:flex; gap:1rem; font-size:.74rem; color:var(--ink-3); margin-top:.6rem; flex-wrap:wrap; }
.mxlegend i { width:11px; height:11px; border-radius:3px; display:inline-block; vertical-align:-1px; margin-right:.3rem; }
.hits { font-size:.8rem; }
.hits li { margin-bottom:.5rem; color:var(--ink-2); list-style:none; }
.hits li b { color:var(--ink); }
.hits .none { color:var(--ink-3); }
/* Miniatur fuer Listen: dieselbe Struktur, nur klein und nicht klickbar */
.mini { display:inline-grid; gap:2px; vertical-align:middle; }
.mini span { width:5px; height:5px; border-radius:1.5px; background:var(--grid); display:block; }
.mini span.h { background:var(--blue); }
.mini span.b { background:var(--surface); box-shadow:inset 0 0 0 1.5px var(--blue); }

/* ---------- Lift-Meter ---------- */
.lift { margin-top:1.1rem; }
.lifttrack { position:relative; height:10px; background:var(--sunk); border-radius:5px; }
.lifttrack i { display:block; height:100%; border-radius:5px; background:var(--blue); }
.liftref { position:absolute; top:-5px; bottom:-5px; width:2px; background:var(--baseline); left:33.3%; }
.liftlab { display:flex; justify-content:space-between; font-size:.72rem; color:var(--ink-3); margin-top:.35rem; }

/* ---------- Wettbewerbsfeld (Emphasis: eigene Domain farbig, Rest grau) ---------- */
.fieldrow { display:grid; grid-template-columns:18rem minmax(0,1fr) 3rem; gap:1rem; align-items:center;
            width:100%; background:none; border:0; padding:.3rem 0; cursor:pointer; text-align:left; color:inherit; font:inherit; }
.fname { font-size:.86rem; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fieldrow.own .fname { color:var(--ink); font-weight:700; }
.youare { font-size:.68rem; color:var(--blue); border:1px solid var(--blue); border-radius:999px; padding:0 .4rem; margin-left:.35rem; }
.ftrack { height:13px; background:var(--sunk); border-radius:4px; overflow:hidden; }
.ftrack i { display:block; height:100%; background:var(--baseline); border-radius:4px; }
.fieldrow.own .ftrack i { background:var(--blue); }
.fval { text-align:right; font-variant-numeric:tabular-nums; font-size:.86rem; font-weight:600; }
.fieldrow:hover .ftrack i { filter:brightness(.92); }

/* ---------- Saeulen ---------- */
.pillrow { display:grid; grid-template-columns:18rem minmax(0,1fr) 3rem 22rem; gap:1rem; align-items:center; padding:.42rem 0; }
.pname { font-size:.86rem; }
.ptrack { height:13px; background:var(--sunk); border-radius:4px; overflow:hidden; }
.ptrack i { display:block; height:100%; border-radius:4px; background:var(--blue); }
.ptrack i.warn { background:var(--warning); } .ptrack i.krit { background:var(--critical); }
.pval { text-align:right; font-weight:700; font-variant-numeric:tabular-nums; font-size:.86rem; }
.pev { font-size:.74rem; color:var(--ink-3); }
.pev.strong { color:var(--ink); font-weight:600; }

/* ---------- Kriterien: Master-Detail ---------- */
.filterbar { display:flex; gap:.5rem; margin-bottom:.6rem; flex-wrap:wrap; }
.fbtn { font-size:.76rem; border:1px solid var(--ring); background:var(--surface); color:var(--ink-2);
        border-radius:999px; padding:.2rem .7rem; cursor:pointer; }
.fbtn.on { background:var(--ink); color:var(--surface); border-color:var(--ink); }
.critrow { display:grid; grid-template-columns:.6rem 17rem minmax(0,1fr) 3rem 14rem 7rem; gap:1rem; align-items:center;
           width:100%; background:none; border:0; border-top:1px solid var(--grid); padding:.5rem .3rem; cursor:pointer;
           text-align:left; color:inherit; font:inherit; }
.critrow:hover, .critrow.sel { background:var(--sunk); }
.cdot { width:8px; height:8px; border-radius:50%; background:var(--good); }
.cdot.warn { background:var(--warning); } .cdot.krit { background:var(--critical); }
.cname { font-size:.86rem; }
.cprev { font-size:.79rem; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cpts { text-align:right; font-weight:700; font-variant-numeric:tabular-nums; font-size:.86rem; }
.cpts.warn { color:var(--warning); } .cpts.krit { color:var(--critical); }
.cmeta, .cev { font-size:.74rem; color:var(--ink-3); }

/* ---------- Massnahmen ---------- */
.acts { display:grid; gap:.55rem; }
@media (min-width:1400px) { .acts { grid-template-columns:1fr 1fr; } }
.act { display:grid; grid-template-columns:1.6rem minmax(0,1fr); gap:.7rem; border:1px solid var(--grid);
       border-radius:10px; padding:.7rem .85rem; background:var(--sunk); }
.rank { font-weight:700; color:var(--ink-3); }
.atxt { font-size:.87rem; } .asub { font-size:.74rem; color:var(--ink-3); margin-top:.2rem; }
.atags { grid-column:2; display:flex; gap:.35rem; flex-wrap:wrap; margin-top:.4rem; }

/* ---------- Engine-Karten ---------- */
.engines { display:grid; grid-template-columns:repeat(auto-fit,minmax(20rem,1fr)); gap:.9rem; }
.eng { border-left:4px solid var(--baseline); }
.eng.gemini { border-left-color:var(--blue); } .eng.azure { border-left-color:var(--orange); }
.eng .method { font-size:.74rem; color:var(--ink-2); margin-bottom:.6rem; }
.kv { display:flex; justify-content:space-between; gap:.6rem; font-size:.84rem; padding:.28rem 0; border-top:1px solid var(--grid); }
.kv b { font-variant-numeric:tabular-nums; text-align:right; }

/* ---------- Beleg-Lade ---------- */
aside { position:sticky; top:1.5rem; max-height:calc(100vh - 3rem); overflow:auto; }
.drawer h2 { display:flex; justify-content:space-between; align-items:center; }
.dclose { background:none; border:0; color:var(--ink-3); cursor:pointer; font-size:.78rem; }
.dempty { font-size:.82rem; color:var(--ink-3); }
.dq { font-size:.82rem; font-weight:600; margin-bottom:.4rem; }
.dans { font-size:.8rem; color:var(--ink-2); background:var(--sunk); border:1px solid var(--grid);
        border-radius:9px; padding:.6rem .7rem; margin-bottom:.5rem; }
.dcite { font-size:.72rem; color:var(--ink-3); word-break:break-all; margin-top:.35rem; }
.dhit { color:var(--good); font-weight:700; font-size:.76rem; }
.dmiss { color:var(--ink-3); font-size:.76rem; }
code { display:block; background:var(--sunk); border:1px solid var(--grid); border-radius:7px;
       padding:.5rem .6rem; font-size:.74rem; margin:.45rem 0; white-space:pre-wrap; word-break:break-word; }

/* ---------- Tabellen (Start, Vergleich) ---------- */
.tblwrap { overflow-x:auto; }
table.tbl { width:100%; border-collapse:collapse; font-size:.84rem; }
table.tbl th { text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3);
               padding:.4rem .55rem; border-bottom:1px solid var(--baseline); white-space:nowrap; }
table.tbl th.sortable { cursor:pointer; user-select:none; }
table.tbl th.sortable:hover { color:var(--ink); }
table.tbl td { padding:.5rem .55rem; border-bottom:1px solid var(--grid); vertical-align:middle; }
table.tbl tr.sub td { opacity:.75; }
table.tbl td.first { font-weight:600; }
.scorechip { display:inline-block; min-width:2.3rem; text-align:center; font-weight:700; font-variant-numeric:tabular-nums;
             border-radius:6px; padding:.1rem .35rem; border:1px solid var(--ring); }

/* ---------- Startseite ---------- */
.scanrow { display:flex; gap:.6rem; margin:1.2rem 0 1.6rem; }
.scanrow input { flex:1; font-size:1.05rem; padding:.8rem 1rem; border:1px solid var(--baseline); border-radius:11px;
                 background:var(--surface); color:var(--ink); }
.scanrow button { font-size:1rem; font-weight:700; padding:.8rem 1.7rem; border:0; border-radius:11px;
                  background:var(--blue); color:#fff; cursor:pointer; }

/* ---------- Scan-Zeitleiste ---------- */
.tl { display:grid; gap:0; }
.tlstep { display:grid; grid-template-columns:1.4rem 13rem minmax(0,1fr); gap:.8rem; align-items:baseline;
          padding:.55rem 0; border-top:1px solid var(--grid); font-size:.88rem; }
.tldot { width:11px; height:11px; border-radius:50%; background:var(--grid); align-self:center; }
.tlstep.run .tldot { background:var(--blue); box-shadow:0 0 0 4px color-mix(in srgb, var(--blue) 22%, transparent); }
.tlstep.ok .tldot { background:var(--good); }
.tlstep.fail .tldot { background:var(--critical); }
.tlstate { font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); }
.tlstep.run .tlstate { color:var(--blue); } .tlstep.ok .tlstate { color:var(--good); } .tlstep.fail .tlstate { color:var(--critical); }
.tldetail { font-size:.8rem; color:var(--ink-2); }

/* ---------- Vergleich ---------- */
.cmp th.dom { min-width:11rem; }
.cmp td.lab, .cmp th.lab { position:sticky; left:0; background:var(--surface); z-index:1; font-weight:600; min-width:15rem; }
.scatter { max-width:44rem; width:100%; }

/* ---------- Haltepunkte (am Mockup gemessen, UIUX_V2.md §4) ---------- */
@media (max-width:1700px) {
  .app { grid-template-columns:var(--rail-l) minmax(0,1fr); }
  aside { position:fixed; inset:0 0 0 auto; width:min(26rem,92vw); height:100vh; z-index:50;
          padding:1rem; overflow:auto; background:var(--page); border-left:1px solid var(--ring);
          transform:translateX(101%); transition:transform .18s ease; max-height:none; }
  aside.open { transform:none; box-shadow:-18px 0 40px rgba(0,0,0,.13); }
}
@media (max-width:1500px) { .mxwrap { grid-template-columns:minmax(0,1fr); gap:1.2rem; } }
@media (max-width:1100px) {
  .app { grid-template-columns:minmax(0,1fr); padding:1.2rem 1.2rem 4rem; }
  .rail { position:static; }
  .nav { display:flex; gap:.5rem; flex-wrap:wrap; } .nav a { border-left:0; border-bottom:2px solid var(--grid); }
  .pillrow { grid-template-columns:12rem minmax(0,1fr) 2.4rem; } .pev { grid-column:1/-1; }
  .critrow { grid-template-columns:.6rem minmax(0,1fr) 2.6rem; }
  .cprev, .cmeta, .cev { grid-column:2/-1; white-space:normal; }
  .tlstep { grid-template-columns:1.4rem minmax(0,1fr); } .tldetail { grid-column:2; }
}
@media (max-width:700px) {
  .hero { grid-template-columns:1fr; }
  .fieldrow { grid-template-columns:8rem minmax(0,1fr) 2.2rem; }
  .matrix { grid-template-columns:repeat(var(--cols,10), minmax(0,1fr)) !important; gap:4px; }
  aside { width:100vw; }
  .scanrow { flex-direction:column; }
}

/* --- Zwei Schichten: Gedaechtnis und Websuche (2026-09-16) -----------------------------------
   Gleiche Skala, gleiche Laenge, gleicher Nullpunkt fuer beide Balken: der Vergleich ist die
   Aussage. Die tragende Schicht wird durch FORM (gefuellter Balken in Akzentfarbe) betont, nicht
   durch eine zweite Farbe je Kategorie. */
.quad { display:grid; grid-template-columns:minmax(0,1fr) minmax(19rem,30rem); gap:2.5rem; align-items:start; }
.verdict { font-size:1.3rem; font-weight:700; line-height:1.25; margin:0 0 .6rem; letter-spacing:-.01em; }
.lay { display:block; width:100%; text-align:left; background:none; border:0; padding:.5rem 0 .7rem; cursor:pointer;
       font:inherit; color:inherit; border-top:1px solid var(--grid); }
.lay:first-of-type { border-top:0; }
.laytop { display:flex; justify-content:space-between; align-items:baseline; gap:.8rem; margin-bottom:.35rem; }
.layname { font-size:.84rem; font-weight:600; }
.layval { font-size:.8rem; color:var(--ink-3); white-space:nowrap; }
.layval b { font-size:1.15rem; color:var(--ink); font-weight:700; }
.laytrack { position:relative; display:block; height:15px; background:var(--sunk); border-radius:4px; overflow:hidden; }
.laytrack i { display:block; height:100%; border-radius:4px; background:var(--baseline); }
.lay.on .laytrack i { background:var(--blue); }
.laythr { position:absolute; top:0; bottom:0; width:2px; background:var(--surface); }
.lay:hover .laytrack i { filter:brightness(.92); }
@media (max-width:1100px) { .quad { grid-template-columns:minmax(0,1fr); gap:1.3rem; } }