/* ============================================================
   STYLES — Uni Stuttgart Landingpage
   Verwendet Tokens aus tokens.css (separater Import)

   Inhaltsverzeichnis:
   1. Reset & Normalize
   2. Base Typography
   3. Layout Primitives (container, section)
   4. Reusable Components (button, marker-highlight, sticker, collage-img, paper-strip)
   5. Sticky Navigation
   6. Section 1 — Hero
   7. Section 2 — Stuttgart als Lebensgefühl
   8. Section 3 — Zahlen & Fakten
   9. Sticky CTA Bar
   10. Footer (placeholder)
   11. Utilities
   ============================================================ */

/* ============================================================
   0. ICON-SYSTEM (Lucide + Simple-Icons als SVG-Sprite)
   Sprite-Quelle: ../06-assets/icons/lucide-sprite.svg
   Verwendung: <svg class="icon"><use href="...#icon-name"/></svg>
   ============================================================ */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  flex-shrink: 0;
  /* Default: erbt Farbe vom Eltern-Element */
  color: currentColor;
}

.icon--xs { width: 14px; height: 14px; }
.icon--sm { width: 18px; height: 18px; }
.icon--md { width: 24px; height: 24px; }
.icon--lg { width: 32px; height: 32px; }
.icon--xl { width: 48px; height: 48px; }
.icon--2xl { width: 64px; height: 64px; }

/* ============================================================
   1. RESET & NORMALIZE
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Anker-Offset: beim Anspringen von #-Links (z.B. aus dem Menü) wird die
     Ziel-Überschrift nicht mehr von der sticky Navi überdeckt (Kunden-Feedback). */
  scroll-padding-top: 96px;
}

body {
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--color-anthracite);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Platz unten für Sticky CTA */
  padding-bottom: 80px;
}

img,
picture,
video,
svg {
  max-width: 100%;
  display: block;
}

button {
  font: inherit;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

input,
select,
textarea {
  font: inherit;
}

/* Fokus-States für Accessibility */
:focus-visible {
  outline: 3px solid var(--color-yellow-signal);
  outline-offset: 2px;
}

/* ============================================================
   2. BASE TYPOGRAPHY
   ============================================================ */
h1,
h2,
h3 {
  font-family: var(--font-headline);
  font-weight: 400; /* Permanent Marker hat nur Regular */
  line-height: var(--lh-headline);
  letter-spacing: 0;
}

h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
}

h2 {
  font-size: var(--fs-h2);
}

h3 {
  font-size: var(--fs-h3);
}

h4 {
  font-family: var(--font-subline);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
}

.subline {
  font-family: var(--font-subline);
  font-size: var(--fs-subline);
  line-height: var(--lh-base);
}

p {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
}

.caption {
  font-size: var(--fs-caption);
  line-height: var(--lh-base);
  letter-spacing: 0.02em;
}

/* ============================================================
   3. LAYOUT PRIMITIVES
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.section {
  padding-block: var(--space-xl);
  position: relative;
}

@media (min-width: 1024px) {
  .section {
    padding-block: var(--space-2xl);
  }
}

.section--brand {
  /* Mit BG-Verlauf-Texture vom Design-Team */
  background-image: var(--bg-image-brand);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--color-white);
}

/* Fallback ohne BG-Image */
.section--brand-fallback {
  background: var(--bg-gradient-brand);
  color: var(--color-white);
}

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

.section--gray {
  background-color: var(--color-gray-50);
}

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

/* ============================================================
   4. REUSABLE COMPONENTS
   ============================================================ */

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-family: var(--font-subline);
  font-size: var(--fs-button);
  font-weight: 900;
  line-height: 1;
  padding: 16px 32px;
  border-radius: var(--radius-sm);
  text-align: center;
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              background-color var(--duration-base) var(--ease-out);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.btn--primary {
  background-color: var(--color-yellow-signal);
  color: var(--color-anthracite);
  box-shadow: var(--shadow-button);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-button-hover);
}

.btn--secondary {
  background-color: var(--color-white);
  color: var(--color-anthracite);
  box-shadow: var(--shadow-button);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-button-hover);
}

.btn--ghost {
  background-color: transparent;
  color: var(--color-white);
  border: 2px solid rgba(255, 255, 255, 0.6);
  padding: 14px 30px;
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: var(--color-white);
}

.btn--lg {
  padding: 20px 40px;
  font-size: 20px;
}

/* ── Marker-Highlight (gelber Pinselstrich über Keywords) ─ */
/*
   Verwendung: <span class="marker">antreibt</span>
   Setzt einen gelben Pinselstrich-Hintergrund hinter das Wort.
*/
.marker {
  position: relative;
  display: inline-block;
  z-index: 1;
  white-space: nowrap;
  padding-inline: 0.1em;
}

.marker::before {
  content: "";
  position: absolute;
  inset: 0.15em -0.1em 0.05em -0.1em;
  background-image: url("../02-design-system/sticker-library/Designelement-Pinselstrich-Gelb-1200px.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: -1;
}

.marker--blue::before {
  background-image: url("../02-design-system/sticker-library/Designelement-Pinselstrich-Hellblau-1200px.png");
}

/* ── Sticker (frei platzierte Designelemente) ──────────── */
/*
   Verwendung: <img class="sticker sticker--star" src="..." alt="">
   Sticker werden absolut positioniert + zufällig leicht rotiert.
*/
.sticker {
  position: absolute;
  width: 80px;
  height: auto;
  pointer-events: none;
  user-select: none;
  z-index: 2;
}

@media (min-width: 1024px) {
  .sticker {
    width: 120px;
  }
}

/* ── Collage-Bild (ausgeschnitten + weißer Rand + Schatten) */
/*
   Verwendung: <div class="collage"><img src="..." alt=""></div>
   Wraps an image with white background padding + drop-shadow.
   Bilder kommen idealerweise als transparent PNG (bereits ausgeschnitten).
*/
.collage {
  display: inline-block;
  background-color: var(--color-white);
  padding: 6px;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.25));
  transform: rotate(-1deg);
}

.collage--rotate-right {
  transform: rotate(1.5deg);
}

.collage--no-rotate {
  transform: rotate(0);
}

.collage img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ── Paper-Strip (Headline-Container im Notizzettel-Look) ─ */
/*
   Platzhalter — finalisiert sobald Papier-Elemente verfügbar.
   Vorerst: weißer Background mit subtiler Rotation + Schatten,
   simuliert das Look & Feel.
*/
.paper-strip {
  display: inline-block;
  background-color: var(--color-white);
  color: var(--color-anthracite);
  padding: 16px 24px;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.3));
  transform: rotate(-1.5deg);
  position: relative;
}

.paper-strip h1,
.paper-strip h2,
.paper-strip h3 {
  color: var(--color-anthracite);
}

/* ── Tag (Sticker-Look-Label, z.B. NC, zulassungsfrei) ─── */
.tag {
  display: inline-block;
  padding: 4px 12px;
  font-family: var(--font-subline);
  font-size: var(--fs-caption);
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
}

.tag--nc {
  background-color: var(--color-warning);
  color: var(--color-white);
}

.tag--free {
  background-color: var(--color-success);
  color: var(--color-white);
}

.tag--countdown {
  background-color: var(--color-yellow-signal);
  color: var(--color-anthracite);
  font-size: var(--fs-body-sm);
  padding: 8px 16px;
}

/* ============================================================
   5. STICKY NAVIGATION
   ============================================================ */
.nav-sticky {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky-nav);
  background-color: rgba(255, 255, 255, 0);
  transition: background-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

.nav-sticky.is-scrolled {
  background-color: var(--color-white);
  box-shadow: var(--shadow-nav);
}

.nav-sticky__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0;
  gap: var(--space-md);
  transition: padding var(--duration-base) var(--ease-out);
}

.nav-sticky.is-scrolled .nav-sticky__inner {
  padding: 12px 0;
}

.nav-sticky__logo {
  flex-shrink: 0;
  height: 36px;
  width: auto;
  /* currentColor steuert Logo-Farbe */
  color: var(--color-white); /* default auf Brand-BG (Hero) */
}

.nav-sticky.is-scrolled .nav-sticky__logo {
  color: var(--color-anthracite);
}

