/* ==========================================================================
   Startseite
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  height: 100svh;          /* svh, damit die Adressleiste auf dem Handy nicht springt */
  min-height: 640px;
  overflow: hidden;
  background: var(--navy-hell);
}

.hero__bilder { position: absolute; inset: 0; overflow: hidden; }

.hero__bild {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--pos, center);
  opacity: 0;
  animation: diaschau 40s var(--kurve) var(--takt) infinite,
             kenburns 40s linear var(--takt) infinite;
}

/* diaschau und kenburns stehen in stil.css, der Abschnitt
   "Was passiert in einer Session" benutzt dieselben. */

/* Faerbt die Fotos in den Navy-Ton ein */
.hero__ton {
  position: absolute; inset: 0;
  background: var(--navy-hell);
  mix-blend-mode: color;
  opacity: .86;
}
.hero__verlauf {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgb(48 72 110 / .82) 0%, rgb(48 72 110 / .58) 38%,
    rgb(48 72 110 / .5) 62%, rgb(60 87 124 / .52) 88%,
    rgb(77 102 133 / .55) 100%);
}
.hero__tiefe {
  position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 30% 45%,
    rgb(48 72 110 / 0) 0%, rgb(30 45 70 / .55) 100%);
}
/* Weicher Uebergang in die naechste Sektion */
.hero__ausklang {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 34%; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg,
    rgb(77 102 133 / 0) 0%, rgb(77 102 133 / .55) 45%,
    rgb(77 102 133 / .9) 78%, var(--taubenblau) 96%);
}

.hero__inhalt {
  position: relative; z-index: 3;
  height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  max-width: var(--breite-fuss);
  margin-inline: auto;
  padding: 0 var(--pad-x);
}
.hero__text { max-width: 960px; animation: aufsteigen 1400ms var(--kurve) both; }

@keyframes aufsteigen {
  from { opacity: 0; transform: translateY(14px) }
  to   { opacity: 1; transform: none }
}

.hero__eyebrow {
  margin: 0 0 clamp(20px, 3vw, 34px);
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  color: rgb(246 241 243 / .72);
}
.hero__titel {
  font-size: clamp(34px, 6.6vw, 96px);
  line-height: 1.04; letter-spacing: -.015em;
  color: var(--creme);
}
.hero__titel em { font-style: italic; color: var(--apricot); }

.hero__strich {
  display: block;
  width: clamp(120px, 18vw, 260px); height: 1px;
  margin-top: clamp(28px, 4vw, 52px);
  background: linear-gradient(90deg, var(--apricot), rgb(248 204 193 / 0));
}
.hero__lead {
  margin: clamp(24px, 3vw, 38px) 0 0;
  max-width: 640px;
  font-size: clamp(16px, 1.35vw, 19px); line-height: 1.65;
  color: rgb(246 241 243 / .82);
}
.hero__ort {
  margin: clamp(22px, 2.6vw, 34px) 0 0;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  /* Der Entwurf hat hier .6. Das ergibt gemessen 4.43 und faellt fuer
     11px-Text knapp durch die Vorgabe von 4.5. .68 ist der naechste
     Wert, der sie schafft, und bleibt nah am Entwurf. */
  color: rgb(246 241 243 / .68);
}

/* Atemzeichen unten: Einatmen, Ausatmen, im Zehnsekundentakt */
.atemzeichen {
  position: absolute; left: 0; right: 0; bottom: 34px; z-index: 3;
  display: flex; justify-content: center; align-items: center; gap: 14px;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: rgb(246 241 243 / 0.9);
}
.atemzeichen__wort { position: relative; display: inline-block; min-width: 9ch; text-align: right; }
.atemzeichen__ein { animation: atem-ein 10s steps(1, end) infinite; }
.atemzeichen__aus { position: absolute; right: 0; top: 0; white-space: nowrap;
                    animation: atem-aus 10s steps(1, end) infinite; }
.atemzeichen__punkt {
  display: block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--apricot);
  animation: atem-puls 10s cubic-bezier(.42,0,.58,1) infinite;
}
@keyframes atem-ein { 0%,49.9% { opacity: 1 } 50%,100% { opacity: 0 } }
@keyframes atem-aus { 0%,49.9% { opacity: 0 } 50%,100% { opacity: 1 } }
@keyframes atem-puls { 0%,100% { transform: scale(.7); opacity: .45 } 50% { transform: scale(1.35); opacity: 1 } }

/* --- Bruecke ------------------------------------------------------------- */

.bruecke { padding-block: clamp(96px, 12vw, 170px); }

