/* ==========================================================================
   r42 Sail and Rescue – style.css

   Aufbau (mobile first: erst die Handy-Ansicht, darunter jeweils die
   Desktop-Regeln derselben Komponente):

    1. Variablen und Schriften
    2. Grundlagen (Reset, Text, Links, Fokus, Hilfsklassen)
    3. Buttons
    4. Kopfzeile und Navigation
    5. Footer
    6. Startseite
       6.1 Hero mit Bilderschau
       6.2 Wirkungszahlen
       6.3 Abschnitte der Startseite (home-…)
    7. Inhaltsseiten (page-content, Bilder, FAQ, Tabs, Schiffsprofil,
       Kontakt, Zickzack-Tabelle)
    8. Aktuelles (Übersicht und Detailansicht)
    9. Spenden (Platzhalter für externe Inhalte, betterplace, Spenden-Seite spenden-…)
   10. Newsletter
   11. Bildband (fixed-frame)
   12. Breaking News
   13. Was tun wir? (wtw-…, auch genutzt von Ziele & Vision, Finanzen, Wer sind wir?)
   13b. Wer sind wir? (wsw-…: Zeitleiste, Zeichen r und 42)
   14. Reduzierte Bewegung

   Breakpoints: 30rem (480 px), 40rem (640 px), 48rem (768 px),
                58rem (928 px, ab hier Desktop-Navigation), 64rem (1024 px)
   ========================================================================== */


/* ==========================================================================
   1. Variablen und Schriften
   ========================================================================== */