.nav-sticky__list {
  display: none; /* Mobile: hidden, Hamburger fehlt noch */
  gap: var(--space-md);
  align-items: center;
}

@media (min-width: 768px) {
  .nav-sticky__list {
    display: flex;
  }
}

.nav-sticky__list a {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: 700;
  color: var(--color-white);
  padding: 8px 4px;
  border-bottom: 2px solid transparent;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.nav-sticky.is-scrolled .nav-sticky__list a {
  color: var(--color-anthracite);
}

.nav-sticky__list a:hover {
  border-color: var(--color-yellow-signal);
}

.nav-sticky__hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  background: none;
  border: 0;
  cursor: pointer;
  /* Default über Hero/Brand-BG: weiß. Auf Scroll: anthrazit. */
  color: var(--color-white);
}

.nav-sticky.is-scrolled .nav-sticky__hamburger {
  color: var(--color-anthracite);
}

.nav-sticky__hamburger span {
  display: block;
  width: 24px;
  height: 3px;
  border-radius: 2px;
  background-color: currentColor;
  transition: transform var(--duration-base) var(--ease-out),
              opacity var(--duration-fast) var(--ease-out);
}

/* Hamburger → X im geöffneten Zustand */
.nav-sticky__hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.nav-sticky__hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-sticky__hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

@media (min-width: 768px) {
  .nav-sticky__hamburger {
    display: none;
  }
}

/* Mobile-Menü offen: Navi wird solide weiß, Logo + Hamburger/X dunkel –
   sonst sind weißes Logo & weißes X ganz oben (transparente Navi) auf dem
   weißen Menü-Panel unsichtbar (Kunden-Feedback). */
.nav-sticky.is-menu-open {
  background-color: var(--color-white);
  box-shadow: var(--shadow-nav);
}
.nav-sticky.is-menu-open .nav-sticky__logo,
.nav-sticky.is-menu-open .nav-sticky__hamburger {
  color: var(--color-anthracite);
}

/* ── Mobile-Menü-Panel ─────────────────────────────────────── */
.nav-mobile {
  background-color: var(--color-white);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: var(--shadow-nav);
  padding: var(--space-md) 0 var(--space-lg);
}

.nav-mobile[hidden] {
  display: none;
}

.nav-mobile .nav-mobile__list {
  list-style: none;
  margin: 0;
  padding: 0 var(--container-padding, 20px);
  display: flex;
  flex-direction: column;
}

.nav-mobile__list li {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.nav-mobile__list a {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--color-anthracite);
  padding: 16px 4px;
}

.nav-mobile__list a:hover {
  color: var(--color-blue-uni, var(--color-anthracite));
}

.nav-mobile__cta {
  margin: var(--space-md) var(--container-padding, 20px) 0;
  display: block;
  text-align: center;
}

@media (min-width: 768px) {
  .nav-mobile {
    display: none;
  }
}

/* ============================================================
   6. SECTION 1 — HERO (Iteration 2: Scrapbook)
   ============================================================ */
.hero {
  min-height: 100vh;
  /* nav ist sticky → Hero läuft hinter ihr durch.
     Wert = Nav-Höhe im transparenten Zustand (46px Logo + 2×22px Padding) */
  margin-top: -90px;
  padding-top: 90px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__stage {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding: var(--space-xl) var(--container-padding);
  /* Min-height damit Stage Atmen kann */
  min-height: calc(100vh - 90px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
}

/* Headline auf großem gerissenem Papier (CSS-Fake bis echtes Asset da) */
.hero__paper {
  position: relative;
  z-index: 5;
  filter: drop-shadow(0 14px 32px rgba(0, 0, 0, 0.4));
  transform: rotate(-1.5deg);
  max-width: 95%;
}

.hero__paper-inner {
  background-color: #FAFAF8;
  background-image:
    radial-gradient(ellipse at 30% 20%, rgba(0, 0, 0, 0.02) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(0, 0, 0, 0.025) 0%, transparent 50%);
  padding: clamp(24px, 5vw, 56px) clamp(28px, 7vw, 90px);
  /* Gerissene Papier-Kante per clip-path (irreguläre Punkte) */
  clip-path: polygon(
    0% 6%, 3% 1%, 9% 4%, 16% 0%, 24% 3%, 32% 1%, 40% 4%, 48% 0%, 56% 3%, 64% 1%, 72% 4%, 80% 0%, 88% 3%, 95% 1%, 100% 5%,
    99% 18%, 100% 35%, 98% 52%, 100% 68%, 99% 82%, 100% 94%,
    96% 99%, 88% 96%, 78% 100%, 68% 97%, 58% 100%, 48% 96%, 38% 100%, 28% 97%, 18% 100%, 10% 96%, 3% 99%, 0% 92%,
    1% 78%, 0% 62%, 2% 45%, 0% 28%, 1% 14%
  );
}

.hero__paper h1 {
  color: var(--color-anthracite);
  text-transform: uppercase;
  font-size: clamp(40px, 9vw, 110px);
  line-height: 0.95;
  text-align: center;
  letter-spacing: -0.01em;
}

.hero__paper h1 .marker {
  /* Im Papier ist der Marker noch dominanter */
  padding-inline: 0.15em;
}

.hero__paper h1 .marker::before {
  inset: 0.05em -0.15em -0.05em -0.15em;
  /* Marker drüber statt drunter — überlappt minimal */
  z-index: -1;
}

/* Subline UNTER dem Paper-Rip */
.hero__subline {
  position: relative;
  z-index: 5;
  color: var(--color-white);
  text-align: center;
  font-size: clamp(16px, 2.2vw, 22px);
  max-width: 600px;
  font-family: var(--font-subline);
  line-height: 1.4;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Big CTA */
.hero__cta {
  position: relative;
  z-index: 5;
  font-size: clamp(18px, 2.5vw, 22px);
  padding: 20px 44px;
}

/* Countdown als floating Sticker-Tag (nicht inline) */
.hero__countdown-sticker {
  position: absolute;
  z-index: 6;
  background-color: var(--color-anthracite);
  color: var(--color-white);
  padding: 10px 18px;
  font-family: var(--font-subline);
  font-weight: 900;
  font-size: var(--fs-body-sm);
  transform: rotate(3deg);
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
  /* Position via individuellen Klassen */
}

.hero__countdown-sticker--top {
  top: 10%;
  right: 4%;
  display: none;
}

@media (min-width: 768px) {
  .hero__countdown-sticker--top {
    display: block;
  }
}

.hero__countdown-sticker--inline {
  position: relative;
  display: inline-block;
  z-index: 5;
  margin-top: var(--space-sm);
}

@media (min-width: 768px) {
  .hero__countdown-sticker--inline {
    display: none;
  }
}

.hero__countdown-sticker .tag--days {
  background-color: var(--color-yellow-signal);
  color: var(--color-anthracite);
  padding: 2px 8px;
  margin-left: 6px;
  font-family: var(--font-body);
}

/* Cut-out-Personen-/Gebäude-Placeholder */
.cutout {
  position: absolute;
  background-color: var(--color-white);
  padding: 6px;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.35));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-subline);
  font-size: var(--fs-caption);
  color: var(--color-gray-500);
  text-align: center;
  z-index: 3;
}

.cutout__inner {
  background-color: var(--color-gray-200);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xs);
}

/* Cut-out 1: Fernsehturm vertikal, oben links */
.hero__cutout--tower {
  top: 4%;
  left: 2%;
  width: clamp(80px, 14vw, 200px);
  aspect-ratio: 1 / 2.5;
  transform: rotate(-3deg);
}

/* Cut-out 2: Studierende oben rechts */
.hero__cutout--student-tr {
  top: 6%;
  right: 6%;
  width: clamp(100px, 16vw, 220px);
  aspect-ratio: 1 / 1.2;
  transform: rotate(2deg);
}

/* Mobile: Frau sitzt in der oberen rechten Ecke HINTER dem Countdown
   (z-index 4 < Countdown 7), damit das funktional wichtige Bewerbungsschluss-
   Datum nie vom Deko-Foto verdeckt wird. Sie ragt oben aus der Ecke heraus und
   wird vom gelben Tag sauber überlappt (Scrapbook-Look). */
