/* Clayrified Link-Seite. Farben seit 14.10.2026 nach Fynns Brand Guide (Sky #B2E0FC, Clay #FF6A1F, Night #102B5C); Himmel in den Motiven mit umgefaerbt. */
@font-face{font-family:"Archivo";src:url(fonts/archivo-var.woff2) format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"Fredoka";src:url(fonts/fredoka-var.woff2) format("woff2");font-weight:500 700;font-display:swap}
:root{--round:"Fredoka","Archivo",system-ui,sans-serif;--clay:#F2600F;--clay-ink:#B8440B;--sky-top:#B9DCF5;--sky-mid:#CFEAFB;--sky-low:#E0F2FE;--ink:#102B5C;--sun:#FF6A1F;--pill:rgba(16,43,92,.6);--pill-hover:rgba(16,43,92,.78);--paper:#ffffff;--soft:#3D5478;--deep:#102B5C}
*{box-sizing:border-box}
html{background:var(--sky-mid)}
body{margin:0;min-height:100dvh;overflow-x:clip;font-family:"Archivo",system-ui,sans-serif;color:var(--ink);
  background:linear-gradient(180deg,var(--sky-top) 0,var(--sky-mid) 42rem,var(--sky-low) 100%);-webkit-font-smoothing:antialiased}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
header{overflow-x:clip} /* das Himmelsbild wird beim Scrollen leicht groesser (hero-drift) und darf die Seite nicht verbreitern */
.hero{display:block;width:100%;height:auto;-webkit-mask-image:linear-gradient(#000 92%,transparent);mask-image:linear-gradient(#000 92%,transparent)}
.page{max-width:30rem;margin:0 auto;padding:0 1rem 2.5rem}
.tag{margin:-.25rem 0 1.75rem;text-align:center;font-size:1rem;font-weight:600;letter-spacing:.01em;color:var(--deep)}
.links{display:grid;gap:.75rem;margin:0;padding:0;list-style:none}
/* Knoepfe aus Knete (Joost 27.09.): Knet-Pille als Bild, links/rechts die runden Enden, Mitte gedehnt, Text bleibt echt */
.links a{display:flex;align-items:center;justify-content:center;min-height:3.5rem;padding:.75rem 1.75rem;
  border:0 solid transparent;border-image:url(img/clay/btn-blue.webp) 0 64 fill / 0 1.75rem stretch;
  color:#fff;text-decoration:none;font:600 1.0625rem/1.2 var(--round);text-shadow:0 1px 2px rgba(28,24,20,.35);
  filter:drop-shadow(0 3px 4px rgba(28,24,20,.2));transition:transform .35s cubic-bezier(.22,1,.36,1),translate .35s cubic-bezier(.22,1,.36,1),filter .35s cubic-bezier(.22,1,.36,1)}
.links a:focus-visible{outline:3px solid #fff;outline-offset:3px;border-radius:999px}
.links .main{border-image-source:url(img/clay/btn-yellow.webp);color:var(--ink);text-shadow:none}
/* dunkle Schrift auf hellem Himmel: weiss kam hier nur auf 2,4:1 */
.foot{margin-top:2.25rem;text-align:center;font-size:.8125rem;color:var(--deep)}
.foot a{color:var(--deep);text-underline-offset:3px;display:inline-flex;align-items:center;min-height:2.75rem;padding:0 .5rem}
/* Ab Tablet (34rem, 14.10.2026; vorher 56rem): breites Motiv ueber die ganze Breite, Buttons darunter.
   Das hohe Handy-Motiv war auf Tablets so lang, dass es die Wiese und den Anfang der Erde ueberdeckte. */
@media (min-width:34rem){
  body{background:linear-gradient(180deg,#BCDAF4 0,#C9E7FA 44rem,var(--sky-low) 100%)}
  /* Fynn 06.10.: in flachen Laptopfenstern (1512x760) waren die Koepfe oben abgeschnitten. Nie flacher als 33vw
     (vom Motiv 2560x1086 bleiben so mind. 78 % der Hoehe), nie hoeher als 50vw (sonst fehlen die Buchstaben seitlich),
     Ausschnitt oben verankert: Koepfe ab ~6 % der Bildhoehe, Schriftzug endet bei ~70 % */
  .hero{height:clamp(33vw,68vh,min(44rem,50vw));object-fit:cover;object-position:50% 15%;
    -webkit-mask-image:linear-gradient(#000 84%,transparent);mask-image:linear-gradient(#000 84%,transparent)}
  .page{position:relative;margin-top:-1.5rem}
}
/* Rechtstexte */
.legal{max-width:40rem;margin:0 auto;padding:1.5rem 1rem 3rem}
.legal article{background:#fff;color:var(--ink);border-radius:1.25rem;padding:1.75rem 1.5rem;line-height:1.6}
.legal h1{margin:0 0 1rem;font-size:1.75rem;line-height:1.2}
.legal h2{margin:1.5rem 0 .5rem;font-size:1.125rem}
.legal p{margin:0 0 .75rem}
.legal .back{margin:0 0 1.25rem}

/* Website v1 - Homepage-Abschnitte (index.html im Wurzelordner) */
.sky{background:linear-gradient(180deg,var(--sky-top) 0,var(--sky-mid) 60%,var(--sky-low) 100%)}
.paper{background:var(--paper) url(img/clay/texture.webp) 0 0/420px;background-blend-mode:soft-light;color:var(--ink)}

.hero-content{max-width:36rem;margin:0 auto;padding:0 1rem 3rem;text-align:center;position:relative}
@media (min-width:34rem){.hero-content{margin-top:-2rem}}
/* Handy: Zeile und Buttons in den freien Himmel des 9:16-Motivs (untere Haelfte), sonst rutschen sie unter den Bildrand */
@media (max-width:33.99rem){.hero-content,.page{margin-top:-89vw}}
/* Das Motiv hat eine Maske (eigene Ebene) und laege sonst ueber allem, was in seinen unteren Rand ragt */
.page,.numbers{position:relative}
.cta-row{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:3.25rem;padding:.75rem 1.9rem;
  border:0 solid transparent;border-image:url(img/clay/btn-blue.webp) 0 64 fill / 0 1.625rem stretch;
  font:600 1.0625rem/1.2 var(--round);text-decoration:none;white-space:nowrap;color:#fff;text-shadow:0 1px 2px rgba(28,24,20,.35);
  filter:drop-shadow(0 3px 4px rgba(28,24,20,.2));transition:transform .35s cubic-bezier(.22,1,.36,1),translate .35s cubic-bezier(.22,1,.36,1),filter .35s cubic-bezier(.22,1,.36,1)}
.btn:focus-visible{outline:3px solid #fff;outline-offset:3px;border-radius:999px}
/* auf hellem Papier waere der weisse Fokusring unsichtbar */
.paper .btn:focus-visible,.site-footer .btn:focus-visible{outline-color:var(--ink)}
.btn-primary{border-image-source:url(img/clay/btn-yellow.webp);color:var(--ink);text-shadow:none}
/* Knete gibt nach: beim Druecken kurz breiter und flacher */
.btn:active,.links a:active{transform:scale(1.03,.92)}
@media (hover:hover){.btn:hover,.links a:hover{translate:0 -2px;filter:drop-shadow(0 9px 10px rgba(28,24,20,.22))}}

.numbers{padding:2.5rem 1rem 4.5rem}
.numbers-row{max-width:64rem;margin:0 auto;display:grid;grid-template-columns:repeat(2,1fr);gap:2.25rem 1rem;text-align:center}
/* Zahlen in tiefem Himmelsblau statt weiss (Kontrast 5,6:1 statt 2,4:1 auf dem unteren Himmel) */
.stat-num{margin:0;font-family:var(--round);font-size:clamp(1.875rem,6vw,2.5rem);font-weight:700;letter-spacing:-.01em;color:var(--deep);text-shadow:0 1px 0 rgba(255,255,255,.35)}
.stat-label{margin:.4rem auto 0;max-width:11rem;font-size:.8125rem;font-weight:500;line-height:1.4;color:var(--deep)}
@media (min-width:40rem){
  .numbers-row{grid-template-columns:repeat(4,1fr);gap:0}
  .stat{padding:0 1.5rem;border-left:1px solid rgba(22,50,74,.18);text-align:left}
  .stat:first-child{border-left:none;padding-left:0}
  .stat-label{margin:.4rem 0 0;max-width:12rem}
}

/* Ueberschriften aus Knete (Bild, alt = Text). Fehlt ein Bild noch, steht der Text in Knetfarbe */
.section-title{font:700 clamp(1.9rem,5vw,2.6rem)/1.1 var(--round);text-align:center;margin:0 0 .75rem;color:var(--clay);
  text-shadow:0 2px 0 #FFC4A3,0 5px 12px rgba(242,96,15,.22)}
.clay-title{line-height:0;text-shadow:none}
.clay-title img{display:block;margin:0 auto;width:min(100%,var(--w,26rem));height:auto}
.t-work{--w:24rem}.t-how{--w:22rem}.t-learn{--w:20rem}.t-stories{--w:20rem}
.section-lede{max-width:32rem;margin:0 auto;text-align:center;color:var(--soft);font-size:1rem;line-height:1.55}

.stories{padding:5rem 1rem}
.story-grid{display:grid;gap:3rem 1.5rem;max-width:22rem;margin:3rem auto 0}
@media (min-width:48rem){.story-grid{grid-template-columns:repeat(3,1fr);max-width:60rem}.story-grid .phone{width:min(100%,15rem)}} /* drei Handys passen auch bei 768 px */
.story-card{display:block;text-decoration:none;color:inherit;text-align:center}
.story-card:focus-visible{outline:3px solid var(--ink);outline-offset:6px;border-radius:1rem}
/* Vorschaubild liegt auf dem schwarzen Bildschirm des Knet-Handys (Lage in phone.webp gemessen) */
.phone{position:relative;display:block;width:min(15rem,68vw);margin:0 auto;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.phone .shell{display:block;width:100%;height:auto;filter:drop-shadow(0 14px 14px rgba(28,24,20,.18))}
.phone .screen{position:absolute;left:9.8%;top:4.6%;width:80%;height:90.6%;object-fit:cover;border-radius:9% / 4.2%;background:#1c1814}
@media (hover:hover){.story-card:hover .phone{transform:rotate(-2deg) translateY(-6px)}}
.story-title{margin:1.1rem auto 0;max-width:17rem;font:600 1.0625rem/1.35 var(--round)}
.story-meta{margin:.35rem 0 0;font-size:.8125rem;color:var(--soft)}

.work,.shop{padding:5rem 1rem}
.offer-grid.shop-grid{grid-template-columns:repeat(2,1fr);gap:1rem;max-width:64rem;margin-top:2.25rem}
@media (min-width:64rem){.offer-grid.shop-grid{grid-template-columns:repeat(3,1fr);gap:1.5rem}}
.shop-grid .offer{padding:.75rem .75rem 1.25rem}
.shop-grid .offer h3{font-size:clamp(1.0625rem,2.6vw,1.375rem)}
.offer-grid.shop-grid .offer{min-width:0}
.shop-grid .offer h3,.shop-grid .offer p{overflow-wrap:anywhere;hyphens:auto}
@media (max-width:22rem){.offer-grid.shop-grid{grid-template-columns:1fr}} /* sehr schmale Handys: eine Spalte, sonst schneiden lange deutsche Woerter ab */
.shop-grid .offer p{margin:.4rem 0 0;font-size:.875rem;line-height:1.45}
.shop-grid .offer-sub{margin:.85rem 0 .25rem;font-weight:700;font-size:.8125rem;color:var(--clay-ink)}
.shop-img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:1rem}
/* Shop-Kacheln (14.10.): ganze Karte ist der Link, Preis in der Oberzeile, Weihnachtsfrist + Vertrauenszeile darunter (Baymard: Kosten und Lieferung frueh zeigen) */
.shop-link{display:block;color:inherit;text-decoration:none;border-radius:1rem}
.shop-link:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.shop-go{display:inline-block;margin-top:.7rem;font-weight:700;font-size:.875rem;color:var(--ink);text-decoration:underline;text-underline-offset:.2em}
.shop-link:hover .shop-go{color:var(--clay-ink)}
/* letzte Karte allein in ihrer Reihe (Parable Club): ueber die ganze Breite, Bild links, statt eines Lochs */
.offer-grid.shop-grid .offer:last-child:nth-child(odd){grid-column:1/-1;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);grid-template-rows:1fr auto auto auto 1fr;column-gap:1rem}
.offer-grid.shop-grid .offer:last-child:nth-child(odd) .shop-img{grid-row:1/-1;aspect-ratio:8/5}
.offer-grid.shop-grid .offer:last-child:nth-child(odd) .offer-sub{grid-area:2/2}
.offer-grid.shop-grid .offer:last-child:nth-child(odd) h3{grid-area:3/2}
.offer-grid.shop-grid .offer:last-child:nth-child(odd) p:not(.offer-sub){grid-area:4/2}
.shop-note{max-width:64rem;margin:2.25rem auto 0;font-weight:700;text-align:center}
.shop-trust{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.5rem;margin:.75rem auto 0;padding:0;font-size:.875rem;color:var(--soft)}
.brands{padding:3.5rem 1rem 4.5rem;text-align:center;border-top:1px solid rgba(28,24,20,.08)}
.offer-grid{display:grid;gap:3.75rem 1.5rem;max-width:56rem;margin:4.5rem auto 0}
@media (min-width:42rem){.offer-grid{grid-template-columns:1fr 1fr}}
.offer{position:relative;background:#fff;border-radius:1.75rem;padding:3.5rem 1.75rem 2.25rem;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.9),inset 0 -4px 0 rgba(165,85,58,.08),0 18px 30px -18px rgba(28,24,20,.35)}
.offer-icon{position:absolute;top:-2.75rem;left:1.5rem;height:5.25rem;width:auto;filter:drop-shadow(0 6px 6px rgba(28,24,20,.15))}
.offer h3{margin:0;font:600 1.5rem/1.2 var(--round);color:var(--ink)}
.offer-sub{margin:.25rem 0 1.35rem;font-size:.875rem;color:var(--soft)}
.offer ul{margin:0;padding:0;list-style:none;display:grid;gap:.65rem}
.offer li{padding-left:1.15rem;position:relative;font-size:.9375rem;line-height:1.5}
.offer li::before{content:"";position:absolute;left:0;top:.55em;width:.4rem;height:.4rem;border-radius:50%;background:var(--sun)}
.work-cta{text-align:center;margin-top:2.5rem}

.how{padding:5rem 1rem}
.steps{list-style:none;margin:2.5rem auto 0;padding:0;max-width:44rem;display:grid;gap:1.75rem;grid-template-columns:1fr}
.steps li{display:block;text-align:center}
.step-icon{display:block;height:4.5rem;width:auto;max-width:8rem;object-fit:contain;margin:0 auto .85rem;filter:drop-shadow(0 5px 5px rgba(28,24,20,.15))}
.step-text{margin:0 auto;max-width:16rem;font-size:.9375rem;line-height:1.5}
@media (min-width:48rem){
  .steps{grid-template-columns:repeat(4,1fr);max-width:64rem;gap:1rem}
  .steps li{display:block;text-align:center;position:relative}
  .step-icon{margin:0 auto 1rem}
  .step-text{margin:0 auto;max-width:14rem}
  /* gerollte Knetschnur zwischen den Schritten */
  /* vorher z-index:-1 -> lag hinter dem Abschnitts-Hintergrund und war unsichtbar */
  .steps li:not(:last-child)::after{content:"";position:absolute;top:2.05rem;left:calc(50% + 3.25rem);
    width:calc(100% + 1rem - 6.5rem);height:.4rem;border-radius:.2rem;background:linear-gradient(#f6c9ad,#e3977a);box-shadow:0 2px 0 rgba(165,85,58,.15)}
}

.course{padding:4.5rem 1rem 5.5rem;text-align:center;border-top:1px solid rgba(28,24,20,.08)}
.course .btn{margin-top:.5rem}
.course-art{display:block;width:min(100%,26rem);height:auto;margin:2rem auto;border-radius:1.75rem;box-shadow:0 18px 30px -18px rgba(28,24,20,.4)}

/* Unten der Boden: Himmel wird wieder hell, die beiden winken zum Abschied */
.site-footer{position:relative;overflow:hidden;padding:3rem 1rem 0;text-align:center;font-size:.875rem;color:var(--ink);
  background:linear-gradient(180deg,var(--paper) 0,#EEF7FE 45%,#CFE8FB 100%)}
.ground{display:block;width:calc(100% + 2rem);max-width:none;margin:1rem -1rem 0;height:auto}
/* schmal: Wiese links anschneiden, damit die beiden groesser bleiben */
@media (max-width:40rem){.ground{height:9.5rem;object-fit:cover;object-position:80% 100%}}
.site-footer p{margin:0 0 .85rem}
.site-footer a{color:var(--ink);text-underline-offset:3px;display:inline-flex;align-items:center;justify-content:center;min-height:2.75rem;min-width:2.75rem;padding:0 .35rem}
.site-footer .legal-row{opacity:.72;font-size:.8125rem}
/* Kanaele und Mail als Knet-Knoepfe (Joost 27.09.: Textlinks passten nicht zur Knetwelt) */
.foot-channels{gap:.5rem;margin:0 auto 1rem}
.site-footer .btn{min-height:2.9rem;padding:.6rem 1.25rem;border-image-width:0 1.45rem;font-size:1rem;color:#fff}
.site-footer .btn-primary{color:var(--ink)}
.foot-mail{margin:0 0 1.5rem}

#stories,#shop,#course{scroll-margin-top:1.5rem}

@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .hero-content{animation:rise .8s cubic-bezier(.22,1,.36,1) both;animation-delay:.15s}
}
@keyframes rise{from{opacity:0;transform:translateY(1rem)}to{opacity:1;transform:translateY(0)}}

/* Wolken aus Knete (Joost 27.09.: mehrere). Am Uebergang Himmel -> helle Abschnitte ziehen sie beim Scrollen verschieden schnell. */
.sky{position:relative;z-index:2}
.cloud-band{position:relative;height:0}
.cloud{position:absolute;height:auto;pointer-events:none;filter:drop-shadow(0 10px 12px rgba(28,24,20,.12))}
.c1{width:clamp(9rem,27vw,21rem);left:-4%;top:-5rem}
.c2{width:clamp(7rem,19vw,15rem);right:3%;top:-3.5rem;scale:-1 1}
.c3{width:clamp(5.5rem,11vw,9rem);left:34%;top:-1rem}
.c4{width:clamp(4.5rem,10vw,9rem);left:1%;top:.25rem;scale:-1 1}
.c5{width:clamp(4rem,8vw,7.5rem);right:2%;top:5.5rem}
.c1{--f:3rem;--t:-4rem;--tx:-3rem}.c2{--f:1.5rem;--t:-2.5rem;--tx:3rem}.c3{--f:2rem;--t:-1.5rem;--tx:1.5rem}.c4{--f:2rem;--t:-3rem}.c5{--f:3.5rem;--t:-5rem}

.stories{padding-top:7rem}
@media (max-width:40rem){.c5{top:1.25rem}} /* schmal: rechte Wolke ueber die Knoepfe, nicht daneben (muss nach .c5 stehen) */

/* ---------- Bewegung (Joost 27.09.: leicht verspielt, nicht uebertrieben) ----------
   Nur CSS, kein Skript. Scroll-gebunden ueber animation-timeline (Chrome/Edge, Safari 26+), aeltere Browser zeigen
   einfach alles fertig. Nur transform/translate/scale/rotate/opacity. Bei "weniger Bewegung" steht alles still. */
:root{--out:cubic-bezier(.22,1,.36,1)}
@media (prefers-reduced-motion:no-preference){
  /* Knete wackelt kurz, wenn die Maus drueber geht */
  @media (hover:hover){.btn:hover,.links a:hover{animation:jelly .6s var(--out)}}
  /* Beim Laden: Zeile, dann die Knoepfe nacheinander */
  .cta-row .btn{animation:plop .7s var(--out) both}
  .cta-row .btn:nth-child(1){animation-delay:.35s}.cta-row .btn:nth-child(2){animation-delay:.47s}
  .links li{animation:rise .6s var(--out) both}
  .links li:nth-child(1){animation-delay:.2s}.links li:nth-child(2){animation-delay:.27s}.links li:nth-child(3){animation-delay:.34s}
  .links li:nth-child(4){animation-delay:.41s}.links li:nth-child(5){animation-delay:.48s}.links li:nth-child(6){animation-delay:.55s}
  /* Wolken schweben leise vor sich hin. Start erst nach 3 s aus der Ruhelage: Dauerbewegung im ersten Bild
     liess Lighthouse die Seite nie "fertig" sehen (Speed Index 25 s statt ~2 s) */
  .cloud{animation:bob 8s ease-in-out 3s infinite alternate}
  .c2{animation-duration:10s}.c3{animation-duration:7s}.c4{animation-duration:9s}.c5{animation-duration:11s}

  @supports (animation-timeline:view()){
    /* Himmel: Schriftzug bleibt beim ersten Scrollen etwas zurueck (Tiefe) */
    .hero{animation:hero-drift linear both;animation-timeline:scroll(root);animation-range:0 100vh}
    /* Zahlen ploppen der Reihe nach auf */
    .stat{animation:pop-in linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
    .stat:nth-child(2){animation-range:entry 8% entry 78%}.stat:nth-child(3){animation-range:entry 16% entry 86%}.stat:nth-child(4){animation-range:entry 24% entry 94%}
    /* Wolken am Uebergang: beim Hinabsteigen weichen sie zur Seite */
    .cloud-band .cloud{animation:drift linear both,bob 8s ease-in-out 3s infinite alternate;animation-timeline:view(),auto;animation-range:cover,normal}
    .site-footer .cloud{animation:drift linear both,bob 9s ease-in-out 3s infinite alternate;animation-timeline:view(),auto;animation-range:cover,normal}
    /* Knet-Ueberschriften werden beim Hereinkommen in Form gedrueckt */
    .clay-title img{animation:squish-in linear both;animation-timeline:view();animation-range:entry 0% entry 90%}
    /* Die drei Handys faechern sich auf, das Vorschaubild schwenkt leicht mit */
    .story-card{animation:phone-in linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
    .story-card:nth-child(1){--r0:-7deg}.story-card:nth-child(3){--r0:7deg}
    .phone .screen{animation:pan linear both;animation-timeline:view();animation-range:cover}
    /* Angebote kommen von links und rechts, die Icons ploppen drauf */
    .offer{animation:slab-in linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
    .offer:nth-child(1){--x0:-2.5rem;--r0:-3deg}.offer:nth-child(2){--x0:2.5rem;--r0:3deg}
    .offer-icon{animation:icon-in linear both;animation-timeline:view();animation-range:entry 30% entry 100%}
    /* So laeuft's: Icons nacheinander, die Knetschnur rollt sich aus, der Flieger fliegt ein */
    .steps li{view-timeline-name:--step}
    .step-icon{animation:icon-in linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
    .steps li:nth-child(2) .step-icon{animation-range:entry 12% entry 92%}.steps li:nth-child(3) .step-icon{animation-range:entry 24% entry 100%}
    .steps li:nth-child(4) .step-icon{animation-name:fly-in;animation-range:entry 20% cover 45%}
    .steps li:not(:last-child)::after{transform-origin:left center;animation:rope linear both;animation-timeline:--step;animation-range:entry 60% cover 50%}
    /* Kurs-Szene kippt sanft ins Bild */
    .course-art{animation:tilt-in linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
    /* Am Ende: der Boden kommt hoch, die beiden winken */
    .ground{animation:ground-up linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
  }
}
@keyframes jelly{0%{scale:1 1}30%{scale:1.06 .92}55%{scale:.97 1.04}80%{scale:1.01 .99}100%{scale:1 1}}
@keyframes plop{0%{opacity:0;scale:.6}60%{opacity:1;scale:1.06 .95}100%{opacity:1;scale:1}}
@keyframes bob{from{transform:none}to{transform:translateY(9px) rotate(1.6deg)}}
@keyframes drift{from{translate:0 var(--f,2rem)}to{translate:var(--tx,0) var(--t,-3rem)}}
@keyframes hero-drift{to{translate:0 14vh;scale:1.04}}
@keyframes pop-in{from{opacity:0;scale:.7;translate:0 1.5rem}to{opacity:1;scale:1;translate:0 0}}
@keyframes squish-in{0%{opacity:0;scale:.86 1.14;translate:0 1.5rem}65%{opacity:1;scale:1.04 .96;translate:0 0}100%{opacity:1;scale:1}}
@keyframes phone-in{from{opacity:0;translate:0 3rem;rotate:var(--r0,0deg)}to{opacity:1;translate:0 0;rotate:0deg}}
@keyframes pan{from{object-position:35% 50%}to{object-position:65% 50%}}
@keyframes slab-in{from{opacity:0;translate:var(--x0,0) 2rem;rotate:var(--r0,0deg)}to{opacity:1;translate:0 0;rotate:0deg}}
@keyframes icon-in{0%{opacity:0;scale:.2;rotate:-18deg}70%{opacity:1;scale:1.1;rotate:5deg}100%{opacity:1;scale:1;rotate:0deg}}
@keyframes fly-in{from{opacity:0;translate:-35vw 2.5rem;rotate:-14deg}to{opacity:1;translate:0 0;rotate:0deg}}
@keyframes rope{from{scale:0 1}to{scale:1 1}}
@keyframes tilt-in{from{opacity:0;scale:.9;rotate:-2.5deg}to{opacity:1;scale:1;rotate:0deg}}
@keyframes ground-up{from{translate:0 35%}to{translate:0 0}}

/* ---------- Handy (Joost 28.09.: "Handy nochmal optimieren") ----------
   Geschichten als Wisch-Karussell statt drei Handys untereinander, Ablauf als 2x2, engere Abstaende. */
.swipe-hint{display:none}
@media (max-width:47.99rem){
  .story-grid{grid-auto-flow:column;grid-auto-columns:74%;gap:.75rem;max-width:none;margin:2rem -1rem 0;padding:.5rem 13% 1rem;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}
  .story-grid::-webkit-scrollbar{display:none}
  .story-card{scroll-snap-align:center}
  .phone{width:100%}
  .swipe-hint{display:block;margin:.25rem 0 0;text-align:center;font:600 .8125rem/1 var(--round);letter-spacing:.04em;color:var(--clay-ink)}
  .swipe-hint::before{content:"\2190  "}.swipe-hint::after{content:"  \2192"}
  .stories{padding-top:5.5rem;padding-bottom:3rem}
  .shop,.brands,.course{padding-top:3.5rem;padding-bottom:3.5rem}
  .offer-grid{margin-top:4rem}
  .steps{grid-template-columns:1fr 1fr;gap:1.75rem .75rem;margin-top:2rem}
  .step-icon{height:3.75rem;max-width:6.5rem;margin-bottom:.6rem}
  .step-text{font-size:.875rem;max-width:11rem}
  .course-art{margin:1.5rem auto}
  .site-footer{padding-top:2.25rem}
  /* Wolken am Uebergang: weniger Hub, damit sie nicht in die Zahlen rutschen */
  .c1{top:-2.5rem}.c1{--t:-1.5rem}.c2{--t:-1rem;--tx:1rem}
  /* Tafeln am Handy nur von unten: seitlicher Start ragte ueber den Rand, Chrome zoomte die Seite dafuer heraus */
  .offer:nth-child(1),.offer:nth-child(2){--x0:0;--r0:0deg}
}
/* Nichts Dekoratives darf die Seite seitlich verbreitern (Wolken, Einflug-Animationen) */
main{overflow-x:clip}
@media (max-width:47.99rem) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    /* im Karussell: das mittlere Handy gross, die seitlichen kleiner und blasser (Wischbewegung steuert es) */
    .story-card{animation:focus-x linear both;animation-timeline:view(inline);animation-range:cover}
    .phone .screen{animation:none}
  }
}
@keyframes focus-x{0%{scale:.84;opacity:.55}50%{scale:1;opacity:1}100%{scale:.84;opacity:.55}}

/* 404: Seite zerdrueckt */
.nf{color:var(--deep);min-height:100dvh;display:grid;place-content:center;justify-items:center;gap:.25rem;text-align:center;padding:2rem 1rem}
.nf-cloud{width:min(16rem,60vw);height:auto;margin-bottom:1rem;filter:drop-shadow(0 10px 12px rgba(28,24,20,.15))}
.nf h1{margin:0;font:700 clamp(1.8rem,6vw,2.6rem)/1.15 var(--round);text-shadow:0 1px 0 rgba(255,255,255,.35)}
.nf p{margin:.25rem 0 1rem}
@media (prefers-reduced-motion:no-preference){.nf-cloud{animation:bob 7s ease-in-out infinite alternate}}

/* Kontaktformular (04.10.2026): 16px gegen iOS-Zoom, Felder mind. 44px hoch */
.form{display:grid;gap:1rem;margin-top:1rem}
.form label{display:grid;gap:.35rem;font-weight:600;font-size:.9375rem}
.form input,.form textarea{font:inherit;font-weight:400;font-size:1rem;color:var(--ink);background:#fff;border:1.5px solid #CFD5DE;border-radius:.75rem;padding:.7rem .9rem;min-height:2.75rem}
.form textarea{min-height:9rem;resize:vertical}
.form input:focus-visible,.form textarea:focus-visible{outline:3px solid var(--deep);outline-offset:2px}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .hint{font-size:.875rem;color:var(--soft);margin:0}
.form .btn{justify-self:start;background:transparent;cursor:pointer}
.course .form{max-width:24rem;margin:0 auto;text-align:left}
.course .form .btn{justify-self:center}
.course .form a{color:var(--deep);text-underline-offset:2px}
.legal a:not(.btn,.lang){color:var(--deep);text-underline-offset:2px}

/* Sprachwechsel oben rechts (Joost 06.10.2026: zwischen Deutsch und Englisch wechseln) */
.lang{position:absolute;top:max(.75rem,env(safe-area-inset-top));right:.75rem;z-index:5;display:inline-flex;align-items:center;min-height:2.75rem;padding:0 1.1rem;
  border-radius:999px;background:var(--pill);color:#fff;font:600 .9375rem/1 var(--round);text-decoration:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.lang:hover{background:var(--pill-hover)}
.lang:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* Erdreise (Stand 14.10.2026, dritte Fassung, Plan von Joost abgenommen): Die beiden graben sich von der Wiese bis zum
   Erdkern. Jeder Abschnitt liegt in einer gegrabenen Kammer statt auf einer weissen Karte, schmale Gaenge verbinden die
   Kammern. Wiese und Erdschnitt sind ein Bild (img/erd/wiese), unten ein durchgehendes Bild von Fels ueber Magma bis
   zum Erdkern (deep_quer / deep_hoch). Dazwischen Knet-Texturen mit weichen Ueberblendungen, Fossilien im Gesteinsbild. */
.meadow{position:relative;line-height:0;overflow:hidden;background:var(--sky-low)} /* gleicher Ton wie das Ende des Himmels */
.meadow .ground{width:100%;margin:0}
.layer{--pt:clamp(7rem,16vw,12rem);--pb:clamp(4rem,8vw,6.5rem);--blend:clamp(5rem,12vw,10rem);position:relative;padding:var(--pt) .75rem var(--pb)}
@media (min-width:48rem){.layer{padding-left:1.5rem;padding-right:1.5rem}}
/* Kammer: helle Knetwand, unregelmaessig rund, oben ein nach innen gedrueckter Schatten wie gegraben */
.layer>.paper{position:relative;z-index:2;max-width:72rem;margin:0 auto;overflow:hidden;color:var(--ink);
  background:#F6E9DA url(img/clay/texture.webp) 0 0/420px;background-blend-mode:soft-light;
  border-radius:3.2rem 2.6rem 3rem 2.4rem / 2.6rem 3.1rem 2.5rem 3.2rem;
  box-shadow:inset 0 16px 24px -8px rgba(45,28,16,.55),inset 0 -6px 12px -6px rgba(255,255,255,.4),0 0 0 3px rgba(30,18,10,.22),0 18px 30px -18px rgba(0,0,0,.45)}
.layer>.stories{padding-top:3.25rem}
.layer-topsoil{background:#5a4134 url(img/erd/T1.webp) 0 0/260px}
.layer-clay{background:#cd9158 url(img/erd/T2.webp) 0 0/260px}
.layer-cave{--pt:clamp(.75rem,2vw,1.5rem);background:#4f5c68 url(img/erd/T4.webp) 0 0/260px}
.layer-deep{--pt:clamp(3.5rem,8vw,6rem);padding-bottom:0;background:#4f5c68 url(img/erd/T4.webp) 0 0/260px}
/* weiche Ueberblendung: die Textur der unteren Schicht laeuft nach oben aus (Kacheln deckungsgleich).
   Nur oberhalb der Kante, damit die Maske an der Kante schon voll deckt (sonst Sprung von halb auf ganz = harte Linie) */
.layer-topsoil::before,.layer-clay::before,.layer-cave::before{content:"";position:absolute;left:0;right:0;top:calc(var(--blend) * -1);height:var(--blend);
  background:inherit;background-position:0 var(--blend);pointer-events:none;
  -webkit-mask:url(img/erd/grenze.png) 0 0/600px 100% repeat-x;mask:url(img/erd/grenze.png) 0 0/600px 100% repeat-x} /* Grenze mit Knet-Flecken, wie echte Bodenschichten */
/* zweite Kammer in derselben Schicht (Shop -> Shaped by you) */
.layer>.paper+.paper{margin-top:clamp(3.5rem,8vw,6rem)}
.deco{position:absolute;inset:0;z-index:1;pointer-events:none}
/* Gesteinsschicht ohne Kammer: Fossilien stecken im Bild; die Hoehle folgt direkt darunter */
.layer-rock{padding:0;background:linear-gradient(#cd9158,#3a4048)}
.strata{display:block;width:100%;height:auto;-webkit-mask-image:linear-gradient(transparent 0,#000 6%,#000 93%,transparent 100%);mask-image:linear-gradient(transparent 0,#000 6%,#000 93%,transparent 100%)}
.cave-scene{position:relative;z-index:2;display:block;width:min(100%,56rem);height:auto;margin:0 auto clamp(1.5rem,4vw,2.5rem);filter:drop-shadow(0 20px 26px rgba(0,0,0,.45))}
/* Ganz unten: ein Bild von Fels ueber Magma bis zum Erdkern, randlos */
.deep{position:relative;line-height:0;margin:clamp(2.5rem,7vw,5rem) -.75rem 0}
@media (min-width:48rem){.deep{margin-left:-1.5rem;margin-right:-1.5rem}}
.deep-img{display:block;width:100%;height:auto;-webkit-mask-image:linear-gradient(transparent 0,#000 9%);mask-image:linear-gradient(transparent 0,#000 9%)}
/* Fusszeile auf dem Gluehen des Erdkerns: oben genau die Farbe der Bildunterkante */
.site-footer.layer-core{padding:2.75rem 1rem 2.75rem;background:linear-gradient(#E0F2FE,#CFE8FB);box-shadow:inset 0 10px 18px -10px rgba(16,43,92,.35)} /* zurueck im Himmel */
.site-footer.layer-core .legal-row a{color:var(--ink)}
.foot-main{gap:.6rem;margin:0 auto 1.25rem}
.site-footer .legal-row a[href^="mailto"]{font-weight:600}
.to-sky{margin-top:1rem}
/* Fan-Kammer "Shaped by you" */
.fans{padding:3rem 1.25rem 2.75rem;text-align:center}
.fan-grid{display:grid;gap:1rem;max-width:52rem;margin:2rem auto 0}
@media (min-width:40rem){.fan-grid{grid-template-columns:1fr 1fr}}
.fan-card{background:#fff;border-radius:1.25rem;padding:1.5rem 1.25rem;box-shadow:var(--knet, 0 10px 20px -12px rgba(16,43,92,.5))}
.fan-card h3{margin:0 0 .5rem;font:600 1.375rem/1.2 var(--round);color:var(--ink)}
.fan-card p{margin:0;font-size:.9375rem;line-height:1.5}
.fan-card.form{text-align:left;gap:.85rem;margin:0}
.fan-card.form .btn{justify-self:start}
.fan-card textarea{min-height:7rem}
.fan-hint{max-width:40rem;margin:1.25rem auto 0}
.fan-hint a{color:var(--deep);text-underline-offset:2px}
/* Abstimmung (Namens-Finale): Antworten als Pillen */
.poll{border:0;margin:0;padding:0;min-width:0;display:grid;gap:.5rem}
.poll legend{padding:0;margin:0 0 .5rem;font-weight:700}
.form .poll-opt{display:flex;align-items:center;gap:.65rem;min-height:2.75rem;padding:.5rem 1rem;border:1.5px solid #CFD5DE;border-radius:999px;background:#fff;cursor:pointer}
.form .poll-opt input{width:1.2rem;height:1.2rem;min-height:0;margin:0;padding:0;border:0;accent-color:var(--clay)}
.form .poll-opt img{width:2.75rem;height:2.75rem;border-radius:50%;object-fit:cover;margin:-.25rem 0}
@media (min-width:30rem){.poll.fav{grid-template-columns:1fr 1fr}.poll.fav legend{grid-column:1/-1}}
.form .poll-opt:has(input:checked){border-color:var(--clay);box-shadow:0 0 0 1px var(--clay)}
.form .poll-opt:has(input:focus-visible){outline:3px solid var(--deep);outline-offset:2px}
.fan-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.25rem}
.fan-actions a{display:inline-flex;align-items:center;min-height:2.75rem;color:var(--deep);font-weight:600;text-underline-offset:2px}
/* Ergebnisseite /mitmachen (functions/mitmachen.js) */
.poll-result{list-style:none;margin:1rem 0 .5rem;padding:0;display:grid;gap:1rem}
.poll-result li{display:grid;grid-template-columns:1fr auto;gap:.4rem .75rem;font-weight:600}
.poll-result progress{grid-column:1/-1;width:100%;height:.9rem;-webkit-appearance:none;appearance:none;border:0;border-radius:999px;background:var(--sky-low);overflow:hidden}
.poll-result progress::-webkit-progress-bar{background:var(--sky-low);border-radius:999px}
.poll-result progress::-webkit-progress-value{background:var(--clay);border-radius:999px}
.poll-result progress::-moz-progress-bar{background:var(--clay);border-radius:999px}
/* Am Himmel statt der Wolke vor dem Jungen: ein kleiner Knet-Rabe */
.raven{position:absolute;width:clamp(3.5rem,8vw,6.5rem);height:auto;left:18%;top:2.5rem;rotate:-6deg;filter:drop-shadow(0 8px 10px rgba(28,24,20,.15))}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .cave-scene{animation:tilt-in linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
    .raven{animation:fly linear both;animation-timeline:view();animation-range:cover}
  }
}
@keyframes fly{from{translate:-6vw 1.5rem}to{translate:10vw -1.5rem}}
/* Link-Seite: Eintrag fuer Marken mit Unterzeile */
.links .biz{flex-direction:column;gap:.2rem;line-height:1.15;min-height:4rem}
.links .biz small{font:500 .8125rem/1.2 var(--round);opacity:.9}

/* Link-Seite: Shop als Bildkarte statt Knopf (15.10.2026) */
.links a.card{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:.15rem;padding:0 0 1rem;border:0;border-image:none;background:#fff;color:var(--ink);text-shadow:none;border-radius:1.5rem;overflow:hidden;text-align:center}
.links a.card img{display:block;width:100%;height:auto;margin-bottom:.6rem}
.links a.card b{font:600 1.0625rem/1.2 var(--round)}
.links a.card small{font:500 .875rem/1.35 var(--round);padding:0 1.25rem;opacity:.85}
.links a.card:focus-visible{border-radius:1.5rem}
@media (prefers-reduced-motion:no-preference){.links li:nth-child(7){animation-delay:.62s}}