/* Cozymoa · die eine Startseite (Paket 506, 11.10.2026; Grundlage: Panoramaseite 6 von Codex).
   Hell, ohne Muster: feine Papierkörnung und weiche Wellen zwischen den Abschnitten. Keine Webschriften. */
:root{
  --papier:#fbf6ec; --creme:#fffaf1; --wasser:#e3eee8; --sand:#f1e4d4; --sandkarte:#f6ecdf;
  --tinte:#2c4a41; --leise:#55655c; --leise-sand:#4f5f56; --akzent:#7d6248; --fehler:#9a3d2c;
  --linie:#2c4a411f; --rand:#b8c5ba; --rand-kraeftig:#7e9b88; --fuellung:#e6efe2; --fuellung-sand:#f3e7d6;
  --gruen:#476952; --gruen-tief:#3a5b45;
  /* Abendband (506e): vom Abendrot ins tiefe Blau-Grün der Nacht. Schrift hell, Kontrast im Test geprüft. */
  --abend-1:#efc4a6; --abend-2:#d79a9b; --abend-3:#7a6491; --abend-4:#2e4d66;
  --nacht:#143a40; --nacht-tief:#0d2a2e; --nacht-text:#fbf3e6; --nacht-leise:#c9d8d1;
  --sans:'Avenir Next',Avenir,'Segoe UI',system-ui,sans-serif;
  --serif:Baskerville,'Baskerville Old Face','Libre Baskerville',Georgia,serif;
  --weich:cubic-bezier(.3,.7,.2,1);
  --welle:clamp(34px,4.2vw,64px);
  /* Papierkörnung: ein Rauschen, kaum sichtbar, damit die Flächen gemacht wirken statt leer. */
  --koernung:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .3 0 0 0 0 .22 1.5 0 0 0 -.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)' opacity='.11'/%3E%3C/svg%3E");
  /* Weiche Wellenkanten (schwarz = sichtbar) für die Maske der Abschnitte. */
  --welle-oben:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 34C160 12 330 4 520 18s380 38 560 30 300-30 360-34V60H0Z'/%3E%3C/svg%3E");
  --welle-unten:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v28c-170 18-330 26-510 14S600 12 420 18 120 44 0 30Z'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;color:var(--tinte);background-color:var(--papier);background-image:var(--koernung);background-size:240px 240px;font:400 clamp(17px,.42vw + 12px,19px)/1.55 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:none}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
