@charset "UTF-8";
/* ==========================================================================
   B2b'relevant — Stylesheet
   Stand 10.09.2026 · Relaunch, zweite Fassung: puristisch

   Haltung: Die Schrift trägt die Seite. Große, leichte Displaygrößen gegen
   kleinen, ruhigen Lesetext. Keine Label-Zeilen, keine Ziffernmarken, keine
   Akzentstriche, keine Kachelraster. Farbe fast nur als Fläche, Rosé nur da,
   wo geklickt wird.

   1 Schriften · 2 Tokens · 3 Grundlagen · 4 Typografie · 5 Kopf und Menü
   6 Hero · 7 Abschnitte · 8 Zitatbänder · 9 Ebenen · 10 Cases
   11 Formular · 12 Footer · 13 Consent · 14 Umbrüche · 15 Bewegung
   ========================================================================== */

/* ── 1 Schriften — Manrope, lokal, latin + latin-ext ─────────────────── */
@font-face{font-family:'Manrope';font-style:normal;font-weight:300;font-display:swap;
  src:url('fonts/manrope-latin-300-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:300;font-display:swap;
  src:url('fonts/manrope-latin-ext-300-normal.woff2') format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/manrope-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/manrope-latin-ext-400-normal.woff2') format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/manrope-latin-500-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/manrope-latin-ext-500-normal.woff2') format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/manrope-latin-600-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/manrope-latin-ext-600-normal.woff2') format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Montserrat Variable';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('fonts/montserrat-latin-wght-normal.woff2') format('woff2-variations')}

/* ── 2 Tokens ─────────────────────────────────────────────────────────── */
:root{
  /* Kühle Neutrale, aus den Aufnahmen genommen: Silber mit Blaustich. */
  --paper:#ffffff;
  --mist:#eceff3;
  --mist-2:#dfe4ea;
  --ink:#0f1519;
  --ink-dim:rgba(15,21,25,.58);
  --ink-faint:rgba(15,21,25,.34);
  --deep:#0a1015;
  --light:#ffffff;
  --light-dim:rgba(255,255,255,.62);
  --rose:#b91c6d;
  --rose-light:#f472b6;
  --line:rgba(15,21,25,.13);
  --line-soft:rgba(15,21,25,.07);
  --line-inv:rgba(255,255,255,.20);

  --max:1320px;
  --gut:clamp(22px,6vw,96px);
  --head-h:clamp(74px,8vw,104px);
  --sec-y:clamp(62px,8vw,124px);
  --sec-y-weit:clamp(84px,11vw,170px);
  --measure:56ch;

  --font:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.19,.74,.32,1);
}

/* ── 3 Grundlagen ─────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--head-h)}
body{
  margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);
  font-size:17px;font-weight:400;line-height:1.85;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
body.is-locked{overflow:hidden}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0}
ul,ol{margin:0;padding:0;list-style:none}
figure,blockquote,figcaption{margin:0}
:focus-visible{outline:2px solid var(--rose);outline-offset:4px}
.on-deep :focus-visible{outline-color:var(--rose-light)}
::selection{background:var(--ink);color:var(--paper)}

.skip{position:absolute;left:-9999px;top:0;z-index:120;background:var(--ink);color:var(--paper);padding:14px 20px;font-weight:600}
.skip:focus{left:14px;top:14px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:var(--sec-y)}
.sec--weit{padding-block:var(--sec-y-weit)}
.sec--eng{padding-block:clamp(40px,5vw,78px)}
.sec--knapp{padding-block:clamp(30px,3.6vw,56px)}
.sec--mist{background:var(--mist)}
.sec--deep{background:var(--deep);color:var(--light)}
.hair{border-top:1px solid var(--line)}

/* ── 4 Typografie ─────────────────────────────────────────────────────────
   Der Kontrast ist der Punkt: sehr groß und sehr leicht gegen sehr klein
   und ruhig. Dazwischen bewusst nichts. */
h1,h2,h3{margin:0;font-weight:300;letter-spacing:-.038em;line-height:1;text-wrap:balance}

.d1{font-size:clamp(2.5rem,6.4vw,5.6rem);font-weight:300;letter-spacing:-.036em;line-height:1.1}
.d2{font-size:clamp(1.8rem,3.8vw,3.1rem);font-weight:300;letter-spacing:-.034em;line-height:1.16}
.d3{font-size:clamp(1.35rem,2.4vw,2rem);font-weight:300;letter-spacing:-.028em;line-height:1.28}
.d4{font-size:clamp(1.15rem,1.7vw,1.42rem);font-weight:500;letter-spacing:-.022em;line-height:1.3}

p{margin:0;max-width:var(--measure)}
.body{font-size:clamp(1.08rem,1.18vw,1.2rem);line-height:1.85;color:var(--ink-dim)}
.body strong{font-weight:600;color:var(--ink)}
.sec--deep .body,.on-deep .body{color:var(--light-dim)}
.sec--deep .body strong,.on-deep .body strong{color:var(--light)}
.micro{font-size:.72rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);line-height:1.6}
.sec--deep .micro{color:var(--light-dim)}

/* Aufruf: kein Kasten. Ein Wort und eine Linie, die sich öffnet. */
.call{
  display:inline-flex;align-items:baseline;gap:14px;position:relative;
  font-size:clamp(1.05rem,1.6vw,1.3rem);font-weight:500;letter-spacing:-.02em;
  padding-bottom:10px;color:var(--ink);
}
.call::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--ink);transform-origin:left;transition:transform .5s var(--ease);
}
.call:hover::after{transform:scaleX(0);transform-origin:right}
.call .arw{transition:transform .4s var(--ease);font-weight:300}
.call:hover .arw{transform:translateX(10px)}
.call--light{color:var(--light)}
.call--light::after{background:var(--light)}


/* ── Markenmerkmal: die schmale pinke Linie ───────────────────────────────
   Von der Visitenkarte übernommen. Sie liegt als durchgehende Kante über der
   ganzen Seite und taucht sonst nur zweimal auf — vor den dunklen Momenten.
   Pink ist damit kein Gestaltungsmittel, sondern eine Signatur. */
.markenlinie{
  position:fixed;top:0;left:0;right:0;height:3px;background:var(--rose);z-index:110;
}
.strich{
  display:block;width:56px;height:2px;border:0;margin:0 0 clamp(20px,2.6vw,32px);
  background:var(--rose);
}
.sec--deep .strich,.on-deep .strich{background:var(--rose-light)}

/* ── Wasserzeichen ────────────────────────────────────────────────────────
   Ein Motiv liegt hinter dem Text, stark zurückgenommen und in Grau. Es
   trägt nie Information, es gibt der Fläche Tiefe. Auf schmalen Schirmen
   fällt es weg, damit nichts unter dem Text liegt. */
.sec--wasser{position:relative;overflow:hidden}
.sec--wasser > .wrap{position:relative;z-index:1}
.wasser{position:absolute;z-index:0;pointer-events:none;filter:grayscale(1)}
.wasser picture{display:block;width:100%}
.wasser img{width:100%;height:auto}