:root {
  --pink: #e51a82;
  /* Dunkleres Pink für kleine Schrift und Links auf hellem Grund. Das Original-Pink
     erreicht dort nur 3,97:1 (Beige) bzw. 4,37:1 (Weiß), nötig sind 4,5:1 (WCAG AA).
     #c8146f: 5,0:1 auf Beige, 5,5:1 auf Weiß, 4,7:1 auf dem Footer-Beige.
     Das Original-Pink bleibt für Flächen, Linien, Symbole und große Schrift. */
  --pink-text: #c8146f;
  --white: #ffffff;
  --black: #000000;
  --bg: #f9f3ed;
  --bg-footer: #f7ebe1;
  --page-width: 76rem;
  --side-gap: 1.25rem;
  --a-color: var(--pink-text);
  --a-hover-color: #991157;
  --button-hover-color: var(--black); /* vorher helles Pink: Weiß darauf hatte nur 3,7:1 */
  --tz-line-width: 4px;

  --font-heading: "Jost", "Futura", "Century Gothic", Arial, sans-serif;
  --font-text: "Source Sans 3", Arial, sans-serif;

  color-scheme: light;
  font-family: Arial, Helvetica, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

@media (min-width: 58rem) {
  :root {
    --side-gap: 2.5rem;
  }
}

@font-face {
  font-family: "Jost";
  src: url("fonts/Jost-VariableFont_wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/SourceSans3-VariableFont_wght.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}


/* ==========================================================================
   2. Grundlagen
   ========================================================================== */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 7.5rem;
}

/* Überschriften und alles ohne eigene Regel: Jost */
body {
  margin: 0;
  color: var(--black);
  background: var(--bg);
  font-family: var(--font-heading);
  font-size: 1rem;
  line-height: 1.5;
}

body.menu-open {
  overflow: hidden;
}

/* Fließtext: Source Sans.
   Achtung: Die Regel gilt für JEDES span. Ein span, das wie eine Überschrift
   aussehen soll, braucht deshalb "font-family: inherit" (siehe .home-quote__text). */
p,
li {
  font-family: var(--font-text);
  font-size: 1.125rem;
  line-height: 1.6;
}

label,
span {
  font-family: var(--font-text);
}

h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
p {
  margin-top: 0;
}

a {
  color: var(--a-color);
  text-decoration: none;
}

a:hover {
  color: var(--a-hover-color);
}

button,
input {
  font: inherit;
}

button,
a,
input {
  -webkit-tap-highlight-color: transparent;
}

::selection {
  color: var(--white);
  background: var(--pink);
}

:focus-visible {
  outline: 3px solid var(--pink);
  outline-offset: 4px;
}

/* Nur für Screenreader sichtbar; der Skip-Link erscheint beim Tabben */
.skip-link,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus {
  z-index: 200;
  top: 1rem;
  left: 1rem;
  width: auto;
  height: auto;
  padding: 0.75rem 1rem;
  margin: 0;
  clip: auto;
  color: var(--black);
  background: var(--bg);
}


/* ==========================================================================
   3. Buttons
   ========================================================================== */

.button {
  display: inline-flex;
  min-height: 3.25rem;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.25rem;
  border: 2px solid transparent;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  transition: background-color 160ms ease, color 160ms ease;
}

/* Pink mit weißer Schrift. Hinweis: Nach der WCAG-2-Formel hätte Schwarz auf Pink mehr
   Kontrast (4,8 statt 4,4:1), tatsächlich ist Weiß aber deutlich besser lesbar
   (APCA, das Verfahren für WCAG 3: Weiß Lc 74, Schwarz Lc 36). */
.button--primary {
  color: var(--white);
  background: var(--pink);
}

/* Pink mit weißer Schrift, kleiner – für die Kopfzeile */
.button--header {
  min-height: 2.75rem;
  padding: 0.6rem 1rem;
  color: var(--white);
  background: var(--pink);
  transition: min-height 180ms ease, padding 180ms ease, background-color 160ms ease;
}

.button--primary:hover,
.button--header:hover {
  color: var(--white);
  background: var(--button-hover-color);
}

/* Auf dunklem Grund wäre der schwarze Hover-Zustand unsichtbar: dort weiß */
.hero .button--primary:hover,
.home-tile--black .button--primary:hover {
  color: var(--black);
  background: var(--white);
}

/* Weiße Kontur – für dunkle Flächen wie den Hero der Startseite */
.button--outline {
  border-color: var(--white);
  color: var(--white);
  background: transparent;
}

.button--outline:hover {
  color: var(--black);
  background: var(--white);
}

/* Auf hellen Inhaltsseiten wird .button--outline automatisch dunkel */
.page-content .button--outline {
  border-color: var(--black);
  color: var(--black);
}

.page-content .button--outline:hover {
  color: var(--white);
  background: var(--black);
}

/* Schwarz – für helle Flächen */
.button--dark {
  color: var(--white);
  background: var(--black);
}

.button--dark:hover {
  color: var(--white);
  background: var(--pink);
}

/* Schwarze Kontur – für helle Flächen */
.button--outline-dark {
  border-color: var(--black);
  color: var(--black);
  background: transparent;
}

.button--outline-dark:hover {
  color: var(--white);
  background: var(--black);
}


/* ==========================================================================
   4. Kopfzeile und Navigation
   ========================================================================== */

/* --- Kopfzeile ------------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  min-height: 7.5rem;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0 var(--side-gap);
  border-bottom: 2px solid var(--pink);
  background: var(--bg);
  transition: box-shadow 180ms ease, min-height 180ms ease;
}

/* Beim Scrollen (Klasse setzt script.js): Kopfzeile wird flacher und bekommt
   einen Schatten, Logo und Spenden-Button schrumpfen mit. */
.site-header.is-compact {
  min-height: 4.5rem;
  box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.28);
}

.brand {
  position: relative;
  z-index: 12;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.65rem;
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1;
}

.brand__logo {
  display: block;
  width: auto;
  height: 6.25rem;
  transition: height 180ms ease;
}

.site-header.is-compact .brand__logo {
  height: 4rem;
}

.site-header.is-compact .button--header {
  min-height: 2.35rem;
  padding-block: 0.45rem;
}

/* Spenden-Button und Menü-Knopf (nur mobil sichtbar) */
.header-actions {
  position: relative;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

/* --- Menü-Knopf (Burger) ----------------------------------------------------- */

.menu-toggle {
  display: inline-flex;
  width: 2.75rem;
  height: 2.75rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.4rem;
  border: 0;
  border-radius: 4px;
  color: var(--black);
  background: transparent;
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 1.65rem;
  height: 2px;
  background: currentColor;
  transition: transform 160ms ease;
}

.menu-toggle[aria-expanded="true"] span:first-child {
  transform: translateY(0.48rem) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] span:last-child {
  transform: translateY(-0.48rem) rotate(-45deg);
}

/* --- Hauptnavigation: mobil als Vollbild-Menü -------------------------------- */

.primary-nav {
  position: fixed;
  z-index: 10;
  inset: 0;
  display: flex;
  visibility: hidden;
  flex-direction: column;
  justify-content: flex-start;
  overflow-y: auto;
  padding: 7rem var(--side-gap) 2rem;
  background: var(--bg);
  opacity: 0;
  transition: opacity 160ms ease, visibility 160ms ease;
}

.primary-nav.is-open {
  visibility: visible;
  opacity: 1;
}

.primary-nav__list,
.nav-dropdown__menu {
  padding: 0;
  margin: 0;
  list-style: none;
}

.primary-nav__list {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

/* Menülinks. Der Spenden-Button (.nav-donate .button) ist ausgenommen, sonst verliert er
   am Desktop Hintergrund, Schriftfarbe und Größe. :where() hält die Spezifität niedrig,
   damit speziellere Regeln wie die für Instagram (.nav-social) weiter greifen. */
.primary-nav__list > li > a:where(:not(.button)),
.nav-dropdown__toggle {
  display: flex;
  width: 100%;
  min-height: 3.25rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.75rem;
  border: 0;
  border-radius: 4px;
  margin-inline: -0.75rem;
  color: var(--black);
  background: transparent;
  font-size: 1.2rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: background-color 140ms ease;
}

.primary-nav__list > li > a:not(.button):hover,
.nav-dropdown__toggle:hover {
  background: rgba(0, 0, 0, 0.12);
}

/* Untermenüs (Über uns, Aktuelles) */
.nav-dropdown__chevron {
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-0.15rem);
  transition: transform 160ms ease;
}

.nav-dropdown__toggle[aria-expanded="true"] .nav-dropdown__chevron {
  transform: rotate(225deg) translate(-0.1rem, -0.1rem);
}

.nav-dropdown__menu {
  display: none;
  padding: 0 0 0.6rem 1rem;
}

.nav-dropdown.is-open .nav-dropdown__menu {
  display: block;
}

.nav-dropdown__menu a {
  display: block;
  padding: 0.45rem 0.6rem;
  border-radius: 4px;
  margin-inline: -0.6rem;
  color: var(--black);
  font-size: 1rem;
  transition: background-color 140ms ease;
}

.nav-dropdown__menu a:hover {
  color: var(--black);
  background: rgba(0, 0, 0, 0.12);
}

/* Instagram im Menü: mobil Icon + Text, ab Desktop nur das Icon */
.primary-nav__list > .nav-social > a {
  justify-content: flex-start;
  gap: 0.6rem;
}

.nav-social svg {
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  fill: currentColor;
}

/* Spenden-Button im Menü: mobil versteckt (steht dort in .header-actions) */
.nav-donate {
  display: none;
  margin-top: 0.5rem;
}

.nav-donate .button {
  justify-content: center;
}

/* --- Ab Desktop: Navigation in einer Zeile ----------------------------------- */

@media (min-width: 58rem) {
  .site-header {
    min-height: 8.5rem;
    padding-inline: max(var(--side-gap), calc((100vw - var(--page-width)) / 2));
  }

  .site-header.is-compact {
    min-height: 5rem;
  }

  .header-actions {
    display: none;
  }

  .primary-nav {
    position: static;
    display: block;
    visibility: visible;
    overflow: visible;
    padding: 0;
    background: transparent;
    opacity: 1;
    transition: none;
  }

  .primary-nav__list {
    flex-direction: row;
    align-items: center;
    gap: clamp(0.2rem, 7vw - 3rem, 4rem);
  }

  .primary-nav__list > li > a:where(:not(.button)),
  .nav-dropdown__toggle {
    width: auto;
    min-height: 2.75rem;
    padding: 0.4rem 0.6rem;
    margin-inline: -0.6rem;
    font-size: 1rem;
    white-space: nowrap;
  }

  .nav-dropdown {
    position: relative;
  }

  .nav-dropdown__toggle {
    gap: 0.55rem;
  }

  .nav-dropdown__menu {
    position: absolute;
    top: 100%;
    left: -0.75rem;
    z-index: 5;
    min-width: 12rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid rgba(0, 0, 0, 0.16);
    background: var(--bg);
  }

  .nav-dropdown__menu a {
    padding: 0.55rem 0.6rem;
  }

  .primary-nav__list > .nav-social > a {
    width: 2.75rem;
    min-height: 2.75rem;
    justify-content: center;
    padding: 0;
    margin-inline: 0;
    transition: color 160ms ease;
  }

  .primary-nav__list > .nav-social > a:hover {
    color: var(--pink-text);
    background: transparent;
  }

  .nav-social__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .nav-donate {
    display: block;
    margin: 0 0 0 0.15rem;
  }

  .nav-donate .button {
    min-height: 2.75rem;
    padding-inline: 1.2rem;
  }
}

@media (min-width: 64rem) {
  .nav-donate {
    margin-left: 0.3rem;
  }
}


/* ==========================================================================
   5. Footer
   ========================================================================== */

.site-footer {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 2.25rem var(--side-gap) 6rem;
  color: var(--black);
  background: var(--bg-footer);
}

.site-footer__main {
  display: grid;
  justify-items: start;
  gap: 0.9rem;
}

.brand--footer {
  color: var(--black);
}

.brand--footer .brand__logo {
  height: 8rem;
}

.social-links {
  display: flex;
  gap: 0.5rem;
}

.social-links a {
  display: grid;
  width: 2.75rem;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(0, 0, 0, 0.35);
  border-radius: 50%;
  color: var(--black);
  transition: background-color 160ms ease, color 160ms ease;
}

.social-links a:hover {
  color: var(--white);
  background: var(--black);
}

.social-links svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: currentColor;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.25rem;
}

.footer-nav a {
  color: var(--black);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.footer-nav a:hover {
  color: var(--pink-text);
}

@media (min-width: 58rem) {
  .site-footer {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    padding: 2.5rem max(var(--side-gap), calc((100vw - var(--page-width)) / 2));
  }

  .site-footer__main {
    grid-template-columns: auto auto;
    align-items: center;
    column-gap: 1.2rem;
  }

  .social-links {
    grid-column: 1 / -1;
  }
}


/* ==========================================================================
   6. Startseite
   ========================================================================== */

/* --- 6.1 Hero mit Bilderschau ------------------------------------------------ */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 34rem;
  padding: 4rem var(--side-gap) 5rem;
  color: var(--white);
  background: var(--black);
}

/* Bilderschau: alle Bilder liegen nebeneinander auf einer Spur, die nach links gleitet */
.hero__bilder {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
}

/* Gleichmäßige Abdunklung, damit die weiße Schrift auf jedem Bild lesbar bleibt */
.hero__bilder::after {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
  content: "";
}

/* Die Spur ist so breit wie ein Bild; die übrigen Bilder liegen rechts daneben.
   script.js schiebt sie alle paar Sekunden um ein Bild weiter. Die Anzahl der Bilder
   ist dabei egal: einfach in index.php ein <img> ergänzen oder löschen. */
.hero__spur {
  display: flex;
  height: 100%;
  transition: transform 1s ease-in-out;
}

/* Beim Sprung vom angehängten Kopie-Bild zurück zum ersten Bild (siehe script.js) */
.hero__spur--ohne-uebergang {
  transition: none;
}

.hero__spur img {
  display: block;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Für Bilder, bei denen oben nichts abgeschnitten werden soll (z. B. ein Kopf) */
.hero__spur .hero__bild--oben {
  object-position: center top;
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  width: min(100%, var(--page-width));
  margin-inline: auto;
}

/* Leichter Schatten hinter der Schrift, falls ein Bild an der Stelle hell ist */
.hero__kicker,
.hero #hero-title,
.hero__intro {
  margin: 0;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}

.hero__kicker {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hero #hero-title {
  max-width: 15ch;
  font-size: clamp(2.6rem, 6.4vw, 5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.02;
}

.hero__intro {
  max-width: 38rem;
  color: var(--white);
  font-size: clamp(1.1rem, 2.4vw, 1.35rem);
  line-height: 1.5;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 0.75rem;
}

.hero__actions .button {
  min-height: 3.5rem;
  padding-inline: 1.6rem;
}

/* Knopf zum Anhalten (unten rechts) */
.hero__pause {
  position: absolute;
  right: var(--side-gap);
  bottom: 1.25rem;
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  color: var(--white);
  background: rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: background-color 160ms ease;
}

.hero__pause:hover {
  background: rgba(0, 0, 0, 0.65);
}

.hero__pause[hidden] {
  display: none;
}

.hero__pause-icon {
  width: 1.1rem;
  height: 1.1rem;
  fill: currentColor;
}

.hero__pause-icon--play,
.hero--pausiert .hero__pause-icon--pause {
  display: none;
}

.hero--pausiert .hero__pause-icon--play {
  display: block;
}

@media (min-width: 58rem) {
  .hero {
    min-height: 40rem;
    padding-block: 5rem 4.5rem;
  }
}

/* --- 6.2 Wirkungszahlen (zählen hoch, siehe script.js) ----------------------- */

/* Weiße Leiste mit pinker Linie oben, direkt unter dem Hero */
.impact {
  padding: 2rem var(--side-gap) 3rem;
  border-top: 6px solid var(--pink);
  background: var(--white);
}

.impact__grid {
  display: grid;
  width: min(100%, var(--page-width));
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  margin-inline: auto;
  text-align: center;
}

.impact__item {
  min-width: 0;
}

.impact__number {
  min-height: 1.25em;
  margin-bottom: 0.15rem;
  color: var(--pink);
  font-size: clamp(2.25rem, 7vw, 3rem);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.2;
}

.counter {
  display: inline-block;
  min-width: 7ch;
}

.impact__item h2 {
  margin: 0;
  font-family: var(--font-text);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.3;
}

@media (min-width: 58rem) {
  .impact {
    padding-top: 2.1rem;
    padding-bottom: 3.25rem;
  }

  .impact__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

/* --- 6.3 Abschnitte der Startseite ------------------------------------------- */

/* Grundgerüst */
.home-section {
  padding: 4rem var(--side-gap);
}

.home-section--tight {
  padding-top: 0;
}

.home-section--white {
  background: var(--white);
}

.home-section__inner {
  width: min(100%, var(--page-width));
  margin-inline: auto;
}

.home-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-bottom: 2rem;
}

.home-section__head a,
.home-more a {
  font-weight: 700;
}

.home-heading {
  margin-bottom: 0.75rem;
  font-size: clamp(1.9rem, 5vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.home-section__head .home-heading {
  margin-bottom: 0;
}

.home-lead {
  max-width: 42rem;
  margin-bottom: 2.5rem;
  font-size: clamp(1.1rem, 2.5vw, 1.25rem);
}

.home-kicker {
  margin-bottom: 0.6rem;
  color: var(--a-hover-color);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-more {
  margin: 2rem 0 0;
}

.home-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Was wir tun: drei Säulen */
.home-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1.5rem;
}

.home-pillar {
  padding: 2rem;
  border-radius: 6px;
  background: var(--white);
}

.home-pillar svg {
  display: block;      
  margin-inline: auto; 
  margin-bottom: 0.75rem;
  width: 2.75rem;
  height: 2.75rem;
  fill: none;
  stroke: var(--pink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-pillar h3 {
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
}

.home-pillar p {
  margin: 0;
}

/* Hervorgehobene Aussage nach „Was wir tun“ */
.home-statement {
  padding: 0 var(--side-gap) 4rem;
}

.home-statement__text {
  width: min(100%, 52rem);
  margin: 0 auto;
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3.6vw, 2.6rem);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
}

.home-statement__text mark {
  padding: 0 0.15em;
  color: inherit;
  background: linear-gradient(transparent 58%, rgba(229, 26, 130, 0.45) 58%);
}

@media (min-width: 58rem) {
  .home-statement {
    padding-bottom: 6rem;
  }
}

/* Drei Wege, uns zu unterstützen */
.home-ways {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1.5rem;
}

.home-way {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  border-radius: 6px;
  color: var(--black);
  background: var(--white);
  transition: box-shadow 160ms ease;
}

.home-way:hover {
  color: var(--black);
  box-shadow: 0 0 0 3px var(--pink);
}

.home-way img {
  display: block;
  width: 100%;
  height: 13.5rem;
  object-fit: cover;
}

/* Die Thetis II erscheint weiter unten noch einmal ganz; hier nur der rote Rumpf */
.home-way__img--rumpf {
  object-position: 50% 82%;
}

.home-way__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem;
}

.home-way__title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}

.home-way__cta {
  margin-top: auto;
  color: var(--a-hover-color);
  font-weight: 700;
}

/* Einblenden beim Scrollen (Startseite und Inhaltsseiten): script.js setzt .reveal an
   Elementen mit data-reveal und .is-revealed, sobald sie ins Bild kommen.
   Ohne JavaScript bleibt alles sichtbar. */
.reveal {
  opacity: 0;
  transform: translateY(2.5rem);
  transition: opacity 700ms ease-out, transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.reveal.is-revealed {
  opacity: 1;
  transform: none;
}

@media print {
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* Bildband mit Zitat (nutzt .fixed-frame aus Abschnitt 11) */
.home-quote {
  display: flex;
  align-items: center;
  background: var(--black);
}

.home-quote img {
  opacity: 0.7;
}

.home-quote__text {
  position: relative;
  width: min(100%, var(--page-width));
  margin: 0 auto;
  padding: 0 var(--side-gap);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.12;
}

/* Pinker Kasten um das Zitat (weiße Schrift: bei dieser Größe genug Kontrast) */
.home-quote__text span {
  display: inline-block;
  padding: 0.45em 0.7em 0.5em;
  background: rgba(229, 26, 130, 0.85);
  font-family: inherit;
}

/* Unser neues Schiff */
.home-ship {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2.5rem 3.5rem;
}

.home-ship__img {
  flex: 1 1 18rem;
  min-width: 0;
  max-width: 26rem;
  height: clamp(22rem, 45vw, 35rem);
  border-radius: 6px;
  object-fit: cover;
}

.home-ship__text {
  flex: 999 1 24rem;
  min-width: 0;
}

.home-timeline {
  padding: 0;
  margin: 1.75rem 0;
  border-left: 3px solid var(--pink);
  list-style: none;
}

.home-timeline li {
  padding: 0 0 1.1rem 1.4rem;
}

.home-timeline li:last-child {
  padding-bottom: 0;
}

.home-timeline strong {
  display: block;
}

/* Aktuelles auf der Startseite */
.home-news {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 2rem 1.5rem;
}

.home-news__item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: var(--black);
}

.home-news__item:hover {
  color: var(--black);
}

.home-news__item:hover .home-news__title {
  text-decoration: underline;
  text-decoration-color: var(--pink);
  text-decoration-thickness: 2px;
}

.home-news__item img {
  width: 100%;
  height: 12.5rem;
  border-radius: 6px;
  object-fit: cover;
}

.home-news__date {
  color: rgba(0, 0, 0, 0.7);
  font-size: 0.95rem;
}

.home-news__title {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
}

/* Kacheln Spenden / Mitmachen */
.home-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: 1.5rem;
}

.home-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border-radius: 6px;
}

.home-tile h2 {
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 2.25rem);
}

.home-tile p {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
}

.home-tile--pink {
  color: var(--white);
  background: var(--pink);
}

/* Auf Pink immer weiße Schrift: Sie ist dort deutlich besser lesbar als Schwarz
   (APCA Lc 74 statt 36), siehe Hinweis bei .button--primary. */

/* Buttons auf pinken Flächen: Der pinke Hover-Zustand wäre hier unsichtbar,
   und die schwarze Kontur wird weiß. */
.home-tile--pink .button--dark:hover,
.spenden-aufruf .button--dark:hover,
.wtw-aufruf .button--dark:hover {
  color: var(--black);
  background: var(--white);
}

.wtw-aufruf .button--outline-dark {
  border-color: var(--white);
  color: var(--white);
}

.wtw-aufruf .button--outline-dark:hover {
  border-color: var(--white);
  color: var(--black);
  background: var(--white);
}

.home-tile--black {
  color: var(--white);
  background: var(--black);
}

/* Netzwerk */
.home-network {
  padding: 2.5rem var(--side-gap);
  border-top: 1px solid rgba(0, 0, 0, 0.16);
}

.home-network__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 3rem;
}

.home-network__inner p {
  flex: 1 1 22rem;
  margin: 0;
}

.home-network__inner img {
  width: auto;
  height: 4.5rem;
}


/* ==========================================================================
   7. Inhaltsseiten
   ========================================================================== */

/* --- Grundgerüst ---------------------------------------------------------- */

.page-content {
  width: min(100%, var(--page-width));
  margin-inline: auto;
  padding: 3rem var(--side-gap) 4rem;
}

.page-content > h1,
.page-content > h2,
.page-content > h3,
.page-content > h4,
.page-content > h5,
.page-content > h6 {
  margin-bottom: 0.4rem;
}

.page-content > :not(h1, h2, h3, h4, h5, h6) + :not(ul, ol) {
  margin-top: 1.5rem;
}

.page-content p:first-of-type,
.page-content .page-content__media {
  margin-top: 0;
}

.page-content h2 {
  margin-bottom: 0.6rem;
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* Zwischenüberschrift: in der Gliederung eine h2 (direkt unter der h1), sieht aber
   aus wie eine kleine h3. Für Seiten ohne eigene Abschnitte, z. B. Impressum,
   Datenschutz, Newsletter: <h2 class="zwischen">…</h2>
   Faustregel: Die Ebene (h2/h3) richtet sich nach der Gliederung, das Aussehen nach der Klasse. */
.page-content h2.zwischen {
  margin-bottom: 0.4rem;
  font-size: 1.17em;
  font-weight: 700;
  letter-spacing: normal;
}

.page-content b {
  font-weight: 700;
}

.page-content ul {
  padding-left: 1.2rem;
  color: rgba(0, 0, 0, 0.8);
}

.page-content li + li {
  margin-top: 0.4rem;
}

/* --- Seitentitel mit Kritzel darunter ----------------------------------------- */

#page-titel {
  margin-bottom: 0;
  text-transform: uppercase;
}

.page-titel__scribble {
  display: block;
  width: 300px;
  height: auto;
  margin-top: 0 !important;
  margin-bottom: 1.5rem;
  margin-left: -30px;
}

/* --- Bild im Seiteninhalt (Text fließt links daran vorbei) -------------------- */

.page-content__media {
  overflow: hidden;
  width: min(45%, 30rem);
}

.page-content__media_right {
  float: right;
  margin: 0.3rem 0 1.5rem 2rem;
}

.media__ratio_resize {
  aspect-ratio: 4 / 3;
}

.page-content__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 640px) {
  .page-content__media {
    float: none;
    width: 100%;
    margin: 0 0 1.5rem;
  }

  .media__ratio_resize {
    aspect-ratio: 16 / 9;
  }
}