.bruecke__raster {
  max-width: var(--breite-seite);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.bruecke__bild {
  grid-column: 1 / span 5; grid-row: 1;
  position: sticky; top: clamp(84px, 10vh, 124px);
  align-self: start;
  padding: clamp(30px, 4vw, 60px) 0 clamp(46px, 6vw, 90px);
}
.bruecke__flaeche {
  position: absolute;
  left: calc(-1 * (max(0px, (100vw - 1360px) / 2) + var(--pad-x)));
  top: clamp(74px, 9vw, 130px);
  right: calc(-1 * clamp(42px, 4.6vw, 66px));
  bottom: clamp(0px, 1vw, 14px);
  background: var(--apricot);
  transform-origin: left center;
  animation: flaeche-atmen 10s cubic-bezier(.42,0,.58,1) infinite;
  z-index: 0;
}
@keyframes flaeche-atmen { 0%,100% { transform: scaleX(.985) } 50% { transform: scaleX(1) } }

.bruecke__rahmen-bild {
  position: relative; z-index: 2;
  width: 100%; aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--navy-tiefst);
}
.bruecke__rahmen-bild img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 32%;
  filter: grayscale(1) contrast(1.08) brightness(.95);
}
.bruecke__rahmen {
  position: absolute; z-index: 3; pointer-events: none;
  left: clamp(26px, 3.4vw, 54px);
  top: clamp(56px, 7vw, 110px);
  right: calc(-1 * clamp(20px, 2.6vw, 42px));
  bottom: clamp(20px, 2.6vw, 42px);
  border: 1px solid rgb(246 241 243 / .32);
}
.bruecke__marke {
  position: absolute; z-index: 5;
  right: calc(-1 * clamp(42px, 4.6vw, 66px) + 13px);
  bottom: clamp(28px, 3.4vw, 54px);
  writing-mode: vertical-rl;
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  /* Der Ton aus dem Entwurf erreichte auf Apricot nur 1.24 */
  color: var(--navy);
}

.bruecke__text { grid-column: 7 / span 6; }

.bruecke__welt {
  display: grid; grid-template-columns: auto 1fr;
  gap: clamp(18px, 2.4vw, 34px);
  margin-bottom: clamp(38px, 4.4vw, 58px);
}
.bruecke__takt { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 8px; }
.bruecke__punkt {
  display: block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--apricot);
  animation: atem-puls 10s cubic-bezier(.42,0,.58,1) infinite;
}
.bruecke__linie {
  display: block; width: 1px; flex: 1 1 auto;
  background: linear-gradient(180deg, rgb(248 204 193 / .7), rgb(246 241 243 / .12));
  transform-origin: top;
  animation: linie-atmen 10s cubic-bezier(.42,0,.58,1) infinite;
}
@keyframes linie-atmen { 0%,100% { transform: scaleY(.82) } 50% { transform: scaleY(1) } }

.bruecke__vorsatz {
  margin: 0 0 clamp(16px, 1.8vw, 22px);
  font-size: clamp(15px, 1.15vw, 17px); line-height: 1.6;
  color: rgb(246 241 243 / .72);
}
/* margin-top ausdruecklich auf 0: die Grundregel p + p in stil.css
   setzt 1.4em, und bei 44px Schrift sind das 58 Pixel. Im Entwurf
   traegt nur der Absatz darueber einen Abstand von 22. */
.bruecke__laut {
  margin-top: 0;
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: clamp(10px, 1.2vw, 18px);
  font-family: var(--schrift-headline);
  font-size: clamp(26px, 2.9vw, 44px); line-height: 1.1; letter-spacing: .02em;
  color: rgb(246 241 243 / .9);
}
.bruecke__laut > span { animation: rauschen 9s ease-in-out infinite; }
.bruecke__laut > span:nth-of-type(3) { animation-delay: 1.1s; }
.bruecke__laut > span:nth-of-type(5) { animation-delay: 2.2s; }
.bruecke__kringel { font-size: .5em; color: rgb(248 204 193 / 0.85); animation: none !important; }
@keyframes rauschen {
  0%   { opacity: .9; letter-spacing: .02em }
  45%  { opacity: .22; letter-spacing: .12em }
  100% { opacity: .9; letter-spacing: .02em }
}

