@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:400;font-display:swap;src:url('/schriften/atkinsonhyperlegible-400-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+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:400;font-display:swap;src:url('/schriften/atkinsonhyperlegible-400-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';font-style:normal;font-weight:700;font-display:swap;src:url('/schriften/atkinsonhyperlegible-700-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+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:700;font-display:swap;src:url('/schriften/atkinsonhyperlegible-700-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:'Fredoka';font-style:normal;font-weight:500;font-display:swap;src:url('/schriften/fredoka-500-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+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:500;font-display:swap;src:url('/schriften/fredoka-500-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:'Fredoka';font-style:normal;font-weight:600;font-display:swap;src:url('/schriften/fredoka-600-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+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:600;font-display:swap;src:url('/schriften/fredoka-600-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;}

/* Spielwiese — gemeinsamer Stil. Ruhiger Rahmen fuer Eltern, bunte Spiele fuer Kinder. */
:root{
  --ground:#FFF8EE; --surface:#FFFFFF; --surface-2:#FBEEDC; --ink:#2A2620; --muted:#6B6155; --line:#EADCC6;
  --accent:#D9573C; --accent-ink:#FFFFFF; --accent-soft:#FBE7E1;
  --a-ab2:#E9B949; --a-3-5:#5B9C63; --a-5-8:#3E6FB5;
  --a-ab2-soft:#FBF1D2; --a-3-5-soft:#DFF0E2; --a-5-8-soft:#DCE7F5;
  --shadow:0 1px 2px rgba(34,48,63,.06),0 8px 24px rgba(34,48,63,.08);
  --shadow-l:0 2px 4px rgba(34,48,63,.08),0 16px 40px rgba(34,48,63,.12);
  --display:'Fredoka','Nunito','Segoe UI',system-ui,sans-serif;
  --body:'Atkinson Hyperlegible','Segoe UI',system-ui,-apple-system,Arial,sans-serif;
  --radius:20px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#1A1712; --surface:#241F19; --surface-2:#2E2820; --ink:#F3EDE3; --muted:#B0A492; --line:#3B342A;
    --accent:#E97A5F; --accent-ink:#1A1410; --accent-soft:#33231D;
    --a-ab2:#EAC15E; --a-3-5:#6FB37A; --a-5-8:#6C93D0;
    --a-ab2-soft:#3A3220; --a-3-5-soft:#1F3426; --a-5-8-soft:#1F2C42;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
    --shadow-l:0 2px 4px rgba(0,0,0,.4),0 16px 40px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --ground:#1A1712; --surface:#241F19; --surface-2:#2E2820; --ink:#F3EDE3; --muted:#B0A492; --line:#3B342A;
  --accent:#E97A5F; --accent-ink:#1A1410; --accent-soft:#33231D;
  --a-ab2:#EAC15E; --a-3-5:#6FB37A; --a-5-8:#6C93D0;
  --a-ab2-soft:#3A3220; --a-3-5-soft:#1F3426; --a-5-8-soft:#1F2C42;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
  --shadow-l:0 2px 4px rgba(0,0,0,.4),0 16px 40px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:2px}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--a-5-8);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.1;margin:0;text-wrap:balance;letter-spacing:-.01em}
h1{font-size:clamp(32px,5.4vw,52px)}
h2{font-size:clamp(24px,3.4vw,34px)}
h3{font-size:clamp(19px,2.4vw,23px)}
p{margin:14px 0}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.schmal{max-width:720px;margin:0 auto;padding:0 20px}
.muted{color:var(--muted)}
.num{font-variant-numeric:tabular-nums}
.mt0{margin-top:0}

/* ---- Kopf ---- */
.kopf{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.kopf .in{max-width:1120px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:18px}
.marke{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;font-size:23px;color:var(--ink);text-decoration:none}
.marke .z{width:30px;height:30px;flex:0 0 30px}
.kopf nav{margin-left:auto;display:flex;gap:6px;align-items:center}
.kopf nav a{font-family:var(--display);font-weight:500;font-size:15.5px;color:var(--muted);text-decoration:none;padding:7px 13px;border-radius:999px}
.kopf nav a:hover{background:var(--surface-2);color:var(--ink)}
.kopf nav a[aria-current="page"]{background:var(--surface-2);color:var(--ink)}
.kopf nav a{white-space:nowrap}
@media(max-width:620px){.kopf .in{gap:8px;padding:10px 14px}.kopf nav{gap:2px}
  .kopf nav a{padding:6px 8px;font-size:13.5px}.marke{font-size:18px}.marke .z{width:26px;height:26px;flex:0 0 26px}}
@media(max-width:400px){.kopf nav a{padding:5px 6px;font-size:12.5px}.marke{font-size:16px}}

/* ---- Hero / Tueren ---- */
.hero{padding:44px 0 8px;text-align:center}
.hero h1{margin-bottom:6px}
.hero .lede{font-size:clamp(17px,2.2vw,21px);color:var(--muted);max-width:620px;margin:10px auto 0}
.tueren{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:30px 0 10px}
.tuer{border-radius:var(--radius);padding:22px 20px 18px;border:1px solid var(--line);text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:6px;min-height:172px;box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s;text-align:left}
.tuer:hover{transform:translateY(-4px);box-shadow:var(--shadow-l)}
.tuer .alt{font-family:var(--display);font-weight:600;font-size:clamp(28px,3.6vw,36px);line-height:1}
.tuer .nam{font-family:var(--display);font-weight:500;font-size:18px}
.tuer .cnt{font-size:14px;color:var(--muted)}
.tuer .bsp{margin-top:auto;font-size:13.5px;color:var(--muted);line-height:1.4}
.t-ab2{background:var(--a-ab2-soft)} .t-ab2 .alt{color:var(--a-ab2)}
.t-3-5{background:var(--a-3-5-soft)} .t-3-5 .alt{color:var(--a-3-5)}
.t-5-8{background:var(--a-5-8-soft)} .t-5-8 .alt{color:var(--a-5-8)}
@media(max-width:720px){.tueren{grid-template-columns:1fr;gap:12px}.tuer{min-height:0}}

/* ---- Versprechen ---- */
.versprechen{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;margin:26px 0;font-size:15px;font-weight:700}
.versprechen span{display:flex;align-items:center;gap:7px}
.versprechen span::before{content:"";width:16px;height:16px;flex:0 0 16px;border-radius:50%;background:var(--a-3-5);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
@media(max-width:560px){.versprechen{font-size:13.5px;gap:8px 14px;padding:14px}}

/* ---- Abschnitte ---- */
.abschnitt{margin:44px 0}
.a-kopf{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.a-kopf h2{font-size:clamp(21px,3vw,28px)}
.a-kopf .cnt{font-size:14px;color:var(--muted);font-weight:700;background:var(--surface-2);padding:3px 11px;border-radius:999px}
.a-kopf .mehr{margin-left:auto;font-size:15px;font-weight:700}

/* ---- Karten ---- */
.karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
@media(max-width:560px){.karten{grid-template-columns:1fr}}
.karte{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px;display:flex;gap:13px;align-items:flex-start;box-shadow:var(--shadow);text-decoration:none;color:var(--ink);transition:transform .14s,box-shadow .14s;position:relative}
.karte:hover{transform:translateY(-3px);box-shadow:var(--shadow-l)}
.karte .platte{flex:0 0 54px;width:54px;height:54px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:29px;line-height:1}
.p-ab2{background:var(--a-ab2-soft)} .p-3-5{background:var(--a-3-5-soft)} .p-5-8{background:var(--a-5-8-soft)}
.karte .tx{display:block;min-width:0}
.karte .t{display:block;font-family:var(--display);font-weight:600;font-size:17.5px;line-height:1.15}
.karte .s{display:block;font-size:13.5px;color:var(--muted);margin:3px 0 8px;line-height:1.35}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{font-size:11.5px;font-weight:700;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:2px 8px;color:var(--muted);white-space:nowrap}
.chip.neu{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.chip.a-ab2{background:var(--a-ab2-soft);color:var(--ink)} .chip.a-3-5{background:var(--a-3-5-soft);color:var(--ink)} .chip.a-5-8{background:var(--a-5-8-soft);color:var(--ink)}
.herz{position:absolute;top:8px;right:8px;border:0;background:transparent;cursor:pointer;font-size:19px;line-height:1;padding:4px;border-radius:8px;color:var(--muted);opacity:.55}
.herz:hover{opacity:1;background:var(--surface-2)}
.herz[aria-pressed="true"]{opacity:1;color:var(--accent)}

/* ---- Filterleiste ---- */
.filter{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin:20px 0 26px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:11px}
.f-reihe{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.f-reihe .lbl{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700;min-width:66px}
.pille{font-family:var(--display);font-weight:500;font-size:14.5px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);border-radius:999px;padding:6px 14px;cursor:pointer;transition:.12s}
.pille:hover{border-color:var(--accent)}
.pille[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.suche{position:relative;flex:1;min-width:190px}
.suche input{width:100%;border:1px solid var(--line);border-radius:999px;background:var(--surface-2);color:var(--ink);font:inherit;font-size:15.5px;padding:9px 14px 9px 38px}
.suche svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted)}
.leer{text-align:center;color:var(--muted);padding:44px 20px;font-size:18px}

/* ---- Spielseite ---- */
.spiel-kopf{display:grid;grid-template-columns:1.35fr .65fr;gap:26px;margin:26px 0 10px}
@media(max-width:800px){.spiel-kopf{grid-template-columns:1fr;gap:18px}}
.spiel-kopf .eyebrow{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:8px}
.spiel-kopf .meta{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 4px}
.tipp{background:var(--a-ab2-soft);border:1px solid var(--line);border-radius:16px;padding:15px 17px;margin-top:16px}
.tipp b{display:block;font-family:var(--display);font-weight:600;margin-bottom:4px;font-size:16px}
.tipp p{margin:0;font-size:15.5px}
.spielen{display:inline-flex;align-items:center;gap:10px;margin-top:18px;background:var(--accent);color:var(--accent-ink);font-family:var(--display);font-weight:600;font-size:21px;border:0;border-radius:999px;padding:14px 34px;text-decoration:none;cursor:pointer;box-shadow:var(--shadow)}
.spielen:hover{filter:brightness(1.06)}
.spielen:active{transform:translateY(2px)}
.seiten-box{background:var(--surface-2);border:1px solid var(--line);border-radius:18px;padding:16px 18px;align-self:start}
.seiten-box h3{font-size:16.5px;margin:0 0 10px}
.seiten-box .zeile{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--ink);font-size:15px;padding:5px 0}
.seiten-box .zeile:hover{color:var(--accent)}
.seiten-box .platte{flex:0 0 36px;width:36px;height:36px;border-radius:10px;font-size:19px;display:flex;align-items:center;justify-content:center}

/* ---- Spieler (Vollbild) ---- */
#spieler{position:fixed;inset:0;z-index:100;background:#000;display:none}
#spieler.an{display:block}
#rahmen{width:100%;height:100%;border:0;display:block}
#zurueck{position:fixed;top:calc(10px + env(safe-area-inset-top));left:10px;z-index:101;border:0;cursor:pointer;background:rgba(20,26,34,.9);color:#fff;font-family:var(--display);font-weight:600;font-size:17px;padding:10px 18px;border-radius:14px;box-shadow:0 6px 18px rgba(0,0,0,.5);backdrop-filter:blur(6px)}
#zurueck:active{transform:translateY(2px)}
#pause{position:fixed;inset:0;z-index:102;display:none;align-items:center;justify-content:center;background:rgba(18,24,31,.94);color:#fff;text-align:center;padding:24px}
#pause.an{display:flex}
#pause .k{max-width:420px}
#pause h2{font-size:30px;margin-bottom:10px;color:#fff}
#pause p{color:#C7D2DC;font-size:17px}
#pause .knoepfe{display:flex;gap:10px;justify-content:center;margin-top:20px;flex-wrap:wrap}
#pause button{font-family:var(--display);font-weight:600;font-size:17px;border:0;border-radius:999px;padding:12px 24px;cursor:pointer}
#pause .w{background:var(--accent);color:var(--accent-ink)}
#pause .n{background:rgba(255,255,255,.16);color:#fff}

/* ---- Text-Seiten ---- */
.textseite{padding:8px 0 20px}
.textseite h1{margin-bottom:6px}
.textseite h2{margin-top:34px;font-size:clamp(21px,2.8vw,27px)}
.textseite h3{margin-top:24px}
.textseite p,.textseite li{font-size:16.5px}
.textseite ul{padding-left:22px}
.textseite li{margin:7px 0}
.textseite li::marker{color:var(--accent)}
.textseite .stand{font-size:14px;color:var(--muted)}
.datenblock{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 20px;margin:18px 0;box-shadow:var(--shadow)}
.datenblock dl{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0;font-size:16px}
.datenblock dt{color:var(--muted)}
.datenblock dd{margin:0}
@media(max-width:560px){.datenblock dl{grid-template-columns:1fr;gap:2px 0}.datenblock dd{margin-bottom:8px}}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;font-family:var(--display);font-weight:600;font-size:18px;padding:12px 0;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";color:var(--accent);font-weight:700;margin-right:10px}
.faq details[open] summary::before{content:"–"}
.faq details p{margin-top:0;padding-bottom:6px}

/* ---- Fuss ---- */
.fuss{border-top:1px solid var(--line);margin-top:56px;background:var(--surface)}
.fuss .in{max-width:1120px;margin:0 auto;padding:28px 20px 40px;display:flex;flex-wrap:wrap;gap:20px 40px;font-size:15px}
.fuss .sp{display:flex;flex-direction:column;gap:7px}
.fuss .sp b{font-family:var(--display);font-weight:600;font-size:15.5px}
.fuss a{color:var(--muted);text-decoration:none}
.fuss a:hover{color:var(--accent)}
.fuss .rechts{margin-left:auto;color:var(--muted);font-size:14px;max-width:330px;line-height:1.5}
@media(max-width:640px){.fuss .rechts{margin-left:0}}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* ================================================================
   Farbe & Bilder — die Spielwiese soll nach Kinderwelt aussehen,
   ohne dass Texte fuer Eltern schlechter lesbar werden.
   ================================================================ */
:root{
  --i-himmel-oben:#BFE4F5; --i-himmel-unten:#EAF6FB; --i-wolke:#FFFFFF; --i-wolke-rand:#C7DCE8;
  --i-vogel:#7C8B99; --i-sonne:#F6C445; --i-sonne-gesicht:#B8801A;
  --i-huegel-fern:#C3E3BB; --i-huegel-nah:#93CC92; --i-gras:#6FBB71; --i-gras-dunkel:#4E9E58;
  --i-stamm:#9A6A45; --i-krone:#4FA05C; --i-apfel:#E0574A;
  --i-stiel:#4E9E58; --i-blatt:#63B268; --i-blumenmitte:#F6C445;
  --i-blume-a:#EE6E7E; --i-blume-b:#7E7BE0; --i-blume-c:#F3A03C;
  --i-falter-a:#F2884E; --i-falter-b:#F6C445; --i-falter-koerper:#5B4636;
  --i-strasse:#C6BFB4; --i-strasse-strich:#FFFFFF;
  --i-auto:#E0574A; --i-auto-fenster:#CFEAF6; --i-rad:#4A4A52; --i-rad-nabe:#D8D8DC;
  --i-ballon-a:#EE6E7E; --i-schnur:#8B94A0; --i-stift-spitze:#F0D6A8;
  --band-a:#FDECDC; --band-b:#E4F3E6; --band-c:#E5EEFA; --band-d:#F6E9FB;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --i-himmel-oben:#243A52; --i-himmel-unten:#33465C; --i-wolke:#43566B; --i-wolke-rand:#556A80;
    --i-vogel:#8C9AA8; --i-sonne:#E8C05A; --i-sonne-gesicht:#5A4413;
    --i-huegel-fern:#2F4A38; --i-huegel-nah:#3A5C43; --i-gras:#436A4B; --i-gras-dunkel:#31513A;
    --i-stamm:#6E4C31; --i-krone:#3C7A48; --i-apfel:#C04B41;
    --i-stiel:#3C7A48; --i-blatt:#428050; --i-blumenmitte:#E8C05A;
    --i-blume-a:#D2596A; --i-blume-b:#6E6BC4; --i-blume-c:#D48A34;
    --i-falter-a:#D2763F; --i-falter-b:#E8C05A; --i-falter-koerper:#C9BCA8;
    --i-strasse:#4A4740; --i-strasse-strich:#8E887C;
    --i-auto:#C04B41; --i-auto-fenster:#2E4A5A; --i-rad:#2A2A30; --i-rad-nabe:#6E6E76;
    --i-ballon-a:#D2596A; --i-schnur:#6E7684; --i-stift-spitze:#C4A87C;
    --band-a:#2C241B; --band-b:#1F2E23; --band-c:#1E2839; --band-d:#2B2033;
  }
}
:root[data-theme="dark"]{
  --i-himmel-oben:#243A52; --i-himmel-unten:#33465C; --i-wolke:#43566B; --i-wolke-rand:#556A80;
  --i-vogel:#8C9AA8; --i-sonne:#E8C05A; --i-sonne-gesicht:#5A4413;
  --i-huegel-fern:#2F4A38; --i-huegel-nah:#3A5C43; --i-gras:#436A4B; --i-gras-dunkel:#31513A;
  --i-stamm:#6E4C31; --i-krone:#3C7A48; --i-apfel:#C04B41;
  --i-stiel:#3C7A48; --i-blatt:#428050; --i-blumenmitte:#E8C05A;
  --i-blume-a:#D2596A; --i-blume-b:#6E6BC4; --i-blume-c:#D48A34;
  --i-falter-a:#D2763F; --i-falter-b:#E8C05A; --i-falter-koerper:#C9BCA8;
  --i-strasse:#4A4740; --i-strasse-strich:#8E887C;
  --i-auto:#C04B41; --i-auto-fenster:#2E4A5A; --i-rad:#2A2A30; --i-rad-nabe:#6E6E76;
  --i-ballon-a:#D2596A; --i-schnur:#6E7684; --i-stift-spitze:#C4A87C;
  --band-a:#2C241B; --band-b:#1F2E23; --band-c:#1E2839; --band-d:#2B2033;
}

/* ---- Bildszene im Kopfbereich ---- */
.hero{position:relative;padding:0;text-align:center;overflow:hidden;
  background:linear-gradient(180deg,var(--i-himmel-oben),var(--i-himmel-unten))}
.hero .hero-in{position:relative;z-index:2;padding:46px 20px 0}
.hero h1{margin-bottom:6px;color:var(--ink)}
.hero .lede{font-size:clamp(17px,2.2vw,21px);color:var(--ink);opacity:.82;max-width:640px;margin:10px auto 0}
.hero .szene{display:block;width:100%;height:auto;margin-top:-6px}
@media(max-width:720px){.hero .hero-in{padding:30px 16px 0}.hero .szene{min-height:120px}}

/* ---- Alters-Tueren mit kleinem Bild ---- */
.tueren-box{margin:-14px 0 0;position:relative;z-index:3}
.tuer{position:relative;overflow:hidden}
.tuer .tuerbild{position:absolute;right:8px;bottom:6px;width:118px;height:59px;opacity:.9;pointer-events:none}
.tuer .bsp{max-width:calc(100% - 108px)}
@media(max-width:720px){.tuer .tuerbild{width:96px;height:48px;opacity:.75}}

/* ---- Motiv neben Ueberschriften ---- */
.a-kopf{align-items:center}
.a-kopf .motiv{flex:0 0 auto;margin-right:-4px}
.a-kopf h2{display:inline}

/* ---- Farbige Baender fuer Abschnitte ---- */
.abschnitt.band{border-radius:26px;padding:22px 24px 26px;border:1px solid var(--line)}
.band-a{background:var(--band-a)} .band-b{background:var(--band-b)}
.band-c{background:var(--band-c)} .band-d{background:var(--band-d)}
.abschnitt.band .a-kopf{border-bottom-color:rgba(0,0,0,.08)}
@media(max-width:560px){.abschnitt.band{padding:16px 14px 20px;border-radius:20px}}

/* ---- Wiesenstreifen ueber dem Seitenfuss ---- */
.wiese{display:block;width:100%;height:auto;margin-bottom:-2px}
.fuss{position:relative}

/* ---- Druckbereich: Malbilder & Uebungsblaetter ---- */
.blaetter{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}
@media(max-width:560px){.blaetter{grid-template-columns:repeat(2,1fr);gap:11px}}
.blatt-karte{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:10px;
  text-decoration:none;color:var(--ink);box-shadow:var(--shadow);transition:transform .14s,box-shadow .14s;display:block}
.blatt-karte:hover{transform:translateY(-3px);box-shadow:var(--shadow-l)}
.blatt-karte .vor{display:block;width:100%;aspect-ratio:744/1052;background:#fff;border-radius:11px;
  border:1px solid var(--line);overflow:hidden}
.blatt-karte .vor img,.blatt-karte .vor object{width:100%;height:100%;object-fit:contain;display:block}
.blatt-karte .t{display:block;font-family:var(--display);font-weight:600;font-size:16px;margin:9px 2px 1px}
.blatt-karte .s{display:block;font-size:13px;color:var(--muted);margin:0 2px 4px;line-height:1.35}

.blatt-seite{display:grid;grid-template-columns:1fr 300px;gap:28px;margin:24px 0}
@media(max-width:820px){.blatt-seite{grid-template-columns:1fr}}
.blatt-bild{background:#fff;border:1px solid var(--line);border-radius:16px;padding:10px;box-shadow:var(--shadow)}
.blatt-bild img{width:100%;display:block}
.knopf-druck{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:var(--accent-ink);
  font-family:var(--display);font-weight:600;font-size:19px;border:0;border-radius:999px;padding:14px 26px;
  cursor:pointer;text-decoration:none;box-shadow:var(--shadow)}
.knopf-druck:hover{filter:brightness(1.06)}
.knopf-zweit{display:inline-flex;align-items:center;gap:8px;background:var(--surface-2);color:var(--ink);
  border:1px solid var(--line);border-radius:999px;padding:11px 20px;font-weight:700;font-size:15px;
  text-decoration:none;margin-top:10px}

/* ---- Druckansicht: nur das Blatt, sonst nichts ---- */
@media print{
  .kopf,.fuss,.wiese,.knopf-druck,.knopf-zweit,.brotkrumen,.hinweis-druck,.versprechen{display:none !important}
  body{background:#fff}
  .blatt-seite{display:block;margin:0}
  .blatt-bild{border:0;box-shadow:none;padding:0;border-radius:0}
  .blatt-bild img{width:100%;height:auto}
  @page{size:A4 portrait;margin:8mm}
}