/* ============================================================
   FAHRSCHULE LIBERTÉ — Stylesheet
   Stil: modern, clean, "Vice City"-Akzente in den Logo-Farben
   ============================================================ */

:root {
  /* Logo-Farben */
  --blue-deep:   #1b3a8b;
  --blue:        #2e6bb0;
  --blue-mid:    #3b6fc4;
  --cyan:        #5bc2d6;
  --cyan-light:  #7fd4e0;
  --teal:        #1f6f6b;
  --purple:      #6b3fa0;
  --violet:      #9b6db5;
  --magenta:     #c061a8;

  /* UI */
  --ink:         #16203a;
  --ink-soft:    #4a5673;
  --paper:       #ffffff;
  --paper-alt:   #f4f7fc;
  --line:        #e3e9f4;

  --grad-hero:   linear-gradient(135deg, #3a2472 0%, #2e6bb0 32%, #3aa6d4 54%, #7a4fa0 82%, #9a52ba 100%);
  --grad-brand:  linear-gradient(90deg, var(--blue) 0%, var(--cyan) 45%, var(--violet) 100%);
  --grad-btn:    linear-gradient(90deg, var(--blue-mid) 0%, var(--cyan) 100%);

  --radius:      18px;
  --radius-sm:   12px;
  --shadow:      0 18px 50px -20px rgba(27, 58, 139, .35);
  --shadow-sm:   0 8px 24px -12px rgba(27, 58, 139, .3);
  --maxw:        1180px;

  --font:        'Inter', system-ui, -apple-system, sans-serif;
  --font-head:   'Montserrat', system-ui, sans-serif;
  --font-tech:   'Orbitron', 'Montserrat', sans-serif;

  /* Synthwave / Vice City Palette */
  --sw-bg1:      #080114;
  --sw-bg2:      #160326;
  --sw-pink:     #ff00aa;
  --sw-pink2:    #ff007f;
  --sw-cyan:     #00f0ff;
  --sw-gold:     #ffd23d;
  --sw-panel:    rgba(15, 8, 28, 0.78);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  overflow-x: hidden;
}

body.intro-active { overflow: hidden; height: 100vh; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- Bird shape (shared, CSS mask of inline SVG via background) ---------- */
.bird-svg, .nav-bird, .intro-bird, .hero-bird {
  background-image: url("../assets/logo-bird.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.nav-bird { width: 38px; height: 38px; display: inline-block; flex: 0 0 auto; }

/* ============ INTRO FLY-IN ============ */
.intro {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad-hero);
  transition: opacity .8s ease, visibility .8s ease;
}
.intro.hide { opacity: 0; visibility: hidden; }
.intro-logo { text-align: center; }
.intro-bird {
  width: 180px; height: 180px; margin: 0 auto 10px;
  animation: flyIn 1.6s cubic-bezier(.2,.7,.3,1) forwards;
  transform-origin: center;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.4));
}
.intro-text { opacity: 0; animation: fadeUp .8s ease .9s forwards; }
.brand-title {
  font-family: var(--font-head); font-weight: 800; font-size: clamp(1.6rem, 5vw, 2.8rem);
  color: #fff; letter-spacing: .04em;
}
.brand-sub {
  font-family: var(--font-head); font-weight: 500; letter-spacing: .35em;
  color: var(--cyan-light); font-size: clamp(.6rem, 2vw, .85rem); margin-top: 6px;
  text-transform: uppercase;
}

@keyframes flyIn {
  0%   { transform: translateX(-120vw) translateY(40vh) rotate(-18deg) scale(.5); opacity: 0; }
  60%  { opacity: 1; }
  75%  { transform: translateX(6vw) translateY(-4vh) rotate(6deg) scale(1.08); }
  100% { transform: translateX(0) translateY(0) rotate(0) scale(1); opacity: 1; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* gentle continuous hover/wing flutter */
@keyframes hover {
  0%,100% { transform: translateY(0) rotate(0); }
  50%     { transform: translateY(-10px) rotate(-1.5deg); }
}

/* ============ NAV ============ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(10, 3, 22, 0.85);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,240,255,.15);
  transition: box-shadow .3s, border-color .3s, background .3s;
}
.nav.scrolled {
  background: rgba(8, 2, 18, 0.95); border-color: rgba(0,240,255,.3);
  box-shadow: 0 8px 32px rgba(0,0,0,.8);
}
.nav-inner {
  width: 100%; padding: 14px clamp(16px, 2.5vw, 40px);
  display: flex; align-items: center; gap: 16px;
}
.nav-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 800; }
.nav-brand-text {
  background: linear-gradient(90deg, #ffffff 0%, var(--sw-cyan) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; font-size: 1.05rem; letter-spacing: .02em;
}
.nav-links { display: flex; gap: 6px; flex: 1 1 auto; justify-content: center; }
.nav-links a {
  font-size: .88rem; font-weight: 600; padding: 6px 14px; border-radius: 20px;
  color: rgba(255,255,255,.8); transition: all 0.2s ease-in-out; white-space: nowrap;
}
.nav-links a:hover, .nav-links a.active {
  color: #fff; background: rgba(0, 240, 255, 0.15);
  border: 1px solid rgba(0, 240, 255, 0.4);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.3), inset 0 0 8px rgba(0, 240, 255, 0.1);
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.6);
}
.nav-right { display: flex; align-items: center; gap: 12px; }

.nav-phone {
  display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: .9rem;
  color: var(--sw-cyan); padding: 8px 14px; border-radius: 999px;
  border: 1px solid rgba(0,240,255,.4); background: rgba(0,240,255,.06);
  transition: transform .2s, box-shadow .2s, background .2s;
}
.nav-phone:hover { transform: translateY(-2px); background: rgba(0,240,255,.14); box-shadow: 0 0 16px rgba(0,240,255,.5); }

/* language switch */
.lang-switch { position: relative; }
.lang-btn {
  display: flex; align-items: center; gap: 4px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06); border-radius: 10px;
  padding: 7px 10px; font-family: var(--font); font-weight: 600; font-size: .85rem; color: #fff;
  transition: border-color .2s, color .2s;
}
.lang-btn:hover { border-color: var(--sw-cyan); color: var(--sw-cyan); }
.lang-menu {
  position: absolute; right: 0; top: 110%; list-style: none; background: rgba(20,10,35,.97);
  border: 1px solid rgba(0,240,255,.25); border-radius: 12px; box-shadow: 0 18px 40px -16px rgba(0,0,0,.7);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  padding: 6px; min-width: 150px; opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: .2s;
}
.lang-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-menu button {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  padding: 9px 12px; border-radius: 8px; font-family: var(--font); font-size: .9rem; color: rgba(255,255,255,.9);
}
.lang-menu button:hover { background: rgba(0,240,255,.12); color: var(--sw-cyan); }

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
.nav-toggle span { width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: .3s; }

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  font-family: var(--font-head); font-weight: 600; font-size: .95rem;
  padding: 14px 26px; border-radius: 999px; cursor: pointer; border: none;
  transition: transform .2s, box-shadow .2s, opacity .2s; text-align: center;
}
.btn-sm { padding: 10px 18px; font-size: .85rem; }
.btn-primary {
  color: #fff;
  background: linear-gradient(90deg, var(--blue) 0%, var(--cyan) 34%, var(--violet) 70%, var(--magenta) 100%);
  background-size: 220% 100%; background-position: 0% 0%;
  box-shadow: 0 12px 28px -10px rgba(46,107,176,.6);
  transition: background-position .5s ease, transform .2s, box-shadow .3s;
}
.btn-primary:hover {
  transform: translateY(-2px); background-position: 100% 0%;
  box-shadow: 0 0 22px rgba(91,194,214,.55), 0 0 42px rgba(192,97,168,.45), 0 16px 34px -10px rgba(107,63,160,.6);
}
/* pulsierender Neon-Glow am Haupt-CTA im Hero */
.hero-cta .btn-primary { animation: pulseGlow 2.8s ease-in-out infinite; }
.hero-cta .btn-primary:hover { animation-play-state: paused; }
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(192,97,168,0), 0 12px 28px -10px rgba(46,107,176,.6); }
  50%      { box-shadow: 0 0 22px rgba(0,240,255,.45), 0 0 38px rgba(192,97,168,.4), 0 12px 30px -8px rgba(46,107,176,.6); }
}
.btn-ghost { background: rgba(255,255,255,.12); color: #fff; border: 1.5px solid rgba(255,255,255,.5); }
.btn-ghost:hover { transform: translateY(-2px); background: rgba(255,255,255,.2); }
.section-alt .btn-ghost, .usp .btn-ghost { color: var(--ink); border-color: var(--line); background: #fff; }

/* ============ HERO BACKGROUND & RETRO SCENERY ============ */
.hero {
  position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center;
  text-align: center; overflow: hidden; padding: 120px 24px 80px; color: #fff;
}
.hero-synth { padding-bottom: 0; }

/* Nachthimmel mit Sternengitter-Overlay */
.hero-bg {
  position: absolute; inset: 0; z-index: -6;
  background:
    radial-gradient(120% 80% at 50% 92%, rgba(255, 0, 127, 0.28), transparent 60%),
    linear-gradient(180deg, var(--sw-bg1) 0%, #110222 35%, var(--sw-bg2) 75%, #080114 100%);
}
.hero-bg::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 0, 170, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 0, 170, 0.05) 1px, transparent 1px);
  background-size: 55px 55px;
  opacity: 0.65;
}

