/**
 * @file sections.css
 * Wiederkehrende Content-Sektionen der Landingpage (SN8 2026) und ihre
 * gemeinsamen Primitive (Sektions-Abstände, Überschriften-Varianten, Bubbles).
 *
 * Global geladen, da diese Blöcke editorisch in verschiedenen Regionen
 * platziert werden. Alle Regeln sind klassen-gescoped und greifen nur dort,
 * wo die jeweilige Klasse im Markup steht.
 *
 * Full-Bleed: Die Sektionen sollen über die volle Viewport-Breite laufen,
 * auch wenn der Block in einer auf --layout-width begrenzten Region (z. B.
 * content) steckt. Der margin-inline-Trick bricht aus dem zentrierten
 * Container aus; ein innerer .container begrenzt den Text wieder.
 */

/* ========================================================================
   Gemeinsame Primitive
   ======================================================================== */

/* green_bubble.svg – Doppel-Kapsel an Abschnittsgrenzen. Die Größe steht in
   --bubble-size, damit Versätze (bubble-hero/bubble-top) proportional davon
   abgeleitet werden können (SVG ist quadratisch → Höhe = Breite). */
.bubble {
  position: absolute;
  --bubble-size: clamp(140px, 14vw, 195px);
  width: var(--bubble-size);
  height: auto;
  z-index: 1;
  pointer-events: none;
}

/* Überschrift-Variante (kleiner als h1, eigener Rhythmus). Min bewusst über
   der Fließtext-Basis, damit Titel nie kleiner als der Text wirken. */
.h2 {
  font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3rem);
  margin: 0 0 1rem;
}

/* Dauerhafte „===="-Unterstreichung für Überschriften – Ersatz für die manuelle
   <p class="rule">====</p>-Zeile. inline-block lässt das Element auf Textbreite
   schrumpfen, sodass die Linie genau so lang ist wie der Text. Auf jeder
   Überschrift (h1–h3, .h2 …) einsetzbar. */
.underlined {
  display: inline-block;
  position: relative;
  padding-bottom: 1rem;
}

.underlined::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: var(--underline-equals);
}

/* Anaglyph / Blau-Grün-Split für Überschriften (blau links, grün rechts).
   Werte entsprechen --color-blue (#2b35e8) und --color-green (#2ee636). */
.aglyph {
  text-shadow:
    -0.045em 0 0 rgba(43, 53, 232, 0.9),
     0.045em 0 0 rgba(46, 230, 54, 0.9);
}

/* Einleitender, etwas breiterer Absatz. */
.lead{
  max-width: 50ch;
}

/* Kleine Überzeile in Versalien. */
.eyebrow {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.eyebrow.green {
  color: var(--color-green);
}

/* ASCII-Trennlinie („====") im Look des Prototyps. */
.rule {
  margin: 0 0 1.4rem;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: var(--color-green);
  user-select: none;
  overflow: hidden;
  white-space: nowrap;
}

.rule.ink {
  color: var(--color-text);
}

/* Gedämpfter Fließtext. */
.muted {
  color: var(--color-text-muted);
}

/* ========================================================================
   Sektion: Mint-Fläche (Basis für helle Abschnitte)
   ======================================================================== */
.sec-mint {
  /* Full-Bleed über die volle Viewport-Breite. */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-block: clamp(3rem, 8vw, 6rem);
  background: var(--color-mint);
  color: var(--color-text);
}

/* ========================================================================
   Sektion: Intro – größere Typo, Bubble an der oberen Kante
   ======================================================================== */
.intro {
  position: relative;
}

/* Halbtransparenter Mint-Schleier über dem OBEREN Teil der Bubble: über Mint
   unsichtbar, über dem Hero darüber lässt er die Bubble blass „durchscheinen". */
.intro::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: var(--color-mint);
  opacity: 0.72;
  z-index: 2;
  pointer-events: none;
}

/* Inhalt über dem Schleier. */
.intro .container {
  position: relative;
  z-index: 3;
}

.intro .h2 {
  font-size: clamp(2rem, 4.8vw, 3.4rem);
  margin-bottom: 1.4rem;
}

.intro .lead {
  font-size: var(--font-size-base);
  line-height: 1.5;
}

/* Untere Kapsel: ragt nach oben über die Sektionsgrenze; der obere Teil wird
   weggeschnitten (das Gegenstück sitzt als .bubble-hero im Hero). Versatz und
   Clip proportional zur Bubble-Größe – sonst kippt die Form mobil (wie zuvor
   bei .bubble-hero). */
.bubble-top {
  top: calc(var(--bubble-size) * -0.5);
  left: clamp(1rem, 4vw, 4rem);
  clip-path: inset(calc(var(--bubble-size) * 0.5) 0 0 0);
}

/* ========================================================================
   Sektion: Dunkler Wellen-Block (wavyblock_grey.svg)
   ========================================================================
   Solide dunkle Mitte (.wb-inner); oben und unten ragt je eine Wellen-Kante
   (.wb-edge) in die Nachbarbereiche. Die Kantenhöhe = Feature-Höhe der SVG
   (346 von 8000 Breite). */
