/**
 * @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. */
.bubble {
  position: absolute;
  width: clamp(140px, 14vw, 195px);
  height: auto;
  z-index: 1;
  pointer-events: none;
}

/* Überschrift-Variante (kleiner als h1, eigener Rhythmus). */
.h2 {
  font-size: clamp(1.4rem, 3.2vw, 2.2rem);
  margin: 0 0 1rem;
}

/* 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: 46ch;
}

/* 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: clamp(1.15rem, 2vw, 1.6rem);
  line-height: 1.5;
  max-width: 42ch;
}

/* Untere Kapsel: ragt nach oben über die Sektionsgrenze; der obere Teil wird
   weggeschnitten (das Gegenstück sitzt als .bubble-hero im Hero). */
.bubble-top {
  top: -95px;
  left: clamp(1rem, 4vw, 4rem);
  clip-path: inset(95px 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: clamp(1.1rem, 1.9vw, 1.55rem);
  line-height: 1.5;
  max-width: 54ch;
}

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

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

.wb-edge {
  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;
}

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

.wb-bottom {
  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);
}

.pb-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(43, 53, 232, 0.55);   /* --color-blue, halbtransparent */
}

.pb-layer:nth-child(1) { transform: translate(24px, -24px); }
.pb-layer:nth-child(2) { transform: none; }
.pb-layer:nth-child(3) { transform: translate(-18px, 16px); }

.panel-box p {
  position: relative;
  z-index: 1;                         /* Text über den Boxen → bleibt klar */
  margin: 0;
  font-size: clamp(1.2rem, 2.1vw, 1.7rem);
  line-height: 1.5;
}