/* ============================================================
   Seiten-CSS Über uns (Paket P-D, WordPress-Theme)
   Basis: abgenommenes v5-Seiten-CSS (ueber-uns.css). Regeln und Maße unverändert,
   Kommentare gekürzt. Entfallen sind nur die Regeln für das Zitat (.geschichte-quote),
   den Textlink unter den Werten (#werte .next-step) und den H1-Sonderfall für
   320 bis 340 px (die neue H1 ist kurz).
   Nur Kernel-Tokens, jede Schriftgröße über Tokens oder clamp().
   ============================================================ */

/* ------------------------------------------------------------
   SEKTION: Hero (Foto-Variante, Kernel .hero-full--sub)
   Foto: Hafen Stralsund. Scrim: links dicht, nach rechts offener, damit der Hafen
   sichtbar bleibt. Mobil senkrechter Verlauf (dicht über dem Text).
   ------------------------------------------------------------ */
#hero .hero-bg img { object-position: 50% 58%; }

#hero .hero-scrim {
  background: linear-gradient(90deg,
    rgba(var(--navy-rgb), .95) 0%,
    rgba(var(--navy-rgb), .85) 32%,
    rgba(var(--navy-rgb), .72) 68%,
    rgba(var(--navy-rgb), .45) 100%);
}
@media (max-width: 720px) {
  #hero .hero-scrim {
    background: linear-gradient(180deg,
      rgba(var(--navy-rgb), .90) 0%,
      rgba(var(--navy-rgb), .82) 45%,
      rgba(var(--navy-rgb), .80) 75%,
      rgba(var(--navy-rgb), .90) 100%);
  }
}
/* Ab 801 px Höhe auf dem Handy: dichte Zonen in Pixeln über Überschrift und Text,
   dazwischen bleibt der Hafen sichtbar. */
@media (max-width: 720px) and (min-height: 801px) {
  #hero .hero-scrim {
    --zt: 140px; --zb: 275px;
    background: linear-gradient(180deg,
      rgba(var(--navy-rgb), .90) 0,
      rgba(var(--navy-rgb), .86) var(--zt),
      rgba(var(--navy-rgb), .42) calc(var(--zt) + 56px),
      rgba(var(--navy-rgb), .40) calc(100% - var(--zb) - 64px),
      rgba(var(--navy-rgb), .84) calc(100% - var(--zb)),
      rgba(var(--navy-rgb), .92) 100%);
  }
}
@media (max-width: 560px) and (min-height: 801px) { #hero .hero-scrim { --zt: 140px; --zb: 325px; } }
@media (max-width: 430px) and (min-height: 801px) { #hero .hero-scrim { --zt: 168px; --zb: 382px; } }
@media (max-width: 370px) and (min-height: 801px) { #hero .hero-scrim { --zt: 168px; --zb: 430px; } }
@media (max-width: 340px) and (min-height: 801px) { #hero .hero-scrim { --zt: 150px; --zb: 470px; } }

/* Eyebrow auf dem Foto in vollem Ivory (Kernel-Wert fällt gegen helle Bildstellen unter AA). */
#hero .eyebrow { color: var(--ivory); }

/* Niedrige Querformat-Fenster: kleinere H1 und Lead, hellerer Scrim, damit der Hero
   nicht über die Fensterhöhe wächst und der Text lesbar bleibt. */
@media (min-width: 721px) and (max-height: 480px) {
  #hero .hero-top .h1 { font-size: clamp(24px, 2.6vw + 4px, 31px); }
  #hero .hero-foot .lead { font-size: var(--fs-body-sm); }
  #hero .hero-scrim {
    background: linear-gradient(90deg,
      rgba(var(--navy-rgb), .95) 0%,
      rgba(var(--navy-rgb), .86) 35%,
      rgba(var(--navy-rgb), .78) 100%);
  }
}

.lead-narrow { max-width: 640px; }

/* Hero: Textlink "Leilas Geschichte" neben den Chips, schmal in eigener Zeile. */
#hero .chip-row { align-items: center; }
#hero .hero-next { margin-left: var(--gap-sm); }
@media (max-width: 720px) {
  #hero .hero-next { flex-basis: 100%; margin-left: 0; margin-top: -4px; }
}

/* ------------------------------------------------------------
   SEKTION: Leilas Geschichte
   Bogenporträt (Kernel .arch-frame) links, Text rechts. Bis 900 px eine Spalte:
   Porträt (höchstens 300 px, zentriert), dann Text.
   ------------------------------------------------------------ */
.geschichte-grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: var(--gap-xl); row-gap: clamp(48px, 6vw, 88px); align-items: stretch;
}
.geschichte-media { display: flex; align-items: center; justify-content: center; min-width: 0; }
.geschichte-media .arch-frame { --arch-max: 360px; --arch-max-mobile: 280px; width: 100%; margin: 0; }
.geschichte-media .arch-photo { display: block; width: 100%; height: 100%; }
.geschichte-text { justify-content: center; min-width: 0; gap: 20px; }
.geschichte-text .body-text { max-width: 62ch; }

@media (max-width: 900px) {
  .geschichte-grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--gap-xl); }
  .geschichte-media .arch-frame { --arch-max: 300px; }
}