.wavyblock {
  position: relative;
  z-index: 1;                 /* Kanten über die Nachbarbereiche legen */
  /* Full-Bleed über die volle Viewport-Breite. */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  color: var(--color-pure-white);
  --wb-edge: calc(346 / 8000 * 100vw);
}

.wavyblock .muted {
  color: #b8b8b8;             /* helles Grau auf dunklem Grund */
}

.wb-inner {
  background: #3a3a3a;        /* Füllfarbe der SVG */
  padding-block: clamp(3rem, 8vw, 6rem);
}

.wb-inner .lead {
  font-size: var(--font-size-base);
  line-height: 1.5;
}

.wb-inner .eyebrow {
  font-size: 1.8rem;
}

.wb-inner .rule {
  font-size: 1rem;
}

/* Kanten als Pseudo-Elemente (kein leeres <span> im HTML – das würde CKEditor
   beim Speichern entfernen). ::before = obere Kante, ::after = untere. */
.wavyblock::before,
.wavyblock::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--wb-edge);
  background-image: url("../images/wavyblock_grey.svg");
  background-repeat: no-repeat;
  background-size: 100% auto;
  pointer-events: none;
}

.wavyblock::before {
  top: calc(-1 * var(--wb-edge));
  background-position: top center;    /* ragt nach oben */
}

.wavyblock::after {
  top: 100%;
  background-position: bottom center; /* ragt nach unten */
}

/* ========================================================================
   Sektion: Panel (S/W-Bild + blaue „Geister"-Box)
   ========================================================================
   Drei leicht versetzte halbtransparente blaue Flächen decken sich in der
   Mitte (hinter dem Text) → dicht/lesbar, an den Rändern → „Geister"-Effekt. */
.panel {
  position: relative;
  overflow: hidden;
  /* Full-Bleed über die volle Viewport-Breite. */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  min-height: clamp(440px, 58vw, 760px);
  display: flex;
  align-items: center;
  padding-block: clamp(3rem, 8vw, 6rem);
  background: url("../images/panel.webp") center / cover no-repeat;
}

.panel-box {
  position: relative;
  max-width: 640px;
  margin-left: auto;                  /* rechts-betont wie im Entwurf */
  margin-right: clamp(1rem, 5vw, 5rem);
  padding: clamp(1.8rem, 3vw, 3rem);
  color: var(--color-pure-white);
  /* Mittlere (nicht versetzte) Lage = eigener Hintergrund der Box. */
  background: rgba(43, 53, 232, 0.55);   /* --color-blue, halbtransparent */
}

/* Zwei versetzte Lagen als Pseudo-Elemente (statt drei leerer <span>, die
   CKEditor entfernen würde). Wo sich alle drei decken → dicht/lesbar, an den
   versetzten Rändern → „Geister"-Effekt. */
.panel-box::before,
.panel-box::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(43, 53, 232, 0.55);
}

.panel-box::before { transform: translate(24px, -24px); }
.panel-box::after { transform: translate(-18px, 16px); }

.panel-box p {
  position: relative;
  z-index: 1;                         /* Text über den Boxen → bleibt klar */
  margin: 0;
  font-size: var(--font-size-base);
  line-height: 1.5;
}

/* ========================================================================
   Sektion: Vergangene Konferenzen (Linkliste)
   ========================================================================
   Ohne Prototyp-Vorlage, aber in der etablierten Bildsprache: Mono-Titel mit
   grüner "===="-Linie, Jahr als Mono-Label (_-Motiv) und Eventname als Link
   mit dem grünen "===="-Hover-Unterstrich der Navigation. */
.sec-events {
  /* Full-Bleed wie die übrigen Sektionen. */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-block: clamp(3rem, 8vw, 6rem);
}

.event-list {
  list-style: none;
  margin: var(--space-lg) 0 0;
  padding: 0;
  max-width: 100%;
}

.event-list__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--color-border);
}

.event-list__item:first-child {
  border-top: 1px solid var(--color-border);
}