/* CRT-Scanlines */
.hero-synth::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.18) 2px 3px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent);
  opacity: .4; mix-blend-mode: multiply;
}

/* Gestreifte Outrun-Sonne */
.hero-sun {
  position: absolute; z-index: -5; left: 50%; top: 44%; transform: translate(-50%, -50%);
  width: min(450px, 70vw); aspect-ratio: 1; border-radius: 50%;
  background: linear-gradient(180deg, #ffe600 0%, #ff8c00 35%, #ff007f 72%, #b00074 100%);
  box-shadow: 0 0 100px 15px rgba(255, 0, 127, 0.55), 0 0 45px rgba(255, 170, 0, 0.35);

  -webkit-mask-image: linear-gradient(180deg,
    #000 0% 50%,
    transparent 50% 52%, #000 52% 56%,
    transparent 56% 59%, #000 59% 64%,
    transparent 64% 68%, #000 68% 74%,
    transparent 74% 79%, #000 79% 86%,
    transparent 86% 92%, #000 92% 100%
  );
  mask-image: linear-gradient(180deg,
    #000 0% 50%,
    transparent 50% 52%, #000 52% 56%,
    transparent 56% 59%, #000 59% 64%,
    transparent 64% 68%, #000 68% 74%,
    transparent 74% 79%, #000 79% 86%,
    transparent 86% 92%, #000 92% 100%
  );
}

/* Bergkette am Horizont */
.hero-mountains {
  position: absolute; left: 0; right: 0; bottom: 33%; height: 168px; z-index: -4;
  background: url("../assets/mountains.svg") repeat-x bottom center / auto 100%;
  filter: drop-shadow(0 0 15px rgba(0,240,255,.45));
  will-change: transform; pointer-events: none; opacity: 0.95;
}
/* Skyline */
.hero-cityline {
  position: absolute; left: 0; right: 0; bottom: 33%; height: 78px; z-index: -5; opacity: .2;
  background: url("../assets/skyline.svg") repeat-x bottom center / auto 100%;
}

/* Perspektivischer Neon-Grid-Boden (Korrigierte Ebenenreihenfolge!) */
.hero-floor {
  position: absolute; left: -50%; right: -50%; bottom: 0; height: 36%; z-index: -4;
  background-image:
    /* Horizontale Linien */
    linear-gradient(rgba(255, 0, 170, 0.75) 1.5px, transparent 1.5px),
    /* Vertikale Linien */
    linear-gradient(90deg, rgba(0, 240, 255, 0.7) 1.5px, transparent 1.5px),
    /* Bodenglühen unter den Linien */
    linear-gradient(180deg, rgba(10, 3, 22, 0.9) 0%, rgba(255, 0, 170, 0.2) 60%, rgba(0, 240, 255, 0.45) 100%);
  background-size: 100% 45px, 45px 100%, 100% 100%;

  /* Starke 3D-Verzerrung */
  transform: perspective(200px) rotateX(75deg); transform-origin: top center;
  opacity: 0.9;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.5) 20%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.5) 20%, #000 100%);
}

.hero-glow { position: absolute; border-radius: 50%; filter: blur(90px); z-index: -3; opacity: .4; }
.hero-glow-1 { width: 380px; height: 380px; background: var(--cyan); top: -60px; left: -90px; }
.hero-glow-2 { width: 440px; height: 440px; background: var(--magenta); bottom: 12%; right: -110px; }

/* Bodenglühen am Horizont */
.hero-floor-glow {
  position: absolute; left: 0; right: 0; bottom: 0; height: 30%; z-index: -3; pointer-events: none;
  background: radial-gradient(120% 100% at 50% 100%, rgba(255, 0, 170, 0.25), transparent 65%);
}

/* Parallax-Palmen */
.hero-palm {
  position: absolute; bottom: -8px; z-index: -2; width: clamp(160px, 21vw, 320px);
  aspect-ratio: 200 / 320; background: url("../assets/palm.svg") no-repeat bottom / contain;
  will-change: transform; pointer-events: none;
}
.hero-palm-left {
  left: -15px;
  filter: drop-shadow(0 0 15px rgba(0, 240, 255, 0.6)) drop-shadow(0 0 4px rgba(255, 255, 255, 0.3));
}
.hero-palm-right {
  right: -15px; transform: scaleX(-1);
  filter: drop-shadow(0 0 15px rgba(255, 0, 170, 0.6)) drop-shadow(0 0 4px rgba(255, 255, 255, 0.3));
}

/* Sportwagen mit Bodenschatten-Glow */
.hero-car {
  position: absolute; right: clamp(20px, 6vw, 120px); bottom: 2.5%; z-index: -2;
  width: clamp(240px, 32vw, 480px); aspect-ratio: 520 / 230;
  background: url("../assets/car.svg") no-repeat bottom right / contain;
  filter: drop-shadow(0 0 25px rgba(255, 0, 170, 0.7)) drop-shadow(0 0 8px rgba(0, 240, 255, 0.4));
  will-change: transform; pointer-events: none;
}
.hero-car::after {
  content: ""; position: absolute; left: 10%; bottom: -4px; width: 80%; height: 10px;
  background: radial-gradient(ellipse at center, rgba(255, 0, 170, 0.8), rgba(255, 0, 170, 0) 70%);
  filter: blur(5px);
}

/* ============ TYPOGRAFIE & TEXT-STYLING ============ */
.hero-content { position: relative; max-width: 860px; z-index: 1; }
.hero-bird-wrap { margin-bottom: 12px; }
.hero-bird {
  width: 132px; height: 132px; margin: 0 auto;
  filter: drop-shadow(0 0 24px rgba(255, 255, 255, 0.75)) drop-shadow(0 4px 14px rgba(0, 0, 0, 0.6));
  animation: hover 4s ease-in-out infinite;
}
.hero-title { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; width: 100%; overflow: visible; }

/* Metallic Chrome Text-Effekt (Inklusive seitlichem Padding zur Vermeidung von Text-Clipping) */
.hero-brand {
  font-family: var(--font-head); font-weight: 900; font-style: italic;
  font-size: clamp(2.2rem, 7.8vw, 4.4rem); letter-spacing: .02em; line-height: 1.05;
  text-transform: uppercase;
  display: inline-block;
  max-width: 100%;
  padding: 0 16px; /* Sicherheitsabstand für die Neon-Drop-Shadows */
  background: linear-gradient(180deg, #ffffff 0%, #e8cfff 35%, #ff00b7 72%, #8400ff 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 10px rgba(255, 0, 170, 0.8)) drop-shadow(0 0 25px rgba(0, 240, 255, 0.5));
  animation: neonFlicker 2.4s ease-out .2s 1 both;
}

@keyframes neonFlicker {
  0%   { opacity: .2; filter: drop-shadow(0 0 2px rgba(0,240,255,.2)); }
  6%   { opacity: 1;  filter: drop-shadow(0 0 22px rgba(0,240,255,.85)); }
  9%   { opacity: .3; }
  12%  { opacity: 1;  filter: drop-shadow(0 0 26px rgba(255,0,170,.9)); }
  16%  { opacity: .5; }
  19%  { opacity: 1; }
  24%  { opacity: .7; }
  27%  { opacity: 1;  filter: drop-shadow(0 0 20px rgba(255,0,170,.6)); }
  100% { opacity: 1;  filter: drop-shadow(0 0 14px rgba(255,0,170,.6)) drop-shadow(0 0 30px rgba(0,240,255,.4)); }
}
.hero-tagline {
  font-family: var(--font-tech); font-weight: 800; text-transform: uppercase;
  letter-spacing: .32em; font-size: clamp(.75rem, 2vw, 1.05rem); color: var(--sw-gold);
  text-shadow: 0 0 15px rgba(255, 170, 0, 0.8), 0 0 5px rgba(255, 255, 255, 0.4);
}

/* Glassmorphism-Box mit Neon-Verlaufsrand */
.hero-frame {
  max-width: 630px; margin: 0 auto 32px; padding: 22px 30px; border-radius: 16px;
  background: rgba(13, 2, 33, 0.78);
  box-shadow: 0 0 25px rgba(255, 0, 170, 0.25), inset 0 0 15px rgba(0, 240, 255, 0.1);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  position: relative;
}
.hero-frame::before {
  content: ""; position: absolute; inset: -1.5px; border-radius: 16px;
  padding: 1.5px;
  background: linear-gradient(135deg, var(--sw-pink) 0%, var(--sw-cyan) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; opacity: 0.85;
}
.hero-lead { font-size: clamp(1rem, 2.4vw, 1.14rem); color: rgba(255,255,255,0.95); margin: 0; }

/* ============ NEON INTERACTIVE BUTTONS ============ */
.hero-cta { display: flex; gap: 18px; justify-content: center; align-items: center; flex-wrap: wrap; }

/* Kassetten-Button (Pink) */
.btn-cassette {
  font-family: var(--font-tech); font-weight: 700; font-size: .92rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--sw-pink); cursor: pointer;
  padding: 14px 28px; border-radius: 14px; display: inline-flex; align-items: center; gap: 12px;
  background: var(--sw-panel); border: 2px solid var(--sw-pink);
  box-shadow: 0 0 16px rgba(255, 0, 170, 0.6), inset 0 0 12px rgba(255, 0, 170, 0.2);
  transition: transform .2s, box-shadow .3s, background .3s, color .3s;
  animation: pulseNeon 2.8s ease-in-out infinite;
}
.btn-cassette svg {
  stroke: currentColor; transition: stroke .3s, filter .3s;
  filter: drop-shadow(0 0 4px var(--sw-pink));
}
.btn-cassette:hover {
  transform: translateY(-3px) scale(1.02); background: rgba(255, 0, 170, 0.16); color: #fff;
  box-shadow: 0 0 28px rgba(255, 0, 170, 0.95), 0 0 45px rgba(0, 240, 255, 0.4), inset 0 0 14px rgba(255, 0, 170, 0.35);
  animation-play-state: paused;
}
.btn-cassette:hover svg {
  stroke: #fff; filter: drop-shadow(0 0 8px #fff);
}

@keyframes pulseNeon {
  0%, 100% { box-shadow: 0 0 14px rgba(255, 0, 170, 0.5), inset 0 0 10px rgba(255, 0, 170, 0.15); }
  50%      { box-shadow: 0 0 28px rgba(255, 0, 170, 0.85), 0 0 35px rgba(255, 0, 170, 0.25), inset 0 0 14px rgba(255, 0, 170, 0.25); }
}

/* Retro-Telefon Button (Cyan) */
.btn-neon-phone {
  font-family: var(--font-tech); font-weight: 700; font-size: .92rem; letter-spacing: .03em; color: var(--sw-cyan);
  padding: 14px 26px; border-radius: 999px; display: inline-flex; align-items: center; gap: 10px;
  background: var(--sw-panel); border: 2px solid var(--sw-cyan);
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.55), inset 0 0 12px rgba(0, 240, 255, 0.15);
  transition: transform .2s, box-shadow .3s, color .3s, background .3s;
}
.btn-neon-phone svg {
  stroke: currentColor; transition: stroke .3s, filter .3s;
  filter: drop-shadow(0 0 4px var(--sw-cyan));
}
.btn-neon-phone:hover {
  transform: translateY(-3px) scale(1.02); color: #fff; background: rgba(0, 240, 255, 0.16);
  box-shadow: 0 0 28px rgba(0, 240, 255, 0.9), 0 0 45px rgba(255, 0, 170, 0.4), inset 0 0 14px rgba(0, 240, 255, 0.3);
}
.btn-neon-phone:hover svg {
  stroke: #fff; filter: drop-shadow(0 0 8px #fff);
}

