@charset "utf-8";
/* ==========================================================================
   Therapie am Hafen Ergotherapie
   Stylesheet zur Umsetzung der Layoutvorlagen (Desktop 1920 px / Mobil 320 px)
   ========================================================================== */

@import url("../assets/fonts/fonts.css");

/* --------------------------------------------------------------------------
   1. Design-Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Farben – direkt aus den PDF-Vorlagen gemessen */
  --navy:        #0e4881;  /* Fliesstext, Wortmarke                 */
  --navy-deep:   #0a3763;  /* Hover/Fokus                            */
  --teal:        #1595ab;  /* Links, Namen, Navigation               */
  --teal-deep:   #0f7286;
  --terracotta:  #a65c52;  /* Ueberschriften                         */
  --mist:        #d3dae0;  /* Sektionshintergrund hell-blaugrau      */
  --cream:       #f8f2e8;  /* Sektionshintergrund creme              */
  --water:       #3b84a4;  /* Wasserflaeche im Header                */
  --portrait-bg: #6faec2;  /* Kreisfarbe Platzhalter-Portrait        */

  --focus:       #a65c52;

  /* Typografie */
  --font-serif: "Prata", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-sans:  "Noto Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* ------------------------------------------------------------------
     Groessen: zwei Geraden, ein Knick bei 480 px, nie fallend.

     Zwei gemessene Stuetzstellen, sonst nichts Gewaehltes: die
     Smartphone-Vorlage ist 320 pt breit, die Desktop-Vorlage 1920 pt. Weil
     beide PDFs so breit sind wie ihre Zielaufloesung, ist 1 pt = 1 px.

       bis  480 px : die Verhaeltnisse der Smartphone-Vorlage, reine vw-Werte.
                     Ein 390-px-Telefon sieht damit aus wie die Vorlage, nur
                     groesser - genau das war die Forderung des Kunden.
       ab   480 px : eine Gerade auf den Wert der Desktop-Vorlage bei 1920 px.

     Beide Aeste treffen sich bei 480 px von selbst, deshalb steht hier
     min(<vw-Ast>, <Gerade>, <Deckel bei 1920>) statt einer Media Query: der
     vw-Ast ist unterhalb von 480 px der kleinere, oberhalb der groessere.
     Kein Sprung, kein Bereichswechsel, und der Verlauf faellt nirgends.

     Vorher standen hier drei Bereiche (<=480 / 480-900 / >=900) mit
     wechselndem Vorzeichen: die Schrift war bei 480 px am groessten und bei
     900-1100 px am kleinsten - ein 1000-px-Fenster bekam 16 px Fliesstext,
     ein 480-px-Telefon 24 px. Dasselbe Zickzack wie beim Logo. Nicht
     dorthin zurueck.

     Gemessen mit vergleich/typografie-messen.py, Herkunft jedes Wertes in
     konzepte/typografie-abgleich.md.
     ------------------------------------------------------------------ */
  /*                 320 px      480 px      1920 px                        */
  --step-display: min(7.5vw,   calc(1.75rem    + 1.66667vw), 3.75rem);   /* H1             24 ->  36 ->  60 */
  --step-h2:      min(12.5vw,  calc(3.54167rem + 0.69444vw), 4.375rem);  /* Sektionstitel  40 ->  60 ->  70 */
  --step-h3:      min(7.5vw,   calc(2.27083rem - 0.06944vw));            /* Teamname       24 ->  36 ->  35 */
  --step-body:    min(5vw,     calc(1.47917rem + 0.06944vw), 1.5625rem); /* Fliesstext     16 ->  24 ->  25 */
  --step-small:   min(5vw,     calc(1.47917rem + 0.06944vw), 1.5625rem); /* Stichpunkte    16 ->  24 ->  25 */
  --step-cloud:   min(5vw,     calc(1.47917rem + 0.06944vw), 1.5625rem); /* Wolkenbegriffe 16 ->  24 ->  25 */
  --step-cloud-c: min(12.5vw,  calc(3.54167rem + 0.69444vw), 4.375rem);  /* "Ergotherapie" 40 ->  60 ->  70 */
  --step-job:     min(5.625vw, calc(1.52083rem + 0.55556vw), 2.1875rem); /* Job-Link       18 ->  27 ->  35 */
  --step-contact: min(5.625vw, calc(1.625rem   + 0.20833vw), 1.875rem);  /* Kontakt-Name   18 ->  27 ->  30 */

  /* Der Footer ist in BEIDEN Vorlagen 16 px - das einzige Mass, bei dem die
     beiden Entwuerfe im Verhaeltnis auseinanderlaufen (0,64 x Fliesstext auf
     dem Desktop, 1,00 x auf dem Telefon). Ein konstanter Wert trifft beide
     an ihrer eigenen Breite exakt und faellt nirgends. */
  --step-footer:  1rem;

  /* Die Navigation gibt es nur in der Desktop-Vorlage: 22 px bei 1920 px,
     also 0,88 x Fliesstext. Unterhalb von 900 px ist sie ausgeblendet. */
  --step-nav:     calc(var(--step-body) * 0.88);

  /* Zeilenabstand des Fliesstextes - als LAENGE, nicht einheitenlos. Die
     Vorlagen geben 24 px auf 16 px Schrift (Verhaeltnis 1,50) bei 320 vor und
     40 px auf 25 px (1,60) bei 1920. Ein einheitenloser Wert kann zwischen
     zwei Verhaeltnissen nicht interpolieren, eine Laenge auf denselben zwei
     Aesten schon: sie ergibt 1,50 von 320 bis 480 px und laeuft dann auf
     1,60 bei 1920 px zu - genau die beiden Vorlagen.

     Preis: eine Laenge wird an Regeln mit abweichender Schriftgroesse als
     Laenge vererbt. Jede solche Regel traegt deshalb ihren eigenen
     einheitenlosen Faktor. Regeln, deren Schrift ohnehin auf
     --step-body/--step-small steht, erben die Laenge absichtlich. */
  --body-leading: min(7.5vw, calc(2.16667rem + 0.27778vw), 2.5rem); /* 24 -> 36 -> 40 px */

  /* Raster - dieselben zwei Aeste */
  --container:  1180px;
  --container-wide: 1420px;
  --gutter:     min(6.25vw,  calc(1.5rem + 1.25vw),    3rem);   /* Seitenrand  20 ->  30 ->  48 */
  --col-gap:    clamp(2rem, 5vw, 5.5rem);
  --section-y:  min(20vw,    calc(5rem   + 3.33333vw), 9rem);   /* Sektionsluft 64 -> 96 -> 144 */
  --portrait:   min(87.5vw,  calc(26.6667rem - 1.38889vw));     /* Portrait   280 -> 420 -> 400 */

  /* Die Kopfzeile steht in keiner der beiden Vorlagen - sie ist ein reines
     Web-Element (feste Leiste beim Scrollen). Deshalb eine einzige flache
     Gerade statt der Vorlagenverhaeltnisse: 22,5 vw waeren bei 480 px eine
     108 px hohe Leiste und damit zu viel Bildschirm. */
  --header-h:   clamp(4.5rem, calc(4.05rem + 2.25vw), 6.75rem); /*  72 -> 108 */

  /* Oberkante der ersten Titelzeile (Versalhoehe) unter der Seitenkante:
     138 px in der Smartphone-, 247 px in der Desktop-Vorlage - beide aus der
     Grundlinie des ersten Prata-Laufs minus Versalhoehe (0,8 em) gerechnet.
     --hero-pad-t zieht die Kopfzeile ab und den Vorlauf der Zeilenbox ueber
     der Versalhoehe (0,1121 x Schriftgroesse; die Konstante stammt aus der
     bisherigen, bei 320-480 px auf 1 px geprueften Formel und ist am
     2026-08-26 bei 1920 px im Bild gegengeprueft worden: Vorlage 246,
     Webseite 246). */
  --title-top:  min(43.125vw, calc(12.10417rem + 2.77778vw), 15.4375rem);
  --hero-pad-t: calc(var(--title-top) - var(--header-h) - 0.1121 * var(--step-display));

  /* Bewegung */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:      0.6s;
}

