/* ==========================================================================
   GLAS-MODUS (Test) — aktivierbar mit ?glas=1 in der Adresse, aus mit ?glas=0.
   Idee wie bei SHEdance: das Kopfbild traegt die GANZE Seite (fix im
   Viewport), die Inhalte schweben als geblurrte Glas-Karten darueber.
   Werte nach gaengigem Glassmorphism-Muster: Flaechen 50-70% Deckung,
   Blur 20-30px — das Bild schimmert durch, der Text bleibt immer lesbar.
   Alles haengt an html.glas — ohne die Klasse aendert sich nichts.
   ========================================================================== */

/* Das Kino haengt fix im Viewport und liegt hinter allem */
html.glas .kino {
  position: fixed;
  inset: 0;
  z-index: -1;
}
html.glas .hero--foto,
html.glas .home-hero { background: transparent; }
/* Die Hero-Rueckzieh-Animation setzt einen transform und wuerde das fixe
   Kino einfangen (Containing Block) — im Glas-Modus deshalb aus */
html.glas .home-hero, html.glas .hero--foto, html.glas .sd-hero {
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
}

/* Helle Inhalts-Sektionen: klassisches helles Glas */
html.glas .section,
html.glas .statement {
  background: linear-gradient(rgba(255, 255, 255, .62), rgba(255, 245, 254, .55));
  -webkit-backdrop-filter: blur(28px) saturate(1.2);
  backdrop-filter: blur(28px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, .6);
  border-top-color: rgba(255, 255, 255, .85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 24px 60px rgba(40, 5, 15, .16);
  border-radius: var(--radius);
  margin: clamp(14px, 2vw, 26px) auto;
  width: calc(100% - 2 * clamp(10px, 2vw, 28px));
}
html.glas .statement { padding-inline: clamp(24px, 5vw, 80px); }

/* Der Abschluss-Aufruf ist gelb mit SCHWARZEM Text — er braucht helles
   Glas, sonst steht schwarze Schrift auf dunklem Grund */
html.glas .final-cta {
  background: rgba(255, 222, 89, .72);
  -webkit-backdrop-filter: blur(26px) saturate(1.2);
  backdrop-filter: blur(26px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: var(--radius);
  margin: clamp(14px, 2vw, 26px) auto;
  width: calc(100% - 2 * clamp(10px, 2vw, 28px));
  max-width: calc(var(--maxw) + 2 * var(--pad));
}

/* Dunkle Flaechen mit weissem Text: dunkles Glas */
html.glas .panel-dark,
html.glas .shedance-teaser {
  background: rgba(12, 5, 9, .58);
  -webkit-backdrop-filter: blur(28px);
  backdrop-filter: blur(28px);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius);
  margin: clamp(14px, 2vw, 26px) auto;
  width: calc(100% - 2 * clamp(10px, 2vw, 28px));
  max-width: calc(var(--maxw) + 2 * var(--pad));
}

/* Baender (Ticker/Zitat) als getoentes Glas */
html.glas .marquee--ticker {
  background: rgba(255, 222, 89, .62);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
html.glas .marquee:not(.marquee--ticker) {
  background: rgba(196, 72, 90, .55);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

/* Bausteine IN den Glas-Sektionen: eine Stufe heller als die Sektion,
   mit feiner Lichtkante — der klassische Karte-auf-Glas-Look */
html.glas .card,
html.glas .ticket,
html.glas .stufe,
html.glas .logo-box,
html.glas .info-card,
html.glas .step {
  background: rgba(255, 255, 255, .5);
  border: 1px solid rgba(255, 255, 255, .7);
  border-top-color: rgba(255, 255, 255, .9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
}
html.glas .info-card:nth-child(2), html.glas .step:nth-child(2) { background: rgba(255, 200, 207, .55); }
html.glas .info-card:nth-child(3), html.glas .step:nth-child(3) { background: rgba(255, 235, 160, .55); }
html.glas .info-card:hover, html.glas .card:hover, html.glas a.card:hover { background: rgba(255, 255, 255, .72); }

/* Hervorgehobene Karten als dunkles Glas */
html.glas .ticket--featured,
html.glas .stufe--featured {
  background: rgba(12, 5, 9, .66);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-color: rgba(255, 255, 255, .2);
}

html.glas .impact { background: rgba(255, 255, 255, .12); }
html.glas .impact__item { -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }

/* Farbige Platzhalter-Flaechen (Bilder ohne Foto): halbtransparent */
html.glas .media { background: linear-gradient(155deg, rgba(252, 192, 197, .55), rgba(196, 72, 90, .55)); }
html.glas .media--rose { background: linear-gradient(155deg, rgba(252, 192, 197, .55), rgba(196, 72, 90, .55)); }
html.glas .media--yellow { background: linear-gradient(155deg, rgba(255, 222, 89, .55), rgba(185, 143, 0, .45)); }
html.glas .media--dark { background: linear-gradient(155deg, rgba(35, 30, 33, .6), rgba(0, 0, 0, .62)); }
html.glas .media--pink { background: linear-gradient(155deg, rgba(252, 192, 197, .55), rgba(150, 56, 72, .55)); }
html.glas .media { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
/* echte Fotos in den Karten bleiben natuerlich voll deckend */
html.glas .media img, html.glas .media picture { opacity: 1; }

/* ---------------------------------------------- Ueber uns im Glas-Modus
   Der zweigeteilte Kopf bleibt geteilt (Gesichter nie ueberlagert): links
   Glas ueber dem weichen Seitengrund, rechts das Foto scharf und klar. */
html.glas .kino--grund { display: block; }
html.glas .kino--grund .kino__bild { filter: grayscale(.2) blur(26px) brightness(.75); transform: scale(1.12); }
html.glas .about-split {
  background: linear-gradient(160deg, rgba(196, 72, 90, .5), rgba(150, 56, 72, .55));
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}
html.glas .about-split__bild { border-left: 1px solid rgba(255, 255, 255, .22); }

/* Navigation als dunkles Glas (traegt das Original-Logo) */
html.glas .nav {
  background: rgba(38, 18, 24, .62);
  -webkit-backdrop-filter: blur(26px) saturate(1.2);
  backdrop-filter: blur(26px) saturate(1.2);
  border-color: rgba(255, 255, 255, .2);
}