/* ============================================================
   Lernbus — "Foudre für Kinder"
   Editorial-magazine language after Agence Foudre:
   monumental display blocks in violet, body copy in deep teal,
   colour as punctuation, flat surfaces, extreme whitespace.
   Hand-drawn signatures kept: marker yellow, ticks, blob numerals.
   Palette: chalk #fbfaf3 · violet #493f80 · teal ink #2f6e68 ·
   marker #e7e276 · night #2e2857.
   No build step. All clamp()/calc() use spaces around + and -.
   ============================================================ */

/* ---- Fonts (self-hosted) ---- */
@font-face{ font-family:'Bricolage Grotesque'; font-style:normal; font-weight:400 800; font-display:swap; src:url('./fonts/bricolage-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:'Bricolage Grotesque'; font-style:normal; font-weight:400 800; font-display:swap; src:url('./fonts/bricolage-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; }
@font-face{ font-family:'Hanken Grotesk'; font-style:normal; font-weight:400 800; font-display:swap; src:url('./fonts/hanken-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:'Hanken Grotesk'; font-style:normal; font-weight:400 800; font-display:swap; src:url('./fonts/hanken-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; }

/* ---- Tokens ---- */
:root{
  --bg:#fbfaf3;           /* warm chalk canvas */
  --violet:#493f80;       /* display voice (the magenta role) */
  --violet-deep:#38306a;
  --teal-ink:#2f6e68;     /* body voice (the forest-ink role) */
  --teal-soft:rgba(47,110,104,.78);
  --cyan:#7dbeb9;         /* logo teal, sparingly */
  --yellow:#efed99;       /* logo yellow */
  --marker:#e7e276;       /* saturated marker yellow */
  --night:#2e2857;        /* back cover */
  --ink:#2c2750;          /* only where near-black is unavoidable */
  --pink:#d9b3cc; --coral:#c9a4b8; --tang:#e3d98a;  /* legacy inline refs */
  --pink-ink:#8e4e75; --orange-ink:#8a7a1f; --cyan-ink:#2f6e68;
  --line:rgba(73,63,128,.22);
  --hairline:rgba(73,63,128,.13);
  --dot:var(--violet);    /* per-section accent, set inline */

  --display:'Bricolage Grotesque', system-ui, sans-serif;
  --body:'Hanken Grotesk', system-ui, sans-serif;

  /* monumental scale, ultra-tight leading */
  --fs-hero:clamp(2.7rem, 0.9rem + 7.6vw, 9rem);
  --fs-h2:clamp(2rem, 0.9rem + 4.4vw, 4.8rem);
  --fs-h3:clamp(1.4rem, 1.15rem + 1vw, 2rem);
  --fs-lead:clamp(1.1rem, 1rem + 0.5vw, 1.36rem);
  --fs-eyebrow:clamp(0.7rem, 0.68rem + 0.1vw, 0.76rem);

  --wrap:80rem;
  --pad:clamp(1.25rem, 0.6rem + 3.2vw, 4rem);
}

/* ---- Reset / base ---- */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--teal-ink);
  font-family:var(--body); font-weight:450;
  font-size:clamp(1rem, 0.97rem + 0.2vw, 1.1rem); line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
h1,h2,h3{ font-family:var(--display); margin:0; font-weight:800; color:var(--violet);
  letter-spacing:-0.03em; text-wrap:balance; line-height:1.05; overflow-wrap:break-word; }
p{ margin:0; text-wrap:pretty; }
a{ color:inherit; text-decoration:none; }
img,canvas,svg,video{ max-width:100%; display:block; }
b,strong{ color:var(--violet); font-weight:750; }
::selection{ background:var(--marker); color:var(--ink); }
:focus-visible{ outline:3px solid var(--violet); outline-offset:3px; border-radius:8px; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
/* whitespace is the structure: sections breathe like magazine spreads */
.section{ padding-block:clamp(5.5rem, 3rem + 8vw, 11rem); position:relative; overflow:hidden; }
.tint{ background:transparent; }

/* eyebrow: quiet pill badge */
.eyebrow{ display:inline-block; font-family:var(--body); font-weight:750; font-size:var(--fs-eyebrow);
  letter-spacing:.17em; text-transform:uppercase; color:var(--violet);
  border:1.5px solid var(--line); border-radius:999px; padding:.5em 1.1em; }
.lead{ font-size:var(--fs-lead); line-height:1.6; color:var(--teal-ink); max-width:56ch; }
h2.big{ font-size:var(--fs-h2); max-width:18ch; margin-top:1.2rem; line-height:.96; letter-spacing:-0.035em; }
h2.big + .lead, h2.big + .prose2{ margin-top:2.2rem; }

.skip{ position:absolute; left:-9999px; top:0; background:var(--violet); color:#fff; padding:.7rem 1rem; z-index:200; border-radius:0 0 10px 0; }
.skip:focus{ left:0; }

.accent-blob, .pillar .gb, .give .gblob{ display:none; }

.prose2{ margin-top:clamp(2rem, 1.4rem + 2vw, 3rem); display:grid; gap:1.6rem clamp(2.5rem, 1.5rem + 3vw, 5rem); grid-template-columns:repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.prose2 .lead{ max-width:46ch; }

/* ---- Buttons: flat pills ---- */
.btn{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--body); font-weight:750;
  font-size:1rem; padding:.9em 1.7em; border-radius:999px; border:0; cursor:pointer; min-height:48px;
  transition:transform .16s ease, background-color .16s ease, color .16s ease; will-change:transform; }
.btn-pink{ background:var(--violet); color:#fff; }
.btn-pink:hover{ transform:translateY(-2px); background:var(--violet-deep); }
.btn-yellow{ background:var(--yellow); color:var(--ink); }
.btn-yellow:hover{ transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--violet); box-shadow:inset 0 0 0 2px var(--violet); }
.btn-ghost:hover{ transform:translateY(-2px); background:var(--violet); color:var(--bg); }

.morelink{ display:inline-flex; align-items:center; gap:.4rem; font-weight:750; color:var(--violet); padding-block:.5rem; }
.morelink span{ transition:transform .2s ease; }
.morelink:hover span{ transform:translateX(4px); }
.morelink:hover{ text-decoration:underline; text-underline-offset:.25em; text-decoration-thickness:2px; }

/* ---- Header: stripped chrome, logo + tiny tracked links + EN dot ---- */
.site-head{ position:absolute; top:0; left:0; right:0; z-index:20; }
.site-head .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:1.6rem; }
.brand{ line-height:1; display:inline-block; }
.brand b{ font-family:var(--display); font-weight:800; font-size:1.4rem; }
.brand-logo{ display:block; height:clamp(3.2rem, 2.6rem + 2vw, 4.2rem); width:auto; }
.brand span{ display:block; font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--teal-soft); font-weight:700; margin-top:.5rem; }
.head-right{ display:flex; align-items:center; gap:1rem; }
.nav{ display:none; align-items:center; gap:1.4rem; }
@media (min-width:760px){ .nav{ display:flex; } }
.navlink{ position:relative; padding:.5rem 0; font-weight:750; font-size:.78rem; letter-spacing:.15em; text-transform:uppercase; color:var(--violet); }
.navlink::after{ content:""; position:absolute; left:0; right:0; bottom:.15rem; height:2px; border-radius:2px; background:var(--marker); transform:scaleX(0); transform-origin:left; transition:transform .22s ease; }
.navlink:hover::after, .navlink:focus-visible::after{ transform:scaleX(1); }
/* language toggle as the single circular control */
.lang{ display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
  background:var(--yellow); color:var(--ink); font-weight:800; font-size:.82rem; letter-spacing:.06em;
  transition:transform .16s ease; }
.lang:hover, .lang:focus-visible{ transform:rotate(-8deg) scale(1.06); color:var(--ink); }

/* ---- Hero: one sentence as a monument ---- */
.hero{ position:relative; min-height:max(640px, 98svh); display:flex; align-items:center; overflow:hidden; background:var(--bg); }
.hero-stage, .liquid-fallback, .hero-video, .grade{ display:none; }
.hero-scrim{ position:absolute; inset:0; z-index:1; pointer-events:none; background:none; }
/* the paper plane crosses the empty top-right corner of the type block */
@media (min-width:1200px){
  .hero-scrim::before{ content:""; position:absolute; right:4rem; top:11.5rem; width:24rem; height:9.5rem; opacity:.9;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 170'%3E%3Cpath d='M8 158 C120 140 210 146 288 102 C332 77 366 52 404 24' fill='none' stroke='%23493f80' stroke-width='5' stroke-linecap='round' stroke-dasharray='0.1 16'/%3E%3C/svg%3E") no-repeat center / contain; }
  .hero-scrim::after{ content:""; position:absolute; right:2.9rem; top:7.2rem; width:6rem; aspect-ratio:248 / 130;
    background:url('./img/plane.png') no-repeat center / contain; }
}
.hero-inner{ position:relative; z-index:3; width:100%; min-width:0;
  padding-top:clamp(9rem, 7rem + 6vw, 13rem); padding-bottom:clamp(3.5rem, 2.5rem + 3vw, 6rem); }
.hero h1{ font-size:var(--fs-hero); line-height:.92; letter-spacing:-0.04em; max-width:13ch; }
.hero h1 .pop{ position:relative; white-space:nowrap; }
.hero h1 .pop::after{ content:""; position:absolute; left:-.06em; right:-.06em; bottom:.09em; height:.38em; z-index:-1;
  background:var(--marker); border-radius:46% 54% 60% 40% / 60% 50% 50% 40%; transform:rotate(-1.5deg); }
.hero .lead{ margin-top:clamp(2rem, 1.5rem + 1.6vw, 3.2rem); max-width:44ch; }
.hero .lead + .lead{ max-width:44ch; }
.hero-cta{ margin-top:clamp(2.2rem, 1.6rem + 2vw, 3.4rem); display:flex; flex-wrap:wrap; gap:1rem; }
.hero .eyebrow{ margin-bottom:1.6rem; }
/* entrance: one orchestrated reveal */
@media (prefers-reduced-motion:no-preference){
  .hero .eyebrow, .hero h1, .hero .lead, .hero-cta{ animation:intro .7s cubic-bezier(.22,.9,.3,1) both; }
  .hero .eyebrow{ animation-delay:.04s; }
  .hero h1{ animation-delay:.1s; }
  .hero h1 ~ .lead{ animation-delay:.3s; }
  .hero .lead + .lead{ animation-delay:.42s; }
  .hero-cta{ animation-delay:.54s; }
  @keyframes intro{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }
  .hero h1 .pop::after{ transform-origin:left center; animation:sweep .5s .85s cubic-bezier(.3,.8,.4,1) both; }
  @keyframes sweep{ from{ transform:scaleX(0) rotate(-1.5deg); } to{ transform:scaleX(1) rotate(-1.5deg); } }
}

/* ---- Statement (concept page): a spread of pure type ---- */
.statement{ font-family:var(--display); font-weight:700; color:var(--violet);
  font-size:clamp(1.7rem, 1.1rem + 2.8vw, 3.6rem); line-height:1.12; letter-spacing:-0.025em; max-width:30ch; }
.statement b{ color:var(--violet); }

/* ---- Goals / people: rule-top typographic entries ---- */
.goals{ margin-top:3rem; display:grid; gap:clamp(2rem, 1.4rem + 2.4vw, 3.6rem); grid-template-columns:repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.goal{ border-top:2px solid var(--line); padding-top:1.4rem; }
.goal .n{ font-family:var(--display); font-weight:800; font-size:clamp(2.4rem, 1.9rem + 2vw, 3.8rem); line-height:1; color:var(--violet); }
.goal h3{ font-size:1.3rem; margin:.7rem 0 .5rem; letter-spacing:-0.015em; }
.goal p{ color:var(--teal-soft); max-width:34ch; }

.people{ margin-top:3rem; display:grid; gap:clamp(2rem, 1.4rem + 2.4vw, 3.6rem); grid-template-columns:repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); max-width:48rem; }
.person{ border-top:2px solid var(--line); padding-top:1.3rem; }
.person h3{ font-size:1.35rem; letter-spacing:-0.015em; }
.person .role{ margin-top:.4rem; font-weight:750; font-size:.74rem; letter-spacing:.15em; text-transform:uppercase; color:var(--teal-ink); }
.person .bio{ margin-top:.6rem; color:var(--teal-soft); }
.board-note{ margin-top:2.4rem; color:var(--teal-soft); font-size:.95rem; }

/* ---- Pillars: no boxes — display headings with a marker dash ---- */
.pillars{ margin-top:clamp(2.6rem, 1.8rem + 2.6vw, 4rem); display:grid;
  gap:clamp(2.4rem, 1.6rem + 3vw, 4.5rem) clamp(2.5rem, 1.5rem + 3.5vw, 5.5rem);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.pillar{ position:relative; display:flex; flex-direction:column; background:none; border:0; padding:0; }
.pillar .bar{ width:2.6rem; height:.55rem; border-radius:3px; background:var(--marker); rotate:-2deg; }
.pillar h3{ font-size:var(--fs-h3); margin:1.1rem 0 .7rem; letter-spacing:-0.02em; line-height:1.08; }
.pillar p{ color:var(--teal-ink); flex:1; max-width:52ch; }
.pillar .morelink{ margin-top:1.1rem; }

/* ---- Checklist: the six goals, ticked off on open ground ---- */
.checksheet{ margin-top:clamp(4rem, 2.6rem + 4vw, 6.5rem); }
.ticks{ list-style:none; margin:2rem 0 0; padding:0; display:grid; gap:1.3rem clamp(2.5rem, 1.5rem + 3vw, 5rem);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.ticks li{ position:relative; padding-left:2.6rem; font-weight:700; color:var(--violet); line-height:1.4; font-size:1.06rem; }
.ticks li::before{ content:""; position:absolute; left:0; top:-.08em; width:1.7rem; height:1.7rem;
  background:var(--marker) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M6 15 C10 17 11 20 12.5 22 C15 15 20 9 24 5.5' fill='none' stroke='%23493f80' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 72% no-repeat;
  border-radius:44% 56% 52% 48% / 56% 44% 56% 44%; transform:rotate(-3deg); }
.ticks li:nth-child(even)::before{ transform:rotate(2.5deg); border-radius:56% 44% 48% 52% / 44% 56% 44% 56%; }

/* ---- Zielgruppe: manifesto rows in display violet ---- */
.fuerwen{ list-style:none; margin:clamp(2rem, 1.4rem + 2vw, 3rem) 0 0; padding:0; max-width:62rem; }
.fuerwen li{ font-family:var(--display); font-weight:700; color:var(--violet);
  font-size:clamp(1.5rem, 1rem + 2.3vw, 3rem); line-height:1.2; letter-spacing:-0.022em;
  padding:.9em 0; border-bottom:1.5px solid var(--hairline); text-wrap:balance; }
.fuerwen li:first-child{ border-top:1.5px solid var(--hairline); }
.fuerwen b{ color:var(--violet); font-weight:800;
  background:linear-gradient(transparent 62%, var(--marker) 62%, var(--marker) 96%, transparent 96%); }

/* ---- Steps: blob numerals on hairline rows ---- */
.steps{ margin-top:2.6rem; max-width:36rem; }
.step{ position:relative; padding:0 0 2.1rem 3.4rem; }
.step:last-child{ padding-bottom:0; }
.step::before{ content:""; position:absolute; left:.85rem; top:2.2rem; bottom:.2rem; width:2px; background:var(--hairline); border-radius:2px; }
.step:last-child::before{ display:none; }
.step .dotn{ position:absolute; left:0; top:-.15rem; width:1.8rem; height:1.8rem; display:grid; place-items:center;
  font-family:var(--display); font-weight:800; font-size:1rem; line-height:1; color:var(--violet);
  background:var(--marker); border-radius:48% 52% 55% 45% / 55% 48% 52% 45%; transform:rotate(-4deg); }
.step:nth-child(even) .dotn{ transform:rotate(3deg); border-radius:52% 48% 45% 55% / 48% 55% 45% 52%; }
.step h3{ font-size:1.18rem; line-height:1.3; letter-spacing:-0.012em; }
.step p{ margin-top:.35rem; color:var(--teal-ink); }
.steps.grid2{ max-width:none; display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap:.6rem clamp(3rem, 2rem + 3.5vw, 6rem); }
.steps.grid2 .step{ padding-bottom:1.7rem; border-bottom:1.5px solid var(--hairline); }
.steps.grid2 .step::before{ display:none; }

/* ---- Detail blocks / FAQ / cost ---- */
.detail{ display:grid; gap:clamp(2rem, 1.4rem + 1.8vw, 3rem); max-width:64ch; }
.dsec h2, .dsec h3{ font-family:var(--display); font-weight:800; font-size:var(--fs-h3); letter-spacing:-0.018em; color:var(--violet); }
.dsec h2::before, .dsec h3::before{ content:""; display:block; width:2.4rem; height:.5rem; border-radius:3px; background:var(--marker); rotate:-2deg; margin-bottom:1rem; }
.dsec p{ margin-top:.7rem; color:var(--teal-ink); max-width:58ch; }
.vignette{ margin-top:clamp(3rem, 2rem + 3vw, 5rem); padding:0 0 0 clamp(1.4rem, 1rem + 1.6vw, 2.4rem);
  border-left:5px solid var(--marker);
  font-family:var(--display); font-weight:600; color:var(--violet);
  font-size:clamp(1.3rem, 1.05rem + 1.2vw, 2.1rem); line-height:1.35; letter-spacing:-0.012em; max-width:50ch; }
.invest-row{ margin-top:clamp(2.6rem, 1.8rem + 2vw, 3.8rem); }

.refs{ margin-top:clamp(3rem, 2rem + 3vw, 5rem); padding-top:1.8rem; border-top:1.5px solid var(--hairline); max-width:62ch; }
.refs h2{ font-family:var(--body); font-weight:750; font-size:var(--fs-eyebrow); letter-spacing:.16em; text-transform:uppercase; color:var(--teal-soft); }
.refs ul{ list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:.5rem; }
.refs li{ font-size:.88rem; color:var(--teal-soft); line-height:1.55; }

/* facts: rule-top entries */
.lb-facts{ margin-top:clamp(2.4rem, 1.6rem + 2.4vw, 3.6rem); display:grid; gap:1.8rem clamp(2rem, 1.4rem + 2vw, 3rem); grid-template-columns:repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.fact{ border-top:2px solid var(--line); padding-top:1.1rem; }
.fact b{ display:block; font-family:var(--display); font-weight:750; font-size:1.12rem; letter-spacing:-0.01em; line-height:1.3; color:var(--violet); }
.fact span{ display:block; margin-top:.35rem; color:var(--teal-soft); font-size:.93rem; line-height:1.5; }

/* bullets: divided rows with a marker dash */
.bullets{ margin:1.8rem 0 0; padding:0; list-style:none; display:grid; gap:0 clamp(2rem, 1.4rem + 2vw, 3.5rem);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); max-width:64rem; }
.bullets li{ position:relative; padding:.9rem 0 .9rem 1.7rem; color:var(--teal-ink); line-height:1.55; border-bottom:1.5px solid var(--hairline); }
.bullets li::before{ content:""; position:absolute; left:0; top:1.45em; width:.9rem; height:.35rem; border-radius:2px; background:var(--marker); rotate:-2deg; }
.bullets li b{ color:var(--violet); }

/* ---- Colour as punctuation: the conversation block goes full violet ---- */
#gespraech, #anmelden{ background:var(--violet); color:rgba(251,250,243,.92);
  padding-block:clamp(6rem, 4rem + 7vw, 11rem); }
#gespraech h2, #anmelden h2{ color:#fff; }
#gespraech .lead, #anmelden .lead{ color:rgba(251,250,243,.88); }
#gespraech .eyebrow, #anmelden .eyebrow{ color:var(--yellow); border-color:rgba(251,250,243,.35); }
#gespraech :focus-visible, #anmelden :focus-visible{ outline-color:var(--yellow); }
#gespraech .book-card, #anmelden .book-card{ background:none; border:0; padding:0; max-width:46rem; margin-top:3rem; }
#gespraech .btn-pink, #anmelden .btn-pink{ background:var(--yellow); color:var(--ink); }
#gespraech .btn-pink:hover, #anmelden .btn-pink:hover{ background:#fff; }

/* ---- Booking form ---- */
.book-card{ position:relative; margin-top:2.6rem; max-width:46rem; }
.form-grid{ display:grid; gap:1.3rem; grid-template-columns:repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.field{ display:grid; gap:.45rem; }
.field label{ font-weight:750; font-size:.85rem; letter-spacing:.02em; color:inherit; }
.field input, .field select, .field textarea{ font:inherit; color:var(--ink); background:#fff; border:0; border-radius:12px; padding:.75em .95em; width:100%; }
.field textarea{ min-height:6.5rem; resize:vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{ outline:3px solid var(--yellow); outline-offset:2px; }
.field.wide{ grid-column:1 / -1; }
.check{ display:flex; align-items:flex-start; gap:.6rem; font-size:.95rem; color:inherit; }
.check input{ width:1.15rem; height:1.15rem; margin-top:.15rem; accent-color:var(--yellow); }
.book-note{ margin-top:1.3rem; font-size:.88rem; color:rgba(251,250,243,.72); max-width:52ch; }

/* ---- Section-specific composition ---- */
#zielgruppe .book-card{ background:transparent; border:0; padding:0; max-width:44rem; margin-top:1.8rem; }
#qualitaet .prose2 .lead{ font-family:var(--display); font-weight:600; color:var(--violet);
  font-size:clamp(1.35rem, 1.05rem + 1.4vw, 2.2rem); line-height:1.3; letter-spacing:-0.015em; max-width:30ch; }
#kosten .detail{ grid-template-columns:repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); max-width:60rem;
  gap:clamp(2rem, 1.4rem + 2vw, 3.5rem); margin-top:2.8rem; }
#kosten .dsec{ border-top:2px solid var(--line); padding-top:1.4rem; }
#kosten .dsec h2, #kosten .dsec h3{ font-size:clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem); }
#kosten .dsec h2::before, #kosten .dsec h3::before{ display:none; }
#fragen .detail{ max-width:70ch; margin-top:1.6rem; gap:0; }
#fragen .dsec{ border-bottom:1.5px solid var(--hairline); padding-block:2rem; }
#fragen .dsec h2::before, #fragen .dsec h3::before{ display:none; }
#fragen .dsec h2, #fragen .dsec h3{ font-size:clamp(1.25rem, 1.1rem + 0.6vw, 1.55rem); }
#fragen .dsec p{ margin-top:.65rem; }

/* ---- Donation block (concept page): violet punctuation ---- */
.give{ background:var(--violet); color:rgba(251,250,243,.9); border-radius:clamp(24px, 3vw, 36px); overflow:hidden; position:relative; }
.give .inner{ position:relative; z-index:2; padding:clamp(2.2rem, 1.2rem + 5vw, 5rem); }
.give .gcols{ display:grid; gap:2.5rem; grid-template-columns:1fr; align-items:center; }
.give .gmain, .give .figure{ min-width:0; }
@media (min-width:880px){ .give .gcols{ grid-template-columns:1.15fr .85fr; gap:3.5rem; } }
.give .eyebrow{ color:var(--yellow); border-color:rgba(251,250,243,.35); }
.give h2{ font-size:clamp(1.9rem, 1.2rem + 3vw, 3.6rem); color:#fff; margin-top:1rem; max-width:18ch; hyphens:auto; line-height:1; letter-spacing:-0.03em; }
.give p.body{ margin-top:1.4rem; color:rgba(251,250,243,.85); max-width:46ch; font-size:1.05rem; line-height:1.6; }
.give-cta{ margin-top:2.2rem; display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.4rem; }
.give .btn-pink{ background:var(--yellow); color:var(--ink); }
.give .btn-pink:hover{ background:#fff; }
.give .fineprint{ font-size:.92rem; color:rgba(251,250,243,.66); max-width:32ch; }
.give .figure{ border-radius:20px; background:rgba(255,255,255,.08); padding:clamp(1.6rem, 1rem + 2vw, 2.6rem); }
.give .figure .amt{ font-family:var(--display); font-weight:800; font-size:clamp(3rem, 2rem + 4vw, 5.2rem); line-height:.95; color:var(--yellow); letter-spacing:-0.03em; }
.give .figure .cap{ margin-top:.7rem; color:rgba(251,250,243,.85); font-size:1.02rem; }
.give :focus-visible{ outline-color:var(--yellow); }

/* ---- Subpages ---- */
.subhero{ padding-top:clamp(9rem, 7rem + 6vw, 13rem); padding-bottom:clamp(3rem, 2rem + 4vw, 5.5rem); position:relative; overflow:hidden; }
.subhero .back{ display:flex; width:fit-content; align-items:center; gap:.4rem; font-weight:750; color:var(--teal-ink); margin-bottom:2rem; }
.subhero h1{ font-size:clamp(2.4rem, 1.2rem + 5.4vw, 6.4rem); max-width:14ch; margin-top:.8rem; line-height:.94; letter-spacing:-0.038em; }
.subhero .lead{ margin-top:1.8rem; }
.placeholder{ border:2px dashed var(--line); border-radius:16px; padding:clamp(1.5rem, 1rem + 2vw, 2.4rem); color:var(--teal-soft); max-width:52ch; }
.who{ margin-top:1.6rem; font-weight:750; color:var(--violet); }

/* ---- Footer: the night back cover, hard edge ---- */
.foot{ background:var(--night); color:rgba(248,247,252,.75); margin-top:clamp(4rem, 3rem + 4vw, 7rem);
  padding-block:3.2rem; }
.foot .wrap{ display:flex; flex-wrap:wrap; gap:.9rem 2.2rem; justify-content:flex-start; align-items:baseline;
  font-size:.85rem; font-weight:500; }
.foot-logo{ flex-basis:100%; height:3.4rem; object-fit:contain; object-position:left center; margin-bottom:.8rem; }
.foot .wrap a{ color:rgba(248,247,252,.9); font-weight:750; }
.foot .wrap a:hover, .foot .wrap a:focus-visible{ color:#fff; }
.foot .wrap span{ overflow-wrap:anywhere; }
.foot :focus-visible{ outline-color:var(--yellow); }

/* ---- Reveals ---- */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .reveal{ animation:rise linear both; animation-timeline:view(); animation-range:entry 0% entry 22%; }
    @keyframes rise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
  }
}

/* ---- Small screens ---- */
/* hyphenate only where German compounds genuinely no longer fit */
@media (max-width:400px){
  .hero h1, h2.big, .subhero h1{ -webkit-hyphens:auto; hyphens:auto; }
}
@media (max-width:560px){ .brand span{ display:none; } }
@media (max-width:380px){
  .brand-logo{ height:3rem; }
  .lang{ width:40px; height:40px; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .navlink::after{ transition:none !important; }
  .btn:hover, .lang:hover{ transform:none !important; }
  .hero .eyebrow, .hero h1, .hero .lead, .hero-cta, .hero h1 .pop::after{ animation:none !important; }
}