/*
 * style.css
 * EO Visual Complexity Experiment — rgeo CI
 * ─────────────────────────────────────────
 * Helles Theme (probeweise an TIER-List angenähert, siehe
 * reference_institute_ci-Diskussion: bewusst auch auf die Spielbühne
 * angewendet, nicht nur auf Onboarding-Screens).
 *
 * CI Palette:
 *   Primary Blue  #0a3f70
 *   Light Blue    #0ca4d1
 *   Gold          #fdc300
 *   Orange        #ec6608
 *   Red           #b71918
 *   Grey          #7c7c7c / #c6c6c6
 *
 * Font: Segoe UI / Segoe UI Semibold
 */

:root{
  --font-ui: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  /* rgeo CI, helle Variante */
  --bg:#f4f5f7;           /* Seitenhintergrund */
  --panel:#ffffff;        /* helle Flaeche (frueher: dunkelblaues Panel) */
  --panel-dark:#eef1f4;   /* helles Grau (frueher: tiefes Navy) */
  --panel-soft:#f4f6f8;   /* dezent gegraute Kartenflaeche statt reinem Weiss
                              (Karten/Chips/Modals wirkten sonst zu grell) */
  --border:#0ca4d1;       /* Akzent-Rahmen, hellblau */
  --accent:#0ca4d1;       /* hellblauer Akzent */
  --accent2:#fdc300;      /* Gold */
  --accent3:#ec6608;      /* Orange */
  --warn:#b71918;         /* Rot */
  --text:#1a1a1a;         /* dunkler Fliesstext */
  --muted:#5a6472;        /* gedaempftes Blaugrau */
  --label-bg:#ffffff;     /* Chip-Hintergrund */
  --line:#d8dadf;         /* neutrale helle Trennlinie */
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-ui);background:var(--bg);color:var(--text);
  height:100vh;display:flex;flex-direction:column;overflow:hidden}

#loading{position:fixed;inset:0;z-index:3000;display:flex;flex-direction:column;
  align-items:center;justify-content:center;background:var(--bg);gap:20px}
#loading-text{font-family:var(--font-ui);font-size:13px;
  color:var(--muted);letter-spacing:.12em}
.spinner{width:36px;height:36px;border:3px solid var(--border);
  border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── VORLADE-OVERLAY (seit 2026-08-26) ── */
#preload-overlay{position:fixed;inset:0;z-index:3600;display:none;flex-direction:column;
  align-items:center;justify-content:center;background:var(--bg);gap:18px}
#preload-overlay.active{display:flex}
#preload-text{font-family:var(--font-ui);font-size:13px;
  color:var(--muted);letter-spacing:.1em}
#preload-bar-wrap{width:220px;height:6px;background:var(--panel-dark);
  border-radius:3px;overflow:hidden;}
#preload-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--accent),var(--accent2));
  transition:width .3s ease;border-radius:3px;}

#start-screen{position:fixed;inset:0;z-index:2000;display:flex;align-items:flex-end;
  justify-content:flex-end;transition:opacity .4s;
  /* background image set via inline style in index.html */
}
#start-screen::before{
  content:'';position:absolute;inset:0;
  background:rgba(11,15,20,0.2);
}
#start-screen.hidden{opacity:0;pointer-events:none}
.start-panel{position:relative;z-index:1;
  width:min(400px,92vw);padding:18px 22px;
  background:rgba(244,246,248,0.88);backdrop-filter:blur(12px);
  border:1px solid rgba(10,63,112,0.15);border-top:3px solid #fdc300;
  box-shadow:0 12px 48px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,0.5);
  border-radius:4px;text-align:center;margin:0 28px 28px 0;}
.start-panel h1{font-size:38px;margin-bottom:6px;line-height:1.1;
  color:#0a3f70;letter-spacing:.03em;font-weight:700}
.start-subtitle{font-family:var(--font-ui);color:var(--accent);
  letter-spacing:.06em;font-size:11px;text-transform:uppercase;
  line-height:1.4;margin-bottom:18px}
#btn-start{padding:10px 30px;border:none;
  background:linear-gradient(180deg,#ffe566 0%,#fdc300 55%,#c99400 100%);
  color:#0a3f70;border-bottom:3px solid #8a6500;border-radius:5px;
  font-family:var(--font-ui);font-weight:700;font-size:13px;cursor:pointer;
  letter-spacing:.06em;animation:pulse 1.8s infinite;transition:all .12s;
  box-shadow:0 5px 18px rgba(253,195,0,0.4),inset 0 1px 0 rgba(255,255,255,0.55);}
#btn-start:hover{transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(253,195,0,0.5),inset 0 1px 0 rgba(255,255,255,0.55);}
#btn-start:active{transform:translateY(1px);border-bottom-width:1px;}

#topbar{display:flex;justify-content:space-between;align-items:center;
  padding:10px 22px;
  background:linear-gradient(90deg,var(--panel-dark) 0%,var(--panel) 100%);
  border-bottom:2px solid var(--accent);
  flex-shrink:0;z-index:100;
  box-shadow:0 3px 14px rgba(12,164,209,0.1);}
.brand{font-family:var(--font-ui);color:#0a3f70;font-weight:700;
  font-size:11px;letter-spacing:.15em;}
#progress-wrap{width:380px}
#progress-label{display:flex;justify-content:space-between;
  font-size:10px;color:var(--muted);margin-bottom:5px}
