*{box-sizing:border-box;margin:0;padding:0}
:root{
  /* ── NACHT-MODUS (Standard): Mahagoni & Gold ── */
  --bg:#140f0a;--bg2:#1c1610;--bg3:#241a12;
  --brd:rgba(214,180,110,0.14);--brdv:rgba(212,175,55,0.34);
  --v:#d4af37;--vl:#e8cd7a;--vd:rgba(212,175,55,0.12);
  /* P6 (2026-07-07): Sekundär-/Tertiär-Text-Alpha erhöht, damit auf dunklem Grund WCAG-AA (≥4.5:1) für 12–14px erreicht wird. Vorher 0.56/0.30 — unterhalb der Grenze. */
  --tx:#f3e9d6;--t2:rgba(243,233,214,0.78);--t3:rgba(243,233,214,0.58);
  --mono:"JetBrains Mono",monospace;--sans:"Inter",sans-serif;
  --green:#9ab86a;--amber:#fbbf24;--red:#d9785a;
  --SBW:min(760px, 68vw); /* Sidebar-Breite — bis 760 px oder 68 % Viewport. Sicher, dass die Meta-Zeile (Sp. + Quadrant + Datum) einzeilig passt. */
  /* Type-Scale (P6): eine Quelle der Wahrheit statt 165× Inline-font-size. Aktuell nur teilweise angewandt — Inline-Werte wurden auf zulässige Größen gehoben (>=12px). */
  --text-xs:12px;   /* kleinster erlaubter Text — kompakte Labels, Notes */
  --text-sm:12.5px; /* dichte UI-Labels */
  --text-base:14px; /* Standard-Body */
  --text-md:15.5px; /* hervorgehobene Werte */
  --text-lg:18px;   /* Section-Header */
  --text-xl:22px;   /* Overlay-Titel */
}
/* ── TAG-MODUS (hell, warmes Pergament) ── */
body.light{
  --bg:#efe6d2;--bg2:#f7f0e0;--bg3:#fbf6ea;
  --brd:rgba(90,60,20,0.16);--brdv:rgba(176,138,40,0.40);
  --v:#a67c1a;--vl:#7a5a12;--vd:rgba(176,138,40,0.10);
  --tx:#2c2008;--t2:rgba(44,32,8,0.80);--t3:rgba(44,32,8,0.66);
  --green:#4d7c0f;--amber:#b45309;--red:#b91c1c;
}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--tx);font-family:var(--sans);font-size:var(--text-base)}

/* ── EXAKT WIE GRIDTEST – nur vertikale Flex-Kette ── */
#shell{display:flex;flex-direction:column;width:100%;height:100vh}
/* z-index 1100 (14.09.2026, vorher 100): Der Kopfbalken ist eine eigene Stapelordnung
   (position:relative + z-index). Sprach-, Burger- und Konto-Menue liegen DARIN und koennen
   ihn nie verlassen -- mit Ebene 100 lagen sie unter dem 3D-Fenster (.m3d-modal, 1000),
   "sehe die Menueeintraege nicht mal" (Inhaber). Ueber 1000, unter jedem echten Dialog
   (Import 2400, Onboarding 9500, Recht 9600, Kontakt 9650, Trial 9999, kl. Universum 10000). */
#topbar{flex:0 0 44px;background:var(--bg2);border-bottom:1px solid var(--brd);display:flex;flex-wrap:nowrap;align-items:center;padding:0 12px;gap:10px;z-index:1100;position:relative}
/* Linke Gruppe scrollt horizontal, wenn der Platz eng wird (2026-07-20). flex:1 füllt den
   Raum bis zur festen rechten Gruppe; min-width:0 erlaubt das Schrumpfen unter die Inhaltsbreite
   (sonst würde die rechte Gruppe rausgedrängt). Scrollbalken versteckt — Bedienung über #tb-nav. */
#topbar-scroll{display:flex;flex:1 1 auto;min-width:0;align-items:center;gap:10px;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}
#topbar-scroll::-webkit-scrollbar{height:0;width:0;display:none}
/* Rechte Gruppe: nie schrumpfen, immer sichtbar. */
#topbar > .mtx3d-btn,#topbar > .lang-wrap,#topbar > .auth-wrap,#topbar > .trial-badge,#topbar > .burger-wrap,#tb-nav{flex:0 0 auto}
/* Scroll-Pfeile — nur bei Überlauf sichtbar (#tb-nav.show via JS). */
#tb-nav{display:none;align-items:center;gap:3px;margin:0 2px}
#tb-nav.show{display:flex}
/* Deutlich sichtbar (16.09.2026, Inhaber: „bei kleineren Bildschirmen fast nicht zu sehen"):
   vorher 22 px, dunkler Grund, duenner Rand. Jetzt goldener Grund, dunkles Zeichen, groesser. */
.tb-nav-btn{display:flex;align-items:center;justify-content:center;width:28px;height:32px;padding:0;border:1px solid var(--vl);border-radius:6px;background:var(--v);color:#1a1206;font-size:20px;font-weight:700;line-height:1;cursor:pointer;user-select:none;transition:background .15s,opacity .15s;box-shadow:0 0 0 2px rgba(212,175,55,.25)}
.tb-nav-btn:hover{background:var(--vl)}
.tb-nav-btn.off{opacity:.25;pointer-events:none;background:var(--bg3);color:var(--t3);box-shadow:none;border-color:var(--brd)}
/* Anmeldename kappen (2026-07-20): Der Button zeigt den Teil der E-Mail vor dem @.
   Das kann sehr lang sein (lange Adressen oder ein gelöschtes Konto „deleted-<uuid>")
   und sprengte sonst — weil die rechte Gruppe nicht schrumpft — die volle Breite.
   Ellipsis begrenzt die Breite; der volle Wert steht weiterhin im Dropdown (#auth-dd-em). */
#auth-btn-label{display:inline-block;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
@media (max-width:800px){ #auth-btn-label{max-width:80px} }
/* Claimbar (2026-07-08): permanenter Ein-Satz-Untertitel unter der Topbar. Beantwortet „Was ist das?" in 3 Sekunden.
   Linksbündig + heller Gold-Ton (var(--vl)) für bessere Sichtbarkeit — vorher zentriert + gedämpft. */
#claimbar{flex:0 0 auto;background:var(--bg2);border-bottom:1px solid var(--brd);
  padding:7px 18px;font-size:var(--text-sm);color:var(--vl);font-style:italic;font-family:var(--sans);
  line-height:1.4;text-align:left;letter-spacing:.01em;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;z-index:99;position:relative}
@media (max-width:640px){#claimbar{font-size:var(--text-xs);padding:6px 12px;white-space:normal;line-height:1.35}}
/* Menüumbau 2026-07-04: #main-area übernimmt die alte flex:1-Rolle von #cv-wrap.
   Popup-Umbau 2026-07-07: #cv-wrap ist jetzt ein frei verschieb- und skalierbares
   Fenster INNERHALB #main-area. Position/Größe werden per JS gesetzt (cv-window.js
   liest sie aus localStorage; Default = zentriert 60%). Die Default-Werte hier
   dienen nur als Fallback, falls JS deaktiviert ist. */
#main-area{flex:1 1 0;min-height:0;overflow:hidden;position:relative;background:var(--bg)}
#cv-wrap{position:absolute;left:20%;top:8%;width:60%;height:78%;
  overflow:visible;background:var(--bg);border:1px solid var(--brdv);border-radius:10px;
  box-shadow:0 18px 42px -18px rgba(0,0,0,.8);z-index:40;
  min-width:260px;min-height:180px;
  transition:box-shadow .18s ease}
#cv-wrap.cvw-dragging,#cv-wrap.cvw-resizing{box-shadow:0 22px 50px -18px rgba(0,0,0,.9);border-color:var(--vl);transition:none}

/* Titelleiste = Drag-Handle */
.cvw-title{position:absolute;left:0;right:0;top:0;height:30px;
  background:linear-gradient(180deg,var(--bg2) 0%,rgba(28,22,16,.72) 100%);
  border-bottom:1px solid var(--brd);border-radius:10px 10px 0 0;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 8px 0 12px;font-size:12px;color:var(--t2);font-family:var(--sans);
  cursor:grab;user-select:none;z-index:15}
.cvw-title:active{cursor:grabbing}
.cvw-tt{display:flex;align-items:center;gap:7px;font-weight:500;letter-spacing:.3px}
.cvw-tt-ic{font-size:14px;filter:drop-shadow(0 0 6px rgba(212,175,55,.4))}
.cvw-btns{display:flex;gap:4px}
/* Popup-Info (2026-07-08): Rastergröße, ehemals in Statusbar. Wandert via `#sb-d` in die Titelleiste. */
.cvw-info{flex:1;text-align:center;font-family:var(--mono);font-size:12px;color:var(--t3);
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 12px;pointer-events:none;user-select:none}
@media (max-width:640px){.cvw-info{display:none}}
.cvw-btn{cursor:pointer;padding:2px 8px;border-radius:5px;font-size:13px;line-height:1;
  color:var(--t3);transition:all .12s;border:1px solid transparent}
.cvw-btn:hover{color:var(--vl);background:rgba(212,175,55,.12);border-color:var(--brd)}

/* Innerer Canvas-Bereich (unter der Titelleiste) — hier misst rebuild() clientWidth/Height. */
#cv-body{position:absolute;left:0;right:0;top:30px;bottom:0;overflow:hidden;
  border-radius:0 0 10px 10px;background:var(--bg)}

/* Resize-Griffe (8): Ecken 14×14, Kanten 8px breit/hoch. */
.cvw-rz{position:absolute;z-index:20;background:transparent}
.cvw-rz-n{left:14px;right:14px;top:-4px;height:8px;cursor:ns-resize}
.cvw-rz-s{left:14px;right:14px;bottom:-4px;height:8px;cursor:ns-resize}
.cvw-rz-e{top:14px;bottom:14px;right:-4px;width:8px;cursor:ew-resize}
.cvw-rz-w{top:14px;bottom:14px;left:-4px;width:8px;cursor:ew-resize}
.cvw-rz-ne{top:-4px;right:-4px;width:14px;height:14px;cursor:nesw-resize}
.cvw-rz-nw{top:-4px;left:-4px;width:14px;height:14px;cursor:nwse-resize}
.cvw-rz-se{bottom:-4px;right:-4px;width:14px;height:14px;cursor:nwse-resize}
.cvw-rz-sw{bottom:-4px;left:-4px;width:14px;height:14px;cursor:nesw-resize}
/* Sichtbarer Eck-Marker (dezent) am rechten unteren Corner-Griff, klassisches Resize-Signal */
.cvw-rz-se::after{content:'';position:absolute;right:2px;bottom:2px;width:8px;height:8px;
  border-right:2px solid var(--vl);border-bottom:2px solid var(--vl);opacity:.55;border-radius:0 0 3px 0}

/* Mobile-Fallback: unter 800px Popup als Vollflächen-Panel, kein Drag/Resize sichtbar. */
@media (max-width:800px){
  #cv-wrap{left:0!important;top:0!important;width:100%!important;height:100%!important;border-radius:0;border:none}
  .cvw-title{display:none}
  #cv-body{top:0;border-radius:0}
  .cvw-rz{display:none}
}
.gap-tip:hover{background:var(--vd)}
canvas{display:block;cursor:crosshair}
#statusbar{flex:0 0 28px;background:var(--bg2);border-top:1px solid var(--brd);display:flex;align-items:center;padding:0 12px;gap:14px;font-size:var(--text-sm);color:var(--t2);font-family:var(--mono);z-index:100;position:relative}
/* Vertrauens-Zeile (2026-07-08): permanent sichtbare Klarstellung — verhindert falsche Vorhersage-Erwartungen. */
#sb-trust{font-family:var(--sans);color:var(--t3);font-size:var(--text-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-left:auto;flex-shrink:1}
@media (max-width:900px){#sb-trust{display:none}}
#statusbar a{color:var(--t2);text-decoration:none;transition:color .15s}
#statusbar a:hover{color:var(--v)}
#sb-legal{display:flex;gap:12px;flex-shrink:0}
/* Schmale Fenster (2026-07-20): #sb-legal hat flex-shrink:0, daneben stehen zwei
   Hover-Hinweise. Zusammen waren das ~450px — auf einem 375px-Gerät wurden dadurch
   „Haftung" und „Widerruf" aus dem Bild geschoben und waren nicht mehr erreichbar.
   Rechtslinks müssen aber auf jedem Gerät anklickbar bleiben. */
@media (max-width:900px){
  /* Reiner Hover-Hinweis — auf Touch-Geräten ohnehin gegenstandslos. */
  .top-hint{display:none}
  /* #sb-h zeigt beim Zeigen auf einen Quadranten echte Werte an, bleibt deshalb
     erhalten und wird nur gekürzt statt versteckt. */
  #sb-h{min-width:0;flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
}
@media (max-width:560px){
  /* Notfalls umbrechen statt überlaufen: die Leiste wird zweizeilig. */
  #statusbar{flex:0 0 auto;flex-wrap:wrap;row-gap:2px;padding-top:3px;padding-bottom:3px}
  #sb-legal{flex-wrap:wrap;gap:10px 14px}
}

/* ── SIDEBARS: position:absolute innerhalb #cv-wrap ── */
/* So sind sie AUSSERHALB der Flex-Kette und beeinflussen die Höhe nicht */
#sb-L{
  position:absolute;left:0;top:0;bottom:0;
  width:0;background:var(--bg2);border-right:1px solid var(--brd);
  display:flex;flex-direction:column;overflow:hidden;
  transition:width .2s ease;z-index:50;
}
#sb-L.open{width:var(--SBW)}
#sbL-sc{flex:1 1 0;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(212,175,55,.3) transparent}

#sb-R{
  position:absolute;right:0;top:0;bottom:0;
  width:0;background:var(--bg2);border-left:1px solid var(--brd);
  display:flex;flex-direction:column;overflow:hidden;
  transition:width .2s ease;z-index:50;
}
#sb-R.open{width:var(--SBW)}
#sbR-sc{flex:1 1 0;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(212,175,55,.3) transparent}

/* Extern-Overlay */
#extern-panel{
  display:none;position:absolute;inset:0;
  flex-direction:column;align-items:center;justify-content:center;
  gap:18px;padding:40px;text-align:center;
  background:var(--bg);z-index:10;
}
#extern-panel.show{display:flex}

/* TOPBAR */
/* Logo-Link zur Landingpage (2026-07-19): Wrapper übernimmt die frühere Topbar-Lücke
   zwischen Bild und Schriftzug (#topbar gap:10px), damit die Optik unverändert bleibt. */
.logo-home{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;cursor:pointer;flex:0 0 auto;transition:opacity .15s}
.logo-home:hover{opacity:.82}
.logo-home:focus-visible{outline:2px solid var(--v);outline-offset:3px;border-radius:8px}
.logo{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--vl);letter-spacing:.06em;white-space:nowrap}
.logo span{color:var(--t3);font-weight:400}
.logo .ver{margin-left:8px;font-size:12px;font-weight:700;color:var(--bg);background:var(--v);border-radius:4px;padding:1px 5px;letter-spacing:.05em;vertical-align:middle}
.logo-img{height:32px;width:32px;border-radius:7px;object-fit:cover;flex:0 0 auto;box-shadow:0 0 0 1px var(--brdv),0 2px 8px rgba(0,0,0,.4)}
.logo-light{display:none}
body.light .logo-dark{display:none}
body.light .logo-light{display:inline-block}
.zoomgrp{display:flex;gap:6px;align-items:center}
/* Werkzeug-Minifenster (2026-07-08): frei verschiebbar über dem Canvas. Enthält FAB-Controls und Farb-Legende
   gemeinsam — damit sie nicht dauerhaft Quadranten am Rand verdecken. Position wird in localStorage gespeichert.
   Startposition: oben rechts (kompatibel mit alter zoom-fab-Ecke). */
#uni-toolwin{position:absolute;top:12px;right:12px;z-index:45;
  display:flex;flex-direction:column;
  min-width:380px;max-width:440px;
  background:rgba(28,22,16,.90);border:1px solid var(--brdv);border-radius:9px;
  backdrop-filter:blur(6px);box-shadow:0 6px 24px rgba(0,0,0,.55);
  user-select:none}
body.light #uni-toolwin{background:rgba(247,240,224,.94)}
.utw-hdr{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:6px 10px;background:var(--bg3);border-bottom:1px solid var(--brd);
  border-radius:8px 8px 0 0;cursor:grab;font-family:var(--sans);font-size:12px;color:var(--vl);letter-spacing:.03em}
.utw-hdr:active{cursor:grabbing}
.utw-ttl{font-weight:600}
.utw-drag{color:var(--t3);font-family:var(--mono);font-size:11px;letter-spacing:-1px}
/* Minimier-Button in der Titelleiste. Klick klappt .utw-body ein/aus. */
.utw-hdr-r{display:flex;align-items:center;gap:8px}
.utw-min{display:inline-flex;align-items:center;justify-content:center;width:20px;height:18px;font-size:16px;line-height:1;color:var(--t2);border:1px solid var(--brd);border-radius:4px;cursor:pointer;background:var(--bg3);user-select:none;transition:background .12s,color .12s}
.utw-min:hover{background:rgba(212,175,55,.18);color:var(--vl);border-color:rgba(212,175,55,.50)}
#uni-toolwin.utw-collapsed .utw-body{display:none}
#uni-toolwin.utw-collapsed{min-width:0}
#uni-toolwin.utw-collapsed .utw-hdr{border-bottom:none;border-radius:8px}
.utw-sec{display:flex;flex-wrap:wrap;gap:6px;padding:8px 10px;align-items:center}
.utw-sec + .utw-sec{border-top:1px solid var(--brd)}
.utw-sec .zfab{box-shadow:none;background:var(--bg3)}
/* Knoepfe untereinander (01.09.2026). Nebeneinander brachen sie je nach
   Fensterbreite unterschiedlich um, dadurch stand derselbe Knopf mal in der
   ersten, mal in der zweiten Zeile. Untereinander hat jeder seinen festen
   Platz. stretch statt center, damit alle gleich breit sind; links
   ausgerichtet, damit die Zeichen am Zeilenanfang eine Spalte bilden. */
.utw-btns{flex-direction:column;align-items:stretch;gap:5px;flex-wrap:nowrap}
.utw-btns .zfab{text-align:left}
/* Ansicht neu geordnet (08.09.2026): Blick-Zeile, Zoom-Unterzeile, drei Ebenen als
   Akkordeon. Der Kopf jeder Ebene ist der bisherige Schalter-Knopf (gleiche ID, gleiche
   Klasse .on), nur als Zeile mit Kippschalter gezeichnet; der Inhalt haengt eingerueckt
   darunter und klappt per :has() zu, sobald der Schalter aus ist.
   ⚠ Eigene Kopie im Zweitfenster-Template (index.html, getExternHTML) -- dort nachziehen. */
.utw-blick{flex-wrap:nowrap}
.utw-lab{font:500 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--t3);margin-right:auto}
.utw-zoomsub{display:none;gap:4px;padding:0 10px 8px 62px;align-items:center}
.utw-zoomsub:has(.zfab:not([style*="none"])){display:flex}
.utw-zoomsub .zfab{padding:3px 8px;font-size:11px}
.utw-ebene{border-top:1px solid var(--brd)}
#uni-toolwin .utw-kopf{display:flex;align-items:center;gap:9px;padding:8px 10px;border:0;border-radius:0;background:transparent;box-shadow:none;width:100%;text-align:left}
#uni-toolwin .utw-kopf:hover{background:rgba(212,175,55,.06)}
#uni-toolwin .utw-kopf.zfab-tog.on{background:rgba(212,175,55,.08);border:0}
.utw-sw{width:30px;height:16px;border-radius:9px;border:1px solid var(--brdv);background:var(--bg3);position:relative;flex-shrink:0;transition:background .15s}
.utw-sw::after{content:"";position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;background:var(--t3);transition:left .15s,background .15s}
.utw-kopf.on .utw-sw{background:rgba(212,175,55,.35);border-color:rgba(212,175,55,.6)}
.utw-kopf.on .utw-sw::after{left:16px;background:var(--vl)}
.utw-zahl{margin-left:auto;font-size:11px;color:var(--t3);font-variant-numeric:tabular-nums;white-space:nowrap}
.utw-inhalt{display:flex;flex-wrap:wrap;gap:6px;padding:0 10px 10px 49px;position:relative;align-items:center}
.utw-inhalt::before{content:"";position:absolute;left:24px;top:-2px;bottom:12px;width:1px;background:var(--brd)}
.utw-ebene:has(> .utw-kopf:not(.on)) > .utw-inhalt{display:none}
.utw-hint{font-size:10.5px;color:var(--t3);font-family:var(--sans)}
.tg-pill.tg-leer{opacity:.5}
.tg-leer-btn{border:0;background:transparent;color:var(--t3);font:400 10.5px/1 var(--mono);cursor:pointer;padding:2px 0;text-align:left}
.tg-leer-btn:hover{color:var(--vl)}
@media (prefers-reduced-motion:reduce){.utw-sw,.utw-sw::after{transition:none}}
.utw-legend{gap:10px}
.uleg-item{display:flex;align-items:center;gap:5px;font-size:var(--text-xs);color:var(--t2);white-space:nowrap}
.uleg-sw{display:inline-block;width:14px;height:14px;border-radius:3px;border:1px solid rgba(0,0,0,.15);flex-shrink:0}
/* Häkchen vor jeder Farbe (2026-07-21) — schaltet dieselbe Stufe wie die Tabelle
   im Analysieren-Menü. Kompakt gehalten, damit die Legende einzeilig bleibt. */
