/* Schriften lokal ausgeliefert (SIL Open Font License, siehe fonts/LICENSE-*) */
@font-face{font-family:"Gluten";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/gluten-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/atkinson-hyperlegible-latin-400-italic.woff2") format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2")}

/* Grundlage: randlos bis an die Kanten, Inhalt bleibt frei von Notch und Home-Indikator (siehe .screen) */
:root{color-scheme:light;-webkit-text-size-adjust:100%}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}

/* Layout: Startbildschirm mit Titel und Schwierigkeit, danach ein Spielbildschirm, der ohne Scrollen auskommt:
   mobil Grundriss oben, Hinweise und Knöpfe darunter; breit Grundriss links, Hinweise rechts. */
:root{
  --bg:#EDF2F3; --paper:#FAFCFC; --ink:#1B2A2D; --muted:#55686C; --line:#C4D2D4; --wall:#1B2A2D;
  --red:#C21F2B; --red-soft:#F6DADC; --fir:#2E6A4E; --gold:#D4A12A; --wood:#9A6B3F; --wood-d:#6B4628;
  --brick:#A85A44; --soot:#2A2421; --flame:#F2A23A; --seat:#557BA6; --seat-l:#7FA0C4; --linen:#FFFFFF; --blanket:#6E98C2;
  --rug1:#C9A3C9; --rug2:#E2CBE2; --skin:#F1C7A3; --beard:#F4F4F2; --hatch:rgba(27,42,45,.10); --ok:#2E7D4F;
  --r0:#CDE5D2; --r1:#CFDDF0; --r2:#EEDDB8; --r3:#E0D1EE; --r4:#F0CEC8; --r5:#C6E7E1; --r6:#E7E3B8; --r7:#D8D8EA;
  --p0:#2F6CD6; --p1:#D9700E; --p2:#7A48D6; --p3:#0E8A7B; --p4:#C02F87; --scrim:rgba(27,42,45,.28);
  --display:"Gluten","Comic Sans MS","Trebuchet MS",cursive;
  --body:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0E161A; --paper:#152129; --ink:#E3EBEC; --muted:#93A5A9; --line:#2A3B43; --wall:#CBD9DB;
  --red:#E5484D; --red-soft:#3A1F23; --fir:#5BAE84; --gold:#E6B94A; --wood:#B4824F; --wood-d:#8A5F38;
  --brick:#B9694F; --soot:#120F0E; --flame:#F5B04E; --seat:#6E93BE; --seat-l:#93B1D3; --linen:#E9EEF1; --blanket:#5F89B3;
  --rug1:#8E6A8E; --rug2:#6C506C; --skin:#E8BC98; --beard:#ECECEA; --hatch:rgba(227,235,236,.10); --ok:#5BC48A;
  --r0:#224031; --r1:#22324A; --r2:#47391F; --r3:#392B47; --r4:#4A2C2C; --r5:#1F433F; --r6:#403E20; --r7:#303045;
  --p0:#5C8EF0; --p1:#F0903A; --p2:#9B74EE; --p3:#2DB3A2; --p4:#E25BAA; --scrim:rgba(0,0,0,.5);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#0E161A; --paper:#152129; --ink:#E3EBEC; --muted:#93A5A9; --line:#2A3B43; --wall:#CBD9DB;
  --red:#E5484D; --red-soft:#3A1F23; --fir:#5BAE84; --gold:#E6B94A; --wood:#B4824F; --wood-d:#8A5F38;
  --brick:#B9694F; --soot:#120F0E; --flame:#F5B04E; --seat:#6E93BE; --seat-l:#93B1D3; --linen:#E9EEF1; --blanket:#5F89B3;
  --rug1:#8E6A8E; --rug2:#6C506C; --skin:#E8BC98; --beard:#ECECEA; --hatch:rgba(227,235,236,.10); --ok:#5BC48A;
  --r0:#224031; --r1:#22324A; --r2:#47391F; --r3:#392B47; --r4:#4A2C2C; --r5:#1F433F; --r6:#403E20; --r7:#303045;
  --p0:#5C8EF0; --p1:#F0903A; --p2:#9B74EE; --p3:#2DB3A2; --p4:#E25BAA; --scrim:rgba(0,0,0,.5);
  color-scheme:dark;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.screen{max-width:1100px;margin:0 auto;min-height:100vh;min-height:100dvh;
  padding-top:max(10px,env(safe-area-inset-top,0px));padding-bottom:max(10px,env(safe-area-inset-bottom,0px))}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--p0);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ibtn{flex:none;width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer;padding:0;
  -webkit-tap-highlight-color:transparent}