.bruecke__titel {
  margin: 0 0 clamp(28px, 3.4vw, 42px);
  font-size: clamp(30px, 4.6vw, 68px); line-height: 1.08; letter-spacing: -.02em;
  color: var(--creme);
}
.bruecke__absatz {
  font-size: clamp(16px, 1.2vw, 18px); line-height: 1.85;
  color: rgb(246 241 243 / .92);
}
.bruecke__absatz + .bruecke__absatz,
.bruecke__merksatz + .bruecke__absatz { margin-top: clamp(22px, 2.6vw, 32px); }
.bruecke__absatz .zahl {
  font-family: var(--schrift-headline); font-size: 1.5em; color: var(--apricot);
}
.bruecke__merksatz {
  margin: clamp(28px, 3.4vw, 42px) 0 0;
  font-family: var(--schrift-headline); font-style: italic;
  font-size: clamp(20px, 1.7vw, 25px); line-height: 1.5;
  color: var(--creme);
}

/* --- Halber Trenner: Farbwechsel mit Linie auf der Naht ------------------- */

.halbtrenner {
  position: relative;
  width: 100%;
  height: clamp(60px, 12vw, 170px);
}
.halbtrenner::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; transform: translateY(-.5px);
  background: rgb(246 241 243 / .3);
}
.halbtrenner--navyhell-tauben { background: linear-gradient(180deg, var(--navy-hell) 50%, var(--taubenblau) 50%); }
.halbtrenner--apricot-navy    { background: linear-gradient(180deg, var(--apricot) 50%, var(--navy) 50%); }
.halbtrenner--apricot-navy::after { background: rgb(140 140 140 / .4); }

/* --- Was sich veraendern darf -------------------------------------------- */

.wandel { padding-top: 0; padding-bottom: clamp(48px, 6vw, 90px); }
/* Entwurf .85, das ergibt auf Taubenblau 4.34 und faellt fuer 11px
   durch. .88 schafft 4.52. */
.wandel .eyebrow { margin-bottom: clamp(36px, 4.4vw, 56px); color: rgb(246 241 243 / .88); }

.wandel__karten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 20px);
}

.wandelkarte {
  padding: clamp(26px, 3vw, 42px);
  border: 1px solid rgb(246 241 243 / .22);
  background: rgb(246 241 243 / .05);
  transition: background 320ms var(--kurve), border-color 320ms var(--kurve),
              transform 320ms var(--kurve);
}

/* Jede Karte hat ihre eigene Farbe, so wie im Entwurf. Vorher wurden
   alle drei apricot.
   Die Textfarbe steht bei der Karte und nicht in der Hover-Regel, weil
   sie nicht ueberall dieselbe sein kann: Auf Nebelblau traegt --navy
   nur 3.58 und faellt fuer kleinen Text durch. Siehe stil.css. */
.wandelkarte--apricot { --karte-farbe: var(--apricot);   --karte-text: var(--navy); }
.wandelkarte--creme   { --karte-farbe: var(--creme);     --karte-text: var(--navy); }
.wandelkarte--nebel   { --karte-farbe: var(--nebelblau); --karte-text: var(--navy-tiefst); }

.wandelkarte:hover, .wandelkarte:focus-within {
  background: var(--karte-farbe);
  border-color: var(--karte-farbe);
  color: var(--karte-text);
  transform: translateY(-4px);
}
.wandelkarte__zeichen { margin-bottom: clamp(18px, 2vw, 26px); }
.wandelkarte__titel {
  margin: 0 0 clamp(10px, 1.2vw, 16px);
  font-size: clamp(20px, 1.7vw, 25px); line-height: 1.2;
}
.wandelkarte__text {
  font-size: 14px; line-height: 1.7;
  /* Der Entwurf hat creme mit .85 Deckung. Auf dem leicht aufgehellten
     Kartengrund ergibt das 3.88 und faellt fuer 14px-Text durch die
     Vorgabe von 4.5; auch .95 kommt nur auf 4.39. Erst volle Deckung
     schafft sie. Das ist die einzige Stelle auf dieser Seite, an der
     der Entwurf nicht uebernommen werden konnte. */
  color: var(--creme);
}
/* Beim Ueberfahren gilt die Farbe der Karte, nicht die gedaempfte. */
.wandelkarte:hover .wandelkarte__text,
.wandelkarte:focus-within .wandelkarte__text { color: inherit; }

/* Laeuft im Entwurf einzeilig ueber die volle Breite durch.
   Die Schriftgroesse skaliert mit, damit der Satz nicht ueberlaeuft. */