/* --- FAQ-Akkordeon (<details>/<summary>) -------------------------------------- */

.faq-header {
  margin-top: 2.6rem;
  color: var(--pink-text);
}

.faq-list {
  border-top: 1px solid rgba(0, 0, 0, 0.16);
}

.page-content > .faq-list + h2 {
  margin-top: 2.5rem;
}

.faq-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.16);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  font-size: 1.2rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  flex-shrink: 0;
  color: var(--pink);
  font-size: 1.4rem;
  line-height: 1;
  content: "+";
}

.faq-item[open] summary::after {
  content: "–";
}

.faq-item p {
  margin: 0 0 1.1rem;
  color: rgba(0, 0, 0, 0.78);
}

/* --- Tabs (z. B. Schiffe auf „Unser Schiff“) ---------------------------------- */

.tabs__list {
  display: flex;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
  border-bottom: 2px solid var(--black);
  /* Bei mehr Schiffen: overflow-x: auto; */
}

.tabs__tab {
  flex: none;
  padding: 0.75rem 1.25rem;
  border: 0;
  color: rgba(0, 0, 0, 0.55);
  background: none;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

.tabs__tab:hover {
  color: var(--black);
}

.tabs__tab[aria-selected="true"] {
  position: relative;
  color: var(--black);
}

.tabs__tab[aria-selected="true"]::after {
  position: absolute;
  right: 0;
  bottom: -2px;
  left: 0;
  height: 2px;
  background: var(--pink);
  content: "";
}

.tabs__panel .tabs__untertitel {
  margin: 2rem 0 1rem;
  font-size: 1.2rem;
  font-weight: 500;
}

/* --- Schiffsprofil (Foto + Steckbrief) ---------------------------------------- */

.ship-profile {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  margin-bottom: 1.8rem;
}

.ship-profile__media {
  overflow: hidden;
  aspect-ratio: 2 / 3;
  border-radius: 8px;
  background: var(--black);
}

.ship-profile__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ship-profile__status {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  margin: 0 0 0.6rem;
  border-radius: 999px;
  color: var(--a-hover-color); /* auf der pink getönten Fläche reicht --pink-text nicht ganz */
  background: rgba(229, 26, 130, 0.12);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.ship-profile--former .ship-profile__status {
  color: rgba(0, 0, 0, 0.6);
  background: rgba(0, 0, 0, 0.08);
}

.ship-profile h2 {
  margin: 0 0 0.6rem;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: normal;
}

.ship-profile__specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 1.5rem;
  padding: 1rem 0 0;
  margin: 1rem 0 0;
  border-top: 1px solid rgba(0, 0, 0, 0.16);
}

.ship-profile__specs dt {
  margin: 0 0 0.15rem;
  color: rgba(0, 0, 0, 0.55);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.ship-profile__specs dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 40rem) {
  .ship-profile {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: start;
  }
}

/* --- Kontaktkarten ------------------------------------------------------------- */

.contact-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}