@media (max-width: 767px) {
  .hero__cutout--student-tr {
    top: 1%;
    right: 1%;
    width: clamp(80px, 20vw, 124px);
    z-index: 4;
  }
}

/* Cut-out 3: Gebäude unten rechts */
.hero__cutout--building {
  bottom: 8%;
  right: 0.5%;
  /* Seitenverhältnis exakt wie das Bild (349x322 ≈ 1.08/1) → kein
     Letterbox-Streifen mehr, Credit sitzt bündig an der unteren Bildkante.
     Breite so gewählt, dass die sichtbare Bildgröße ~gleich bleibt. */
  width: clamp(150px, 20vw, 300px);
  aspect-ratio: 349 / 322;
  transform: rotate(2deg);
  display: none;
}

@media (min-width: 1024px) {
  .hero__cutout--building {
    display: flex;
  }
}

/* Cut-out 4: Studierende unten links */
.hero__cutout--student-bl {
  bottom: 6%;
  left: 4%;
  width: clamp(100px, 15vw, 220px);
  aspect-ratio: 1 / 1.2;
  transform: rotate(-4deg);
  display: none;
}

@media (min-width: 1024px) {
  .hero__cutout--student-bl {
    display: flex;
  }
}

/* ── Sticker-Positionen (verstreut, scrapbook-Look) ─────── */
.hero__sticker {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 4;
}

.hero__sticker--star-tl {
  top: 15%;
  left: 18%;
  width: clamp(50px, 7vw, 90px);
  transform: rotate(-12deg);
}

.hero__sticker--arrow-tr {
  top: 28%;
  right: 14%;
  width: clamp(60px, 9vw, 130px);
  transform: rotate(25deg);
  display: none;
}

@media (min-width: 768px) {
  .hero__sticker--arrow-tr {
    display: block;
  }
}

.hero__sticker--zacken-bl {
  bottom: 28%;
  left: 22%;
  width: clamp(60px, 9vw, 120px);
  transform: rotate(15deg);
  display: none;
}

@media (min-width: 768px) {
  .hero__sticker--zacken-bl {
    display: block;
  }
}

.hero__sticker--smiley-br {
  bottom: 22%;
  right: 18%;
  width: clamp(50px, 7vw, 90px);
  transform: rotate(-20deg);
}

.hero__sticker--welle-bottom {
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: clamp(120px, 20vw, 280px);
  z-index: 2;
}

.hero__sticker--scribble-tr {
  top: 6%;
  right: 30%;
  width: clamp(50px, 8vw, 110px);
  transform: rotate(20deg);
  display: none;
}

@media (min-width: 1024px) {
  .hero__sticker--scribble-tr {
    display: block;
  }
}

/* Claim-Lockup unten rechts als Brand-Mark */
.hero__claim-mark {
  position: absolute;
  bottom: 4%;
  right: 4%;
  z-index: 6;
  width: clamp(120px, 14vw, 200px);
  height: auto;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
}

@media (max-width: 767px) {
  .hero__claim-mark {
    bottom: auto;
    top: 14%;
    right: 4%;
    width: 100px;
  }
}

/* Scroll-Indicator unten Mitte */
.hero__scroll-hint {
  position: absolute;
  bottom: var(--space-sm);
  left: 50%;
  transform: translateX(-50%);
  color: var(--color-white);
  font-family: var(--font-subline);
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  opacity: 0.7;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  animation: bounce-down 2.5s var(--ease-out) infinite;
}

.hero__scroll-hint-arrow {
  font-size: 24px;
  line-height: 1;
}

@keyframes bounce-down {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 8px); }
}

/* ============================================================
   PFADAUSWAHL-INTRO (eigene Section direkt nach Hero)
   ============================================================ */
.pfadauswahl-intro {
  background-color: var(--color-white);
  text-align: center;
}

.pfadauswahl-intro__title {
  margin-bottom: var(--space-sm);
}

.pfadauswahl-intro__subline {
  color: var(--color-gray-700);
  max-width: 600px;
  margin-inline: auto;
  margin-bottom: var(--space-lg);
}

.pfadauswahl-intro__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
  max-width: 700px;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .pfadauswahl-intro__list {
    grid-template-columns: repeat(4, 1fr);
  }
}

.pfad-chip {
  background-color: var(--color-white);
  border: 3px solid var(--color-anthracite);
  color: var(--color-anthracite);
  padding: 18px 12px;
  border-radius: var(--radius-md);
  font-family: var(--font-subline);
  font-size: var(--fs-body);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  position: relative;
}

.pfad-chip:hover,
.pfad-chip:focus-visible,
.pfad-chip.is-selected {
  background-color: var(--color-yellow-signal);
  transform: translateY(-3px);
  box-shadow: 0 6px 0 var(--color-anthracite);
}

/* ============================================================
   7. SECTION 2 — STUTTGART ALS LEBENSGEFÜHL
   ============================================================ */
.lebensgefuehl {
  position: relative;
  overflow: hidden;
}

.lebensgefuehl__intro {
  text-align: center;
  max-width: 800px;
  margin-inline: auto;
  margin-bottom: var(--space-xl);
}

.lebensgefuehl__intro h2 {
  margin-bottom: var(--space-sm);
}

.lebensgefuehl__intro .subline {
  color: var(--color-gray-700);
}

.lebensgefuehl__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 768px) {
  .lebensgefuehl__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
  }
}

@media (min-width: 1024px) {
  .lebensgefuehl__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.trigger-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  text-align: left;
  position: relative;
  /* Polaroid-Style: leichte Rotation, alternierend */
  transition: transform var(--duration-base) var(--ease-out);
}

.trigger-card:nth-child(odd) {
  transform: rotate(-1deg);
}

.trigger-card:nth-child(even) {
  transform: rotate(1.2deg);
}

.trigger-card:hover {
  transform: rotate(0) translateY(-4px);
}

/* Polaroid-Frame: weißer Rand um das Foto + Drop-Shadow */
.trigger-card__visual {
  background-color: var(--color-white);
  aspect-ratio: 4 / 3.6;
  padding: 12px 12px 36px 12px; /* Polaroid-Padding (unten mehr für „Beschriftung") */
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.18));
  position: relative;
  overflow: visible;
}

.trigger-card__visual-inner {
  background-color: var(--color-gray-200);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-500);
  font-family: var(--font-subline);
  font-size: var(--fs-caption);
  text-align: center;
  padding: var(--space-sm);
}

.trigger-card__title {
  font-family: var(--font-headline);
  font-size: var(--fs-h3);
  color: var(--color-blue-mid);
  margin-bottom: var(--space-2xs);
  display: inline-block;
  position: relative;
}

/* Gelbe Marker-Unterstreichung als Akzent unter dem Titel */
.trigger-card__title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -4px;
  right: -4px;
  height: 8px;
  background-image: url("../02-design-system/sticker-library/Designelement-Pinselstrich-Gelb-1200px.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: -1;
}

.trigger-card__text {
  font-size: var(--fs-body);
  color: var(--color-gray-700);
  line-height: var(--lh-relaxed);
}

/* Sticker-Akzente in dieser Section */
.lebensgefuehl__sticker--wave {
  top: -40px;
  right: 10%;
  width: 200px;
  transform: rotate(-8deg);
  opacity: 0.85;
}

.lebensgefuehl__sticker--star {
  top: 30%;
  right: -30px;
  width: 80px;
  transform: rotate(20deg);
  display: none;
}

.lebensgefuehl__sticker--arrow {
  bottom: 10%;
  left: -20px;
  width: 100px;
  transform: rotate(-25deg);
  display: none;
}

@media (max-width: 767px) {
  .lebensgefuehl__sticker--wave {
    display: none;
  }
}

@media (min-width: 1024px) {
  .lebensgefuehl__sticker--star,
  .lebensgefuehl__sticker--arrow {
    display: block;
  }
}

/* ============================================================
   8. SECTION 3 — ZAHLEN & FAKTEN
   ============================================================ */
.zahlen {
  position: relative;
  overflow: hidden;
}

/* Sticker-Akzente */
.zahlen__sticker--smiley {
  top: 12%;
  left: 6%;
  width: 80px;
  transform: rotate(-15deg);
  display: none;
}

