/* ============================================================
   Ozeankind Relaunch — Zentrale Custom-CSS (Child-Theme)
   ------------------------------------------------------------
   ZWECK: Enthaelt AUSSCHLIESSLICH das, was Elementor nicht nativ
   bzw. nicht zentral leisten kann. Farben, Fonts und Abstaende
   gehoeren in Elementor Global Colors/Fonts und die Site-Settings
   — NICHT hierher (siehe CLAUDE.md, Abschnitt 1, 3 und 7).

   TOKEN-QUELLE: design-system/tokens.css (Primaerquelle).
   Namen und Werte sind 1:1 uebernommen — nichts erfunden.
   Die tokens.css selbst wird auf der Live-Seite nicht geladen,
   deshalb werden die beiden hier benoetigten Tokens unten lokal
   mit ihren Originalwerten definiert.

   NICHT BERUEHREN: Spendenshop & FundraisingBox (Abschnitt 7).
   ============================================================ */

:root {
  /* Aus design-system/tokens.css uebernommen (exakte Namen + Werte): */
  --sea-400: #66a3d3;    /* Fokusring (in tokens.css auch: --focus-ring) */
  --sea-600: #2f72a8;    /* Text-Link / sekundaere Aktion                */
  --sea-700: #285f8f;    /* Sekundaer-Button-Akzent (outline/ghost)      */
  --slate-500: #6b6a78;  /* gedaempfter Text                            */
  --slate-600: #575565;  /* Timeline-Punkte / Logo-Hai                   */
  --slate-700: #474856;  /* Primaer-Text                                 */
  --slate-900: #2c2d36;  /* Dunkel (Hover-Text Ghost-Button)             */
  --wave-300: #b0c5da;   /* Akzent Pull-Quote / Timeline / Verbinder     */
  --wave-50:  #f1f4f9;   /* subtiler Hintergrund                        */
  --foam:     #eef2f7;   /* weiche Flaeche                              */
  --sand:     #f5f1e8;   /* Sand-Sektionen                             */
  --green-500:#4ba585;   /* Erfolg / "gesammelt"                        */
  --ls-eyebrow: 0.16em;  /* Eyebrow-Letterspacing (Versal-Labels)        */

  /* --- Zentrale vertikale Spacing-Skala (Konsistenz-Durchgang 07/2026) ---
     Aus Messung ueber alle 14 Seiten abgeleitet. Ein Wert je Sache;
     jede Seite zieht dieselben Tokens. Heros bewusst abgesetzt. */
  --ok-section-y:        clamp(3rem, 7vw, 5rem);   /* ~80px Sektions-Padding oben+unten (Mehrheit) */
  --ok-hero-y:           clamp(4.5rem, 9vw, 7.5rem);/* ~115px Hero, abgesetzt & untereinander gleich */
  --ok-head-eyebrow-gap: 12px;                     /* Eyebrow -> H1 (Messung 8, bewusst luftiger) */
  --ok-head-intro-gap:   18px;                     /* H1 -> Intro   (Messung 13, bewusst luftiger) */
  --ok-head-mb:          2rem;                      /* Kopf-Block -> erster Inhalt (32px) */
  --ok-section-gap:      0px;                       /* zwischen Sektionen (Messung: schon 0) */
  --ok-faq-item-gap:     26px;                      /* zwischen Akkordeon-Items */
  --ok-faq-block-gap:    56px;                      /* ueber Themenblock-Ueberschrift (~2x Item-Gap) */
  /* --- Horizontale Skala (Konsistenz-Durchgang 07/2026) --- */
  --ok-wrap-max:      1200px;   /* Inhaltsbreite */
  --ok-read-max:      760px;    /* Lesespalte */
  --ok-wrap-pad-x:    24px;     /* seitliches Sektions-Padding */
  --ok-grid-gap:      1.5rem;   /* Standard-Grid-Gap (24px) */
  --ok-grid-gap-wide: 2.5rem;   /* Hero / Footer (bewusst weit) */
  --ok-card-pad:      1.5rem;   /* Standard-Karten-Padding */
  --ok-card-pad-sm:   1.2rem;   /* kompakte Karten */
}

/* ------------------------------------------------------------
   1) Sichtbarer Tastatur-Fokusring  (--sea-400)
   ------------------------------------------------------------
   Briefing Abschnitt 7: "sichtbarer Tastatur-Fokus (Custom CSS,
   --sea-400-Ring)". Elementor liefert ueber seine Widgets keinen
   konsistenten, barrierearmen Fokus-Stil — daher zentral hier.
   :focus-visible blendet den Ring nur bei Tastaturnavigation ein,
   nicht bei Maus- oder Touch-Klick.
   ------------------------------------------------------------ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.elementor-button:focus-visible {
  outline: 3px solid var(--sea-400);
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   2) Eyebrow-Letterspacing  (--ls-eyebrow)
   ------------------------------------------------------------
   Briefing Abschnitt 3: "Eyebrow-Labels in Versalien mit
   --ls-eyebrow 0.16em". Elementor kann letter-spacing pro Element
   setzen, aber nicht als zentrale, wiederverwendbare Eyebrow-Regel.
   Anwendung im Editor: Eyebrow-Texten die CSS-Klasse `ok-eyebrow`
   geben (Praefix `ok-` konsistent zum Design-System).
   ------------------------------------------------------------
   Seit 19.07.2026 traegt diese Basisregel auch Farbe, Groesse und
   Gewicht. Vorher standen die nur in `.ok-section-head .ok-eyebrow`.
   Auf den Projektseiten ist `ok-section-head` ein echtes div im
   Markup, dort griff das. Auf den frueh gebauten Seiten ist es eine
   Container-Klasse — und die rendert Elementor nicht. Deren Eyebrows
   liefen deshalb in slate-700 mit 19,2px und Gewicht 400 statt in
   sea-600 mit 12,8px und Gewicht 700. */
.ok-eyebrow {
  display: block;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  font-size: .8rem;
  font-weight: 700;
  color: var(--sea-600);
}

/* ------------------------------------------------------------
   3) Sekundaere Buttons (outline / ghost)
   ------------------------------------------------------------
   Markenregel (Marina, 06/2026): Coral (--action-primary) ist
   AUSSCHLIESSLICH Spenden-/Patenschaften-CTAs vorbehalten. Alle
   anderen Buttons sind sekundaer. Elementors globaler Button-Stil
   (coral) ueberschreibt Einzel-Einstellungen am Widget — daher
   zentrale Klassen mit !important.
   Anwendung im Editor: dem Button-Widget die CSS-Klasse
   `ok-btn-outline` (Rahmen) bzw. `ok-btn-ghost` (nur Text) geben.
   ------------------------------------------------------------ */
.ok-btn-outline .elementor-button {
  background-color: transparent !important;
  color: var(--sea-700) !important;
  border: 2px solid var(--sea-700) !important;
}
.ok-btn-outline .elementor-button:hover,
.ok-btn-outline .elementor-button:focus {
  background-color: var(--sea-700) !important;
  color: #fff !important;
}

.ok-btn-ghost .elementor-button {
  background-color: transparent !important;
  color: var(--sea-700) !important;
  border: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.ok-btn-ghost .elementor-button:hover,
.ok-btn-ghost .elementor-button:focus {
  color: var(--slate-900) !important;
  text-decoration: underline !important;
}

/* ------------------------------------------------------------
   4) Pull-Quote (Geschichte-Seite)
   ------------------------------------------------------------
   Seiten-Prompt mission_geschichte: grosses Pull-Quote-Element
   (Quicksand, wave-300-Akzent) zwischen Kapitel 2 und 3.
   Anwendung im Editor: Ueberschrift-Widget (Tag div) die Klasse
   `ok-pullquote` geben. Elementor stylt das Heading sonst nicht
   als Zitat, daher zentral hier.
   ------------------------------------------------------------ */
.ok-pullquote {
  font-family: "Quicksand", sans-serif;
  font-size: clamp(1.4rem, 3vw, 1.875rem);
  line-height: 1.35;
  font-weight: 600;
  color: var(--slate-700);
  border-left: 4px solid var(--wave-300);
  padding-left: 1.5rem;
  margin: 2.5rem 0;
}

/* ------------------------------------------------------------
   5) Meilenstein-Timeline (Geschichte-Seite, Komponente)
   ------------------------------------------------------------
   Seiten-Prompt mission_geschichte: vertikale Timeline, Linie in
   wave-300, Punkte in slate-600, chronologisch alt -> neu. Mobile
   bleibt einspaltig mit Linie am linken Rand (gleiche Regel).
   Umsetzung: EIN Texteditor-Widget enthaelt die Eintraege als
   `<div class="ok-timeline-item">` (Linie = linker Rand, Punkt =
   ::before), darin `<strong class="ok-tl-year">` Jahr + Fließtext.
   Der letzte Eintrag (offenes Ende) traegt zusaetzlich `ok-tl-end`.
   ------------------------------------------------------------ */
.ok-timeline-item {
  position: relative;
  padding-left: 2rem;
  padding-bottom: 2.25rem;
  border-left: 2px solid var(--wave-300);
  line-height: 1.5;
}
.ok-timeline-item:last-child {
  padding-bottom: 0;
}
.ok-timeline-item::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--slate-600);
  border: 3px solid #fff;
}
.ok-tl-year {
  display: block;
  font-family: "Quicksand", sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--sea-700);
  margin-bottom: 0.1rem;
}
.ok-tl-end .ok-tl-year {
  color: var(--slate-600);
  font-style: italic;
}

/* ============================================================
   6) "Ozeankind vor Ort" (/vor-ort/) — Komponenten
   ------------------------------------------------------------
   Visuell komplexe Grids sind je EIN Texteditor-Widget mit HTML
   plus diesen Klassen (Lehre aus dem Timeline-Bau: keine
   verschachtelten Elementor-Container). Sektionskoepfe bleiben
   native Elementor-Widgets.
   ============================================================ */

/* --- HTML-Button-Links (CTAs innerhalb der HTML-Grids) ---
   .ok-btn-* (weiter oben) greifen nur auf Elementor-Buttons.
   Fuer <a>-Links in Texteditoren: .ok-btn. */
.ok-btn {
  display: inline-block;
  font-family: "Quicksand", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.ok-btn.is-outline {
  color: var(--sea-700);
  border: 2px solid var(--sea-700);
  background: transparent;
}
.ok-btn.is-outline:hover,
.ok-btn.is-outline:focus {
  background: var(--sea-700);
  color: #fff;
}
.ok-btn.is-ghost {
  color: var(--sea-700);
  padding-left: 0;
  padding-right: 0;
}
.ok-btn.is-ghost:hover,
.ok-btn.is-ghost:focus {
  color: var(--slate-900);
  text-decoration: underline;
}
.ok-textlink { color: var(--sea-600); font-weight: 700; text-decoration: none; }
.ok-textlink:hover { text-decoration: underline; }

/* --- Tags / Rollen-Labels (Pills) --- */
.ok-tag {
  display: inline-block;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em;
  padding: 0.25rem 0.7rem; border-radius: 999px;
  background: var(--wave-300); color: var(--slate-900);
}
.ok-tag--green { background: var(--green-500); color: #fff; }
.ok-tag--green::before {
  content: ""; display: inline-block;
  width: .5rem; height: .5rem; border-radius: 50%;
  background: #fff; margin-right: .4rem; vertical-align: middle;
}

/* --- Personen in den Standort-Karten (mit Ring, sobald Fotos da sind) ---
   Vorher war .ok-avatars eine Flex-REIHE. Dieselbe Komponente erzeugte
   dadurch drei verschiedene Formen: Berlin eine Zeile, Kiel drei Namen
   nebeneinander mit Luecken und ohne Rolle, Sansibar zwei Namen mit
   Umbruch (Blockhoehen gemessen 27 / 27 / 70px). Das war die Hauptquelle
   der Unruhe.
   Jetzt eine SPALTE: je Person eine Zeile mit Name und darunter der
   Rolle. Gleiche Form bei einer wie bei fuenf Personen.
   .ok-avatar bleibt eine Reihe, damit das Portraetfoto spaeter einfach
   links neben .ok-avatar-text tritt, ohne Markup-Aenderung. */
.ok-avatars { display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; }
.ok-avatar { display: flex; align-items: center; gap: .65rem; color: var(--slate-700); }
.ok-avatar-text { display: flex; flex-direction: column; }
.ok-avatar-name { font-size: .95rem; font-weight: 600; color: var(--slate-900); line-height: 1.3; }
.ok-avatar-role { font-size: .85rem; color: var(--slate-500); line-height: 1.35; }
/* Ergaenzender Hinweis (z. B. "und acht SwopShop-Mitarbeiterinnen").
   Stand vorher als normaler Absatz mit 19,2px unter Namen mit 15,2px und
   wog dadurch optisch schwerer als die Information, die er ergaenzt. */
.ok-avatar-more { font-size: .85rem; color: var(--slate-500); line-height: 1.35; }
.ok-avatar img,
.ok-avatar .ok-avatar-ph {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
  background: var(--wave-50);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wave-300);
  flex: 0 0 auto;
}

/* --- Standort-Grid (3 Karten) --- */
.ok-standort-grid { display: grid; gap: var(--ok-grid-gap); grid-template-columns: repeat(3, 1fr); }
.ok-standort-card {
  background: #fff; border-radius: 20px; overflow: hidden;
  box-shadow: 0 10px 30px -12px rgba(71,72,86,.18);
  display: flex; flex-direction: column;
}
.ok-standort-card .ok-card-media,
.ok-standort-card .ok-card-media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  background: var(--wave-50); display: block;
}
/* flex:1 ist noetig, damit das margin-top:auto an .ok-card-cta ueberhaupt
   Platz zum Schieben hat. Ohne das standen die Buttons trotz gleich hoher
   Karten auf verschiedenen Hoehen (gemessen 85px Versatz bei Sansibar). */
.ok-standort-card .ok-card-body { padding: var(--ok-card-pad); display: flex; flex-direction: column; gap: .8rem; flex: 1; }
.ok-standort-card h3 { margin: 0; font-family: "Quicksand", sans-serif; font-size: 1.5rem; color: var(--slate-900); text-transform: none; }
.ok-standort-card p { margin: 0; color: var(--slate-700); line-height: 1.55; }
.ok-standort-card .ok-card-cta { margin-top: auto; display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }

