/* Kinder-Welt · Abschnitte */

.abschnitt{padding-block:clamp(52px,7vw,var(--s7))}

/* ---------- Held ---------- */
.held{position:relative; background:var(--gelb); overflow:hidden;
  padding-block:clamp(72px,10vw,132px) clamp(80px,11vw,150px)}
.held__bogen{position:absolute; left:0; right:0; bottom:-1px; height:90px; background:var(--weiss);
  -webkit-mask-image:var(--bogen); mask-image:var(--bogen); -webkit-mask-size:100% 100%;
  mask-size:100% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; z-index:2}
:root{--bogen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 90' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0,90 L0,44 C240,96 420,10 660,26 C860,39 1020,72 1200,40 L1200,90 Z'/%3E%3C/svg%3E")}
.held__inhalt{position:relative; z-index:4; text-align:center; max-width:min(880px,86vw); margin-inline:auto}
.held__titel{font-size:clamp(2.05rem,5.4vw,4rem); font-weight:500; letter-spacing:-.02em;
  max-width:16ch; margin-inline:auto; text-wrap:balance}
.held__titel b{font-weight:700}
.held__text{margin:var(--s3) auto 0; max-width:52ch; color:var(--tinte-gelb); font-weight:600}
.held__aktion{margin-top:var(--s4); display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.held__foto{position:absolute; z-index:3; border-radius:50%; overflow:hidden;
  box-shadow:var(--schatten); background:var(--gelb-hell)}
.held__foto img{width:100%; height:100%; object-fit:cover}
.held__foto--links{width:clamp(88px,10vw,146px); aspect-ratio:1; left:3vw; top:34%}
.held__foto--rechts{width:clamp(112px,13vw,190px); aspect-ratio:1; right:3vw; top:46%}
.held__siegel{position:absolute; right:8vw; top:14%; width:clamp(96px,11vw,150px); aspect-ratio:1; z-index:3}
.held__siegel svg{width:100%; height:100%; animation:dreh 34s linear infinite}
.siegel-kern{fill:var(--gelb-hell)}
.siegel-text{fill:var(--tinte)}
.held__deko path,.held__deko circle{stroke:var(--blau)}
.held__deko circle[fill]{fill:var(--blau)}
@keyframes dreh{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.held__siegel svg{animation:none}}
.held__deko{position:absolute; z-index:1; opacity:.85; pointer-events:none}
.held__deko--pfeil{left:9vw; top:52%; width:clamp(70px,8vw,120px)}
.held__deko--ring{left:14vw; bottom:16%; width:clamp(42px,5vw,74px)}
@media (max-width:820px){
  .held__foto--links{top:auto; bottom:2%; left:2vw; width:84px}
  .held__foto--rechts{top:auto; bottom:0; right:2vw; width:96px}
  .held__siegel,.held__deko{display:none}
  .held{padding-bottom:clamp(120px,22vw,170px)}
}

/* ---------- Darum geht es (Werte) ---------- */
.werte__pillen{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s3); margin-top:var(--s4)}
.pille{display:flex; align-items:center; gap:16px; background:var(--gelb-hell); color:var(--tinte);
  border-radius:var(--rund); padding:20px 26px; font-weight:700; font-size:17px; line-height:1.3;
  box-shadow:0 4px 0 var(--gelb-tief)}
.pille span{display:grid; place-items:center; width:40px; height:40px; border-radius:50%;
  background:#fff; color:var(--gruen); flex:none}
@media (max-width:820px){.werte__pillen{grid-template-columns:minmax(0,1fr)}}

/* ---------- Lernspiele (Bildstapel) ---------- */
.spass{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s5); align-items:center}
.stapel{position:relative; min-height:clamp(260px,32vw,410px)}
.stapel .bild{position:absolute; border-radius:12px; overflow:hidden; box-shadow:var(--schatten-hoch)}
/* Die gelieferten Fotos bringen ihre farbigen Rahmen bereits mit — kein zweiter Rahmen */
.stapel .bild:nth-child(1){width:52%; left:0; bottom:0; z-index:3}
.stapel .bild:nth-child(2){width:46%; left:33%; bottom:22%; z-index:2}
.stapel .bild:nth-child(3){width:44%; right:0; top:0; z-index:1}
.stapel .bild img{width:100%; aspect-ratio:4/3; object-fit:cover}
@media (max-width:900px){
  .spass{grid-template-columns:minmax(0,1fr); gap:var(--s4)}
  .stapel{min-height:300px}
}

/* ---------- Zahlenband ---------- */
.zahlen{position:relative; background:var(--blau-tief); color:#fff; padding-block:clamp(70px,8vw,96px)}
.zahlen__gitter{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s3)}
.zahl{display:flex; align-items:center; gap:14px}
.zahl svg{width:38px; height:38px; flex:none; color:var(--gelb-hell)}
.zahl b{display:block; font-size:clamp(1.5rem,2.6vw,2.1rem); font-weight:700; color:var(--gelb-hell); line-height:1}
.zahl span{display:block; font-size:15px; font-weight:600}
@media (max-width:860px){.zahlen__gitter{grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s4) var(--s3)}}
@media (max-width:460px){.zahlen__gitter{grid-template-columns:minmax(0,1fr)}}

