/* =====================================================================
   Johann Pass – Kfz-Fachwerkstätte · Landtechnik – Website-Stylesheet
   ---------------------------------------------------------------------
   Handschrift dieses Betriebs (aus dem Logo abgeleitet):
     · dunkle Werkstatt-Grundstimmung (Anthrazit, Metall)
     · Gold als einzige Akzentfarbe (Zahnrad-Logo)
     · klare Groteske, kantige Radien (4–8 px)
     · durchgehend dunkel – bei jedem Besucher gleich
   Keine externen Ressourcen: keine Google Fonts, keine CDNs, keine Tracker.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Die Seite ist IMMER dunkel – Entscheidung vom 01.08.2026.

   Vorher richtete sie sich nach der Einstellung des Geräts. Das hatte
   einen Haken: Dieselbe Website sah bei jedem Besucher anders aus, je
   nachdem, wie sein Handy oder Rechner eingestellt war. Ein Betrieb
   braucht aber ein Gesicht, das man wiedererkennt.

   Dunkel ist die richtige Wahl, weil die ganze Handschrift aus dem Logo
   kommt: Anthrazit und Gold. Kopfzeile, Autobox, Portalband und Fuß sind
   ohnehin dunkel – auf hellem Grund kämpften sie dagegen an.
   --------------------------------------------------------------------- */
:root {
  color-scheme: dark;   /* Formularfelder und Rollbalken passen sich an */

  --gold:        #D9A331;
  --gold-hell:   #E8BE4D;
  --gold-dunkel: #9C7016;
  --kopf:        #1B1D21;

  /* Drei Ebenen, damit die Seite nicht als eine dunkle Fläche wirkt:
       --bg-tief   Autobox und Portalband  – vertieft
       --bg        die Seite selbst        – mittlere Ebene
       --bg-panel  Karten                  – angehoben                   */
  --bg:          #1A1D22;
  --bg-panel:    #24272D;
  --bg-tief:     #16171C;   /* exakt der Hintergrund der Übergangsclips */
  --text:        #E8E6E1;
  --text-neben:  #9AA0A6;
  --linie:       #33373D;
}

/* ---------------------------------------------------------------------
   Die Hausschrift: Barlow Condensed für alles Große.
   Eine kantige, verdichtete Schrift in der Art der DIN – die Schrift von
   Straßenschildern und Typenschildern. Liegt als Datei auf UNSEREM
   Server (schrift/), kein Google-Fonts-Aufruf, kein Tracking.
   Der Fließtext bleibt in der Systemschrift – die liest sich am besten.
   --------------------------------------------------------------------- */