#progress-bar{height:3px;background:var(--border)}
#progress-fill{height:100%;width:0%;
  background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .5s;border-radius:2px;}
#stats{display:flex;gap:24px}
.stat{text-align:center}
.stat-val{color:#0a3f70;font-family:var(--font-ui);font-size:22px;line-height:1;}
#stat-errors .stat-val{color:var(--warn)}
.stat-label{font-size:9px;color:var(--muted);text-transform:uppercase;
  letter-spacing:.1em;margin-top:2px}

#main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}

/*
 * 3-column layout:
 * [sidebar-left] [stage] [sidebar-right]
 * stage height = available height
 * stage width  = height * 4/3  (always 4:3, never distorted)
 * sidebars fill the remaining space equally
 */
#stage-outer{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:row;
  align-items:stretch;
  background:#e5e7eb;
  overflow:hidden;
}
#sidebar-left,
#sidebar-right{
  flex:1;           /* each sidebar takes equal share of leftover space */
  min-width:0;
  background:#eef1f4;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#8b95a3;
  font-size:11px;
  font-family:var(--font-ui);
  letter-spacing:.1em;
}
#stage{
  /* width = height * 4/3, height = 100% of stage-outer */
  flex-shrink:0;
  position:relative;
  height:100%;
  aspect-ratio:4/3;
  cursor:none;
  overflow:hidden;
  background:#e5e7eb;
}
#sat-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:fill;
  display:block;
  pointer-events:none;
  user-select:none;
}

/* DEBUG PANEL */
#debug-panel{
  display:none;position:absolute;top:10px;right:10px;z-index:900;
  background:rgba(244,246,248,0.97);border:1px solid var(--warn);
  border-top:3px solid var(--warn);
  padding:14px 16px;font-family:var(--font-ui);
  font-size:11px;color:var(--text);min-width:210px;
  box-shadow:0 6px 32px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,0.5);
  border-radius:4px;
}
#debug-panel-title{color:var(--warn);letter-spacing:.12em;margin-bottom:10px;font-size:10px;
  cursor:pointer;display:flex;align-items:center;gap:4px}
#debug-panel-hint{color:var(--muted);font-size:9px;letter-spacing:.06em;flex:1}
#debug-panel-collapse-btn{color:var(--muted);font-size:11px;transition:transform .15s}
/* Julians Wunsch (2026-09-02): Panel-Inhalt ausblenden koennen, um das
   darunterliegende Satellitenbild zu sehen, ohne den Debug-Modus (und damit
   die Hitbox-Overlay-Zeichnung) komplett zu verlassen. Panel selbst bleibt
   an Ort und Stelle - nur #debug-panel-body wird versteckt. */
#debug-panel.collapsed{min-width:0}
#debug-panel.collapsed #debug-panel-title{margin-bottom:0}
#debug-panel.collapsed #debug-panel-body{display:none}
#debug-panel.collapsed #debug-panel-collapse-btn{transform:rotate(-90deg)}
#debug-checks{display:grid;gap:8px;margin-top:2px}
.debug-check-row{display:flex;align-items:center;gap:8px;cursor:pointer}
.debug-check-row input[type=checkbox]{
  width:13px;height:13px;cursor:pointer;accent-color:var(--accent);flex-shrink:0}
.debug-swatch{width:12px;height:12px;border-radius:2px;flex-shrink:0}
.debug-check-label{flex:1;letter-spacing:.04em}
#debug-btns{margin-top:12px;border-top:1px solid var(--line);padding-top:10px;display:flex;gap:8px}
.debug-btn{flex:1;padding:5px 0;
  background:linear-gradient(180deg,#ffffff 0%,#eef1f4 100%);
  border:1px solid var(--accent);border-bottom:2px solid #0a3f70;
  border-radius:3px;color:#0a3f70;cursor:pointer;
  font-family:inherit;font-size:10px;letter-spacing:.05em;
  box-shadow:0 2px 6px rgba(0,0,0,0.08);transition:all .12s;}
.debug-btn:hover{border-color:var(--accent2);color:#8a6500;
  transform:translateY(-1px);}
/* Level-Navigation/Aufgaben-Steuerung im Debug-Panel: vormals Inline-Styles
   in index.html, seit 2026-09-23 als Klassen ausgelagert, damit sie auf dem
   Handy (siehe mobile.css) responsiv ueberschrieben werden koennen - Werte
   1:1 aus den ehemaligen Inline-Styles uebernommen, am Desktop aendert sich
   dadurch nichts. */
.debug-section{margin-top:8px;border-top:1px solid #1e2d3d;padding-top:10px;}
.debug-section-title{color:#4a6080;font-size:9px;letter-spacing:.08em;margin-bottom:7px;}
.debug-nav-row{display:flex;align-items:center;gap:6px;}
.debug-nav-btn{flex:0 0 32px;}
.debug-level-info{flex:1;text-align:center;font-size:10px;color:#cdd9e5;letter-spacing:.05em;}
.debug-task-col{display:flex;flex-direction:column;gap:6px;}
#debug-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:none;z-index:490}

/* LOUPE — bewusst unveraendert: liegt ueber dem Satellitenbild selbst, nicht
   ueber der Seiten-Chrome, daher unabhaengig vom hellen/dunklen Theme. */
#loupe{position:absolute;width:250px;height:250px;border-radius:50%;
  border:2px solid #fdc300;
  box-shadow:0 0 0 3px rgba(253,195,0,0.2), 0 0 0 1px #c99400, 0 8px 32px rgba(0,0,0,.6);
  overflow:hidden;pointer-events:none;display:none;z-index:600;
  transform:translate(-50%,-50%)}
#loupe::before,#loupe::after{content:'';position:absolute;z-index:2;pointer-events:none}
#loupe::before{width:1px;height:100%;left:50%;top:0;background:rgba(253,195,0,0.7)}
#loupe::after{height:1px;width:100%;top:50%;left:0;background:rgba(253,195,0,0.7)}
#loupe-canvas{position:absolute;top:0;left:0;width:250px;height:250px;image-rendering:pixelated}
#loupe-badge{position:absolute;bottom:6px;right:10px;
  font-family:var(--font-ui);font-size:9px;color:rgba(0,150,190,.85);
  z-index:3;pointer-events:none}

/* PIN — ebenfalls unveraendert, liegt ueber dem Bild. */
#pin{position:absolute;pointer-events:none;z-index:700;
  display:none;width:22px;transform:translate(-50%,-100%)}

/* FLOAT CHIP */
#float-chip{position:fixed;pointer-events:none;z-index:9000;display:none;
  padding:6px 14px;background:#fff;border:1px solid var(--accent2);
  color:#0a3f70;
  box-shadow:0 4px 16px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.6);
  border-radius:4px;font-family:var(--font-ui);font-size:13px;font-weight:600;
  white-space:nowrap;
  transform:translate(-50%,calc(-100% - 38px))}