/* --------------------------------------------------------------------------
   1a. Hier standen die Bereichsregeln fuer Smartphone und Tablet
   --------------------------------------------------------------------------
   Ersatzlos entfallen am 2026-08-26. Es gab drei Bereiche - reine vw-Werte
   bis 480 px, lineare Uebergangsformeln bis 900 px, darueber die
   clamp()-Werte des :root. Sie stiessen zwar sprungfrei aneinander, ergaben
   ueber die ganze Breite aber keinen monotonen Verlauf: das Maximum lag bei
   480 px, das Minimum bei 900-1100 px. Fliesstext 24 px auf einem 480-px-
   Telefon gegen 16 px auf einem 1000-px-Notebook.

   An ihre Stelle ist eine einzige Gerade je Wert getreten, oben im :root.
   Sie verbindet die beiden Vorlagen an deren eigenen Breiten (320 und
   1920 px) und trifft dort exakt die gemessenen Werte.

   Was dadurch NICHT mehr existiert und auch nicht zurueckkommen soll:
   - die Bruchkante bei 480 px,
   - die Bruchkante bei 900 px, an der alle mobilen Regeln endeten,
   - die Konstante 4,5 rem in --hero-pad-t, die nur noetig war, weil
     --header-h als einziges Mass nicht mitskalierte. --header-h ist jetzt
     selbst linear (72 -> 108 px), --hero-pad-t rechnet mit var(--header-h).

   Bereichsregeln fuer das *Layout* sind davon unberuehrt und bleiben: die
   Umbruchschalter des Titels, die vier Anordnungen der Wortwolke, die
   Zweispaltigkeit ab 700 px und die Ueberbreite von Karte und Skyline.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   2. Reset / Grundlagen
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font-family: var(--font-sans);
  font-size: var(--step-body);
  line-height: var(--body-leading);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }
img { height: auto; border: 0; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

h1, h2, h3 { margin: 0; font-weight: 400; line-height: 1.16; }

ul { margin: 0; padding: 0; list-style: circle; }

a { color: var(--teal); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { color: var(--teal-deep); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

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

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -100px;
  z-index: 200;
  padding: 0.7rem 1.1rem;
  background: var(--cream);
  color: var(--navy);
  font-weight: 600;
  border-radius: 4px;
  box-shadow: 0 6px 24px rgba(14, 72, 129, 0.22);
  transition: top 0.2s var(--ease-out);
}
.skip-link:focus { top: 0.75rem; }

/* --------------------------------------------------------------------------
   3. Layout-Bausteine
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: var(--container-wide); }
.container--full { max-width: 1720px; }

.section {
  padding-block: var(--section-y);
  scroll-margin-top: calc(var(--header-h) + 8px);
}
.section--mist  { background: var(--mist); }
/* Die Begriffswolke bringt ihren Weissraum ueber das Seitenverhaeltnis selbst mit */
@media (min-width: 1440px) { .section--cloud { padding-block: 0; } }
.section--cream { background: var(--cream); }

.section__title {
  font-family: var(--font-serif);
  font-size: var(--step-h2);
  color: var(--terracotta);
  text-align: center;
  letter-spacing: 0.005em;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 2.5rem) var(--col-gap);
}
/* Ab 1100 px zwei Spalten. Gerechnet ueber die Zeilenlaenge: die Vorlage
   setzt bei 1920 px 61 Zeichen in eine 749 px breite Spalte. Unter 40 Zeichen
   wird zweispaltiger Satz unruhig; das entspricht bei der jetzigen
   Schriftgroesse rund 480 px Spaltenbreite, und die erreicht
   (Inhaltsbreite - Spaltenabstand)/2 bei etwa 1090 px.

   Vorher standen hier 700 px. Das war richtig, solange der Fliesstext 19,2 px
   mass; mit 24 px blieben dort 25 Zeichen je Zeile. */