.wandel__schluss {
  margin: clamp(36px, 4.6vw, 64px) 0 0;
  width: 100%;
  white-space: nowrap;
  font-family: var(--schrift-headline);
  /* 3.12vw statt der 3.15vw aus dem Entwurf. Mit 3.15 ragt der Satz
     zwischen 1040 und 1320px Bildschirmbreite um 3 bis 5 Pixel aus
     seinem Kasten und das letzte Zeichen wird abgeschnitten -- in
     Zwanzigerschritten nachgemessen. 3.12 ist der groesste Wert, der
     nirgends ueberlaeuft; bei 1440px bleibt es ohnehin bei 42px. */
  font-size: clamp(18px, 3.12vw, 42px); line-height: 1.28; letter-spacing: -.01em;
  color: var(--creme);
}

/* --- Die Methode --------------------------------------------------------- */

.methode { padding: clamp(96px, 12vw, 170px) 0 56px; position: relative; z-index: 2; }
.methode__raster {
  /* Im Entwurf gilt die Hoechstbreite fuer den Inhalt, nicht fuer den
     Kasten -- dort ist dieser Container ohne border-box gesetzt. Bei
     uns gilt border-box, deshalb das Padding dazurechnen. Ohne das war
     die Textspalte 100 Pixel schmaler als im Entwurf und der Absatz
     brach anders um. */
  max-width: calc(var(--breite-nav) + 2 * var(--pad-x));
  margin-inline: auto;
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(24px, 3vw, 44px) clamp(20px, 3vw, 40px);
  align-items: start;
}
/* will-change, weil startseite.js beide Spalten beim Scrollen
   verschiebt. */
.methode__bild {
  grid-column: 7 / span 6; grid-row: 1;
  position: relative;
  will-change: transform;
  align-self: stretch;
  min-height: clamp(320px, 42vw, 560px);
  /* laeuft rechts aus dem Raster heraus bis an den Seitenrand */
  margin-right: calc(-1 * (max(0px, (100vw - 1240px) / 2) + var(--pad-x)));
}
/* Das Bild laeuft oben und unten aus der Sektion heraus:
   oben genau um die Sektionspolsterung, unten darueber hinaus
   in den folgenden Farbtrenner hinein. */
.methode__bild-innen {
  position: absolute;
  left: 0; right: 0;
  top: calc(-1 * clamp(96px, 12vw, 170px));
  bottom: calc(-56px - clamp(48px, 6vw, 85px));
  overflow: hidden;
  z-index: 2;
}
/* Der Kasten ist breiter im Verhaeltnis als das Foto, oben und unten
   werden zusammen 196 Pixel abgeschnitten. 100% legt diesen Schnitt
   ganz nach unten: die Person sitzt damit so hoch im Bild wie es der
   Ausschnitt hergibt. 50% waere die Mitte, 0% ganz oben. */
.methode__bild img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
}
.methode__marke {
  position: absolute; left: 22px; bottom: 22px; z-index: 1; pointer-events: none;
  font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
  color: rgb(44 66 103 / 0.88);
}
.methode__text {
  grid-column: 1 / span 6; grid-row: 1;
  margin-top: clamp(24px, 3vw, 44px);
  will-change: transform;
}
.methode__text .eyebrow { color: rgb(44 66 103 / .9); }
.methode__titel {
  margin: 0 0 clamp(24px, 3vw, 36px);
  font-size: clamp(30px, 3.6vw, 54px); line-height: 1.14; letter-spacing: -.01em;
}
.methode__titel em { font-style: italic; }
.methode__text p {
  font-size: clamp(16px, 1.2vw, 18px); line-height: 1.9;
  color: rgb(44 66 103 / .95);
}
.methode__text p + p { margin-top: clamp(18px, 2vw, 24px); }
/* color steht jetzt bei .knopf--navy selbst. */
.methode__knopf { margin-top: clamp(28px, 3.4vw, 44px); font-size: 12px; letter-spacing: .16em; }

/* --- Schoen, dass du hier bist -------------------------------------------- */

.vorstellung { position: relative; }
.vorstellung__raster {
  max-width: var(--breite-fuss);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(240px, 32%) 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: end;
}
.vorstellung__bild {
  grid-column: 1;
  align-self: end;
  position: relative;
  min-height: clamp(420px, 46vw, 660px);
  display: flex; align-items: flex-end;
}
/* Das Foto steht auf dem Schachbrettstreifen auf: seine Unterkante
   liegt genau an dessen Oberkante. Der Weg dorthin ist genau das,
   worum der Streifen hochgezogen wird, minus dem Abstand unter dem
   Foto -- so stimmt es auf jeder Breite und nicht nur bei 1440.
   (Der Entwurf laesst das Foto 114 Pixel tiefer hinter dem Streifen
   verschwinden; Sarah wollte es ganz oben aufsitzend.)
   relative statt margin: margin wuerde die Sektion mitwachsen lassen
   und den Streifen um denselben Betrag nach unten schieben. */