/* CONFIRMED ZONE LABELS — bleibt dunkel/gold: sitzt direkt auf dem
   Satellitenbild, muss gegen beliebige Bildinhalte lesbar bleiben. */
.zone-ok{position:absolute;pointer-events:none;
  background:rgba(10,63,112,0.92);border:1px solid #fdc300;border-top:2px solid #fdc300;
  color:#fdc300;font-family:var(--font-ui);font-size:11px;padding:3px 9px;
  white-space:nowrap;transform:translate(-50%,-50%);border-radius:3px;
  box-shadow:0 3px 12px rgba(0,0,0,0.35);}

#bottom{display:grid;grid-template-columns:1fr auto;gap:10px;
  padding:12px 20px;
  background:linear-gradient(90deg,var(--panel-dark) 0%,var(--panel) 100%);
  border-top:2px solid var(--accent);flex-shrink:0;
  box-shadow:0 -3px 14px rgba(12,164,209,0.08);}
#label-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
#label-bar-title{font-size:10px;color:var(--muted);
  font-family:var(--font-ui);letter-spacing:.12em;margin-right:6px}
.label-chip{
  padding:7px 15px;
  background:linear-gradient(180deg,#ffffff 0%,#eef1f4 100%);
  border:1px solid var(--accent);
  border-bottom:3px solid #0a3f70;
  border-radius:4px;
  font-size:13px;font-weight:600;user-select:none;
  color:#0a3f70;
  box-shadow:0 3px 8px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.6);
  transition:all .12s ease;cursor:grab}
.label-chip:hover{
  border-color:var(--accent2);
  box-shadow:0 4px 14px rgba(12,164,209,0.25), inset 0 1px 0 rgba(255,255,255,0.7);
  transform:translateY(-1px);}
.label-chip.used{opacity:.25;pointer-events:none;transform:none;}
.label-chip.lifting{
  opacity:.9;cursor:grabbing;
  transform:translateY(-2px) scale(1.04);
  box-shadow:0 8px 22px rgba(0,0,0,0.25);}

#trash{width:110px;min-height:60px;
  border:2px dashed rgba(12,164,209,0.5);
  border-radius:6px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:3px;font-size:11px;color:var(--muted);
  background:rgba(214,240,248,0.4);
  box-shadow:inset 0 2px 8px rgba(0,0,0,0.04);
  transition:border-color .2s,background .2s;cursor:default}
#trash.drag-over{border-color:var(--warn);background:rgba(183,25,24,.08);
  box-shadow:inset 0 2px 8px rgba(183,25,24,0.1);}
#trash-count{font-family:var(--font-ui);color:var(--warn);font-size:11px;min-height:14px}

#feedback{position:fixed;top:62px;left:50%;transform:translateX(-50%);
  padding:7px 20px;font-family:var(--font-ui);font-size:13px;
  opacity:0;pointer-events:none;transition:opacity .2s;z-index:800;
  background:var(--panel-soft);
  border:1px solid var(--border);border-radius:4px;
  box-shadow:0 4px 18px rgba(0,0,0,0.15);}
#feedback.show{opacity:1}
#feedback.ok{color:#0a3f70;border-color:var(--accent);
  box-shadow:0 4px 18px rgba(12,164,209,0.2);}
#feedback.err{color:var(--warn);border-color:var(--warn);
  box-shadow:0 4px 18px rgba(183,25,24,0.2);}

#btn-hint{position:fixed;left:28px;bottom:90px;
  padding:9px 20px;
  background:#fff;color:#0a3f70;
  border:1px solid var(--accent);border-bottom:2px solid #0a3f70;border-radius:5px;
  font-family:var(--font-ui);font-size:12px;letter-spacing:.02em;
  cursor:pointer;z-index:800;transition:all .12s;
  box-shadow:0 3px 10px rgba(0,0,0,0.12);}
#btn-hint:hover{border-color:var(--accent2);color:#8a6500;transform:translateY(-1px);}
#btn-hint:active{transform:translateY(1px);border-bottom-width:1px;}