@media (min-width: 1100px) {
  .two-col { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------------------------
   4. Kopfbereich / Navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: stretch;
  background: transparent;
  transition: background-color 0.35s var(--ease-out),
              box-shadow 0.35s var(--ease-out),
              backdrop-filter 0.35s var(--ease-out);
}
.site-header--solid,
.site-header.is-stuck {
  background: rgba(211, 218, 224, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(14, 72, 129, 0.1), 0 10px 30px -18px rgba(14, 72, 129, 0.5);
}

.site-header__inner {
  width: 100%;
  height: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Logo: am Seitenanfang gross wie in der Vorlage (es ragt bewusst unter die
   Kopfzeile in die Buehne hinein), beim Scrollen schrumpft es in die Leiste.
   Die Groesse wird ueber die Hoehe gesteuert, damit es nie oben beschnitten wird.

   EINE Gerade ueber die gesamte Fensterbreite – keine Bereichsregeln, kein
   Knick, keine Umkehr. Sie verbindet die beiden Vorlagen an ihren eigenen
   Breiten:  78 px bei 320 (Smartphone-Vorlage)  ->  190 px bei 1920 (Desktop-
   Vorlage). Steigung 112 px / 1600 px = 7 vw, Achsenabschnitt 55,6 px =
   3,475 rem. Die clamp()-Grenzen halten die Gerade ausserhalb von 320–1920 px
   auf den Vorlagenwerten fest.

   Vorher liefen hier drei Bereiche mit wechselndem Vorzeichen: 78 px @320 ->
   117 px @480 -> 90 px @900 -> 190 px @1920. Beim langsamen Verschmaelern
   wuchs das Logo also zwischen 900 und 480 px wieder an und schrumpfte
   darunter erneut – das war das gemeldete Zickzack. Der Preis der Geraden:
   zwischen 900 und 1900 px steht das Logo hoeher als die 10 vw der
   Desktop-Vorlage (118 statt 90 px bei 900), unterhalb von 480 px kleiner als
   die 24,375 vw der Smartphone-Vorlage (83 statt 95 px bei 390). Nur genau
   bei 320 und bei 1920 px trifft es beide Vorlagen exakt. */
.brand {
  display: inline-flex;
  align-self: flex-start;
  margin-top: min(4.0625vw, calc(0.72917rem + 1.63194vw), 2.6875rem); /* 13 -> 19,5 -> 43 px */
  line-height: 0;
  transition: margin-top 0.35s var(--ease-out);
}
.brand img {
  display: block;
  width: auto;
  height: min(24.375vw, calc(5.75rem + 5.20833vw), 12rem);  /* 78 -> 117 -> 192 px */
  transition: height 0.35s var(--ease-out), transform 0.4s var(--ease-out);
}
.brand:hover img { transform: translateY(-2px); }

/* Eingegliedert: gescrollte Startseite und alle Unterseiten */
.site-header--solid .brand,
.site-header.is-stuck .brand {
  align-self: center;
  margin-top: 0;
}
.site-header--solid .brand img,
.site-header.is-stuck .brand img {
  height: calc(var(--header-h) * 0.62);
}

/* -- Desktop-Navigation -- */
.nav { display: none; }
@media (min-width: 900px) {
  .nav {
    display: flex;
    align-items: center;
    gap: clamp(1.4rem, 2.6vw, 3.4rem);
  }
}
.nav__link {
  position: relative;
  color: var(--teal);
  font-size: var(--step-nav);
  line-height: 1.6;              /* eigener Faktor: --body-leading ist eine Laenge */
  text-decoration: none;
  padding-block: 0.35rem;
  transition: color 0.25s var(--ease-out);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s var(--ease-out);
}
.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link[aria-current="true"]::after { transform: scaleX(1); }
.nav__link[aria-current="true"] { color: var(--teal-deep); }

.nav__mail { display: inline-flex; align-items: center; padding: 0.35rem; }
.nav__mail img {
  width: clamp(26px, 1.7vw, 32px);
  transition: transform 0.35s var(--ease-out);
}
.nav__mail:hover img { transform: translateY(-3px); }

/* -- Menue-Schalter (mobil) -- */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: width 0.35s var(--ease-out), height 0.35s var(--ease-out);
}
.nav-toggle img { width: 40px; transition: width 0.35s var(--ease-out),
                                           transform 0.35s var(--ease-out), opacity 0.2s; }
.nav-toggle[aria-expanded="true"] img { transform: rotate(90deg) scale(0.9); opacity: 0.55; }

/* Das Wellensymbol lief bisher in denselben drei Bereichen wie das Logo und
   hatte damit dasselbe Zickzack (45 px @320 -> 67,5 px @480 -> 40 px @900).
   Jetzt ebenfalls eine einzige Gerade. Untere Stuetzstelle ist die
   320-px-Vorlage: dort ist das Symbol 43 px breit, die Bildkante liegt rund
   5 % ausserhalb der Zeichnung, deshalb 45 px Sollbreite. Eine obere
   Stuetzstelle gibt die Desktop-Vorlage nicht her – dort steht statt des
   Schalters die Textnavigation –, deshalb laeuft die Gerade flach auf 56 px
   bei 900 px zu und bleibt so in der 72 px hohen Leiste. Ab 900 px ist der
   Schalter ohnehin ausgeblendet. */
.nav-toggle     { width:  min(16.25vw, 5rem);      /* 52 -> 78 -> 80 px  */
                  height: min(13.75vw, 4.25rem); } /* 44 -> 66 -> 68 px  */
.nav-toggle img { width:  min(14.06vw, 4.25rem); } /* 45 -> 67,5 -> 68 px */
/* Eingegliederte Leiste (gescrollt, Unterseiten): dort schrumpft auch das
   Logo, das Symbol geht deshalb auf seine kompakte Groesse zurueck. Die
   hoehere Spezifitaet schlaegt die beiden Bereichsregeln darueber. */
.site-header--solid .nav-toggle,
.site-header.is-stuck .nav-toggle     { width: 52px; height: 44px; }
.site-header--solid .nav-toggle img,
.site-header.is-stuck .nav-toggle img { width: 40px; }
@media (min-width: 900px) { .nav-toggle { display: none; } }

/* -- Mobiles Menue -- */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
  padding: var(--header-h) var(--gutter) 3rem;
  background: var(--cream);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.32s var(--ease-out), visibility 0.32s;
}
.mobile-nav.is-open { visibility: visible; opacity: 1; }
.mobile-nav__link {
  display: block;
  padding: 0.85rem 0;
  color: var(--navy);
  font-size: clamp(1.4rem, 7vw, 2rem);
  line-height: 1.3;  /* eigener Faktor: --body-leading ist eine Laenge */
  text-decoration: none;
  border-bottom: 1px solid rgba(14, 72, 129, 0.12);
  transform: translateY(14px);
  opacity: 0;
  transition: transform 0.4s var(--ease-out), opacity 0.4s var(--ease-out), color 0.2s;
}
.mobile-nav.is-open .mobile-nav__link {
  transform: none;
  opacity: 1;
  transition-delay: calc(60ms * var(--i, 0) + 80ms);
}
.mobile-nav__link:hover { color: var(--teal); }
@media (min-width: 900px) { .mobile-nav { display: none; } }

/* --------------------------------------------------------------------------
   5. Header-Buehne: Titel, Skyline, Wasser
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--mist);
  padding-top: var(--header-h);
  overflow: hidden;
}

.hero__title {
  font-family: var(--font-serif);
  font-size: var(--step-display);
  line-height: 1.22;
  color: var(--terracotta);
  text-align: center;
  text-wrap: balance;
  /* Der Seitenrand steckt wegen border-box in max-width mit drin – deshalb
     rechnet die Zeilenbreite ihn ausdruecklich hinzu. Sonst bleibt fuer die
     laengste Zeile ("in unserer Ergotherapie-Praxis") zu wenig uebrig und
     "Praxis" rutscht als Schusterjunge in eine eigene Zeile. */
  --title-pad: max(var(--gutter), min(7vw, 2.5rem));
  padding: var(--hero-pad-t, clamp(2.5rem, 6vw, 6.5rem)) var(--title-pad) clamp(1.5rem, 3vw, 2rem);
  margin-inline: auto;
  max-width: calc(15.4em + 2 * var(--title-pad));
}