/* ---------- Neu für Kinder (Karten) ---------- */
.karten{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s3); margin-top:var(--s4)}
.karten--zwei{grid-template-columns:repeat(2,minmax(0,1fr))}
.karte{display:flex; flex-direction:column; background:var(--papier); border-radius:var(--rund-karte);
  overflow:hidden; position:relative; transition:transform var(--takt), box-shadow var(--takt)}
.karte:hover{transform:translateY(-4px); box-shadow:var(--schatten)}
.karte__bild{aspect-ratio:16/10; background:var(--blau-hauch)}
.karte__bild img{width:100%; height:100%; object-fit:cover}
.karte__text{padding:22px 24px 26px; display:flex; flex-direction:column; gap:10px; flex:1}
.karte__text h3{font-size:19px; font-weight:700}
.karte__text h3 a{text-decoration:none}
.karte__text h3 a::after{content:""; position:absolute; inset:0}
.karte__text p{margin:0; color:var(--grau); font-size:15.5px; flex:1}
.karte__mehr{display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:15px; color:var(--blau)}
.karte__mehr i{width:28px; height:28px; border-radius:50%; background:var(--blau); color:#fff;
  display:grid; place-items:center; transition:transform var(--takt)}
.karte:hover .karte__mehr i{transform:translate(3px,-3px)}
.marke-neu{position:absolute; top:14px; left:14px; z-index:2; background:var(--rot); color:#fff;
  font-size:12px; font-weight:700; letter-spacing:.1em; padding:6px 12px; border-radius:var(--rund)}
@media (max-width:900px){.karten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.karten{grid-template-columns:minmax(0,1fr)}}

/* ---------- Über uns ---------- */
.strich-titel{display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s5)}
.strich-titel::before,.strich-titel::after{content:""; flex:1; height:2px; background:rgba(20,22,26,.14)}
.ueber{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:var(--s5); align-items:center}
.ueber__bilder{position:relative; min-height:clamp(280px,34vw,430px)}
.ueber__bilder .bild{position:absolute; border-radius:22px; overflow:hidden}
.ueber__bilder .bild:nth-child(1){width:80%; left:0; top:0; box-shadow:var(--schatten)}
.ueber__bilder .bild:nth-child(2){width:66%; right:0; bottom:0; border:3px dashed var(--blau);
  padding:7px; background:#fff; border-radius:26px}
.ueber__bilder .bild img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:16px}
.ueber h2{color:var(--blau); font-size:clamp(1.7rem,3.2vw,2.5rem)}
.ueber p{margin:var(--s3) 0 var(--s4)}
@media (max-width:900px){.ueber{grid-template-columns:minmax(0,1fr); gap:var(--s4)}}

/* ---------- Häufige Fragen ---------- */
.fragen{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:var(--s5); align-items:center}
.klecks{position:relative}
.klecks .bild{overflow:hidden; border-radius:44% 56% 52% 48%/52% 44% 56% 48%}
.klecks .bild img{width:100%; aspect-ratio:5/4; object-fit:cover}
.klecks::before{content:""; position:absolute; inset:-14px -10px 22px 8px; z-index:-1; background:var(--gelb);
  border-radius:46% 54% 50% 50%/54% 46% 54% 46%}