#btn-next{display:none;position:fixed;right:28px;bottom:90px;
  padding:12px 32px;
  background:linear-gradient(180deg,#ffe566 0%,#fdc300 55%,#c99400 100%);
  color:#0a3f70;border:none;border-bottom:4px solid #8a6500;border-radius:5px;
  font-family:var(--font-ui);font-weight:700;font-size:14px;letter-spacing:.04em;
  cursor:pointer;z-index:800;animation:pulse 1.8s infinite;transition:all .12s;
  box-shadow:0 6px 20px rgba(253,195,0,0.4),inset 0 1px 0 rgba(255,255,255,0.55);}
#btn-next:hover{transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(253,195,0,0.5),inset 0 1px 0 rgba(255,255,255,0.55);}
#btn-next:active{transform:translateY(2px);border-bottom-width:1px;
  box-shadow:0 2px 8px rgba(253,195,0,0.3);}

#results-screen{display:none;position:fixed;inset:0;
  background:linear-gradient(160deg,rgba(233,236,239,0.9) 0%,rgba(244,246,248,0.9) 100%),
    url('../../Bilder/Deko_und_UI/Startscreen.png') center/cover no-repeat fixed;
  z-index:1500;flex-direction:column;align-items:center;gap:14px;
  overflow-y:auto;padding:32px 20px;}
#results-screen.active{display:flex}
#results-screen h1{font-size:32px;color:#0a3f70;letter-spacing:.02em;}
table{border-collapse:collapse;min-width:480px;
  background:var(--panel-soft);
  box-shadow:0 8px 32px rgba(0,0,0,0.1),inset 0 1px 0 rgba(255,255,255,0.6);
  border:1px solid var(--line);border-radius:4px;overflow:hidden;}
td,th{padding:11px 20px;border-bottom:1px solid var(--line);font-size:13px}
th{color:var(--muted);font-family:var(--font-ui);font-size:10px;
  letter-spacing:.12em;text-align:left;background:#eef1f4;}
/* Nur die GESAMT-Zeile der eigenen Ergebnisse (letzte Zeile) ist fett. Vorher galt
   die Regel fuer jede Tabelle und markierte in der Bestenliste faelschlich immer
   die letzte Zeile (Julians Testfund, 2026-10-19). */
#results-body tr:last-child td{font-weight:700;color:#0a3f70;
  background:#f4f5f7;}
/* Eigene Eintraege in der Bestenliste */
#leaderboard-body tr.lb-mine td,#leaderboard-full-body tr.lb-mine td{
  font-weight:700;color:#0a3f70;background:rgba(253,195,0,0.28);}
tr:hover td{background:rgba(12,164,209,0.06);}
.results-row{cursor:pointer}
.results-row:hover td{background:rgba(253,195,0,0.12);color:#0a3f70;}
#results-thankyou{color:var(--muted);font-size:14px;text-align:center;max-width:480px}
.results-actions{display:flex;gap:10px}
.results-actions button{padding:11px 24px;cursor:pointer;font-weight:600;
  font-family:var(--font-ui);font-size:13px;letter-spacing:.03em;
  background:linear-gradient(180deg,#ffffff 0%,#eef1f4 100%);
  color:#0a3f70;border:1px solid var(--accent);border-bottom:3px solid #0a3f70;
  border-radius:4px;transition:all .12s;
  box-shadow:0 4px 12px rgba(0,0,0,0.08),inset 0 1px 0 rgba(255,255,255,0.6);}
.results-actions button:hover{border-color:var(--accent2);color:#8a6500;
  transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,0.12);}
.results-actions button:active{transform:translateY(1px);border-bottom-width:1px;}
.results-actions button.primary{
  background:linear-gradient(180deg,#ffe566 0%,#fdc300 55%,#c99400 100%);
  color:#0a3f70;border-color:#fdc300;border-bottom:3px solid #8a6500;
  box-shadow:0 4px 16px rgba(253,195,0,0.3),inset 0 1px 0 rgba(255,255,255,0.55);}
.results-actions button.primary:hover{
  box-shadow:0 6px 22px rgba(253,195,0,0.4),inset 0 1px 0 rgba(255,255,255,0.55);}

@keyframes pulse{50%{box-shadow:0 0 0 10px rgba(253,195,0,0)}}

/* ── ERGEBNIS-SPALTEN NEBENEINANDER (seit 2026-08-26) ──
   Bei zwei Tabellen (eigene Ergebnisse + Bestenliste) wird der Screen sonst
   schnell hoeher als der Viewport - deshalb nebeneinander (wrap auf
   schmalen Bildschirmen) statt gestapelt, plus interner Tabellen-Scroll
   mit fixiertem Header statt unbegrenzt wachsender Seitenhoehe. */
#results-tables-row{display:flex;flex-wrap:wrap;justify-content:center;
  align-items:flex-start;gap:24px;width:100%;max-width:1000px;}
.results-col{display:flex;flex-direction:column;align-items:center;gap:8px;
  flex:1 1 400px;min-width:0;max-width:480px;}
.results-col h2{font-size:16px;color:#0a3f70;letter-spacing:.02em;}
.table-scroll{width:100%;max-height:38vh;overflow-y:auto;border-radius:4px;}
.table-scroll table,#leaderboard-full-table{min-width:0;width:100%;}
.table-scroll thead th{position:sticky;top:0;z-index:1;}
.table-scroll td,.table-scroll th,
#leaderboard-full-table td,#leaderboard-full-table th{padding:8px 14px;}
.table-scroll th.num,.table-scroll td.num,
#leaderboard-full-table th.num,#leaderboard-full-table td.num{text-align:right;font-variant-numeric:tabular-nums;}
#results-body tr:nth-child(even):not(:last-child) td,
#leaderboard-body tr:nth-child(even):not(.lb-mine) td,
#leaderboard-full-body tr:nth-child(even):not(.lb-mine) td{background:rgba(10,63,112,0.035);}
.table-scroll tbody tr:hover td{background:rgba(12,164,209,0.08);}
.table-scroll tbody tr.results-row:hover td{background:rgba(253,195,0,0.14);color:#0a3f70;}

/* ── BESTENLISTE (seit 2026-08-26) ── */
#leaderboard-panel{text-align:center;}
#leaderboard-disqualified-note{color:var(--warn);font-size:13px;}
#leaderboard-own-rank{color:#0a3f70;font-weight:600;font-size:13px;min-height:1em;}
.leaderboard-loading{text-align:center;color:var(--muted);font-style:italic;}
#leaderboard-full-table{min-width:0;width:100%;}
#leaderboard-full-modal .legal-modal-card{max-width:520px;max-height:80vh;overflow:auto;}
.percentile-cell{color:var(--muted);font-size:12px;}

/* ── IMAGE PREVIEW / ZOOM MODAL ──
   Backdrop bewusst dunkel (Lightbox-Konvention, unabhaengig vom Seiten-
   Theme – TIER-List behaelt seine eigene .lightbox aus demselben Grund
   dunkel, obwohl die Seite drumherum hell ist). Nur die Toolbar wird hell. */
#image-preview-modal{display:none;position:fixed;inset:0;z-index:2500;
  background:rgba(5,10,24,0.92);flex-direction:column;}
#image-preview-modal.active{display:flex}
#image-preview-toolbar{flex:0 0 auto;display:flex;align-items:center;gap:16px;
  padding:14px 20px;background:rgba(244,246,248,0.97);
  border-bottom:1px solid var(--line);}
#image-preview-title{font-weight:700;color:#0a3f70;letter-spacing:.03em;font-size:14px}
#image-preview-hint{flex:1;color:var(--muted);font-size:11px;letter-spacing:.02em;text-align:center}
#image-preview-close{cursor:pointer;font-size:15px;font-weight:700;color:#0a3f70;
  background:transparent;border:1px solid var(--accent);border-radius:4px;
  width:32px;height:32px;line-height:1;transition:all .12s;}
#image-preview-close:hover{color:#8a6500;border-color:var(--accent2);}
#image-preview-viewport{flex:1;display:flex;align-items:center;justify-content:center;
  overflow:hidden;}