.zahlen__sticker--zacken {
  top: 8%;
  right: 8%;
  width: 90px;
  transform: rotate(20deg);
  display: none;
}

@media (min-width: 768px) {
  .zahlen__sticker--smiley,
  .zahlen__sticker--zacken {
    display: block;
  }
}

/* Stat-Cards mit leichter Rotation für Scrapbook-Feel */
.zahlen__grid .stat-card:nth-child(1) { transform: rotate(-1.5deg); }
.zahlen__grid .stat-card:nth-child(2) { transform: rotate(1deg); }
.zahlen__grid .stat-card:nth-child(3) { transform: rotate(-1deg); }
.zahlen__grid .stat-card:nth-child(4) { transform: rotate(1.5deg); }

.zahlen__intro {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.zahlen__intro h2 {
  color: var(--color-white);
  margin-bottom: var(--space-sm);
}

.zahlen__intro .subline {
  color: rgba(255, 255, 255, 0.85);
  max-width: 600px;
  margin-inline: auto;
}

.zahlen__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .zahlen__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
  }
}

.stat-card {
  text-align: center;
  position: relative;
  padding: var(--space-lg) var(--space-md);
}

/* Zahl in Anthrazit auf gelbem Kreis (brand-konform: gelb + dunkel) */
.stat-card__number {
  font-family: var(--font-headline);
  font-size: 64px;
  line-height: var(--lh-tight);
  color: var(--color-anthracite);
  position: relative;
  display: inline-block;
  z-index: 1;
  padding: 18px 28px;
  /* Optisches Atmen — die Zahl bekommt etwas Luft im Kreis */
}

@media (min-width: 768px) {
  .stat-card__number {
    font-size: 88px;
    padding: 22px 34px;
  }
}

/* Gelber Kreis hinter der Zahl — etwas großzügiger dimensioniert */
.stat-card__number::before {
  content: "";
  position: absolute;
  inset: -8% -8%;
  background-image: url("../02-design-system/sticker-library/Designelement-Kreis-Gelb-1200px.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: -1;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.25));
}

/* Subtle Hover: Kreis pulsiert leicht */
.stat-card:hover .stat-card__number::before {
  transform: scale(1.04) rotate(-2deg);
  transition: transform var(--duration-base) var(--ease-bounce);
}

.stat-card__label {
  font-family: var(--font-subline);
  font-size: var(--fs-body);
  font-weight: 900;
  color: var(--color-white);
  margin-top: var(--space-md);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stat-card__source {
  font-size: var(--fs-caption);
  color: rgba(255, 255, 255, 0.7);
  margin-top: var(--space-2xs);
}

/* ============================================================
   9. STICKY CTA BAR
   ============================================================ */
.cta-sticky {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky-cta);
  background-color: var(--color-anthracite);
  color: var(--color-white);
  padding: 12px var(--container-padding);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  transform: translateY(100%);
  transition: transform var(--duration-base) var(--ease-out);
}

.cta-sticky.is-visible {
  transform: translateY(0);
}

.cta-sticky__deadline {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-subline);
  font-size: var(--fs-body-sm);
  font-weight: 900;
}

.cta-sticky__days {
  background-color: var(--color-yellow-signal);
  color: var(--color-anthracite);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 700;
}

.cta-sticky .btn {
  padding: 10px 20px;
  font-size: var(--fs-body-sm);
}

@media (max-width: 767px) {
  .cta-sticky__deadline-text {
    display: none; /* Mobile: nur "Noch XX Tage" + Button */
  }
  .cta-sticky {
    padding-block: 10px;
  }
}

/* ============================================================
   10. FOOTER (Placeholder)
   ============================================================ */
.footer-placeholder {
  background-color: var(--color-anthracite);
  color: var(--color-white);
  padding: var(--space-xl) 0;
  text-align: center;
}

.footer-placeholder p {
  font-size: var(--fs-body-sm);
  color: rgba(255, 255, 255, 0.6);
}

/* ============================================================
   12. SECTION 4 — STUDIENGÄNGE ENTDECKEN
   ============================================================ */
.studiengaenge {
  background-color: var(--color-gray-50);
  position: relative;
  overflow: hidden;
}

.studiengaenge__intro {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.studiengaenge__intro h2 {
  margin-bottom: var(--space-sm);
}

.studiengaenge__intro .subline {
  color: var(--color-gray-700);
  max-width: 640px;
  margin-inline: auto;
}

/* Search-Input */
.studiengaenge__search {
  max-width: 600px;
  margin: 0 auto var(--space-md);
  position: relative;
}

.studiengaenge__search-input {
  width: 100%;
  font-family: var(--font-subline);
  font-size: clamp(18px, 2.5vw, 24px);
  font-weight: 700;
  padding: 18px 56px 18px 24px;
  border: 3px solid var(--color-anthracite);
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  color: var(--color-anthracite);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.studiengaenge__search-input::placeholder {
  color: var(--color-gray-500);
  font-weight: 400;
}

.studiengaenge__search-input:focus {
  border-color: var(--color-blue-mid);
  box-shadow: 0 0 0 4px rgba(0, 65, 145, 0.15);
}

.studiengaenge__search-icon {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  pointer-events: none;
  color: var(--color-gray-500);
}

/* Filter-Chips */
.studiengaenge__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  justify-content: center;
  margin-bottom: var(--space-xl);
}

.filter-chip {
  background-color: var(--color-white);
  border: 2px solid var(--color-anthracite);
  color: var(--color-anthracite);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-family: var(--font-subline);
  font-size: var(--fs-body-sm);
  font-weight: 700;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.filter-chip:hover,
.filter-chip:focus-visible {
  background-color: var(--color-yellow-signal);
  transform: translateY(-2px);
}

.filter-chip.is-active {
  background-color: var(--color-anthracite);
  color: var(--color-white);
}

/* Grid + Cards */
.studiengaenge__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 600px) {
  .studiengaenge__grid {
    /* minmax(0, 1fr) erzwingt gleich breite Spalten unabhängig vom Inhalt */
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .studiengaenge__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Study-Card: Index-Card / Notebook-Page Style mit Brand-DNA
   Signatur: anthrazit Outline + harter 3D-Shadow + Sticker-Tag + Marker-Akzent
   Konsistent mit Event-Cards und Pfad-Chips */
.study-card {
  background-color: var(--color-white);
  padding: var(--space-md) var(--space-md) var(--space-sm);
  border: 3px solid var(--color-anthracite);
  border-radius: var(--radius-sm);
  box-shadow: 4px 4px 0 var(--color-anthracite);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
  position: relative;
}

.study-card:nth-child(odd)  { transform: rotate(-0.6deg); }
.study-card:nth-child(even) { transform: rotate(0.6deg); }
.study-card:nth-child(3n)   { transform: rotate(-0.3deg); }

.study-card:hover {
  transform: rotate(0) translate(-3px, -4px);
  box-shadow: 8px 10px 0 var(--color-anthracite);
}

.study-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-sm);
}

.study-card__name {
  font-family: var(--font-subline);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 900;
  color: var(--color-anthracite);
  line-height: 1.1;
  position: relative;
  display: inline-block;
  /* Falls ein Wort wie „Materialwissenschaft" zu lang ist, darf es brechen */
  overflow-wrap: break-word;
  hyphens: auto;
  max-width: 100%;
}

/* Namen mit kontrollierten Umbrüchen (Map in main.js): nur an gesetzten
   weichen Trennzeichen brechen, nicht algorithmisch mitten im Wort */
.study-card__name--manual {
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* Yellow Marker-Underline als Brand-Akzent (mit ::after, wrapping-safe) */
.study-card__name::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: -2px;
  width: 60%;
  height: 8px;
  background-image: url("../02-design-system/sticker-library/Designelement-Pinselstrich-Gelb-1200px.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 0;
}

/* Tag als Sticker-Stempel (oben rechts, leicht rotiert, mit anthrazit-Outline) */
.study-card .tag {
  flex-shrink: 0;
  align-self: flex-start;
  display: inline-block;
  padding: 5px 10px;
  font-family: var(--font-subline);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 2px solid var(--color-anthracite);
  border-radius: 0;
  white-space: nowrap;
  filter: drop-shadow(2px 2px 0 var(--color-anthracite));
}

.study-card:nth-child(odd) .tag  { transform: rotate(3deg); }
.study-card:nth-child(even) .tag { transform: rotate(-3deg); }

/* Brand-konforme Tag-Farben (statt Orange/Grün): NC = dunkel/streng, Zul.-frei = gelb/offen */
.study-card .tag--nc {
  background-color: var(--color-anthracite);
  color: var(--color-yellow-signal);
}

.study-card .tag--free {
  background-color: var(--color-yellow-signal);
  color: var(--color-anthracite);
}

.study-card__meta {
  font-size: var(--fs-caption);
  color: var(--color-gray-500);
  font-weight: 900;
  font-family: var(--font-subline);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: var(--space-xs);
}

.study-card__description {
  font-size: var(--fs-body-sm);
  color: var(--color-gray-700);
  line-height: var(--lh-relaxed);
  flex-grow: 1;
}

/* CTA mit animiertem Pfeil + animierter Underline */
.study-card__link {
  font-family: var(--font-subline);
  font-weight: 900;
  font-size: var(--fs-body-sm);
  color: var(--color-anthracite);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 6px 0;
  position: relative;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: var(--space-2xs);
}

.study-card__link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background-color: var(--color-yellow-signal);
  transform: scaleX(0.3);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-out);
}