.falt{background:#fff; border:2px solid var(--blau-hauch); border-radius:var(--rund); margin-bottom:14px;
  transition:border-color var(--takt), background var(--takt)}
.falt[open]{border-color:var(--blau-blass); background:var(--blau-hauch)}
.falt summary{display:flex; align-items:center; justify-content:space-between; gap:var(--s2);
  padding:20px 20px 20px 28px; cursor:pointer; list-style:none; font-weight:700; font-size:17px; line-height:1.35}
.falt summary::-webkit-details-marker{display:none}
.falt summary span{width:40px; height:40px; border-radius:50%; background:var(--flieder);
  color:var(--flieder-tinte); display:grid; place-items:center; flex:none; font-size:22px; font-weight:600;
  transition:transform var(--takt)}
.falt[open] summary span{transform:rotate(45deg)}
.falt p{margin:0; padding:0 28px 24px; color:var(--grau)}
@media (max-width:900px){.fragen{grid-template-columns:minmax(0,1fr); gap:var(--s4)}}

/* ---------- Kontakt ---------- */
.kontakt{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:var(--s5); align-items:start}
.kontakt__liste{list-style:none; margin:var(--s4) 0 0; padding:0; display:grid; gap:22px}
.kontakt__liste li{display:flex; gap:16px; align-items:flex-start}
.kontakt__liste i{width:46px; height:46px; border-radius:14px; display:grid; place-items:center; flex:none}
.kontakt__liste b{display:block; font-size:17px}
.kontakt__liste a,.kontakt__liste p{margin:0; color:var(--grau); text-decoration:none; font-weight:600}
.kontakt__liste a:hover{color:var(--blau); text-decoration:underline}
.formular{background:var(--blau-blass); border-radius:28px; padding:clamp(24px,3vw,38px); position:relative; overflow:hidden}
.formular label{display:block; font-weight:700; margin-bottom:8px; font-size:16px}
.feld{display:flex; align-items:center; gap:12px; background:#fff; border-radius:var(--rund);
  padding:4px 18px; margin-bottom:20px; border:2px solid transparent}
.feld:focus-within{border-color:var(--blau-tief)}
.feld svg{color:var(--grau)}
.feld input{flex:1; min-width:0; border:0; background:none; padding:14px 0; font:inherit; font-weight:600}
.feld input:focus{outline:none}
.formular textarea{width:100%; border:2px solid transparent; border-radius:var(--rund-feld); background:#fff;
  padding:16px 18px; font:inherit; font-weight:600; min-height:130px; resize:vertical; margin-bottom:20px}
.formular textarea:focus{outline:none; border-color:var(--blau-tief)}
.formular .fehler{color:var(--warnung); font-weight:700; font-size:14.5px; margin:-12px 0 16px; display:none}
.feld.ist-fehler{border-color:var(--warnung)}
.formular .fehler.zeigen{display:block}
.hinweis{margin:16px 0 0; font-size:14px; color:var(--blau-tief)}
@media (max-width:900px){.kontakt{grid-template-columns:minmax(0,1fr); gap:var(--s4)}}

/* ---------- Newsletter ---------- */
.brief{position:relative; background:var(--blau-tief); color:#fff; text-align:center;
  padding-block:clamp(84px,10vw,120px)}
.brief__deko{position:absolute; inset:0; opacity:.16; background:url("../../bilder-kinder/tiere.jpg") center/cover}
.brief__inhalt{position:relative; z-index:2}
.brief form{display:flex; gap:8px; background:#fff; border-radius:var(--rund); padding:7px;
  max-width:640px; margin:var(--s4) auto 0; flex-wrap:wrap}
.brief input{flex:1 1 200px; min-width:0; border:0; background:none; padding:14px 20px; font:inherit;
  font-weight:600; color:var(--tinte)}
.brief input:focus{outline:none}
.brief form:focus-within{box-shadow:0 0 0 3px var(--gelb)}
@media (max-width:520px){.brief form .knopf{width:100%; justify-content:center}}