.wasser--wendel{
  top:50%;right:calc(var(--gut) * -0.5);transform:translateY(-50%);width:min(52%,660px);opacity:.30;
  -webkit-mask-image:radial-gradient(74% 70% at 58% 50%,#000 26%,rgba(0,0,0,.5) 58%,transparent 88%);
  mask-image:radial-gradient(74% 70% at 58% 50%,#000 26%,rgba(0,0,0,.5) 58%,transparent 88%);
}
.wasser--gespraech{
  top:50%;right:0;transform:translateY(-50%);width:min(58%,760px);opacity:.20;
  -webkit-mask-image:radial-gradient(78% 74% at 66% 48%,#000 24%,rgba(0,0,0,.5) 56%,transparent 88%);
  mask-image:radial-gradient(78% 74% at 66% 48%,#000 24%,rgba(0,0,0,.5) 56%,transparent 88%);
}
.wasser--portrait{
  bottom:calc(var(--sec-y) * -0.2);left:calc(var(--gut) * -0.2);width:min(38%,460px);opacity:.16;
  -webkit-mask-image:radial-gradient(70% 66% at 46% 42%,#000 28%,rgba(0,0,0,.5) 60%,transparent 88%);
  mask-image:radial-gradient(70% 66% at 46% 42%,#000 28%,rgba(0,0,0,.5) 60%,transparent 88%);
}
.wasser--moewe{
  top:50%;right:calc(var(--gut) * -0.75);transform:translateY(-42%);
  width:min(62%,860px);opacity:.27;
  -webkit-mask-image:radial-gradient(78% 78% at 58% 48%,#000 18%,rgba(0,0,0,.66) 48%,transparent 88%);
  mask-image:radial-gradient(78% 78% at 58% 48%,#000 18%,rgba(0,0,0,.66) 48%,transparent 88%);
}
.hero--denk .hero-in{position:relative;z-index:1}
.hero--denk .hero-block{width:min(650px,58%)}

/* Unter dem Hero: die Einordnung groß, der Name eine Stufe kleiner darunter. */
.intro-kopf{display:flex;flex-direction:column;gap:clamp(10px,1.4vw,16px);align-items:flex-start}
.intro-claim{font-size:clamp(1.6rem,3.4vw,2.7rem);font-weight:300;letter-spacing:-.03em;
  line-height:1.22;color:var(--ink);max-width:30ch;text-wrap:balance}
.intro-name{font-size:clamp(1.15rem,1.7vw,1.5rem);font-weight:500;letter-spacing:-.018em;
  line-height:1.3;color:var(--ink-dim)}

/* Case: Herausforderung, Arbeit, Ergebnis als eigene Zeilen. */
.case-teile{display:flex;flex-direction:column;gap:14px;width:100%}
.case-teile p{font-size:.97rem;line-height:1.75;color:var(--ink-dim);max-width:44ch}
.case-teile b{display:block;font-size:.72rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);margin-bottom:3px}

/* ── 5 Kopf und Menü ──────────────────────────────────────────────────── */
.head{
  position:fixed;top:3px;left:0;right:0;z-index:100;
  background:rgba(255,255,255,0);
  transition:background .4s var(--ease),box-shadow .4s var(--ease);
}
.head.is-stuck{background:rgba(255,255,255,.93);backdrop-filter:saturate(160%) blur(14px);box-shadow:0 1px 0 var(--line-soft)}
.head-in{
  max-width:var(--max);margin-inline:auto;padding-inline:var(--gut);
  min-height:var(--head-h);padding-block:clamp(14px,2vw,26px);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{display:flex;align-items:center}
.brand img{height:clamp(54px,7.2vw,108px);width:auto;transition:height .45s var(--ease)}
.head.is-stuck .brand img{height:clamp(36px,4vw,52px)}

/* Hamburger — zwei Linien reichen. */
.burger{display:flex;align-items:center;gap:14px;cursor:pointer;padding:10px 0;z-index:110;position:relative}
.burger-label{font-size:.74rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase}
.burger-bars{position:relative;display:block;width:30px;height:11px}
.burger-bars i{position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .4s var(--ease),opacity .25s var(--ease)}
.burger-bars i:first-child{top:0}
.burger-bars i:last-child{bottom:0}
.burger[aria-expanded="true"] .burger-bars i:first-child{transform:translateY(4.75px) rotate(45deg)}
.burger[aria-expanded="true"] .burger-bars i:last-child{transform:translateY(-4.75px) rotate(-45deg)}
.burger[aria-expanded="true"]{color:var(--ink)}

.menu{
  position:fixed;inset:3px 0 0;z-index:99;background:var(--mist);
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--head-h) var(--gut) clamp(30px,5vw,60px);
  opacity:0;visibility:hidden;transition:opacity .42s var(--ease),visibility .42s;
}
.menu.is-open{opacity:1;visibility:visible}
.menu-in{max-width:var(--max);margin-inline:auto;width:100%;display:flex;flex-direction:column;gap:clamp(30px,6vw,80px)}
.menu-list{display:flex;flex-direction:column}
.menu-list a{
  display:block;padding-block:clamp(8px,1.4vw,16px);
  font-size:clamp(2rem,6.4vw,4.6rem);font-weight:300;letter-spacing:-.04em;line-height:1.14;
  color:var(--ink);transition:opacity .3s var(--ease),transform .5s var(--ease);
}
.menu.is-open .menu-list a{transform:translateY(0)}
.menu-list a:hover{opacity:.42}
.menu-foot{display:flex;flex-wrap:wrap;gap:14px 44px;justify-content:space-between;border-top:1px solid var(--line);padding-top:22px}
.menu-foot a{font-size:.95rem;color:var(--ink-dim);transition:color .2s var(--ease)}
.menu-foot a:hover{color:var(--ink)}

/* ── 6 Hero ───────────────────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;min-height:80vh;display:flex;align-items:flex-end;isolation:isolate;
  background:var(--mist);padding-top:calc(var(--head-h) + 16px)}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:28% 46%;z-index:-2;transform:scale(1.24);transform-origin:31% 48%;
  filter:brightness(1.2) contrast(.84) saturate(.72);animation:hero-fan-in 2.2s var(--ease) both}
.hero-veil{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(85deg,rgba(248,250,252,.26) 0%,rgba(255,255,255,.46) 44%,rgba(255,255,255,.75) 76%,rgba(255,255,255,.88) 100%)}
.hero-in{
  width:100%;max-width:var(--max);margin-inline:auto;padding:0 var(--gut) clamp(86px,9vw,126px);
  display:flex;flex-direction:column;align-items:flex-start;gap:clamp(20px,2.6vw,34px);
}
/* Alle drei Zeilen teilen eine Kante — sonst schwimmen sie im Bild. */
.hero-block{
  margin-left:auto;width:min(680px,100%);
  display:flex;flex-direction:column;align-items:flex-start;gap:clamp(18px,2.2vw,30px);
}
.hero .d1{max-width:14ch}
.hero .body{max-width:none;color:var(--ink);
  font-size:clamp(1.2rem,1.8vw,1.5rem);line-height:1.5;font-weight:400}
.hero-eyebrow{font-size:.74rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rose);line-height:1.4}
.hero .call::after{background:var(--rose)}
@keyframes hero-fan-in{
  0%{transform:scale(1.3) rotate(-1.8deg)}
  100%{transform:scale(1.24) rotate(0deg)}
}
.hero-kicker{font-size:clamp(1rem,1.25vw,1.14rem);font-weight:500;letter-spacing:-.008em;
  color:var(--ink-dim);max-width:none}
.hero-next{display:flex;align-items:center;gap:16px;max-width:42ch;font-size:clamp(1rem,1.45vw,1.22rem);
  line-height:1.45;font-weight:500;transition:transform .35s var(--ease),opacity .35s var(--ease)}
.hero-next i{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;border:1px solid var(--line);
  border-radius:50%;color:var(--rose);font-style:normal;font-size:1.35rem;transition:transform .35s var(--ease)}
.hero-next:hover i{transform:translateY(5px)}

/* Ein Hero ohne Bild — für die Seite über Barbara selbst. Das Porträt
   bekommt weiter unten seinen eigenen Platz, statt hinter Text zu verblassen. */
.hero--still{background:var(--paper);min-height:min(68vh,720px);
  padding-top:calc(var(--head-h) + clamp(56px,9vw,130px))}
.hero--still .hero-block{margin-left:0;width:min(960px,100%)}
.hero--still .d1{max-width:22ch;font-size:clamp(1.9rem,4.2vw,3.4rem);line-height:1.14}
/* Beitragsseiten: die Überschrift ist ein ganzer Satz, nicht ein Claim —
   deshalb eine Stufe kleiner und breiter, sonst füllt sie den halben Bildschirm. */
.hero--beitrag{min-height:0;padding-top:calc(var(--head-h) + clamp(44px,6vw,88px))}
.hero--beitrag .hero-in{padding-bottom:clamp(22px,3vw,42px)}
.hero--beitrag .d1{font-size:clamp(2rem,4.4vw,3.7rem);max-width:21ch}
.hero--beitrag .body{font-size:clamp(1.12rem,1.5vw,1.32rem)}
/* Der Text schließt direkt an den Titel an — dazwischen keine leere Bahn. */
.hero--beitrag + .sec{padding-top:clamp(26px,3.4vw,50px)}
.hero-name{font-size:clamp(1.05rem,1.5vw,1.32rem);font-weight:500;letter-spacing:-.016em;
  color:var(--ink-faint);max-width:none}

/* ── 7 Abschnitte ─────────────────────────────────────────────────────── */
/* Der persönliche Einstieg: eine Spalte, viel Luft, keine Überschrift. */
.intro{position:relative;overflow:hidden}
.intro .wrap{position:relative;z-index:1;display:flex;flex-direction:column;
  gap:clamp(26px,3.4vw,48px);align-items:flex-start}
.intro-portrait{
  position:absolute;top:0;bottom:0;right:0;z-index:0;pointer-events:none;
  width:min(48%,640px);opacity:.88;
  -webkit-mask-image:radial-gradient(112% 84% at 100% 44%,#000 22%,rgba(0,0,0,.64) 52%,transparent 86%);
  mask-image:radial-gradient(112% 84% at 100% 44%,#000 22%,rgba(0,0,0,.64) 52%,transparent 86%);
}
.intro-portrait picture{display:block;width:100%;height:100%}
.intro-portrait img{width:100%;height:100%;object-fit:cover;object-position:42% 32%}
.intro .d3{max-width:20ch}
.intro-text{display:flex;flex-direction:column;gap:22px;max-width:46rem}
.intro-text p{font-size:clamp(1.08rem,1.18vw,1.2rem);line-height:1.85;color:var(--ink-dim);max-width:none}
.intro-text strong{font-weight:600;color:var(--ink)}

/* Große Aussage links, kleiner Text rechts — das dramatische Verhältnis. */
.duo{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(32px,6vw,110px);align-items:start}
.duo-side{display:flex;flex-direction:column;gap:24px;padding-top:clamp(4px,1.4vw,18px)}

/* Fragen: Zeilen mit Haarlinie, keine Aufzählungspunkte. */
.rows{display:flex;flex-direction:column;width:100%;border-top:1px solid var(--line)}
.rows > li{border-bottom:1px solid var(--line-soft);padding-block:clamp(16px,2vw,26px)}
.sec--deep .rows{border-top-color:var(--line-inv)}
.sec--deep .rows > li{border-bottom-color:var(--line-inv)}
.rows--q > li{font-size:clamp(1.1rem,1.9vw,1.5rem);font-weight:300;letter-spacing:-.028em;line-height:1.35}

/* Zwei Textspalten ohne Kacheln */
.cols{columns:2;column-gap:clamp(34px,5vw,86px);width:100%}
.cols > div{break-inside:avoid;padding-block:clamp(14px,1.8vw,22px);border-top:1px solid var(--line)}
.cols .d4{margin-bottom:6px}
.cols p{font-size:.95rem;line-height:1.75;color:var(--ink-dim);max-width:none}

/* ── 8 Zitatbänder ────────────────────────────────────────────────────────
   Das Zitat ist der dramatischste Moment der Seite: randlos, Bild darunter,
   Schrift so groß wie sie eben geht. */
.band{position:relative;isolation:isolate;background:var(--deep);color:var(--light);
  padding-block:clamp(90px,15vw,220px);overflow:hidden}
.band-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.62}
.band-veil{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(6,10,14,.72) 0%,rgba(6,10,14,.34) 62%,rgba(6,10,14,.60) 100%)}
.band blockquote{margin:0;max-width:13em}
.band .quote{font-size:clamp(2rem,6.4vw,5.4rem);font-weight:300;letter-spacing:-.038em;line-height:1.1}
.band figcaption{margin-top:clamp(20px,2.6vw,34px);max-width:68ch}

/* Zitat auf Fläche, ohne Bild — für den O-Ton der Zielgruppe */
.saying{max-width:none}
.saying .quote{font-size:clamp(1.7rem,4.6vw,3.6rem);font-weight:300;letter-spacing:-.036em;
  line-height:1.18;max-width:15em}
.saying figcaption{margin-top:26px;max-width:76ch}

/* ── 9 Die fünf Ebenen ────────────────────────────────────────────────── */
.levels{display:flex;flex-direction:column;width:100%;border-top:1px solid var(--line)}
.level{
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.25fr);gap:8px clamp(28px,4vw,72px);
  padding-block:clamp(17px,2.1vw,28px);border-bottom:1px solid var(--line);align-items:baseline;
}
.level h3{font-size:clamp(1.5rem,3.2vw,2.4rem);font-weight:300;letter-spacing:-.04em;line-height:1.08}
.level p{font-size:clamp(1rem,1.15vw,1.1rem);line-height:1.75;color:var(--ink-dim);max-width:none}
.sec--deep .levels{border-top-color:var(--line-inv)}
.sec--deep .level{border-bottom-color:var(--line-inv)}


/* Die fünf Ebenen mit Bild: abwechselnd links und rechts, viel Luft.
   Alle Motive in einem Grau, damit sie als eine Bildwelt lesen. */
.method{display:flex;flex-direction:column;gap:clamp(56px,8vw,128px);width:100%}
.step{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(24px,5vw,88px);align-items:center;
}
.step:nth-of-type(even) .step-fig{order:2}
.step-fig{margin:0;width:100%;aspect-ratio:4/3;overflow:hidden;background:var(--mist-2)}
.step-fig picture{display:block;width:100%;height:100%}
.step-fig img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.step:hover .step-fig img{transform:scale(1.03)}
.step-text{display:flex;flex-direction:column;gap:clamp(12px,1.6vw,20px);align-items:flex-start}
.step-text h3{font-size:clamp(1.9rem,4.6vw,3.4rem);font-weight:300;letter-spacing:-.04em;line-height:1.08}
.step-text p{max-width:34ch}

/* Der pinke Pfeil — dieselbe Familie wie .strich, nur mit Spitze.
   Wird genauso sparsam eingesetzt: einmal je Seite, über einer Überschrift. */
.pfeil-marke{display:block;width:64px;height:12px;margin-bottom:clamp(18px,2.2vw,28px);
  color:var(--rose)}
.sec--deep .pfeil-marke,.on-deep .pfeil-marke{color:var(--rose-light)}
.pfeil-marke svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2}

/* ── Was aus der Arbeit bleibt ────────────────────────────────────────────
   Zwei Bündel, je ein großes Wort links und die Punkte rechts. Jeder Punkt
   sagt erst, was entsteht, und dann, wozu es gut ist. */
.nutzen{display:flex;flex-direction:column;gap:clamp(30px,4vw,60px);width:100%}
.nutzen-gruppe{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.35fr);
  gap:16px clamp(30px,5vw,90px);
  border-top:1px solid var(--line);padding-top:clamp(20px,2.6vw,34px)}
.nutzen-wort{font-size:clamp(1.5rem,3.2vw,2.4rem);font-weight:300;letter-spacing:-.036em;
  line-height:1.08}
.nutzen-liste{display:flex;flex-direction:column;width:100%}
.nutzen-punkt{padding-block:clamp(13px,1.7vw,21px);border-top:1px solid var(--line-soft)}
.nutzen-punkt:first-child{border-top:0;padding-top:0}
.nutzen-punkt:last-child{padding-bottom:0}
.nutzen-punkt p{font-size:clamp(1.02rem,1.4vw,1.16rem);line-height:1.6;color:var(--ink);
  max-width:none;padding-left:1.35em;text-indent:-1.35em}
.nutzen-punkt p:first-child::before{content:'\2014';color:var(--ink-faint);
  display:inline-block;width:1.35em;text-indent:0}
.nutzen-punkt .so{text-indent:0}
.nutzen-punkt .so{font-size:.93rem;line-height:1.7;color:var(--ink-dim);margin-top:6px}

/* ── Die fünf Ebenen als Bahn ─────────────────────────────────────────────
   Statt fünf großer Bildzeilen untereinander: eine Bahn, die man nach rechts
   schiebt. Die Seite wird dadurch um mehrere Bildschirmlängen kürzer, ohne
   dass ein Wort wegfällt. Getragen von scroll-snap — kein Fremdcode, und
   ohne JavaScript bleibt es eine ganz normale Wischliste. */
.bahn-kopf{display:flex;flex-wrap:wrap;gap:18px 40px;align-items:flex-end;
  justify-content:space-between;width:100%;margin-bottom:clamp(20px,2.6vw,34px)}
/* Ohne JavaScript stehen beide Phasen nebeneinander. Mit JavaScript steht
   immer nur die Phase da, in der die Bahn gerade ist — sie wechselt genau
   dann, wenn die vierte Kachel ins Bild kommt. */
.bahn-phasen{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:10px clamp(28px,4vw,64px);width:100%;max-width:860px}
.bahn-phase-satz{font-size:.93rem;line-height:1.75;color:var(--ink-dim)}
.bahn-phase-satz b{display:block;font-weight:500;color:var(--ink);margin-bottom:3px}
.js .bahn-phasen{grid-template-columns:1fr;max-width:520px}
.js .bahn-phase-satz{grid-area:1/1;opacity:0;transform:translateY(7px);pointer-events:none;
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.js .bahn-phase-satz.is-da{opacity:1;transform:none;pointer-events:auto}

.bahn-steuer{display:flex;gap:10px;flex-shrink:0}
.bahn-knopf{
  width:clamp(48px,4.4vw,60px);height:clamp(48px,4.4vw,60px);
  display:grid;place-items:center;flex-shrink:0;
  background:none;border:1px solid var(--line);border-radius:50%;cursor:pointer;
  color:var(--ink);transition:border-color .3s var(--ease),background .3s var(--ease),
    opacity .3s var(--ease);
}
.bahn-knopf svg{width:44%;height:44%;fill:none;stroke:currentColor;stroke-width:1.4}
.bahn-knopf:hover{border-color:var(--ink);background:var(--mist)}
.bahn-knopf:disabled{opacity:.28;cursor:default}
.bahn-knopf:disabled:hover{border-color:var(--line);background:none}

.bahn{
  display:flex;gap:clamp(18px,2.4vw,34px);width:100%;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;padding-bottom:4px;
}
.bahn::-webkit-scrollbar{display:none}
.stufe{
  flex:0 0 clamp(250px,30vw,384px);scroll-snap-align:start;
  display:flex;flex-direction:column;gap:14px;
  text-decoration:none;color:inherit;
}
/* Damit der Sprung nicht unter dem festen Kopf landet. */
.level{scroll-margin-top:calc(var(--head-h) + 28px)}
.stufe-fig{margin:0;width:100%;aspect-ratio:5/3;overflow:hidden;background:var(--mist-2)}
.stufe-fig picture{display:block;width:100%;height:100%}
.stufe-fig img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.stufe:hover .stufe-fig img{transform:scale(1.04)}
.stufe-phase{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:500;color:var(--ink-faint)}
.stufe h3{font-size:clamp(1.45rem,2.3vw,1.95rem);font-weight:300;letter-spacing:-.036em;
  line-height:1.1}
.stufe p{font-size:.96rem;line-height:1.75;color:var(--ink-dim)}
.stufe--wirkung .stufe-fig img{object-position:right center}

/* Arbeitsphasen: zwei ruhige Register statt einer horizontalen Steuerung. */
.phase-tabs{display:flex;gap:0;margin-bottom:clamp(24px,3vw,38px);border-bottom:1px solid var(--line)}
.phase-tabs button{padding:13px clamp(22px,3vw,42px);cursor:pointer;border:1px solid transparent;
  border-bottom:0;color:var(--ink-faint);font-size:.88rem;letter-spacing:.12em;text-transform:uppercase}
.phase-tabs button[aria-selected="true"]{color:var(--ink);background:var(--paper);border-color:var(--line)}
.phase-tabs button[aria-selected="false"]{background:var(--mist);color:var(--ink-faint)}
.phase-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,34px);overflow:visible}
.phase-cards .stufe{min-width:0;gap:14px}
.phase-cards .stufe[hidden]{display:none}
.stufe-more{margin-top:auto;padding-top:14px;border-top:1px solid var(--line-soft);display:grid;gap:6px;
  opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.stufe-more li{font-size:.86rem;line-height:1.55;color:var(--ink-dim);padding-left:1em;position:relative}
.stufe-more li::before{content:'–';position:absolute;left:0;color:var(--rose)}
.stufe:hover .stufe-more,.stufe:focus-within .stufe-more{opacity:1;transform:none}

/* Fragen werden beim Darüberfahren zu klaren, inversen Denkflächen. */
.challenge-grid{gap:1px;background:var(--line)}
.challenge-grid li{background:rgba(255,255,255,.82);padding:clamp(22px,3vw,38px);
  transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease)}
.challenge-grid li:hover{background:var(--ink);color:var(--paper);transform:translateY(-2px)}
.consequence-wrap{margin-top:clamp(44px,6vw,86px);max-width:78ch}
.motion-arrow{display:block;color:var(--rose);font-size:2rem;line-height:1;margin-bottom:18px;
  opacity:0;transform:translateX(-70px);transition:opacity .4s var(--ease),transform .75s var(--ease)}
.problem-consequence{transform:scale(1);transform-origin:left center;transition:transform 1.25s var(--ease)}
.consequence-wrap.is-active .motion-arrow{opacity:1;transform:none}
.consequence-wrap.is-active .problem-consequence{animation:clarity-pulse 1.5s var(--ease) .25s both}
@keyframes clarity-pulse{45%{transform:scale(1.055)}100%{transform:scale(1)}}
.quote-sequence{display:flex;flex-direction:column;align-items:flex-start;gap:.18em;text-align:left}
.quote-second{position:relative;display:block;text-align:left}
.quote-second > span{display:block;opacity:0;clip-path:inset(0 100% 0 0);transform:translateX(-22px)}
.quote-second i{position:absolute;left:0;top:.05em;display:block;color:var(--rose-light);font-style:normal;
  opacity:0;transform:translateX(-70px)}
.quote-sequence.is-active .quote-second > span{animation:quote-text-in .78s var(--ease) .9s both}
.quote-sequence.is-active .quote-second i{animation:quote-arrow .7s var(--ease) .08s both}
@keyframes quote-arrow{0%{opacity:0;transform:translateX(-70px)}30%{opacity:1}72%{opacity:1}100%{opacity:0;transform:translateX(70px)}}
@keyframes quote-text-in{0%{opacity:0;clip-path:inset(0 100% 0 0);transform:translateX(-22px)}100%{opacity:1;clip-path:inset(0);transform:none}}

/* ── Warum ich: vier Kacheln ──────────────────────────────────────────────
   Zu sehen ist zuerst nur die Überschrift. Der Text erscheint beim
   Darüberfahren. Vier Kacheln nebeneinander statt vier Zeilen untereinander —
   das spart drei Viertel der Höhe. Auf Geräten ohne Mauszeiger steht der Text
   von Anfang an da, sonst wäre er unerreichbar. */
.grunde{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:clamp(4px,.6vw,10px) clamp(24px,3vw,48px);width:100%;
  border-top:1px solid var(--rose)}
.grund{position:relative;display:flex;flex-direction:column;
  border-bottom:1px solid var(--rose);
  padding-block:clamp(18px,2.2vw,28px) clamp(14px,1.8vw,22px);
  min-height:clamp(168px,17vw,232px)}
.grund h3{font-size:clamp(1.3rem,2.1vw,1.75rem);font-weight:300;letter-spacing:-.034em;
  line-height:1.1;color:var(--ink)}
.grund-text{margin-top:auto;padding-top:16px;
  font-size:.93rem;line-height:1.7;color:var(--ink-dim);max-width:none;
  opacity:0;transform:translateY(8px);
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.grund::after{content:'';position:absolute;left:0;bottom:-1px;height:1px;width:100%;
  background:var(--ink);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease)}
.grund:hover .grund-text,.grund:focus-within .grund-text{opacity:1;transform:none}
.grund:hover::after,.grund:focus-within::after{transform:scaleX(1)}
@media (hover:none),(max-width:760px){
  .grund{min-height:0}
  .grund-text{opacity:1;transform:none}
  .grund::after{display:none}
}

/* ── Auszeichnungen als Kacheln ───────────────────────────────────────────
   Geschlossen nur Jahr, Titel und Beteiligte — eine ruhige, neutrale Liste.
   Beim Darüberfahren klappt das Bild auf und der Pfeil zur Quelle erscheint.
   Auf Geräten ohne Mauszeiger bleibt das Bild zu und der Pfeil steht fest da,
   damit der Link trotzdem erreichbar ist. */
.preise{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
  gap:clamp(4px,.6vw,10px) clamp(26px,3.4vw,52px);width:100%;
  border-top:1px solid var(--line)}
.preis{display:flex;flex-direction:column;align-items:flex-start;gap:7px;
  text-decoration:none;color:inherit;
  border-bottom:1px solid var(--line);padding-block:clamp(16px,2vw,24px)}
.preis-jahr{font-size:.82rem;letter-spacing:.02em;color:var(--ink-faint)}
.preis h3{font-size:clamp(1.05rem,1.6vw,1.26rem);font-weight:500;letter-spacing:-.018em;
  line-height:1.3;transition:color .3s var(--ease)}
.preis p{font-size:.9rem;line-height:1.7;color:var(--ink-dim)}

.preis-fig{margin:0;width:100%;overflow:hidden;
  max-height:0;opacity:0;
  transition:max-height .55s var(--ease),opacity .4s var(--ease),margin-top .55s var(--ease)}
.preis-fig img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;
  filter:grayscale(1) contrast(1.03)}
.preis:hover .preis-fig,.preis:focus-visible .preis-fig{max-height:320px;opacity:1;margin-top:7px}

.preis-quelle{font-size:.84rem;font-weight:500;color:var(--ink-dim);
  display:inline-flex;align-items:center;gap:.4em;
  opacity:0;transform:translateY(-5px);
  transition:opacity .35s var(--ease),transform .35s var(--ease),color .3s var(--ease)}
.preis:hover .preis-quelle,.preis:focus-visible .preis-quelle{opacity:1;transform:none;color:var(--ink)}
.preis-quelle .arw{transition:transform .4s var(--ease)}
.preis:hover .preis-quelle .arw{transform:translateX(5px)}

@media (hover:none),(max-width:760px){
  .preis-quelle{opacity:1;transform:none}
}

/* ── Kurzfassung und Symptome in Beiträgen ────────────────────────────────
   Die Zielgruppe liest im Stehen. Oben steht deshalb, was drinsteht. */
.kurz{width:100%;max-width:74ch;background:var(--mist);
  padding:clamp(22px,2.8vw,36px) clamp(22px,3vw,42px);
  margin-bottom:clamp(30px,4vw,52px)}
.kurz h2{font-size:.78rem!important;letter-spacing:.16em;text-transform:uppercase;
  font-weight:500;color:var(--ink-faint);margin:0 0 14px!important}
.kurz ul,.prose .kurz ul{display:flex;flex-direction:column;gap:11px;padding-left:1.05em;margin:0}
.kurz li,.prose .kurz li{font-size:clamp(1rem,1.25vw,1.09rem);line-height:1.6;color:var(--ink);
  font-weight:400;list-style:disc}
.kurz li::marker{color:var(--ink-faint)}

.symptome{width:100%;max-width:74ch;background:var(--mist-2);
  padding:clamp(24px,3vw,38px) clamp(22px,3vw,42px);
  margin-block:clamp(24px,3.2vw,44px)}
.symptome h2{font-size:clamp(1.2rem,2vw,1.55rem)!important;font-weight:500;
  letter-spacing:-.022em;line-height:1.25;color:var(--ink);margin:0 0 16px!important}
.symptome ul,.prose .symptome ul{display:flex;flex-direction:column;gap:0;padding:0;margin:0}
.symptome li,.prose .symptome li{list-style:none;font-size:clamp(1rem,1.25vw,1.09rem);line-height:1.6;
  color:var(--ink);padding-block:11px;border-top:1px solid rgba(15,21,25,.12)}
.symptome li:first-child,.prose .symptome li:first-child{border-top:0;padding-top:0}
.symptome li:last-child{padding-bottom:0}
.symptome-fuss,.prose .symptome-fuss{font-size:.93rem;line-height:1.7;color:var(--ink-dim);
  margin-top:16px;padding-top:14px;border-top:1px solid rgba(15,21,25,.12)}

/* ── Die zwei Wege ────────────────────────────────────────────────────────
   Gleiche Grammatik wie die Ebenen: links die Überschrift, rechts der Text.
   Die Ziffern stehen hier zu Recht — es sind zwei aufeinanderfolgende Wege,
   nicht zwei gleichwertige Kacheln. */
.wege{display:flex;flex-direction:column;gap:clamp(48px,7vw,104px);width:100%}
.weg{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);
  gap:clamp(22px,4vw,80px);align-items:start;
  border-top:1px solid var(--line);padding-top:clamp(26px,3.4vw,44px)}