.vorstellung__bild img {
  position: relative;
  bottom: calc(clamp(135px, 20.4vw, 310px) - clamp(70px, 9vw, 140px));
  width: 100%; height: auto;
  margin-bottom: clamp(70px, 9vw, 140px);
}
.vorstellung__text {
  grid-column: 2;
  padding: 0 var(--pad-x) clamp(220px, 24vw, 380px) 0;
}
.vorstellung__text .eyebrow { color: rgb(246 241 243 / .85); }

/* Der Entwurf setzt text-wrap:pretty nur an wenigen Stellen,
   nicht fuer jeden Absatz. Das ist eine davon. */
.vorstellung__anrede {
  text-wrap: pretty;
  font-size: clamp(18px, 1.5vw, 22px); line-height: 1.55;
  color: rgb(246 241 243 / .9);
}
.vorstellung__name {
  font-family: var(--schrift-headline); font-style: italic;
  font-size: clamp(30px, 4.2vw, 62px); line-height: 1; letter-spacing: -.01em;
  color: var(--creme);
}
.vorstellung__strich {
  height: 1px; background: rgb(246 241 243 / .3);
  margin: clamp(30px, 3.6vw, 48px) 0 clamp(30px, 3.6vw, 46px);
}
.vorstellung__spalten {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 3.4vw, 52px);
  align-items: start;
}
.vorstellung__lead {
  font-family: var(--schrift-headline); font-style: italic;
  font-size: clamp(16px, 1.3vw, 20px); line-height: 1.6;
  color: var(--creme);
  text-align: justify; hyphens: auto;
}
.vorstellung__absatz {
  font-size: clamp(15px, 1.15vw, 17px); line-height: 1.8;
  color: rgb(246 241 243 / 0.9);
  text-align: justify; hyphens: auto;
}
.vorstellung__lead + .vorstellung__absatz { margin-top: clamp(18px, 2vw, 26px); }
.vorstellung__knopf {
  margin-top: clamp(30px, 3.6vw, 48px);
  background: var(--taubenblau); color: var(--creme);
  border-color: color-mix(in srgb, var(--taubenblau) 65%, black);
  border-bottom-width: 5px;
  font-size: 13px; letter-spacing: .06em; text-transform: none;
}
.vorstellung__knopf:hover { opacity: .72; }

.vorstellung__karo {
  position: relative;
  margin-top: calc(-1 * clamp(135px, 20.4vw, 310px));
}
.vorstellung__abschluss { width: 100%; height: 1px; background: rgb(246 241 243 / .28); }

/* --- Stimmen ------------------------------------------------------------- */

.stimmen { padding: clamp(72px, 9vw, 130px) 0 clamp(80px, 10vw, 140px); }
.stimmen__inhalt {
  max-width: var(--breite-fuss);
  margin-inline: auto;
  padding: 0 clamp(20px, 4vw, 72px);
}
.stimmen__kopf { text-align: center; max-width: 760px; margin: 0 auto clamp(44px, 6vw, 86px); }
.stimmen__unter {
  margin-top: clamp(12px, 1.4vw, 18px);
  font-size: clamp(17px, 1.5vw, 23px); line-height: 1.5;
  /* Entwurf .72, das ergibt 3.61. .88 schafft 4.5. */
  color: rgb(246 241 243 / .88);
}

.stimmen__reihe {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(260px, .8fr) minmax(280px, 1fr);
  gap: clamp(32px, 5.5vw, 110px);
  align-items: stretch;
}

.stimme { position: relative; display: flex; flex-direction: column; }
.stimme--links, .stimme--rechts { padding-top: clamp(40px, 4vw, 62px); }
.stimme--mitte { align-items: center; padding-top: clamp(56px, 7vw, 110px); }

.stimme__zeichen {
  position: absolute; top: clamp(12px, 1.4vw, 22px); z-index: 2;
  width: clamp(48px, 5vw, 82px); height: auto;
  color: var(--creme);
}
.stimme--links .stimme__zeichen  { left: 0; }
.stimme--rechts .stimme__zeichen { right: 0; }