.contact-card {
  padding: 1.25rem;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 4px;
}

.contact-card h2 {
  margin: 0 0 0.4rem;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: normal;
}

.contact-card p {
  margin: 0;
  color: rgba(0, 0, 0, 0.78);
}

.contact-card a {
  color: var(--pink-text);
  text-decoration: underline;
}

@media (min-width: 40rem) {
  .contact-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- Zickzack-Tabelle (Bild und Text abwechselnd links/rechts) ------------------ */

.table_zigzag {
  width: 100%;
  color: var(--black);
}

.table_zigzag__media {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #ddd;
}

.table_zigzag__media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.table_zigzag__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.25rem, 4vw, 4rem);
}

.table_zigzag__content h2 {
  margin: 0;
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: normal;
}

/* Kurzer pinker Balken über der Überschrift */
.table_zigzag__content h2::before {
  display: block;
  width: 3rem;
  height: var(--tz-line-width);
  margin-bottom: 1rem;
  background: var(--pink);
  content: "";
}

.table_zigzag__content p {
  margin: 0.75rem 0 0;
}

/* Bis 640 px: eine Spalte, jede Zeile ist eine Karte */
@media (max-width: 640px) {
  .table_zigzag__row {
    overflow: hidden;
    margin: 0 0 2rem;
    border: var(--tz-line-width) solid var(--black);
  }

  .table_zigzag__row:last-child {
    margin-bottom: 0;
  }

  .table_zigzag__content {
    border-top: var(--tz-line-width) solid var(--black);
  }
}