.weg-kopf{display:flex;flex-direction:column;gap:clamp(10px,1.4vw,16px);align-items:flex-start}
.weg-n{font-size:.78rem;font-weight:500;letter-spacing:.18em;color:var(--ink-faint);
  font-variant-numeric:tabular-nums}
.weg-kopf h3{font-size:clamp(1.6rem,3.2vw,2.4rem);font-weight:300;letter-spacing:-.034em;line-height:1.12}
.weg-satz{font-size:clamp(1.02rem,1.5vw,1.2rem);font-weight:500;letter-spacing:-.016em;
  line-height:1.4;color:var(--ink);max-width:24ch}
.weg-text{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,30px);align-items:flex-start}
.weg-text .rows--q > li{font-size:clamp(1rem,1.5vw,1.18rem)}
.weg-text .case-teile p{max-width:none}

/* Phasenteiler zwischen den Ebenen */
.phase{display:flex;flex-direction:column;gap:8px;align-items:flex-start;width:100%;
  border-top:1px solid var(--line);padding-top:clamp(18px,2.2vw,28px)}
.phase-n{font-size:.78rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-faint)}
.phase-satz{font-size:clamp(1.15rem,2vw,1.6rem);font-weight:300;letter-spacing:-.026em;
  line-height:1.3;color:var(--ink)}