.stimme__foto { position: absolute; top: 0; z-index: 2; width: clamp(92px, 9vw, 132px); }
.stimme--links .stimme__foto  { right: clamp(18px, 3vw, 58px); }
.stimme--rechts .stimme__foto { left: clamp(18px, 3vw, 58px); }
.stimme__foto img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  box-shadow: 0 10px 30px rgb(58 48 61 / .16);
}
.stimme__foto--mitte {
  position: relative; top: auto;
  margin-top: clamp(-14px, -1.6vw, -10px);
}

.stimme__kasten {
  position: relative; flex: 1 1 auto; margin: 0;
  /* Gemessen: bei 34 Prozent aus dem Entwurf traegt der Navy-Text nur
     3.32, bei 60 Prozent 4.44, bei 72 Prozent gut 5.5. */
  background: rgb(246 241 243 / .72);
  border: 1px solid rgb(246 241 243 / .7);
  padding: clamp(58px, 6vw, 88px) clamp(22px, 2.2vw, 34px) clamp(24px, 2.8vw, 38px);
}
.stimme__kasten p {
  font-size: clamp(14px, 1.05vw, 16px); line-height: 1.45;
  color: rgb(44 66 103 / .92);
  text-align: justify; hyphens: auto;
}
.stimme__kasten strong { color: var(--navy); }
/* Im Entwurf ist dieser Kasten breiter als seine Spalte und ragt
   links und rechts darueber hinaus: sein width:100% rechnet ohne
   Innenabstand. Mit border-box waere er 70 Pixel schmaler, und
   „Voice Feedback" braeche dann auf zwei Zeilen um. */
.stimme__kasten--voice {
  box-sizing: content-box;
  width: 100%;
  /* Nicht mitwachsen. Das flex:1 der Zitatkaesten ist dort richtig --
     drei Kaesten sollen gleich hoch abschliessen. Hier zieht es den
     Kasten auf dem Handy auf die Hoehe des laengsten Zitats und
     hinterlaesst eine riesige leere Flaeche. */
  flex: 0 1 auto;
  padding: clamp(28px, 3.4vw, 52px) clamp(20px, 2.4vw, 34px) clamp(20px, 2.4vw, 34px);
}
.stimme__mikro {
  width: clamp(52px, 5vw, 76px); height: auto;
  position: relative; z-index: 2; top: 10px;
  margin-bottom: clamp(-10px, -1vw, -6px);
  color: var(--creme);
}
/* Im Entwurf ist das kein Versal-Knopf, sondern ein groesserer Satz
   mit fast keiner Sperrung. */
.stimme__knopf {
  margin-top: clamp(20px, 2.4vw, 34px);
  padding: 16px 40px;
  font-size: clamp(14px, 1.1vw, 17px);
  letter-spacing: .03em;
  text-transform: none;
}

/* Die Punkte gehoeren zum Wischen und tauchen erst auf dem Handy auf. */
.stimmen__punkte { display: none; }
.stimmen__punkt {
  display: block;
  width: 8px; height: 8px; border-radius: 50%;
  background: rgb(246 241 243 / .4);
  transition: background 180ms var(--kurve);
}
.stimmen__punkt.aktiv { background: var(--apricot); }

/* Sprachnachricht. Der ganze Block entfaellt, wenn in seite.js
   keine Datei eingetragen ist. */
.voice__knopf {
  width: 100%;
  display: flex; align-items: center; gap: clamp(14px, 1.8vw, 22px);
  background: rgb(44 66 103 / .08);
  border: 1px solid rgb(44 66 103 / .18);
  padding: clamp(16px, 1.8vw, 22px) clamp(18px, 2vw, 26px);
  color: var(--navy);
  cursor: pointer;
  text-align: left;
  transition: opacity 180ms var(--kurve);
}
.voice__knopf:hover { opacity: .8; }
.voice__symbol {
  flex: 0 0 auto;
  width: clamp(38px, 3.4vw, 46px); height: clamp(38px, 3.4vw, 46px);
  border-radius: var(--pille);
  background: var(--navy); color: var(--creme);
  display: flex; align-items: center; justify-content: center;
}
.voice__mitte { flex: 1 1 auto; min-width: 0; }
.voice__label { display: block; font-size: clamp(13px, 1vw, 15px); letter-spacing: .04em; }
.voice__schiene { display: block; margin-top: 9px; height: 3px; background: rgb(44 66 103 / .22); }
.voice__fortschritt { display: block; height: 3px; width: 0; background: var(--navy); }
.voice__zeit { flex: 0 0 auto; font-size: 11px; letter-spacing: .14em; color: var(--navy); }