#image-preview-img{max-width:92%;max-height:92%;user-select:none;
  transform-origin:center center;cursor:zoom-in;}

/* ── READY / COUNTDOWN OVERLAY ── */
#ready-overlay{
  position:absolute;inset:0;z-index:1000;
  display:none;
  flex-direction:column;align-items:center;justify-content:center;
  background:rgba(244,245,247,0.94);
  backdrop-filter:blur(3px);
  gap:32px;
  /* #stage setzt cursor:none (fuer die Lupe) - das Overlay liegt darin und
     erbte das, die Maus war zwischen den Levels unsichtbar (ausser ueber
     dem Button, der einen eigenen Cursor hat). */
  cursor:default;
}
#ready-overlay.active{display:flex}
#ready-level-tag{
  font-family:var(--font-ui);font-size:11px;
  color:var(--muted);letter-spacing:.18em;text-transform:uppercase;
}
#ready-btn{
  padding:15px 52px;border:none;
  background:linear-gradient(180deg,#ffe566 0%,#fdc300 55%,#c99400 100%);
  color:#0a3f70;border-bottom:4px solid #8a6500;border-radius:6px;
  font-family:var(--font-ui);font-weight:700;font-size:17px;letter-spacing:.04em;
  cursor:pointer;animation:pulse 1.8s infinite;transition:all .12s;
  box-shadow:0 8px 26px rgba(253,195,0,0.4),inset 0 1px 0 rgba(255,255,255,0.55);}
#ready-btn:hover{transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(253,195,0,0.5),inset 0 1px 0 rgba(255,255,255,0.55);}
#ready-btn:active{transform:translateY(2px);border-bottom-width:1px;}
#countdown-wrap{display:none;flex-direction:column;align-items:center;gap:16px}
#countdown-num{
  font-family:var(--font-ui);font-size:96px;font-weight:600;
  color:#0a3f70;line-height:1;
  animation:cdpulse .9s ease-in-out infinite;
}
#countdown-label{
  font-family:var(--font-ui);font-size:11px;
  color:var(--muted);letter-spacing:.2em;
}
@keyframes cdpulse{
  0%{transform:scale(1);opacity:1}
  50%{transform:scale(1.08);opacity:.7}
  100%{transform:scale(1);opacity:1}
}