/* ── 10 Cases und Beiträge ────────────────────────────────────────────── */
.cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(34px,5vw,80px);width:100%}
.case{display:flex;flex-direction:column;gap:clamp(16px,2vw,26px);align-items:flex-start}
.case-fig{width:100%;aspect-ratio:3/2;overflow:hidden;background:var(--mist-2)}
.case-fig img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.case:hover .case-fig img{transform:scale(1.035)}
.case h3{font-size:clamp(1.3rem,2.4vw,1.9rem);font-weight:300;letter-spacing:-.034em;line-height:1.16;max-width:20ch}

/* Ein Fall in voller Länge (Seite Cases). Gleiche Grammatik wie die Ebenen:
   links das Stichwort, rechts der Text. Das Bild steht ganz oben und über
   die volle Spaltenbreite — es ist die Einleitung, nicht die Illustration. */
.fall{display:flex;flex-direction:column;width:100%}
.fall-fig{width:100%;aspect-ratio:16/7;overflow:hidden;background:var(--mist-2);
  margin-bottom:clamp(30px,4.4vw,64px)}
.fall-fig picture{display:block;width:100%;height:100%}
.fall-fig img{width:100%;height:100%;object-fit:cover}
.fall-wer{font-size:.82rem;line-height:1.7;color:var(--ink-faint);
  margin-bottom:clamp(12px,1.6vw,20px)}