/* Ab 641 px: zwei Spalten, Bild in jeder zweiten Zeile rechts */
@media (min-width: 641px) {
  .table_zigzag__row {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    column-gap: var(--tz-line-width);
    border-top: var(--tz-line-width) solid var(--black);
    border-right: var(--tz-line-width) solid var(--black);
    border-left: var(--tz-line-width) solid var(--black);
  }

  .table_zigzag__row:last-child {
    border-bottom: var(--tz-line-width) solid var(--black);
  }

  /* Senkrechte Linie zwischen den beiden Zellen */
  .table_zigzag__row::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - var(--tz-line-width) / 2);
    width: var(--tz-line-width);
    background: var(--black);
    content: "";
  }

  .table_zigzag__row:nth-of-type(even) .table_zigzag__media {
    order: 2;
  }
}


/* ==========================================================================
   8. Aktuelles
   ========================================================================== */

/* --- Übersicht: Meldungskarten ---------------------------------------------- */

.blog-grid {
  --gap: 1.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
}

.page-content .blog-grid + p {
  margin-top: 1.5rem;
}

.blog-card {
  position: relative;
}

/* Kurze Trennlinie zwischen zwei Karten */
.blog-card + .blog-card::before {
  position: absolute;
  top: calc(var(--gap) / -2);
  left: 25%;
  width: 50%;
  height: 1px;
  background: var(--black);
  content: "";
  transform: translateY(-50%);
}

.blog-card__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  color: inherit;
}

.blog-card__media {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--black);
}

.blog-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 250ms ease;
}

.blog-card:hover .blog-card__media img {
  transform: scale(1.04);
}

.blog-card__body {
  padding: 1.25rem;
}

.blog-card__meta {
  margin: 0 0 0.4rem;
  color: var(--pink-text);
  font-size: 0.85rem;
  font-weight: 600;
}

.blog-card__body h2 {
  margin: 0 0 0.5rem;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: normal;
}

.blog-card__body p {
  margin: 0;
  color: rgba(0, 0, 0, 0.78);
}

.blog-card__cta {
  display: inline-block;
  margin-top: 0.75rem;
  color: var(--pink-text);
  font-weight: 600;
}

@media (min-width: 40rem) {
  .blog-card__link {
    grid-template-columns: minmax(14rem, 0.4fr) minmax(0, 1fr);
    align-items: stretch;
  }
}