/* ── FOOTER (Impressum/Datenschutz/Quellen) ── */
.app-footer{
  position:fixed;left:0;right:0;bottom:0;z-index:10;
  display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;
  padding:5px 16px;background:rgba(255,255,255,0.95);
  border-top:1px solid var(--line);
  font-size:0.74rem;color:var(--muted);
}
.app-footer a{color:#0a3f70;text-decoration:none;font-weight:600;}
.app-footer a:hover{text-decoration:underline;}

/* ── LEGAL-MODALS (Impressum/Datenschutz/Quellen) ── */
.legal-modal{
  display:none;position:fixed;inset:0;z-index:5000;
  background:rgba(0,0,0,0.5);justify-content:center;
  padding:20px;overflow:auto;
}
.legal-modal.active{display:flex}
/* margin:auto statt align-items:center auf dem Container - bekannter Flexbox-
   Bug: bei ueberlaufendem Inhalt "zentriert" ein Flex-Container mit
   align-items:center den Overflow symmetrisch in nicht erreichbaren Raum,
   wodurch selbst mit overflow:auto ein Teil des Inhalts (typischerweise oben)
   durch Scrollen nie sichtbar wird - siehe tutorial.css fuer denselben Fix,
   dort urspruenglich gefunden (Julians Testfund 2026-09-02). Hier faellig
   geworden durch den neuen, zweibildrigen Vollbild-Hinweis-Modal-Inhalt. */
.legal-modal-card{
  max-width:600px;width:100%;background:var(--panel-soft);border:1px solid var(--line);
  border-radius:10px;padding:22px 28px;box-shadow:0 12px 48px rgba(0,0,0,0.3);
  margin:auto;
}
.legal-modal-card h1{font-size:1.3rem;color:#0a3f70;margin-bottom:14px;}
.legal-modal-card p{line-height:1.6;color:#2a2a2a;margin-bottom:12px;}
.legal-modal-card a{color:#0a3f70;}
.legal-modal-card button{
  margin-top:8px;padding:10px 20px;background:#0a3f70;color:#fff;
  border:none;border-radius:6px;font-size:1rem;cursor:pointer;
}
.legal-modal-card button:hover{background:var(--accent);}
.legal-modal-card input[type=text],
.legal-modal-card textarea{
  width:100%;padding:9px 12px;margin-top:4px;
  border:1px solid var(--line);border-radius:6px;
  font-family:inherit;font-size:0.95rem;background:var(--panel-soft);color:#1a1a1a;
  resize:vertical;
}
.legal-modal-card input[type=text]:focus,
.legal-modal-card textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;}
.pq-question{margin-bottom:16px;text-align:left;}
.pq-label{font-weight:600;font-size:0.92rem;color:#2a2a2a;margin-bottom:8px;line-height:1.5;}
.pq-question input[type=text]{margin-top:0;}
.likert-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.likert-end{font-size:0.78rem;color:var(--muted);}
.likert-row label{display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:0.78rem;color:var(--muted);cursor:pointer;}
.likert-row input[type=radio]{width:16px;height:16px;cursor:pointer;accent-color:var(--accent);}
.familiarity-modal-actions{display:flex;gap:10px;justify-content:flex-end;
  flex-wrap:wrap;margin-top:14px;}
.familiarity-modal-actions button{margin-top:0;}
.legal-modal-card button.secondary{
  background:var(--panel-soft);color:#0a3f70;border:1px solid var(--accent);
}
.legal-modal-card button.secondary:hover{background:var(--panel-dark);}
.legal-modal-card button.warn{
  background:#fff;color:var(--warn);border:1px solid var(--warn);
  margin-right:auto;
}
.legal-modal-card button.warn:hover{background:rgba(183,25,24,.08);}

/* ── VOLLBILD-HINWEIS (seit 2026-09-23) ── */
.fs-hint-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;}
.fs-hint-actions button{margin-top:0;}
.fs-hint-note{font-size:0.82rem;color:var(--muted);margin-top:10px;}
.legal-modal-card button.fs-hint-skip{display:block;margin:14px auto 0;
  background:none;border:none;border-bottom:none;
  color:var(--muted);font-size:0.85rem;text-decoration:underline;cursor:pointer;
  padding:4px;}
.legal-modal-card button.fs-hint-skip:hover{color:#0a3f70;background:none;}
.fs-hint-step{margin-bottom:16px;}
.fs-hint-step img{width:100%;border-radius:8px;border:1px solid var(--line);
  display:block;margin-bottom:8px;}
.fs-hint-step p{margin-bottom:0;}

/* ── TEILEN-FALLBACK (seit 2026-08-26) ── */
.share-platform-row{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0;}
.share-platform-row .share-platform-btn{flex:1 1 100px;text-align:center;padding:10px 14px;
  margin-top:0;text-decoration:none;cursor:pointer;font-weight:600;
  font-family:var(--font-ui);font-size:13px;
  background:var(--panel-soft);color:#0a3f70;
  border:1px solid var(--accent);border-bottom:3px solid #0a3f70;
  border-radius:4px;transition:all .12s;}
.share-platform-row .share-platform-btn:hover{background:var(--panel-soft);border-color:var(--accent2);color:#8a6500;
  transform:translateY(-1px);}
.share-copy-hint{color:var(--accent);font-size:12px;margin-bottom:8px;}
#share-fallback-text{white-space:pre-line;}

/* ── HINT-LAYERS-PANEL ── schlanke Ebenenumschaltung fuer "Ich komme nicht
   weiter" (siehe buildHintLayerChecks() in app.js) – teilt sich die
   Checkbox-Zeilen-Optik mit #debug-panel, aber blauer statt roter Akzent,
   da hier kein QA-Debug-Werkzeug gemeint ist, sondern eine fuer Teilnehmende
   gedachte Hilfestellung. */
#hint-layers-panel{
  display:none;position:absolute;top:10px;right:10px;z-index:900;
  background:rgba(244,246,248,0.97);border:1px solid var(--accent);
  border-top:3px solid var(--accent);
  padding:14px 16px;font-family:var(--font-ui);
  font-size:11px;color:var(--text);min-width:180px;
  box-shadow:0 6px 32px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,0.5);
  border-radius:4px;
}
#hint-layers-title{color:var(--accent);letter-spacing:.12em;margin-bottom:10px;font-size:10px;
  cursor:pointer;display:flex;align-items:center}
#hint-layers-collapse-btn{color:var(--muted);font-size:11px;transition:transform .15s;margin-left:auto}
#hint-layers-checks{display:grid;gap:8px}
/* Gleiches Ein-/Ausklappen wie beim Debug-Panel (Julians Wunsch,
   2026-09-02), damit auch dieses Panel das Satellitenbild darunter nicht
   dauerhaft verdeckt. */
#hint-layers-panel.collapsed{min-width:0}
#hint-layers-panel.collapsed #hint-layers-title{margin-bottom:0}
#hint-layers-panel.collapsed #hint-layers-checks{display:none}
#hint-layers-panel.collapsed #hint-layers-collapse-btn{transform:rotate(-90deg)}

/* ── FAMILIARITY-GALLERY (Wiedererkennungs-Check am Spielende) ── */
#familiarity-gallery-screen{display:none;position:fixed;inset:0;
  background:linear-gradient(160deg,#e9ecef 0%,#f4f6f8 100%);
  z-index:1600;justify-content:center;align-items:center;padding:30px;overflow:auto;}
#familiarity-gallery-screen.active{display:flex}
#familiarity-gallery-card{max-width:900px;width:100%;text-align:center;}
#familiarity-gallery-card h1{font-size:26px;color:#0a3f70;letter-spacing:.02em;margin-bottom:10px;}
#familiarity-gallery-card p{color:var(--muted);font-size:13px;margin-bottom:18px;}
#familiarity-gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:14px;margin-bottom:22px;}
.familiarity-cell{position:relative;border-radius:6px;overflow:hidden;
  border:2px solid var(--line);background:var(--panel-soft);
  box-shadow:0 4px 14px rgba(0,0,0,0.1);aspect-ratio:4/3;transition:border-color .15s;}
.familiarity-cell img{width:100%;height:100%;object-fit:cover;display:block;}
.familiarity-cell.marked{border-color:var(--accent2);
  box-shadow:0 0 0 2px rgba(253,195,0,0.35),0 4px 14px rgba(0,0,0,0.1);}
.familiarity-zoom-btn,.familiarity-mark-btn{
  position:absolute;width:28px;height:28px;border-radius:50%;
  border:1px solid var(--line);cursor:pointer;font-size:13px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(244,246,248,0.92);color:#0a3f70;transition:transform .12s;}
.familiarity-zoom-btn:hover,.familiarity-mark-btn:hover{transform:scale(1.1);}
.familiarity-zoom-btn{top:6px;left:6px;}
.familiarity-mark-btn{top:6px;right:6px;}
.familiarity-cell.marked .familiarity-mark-btn{
  background:var(--accent2);color:#0a3f70;border-color:#c99400;}

/* ── SPIEL-LAYOUT LAPTOP + TABLET: Bild links (volle Hoehe), Bedienung als
   Spalte rechts (Julians Skizze, 2026-10-01) ─────────────────────────────
   app.js relocateControls_() hat Topbar/#label-bar/#trash/#btn-hint dafuer
   physisch in #sidebar-right umgehaengt. Das Handy (data-tier="phone") hat
   in mobile.css sein eigenes, kompakteres Layout und ist hier ausgenommen.
   Buehnengroesse per Container-Query-Einheiten (stage-outer ist der Container)
   statt vw/vh: die Hoehe ist 100%, aber nie breiter, als neben der Spalte
   Platz ist - sonst wuerde das Bild in schmalen Fenstern die Spalte
   verdraengen (und ein reines max-width wuerde das 4:3-Verhaeltnis brechen). */
html:not([data-tier="phone"]) #bottom { display: none; }
html:not([data-tier="phone"]) #stage-outer {
  container-type: size;
  justify-content: center;
  --side-w: clamp(200px, 21cqw, 300px);
}
html:not([data-tier="phone"]) #sidebar-left {
  flex: 0 0 0;
  width: 0;
}
html:not([data-tier="phone"]) #stage {
  height: 100%; /* Fallback fuer Browser ohne Container-Query-Einheiten */
  height: min(100cqh, calc((100cqw - var(--side-w)) * 0.75));
  align-self: center;
}
html:not([data-tier="phone"]) #sidebar-right {
  position: relative;
  flex: 1 1 var(--side-w);
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
  padding: 12px;
  box-sizing: border-box;
  overflow-y: auto;
  /* Die Basisregel (Platzhalter-Letterbox) setzt Farbe/Schrift fuer
     zentrierten Text - hier zuruecksetzen, sonst "lecken" sie in die Chips. */
  color: initial;
  font-size: initial;
  letter-spacing: normal;
}
/* Topbar-Inhalte werden zu eigenen Karten in der Spalte (Fortschritt und
   Zeit/Fehler getrennt, wie in der Skizze). */
