:root{
    --ground:#070514; --panel:rgba(13,10,34,.78); --glass:rgba(21,17,50,.46);
    --line:rgba(var(--tint-rgb,236,233,255),.10); --line-2:rgba(var(--tint-rgb,236,233,255),.05);
    --ink:#f2f0ff; --ink-2:#a9a2d6; --ink-3:#8b86ab; --accent:#c98bff;
    --hw-r9700:#1c9ab8; --hw-evox2:#cb7815; --hw-cloud:#7b7796;
    --bar:rgba(172,162,255,.26); --bar-cap:rgba(214,208,255,.85);
    /* Reine Zahlenreihen fuer Stellen, die selbst eine Deckkraft setzen.
       bg.js ueberschreibt sie passend zur Palette. */
    --accent-rgb:201,139,255; --tint-rgb:236,233,255; --ground-rgb:7,5,20;
    --schleier-rgb:7,5,20;
    --ok:#4fd4a0; --warn:#e0a13a;
  }
  *{box-sizing:border-box}
  body{background:var(--ground);color:var(--ink);
    font-family:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;
    font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  #bg{position:fixed;inset:0;z-index:0}
  #bg canvas{display:block;width:100%;height:100%}
  /* Der Schleier nimmt die Grundfarbe der laufenden Palette. Fest verdrahtet
     blieb hier sonst ein violetter Stich ueber jedem anderen Farbton. */
  #bg::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(120% 80% at 50% 0%,
      rgba(var(--schleier-rgb,7,5,20),.12) 0%,
      rgba(var(--schleier-rgb,7,5,20),.72) 58%,
      rgba(var(--schleier-rgb,7,5,20),.94) 100%)}
  .page{position:relative;z-index:1}
  .wrap{max-width:1080px;margin:0 auto;padding:0 24px}
  .wide{max-width:1320px;margin:0 auto;padding:0 24px}

  /* ---- Kopfleiste ---- */
  header.top{position:sticky;top:0;z-index:40;
    backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);
    background:rgba(var(--ground-rgb,7,5,20),.68);border-bottom:1px solid var(--line-2)}
  .topin{position:relative;display:flex;align-items:center;gap:12px;height:52px;max-width:1320px;margin:0 auto;padding:0 24px}
  .mark{font-family:Archivo,sans-serif;font-weight:800;font-size:14.5px;letter-spacing:-.02em}
  .mark span{color:var(--ink-3);font-weight:600}
  .spacer{flex:1}
  .tbtn{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;
    background:transparent;color:var(--ink-3);border:1px solid var(--line);
    border-radius:999px;padding:5px 11px;cursor:pointer}
  .tbtn:hover{color:var(--ink);border-color:var(--accent)}
  .tbtn[aria-pressed="true"]{color:#fff;border-color:var(--accent);background:rgba(var(--accent-rgb,201,139,255),.16)}
  /* Szenenwahl. Sie hiess frueher 01-04 in breiten Pillen und nahm auf dem
     Telefon eine ganze Zeile ueber die volle Breite ein - vier fette Kapseln,
     die nach Platzhalter aussahen. Jetzt tragen die Knoepfe dieselbe Form und
     Groesse wie die Farbpunkte daneben: beide gehoeren zum Hintergrund, also
     sollen sie auch zusammengehoerig aussehen. Ein Haarstrich trennt die
     beiden Gruppen. */
  /* Sprunglink fuer die Tastatur. Er steht als erstes im Dokument und wird
     erst sichtbar, wenn er den Fokus hat - sonst muss man sich durch die
     ganze Kopfzeile tabben, bevor der Inhalt kommt. */
  .sprung{position:absolute;left:8px;top:-60px;z-index:100;
    background:var(--ground);color:var(--ink);border:1px solid var(--accent);
    padding:10px 16px;font-size:13px;text-decoration:none;transition:top .12s}
  .sprung:focus{top:8px}

  /* Sprungleiste. Woerter mit Unterstrich beim Ueberfahren, keine Kaesten -
     dieselbe Sprache wie die Reiter des Aufmachers. */
  /* Die Schublade haengt unter der Kopfzeile, nicht in ihr: in der Zeile
     wuerde sie dieselbe Breite beanspruchen wie vorher, und genau die sollte
     weg. Absolut gesetzt, rechtsbuendig am Zahnrad. */
  .tools{position:absolute;right:14px;top:100%;z-index:50;
    display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;
    max-width:min(94vw,420px);padding:12px 14px;
    background:rgba(var(--ground-rgb,7,5,20),.96);
    backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
    border:1px solid var(--line);border-top:0}
  .tools[hidden]{display:none}

  .zahn{display:inline-grid;place-items:center;width:32px;height:32px;padding:0;
    border-radius:999px}
  .zahn svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
  .zahn.an{color:var(--ink);border-color:var(--accent)}
  /* Der Sprachschalter ist zwei Buchstaben breit und braucht trotzdem eine
     Zielflaeche, die man mit dem Daumen trifft. */
  .tbtn.sprache{min-width:38px;justify-content:center;letter-spacing:.06em}
  .menu{display:flex;gap:0;min-width:0;overflow-x:auto;scrollbar-width:none;
    scroll-behavior:smooth}
  .menu::-webkit-scrollbar{display:none}

  /* Die weiche Kante zeigt an, auf welcher Seite noch etwas liegt. Das
     Datenattribut setzt common.js aus der Scrollstellung. Ohne Attribut
     bleibt die Leiste hart begrenzt: dann ist auch wirklich Schluss. */
  [data-rand]{--w:26px}
  [data-rand="rechts"]{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - var(--w)),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - var(--w)),transparent)}
  [data-rand="links"]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--w));
    mask-image:linear-gradient(90deg,transparent,#000 var(--w))}
  [data-rand="beide"]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--w),#000 calc(100% - var(--w)),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 var(--w),#000 calc(100% - var(--w)),transparent)}
  .menu a{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;
    letter-spacing:.04em;color:var(--ink-3);text-decoration:none;
    padding:9px 11px;white-space:nowrap;border-bottom:2px solid transparent}
  .menu a:hover{color:var(--ink)}
  .menu a:focus-visible{outline:2px solid var(--ink);outline-offset:-3px}
  /* Der Abschnitt, in dem man gerade steht, wird markiert - sonst weiss man
     nach dem Sprung nicht, wo man gelandet ist. */
  .menu a.hier{color:var(--ink);border-bottom-color:var(--accent)}

  /* Ein Sprungziel darf nicht unter der klebenden Kopfzeile landen. */
  :root{scroll-padding-top:64px}
  @media(max-width:760px){:root{scroll-padding-top:126px}}
  @media(max-width:760px){
    .menu{order:2;width:100%}
    .spacer{display:none}
    .tools{right:8px}
  }

  /* Farbpunkt der Maschine im Reiter und in der Folienzeile. */
  .sl-rp,.sl-op{display:inline-block;width:7px;height:7px;border-radius:50%;
    margin-right:7px;vertical-align:1px}

  .bgpick{display:flex;gap:3px;align-items:center;
    padding-right:9px;margin-right:3px;border-right:1px solid var(--line)}
  .bgpick .tbtn{width:30px;height:30px;padding:0;border:0;border-radius:8px;
    display:grid;place-items:center;font-size:10px;letter-spacing:.02em;
    color:var(--ink-3);background:transparent}
  .bgpick .tbtn:hover{color:var(--ink);background:rgba(var(--tint-rgb,236,233,255),.07)}
  /* Aktiv wird wie bei den Farbpunkten geringt, nicht gefuellt: gefuellt sah
     nach gedruecktem Knopf aus, geringt nach ausgewaehltem Zustand. */
  .bgpick .tbtn[aria-pressed="true"]{color:var(--ink);background:transparent;
    box-shadow:0 0 0 1.5px var(--ink)}
  .bgpick .tbtn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

  /* Farbwahl des Hintergrunds. Der Punkt zeigt den Verlauf selbst statt einer
     einzelnen Farbe - sonst waehlt man blind, weil zwei Paletten dieselbe
     Mittelfarbe haben koennen.

     Der Knopf ist 30x30 gross, obwohl der Punkt nur 15 misst: WCAG 2.5.8
     verlangt 24 Pixel Zielgroesse, und der Punkt allein bliebe darunter. */
  /* Der Sprachumschalter ist ein Link, kein Knopf: er fuehrt auf eine andere
     Seite. Als Knopf verkleidet waere er fuer Tastatur und Vorlesesoftware
     falsch angekuendigt. */
  .tbtn.sprache{text-decoration:none;display:inline-flex;align-items:center}
  .farbwahl{display:flex;gap:4px;align-items:center}
  .farbe{width:30px;height:30px;padding:0;border:0;background:transparent;
    border-radius:999px;cursor:pointer;display:grid;place-items:center}
  .farbe .pt{width:15px;height:15px;border-radius:999px;background:var(--v);
    box-shadow:0 0 0 1px rgba(255,255,255,.22) inset;
    transition:width .18s ease,height .18s ease}
  .farbe:hover .pt{width:19px;height:19px}
  /* Der Ring sitzt aussen am Knopf, nicht am Punkt: so springt beim Wechsel
     nichts in der Zeile, weil die Knopfgroesse gleich bleibt. */
  .farbe.an{box-shadow:0 0 0 1.5px var(--ink)}
  .farbe.an .pt{width:19px;height:19px}
  .farbe:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  @media(prefers-reduced-motion:reduce){ .farbe .pt{transition:none} }

  /* Frueher wurde die Szenenwahl unter 861 Pixeln ausgeblendet. Damit waren
     drei der vier Hintergruende am Telefon und in schmalen Fenstern gar nicht
     erreichbar - nur der Standard. Sie bleibt jetzt da und rutscht bei Bedarf
     in die zweite Zeile. */
  @media(max-width:860px){
    /* Kein flex-basis:100% - das blaeht die Kopfzeile auf 701 Pixel auf, weil
       .topin seine Breite aus dem Inhalt bezieht. Die Gruppe bleibt einfach
       stehen und wird schmaler. */
    .bgpick{gap:2px;padding-right:7px}
    .topin{gap:8px}
  }
  @media(max-width:700px){
    /* Der Kopf ist sonst eine feste Zeile ohne Umbruch - Wortmarke, vier
       Szenenknoepfe und zwei Schalter passen auf 390 Pixeln nicht nebeneinander,
       und die Seite scrollte seitwaerts. Jetzt bricht er auf zwei Zeilen um. */
    .topin{flex-wrap:wrap;height:auto;padding:7px 14px 9px;gap:7px 8px}
    .mark{flex:0 0 auto}
    .spacer{flex:1 1 auto}
    .bgpick{order:2;justify-content:flex-start;
      margin-top:1px;padding-top:7px;border-top:1px solid rgba(var(--tint-rgb,236,233,255),.05)}
    #motion,#bgstil{padding:0 9px;font-size:10.5px}
  }

  /* ---- Abschnittsrhythmus ---- */
  section{padding:clamp(88px,13vh,164px) 0}
  .center{text-align:center}
  .kick{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;
    letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin:0 0 20px}
  h1{font-family:Archivo,sans-serif;font-weight:900;
    font-size:clamp(42px,8.4vw,104px);line-height:.94;letter-spacing:-.045em;
    margin:0 0 26px;text-wrap:balance}
  h2{font-family:Archivo,sans-serif;font-weight:800;
    font-size:clamp(32px,5.6vw,72px);line-height:1.0;letter-spacing:-.042em;
    margin:0 0 20px;text-wrap:balance;max-width:15ch}
  .center h2{margin-left:auto;margin-right:auto}
  /* Eine lange Ueberschrift in der Groesse einer kurzen wird zum Block: bei
     15ch und 72px stand "Videos, Bilderkennung und Messwerte auf den
     Detailseiten" vierzeilig da und drueckte den Abschnitt darunter aus dem
     Bild. Kleiner UND breiter - dann sind es zwei Zeilen statt vier, und die
     kurzen Ueberschriften der anderen Abschnitte bleiben unberuehrt. */
  #modelle h2{font-size:clamp(26px,3.9vw,48px);letter-spacing:-.032em;
    line-height:1.06;max-width:24ch}
  .say{font-size:clamp(17px,2.05vw,21px);line-height:1.55;color:var(--ink-2);
    max-width:46ch;margin:0 0 34px}
  .center .say{margin-left:auto;margin-right:auto}
  .say b{color:var(--ink);font-weight:600}
  .huge{font-family:Archivo,sans-serif;font-weight:900;color:#fff;
    font-size:clamp(66px,14vw,168px);line-height:.85;letter-spacing:-.055em;
    font-variant-numeric:tabular-nums;margin:0 0 14px}
  .huge small{font-size:.26em;font-weight:700;letter-spacing:-.01em;color:var(--ink-2);
    margin-left:.12em;vertical-align:.55em}

  /* ---- Aufmacher ---- */
  .hero{min-height:88vh;display:flex;flex-direction:column;justify-content:center;
    align-items:center;text-align:center;padding:70px 0 40px}
  .hero h1{max-width:13ch}
  .heroprice{display:inline-flex;align-items:center;gap:10px;
    font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;color:var(--ink-2);
    border:1px solid var(--line);border-radius:999px;padding:7px 16px;margin-bottom:30px}
  .heroprice i{width:7px;height:7px;border-radius:50%;background:var(--ok);display:block}
  .cue{margin-top:52px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;
    letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
  .cue span{display:block;margin-top:9px;font-size:15px;animation:bob 2.4s ease-in-out infinite}
  @keyframes bob{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(5px);opacity:1}}

  /* ---- Medien ---- */
  .bleed{margin-top:44px}
  /* Kein Radius, kein Rand, kein Schatten. Damit das Bild trotzdem nicht hart
     an der Kante abschneidet, laeuft es an allen vier Seiten weich aus - so
     wie im Aufmacher. Das ist der Unterschied zwischen "Bild in einem Kasten"
     und "Bild auf der Seite". */
  .film{position:relative;overflow:hidden;
    background:rgba(var(--ground-rgb,7,5,20),.9);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 3.5%,#000 96.5%,transparent),
      linear-gradient(180deg,transparent,#000 4%,#000 96%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 3.5%,#000 96.5%,transparent),
      linear-gradient(180deg,transparent,#000 4%,#000 96%,transparent);
    -webkit-mask-composite:source-in;mask-composite:intersect}
  .film video,.film img{display:block;width:100%;height:auto}
  .filmcap{position:absolute;left:0;right:0;bottom:0;padding:52px 20px 16px;text-align:left;
    background:linear-gradient(to top,rgba(5,4,15,.95),rgba(5,4,15,0));
    font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;color:var(--ink-2)}
  .filmcap b{color:#fff;font-weight:600}
  .strip{display:grid;gap:12px;grid-template-columns:repeat(2,1fr);margin-top:14px}
  @media(min-width:760px){.strip{grid-template-columns:repeat(4,1fr)}}
  .strip figure{margin:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#05040f}
  .strip video,.strip img{display:block;width:100%;height:auto}
  .strip figcaption{padding:9px 11px;font-family:"IBM Plex Mono",ui-monospace,monospace;
    font-size:10.5px;color:var(--ink-3);border-top:1px solid var(--line-2)}
  .strip figcaption b{display:block;color:var(--ink-2);font-weight:500;font-size:11.5px}

  /* Drei Zahlen in drei Kaesten waren drei Kaesten zu viel. Jetzt Haarstriche
     zwischen den Spalten, kraeftige Linien oben und unten. */
  .statrow{display:grid;gap:0;background:transparent;
    border-top:1px solid var(--ink-3);border-bottom:1px solid var(--ink-3);
    margin-top:40px;grid-template-columns:minmax(0,1fr)}
  @media(min-width:700px){.statrow{grid-template-columns:repeat(3,minmax(0,1fr))}}
  .statrow div{background:rgba(var(--ground-rgb,7,5,20),.6);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    padding:22px 20px;text-align:center}
  .statrow div + div{border-top:1px solid var(--line)}
  @media(min-width:700px){
    .statrow div + div{border-top:0;border-left:1px solid var(--line)}
  }
  .statrow b{display:block;font-family:Archivo,sans-serif;font-weight:800;font-size:31px;
    color:#fff;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.1}
  .statrow span{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;
    letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}

  .duo{display:grid;gap:16px;grid-template-columns:1fr;margin-top:40px}
  @media(min-width:820px){.duo{grid-template-columns:1fr 1fr}}
  .duo figure{margin:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#05040f}
  .duo img{display:block;width:100%;height:auto;max-height:420px;object-fit:contain;background:#05040f}
  .duo figcaption{padding:13px 15px;font-size:13.5px;color:var(--ink-2);border-top:1px solid var(--line-2)}
  .duo figcaption b{display:block;color:var(--ink);font-family:Archivo,sans-serif;font-size:14.5px;margin-bottom:3px}

  /* ---- Tabelle ---- */
  .bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0;padding:10px 2px;
    background:transparent;border:0;border-bottom:1px solid var(--line)}
  .bar .lbl{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;
    letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
  .chip{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;
    background:transparent;color:var(--ink-3);border:0;border-bottom:2px solid transparent;
    border-radius:0;padding:7px 11px;cursor:pointer;display:flex;align-items:center;gap:7px}
  .chip:hover{color:var(--ink)}
  .chip i{width:8px;height:8px;border-radius:50%;display:block}
  .chip[aria-pressed="true"]{color:var(--ink);background:transparent;
    border-bottom-color:var(--accent)}
  /* Die Ansichtswahl war eine Pillengruppe mit Rand und gefuelltem aktivem
     Feld. Jetzt dieselbe Form wie die Reiter des Aufmachers: Woerter mit
     Unterstrich. Der Strich wird immer gezeichnet, nur die Farbe wechselt -
     sonst springt die Zeile beim Umschalten. */
  .views{margin-left:auto;display:flex;gap:0}
  .views button{border:0;border-radius:0;background:transparent;padding:8px 13px;
    font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;color:var(--ink-3);
    cursor:pointer;border-bottom:2px solid transparent}
  .views button:hover{color:var(--ink)}
  .views button[aria-pressed="true"]{background:transparent;color:var(--ink);
    border-bottom-color:var(--accent)}
  .count{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;color:var(--ink-3)}
  /* Die Platte war eine abgerundete Kachel mit Rand, Fuellung und Schlagschatten.
     Sie traegt jetzt dieselbe Sprache wie die Empfehlungsleiste und der
     Pruefstand: zwei kraeftige Linien aussen, sonst nichts. Die Fuellung
     bleibt als leichter Schleier, weil Tabellen und Graphen einen ruhigen
     Grund brauchen - aber ohne Kante, ohne Radius, ohne Schatten. */
  .plate{background:rgba(var(--ground-rgb,7,5,20),.66);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border-top:1px solid var(--ink-3);border-bottom:1px solid var(--ink-3)}
  .tablewrap{overflow-x:auto}
  table{border-collapse:separate;border-spacing:0;width:100%;min-width:900px;font-size:14px}
  thead th{position:sticky;top:0;background:rgba(var(--ground-rgb,7,5,20),.97);
    font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.07em;
    text-transform:uppercase;color:var(--ink-3);font-weight:500;text-align:left;
    padding:12px;border-bottom:1px solid var(--line);white-space:nowrap;cursor:pointer;user-select:none}
  thead th:hover{color:var(--ink)}
  thead th[aria-sort]{color:var(--accent)}
  th.num,td.num{text-align:right}
  tbody td{padding:11px 12px;border-bottom:1px solid var(--line-2)}
  tbody tr:hover td{background:rgba(var(--tint-rgb,236,233,255),.04)}
  tbody tr:last-child td{border-bottom:0}
  td.rank{font-family:"IBM Plex Mono",ui-monospace,monospace;color:var(--ink-3);
    font-variant-numeric:tabular-nums;width:40px}
  td.model{min-width:250px}
  .mname{display:flex;align-items:center;gap:11px}
  .mmark{width:28px;height:28px;flex:0 0 28px;border-radius:8px;display:grid;place-items:center;
    background:rgba(var(--tint-rgb,236,233,255),.06);border:1px solid var(--line)}
  .mmark svg{width:17px;height:17px;display:block}
  .mtxt b{display:block;font-weight:600;color:var(--ink);font-size:14px;line-height:1.25;white-space:nowrap}
  .mtxt span{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;color:var(--ink-3)}
  .hwchip{display:inline-flex;align-items:center;gap:7px;
    font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;color:var(--ink-2);white-space:nowrap}
  .hwchip i{width:8px;height:8px;border-radius:50%;display:block;flex:0 0 8px}
  .cell{display:flex;align-items:center;gap:9px;justify-content:flex-end}
  .barwrap{position:relative;flex:1;height:7px;min-width:38px;max-width:78px;
    background:rgba(var(--tint-rgb,236,233,255),.06);border-radius:4px;overflow:hidden}
  .barwrap i{position:absolute;left:0;top:0;bottom:0;background:var(--bar);border-radius:4px;
    border-right:2px solid var(--bar-cap)}
  .v{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;
    color:var(--ink);min-width:42px;text-align:right}
  .v.dim{color:var(--ink-3)}
  .rngtxt{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;color:var(--ink-3)}
  .kind{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:9.5px;letter-spacing:.06em;
    text-transform:uppercase;border-radius:3px;padding:2px 6px;white-space:nowrap;border:1px solid}
  .k-a{color:var(--ok);border-color:rgba(79,212,160,.35);background:rgba(79,212,160,.08)}
  .k-s{color:#8fa4d8;border-color:rgba(143,164,216,.32);background:rgba(143,164,216,.07)}
  .k-o{color:var(--ink-3);border-color:rgba(125,118,168,.28)}
  .fieldbox{padding:16px 16px 6px}
  .fieldbox svg{display:block;width:100%;height:auto;min-width:540px}
  .legend{display:flex;flex-wrap:wrap;gap:8px 20px;padding:4px 18px 16px;
    font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;color:var(--ink-2)}
  .legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:7px;vertical-align:-1px}
  .legend .dash{width:16px;height:0;border-top:2px dashed var(--hw-cloud);border-radius:0;vertical-align:3px}
  .legend .par{width:16px;height:0;border-top:2px solid var(--ink-2);border-radius:0;vertical-align:3px}
  #tip{position:fixed;z-index:60;pointer-events:none;opacity:0;transition:opacity .12s;
    background:rgba(7,5,18,.97);border:1px solid var(--line);border-radius:9px;padding:10px 12px;
    font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;color:var(--ink-2);
    box-shadow:0 14px 40px rgba(0,0,0,.85);max-width:260px}
  #tip b{color:#fff;font-size:12.5px;display:block;margin-bottom:6px;font-weight:600}
  #tip table{border-collapse:collapse;width:100%;min-width:0}
  #tip td{padding:1px 0;border:0}
  #tip td:last-child{text-align:right;color:#fff;font-variant-numeric:tabular-nums;padding-left:14px}

  .two{display:grid;gap:16px;grid-template-columns:1fr;margin-top:36px}
  @media(min-width:900px){.two{grid-template-columns:1fr 1fr}}
  .depthbox{padding:20px}
  .depthbox svg{display:block;width:100%;height:auto}
  .cl{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.07em;
    text-transform:uppercase;color:var(--ink-3);margin:0 0 12px}

  .finds{display:grid;gap:16px;grid-template-columns:1fr;margin-top:40px;text-align:left}
  @media(min-width:840px){.finds{grid-template-columns:repeat(3,1fr)}}
  .find{padding:24px 22px 26px;background:var(--glass);border:1px solid var(--line);
    border-radius:16px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  .find .n{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;
    letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);margin:0 0 16px}
  .find .big{font-family:Archivo,sans-serif;font-weight:800;font-size:34px;line-height:.95;
    letter-spacing:-.035em;color:#fff;margin:0 0 12px}
  .find h3{font-family:Archivo,sans-serif;font-weight:700;font-size:15.5px;margin:0 0 9px;line-height:1.3}
  .find p{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.62}
  code{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.86em;
    background:rgba(var(--tint-rgb,236,233,255),.08);border-radius:4px;padding:1px 5px}

  .hwgrid{display:grid;gap:16px;grid-template-columns:1fr;margin-top:40px;text-align:left}
  @media(min-width:880px){.hwgrid{grid-template-columns:1fr 1fr}}
  .hwcard{padding:24px 24px 26px;background:var(--glass);border:1px solid var(--line);
    border-radius:16px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  .hwcard h3{font-family:Archivo,sans-serif;font-weight:800;font-size:19px;margin:0 0 4px;
    display:flex;align-items:center;gap:9px;letter-spacing:-.02em}
  .hwcard h3 i{width:10px;height:10px;border-radius:50%;display:block;flex:0 0 10px}
  .sublabel{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;color:var(--ink-3);margin:0 0 10px}
  .price{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;color:var(--ok);
    border:1px solid rgba(79,212,160,.3);border-radius:999px;padding:4px 11px;display:inline-block;margin:0 0 18px}
  .spec{display:grid;grid-template-columns:auto 1fr;gap:5px 16px;margin:0 0 18px;
    font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px}
  .spec dt{color:var(--ink-3)}
  .spec dd{margin:0;color:var(--ink-2);text-align:right}
  .cfglbl{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;color:var(--ink-3);margin:0 0 9px}
  .cfglbl b{color:var(--ok);font-weight:500}
  .code{background:rgba(2,1,9,.8);border:1px solid var(--line);border-radius:11px;
    padding:13px 15px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;
    line-height:1.8;color:#b9b2e4;overflow-x:auto;white-space:pre;margin:0 0 12px}
  .code .c{color:#6f68a0}
  .copy{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;
    background:transparent;color:var(--ink-2);border:1px solid var(--line);
    border-radius:999px;padding:7px 14px;cursor:pointer}
  .copy:hover{color:#fff;border-color:var(--accent)}

  .repos{display:grid;gap:14px;grid-template-columns:1fr;margin-top:40px;text-align:left}
  @media(min-width:700px){.repos{grid-template-columns:1fr 1fr}}
  .repo{padding:20px 22px 22px;background:var(--glass);border:1px solid var(--line);
    border-radius:16px;text-decoration:none;color:inherit;display:block;
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:border-color .2s}
  .repo:hover{border-color:var(--accent)}
  .repo .meta{display:flex;gap:14px;font-family:"IBM Plex Mono",ui-monospace,monospace;
    font-size:10.5px;color:var(--ink-3);margin:0 0 11px}
  .repo h3{font-family:Archivo,sans-serif;font-weight:700;font-size:17px;margin:0 0 7px;
    letter-spacing:-.015em}
  .repo p{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.6}

  .note{border-left:2px solid var(--warn);padding-left:18px;max-width:62ch;margin:34px auto 0;
    color:var(--ink-3);font-size:13.5px;text-align:left}
  .note b{color:var(--ink-2)}
  footer{border-top:1px solid var(--line-2);padding:34px 0 90px;
    font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;color:var(--ink-3);
    display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:center}
  a{color:var(--accent)}
  button:focus-visible,th:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
  @media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}


/* ==================== Suchfeld / Modellwahl ==================== */
.finder{max-width:760px;margin:0 auto;position:relative}
.finder-in{display:flex;align-items:center;gap:12px;padding:0 18px;height:60px;
  background:rgba(12,9,32,.86);border:1px solid var(--line);border-radius:16px;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);transition:border-color .18s}
.finder-in:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px rgba(var(--accent-rgb,201,139,255),.12)}
.finder-in svg{width:19px;height:19px;flex:0 0 19px;stroke:var(--ink-3);fill:none;stroke-width:2}
.finder input{flex:1;background:none;border:0;outline:none;color:var(--ink);font-size:17px;
  font-family:inherit;min-width:0}
.finder input::placeholder{color:var(--ink-3)}
.kbd{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;color:var(--ink-3);
  border:1px solid var(--line);border-radius:5px;padding:3px 7px;white-space:nowrap}
.finder-list{position:absolute;left:0;right:0;top:68px;z-index:50;max-height:60vh;overflow-y:auto;
  background:rgba(var(--ground-rgb,7,5,20),.97);border:1px solid var(--line);border-radius:16px;padding:7px;
  box-shadow:0 34px 90px -30px rgba(0,0,0,1);text-align:left}
.finder-list[hidden]{display:none}
.fi{display:flex;align-items:center;gap:13px;padding:11px 13px;border-radius:11px;
  text-decoration:none;color:inherit;cursor:pointer}
.fi:hover,.fi.sel{background:rgba(var(--accent-rgb,201,139,255),.14)}
.fi .dot{width:9px;height:9px;border-radius:50%;flex:0 0 9px}
.fi .nm{flex:1;min-width:0}
.fi .nm b{display:block;font-size:14.5px;font-weight:600;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fi .nm span{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;color:var(--ink-3)}
.fi .sp{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:13px;color:var(--ink-2);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.fi .sp em{font-style:normal;color:var(--ink-3);font-size:10.5px}
.fi-empty{padding:20px 14px;color:var(--ink-3);font-size:14px;text-align:center}
.finder-hint{margin:14px 0 0;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:11px;color:var(--ink-3)}

/* Modellkacheln */
/* ---- Aufmacher-Slider -----------------------------------------------------
   "Ohne Rahmen" heisst hier woertlich: keine Karte, kein Radius, kein
   Schatten, keine Glasflaeche. Die Folie ist die volle Breite, das Bild laeuft
   randabfallend hinein, die Schrift steht direkt darauf. Lesbar bleibt sie
   durch einen Verlauf ueber dem Bild, nicht durch einen Kasten darunter.

   Die Bahn ist ein echter Scrollbereich mit scroll-snap. Ohne JavaScript ist
   sie eine Reihe, die man schiebt - alles bleibt erreichbar. */
#aufmacher{position:relative;margin:6px 0 4px}
.sl-bahn{display:grid;grid-auto-flow:column;grid-auto-columns:100%;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;scrollbar-width:none}
.sl-bahn::-webkit-scrollbar{display:none}
.sl-bahn:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}

.sl-f{position:relative;scroll-snap-align:center;scroll-snap-stop:always;
  min-height:clamp(430px,72svh,680px);display:grid;align-items:center;
  padding:30px 0}
/* Das Bild sitzt hinter dem Text und laeuft nach rechts aus. Es traegt keine
   Aussage - alt bleibt deshalb leer, sonst liest ein Screenreader Deko vor. */
/* Das Bild wird an ALLEN vier Seiten weich ausgeblendet, nicht nur links.
   Vorher schnitt es oben und unten hart an der Foliengrenze ab - genau der
   harte Rand, der die Seite nach Kasten aussehen laesst. Zwei Masken, die
   sich schneiden: eine waagerecht, eine senkrecht. */
.sl-bild{position:absolute;inset:0 0 0 auto;width:min(58%,760px);height:100%;
  object-fit:cover;opacity:.5;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 46%),
    linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 46%),
    linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect}
/* Der Schleier deckte vorher die ganze Folie zu 94 Prozent ab - auch links,
   wo gar kein Bild liegt. Das ergab ein dunkles Band quer ueber die Seite mit
   sichtbarer Kante. Jetzt setzt er erst dort ein, wo das Bild anfaengt. */
.sl-f::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(var(--ground-rgb,7,5,20),0) 0%,
    rgba(var(--ground-rgb,7,5,20),0) 28%,
    rgba(var(--ground-rgb,7,5,20),.62) 54%,
    rgba(var(--ground-rgb,7,5,20),.30) 100%)}
.sl-f:not(:has(.sl-bild))::after{display:none}

.sl-in{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:0 24px;
  width:100%;text-align:left}
.sl-ober{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin:0 0 12px}
.sl-t{font-family:Archivo,sans-serif;font-weight:800;letter-spacing:-.03em;
  font-size:clamp(28px,4.6vw,52px);line-height:1.03;margin:0 0 14px;max-width:17ch}
.sl-s{margin:0 0 22px;max-width:52ch;font-size:clamp(14px,1.3vw,16.5px);
  color:var(--ink-2);line-height:1.6}

/* Die Zahlen stehen in derselben Sprache wie das Register darunter:
   gleiche Laufweite, Haarstrich als Trenner, keine Flaeche. */
.sl-z{display:flex;flex-wrap:wrap;gap:0;margin:0 0 24px;
  border-top:1px solid var(--line);padding-top:16px;max-width:52ch}
.sl-z > div{padding-right:26px;margin-right:26px;border-right:1px solid var(--line-2)}
.sl-z > div:last-child{border:0;margin:0;padding:0}
.sl-z b{display:block;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:clamp(20px,2.4vw,27px);font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1.1}
.sl-z span{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);display:block;margin-top:5px}

/* Die Folie ueber den Betreiber. Das Bild ist rund und klein - es ist ein
   Absender, kein Aufmacher. Die Verweise stehen als Woerter mit Haarstrich
   nebeneinander, nicht als Symbolknoepfe: Symbole muss man raten, Woerter
   nicht, und "GitHub" ist kuerzer als jedes erklaerende Aria-Label. */
.sl-ich{display:flex;align-items:center;gap:22px;margin:0 0 26px;
  padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  max-width:56ch}
/* Ein Hochformat im breiten Bildfeld: der Ausschnitt wird nach oben gezogen,
   sonst schneidet cover genau die Bildmitte heraus und der Wasserfall faellt
   unten aus dem Rahmen. */
.sl-bild.sl-hoch{object-position:50% 30%;opacity:.66}
.sl-ich-t{min-width:0}
.sl-ich-r{margin:0 0 10px;font-size:12.5px;color:var(--ink-3);line-height:1.5}
.sl-ich-l{margin:0;display:flex;flex-wrap:wrap;gap:8px 18px}
.sl-ich-l a{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;
  color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line);
  padding-bottom:3px}
.sl-ich-l a:hover{color:var(--accent);border-bottom-color:var(--accent)}
@media(max-width:820px){
  .sl-ich{gap:16px;padding:14px 0;margin-bottom:20px}
  .sl-ich-b{width:64px;height:64px;flex:0 0 64px}
  .sl-ich-r{font-size:11.5px;margin-bottom:8px}
}

/* Die Startfolie ist der Aufmacher der Seite und behaelt dessen Auftritt:
   mittig, ganz gross, viel Luft. Die uebrigen Folien stehen linksbuendig mit
   Bild - das ist Absicht, nicht Nachlaessigkeit: der Aufmacher soll wirken,
   die anderen sollen berichten. Massgabe sind die Werte des frueheren
   Hero-Blocks, damit hier nichts kleiner wird als es war. */
.sl-start .sl-in{text-align:center;display:flex;flex-direction:column;
  align-items:center;max-width:1080px}
h1.sl-t{font-family:Archivo,sans-serif;font-weight:900;
  font-size:clamp(34px,5.6vw,74px);line-height:.98;letter-spacing:-.04em;
  max-width:24ch;margin:0 0 24px}
.sl-start .sl-ober{letter-spacing:.22em;font-size:11.5px;margin:0 0 20px}
.sl-start .sl-s{max-width:56ch;font-size:clamp(15px,1.45vw,17.5px);margin-bottom:34px}
.sl-start .sl-z{justify-content:center;max-width:none;margin-bottom:30px}
.sl-start .sl-z > div{text-align:center}

/* Die Empfehlungsfolie hat kein Bild. Statt sie mit einem Fuellbild zu
   strecken, traegt sie die beiden Empfehlungen nebeneinander - dieselbe
   Datenblattsprache wie der Abschnitt weiter unten, nur knapper. */
.sl-p{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;
  margin:0 0 24px;max-width:56ch;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sl-pk{padding:16px 22px 16px 0}
.sl-pk + .sl-pk{border-left:1px solid var(--line-2);padding-left:22px}
.sl-ph{display:flex;align-items:center;gap:7px;margin:0 0 9px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:9.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.sl-ph i{width:7px;height:7px;border-radius:50%;flex:0 0 7px}
.sl-pm{margin:0 0 3px;font-family:Archivo,sans-serif;font-weight:700;
  font-size:clamp(15px,1.7vw,19px);letter-spacing:-.015em;line-height:1.2}
.sl-pq{margin:0 0 12px;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:10.5px;color:var(--ink-3)}
.sl-pt{margin:0;display:flex;align-items:baseline;gap:8px}
.sl-pt b{font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:clamp(19px,2.2vw,25px);font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.sl-pt span{font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3)}

.sl-go a{color:var(--ink);text-decoration:none;font-weight:600;font-size:14.5px;
  border-bottom:1.5px solid var(--accent);padding-bottom:3px}
.sl-go a:hover{color:var(--accent)}
.sl-go{margin:0}

/* ---- Leiste unter der Bahn: steht fest, dreht nicht mit ---- */
.sl-leiste{display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding-top:14px;border-top:1px solid var(--line)}
.sl-reiter{display:flex;gap:0;min-width:0;overflow-x:auto;scrollbar-width:none;
  scroll-behavior:smooth}
.sl-reiter::-webkit-scrollbar{display:none}
/* Woerter statt Punkte. Ein Punkt sagt nicht, was kommt, und ist als Ziel zu
   klein. Der Strich wird immer gezeichnet, nur die Farbe wechselt - sonst
   springt die Zeile beim Wechsel um zwei Pixel. */
.sl-r{background:none;border:0;cursor:pointer;white-space:nowrap;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;
  letter-spacing:.06em;color:var(--ink-3);padding:12px 15px;
  border-bottom:2px solid transparent;margin-bottom:-1px}
.sl-r:hover{color:var(--ink)}
.sl-r.an{color:var(--ink);border-bottom-color:var(--accent)}
.sl-r:focus-visible{outline:2px solid var(--ink);outline-offset:-3px}

/* WCAG 2.2.2 verlangt fuer alles, was sich von selbst bewegt, eine
   Moeglichkeit zum Anhalten. */
.sl-halt{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  background:none;border:0;cursor:pointer;padding:10px 4px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;
  letter-spacing:.06em;color:var(--ink-3)}
.sl-halt:hover{color:var(--ink)}
.sl-halt:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.sl-halt-i{width:9px;height:10px;flex:0 0 9px;
  border-left:3px solid currentColor;border-right:3px solid currentColor}
.sl-halt.aus .sl-halt-i{border:0;width:0;height:0;
  border-left:9px solid currentColor;border-top:5px solid transparent;
  border-bottom:5px solid transparent}

@media(max-width:820px){
  .sl-f{min-height:auto;padding:26px 0 30px}
  /* Auf schmalen Schirmen steht das Bild ueber dem Text statt dahinter -
     hinter dem Text waere bei dieser Breite entweder das Bild unkenntlich
     oder die Schrift unlesbar. */
  .sl-f{display:flex;flex-direction:column;gap:16px;justify-content:center}
  .sl-bild.sl-hoch{height:230px;object-position:50% 26%}
  .sl-bild{position:relative;inset:auto;width:100%;height:150px;opacity:.62;
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 58%,transparent);
    mask-image:linear-gradient(180deg,transparent,#000 22%,#000 58%,transparent);
    -webkit-mask-composite:source-over;mask-composite:add}
  .sl-f::after{display:none}
  .sl-t{max-width:none}
  .sl-z{gap:14px 0}
  .sl-z > div{padding-right:16px;margin-right:16px}
  /* Die beiden Maschinen bleiben auch auf dem Telefon NEBENEINANDER.
     Untereinander verschenkten sie die halbe Breite, und die Folie wurde
     dadurch die hoechste der Bahn - was allen anderen Folien Leere bescherte.
     Zwei Spalten a rund 165 Pixel reichen fuer Modellname und Messwert. */
  .sl-p{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sl-pk{padding:13px 12px 13px 0}
  .sl-pk + .sl-pk{border-left:1px solid var(--line-2);border-top:0;padding-left:13px}
  .sl-pm{font-size:14px;line-height:1.25}
  .sl-pq{font-size:9.5px;margin-bottom:9px}
  .sl-pt{flex-direction:column;align-items:flex-start;gap:2px}
  .sl-ph{font-size:8.5px;letter-spacing:.06em;margin-bottom:7px}
  .sl-start .sl-in{text-align:center}
  .sl-start .sl-s{margin-bottom:26px}
  .sl-leiste{flex-wrap:wrap;gap:6px 12px}
}
@media(prefers-reduced-motion:reduce){.sl-bahn{scroll-behavior:auto}}

/* Eine Ueberschrift, die ein ganzer Satz ist, braucht eine andere Groesse als
   ein Schlagwort. Bei der regulaeren h2-Groesse ergaben 91 Zeichen vier Zeilen
   und 288 Pixel Hoehe - das fuellte allein schon einen Bildschirm, bevor der
   Text darunter anfing. */
h2.lang{font-size:clamp(24px,3.2vw,42px);line-height:1.14;letter-spacing:-.025em;
  max-width:30ch}

/* ---- Nachbauen ------------------------------------------------------------
   Drei Schritte nebeneinander, getrennt durch Haarstriche - dieselbe Sprache
   wie Pruefstand und Empfehlung. Keine Kaesten. */
.nb{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin-top:38px;
  text-align:left;border-top:1px solid var(--ink-3);border-bottom:1px solid var(--ink-3)}
@media(min-width:900px){.nb{grid-template-columns:repeat(3,minmax(0,1fr))}}
.nbx{padding:24px 0 26px;background:rgba(var(--ground-rgb,7,5,20),.62);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.nbx + .nbx{border-top:1px solid var(--line)}
@media(min-width:900px){
  .nbx{padding:26px 24px}
  .nbx:first-child{padding-left:0}
  .nbx:last-child{padding-right:0}
  .nbx + .nbx{border-top:0;border-left:1px solid var(--line)}
}
@media(max-width:899px){.nbx{padding:22px 2px 24px}}
.nbk{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;
  letter-spacing:.14em;color:var(--accent);margin:0 0 12px}
.nbx h3{font-family:Archivo,sans-serif;font-weight:700;font-size:16.5px;
  letter-spacing:-.015em;margin:0 0 10px}
.nbx p{margin:0 0 12px;font-size:13.5px;color:var(--ink-2);line-height:1.6}
.nbx code{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;
  background:rgba(var(--tint-rgb,236,233,255),.08);padding:1px 5px}
.nbz{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
/* Der Hinweis auf das, was fehlt, steht bewusst nicht kleingedruckt am Rand:
   eine Luecke offen zu benennen ist Teil der Aussage. */
.nbfehlt{font-size:12px;color:var(--ink-3);border-top:1px solid var(--line-2);
  padding-top:10px;margin-top:14px}
.nbl{margin:0;display:grid;gap:11px}
.nbl dt{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px}
.nbl dd{margin:3px 0 0;font-size:12.5px;color:var(--ink-3);line-height:1.5}
.nbkopie{background:none;border:0;padding:0;cursor:pointer;font:inherit}
.nbkopie[disabled]{opacity:.6;cursor:default}

/* ---- Register der Laeufe --------------------------------------------------
   Loest die Kartenwand ab. Karten beantworten "welcher ist der schnellste"
   nicht: jede traegt ihre Zahlen an einer anderen Stelle im Raster. Hier
   stehen sie in festen Spalten, rechtsbuendig, mit Ziffern gleicher Laufweite
   (font-variant-numeric:tabular-nums) - dann faengt die groesste Zahl am
   weitesten links an und man erkennt sie, ohne sie zu lesen.

   Keine Radien, keine Flaechen, kein Glas. Struktur entsteht aus Haarlinien
   und Spaltenraster, wie im Datenblatt der Empfehlung darueber. */
.reg{margin-top:30px;text-align:left;border-top:1px solid var(--line)}
.reg-kopf,.rz{display:grid;align-items:center;
  grid-template-columns:minmax(0,1fr) 108px 96px 66px 68px 118px 92px 106px;
  gap:0 16px}
.reg-kopf{padding:9px 4px;border-bottom:1px solid var(--line);
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:9.5px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.reg-kopf span:nth-child(3),.reg-kopf span:nth-child(4),
.reg-kopf span:nth-child(5){text-align:right}

.rz{position:relative;padding:11px 4px;border-bottom:1px solid var(--line-2)}
.rz:hover{background:rgba(var(--tint-rgb,236,233,255),.035)}
/* Die ganze Zeile fuehrt zur Detailseite. Der gestreckte Link liegt UNTER den
   Belegen, sonst waeren die nicht mehr anklickbar. */
.rz .golink::after{content:"";position:absolute;inset:0;z-index:0}
.rz-b,.rz .ev{position:relative;z-index:1}

.rz-m{display:flex;align-items:center;gap:10px;min-width:0}
.rz-m>i{width:8px;height:8px;border-radius:50%;flex:0 0 8px}
.rz-mt{display:flex;flex-direction:column;min-width:0}
.rz-mt b{font-family:Archivo,sans-serif;font-weight:700;font-size:15px;
  letter-spacing:-.015em;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rz-mt em{font-style:normal;font-size:11px;color:var(--ink-3);line-height:1.3}
.rz-q{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;
  color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Zwei Quantisierungen in einer Zeile: Qwen3.8-27B lief Moorhuhn in Q4 und
   Clair Obscure in Q6. Abgeschnitten waere der zweite Wert unsichtbar, und
   die Zeile behauptete wieder eine Quantisierung fuer alle Antworten.
   Deshalb hier umbrechen statt kuerzen. */
.rz-q.mehr{white-space:normal;overflow:visible;line-height:1.35}
.rz-q.mehr>span{white-space:nowrap}
/* Nebensache in einer Zeile: die Zahl weiterer Protokolle. Lesbar, aber sie
   soll mit dem Beleglink nicht um Aufmerksamkeit ringen. */
.rz-mehr{color:var(--ink-3);font-size:10.5px}
/* Fussnote unter dem Register. Sie erklaert, wie aus mehreren Laeufen eine
   Zeile wird - das gehoert unter die Tabelle und nicht in jede Zeile. */
.reg-fuss{max-width:74ch;margin:14px auto 0;font-size:12px;line-height:1.6;
  color:var(--ink-3)}

.rz-n{text-align:right}
.rz-n b{display:block;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:15px;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1.2}
/* Die Beschriftung steht am Kopf der Spalte, nicht an jeder Zahl. In der Zeile
   waere sie dreizehnmal dasselbe Wort. Auf schmalen Schirmen kommt sie zurueck
   - dort gibt es keine Kopfzeile mehr. */
.rz-n em{display:none}
/* Der Balken bezieht sich auf den schnellsten gemessenen Lauf. Er sitzt am
   rechten Rand wie die Zahl darueber, damit beide dieselbe Grundlinie haben. */
.rz-bar{display:block;height:2px;margin:4px 0 0 auto;width:var(--w);
  background:var(--accent);opacity:.8;border-radius:0}
.rz-hw{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;
  color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rz-b{font-size:11px;min-width:0}
.rz-b .nomess{color:var(--ink-3)}
.rz-go{text-align:right;font-size:12px;white-space:nowrap}
.rz-go .golink{color:var(--accent);text-decoration:none}
.rz:hover .rz-go .golink{text-decoration:underline}
.rz-go .wait{color:var(--ink-3)}
.rz.pending:hover{background:none}

/* Eingeklappt: sechs Zeilen reichen als erster Eindruck. */
.reg .rest{display:none}
.reg.all .rest{display:grid}

/* Schmale Schirme: die Zeile bricht auf zwei Zeilen um - aber die Spalten
   BLEIBEN in derselben Reihenfolge. Ein Rueckfall auf Karten waere der
   naheliegende und falsche Weg: dann waere genau die Vergleichbarkeit wieder
   weg, wegen der das Register ueberhaupt gebaut wurde. */
@media(max-width:900px){
  .reg-kopf{display:none}
  .rz{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px 12px;padding:11px 2px}
  .rz-m{grid-column:1/-1}
  .rz-q{grid-column:1/-1;margin-top:-4px}
  .rz-n{text-align:left}
  .rz-bar{margin-left:0}
  .rz-n em{display:block;font-style:normal;font-size:9px;letter-spacing:.07em;
    text-transform:uppercase;color:var(--ink-3);margin-top:3px}
  .rz-hw{grid-column:1/2;align-self:center}
  .rz-go{grid-column:2/3;text-align:left;align-self:center}
  .rz-b{grid-column:3/-1;text-align:right;align-self:center}
}

.cards{display:grid;gap:14px;grid-template-columns:1fr;margin-top:34px;text-align:left}
@media(min-width:720px){.cards{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.cards{grid-template-columns:repeat(3,1fr)}}
.mc{position:relative;display:block;text-decoration:none;color:inherit;padding:18px 19px 20px;
  background:var(--glass);border:1px solid var(--line);border-radius:16px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:border-color .2s,transform .2s}
.mc:hover{border-color:var(--accent);transform:translateY(-2px)}
.mc .top{display:flex;align-items:center;gap:9px;margin:0 0 13px}
.mc .top i{width:9px;height:9px;border-radius:50%;flex:0 0 9px}
.mc .top span{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;color:var(--ink-3)}
.mc h3{font-family:Archivo,sans-serif;font-weight:700;font-size:17px;margin:0 0 3px;letter-spacing:-.015em}
.mc .q{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;color:var(--ink-3);margin:0 0 15px}
.mc .nums{display:flex;gap:0;border-top:1px solid var(--line-2);padding-top:13px}
.mc .nums div{flex:1;border-right:1px solid var(--line-2);padding-right:10px;margin-right:10px}
.mc .nums div:last-child{border:0;margin:0;padding:0}
.mc .nums b{display:block;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:17px;
  color:#fff;font-variant-numeric:tabular-nums;line-height:1.2}
.mc .nums span{font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);
  font-family:"IBM Plex Mono",ui-monospace,monospace}

/* ==================== Detailseite ==================== */
.crumb{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;color:var(--ink-3);
  margin:0 0 22px}
.crumb a{color:var(--ink-2);text-decoration:none}
.crumb a:hover{color:var(--accent)}
.dhead{padding:56px 0 10px}
.dhead h1{font-size:clamp(32px,5.4vw,60px);max-width:18ch;margin-bottom:14px}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.badge{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;
  border:1px solid var(--line);border-radius:999px;padding:5px 12px;color:var(--ink-2);
  display:inline-flex;align-items:center;gap:7px}
.badge i{width:8px;height:8px;border-radius:50%;display:block}
.metrics{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:16px;overflow:hidden;grid-template-columns:repeat(2,1fr);margin:0 0 40px}
@media(min-width:760px){.metrics{grid-template-columns:repeat(4,1fr)}}
.metrics div{background:rgba(var(--ground-rgb,7,5,20),.9);padding:20px 18px}
.metrics b{display:block;font-family:Archivo,sans-serif;font-weight:800;font-size:30px;
  color:#fff;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.12}
.metrics b small{font-size:.44em;font-weight:700;color:var(--ink-3);margin-left:.18em}
.metrics span{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.dsec{margin:0 0 44px}
.dsec h2{font-size:clamp(20px,2.6vw,27px);margin-bottom:14px;max-width:none}
.copywrap{position:relative}
.copywrap .copy{position:absolute;top:12px;right:12px}
.dnote{border-left:2px solid var(--warn);padding-left:16px;color:var(--ink-2);font-size:14.5px;
  max-width:66ch;margin:0 0 22px}
.dnote b{color:var(--ink)}
.dgrid{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:820px){.dgrid{grid-template-columns:1.15fr .85fr}}
.dmedia{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#05040f}
.dmedia video,.dmedia img{display:block;width:100%;height:auto}
.srcline{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;color:var(--ok);
  margin:14px 0 0}
.othr{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.othr a{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;
  border:1px solid var(--line);border-radius:999px;padding:6px 13px;color:var(--ink-2);
  text-decoration:none}
.othr a:hover{border-color:var(--accent);color:#fff}

/* ==================== Aufbau / Gesamtsysteme ==================== */
/* Der Pruefstand stand in einer abgerundeten Kachel mit sichtbarem Rand und
   eigener Fuellung - drei Kaesten in einem Kasten. Jetzt traegt ihn dieselbe
   Sprache wie die Empfehlungsleiste: zwei kraeftige Linien aussen, Haarstriche
   zwischen den Spalten, keine Radien, keine Flaeche. Die Typografie macht die
   Gliederung, nicht der Rahmen. */
.setup{display:grid;gap:0;grid-template-columns:minmax(0,1fr);text-align:left;
  border-top:1px solid var(--ink-3);border-bottom:1px solid var(--ink-3)}
@media(min-width:860px){.setup{grid-template-columns:repeat(3,minmax(0,1fr))}}
.setup > div{padding:24px 0 26px;
  background:rgba(var(--ground-rgb,7,5,20),.72);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.setup > div + div{border-top:1px solid var(--line)}
@media(min-width:860px){
  .setup > div{padding:26px 24px 26px}
  .setup > div:first-child{padding-left:0}
  .setup > div:last-child{padding-right:0}
  .setup > div + div{border-top:0;border-left:1px solid var(--line)}
}
@media(max-width:859px){.setup > div{padding:22px 2px 24px}}
.setup .st{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--accent);margin:0 0 11px}
.setup h3{font-family:Archivo,sans-serif;font-weight:700;font-size:16.5px;margin:0 0 9px;
  letter-spacing:-.015em}
.setup p{margin:0 0 9px;font-size:13.5px;color:var(--ink-2);line-height:1.6}
.setup .sm{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;
  color:var(--ink-3);margin:0;line-height:1.65}

/* Karte ohne Detailseite */
.mc.pending{cursor:default}
.mc.pending:hover{border-color:var(--line);transform:none}

/* Einheitliche Kachelhoehe im Streifen: sehr breite Aufnahmen wuerden sonst
   flach wirken und eine schwarze Luecke unter sich lassen. */
.strip video, .strip img{aspect-ratio:16/10;object-fit:cover;background:#05040f}

/* ---- Wiedergabeleiste ----
   Blendet sich ein, sobald der Zeiger im Bild ist. Auf Tastbildschirmen steht
   sie immer, dort gibt es kein Schweben. */
.pl{position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;align-items:center;gap:10px;padding:11px 13px;
  background:linear-gradient(to top,rgba(4,3,12,.94),rgba(4,3,12,.72) 55%,rgba(4,3,12,0));
  opacity:0;transform:translateY(6px);transition:opacity .22s ease,transform .22s ease;
  pointer-events:none}
.film:hover .pl,.film:focus-within .pl,.pl.halt,.pl.drag,
.zoomed .pl,.isbig .pl,.isfs .pl{opacity:1;transform:none;pointer-events:auto}
@media(hover:none){.pl{opacity:1;transform:none;pointer-events:auto}}

.pl-b{flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;padding:0;
  border:1px solid transparent;border-radius:9px;background:rgba(var(--tint-rgb,236,233,255),.07);
  color:var(--ink);cursor:pointer;
  transition:background .16s ease,border-color .16s ease,opacity .16s ease}
.pl-b svg{width:17px;height:17px;fill:currentColor;pointer-events:none}
.pl-b:hover{background:rgba(var(--accent-rgb,201,139,255),.22);border-color:var(--accent)}
.pl-b:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pl-b[aria-pressed="true"]{background:rgba(var(--accent-rgb,201,139,255),.2);border-color:var(--accent)}

.pl-t{flex:0 0 auto;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;
  color:var(--ink-2);font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* Die Leiste ist hoeher als der sichtbare Strich, damit man sie sicher trifft */
.pl-bar{position:relative;flex:1 1 auto;min-width:60px;height:20px;cursor:pointer;touch-action:none}
.pl-bar:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.pl-track{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  height:3px;border-radius:3px;background:rgba(var(--tint-rgb,236,233,255),.18);overflow:hidden;
  transition:height .16s ease}
.pl-bar:hover .pl-track,.pl.drag .pl-track{height:5px}
.pl-buf{position:absolute;inset:0 auto 0 0;width:0;background:rgba(var(--tint-rgb,236,233,255),.22)}
.pl-fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:3px;
  background:linear-gradient(90deg,#7f6bff,var(--accent))}
.pl-knob{position:absolute;top:50%;left:0;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;
  border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(4,3,12,.6),0 2px 8px rgba(0,0,0,.5);
  opacity:0;transform:scale(.6);transition:opacity .16s ease,transform .16s ease;pointer-events:none}
.pl-bar:hover .pl-knob,.pl.drag .pl-knob,.pl-bar:focus-visible .pl-knob{opacity:1;transform:scale(1)}

/* Vergroesserungsstufe, nur sichtbar wenn ins Bild gezogen wurde */
.pl-z{position:absolute;top:12px;right:12px;z-index:4;
  padding:5px 9px;border:1px solid var(--line);border-radius:8px;
  background:rgba(4,3,12,.78);backdrop-filter:blur(8px);
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;color:var(--ink-2);
  font-variant-numeric:tabular-nums;cursor:pointer;
  opacity:0;pointer-events:none;transition:opacity .18s ease}
.film.zoomed .pl-z{opacity:1;pointer-events:auto}
.pl-z:hover{color:#fff;border-color:var(--accent)}

/* Platz fuer die Leiste, sonst liegt die Unterschrift auf den Knoepfen */
.film .filmcap{padding-bottom:60px}
.film video{transform-origin:center center;backface-visibility:hidden}
.film.zoomed video{will-change:transform}
.film.zoomed .filmcap,.film.isbig .filmcap{opacity:0;transition:opacity .2s ease}

/* ---- Grosse Darstellung: gross vor abgedunkelter Seite, aber nicht Vollbild ---- */
html.lb-open{overflow:hidden}
.lb{position:fixed;inset:0;z-index:90;display:none}
.lb.on{display:block}
.lb-bd{position:absolute;inset:0;background:rgba(3,2,9,.9);backdrop-filter:blur(14px);
  animation:lbin .22s ease}
.lb-in{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:3.2vh 3vw;pointer-events:none}
.lb-in .film{pointer-events:auto;width:min(94vw, calc(93.6vh * var(--ar, 1.6)));
  box-shadow:0 60px 160px -40px rgba(0,0,0,1);animation:lbup .26s cubic-bezier(.2,.8,.3,1)}
.lb-in .film video{display:block;width:100%;height:auto}
@keyframes lbin{from{opacity:0}to{opacity:1}}
@keyframes lbup{from{opacity:0;transform:scale(.965)}to{opacity:1;transform:none}}

/* Vollbild: das Bild mittig einpassen statt oben kleben lassen */
.film.isfs{display:flex;align-items:center;justify-content:center;
  border:0;border-radius:0;background:#05040f}
.film.isfs video{width:auto;height:auto;max-width:100vw;max-height:100vh}

/* Auf schmalen Anzeigen wandert die Gesamtdauer weg, die Leiste bleibt bedienbar */
@media(max-width:520px){
  .pl{gap:7px;padding:9px 10px}
  .pl-b{width:28px;height:28px}
  .pl-all{display:none}
  .lb-in{padding:0}
  .lb-in .film{border-radius:0;border-left:0;border-right:0}
}

/* ---- Kleine Kacheln ----
   Dort waere eine volle Leiste zu eng. Es gibt nur eine Lupe; die Bedienung
   erscheint, sobald die Kachel gross vor der Seite steht. */
.pl-st{position:relative;display:block;line-height:0}
figure.mini .pl{display:none}
figure.mini .pl-z{display:none}
.pl-mag{position:absolute;top:8px;right:8px;z-index:4;
  display:grid;place-items:center;width:28px;height:28px;padding:0;
  border:1px solid var(--line);border-radius:8px;background:rgba(4,3,12,.72);
  backdrop-filter:blur(8px);color:var(--ink);cursor:pointer;
  opacity:0;transform:scale(.92);transition:opacity .16s ease,transform .16s ease,border-color .16s ease}
.pl-mag svg{width:15px;height:15px;fill:currentColor;pointer-events:none}
.pl-st:hover .pl-mag,.pl-mag:focus-visible{opacity:1;transform:none}
.pl-mag:hover{border-color:var(--accent)}
@media(hover:none){.pl-mag{opacity:1;transform:none}}

/* Gross vor der Seite gilt fuer die Kachel dasselbe wie fuer die grossen Filme */
figure.mini.isbig{border-radius:16px;background:#05040f}
figure.mini.isbig .pl{display:flex}
figure.mini.isbig .pl-mag{display:none}
figure.mini.isbig .pl-z{display:block}
.lb-in figure.mini{width:min(94vw, calc(84vh * var(--ar, 1.6)))}
.lb-in figure.mini video{display:block;width:100%;height:auto;aspect-ratio:auto}
.lb-in figure.mini figcaption{padding:11px 14px}

/* ---- Belege ----
   Jede Geschwindigkeitsangabe verweist auf ihr Rohprotokoll im oeffentlichen
   Repo. Zurueckhaltend gesetzt: es soll auffindbar sein, nicht laut. */
.ev{display:inline-flex;align-items:center;gap:5px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;
  color:var(--ink-3);text-decoration:none;border-bottom:1px solid transparent;
  transition:color .15s ease,border-color .15s ease}
.ev::before{content:"";width:11px;height:11px;flex:0 0 auto;background:currentColor;
  -webkit-mask:var(--evmask) center/contain no-repeat;mask:var(--evmask) center/contain no-repeat}
:root{--evmask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 1.4h5.2L13 5.2v9.4H4zM8.8 2.6v3h3zM5.6 8h6v1.2h-6zm0 2.4h6v1.2h-6z'/%3E%3C/svg%3E")}
.ev:hover{color:var(--accent);border-bottom-color:var(--accent)}
.nomess{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;color:var(--ink-3);opacity:.6}

.evline{margin:10px 0 0;padding-top:9px;border-top:1px solid var(--line-2)}
.evline.nomess{padding-top:9px}

/* Belegspalte soll die Tabelle nicht breiter machen als noetig */
#tbody td:last-child,#thead th:last-child{white-space:nowrap;width:1%}

/* ---- Nachprüfbarkeit ---- */
.proof{display:grid;gap:14px;margin-top:34px;text-align:left}
@media(min-width:820px){.proof{grid-template-columns:repeat(3,1fr)}}
.pf{padding:22px 22px 20px;border:1px solid var(--line);border-radius:16px;
  background:linear-gradient(180deg,rgba(var(--tint-rgb,236,233,255),.035),rgba(var(--tint-rgb,236,233,255),.012))}
.pf .n{margin:0 0 14px;width:26px;height:26px;display:grid;place-items:center;
  border:1px solid var(--accent);border-radius:50%;color:var(--accent);
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px}
.pf h3{margin:0 0 9px;font-size:16px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.pf p:not(.n){margin:0;font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.pf code{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;
  padding:1px 5px;border-radius:4px;background:rgba(var(--tint-rgb,236,233,255),.07);color:var(--ink)}
#nachweis .note .ev{margin-left:14px}


/* ---- Der Weg zur Detailseite ----
   Vier Wege fuehren dorthin: Karte, Suchfeld, Tabellenzeile, Punkt im Diagramm.
   Jeder braucht ein sichtbares Zeichen - und zwar eines, das ohne Mauszeiger
   funktioniert, weil die meisten Leute die Seite auf dem Handy sehen. */

/* Zaehler neben der Ueberschrift: das "auf einen Blick" */
.tally{display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px;margin:18px 0 0;
  padding:7px 14px;border:1px solid var(--line);border-radius:999px;
  background:rgba(var(--tint-rgb,236,233,255),.04);
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;color:var(--ink-3)}
.tally b{color:var(--ink);font-size:13px;font-variant-numeric:tabular-nums}
.tally span{opacity:.4}

/* Fusszeile der Karte. Volle Breite und 44 px hoch - das ist die Trefflaeche,
   auf die auf dem Handy tatsaechlich getippt wird. */
.mc{display:flex;flex-direction:column}
.mc .go{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:14px -19px -20px;padding:0 19px;min-height:44px;
  border-top:1px solid var(--line-2);
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;
  color:var(--accent);transition:color .18s ease,background .18s ease}
.mc .go span[aria-hidden]{font-size:14px;transition:transform .18s ease}
.mc:not(.pending):hover .go{background:rgba(var(--accent-rgb,201,139,255),.09)}
.mc:not(.pending):hover .go span[aria-hidden]{transform:translateX(4px)}
.mc .go .wait{color:var(--ink-3);opacity:.65}

/* Der Link deckt die ganze Karte ab - auf dem Handy trifft man damit ueberall.
   Der Beleglink liegt darueber und bleibt eigenstaendig anklickbar. */
.golink{color:inherit;text-decoration:none}
.golink::after{content:"";position:absolute;inset:0;border-radius:16px}
.golink:focus-visible{outline:none}
.golink:focus-visible::after{outline:2px solid var(--accent);outline-offset:3px}
.mc .evline{position:relative;z-index:1}
.mc .evline .ev{position:relative}
.mc.pending .go{color:var(--ink-3)}

/* Auf Tastbildschirmen gibt es kein Schweben - der Weg muss auch so sichtbar sein */
@media(hover:none){
  .mc:not(.pending) .go{background:rgba(var(--accent-rgb,201,139,255),.07)}
}

/* Tabelle: ein Modellname, hinter dem etwas liegt, sieht auch danach aus */
#tbody tr[data-go] .mtxt b{color:var(--accent)}
#tbody tr[data-go] .mtxt b::after{content:"→";margin-left:7px;font-size:11px;opacity:.55;
  display:inline-block;transition:transform .16s ease}
#tbody tr[data-go]:hover .mtxt b::after{transform:translateX(3px);opacity:1}

/* Diagramm: klickbare Punkte tragen einen Ring, die anderen nicht */
.pt.opens{filter:drop-shadow(0 0 5px rgba(var(--accent-rgb,201,139,255),.65))}

/* Der Tastaturhinweis gilt nur, wo es eine Tastatur gibt */
@media(max-width:640px){.onlykb{display:none}}

/* Zwoelf Karten sind auf dem Handy eine sehr lange Wand, und das Feld waechst
   weiter. Sechs stehen offen, der Rest kommt auf Wunsch - gesucht wird ohnehin
   ueber das Feld darueber. */
.mc.rest{display:none}
.cards.all .mc.rest{display:flex}
.more{display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;min-height:48px;margin-top:14px;padding:0 20px;
  border:1px solid var(--line);border-radius:12px;background:rgba(var(--tint-rgb,236,233,255),.04);
  color:var(--ink-2);cursor:pointer;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;
  transition:border-color .18s ease,color .18s ease,background .18s ease}
.more:hover{border-color:var(--accent);color:var(--ink);background:rgba(var(--accent-rgb,201,139,255),.08)}
.more:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.more span{transition:transform .2s ease}
.more[aria-expanded="true"] span{transform:rotate(180deg)}

/* Klebende Rang- und Modellspalte (Plan 3.3).
   Die Rangliste ist 1356 px breit und scrollt seitwaerts in ihrem eigenen
   Bereich. Ohne festen Modellnamen weiss man nach zwei Wischern nicht mehr,
   welche Zeile man gerade liest - und die meisten sehen die Seite am Handy.
   Rang und Modell bleiben deshalb stehen, das Modell versetzt um die
   Rangbreite. */
#viewTable{--rankw:32px}
/* Der Ton entspricht der Platte ueber dem Grund, aber ohne Restdurchsicht */
#viewTable th:first-child,#viewTable td.rank{
  position:sticky;left:0;z-index:2;width:var(--rankw);min-width:var(--rankw);
  background:rgb(var(--ground-rgb,7,5,20))}
#viewTable th:nth-child(2),#viewTable td.model{
  position:sticky;left:var(--rankw);z-index:2;
  background:rgb(var(--ground-rgb,7,5,20))}
#viewTable thead th:first-child,#viewTable thead th:nth-child(2){z-index:3}
/* Kante nach rechts, damit sichtbar ist, dass darunter weitergescrollt wird */
#viewTable th:nth-child(2)::after,#viewTable td.model::after{
  content:"";position:absolute;top:0;right:0;bottom:0;width:1px;background:var(--line)}

/* Eine Grid-Spalte mit 1fr hat min-width:auto - der Startzeilen-Block mit
   white-space:pre drueckt die Spalte damit ueber die Seitenbreite hinaus,
   obwohl er selbst scrollen koennte. minmax(0,1fr) hebt das auf. */
.hwgrid{grid-template-columns:minmax(0,1fr)}
@media(min-width:880px){.hwgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hwcard,.copywrap{min-width:0}

/* ---- Der Aufmacher mit dem spielbaren Ergebnis ----
   Die Kachel zeigt ein Standbild und einen Knopf. Das Spiel laeuft danach in
   einer Ebene ueber der ganzen Seite - nicht hier drin: unter 720 Pixeln
   Rahmenhoehe schneidet es sein eigenes Menue ab. */
.sp{position:relative;border:1px solid var(--line);border-radius:18px;overflow:hidden;
  background:#05040f;box-shadow:0 44px 120px -50px rgba(0,0,0,1)}
.sp-bild{display:block;width:100%;height:auto;aspect-ratio:1100/678;object-fit:cover}

/* Die Zeile macht aus einem Spiel-Standbild ein Beweisstueck, bevor das Auge
   es als Spiel liest. Sie hat einen eigenen Grund - der Himmel im Bild ist
   hell, Text ohne Flaeche waere dort nicht lesbar. */
.sp-marke{position:absolute;left:0;right:0;bottom:0;margin:0;padding:34px 20px 14px;
  background:linear-gradient(to top,rgba(4,3,12,.94),rgba(4,3,12,0));
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;color:var(--ink-2)}

.sp-los{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:5px;
  min-height:64px;padding:14px 30px;cursor:pointer;
  border:1px solid var(--accent);border-radius:14px;
  background:rgba(12,8,26,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  color:var(--ink);transition:background .18s ease,transform .18s ease}
.sp-los:hover{background:rgba(var(--accent-rgb,201,139,255),.24);transform:translate(-50%,-50%) scale(1.03)}
.sp-los:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.sp-los-t{font-family:Archivo,sans-serif;font-weight:700;font-size:19px;letter-spacing:-.01em}
.sp-los-s{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;color:var(--ink-2)}

.sp-zeile{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:center;
  margin:16px 0 0;padding:0}
.sp-zeile .ev{background:none;border:0;cursor:pointer;font:inherit;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px}
button.ev{color:var(--ink-3)}
button.ev:hover{color:var(--accent)}

/* ---- Die Spielebene ----
   Volle Fensterhoehe statt Fullscreen-API: Safari auf dem iPhone kennt
   requestFullscreen an gewoehnlichen Elementen nicht. position:fixed wirkt
   ueberall und braucht keine Erlaubnis. */
html.sp-offen,html.sp-offen body{overflow:hidden}
.sp-ebene{position:fixed;inset:0;z-index:95;display:none;
  flex-direction:column;background:#05040f}
.sp-ebene.an{display:flex}
.sp-leiste{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:8px 14px;background:rgba(var(--ground-rgb,7,5,20),.96);
  border-bottom:1px solid var(--line-2)}
.sp-name{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;
  color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-zu{flex:0 0 auto;min-height:44px;padding:0 16px;cursor:pointer;
  border:1px solid var(--line);border-radius:10px;background:transparent;
  color:var(--ink);font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px}
.sp-zu:hover{border-color:var(--accent);background:rgba(var(--accent-rgb,201,139,255),.14)}
.sp-zu:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sp-rahmen{flex:1 1 auto;width:100%;border:0;background:#000;display:block}

@media(max-width:520px){
  .sp-los{padding:12px 22px}
  .sp-los-t{font-size:17px}
  .sp-marke{padding:28px 14px 11px;font-size:10.5px}
}

/* Im Aufmacher stehen die drei Zahlen auch am Telefon nebeneinander. Gestapelt
   waere der Abschnitt dort 1226 Pixel hoch - anderthalb Bildschirme, bevor
   ueberhaupt etwas anderes kommt. */
#bestes .statrow{grid-template-columns:repeat(3,minmax(0,1fr))}
#bestes .statrow div{padding:14px 8px}
#bestes .statrow b{font-size:clamp(15px,4.2vw,26px);line-height:1.15}
#bestes .statrow span{font-size:8.5px;letter-spacing:.06em}

/* ---- Die Rangliste am Telefon ----
   Als Tabelle taugt sie dort nicht: die klebende Modellspalte nimmt 250 von
   390 Pixeln, und alle Zahlen - der eigentliche Zweck - liegen ausserhalb des
   Schirms. Wer sie sehen will, muss wischen und verliert dabei die Zeile.

   Unter 760 Pixeln wird jede Zeile ein Block. Zwei Entscheidungen dabei:

   Flex statt Raster - mit grid-area landen alle Wertzellen in derselben
   Flaeche und liegen uebereinander. Nachgemessen und verworfen.

   Und nicht alle zwoelf Spalten: zwoelf Werte untereinander machen einen
   Block 761 Pixel hoch, neun Bloecke waeren dann 3400 Pixel Wischweg. Am
   Telefon stehen die fuenf, auf die es ankommt; p10-p90, Spitze und
   Selbstkorrekturen bleiben der breiten Ansicht vorbehalten. */
@media(max-width:760px){
  #viewTable{overflow:visible;background:none;border:0;box-shadow:none;padding:0}
  #viewTable table{display:block;min-width:0;width:100%;border:0}
  #viewTable thead{display:none}
  #viewTable tbody{display:grid;gap:10px}

  #viewTable tbody tr{display:flex;flex-wrap:wrap;align-items:flex-start;
    gap:0 12px;background:rgba(var(--ground-rgb,7,5,20),.86);border:1px solid var(--line);
    border-radius:14px;padding:13px 14px 14px;cursor:default}
  #viewTable tbody tr:hover td{background:none}

  #viewTable td{display:block;border:0;padding:0;position:static;background:none;
    width:auto;min-width:0;text-align:left}
  #viewTable td::before{content:attr(data-sp);display:block;
    font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:8.5px;
    letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
    margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* Nebenwerte: in der Tabelle nuetzlich, im Block nur Ballast */
  #viewTable td[data-sp="p10 – p90"],
  #viewTable td[data-sp="Spitze"],
  #viewTable td[data-sp="Selbstkorr."]{display:none}

  /* Erste Zeile: Rang und Modell */
  #viewTable td.rank{flex:0 0 auto;order:1;
    font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:13px;color:var(--ink-3)}
  #viewTable td.model{flex:1 1 auto;order:2}
  #viewTable td.rank::before,#viewTable td.model::before{display:none}
  #viewTable td.model .mtxt b{font-size:16px}

  /* Danach die Werte, zwei je Zeile */
  #viewTable td:not(.rank):not(.model){order:3;flex:1 1 calc(50% - 6px);
    margin-top:12px;padding-top:10px;border-top:1px solid var(--line-2)}
  #viewTable td.num .cell{display:flex;flex-direction:column-reverse;gap:6px;align-items:flex-start}
  /* Die Balken tragen den Vergleich zwischen den Laeufen. In der Tabelle
     bekommen sie ihre Hoehe aus der Zeile; im Block fallen sie ohne eigene
     Angabe auf null zusammen - nachgemessen 120x0. */
  #viewTable td.num .barwrap{width:100%;max-width:130px;height:5px;flex:0 0 auto}
  #viewTable td.num .barwrap i{height:5px}
  #viewTable td .v{font-size:16px;text-align:left}
  #viewTable td .rngtxt,#viewTable td .kind,#viewTable td .hwchip{font-size:11.5px}
}

/* ---- Die persönliche Empfehlung ----
   Bewusst anders als der Rest der Seite: keine Rundungen, kein Glas, kein
   Verlauf. Haarlinien trennen, die Typografie trägt die Hierarchie. Das ist
   die einzige Stelle, an der jemand Verantwortung übernimmt statt Zahlen zu
   sortieren — sie soll sich anfühlen wie ein Messprotokoll, nicht wie eine
   weitere Kachel. */
.tips{display:grid;gap:0;margin-top:40px;text-align:left;
  border-top:1px solid var(--ink-3);border-bottom:1px solid var(--ink-3)}
@media(min-width:880px){
  .tips{grid-template-columns:1fr 1fr}
  .tip + .tip{border-left:1px solid var(--line);border-top:0}
}
.tip{padding:26px 0 24px;background:rgba(var(--ground-rgb,7,5,20),.72);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.tip + .tip{border-top:1px solid var(--line)}
@media(min-width:880px){.tip{padding:28px 26px 26px}}
@media(max-width:879px){.tip{padding:24px 18px 22px}}

.tip-hw{display:flex;align-items:center;gap:8px;margin:0 0 18px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.tip-hw i{width:7px;height:7px;border-radius:50%;flex:0 0 7px}

.tip-m{margin:0;font-family:Archivo,sans-serif;font-weight:800;
  font-size:clamp(23px,2.6vw,31px);letter-spacing:-.03em;color:var(--ink);line-height:1.08}
.tip-q{margin:5px 0 0;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:11.5px;color:var(--ink-3)}

/* Die Zahlen: gross, ohne Kasten, nur durch eine Linie abgesetzt */
.tip-w{display:flex;gap:0 30px;margin:22px 0 0;padding:16px 0 0;
  border-top:1px solid var(--line)}
.tip-w div{flex:0 1 auto}
.tip-w dt{margin:0;order:2;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.tip-w dd{margin:0 0 4px;order:1;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:clamp(20px,2.3vw,27px);font-weight:500;color:#fff;
  font-variant-numeric:tabular-nums;line-height:1.05}
.tip-w div{display:flex;flex-direction:column}

.tip-warum{margin:20px 0 0;padding-top:16px;border-top:1px solid var(--line);
  font-size:14px;line-height:1.65;color:var(--ink-2);max-width:44ch}

/* Die Knopfzeile steht in beiden Karten auf gleicher Hoehe, auch wenn die
   Begruendungen unterschiedlich lang sind. */
.tip{display:flex;flex-direction:column}
.tip-warum{flex:1 1 auto}
.tip-tun{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;margin:20px 0 0}
.tip-kopf{min-height:44px;padding:0 18px;cursor:pointer;
  border:1px solid var(--ink-3);border-radius:0;background:transparent;color:var(--ink);
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;
  transition:background .16s ease,border-color .16s ease}
.tip-kopf:hover{background:var(--ink);color:#070514;border-color:var(--ink)}
.tip-kopf:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── Bilderkennung: Vergleich ──────────────────────────────────────────
   Eine Tabelle und keine Kacheln, weil hier Modelle Zeile fuer Zeile
   gegeneinander gelesen werden. Die erste Spalte nennt das Kriterium, jede
   weitere ein Modell. Bestanden und gefallen bekommen Farbe UND Wort, nie
   nur Farbe: sonst ist die Aussage fuer jeden weg, der Rot und Gruen nicht
   trennen kann. */
.vh3{font-family:Archivo,sans-serif;font-weight:700;font-size:clamp(19px,2.3vw,25px);
  letter-spacing:-.02em;margin:52px 0 10px;text-wrap:balance}
.vsay{margin-bottom:22px}
.vgl{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
.vgl th,.vgl td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.vgl thead th{border-bottom:1px solid var(--line-2);text-align:center;
  color:var(--ink-2);font-weight:400}
.vgl thead th:first-child{text-align:left}
.vgl thead b{display:block;color:var(--ink);font-weight:600;font-size:14.5px}
.vgl thead span{display:block;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:10.5px;letter-spacing:.04em;color:var(--ink-3);margin-top:3px}
.vgl tbody th{text-align:left;font-weight:400;color:var(--ink-2);max-width:30ch}
.vgl tbody td{text-align:center;color:var(--ink-2)}
.vgl tbody tr:last-child th,.vgl tbody tr:last-child td{border-bottom:0}
.vgl b{color:var(--ink);font-weight:600}
.vok{color:var(--ok)}
.vno{color:var(--warn)}
.vhalb{color:var(--ink-3)}
.vfn{font-size:9.5px;color:var(--accent);margin-left:2px;vertical-align:super;line-height:0}
.vfuss{margin:20px auto 0;padding:0 0 0 22px;display:grid;gap:9px;
  font-size:12.5px;line-height:1.6;color:var(--ink-3);max-width:78ch;text-align:left}
.vfuss li::marker{color:var(--accent);font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:10.5px}
.vfuss b{color:var(--ink-2);font-weight:600}
@media(max-width:560px){.vgl{font-size:13px}.vgl th,.vgl td{padding:9px 10px}}

/* ══ Detailseiten ═══════════════════════════════════════════════════════
   Erzeugt aus run.json. Dieselben Farben, Schriften und Flaechen wie die
   Startseite: eine Detailseite ist keine andere Website, sie ist dieselbe,
   eine Ebene tiefer.

   Ueber allem liegt der bewegte Hintergrund. Deshalb hat JEDER Textblock
   eine eigene Flaeche; ein Rahmen ohne background genuegt nicht, dahinter
   laeuft der Hintergrund weiter durch und der Text verschwindet an den
   hellen Stellen. */
.d-nav{position:sticky;top:var(--kopf,54px);
  /* Unter der Kopfleiste bleiben. header.top traegt z-index 40, und .tools
     haengt als Kind darin, teilt sich also dessen Stapelplatz. Bei Gleichstand
     gewinnt das spaetere Element im Dokument, und das ist diese Leiste hier:
     sie hat die erste Zeile des Einstellungsfachs verdeckt. */
  z-index:30;
  background:rgba(var(--ground-rgb,7,5,20),.9);backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.d-nav .wrap{display:flex;gap:2px 4px;overflow-x:auto;scrollbar-width:none;
  padding:0;-webkit-overflow-scrolling:touch}
.d-nav .wrap::-webkit-scrollbar{display:none}
.d-nav a{flex:0 0 auto;padding:11px 13px;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:11px;letter-spacing:.05em;color:var(--ink-3);text-decoration:none;
  border-bottom:2px solid transparent;white-space:nowrap}
.d-nav a:hover{color:var(--ink)}
.d-nav a.hier{color:var(--ink);border-bottom-color:var(--accent)}

.d-kopf,.d-abschnitt{padding:46px 0 0}
.d-kopf .wrap,.d-abschnitt .wrap{background:rgba(var(--ground-rgb,7,5,20),.72);
  border:1px solid var(--line);border-radius:16px;padding:30px 28px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
@media(max-width:560px){.d-kopf .wrap,.d-abschnitt .wrap{padding:22px 17px;border-radius:13px}}
.d-abschnitt h2{font-family:Archivo,sans-serif;font-weight:700;
  font-size:clamp(20px,2.6vw,27px);letter-spacing:-.02em;margin:0 0 16px;
  /* kein text-wrap:balance. Bei kurzen Ueberschriften bricht der Algorithmus
     sie auf zwei Zeilen, obwohl die Spalte breit genug ist. */
  text-wrap:pretty;max-width:34ch}
.d-abschnitt p{color:var(--ink-2);line-height:1.65;margin:0 0 12px;max-width:70ch}

.d-titel{font-family:Archivo,sans-serif;font-weight:800;
  font-size:clamp(30px,5vw,50px);line-height:1.03;letter-spacing:-.03em;margin:8px 0 6px}
.d-unter{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12.5px;
  letter-spacing:.06em;color:var(--ink-3);margin:0 0 22px;text-transform:uppercase}
.d-fakten{display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  margin:0;border-top:1px solid var(--line)}
.d-fakten>div{padding:13px 0 12px;border-bottom:1px solid var(--line)}
.d-fakten dt{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}
.d-fakten dd{margin:0;font-size:14.5px;color:var(--ink)}
.d-fakten dd span{display:block;font-size:12px;color:var(--ink-3);margin-top:2px}
.d-fazit{margin:22px 0 0;font-size:clamp(15px,1.7vw,17.5px);line-height:1.62;
  color:var(--ink-2);border-left:2px solid var(--accent);padding-left:17px;max-width:74ch}

/* auto-fit statt einer festen Spaltenzahl: ein Lauf ohne Serverprotokoll hat
   nur zwei Kacheln, und feste vier Spalten liessen daneben zwei leere Felder
   in voller Hoehe stehen. auto-fit legt die Spuren an und laesst die leeren
   zusammenfallen, die vorhandenen Kacheln fuellen die Reihe. */
.d-kacheln{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:12px;overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr))}
@media(min-width:620px){.d-kacheln{
  grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr))}}
.d-k{background:rgba(var(--ground-rgb,7,5,20),.8);padding:16px 15px 15px}
.d-kl{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:9.5px!important;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:0 0 7px!important}
.d-kv{font-family:Archivo,sans-serif;font-weight:700;font-size:24px;color:var(--ink);
  margin:0!important;line-height:1.1;font-variant-numeric:tabular-nums}
.d-kv i{font-style:normal;font-size:13px;font-weight:500;color:var(--ink-3);margin-left:3px}
.d-kf{font-size:11.5px!important;color:var(--ink-3);margin:7px 0 0!important;line-height:1.45}
.nm{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:13px;
  font-weight:400;color:var(--warn);letter-spacing:.02em}

.d-quelle{font-size:12.5px!important;color:var(--ink-3)!important;margin-top:16px!important;
  line-height:1.6}
.d-quelle a,.d-hinweis a{color:var(--accent)}
.d-leer{color:var(--ink-3)!important;font-size:14px!important}
.d-hinweis{font-size:13px!important;color:var(--ink-3)!important;
  border-left:2px solid var(--warn);padding-left:14px;margin:16px 0!important}

.d-medium{margin:0 0 22px}
.d-medium video,.d-medium img{width:100%;height:auto;border-radius:12px;
  border:1px solid var(--line);display:block;background:#000}
.d-medium figcaption{font-size:12.5px;color:var(--ink-3);margin-top:9px;line-height:1.55}

.d-spiel{margin-top:26px;border-top:1px solid var(--line);padding-top:22px}
.d-spielkopf{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;
  justify-content:space-between;margin-bottom:10px}
.d-spielkopf h3{font-family:Archivo,sans-serif;font-weight:700;font-size:17px;margin:0}
.d-start,.d-halt{font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;
  padding:11px 19px;min-height:44px;border-radius:9px;border:1px solid var(--accent);
  background:rgba(var(--accent-rgb,201,139,255),.14);color:var(--ink)}
.d-start:hover,.d-halt:hover{background:rgba(var(--accent-rgb,201,139,255),.24)}
.d-halt{margin-top:12px;border-color:var(--line);background:transparent;color:var(--ink-2)}
.d-spielinfo{font-size:12.5px!important;color:var(--ink-3)!important;margin:0 0 8px!important}
.d-grenze{color:var(--warn)}
.d-rahmen{position:relative;width:100%;margin-top:14px;border-radius:12px;
  overflow:hidden;border:1px solid var(--line);background:#000}
.d-rahmen iframe,.d-standbild{position:absolute;inset:0;width:100%;height:100%;border:0}
.d-standbild{object-fit:cover}
.d-rahmen iframe:not(.laeuft){opacity:0;pointer-events:none}

.d-svg{margin:24px 0 0;background:#0b0f14;border:1px solid var(--line);
  border-radius:12px;padding:14px;overflow-x:auto}
.d-svg svg{max-width:100%;height:auto;display:block}
.d-svg figcaption{font-size:12.5px;color:var(--ink-3);margin-top:11px;line-height:1.55}
.d-zitat{font-size:14px!important;color:var(--ink-2)!important;font-style:italic;
  border-left:2px solid var(--line);padding-left:15px;margin-top:18px!important}

.d-diagramm{margin-top:10px;overflow-x:auto}
.d-diagramm svg{width:100%;min-width:520px;height:auto;display:block}
.d-gitter{stroke:var(--line);stroke-width:1}
.d-linie{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round;
  stroke-linecap:round}
.d-punkt{fill:var(--accent);stroke:rgba(var(--ground-rgb,7,5,20),1);stroke-width:2;
  pointer-events:none;transition:r .12s ease}
.d-treff{fill:transparent}
.d-pkt{cursor:crosshair}
.d-pkt:hover .d-punkt,.d-pkt:focus-visible .d-punkt{r:6.5}
.d-pkt:focus{outline:none}
.d-pkt:focus-visible .d-treff{stroke:var(--accent);stroke-width:2;fill:rgba(var(--accent-rgb,201,139,255),.16)}
.d-achse{fill:var(--ink-3);font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px}
/* Messreihen eines Labortests: mehrere Diagramme untereinander, jedes mit
   eigener Ueberschrift und Einleitung. Die Grundlinie markiert den Wert ohne
   Spekulation, gestrichelt, damit sie nicht wie eine zweite Messreihe aussieht. */
.d-diagrammblock{margin:0 0 38px}
.d-diagrammblock:last-child{margin-bottom:0}
/* Keine eigene Trennlinie zwischen den Bloecken: .d-h3 zieht schon eine,
   und mit beiden standen zwischen zwei Diagrammen zwei Linien. */
.d-diagrammblock > p{max-width:64ch}
.d-grundlinie{stroke:var(--ink-3);stroke-width:1.2;stroke-dasharray:5 5}
/* Das Schild unter einer Beschriftung verdeckt Gitterlinien dahinter. Ein
   Rand um die Schrift liess sie zwischen den Woertern stehen. */
.d-markengrund{fill:rgba(var(--ground-rgb,7,5,20),.88)}
.d-grundtext{fill:var(--ink-3);font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px}
.d-markentext{fill:var(--ink-2);font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;font-weight:600}

.d-arch{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:0;
  margin:0 0 18px;border-top:1px solid var(--line)}
.d-arch>div{display:contents}
.d-arch dt{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);
  padding:11px 26px 11px 0;border-bottom:1px solid var(--line);white-space:nowrap}
.d-arch dd{margin:0;font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums;
  padding:11px 0;border-bottom:1px solid var(--line)}
@media(max-width:560px){
  .d-arch{grid-template-columns:minmax(0,1fr)}
  .d-arch dt{padding:11px 0 2px;border-bottom:0;white-space:normal}
  .d-arch dd{padding:0 0 11px}
}
.d-archbild img{width:100%;height:auto;border-radius:10px;border:1px solid var(--line);
  background:#fff}
.d-archbild figcaption{font-size:12px;color:var(--ink-3);margin-top:8px}

.d-code{margin-top:8px}
.d-kopie{font:inherit;font-size:12px;cursor:pointer;padding:9px 14px;min-height:44px;
  border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--ink-2);
  margin-bottom:10px}
.d-kopie:hover{border-color:var(--accent);color:var(--ink)}
.d-code pre{background:rgba(0,0,0,.42);border:1px solid var(--line);border-radius:10px;
  padding:15px 16px;overflow-x:auto;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:11.5px;line-height:1.65;color:var(--ink-2);margin:0}

.d-note{display:flex;flex-wrap:wrap;gap:8px 26px;align-items:baseline}
.d-notewert{font-family:Archivo,sans-serif;font-weight:800;font-size:40px;color:var(--ink);
  margin:0!important;line-height:1}
.d-notewert i{font-style:normal;font-size:17px;font-weight:500;color:var(--ink-3)}
.d-notetext{font-size:13px!important;color:var(--ink-3)!important;max-width:52ch;margin:0!important}

.d-fehler,.d-quellen,.d-schritte{margin:0;padding-left:0;list-style:none;display:grid;gap:10px}
.d-fehler li{padding-left:19px;position:relative;font-size:14px;color:var(--ink-2);
  line-height:1.6}
.d-fehler li::before{content:"";position:absolute;left:0;top:.65em;width:9px;height:1px;
  background:var(--warn)}
.d-quellen li{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;
  padding-bottom:9px;border-bottom:1px solid var(--line);font-size:13.5px}
.d-quellen li span{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);min-width:16ch}
.d-quellen a{color:var(--accent);word-break:break-word}
.d-schritte{counter-reset:d}
.d-schritte li{counter-increment:d;padding-left:30px;position:relative;font-size:14px;
  color:var(--ink-2);line-height:1.6}
.d-schritte li::before{content:counter(d,decimal-leading-zero);position:absolute;left:0;
  top:.05em;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;color:var(--accent)}
.d-zitieren{font-size:12.5px!important;color:var(--ink-3)!important;margin-top:18px!important}

/* Der Einstieg ins Spiel auf der Detailseite. Kein Rahmen im Textfluss:
   das Spiel schneidet sein Menue ab, sobald der Rahmen unter 720 Pixel
   hoch ist, und eine Spalte im Fliesstext ist nie so hoch. Deshalb ein
   Standbild als Knopf, der die Ebene oeffnet. */
.d-buehne{display:block;position:relative;width:100%;margin-top:14px;padding:0;
  border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#000;
  cursor:pointer;font:inherit;color:inherit}
.d-buehne img{display:block;width:100%;height:auto;opacity:.72;transition:opacity .18s}
.d-buehne:hover img,.d-buehne:focus-visible img{opacity:1}
.d-buehne-los{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:0 26px;
  border-radius:999px;background:rgba(var(--ground-rgb,7,5,20),.82);
  border:1px solid var(--accent);color:var(--ink);font-weight:600;font-size:15px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.d-buehne-los::before{content:"";width:0;height:0;border-left:11px solid var(--accent);
  border-top:7px solid transparent;border-bottom:7px solid transparent}
.d-buehne:hover .d-buehne-los{background:rgba(var(--accent-rgb,201,139,255),.22)}
.d-buehne:focus{outline:none}
.d-buehne:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.d-spielhinweis{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}

/* Aufnahme und Spielknopf in einem Block. Vorher standen Video und Standbild
   untereinander und zeigten dasselbe Spiel zweimal. */
.d-spielfeld{position:relative}
.d-spielfeld video{display:block}
.d-ueber{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  cursor:pointer;font:inherit;z-index:2}
.d-spielfeld:hover .d-ueber{background:rgba(var(--accent-rgb,201,139,255),.24)}
/* Der Knopf darf die Bedienleiste des Videos nicht verdecken. */
@media(max-width:520px){.d-ueber{top:42%}}

/* Bilderkennung: Pruefbild und Ausgabe nebeneinander, damit man vergleichen
   kann statt zu blaettern. Auf schmalen Schirmen untereinander. */
.d-zwei{display:grid;gap:20px;grid-template-columns:minmax(0,1fr);margin:0 0 8px}
@media(min-width:820px){.d-zwei{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
.d-zwei .d-medium,.d-zwei .d-svg{margin:0}
.d-zwei .d-medium img{max-height:420px;object-fit:contain;background:#0b0f14}
.d-h3{font-family:Archivo,sans-serif;font-weight:700;font-size:17px;
  margin:34px 0 14px;padding-top:20px;border-top:1px solid var(--line)}
.d-untertitel{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px!important;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)!important;
  margin:16px 0 8px!important}
.d-tabwrap{overflow-x:auto}
.d-tab{border-collapse:collapse;width:100%;font-size:13px;min-width:0}
.d-tab th,.d-tab td{padding:8px 12px 8px 0;border-bottom:1px solid var(--line);
  text-align:left;vertical-align:baseline}
.d-tab thead th{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:9.5px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.d-tab tbody th{font-weight:500;color:var(--ink-2)}
.d-tab td{color:var(--ink);font-variant-numeric:tabular-nums}
.d-punkte{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:13.5px;
  color:var(--ink-2);line-height:1.55}
.d-punkte li{padding-left:17px;position:relative}
.d-punkte li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1px;
  background:var(--accent)}
.d-punkte b{color:var(--ink)}

/* Umschalter zwischen den Laeufen eines Modells. Karteireiter, weil die
   Laeufe gleichrangig sind und man zwischen ihnen vergleicht. Klebt unter der
   Sprungleiste, damit man beim Scrollen sieht, welchen Lauf man liest. */
.d-wahl-halter{position:sticky;top:calc(var(--kopf,54px) + 43px);z-index:29;
  background:rgba(var(--ground-rgb,7,5,20),.9);backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);margin-top:46px}
.d-wahl{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:9px 0}
.d-wahl::-webkit-scrollbar{display:none}
.d-wahl-k{flex:0 0 auto;display:flex;flex-direction:column;gap:2px;align-items:flex-start;
  min-height:44px;padding:7px 15px;cursor:pointer;font:inherit;text-align:left;
  border:1px solid var(--line);border-radius:10px;
  background:rgba(var(--ground-rgb,7,5,20),.6);color:var(--ink-3)}
.d-wahl-k b{font-family:Archivo,sans-serif;font-weight:600;font-size:14px;color:var(--ink-2)}
.d-wahl-k span{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;
  letter-spacing:.06em}
.d-wahl-k:hover{border-color:var(--linie-stark,var(--line));color:var(--ink-2)}
.d-wahl-k[aria-selected="true"]{border-color:var(--accent);color:var(--ink);
  background:rgba(var(--accent-rgb,201,139,255),.12)}
.d-wahl-k[aria-selected="true"] b{color:var(--ink)}
.d-wahl-k:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Ohne Skript stehen die Laeufe untereinander und brauchen eine Trennung. */
.d-lauf-marke{margin:0;padding:26px 0 0;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.d-lauf-marke .wrap{display:block}

/* Die Preisschilder im Bild markieren. Ohne das ist "Schild 3" nur ein Wort
   neben einem Wimmelbild. Die Ziffern entsprechen der Tabelle daneben, und
   beim Ueberfahren leuchtet beides zusammen auf. */
/* Bild und Overlay muessen exakt dieselbe Box fuellen, sonst zeigen die
   Rechtecke daneben. Deshalb bekommt die Figur das Seitenverhaeltnis des
   Pruefbilds, und beide fuellen sie ganz. Die Hoehenbremse der Zweispalten-
   Ansicht gilt hier nicht, sie wuerde das Bild stauchen und das SVG nicht. */
.d-bildmarken{max-width:380px;margin-inline:auto}
.d-bildbox{position:relative;aspect-ratio:1176 / 1568;width:100%}
.d-zwei .d-bildmarken img{display:block;width:100%;height:100%;max-height:none;
  object-fit:contain;border-radius:12px}
.d-bildmarken svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.d-bereich{fill:none;stroke:var(--ok);stroke-width:4;stroke-dasharray:16 10;opacity:.85}
.d-bereichtext{fill:var(--ok);font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:26px;letter-spacing:.08em}
.d-marke rect{fill:rgba(var(--accent-rgb,201,139,255),.10);stroke:var(--accent);
  stroke-width:3;transition:fill .15s}
.d-marke circle{fill:var(--accent)}
.d-marke text{fill:#120a1c;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:20px;font-weight:600}
.d-marke.an rect{fill:rgba(var(--accent-rgb,201,139,255),.34);stroke-width:5}
.d-tab td.d-nr{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;
  color:var(--accent);width:2ch;padding-right:8px}
.d-tab tr[data-schild]{cursor:default}
.d-tab tr[data-schild].an{background:rgba(var(--accent-rgb,201,139,255),.10)}

/* Persoenliche Meinung. Das Foto liegt als Hintergrund darunter, wie auf der
   Folie der Startseite. Der Abschnitt sieht bewusst anders aus als alles
   daneben: hier steht kein Messwert, sondern eine Einschaetzung, und das darf
   man auf einen Blick sehen. */
.d-meinung{position:relative;isolation:isolate}
/* Das Foto stand vorher als Hintergrund unter dem Abschnitt und war unter dem
   noetigen Verlauf kaum zu erkennen. Jetzt steht es als Portrait im Kasten,
   neben Marke und Ueberschrift: gross genug, um jemanden zu erkennen, und
   ohne dem Text Kontrast zu nehmen. */
.d-meinung .wrap{border-color:rgba(var(--accent-rgb,201,139,255),.28)}
.d-meinung .kick{color:var(--accent)}
.d-meinung-kopf{display:flex;gap:20px;align-items:center;margin-bottom:20px;
  padding-bottom:18px;border-bottom:1px solid var(--line)}
.d-meinung-bild{flex:0 0 104px;width:104px;height:104px;border-radius:50%;
  object-fit:cover;object-position:50% 34%;
  border:2px solid rgba(var(--accent-rgb,201,139,255),.45)}
.d-meinung-kopf h2{margin:2px 0 6px}
.d-meinung p{max-width:64ch;font-size:clamp(15px,1.65vw,17px);line-height:1.68;
  color:var(--ink-2)}
.d-meinung p:last-of-type{margin-bottom:0}
.d-meinung-wer{margin:0!important;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:10.5px!important;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3)!important}
@media(max-width:560px){
  .d-meinung-kopf{gap:15px}
  .d-meinung-bild{flex:0 0 76px;width:76px;height:76px}
}

/* Aufklappbares. Zugeklappt eine Zeile, aufgeklappt der ganze Wortlaut des
   Modells. Der Pfeil ist selbst gesetzt, damit er in beiden Browsern gleich
   aussieht und die Trefflaeche 44 Pixel hoch bleibt. */
.d-klapp{margin-top:18px;border-top:1px solid var(--line);padding-top:6px}
.d-klapp summary{display:flex;align-items:center;gap:9px;min-height:44px;cursor:pointer;
  list-style:none;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;
  letter-spacing:.06em;color:var(--ink-3)}
.d-klapp summary::-webkit-details-marker{display:none}
.d-klapp summary::before{content:"";width:0;height:0;border-left:6px solid var(--accent);
  border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;
  transition:transform .15s}
.d-klapp[open] summary::before{transform:rotate(90deg)}
.d-klapp summary:hover{color:var(--ink-2)}
.d-klapp summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.d-klapp .d-punkte{margin:10px 0 0}

.d-tab thead th i{display:block;font-style:normal;font-weight:400;font-size:9px;letter-spacing:.08em;color:var(--ink-3);margin-top:3px;text-transform:none}

/* Ein Sprungziel muss unter dem klebenden Stapel landen, sonst liegt seine
   Ueberschrift dahinter. Der Stapel ist Kopf plus Sprungleiste; auf einer
   Modellseite kommt der Laufumschalter dazu. :has erkennt das, und wo es das
   nicht gibt, gilt der kleinere Wert - immer noch besser als gar keiner. */
:root{--sprung:calc(var(--kopf,54px) + 43px + 10px)}
body:has(.d-wahl-halter){--sprung:calc(var(--kopf,54px) + 43px + 75px + 10px)}
.d-lauf,.d-abschnitt,.d-kopf,.d-lauf section[id],section[id].d-abschnitt{
  scroll-margin-top:var(--sprung)}
.d-wahl-halter{scroll-margin-top:calc(var(--kopf,54px) + 43px)}

/* Lupe fuer die Pruefbilder. Der Knopf sitzt in der Ecke des Bildes, nicht
   darunter: er gehoert zum Bild, und unter dem Bild steht schon die
   Bildunterschrift. */
.d-lupe{position:relative}
.d-lupe img,.d-lupe svg{cursor:zoom-in}
.d-lupeknopf{position:absolute;top:10px;right:10px;width:38px;height:38px;padding:0;
  display:grid;place-items:center;cursor:zoom-in;border-radius:9px;
  border:1px solid var(--line);background:rgba(var(--ground-rgb,7,5,20),.82);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--ink-2);z-index:2}
.d-lupeknopf:hover{border-color:var(--accent);color:var(--ink)}
.d-lupeknopf svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round}
.d-svg.d-lupe .d-lupeknopf{top:8px;right:8px}

.d-lupebox{position:fixed;inset:0;z-index:120;display:none;
  background:rgba(var(--ground-rgb,7,5,20),.94);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  overflow:auto;padding:56px 22px 30px}
.d-lupebox.an{display:block}
html.d-lupeoffen{overflow:hidden}
.d-lupein{max-width:1500px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.d-lupein img,.d-lupein svg{max-width:100%;height:auto;border-radius:10px;
  border:1px solid var(--line);background:#0b0f14}
.d-lupetext{font-size:13px;color:var(--ink-3);margin:13px 0 0;max-width:74ch;
  text-align:center;line-height:1.55}
.d-lupezu{position:fixed;top:14px;right:16px;width:42px;height:42px;font-size:26px;
  line-height:1;cursor:pointer;border-radius:10px;border:1px solid var(--line);
  background:rgba(var(--ground-rgb,7,5,20),.9);color:var(--ink-2)}
.d-lupezu:hover{border-color:var(--accent);color:var(--ink)}
@media(max-width:560px){.d-lupebox{padding:52px 10px 20px}}

/* Die Rubrik. Vier Kriterien nebeneinander, je fuenf Punkte als Balken statt
   als Zahl allein: die Verteilung wird so ohne Ziffernvergleich erfasst, und
   die Begruendung steht direkt darunter, wo sie hingehoert. */
.d-rubrik{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:12px;overflow:hidden;margin-top:22px;
  grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr))}
.d-rk{background:rgba(var(--ground-rgb,7,5,20),.8);padding:15px 15px 14px}
.d-rkname{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px!important;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-2);margin:0 0 9px!important}
.d-rkname span{display:block;text-transform:none;letter-spacing:0;font-size:10.5px;
  color:var(--ink-3);margin-top:3px}
.d-rkpunkte{display:flex;align-items:center;gap:3px;margin:0 0 9px!important}
.d-rkpunkte i{width:15px;height:7px;border-radius:2px;background:var(--line);display:block}
.d-rkpunkte i.voll{background:var(--accent)}
.d-rkpunkte b{font-family:Archivo,sans-serif;font-weight:700;font-size:15px;
  color:var(--ink);margin-left:7px;font-variant-numeric:tabular-nums}
.d-rkpunkte b em{font-style:normal;font-weight:500;font-size:11px;color:var(--ink-3)}
.d-rkgrund{font-size:11.5px!important;color:var(--ink-3)!important;margin:0!important;
  line-height:1.5}

/* Abstimmungsfeld. Bewusst schlicht: es steht unter einer Bewertung, die
   begruendet ist, und soll die nicht ueberstrahlen. */
.d-vote{margin-top:20px;border-top:1px solid var(--line);padding-top:18px}
.d-votekopf{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px!important;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-2);margin:0 0 13px!important}
.d-votekopf span{display:block;text-transform:none;letter-spacing:0;font-size:12px;
  color:var(--ink-3);margin-top:5px;font-family:inherit}
.d-votereihen{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.d-votereihe{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center}
.d-votename{font-size:13px!important;color:var(--ink-2)!important;margin:0!important;min-width:11ch}
.d-voteknoepfe{display:flex;gap:4px}
.d-voteknopf{width:32px;height:32px;padding:0;font:inherit;font-size:12.5px;cursor:pointer;
  border-radius:7px;border:1px solid var(--line);background:transparent;color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.d-voteknopf:hover{border-color:var(--accent);color:var(--ink)}
.d-voteknopf.meine{border-color:var(--accent);color:var(--ink);
  background:rgba(var(--accent-rgb,201,139,255),.16)}
.d-voteerg{font-size:11.5px!important;color:var(--ink-3)!important;margin:0!important;
  flex:1 1 12ch}
.d-votefuss{font-size:11.5px!important;color:var(--ink-3)!important;margin:11px 0 0!important;
  min-height:1.2em}
@media(max-width:560px){.d-voteknopf{width:38px;height:38px}}
.d-voteerg b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.d-votevgl{display:block;margin-top:3px;color:var(--ink-3)}