/* Zusaetzliche Zeilenumbrueche des Titels. Die 320-px-Vorlage setzt die
   Begruessung sechszeilig; sobald die Zeilen der Desktop-Fassung passen,
   fallen die Umbrueche der Reihe nach wieder weg. */
.hero__title .brk-xs,
.hero__title .brk-sm { display: none; }
@media (max-width: 639.98px) { .hero__title .brk-sm { display: inline; } }
@media (max-width: 559.98px) { .hero__title .brk-xs { display: inline; } }

.hero__scene { position: relative; }

/* Moewen ueber der Skyline – nur in der breiten Darstellung, wie in der Vorlage */
.hero__birds { display: none; }
@media (min-width: 900px) {
  .hero__birds {
    display: block;
    position: absolute;
    right: 13%;
    bottom: calc(100% + 2.9vw);
    width: clamp(44px, 3.6vw, 72px);
    pointer-events: none;
  }
}

/* In der 320-px-Vorlage ist die Silhouette rund 572 px breit (1,79 x Fenster)
   und links um etwa 9,5 % des Ueberstands verschoben, damit Hafenkrankenhaus
   und Landungsbruecken im Bild stehen. Ab 890 px Fensterbreite deckt sich die
   Formel von selbst mit "width: 100%", der Versatz laeuft dabei auf null aus –
   deshalb kein Bruch beim langsamen Aufziehen des Fensters. */
.hero__skyline {
  display: block;
  position: relative;
  width: max(100%, min(178.75vw, 890px));
  max-width: none;
  left: 50%;
  transform: translateX(calc(-50% - (100% - 100vw) * 0.095));
}

.hero__water {
  position: relative;
  height: clamp(112px, 17.3vw, 333px);
  background: var(--water);
}

.hero__animal {
  position: absolute;
  bottom: 22%;
  pointer-events: none;
  will-change: transform;
}
.hero__animal--seal  { left: 4%;  width: clamp(52px, 14vw, 141px); }
.hero__animal--otter { left: 38%; width: clamp(118px, 32vw, 320px); }
.hero__animal--fish  { display: none; }

@media (min-width: 760px) {
  .hero__animal--seal  { left: 28.3%; width: 7.4%;  bottom: 25%; }
  .hero__animal--otter { left: 49.8%; width: 16.7%; bottom: 42%; }
  .hero__animal--fish  { display: block; left: 81.7%; width: 7.4%; bottom: 31%; }
}

/* --------------------------------------------------------------------------
   6. Einleitung
   -------------------------------------------------------------------------- */
.intro .two-col > div > p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   7. Angebote – Begriffswolke
   -------------------------------------------------------------------------- */
.cloud {
  position: relative;
  margin-inline: auto;
  max-width: 1920px;
}

.cloud__item {
  display: block;
  margin: 0;              /* der Absatz-Grundabstand wuerde die Wolke auseinanderziehen */
  text-align: center;
  font-weight: 700;              /* Vorlage: NotoSans-Bold */
  font-size: var(--step-cloud);
  line-height: 1.32;
  color: var(--navy);
}

.cloud__item .wave {
  display: block;
  width: 9.5em;
  max-width: 90%;
  margin: 0.35em auto 0;
}

.cloud__center {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--step-cloud-c);
  color: var(--terracotta);
  text-align: center;
  line-height: 1;
}

/* -- Mobil und Tablet: gestaffelte Liste wie in der 320-px-Vorlage --
   Die Vorlage stellt die Begriffe nicht buendig an den Rand, sondern setzt ihre
   Mitte abwechselnd auf rund 30 % und 71 % der Breite; breitere, zweizeilige
   Begriffe ruecken naeher zur Mitte. Genau diese Werte stehen als --cx am
   Element, so wie --x/--y die Desktop-Wolke beschreiben.

   Positioniert wird ueber margin-left plus translate, damit die Kastenmitte
   auf --cx liegt. max-width leitet sich aus --cx ab und haelt den Begriff von
   selbst im Bild: bei --cx 30 % sind hoechstens 60 % Breite moeglich, bei 71 %
   hoechstens 58 %. Die Reihenfolge im HTML ist die der Vorlage; der Desktop
   setzt die Begriffe absolut und bleibt davon unberuehrt.

   Senkrecht liegen die Begriffe dicht: Textzeile, Welle, direkt der naechste
   Begriff – weil sie versetzt stehen, stossen sie nicht aneinander. */