html:not([data-tier="phone"]) #sidebar-right #topbar {
  display: contents;
}
html:not([data-tier="phone"]) #sidebar-right #progress-wrap,
html:not([data-tier="phone"]) #sidebar-right #stats {
  box-sizing: border-box;
  width: 100%;
  padding: 10px 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f4f6f8 100%);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 3px 10px rgba(12,164,209,0.1);
  flex-shrink: 0;
}
/* SCOPE-Marke sitzt (per JS) in der Fortschrittszeile: SCOPE | LEVEL 1/8 | 0 % */
html:not([data-tier="phone"]) #sidebar-right #progress-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}
html:not([data-tier="phone"]) #sidebar-right #progress-label #prog-pct {
  margin-left: auto;
}
html:not([data-tier="phone"]) #sidebar-right #topbar .brand {
  flex-shrink: 0;
}
html:not([data-tier="phone"]) #sidebar-right #stats {
  justify-content: space-around;
  gap: 12px;
}
/* Klassen: grosse Buttons untereinander, teilen sich die uebrige Hoehe. */
html:not([data-tier="phone"]) #sidebar-right #label-bar {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 10px;
}
html:not([data-tier="phone"]) #sidebar-right #label-bar-title {
  margin: 0;
  flex-shrink: 0;
}
html:not([data-tier="phone"]) #sidebar-right .label-chip {
  flex: 1 1 0;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6px 10px;
  font-size: 15px;
  line-height: 1.25;
  box-sizing: border-box;
  overflow-wrap: break-word;
}
/* Papierkorb, dann Hinweis-Button (DOM-Reihenfolge hat sie umgekehrt).
   Seit 2026-10-19 (Julian): Papierkorb gleich gross wie die vier Kategorie-
   Buttons. Die Hoehe teilen sich #label-bar (Gewicht 4) und #trash (Gewicht 1):
   #label-bar hat als Basis die feste Titelhoehe (14px) plus 4 Abstaende zu je
   10px = 54px, dazu 16px Ausgleich: #trash hat wegen border-box mindestens
   4px (2 x 2px Rahmen) als eigene Basisgroesse, was sonst jedes Kategorie-
   Feld 4px kleiner machen wuerde (Basisdifferenz 4px x Gewicht 4 = 16px). */
