/* NirukoWorld – Stylesheet. Schriften liegen lokal (kein Google-Fonts-Aufruf). */
@font-face{font-family:"Fredoka";font-weight:400;font-display:swap;src:url(../fonts/fredoka-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Fredoka";font-weight:600;font-display:swap;src:url(../fonts/fredoka-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Fredoka";font-weight:700;font-display:swap;src:url(../fonts/fredoka-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-weight:400;font-display:swap;src:url(../fonts/nunito-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-weight:700;font-display:swap;src:url(../fonts/nunito-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-weight:800;font-display:swap;src:url(../fonts/nunito-latin-800-normal.woff2) format("woff2")}

:root{
  --wald:#0E2F2E;       /* tiefer Nachtwald */
  --wald-2:#164443;
  --tuerkis:#27C4B5;    /* Tüftelnuss-Kern */
  --tuerkis-d:#0F7F76;
  --bernstein:#F5A524;  /* zweites Auge */
  --moos:#8CC152;
  --nebel:#EDF7F3;
  --blatt:#FFFFFF;
  --text:#14302F;
  --text-soft:#4B6563;
  --linie:#CFE3DC;
  --r-gross:36px;
  --r-mittel:20px;
  --r-klein:10px;
  --breite:1120px;
  --kopf:"Fredoka",system-ui,sans-serif;
  --fliess:"Nunito",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--nebel);color:var(--text);font:400 1.0625rem/1.65 var(--fliess);overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:var(--tuerkis-d);text-underline-offset:3px}
a:hover{color:var(--wald)}
:focus-visible{outline:3px solid var(--bernstein);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--bernstein);color:var(--wald);padding:.6rem 1rem;border-radius:var(--r-klein);font-weight:800;z-index:100}
.skip:focus{left:8px}

h1,h2,h3{font-family:var(--kopf);font-weight:600;line-height:1.15;margin:0 0 .5em;color:var(--wald);letter-spacing:.005em}
h1{font-size:clamp(2.3rem,6vw,4rem);font-weight:700}
h2{font-size:clamp(1.7rem,3.6vw,2.5rem)}
h3{font-size:1.3rem}
p{margin:0 0 1em;max-width:62ch}
.wrap{width:min(100% - 2.5rem,var(--breite));margin-inline:auto}
.lead{font-size:1.2rem;color:var(--text-soft);max-width:54ch}

/* Kopf */
.kopf{position:sticky;top:0;z-index:50;background:rgba(14,47,46,.97);backdrop-filter:blur(6px);color:#fff}
.kopf .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:68px}
.logo{display:flex;align-items:center;gap:.6rem;font:700 1.5rem var(--kopf);color:#fff;text-decoration:none}
.logo svg{width:34px;height:34px}
.logo span b{color:var(--tuerkis);font-weight:700}
.nav{display:flex;gap:.25rem;align-items:center}
.nav a{color:#DDF1EC;text-decoration:none;font:600 1.02rem var(--kopf);padding:.5rem .8rem;border-radius:999px}
.nav a:hover{background:var(--wald-2);color:#fff}
.nav a[aria-current="page"]{background:var(--tuerkis);color:var(--wald)}
.menue{display:none;background:none;border:2px solid var(--tuerkis);color:#fff;border-radius:999px;padding:.4rem .9rem;font:600 1rem var(--kopf);cursor:pointer}
@media (max-width:900px){
  .menue{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:68px;background:var(--wald);flex-direction:column;align-items:stretch;padding:.75rem 1.25rem 1.25rem;gap:.15rem;border-top:1px solid var(--wald-2)}
  .nav.offen{display:flex}
  .nav a{font-size:1.15rem;padding:.75rem 1rem}
}

/* Held */
.held{background:var(--wald);color:#fff;position:relative;overflow:hidden;padding:clamp(2.5rem,7vw,5.5rem) 0 clamp(4rem,9vw,7rem)}
.held::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:64px;background:var(--nebel);clip-path:ellipse(75% 100% at 50% 100%)}
.held h1{color:#fff;margin-bottom:.35em}
.held .lead{color:#C4E2DB}
.held-raster{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center}
.held .knopfreihe{margin-top:1.75rem}
@media (max-width:820px){.held-raster{grid-template-columns:1fr}}

/* Nuss zum Knacken */
.nuss-buehne{display:grid;justify-items:center;gap:1rem;text-align:center}
.nuss{background:none;border:0;padding:0;cursor:pointer;width:min(280px,70vw);aspect-ratio:1;position:relative;filter:drop-shadow(0 18px 24px rgba(0,0,0,.35))}
.nuss svg{width:100%;height:100%;overflow:visible}
.nuss .haelfte-l,.nuss .haelfte-r{transition:transform .6s cubic-bezier(.3,1.4,.5,1);transform-origin:50% 100%}
.nuss .kern{transition:opacity .4s,transform .6s;transform-origin:50% 50%;opacity:.9}
.nuss[aria-expanded="true"] .haelfte-l{transform:translate(-18px,-4px) rotate(-9deg)}
.nuss[aria-expanded="true"] .haelfte-r{transform:translate(18px,-4px) rotate(9deg)}
.nuss[aria-expanded="true"] .kern{opacity:1;transform:scale(1.15)}
.nuss:not([aria-expanded="true"]):hover svg,.nuss:not([aria-expanded="true"]):focus-visible svg{animation:wackeln .5s}
@keyframes wackeln{25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}
.raetsel{background:var(--blatt);color:var(--text);border-radius:var(--r-mittel);padding:1.1rem 1.4rem;min-height:7.5rem;width:min(100%,380px);text-align:left;box-shadow:0 10px 0 var(--tuerkis-d)}
.raetsel .hinweis{color:var(--text-soft);margin:0}
.raetsel .frage{font:600 1.25rem/1.35 var(--kopf);margin:0 0 .6rem;color:var(--wald)}
.raetsel .loesung{margin:.6rem 0 0;font-weight:800;color:var(--tuerkis-d)}
.raetsel button{font:700 .95rem var(--fliess)}

/* Knöpfe */
.knopfreihe{display:flex;flex-wrap:wrap;gap:.8rem}
.knopf{display:inline-block;font:600 1.1rem var(--kopf);text-decoration:none;padding:.8rem 1.5rem;border-radius:999px;border:0;cursor:pointer;background:var(--bernstein);color:var(--wald);box-shadow:0 5px 0 #B87408;transition:transform .12s,box-shadow .12s}
.knopf:hover{color:var(--wald);transform:translateY(2px);box-shadow:0 3px 0 #B87408}
.knopf.zweit{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px var(--tuerkis)}
.knopf.zweit:hover{background:var(--tuerkis);color:var(--wald)}
.knopf.hell{background:var(--tuerkis);box-shadow:0 5px 0 var(--tuerkis-d)}
.knopf.klein{font-size:.98rem;padding:.55rem 1.1rem;box-shadow:none}
.knopf.klein:hover{transform:none;box-shadow:none}
.knopf.lesbar{background:var(--wald);color:#fff;box-shadow:0 5px 0 #000}
.knopf.lesbar:hover{color:#fff}

/* Abschnitte */
.abschnitt{padding:clamp(2.5rem,6vw,4.5rem) 0}
.abschnitt.dunkel{background:var(--wald);color:#D6ECE6}
.abschnitt.dunkel h2,.abschnitt.dunkel h3{color:#fff}
.abschnitt.dunkel .lead{color:#B9D8D0}
.abschnitt.weiss{background:var(--blatt)}
.kopfzeile{display:flex;justify-content:space-between;align-items:end;gap:1rem;flex-wrap:wrap;margin-bottom:1.75rem}
.kopfzeile h2{margin:0}
.seitenkopf{background:var(--wald);color:#fff;padding:clamp(2.2rem,5vw,3.8rem) 0 clamp(3rem,6vw,4.6rem);position:relative}
.seitenkopf::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:44px;background:var(--nebel);clip-path:ellipse(75% 100% at 50% 100%)}
.seitenkopf h1{color:#fff;margin-bottom:.3em;font-size:clamp(2rem,5vw,3.2rem)}
.seitenkopf .lead{color:#C4E2DB;margin:0}
.krumen{font:600 .95rem var(--fliess);margin-bottom:.8rem;color:#9CCFC5}
.krumen a{color:#9CCFC5}

/* Kacheln */
.raster{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.kachel{background:var(--blatt);border-radius:var(--r-mittel);padding:1.5rem;border:2px solid var(--linie);display:flex;flex-direction:column;gap:.5rem}
.kachel p{margin:0;color:var(--text-soft)}
.kachel .knopf{align-self:flex-start;margin-top:auto}
.kachel.gross{border-radius:var(--r-gross)}
.marke{display:inline-block;align-self:flex-start;font:700 .9rem var(--fliess);padding:.2rem .75rem;border-radius:999px;background:#FFF1D2;color:#7A4B00}
.marke.gruen{background:#DDF3C9;color:#2D5A0C}
.marke.blau{background:#D0F1EC;color:#0A5C55}

/* Freunde: Blatt-Kacheln, jede leicht anders gedreht */
.freunde{display:grid;gap:1.8rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.freund{background:var(--blatt);border-radius:48px 12px 48px 12px;padding:1.6rem;border:2px solid var(--linie);position:relative}
.freund:nth-child(even){border-radius:12px 48px 12px 48px}
.freund .bild{aspect-ratio:1;border-radius:32px;background:linear-gradient(145deg,#D8F2EA,#BFE6DA);display:grid;place-items:center;overflow:hidden;margin-bottom:1rem}
.freund .bild img{width:100%;height:100%;object-fit:cover}
.freund .platzhalter{font:700 4rem var(--kopf);color:var(--tuerkis-d);opacity:.5}
.freund h3{margin-bottom:.15em}
.freund .art{font:700 .95rem var(--fliess);color:var(--tuerkis-d);margin-bottom:.6rem}
.freund p{color:var(--text-soft);margin:0}
.niruko-karte{background:var(--wald);color:#D6ECE6;border-radius:var(--r-gross);padding:clamp(1.5rem,4vw,2.5rem);display:grid;grid-template-columns:240px 1fr;gap:2rem;align-items:center;margin-bottom:2.2rem}
.niruko-karte h2{color:#fff}
.niruko-karte .bild{aspect-ratio:1;border-radius:28px;background:var(--wald-2);display:grid;place-items:center;overflow:hidden}
.niruko-karte .bild img{width:100%;height:100%;object-fit:cover}
.niruko-karte .platzhalter{font:700 5rem var(--kopf);color:var(--tuerkis);opacity:.6}
.merkmale{list-style:none;padding:0;margin:1rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem}
.merkmale li{background:var(--wald-2);color:#C4E8E0;border-radius:999px;padding:.25rem .85rem;font-weight:700;font-size:.95rem}
@media (max-width:700px){.niruko-karte{grid-template-columns:1fr}.niruko-karte .bild{max-width:240px}}

/* Bücher */
.buecher{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.buch{display:flex;flex-direction:column;gap:.55rem}
.buch .cover{aspect-ratio:213/303;border-radius:6px 16px 16px 6px;background:linear-gradient(150deg,var(--tuerkis),var(--tuerkis-d));display:grid;place-items:center;padding:1rem;text-align:center;color:var(--wald);font:700 1.2rem/1.2 var(--kopf);box-shadow:-8px 8px 0 var(--wald-2);overflow:hidden;position:relative}
.buch .cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.buch:nth-child(3n+2) .cover{background:linear-gradient(150deg,var(--bernstein),#D98A0B)}
.buch:nth-child(3n) .cover{background:linear-gradient(150deg,var(--moos),#5E9632)}
.buch h3{font-size:1.15rem;margin:.6rem 0 0}
.buch p{margin:0;color:var(--text-soft);font-size:.98rem}

/* Apps */
.app-raster{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.app{background:var(--wald-2);border-radius:var(--r-mittel);padding:1.6rem;display:flex;flex-direction:column;gap:.6rem}
.app .symbol{width:56px;height:56px;border-radius:16px;background:var(--tuerkis);display:grid;place-items:center;font-size:1.8rem}
.app p{margin:0;color:#B9D8D0}
.app .marke{background:#14504E;color:#BFEFE7}

/* Eltern / Textseiten */
.text-spalte{max-width:760px}
.text-spalte h2{margin-top:1.8em;font-size:1.6rem}
.text-spalte h3{margin-top:1.4em}
.text-spalte ul{padding-left:1.2rem}
.text-spalte li{margin-bottom:.4em}
.hinweis-kasten{background:#FFF4D9;border-left:6px solid var(--bernstein);padding:1rem 1.25rem;border-radius:var(--r-klein);margin:1.2rem 0;max-width:62ch}
.versprechen{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.versprechen div{background:var(--blatt);border-radius:var(--r-mittel);padding:1.3rem;border:2px solid var(--linie)}
.versprechen h3{font-size:1.15rem}
.versprechen p{margin:0;color:var(--text-soft);font-size:.98rem}

/* Video */
.video-feld{aspect-ratio:16/9;border-radius:var(--r-mittel);background:var(--wald-2);display:grid;place-items:center;overflow:hidden;position:relative}
.video-feld iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-feld button{background:var(--bernstein);border:0;color:var(--wald);font:600 1.1rem var(--kopf);padding:.8rem 1.4rem;border-radius:999px;cursor:pointer}
.video-karte small{display:block;color:var(--text-soft);margin-top:.5rem}

/* Fuß */
.fuss{background:var(--wald);color:#B9D8D0;padding:3rem 0 2rem}
.fuss a{color:#DDF1EC}
.fuss h2{font-size:1.1rem;color:#fff;margin-bottom:.6em}
.fuss-raster{display:grid;gap:2rem;grid-template-columns:1.4fr 1fr 1fr 1fr}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.fuss .klein{margin-top:2rem;padding-top:1.2rem;border-top:1px solid var(--wald-2);font-size:.92rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem}
@media (max-width:800px){.fuss-raster{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.fuss-raster{grid-template-columns:1fr}}

.leer{border:3px dashed var(--linie);border-radius:var(--r-mittel);padding:2rem;text-align:center;color:var(--text-soft);background:var(--blatt)}
.leer p{margin-inline:auto}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

.nuss .haelfte-l,.nuss .haelfte-r{transform-box:fill-box}