@media (max-width: 1439.98px) {
  .cloud {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3em;
  }
  .cloud__item {
    --cloud-cx: var(--cx, 50%);
    width: max-content;
    max-width: min(calc(2 * var(--cloud-cx)), calc(200% - 2 * var(--cloud-cx)));
    margin-left: var(--cloud-cx);
    translate: -50% 0;
  }
  .cloud__item .wave { width: 8em; margin-top: 0.1em; }
  .cloud > .cloud__center { margin-block: 0.9em 1.05em; }

  /* Die Wolke nutzt einen schmaleren Seitenrand als der Fliesstext – in der
     Vorlage reichen die Begriffe bis etwa 12 px an den Rand heran. Oberhalb
     von 960 px waere 3,75 vw allerdings *groesser* als der Seitenrand und
     machte die Wolke schmaler als die uebrigen Bloecke, deshalb min(). */
  .section--cloud .container { padding-inline: min(3.75vw, var(--gutter)); }
}

/* Tablet: dieselbe Mechanik, aber mit einer eigenen Spurenverteilung --tx.
   -------------------------------------------------------------------------
   Vorher standen hier die Desktop-Werte --x. Die beschreiben aber eine
   *zweidimensionale* Anordnung; als Spuren einer einspaltigen Liste gelesen
   ergaben sie Treppen (10,5 -> 32,7 -> 50,6 -> 74,0 %) und schoben Begriffe an
   den Rand: bei --x 90,5 % laesst die max-width-Formel nur noch 19 % Breite zu,
   "Training von Aktivitaeten des taeglichen Lebens (ADL)" brach dort fuenfzeilig
   um.

   --tx setzt die Begriffe darum wie in der Smartphone-Vorlage abwechselnd links
   und rechts, aber mit *wechselndem Abstand zur Mitte* (12 bis 26 Prozentpunkte
   statt konstant rund 25). Damit bleibt die Mitte belegt – das war die
   Beanstandung, die urspruenglich zu --x gefuehrt hat – ohne dass eine Treppe
   entsteht. Alle Spuren liegen zwischen 24 und 76 %, dadurch stehen jedem
   Begriff mindestens 48 % Breite zur Verfuegung; der breiteste Begriff braucht
   bei 620 px 38 %.

   Groessen, Abstaende und Reihenfolge aendern sich nicht. */
@media (min-width: 620px) and (max-width: 959.98px) {
  .cloud__item { --cloud-cx: var(--tx, var(--x, 50%)); }
}

/* -- 740 bis 879,98 px: drei Begriffe nebeneinander, leicht versetzt --
   -------------------------------------------------------------------------
   Die Reihe ueber alle Breiten lautet damit zwei -> drei -> vier Begriffe
   nebeneinander: die Smartphone-Vorlage stellt sie in zwei versetzten Spuren,
   die Desktop-Vorlage in rund vier, und dazwischen liegen drei.

   Erst ab hier ist Platz dafuer. Gemessen wurde die max-content-Breite aller
   Begriffe gegen ein Drittel der Wolkenbreite: der breiteste, "neurophysio-
   logische Behandlungsmethoden", braucht bei 620 px 241 px bei 191 px Zelle,
   bei 700 px 222 px bei 216 px Zelle und passt ab etwa 720 px. 740 px laesst
   dem Umbruch etwas Luft.

   Umgesetzt als umbrechende Flex-Reihe mit fester Drittelbreite. Angebrochene
   Reihen zentriert justify-content, dadurch bleibt die Anordnung unregelmaessig
   statt tabellarisch. "Ergotherapie" nimmt als einziger Begriff eine ganze
   Reihe ein und steht damit wie in beiden Vorlagen mittig.

   --ty am Element verschiebt jeden Begriff um Bruchteile einer Zeile nach
   unten – das ist der Versatz, der die Reihen als Wolke und nicht als Tabelle
   lesen laesst. In jeder Reihe steht ein Begriff auf 0, sonst saeckte die Reihe
   als Ganzes ab. Verschoben wird ueber translate, weil transform fuer die
   Einblendung gebraucht wird. */
@media (min-width: 960px) and (max-width: 1439.98px) {
  .cloud {
    flex-flow: row wrap;
    justify-content: center;
    align-items: flex-start;
    /* Der Reihenabstand muss den groessten --ty-Unterschied zwischen senkrecht
       benachbarten Begriffen (1,2 em) auffangen, sonst ruecken sie aufeinander. */
    gap: 1.4em 0;
  }
  .cloud__item {
    flex: 0 0 33.333%;
    width: auto;
    max-width: 33.333%;
    margin-left: 0;
    translate: 0 var(--ty, 0em);
  }
  .cloud > .cloud__center {
    flex-basis: 100%;
    max-width: 100%;
    translate: none;
  }
}

/* -- Ab 880 px: freie Anordnung wie in der 1920-px-Vorlage --
   -------------------------------------------------------------------------
   Zentriert wird ueber die eigenstaendige translate-Eigenschaft, damit
   transform fuer Einblendung und Schweben frei bleibt.

   Die Schwelle lag frueher bei 980 px. Darunter stand die Wolke als schmale
   Liste in einem breiten Feld – ordentlich, aber mit leerer Mitte und leeren
   Raendern. Nachgemessen wurde, ab wann die Vorlagenanordnung wieder traegt:
   bei 800 px ueberlagern sich "kunsttherapeutisch"/"gestalterisch" und
   "Ergotherapie"/"strukturierend", bei 840 px beruehren sie sich, ab 880 px
   stehen sie frei. Deshalb 880 px.

   Kein min-height hier: zusammen mit aspect-ratio leitet Chromium daraus die
   *Breite* ab (584 px x 1920/1236 = 907 px) – die Wolke wurde damit breiter als
   das 880-px-Fenster und "psychoedukativ" sowie der ADL-Begriff standen halb
   ausserhalb. Das Seitenverhaeltnis allein genuegt. */