.study-card__link:hover::after,
.study-card:hover .study-card__link::after {
  transform: scaleX(1);
}

.study-card__link .icon {
  transition: transform var(--duration-base) var(--ease-out);
}

.study-card__link:hover .icon,
.study-card:hover .study-card__link .icon {
  transform: translateX(6px);
}

.studiengaenge__no-results {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-xl);
  color: var(--color-gray-500);
  font-family: var(--font-subline);
  font-size: var(--fs-body-lg);
  display: none;
}

.studiengaenge__no-results.is-visible {
  display: block;
}

.studiengaenge__cta-row {
  text-align: center;
  margin-top: var(--space-xl);
}

/* Langer Button-Text darf auf schmalen Screens umbrechen statt rauszulaufen */
.studiengaenge__cta-row .btn {
  max-width: 100%;
  white-space: normal;
  line-height: 1.2;
}
@media (max-width: 400px) {
  .studiengaenge__cta-row .btn {
    padding-inline: 20px;
  }
}

/* Sticker-Akzent */
.studiengaenge__sticker--arrow {
  position: absolute;
  top: 5%;
  right: 4%;
  width: 90px;
  transform: rotate(15deg);
  display: none;
  z-index: 0;
}

@media (min-width: 1024px) {
  .studiengaenge__sticker--arrow {
    display: block;
  }
}

/* ============================================================
   13. SECTION 5 — WARUM STUTTGART? (Video + Argumente)
   ============================================================ */
.warum-stuttgart {
  background-color: var(--color-anthracite);
  color: var(--color-white);
  position: relative;
  overflow: hidden;
}

.warum-stuttgart__intro {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.warum-stuttgart__intro h2 {
  color: var(--color-white);
  margin-bottom: var(--space-sm);
}

.warum-stuttgart__intro .subline {
  color: rgba(255, 255, 255, 0.85);
  max-width: 640px;
  margin-inline: auto;
}

.warum-stuttgart__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: center;
}

@media (min-width: 1024px) {
  .warum-stuttgart__layout {
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-xl);
  }
}

/* Video-Placeholder */
.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background-color: var(--color-gray-700);
  border-radius: var(--radius-md);
  overflow: hidden;
  filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.5));
  cursor: pointer;
  transition: transform var(--duration-base) var(--ease-out);
}

.video-frame:hover {
  transform: scale(1.02);
}

.video-frame__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: rgba(255, 255, 255, 0.4);
  font-family: var(--font-subline);
  font-size: var(--fs-body-sm);
  text-align: center;
  padding: var(--space-md);
}

.video-frame__play-button {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: var(--color-yellow-signal);
  color: var(--color-anthracite);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  margin-bottom: var(--space-sm);
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
  transition: transform var(--duration-base) var(--ease-out);
}

.video-frame:hover .video-frame__play-button {
  transform: scale(1.1);
}

/* Argumente-Liste */
.argument-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.argument-item {
  background-color: rgba(255, 255, 255, 0.05);
  border-left: 4px solid var(--color-yellow-signal);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  transition: transform var(--duration-base) var(--ease-out),
              background-color var(--duration-base) var(--ease-out);
}

.argument-item:hover {
  transform: translateX(4px);
  background-color: rgba(255, 255, 255, 0.08);
}

.argument-item__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.argument-item__content h4 {
  font-family: var(--font-subline);
  font-size: var(--fs-body-lg);
  font-weight: 900;
  color: var(--color-white);
  margin-bottom: 2px;
}

.argument-item__content p {
  font-size: var(--fs-body-sm);
  color: rgba(255, 255, 255, 0.75);
  line-height: var(--lh-relaxed);
}

/* Sticker-Akzente */
.warum-stuttgart__sticker--star {
  position: absolute;
  top: 8%;
  left: 4%;
  width: 80px;
  transform: rotate(-15deg);
  z-index: 0;
  opacity: 0.7;
  display: none;
}

@media (min-width: 1024px) {
  .warum-stuttgart__sticker--star {
    display: block;
  }
}

/* ============================================================
   13.5 SECTION 2.5 — CAMPUS MITTENDRIN (UGC-Videos, 9:16)
   Dunkle Section direkt nach dem Drohnenvideo — bindet beide
   Video-Blöcke zu „von oben → mittendrin".
   ============================================================ */
.mittendrin {
  position: relative;
  overflow: hidden;
}

.mittendrin__intro {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.mittendrin__intro h2 {
  color: var(--color-anthracite);
  margin-bottom: var(--space-sm);
}

/* Marker-Pinselstrich tiefer legen: bei der langen H2 „mittendrin" würde
   der Standard-Aufwärts-Flick des Strichs über die Buchstaben-Oberkante
   schwingen. Hier sitzt er als Underline-Swoosh unter der unteren
   Buchstabenhälfte — Headline bleibt lesbar. (Scoped, nur diese Section.) */
.mittendrin__intro .marker::before {
  inset: 0.52em -0.12em -0.06em -0.12em;
}

.mittendrin__intro .subline {
  color: var(--color-gray-500);
  max-width: 560px;
  margin-inline: auto;
}

.mittendrin__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  justify-items: center;
}

@media (min-width: 768px) {
  .mittendrin__grid {
    grid-template-columns: repeat(2, minmax(0, 320px));
    gap: var(--space-xl);
    justify-content: center;
  }
}

.ugc-video {
  margin: 0;
  width: 100%;
  max-width: 320px;
}

.ugc-video__frame {
  position: relative;
  aspect-ratio: 9 / 16;
  background-color: var(--color-gray-700);
  border-radius: var(--radius-md);
  overflow: hidden;
  filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.5));
  cursor: pointer;
  transition: transform var(--duration-base) var(--ease-out);
}

.ugc-video__frame:hover {
  transform: scale(1.02);
}

.ugc-video__el {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: var(--color-anthracite);
}

/* Native Controls erst nach dem Start (per JS gesetzt) */
.ugc-video__el:not([controls]) {
  pointer-events: none;
}

.ugc-video__trigger {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.35) 100%);
  border: 0;
  cursor: pointer;
}

.ugc-video__play {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: var(--color-yellow-signal);
  color: var(--color-anthracite);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
  transition: transform var(--duration-base) var(--ease-out);
}

.ugc-video__frame:hover .ugc-video__play {
  transform: scale(1.1);
}