/* Jahr als schmale Mono-Spalte. */
.event-list__year {
  flex: none;
  width: 5ch;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

.event-list__link {
  position: relative;
  text-decoration: none;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: clamp(1.4rem, 1rem + 1.2vw, 1.8rem);
  padding-bottom: 0.35rem;
  transition: color var(--transition-base);
}

.event-list__link:hover,
.event-list__link:focus-visible {
  color: var(--color-primary);
}

/* Grüner "====" Unterstrich bei hover/fokus – wie in der Navigation.
   Background-Pattern statt content:"===" → passt sich der Linkbreite an. */
.event-list__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: var(--underline-equals);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.event-list__link:hover::after,
.event-list__link:focus-visible::after {
  opacity: 1;
}

/* ========================================================================
   Sektion: Gefördert von (Förderer-Logos)
   ========================================================================
   Vier Logos in weißen Kästen (normalisiert transparente PNG/SVG und gibt den
   geforderten weißen Hintergrund). 2 Spalten mobil, 4 ab Tablet. */
.sec-funders {
  /* Full-Bleed wie die übrigen Sektionen. */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-bottom: clamp(3rem, 8vw, 6rem);
}

.funders {
  list-style: none;
  margin: var(--space-lg) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

@media (min-width: 760px) {
  .funders {
    grid-template-columns: repeat(3, 1fr);   /* 6 Logos = 2 saubere Reihen à 3 */
  }
}

/* Weißer Kasten je Logo. */
.funders__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 10rem;
  padding: var(--space-md);
  background: var(--color-pure-white);
  border-radius: var(--radius-md);
}

/* Logo füllt die ganze Kastenfläche (volle Breite × Logo-Höhe) und wird per
   object-fit:contain eingepasst – so wird jedes Logo maximal groß, egal welches
   Seitenverhältnis (breite Logos nutzen die Breite, hohe die Höhe). width/height
   sind fest gesetzt, damit auch die Initiative-Musik-SVG (nur viewBox, keine
   eigenen Maße) nicht als 0×0 rendert. */
.funders__item img {
  width: 100%;
  height: 7rem;
  object-fit: contain;
}

/* Variante für wenige/ein einzelnes Logo: zentriert, begrenzte Breite (statt
   im 3-Spalten-Raster links zu kleben). Genutzt z. B. für den Unterstützer-
   Block "Mit großartiger Unterstützung durch". */
.funders--single {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

/* Gleiche Boxgröße wie eine Zelle im Förderer-Raster: mobil 2-spaltig, ab
   760px 3-spaltig (gap = --space-md, identisch zum .funders-Grid). */
.funders--single .funders__item {
  flex: 0 0 calc((100% - var(--space-md)) / 2);
}

@media (min-width: 760px) {
  .funders--single .funders__item {
    flex: 0 0 calc((100% - 2 * var(--space-md)) / 3);
  }
}

/* ========================================================================
   Footer-Block (grau wie der Wavy-Block, Welle oben rechts)
   ========================================================================
   Eigene Klassen (sn8foot-…), um nicht mit dem Theme-Footer aus footer.css
   (.site-footer …) zu kollidieren. Die obere Welle nutzt dieselbe SVG wie der
   Wavy-Block (#3a3a3a) und ragt rechts nach oben. */
.sec-footer {
  /* Kantenhöhe identisch zu den Wavy-Block-Kanten (--wb-edge). */
  --fw-edge: calc(346 / 8000 * 100vw);
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  /* Platz schaffen, damit die nach oben ragende Welle nicht den Vorgänger
     überdeckt. */
  margin-top: var(--fw-edge);
  padding-block: clamp(3rem, 5vw, 6rem);
  background: #3a3a3a;        /* gleiche Füllfarbe wie der Wavy-Block */
  color: var(--color-pure-white);
}

/* Welle am oberen Rand. Identische SVG/Skala/Höhe wie die Wavy-Block-Oberkante
   (volle Breite), nur horizontal gespiegelt: die einzige Ausbuchtung der
   Oberkante sitzt im Original bei ~30 % (links); scaleX(-1) schiebt sie auf
   ~70 % → die Welle erscheint rechts, in derselben Größe wie die anderen. */
.sec-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--fw-edge));
  height: var(--fw-edge);
  background-image: url("../images/wavyblock_grey.svg");
  background-repeat: no-repeat;
  background-size: 100% auto;     /* volle Breite = gleiche Skala wie der Wavy-Block */
  background-position: top center;
  transform: scaleX(-1);
  pointer-events: none;
}

.sn8foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

.sn8foot__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.sn8foot__logo {
  display: inline-block;
  line-height: 0;
}

.sn8foot__logo img {
  height: 3rem;
  width: auto;
}

.sn8foot__copy {
  margin: 0;
  font-size: var(--font-size-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sn8foot__right {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: flex-start;
}

@media (min-width: 760px) {
  .sn8foot__right {
    align-items: flex-end;
  }
}

/* Footer-Links mit dem grünen "===="-Hover-Unterstrich (wie Navigation). */
.sn8foot__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
}

.sn8foot__nav a {
  position: relative;
  color: var(--color-pure-white);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--font-size-sm);
  padding-bottom: 0.3rem;
}

.sn8foot__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: var(--underline-equals);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.sn8foot__nav a:hover::after,
.sn8foot__nav a:focus-visible::after {
  opacity: 1;
}

/* Social-Icons (weiße SVGs). */
.sn8foot__social {
  display: flex;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sn8foot__social a {
  display: inline-flex;
  transition: opacity var(--transition-base);
}

.sn8foot__social a:hover,
.sn8foot__social a:focus-visible {
  opacity: 0.7;
}

.sn8foot__social img {
  width: 1.75rem;
  height: 1.75rem;
}