.fall > h2{font-size:clamp(1.9rem,4.6vw,3.4rem);font-weight:300;letter-spacing:-.04em;
  line-height:1.08;max-width:19ch}
.fall-teile{display:flex;flex-direction:column;width:100%;
  margin-top:clamp(36px,5vw,72px);border-top:1px solid var(--line)}
.fall-teil{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.4fr);
  gap:10px clamp(30px,5vw,90px);padding-block:clamp(24px,3.2vw,46px);
  border-bottom:1px solid var(--line)}
.fall-teil h3{font-size:clamp(1.05rem,1.6vw,1.32rem);font-weight:500;letter-spacing:-.018em;
  line-height:1.3;color:var(--ink)}
.fall-teil > div{display:flex;flex-direction:column;gap:16px}
.fall-teil p{font-size:clamp(1.02rem,1.2vw,1.14rem);line-height:1.8;color:var(--ink-dim);max-width:none}
.fall-teil strong{font-weight:600;color:var(--ink)}

/* O-Ton eines Kunden innerhalb eines Falls. --offen markiert einen noch nicht
   gefüllten Platzhalter: sichtbar unfertig, damit er nicht versehentlich live geht. */
.oton{margin-top:clamp(38px,5.4vw,80px)}
.oton .quote{font-size:clamp(1.45rem,3.4vw,2.7rem);font-weight:300;letter-spacing:-.034em;
  line-height:1.24;max-width:17em}
.oton figcaption{margin-top:clamp(16px,2vw,26px);font-size:.86rem;line-height:1.7;
  color:var(--ink-faint)}
.oton--offen{outline:1px dashed var(--ink-faint);outline-offset:clamp(14px,2vw,26px)}
.oton--offen .quote{color:var(--ink-faint)}

.journal{display:flex;flex-direction:column;width:100%;border-top:1px solid var(--line)}
.journal a{
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:8px clamp(28px,5vw,80px);
  padding-block:clamp(22px,3vw,38px);border-bottom:1px solid var(--line);align-items:baseline;
  transition:opacity .3s var(--ease);
}
.journal a:hover{opacity:.55}
.journal h3{font-size:clamp(1.2rem,2.3vw,1.85rem);font-weight:300;letter-spacing:-.034em;line-height:1.2}
.journal p{font-size:.93rem;line-height:1.75;color:var(--ink-dim);max-width:none}

/* Denkbibliothek: Filterzeile. Keine Pillen, keine Kästen — Wörter, unter
   denen beim Aktivieren eine Linie aufgeht. Gleiche Grammatik wie .call. */
.filters{display:flex;flex-wrap:wrap;gap:14px clamp(22px,3vw,44px);width:100%}
.chip{font-family:inherit;font-size:.98rem;font-weight:500;letter-spacing:-.008em;
  color:var(--ink-faint);background:none;border:0;padding:0 0 7px;cursor:pointer;
  position:relative;transition:color .3s var(--ease)}
.chip::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease)}
.chip:hover{color:var(--ink)}
.chip[aria-pressed="true"]{color:var(--ink)}
.chip[aria-pressed="true"]::after{transform:scaleX(1)}

/* Die zwei Gruppen: kurze Gedanken und lange Fachbeiträge. */
.gruppe{width:100%}
.gruppe[hidden]{display:none}
.gruppe + .gruppe{margin-top:clamp(56px,8vw,112px)}
.gruppe-kopf{font-size:clamp(1.15rem,1.8vw,1.5rem);font-weight:500;letter-spacing:-.018em;
  line-height:1.3}
.gruppe-satz{font-size:.93rem;line-height:1.75;color:var(--ink-dim);max-width:54ch;
  margin-block:10px clamp(22px,2.8vw,36px)}
.journal-leer{font-size:.95rem;line-height:1.7;color:var(--ink-faint);padding-block:24px}
.journal-leer[hidden]{display:none}
.journal-wann{font-size:.8rem;letter-spacing:.02em;color:var(--ink-faint);margin-top:8px}

/* Ein einzelner Beitrag. Eine Spalte, viel Zeilenabstand, nichts daneben. */
.beitrag-meta{font-size:.84rem;line-height:1.7;letter-spacing:.02em;color:var(--ink-faint);
  max-width:none}
.prose{display:flex;flex-direction:column;gap:clamp(18px,2.2vw,26px);max-width:80ch}
.prose p{font-size:clamp(1.04rem,1.35vw,1.16rem);line-height:1.85;color:var(--ink-dim)}
.prose strong{font-weight:600;color:var(--ink)}
.prose h2{font-size:clamp(1.45rem,2.6vw,2.05rem);font-weight:300;letter-spacing:-.03em;
  line-height:1.18;color:var(--ink);margin-top:clamp(20px,2.8vw,42px)}
.prose blockquote{font-size:clamp(1.3rem,2.4vw,1.95rem);font-weight:300;letter-spacing:-.03em;
  line-height:1.3;color:var(--ink);max-width:19em;margin-block:clamp(16px,2.2vw,32px)}
.prose ul{display:flex;flex-direction:column;gap:12px;padding-left:1.15em}
.prose li{font-size:clamp(1.02rem,1.3vw,1.12rem);line-height:1.8;color:var(--ink-dim);
  list-style:disc}
.prose a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* Fuss eines Beitrags */
.weiter{display:flex;flex-wrap:wrap;gap:18px clamp(30px,5vw,72px);width:100%;
  border-top:1px solid var(--line);padding-top:clamp(24px,3vw,42px);
  margin-top:clamp(44px,6vw,86px)}

/* Über mich */
.about{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,6vw,100px);align-items:center}
.about-fig{width:100%;overflow:hidden;background:var(--mist-2)}
.about-fig img{width:100%;height:auto}
.about-text{display:flex;flex-direction:column;gap:26px;align-items:flex-start}
.about--text{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:start}
/* Das Porträt auf der Seite über Barbara darf größer stehen als der
   kleine Anriss auf der Startseite. */