@media (min-width: 1440px) {
  .cloud { aspect-ratio: 1920 / 1236; }
  .cloud__item {
    position: absolute;
    left: var(--x);
    top: var(--y);
    translate: -50% -50%;
    width: max-content;
    max-width: 15em;
  }
  .cloud__item .wave { width: 100%; max-width: 12em; }
}

/* --------------------------------------------------------------------------
   8. Team
   -------------------------------------------------------------------------- */
.team__lead {
  max-width: 46rem;
  margin: 0 auto clamp(3rem, 6vw, 5rem);
  text-align: center;
}
.team__lead strong { font-weight: 700; }   /* Vorlage: NotoSans-Bold */

/* Kein justify-items: center. Damit waeren die Karten nicht gedehnt, und die
   prozentuale Breite des Portraits (siehe unten) haette keinen Bezug mehr –
   der Kreis wuerde auf die Textbreite zusammenfallen. Gedehnt + max-width +
   margin-inline: auto ergibt dasselbe Bild, aber mit definierter Breite. */
.team__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(3rem, 6vw, 5rem) var(--col-gap);
}

/* Schwellen aus der Spaltenbreite gerechnet, nicht geschaetzt: mehrspaltig
   erst, wenn eine Spalte so breit ist wie das Portrait selbst
   (--portrait, 280 px @320 bis 400 px @1920).

     Spalte(n) = (min(1420, W) - 2*Seitenrand - (n-1)*Spaltenabstand) / n

   Zweispaltig erreicht die Portraitbreite bei 940 px (411 gegen 414),
   dreispaltig bei 1440 px (397 gegen 407). Vorher standen hier 640 und
   980 px – Werte aus der Zeit, als das Portrait auf 310 px gedeckelt war und
   der Fliesstext 19,2 px hatte. Bei 640 px war eine Spalte 272 px breit und
   das 418 px grosse Portrait ragte um 146 px darueber hinaus. */
@media (min-width: 940px)  { .team__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1440px) { .team__grid { grid-template-columns: repeat(3, 1fr); } }

/* Die Karte muss mindestens so breit sein wie das Portrait, sonst laufen die
   auto-Raender des Kreises leer und er sitzt links statt mittig – genau das
   war der Fehler: bei 24 rem Deckel und 418 px Portrait stand der Kreis 36 px
   aus der Karte heraus, und zwar nur nach rechts. */
.member {
  max-width: max(var(--portrait), 24rem);
  margin-inline: auto;
  text-align: left;
}

.member__figure {
  /* 100 % deckelt den Kreis auf die Spaltenbreite. Bei 1920 px greift das:
     die Spalte ist dort 383 px breit, die Vorlage haette 400 px – siehe
     offene Punkte, das haengt an der Breite von container--wide. */
  width: min(var(--portrait, clamp(190px, 26vw, 310px)), 100%);
  aspect-ratio: 1;
  margin: 0 auto clamp(1.25rem, 2.5vw, 2rem);
  border-radius: 50%;
  overflow: hidden;
  background: var(--portrait-bg);
}
.member__figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease-out);
}
.member:hover .member__figure img { transform: scale(1.04); }

.member__name {
  font-size: var(--step-h3);
  font-weight: 700;
  text-align: center;
  color: var(--teal);
  margin-bottom: 0.9em;
}
/* line-height bewusst NICHT gesetzt: die Stichpunkte stehen auf
   --step-small und damit auf Fliesstextgroesse, sie erben die Laenge. */
.member__facts {
   font-size: var(--step-small);
   padding-left: 1.2em;  /* Platz fuer die Listensymbole */
}
.member__facts li + li { margin-top: 0.15em; }

/* --------------------------------------------------------------------------
   9. Jobs
   -------------------------------------------------------------------------- */
.jobs__text { max-width: 74rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.jobs__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.75rem, 8vw, 8rem);
}
@media (max-width: 699.98px) {
  .jobs__list { flex-direction: column; align-items: center; gap: clamp(2rem, 7vw, 3rem); }
}

.job-link {
  display: inline-block;
  font-weight: 700;
  font-size: var(--step-job);
  line-height: 1.6;              /* eigener Faktor: --body-leading ist eine Laenge */
  color: var(--teal);
  text-decoration: none;
  text-align: center;
}
.job-link .wave {
  display: block;
  width: 100%;
  max-width: 13em;
  margin: 0.3em auto 0;
  transition: transform 0.45s var(--ease-out);
}
.job-link:hover .wave,
.job-link:focus-visible .wave { transform: translateX(6px) scaleX(1.04); }

/* --------------------------------------------------------------------------
   10. Infos
   -------------------------------------------------------------------------- */
.infos .two-col p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   11. Kontakt
   -------------------------------------------------------------------------- */
/* Vorlage: NotoSans-SemiBold 18 px @320 / 30 px @1920 - das rosa Label im
   PDF sagt "Bold", eingebettet ist SemiBold. Rueckfrage laeuft, bis dahin
   gilt die Zeichnung. Siehe konzepte/typografie-abgleich.md */
.contact__name {
  font-size: var(--step-contact);
  font-weight: 600;
  line-height: 1.6;              /* eigener Faktor: --body-leading ist eine Laenge */
  margin-bottom: 1.15em;
}
.contact__block + .contact__block { margin-top: 1.6em; }
.contact__heading { font-weight: 600; margin-bottom: 0.8em; }  /* Vorlage: SemiBold */

.contact dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.15em 0.5em; }
.contact dt { font-weight: 400; }
.contact dd { margin: 0; }

.transit li {
  list-style: none;
  position: relative;
  padding-left: 1.6em;
  margin-bottom: 0.2em;
}
.transit li::before {
  content: "";
  position: absolute;
  left: 0.15em; top: 0.72em;
  width: 0.42em; height: 0.42em;
  border-radius: 50%;
  background: var(--navy);
}

/* Die vergroesserte Karte ragt bewusst ueber die Spalte hinaus. "clip" schneidet
   sie am Sektionsrand ab, ohne – anders als "hidden" – einen Scroll-Container zu
   erzeugen, der die feste Kopfzeile stoeren wuerde. */