button,a,input{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #e48a71;outline-offset:4px}
[hidden]{display:none!important}
h1,h2,h3,p,figure,dl,dd{margin:0}
h1,h2,h3,dt{font-family:var(--serif);font-weight:400;line-height:1.12;letter-spacing:-.005em;text-wrap:balance}
p,dd{text-wrap:pretty}
.hero-intro>p,.tat-wort{text-wrap:balance}
img,svg,video{max-width:100%}
.wrap{width:calc(100% - 9%);max-width:1360px;margin-inline:auto}
.nur-vorlesen{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:fixed;z-index:200;top:12px;left:12px;background:var(--creme);color:var(--tinte);padding:12px 16px;border-radius:12px;transform:translateY(-200%)}
.skip-link:focus{transform:none}

/* ── Knöpfe: ein Verhalten für alle. Beim Überfahren sanft füllen, Rand etwas kräftiger, nie unterstreichen. ── */
.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:9px 26px;border-radius:999px;border:1px solid transparent;font-size:16px;font-weight:600;line-height:1.2;white-space:nowrap;transition:background-color .35s ease,border-color .35s ease,color .35s ease,box-shadow .35s ease}
.knopf-rand{border-color:var(--rand);background:transparent;color:var(--tinte);font-weight:500}
.knopf-rand:hover,.knopf-rand:focus-visible{background:var(--fuellung);border-color:var(--rand-kraeftig)}
.knopf-voll,.primary{background:var(--gruen);border-color:var(--gruen);color:#fffaf1}
.knopf-voll:hover,.primary:hover,.knopf-voll:focus-visible,.primary:focus-visible{background:var(--gruen-tief);border-color:#2b4836;box-shadow:0 6px 16px -10px #2b4836}
.knopf-voll:disabled{opacity:.6;cursor:wait}
.text-button{background:transparent;border:1px solid #d3dbcf;border-radius:999px;padding:6px 15px;color:#3d5c4a;font-size:15px;font-weight:600;line-height:1.3;transition:background-color .35s ease,border-color .35s ease}
.text-button:hover,.text-button:focus-visible{background:var(--fuellung);border-color:var(--rand-kraeftig)}

/* ── Kopf ── */
.site-header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:22px;padding-bottom:12px}
.brand{display:inline-flex;align-items:center;border-radius:14px;padding-block:9px;margin-block:-9px}/* 775: Tippfläche ≥ 44 px, ohne dass sich etwas verschiebt */
.brand img{width:clamp(150px,15vw,232px);height:auto;display:block}
.kopf-nav{display:flex;align-items:center;gap:14px}
.login{font-size:clamp(16px,1.15vw,18px);padding:9px 28px}
/* 781: Der Knopf ist immer so breit wie die längste Beschriftung („Log in“), damit er und DE · EN beim Sprachwechsel nicht springen. */
.login{flex-direction:column}
.login::after{content:"Log in"/"";display:block;height:0;overflow:hidden;visibility:hidden;pointer-events:none}
.sprachwahl{display:inline-flex;align-items:center;gap:1px;padding:3px;border:1px solid #d9ddd2;border-radius:999px;background:var(--creme)}
.sprache{position:relative;min-width:40px;min-height:34px;border:0;background:transparent;border-radius:999px;padding:5px 10px;font-size:13px;font-weight:600;letter-spacing:.09em;color:var(--leise);transition:background-color .35s ease,color .35s ease}
.sprache:hover{background:#f0eee3;color:var(--tinte)}
.sprache[aria-disabled=true]{opacity:.55;cursor:default}
.sprache[aria-disabled=true]:hover{background:transparent;color:var(--leise)}
.sprache[aria-pressed=true]{background:var(--fuellung);color:var(--tinte);box-shadow:inset 0 0 0 1px #c5d3c6}
.sprache::after{content:'';position:absolute;inset:-5px -2px}/* 775: Tippfläche 44 px hoch */
.sprach-punkt{font-size:13px;color:#8f9a8f;padding:0 1px}

/* ── Erster Bildschirm: Film + Figurenwahl ── */
.hero{padding-bottom:0}
.hero-intro{text-align:center;padding-top:10px;padding-bottom:26px}
.hero h1{font-size:clamp(46px,4.6vw,72px)}
.hero-intro>p{font-size:clamp(19px,1.55vw,24px);color:var(--leise);margin-top:10px;letter-spacing:.005em}
/* 855 (Nutzer 22.10.) · vier kurze Punkte mit feinem Haken unter der Unterzeile: die Anzeige verspricht „kostenlos“, der Hero bestätigt es sofort. */
.hero-kurz{display:flex;list-style:none;padding:0;margin:18px auto 0;flex-wrap:wrap;justify-content:center;gap:6px 30px;font-size:clamp(15px,1.05vw,17px);font-weight:500;letter-spacing:.01em;color:var(--tinte)}
.hero-kurz>li{display:inline-flex;align-items:center;gap:8px}
.hero-kurz>li::before{content:'';flex:none;width:15px;height:15px;background:var(--gruen);-webkit-mask:var(--haken) center/contain no-repeat;mask:var(--haken) center/contain no-repeat}
.hero-kurz{--haken:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.8 8.6l3.3 3.1 7.1-7.4' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.panorama{position:relative;width:calc(100% - 5%);max-width:1520px;margin-inline:auto;border-radius:34px;overflow:hidden;min-height:540px;display:flex;align-items:center;justify-content:flex-end;padding:24px 36px;background:#cfdcd2 var(--hero-bild,none) center/cover no-repeat;box-shadow:0 30px 60px -40px #2c4a4180}
.panorama>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .8s ease}
/* 714a: Standbild des Hero-Films (--hero-bild) setzt das Skript unter dem Film. 714c: Der nächste Film lädt unsichtbar in einem zweiten Element vor
   (hero-wartet) und blendet am Ende oben (hero-oben) über das letzte Bild des alten ein (hero.js). */
.panorama>video.hero-wartet{opacity:0}
.panorama>video.hero-oben{z-index:1}
/* 714c: Striche neben dem Pause-Knopf, je Film einer; der laufende füllt sich (--fortschritt setzt hero.js). Klickfläche 30 x 44, sichtbar 20 x 3. */
.hero-striche{position:absolute;z-index:2;left:64px;top:16px;display:flex;align-items:center}
.hero-striche[hidden]{display:none}
.hero-strich{position:relative;width:30px;height:44px;padding:0;border:0;background:transparent;cursor:pointer}
.hero-strich::before,.hero-strich>span{content:'';position:absolute;left:5px;right:5px;top:21px;height:3px;border-radius:2px;background:#fffaf0}
.hero-strich::before{opacity:.5;box-shadow:0 0 4px #12373a66;transition:opacity .3s ease}
.hero-strich>span{transform:scaleX(var(--fortschritt,0));transform-origin:left center}
.hero-strich[aria-current]>span{transition:transform .3s linear}
.hero-strich:hover::before,.hero-strich[aria-current]::before{opacity:.75}
.hero-strich:focus-visible{outline:2px solid #fffaf0;outline-offset:-8px;border-radius:8px}
.gameplay-note{position:absolute;z-index:1;left:26px;bottom:20px;color:#fffaf0;font-size:13px;font-weight:600;letter-spacing:.04em;text-shadow:0 1px 3px #12373a,0 0 12px #12373ac0;pointer-events:none}
.atelier{position:relative;z-index:1;width:560px;max-width:42%;padding:28px 24px 18px;background:var(--creme);color:var(--tinte);border:1px solid #efe5d6;border-radius:28px;box-shadow:0 24px 50px -30px #1c3a3266;scroll-margin-top:24px}
.atelier h2{font-size:clamp(24px,2vw,32px)}
.atelier [data-phase=choose] h2{white-space:nowrap}
.atelier-lead{font-size:clamp(15px,1.1vw,17px);line-height:1.45;color:var(--leise);margin-top:8px}
.characters{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.character-option{position:relative;min-width:0;padding:0;text-align:center;background:#f3e3d4;border:1px solid transparent;border-radius:20px;overflow:hidden;color:var(--tinte);transition:background-color .35s ease,border-color .35s ease}
.character-option:nth-child(2){background:#e6ebdf}
.character-option:hover{border-color:#b9c4b4;background:#efdccb}
.character-option:nth-child(2):hover{background:#dde6d6}
.character-main{display:block;width:100%;padding:0 0 8px;border:0;background:transparent;color:inherit}
.character-main:focus-visible{outline-offset:-4px;border-radius:19px}
.character-stage{display:block;position:relative;height:230px;pointer-events:none}
.character-stage canvas,.ready-stage canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .35s}
.character-stage canvas.ist-bereit,.ready-stage canvas.ist-bereit{opacity:1}
.character-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .35s}
.character-stage:has(canvas.ist-bereit) .character-poster{opacity:0}
.stage-loading{position:absolute;z-index:1;inset:auto 8px 0;display:grid;place-items:center;padding:6px;font-size:13px;text-align:center;color:var(--leise);background:#fffaf1e8;border-radius:8px}
/* 852: „Vorschau neu laden“ startet die Bühne neu (die Figurenfläche selbst lässt Klicks zum Gestalten durch) */
.stage-reload{pointer-events:auto;cursor:pointer;color:var(--tinte);text-decoration:underline;text-underline-offset:3px;border-radius:6px;padding:2px 6px}
.stage-reload:focus-visible{outline:3px solid #e48a71;outline-offset:2px}
.choice-label{display:block;font-weight:600;font-size:clamp(17px,1.35vw,21px);line-height:1.35;margin-top:10px}
.character-random{position:relative;display:inline-grid;place-items:center;width:38px;height:34px;margin:0 0 10px;padding:0;border:1px solid #6473684a;border-radius:11px;background:#fffaf180;color:#46634f;transition:background-color .35s ease,border-color .35s ease}
.character-random::after{content:'';position:absolute;inset:-5px -3px}/* 775: Tippfläche 44 × 44, der Würfel bleibt so groß */
.character-random:hover{background:#fffaf1;border-color:var(--rand-kraeftig)}
.character-random:disabled{cursor:wait;opacity:.55}
.character-random:focus-visible{outline-offset:2px}
.atelier-foot{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;font-size:14px;letter-spacing:.02em;color:var(--leise)}
.atelier-foot::before,.atelier-foot::after{content:'';width:22px;height:1px;background:#c9cfc3}
.atelier-status{font-size:14px;color:#804b39;margin-top:10px}
.atelier-status:empty{display:none}
.ready-summary{display:flex;align-items:center;gap:18px;margin-bottom:16px}
.ready-stage{position:relative;width:145px;height:200px;flex-shrink:0}
.ready-summary h2{font-size:34px;overflow-wrap:anywhere;margin:7px 0 12px}
.overline{font-family:var(--sans);font-size:13px;line-height:1.5;font-weight:600;letter-spacing:.14em;color:var(--akzent)}
.atelier h3{font-size:27px}
.account-note{font-size:15px;line-height:1.55;color:var(--leise);margin:14px 0 16px}
.button{display:flex;justify-content:center;align-items:center;border-radius:999px;min-height:50px;padding:12px 22px;font-size:17px;font-weight:600;border:1px solid transparent;transition:background-color .35s ease,border-color .35s ease,box-shadow .35s ease}
.restart{display:block;margin:14px auto 0}
.video-toggle{position:absolute;z-index:2;right:16px;top:16px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--tinte)}
.video-toggle::before{content:'';position:absolute;inset:6px;border-radius:50%;background:#fffaf0e0;box-shadow:0 1px 6px #17392c1f;transition:background-color .35s ease,box-shadow .35s ease}
.video-toggle:hover::before{background:#fffaf0;box-shadow:0 0 0 1px var(--rand-kraeftig),0 2px 8px #17392c26}
.video-toggle span{position:relative;font:700 16px/1 Arial,sans-serif}
.video-toggle[data-paused=true] span{font-size:13px;padding-left:2px}
.video-toggle:focus-visible{outline-offset:1px}
.panorama>.video-toggle{left:18px;right:auto}

/* ── Was man tut: fünf ruhige Zeichen, je ein Satz beim Überfahren (506e) ── */
.taten{padding:clamp(52px,5.4vw,80px) 0 clamp(14px,1.6vw,26px)}
.taten-reihe{list-style:none;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));max-width:1300px}
.tat{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px;padding:4px 12px;text-align:center}
.tat+.tat::before{content:'';position:absolute;left:0;top:14%;height:46%;width:1px;background:linear-gradient(transparent,#2c4a4126 25%,#2c4a4126 75%,transparent)}
/* 506g · Inselstücke statt Linienzeichen: ein echtes Stück der Insel auf einem runden Sockel, wie Spielzeug (gerendert aus dem Spiel, WebP mit Durchsicht).
   Dahinter ein weicher Kreis in der Farbe des Punkts, darunter ein zarter Schatten. Beim Überfahren hebt es sich und spielt eine kurze Schleife:
   die Filmstreifen (24 Bilder, 2 s; die Hängematte 36 Bilder, 3 s) lädt stuecke.js erst im Leerlauf nach dem Laden; Haus und Korb wiegen bzw. hüpfen nur per CSS. */
.tat-stueck{position:relative;display:grid;place-items:end center;width:clamp(150px,13.4vw,200px);aspect-ratio:1}
.tat-stueck::before{content:'';position:absolute;left:9%;right:9%;top:8%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 42%,var(--ton) 0 58%,color-mix(in srgb,var(--ton) 55%,transparent) 70%,transparent 71%);transition:transform .8s var(--weich)}
.tat-stueck::after{content:'';position:absolute;left:18%;right:18%;bottom:2%;height:9%;border-radius:50%;background:radial-gradient(closest-side,#2c4a4133,#2c4a4100);transition:transform .8s var(--weich),opacity .8s var(--weich)}
.stueck-bild{position:relative;z-index:1;display:block;width:100%;transform-origin:50% 92%;transition:transform .8s var(--weich)}
.stueck-bild img{display:block;width:100%;height:auto}
.stueck-film{position:absolute;inset:0;background:0 0/2400% 100% no-repeat;opacity:0;pointer-events:none}
.film-an .stueck-film,.film-einmal .stueck-film{opacity:1;animation:stueck-lauf 2s steps(24,jump-none) infinite}
.film-einmal .stueck-film{animation-iteration-count:1}
/* 506j · Die Hängematte schaukelt deutlich (±12° um die Aufhängung) und darum gemächlicher: 36 Bilder in 3 s statt 24 in 2 s. */
.tat-begleiten .stueck-film{background-size:3600% 100%}
.tat-begleiten .film-an .stueck-film,.tat-begleiten .film-einmal .stueck-film{animation-duration:3s;animation-timing-function:steps(36,jump-none)}
/* Nur Stücke mit Filmstreifen blenden ihr Standbild aus; Haus und Korb (ohne Film) bleiben sichtbar und wiegen bzw. hüpfen (506h). */
.film-an[data-film] .stueck-bild img,.film-einmal[data-film] .stueck-bild img{opacity:0}
@keyframes stueck-lauf{from{background-position:0 0}to{background-position:100% 0}}
.film-an[data-art=wiegen] .stueck-bild,.film-einmal[data-art=wiegen] .stueck-bild{animation:stueck-wiegen 2.4s ease-in-out infinite}
.film-an[data-art=hopsen] .stueck-bild,.film-einmal[data-art=hopsen] .stueck-bild{animation:stueck-hopsen 1.6s var(--weich) infinite}
.film-einmal[data-art] .stueck-bild{animation-iteration-count:1}
@keyframes stueck-wiegen{0%,100%{transform:translateY(-7px) rotate(0)}30%{transform:translateY(-8px) rotate(-1.4deg)}70%{transform:translateY(-8px) rotate(1.4deg)}}
@keyframes stueck-hopsen{0%,100%{transform:translateY(-7px) scale(1)}35%{transform:translateY(-17px) scale(.98,1.03)}62%{transform:translateY(-7px) scale(1.04,.96)}80%{transform:translateY(-9px) scale(1)}}
/* Zartes Rund, Strich in der dunklen Schwester derselben Farbe. */
.tat-bauen{--ton:#f3e2d1;--strich:#99603f}
.tat-begleiten{--ton:#e2eadb;--strich:#4c6e52}
.tat-momente{--ton:#f5e0da;--strich:#a8565f}
.tat-ernten{--ton:#f2e8c6;--strich:#8a6a1e}
.tat-gaeste{--ton:#dbeae7;--strich:#356f72}
.tat-wort{font:400 clamp(20px,1.6vw,25px)/1.2 var(--serif);letter-spacing:.005em}
/* Der Satz hat seinen Platz schon (nichts springt), er erscheint nur sanft. */
.tat-satz{display:block;max-width:15em;margin-top:-8px;min-height:4.5em;font-size:clamp(14px,1vw,16px);line-height:1.5;color:var(--leise);opacity:0;transform:translateY(-4px);transition:opacity .5s ease,transform .6s var(--weich);text-wrap:balance}
.tat:hover .tat-satz{opacity:1;transform:none;transition-delay:.06s}
.tat:hover .stueck-bild{transform:translateY(-7px)}
.tat:hover .tat-stueck::after{transform:scale(.86);opacity:.75}
.tat:hover .tat-stueck::before{transform:scale(1.04)}

/* ── Abschnitte mit weichen Wellenkanten (Maske, damit die Körnung bis in die Welle reicht) ── */
.welle-oben-unten{-webkit-mask:var(--welle-oben) top/100% var(--welle) no-repeat,linear-gradient(#000 0 0) 0 calc(var(--welle) - 1px)/100% calc(100% - 2 * var(--welle) + 2px) no-repeat,var(--welle-unten) bottom/100% var(--welle) no-repeat;mask:var(--welle-oben) top/100% var(--welle) no-repeat,linear-gradient(#000 0 0) 0 calc(var(--welle) - 1px)/100% calc(100% - 2 * var(--welle) + 2px) no-repeat,var(--welle-unten) bottom/100% var(--welle) no-repeat}
.welle-oben{-webkit-mask:var(--welle-oben) top/100% var(--welle) no-repeat,linear-gradient(#000 0 0) 0 calc(var(--welle) - 1px)/100% calc(100% - var(--welle) + 1px) no-repeat;mask:var(--welle-oben) top/100% var(--welle) no-repeat,linear-gradient(#000 0 0) 0 calc(var(--welle) - 1px)/100% calc(100% - var(--welle) + 1px) no-repeat}

/* ── Eindrücke: Collage auf zartem Wasser-Grün ── */
.moments{background-color:var(--wasser);background-image:var(--koernung);background-size:240px 240px;padding:calc(var(--welle) + clamp(28px,3vw,48px)) 0 calc(var(--welle) + clamp(36px,3.6vw,56px))}
.section-head h2{font-size:clamp(34px,3.3vw,52px)}
.section-head>p{font-size:clamp(18px,1.35vw,21px);color:var(--leise);margin-top:10px;max-width:46em}
.collage{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:clamp(200px,19.5vw,300px);gap:clamp(12px,1.15vw,18px);margin-top:clamp(24px,2.4vw,36px)}
/* 714c: zwölf Kacheln in vier Reihen. Die drei Platz-Klassen (fans, fussball, volleyball) bleiben, wenn 714d den Inhalt tauscht (index.html). */
.building{grid-column:1/6}.follow{grid-column:6/10}.interior{grid-column:10/13}
.momente{grid-column:1/5}.market{grid-column:5/8}.platz-fans{grid-column:8/13}
.platz-fussball{grid-column:1/4}.werft{grid-column:4/9}.platz-volleyball{grid-column:9/13}
.wahrzeichen{grid-column:1/6}.tiere{grid-column:6/10}.zauber{grid-column:10/13}
.moment{position:relative;overflow:hidden;border-radius:22px;background:#c9d9d1;isolation:isolate;box-shadow:0 18px 36px -30px #1c3a3299}
.moment>img,.moment>video{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.8s var(--weich)}
.moment:hover>img,.moment:hover>video{transform:scale(1.025)}
.momente img{object-position:50% 60%}
.moment figcaption{position:absolute;z-index:1;left:0;right:0;bottom:0;display:grid;grid-template-rows:auto 0fr;padding:64px 22px 18px;background:linear-gradient(180deg,#12373a00 0%,#12373a80 48%,#12373ad6 100%);color:#fffaf0;transition:grid-template-rows .6s var(--weich)}
.kachel-titel{font-size:clamp(16px,1.25vw,20px);font-weight:600;line-height:1.3;text-shadow:0 1px 8px #12373a66;text-wrap:balance}
.kachel-satz{min-height:0;overflow:hidden;opacity:0;transition:opacity .5s ease}
.kachel-satz>span{display:block;padding-top:5px;font-size:clamp(14px,1.02vw,16px);line-height:1.45;color:#fbf3e6;text-wrap:balance}
.moment:hover figcaption,.moment:focus-within figcaption{grid-template-rows:auto 1fr}
.moment:hover .kachel-satz,.moment:focus-within .kachel-satz{opacity:1;transition-delay:.1s}
.moment .video-toggle{right:10px;top:10px}
.moment:focus-visible{outline:3px solid #e48a71;outline-offset:3px}

/* ── Stimmungen: ein dunkles Band in Abendfarben (506e). Oben glüht noch das Abendrot, dann wird es Nacht –
   wie ein Sonnenuntergang beim Scrollen. Rein und raus über dieselben weichen Wellen wie die übrigen Abschnitte. ── */
.stimmungen{position:relative;margin-top:calc(var(--welle) * -.45);color:var(--nacht-text);background-color:var(--nacht);
  background-image:var(--koernung),radial-gradient(46% 30% at 80% 30%,#f7e6c414,transparent 72%),
    linear-gradient(180deg,var(--abend-1) 0,var(--abend-2) calc(var(--welle) * 1.15),var(--abend-3) calc(var(--welle) * 2.3),var(--abend-4) calc(var(--welle) * 3.7),var(--nacht) calc(var(--welle) * 5.4),var(--nacht) calc(100% - var(--welle) * 2),var(--nacht-tief) 100%);
  background-size:240px 240px,auto,auto;
  padding:calc(var(--welle) + clamp(70px,6.6vw,112px)) 0 calc(var(--welle) + clamp(40px,4vw,64px))}
.stimmungen-kopf{text-align:center}
.stimmungen-kopf h2{font-size:clamp(34px,3.3vw,52px);color:var(--nacht-text);text-shadow:0 1px 18px #0d2a2e59}
.stimmungen-raster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:clamp(230px,23vw,350px);gap:clamp(12px,1.15vw,18px);margin-top:clamp(28px,2.8vw,44px)}
.stimmung-abendrot{grid-column:1/8}.stimmung-lichter{grid-column:8/13}
.stimmung-boote{grid-column:1/6}.stimmung-schlaflos{grid-column:6/13}
.stimmungen .moment{background:var(--nacht-tief);box-shadow:0 0 0 1px #fbf3e612,0 24px 46px -32px #000000b3}
.stimmungen .moment figcaption{background:linear-gradient(180deg,#0d2a2e00 0%,#0d2a2e85 48%,#0d2a2ee6 100%)}
.stimmungen .kachel-titel{text-shadow:0 1px 10px #0d2a2e99}
.stimmungen .kachel-satz>span{color:var(--nacht-leise)}
.stimmungen .moment:focus-visible{outline-color:#f2b9a0}

/* ── Bewohner (Paket 714f2, Entwurf 714fE2 B): eine kleine Aufstellung zwischen „Eindrücke“ und „Wenn es Abend wird“, auf dem hellen Papier wie „Was du tust“.
   Alle stehen ganz da, gleich groß, auf einer weichen Fläche; im Bild liegen die Füße bei 94 % der Höhe (fester Maßstab beim Rendern), darum sitzt die
   Fläche bei 1,41 × Breite. Die zwei Gäste stehen etwas abseits auf ihrer eigenen, rosé. Der Satz hat seinen Platz schon und erscheint beim Überfahren;
   ohne Maus und am Handy steht er immer da. Unten etwas mehr Polster: das Abendband schiebt sich um eine halbe Welle herauf. ── */
.bewohner{padding-top:clamp(52px,5.4vw,84px);padding-bottom:calc(var(--welle) * .45 + clamp(20px,2.4vw,40px))}
.bewohner .section-head{text-align:center}
.bewohner .section-head>p{margin-inline:auto;max-width:34em;text-wrap:balance}
.bw-aufstellung{--bw:clamp(124px,12.4vw,178px);display:flex;justify-content:center;align-items:flex-start;gap:clamp(26px,4vw,64px);margin:clamp(40px,4vw,60px) auto 0;max-width:1280px}
.bw-gruppe{position:relative;list-style:none;margin:0;padding:0;display:flex;justify-content:center;gap:clamp(14px,2.2vw,40px)}
.bw-gruppe::before{content:'';position:absolute;z-index:0;left:calc(var(--bw) * -.12);right:calc(var(--bw) * -.12);top:calc(var(--bw) * 1.21);height:calc(var(--bw) * .4);border-radius:50%;background:radial-gradient(closest-side,var(--flaeche) 0 55%,color-mix(in srgb,var(--flaeche) 50%,transparent) 78%,transparent)}
.bw-bewohner{--flaeche:var(--sand)}
.bw-zeile{display:block;font:600 12px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--akzent)}
.bw-figur{position:relative;z-index:1;width:var(--bw);display:flex;flex-direction:column;align-items:center;text-align:center;border-radius:18px}
.bw-figur img{display:block;width:100%;height:auto;aspect-ratio:2/3;transition:transform .8s var(--weich)}
.bw-figur h3{font-size:clamp(22px,1.7vw,27px);margin-top:12px}
.bw-figur .bw-zeile{margin-top:4px}
.bw-satz{max-width:12.5em;min-height:4.5em;margin-top:8px;font-size:clamp(14px,.98vw,15.5px);line-height:1.5;color:var(--leise);opacity:0;transform:translateY(-4px);transition:opacity .5s ease,transform .6s var(--weich);text-wrap:balance}
.bw-figur:hover .bw-satz,.bw-figur:focus-within .bw-satz{opacity:1;transform:none;transition-delay:.06s}
.bw-figur:hover img{transform:translateY(-6px)}
.bw-figur:focus-visible{outline:3px solid #e48a71;outline-offset:6px}
@media(max-width:1100px){
  .bw-aufstellung{--bw:clamp(124px,15vw,170px)}
  .bw-gruppe{flex-wrap:wrap;row-gap:56px}
  .bw-gruppe::before{display:none}
  .bw-figur::before{content:'';position:absolute;z-index:-1;left:-8%;right:-8%;top:calc(var(--bw) * 1.24);height:calc(var(--bw) * .34);border-radius:50%;background:radial-gradient(closest-side,var(--flaeche) 0 55%,color-mix(in srgb,var(--flaeche) 50%,transparent) 78%,transparent)}
}
/* Handy: je zwei nebeneinander, jede Figur auf ihrer eigenen kleinen Fläche; der Satz steht immer da. */
@media(max-width:620px){
  .bewohner{padding-top:44px}
  .bewohner .section-head{text-align:left}
  .bewohner .section-head>p{margin-inline:0}
  .bw-aufstellung{--bw:150px;display:block;margin-top:30px}
  .bw-gruppe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 10px;justify-items:center}
  .bw-gruppe::before{display:none}
  .bw-figur::before{content:'';position:absolute;z-index:-1;left:-8%;right:-8%;top:calc(var(--bw) * 1.24);height:calc(var(--bw) * .34);border-radius:50%;background:radial-gradient(closest-side,var(--flaeche) 0 55%,color-mix(in srgb,var(--flaeche) 50%,transparent) 78%,transparent)}
  .bw-satz{min-height:0;font-size:15px}
  .bw-figur:hover img{transform:none}
}
@media(max-width:620px),(hover:none){.bw-satz{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.bw-figur:hover img{transform:none}}

/* ── In Ruhe kennenlernen ── */
.fairness{padding-top:clamp(36px,4vw,64px);padding-bottom:clamp(48px,5vw,80px)}
.fairness .section-head h2{font-size:clamp(34px,3.4vw,54px)}
.fairness-content{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,4.6vw,72px);align-items:center;margin-top:clamp(26px,2.8vw,42px)}
.promises>div{padding:18px 0 19px;border-bottom:1px solid var(--linie)}
.promises>div:first-child{padding-top:2px}
.promises>div:last-child{border-bottom:0;padding-bottom:0}
.promises dt{font-size:clamp(23px,1.85vw,29px)}
.promises dd{font-size:clamp(17px,1.2vw,19px);line-height:1.5;color:var(--leise);margin-top:6px}
.fairness-image{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 50%;border-radius:28px;background:#d9e5dc;box-shadow:0 26px 50px -38px #1c3a3299}

.feldzeile{display:flex;gap:10px}
.feldzeile input{flex:1;min-width:0;min-height:52px;padding:0 22px;border:1px solid #c9c1b0;border-radius:999px;background:#fffdf8;font-size:17px;transition:border-color .35s ease,box-shadow .35s ease}
.feldzeile input:hover{border-color:var(--rand-kraeftig)}
.feldzeile input:focus{outline:none;border-color:var(--rand-kraeftig);box-shadow:0 0 0 4px #e6efe2}
.feldzeile input[aria-invalid=true]{border-color:var(--fehler)}
.feldzeile .knopf{min-height:52px;padding-inline:28px}

/* ── Fuß ── */
.site-footer{background-color:var(--sand);background-image:var(--koernung);background-size:240px 240px;padding:calc(var(--welle) + clamp(28px,3vw,44px)) 0 24px}
.footer-columns{display:grid;grid-template-columns:2fr 1fr 1.15fr .9fr;gap:40px}
.footer-brand>p{font:22px/1.4 var(--serif);margin-top:20px}
.site-footer h2{font:600 13px/1.5 var(--sans);text-transform:uppercase;letter-spacing:.14em;color:var(--leise-sand);margin:4px 0 14px}
.site-footer ul{list-style:none;margin:0;padding:0;font-size:18px;line-height:2}
.site-footer small{font-size:12px;color:var(--leise-sand);margin-left:4px;letter-spacing:.02em}
/* 765 (Nutzer 20.10.): Login im Fuß ein schlichter Link wie die übrigen Einträge, ohne Hinterlegung beim Überfahren */
.fuss-link{color:inherit;text-decoration:none;transition:color .25s ease}
.fuss-link:hover{color:var(--tinte)}
.site-footer a.fuss-link[aria-current=page]{color:var(--tinte);font-weight:600}
.fuss-link:focus-visible{outline:2px solid #cdb99c;outline-offset:3px;border-radius:4px}
.site-footer .fuss-sozial{display:flex;gap:10px;margin-top:22px;font-size:0;line-height:1}
.sozial-knopf{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;color:var(--leise-sand);box-shadow:inset 0 0 0 1px #cdb99c;transition:background-color .35s ease,color .35s ease,box-shadow .35s ease}
.sozial-knopf:hover,.sozial-knopf:focus-visible{background:var(--fuellung-sand);color:var(--tinte);box-shadow:inset 0 0 0 1px #b9a080}
.noscript{padding:20px;text-align:center;background:var(--creme);color:var(--tinte)}

/* ── Schildchen (Paket 714f1): Ist die Figurenkarte oben aus dem Bild, unten rechts ein kleines Schild mit den Köpfen der beiden Figuren, am Handy eine
   schmale Leiste unten (über dem Rand des Geräts). Weich ein und aus, ohne Hüpfen (bei weniger Bewegung ganz ohne, siehe unten); ohne JavaScript verborgen.
   Der Kopf aus dem Standbild der Karte (figur-w/m.webp, 400 × 500): Mitte bei 148 | 122, Ausschnitt 156 px; vom Bühnenbild kommt er schon zugeschnitten. ── */
.schildchen{position:fixed;z-index:20;right:max(22px,env(safe-area-inset-right,0px));bottom:max(22px,env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:14px;padding:6px 6px 6px 20px;background:var(--creme);color:var(--tinte);border:1px solid #efe5d6;border-radius:999px;box-shadow:0 16px 36px -20px #1c3a3273,0 2px 8px #1c3a3214;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .4s ease,transform .4s var(--weich),visibility 0s linear .4s}
.schildchen[hidden]{display:none}
.schildchen[data-zeigen]{opacity:1;visibility:visible;transform:none;transition:opacity .4s ease,transform .4s var(--weich),visibility 0s}
.schild-zeile{margin:0;font:600 15px/1.25 var(--sans);letter-spacing:.01em;white-space:nowrap}
.schild-koepfe{display:flex;gap:6px}
.schild-kopf{position:relative;display:block;flex:none;width:52px;height:52px;padding:0;border:1px solid #fffaf1;border-radius:50%;background:#f3e3d4;overflow:hidden;color:inherit;transition:border-color .3s ease,background-color .3s ease,box-shadow .3s ease}
.schild-kopf[data-schild-kopf=m]{background:#e6ebdf}
.schild-kopf[hidden]{display:none}
.schild-kopf:hover{border-color:var(--rand-kraeftig);background:#efdccb}
.schild-kopf[data-schild-kopf=m]:hover{background:#dde6d6}
.schild-kopf:focus-visible{outline:2px solid var(--rand-kraeftig);outline-offset:2px}
.schild-kopf[aria-busy=true]{cursor:progress}
.schild-bild{position:absolute;inset:0;border-radius:50%;overflow:hidden;pointer-events:none}
.schild-bild img{position:absolute;display:block;max-width:none}
.schild-bild[data-art=live] img{inset:0;width:100%;height:100%}
.schild-bild[data-art=poster] img{left:-44.9%;top:-28.2%;width:256.4%;height:auto}
.schild-bild[data-art=leer] img{display:none}
@media(max-width:620px){
  .schildchen{left:12px;right:12px;bottom:max(10px,env(safe-area-inset-bottom,0px));justify-content:space-between;padding:5px 5px 5px 18px}
  .schild-kopf{width:46px;height:46px}
}
@media(prefers-reduced-motion:reduce){.schildchen,.schildchen[data-zeigen]{transform:none}}

/* ── Textseiten (Paket 766): Impressum, Datenschutz, AGB. Gleiche Schriften und Farben, eine ruhige Spalte; der Hinweis oben fällt weg, wenn die echten Texte stehen. ── */
.textseite{min-height:100vh;display:flex;flex-direction:column}
.textseite>main{flex:1 0 auto;padding-top:clamp(18px,2.6vw,34px);padding-bottom:clamp(40px,6vw,88px)}
.text-spalte{max-width:none}
/* 767 (Nutzer 20.10.): die ganze Breite nutzen. Ab 860 px steht die Überschrift jedes Abschnitts links, der Text rechts daneben;
   beides wächst mit dem Fenster. Schmaler: eine Spalte. */
@media (min-width:860px){
  .text-spalte section{display:grid;grid-template-columns:minmax(200px,28%) 1fr;column-gap:clamp(32px,5vw,88px);align-items:start;padding:26px 0;border-top:1px solid var(--linie)}
  .text-spalte section>h2{margin:0;padding-top:2px}
  .text-spalte section>:not(h2){grid-column:2}
  .text-spalte h1{margin-bottom:18px}
}
.zurueck{display:flex;width:fit-content;min-height:44px;padding:6px 20px;font-size:15px}
.text-spalte h1{font-size:clamp(36px,4.4vw,56px);margin:20px 0 26px}
.text-spalte h2{font-size:clamp(22px,2.1vw,28px);margin:36px 0 10px}
.text-spalte p{margin:0 0 14px}
.text-spalte p a{text-decoration:underline;text-decoration-color:var(--rand-kraeftig);text-underline-offset:3px}
/* 720: die echten Rechtstexte. Listen und Unterüberschriften (Widerrufsbelehrung), „Stand“, Sprungziele (#widerruf), Felder zum Ausfüllen
   gelb hinterlegt; der englische Satz oben (recht.nur.deutsch) erscheint nur, wenn die Seite auf Englisch steht. */
.text-spalte ul,.text-spalte ol{margin:0 0 14px;padding-left:1.4em}
.text-spalte li{margin:0 0 8px}
.text-spalte li a{text-decoration:underline;text-decoration-color:var(--rand-kraeftig);text-underline-offset:3px}
.text-spalte h3{font-size:clamp(19px,1.5vw,22px);margin:24px 0 8px}
.text-spalte section>div>h3:first-child{margin-top:0}
.text-spalte section{scroll-margin-top:24px}
.text-spalte code{font:inherit;overflow-wrap:anywhere}
.recht-stand{font-size:15px;color:var(--leise)}
.feld{padding:0 3px;border-radius:4px;background:#f6e3b4}
.nur-deutsch{display:none}
html[lang=en] .nur-deutsch{display:block;margin:0 0 18px;font-size:17px;color:var(--leise)}

body[data-editor=open]{overflow:hidden}
.character-creator{font-family:var(--sans)}
.character-creator .creator-population{display:none}
.character-creator .creator-card header>div{flex:1;min-width:0}
.character-creator [data-title]:focus{outline:none}
.character-creator .creator-hint{font-size:13px}

/* ── Breiten ── */
@media(max-width:1200px){
  .panorama{min-height:490px;padding:20px 26px}
  .atelier{max-width:46%;padding:24px 20px 16px}
  .characters{gap:12px}
  .character-stage{height:205px}
  .footer-columns{gap:28px}
}
@media(min-width:901px) and (max-height:820px){
  .site-header{padding-top:14px;padding-bottom:8px}
  .hero-intro{padding-top:4px;padding-bottom:18px}
  .hero h1{font-size:56px}
  .hero-intro>p{font-size:20px;margin-top:6px}
  .hero-kurz{margin-top:12px}
  .panorama{min-height:450px;padding:18px 30px}
  .atelier{padding:20px 22px 14px}
  .atelier [data-phase=choose] h2{font-size:27px}
  .character-stage{height:185px}
  .characters{margin-top:12px}
  .atelier-foot{margin-top:10px}
}
@media(max-width:900px){
  .panorama{min-height:450px;padding:18px}
  .atelier{max-width:52%;padding:22px 16px 14px;border-radius:24px}
  .character-stage{height:180px}
  .characters{gap:10px}
  .atelier [data-phase=choose] h2{white-space:normal}
  .ready-stage{width:105px;height:155px}
  .ready-summary{gap:10px}
  .ready-summary h2{font-size:28px}
  .atelier h3{font-size:24px}
  .tat{gap:14px;padding:4px 6px}
  .tat-stueck{width:132px}
  .tat-wort{font-size:18px}
  .tat-satz{font-size:14px;margin-top:-6px}
  .collage{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:230px}
  .building{grid-column:1/4}.follow{grid-column:4/7}
  .interior{grid-column:1/3}.momente{grid-column:3/7}
  .market{grid-column:1/3}.platz-fans{grid-column:3/7}
  .platz-fussball{grid-column:1/4}.werft{grid-column:4/7}
  .platz-volleyball{grid-column:1/4}.wahrzeichen{grid-column:4/7}
  .tiere{grid-column:1/5}.zauber{grid-column:5/7}
  .stimmungen-raster{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:240px}
  .stimmung-abendrot,.stimmung-schlaflos{grid-column:1/7}
  .stimmung-lichter{grid-column:1/4}.stimmung-boote{grid-column:4/7}
  .fairness-content{grid-template-columns:1fr;gap:30px}
  .fairness-image{aspect-ratio:16/9}
  .footer-columns{grid-template-columns:1.5fr 1fr 1fr}
  .footer-brand{grid-column:1/-1;display:flex;gap:28px;align-items:center}
  .footer-brand>p{margin:0}
  .site-footer .fuss-sozial{margin-top:0;margin-left:auto}
}
/* Schmal: eine ruhige Liste untereinander – Zeichen links, Wort und Satz rechts, der Satz steht immer da. */
@media(max-width:760px){
  .taten{padding:40px 0 30px}
  .taten-reihe{grid-template-columns:1fr;max-width:460px}
  .tat{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:20px;row-gap:2px;align-items:center;padding:16px 4px;text-align:left}
  .tat+.tat::before{left:128px;right:4px;top:0;height:1px;width:auto;background:linear-gradient(90deg,#2c4a4126,#2c4a4110)}
  .tat-stueck{grid-row:1/3;width:108px}
  .tat-wort{align-self:end;font-size:21px}
  .tat-satz{align-self:start;max-width:none;min-height:0;margin:0;font-size:15px;opacity:1;transform:none;text-wrap:pretty}
  .tat:hover .stueck-bild{transform:none}
}
@media(max-width:620px){
  .wrap{width:calc(100% - 40px)}
  .site-header{gap:12px;padding-top:16px;padding-bottom:10px}
  .brand img{width:138px}
  .kopf-nav{gap:8px}
  .login{font-size:15px;padding:7px 18px;min-height:44px}
  .sprache{min-width:34px;padding:4px 7px}
  .hero-intro{padding-top:14px;padding-bottom:20px}
  .hero h1{font-size:44px}
  .hero-intro>p{font-size:18px;max-width:330px;margin:10px auto 0;line-height:1.45}
  .hero-kurz{display:grid;grid-template-columns:auto auto;justify-content:center;max-width:340px;margin-top:14px;gap:4px 20px;font-size:15px}/* zwei Spalten, die Haken stehen untereinander */
  .panorama{width:calc(100% - 24px);min-height:0;display:block;padding:150px 12px 12px;border-radius:26px;background-position:58% 20%}
  .panorama>video{object-position:58% center}
  .panorama>.video-toggle{top:10px;left:10px}
  .hero-striche{top:10px;left:56px}
  .gameplay-note{left:20px;top:118px;bottom:auto;font-size:12px}
  .atelier{width:100%;max-width:none;padding:22px 16px 14px;border-radius:22px}
  .atelier [data-phase=choose] h2{font-size:clamp(22px,6.2vw,27px)}
  .atelier-lead{font-size:15px}
  .characters{gap:10px;margin-top:16px}
  .character-stage{height:190px}
  .choice-label{font-size:19px;margin-top:6px}
  .character-main{padding-bottom:6px}
  .character-option{border-radius:18px}
  .ready-stage{width:120px;height:175px}
  .ready-summary{gap:16px}
  .moments{padding:calc(var(--welle) + 22px) 0 calc(var(--welle) + 28px)}
  .section-head h2,.fairness .section-head h2{font-size:34px}
  .section-head>p{font-size:17px;line-height:1.5}
  .collage{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:180px;gap:10px;grid-auto-flow:row dense}
  .building,.follow,.momente,.platz-fans,.werft,.wahrzeichen{grid-column:1/-1}
  .interior,.market,.platz-fussball,.platz-volleyball,.tiere,.zauber{grid-column:auto}
  .moment{border-radius:18px}
  .moment figcaption{padding:44px 13px 12px}
  .kachel-titel{font-size:15px}
  .kachel-satz>span{font-size:14px}
  .moment .video-toggle{right:6px;top:6px}
  .stimmungen{padding:calc(var(--welle) + 56px) 0 calc(var(--welle) + 34px)}
  .stimmungen-kopf h2{font-size:34px}
  .stimmungen-raster{grid-template-columns:1fr;grid-auto-rows:216px;gap:12px}
  .stimmung-abendrot,.stimmung-lichter,.stimmung-boote,.stimmung-schlaflos{grid-column:1/-1}
  .promises dt{font-size:25px}
  .promises dd{font-size:17px}
  .fairness-image{border-radius:22px}
  .feldzeile{flex-direction:column}
  .feldzeile .knopf{width:100%}
  .footer-columns{grid-template-columns:1fr 1fr;gap:28px 18px}
  .footer-brand{display:block}
  .footer-brand>p{margin-top:16px;font-size:20px}
  .site-footer .fuss-sozial{margin-top:18px;margin-left:0}
  .site-footer section:last-child{grid-column:2;grid-row:2/4}
  .site-footer section:nth-child(2){grid-column:1}
  .site-footer section:nth-child(3){grid-column:1}
  .site-footer ul{font-size:16px;line-height:1.4}
  .site-footer li>.fuss-link{display:inline-flex;align-items:center;min-height:44px;min-width:44px}/* 775: Tippfläche ≥ 44 px */
}
@media(max-width:380px){
  .site-header{width:calc(100% - 28px)}
  .brand img{width:126px}
  .login{padding:6px 14px}
  .hero h1{font-size:40px}
  .atelier{padding:20px 12px 12px}
  .character-stage{height:175px}
  .collage{grid-auto-rows:160px}
}
/* 775 (Nutzer 20.10.: „die Figuren mal etwas kleiner … ein bisschen kleiner darstellen“): Am Handy eine kompaktere Figurenkarte, damit oben mehr
   vom Film zu sehen ist. Figurenfelder flacher (Figuren gut 70 % so hoch), Titel und Zeile kleiner, Abstände knapper; „Gestalten“ bleibt eine große
   Fläche, der Würfel hat 44 × 44 zum Tippen. Der Film-Streifen über der Karte wächst von 150 auf 236 px, die Karte bleibt im ersten Bild. */
@media(max-width:620px){
  .panorama{--film-streifen:236px;padding-top:var(--film-streifen)}
  .gameplay-note{top:calc(var(--film-streifen) - 32px)}
  .atelier{padding:16px 12px 10px}
  .atelier [data-phase=choose] h2{font-size:clamp(21px,5.7vw,23px)}
  .atelier-lead{font-size:14px;margin-top:4px}
  .characters{gap:8px;margin-top:12px}
  .character-stage{height:136px}
  .choice-label{font-size:17px;margin-top:2px}
  .character-main{padding-bottom:4px}
  .character-random{margin-bottom:8px}
  .atelier-foot{margin-top:8px;font-size:13px}
}
@media(max-width:380px){
  .character-stage{height:128px}
}
/* Ohne Maus steht der Satz da, wo Platz ist: auf dem Tablet überall, auf dem Handy auf den breiten Kacheln.
   Die schmalen Handy-Kacheln zeigen ihn beim Antippen (Fokus). */
@media(hover:none) and (min-width:621px){
  .moment figcaption{grid-template-rows:auto 1fr}
  .kachel-satz{opacity:1}
}
@media(hover:none){.tat-satz{opacity:1;transform:none}}
@media(hover:none) and (max-width:620px){
  .building figcaption,.follow figcaption,.momente figcaption,.platz-fans figcaption,.werft figcaption,.wahrzeichen figcaption,.stimmung figcaption{grid-template-rows:auto 1fr}
  .building .kachel-satz,.follow .kachel-satz,.momente .kachel-satz,.platz-fans .kachel-satz,.werft .kachel-satz,.wahrzeichen .kachel-satz,.stimmung .kachel-satz{opacity:1}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .moment:hover>img,.moment:hover>video{transform:none}
  .tat:hover .stueck-bild,.tat:hover .tat-stueck::before,.tat:hover .tat-stueck::after{transform:none}
}
/* Keep the full shared Creator usable on a narrow screen without changing game styles. */
@media(max-width:720px){body .character-creator .creator-card{width:100%;max-width:100%;max-height:58dvh;border-radius:25px 25px 0 0}body .character-creator .creator-card header{padding:16px 20px 4px}body .character-creator .creator-card h2{font-size:25px;line-height:1.12;margin:5px 0 4px}body .character-creator .creator-eyebrow{font-size:12px;letter-spacing:.13em}body .character-creator .creator-scroll{padding:0 16px 12px}body .character-creator .creator-card footer{padding:10px 14px 14px;gap:6px}body .character-creator .creator-card footer button{padding:10px 8px;font-size:12px}body .character-creator .creator-card footer .creator-confirm{padding:11px 18px;font-size:12px}body .character-creator .creator-tabs{gap:5px}body .character-creator .creator-tabs button{font-size:12px;gap:3px;min-height:38px}body .character-creator .creator-tab-ico{width:17px;height:17px}body .character-creator .creator-tab-ico svg{width:17px;height:17px}body .character-creator .creator-name{margin-top:6px;padding:8px 12px 10px}body .character-creator .creator-preview-note{bottom:calc(58dvh + 8px)}}

/* The native Abendrot drawer is a wide grid. Its mobile host uses a vertical drawer. */
.character-option .choice-dot{top:24px;right:24px}
@media(max-width:620px){.collage{grid-auto-flow:row dense}}
@media(max-width:720px){
 body .character-creator.abendrot{padding:0;align-items:flex-end}
 body .character-creator.abendrot .creator-card{display:flex;flex-direction:column;width:100%;max-width:100%;height:58dvh;max-height:58dvh;min-height:0;border-radius:24px 24px 0 0}
 body .character-creator.abendrot .creator-card>header{flex:none;display:flex;padding:15px 46px 8px 20px;min-height:70px}
 body .character-creator.abendrot .creator-card>header>div{display:block;min-width:0}
 body .character-creator.abendrot .creator-card h2{font-size:24px;line-height:1.15;margin:4px 0 0}
 body .character-creator.abendrot .creator-eyebrow{font-size:12px}
 body .character-creator.abendrot .creator-close{right:14px;top:13px}
 body .character-creator.abendrot .creator-card>.creator-scroll{display:block;min-height:0;overflow:auto;padding:0 17px 14px;flex:1}
 body .character-creator.abendrot .creator-name{margin:5px 0 9px;width:auto}
 body .character-creator.abendrot .creator-tabs{display:flex;position:sticky;top:0;z-index:3;gap:12px;padding:7px 0;background:#fffaf6}
 body .character-creator.abendrot .creator-tabs button{font-size:12px;min-height:36px}
 body .character-creator.abendrot .creator-tab{display:block;overflow:visible;padding:4px 0;mask-image:none;-webkit-mask-image:none}
 body .character-creator.abendrot .creator-card fieldset,body .character-creator.abendrot .creator-card fieldset+fieldset,body .character-creator.abendrot .creator-card fieldset:has([data-outfits]){width:100%;margin:14px 0 0}
 body .character-creator.abendrot .creator-detail-options,body .character-creator.abendrot .creator-expressions,body .character-creator.abendrot [data-outfits]{grid-template-columns:repeat(3,minmax(0,1fr))}
 body .character-creator.abendrot .creator-card>footer{flex:none;align-self:stretch;display:flex;gap:6px;padding:9px 12px 12px;border-top:1px solid #f1e0da;background:#fffaf6}
 body .character-creator.abendrot .creator-card footer button{font-size:12px;padding:9px 7px;min-height:40px}
 body .character-creator.abendrot .creator-card footer .creator-confirm{font-size:12px;margin-left:auto;padding:11px 16px}
 body .character-creator.abendrot .creator-card footer .creator-wuerfel{padding:8px 10px;font-size:12px;gap:4px}
 body .character-creator.abendrot .creator-preview-note{bottom:calc(58dvh + 9px)}
}


/* Paket 776 · Englisch kommt: die Seite bleibt verborgen, bis seite.js die Texte gesetzt hat (sprache-frueh.js, höchstens 1,5 s). */
html[data-sprache-wechselt] body{visibility:hidden}