.ibtn:hover{background:var(--hatch);color:var(--ink)}
.ibtn svg{width:24px;height:24px}

/* Startbildschirm */
.intro{display:flex;flex-direction:column}
.iconbar{display:flex;justify-content:flex-end;gap:2px}
.intro-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;
  width:100%;max-width:34rem;margin:0 auto;padding-bottom:6vh}
.intro .mark{width:92px;height:110px;object-fit:contain}
h1{font-family:var(--display);font-weight:700;font-size:clamp(2.3rem,10vw,3.2rem);line-height:1;margin:0;letter-spacing:.01em;text-wrap:balance}
h1 .h1-red{color:var(--red)}
.lede{margin:0;max-width:62ch;text-wrap:pretty}
.intro .btn{width:min(100%,300px)}
.btn.big{font-size:1.15rem;padding:14px 24px;border-radius:16px;margin-top:4px}
@media (max-height:640px){
  .intro-body{gap:12px;padding-bottom:2vh}
  .intro .mark{width:64px;height:76px}
  .btn.big{padding:12px 24px}
}
@media (max-height:520px){.intro .mark{display:none}.intro .lede{font-size:.92rem;line-height:1.4}}
.meta{margin:0;color:var(--muted);font-size:.9rem;font-variant-numeric:tabular-nums}
.seg{display:inline-flex;background:var(--paper);border:1.5px solid var(--line);border-radius:999px;padding:3px}
.seg button{border:0;background:transparent;border-radius:999px;padding:7px 14px;cursor:pointer;font-size:.92rem;white-space:nowrap}
.seg button small{color:var(--muted);font-variant-numeric:tabular-nums;margin-left:4px}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.seg button[aria-pressed="true"] small{color:inherit;opacity:.75}
.btn{border:1.5px solid var(--line);background:var(--paper);border-radius:12px;padding:8px 14px;cursor:pointer;font-weight:700;font-size:.92rem}
.btn:hover{border-color:var(--ink)}
.btn.primary{background:var(--red);border-color:var(--red);color:#fff}
.btn.primary:hover{filter:brightness(1.07)}
.btn.quiet{font-weight:400;color:var(--muted)}

/* Spielbildschirm: genau so hoch wie das Fenster; nur die Hinweisliste scrollt bei Bedarf in sich.
   --bw ist die Kantenlänge des Grundrisses, --reserve der Platz für alles darüber und darunter.
   position:fixed hält die Knopfleiste auch dann am unteren Rand, wenn der Browser nach dem
   Scrollen auf dem Startbildschirm seine Leisten ein- oder ausblendet (iOS Safari). */
.game{--reserve:252px;--bw:min(100%,560px,max(240px,calc(100dvh - var(--reserve))));
  position:fixed;inset:0;z-index:1;max-width:1100px;min-height:0;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  display:grid;gap:8px;overflow:hidden;
  grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto minmax(0,1fr) auto;
  grid-template-areas:"board" "tools" "status" "clues" "actions"}
@media (max-height:700px){.game{--reserve:236px}}
.boardwrap{grid-area:board;justify-self:center;width:var(--bw);padding:3px;container-type:inline-size}
.board{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));grid-template-rows:repeat(var(--n),minmax(0,1fr));gap:1px;background:var(--line);aspect-ratio:1/1;max-width:100%;
  border-radius:6px;box-shadow:0 0 0 3px var(--wall),0 10px 30px -14px rgba(0,0,0,.35);position:relative}
.rlabels{position:absolute;inset:0;pointer-events:none;z-index:4}
.rlabel{position:absolute;margin:4px 0 0 5px;padding:1px 5px 0;border-radius:4px;font-weight:700;line-height:1.35;font-size:clamp(9px,calc(15cqw / var(--n)),13px);letter-spacing:.02em;color:var(--ink);background:color-mix(in srgb,var(--paper) 85%,transparent);box-shadow:0 1px 0 rgba(0,0,0,.14);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box}
.cell{position:relative;border:0;padding:0;margin:0;min-width:0;min-height:0;width:100%;height:100%;background:var(--rc);cursor:pointer;display:block;overflow:hidden;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
.cell.blocked{cursor:not-allowed}
.cell .walls{position:absolute;inset:0;pointer-events:none}
.cell .obj{position:absolute;width:76%;height:76%;left:12%;top:14%;object-fit:contain;transition:all .18s ease;pointer-events:none;user-select:none}
.cell .obj.rugimg{width:90%;height:90%;left:5%;top:5%}
.cell.has .obj:not(.rugimg){width:38%;height:38%;left:auto;top:auto;right:3%;bottom:3%}
.tok{position:absolute;z-index:2;left:17%;top:17%;width:66%;height:66%;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;
  font-weight:700;font-size:calc(26cqw / var(--n));line-height:1;box-shadow:0 2px 0 rgba(0,0,0,.25),inset 0 0 0 2px rgba(255,255,255,.35);
  letter-spacing:-.02em;animation:pop .2s ease-out}
.tok-w{background:transparent;box-shadow:none;left:9%;top:9%;width:82%;height:82%}
.tok-w img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 1px rgba(0,0,0,.3))}
.cell.clash .tok{box-shadow:0 0 0 3px var(--red),0 2px 0 rgba(0,0,0,.25)}
.cell.clash .tok-w{box-shadow:none;outline:3px solid var(--red);border-radius:12px}
.cell.hinted .tok::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px dashed var(--gold)}
.xm{position:absolute;inset:16%;z-index:3;pointer-events:none;color:var(--ink)}
.xm::before,.xm::after{content:"";position:absolute;left:50%;top:-6%;width:14%;height:112%;border-radius:99px;background:currentColor;
  box-shadow:0 0 0 2px var(--paper);transform:translateX(-50%) rotate(45deg)}