.contact { overflow-x: clip; }

/* <figure> bringt vom Browser 40 px Aussenabstand mit – der hat die Karte auf
   dem Desktop gegenueber dem Text nach innen versetzt. */
.contact__map {
  margin: clamp(2.5rem, 6vw, 5rem) 0 0;
}
.contact__map img { display: block; width: 100%; }

/* Bis 900 px zeigt die Vorlage die Karte rund 1,87-fach vergroessert; sie laeuft
   links und rechts aus dem Bild, der rote Standortpunkt (bei 47,49 % der
   Bildbreite) steht dabei genau in der Seitenmitte. Bei 900 px trifft die
   Formel exakt die Spaltenbreite, der Versatz ist dort null. */
@media (max-width: 899.98px) {
  .contact__map img {
    width: max(100%, min(187.5vw, 828px));
    max-width: none;
    margin-left: 50%;
    transform: translateX(calc(-50% + (100% - 100vw + 2 * var(--gutter)) * 0.0475));
  }
}

/* Kontaktdaten werden per JavaScript eingesetzt (Schutz vor Adress-Sammlern) */
.contact-data a { color: var(--navy); text-decoration: underline; }
.contact-data a:hover { color: var(--teal); }
.js-note {
  display: inline-block;
  padding: 0.15em 0.5em;
  border: 1px dashed currentColor;
  border-radius: 3px;
  font-size: 0.92em;
  line-height: 1.6;              /* eigener Faktor: --body-leading ist eine Laenge */
  opacity: 0.8;
}

/* --------------------------------------------------------------------------
   12. Fusszeile
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--mist);
  padding: 0 var(--gutter) clamp(2rem, 4vw, 3rem);
  text-align: center;
  font-size: var(--step-footer);   /* in beiden Vorlagen konstant 16 px */
  line-height: 1.6;                /* eigener Faktor: --body-leading ist eine Laenge */
}
.site-footer a { color: var(--navy); text-decoration: none; }
.site-footer a:hover { color: var(--teal); text-decoration: underline; }
.site-footer .sep { padding-inline: 0.45em; opacity: 0.55; }
@media (max-width: 559px) {
  .site-footer .sep { display: block; height: 0.35em; overflow: hidden; }
}

/* --------------------------------------------------------------------------
   13. Unterseiten (Impressum / Datenschutz)
   -------------------------------------------------------------------------- */
.page {
  padding-top: calc(var(--header-h) + clamp(2.5rem, 6vw, 5rem));
  padding-bottom: var(--section-y);
  background: var(--cream);
}
.page__title {
  font-family: var(--font-serif);
  font-size: var(--step-h2);
  color: var(--terracotta);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.legal { max-width: 46rem; }
.legal h2 {
  font-family: var(--font-serif);
  font-size: calc(var(--step-body) * 1.5);
  color: var(--terracotta);
  margin: 2.4em 0 0.7em;
}
.legal h3 {
  font-size: 1.05em;
  font-weight: 700;
  margin: 1.8em 0 0.5em;
}
.legal ul { list-style: disc; padding-left: 1.4em; margin-bottom: 1.15em; }
.legal li { margin-bottom: 0.35em; }
.legal address { font-style: normal; margin-bottom: 1.15em; }
.legal .upper { font-size: 0.94em; line-height: 1.6; }

.notice {
  border-left: 4px solid var(--terracotta);
  background: rgba(166, 92, 82, 0.07);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0 2rem;
  font-size: 0.95em;
  line-height: 1.6;  /* eigener Faktor: --body-leading ist eine Laenge */
  border-radius: 0 4px 4px 0;
}
.notice p:last-child { margin-bottom: 0; }

.back-link { display: inline-block; margin-top: 3rem; font-weight: 600; }

/* --------------------------------------------------------------------------
   13a. Stellenangebot (stellenangebot.html)
   --------------------------------------------------------------------------
   Baut ausschliesslich auf den vorhandenen Tokens und Bausteinen auf: Kopf,
   Fusszeile und .page kommen unveraendert von den Rechtsseiten, die Ueber-
   schriften stehen im Register von .legal h2, die Aufzaehlungspunkte sind der
   Marker aus .transit, und der Bewerbungslink ist derselbe .job-link samt
   Welle wie im Abschnitt "Jobs" der Startseite.

   Einziger eigener Baustein ist die Eckdaten-Leiste .job-facts: Mist-Flaeche
   mit Terrakotta-Haarlinie, die Werte in Prata – der einzigen Serife der
   Seite – damit die vier Kerndaten beim Ueberfliegen sofort haengenbleiben.
   -------------------------------------------------------------------------- */
.job { max-width: 54rem; }

/* Sortiert die Seite ein, bevor die Ueberschrift kommt – gleiches Register wie
   die Namen im Team (Teal, fett), nur kleiner. */
.job__kicker {
  font-size: var(--step-small);
  font-weight: 700;
  color: var(--teal);
  margin-bottom: 0.7em;
}

/* Die Rechtsseiten setzen .page__title auf --step-h2 (mobil 12,5vw). "Impressum"
   passt damit in die Zeile, "Ergotherapeut*in" nicht – bei 390 px lief das Wort
   ueber den Rand hinaus. Hier gilt deshalb --step-display, das Token fuer die
   H1: es folgt demselben Dreiband-System und bleibt in jeder Breite im Satz.
   Der Abstand nach unten ist kleiner als auf den Rechtsseiten, weil direkt der
   Einleitungssatz folgt, der eng an den Titel gehoert. */
.page--job .page__title {
  font-size: var(--step-display);
  overflow-wrap: break-word;
  margin-bottom: 0.55em;
}

/* Einleitung, Fliesstext und Aufzaehlungen laufen bis an dieselbe rechte Kante
   wie die Eckdaten-Leiste und der Bewerbungsblock – die Spaltenbreite gibt
   allein .job vor, kein Element deckelt sich zusaetzlich. */
.job__lead {
  font-size: calc(var(--step-body) * 1.22);
  line-height: 1.45;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* Eckdaten ------------------------------------------------------------------ */
.job-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem);
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
  padding: clamp(1.4rem, 3vw, 2rem) clamp(1.4rem, 3vw, 2.25rem);
  background: var(--mist);
  border-top: 3px solid var(--terracotta);
  border-radius: 0 0 4px 4px;
}
@media (max-width: 899.98px) { .job-facts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 419.98px) { .job-facts { grid-template-columns: 1fr; } }