/* Zustand: Video läuft — Overlay (Trigger) ausblenden */
.ugc-video__frame.is-playing .ugc-video__trigger {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.ugc-video__frame.is-playing {
  cursor: default;
}

.ugc-video__frame.is-playing:hover {
  transform: none;
}

/* Spielerische Kampagnen-Deko — rahmt die Videos in den Seitenrändern.
   Liegt hinter den Inhalten (z-index 0), nur Desktop (Mobile: kein Platz). */
.mittendrin__sticker {
  position: absolute;
  height: auto;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  display: none;
}

/* Inhalte über der Deko halten */
.mittendrin__intro,
.mittendrin .ugc-video {
  position: relative;
  z-index: 1;
}

/* Leichte Polaroid-Neigung, alternierend — beim Hover gerade (wie #warum) */
.mittendrin .ugc-video {
  transition: transform var(--duration-base) var(--ease-out);
}

.mittendrin .ugc-video:nth-child(1) {
  transform: rotate(-2.5deg);
}

.mittendrin .ugc-video:nth-child(2) {
  transform: rotate(2.5deg);
}

.mittendrin .ugc-video:hover {
  transform: rotate(0);
}

.mittendrin__sticker--star {
  bottom: 14%;
  left: 5%;
  width: 88px;
  transform: rotate(-12deg);
  opacity: 0.9;
}

.mittendrin__sticker--smiley {
  top: 20%;
  right: 6%;
  width: 84px;
  transform: rotate(8deg);
  opacity: 0.9;
}

.mittendrin__sticker--wave {
  top: 19%;
  left: 6%;
  width: 108px;
  transform: rotate(-8deg);
  opacity: 0.8;
}

.mittendrin__sticker--circle {
  bottom: 8%;
  right: 4%;
  width: 92px;
  opacity: 0.85;
}

@media (min-width: 1024px) {
  .mittendrin__sticker {
    display: block;
  }
}

/* ============================================================
   14. SECTION 6 — TESTIMONIALS (Polaroid-Style)
   ============================================================ */
.testimonials {
  background-color: var(--color-white);
  position: relative;
  overflow: hidden;
}

.testimonials__intro {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.testimonials__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  max-width: 1100px;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .testimonials__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
  }
}

.testimonial-card {
  background-color: var(--color-white);
  padding: 16px 16px 24px;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.18));
  position: relative;
}

.testimonial-card:nth-child(1) {
  transform: rotate(-2deg);
}

.testimonial-card:nth-child(2) {
  transform: rotate(1deg);
}

.testimonial-card:nth-child(3) {
  transform: rotate(-1deg);
}

.testimonial-card:hover {
  transform: rotate(0) translateY(-4px);
  transition: transform var(--duration-base) var(--ease-out);
}

.testimonial-card__photo {
  background-color: var(--color-gray-200);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-500);
  font-family: var(--font-subline);
  font-size: var(--fs-caption);
  text-align: center;
  margin-bottom: var(--space-sm);
}

.testimonial-card__quote {
  position: relative;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--color-anthracite);
  font-style: italic;
  margin-bottom: var(--space-sm);
  padding-left: var(--space-sm);
  border-left: 3px solid var(--color-yellow-signal);
}

.testimonial-card__quote::before {
  content: "„";
  font-family: var(--font-headline);
  font-size: 48px;
  line-height: 1;
  color: var(--color-yellow-signal);
  position: absolute;
  left: -8px;
  top: -16px;
}

.testimonial-card__author {
  font-family: var(--font-subline);
  font-size: var(--fs-body-sm);
  font-weight: 900;
  color: var(--color-anthracite);
  margin-top: var(--space-xs);
}

.testimonial-card__study {
  font-size: var(--fs-caption);
  color: var(--color-gray-500);
  margin-top: 2px;
}

/* Sticker-Akzente */
.testimonials__sticker--quote {
  position: absolute;
  top: 4%;
  right: 6%;
  width: 80px;
  transform: rotate(10deg);
  z-index: 0;
  display: none;
}

@media (min-width: 1024px) {
  .testimonials__sticker--quote {
    display: block;
  }
}

/* ============================================================
   15. SECTION 7 — KARRIERE & PERSPEKTIVEN
   ============================================================ */
.karriere {
  background-color: var(--color-gray-50);
  position: relative;
  overflow: hidden;
}

.karriere__intro {
  text-align: center;
  margin-bottom: var(--space-xl);
}

/* Big-Stat-Block */
.karriere__big-stat {
  text-align: center;
  margin-bottom: var(--space-2xl);
  position: relative;
  z-index: 1;
}

.karriere__big-stat-number {
  font-family: var(--font-headline);
  font-size: clamp(80px, 16vw, 200px);
  line-height: 0.95;
  color: var(--color-blue-mid);
  display: inline-block;
  position: relative;
}

.karriere__big-stat-number::before {
  content: "";
  position: absolute;
  inset: 0% -5%;
  background-image: url("../02-design-system/sticker-library/Designelement-Pinselstrich-Gelb-1200px.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: -1;
  opacity: 0.6;
}

.karriere__big-stat-label {
  font-family: var(--font-subline);
  font-size: clamp(18px, 2.5vw, 24px);
  font-weight: 900;
  color: var(--color-anthracite);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: var(--space-sm);
  max-width: 600px;
  margin-inline: auto;
  line-height: 1.3;
}

.karriere__big-stat-source {
  font-size: var(--fs-caption);
  color: var(--color-gray-500);
  margin-top: var(--space-xs);
}

/* Logo-Wall (Top-Arbeitgeber) */
.karriere__logo-wall-title {
  text-align: center;
  font-family: var(--font-subline);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-md);
}

.karriere__logo-wall {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-2xl);
  align-items: center;
}

@media (min-width: 600px) {
  .karriere__logo-wall {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1024px) {
  .karriere__logo-wall {
    grid-template-columns: repeat(8, 1fr);
  }
}

.logo-placeholder {
  background-color: var(--color-white);
  aspect-ratio: 2 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-500);
  font-family: var(--font-subline);
  font-size: var(--fs-caption);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  transition: transform var(--duration-fast) var(--ease-out);
}

.logo-placeholder:hover {
  transform: scale(1.05);
}

/* Alumni-Stories */
.karriere__stories-title {
  text-align: center;
  font-family: var(--font-headline);
  font-size: var(--fs-h3);
  color: var(--color-anthracite);
  margin-bottom: var(--space-md);
}

.karriere__stories-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .karriere__stories-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.alumni-card {
  background-color: var(--color-white);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  position: relative;
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

.alumni-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-paper);
}

.alumni-card__photo {
  background-color: var(--color-gray-200);
  aspect-ratio: 1 / 1;
  width: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-500);
  font-family: var(--font-subline);
  font-size: 10px;
  text-align: center;
}

.alumni-card__name {
  font-family: var(--font-subline);
  font-size: var(--fs-h4);
  font-weight: 900;
  color: var(--color-anthracite);
}

.alumni-card__role {
  font-size: var(--fs-body-sm);
  color: var(--color-blue-mid);
  font-weight: 700;
}

.alumni-card__description {
  font-size: var(--fs-body-sm);
  color: var(--color-gray-700);
  line-height: var(--lh-relaxed);
  flex-grow: 1;
}

.alumni-card__study {
  font-size: var(--fs-caption);
  color: var(--color-gray-500);
  margin-top: var(--space-xs);
  padding-top: var(--space-xs);
  border-top: 1px solid var(--color-gray-200);
}

/* Sticker-Akzent */
.karriere__sticker--zacken {
  position: absolute;
  top: 6%;
  left: 4%;
  width: 90px;
  transform: rotate(-20deg);
  z-index: 0;
  display: none;
}

@media (min-width: 1024px) {
  .karriere__sticker--zacken {
    display: block;
  }
}

/* ============================================================
   16. SECTION 8 — STUDIUM FINANZIEREN & LEBEN
   ============================================================ */
.finanzieren {
  background-color: var(--color-white);
  position: relative;
  overflow: hidden;
}

.finanzieren__intro {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.finanzieren__intro h2 {
  margin-bottom: var(--space-sm);
}

.finanzieren__intro .subline {
  color: var(--color-gray-700);
  max-width: 680px;
  margin-inline: auto;
}

.finanzieren__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 768px) {
  .finanzieren__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.cost-card {
  background-color: var(--color-gray-50);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  position: relative;
  border: 3px solid var(--color-anthracite);
}

.cost-card:nth-child(1) {
  transform: rotate(-0.5deg);
}

.cost-card:nth-child(2) {
  transform: rotate(0.5deg);
}

.cost-card__title {
  font-family: var(--font-headline);
  font-size: var(--fs-h3);
  color: var(--color-anthracite);
  margin-bottom: var(--space-md);
  display: inline-block;
}

.cost-list {
  display: flex;
  flex-direction: column;
}

.cost-list__item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-gray-200);
  gap: var(--space-sm);
}

