/* ==========================================================================
   Studio-Theme — nur für die Folierungsseite (body.studio)

   Nimmt den Look des echten Studios auf: dunkles Carbon, blaues LED-Licht,
   das Hellblau des Wagens im Wandbild. Den Raum zeigt ein Foto der eigenen
   Halle, nicht nachgebaute Kulisse. Gelb bleibt der Hauptaktion reserviert
   (wie die Bremssättel am Wagen).

   Liegt bewusst in einer eigenen Datei: die übrigen Seiten behalten den
   hellen Auftritt und laden davon nichts.
   ========================================================================== */

body.studio {
  --studio-bg: #0e0f13;
  --studio-panel: #14161c;
  --studio-panel-2: #1a1d25;

  --led: #2b8cff;          /* LED-Streifen an der Wand */
  --led-bright: #7cc4ff;
  --lambo: #5bc8f5;        /* Hellblau des Wagens im Wandbild */

  --studio-line: rgba(124, 196, 255, .2);

  background: var(--studio-bg);
  color: #eef2f8;
}

/* --- Flächen -------------------------------------------------------------- */
body.studio .section { background: var(--studio-bg); color: #eef2f8; }
body.studio .section.is-marble { background: var(--studio-panel); }
body.studio .section.is-dark,
body.studio .section.is-carbon { background: var(--studio-panel-2); }
body.studio .section + .section { border-top: 1px solid rgba(255, 255, 255, .06); }

/* --- Text ----------------------------------------------------------------- */
body.studio h1, body.studio h2, body.studio h3 { color: #ffffff; }
body.studio p, body.studio .prose p, body.studio li { color: #b7c1d0; }
body.studio .lead { color: #cdd6e2; }
body.studio .section-head > p { color: #b7c1d0; }
body.studio .eyebrow, body.studio .label { color: var(--lambo); }
body.studio .eyebrow::before { background: linear-gradient(90deg, transparent, var(--led)); }
/* Buttons ausnehmen - sonst uebersteuert die Linkfarbe die Beschriftung
   und schwarzer Text auf Gelb wird zu hellblauem Text auf Gelb. */
body.studio a:not(.btn) { color: var(--led-bright); }
body.studio a.btn, body.studio a.btn:hover, body.studio a.btn:visited { color: var(--btn-ink); }

/* --- Kopfbereich: dunkel, mit LED-Kante ----------------------------------- */
body.studio .site-header {
  background: rgba(14, 15, 19, .9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #ffffff;
  border-bottom: 1px solid var(--studio-line);
  box-shadow: 0 1px 0 rgba(43, 140, 255, .35), 0 10px 30px -18px rgba(43, 140, 255, .9);
}
body.studio .brand, body.studio .brand:hover,
body.studio .nav-links a, body.studio .menu-toggle { color: #ffffff; }
body.studio .brand-top { color: var(--lambo); }
body.studio .nav-links a:hover,
body.studio .nav-links a[aria-current="page"] { border-bottom-color: var(--led); }

body.studio .mobile-menu { background: var(--studio-bg); color: #ffffff; }
body.studio .mobile-menu-links a { color: #ffffff; }
body.studio .mobile-menu-links a:hover { color: var(--led-bright); }
body.studio .mobile-menu-legal a { color: #8b97a8; }

/* --- Seitenkopf: echtes Studiofoto statt nachgebauter Kulisse -------------
   Vorher war der Kopf aus CSS-Verlaeufen zusammengesetzt: Holzlamellen als
   Streifenmuster, Leuchten als SVG-Band, Boden als gekipptes Schachbrett.
   Das blieb Dekoration ohne Tiefe - und vor allem war kein Fahrzeug und
   keine Arbeit zu sehen. Jetzt traegt das Foto der eigenen Halle den Kopf,
   der Rest haelt sich zurueck. */
body.studio .page-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(85% 115% at 76% 38%, rgba(43, 140, 255, .15), transparent 62%),
    linear-gradient(180deg, #0c0d11, var(--studio-bg));
  padding: 0;
}
body.studio .page-hero > .wrap { padding-block: 0; }
body.studio .page-hero h1 { font-weight: 400; letter-spacing: -.02em; margin-bottom: 1.1rem; }

.studio-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  gap: clamp(1.75rem, 5vw, 4.5rem);
  align-items: stretch;
}
.studio-hero-copy {
  align-self: center;
  padding-block: clamp(2.75rem, 6.5vw, 5.5rem);
}

.studio-hero-shot {
  position: relative;
  margin: 0;
  min-height: clamp(380px, 50vw, 620px);
}
.studio-hero-shot img {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 52% 42%;
}
/* Weicher Uebergang nach links, damit das Foto nicht abgeschnitten wirkt */
.studio-hero-shot::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--studio-bg) 0, rgba(14, 15, 19, .55) 16%, rgba(14, 15, 19, 0) 46%);
  pointer-events: none;
}

/* Drei Fakten statt erfundener Auszeichnungen */
.studio-facts {
  display: flex; flex-wrap: wrap;
  gap: .55rem 1.75rem;
  margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0;
  padding-top: 1.15rem;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, .13);
}
.studio-facts li {
  font-size: .82rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: #93a1b4;
}
.studio-facts li::before {
  content: ""; display: inline-block;
  width: .4rem; height: .4rem; margin-right: .65rem;
  background: var(--led);
  box-shadow: 0 0 8px var(--led);
  vertical-align: middle;
}

@media (max-width: 860px) {
  .studio-hero-grid { grid-template-columns: 1fr; gap: 0; }
  .studio-hero-shot {
    order: -1;
    min-height: clamp(240px, 58vw, 360px);
    margin-inline: calc(-1 * var(--gutter));
  }
  .studio-hero-shot::after {
    background: linear-gradient(180deg, rgba(14, 15, 19, .3) 0, rgba(14, 15, 19, 0) 40%, var(--studio-bg) 97%);
  }
  .studio-hero-copy { padding-top: clamp(1.25rem, 4vw, 2rem); }
}

/* --- Leistungen: Panele mit LED-Kante ------------------------------------- */
body.studio .svc {
  position: relative;
  background: linear-gradient(180deg, var(--studio-panel), var(--studio-panel-2));
  border-color: rgba(255, 255, 255, .09);
}
body.studio .svc::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, transparent, var(--led) 22%, var(--led) 78%, transparent);
  box-shadow: 0 0 14px 1px rgba(43, 140, 255, .7);
}
body.studio .svc .label { color: var(--led-bright); }

/* --- Karten, Buttons, Schnellkontakt -------------------------------------- */
body.studio .contact-card {
  background: var(--studio-panel);
  border-color: var(--studio-line);
}
body.studio .contact-card a.t-heading,
body.studio .tel-big { color: #ffffff; }

body.studio .btn-primary {
  --btn-ink: #1a1205;
  box-shadow: 0 0 0 1px rgba(255, 192, 0, .3), 0 10px 32px -14px rgba(255, 192, 0, .9);
}
body.studio .btn-outline {
  --btn-ink: #eaf4ff;
  border-color: var(--studio-line);
  background: rgba(43, 140, 255, .07);
}
body.studio .btn-outline:hover {
  border-color: var(--led);
  background: rgba(43, 140, 255, .16);
  box-shadow: 0 0 22px -8px var(--led);
}
body.studio .btn-ghost { --btn-ink: var(--led-bright); }

body.studio .quick-contact {
  background: rgba(14, 15, 19, .88);
  border-color: var(--studio-line);
}
body.studio .quick-contact a { color: #dbe8f7; border-color: var(--studio-line); }
body.studio .quick-contact a:hover { background: var(--led); color: #ffffff; }
@media (max-width: 760px) {
  body.studio .quick-contact { box-shadow: 0 -1px 0 var(--led), 0 -10px 26px -20px var(--led); }
}

/* --- Videos: im blauen Licht ---------------------------------------------- */
body.studio .video-player {
  border: 1px solid var(--studio-line);
  box-shadow: 0 0 0 1px rgba(43, 140, 255, .1), 0 0 44px -16px rgba(43, 140, 255, .95);
}
body.studio .video-sound {
  border-color: var(--studio-line);
  background: rgba(10, 12, 16, .74);
}
body.studio .video-sound:hover {
  border-color: var(--led);
  background: rgba(10, 12, 16, .92);
  box-shadow: 0 0 20px -8px var(--led);
}
body.studio .video-fallback { border-color: var(--studio-line); background: var(--studio-panel); }

/* --- Fuss ------------------------------------------------------------------ */
body.studio .site-footer {
  background: #0a0b0e;
  border-top: 1px solid var(--studio-line);
  box-shadow: inset 0 1px 0 rgba(43, 140, 255, .3);
}
body.studio .footer-grid h2 { color: var(--lambo); }
body.studio .footer-grid p, body.studio .footer-grid li { color: #98a4b4; }
body.studio .footer-grid a { color: #ffffff; }