/* Silberwolf Kids – Site CSS | self-host fonts only, no external assets */
@font-face{font-family:Fraunces;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/fraunces-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Fraunces;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/fraunces-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/source-sans-3-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/source-sans-3-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Fredoka;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/fredoka-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Nunito;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/nunito-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Nunito;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/nunito-latin-700-normal.woff2) format("woff2")}

:root{
  --tinte:#1a1a1a;--graphit:#3d3d3d;--nebel:#6e6a63;
  --papier:#f4efe6;--papier2:#efe8db;--papier3:#e8e0d0;--schnee:#fcfaf7;
  --rinde:#5c4a3a;--moos:#3f5c4b;--morgenrot:#c46b4a;--linie:#d9d2c5;
  --serif:Fraunces,Georgia,serif;--sans:"Source Sans 3",system-ui,sans-serif;
  --kid-display:Fredoka,system-ui,sans-serif;--kid-read:Nunito,system-ui,sans-serif;
  --max:1120px;--body:16px;--lh:1.5;
}
html{font-size:16px;scroll-behavior:smooth}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--sans);font-size:var(--body);line-height:var(--lh);color:var(--tinte);background:var(--papier)}
body.high-contrast{
  --tinte:#000;--graphit:#111;--nebel:#222;--papier:#fff;--papier2:#f2f2f2;--papier3:#e8e8e8;
  --schnee:#fff;--moos:#0a3d2a;--morgenrot:#8b2e12;--linie:#000;--rinde:#222
}
/* Kontrast-Modus: alle Landschafts-Hintergruende aus — maximale Lesbarkeit */
body.high-contrast.page-forest::before,
.high-contrast .zone-kids::before,
.high-contrast .page-ghost::before{display:none}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--moos);outline-offset:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:100;background:#000;color:#fff;padding:8px 12px}

