/* ============================================================
   Claromind Website, gemeinsames Stylesheet
   Blau und Weiß, eine Schrift (Lexend), große ADHS-freundliche
   Typografie, Touch-first Buttons.
   ============================================================ */
/* ---------- Lexend, selbst gehostet ----------
   EINE variable WOFF2 deckt 300-800 ab (~40 KB). Kam vorher vom
   Google-Fonts-CDN: eine US-Anfrage pro Seitenaufruf (DSGVO) plus
   zwei Verbindungsaufbauten vor dem ersten Text. */
@font-face{
  font-family:'Lexend'; font-style:normal; font-weight:300 800; font-display:swap;
  src:url(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(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{
  --ease: cubic-bezier(.16,1,.3,1);
  --paper:#ffffff;
  --soft:#f4f7fc;
  --ink:#16233d;
  --dim:#5d6b80;
  --faint:#93a0b5;
  --line:#e3e9f2;
  --blue:#2f6fe0;
  --blue-d:#1d3f8f;
  --blue-soft:#eaf1fc;
  --navy:#0e1626;
}
*{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ scroll-behavior:smooth; }
body{
  font-family:"Lexend",sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
.wrap{ width:min(1100px, calc(100% - 48px)); margin:0 auto; }

/* ---------- Nav mit Tabs ---------- */
nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:68px; gap:16px; }
.logo{ font-weight:700; font-size:20px; letter-spacing:-.02em; display:flex; align-items:center; gap:9px; min-height:44px; flex:none; }
.logo i{ width:27px; height:27px; border-radius:8px; background:var(--blue); display:inline-block; }
.nav-links{
  display:flex; align-items:center; gap:2px;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.nav-links::-webkit-scrollbar{ display:none; }
.nav-links a{
  font-size:15px; font-weight:500; color:var(--dim);
  padding:10px 14px; min-height:44px; display:inline-flex; align-items:center;
  border-radius:10px; white-space:nowrap;
}
.nav-links a:active{ background:var(--blue-soft); color:var(--blue); }
@media (hover:hover){ .nav-links a:hover{ color:var(--ink); } }
.nav-links a.on{ color:var(--blue); font-weight:600; background:var(--blue-soft); }
.nav-cta{
  background:var(--blue); color:#fff !important;
  border-radius:999px; padding:0 22px !important;
  font-weight:600 !important;
  transition:transform .2s var(--ease);
}
.nav-cta:active{ transform:scale(.94); }

/* ---------- Seiten-Hero (Unterseiten) ---------- */
.page-hero{ padding:180px 0 30px; }
.page-hero h1{
  font-size:clamp(40px,7vw,84px);
  font-weight:700; letter-spacing:-.035em; line-height:1.04;
  max-width:16ch;
}
.page-hero .lead{
  margin-top:26px;
  font-size:clamp(18px,2.4vw,23px);
  font-weight:300; color:var(--dim); line-height:1.55;
  max-width:52ch;
}
.blau{ color:var(--blue); }

/* ---------- Sektionen ---------- */
section{ padding:96px 0; position:relative; }
section.soft{ background:var(--soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.sec-kick{
  display:inline-block;
  font-size:13px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--blue);
}
h2{
  margin-top:16px;
  font-size:clamp(32px,5vw,56px);
  font-weight:700; letter-spacing:-.03em; line-height:1.08;
  max-width:20ch;
}
.sec-sub{
  margin-top:22px; color:var(--dim); font-weight:300;
  max-width:52ch; font-size:clamp(17px,2.1vw,20px); line-height:1.6;
}
.sec-sub + .sec-sub{ margin-top:16px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:56px; padding:0 34px;
  border-radius:999px;
  font-family:inherit; font-size:17px; font-weight:600;
  border:none; cursor:pointer;
  transition:transform .2s var(--ease);
}
.btn:active{ transform:scale(.95); }
.btn-blue{ background:var(--blue); color:#fff; }
.btn-ghost{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line); }
.btn-ghost:active{ background:var(--soft); }

/* ---------- ADHS-Dimensionen ---------- */
.dims{ margin-top:52px; border-top:1px solid var(--line); }
.dim-row{ padding:40px 0; border-bottom:1px solid var(--line); }
.dim-row h3{
  font-size:clamp(26px,3.6vw,40px);
  font-weight:700; letter-spacing:-.025em;
  color:var(--blue-d);
}
.dim-row p{
  margin-top:12px; color:var(--dim); font-weight:300;
  font-size:clamp(17px,2.1vw,20px); max-width:52ch;
}

/* ---------- Features (abwechselnd) ---------- */
.feat{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(36px,7vw,100px);
  align-items:center;
  padding:76px 0;
  border-top:1px solid var(--line);
}
.feat.first{ border-top:none; }
.feat.flip .feat-text{ order:2; }
@media (max-width:820px){
  .feat{ grid-template-columns:1fr; gap:30px; padding:52px 0; }
  .feat.flip .feat-text{ order:0; }
}
.feat-num{ font-size:14px; font-weight:600; letter-spacing:.18em; color:var(--blue); }
.feat h3{
  margin-top:14px;
  font-size:clamp(28px,4vw,46px);
  font-weight:700; letter-spacing:-.03em; line-height:1.1;
}
.feat p{
  margin-top:16px; color:var(--dim); font-weight:300;
  font-size:clamp(17px,2vw,19px); max-width:44ch;
}
.feat-art{
  aspect-ratio:4/3;
  border-radius:24px;
  background:var(--soft);
  border:1px solid var(--line);
  position:relative; overflow:hidden;
  display:grid; place-items:center;
}
.feat-art svg{ width:72%; height:72%; overflow:visible; }
.feat-art .st, .step-art .st{
  fill:none; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset 1.5s var(--ease);
}
.rev.in .feat-art .st, .rev.in .step-art .st{ stroke-dashoffset:0; }
.rev.in .feat-art .d2, .rev.in .step-art .d2{ transition-delay:.25s; }
.rev.in .feat-art .d3, .rev.in .step-art .d3{ transition-delay:.5s; }
.rev.in .feat-art .d4, .rev.in .step-art .d4{ transition-delay:.75s; }

/* Loop-Mikroanimationen in den Illustrationen (erst nach dem Zeichnen sichtbar) */
.feat-art .float{ animation:floaty 4.5s ease-in-out infinite; }
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }
.feat-art .pulse, .step-art .pulse{ opacity:0; }
.rev.in .feat-art .pulse, .rev.in .step-art .pulse{ animation:pulsy 2.8s ease-in-out infinite; }
.rev.in .feat-art .pulse.p2, .rev.in .step-art .pulse.p2{ animation-delay:.9s; }
.rev.in .feat-art .pulse.p3, .rev.in .step-art .pulse.p3{ animation-delay:1.8s; }
@keyframes pulsy{ 0%,100%{ opacity:.15; } 50%{ opacity:.9; } }
.feat-art .drift{ stroke-dasharray:3 9; opacity:0; transition:opacity .6s ease 1s; }
.rev.in .feat-art .drift{ opacity:1; animation:drifty 2.4s linear infinite; }
@keyframes drifty{ to{ stroke-dashoffset:-12; } }
@media (prefers-reduced-motion:reduce){
  .feat-art .float, .rev.in .feat-art .pulse, .rev.in .feat-art .drift{ animation:none; }
  .feat-art .pulse, .feat-art .drift{ opacity:.7; }
}

/* ---------- Große Statement-Sektion ---------- */
.big-statement h2{
  max-width:24ch;
  font-size:clamp(34px,5.6vw,64px);
}
.big-statement .sec-sub{ font-size:clamp(18px,2.3vw,22px); }

/* ---------- Kompakte Zeilen (Außerdem drin) ---------- */
.more{ margin-top:52px; display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(28px,5vw,70px); border-top:1px solid var(--line); }
@media (max-width:720px){ .more{ grid-template-columns:1fr; } }
.more-row{ padding:28px 0; border-bottom:1px solid var(--line); }
.more-row h3{ font-size:clamp(20px,2.4vw,25px); font-weight:600; color:var(--blue-d); letter-spacing:-.015em; }
.more-row p{ margin-top:6px; color:var(--dim); font-weight:300; font-size:16.5px; }

/* ---------- Steps ---------- */
.steps{ margin-top:52px; border-top:1px solid var(--line); counter-reset:step; }
.step{
  display:grid; grid-template-columns:90px 1fr; gap:26px;
  padding:44px 0; border-bottom:1px solid var(--line);
  counter-increment:step;
}
.step.has-art{ grid-template-columns:90px 1fr minmax(170px,230px); align-items:center; }
.step::before{
  content:counter(step, decimal-leading-zero);
  font-size:17px; font-weight:600; color:var(--blue);
  padding-top:8px;
}
.step h3{ font-size:clamp(24px,3.2vw,36px); font-weight:700; letter-spacing:-.025em; line-height:1.15; }
.step p{ margin-top:12px; color:var(--dim); font-weight:300; font-size:clamp(17px,2vw,19px); max-width:52ch; }
.step-art{
  background:var(--paper); border:1px solid var(--line); border-radius:18px;
  padding:18px;
}
section.soft .step-art{ background:var(--paper); }
.step-art svg{ width:100%; height:auto; display:block; overflow:visible; }
@media (max-width:760px){
  .step{ grid-template-columns:52px 1fr; gap:16px; }
  .step.has-art{ grid-template-columns:52px 1fr; }
  .step-art{ grid-column:2; max-width:250px; margin-top:16px; }
}

/* ---------- Pricing ---------- */
.prices{ margin-top:52px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch; }
@media (max-width:860px){ .prices{ grid-template-columns:1fr; max-width:460px; } }
.price{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:24px;
  padding:36px 32px;
  display:flex; flex-direction:column;
}
.price.pop{ border:2px solid var(--blue); position:relative; }
.price-flag{
  position:absolute; top:-14px; left:30px;
  background:var(--blue); color:#fff;
  font-size:13px; font-weight:600; letter-spacing:.08em;
  padding:6px 16px; border-radius:999px;
}
.price h3{ font-size:19px; font-weight:600; }
.price-val{ margin-top:10px; font-size:clamp(38px,4vw,48px); font-weight:700; letter-spacing:-.03em; }
.price-val span{ font-size:16px; font-weight:400; color:var(--dim); letter-spacing:0; }
.price ul{ margin:26px 0 30px; list-style:none; display:grid; gap:13px; }
.price li{
  display:flex; gap:11px; align-items:baseline;
  font-size:16px; font-weight:300; color:var(--dim);
}
.price li::before{
  content:""; flex:none; width:7px; height:7px; border-radius:50%;
  background:var(--blue); transform:translateY(-1px);
}
.price .btn{ margin-top:auto; }
.price-note{ margin-top:20px; font-size:14.5px; color:var(--faint); font-weight:300; }

/* ---------- Ehrlich-Liste ---------- */
.honest-list{ margin-top:44px; border-top:1px solid var(--line); }
.honest-row{
  display:flex; align-items:baseline; gap:20px;
  padding:30px 0; border-bottom:1px solid var(--line);
  font-size:clamp(21px,3.2vw,34px); font-weight:700; letter-spacing:-.025em; line-height:1.2;
}
.honest-row span{ color:var(--faint); font-size:14px; font-weight:500; letter-spacing:.12em; flex:none; width:38px; }
.honest-row em{ font-style:normal; color:var(--blue); }

/* ---------- Weiter-Links (große Text-Links zu Unterseiten) ---------- */
.golinks{ margin-top:52px; border-top:1px solid var(--line); }
.golink{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:34px 4px;
  border-bottom:1px solid var(--line);
  font-size:clamp(26px,4.4vw,52px);
  font-weight:700; letter-spacing:-.03em;
  min-height:44px;
  transition:padding .3s var(--ease), color .3s;
}
.golink small{ display:block; font-size:clamp(14px,1.8vw,17px); font-weight:300; color:var(--dim); letter-spacing:0; margin-top:4px; }
.golink svg{ width:clamp(26px,3.4vw,40px); height:auto; flex:none; color:var(--blue); transition:transform .3s var(--ease); }
.golink:active{ color:var(--blue); }
@media (hover:hover){
  .golink:hover{ color:var(--blue); padding-left:14px; }
  .golink:hover svg{ transform:translateX(8px); }
}

/* ---------- CTA-Box ---------- */
.cta-box{
  position:relative; overflow:hidden;
  border-radius:30px;
  padding:clamp(44px,7vw,88px);
  text-align:center;
  color:var(--ink);
  border:1px solid #cfe0fb;
  background:
    radial-gradient(70% 90% at 50% 0%, rgba(47,111,224,.16), transparent 70%),
    linear-gradient(180deg,#f2f8ff 0%, #e6effd 100%);
  box-shadow:0 34px 70px -46px rgba(24,54,120,.65);
}
.cta-box h2{ margin-left:auto; margin-right:auto; }
.cta-box .sec-sub{ margin-left:auto; margin-right:auto; color:var(--dim); }
.cta-box .sec-kick{ color:var(--blue); }
.cta-btns{ margin-top:40px; display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.cta-box .btn-ghost{ color:var(--ink); box-shadow:inset 0 0 0 1.5px #c8d9f6; background:rgba(255,255,255,.65); }
.cta-box .btn-ghost:active{ background:#fff; }
.cta-note{ margin-top:22px; font-size:14.5px; color:var(--faint); font-weight:300; }

/* ---------- Footer ---------- */
footer{ padding:56px 0 70px; border-top:1px solid var(--line); }
.foot{ display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; align-items:center; }
.foot-links{ display:flex; flex-wrap:wrap; gap:4px; }
.foot-links a{
  color:var(--dim); font-size:15px; font-weight:400;
  padding:10px 12px; min-height:44px; display:inline-flex; align-items:center; border-radius:10px;
}
.foot-links a:active{ background:var(--blue-soft); color:var(--blue); }
.foot-note{ margin-top:18px; color:var(--faint); font-size:14px; font-weight:300; }

/* ---------- Eltern-Blog (warmes Papier, offene Zeilen) ---------- */
.post-list{ margin-top:52px; border-top:1px solid #e5e1d8; }
.post-row{
  display:flex; align-items:center; justify-content:space-between; gap:28px;
  padding:42px 4px; border-bottom:1px solid #e5e1d8;
  transition:padding .3s var(--ease);
}
.post-meta{
  font-size:13.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--faint);
}
.post-row h2{
  margin-top:10px;
  font-size:clamp(24px,3.6vw,42px);
  line-height:1.12; max-width:26ch;
}
.post-row p{
  margin-top:12px; color:var(--dim); font-weight:300;
  font-size:clamp(16px,2vw,19px); max-width:56ch;
}
.post-row svg{
  width:clamp(26px,3.2vw,38px); height:auto; flex:none; color:var(--blue);
  transition:transform .3s var(--ease);
}
.post-row:active h2{ color:var(--blue); }
@media (hover:hover){
  .post-row:hover{ padding-left:14px; }
  .post-row:hover h2{ color:var(--blue); }
  .post-row:hover svg{ transform:translateX(8px); }
}

/* Blog-Artikel */
.a-hero{ padding:170px 0 10px; }
.a-hero h1{
  margin-top:14px;
  font-size:clamp(34px,5.4vw,62px);
  font-weight:800; letter-spacing:-.035em; line-height:1.06;
  max-width:24ch;
}
.a-hero .lead{
  margin-top:22px;
  font-size:clamp(18px,2.3vw,22px); font-weight:300; color:var(--dim);
  line-height:1.55; max-width:52ch;
}
.a-body{ padding:36px 0 72px; }
.a-col{ max-width:760px; }
.a-col > p{
  margin-top:22px;
  font-size:clamp(17px,2.1vw,19.5px); font-weight:300; color:#3c4658;
  line-height:1.75;
}
.a-col h2{
  margin-top:60px;
  font-size:clamp(23px,3vw,32px); line-height:1.2; max-width:none;
}
.a-col blockquote{
  margin:46px 0 10px; padding:6px 0 6px 26px;
  border-left:3px solid var(--blue);
  font-size:clamp(20px,2.7vw,27px); font-weight:600;
  letter-spacing:-.02em; line-height:1.35; color:var(--ink);
  max-width:30ch;
}
.a-col ul{ margin-top:24px; list-style:none; display:grid; gap:16px; }
/* Kein display:flex hier: das macht jedes <strong> im Listenpunkt zu einer
   eigenen Spalte, der Rest des Satzes rutscht daneben. Punkt darum absolut. */
.a-col li{
  display:block; position:relative; padding-left:21px;
  font-size:clamp(16.5px,2vw,19px); font-weight:300; color:#3c4658; line-height:1.65;
}
.a-col li::before{
  content:""; position:absolute; left:0; top:11px;
  width:8px; height:8px; border-radius:50%; background:var(--blue);
}
.a-col li strong{ font-weight:600; color:var(--ink); }
.a-note{
  margin-top:56px; padding-top:24px; border-top:1px solid #e5e1d8;
  font-size:15px; font-weight:300; color:var(--faint); max-width:66ch; line-height:1.6;
}

/* ---------- Reveals ---------- */
.rev{ opacity:0; transform:translateY(26px); transition:opacity .75s var(--ease), transform .75s var(--ease); }
.rev.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .rev{ opacity:1; transform:none; transition:none; }
  .rev .feat-art .st{ stroke-dashoffset:0; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ============================================================
   AB HIER: Bausteine der ueberarbeiteten Startseite.
   Leitgedanke: wenig Text, viel zu erkennen. Und Farbe statt Weiss —
   jede zweite Sektion traegt Licht, damit die Seite nicht kippt.
   ============================================================ */

/* ---------- Wortmarke in Nav und Footer (steht jetzt auf jeder Seite) ---------- */
.nav-wordmark{ display:block; width:142px; height:auto; }
.foot-wordmark{ display:block; width:150px; height:auto; }
@media (max-width:520px){ .nav-wordmark{ width:116px; } }

/* ---------- Licht statt Weiss: weiche Farbschleier hinter der Sektion ---------- */
section.glow{ position:relative; overflow:hidden; }
section.glow > .wrap{ position:relative; z-index:2; }
section.glow::before{
  content:""; position:absolute; inset:-25% -12%; z-index:0; pointer-events:none;
  background:
    radial-gradient(42% 50% at 12% 14%, rgba(47,111,224,.26), transparent 68%),
    radial-gradient(38% 46% at 90% 86%, rgba(104,72,224,.22), transparent 68%),
    radial-gradient(32% 38% at 70% 4%,  rgba(38,196,214,.18), transparent 70%);
}
/* Feines Punktraster — gibt Flaeche, ohne zu stoeren */
section.dots::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:radial-gradient(rgba(47,111,224,.26) 1px, transparent 1.5px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(78% 68% at 50% 50%, #000 8%, transparent 84%);
  mask-image:radial-gradient(78% 68% at 50% 50%, #000 8%, transparent 84%);
}

/* ---------- Hellblaue Sektion ----------
   Der Verlauf startet und endet in Weiss. Dadurch gibt es nie eine harte
   Kante zwischen zwei Sektionen — die Seite atmet weiss / hellblau / weiss. */
section.sky{
  position:relative; overflow:hidden; border:none;
  background:linear-gradient(180deg,
    #ffffff 0%, #f2f7ff 12%, #e4eefd 42%, #e9f2fe 66%, #f5f9ff 88%, #ffffff 100%);
}
section.sky > .wrap{ position:relative; z-index:3; }
section.sky::before{
  content:""; position:absolute; inset:-16% -10%; z-index:1; pointer-events:none;
  background:
    radial-gradient(38% 44% at 12% 22%, rgba(47,111,224,.20), transparent 66%),
    radial-gradient(34% 40% at 90% 78%, rgba(104,72,224,.15), transparent 66%),
    radial-gradient(30% 34% at 66% 10%, rgba(38,196,214,.16), transparent 68%);
}
section.sky::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.7;
  background-image:radial-gradient(rgba(47,111,224,.22) 1px, transparent 1.5px);
  background-size:30px 30px;
  -webkit-mask-image:radial-gradient(72% 62% at 50% 48%, transparent 20%, #000 96%);
  mask-image:radial-gradient(72% 62% at 50% 48%, transparent 20%, #000 96%);
}

/* Sanfter Weissabgang fuer Sektionen, die selbst keinen Verlauf tragen */
section.fade-top{ background:linear-gradient(180deg,#f3f8ff 0%, #ffffff 46%); }
section.fade-bottom{ background:linear-gradient(180deg,#ffffff 54%, #f3f8ff 100%); }

/* ---------- Mockup-Showcase: Text links, echtes Handy rechts ---------- */
.show{
  margin-top:clamp(30px,5vw,52px);
  display:grid; grid-template-columns:1fr .82fr;
  gap:clamp(28px,6vw,80px); align-items:center;
}
.show.flip .show-text{ order:2; }
@media (max-width:880px){
  .show{ grid-template-columns:1fr; gap:34px; }
  .show.flip .show-text{ order:0; }
}
.show-text h2{ margin-top:16px; }
.shot{ position:relative; justify-self:center; width:min(300px,74vw); }
.shot::before{
  content:""; position:absolute; left:50%; top:52%; width:170%; aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(47,111,224,.30), rgba(47,111,224,0) 70%);
  pointer-events:none;
}
.shot img{ position:relative; z-index:1; width:100%; display:block;
           filter:drop-shadow(0 42px 62px rgba(14,32,74,.30)); }
.shot.cut img{
  -webkit-mask-image:linear-gradient(180deg,#000 80%,transparent 99%);
  mask-image:linear-gradient(180deg,#000 80%,transparent 99%);
}

/* Kurze Merksaetze neben dem Mockup — drei Zeilen, mehr nicht */
.beats{ margin-top:28px; display:grid; gap:12px; }
.beat{ display:flex; align-items:center; gap:13px;
       font-size:clamp(16px,2vw,18.5px); font-weight:500; color:var(--ink); }
.beat i{ flex:none; width:26px; height:26px; border-radius:9px; display:grid; place-items:center;
         background:var(--blue-soft); color:var(--blue); }
.beat i svg{ width:15px; height:15px; }
section.sky .beat{ color:var(--ink); }
section.sky .beat i{ background:#dbe8fd; color:var(--blue); }

/* ---------- Kachelraster: viel erkennen, wenig lesen ---------- */
.tiles{ margin-top:clamp(32px,5vw,52px); display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:880px){ .tiles{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:430px){ .tiles{ gap:10px; } }
.tile{
  background:var(--paper); border:1px solid var(--line); border-radius:22px;
  padding:24px 22px 22px; display:flex; flex-direction:column; gap:12px; min-height:162px;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.tile .ic{ flex:none; width:46px; height:46px; border-radius:15px; display:grid; place-items:center;
           background:var(--blue-soft); color:var(--blue); }
.tile .ic svg{ width:23px; height:23px; }
.tile b{ font-size:clamp(17px,2vw,20px); font-weight:700; letter-spacing:-.02em; line-height:1.18; }
.tile span{ font-size:14.5px; font-weight:300; color:var(--dim); line-height:1.45; }
@media (hover:hover){
  .tile:hover{ transform:translateY(-4px); border-color:#c6d8f7;
               box-shadow:0 24px 46px -28px rgba(24,54,120,.6); }
}

/* ---------- Vorher / Nachher ---------- */
.vs{ margin-top:clamp(32px,5vw,52px); display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:stretch; }
@media (max-width:820px){ .vs{ grid-template-columns:1fr; } }
.vs-card{
  position:relative; overflow:hidden;
  border-radius:26px; padding:28px 26px 26px;
  border:1px solid #dbe6f7; background:rgba(255,255,255,.86);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 26px 50px -34px rgba(24,54,120,.5);
}
section.sky .vs-card > h3, .vs-card > h3{ font-size:12.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); }
.vs-card.after{ border-color:#bcd6fb; background:linear-gradient(180deg,#f4f9ff,#ffffff); }
section.sky .vs-card.after > h3, .vs-card.after > h3{ color:var(--blue); }
.vs-card .vs-line{ margin-top:14px; font-size:clamp(19px,2.6vw,25px); font-weight:700; letter-spacing:-.025em; color:var(--ink); }
.vs-art{ margin-top:22px; }
.vs-art svg{ width:100%; height:auto; display:block; overflow:visible; }
.vs-steps{ margin-top:22px; display:grid; gap:10px; }
.vs-step{
  display:flex; align-items:center; gap:12px;
  border:1px solid var(--line); border-radius:15px; background:#fff;
  padding:14px 16px; font-size:15.5px; font-weight:500; color:var(--ink);
}
.vs-step i{ flex:none; width:22px; height:22px; border-radius:50%; border:2px solid var(--blue);
            display:grid; place-items:center; color:var(--blue); }
.vs-step i svg{ width:12px; height:12px; }
.vs-step.on{ border-color:#bcd6fb; background:var(--blue-soft); }
.vs-step.on i{ background:var(--blue); border-color:var(--blue); color:#fff; }
section.sky .vs-note, .vs-note{ margin-top:18px; font-size:14.5px; font-weight:300; color:var(--faint); }

/* ---------- Das Team hinter der App ---------- */
.crew{ margin-top:clamp(34px,5vw,54px); display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2.6vw,28px); }
@media (max-width:760px){ .crew{ grid-template-columns:1fr; max-width:400px; margin-left:auto; margin-right:auto; } }
.crew-card{ text-align:center; }
.crew-card img{ width:min(180px,62%); aspect-ratio:1; border-radius:50%; display:block; margin:0 auto;
                box-shadow:0 26px 46px -26px rgba(24,54,120,.6); }
.crew-card b{ display:block; margin-top:18px; font-size:19px; font-weight:700; color:var(--ink); }
.crew-card span{ display:block; margin-top:5px; font-size:15px; font-weight:300; color:var(--dim); }

/* ---------- Claro, das Maskottchen ---------- */
.claro{ width:clamp(92px,13vw,148px); height:auto; display:block;
        animation:claroFloat 5.5s ease-in-out infinite; }
@keyframes claroFloat{ 0%,100%{ transform:translateY(0) rotate(-2.5deg); } 50%{ transform:translateY(-11px) rotate(2.5deg); } }
.claro-row{ display:flex; align-items:center; gap:clamp(18px,3vw,32px); }
@media (prefers-reduced-motion:reduce){ .claro{ animation:none; } }

/* ---------- Hub ganz unten: such dir was aus ---------- */
.hub{
  margin-top:clamp(34px,5vw,52px);
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line); border-left:1px solid var(--line);
}
@media (max-width:880px){ .hub{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .hub{ grid-template-columns:1fr; } }
.hub-item{
  position:relative; padding:28px 26px 24px;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  display:flex; flex-direction:column; min-height:170px; background:var(--paper);
  transition:background .25s var(--ease), color .25s var(--ease);
}
.hub-num{ font-size:12.5px; font-weight:600; letter-spacing:.2em; color:var(--blue); }
.hub-item h3{ margin-top:12px; font-size:clamp(21px,2.6vw,28px); font-weight:700; letter-spacing:-.025em; line-height:1.12; }
.hub-item p{ margin-top:7px; color:var(--dim); font-weight:300; font-size:15.5px; max-width:28ch; }
.hub-item svg{ margin-top:auto; align-self:flex-end; width:26px; height:26px; color:var(--blue);
               transition:transform .25s var(--ease); }
.hub-item:active{ background:var(--blue); color:#fff; }
.hub-item:active .hub-num, .hub-item:active p, .hub-item:active svg{ color:rgba(255,255,255,.85); }
@media (hover:hover){
  .hub-item:hover{ background:var(--blue); color:#fff; }
  .hub-item:hover .hub-num, .hub-item:hover p, .hub-item:hover svg{ color:rgba(255,255,255,.85); }
  .hub-item:hover svg{ transform:translateX(8px); }
}

/* ---------- Illustrationen der Unterseiten: nicht mehr flach grau ---------- */
.feat-art{
  background:linear-gradient(158deg,#edf3ff 0%,#f8fbff 52%,#e9f0fc 100%);
  border-color:#dbe6f7;
}
.feat-art::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(47,111,224,.16) 1px, transparent 1.4px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(72% 72% at 50% 50%, #000, transparent 82%);
  mask-image:radial-gradient(72% 72% at 50% 50%, #000, transparent 82%);
}
.feat-art svg{ position:relative; z-index:1; }

/* ---------- Hero der Unterseiten bekommt Licht ---------- */
.page-hero.lit{ position:relative; overflow:hidden; }
.page-hero.lit > .wrap{ position:relative; z-index:2; }
.page-hero.lit::before{
  content:""; position:absolute; inset:-40% -10% auto -10%; height:170%; z-index:0; pointer-events:none;
  /* Nach unten ausblenden, sonst schneidet das overflow:hidden des Heros
     eine sichtbare Kante in den Farbschleier. */
  -webkit-mask-image:linear-gradient(180deg,#000 46%,transparent 92%);
  mask-image:linear-gradient(180deg,#000 46%,transparent 92%);
  background:
    radial-gradient(40% 54% at 16% 32%, rgba(47,111,224,.26), transparent 68%),
    radial-gradient(36% 48% at 88% 20%, rgba(104,72,224,.22), transparent 68%),
    radial-gradient(30% 40% at 62% 84%, rgba(38,196,214,.16), transparent 70%);
}
.page-hero.lit::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:radial-gradient(rgba(47,111,224,.22) 1px, transparent 1.5px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(64% 66% at 62% 34%, #000, transparent 82%);
  mask-image:radial-gradient(64% 66% at 62% 34%, #000, transparent 82%);
}

/* ---------- Gedankenknaeuel: der Kopf um 20:14 ---------- */
.mess{ position:relative; margin-top:20px; min-height:224px; }
.mess svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.mess .tangle{
  fill:none; stroke:#9dbdf0; stroke-width:2.2; stroke-linecap:round; opacity:.85;
  stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset 2.6s var(--ease);
}
.rev.in .mess .tangle{ stroke-dashoffset:0; }
.chip{
  position:absolute; display:inline-flex; align-items:center;
  padding:9px 14px; border-radius:12px;
  font-size:14px; font-weight:600; white-space:nowrap;
  background:#fff; border:1px solid #d3e1f7; color:var(--dim);
  box-shadow:0 10px 22px -16px rgba(24,54,120,.7);
  animation:jit 7s ease-in-out infinite;
}
.chip:nth-child(3){ animation-delay:-1.2s; }
.chip:nth-child(4){ animation-delay:-2.4s; }
.chip:nth-child(5){ animation-delay:-3.6s; }
.chip:nth-child(6){ animation-delay:-4.8s; }
.chip:nth-child(7){ animation-delay:-6s; }
@keyframes jit{ 0%,100%{ translate:0 0; } 50%{ translate:0 -6px; } }
@media (max-width:560px){ .chip{ font-size:12.5px; padding:7px 11px; } .mess{ min-height:250px; } }
@media (prefers-reduced-motion:reduce){ .chip{ animation:none; } }

/* ---------- Lernprofil-Balken ---------- */
.prof{ margin-top:28px; display:grid; gap:18px; max-width:460px; }
.prof-row b{ font-size:15.5px; font-weight:600; }
.prof-row em{ float:right; font-style:normal; font-size:14px; font-weight:500; color:var(--dim); }
.prof-bar{ margin-top:9px; height:10px; border-radius:999px; background:var(--blue-soft); overflow:hidden; }
.prof-bar i{
  display:block; height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg, var(--blue), #26c4d6);
  transition:width 1.2s var(--ease) .2s;
}
.rev.in .prof-bar i{ width:var(--w); }

/* ---------- „Zwingt dich zu nichts" darf leiser sein ---------- */
.honest-list.tight{ margin-top:32px; }
.honest-list.tight .honest-row{
  font-size:clamp(17px,2.2vw,25px); padding:21px 0;
}

/* Lernprofil auf dunklem Grund */
section.sky .prof-row b{ color:var(--ink); }
section.sky .prof-row em{ color:var(--dim); }
section.sky .prof-bar{ background:#dbe8fd; }

/* ============================================================
   GLOBALE GROESSENKORREKTUR — 2026-08-26
   Alles war eine Nummer zu gross geraten. Dieser Block zieht den
   Typo- und Abstandsmassstab zurueck. Steht bewusst als ein Stueck
   ganz am Ende: einmal loeschen und der alte Massstab ist zurueck.
   ============================================================ */

/* --- Abstaende --- */
section{ padding:66px 0; }
.page-hero{ padding:124px 0 24px; }
.a-hero{ padding:120px 0 8px; }
footer{ padding:44px 0 54px; }

/* --- Ueberschriften --- */
.page-hero h1{ font-size:clamp(30px,4.2vw,50px); }
.page-hero .lead{ margin-top:18px; font-size:clamp(16px,1.9vw,19px); }
h2{ margin-top:12px; font-size:clamp(26px,3.4vw,40px); }
.sec-kick{ font-size:12px; }
.sec-sub{ margin-top:16px; font-size:clamp(16px,1.8vw,18px); }
.big-statement{ padding-top:76px; padding-bottom:76px; }
.big-statement h2{ font-size:clamp(28px,4vw,46px); max-width:24ch; }
.big-statement .sec-sub{ font-size:clamp(16px,1.9vw,19px); }

/* --- Buttons --- */
.btn{ min-height:48px; padding:0 26px; font-size:16px; }

/* --- Features / Steps / Preise auf den Unterseiten --- */
.feat{ padding:52px 0; }
.feat h3{ font-size:clamp(22px,3vw,34px); }
.feat p{ margin-top:13px; font-size:clamp(16px,1.8vw,17.5px); }
.feat-num{ font-size:13px; }
.step{ padding:32px 0; }
.step h3{ font-size:clamp(20px,2.6vw,28px); }
.step p{ margin-top:9px; font-size:clamp(16px,1.8vw,17.5px); }
.dim-row{ padding:30px 0; }
.dim-row h3{ font-size:clamp(22px,3vw,32px); }
.more-row{ padding:22px 0; }
.more-row h3{ font-size:clamp(18px,2vw,21px); }
.price{ padding:28px 26px; }
.price-val{ font-size:clamp(30px,3.2vw,38px); }
.golink{ padding:26px 4px; font-size:clamp(20px,3vw,34px); }
.golink small{ font-size:clamp(13px,1.5vw,15px); }
.post-row{ padding:32px 4px; }
.post-row h2{ font-size:clamp(21px,2.8vw,32px); }
.honest-row{ padding:22px 0; font-size:clamp(17px,2.4vw,26px); }
.cta-box{ padding:clamp(34px,5vw,64px); border-radius:24px; }
.cta-btns{ margin-top:30px; }

/* --- Bausteine der Startseite --- */
.show{ margin-top:26px; gap:clamp(24px,4vw,56px); }
.shot{ width:min(238px,60vw); }
.beats{ margin-top:22px; gap:10px; }
.beat{ font-size:clamp(15px,1.7vw,16.5px); }
.beat i{ width:23px; height:23px; border-radius:8px; }
.beat i svg{ width:13px; height:13px; }
.crew{ margin-top:34px; }
.crew-card img{ width:min(132px,48%); }
.crew-card b{ margin-top:14px; font-size:17px; }
.crew-card span{ font-size:14px; }
.claro{ width:clamp(70px,8.5vw,104px); }
.tiles{ margin-top:30px; gap:12px; }
.tile{ min-height:134px; padding:20px 18px 18px; border-radius:18px; gap:10px; }
.tile .ic{ width:38px; height:38px; border-radius:12px; }
.tile .ic svg{ width:19px; height:19px; }
.tile b{ font-size:clamp(16px,1.8vw,18px); }
.tile span{ font-size:13.5px; }
.vs{ margin-top:30px; gap:14px; }
.vs-card{ padding:22px 20px 20px; border-radius:20px; }
.vs-card .vs-line{ margin-top:11px; font-size:clamp(17px,2.1vw,21px); }
.vs-art, .vs-steps, .mess{ margin-top:16px; }
.vs-step{ padding:11px 14px; font-size:14.5px; border-radius:13px; }
.mess{ min-height:186px; }
.chip{ font-size:13px; padding:7px 12px; }
.prof{ margin-top:22px; gap:14px; }
.prof-row b{ font-size:14.5px; }
.prof-row em{ font-size:13px; }
.prof-bar{ margin-top:7px; height:8px; }
.hub{ margin-top:30px; }
.hub-item{ min-height:140px; padding:22px 20px 18px; }
.hub-item h3{ margin-top:10px; font-size:clamp(19px,2.1vw,23px); }
.hub-item p{ font-size:14.5px; }
.hub-item svg{ width:22px; height:22px; }
.stats{ margin-top:34px; }
.stat{ padding:26px 0 8px; }
.stat strong{ font-size:clamp(38px,4.6vw,58px); }
.stat em{ font-size:clamp(15px,1.7vw,17px); }
.stat p{ font-size:15px; }

@media (max-width:560px){
  section{ padding:52px 0; }
  .page-hero{ padding:104px 0 16px; }
  .mess{ min-height:230px; }
  .chip{ font-size:12px; padding:6px 10px; }
}

/* ============================================================
   Verzierungen, Claro und neue Bausteine (hellblauer Stil)
   ============================================================ */

/* --- Der Strich aus dem Pitchdeck als wiederkehrendes Zeichen --- */
.tick{ display:block; flex:none; width:42px; height:5px; border-radius:3px; background:var(--blue); }
.kickrow{ display:flex; align-items:center; gap:14px; }

/* --- Ecken-Ornamente: feine Neuronenfaeden --- */
.orn{ position:absolute; z-index:1; pointer-events:none; color:#b9d1f6; }
.orn svg{ width:100%; height:auto; display:block; overflow:visible; }
.orn path, .orn circle{ vector-effect:non-scaling-stroke; }
.orn{ opacity:.75; }
.orn-tr{ top:7%; right:1.5%; width:min(190px,20vw); }
.orn-bl{ bottom:7%; left:1.5%; width:min(180px,19vw); }
@media (max-width:1180px){ .orn{ opacity:.5; } }
@media (max-width:760px){ .orn{ display:none; } }

/* --- Claro lebt --- */
.claro-wrap{ position:relative; display:inline-block; flex:none; }
.claro-wrap::before{
  content:""; position:absolute; left:50%; top:56%; width:180%; aspect-ratio:1;
  transform:translate(-50%,-50%); pointer-events:none;
  background:radial-gradient(closest-side, rgba(47,111,224,.30), rgba(47,111,224,0) 70%);
  animation:claroGlow 4.2s ease-in-out infinite;
}
.claro{ position:relative; z-index:1; animation:claroFloat 6s ease-in-out infinite; transform-origin:50% 90%; }
@keyframes claroFloat{
  0%   { transform:translateY(0)     rotate(-3deg) scale(1); }
  22%  { transform:translateY(-9px)  rotate(2.5deg) scale(1.03); }
  48%  { transform:translateY(-13px) rotate(-1deg) scale(1); }
  74%  { transform:translateY(-5px)  rotate(3deg)  scale(.985); }
  100% { transform:translateY(0)     rotate(-3deg) scale(1); }
}
@keyframes claroGlow{ 0%,100%{ opacity:.55; transform:translate(-50%,-50%) scale(1); }
                      50%   { opacity:1;   transform:translate(-50%,-50%) scale(1.12); } }
@keyframes claroPop{ 0%{ transform:scale(1) rotate(-3deg); } 35%{ transform:scale(1.14) rotate(6deg); }
                     70%{ transform:scale(.96) rotate(-4deg); } 100%{ transform:scale(1) rotate(-3deg); } }
@media (hover:hover){ .claro-wrap:hover .claro{ animation:claroPop .7s var(--ease); } }
@media (prefers-reduced-motion:reduce){ .claro, .claro-wrap::before{ animation:none; } }

/* --- Der Friedhof: was alles nicht funktioniert hat --- */
.dead{ margin-top:26px; display:flex; flex-wrap:wrap; gap:10px; max-width:640px; }
.dead span{
  position:relative; display:inline-flex; align-items:center;
  padding:11px 17px; border-radius:999px;
  border:1px solid var(--line); background:#fff; color:var(--faint);
  font-size:15px; font-weight:600;
}
.dead span::after{
  content:""; position:absolute; left:12px; right:12px; top:50%;
  height:2px; border-radius:2px; background:#c2d2e8;
  transform:scaleX(0); transform-origin:left;
  transition:transform .55s var(--ease);
}
.rev.in .dead span::after{ transform:scaleX(1); }
.rev.in .dead span:nth-child(2)::after{ transition-delay:.12s; }
.rev.in .dead span:nth-child(3)::after{ transition-delay:.24s; }
.rev.in .dead span:nth-child(4)::after{ transition-delay:.36s; }
.rev.in .dead span:nth-child(5)::after{ transition-delay:.48s; }
.rev.in .dead span:nth-child(6)::after{ transition-delay:.6s; }
.dead-out{
  margin-top:24px; display:inline-flex; align-items:center; gap:12px;
  padding:14px 22px; border-radius:999px;
  background:var(--blue-soft); border:1px solid #cfe0fb; color:var(--blue-d);
  font-size:clamp(15.5px,1.9vw,18px); font-weight:700;
}
.dead-out svg{ width:20px; height:20px; color:var(--blue); flex:none; }

/* --- Platzhalter-Handy, bis das echte Mockup da ist --- */
.ph{
  position:relative; width:min(238px,60vw); aspect-ratio:414/868; margin:0 auto;
  border-radius:38px; padding:9px; background:#0f1b2d;
  box-shadow:0 40px 66px -34px rgba(14,32,74,.55);
}
.ph-screen{
  position:relative; height:100%; border-radius:31px; overflow:hidden;
  background:linear-gradient(180deg,#12203a 0%, #0a1224 100%);
  display:flex; flex-direction:column; justify-content:flex-end; padding:18px 16px 22px;
}
.ph-screen::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(60% 40% at 50% 18%, rgba(47,111,224,.4), transparent 70%);
}
.ph-frame{
  position:relative; flex:1 1 auto; margin:-6px -4px 0;
  border-radius:22px;
  background:
    radial-gradient(60% 50% at 50% 40%, rgba(122,170,255,.28), transparent 70%),
    linear-gradient(180deg, rgba(47,111,224,.16), rgba(10,18,36,0));
  display:grid; place-items:center;
}
.ph-frame svg{ width:46%; height:auto; color:rgba(174,208,255,.55); }
.ph-tag{
  position:relative; align-self:flex-start;
  font-size:9.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#8ab4ff; background:rgba(47,111,224,.2); border:1px solid rgba(138,180,255,.35);
  padding:5px 9px; border-radius:999px;
}
.ph-h{ position:relative; margin-top:11px; font-size:16px; font-weight:800; line-height:1.16; color:#fff; letter-spacing:-.02em; }
.ph-p{ position:relative; margin-top:8px; font-size:11.5px; font-weight:300; line-height:1.45; color:#a9bddd; }
.ph-dots{ position:absolute; right:12px; top:50%; transform:translateY(-50%); display:grid; gap:7px; }
.ph-dots i{ width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.28); display:block; }
.ph-dots i:first-child{ background:#8ab4ff; }
.ph-swipe{
  position:relative; margin-top:16px; align-self:center;
  display:inline-flex; align-items:center; gap:7px;
  font-size:9.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#7e94b8;
}
.ph-swipe svg{ width:12px; height:12px; animation:arrowUp 1.7s ease-in-out infinite; }
@keyframes arrowUp{ 0%,100%{ transform:translateY(2px); opacity:.5; } 50%{ transform:translateY(-3px); opacity:1; } }
.ph-note{
  position:absolute; left:50%; bottom:-30px; transform:translateX(-50%);
  font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--faint);
  white-space:nowrap;
}

/* --- Hervorgehobener Block (Body Doubling) --- */
.spot{
  position:relative; overflow:hidden;
  margin-top:30px; border-radius:26px; padding:clamp(26px,4vw,46px);
  border:1px solid #cfe0fb;
  background:
    radial-gradient(80% 110% at 18% 0%, rgba(47,111,224,.18), transparent 68%),
    linear-gradient(180deg,#f5faff 0%, #ffffff 100%);
  box-shadow:0 30px 60px -44px rgba(24,54,120,.6);
}
.spot-grid{ display:grid; grid-template-columns:1fr minmax(230px,330px); gap:clamp(20px,4vw,44px); align-items:center; }
@media (max-width:720px){ .spot-grid{ grid-template-columns:1fr; } }
.spot h3{ font-size:clamp(22px,3vw,34px); font-weight:700; letter-spacing:-.03em; line-height:1.1; }
.spot p{ margin-top:12px; color:var(--dim); font-weight:300; font-size:clamp(16px,1.8vw,18px); max-width:42ch; }
.spot-art svg{ width:100%; height:auto; display:block; overflow:visible; }
.spot-art .ring{ opacity:.9; animation:spotRing 3.2s ease-in-out infinite; }
.spot-art .ring.p2{ animation-delay:1.1s; }
@keyframes spotRing{ 0%,100%{ opacity:.35; transform:scale(.97); } 50%{ opacity:.9; transform:scale(1.03); } }
.spot-art svg{ transform-box:fill-box; transform-origin:center; }

/* --- Noch mehr erfahren: gross, mittig, Pfeil nach unten --- */
.more-down{ text-align:center; }
.more-down h2{ margin-left:auto; margin-right:auto; max-width:18ch; font-size:clamp(30px,4.6vw,54px); }
.more-down .sec-kick{ display:inline-block; }
.more-down .arrow{
  margin:26px auto 0; width:46px; height:46px; border-radius:50%;
  border:1.5px solid #c8d9f6; background:#fff;
  display:grid; place-items:center; color:var(--blue);
  animation:arrowDown 1.9s ease-in-out infinite;
}
.more-down .arrow svg{ width:20px; height:20px; }
@keyframes arrowDown{ 0%,100%{ transform:translateY(-3px); } 50%{ transform:translateY(5px); } }
@media (prefers-reduced-motion:reduce){ .more-down .arrow, .ph-swipe svg{ animation:none; } }

/* --- Der Kern: Kopf links, App rechts --- */
h2.big{ font-size:clamp(32px,5vw,58px); max-width:17ch; }
.core{ margin-top:clamp(26px,4vw,42px); display:grid; grid-template-columns:1fr 1fr;
       gap:clamp(20px,3.5vw,48px); align-items:start; }
@media (max-width:880px){ .core{ grid-template-columns:1fr; } }
.core-cap{ font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
           color:var(--faint); margin-bottom:12px; }
.core-box{ border:1px solid var(--line); border-radius:24px; background:#fff; padding:20px 20px 14px;
           box-shadow:0 26px 50px -38px rgba(24,54,120,.6); }
.core-box .mess{ margin-top:6px; }
.core-side{ text-align:center; }

/* --- Grosse Zahlen (Creator) im hellen Stil --- */
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:0 clamp(28px,5vw,64px); border-top:1px solid var(--line); }
.stat strong{ display:block; font-weight:800; letter-spacing:-.04em; line-height:1; color:var(--blue); }
.stat em{ display:block; margin-top:8px; font-style:normal; font-weight:600; color:var(--ink); }
.stat p{ margin-top:8px; color:var(--dim); font-weight:300; max-width:26ch; }
@media (max-width:760px){
  .stats{ grid-template-columns:1fr; gap:0; }
  .stat{ border-bottom:1px solid var(--line); }
  .stat:last-child{ border-bottom:none; }
}

/* --- Logo-Lockup: Marke + Wortmarke, kein Platzhalter mehr --- */
.nav-mark{ display:block; width:30px; height:30px; border-radius:9px; flex:none; }
.foot-mark{ display:block; width:28px; height:28px; border-radius:8px; flex:none; }
.nav-wordmark{ width:126px; }
.foot-wordmark{ width:132px; }
@media (max-width:520px){ .nav-mark{ width:26px; height:26px; } .nav-wordmark{ width:104px; } }

/* ============================================================
   Grafiken und Bewegung
   ============================================================ */

/* --- Der App-Friedhof: acht Apps durchgestrichen, eine bleibt --- */
.appgrid{
  position:relative; display:grid; grid-template-columns:repeat(3,1fr);
  gap:34px clamp(10px,1.6vw,16px); width:min(400px,100%); margin:6px auto 0;
}
.app{
  position:relative; aspect-ratio:1; border-radius:22%;
  display:grid; place-items:center;
  background:#fff; border:1px solid var(--line);
  box-shadow:0 14px 26px -20px rgba(24,54,120,.6);
  color:#a9b8cf;
  transition:color .6s var(--ease), opacity .6s var(--ease), filter .6s var(--ease);
}
.app svg{ width:42%; height:42%; }
.app small{
  position:absolute; left:0; right:0; bottom:-19px; text-align:center;
  font-size:10.5px; font-weight:600; letter-spacing:.03em; color:var(--faint);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.app.x::after{
  content:""; position:absolute; left:12%; top:50%; width:76%; height:3px;
  border-radius:3px; background:#c0cfe4; transform-origin:left center;
  transform:rotate(-32deg) scaleX(0);
  transition:transform .5s var(--ease);
}
.rev.in .app.x::after{ transform:rotate(-32deg) scaleX(1); }
/* (ersetzt durch die farbige Variante weiter unten) */
.rev.in .app.x:nth-child(2)::after{ transition-delay:.1s; }
.rev.in .app.x:nth-child(3)::after{ transition-delay:.2s; }
.rev.in .app.x:nth-child(4)::after{ transition-delay:.3s; }
.rev.in .app.x:nth-child(6)::after{ transition-delay:.4s; }
.rev.in .app.x:nth-child(7)::after{ transition-delay:.5s; }
.rev.in .app.x:nth-child(8)::after{ transition-delay:.6s; }
.rev.in .app.x:nth-child(9)::after{ transition-delay:.7s; }
.app.on{
  border:none; background:transparent; box-shadow:none;
  transform:scale(1.06);
}
.app.on img{ width:100%; height:100%; border-radius:22%; display:block;
             box-shadow:0 20px 40px -18px rgba(47,111,224,.85); }
.app.on::before{
  content:""; position:absolute; left:50%; top:50%; width:190%; aspect-ratio:1;
  transform:translate(-50%,-50%); pointer-events:none; z-index:-1;
  background:radial-gradient(closest-side, rgba(47,111,224,.4), rgba(47,111,224,0) 70%);
  animation:appGlow 3.4s ease-in-out infinite;
}
.app.on small{ color:var(--blue); font-weight:700; }
@keyframes appGlow{ 0%,100%{ opacity:.5; transform:translate(-50%,-50%) scale(1); }
                    50%{ opacity:1; transform:translate(-50%,-50%) scale(1.14); } }
@media (prefers-reduced-motion:reduce){ .app.on::before{ animation:none; } }

/* --- Der Kopf: groesser, mit laufendem Impuls --- */
.core{ grid-template-columns:1.06fr .94fr; }
.core-box{ padding:24px 22px 18px; }
.mess{ min-height:320px; }
@media (max-width:880px){ .mess{ min-height:280px; } }
.mess .tangle-run{
  fill:none; stroke:var(--blue); stroke-width:3.4; stroke-linecap:round;
  stroke-dasharray:.05 .95; stroke-dashoffset:1;
  animation:runline 5.5s linear infinite;
  filter:drop-shadow(0 0 5px rgba(47,111,224,.55));
}
@keyframes runline{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }
.chip{ animation:jit 7s ease-in-out infinite; }
@keyframes jit{
  0%,100%{ translate:0 0;    scale:1; }
  30%    { translate:2px -7px; scale:1.03; }
  65%    { translate:-2px -3px; scale:.985; }
}
@media (prefers-reduced-motion:reduce){ .mess .tangle-run{ animation:none; opacity:0; } }

/* --- Leeres Handy im Stil der echten Mockups --- */
.ph{
  position:relative; width:min(252px,62vw); aspect-ratio:414/868; margin:0 auto;
  border-radius:42px; padding:8px; background:#0F1B2D;
  box-shadow:0 42px 70px -34px rgba(14,32,74,.55), 0 0 0 1px rgba(255,255,255,.1) inset;
}
.ph-screen{
  position:relative; height:100%; border-radius:35px; overflow:hidden;
  background:#F5F7FA; display:block;
}
.ph-screen::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(46% 30% at 12% 8%, rgba(59,126,247,.12), transparent 70%),
    radial-gradient(46% 30% at 92% 92%, rgba(20,184,166,.10), transparent 70%);
}
.ph-island{
  position:absolute; top:7px; left:50%; transform:translateX(-50%);
  width:64px; height:18px; border-radius:11px; background:#06080d; z-index:3;
}
.ph-status{
  position:absolute; top:9px; left:0; right:0; z-index:2;
  display:flex; justify-content:space-between; align-items:center;
  padding:0 20px; font-size:9px; font-weight:700; color:#16233d;
}
.ph-status svg{ width:34px; height:9px; }
.ph-home{
  position:absolute; bottom:6px; left:50%; transform:translateX(-50%);
  width:76px; height:3.5px; border-radius:3px; background:rgba(20,30,50,.75); z-index:3;
}
.ph-empty{
  position:absolute; inset:44px 14px 34px; z-index:1;
  border:1.5px dashed #cbd9ee; border-radius:22px;
  display:grid; place-items:center; gap:10px; align-content:center;
  color:#a9bbd4;
}
.ph-empty svg{ width:34px; height:34px; }
.ph-empty b{ font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.ph-note{
  position:absolute; left:50%; bottom:-30px; transform:translateX(-50%);
  font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--faint);
  white-space:nowrap;
}

/* --- Claro sitzt daneben und schreibt --- */
.claro-desk{ position:relative; padding:6px 0 2px; }
.claro-desk .sheet{ width:100%; height:auto; display:block; overflow:visible; }
.claro-desk .claro{
  position:absolute; left:-2%; bottom:-4%; width:46%; z-index:2;
  animation:claroWrite 3.4s ease-in-out infinite;
  filter:drop-shadow(0 14px 22px rgba(24,54,120,.28));
}
@keyframes claroWrite{
  0%,100%{ transform:translateY(0) rotate(-4deg); }
  25%    { transform:translateY(-3px) rotate(1deg); }
  50%    { transform:translateY(0) rotate(-2deg); }
  75%    { transform:translateY(-2px) rotate(2deg); }
}
.sheet .paper{ fill:#fff; stroke:#d7e3f5; stroke-width:2; }
.sheet .ln{
  fill:none; stroke:#8fb2f0; stroke-width:4.5; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:0;
  animation:writeLine 6s ease-in-out infinite;
}
.sheet .ln.l2{ animation-delay:.9s; }
.sheet .ln.l3{ animation-delay:1.8s; }
.sheet .ln.l4{ animation-delay:2.7s; stroke:var(--blue); }
@keyframes writeLine{
  0%   { stroke-dashoffset:1; }
  16%  { stroke-dashoffset:0; }
  86%  { stroke-dashoffset:0; opacity:1; }
  96%  { stroke-dashoffset:0; opacity:0; }
  100% { stroke-dashoffset:1; opacity:0; }
}
.sheet .pen{
  animation:penMove 6s ease-in-out infinite;
  transform-box:fill-box; transform-origin:center;
}
@keyframes penMove{
  0%   { transform:translate(0,0)        rotate(0deg); }
  16%  { transform:translate(140px,0)    rotate(-5deg); }
  25%  { transform:translate(0,30px)     rotate(0deg); }
  41%  { transform:translate(124px,30px) rotate(-5deg); }
  50%  { transform:translate(0,60px)     rotate(0deg); }
  66%  { transform:translate(136px,60px) rotate(-5deg); }
  75%  { transform:translate(0,90px)     rotate(0deg); }
  91%  { transform:translate(88px,90px)  rotate(-5deg); }
  100% { transform:translate(0,0)        rotate(0deg); }
}
@media (prefers-reduced-motion:reduce){
  .claro-desk .claro, .sheet .ln, .sheet .pen{ animation:none; }
  .sheet .ln{ stroke-dashoffset:0; }
}

/* --- „Zwingt dich zu nichts" mit Zeichen statt nur Zahlen --- */
.honest-list.tight .honest-row{ align-items:center; gap:18px; }
.honest-row .no{
  flex:none; width:42px; height:42px; border-radius:14px;
  display:grid; place-items:center;
  background:var(--blue-soft); color:var(--blue);
  transition:background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.honest-row .no svg{ width:21px; height:21px; }
.honest-row.in .no{ background:var(--blue); color:#fff; transform:rotate(-6deg) scale(1.04); }
.honest-row .no + div{ flex:1; }

/* --- Durchlauf statt Boxen (warum.html) --- */
.flow{ position:relative; margin-top:clamp(32px,5vw,52px); display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,3vw,40px); }
@media (max-width:820px){ .flow{ grid-template-columns:1fr; gap:0; } }
.flow::before{
  content:""; position:absolute; left:8%; right:8%; top:27px; height:2px;
  background:linear-gradient(90deg, var(--blue-soft), var(--blue), var(--blue-soft));
  transform:scaleX(0); transform-origin:left; transition:transform 1.2s var(--ease);
}
.flow.in::before{ transform:scaleX(1); }
@media (max-width:820px){ .flow::before{ left:26px; right:auto; top:8%; bottom:8%; width:2px; height:auto;
  background:linear-gradient(180deg, var(--blue-soft), var(--blue), var(--blue-soft));
  transform:scaleY(0); transform-origin:top; }
  .flow.in::before{ transform:scaleY(1); } }
.flow-step{ position:relative; }
@media (max-width:820px){ .flow-step{ padding:0 0 34px 66px; } }
.flow-dot{
  position:relative; z-index:1; width:54px; height:54px; border-radius:50%;
  display:grid; place-items:center; margin:0 0 20px;
  background:#fff; border:2px solid var(--blue); color:var(--blue);
  box-shadow:0 0 0 8px #fff, 0 16px 30px -18px rgba(47,111,224,.9);
}
@media (max-width:820px){ .flow-dot{ position:absolute; left:0; top:0; margin:0; } }
.flow-dot svg{ width:24px; height:24px; }
.flow-step h3{ font-size:clamp(19px,2.3vw,24px); font-weight:700; letter-spacing:-.025em; }
.flow-step p{ margin-top:9px; color:var(--dim); font-weight:300; font-size:16px; max-width:30ch; }
.crew-card u{ display:block; margin-top:9px; text-decoration:none;
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue); }

/* ============================================================
   MOBILE-ROLLOUT — 2026-08-26
   Umsetzung von ~/claromind-team/MOBILE-PLAN.md. Steht bewusst als
   ein Stueck am Ende: einmal loeschen und der alte Stand ist zurueck.
   Reihenfolge: Navigation, Overflow, Touch/Fokus, Feinschliff.
   ============================================================ */

/* ---------- 1. Navigation ----------
   Vorher lagen alle Links in einem waagerechten Scrollstreifen. Sichtbar
   waren bei 390 px "Start · ADHS · Fea", der Warteliste-Button sass bei
   x = 865 px — auf jeder Seite, in jedem Viewport ausserhalb des Bildes.
   Jetzt: Logo | kompakter Warteliste-Button | Burger, die Links werden zum
   Vollbild-Menue. Umschaltpunkt ist 1000 px und nicht 760: die Jugend-Nav
   braucht mit sechs Links rund 1010 px, im Querformat (844 px) lag der
   Warteliste-Button sonst weiterhin ausserhalb des Bildes. */
.nav-burger, .nav-cta-m{ display:none; }

@media (max-width:1000px){
  .nav-inner{ gap:10px; }

  /* Der Warteliste-Button verlaesst den Streifen und steht immer im Bild */
  .nav-cta-m{
    display:inline-flex; align-items:center; justify-content:center;
    margin-left:auto;
    min-height:40px; padding:0 16px;
    border-radius:999px; background:var(--blue); color:#fff;
    font-size:14px; font-weight:600; white-space:nowrap;
    transition:transform .2s var(--ease);
  }
  .nav-cta-m:active{ transform:scale(.94); }

  /* Flex mit gap statt grid: bei `display:grid` strecken sich die drei
     impliziten Zeilen auf die Button-Hoehe, die Striche stehen dann 11,3 px
     statt 7 px auseinander und das X unten wird zu einem schiefen Pfeil. */
  .nav-burger{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:5px; flex:none;
    width:44px; height:44px; margin-right:-10px;
    border:0; background:none; color:var(--ink); cursor:pointer;
  }
  .nav-burger span{
    display:block; width:20px; height:2px; border-radius:2px; background:currentColor;
    transition:transform .28s var(--ease), opacity .18s ease;
  }
  nav.open .nav-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  nav.open .nav-burger span:nth-child(2){ opacity:0; }
  nav.open .nav-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  /* Vollbild-Menue statt Scrollstreifen.
     Wichtig: solange das Menue offen ist, muss der backdrop-filter der Leiste
     weg. Ein Element mit backdrop-filter wird zum Bezugsrahmen fuer
     position:fixed darin — `inset:68px 0 0` bezog sich damit auf die 68 px
     hohe Leiste statt auf den Screen, das Menue war 40 px hoch. Hinter dem
     geoeffneten Menue gibt es ohnehin nichts mehr zu blurren. */
  nav.open{ backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--paper); }
  .nav-links{
    position:fixed; inset:68px 0 0; z-index:99;
    display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start;
    gap:4px; overflow-x:hidden; overflow-y:auto;
    padding:16px max(24px, env(safe-area-inset-right))
            calc(24px + env(safe-area-inset-bottom))
            max(24px, env(safe-area-inset-left));
    background:var(--paper);
    opacity:0; transform:translateY(-8px); pointer-events:none;
    transition:opacity .2s ease, transform .2s var(--ease);
  }
  .nav-links a{
    font-size:22px; font-weight:600; color:var(--ink);
    min-height:56px; padding:10px 16px; border-radius:14px;
  }
  .nav-links a.on{ background:var(--blue-soft); color:var(--blue); }
  /* Im Menue waere der Warteliste-Link doppelt — er steht schon in der Leiste */
  .nav-links .nav-cta{ display:none; }
  nav.open .nav-links{ opacity:1; transform:none; pointer-events:auto; }
  /* Solange das Menue offen ist, scrollt die Seite dahinter nicht mit */
  body.nav-open{ overflow:hidden; }

  /* Querformat: das Menue muss scrollen koennen, 56-px-Zeilen sind zu hoch */
  @media (max-height:520px){
    .nav-links a{ font-size:18px; min-height:46px; }
  }
}

/* Blur kostet auf dem Handy jeden Frame; 10 px sehen genauso aus wie 14 */
@media (max-width:1000px){
  nav{ backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
}

/* Bei 320 px ist der Wrap 272 px breit. Wortmarke (116) + Warteliste-Button
   (104) + Burger (44) sind 264 plus Abstaende — der Burger stand 11 px ueber
   dem Rand. Unter 400 px darum alles eine Stufe kompakter. */
@media (max-width:400px){
  .nav-inner{ gap:6px; }
  .nav-wordmark{ width:96px; }
  .nav-cta-m{ padding:0 12px; font-size:13px; }
  .nav-burger{ width:40px; margin-right:-8px; }
}
/* Ganz eng: der Button wird zum Wort ohne Polster */
@media (max-width:340px){
  .nav-wordmark{ width:84px; }
  .nav-cta-m{ padding:0 10px; font-size:12.5px; }
}

/* Querformat mit Notch: Inhalt darf nicht unter die Kamera laufen */
@media (max-width:900px){
  .wrap{ width:min(1100px, calc(100% - 48px)); }
  nav .wrap, .nav-inner{
    padding-left:max(0px, calc(env(safe-area-inset-left) - 24px));
    padding-right:max(0px, calc(env(safe-area-inset-right) - 24px));
  }
}

/* <picture> darf keine eigene Box aufmachen, sonst greifen Regeln wie
   `.crew-card img{ margin:0 auto }` oder `.shot img{ width:100% }` ins Leere. */
picture{ display:contents; }

/* width/height am <img> reservieren den Platz, bevor das Bild da ist — sonst
   springt das Layout beim Nachladen. Sie wirken aber zugleich als CSS-Hoehe:
   ohne das hier waere ein 600x1300-Mockup in einem 238-px-Slot 1300 px hoch
   statt 516. (0,0,2 — Klassenregeln wie `.member img{height:84px}` gewinnen
   weiterhin, nur der Praesentations-Hint aus dem Attribut verliert.) */
picture img{ height:auto; }

/* ---------- 2. Overflow ----------
   `1fr` heisst `minmax(auto,1fr)`: eine Kachel kann nicht schmaler werden
   als ihr laengstes Wort und sprengt dann das Raster. Genau daran lief
   warum.html bei 390 px 75 px ueber den Rand. */
.tiles{ grid-template-columns:repeat(3, minmax(0,1fr)); }
@media (max-width:880px){ .tiles{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:360px){ .tiles{ grid-template-columns:minmax(0,1fr); } }
.tile b, .tile span{ overflow-wrap:anywhere; }
.hub{ grid-template-columns:repeat(3, minmax(0,1fr)); }
@media (max-width:880px){ .hub{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:560px){ .hub{ grid-template-columns:minmax(0,1fr); } }
.core, .show, .vs, .prices, .stats, .crew, .more, .spot-grid{ min-width:0; }
.core > *, .show > *, .vs > *, .spot-grid > *{ min-width:0; }

/* Die weichen Lichthoefe (.shot::before, .claro-wrap::before) sind absichtlich
   breiter als ihr Element. Auf dem Handy ragen sie damit aus dem Bild —
   4 px scrollWidth auf der Jugendseite. `clip` kappt sie, ohne (anders als
   `hidden`) einen Scroll-Container zu erzeugen, der position:sticky bricht. */
@media (max-width:880px){
  section, header.page-hero, footer{ overflow-x:clip; }
}

/* ---------- 3. Touch-Ziele und Fokus ---------- */
/* Es gab keinerlei :focus-visible-Stil — Tastatur- und Switch-Bedienung
   war blind. Ein Ring reicht, aber ueberall. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:3px solid var(--blue);
  outline-offset:3px;
  border-radius:10px;
}
@media (max-width:760px){
  /* Mail- und Textlinks mitten im Satz duerfen klein bleiben (WCAG 2.5.8
     nimmt sie aus), aber sie brauchen einen groesseren Fingerbereich. */
  .a-col a, p a:not(.btn):not(.nav-cta-m){ padding:2px 1px; }
}

/* ---------- 4. Feinschliff aus dem Plan ---------- */
/* Nummer der Schritte schwebte neben dem Text, wenn die Illustration fehlte */
@media (max-width:760px){
  .step.has-art{ align-items:start; }
}
/* Preiskarten waren unter 400 px zu eng gepolstert */
@media (max-width:400px){
  .price{ padding:22px 18px; }
  .cta-box{ padding:28px 20px; }
}
/* Sperrsatz laesst das Datum bei 320 px umbrechen */
@media (max-width:400px){
  .post-meta{ letter-spacing:.1em; }
}
/* Das Team stand als drei 250-px-Kreise untereinander = 900 px Leerlauf.
   Drei nebeneinander sind auf dem Handy erkennbar und kosten 200 px. */
@media (max-width:760px){
  .crew{
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:10px; max-width:none; margin-left:0; margin-right:0;
  }
  .crew-card img{ width:min(96px,86%); }
  .crew-card b{ margin-top:10px; font-size:15px; }
  .crew-card span{ font-size:12.5px; }
}
/* Reveals: 26 px Versatz ueber 0,75 s wirken auf dem Handy wie Nachladen */
@media (max-width:760px){
  .rev{ transform:translateY(12px); transition-duration:.45s; }
}

/* Die spaetere .core-Regel oben hat den Umbruch ueberschrieben — hier zurueckholen. */
@media (max-width:880px){
  .core{ grid-template-columns:1fr; }
  .show{ grid-template-columns:1fr; }
}

/* ============================================================
   Runde 2: bunte Fake-Apps, Lauftext statt Kacheln, Hero-Animation
   ============================================================ */

/* --- App-Friedhof: sieht aus wie ein Homescreen voller Ausreden --- */
.appgrid{ gap:clamp(12px,1.8vw,18px); width:min(390px,100%); margin:6px auto 0; }
.app{
  border:none; background:none; box-shadow:none; overflow:visible;
  color:#fff;
}
.app i{
  position:absolute; inset:0; border-radius:23%;
  display:grid; place-items:center;
  box-shadow:0 16px 28px -18px rgba(24,54,120,.75), inset 0 1px 0 rgba(255,255,255,.35);
  transition:filter .6s var(--ease), opacity .6s var(--ease);
}
.app svg{ width:46%; height:46%; position:relative; z-index:1; }
.app small{ display:none; }
.app.x::after{
  content:""; position:absolute; left:6%; top:50%; width:88%; height:4px; z-index:2;
  border-radius:4px; background:#3c4a61; box-shadow:0 0 0 2.5px rgba(255,255,255,.9);
  transform-origin:left center; transform:rotate(-30deg) scaleX(0);
  transition:transform .5s var(--ease);
}
.rev.in .app.x::after{ transform:rotate(-30deg) scaleX(1); }
.rev.in .app.x i{ filter:saturate(.9); opacity:.55; }
.app.on{ transform:scale(1.1); }
.app.on img{ width:100%; height:100%; border-radius:23%; display:block;
             box-shadow:0 22px 42px -16px rgba(47,111,224,.95); }

/* Farben der Fake-Apps */
.c-tomato { background:linear-gradient(160deg,#FF6B6B,#E03131); }
.c-violet { background:linear-gradient(160deg,#9775FA,#5F3DC4); }
.c-orange { background:linear-gradient(160deg,#FFA94D,#F76707); }
.c-fire   { background:linear-gradient(160deg,#FF922B,#E8590C); }
.c-yellow { background:linear-gradient(160deg,#FFD43B,#F08C00); }
.c-green  { background:linear-gradient(160deg,#51CF66,#0CA678); }
.c-gold   { background:linear-gradient(160deg,#E9C46A,#B08415); }
.c-pink   { background:linear-gradient(160deg,#FF8FC7,#D6336C); }

/* --- Lauftext statt Kacheln --- */
.ticker{
  position:relative; margin-top:clamp(26px,4vw,44px);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.ticker-row{ display:flex; width:max-content; gap:12px; padding:7px 0; }
.ticker-row.a{ animation:tickA 42s linear infinite; }
.ticker-row.b{ animation:tickB 50s linear infinite; }
@keyframes tickA{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes tickB{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
.ticker:hover .ticker-row{ animation-play-state:paused; }
.tk{
  display:inline-flex; align-items:center; gap:12px; flex:none;
  padding:15px 22px 15px 15px; border-radius:999px;
  background:#fff; border:1px solid var(--line);
  box-shadow:0 18px 34px -28px rgba(24,54,120,.75);
  white-space:nowrap;
  transition:transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.tk em{
  flex:none; width:36px; height:36px; border-radius:12px; display:grid; place-items:center;
  background:var(--blue-soft); color:var(--blue);
}
.tk em svg{ width:19px; height:19px; }
.tk b{ font-size:16.5px; font-weight:700; letter-spacing:-.015em; color:var(--ink); }
.tk span{ font-size:14.5px; font-weight:300; color:var(--dim); }
@media (hover:hover){
  .tk:hover{ transform:translateY(-3px); border-color:#c6d8f7; box-shadow:0 24px 40px -26px rgba(24,54,120,.85); }
}
@media (max-width:560px){ .tk{ padding:12px 18px 12px 12px; } .tk b{ font-size:15px; } .tk span{ display:none; } }
@media (prefers-reduced-motion:reduce){ .ticker-row{ animation:none; } }

/* --- Handgezogener Strich unter einem Wort --- */
.ul{ position:relative; display:inline-block; }
.ul svg{ position:absolute; left:-2%; width:104%; bottom:-.1em; height:.26em; overflow:visible; }
.ul path{
  fill:none; stroke:var(--blue); stroke-width:6; stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset 1.2s var(--ease) .45s;
}
.rev.in .ul path{ stroke-dashoffset:0; }

/* --- Hero von warum.html: kein Grau, dafuer Claro --- */
.why-hero{ display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(24px,4vw,60px); align-items:center; }
@media (max-width:880px){ .why-hero{ grid-template-columns:1fr; } }
.why-hero .lead{ color:var(--ink); font-weight:400; }
.why-hero .lead b{ font-weight:700; color:var(--blue); }
.why-claro{ justify-self:center; }
.why-claro .claro{ width:clamp(150px,20vw,240px); }

/* --- Kicker gross ausgespielt (Learn About Yourself) --- */
.h-eyebrow{
  display:block; font-size:clamp(30px,4.6vw,56px); font-weight:800;
  letter-spacing:-.035em; line-height:1.04; color:var(--ink);
}
.h-eyebrow .blau{ color:var(--blue); }

/* Brunos Ticker (jugend.html, 26.08.) blendet die Raender per mask-image aus,
   das ist aber nur Optik: die 3000 px breite .ticker-row bleibt im Layout und
   haengt am body:overflow-x:hidden. Ein Laufband muss auch clippen. */
.ticker{ overflow:hidden; }