/* Joystick-Button (Pink) */
.hero-joystick {
  display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px;
  border-radius: 50%; color: var(--sw-pink); border: 2px solid var(--sw-pink); background: var(--sw-panel);
  box-shadow: 0 0 16px rgba(255, 0, 170, 0.55), inset 0 0 10px rgba(255, 0, 170, 0.15);
  transition: transform .2s, box-shadow .3s, color .3s, border-color .3s;
}
.hero-joystick svg {
  filter: drop-shadow(0 0 4px var(--sw-pink));
  transition: color .3s, filter .3s;
}
.hero-joystick:hover {
  transform: translateY(-3px) rotate(-12deg) scale(1.05); color: #fff; border-color: var(--sw-cyan);
  box-shadow: 0 0 26px rgba(0, 240, 255, 0.85), 0 0 40px rgba(255, 0, 170, 0.4);
}
.hero-joystick:hover svg {
  color: var(--sw-cyan); filter: drop-shadow(0 0 8px var(--sw-cyan));
}

.hero-scroll {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  width: 26px; height: 42px; border: 2px solid rgba(255,255,255,.5); border-radius: 999px;
}
.hero-scroll span {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 8px; background: #fff; border-radius: 2px; animation: scroll 1.6s infinite;
}
@keyframes scroll { 0% { opacity: 0; top: 8px; } 50% { opacity: 1; } 100% { opacity: 0; top: 22px; } }

/* ============ SECTIONS ============ */
.section { padding: 90px 0; }
.section-alt { background: var(--paper-alt); }
.section-head { max-width: 760px; margin: 0 auto 54px; text-align: center; }
.eyebrow {
  display: inline-block; font-family: var(--font-head); font-weight: 700; font-size: .78rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--purple);
  background: linear-gradient(90deg, rgba(91,194,214,.18), rgba(155,109,181,.18));
  padding: 6px 14px; border-radius: 999px; margin-bottom: 16px;
}
.section-head h2 {
  font-family: var(--font-head); font-weight: 800; font-size: clamp(1.7rem, 4vw, 2.6rem);
  line-height: 1.15; color: var(--ink); margin-bottom: 14px;
}
.section-head p { color: var(--ink-soft); font-size: 1.05rem; }

/* ---------- Unterseiten-Kopf & CTA-Band (Multipage) ---------- */
.page-hero {
  background: var(--grad-hero); color: #fff; text-align: center;
  padding: 124px 0 56px; position: relative; overflow: hidden;
}
.page-hero .eyebrow { color: #fff; background: rgba(255,255,255,.16); }
.page-hero h1 {
  font-family: var(--font-head); font-weight: 800; line-height: 1.12; margin: 0;
  font-size: clamp(1.9rem, 4.4vw, 3rem);
}
.page-hero-lead { color: rgba(255,255,255,.9); font-size: 1.05rem; max-width: 680px; margin: 14px auto 0; }

/* Sprachen-Kärtchen (Über uns) – dunkles Neon-Kärtchen passend zum Vice-City-Theme */
.lang-card {
  max-width: 760px; margin: 0 auto; text-align: center;
  background: linear-gradient(180deg, rgba(14,22,46,.72) 0%, rgba(9,14,30,.72) 100%);
  border: 1px solid rgba(0,240,255,.22); border-radius: 18px;
  padding: 42px 32px;
  box-shadow: 0 0 26px -12px rgba(0,240,255,.35), 0 18px 40px -22px rgba(0,0,0,.85);
}
.lang-card h2 {
  font-family: var(--font-head); font-weight: 800; color: #eef4ff;
  font-size: clamp(1.5rem, 3vw, 2rem); margin: 14px 0 8px;
}
.lang-card p { color: rgba(255,255,255,.74); max-width: 560px; margin: 0 auto 24px; }
.lang-chips { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.lang-chip {
  font-family: var(--font-head); font-weight: 700; font-size: .98rem; color: #eef4ff;
  padding: 11px 20px; border-radius: 999px;
  background: rgba(0,240,255,.08);
  border: 1px solid rgba(0,240,255,.35);
  box-shadow: 0 0 14px -6px rgba(0,240,255,.5), inset 0 0 12px -8px rgba(0,240,255,.6);
}

.cta-band { background: var(--grad-hero); color: #fff; text-align: center; padding: 72px 0; }
.cta-band h2 { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom: 10px; }
.cta-band p { color: rgba(255,255,255,.9); margin: 0 auto 26px; max-width: 560px; }
.teaser-actions { text-align: center; margin-top: 36px; }

/* reveal animation */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ============ USP ============ */
.usp { padding: 70px 0; }
.usp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

/* Schlichte, statische USP-Kacheln – dunkel, eine ruhige Cyan-Linie, dezenter Hover
   (löst die bunten Flip-Karten ab; Inhalt direkt sichtbar). */
.usp-tile {
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(14,22,46,.72) 0%, rgba(9,14,30,.72) 100%);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 30px 26px;
  text-align: left;
  color: inherit; text-decoration: none; cursor: pointer;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.usp-tile:hover,
.usp-tile:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(0,240,255,.40);
  box-shadow: 0 16px 38px -24px rgba(0,0,0,.85), inset 0 0 0 1px rgba(0,240,255,.10);
}
.usp-tile:focus-visible { outline: 2px solid var(--sw-cyan); outline-offset: 3px; }
/* „Mehr erfahren →" – dezent, rückt am Ende der Kachel, animiert beim Hover */
.usp-more {
  margin-top: auto; padding-top: 16px; font-family: var(--font-head); font-weight: 700;
  font-size: .82rem; letter-spacing: .02em; color: var(--sw-cyan);
  opacity: .8; transition: opacity .25s ease, transform .25s ease;
}
.usp-tile:hover .usp-more,
.usp-tile:focus-visible .usp-more { opacity: 1; transform: translateX(4px); }
.usp-ico {
  width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 12px; margin-bottom: 18px;
  color: var(--sw-cyan);
  background: rgba(0,240,255,.07);
  border: 1px solid rgba(0,240,255,.22);
}
.usp-ico svg { width: 24px; height: 24px; }
.usp-tile h3 {
  font-family: var(--font-head); font-weight: 700; font-size: 1.1rem;
  color: #eef4ff; margin: 0 0 8px; letter-spacing: .005em;
}
.usp-tile p { color: rgba(255,255,255,.66); font-size: .95rem; line-height: 1.5; margin: 0; }
.usp-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 24px; text-align: center; box-shadow: var(--shadow-sm);
  transition: transform .25s, box-shadow .25s; position: relative; overflow: hidden;
}
.usp-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--grad-brand);
}
.usp-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.usp-card h3 { font-family: var(--font-head); font-size: 1.08rem; margin-bottom: 6px; }
.usp-card p { font-size: .92rem; color: var(--ink-soft); }

/* ============ IMAGE PLACEHOLDERS ============ */
.img-ph {
  position: relative; background:
    repeating-linear-gradient(45deg, rgba(46,107,176,.05) 0 14px, rgba(155,109,181,.05) 14px 28px),
    var(--paper-alt);
  border: 2px dashed rgba(107,63,160,.35); border-radius: var(--radius);
  display: grid; place-items: center; min-height: 220px; overflow: hidden;
}
.img-ph::after {
  content: attr(data-label);
  font-family: var(--font-head); font-weight: 600; font-size: .9rem; color: var(--purple);
  text-align: center; padding: 10px 16px; opacity: .85;
}

