/* Claromind Website-Entwurf (entwurf/), zusammengefuehrt am 29.10.2026 aus v9.css + v10.css + nav-test/nav.css.
   Ab jetzt nur noch hier aendern. Bilder und Schriften liegen weiter in ../../assets/. */

/* ============================================================
   Elternseite v9 (Entwurf 24.10.2026) — gemeinsam fuer eltern-v9*.html. Basis = v7.css, eigene Teile unten
   Vorbild: tiimoapp.com/de (Aufbau, Ruhe, Produkt-Menue, Unterseiten),
   in Claromind-Blau-Weiss und Lexend. Haengt NICHT an style.css.
   Bilder: assets/v8/ (Screens aus den echten App-Prototypen gerendert, Fotos Unsplash, 3D-Icons Fluent Emoji MIT)
   ============================================================ */

@font-face{
  font-family:'Lexend'; font-style:normal; font-weight:300 800; font-display:swap;
  src:url(/assets/lexend-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Lexend'; font-style:normal; font-weight:300 800; font-display:swap;
  src:url(/assets/lexend-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --paper:#fbfcfe;
  --white:#ffffff;
  --ink:#10203b;
  --text:#4a586f;
  --muted:#7a879b;
  --line:#e4eaf3;
  --blue:#2f6fe0;
  --blue-d:#1f4fae;
  --wash:#d9e6fd;
  --tint:#eef3fd;
  --tint-2:#f4f7fc;
  --phone:#0f1829;
  --ease:cubic-bezier(.16,1,.3,1);
  --wrap:1120px;
  --nav-h:76px;
  --shadow:0 20px 44px -18px rgba(16,32,59,.28), 0 2px 6px rgba(16,32,59,.05);
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:var(--nav-h); }
body{
  font-family:"Lexend",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--paper); color:var(--text);
  font-size:16px; line-height:1.7; font-weight:300;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
b, strong{ font-weight:500; color:var(--ink); }
h1,h2,h3{ color:var(--ink); font-weight:400; letter-spacing:-.04em; line-height:1.08; }
h1{ font-size:clamp(40px, 6vw, 72px); }
h2{ font-size:clamp(32px, 4.2vw, 52px); }
h3{ font-weight:500; letter-spacing:-.025em; }
.wrap{ width:min(var(--wrap), 100% - 48px); margin:0 auto; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:6px; }
.center{ text-align:center; }

/* ---------- Knoepfe: Pillen wie bei Tiimo ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:50px; padding:0 28px; border-radius:999px; border:1px solid transparent;
  font-family:inherit; font-weight:500; font-size:15px; line-height:1;
  text-decoration:none; cursor:pointer;
  transition:background .25s, color .25s, border-color .25s, transform .25s var(--ease), box-shadow .25s;
}
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--blue); color:#fff; }
.btn-primary:hover{ background:var(--blue-d); box-shadow:0 12px 26px -12px rgba(47,111,224,.7); }
.btn-ghost{ border-color:var(--ink); color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:#fff; }
.btn-white{ background:#fff; color:var(--blue-d); }
.btn-white:hover{ background:#eaf1ff; }
.btn-sm{ min-height:40px; padding:0 20px; font-size:14px; }
.pill{ /* Tiimo: kleiner "Mehr erfahren"-Knopf */
  display:inline-flex; align-items:center; min-height:38px; padding:0 18px; border-radius:999px;
  border:1px solid var(--ink); color:var(--ink); font-size:13.5px; font-weight:500; text-decoration:none;
  transition:background .25s, color .25s;
}
.pill:hover{ background:var(--ink); color:#fff; }
.on-blue .pill{ border-color:#fff; color:#fff; } .on-blue .pill:hover{ background:#fff; color:var(--blue-d); }

/* ---------- Kopf: Mini-Leiste + Navigation ---------- */
.topbar{ background:var(--wash); font-size:13px; }
.topbar .wrap{ display:flex; justify-content:flex-end; gap:26px; height:34px; align-items:center; }
.topbar a{ text-decoration:none; color:var(--ink); opacity:.75; }
.topbar a:hover{ opacity:1; }
.nav{ position:sticky; top:0; z-index:60; background:rgba(251,252,254,.94); border-bottom:1px solid transparent; transition:border-color .3s; }
.nav.scrolled{ border-color:var(--line); }
.nav-in{ height:var(--nav-h); display:flex; align-items:center; gap:34px; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); }
.brand img{ width:36px; height:36px; }
.brand b{ font-size:19px; font-weight:600; letter-spacing:-.03em; }
.menu{ display:flex; gap:30px; margin-left:auto; list-style:none; align-items:center; }
.menu > li{ position:relative; }
.menu > li > a, .menu > li > button{
  font:inherit; font-size:15.5px; font-weight:400; color:var(--ink); background:none; border:0; cursor:pointer;
  text-decoration:none; display:flex; align-items:center; gap:6px; height:var(--nav-h);
}
.menu > li > a:hover, .menu > li > button:hover{ color:var(--blue); }
.menu .caret{ width:14px; height:14px; transition:transform .3s var(--ease); }
.has-drop.open .caret{ transform:rotate(180deg); }
/* Produkt-Menue (Tiimo: grosses Panel mit Kurzbeschreibungen) */
.drop{
  position:absolute; top:calc(var(--nav-h) - 8px); left:50%; translate:-50% 8px;
  width:720px; background:#fff; border:1px solid var(--line); border-radius:22px;
  box-shadow:0 30px 70px -30px rgba(16,32,59,.35);
  display:grid; grid-template-columns:230px 1fr; gap:8px; padding:10px;
  opacity:0; visibility:hidden; transition:opacity .25s, translate .35s var(--ease), visibility .25s;
}
.has-drop.open .drop{ opacity:1; visibility:visible; translate:-50% 0; }
.drop-all{
  border-radius:16px; padding:22px; text-decoration:none; color:#fff;
  background:linear-gradient(160deg, #2f6fe0, #5b8ff0); display:flex; flex-direction:column; justify-content:space-between; min-height:250px;
}
.drop-all b{ color:#fff; font-size:18px; letter-spacing:-.02em; }
.drop-all p{ margin-top:8px; font-size:13.5px; line-height:1.55; opacity:.9; }
.drop-all span{ font-size:13.5px; font-weight:500; }
.drop ul{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.drop li a{ display:flex; gap:12px; padding:14px; border-radius:14px; text-decoration:none; transition:background .2s; }
.drop li a:hover{ background:var(--tint-2); }
.drop li img{ width:30px; height:30px; flex:none; }
.drop li b{ display:block; font-size:14.5px; }
.drop li span{ display:block; font-size:12.5px; line-height:1.5; color:var(--muted); margin-top:2px; }
.burger{ display:none; margin-left:auto; width:44px; height:44px; border:0; background:none; cursor:pointer; color:var(--ink); }
.burger svg{ width:24px; height:24px; }
.m-only{ display:none; }

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden; text-align:center; padding:80px 0 0;
  background:
    radial-gradient(60% 50% at 85% 10%, rgba(91,143,240,.28), transparent 70%),
    radial-gradient(50% 40% at 10% 30%, rgba(160,195,255,.35), transparent 70%),
    linear-gradient(180deg, var(--wash) 0%, #eef4fe 55%, var(--paper) 100%);
}
.hero.sub{ padding:90px 0 110px; }
.eyebrow-line{ display:inline-flex; align-items:center; gap:8px; font-size:16px; font-weight:400; color:var(--ink); }
.eyebrow-line svg{ width:18px; height:18px; color:var(--blue); }
.hero h1{ margin:18px auto 0; max-width:900px; }
.hero h1 em{ font-style:normal; color:var(--blue); }
.hero .lede{ margin:22px auto 0; max-width:600px; font-size:17px; }
.hero-cta{ margin-top:32px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.note{ margin-top:14px; font-size:13px; color:var(--muted); }

/* Telefon */
.ph{
  position:absolute; width:var(--w); border-radius:calc(var(--w) * .16);
  padding:calc(var(--w) * .03); background:var(--phone);
  box-shadow:0 50px 90px -40px rgba(16,32,59,.55), 0 12px 30px -12px rgba(16,32,59,.25);
}
.ph img{ width:100%; border-radius:calc(var(--w) * .13); }
.ph::before{ /* Dynamic Island */
  content:""; position:absolute; z-index:2; left:50%; top:calc(var(--w) * .055); translate:-50% 0;
  width:calc(var(--w) * .3); height:calc(var(--w) * .085); border-radius:999px; background:var(--phone);
}

/* Faecher im Hero: geht beim Scrollen auf (--open aus v7.js) */
.fan{ --open:.25; position:relative; margin:64px auto 0; height:500px; max-width:1100px; }
.fan .ph{
  left:50%; top:0;
  transform:
    translateX(calc(-50% + var(--x) * (.42 + .58 * var(--open))))
    translateY(calc(var(--y) * (.3 + .7 * var(--open))))
    rotate(calc(var(--r) * (1 - var(--open))));
  opacity:0; translate:0 50px; transition:opacity 1s var(--ease), translate 1.2s var(--ease);
}
.fan.in .ph{ opacity:1; translate:0 0; }
.fan .c { --w:290px; --x:0px;    --y:0px;   --r:0deg;   z-index:5; }
.fan .l1{ --w:248px; --x:-250px; --y:50px;  --r:-7deg;  z-index:4; }
.fan .r1{ --w:248px; --x:250px;  --y:50px;  --r:7deg;   z-index:4; }
.fan .l2{ --w:214px; --x:-462px; --y:104px; --r:-12deg; z-index:3; }
.fan .r2{ --w:214px; --x:462px;  --y:104px; --r:12deg;  z-index:3; }
.fan.in .l1, .fan.in .r1{ transition-delay:.08s; }
.fan.in .l2, .fan.in .r2{ transition-delay:.16s; }

/* ---------- Vertrauensleiste (Tiimo: Auszeichnungen mit Lorbeer) ---------- */
.laurels{ padding:64px 0 20px; }
.laurels h2{ text-align:center; font-size:clamp(26px, 3vw, 36px); }
.laurels ul{ list-style:none; margin-top:36px; display:flex; justify-content:center; flex-wrap:wrap; gap:18px 54px; }
.laurels li{ display:flex; align-items:center; gap:8px; color:var(--ink); }
.laurels li svg{ width:22px; height:46px; color:var(--muted); flex:none; }
.laurels li svg.r{ transform:scaleX(-1); }
.laurels li span{ font-size:13px; line-height:1.35; text-align:center; font-weight:400; }
.laurels li span b{ display:block; font-size:14.5px; font-weight:500; }

/* ---------- Abschnitte ---------- */
section{ position:relative; padding:120px 0; }
.lede-sm{ margin-top:18px; font-size:16.5px; max-width:560px; }
.on-blue{ background:var(--blue); color:rgba(255,255,255,.82); }
.on-blue h2, .on-blue h3, .on-blue b{ color:#fff; }
.soft-bg{ background:var(--tint-2); }

/* Karussell (Tiimo: "Das Toolkit fuer deinen Kopf") */
.rail-top{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.arrows{ display:flex; gap:6px; }
.arrows button{ width:44px; height:44px; border-radius:50%; border:0; background:none; color:var(--ink); cursor:pointer; display:grid; place-items:center; transition:background .2s, opacity .2s; }
.arrows button:hover{ background:var(--tint); }
.arrows button:disabled{ opacity:.3; cursor:default; background:none; }
.arrows svg{ width:22px; height:22px; }
.rail{
  margin-top:48px; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(270px, 300px); gap:22px;
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  padding:4px max(24px, (100vw - var(--wrap)) / 2) 14px;
  scroll-padding-inline:max(24px, (100vw - var(--wrap)) / 2);
}
.rail::-webkit-scrollbar{ display:none; }
.card{ scroll-snap-align:start; display:flex; flex-direction:column; align-items:flex-start; text-decoration:none; }
.card-pic{
  position:relative; width:100%; aspect-ratio:1 / 1.12; border-radius:14px; overflow:hidden;
  background:var(--bg, var(--tint)); transition:transform .6s var(--ease), box-shadow .6s var(--ease);
}
.card:hover .card-pic{ transform:translateY(-6px); box-shadow:0 26px 50px -30px rgba(16,32,59,.45); }
.card-pic > img.photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.card:hover .card-pic > img.photo{ transform:scale(1.05); }
.card-pic .ph{ --w:68%; left:16%; top:14%; transition:translate .8s var(--ease); }
.card:hover .card-pic .ph{ translate:0 -10px; }
.card h3{ margin-top:20px; font-size:19px; }
.card p{ margin-top:8px; font-size:14.5px; line-height:1.6; }
.card .pill{ margin-top:16px; }
.rail .card{ opacity:0; translate:40px 0; transition:opacity .8s var(--ease), translate .9s var(--ease); }
.rail.in .card{ opacity:1; translate:0 0; }
.rail.in .card:nth-child(2){ transition-delay:.08s; } .rail.in .card:nth-child(3){ transition-delay:.16s; }
.rail.in .card:nth-child(4){ transition-delay:.24s; } .rail.in .card:nth-child(n+5){ transition-delay:.32s; }

/* Verhalten verstehen (blau) */
.pairs{ margin-top:56px; }
.pair{ display:grid; grid-template-columns:56px 1fr 1fr; gap:28px; align-items:center; padding:22px 0; border-top:1px solid rgba(255,255,255,.2); clip-path:inset(0 100% 0 0); transition:clip-path 1.1s var(--ease); }
.pair:last-child{ border-bottom:1px solid rgba(255,255,255,.2); }
.pair.in{ clip-path:inset(0 0 0 0); }
.pair img{ width:48px; height:48px; }
.pair q{ quotes:none; font-size:18px; color:rgba(255,255,255,.72); }
.pair q::before{ content:"„"; } .pair q::after{ content:"“"; }
.pair p{ font-size:18px; color:#fff; font-weight:400; line-height:1.45; }

/* Feature-Reihen (Tiimo: Text + Bild im getoenten Feld, abwechselnd) */
.row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px, 8vw, 120px); align-items:center; }
.row + .row{ margin-top:150px; }
.row.flip > .pic{ order:-1; }
.row .lede-sm{ margin-top:20px; }
.row .pill, .row .btn{ margin-top:28px; }
.pic{ position:relative; aspect-ratio:1 / 1.02; border-radius:18px; overflow:hidden; background:var(--bg, var(--tint)); }
.pic.blue{ --bg:linear-gradient(165deg, #2f6fe0 0%, #6597f2 100%); }
.pic > img.photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pic .ph{ --w:58%; left:21%; top:12%; }
.pic .ph.tilt{ --w:56%; left:26%; top:10%; transform:rotate(8deg); }
.pic .ph.on-photo{ --w:42%; left:auto; right:7%; top:auto; bottom:-16%; transform:rotate(-5deg); }
.pic .e3d{ position:absolute; z-index:6; width:var(--s, 80px); height:var(--s, 80px); filter:drop-shadow(0 14px 18px rgba(16,32,59,.18)); }
/* Bilder oeffnen sich beim Reinscrollen */
.unfold{ clip-path:inset(12% 12% 12% 12% round 18px); transition:clip-path 1.3s var(--ease); }
.unfold > img.photo, .unfold .ph{ scale:1.1; transition:scale 1.6s var(--ease); }
.unfold.in{ clip-path:inset(0 0 0 0 round 18px); }
.unfold.in > img.photo, .unfold.in .ph{ scale:1; }

.checks{ margin-top:26px; list-style:none; display:grid; gap:12px; }
.checks li{ display:flex; gap:12px; align-items:flex-start; font-size:15.5px; }
.checks svg{ width:20px; height:20px; color:var(--blue); flex:none; margin-top:3px; }

.steps{ margin-top:90px; display:grid; grid-template-columns:repeat(4, 1fr); gap:28px; list-style:none; }
.steps li{ position:relative; padding-top:20px; }
.steps li::before{ content:""; position:absolute; left:0; right:0; top:0; height:2px; background:var(--line); }
.steps li::after{ content:""; position:absolute; left:0; top:0; height:2px; width:100%; background:var(--blue); transform:scaleX(0); transform-origin:left; transition:transform 1s var(--ease); }
.steps.in li::after{ transform:scaleX(1); }
.steps.in li:nth-child(2)::after{ transition-delay:.25s; } .steps.in li:nth-child(3)::after{ transition-delay:.5s; } .steps.in li:nth-child(4)::after{ transition-delay:.75s; }
.steps small{ font-size:13px; color:var(--muted); }
.steps b{ display:block; margin-top:4px; font-size:16.5px; }
.steps span{ display:block; margin-top:6px; font-size:14.5px; line-height:1.6; }

/* "Kommt bald" (Tiimo: "...ist zurueck!") */
.badge{ display:inline-flex; align-items:center; gap:8px; padding:6px 13px; border-radius:999px; background:var(--tint); color:var(--blue-d); font-size:13px; font-weight:500; }
.badge i{ width:8px; height:8px; border-radius:50%; background:var(--blue); animation:pulse 2.2s infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(47,111,224,.5); } 70%{ box-shadow:0 0 0 9px rgba(47,111,224,0); } 100%{ box-shadow:0 0 0 0 rgba(47,111,224,0); } }
.soon-pic{ display:grid; place-items:center; background:radial-gradient(120% 90% at 50% 20%, #5b8ff0 0%, var(--blue) 45%, #1d4fb8 100%); }
.soon-pic .ring{ position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.16); aspect-ratio:1; }
.soon-pic .icon{ width:44%; border-radius:22%; box-shadow:0 40px 70px -24px rgba(5,20,60,.6); transform:rotate(-8deg); }
.soon-pic .tag{ position:absolute; left:50%; bottom:9%; translate:-50% 0; background:#fff; color:var(--ink); border-radius:999px; padding:10px 18px; font-size:13.5px; font-weight:500; box-shadow:var(--shadow); white-space:nowrap; }

/* Grosses Foto: zieht sich beim Scrollen auf volle Breite (--p aus v7.js) */
.band-sec{ padding:0; }
.band{
  --p:0; --gap:max(24px, (100vw - var(--wrap)) / 2);
  position:relative; height:min(86vh, 760px); overflow:hidden; display:flex; align-items:flex-end;
  clip-path:inset(calc((1 - var(--p)) * 7%) calc((1 - var(--p)) * var(--gap)) round calc(24px * (1 - var(--p))));
}
.band > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 30%; scale:calc(1.15 - .15 * var(--p)); }
.band::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(10,25,55,.72) 0%, rgba(10,25,55,.2) 55%, transparent 80%); }
.band-in{ position:relative; z-index:2; width:min(var(--wrap), 100% - 48px); margin:0 auto; padding-bottom:clamp(40px, 9vh, 96px); color:#e7efff; }
.band-in h2{ color:#fff; max-width:600px; }
.band-in p{ margin-top:18px; font-size:17px; max-width:500px; }

/* FAQ (Tiimo: weisse Karte) */
.faq{ margin:52px auto 0; max-width:800px; background:#fff; border-radius:18px; padding:4px 28px; box-shadow:0 1px 0 var(--line), 0 20px 50px -40px rgba(16,32,59,.4); }
.faq details{ border-bottom:1px solid var(--line); }
.faq details:last-child{ border-bottom:0; }
.faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:22px 0; font-size:15.5px; font-weight:500; color:var(--ink); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary svg{ width:18px; height:18px; flex:none; transition:transform .35s var(--ease); }
.faq details[open] summary svg{ transform:rotate(180deg); }
.faq details p{ padding:0 40px 22px 0; font-size:15px; animation:fadein .5s var(--ease); }
@keyframes fadein{ from{ opacity:0; transform:translateY(-6px); } }

/* Abschluss (Tiimo: "Mach Schluss mit Planungsstress") */
.closing{ text-align:center; padding:140px 0 120px; }
.closing h2{ font-size:clamp(40px, 6vw, 76px); }
.closing p{ margin:22px auto 0; max-width:560px; font-size:17px; }
.closing .btn{ margin-top:34px; }

/* Footer im Verlauf (Tiimo) */
footer{
  padding:90px 0 0;
  background:
    radial-gradient(60% 60% at 90% 100%, rgba(47,111,224,.35), transparent 70%),
    linear-gradient(180deg, var(--paper) 0%, var(--wash) 100%);
}
.foot-top img{ width:84px; height:84px; }
.foot-top h3{ margin-top:16px; font-size:26px; font-weight:400; letter-spacing:-.035em; }
.foot-top p{ margin-top:8px; max-width:440px; font-size:15px; }
.foot-cols{ margin-top:44px; display:grid; grid-template-columns:repeat(4, 1fr) 1.2fr; gap:30px; }
.foot-cols h4{ font-size:14.5px; font-weight:500; color:var(--ink); }
.foot-cols ul{ list-style:none; margin-top:12px; display:grid; gap:8px; }
.foot-cols a{ text-decoration:none; font-size:14px; }
.foot-cols a:hover{ color:var(--blue); }
.foot-cols .btn{ margin-top:12px; }
.foot-bar{ margin-top:70px; background:rgba(47,111,224,.12); }
.foot-bar .wrap{ display:flex; justify-content:space-between; gap:10px 24px; flex-wrap:wrap; padding:16px 0; font-size:12.5px; color:var(--ink); opacity:.8; }

/* ---------- Ueber uns ---------- */
.team{ margin-top:56px; display:grid; grid-template-columns:repeat(3, 1fr); gap:40px; text-align:center; }
.member img{
  width:min(200px, 100%); aspect-ratio:1; margin:0 auto; border-radius:50%; object-fit:cover;
  border:5px solid #fff; box-shadow:0 0 0 1px var(--line), 0 24px 46px -22px rgba(16,32,59,.45);
  transition:transform .6s var(--ease);
}
.member:hover img{ transform:translateY(-6px) scale(1.02); }
.member h3{ margin-top:20px; font-size:20px; }
.member p{ font-size:14px; color:var(--muted); margin-top:2px; }
.member a{ display:inline-flex; margin-top:10px; color:var(--blue); font-size:13.5px; text-decoration:none; font-weight:500; }
.statement{ padding:150px 0; text-align:center; background:radial-gradient(50% 60% at 50% 50%, rgba(47,111,224,.14), transparent 70%); }
.statement img{ width:84px; height:84px; margin:0 auto; }
.statement blockquote{ margin:26px auto 0; max-width:880px; font-size:clamp(26px, 3.4vw, 40px); line-height:1.3; color:var(--ink); letter-spacing:-.03em; font-weight:400; }

/* ---------- Ressourcen ---------- */
.filters{ margin-top:30px; display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
.filters button{ font:inherit; font-size:13.5px; font-weight:500; padding:9px 18px; border-radius:999px; border:1px solid var(--ink); background:none; color:var(--ink); cursor:pointer; transition:background .2s, color .2s; }
.filters button.on, .filters button:hover{ background:var(--ink); color:#fff; }
.feat{ display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:center; background:#fff; border-radius:22px; padding:16px; box-shadow:0 1px 0 var(--line), 0 30px 60px -44px rgba(16,32,59,.45); text-decoration:none; }
.feat .art{ aspect-ratio:16/11; }
.feat .txt{ padding:20px 30px 20px 0; }
.feat h2{ font-size:clamp(28px, 3.2vw, 40px); }
.feat p{ margin-top:14px; font-size:15.5px; }
.feat .pill{ margin-top:22px; }
.art{ position:relative; border-radius:14px; overflow:hidden; background:var(--bg, var(--tint)); display:grid; place-items:center; }
.art img{ width:38%; filter:drop-shadow(0 18px 22px rgba(16,32,59,.18)); transition:transform .8s var(--ease); }
a:hover .art img{ transform:scale(1.08) rotate(-4deg); }
.grid3{ margin-top:30px; display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; }
.post{ background:#fff; border-radius:18px; padding:12px 12px 22px; text-decoration:none; display:flex; flex-direction:column; box-shadow:0 1px 0 var(--line), 0 24px 50px -44px rgba(16,32,59,.5); transition:transform .5s var(--ease); }
.post:hover{ transform:translateY(-5px); }
.post .art{ aspect-ratio:16/10; }
.post .art img{ width:34%; }
.post small{ margin:16px 10px 0; font-size:12.5px; color:var(--blue); font-weight:500; }
.post h3{ margin:6px 10px 0; font-size:18.5px; line-height:1.3; }
.post p{ margin:8px 10px 0; font-size:14px; line-height:1.6; }
.post .pill{ margin:16px 10px 0; align-self:flex-start; }
.post.hide, .feat.hide{ display:none; }

/* ---------- Einblenden ---------- */
.rev{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform 1s var(--ease); }
.rev.in{ opacity:1; transform:none; }
.bob{ animation:bob 6s ease-in-out infinite; }
.bob.d1{ animation-delay:-3s; }
@keyframes bob{ 0%,100%{ translate:0 0; } 50%{ translate:0 -10px; } }

/* ---------- Tablet ---------- */
@media (max-width:1060px){
  .fan .l2, .fan .r2{ display:none; }
  .steps{ grid-template-columns:1fr 1fr; }
  .foot-cols{ grid-template-columns:repeat(3, 1fr); }
  .grid3{ grid-template-columns:1fr 1fr; }
}

/* ---------- Handy ---------- */
@media (max-width:860px){
  :root{ --nav-h:64px; }
  body{ font-size:15.5px; }
  .topbar{ display:none; }
  .menu{ display:none; }
  .nav-in > .btn{ display:none; }
  .burger{ display:grid; place-items:center; }
  .nav.open .menu{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    position:absolute; top:var(--nav-h); left:0; right:0; max-height:calc(100dvh - var(--nav-h)); overflow:auto;
    background:#fff; border-bottom:1px solid var(--line); padding:6px 24px 20px;
  }
  .nav.open .menu > li > a, .nav.open .menu > li > button{ height:auto; padding:13px 0; font-size:17px; width:100%; justify-content:space-between; }
  .nav.open .m-only{ display:block; }
  .drop{ position:static; width:auto; translate:none; display:none; box-shadow:none; border:0; padding:0 0 8px; grid-template-columns:1fr; opacity:1; visibility:visible; }
  .has-drop.open .drop{ display:block; translate:none; }
  .drop-all{ display:none; }
  .drop ul{ grid-template-columns:1fr; }
  .drop li a{ padding:10px 6px; }

  .hero{ padding-top:56px; }
  .hero.sub{ padding:64px 0 80px; }
  .hero-cta .btn{ flex:1 1 220px; }
  .fan{ height:410px; margin-top:52px; }
  .fan .c { --w:228px; }
  .fan .l1{ --w:190px; --x:-150px; --y:44px; }
  .fan .r1{ --w:190px; --x:150px;  --y:44px; }

  section{ padding:84px 0; }
  .laurels ul{ gap:16px 26px; }
  .arrows{ display:none; }
  .rail{ grid-auto-columns:78%; gap:14px; }
  .pair{ grid-template-columns:42px 1fr; gap:4px 14px; }
  .pair img{ width:40px; height:40px; grid-row:span 2; align-self:start; }
  .pair q, .pair p{ font-size:16px; }
  .row{ grid-template-columns:1fr; gap:40px; }
  .row.flip > .pic{ order:0; }
  .row + .row{ margin-top:90px; }
  .steps{ grid-template-columns:1fr; gap:24px; margin-top:60px; }
  .band{ height:78vh; }
  .band::after{ background:linear-gradient(0deg, rgba(10,25,55,.84) 0%, rgba(10,25,55,.3) 55%, transparent 80%); }
  .faq{ padding:2px 20px; }
  .faq details p{ padding-right:0; }
  .closing{ padding:100px 0 90px; }
  .closing .btn{ width:100%; max-width:360px; }
  .foot-cols{ grid-template-columns:1fr 1fr; }
  .team{ grid-template-columns:1fr; gap:44px; }
  .statement{ padding:100px 0; }
  .feat{ grid-template-columns:1fr; gap:10px; }
  .feat .txt{ padding:10px 10px 14px; }
  .grid3{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ transition-duration:0s !important; transition-delay:0s !important; animation:none !important; }
  .rev, .rail .card, .fan .ph{ opacity:1; transform:none; translate:0 0; }
  .pair, .unfold{ clip-path:none; }
  .fan{ --open:1 !important; }
  .band{ --p:1 !important; }
}

/* =====================  v8: eigene Bausteine  ===================== */

/* Statisches Telefon (im Fluss, nicht absolut) */
.phs{ position:relative; width:var(--w, 300px); border-radius:calc(var(--w, 300px) * .16); padding:calc(var(--w, 300px) * .03); background:var(--phone);
  box-shadow:0 50px 90px -40px rgba(16,32,59,.55), 0 12px 30px -12px rgba(16,32,59,.25); }
.phs::before{ content:""; position:absolute; z-index:3; left:50%; top:calc(var(--w, 300px) * .055); translate:-50% 0; width:calc(var(--w, 300px) * .3); height:calc(var(--w, 300px) * .085); border-radius:999px; background:var(--phone); }
.phs .scr{ position:relative; aspect-ratio:900 / 1946; border-radius:calc(var(--w, 300px) * .13); overflow:hidden; background:#f2f4f8; }
.phs .scr img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; }

/* ---------- Ein Abend mit Claromind (Scroll-Geschichte, Handy bleibt stehen) ---------- */
.story-head{ text-align:center; max-width:720px; margin:0 auto; }
.story{ margin-top:30px; display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px, 7vw, 100px); }
.step{ min-height:76vh; display:flex; flex-direction:column; justify-content:center; opacity:.25; transition:opacity .6s var(--ease); }
.step.active{ opacity:1; }
.step time{ align-self:flex-start; display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px; background:var(--tint); color:var(--blue-d); font-size:13.5px; font-weight:500; }
.step time i{ width:7px; height:7px; border-radius:50%; background:var(--blue); }
.step h3{ margin-top:16px; font-size:clamp(28px, 3.2vw, 42px); font-weight:400; letter-spacing:-.04em; line-height:1.1; }
.step p{ margin-top:14px; font-size:16.5px; max-width:440px; }
.step .pill{ margin-top:22px; align-self:flex-start; }
.step .inline{ display:none; }
.stage{ position:sticky; top:calc(var(--nav-h) + 16px); height:calc(100vh - var(--nav-h) - 32px); display:grid; place-items:center; }
.stage::before{ content:""; position:absolute; inset:7% 4%; border-radius:32px;
  background:radial-gradient(70% 60% at 50% 40%, #e3ecfd 0%, #eef3fd 55%, transparent 100%); }
.stage .phs{ --w:min(310px, 27vw, calc((100vh - 200px) * .46)); }
.stage .scr img{ opacity:0; scale:1.03; transition:opacity .6s var(--ease), scale .8s var(--ease); }
.stage .scr img.on{ opacity:1; scale:1; }
.stage .dots{ position:absolute; right:2%; top:50%; translate:0 -50%; display:grid; gap:10px; }
.stage .dots i{ width:6px; height:22px; border-radius:3px; background:#d5e1f7; transition:background .4s, height .4s var(--ease); }
.stage .dots i.on{ background:var(--blue); height:40px; }

/* ---------- Warum-Abschnitt: weicher Uebergang ins Blau, Karten zum Umdrehen ---------- */
.why{
  padding:220px 0; color:rgba(255,255,255,.85);
  background:linear-gradient(180deg, var(--paper) 0%, #dbe7fd 6%, #6f9cf0 13%, #2f6fe0 20%, #2f6fe0 80%, #6f9cf0 87%, #dbe7fd 94%, var(--paper) 100%);
}
.why h2{ color:#fff; text-align:center; max-width:780px; margin:0 auto; }
.why .lede-sm{ margin:18px auto 0; text-align:center; }
.flips{ margin-top:56px; display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.turn{ all:unset; display:block; cursor:pointer; perspective:1400px; height:250px; }
.turn:focus-visible{ outline:2px solid #fff; outline-offset:4px; border-radius:22px; }
.turn-in{ position:relative; height:100%; transform-style:preserve-3d; transition:transform .9s var(--ease); }
.turn.on .turn-in{ transform:rotateY(180deg); }
@media (hover:hover){ .turn:hover .turn-in{ transform:rotateY(180deg); } }
.side{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:22px; padding:26px; display:flex; flex-direction:column; justify-content:space-between; text-align:left; }
.side.front{ background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); color:#fff; }
.side.front img{ width:46px; height:46px; }
.side.front q{ quotes:none; font-size:21px; line-height:1.3; letter-spacing:-.02em; }
.side.front q::before{ content:"„"; } .side.front q::after{ content:"“"; }
.side small{ font-size:12.5px; opacity:.75; display:flex; align-items:center; gap:6px; }
.side.back{ background:#fff; color:var(--text); transform:rotateY(180deg); box-shadow:0 30px 60px -30px rgba(5,20,60,.5); }
.side.back b{ display:block; font-size:12.5px; color:var(--blue); font-weight:500; }
.side.back p{ font-size:19px; color:var(--ink); line-height:1.4; letter-spacing:-.015em; margin-top:10px; }
.side.back small{ color:var(--muted); opacity:1; }
.ask{ height:250px; border-radius:22px; padding:26px; display:flex; flex-direction:column; justify-content:space-between; background:#fff; text-decoration:none; color:var(--ink); transition:transform .5s var(--ease); }
.ask:hover{ transform:translateY(-4px); }
.ask img{ width:52px; height:52px; }
.ask b{ font-size:21px; font-weight:400; letter-spacing:-.02em; line-height:1.3; color:var(--ink); }
.ask span{ color:var(--blue); font-size:14px; font-weight:500; }

/* ---------- Abschluss mit aufsteigenden Handys + naechsten Schritten ---------- */
.finale{ position:relative; overflow:hidden; text-align:center; padding:140px 0 0;
  background:radial-gradient(60% 50% at 50% 100%, rgba(47,111,224,.22), transparent 70%), var(--paper); }
.finale h2{ font-size:clamp(42px, 6.4vw, 82px); }
.finale .sub{ margin:22px auto 0; max-width:560px; font-size:17px; }
.finale .btn{ margin-top:34px; }
.next{ list-style:none; margin:30px auto 0; display:flex; justify-content:center; gap:10px 34px; flex-wrap:wrap; font-size:14px; color:var(--text); }
.next li{ display:flex; align-items:center; gap:10px; }
.next span{ width:26px; height:26px; border-radius:50%; background:var(--tint); color:var(--blue-d); display:grid; place-items:center; font-size:12.5px; font-weight:600; }
.risers{ margin-top:80px; height:330px; display:flex; justify-content:center; align-items:flex-start; gap:clamp(14px, 3vw, 40px); }
.risers .phs{ --w:min(250px, 26vw); translate:0 120px; opacity:0; transition:translate 1.3s var(--ease), opacity 1s var(--ease); }
.risers.in .phs{ translate:0 0; opacity:1; }
.risers .phs:nth-child(2){ margin-top:-40px; transition-delay:.12s; }
.risers .phs:nth-child(3){ transition-delay:.24s; }

@media (max-width:860px){
  .story{ grid-template-columns:1fr; margin-top:10px; }
  .stage{ display:none; }
  .step{ min-height:0; opacity:1; padding:44px 0; }
  .step .inline{ display:block; margin-top:28px; --w:min(260px, 70vw); }
  .why{ padding:150px 0; }
  .flips{ grid-template-columns:1fr; }
  .turn, .ask{ height:210px; }
  .risers{ height:240px; margin-top:60px; }
  .risers .phs:first-child, .risers .phs:last-child{ --w:30vw; }
  .risers .phs:nth-child(2){ --w:38vw; }
}
@media (prefers-reduced-motion:reduce){
  .step{ opacity:1; }
  .risers .phs{ translate:0 0; opacity:1; }
}

/* v9: fertige Handy-Aufnahmen von der Live-Seite (Rahmen ist schon im Bild) */
.ph.shot{ background:none; padding:0; box-shadow:none; border-radius:0; filter:drop-shadow(0 40px 50px rgba(16,32,59,.28)); }
.ph.shot::before{ display:none; }
.ph.shot img{ border-radius:0; }
.pic .ph.shot.paper{ --w:76%; left:12%; top:14%; transform:rotate(-3deg); }


/* ===== aus v10.css ===== */
/* v10 (27.10.2026): Ergänzungen zu v9.css. Keine Leiste über der Navigation;
   Navigation rein weiß, darunter der Hero als abgesetzte Fläche mit kleinem Rand. */
body{ background:var(--white); }
.nav{ background:rgba(255,255,255,.96); }
.hero{ margin:0 12px; border-radius:22px; }
.hero.sub{ margin:0 12px; }
@media (max-width:900px){
  .hero, .hero.sub{ margin:0 8px; border-radius:18px; }
}

/* Über uns: größerer Einleitungstext, Leiste der Quellen */
.hero .lede.lede-lg{ font-size:clamp(18px, 2vw, 21px); max-width:680px; }
.sources{ padding-top:40px; }
.src-logos{ list-style:none; margin:56px auto 0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:40px 72px; }
.src-logos li{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.src-logos img{ height:52px; width:auto; }
.src-word{ display:flex; align-items:center; height:52px; font-size:26px; font-weight:500; letter-spacing:-.03em; color:var(--ink); }
.src-logos span{ font-size:13.5px; color:var(--muted); }

/* Über uns: Warum (Eltern links, Kind rechts) */
.ab-eyebrow{ font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--blue); }
.ab-why{ padding:110px 0 100px; }
.ab-head{ text-align:center; }
.ab-why h2{ margin:14px auto 0; max-width:760px; }
.ab-sides{ margin-top:56px; display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.ab-side{ display:flex; flex-direction:column; border-radius:24px; overflow:hidden; background:var(--white); border:1px solid var(--line); }
.ab-photo{ aspect-ratio:3 / 2; overflow:hidden; }
.ab-photo img{ width:100%; height:100%; object-fit:cover; }
.ab-side-body{ flex:1; padding:30px 32px 34px; }
.ab-tag{ font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--blue); }
.ab-side q{ display:block; margin-top:12px; font-size:clamp(22px, 2.3vw, 28px); line-height:1.25; letter-spacing:-.03em; color:var(--ink); quotes:"„" "“"; }
.ab-side p{ margin-top:14px; font-size:16px; line-height:1.6; }
.ab-bridge{ margin:44px auto 0; max-width:640px; text-align:center; font-size:17px; line-height:1.6; }
.ab-bridge b{ color:var(--ink); font-weight:600; }
@media (max-width:900px){
  .ab-why{ padding:80px 0 70px; }
  .ab-sides{ grid-template-columns:1fr; }
  .ab-side-body{ padding:24px 24px 28px; }
  .src-logos img, .src-word{ height:42px; }
}

/* Navigation schrumpft beim Runterscrollen */
.nav-in{ transition:height .3s var(--ease); }
.brand img{ transition:width .3s var(--ease), height .3s var(--ease); }
.nav.scrolled .nav-in{ height:56px; }
.nav.scrolled .brand img{ width:30px; height:30px; }
@media (max-width:900px){ .nav.scrolled .nav-in{ height:52px; } }

/* Startseite: Quellen-Logos unter der Vertrauensleiste */
.src-strip{ margin:34px auto 0; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:14px 34px; text-decoration:none; color:var(--muted); font-size:13.5px; }
.src-strip img{ height:30px; width:auto; filter:grayscale(1); opacity:.7; transition:opacity .2s, filter .2s; }
.src-strip:hover img{ filter:none; opacity:1; }

/* Seite „Warum Sie Claromind vertrauen können“ */
.prose{ max-width:720px; margin:0 auto; }
.prose p{ margin-top:16px; font-size:17px; }
.prose p b{ color:var(--ink); font-weight:600; }
.num{ display:inline-grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--blue); color:#fff; font-weight:600; font-size:17px; margin-bottom:16px; }
.note-sm{ margin-top:24px; font-size:13.5px; color:var(--muted); }
.cmp{ max-width:860px; margin:44px auto 0; background:var(--white); border:1px solid var(--line); border-radius:20px; overflow:hidden; }
.cmp-r{ display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:16px; padding:16px 24px; border-top:1px solid var(--line); font-size:15px; line-height:1.45; }
.cmp-r:first-child{ border-top:0; }
.cmp-r span:first-child{ color:var(--ink); font-weight:500; }
.cmp-r span:last-child{ color:var(--blue-d); font-weight:500; }
.cmp-h{ background:var(--tint); font-weight:600; color:var(--ink); }
.cmp-h span:last-child{ color:var(--blue); }
@media (max-width:640px){
  .cmp-r{ grid-template-columns:1fr 1fr; padding:14px 16px; font-size:14px; }
  .cmp-r span:first-child{ grid-column:1 / -1; }
  .cmp-h span:first-child{ display:none; }
}

/* Startseite: zwei Versprechen (Quellen, Datenschutz) */
.usp2{ margin:48px auto 0; max-width:960px; display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.usp{ display:flex; flex-direction:column; text-decoration:none; background:var(--tint-2); border:1px solid var(--line); border-radius:22px; padding:30px 30px 28px; transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.usp:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.usp .num{ width:34px; height:34px; font-size:15px; margin-bottom:14px; }
.usp h3{ color:var(--ink); font-size:21px; line-height:1.3; letter-spacing:-.02em; font-weight:500; }
.usp p{ margin-top:10px; font-size:15.5px; line-height:1.6; flex:1; }
.usp-logos{ margin-top:20px; display:flex; align-items:center; gap:28px; }
.usp-logos img{ height:28px; width:auto; }
.usp-more{ margin-top:20px; color:var(--blue); font-weight:500; font-size:15px; }
@media (max-width:760px){ .usp2{ grid-template-columns:1fr; } .usp{ padding:24px 22px; } }
.src-block{ margin:20px auto 110px; padding:44px 24px 40px; border-radius:22px; background:var(--tint-2); }
.src-block .src-logos{ margin-top:30px; }
@media (max-width:900px){ .src-block{ margin-bottom:70px; } }

/* Datenschutz hervorgehoben: blaue Fläche (Startseite #daten, Quellen-Seite #daten) */
.data-hl{ margin:0 12px; border-radius:28px; color:#dfe9ff; background:radial-gradient(90% 70% at 85% 10%, #5b8ff0 0%, transparent 60%), linear-gradient(160deg, #2f6fe0 0%, #1d4fb8 100%); }
.data-hl h2{ color:#fff; }
.data-hl .lede-sm, .data-hl .checks li{ color:#dfe9ff; }
.data-hl .checks b{ color:#fff; }
.data-hl .checks svg{ color:#9fc0ff; }
.data-hl .num{ background:#fff; color:var(--blue); }
.data-hl .pill{ border-color:#fff; color:#fff; } .data-hl .pill:hover{ background:#fff; color:var(--blue-d); }
.data-links{ margin-top:28px; display:flex; gap:10px; flex-wrap:wrap; }
.badge-w{ display:inline-block; margin-bottom:16px; padding:6px 14px; border-radius:999px; background:rgba(255,255,255,.16); color:#fff; font-size:13px; font-weight:500; letter-spacing:.04em; }
.ink{ color:var(--ink); font-weight:600; }
.usp-blue{ background:linear-gradient(160deg, #2f6fe0 0%, #1d4fb8 100%); border-color:transparent; color:#dfe9ff; }
.usp-blue h3{ color:#fff; } .usp-blue p{ color:#dfe9ff; }
.usp-blue .num{ background:#fff; color:var(--blue); }
.usp-blue .usp-more{ color:#fff; }
@media (max-width:900px){ .data-hl{ margin:0 8px; border-radius:20px; } }

/* Datenschutz-Fläche: dunkles Navy statt Verlaufs-Blau (Bruno 29.10.) */
.data-hl{ background:var(--ink); color:#c9d4e6; }
.data-hl .lede-sm, .data-hl .checks li{ color:#c9d4e6; }
.data-hl .checks svg{ color:#7fa8f5; }
.data-hl .num, .data-hl .badge-w{ background:rgba(255,255,255,.1); color:#fff; }
.data-hl .pic{ --bg:#1b2d4f !important; }

/* Bildnachweise */
.credits{ max-width:820px; }
.credits h2{ font-size:26px; margin-top:48px; }
.credits h2:first-child{ margin-top:0; }
.credits p{ margin-top:14px; }
.cred-list{ list-style:none; margin-top:20px; display:grid; gap:14px; }
.cred-list li{ display:flex; gap:18px; align-items:center; }
.cred-list img{ width:96px; height:64px; object-fit:cover; border-radius:10px; flex:none; }
.cred-list b{ display:block; color:var(--ink); font-weight:500; }
.cred-list span{ font-size:14px; color:var(--muted); }

/* Stimmen (Eltern + Fachleute) */
.voices{ background:var(--tint-2); }
.voices-lede{ margin-left:auto; margin-right:auto; }
.demo-note{ display:inline-block; margin-left:8px; padding:2px 10px; border-radius:999px; background:#fff4d6; color:#8a5a00; font-size:12.5px; font-weight:500; vertical-align:middle; }
.voices-h{ margin:56px 0 20px; font-size:14px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--blue); }
.voices-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.voices-grid.two{ grid-template-columns:repeat(2,1fr); }
.voice{ display:flex; flex-direction:column; justify-content:space-between; gap:28px; padding:30px; border-radius:22px; background:#fff; box-shadow:0 1px 2px rgba(16,32,59,.04), 0 10px 30px -18px rgba(16,32,59,.18); }
.voice blockquote{ color:var(--ink); font-size:17.5px; line-height:1.55; font-weight:300; quotes:"„" "“"; }
.voice blockquote::before{ content:open-quote; } .voice blockquote::after{ content:close-quote; }
.voice figcaption{ display:flex; align-items:center; gap:14px; font-size:14px; color:var(--muted); line-height:1.4; }
.voice figcaption b{ display:block; color:var(--ink); font-weight:500; font-size:15px; }
.voice .av{ display:grid; place-items:center; flex:none; width:44px; height:44px; border-radius:50%; background:var(--tint); color:var(--blue-d); font-weight:500; }
.voice.pro .av{ background:var(--blue); color:#fff; }
@media (max-width:860px){
  .voices-grid, .voices-grid.two{ grid-template-columns:1fr; }
  .voice{ padding:24px; }
  .demo-note{ margin:8px 0 0; }
}

/* Datenschutz-Fläche: heller Verlauf nach Tiimo-Art (Blau mit einem Hauch Rosa), läuft in den Hintergrund aus (Bruno 29.10.) */
.data-hl{
  color:var(--text);
  background:
    linear-gradient(148deg, rgba(91,143,240,.30), transparent 62%),
    linear-gradient(330deg, rgba(255,190,215,.38) 8%, transparent 52%),
    linear-gradient(180deg, transparent 55%, var(--white) 100%),
    var(--white);
}
.data-hl h2{ color:var(--ink); }
.data-hl .lede-sm, .data-hl .checks li{ color:var(--text); }
.data-hl .checks b{ color:var(--ink); }
.data-hl .checks svg{ color:var(--blue); }
.data-hl .num{ background:var(--blue); color:#fff; }
.data-hl .badge-w{ background:rgba(47,111,224,.1); color:var(--blue-d); }
.data-hl .pill{ border-color:var(--ink); color:var(--ink); } .data-hl .pill:hover{ background:var(--ink); color:#fff; }
.data-hl .pic{ --bg:rgba(255,255,255,.7) !important; }

/* Stimme aus der Beta */
.quote-sec{ padding:110px 0 100px; }
.quote{ max-width:820px; margin:0 auto; text-align:center; }
.quote-tag{ display:inline-block; padding:5px 12px; border-radius:999px; background:#fff4d6; color:#8a6300; font-size:12.5px; font-weight:500; }
.quote blockquote{ margin-top:22px; font-size:clamp(22px, 2.6vw, 32px); line-height:1.4; letter-spacing:-.02em; color:var(--ink); font-weight:400; }
.quote figcaption{ margin-top:22px; font-size:15px; }
.quote figcaption b{ display:block; color:var(--ink); font-weight:600; }
.quote figcaption span{ color:var(--muted); }

/* Band zentriert */
.band-center{ text-align:center; }
.band-center h2, .band-center p{ margin-left:auto; margin-right:auto; }
.band-center h2{ max-width:760px; font-size:clamp(36px, 5vw, 64px); }
.band-center p{ max-width:600px; font-size:18px; }
.band-sec .band:has(.band-center)::after{ background:linear-gradient(0deg, rgba(10,25,55,.78) 0%, rgba(10,25,55,.35) 50%, rgba(10,25,55,.1) 100%); }
@media (max-width:900px){ .quote-sec{ padding:80px 0 70px; } }

/* Abschluss: weiter oben, Knopf mit Luft zum unteren Rand */
.finale{ padding:96px 0 130px; }
@media (max-width:900px){ .finale{ padding:72px 0 100px; } }

/* ============================================================
   Review Felix 29.10. nachmittags
   ============================================================ */

/* Navigation fest statt sticky. Vorher hat das Schrumpfen (76 -> 56px) das Layout verschoben, der Browser hat
   per Scroll-Anchoring zurueckgescrollt, die Nav ist wieder gewachsen ... = Flackern + wackelndes Bild.
   Jetzt liegt die Nav ueber dem Inhalt, der Platz oben ist fest reserviert. --nav-h schrumpft nur innerhalb der Nav,
   damit Menuepunkte, Produkt-Menue und Handy-Menue immer an der aktuellen Unterkante andocken. */
body{ padding-top:var(--nav-h); }
.nav{ position:fixed; top:0; left:0; right:0; background:rgba(255,255,255,.96); transition:border-color .3s, box-shadow .3s; }
.nav.scrolled{ --nav-h:56px; }
.drop{ top:calc(var(--nav-h) - 8px); transition:opacity .25s, translate .35s var(--ease), visibility .25s, top .3s var(--ease); }

/* Burger wird zum X */
.burger{ position:relative; }
.burger span{ position:absolute; left:11px; width:22px; height:2px; border-radius:2px; background:currentColor; transition:transform .4s var(--ease), opacity .2s; }
.burger span:nth-child(1){ top:15px; } .burger span:nth-child(2){ top:21px; } .burger span:nth-child(3){ top:27px; }
.nav.open .burger span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav.open .burger span:nth-child(2){ opacity:0; transform:scaleX(.2); }
.nav.open .burger span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* Produkt-Menue: Linien-Icons statt 3D-Emojis */
.drop li .di{ flex:none; width:32px; height:32px; margin:0; display:grid; place-items:center; border-radius:9px; background:var(--tint); color:var(--blue); }
.drop li .di svg{ width:17px; height:17px; }

@media (max-width:860px){
  .nav.scrolled{ --nav-h:52px; }
  .nav.open{ border-color:var(--line); background:#fff; }
  /* Handy-Menue: immer im DOM, blendet weich ein und klebt direkt unter der (auch geschrumpften) Nav */
  .menu{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    position:absolute; top:100%; left:0; right:0; max-height:calc(100dvh - var(--nav-h)); overflow:auto;
    background:#fff; border-bottom:1px solid var(--line); padding:6px 24px 22px;
    box-shadow:0 30px 40px -30px rgba(16,32,59,.3);
    opacity:0; visibility:hidden; translate:0 -8px;
    transition:opacity .25s, translate .35s var(--ease), visibility .25s;
  }
  .nav.open .menu{ opacity:1; visibility:visible; translate:0 0; }
  .menu > li > a, .menu > li > button{ height:auto; padding:13px 0; font-size:17px; width:100%; justify-content:space-between; }
  .menu > li + li{ border-top:1px solid var(--tint); }
  .menu .m-only{ display:block; }
  .nav .menu .m-only:last-child a, .nav.open .menu .m-only:last-child a{ margin-top:10px; justify-content:center; min-height:50px; border-radius:999px; background:var(--blue); color:#fff; }
}

/* Hero: am Handy randlos und ohne Rundung, unten weich in Weiss */
.hero{
  background:
    radial-gradient(60% 50% at 85% 10%, rgba(91,143,240,.28), transparent 70%),
    radial-gradient(50% 40% at 10% 30%, rgba(160,195,255,.35), transparent 70%),
    linear-gradient(180deg, var(--wash) 0%, #eef4fe 55%, var(--white) 100%);
}
/* Keine abgerundete Flaeche oben, auf keiner Seite und keiner Breite (Felix 29.10.) */
.hero, .hero.sub{ margin:0; border-radius:0; }
@media (max-width:900px){ .hero, .hero.sub{ margin:0; border-radius:0; } }


/* Karussell und naechster Abschnitt am Handy naeher zusammen */
@media (max-width:860px){ #blog{ padding-bottom:24px; } }

/* Minimalistischer: keine schwebenden 3D-Emojis auf den Bildern */
.e3d{ display:none; }

/* Datenschutz-Flaeche: randlos, laeuft oben und unten weich in Weiss aus (vorher harte Kanten + weisse Raender am Handy) */
.data-hl{
  margin:0; border-radius:0;
  background:
    linear-gradient(180deg, var(--white) 0, rgba(255,255,255,0) 140px),
    linear-gradient(0deg, var(--white) 0, rgba(255,255,255,0) 180px),
    linear-gradient(148deg, rgba(91,143,240,.26), transparent 62%),
    linear-gradient(330deg, rgba(255,190,215,.32) 8%, transparent 52%),
    var(--white);
}
@media (max-width:900px){ .data-hl{ margin:0; border-radius:0; } }

/* Keine Farbwechsel zwischen den Abschnitten: Stimmen, Abschluss und Footer auf Weiss */
.voices{ background:var(--white); }
.voices + .quote-sec{ padding-top:40px; }
.voice{ background:var(--tint-2); box-shadow:none; }
.finale{ background:var(--white); }
footer{ background:var(--white); padding-top:64px; border-top:1px solid var(--line); }
.foot-top h3{ margin-top:0; }
.foot-bar{ background:var(--tint-2); }
.foot-cols .btn{ white-space:nowrap; }
@media (max-width:860px){ #blog + section{ padding-top:48px; } }

/* Blog statt Funktions-Karussell (Startseite #blog) */
.blog-all{ align-self:center; margin-right:8px; font-size:15px; font-weight:500; color:var(--blue); text-decoration:none; white-space:nowrap; }
.blog-all:hover{ text-decoration:underline; }
.post-card .meta{ margin-top:18px; font-size:12.5px; font-weight:500; color:var(--blue); }
.post-card h3{ margin-top:6px; }
@media (max-width:860px){
  #blog .arrows{ display:flex; } #blog .arrows button{ display:none; }
  #blog .rail-top{ align-items:flex-end; }
}
/* Karten nur einblenden, nicht seitlich einfliegen: sonst rastet das Scroll-Snapping auf der verschobenen
   Position ein und das Karussell startet 40px versetzt (erste Karte links abgeschnitten) */
.rail .card{ translate:none; }

/* Eckige Knoepfe wie auf softedgeug.de (Felix + Bruno 29.10.), nur eltern-v10 (<body class="eckig">), jugend-v9 behaelt Pillen */
.eckig .btn, .eckig .btn-sm, .eckig .pill, .eckig .filters button,
.eckig .nav .menu .m-only:last-child a, .eckig .nav.open .menu .m-only:last-child a{ border-radius:4px; }
.eckig .btn-primary:hover{ box-shadow:none; }


/* ===== Navigation (aus nav-test/nav.css) ===== */
/* TEST 29.10.2026 (Felix): eine Navigation fuer beide Produkte. Ueber uns | Datenschutz | Produkte (Parents, Claromind) | Warteliste.
   Logo links: "Claromind for Parents" auf der Eltern-Seite, sonst "Claromind". Wortmarke nach der Parents-App
   (Lexend SemiBold, darunter "for Parents" klein in Brand-Blau, siehe Website-Entwuerfe/eltern-app-startscreen-2026-10-28). */
.brand{ gap:10px; }
.brand-t{ display:flex; flex-direction:column; line-height:1; }
.brand-t b{ font-size:19px; font-weight:600; letter-spacing:-.025em; color:var(--ink); }
.brand-t small{ margin-top:3px; padding-left:1px; font-size:11.5px; font-weight:500; letter-spacing:.01em; color:var(--blue); }
.nav.scrolled .brand-t small{ font-size:10.5px; }
/* Produkte: kleines Panel mit zwei Eintraegen statt der grossen Funktions-Uebersicht */
.drop.pdrop{ width:400px; display:grid; grid-template-columns:1fr; gap:2px; padding:8px; }
.pdrop a{ display:flex; gap:14px; align-items:center; padding:12px; border-radius:12px; text-decoration:none; transition:background .2s; }
.pdrop a:hover, .pdrop a.cur{ background:var(--tint-2); }
.pdrop img{ width:44px; height:44px; flex:none; border-radius:11px; }
.pdrop img.pi{ border:1px solid var(--line); }
.pdrop b{ display:block; font-size:15px; font-weight:600; color:var(--ink); }
.pdrop b em{ font-style:normal; font-weight:500; color:var(--blue); }
.pdrop span{ display:block; margin-top:2px; font-size:13px; line-height:1.45; color:var(--muted); }
.menu > li > a.cur{ color:var(--blue); }
@media (max-width:860px){
  .drop.pdrop{ width:auto; padding:0 0 8px; }
  .has-drop.open .drop.pdrop{ display:grid; }
  .pdrop a{ padding:10px 4px; }
  .pdrop img{ width:38px; height:38px; border-radius:10px; }
}

/* ===== Ecken + Footer (Felix, 29.10.2026) =====
   Ein Radius fuer alles: so rund wie die Knoepfe (4px). Keine Pillen, keine runden Karten, kein runder Produkt-Kasten.
   Ausnahmen: App-Icons und Logo (sind Bilder) und die Handy-Rahmen in den Screenshots. Neue Bausteine bekommen var(--r). */
:root{ --r:4px; }
.btn, .btn-sm, .pill, .badge-w, .filters button, .chip > span,
.drop, .drop.pdrop, .drop li a, .drop.pdrop a,
.pic, .faq, .feat, .feat .art, .post, .post .art, .ab-side, .cmp, .card, .card .art, .rail .card,
.bd-tile, .num, .steps .num, .next span, .arrows button, .voice .av, .cred-list img, .soon-pic .tag, .nav .menu a, .nav.open .menu, .stat, .usp, .quote, input, textarea, select{ border-radius:var(--r) !important; }
.pic img, .feat .art img, .post .art img, .card img{ border-radius:0; }
:focus-visible{ border-radius:var(--r); }

/* Footer: auf allen Seiten derselbe (auch Eltern-Auswahl). Ruhig, weiss, eine Linie oben. */
footer.site-foot{ background:var(--white, #fff); border-top:1px solid var(--line); padding:56px 0 0; margin:0; color:var(--text); font-family:"Lexend",-apple-system,"Segoe UI",Roboto,Arial,sans-serif; line-height:1.6; font-weight:300; }
.site-foot .sf-top{ display:flex; align-items:center; justify-content:space-between; gap:12px 32px; flex-wrap:wrap; }
.site-foot .sf-top p{ font-size:14.5px; color:var(--muted); margin:0; }
.site-foot .brand img{ width:32px; height:32px; }
.site-foot .brand b{ font-size:18px; }
.site-foot .sf-cols{ margin-top:40px; display:grid; grid-template-columns:repeat(3, 1fr) 1.3fr; gap:32px; }
.site-foot h4{ font-size:14px; font-weight:500; color:var(--ink); letter-spacing:0; margin:0; }
.site-foot ul{ list-style:none; margin:12px 0 0; padding:0; display:grid; gap:8px; }
.site-foot a{ text-decoration:none; font-size:14px; color:var(--text); }
.site-foot a:hover{ color:var(--blue); }
.site-foot .sf-cols p{ margin-top:12px; font-size:14px; max-width:280px; }
.site-foot .btn{ margin-top:14px; color:#fff; white-space:nowrap; }
.site-foot .sf-bar{ margin-top:48px; padding:18px 0 calc(18px + env(safe-area-inset-bottom)); border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:6px 24px; flex-wrap:wrap; font-size:12.5px; color:var(--muted); }
@media (max-width:860px){ .site-foot .sf-cols{ grid-template-columns:1fr 1fr; gap:28px 20px; } }
@media (max-width:420px){ .site-foot .sf-cols > div:last-child{ grid-column:1 / -1; } }