.about--portrait{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center}
.about--portrait .about-text{max-width:54ch}
.about--text .about-head{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.about--text .about-text{max-width:52ch}

/* Persönlicher Abschnitt auf der Startseite: erst Gesicht und Haltung,
   darunter Erfahrung links und die drei Kompetenzfelder rechts. */
.home-about{display:flex;flex-direction:column;gap:clamp(46px,6vw,88px)}
.home-about-head{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(280px,.72fr);
  gap:clamp(34px,6vw,100px);align-items:center}
.home-about-title{position:relative;z-index:1}
.home-about-head .d2{max-width:16ch}
.home-about-head .d3{max-width:26ch;margin-top:clamp(20px,2.6vw,32px)}
/* Das Porträt liegt als Wasserzeichen hinter dem Abschnitt: grau, stark
   zurückgenommen, und mit eingebautem Verlauf statt harter Kante. */
.home-about{position:relative}
.home-about-portrait{
  position:absolute;top:clamp(-380px,-24vw,-260px);right:calc(var(--gut) * -0.35);transform:none;
  width:min(34%,420px);margin:0;z-index:0;pointer-events:none;
  opacity:.28;filter:grayscale(1) contrast(.95)}
.home-about-portrait img{width:100%;height:auto;display:block}
.home-about-head,.home-about-body,.home-about-close{position:relative;z-index:1}
.home-about-head{grid-template-columns:minmax(0,1fr)}
.home-about-body{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(42px,7vw,118px);align-items:start}
.home-about-body .intro-text{max-width:40rem}
.home-about-grunde{grid-template-columns:1fr}
.home-about-grunde .grund{min-height:0}
.home-about-close{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start;
  gap:clamp(20px,4vw,70px)}
.home-about-close .d3{max-width:22ch}
.home-about-close .body{max-width:68ch}
.home-about-close .call{grid-column:2}
.home-about .call::after{background:var(--rose)}

/* Auszeichnungen: Jahr, Preis, Beteiligte. Die Jahreszahl ist Angabe,
   keine Zierziffer — deshalb ruhig und in der Farbe des Fliesstexts. */
.ehren{display:flex;flex-direction:column;width:100%;border-top:1px solid var(--line)}
.ehre{display:grid;grid-template-columns:minmax(0,.26fr) minmax(0,1.1fr) minmax(0,1fr);
  gap:6px clamp(22px,4vw,70px);padding-block:clamp(18px,2.4vw,32px);
  border-bottom:1px solid var(--line);align-items:baseline}
.ehre-jahr{font-size:clamp(1rem,1.5vw,1.25rem);font-weight:400;color:var(--ink-faint)}
.ehre h3{font-size:clamp(1.15rem,2vw,1.6rem);font-weight:300;letter-spacing:-.03em;line-height:1.2}
.ehre p{font-size:.93rem;line-height:1.75;color:var(--ink-dim)}

/* ── 11 Formular ──────────────────────────────────────────────────────── */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(38px,6vw,110px);align-items:start}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.4vw,30px);width:100%}
.field{display:flex;flex-direction:column;gap:8px}
.field--wide{grid-column:1/-1}
.field label{font-size:.7rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--light-dim)}
.field input,.field textarea{
  font-family:inherit;font-size:1.05rem;font-weight:400;color:var(--light);background:transparent;
  border:0;border-bottom:1px solid var(--line-inv);padding:10px 0;border-radius:0;
  transition:border-color .3s var(--ease);
}
.field input:hover,.field textarea:hover{border-bottom-color:var(--light-dim)}
.field input:focus,.field textarea:focus{outline:0;border-bottom-color:var(--rose-light)}
.field textarea{resize:vertical;min-height:92px}
.field--trap{position:absolute;left:-9999px}
.form-note{grid-column:1/-1;font-size:.8rem;line-height:1.7;color:rgba(255,255,255,.42);max-width:48ch}
.form-note a{color:var(--light-dim);text-decoration:underline;text-underline-offset:3px}
.form-status{grid-column:1/-1;padding:14px 18px;font-size:.94rem;line-height:1.6;
  border-left:2px solid var(--rose-light);background:rgba(255,255,255,.06)}
.form-status[hidden]{display:none}
.form-send{grid-column:1/-1}

/* ── 12 Footer ────────────────────────────────────────────────────────── */
.foot{background:var(--paper);padding-block:clamp(48px,6vw,90px);border-top:1px solid var(--line)}
.foot-in{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(28px,4vw,52px)}
.foot-id{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(16px,2.2vw,26px)}
.foot-id img{height:clamp(62px,7vw,96px);width:auto}
.foot-id p{font-size:clamp(1.02rem,1.5vw,1.2rem);line-height:1.6;color:var(--ink-dim);max-width:40ch}
.foot-nav{display:flex;flex-wrap:wrap;gap:12px clamp(22px,3vw,44px);font-size:1rem;color:var(--ink-dim)}
.foot-nav a{transition:color .2s var(--ease)}
.foot-nav a:hover{color:var(--ink)}
.foot-legal{width:100%;display:flex;flex-wrap:wrap;gap:10px 28px;
  border-top:1px solid var(--line-soft);padding-top:22px;font-size:.86rem;color:var(--ink-faint)}
.foot-legal button{cursor:pointer;text-decoration:underline;text-underline-offset:3px;color:inherit;font-size:inherit}
.foot-legal button:hover{color:var(--ink-dim)}

/* ── 13 Consent ───────────────────────────────────────────────────────── */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:95;background:var(--paper);
  border-top:1px solid var(--line);box-shadow:0 -10px 40px rgba(15,21,25,.08)}
.consent[hidden]{display:none}
.consent-in{max-width:var(--max);margin-inline:auto;padding:22px var(--gut);
  display:flex;flex-wrap:wrap;gap:18px 40px;align-items:center;justify-content:space-between}
.consent p{font-size:.9rem;line-height:1.65;color:var(--ink-dim);max-width:52ch}
.consent-actions{display:flex;flex-wrap:wrap;gap:12px 30px;align-items:center}
.consent .call{font-size:.98rem;padding-bottom:7px}

/* ── 14 Umbrüche ──────────────────────────────────────────────────────── */
@media (max-width:900px){
  .intro-portrait,.wasser:not(.wasser--moewe){display:none}
  .hero--denk .wasser--moewe{display:block;width:min(82%,620px);right:-20%;opacity:.18}
  .hero--denk .hero-block{width:min(680px,78%)}
  .home-about-head{grid-template-columns:1fr;padding-right:0}
  .home-about-portrait{justify-self:start;max-width:360px}
  .home-about-body{grid-template-columns:1fr}
  .home-about-close{grid-template-columns:1fr}
  .home-about-close .call{grid-column:1}
  .phase-cards{grid-template-columns:1fr}
  .step,.weg{grid-template-columns:1fr;gap:20px}
  .step:nth-of-type(even) .step-fig{order:0}
  .duo,.about,.contact{grid-template-columns:1fr}
  .about-fig{max-width:440px}
  .level,.journal a{grid-template-columns:1fr;gap:10px}
  .fall-teil{grid-template-columns:1fr;gap:12px}
  .ehre{grid-template-columns:1fr;gap:6px}
  .nutzen-gruppe{grid-template-columns:1fr;gap:12px}
  .bahn-kopf{flex-direction:column;align-items:flex-start}
  .bahn-steuer{order:-1}
  .fall-fig{aspect-ratio:3/2}
  .cols{columns:1}
  .hero-block{margin-left:0}
  .hero-veil{background:linear-gradient(180deg,rgba(255,255,255,.30) 0%,rgba(255,255,255,.55) 45%,rgba(255,255,255,.86) 100%)}
  .hero-img{object-position:44% 42%}
}
@media (max-width:640px){
  body{font-size:16px}
  .hero{min-height:min(82vh,620px)}
  .hero-next{font-size:.92rem}
  .form{grid-template-columns:1fr}
  .burger-label{display:none}
  .consent-in{gap:14px}
  .hero--denk .wasser--moewe{width:115%;right:-48%;opacity:.13}
  .hero--denk .hero-block{width:100%}
}
@media (hover:none){
  .stufe-more{opacity:1;transform:none}
}

/* ── 15 Bewegung ──────────────────────────────────────────────────────────
   Nur eines bewegt sich beim Scrollen: Zeilen und Bilder heben sich leicht
   an, sobald sie in den Blick kommen — aus einem sichtbaren Ruhezustand.
   Ohne JavaScript und bei prefers-reduced-motion steht alles sofort. */
.js .rise{opacity:.999;transform:translateY(14px);transition:transform .8s var(--ease),opacity .8s var(--ease)}
.js .rise.is-in{transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important}
  .js .rise{transform:none}
  .stufe-more,.quote-second > span,.motion-arrow{opacity:1;transform:none;clip-path:none}
  .motion-arrow{width:90px}
  .motion-line{opacity:1;transform:none}
  .hero-img{animation:none}
}


/* ── Nachtrag Version 02 ──────────────────────────────────────────────────
   Die Denkbibliothek trägt die Beiträge jetzt auf einer Seite: jede Zeile
   klappt auf. Ohne JavaScript, mit <details>. Dazu die kleine Fußnote. */
.small{font-size:.88rem;line-height:1.75;color:var(--ink-faint)}

.journal details{border-bottom:1px solid var(--line)}
.journal details summary{border-bottom:0}
.journal details[open] summary{border-bottom:1px solid var(--line-soft)}
.journal summary{
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:8px clamp(28px,5vw,80px);
  padding-block:clamp(22px,3vw,38px);border-bottom:1px solid var(--line);align-items:baseline;
  cursor:pointer;list-style:none;transition:opacity .3s var(--ease);
  position:relative;padding-right:34px;
}
.journal summary::-webkit-details-marker{display:none}
.journal summary::after{content:'+';position:absolute;right:0;top:clamp(22px,3vw,38px);
  font-size:1.45rem;font-weight:300;line-height:1;color:var(--ink-faint);
  transition:color .3s var(--ease)}
.journal details[open] summary::after{content:'\2212'}
.journal summary:hover{opacity:.55}
.journal summary:focus-visible{outline:2px solid var(--rose);outline-offset:4px}
.journal-inhalt{padding:clamp(30px,4vw,58px) 0 clamp(46px,6vw,82px);max-width:80ch}
.journal .prose p{font-size:clamp(1.04rem,1.35vw,1.16rem);line-height:1.85}
.journal details .journal-wann{display:block}
@media (max-width:900px){
  .journal summary{grid-template-columns:1fr;gap:10px}
}