/* ============ TEAM ============ */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.team-card { text-align: center; }
.team-img { aspect-ratio: 1/1; min-height: 0; border-radius: var(--radius); margin-bottom: 16px; }
.team-card h3 { font-family: var(--font-head); font-size: 1.2rem; }
.team-role { color: var(--purple); font-weight: 500; font-size: .92rem; }

/* ============ CLASSES ============ */
.class-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 40px; }
.class-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 22px;
  position: relative; overflow: hidden; transition: transform .25s, box-shadow .25s;
}
.class-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--grad-brand);
}
.class-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.class-badge {
  font-family: var(--font-head); font-weight: 900; font-size: 1.6rem; color: #fff;
  width: 64px; height: 64px; display: grid; place-items: center; border-radius: 16px;
  background: var(--grad-btn); margin-bottom: 16px; box-shadow: var(--shadow-sm);
}
.class-card h3 { font-family: var(--font-head); margin-bottom: 8px; }
.class-card p { font-size: .92rem; color: var(--ink-soft); }

.info-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.info-box {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px;
}
.info-box h4 { font-family: var(--font-head); font-size: 1.02rem; margin-bottom: 10px; }
.info-box p { font-size: .94rem; color: var(--ink-soft); margin-bottom: 4px; }
.info-box .muted { font-size: .85rem; }
.info-box-accent { background: var(--grad-hero); color: #fff; border: none; }
.info-box-accent h4, .info-box-accent p { color: #fff; }
.link-arrow { display: inline-block; margin-top: 8px; font-weight: 600; color: var(--cyan-light); }

.muted { color: var(--ink-soft); opacity: .8; }

/* ============ FLEET ============ */
.fleet-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.fleet-img { aspect-ratio: 16/10; min-height: 0; }

/* ============ SIDEBOARD ============ */
.sideboard { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.sideboard-text h2 { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.6rem,3.5vw,2.3rem); margin: 12px 0 14px; }
.sideboard-text p { color: var(--ink-soft); margin-bottom: 24px; }
.sideboard-img { aspect-ratio: 4/3; min-height: 0; }

/* Standort-Slideshow: Empfang + Schulungsraum (Crossfade alle 5 s) */
.room-slideshow {
  position: relative; margin: 0; aspect-ratio: 4/3; background: #0a0420;
  border-radius: var(--radius); overflow: hidden; cursor: pointer;
  border: 1px solid rgba(0,240,255,.3);
  box-shadow: 0 0 26px -10px rgba(0,240,255,.45), 0 18px 40px -22px rgba(0,0,0,.8);
}
.sideboard:has(.room-slideshow) { align-items: start; }
.room-slide {
  position: absolute; inset: 0; overflow: hidden;
  opacity: 0; transition: opacity 1s ease;
}
.room-slide.is-active { opacity: 1; }
.room-slide img {
  position: relative; z-index: 1; display: block;
  width: 100%; height: 100%; object-fit: cover;
}
.room-slideshow::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(to top, rgba(8,2,20,.6), transparent 42%);
}
.room-slide-caption {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  font-family: var(--font-head); font-weight: 700; font-size: .78rem;
  letter-spacing: .08em; text-transform: uppercase; color: #fff;
  padding: 6px 13px; border-radius: 999px;
  background: rgba(8,2,20,.55); border: 1px solid rgba(0,240,255,.4);
  box-shadow: 0 0 14px -2px rgba(0,240,255,.5); backdrop-filter: blur(6px);
}
.room-slide-dots {
  position: absolute; right: 14px; bottom: 17px; z-index: 2; display: flex; gap: 7px;
}
.room-slide-dots i {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,.35); transition: background .35s, box-shadow .35s;
}
.room-slide-dots i.is-active { background: #00f0ff; box-shadow: 0 0 8px #00f0ff; }
@media (prefers-reduced-motion: reduce) {
  .room-slide { transition: none; }
}

/* ============ REVIEWS (echte Google-Rezensionen, Endlos-Marquee) ============ */
.reviews-summary {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; flex-wrap: wrap; margin-top: 4px;
}
.rs-score { font-size: 2.2rem; font-weight: 800; color: var(--ink); line-height: 1; }
.rs-stars { color: #f5a623; font-size: 1.3rem; letter-spacing: 2px; }
.rs-count {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--muted); font-weight: 600; text-decoration: none;
}
.rs-count:hover { color: var(--purple); }
.rs-count svg { width: 20px; height: 20px; display: block; }

.review-marquee {
  margin-top: 30px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.review-track {
  display: flex; gap: 24px; width: max-content; padding: 8px 24px;
  animation: review-scroll 70s linear infinite;
}
/* Pause bei Hover und bei Tastatur-Fokus innerhalb des Sliders */
.review-marquee:hover .review-track,
.review-marquee:focus-within .review-track { animation-play-state: paused; }
@keyframes review-scroll {
  from { transform: translateX(-50%); } /* zweite (geklonte) Kartenhälfte sichtbar */
  to   { transform: translateX(0); }    /* läuft sichtbar von links nach rechts */
}

.review-card {
  flex: 0 0 min(340px, 82vw); width: min(340px, 82vw); height: 300px;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow-sm);
}
.rc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.rc-avatar {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 1.15rem;
  background: var(--av, var(--purple));
}
.rc-meta { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.rc-name { font-weight: 700; color: var(--ink); }
.rc-date { font-size: .8rem; color: var(--muted); }
.rc-google { width: 20px; height: 20px; flex: 0 0 20px; margin-left: auto; }
.stars { color: #f5a623; font-size: 1.1rem; letter-spacing: 2px; margin-bottom: 12px; }
.review-card blockquote {
  font-size: .95rem; line-height: 1.55; color: var(--ink); margin: 0;
  position: relative; flex: 1 1 auto; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7;
}
/* sanfter Auslauf für gekürzte (lange) Rezensionen */
.review-card blockquote::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.2em;
  background: linear-gradient(transparent, #fff); pointer-events: none;
}
.reviews-note { text-align: center; margin-top: 30px; font-size: .9rem; }
.reviews-note a { color: var(--purple); font-weight: 600; text-decoration: none; }
.reviews-note a:hover { text-decoration: underline; }

/* Barrierefreiheit: keine Bewegung → statisches, umbrechendes Raster, Klone aus */
@media (prefers-reduced-motion: reduce) {
  .review-marquee { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .review-track {
    animation: none; width: auto; flex-wrap: wrap; justify-content: center;
    transform: none; padding: 8px 0;
  }
  .review-card.is-clone { display: none; }
}

/* ============ GAME ============ */
.section-game { background: transparent; color: #fff; }
.section-game .eyebrow { color: #fff; background: rgba(255,255,255,.15); }
.section-game .section-head h2 { color: #fff; }
.section-game .section-head p { color: rgba(255,255,255,.85); }
.game-wrap { display: flex; justify-content: center; }
.game-stage { position: relative; width: 960px; max-width: 100%; }
#gameCanvas {
  width: 100%; height: auto; display: block; border-radius: var(--radius);
  background: linear-gradient(180deg, #2a1a5e 0%, #6b2f8c 60%, #b3417f 100%);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.6); touch-action: manipulation;
}
.game-overlay {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(14, 6, 28, 0.78); backdrop-filter: blur(5px); border-radius: var(--radius);
  transition: opacity .3s; text-align: center;
}
.game-overlay.hide { opacity: 0; visibility: hidden; }
.game-overlay-inner h3 { font-family: var(--font-head); font-size: 1.4rem; margin-bottom: 8px; }
.game-overlay-inner p { margin-bottom: 18px; color: rgba(255,255,255,.85); }
.game-hud {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-head); font-weight: 600; font-size: .95rem; color: #fff;
  background: rgba(0,0,0,.25); padding: 6px 16px; border-radius: 999px; white-space: nowrap;
}

/* ============ CONTACT ============ */
.contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; }
.contact-form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow-sm); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form label { display: block; margin-bottom: 16px; font-size: .9rem; font-weight: 500; }
.contact-form label > span { display: block; margin-bottom: 6px; color: var(--ink); }
.contact-form input, .contact-form select, .contact-form textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: var(--font); font-size: .95rem; background: var(--paper-alt); transition: border-color .2s, box-shadow .2s;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  outline: none; border-color: var(--blue-mid); box-shadow: 0 0 0 3px rgba(59,111,196,.15); background: #fff;
}
.form-check { display: flex; align-items: flex-start; gap: 10px; font-weight: 400 !important; }
.form-check input { width: auto; margin-top: 4px; }
.form-check .link { color: var(--blue); text-decoration: underline; }
.form-success { display: none; color: var(--teal); font-weight: 600; margin-top: 8px; }
.form-success.show { display: block; }
.form-success.error { color: #ff6b6b; }
/* Honeypot-Feld: für Menschen unsichtbar (nicht display:none, damit Bots es ausfüllen) */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.form-note { font-size: .82rem; margin-top: 12px; }
.form-degner-btn { margin-top: 10px; align-self: flex-start; }

.contact-side { display: flex; flex-direction: column; gap: 24px; }
.contact-info { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.contact-info h3 { font-family: var(--font-head); margin-bottom: 16px; }
.contact-line { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-weight: 500; color: var(--ink); }
.contact-ig { color: var(--purple); }
.contact-ig:hover { text-decoration: underline; }
.contact-ig svg { width: 20px; height: 20px; flex: 0 0 20px; }
.ci-ico { font-size: 1.1rem; }
.opening { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 16px; }
.opening h4 { font-family: var(--font-head); margin-bottom: 10px; font-size: 1rem; }
.opening ul { list-style: none; }
.opening li { display: flex; justify-content: space-between; padding: 4px 0; font-size: .92rem; color: var(--ink-soft); }
.map-ph { aspect-ratio: 4/3; min-height: 0; }
.map-embed { aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
.map-embed iframe { display: block; width: 100%; height: 100%; }

/* ---------- Interaktive Karte (MapLibre, Hameln & Umgebung) ---------- */
.maplibre-map { width: 100%; height: 100%; background: #0d0221; }
.map-embed { background: #0d0221; }

/* Neon-Standort-Marker (Label + Pin) – hebt die Fahrschule hervor.
   WICHTIG: keine transform-Animation auf .fl-marker (= MapLibre-Wurzel), nur auf Kindern. */
.fl-marker { display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.fl-marker-label {
  font-family: var(--font-head); font-weight: 700; font-size: .72rem; letter-spacing: .01em;
  color: #fff; white-space: nowrap; margin-bottom: 5px; padding: 3px 9px; border-radius: 999px;
  background: rgba(13,2,33,.92); border: 1px solid rgba(0,240,255,.55);
  box-shadow: 0 0 12px rgba(255,45,143,.5), 0 0 5px rgba(0,240,255,.45);
  text-shadow: 0 0 6px rgba(0,240,255,.6);
}
.fl-pin { position: relative; line-height: 0;
  filter: drop-shadow(0 0 7px rgba(255,45,143,.85)) drop-shadow(0 0 13px rgba(0,240,255,.5)); }
.fl-pin svg { display: block; position: relative; z-index: 1; }
.fl-pin-pulse {
  position: absolute; left: 50%; top: 17px; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px;
  border-radius: 50%; background: rgba(0,240,255,.45); z-index: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .fl-pin-pulse { animation: flPinPulse 2s ease-out infinite; }
}
@keyframes flPinPulse {
  0%   { transform: scale(.5); opacity: .85; }
  70%  { transform: scale(3.6); opacity: 0; }
  100% { transform: scale(3.6); opacity: 0; }
}

/* Popup im Neon-/Dark-Stil */
.maplibregl-popup-content {
  background: rgba(13,2,33,.96); color: #fff;
  border: 1px solid rgba(0,240,255,.45); border-radius: 12px;
  box-shadow: 0 0 22px rgba(255,0,170,.3), 0 12px 30px -12px rgba(0,0,0,.8);
  padding: 14px 16px; font-family: var(--font);
}
.maplibregl-popup-close-button { color: #fff; font-size: 18px; right: 4px; padding: 0 6px; }
.maplibregl-popup-close-button:hover { color: var(--sw-cyan); background: transparent; }
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: rgba(13,2,33,.96); }
.maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: rgba(13,2,33,.96); }
.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: rgba(13,2,33,.96); }
.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: rgba(13,2,33,.96); }
.fl-popup-inner { display: flex; flex-direction: column; gap: 4px; }
.fl-popup-inner strong { font-family: var(--font-head); font-size: 1rem; }
.fl-popup-inner span { color: rgba(255,255,255,.8); font-size: .88rem; }
.fl-popup-inner a { color: var(--sw-cyan); font-weight: 600; font-size: .9rem; }
.fl-popup-inner a:hover { text-decoration: underline; }
.fl-popup-route { margin-top: 4px; color: #ff5db0 !important; }

/* ============ FOOTER ============ */
.footer { background: #0a0118; color: #fff; padding: 96px 0 34px; position: relative; overflow: hidden; }
.footer-skyline {
  position: absolute; inset: 0; z-index: 0;
  /* Hamelner Altstadt bei Nacht – Skyline-Band, unten bündig (Häuser stehen auf der Footer-Kante) */
  background: url("../assets/footer-hameln.jpg?v=1") center bottom / cover no-repeat;
}
.footer-skyline::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,2,24,.82) 0%, rgba(10,2,24,.50) 48%, rgba(10,2,24,.52) 100%);
}
.footer-inner { text-shadow: 0 1px 8px rgba(0,0,0,.65); }
.footer .footer-inner { position: relative; z-index: 1; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand .nav-bird { opacity: .95; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.footer-brand strong { font-family: var(--font-head); display: block; letter-spacing: .03em; }
.footer-brand span { font-size: .8rem; color: rgba(255,255,255,.6); letter-spacing: .12em; text-transform: uppercase; }
.footer-links { display: flex; gap: 22px; }
.footer-links a { color: rgba(255,255,255,.8); font-size: .92rem; }
.footer-links a:hover { color: var(--cyan-light); }
.footer-ig { display: inline-flex; align-items: center; }
.footer-ig svg { display: block; width: 20px; height: 20px; }
.footer-copy { font-size: .85rem; color: rgba(255,255,255,.55); }

/* ============ COOKIE ============ */
.cookie {
  position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 1500;
  max-width: 760px; margin: 0 auto; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 24px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  transform: translateY(160%); transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.cookie.show { transform: translateY(0); }
.cookie p { font-size: .9rem; color: var(--ink-soft); flex: 1; min-width: 220px; }
.cookie-actions { display: flex; gap: 10px; }

/* ============ RTL (Arabisch / Kurdisch) ============ */
html[dir="rtl"] .opening li, html[dir="rtl"] .footer-inner { direction: rtl; }
html[dir="rtl"] body { text-align: right; }

/* ============ RESPONSIVE ============ */
/* schmalerer Desktop: Telefon nur als Icon (Nummer im Kontaktbereich) */
@media (max-width: 1320px) {
  .nav-phone-num { display: none; }
  .nav-phone { padding: 9px; }
}
@media (max-width: 980px) {
  .usp-grid, .class-grid, .info-row { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid, .sideboard { grid-template-columns: 1fr; }
  .fleet-grid { grid-template-columns: 1fr; }
}
/* Tablet & kleiner: Hamburger-Menü */
@media (max-width: 1150px) {
  .nav-links {
    position: fixed; top: 64px; right: 0; width: 270px; height: calc(100vh - 64px);
    flex-direction: column; overflow-y: auto;
    background: rgba(13, 2, 33, 0.97); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-left: 1px solid rgba(0,240,255,.2); padding: 24px;
    box-shadow: -10px 0 40px -16px rgba(0,0,0,.7); transform: translateX(110%);
    transition: transform .3s; gap: 4px; justify-content: flex-start;
  }
  .nav-links.open { transform: translateX(0); }
  .nav-links a { font-size: 1rem; padding: 12px 14px; }
  .nav-toggle { display: flex; }
}
@media (max-width: 760px) {
  .nav-brand-text { font-size: .95rem; }
  .usp-grid, .class-grid, .info-row, .team-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .section { padding: 64px 0; }
}

/* ============ BARRIEREFREIHEIT: Bewegung reduzieren ============ */
@media (prefers-reduced-motion: reduce) {
  .hero-brand, .btn-cassette, .hero-bird, .hero-scroll span,
  .intro-bird, .intro-text { animation: none !important; }
  .hero-brand { opacity: 1; }
  .intro-text { opacity: 1; }
  .hero-palm, .hero-mountains, .hero-car { transform: none !important; }
  .hero-palm-right { transform: scaleX(-1) !important; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   FAHRSCHULE LIBERTÉ — Ultimative "Vice City" Edition
   Optimiert basierend auf image_03a0da.jpg & styles_2.css
   ============================================================ */

:root {
  /* Kern-Farbpalette laut Stylesheet[cite: 2] */
  --blue-deep:   #1b3a8b;
  --blue:        #2e6bb0;
  --cyan:        #00f0ff; /* Optimiertes Neon-Cyan[cite: 2] */
  --sw-pink:     #ff00aa; /* Optimiertes Neon-Pink[cite: 2] */
  --sw-gold:     #ffd23d; /* Sonnen-Gold[cite: 2] */
  --sw-bg-dark:  #080114;
  --sw-panel:    rgba(13, 2, 33, 0.78);

  --font-head:   'Montserrat', system-ui, sans-serif;
  --font-tech:   'Orbitron', sans-serif;
}

/* 1. HERO BASIS & HINTERGRUND */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 100px 24px;
  background: radial-gradient(120% 80% at 50% 92%, rgba(255, 0, 127, 0.28), transparent 60%),
              linear-gradient(180deg, #080114 0%, #160326 75%, #080114 100%);
  color: #fff;
  z-index: 1;
}

/* Die gestreifte Outrun-Sonne im Zentrum[cite: 2] */
.hero-sun {
  position: absolute;
  z-index: -5;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  width: min(500px, 80vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffe600 0%, #ff8c00 35%, #ff007f 72%);
  box-shadow: 0 0 80px rgba(255, 0, 127, 0.5);
  -webkit-mask-image: linear-gradient(180deg, #000 0% 50%, transparent 50% 52%, #000 52% 56%, transparent 56% 59%, #000 59% 64%, transparent 64% 68%, #000 68% 74%, transparent 74% 79%, #000 79% 86%, transparent 86% 92%, #000 92% 100%);
  mask-image: linear-gradient(180deg, #000 0% 50%, transparent 50% 52%, #000 52% 56%, transparent 56% 59%, #000 59% 64%, transparent 64% 68%, #000 68% 74%, transparent 74% 79%, #000 79% 86%, transparent 86% 92%, #000 92% 100%);
}

/* 2. ATMOSPHÄRE & LANDSCHAFT (STAGING WIE IM SCREENSHOT) */
.hero-mountains {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 25%; /* Horizont-Linie wie im Bild */
  height: 180px;
  z-index: -4;
  background: url("../assets/mountains.svg") repeat-x bottom center / auto 100%;
  filter: drop-shadow(0 0 15px rgba(0, 240, 255, 0.4));
  opacity: 0.9;
}

.hero-floor {
  position: absolute;
  left: -50%;
  right: -50%;
  bottom: 0;
  height: 25%;
  z-index: -4;
  background-image:
    linear-gradient(var(--sw-pink) 1.5px, transparent 1.5px),
    linear-gradient(90deg, var(--cyan) 1.5px, transparent 1.5px);
  background-size: 100% 45px, 45px 100%;
  transform: perspective(150px) rotateX(70deg);
  transform-origin: top center;
  opacity: 0.8;
}

.hero-palm {
  position: absolute;
  bottom: 0;
  z-index: -2;
  width: clamp(230px, 30vw, 440px);
  aspect-ratio: 460 / 800;
  background: url("../assets/palm-neon-1.png") no-repeat bottom / contain;
}
.hero-palm-left { left: -40px; filter: none; }
.hero-palm-right { right: -40px; transform: scaleX(-1); filter: none; background-image: url("../assets/palm-neon-2.png"); }

.hero-car {
  position: absolute;
  right: 2%;
  bottom: 0;
  z-index: -2;
  width: clamp(320px, 42vw, 660px);
  aspect-ratio: 1400 / 645;
  background: url("../assets/car-lambo.png") no-repeat bottom right / contain;
  filter: drop-shadow(0 0 18px rgba(255, 0, 170, 0.45)); /* dezenter Szenen-Glow; PNG bringt eigenen Neon mit */
}

/* 3. TYPOGRAFIE (CHROME & NEON EFFEKT) */
.hero-brand {
  font-family: var(--font-head);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(2.5rem, 8.5vw, 5.2rem);
  text-transform: uppercase;
  background: linear-gradient(180deg, #fff 0%, #d5f3ff 45%, var(--sw-pink) 55%, #6a00f4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.8)) drop-shadow(0 0 25px rgba(255, 0, 170, 0.7));
  margin-bottom: 5px;
  display: inline-block;
}

.hero-tagline {
  font-family: var(--font-tech);
  font-weight: 800;
  color: var(--sw-gold);
  letter-spacing: 0.25em;
  font-size: clamp(0.8rem, 2.2vw, 1.2rem);
  text-shadow: 0 0 15px rgba(255, 210, 61, 0.8);
  margin-bottom: 20px;
}

/* 4. CONTENT-BOX & BUTTONS */
.hero-frame {
  max-width: 680px;
  margin: 0 auto 30px;
  padding: 25px 35px;
  border-radius: 12px;
  background: var(--sw-panel); /* Dunkles Glas-Panel[cite: 2] */
  border: 1.5px solid rgba(255, 0, 170, 0.5);
  backdrop-filter: blur(15px);
  box-shadow: 0 0 30px rgba(255, 0, 170, 0.2);
}

.hero-cta {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

/* Kassetten-Design für "Jetzt anmelden"[cite: 2] */
.btn-cassette {
  font-family: var(--font-tech);
  color: #fff;
  border: 2px solid var(--sw-pink);
  padding: 12px 28px;
  border-radius: 10px;
  background: rgba(15, 8, 28, 0.9);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 0 15px var(--sw-pink);
  transition: 0.3s;
}

/* Pille für Telefonnummer[cite: 2] */
.btn-neon-phone {
  font-family: var(--font-tech);
  color: #fff;
  border: 2px solid var(--cyan);
  padding: 12px 28px;
  border-radius: 50px; /* Pillenform wie im Screenshot */
  background: rgba(15, 8, 28, 0.9);
  box-shadow: 0 0 15px var(--cyan);
}

/* Joystick zentriert darunter[cite: 2] */
.hero-joystick-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 15px;
}

.hero-joystick {
  width: 55px;
  height: 55px;
  border: 2px solid var(--cyan);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--cyan);
  background: var(--sw-panel);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.4);
}

/* CRT SCANLINES OPTIONAL[cite: 2] */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, transparent 0 2px, rgba(0,0,0,0.15) 2px 4px);
  pointer-events: none;
  z-index: 2;
}

/* ============================================================
   HERO ALS BILD — Bild 2 als Hintergrund + echte Klickflächen
   (.hero-img trägt bewusst KEINE .hero-Klasse → keine Altlasten)
   ============================================================ */
.hero-img { position: relative; display: block; background: #0a0118; overflow: hidden; }
.hero-stage {
  position: relative; width: 100%; line-height: 0;
  transform-origin: 50% 50%;
  animation: heroBreath 16s ease-in-out infinite;
}
.hero-photo { width: 100%; height: auto; display: block; }

/* dekorative Animations-Overlays */
.hero-fx { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.hero-fx-scan {
  background: repeating-linear-gradient(180deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.12) 2px 3px);
  mix-blend-mode: multiply; opacity: .4;
}
.hero-fx-glow {
  background: radial-gradient(44% 40% at 50% 32%, rgba(255,198,46,.16), transparent 70%);
  mix-blend-mode: screen; animation: heroGlow 5s ease-in-out infinite;
}
.hero-fx-sweep {
  background: linear-gradient(115deg, transparent 41%, rgba(150,235,255,.10) 49%, rgba(255,255,255,.16) 50%, rgba(255,120,220,.10) 51%, transparent 59%);
  background-size: 250% 100%; background-position: 130% 0;
  mix-blend-mode: screen; animation: heroSweep 8s linear infinite;
}
@keyframes heroSweep  { 0% { background-position: 130% 0; } 100% { background-position: -70% 0; } }
@keyframes heroGlow   { 0%,100% { opacity: .4; } 50% { opacity: .9; } }
@keyframes heroBreath { 0%,100% { transform: scale(1); } 50% { transform: scale(1.015); } }

/* unsichtbare, klickbare Bereiche über den gemalten Buttons */
/* Unsichtbare, klickbare Bereiche über den gemalten Buttons – KEIN Glow/Rahmen.
   Bild bleibt pixelgenau; nur die Klick-Funktion liegt drüber. */
.hero-hot { position: absolute; z-index: 3; display: block; cursor: pointer; }
.hero-hot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.hero-hot-signup { left: 33.8%; top: 68.8%; width: 14.6%; height: 10.2%; }
.hero-hot-phone  { left: 48.6%; top: 68.8%; width: 10.4%; height: 10.2%; }
.hero-hot-game   { left: 61.7%; top: 66.5%; width: 5.2%;  height: 12.5%; }

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

@media (prefers-reduced-motion: reduce) {
  .hero-stage, .hero-fx-glow, .hero-fx-sweep { animation: none !important; }
}

/* ============================================================
   HERO ALS STRANDFOTO — Vice-City-Strandfoto als Hintergrund,
   darüber echte, scharfe & übersetzbare Inhalte (Logo, Titel,
   Claim, Glas-Box, Buttons). Neon-Look bleibt erhalten.
   ============================================================ */
.hero-beach {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: clamp(580px, 90vh, 900px);
  padding: 132px 0 96px;
  text-align: center;
  background: #0a1733 url("../assets/hero-city.jpg") center 45% / cover no-repeat;
  overflow: hidden;
}
/* Scrim: Mitte/oben abdunkeln (Textkontrast), unten in #0a1733 überblenden (Anschluss USP) */
.hero-beach-overlay {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(115% 85% at 50% 38%, rgba(8,4,28,.72), rgba(8,4,28,.32) 44%, rgba(8,4,28,0) 70%),
    linear-gradient(180deg, rgba(8,6,26,.50) 0%, rgba(8,6,26,0) 24%, rgba(8,6,26,0) 60%, #0a1733 100%);
}
.hero-beach .hero-fx-sweep { z-index: 1; }
.hero-beach .hero-content { z-index: 2; margin: 0 auto; }
/* Titel als Block → bricht bei schmalen Breiten am Leerzeichen um (nicht im Wort) */
.hero-beach .hero-brand {
  display: block; margin: 0 auto; max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .hero-beach .hero-fx-sweep { animation: none !important; }
}

/* Sanfter Übergang: dunkler Hero verläuft in den hellen Bereich (kein harter weißer Rand) */
.usp { position: relative; }
.usp::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 170px;
  background: linear-gradient(180deg, #0a1733 0%, rgba(10,23,51,0) 100%);
  pointer-events: none; z-index: 0;
}
.usp-grid { position: relative; z-index: 1; }

/* ============================================================
   FÜHRERSCHEINKLASSEN — SYNTHWAVE / OUTRUN-VARIANTE
   Neon-Karten im Vice-City-Look. Gescoped über .classes-synth — wird von
   klassen.html UND vom Klassen-Teaser auf index.html genutzt (beide Sektionen
   tragen .classes-synth + .classes-bg und teilen sich daher dieses CSS).
   Text bleibt echtes, gestochen scharfes, übersetzbares HTML (data-i18n).
   ============================================================ */
.classes-synth {
  position: relative; overflow: hidden;
  background: #0a0118;
}

/* --- Hintergrundbild: fertiges Vice-City-Panorama (ersetzt CSS-Sonne/Grid/Palmen) --- */
.classes-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("../assets/klassen-hero.jpg") center / cover no-repeat;
}
.classes-bg::after {   /* dunkler Scrim → Karten-/Textkontrast + Anschluss an dunkle Nachbar-Sektionen */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,1,20,.60) 0%, rgba(10,1,20,.38) 40%, rgba(10,1,20,.80) 100%);
}

/* CRT-Scanlines */
.classes-synth::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(180deg, transparent 0 2px, rgba(0,0,0,.16) 2px 3px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  opacity: .35; mix-blend-mode: multiply;
}
.classes-synth .container { position: relative; z-index: 2; }

/* --- Neon-Karten (überschreiben .class-card nur in dieser Sektion) --- */
.classes-synth .class-grid { gap: 24px; }
.classes-synth .class-card {
  --accent: var(--sw-cyan); --accent-soft: rgba(0,240,255,.5);
  background: linear-gradient(180deg, rgba(22,9,38,.92) 0%, rgba(11,4,22,.95) 100%);
  border: 2px solid var(--accent); border-radius: 20px;
  padding: 30px 24px 28px; overflow: visible;
  box-shadow: 0 0 20px -3px var(--accent-soft), inset 0 0 24px -12px var(--accent), 0 22px 46px -24px rgba(0,0,0,.9);
  transition: transform .25s ease, box-shadow .3s ease;
}
.classes-synth .class-card::before { display: none; }   /* obere Verlaufsleiste der Basis-Karte ausblenden */
.classes-synth .class-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 0 30px -2px var(--accent), 0 0 64px -14px var(--accent), inset 0 0 26px -10px var(--accent), 0 26px 54px -22px rgba(0,0,0,.95);
}
/* Akzentfarbe je Klasse (Reihenfolge B · BE · B96) */
.classes-synth .class-card:nth-child(1) { --accent:#00f0ff; --accent-soft:rgba(0,240,255,.5); }
.classes-synth .class-card:nth-child(2) { --accent:#ff2bb0; --accent-soft:rgba(255,43,176,.5); }
.classes-synth .class-card:nth-child(3) { --accent:#b14dff; --accent-soft:rgba(177,77,255,.5); }
.classes-synth .class-card:nth-child(4) { --accent:#ff3b67; --accent-soft:rgba(255,59,103,.5); }

/* Glänzendes Neon-Icon mit Klassenkürzel */
.classes-synth .class-badge {
  width: 76px; height: 76px; border-radius: 16px; margin: 0 0 20px;
  display: grid; place-items: center;
  font-family: var(--font-tech); font-weight: 800; font-size: 1.45rem; color: #fff;
  background: linear-gradient(157deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.03) 36%, rgba(0,0,0,.28) 100%), #0c0418;
  border: 1.5px solid var(--accent);
  box-shadow: 0 0 16px -2px var(--accent-soft), inset 0 0 14px -5px var(--accent), inset 0 1px 0 rgba(255,255,255,.28);
  text-shadow: 0 0 8px var(--accent), 0 0 18px var(--accent-soft);
}

/* Chrome-Titel im 80er-Look */
.classes-synth .class-card h3 {
  font-family: var(--font-head); font-weight: 900; font-style: italic;
  text-transform: uppercase; letter-spacing: .005em;
  font-size: 1.34rem; line-height: 1.08; margin: 0 0 12px;
  background: linear-gradient(180deg, #ffffff 0%, #e7eeff 40%, #a8b8de 58%, #ffffff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.45)) drop-shadow(0 0 8px var(--accent-soft));
}

/* Fließtext – scharf & gut lesbar auf dunklem Panel */
.classes-synth .class-card p { color: rgba(255,255,255,.82); font-size: .95rem; line-height: 1.55; }

/* Palmen auf kleinen Screens ausblenden, Sonne kompakter */
@media (max-width: 760px) {
  /* Hameln-Nachtbild mobil: Skyline-Band zeigen */
  .classes-bg { background-size: cover; background-position: center 45%; }
}
@media (prefers-reduced-motion: reduce) {
  .classes-synth .class-card { transition: none !important; }
}

/* ============================================================
   DARK SYNTHWAVE BODY (Juni 2026)
   Die bisher hellen „Standard-Website"-Sektionen auf den Vice-City-Look
   gebracht: dunkler Grund, Neon-Panels, Neon-Formular. Zentral hier
   gebündelt → leicht zu pflegen/zurückzunehmen.
   Backup vor diesem Umbau: ../fahrschule-liberte_backup_20260603_vor-darkmode
   ⏳ Fahrlehrer-FOTOS folgen später – Platzhalter (.img-ph) bleiben, nur dunkel.
   ============================================================ */

/* 1) Kern-Tokens: hell → dunkel/neon (wirkt global) */
:root {
  --paper:     #0c1a3e;   /* 2026-06-06: Grundton von Lila-Indigo auf Logo-Navy-Blau umgestellt (war #190b30) */
  --paper-alt: #122a52;   /* Navy statt Lila (war #21123f) */
  --ink:       #eaf1ff;   /* kühles Weiß-Blau statt Lavendel (war #ece7f6) */
  --ink-soft:  #a9bbdd;   /* Blau-Grau statt Lavendel (war #b1a8cc) */
  --line:      rgba(0,240,255,.18);
  --muted:     rgba(255,255,255,.62);
}
/* 2026-06-06: Seiten-Hintergrund = der Verlauf aus dem Seiten-Kopf (Violett→Blau→Teal/Cyan),
   fix über die ganze Seite gelegt → ein durchgehender „Vice-City"-Verlauf statt flachem Navy.
   Dunkler gehalten als der Kopf, damit Fließtext WCAG-AA-lesbar bleibt; Karten/Panels liegen darüber. */
body {
  background:
    radial-gradient(120% 90% at 50% 120%, rgba(200,80,180,.30), transparent 58%),
    radial-gradient(95% 75% at 6% -8%, rgba(150,80,200,.30), transparent 60%),
    var(--grad-hero);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* 2) 2026-06-06: KEINE eigene Sektions-Tönung mehr – sonst Absatz/Naht gegen den fixen
   Body-Verlauf. Sektion ist transparent, der durchgehende Verlauf scheint ungebrochen durch. */
.section-alt { background: transparent; }

/* B) 2026-06-06: Ambient-Glows entfernt – die scroll-mitlaufenden Lichtpools erzeugten
   gegen den fixen Body-Verlauf sichtbare Nähte an den Sektionskanten. Sektionen bleiben
   transparent, der eine durchgehende Verlauf trägt die Atmosphäre. */
.usp,
.section:not(.section-alt):not(.classes-synth):not(.section-game) {
  background: transparent;
}
/* 2026-06-06: page-hero nutzt KEINEN eigenen grad-hero mehr (sonst Naht zum fixen Body-Verlauf);
   nur dezente, durchscheinende Glows als Header-Akzent – der durchgehende Body-Verlauf bleibt sichtbar. */
.page-hero {
  background:
    radial-gradient(120% 90% at 50% 120%, rgba(200,80,180,.22), transparent 55%),
    radial-gradient(90% 70% at 12% -10%, rgba(0,240,255,.16), transparent 60%);
}
.page-hero h1 { text-shadow: 0 0 22px rgba(0,240,255,.35); }

/* 3) Neon-Panel-Look für früher weiße Karten/Boxen (Accent-Box ausgenommen) */
.usp-card, .info-box:not(.info-box-accent), .review-card, .contact-form, .contact-info {
  background: linear-gradient(180deg, rgba(10,20,44,.92) 0%, rgba(6,12,28,.96) 100%);
  border: 1px solid rgba(0,240,255,.22);
  box-shadow: 0 0 22px -10px rgba(0,240,255,.40), inset 0 0 26px -16px rgba(0,240,255,.35), 0 18px 40px -22px rgba(0,0,0,.8);
}
.usp-card:hover, .info-box:hover {
  box-shadow: 0 0 30px -8px rgba(0,240,255,.6), inset 0 0 26px -14px rgba(0,240,255,.4), 0 22px 46px -22px rgba(0,0,0,.9);
}
.usp-card::before { display: none; }
.info-box-accent { border: 1px solid rgba(0,240,255,.3); }

/* Text in Karten hell */
.usp-card h3, .info-box h4, .contact-info h3 { color: #eef4ff; }
.usp-card p, .info-box p, .info-box .muted, .opening li { color: rgba(255,255,255,.78); }

/* 4) Bewertungen */
.rs-score { color: #fff; }
.rs-stars, .stars { color: #ffd23d; }
.reviews-note a, .rs-count { color: var(--cyan-light); }
.rc-name, .review-card blockquote { color: #eef4ff; }
.review-card blockquote::after { background: linear-gradient(transparent, #06101f); }

/* 5) Basis-Neonkarte (.class-card, Cyan) = Grund-/Fallback-Stil. Beide Klassen-
      Sektionen (index-Teaser + klassen.html) legen über .classes-synth den
      Rainbow-Look drüber (höhere Spezifität → gewinnt). */
.class-card {
  background: linear-gradient(180deg, rgba(10,20,44,.92), rgba(6,12,28,.95));
  border: 2px solid var(--sw-cyan); border-radius: 20px;
  box-shadow: 0 0 22px -6px rgba(0,240,255,.5), inset 0 0 24px -12px var(--sw-cyan), 0 18px 40px -22px rgba(0,0,0,.85);
}
.class-card::before { display: none; }
.class-card h3 { color: #fff; }
.class-card p   { color: rgba(255,255,255,.8); }

/* 6) Formular (Conversion) – pink gerahmt wie der Hero-Frame */
.contact-form { border-color: rgba(200,80,180,.45); box-shadow: 0 0 30px -12px rgba(200,80,180,.4), inset 0 0 26px -16px rgba(0,240,255,.22); }
.contact-form label > span { color: rgba(255,255,255,.85); }
.contact-form input, .contact-form select, .contact-form textarea {
  background: rgba(8,2,20,.55); border-color: rgba(0,240,255,.22); color: #fff;
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(255,255,255,.6); }
.contact-form select option { background: #0e1d40; color: #eaf2ff; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  border-color: #00f0ff; background: rgba(8,2,20,.85);
  box-shadow: 0 0 0 3px rgba(0,240,255,.15), 0 0 16px rgba(0,240,255,.3);
}
.form-check .link, .form-success { color: var(--cyan-light); }

/* 7) Kontakt-Infos / Öffnungszeiten / Karte */
.contact-line { color: #ece7f6; }
.contact-ig { color: #7fd4e0; }
.opening { border-top-color: rgba(0,240,255,.2); }
.opening li strong, .opening li b { color: var(--cyan-light); }
.map-embed { border-color: rgba(0,240,255,.3); box-shadow: 0 0 26px -8px rgba(0,240,255,.4), 0 18px 40px -22px rgba(0,0,0,.8); }

/* 8) Bild-Platzhalter (Fotos folgen) – dunkel + Cyan statt hellgrau */
.img-ph {
  background:
    repeating-linear-gradient(45deg, rgba(0,240,255,.05) 0 14px, rgba(200,80,180,.05) 14px 28px),
    linear-gradient(180deg, #0e1d40, #06101f);
  border: 1.5px dashed rgba(0,240,255,.32);
}
.img-ph::after { color: rgba(0,240,255,.75); }

/* 9) Team-Namen / Rollen */
.team-card h3 { color: #fff; }
.team-role { color: #7fd4e0; }

/* 10) Eyebrow-Pills → Neon-Outline */
.eyebrow { color: #7fd4e0; background: rgba(0,240,255,.08); border: 1px solid rgba(0,240,255,.32); }

/* 11) Ghost-Buttons auf dunklem Grund */
.section-alt .btn-ghost, .usp .btn-ghost { color: #fff; border-color: rgba(0,240,255,.4); background: rgba(8,2,20,.4); }
.section-alt .btn-ghost:hover, .usp .btn-ghost:hover { background: rgba(0,240,255,.12); box-shadow: 0 0 16px rgba(0,240,255,.4); }

/* 12) Cookie-Banner dunkel */
.cookie { background: rgba(8,16,40,.96); border-color: rgba(0,240,255,.25); box-shadow: 0 0 30px rgba(0,240,255,.15), 0 18px 50px -20px rgba(0,0,0,.85); }
.cookie p { color: rgba(255,255,255,.85); }

/* 13) CTA-Band: dunkler Vice-City-Look (Navy) mit dezentem Neon-Sunset-Glow unten →
       dockt an den dunklen Footer (#0a0118) an. Gilt auf allen Seiten. */
.cta-band {
  background:
    radial-gradient(80% 120% at 50% 116%, rgba(255,120,40,.20), rgba(255,0,127,.16) 40%, transparent 68%),
    linear-gradient(180deg, #0a1733 0%, #0a0a24 52%, #0a0118 100%);
}

/* 14) Kontrast-Feinschliff (a11y): hellere Mikro-Texte (Footer-Copy, Platzhalter via #6/Tokens) */
.footer-copy { color: rgba(255,255,255,.72); }

/* Echte Fotos in den früheren Platzhaltern: füllen die Box (object-fit) + gerundet.
   Seitenverhältnis kommt von .sideboard-img (4/3) bzw. .team-img (1/1). 2026-06-06. */
.photo-real {
  display: block; width: 100%; object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 0 22px -10px rgba(0,240,255,.40), 0 18px 40px -22px rgba(0,0,0,.8);
}

/* ============================================================
   WHATSAPP – schwebender Kontakt-Button (alle Seiten). 2026-06-06.
   ============================================================ */
.wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; background: #25D366;
  box-shadow: 0 8px 22px -6px rgba(0,0,0,.55);
  transition: transform .2s ease, box-shadow .3s ease;
  animation: waPulse 2.8s ease-in-out infinite;
}
.wa-float svg { width: 30px; height: 30px; }
.wa-float:hover { transform: translateY(-2px) scale(1.06); box-shadow: 0 12px 28px -6px rgba(0,0,0,.6); animation-play-state: paused; }
.wa-float:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@keyframes waPulse {
  0%, 100% { box-shadow: 0 8px 22px -6px rgba(0,0,0,.55), 0 0 0 0 rgba(37,211,102,.5); }
  50%      { box-shadow: 0 8px 22px -6px rgba(0,0,0,.55), 0 0 0 12px rgba(37,211,102,0); }
}
@media (prefers-reduced-motion: reduce) { .wa-float { animation: none; } }
@media (max-width: 760px) { .wa-float { right: 16px; bottom: 16px; width: 52px; height: 52px; } }

/* Instagram – schwebender Button, direkt über dem WhatsApp-Button gestapelt */
.ig-float {
  position: fixed; right: 20px; bottom: 90px; z-index: 90;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  box-shadow: 0 8px 22px -6px rgba(0,0,0,.55);
  transition: transform .2s ease, box-shadow .3s ease;
}
.ig-float svg { width: 28px; height: 28px; }
.ig-float:hover { transform: translateY(-2px) scale(1.06); box-shadow: 0 12px 28px -6px rgba(0,0,0,.6); }
.ig-float:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (max-width: 760px) { .ig-float { right: 16px; bottom: 80px; width: 52px; height: 52px; } }

/* ============================================================
   FLIP-CARDS (Info-Boxen „Theorie / Fahrstunden / Zahlung / Preise")
   Vorne = Überschrift, hinten = Text. Dreh bei Hover (Desktop),
   Tap (Touch, via main.js .flipped) und Tastatur (Enter/Space).
   2026-06-06.
   ============================================================ */
.flip-card {
  --accent: #00f0ff; --accent-soft: rgba(0,240,255,.45);
  position: relative;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: 210px;
  perspective: 1100px;
  cursor: pointer;
}
.flip-inner {
  position: relative; width: 100%; height: 100%; min-height: inherit;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
  transform-style: preserve-3d;
}
.flip-card:hover .flip-inner,
.flip-card.flipped .flip-inner { transform: rotateY(180deg); }

.flip-front, .flip-back {
  position: absolute; inset: 0;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  display: flex; flex-direction: column; justify-content: center;
  border-radius: var(--radius); padding: 24px;
  border: 1.5px solid var(--accent);
  background: linear-gradient(180deg, rgba(10,20,44,.92) 0%, rgba(6,12,28,.96) 100%);
  box-shadow: 0 0 22px -6px var(--accent-soft), inset 0 0 26px -13px var(--accent), 0 18px 40px -22px rgba(0,0,0,.85);
  transition: box-shadow .3s ease;
}
.flip-card:hover .flip-front, .flip-card:hover .flip-back,
.flip-card.flipped .flip-front, .flip-card.flipped .flip-back {
  box-shadow: 0 0 32px -2px var(--accent), 0 0 64px -16px var(--accent), inset 0 0 26px -9px var(--accent), 0 24px 50px -22px rgba(0,0,0,.95);
}
.flip-back { transform: rotateY(180deg); }
.flip-front h4, .flip-front h3 { margin: 0; }
.flip-back p { margin: 0 0 4px; }

/* Akzent-Karte (Preise): dunkler Neon-Look wie die übrigen Karten,
   als Highlight in Gold statt im hellen Blau-Lila-Verlauf (passte nicht zum Vice-City-Look) */
.flip-card.info-box-accent { --accent: #ffd23d; --accent-soft: rgba(255,210,61,.5); }

/* USP-Flip aufgewertet: Neon-Icon-Badge + Chrome-Titel, pro Karte eigene Farbe */
.usp .flip-front, .usp .flip-back { align-items: center; text-align: center; }
.flip-badge {
  width: 64px; height: 64px; border-radius: 16px; margin: 0 auto 16px;
  display: grid; place-items: center;
  background: linear-gradient(157deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.03) 36%, rgba(0,0,0,.28) 100%), #0c0418;
  border: 1.5px solid var(--accent);
  box-shadow: 0 0 16px -2px var(--accent-soft), inset 0 0 14px -5px var(--accent), inset 0 1px 0 rgba(255,255,255,.28);
}
.flip-badge svg { width: 32px; height: 32px; fill: none; stroke: var(--accent); filter: drop-shadow(0 0 6px var(--accent-soft)); }
.flip-badge svg.fill { fill: var(--accent); stroke: none; }
.usp .flip-front h3 {
  font-family: var(--font-head); font-weight: 900; font-style: italic;
  text-transform: uppercase; letter-spacing: .005em; font-size: 1.12rem; line-height: 1.1;
  background: linear-gradient(180deg, #ffffff 0%, #e7eeff 40%, #a8b8de 58%, #ffffff 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.45)) drop-shadow(0 0 8px var(--accent-soft));
}

/* Sichtbarer Tastatur-Fokus */
.flip-card:focus-visible { outline: none; }
.flip-card:focus-visible .flip-front,
.flip-card:focus-visible .flip-back { outline: 2px solid var(--sw-cyan); outline-offset: 3px; }

/* Reduced Motion: kein 3D-Dreh, sofortiger Wechsel */
@media (prefers-reduced-motion: reduce) {
  .flip-inner { transition: none; }
}