.cost-list__item:last-child {
  border-bottom: none;
}

.cost-list__label {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-gray-700);
}

.cost-list__value {
  font-family: var(--font-subline);
  font-size: var(--fs-body-lg);
  font-weight: 900;
  color: var(--color-anthracite);
  text-align: right;
  white-space: nowrap;
}

.cost-list__value--success {
  color: var(--color-success);
}

.cost-card__note {
  font-size: var(--fs-caption);
  color: var(--color-gray-500);
  margin-top: var(--space-sm);
  font-style: italic;
}

.cost-card__link {
  font-family: var(--font-subline);
  font-weight: 900;
  font-size: var(--fs-body-sm);
  color: var(--color-blue-mid);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--space-sm);
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
}

.cost-card__link:hover {
  border-bottom-color: var(--color-yellow-signal);
}

.finanzieren__sticker--smiley {
  position: absolute;
  bottom: 8%;
  right: 4%;
  width: 80px;
  transform: rotate(15deg);
  z-index: 0;
  display: none;
}

@media (min-width: 1024px) {
  .finanzieren__sticker--smiley {
    display: block;
  }
}

/* ============================================================
   17. SECTION 9 — IN 3 SCHRITTEN ZUM STUDIUM
   ============================================================ */
.schritte {
  background-image: var(--bg-image-brand);
  background-size: cover;
  background-position: center;
  color: var(--color-white);
  position: relative;
  overflow: hidden;
}

.schritte__intro {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.schritte__intro h2 {
  color: var(--color-white);
  margin-bottom: var(--space-sm);
}

.schritte__intro .subline {
  color: rgba(255, 255, 255, 0.85);
  max-width: 600px;
  margin-inline: auto;
}

.schritte__flow {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: stretch;
}

@media (min-width: 1024px) {
  .schritte__flow {
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: var(--space-md);
    align-items: center;
  }
}

.step-card {
  background-color: var(--color-white);
  color: var(--color-anthracite);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  text-align: center;
  position: relative;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.3));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.step-card:nth-child(1) { transform: rotate(-1.5deg); }
.step-card:nth-child(3) { transform: rotate(0.8deg); }
.step-card:nth-child(5) { transform: rotate(-0.8deg); }

.step-card__number {
  font-family: var(--font-headline);
  font-size: 80px;
  line-height: 0.95;
  color: var(--color-blue-mid);
  position: relative;
  z-index: 1;
}

.step-card__number::before {
  content: "";
  position: absolute;
  inset: 5% -15%;
  background-image: url("../02-design-system/sticker-library/Designelement-Kreis-Gelb-1200px.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: -1;
}

.step-card__title {
  font-family: var(--font-headline);
  font-size: var(--fs-h3);
  color: var(--color-anthracite);
}

.step-card__description {
  font-size: var(--fs-body-sm);
  color: var(--color-gray-700);
  line-height: var(--lh-relaxed);
}

.step-card__deadline {
  font-family: var(--font-subline);
  font-size: var(--fs-body-sm);
  font-weight: 900;
  color: var(--color-blue-mid);
  margin-top: var(--space-xs);
  padding-top: var(--space-xs);
  border-top: 2px dashed var(--color-gray-200);
  width: 100%;
}

.step-arrow {
  display: none;
  width: 60px;
  height: auto;
  align-self: center;
  transform: rotate(-5deg);
}

@media (min-width: 1024px) {
  .step-arrow {
    display: block;
  }
}

.schritte__cta-row {
  text-align: center;
  margin-top: var(--space-xl);
}

.schritte__cta-row .btn {
  font-size: clamp(18px, 2.2vw, 22px);
  padding: 18px 40px;
}

.schritte__cta-note {
  font-size: var(--fs-caption);
  color: rgba(255, 255, 255, 0.7);
  margin-top: var(--space-sm);
  max-width: 480px;
  margin-inline: auto;
}

/* ============================================================
   18. SECTION 10 — VERTRAUENSSIGNALE (Akkreditierungen)
   ============================================================ */
.trust {
  background-color: var(--color-white);
  position: relative;
  overflow: hidden;
}

.trust__intro {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.trust__intro p {
  font-family: var(--font-subline);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.trust__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  max-width: 1100px;
  margin-inline: auto;
}

@media (min-width: 600px) {
  .trust__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .trust__grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.trust-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-sm);
}

/* Flexibler Container — passt sich an jedes Logo-Format an */
.trust-badge__media {
  width: 100%;
  max-width: 160px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm);
  transition: transform var(--duration-base) var(--ease-out);
}

.trust-badge__media img,
.trust-badge__media picture {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.trust-badge__media picture img {
  max-width: 100%;
  max-height: 100%;
}

/* Hover: leichte Sticker-Rotation, konsistent mit anderen Brand-Komponenten */
.trust-badge:hover .trust-badge__media {
  transform: rotate(-4deg) scale(1.06);
}

/* Alternierend leichte Grund-Rotation für Scrapbook-Feel */
.trust-badge:nth-child(odd) .trust-badge__media  { transform: rotate(-1deg); }
.trust-badge:nth-child(even) .trust-badge__media { transform: rotate(1deg); }
.trust-badge:nth-child(odd):hover .trust-badge__media  { transform: rotate(-4deg) scale(1.06); }
.trust-badge:nth-child(even):hover .trust-badge__media { transform: rotate(4deg) scale(1.06); }

.trust-badge__label {
  font-family: var(--font-subline);
  font-size: var(--fs-body-sm);
  font-weight: 900;
  color: var(--color-anthracite);
  line-height: 1.3;
}

/* ============================================================
   19. SECTION 11 — EVENTS
   ============================================================ */
.events {
  background-color: var(--color-gray-50);
  position: relative;
  overflow: hidden;
}

.events__intro {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.events__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .events__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.event-card {
  background-color: var(--color-white);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  border: 3px solid var(--color-anthracite);
  position: relative;
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.event-card:nth-child(1) { transform: rotate(-0.8deg); }
.event-card:nth-child(2) { transform: rotate(0.5deg); }
.event-card:nth-child(3) { transform: rotate(-0.3deg); }

.event-card:hover {
  transform: rotate(0) translateY(-4px);
  box-shadow: 6px 6px 0 var(--color-anthracite);
}

.event-card__date-stamp {
  font-family: var(--font-headline);
  font-size: var(--fs-h2);
  line-height: 0.95;
  color: var(--color-blue-mid);
  display: inline-block;
  position: relative;
  align-self: flex-start;
}

.event-card__date-stamp::before {
  content: "";
  position: absolute;
  inset: -10% -5%;
  background-image: url("../02-design-system/sticker-library/Designelement-Stoerer-Gelb-1200px.png"), url("../02-design-system/sticker-library/Stoerer-Gelb-1200px.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: -1;
  opacity: 0.4;
}

.event-card__title {
  font-family: var(--font-subline);
  font-size: var(--fs-h4);
  font-weight: 900;
  color: var(--color-anthracite);
}

.event-card__details {
  font-size: var(--fs-body-sm);
  color: var(--color-gray-700);
  line-height: var(--lh-relaxed);
}

.event-card__location {
  font-size: var(--fs-caption);
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: auto;
  padding-top: var(--space-sm);
  border-top: 1px dashed var(--color-gray-200);
}

.event-card__cta {
  font-family: var(--font-subline);
  font-weight: 900;
  font-size: var(--fs-body-sm);
  color: var(--color-blue-mid);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--space-xs);
}

.event-card__cta:hover {
  text-decoration: underline;
  text-decoration-color: var(--color-yellow-signal);
  text-decoration-thickness: 3px;
}

.events__cta-row {
  text-align: center;
  margin-top: var(--space-lg);
}

/* ============================================================
   20. SECTION 12 — FAQ
   ============================================================ */
.faq {
  background-color: var(--color-white);
  position: relative;
  overflow: hidden;
}

.faq__intro {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.faq__list {
  max-width: 800px;
  margin-inline: auto;
}

.faq-item {
  border-bottom: 2px solid var(--color-gray-200);
  padding: var(--space-md) 0;
}

.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  cursor: pointer;
  font-family: var(--font-subline);
  font-size: var(--fs-body-lg);
  font-weight: 900;
  color: var(--color-anthracite);
  list-style: none;
  padding: var(--space-xs) 0;
  transition: color var(--duration-fast) var(--ease-out);
}

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

.faq-item summary:hover {
  color: var(--color-blue-mid);
}

.faq-item__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--color-yellow-signal);
  color: var(--color-anthracite);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-subline);
  font-weight: 900;
  font-size: 18px;
  transition: transform var(--duration-base) var(--ease-out);
}