@font-face {
  font-family: "Barlow Condensed";
  src: url("../schrift/barlow-condensed-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../schrift/barlow-condensed-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 17px;
}
img { max-width: 100%; height: auto; }
a { color: var(--gold); }
h1, h2, h3 {
  font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  font-weight: 600;
  line-height: 1.15; letter-spacing: 0.4px;
}
/* Die großen Überschriften wie ein Werkstattplakat: versal, kräftig.
   Verdichtete Schrift wirkt kleiner – deshalb größere Grade als vorher. */
h1 { font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; }
h2 { text-transform: uppercase; letter-spacing: 0.8px; }

/* ---------- Hinweis-Band (z. B. Urlaub) ---------- */
.hinweis-band {
  background: linear-gradient(90deg, var(--gold-hell), var(--gold));
  color: #1B1D21;
  text-align: center;
  font-weight: 600;
  padding: 9px 16px;
}

/* ---------- Kopfzeile ---------- */
.site-header {
  background: var(--kopf);
  border-bottom: 2px solid var(--gold);
  position: sticky; top: 0; z-index: 50;
}
.header-inner {
  max-width: 1160px; margin: 0 auto; padding: 10px 20px;
  display: flex; align-items: center; gap: 14px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-logo svg { width: 46px; height: 46px; display: block; }
.brand-name {
  display: block; color: var(--gold-hell); font-weight: 800;
  font-size: 19px; letter-spacing: 2px;
}
.brand-sub { display: block; color: #9AA0A6; font-size: 12px; letter-spacing: 1px; }

.main-nav { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.main-nav a {
  color: #C9CDD2; text-decoration: none; font-size: 15.5px; padding: 6px 2px;
  border-bottom: 2px solid transparent;
}
.main-nav a:hover { color: #fff; }
.main-nav a.active { color: var(--gold-hell); border-bottom-color: var(--gold); }
.main-nav a.nav-portal {
  background: linear-gradient(#E8BE4D, #A87718); color: #1B1D21;
  font-weight: 700; padding: 9px 16px; border-radius: 6px; border-bottom: none;
}
.main-nav a.nav-portal:hover { filter: brightness(1.07); }

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; margin-left: auto; }
.nav-toggle span { display: block; width: 26px; height: 3px; background: var(--gold); margin: 5px 0; border-radius: 2px; }

/* „Jetzt geöffnet" – kommt aus den Öffnungszeiten der Verwaltung */
.status-pille {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--text-neben); white-space: nowrap;
  border: 1px solid var(--linie); border-radius: 20px;
  padding: 4px 12px;
}
.status-pille.offen { color: #9FD6A5; border-color: rgba(120,190,130,0.35); }
.status-punkt {
  width: 8px; height: 8px; border-radius: 50%;
  background: #8A9099; flex: none;
}
.status-pille.offen .status-punkt {
  background: #63C56E;
  box-shadow: 0 0 6px rgba(99,197,110,0.8);
}

/* Das Zahnrad im Logo dreht sich mit dem Scroll-Fortschritt der Seite –
   ein kleines Erlebnis statt eines starren Bildes. Reines CSS über die
   Scroll-Zeitachse; Browser ohne Unterstützung zeigen das Logo einfach
   ruhig (und beim Darüberfahren dreht es sich weiterhin, das steckt im
   SVG selbst). */
@supports (animation-timeline: scroll()) {
  @media not (prefers-reduced-motion: reduce) {
    .brand-logo .rad {
      animation: rad-mitscrollen linear both;
      animation-timeline: scroll(root);
    }
  }
}
@keyframes rad-mitscrollen { to { transform: rotate(180deg); } }

/* ---------- Kopfbereich mit Auto ---------- */
.hero {
  max-width: 1160px; margin: 0 auto; padding: 48px 20px 30px;
  display: grid; grid-template-columns: 5fr 7fr; gap: 30px; align-items: center;
}
.hero-text h1 { font-size: 58px; color: var(--text); }
.hero-claim { margin: 16px 0 22px; color: var(--text-neben); max-width: 44ch; }
.hero-knoepfe { display: flex; gap: 12px; flex-wrap: wrap; }

.knopf {
  display: inline-block; text-decoration: none; font-weight: 700;
  padding: 12px 22px; border-radius: 6px; font-size: 16px;
  color: var(--text); border: 1px solid var(--linie); background: var(--bg-panel);
}
.knopf:hover { border-color: var(--gold); }
.knopf.gold {
  background: linear-gradient(#E8BE4D, #A87718); color: #1B1D21; border: none;
}
.knopf.gold:hover { filter: brightness(1.07); }
.knopf.klein { padding: 8px 14px; font-size: 14.5px; }

/* Die Bühne: Auto + Hotspots + Karte
   ---------------------------------------------------------------------
   Die Autos sind freigestellte PNG. Sie stehen aber NICHT auf dem
   Seitenhintergrund, sondern in einer eigenen dunklen Box – aus zwei
   Gründen:

   1. Die Übergangsclips haben einen dunklen Hintergrund (gemessen:
      #16171C = --bg-tief). Weil die Box genau diese Farbe hat, sieht man
      beim Abspielen keine Kante.
   2. Die Box liegt eine Spur tiefer als die Seite. Dadurch liest sie sich
      als ausgeleuchtete Halle, in der das Auto steht – die Seite wirkt
      nicht als eine einzige dunkle Fläche.                              */
.auto-buehne { position: relative; }
.auto-hinweis {
  text-align: center; color: #8B9099; font-size: 14px;
  margin: 0; padding-top: 4px;
}

/* Die Box hält Umschalter, Auto und Clip zusammen. */
.auto-box {
  background: var(--bg-tief);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  padding: 12px 12px 10px;
  box-shadow: 0 22px 50px rgba(0,0,0,0.30);
}

/* -------- Ebene 1: das Gerät --------
   Bewusst kräftiger als die Ansichtsreihe darunter: Hier entscheidet der
   Besucher, WORUM es geht – Auto, Mäher, Säge oder Traktor. Das ist die
   wichtigere der beiden Fragen und darf deshalb lauter sein.
   Ohne JavaScript stehen ohnehin alle Motive untereinander, dann sind
   diese Knöpfe wirkungslos, aber auch nicht störend.                  */
.welt-schalter {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.welt-knopf {
  background: none; color: var(--text-neben); cursor: pointer;
  border: 0; border-bottom: 2px solid transparent;
  padding: 5px 12px 6px; font: inherit;
  font-family: "Barlow Condensed", system-ui, sans-serif;
  font-weight: 700; font-size: 18px;
  text-transform: uppercase; letter-spacing: .6px;
  transition: color .2s, border-color .2s;
}
.welt-knopf:hover { color: var(--text); }
.welt-knopf.aktiv { color: var(--gold); border-bottom-color: var(--gold); }

/* -------- Ebene 2: die Ansicht --------
   Es gibt eine Reihe je Gerät, sichtbar ist immer nur die des gewählten.
   Geräte mit nur einem Motiv bekommen erst gar keine Reihe.
   Ohne JavaScript (kein .js an <html>) sind alle Reihen sichtbar – sonst
   wären die Sprungmarken zu den Ansichten nicht erreichbar.            */
.auto-schalter {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  margin-bottom: 10px;
}
html.js .auto-schalter { display: none; }
html.js .auto-schalter.aktiv { display: flex; }
.auto-knopf {
  background: rgba(255,255,255,0.05); color: #9AA0A6; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.10); border-radius: 20px;
  padding: 6px 14px; font: inherit; font-size: 14px;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.auto-knopf:hover { color: #E8E6E1; border-color: var(--gold); }
.auto-knopf.aktiv {
  background: linear-gradient(#E8BE4D, #A87718); color: #1B1D21;
  border-color: transparent; font-weight: 700;
}

/* Feld, in dem Ansichten und Clip übereinanderliegen.
   Die dunkle Box sitzt hier – exakt die Hintergrundfarbe der Clips. */
.auto-feld {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}
/* Lichtstimmung in der Box: ein warmer Schein von oben, ein Lichtfleck
   unter dem Auto – dadurch wirkt sie wie eine ausgeleuchtete Halle
   statt wie ein schwarzer Kasten. */
.auto-feld::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 46% at 50% -8%,  rgba(232,190,77,0.13), transparent 70%),
    radial-gradient(ellipse 58% 26% at 50% 92%,  rgba(217,163,49,0.16), transparent 72%);
}

/* Feste 16:9-Bühne: Beim Umschalten springt dadurch nichts, und der
   Übergangsclip – im selben Seitenverhältnis erzeugt – deckt sich genau. */
.auto-rahmen {
  position: relative;
  aspect-ratio: 16 / 9;
}
/* Ohne JavaScript stehen alle Ansichten untereinander – nichts geht verloren.
   Erst das Skript blendet aus und schaltet um. */
.js .auto-rahmen { display: none; }
.js .auto-rahmen.aktiv { display: block; }

/* Auto unten mittig in der Bühne, Breite je Ansicht (im HTML gesetzt).
   Der Körper ist genau so groß wie das Bild – daran hängen die Lichtebenen. */
.auto-koerper {
  position: absolute; left: 50%; bottom: 3.1%;
  transform: translateX(-50%) perspective(1500px) rotateY(var(--neigung, 0deg));
  transition: transform 0.5s ease-out;
}
/* Die Box ist immer dunkel, deshalb braucht der Schatten keine
   Hell-Variante – er darf in beiden Modi kräftig bleiben. */
.auto-bild {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 16px 22px rgba(0,0,0,0.55));
}

/* ---------- Licht auf dem Blech ----------
   Beide Ebenen benutzen das Auto-PNG als Maske (--auto-maske, im HTML je
   Ansicht gesetzt). Wo das Bild durchsichtig ist, ist auch das Licht weg –
   deshalb liegt der Schein exakt auf dem Auto und nicht als heller Fleck
   daneben. Genau das lässt die Bühne räumlich wirken.
   Beide sind reine Deko: pointer-events aus, aria-hidden im HTML.        */
.auto-glanz,
.auto-lampe,
.auto-welle {
  position: absolute; inset: 0;
  pointer-events: none;
  -webkit-mask-image: var(--auto-maske);
          mask-image: var(--auto-maske);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.45s ease;
}

/* 1. Der Reflex, der der Maus folgt – wie eine Lampe, die über dem Auto
      entlanggezogen wird. „soft-light" hellt nur auf, ohne die Farbe zu
      verfälschen. */
.auto-glanz {
  background: radial-gradient(ellipse 30% 60% at var(--mx, 50%) var(--my, 50%),
              rgba(255,238,200,0.60), rgba(255,214,120,0.18) 45%, transparent 72%);
  mix-blend-mode: soft-light;
}
.auto-feld.beruehrt .auto-glanz { opacity: 1; }

/* 2. Die Werkstattlampe: Zeigt der Besucher auf einen Punkt, tritt der Rest
      des Autos zurück und nur dieser Bereich bleibt im Licht. */
/* Radius in Pixeln, nicht in Prozent: Die Seitenansicht ist dreimal so breit
   wie hoch – ein Prozentwert würde daraus eine lange Ellipse machen, die über
   das halbe Auto läuft. Mit festem Radius bleibt der Lichtkegel rund, auf
   jeder Ansicht gleich. */
.auto-lampe {
  --kegel: 115px;
  background:
    radial-gradient(circle var(--kegel) at var(--lx, 50%) var(--ly, 50%),
      rgba(255,242,210,0.42), rgba(255,220,140,0.14) 55%, transparent 80%),
    radial-gradient(circle calc(var(--kegel) * 1.8) at var(--lx, 50%) var(--ly, 50%),
      transparent 0%, transparent 36%, rgba(5,6,8,0.74) 100%);
}
.auto-koerper.leuchtet .auto-lampe { opacity: 1; }

/* Solange die Lampe brennt, steht das Auto still – dann sitzen die Punkte
   exakt auf ihrem Bauteil. */
.auto-koerper.leuchtet { --neigung: 0deg; }

/* Browser ohne Masken (sehr alt) bekommen die Lichtebenen gar nicht erst –
   sonst läge ein dunkles Rechteck über der Bühne. */
@supports not ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  .auto-glanz, .auto-lampe, .auto-welle { display: none; }
}

/* =====================================================================
   DER AUFTRITT BEIM ÖFFNEN
   ---------------------------------------------------------------------
   Ein Lichtstreif wandert einmal über das Blech, danach erscheinen die
   Punkte nacheinander. Das ist nicht nur Schmuck: Der Besucher sieht in
   anderthalb Sekunden, dass sich am Auto etwas bewegen lässt – ohne dass
   es ihm jemand sagen muss.

   Alles hängt an der Klasse .auftritt, die das Skript setzt, sobald das
   erste Autobild geladen ist. Vorher wäre die Maske noch nicht da und
   der Lichtstreif liefe ins Leere.
   ===================================================================== */

/* Der Streif bewegt sich über die BILDPOSITION, nicht über transform –
   sonst wanderte die Maske mit und das Licht wäre nicht mehr aufs Auto
   beschränkt. */
.auto-welle {
  background: linear-gradient(100deg,
    transparent 38%, rgba(255,244,214,0.75) 50%, transparent 62%);
  background-size: 260% 100%;
  background-repeat: no-repeat;
  background-position: -70% 0;
  mix-blend-mode: screen;
}
@keyframes auto-welle-lauf {
  0%   { background-position: -70% 0;  opacity: 0; }
  12%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { background-position: 170% 0;  opacity: 0; }
}
@keyframes auto-punkt-auf {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.35); }
  60%  { opacity: 1; transform: translate(-50%, -50%) scale(1.18); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes auto-box-auf {
  from { opacity: 0; transform: translateY(26px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes hero-hoch {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

/* Versteckt wird erst, wenn das Skript den Auftritt auch wirklich startet
   (Klasse auftritt-bereit). So kann nichts unsichtbar hängenbleiben. */
.auftritt-bereit .auto-box { opacity: 0; }
.auftritt-bereit .auto-buehne.auftritt .auto-box {
  animation: auto-box-auf 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.auto-buehne.auftritt .auto-rahmen.aktiv .auto-welle {
  animation: auto-welle-lauf 1.45s ease-out 0.35s both;
}
/* Die Punkte kommen nach dem Licht, einer nach dem anderen */
.auftritt-bereit .auto-rahmen.aktiv .hotspot { opacity: 0; }
.auto-buehne.auftritt .auto-rahmen.aktiv .hotspot {
  animation: auto-punkt-auf 0.55s cubic-bezier(0.34, 1.4, 0.5, 1) both;
}
.auto-buehne.auftritt .auto-rahmen.aktiv button:nth-of-type(1) { animation-delay: 1.05s; }
.auto-buehne.auftritt .auto-rahmen.aktiv button:nth-of-type(2) { animation-delay: 1.19s; }
.auto-buehne.auftritt .auto-rahmen.aktiv button:nth-of-type(3) { animation-delay: 1.33s; }
.auto-buehne.auftritt .auto-rahmen.aktiv button:nth-of-type(4) { animation-delay: 1.47s; }

/* Nach dem Umschalten gilt der Auftritt nicht mehr – dort sollen die
   Punkte sofort da sein. */
.auftritt-bereit .auto-rahmen:not(.aktiv) .hotspot { opacity: 1; }

/* Der Text daneben steigt auf, leicht versetzt */
.auftritt-bereit .hero-text h1,
.auftritt-bereit .hero-claim,
.auftritt-bereit .hero-knoepfe { opacity: 0; }
.auftritt-bereit .hero-text h1     { animation: hero-hoch 0.65s cubic-bezier(0.22,1,0.36,1) 0.05s both; }
.auftritt-bereit .hero-claim       { animation: hero-hoch 0.65s cubic-bezier(0.22,1,0.36,1) 0.17s both; }
.auftritt-bereit .hero-knoepfe     { animation: hero-hoch 0.65s cubic-bezier(0.22,1,0.36,1) 0.29s both; }

/* Wer Bewegung reduziert haben möchte, bekommt kein Wandern, kein Neigen
   und keinen Auftritt – aber alles bleibt sichtbar und bedienbar. */
@media (prefers-reduced-motion: reduce) {
  .auto-koerper { transform: translateX(-50%); transition: none; }
  .auto-glanz, .auto-welle { display: none; }
  .auftritt-bereit .auto-box,
  .auftritt-bereit .auto-rahmen .hotspot,
  .auftritt-bereit .hero-text h1,
  .auftritt-bereit .hero-claim,
  .auftritt-bereit .hero-knoepfe { opacity: 1; animation: none; }
}

/* Übergangsclip liegt deckungsgleich über der Bühne */
/* Der Clip deckt sich mit der Bühne. Sein Hintergrund ist genau die
   Boxfarbe (#16171C) – deshalb sieht man beim Abspielen keine Kante. */
.auto-clip {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 3;
}
.auto-clip[hidden] { display: none; }

/* Hotspots: pulsierende Punkte */
.hotspot {
  position: absolute; transform: translate(-50%, -50%);
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid var(--gold-hell);
  background: rgba(217,163,49,0.25);
  cursor: pointer; padding: 0;
}
.hotspot span {
  display: block; width: 10px; height: 10px; border-radius: 50%;
  background: var(--gold-hell); margin: 8px auto;
}
.hotspot::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid rgba(232,190,77,0.55);
  animation: hotspot-puls 2s ease-out infinite;
}
@keyframes hotspot-puls {
  0%   { transform: scale(0.7); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}
.hotspot:hover, .hotspot.aktiv { background: rgba(217,163,49,0.5); }
@media (prefers-reduced-motion: reduce) {
  .hotspot::after { animation: none; }
  html { scroll-behavior: auto; }
}

/* Tafel unter dem Auto – immer gleich hoch, damit beim Öffnen der Karte
   nichts springt. Im Ruhezustand steht der Hinweis darin. */
/* Die Karte erscheint UNTER der Box – sie verdeckt damit nie das Bauteil,
   das sie erklärt. Vorher war hier ein fester Platz reserviert; der stand
   die meiste Zeit leer und ließ die Seite luftleer wirken. Jetzt wächst
   die Karte auf, wenn sie gebraucht wird. */
.auto-tafel { position: relative; }

.hotspot-karte {
  margin-top: 14px;
  background: var(--bg-panel); color: var(--text);
  border: 1px solid var(--gold); border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.28);
  animation: karte-auf 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes karte-auf {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hotspot-karte { animation: none; }
}
.hotspot-karte .karte-zu {
  position: absolute; top: 6px; right: 10px; background: none; border: 0;
  color: var(--text-neben); font-size: 22px; cursor: pointer;
}
.karte-name { color: var(--gold-hell); margin-bottom: 6px; font-size: 20px; }
.karte-preis { font-weight: 800; color: var(--gold-hell); margin-top: 6px; }
.karte-links { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }

/* ---------- News-Leiste (dezent) ---------- */
.news-leiste {
  max-width: 1160px; margin: 0 auto; padding: 10px 20px;
  display: flex; gap: 18px; align-items: baseline; flex-wrap: wrap;
  border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie);
}
.news-leiste-titel { color: var(--gold); font-weight: 700; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; }
.news-leiste-punkt { color: var(--text); text-decoration: none; font-size: 15.5px; }
.news-leiste-punkt:hover { color: var(--gold-hell); }
.news-leiste-datum { color: var(--text-neben); font-size: 13px; margin-right: 6px; }

/* ---------- Aktions-Band ---------- */
.aktion-band {
  max-width: 1160px; margin: 26px auto; padding: 0 20px;
  display: grid; grid-template-columns: 1fr 2fr; gap: 22px; align-items: center;
}
.aktion-band img { border-radius: 10px; border: 1px solid var(--linie); }
.aktion-band:has(> .aktion-band-text:only-child) { grid-template-columns: 1fr; }
.aktion-etikett {
  display: inline-block; background: var(--gold); color: #1B1D21;
  font-weight: 800; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 3px 10px; border-radius: 4px; margin-bottom: 8px;
}
.aktion-zeile { display: flex; align-items: center; gap: 14px; margin-top: 10px; flex-wrap: wrap; }
.aktion-preis { font-size: 22px; font-weight: 800; color: var(--gold-hell); }
.aktion-frist { color: var(--text-neben); font-size: 14px; }

/* ---------- Bereichs-Karten (Kfz / Landtechnik) ---------- */
.bereiche {
  max-width: 1160px; margin: 30px auto; padding: 0 20px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
}
/* Karten statt Tabellen: Die Trennlinien zwischen den Punkten ließen die
   Listen wie eine Preisliste aus dem Aktenordner wirken. Jetzt trägt ein
   kleiner goldener Strich je Zeile, die Karte hebt sich beim Zeigen an,
   und der Aufruf steht in beiden Karten auf gleicher Höhe unten. */
.bereich-karte {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  text-decoration: none; color: var(--text);
  background: var(--bg-panel); border: 1px solid var(--linie); border-radius: 14px;
  padding: 28px 28px 22px;
  transition: border-color 0.2s, transform 0.25s cubic-bezier(0.22,1,0.36,1), box-shadow 0.25s;
}
/* Goldener Streifen an der Oberkante – wächst beim Zeigen auf */
.bereich-karte::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold-hell), var(--gold-dunkel));
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1);
}
.bereich-karte:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(0,0,0,0.20);
}
.bereich-karte:hover::before { transform: scaleX(1); }

.bereich-karte h2 { color: var(--gold-hell); margin-bottom: 14px; font-size: 25px; }
.bereich-karte ul { list-style: none; flex: 1; }
.bereich-karte li {
  position: relative; padding: 7px 0 7px 20px; color: var(--text);
}
/* Kleiner goldener Winkel statt Trennlinie */
.bereich-karte li::before {
  content: ""; position: absolute; left: 2px; top: 50%;
  width: 7px; height: 7px; margin-top: -3px; border-radius: 2px;
  background: var(--gold); opacity: 0.75;
}
.bereich-mehr {
  display: inline-block; margin-top: 16px;
  color: var(--gold); font-weight: 700;
  transition: transform 0.2s;
}
.bereich-karte:hover .bereich-mehr { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .bereich-karte, .bereich-karte::before, .bereich-mehr { transition: none; }
  .bereich-karte:hover { transform: none; }
}

/* ---------- Kundenportal-Band ---------- */
/* Das Band bleibt in beiden Modi dunkel – wie die Kopfzeile, die Autobox
   und der Fuß. Dadurch bekommt die Seite einen Rhythmus aus hellen und
   dunklen Bändern, statt als ein einziger heller Block dazustehen. */
.portal-band {
  position: relative; overflow: hidden;
  background: var(--bg-tief);
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 2px solid var(--gold);
  margin-top: 40px;
}
.portal-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 55% 120% at 82% 50%,
              rgba(217,163,49,0.16), transparent 68%);
}
.portal-text {
  position: relative;
  max-width: 1160px; margin: 0 auto; padding: 46px 20px 48px;
  max-width: min(1160px, 100%);
}
.portal-text h2 { color: var(--gold-hell); margin-bottom: 8px; font-size: 28px; }
.portal-text > p { color: #B7BCC2; }

/* Die drei Vorteile nebeneinander statt als Aufzählung untereinander –
   so liest man sie auf einen Blick. */
.portal-text ul {
  list-style: none; margin: 22px 0 26px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.portal-text li {
  position: relative;
  color: #E8E6E1; padding: 14px 16px 14px 42px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
}
/* Goldener Haken vor jedem Punkt – reines CSS, kein Bild */
.portal-text li::before {
  content: ""; position: absolute; left: 16px; top: 50%;
  width: 6px; height: 12px; margin-top: -8px;
  border: solid var(--gold-hell);
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}
@media (max-width: 860px) {
  .portal-text ul { grid-template-columns: 1fr; gap: 10px; }
}

/* ---------- Kontakt kompakt ---------- */
.kontakt-kompakt {
  max-width: 1160px; margin: 0 auto; padding: 34px 20px 46px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
.kontakt-kompakt h2 { color: var(--gold-hell); font-size: 21px; margin-bottom: 8px; }

/* ---------- Unterseiten: Kopf ---------- */
.seitenkopf {
  max-width: 1160px; margin: 0 auto; padding: 44px 20px 8px;
}
.seitenkopf h1 { font-size: 34px; }
.seitenkopf p { color: var(--text-neben); margin-top: 8px; max-width: 62ch; }
.seitenkopf.land h1 { color: var(--gold-hell); }

/* ---------- Leistungsliste (Kfz) ---------- */
/* Jede Leistung: Bild und Text nebeneinander, Zeile für Zeile die Seite
   wechselnd. Die Bilder sind Ausschnitte aus denselben Aufnahmen wie das
   Startseiten-Auto – EIN Auto durch die ganze Website. */
.leistungs-liste { max-width: 1160px; margin: 20px auto 40px; padding: 0 20px; }
.leistung {
  display: grid; grid-template-columns: 5fr 6fr; gap: 34px;
  align-items: center;
  padding: 30px 0;
  border-top: 1px solid var(--linie);
  scroll-margin-top: 90px;      /* Anker landen nicht unter der Kopfzeile */
}
.leistung.wechsel .leistung-bild { order: 2; }   /* Bild abwechselnd rechts */
.leistung-bild { margin: 0; }
.leistung-bild img {
  display: block; width: 100%; height: auto;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 14px 34px rgba(0,0,0,0.30);
}
.leistung h2 { color: var(--gold-hell); margin-bottom: 8px; }
.leistung p { max-width: 60ch; }
.leistung-zeile { display: flex; align-items: center; gap: 18px; margin-top: 14px; flex-wrap: wrap; }
.leistung-termin { font-weight: 700; text-decoration: none; }
.leistung-termin:hover { text-decoration: underline; }

/* Ohne Bild nimmt der Text die ganze Breite ein – die Seite funktioniert
   auch, wenn Johann später Leistungen ohne Foto anlegt. */
.leistung:not(:has(.leistung-bild)) { grid-template-columns: 1fr; }

/* ---------- Die Plakette ----------
   Der Preis-Stempel der Website, angelehnt an die §57a-Plakette an der
   Windschutzscheibe: rund, gezackter Rand, leicht schräg aufgeklebt.
   Jeder in Österreich erkennt sie auf einen Blick.                      */
.plakette {
  display: inline-grid; place-items: center;
  width: 92px; height: 92px; border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.16), transparent 55%),
    linear-gradient(160deg, #E8BE4D, #A87718);
  transform: rotate(-7deg);
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
  position: relative;
  flex: none;
}
/* Zackenrand wie beim aufgeklebten Pickerl */
.plakette::before {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 2px dashed rgba(232,190,77,0.65);
}
/* innerer Ring */
.plakette::after {
  content: ""; position: absolute; inset: 7px; border-radius: 50%;
  border: 2px solid rgba(27,29,33,0.5);
}
.plakette span {
  color: #1B1D21; font-weight: 800; font-size: 15px; line-height: 1.15;
  text-align: center; max-width: 70px; padding: 2px;
}

/* Beim Erscheinen im Bildfenster gleiten die Zeilen sanft herein –
   reines CSS über die Sichtbarkeits-Zeitachse. Browser, die das nicht
   können, zeigen die Zeilen einfach sofort – deshalb steht alles in
   @supports. */
@supports (animation-timeline: view()) {
  @media not (prefers-reduced-motion: reduce) {
    .leistung {
      animation: leistung-herein linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
  }
}
@keyframes leistung-herein {
  from { opacity: 0.25; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Landtechnik ---------- */
.land-bereiche {
  max-width: 1160px; margin: 24px auto; padding: 0 20px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
}
.land-karte {
  background: var(--bg-panel); border: 1px solid var(--linie); border-radius: 14px;
  overflow: hidden;               /* Bild läuft bündig bis an den Kartenrand */
  padding: 0; scroll-margin-top: 90px;
}
.land-bild { display: block; width: 100%; height: auto; }
.land-karte-text { padding: 22px 24px 24px; }
.land-karte h2 { color: var(--gold-hell); margin-bottom: 8px; font-size: 22px; }

/* ---------- Werkstatt ---------- */
.werkstatt-text { max-width: 780px; margin: 18px auto 0; padding: 0 20px; }
.werkstatt-text p { margin-bottom: 14px; }
.werkstatt-fotos {
  max-width: 1160px; margin: 22px auto; padding: 0 20px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px;
}
.werkstatt-fotos img { border-radius: 8px; border: 1px solid var(--linie); }

/* ---------- Aktionen-Seite ---------- */
.aktions-liste { max-width: 900px; margin: 22px auto; padding: 0 20px; display: grid; gap: 22px; }
.aktions-karte {
  display: grid; grid-template-columns: 1fr 2fr; gap: 20px;
  background: var(--bg-panel); border: 1px solid var(--linie); border-radius: 10px;
  padding: 20px; align-items: center;
}
.aktions-karte:not(:has(img)) { grid-template-columns: 1fr; }
.aktions-karte img { border-radius: 8px; }
.aktions-karte h2 { color: var(--gold-hell); margin-bottom: 8px; }

/* ---------- Aktuelles ---------- */
.news-liste { max-width: 780px; margin: 22px auto; padding: 0 20px; }
.news-eintrag {
  border-left: 3px solid var(--linie);
  padding: 6px 0 18px 20px; margin-bottom: 18px;
}
.news-eintrag.typ-ankuendigung { border-left-color: var(--gold); }
.news-eintrag header { display: flex; gap: 12px; align-items: baseline; margin-bottom: 4px; }
.news-typ {
  font-size: 12.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--gold);
}
.news-eintrag time { color: var(--text-neben); font-size: 14px; }
.news-eintrag h2 { font-size: 22px; margin-bottom: 6px; }
.news-eintrag img { border-radius: 8px; margin: 8px 0; max-width: 420px; }

/* ---------- Kontakt-Seite ---------- */
.kontakt-spalten {
  max-width: 1160px; margin: 22px auto 46px; padding: 0 20px;
  display: grid; grid-template-columns: 2fr 3fr; gap: 34px; align-items: start;
}
.kontakt-daten h2 { color: var(--gold-hell); font-size: 20px; margin: 16px 0 6px; }
.kontakt-daten h2:first-child { margin-top: 0; }
.portal-hinweis { margin-top: 16px; color: var(--text-neben); }

.kontakt-formular form { display: grid; gap: 14px; }
.kontakt-formular label { display: block; font-weight: 600; font-size: 15px; }
.kontakt-formular input:not([type="checkbox"]),
.kontakt-formular textarea {
  display: block; width: 100%; margin-top: 5px;
  background: var(--bg-panel); color: var(--text);
  border: 1px solid var(--linie); border-radius: 6px;
  padding: 11px 12px; font: inherit;
}
.kontakt-formular input:focus, .kontakt-formular textarea:focus {
  outline: 2px solid var(--gold); outline-offset: 0; border-color: var(--gold);
}
.kontakt-formular .haken { display: flex; gap: 10px; font-weight: 400; font-size: 14.5px; }
.kontakt-formular .haken input { width: 18px; height: 18px; margin-top: 3px; }
.kontakt-formular button { justify-self: start; border: none; cursor: pointer; font: inherit; }

/* Honeypot: für Menschen unsichtbar, für Bots ein normales Feld */
.hp-feld { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.meldung { border-radius: 8px; padding: 16px 18px; margin-bottom: 16px; }
.meldung.ok { background: rgba(76,175,80,0.12); border: 1px solid #4CAF50; }
.meldung.warnung { background: rgba(217,163,49,0.12); border: 1px solid var(--gold); }
.meldung ul { margin-left: 18px; }

/* ---------- Rechtstexte + Hinweisblock ---------- */
.rechtstext { max-width: 780px; margin: 18px auto 46px; padding: 0 20px; }
.rechtstext h2 { color: var(--gold-hell); font-size: 20px; margin: 22px 0 6px; }
.hinweis-block { max-width: 780px; margin: 26px auto 46px; padding: 0 20px; }
.hinweis-block .knopf { margin: 4px 8px 4px 0; }

/* ---------- Fußzeile ---------- */
.site-footer { background: var(--kopf); color: #C9CDD2; border-top: 2px solid var(--gold); margin-top: 40px; }
.footer-grid {
  max-width: 1160px; margin: 0 auto; padding: 34px 20px;
  display: grid; grid-template-columns: auto 1fr 1fr 1fr; gap: 30px;
}
.footer-grid h4 { color: var(--gold-hell); margin-bottom: 6px; font-size: 15px; letter-spacing: 1px; }
.footer-grid a { color: #C9CDD2; }
.footer-grid a:hover { color: var(--gold-hell); }
.footer-logo { width: 72px; height: 72px; }
.footer-bottom {
  border-top: 1px solid #33373D; text-align: center;
  padding: 12px 20px; font-size: 13.5px; color: #9AA0A6;
}

/* ---------- Mobil ---------- */
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; padding-top: 30px; }
  .hero-text h1 { font-size: 42px; }
  .bereiche, .land-bereiche, .kontakt-kompakt, .kontakt-spalten { grid-template-columns: 1fr; }
  .aktion-band, .aktions-karte { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }

  .nav-toggle { display: block; }
  .main-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--kopf); flex-direction: column; align-items: stretch;
    padding: 10px 20px 16px; gap: 4px; border-bottom: 2px solid var(--gold);
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 11px 4px; font-size: 17px; border-bottom: 1px solid #2A2E34; }
  .main-nav a.nav-portal { text-align: center; margin-top: 8px; }

  /* Kleineres Auto, kleinerer Lichtkegel – sonst liegt er über allem. */
  .auto-lampe { --kegel: 70px; }

  /* Leistungen: Bild über Text statt nebeneinander */
  .leistung { grid-template-columns: 1fr; gap: 16px; }
  .leistung.wechsel .leistung-bild { order: 0; }
}

/* =====================================================================
   RÖNTGENBLICK
   ---------------------------------------------------------------------
   Zwei deckungsgleiche Bilder liegen übereinander. Sichtbar ist das
   lackierte Auto; das Schnittbild darüber ist fast vollständig
   ausmaskiert und wird nur in einem runden Fenster durchgelassen.

   Der Trick steckt in der Maske: Sie ist nicht so groß wie die Bühne,
   sondern nur so groß wie der Lichtkegel (--r · 2). Dadurch lässt sich
   das Fenster einfach über „mask-position" verschieben – von der
   CSS-Bewegung, wenn kein Zeigegerät da ist, oder vom Mauszeiger.

   Alles zu diesem Abschnitt steht hier, nichts davon wirkt woanders.
   ===================================================================== */
.roentgen {
  background: var(--bg-tief);
  padding: 46px 20px 40px;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}
.roentgen-kopf { max-width: 760px; margin: 0 auto 26px; text-align: center; }
.roentgen-kopf h2 {
  font-family: "Barlow Condensed", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(28px, 4.4vw, 46px);
  letter-spacing: .5px; text-transform: uppercase;
  margin: 0 0 10px; color: var(--text);
}
.roentgen-kopf p { margin: 0; color: var(--text-neben); font-size: 17px; }

.roentgen-buehne {
  --r: 150px;                 /* Radius des Lichtkegels */
  position: relative;
  max-width: 1180px; margin: 0 auto;
  aspect-ratio: 168 / 95;   /* das Seitenverhältnis der beiden Bilder,
                               damit nichts beschnitten wird */
  border-radius: 8px; overflow: hidden;
  background: #0B0C0F;
  cursor: crosshair;
}
.roentgen-lack,
.roentgen-innen { position: absolute; inset: 0; width: 100%; height: 100%; }
.roentgen-lack  { object-fit: cover; display: block; }

.roentgen-innen {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

  /* Die Maske ist genau ein Kreis in Kegelgröße. Weich auslaufend,
     damit die Kante nicht wie ausgeschnitten wirkt. */
  -webkit-mask-image: radial-gradient(circle closest-side,
          #000 0%, #000 62%, rgba(0,0,0,.35) 84%, transparent 100%);
          mask-image: radial-gradient(circle closest-side,
          #000 0%, #000 62%, rgba(0,0,0,.35) 84%, transparent 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: calc(var(--r) * 2) calc(var(--r) * 2);
          mask-size: calc(var(--r) * 2) calc(var(--r) * 2);

  /* Grundzustand: der Kegel wandert von selbst über das Auto.
     Das ist der Fall ohne JavaScript und auf Geräten ohne Maus. */
  -webkit-mask-position: 22% 58%; mask-position: 22% 58%;
  animation: roentgen-wandern 11s ease-in-out infinite alternate;
}

/* Sobald ein Zeigegerät führt, übernimmt die Maus. */
.roentgen-buehne.folgt .roentgen-innen {
  animation: none;
  -webkit-mask-position: calc(var(--mx) - var(--r)) calc(var(--my) - var(--r));
          mask-position: calc(var(--mx) - var(--r)) calc(var(--my) - var(--r));
}

@keyframes roentgen-wandern {
  0%   { mask-position: 20% 62%; -webkit-mask-position: 20% 62%; }
  50%  { mask-position: 52% 44%; -webkit-mask-position: 52% 44%; }
  100% { mask-position: 84% 60%; -webkit-mask-position: 84% 60%; }
}

/* Der Lichtrand um das Fenster – er macht aus der Maske eine Lampe. */
.roentgen-ring {
  position: absolute; left: 0; top: 0;
  width: calc(var(--r) * 2); height: calc(var(--r) * 2);
  margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1);
  border-radius: 50%; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 1px rgba(217,163,49,.55),
              0 0 34px 6px rgba(217,163,49,.20) inset,
              0 0 26px 2px rgba(217,163,49,.16);
  transition: opacity .25s;
}
.roentgen-buehne.folgt .roentgen-ring {
  opacity: 1;
  transform: translate(var(--mx), var(--my));
}

.roentgen-fuss {
  max-width: 1180px; margin: 16px auto 0;
  text-align: center; color: var(--text-neben); font-size: 16px;
}
.roentgen-fuss a { color: var(--gold); }

/* Wer „Bewegung reduzieren" eingestellt hat, bekommt ein ruhiges Bild:
   der Kegel steht still über dem Motorraum. */
@media (prefers-reduced-motion: reduce) {
  .roentgen-innen { animation: none;
    -webkit-mask-position: 24% 58%; mask-position: 24% 58%; }
}

/* Am Handy ist der Kegel kleiner – sonst deckt er das halbe Auto ab. */
@media (max-width: 760px) {
  .roentgen { padding: 34px 14px 30px; }
  .roentgen-buehne { --r: 78px; border-radius: 6px; }
  .roentgen-kopf p, .roentgen-fuss { font-size: 15px; }
}

/* =====================================================================
   LANDTECHNIK – Standpunkt zu älteren Maschinen
   ---------------------------------------------------------------------
   Ein ruhiger, klar abgesetzter Block. Bewusst NICHT als Warnkasten
   gestaltet: Es ist keine Einschränkung, sondern eine Entscheidung.
   Der goldene Strich links ist dieselbe Handschrift wie beim Zitat im
   Kopfbereich – dadurch liest es sich als Aussage des Betriebs.
   ===================================================================== */
.land-standpunkt {
  max-width: 820px;
  margin: 40px auto;
  padding: 26px 28px;
  background: var(--bg-panel);
  border-left: 4px solid var(--gold);
  border-radius: 0 8px 8px 0;
}
.land-standpunkt h2 {
  font-family: "Barlow Condensed", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(24px, 3.4vw, 34px);
  text-transform: uppercase; letter-spacing: .4px;
  margin: 0 0 14px; color: var(--text);
}
.land-standpunkt p { margin: 0 0 12px; line-height: 1.62; }
.land-standpunkt p:last-child { margin-bottom: 0; }
.land-standpunkt-ruf {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--linie);
  color: var(--text-neben);
}
.land-standpunkt-ruf a { color: var(--gold); font-weight: 600; white-space: nowrap; }

@media (max-width: 760px) {
  .land-standpunkt { margin: 28px 14px; padding: 20px 18px; }
}

/* =====================================================================
   FILMBAND
   ---------------------------------------------------------------------
   Ein breites, stummes Kurzvideo mit Text darüber. Bewusst ohne
   Bedienelemente: Es ist Stimmung, kein Film, den man anhält.

   Die Höhe ist begrenzt (clamp), damit das Band auf dem Handy nicht
   den halben Bildschirm frisst und am großen Schirm nicht zum Plakat
   wird. Das Video füllt den Rahmen und wird beschnitten, statt sich zu
   verzerren.
   ===================================================================== */
.filmband {
  position: relative;
  overflow: hidden;
  height: clamp(240px, 34vw, 420px);
  display: flex; align-items: center;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  background: var(--bg-tief);
}
.filmband-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Das Rohmaterial ist heller als die Seite – hier wird es an die
     dunkle Handschrift angeglichen, statt das Video neu zu rendern. */
  filter: brightness(.72) saturate(.9);
}
.filmband-schleier {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(22,23,28,.94) 0%, rgba(22,23,28,.72) 42%, rgba(22,23,28,.18) 78%),
    linear-gradient(0deg,  rgba(22,23,28,.55) 0%, rgba(22,23,28,0) 55%);
}
.filmband-text {
  position: relative;
  max-width: 640px;
  padding: 0 clamp(20px, 5vw, 64px);
}
.filmband-text h2 {
  font-family: "Barlow Condensed", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(26px, 4.2vw, 46px);
  text-transform: uppercase; letter-spacing: .5px;
  margin: 0 0 10px; color: var(--text);
  text-shadow: 0 2px 18px rgba(0,0,0,.6);
}
.filmband-text p { margin: 0 0 14px; color: #C9CDD2; line-height: 1.55; }
.filmband-text p:last-child { margin-bottom: 0; }

/* Am Handy liegt der Text über der ganzen Breite, deshalb wird der
   Schleier dort rundum dunkler – sonst kämpft die Schrift gegen das Bild. */
@media (max-width: 760px) {
  .filmband { height: clamp(220px, 52vw, 300px); }
  .filmband-schleier {
    background:
      linear-gradient(90deg, rgba(22,23,28,.92) 0%, rgba(22,23,28,.80) 60%, rgba(22,23,28,.55) 100%),
      linear-gradient(0deg,  rgba(22,23,28,.60) 0%, rgba(22,23,28,.10) 60%);
  }
}