:root{
  --bg:#0C1116; --card:rgba(16,22,29,.72); --card-solid:#141B23; --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  --ink:#E8EEF3; --muted:#8C9BAA; --cyan:#7FDBFF; --amber:#FFB547; --red:#E5463C; --green:#34AE62;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  box-sizing:border-box; height:100%;
}
/* Gemeinsamer Rahmen der 3D-Modelle (Werkzeuge im Vollbild). Die Szenen sind
   bewusst dunkel; beide Farbschemata nutzen dieselben Farben. */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#0C1116; } }
:root[data-theme="dark"]{ --bg:#0C1116; }
*,*::before,*::after{box-sizing:inherit}
html,body{height:100%; margin:0; overflow:hidden; background:var(--bg)}
body{color:var(--ink); font-family:'Montserrat',-apple-system,"Segoe UI",system-ui,sans-serif; font-size:15px; line-height:1.45; -webkit-font-smoothing:antialiased}
#gl{position:fixed; inset:0; width:100%; height:100%; display:block; touch-action:none; outline:none}
#gl:focus-visible{outline:3px solid var(--amber); outline-offset:-4px}
#gl[data-pointer]:focus-visible{outline:none}

.card{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.7);
}
.lbl{font-family:var(--mono); font-size:11.5px; white-space:nowrap; letter-spacing:.1em; text-transform:uppercase; color:#B9C6D2; font-weight:700}   /* Zwischentitel: hell genug auf den dunklen Karten */

/* Oben links */
.hud{position:fixed; top:max(18px,env(safe-area-inset-top,0px)); left:20px; width:min(320px,calc(100vw - 40px)); z-index:3; pointer-events:none}
.hud > *{pointer-events:auto}
.kicker{font-weight:800; font-size:16px; letter-spacing:.01em; text-transform:uppercase; line-height:1; margin:0; text-shadow:0 1px 3px rgba(0,0,0,.85),0 0 14px rgba(0,0,0,.55)}
.title{font-weight:800; font-size:clamp(22px,2.3vw,30px); line-height:.95; letter-spacing:-.02em; text-transform:uppercase; color:var(--cyan); margin:2px 0 8px; text-shadow:0 1px 3px rgba(0,0,0,.8),0 0 16px rgba(0,0,0,.5),0 0 30px rgba(127,219,255,.25)}   /* Schatten: lesbar auch über hellem Gelände */
.desc{margin:0 0 10px; color:#fff; font-size:12.5px; text-shadow:0 1px 2px rgba(0,0,0,.8), 0 0 12px rgba(0,0,0,.6)}   /* liegt ohne Karte auf dem Bild: Schatten hält den Text auch über hellem Grund lesbar */
.stats{display:flex; gap:6px; margin-bottom:8px; width:max-content; max-width:min(400px,calc(100vw - 40px))} /* Kennzahlen dürfen breiter sein als der schmale Titel */
.stat{padding:6px 10px 7px; flex:1 1 auto; min-width:0} /* Breite nach Inhalt, damit kurze Werte nicht abgeschnitten werden */
.stat .v{font-family:var(--mono); font-size:13.5px; overflow:hidden; text-overflow:ellipsis; font-weight:600; color:var(--ink); white-space:nowrap; margin-top:1px}
.stat .v.c{color:var(--cyan)}
.info{padding:11px 16px; font-size:14.5px; line-height:1.45; display:flex; gap:14px; align-items:center; min-height:86px; overflow:hidden} /* wächst mit dem Text (drei Zeilen plus Tastenzeile) */
/* --dockW: Breite der Merk-Karte, gleich breit wie der Kopf oben links; der Hinweis hält davon Abstand */
:root{--dockW:min(320px,calc(100vw - 40px))} /* Breite der Infokarte unten links (Merk-Karte und Hinweis) */
.caption{position:fixed; z-index:3; left:50%; transform:translateX(-50%); bottom:max(18px,env(safe-area-inset-bottom,0px)); width:min(600px,calc(100vw - 2 * (var(--dockW) + 76px)))} /* mittig, mit Abstand zur Merk-Karte links und zur Fussleiste rechts (rund 420 px) */
.info .sub{font-size:11.5px; color:var(--muted); margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.info .sub kbd{font-family:var(--mono); font-size:10.5px; border:1px solid var(--line-2); border-radius:4px; padding:0 4px; color:var(--ink)}
.info .t{flex:1 1 auto; min-width:0}   /* lange Hilfezeilen kürzen statt die Karte zu verbreitern */
.info b{font-weight:700; color:#fff}
.info .cy{color:var(--cyan); font-weight:600}
.info .am{color:var(--amber); font-weight:600}

/* Oben rechts */
.panel{position:fixed; top:max(18px,env(safe-area-inset-top,0px)); right:20px; width:410px; padding:14px; z-index:3; display:grid; gap:12px}
.row{display:flex; align-items:center; justify-content:space-between; gap:8px}
.seg{display:flex; gap:4px; flex-wrap:wrap}
button{
  font:inherit; font-size:14px; font-weight:500; color:var(--ink); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:10px;
  padding:7px 12px; min-height:38px; transition:background .12s, border-color .12s, color .12s;
}
button:hover{background:rgba(255,255,255,.09); border-color:var(--line-2)}
button:focus-visible{outline:2px solid var(--amber); outline-offset:2px}
button svg{width:17px; height:17px; flex:0 0 17px}
button.on, button[aria-pressed="true"], button[aria-selected="true"]{background:#F2F6F9; color:#0F161D; border-color:#F2F6F9}
button.primary{background:var(--amber); color:#1D1300; border-color:var(--amber); font-weight:600}
button.primary:hover{filter:brightness(1.05)}
button.icon{width:38px; padding:0; border-radius:14px}
.section{display:grid; gap:8px}
.tabs{display:grid; grid-template-columns:1fr 1fr; gap:4px; background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:12px; padding:4px}
.tabs button{border:none; min-height:36px; font-size:13.5px}
.hdr{margin-left:auto}
.section[hidden]{display:none}
.chips{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px}
.chips button{flex-direction:column; gap:4px; font-size:12px; line-height:1.15; min-height:50px; padding:6px 4px; text-align:center}
.legend{display:flex; gap:12px; font-size:12px; color:var(--muted)}
.legend span{display:flex; align-items:center; gap:5px}
.legend i{width:14px; height:7px; border-radius:2px; display:inline-block}

/* Unten */
.dockL{position:fixed; left:20px; bottom:max(18px,env(safe-area-inset-bottom,0px)); z-index:3; padding:12px 14px; width:var(--dockW); min-height:86px; font-size:14px; line-height:1.5}
.dockL[hidden]{display:none}
.link{position:fixed; right:20px; bottom:max(18px,env(safe-area-inset-bottom,0px)); z-index:3; display:inline-flex; align-items:center; gap:8px; padding:9px 14px; color:var(--ink); text-decoration:none; font-size:13.5px; font-weight:500}
.link:hover{border-color:var(--line-2)}
.link svg{width:16px; height:16px}

/* 3D-Beschriftungen */
#labels{position:fixed; inset:0; pointer-events:none; z-index:2}
.tag{position:absolute; left:0; top:0; transform:translate(-50%,-50%); white-space:nowrap; font-size:12px; font-weight:600;
  background:rgba(12,17,22,.82); border:1px solid rgba(127,219,255,.35); color:#EAF6FF; padding:4px 10px 4px 8px; border-radius:999px;
  display:flex; align-items:center; gap:6px; box-shadow:0 0 14px rgba(127,219,255,.18)}
.tag::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--cyan)}
.tag small{font-family:var(--mono); font-size:10px; color:var(--muted); font-weight:500}
.tag.amber{border-color:rgba(255,181,71,.55); box-shadow:0 0 14px rgba(255,181,71,.25)} .tag.amber::before{background:var(--amber)}
.tag[hidden]{display:none}

dialog{border:1px solid var(--line-2); border-radius:18px; padding:22px 24px; max-width:min(560px,92vw); background:var(--card-solid); color:var(--ink); box-shadow:0 30px 60px -20px rgba(0,0,0,.7)}
dialog::backdrop{background:rgba(5,8,12,.6)}
dialog h2{margin:0 0 12px; font-size:22px}
dialog ul{list-style:none; margin:0 0 18px; padding:0; display:grid; gap:10px}
dialog li{padding:2px 0 2px 14px; border-left:3px solid var(--amber)}
dialog ul[hidden]{display:none}
.loading{position:fixed; inset:0; display:grid; place-items:center; color:var(--muted); font-size:14px; z-index:1}

@media (max-width:900px){
  .hud{width:calc(100vw - 32px); left:16px; top:max(12px,env(safe-area-inset-top,0px))}
  .desc{display:none}
  .stats{margin-bottom:0}
  .stat{padding:4px 8px 5px} .stat .v{font-size:12.5px}
  .caption{left:10px; right:10px; transform:none; width:auto; bottom:auto; top:calc(var(--hudH,150px) + 18px); height:auto; min-height:0; padding:9px 12px}
  .info .sub{display:none}
  .kicker{font-size:13px} .title{font-size:26px; margin-bottom:8px}
  .info{padding:9px 12px; font-size:13px; min-height:0}
    .panel{top:auto; bottom:max(10px,env(safe-area-inset-bottom,0px)); right:10px; left:10px; width:auto; padding:10px; gap:8px}
  .panel .legend{display:none}
  .dockL{display:none}
  .link{right:auto; left:50%; transform:translateX(-50%); bottom:auto; top:max(12px,env(safe-area-inset-top,0px)); display:none}
  .link.inpanel{display:inline-flex; position:static; transform:none; padding:4px 0; background:none; border:none; box-shadow:none; backdrop-filter:none; color:var(--muted); font-size:12px}
  .chips button{font-size:10.5px; min-height:40px; padding:4px 2px}
  .stats{display:none}
  .panel .lbl{display:none} .panel .legend{display:none}
  .panel .dl-kopf .lbl{display:inline} /* Namen der Regler bleiben (Neigung, Uhrzeit, Arm heben …) */
  .tabs button{font-size:12px; min-height:34px; padding:4px 6px}
  .actions button{flex:1 1 auto}
}
.link.inpanel{display:none}
@media (max-width:900px){ .link.inpanel{display:inline-flex} }
@media (prefers-reduced-motion: reduce){ button{transition:none} }
.link.back{font-weight:600}
.loading.fehler{color:var(--ink); padding:0 24px; text-align:center}

/* Gemeinsame Bausteine für die Bedienkarte */
.acts{display:grid; grid-template-columns:repeat(var(--n,4),minmax(0,1fr)); gap:4px}
.acts button{white-space:nowrap; padding:7px 6px; font-size:13px}
.acts .wide{grid-column:span 2}
.acts .full{grid-column:1 / -1}
/* Knöpfe mit Symbol über der Beschriftung (Tempo, Heizplatte) */
.acts.ikon button{flex-direction:column; gap:1px; padding:5px 3px 5px; line-height:1.1}
.acts.ikon svg{width:19px; height:19px; flex:0 0 19px}
/* Abspielen: Pause-Symbol, solange es läuft (Symbole aus rahmen.js) */
button .ik-pause, button[aria-pressed="true"] .ik-play, button[data-pause="true"] .ik-play{display:none}
button[aria-pressed="true"] .ik-pause, button[data-pause="true"] .ik-pause{display:inline}
.merke{display:grid; gap:6px; margin-top:8px; font-size:14px}
/* Titel und Text der Merk-Karte (Altsteinzeit, Pfahlbaudorf, Römerstadt, Mittelalterstadt, Boden, Blüte, Energie, Velo) */
.dock-titel{margin:4px 0 4px; font-size:16px; font-weight:700}
.dock-text{margin:0; font-size:14px; line-height:1.5; color:#C9D3DC}
.merke div{display:flex; align-items:baseline; gap:8px}
.merke em{font-style:normal; font-weight:600}
@media (max-width:900px){ .acts button{font-size:12px} .merke{font-size:12px} }

/* Quellenangabe unter den Forscherfragen */
dialog .quelle{margin:-6px 0 16px; font-size:11.5px; color:var(--muted)}

/* Links im Hinweis (Link zur Ansicht) */
.info a{color:var(--cyan); text-decoration:underline; text-underline-offset:2px}
.info a.linkzeile{word-break:break-all}
/* Kopfzeile der Bedienkarte: fünf Symbolknöpfe */
.panel .seg.hdr{gap:3px}
@media (min-width:901px){ .panel .legend{font-size:11.5px; gap:9px; flex-wrap:wrap; row-gap:2px} }
/* Die Zeile «Modell» der Bedienkarte trägt Legende und fünf Symbolknöpfe;
   das Wort «Modell» entfällt, sonst bricht die Zeile um. */
.panel > .row:first-child > .lbl{display:none}
.panel > .row:first-child{flex-wrap:nowrap}
.panel > .row:first-child .legend{min-width:0; flex-wrap:wrap; row-gap:2px}
/* Reiter: zwei oder drei gleich breit */
.tabs{grid-template-columns:repeat(var(--teile,2),minmax(0,1fr))}
.tabs button{white-space:normal; line-height:1.15}

/* Kleine Handys hoch: Bedienkarte scrollt, Kopf knapper, damit die Szene Platz behält */
@media (max-width:900px) and (max-height:760px) and (orientation:portrait){
  .panel{max-height:50vh; overflow-y:auto; overscroll-behavior:contain}
  .kicker{display:none} .title{font-size:21px; margin-bottom:6px} .title br{display:none}
}
@media (max-width:400px){ .acts button, .panel .seg button{white-space:normal; line-height:1.15; padding:5px 4px} }
/* Handy quer: Bedienkarte als scrollbare Spalte rechts, Hinweis unten links, Szene dazwischen */
@media (max-width:900px) and (max-height:500px) and (orientation:landscape){
  :root{--spalte:min(360px,46vw)}
  .hud{width:auto; left:max(12px,env(safe-area-inset-left,0px)); right:calc(var(--spalte) + 20px); top:max(8px,env(safe-area-inset-top,0px))}
  .kicker{display:none} .title{font-size:18px; margin:0} .title br{display:none}
  .panel{top:max(8px,env(safe-area-inset-top,0px)); bottom:max(8px,env(safe-area-inset-bottom,0px)); left:auto; right:max(8px,env(safe-area-inset-right,0px)); width:var(--spalte); overflow-y:auto; overscroll-behavior:contain; align-content:start}
  .caption{top:auto; bottom:max(8px,env(safe-area-inset-bottom,0px)); left:max(8px,env(safe-area-inset-left,0px)); right:calc(var(--spalte) + 20px); padding:6px 10px}
  .info{font-size:12px}
  .panel button{font-size:12.5px; padding-left:7px; padding-right:7px}
  .acts button, .panel .seg button{white-space:normal; line-height:1.15}
}

/* Schmale Bildschirme: Zusatztext der 3D-Beschriftungen weglassen, damit sie nebeneinander Platz haben */
@media (max-width:500px){ .tag small{display:none} }

/* Einklappbare Bedienkarte (nur bis 900 px, Knopf in includes/modell-seite.php, Logik in rahmen.js) */
.zuklapp{display:none}
@media (max-width:900px){
  .zuklapp{display:inline-flex; gap:6px; font-size:13px; font-weight:600; padding:6px 12px}
  .zuklapp svg{width:16px; height:16px; transition:transform .2s}
  /* Pfeil nach oben = aufklappen, nach unten = einklappen */
  .panel:not(.zu) .zuklapp svg{transform:rotate(180deg)}
  .panel.zu{gap:0}
  .panel.zu > :not(.row), .panel.zu .link.inpanel{display:none !important}
  .panel.zu{max-height:none; overflow:visible}
  /* Kopfzeile immer einreihig: Symbole schrumpfen auf schmalen Handys statt umzubrechen */
  .panel > .row:first-child{gap:6px}
  .panel > .row:first-child .seg.hdr{flex-wrap:nowrap; flex:none}
  .panel > .row:first-child button.icon{width:clamp(28px, 8.6vw, 38px); padding:0}
  .zuklapp{flex:none; white-space:nowrap; padding:6px 9px; gap:5px}
}
@media (max-width:900px) and (max-height:500px) and (orientation:landscape){ .panel.zu{bottom:auto} }
/* Niedrige Bildschirme mit Seitenkarte (Laptop 720/768 px hoch): Bedienkarte kompakter, damit sie nicht bis unter Hinweis und Merk-Karte reicht */
@media (min-width:901px) and (max-height:820px){
  .panelkarte{gap:7px; padding:12px}
  .panel .acts button, .panel .tabs button{min-height:33px; padding-top:5px; padding-bottom:5px}
  .panel .chips button{min-height:44px}
  .panel .lbl{display:none} /* Zwischentitel weg wie auf dem Handy */
  .panel .dl-kopf .lbl{display:inline} /* Namen der Regler bleiben */
  .panel .acts.ikon button{padding-top:4px; padding-bottom:4px}
}
@media (prefers-reduced-motion: reduce){ .zuklapp svg{transition:none} }
/* Bedienkarte ausblenden ab 901 px (Symbol rechts vom Vollbild): es bleibt nur die Symbolleiste.
   Bis 900 px übernimmt der Knopf «Steuerung»/«Einklappen» das, das Symbol entfällt dort. */
#btnZu .pf{transition:transform .2s; transform-box:fill-box; transform-origin:center; transform:rotate(180deg)}
.panel.zu #btnZu .pf{transform:none}
/* rahmen.js ohneBedienkarte(): misst kurz mit «zu», ohne dass die Pfeile dabei zu drehen beginnen */
.panel.mess, .panel.mess *{transition:none !important}
@media (min-width:901px){
  /* Die Symbolleiste steht immer ohne Kartengrund und Rahmen: die Symbole einzeln wie die Fussleiste unten rechts,
     mit demselben Abstand (10 px). Alles darunter (Legende, Reiter, Teile) ist eine eigene Karte (.panelkarte). */
  .panel.card{padding:0; gap:10px; background:none; border-color:transparent; border-radius:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none}
  .panel > .row:first-child{justify-content:flex-end}
  .panel .seg.hdr{gap:10px}
  .panel .seg.hdr button.icon{background:var(--card); backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3); box-shadow:0 18px 40px -18px rgba(0,0,0,.7)}
  .panel .seg.hdr button.icon:hover{background:linear-gradient(rgba(255,255,255,.09),rgba(255,255,255,.09)),var(--card)}
  .panel .seg.hdr button.icon[aria-pressed="true"]{background:#F2F6F9; color:#0F161D; border-color:#F2F6F9}
  .panelkarte{display:grid; gap:12px; padding:14px}
  .panelkarte > .legend:empty{display:none}
  .panel.zu{width:auto; gap:0}
  .panel.zu > :not(.row){display:none !important}
}
@media (max-width:900px){ .panelkarte{display:contents} }
/* Handy: Symbole und «Steuerung» im Stil des Desktops (einzeln auf Kartengrund mit Schatten, gleicher Hover, gedrückt hell).
   Zugeklappt ohne gemeinsame Karte dahinter, wie die Symbolleiste am Desktop; aufgeklappt trägt die Bedienkarte alles. */
@media (max-width:900px){
  .panel .seg.hdr button.icon, .panel .zuklapp{background:var(--card); border-color:var(--line); backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3); box-shadow:0 18px 40px -18px rgba(0,0,0,.7); border-radius:14px}
  .panel .seg.hdr button.icon:hover, .panel .zuklapp:hover{background:linear-gradient(rgba(255,255,255,.09),rgba(255,255,255,.09)),var(--card); border-color:var(--line-2)}
  .panel .seg.hdr button.icon[aria-pressed="true"]{background:#F2F6F9; color:#0F161D; border-color:#F2F6F9}
  .panel .zuklapp{min-height:0; align-self:stretch}
  .panel.card.zu{background:none; border-color:transparent; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none}
  /* Bedienkarte öffnet nach oben (Bottom Sheet): die Leiste mit «Steuerung» und den Symbolen steht zuunterst und bleibt beim
     Auf- und Zuklappen genau an ihrem Platz; die Karte reicht über die ganze Breite, oben gerundet. Scrollt die Karte
     (kleine Handys), bleibt die Leiste unten stehen. */
  .panel.card{left:0; right:0; bottom:0; padding:10px 10px max(10px,env(safe-area-inset-bottom,0px)); border-radius:16px 16px 0 0; border-width:1px 0 0}
  .panel > .row:first-child{order:99; position:sticky; bottom:0; z-index:5}   /* über «Alle Werkzeuge» (z-index 3 als Rasterelement) */
  .panel.card:not(.zu) > .row:first-child{bottom:calc(-1 * max(10px,env(safe-area-inset-bottom,0px))); margin:0 -10px calc(-1 * max(10px,env(safe-area-inset-bottom,0px))); padding:8px 10px max(10px,env(safe-area-inset-bottom,0px)); background:var(--card-solid); border-top:1px solid var(--line)}
}
@media (max-width:900px) and (max-height:500px) and (orientation:landscape){
  /* Handy quer: Spalte rechts wie bisher, Leiste oben; sie bleibt beim Aufklappen ebenfalls stehen */
  .panel.card{left:auto; right:max(8px,env(safe-area-inset-right,0px)); bottom:max(8px,env(safe-area-inset-bottom,0px)); padding:10px; border-radius:14px; border-width:1px}
  .panel > .row:first-child{order:0; position:static}
  .panel.card:not(.zu) > .row:first-child{margin:0; padding:0; background:none; border-top:none}
  .panel.card.zu{bottom:auto}
}
@media (max-width:900px){ #btnZu{display:none} }
/* Handy und Tablet hoch: Die offene Bedienkarte ist eine eigene Karte über der Leiste (wie am Desktop die Karte unter der
   Symbolleiste). Die Leiste mit «Steuerung» und den Symbolen bleibt beim Auf- und Zuklappen genau gleich, ohne Grund
   dahinter; scrollt der Inhalt (niedrige Handys), scrollt nur die Karte. Die Leiste ist dafür nicht mehr sticky. */
@media (max-width:900px) and (orientation:portrait), (max-width:900px) and (min-height:501px){
  .panel.card{background:none; border:none; border-radius:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; max-height:none; overflow:visible}
  .panel > .row:first-child, .panel.card:not(.zu) > .row:first-child{position:static; margin:0; padding:0; background:none; border-top:none}
  .panelkarte{display:grid; gap:8px; padding:10px; max-height:calc(100vh - var(--hudH,120px) - 90px); max-height:calc(100dvh - var(--hudH,120px) - 90px); overflow-y:auto; overscroll-behavior:contain}
}
@media (max-width:900px) and (max-height:760px) and (orientation:portrait){ .panelkarte{max-height:50vh; max-height:50dvh} }
/* Beim Öffnen: Knöpfe für Bedienkarte und Hinweis pulsieren kurz in Bernstein (rahmen.js setzt «lockt») */
@keyframes lockt{
  0%{box-shadow:0 0 0 0 rgba(255,181,71,.75); border-color:var(--amber); color:var(--amber)}
  70%{box-shadow:0 0 0 12px rgba(255,181,71,0); border-color:var(--amber); color:var(--amber)}
  100%{box-shadow:0 0 0 0 rgba(255,181,71,0)}
}
.lockt{animation:lockt 1.6s ease-out 5} /* rund 8 Sekunden */
@media (prefers-reduced-motion: reduce){ .lockt{animation:none; border-color:var(--amber); color:var(--amber)} }
@media (prefers-reduced-motion: reduce){ #btnZu .pf{transition:none} }
/* Tablet quer und kleine Laptops: Merk-Karte, Hinweis und Kennzahlen kleiner. Verkleinert wird der Inhalt
   der Karten (zoom auf die Kinder), so werden auch die Schriften mitgenommen, die jedes Modell selbst in px
   setzt; Lage und Rand der Karten bleiben unberührt. */
@media (min-width:901px) and (max-width:1366px){
  :root{--zk:.92}
  .dockL > *, .caption > *, .stats{zoom:var(--zk)}
  .dockL{padding:10px 12px; min-height:0}
  .info{padding:9px 14px; min-height:0; gap:12px}
}
@media (min-width:901px) and (max-width:1199px){ :root{--zk:.85} }

/* Modellreihe (z. B. Pfahlbaudorf, Römerstadt, Mittelalterstadt): Symbole links neben «Alle Werkzeuge»,
   verbunden durch eine feine Zeitlinie; das aktuelle Modell ist hervorgehoben */
.fussR{position:fixed; right:20px; bottom:max(18px,env(safe-area-inset-bottom,0px)); z-index:3; display:flex; align-items:center; gap:10px}
.fussR .link{position:static; height:40px; padding-top:0; padding-bottom:0}   /* Leiste und «Alle Werkzeuge» gleich hoch */
/* «Alle Werkzeuge» wie die Symbolknöpfe und «i»: gedämpft, beim Überfahren hell auf aufgehelltem Kartengrund */
.fussR .link.back{color:#9FB0BF; transition:background .12s, border-color .12s, color .12s}
.fussR .link.back:hover, .fussR .link.back:focus-visible{background:linear-gradient(rgba(255,255,255,.09),rgba(255,255,255,.09)),var(--card); border-color:var(--line-2); color:var(--ink)}
.fussR .link.back:focus-visible{outline:2px solid var(--amber); outline-offset:2px}
/* Wasserzeichen unten Mitte (auch im Präsentationsmodus), mittig zur Fussleiste; auf dem Handy ausgeblendet.
   Farbe wie «Alle Werkzeuge» (#9FB0BF), Logo einfarbig (logo-icon-mono.svg), ohne Hintergrund und Schatten */
.wzZeichen{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(max(18px,env(safe-area-inset-bottom,0px)) + 6px); z-index:3; display:flex; align-items:center; gap:7px; padding:5px 8px; border-radius:9px; color:#9FB0BF; font:600 12.5px/1 Montserrat, Arial, sans-serif; letter-spacing:.02em; text-decoration:none; transition:color .12s}
.wzZeichen img{width:18px; height:18px; display:block}
/* «Link zu dieser Ansicht kopiert» oben Mitte, im Stil von «Alle Werkzeuge» (Kartengrund, #9FB0BF, 13,5 px).
   Auf dem Handy über dem Titel, schmaler und zweizeilig, falls nötig */
.linkMeldung{position:fixed; left:50%; top:max(18px,env(safe-area-inset-top,0px)); z-index:6; transform:translate(-50%,-8px); opacity:0; visibility:hidden; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; column-gap:6px; row-gap:2px; min-height:40px; width:max-content; max-width:min(560px,calc(100vw - 40px)); padding:8px 14px; box-sizing:border-box; color:#9FB0BF; font-size:13.5px; font-weight:600; line-height:1.3; text-align:center; transition:opacity .2s, transform .2s, visibility 0s .2s}
.linkMeldung.an{opacity:1; visibility:visible; transform:translate(-50%,0); transition:opacity .2s, transform .2s}
.linkMeldung a{color:#9FB0BF; text-decoration:underline; text-decoration-color:rgba(159,176,191,.45); text-underline-offset:3px; transition:color .12s}
.linkMeldung a:hover, .linkMeldung a:focus-visible{color:var(--ink); text-decoration-color:currentColor}
.linkMeldung a:focus-visible{outline:2px solid var(--amber); outline-offset:2px; border-radius:3px}
.linkMeldung a.linkzeile{word-break:break-all}
@media (max-width:900px){ .linkMeldung{top:max(12px,env(safe-area-inset-top,0px)); max-width:calc(100vw - 32px); font-size:13px; background:var(--card-solid)} }   /* deckend über dem Titel */
@media (prefers-reduced-motion: reduce){ .linkMeldung, .linkMeldung.an{transition:none} }
.wzZeichen:hover, .wzZeichen:focus-visible{color:var(--ink)}
.wzZeichen:focus-visible{outline:2px solid var(--amber); outline-offset:2px}
@media (max-width:900px){ .wzZeichen{display:none} }
/* Knopf «i» unten links an der Stelle der Infokarte (Logik in rahmen.js): zu allein als «i», offen als «×» oben rechts
   in der Karte; Punkt = Hinweis hat sich geändert, während die Karte zu ist */
.infoknopf{position:relative; width:40px; height:40px; min-height:40px; padding:0; border-radius:14px; color:#9FB0BF}
.infoknopf svg{width:19px; height:19px; flex-basis:19px}
.infoknopf .ik-x, .infoknopf[aria-expanded="true"] .ik-i{display:none}
.infoknopf[aria-expanded="true"] .ik-x{display:block}
/* Hover wie die Symbolknöpfe der Bedienkarte: deren Aufhellung über dem Kartengrund (sonst fiele der Kartengrund weg) */
/* Nur mit Maus (auf Touch-Geräten bliebe der Hover nach dem Tippen stehen); «frisch» (rahmen.js): Der Knopf ist eben vom «×» an den
   Platz des «i» gesprungen, der Browser hält ihn noch als gehovert, bis sich der Zeiger bewegt. Dann normal zeigen. */
@media (hover:hover){ .infoknopf:hover{background:linear-gradient(rgba(255,255,255,.09),rgba(255,255,255,.09)),var(--card); border-color:var(--line-2); color:var(--ink)} }
.infoknopf.frisch:hover{background:var(--card); border-color:var(--line); color:#9FB0BF}
/* Punkt auch am Symbol «Steuerung einblenden» und an «Steuerung»: Bedienkarte beim Aufruf eingeklappt, bis sie aufgeklappt wird (rahmen.js) */
#btnZu, #btnPanel{position:relative}
.infoknopf.neu::after, #btnZu.neu::after, #btnPanel.neu::after{content:''; position:absolute; top:3px; right:3px; width:9px; height:9px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 2px var(--card-solid)}
/* Symbolknöpfe oben rechts gleich wie «i» und die Zeitreise unten: 40 px, Ecken 14 px wie alle Karten */
.panel .seg.hdr button.icon{width:40px; height:40px; min-height:40px; border-radius:14px}
@media (max-width:900px){
  .panel > .row:first-child button.icon{width:clamp(28px, 8.6vw, 40px); height:auto; min-height:0; aspect-ratio:1}
}
@media (min-width:901px){ .caption.weg:not(.blitz){display:none} }
/* Touch-Geräte ab 901 px: keine Tastenkürzel-Zeile (Mausrad, Pfeiltasten) im Hinweis */
@media (min-width:901px) and (pointer:coarse){ .info .sub{display:none} }
.reihe{position:relative; display:flex; align-items:center; gap:8px}
.reihe.card{height:40px; padding:0; gap:14px; border-radius:14px; background:none; border:none; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none}
.reihe::before{content:''; position:absolute; left:20px; right:20px; top:50%; height:1px; background:var(--line-2)}
.reihe a, .reihe span{position:relative; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:14px; background:var(--card-solid); border:1px solid var(--line); color:#9FB0BF; text-decoration:none; transition:border-color .15s, color .15s, background .15s}
.reihe svg{width:17px; height:17px}
.reihe a:hover, .reihe a:focus-visible{border-color:var(--line-2); color:var(--ink); background:#1C2530; outline:none}
.reihe .aktiv{border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.14); color:#fff}
/* Unten rechts: Symbole so gross wie der Knopf «i» (40 px, eigener Kartengrund), die Zeitlinie läuft dazwischen durch */
.reihe.card a, .reihe.card span{width:40px; height:40px; background:var(--card); backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3); box-shadow:0 18px 40px -18px rgba(0,0,0,.7)}
.reihe.card svg{width:19px; height:19px}
.reihe.card::before{height:3px; margin-top:-1.5px; background:#AEBBC7; border-radius:2px; box-shadow:0 0 0 1px rgba(12,17,22,.55)} /* Zeitlinie zwischen den Symbolen, mit dunklem Rand auch über hellem Gelände sichtbar */
.reihe.card a:hover, .reihe.card a:focus-visible{background:linear-gradient(rgba(255,255,255,.09),rgba(255,255,255,.09)),var(--card)}
.reihe.card .aktiv{background:linear-gradient(rgba(255,255,255,.14),rgba(255,255,255,.14)),var(--card)}
.reihe [data-tip]:hover::after, .reihe a:focus-visible::after{content:attr(data-tip); position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%); white-space:nowrap; padding:5px 9px; border-radius:8px; background:var(--card-solid); border:1px solid var(--line-2); color:var(--ink); font-size:12px; font-weight:600; pointer-events:none; box-shadow:0 8px 20px -10px rgba(0,0,0,.8)}
.reihe.card [data-tip]:last-child:hover::after, .reihe.card a:last-child:focus-visible::after{left:auto; right:-4px; transform:none}
.panelfuss{display:none}
@media (max-width:900px){
  .fussR{display:none}
  .panelfuss{display:flex; align-items:center; justify-content:space-between; gap:10px}
  .reihe.inpanel{gap:6px}
  .reihe.inpanel a, .reihe.inpanel span{width:30px; height:30px}
  .reihe.inpanel svg{width:17px; height:17px}
  .reihe.inpanel [data-tip]:hover::after{display:none}
}
@media (prefers-reduced-motion: reduce){ .reihe a{transition:none} }

/* Versteckte Bedienteile bleiben versteckt, auch wenn ihre Klasse ein display setzt (z. B. .acts als Raster, Knöpfe als inline-flex) */
.panel [hidden], .dockL [hidden], .caption [hidden]{display:none !important}
/* Kopfzeile der Bedienkarte: Symbole bleiben in einer Zeile, auch bei langer Legende */
.panel > .row:first-child .seg.hdr{flex:none; flex-wrap:nowrap}

/* Schieberegler (Hebel, Körper, Licht, Sonnensystem): Bahn und Knopf einheitlich; ein Modell setzt
   höchstens eine eigene Bahnfarbe (::-webkit-slider-runnable-track / ::-moz-range-track) */
input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:30px; margin:0; background:transparent; cursor:pointer; touch-action:none}
input[type=range]:focus{outline:none}
input[type=range]::-webkit-slider-runnable-track{height:6px; border-radius:3px; background:rgba(255,255,255,.14)}
input[type=range]::-moz-range-track{height:6px; border-radius:3px; background:rgba(255,255,255,.14)}
input[type=range]::-moz-range-progress{height:6px; border-radius:3px; background:var(--amber)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:20px; height:20px; margin-top:-7px; border-radius:50%; background:#fff; border:4px solid var(--amber); box-shadow:0 2px 6px rgba(0,0,0,.55)}
input[type=range]::-moz-range-thumb{width:12px; height:12px; border-radius:50%; background:#fff; border:4px solid var(--amber); box-shadow:0 2px 6px rgba(0,0,0,.55)}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 7px rgba(255,181,71,.45)}
input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 7px rgba(255,181,71,.45)}
.regler{display:grid; gap:2px}
.dl-kopf{display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:22px}   /* Beschriftung + Wert über dem Regler */
.regler-wert{font-family:var(--mono); font-size:12.5px; font-weight:700; color:#1D1300; background:var(--amber); border-radius:999px; padding:2px 10px; margin-left:auto; font-variant-numeric:tabular-nums}
/* Stationen, Schritte und Zeiten als nummerierte Knopfliste (Altsteinzeit, Pfahlbaudorf, Römerstadt, Mittelalterstadt) */
.stationen{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px}
.stationen button{justify-content:flex-start; gap:7px; font-size:12px; min-height:30px; padding:4px 9px}
.stationen button b{font-family:var(--mono); font-size:10.5px; color:var(--muted); min-width:1.1em}
.stationen button[aria-pressed="true"] b{color:inherit}
.stationen.zeiten{grid-template-columns:repeat(4,minmax(0,1fr))}
.stationen.zeiten button{flex-direction:column; gap:0; padding:4px 3px; justify-content:center; line-height:1.2}
.stationen.zeiten button small{font-size:10px; color:var(--muted); font-weight:500}
.stationen.zeiten button[aria-pressed="true"] small{color:inherit}
@media (max-width:900px){ .stationen{grid-template-columns:repeat(3,minmax(0,1fr))} .stationen.zeiten{grid-template-columns:repeat(4,minmax(0,1fr))} }
/* Beschriftungen: gewählte hervorheben (Klasse .an), anklickbare mit .klickbar (sonst lassen sie Klicks zur Szene durch) */
.tag.an{outline:2px solid var(--amber)}
.tag.klickbar{pointer-events:auto; cursor:pointer}
.tag.klickbar.an::before{background:var(--amber)}

/* Infokarte unten links: Merk-Karte des Reiters und darunter der Hinweis in einer Karte, mit dem Knopf «i» in
   einer gemeinsamen Box (#infobox). Zu bleibt nur der Knopf; eine kurze Meldung (blitz) erscheint darüber.
   Gilt auf allen Grössen; das Handy setzt unten nur Lage und Grösse anders (hochkant unter dem Titel). */
@media all{
  .infobox{position:fixed; left:20px; bottom:max(18px,env(safe-area-inset-bottom,0px)); z-index:3; width:var(--dockW); display:flex; flex-direction:column-reverse; align-items:flex-start; gap:8px; pointer-events:none}
  .infobox > *{pointer-events:auto}
  .infokarte{align-self:stretch; display:flex; flex-direction:column;
    max-height:calc(100vh - var(--hudH,200px) - 60px); overflow-y:auto; overscroll-behavior:contain}
  .infokarte > *{flex-shrink:0} /* zu viel Inhalt: die Karte scrollt, statt die Merk-Karte über den Hinweis zu stauchen */
  .infokarte .info .sub{white-space:normal; overflow:visible} /* Hilfezeile in der schmalen Karte umbrechen statt abschneiden */
  .infokarte > .dockL, .infokarte > .caption{position:static; transform:none; left:auto; right:auto; bottom:auto; width:auto; background:none; border:none; border-radius:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none}
  .infokarte > .dockL{padding:12px 14px 10px; font-size:13.5px}
  .infokarte .dock-text, .infokarte .merke{font-size:inherit} /* Text der Infokarte einheitlich 13,5 px, auch wo ein Modell 14 px setzt */
  .infokarte > .caption{padding:10px 14px 12px; min-height:0; font-size:13px; border-top:1px solid var(--line)}
  .infokarte.weg:not(.blitz){display:none}
  .infokarte.weg.blitz > .dockL{display:none} /* kurze Meldung bei zugeklappter Karte: nur der Hinweis */
  .infokarte.weg.blitz > .caption{border-top:none}
  /* Offen: «×» klein oben rechts in der Karte; die erste Zeile weicht ihm aus (Platzhalter rechts) */
  .infoknopf[aria-expanded="true"]{position:absolute; top:8px; right:8px; z-index:1; width:28px; height:28px; min-height:28px; border-color:transparent; background:none; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none}
  .infoknopf[aria-expanded="true"] svg{width:16px; height:16px; flex-basis:16px}
  @media (hover:hover){ .infoknopf[aria-expanded="true"]:hover{background:rgba(255,255,255,.09); border-color:var(--line-2)} }
  .infokarte > .dockL::before{content:''; float:right; width:26px; height:22px}
  .infokarte:not(:has(> .dockL:not([hidden]))) > .caption{padding-right:40px} /* ohne Merk-Karte steht der Hinweis zuoberst */
}
/* Handy hochkant: Infokarte unter dem Titel über die ganze Breite (höchstens 38 % der Höhe, scrollt), «×» oben rechts
   in der Karte; zugeklappt steht der Knopf «i» oben rechts neben dem Titel. Handy quer: wie am Desktop unten links. */
@media (max-width:900px){
  .infobox{left:10px; right:auto; width:min(calc(100vw - 20px),560px); bottom:auto; top:calc(var(--hudH,120px) + 12px); flex-direction:column}   /* iPad hoch: höchstens 560 px breit, damit die Zeilen lesbar bleiben */
  .infokarte{max-height:38vh; max-height:38dvh}
  .infokarte > .dockL:not([hidden]){display:block; min-height:0; padding:10px 12px 8px; font-size:13px}
  .infokarte > .caption{padding:8px 12px 10px; font-size:12.5px}
  .infokarte .info .sub{display:none}
  .infoknopf[aria-expanded="false"]{position:fixed; top:max(12px,env(safe-area-inset-top,0px)); right:16px; width:38px; height:38px; min-height:38px}
  .hud .kicker, .hud .title{margin-right:46px}
}
@media (max-width:900px) and (max-height:500px) and (orientation:landscape){
  .infobox{top:auto; right:auto; left:max(8px,env(safe-area-inset-left,0px)); bottom:max(8px,env(safe-area-inset-bottom,0px)); width:min(320px,calc(100vw - var(--spalte) - 36px)); flex-direction:column-reverse}
  .infokarte{max-height:62vh; max-height:62dvh}
  .panel > .row:first-child button.icon{width:30px}   /* Symbolleiste passt in die 360 px breite Spalte */
  .infoknopf[aria-expanded="false"]{position:static; width:36px; height:36px; min-height:36px}
  .hud .kicker, .hud .title{margin-right:0}
}

/* Präsentationsmodus (Knopf neben dem Vollbild, Taste P): nur die Symbolleiste bleibt */
.praes .hud, .praes .infobox, .praes .infokarte, .praes .dockL, .praes .caption, .praes .fussR, .praes .zuklapp{display:none !important}
.praes .panel > :not(.row){display:none !important}
.praes .panel{width:auto; left:auto; gap:0; max-height:none; overflow:visible}

/* Sprechblase mit dem Namen eines Symbols (langes Drücken auf Touch-Geräten, rahmen.js) */
.tipp{position:fixed; z-index:20; max-width:min(260px,calc(100vw - 16px)); padding:6px 10px; border-radius:8px; background:var(--card-solid); border:1px solid var(--line-2); color:var(--ink);
  font-size:12.5px; font-weight:600; line-height:1.35; box-shadow:0 8px 20px -10px rgba(0,0,0,.8); pointer-events:none}
.tipp[hidden]{display:none}
.panel .seg.hdr button.icon, #btnInfo, .reihe a{-webkit-touch-callout:none; -webkit-user-select:none; user-select:none}

/* Bis 900 px sind die Knöpfe kleiner (Handy quer 30 px): Symbole, «Steuerung» und «i» mit demselben, kleineren Radius,
   sonst wirken die kleinen Knöpfe rund und das «i» eckig (am Dateiende, damit es die Grundregeln für Symbole und «i» weiter oben übersteuert) */
@media (max-width:900px){ .panel .seg.hdr button.icon, .panel .zuklapp, .infoknopf, .infoknopf[aria-expanded="false"]{border-radius:11px} }