/* --- Detailansicht einer Meldung ---------------------------------------------- */

.blog-post__meta {
  clear: both;
  margin: 0 0 0.25rem;
  color: var(--pink-text);
  font-size: 0.9rem;
  font-weight: 600;
}

.blog-post__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}


/* ==========================================================================
   9. Spenden
   ========================================================================== */

/* --- Platzhalter für externe Inhalte, solange keine Einwilligung vorliegt ---- */

.embed-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2.5rem 1.75rem;
  border: 2px dashed rgba(229, 26, 130, 0.4);
  border-radius: 8px;
  background: var(--white);
  text-align: center;
}

.embed-placeholder__icon {
  display: grid;
  width: 3.25rem;
  height: 3.25rem;
  flex-shrink: 0;
  place-items: center;
  border-radius: 50%;
  color: var(--pink);
  background: var(--bg);
}

.embed-placeholder__icon svg {
  width: 1.6rem;
  height: 1.6rem;
}

.embed-placeholder__text {
  max-width: 34rem;
  margin: 0;
  color: rgba(0, 0, 0, 0.72);
  font-size: 0.95rem;
  line-height: 1.5;
}

.embed-placeholder__text strong {
  color: var(--black);
}

.embed-placeholder__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  margin-top: 0.25rem;
}

.embed-placeholder .button {
  min-width: 12rem;
}

.embed-placeholder__remember {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(0, 0, 0, 0.65);
  font-size: 0.9rem;
  cursor: pointer;
}

.embed-placeholder__remember input {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--pink);
  cursor: pointer;
}

@media (min-width: 30rem) {
  .embed-placeholder {
    padding: 3rem 2.5rem;
  }

  .embed-placeholder__actions {
    flex-direction: row;
    justify-content: center;
  }
}

/* --- betterplace-Spendenformular ----------------------------------------------- */

.betterplace-embed {
  width: 100%;
}

.betterplace-embed iframe {
  display: block;
  width: 100%;
  height: 1100px;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 4px;
}

/* --- Spenden-Seite (pages/spenden.php) ------------------------------------------
   Einstieg, Wofür-Kacheln, Vertrauenszeile, Spendenbox mit Reitern, Aufruf.
   Alles bleibt in der Breite von .page-content. */

.spenden {
  display: grid;
  gap: 3.5rem;
}

/* Abstände regelt hier das Raster (gap), nicht die Ränder der Elemente */
.spenden p,
.spenden h2,
.spenden h3 {
  margin: 0;
}

.spenden ul {
  margin: 0;
  padding: 0;
  color: inherit;
  list-style: none;
}

.spenden li + li {
  margin-top: 0;
}

/* Einstieg */
.spenden-einstieg {
  display: grid;
  gap: 1.75rem;
}

.spenden-einstieg p {
  max-width: 50rem;
}

.spenden-lead {
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  font-weight: 500;
  line-height: 1.35;
}

.spenden-bild {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center 40%;
}

/* Wofür */
.spenden-wofuer {
  display: grid;
  gap: 1rem;
}

.spenden-wofuer > p {
  max-width: 50rem;
}

.spenden-zwecke {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 0.75rem;
}

.spenden-zwecke li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1.1rem;
  border-radius: 6px;
  background: var(--white);
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.3;
}

.spenden-zwecke li::before {
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--pink);
  content: "";
}

/* Vertrauenszeile (doppelte Klasse, damit „.spenden ul“ den Innenabstand nicht überschreibt) */
.spenden .spenden-vertrauen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1.5rem 2.5rem;
  padding: 2rem 0;
  border-top: 2px solid var(--black);
  border-bottom: 2px solid var(--black);
}

.spenden-vertrauen li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.spenden-vertrauen h3 {
  margin-bottom: 0.2rem;
  font-size: 1.2rem;
  font-weight: 600;
}

.spenden-vertrauen p {
  font-size: 1rem;
}

.spenden-icon {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  fill: none;
  stroke: var(--pink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Spendenbox mit Reitern (Logik: [data-tabs] in script.js) */
.spenden-box {
  overflow: hidden;
  border: 2px solid var(--black);
  border-radius: 8px;
  background: var(--white);
}

.spenden-box__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding: 1.5rem 1.25rem 1.25rem;
}

.spenden-box__kopf h2 {
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  font-weight: 600;
}

.spenden-box__kopf p {
  color: rgba(0, 0, 0, 0.72);
  font-size: 1rem;
}

.spenden-box__reiter {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 2px solid var(--black);
}

/* display: grid würde das hidden-Attribut sonst überstimmen */
.spenden-box__reiter[hidden],
.spenden-box__panel[hidden] {
  display: none;
}

.spenden-box__reiter button {
  min-height: 3.5rem;
  padding: 0.5rem;
  border: 0;
  border-right: 2px solid var(--black);
  color: var(--black);
  background: var(--white);
  font-family: var(--font-heading);
  font-size: clamp(0.95rem, 2.5vw, 1.1rem);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease;
}

.spenden-box__reiter button:last-child {
  border-right: 0;
}

.spenden-box__reiter button:hover {
  background: var(--bg);
}

.spenden-box__reiter button[aria-selected="true"] {
  color: var(--white);
  background: var(--black);
}

.spenden-box__panel {
  display: grid;
  gap: 1.25rem;
  padding: 1.5rem 1.25rem;
  border-top: 2px solid var(--black);
}

.spenden-box__panel-titel {
  font-size: 1.3rem;
  font-weight: 600;
}

/* Mit Reitern ersetzt der Reiter die Zwischenüberschrift (für Screenreader bleibt sie) */
.tabs--aktiv .spenden-box__panel-titel {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Überweisung */
.spenden-konto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem 3rem;
}

.spenden-konto__daten {
  display: grid;
  flex: 1 1 26rem;
  gap: 1.25rem;
  min-width: 0;
}

.spenden-iban {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}

.spenden-iban__nummer {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 4.6vw, 1.9rem);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.spenden-kopieren {
  min-height: 2.75rem;
  padding: 0.3rem 1rem;
  border: 2px solid var(--black);
  border-radius: 4px;
  color: var(--black);
  background: transparent;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease;
}

.spenden-kopieren:hover {
  color: var(--white);
  background: var(--black);
}

.spenden-konto__details {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2.5rem;
  margin: 0;
}

.spenden-konto__details dt {
  margin: 0 0 0.15rem;
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.spenden-konto__details dd {
  margin: 0;
  font-family: var(--font-text);
  font-size: 1.05rem;
}

.spenden-konto__hinweis {
  font-size: 1rem;
}

.spenden-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
}

.spenden-qr img {
  display: block;
  width: 170px;
  height: 170px;
  border-radius: 4px;
}

.spenden-qr figcaption {
  color: rgba(0, 0, 0, 0.65);
  font-family: var(--font-text);
  font-size: 0.85rem;
}

/* Aufruf „Regelmäßig helfen“ */
.spenden-aufruf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 2rem;
  padding: 2rem 1.5rem;
  border-radius: 6px;
  color: var(--white);
  background: var(--pink);
}