/* ── Nachtrag: die vier Fragen ────────────────────────────────────────────
   Zwei Spalten, rechts gesetzt, in der Größe des Fließtexts — die Fragen
   sollen gelesen und nicht deklamiert werden. */
.rows--zwei{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(28px,4vw,72px);width:100%;max-width:none;margin-left:auto;
  border-top:1px solid var(--line)}
.rows--zwei > li{font-size:clamp(1.08rem,1.18vw,1.2rem);font-weight:400;
  letter-spacing:0;line-height:1.7;color:var(--ink);
  border-bottom:1px solid var(--line-soft);padding-block:clamp(14px,1.8vw,22px)}
.rows--zwei > li:nth-child(2){border-top:0}
@media (max-width:760px){
  .rows--zwei{grid-template-columns:1fr}
}

/* Das Porträt als ruhige Fläche am rechten Rand. Grau, stark zurückgenommen,
   und auf schmalen Schirmen gar nicht erst da. */
/* Das Porträt nimmt die rechte Hälfte des Abschnitts ein. Oben und unten
   läuft es weich aus, nach links ebenso — Fläche, keine Kachel. */
.wasser--barbara{
  top:50%;right:0;bottom:auto;transform:translateY(-50%);
  width:min(50%,720px);height:auto;opacity:.28;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 24%,#000 76%,transparent 100%),
                     linear-gradient(to right,transparent 0,#000 46%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 24%,#000 76%,transparent 100%),
             linear-gradient(to right,transparent 0,#000 46%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}
.wasser--barbara picture{display:block;width:100%}
.wasser--barbara img{width:100%;height:auto}


/* Die Turbine als Fläche im zweiten Abschnitt: gespiegelt, damit sie sich
   vom Hero unterscheidet, und weit nach rechts aus dem Satzspiegel geschoben. */
.wasser--turbine{
  --fan-turn:0deg;top:50%;right:calc(var(--gut) * -.55);
  transform:translateY(-50%) scaleX(-1) rotate(var(--fan-turn));transform-origin:58% 50%;
  width:min(78%,1080px);opacity:.13;filter:grayscale(.92) saturate(.12) brightness(1.22) contrast(.72);
  -webkit-mask-image:radial-gradient(72% 70% at 40% 50%,#000 24%,rgba(0,0,0,.5) 56%,transparent 86%);
  mask-image:radial-gradient(72% 70% at 40% 50%,#000 24%,rgba(0,0,0,.5) 56%,transparent 86%);
}


/* ── Bildfläche im Abschnitt „Zwei Wege" ──────────────────────────────────
   Zwei Motive am rechten Rand, eines je Weg. Nach links laufen sie aus,
   damit der Text darauf ruhig lesbar bleibt. */
.wasser--weg1,.wasser--weg2{
  right:var(--gut);width:min(29%,390px);height:34%;opacity:.26;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.4) 34%,#000 66%,#000 86%,transparent 100%),
                     linear-gradient(to bottom,transparent 0,#000 16%,#000 84%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.4) 34%,#000 66%,#000 86%,transparent 100%),
             linear-gradient(to bottom,transparent 0,#000 16%,#000 84%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}
.wasser--weg1{top:12%}
.wasser--weg2{top:auto;bottom:10%}
.wasser--weg1 picture,.wasser--weg2 picture,
.wasser--weg1 img,.wasser--weg2 img{width:100%;height:100%}
.wasser--weg1 img,.wasser--weg2 img{object-fit:cover}
.wasser--weg1 img{object-position:center}
.wasser--weg2 img{object-position:center 46%}

/* In „Zwei Wege“ ist die Erläuterung die zweite Informationsebene. */
@media (hover:hover) and (pointer:fine){
  .weg-text{opacity:0;transform:translateY(14px);transition:opacity .48s var(--ease),transform .48s var(--ease)}
  .weg:hover .weg-text,.weg:focus-within .weg-text{opacity:1;transform:none}
}

/* ── Bewegungs- und Hoverlogik der Startseite ─────────────────────────── */
.arw{color:var(--rose);display:inline-block;transition:transform .4s var(--ease)}
a:hover .arw,button:hover .arw{transform:translateX(10px)}

.hero{min-height:100svh}
.hero-img{object-position:8% 46%;transform-origin:20% 48%;animation:hero-fan-in 2.8s var(--ease) both}
@keyframes hero-fan-in{0%{transform:scale(1.36) rotate(-5deg)}100%{transform:scale(1.26) rotate(1deg)}}
.hero-eyebrow{font-size:clamp(1.08rem,1.5vw,1.35rem);font-weight:800;letter-spacing:.01em;
  text-transform:none;color:var(--rose)}
.hero .d3,.hero .body{font-size:clamp(1.2rem,1.8vw,1.5rem);line-height:1.5;font-weight:400}
.hero .call{transition:color .3s var(--ease),font-weight .3s var(--ease)}
.hero .call:hover,.hero .call:focus-visible{color:var(--rose);font-weight:700}
.hero-scroll{position:absolute;left:50%;bottom:clamp(18px,2.6vw,34px);z-index:2;transform:translateX(-50%);
  display:grid;place-items:center;width:52px;height:52px;border:1px solid var(--line);border-radius:50%;
  color:var(--rose);font-size:1.55rem;opacity:1;transition:opacity .42s var(--ease),transform .42s var(--ease)}
.hero-scroll:hover{transform:translateX(-50%) translateY(6px)}
.hero.is-scrolled .hero-scroll{opacity:0;transform:translateX(-50%) translateY(12px);pointer-events:none}

.challenge-grid{background:transparent;gap:clamp(12px,1.5vw,22px);border-top:0;
  width:calc(100% - clamp(40px,10vw,150px));margin-left:auto}
.challenge-grid li{position:relative;border:1px solid var(--line);background:rgba(255,255,255,.18);overflow:hidden}
.challenge-grid li::before{content:'';position:absolute;left:0;bottom:0;width:3px;height:100%;background:var(--rose);
  transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease)}
.challenge-grid li:hover{background:rgba(255,255,255,.18);color:var(--ink);transform:none}
.challenge-grid li:hover::before{transform:scaleY(1)}

.motion-arrow{position:relative;display:block;width:0;height:3px;margin:0 0 24px;background:var(--rose);
  font-size:0;line-height:0;opacity:0;transform:translateX(-70px)}
.motion-arrow::after{content:'';position:absolute;right:-1px;top:-4px;width:9px;height:9px;
  border-top:2px solid var(--rose);border-right:2px solid var(--rose);transform:rotate(45deg)}
.consequence-wrap.is-active .motion-arrow{animation:problem-arrow .9s var(--ease) both}
@keyframes problem-arrow{0%{opacity:0;width:0;transform:translateX(-70px)}35%{opacity:1}
  100%{opacity:1;width:clamp(72px,8vw,112px);transform:translateX(0)}}
.problem-consequence{transition:none;animation:none!important}
.problem-consequence:hover{font-weight:600;color:var(--ink)}

.motion-line{width:56px;background:var(--rose);transform:scaleX(0);transform-origin:left;opacity:0}
.motion-line.is-active{animation:line-grow .9s var(--ease) both}
@keyframes line-grow{0%{opacity:0;transform:scaleX(0)}20%{opacity:1}100%{opacity:1;transform:scaleX(1)}}

.phase-tabs button{position:relative}
.phase-tabs button[aria-selected="false"]{background:var(--mist)!important}
.phase-tabs button::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--rose);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.phase-tabs button[aria-selected="true"]{background:var(--paper)!important;color:var(--ink)}
.phase-tabs button[aria-selected="true"]::after{transform:scaleX(1)}

.stufe-more{max-height:0;overflow:hidden;padding-top:0;border-top:0;margin-top:0;
  transition:max-height .8s var(--ease),padding-top .8s var(--ease),margin-top .8s var(--ease),
    opacity .65s var(--ease),transform .65s var(--ease)}
.stufe:hover .stufe-more,.stufe:focus-within .stufe-more{max-height:190px;padding-top:14px;
  border-top:1px solid var(--line-soft);margin-top:auto}
.process-conclusion{position:relative;margin-top:clamp(22px,3vw,42px);padding-left:clamp(18px,2vw,28px);
  transition:margin-top .5s var(--ease)}
.process-conclusion::before{content:'';position:absolute;left:0;bottom:0;width:3px;height:100%;background:var(--rose);
  transform:scaleY(0);transform-origin:bottom}
.process-conclusion.is-active::before{animation:bar-up .75s var(--ease) both}
.phase-cards:has(.stufe:hover) + .process-conclusion{margin-top:clamp(52px,7vw,104px)}
@keyframes bar-up{to{transform:scaleY(1)}}

.weg{position:relative;padding:clamp(26px,3.4vw,44px);margin-inline:calc(clamp(26px,3.4vw,44px) * -1);
  overflow:hidden;transition:background .9s var(--ease),color .75s var(--ease)}
.weg::before{content:'';position:absolute;left:0;bottom:0;width:4px;height:100%;background:var(--rose);
  transform:scaleY(0);transform-origin:bottom;transition:transform .52s var(--ease)}
.weg:hover,.weg:focus-within{background:rgba(48,54,59,.34);color:var(--paper);transform:none;
  backdrop-filter:blur(2px)}
.weg:hover::before,.weg:focus-within::before{transform:scaleY(1)}
.weg-n{font-family:'Montserrat Variable','Montserrat',Arial,sans-serif;font-size:clamp(3.1rem,6vw,6rem);font-weight:300;
  letter-spacing:.03em;line-height:.9;color:rgba(52,59,64,.34)}
.weg:hover .weg-n,.weg:hover .weg-satz,.weg:hover .body,.weg:hover .d3,
.weg:focus-within .weg-n,.weg:focus-within .weg-satz,.weg:focus-within .body,.weg:focus-within .d3{color:var(--paper)}

.grund{overflow:hidden;padding-inline:clamp(16px,2vw,26px);transition:background .4s var(--ease),color .4s var(--ease)}
.grund::after{background:var(--rose)}
.grund:hover,.grund:focus-within{background:rgba(70,77,82,.12);color:var(--ink)}
.grund:hover h3,.grund:hover .grund-text,.grund:focus-within h3,.grund:focus-within .grund-text{color:var(--ink)}
.home-about-close--shade{background:var(--mist-2);padding:clamp(28px,4vw,58px)}

@media (max-width:900px){
  .hero{min-height:100svh}
  .weg{margin-inline:0}
  .challenge-grid{width:100%}
}


/* ── Der Wechsel zwischen Phase 01 und 02 ─────────────────────────────────
   Weich statt hart: Die alte Karte blendet aus, die neue kommt mit einer
   kleinen Aufwärtsbewegung nach. Der Reiter selbst fährt seine Linie mit.
   Bei „Bewegung reduzieren" passiert nichts davon. */
[data-phase-card]{transition:opacity .22s var(--ease)}
[data-phase-card].ist-weg{opacity:0}
[data-phase-card].kommt{animation:phase-ein .55s var(--ease) var(--verzug,0ms) both}
@keyframes phase-ein{
  0%{opacity:0;transform:translateY(14px)}
  100%{opacity:1;transform:none}
}
.phase-tabs button{transition:color .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease)}
.phase-tabs button::after{transition:transform .5s var(--ease)}
@media (prefers-reduced-motion:reduce){
  [data-phase-card].kommt{animation:none}
  [data-phase-card]{transition:none}
}


/* ── Nachtrag: Unterseiten ────────────────────────────────────────────────
   Die Seitenmarke steht über dem Titel und sagt in einem Wort, wo man ist.
   Kein Etikett in Versalien — nur eine ruhige Zeile in der Markenfarbe. */
.seiten-marke{font-size:clamp(1rem,1.3vw,1.18rem);font-weight:600;letter-spacing:.01em;
  color:var(--rose);margin-bottom:clamp(14px,1.8vw,22px)}

/* Weniger Leerraum über den Titeln der Unterseiten. */
.hero--still{min-height:0;padding-top:calc(var(--head-h) + clamp(34px,4.6vw,72px));
  padding-bottom:clamp(30px,4vw,56px)}
.hero--still + .sec,.hero--still + .sec--mist{padding-top:clamp(40px,5vw,78px)}
.hero--denk{min-height:min(52vh,560px)}
.hero--denk .wasser--moewe{opacity:.62;filter:none}

/* Der Pfeil zeichnet sich von links, sobald er ins Bild kommt. */
.pfeil-marke--zeichnet svg path{stroke-dasharray:74;stroke-dashoffset:74}
.pfeil-marke--zeichnet.is-in svg path{animation:pfeil-zeichnen .95s var(--ease) both}
@keyframes pfeil-zeichnen{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .pfeil-marke--zeichnet svg path{stroke-dashoffset:0}
  .pfeil-marke--zeichnet.is-in svg path{animation:none}
}

/* „Gedanken" und „Fachliche Beiträge" führen ihre Gruppe an — also größer
   als die Zeile darunter. */
.gruppe-kopf{font-size:clamp(1.5rem,2.6vw,2.15rem);font-weight:400;letter-spacing:-.026em;
  line-height:1.2}
.gruppe-satz{font-size:clamp(1rem,1.15vw,1.08rem);max-width:58ch}

/* Beim Darüberfahren wird die Zeile kräftiger und eine pinke Linie wischt
   von links durch. Sie liegt auf der vorhandenen Trennlinie. */
.journal summary{position:relative;transition:opacity .3s var(--ease)}
.journal summary:hover{opacity:1}
.journal summary h3{transition:font-weight .25s var(--ease),color .25s var(--ease)}
.journal summary:hover h3,.journal details[open] summary h3{font-weight:500;color:var(--ink)}
.journal summary::before{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--rose);transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease)}
.journal summary:hover::before,.journal summary:focus-visible::before,
.journal details[open] summary::before{transform:scaleX(1)}
.journal summary::after{transition:color .3s var(--ease)}
.journal summary:hover::after{color:var(--rose)}
@media (prefers-reduced-motion:reduce){
  .journal summary::before{transition:none}
}

/* Auf schmalen Schirmen liegt das Porträt sonst über dem Text. */
@media (max-width:900px){ .home-about-portrait{display:none} }

/* ── Unterseiten-Hero mit Bild ─────────────────────────────────────────
   Wie auf der Startseite ein randloses Bild — aber flacher und oben
   ausgerichtet: die Überschrift steht direkt unter der Navigation,
   nicht am unteren Rand einer bildschirmhohen Fläche. */
.hero--bild{min-height:0;align-items:flex-start;background:var(--mist);
  padding-top:calc(var(--head-h) + clamp(30px,3.8vw,58px))}
.hero--bild .hero-in{padding-bottom:clamp(36px,4.6vw,68px);position:relative;z-index:1}
.hero--bild .hero-block{margin-left:0;width:min(660px,100%);gap:clamp(14px,1.8vw,24px)}
.hero--bild .seiten-marke{margin-bottom:0}
.hero--bild .d1{max-width:20ch;font-size:clamp(1.9rem,4.2vw,3.4rem);line-height:1.14}
.hero--bild .hero-img{transform:none;animation:none;filter:none}
.hero--bild + .sec,.hero--bild + .sec--mist{padding-top:clamp(40px,5vw,78px)}
@media (prefers-reduced-motion:reduce){ .hero--bild .hero-img{animation:none} }

/* Über mich: Barbara steht rechts im Bild, der Text links daneben.
   Der Schleier hellt nur die linke Hälfte auf. */
.hero--buehne .hero-img{object-position:88% 30%}
.hero--buehne .hero-veil{background:linear-gradient(92deg,
  rgba(255,255,255,.88) 0%,rgba(255,255,255,.82) 38%,
  rgba(255,255,255,.5) 62%,rgba(255,255,255,.14) 82%,rgba(255,255,255,0) 100%)}

/* Denkbibliothek: der Fuchs steht links und schaut in den Text hinein.
   Die Überschrift steht rechts in Weiß — dafür dunkelt der Schleier die
   helle rechte Bildhälfte ab, sonst wäre sie nicht zu lesen. */
.hero--fuchs .hero-img{object-position:18% 50%}
/* Zwei Schleier übereinander: oben ein schmaler Streifen, damit Logo und
   Menütaste in Weiß stehen können — und quer der Verlauf nach rechts, auf dem
   die weiße Überschrift liegt. */
.hero--fuchs .hero-veil{background:
  linear-gradient(180deg,rgba(10,16,21,.58) 0,rgba(10,16,21,.2) 118px,rgba(10,16,21,0) 210px),
  linear-gradient(100deg,
  rgba(10,16,21,0) 0%,rgba(10,16,21,.10) 30%,rgba(10,16,21,.52) 52%,
  rgba(10,16,21,.80) 74%,rgba(10,16,21,.88) 100%)}
.hero--fuchs .hero-block{margin-left:auto;margin-right:0;align-items:flex-end;
  text-align:right;width:min(640px,100%)}
.hero--fuchs .d1{color:var(--light);max-width:18ch}
.hero--fuchs .body{color:var(--light-dim)}
.hero--fuchs .seiten-marke{color:var(--rose-light)}

/* Schmale Schirme: das Bild trägt keinen Text mehr nebeneinander —
   der Schleier legt sich über die ganze Fläche. */
@media (max-width:760px){
  .hero--buehne .hero-img{object-position:80% 22%}
  .hero--buehne .hero-veil{background:linear-gradient(180deg,
    rgba(255,255,255,.72) 0%,rgba(255,255,255,.86) 46%,rgba(255,255,255,.95) 100%)}
  .hero--fuchs .hero-veil{background:linear-gradient(180deg,
    rgba(10,16,21,.42) 0%,rgba(10,16,21,.74) 46%,rgba(10,16,21,.88) 100%)}
  .hero--fuchs .hero-block{width:100%}
}

/* Über dem dunklen Fuchs-Hero müssen Logo und Menütaste hell sein.
   Sobald die Kopfleiste beim Scrollen weiß wird, kippen beide zurück. */
.seite-denk .brand img,.seite-denk .burger{transition:filter .4s var(--ease),color .4s var(--ease)}
.seite-denk:not(.is-locked) .head:not(.is-stuck) .brand img{filter:invert(1)}
.seite-denk:not(.is-locked) .head:not(.is-stuck) .burger{color:var(--light)}
@media (max-width:760px){
  .seite-denk:not(.is-locked) .head:not(.is-stuck) .brand img{filter:invert(1)}
}