@media (max-width: 1023px) {
  .bruecke__raster,
  .methode__raster { grid-template-columns: 1fr; }
  .bruecke__bild,
  .bruecke__text,
  .methode__bild,
  .methode__text { grid-column: 1 / -1; grid-row: auto; }

  /* Das klebende Bild loesen, sonst steht es im Weg.
     relative, nicht static: .bruecke__rahmen darin ist absolut gesetzt
     und braucht diesen Kasten als Bezug. Mit static gab es keinen mehr,
     der Rahmen hat sich am Seitenanfang ausgerichtet und lag als heller
     Kasten im Hero. relative loest das Kleben genauso, behaelt aber den
     Bezug. */
  /* top mit zuruecksetzen, sonst wirkt der Wert aus der Klebe-Regel
     als Verschiebung nach unten. Derselbe Fehler steckte in
     breathwork.css bei .bw-gefuehl__klebt. */
  .bruecke__bild { position: relative; top: auto; padding-bottom: 0; }
  .bruecke__flaeche { display: none; }
  .bruecke__marke { display: none; }
  /* Der versetzte Rahmen ragte 20px ueber den rechten Rand hinaus */
  .bruecke__rahmen { right: clamp(10px, 3vw, 20px); }

  /* Auf schmalen Schirmen kein Herauslaufen, sonst ueberdeckt das Bild
     die Nachbarsektionen.

     Das Foto ist hochkant (1000x1400). In einem breiten 4:3-Kasten
     blieben davon nur 54 Prozent stehen, und object-position 100%
     legte diesen Ausschnitt nach unten -- der Kopf war abgeschnitten.
     Im Entwurf steht hier ein hochkantes Bild von hoechstens 300
     Pixel Breite. */
  .methode__bild {
    margin-right: 0; min-height: 0;
    aspect-ratio: 4 / 5;
    width: 85%; max-width: 320px;
    margin-inline: auto;
  }
  .methode__bild-innen { position: absolute; inset: 0; }
  .methode__bild img { object-position: 50% 50%; }
  .methode__text { margin-top: clamp(28px, 4vw, 44px); }

  .vorstellung__raster { grid-template-columns: 1fr; }
  .vorstellung__bild,
  .vorstellung__text { grid-column: 1; }
  .vorstellung__bild { min-height: 0; justify-content: center; }
  /* Kein Hochziehen: der Streifen ueberlappt hier nicht. */
  .vorstellung__bild img { width: min(70%, 320px); margin-bottom: 0; bottom: 0; }
  .vorstellung__text { padding: clamp(28px, 5vw, 48px) var(--pad-x) clamp(80px, 12vw, 160px); }
  .vorstellung__karo { margin-top: 0; }

  .stimmen__reihe { grid-template-columns: 1fr; gap: clamp(64px, 9vw, 110px); }
  .stimme--mitte { padding-top: clamp(56px, 7vw, 90px); }

  .wandel__karten { grid-template-columns: 1fr 1fr; }

  /* Ab hier darf der Schlusssatz umbrechen, Groessen wie im Entwurf */
  .wandel__schluss { white-space: normal; font-size: 30px; }
}