.spenden-aufruf__text {
  display: grid;
  flex: 1 1 26rem;
  gap: 0.5rem;
  min-width: 0;
}

.spenden-aufruf h2 {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.1;
}

/* Weitere Möglichkeiten */
.spenden-weiteres {
  display: grid;
  gap: 0.4rem;
}

/* IBAN in einer Zeile halten, solange sie auf den Bildschirm passt (ab ca. 360 px) */
@media (min-width: 22.5rem) {
  .spenden-iban__nummer {
    white-space: nowrap;
  }
}

@media (min-width: 40rem) {
  .spenden-box__kopf {
    padding: 1.75rem 2rem 1.25rem;
  }

  .spenden-box__panel {
    padding: 2rem;
  }

  .spenden-aufruf {
    padding: 2.25rem 2.5rem;
  }
}

@media (min-width: 58rem) {
  .spenden-bild {
    aspect-ratio: 5 / 2;
  }
}

/* ==========================================================================
   9b. Feuerwerk nach einer Spende
   Erzeugt und gesteuert von assets/js/feuerwerk.js (nur auf der Spenden-Seite).
   Ablauf: .feuerwerk wird eingefügt → .is-dunkel (Nachthimmel blendet ein)
   → .feuerwerk__danke.is-sichtbar → .is-weg (alles blendet aus) → wird entfernt.
   ========================================================================== */

.feuerwerk {
  position: fixed;
  inset: 0;
  z-index: 1000; /* über Kopfzeile und Breaking-News-Balken, unter dem Cookie-Banner */
  display: grid;
  place-items: center;
  padding: 0 var(--side-gap);
  background: rgba(0, 0, 0, 0);
  cursor: pointer; /* Klick irgendwo beendet das Feuerwerk */
  transition: background-color 0.6s ease, opacity 0.6s ease;
}

.feuerwerk.is-dunkel {
  background: rgba(0, 0, 0, 0.8);
}

.feuerwerk.is-weg {
  opacity: 0;
}