/* --- Augenhoehe: Zwei-Spalten-Gegenueberstellung --- */
.ok-augenhoehe-grid { display: grid; gap: var(--ok-grid-gap); grid-template-columns: 1fr auto 1fr; align-items: stretch; }
.ok-augenhoehe-card { background: #fff; border-radius: 20px; padding: var(--ok-card-pad); box-shadow: 0 10px 30px -12px rgba(71,72,86,.18); }
.ok-augenhoehe-card .ok-ah-label { font-size: .85rem; font-weight: 700; letter-spacing: .04em; color: var(--sea-700); margin-bottom: .8rem; display: block; }
.ok-augenhoehe-card ul { margin: 0; padding-left: 1.1rem; color: var(--slate-700); line-height: 1.6; }
.ok-augenhoehe-connector { align-self: center; width: 4px; min-height: 64px; background: var(--wave-300); border-radius: 999px; }
.ok-augenhoehe-partner { margin-top: 1.5rem; color: var(--slate-500); font-size: .95rem; }

/* --- Zielgruppen-Nav (4 interaktive Karten) --- */
.ok-zielgruppen-grid { display: grid; gap: var(--ok-grid-gap); grid-template-columns: repeat(4, 1fr); }
.ok-zg-card {
  display: block; text-decoration: none;
  background: #fff; border: 1px solid var(--foam); border-radius: 16px; padding: var(--ok-card-pad);
  color: var(--slate-900); transition: transform .18s ease, box-shadow .18s ease;
}
.ok-zg-card:hover, .ok-zg-card:focus { transform: translateY(-3px); box-shadow: 0 12px 28px -14px rgba(71,72,86,.28); }
.ok-zg-card strong { display: block; font-family: "Quicksand", sans-serif; font-size: 1.15rem; margin-bottom: .35rem; }
.ok-zg-card span { color: var(--slate-700); font-size: .95rem; line-height: 1.5; }

/* --- Wirkungsband (dunkel, 5 Stats) --- */
.ok-wirkung-grid { display: grid; gap: var(--ok-grid-gap); grid-template-columns: repeat(5, 1fr); }
.ok-wirkung-stat .ok-stat-value { font-family: "Quicksand", sans-serif; font-weight: 700; font-size: clamp(1.9rem, 4vw, 2.6rem); color: #fff; line-height: 1.1; }
.ok-wirkung-stat.is-green .ok-stat-value { color: var(--green-500); }
.ok-wirkung-stat .ok-stat-label { color: #cdd3e0; font-size: .95rem; line-height: 1.4; margin-top: .3rem; }

/* --- Responsive --- */
@media (max-width: 1024px) {
  .ok-zielgruppen-grid { grid-template-columns: repeat(2, 1fr); }
  .ok-wirkung-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .ok-standort-grid { grid-template-columns: 1fr; }
  .ok-augenhoehe-grid { grid-template-columns: 1fr; }
  .ok-augenhoehe-connector { width: 64px; min-height: 4px; justify-self: center; }
}
@media (max-width: 560px) {
  .ok-zielgruppen-grid { grid-template-columns: 1fr; }
  .ok-wirkung-grid { grid-template-columns: 1fr; }
}

/* --- Sektionskopf (Eyebrow / Titel / Intro) im HTML-Widget ---
   Ganze Sektionen werden als ein Texteditor-HTML gebaut; dieser
   Kopf ersetzt die native SectionHeading-Komponente. .ok-invert
   fuer die dunkle Wirkungs-Sektion. */
.ok-section-head { margin-bottom: var(--ok-head-mb); max-width: var(--ok-read-max); }
.ok-section-head .ok-eyebrow {
  display: block; color: var(--sea-600);
  font-size: .8rem; font-weight: 700; margin-bottom: var(--ok-head-eyebrow-gap);
}
.ok-section-head h1,
.ok-section-head h2 {
  font-family: "Quicksand", sans-serif; color: var(--slate-900);
  margin: 0 0 var(--ok-head-intro-gap); line-height: 1.15; text-transform: none;
}
.ok-section-head h1 { font-size: clamp(2rem, 5vw, 3rem); }
.ok-section-head h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); }
.ok-section-head p { margin: 0; color: var(--slate-700); font-size: 1.1rem; line-height: 1.6; }
.ok-invert .ok-section-head h1,
.ok-invert .ok-section-head h2,
.ok-invert .ok-section-head p { color: #fff; }
.ok-invert .ok-section-head .ok-eyebrow { color: var(--wave-300); }
.ok-invert .ok-wirkung-note { color: #cdd3e0; }

/* --- Sektions-Hintergruende & Inhaltsbreite (volle Breite im HTML) ---
   Container auf "Volle Breite" stellen; das HTML wickelt Inhalt in
   .ok-bg-* (randlos-farbig) + .ok-wrap (zentriert, max 1200). So
   braucht es weder Color-Picker noch Elementor-CSS-ID-Felder. */
.ok-bg-sand   { background: var(--sand); }
.ok-bg-subtle { background: var(--wave-50); }
.ok-bg-dark   { background: var(--slate-700); }
.ok-wrap { max-width: var(--ok-wrap-max); margin: 0 auto; padding: var(--ok-section-y) var(--ok-wrap-pad-x); }

/* ============================================================
   7) "Der Plastikrebell" (/plastikrebell/) — Komponenten
   ============================================================ */

/* Hero: Text + Bild */
.ok-hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--ok-grid-gap-wide); align-items: center; }
.ok-hero-grid h1 { text-transform: none; font-family: "Quicksand", sans-serif; color: var(--slate-900); line-height: 1.15; }
.ok-hero-media, .ok-hero-media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  background: var(--wave-50); border-radius: 20px; display: block;
}
.ok-hero-cta { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-top: 1.5rem; }

/* Helles Stat-Band (3 Stats) */
.ok-statband { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ok-grid-gap); }
.ok-statband .ok-stat-value { font-family: "Quicksand", sans-serif; font-weight: 700; font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--sea-700); line-height: 1.1; }
.ok-statband .ok-stat-label { color: var(--slate-700); font-size: .95rem; line-height: 1.4; margin-top: .3rem; }

/* Heft-Kapitel (5 Karten) */
.ok-heft-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--ok-grid-gap); }
.ok-heft-card { background: #fff; border: 1px solid var(--foam); border-radius: 16px; padding: var(--ok-card-pad); }
.ok-heft-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--wave-300); color: var(--slate-900);
  font-family: "Quicksand", sans-serif; font-weight: 700; margin-bottom: .7rem;
}
.ok-heft-card h3 { margin: 0 0 .4rem; font-family: "Quicksand", sans-serif; font-size: 1.1rem; color: var(--slate-900); text-transform: none; }
.ok-heft-card p { margin: 0; color: var(--slate-700); font-size: .92rem; line-height: 1.45; }

/* Bestell-Schritte (nummeriert) */
.ok-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ok-grid-gap); margin: 1.5rem 0; }
.ok-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--sea-700); color: #fff;
  font-family: "Quicksand", sans-serif; font-weight: 700; font-size: 1.15rem; margin-bottom: .7rem;
}
.ok-step h3 { margin: 0 0 .35rem; font-family: "Quicksand", sans-serif; font-size: 1.15rem; color: var(--slate-900); text-transform: none; }
.ok-step p { margin: 0; color: var(--slate-700); line-height: 1.5; }

/* Gut zu wissen */
.ok-gutzuwissen { background: #fff; border-radius: 16px; padding: var(--ok-card-pad); margin-top: 2rem; }
.ok-gutzuwissen strong { display: block; font-family: "Quicksand", sans-serif; margin-bottom: .6rem; color: var(--slate-900); }
.ok-gutzuwissen ul { margin: 0; padding-left: 1.1rem; color: var(--slate-700); line-height: 1.6; }

/* Galerie (Social Proof) */
.ok-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.ok-gallery-item, .ok-gallery-item img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  background: var(--wave-50); border-radius: 12px; display: block;
}

/* Platzhalter-Hinweis (z. B. ProjektUpdates, bis Beitrags-Tags stehen) */
.ok-placeholder-note {
  border: 1px dashed var(--wave-300); border-radius: 12px;
  padding: var(--ok-card-pad); color: var(--slate-500); background: var(--wave-50);
  margin: 1.5rem 0 0;
}
/* Gestapelte Hinweisboxen ruecken enger zusammen (statt inline margin-top). */
.ok-placeholder-note + .ok-placeholder-note { margin-top: 0.75rem; }

@media (max-width: 1024px) {
  .ok-heft-grid { grid-template-columns: repeat(2, 1fr); }
  .ok-gallery { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
  .ok-hero-grid { grid-template-columns: 1fr; }
  .ok-statband { grid-template-columns: 1fr; }
  .ok-steps { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ok-heft-grid { grid-template-columns: 1fr; }
  .ok-gallery { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Kooperationen-Seite (/kooperationen/)
   ============================================================ */

/* Sektion 3 — drei Kooperationsmodelle */
.ok-modell-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ok-grid-gap);
}
.ok-modell-card {
  background: #fff; border: 1px solid var(--wave-50);
  border-radius: 16px; padding: var(--ok-card-pad);
  box-shadow: 0 2px 12px rgba(71, 72, 86, .06);
  display: flex; flex-direction: column; gap: .75rem;
}
.ok-modell-card h3 {
  text-transform: none; font-family: Quicksand, sans-serif;
  color: var(--slate-900); margin: 0; font-size: 1.25rem;
}
.ok-modell-card p { margin: 0; color: var(--slate-700); }
.ok-modell-note {
  margin: 1.5rem 0 0; color: var(--slate-600);
}

/* Sektion 5 — Supporter-Leiste (typografisch, keine Logo-Dateien) */
.ok-supporter-leiste {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1.25rem 2.5rem; justify-content: center;
}
.ok-supporter-name {
  font-family: Quicksand, sans-serif; font-weight: 700;
  font-size: 1.35rem; letter-spacing: .01em; color: var(--slate-500);
  transition: color .2s ease;
}
.ok-supporter-name:hover { color: var(--slate-700); }

/* Sektion 6 — Spende vs Sponsoring */
.ok-sponsoring-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ok-grid-gap);
}

/* Sektion 7 — Kontaktformular auf dunklem Grund */
.ok-kontakt-form.elementor-widget-form {
  max-width: 760px !important; margin-left: auto !important; margin-right: auto !important;
}
.ok-kontakt-form .elementor-field-group label {
  color: var(--wave-50); font-weight: 600;
}
.ok-kontakt-form .elementor-field-textual {
  border-radius: 10px; border: 1px solid var(--wave-300);
  background: rgba(255, 255, 255, .06); color: #fff;
}
.ok-kontakt-form .elementor-field-textual::placeholder { color: var(--wave-300); }
/* Absende-Button als Outline/Sea statt Coral (Coral bleibt Spenden/Patenschaften vorbehalten) */
.ok-kontakt-form .elementor-button {
  background: transparent !important; border: 2px solid var(--sea-400) !important;
  color: #fff !important; border-radius: 999px !important;
  width: auto !important; padding: .7rem 1.6rem !important;
  transition: background .2s ease, border-color .2s ease;
}
.ok-kontakt-form .elementor-button:hover,
.ok-kontakt-form .elementor-button:focus {
  background: var(--sea-600) !important; border-color: var(--sea-600) !important; color: #fff !important;
}
.ok-kontakt-form .elementor-field-type-submit { justify-content: flex-start; }

/* Newsletter-Seite (/newsletter/) — helles Anmeldeformular (Mailchimp, Double-Opt-in).
   Eigene Klasse statt ok-kontakt-form, weil letztere fuer dunklen Grund gestylt ist. */
.ok-nl-benefits { max-width: 560px; margin: 0 auto; }
.ok-nl-benefits h2 { margin: 0 0 .75rem; }
.ok-nl-benefits ul { margin: 0; padding-left: 1.2rem; color: var(--slate-700); line-height: 1.7; }
.ok-nl-benefits li { margin-bottom: .35rem; }
.ok-nl-note { max-width: 560px; margin: 0 auto; font-size: .9rem; color: var(--slate-500); line-height: 1.6; }
.ok-newsletter-form.elementor-widget-form {
  max-width: 560px !important; margin-left: auto !important; margin-right: auto !important; margin-top: 1.5rem !important;
}
.ok-newsletter-form .elementor-field-group > label { color: var(--slate-700); font-weight: 700; }
.ok-newsletter-form .elementor-field-textual {
  border-radius: 10px; border: 1px solid var(--wave-300); background: #fff;
  color: var(--slate-900); padding: .7rem 1rem;
}
.ok-newsletter-form .elementor-field-textual::placeholder { color: var(--slate-500); }
.ok-newsletter-form .elementor-field-type-acceptance { font-size: .9rem; color: var(--slate-700); }
.ok-newsletter-form .elementor-field-type-acceptance a { color: var(--sea-600); text-decoration: underline; }
/* "Anmelden" als Sea-Button (kein Coral — Coral bleibt Spenden/Patenschaften vorbehalten) */
.ok-newsletter-form .elementor-button {
  background: var(--sea-600) !important; border: 2px solid var(--sea-600) !important;
  color: #fff !important; border-radius: 999px !important; font-weight: 700;
}
.ok-newsletter-form .elementor-button:hover, .ok-newsletter-form .elementor-button:focus {
  background: var(--sea-700) !important; border-color: var(--sea-700) !important;
}

/* Schlichte Lesespalte (Kindesschutz u. a. Textseiten) — 760px, gut lesbar, keine Deko */
.ok-prose { max-width: var(--ok-read-max); }
.ok-prose > p { color: var(--slate-700); line-height: 1.75; margin: 0 0 1.1rem; }
.ok-prose h2 {
  font-family: Quicksand, sans-serif; color: var(--slate-900); font-weight: 700;
  font-size: clamp(1.3rem, 2.4vw, 1.6rem); line-height: 1.25; margin: 2rem 0 .6rem;
}
.ok-prose .ok-kontaktblock { color: var(--slate-900); line-height: 1.6; }
.ok-prose .ok-kontaktblock a { color: var(--sea-600); font-weight: 700; }
.ok-prose .ok-btn { margin-top: .5rem; }

/* ============================================================
   THEMENSEITEN (/themen/) — aus Design-Handoff design_handoff_themenseiten
   3-Stufen-Dramaturgie: Verstehen -> Einordnen -> Handeln.
   Tokens 1:1 portiert (fehlende Stufen + semantische Aliase);
   Layout-Tokens (gutter, section-y, wrap/narrow) auf die Site-Werte
   gemappt fuer Konsistenz. Coral NUR im Handeln-CTA (.th-cta). Sonst Sea.
   ============================================================ */
:root {
  --slate-800:#383a46; --slate-400:#8e8f9c; --slate-300:#b6b7c1;
  --slate-200:#d8d9e0; --slate-100:#ecedf1; --slate-50:#f6f6f9;
  --wave-600:#7d92bb; --wave-500:#97a8cc; --wave-400:#aab9d6;
  --wave-200:#ccd6e6; --wave-100:#e3e9f2;
  --sea-500:#3e88c2; --sea-100:#dfecf7;
  --coral-700:#c75633; --coral-600:#e0673f; --coral-500:#f0825a; --coral-100:#fce8df;
  --green-100:#dcf0e8;
  --text-strong:var(--slate-900); --text-body:var(--slate-700);
  --text-muted:var(--slate-500); --text-subtle:var(--slate-400); --text-link:var(--sea-600);
  --surface-subtle:var(--wave-50); --surface-sand:var(--sand);
  --font-display:'Quicksand','Trebuchet MS',sans-serif;
  --font-body:'Nunito','Segoe UI',system-ui,sans-serif;
  --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-extra:800;
  --fs-h1:clamp(2.1rem,calc(1.4rem + 2.8vw),3.25rem);
  --fs-h2:clamp(1.7rem,calc(1.25rem + 1.8vw),2.5rem);
  --fs-h3:clamp(1.35rem,calc(1.1rem + 1vw),1.75rem);
  --fs-h4:1.25rem; --fs-lead:1.25rem; --fs-base:1.0625rem;
  --fs-sm:.9375rem; --fs-xs:.8125rem; --fs-eyebrow:.8125rem;
  --lh-tight:1.08; --lh-snug:1.2; --lh-normal:1.5; --lh-relaxed:1.65; --ls-tight:-0.02em;
  --radius-sm:10px; --radius-lg:24px; --radius-xl:32px; --radius-pill:999px;
  --shadow-card:0 10px 30px rgba(71,72,86,.10); --shadow-lg:0 18px 48px rgba(44,45,54,.14);
  --ease-out:cubic-bezier(0.22,0.61,0.36,1); --dur-base:240ms;
  --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem;
  --space-6:2rem; --space-7:2.5rem; --space-8:3rem;
  --gutter:var(--ok-wrap-pad-x); --section-y:var(--ok-section-y);
  --container-max:var(--ok-wrap-max); --container-narrow:var(--ok-read-max);
}