/* Soft illustration: no hard photo boxes; works with Bg-white sketches and later transparency */
.sketch{isolation:isolate}
.sketch img{
  mix-blend-mode:multiply;
  mask-image:radial-gradient(ellipse 78% 72% at 50% 48%,#000 38%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 78% 72% at 50% 48%,#000 38%,transparent 78%);
}
.sketch-soft img{
  mix-blend-mode:multiply;
  mask-image:linear-gradient(180deg,#000 68%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 68%,transparent 100%);
}
/* Breite Panorama-Grafik: Verlauf endet sicher VOR dem Bildrand — kein Kanten-Abriss links/rechts */
.sketch-wide{isolation:isolate}
.sketch-wide img{
  mix-blend-mode:multiply;
  mask-image:radial-gradient(ellipse 64% 70% at 50% 48%,#000 36%,transparent 74%);
  -webkit-mask-image:radial-gradient(ellipse 64% 70% at 50% 48%,#000 36%,transparent 74%);
}
.ph{font-size:.875rem;color:var(--nebel);font-style:italic}
.ph-box{border:1px dashed var(--linie);border-radius:12px;padding:16px 18px;background:rgba(0,0,0,.02)}

/* Header */
.site-header{max-width:var(--max);margin:0 auto;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.wolf-mark{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;overflow:hidden;
  background:var(--schnee);border:1.5px solid var(--linie)
}
.wolf-mark img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
.wordmark{font-family:var(--serif);font-weight:600;font-size:1rem;letter-spacing:-.01em}
.wordmark small{display:block;font-family:var(--sans);font-weight:400;font-size:12px;color:var(--nebel)}
.header-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.contrast-btn{
  font:inherit;font-size:13px;cursor:pointer;background:var(--schnee);border:1px solid var(--linie);
  border-radius:999px;padding:8px 14px;min-height:40px;color:var(--graphit)
}
.nav-adult{display:flex;gap:12px 16px;flex-wrap:wrap;font-size:14px}
.nav-adult a{text-decoration:none;color:var(--graphit)}
.nav-adult a:hover{color:var(--moos)}
.nav-kids{display:flex;gap:10px 14px;flex-wrap:wrap;font-family:var(--kid-display);font-size:15px}
.nav-kids a{text-decoration:none;color:var(--morgenrot)}

/* Buttons / CTAs */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:48px;padding:12px 20px;border-radius:999px;text-decoration:none;
  font-weight:600;font-size:15px;border:1.5px solid transparent;cursor:pointer
}
.btn-kids{background:var(--morgenrot);color:#fff}
.btn-ghost-kids{background:transparent;color:var(--morgenrot);border-color:var(--morgenrot)}
.btn-adult{background:var(--moos);color:#fff}
.btn-ghost-adult{background:transparent;color:var(--moos);border-color:var(--moos)}

/* Footer */
.site-footer{
  max-width:var(--max);margin:0 auto;padding:24px;font-size:13px;color:var(--nebel);
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--linie)
}
.site-footer a{color:var(--nebel);text-decoration:underline;text-underline-offset:2px}

/* —— Hub index —— */
.zone-kids{position:relative;overflow:hidden;padding:4px 0 32px}
.zone-kids::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.4;z-index:0;
  background:
    linear-gradient(180deg,rgba(244,239,230,.55),rgba(244,239,230,.92)),
    url(../assets/images/LineArt_Landschaft_Bergblick.jpg) center top/cover no-repeat
}
.zone-kids>*{position:relative;z-index:1}
.hero-hub{
  max-width:var(--max);margin:0 auto;padding:16px 24px 12px;
  display:grid;grid-template-columns:1.05fr .95fr;gap:32px;align-items:center
}
.eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--morgenrot);font-weight:600;margin:0 0 10px}
.hero-hub h1{
  font-family:var(--kid-display);font-weight:500;margin:0 0 14px;color:var(--morgenrot);
  font-size:clamp(2.1rem,4.4vw,3rem);line-height:1.1;letter-spacing:-.01em
}
.lede{margin:0 0 20px;max-width:38ch;color:var(--graphit);font-size:clamp(1.05rem,2vw,1.2rem);line-height:1.4;font-family:var(--kid-read)}
.ctas-row{display:flex;flex-wrap:wrap;gap:12px}
.hero-bleed{max-width:520px;cursor:pointer}
.howl-btn{
  display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:12px 20px;
  border-radius:999px;border:2px solid var(--morgenrot);background:var(--schnee);
  color:var(--morgenrot);font-family:var(--kid-display);font-size:1.05rem;font-weight:500;cursor:pointer
}
.howl-btn:hover{background:rgba(196,107,74,.08)}
.howl-btn.playing{background:var(--morgenrot);color:#fff}
.howl-msg{font-family:var(--kid-read);color:var(--graphit);font-size:.95rem;line-height:1.5;max-width:46ch;margin:10px 0 0}
.howl-msg strong{font-family:var(--kid-display);font-weight:500;color:var(--morgenrot)}
.rudel-band{max-width:680px;margin:4px auto 0;padding:0 24px}
/* Blend-Fix: eigene Ebene (z-index) verhindert Multiply — Band und Peek zurueck auf auto */
.zone-kids .rudel-band{z-index:auto}
@keyframes wolf-bounce{
  0%{transform:none}30%{transform:translateY(-12px) rotate(-2deg)}
  60%{transform:translateY(0) rotate(1.5deg)}100%{transform:none}
}
.bounce{animation:wolf-bounce .7s ease}
@media (prefers-reduced-motion:reduce){.bounce{animation:none}}
.doors-wrap{max-width:var(--max);margin:0 auto;padding:4px 24px 8px}
.doors-label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--morgenrot);font-weight:600;margin:0 0 14px}
.doors{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.door{
  position:relative;background:var(--schnee);border:1px solid var(--linie);border-radius:20px;
  text-decoration:none;overflow:visible;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s
}
.door:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(26,26,26,.07)}
.door.kids{border:2px solid var(--morgenrot)}
.door.kids:focus-visible{outline-color:var(--morgenrot)}
.door.parents{border-top:3px solid var(--moos)}
.door-img{
  height:156px;padding:10px 16px 0;display:flex;align-items:flex-end;justify-content:center;
  background:linear-gradient(180deg,var(--papier2),var(--schnee));border-radius:17px 17px 0 0;overflow:visible
}
.door-img img{
  width:auto;max-width:82%;max-height:148px;object-fit:contain;object-position:center bottom;
  mix-blend-mode:multiply;transform:translateY(-12px);
  mask-image:linear-gradient(180deg,#000 72%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%)
}
.door-body{position:relative;z-index:2;padding:12px 20px 22px;background:var(--schnee);border-radius:0 0 20px 20px;display:flex;flex-direction:column;flex:1}
.chip{align-self:flex-start;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;padding:6px 10px;border-radius:999px;margin-bottom:10px}
.kids .chip{color:var(--morgenrot);background:rgba(196,107,74,.12);border:1px solid rgba(196,107,74,.25)}
.parents .chip{color:var(--moos);background:rgba(63,92,75,.1);border:1px solid rgba(63,92,75,.22)}
.door h2{font-family:var(--serif);font-size:1.35rem;margin:0 0 8px;line-height:1.2;letter-spacing:-.015em}
.door p{margin:0;color:var(--nebel);font-size:15px;line-height:1.5;flex:1}
.door .cta{margin-top:16px;font-weight:700;font-size:15px;display:inline-flex;align-items:center;gap:6px}
.kids .cta{color:var(--morgenrot)}.parents .cta{color:var(--moos)}

.transition{position:relative;height:88px;background:var(--papier);margin-top:-1px}
.transition svg{position:absolute;left:0;right:0;bottom:0;width:100%;height:88px;display:block}
.transition .peek{position:absolute;left:12%;bottom:16px;width:80px;z-index:2}
.transition .peek img{width:100%;mix-blend-mode:multiply;mask-image:radial-gradient(circle at 50% 60%,#000 50%,transparent 78%);-webkit-mask-image:radial-gradient(circle at 50% 60%,#000 50%,transparent 78%)}
.transition .peek{z-index:auto}

.zone-parents{background:var(--papier2);padding:48px 0 72px}
.parents-inner{max-width:var(--max);margin:0 auto;padding:0 24px}
.section-kicker{color:var(--moos);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin:0 0 10px}
.zone-parents h2,.page-adult h1{font-family:var(--serif);font-weight:600;font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.2;letter-spacing:-.015em;margin:0 0 12px}
.bodycopy{max-width:54ch;color:var(--graphit);margin:0 0 28px}
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:36px}
.trust article{background:var(--schnee);border:1px solid var(--linie);border-radius:12px;padding:20px}
.trust h3{font-family:var(--serif);font-size:1.05rem;margin:0 0 8px;color:var(--moos)}
.trust p{margin:0;font-size:14px;color:var(--nebel);line-height:1.5}
.books{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;margin-bottom:40px}
.book-card,.soon-card{background:var(--schnee);border:1px solid var(--linie);border-radius:16px;padding:24px}
.book-card h3,.soon-card h3{font-family:var(--serif);margin:0 0 8px;font-size:1.25rem}
.book-card p,.soon-card p{margin:0 0 14px;color:var(--nebel);font-size:15px}
.soon-card{border-style:dashed;opacity:.95}
.nl{
  position:relative;background:var(--schnee);border:1px solid var(--linie);border-radius:28px;
  padding:28px;max-width:640px;margin-bottom:28px
}
.nl h3{font-family:var(--serif);margin:0 0 8px;color:var(--moos);font-size:1.2rem}
.nl p{margin:0 0 14px;color:var(--graphit);font-size:15px}
.nl form{display:flex;flex-wrap:wrap;gap:10px}
.nl input{
  flex:1 1 200px;min-height:48px;border:1px solid var(--linie);border-radius:12px;
  padding:10px 14px;font:inherit;background:var(--papier)
}
.nl button{
  min-height:48px;border:0;border-radius:12px;padding:10px 18px;background:var(--moos);color:#fff;
  font:inherit;font-weight:600;cursor:pointer
}
.freebie{border:1px dashed var(--moos);border-radius:16px;padding:20px 24px;background:rgba(63,92,75,.04)}

/* —— Kids pages —— */
body.theme-kids{font-family:var(--kid-read)}
body.theme-kids .wordmark{font-family:var(--kid-display);color:var(--morgenrot);font-weight:500}
.kids-wrap{max-width:1000px;margin:0 auto;padding:0 20px 40px}
.kids-hero{text-align:center;position:relative;padding:8px 0 12px}
/* Ganzseitiger Wald (fixiert, scrollt mit bis zum Footer) — statt nur hinterm Hero */
body.page-forest::before{
  content:"";position:fixed;inset:0;opacity:.35;pointer-events:none;z-index:-1;
  background:linear-gradient(180deg,rgba(244,239,230,.5),rgba(244,239,230,.85)),
  url(../assets/images/LineArt_Landschaft_Eiche.jpg) center/cover no-repeat
}
.kids-hero>*{position:relative;z-index:1}
.kids-hero-img{width:min(180px,42vw);margin:0 auto 6px}
.kids-hero .kids-hero-img{z-index:auto} /* Blend-Fix wie beim Rudel-Band */
.kids-hero-img img{
  width:100%;mix-blend-mode:multiply;
  mask-image:radial-gradient(circle at 50% 45%,#000 42%,transparent 75%);
  -webkit-mask-image:radial-gradient(circle at 50% 45%,#000 42%,transparent 75%)
}
.kids-hero h1{
  font-family:var(--kid-display);font-weight:500;font-size:clamp(1.55rem,4.2vw,2.2rem);
  line-height:1.12;letter-spacing:-.01em;margin:0 0 6px;color:var(--morgenrot)
}
.kids-lede{
  font-family:var(--kid-display);font-weight:500;max-width:28ch;margin:0 auto 14px;
  color:var(--graphit);font-size:clamp(1rem,2.4vw,1.15rem);line-height:1.25
}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:4px}
.tile{
  background:var(--schnee);border:1px solid var(--linie);border-radius:24px;padding:14px 16px 18px;
  text-decoration:none;display:flex;flex-direction:column;min-height:200px;border-top:3px solid var(--morgenrot);
  overflow:visible;position:relative
}
.tile .art{height:72px;display:flex;align-items:flex-end;justify-content:center;margin:0 0 4px}
.tile .art img{
  width:86px;max-height:90px;object-fit:contain;transform:translateY(-10px);mix-blend-mode:multiply;
  mask-image:linear-gradient(180deg,#000 72%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%)
}
.tile .art-slot{
  width:72px;height:64px;border:1.5px dashed rgba(196,107,74,.35);border-radius:12px;
  display:grid;place-items:center;font-size:10px;color:var(--morgenrot);text-align:center;
  line-height:1.2;padding:6px;background:rgba(196,107,74,.05)
}
.tile h2{font-family:var(--kid-display);font-weight:500;font-size:1.3rem;margin:2px 0 6px;color:var(--tinte);line-height:1.15}
.tile p{margin:0;color:var(--nebel);font-size:15px;line-height:1.5;flex:1}
.tile .go{margin-top:12px;font-family:var(--kid-display);color:var(--morgenrot);font-size:1.05rem}

/* Adult content pages */
.page{max-width:var(--max);margin:0 auto;padding:24px 24px 64px}
.page h1{font-family:var(--serif);font-weight:600;font-size:clamp(1.7rem,3vw,2.35rem);line-height:1.15;letter-spacing:-.015em;margin:0 0 12px}
.page h2{font-family:var(--serif);font-weight:600;font-size:1.35rem;margin:28px 0 10px;letter-spacing:-.01em}
.page h3{font-family:var(--serif);font-size:1.1rem;margin:18px 0 8px}
.page p,.page li{color:var(--graphit);max-width:62ch}
.page ul{padding-left:1.2rem}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.card{background:var(--schnee);border:1px solid var(--linie);border-radius:16px;padding:20px}
.card h2,.card h3{margin-top:0}
.figure-slot{margin:16px 0;text-align:center}
.figure-slot img{max-height:280px;width:auto;margin:0 auto;mix-blend-mode:multiply}
/* Ganzseitiger Geister-Hintergrund (Landschaft hauchzart hinter dem Inhalt) */
.page-ghost{position:relative}
.page-ghost::before{
  content:"";position:absolute;inset:0;opacity:.2;pointer-events:none;z-index:0;
  background:linear-gradient(180deg,rgba(244,239,230,.6),rgba(244,239,230,.94)),
  url(../assets/images/LineArt_Landschaft_Waldweg.jpg) center top/cover no-repeat
}
.page-ghost>*{position:relative;z-index:1}
.faq details{background:var(--schnee);border:1px solid var(--linie);border-radius:12px;padding:14px 16px;margin:0 0 10px}
.faq summary{font-weight:600;cursor:pointer;font-family:var(--serif)}
.faq details p{margin:10px 0 0}
.gate-box{max-width:420px;margin:32px auto;background:var(--schnee);border:1px solid var(--linie);border-radius:20px;padding:28px;text-align:center}
.gate-box input{min-height:48px;width:min(100%,160px);font-size:18px;text-align:center;border:1px solid var(--linie);border-radius:12px;padding:8px}
.pill-list{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0;padding:0;list-style:none}
.pill-list li{background:var(--papier2);border:1px solid var(--linie);border-radius:999px;padding:6px 12px;font-size:13px}
.breadcrumb{font-size:13px;color:var(--nebel);margin:0 0 16px}
.breadcrumb a{color:var(--moos);text-decoration:none}
/* Seiten-Pfeile unten: zurueck / weiter, damit man nie oben suchen muss */
.pager{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:40px;padding-top:18px;border-top:1px solid var(--linie)}
.pager a{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:10px 18px;border:1.5px solid var(--moos);border-radius:999px;text-decoration:none;color:var(--moos);font-weight:600;font-size:15px}
.pager a:hover{background:rgba(63,92,75,.08)}
.pager .next{margin-left:auto}
body.theme-kids .pager a{border-color:var(--morgenrot);color:var(--morgenrot);font-family:var(--kid-display);font-weight:500;font-size:1.02rem}
body.theme-kids .pager a:hover{background:rgba(196,107,74,.08)}

@media (max-width:860px){
  .hero-hub{grid-template-columns:1fr;gap:16px}
  .hero-bleed{max-width:280px;margin:0 auto;order:-1}
  .doors,.trust,.books,.grid-2,.tiles{grid-template-columns:1fr}
  .doors{gap:24px}
  .site-header{flex-wrap:wrap}
  .nav-adult,.nav-kids{width:100%}
}
@media (max-height:820px) and (min-width:861px){
  .kids-hero-img{width:140px}
  .kids-hero{padding:4px 0 8px}
  .kids-hero h1{font-size:1.7rem}
}

/* Leseprobe: PDF-Doppelseite in Buch-Optik (eltern/buecher/band-1.html) */
.spread{position:relative;margin:20px 0;background:var(--schnee);border:1px solid var(--linie);border-radius:6px;box-shadow:0 16px 40px rgba(26,26,26,.16)}
.spread::before{content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:64px;background:linear-gradient(to right,transparent,rgba(26,26,26,.05) 40%,rgba(26,26,26,.12) 50%,rgba(26,26,26,.05) 60%,transparent);pointer-events:none;z-index:1}
.spread-pdf img{display:block;width:100%;height:auto;border-radius:6px}
.spread-mitlesen{margin:14px 0 0}
.spread-mitlesen summary{cursor:pointer;font-weight:600;color:var(--moos);min-height:44px;display:flex;align-items:center}
.spread-mitlesen p{font-family:var(--serif);line-height:1.7}