.feuerwerk__himmel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.feuerwerk__danke {
  position: relative; /* liegt über dem Canvas */
  margin: 0;
  color: var(--white);
  text-align: center;
  opacity: 0;
  transform: translateY(1rem) scale(0.96);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.feuerwerk__danke.is-sichtbar {
  opacity: 1;
  transform: none;
}

.feuerwerk__gross {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(3.5rem, 14vw, 6.5rem);
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 0 1.5rem rgba(229, 26, 130, 0.85);
}

.feuerwerk__klein {
  display: block;
  margin-top: 0.75rem;
  font-family: var(--font-text);
  font-size: clamp(1.15rem, 3.2vw, 1.5rem);
  font-weight: 600;
}


/* ==========================================================================
   10. Newsletter
   ========================================================================== */

.newsletter-form {
  display: grid;
  max-width: 34rem;
  gap: 1.1rem;
}

.newsletter-form__field {
  display: grid;
  gap: 0.35rem;
}

.newsletter-form label {
  font-weight: 700;
}

.newsletter-form input[type="text"],
.newsletter-form input[type="email"] {
  width: 100%;
  padding: 0.7rem 0.8rem;
  border: 2px solid var(--black);
  border-radius: 4px;
  color: var(--black);
  background: var(--white);
  font: inherit;
}

.newsletter-form input:focus-visible {
  outline: 3px solid var(--pink);
  outline-offset: 2px;
}

.newsletter-form__consent {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}

.newsletter-form__consent input {
  flex: 0 0 auto;
  width: 1.2rem;
  height: 1.2rem;
  margin-top: 0.2rem;
}

.newsletter-form__consent label {
  font-weight: 400;
}

.newsletter-form .button {
  justify-self: start;
}

/* Honeypot-Feld gegen Bots, für Menschen unsichtbar */
.newsletter-form__trap {
  position: absolute;
  left: -9999px;
}

.newsletter-message {
  max-width: 34rem;
  padding: 0.8rem 1rem;
  border-left: 4px solid;
  border-radius: 4px;
}

.newsletter-message--success {
  border-color: #1d7a3a;
  background: #e6f4ea;
}

.newsletter-message--error {
  border-color: #b3261e;
  background: #fce8e6;
}


/* ==========================================================================
   11. Bildband (Bild steht still, die Seite scrollt darüber)
   ========================================================================== */

.fixed-frame {
  position: relative;
  height: clamp(40vh, 40vw, 70vh);
  clip-path: inset(0); /* schneidet das feststehende Bild auf den Rahmen zu */
}

.fixed-frame img {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}


/* ==========================================================================
   12. Breaking News
   Erst Popup über der ganzen Seite (.is-modal), nach dem Wegklicken
   schmaler Balken am unteren Rand (.is-bar). Klassen setzt breaking-news.js.
   ========================================================================== */

.bn {
  position: fixed;
  z-index: 900;
}

.bn__box {
  position: relative;
  color: var(--black);
  background: var(--white);
}

.bn__label {
  margin: 0 0 0.5rem;
  color: var(--pink-text);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bn__title {
  margin: 0;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  line-height: 1.15;
}

.bn__text {
  margin: 1rem 0 0;
}

body.bn-open {
  overflow: hidden;
}

/* --- Popup ------------------------------------------------------------------ */

.bn.is-modal {
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.bn.is-modal .bn__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
}

.bn.is-modal .bn__box {
  width: min(100%, 36rem);
  max-height: 100%;
  overflow-y: auto;
  padding: 2rem 1.5rem 1.75rem;
  border-top: 0.5rem solid var(--pink);
  border-radius: 4px;
}

.bn.is-modal .bn__close {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  border: 0;
  color: inherit;
  background: none;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

.bn.is-modal .bn__actions {
  display: flex;
  width: 100%;
  justify-content: flex-end;
  margin-top: 1.25rem;
}

/* --- Balken ------------------------------------------------------------------ */

.bn.is-bar {
  right: 0;
  bottom: 0;
  left: 0;
  transition: transform 180ms ease;
}

.bn.is-bar.is-hidden {
  visibility: hidden;
  transform: translateY(100%);
  transition: transform 180ms ease, visibility 0s 180ms;
}

.bn.is-bar .bn__backdrop,
.bn.is-bar .bn__close,
.bn.is-bar .bn__text {
  display: none;
}

.bn.is-bar .bn__box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1rem;
  padding: 0.6rem var(--side-gap) calc(0.6rem + env(safe-area-inset-bottom));
  border-top: 3px solid var(--pink);
}

.bn.is-bar .bn__label {
  margin: 0;
  font-size: 0.75rem;
}

.bn.is-bar .bn__title {
  margin: 0;
  font-size: 1rem;
}

.bn.is-bar .bn__actions {
  padding-block: 0.25rem;
  margin: 0 0 0 auto;
}

.bn.is-bar .bn__link {
  min-height: 2.25rem;
}


/* ==========================================================================
   13. Was tun wir? (pages/was-tun-wir.php)
   Unter Titel und Kritzel: Einstieg, vier Aufgaben, Aussage, Bild und Text
   im Wechsel, Gründe fürs Segeln, Aufruf zur Schiffspatenschaft.
   Alles bleibt in der Breite von .page-content.
   ========================================================================== */

.wtw {
  display: grid;
  gap: 3.5rem;
}

/* Abstände regelt hier das Raster (gap), nicht die Ränder der Elemente */
.wtw p,
.wtw h2,
.wtw h3 {
  margin: 0;
}

.wtw ul,
.wtw ol {
  margin: 0;
  padding: 0;
  color: inherit;
  list-style: none;
}

.wtw li + li {
  margin-top: 0;
}

.wtw-bild {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.wtw-caption {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.wtw-kicker {
  color: var(--a-hover-color);
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wtw-titel {
  display: grid;
  gap: 0.25rem;
}

/* --- Einstieg ---------------------------------------------------------------- */

.wtw-einstieg {
  display: grid;
  gap: 1.75rem;
}

.wtw-lead {
  max-width: 50rem;
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  font-weight: 500;
  line-height: 1.35;
}

.wtw-bild--breit {
  aspect-ratio: 3 / 2;
  object-position: center 35%;
}
.wtw-bild--wersindwir {
  object-position: center 22%;
}
.wtw-bild--zielevision {
  object-position: center 60%;
}

@media (min-width: 58rem) {
  .wtw-bild--breit {
    aspect-ratio: 5 / 2;
  }
}

/* --- Vier Aufgaben ----------------------------------------------------------- */

.wtw-block {
  display: grid;
  gap: 1.5rem;
}

.wtw-aufgaben {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1.5rem;
}

.wtw-karte {
  padding: 2rem;
  border-radius: 6px;
  background: var(--white);
}

.wtw-karte h3 {
  margin: 0.75rem 0 0.4rem;
  font-size: 1.45rem;
  font-weight: 600;
}

.wtw-icon {
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  fill: none;
  stroke: var(--pink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin: auto;
}

/* --- Aussage ----------------------------------------------------------------- */

.wtw-statement {
  max-width: 52rem;
  justify-self: center;
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
}

/* Gleiche Markierung wie .home-statement__text auf der Startseite */
.wtw-statement mark {
  padding: 0 0.15em;
  color: inherit;
  background: linear-gradient(transparent 58%, rgba(229, 26, 130, 0.45) 58%);
}

/* --- Bild und Text im Wechsel -------------------------------------------------- */

.wtw-zickzack {
  display: grid;
  gap: 1.5rem 3rem;
  align-items: center;
}

.wtw-zickzack__text {
  display: grid;
  gap: 1rem;
}

@media (min-width: 58rem) {
  .wtw-zickzack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Bild rechts; auf dem Handy bleibt das Bild trotzdem oben */
  .wtw-zickzack--umgekehrt .wtw-bild {
    order: 2;
  }
}

.wtw-punkte {
  display: grid;
  gap: 0.75rem;
}

.wtw-punkte li {
  position: relative;
  padding-left: 1.5rem;
}

.wtw-punkte li::before {
  position: absolute;
  top: 0.6em;
  left: 0;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--pink);
  content: "";
}

.wtw-fazit {
  font-weight: 700;
}

.wtw-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.wtw-chips li {
  padding: 0.35rem 0.85rem;
  border: 2px solid var(--black);
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
}

/* --- Warum Segel ------------------------------------------------------------- */

.wtw-segel {
  display: grid;
  gap: 2rem;
  padding: 2rem 1.5rem;
  border-radius: 6px;
  background: var(--white);
}

.wtw-gruende {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 2rem;
  counter-reset: grund;
}

.wtw-gruende li {
  display: grid;
  align-content: start;
  gap: 0.3rem;
  counter-increment: grund;
}

/* Nummern 01–04 kommen aus dem CSS, die Liste bleibt eine echte <ol> */
.wtw-gruende li::before {
  color: var(--pink);
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
  content: counter(grund, decimal-leading-zero);
}

.wtw-gruende h3 {
  font-size: 1.25rem;
  font-weight: 600;
}

/* --- Aufruf ------------------------------------------------------------------ */

.wtw-aufruf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem 3rem;
  padding: 2.5rem 1.5rem;
  border-radius: 6px;
  color: var(--white);
  background: var(--pink);
}

.wtw-aufruf__text {
  display: grid;
  flex: 1 1 28rem;
  gap: 0.75rem;
  min-width: 0;
}

.wtw-aufruf h2 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 700;
  line-height: 1.1;
}

.wtw-aufruf__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

@media (min-width: 40rem) {
  .wtw-segel {
    padding: 2.5rem;
  }

  .wtw-aufruf {
    padding: 3rem 2.5rem;
  }
}


/* ==========================================================================
   13b. Wer sind wir? (pages/wer-sind-wir.php)
   Die Seite nutzt sonst die Klassen von „Was tun wir?“. Neu sind nur die
   Zeitleiste und die großen Zeichen r und 42 in den Kacheln.
   ========================================================================== */

/* Zeitleiste: jeder Schritt mit einer Linie darüber, kommende Schritte gestrichelt pink */
.wsw-zeitleiste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: 1.5rem 1.25rem;
}

.wsw-zeitleiste li {
  display: grid;
  align-content: start;
  gap: 0.35rem;
  padding-top: 1rem;
  border-top: 4px solid var(--black);
  font-size: 1rem;
  line-height: 1.45;
}

.wsw-zeitleiste li.wsw-zeitleiste__kommt {
  border-top-color: var(--pink);
  border-top-style: dashed;
}

.wsw-zeitleiste__wann {
  color: var(--a-hover-color);
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
}

/* Vier Grundsätze passen auf dem Desktop in eine Zeile (doppelte Klasse wie bei .spenden .spenden-vertrauen) */
.wsw-organisation .spenden-vertrauen {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

/* Kacheln „Warum r42?“ */
.wsw-name h3 {
  font-size: 1.6rem;
  font-weight: 600;
}

.wtw p.wsw-zeichen {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(4.5rem, 12vw, 6rem);
  font-weight: 700;
  line-height: 0.9;
}

.home-tile--black .wsw-zeichen {
  color: var(--pink);
}


/* ==========================================================================
   14. Reduzierte Bewegung
   Für alle, die in ihrem System „Bewegung reduzieren“ eingestellt haben.
   Muss am Ende stehen, damit es alle Animationen oben überschreibt.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  /* Bilderschau: script.js startet sie gar nicht erst, es bleibt das erste Bild */
  .hero__spur {
    transition: none !important;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}