.job-facts__item { min-width: 0; }

.job-facts dt {
  font-size: calc(var(--step-small) * 0.88);
  line-height: 1.5;  /* eigener Faktor: --body-leading ist eine Laenge */
  font-weight: 700;
  color: var(--teal);
  margin-bottom: 0.5em;
}
.job-facts dd {
  margin: 0;
  font-family: var(--font-serif);
  /* Bewusst nicht --step-h3: das waere mobil 12,5vw und wuerde "Unbefristet"
     ueber die Spalte hinausschieben. Der Wert bleibt in jeder Breite deutlich
     ueber dem Fliesstext und laeuft nie um. */
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1.2;
  color: var(--navy);
}
.job-facts__sub {
  display: block;
  margin-top: 0.35em;
  font-family: var(--font-sans);
  font-size: calc(var(--step-small) * 0.92);
  line-height: 1.35;
  color: var(--navy);
  opacity: 0.72;
}

/* Fliesstext ---------------------------------------------------------------- */
.job__body h2 {
  font-family: var(--font-serif);
  font-size: calc(var(--step-body) * 1.5);
  color: var(--terracotta);
  margin: 2.2em 0 0.7em;
}
.job__body > h2:first-child { margin-top: 0; }

.job-points { margin: 0 0 1.15em; }

.job-points li {
  list-style: none;
  position: relative;
  padding-left: 1.6em;
  margin-bottom: 0.45em;
}
.job-points li::before {
  content: "";
  position: absolute;
  left: 0.15em; top: 0.72em;
  width: 0.42em; height: 0.42em;
  border-radius: 50%;
  background: var(--teal);
}
.job-points strong { font-weight: 700; }

/* Die Leistungen sind eine ungeordnete Sammlung – zwei Spalten machen sie
   ueberschaubar, sobald die Zeile dafuer breit genug ist. */
@media (min-width: 700px) {
  .job-points--two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--col-gap);
  }
  .job-points--two li { margin-bottom: 0.6em; }
}

/* Bewerbung ----------------------------------------------------------------- */
.job-apply {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding: clamp(2rem, 5vw, 3.25rem) clamp(1.4rem, 4vw, 3rem) clamp(2rem, 4vw, 3rem);
  background: var(--mist);
  border-radius: 4px;
  text-align: center;
}
.job-apply h2 {
  font-family: var(--font-serif);
  font-size: calc(var(--step-body) * 1.7);
  color: var(--terracotta);
  margin-bottom: 0.55em;
}
.job-apply p { max-width: 34rem; margin-inline: auto; }

.job-apply__action { margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; }

.job-apply__contact { margin-top: clamp(1.25rem, 3vw, 1.75rem); font-size: var(--step-small); }
.job-apply__contact p { margin-bottom: 0; }

.job-apply__sign {
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 0.4em;
  font-weight: 700;
}
.job-apply__address {
  font-style: normal;
  font-size: var(--step-small);
  line-height: 1.5;
  opacity: 0.8;
}

/* --------------------------------------------------------------------------
   14. Bewegung
   -------------------------------------------------------------------------- */

/* Einblenden beim Scrollen */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
  transition-delay: calc(80ms * var(--i, 0));
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Wolken-Begriffe: leicht heranzoomen statt schieben */
.cloud__item.reveal { transform: translateY(10px) scale(0.96); }
.cloud__item.reveal.is-visible { transform: none; }

/* Untereinander stehende Begriffe erreichen den Bildrand ohnehin nacheinander –
   eine zusaetzliche Staffelung liesse die letzten ueber eine Sekunde auf sich
   warten und wirkte wie ein Ladefehler. */
@media (max-width: 1439.98px) {
  .cloud__item.reveal { transition-delay: 0s; }
}

/* Sanftes Schweben der Wasser-Motive */
@keyframes drift-y {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(var(--amp, -6px)); }
}
@keyframes drift-tilt {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(var(--amp, -6px)) rotate(var(--tilt, 1.2deg)); }
}
@keyframes bird-drift {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-16px, 7px); }
  100% { transform: translate(0, 0); }
}
@keyframes cloud-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

.hero__animal--seal  { --amp: -5px;  animation: drift-y 6.5s ease-in-out infinite; }
.hero__animal--otter { --amp: -6px; --tilt: 0.7deg; animation: drift-tilt 8.5s ease-in-out infinite; }
.hero__animal--fish  { --amp: -9px; --tilt: -2deg;  animation: drift-tilt 5.4s ease-in-out infinite; }
.hero__birds { animation: bird-drift 26s ease-in-out infinite; }

/* Schweben und Staffelung gehoeren zur freien Anordnung und schalten deshalb
   an derselben Schwelle wie diese (1440 px). */
@media (min-width: 1440px) {
  .cloud__item.is-visible {
    animation: cloud-float var(--float, 9s) ease-in-out infinite;
    animation-delay: var(--float-delay, 0s);
  }
}

/* Titel beim Laden */
@keyframes rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
.hero__title  { animation: rise 1s var(--ease-out) both 0.15s; }
.hero__scene  { animation: rise 1.1s var(--ease-out) both 0.35s; }

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* .cloud__item.reveal setzt transform mit hoeherer Spezifitaet, wuerde die
     Zeile darueber also schlagen und die Begriffe dauerhaft auf scale(0.96)
     stehen lassen. Deshalb hier ausdruecklich mit. Das ist auch eine
     Messfalle: wer die Wolke vor dem Einblenden vermisst, misst 4 % zu klein. */
  .reveal, .cloud__item.reveal { opacity: 1; transform: none; }
  .hero__title, .hero__scene { animation: none; opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   15. Druck
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .mobile-nav, .nav-toggle, .hero__scene, .skip-link { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section { padding-block: 1.2rem; }
  .reveal { opacity: 1; transform: none; }
  a { color: #000; }
}