.xm::after{transform:translateX(-50%) rotate(-45deg)}
.xm.auto{color:var(--muted);opacity:.7}
.xm.auto::before,.xm.auto::after{width:11%}
.cell.flash{animation:flash .9s ease-out 2}
.won .cell.wroom{box-shadow:inset 0 0 0 3px var(--gold)}
.won .tok-w{animation:wiggle 1.2s ease-in-out infinite}
@keyframes pop{from{transform:scale(.6)}to{transform:scale(1)}}
@keyframes flash{50%{background:var(--gold)}}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}

/* Werkzeuge: mobil nur runde Knöpfe in einer Reihe, breit mit Namen */
.tools{grid-area:tools;display:flex;justify-content:center;gap:4px}
.chip{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--line);background:var(--paper);border-radius:999px;padding:3px;cursor:pointer;font-size:.95rem;position:relative;
  flex:none;-webkit-tap-highlight-color:transparent}
.chip .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.chip .mini{width:28px;height:28px;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.72rem}
.chip .mini svg{width:30px;height:30px}
.chip .mini img{width:30px;height:32px;object-fit:contain}
.chip .mini.plain{background:transparent;color:var(--muted)}
.chip .mini.plain svg{width:18px;height:18px}
.chip[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 0 0 2px var(--ink)}
.chip.placed{color:var(--muted)}
.chip.placed::after{content:"";position:absolute;right:-1px;top:-1px;width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 2px var(--bg)}
.status{grid-area:status;margin:0;font-weight:700;font-size:.95rem;line-height:1.3;text-align:center}
.status:empty,.game.is-won .status{display:none}
.status.err{color:var(--red)}
.status.good{color:var(--ok)}
.actions{grid-area:actions;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:8px}
.actions .btn{padding:10px 4px}
.actions .menubtn{width:52px;padding:0;display:grid;place-items:center}
.menubtn svg{width:24px;height:24px}

.win{border-radius:14px;background:var(--paper);border:2px solid var(--gold);padding:10px 14px;display:grid;grid-template-columns:44px 1fr;gap:2px 12px;align-items:center;margin-bottom:8px;font-size:.95rem;line-height:1.4}
.win .winimg{width:44px;height:58px;object-fit:contain;grid-row:span 3;align-self:start}
.win h2{font-family:var(--display);font-size:1.4rem;margin:0;line-height:1.1}
.win p{margin:0}
.win .btn{justify-self:start;margin-top:6px}


/* Hinweise. Das Markup ist nach Figur gruppiert (.grp mit Kopf und Liste); mobil lösen sich
   die Gruppen auf (display:contents) und alle Hinweise stehen in einem Raster mit zwei Spalten. */
.clues{grid-area:clues;min-width:0;min-height:0;overflow-y:auto;overscroll-behavior:contain;border-radius:14px;scroll-padding-block:4px}
.cards,.cards ul{list-style:none;margin:0;padding:0}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;font-size:.9rem;line-height:1.35}
.grp,.grp>ul{display:contents}
.grp-h{display:none}
.ci{background:var(--paper);border:1.5px solid var(--line);border-left:4px solid var(--c);border-radius:8px;
  transition:border-color .15s, background-color .15s}