/* ------------------------------------------------------------
   SEKTION: Fünf Zusagen (Sand-Bühne, Karten mit Icon-Kachel)
   Ab 1024 px: 3 Spalten, Karten 1 bis 3 oben, Karte 4 und 5 links übereinander,
   rechts daneben das Bildfeld über beide Reihen. 720 bis 1023 px: 2 Spalten,
   Karte 5 neben dem Bild. Unter 720 px: eine Spalte, Bild als eigene Zeile.
   ------------------------------------------------------------ */
.werte-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-lg); align-items: stretch;
}
.werte-grid > .card { gap: var(--gap-sm); }
.werte-grid > .card:nth-child(4) { grid-column: 1; grid-row: 2; }
.werte-grid > .card:nth-child(5) { grid-column: 1; grid-row: 3; }
.werte-grid .icon-badge { margin-bottom: 6px; }
.werte-grid .img-field {
  position: relative; overflow: hidden; min-height: 320px;
  grid-column: 2 / 4; grid-row: 2 / 4;
  border-radius: var(--radius-card);
  background: var(--ivory-dark);
}
.werte-grid .img-field img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; display: block;
}

@media (max-width: 1023px) {
  .werte-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .werte-grid > .card:nth-child(4), .werte-grid > .card:nth-child(5) { grid-column: auto; grid-row: auto; }
  .werte-grid .img-field { grid-column: auto; grid-row: auto; }
  .werte-grid .img-field img { object-position: 38% 38%; }
}
@media (max-width: 719px) {
  .werte-grid { grid-template-columns: minmax(0, 1fr); }
  .werte-grid .img-field { aspect-ratio: 4 / 3; width: 100%; }
}

/* Kartentexte sind kurz: keine automatische Silbentrennung, Umbruch an Wortgrenzen. */
:is(.werte-grid > .card, #arbeitsweise .card, #mission-vision .media-card-body) { hyphens: manual; }
:is(.werte-grid, #arbeitsweise, #mission-vision) .card-desc { text-wrap: pretty; }

/* ------------------------------------------------------------
   SEKTION: Mission und Vision (zwei Bildkarten, gleich hoch)
   ------------------------------------------------------------ */
.mv-grid { align-items: stretch; }

/* ------------------------------------------------------------
   SEKTION: So arbeiten wir (drei Karten mit Icon-Kachel wie bei den Zusagen)
   ------------------------------------------------------------ */
#arbeitsweise .card { gap: var(--gap-sm); }
#arbeitsweise .icon-badge { margin-bottom: 6px; }

/* Nächster Schritt am Sektionsende (Textlink). */
.next-step { margin: clamp(28px, 3.4vw, 44px) 0 0; }

.text-links a { text-decoration: underline; text-underline-offset: 2px; }

/* Schluss: Verweis zur Academy unter den Buttons. */
.cta-academy {
  margin-top: var(--gap-md); padding-top: 20px; border-top: 1px solid var(--ivory-18);
  font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--ivory-82);
}

/* ------------------------------------------------------------
   Prüfmarke für Leila (nur auf der Testumgebung im Markup)
   ------------------------------------------------------------ */
.pruef-marker {
  margin: 0; padding: 8px 12px;
  font-size: var(--fs-caption); line-height: 1.45; font-weight: 600; color: var(--navy-ink-2);
  background: var(--ivory-dark); border-radius: var(--radius-xs);
}

/* ============================================================
   Runde 21.10.2026, Paket P7a, Fix 1: Handy, Medium oben, Text darunter (Regel von Nicholas)
   Unter 721 px liegt nirgends Text über Kopf oder Gesicht. Das Medium steht im Fluss über
   .hero-content (volle Breite der Fläche, Seitenverhältnis 4:5, object-fit: cover), ohne Scrim und
   ohne Verlauf. Der Text steht darunter auf Navy. Bildausschnitt: 50% 58% (Hafenbild ohne Person, Ausschnitt wie bisher).
   Das Medium liegt über den Kreisbögen (z-index), die Bögen bleiben nur im Textbereich sichtbar.
   ============================================================ */
@media (max-width: 720px) {
  #hero.hero-full { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; min-height: auto; }
  #hero .hero-bg { position: relative; inset: auto; z-index: 3; grid-column: 1; grid-row: 1; display: block; width: 100%; height: auto; margin: 0; aspect-ratio: 4 / 5; }
  #hero picture.hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
  #hero .hero-scrim { display: none; }
  #hero .hero-content { grid-column: 1; grid-row: 2; justify-content: flex-start; gap: clamp(18px, 5vw, 24px); padding-top: clamp(24px, 6vw, 32px); }
}