@font-face{font-family:"Atkinson Hyperlegible Next";font-weight:200 800;font-display:swap;src:url(/fonts/atkinson-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Atkinson Hyperlegible Next";font-weight:200 800;font-display:swap;src:url(/fonts/atkinson-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20C0,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Young Serif";font-weight:400;font-display:swap;src:url(/fonts/young-serif-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2212}
@font-face{font-family:"Young Serif";font-weight:400;font-display:swap;src:url(/fonts/young-serif-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+1E00-1E9F}
@font-face{font-family:Kalam;font-weight:400;font-display:swap;src:url(/fonts/kalam-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:Kalam;font-weight:700;font-display:swap;src:url(/fonts/kalam-latin-700.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
/* Farben nur aus D1 «Kellerlicht»: Tag = hell, Kellerlicht = dunkel */
:root{--surface-1:#F5EFE3;--surface-2:#FFFBF3;--stage:#E3D8C3;--band:#EFE7D8;--text-1:#2B2118;--text-2:#57493B;--text-3:#6B5D4F;--border-1:#DDD1BC;--primary:#2F6B3B;--on-primary:#FFFBF3;--edge-primary:#1D4526;--accent:#984E25;--focus:#984E25;--secondary-container:#EFE2D2;--sky:#9CC7E6;--ink:#2B2118;--slogan:#984E25;color-scheme:light dark}
@media (prefers-color-scheme:dark){:root{--surface-1:#45382D;--surface-2:#524336;--stage:#3A2F26;--band:#4B3E32;--text-1:#FAF4E8;--text-2:#E6D8C2;--text-3:#D8C9B2;--border-1:#6A5846;--primary:#98D1A1;--on-primary:#221B15;--edge-primary:#5E9A68;--accent:#F4B084;--focus:#F4B084;--secondary-container:#6A513C}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-1);color:var(--text-1);font:400 17px/26px "Atkinson Hyperlegible Next","Segoe UI",system-ui,sans-serif}
a{color:var(--primary);text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--focus);outline-offset:5px;border-radius:4px}
h1,h2,h3{font-family:"Young Serif",Georgia,serif;font-weight:400;margin:0;overflow-wrap:break-word;hyphens:auto}
h2{font-size:30px;line-height:36px}
h3{font-size:22px;line-height:28px}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.wrap.narrow{max-width:720px}
.gap-top{margin-top:48px}
.label{font-size:13px;line-height:18px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:16px;background:var(--surface-2);padding:8px 12px;z-index:9}
.top{display:flex;justify-content:flex-end;gap:16px;padding:2px 14px;background:var(--sky);color:var(--ink)}
.top a{color:var(--ink);font-weight:700;font-size:15px;min-height:44px;display:inline-flex;align-items:center;padding:0 6px}
.hero{background:var(--sky);color:var(--ink);text-align:center;padding:0}
.hero .wm{display:block;width:min(84vw,620px);margin:4px auto 0}
.hero .wm svg{display:block;width:100%;height:auto}
.hero p.lead{max-width:34em;margin:12px auto 0;padding:0 20px;font-size:17px;line-height:25px;color:var(--ink)}
/* Anmeldung im Kopf. Feste Farben, weil der Himmel in hell und dunkel gleich bleibt. */
/* Kopf: «Demnächst»-Knöpfe mit eigenen Geräte-Icons. Logos von Apple und Google erst als offizielle Badges mit den Store-Einträgen. */
.stores{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:14px 0 0;padding:0 16px;list-style:none}
.stores li{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:4px 14px 4px 10px;border-radius:12px;background:#2B2118;color:#FAF4E8;text-align:left}
.stores svg{flex:none;width:24px;height:24px}
.stores span{display:flex;flex-direction:column;font-size:15px;line-height:18px;font-weight:700}
.stores small{font-size:10px;line-height:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#E6D8C2}
/* Kopf: Newsletter als Karte auf dem Himmel, Farben fix wie der Himmel (auch im dunklen Modus). */
form.news.kopf{position:relative;z-index:1;box-sizing:border-box;width:calc(100% - 32px);max-width:520px;margin:16px auto 0;padding:14px 16px 16px;gap:10px;background:#FFFBF3;color:#2B2118;text-align:left;border-radius:16px;border-bottom:4px solid #D9CDB6;box-shadow:0 6px 16px #2B21182E}
.kopf-titel{flex-basis:100%;margin:0;font:400 21px/26px "Young Serif",Georgia,serif;color:#2B2118}
form.kopf .angebot{flex-basis:100%;margin:0 0 4px;font-size:14px;line-height:20px;color:#57493B}
form.kopf .angebot a{color:#2F6B3B;font-weight:700}
form.news.kopf input{flex:1 1 150px;min-width:0;background:#fff;color:#2B2118;border-color:#CDBFA6}
form.news.kopf .btn{background:#2F6B3B;color:#FFFBF3;border-bottom-color:#1D4526}
form.kopf input::placeholder{color:#6B5D4F;opacity:1}
.hero :focus-visible{outline-color:#2B2118}
/* Der Kopf füllt die sichtbare Höhe (svh: mit eingeblendeten Browserleisten) bis auf --vorschau,
   damit unten die Überschrift des nächsten Abschnitts steht. Das Bild bekommt den Rest, mindestens
   --bild-min, höchstens seine eigene Höhe, und liegt oben --ueberlapp weit unter der Karte.
   --kopf: Höhe der Leiste mit dem Sprachlink, --vorschau: Bildunterkante bis knapp unter die h2. */
:root{--kopf:48px;--vorschau:88px;--bild-min:110px;--ueberlapp:44px;--bild-hoehe:calc(100vw * 764 / 1080)}
@media (max-height:600px){:root{--bild-min:72px}}
.hero{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto minmax(var(--bild-min),1fr);min-height:calc(100vh - var(--kopf) - var(--vorschau));min-height:calc(100svh - var(--kopf) - var(--vorschau))}
.hero picture{position:relative;display:block;align-self:end;height:calc(100% + var(--ueberlapp));max-height:calc(var(--bild-hoehe) + var(--ueberlapp));margin-top:calc(-1 * var(--ueberlapp));overflow:hidden}
.hero picture img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.hero + section{padding-top:40px}
section{padding:64px 0}
.points{display:grid;gap:20px;margin-top:28px}
.point{background:var(--surface-2);border:2px solid var(--border-1);border-radius:16px;padding:22px 20px}
.point p{margin:10px 0 0;color:var(--text-2)}
/* Screens als seitlich scrollbarer Streifen ohne JavaScript. Der Streifen läuft über die volle Breite,
   das erste Bild steht bündig mit .wrap; das angeschnittene letzte Bild zeigt, dass es weitergeht. */
.shots{--rand:max(20px,calc((100% - 1080px) / 2));display:flex;gap:20px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--rand);margin:28px 0 0;padding:4px var(--rand) 16px;list-style:none;scrollbar-width:thin;scrollbar-color:var(--border-1) transparent}
.shots:focus-visible{outline:3px solid var(--focus);outline-offset:-3px;border-radius:0}
.shots li{flex:0 0 auto;width:min(66vw,250px);scroll-snap-align:start}
.shots figure{margin:0;text-align:center}
.shots img{display:block;width:100%;height:auto;border-radius:28px;border:8px solid #1A140F;background:#1A140F}
.shots figcaption{margin-top:10px;color:var(--text-2);font-size:15px;line-height:22px}
.shots-hinweis{margin:8px 0 0;color:var(--text-2);font-size:15px;line-height:22px}
.band{background:var(--band)}
form.news{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
form.news label{flex-basis:100%;font-weight:700}
form.news input{flex:1 1 220px;min-height:48px;padding:0 14px;font:inherit;color:var(--text-1);background:var(--surface-2);border:2px solid var(--border-1);border-radius:12px}
.btn{min-height:48px;padding:0 22px;font:700 17px/1 "Atkinson Hyperlegible Next",sans-serif;border:none;border-radius:12px;background:var(--primary);color:var(--on-primary);border-bottom:4px solid var(--edge-primary);cursor:pointer;display:inline-flex;align-items:center;text-decoration:none}
.note{font-size:15px;line-height:22px;color:var(--text-3);margin-top:10px}
/* Köderfeld für Bots: für Menschen unsichtbar, auch für Screenreader */
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
footer{background:var(--stage);padding:32px 0 40px}
footer nav{display:flex;flex-wrap:wrap;gap:4px 20px}
footer a{color:var(--text-1);min-height:44px;display:inline-flex;align-items:center}
footer p{margin:12px 0 0;color:var(--text-3);font-size:15px}
.page{padding:48px 20px 64px;max-width:720px}
.fakten dt{margin-top:12px}.fakten dd{margin:2px 0 0}
.page h1{font-size:36px;line-height:42px;margin-bottom:18px}
.page h2{font-size:24px;line-height:30px;margin-top:32px}
.ph{background:var(--secondary-container);border-radius:12px;padding:12px 16px}
.hdr-small{background:var(--sky);padding:14px 20px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.hdr-small a.home{display:block;width:180px}.hdr-small svg,.hdr-small img{display:block;width:100%;height:auto}
.hdr-small .lang{color:var(--ink);font-weight:700;min-height:44px;display:inline-flex;align-items:center}
/* Antwortseiten der Anmeldung (lib/seiten.js): Bühne wie der Kopf der Startseite, unten die Landschaft. */
body.antwort{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:var(--sky);color:var(--ink)}
.antwort-buehne{flex:1 0 auto;box-sizing:border-box;width:100%;max-width:640px;margin:0 auto;padding:28px 20px 12px;text-align:center}
.antwort-buehne .home{display:inline-block;width:200px}
.antwort-buehne .home img{display:block;width:100%;height:auto}
.antwort-buehne h1{margin:36px 0 0;font-size:36px;line-height:42px;color:var(--ink)}
.antwort-buehne p.lead{max-width:30em;margin:14px auto 0;font-size:18px;line-height:27px;color:var(--ink)}
.antwort-buehne .weiter{margin:32px 0 0}
.antwort-buehne .btn{background:#2B2118;color:#FAF4E8;border-bottom-color:#1A140F}
.antwort :focus-visible{outline-color:#2B2118}
.landschaft img{display:block;width:100%;height:auto;max-height:40vh;object-fit:cover;object-position:50% 45%}
/* Laras Zettel, nach der NoteCard im Designsystem des Spiels: Papier fix in beiden Modi, Kalam, um −1.5° gedreht. */
.zettel{position:relative;box-sizing:border-box;max-width:400px;margin:40px auto 0;padding:26px 22px 18px;background:#F5EEDF;color:#2B2118;text-align:left;border-radius:6px;border-bottom:4px solid #D9CDB6;box-shadow:0 6px 16px #2B21182E;transform:rotate(-1.5deg)}
.zettel::before{content:"";position:absolute;top:-12px;left:50%;width:96px;height:24px;margin-left:-48px;background:#F8DC8CD9;transform:rotate(1.5deg)}
.zettel-kopf{margin:0;font-size:12px;line-height:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#6B5D4F}
.zettel blockquote{margin:12px 0 0}
.zettel blockquote p{margin:0;font:400 23px/32px Kalam,"Segoe Print",cursive;color:#2B2118}
.zettel figcaption{display:flex;justify-content:flex-end;align-items:center;gap:14px;margin-top:10px}
.zettel figcaption span{font:700 26px/1 Kalam,"Segoe Print",cursive}
.zettel figcaption img{box-sizing:border-box;width:52px;height:52px;padding:6px 6px 0;border-radius:50%;background:#D9CDB6}
.zettel-wer{max-width:28em;margin:24px auto 0;font-size:15px;line-height:22px;color:var(--ink)}
/* Presse-Kit: Download-Knopf und Kacheln mit Vorschau. Vorschaufläche fix hell, damit die dunkle Wortmarke auch im dunklen Modus lesbar ist. */
.presse-download{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:24px}
.presse-download .note{margin:0}
.teile{display:grid;gap:16px;margin:20px 0 0;padding:0;list-style:none}
.teile li{overflow:hidden;background:var(--surface-2);border:2px solid var(--border-1);border-radius:16px}
.teile img{display:block;box-sizing:border-box;width:100%;height:180px;background:#F5EEDF}
.teile img.bild{object-fit:cover}
.teile img.marke{object-fit:contain;padding:0 32px}
.teile img.icon{object-fit:contain;padding:20px}
.teile img.screen{object-fit:cover;object-position:50% 22%}
.teile p{margin:0;padding:14px 18px 16px;font-size:15px;line-height:22px;color:var(--text-2)}
.teile strong{color:var(--text-1)}
@media (min-width:600px){.teile{grid-template-columns:1fr 1fr}}
@media (min-width:760px){:root{--vorschau:102px;--bild-min:100px;--ueberlapp:40px;--bild-hoehe:calc(100vw * 9 / 16)}.hero + section{padding-top:48px}.hero p.lead{max-width:46em}form.news.kopf{max-width:560px;padding:22px 24px 24px}form.kopf .angebot{font-size:16px;line-height:23px}.hero picture img{object-position:50% 38%}.points{grid-template-columns:repeat(3,1fr)}h2{font-size:36px;line-height:42px}}
@media (min-width:1060px){.hero{grid-template-columns:minmax(20px,1fr) 420px 480px minmax(20px,1fr);grid-template-rows:auto auto auto minmax(var(--bild-min),1fr);column-gap:40px}.hero .wm,.hero picture{grid-column:1/-1}.hero picture{grid-row:4}.hero p.lead{grid-column:2;grid-row:2;align-self:end;margin:24px 0 0;padding:0;text-align:left;font-size:22px;line-height:32px}.stores{grid-column:2;grid-row:3;align-self:start;justify-content:flex-start;padding:0}form.news.kopf{grid-column:3;grid-row:2/4;width:auto;max-width:none;margin:24px 0 0}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}