/* --- Hülle (th-*) --- */
.th-wrap { max-width: var(--container-max); margin: 0 auto; padding-inline: var(--gutter); }
.th-narrow { max-width: var(--container-narrow); }
.th-switch { background: var(--surface-subtle); border-bottom: 1px solid var(--wave-200); }
.th-switch__in { max-width: var(--container-max); margin: 0 auto; padding: .6rem var(--gutter); display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; font-size: var(--fs-sm); }
.th-switch__lbl { font-weight: var(--fw-extra); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); font-size: var(--fs-eyebrow); color: var(--slate-600); margin-right: var(--space-2); }   /* war --text-subtle mit 2,9:1 */
.th-switch a { text-decoration: none; font-weight: var(--fw-bold); color: var(--text-muted); padding: .3rem .85rem; border-radius: var(--radius-pill); }
.th-switch a:hover { background: var(--wave-100); color: var(--sea-700); }
.th-switch a[aria-current] { background: var(--sea-600); color: #fff; }
.th-hero { background: var(--slate-700); color: #fff; padding-block: var(--ok-hero-y); }
.th-hero__eyebrow { font-size: var(--fs-eyebrow); font-weight: var(--fw-extra); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--wave-300); margin: 0 0 1rem; }
.th-hero__title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); margin: 0 0 1.25rem; max-width: 18ch; color: #fff !important; text-transform: none !important; }
.th-hero__title em { font-style: normal; color: var(--wave-300); }
/* Die th-Hero-Titel der Plastik- und Kreislauf-Seite liefen auf Lato 50px
   statt Quicksand: die Kit-Regel .elementor-kit-14 h1 (Spezifitaet 0,2,0)
   schlaegt .th-hero__title (0,1,0) und setzt eine globale Lato-Variable.
   Der Rest der Website nutzt Quicksand 48px (auf /themen/globale-
   gerechtigkeit/, die als natives Widget gebaut ist, war es schon richtig).
   Hier die th-Hero-Titel auf denselben Wert gezwungen. */
.th-hero .th-hero__title {
  font-family: 'Quicksand', sans-serif !important;
  font-size: clamp(2rem, 4.6vw, 3rem) !important;
  line-height: 1.15 !important;
}
.th-hero__lead { font-size: var(--fs-lead); line-height: var(--lh-normal); color: var(--wave-200); max-width: 56ch; margin: 0; }
.th-hero__meta { display: flex; gap: var(--space-7); flex-wrap: wrap; margin-top: var(--space-7); }
.th-hero__meta .th-stat { display: flex; flex-direction: column; }
.th-hero__meta .th-stat b { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h2); line-height: 1; color: #fff; }
.th-hero__meta .th-stat span { font-size: var(--fs-sm); color: var(--wave-200); margin-top: .35rem; max-width: 22ch; }
.th-section { padding-block: var(--section-y); border-top: 1px solid var(--slate-100); }
.th-section--subtle { background: var(--surface-subtle); border-top: none; }
.th-section--sand { background: var(--surface-sand); border-top: none; }
.th-section__head { margin-bottom: var(--space-7); }
.th-section__head .ok-stage { margin-bottom: var(--space-5); }
.th-title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--text-strong); margin: 0 0 1rem; max-width: 20ch; text-wrap: balance; }
.th-intro { font-size: var(--fs-lead); line-height: var(--lh-normal); color: var(--text-body); max-width: 60ch; margin: 0; }
.th-body { font-size: var(--fs-base); line-height: var(--lh-relaxed); color: var(--text-body); max-width: 62ch; }
.th-body p { margin: 0 0 1rem; } .th-body b { color: var(--sea-700); }
.th-figcap { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--space-3); font-style: italic; }
.th-stack { display: grid; gap: var(--space-7); }
.th-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: center; }
.th-mt { margin-top: var(--space-7); }
.th-cta { background: linear-gradient(150deg, var(--coral-600), var(--coral-500)); color: #fff; }
.th-cta__in { max-width: var(--container-max); margin: 0 auto; padding: var(--section-y) var(--gutter); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.th-cta__title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h1); letter-spacing: var(--ls-tight); margin: 0; max-width: 16ch; color: #fff !important; }
.th-cta__text { font-size: var(--fs-lead); line-height: var(--lh-normal); color: rgba(255,255,255,.95); max-width: 50ch; margin: 0; }
.th-cta__btn { display: inline-block; background: #fff; color: var(--coral-700); font-family: var(--font-body); font-weight: var(--fw-bold); text-decoration: none; padding: .9rem 1.6rem; border-radius: var(--radius-pill); }
.th-cta__btn:hover { background: var(--coral-100); color: var(--coral-700); }

/* --- Chooser /themen/ --- */
.th-lead-wrap { max-width: var(--container-max); margin: 0 auto; padding: var(--ok-hero-y) var(--gutter); }
.th-lead-wrap .th-hero__eyebrow { color: var(--sea-600); }
.th-chooser { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-top: var(--space-8); }
.th-ch { display: flex; flex-direction: column; text-decoration: none; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); border: 1px solid var(--slate-100); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); background: #fff; }
.th-ch:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.th-ch__art { height: 140px; display: flex; align-items: flex-start; padding: 1.1rem; }
.th-ch__n { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: rgba(255,255,255,.85); }
.th-ch__body { padding: 1.25rem 1.5rem 1.6rem; }
.th-ch__t { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4); color: var(--text-strong); margin: 0 0 .4rem; }
.th-ch__d { font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--text-muted); margin: 0; }

/* --- Primitive: StageMarker --- */
.ok-stage { display: flex; align-items: center; gap: .75rem; font-family: var(--font-body); }
.ok-stage__num { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; flex: none; border-radius: var(--radius-pill); font-weight: var(--fw-extra); font-size: var(--fs-sm); background: var(--sea-600); color: #fff; font-variant-numeric: tabular-nums; }
.ok-stage__text { display: flex; flex-direction: column; gap: .1rem; }
.ok-stage__label { font-size: var(--fs-eyebrow); font-weight: var(--fw-extra); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--sea-600); line-height: 1; }
.ok-stage__sub { font-size: var(--fs-sm); color: var(--text-muted); }
.ok-stage__line { flex: 1; height: 2px; background: linear-gradient(90deg, var(--wave-300), transparent); border-radius: 2px; }
.ok-stage--invert .ok-stage__num { background: var(--wave-300); color: var(--slate-800); }
.ok-stage--invert .ok-stage__label { color: var(--wave-300); }
.ok-stage--invert .ok-stage__sub { color: var(--wave-200); }
.ok-stage--invert .ok-stage__line { background: linear-gradient(90deg, rgba(176,197,218,.5), transparent); }

/* --- Primitive: FlowMap --- */
.ok-flowmap { background: var(--wave-50); border-radius: var(--radius-lg); padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--wave-200); }
.ok-flowmap__svg { width: 100%; height: auto; display: block; }
.ok-flowmap__legend { display: flex; flex-wrap: wrap; gap: 1.25rem 1.75rem; margin-top: 1.25rem; }
.ok-flowmap__leg { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-sm); color: var(--text-muted); font-weight: var(--fw-semibold); }
.ok-flowmap__swatch { width: 1.5rem; height: .4rem; border-radius: 2px; flex: none; }
.ok-flowmap__zone { font-family: var(--font-body); font-weight: var(--fw-extra); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }

/* --- Primitive: NumberCompare --- */
.ok-ncompare { display: grid; gap: 1.5rem; }
.ok-ncompare__head { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 1rem; align-items: end; }
.ok-ncompare__colhead { font-family: var(--font-body); font-weight: var(--fw-extra); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .06em; text-align: right; }
.ok-ncompare__colhead--n { color: var(--sea-700); } .ok-ncompare__colhead--s { color: var(--slate-600); }
.ok-ncompare__row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 1rem; align-items: center; padding: .85rem 0; border-top: 1px solid var(--slate-100); }
.ok-ncompare__label { font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--text-body); }
.ok-ncompare__cell { text-align: right; }
.ok-ncompare__val { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h3); line-height: 1; letter-spacing: var(--ls-tight); font-variant-numeric: tabular-nums; }
.ok-ncompare__val--n { color: var(--sea-600); } .ok-ncompare__val--s { color: var(--slate-700); }
.ok-ncompare__note { font-size: var(--fs-xs); color: var(--text-muted); margin-top: .15rem; }
.ok-ncompare__bar { grid-column: 1 / -1; height: 8px; border-radius: 999px; overflow: hidden; display: flex; background: var(--slate-100); }
.ok-ncompare__bar > span { display: block; height: 100%; }
.ok-ncompare__bar .n { background: var(--sea-500); } .ok-ncompare__bar .s { background: var(--slate-500); }
@media (max-width: 620px) { .ok-ncompare__val { font-size: var(--fs-h4); } }

/* --- Primitive: SourceList --- */
.ok-sources { border-top: 2px solid var(--slate-200); padding-top: 1.25rem; }
.ok-sources__head { display: flex; align-items: center; gap: .5rem; font-family: var(--font-body); font-weight: var(--fw-extra); font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--text-muted); margin: 0 0 .85rem; }
.ok-sources__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; counter-reset: src; }
.ok-sources__item { font-size: var(--fs-sm); line-height: 1.5; color: var(--text-muted); padding-left: 1.85rem; position: relative; }
.ok-sources__item::before { counter-increment: src; content: "[" counter(src) "]"; position: absolute; left: 0; top: 0; font-variant-numeric: tabular-nums; font-weight: var(--fw-bold); color: var(--slate-400); }
.ok-sources__item a { color: var(--text-link); text-decoration: none; font-weight: var(--fw-semibold); }
.ok-sources__item a:hover { text-decoration: underline; }

/* --- Primitive: KidsExplainer --- */
.ok-kids { background: var(--surface-sand); border-radius: var(--radius-xl); padding: clamp(1.75rem, 4vw, 3rem); position: relative; border: 2px dashed var(--wave-400); }
.ok-kids__badge { display: inline-flex; align-items: center; gap: .5rem; background: var(--wave-300); color: var(--slate-800); font-family: var(--font-body); font-weight: var(--fw-extra); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .08em; padding: .4rem .95rem; border-radius: var(--radius-pill); margin-bottom: 1.25rem; }
.ok-kids__badge svg { width: 1.1rem; height: 1.1rem; }
.ok-kids__title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: clamp(1.6rem, 3vw, 2.25rem); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--text-strong); margin: 0 0 1rem; }
.ok-kids__body { font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.6; color: var(--slate-800); }
.ok-kids__body p { margin: 0 0 .85rem; } .ok-kids__body p:last-child { margin-bottom: 0; }
.ok-kids__body b { color: var(--sea-700); }

/* --- Primitive: CircleFlow --- */
.ok-circle { display: block; }
.ok-circle__svg { width: 100%; height: auto; max-width: 840px; margin: 0 auto; display: block; }
/* Die Zeichenflaeche ist seitlich erweitert (viewBox 840 statt 560), damit die
   Beschriftungen der linken und rechten Station NEBEN ihren Kreisen stehen statt
   darueber, wo sie im Weg der Pfeile lagen. max-width waechst mit, sonst wuerde
   das Diagramm insgesamt kleiner statt breiter.
   Auf Telefonen sonst gleiches Muster wie bei den Infografiken der Plastik-Seite:
   Mindestbreite plus waagerechtes Scrollen, damit die Schrift lesbar bleibt. */
@media (max-width: 640px) {
  .ok-circle { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ok-circle__svg { min-width: 680px; }   /* 560 ergab nur 9,3px kleinste Schrift, 680 ergibt 11,3px */
}
.ok-circle__center-t { font-family: var(--font-display); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); fill: var(--slate-800); }
.ok-circle__center-s { font-family: var(--font-body); font-weight: var(--fw-semibold); fill: var(--text-muted); }
.ok-circle__node-num { font-family: var(--font-display); font-weight: var(--fw-bold); fill: #fff; }
.ok-circle__node-t { font-family: var(--font-display); font-weight: var(--fw-bold); fill: var(--slate-800); }
.ok-circle__node-d { font-family: var(--font-body); fill: var(--text-muted); }

/* --- Primitive: LinearVsCircular --- */
.ok-lvc { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.ok-lvc__panel { border-radius: var(--radius-lg); padding: clamp(1.25rem, 3vw, 1.85rem); border: 1px solid var(--slate-100); display: flex; flex-direction: column; gap: 1.1rem; }
.ok-lvc__panel--linear { background: var(--slate-50); }
.ok-lvc__panel--circular { background: var(--wave-50); border-color: var(--wave-200); }
.ok-lvc__tag { align-self: flex-start; font-family: var(--font-body); font-weight: var(--fw-extra); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; padding: .3rem .8rem; border-radius: var(--radius-pill); }
.ok-lvc__tag--linear { background: var(--slate-200); color: var(--slate-700); }
.ok-lvc__tag--circular { background: var(--sea-100); color: var(--sea-700); }
.ok-lvc__title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h4); color: var(--text-strong); margin: 0; }
.ok-lvc__chain { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.ok-lvc__step { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-sm); padding: .45rem .85rem; border-radius: var(--radius-sm); background: #fff; color: var(--slate-700); border: 1px solid var(--slate-200); }
.ok-lvc__step--waste { background: var(--slate-700); color: #fff; border-color: var(--slate-700); }
.ok-lvc__step--loop { background: var(--green-100); color: var(--green-500); border-color: var(--green-500); }
.ok-lvc__arrow { color: var(--slate-400); font-weight: 700; }
.ok-lvc__arrow--loop { color: var(--green-500); }
.ok-lvc__note { font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--text-muted); margin: 0; }
@media (max-width: 620px) { .ok-lvc { grid-template-columns: 1fr; } }

/* --- Primitive: StatementBlock --- */
.ok-statement { background: var(--surface-sand); border-radius: var(--radius-lg); padding: clamp(1.75rem, 4vw, 2.75rem); display: flex; gap: 1.5rem; align-items: flex-start; margin: 0; }
.ok-statement__mark { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 4rem; line-height: .7; color: var(--wave-400); flex: none; }
.ok-statement__body { display: flex; flex-direction: column; gap: 1.25rem; }
.ok-statement__quote { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: clamp(1.25rem, 2.4vw, 1.65rem); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--text-strong); margin: 0; }
.ok-statement__person { display: flex; align-items: center; gap: .85rem; }
.ok-statement__avatar { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; flex: none; background: var(--wave-200); color: var(--slate-700); font-family: var(--font-display); font-weight: 700; overflow: hidden; }
.ok-statement__name { display: block; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-base); color: var(--text-strong); }
.ok-statement__role { font-size: var(--fs-sm); color: var(--text-muted); }