html:not([data-tier="phone"]) #sidebar-right #label-bar {
  flex: 4 1 70px;
}
html:not([data-tier="phone"]) #sidebar-right #label-bar-title {
  height: 14px;
  line-height: 14px;
}
html:not([data-tier="phone"]) #sidebar-right #trash {
  order: 9;
  width: 100%;
  flex: 1 1 0;
  min-height: 48px;
  box-sizing: border-box;
}
html:not([data-tier="phone"]) #sidebar-right #trash > div:nth-child(2) {
  font-size: 15px;
  font-weight: 600;
  color: #0a3f70;
}
html:not([data-tier="phone"]) #sidebar-right #btn-hint {
  order: 10;
  position: static;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  padding: 9px 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Endcard + Rechtstexte + Hinweise (seit 2026-10-15, Ethikantrag-Umsetzung) ──
   #results-spruch: ergebnisabhaengiger Spruch (i18n.js ENDCARD_SPRUECHE).
   .primary-big: grosser "Nochmal spielen"-Knopf; Teilen/Feedback bleiben zweitrangig.
   .legal-modal-card h2/.legal-modal-text: gegliederte Datenschutzerklaerung (scrollbar).
   .pq-hint: Hinweiszeile unter Freitextfeldern (Aufenthaltsort, Feedback). */
#results-spruch{font-size:18px;font-weight:600;color:#0a3f70;text-align:center;
  max-width:560px;line-height:1.5;min-height:1.5em;margin:0;}
.results-actions{flex-wrap:wrap;justify-content:center;align-items:center;}
.results-actions button.primary-big{padding:16px 44px;font-size:17px;letter-spacing:.04em;
  animation:pulse 2.4s ease-out infinite;}
.pq-hint{font-size:.82rem;color:var(--muted);margin:6px 0 0;line-height:1.4;}
/* Link "Andere Person spielt eine neue Runde" unter den Endcard-Knoepfen (seit 2026-10-19) */
#play-other-link{
  background:none;border:none;padding:10px 12px;margin-top:2px;cursor:pointer;
  color:var(--muted);font-size:.85rem;text-decoration:underline;font-family:inherit;
}
#play-other-link:hover{color:#8a6500;}
.legal-modal-card h2{font-size:1rem;color:#0a3f70;margin:18px 0 6px;}
.legal-modal-card h2:first-child{margin-top:0;}
#datenschutz-modal .legal-modal-card{max-width:760px;max-height:88vh;overflow-y:auto;}
.legal-modal-text p{font-size:.92rem;}

/* "Vollstaendige Liste anzeigen" im Ergebnisbildschirm: gleiche Optik wie die
   uebrigen Ergebnis-Buttons statt Browser-Standard (seit 2026-10-15) */
#leaderboard-full-btn{margin-top:8px;padding:8px 18px;cursor:pointer;font-weight:600;
  font-family:var(--font-ui);font-size:12px;letter-spacing:.03em;
  background:linear-gradient(180deg,#ffffff 0%,#eef1f4 100%);color:#0a3f70;
  border:1px solid var(--accent);border-bottom:3px solid #0a3f70;border-radius:4px;}
#leaderboard-full-btn:hover{border-color:var(--accent2);color:#8a6500;}