/* ==========================================================================
   sarahromina.com
   Design-System, abgeleitet aus den Claude-Design-Entwuerfen.
   Reihenfolge: Schriften, Tokens, Reset, Grundtypografie, Bausteine,
   Kopf und Fuss, Bewegung.
   ========================================================================== */

/* --- 1. Schriften, lokal, kein CDN --------------------------------------- */

@font-face {
  font-family: "Melodrama";
  src: url("/assets/fonts/melodrama-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Melodrama";
  src: url("/assets/fonts/melodrama-bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Shippori Mincho";
  src: url("/assets/fonts/shippori-mincho-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Shippori Mincho";
  src: url("/assets/fonts/shippori-mincho-bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
/* Handschrift, ausschliesslich fuer die "Currently"-Liste auf /about.
   Enthaelt keine Umlaute, Lizenz fuer Web nicht geprueft. Siehe
   assets/fonts/LIESMICH-schriften.txt */
@font-face {
  font-family: "Opencare";
  src: url("/assets/fonts/opencare-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* --- 2. Tokens ----------------------------------------------------------- */

:root {
  /* Grundfarben aus Abschnitt 4 des Briefings */
  --navy: #2c4267;
  --taubenblau: #4d6685;
  --apricot: #f8ccc1;

  /* Tonwerte derselben Farben, wie in den Entwuerfen verwendet.
     Keine neuen Farben, nur heller und dunkler. */
  --navy-hell: #30486e;
  --navy-tief: #21324c;
  --navy-tiefst: #1c2c44;
  --taubenblau-hell: #6e88a0;
  --taubenblau-tief: #47617e;
  /* Taubenblau erreicht auf Apricot nur 4.05 und faellt damit fuer
     kleinen Text durch. Dieser Ton ist drei Prozent dunkler, praktisch
     nicht zu unterscheiden, und kommt auf 4.51. Fuer Text auf Apricot
     immer diesen nehmen, nicht --taubenblau. */
  --taubenblau-text: #475f7b;
  --apricot-hell: #fbe4dc;
  /* Der dritte Akzent aus dem Entwurf. Er steckt dort schon in den
     Wellenlinien im Hero und in der dritten Karte im Abschnitt
     "Was sich veraendern darf". Auf ihm traegt --navy nur 3.5 und
     faellt fuer kleinen Text durch, --navy-tiefst kommt auf 4.9.
     Fuer Text auf Nebelblau also immer --navy-tiefst nehmen. */
  --nebelblau: #9198ab;

  /* Textfarbe auf dunklem Grund. Kein reines Weiss, leicht warm. */
  --creme: #f6f1f3;
  --weiss: #ffffff;

  /* Vierte Farbe, bewusst freigegeben. Ausschliesslich fuer die
     Phasen-Anzeige auf /breathwork. Nirgends sonst einsetzen. */
  --gold: #f2c879;

  /* Gemessene Kontraste, nur diese Paarungen fuer Fliesstext:
       creme   auf navy          9.7
       navy    auf apricot       6.9
       apricot auf navy          6.9
       creme   auf taubenblau    5.7
       navy-tiefst auf nebelblau 4.9
     Nur fuer grossen Text ab 24px:
       apricot auf taubenblau    4.1
     Nie verwenden:
       navy    auf taubenblau    1.7
       navy    auf nebelblau     3.5                                        */

  --schrift-headline: "Melodrama", Georgia, "Times New Roman", serif;
  --schrift-text: "Shippori Mincho", Georgia, "Times New Roman", serif;
  --schrift-hand: "Opencare", "Melodrama", Georgia, cursive;
  --schrift-meta: ui-monospace, SFMono-Regular, Menlo, monospace;

  --breite-seite: 1360px;
  --breite-nav: 1240px;
  --breite-fuss: 1560px;
  --breite-text: 680px;

  --pad-x: clamp(20px, 7vw, 124px);
  --pad-sektion: clamp(68px, 11vw, 150px);
  --pad-hero: clamp(104px, 15vw, 210px);

  --karo: clamp(32px, 6vw, 88px);
  --pille: 999px;

  --kurve: cubic-bezier(0.22, 0.61, 0.36, 1);
  --anim-weg: 24px;
  --anim-dauer: 600ms;
}

/* --- 3. Reset ------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* clip statt hidden: schneidet ab, ohne position:sticky zu brechen */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--navy);
  color: var(--creme);
  font-family: var(--schrift-text);
  font-size: 17px;          /* nie unter 16px, sonst zoomt iOS in Formulare */
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, video, svg, canvas { max-width: 100%; display: block; }
/* <picture> ist nur eine Huelle fuer die Quellenauswahl. Als Block
   bleibt seine Hoehe auto -- ein img darin findet fuer height:100%
   keinen Bezug, faellt auf seine eigene Hoehe zurueck, ragt aus dem
   Kasten heraus und object-position wirkt nicht mehr. Gemessen an
   drei Stellen: Bruecken-Foto, Methoden-Foto und den
   Artikelvorschauen. Mit contents faellt die Huelle aus dem Layout
   und das Bild liegt direkt in seinem Kasten. */
picture { display: contents; }
img { height: auto; }

/* Muss nach der Regel oben stehen: sonst gewinnt display:block gegen
   das hidden-Attribut und versteckte SVGs bleiben sichtbar. */
[hidden] { display: none !important; }

a { color: inherit; text-decoration: none; }

button, input, textarea, select { font: inherit; color: inherit; }

/* --- 4. Grundtypografie -------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--schrift-headline);
  font-weight: 400;
  margin: 0;
  text-wrap: balance;
}

.t-hero  { font-size: clamp(34px, 11vw, 180px); line-height: .86; letter-spacing: -.025em; }
/* Werte aus den Entwuerfen: clamp(32px,4vw,58px), Zeilenabstand 1.12,
   Laufweite -.01em. Vorher stand hier 4.4vw ohne Laufweite. */
.t-h2    { font-size: clamp(32px, 4vw, 58px);  line-height: 1.12; letter-spacing: -.01em; }
.t-h2-xl { font-size: clamp(46px, 8vw, 140px);   line-height: .95; }
.t-h3    { font-size: clamp(24px, 3.2vw, 38px);  line-height: 1.2; }
.t-h4    { font-size: clamp(21px, 2.2vw, 24px);  line-height: 1.3; }

p { margin: 0; }
p + p { margin-top: 1.4em; }

/* Echte Bold-Schnitte, keine synthetische Verdickung */
strong, b { font-weight: 700; }

/* Kursiv bei Shippori Mincho ist bewusst synthetisch schraeggestellt.
   Die Schrift hat keinen echten Kursivschnitt. Das sah auf der alten
   Seite genauso aus und bleibt so. Nicht "reparieren". */
em, i { font-style: italic; }

.t-meta {
  font-family: var(--schrift-meta);
  font-size: 13px;
  letter-spacing: .05em;
}

/* --- 5. Bausteine -------------------------------------------------------- */

/* Kleine Auszeichnungszeile ueber einer Ueberschrift: DIE METHODE
   Im Entwurf steht sie fast immer ohne Strich davor. Nur an zwei
   Stellen gibt es einen: „Kategorien" in der Blogspalte und
   „Weiterlesen" unter einem Artikel. Dafuer --strich. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 clamp(14px, 2vw, 26px);
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.eyebrow--strich::before {
  content: "";
  flex: none;
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: .7;
}

/* Buttons in Pill-Form. Zwei Auspraegungen wie im Entwurf:
   "kante" mit verdickter Unterkante, "schatten" mit versetztem Schlagschatten. */
.knopf {
  display: inline-block;
  border-radius: var(--pille);
  padding: 16px 34px;
  min-height: 48px;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: opacity 180ms var(--kurve), transform 280ms var(--kurve),
              box-shadow 280ms var(--kurve);
}
.knopf--apricot { background: var(--apricot); color: var(--navy);
                  border-color: color-mix(in srgb, var(--apricot) 60%, black);
                  border-bottom-width: 5px; }
/* Im Entwurf tragen die Navy-Knoepfe creme Schrift, nicht apricot.
   Gemessen an "Guide anfordern" und "Mehr ueber Breathwork". */
.knopf--navy    { background: var(--navy); color: var(--creme);
                  border-color: color-mix(in srgb, var(--navy) 70%, black);
                  border-bottom-width: 5px; }
.knopf--apricot:hover, .knopf--navy:hover { opacity: .72; }
.knopf--apricot:active, .knopf--navy:active { transform: scale(.98); }

.knopf--schatten {
  background: var(--navy); color: var(--apricot);
  border: 2px solid var(--navy);
  box-shadow: 6px 6px 0 rgb(44 66 103 / .28);
}
.knopf--schatten:hover {
  transform: translate(4px, 4px);
  box-shadow: 2px 2px 0 rgb(44 66 103 / .28);
}

/* Karten mit doppelter Rahmung */
.karte {
  position: relative;
  border: 1px solid currentColor;
  padding: clamp(24px, 2.6vw, 36px);
}
.karte::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid currentColor;
  opacity: .45;
  pointer-events: none;
}

/* Textmarker-Effekt: Apricot hinterlegt, laeuft ueber Zeilenumbrueche mit */
.marker {
  background: var(--apricot);
  color: var(--navy);
  padding: .14em .34em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Trenner als Karostreifen in Navy und Apricot */
.karostreifen {
  width: 100%;
  height: var(--karo);
  background-size: var(--karo) var(--karo);
  background-image:
    conic-gradient(var(--karo-farbe, var(--apricot)) 0 25%, transparent 0 50%,
                   var(--karo-farbe, var(--apricot)) 0 75%, transparent 0);
  background-color: var(--karo-grund, var(--navy));
}

/* Sektionen und ihr Farbwechsel */
.sektion { padding: var(--pad-sektion) var(--pad-x); }
.sektion__inhalt { max-width: var(--breite-seite); margin-inline: auto; }
.sektion__inhalt--schmal { max-width: var(--breite-text); }

.grund-navy       { background: var(--navy);            color: var(--creme); }
.grund-navy-hell  { background: var(--navy-hell);       color: var(--creme); }
.grund-taubenblau { background: var(--taubenblau);      color: var(--creme); }
.grund-tauben-hell{ background: var(--taubenblau-hell); color: var(--creme); }
.grund-apricot    { background: var(--apricot);         color: var(--navy); }

/* Sektionsuebergang: horizontale Linie */
.linie-oben { border-top: 1px solid rgb(246 241 243 / .28); }
.grund-apricot.linie-oben { border-top-color: rgb(44 66 103 / .28); }

/* Fotos: schwarzweiss und freigestellt */
.foto-sw { filter: grayscale(1) contrast(1.05); }

/* --- 6. Zugaenglichkeit -------------------------------------------------- */

:focus-visible {
  outline: 3px solid var(--apricot);
  outline-offset: 3px;
  border-radius: 2px;
}
.grund-apricot :focus-visible { outline-color: var(--navy); }

.nur-screenreader {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.sprungmarke {
  position: absolute; left: 12px; top: -100px;
  z-index: 200;
  padding: 12px 22px; border-radius: var(--pille);
  background: var(--apricot); color: var(--navy);
  transition: top 160ms var(--kurve);
}
.sprungmarke:focus { top: 12px; }

/* --- 7. Bewegung --------------------------------------------------------- */

/* Fade-up ueber 24 Pixel, 600 ms, gestaffelt */
.einblenden {
  opacity: 0;
  transform: translateY(var(--anim-weg));
  transition: opacity var(--anim-dauer) var(--kurve),
              transform var(--anim-dauer) var(--kurve);
  transition-delay: var(--verzoegerung, 0ms);
}
.einblenden.sichtbar { opacity: 1; transform: none; }

/* Diaschau im Hintergrund: vier Fotos loesen sich ueber 40 Sekunden ab,
   jedes um 10 Sekunden versetzt gestartet (--takt). Steht hier und nicht
   in einer Seitendatei, weil der Hero der Startseite und der Abschnitt
   "Was passiert in einer Session" dieselbe Bewegung benutzen. */
@keyframes diaschau {
  0%   { opacity: 0 }
  4%   { opacity: 1 }
  25%  { opacity: 1 }
  29%  { opacity: 0 }
  100% { opacity: 0 }
}
@keyframes kenburns {
  0%   { transform: scale(1.04) }
  100% { transform: scale(1.14) }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .einblenden, .einblenden.sichtbar {
    opacity: 1; transform: none; transition: none;
  }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Kopfbereich: schwebende Pill-Navigation
   ========================================================================== */

.kopf {
  position: absolute;
  top: 22px; left: 0; right: 0;
  z-index: 20;
  display: flex;
  justify-content: center;
  padding: 0 24px;
}

.navleiste {
  width: 100%;
  max-width: var(--breite-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 2vw, 32px);
  padding: 12px clamp(28px, 4vw, 58px);
  border-radius: var(--pille);
  background: rgb(246 241 243 / .14);
  border: 1px solid rgb(246 241 243 / .24);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.navleiste__logo { flex: 0 0 auto; display: flex; align-items: center; min-height: 44px; }
.navleiste__logo img {
  height: clamp(32px, 3.2vw, 44px); width: auto;
  filter: contrast(1.25) brightness(1.1);
}

.navleiste__links {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vw, 30px);
  font-size: 14px;
  letter-spacing: .02em;
  color: rgb(246 241 243 / .9);
  white-space: nowrap;
}
.navleiste__links a { padding: 4px 0; }
.navleiste__links a:hover { color: var(--apricot); }
.navleiste__links a[aria-current="page"] {
  border-bottom: 1px solid rgb(246 241 243 / .7);
}

.navleiste__cta {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 12px clamp(18px, 2vw, 28px);
  font-size: 14px;
  letter-spacing: .02em;
  text-transform: none;
}

.burger {
  flex: 0 0 auto;
  display: none;
  width: 46px; height: 46px;
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: 5px; padding: 0;
  background: transparent;
  border: 1px solid rgb(246 241 243 / .34);
  border-radius: var(--pille);
  cursor: pointer;
}
.burger span { display: block; width: 20px; height: 1px; background: var(--creme); }
/* In der Artikel-Seitenspalte ist der Burger immer sichtbar */
.burger--spalte { display: flex; }

@media (max-width: 899px) {
  .navleiste { padding: 10px 14px 10px 20px; }
  .navleiste__links, .navleiste__cta { display: none; }
  .burger { display: flex; }
}

/* Vollbild-Menue auf schmalen Schirmen */
.menue {
  position: fixed; inset: 0; z-index: 90;
  background: var(--navy);
  display: flex; flex-direction: column;
  padding: 24px 24px 36px;
}
.menue[hidden] { display: none; }
.menue__kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.menue__kopf img { height: 34px; width: auto; filter: contrast(1.25) brightness(1.1); }
.menue__schliessen {
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; background: transparent;
  border: 1px solid rgb(246 241 243 / .34);
  border-radius: var(--pille); cursor: pointer;
}
.menue__links {
  margin-top: 44px;
  display: flex; flex-direction: column; gap: 2px;
  font-family: var(--schrift-headline);
  font-size: clamp(30px, 8vw, 40px);
  line-height: 1.2;
  color: var(--apricot);
}
.menue__links a { display: flex; align-items: center; min-height: 48px; padding: 9px 0; }
.menue__cta { margin-top: auto; display: block; width: 100%; }
.menue__ort {
  margin-top: 20px;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: rgb(246 241 243 / 0.9);
}

/* ==========================================================================
   Fussbereich
   ========================================================================== */

.fuss {
  position: relative;
  background: var(--navy);
  color: var(--creme);
  padding: clamp(68px, 8vw, 120px) 0 clamp(28px, 3vw, 44px);
}
.fuss__inhalt {
  max-width: var(--breite-fuss);
  margin-inline: auto;
  padding: 0 clamp(20px, 4vw, 72px);
}
.fuss__spalten {
  display: grid;
  grid-template-columns: 1.15fr .9fr .9fr;
  gap: clamp(36px, 5vw, 90px);
  align-items: start;
}
.fuss__name {
  font-family: var(--schrift-headline);
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1;
  letter-spacing: .01em;
}
.fuss__claim {
  margin-top: clamp(20px, 2.4vw, 30px);
  max-width: 34ch;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.7;
  color: rgb(246 241 243 / .9);
}
.fuss__label {
  margin-bottom: clamp(22px, 2.6vw, 32px);
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  color: rgb(246 241 243 / 0.9);
}
.fuss__nav {
  display: grid; gap: clamp(6px, .7vw, 10px);
  font-size: clamp(15px, 1.15vw, 18px);
  color: rgb(246 241 243 / .92);
}
.fuss__nav a:hover { color: var(--apricot); }
/* Fusslinks immer gross genug zum Treffen.
   Auf Tablet und Handy 44px, am Schreibtisch die WCAG-Untergrenze 24px. */
.fuss__nav a,
.fuss__rechtnav a { display: inline-flex; align-items: center; min-height: 26px; }

@media (pointer: coarse), (max-width: 1023px) {
  .fuss__nav a,
  .fuss__rechtnav a { min-height: 44px; }
}
.fuss__text { max-width: 32ch; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.7; color: rgb(246 241 243 / .9); }
.fuss__strich { height: 1px; background: rgb(246 241 243 / .28);
                margin: clamp(44px, 6vw, 96px) 0 clamp(18px, 2vw, 26px); }
.fuss__recht {
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px; flex-wrap: wrap;
  font-size: clamp(13px, 1vw, 15px);
  color: rgb(246 241 243 / .8);
}
.fuss__rechtnav { display: flex; gap: clamp(18px, 2.4vw, 34px); }

@media (max-width: 1023px) {
  .fuss { padding-top: 100px; }
  .fuss__spalten { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .fuss__nav { gap: 0; }
  .fuss__nav a { padding: 5px 0; line-height: 1.3; }
  .fuss__recht { flex-direction: column; align-items: flex-start; gap: 10px; }
  .fuss__rechtnav { gap: 24px; }
  .fuss__rechtnav a { padding: 9px 0; }

}

/* --- Was auf dem Handy fuer alle Seiten gilt ------------------------------
 *
 * Diese drei Regeln stehen im Entwurf in jeder einzelnen Seitendatei.
 * Sie gehoeren deshalb hierher und nicht siebenmal in die Seiten-CSS.
 */
@media (max-width: 767px) {
  /* Knoepfe ueber die volle Breite. Nebeneinander waeren sie auf dem
     Handy zu schmal zum Treffen.

     Der Entwurf nimmt dafuer ausdruecklich nur die Knoepfe in section
     und footer. Die Kopfleiste ist aussen vor und wird hier gar nicht
     erst angefasst: ihr Knopf ist unter 900 Pixel ausgeblendet und
     steckt dann im Menue. Eine Regel, die ihn nachtraeglich wieder
     sichtbar macht, waere ein Fehler. */
  .sektion .knopf,
  .fuss .knopf,
  .menue .knopf {
    display: block; width: 100%;
    box-sizing: border-box; text-align: center;
    min-height: 48px;
  }

  /* Blocksatz reisst auf schmalen Spalten Loecher zwischen die Woerter. */
  .blog-hero__teaser,
  .abo-fakt,
  .kon__einleitung p,
  .vorstellung__lead,
  .vorstellung__absatz,
  .stimme__kasten p,
  .wwm-eins__absaetze,
  .paket__absatz { text-align: left; }

  /* Weite Sperrung ist auf 390 Pixel zu viel des Guten. */
  .eyebrow,
  .label,
  .bw-phasen__schritt,
  .hero__eyebrow,
  .bw-hero__eyebrow { letter-spacing: .18em; }

  /* Fliesstext auf dem Handy: 17 Pixel, damit iOS nicht zoomt, und
     dazu eine engere Zeile. Der Entwurf setzt beides zusammen -- nur
     die Schrift zu vergroessern und die weite Zeile von 1.85 zu
     behalten macht jeden Absatz unnoetig hoch.

     Betrifft nur Fliesstext. Aufzaehlungen, Auszeichnungszeilen und
     Meta-Angaben behalten ihre eigenen Groessen.

     Das "body" davor ist noetig, nicht Zierde: stil.css wird vor den
     Seitendateien geladen. Ohne den zusaetzlichen Selektor haetten
     beide Regeln dieselbe Staerke und die Seitendatei wuerde gewinnen. */
  body .abo-hero__lead,
  body .abo-weg__vorstellung,
  body .abo-weg__spalten p,
  body .abo-wende__absatz,
  body .abo-wende__schluss p,
  body .abo-fakt,
  body .blog-hero__teaser,
  body .eintrag__teaser,
  body .artikel__teaser,
  body .artikel__text p,
  body .autorin__satz,
  body .bw-hero__lead,
  body .bw-gefuehl__text p,
  body .bw-gefuehl__kasten p,
  body .fbr-karte p,
  body .bw-fbr__schluss,
  body .bw-alarm__text p,
  body .bw-phasen__einleitung,
  body .phasen__text,
  body .ebenen__intro,
  body .frage__antwort p,
  body .frage__zitat,
  body .kon__einleitung p,
  body .fehler__text,
  body .meldungseite__text,
  body .rechtstext__text,
  body .bruecke__absatz,
  body .methode__text p,
  body .vorstellung__absatz,
  body .fuss__text,
  body .paket__absatz { font-size: 17px; line-height: 1.65; }

  /* Diese beiden bleiben klein, so steht es im Entwurf. Die engere
     Zeile bekommen sie trotzdem. */
  body .wandelkarte__text { font-size: 15px; line-height: 1.65; }
}

/* --- Newsletter-Anmeldung im Fuss ---------------------------------------- */

.anmeldung { margin-top: clamp(22px, 2.6vw, 34px); }

.anmeldung__zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
}

.anmeldung__feld {
  /* Nicht ueber die ganze Spalte: die Felder brauchen ihre Breite
     nicht und sehen sonst plump aus. Wie im Guide-Formular, dort
     liegt die Grenze bei 360. */
  flex: 0 1 260px;
  min-width: 0; max-width: 300px;
  height: 52px;
  padding: 0 22px;
  border: 1px solid rgb(248 204 193 / .55);
  border-radius: var(--pille);
  background: transparent;
  color: var(--creme);
  font-size: 16px;     /* nicht kleiner, sonst zoomt iOS beim Antippen */
}

/* Auf dem Handy stehen Felder und Knopf untereinander. Dann sollen die
   Felder so breit sein wie der Knopf, sonst wirkt es unfertig.
   Steht hinter der Grundregel, sonst wuerde die sie ueberschreiben. */
@media (max-width: 767px) {
  .anmeldung__feld { flex: 1 1 100%; max-width: none; }
}
.anmeldung__feld::placeholder { color: rgb(246 241 243 / 0.9); }
.anmeldung__feld:focus-visible { outline-offset: 2px; }

.anmeldung .knopf { flex: 0 0 auto; padding: 14px 30px; font-size: 12px; letter-spacing: .16em; }

.anmeldung__hinweis {
  margin-top: 14px;
  max-width: 40ch;
  font-size: 13px;
  line-height: 1.6;
  color: rgb(246 241 243 / 0.9);
}
.anmeldung__hinweis a { text-decoration: underline; text-underline-offset: 3px; }

/* Honeypot: nicht per display:none, das ueberspringen manche Bots gezielt */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   Wellenlinien
   Stehen hier und nicht in startseite.css, weil partials/wellen.njk auf
   zwei Seiten eingebunden ist: Startseite und About. Solange die Regeln
   nur in startseite.css standen, lagen die drei Bahnen auf About zwar
   im Quelltext, waren aber ungestaltet und darum unsichtbar.
   ========================================================================== */

/* Wellenlinien */
.wellen {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 38%; z-index: 1; pointer-events: none; overflow: hidden;
  animation: wellengang 10s cubic-bezier(.42,0,.58,1) infinite;
}
.wellen__bahn {
  position: absolute; top: 0; left: 0;
  /* Die Bahn ist doppelt so breit wie der Hero. Nur so ergibt eine
     Wellenlaenge des Pfades genau eine Bildschirmbreite, und nur so
     kann sie um translateX(-50%) wandern, ohne dass hinten eine
     Luecke entsteht.
     max-width muss ausdruecklich aus: die Grundregel in stil.css
     setzt fuer alle svg  max-width:100%. Die hat die Bahn auf die
     Haelfte gestaucht, dadurch liefen die Linien doppelt so eng wie
     im Entwurf und eine brach mittendrin ab. */
  width: 200%; max-width: none; height: 100%;
  animation: wellenglanz 10s cubic-bezier(.42,0,.58,1) infinite;
}
.wellen__bahn--1 { animation: wellendrift 120s linear infinite, wellenglanz 10s cubic-bezier(.42,0,.58,1) infinite; }
.wellen__bahn--2 { animation: wellendrift 86s linear infinite reverse, wellenglanz 10s cubic-bezier(.42,0,.58,1) infinite; }
.wellen__bahn--3 { animation: wellendrift 160s linear infinite, wellenglanz 10s cubic-bezier(.42,0,.58,1) infinite; }

@keyframes wellengang { 0%,100% { transform: translateY(3%) scaleY(.62) } 50% { transform: translateY(-4%) scaleY(1.42) } }
@keyframes wellenglanz { 0%,100% { opacity: .8 } 50% { opacity: 1 } }
@keyframes wellendrift { 0% { transform: translateX(0) } 100% { transform: translateX(-50%) } }

/* ==========================================================================
   Freebie-Kasten
   Steht hier und nicht in startseite.css, weil der Baustein auf mehreren
   Seiten eingebunden ist: Startseite, Breathwork und jeder Blogartikel.
   Solange die Regeln nur in startseite.css standen, war der Kasten auf
   allen anderen Seiten ungestaltet -- Ueberschrift in Fliesstextgroesse,
   Text ueber die volle Breite.
   ========================================================================== */

/* --- Freebie ------------------------------------------------------------- */

/* Der seitliche Abstand gehoert an die Sektion, nicht an den Kasten.
   Ohne ihn stand der Kasten randlos ueber die volle Breite und die
   rechte Spalte wurde 85 Pixel breiter als im Entwurf. */
.freebie {
  padding: clamp(40px, 5vw, 80px) clamp(20px, 4vw, 72px) clamp(80px, 10vw, 140px);
}
.freebie__kasten {
  max-width: var(--breite-fuss);
  margin-inline: auto;
  background: rgb(246 241 243 / .2);
  border: 1px solid rgb(246 241 243 / .5);
  padding: clamp(44px, 6vw, 96px) clamp(28px, 4.4vw, 84px);
  display: grid;
  /* Im Entwurf sind die Spalten leicht ungleich, nicht gleich breit. */
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(36px, 6vw, 110px);
  align-items: start;
}
/* Entwurf .75, das ergibt auf Apricot 4.09 und faellt fuer 11px
   durch. .82 schafft 4.64. */
.freebie .eyebrow { color: rgb(44 66 103 / .82); }
/* 12px und .16em wie im Entwurf. */
.freebie__form .knopf { font-size: 12px; letter-spacing: .16em; }
.freebie__titel {
  margin: 0 0 clamp(24px, 3vw, 40px);
  font-size: clamp(34px, 4.4vw, 66px); line-height: 1.08; letter-spacing: -.01em;
}
.freebie__titel em { font-style: italic; }
.freebie__text {
  max-width: 52ch;
  font-size: clamp(15px, 1.15vw, 18px); line-height: 1.75;
  color: rgb(44 66 103 / .92);
  text-wrap: pretty;
}
.freebie__form { margin-top: clamp(30px, 3.8vw, 52px); }
/* Vorname, Adresse und Knopf stehen untereinander. */
.freebie__zeile { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
/* Nicht ueber die ganze Spalte: bei 1440 waeren die Felder sonst 583
   Pixel breit. "Deine E-Mail-Adresse" braucht mitsamt Innenabstand
   269, 360 lassen also reichlich Luft. Auf schmalen Schirmen greift
   die Grenze nicht, dort bleiben sie so breit wie die Spalte. */
/* min-width:0 an allen Rasterfeldern des Kastens: ohne das steht ein
   Rasterfeld nie schmaler als sein breitester unteilbarer Inhalt. Ein
   Eingabefeld bringt eine solche Eigenbreite mit. Stellt jemand am
   Geraet eine groessere Mindestschrift ein, waechst sie mit -- und das
   Feld ragte dann rechts aus der Karte heraus, weil das Raster den
   Kasten nicht mit verbreitert. */
.freebie__kasten > *,
.freebie__titel,
.freebie__text,
.freebie__form,
.freebie__zeile,
.freebie__erwartung { min-width: 0; }

.freebie__feld {
  flex: 0 0 auto; width: 100%; min-width: 0; max-width: 360px; height: 56px;
  padding: 0 24px;
  border: 1px solid rgb(44 66 103 / .45);
  border-radius: var(--pille);
  background: transparent; color: var(--navy);
  font-size: 16px;
}
.freebie__feld::placeholder { color: rgb(44 66 103 / 0.88); }
/* Der Knopf so breit wie seine Beschriftung, nicht ueber die ganze
   Spalte -- ausser auf dem Handy, dort ist er leichter zu treffen. */
.freebie__form .knopf { flex: 0 0 auto; align-self: flex-start; font-size: 12px; letter-spacing: .16em; }
.freebie__hinweis {
  margin-top: 14px; max-width: 46ch;
  font-size: 12px; line-height: 1.6;
  color: rgb(44 66 103 / 0.88);
}
.freebie__hinweis a { text-decoration: underline; text-underline-offset: 3px; }
.freebie__erwartung { padding-top: clamp(20px, 3vw, 52px); }
.freebie__liste {
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: clamp(18px, 2.2vw, 30px);
}
.freebie__liste li {
  display: grid; grid-template-columns: auto 1fr;
  gap: clamp(14px, 1.6vw, 22px); align-items: start;
  font-size: clamp(15px, 1.15vw, 18px); line-height: 1.6;
  color: rgb(44 66 103 / .92);
}
.freebie__liste li::before {
  content: ""; display: block;
  width: 16px; height: 1px; margin-top: .85em;
  background: rgb(44 66 103 / .7);
}

/* ==========================================================================
   Schmalere Schirme
   Haltepunkte wie in den Entwuerfen: 1023, 767, 479
   ========================================================================== */

@media (max-width: 767px) {
  /* Feste Spalten aus dem Entwurf gelten nur am Rechner. Auf schmalen
     Schirmen muessen sie untereinander, sonst blieben zwei Spalten von
     je etwa 150 Pixeln stehen. */
  .freebie__kasten { grid-template-columns: 1fr; row-gap: 0; }
  .freebie__form .knopf { display: block; width: 100%; min-height: 48px; }

  /* Im Entwurf steht der Knopf ganz unten, nach "Was dich erwartet".
     Gebaut lag das Formular mittendrin, weil es im Markup zur linken
     Spalte gehoert -- am Rechner sitzt es dort ja richtig.

     display:contents loest die linke Spalte auf, damit sich das
     Formular ans Ende sortieren laesst. Der Zeilenabstand des Rasters
     faellt dabei weg, sonst stuende zwischen jedem Absatz die volle
     Spaltenluecke; die Abstaende bringen die Elemente selbst mit. */
  .freebie__kasten > div:first-child { display: contents; }
  .freebie__erwartung { order: 0; }
  .freebie__form { order: 1; margin-top: clamp(30px, 5vw, 44px); }
}