.ci.on{border-color:var(--c);background:color-mix(in srgb,var(--c) 9%,var(--paper))}
.ci button{all:unset;display:block;cursor:pointer;padding:5px 7px;border-radius:6px;width:100%;box-sizing:border-box}
.ci button:hover{background:var(--hatch)}
.ci button:focus-visible{outline:3px solid var(--p0)}
.ci.bad{border-color:var(--red)}
.ci.bad button{background:var(--red-soft)}
.ci.none{color:var(--muted);font-style:italic}
.nm{color:var(--c);font-weight:700}
.rm{background:var(--rc);padding:0 5px;border-radius:5px;box-shadow:inset 0 0 0 1px var(--line);white-space:nowrap}
.ii{width:1.4em;height:1.4em;object-fit:contain;vertical-align:-.35em;margin-left:2px}

/* Kopf mit Schriftzug, nur auf Tablet und Computer */
.gtop{grid-area:head;display:none;align-items:center;gap:12px;min-width:0}
.gtop .mark{width:40px;height:48px;object-fit:contain;flex:none}
.gtop h1{font-size:2rem}
.gtop .meta{margin-left:auto;text-align:right}

/* Tablet und Computer: Hinweise als Karten pro Figur mit Namen im Kopf, Werkzeuge mit Namen */
@media (min-width:740px) and (min-height:600px){
  .cards{display:flex;flex-direction:column;gap:10px;font-size:.95rem;line-height:1.4}
  .grp{display:block;background:var(--paper);border:1.5px solid var(--line);border-left:5px solid var(--c);border-radius:12px;padding:8px 10px 8px;
    transition:border-color .15s, background-color .15s}
  .grp.on{border-color:var(--c);background:color-mix(in srgb,var(--c) 7%,var(--paper))}
  .grp>ul{display:flex;flex-direction:column;gap:1px}
  .grp-h{display:flex;align-items:center;gap:8px;font-weight:700;padding:0 4px 4px;cursor:pointer}
  .grp-h .mini{width:26px;height:26px;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;font-size:.7rem}
  .grp-h .mini img{width:28px;height:30px;object-fit:contain}
  .ci,.ci.on{background:transparent;border:0;border-radius:6px}
  .ci button{padding:4px 6px}
  .ci.bad{box-shadow:inset 0 0 0 1.5px var(--red)}
  .tools{flex-wrap:wrap;gap:8px}
  .chip{padding:4px 12px 4px 4px}
  .chip .lbl{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  .chip.placed::after{position:static;width:8px;height:8px;box-shadow:none;margin-left:-2px}
  .gtop{display:flex}
}
/* Tablet hochkant: alles untereinander wie mobil, mit Kopf; Hinweiskarten in zwei Spalten */
@media (min-width:740px) and (min-height:600px) and (max-aspect-ratio:4/5){
  .game{--bw:min(100%,640px,max(300px,calc(100dvh - 500px)));
    grid-template-rows:auto auto auto auto minmax(0,1fr) auto;
    grid-template-areas:"head" "board" "tools" "status" "clues" "actions"}
  .cards{display:block;columns:2;column-gap:10px}
  .grp{break-inside:avoid;margin-bottom:10px}
}
/* Breit genug: Grundriss mit Werkzeugen und Knöpfen links, Hinweise rechts. Der Kopf kommt
   nur dazu, wenn die Höhe reicht; sonst bekommt der Grundriss den Platz. */
@media (min-width:740px) and (min-height:600px) and (min-aspect-ratio:4/5){
  .game{--bw:min(560px,50vw,calc(100dvh - 230px));column-gap:32px;row-gap:12px;padding-top:max(20px,env(safe-area-inset-top,0px));
    grid-template-columns:var(--bw) minmax(0,1fr);grid-template-rows:auto auto auto minmax(0,1fr);
    grid-template-areas:"board clues" "tools clues" "status clues" "actions clues"}
  .gtop{display:none}
  .boardwrap{width:100%}
  .tools{justify-content:flex-start}
  .status{text-align:left}
  .actions{align-self:start}
}
@media (min-width:740px) and (min-height:720px) and (min-aspect-ratio:4/5){
  .game{--bw:min(560px,50vw,calc(100dvh - 300px));padding-top:max(14px,env(safe-area-inset-top,0px));
    grid-template-rows:auto auto auto auto minmax(0,1fr);
    grid-template-areas:"head head" "board clues" "tools clues" "status clues" "actions clues"}
  .gtop{display:flex}
}
/* Quer und niedrig (Handy im Querformat): Grundriss über die ganze Höhe links, alles andere rechts */
@media (orientation:landscape) and (max-height:599px){
  .game{--bw:calc(100dvh - 6px - max(10px,env(safe-area-inset-top,0px)) - max(10px,env(safe-area-inset-bottom,0px)));column-gap:20px;
    grid-template-columns:var(--bw) minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;
    grid-template-areas:"board tools" "board status" "board clues" "board actions"}
  .boardwrap{width:100%;align-self:start}
  .tools{justify-content:flex-start}
}

/* Popover für Spielregeln und Einstellungen, oben rechts bei den Symbolen */
.pop{position:fixed;inset:auto;top:calc(max(10px,env(safe-area-inset-top,0px)) + 44px);right:max(10px,env(safe-area-inset-right,0px),calc((100vw - 1100px) / 2));
  margin:0;width:min(420px,calc(100vw - 20px));max-height:calc(100dvh - 70px - env(safe-area-inset-top,0px));overflow-y:auto;overscroll-behavior:contain;
  background:var(--paper);color:var(--ink);border:1.5px solid var(--line);border-radius:16px;padding:8px 16px 16px;box-shadow:0 18px 40px -12px rgba(0,0,0,.4)}
.pop::backdrop{background:var(--scrim)}
.pop[open]{animation:popin .16s ease-out;transform-origin:top right}
@keyframes popin{from{opacity:0;transform:translateY(-6px) scale(.97)}}
.pop.up[open]{animation-name:popup;transform-origin:bottom right}
@keyframes popup{from{opacity:0;transform:translateY(6px) scale(.97)}}
.menu{padding:6px}
.menu .meta{padding:8px 10px 4px}
.mi{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;width:100%;padding:11px 10px;border-radius:10px;cursor:pointer;font-weight:700}
.mi:hover{background:var(--hatch)}
.mi:focus-visible{outline:3px solid var(--p0)}
.mi svg{flex:none;width:22px;height:22px;color:var(--muted)}
.mi.quiet{font-weight:400;color:var(--muted)}
.legal{margin:4px 0 0;text-align:center;font-size:.85rem;color:var(--muted)}
.legal a{color:inherit;text-underline-offset:2px}
.menu .legal{margin:4px 10px 6px;text-align:left}
.menu-q{margin:6px 10px 10px;font-weight:700}
.menu-sz{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:0 4px 6px}
.menu-sz .btn{display:flex;flex-direction:column;align-items:center;gap:1px;padding:10px 4px}
.menu-sz small{color:var(--muted);font-weight:400;font-variant-numeric:tabular-nums}
.legend{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.legend li{display:flex;gap:12px;align-items:center}
.lg-ic,.lg-cell,.lg-clue{flex:none;width:36px;height:36px;display:grid;place-items:center}
.lg-ic{border:1.5px solid var(--line);border-radius:50%;background:var(--paper);color:var(--muted)}
.lg-ic svg{width:18px;height:18px}
.lg-ic .mini{width:28px;height:28px;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.72rem}
.lg-cell{position:relative;border-radius:6px;background:var(--r1);box-shadow:inset 0 0 0 2px var(--wall)}
.lg-clue{border:1.5px solid var(--line);border-left:4px solid var(--p0);border-radius:6px;background:var(--paper);color:var(--muted);
  font-weight:700;font-size:.85rem}
.pop-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-right:-8px}
.pop h2{font-family:var(--display);font-size:1.5rem;margin:0;line-height:1.1}
.pop h3{font-size:1rem;margin:6px 0 0}
.pop ol{margin:8px 0 4px;padding-left:1.3em;display:flex;flex-direction:column;gap:6px}
.pop p{margin:8px 0}
.namerow{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.namerow input{flex:1 1 220px;min-width:0;font:inherit;padding:8px 10px;border-radius:10px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink)}

/* Impressum und Datenschutz */
.doc{max-width:42rem;margin:0 auto;padding-top:max(16px,env(safe-area-inset-top,0px));padding-bottom:max(32px,env(safe-area-inset-bottom,0px))}
.doc h1{font-size:clamp(1.9rem,8vw,2.4rem);margin:8px 0 12px;hyphens:manual}
.doc h2{font-family:var(--display);font-size:1.3rem;line-height:1.2;margin:1.6em 0 .3em}
.doc p,.doc ul{margin:.5em 0;max-width:62ch}
.doc ul{padding-left:1.3em}
.doc li{margin:.2em 0}
.doc a{color:var(--p0);text-underline-offset:2px}
.doc code{font-size:.9em;background:var(--hatch);padding:0 4px;border-radius:4px}
.doc-lede{background:var(--paper);border:1.5px solid var(--line);border-radius:14px;padding:12px 16px}
.doc-back{margin:0}
.doc-back a{color:var(--muted);font-weight:700;text-decoration:none}
.doc-back:last-child{margin-top:2em}

#snow{position:fixed;inset:0;pointer-events:none;z-index:50;width:100%;height:100%}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}