/* ---------- Alle Themen ---------- */
.themen__kopf{display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s2) var(--s4); margin-bottom:var(--s3)}
.themen__kopf .fliess{flex:1 1 320px}
.pillen-reihe{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:var(--s2)}
.pille-filter{min-height:46px; padding:0 22px; border:2px solid var(--blau-hauch); border-radius:var(--rund);
  background:#fff; font-weight:700; font-size:15px; white-space:nowrap;
  transition:background var(--takt), color var(--takt), border-color var(--takt)}
.pille-filter:hover{border-color:var(--blau); color:var(--blau)}
.pille-filter[aria-pressed="true"]{background:var(--blau); border-color:var(--blau); color:#fff}
.themen__stand{display:block; color:var(--grau); margin:0 0 var(--s3);
  font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase}
.themen{list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
.thema a{display:flex; align-items:center; gap:14px; height:100%; padding:16px 18px;
  border-radius:20px; text-decoration:none; background:var(--fach,var(--gelb-blass));
  transition:transform var(--takt), box-shadow var(--takt)}
.thema a:hover{transform:translateY(-3px); box-shadow:var(--schatten)}
.thema__zeichen{width:44px; height:44px; border-radius:14px; background:var(--weiss); color:var(--fach-tinte,var(--blau));
  display:grid; place-items:center; flex:none}
.thema__text{min-width:0}
.thema__text b{display:block; font-size:16px; font-weight:700; line-height:1.25}
.thema__text .ku{font-size:14px; color:var(--grau)}
.thema__text span:last-child{display:block; font-size:13.5px; color:var(--grau); margin-top:2px}
@media (max-width:1000px){.themen{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.themen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.themen{grid-template-columns:minmax(0,1fr)}}

/* ---------- Kinder-Startseite, Umbau 13.10.2026 ----------
   Hallmark · redesign: Themenregale statt Farbwand · tone: playful · anchor hue: Petrol/Gelb (Kinder-Welt-Tokens)
   Jede Gruppe ein Regal mit eigener Grundfarbe; die Filterpillen blenden ganze Regale aus. */
.abschnitt--dicht{padding-top:0}
.unter-titel{margin-top:var(--s3)}
.mitte.unter-titel{margin-top:var(--s2)}
.spass__aktion{margin-top:var(--s4)}
.neu__kopf{display:flex; align-items:center; justify-content:space-between; gap:var(--s3); flex-wrap:wrap}
.strich-titel--mitte{justify-content:center}
.fragen__titel{margin-bottom:var(--s5)}
.ikone.ikone--klein{width:16px; height:16px}

.regale{display:grid; gap:var(--s5); margin-top:var(--s3)}
.regal{--fach:var(--blau-hauch); --fach-tinte:var(--blau-tief)}
.regal--sammeln,.regal--rechnen{--fach:var(--gelb-blass); --fach-tinte:var(--tinte-gelb)}
.regal--geschichten{--fach:var(--flieder); --fach-tinte:var(--flieder-tinte)}
.regal--kreativ{--fach:var(--rot-blass); --fach-tinte:var(--rot)}
.regal--lernen{--fach:var(--gruen-blass); --fach-tinte:var(--gruen)}
.regal__titel{display:flex; align-items:center; gap:12px; margin:0;
  font-size:clamp(1.35rem,2.2vw,1.7rem); font-weight:700; line-height:1.2}
.regal__titel::before{content:""; width:14px; height:14px; border-radius:50%; flex:none;
  background:var(--fach); box-shadow:inset 0 0 0 4px var(--fach-tinte)}
.regal__unter{margin:4px 0 var(--s2) 26px; color:var(--grau); font-size:15px}
.regal[hidden]{display:none}

/* Kontakt im blauen Band, statt zweier Formulare, die nichts verschickten */
.brief__text{color:var(--weiss-weich); margin-top:14px}
.brief__wege{display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin:var(--s4) 0 0}
.brief__ort{margin:var(--s3) 0 0; color:var(--weiss-weich); font-size:15px; font-weight:600}
.knopf--hell{background:var(--weiss); color:var(--blau-tief)}
.knopf--hell .knopf__pfeil{background:var(--blau-tief); color:var(--weiss)}
.knopf--hell:hover{background:var(--blau-hauch)}
@media (max-width:520px){.brief__wege .knopf{width:100%; justify-content:space-between}}