/* Clayrified Link-Seite. Farben vom Himmel in den Motiven gemessen (Handy oben #5189a8, Bildkante #6b9fb8; Desktop oben #4482a0). */
@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:#c57150;--clay-ink:#a5553a;--sky-top:#5189a8;--sky-mid:#6b9fb8;--sky-low:#92b4c2;--ink:#1c1814;--sun:#ffd000;--pill:rgba(46,74,98,.5);--pill-hover:rgba(46,74,98,.66);--line:rgba(255,255,255,.2);--paper:#fbf6ea;--soft:#5e564c}
*{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:#fff;
  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}
.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:500;letter-spacing:.01em;opacity:.92}
.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,.links .soon{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}
.links .soon{opacity:.6}
.foot{margin-top:2.25rem;text-align:center;font-size:.8125rem;opacity:.78}
.foot a{color:#fff;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:2.75rem;padding:0 .5rem}
/* Desktop: breites Motiv über die ganze Breite, Buttons darunter */
@media (min-width:56rem){
  body{background:linear-gradient(180deg,#4482a0 0,#6d9fb6 44rem,var(--sky-low) 100%)}
  .hero{height:min(68vh,44rem);object-fit:cover;object-position:50% 50%;
    -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:#fbf6ea;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{display:inline-block;margin:0 0 1rem;padding:.75rem 0;color:#fff;font-weight:600;text-underline-offset:3px}

/* 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:56rem){.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:55.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}
.hero-content .tag{text-shadow:0 1px 4px rgba(28,24,20,.35)}
.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}
.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}
.stat-num{margin:0;font-family:var(--round);font-size:clamp(1.875rem,6vw,2.5rem);font-weight:700;letter-spacing:-.01em;color:#fff;text-shadow:0 1px 4px rgba(28,24,20,.35)}
.stat-label{margin:.4rem auto 0;max-width:11rem;font-size:.8125rem;line-height:1.4;opacity:.92;text-shadow:0 1px 3px rgba(28,24,20,.3)}
@media (min-width:40rem){
  .numbers-row{grid-template-columns:repeat(4,1fr);gap:0}
  .stat{padding:0 1.5rem;border-left:1px solid var(--line);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 #e7a27f,0 5px 12px rgba(165,85,58,.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-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{padding:5rem 1rem}
.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:#fffdf8;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,#e3eef2 45%,#c3dbe5 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;min-height: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}

#work{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}
  /* Wolken schweben leise vor sich hin */
  .cloud{animation:bob 8s ease-in-out 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 infinite alternate;animation-timeline:view(),auto;animation-range:cover,normal}
    .site-footer .cloud{animation:drift linear both,bob 9s ease-in-out 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:translateY(-5px) rotate(-1deg)}to{transform:translateY(5px) rotate(1deg)}}
@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}}