/* spielzeugrotation.de · Designsystem „Holzregal“ (Familie 24ideen: Fraunces für Titel, Atkinson zum Lesen, schwarze Hauptknöpfe)
   Signatur: das Holzregal mit Fächern, Kisten A–D mit Farbcode, Waldgrün und Holz als Akzent. Keine Inline-Stile (CSP). */

@font-face{font-family:"Fraunces";font-style:normal;font-weight:400 700;font-display:optional;src:url("../schrift/fraunces-normal-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:400 700;font-display:optional;src:url("../schrift/fraunces-normal-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-style:normal;font-weight:400 700;font-display:optional;src:url("../schrift/atkinson-normal-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Atkinson Hyperlegible Next";font-style:normal;font-weight:400 700;font-display:optional;src:url("../schrift/atkinson-normal-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-style:italic;font-weight:400 700;font-display:optional;src:url("../schrift/atkinson-italic-latin.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+FEFF,U+FFFD}
/* E33: Ersatzschriften, auf Fraunces/Atkinson angeglichen; kommt die eigene Schrift nicht zum ersten Bild, setzt VORAB data-ersatz (kein Wechsel) */
@font-face{font-family:"Fraunces Ersatz";font-weight:400 700;src:local("Georgia Bold"),local("Georgia-Bold");size-adjust:92.4%;ascent-override:105.8%;descent-override:27.6%;line-gap-override:0%}
@font-face{font-family:"Atkinson Ersatz";font-style:normal;font-weight:400 500;src:local("Arial"),local("ArialMT");size-adjust:98.7%;ascent-override:99.7%;descent-override:32%;line-gap-override:0%}
@font-face{font-family:"Atkinson Ersatz";font-style:normal;font-weight:600 700;src:local("Arial Bold"),local("Arial-BoldMT");size-adjust:98.2%;ascent-override:100.2%;descent-override:32.2%;line-gap-override:0%}

:root{
  --papier:#FAF6EF; --karte:#FFFDF9; --sand:#F1E6D3; --sand-2:#EADBC2;
  --tinte:#2F2A24; --tinte-2:#645748; --rand:#8F7A5B; --linie:#E6DCCB;
  --wald:#3E6B52; --wald-d:#2F5A43; --wald-h:#E2ECE5;
  --holz:#EBCB9F; --holz-m:#DDB27C; --holz-d:#C4945B; --holz-text:#7A5426;
  --a:#DC8D6F; --a-text:#9A4B32; --a-hell:#F6E1D8;
  --b:#8AB0C9; --b-text:#3F6A87; --b-hell:#E3ECF2;
  --c:#EEC060; --c-text:#7E5C10; --c-hell:#F6EAD0;
  --d:#B0C7AA; --d-text:#4A7048; --d-hell:#E6EEE3;
  --schatten:0 1px 2px rgba(59,47,35,.06),0 14px 30px -18px rgba(59,47,35,.38);
  --schatten-hoch:0 2px 4px rgba(59,47,35,.07),0 22px 40px -20px rgba(59,47,35,.45);
  --r1:10px; --r2:16px; --r3:24px;
  --titel:"Fraunces","Fraunces Ersatz",Georgia,"Times New Roman",serif;
  --text:"Atkinson Hyperlegible Next","Atkinson Ersatz",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --breite:1160px;
  /* iPhone quer (E26): Kamera-Aussparung links/rechts und Home-Leiste unten – viewport-fit=cover lässt die Seite darunter reichen */
  --sicher-links:env(safe-area-inset-left,0px); --sicher-rechts:env(safe-area-inset-right,0px); --sicher-unten:env(safe-area-inset-bottom,0px);
  --seitenrand:max(20px,var(--sicher-links),var(--sicher-rechts));
  color-scheme:light;
}
html[data-ersatz~=titel]{--titel:"Fraunces Ersatz",Georgia,"Times New Roman",serif}
html[data-ersatz~=text]{--text:"Atkinson Ersatz",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:88px}
body{margin:0;background:var(--papier);color:var(--tinte);font:400 1.0625rem/1.6 var(--text);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
img,svg{display:block;max-width:100%}
svg.i{display:inline-block;vertical-align:-.22em}
img{height:auto}
a{color:var(--wald-d);text-decoration-thickness:.08em;text-underline-offset:.18em}
a:hover{color:var(--tinte)}
:focus-visible{outline:3px solid var(--wald);outline-offset:3px;border-radius:6px}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{-webkit-hyphens:manual;hyphens:manual;font-family:var(--titel);font-weight:600;line-height:1.12;letter-spacing:-.01em;margin:0 0 .5em;font-optical-sizing:auto}
h1{font-size:clamp(2.1rem,1.4rem + 3.2vw,3.6rem)}
h2{font-size:clamp(1.65rem,1.25rem + 1.8vw,2.5rem)}
h3{font-size:clamp(1.2rem,1.1rem + .5vw,1.45rem)}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.3em}
li+li{margin-top:.35em}
strong{font-weight:700}
.nur-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sprung{position:absolute;left:12px;top:0;transform:translateY(-130%);z-index:50;background:var(--tinte);color:#fff;padding:12px 16px;border-radius:12px;text-decoration:none}
.sprung:focus{transform:translateY(12px);color:#fff}
.i{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
/* Symbolsatz der Seite (E31): nur Vorlagen für <use href="#i-…">, nimmt nirgends Platz ein – auch nicht auf Papier */
.symbolsatz{position:absolute;width:0;height:0;overflow:hidden}
.i--gross{width:1.6em;height:1.6em}

/* Raster und Abstände (4er-Raster) */
.huelle{width:min(100% - 2*var(--seitenrand),var(--breite));margin-inline:auto}
.huelle--schmal{width:min(100% - 2*var(--seitenrand),760px)}
.abschnitt{padding-block:clamp(48px,6vw,88px)}
.abschnitt--eng{padding-block:clamp(32px,4vw,56px)}
.abschnitt--sand{background:var(--sand)}
.abschnitt--karte{background:var(--karte)}
.stapel>*+*{margin-top:16px}
.raster{display:grid;gap:16px}
@media (min-width:640px){.raster--2{grid-template-columns:repeat(2,1fr)}.raster--3{grid-template-columns:repeat(2,1fr)}.raster--4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.raster--3{grid-template-columns:repeat(3,1fr)}.raster--4{grid-template-columns:repeat(4,1fr)}.raster{gap:24px}}
.zentriert{text-align:center}
.zentriert .lead{margin-inline:auto}
.dach{display:inline-flex;align-items:center;gap:8px;font:700 .8125rem/1.2 var(--text);letter-spacing:.09em;text-transform:uppercase;color:var(--holz-text);margin:0 0 12px}
.lead{font-size:clamp(1.12rem,1.05rem + .35vw,1.3rem);line-height:1.55;color:var(--tinte-2);max-width:40em}
.klein{font-size:.9375rem;color:var(--tinte-2)}
.text{max-width:68ch}

/* Kopf */
.kopf{position:sticky;top:0;z-index:20;background:var(--papier);backdrop-filter:saturate(1.3) blur(10px);-webkit-backdrop-filter:saturate(1.3) blur(10px);border-bottom:1px solid var(--linie)}
.kopf__innen{display:flex;align-items:center;gap:16px;min-height:68px}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--tinte);margin-right:auto}
.logo__bild{display:block;width:40px;height:40px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cdefs%3E%3ClinearGradient id='m1' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fbf6ee'/%3E%3Cstop offset='.55' stop-color='%23f9f2e7'/%3E%3Cstop offset='1' stop-color='%23eee6db'/%3E%3C/linearGradient%3E%3ClinearGradient id='m0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23e4c196'/%3E%3Cstop offset='.55' stop-color='%23DDB27C'/%3E%3Cstop offset='1' stop-color='%23bd986a'/%3E%3C/linearGradient%3E%3CradialGradient id='m3' cx='.36' cy='.3' r='.78'%3E%3Cstop offset='0' stop-color='%23e9bbaa'/%3E%3Cstop offset='.5' stop-color='%23D98A6C'/%3E%3Cstop offset='1' stop-color='%23b6765c'/%3E%3C/radialGradient%3E%3ClinearGradient id='m2' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23e8bd65'/%3E%3Cstop offset='.55' stop-color='%23E6B95B'/%3E%3Cstop offset='1' stop-color='%23cea653'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='8' y='8' width='224' height='224' rx='56' fill='url(%23m1)'/%3E%3Cpath d='M60,74A70,70 0 0 1 172,58' fill='none' stroke='%234F8467' stroke-width='15' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M154,30L190,56L150,76Z' fill='%234F8467' stroke='%234F8467' stroke-width='8' stroke-linejoin='round'/%3E%3Cpath d='M50,96H190A14,14 0 0 1 204,110V194A14,14 0 0 1 190,208H50A14,14 0 0 1 36,194V110A14,14 0 0 1 50,96Z' fill='url(%23m0)'/%3E%3Crect x='50' y='108' width='66' height='84' rx='6' fill='%23e0c298'/%3E%3Crect x='124' y='108' width='66' height='84' rx='6' fill='%23e0c298'/%3E%3Crect x='50' y='108' width='66' height='10' rx='5' fill='%23a98050' opacity='.35'/%3E%3Crect x='124' y='108' width='66' height='10' rx='5' fill='%23a98050' opacity='.35'/%3E%3Ccircle cx='83' cy='166' r='24' fill='url(%23m3)'/%3E%3Cellipse cx='74.8' cy='156.4' rx='7.2' ry='4.1' fill='%23FFFFFF' opacity='.4' transform='rotate(-28 74.8 156.4)'/%3E%3Cpath d='M137,150L137.9,140H176.1L177,150Z' fill='%23ebc77c' stroke='%23ebc77c' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M137.5,150H176.5A1.5,1.5 0 0 1 178,151.5V186A4,4 0 0 1 174,190H140A4,4 0 0 1 136,186V151.5A1.5,1.5 0 0 1 137.5,150Z' fill='url(%23m2)'/%3E%3Cpath d='M139,151.2H175' stroke='%23FFFFFF' stroke-opacity='.35' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") 50%/contain no-repeat}
.logo__wort{font:600 1.22rem/1 var(--titel);letter-spacing:-.01em}
.logo__wort span{color:var(--holz-text);font-weight:500}
.navi{display:none;gap:4px}
.navi a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:12px;text-decoration:none;color:var(--tinte);font-weight:700;font-size:.98rem}
.navi a:hover,.navi a[aria-current="page"]{background:var(--sand)}
@media (min-width:900px){.navi{display:flex}}
@media (max-width:420px){.logo__wort{font-size:1.06rem}.logo__bild{width:34px;height:34px}}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:14px;border:2px solid var(--tinte);background:var(--tinte);color:#fff;font:700 1.0625rem/1.2 var(--text);text-decoration:none;cursor:pointer;box-shadow:0 1px 2px rgba(47,42,36,.18),0 12px 24px -14px rgba(47,42,36,.6);transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease;-webkit-tap-highlight-color:transparent;text-align:center}
.knopf:hover{color:#fff;background:#1F1B17;transform:translateY(-1px);box-shadow:0 2px 3px rgba(47,42,36,.2),0 16px 28px -14px rgba(47,42,36,.65)}
.knopf:active{transform:translateY(0)}
.knopf--zweit{background:var(--karte);color:var(--tinte);border-color:var(--rand);box-shadow:none}
.knopf--zweit:hover{background:#fff;color:var(--tinte);border-color:var(--tinte);box-shadow:none}
.knopf--leise{background:transparent;color:var(--tinte);border-color:transparent;box-shadow:none;padding:0 12px}
.knopf--leise:hover{background:var(--sand);color:var(--tinte);box-shadow:none;transform:none}
.knopf--klein{min-height:44px;padding:0 16px;font-size:.98rem;border-radius:12px}
.knopf--voll{width:100%}
.knopf[disabled],.knopf[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}
.knopfreihe{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.textlink{font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:6px;min-height:44px}
.textlink::after{content:"›";content:"›" / "";font-size:1.25em;line-height:1;transform:translateY(-1px)}
.textlink:hover{text-decoration:underline}

/* Karten und Kennzeichnungen */
.karte{background:var(--karte);border-radius:var(--r3);box-shadow:var(--schatten);padding:24px}
.karte--rand{box-shadow:none;border:1px solid var(--linie)}
.karte__bild{display:grid;place-items:center;background:linear-gradient(#F7EFE2,#EFE2CD);border-radius:18px;aspect-ratio:1;overflow:hidden}
.karte__bild img{width:88%}
.marke{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:2px 10px;border-radius:999px;font:700 .8125rem/1.2 var(--text);background:var(--sand);color:var(--holz-text)}
.marke .i{width:1em;height:1em}
.marke--blau{background:var(--b-hell);color:var(--b-text)}.marke--ocker{background:var(--c-hell);color:var(--c-text)}
.marke--terra{background:var(--a-hell);color:var(--a-text)}.marke--rose{background:#F7E5DF;color:#8F4A40}
.marke--salbei{background:var(--d-hell);color:var(--d-text)}.marke--pflaume{background:#EFE6EC;color:#6E4F68}
.marke--holz{background:#F1E6D3;color:var(--holz-text)}.marke--gruen{background:var(--wald-h);color:var(--wald-d)}
.marke--ok{background:var(--wald-h);color:var(--wald-d)}
.marke--leer{background:transparent;border:1px solid var(--rand);color:var(--tinte-2)}
.hinweis{display:flex;gap:12px;align-items:flex-start;background:var(--karte);border:1px solid var(--linie);border-left:4px solid var(--holz-d);border-radius:14px;padding:14px 16px}
.hinweis--wald{border-left-color:var(--wald)}
.hinweis .i{color:var(--holz-text);margin-top:2px}
.hinweis p:last-child{margin-bottom:0}
.anzeige{font-size:.875rem;color:var(--tinte-2)}

/* Signatur: das Holzregal */
.regal{--spalten:3;position:relative;background:linear-gradient(#EDD0A4,#E0B985);padding:14px 14px 0;border-radius:14px 14px 8px 8px;display:grid;grid-template-columns:repeat(var(--spalten),1fr);column-gap:12px;box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 30px 40px -30px rgba(59,47,35,.6);margin-bottom:26px}
.regal::before,.regal::after{content:"";position:absolute;bottom:-24px;width:18px;height:24px;background:linear-gradient(90deg,#D9AE74,#C4945B);border-radius:0 0 5px 5px}
.regal::before{left:22px}.regal::after{right:22px}
.regal__fach{position:relative;min-width:0;aspect-ratio:1;background:linear-gradient(#F5EADA,#EADBC3);border-radius:8px;box-shadow:inset 0 14px 16px -12px rgba(59,47,35,.34),inset 0 -1px 0 rgba(255,255,255,.5);display:grid;place-items:end center;margin-bottom:14px}
.regal__fach::after{content:"";position:absolute;left:-14px;right:-14px;bottom:-14px;height:14px;background:linear-gradient(#E8C390,#CFA066);z-index:0}
.regal__fach>img{position:relative;z-index:1;width:90%;margin-bottom:-3%}
.regal__fach--leer::before{content:"";position:absolute;inset:22% 22% 18%;border:2px dashed rgba(122,84,38,.35);border-radius:12px}
.regal__fach .fach-nr{position:absolute;left:8px;top:6px;z-index:2;font:700 .75rem/1 var(--text);color:var(--holz-text);opacity:.8}
@media (min-width:640px){.regal{column-gap:16px;padding:18px 18px 0}.regal__fach{margin-bottom:18px}.regal__fach::after{left:-18px;right:-18px;bottom:-18px;height:18px}}
.regal--fuellen .regal__fach>img{animation:einraeumen .55s cubic-bezier(.2,.8,.25,1.15) both}
.regal--fuellen .regal__fach:nth-child(2)>img{animation-delay:.09s}.regal--fuellen .regal__fach:nth-child(3)>img{animation-delay:.18s}
.regal--fuellen .regal__fach:nth-child(4)>img{animation-delay:.27s}.regal--fuellen .regal__fach:nth-child(5)>img{animation-delay:.36s}
.regal--fuellen .regal__fach:nth-child(6)>img{animation-delay:.45s}.regal--fuellen .regal__fach:nth-child(7)>img{animation-delay:.54s}
.regal--fuellen .regal__fach:nth-child(8)>img{animation-delay:.63s}.regal--fuellen .regal__fach:nth-child(9)>img{animation-delay:.72s}
.regal--fuellen .regal__fach:nth-child(10)>img{animation-delay:.81s}
@keyframes einraeumen{from{opacity:0;transform:translateY(-22px) scale(.92)}to{opacity:1;transform:none}}
.boden{height:46px;background:linear-gradient(#E9DDCB,#DCCDB6);border-radius:0 0 var(--r3) var(--r3);margin-top:-30px}

/* Kisten A–D */
.kiste{display:flex;flex-direction:column;gap:12px;background:var(--karte);border-radius:var(--r3);box-shadow:var(--schatten);padding:18px;border-top:6px solid var(--kf,var(--a))}
/* Kistenfarben (E27): Kästchen in der kräftigen Farbe mit Buchstaben in Tinte – die hellen Töne sahen sich zu ähnlich, auch ohne Farbsehschwäche */
.kiste--a{--kf:var(--a);--kt:var(--a-text)}.kiste--b{--kf:var(--b);--kt:var(--b-text)}
.kiste--c{--kf:var(--c);--kt:var(--c-text)}.kiste--d{--kf:var(--d);--kt:var(--d-text)}
.kiste__kopf{display:flex;align-items:center;gap:12px}
.kiste__buchstabe{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--kf);color:var(--tinte);font:700 1.35rem/1 var(--titel)}
.kiste__titel{font:600 1.15rem/1.2 var(--titel);margin:0}
.kiste__dinge{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px}
.kiste__dinge figure{margin:0;text-align:center}
.kiste__dinge img{width:100%;aspect-ratio:1;background:linear-gradient(#F7EFE2,#EFE2CD);border-radius:14px}
.kiste__dinge figcaption{font-size:.8125rem;line-height:1.25;margin-top:4px;color:var(--tinte-2)}

/* Spielzeug-Kacheln (Raster, Lexikon) */
.kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
@media (min-width:640px){.kacheln{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:18px}}
.kachel{display:flex;flex-direction:column;gap:8px;background:var(--karte);border-radius:20px;box-shadow:var(--schatten);padding:10px 10px 14px;text-decoration:none;color:var(--tinte);transition:transform .16s ease,box-shadow .16s ease}
a.kachel:hover{transform:translateY(-2px);box-shadow:var(--schatten-hoch);color:var(--tinte)}
.kachel img{width:100%;aspect-ratio:1;background:linear-gradient(#F7EFE2,#EFE2CD);border-radius:14px}
.kachel__name{font-weight:700;line-height:1.3;padding:0 4px;display:flex;gap:6px;align-items:flex-start}
.kachel__name .i{margin-top:.1em}
.kachel__info{font-size:.875rem;color:var(--tinte-2);padding:0 4px}

/* Alters-Kacheln: Bild oben, Text darunter */
.alter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:640px){.alter{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:960px){.alter{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}}
.alter a{display:flex;flex-direction:column;gap:10px;background:var(--karte);border-radius:20px;box-shadow:var(--schatten);padding:8px 8px 14px;text-decoration:none;color:var(--tinte);transition:transform .16s ease,box-shadow .16s ease}
.alter a:hover{box-shadow:var(--schatten-hoch);transform:translateY(-2px);color:var(--tinte)}
.alter img{width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;background:linear-gradient(#F7EFE2,#EFE2CD);border-radius:14px}
.alter strong{display:block;font:600 1.15rem/1.2 var(--titel);padding:0 6px}
.alter a>span>span{display:block;font-size:.875rem;line-height:1.35;color:var(--tinte-2);padding:0 6px;margin-top:3px}

/* Start: Bühne */
.buehne{display:grid;grid-template-columns:minmax(0,1fr);gap:36px;align-items:center;padding-block:clamp(28px,5vw,72px) clamp(40px,6vw,88px)}
@media (min-width:960px){.buehne{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px}}
/* Bühne erst ganz zeigen (E33): Text und Bild stehen mittig zueinander – kam die Bildspalte nach dem Text, rückte er (Start 6 px, Altersseite 75 px) */
.buehne:not(:has(>.buehne__ende))>*{visibility:hidden}
.buehne h1{margin-bottom:16px}
.buehne .lead{margin-bottom:24px}
.abzeichen{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:22px;padding:0;list-style:none;font-size:.9375rem;color:var(--tinte-2)}
.abzeichen li{display:inline-flex;align-items:center;gap:8px;margin:0}
.abzeichen .i{color:var(--wald)}
.buehne__bild{position:relative}
/* Kiste B steht vor dem Regal auf dem Boden: Ihre Oberkante (28,5 % der Bildhöhe) liegt 2 px unter dem Boden der unteren Fächer.
   So verdeckt sie kein Spielzeug, und keines scheint auf ihr zu sitzen. Abstand Bühnen-Unterkante → Fachboden: 26 px Beine + 14/18 px Brett.
   Mittig unter der Grenze zwischen Fach 5 und 6 (bei 2/3 der Breite) – unter einem einzelnen Fach sähe sie aus wie eine Schublade. */
.buehne__kiste{position:absolute;right:calc(33.3% - 17%);top:100%;width:34%;margin-top:-38px;transform:translateY(-28.5%);z-index:2;filter:drop-shadow(0 14px 16px rgba(59,47,35,.18))}
.buehne__bild{margin-bottom:calc(24.4% - 38px)} /* Überhang der Kiste: 0,715 × 34 % Breite − 38 px */
@media (min-width:640px){.buehne__kiste{right:calc(33.3% - 15%);width:30%;margin-top:-42px}.buehne__bild{margin-bottom:calc(21.5% - 42px)}}

/* Schritte „So geht’s“ */
.schritte{counter-reset:s;display:grid;gap:20px;list-style:none;padding:0}
@media (min-width:860px){.schritte{grid-template-columns:repeat(3,1fr);gap:28px}}
.schritte li{counter-increment:s;margin:0;background:var(--karte);border-radius:var(--r3);box-shadow:var(--schatten);padding:20px 22px 24px}
.schritte img{width:min(220px,70%);margin:0 auto 6px}
.schritte h3::before{content:counter(s) ". ";color:var(--holz-text)}

/* Fragen (details) */
.fragen{display:grid;gap:12px}
.fragen details{background:var(--karte);border-radius:18px;box-shadow:var(--schatten)}
.fragen summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:18px 20px;font-weight:700;min-height:56px}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:"";flex:none;width:12px;height:12px;border-right:2.5px solid var(--tinte);border-bottom:2.5px solid var(--tinte);transform:rotate(45deg) translateY(-3px);transition:transform .2s ease}
.fragen details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.fragen details>div{padding:0 20px 18px;color:var(--tinte-2)}
.fragen details>div p:last-child{margin:0}

/* Pfad (Brotkrumen) */
.pfad{font-size:.9rem;color:var(--tinte-2);padding-top:18px}
.pfad ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:4px 8px}
.pfad li{margin:0;display:inline-flex;gap:8px}
.pfad li+li::before{content:"›";content:"›" / "";color:var(--rand)}
.pfad a{color:var(--tinte-2);padding-block:4px;margin-block:-4px}
.offline-hinweis{padding-top:12px}

/* Artikel (Ratgeber, Lexikon, Rechtliches) */
.artikel{max-width:72ch}
.artikel h2{margin-top:1.6em;font-size:clamp(1.45rem,1.2rem + 1vw,1.95rem)}
.artikel h3{margin-top:1.3em}
.artikel li{padding-left:.2em}
.artikel table{width:100%;border-collapse:collapse;margin:0 0 1.4em;font-size:.97rem;background:var(--karte);border-radius:14px;overflow:hidden;box-shadow:var(--schatten)}
.artikel th,.artikel td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--linie);vertical-align:top}
.artikel th{background:var(--sand);font-weight:700}
.tabelle{overflow-x:auto;margin:0 0 1.4em}
.tabelle table{margin:0}
.tabelle--breit table{min-width:520px}
.kurz{background:var(--karte);border-radius:18px;padding:18px 20px;box-shadow:var(--schatten);margin:0 0 1.6em}
.kurz h2{font:700 .8125rem/1.2 var(--text);letter-spacing:.09em;text-transform:uppercase;color:var(--holz-text);margin:0 0 8px}
.kurz ul{margin:0}
.stand{font-size:.9rem;color:var(--tinte-2)}

/* Fuß */
.fuss{background:#EFE4D2;margin-top:clamp(48px,6vw,88px);padding:44px 0 32px;font-size:.97rem}
.fuss__raster{display:grid;gap:28px}
@media (min-width:640px){.fuss__raster{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.fuss__raster{grid-template-columns:1.4fr repeat(3,1fr)}}
.fuss h2{font:700 .8125rem/1.2 var(--text);letter-spacing:.09em;text-transform:uppercase;color:var(--holz-text);margin:0 0 10px}
.fuss ul{list-style:none;padding:0;margin:0}
.fuss li{margin:0}
.fuss a{color:var(--tinte);text-decoration:none;display:inline-flex;min-height:36px;align-items:center}
.fuss a:hover{text-decoration:underline}
.fuss__unten{border-top:1px solid #DCCDB6;margin-top:28px;padding-top:18px;color:var(--tinte-2);font-size:.9rem;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}

/* ---------- Planer ---------- */
.planer{min-height:calc(100vh - 69px);min-height:calc(100dvh - 69px);display:flex;flex-direction:column}
.planer__kopf{position:sticky;top:69px;z-index:10;background:var(--papier);padding:12px 0 10px}
.fortschritt{display:flex;align-items:center;gap:12px;font-size:.9rem;color:var(--tinte-2);font-weight:700}
.fortschritt__leiste{flex:1;height:8px;background:var(--sand-2);border-radius:999px;overflow:hidden}
.fortschritt__leiste span{display:block;height:100%;width:0;background:var(--wald);border-radius:999px;transition:width .3s ease}
.schritt{flex:1;padding:20px 0 140px}
.schritt[hidden]{display:none}
.frage{font-size:clamp(1.9rem,1.4rem + 2.2vw,2.75rem);margin-bottom:10px}
.warum{color:var(--tinte-2);margin-bottom:22px;max-width:40em}
.leiste{position:fixed;left:0;right:0;bottom:0;z-index:15;background:rgba(250,246,239,.96);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:1px solid var(--linie);padding:12px 0 calc(12px + var(--sicher-unten))}
.leiste__innen{display:flex;gap:12px;align-items:center}
/* Weiter über data-aktion statt :last-child – das greift erst am Ende der Leiste, der Knopf sprang (E33) */
.leiste__innen [data-aktion="weiter"]{flex:1}
@media (min-width:640px){.leiste__innen [data-aktion="weiter"]{flex:0 0 auto;margin-left:auto;min-width:220px}}
.wahl{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:640px){.wahl{grid-template-columns:repeat(3,1fr)}}
@media (min-width:960px){.wahl--4{grid-template-columns:repeat(4,1fr)}}
.wahl--breit{grid-template-columns:1fr}
@media (min-width:640px){.wahl--breit{grid-template-columns:repeat(3,1fr)}}
.wahl__kachel{position:relative;display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center;background:var(--karte);border:2px solid transparent;border-radius:20px;box-shadow:var(--schatten);padding:12px 10px 14px;cursor:pointer;min-height:64px;transition:border-color .16s ease,background-color .16s ease,transform .16s ease;-webkit-tap-highlight-color:transparent}
.wahl__kachel:hover{border-color:var(--rand)}
.wahl__kachel input{position:absolute;opacity:0;pointer-events:none}
.wahl__kachel:has(input:focus-visible){outline:3px solid var(--wald);outline-offset:3px}
.wahl__kachel:has(input:checked){border-color:var(--tinte);background:#FFF9EF}
.wahl__kachel:has(input:checked)::after{content:"";position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;background:var(--tinte) url("../bild/haken.svg") center/16px no-repeat}
.wahl__kachel img{width:100%;max-width:150px;aspect-ratio:1;background:linear-gradient(#F7EFE2,#EFE2CD);border-radius:14px}
.wahl__titel{font-weight:700;line-height:1.25}
.wahl__info{font-size:.875rem;color:var(--tinte-2);line-height:1.3}
.wahl__kachel--zeile{flex-direction:row;text-align:left;align-items:center;padding:14px 16px}
.wahl__kachel--zeile .i{color:var(--wald)}
.empfohlen{position:absolute;top:-10px;left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--wald);color:#fff;font:700 .75rem/1 var(--text);padding:5px 10px;border-radius:999px}
.zaehler{display:flex;align-items:center;gap:14px;margin:18px 0 4px}
.zaehler output{font:600 1.6rem/1 var(--titel);min-width:7.5em;text-align:center}
.zaehler button{width:52px;height:52px;border-radius:50%;border:2px solid var(--rand);background:var(--karte);display:grid;place-items:center;cursor:pointer}
.zaehler button:hover{border-color:var(--tinte)}
.mini-regal{--spalten:3;display:grid;grid-template-columns:repeat(var(--spalten),1fr);gap:3px;width:100%;max-width:120px;aspect-ratio:1.1;padding:5px;background:linear-gradient(#E6C08C,#D7A970);border-radius:6px}
.mini-regal i{background:#F3E6D2;border-radius:2px;box-shadow:inset 0 3px 3px -2px rgba(59,47,35,.35)}
.gruppe{margin-top:26px}
.gruppe h3{display:flex;align-items:center;gap:8px;font-size:1.15rem;margin-bottom:12px}
.feld{display:flex;flex-direction:column;gap:8px;margin-top:24px}
.feld label{font-weight:700}
.feld textarea,.feld input[type="date"],.feld input[type="text"]{border:2px solid var(--rand);background:var(--karte);border-radius:14px;padding:12px 14px;min-height:52px;width:100%;max-width:560px}
.feld textarea{min-height:96px;resize:vertical}
.feld textarea:focus,.feld input:focus{border-color:var(--tinte);outline:none;box-shadow:0 0 0 3px rgba(62,107,82,.35)}
.schalter{display:flex;gap:14px;align-items:flex-start;margin-top:22px;background:var(--karte);border-radius:18px;padding:16px;box-shadow:var(--schatten);cursor:pointer;max-width:620px}
.schalter input{appearance:none;-webkit-appearance:none;flex:none;width:52px;height:32px;border-radius:999px;background:var(--rand);position:relative;cursor:pointer;margin:0;transition:background-color .16s ease}
.schalter input::after{content:"";position:absolute;top:4px;left:4px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform .16s ease;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.schalter input:checked{background:var(--wald)}
.schalter input:checked::after{transform:translateX(20px)}
.lade{display:grid;place-items:center;text-align:center;padding:40px 0 60px}
.lade .regal{width:min(320px,86vw);--spalten:3}

/* ---------- Plan ---------- */
.plan-kopf{padding:20px 0 8px}
.kennzahlen{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.kennzahlen li{margin:0}
.aktionen{display:flex;gap:10px;overflow-x:auto;padding:16px 2px 6px;margin:0 -2px;scrollbar-width:none}
.aktionen::-webkit-scrollbar{display:none}
.aktionen .knopf{flex:none}
/* feste Breite (E33): mit auto-Rand im Raster richtete sie sich nach den geladenen Bildern – Safari setzte das Regal schmaler und sprang beim Laden */
.plan-regal{width:100%;max-width:640px;margin:18px auto 8px}
.plan-raum{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:8px}
.plan-raum figure{margin:0;width:96px;text-align:center}
.plan-raum img{width:100%;aspect-ratio:1;background:linear-gradient(#F7EFE2,#EFE2CD);border-radius:16px}
.plan-raum figcaption{font-size:.8125rem;color:var(--tinte-2);line-height:1.25;margin-top:4px}
.set-wahl{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 18px}
.set-wahl button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:2px solid var(--rand);background:var(--karte);font-weight:700;cursor:pointer}
.set-wahl button[aria-pressed="true"]{background:var(--tinte);border-color:var(--tinte);color:#fff}
.set-wahl .punkt{width:12px;height:12px;border-radius:50%;background:var(--kf)}
.dinge{display:grid;gap:16px}
@media (min-width:760px){.dinge{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.dinge{grid-template-columns:repeat(3,1fr)}}
.ding{display:flex;flex-direction:column;background:var(--karte);border-radius:var(--r3);box-shadow:var(--schatten);overflow:hidden}
.ding__bild{position:relative;display:grid;place-items:center;background:linear-gradient(#F7EFE2,#EFE2CD);aspect-ratio:16/10}
/* Mit Bild quadratisch – so sahen die Karten nach dem Laden in allen Browsern aus; Chrome zeigte vor dem Laden 16:10, dann wuchs jede
   Karte um 130–140 px und schob den Plan nach unten (Menschentest E32) */
.ding__bild:has(>img){aspect-ratio:1}
.ding__bild img{height:92%;width:auto}
.ding__nr{position:absolute;left:12px;top:12px;font:700 .8125rem/1 var(--text);background:rgba(255,253,249,.9);border-radius:999px;padding:6px 10px;color:var(--holz-text)}
.ding__status{position:absolute;right:12px;top:12px}
.ding__text{padding:16px 18px 6px;display:flex;flex-direction:column;gap:8px;flex:1}
.ding__text h3{margin:0;font-size:1.25rem}
.ding__text p{margin:0}
.ding__text .zeile{display:flex;flex-wrap:wrap;gap:6px}
.ding__warum strong,.ding__spiel strong{display:block;font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;color:var(--holz-text)}
.ding__fuss{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px 14px;border-top:1px solid var(--linie);margin-top:10px}
.ding__fuss .knopf{min-height:44px;padding:0 12px;font-size:.94rem}
.kauf{display:flex;flex-direction:column;gap:2px;padding:12px 18px 0}
.kauf a{font-weight:700}
.kalender{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.kalender li{display:flex;align-items:center;gap:12px;background:var(--karte);border-radius:14px;padding:12px 14px;margin:0;box-shadow:var(--schatten)}
.kalender time{font-weight:700;min-width:8.5em}
.kalender .weg-rein{display:flex;align-items:center;gap:6px;flex-wrap:wrap;color:var(--tinte-2)}
.kalender .kb{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;font:700 .9rem/1 var(--titel);background:var(--kf);color:var(--tinte)}
.liste-kauf{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.liste-kauf li{display:flex;align-items:center;gap:12px;background:var(--karte);border-radius:14px;padding:8px 12px 8px 8px;margin:0;box-shadow:var(--schatten)}
.liste-kauf img{width:56px;height:56px;border-radius:12px;background:linear-gradient(#F7EFE2,#EFE2CD);flex:none}
.liste-kauf .n{flex:1;min-width:0}
.liste-kauf .n strong{display:block;line-height:1.25}
.liste-kauf .n span{font-size:.875rem;color:var(--tinte-2)}
.liste-kauf a{white-space:nowrap;font-weight:700;font-size:.94rem}
.preis{font-weight:700;color:var(--holz-text);letter-spacing:.05em}
.dialog{border:0;border-radius:var(--r3);padding:0;width:min(560px,100% - 2*max(12px,var(--sicher-links),var(--sicher-rechts)));background:var(--papier);color:var(--tinte);box-shadow:0 30px 80px -20px rgba(47,42,36,.55)}
.dialog::backdrop{background:rgba(47,42,36,.45)}
.dialog__innen{padding:22px}
.dialog__kopf{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.dialog__kopf h2{font-size:1.4rem;margin:0}
.alternativen{display:grid;gap:12px}
.alternative{display:flex;gap:12px;align-items:center;background:var(--karte);border-radius:18px;padding:10px;box-shadow:var(--schatten)}
.alternative img{width:84px;height:84px;border-radius:14px;background:linear-gradient(#F7EFE2,#EFE2CD);flex:none}
.alternative .n{flex:1}
.alternative strong{display:block}
.toast{position:fixed;left:max(16px,var(--sicher-links));right:max(16px,var(--sicher-rechts));margin-inline:auto;width:fit-content;max-width:min(560px,100% - 2*max(16px,var(--sicher-links),var(--sicher-rechts)));bottom:calc(96px + var(--sicher-unten));transform:translateY(20px);opacity:0;z-index:40;background:var(--tinte);color:#fff;padding:12px 18px;border-radius:14px;font-weight:700;transition:opacity .2s ease,transform .2s ease;pointer-events:none;max-width:calc(100% - 32px)}
.toast--zeigen{opacity:1;transform:none}
.begleiter{display:grid;gap:16px;align-items:center;background:var(--karte);border-radius:var(--r3);box-shadow:var(--schatten-hoch);padding:18px;border-left:6px solid var(--kf,var(--wald))}
@media (min-width:760px){.begleiter{grid-template-columns:auto 1fr auto;padding:20px 24px}}
.begleiter__bilder{display:flex;gap:6px}
.begleiter__bilder img{width:58px;height:58px;border-radius:12px;background:linear-gradient(#F7EFE2,#EFE2CD)}
.begleiter h2{font-size:1.35rem;margin:0 0 4px}
.begleiter p{margin:0;color:var(--tinte-2)}
.drucken-nur{display:none}

/* Bewegung nur, wenn gewünscht */
/* Seiten laden ruhig (Menschentest E32, Kopf-Skript VORAB in seiten/layout.mjs): Ändert ein Skript gleich den ersten Bildschirm (Plan
   auf diesem Gerät, Plan-Link), bleiben Inhalt und Fuß unsichtbar, bis es gezeichnet hat (höchstens 1 s, aufdecken() in
   js/tageswechsel.mjs) – Kopfzeile und Logo stehen sofort. Nur Firefox: das erste Bild erst mit Schriften und Bildern (höchstens 0,3 s).
   opacity statt visibility: Fokus und Bildschirmleser funktionieren schon vorher. */
html[data-laedt] body{opacity:0}
html[data-wartet] main,html[data-wartet] .fuss{opacity:0}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ---------- Ergänzungen: Raster-Klassen statt Inline-Stile (CSP) ---------- */
.regal--s2,.mini-regal--s2{--spalten:2}.regal--s3,.mini-regal--s3{--spalten:3}.regal--s4,.mini-regal--s4{--spalten:4}.regal--s5,.mini-regal--s5{--spalten:5}
.fs-1{width:20%!important}.fs-2{width:40%!important}.fs-3{width:60%!important}.fs-4{width:80%!important}.fs-5{width:100%!important}
a.regal__fach{text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent}
a.regal__fach:hover>img{transform:translateY(-3px)}
.regal__fach>img{transition:transform .2s ease}
.fach-fest{position:absolute;right:6px;top:6px;z-index:2;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--karte);color:var(--wald-d);box-shadow:var(--schatten)}
.fach-fest .i{width:15px;height:15px}
.eigen-bild{position:absolute;inset:16% 12% 10%;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:6px;border-radius:16px;background:var(--karte);color:var(--holz-text);box-shadow:0 8px 14px -10px rgba(59,47,35,.5);text-align:center;font:700 .78rem/1.2 var(--text)}
.eigen-bild .i{width:1.7em;height:1.7em}
.eigen-bild span{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
.ding__bild .eigen-bild{inset:14% 30%;font-size:.95rem}
.eigen-mini{display:grid;place-items:center;width:100%;aspect-ratio:1;border-radius:14px;background:linear-gradient(#F7EFE2,#EFE2CD);color:var(--holz-text)}
.eigen-mini .i{width:40%;height:40%}
.i--riesig{width:2.6em;height:2.6em}

/* Planer: Fragen */
.planer-seite .pfad{display:none}
body:has(.leiste) .fuss{padding-bottom:120px}
.planer__kopf .huelle{width:min(100% - 2*var(--seitenrand),var(--breite))}
.frage:focus,.lade__titel:focus,#plan-titel:focus{outline:none}
.knopf .zahl{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 7px;border-radius:999px;background:#fff;color:var(--tinte);font-size:.875rem}
.knopf[aria-busy="true"]{opacity:.7;cursor:progress}
.wahl__kachel--klein .wahl__titel{font-size:.94rem}
.wahl__kachel--aus{opacity:.45;cursor:not-allowed}
.wahl__kachel--aus:hover{border-color:transparent}
.genau{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin-top:18px}
.genau .klein{margin:0;font-weight:700}
.genau .zaehler{margin:0}
.geburt{max-width:560px;background:var(--karte);border-radius:18px;padding:14px 16px;box-shadow:var(--schatten)}
.geburt summary{cursor:pointer;font-weight:700;min-height:28px;color:var(--wald-d)}
.geburt[open] summary{margin-bottom:6px}
.geburt input[type="date"]{max-width:260px}
.geburt .klein{display:flex;gap:8px;align-items:flex-start;margin:4px 0 0}
.gespeichert{margin-top:6px}
.lade__titel{font-size:clamp(1.6rem,1.3rem + 1.4vw,2.2rem);margin:20px 0 6px}
.planer-info h3{display:flex;gap:8px;align-items:center;font-size:1.12rem}
.planer-info .raster{margin:22px 0}
.planer-info[hidden]{display:none}
.gruppe h2{display:flex;align-items:center;gap:8px;font-size:1.15rem;margin-bottom:12px}

/* Planer: Ergebnis */
.plan .kennzahlen .marke{min-height:32px;font-size:.875rem}
.status{margin-top:16px}
.status p,.wachsen p{margin:0}
.wachsen,.plan-jetzt .hinweis--achtung{margin-top:12px}
.wachsen .knopf{margin-top:10px}
.plan h2{margin-top:8px}
.marke--kauf{background:var(--karte);color:var(--tinte-2);border:1px solid var(--linie)}
.ding__bild .marke{box-shadow:0 1px 2px rgba(59,47,35,.12)}
.ding--leer .ding__bild{aspect-ratio:16/6}
.ding__text .klein.achtung,.ding__text .klein.ohnekauf,.extra,.privat{display:flex;gap:8px;align-items:flex-start}
.ding__text .klein .i,.extra .i,.privat .i{margin-top:2px;flex:none}
.ding__text .achtung .i{color:var(--a-text)}
.ding__text .ohnekauf .i{color:var(--wald)}
.kauf{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:8px 18px 0;margin:0}
.kauf a{display:inline-flex;align-items:center;gap:6px;min-height:44px}
.kiste--jetzt{box-shadow:0 0 0 3px var(--kf),var(--schatten-hoch)}
.kiste .knopf{align-self:flex-start;margin-top:auto}
.kalender li.vorbei{opacity:.55}
.kalender li.vorbei time{text-decoration:line-through}
@media (max-width:480px){.kalender li{flex-direction:column;align-items:flex-start;gap:6px}}
.liste-kauf .knopf{flex:none}
.korb{display:flex;flex-direction:column;gap:6px;margin-top:18px;align-items:flex-start}
.korb .anzeige{margin:0}
.raum{margin-top:14px;text-align:center}
.raum .klein{display:inline-flex;gap:6px;align-items:center;font-weight:700;margin-bottom:6px}
.plan-raum figcaption span{color:var(--tinte-2)}
.plan-fuss .knopfreihe{gap:4px}
.toast{display:flex;align-items:center;gap:14px;pointer-events:none}
.toast button{pointer-events:auto;border:0;background:transparent;color:#fff;font:700 1rem/1 var(--text);text-decoration:underline;text-underline-offset:3px;min-height:44px;padding:0 4px;cursor:pointer}
.toast--aktion{pointer-events:auto}
/* lange Meldung mit Knopf (E29: „Festhalten“ nennt, was nicht mehr nötig ist): Text über die ganze Breite, Knopf darunter rechts */
.toast--lang{flex-direction:column;align-items:stretch;gap:2px;line-height:1.4}
.toast--lang button{align-self:flex-end;margin-right:-4px}
.begleiter-ort{margin-top:-8px;margin-bottom:28px}
.begleiter .knopf{justify-self:start}

/* Karten, Ratgeber */
.karte--link{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--tinte);transition:transform .16s ease,box-shadow .16s ease}
.karte--link:hover{transform:translateY(-2px);box-shadow:var(--schatten-hoch);color:var(--tinte)}
.karte__titel{font:600 1.22rem/1.25 var(--titel)}
.ratgeber-karte .karte__bild{aspect-ratio:auto;display:block}
.ratgeber-karte .karte__bild img{width:100%;height:auto;aspect-ratio:16/10;object-fit:contain;padding:4% 0}
.lesezeit{display:inline-flex;gap:6px;align-items:center;margin-top:auto}
.artikel .stand{display:block}
.beispiel{margin:1.4em 0 1.8em}
.beispiel .regal{max-width:560px}
.beispiel figcaption{font-size:.94rem;color:var(--tinte-2);max-width:60ch}
.kacheln--artikel{margin:0 0 1.4em}
.artikel-cta{margin:1.6em 0}
.hinweis--achtung{border-left-color:var(--a)}
.hinweis--achtung .i{color:var(--a-text)}
.artikel .hinweis{margin:0 0 1.4em}
.artikel .hinweis ul{margin:0}
.artikel .fragen{margin-bottom:1em}

/* Lexikon, Seiten */
.zeile{display:flex;flex-wrap:wrap;gap:6px}
.buehne__bild .karte__bild{max-width:440px;margin-inline:auto;box-shadow:var(--schatten)}
.buehne__bild>.klein{margin-top:30px}
.zentriert-bild{width:180px;margin:0 auto 8px}
.zentriert-reihe{justify-content:center}
.fuss__partner{margin:26px 0 0;max-width:72ch}
.fuss .logo{margin-bottom:10px}
p.kauf{padding:0;margin:0 0 1em}

.raster>*,.kacheln>*,.wahl>*,.dinge>*{min-width:0}

/* Kopf auf schmalen Geräten */
.nur-schmal{display:none}
@media (max-width:480px){
  .kopf .huelle{width:calc(100% - 2*max(14px,var(--sicher-links),var(--sicher-rechts)))}
  .kopf__innen{gap:10px}
  .logo{gap:8px}.logo__bild{width:32px;height:32px}.logo__wort{font-size:1.02rem}
  .kopf__knopf{padding:0 14px}
  .nur-breit{display:none}.nur-schmal{display:inline}
}
@media (max-width:640px){
  .buehne .knopfreihe .knopf{flex:1 1 100%}
}
@media (min-width:960px){.kacheln--bereiche{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Fuß dunkel (Holz) */
.fuss{background:#2B2621;color:#EFE6D8;margin-top:0}
.fuss h2{color:#E3C285}
.fuss a{color:#FAF6EF}
.fuss a:hover{color:#fff}
.fuss .klein,.fuss__partner{color:#CDBFAA}
.fuss .logo{color:#FAF6EF}.fuss .logo__wort span{color:#E3C285}
.fuss__unten{border-top-color:rgba(255,255,255,.16);color:#CDBFAA}
.fuss :focus-visible{outline-color:#E3C285}
.fuss__alter ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
main>:last-child:not(.abschnitt){margin-bottom:clamp(48px,6vw,88px)}

/* Tauschen-Dialog: Bild links, Text + Knopf rechts */
.dialog:focus{outline:none}
.dialog{max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px)}
.alternative{display:grid;grid-template-columns:76px minmax(0,1fr);gap:6px 12px;align-items:start;padding:12px}
.alternative img{grid-row:span 2;width:76px;height:76px}
.alternative .n .klein{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-top:2px}
.alternative .knopf{justify-self:start}
/* Fragen */
.genau:empty{display:none}
.zaehler button:disabled{opacity:.35;cursor:not-allowed}
.lade{min-height:calc(100vh - 69px);min-height:calc(100dvh - 69px);align-content:center}
.begleiter-ort{margin-top:16px;margin-bottom:0}
.artikel blockquote{margin:0 0 1.4em;padding:16px 20px;background:var(--karte);border-left:4px solid var(--holz-d);border-radius:0 14px 14px 0;font-style:italic;color:var(--tinte)}
.artikel blockquote p{margin:0}

.regal__fach--rest{box-shadow:inset 0 14px 16px -12px rgba(59,47,35,.22)}
@media (max-width:959px){.buehne--bild-zuerst .buehne__bild{order:-1}.buehne--bild-zuerst .karte__bild{max-width:300px}}
.anzeige-marke{display:inline-block;font:700 .75rem/1 var(--text);letter-spacing:.04em;text-transform:uppercase;color:var(--tinte-2);border:1px solid var(--rand);border-radius:6px;padding:3px 6px;margin-right:6px;vertical-align:.1em}
.kauf--lexikon{display:block;margin:1.2em 0}
.kauf--lexikon a{display:inline-flex;min-height:44px;align-items:center;gap:6px;font-weight:700}
.kauf--lexikon .klein{display:block;margin-top:2px}
/* Große Schrift / schmale Geräte: umbrechen statt überlaufen */
.kopf__innen{flex-wrap:wrap;row-gap:6px;padding-block:8px}
.liste-kauf li{flex-wrap:wrap}
.liste-kauf .n{flex:1 1 140px}
.kennzahlen,.set-wahl,.zeile{min-width:0}
/* Raster wachsen mit der Schrift (rem statt px) – bei 200 % Schrift wird es einspaltig statt zu überlaufen */
.kacheln{grid-template-columns:repeat(auto-fill,minmax(min(100%,9.5rem),1fr))}
@media (min-width:640px){.kacheln{grid-template-columns:repeat(auto-fill,minmax(min(100%,11rem),1fr))}}
.wahl{grid-template-columns:repeat(auto-fill,minmax(min(100%,9.5rem),1fr))}
@media (min-width:960px){.wahl--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.wahl--breit{grid-template-columns:repeat(auto-fill,minmax(min(100%,14rem),1fr))}
.kachel__name,.wahl__titel,.alter strong{-webkit-hyphens:auto;hyphens:auto}
.knopf{overflow-wrap:anywhere}
/* Plan: Bühne wie auf der Startseite (Desktop: links Kopf, rechts Regal) */
.plan-buehne{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"kopf" "regal" "jetzt" "steuer"}
.plan-kopf{grid-area:kopf}.plan-regal{grid-area:regal}.plan-jetzt{grid-area:jetzt}.plan-steuer{grid-area:steuer}
.plan-jetzt .status{margin-top:4px}
/* Tauschtag oder Zeit fürs neue Regal: auf dem Handy steht der Hinweis über dem Regal */
.plan-buehne--wichtig{grid-template-areas:"kopf" "jetzt" "regal" "steuer"}
.plan-buehne--wichtig .plan-jetzt{margin-bottom:8px}
@media (min-width:1000px){
  .plan-buehne,.plan-buehne--wichtig{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);grid-template-rows:auto auto 1fr;grid-template-areas:"kopf regal" "jetzt regal" "steuer regal";column-gap:56px;align-items:start;padding-top:12px}
  .plan-buehne--wichtig .plan-jetzt{margin-bottom:0}
  .plan-buehne .plan-regal{margin:28px 0 0;max-width:none}
  .plan-buehne .aktionen{flex-wrap:wrap;overflow:visible}
}
.kiste__dinge{grid-template-columns:repeat(auto-fill,minmax(min(100%,5.25rem),1fr))}
.kiste__dinge figcaption{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:normal;font-size:.8125rem}
@media (min-width:900px){.kalender{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}}
.kalender+p{margin-top:16px}
.geburt label{display:block;font-weight:700;margin-top:10px}
.geburt input[type="text"]{max-width:260px}
/* Silbentrennung nur in längeren Wörtern (kein „Kis-te“) */
.eigen-bild span,.kachel__name,.wahl__titel,.alter strong,.kiste__dinge figcaption{hyphenate-limit-chars:7 3 3;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3}
/* Lexikon-Filter */
.filter{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin:28px 0 8px;padding:16px;background:var(--karte);border-radius:20px;box-shadow:var(--schatten)}
.filter[hidden],.filter__leer[hidden],.gruppe[hidden],.kachel[hidden],[data-sprung][hidden]{display:none}
/* Mit JavaScript steht das Filter sofort da (Kopf-Skript setzt data-js) – sonst schob es die Liste nachträglich nach unten (E32) */
html[data-js] .filter[data-filter][hidden]{display:flex}
.filter__suche{position:relative;flex:1 1 100%}
.filter__suche .i{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:1.25rem;height:1.25rem;color:var(--tinte-2);pointer-events:none}
.filter__suche input{width:100%;min-height:52px;padding:12px 16px 12px 48px;border:2px solid var(--rand);border-radius:14px;background:var(--papier);font:inherit;color:var(--tinte);-webkit-appearance:none;appearance:none}
.filter__suche input:focus-visible{outline:3px solid var(--wald);outline-offset:2px;border-color:var(--tinte)}
.filter__suche input::-webkit-search-cancel-button{cursor:pointer}
.filter__alter{display:flex;flex-wrap:wrap;gap:8px;border:0;margin:0;padding:0;min-width:0}
.chip{position:relative;display:inline-flex;cursor:pointer}
.chip input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.chip span{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 16px;border-radius:999px;border:2px solid var(--rand);background:var(--karte);font-weight:700;font-size:.9375rem;color:var(--tinte);transition:background .16s ease,color .16s ease,border-color .16s ease}
.chip span .i{width:1.1em;height:1.1em}
.chip input:checked+span{background:var(--tinte);border-color:var(--tinte);color:#fff}
.chip input:focus-visible+span{outline:3px solid var(--wald);outline-offset:2px}
.chip:hover input:not(:checked)+span{border-color:var(--tinte)}
.filter__zahl{margin:0 0 0 auto;font-weight:700;color:var(--tinte-2)}
.filter__leer{margin-top:24px}
@media (max-width:639px){
  .filter{padding:14px;margin-inline:-6px}
  .filter__alter{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-14px;padding-inline:14px;scroll-padding-inline:14px;-webkit-overflow-scrolling:touch}
  .filter__alter::-webkit-scrollbar{display:none}
  .chip span{white-space:nowrap}
  .filter__zahl{margin-left:0;flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){.chip span{transition:none}}
/* Wunschliste */
.wunsch-teilen{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin-top:24px;padding:18px 20px;background:var(--karte);border:1px solid var(--linie);border-radius:16px}
.wunsch-teilen h3{display:flex;align-items:center;gap:8px;margin:0 0 4px}
.wunsch-teilen h3 .i{color:var(--a-text)}
.wunsch-teilen>div{flex:1 1 260px}
.wunsch-teilen p{margin:0}
.wunschliste{padding-block:28px 0}
.wunsch-kopf{max-width:46rem;margin-bottom:24px}
.wunsch-kopf .zeile{margin-top:16px}
.wunschliste>.hinweis{margin-bottom:8px}
.wunschliste h2{margin-top:36px}
.wunsch__aktion{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:12px}
.wunsch-cta{margin-top:48px;border-radius:24px}
.wunsch-lade{min-height:60vh}
/* Wunsch-Karten kompakt: Bild links, Text rechts (22 Wünsche bleiben überschaubar) */
.ding.kompakt{flex-direction:row;align-items:stretch}
.ding.kompakt .ding__bild{aspect-ratio:auto;flex:0 0 104px;align-self:stretch;min-height:104px}
.ding.kompakt .ding__bild img{width:88%;height:auto;max-height:none}
.ding.kompakt .ding__text{padding:14px 14px 12px;gap:6px;min-width:0}
.ding.kompakt .ding__text h3{font-size:1.0625rem;line-height:1.3}
.ding.kompakt .ding__text>p:not(.wunsch__aktion){font-size:.9375rem;line-height:1.5}
.ding.kompakt .marke{min-height:24px;font-size:.75rem;padding:2px 8px}
.ding.kompakt .wunsch__aktion{margin-top:4px;gap:4px 14px}
.ding.kompakt .wunsch__aktion .knopf{min-height:44px}
@media (min-width:760px){.ding.kompakt .ding__bild{flex-basis:150px}.ding.kompakt .ding__text{padding:18px 18px 14px}}
@media (min-width:1100px){.wunschliste .dinge{grid-template-columns:repeat(2,1fr)}}
.kauf-link{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.kauf-link .knopf{white-space:nowrap;overflow-wrap:normal}
.kauf-link .anzeige-marke{margin-right:0}
/* Geschwister: Umschalter zwischen Plänen */
.kinder{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.kinder__k{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:6px 14px;border-radius:999px;border:2px solid var(--rand);background:var(--karte);font:700 .9375rem/1.2 var(--text);color:var(--tinte);text-decoration:none;cursor:pointer}
.kinder__k .i{width:1.1em;height:1.1em}
.kinder__k--aktiv{background:var(--tinte);border-color:var(--tinte);color:#fff;cursor:default}
button.kinder__k:hover,a.kinder__k:hover{border-color:var(--tinte)}
.kinder__plus{padding:6px 12px}
.gespeichert .kinder{margin-top:8px}
.begleiter__weitere{margin-top:6px;font-size:.9375rem;color:var(--tinte-2)}
.begleiter__weitere a{font-weight:700}
main:focus{outline:none}
/* Tauschtag-Assistent */
.status>div{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.status>div p{margin:0}
.tauschtag{display:flex;flex-direction:column;gap:18px}
.tauschtag>.klein{margin:0}
.tt-schritt h3{display:flex;align-items:center;gap:10px;font-size:1.125rem;margin:0 0 10px}
.tt-nr{display:inline-grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border-radius:50%;background:var(--sand);color:var(--tinte);font:700 1rem/1 var(--titel)}
.tt-nr .i{width:18px;height:18px}
.abhaken{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.abhaken__z>label,.abhaken__z--fest{display:flex;align-items:center;gap:12px;min-height:60px;padding:8px 12px;background:var(--karte);border:1px solid var(--linie);border-radius:14px;cursor:pointer}
.abhaken__z--fest{cursor:default;background:var(--sand)}
.abhaken__z img{width:48px;height:48px;flex:0 0 48px;border-radius:10px;background:linear-gradient(#F7EFE2,#EFE2CD)}
.abhaken__t{display:flex;flex-direction:column;flex:1;min-width:0}
.abhaken__z input{appearance:none;-webkit-appearance:none;flex:0 0 28px;width:28px;height:28px;margin:0;border:2px solid var(--rand);border-radius:8px;background:var(--karte);display:grid;place-items:center;cursor:pointer}
.abhaken__z input:checked{background:var(--wald-d);border-color:var(--wald-d)}
.abhaken__z input:checked::after{content:"";width:8px;height:14px;border:solid #fff;border-width:0 3px 3px 0;transform:translateY(-2px) rotate(45deg)}
.abhaken__z input:focus-visible{outline:3px solid var(--wald);outline-offset:2px}
.abhaken__z label:has(input:checked){background:var(--wald-h);border-color:transparent}
.abhaken__z label:has(input:checked) strong{text-decoration:line-through;text-decoration-thickness:2px;color:var(--tinte-2)}
.abhaken__z--fest .marke{margin-left:auto}
.tt-fertig{margin:4px 0 0}
@media (prefers-reduced-motion:no-preference){.abhaken__z>label{transition:background .16s ease}}
.tt-nr.kb{background:var(--kf);color:var(--tinte)}
.tt-schritt.kiste--a,.tt-schritt.kiste--b,.tt-schritt.kiste--c,.tt-schritt.kiste--d{border-left:4px solid var(--kf);padding-left:12px}
.abhaken__bleibt{display:inline-flex;align-items:center;gap:4px;font-weight:700;color:var(--wald-d)}
.abhaken__bleibt .i{width:1em;height:1em}
.abhaken__z--fest img{opacity:.9}
/* Einkaufsliste abhaken (E30): Kästchen wie im Tauschtag-Assistenten (28 px, Tippfläche 44 × 44). Abgehakte Zeile grün hinterlegt,
   Name durchgestrichen, statt „Anzeige · Amazon“ der Ort – gleich hoch, damit die Zeile darunter nicht unter den Finger rutscht */
.einkauf-tipp{display:flex;align-items:center;gap:8px;margin:0 0 4px;color:var(--tinte-2)}
.einkauf-tipp .i{flex:none;width:1.15em;height:1.15em;color:var(--wald-d)}
.liste-kauf .haken{flex:0 0 44px;width:44px;height:44px;margin:0 -4px 0 -2px;padding:0;border:0;border-radius:12px;background:none;display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.haken__box{width:28px;height:28px;border:2px solid var(--rand);border-radius:8px;background:var(--karte);display:grid;place-items:center}
.haken[aria-checked="true"] .haken__box{background:var(--wald-d);border-color:var(--wald-d)}
.haken[aria-checked="true"] .haken__box::after{content:"";width:8px;height:14px;border:solid #fff;border-width:0 3px 3px 0;transform:translateY(-2px) rotate(45deg)}
.haken:focus-visible{outline:3px solid var(--wald);outline-offset:-2px}
.liste-kauf li.abgehakt{background:var(--wald-h);box-shadow:none}
.liste-kauf li.abgehakt strong{text-decoration:line-through;text-decoration-thickness:2px;color:var(--tinte-2)}
.liste-kauf li.abgehakt img{opacity:.55}
.kauf-ort{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:700;font-size:.94rem;color:var(--wald-d);white-space:nowrap}
.kauf-ort .i{flex:none;width:1.15em;height:1.15em}
.app-hinweis p .i{width:1.15em;height:1.15em;vertical-align:-.2em;margin:0 2px;color:var(--wald-d)}
.app-hinweis>div{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.lexplan{margin:4px 0 8px}
.lexplan[hidden]{display:none}
.lexplan .dach{margin:0 0 2px}
.lexplan p{margin:0}
.lexplan .knopfreihe{margin-top:8px;align-items:center}
/* Kleinste iPhones (320–359 px): Kopf einzeilig, Dialog luftiger, keine Buchstabenbrüche */
@media (max-width:359px){
  .kopf__knopf .nur-schmal{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .kopf__knopf{padding:0 12px;min-width:44px;justify-content:center}
  .kopf__knopf .i{margin:0}
  .dialog__innen{padding:18px 14px}
  .abhaken__z img{display:none}
  .tt-schritt.kiste--a,.tt-schritt.kiste--b,.tt-schritt.kiste--c,.tt-schritt.kiste--d{padding-left:8px}
}
.abhaken__t strong{-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:7 3 3}
/* Startseite: Was der Planer kann */
.koennen{list-style:none;margin:28px 0 8px;padding:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr))}
.koennen li{background:var(--karte);border-radius:20px;box-shadow:var(--schatten);padding:20px 20px 18px;display:flex;flex-direction:column;gap:6px}
.koennen li>.i{width:28px;height:28px;color:var(--wald-d);margin-bottom:4px}
.koennen h3{font-size:1.125rem;margin:0}
.koennen p{margin:0;color:var(--tinte-2);font-size:.9688rem;line-height:1.55}
@media (min-width:1000px){.koennen{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:639px){.koennen{grid-template-columns:repeat(auto-fill,minmax(min(100%,9.5rem),1fr));gap:10px}.koennen li{padding:16px 14px 14px}.koennen p{font-size:.9063rem}.koennen h3{-webkit-hyphens:auto;hyphens:auto}}
.koennen li+li{margin-top:0}
.koennen+.knopfreihe{margin-top:32px}
.abhaken li+li{margin-top:0}
.selber__achtung{display:flex;gap:6px;align-items:flex-start;color:var(--a-text)}
.selber__achtung .i{flex:0 0 auto;margin-top:.15em}
.dinge.selber{margin-bottom:40px}
.abschnitt--eng>.hinweis+h2{margin-top:36px}
@media (min-width:375px){.tabelle:not(.tabelle--breit) :is(td,th):first-child{white-space:nowrap}}
/* Set-Wechsel: Dinge kommen aus der Kiste (von unten), Lieblingsstücke bleiben stehen */
.regal--fuellen.regal--tausch .regal__fach>img{animation-name:ausDerKiste;animation-duration:.5s}
.regal--fuellen .regal__fach--fest>img{animation:none}
@keyframes ausDerKiste{from{opacity:0;transform:translateY(30px) scale(.9)}55%{opacity:1}to{opacity:1;transform:none}}
/* Regal-Leiste oben auf der Startseite: Spielsachen auf einem Holzbrett (rein dekorativ, Mitte der Reihe steht in der Mitte) */
.regalleiste{position:relative;overflow:hidden;height:80px;margin-top:2px}
.regalleiste__reihe{position:absolute;left:50%;bottom:12px;width:max-content;transform:translateX(-50%);display:flex;gap:12px;align-items:flex-end}
.regalleiste__reihe img{width:66px;height:66px;flex:0 0 auto;margin-bottom:-9px;filter:drop-shadow(0 5px 4px rgba(59,47,35,.16))}
.regalleiste::after{content:"";position:absolute;left:0;right:0;bottom:0;height:12px;background:linear-gradient(#EDD0A4 0,#E0B985 70%,#C9995F 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 8px 12px -8px rgba(59,47,35,.55)}
@media (min-width:960px){.regalleiste{height:98px}.regalleiste__reihe{gap:30px}.regalleiste__reihe img{width:82px;height:82px;margin-bottom:-11px}}
/* Plan am Handy: Sets in einer Reihe, Aktionen als ruhiges Raster statt abgeschnittener Scroll-Reihe, Überschriften ausgeglichen */
h1,h2,h3{text-wrap:balance}
@media (max-width:639px){
  .set-wahl{display:grid;grid-auto-flow:column;grid-template-columns:1.55fr;grid-auto-columns:1fr;gap:6px;flex-wrap:nowrap}
  .set-wahl button{justify-content:center;gap:6px;padding:0 8px;white-space:nowrap}
  .set-wort,.aktion-lang{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .aktionen{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;overflow:visible;padding-top:14px}
  .aktionen .knopf{grid-column:span 2;flex-direction:column;justify-content:center;gap:4px;min-height:62px;padding:8px 4px;font-size:.8125rem;line-height:1.15;text-align:center;white-space:normal}
  .aktionen .knopf:nth-child(n+4){grid-column:span 3;flex-direction:row;min-height:48px;gap:8px}
}
@media (max-width:359px){.set-jetzt{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
.dach{text-wrap:balance}
/* Lexikon-Kacheln: Silbentrennung nur bei langen Wörtern und mit mindestens 4 Buchstaben je Teil („Objektpermanenz-“ statt „Objektperma-“) */
.kachel__name{hyphenate-limit-chars:10 4 4;text-wrap:balance}
/* Marken als Links (z. B. Altersstufen) ohne Unterstrich – die Pillenform zeigt schon, dass man tippen kann */
a.marke{text-decoration:none}
a.marke:hover{text-decoration:underline}
/* Planer-Karten: nur sinnvolle Trennstellen („Glocken-spiel“ statt „Glo-ckenspiel“), ausgeglichene Zeilen */
.wahl__titel{hyphenate-limit-chars:10 4 4;text-wrap:balance}
/* Ältere iPhones (iOS < 15.4) kennen :has() nicht – dort zeigt ein Rahmen ums Bild und eine Unterstreichung, was gewählt ist */
@supports not selector(:has(*)){
  .wahl__kachel input:checked~img{outline:3px solid var(--tinte);outline-offset:2px;border-radius:14px}
  .wahl__kachel input:checked~.wahl__titel{text-decoration:underline 3px var(--wald);text-underline-offset:5px}
  .abhaken__z input:checked~.abhaken__t strong{text-decoration:line-through}
}

/* Zeilenlänge am Bildschirm (Menschentest E24, R3): Fließtext höchstens rund 76 Zeichen je Zeile – auch auf dem iPad quer und am Mac.
   Textseiten (Ratgeber, Rechtliches) als ruhige Lesespalte in der Mitte, Brotkrumen auf derselben Achse; Hinweis-Kästen so breit wie
   ihr Text; die Einkaufsliste ab 900 px zweispaltig statt Zeilen über die ganze Breite. Papier bleibt, wie es ist (Druckblock unten). */
@media screen{
  :is(main,.fuss) p:not(.knopfreihe){max-width:38em}
  :is(main,.fuss) p:is(.klein,.stand,.anzeige){max-width:44em}   /* Kleingedrucktes: bis 88 Zeichen, füllt die Lesespalte */
  .zentriert p,p.zentriert,.zentriert .hinweis{margin-inline:auto}
  .hinweis{max-width:42.5em}
  .artikel{max-width:38em;margin-inline:auto}
  .pfad.pfad--artikel{width:min(100% - 2*var(--seitenrand),40.375rem)}   /* Klasse beim Bauen statt :has (E33) */
}
@media screen and (min-width:900px){.liste-kauf{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}}
.liste-kauf+h3{margin-top:32px}

/* Tablet hochkant (Menschentest E24, R5): drei Karten nebeneinander schon ab 760 px statt 2 + 1 einzelne; darunter steht die dritte
   Karte mittig statt allein links. „Warum weniger mehr ist“: Überschrift oben, die vier Absätze 2 × 2 statt Schachbrett mit leerer Ecke.
   Die drei Schritte zwischen 640 und 859 px als Zeile (Bild links, Text rechts) statt drei fast leerer Karten über die ganze Breite. */
@media (min-width:760px){.raster--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.raster--beispiele>.karte{display:flex;flex-direction:column}
.raster--beispiele>.karte>.textlink{margin-top:auto;padding-top:6px;align-self:flex-start}
@media (min-width:640px) and (max-width:759px){
  .raster--3:not(.raster--warum)>:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 12px)}
  .raster--warum>:first-child{grid-column:1/-1}
}
@media (min-width:640px) and (max-width:859px){
  .schritte li{display:grid;grid-template-columns:150px minmax(0,1fr);grid-template-rows:1fr auto auto 1fr;column-gap:24px;padding:16px 24px 16px 16px}
  .schritte img{grid-row:1/-1;grid-column:1;width:100%;margin:0;align-self:center}
  .schritte h3{grid-row:2;grid-column:2;margin:0 0 4px}
  .schritte p{grid-row:3;grid-column:2;margin:0}
}

/* Symbole in Knöpfen haben die Schriftfarbe des Knopfs – auch in Hinweis-Kästen (dort waren sie braun auf dunklem Grund) */
.hinweis .knopf .i{color:currentColor}

/* App vom Home-Bildschirm: Plan mitnehmen (Menschentest E23) */
.app-schritte{margin:2px 0 4px;padding-left:1.35em;display:grid;gap:8px}
.app-schritte li{padding-left:2px}
.app-schritte li::marker{font-weight:700;color:var(--wald-d)}
.app-schritte .i{width:1.15em;height:1.15em;vertical-align:-.2em;margin:0 2px;color:var(--wald-d)}
.app-schritte .knopf .i{color:currentColor;margin:0}
.app-umzug{margin-top:6px}
.app-umzug .hinweis>div{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
.app-umzug p{margin:0}
.umzug-feld{display:grid;gap:6px;margin-top:4px}
.umzug-feld[hidden]{display:none}
.umzug-feld label{font-weight:700;font-size:.9375rem}
.umzug-zeile{display:flex;gap:8px;align-items:stretch}
.umzug-zeile input{flex:1;min-width:0;min-height:48px;border:2px solid var(--rand);background:var(--karte);border-radius:14px;padding:10px 12px;font:inherit;font-size:16px;color:var(--tinte)}
.umzug-zeile input:focus{border-color:var(--tinte);outline:none;box-shadow:0 0 0 3px rgba(62,107,82,.35)}
.umzug-zeile .knopf{flex:none}

/* Druck (am Ende der Datei, damit nichts Späteres es überschreibt): Strg+P, „Teilen → Drucken“ (Menschentest E22). Auf Papier: keine Bedienung, keine Werbelinks,
   Karten zu zweit nebeneinander, Zugeklapptes aufgeklappt, Überschriften nie allein unten auf der Seite. */
/* Zahlenspanne nicht trennen: sonst „0–“ am Zeilenende und „3 Monaten“ darunter (Bildprobe T4) */
.nw{white-space:nowrap}
/* iPhone quer (E26): wenig Höhe – die Kopfleiste scrollt mit, der Planer-Kopf klebt ganz oben, die Weiter-Leiste wird schmaler */
@media (orientation:landscape) and (max-height:500px){
  .kopf{position:relative}
  .planer__kopf{top:0}
  .leiste{padding-top:8px;padding-bottom:calc(8px + var(--sicher-unten))}
  html{scroll-padding-top:64px}
  /* Überschriften nach der Höhe, nicht nach der Breite: sonst füllt ein dreizeiliger Titel den ganzen ersten Bildschirm (Bildprüfung E26) */
  h1{font-size:2.1rem}
  h2{font-size:1.65rem}
  /* Meldungen unten statt mitten im Bild – über der Weiter-Leiste nur, wenn es eine gibt */
  .toast{bottom:calc(14px + var(--sicher-unten))}
  body:has(.leiste) .toast{bottom:calc(74px + var(--sicher-unten))}
}
@media print{
  .kopf,.fuss,.leiste,.aktionen,.ding__fuss,.planer__kopf,.toast,.nicht-drucken,.sprung,nav,button,.knopf,.set-wahl,
  a[rel~="sponsored"],.anzeige-marke{display:none!important}
  body{background:#fff;font-size:11pt}
  .ding,.kiste,.karte,.kachel{box-shadow:none;border:1px solid #ddd;break-inside:avoid}
  .drucken-nur{display:block}
  /* Spielzeug-Karten als Katalogzeile: Bild links (4 cm), Text rechts – kompakte Karten (Wunschliste) zu zweit */
  .dinge{grid-template-columns:1fr;gap:3mm}
  .dinge:has(>.kompakt){grid-template-columns:repeat(2,1fr)}
  .ding{flex-direction:row;align-items:stretch}
  .ding__bild{aspect-ratio:auto;flex:0 0 40mm;padding:9mm 0}
  .ding__bild img{height:auto;width:78%}
  .ding__nr{left:6px;top:6px}
  .ding__status{right:auto;top:auto;left:6px;bottom:6px}
  .ding__text{padding:3mm 4mm;gap:5px}
  .kacheln{grid-template-columns:repeat(5,1fr);gap:3mm}
  .kachel{padding:4px 4px 6px;gap:4px}
  .beispiel .regal{max-width:95mm}
  .liste-kauf{grid-template-columns:repeat(2,1fr);gap:2.5mm 5mm}
  .liste-kauf li{break-inside:avoid}
  .kalender{break-inside:avoid}
  figure,img,tr,li,.beispiel,.regal,.hinweis,h1,h2,h3,h4{break-inside:avoid}
  h1,h2,h3,h4,summary{break-after:avoid}
  h1+*,h2+*,h3+*,h4+*,h2+p+:not(h2,h3,h4),h3+p+:not(h2,h3,h4){break-before:avoid}   /* vor der nächsten Überschrift darf das Blatt enden – sonst blieb sie allein unten */
  .lead,h1+p,h2+p,h3+p,.fragen details{break-inside:avoid}
  p:empty{display:none}
  details::details-content{content-visibility:visible}
  summary::after{display:none}
  /* E22 erweitert (02.11.): Herkunft auf jedem Blatt (R9) – die Kopfleiste druckt nicht, die Browser-Kopfzeile ist abschaltbar */
  .quelle{font-size:9pt;line-height:1.3;color:var(--tinte-2);margin:0 0 4mm;letter-spacing:.02em;break-after:avoid}   /* nie allein: Textseiten aus „h2 + Absatz“ haben sonst nur hier einen erlaubten Umbruch → Seite 1 leer */
  /* Startseite, Bereich und Übersichten auf Papier: Bühne kleiner, Raster dichter, keine halbleeren Seiten */
  .regalleiste{display:none}
  .abschnitt{padding-block:4mm}
  .abschnitt--eng{padding-block:3mm}
  .dach{display:flex;width:fit-content;max-width:100%;break-after:avoid}   /* inline-flex kennt kein break-after: „NACH ALTER“ stand allein unten */
  .zentriert>.dach,.stapel.zentriert>.dach{margin-inline:auto}
  .buehne{padding-block:0 3mm;gap:5mm}
  .buehne__bild{width:72mm;max-width:100%;margin-inline:auto;margin-bottom:7mm}   /* Kisten-Überhang: Prozent bezögen sich auf die Blattbreite (30 mm Lücke) */
  .buehne__kiste{filter:none}
  .alter{grid-template-columns:repeat(6,minmax(0,1fr));gap:2.5mm}
  .alter a{box-shadow:none;border:1px solid #ddd;border-radius:10px;padding:3px 3px 6px;gap:4px;break-inside:avoid}
  .alter img{aspect-ratio:16/10}
  .alter strong{font-size:10pt;padding:0 3px}
  .alter a>span>span{font-size:8.5pt;padding:0 3px}
  .schritte{grid-template-columns:repeat(3,minmax(0,1fr));gap:4mm}
  .schritte li{display:block;box-shadow:none;border:1px solid #ddd;padding:3mm 3.5mm 4mm;break-inside:avoid}   /* Tablet-Zeile (E24) gilt nicht auf Papier */
  .schritte img{width:48%;margin:0 auto 2mm}
  .raster--3:not(.raster--warum){grid-template-columns:repeat(3,minmax(0,1fr));gap:4mm}
  .raster--3:not(.raster--warum)>:last-child:nth-child(odd){grid-column:auto;width:auto;justify-self:stretch}
  .kacheln--bereiche{grid-template-columns:repeat(4,minmax(0,1fr));break-inside:avoid}
  .kachel img{width:72%;margin-inline:auto}   /* quadratische Bilder machten jede Kachelreihe 5,5 cm hoch – Bereichsseite 3 Blatt für 19 Kacheln */
  .kacheln--bereiche .kachel img{width:60%}
  .raster--beispiele .regal{width:46mm;max-width:100%;margin-inline:auto}   /* sonst passt der Abschnitt nicht mehr auf Seite 2 und lässt sie halb leer */
  .koennen{grid-template-columns:repeat(3,minmax(0,1fr));gap:3mm}
  .koennen li{box-shadow:none;border:1px solid #ddd;padding:3mm;break-inside:avoid}
  .begleiter{box-shadow:none;border:1px solid #ddd;border-left:6px solid var(--kf,var(--wald))}
}