.faq-item[open] .faq-item__icon {
  transform: rotate(45deg);
}

.faq-item__answer {
  padding: var(--space-sm) 0 0;
  font-size: var(--fs-body);
  color: var(--color-gray-700);
  line-height: var(--lh-relaxed);
  max-width: 640px;
}

/* ============================================================
   21. SECTION 13 — ELTERN & LEHRKRÄFTE
   ============================================================ */
.eltern {
  background-color: var(--color-anthracite);
  color: var(--color-white);
  position: relative;
  overflow: hidden;
}

.eltern__intro {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.eltern__intro h2 {
  color: var(--color-white);
  margin-bottom: var(--space-sm);
}

.eltern__intro .subline {
  color: rgba(255, 255, 255, 0.85);
  max-width: 700px;
  margin-inline: auto;
}

.eltern__intro-tag {
  display: inline-block;
  background-color: var(--color-yellow-signal);
  color: var(--color-anthracite);
  padding: 6px 14px;
  font-family: var(--font-subline);
  font-size: var(--fs-caption);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-sm);
  transform: rotate(-2deg);
}

.eltern__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

@media (min-width: 768px) {
  .eltern__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.eltern-card {
  background-color: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.15);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  transition: background-color var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}

.eltern-card:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: var(--color-yellow-signal);
  transform: translateY(-4px);
}

.eltern-card__icon {
  font-size: 40px;
  line-height: 1;
}

.eltern-card__title {
  font-family: var(--font-subline);
  font-size: var(--fs-h4);
  font-weight: 900;
  color: var(--color-white);
}

.eltern-card__text {
  font-size: var(--fs-body);
  color: rgba(255, 255, 255, 0.8);
  line-height: var(--lh-relaxed);
  flex-grow: 1;
}

.eltern__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
}

/* ============================================================
   22. SECTION 14 — BERATUNG & KONTAKT
   ============================================================ */
.beratung {
  background-image: var(--bg-image-brand);
  background-size: cover;
  background-position: center;
  color: var(--color-white);
  position: relative;
  overflow: hidden;
}

.beratung__intro {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.beratung__intro h2 {
  color: var(--color-white);
  margin-bottom: var(--space-sm);
}

.beratung__intro .subline {
  color: rgba(255, 255, 255, 0.85);
  max-width: 600px;
  margin-inline: auto;
}

.beratung__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .beratung__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.contact-card {
  background-color: var(--color-white);
  color: var(--color-anthracite);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.25));
  transition: transform var(--duration-base) var(--ease-out);
}

.contact-card:nth-child(1) { transform: rotate(-1deg); }
.contact-card:nth-child(2) { transform: rotate(0.5deg); }
.contact-card:nth-child(3) { transform: rotate(-0.5deg); }

.contact-card:hover {
  transform: rotate(0) translateY(-4px);
}

.contact-card__icon {
  font-size: 48px;
  line-height: 1;
}

.contact-card__title {
  font-family: var(--font-headline);
  font-size: var(--fs-h3);
  color: var(--color-anthracite);
}

.contact-card__description {
  font-size: var(--fs-body-sm);
  color: var(--color-gray-700);
  flex-grow: 1;
  line-height: var(--lh-relaxed);
}

.contact-card__detail {
  font-family: var(--font-subline);
  font-weight: 900;
  font-size: var(--fs-body-sm);
  color: var(--color-anthracite);
}

.contact-card .btn {
  width: 100%;
  margin-top: var(--space-xs);
}

/* ============================================================
   23. SECTION 15 — FINAL CTA
   ============================================================ */
.final-cta {
  background-color: var(--color-anthracite);
  color: var(--color-white);
  text-align: center;
  position: relative;
  overflow: hidden;
  padding-block: var(--space-3xl);
}

.final-cta__sticker {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.final-cta__sticker--star-1 {
  top: 15%;
  left: 8%;
  width: 100px;
  transform: rotate(-15deg);
}

.final-cta__sticker--star-2 {
  bottom: 18%;
  right: 8%;
  width: 90px;
  transform: rotate(20deg);
}

.final-cta__sticker--zacken {
  top: 12%;
  right: 18%;
  width: 80px;
  transform: rotate(25deg);
  display: none;
}

.final-cta__sticker--smiley {
  bottom: 22%;
  left: 18%;
  width: 70px;
  transform: rotate(-10deg);
  display: none;
}

@media (min-width: 1024px) {
  .final-cta__sticker--zacken,
  .final-cta__sticker--smiley {
    display: block;
  }
}

/* Mobile: Sterne aus dem Content heraus in die leeren Ecken schieben,
   damit sie weder die Headline (weiß auf gelb) noch den Button
   (gelb auf gelb) überlagern. */
@media (max-width: 767px) {
  .final-cta__sticker--star-1 {
    top: 24px;
    left: 12%;
    width: 66px;
    transform: rotate(-15deg);
  }

  .final-cta__sticker--star-2 {
    bottom: 24px;
    right: 12%;
    top: auto;
    width: 60px;
    transform: rotate(20deg);
  }
}

.final-cta__content {
  position: relative;
  z-index: 1;
}

.final-cta h2 {
  color: var(--color-white);
  font-size: clamp(40px, 8vw, 96px);
  margin-bottom: var(--space-md);
}

.final-cta__subline {
  font-family: var(--font-subline);
  font-size: clamp(16px, 2.2vw, 22px);
  color: rgba(255, 255, 255, 0.85);
  max-width: 600px;
  margin: 0 auto var(--space-lg);
}

.final-cta .btn {
  font-size: clamp(20px, 3vw, 28px);
  padding: 24px 56px;
}

.final-cta__hints {
  margin-top: var(--space-md);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  font-family: var(--font-subline);
  font-size: var(--fs-body-sm);
  color: rgba(255, 255, 255, 0.7);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.final-cta__hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.final-cta__hint::before {
  content: "✓";
  color: var(--color-yellow-signal);
  font-size: 18px;
}

/* ============================================================
   24. ECHTER FOOTER
   ============================================================ */
.footer {
  background-color: var(--color-anthracite);
  color: rgba(255, 255, 255, 0.75);
  padding-block: var(--space-2xl);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--fs-body-sm);
}

.footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}

@media (min-width: 768px) {
  .footer__top {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
}

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

.footer__logo {
  width: auto;
  height: 32px;
  color: var(--color-white);
}

.footer__address {
  font-size: var(--fs-body-sm);
  color: rgba(255, 255, 255, 0.6);
  line-height: var(--lh-relaxed);
}

.footer__col h4 {
  font-family: var(--font-subline);
  font-size: var(--fs-body-sm);
  font-weight: 900;
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-sm);
}

.footer__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer__list a {
  color: rgba(255, 255, 255, 0.7);
  transition: color var(--duration-fast) var(--ease-out);
  display: inline-block;
}

.footer__list a:hover {
  color: var(--color-yellow-signal);
}

.footer__social {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.footer__social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--color-white);
  transition: background-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

.footer__social a:hover {
  background-color: var(--color-yellow-signal);
  color: var(--color-anthracite);
  transform: translateY(-2px);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--fs-caption);
  color: rgba(255, 255, 255, 0.5);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.footer__legal a {
  color: rgba(255, 255, 255, 0.6);
}

.footer__legal a:hover {
  color: var(--color-yellow-signal);
}

/* ============================================================
   11. UTILITIES
   ============================================================ */
.text-center {
  text-align: center;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip-Link für Screen-Reader */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background-color: var(--color-yellow-signal);
  color: var(--color-anthracite);
  padding: 8px 16px;
  z-index: var(--z-modal);
  font-weight: 700;
  text-decoration: underline;
}

.skip-link:focus {
  top: 0;
}

/* Reveal-Animation für Sections (per JS getriggert) */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms var(--ease-out),
              transform 600ms var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}