.uleg-item{cursor:pointer;user-select:none}
.uleg-item:hover{color:var(--tx)}
.uleg-chk{width:13px;height:13px;margin:0;flex-shrink:0;cursor:pointer;accent-color:var(--v)}
/* Ausgeblendete Stufe sichtbar zurücknehmen. */
.uleg-item:has(.uleg-chk:not(:checked)){opacity:.45}
@media (max-width:640px){
  #uni-toolwin{min-width:200px;max-width:calc(100% - 20px)}
  .utw-sec{padding:6px 8px;gap:5px}
  .utw-legend{gap:7px}
  .uleg-item{font-size:11.5px}
  .uleg-sw{width:12px;height:12px}
}
/* Aktiv-Zustand für Toggle-FABs (Treffer sichtbar): gold-akzentuiert, nicht grün wie Zoom-Modus. */
.zfab.zfab-tog.on{background:rgba(212,175,55,.18);border-color:rgba(212,175,55,.50);color:var(--vl)}
.zfab#btn-square.act{background:rgba(212,175,55,.18);border-color:rgba(212,175,55,.50);color:var(--vl)}
/* Mobile: FABs kompakter, damit sie nicht kollidieren, wenn der Canvas den ganzen Bildschirm füllt. */
@media (max-width:560px){
  #zoom-fab{top:8px;right:8px;gap:5px}
  .zfab{padding:5px 9px;font-size:12.5px}
}
#draw-svg{position:absolute;top:0;left:0;z-index:35;overflow:visible;display:none}
.dm{cursor:pointer;border:1px solid var(--brd);border-radius:6px;padding:5px 9px;font-size:12px;background:var(--bg2);color:var(--t2);user-select:none}
.dm.on{background:var(--amber);color:#1a1206;border-color:var(--amber);font-weight:600}
.btn-g.on{background:var(--amber);color:#1a1206}
.zfab{border-radius:6px;padding:6px 12px;font-size:12px;font-family:var(--mono);cursor:pointer;white-space:nowrap;transition:all .12s;border:1px solid var(--brd);background:rgba(28,22,16,.82);color:var(--t2);backdrop-filter:blur(6px);box-shadow:0 2px 12px rgba(0,0,0,.45);user-select:none}
.zfab:hover{border-color:var(--t2);color:var(--tx)}
.zfab.act{background:rgba(52,211,153,.18);border-color:rgba(52,211,153,.45);color:var(--green)}
body.light .zfab{background:rgba(247,240,224,.85);color:var(--t2)}
.tsep{width:1px;height:20px;background:var(--brd);flex-shrink:0}
#sys-sel{background:var(--bg3);border:1px solid var(--brdv);color:var(--tx);border-radius:5px;padding:4px 8px;font-size:12px;font-family:var(--sans);cursor:pointer;outline:none}
.top-right{margin-left:auto;display:flex;align-items:center;gap:7px}
.tstat{font-family:var(--mono);font-size:12.5px;color:var(--t2);white-space:nowrap}
.tstat strong{color:var(--vl)}
.top-hint{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-family:var(--mono);font-size:12.5px;color:var(--t3);padding:0 12px}
.tbtn{border-radius:5px;padding:4px 11px;font-size:12.5px;font-family:var(--mono);cursor:pointer;white-space:nowrap;transition:all .12s;border:1px solid var(--brdv);background:var(--vd);color:var(--vl)}
.tbtn:hover{background:rgba(212,175,55,.25)}
.tbtn.sec{background:rgba(255,255,255,.04);border-color:var(--brd);color:var(--t2)}
.tbtn.sec:hover{border-color:var(--t2);color:var(--tx)}
.tbtn.act{background:rgba(52,211,153,.15);border-color:rgba(52,211,153,.4);color:var(--green)}

/* PANELS */
.pnl{border-bottom:1px solid var(--brd)}
.pnl-h{display:flex;align-items:center;gap:7px;padding:9px 12px;cursor:pointer;user-select:none;transition:background .12s}
.pnl-h:hover{background:rgba(255,255,255,.025)}
.pnl-ico{font-size:12px;color:var(--vl);width:15px;text-align:center;flex-shrink:0}
.pnl-ttl{font-size:12px;font-weight:500;color:var(--t2);letter-spacing:.07em;text-transform:uppercase;flex:1}
.arr{width:11px;height:11px;color:var(--t3);transition:transform .18s;flex-shrink:0}
.pnl.open .arr{transform:rotate(90deg)}
.pnl-bd{overflow:hidden;max-height:0;transition:max-height .22s ease}
.pnl.open .pnl-bd{max-height:900px}
.pnl-in{padding:6px 12px 12px}
.fl{font-size:12px;color:var(--t3);letter-spacing:.05em;text-transform:uppercase;margin-bottom:3px;display:block;margin-top:7px}
.rw{margin:5px 0 8px}
.rl{display:flex;justify-content:space-between;font-size:12px;color:var(--t3);margin-bottom:2px}
input[type=range]{width:100%;accent-color:var(--v);cursor:pointer}
.tr{display:flex;align-items:center;justify-content:space-between;padding:9px 0;gap:14px;min-height:28px}
.tl{font-size:12px;color:var(--t2)}
.tog{width:28px;height:16px;background:var(--bg3);border:1px solid var(--brd);border-radius:8px;cursor:pointer;position:relative;transition:background .15s;flex-shrink:0}
.tog.on{background:var(--v);border-color:var(--v)}
.tog::after{content:"";position:absolute;width:10px;height:10px;background:#fff;border-radius:50%;top:2px;left:2px;transition:transform .15s}
.tog.on::after{transform:translateX(12px)}
.btn-g{width:100%;background:transparent;border:1px solid var(--brdv);color:var(--t2);border-radius:5px;padding:6px;font-size:12px;cursor:pointer;font-family:var(--sans);margin-top:5px;transition:all .12s}
.btn-g:hover{border-color:var(--vl);color:var(--vl)}
.btn-p{width:100%;background:var(--v);border:none;color:#2c2008;border-radius:5px;padding:7px;font-size:12px;font-weight:600;cursor:pointer;font-family:var(--sans);margin-top:5px;transition:background .12s}
.btn-p:hover{background:var(--vl)}
#zieh-list{max-height:200px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(212,175,55,.3) transparent;margin-top:4px}
.zi{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.04);font-size:12.5px;box-sizing:border-box;overflow:hidden;white-space:nowrap}
.zi:last-child{border-bottom:none}
.zz{font-family:var(--mono);color:var(--green);cursor:pointer;transition:color .12s}
.zz:hover{color:#fff}
.znr{color:var(--t3);font-family:var(--mono);font-size:12px;white-space:nowrap;margin-left:4px}
.zhead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.zck{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--t2);cursor:pointer;user-select:none}
.zck input{accent-color:var(--v);cursor:pointer;margin:0;flex-shrink:0}
.zstat{font-size:12px;color:var(--t3);text-align:right;font-family:var(--mono)}
.zpreset{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:7px}
.zrange{display:flex;align-items:center;gap:4px;margin-bottom:7px;font-size:12px;color:var(--t3)}
.zrange input[type=date]{background:var(--bg3);border:1px solid var(--brd);color:var(--tx);border-radius:4px;padding:2px 4px;font-size:12px;font-family:var(--mono);color-scheme:dark}
body.light .zrange input[type=date]{color-scheme:light}
.zp{background:transparent;border:1px solid var(--brd);color:var(--t2);border-radius:4px;padding:3px 7px;font-size:12px;cursor:pointer;font-family:var(--sans);transition:all .12s}
.zp:hover{border-color:var(--vl);color:var(--vl)}
/* Aktiver Zeitraum-Schalter (2026-07-30): helle Flaeche, dunkle Schrift — vorher sahen
   alle Knoepfe gleich aus und man konnte nicht sehen, welcher Filter greift. */
.zp.act{background:var(--vl);border-color:var(--vl);color:#1a1206;font-weight:600}
.zp.act:hover{background:var(--vl);color:#1a1206}
.seg{display:flex;margin:2px 0 8px;border:1px solid var(--brd);border-radius:6px;overflow:hidden}
.segb{flex:1;background:transparent;border:0;color:var(--t2);font:600 11px var(--sans);padding:6px 4px;cursor:pointer;transition:all .12s}
.segb:hover{color:var(--vl)}
.segb.on{background:var(--amber);color:#241a06}
.zi .zz{flex:1}
.hcs{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.hc{display:flex;align-items:center;gap:4px;padding:3px 8px;border-radius:4px;border:1px solid var(--brd);cursor:pointer;font-size:12.5px;color:var(--t2);transition:all .12s;user-select:none}
.hc.on{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.25)}
.hcd{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.sr{display:flex;justify-content:space-between;padding:9px 2px;border-bottom:1px solid rgba(255,255,255,.04);gap:14px}
.sr:last-child{border-bottom:none}
.sk{font-size:12.5px;color:var(--t2)}.sv{font-family:var(--mono);font-size:12.5px;color:var(--vl)}
/* Verteilungs-Tabelle (Schritt 6b): Stufe · Farbe Haupt · Farbe 2.Schirm · Anzahl(%) · Häkchen */
.dist-tbl{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:6px}
.dist-tbl th{color:var(--t3);font-weight:500;font-size:12px;text-align:left;padding:6px 8px;border-bottom:1px solid var(--brd);text-transform:uppercase;letter-spacing:.04em}
.dist-tbl th.dist-th-c{text-align:center}
.dist-tbl td{padding:7px 8px;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:middle}
.dist-tbl tr:last-child td{border-bottom:none}
.dist-tbl tr:hover td{background:rgba(255,255,255,.02)}
.dist-lbl{color:var(--t2);white-space:nowrap;font-family:var(--mono);font-size:12.5px}
.dist-count{font-family:var(--mono);color:var(--vl);font-size:12.5px;text-align:right;white-space:nowrap}
.dist-count small{color:var(--t3);font-size:12px;margin-left:3px}
.dist-swatch{display:block;width:100%;height:20px;border:1px solid var(--brd);border-radius:4px;padding:0;background:none;cursor:pointer}
.dist-swatch::-webkit-color-swatch-wrapper{padding:0}
.dist-swatch::-webkit-color-swatch{border:none;border-radius:3px}
.dist-swatch::-moz-color-swatch{border:none;border-radius:3px}
.dist-swatch.disabled{opacity:.35;pointer-events:none}
.dist-check{display:flex;justify-content:center;align-items:center}
.dist-check input{width:15px;height:15px;cursor:pointer;accent-color:var(--v)}
.dist-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:10px}
.dist-actions .zck{margin:0;padding-right:6px}
.clr-row{display:flex;gap:5px;margin-top:6px;flex-wrap:wrap}
.clr{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:12px;color:var(--t3);font-family:var(--mono)}
.clr input[type=color]{width:26px;height:22px;border:1px solid var(--brd);border-radius:4px;background:none;cursor:pointer;padding:0}
.ld{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.ldi{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--t2)}
.ldc{width:9px;height:9px;border-radius:50%;flex-shrink:0;border:1px solid rgba(255,255,255,.15)}
.hit-box{background:var(--bg3);border:1px solid var(--brd);border-radius:5px;padding:8px 10px;margin:6px 0;max-height:200px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(212,175,55,.3) transparent}
.hi{padding:5px 0;border-bottom:1px solid rgba(255,255,255,.05)}.hi:last-child{border-bottom:none}
.hi-nr{font-size:12px;color:var(--t3);font-family:var(--mono);margin-bottom:2px}
.hi-z{font-family:var(--mono);font-size:12px;color:var(--green)}
.tip-box{background:var(--bg3);border:1px solid var(--brd);border-radius:5px;padding:9px 11px;margin:8px 0}
.tip-lbl{font-size:12px;color:var(--t3);margin-bottom:2px}
.tip-sp{font-family:var(--mono);font-size:14px;color:var(--vl);font-weight:500}
.tip-z{font-family:var(--mono);font-size:13px;color:var(--green);margin-top:4px}
.note{font-size:12.5px;color:var(--t3);line-height:1.6}
/* Merken-Tipp-Zeilen (2026-07-08): nutzen den vollen Sidebar-Platz aus — keine unnötigen Zeilenumbrüche.
   min-width:0 auf dem flex-Kind macht ellipsis überhaupt erst möglich (sonst pusht der Content den flex-Container auf). */
.pi{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.04);gap:6px}
.pi:last-child{border-bottom:none}
/* Content-Div braucht flex-basis:auto damit Text die vollen Zeilen nutzt (Inline-Style flex:1 überschreiben). */
.pi > div[style*="flex:1"]{min-width:0;flex:1 1 auto !important;margin:0 6px !important;overflow:hidden}
/* Tipp-Zahlen und Meta-Zeile IMMER einzeilig — kein Zeilenumbruch, keine Überlappung.
   Falls doch mal zu lang: horizontaler Scroll statt Wrap. */
.piz{font-family:var(--mono);font-size:13px;color:var(--green);letter-spacing:.02em;white-space:nowrap;line-height:1.35;overflow:hidden;text-overflow:ellipsis}
.pii{font-size:12px;color:var(--t3);font-family:var(--mono);white-space:nowrap;line-height:1.35;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em}
.pid{cursor:pointer;color:var(--t3);padding:2px 6px}.pid:hover{color:var(--red)}
.pe{font-size:12.5px;color:var(--t3);text-align:center;padding:14px 0}
#tt{position:fixed;background:var(--bg2);border:1px solid var(--brdv);border-radius:8px;padding:10px 14px;font-size:12px;pointer-events:none;display:none;z-index:9999;min-width:250px;box-shadow:0 8px 40px rgba(0,0,0,.6);
  /* Seit im Kasten je Treffer Datum, Zahlen UND Speicherplatz stehen
     (02.09.2026), braucht er Platz. Ohne max-width waere er bei einem
     Quadranten mit vielen Treffern beliebig breit; mit 250 px brachen die
     drei Spalten um und der Kasten war schlechter lesbar als die Liste, die
     er ersetzen soll. */
  max-width:min(500px,92vw)}   /* 420 -> 500 (05.09.2026): Platz fuer ZS-Tag je Tippzeile */
.tth{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--vl);margin-bottom:5px;padding-bottom:5px;border-bottom:1px solid var(--brd)}
.ttr{display:flex;justify-content:space-between;gap:14px;padding:2px 0;font-size:12.5px}
.ttk{color:var(--t3)}.ttv{font-family:var(--mono);color:var(--tx)}
.ttsp{margin-top:5px;padding-top:5px;border-top:1px solid var(--brd);font-family:var(--mono);font-size:12px;color:var(--t2);line-height:1.7}
.ttsp b{color:var(--amber);font-weight:600;margin-right:4px}
.tthits{display:flex;align-items:center;gap:7px;margin-top:5px;padding-top:5px;border-top:1px solid var(--brd);font-size:13px;font-weight:600}
/* Trichter kleines↔großes Universum (2026-07-20). Bewusst UNTER #tips-modal (10000),
   damit das Popup die hintere Fläche verdeckt und der Trichter räumlich wirkt. */
#qfunnel{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:9990;display:none;overflow:visible}
#qfunnel.on{display:block}
#tips-modal{position:fixed;inset:0;background:transparent;display:none;z-index:10000;pointer-events:none}
#tips-modal.show{display:block}
#tips-box{background:var(--bg2);border:1px solid var(--brdv);border-radius:10px;width:min(560px,92vw);max-height:82vh;display:flex;flex-direction:column;box-shadow:0 12px 60px rgba(0,0,0,.7);position:fixed;pointer-events:all}
#tips-hdr{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--brd);font-family:var(--mono);font-size:13px;color:var(--vl);cursor:move;user-select:none}
#tips-title{white-space:nowrap}
#tips-close{cursor:pointer;color:var(--t2);font-size:16px;line-height:1}#tips-close:hover{color:var(--red)}
#tips-hdr{min-width:0}
#tips-title{overflow:hidden;text-overflow:ellipsis}
/* Tag-Modus: Kontrast für tips-modal-Header + Tabelle/Grafik-Toggle (analog Zweitfenster #tips-mode2 im inline-<style>) */
body.light #tips-box{background:#fff;border-color:rgba(212,175,55,.32);color:#1d1335;box-shadow:0 12px 60px rgba(40,20,90,.18)}
body.light #tips-hdr{color:#a67c1a;border-color:rgba(90,60,20,.12)}
/* !important nötig: #tips-mode hat inline-Styles (color:var(--t2);border:1px solid var(--brd)), die sonst gewinnen */
body.light #tips-mode{color:#1d1335!important;border-color:rgba(90,60,20,.35)!important;background:rgba(255,255,255,.6)}
body.light #tips-mode:hover{background:rgba(212,175,55,.18);border-color:rgba(90,60,20,.55)!important}
#tips-nav{display:flex;align-items:center;gap:4px;padding:6px 16px;border-bottom:1px solid var(--brd);flex-shrink:0}
.tnav{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid var(--brd);border-radius:5px;color:var(--t2);font-size:12px;cursor:pointer;user-select:none;transition:all .12s}
.tnav:hover{border-color:var(--brdv);color:var(--vl);background:var(--vd)}
.gsort{font-size:12px;padding:4px 9px;border-radius:6px;border:1px solid var(--brd);background:transparent;color:var(--t2);cursor:pointer;transition:all .12s}
.gsort:hover{border-color:var(--brdv);color:var(--vl)}
.gsort.on{background:var(--vd);border-color:var(--brdv);color:var(--vl);font-weight:600}
#tips-body{overflow:auto;padding:8px 16px;scrollbar-width:thin;scrollbar-color:rgba(212,175,55,.3) transparent}
.tipt{width:100%;border-collapse:collapse;font-size:12.5px;font-family:var(--mono)}
.tipt th{text-align:left;color:var(--t3);font-weight:500;padding:5px 6px;border-bottom:1px solid var(--brd);position:sticky;top:0;background:var(--bg2)}
.tipt td{padding:3px 6px;border-bottom:1px solid rgba(255,255,255,.04)}
.tipt td.spn{color:var(--t3);white-space:nowrap}.tipt td.tpz{color:var(--tx);white-space:nowrap}
.tipt tr.hitrow td{color:var(--amber);font-weight:600}
#tips-tt{position:fixed;display:none;z-index:10001;background:var(--bg2);border:1px solid var(--brdv);border-radius:7px;padding:7px 11px;font-family:var(--mono);font-size:12.5px;pointer-events:none;box-shadow:0 8px 30px rgba(0,0,0,.7);min-width:150px}
.ext-title{font-size:15px;color:var(--vl);font-weight:600;font-family:var(--mono)}
.ext-sub{font-size:12px;color:var(--t3);line-height:1.9}
/* ── MENÜZEILE + AUSKLAPP-BEREICHE (V12) ── */
#topbar{gap:3px;padding:0 8px}   /* overflow:hidden entfernt 2026-07-20 — Überlauf regelt jetzt #topbar-scroll */
#topbar-scroll{gap:3px}
.logo-home{gap:3px}   /* Logo-Link folgt der engeren Topbar-Lücke */
.logo{color:var(--vl)}
.mi{display:flex;align-items:center;gap:5px;padding:5px 9px;border-radius:6px;cursor:pointer;white-space:nowrap;font-size:12px;font-weight:500;color:var(--t2);border:1px solid transparent;transition:all .12s;user-select:none}
/* HTML [hidden] wird sonst von .mi{display:flex} platt gemacht — deshalb hier
   ausdruecklich zurueckgeben. Wichtig fuer #btn-ads-toggle (Admin-only) und
   jeden anderen Menuepunkt, der per hidden versteckt wird. */
.mi[hidden]{display:none}
.mi:hover{background:var(--vd);color:var(--tx)}
.mi.open{background:var(--vd);border-color:var(--brdv);color:var(--vl)}
/* Filter-Marker: roter Punkt am Menüpunkt/Akkordeon-Titel, wenn hier ein Filter gesetzt ist.
   Position leicht überstehend (top:-4 right:-4), 10 px + 2 px Ring in bg-Farbe → auch auf .mi.open klar sichtbar. */
.mi.has-flt{position:relative;overflow:visible}
.mi.has-flt::after{content:"";position:absolute;top:-4px;right:-4px;width:10px;height:10px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 2px var(--bg2),0 0 6px rgba(239,68,68,.6);z-index:5}
.mi-ic{font-size:12px;color:var(--vl)}
.mspacer{flex:1}
#dropzone{position:absolute;left:0;right:0;top:0;z-index:50;pointer-events:none;display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px}
.drop{display:none;position:relative;width:min(520px,94vw);max-width:min(680px,94vw);background:var(--bg2);border:1px solid var(--brdv);border-radius:0 0 12px 12px;box-shadow:0 22px 50px -22px rgba(0,0,0,.85);padding:18px 22px 20px;max-height:80vh;overflow-y:auto;overflow-x:hidden;pointer-events:auto;scrollbar-width:thin;scrollbar-color:rgba(212,175,55,.3) transparent}
/* „Meine Lottowelt" braucht mehr Breite als die uebrigen Menues: eine
   Tipp-Zeile (Name, Zahlen, Speicherplatz, Ergebnis, Tipp-Check) misst
   477 px, das Standard-Panel gibt nur 457 her. Die Obergrenze 680 war
   in .drop ohnehin schon erlaubt. Gemessen 30.08.2026. */
.drop.drop-breit{width:min(900px,96vw);max-width:min(900px,96vw)}   /* max-width MIT, sonst deckelt .drop auf 680 -- so war die 780-Regel vom 03.09. nie wirksam. 780 -> 900 (05.09.2026): zwölf Chips eines System 12 in EINER Reihe der Paar-Tabelle */   /* 680 -> 780 (03.09.2026): Die Tippzeile
   traegt bei einem Systemschein fuenf Bedienelemente -- Gruppe, Farbe, Kopie,
   Kombinationen, Tipp-Check. Gemessen brauchte sie 447 px, die Liste bot 410. */
.drop.show{display:block;animation:dropIn .16s ease-out}
.drop.pinned{border-color:var(--vl);box-shadow:0 0 0 1px var(--vl),0 22px 50px -22px rgba(0,0,0,.85)}
/* Merken-Panel breiter (2026-07-08): Trefferbilanz mit vollständigen Datums-Listen braucht mehr horizontalen Platz. */
#d-favoriten{width:min(620px,94vw);max-width:min(720px,94vw)}
/* Deep-Link-Swatch (Etappe 3, 2026-07-08): ersetzt native color-Inputs in Fach-Menüs. Zeigt aktuelle Farbe an,
   Klick öffnet Zentralmenü an der Zielposition. Kleines 🎨-Overlay signalisiert „nicht direkt editieren, weitergehen". */
.pal-link{width:30px;height:22px;border:1px solid var(--brd);border-radius:4px;cursor:pointer;padding:0;position:relative;transition:transform .1s ease-out;background:#888;flex-shrink:0}
.pal-link:hover{transform:scale(1.08);border-color:var(--vl)}
.pal-link::after{content:"🎨";position:absolute;top:-6px;right:-7px;font-size:10px;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.7));pointer-events:none;line-height:1}
/* Highlight-Puls (Etappe 3): 2 s Aufmerksamkeit auf Ziel-Input nach Deep-Link-Sprung. */
.pal-hl{outline:2px solid #d4af37;outline-offset:3px;border-radius:5px;animation:palHlPulse 1s ease-in-out infinite}
@keyframes palHlPulse{0%,100%{box-shadow:0 0 0 0 rgba(212,175,55,.75)}50%{box-shadow:0 0 0 9px rgba(212,175,55,0)}}
/* Zahlen-Häufigkeit (2026-07-08): Balkendiagramm im Auswertungs-Menü. Balken-Farbe folgt der Trefferskala aus der Palette. */
.freq-block{margin-bottom:14px}
.freq-head{color:var(--vl);font-weight:600;font-size:12.5px;margin-bottom:4px;padding-bottom:3px;border-bottom:1px solid var(--brd)}
.freq-sum{font-size:11px;color:var(--t3);margin-bottom:6px;padding:4px 6px;background:rgba(0,0,0,.15);border-radius:4px;font-family:var(--mono)}
.freq-row{display:grid;grid-template-columns:26px 1fr 44px 42px;gap:6px;align-items:center;padding:2px 0;font-family:var(--mono);font-size:11.5px}
.freq-lbl{color:var(--amber);font-weight:600;text-align:right}
.freq-bar-wrap{background:rgba(255,255,255,.05);border-radius:3px;height:16px;overflow:hidden;position:relative}
.freq-bar{display:inline-block;height:100%;padding:0 5px;font-size:10px;line-height:16px;color:#1a1206;font-weight:bold;text-align:right;box-sizing:border-box;min-width:22px;white-space:nowrap}
.freq-pct{color:var(--t2);text-align:right;font-size:11px}
.freq-dev{text-align:right;font-size:10.5px;font-weight:600}
.freq-dev0{color:var(--t3)}
.freq-devp{color:#82c46b}
.freq-devn{color:#e88}
@keyframes dropIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.drop-x{position:absolute;right:12px;top:10px;cursor:pointer;color:var(--t3);font-size:15px;line-height:1;padding:3px 8px;border-radius:6px;z-index:2}
.drop-x:hover{color:var(--vl);background:var(--vd)}
.drop-pin{position:absolute;right:40px;top:8px;cursor:pointer;font-size:15px;line-height:1;padding:3px 7px;border-radius:6px;z-index:2;opacity:.85;filter:grayscale(.35)}
.drop-pin:hover{background:var(--vd);opacity:1;filter:none}
.drop-pin.on{opacity:1;filter:none;background:var(--vd);box-shadow:inset 0 0 0 1px var(--vl)}
.drop-wrap{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start;padding-right:56px}
.drop-wrap .pnl{border-bottom:none;width:300px;flex:0 0 auto}
#d-fakten .drop-wrap .pnl{width:330px}
.drop .pnl-h{cursor:default;padding-left:0;padding-top:0}
.drop .arr{display:none}
.drop .pnl-bd{max-height:none!important;overflow:visible}

/* ═══ Sprach-Umschalter (i18n Pilot) ═══ */
.langsw{display:flex;gap:2px;align-items:center;margin:0 6px}
/* Sprachwahl-Dropdown im Burger — kompakt, im Look der übrigen Selects. */
.lang-sel{background:var(--bg3);border:1px solid var(--brd);color:#e8cd7a;border-radius:5px;padding:4px 8px;font-size:12px;font-weight:600;letter-spacing:.03em;cursor:pointer;font-family:inherit;outline:none;transition:border-color .15s}
.lang-sel:hover{border-color:var(--vl)}
.lang-sel:focus{border-color:var(--vl);box-shadow:0 0 0 2px rgba(232,205,122,.18)}
body.light .lang-sel{color:#8a5a12}
.lang-opt{cursor:pointer;padding:2px 7px;border-radius:5px;font-size:12px;font-weight:600;letter-spacing:.03em;color:rgba(232,205,122,.5);border:1px solid transparent;transition:color .15s,background .15s,border-color .15s}
.lang-opt:hover{color:#e8cd7a;background:rgba(212,175,55,.12)}
.lang-opt.on{color:#140f0a;background:#e8cd7a;border-color:#e8cd7a}
body.light .lang-opt{color:rgba(90,60,20,.5)}
body.light .lang-opt:hover{color:#8a5a12;background:rgba(138,90,18,.1)}
body.light .lang-opt.on{color:#fff;background:#8a5a12;border-color:#8a5a12}

/* ═══ Menüumbau 2026-07-04: Kopfzeile (System-Select, Treffer-Label) + Burger-Menü + echtes Akkordeon ═══ */
.hdr-select{background:var(--bg3);border:1px solid var(--brd);color:var(--tx);border-radius:6px;
  padding:5px 8px;font-size:12px;font-family:var(--sans);max-width:190px;cursor:pointer}
.hdr-lbl{font-size:12.5px;color:var(--t2);white-space:nowrap}

.burger-wrap{position:relative}
.burger-btn{font-size:15px;padding:5px 10px}
/* position:fixed (NICHT absolute) — #topbar hat overflow:hidden (gegen Zeilenumbruch bei vielen
   .mi-Buttons), das würde ein absolut positioniertes Dropdown abschneiden. Position wird per JS
   in toggleBurger() gesetzt (top/left), da fixed nicht mehr relativ zu .burger-wrap ist. */
.burger-dd{display:none;position:fixed;background:var(--bg2);
  border:1px solid var(--brdv);border-radius:10px;box-shadow:0 22px 50px -22px rgba(0,0,0,.85);
  padding:8px;min-width:180px;z-index:110;flex-direction:column;gap:4px}
.burger-dd.show{display:flex}
.burger-zoomgrp{flex-direction:column;align-items:stretch;gap:4px}
.burger-sep{height:1px;background:var(--brd);margin:4px 2px}
.burger-dd .langsw{margin:2px 6px}
/* Mobile-Only Burger-Einträge: die 6 Hauptbereiche + 3D + Sprache liegen im DOM,
   aber auf Desktop unsichtbar (Topbar zeigt sie direkt). Auf Handy sichtbar. */
.burger-mobile-only{display:none;flex-direction:column;gap:4px}
.burger-sec-lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--t3);padding:2px 8px 4px;font-weight:600}
@media (max-width:800px){
  /* Handy (2026-07-20 überarbeitet): Die 6 Funktions-Buttons bleiben SICHTBAR im
     Scroll-Streifen (mit den #tb-nav-Pfeilen erreichbar), statt komplett im Burger zu
     verschwinden — sonst sieht man auf dem Handy keine Bedienmöglichkeit. Platz dafür
     kommt vom icon-only-Logo (Schriftzug aus). 3D + Sprache bleiben im Burger; ihre
     Menü-Duplikate (#bmo-menudup) dort ausgeblendet, weil jetzt im Streifen. */
  .logo{display:none}                  /* nur noch das Logo-Symbol — spart ~120px */
  #bmo-menudup{display:none}           /* 6 Bereiche nicht doppelt (stehen im Streifen) */
  #topbar > .mtx3d-btn{display:none}   /* 3D → Burger */
  /* Am Handy: nur den sichtbaren Weltkugel-Button verstecken (Sprache liegt im Burger).
     Den .lang-wrap selbst NICHT verstecken — sonst wird das darin liegende #lang-dd
     als Nachfahre unsichtbar (display:none vererbt sich auf den ganzen Teilbaum),
     und der Burger-Eintrag „Sprache" öffnet ein DD, das gar nicht rendert. */
  #topbar > .lang-wrap > .lang-btn{display:none}
  #topbar > .lang-wrap{width:0;height:0;overflow:visible}   /* wrap selbst nimmt keinen Platz */
  .burger-wrap{margin-left:auto}
  .burger-mobile-only{display:flex}
  /* Sys-Dropdown darf schrumpfen, damit es die anderen Buttons nicht wegdrückt. */
  #sys-sel{max-width:40vw;min-width:0}
}
/* Weltkugel-Dropdown (2026-07-08): analog zum Burger, direkt sichtbarer Sprachumschalter in der Topbar. */
.lang-wrap{position:relative}
.lang-btn{font-size:15px;padding:5px 8px;line-height:1}
/* Landesfahnen statt Weltkugel (2026-09-02). Die Weltkugel sagte „hier gibt es
   Sprachen", aber nicht WELCHE gerade eingestellt ist — der Knopf zeigt jetzt die
   Fahne der aktiven Sprache, das Menü die drei zur Wahl.

   Warum gezeichnet und nicht 🇩🇪 als Emoji: Windows hat keine Fahnen-Schrift.
   Gemessen am 02.09.2026 in diesem Browser — 🇩🇪 ist 19,3 px breit, ein echtes
   Emoji 27,5 px, zwei Buchstaben 26,5 px: Chrome zeigt den Buchstaben-Ersatz
   „DE", keine Fahne. Als SVG sieht sie überall gleich aus.

   Kein clipPath in den SVGs: Das äußere <svg> beschneidet ohnehin am viewBox-Rand,
   und clipPath-IDs wären auf einer Seite mit mehreren Fahnen doppelt vergeben. */
.flag-ic{display:block;vertical-align:middle;border-radius:2px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.35);flex:0 0 auto}
/* Die Fahne im Menü braucht eine Grundlinien-freie Zeile, sonst tanzt der Text. */
.lang-dd .lang-opt{display:flex;align-items:center;gap:9px}
.lang-dd{display:none;position:fixed;background:var(--bg2);
  border:1px solid var(--brdv);border-radius:10px;box-shadow:0 22px 50px -22px rgba(0,0,0,.85);
  padding:8px;min-width:170px;z-index:110;flex-direction:column;gap:4px}
.lang-dd.show{display:flex}
.lang-dd .lang-opt{cursor:pointer;padding:6px 10px;border-radius:6px;font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--t2);border:1px solid transparent;transition:color .12s,background .12s,border-color .12s;text-transform:none}
.lang-dd .lang-opt:hover{color:var(--vl);background:rgba(212,175,55,.12);border-color:var(--brdv)}
.lang-dd .lang-opt.on{color:var(--bg);background:var(--vl);border-color:var(--vl);font-weight:600}
/* 3D-Logo (2026-07-09): Links neben der Weltkugel — Kopfzeilen-hoher, in Gold-Extrusion
   gehaltener Button. Klick öffnet die 3D-Matrix als Modal-Iframe. Farben passen zum
   Mahagoni/Gold-Theme; die Text-Schatten stapeln 5 versetzte Kopien für den Extrusions-Effekt. */
.mtx3d-btn{padding:2px 14px;cursor:pointer;display:flex;align-items:center;height:36px;perspective:520px;border-radius:8px;border:1px solid transparent;transition:background .15s,border-color .15s}
.mtx3d-btn:hover{background:rgba(212,175,55,0.08);border-color:rgba(212,175,55,0.35)}
.mtx3d-txt{font-family:Georgia,'Times New Roman',serif;font-weight:900;font-size:24px;letter-spacing:.02em;color:#ffd76a;line-height:1;white-space:nowrap;text-shadow:1px 1px 0 #d4af37,2px 2px 0 #a67c1a,3px 3px 0 #7a5a15,4px 4px 0 #5a4210,5px 5px 0 #3a2c08,6px 6px 10px rgba(0,0,0,0.65);transform:rotateX(6deg) rotateY(-14deg) rotateZ(-1deg);transform-origin:center;transition:transform .3s cubic-bezier(0.34,1.56,0.64,1),text-shadow .3s;display:inline-block;padding-right:6px}
.mtx3d-btn:hover .mtx3d-txt{transform:rotateX(-2deg) rotateY(2deg) rotateZ(0deg) scale(1.06);text-shadow:1px 1px 0 #d4af37,2px 2px 0 #a67c1a,3px 3px 0 #7a5a15,4px 4px 0 #5a4210,5px 5px 0 #3a2c08,6px 6px 16px rgba(212,175,55,0.55)}
/* 3D-Matrix-Popup: schwebendes Fenster (kein Backdrop) — Haupt-App bleibt
   bedienbar. Container ist click-through (pointer-events:none), nur die
   Innenfläche fängt Klicks ab. Position und Größe werden per JS gesetzt
   und in localStorage['lu_3d_wnd'] persistiert. */
.m3d-modal{position:fixed;inset:0;pointer-events:none;z-index:1000;display:none}
.m3d-modal.open{display:block}
/* min-width/-height per min() begrenzt (2026-07-20): feste 420×300 waren auf einem
   375px-Handy breiter als der Bildschirm — das Fenster ragte hinaus. */
.m3d-inner{position:absolute;pointer-events:auto;background:#0a0503;border:1px solid rgba(212,175,55,0.4);border-radius:10px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,0.75);min-width:min(420px,calc(100vw - 8px));min-height:min(300px,calc(100vh - 8px))}
/* Während Drag/Resize: Iframe click-through machen, damit Maus-Events
   zuverlässig im Parent-Fenster ankommen. Ohne diesen Trick „verliert"
   sich das Ziehen, sobald der Cursor über den Iframe-Bereich wandert. */
.m3d-inner.m3d-drag-active #matrix3d-frame{pointer-events:none}
.m3d-hdr{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 18px;background:rgba(15,8,3,0.92);border-bottom:1px solid rgba(212,175,55,0.3);color:#d4af37;font-family:Georgia,serif;font-size:14px;flex:0 0 auto;cursor:move;user-select:none}
.m3d-hdr.dragging{cursor:grabbing}
.m3d-btns{display:flex;align-items:center;gap:4px}
.m3d-btn{cursor:pointer;color:#b08a3e;font-size:15px;padding:3px 9px;border-radius:4px;user-select:none;line-height:1;transition:color .15s,background .15s}
.m3d-btn:hover{color:#ffd76a;background:rgba(212,175,55,0.15)}
.m3d-close{color:#e88}
.m3d-close:hover{color:#f66;background:rgba(255,80,80,0.15)}
#matrix3d-frame{flex:1;border:none;width:100%;background:#0a0503;display:block}
/* Resize-Griffe: 4 Kanten (n/s/e/w) plus SE-Ecke als sichtbarer Gold-Grip. */
.m3d-rz{position:absolute;background:transparent;z-index:3}
.m3d-rz-e{right:0;top:24px;bottom:24px;width:6px;cursor:ew-resize}
.m3d-rz-w{left:0;top:24px;bottom:24px;width:6px;cursor:ew-resize}
.m3d-rz-s{left:24px;right:24px;bottom:0;height:6px;cursor:ns-resize}
.m3d-rz-n{left:24px;right:24px;top:0;height:6px;cursor:ns-resize}
.m3d-rz-sw{left:0;bottom:0;width:16px;height:16px;cursor:nesw-resize}
.m3d-rz-ne{right:0;top:0;width:16px;height:16px;cursor:nesw-resize}
.m3d-rz-nw{left:0;top:0;width:16px;height:16px;cursor:nwse-resize}
.m3d-rz-se{right:0;bottom:0;width:20px;height:20px;cursor:nwse-resize;background:linear-gradient(135deg,transparent 45%,rgba(212,175,55,0.6) 45% 55%,transparent 55% 65%,rgba(212,175,55,0.6) 65% 75%,transparent 75%)}
/* Seltene Bereiche (Feature #3): Cluster-Liste mit Hover-Highlight. */
.rare-row:hover{background:var(--vd)}
/* Legal-Modal (2026-07-08): Impressum/Datenschutz/… als Popup mit fetch aus legal/*.html. */
#legal-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:9600;
  align-items:center;justify-content:center;padding:20px;animation:onbFadeIn .18s ease-out}
#legal-modal.open{display:flex}
#legal-card{position:relative;background:var(--bg2);border:1px solid var(--brdv);border-radius:14px;
  box-shadow:0 22px 60px -22px rgba(0,0,0,.95), 0 0 0 1px rgba(212,175,55,.06);
  width:min(760px,96vw);max-height:88vh;display:flex;flex-direction:column;overflow:hidden;
  animation:onbPop .22s cubic-bezier(.16,1,.3,1)}
#legal-hdr{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 20px;border-bottom:1px solid var(--brd);background:var(--bg3);flex-shrink:0}
#legal-ttl{font-size:16px;font-weight:600;color:var(--vl);letter-spacing:.02em}
#legal-close-x{cursor:pointer;color:var(--t3);font-size:16px;line-height:1;padding:6px 10px;border-radius:6px;transition:color .12s,background .12s}
#legal-close-x:hover{color:var(--vl);background:rgba(212,175,55,.10)}
#legal-body{overflow-y:auto;padding:22px 26px;color:var(--tx);line-height:1.65;font-size:14px;
  scrollbar-width:thin;scrollbar-color:rgba(212,175,55,.3) transparent}
#legal-body h1{font-size:22px;color:var(--vl);font-weight:600;margin-bottom:8px;letter-spacing:-.01em}
#legal-body h2{font-size:16px;color:var(--v);margin:24px 0 8px;font-weight:600}
#legal-body h3{font-size:14px;color:var(--vl);margin:16px 0 6px;font-weight:600}
#legal-body p,#legal-body ul{margin-bottom:12px}
#legal-body ul{padding-left:22px}
#legal-body li{margin-bottom:4px}
#legal-body a{color:var(--vl);text-decoration:none}
#legal-body a:hover{text-decoration:underline}
#legal-body .lead{color:var(--t2);margin-bottom:22px;font-size:13.5px}
#legal-body .box{background:var(--bg3);border:1px solid var(--brd);border-radius:10px;padding:16px 20px;margin:16px 0}
#legal-body .note{border-left:3px solid var(--v);padding:10px 0 10px 16px;margin:16px 0;color:var(--t2);font-size:13px;background:rgba(212,175,55,.05);border-radius:0 8px 8px 0}
#legal-body .note strong{color:var(--vl)}
#legal-body .muted{color:var(--t3);font-size:13px}
#legal-body .ph{background:rgba(212,175,55,.12);border:1px dashed rgba(212,175,55,.5);border-radius:5px;
  padding:1px 7px;color:var(--vl);font-family:var(--mono);font-size:12.5px}
#legal-foot{display:flex;gap:10px;justify-content:flex-end;padding:12px 20px;border-top:1px solid var(--brd);background:var(--bg3);flex-shrink:0}
.legal-loading{text-align:center;padding:30px;color:var(--t2);font-style:italic}
/* FAQ-Akkordeon im Popup (2026-07-31). faq.html wird über denselben Weg wie die
   Rechtstexte geladen — nur der <main>-Inhalt landet hier, das eigene <style> der
   Seite bleibt draußen. Deshalb existiert dieselbe Optik zweimal: dort in den
   Seitenfarben (legal.css), hier in den App-Farben. Bei Änderungen beide anfassen. */
#legal-body .faq-tools{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin:0 0 16px}
#legal-body .faq-suche{flex:1;min-width:180px;background:var(--bg3);color:var(--tx);
  border:1px solid var(--brd);border-radius:8px;padding:8px 12px;font:inherit;font-size:13.5px}
#legal-body .faq-suche:focus{outline:none;border-color:var(--v)}
#legal-body .faq-nav{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 22px}
#legal-body .faq-nav a{font-size:12px;color:var(--t2);border:1px solid var(--brd);border-radius:999px;
  padding:4px 11px;background:var(--bg3);text-decoration:none}
#legal-body .faq-nav a:hover{color:var(--vl);border-color:var(--brdv);text-decoration:none}
#legal-body details.q{border:1px solid var(--brd);border-radius:9px;background:var(--bg3);
  margin:0 0 8px;overflow:hidden}
#legal-body details.q>summary{cursor:pointer;list-style:none;padding:11px 40px 11px 15px;position:relative;
  font-weight:600;color:var(--tx);font-size:14px;line-height:1.45}
#legal-body details.q>summary::-webkit-details-marker{display:none}
#legal-body details.q>summary::after{content:'+';position:absolute;right:14px;top:50%;transform:translateY(-50%);
  color:var(--v);font-size:18px;font-weight:400;line-height:1}
#legal-body details.q[open]>summary::after{content:'–'}
#legal-body details.q>summary:hover{color:var(--vl)}
#legal-body details.q[open]>summary{color:var(--vl);border-bottom:1px solid var(--brd)}
#legal-body details.q .a{padding:12px 15px 2px}
#legal-body details.q .a p:last-child{margin-bottom:12px}
#legal-body .faq-leer{color:var(--t2);font-style:italic;padding:14px 2px}
@media(max-width:560px){
  #legal-card{width:100%;max-height:94vh;border-radius:10px}
  #legal-body{padding:16px 18px;font-size:13.5px}
  #legal-body h1{font-size:19px}
  #legal-body details.q>summary{font-size:13.5px;padding:10px 36px 10px 12px}
}

/* Kontakt-Modal (2026-07-15): erbt Look vom Legal-Modal, eigene Struktur wegen Formular. */
#contact-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:9650;
  align-items:center;justify-content:center;padding:20px;animation:onbFadeIn .18s ease-out}
#contact-modal.open{display:flex}
#contact-card{position:relative;background:var(--bg2);border:1px solid var(--brdv);border-radius:14px;
  box-shadow:0 22px 60px -22px rgba(0,0,0,.95),0 0 0 1px rgba(212,175,55,.06);
  width:min(560px,96vw);max-height:92vh;display:flex;flex-direction:column;overflow:hidden;
  animation:onbPop .22s cubic-bezier(.16,1,.3,1)}
#contact-hdr{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 20px;border-bottom:1px solid var(--brd);background:var(--bg3);flex-shrink:0}
#contact-ttl{font-size:16px;font-weight:600;color:var(--vl);letter-spacing:.02em}
#contact-close-x{cursor:pointer;color:var(--t3);font-size:16px;line-height:1;padding:6px 10px;border-radius:6px;transition:color .12s,background .12s}
#contact-close-x:hover{color:var(--vl);background:rgba(212,175,55,.10)}
#contact-form-el{display:flex;flex-direction:column;flex:1;min-height:0}
#contact-body{overflow-y:auto;padding:18px 22px;color:var(--tx);font-size:14px;
  scrollbar-width:thin;scrollbar-color:rgba(212,175,55,.3) transparent}
.contact-lead{color:var(--t2);font-size:13.5px;margin:0 0 14px 0;line-height:1.5}
.contact-lbl{display:block;font-size:12.5px;color:var(--t2);margin:10px 0 4px 0;letter-spacing:.02em;text-transform:uppercase}
.contact-req{color:var(--vl);font-weight:600}
#contact-body input[type="text"],#contact-body input[type="email"],#contact-body select,#contact-body textarea{
  width:100%;box-sizing:border-box;background:var(--bg);border:1px solid var(--brd);border-radius:6px;
  padding:9px 11px;color:var(--tx);font-size:14px;font-family:inherit;line-height:1.4;
  transition:border-color .15s,box-shadow .15s;outline:none}
#contact-body input[type="text"]:focus,#contact-body input[type="email"]:focus,#contact-body select:focus,#contact-body textarea:focus{
  border-color:var(--v);box-shadow:0 0 0 3px rgba(212,175,55,.15)}
#contact-body textarea{resize:vertical;min-height:120px;max-height:340px}
#contact-body select{cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--t2) 50%),linear-gradient(135deg,var(--t2) 50%,transparent 50%);
  background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}
.contact-row{display:flex;gap:12px}
.contact-col{flex:1;min-width:0}
.contact-counter{text-align:right;font-size:11.5px;color:var(--t3);margin-top:4px;font-variant-numeric:tabular-nums}
.contact-hp{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.contact-msgbox{margin:14px 0 4px 0;padding:10px 12px;border-radius:6px;font-size:13px;line-height:1.45}
.contact-msgbox.err{background:rgba(180,50,50,.10);border:1px solid rgba(180,50,50,.35);color:#c94040}
.contact-msgbox.ok {background:rgba(60,140,60,.10);border:1px solid rgba(60,140,60,.35);color:#3f8f3f}
.contact-msgbox.info{background:rgba(212,175,55,.10);border:1px solid rgba(212,175,55,.35);color:var(--vl)}
.contact-privacy{margin:16px 0 0 0;font-size:11.5px;color:var(--t3);line-height:1.5}
.contact-privacy a{color:var(--vl);text-decoration:underline}
#contact-foot{display:flex;gap:10px;justify-content:flex-end;padding:12px 20px;border-top:1px solid var(--brd);background:var(--bg3);flex-shrink:0}
.contact-btn-send{background:var(--v);color:#241a12;border-color:var(--v);font-weight:600}
.contact-btn-send:hover:not(:disabled){background:var(--vl);border-color:var(--vl)}
#contact-submit:disabled{opacity:.55;cursor:wait}
@media(max-width:560px){
  #contact-card{width:100%;max-height:96vh;border-radius:10px}
  #contact-body{padding:14px 16px}
  .contact-row{flex-direction:column;gap:0}
}

/* Echtes Akkordeon: nur EIN .acc-item je .acc-wrap gleichzeitig offen (accToggle()).
   Gegenüber .pnl/tP() (in .drop deaktiviert, siehe .drop .pnl-bd) eine eigene, gestapelte Liste. */
.acc-wrap{display:flex;flex-direction:column;width:100%;max-width:92vw} /* 2026-07-18: volle Drop-Breite nutzen statt fixer 340px — Tipp-Zeilen bleiben einzeilig */
/* Akkordeon-Aufwertung (User-Wunsch 2026-07-07): Header lesen sich jetzt klar als Überschriften.
   Statt trennendem Border-bottom bekommt jeder .acc-h einen eigenen Rahmen mit goldener Linie,
   heller Hintergrundstufe (--bg3) und abgerundeten Ecken. Aktives Item zusätzlich mit Gold-Highlight. */
.acc-item{border-bottom:none;margin-bottom:8px}
/* Reihenfolge in „Meine Lottowelt": erst erstellen, dann ansehen. Gemeldet am
   31.08.2026: „den Menuepunkt ‚Tipps hinzufuegen‘ und ‚Meine Tipps‘ umdrehen".
   Ueber `order` statt durch Verschieben im Markup -- die Bloecke haengen an
   Skriptstellen, die auf ihre Lage im Dokument nicht angewiesen sein sollen. */
#d-export .acc-wrap{display:flex;flex-direction:column}
#d-export #acc-exp-wae{order:1}
#d-export #acc-exp-add{order:2}
#d-export #acc-exp-played{order:3}
#d-export #acc-exp-park{order:4}   /* Parkhaus (E5) */
#d-export #acc-exp-gem{order:5}
#d-export #acc-exp-exp{order:6}
.acc-item:last-child{margin-bottom:0}
.acc-h{display:flex;align-items:center;gap:9px;padding:12px 14px;cursor:pointer;user-select:none;
  background:var(--bg3);border:1px solid var(--brdv);border-radius:9px;
  transition:background .14s,border-color .14s,box-shadow .14s}
.acc-h:hover{background:rgba(212,175,55,.10);border-color:var(--vl)}
.acc-item.open .acc-h{background:rgba(212,175,55,.09);border-color:var(--vl);box-shadow:0 1px 0 rgba(212,175,55,.15)}
.acc-ic{font-size:14px;color:var(--vl);width:18px;text-align:center;flex-shrink:0}
.acc-ttl{font-size:13px;font-weight:600;color:var(--vl);letter-spacing:.06em;text-transform:uppercase;flex:1;position:relative}
.acc-h.has-flt .acc-ttl::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#ef4444;margin-left:7px;vertical-align:middle;transform:translateY(-1px)}
.acc-arr{width:12px;height:12px;color:var(--vl);transition:transform .18s;flex-shrink:0;opacity:.7}
.acc-item.open .acc-arr{transform:rotate(90deg);opacity:1}
.acc-bd{overflow:hidden;max-height:0;transition:max-height .22s ease}
/* .open: max-height + overflow aufheben, damit lange Favoriten-Listen (200+ Tipps) nicht bei 900 px
   abgeschnitten werden und der Drop-Container bis zu den Aktions-Buttons scrollen kann. */
.acc-item.open .acc-bd{max-height:none;overflow:visible}
.acc-in{padding:12px 16px 20px}
/* (i)-Info-Icon neben Einstellungs-Labels: Kurzhilfe per browser-nativem title-Tooltip. */
.info-i{display:inline-block;color:var(--t3);font-size:12.5px;cursor:help;user-select:none;transition:color .12s;vertical-align:baseline}
.info-i:hover{color:var(--vl)}
/* Nutzen-Zeile („was habe ich davon"): direkt unter Akkordeon-Titel, per Klick am Chevron einklappbar. */
.acc-hint{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--t2);line-height:1.35;padding:4px 6px;margin:0 0 8px;background:rgba(255,255,255,.02);border:1px solid var(--brd);border-radius:5px;cursor:pointer;user-select:none;transition:padding .15s}
.acc-hint:hover{background:rgba(255,255,255,.04)}
.acc-hint-ic{flex-shrink:0;color:var(--vl);font-size:12.5px}
.acc-hint-txt{flex:1;min-width:0}
/* Systemhinweis im Ziehungen-Panel (2026-08-27): erklaert eine Besonderheit der
   Datenlage, die man sonst fuer einen Fehler haelt (derzeit nur Irland). Bewusst
   in Bernstein statt in der neutralen Hinweisfarbe -- es ist eine Einschraenkung,
   keine Bedienhilfe. Kein Klapp-Verhalten: der Text muss stehen bleiben. */
.sys-note{font-size:11.5px;line-height:1.45;color:var(--t2);padding:6px 8px;margin:0 0 8px;
  background:rgba(232,205,122,.06);border:1px solid rgba(232,205,122,.28);border-left-width:3px;border-radius:5px}
.sys-note b{color:var(--vl);font-weight:600}
.acc-hint-x{flex-shrink:0;color:var(--t3);font-size:12px;line-height:1;transition:transform .15s;font-family:var(--mono)}
.acc-hint.collapsed{padding:2px 6px}
.acc-hint.collapsed .acc-hint-txt{display:none}
.acc-hint.collapsed .acc-hint-x{transform:rotate(180deg)}

/* ── Onboarding-Overlay (3 Slides, erster Besuch) ───────────────────────────
   Design: Mahagoni/Gold, größere Typo (16px+) für ältere Augen, klare Hierarchie.
   Öffnen via .open-Klasse (JS), sonst display:none. Escape/✕/Skip schließen.
   Mobile: max 92vw. Slides sind einfach hidden/nicht-hidden — kein Slider-Framework nötig. */
.onb-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:9500;
  align-items:center;justify-content:center;padding:20px;
  animation:onbFadeIn .18s ease-out}
.onb-modal.open{display:flex}
@keyframes onbFadeIn{from{opacity:0}to{opacity:1}}
.onb-card{position:relative;background:var(--bg2);border:1px solid var(--brdv);border-radius:14px;
  box-shadow:0 22px 60px -22px rgba(0,0,0,.95), 0 0 0 1px rgba(212,175,55,.06);
  max-width:520px;width:100%;padding:26px 28px 18px;
  animation:onbPop .22s cubic-bezier(.16,1,.3,1)}
@keyframes onbPop{from{transform:translateY(8px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.onb-x{position:absolute;top:10px;right:12px;background:none;border:none;color:var(--t3);
  font-size:16px;line-height:1;cursor:pointer;padding:6px 8px;border-radius:6px;
  transition:color .12s,background .12s}
.onb-x:hover{color:var(--vl);background:rgba(212,175,55,.10)}
.onb-title{font-size:13px;font-weight:500;color:var(--v);letter-spacing:.3px;
  margin-bottom:20px;text-align:center;font-family:var(--sans)}
.onb-slide{min-height:190px;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 4px}
.onb-slide[hidden]{display:none}
.onb-ic{font-size:56px;line-height:1;margin-bottom:14px;
  filter:drop-shadow(0 0 14px rgba(212,175,55,.35))}
.onb-h{font-size:20px;font-weight:600;color:var(--tx);margin-bottom:12px;line-height:1.25}
.onb-body{font-size:14.5px;color:var(--t2);line-height:1.6;margin:0 0 10px;max-width:420px}
.onb-body b{color:var(--vl);font-weight:600}
.onb-hint{font-size:12px;color:var(--t3);line-height:1.55;margin:12px 0 0;max-width:420px;
  padding-top:10px;border-top:1px solid var(--brd)}
.onb-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:22px;padding-top:14px;border-top:1px solid var(--brd);flex-wrap:wrap}
.onb-dots{display:flex;gap:6px;align-items:center}
.onb-dot{width:8px;height:8px;border-radius:50%;background:var(--brd);transition:background .18s,transform .18s}
.onb-dot.on{background:var(--v);transform:scale(1.25)}
.onb-step{font-size:12.5px;color:var(--t3);font-family:var(--mono);flex:1;text-align:center;min-width:60px}
.onb-btns{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.onb-b{background:var(--bg3);border:1px solid var(--brd);color:var(--tx);border-radius:7px;
  padding:8px 14px;font-size:13px;font-family:var(--sans);cursor:pointer;
  transition:background .12s,border-color .12s,color .12s}
.onb-b:hover:not(:disabled){background:var(--vd);border-color:var(--brdv);color:var(--vl)}
.onb-b:disabled{opacity:.35;cursor:not-allowed}
.onb-b-skip{color:var(--t3);background:transparent;border-color:transparent}
.onb-b-skip:hover{color:var(--t2);background:rgba(255,255,255,.03)}
.onb-b-next,.onb-b-start{background:var(--v);border-color:var(--v);color:var(--bg)}
.onb-b-next:hover,.onb-b-start:hover{background:var(--vl);border-color:var(--vl);color:var(--bg)}
.onb-b[hidden]{display:none}
/* Mobile: kleinere Paddings, Buttons breiter greifbar */
@media (max-width:560px){
  .onb-card{padding:22px 18px 14px;border-radius:12px}
  .onb-ic{font-size:48px;margin-bottom:10px}
  .onb-h{font-size:18px}
  .onb-body{font-size:13.5px}
  .onb-slide{min-height:170px}
  .onb-foot{flex-direction:column;gap:12px;align-items:stretch}
  .onb-step{order:-1;text-align:center}
  .onb-btns{justify-content:space-between}
  .onb-b{padding:10px 14px;flex:1;min-width:0}
  .onb-b-skip{flex:0 0 auto}
}

/* ═══ Reverse-Trial (Sprint 2, 2026-07-13) ══════════════════════════════
   Countdown-Badge in der Topbar + „Testphase beendet"-Modal. Zwei Zustände
   des Badges: normal (gold) und urgent (rot, letzte 3 Tage). */
.trial-badge{
  display:inline-flex;align-items:center;gap:6px;padding:5px 10px;
  border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;
  background:linear-gradient(135deg,rgba(212,175,55,.22),rgba(212,175,55,.10));
  border:1px solid rgba(212,175,55,.55);color:#e8cd7a;
  user-select:none;transition:all .18s;
  white-space:nowrap;flex-shrink:0
}
.trial-badge:hover{background:linear-gradient(135deg,rgba(212,175,55,.34),rgba(212,175,55,.18));border-color:#e8cd7a;transform:translateY(-1px)}
.trial-badge.urgent{
  background:linear-gradient(135deg,rgba(239,68,68,.28),rgba(239,68,68,.12));
  border-color:rgba(239,68,68,.7);color:#fca5a5;
  animation:trialPulse 2.4s ease-in-out infinite
}
/* Bezahlt: dezent-permanenter Bestätigungs-Badge. Kein Pulsieren, kein Alarm-Ton. */
.trial-badge.paid{
  background:linear-gradient(135deg,rgba(212,175,55,.18),rgba(212,175,55,.08));
  border-color:rgba(212,175,55,.45);color:#e8cd7a;
  animation:none
}
body.light .trial-badge.paid{color:#7a4a12;background:linear-gradient(135deg,rgba(212,175,55,.22),rgba(212,175,55,.10));border-color:rgba(176,138,40,.45)}
.trial-badge.urgent:hover{background:linear-gradient(135deg,rgba(239,68,68,.42),rgba(239,68,68,.22));border-color:#fca5a5}
@keyframes trialPulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.55)}50%{box-shadow:0 0 0 6px rgba(239,68,68,0)}}
.trial-badge .tb-ic{font-size:13px}
body.light .trial-badge{color:#7a4a12;background:linear-gradient(135deg,rgba(212,175,55,.28),rgba(212,175,55,.14));border-color:rgba(176,138,40,.55)}
body.light .trial-badge.urgent{color:#8b1919;background:linear-gradient(135deg,rgba(239,68,68,.24),rgba(239,68,68,.10))}
@media (max-width:800px){
  /* Auf Mobile Badge klein — nur Icon + Zahl, kein „Testphase:"-Text */
  .trial-badge .tb-txt{display:none}
  .trial-badge::after{content:attr(data-days)}
}

/* Testphase-beendet-Modal */
.trial-modal{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:20px}
.trial-modal.show{display:flex;animation:trialFadeIn .25s ease-out}
.trial-modal .tm-back{position:absolute;inset:0;background:rgba(10,7,4,.78);backdrop-filter:blur(4px)}
.trial-modal .tm-card{position:relative;z-index:1;background:var(--bg2);border:1px solid var(--brdv);border-radius:14px;padding:36px 32px 28px;max-width:480px;width:100%;text-align:center;box-shadow:0 30px 80px -20px rgba(0,0,0,.85)}
.trial-modal .tm-ic{font-size:52px;margin-bottom:8px}
.trial-modal .tm-title{font-family:var(--sans);font-size:22px;font-weight:700;color:var(--vl);margin:0 0 14px}
.trial-modal .tm-body{font-size:14px;line-height:1.55;color:var(--t2);margin:0 0 12px}
.trial-modal .tm-body strong{color:var(--tx)}
.trial-modal .tm-btns{display:flex;flex-direction:column;gap:8px;margin-top:20px}
.trial-modal .tm-btn{padding:12px 18px;border-radius:8px;font-size:14px;font-weight:600;font-family:var(--sans);cursor:pointer;border:1px solid transparent;transition:all .15s}
.trial-modal .tm-btn-primary{background:linear-gradient(135deg,#d4af37,#a67c1a);color:#1a1206;border-color:#e8cd7a}
.trial-modal .tm-btn-primary:hover{background:linear-gradient(135deg,#e8cd7a,#c39820);transform:translateY(-1px);box-shadow:0 8px 20px -8px rgba(212,175,55,.6)}
.trial-modal .tm-btn-secondary{background:transparent;color:var(--t2);border-color:var(--brd)}
.trial-modal .tm-btn-secondary:hover{background:rgba(255,255,255,.03);color:var(--tx);border-color:var(--brdv)}
@keyframes trialFadeIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@media (max-width:560px){
  .trial-modal .tm-card{padding:28px 22px 22px}
  .trial-modal .tm-title{font-size:19px}
  .trial-modal .tm-body{font-size:13.5px}
}

/* ═══ SPIELAUTOMAT-OPTIK „Erzeugen"-Menü (2026-07-22, Muster A) ═══════════
   Feste Gehäusefarben (kein Theme-Wechsel): der Automat ist ein Objekt.
   Marquee + Walzenfenster + Arcade-Knopf; Anzeige liegt OBEN im Drop. */
.slotm-marquee{position:relative;text-align:center;padding:15px 14px 13px;margin:2px 2px 8px;
  background:linear-gradient(180deg,#3d2c15,#241a0e);border:1px solid #7a5c2e;border-radius:10px}
.slotm-marquee h3{margin:0;font:800 16px/1.15 var(--mono);letter-spacing:.16em;color:#e8cd7a;text-shadow:0 0 12px rgba(212,175,55,.45)}
.slotm-bulbs{position:absolute;left:10px;right:10px;height:7px;pointer-events:none}
.slotm-bulbs.top{top:4px}.slotm-bulbs.bot{bottom:4px}
.slotm-bulbs::before,.slotm-bulbs::after{content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle 3px at 3px 50%,#e8cd7a 0 2.6px,transparent 3px);
  background-size:28px 7px;background-repeat:repeat-x}
.slotm-bulbs::after{background-position-x:14px}
.slotm-bulbs::before{animation:slotmBlink 1.2s steps(1) infinite}
.slotm-bulbs::after{animation:slotmBlink 1.2s steps(1) .6s infinite}
@keyframes slotmBlink{0%,49%{opacity:1}50%,100%{opacity:.22}}
.slotm-reelbox{margin:0 2px 8px;background:#0d0905;border:2px solid #7a5c2e;border-radius:10px;
  padding:10px 10px 8px;box-shadow:inset 0 6px 18px rgba(0,0,0,.85)}
.slotm-reelrow{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-bottom:7px}
.slotm-reel{width:40px;height:48px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  font:800 18px var(--mono);color:#1d1610;box-shadow:inset 0 0 6px rgba(0,0,0,.5);
  background:linear-gradient(180deg,#2a2118 0%,#f3e9d6 16%,#fffdf5 50%,#f3e9d6 84%,#2a2118 100%)}
.slotm-reel.ext{background:linear-gradient(180deg,#2a2118 0%,#e8cd7a 16%,#f6e3a4 50%,#e8cd7a 84%,#2a2118 100%)}
.slotm-reel.empty{color:#6b5a3a;background:linear-gradient(180deg,#1a140c 0%,#33291a 50%,#1a140c 100%);box-shadow:inset 0 0 8px rgba(0,0,0,.8)}
.slotm-reel span{display:inline-block}
.slotm-reelbox.spin .slotm-reel span{animation:slotmSpinY .16s linear infinite}
@keyframes slotmSpinY{0%{transform:translateY(-9px)}100%{transform:translateY(9px)}}
.slotm-meta{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;
  font:12px var(--mono);color:#35e07f;text-shadow:0 0 6px rgba(53,224,127,.5);padding:0 3px}
.slotm-payline{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:5px}
.slotm-payline .pl-txt{font:11px var(--mono);color:#8a7a5e;letter-spacing:.1em;text-transform:uppercase}
.slotm-nav{border:1px solid #7a5c2e;background:#170f08;color:#e8cd7a;border-radius:6px;
  font:700 12px var(--mono);padding:3px 10px;cursor:pointer;line-height:1.2}
.slotm-nav:disabled{opacity:.35;cursor:default}
.slotm-nav:not(:disabled):hover{background:#241a0e}
#d-strategie .slotm-runbtn{background:radial-gradient(120% 160% at 50% 0%,#ff6a55,#e0402f 60%,#8c2015);
  color:#fff;border:none;border-radius:10px;padding:12px 0;width:100%;
  font:800 15px/1 var(--mono);letter-spacing:.12em;cursor:pointer;
  box-shadow:0 5px 0 #6d1a10,0 9px 18px rgba(0,0,0,.55),inset 0 2px 4px rgba(255,255,255,.33)}
#d-strategie .slotm-runbtn:active{transform:translateY(3px);box-shadow:0 2px 0 #6d1a10,0 5px 10px rgba(0,0,0,.55),inset 0 2px 4px rgba(255,255,255,.33)}
#d-strategie #gen-mode .segb{border-radius:18px;font-family:var(--mono);font-weight:600}
#d-strategie #gen-mode .segb.on{background:#d4af37;color:#140f0a;box-shadow:0 0 10px rgba(212,175,55,.35)}
@media (prefers-reduced-motion:reduce){
  .slotm-bulbs::before,.slotm-bulbs::after{animation:none}
  .slotm-reelbox.spin .slotm-reel span{animation:none}
}

/* ── Spielautomat v2 (2026-07-22): EIN Gehäuse statt Einzelteile ────────── */
.slotm-cab{margin:26px 2px 10px;border:2px solid #7a5c2e;border-radius:12px;overflow:hidden;
  background:linear-gradient(180deg,#2a1f12,#1d1610);box-shadow:0 8px 26px rgba(0,0,0,.5)}
.slotm-cab .slotm-marquee{margin:0;border:none;border-bottom:2px solid #7a5c2e;border-radius:0}
.slotm-cab #gen-mode{display:flex;gap:6px;padding:10px 12px 2px;margin:0;background:transparent;border:none}
.slotm-cab #gen-mode .segb{flex:1;border:1px solid #7a5c2e;background:#170f08;color:#b7a682;padding:7px 0}
.slotm-cab .slotm-reelbox{margin:10px 12px 8px}
#d-strategie .slotm-cab .slotm-runbtn{display:block;width:calc(100% - 24px);margin:2px 12px 12px}
.slotm-credits{display:flex;align-items:center;gap:6px;flex-wrap:wrap;background:#0d0905;
  border-top:2px solid #7a5c2e;padding:8px 12px}
.slotm-credits #gen-msg{margin:0;flex:1 1 100%;min-height:0;font-family:var(--mono);font-size:12px;
  color:#fbbf24;text-shadow:0 0 7px rgba(251,191,36,.35)}
.slotm-credits .btn-g{width:auto;margin:0;padding:4px 10px;font-size:12px;border-radius:14px;
  border-color:#7a5c2e;color:#c8b989;background:#170f08}
.slotm-credits .btn-g:hover{border-color:#e8cd7a;color:#e8cd7a}
#gen-results-wrap{background:#100b06;border-top:1px solid #3a2d1c;padding:0 12px 8px}
#gen-results-wrap summary{cursor:pointer;font:600 11px var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:#8a7a5e;padding:8px 0 3px;list-style:none;user-select:none}
#gen-results-wrap summary::-webkit-details-marker{display:none}
#gen-results-wrap summary::before{content:'≡ '}
#gen-results-wrap summary:hover{color:#e8cd7a}

/* ── Spielautomat v3 (2026-07-23): Bildschirm mit zwei Ansichten + Hover-Info ── */
.slotm-grid{display:flex;flex-direction:column;gap:5px;max-height:216px;overflow-y:auto;padding:2px;
  scrollbar-width:thin;scrollbar-color:rgba(212,175,55,.3) transparent}
.slotm-tiprow{display:flex;gap:5px;justify-content:center;flex-wrap:wrap;opacity:.55;transition:opacity .15s}
.slotm-tiprow.cur{opacity:1}
.slotm-tiprow .slotm-reel{width:34px;height:40px;font-size:15px;border-radius:5px}
.slotm-tiprow.cur .slotm-reel{box-shadow:inset 0 0 6px rgba(0,0,0,.5),0 0 8px rgba(212,175,55,.4)}
#gen-reelbox{cursor:pointer}
#gen-reelbox #gen-results{max-height:216px;overflow-y:auto;padding:2px 4px;cursor:default;
  scrollbar-width:thin;scrollbar-color:rgba(212,175,55,.3) transparent}
#gen-reelbox .slotm-hint{margin-top:6px;padding-top:5px;border-top:1px dashed #3a2d1c;
  font:11px var(--mono);color:#8a7a5e;text-align:center;letter-spacing:.06em}
#gen-reelbox .slotm-hint:hover{color:#e8cd7a}
.slotm-hoverinfo{font:12.5px/1.6 var(--mono);color:#35e07f;text-shadow:0 0 6px rgba(53,224,127,.4);
  padding:10px 8px;min-height:110px}

/* ── Spielautomat v4 (2026-07-23): Arcade-Tasten, offene Einstellungen, Leuchtleiste ── */
.slotm-led{margin:0 12px 8px;padding:0 2px;font-family:var(--mono);font-size:12px;min-height:15px;
  color:#fbbf24;text-shadow:0 0 7px rgba(251,191,36,.35)}
.slotm-btnrow{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0 12px 12px}
.slotm-abtn{display:flex;align-items:center;justify-content:center;text-align:center;min-height:58px;
  padding:8px 6px;border:2px solid #7a5c2e;border-radius:10px;background:#170f08;color:#c8b989;
  font:600 11px/1.35 var(--mono);letter-spacing:.05em;text-transform:uppercase;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(232,205,122,.12),0 3px 8px rgba(0,0,0,.4)}
.slotm-abtn:not(:disabled):hover{border-color:#e8cd7a;color:#e8cd7a;box-shadow:inset 0 1px 0 rgba(232,205,122,.2),0 0 12px rgba(212,175,55,.25)}
.slotm-abtn:not(:disabled):active{transform:translateY(2px)}
.slotm-settings{border-top:2px solid #7a5c2e;background:#191208;padding:8px 14px 10px}
.slotm-set-hdr{display:flex;align-items:center;gap:10px;margin:2px 0 6px;
  font:600 11px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:#8a7a5e;white-space:nowrap}
.slotm-set-hdr::before,.slotm-set-hdr::after{content:'';flex:1;border-top:1px solid #3a2d1c}
.slotm-set-hdr.has-flt{color:#e8cd7a}
.slotm-set-hdr.has-flt::after{content:'';flex:1;border-top:1px solid #3a2d1c}
.slotm-settings .tl{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:#b7a682}
.slotm-step{display:flex;gap:5px;align-items:center}
.slotm-step button{width:26px;height:26px;border:1px solid #7a5c2e;border-radius:6px;background:#170f08;
  color:#e8cd7a;font:700 14px/1 var(--mono);cursor:pointer}
.slotm-step button:hover{background:#241a0e;border-color:#e8cd7a}
.slotm-step input{width:56px;text-align:center;background:var(--bg3);border:1px solid var(--brd);
  color:var(--tx);border-radius:5px;padding:3px 4px;font-size:12.5px;font-family:var(--mono)}
.slotm-runmarq{position:relative;margin:0;padding:12px 10px;background:linear-gradient(180deg,#241a0e,#1a120a);
  border-top:2px solid #7a5c2e}
#d-strategie .slotm-runmarq .slotm-runbtn{width:100%;margin:0;font-size:17px;letter-spacing:.2em;padding:14px 0}
.slotm-runmarq .slotm-bulbs.top{top:3px}
.slotm-runmarq .slotm-bulbs.bot{bottom:3px}
@media (max-width:430px){.slotm-btnrow{grid-template-columns:repeat(2,1fr)}}

/* ── Spielautomat v5 (2026-07-23): Marquee größer + Akkordeon, 3D-Tasten, Panel-Raster ── */
.slotm-cab .acc-in{padding:0}
.slotm-cab .slotm-marquee{cursor:pointer;padding:19px 14px 17px}
.slotm-cab .slotm-marquee h3{font-size:22px;letter-spacing:.2em}
.slotm-cab .slotm-marquee:hover h3{text-shadow:0 0 18px rgba(232,205,122,.7)}
.slotm-marq-arr{display:inline-block;margin-left:12px;font-size:15px;color:#8a7a5e;vertical-align:2px;
  transition:transform .2s}
.slotm-cab.open .slotm-marq-arr{transform:rotate(180deg)}
.slotm-cab:not(.open) .slotm-marquee{border-bottom:none}
.slotm-marquee.has-flt h3::after{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;
  background:#ef4444;margin-left:9px;vertical-align:6px}
.slotm-abtn{background:linear-gradient(180deg,#2e2214,#170f08);border:1px solid #8a6a34;
  box-shadow:0 4px 0 #4a3517,0 7px 14px rgba(0,0,0,.5),inset 0 1px 0 rgba(232,205,122,.28);
  border-radius:10px}
.slotm-abtn:not(:disabled):hover{border-color:#e8cd7a;color:#e8cd7a;
  box-shadow:0 4px 0 #4a3517,0 0 14px rgba(212,175,55,.3),inset 0 1px 0 rgba(232,205,122,.35)}
.slotm-abtn:not(:disabled):active{transform:translateY(3px);
  box-shadow:0 1px 0 #4a3517,0 3px 8px rgba(0,0,0,.5),inset 0 1px 0 rgba(232,205,122,.28)}
.slotm-abtn:disabled{box-shadow:0 4px 0 #35271130,inset 0 1px 0 rgba(232,205,122,.08)}
.slotm-settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:10px 12px 12px}
.slotm-set-hdr{grid-column:1/-1;margin:2px 0 0}
.slotm-set-sub{margin-top:4px}
#d-strategie .slotm-settings .tr{display:flex;flex-direction:column;align-items:center;gap:7px;
  margin:0;padding:9px 8px 10px;border:1px solid #7a5c2e;border-radius:10px;background:#14100a;
  box-shadow:inset 0 1px 0 rgba(232,205,122,.08)}
#d-strategie .slotm-settings .tl{text-align:center;font-family:var(--mono);font-size:11px;
  letter-spacing:.07em;text-transform:uppercase;color:#c8b989;line-height:1.4}
/* v7: Spaltenbreiten laufen über die Klassen s3/s4 am .tr — keine :has-Sonderfälle mehr */
@media (max-width:430px){.slotm-settings{grid-template-columns:1fr}}

/* ── Spielautomat v6 (2026-07-23): breiter, Raster-Checkboxen, 3er-Kacheln ── */
#d-strategie.drop{width:min(624px,94vw);max-width:min(680px,94vw)} /* +20 % Platz für den Automaten */
.slotm-cab .slotm-marquee h3{text-transform:uppercase}
.slotm-cab .slotm-meta{font-size:14.5px;font-weight:600;padding:2px 4px 0}
.slotm-settings{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:560px){.slotm-settings{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:430px){.slotm-settings{grid-template-columns:1fr}}
.slotm-tiprow{align-items:center}
.slotm-rowck-w{display:flex;align-items:center;padding:2px 4px 2px 0;cursor:pointer}
.slotm-rowck{width:15px;height:15px;accent-color:#d4af37;cursor:pointer}

/* ── Spielautomat v7 (2026-07-23): Meta bündig zu den Zahlen, Kachel-Zeilen 3/4/4 ── */
.slotm-screen-inner{width:max-content;max-width:100%;margin:0 auto}
.slotm-grid{scrollbar-gutter:stable both-edges} /* Scrollleisten-Rinne symmetrisch → Meta-Zeile bündig */
.slotm-reelbox.list-on .slotm-screen-inner{width:100%}
.slotm-cab .slotm-meta{padding:2px 0 0}
.slotm-settings{grid-template-columns:repeat(12,minmax(0,1fr))}
.slotm-settings .tr.s4{grid-column:span 4}  /* Zeile 1: Anzahl · Feste Zahlen · Ausschluss */
.slotm-settings .tr.s3{grid-column:span 3}  /* Zeilen 2+3: Viertelbreite wie die 4 Tasten */
@media (max-width:560px){
  .slotm-settings{grid-template-columns:repeat(12,minmax(0,1fr))}
  .slotm-settings .tr.s4,.slotm-settings .tr.s3{grid-column:span 6}
}
@media (max-width:430px){
  .slotm-settings .tr.s4,.slotm-settings .tr.s3{grid-column:span 12}
}

/* ── Spielautomat v8 (2026-07-23): 3D-Versatz kräftiger + nach rechts, Kachel-Fixes ── */
.slotm-abtn{box-shadow:4px 5px 0 #4a3517,6px 9px 16px rgba(0,0,0,.5),inset 0 1px 0 rgba(232,205,122,.28)}
.slotm-abtn:not(:disabled):hover{border-color:#e8cd7a;color:#e8cd7a;
  box-shadow:4px 5px 0 #4a3517,0 0 14px rgba(212,175,55,.3),inset 0 1px 0 rgba(232,205,122,.35)}
.slotm-abtn:not(:disabled):active{transform:translate(3px,4px);
  box-shadow:1px 1px 0 #4a3517,2px 3px 6px rgba(0,0,0,.5),inset 0 1px 0 rgba(232,205,122,.28)}
.slotm-abtn:disabled{box-shadow:4px 5px 0 rgba(53,39,17,.35),inset 0 1px 0 rgba(232,205,122,.08)}
#d-strategie .slotm-runbtn{box-shadow:5px 7px 0 #6d1a10,8px 12px 20px rgba(0,0,0,.55),inset 0 2px 4px rgba(255,255,255,.33)}
#d-strategie .slotm-runbtn:active{transform:translate(3px,4px);
  box-shadow:2px 3px 0 #6d1a10,3px 5px 10px rgba(0,0,0,.55),inset 0 2px 4px rgba(255,255,255,.33)}
.slotm-nav,.slotm-step button{box-shadow:2px 3px 0 #4a3517,3px 5px 8px rgba(0,0,0,.4)}
.slotm-nav:not(:disabled):active,.slotm-step button:active{transform:translate(1px,2px);box-shadow:1px 1px 0 #4a3517}
#d-strategie #gen-mode .segb{box-shadow:2px 3px 0 #4a3517,3px 5px 9px rgba(0,0,0,.35)}
#d-strategie #gen-mode .segb.on{box-shadow:2px 3px 0 #8a6a1c,0 0 10px rgba(212,175,55,.35)}
#d-strategie #gen-mode .segb:active{transform:translate(1px,2px);box-shadow:1px 1px 0 #4a3517}
/* Feste Zahlen einzeilig: Kachel halbe Breite, Anzahl/Ausschluss je 1/4 daneben */
.slotm-settings .tr.s4{grid-column:span 3}
.slotm-settings .tr.s4:has(#gen-slots){grid-column:span 6}
@media (max-width:430px){.slotm-settings .tr.s4:has(#gen-slots){grid-column:span 12}}
/* Auswahl-/Eingabefelder nie breiter als ihre Kachel */
.slotm-settings .tr{min-width:0}
#d-strategie .slotm-settings .tr select{width:100%;max-width:100%;min-width:0}
#d-strategie .slotm-settings .tr input{max-width:100%}

/* ── Spielautomat v9 (2026-07-23): GENERIEREN klebt am unteren Menürand, 3D auch disabled ── */
.slotm-cab{overflow:visible} /* nötig für position:sticky des Knopfs; Ecken runden die Kinder selbst */
.slotm-cab .slotm-marquee{border-radius:10px 10px 0 0}
.slotm-runmarq{border-radius:0 0 10px 10px}
.slotm-cab.open .slotm-runmarq{position:sticky;bottom:-1px;z-index:5} /* nur offen kleben — sonst lugt der Knopf aus dem zugeklappten Automaten */
.slotm-abtn:disabled{color:#6b5a3a;border-color:#5a4520;cursor:not-allowed;
  background:linear-gradient(180deg,#241a0f,#140d06);
  box-shadow:4px 5px 0 #2e2110,6px 9px 14px rgba(0,0,0,.4),inset 0 1px 0 rgba(232,205,122,.10)}
#d-strategie .slotm-runbtn{box-shadow:5px 7px 0 #4d0f08,8px 12px 20px rgba(0,0,0,.6),inset 0 2px 4px rgba(255,255,255,.35)}
#d-strategie .slotm-runbtn:active{box-shadow:2px 3px 0 #4d0f08,3px 5px 10px rgba(0,0,0,.6),inset 0 2px 4px rgba(255,255,255,.35)}

/* ── Spielautomat-Zahlenrad (2026-07-23) ───────────────────────────────── */
.slotm-marquee .slotm-sub{margin-top:6px;font:700 11px var(--mono);letter-spacing:.26em;color:#b7a682}
.slot-screen{position:relative;padding:14px 12px 10px}
.slot-reels{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.slot-reel{width:52px;border-radius:7px;overflow:hidden;border:2px solid #7a5c2e;
  background:linear-gradient(180deg,#0d0905,#1a140c);display:flex;flex-direction:column;
  box-shadow:inset 0 0 10px rgba(0,0,0,.7)}
.slot-reel span{display:block;text-align:center;font-family:var(--mono);color:#1d1610;
  background:linear-gradient(180deg,#c9bfa4,#f6efdc);line-height:1}
.slot-reel .sr-a,.slot-reel .sr-c{height:22px;font-size:15px;font-weight:600;
  color:#6b5f45;background:linear-gradient(180deg,#7d745c,#b3a988);
  display:flex;align-items:center;justify-content:center;opacity:.85}
.slot-reel .sr-b{height:44px;font-size:26px;font-weight:800;
  background:linear-gradient(180deg,#fffdf5,#efe6cf);border-block:1px solid #8a6a34;
  display:flex;align-items:center;justify-content:center}
.slot-reel.ext .sr-b{color:#8a5a12;background:linear-gradient(180deg,#fff4d0,#f2dfa0)}
.slot-screen.rolling .slot-reel .sr-a,.slot-screen.rolling .slot-reel .sr-c{filter:blur(2px);opacity:.6}
.slot-screen.rolling .slot-reel .sr-b{filter:blur(.6px)}
.slot-count{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font:800 68px/1 var(--mono);color:#ffd34d;text-shadow:0 0 18px rgba(255,211,77,.7),0 2px 8px #000;
  pointer-events:none;letter-spacing:.02em}
.slot-status{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  margin-top:10px;font:11.5px var(--mono);color:#8a7a5e;letter-spacing:.04em}
.slot-status .slot-sep{opacity:.5}
.slot-lamp{width:9px;height:9px;border-radius:50%;background:#5c4419;box-shadow:inset 0 0 3px #000}
.slot-lamp.on{background:#35e07f;box-shadow:0 0 8px 1px rgba(53,224,127,.8)}
.slot-read{margin-top:7px;text-align:center;font:12px var(--mono);color:var(--amber);min-height:15px}
/* Start/Stop-Tasten */
.slot-btns{padding:0}
.slot-btns.split{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#d-strategie .slot-startbtn{width:100%}
.slot-btns.split .slotm-runbtn{width:100%}
#d-strategie .slot-stopbtn{background:linear-gradient(180deg,#2e2214,#170f08);color:#c8b989;
  box-shadow:4px 5px 0 #4a3517,6px 9px 14px rgba(0,0,0,.5),inset 0 1px 0 rgba(232,205,122,.2)}
#d-strategie .slot-stopbtn:not(:disabled){background:radial-gradient(120% 160% at 50% 0%,#ff6a55,#e0402f 60%,#8c2015);color:#fff}
.slotm-runbtn:disabled{opacity:1;filter:saturate(.4) brightness(.7);cursor:not-allowed}
@media (max-width:430px){.slot-reel{width:44px}.slot-reel .sr-b{font-size:22px}.slot-count{font-size:52px}}

/* ── Spielautomat: Aktions-Tasten + grüner Start / roter Stop (2026-07-23) ── */
.slot-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;padding:0 12px 4px}
.slot-actbtn{min-height:46px;text-transform:none;font-size:11.5px}
#d-strategie .slot-startbtn{background:radial-gradient(120% 160% at 50% 0%,#5fe08a,#1f9e55 60%,#0f6e39);
  box-shadow:5px 7px 0 #0c4d2a,8px 12px 20px rgba(0,0,0,.55),inset 0 2px 4px rgba(255,255,255,.33)}
#d-strategie .slot-startbtn:active{box-shadow:2px 3px 0 #0c4d2a,3px 5px 10px rgba(0,0,0,.55),inset 0 2px 4px rgba(255,255,255,.33)}
#d-strategie .slot-stopbtn,#d-strategie .slot-stopbtn:not(:disabled){background:radial-gradient(120% 160% at 50% 0%,#ff6a55,#e0402f 60%,#8c2015);color:#fff;
  box-shadow:5px 7px 0 #4d0f08,8px 12px 20px rgba(0,0,0,.6),inset 0 2px 4px rgba(255,255,255,.35)}
#d-strategie .slot-stopbtn:active{box-shadow:2px 3px 0 #4d0f08,3px 5px 10px rgba(0,0,0,.6),inset 0 2px 4px rgba(255,255,255,.35)}
@media (max-width:430px){.slot-actions{grid-template-columns:1fr}}

/* ── Orakel-Kabinett (2026-07-23): LED-Zähler (7-Segment) + Tippliste ───────── */
.orac-led-box{margin:10px 12px 8px;padding:12px 12px 10px;border-radius:10px;
  background:radial-gradient(120% 150% at 50% 0%,#1c1408,#0a0703 72%);
  border:2px solid #7a5c2e;box-shadow:inset 0 3px 12px rgba(0,0,0,.75),0 1px 0 rgba(232,205,122,.12)}
.orac-led-cap,.orac-led-sub{text-align:center;font:700 10px var(--mono);letter-spacing:.26em;text-transform:uppercase}
.orac-led-cap{color:#e0402f;text-shadow:0 0 9px rgba(224,64,47,.5);margin-bottom:8px}
.orac-led-sub{color:#b7a682;margin-top:8px}
.orac-led{position:relative;display:flex;justify-content:center;gap:5px;padding:9px 24px;border-radius:7px;
  background:linear-gradient(180deg,#0b0904,#060400);box-shadow:inset 0 3px 14px rgba(0,0,0,.9)}
.orac-led::before,.orac-led::after{content:'';position:absolute;top:9px;bottom:9px;width:7px;
  background:radial-gradient(circle at 50% 5px,#ffcf6a 0 2.3px,transparent 2.9px) 0 0/7px 12px repeat-y;opacity:.7}
.orac-led::before{left:8px}.orac-led::after{right:8px}
/* Echte 7-Segment-Ziffer: 7 gestanzte Segmente, ungeleuchtet bleiben sie schwach sichtbar */
.seg7{position:relative;--w:30px;--h:52px;--t:5px;width:var(--w);height:var(--h);color:#ffb32a;
  filter:drop-shadow(0 0 3px rgba(255,150,20,.55))}
.seg7 i{position:absolute;background:currentColor;opacity:.07}
.seg7 i.on{opacity:1}
.seg7 .a,.seg7 .g,.seg7 .d{left:calc(var(--t)*.75);width:calc(var(--w) - var(--t)*1.5);height:var(--t);
  clip-path:polygon(14% 0,86% 0,100% 50%,86% 100%,14% 100%,0 50%)}
.seg7 .a{top:0}.seg7 .g{top:calc(50% - var(--t)/2)}.seg7 .d{bottom:0}
.seg7 .b,.seg7 .c,.seg7 .e,.seg7 .f{width:var(--t);height:calc(50% - var(--t)*.85);
  clip-path:polygon(50% 0,100% 14%,100% 86%,50% 100%,0 86%,0 14%)}
.seg7 .b{top:calc(var(--t)*.6);right:0}.seg7 .c{bottom:calc(var(--t)*.6);right:0}
.seg7 .e{bottom:calc(var(--t)*.6);left:0}.seg7 .f{top:calc(var(--t)*.6);left:0}
.seg7.dim{filter:none}.seg7.dim i.on{opacity:.26}
.seg7.grp{margin-right:calc(var(--w)*.5)}   /* Tausender-Trennung: halber Segmentabstand */
#orac-screen{margin:0 12px 8px}
#orac-screen #orac-results{max-height:216px;overflow-y:auto;padding:2px 2px 0;
  scrollbar-width:thin;scrollbar-color:rgba(212,175,55,.3) transparent}
#orac-screen .slotm-hint{margin-top:6px;padding-top:5px;border-top:1px dashed #3a2d1c;
  font:11px var(--mono);color:#8a7a5e;text-align:center;letter-spacing:.05em}
.orac-res-hdr{font:12px var(--mono);color:#8a7a5e;margin:2px 0 5px;letter-spacing:.04em}
.orac-res-row{display:flex;gap:8px;align-items:flex-start;font-family:var(--mono);
  padding:4px 0;border-bottom:1px solid var(--brd)}
.orac-res-row input{margin-top:2px;flex-shrink:0;width:15px;height:15px;accent-color:#d4af37;cursor:pointer}
.orac-res-body{flex:1;min-width:0}
.orac-res-tip{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.orac-res-meta{font-size:11.5px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.orac-res-row.mid .orac-res-tip{font-weight:700}
/* Zwei Schritt-Panels nebeneinander: rot = zählen, blau = erzeugen */
.orac-steps{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:2px 12px 12px}
.orac-step{display:flex;flex-direction:column;gap:7px;padding:12px;border-radius:10px;border:1px solid}
.orac-step--a{border-color:rgba(224,64,47,.5);background:linear-gradient(180deg,rgba(224,64,47,.12),rgba(224,64,47,.03))}
.orac-step--b{border-color:rgba(96,150,225,.5);background:linear-gradient(180deg,rgba(96,150,225,.12),rgba(96,150,225,.03))}
.orac-step-hd{font:800 12px var(--mono);letter-spacing:.05em;text-transform:uppercase}
.orac-step--a .orac-step-hd{color:#ff6a55}
.orac-step--b .orac-step-hd{color:#7fb0ff}
.orac-step-desc{margin:0;font:11px/1.5 var(--mono);color:var(--t2)}
.orac-field-lbl{font:600 10.5px var(--mono);letter-spacing:.04em;text-transform:uppercase;color:#b7a682;margin-top:2px}
.orac-step input,.orac-step select{width:100%;background:var(--bg3);border:1px solid var(--brd);color:var(--tx);
  border-radius:6px;padding:6px 8px;font:12.5px var(--mono)}
.orac-step input{text-align:center}
.orac-off-hint{font:11px var(--mono);color:#7fb0ff;min-height:14px}
.orac-btn{margin-top:auto;border:none;border-radius:9px;padding:11px 6px;color:#fff;
  font:800 13px var(--mono);letter-spacing:.05em;cursor:pointer;
  box-shadow:0 4px 0 rgba(0,0,0,.45),inset 0 2px 3px rgba(255,255,255,.25)}
.orac-btn--a{background:radial-gradient(120% 160% at 50% 0%,#ff6a55,#e0402f 60%,#8c2015);box-shadow:0 4px 0 #6d1a10,0 6px 12px rgba(0,0,0,.4),inset 0 2px 3px rgba(255,255,255,.25)}
.orac-btn--b{background:radial-gradient(120% 160% at 50% 0%,#6ea6ff,#3f78d9 60%,#1d3f8c);box-shadow:0 4px 0 #16305f,0 6px 12px rgba(0,0,0,.4),inset 0 2px 3px rgba(255,255,255,.25)}
.orac-btn--a:active{transform:translateY(2px);box-shadow:0 2px 0 #6d1a10,0 3px 7px rgba(0,0,0,.4),inset 0 2px 3px rgba(255,255,255,.25)}
.orac-btn--b:active{transform:translateY(2px);box-shadow:0 2px 0 #16305f,0 3px 7px rgba(0,0,0,.4),inset 0 2px 3px rgba(255,255,255,.25)}
.orac-note{font-size:11.5px;line-height:1.5;color:var(--t2)}
@media (max-width:520px){.orac-steps{grid-template-columns:1fr}}
@media (max-width:430px){.seg7{--w:24px;--h:42px;--t:4px}.orac-led{padding:8px 16px}}

/* ── Hilfsmittel-Kabinett (2026-07-23): gerahmte Sektionen A–F + Sternbild-Vorschau ── */
.hm-info,.hm-foot{display:flex;gap:9px;align-items:flex-start;margin:10px 12px 8px;padding:9px 11px;
  border:1px solid #6b501f;border-radius:9px;background:rgba(232,205,122,.05);font:11.5px/1.5 var(--mono);color:#c8b989}
.hm-foot{margin-top:2px;color:#a99a72;font-size:11px}
.hm-info-ic{flex-shrink:0;width:17px;height:17px;border:1px solid #8a6a34;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font:700 11px var(--mono);color:#e8cd7a}
.hm-top{display:flex;gap:10px;margin:0 12px 10px;align-items:stretch}
.hm-preview{flex:0 0 128px;border:2px solid #7a5c2e;border-radius:10px;position:relative;overflow:hidden;
  background:radial-gradient(circle at 50% 50%,#1a1206,#0a0703 75%)}
.hm-preview::before{content:'';position:absolute;inset:0;opacity:.5;
  background:repeating-radial-gradient(circle at 50% 50%,transparent 0 13px,rgba(232,205,122,.10) 13px 13.5px),
    linear-gradient(rgba(232,205,122,.10),rgba(232,205,122,.10)) 50% 0/1px 100% no-repeat,
    linear-gradient(rgba(232,205,122,.10),rgba(232,205,122,.10)) 0 50%/100% 1px no-repeat}
.hm-preview svg{position:relative;width:100%;height:100%;display:block}
#const-preview line{stroke:#e8cd7a;stroke-width:1.1;opacity:.85;stroke-linecap:round}
#const-preview circle{fill:#ffcf6a;filter:drop-shadow(0 0 2px rgba(255,180,40,.8))}
.hm-sec{margin:0 12px 10px;padding:10px 12px 12px;border:1px solid #7a5c2e;border-radius:10px;
  background:linear-gradient(180deg,rgba(232,205,122,.04),rgba(0,0,0,.15))}
.hm-top .hm-sec{margin:0;flex:1;min-width:0}
.hm-sec-hd{display:flex;align-items:center;gap:9px;margin:0 0 9px;
  font:800 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#e8cd7a}
.hm-sec-hd::after{content:'';flex:1;border-top:1px solid #4a3517}
.hm-sec-ltr{flex-shrink:0;width:20px;height:20px;border:1px solid #8a6a34;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font:800 11px var(--mono);color:#ffcf6a;
  background:#1a1206;box-shadow:inset 0 1px 0 rgba(232,205,122,.2)}
.hm-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px;
  font:600 11.5px var(--mono);color:#c8b989}
.hm-tiles{display:grid;gap:8px}
.hm-tiles-2{grid-template-columns:1fr 1fr}
.hm-tiles-3{grid-template-columns:1fr 1fr 1fr}
.hm-tiles-5{grid-template-columns:repeat(5,1fr)}
.hm-tile{min-height:50px;font-size:10.5px;padding:8px 5px;line-height:1.3}
.hm-info-i{color:#b7a682;font-size:12px;margin-left:2px}
.hm-info-i:hover{color:#ffe08a}
.hm-tile.on{border-color:#e8cd7a;color:#ffe08a;
  box-shadow:4px 5px 0 #4a3517,0 0 14px rgba(212,175,55,.4),inset 0 1px 0 rgba(232,205,122,.45),inset 0 0 12px rgba(212,175,55,.2)}
.hm-row2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 12px 10px}
.hm-row2 .hm-sec{margin:0}
.hm-select{width:100%;background:var(--bg3);border:1px solid #7a5c2e;color:var(--tx);border-radius:6px;
  padding:6px 8px;font:12.5px var(--mono);margin-bottom:8px}
.hm-btn-wide{width:100%;min-height:44px;font-size:11px}
.hm-status,.hm-result{padding:8px 10px;border:1px solid #3a5a3a;border-radius:7px;background:rgba(52,211,153,.06);
  font:12px var(--mono);color:#7ee0a8;text-align:center;margin-bottom:9px}
.hm-result{text-align:left}.hm-result b{color:#ffe08a}
.hm-e-row{display:flex;gap:12px;align-items:flex-end;margin-bottom:10px}
.hm-e-col{display:flex;flex-direction:column;gap:6px}
.hm-e-width{flex:1}
.hm-lbl{font:600 10.5px var(--mono);letter-spacing:.04em;text-transform:uppercase;color:#b7a682}
.hm-swatch{width:56px;height:30px;border:1px solid #7a5c2e;border-radius:6px;cursor:pointer;padding:0}
#acc-strat-help #draw-width{width:100%;accent-color:#e8cd7a}
#acc-strat-help #draw-picks{margin-top:6px}
@media (max-width:520px){
  .hm-top{flex-direction:column}.hm-preview{flex:0 0 120px;height:120px}
  .hm-tiles-5{grid-template-columns:repeat(3,1fr)}
  .hm-row2{grid-template-columns:1fr}
}

/* ═══ MENÜ-KABINETTE (.anz-cab) (2026-07-24) ══════════════════════════════
   Gleiche Material-Sprache wie die „Erzeugen"-Automaten (brauner Rahmen,
   Gold, dunkle Innenflächen, 3D-Arcade-Tasten). Unterschied laut Nutzer:
   die Überschriften tragen KEINE blinkenden Lichter, sondern nur je eine
   starke Linie über und unter dem zentrierten Titel. Auf #dropzone .anz-cab
   begrenzt — greift für jedes so getaggte Menü (Analysieren = d-auswertung,
   Ziehungen/Zeitraum = d-filter), ohne die übrigen Menüs zu berühren. DOM
   unverändert bis auf die Klasse .anz-cab, damit alle Funktionen erhalten
   bleiben. (#quad-det-actions/#stat-src sind auswertungs-spezifisch.) */
#dropzone .anz-cab{position:relative;border:2px solid #8a6a34;border-radius:12px;overflow:hidden;
  margin:0 3px 24px;background:linear-gradient(180deg,#2a1f12,#1d1610);
  box-shadow:0 12px 30px rgba(0,0,0,.66),0 2px 0 rgba(232,205,122,.06),inset 0 0 0 1px rgba(232,205,122,.06)}
#dropzone .anz-cab:last-child{margin-bottom:4px}
/* Offenes Kabinett hebt sich klar ab: hellerer Rahmen + Gold-Glow → sein Umfang ist eindeutig */
#dropzone .anz-cab.open{border-color:#a8842f;
  box-shadow:0 14px 34px rgba(0,0,0,.72),0 0 22px rgba(212,175,55,.13),0 2px 0 rgba(232,205,122,.08),inset 0 0 0 1px rgba(232,205,122,.1)}
/* Abschluss-Linie unten (spiegelt die Kopf-Linie): markiert das Ende des Kabinetts */
#dropzone .anz-cab.open .acc-in::after{content:'';display:block;height:2px;margin:14px 2px 2px;
  background:linear-gradient(90deg,transparent,#c9a44e 14%,#e8cd7a 50%,#c9a44e 86%,transparent);
  box-shadow:0 0 8px rgba(232,205,122,.3)}

/* Kopfzeile = Marquee ohne Bulbs: zentrierter Goldtitel, starke Linie oben + unten */
#dropzone .anz-cab>.acc-h{position:relative;justify-content:center;gap:9px;
  padding:17px 38px 16px;border:none;border-radius:0;
  background:linear-gradient(180deg,#3d2c15,#241a0e);box-shadow:none}
#dropzone .anz-cab>.acc-h:hover{background:linear-gradient(180deg,#48331a,#2b2011)}
#dropzone .anz-cab>.acc-h::before,
#dropzone .anz-cab>.acc-h::after{content:'';position:absolute;left:14px;right:14px;height:2px;
  background:linear-gradient(90deg,transparent,#c9a44e 14%,#e8cd7a 50%,#c9a44e 86%,transparent);
  box-shadow:0 0 8px rgba(232,205,122,.35)}
#dropzone .anz-cab>.acc-h::before{top:7px}
#dropzone .anz-cab>.acc-h::after{bottom:7px}
#dropzone .anz-cab .acc-ic{width:auto;flex:0 0 auto;color:#e8cd7a;font-size:15px;
  text-shadow:0 0 10px rgba(212,175,55,.4)}
#dropzone .anz-cab .acc-ttl{flex:0 1 auto;text-align:center;font-family:var(--mono);font-weight:800;
  font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:#e8cd7a;
  text-shadow:0 0 12px rgba(212,175,55,.45)}
#dropzone .anz-cab>.acc-h:hover .acc-ttl{text-shadow:0 0 16px rgba(232,205,122,.7)}
#dropzone .anz-cab .acc-arr{position:absolute;right:15px;top:50%;margin-top:-6px;
  color:#8a7a5e;opacity:.85}
#dropzone .anz-cab.open .acc-arr{color:#e8cd7a;opacity:1}
#dropzone .anz-cab .acc-h.has-flt .acc-ttl::after{background:#ef4444;box-shadow:0 0 6px rgba(239,68,68,.6)}

/* Innenraum */
#dropzone .anz-cab .acc-in{padding:12px 14px 15px;background:transparent}
#dropzone .anz-cab .acc-hint{background:#14100a;border:1px solid #3a2d1c;color:#a99a72}
#dropzone .anz-cab .acc-hint:hover{background:#1a140c}
#dropzone .anz-cab .acc-hint-ic{color:#e8cd7a}
#dropzone .anz-cab .note{color:#a99a72}
#dropzone .anz-cab .fl{color:#8a7a5e}
#dropzone .anz-cab .tl{color:#b7a682}
/* Statistik-Zeilen als „Ableseleiste" mit dünnen Trennern */
#dropzone .anz-cab .sr{border-bottom:1px solid rgba(232,205,122,.07)}
#dropzone .anz-cab .sk{color:#b7a682}
#dropzone .anz-cab .sv{color:#e8cd7a}
#dropzone .anz-cab #stat-src{color:#c8b989 !important}
/* Umschalter/Regler in Kabinett-Tönen */
#dropzone .anz-cab .tog{background:#14100a;border-color:#7a5c2e}
#dropzone .anz-cab .tog.on{background:#d4af37;border-color:#e8cd7a}
#dropzone .anz-cab input[type=range]{accent-color:#d4af37}
/* Eingaben/Auswahl (inline-Stile mit !important überstimmen) */
#dropzone .anz-cab select,
#dropzone .anz-cab input[type=text],
#dropzone .anz-cab input[type=number]{background:#14100a !important;border:1px solid #7a5c2e !important;
  color:#e8cd7a !important;font-family:var(--mono)}
#dropzone .anz-cab select:focus,
#dropzone .anz-cab input:focus{outline:none;border-color:#e8cd7a !important;
  box-shadow:0 0 0 2px rgba(212,175,55,.2)}
/* Tasten als 3D-Arcade-Knöpfe wie im Erzeugen-Automaten */
#dropzone .anz-cab .btn-g,
#dropzone .anz-cab .btn-p{font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em;
  font-weight:600;border-radius:9px;padding:9px 8px;
  background:linear-gradient(180deg,#2e2214,#170f08);border:1px solid #8a6a34;color:#c8b989;
  box-shadow:2px 3px 0 #4a3517,0 4px 10px rgba(0,0,0,.4),inset 0 1px 0 rgba(232,205,122,.2)}
#dropzone .anz-cab .btn-p{color:#f1e2b4;border-color:#a8842f;
  background:linear-gradient(180deg,#3a2c15,#20160b)}
#dropzone .anz-cab .btn-g:hover,
#dropzone .anz-cab .btn-p:hover{border-color:#e8cd7a;color:#e8cd7a;
  box-shadow:2px 3px 0 #4a3517,0 0 14px rgba(212,175,55,.3),inset 0 1px 0 rgba(232,205,122,.28)}
#dropzone .anz-cab .btn-g:active,
#dropzone .anz-cab .btn-p:active{transform:translate(1px,2px);
  box-shadow:1px 1px 0 #4a3517,inset 0 1px 0 rgba(232,205,122,.2)}
/* Quadrant-Details: „Tipp speichern" + „Zurücksetzen" nebeneinander statt gestapelt */
#d-auswertung #quad-det-actions .btn-p,
#d-auswertung #quad-det-actions .btn-g{flex:1 1 0;width:auto;min-width:0;margin-top:0}

/* Ziehungen-Menü (d-filter): eigene Steuerelemente in Kabinett-Tönen mittonen */
#dropzone .anz-cab .zck{color:#b7a682}
#dropzone .anz-cab .zck input,
#dropzone .anz-cab input[type=checkbox]{accent-color:#d4af37}
#dropzone .anz-cab .zstat{color:#c8b989}
#dropzone .anz-cab .zi{border-bottom-color:rgba(232,205,122,.07)}
#dropzone .anz-cab .zrange{color:#a99a72}
#dropzone .anz-cab .zrange input[type=date]{background:#14100a;border:1px solid #7a5c2e;color:#e8cd7a;color-scheme:dark}
/* Preset-Chips als kleine Kabinett-Tasten mit 3D-Versatz */
#dropzone .anz-cab .zp{font-family:var(--mono);color:#c8b989;border:1px solid #8a6a34;
  background:linear-gradient(180deg,#2e2214,#170f08);
  box-shadow:2px 3px 0 #4a3517,0 3px 7px rgba(0,0,0,.35),inset 0 1px 0 rgba(232,205,122,.18)}
#dropzone .anz-cab .zp:hover{border-color:#e8cd7a;color:#e8cd7a;
  box-shadow:2px 3px 0 #4a3517,0 0 12px rgba(212,175,55,.28),inset 0 1px 0 rgba(232,205,122,.28)}
#dropzone .anz-cab .zp:active{transform:translate(1px,2px);box-shadow:1px 1px 0 #4a3517}
/* Aktiver Filter im Kabinett: goldene Taste, dunkle Schrift, dauerhaft eingedrueckt —
   der 3D-Versatz faellt weg und wird durch einen Innenschatten ersetzt. */
#dropzone .anz-cab .zp.act{color:#241b06;border-color:#e8cd7a;font-weight:700;
  background:linear-gradient(180deg,#f2dc95,#d4af37);
  box-shadow:inset 0 2px 5px rgba(74,53,23,.55),0 0 12px rgba(212,175,55,.40);
  transform:translate(1px,2px)}
#dropzone .anz-cab .zp.act:hover{color:#241b06;border-color:#fff0c2;
  background:linear-gradient(180deg,#f7e6ab,#dcb941)}

/* Sanduhr-Ladeanzeige für „alle gezogenen Tipps" / „alle Abstände" (runGapAnalysis) */
.gap-busy{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  padding:36px 12px;color:#e8cd7a;font-family:var(--mono);font-size:13px;letter-spacing:.03em;text-align:center}
.gap-busy .gap-hg{font-size:32px;line-height:1;display:inline-block;
  filter:drop-shadow(0 0 10px rgba(232,205,122,.5));animation:gapHg 1.5s ease-in-out infinite}
@keyframes gapHg{0%,42%{transform:rotate(0)}58%,100%{transform:rotate(180deg)}}
.gap-busy .gap-dots::after{content:'';animation:gapDots 1.2s steps(1) infinite}
@keyframes gapDots{0%{content:''}25%{content:'·'}50%{content:'··'}75%,100%{content:'···'}}
@media (prefers-reduced-motion:reduce){
  .gap-busy .gap-hg{animation:none}
  .gap-busy .gap-dots::after{content:'…';animation:none}
}

/* Merken-Menü (d-favoriten): Listen-Trenner + Options-/Portfolio-Block in Kabinett-Tönen */
#dropzone .anz-cab .pi{border-bottom-color:rgba(232,205,122,.08)}
#dropzone .anz-cab .pe{color:#a99a72}
#dropzone .anz-cab #fav-portfolio{background:#14100a !important;border-color:#3a2d1c !important;color:#b7a682 !important}
#dropzone .anz-cab #fav-opts-sep{border-top-color:#3a2d1c !important}

/* Prüfen-Menü (d-tipp): Eingabe-Box (Links/Rechts-Schalter + passendes Feld in einer Box) */
#d-tipp .tip-inputbox{border:1px solid #7a5c2e;border-radius:10px;background:#14100a;
  padding:11px 12px 12px;margin:2px 0 9px;box-shadow:inset 0 1px 0 rgba(232,205,122,.06)}
#d-tipp .tip-box-cap{font:600 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:#8a7a5e;margin-bottom:8px}
/* Prüfen-Menü (d-tipp): Segment-Umschalter (Zahlen/Speicherplatz, Ziel) als Kabinett-Pillen */
#dropzone .anz-cab .seg{border-color:#7a5c2e;background:#14100a}
#dropzone .anz-cab .segb{color:#b7a682;font-family:var(--mono)}
#dropzone .anz-cab .segb:hover{color:#e8cd7a}
#dropzone .anz-cab .segb.on{background:#d4af37;color:#241a06}
/* Teilen-Menü (d-export): Export-Liste im Kabinett-Ton */
#dropzone .anz-cab #exp-list{background:#100b06 !important;border-color:#3a2d1c !important}

/* ═══ KOPFZEILE im Kabinett-Look (2026-07-24) ════════════════════════════
   Dunkle Metall-Leiste + goldene Abschluss-Linie, Gold-Mono-Navigation —
   dieselbe Material-Sprache wie die Automaten-Kabinette. Feste Farben (die
   Leiste ist ein „Objekt" wie die Kabinette), auf #topbar begrenzt. */
#topbar{background:linear-gradient(180deg,#2a1f12,#191109);
  border-bottom:2px solid #7a5c2e;
  box-shadow:0 4px 14px rgba(0,0,0,.5),inset 0 1px 0 rgba(232,205,122,.10)}
/* Signatur-Goldlinie unter der Leiste (wie die Kabinett-Kopfzeilen) */
#topbar::after{content:'';position:absolute;left:12px;right:12px;bottom:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,#c9a44e 10%,#e8cd7a 50%,#c9a44e 90%,transparent);opacity:.6}
/* Navigations-Items als Gold-Mono-Chips */
#topbar .mi{color:#c8b989;font-family:var(--mono);font-weight:600;letter-spacing:.02em;border:1px solid transparent}
#topbar .mi:hover{background:linear-gradient(180deg,#2e2214,#170f08);border-color:#7a5c2e;color:#e8cd7a}
#topbar .mi.open{background:linear-gradient(180deg,#3a2c15,#20160b);border-color:#a8842f;color:#e8cd7a;
  box-shadow:inset 0 1px 0 rgba(232,205,122,.18)}
#topbar .mi-ic{color:#e8cd7a}
/* rote Filter-LED: Ring an die dunkle Leiste anpassen */
#topbar .mi.has-flt::after{box-shadow:0 0 0 2px #201408,0 0 6px rgba(239,68,68,.6)}
/* System-Auswahl als Kabinett-Feld */
#topbar .hdr-select{background:#14100a;border:1px solid #7a5c2e;color:#e8cd7a;font-family:var(--mono)}
#topbar .hdr-select:hover{border-color:#a8842f}
/* Trenner + Scroll-Pfeile im Kabinett-Ton */
#topbar .tsep{background:linear-gradient(180deg,transparent,#7a5c2e,transparent)}
/* 16.09.2026: goldener Knopf statt dunklem Verlauf -- der Pfeil war auf kleinen Bildschirmen
   kaum zu sehen. Diese Regel gewinnt gegen .tb-nav-btn oben (ID-Spezifitaet), also hier setzen. */
#topbar .tb-nav-btn{background:linear-gradient(180deg,#f0d878,#c9992a);border-color:#e8cd7a;color:#1a1206}
#topbar .tb-nav-btn:hover{background:linear-gradient(180deg,#fff1b8,#d4af37)}
#topbar .tb-nav-btn.off{background:#241a12;color:rgba(243,233,214,.35);border-color:rgba(214,180,110,.14)}
/* Logo an das Gold der Leiste angleichen */
#topbar .logo{color:#e8cd7a}
#topbar .logo span{color:#8a7a5e}
#topbar .logo .ver{background:#d4af37;color:#201408}

/* ═══ TAG-MODUS-FIX für die dunklen Objekte (2026-07-24) ══════════════════
   Kopfzeile + Kabinett-Menüs sind feste dunkle „Objekte". Ihr dynamisch
   erzeugter Inhalt nutzt aber Theme-Variablen (var(--t3), var(--amber),
   var(--green) …). Im Tag-Modus würden die dunkel → unlesbar auf dunklem
   Grund (z. B. die Quadrant-Zeilen neben Z1/Z34). Darum die Theme-Variablen
   in diesen Containern fest auf die NACHT-Werte setzen — in beiden Themes
   identisch dunkel und lesbar. Das Farb-Menü (#d-palette) ist KEIN Kabinett
   und bleibt bewusst theme-abhängig. */
#topbar,
#d-filter, #d-tipp, #d-strategie, #d-auswertung, #d-favoriten, #d-export{
  --bg:#140f0a;--bg2:#1c1610;--bg3:#241a12;
  --brd:rgba(214,180,110,0.14);--brdv:rgba(212,175,55,0.34);
  --v:#d4af37;--vl:#e8cd7a;--vd:rgba(212,175,55,0.12);
  --tx:#f3e9d6;--t2:rgba(243,233,214,0.78);--t3:rgba(243,233,214,0.58);
  --green:#9ab86a;--amber:#fbbf24;--red:#d9785a;
}

/* ═══ Ziehungs-Waechter: das Meldeband (Etappe 2b, 2026-08-30) ═══════════
   Liegt IM Universum (#cv-body) und laesst sich am Griff wegziehen -- es
   verdeckt sonst genau das, worum es geht. Der einzige Farbakzent ist die
   goldene Kante links; wird ein Gewinnrang erreicht, wechselt sie auf gruen.
   Hoechstens 620 px breit: schmaler als der Entwurf, weil weniger verdecken
   der ganze Zweck der Verschiebbarkeit war. */
#wae-band{position:absolute;left:10px;top:10px;z-index:70;
  max-width:min(620px,calc(100% - 20px));
  display:flex;align-items:center;gap:12px;padding:9px 11px;
  border:1px solid var(--brdv);border-left:3px solid var(--v);border-radius:8px;
  background:linear-gradient(90deg,rgba(212,175,55,.13),rgba(212,175,55,.03)),var(--bg2);
  box-shadow:0 12px 30px -14px rgba(0,0,0,.9);cursor:pointer;
  font-family:var(--sans);animation:waeAuf .18s ease-out}
#wae-band[hidden]{display:none}
@keyframes waeAuf{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#wae-band{animation:none}}
#wae-band .wae-grip{color:var(--t3);font-size:14px;line-height:1;letter-spacing:-1px;
  cursor:grab;flex-shrink:0;padding:0 2px;user-select:none;touch-action:none}
#wae-band .wae-grip:active{cursor:grabbing}
#wae-band .wae-body{min-width:0;flex:1}
#wae-band .wae-t1{font-size:13px;font-weight:600;color:var(--vl);letter-spacing:-.005em}
#wae-band .wae-t2{font:400 11.5px/1.5 var(--mono);color:var(--t2);margin-top:3px}
#wae-band .wae-go{font:500 11.5px/1 var(--sans);color:var(--vl);background:var(--vd);
  border:1px solid var(--brdv);border-radius:5px;padding:6px 11px;cursor:pointer;
  white-space:nowrap;flex-shrink:0}
#wae-band .wae-go:hover{background:rgba(212,175,55,.22)}
#wae-band .wae-x{background:none;border:0;color:var(--t3);font-size:13px;
  padding:3px 5px;cursor:pointer;flex-shrink:0;line-height:1}
#wae-band .wae-x:hover{color:var(--tx)}
#wae-band .wae-go:focus-visible,#wae-band .wae-x:focus-visible{outline:2px solid var(--vl);outline-offset:2px}
#wae-band.wae-ereignis{border-left-color:var(--green)}
#wae-band.wae-ereignis .wae-t1{color:#c3dd9c}
@media(max-width:640px){#wae-band{flex-wrap:wrap;max-width:calc(100% - 20px)}
  #wae-band .wae-body{flex:1 0 100%;order:2}}

/* ═══ Waechter: die aufgeklappte Ansicht (Etappe 2c) ════════════════
   Die gezogenen Zahlen als Lottokugeln — der einzige Ort im Produkt, an dem
   Lotto wie Lotto aussieht. Ueberall sonst ist es eine Landkarte. */
#wae-panel .wae-zieh{border:1px solid var(--brd);border-radius:7px;background:rgba(0,0,0,.22);margin-bottom:7px}
#wae-panel .wae-zieh.auf{border-color:var(--brdv)}
#wae-panel .wae-zh{display:flex;align-items:center;gap:11px;padding:9px 11px;cursor:pointer;font:400 11.5px/1 var(--mono)}
#wae-panel .wae-zh:hover{background:rgba(212,175,55,.06)}
#wae-panel .wae-zdat{color:var(--tx);font-weight:500}
#wae-panel .wae-zsys{color:var(--t3)}
#wae-panel .wae-zslot{color:var(--vl);margin-left:auto}
#wae-panel .wae-ztw{color:var(--v);font-size:10px;width:9px;text-align:center}
#wae-panel .wae-zb{display:none;padding:0 11px 12px}
#wae-panel .wae-zieh.auf .wae-zb{display:block}
#wae-panel .wae-cap{font:600 9.5px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--t2);margin:12px 0 6px}
#wae-panel .wae-kugeln{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
#wae-panel .wae-kugel{width:34px;height:34px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font:700 13.5px/1 var(--mono);color:#241a12;background:radial-gradient(circle at 33% 28%,#fffdf6 0%,#f0e6cf 42%,#cdbb96 100%);box-shadow:inset 0 -3px 6px rgba(90,66,30,.35),0 2px 5px rgba(0,0,0,.45)}
#wae-panel .wae-kugel.extra{background:radial-gradient(circle at 33% 28%,#ffeeb9 0%,#e8cd7a 45%,#a8842c 100%);color:#2a1d07}
#wae-panel .wae-tipp{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:2px 0}
#wae-panel .wae-tname{font-size:12px;color:var(--t2);min-width:92px}
#wae-panel .wae-tdat{font:400 11px/1 var(--mono);color:var(--t2);white-space:nowrap}
#wae-panel .wae-chips{display:flex;gap:4px;flex-wrap:wrap}
/* Systemschein-Zeile (Etappe 4): k angekreuzte Zahlen statt sechs Kugeln,
 * darum darf die Chip-Reihe umbrechen und der Name traegt die Kennung. */
#wae-panel .wae-tipp.schein .wae-tname{color:var(--vl);font-weight:600}
#wae-panel .wae-tipp.schein .wae-chips{flex-wrap:wrap;max-width:100%}
#wae-panel .wae-chip{width:26px;height:26px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font:600 11.5px/1 var(--mono);background:var(--bg3);color:var(--tx);border:1px solid var(--brdv)}
#wae-panel .wae-chip.hit{background:radial-gradient(circle at 33% 28%,#c9e8a4 0%,#9ab86a 55%,#6b8c46 100%);color:#18240c;border-color:#7ea154;font-weight:700}
#wae-panel .wae-tsp{font:400 11px/1 var(--mono);color:var(--t2);white-space:nowrap;border-left:1px solid var(--brd);padding-left:8px}
#wae-panel .wae-tsp b{color:var(--tx);font-weight:600}
/* Abstand zum Speicherplatz der Ziehung (14.09.2026) -- gleiche Form wie .wae-tsp,
   damit Sp. und Abstand als ein Paar lesen. */
#wae-panel .wae-tabst{font:400 11px/1 var(--mono);color:var(--t2);white-space:nowrap;border-left:1px solid var(--brd);padding-left:8px}
#wae-panel .wae-tabst b{color:var(--vl);font-weight:600}
#wae-panel .wae-score{margin-left:auto;font:700 11px/1 var(--mono);color:var(--green);white-space:nowrap}
#wae-panel .wae-score.leer{color:var(--t2);font-weight:400}
#wae-panel .wae-tc{font:600 10.5px/1 var(--mono);color:var(--tx);border:1px solid var(--brd);border-radius:4px;padding:5px 7px;background:var(--bg3);cursor:pointer;flex-shrink:0}
#wae-panel .wae-tc:hover{color:var(--vl);border-color:var(--brdv)}
#wae-panel .wae-ruhe{font-size:12px;color:var(--t3);padding:0 0 8px;border-bottom:1px solid var(--brd);margin-bottom:8px}
#wae-panel .wae-mehr{font:400 11px/1 var(--mono);color:var(--t3);padding:6px 0 0;cursor:pointer}
#wae-panel .wae-mehr:hover{color:var(--t2)}
#wae-panel .wae-wege{display:flex;flex-wrap:wrap;gap:6px;margin-top:13px;padding-top:11px;border-top:1px solid var(--brd)}

/* ── Zeitfilter im Waechter (14.09.2026) ────────────────────────────────
   Die Leiste selbst kommt aus .zpreset/.zp/.zrange/.zck/.zstat — dieselben
   Klassen wie im Abschnitt „Ziehungen", damit beide Stellen gleich aussehen
   und gleich bleiben. Hier stehen nur die Abstaende im Waechter und das,
   was es dort zusaetzlich gibt: Haekchen je Zeile, Bilanzzeile, Rollfeld. */
#wae-panel .zpreset{margin-bottom:6px}
#wae-panel .zrange{margin-bottom:11px}
#wae-panel .wae-kopf{display:flex;align-items:center;justify-content:space-between;
  gap:10px;flex-wrap:wrap;margin-bottom:7px}
#wae-panel .wae-bilanz{display:flex;gap:15px;flex-wrap:wrap;align-items:baseline;
  font:500 11.5px/1.5 var(--mono);color:var(--tx);padding:8px 10px;margin-bottom:8px;
  border-left:2px solid var(--v);background:rgba(212,175,55,.06);border-radius:0 5px 5px 0}
#wae-panel .wae-liste{max-height:340px;overflow-y:auto;overflow-x:hidden;
  border:1px solid var(--brd);border-radius:7px;padding:3px 9px;background:rgba(0,0,0,.18)}
#wae-panel .wae-liste .wae-tipp{border-bottom:1px solid rgba(214,180,110,.07);padding:5px 0}
#wae-panel .wae-liste .wae-tipp:last-child{border-bottom:0}
/* Nicht angehakt heisst nicht unsichtbar: die Zeile bleibt lesbar, damit man
   sieht, was gerade NICHT gewertet wird, und sie mit einem Klick dazunimmt. */
/* Nicht angehakt (15.09.2026, Inhaber: „Kontrast eine Katastrophe"): vorher 42 % Deckkraft,
   damit war bei 0 Haken die ganze Liste unlesbar. Jetzt volle Schrift, Kennzeichen ist die
   graue Kante links und der leere Haken -- lesbar bleibt alles. */
#wae-panel .wae-tipp.aus{opacity:.85;box-shadow:inset 3px 0 0 rgba(243,233,214,.18)}
/* Zeile, deren Spannweite gerade auf der Karte liegt (14.09.2026) -- Goldkante wie die Tipp-Marke. */
#wae-panel .wae-tipp[data-tsp]{cursor:pointer}
#wae-panel .wae-tipp[data-tsp]:hover{background:rgba(212,175,55,.05)}
#wae-panel .wae-tipp.aktiv{box-shadow:inset 3px 0 0 #d4af37;background:rgba(212,175,55,.08)}
#wae-panel .wae-hk{accent-color:var(--v);cursor:pointer;margin:0;flex-shrink:0}
#wae-panel .wae-leer{font:400 11.5px/1.5 var(--mono);color:var(--t3);padding:7px 0}
/* Tipps fuer die naechste Ziehung (15.09.2026): eigener Block, gedaempft, keine Haken */
#wae-panel .wae-cap-wartet{margin-top:14px;color:var(--amber)}
#wae-panel .wae-liste-wartet{max-height:220px;border-color:rgba(251,191,36,.25)}
#wae-panel .wae-tipp.wartet{opacity:1}

/* ═══ Tipps hinzufuegen: Prueffenster (Etappe 3b) ═══════════════════
   Bewusst IM Panel statt als Overlay: ein Fenster ueber einem Klappmenue ist
   ein Fenster ueber einem Fenster, und dieselbe Information passt in die
   680 px, die der Bereich ohnehin hat. */
.imp-quelle{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap}
.imp-quelle textarea{flex:1;min-width:220px;background:var(--bg);color:var(--tx);border:1px solid var(--brd);border-radius:6px;padding:7px 9px;font:400 12px/1.5 var(--mono);resize:vertical}
.imp-quelle textarea:focus{outline:none;border-color:var(--brdv)}
.imp-btn{font:500 12px/1 var(--sans);color:var(--t2);background:var(--bg3);border:1px solid var(--brd);border-radius:6px;padding:8px 11px;cursor:pointer;white-space:nowrap}
.imp-btn:hover{color:var(--vl);border-color:var(--brdv)}
.imp-btn.pri{background:var(--vd);border-color:var(--brdv);color:var(--vl);font-weight:600}
.imp-btn:focus-visible{outline:2px solid var(--vl);outline-offset:2px}
#imp-ergebnis{margin-top:10px}

/* ── Direkteingabe (Etappe 3c) ─────────────────────────────────
 * Die Zahlenfelder sehen aus wie die Lottokugeln im Waechter (.wae-kugel) —
 * derselbe Tipp soll ueberall gleich aussehen. Leere Kugeln, die auf ihre
 * Zahl warten, statt einer Formularzeile. */
#imp-hand{margin-bottom:10px}
#imp-hand .imp-h-kopf{font:400 11.5px/1.5 var(--mono);color:var(--t3);margin-bottom:8px}
#imp-hand .imp-h-zahlen{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-bottom:11px}
#imp-hand .imp-h-z{width:34px;height:34px;border-radius:50%;flex-shrink:0;text-align:center;padding:0;border:none;
  font:700 13.5px/1 var(--mono);color:#241a12;
  background:radial-gradient(circle at 33% 28%,#fffdf6 0%,#f0e6cf 42%,#cdbb96 100%);
  box-shadow:inset 0 -3px 6px rgba(90,66,30,.35),0 2px 5px rgba(0,0,0,.45);
  -moz-appearance:textfield;transition:box-shadow .14s}
#imp-hand .imp-h-z::-webkit-outer-spin-button,#imp-hand .imp-h-z::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
#imp-hand .imp-h-z:focus{outline:none;box-shadow:inset 0 -3px 6px rgba(90,66,30,.35),0 0 0 2px var(--brdv),0 2px 5px rgba(0,0,0,.45)}
#imp-hand .imp-h-z.ex{color:#2a1d07;background:radial-gradient(circle at 33% 28%,#ffeeb9 0%,#e8cd7a 45%,#a8842c 100%)}
#imp-hand .imp-h-plus{color:var(--t3);font:400 13px/1 var(--mono);margin:0 2px}
#imp-hand .imp-h-reihe{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:8px}
#imp-hand .imp-h-lbl{font:400 11.5px/1.5 var(--mono);color:var(--t3);min-width:82px}
#imp-ergebnis .imp-h-chip,
#imp-fenster .impf-chip,
#imp-hand .imp-h-chip{border:1px solid var(--brd);border-radius:99px;background:var(--bg3);color:var(--t2);
  font:500 11.5px/1 var(--mono);padding:6px 12px;cursor:pointer;transition:color .14s,border-color .14s,background .14s}
#imp-ergebnis .imp-h-chip:hover,
#imp-fenster .impf-chip:hover,
#imp-hand .imp-h-chip:hover{color:var(--tx);border-color:var(--brdv)}
#imp-ergebnis .imp-h-chip.an,
#imp-fenster .impf-chip.an,
#imp-hand .imp-h-chip.an{color:var(--vl);background:var(--vd);border-color:var(--brdv);font-weight:700}
#imp-hand input[type=date]{border:1px solid var(--brd);border-radius:8px;background:var(--bg3);color:var(--t2);
  font:400 11.5px/1 var(--mono);padding:7px 9px}
#imp-hand input[type=date]:focus{outline:none;border-color:var(--brdv);color:var(--tx)}
#imp-hand input[type=date]::-webkit-calendar-picker-indicator{filter:invert(.8) sepia(.5) saturate(3) hue-rotate(5deg);cursor:pointer}
#imp-hand .imp-h-msg{font:400 11.5px/1.5 var(--mono);color:var(--t3)}
#imp-hand .imp-h-msg.ok{color:var(--green)}
#imp-hand .imp-h-msg.warn{color:var(--amber)}
/* ── Gemeinschaft (Etappe 5) ────────────────────────────────────────────
 * Die sechs Kreisfarben stehen gleichlautend im CHECK der Migration und in
 * kreise.js. Wer hier einen Ton hinzufuegt, muss es dort ebenfalls tun. */
:root{--kf-gold:#d4af37;--kf-tuerkis:#5ec8c0;--kf-rot:#d9785a;
  --kf-gruen:#9ab86a;--kf-violett:#a98cd4;--kf-blau:#6fa8dc}
#gem-body .gem-block{margin-bottom:14px}
/* Der Trenner zwischen oeffentlicher Karte und Spielgruppen. Absichtlich
 * kraeftiger als eine Linie zwischen Zeilen: Es sind zwei verschiedene
 * Oeffentlichkeiten, keine zwei Unterpunkte derselben. */
/* Zwei Karten statt einer Liste mit Zwischenlinie. Der Nutzer las die fuenf
 * Schalter als EINE Gruppe, obwohl zwei die oeffentliche Karte betreffen und
 * drei nur die geschlossene Runde. Eine Linie allein hat das nicht getragen;
 * zwei sichtbar getrennte Flaechen tun es.
 * Der farbige Streifen links unterscheidet die beiden Oeffentlichkeiten:
 * Gold = alle sehen es, Tuerkis = nur die Gruppe. */
#gem-body .gem-bereich{border:1px solid var(--brd);border-radius:11px;
  background:var(--bg3);padding:12px 14px 11px;position:relative;overflow:hidden}
#gem-body .gem-bereich::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px}
#gem-body .gem-oeff::before{background:var(--kf-gold)}
#gem-body .gem-grp::before{background:var(--kf-tuerkis)}
#gem-body .gem-trenner{height:1px;margin:14px 0;
  background:linear-gradient(90deg,transparent,var(--brd) 30%,var(--brd) 70%,transparent)}
#gem-body .gem-liste{margin-top:2px}
#gem-body .gem-zaehler{font:400 11px/1 var(--mono);color:var(--t3);
  text-align:right;margin-bottom:4px}
#gem-body .gem-block .gem-hin{padding:0 0 10px}
#gem-body .gem-h{font:600 11.5px/1.5 var(--mono);color:var(--vl);margin-bottom:8px;
  text-transform:uppercase;letter-spacing:.06em}
#gem-body .gem-zahl{color:var(--t3);font-weight:400;text-transform:none;letter-spacing:0}
#gem-body .gem-hin{font:400 11.5px/1.6 var(--mono);color:var(--t3);padding:8px 0}
#gem-body .gem-hin.warn{color:var(--amber)}
/* Der Hinweis, dass ein Schalter schon speichert, aber noch nicht wirkt.
 * Bernstein, weil es ein Vorbehalt ist -- kein Fehler und keine Nebensache. */
#gem-body .gem-bald{font:400 11px/1.6 var(--mono);color:var(--amber);
  margin-top:9px;padding-top:8px;border-top:1px dashed color-mix(in srgb,var(--amber) 35%,transparent)}
#gem-body .gem-fuss{font:400 11px/1.6 var(--mono);color:var(--t3);margin-top:8px;
  padding-top:7px;border-top:1px solid var(--brd)}
#gem-body .gem-msg{font:400 11.5px/1.5 var(--mono);color:var(--t3);min-height:17px}
#gem-body .gem-msg.ok{color:var(--green)}
#gem-body .gem-msg.warn{color:var(--amber)}
/* Ein Schalter, sein Titel und WARUM er begrenzt ist — der Hinweis steht
 * daneben und nicht in einer Fussnote: Wer eine Einwilligung erteilt, soll
 * ihre Reichweite an derselben Stelle lesen. */
#gem-body .gem-sch{display:grid;grid-template-columns:auto 1fr;gap:2px 9px;
  align-items:start;padding:7px 0;cursor:pointer;border-bottom:1px solid var(--brd)}
#gem-body .gem-sch:last-child{border-bottom:none}
#gem-body .gem-sch input{margin-top:2px;accent-color:var(--v);width:14px;height:14px}
#gem-body .gem-sch-t{font:500 12px/1.4 var(--mono);color:var(--tx)}
#gem-body .gem-sch-h{grid-column:2;font:400 11px/1.5 var(--mono);color:var(--t3)}
#gem-body .gem-punkt{width:9px;height:9px;border-radius:50%;flex-shrink:0;background:var(--kf-gold)}
#gem-body .f-gold{background:var(--kf-gold)}#gem-body .f-tuerkis{background:var(--kf-tuerkis)}
#gem-body .f-rot{background:var(--kf-rot)}#gem-body .f-gruen{background:var(--kf-gruen)}
#gem-body .f-violett{background:var(--kf-violett)}#gem-body .f-blau{background:var(--kf-blau)}
#gem-body .gem-einl,#gem-body .gem-kopf{display:flex;align-items:center;gap:8px;padding:8px 0}
#gem-body .gem-einl{flex-wrap:wrap}
/* Eine Einladung verlangt eine Antwort -- sie darf nicht aussehen wie eine
   Zeile mehr. Deshalb als einziger Block ein eigener Rahmen in Bernstein. */
#gem-body .gem-einl-block{border:1px solid var(--amber);border-radius:9px;
  padding:9px 11px;background:color-mix(in srgb,var(--amber) 7%,transparent)}
#gem-body .gem-einl-block .gem-h{color:var(--amber)}
#gem-body .gem-datum{font:400 10.5px/1 var(--mono);color:var(--t3);margin-left:auto}
/* Das Zeichen im Menue und auf der Abschnittszeile: nur eine Zahl, aber an
   der Stelle, an der man ohne Aufklappen hinsieht. */
.gem-zeichen{display:inline-flex;align-items:center;justify-content:center;
  min-width:16px;height:16px;padding:0 4px;margin-left:7px;border-radius:99px;
  background:var(--amber);color:#151515;font:600 10px/1 var(--mono);vertical-align:middle}
.gem-zeichen[hidden]{display:none}
/* ── Meldungen und Rueckfragen (01.09.2026) ──────────────────────────────
   Ersetzt alert()/confirm(). Absichtlich schlicht: ein Kasten, ein Satz,
   ein Knopf. Kein Titel — „Achtung!" ueber einer Meldung sagt nichts, was
   der Satz darunter nicht schon sagt. */
.lu-dlg-hg{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;
  justify-content:center;padding:20px;background:rgba(8,6,4,.62);backdrop-filter:blur(2px)}
.lu-dlg{max-width:min(460px,92vw);border:1px solid var(--brdv);border-radius:12px;
  background:var(--bg2);box-shadow:0 18px 60px rgba(0,0,0,.6);padding:20px 22px 16px}
.lu-dlg-txt{font:400 13px/1.6 var(--mono);color:var(--tx);white-space:normal}
.lu-dlg-btns{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.lu-dlg-b{cursor:pointer;border:1px solid var(--brd);border-radius:8px;
  background:transparent;color:var(--t2);font:400 12px/1 var(--mono);padding:9px 18px}
.lu-dlg-b:hover{border-color:var(--brdv);color:var(--tx)}
.lu-dlg-b.pri{border-color:var(--vl);color:var(--vl)}
.lu-dlg-b.pri:hover{background:rgba(255,255,255,.05)}
.lu-dlg-b:focus-visible{outline:2px solid var(--vl);outline-offset:2px}
/* ── Spielgruppe am Tipp (31.08.2026) ────────────────────────────────────
   Derselbe Punkt und dieselben sechs Farben wie im Gemeinschafts-Abschnitt:
   Wer „Familie" dort tuerkis gesehen hat, soll sie hier wiedererkennen. */
.tg-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:2px 0 8px}
.tg-lab{font:400 11px/1 var(--mono);color:var(--t3);margin-right:2px}
.tg-pill{display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  border:1px solid var(--brd);border-radius:99px;padding:5px 11px;background:transparent;
  color:var(--t2);font:400 11.5px/1 var(--mono)}
.tg-pill:hover{border-color:var(--brdv);color:var(--tx)}
.tg-pill.an{border-color:var(--vl);color:var(--vl);background:rgba(255,255,255,.04)}
.tg-pill .gem-punkt{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.tg-pill .f-gold{background:var(--kf-gold)}.tg-pill .f-tuerkis{background:var(--kf-tuerkis)}
.tg-pill .f-rot{background:var(--kf-rot)}.tg-pill .f-gruen{background:var(--kf-gruen)}
.tg-pill .f-violett{background:var(--kf-violett)}.tg-pill .f-blau{background:var(--kf-blau)}
.tg-n{color:var(--t3);font-size:10.5px}
.tg-hin{font:400 11px/1.5 var(--mono);color:var(--t3);margin:-4px 0 8px}
.tg-filter{border-bottom:1px dotted var(--brd);padding-bottom:8px}
/* Das Auswahlfeld an der Tippzeile bleibt klein — es ist eine Beschriftung,
   die man aendern kann, kein Formular. */
.tg-sel{border:1px solid var(--brd);border-radius:99px;background:var(--bg3);color:var(--t2);
  font:400 10.5px/1 var(--mono);padding:3px 6px;max-width:130px;cursor:pointer}
.tg-sel:hover{border-color:var(--brdv);color:var(--tx)}
/* Das Kopierzeichen ⧉ steht neben dem Ziel-Feld und ist absichtlich schmal:
   Es legt etwas dazu, waehrend das Feld links davon verschiebt. */
.tg-kop{border:1px solid var(--brd);border-radius:99px;background:var(--bg3);color:var(--t3);
  font:400 10.5px/1 var(--mono);padding:3px 4px;cursor:pointer;max-width:46px}
.tg-kop:hover{border-color:var(--brdv);color:var(--tx)}
/* Oeffentlich bekommt keinen Kreispunkt, sondern eine eigene Kontur --
   es ist kein weiterer Kreis, sondern das Gegenteil einer Runde. */
.tg-pill.tg-oeff{border-style:dashed}
.tg-pill.tg-oeff.an{border-style:solid}
/* ── „Meine Tipps": zweizeilige Zeile (31.08.2026) ────────────────────────
   Zeile 1 ist die Auskunft, Zeile 2 sind die Werkzeuge. Vorher stand beides
   nebeneinander und brach an wechselnden Stellen um, sobald Ziel-Feld und
   Kopierzeichen dazukamen. */
#played-list .pl-kopf{color:var(--vl);font:400 12px/1 var(--mono);letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:8px;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
/* Das Sortierfeld rechts in der Kopfzeile (07.09.2026): dieselbe Form wie die
   Auswahlfelder der Zeilen, aber ohne Grossschrift -- es ist keine Ueberschrift. */
#played-list .pl-sort{text-transform:none;letter-spacing:0;max-width:190px}
/* „Alle" linksbuendig mit den Haekchen darunter, nicht rechts aussen: Es
   gehoert zu der Spalte, die es schaltet. */
#played-list .pl-alle{display:flex;align-items:center;gap:8px;cursor:pointer;
  padding:2px 0 7px;border-bottom:1px solid var(--brd);margin-bottom:2px;
  font:400 12px/1 var(--sans);color:var(--t2)}
#played-list .pl-alle input{cursor:pointer;margin:0;flex-shrink:0}
/* Der Trennstrich war 1px gepunktet auf rgba(214,180,110,.14) -- bei den jetzt
   zweizeiligen Eintraegen liefen die Tipps optisch ineinander. Durchgezogen und
   deutlich kraeftiger, dazu mehr Luft zwischen den Zeilen. */
#played-list .pl-z{display:flex;align-items:flex-start;gap:8px;padding:10px 0;
  border-bottom:1px solid rgba(214,180,110,.30);min-width:0}
#played-list .pl-z:last-child{border-bottom:0}
#played-list .pl-cb{cursor:pointer;margin:2px 0 0;flex-shrink:0}
/* Haken + laufende Nummer untereinander (05.09.2026) */
#played-list .pl-links{display:flex;flex-direction:column;align-items:center;justify-content:space-between;align-self:stretch;flex-shrink:0;width:22px}
/* Die Nummer groesser und auf Hoehe der zweiten Zeile (Knopfzeile) vertikal mittig (05.09.2026) */
#played-list .pl-nr{display:flex;align-items:center;height:26px;font:600 12.5px/1 var(--mono);color:var(--t2);letter-spacing:.02em}
#played-list .pl-in{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
#played-list .pl-1{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;min-width:0}
#played-list .pl-num{color:var(--green);font:400 12.5px/1.35 var(--mono);word-break:break-word}
#played-list .pl-meta{color:var(--t3);font:400 12px/1.35 var(--mono);white-space:nowrap}
/* Kein Umbruch mehr (Wunsch 03.09.2026). Die Auswahlfelder duerfen schrumpfen
   (min-width:0), die Knoepfe nicht -- so bleibt die Zeile auch im schmalen
   Fenster einzeilig, statt die Knoepfe unter den Text zu schieben. */
#played-list .pl-2{display:flex;align-items:center;gap:6px;flex-wrap:nowrap}
#played-list .pl-2 select{min-width:0;flex:0 1 auto}
#played-list .pl-2 button{flex-shrink:0}
#played-list .pl-x{cursor:pointer;color:var(--t3);padding:2px 6px;flex-shrink:0;line-height:1.2}
#played-list .pl-x:hover{color:var(--red)}
/* Tipps der Mitspieler: gleiche Form, aber sichtbar nicht die eigenen —
   kein Haekchen, kein Ziel-Feld, kein Loeschen. Der Platz des Haekchens
   bleibt frei, damit die Zeilen buendig untereinander stehen. */
#played-list .pl-cb-leer{width:13px;flex-shrink:0}
#played-list .pl-fremd .pl-num{opacity:.85}
#played-list .pl-wer{font:400 10.5px/1 var(--mono);border:1px solid;border-radius:99px;padding:3px 8px}
/* Die Tippliste in der Gruppe. Eigener Rahmen, weil sie etwas anderes ist als
   die Kartei darueber: dort stehen Personen, hier stehen Tipps. */
#gem-body .tg-tipps{border:1px solid var(--brd);border-radius:9px;padding:9px 11px;margin:10px 0 4px}
#gem-body .tg-tipps-h{font:500 11px/1 var(--mono);color:var(--vl);letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:7px}
#gem-body .tg-tipp{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;
  padding:4px 0;border-bottom:1px dotted var(--brd)}
#gem-body .tg-tipp:last-of-type{border-bottom:none}
#gem-body .tg-t-z{color:var(--green);font:400 12px/1.35 var(--mono);word-break:break-word;flex:1;min-width:120px}
#gem-body .tg-tipp[data-q]{cursor:pointer;border-radius:5px}
#gem-body .tg-tipp[data-q]:hover{background:rgba(232,205,122,.06)}
#gem-body .tg-t-z .qs-tag{font-size:10px;vertical-align:1px}
#gem-body .tg-t-m{color:var(--t3);font:400 11px/1 var(--mono);white-space:nowrap}
#gem-body .tg-t-w{color:var(--t2);font:400 10.5px/1 var(--mono);border:1px solid var(--brd);
  border-radius:99px;padding:3px 8px}
/* Die Einladungszeile unter der Kopfzeile. Bernstein wie das Zeichen, damit
   beides als dieselbe Sache gelesen wird -- und anklickbar, weil eine Meldung,
   die nur meldet, den Weg noch nicht zeigt. */
#gem-einl-bar{display:flex;align-items:center;justify-content:center;gap:10px;
  cursor:pointer;padding:7px 12px;border-bottom:1px solid var(--amber);
  background:color-mix(in srgb,var(--amber) 12%,transparent);
  font:500 11.5px/1.4 var(--mono);color:var(--amber);text-align:center}
#gem-einl-bar:hover{background:color-mix(in srgb,var(--amber) 20%,transparent)}
#gem-einl-bar[hidden]{display:none}
#gem-body .gem-kopf{cursor:pointer;border-bottom:1px solid var(--brd)}
#gem-body .gem-kreis.auf .gem-kopf{border-bottom-color:var(--brdv)}
#gem-body .gem-name{font:500 12px/1.4 var(--mono);color:var(--tx)}
#gem-body .gem-anz{font:400 11.5px/1 var(--mono);color:var(--t3);margin-left:-4px}
#gem-body .gem-tag,#gem-body .gem-rolle{font:400 10.5px/1 var(--mono);color:var(--t3);
  border:1px solid var(--brd);border-radius:99px;padding:3px 8px}
#gem-body .gem-rolle{color:var(--vl);border-color:var(--brdv)}
#gem-body .gem-offen{font:400 10.5px/1 var(--mono);color:var(--amber);border:1px solid var(--amber);border-radius:99px;padding:3px 8px;margin-left:auto}
#gem-body .gem-kartei{padding:2px 0 10px}

/* ── Fenster „Kombinationen des Systemscheins" (02.09.2026) ───────────────
   Ein System 12 sind 924 Zeilen. Deshalb ein eigenes Fenster mit eigenem
   Bildlauf und nicht eine Aufklapp-Zeile in der Tippliste -- die waere danach
   nicht mehr benutzbar. */
/* Farbwahl im Systemschein-Formular (02.09.2026). Runde Farbtupfer, der
   gewaehlte bekommt einen Ring — dieselbe Sprache wie der Farbwaehler einer
   Spielgruppe, damit man sie als dasselbe liest. */
/* Das Farbfeld an der Tippzeile. Klein wie die zwei Auswahlfelder daneben —
   es ist dieselbe Art Einstellung, nicht eine wichtigere. */
/* Die Auslassungs-Zeile in der Quadranten-Tabelle (02.09.2026). Sie ist kein
   Datensatz — also mittig, gedaempft, mit gestrichelter Kante und ohne
   Zeigerwechsel. Sie soll die Luecke ZEIGEN, nicht sie fuellen. */
.tips-luecke td{text-align:center;padding:7px 0;color:var(--t3);
  font:400 11px/1 var(--mono);letter-spacing:.04em;background:rgba(255,255,255,.02);
  border-top:1px dashed var(--brdv);border-bottom:1px dashed var(--brdv);cursor:default}
.tg-farbe{background:var(--bg);border:1px solid var(--brd);border-radius:5px;
  color:var(--t2);font:400 11px/1 var(--mono);padding:3px 4px;max-width:92px;cursor:pointer}
.tg-farbe:hover{border-color:var(--brdv)}
.imp-s-farbe{width:20px;height:20px;border-radius:50%;border:1px solid var(--brd);
  cursor:pointer;padding:0;flex-shrink:0;transition:box-shadow .12s,border-color .12s}
.imp-s-farbe:hover{border-color:var(--vl)}
.imp-s-farbe.an{border-color:var(--vl);box-shadow:0 0 0 2px rgba(212,175,55,.45)}
.imp-s-farbe.vorgabe{width:auto;border-radius:99px;padding:3px 10px;background:var(--bg3);
  color:var(--t2);font:400 11px/1 var(--mono)}
.pl-kombi{background:var(--bg3);border:1px solid var(--brd);border-radius:5px;
  padding:3px 9px;color:var(--t2);font:400 11.5px/1 var(--mono);cursor:pointer;
  transition:border-color .12s,color .12s,background .12s}
.pl-kombi:hover{border-color:var(--vl);color:var(--vl);background:rgba(212,175,55,.10)}

.kb-hg{position:fixed;inset:0;z-index:9600;display:flex;align-items:center;
  justify-content:center;background:rgba(0,0,0,.62);backdrop-filter:blur(2px);padding:24px}
.kb-win{display:flex;flex-direction:column;width:min(560px,94vw);max-height:86vh;
  background:var(--bg2);border:1px solid var(--brdv);border-radius:11px;
  box-shadow:0 18px 60px rgba(0,0,0,.6);overflow:hidden}
.kb-hd{display:flex;align-items:center;gap:10px;padding:12px 14px;
  border-bottom:1px solid var(--brd);background:var(--bg3)}
.kb-ttl{flex:1;font:600 13px/1.3 var(--mono);color:var(--vl);letter-spacing:.04em}
.kb-x{cursor:pointer;color:var(--t3);font-size:14px;line-height:1;padding:2px 4px}
.kb-x:hover{color:var(--tx)}
.kb-sub{padding:9px 14px;font:400 11.5px/1.45 var(--mono);color:var(--t3);
  border-bottom:1px solid var(--brd);word-break:break-word}
/* Der Bildlauf sitzt HIER, nicht am Fenster: Kopf, Unterzeile und die
   Export-Knoepfe sollen stehen bleiben, waehrend die Liste laeuft. */
.kb-body{flex:1;min-height:0;overflow:auto;padding:0 4px}
.kb-tab{width:100%;border-collapse:collapse;font:400 12px/1.45 var(--mono)}
.kb-tab th{position:sticky;top:0;background:var(--bg2);color:var(--t3);
  font-weight:500;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;
  text-align:left;padding:8px 10px;border-bottom:1px solid var(--brd);z-index:1}
.kb-tab td{padding:5px 10px;border-bottom:1px solid rgba(214,180,110,.07)}
.kb-tab tr:last-child td{border-bottom:none}
.kb-n{color:var(--t3);width:48px;text-align:right}
.kb-t{color:var(--green)}
.kb-s{color:var(--vl);text-align:right;white-space:nowrap}
.kb-ft{display:flex;align-items:center;gap:9px;padding:11px 14px;
  border-top:1px solid var(--brd);background:var(--bg3);flex-wrap:wrap}
/* .btn-g laeuft im Menue auf volle Breite. Hier stehen zwei Knoepfe
   nebeneinander -- volle Breite haette daraus zwei Zeilen gemacht. */
.kb-ft .btn-g{width:auto;flex:0 0 auto;padding:6px 14px}
.kb-msg{flex:1;min-width:0;font:400 11px/1.35 var(--mono);color:var(--green);
  overflow:hidden;text-overflow:ellipsis}

/* ── Bild-Anhang im Kontakt-Fenster (01.09.2026) ──────────────────────── */
.contact-img{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:2px 0 8px}
.contact-img-btn{background:var(--bg3);border:1px solid var(--brd);border-radius:6px;
  padding:6px 11px;color:var(--t2);font:400 12px/1 var(--mono);cursor:pointer;
  transition:border-color .12s,color .12s,background .12s}
.contact-img-btn:hover{border-color:var(--vl);color:var(--vl);background:rgba(212,175,55,.10)}
.contact-img-hint{font:400 11px/1.3 var(--mono);color:var(--t3)}
/* Die Vorschau ist bewusst gross genug, um zu erkennen WAS man anhaengt --
   ein 24-px-Kaestchen beantwortet die Frage nicht. */
.contact-img-prev{display:flex;align-items:center;gap:10px;margin:0 0 10px;
  padding:8px;border:1px solid var(--brdv);border-radius:7px;background:rgba(212,175,55,.06)}
.contact-img-prev[hidden]{display:none}
.contact-img-prev img{width:64px;height:64px;object-fit:cover;border-radius:5px;
  border:1px solid var(--brd);flex-shrink:0;background:var(--bg)}
.contact-img-name{flex:1;min-width:0;font:400 11.5px/1.35 var(--mono);color:var(--t2);
  overflow:hidden;text-overflow:ellipsis}
.contact-img-x{width:24px;height:24px;flex-shrink:0;display:inline-flex;align-items:center;
  justify-content:center;background:none;border:1px solid transparent;border-radius:5px;
  color:var(--t3);font:400 12px/1 var(--mono);cursor:pointer;transition:all .12s}
.contact-img-x:hover{color:#f87171;border-color:rgba(248,113,113,.45);background:rgba(248,113,113,.10)}

/* ── Einen Tipp aus der Runde nehmen (01.09.2026) ─────────────────────────
   Das X steht rechts aussen und ist im Ruhezustand zurueckhaltend: Es soll
   erreichbar sein, aber nicht wie der Zweck der Zeile aussehen. Erst beim
   Ueberfahren wird es rot -- eine Handlung, die etwas wegnimmt, darf sich
   ankuendigen. */
#gem-body .tg-weg{margin-left:auto;flex-shrink:0;width:20px;height:20px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:none;border:1px solid transparent;border-radius:5px;
  color:var(--t3);font:400 11px/1 var(--mono);cursor:pointer;
  opacity:.45;transition:opacity .12s,color .12s,background .12s,border-color .12s}
#gem-body .tg-tipp:hover .tg-weg{opacity:1}
#gem-body .tg-weg:hover{color:#f87171;border-color:rgba(248,113,113,.45);
  background:rgba(248,113,113,.10)}
/* Platzhalter an fremden Zeilen: ohne ihn ruecken deren Spalten nach rechts
   und die Liste steht nicht mehr in einer Flucht. */
#gem-body .tg-weg-leer{margin-left:auto;width:20px;flex-shrink:0}

/* ── Die Spielrunden hervorheben (01.09.2026) ─────────────────────────────
   Gewuenscht: groesserer Text, abgesetzter Hintergrund. Die Runde ist die
   Ueberschrift ueber allem, was darunter steht -- sie soll nicht so aussehen
   wie eine der Zeilen in ihrem Inneren. */
#gem-body .gem-acc-in .gem-acc-item>.gem-acc-h{padding:10px 10px;
  background:rgba(255,255,255,.055);border-radius:6px}
#gem-body .gem-acc-in .gem-acc-item>.gem-acc-h .gem-name{font-size:13.5px;font-weight:600;
  color:var(--tx);letter-spacing:.02em}
#gem-body .gem-acc-in .gem-acc-item>.gem-acc-h .gem-punkt{width:11px;height:11px}
/* Aufgeklappt traegt die Kopfzeile die Farbe der Runde, nicht das Haus-Gold:
   Wer drei Runden untereinander hat, erkennt so ohne Lesen, welche offen ist. */
#gem-body .gem-acc-in .gem-acc-item.auf>.gem-acc-h{
  background:color-mix(in srgb, var(--k, var(--kf-gold)) 16%, transparent);
  border-radius:6px 6px 0 0}
#gem-body .gem-acc-in .gem-acc-item.auf>.gem-acc-h .gem-name{color:var(--k, var(--kf-gold))}

/* ── Was gehoert noch zu dieser Runde? ────────────────────────────────────
   Gemeldet am 01.09.2026: „wenn ich Familie oeffne, muss ich optisch immer
   suchen, was noch dazugehoert und was nicht mehr." Der aufgeklappte Inhalt
   bekommt deshalb einen Rand in der Farbe der Runde und einen abgesetzten
   Grund -- er ist damit ein sichtbarer Block mit Anfang und Ende, keine
   Fortsetzung der Liste. */
#gem-body .gem-acc-in .gem-acc-item.auf>.gem-acc-bd{
  border-left:3px solid var(--k, var(--kf-gold));
  border-bottom:1px solid var(--brd);
  border-radius:0 0 6px 6px;
  background:rgba(255,255,255,.022);
  margin-bottom:10px}
#gem-body .gem-acc-in .gem-acc-item.auf>.gem-acc-bd>.gem-acc-in{padding:8px 10px 12px}
body.light #gem-body .gem-acc-in .gem-acc-item>.gem-acc-h{background:rgba(0,0,0,.035)}
body.light #gem-body .gem-acc-in .gem-acc-item.auf>.gem-acc-bd{background:rgba(0,0,0,.018)}

/* ── „Meine Lottowelt": hellere Kopfzeilen (01.09.2026) ───────────────────
   Gewuenscht: die Kopfzeilen etwas heller — die aeusseren wie die inneren.
   var(--bg3) (#241a12) stand so dicht am Fensterhintergrund (#140f0a), dass
   die Kopfzeile eher als Rahmen denn als Zeile las.

   Bewusst NUR in #d-export: `.acc-h` gehoert allen Menues (Filter,
   Analysieren, Erzeugen …). Ein Griff an die Klasse selbst haette jedes
   Menue mitgezogen, und danach waere es keine Entscheidung mehr gewesen,
   sondern ein Nebeneffekt.

   Und nur im dunklen Modus: Im hellen ist --bg3 fast Weiss, „heller" gaebe
   es dort nicht — die Zeile wuerde nur verschwinden. */
#d-export > .acc-wrap > .acc-item > .acc-h{background:#332619}
#d-export > .acc-wrap > .acc-item.open > .acc-h{background:rgba(212,175,55,.13)}
body.light #d-export > .acc-wrap > .acc-item > .acc-h{background:var(--bg3)}
body.light #d-export > .acc-wrap > .acc-item.open > .acc-h{background:rgba(212,175,55,.09)}

/* Dieselbe Aufhellung eine Ebene tiefer: die Kopfzeilen IM Akkordeon
   („Meine Spielgruppen", „AleaMatrix-User") und die der einzelnen
   Spielgruppen darin. Je tiefer, desto zurueckhaltender — sonst schreien
   drei Ebenen gleich laut. */
#gem-body .gem-acc>.gem-acc-item>.gem-acc-h{background:rgba(255,255,255,.060)}
#gem-body .gem-acc>.gem-acc-item.auf>.gem-acc-h{background:rgba(212,175,55,.13)}
#gem-body .gem-acc-in .gem-acc-item>.gem-acc-h{background:rgba(255,255,255,.042)}
body.light #gem-body .gem-acc>.gem-acc-item>.gem-acc-h{background:rgba(0,0,0,.035)}
body.light #gem-body .gem-acc-in .gem-acc-item>.gem-acc-h{background:rgba(0,0,0,.022)}
/* Der eigene Punkt in der Liste der gemeinsamen Karte: gleiche Zeile, nur
   der Vermerk rechts. Mehr Auszeichnung braucht es nicht - man sucht ihn,
   man muss nicht davor gewarnt werden. */
#gem-body .tg-tipp.tg-mein .tg-t-w{color:var(--vl)}
/* Fremde Punkte tragen das Rosa der gemeinsamen Karte -- dieselbe Farbe wie
   auf der Karte selbst, damit Liste und Karte als dieselbe Ebene lesbar sind. */
#gem-body .tg-oeffliste .tg-tipp:not(.tg-mein) .tg-t-w{color:#f472b6}

/* ── Akkordeon im Abschnitt „AleaMatrix-User" (01.09.2026) ────────────────
   Zwei Ebenen: aussen „Meine Spielgruppen" / „AleaMatrix-User", innen je
   eine Spielgruppe.

   ⚠ EIGENE Klassen statt der `.acc-*` des Hauptmenues, und das mit Absicht:
   Dieser Abschnitt steckt selbst in einem `.acc-item`, und `accToggle()`
   raeumt mit `scope.querySelectorAll('.acc-item')` ALLE Nachfahren mit auf.
   Mit denselben Klassen haette ein Klick auf einen anderen Menuepunkt die
   Sektionen hier stumm zugeklappt. */
#gem-body .gem-acc{display:flex;flex-direction:column;gap:8px}
#gem-body .gem-acc-item{border:1px solid var(--brd);border-radius:7px;overflow:hidden;
  background:rgba(255,255,255,.015)}
#gem-body .gem-acc-h{display:flex;align-items:center;gap:9px;padding:10px 12px;
  cursor:pointer;user-select:none;font:500 12px/1.4 var(--mono);color:var(--t2);
  transition:background .12s,color .12s,border-color .12s}
#gem-body .gem-acc-h:hover{background:rgba(212,175,55,.10);color:var(--tx)}
#gem-body .gem-acc-item.auf>.gem-acc-h{background:rgba(212,175,55,.09);color:var(--vl);
  border-bottom:1px solid var(--brdv)}
#gem-body .gem-acc-ic{flex-shrink:0;font-size:13px}
#gem-body .gem-acc-ttl{flex:1;min-width:0}
#gem-body .gem-acc-arr{width:11px;height:11px;flex-shrink:0;color:var(--t3);
  transition:transform .18s ease}
#gem-body .gem-acc-item.auf>.gem-acc-h .gem-acc-arr{transform:rotate(90deg);color:var(--vl)}
/* Zu = weg. Kein max-height-Trick: Der Inhalt wird bei jedem Klick neu
   gezeichnet, eine Hoehen-Animation haette nichts, worauf sie sich bezieht. */
#gem-body .gem-acc-item:not(.auf)>.gem-acc-bd{display:none}
#gem-body .gem-acc-in{padding:10px 12px 12px}

/* Die inneren Spielgruppen sitzen schon in einem Kasten - ein zweiter Rahmen
   um jede Gruppe waere Rahmen im Rahmen. Nur eine Trennlinie. */
#gem-body .gem-acc-in .gem-acc-item{border:none;border-radius:0;background:none;
  border-top:1px solid var(--brd)}
#gem-body .gem-acc-in .gem-acc-item:first-of-type{border-top:none}
#gem-body .gem-acc-in .gem-acc-in{padding:2px 0 10px}

/* Erste Zeile der Spielgruppen: der Knopf zum Gruenden, volle Breite -
   die Handlung, mit der hier alles anfaengt, stand vorher als letzte Zeile
   unter der Liste. */
#gem-body .gem-neu-zeile{display:flex;margin-bottom:10px}
#gem-body .gem-neu-zeile .gem-neu-auf{width:100%;justify-content:center;text-align:center}
#gem-body .gem-kreis:not(.auf) .gem-kartei{display:none}
/* Vier Spalten wie die Kartei Felder hat: Name · Aufgabe · Anteil · frei. */
#gem-body .gem-z{display:grid;grid-template-columns:1.3fr 1fr .7fr 1.6fr;gap:5px;
  align-items:center;padding:3px 0}
#gem-body .gem-zk{font:400 10.5px/1 var(--mono);color:var(--t3);padding-top:8px}
/* War auf .62 gedimmt. Falsch herum: Die offene Einladung ist genau die
   Zeile, die auffallen soll -- nicht die, die zurueckweicht. */
#gem-body .gem-z.wartet{opacity:1}
#gem-body .gem-z.wartet .gem-kf{border-color:var(--amber)}
#gem-body .gem-z.wartet .gem-kf::placeholder{color:var(--amber);opacity:.75}
#gem-body .gem-wartet{grid-column:1/-1;font:400 10.5px/1.5 var(--mono);color:var(--amber)}
#gem-body .gem-kf,#gem-body .gem-neu input{border:1px solid var(--brd);border-radius:7px;
  background:var(--bg3);color:var(--tx);font:400 11.5px/1 var(--mono);padding:6px 8px;min-width:0}
#gem-body .gem-kf:focus,#gem-body .gem-neu input:focus{outline:none;border-color:var(--brdv)}
#gem-body .gem-kw{font:400 11.5px/1.5 var(--mono);color:var(--t2);padding:6px 0}
#gem-body .gem-neu{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:10px}
#gem-body .gem-neu input[type=text]{flex:1;min-width:130px}
#gem-body .gem-kd{width:110px}
#gem-body .gem-gem{display:flex;align-items:center;gap:5px;font:400 11px/1 var(--mono);color:var(--t3);cursor:pointer}
#gem-body .gem-gem input{accent-color:var(--v)}
#gem-body .gem-farben{display:flex;gap:4px}
/* Die Zeile zum UMfaerben einer bestehenden Runde. Eigene Klasse, damit
   sie nicht am Klick-Haken des Gruendungs-Formulars haengt. */
#gem-body .gem-farbzeile{display:flex;align-items:center;gap:8px;margin-top:10px}
#gem-body .gem-umfarbe{width:19px;height:19px;border-radius:50%;border:2px solid transparent;
  cursor:pointer;padding:0;transition:transform .12s}
#gem-body .gem-umfarbe:hover{transform:scale(1.12)}
#gem-body .gem-umfarbe.an{border-color:var(--tx)}
/* Schon von einer anderen Runde belegt -- gekennzeichnet, nicht gesperrt:
   Wer in zehn Kreisen ist, hat mehr Kreise als Farben. */
#gem-body .gem-umfarbe.belegt{opacity:.42}
#gem-body .gem-umfarbe.belegt:hover{opacity:.75}
#gem-body .gem-umfarbe.f-gold{background:var(--kf-gold)}#gem-body .gem-umfarbe.f-tuerkis{background:var(--kf-tuerkis)}
#gem-body .gem-umfarbe.f-rot{background:var(--kf-rot)}#gem-body .gem-umfarbe.f-gruen{background:var(--kf-gruen)}
#gem-body .gem-umfarbe.f-violett{background:var(--kf-violett)}#gem-body .gem-umfarbe.f-blau{background:var(--kf-blau)}
#gem-body .gem-farbe{width:19px;height:19px;border-radius:50%;border:2px solid transparent;
  cursor:pointer;padding:0;transition:border-color .14s,transform .14s}
#gem-body .gem-farbe:hover{transform:scale(1.12)}
#gem-body .gem-farbe.an{border-color:var(--tx)}
#gem-body .gem-btn{border:1px solid var(--brd);border-radius:8px;background:transparent;
  color:var(--t2);font:500 11.5px/1 var(--mono);padding:7px 12px;cursor:pointer;
  transition:color .14s,border-color .14s,background .14s}
#gem-body .gem-btn:hover{color:var(--tx);border-color:var(--brdv)}
#gem-body .gem-btn.pri{color:var(--vl);background:var(--vd);border-color:var(--brdv)}
#gem-body .gem-btn.weg{color:var(--red);border-color:color-mix(in srgb,var(--red) 40%,var(--brd))}
/* Reiter Einzeltipp | Systemschein (Etappe 4). Nur sichtbar, wo die
 * Lotterie Systemscheine anbietet. */
#imp-hand .imp-h-reiter-leiste{display:flex;gap:2px;margin-bottom:11px;border-bottom:1px solid var(--brd)}
#imp-hand .imp-h-reiter{border:none;background:transparent;color:var(--t3);cursor:pointer;
  font:500 11.5px/1 var(--mono);padding:8px 13px;border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color .14s,border-color .14s}
#imp-hand .imp-h-reiter:hover{color:var(--tx)}
#imp-hand .imp-h-reiter.an{color:var(--vl);border-bottom-color:var(--v)}
#imp-hand .imp-s-zahl{font:600 11.5px/1 var(--mono);color:var(--t2)}
/* Die Vorschau ist keine Tabelle, sondern eine Karte: Der Satz darunter
 * ist die eigentliche Aussage, die Zahlen sind sein Beleg. */
#imp-hand .imp-s-karte{border:1px solid var(--brd);border-radius:10px;background:var(--bg3);
  padding:11px 13px;margin:4px 0 11px}
#imp-hand .imp-s-z{display:flex;justify-content:space-between;gap:14px;font:400 11.5px/1.9 var(--mono);color:var(--t3)}
#imp-hand .imp-s-z b{color:var(--tx);font-weight:600;text-align:right}
#imp-hand .imp-s-satz{margin-top:9px;padding-top:9px;border-top:1px solid var(--brd);
  font:400 11.5px/1.65 var(--mono);color:var(--t2)}
/* Die Datumsfrage beim Import (30.08.2026). Sie steht ZWISCHEN Vorschau und
 * Knoepfen und ist gerahmt: Sie ist keine Randnotiz, sondern eine Bedingung —
 * das Uebernehmen bleibt gesperrt, bis sie beantwortet ist. */
#imp-ergebnis .imp-kein-datum{border:1px solid var(--brdv);border-radius:10px;
  background:var(--bg3);padding:11px 13px;margin:10px 0}
#imp-ergebnis .imp-kd-t{font:600 11.5px/1.5 var(--mono);color:var(--vl);margin-bottom:8px}
#imp-ergebnis .imp-kd-h{font:400 11px/1.6 var(--mono);color:var(--t3);margin-top:8px;
  padding-top:8px;border-top:1px solid var(--brd)}
#imp-ergebnis .imp-btn.pri[disabled]{opacity:.45;cursor:not-allowed}
#imp-ergebnis .imp-h-reihe{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:7px}
#imp-ergebnis .imp-h-reihe:last-child{margin-bottom:0}

/* ── Import-Fenster: ALLE Zeilen (30.08.2026) ───────────────────────
 * Drei Zeilen Vorschau sind bei 5 000 Zeilen keine Vorschau. Das Fenster hat
 * eine eigene Ebene, weil die Liste hoeher wird als das Klappmenue. */
#imp-fenster{position:fixed;inset:0;z-index:2400;display:flex;align-items:center;
  justify-content:center;background:rgba(10,7,4,.72);backdrop-filter:blur(2px);padding:18px}
#imp-fenster .impf-box{width:min(880px,96vw);max-height:88vh;display:flex;flex-direction:column;
  background:var(--bg2);border:1px solid var(--brdv);border-radius:14px;
  box-shadow:0 18px 60px rgba(0,0,0,.6);overflow:hidden}
#imp-fenster .impf-kopf{display:flex;align-items:center;justify-content:space-between;
  padding:13px 16px;border-bottom:1px solid var(--brd)}
#imp-fenster .impf-titel{font:600 13px/1.4 var(--mono);color:var(--vl);
  text-transform:uppercase;letter-spacing:.06em}
#imp-fenster .impf-x{border:none;background:transparent;color:var(--t3);font-size:15px;
  cursor:pointer;padding:4px 8px;border-radius:6px}
#imp-fenster .impf-x:hover{color:var(--tx);background:var(--bg3)}
#imp-fenster .impf-summe{display:flex;flex-wrap:wrap;gap:5px 18px;padding:11px 16px;
  font:400 11.5px/1.6 var(--mono);color:var(--t3);border-bottom:1px solid var(--brd)}
#imp-fenster .impf-summe .warn{color:var(--amber)}
#imp-fenster .impf-datum{padding:12px 16px;border-bottom:1px solid var(--brd);background:var(--bg3)}
#imp-fenster .impf-dt{font:600 11.5px/1.5 var(--mono);color:var(--vl);margin-bottom:8px}
#imp-fenster .impf-wahl{display:flex;flex-wrap:wrap;gap:6px}
#imp-fenster .impf-dz{margin-top:8px}
#imp-fenster .impf-dz input[type=date]{border:1px solid var(--brdv);border-radius:8px;
  background:var(--bg2);color:var(--tx);font:400 11.5px/1 var(--mono);padding:7px 9px}
/* Der Anker: welcher Tipp traegt das Datum. Eine Zeile, damit Frage,
 * Antwort und Datum zusammen gelesen werden. */
#imp-fenster .impf-anker{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:9px}
/* BEFUND 31.08.2026: Ohne diese Zeile ueberfaehrt display:flex das
 * hidden-Attribut, und die Ankerzeile stand IMMER da -- auch ohne dass
 * „Datum vom System vergeben" gewaehlt war. Jede Regel, die display setzt,
 * braucht diesen Gegenpart. */
#imp-fenster .impf-anker[hidden]{display:none}
#imp-fenster .impf-wahl[hidden],#imp-fenster .impf-summe[hidden]{display:none}
#imp-fenster .impf-al{font:400 11.5px/1.5 var(--mono);color:var(--t3);margin-right:3px}
#imp-fenster .impf-anker input[type=date]{border:1px solid var(--brdv);border-radius:8px;
  background:var(--bg2);color:var(--tx);font:400 11.5px/1 var(--mono);padding:7px 9px}
#imp-fenster .impf-dh{font:400 11px/1.6 var(--mono);color:var(--t3);margin-top:8px}
/* Die Tabelle traegt den Bildlauf, nicht das Fenster — Kopf und Fuss bleiben. */
#imp-fenster .impf-tabelle{flex:1;overflow-y:auto;padding:0 16px}
#imp-fenster .impf-z{display:grid;grid-template-columns:26px 62px 1fr 104px 1fr;gap:9px;
  align-items:center;padding:5px 0;border-bottom:1px solid var(--brd);
  font:400 11.5px/1.5 var(--mono);color:var(--t2)}
#imp-fenster .impf-zk{position:sticky;top:0;background:var(--bg2);z-index:1;color:var(--t3);
  font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;padding:9px 0}
#imp-fenster .impf-z.bad{color:var(--t3)}
#imp-fenster .impf-roh{color:var(--t3)}
#imp-fenster .impf-grund{color:var(--amber)}
/* Haekchen je Zeile: Der Mensch entscheidet nach Sichtpruefung, was
 * hereinkommt — nicht die Software allein. */
#imp-fenster .impf-hk,#imp-fenster #impf-alle{accent-color:var(--v);width:14px;height:14px;cursor:pointer}
#imp-fenster .impf-hk:disabled{cursor:not-allowed;opacity:.4}
#imp-fenster .impf-nr{color:var(--t3);font-size:10.5px}
#imp-fenster .impf-zahl{cursor:pointer;border-radius:6px;padding:3px 6px;margin:-3px -6px;
  transition:background .14s,color .14s}
#imp-fenster .impf-zahl:hover,#imp-fenster .impf-zahl:focus{background:var(--bg3);color:var(--tx);outline:none}
#imp-fenster .impf-zahl input{width:100%;border:1px solid var(--brdv);border-radius:6px;
  background:var(--bg2);color:var(--tx);font:400 11.5px/1 var(--mono);padding:4px 6px}
#imp-fenster .impf-z.offen .impf-d em{color:var(--amber);opacity:1}
#imp-fenster .impf-z.dub{color:var(--t3);opacity:.72}
#imp-fenster .impf-dub{color:var(--t3);font-style:italic}
#imp-fenster .impf-ok{color:var(--green)}
/* Das Datum wird erst beim Klick zum Feld: 5 000 Datumsfelder auf einmal
 * waeren traege, und niemand braucht sie alle. */
#imp-fenster .impf-d{cursor:pointer;border-radius:6px;padding:3px 6px;margin:-3px -6px;
  transition:background .14s,color .14s}
#imp-fenster .impf-d:hover,#imp-fenster .impf-d:focus{background:var(--bg3);color:var(--tx);outline:none}
#imp-fenster .impf-d em{color:var(--t3);font-style:normal;opacity:.75}
#imp-fenster .impf-d input{width:100%;border:1px solid var(--brdv);border-radius:6px;
  background:var(--bg2);color:var(--tx);font:400 11px/1 var(--mono);padding:4px 5px}
#imp-fenster .impf-mehr{font:400 11px/1.6 var(--mono);color:var(--t3);padding:9px 0 14px;text-align:center}
#imp-fenster .impf-mehr:not(:empty){cursor:pointer}
#imp-fenster .impf-mehr:hover{color:var(--tx)}
#imp-fenster .impf-fuss{display:flex;flex-wrap:wrap;gap:7px;padding:12px 16px;
  border-top:1px solid var(--brd);background:var(--bg2)}
#imp-fenster .imp-btn[disabled]{opacity:.45;cursor:not-allowed}

.imp-trenn{display:flex;align-items:center;gap:9px;margin:12px 0 10px;font:400 11.5px/1 var(--mono);color:var(--t3)}
.imp-trenn::before,.imp-trenn::after{content:"";flex:1;height:1px;background:var(--brd)}

#imp-ergebnis .imp-summe{display:flex;flex-wrap:wrap;gap:5px 18px;font:400 11.5px/1.6 var(--mono);color:var(--t3);margin-bottom:9px}
#imp-ergebnis .imp-summe b{color:var(--tx);font-weight:600}
#imp-ergebnis .imp-summe .warn{color:var(--amber)}
#imp-ergebnis .imp-summe .warn b{color:var(--amber)}
#imp-ergebnis .imp-zeile{display:flex;align-items:center;gap:9px;padding:6px 9px;border-radius:5px;background:var(--bg3);font:400 11.5px/1.4 var(--mono);color:var(--t2);margin-bottom:3px}
#imp-ergebnis .imp-zeile>span:first-child{color:var(--t3);flex-shrink:0;min-width:56px}
#imp-ergebnis .imp-zeile .imp-st{margin-left:auto;flex-shrink:0}
#imp-ergebnis .imp-zeile .imp-st.ok{color:var(--green)}
#imp-ergebnis .imp-zeile.bad{background:rgba(217,120,90,.10);border:1px solid rgba(217,120,90,.28)}
#imp-ergebnis .imp-zeile .imp-st.bad{color:var(--red)}
#imp-ergebnis .imp-hin{font:400 11.5px/1.6 var(--mono);color:var(--t3);padding:6px 2px}
#imp-ergebnis .imp-hin.ok{color:var(--green)}
#imp-ergebnis .imp-hin.warn{color:var(--amber)}
#imp-ergebnis .imp-knoepfe{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px;padding-top:10px;border-top:1px solid var(--brd)}
#imp-ergebnis .imp-konflikt{border:1px solid rgba(217,120,90,.45);border-left:3px solid var(--red);background:rgba(217,120,90,.10);border-radius:7px;padding:11px 13px}
#imp-ergebnis .imp-k-t1{font-size:12.5px;font-weight:600;color:#f0a58b;margin-bottom:5px}
#imp-ergebnis .imp-k-t2{font-size:12.5px;color:var(--t2);line-height:1.55}
#imp-ergebnis .imp-k-t3{font-size:12.5px;color:var(--tx);font-weight:600;margin-top:7px}

/* ── Lebensbilanz der eigenen Tipps (03.09.2026) ────────────────────────────
   Steht über der Tippliste in „Meine Tipps". Bewusst ruhig gehalten: Die Karte
   soll die Liste einleiten, nicht mit ihr um Aufmerksamkeit ringen. Die Zahlen
   tragen die Betonung, nicht der Rahmen. */
.pb-karte{margin:8px 0;padding:12px 13px 13px;border:1px solid var(--brd);border-radius:8px;
  background:linear-gradient(180deg,rgba(212,175,55,.07),rgba(0,0,0,.16))}
/* Kopfzeile: die grosse Zahl trägt, der Rest ordnet ein. */
.pb-karte .pb-kopf{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;padding-bottom:4px}
/* Feste Knopfzeile unter dem Kopf (05.09.2026): links Paare + Hervorhebung, rechts die drei Sichten */
.pb-karte .pb-leiste{display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding:6px 0 9px;border-bottom:1px solid rgba(214,180,110,.22)}
.pb-karte .pb-leiste .pb-schalter{margin-left:0}
.pb-karte .pb-leiste .pb-modi{margin-left:0}
.pb-karte .pb-leiste .pb-schalter.paare{margin-left:auto}
.pb-karte .pb-leiste .pb-schalter.an{box-shadow:0 0 0 1px rgba(212,175,55,.25) inset}
.pb-karte .pb-schalter.aus,.pb-karte .pb-schalter:disabled{opacity:.38;cursor:default}
.pb-karte .pb-schalter.aus:hover,.pb-karte .pb-schalter:disabled:hover{border-color:var(--brd);color:inherit;background:transparent}
.pb-karte .pp-filter{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.pb-karte .pp-fl{font:400 11px/1.4 var(--sans);color:var(--t3);margin-right:2px}
.pb-karte .pp-rf{margin-left:0;font-size:10.5px;padding:2px 8px}
.pb-karte .pp-rf.an{border-color:var(--vl);color:var(--vl);background:rgba(212,175,55,.12)}
.pb-karte .pb-h{font:600 15px/1 var(--sans);color:var(--vl)}
.pb-karte .pb-sub{font:400 11px/1.4 var(--mono);color:var(--t3)}
/* Abschnitts-Überschrift — dieselbe Form wie .wae-cap im Ziehungs-Wächter,
   damit beide Anzeigen als eine Familie gelesen werden. */
.pb-karte .pb-cap{font:500 9px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;
  color:var(--t3);margin:12px 0 7px}
.pb-karte .pb-reihe{display:flex;flex-wrap:wrap;gap:7px}
.pb-karte .pb-kachel{flex:1 1 132px;min-width:118px;display:flex;flex-direction:column;gap:2px;
  padding:8px 10px;border:1px solid var(--brd);border-radius:7px;background:rgba(0,0,0,.22)}
.pb-karte .pb-n{font:700 19px/1.1 var(--mono);color:var(--tx)}
.pb-karte .pb-l{font:400 11.5px/1.3 var(--sans);color:var(--t2)}
.pb-karte .pb-dat{font:400 10.5px/1.35 var(--mono);color:var(--t3)}
/* Trefferkacheln: je hoeher der Rang, desto waermer — wie die Kugeln drueben. */
.pb-karte .pb-kachel.r-hoch{border-color:#7ea154;background:linear-gradient(180deg,rgba(154,184,106,.16),rgba(0,0,0,.22))}
.pb-karte .pb-kachel.r-hoch .pb-n{color:#c3dd9c}
.pb-karte .pb-kachel.r-mittel{border-color:rgba(212,175,55,.45)}
.pb-karte .pb-kachel.r-mittel .pb-n{color:var(--vl)}
/* Die treueste Zahl als Kugel — dieselbe Machart wie .wae-chip. */
.pb-karte .pb-kugel{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font:700 13px/1 var(--mono);
  background:radial-gradient(circle at 33% 28%,#ffeeb9 0%,#e8cd7a 45%,#a8842c 100%);color:#2a1d07}
.pb-karte .pb-fuss{margin-top:10px;padding-top:9px;border-top:1px solid rgba(214,180,110,.22);
  font:400 11px/1.45 var(--sans);color:var(--t3)}
.pb-karte .pb-z{color:var(--vl);font:400 12.5px/1.6 var(--mono)}
/* Ohne Konto: derselbe Rahmen, nur ohne Inhalt — der Platz bleibt sichtbar,
   damit der Anlass zur Anmeldung dort steht, wo die Auswertung stünde. */
.pb-karte.pb-zu .pb-z{margin-bottom:8px}
.pb-karte.pb-zu .btn-g{margin:0}

/* Testtipp-Marke in „Meine Tipps" (04.09.2026). Bewusst zurückhaltend: Sie
   soll die Zeile einordnen, nicht sie beherrschen — der Tipp ist ja kein
   Fehler, er zählt nur nicht in die Trefferbilanz. */
#played-list .pl-test{margin-left:8px;padding:1px 6px;border-radius:9px;
  border:1px solid rgba(214,180,110,.34);background:rgba(214,180,110,.10);
  color:var(--t3);font:500 10px/1.5 var(--sans);letter-spacing:.03em;white-space:nowrap}

/* Anklickbare Trefferkachel (04.09.2026): Sie führt auf die Karte, also muss
   sie das auch anbieten. Der Hinweis erscheint erst beim Überfahren — im
   Ruhezustand soll die Zahl wirken, nicht die Aufforderung. */
.pb-karte .pb-kachel.pb-klick{cursor:pointer;transition:border-color .13s ease,background .13s ease}
.pb-karte .pb-kachel.pb-klick:hover{border-color:var(--vl);background:rgba(212,175,55,.10)}
.pb-karte .pb-go{margin-top:3px;font:500 10px/1 var(--sans);color:var(--vl);opacity:0;
  transition:opacity .13s ease}
.pb-karte .pb-kachel.pb-klick:hover .pb-go{opacity:1}

/* Schalter „hätte ich immer gespielt" (E1, 04.09.2026) — im Kopf der Bilanz,
   damit man sieht, WAS man liest. Aus = ruhig, an = deutlich, dazu die Warnzeile. */
/* Kraeftiger (05.09.2026, „sehen so unscheinbar aus"): groesser, hellere Schrift, Grundton. */
.pb-karte .pb-schalter{margin-left:auto;padding:5px 12px;border-radius:10px;border:1px solid rgba(214,180,110,.42);
  background:rgba(212,175,55,.06);color:var(--t2);font:600 11.5px/1.4 var(--sans);letter-spacing:.01em;cursor:pointer;white-space:nowrap;
  transition:border-color .12s,background .12s,color .12s}
.pb-karte .pb-schalter:hover{border-color:var(--vl);color:var(--vl)}
.pb-karte .pb-schalter.an{border-color:#d9785a;color:#f0a58a;background:rgba(217,120,90,.12)}
.pb-karte .pb-warn{margin-top:8px;padding:6px 9px;border-left:3px solid #d9785a;
  background:rgba(217,120,90,.08);color:var(--t2);font:400 11px/1.45 var(--sans)}
.pb-karte .pb-frage{margin-top:8px;padding:6px 9px;border-left:3px solid var(--vl);
  background:rgba(212,175,55,.07);color:var(--t2);font:400 11px/1.45 var(--sans)}
.pb-karte .pb-warn b,.pb-karte .pb-frage b{color:var(--tx);font-weight:600}

/* Aktive Trefferkachel (E2): die, deren Paare gerade auf der Karte liegen. */
.pb-karte .pb-kachel.aktiv{border-color:var(--vl);box-shadow:0 0 0 1px var(--vl),0 0 14px -4px rgba(212,175,55,.7)}
.pb-karte .pb-kachel.aktiv .pb-go{opacity:1}
.pb-karte .pb-schalter.hervor{margin-left:auto;border-color:var(--vl);color:var(--vl);background:rgba(212,175,55,.14)}
.pb-karte .pb-modi{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.pb-karte .pb-modi .pb-schalter{margin-left:0}
.pb-karte .pb-schalter.hervor + .pb-modi{margin-left:6px}
.pb-karte .pb-schalter.hervor + .pb-schalter{margin-left:6px}

/* Tippzeile: die Zahlen fuehren auf die Karte (E3, 04.09.2026). */
#played-list .pl-num.pl-klick{cursor:pointer}
#played-list .pl-num.pl-klick:hover{text-decoration:underline dotted;text-underline-offset:3px}
/* E6: Systemschein-Zeile — Kopf, Chips, bester Rang (04.09.2026) */
#played-list .pl-sys{color:var(--vl);font:600 12.5px/1.35 var(--sans);letter-spacing:.01em;white-space:nowrap}
#played-list .pl-chips{display:flex;flex-wrap:wrap;gap:3px;margin:-1px 0 1px}
#played-list .pl-chip{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font:500 10.5px/1 var(--mono);color:var(--green);border:1px solid rgba(214,180,110,.34);background:rgba(0,0,0,.25)}
#played-list .pl-best{margin-left:auto;padding:1px 8px;border-radius:9px;cursor:pointer;white-space:nowrap;
  font:600 10.5px/1.6 var(--sans);letter-spacing:.02em;border:1px solid var(--brd);color:var(--t2);background:rgba(0,0,0,.22)}
#played-list .pl-best.r3{border-color:#7ea154;color:#c9e8a4}
#played-list .pl-best.r4{border-color:#c9a23a;color:#ffd97a}
#played-list .pl-best.r5,#played-list .pl-best.r6{border-color:#e08a3a;color:#ffc48a;background:rgba(224,138,58,.14)}
#played-list .pl-best:hover{filter:brightness(1.2)}
#played-list .pl-best.aktiv{background:var(--vl);color:#1a1408;border-color:var(--vl)}

/* ── Paar-Tabelle (E4, 04.09.2026) — unter der Bilanz-Karte ──────────────── */
.pb-karte .pp-wrap{margin-top:12px;border-top:1px solid rgba(214,180,110,.22);padding-top:10px}
.pb-karte .pp-filter{font:400 11px/1.4 var(--sans);color:var(--t2);margin-bottom:6px}
.pb-karte .pp-filter a{color:var(--vl)}
/* Paar-Tabelle als Raster: zwei feste Zeilen je Paar, nichts bricht um (05.09.2026).
   Spalten: Datum · Beschriftung · Zahlen · Richtige · Sp. · Abstand */
.pb-karte .pp-wrap{overflow-x:auto}
.pb-karte .pp-grid{min-width:740px;font:400 11.5px/1.35 var(--mono)}
.pb-karte .pp-kopf,.pb-karte .pp-paar{display:grid;grid-template-columns:82px 66px minmax(300px,1fr) 36px 92px 84px;column-gap:8px;align-items:center;white-space:nowrap}
.pb-karte .pp-kopf{padding:0 6px 5px;border-bottom:1px solid rgba(214,180,110,.35)}
.pb-karte .pp-h{font:500 9px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--t3)}
.pb-karte .pp-h.pp-sort{cursor:pointer}
.pb-karte .pp-h.pp-sort:hover,.pb-karte .pp-h.sort{color:var(--vl)}
.pb-karte .pp-h.sort.ab::after{content:' \25BE'}
.pb-karte .pp-h.sort.auf::after{content:' \25B4'}
.pb-karte .pp-c{text-align:center}
.pb-karte .pp-rechts{text-align:right}
.pb-karte .pp-paar{row-gap:4px;padding:6px 6px;border-bottom:1px solid rgba(214,180,110,.14);cursor:pointer}
.pb-karte .pp-paar:hover{background:rgba(212,175,55,.07)}
.pb-karte .pp-paar.aktiv{background:rgba(212,175,55,.14);box-shadow:inset 3px 0 0 var(--vl)}
.pb-karte .pp-d{color:var(--t2)}
.pb-karte .pp-dauer{color:var(--vl);font-size:11px}
.pb-karte .pp-l{color:var(--t3);font:400 10.5px/1.25 var(--sans);overflow:hidden}
.pb-karte .pp-sys{display:block;color:var(--vl);font:600 10px/1.2 var(--mono);letter-spacing:.02em;white-space:nowrap}
.pb-karte .pp-chips{display:flex;flex-wrap:nowrap;gap:3px;align-items:center}
.pb-karte .pp-chip{width:22px;height:22px;flex:0 0 22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font:500 10.5px/1 var(--mono);color:var(--t2);border:1px solid var(--brd);background:rgba(0,0,0,.25)}
.pb-karte .pp-chip.hit{background:radial-gradient(circle at 33% 28%,#c9e8a4 0%,#9ab86a 55%,#6b8c46 100%);color:#18240c;border-color:#7ea154;font-weight:700}
.pb-karte .pp-chip.ext{border-style:dashed}
.pb-karte .pp-plus{color:var(--t3);margin:0 2px}
.pb-karte .pp-sp{font:400 10.5px/1.4 var(--mono);color:var(--t3);text-align:center}
.pb-karte .pp-r{font:700 14px/1.2 var(--mono);color:var(--tx);text-align:center}
.pb-karte .pp-r.r5,.pb-karte .pp-r.r6{color:#c3dd9c}
.pb-karte .pp-r.r4{color:var(--vl)}
.pb-karte .pp-dist{font:600 12px/1.3 var(--mono);color:var(--tx);text-align:right}
.pb-karte .pp-mehr{margin-top:7px;font:400 10.5px/1.4 var(--sans);color:var(--t3)}
.pb-karte .pb-schalter.paare{border-color:var(--vl);color:var(--vl)}
.pb-karte .pb-schalter.paare.an{border-color:var(--vl);color:#1a1408;background:var(--vl)}

/* ── Parkhaus (E5, 04.09.2026) ─────────────────────────────────────────────── */
#park-list .park-kopf{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font:400 12px/1.4 var(--sans);color:var(--t2);margin:2px 0 8px}
#park-list .park-portion{padding:8px 10px;margin-bottom:6px;border:1px solid var(--brd);border-radius:7px;background:rgba(0,0,0,.18)}
#park-list .park-p1{display:flex;align-items:baseline;gap:8px}
#park-list .park-name{font:600 13px/1.3 var(--sans);color:var(--vl)}
#park-list .park-n{font:400 11.5px/1.3 var(--mono);color:var(--t2)}
#park-list .park-p2{font:400 10.5px/1.4 var(--mono);color:var(--t3);margin-top:2px}
#park-list .park-p3{display:flex;gap:6px;margin-top:7px;flex-wrap:wrap;align-items:center}
/* Parkhaus -> Runde (09.09.2026): das Ziel-Feld je Portion und der Knopf in der Runde */
#park-list .park-ziel{margin-left:auto;max-width:180px;color:var(--vl);border-color:var(--brdv)}
#gem-body .tg-park-plus{margin-left:auto;cursor:pointer;border:1px solid var(--brd);border-radius:99px;background:var(--bg3);
  color:var(--t2);font:400 10.5px/1 var(--mono);letter-spacing:0;text-transform:none;padding:3px 8px}
#gem-body .tg-park-plus:hover{border-color:var(--vl);color:var(--vl)}
#gem-body .tg-park-n{color:var(--t3)}
#gem-body .tg-tipps-h{display:flex;align-items:center;gap:6px}
/* Auswahlliste im Meldungskasten (luAuswahl) */
.lu-dlg.lu-dlg-breit{max-width:min(560px,94vw)}
.lu-dlg-liste{margin:12px 0 2px;max-height:min(52vh,420px);overflow:auto;border:1px solid var(--brd);border-radius:8px;padding:6px 8px}
.lu-dlg-grp{display:flex;align-items:center;gap:8px;margin:8px 0 3px;font:600 12px/1.4 var(--sans);color:var(--vl);cursor:pointer}
.lu-dlg-grp:first-child{margin-top:2px}
.lu-dlg-ei{display:flex;align-items:center;gap:8px;padding:2px 0 2px 18px;font:400 12px/1.5 var(--mono);color:var(--tx);cursor:pointer}
.lu-dlg-ei:hover,.lu-dlg-grp:hover{color:var(--vl)}
.lu-dlg-liste input{accent-color:var(--vl);margin:0}
.acc-cnt{margin-left:auto;margin-right:8px;font:500 10.5px/1 var(--mono);color:var(--t3)}
.lu-dlg .lu-dlg-in{display:block;width:100%;box-sizing:border-box;margin:10px 0 2px;padding:7px 9px;border-radius:6px;
  border:1px solid var(--brd);background:rgba(0,0,0,.28);color:var(--tx);font:400 13px/1.3 var(--mono)}
.lu-dlg .lu-dlg-in:focus{outline:none;border-color:var(--vl)}

/* Knopf im Paar-Fenster (05.09.2026) -- ausserhalb der Bilanz-Karte, deshalb eigener Stil */
.pf-btn{padding:3px 10px;border-radius:9px;border:1px solid var(--vl);background:rgba(212,175,55,.10);color:var(--vl);
  font:500 11px/1.5 var(--sans);letter-spacing:.02em;cursor:pointer;white-space:nowrap}
.pf-btn:hover{background:rgba(212,175,55,.22)}

/* Gruppenfarben im Farbmenue (05.09.2026) */
.pal-grp{display:flex;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid rgba(214,180,110,.14)}
.pal-grp:last-child{border-bottom:0}
.pal-grp-punkt{width:11px;height:11px;border-radius:50%;flex-shrink:0;border:1px solid rgba(0,0,0,.35)}
.pal-grp-punkt.klein{width:8px;height:8px;margin-right:4px}
.pal-grp-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 12px/1.4 var(--sans);color:var(--tx)}
.pal-grp.eigen .pal-grp-name::after{content:' \2022';color:var(--vl)}
.pal-grp-in{width:34px;height:22px;padding:0;border:1px solid var(--brd);border-radius:5px;background:transparent;cursor:pointer}
.pal-grp-reset{display:inline-flex;align-items:center;padding:2px 7px;border-radius:8px;border:1px solid var(--brd);background:transparent;
  color:var(--t2);font:400 10.5px/1.5 var(--sans);cursor:pointer;white-space:nowrap}
.pal-grp-reset:hover{border-color:var(--vl);color:var(--vl)}
.pal-grp-leer{font:400 11.5px/1.45 var(--sans);color:var(--t3);padding:4px 0}

/* Quersumme-Tag „ZS 145" ueberall, wo ein Tipp steht (05.09.2026) */
.qs-tag{display:inline-block;margin-left:6px;padding:0 5px;border:1px solid var(--brd);border-radius:7px;
  font:500 10px/1.5 var(--mono);color:var(--t3);white-space:nowrap;vertical-align:middle}
.pp-chips .qs-tag{margin-left:8px}

/* Runde umbenennen (05.09.2026) */
.gem-farbzeile .gem-umbenennen{margin-left:auto;padding:2px 9px;border-radius:8px;border:1px solid var(--brd);background:transparent;
  color:var(--t2);font:400 11px/1.5 var(--sans);cursor:pointer;white-space:nowrap}
.gem-farbzeile .gem-umbenennen:hover{border-color:var(--vl);color:var(--vl)}

/* Meine Tipps: die Filterleiste haftet beim Scrollen oben am Menue (06.09.2026). Die Trennlinie
   darunter ersetzt den gepunkteten Abschluss der Leiste. */
#played-list .pl-sticky{position:sticky;top:0;z-index:3;background:var(--bg2);margin:0 0 10px;padding:2px 0 8px;border-bottom:1px solid var(--brdv)}
#played-list .pl-sticky .tg-filter{border-bottom:0;padding-bottom:0;margin-bottom:0}

/* Import: Datumsfehler rot, oben in der Liste (Inhaber, 06.09.2026) */
#imp-fenster .impf-z.datum{color:var(--red)}
#imp-fenster .impf-z.datum .impf-zahl,#imp-fenster .impf-z.datum .impf-grund{color:var(--red)}

/* Meine Tipps: Dubletten (06.09.2026) */
#played-list .pl-dub{color:var(--red);border-color:var(--red);font-weight:600}
#played-list .pl-dub-zeile{margin:0 0 8px}
#played-list .pl-dub-btn{border-color:var(--red);color:var(--red)}