@media (max-width: 767px) {
  .hero { min-height: 560px; }
  .wandel__karten { grid-template-columns: 1fr; }

  /* Im Entwurf stehen die Stimmen auf dem Handy nicht untereinander,
     sondern liegen als Karten nebeneinander und werden seitlich
     gewischt, eine je Bildschirmbreite. Untereinander waere der
     Abschnitt dreimal so hoch. */
  .stimmen__reihe {
    display: flex;
    grid-template-columns: none;
    gap: 16px;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* Die Leiste selbst braucht niemand zu sehen, gewischt wird ohnehin. */
    scrollbar-width: none;
  }
  .stimmen__reihe::-webkit-scrollbar { display: none; }
  .stimme {
    flex: 0 0 100%; min-width: 0;
    scroll-snap-align: center;
    padding-top: 40px;
  }
  /* Alle drei Karten sind gleich hoch, sonst sprengen die Punkte beim
     Wischen ihren Platz. Die Sprachnachricht ist die kuerzeste; ihr
     Inhalt beginnt trotzdem auf derselben Hoehe wie die Zitate,
     damit beim Wischen nichts nach unten springt. */
  .stimme--mitte { justify-content: flex-start; padding-top: 40px; }

  .stimmen__punkte {
    display: flex; justify-content: center; align-items: center;
    gap: 11px;
    margin-top: 26px;
  }
  /* Eine Stimme ist ein langer Text. In den Massen des Rechners fuellt
     eine einzige Karte auf dem Handy fast zwei Bildschirme -- deshalb
     hier engere Polsterung und eine kleinere Schrift, wie im Entwurf. */
  /* Nur die Zitatkaesten: die oberen 44 Pixel halten den Platz frei,
     den Foto und Anfuehrungszeichen ueberlappen. Der Kasten der
     Sprachnachricht hat nichts, was ihn ueberlappt, und behaelt seine
     eigene Polsterung. */
  .stimme__kasten:not(.stimme__kasten--voice) {
    padding: 44px 18px 22px;
  }
  /* Am Rechner ist dieser Kasten absichtlich breiter als seine Spalte
     -- content-box laesst ihn ueber die Polsterung hinauswachsen, sonst
     braeche "Voice Feedback" um. Auf dem Handy liegen die Karten
     nebeneinander: dort schob sich der Kasten 21 Pixel weit ueber die
     Nachbarkarte. Platz fuer die Zeile ist hier reichlich. */
  .stimme__kasten--voice {
    box-sizing: border-box;
    padding: 22px 18px 20px;
  }
  .stimme__foto { width: clamp(72px, 18vw, 92px); }

  .wandel__schluss { font-size: 24px; }

  /* Blocksatz wird auf schmalen Spalten unschoen */
  .vorstellung__lead,
  .vorstellung__absatz,
  .stimme__kasten p { text-align: left; hyphens: none; }

  /* Fliesstext nicht unter 17px, sonst zoomt iOS */
  .bruecke__vorsatz,
  .vorstellung__absatz { font-size: 17px; }

  /* Der Zitattext bleibt kleiner. 17px ergeben hier ueber zwanzig
     Zeilen und einen Kasten von tausend Pixeln, in dem niemand mehr
     sieht, dass daneben noch zwei weitere Stimmen liegen. */
  .stimme__kasten p { font-size: 15px; line-height: 1.5; }

  /* Pill-Buttons ueber die volle Breite, besser zu treffen */
  .methode__knopf,
  .vorstellung__knopf { display: block; width: 100%; min-height: 48px; }

  /* Der Knopf unter der Sprachnachricht nicht: er steht mittig unter
     einer Karte und wirkt ueber die volle Breite wie ein Balken.
     Der Selektor braucht die zwei Klassen, sonst gewinnt die
     allgemeine Regel .sektion .knopf aus stil.css. */
  .sektion .stimme__knopf {
    display: inline-block;
    width: auto; max-width: 260px;
    padding: 15px 34px;
    min-height: 48px;
  }

  .stimme__foto { width: clamp(84px, 22vw, 110px); }

  /* Im Entwurf steht der Vorstellungstext auf dem Handy in einer
     Spalte, nicht in zweien. Nebeneinander bleiben auf 390 Pixel nur
     rund 20 Zeichen je Zeile uebrig. */
  .vorstellung__spalten { grid-template-columns: 1fr; gap: 22px; }
  /* Einspaltig laege der Knopf sonst zwischen den beiden Absaetzen.
     display:contents loest die beiden Spaltenkaesten auf, dann laesst
     sich der Knopf ans Ende sortieren. */
  .vorstellung__spalten > div { display: contents; }
  .vorstellung__knopf { order: 1; }

  /* Und der Trennstrich sitzt dort ueber der Auszeichnungszeile,
     nicht unter der Anrede. */
  .vorstellung__text { display: flex; flex-direction: column; }
  .vorstellung__strich { order: -1; margin-top: 0; }
  /* Das Foto soll direkt auf der Linie aufsitzen. Dazwischen standen
     der Zeilenabstand des Rasters und die Polsterung der Textspalte. */
  .vorstellung__raster { row-gap: 0; }
  .vorstellung__text { padding-top: 0; }
}

@media (max-width: 479px) {
  .wandel__schluss { font-size: 20px; }
  .hero__titel { font-size: clamp(30px, 8.5vw, 40px); }
  .atemzeichen { bottom: 22px; font-size: 10px; }
}

/* Ohne Bewegung: Diaschau anhalten, erstes Bild stehen lassen */
@media (prefers-reduced-motion: reduce) {
  .hero__bild { animation: none; opacity: 0; }
  .hero__bild:first-child { opacity: 1; }
  .atemzeichen__punkt, .atemzeichen__ein, .atemzeichen__aus,
  .bruecke__punkt, .bruecke__linie, .bruecke__flaeche,
  .bruecke__laut > span { animation: none !important; }
  .atemzeichen__aus { opacity: 0; }
}