/* Themen: Tag (Selbstverortung) + Responsives */
.th-tag { display: inline-block; font-family: var(--font-body); font-weight: var(--fw-extra); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; padding: .3rem .8rem; border-radius: var(--radius-pill); background: var(--slate-100); color: var(--slate-700); }
.th-projcard { background: #fff; border: 1px solid var(--slate-100); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); display: flex; flex-direction: column; }
.th-projcard__img { aspect-ratio: 16 / 10; background: var(--wave-50); display: flex; align-items: flex-end; padding: 1rem; color: var(--slate-500); font-size: var(--fs-sm); }
.th-projcard__body { padding: 1.5rem; display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; }
.th-projcard__body h3 { font-family: var(--font-display); font-weight: 700; color: var(--text-strong); margin: 0; font-size: var(--fs-h4); }
.th-projcard__body p { margin: 0; color: var(--text-body); font-size: var(--fs-base); }
/* Inline-Infografik-SVGs (Plastik-Themenseite): responsiv, Text editierbar */
.th-ig { margin-top: 1.75rem; }
.th-ig svg { width: 100%; height: auto; display: block; }
/* Weltkarte: auf Mobil nicht unter lesbare Schriftgroesse schrumpfen -> Mindestbreite + horizontales Scrollen */
@media (max-width: 640px) {
  .th-ig--karte { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--wave-200); border-radius: var(--radius-lg); }
  .th-ig--karte svg { min-width: 540px; }
  .th-ig--nordsued { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .th-ig--nordsued svg { min-width: 600px; }
}
@media (max-width: 720px) { .th-grid-2 { grid-template-columns: 1fr; } .th-chooser { grid-template-columns: 1fr; } }

@media (max-width: 1024px) {
  .ok-modell-grid { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .ok-sponsoring-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Presse-Seite (/presse/)
   ============================================================ */

/* Sektion 3 — Medienauftritte (kuratierte Zeilen) */
.ok-presse-liste { display: flex; flex-direction: column; gap: var(--ok-grid-gap); max-width: 900px; }
.ok-presse-item {
  background: #fff; border: 1px solid var(--wave-50); border-radius: 16px;
  padding: 1.25rem 1.5rem; box-shadow: 0 2px 12px rgba(71, 72, 86, .05);
}
.ok-presse-medium {
  font-family: Quicksand, sans-serif; font-weight: 700; font-size: 1.15rem;
  color: var(--slate-900);
}
.ok-presse-jahr { color: var(--slate-500); font-size: .9rem; font-weight: 600; margin-left: .6rem; }
.ok-presse-item p { margin: .4rem 0 .7rem; color: var(--slate-700); }

/* Sektion 4 — Pressekit (drei Blöcke) */
.ok-pressekit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ok-grid-gap); align-items: start; }
.ok-copybox {
  background: #fff; border-left: 4px solid var(--wave-300); border-radius: 12px;
  padding: var(--ok-card-pad); color: var(--slate-700);
}
.ok-copybox p { margin: 0; }
.ok-copybox-note { margin-top: .8rem; color: var(--slate-500); font-size: .85rem; }

@media (max-width: 900px) {
  .ok-pressekit-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Podcast-Archiv-Seite (/podcast-archiv/)
   ============================================================ */

/* Sektion 2 — Plattform-Leiste */
.ok-podcast-plattform { display: flex; flex-wrap: wrap; gap: 1rem; }

/* Sektion 3 — Ausgewählte Folgen (Karten mit Cover) */
.ok-podcast-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.ok-podcast-card {
  background: #fff; border: 1px solid var(--wave-50); border-radius: 16px; overflow: hidden;
  box-shadow: 0 2px 12px rgba(71, 72, 86, .05); display: flex; flex-direction: column;
}
.ok-podcast-card img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; background: var(--wave-50);
}
.ok-podcast-card-body { padding: var(--ok-card-pad-sm); display: flex; flex-direction: column; gap: .4rem; }
.ok-podcast-card-body h3 {
  text-transform: none; font-family: Quicksand, sans-serif; font-size: 1.1rem;
  color: var(--slate-900); margin: 0;
}
.ok-podcast-card-body p { margin: 0; color: var(--slate-700); font-size: .95rem; }

/* Sektion 4 — Vollständiges Archiv (schlicht, einspaltig) */
.ok-archiv-liste { max-width: 820px; border-top: 1px solid var(--wave-300); }
.ok-archiv-item {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .85rem .25rem; border-bottom: 1px solid var(--wave-300);
}
.ok-archiv-item a { color: var(--sea-600); text-decoration: none; font-weight: 600; }
.ok-archiv-item a:hover, .ok-archiv-item a:focus { text-decoration: underline; }
.ok-archiv-datum { color: var(--slate-500); font-size: .9rem; white-space: nowrap; }

@media (max-width: 820px) {
  .ok-podcast-cards { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ok-archiv-item { flex-direction: column; gap: .15rem; align-items: flex-start; }
}

/* ============================================================
   SwopShop-Projektseite (/swopshop/)
   ============================================================ */

/* Coral Primär-Button (nur Spenden/Patenschaften) fuer HTML-<a>-Links */
.ok-btn.is-primary { color: #fff; background: #f0825a; border: 2px solid #f0825a; }
.ok-btn.is-primary:hover, .ok-btn.is-primary:focus { background: #e0673f; border-color: #e0673f; color: #fff; }

/* Sektion 6 — FAQ-Loop-Grid (Wiederverwendung faq-thema=swopshop) */
.ok-faq-loop { max-width: 820px; margin-left: auto; margin-right: auto; }

/* Sektion 4 — Materialaufschlüsselung */
.ok-material-liste { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 2.5rem; max-width: 860px; }
.ok-material-item {
  display: flex; gap: .7rem; align-items: baseline; padding: .7rem 0;
  border-bottom: 1px solid var(--wave-300);
}
.ok-material-item b { font-family: Quicksand, sans-serif; color: var(--slate-900); min-width: 5rem; flex-shrink: 0; }
.ok-material-item span { color: var(--slate-700); }

@media (max-width: 700px) {
  .ok-material-liste { grid-template-columns: 1fr; }
}

/* ============================================================
   Aktuelles-Bereich (/aktuelles/ + Beitragskarte + Single)
   ============================================================ */

/* Filterleiste (vorerst visuell, ohne Mechanik) */
/* Aktuelles-Filter: natives Elementor-Widget (taxonomy-filter), gestylt wie die
   urspruenglichen Pillen. Das Widget liegt ausserhalb von .ok-wrap, daher hier
   die Inhaltsbreite selbst setzen. Aktiver Zustand in Sea (wie Themen-Subnav). */
/* Elementor erzwingt beim Widget volle Breite (max-width laesst sich nicht sauber
   ueberschreiben), Padding greift aber. Daher Ausrichtung ueber das Padding, damit
   die Pillen mit dem Kopftext (ok-wrap, 1200 + 24) fluchten. */
.elementor-widget.ok-aktuelles-filter {
  width: 100%; align-self: stretch; margin-top: 1.5rem;
  padding-left: max(var(--ok-wrap-pad-x), calc((100% - var(--ok-wrap-max)) / 2 + var(--ok-wrap-pad-x)));
  padding-right: var(--ok-wrap-pad-x);
}
.ok-aktuelles-filter .e-filter { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .6rem !important; }
.ok-aktuelles-filter .e-filter-item {
  font-family: 'Nunito', sans-serif; font-size: .8rem; font-weight: 700; letter-spacing: .02em;
  padding: .35rem .9rem; border: none; border-radius: 999px; cursor: pointer;
  background: var(--wave-300); color: var(--slate-900); transition: background .2s;
}
.ok-aktuelles-filter .e-filter-item:hover { background: var(--wave-400); }
.ok-aktuelles-filter .e-filter-item[aria-pressed="true"] { background: var(--sea-600); color: #fff; }
/* "Alle" rendert zuletzt, gehoert aber nach vorn */
.ok-aktuelles-filter .e-filter-item[data-filter="__all"] { order: -1; }

/* --- Archiv-Template (Schlagwort- und Kategorie-Archive, Template 26003) ---
   Kopf im Seiten-Design; Titel ist ein eigenes Widget ausserhalb von .ok-wrap,
   daher Ausrichtung ueber Padding (wie bei der Filterleiste). */
.ok-archive-eyebrow {
  display: block; color: var(--sea-600); font-size: .8rem; font-weight: 700;
  margin-bottom: var(--ok-head-eyebrow-gap);
}
.elementor-widget.ok-archive-title {
  width: 100%; align-self: stretch; margin: 0 0 2rem;
  padding-left: max(var(--ok-wrap-pad-x), calc((100% - var(--ok-wrap-max)) / 2 + var(--ok-wrap-pad-x)));
  padding-right: var(--ok-wrap-pad-x);
}
.ok-archive-title .elementor-heading-title {
  font-family: Quicksand, sans-serif; font-weight: 700;
  font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1.15;
  color: var(--slate-900); text-transform: none !important;
}

/* ============================================================
   FAQ-Optik — EINE Definition fuer beide Akkordeons
   ------------------------------------------------------------
   Es gibt im Projekt zwei technisch verschiedene FAQ-Bausteine:
     A) /faq/ und /swopshop/: FAQ-Inhaltstyp in Loop-Grids mit dem
        nativen Elementor-Akkordeon (Loop-Vorlage 25745, Widget
        c742bf8). Das ist das Relaunch-System.
     B) /spendenshop/: ElementsKit-Akkordeon cc0e798, Texte fest in
        der Seite. Altbestand.

   Beide sahen deutlich verschieden aus (gemessen 18.07.2026):
     A  760px Lesespalte, Nunito 19,2px/400, transparent + Haarlinie,
        Polsterung 10px, Abstand 30px
     B  1152px volle Breite, Lato 20px/500, wave-50 gefuellt,
        Polsterung 15/30px, Abstand 10px

   Gemeinsame Werte stehen hier als Variablen und werden unten auf
   beide Bausteine angewendet. Aendert sich die FAQ-Optik, aendert
   man sie an EINER Stelle.

   Richtungsentscheidung: Breite und Schrift kommen von A (760px ist
   die Lesespalte aus den Tokens, 1152px waren fuer Fliesstext zu
   breit; Nunito ist die Body-Schrift laut Design-System, Lato ist
   Altbestand). Die gefuellte Flaeche kommt von B (Marina, 18.07.2026)
   — sie signalisiert deutlicher, dass man klicken kann, und passt zu
   den weichen Flaechen des Design-Systems.

   NICHT angeglichen: das Aufklapp-Symbol (A nutzt Plus/Minus, B einen
   Chevron). Das ist eine Widget-Einstellung, kein CSS.
   ============================================================ */
:root {
  --ok-faq-bg:        var(--wave-50);
  --ok-faq-bg-hover:  var(--wave-100);
  --ok-faq-bg-open:   var(--sea-600);
  --ok-faq-fg:        var(--slate-700);
  --ok-faq-fg-open:   #fff;
  --ok-faq-radius:    12px;
  --ok-faq-pad:       14px 22px;
  --ok-faq-gap:       12px;
  --ok-faq-fs:        1.2rem;    /* 19,2px — Wert von /faq/ */
  --ok-faq-fw:        600;
}

/* --- A) Natives Akkordeon aus der FAQ-Loop-Vorlage --------------
   Ueber die Widget-ID der Vorlage adressiert, damit die Regel
   ueberall greift, wo der FAQ-Inhaltstyp wiederverwendet wird
   (aktuell /faq/ und /swopshop/), ohne Seiten-IDs zu pflegen. */
.elementor-element-c742bf8 summary.e-n-accordion-item-title {
  background: var(--ok-faq-bg);
  border: 0;
  border-radius: var(--ok-faq-radius);
  padding: var(--ok-faq-pad);
}
.elementor-element-c742bf8 summary.e-n-accordion-item-title:hover {
  background: var(--ok-faq-bg-hover);
}
.elementor-element-c742bf8 .e-n-accordion-item-title-text {
  font-family: "Nunito", sans-serif;
  font-size: var(--ok-faq-fs) !important;
  font-weight: var(--ok-faq-fw) !important;
  color: var(--ok-faq-fg);
}
.elementor-element-c742bf8 details[open] > summary.e-n-accordion-item-title {
  background: var(--ok-faq-bg-open);
  border-radius: var(--ok-faq-radius) var(--ok-faq-radius) 0 0;
}
.elementor-element-c742bf8 details[open] > summary .e-n-accordion-item-title-text,
.elementor-element-c742bf8 details[open] > summary .e-n-accordion-item-title-icon svg {
  color: var(--ok-faq-fg-open);
  fill: var(--ok-faq-fg-open);
}
.elementor-element-c742bf8 summary .e-n-accordion-item-title-icon svg {
  fill: var(--sea-600);
}
/* Antwortbereich: der Container der Loop-Vorlage brachte einen
   1px-Rahmen in #d5d8dc mit. Der zeichnete im geoeffneten Zustand
   eine feine Linie um die Antwort, die es im Spendenshop nicht gibt
   und die auch nicht aus dem Design-System stammt. */
.elementor-element-50b35f9 {
  border: 0 !important;
  padding-top: 10px;
}

/* Jede FAQ ist ein eigener Loop-Eintrag; der Abstand kommt daher vom
   Raster, nicht vom Akkordeon. */
.elementor-widget-loop-grid:has(.elementor-element-c742bf8) .elementor-loop-container {
  gap: var(--ok-faq-gap);
}

/* --- B) ElementsKit-Akkordeon im Spendenshop --------------------
   Zusaetzlich zur Optik wird hier die Breite auf die Lesespalte
   begrenzt. Bewusst linksbuendig statt zentriert, damit es unter der
   Sektionsueberschrift der Shop-Seite steht (auf /faq/ ist das
   Layout mittig, dort bleibt es mittig). */
.elementor-element-cc0e798 .ekit-wid-con {
  max-width: var(--ok-read-max);
  margin-inline: 0;
}
.elementor-element-cc0e798 a.ekit-accordion--toggler {
  background: var(--ok-faq-bg) !important;
  border: 0 !important;
  border-radius: var(--ok-faq-radius) !important;
  padding: var(--ok-faq-pad) !important;
}
.elementor-element-cc0e798 a.ekit-accordion--toggler:hover {
  background: var(--ok-faq-bg-hover) !important;
}
.elementor-element-cc0e798 .ekit-accordion-title {
  font-family: "Nunito", sans-serif !important;
  font-size: var(--ok-faq-fs) !important;
  font-weight: var(--ok-faq-fw) !important;
  color: var(--ok-faq-fg);
}
.elementor-element-cc0e798 .ekit_accordion_icon_left_group i { color: var(--sea-600); }
.elementor-element-cc0e798 .elementskit-card { margin-bottom: var(--ok-faq-gap) !important; }
/* Offener Zustand (wie A) */
.elementor-element-cc0e798 .elementskit-card.active a.ekit-accordion--toggler {
  background: var(--ok-faq-bg-open) !important;
  border-radius: var(--ok-faq-radius) var(--ok-faq-radius) 0 0 !important;
}
.elementor-element-cc0e798 .elementskit-card.active .ekit-accordion-title { color: var(--ok-faq-fg-open) !important; }
.elementor-element-cc0e798 .elementskit-card.active .ekit_accordion_icon_left_group i { color: var(--ok-faq-fg-open); }
/* Antworttext sicher lesbar (Widget-Einstellung war #F4F5E9, fast weiss) */
.elementor-element-cc0e798 .ekit-accordion--content,
.elementor-element-cc0e798 .ekit-accordion--content p,
.elementor-element-cc0e798 .ekit-accordion--content span { color: var(--ok-faq-fg) !important; }

/* BeitragCard: Raster + Karten ueber die Grid-Klasse (rendert) + Elementors Loop-Klassen */
.ok-aktuelles-grid .elementor-loop-container {
  display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 1.5rem !important;
}
.ok-aktuelles-grid .e-loop-item {
  background: #fff; border: 1px solid var(--wave-50); border-radius: 16px; overflow: hidden;
  box-shadow: 0 2px 12px rgba(71, 72, 86, .05); display: flex; flex-direction: column;
}
.ok-aktuelles-grid .e-loop-item img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; background: var(--wave-50);
}
.ok-aktuelles-grid .e-loop-item .elementor-heading-title {
  text-transform: none; font-family: Quicksand, sans-serif; font-size: 1.15rem;
  line-height: 1.3; color: var(--slate-900);
}
.ok-aktuelles-grid .e-loop-item .elementor-heading-title a { color: inherit; text-decoration: none; }
.ok-aktuelles-grid .e-loop-item .elementor-heading-title a:hover { color: var(--sea-600); }
.ok-aktuelles-grid .e-loop-item .elementor-widget-text-editor { color: var(--slate-700); font-size: .95rem; }
.ok-aktuelles-grid .e-loop-item .elementor-widget-post-info { color: var(--slate-500); font-size: .85rem; }
@media (max-width: 1024px) { .ok-aktuelles-grid .elementor-loop-container { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 680px)  { .ok-aktuelles-grid .elementor-loop-container { grid-template-columns: 1fr !important; } }
/* "Mehr laden" als Outline/Sea statt Coral (kein Spenden-CTA) */
.ok-aktuelles-grid .elementor-button {
  background: transparent !important; border: 2px solid var(--sea-700) !important;
  color: var(--sea-700) !important; border-radius: 999px !important;
}
.ok-aktuelles-grid .elementor-button:hover { background: var(--sea-700) !important; color: #fff !important; }
/* ProjektUpdates-Grid auf Projektseiten: auf Inhaltsbreite begrenzt (Startseiten-Teaser ist bewusst voll) */
.ok-pu-grid .elementor-loop-container {
  max-width: var(--ok-wrap-max); margin-inline: auto;
  padding-inline: var(--ok-wrap-pad-x); box-sizing: border-box;
}

/* Featured-Aufmacher: NUR auf /aktuelles/ (Klasse ok-featured-first am Grid).
   Der erste Beitrag spannt die volle Rasterbreite und wird horizontal gelegt
   (Bild links, Text rechts, groesserer Titel, "Neuester Beitrag"-Label).
   Kein Extra-Query/Offset — reines CSS auf dem bestehenden 12er-Grid. */
.ok-featured-first .e-loop-item:first-of-type { grid-column: 1 / -1; }
.ok-featured-first .e-loop-item:first-of-type > .e-con {
  flex-direction: row !important; align-items: stretch; min-height: 340px; gap: 0;
}
/* Bildspalte links ~56%, fuellt die Kartenhoehe */
.ok-featured-first .e-loop-item:first-of-type > .e-con > .elementor-widget-image {
  flex: 0 0 56%; max-width: 56%; display: flex; align-self: stretch;
}
.ok-featured-first .e-loop-item:first-of-type > .e-con > .elementor-widget-image .elementor-widget-container { width: 100%; }
.ok-featured-first .e-loop-item:first-of-type > .e-con > .elementor-widget-image img {
  width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: 0;
}
/* Textspalte rechts, vertikal zentriert, mit Eyebrow-Label */
.ok-featured-first .e-loop-item:first-of-type > .e-con > .e-con {
  flex: 1 1 44%; justify-content: center; padding: 1.75rem 2rem;
}
.ok-featured-first .e-loop-item:first-of-type > .e-con > .e-con::before {
  content: "Neuester Beitrag"; display: block; margin-bottom: .6rem;
  font-family: Nunito, sans-serif; font-weight: 700; font-size: .78rem;
  letter-spacing: var(--ls-eyebrow, .16em); text-transform: uppercase; color: var(--sea-600);
}
.ok-featured-first .e-loop-item:first-of-type .elementor-heading-title {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem) !important; line-height: 1.2;
}
.ok-featured-first .e-loop-item:first-of-type .elementor-widget-text-editor { font-size: 1.05rem; }
/* Aufmacher OHNE Beitragsbild: keine erzwungene Hoehe, Text ueber volle Breite,
   damit keine leere Bildflaeche entsteht (Fallback, bis ein Bild gesetzt ist). */
.ok-featured-first .e-loop-item:first-of-type > .e-con:not(:has(.elementor-widget-image)) { min-height: 0; }
.ok-featured-first .e-loop-item:first-of-type > .e-con:not(:has(.elementor-widget-image)) > .e-con { padding: 2rem 2.25rem; }
@media (max-width: 680px) {
  .ok-featured-first .e-loop-item:first-of-type > .e-con { flex-direction: column !important; min-height: 0; }
  .ok-featured-first .e-loop-item:first-of-type > .e-con > .elementor-widget-image { flex-basis: auto; max-width: 100%; }
  .ok-featured-first .e-loop-item:first-of-type > .e-con > .elementor-widget-image img { aspect-ratio: 16 / 10; height: auto; }
}

/* Single-Beitrag (Theme-Builder) — gescopet auf Template 25923 (nur migrierte Aktuelles-Beitraege,
   NICHT #22252/Podcast). Container-Klassen der Loop/Single rendern nicht, daher ueber Elementors
   eigene Klassen (.elementor-25923, .elementor-widget-theme-post-content) zielen. Kein !important. */
.elementor-25923 > .e-con {
  max-width: 820px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px;
}
.ok-single-title .elementor-heading-title {
  text-transform: none; font-family: Quicksand, sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--slate-900); line-height: 1.2;
}
.elementor-25923 .elementor-widget-post-info { color: var(--slate-500); font-size: .9rem; }
.elementor-25923 .elementor-widget-theme-post-content {
  color: var(--slate-700); line-height: 1.7; padding-top: 1rem; padding-bottom: 2.5rem;
}
/* --- Artikel-Typografie im Beitragsinhalt ---
   Vorher waren nur Farbe/Zeilenhoehe gesetzt: Zwischenueberschriften klebten ohne
   Abstand am Folgeabsatz. Hier ein vollstaendiger Satz fuer die real genutzten
   Elemente (h2/h3/h4, Listen, Links, Zitate, Trenner, Bilder mit Bildunterschrift). */
.elementor-25923 .elementor-widget-theme-post-content h1,
.elementor-25923 .elementor-widget-theme-post-content h2,
.elementor-25923 .elementor-widget-theme-post-content h3,
.elementor-25923 .elementor-widget-theme-post-content h4 {
  text-transform: none; font-family: Quicksand, sans-serif; color: var(--slate-900);
  line-height: 1.25; text-wrap: balance;
}
/* h1 im Fliesstext wie h2 darstellen (doppeltes H1 bleibt redaktionell zu bereinigen) */
.elementor-25923 .elementor-widget-theme-post-content h1,
.elementor-25923 .elementor-widget-theme-post-content h2 {
  font-size: clamp(1.75rem, 3.2vw, 2.1rem); margin: 2.75rem 0 .85rem;
}
.elementor-25923 .elementor-widget-theme-post-content h3 {
  font-size: clamp(1.3rem, 2.4vw, 1.55rem); margin: 2.25rem 0 .6rem;
}
/* h4 muss ueber der Fliesstextgroesse (1.2rem) liegen, sonst keine Hierarchie */
.elementor-25923 .elementor-widget-theme-post-content h4 {
  font-size: 1.35rem; margin: 1.85rem 0 .5rem;
}
/* erste Ueberschrift nicht unnoetig weit vom Beitragsbild wegdruecken */
.elementor-25923 .elementor-widget-theme-post-content > :first-child { margin-top: 0; }
.elementor-25923 .elementor-widget-theme-post-content p { margin: 0 0 1.15rem; }
.elementor-25923 .elementor-widget-theme-post-content strong { color: var(--slate-900); }
.elementor-25923 .elementor-widget-theme-post-content ul,
.elementor-25923 .elementor-widget-theme-post-content ol { margin: 0 0 1.15rem; padding-left: 1.4rem; }
.elementor-25923 .elementor-widget-theme-post-content li { margin-bottom: .4rem; }
.elementor-25923 .elementor-widget-theme-post-content li::marker { color: var(--wave-600); }
.elementor-25923 .elementor-widget-theme-post-content a {
  color: var(--sea-600); text-decoration: underline; text-underline-offset: 2px;
}
.elementor-25923 .elementor-widget-theme-post-content a:hover { color: var(--sea-700); }
.elementor-25923 .elementor-widget-theme-post-content blockquote {
  margin: 1.75rem 0; padding: .25rem 0 .25rem 1.2rem;
  border-left: 3px solid var(--wave-300); color: var(--slate-700);
  font-family: Quicksand, sans-serif; font-size: 1.3rem; font-style: normal;
}
.elementor-25923 .elementor-widget-theme-post-content blockquote p:last-child { margin-bottom: 0; }
.elementor-25923 .elementor-widget-theme-post-content hr {
  border: 0; height: 1px; background: var(--wave-200); margin: 2.5rem 0;
}
.elementor-25923 .elementor-widget-theme-post-content figure { margin: 1.75rem 0; }
.elementor-25923 .elementor-widget-theme-post-content figcaption {
  font-size: .875rem; color: var(--slate-500); margin-top: .5rem; line-height: 1.5;
}
.elementor-25923 .elementor-widget-theme-post-content img { max-width: 100%; height: auto; border-radius: 12px; }
/* Beitragsbild-Kopf: volle Lesespaltenbreite, gerundet, Abstand zum Text.
   Container-_css_classes rendern nicht -> ueber die Element-ID-Klasse .elementor-element-simgc.
   Image-Widget mit dynamischem post-featured-image-Tag; ohne gesetztes Bild bleibt der Block leer. */
.elementor-25923 .elementor-element-simgc { padding-top: .25rem; padding-bottom: 1rem; }
.elementor-25923 .elementor-element-simgc img {
  width: 100%; height: auto; display: block; border-radius: 16px; background: var(--wave-50);
}
/* Beitrag ohne Beitragsbild: leeren Block kollabieren, kein Leerraum zwischen Datum und Text */
.elementor-25923 .elementor-element-simgc:not(:has(img)) { display: none; }

/* ============================================================
   Footer (Relaunch) — 4 Spalten + Rechts-Schlusszeile
   Dunkler Grund (slate-900), Design-System-konform.
   Ein Text-Editor-Widget rendert das ganze HTML; hier nur Layout.
   ============================================================ */
.ok-footer { background: #2c2d36; color: #eef2f7; font-family: 'Nunito', sans-serif; }
.ok-footer-inner { max-width: 1200px; margin: 0 auto; padding: clamp(3rem, 6vw, 4.5rem) 1.5rem 2rem; }
.ok-footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ok-grid-gap-wide); }
.ok-footer-col h3 { font-family: 'Quicksand', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.8125rem; color: #b0c5da; margin: 0 0 1.1rem; }
.ok-footer-col ul { list-style: none; margin: 0; padding: 0; }
.ok-footer-col li { margin: 0 0 0.65rem; }
.ok-footer-col a { color: #eef2f7; text-decoration: none; transition: color 0.15s ease; }
.ok-footer-col a:hover, .ok-footer-col a:focus-visible { color: #fff; text-decoration: underline; }
.ok-footer-mail { margin: 1.2rem 0 1rem; }
.ok-footer-mail a { color: #eef2f7; font-weight: 700; text-decoration: none; }
.ok-footer-mail a:hover { color: #fff; text-decoration: underline; }
.ok-social { display: flex; gap: 0.9rem; align-items: center; }
.ok-social a { display: inline-flex; width: 24px; height: 24px; }
.ok-social svg { width: 24px; height: 24px; fill: #b0c5da; transition: fill 0.15s ease; }
.ok-social a:hover svg, .ok-social a:focus-visible svg { fill: #fff; }
.ok-footer-schluss { margin-top: 2.75rem; padding-top: 1.75rem; border-top: 1px solid rgba(255,255,255,0.14); display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; font-size: 0.875rem; color: #b0c5da; }
.ok-footer-konto { flex: 1 1 320px; }
.ok-itz { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 6px 10px; background: #fff; border-radius: 8px; text-decoration: none; }
.ok-itz img { display: block; height: 40px; width: auto; }
.ok-footer-legal { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; margin: 0; padding: 0; }
.ok-footer-legal a { color: #b0c5da; text-decoration: none; }
.ok-footer-legal a:hover, .ok-footer-legal a:focus-visible { color: #fff; text-decoration: underline; }
.ok-footer-copy { margin-left: auto; color: #b0c5da; }
@media (max-width: 900px) { .ok-footer-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; } }
@media (max-width: 560px) { .ok-footer-grid { grid-template-columns: 1fr; } .ok-footer-copy { margin-left: 0; } }

/* ============================================================
   Header „Ruhig & hell" (Richtung 1) — helles Kleid fuer #25934
   Nur Farben/Look; Struktur/Links bleiben im Elementor-Template.
   Rueckbau: diesen Block entfernen -> alter dunkler Look.
   ============================================================ */
.elementor-25934 .elementor-element-645332db { background-color: #ffffff !important; border-bottom: 1px solid #e5e9f0; }
.elementor-25934 .e-n-menu-title-text { color: #474856 !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 600; }
.elementor-25934 .e-n-menu-title:hover .e-n-menu-title-text,
.elementor-25934 .e-n-menu-title[aria-expanded="true"] .e-n-menu-title-text { color: #2f72a8 !important; }
.elementor-25934 .e-n-menu-dropdown-icon,
.elementor-25934 .e-n-menu-dropdown-icon svg { color: #7d92bb !important; fill: #7d92bb !important; }
.elementor-25934 .e-n-menu-content { background-color: #ffffff !important; border: 1px solid #e5e9f0; border-radius: 14px; box-shadow: 0 14px 34px rgba(44,45,54,0.14); }
.elementor-25934 .e-n-menu-content .elementor-widget-heading { display: none !important; }
.elementor-25934 .e-n-menu-content a { color: #474856 !important; }
.elementor-25934 .e-n-menu-content a:hover,
.elementor-25934 .e-n-menu-content a:focus { color: #2f72a8 !important; }
.elementor-25934 .elementor-element-22dfbc3c .elementor-button,
.elementor-25934 .elementor-element-22dfbc3c a { color: #ffffff !important; }
.elementor-25934 .elementor-element-455ed6b,
.elementor-25934 .elementor-element-455ed6b a { color: #575565 !important; border-color: #e5e9f0 !important; }

/* Header-Logo (echtes Marken-Logo #25993) sauber in die Kopfhoehe einpassen */
.elementor-25934 .elementor-element-6fbe1e6b img { max-height: 56px; width: auto !important; height: auto; }

/* Dropdown-Panel vollstaendig hell: der dunkle Grund kam von einer Global-Color
   auf den INNEREN Panel-Containern (.e-con), nicht auf .e-n-menu-content selbst. */
.elementor-25934 .e-n-menu-content .e-con,
.elementor-25934 .e-n-menu-content .e-con-inner { background-color: #ffffff !important; }
/* Dropdown-Ueberschrift (falls doch sichtbar) + Links ruhig auf Weiss */
.elementor-25934 .e-n-menu-content .elementor-heading-title { color: #575565 !important; }

/* ============================================================
   Header-Dropdown Richtung C — Mega-Panel mit Teaser
   Inhalt je Panel = EIN Text-Editor mit .ok-mega-HTML.
   ============================================================ */
.elementor-25934 .e-n-menu-content .ok-mega { display: grid; grid-template-columns: 1.5fr 1fr; gap: 2rem; max-width: 1040px; margin: 0 auto; padding: 1.6rem 1.5rem; }
.elementor-25934 .ok-mega-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.15rem 0.8rem; align-content: start; }
.elementor-25934 .ok-mega-list a { display: block; text-decoration: none; padding: 0.55rem 0.7rem; border-radius: 10px; }
.elementor-25934 .ok-mega-list a:hover { background: #f4f7fb; }
.elementor-25934 .ok-mega-list .mt { display: block; font-family: "Quicksand", sans-serif; font-weight: 700; font-size: 1rem; color: #2c2d36 !important; text-transform: none; }
.elementor-25934 .ok-mega-list a:hover .mt { color: #2f72a8 !important; }
.elementor-25934 .ok-mega-list .ms { display: block; font-size: 0.85rem; color: #6b6c78 !important; line-height: 1.35; margin-top: 0.05rem; }
.elementor-25934 .ok-mega-teaser { display: flex; flex-direction: column; justify-content: flex-end; background: #f5f1e8; border-radius: 14px; padding: var(--ok-card-pad-sm); text-decoration: none; }
.elementor-25934 .ok-mega-teaser .k { font-family: "Quicksand", sans-serif; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: #2f72a8 !important; font-weight: 700; }
.elementor-25934 .ok-mega-teaser .h { font-family: "Quicksand", sans-serif; font-weight: 700; font-size: 1.15rem; color: #2c2d36 !important; margin: 0.3rem 0 0.5rem; line-height: 1.25; }
.elementor-25934 .ok-mega-teaser .c { font-size: 0.9rem; color: #474856 !important; line-height: 1.4; }
.elementor-25934 .ok-mega-teaser:hover .h { color: #2f72a8 !important; }
@media (max-width: 900px) { .elementor-25934 .e-n-menu-content .ok-mega { grid-template-columns: 1fr; gap: 1rem; } .elementor-25934 .ok-mega-list { grid-template-columns: 1fr; } }

/* Dropdown C kompakt: Panel auf INHALTSBREITE statt volle Breite (kein Weissraum
   links mehr), rechtsbuendig unter dem Menue. Ueberschreibt die full-width-Default. */
.elementor-25934 .e-n-menu-content { width: max-content !important; max-width: 760px !important; left: auto !important; right: 1.5rem !important; transform: none !important; }
.elementor-25934 .e-n-menu-content .ok-mega { max-width: none !important; margin: 0 !important; }

/* ============================================================
   Dropdown C — FINALE kompakte Karte (ueberschreibt alle vorherigen
   Dropdown-Regeln). Ursachen behoben: fr-Spalten -> inhaltsbasiert
   (kein Umbruch); breiter weisser Wrapper -> transparent; Karte
   schrumpft auf Inhalt und sitzt rechtsbuendig unter dem Menue.
   ============================================================ */
.elementor-25934 .e-n-menu-content {
  width: max-content !important; max-width: 800px !important;
  left: auto !important; right: 1.5rem !important; transform: none !important;
  background: #ffffff !important; border: 1px solid #e5e9f0 !important;
  border-radius: 14px !important; box-shadow: 0 16px 36px rgba(44,45,54,0.15) !important;
}
.elementor-25934 .e-n-menu-content .e-con,
.elementor-25934 .e-n-menu-content .e-con-inner,
.elementor-25934 .e-n-menu-content .elementor-widget-text-editor,
.elementor-25934 .e-n-menu-content .elementor-widget-container {
  background: transparent !important; border: none !important; box-shadow: none !important;
  width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important;
}
.elementor-25934 .e-n-menu-content .ok-mega {
  display: grid !important; grid-template-columns: auto auto !important; gap: 1.6rem !important;
  align-items: start; width: auto !important; max-width: none !important; margin: 0 !important;
  background: transparent !important; padding: 1.5rem 1.7rem !important;
}
.elementor-25934 .e-n-menu-content .ok-mega-list {
  grid-template-columns: max-content max-content !important; gap: 0.25rem 1.7rem !important;
}
.elementor-25934 .e-n-menu-content .ok-mega-list .mt { white-space: nowrap; }
.elementor-25934 .e-n-menu-content .ok-mega-teaser { width: 210px !important; }

/* ============================================================
   KONSISTENZ-DURCHGANG — gescopte Anwendung der Spacing-Tokens
   Werte leben in den Tokens (:root); hier nur Zuweisung an die
   Elemente der Seiten, die die zentralen ok-*-Klassen nicht nutzen.
   ============================================================ */

/* Heros bewusst abgesetzt, untereinander gleich (Startseite + Plastikrebell) */
.elementor-25931 .elementor-element-homec1 > .e-con-inner,
.elementor-25891 .elementor-element-7947889 > .e-con-inner { padding-top: var(--ok-hero-y) !important; padding-bottom: var(--ok-hero-y) !important; }

/* Kopf linksbuendig auf den frueheren Seiten: boxed-760-Kopf nicht mehr zentrieren.
   Sauberer Override (kompoundiert nicht — nur margin auf dem Kopf-Inner).

   /was-wir-tun/ (25824) steht hier bewusst NICHT mehr drin: Dort ist die
   Inhaltsbreite am 18.07.2026 in den Elementor-Daten von 760 auf 1200
   gesetzt worden. Der Kopf ist damit von sich aus linksbuendig, und
   dieser Ausgleich haette 24px zu viel addiert (Textkante 168 statt 144).
   Fuer die drei uebrigen Seiten steht die Breite weiterhin auf 760,
   dort wird der Ausgleich noch gebraucht.

   Seit 19.07.2026 gilt die Regel nicht mehr nur fuer den Kopf, sondern
   fuer ALLE Sektionen dieser drei Seiten. Vorher stand nur der Kopf bei
   x=144 und alles darunter zentriert bei x=340 — genau dieser Sprung
   war der optische Bruch. Die 760px bleiben bewusst erhalten: Das sind
   Lesetext-Seiten, dort ist die schmale Spalte richtig; sie muss nur
   links stehen statt mittig.

   Umgesetzt als INNENabstand am Elterncontainer, nicht als linker
   Aussenabstand am Inneren: Der Inner ist 100% breit, ein linker
   Aussenabstand schiebt ihn deshalb ueber den rechten Rand. Auf 390px
   Bildschirmbreite war das Dokument dadurch 414px breit. Innenabstand
   am Container rechnet dank border-box in die Breite hinein. */
.elementor-25825 > .e-con,
.elementor-873   > .e-con,
.elementor-722   > .e-con {
  padding-left: max(24px, calc((100% - 1200px) / 2 + 24px)) !important;
  padding-right: var(--ok-wrap-pad-x) !important;
}
.elementor-25825 > .e-con > .e-con-inner,
.elementor-873   > .e-con > .e-con-inner,
.elementor-722   > .e-con > .e-con-inner {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Vor-Ort: Kopf 40 -> 64 (24px-Gutter wie ok-wrap) */
.elementor-25882 .elementor-element-16451ab { padding-left: 24px !important; }

/* FAQ (722): Gruppierung tragen. Themenbloecke (Ueberschrift + Akkordeon) sind eigene,
   aneinanderstossende Sektionen (Abstand 0). Abstand OBEN am Block bringt die Gruppierung;
   Item-Abstand bleibt nativ (~30), sodass Block (56) >> Item. */
.elementor-722 > .e-con:has(.elementor-widget-n-accordion) + .e-con { margin-top: var(--ok-faq-block-gap) !important; }

/* HINWEIS: Sektions-Innenabstand + Kopf-Spacing der vier fruehen Seiten (Was-wir-tun,
   Unsere-Geschichte, Transparenz, FAQ) werden NICHT per Override erzwungen — ihre
   verschachtelten nativen Elementor-Container lassen Werte kompoundieren. Diese vier
   Koepfe/Sektionen brauchen einen strukturellen Umbau auf ok-wrap/ok-section-head,
   damit sie dieselben Tokens ziehen wie der Rest (eigener Folgeschritt). */

/* Utility fuer den strukturellen Nachzug der 4 fruehen Seiten: vertikales
   Sektions-Padding aus dem Token, auf den Container-Inner. Nativ-Padding der
   Sektion wird dabei auf 0 gesetzt (kein Kompoundieren). */
/* Strukturell nachgezogene fruehe Seiten: Sektions-Padding + Kopf-Spacing token-
   getrieben, per SEITEN-/WIDGET-gescopter Regel. (Elementor rendert _css_classes auf
   Containern via Injektion nicht zuverlaessig; Element-IDs/Widget-Klassen dagegen schon.
   Nativ-Padding der Sektionen wurde in den Daten auf 0 gesetzt -> kein Kompoundieren.) */

/* Was-wir-tun (25824) */
.elementor-25824 > .e-con.e-con-boxed > .e-con-inner,
.elementor-25824 > .e-con.e-con-full { padding-top: var(--ok-section-y) !important; padding-bottom: var(--ok-section-y) !important; }
.elementor-25824 .ok-eyebrow { margin-bottom: var(--ok-head-eyebrow-gap) !important; }
.elementor-25824 .elementor-element-2aabd51 { margin-bottom: var(--ok-head-intro-gap) !important; }

/* Unsere-Geschichte (25825) */
.elementor-25825 > .e-con.e-con-boxed > .e-con-inner,
.elementor-25825 > .e-con.e-con-full { padding-top: var(--ok-section-y) !important; padding-bottom: var(--ok-section-y) !important; }
.elementor-25825 .ok-eyebrow { margin-bottom: var(--ok-head-eyebrow-gap) !important; }
.elementor-25825 .elementor-element-eb4e45a { margin-bottom: var(--ok-head-intro-gap) !important; }

/* Transparenz (873) */
.elementor-873 > .e-con.e-con-boxed > .e-con-inner,
.elementor-873 > .e-con.e-con-full { padding-top: var(--ok-section-y) !important; padding-bottom: var(--ok-section-y) !important; }
.elementor-873 .ok-eyebrow { margin-bottom: var(--ok-head-eyebrow-gap) !important; }
.elementor-873 .elementor-element-62df664 { margin-bottom: var(--ok-head-intro-gap) !important; }

/* FAQ (722) — Kopf auf Tokens. Sektions-Padding NUR auf die Kopf-Sektion:
   die uebrigen FAQ-Sektionen sind Themenbloecke, deren Vertikalrhythmus die
   Gruppierung (--ok-faq-block-gap / --ok-faq-item-gap) traegt, nicht --ok-section-y. */
.elementor-722 .elementor-element-d3a2537.e-con-boxed > .e-con-inner,
.elementor-722 .elementor-element-d3a2537.e-con-full { padding-top: var(--ok-section-y) !important; padding-bottom: var(--ok-section-y) !important; }
.elementor-722 .ok-eyebrow { margin-bottom: var(--ok-head-eyebrow-gap) !important; }
.elementor-722 .elementor-element-67c3cf3 { margin-bottom: var(--ok-head-intro-gap) !important; }

/* Startseite-Hero-Kopf (25931): Kopf-Spacing auf die Head-Tokens (war 11/16 -> 12/18).
   Hero nutzt ok-hero-grid statt ok-section-head, daher hier gescopt. */
.elementor-25931 .ok-hero-grid .ok-eyebrow { display: block; margin-bottom: var(--ok-head-eyebrow-gap); }
.elementor-25931 .ok-hero-grid h1 { margin: 0 0 var(--ok-head-intro-gap); }

/* ============================================================
   Personen-Karten (F2: SwopShop-Mitarbeiterinnen / OKZ-Team)
   Foto + Name + Rolle + kurzer Satz. Zieht die zentralen Tokens.
   Bewusst KEIN Coral (Regel: Coral nur Spenden/Patenschaften).
   ============================================================ */
.ok-person-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ok-grid-gap); }
.ok-person-card { background: #fff; border: 1px solid #e5e9f0; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.ok-person-photo {
  aspect-ratio: 4 / 3; background: var(--wave-50); display: flex; align-items: center; justify-content: center;
  color: var(--slate-500); font-size: .8rem; line-height: 1.35; text-align: center; padding: 1rem;
}
.ok-person-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ok-person-body { padding: var(--ok-card-pad); }
.ok-person-name { display: block; font-family: "Quicksand", sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--slate-900); }
.ok-person-role { display: block; font-size: .85rem; color: var(--sea-600); margin-top: .15rem; }
.ok-person-body p { margin: .6rem 0 0; color: var(--slate-700); font-size: .95rem; line-height: 1.5; }
@media (max-width: 900px) { .ok-person-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } }
@media (max-width: 560px) { .ok-person-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Spendenshop (/spendenshop/, Seite 23338) — AUSSCHLIESSLICH OPTIK
   ------------------------------------------------------------
   SCHUTZREGEL (CLAUDE.md Abschnitt 7): Die Spende-/Zahlungslogik
   und die FundraisingBox-Anbindung bleiben unberuehrt. Dieser
   Block aendert NUR Darstellung und liegt bewusst komplett hier
   im Child-Theme — an den Elementor-Daten der Shop-Seite und der
   beiden Loop-Templates wurde NICHTS geaendert. Entfernt man
   diesen Block, ist die Seite exakt wieder wie vorher.

   Ziel: gleiche Anmutung wie die uebrigen Relaunch-Seiten
   (Referenzmessung an /vor-ort/).
   Element-IDs: Seite 23338; Loop-Templates 23434 (Produkt)
   und 23880 (Patenschaft).
   ============================================================ */

/* --- 1) Inhaltsbreite: 1340px -> 1200px wie alle anderen Seiten ---
   Der Shop lief als einzige Seite auf der Elementor-Standardbreite
   und wirkte dadurch randlos/breiter als der Rest.
   Das Innen-Padding sorgt dafuer, dass der Textbeginn exakt auf
   derselben Kante liegt wie auf den uebrigen Seiten (gemessen an
   /vor-ort/: 144px bei 1440px Viewport). */
.elementor-23338 > .e-con > .e-con-inner {
  max-width: var(--ok-wrap-max);
  padding-inline: var(--ok-wrap-pad-x);
}

/* --- 2) Seitenkopf ---
   Das alte Foto-Band (Container 88b092c: Headerbild_spendenshop.webp
   mit 80% deckendem Farb-Overlay und eigenem h1 "Spendenshop") ist
   auf Wunsch entfernt worden — die uebrigen Relaunch-Seiten haben
   kein solches Band. Die Seite beginnt jetzt wie alle anderen mit
   Eyebrow + h1 + Intro.

   Der erste Sektionstitel ist dabei von h2 zu h1 geworden (sonst
   haette die Seite gar keine h1 mehr). Damit erbt er den globalen
   h1-Stil des Elementor-Kits — und der ist Altbestand: Lato in
   Versalien. Deshalb hier zurueck auf die Relaunch-H1 (Quicksand,
   gemischte Schreibweise). Das Kit gewinnt per Spezifitaet gegen
   Klassenregeln, daher !important. */
.elementor-23338 .elementor-element-5f018c5 .elementor-heading-title {
  font-family: "Quicksand", sans-serif !important;
  font-weight: 700 !important;
  text-transform: none !important;
  font-size: clamp(2rem, 4vw, 3rem) !important;
  line-height: 1.15 !important;
}

/* --- 3) Sektionskoepfe: gestapelt statt zweispaltig ---
   Bisher: Ueberschrift links, Intro rechts auf 1340px Breite.
   Relaunch-Muster: Eyebrow -> Titel -> Intro untereinander,
   Intro auf Lesebreite. Rein per Flex-Richtung, kein Umbau. */
.elementor-23338 .elementor-element-68b9e3e,
.elementor-23338 .elementor-element-e0c7b2e,
.elementor-23338 .elementor-element-2be6a36 {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
/* linke Spalte (Eyebrow + Titel) */
.elementor-23338 .elementor-element-cc2e488,
.elementor-23338 .elementor-element-890f9f9,
.elementor-23338 .elementor-element-01cb221,
/* rechte Spalte (Intro) */
.elementor-23338 .elementor-element-ddced27,
.elementor-23338 .elementor-element-1e78c4b,
.elementor-23338 .elementor-element-ab42f0f {
  width: 100%;
  max-width: var(--ok-read-max);
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.elementor-23338 .elementor-element-ddced27,
.elementor-23338 .elementor-element-1e78c4b,
.elementor-23338 .elementor-element-ab42f0f {
  margin-top: var(--ok-head-intro-gap);
}

/* --- 4) Eyebrow-Labels ("Spendenshop", "Jahrespatenschaften", "FAQs")
   Bisher Lato 18px fett in Textfarbe, also optisch eine zweite
   Ueberschrift. Neu: Relaunch-Eyebrow (Nunito, Versalien, sea-600). */
.elementor-23338 .elementor-element-3dea251 .elementor-heading-title,
.elementor-23338 .elementor-element-f01c033 .elementor-heading-title,
.elementor-23338 .elementor-element-4ede3ac .elementor-heading-title {
  font-family: "Nunito", sans-serif !important;
  font-size: .8rem !important;
  font-weight: 700 !important;
  color: var(--sea-600) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--ls-eyebrow) !important;
  line-height: 1.4 !important;
}

/* --- 5) Sektionstitel auf die dunkle Ueberschriftfarbe wie sonst --- */
.elementor-23338 .elementor-element-5f018c5 .elementor-heading-title,
.elementor-23338 .elementor-element-b76c819 .elementor-heading-title,
.elementor-23338 .elementor-element-9e71aba .elementor-heading-title {
  color: var(--slate-900) !important;
  margin-top: var(--ok-head-eyebrow-gap);
}

/* --- 6) Produkt- und Patenschaftskarten ---
   Bisher: transparent, 1px Coral-Rahmen, eckig, ohne Schatten.
   Neu: weisse Karte, 20px Radius, weicher Schatten, Hover-Lift —
   identisch zu den Karten auf /vor-ort/. */
.elementor-element-7f4a042.e-con,
.elementor-element-b3aaa6e.e-con {
  background-color: #fff !important;
  border: 0 !important;
  border-radius: 20px !important;
  box-shadow: rgba(71, 72, 86, .18) 0 10px 30px -12px;
  padding: var(--ok-card-pad) !important;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.elementor-element-7f4a042.e-con:hover,
.elementor-element-b3aaa6e.e-con:hover {
  transform: translateY(-3px);
  box-shadow: rgba(71, 72, 86, .24) 0 16px 36px -14px;
}
@media (prefers-reduced-motion: reduce) {
  .elementor-element-7f4a042.e-con,
  .elementor-element-b3aaa6e.e-con { transition: none; }
  .elementor-element-7f4a042.e-con:hover,
  .elementor-element-b3aaa6e.e-con:hover { transform: none; }
}

/* Bildflaeche: ruhiger Rahmen, damit fehlende/ladende Bilder
   nicht als kaputter Kasten erscheinen. */
.elementor-element-332aa84.e-con,
.elementor-element-88ea39d.e-con {
  background-color: var(--wave-50);
  border-radius: 12px;
  overflow: hidden;
}

/* Kartentitel: 28px war groesser als manche Sektionsueberschrift.
   Neu: Kartengroesse, dunkle Ueberschriftfarbe statt Linkblau. */
.elementor-element-3054a68 .elementor-heading-title,
.elementor-element-6d56c43 .elementor-heading-title {
  font-size: 1.35rem !important;
  line-height: 1.3 !important;
  color: var(--slate-900) !important;
}

/* --- 7) "Mehr erfahren"-Buttons ---
   Coral-500 bleibt als Flaeche (Spendenkontext — genau hier ist die
   Markenfarbe richtig) und wird nur in die Pill-Form gebracht.

   Schriftfarbe slate-900 statt slate-700: gemessene Kontrastwerte
   auf Coral-500 sind slate-900 5,24:1 (WCAG AA bestanden),
   slate-700 3,45:1 und Weiss 2,61:1. Weisse Schrift waere hier
   also die schlechteste Variante, obwohl sie "kraeftiger" wirkt.

   margin-top:auto setzt die Buttons aller Karten einer Reihe auf
   dieselbe Grundlinie, unabhaengig von der Textlaenge. */
.elementor-element-353c66e,
.elementor-element-26b501b {
  margin-top: auto;
}
.elementor-element-353c66e .elementor-button,
.elementor-element-26b501b .elementor-button {
  display: inline-flex !important;
  width: auto !important;
  color: var(--slate-900) !important;
  border-radius: var(--radius-pill, 999px) !important;
  padding: .8rem 1.6rem !important;
  font-size: .95rem !important;
}

/* --- 8) Karten liefen aus dem Bildschirm (alle Breakpoints) ---
   Bestandsfehler, nicht durch den Relaunch entstanden. Gemessen
   vorher: bei 1440px Fenster war das Dokument 1586px breit (die
   dritte Karte rechts angeschnitten), bei 390px 474px breit.

   Ursache ist subtil: Elementor stellt per `elementor-grid-*`
   voellig korrekt auf `repeat(n, 1fr)` um. `1fr` ist aber die
   Kurzform von `minmax(auto, 1fr)`, und dieses `auto`-Minimum darf
   so breit werden wie der Mindestinhalt der Karte (~460px). Die
   Spalten werden dadurch zusammen breiter als ihr Container.
   `minmax(0, 1fr)` setzt das Minimum auf 0 und beendet das.

   Behoben wird die Ursache am Grid-Item, nicht das Symptom an der
   Spaltendefinition: `min-width: 0` hebt genau dieses automatische
   Mindestmass auf. Die Spaltenzahl je Breakpoint bleibt dadurch
   vollstaendig bei Elementor (3 / Tablet 2 / Mobil 1) — Marina kann
   sie im Widget aendern, ohne dass diese Regel im Weg steht. */
.elementor-23338 .e-loop-item {
  min-width: 0 !important;
}
.elementor-element-7f4a042.e-con,
.elementor-element-b3aaa6e.e-con {
  max-width: 100% !important;
}

/* ============================================================
   Produkt- und Patenschaftsseiten (Einzelansicht) — NUR LESBARKEIT
   ------------------------------------------------------------
   Betrifft die Seiten unter /spendenshop/spendenprodukt/… und
   /patenschaft/… (Elementor-Single-Templates).

   SCHUTZREGEL: Hier haengt die Warenkorb-/FundraisingBox-Mechanik
   an den Klassen `pate_werden_button`, `einpacken_button`,
   `product_increment` und `product_decrement`. Diese Klassen sind
   NUR Ziel von Farbregeln — keine Umbenennung, kein Umbau, keine
   Aenderung an Verhalten oder Verlinkung.

   Scope `.elementor-location-single` laesst Header und Footer
   bewusst unberuehrt.

   Gemessene Kontraste vorher:
     "Patenschaft übernehmen" / "Einpacken"  slate-700 auf Coral  3,45:1
     Mengen-Buttons "-" und "+"              slate-700 auf slate-700  1,00:1
   Ein Kontrast von 1,00:1 heisst: Schrift und Flaeche sind exakt
   dieselbe Farbe, die Zeichen waren unsichtbar.
   ============================================================ */

/* Standard fuer Buttons im Inhaltsbereich: dunkle Schrift.
   Auf Coral-500 ergibt slate-900 5,24:1 und besteht damit WCAG AA
   (Weiss laege bei 2,61:1, slate-700 bei 3,45:1 — beide zu wenig). */
.elementor-location-single .elementor-button {
  color: var(--slate-900) !important;
}

/* Ausnahmen: Buttons auf dunkler Flaeche brauchen helle Schrift.
   Die Mengen-Buttons stehen auf slate-700, der Warenkorb-Zaehler
   (.cartInfo) auf nahezu Schwarz. Ohne diese Ausnahmen wuerde die
   dunkle Standardfarbe oben sie unlesbar machen — beim Zaehler war
   genau das nach dem ersten Versuch der Fall (1,38:1). */
.elementor-location-single .product_decrement .elementor-button,
.elementor-location-single .product_increment .elementor-button,
.elementor-location-single .cartInfo .elementor-button {
  color: #fff !important;
}
.elementor-location-single .product_decrement .elementor-button,
.elementor-location-single .product_increment .elementor-button {
  border-radius: 10px !important;   /* "-" hatte 10px, "+" 0px — jetzt gleich */
}

/* Das Mengenfeld zwischen den beiden Buttons stand in sea-600 auf
   slate-700 = 1,76:1. Die eingegebene Stueckzahl war damit praktisch
   nicht zu erkennen. Weiss ergibt hier 9,12:1.
   Nur Schriftfarbe — Feldtyp, Name und Verhalten bleiben unberuehrt. */
.elementor-location-single input.product_quantity {
  color: #fff !important;
}

/* Haupt-CTAs in Pill-Form, konsistent zu den Karten im Spendenshop. */
.elementor-location-single .pate_werden_button .elementor-button,
.elementor-location-single .einpacken_button .elementor-button {
  border-radius: var(--radius-pill, 999px) !important;
}

/* --- Hover-Zustand der Spenden-Buttons -------------------------
   Beim Ueberfahren wechselt die Flaeche laut Elementor-Kit auf
   `secondary` (sea-600 #2F72A8), also von hell-coral auf dunkelblau.
   Die Schriftfarbe blieb dabei dunkel und der Button war im Hover
   nicht mehr lesbar: slate-900 auf sea-600 ergibt 2,67:1, die
   urspruengliche Kit-Vorgabe slate-700 sogar nur 1,76:1.

   Bewusst wird NUR die Schriftfarbe gesetzt, nicht die Flaeche —
   der Farbwechsel ist gewollte Gestaltung und bleibt erhalten.
   Weiss auf sea-600 ergibt 5,13:1 und besteht WCAG AA.
   Geprueft: alle Hover-Flaechen im Inhaltsbereich loesen sich zu
   `secondary` auf, es gibt dort keinen hellen Hover-Grund. */
.elementor-element-353c66e .elementor-button:hover,
.elementor-element-353c66e .elementor-button:focus,
.elementor-element-26b501b .elementor-button:hover,
.elementor-element-26b501b .elementor-button:focus,
.elementor-location-single .elementor-button:hover,
.elementor-location-single .elementor-button:focus {
  color: #fff !important;
}

/* ============================================================
   "Was wir tun" (/was-wir-tun/, Seite 25824) — Angleichung an die
   Projektseiten (/plastikrebell/, /umweltbildung/, /swopshop/)
   ------------------------------------------------------------
   Dies ist der weiter oben vermerkte strukturelle Nachzug fuer die
   frueh gebauten Seiten. Die Seite ist mit nativen Elementor-Widgets
   gebaut, die Projektseiten mit je einem HTML-Block pro Sektion. Der
   native Aufbau bleibt bewusst erhalten — er ist fuer Marina im
   Editor deutlich besser zu pflegen. Angeglichen wird die Optik.

   Gemessener Ausgangszustand (1440px Viewport):
     Kopf-Sektion       Innenbreite 760, Text bei x=144  (richtig)
     S2 / S4 / S5       Innenbreite 760 ZENTRIERT, Text bei x=340
     S3 / S6 / S7 / S8  Innenbreite 1340, Text bei x=50 bis 78
   Also vier Geometrien auf einer Seite. Auf /umweltbildung/ steht
   jedes strukturelle Element auf x=144.

   Warum ID-gescoped: Die Container tragen in den Daten die Klassen
   `ok-secpad ok-section-head`, Elementor rendert _css_classes auf
   Containern aber nicht — im DOM steht keine davon. Deshalb hat
   `.ok-section-head` hier nie gegriffen.
   ============================================================ */

/* --- 1) Eine Geometrie fuer alle Sektionen ---
   1200px Inhaltsbreite mit 24px Innenabstand = Textkante bei 144px,
   identisch zu allen anderen Relaunch-Seiten. */
/* Die Inhaltsbreite selbst steht jetzt in den Elementor-Daten (1200px
   auf allen acht Sektionen) — vier davon standen auf 760 und wurden
   dadurch mittig gesetzt statt linksbuendig. Hier nur noch der
   seitliche Innenabstand, der die Textkante auf 144px bringt. */
.elementor-25824 > .e-con > .e-con-inner {
  padding-inline: var(--ok-wrap-pad-x) !important;
}
/* Die farbigen Sektionen brachten zusaetzlich 64px bzw. 44px
   Seitenpolsterung mit, die den Text weiter nach innen schob. */
.elementor-25824 .elementor-element-da72377,
.elementor-25824 .elementor-element-95c5001 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Fliesstext und Ueberschriften auf Lesebreite — linksbuendig in der
   Spalte, nicht zentriert in der Seite.
   WICHTIG: nicht am Widget selbst begrenzen. Auf `.elementor-widget`
   gilt `max-width: 100%`, eine Begrenzung dort bleibt wirkungslos
   (derselbe Stolperstein wie beim Spendenshop). Deshalb am inneren
   Element. */
.elementor-25824 .elementor-widget-heading .elementor-heading-title,
.elementor-25824 .elementor-widget-text-editor .elementor-widget-container { max-width: var(--ok-read-max); }
/* Ausnahme: Karten- und Zahlenspalten behalten ihre Spaltenbreite */
.elementor-25824 .elementor-element-f10fff8 .elementor-heading-title,
.elementor-25824 .elementor-element-f10fff8 .elementor-widget-container,
.elementor-25824 .elementor-element-59f3dbe .elementor-heading-title,
.elementor-25824 .elementor-element-59f3dbe .elementor-widget-container { max-width: none; }
/* Button-Zeile stand zentriert (erster Button bei x=480) */
.elementor-25824 .elementor-element-46011cb > .e-con-inner { justify-content: flex-start; }

/* --- 2) Typografie auf die Relaunch-Werte ---
   Die H1 lief auf Lato 50px in slate-700 (Kontrast 8,02), waehrend die
   Projektseiten Quicksand 48px in slate-900 nutzen (12,16). Gleiche
   Altlast wie im Spendenshop; das Kit gewinnt per Spezifitaet, daher
   !important. */
.elementor-25824 .elementor-element-2aabd51 .elementor-heading-title {
  font-family: "Quicksand", sans-serif !important;
  font-weight: 600 !important;
  font-size: clamp(2rem, 5vw, 3rem) !important;
  line-height: 1.15 !important;
  color: var(--slate-900) !important;
  text-transform: none !important;
}
/* Sektionsueberschriften: 40px -> 35,2px wie auf den Projektseiten,
   plus der dort ueblliche Abstand nach unten. */
.elementor-25824 .elementor-widget-heading .elementor-heading-title:is(h2) {
  font-size: clamp(1.6rem, 4vw, 2.2rem) !important;
  color: var(--slate-900) !important;
  margin-bottom: var(--ok-head-intro-gap);
}
/* Karten-Eyebrows (in den Daten von h2 auf div gestellt) */
.elementor-25824 .elementor-element-f10fff8 .ok-eyebrow .elementor-heading-title {
  font-size: .8rem !important;
  font-weight: 700 !important;
  color: var(--sea-600) !important;
}

/* --- 3) Dunkle Sektion: war praktisch unlesbar ---
   Ueberschrift und Text standen in slate-700 auf slate-900:
   Kontrast 1,52:1. Auf /umweltbildung/ ist dieselbe Sektionsart
   weiss auf slate-700 mit 9,02:1.

   ACHTUNG Spezifitaet: Die Regel unter Punkt 2 faerbt alle h2 dunkel
   und hat mit `:is(h2)` die Spezifitaet (0,3,1). Eine Regel mit nur
   drei Klassen (0,3,0) verliert dagegen trotz !important — der erste
   Versuch hier hat die Ueberschrift dadurch exakt in Hintergrundfarbe
   gesetzt (Kontrast 1,00). Deshalb hier vier Klassen. */
.elementor-25824 .elementor-element-da72377 .elementor-widget-heading .elementor-heading-title { color: #fff !important; }
.elementor-25824 .elementor-element-da72377 .elementor-widget-text-editor,
.elementor-25824 .elementor-element-da72377 .elementor-widget-text-editor p { color: #e6e9f2 !important; }

/* --- 4) Karten wie auf den Projektseiten ---
   Waren flaechig slate-50 ohne Radius und ohne Schatten. Die Karten
   der Projektseiten (.ok-augenhoehe-card) sind weiss, 20px Radius,
   weicher Schatten. */
.elementor-25824 .elementor-element-a010f29,
.elementor-25824 .elementor-element-3efa08c,
.elementor-25824 .elementor-element-0b5dc3b {
  background-color: #fff !important;
  border-radius: 20px;
  box-shadow: 0 10px 30px -12px rgba(71, 72, 86, .18);
  padding: var(--ok-card-pad) !important;   /* war 28px, Referenz 24px */
  gap: .8rem !important;                     /* war 20px, Referenz 12,8px */
}
/* Die drei Karten stiessen ohne Abstand aneinander (gemessen gap=0,
   Kartenkanten exakt buendig bei 528 und 912). Das Referenz-Raster auf
   /vor-ort/ nutzt 24px, also denselben Token wie alle anderen Raster. */
.elementor-25824 .elementor-element-f10fff8 > .e-con-inner {
  gap: var(--ok-grid-gap);
}

/* Kartentitel: liefen auf Lato 28px in slate-700. Referenz sind die
   Standort-Karten auf /vor-ort/: Quicksand 24px in slate-900. */
.elementor-25824 .elementor-element-f10fff8 h3.elementor-heading-title {
  font-family: "Quicksand", sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  color: var(--slate-900) !important;
}
/* Die drei Links standen auf verschiedenen Hoehen (gemessen 1115 /
   1142 / 1115), weil die Textlaengen unterschiedlich sind und der Link
   direkt auf den Absatz folgt. Der Textblock dehnt sich jetzt ueber die
   Resthoehe, der Link haengt an der Unterkante — dadurch stehen alle
   drei auf einer Linie, unabhaengig von der Textlaenge. */
.elementor-25824 .elementor-element-f10fff8 .elementor-widget-text-editor { flex: 1; }
.elementor-25824 .elementor-element-f10fff8 .elementor-widget-text-editor > .elementor-widget-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.elementor-25824 .elementor-element-f10fff8 .elementor-widget-text-editor p:last-child {
  margin-top: auto;
  margin-bottom: 0;
  padding-top: 1.2rem;
}

/* --- 5) Zahlen im Stat-Look ---
   Die Zahlen waren normale Headings in Nunito 48px. Auf den
   Projektseiten sind sie .ok-stat-value in Quicksand, sea-700.
   Ausserdem standen sie zentriert, waehrend die Seite sonst
   linksbuendig ist. */
.elementor-25824 .elementor-element-59f3dbe .elementor-heading-title {
  font-family: "Quicksand", sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(1.8rem, 4vw, 2.6rem) !important;
  line-height: 1.1 !important;
  color: var(--sea-700) !important;
  text-align: left !important;
}
.elementor-25824 .elementor-element-59f3dbe .elementor-widget-text-editor,
.elementor-25824 .elementor-element-59f3dbe .elementor-widget-text-editor p {
  font-size: .95rem;
  line-height: 1.4;
  color: var(--slate-500);
  text-align: left !important;
}

/* --- 6) Letzte zentrierte Reste linksbuendig ---
   Die Zahlen-Beschriftungen und der Wirkungs-Link standen zentriert,
   waehrend die ganze Seite sonst auf der 144er-Kante steht. */
.elementor-25824 .elementor-element-6511fba .elementor-widget-text-editor,
.elementor-25824 .elementor-element-6511fba .elementor-widget-text-editor p {
  text-align: left !important;
}

/* ============================================================
   H1 der drei frueh gebauten Seiten auf die Relaunch-Werte
   ------------------------------------------------------------
   /unsere-geschichte/, /transparenz/ und /faq/ liefen wie zuvor
   /was-wir-tun/ und der Spendenshop noch auf dem alten Kit-Stil:
   Lato 50px in slate-700 (Kontrast 8,02). Die Projektseiten nutzen
   Quicksand 48px in slate-900 (12,16).
   Das Kit gewinnt per Spezifitaet gegen Klassenregeln, daher
   !important — dieselbe Konstruktion wie auf /was-wir-tun/.
   ============================================================ */
.elementor-25825 .elementor-element-eb4e45a .elementor-heading-title,
.elementor-873   .elementor-element-62df664 .elementor-heading-title,
.elementor-722   .elementor-element-67c3cf3 .elementor-heading-title {
  font-family: "Quicksand", sans-serif !important;
  font-weight: 600 !important;
  font-size: clamp(2rem, 5vw, 3rem) !important;
  line-height: 1.15 !important;
  color: var(--slate-900) !important;
  text-transform: none !important;
}

/* Markierter Platzhalter an Stelle einer Kennzahl.
   Ohne eigene Regel rendert der Platzhaltertext in Kennzahlengroesse
   (--fs-h2) und sprengt die dreispaltige Kennzahlenreihe. Er soll als
   offener Punkt lesbar sein, nicht als Zahl wirken. */
.th-hero__meta .th-stat b.th-stat--platzhalter {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.35;
  max-width: 22ch;
  color: var(--amber-500, #e5a33d);
}

/* ============================================================
   Themenseite "Globale Gerechtigkeit" (/themen/globale-gerechtigkeit/,
   Seite 26000)
   ------------------------------------------------------------
   Anders als die beiden anderen Themenseiten ist diese aus NATIVEN
   Elementor-Widgets gebaut (Ueberschrift, Texteditor, Button), nicht
   aus einem HTML-Block. Farben und Flaechen kommen aus den Global
   Colors und sind im Editor sichtbar; hier steht nur Layout und das,
   was Elementor nicht kann.

   Container tragen ihre Klassen in den Daten, Elementor rendert sie
   dort aber nicht — deshalb durchgehend Element-IDs als Selektor.

   CORAL-DISZIPLIN: In diesem ganzen Block taucht Coral genau einmal
   auf, als Flaeche des Spendenblocks (#ggspende). Der Primaerbutton in
   Stufe 03 ist Sea.
   ============================================================ */

/* Textkante des Heros auf 144 wie die beiden anderen Themenseiten.
   Dort sitzt .th-wrap auf 1200px zentriert PLUS 24px padding-inline
   (=> 120 Rand + 24 = 144). Mein Hero-Container hatte 24px aussen,
   wodurch der Inhalt bei 120 begann. Padding daher an den Inner-
   Content, nicht an den Container. Betrifft nur den Hero; die uebrigen
   Sektionen stehen bereits bei 144. */
.elementor-26000 .elementor-element-gghero > .e-con-inner { padding-inline: var(--ok-wrap-pad-x); }

/* --- Hero auf Slate-700 --- */
.elementor-26000 .elementor-element-gghero .elementor-heading-title,
.elementor-26000 .elementor-element-gghero .elementor-widget-text-editor,
.elementor-26000 .elementor-element-gghero .elementor-widget-text-editor p { color: #fff; }
.elementor-26000 .elementor-element-ggeyeb .elementor-heading-title { color: var(--wave-300) !important; }
.elementor-26000 .elementor-element-ggh1 .elementor-heading-title {
  font-family: "Quicksand", sans-serif !important;
  font-weight: 600 !important;
  font-size: clamp(2rem, 4.6vw, 3rem) !important;
  line-height: 1.15 !important;
  text-transform: none !important;
  color: #fff !important;
  max-width: 22ch;
}
.elementor-26000 .elementor-element-gglead .elementor-widget-container { max-width: var(--ok-read-max); }
.elementor-26000 .elementor-element-gglead p { font-size: 1.15rem; line-height: 1.6; color: #e6e9f2; }

/* Kennzahlen im Hero */
.elementor-26000 .elementor-element-ggstats > .e-con-inner { gap: var(--ok-grid-gap-wide); align-items: flex-start; }
/* Ueber Element-IDs adressiert: Container-Klassen rendert Elementor nicht,
   im DOM stand keine einzige davon (gemessen 0x). */
.elementor-26000 .elementor-element-ggs1 .elementor-heading-title,
.elementor-26000 .elementor-element-ggs2 .elementor-heading-title,
.elementor-26000 .elementor-element-ggs3 .elementor-heading-title {
  font-family: "Quicksand", sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
  line-height: 1.1 !important;
  color: #fff !important;
  text-transform: none !important;
}
.elementor-26000 .elementor-element-ggs1 .elementor-widget-text-editor p,
.elementor-26000 .elementor-element-ggs2 .elementor-widget-text-editor p,
.elementor-26000 .elementor-element-ggs3 .elementor-widget-text-editor p {
  font-size: .9rem; line-height: 1.4; color: var(--wave-300); margin-top: .4rem; max-width: 26ch;
}

/* --- Sektionsueberschriften einheitlich --- */
.elementor-26000 .elementor-widget-heading .elementor-heading-title:is(h2, h3) {
  font-family: "Quicksand", sans-serif !important;
  text-transform: none !important;
  color: var(--slate-900);
}
.elementor-26000 .elementor-widget-heading .elementor-heading-title:is(h2) {
  font-size: clamp(1.6rem, 4vw, 2.2rem) !important;
  margin-bottom: var(--ok-head-intro-gap);
}
.elementor-26000 .elementor-widget-heading .elementor-heading-title:is(h3) {
  font-size: clamp(1.3rem, 2.6vw, 1.6rem) !important;
  margin-bottom: .8rem;
}
/* Fliesstext auf Lesebreite, Absatzabstand */
.elementor-26000 .elementor-widget-text-editor .elementor-widget-container { max-width: var(--ok-read-max); }
.elementor-26000 .elementor-widget-text-editor p { margin: 0 0 1rem; line-height: 1.65; }
.elementor-26000 .elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* --- Statement-Block Recycling (Wave-Flaeche) --- */
.elementor-26000 .elementor-element-ggstate {
  border-radius: var(--radius-lg, 20px);
  margin-top: 2rem;
  max-width: var(--ok-read-max);
}
.elementor-26000 .elementor-element-ggstate p { color: var(--slate-900); font-weight: 600; }

/* --- Kinderspur-Card (Variante aus dem Bestand) --- */
.elementor-26000 .elementor-element-ggkidsc {
  border: 2px dashed var(--wave-300);
  border-radius: var(--radius-lg, 20px);
  padding: var(--ok-card-pad);
  max-width: var(--ok-read-max);
  background: var(--wave-50);
}
.elementor-26000 .elementor-element-ggkidsb .ok-kids__badge {
  display: inline-block; font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--ls-eyebrow);
  color: var(--sea-700); background: #fff;
  padding: .35rem .8rem; border-radius: var(--radius-pill, 999px);
}

/* --- Zielbild im Selbstverortungs-Block --- */
.elementor-26000 .elementor-element-ggziel {
  border-left: 4px solid var(--sea-600);
  background: #fff;
  border-radius: 0 var(--radius-md, 16px) var(--radius-md, 16px) 0;
  margin-top: 1.5rem;
  max-width: var(--ok-read-max);
}
.elementor-26000 .elementor-element-ggziel p { color: var(--slate-900); }

/* --- Stimmen: bewusst als unfertig erkennbar --- */
.elementor-26000 .elementor-element-ggstimrow > .e-con-inner { gap: var(--ok-grid-gap); align-items: stretch; }
.elementor-26000 .elementor-element-ggst_a, .elementor-26000 .elementor-element-ggst_b,
.elementor-26000 .elementor-element-ggst_c {
  border: 2px dashed var(--slate-300, #c9ccd6);
  border-radius: var(--radius-lg, 20px);
  padding: var(--ok-card-pad);
  background: var(--slate-50, #f6f6f9);
}
.elementor-26000 .elementor-element-ggst_a .elementor-widget-container,
.elementor-26000 .elementor-element-ggst_b .elementor-widget-container,
.elementor-26000 .elementor-element-ggst_c .elementor-widget-container { max-width: none; }
.gg-stimme__avatar {
  display: block; width: 48px; height: 48px; border-radius: 50%;
  background: #fff; border: 2px dashed var(--slate-300, #c9ccd6); margin-bottom: .9rem;
}
.gg-stimme__zitat { font-style: italic; color: var(--accent-2, #5D5A6D); margin: 0 0 .9rem; }
.gg-stimme__person { margin: 0; font-size: .9rem; line-height: 1.35; }
.gg-stimme__person b { display: block; color: var(--slate-700); }
.gg-stimme__person span { color: var(--slate-500); }

/* --- Quellenverzeichnis, klein und ruhig --- */
.elementor-26000 .elementor-element-ggqh .elementor-heading-title {
  font-size: .8rem !important; font-weight: 700 !important;
  text-transform: uppercase; letter-spacing: var(--ls-eyebrow);
  color: var(--slate-600) !important; margin-bottom: .6rem;
}
.elementor-26000 .gg-quellen { margin: 0; padding-left: 1.2rem; }
.elementor-26000 .gg-quellen li { font-size: .85rem; line-height: 1.5; color: var(--slate-600); margin-bottom: .45rem; }
.elementor-26000 .gg-quellen a { color: var(--sea-600); }

/* --- Buttons Stufe 03 --- */
.elementor-26000 .elementor-element-ggbtnrow > .e-con-inner { gap: 1rem; align-items: center; }
/* Der globale Button-Stil des Kits legt einen 1px-Rahmen in Coral um jeden
   Button. Auf dem Sea-Button waere das ein Coral-Vorkommen ausserhalb des
   Spendenblocks, im Audit als solches aufgetaucht. Rahmen daher entfernt. */
.elementor-26000 .gg-btn-sea .elementor-button,
.elementor-26000 .gg-btn-weiss .elementor-button { border: 0 !important; }
.elementor-26000 .gg-btn-sea .elementor-button,
.elementor-26000 .gg-btn-weiss .elementor-button {
  border-radius: var(--radius-pill, 999px) !important;
  padding: .85rem 1.7rem !important;
  font-size: .95rem !important;
}

/* --- Spendenblock: die einzige Coral-Flaeche der Seite --- */
.elementor-26000 .elementor-element-ggspende .elementor-heading-title { color: var(--slate-900) !important; }
.elementor-26000 .elementor-element-ggspende .elementor-widget-text-editor p { color: var(--slate-900); }

/* --- Schmale Bildschirme --- */
@media (max-width: 900px) {
  .elementor-26000 .elementor-element-ggstats > .e-con-inner,
  .elementor-26000 .elementor-element-ggstimrow > .e-con-inner { flex-direction: column; }
  .elementor-26000 .elementor-element-ggs1, .elementor-26000 .elementor-element-ggs2,
  .elementor-26000 .elementor-element-ggs3, .elementor-26000 .elementor-element-ggst_a,
  .elementor-26000 .elementor-element-ggst_b, .elementor-26000 .elementor-element-ggst_c { width: 100% !important; }
}
@media (max-width: 560px) {
  .elementor-26000 .elementor-element-ggbtnrow > .e-con-inner { flex-direction: column; align-items: stretch; }
}

/* Presse-Auszeichnungen: drei gleichformatige Karten nebeneinander.
   Eigene Klasse, weil .ok-sponsoring-grid (2-spaltig) auch auf
   /kooperationen/ und /umweltbildung/ genutzt wird und dort 2 bleibt.
   Der Textlink sitzt unten, damit die Karten trotz unterschiedlicher
   Textlaenge buendig abschliessen (Karte ist flex-column). */
.ok-awards-grid { grid-template-columns: repeat(3, 1fr) !important; }
.ok-awards-grid .ok-modell-card > p:last-child { margin-top: auto; }
@media (max-width: 900px) { .ok-awards-grid { grid-template-columns: 1fr !important; } }

/* Kampagnenseite "Tueten toeten": Bildstrecke (Seite 528).
   Drei Slots nebeneinander, gleiche Hoehe ueber feste Aspect-Ratio;
   solange leer, gestrichelt markiert. Ersetzt Marina im Editor durch
   die echten Motive (Bild rein, Slot-Text raus). */
.ok-kampagne-bilder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.ok-kampagne-bild {
  aspect-ratio: 3 / 4; background: var(--wave-50);
  border: 2px dashed var(--wave-300); border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 1rem; color: var(--slate-500); font-size: .85rem;
}
.ok-kampagne-bild img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: block; }
@media (max-width: 640px) { .ok-kampagne-bilder { grid-template-columns: 1fr; } }