/* =====================================================================
   DRIVEINSPEKT V2 – STYLES.CSS
   =====================================================================

   MERKHILFE:
   HTML = Inhalt / Aufbau
   CSS  = Aussehen / Position / Größe / Abstände / Animationen

   Du kannst in dieser Datei über die Überschriften schnell den Bereich
   finden, den du ändern möchtest.

   WICHTIGE EINHEITEN:
   px   = feste Pixel
   %    = Prozent vom übergeordneten Element
   vw   = Prozent der Bildschirmbreite
   vh   = Prozent der Bildschirmhöhe
   rem  = relative Schriftgröße

   ===================================================================== */


/* =====================================================================
   1. ZENTRALE FARBEN UND GRÖSSEN
   ---------------------------------------------------------------------
   ÄNDERN:
   Wenn du später die komplette Website-Farbe ändern möchtest,
   ist DAS hier der wichtigste Bereich.
   ===================================================================== */
:root{
  --bg:#06131f;                 /* Haupt-Hintergrundfarbe */
  --bg2:#081a2a;                /* Zweite dunkle Hintergrundfarbe */
  --panel:#0b2031;              /* Farbe für Karten / Panels */
  --panel2:#0e263a;             /* Zweite Kartenfarbe */

  --text:#f3f7fb;               /* Haupt-Schriftfarbe */
  --muted:#9fb3c4;              /* Dezente / graublaue Schrift */

  --line:rgba(255,255,255,.11); /* Helle Linien / Rahmen */

  --blue:#5bb4ff;               /* HAUPT-BLAU von DriveInspekt */
  --blue2:#8fd0ff;              /* Helleres Blau */
  --green:#8ee5c2;              /* Reserve-Akzentfarbe */

  --max:1180px;                 /* Maximale Inhaltsbreite */

  --header:82px;                /* Höhe des oberen Menüs */

  --ease:cubic-bezier(.2,.75,.2,1); /* Bewegungskurve für Animationen */
}


/* =====================================================================
   2. GRUNDEINSTELLUNGEN DER GESAMTEN WEBSITE
   ===================================================================== */

/* box-sizing sorgt dafür, dass Padding und Border in Größen eingerechnet werden */
*{
  box-sizing:border-box;
}

/* Sanftes Scrollen bei internen Links */
html{
  scroll-behavior:smooth;
  background:var(--bg);

  /* MOBILE-FIX:
     Verhindert, dass ausgeblendete Elemente seitlich noch sichtbar werden. */
  overflow-x:hidden;
  overflow-x:clip;
}

/* Gesamte Seite */
body{
  margin:0;

  /* Schriftfamilie */
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;

  /* Hintergrund mit sehr dezentem blauen Licht */
  background:
    radial-gradient(
      900px 600px at 85% -5%,
      rgba(52,151,232,.12),
      transparent 65%
    ),
    var(--bg);

  color:var(--text);

  line-height:1.55;

  /* Verhindert seitliches Herausragen der Website */
  overflow-x:hidden;
}

/* Wenn das mobile Menü geöffnet ist, kann die Seite dahinter nicht scrollen */
body.menu-open{
  overflow:hidden;
}

/* Links übernehmen zunächst die normale Textfarbe */
a{
  color:inherit;
}

/* Formulare und Buttons nutzen die gleiche Schrift wie die Website */
button,
input,
textarea{
  font:inherit;
}

/* Bilder werden nie breiter als ihr Bereich */
img{
  max-width:100%;
  display:block;
}

/* Farbe, wenn jemand Text auf der Website markiert */
::selection{
  background:var(--blue);
  color:#04111d;
}


/* =====================================================================
   3. BARRIEREFREIHEIT – "ZUM INHALT SPRINGEN"
   ===================================================================== */

.skip-link{
  position:fixed;
  left:12px;
  top:-80px;

  background:#fff;
  color:#000;

  padding:10px 14px;

  z-index:99999;

  border-radius:8px;
}

/* Wird sichtbar, wenn mit Tastatur darauf fokussiert wird */
.skip-link:focus{
  top:12px;
}


/* =====================================================================
   4. HEADER / OBERES MENÜ
   ---------------------------------------------------------------------
   DESKTOP / TABLET:
   LINKS  = Logo
   MITTE  = Navigation
   RECHTS = Anfrage-Button

   Der Trick für die exakte Mitte ist:
   grid-template-columns: 1fr auto 1fr;
   ===================================================================== */

.site-header{
  position:fixed;

  /* Header liegt über dem restlichen Inhalt */
  z-index:1000;

  top:0;
  left:0;
  right:0;

  height:var(--header);

  /* GRID statt Flexbox:
     drei Spalten: links / Mitte / rechts */
  display:grid;
  grid-template-columns:1fr auto 1fr;

  align-items:center;

  /* Abstand links und rechts */
  padding:0 clamp(18px,4vw,56px);

  border-bottom:1px solid transparent;

  transition:.35s var(--ease);
}


/* Wenn etwas heruntergescrollt wurde:
   Header wird kleiner und bekommt einen Glas-Effekt */
.site-header.is-scrolled{
  height:68px;

  background:rgba(6,19,31,.82);

  backdrop-filter:blur(18px);

  border-color:var(--line);
}


/* =====================================================================
   4A. LOGO IM HEADER
   ---------------------------------------------------------------------
   ÄNDERN:
   width:220px = Breite des Logos auf Desktop
   ===================================================================== */

.brand{
  width:220px;

  display:block;

  /* Logo ganz links in seiner Grid-Spalte */
  justify-self:start;
}

.brand img{
  width:100%;
  height:auto;
}


/* =====================================================================
   4B. NAVIGATION IN DER BILDSCHIRMMITTE
   ===================================================================== */

.main-nav{
  display:flex;

  align-items:center;

  justify-content:center;

  gap:8px;

  /* EXAKT mittig in der mittleren Grid-Spalte */
  justify-self:center;
}


/* Einzelne Menülinks */
.main-nav a{
  text-decoration:none;

  color:#c9d8e4;

  padding:10px 14px;

  border-radius:999px;

  font-size:.93rem;

  transition:.2s ease;
}


/* Hover = Maus befindet sich über dem Link
   aria-current = aktuelle Unterseite */
.main-nav a:hover,
.main-nav a[aria-current="page"]{
  color:#fff;

  background:rgba(255,255,255,.06);
}


/* Dieser Menüpunkt ist auf Desktop versteckt.
   Er wird nur im Handymenü eingeblendet. */
.mobile-contact{
  display:none;
}


/* =====================================================================
   4C. ANFRAGEN-BUTTON RECHTS IM HEADER
   ===================================================================== */

.header-contact{
  /* Ganz rechts in der rechten Grid-Spalte */
  justify-self:end;

  text-decoration:none;

  color:#fff;

  padding:10px 18px;

  border:1px solid rgba(91,180,255,.45);

  border-radius:999px;

  font-size:.93rem;

  font-weight:700;

  transition:.2s ease;
}

.header-contact:hover{
  background:rgba(91,180,255,.12);

  border-color:var(--blue);

  transform:translateY(-1px);
}


/* Burger-Menü ist auf Desktop unsichtbar */
.menu-toggle{
  display:none;
}


/* =====================================================================
   5. ALLGEMEINE INHALTSBEREICHE
   ---------------------------------------------------------------------
   Viele Abschnitte verwenden die Klasse .section.
   ===================================================================== */

.section{
  width:min(
    var(--max),
    calc(100% - 40px)
  );

  margin:0 auto;

  /* Abstand oben und unten */
  padding:120px 0;
}


/* Kopfbereich eines Abschnitts */
.section-head{
  max-width:760px;

  margin-bottom:54px;
}


/* Kleine hellblaue Überschrift, z. B. "Drei Leistungen. Ein Ablauf." */
.eyebrow{
  display:inline-flex;

  align-items:center;

  gap:9px;

  color:var(--blue2);

  text-transform:uppercase;

  letter-spacing:.16em;

  font-size:.72rem;

  font-weight:800;
}


/* Kleine Linie vor der Eyebrow */
.eyebrow:before{
  content:"";

  width:26px;
  height:1px;

  background:currentColor;
}


/* Überschriften und Absätze ohne Standard-Abstand oben */
h1,
h2,
h3,
p{
  margin-top:0;
}


/* Etwas engerer Buchstabenabstand bei großen Überschriften */
h1,
h2,
h3{
  letter-spacing:-.035em;
}


/* Standard-H2-Größe */
h2{
  font-size:clamp(2.4rem,5vw,5rem);

  line-height:.98;

  margin-bottom:22px;
}


/* Text innerhalb eines span in H1/H2 wird blau */
h2 span,
h1 span{
  color:var(--blue);
}


/* Größere Einführungstexte */
.section-head p,
.subhero-copy p,
.hero-lead{
  color:#b4c4d1;

  font-size:clamp(1.03rem,1.7vw,1.22rem);
}


/* =====================================================================
   6. BUTTONS
   ===================================================================== */

.btn{
  display:inline-flex;

  align-items:center;
  justify-content:center;

  min-height:50px;

  padding:0 20px;

  border-radius:12px;

  text-decoration:none;

  border:1px solid transparent;

  font-weight:750;

  cursor:pointer;

  transition:.25s var(--ease);
}


/* Beim Darüberfahren bewegt sich der Button leicht nach oben */
.btn:hover{
  transform:translateY(-2px);
}


/* Blauer Hauptbutton */
.btn-primary{
  background:var(--blue);

  color:#04111d;

  box-shadow:
    0 14px 40px rgba(91,180,255,.18);
}

.btn-primary:hover{
  box-shadow:
    0 18px 46px rgba(91,180,255,.28);
}


/* Durchsichtiger Zweitbutton */
.btn-ghost{
  border-color:var(--line);

  background:rgba(255,255,255,.025);

  color:#fff;
}


/* Bereich mit mehreren Buttons nebeneinander */
.hero-actions{
  display:flex;

  gap:12px;

  flex-wrap:wrap;

  margin-top:30px;
}


/* =====================================================================
   7. EINBLENDE-ANIMATION BEIM SCROLLEN
   ---------------------------------------------------------------------
   JavaScript fügt später automatisch die Klasse .in-view hinzu.
   ===================================================================== */

.reveal{
  opacity:0;

  transform:translateY(28px);

  transition:
    opacity .7s var(--ease),
    transform .7s var(--ease);
}

.reveal.in-view{
  opacity:1;

  transform:none;
}


/* =====================================================================
   8. HERO / ERSTER BILDSCHIRM DER STARTSEITE
   ===================================================================== */

.hero-home{
  /* Mindestens komplette Bildschirmhöhe */
  min-height:100svh;

  position:relative;

  display:grid;

  /* Zwei Spalten: links Text, rechts Scan-Grafik */
  grid-template-columns:
    minmax(0,1.05fr)
    minmax(380px,.95fr);

  align-items:center;

  gap:clamp(30px,5vw,80px);

  /* Abstand berücksichtigt den festen Header */
  padding:
    calc(var(--header) + 60px)
    max(24px,calc((100vw - var(--max))/2))
    70px;

  isolation:isolate;
}


/* Hintergrundraster */
.hero-grid{
  position:absolute;

  inset:0;

  z-index:-3;

  opacity:.16;

  background-image:
    linear-gradient(
      rgba(255,255,255,.06) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.06) 1px,
      transparent 1px
    );

  background-size:72px 72px;

  mask-image:
    linear-gradient(
      to bottom,
      black,
      transparent 80%
    );
}


/* Allgemeine Glow-Lichter */
.hero-glow{
  position:absolute;

  border-radius:50%;

  filter:blur(80px);

  z-index:-2;

  pointer-events:none;
}


/* Blaues Licht rechts */
.glow-a{
  width:460px;
  height:460px;

  background:rgba(26,142,231,.22);

  right:7%;
  top:15%;
}


/* Grün-blaues Licht links unten */
.glow-b{
  width:300px;
  height:300px;

  background:rgba(57,214,194,.09);

  left:7%;
  bottom:10%;
}


/* Maximale Breite des Hero-Textes */
.hero-copy{
  max-width:720px;
}


/* Große Hauptüberschrift */
.hero-home h1{
  /* ÄNDERN: Hier bestimmst du die Größe der großen Startüberschrift */
  font-size:clamp(4rem,8.2vw,8.2rem);

  line-height:.84;

  margin:22px 0 28px;

  max-width:900px;
}


/* Breite des Textes unter der Überschrift */
.hero-lead{
  max-width:670px;
}


/* Scroll-Hinweis unten */
.scroll-hint{
  position:absolute;

  bottom:26px;

  left:50%;

  transform:translateX(-50%);

  display:flex;

  align-items:center;

  gap:10px;

  font-size:.72rem;

  letter-spacing:.15em;

  text-transform:uppercase;

  text-decoration:none;

  color:#8ea4b5;
}


/* Maus-artige Form neben "Scroll" */
.scroll-hint i{
  width:28px;
  height:44px;

  border:1px solid rgba(255,255,255,.2);

  border-radius:20px;

  position:relative;
}


/* Bewegter kleiner Punkt */
.scroll-hint i:after{
  content:"";

  position:absolute;

  width:4px;
  height:8px;

  border-radius:4px;

  background:var(--blue);

  left:11px;
  top:8px;

  animation:scrollDot 1.8s infinite;
}


/* Animation des Scroll-Punkts */
@keyframes scrollDot{
  0%{
    transform:translateY(0);
    opacity:0;
  }

  20%{
    opacity:1;
  }

  75%{
    opacity:1;
  }

  100%{
    transform:translateY(17px);
    opacity:0;
  }
}


/* =====================================================================
   9. FAHRZEUG-SCAN-GRAFIK
   ---------------------------------------------------------------------
   Das "Auto" besteht komplett aus CSS-Formen.
   ===================================================================== */

.scan-visual{
  perspective:1000px;
}


/* Äußerer Rahmen der Scan-Grafik */
.scan-frame{
  min-height:520px;

  position:relative;

  border:
    1px solid rgba(91,180,255,.24);

  border-radius:36px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.012)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 50px 100px rgba(0,0,0,.24);

  overflow:hidden;

  transform-style:preserve-3d;

  transition:transform .18s ease;
}


/* Leichtes Licht innerhalb des Scan-Rahmens */
.scan-frame:before{
  content:"";

  position:absolute;

  inset:0;

  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(91,180,255,.09),
      transparent 45%
    );
}


/* Gemeinsame Einstellung für die vier Scan-Ecken */
.scan-corner{
  position:absolute;

  width:42px;
  height:42px;

  border-color:var(--blue);

  opacity:.7;
}


/* Ecke oben links */
.c1{
  left:22px;
  top:22px;

  border-left:2px solid;
  border-top:2px solid;
}


/* Ecke oben rechts */
.c2{
  right:22px;
  top:22px;

  border-right:2px solid;
  border-top:2px solid;
}


/* Ecke unten links */
.c3{
  left:22px;
  bottom:22px;

  border-left:2px solid;
  border-bottom:2px solid;
}


/* Ecke unten rechts */
.c4{
  right:22px;
  bottom:22px;

  border-right:2px solid;
  border-bottom:2px solid;
}


/* Bewegte blaue Scan-Linie */
.scan-line{
  position:absolute;

  left:7%;
  right:7%;

  height:2px;

  top:12%;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--blue),
      transparent
    );

  box-shadow:
    0 0 18px var(--blue);

  animation:scan 4s ease-in-out infinite;
}


/* Bewegung der Scan-Linie von oben nach unten */
@keyframes scan{
  0%,
  100%{
    top:13%;
    opacity:.2;
  }

  50%{
    top:83%;
    opacity:1;
  }
}


/* Bereich, in dem die Autoform liegt */
.car-outline{
  position:absolute;

  left:50%;
  top:52%;

  width:65%;
  height:42%;

  transform:translate(-50%,-50%);
}


/* Fahrzeugkörper */
.car-body{
  position:absolute;

  left:4%;
  right:4%;
  bottom:22%;

  height:42%;

  border:
    2px solid rgba(190,226,255,.75);

  border-radius:
    70px 70px 30px 30px;

  box-shadow:
    0 0 45px rgba(91,180,255,.08);
}


/* Fahrzeugdach */
.car-roof{
  position:absolute;

  width:58%;
  height:42%;

  left:21%;
  top:8%;

  border:
    2px solid rgba(190,226,255,.75);

  border-bottom:0;

  border-radius:
    80px 80px 10px 10px;

  transform:
    perspective(160px)
    rotateX(-8deg);
}


/* Gemeinsame Rad-Einstellung */
.wheel{
  position:absolute;

  bottom:11%;

  width:18%;

  aspect-ratio:1;

  border:
    2px solid rgba(190,226,255,.8);

  border-radius:50%;

  background:var(--bg);
}


/* Innerer Radkreis */
.wheel:after{
  content:"";

  position:absolute;

  inset:23%;

  border:
    1px dashed rgba(143,208,255,.7);

  border-radius:50%;
}


/* Linkes Rad */
.wheel-l{
  left:11%;
}


/* Rechtes Rad */
.wheel-r{
  right:11%;
}


/* Gemeinsame Einstellung für "Scheinwerfer" */
.light{
  position:absolute;

  bottom:42%;

  width:12%;
  height:6%;

  border-radius:60%;

  background:
    rgba(143,208,255,.76);

  box-shadow:
    0 0 18px rgba(91,180,255,.5);
}


/* Linker Scheinwerfer */
.light-l{
  left:12%;
}


/* Rechter Scheinwerfer */
.light-r{
  right:12%;
}


/* Kleine Info-Kästchen beim Fahrzeug */
.scan-label{
  position:absolute;

  padding:9px 11px;

  border:
    1px solid rgba(91,180,255,.22);

  border-radius:10px;

  background:
    rgba(3,14,24,.75);

  backdrop-filter:blur(10px);

  font-size:.7rem;

  color:#a9bfd0;

  box-shadow:
    0 10px 30px rgba(0,0,0,.22);
}


/* Text innerhalb der Scan-Labels */
.scan-label b,
.scan-label span{
  display:block;
}

.scan-label b{
  color:#fff;

  font-size:.78rem;
}


/* Position der drei Scan-Beschriftungen */
.label-a{
  left:8%;
  top:18%;
}

.label-b{
  right:7%;
  top:29%;
}

.label-c{
  right:10%;
  bottom:10%;
}


/* =====================================================================
   10. LEISTUNGSKARTEN
   ===================================================================== */

.services-section{
  padding-top:140px;
}


/* Drei Karten nebeneinander */
.service-grid{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:16px;
}


/* Einzelne Leistungskarte */
.service-card{
  min-height:430px;

  position:relative;

  display:flex;

  flex-direction:column;

  padding:30px;

  border-radius:26px;

  border:
    1px solid var(--line);

  background:
    linear-gradient(
      155deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.018)
    );

  text-decoration:none;

  overflow:hidden;

  transform-style:preserve-3d;
}


/* Farbiger Glow in den Leistungskarten */
.service-card:after{
  content:"";

  position:absolute;

  width:260px;
  height:260px;

  border-radius:50%;

  background:
    rgba(91,180,255,.11);

  filter:blur(60px);

  right:-100px;
  bottom:-120px;

  transition:.35s ease;
}


/* Glow wird beim Hover größer */
.service-card:hover:after{
  transform:scale(1.4);
}


/* Nummer 01 / 02 / 03 */
.service-number{
  color:#6e879a;

  font-size:.8rem;
}


/* Symbol der Karte */
.service-icon{
  margin-top:60px;

  font-size:3.6rem;

  line-height:1;

  color:var(--blue);
}


/* Titel der Leistungskarte */
.service-card h3{
  font-size:2rem;

  margin:22px 0 12px;
}


/* Beschreibung */
.service-card p{
  color:#aebfcd;
}


/* Textlink ganz unten */
.service-link{
  margin-top:auto;

  color:#ddecf7;

  font-weight:700;

  font-size:.92rem;
}


/* =====================================================================
   11. KLEINE ABLAUF-ZEILE
   ===================================================================== */

.story-band{
  padding:35px 20px;

  border-block:
    1px solid var(--line);

  background:
    rgba(255,255,255,.018);
}


.story-line{
  max-width:1100px;

  margin:auto;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:18px;

  color:#b8c9d5;

  font-size:.82rem;

  text-transform:uppercase;

  letter-spacing:.12em;
}


/* Linien zwischen den Ablaufschritten */
.story-line i{
  height:1px;

  flex:1;

  max-width:90px;

  background:
    linear-gradient(
      90deg,
      var(--blue),
      rgba(91,180,255,.1)
    );
}


/* =====================================================================
   12. DOKUMENT-SCROLL-EFFEKT
   ---------------------------------------------------------------------
   WICHTIG:
   Die Höhe 430vh sorgt dafür, dass genügend Scrollweg vorhanden ist.
   script.js berechnet aus diesem Scrollweg die Position der Dokumente.

   ÄNDERN:
   Mehr Scrollweg = z. B. 500vh
   Weniger Scrollweg = z. B. 350vh
   ===================================================================== */

.report-scroll{
  height:430vh;

  position:relative;
}


/* Dieser Bereich bleibt beim Scrollen am Bildschirm "kleben" */
.report-stage{
  position:sticky;

  top:0;

  height:100svh;

  overflow:hidden;

  display:grid;

  /* links Text / rechts Dokumente */
  grid-template-columns:
    .72fr 1.28fr;

  align-items:center;

  gap:40px;

  padding:
    var(--header)
    max(24px,calc((100vw - var(--max))/2))
    28px;

  background:
    linear-gradient(
      180deg,
      #071725,
      #06131f
    );
}


/* Linker Text im Dokumentbereich */
.report-copy{
  z-index:20;

  max-width:460px;
}


.report-copy h2{
  font-size:
    clamp(2.6rem,4.6vw,5rem);
}


.report-copy p{
  color:#9fb3c4;
}


/* Fortschrittsbalken */
.report-progress{
  height:3px;

  background:
    rgba(255,255,255,.08);

  border-radius:10px;

  overflow:hidden;

  margin-top:32px;
}


/* Blaue Füllung des Fortschrittsbalkens.
   Breite wird durch JavaScript gesetzt. */
.report-progress i{
  display:block;

  height:100%;

  width:0;

  background:var(--blue);
}


/* Bereich für den Dokumentstapel */
.report-deck{
  position:relative;

  height:min(76vh,760px);
}


/* Jede einzelne Dokumentseite */
.report-page{
  /* Diese CSS-Variablen werden von script.js verändert */
  --x:0px;
  --scale:1;
  --opacity:1;
  --rotate:0deg;

  position:absolute;

  top:50%;
  left:50%;

  width:min(470px,44vw);

  /* DIN-A-artige Hochkantform */
  aspect-ratio:.72;

  transform:
    translate(
      calc(-50% + var(--x)),
      -50%
    )
    scale(var(--scale))
    rotate(var(--rotate));

  opacity:var(--opacity);

  padding:28px;

  background:#f7f9fb;

  color:#0d2233;

  border-radius:16px;

  box-shadow:
    0 35px 80px rgba(0,0,0,.45);

  transition:
    box-shadow .2s linear;

  overflow:hidden;
}


/* =====================================================================
   12A. INHALT DER BEISPIEL-DOKUMENTE
   ===================================================================== */

.doc-top{
  display:flex;

  justify-content:space-between;

  align-items:center;

  border-bottom:
    2px solid #0f3657;

  padding-bottom:11px;

  font-size:.72rem;
}


.doc-top b{
  font-size:1.05rem;

  color:#0d3254;
}


.report-page h3{
  font-size:1rem;

  letter-spacing:.04em;

  margin:18px 0 14px;

  color:#0b355b;
}


/* Beispielbild im ersten Dokument */
.doc-photo{
  height:30%;

  border-radius:10px;

  background:
    linear-gradient(
      135deg,
      #e5ebf0,
      #c7d2db
    );

  display:grid;

  place-items:center;

  font-weight:800;

  font-size:.75rem;

  color:#4b6272;
}


/* Kleine angedeutete Autoform */
.doc-car:before{
  content:"";

  width:52%;

  height:38%;

  border:
    3px solid #7890a1;

  border-radius:
    50px 50px 20px 20px;
}


/* Zwei Informationsspalten */
.doc-columns{
  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:10px;

  margin:13px 0;
}


.doc-columns > div{
  border:
    1px solid #c8d4dc;

  padding:9px;
}


.doc-columns small,
.doc-columns b,
.doc-columns span{
  display:block;
}


.doc-columns small{
  color:#627b8d;
}


.doc-columns b{
  font-size:.72rem;
}


.doc-columns span{
  font-size:.68rem;
}


/* Dunkelblaue Überschriftenzeile im Dokument */
.doc-bar{
  background:#0d3a61;

  color:#fff;

  font-size:.68rem;

  text-transform:uppercase;

  letter-spacing:.08em;

  padding:7px 10px;

  margin:12px 0;
}


.report-page p{
  font-size:.65rem;

  line-height:1.5;

  color:#4d6474;
}


/* Reifen-Dokument */
.tire-grid{
  display:grid;

  grid-template-columns:
    .8fr 1.2fr;

  gap:12px;

  align-items:center;

  margin-top:20px;
}


/* Grafisch erzeugtes Rad */
.fake-wheel{
  aspect-ratio:1;

  border:
    20px solid #303b42;

  border-radius:50%;

  box-shadow:
    inset 0 0 0 12px #bcc9d2,
    inset 0 0 0 24px #536674;
}


/* Messwerte-Box */
.measure{
  border:
    1px solid #bac8d2;

  padding:12px;
}


.measure b,
.measure span{
  display:block;
}


.measure b{
  font-size:.8rem;

  color:#0d3a61;
}


.measure span{
  font-size:.68rem;

  margin-top:5px;
}


/* Schadensseite */
.damage-layout{
  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:12px;
}


.damage-list{
  border:
    1px solid #c2ced7;

  padding:11px;
}


.damage-list b,
.damage-list span{
  display:block;
}


.damage-list b{
  font-size:.72rem;

  color:#0d3a61;

  margin-bottom:10px;
}


.damage-list span{
  font-size:.62rem;

  border-top:
    1px solid #e0e5e9;

  padding:7px 0;
}


/* Kleine Fahrzeugkarte */
.car-map{
  position:relative;

  border:
    1px solid #c2ced7;

  min-height:180px;

  display:grid;

  place-items:center;
}


.mini-car{
  width:48%;

  height:68%;

  border:
    2px solid #9aaab6;

  border-radius:35px;
}


/* Rote Schadenspunkte */
.dot{
  position:absolute;

  width:8px;
  height:8px;

  background:#e43838;

  border-radius:50%;
}


.d1{
  left:28%;
  top:30%;
}


.d2{
  left:34%;
  bottom:28%;
}


.d3{
  right:26%;
  top:45%;
}


/* Lackwerte */
.paint-values{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:4px;

  margin-top:14px;
}


.paint-values span{
  background:#0d3a61;

  color:#fff;

  font-size:.62rem;

  padding:8px 4px;

  text-align:center;
}


/* Platzhalter für Schadensdetail-Foto */
.damage-photo{
  height:52%;

  margin-top:18px;

  border-radius:12px;

  background:
    linear-gradient(
      135deg,
      #d4dce2,
      #eef2f5
    );

  display:grid;

  place-items:center;

  position:relative;

  color:#657b8b;

  font-weight:800;
}


/* Roter Pfeil im Schadensfoto */
.damage-photo i{
  position:absolute;

  width:55px;

  height:4px;

  background:#e63c3c;

  right:23%;

  bottom:30%;

  transform:
    rotate(-30deg);
}


.damage-photo i:after{
  content:"";

  position:absolute;

  right:-2px;
  top:-5px;

  border-left:
    12px solid #e63c3c;

  border-block:
    7px solid transparent;
}


/* Schadensbeschreibung */
.damage-note{
  border-left:
    4px solid #0d3a61;

  padding:12px;

  margin-top:15px;
}


.damage-note b,
.damage-note span{
  display:block;
}


.damage-note b{
  font-size:.75rem;
}


.damage-note span{
  font-size:.65rem;

  color:#637989;
}


/* Vier Fotofelder */
.photo-grid{
  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:9px;

  margin-top:20px;
}


.photo-grid span{
  aspect-ratio:1.45;

  background:
    linear-gradient(
      135deg,
      #dbe2e7,
      #b8c7d1
    );

  border-radius:10px;

  display:grid;

  place-items:center;

  font-size:.7rem;

  font-weight:800;

  color:#546c7d;
}


/* =====================================================================
   13. VERTRAUENS-/HINWEIS-BEREICH
   ===================================================================== */

.trust-section{
  padding-top:90px;

  padding-bottom:130px;
}


.trust-panel{
  display:grid;

  grid-template-columns:
    1.1fr .9fr;

  gap:60px;

  padding:50px;

  border:
    1px solid var(--line);

  border-radius:30px;

  background:
    rgba(255,255,255,.025);
}


.trust-panel h2{
  font-size:
    clamp(2.5rem,4vw,4.5rem);
}


.trust-panel p{
  color:#a7b9c7;

  align-self:end;
}


/* =====================================================================
   14. GROSSER ABSCHLUSS / CALL TO ACTION
   ===================================================================== */

.cta-section{
  position:relative;

  min-height:620px;

  padding:110px 24px;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  text-align:center;

  overflow:hidden;

  border-top:
    1px solid var(--line);
}


.cta-section h2{
  font-size:
    clamp(3rem,6vw,6rem);

  max-width:950px;
}


/* Hintergrundlicht im CTA */
.cta-glow{
  position:absolute;

  width:560px;

  height:320px;

  background:
    rgba(34,150,234,.17);

  filter:blur(90px);

  border-radius:50%;

  z-index:-1;
}


/* Kompakter CTA wird auch auf Unterseiten verwendet */
.cta-section.compact{
  min-height:480px;
}


/* =====================================================================
   15. UNTERSEITEN
   ---------------------------------------------------------------------
   Diese Regeln werden von:
   - zustandspruefung.html
   - fahrzeugueberfuehrung.html
   - automakler.html
   - kontakt.html
   verwendet.
   ===================================================================== */

.subhero{
  min-height:92svh;

  padding:
    calc(var(--header) + 80px)
    max(24px,calc((100vw - var(--max))/2))
    80px;

  display:grid;

  grid-template-columns:
    1fr 1fr;

  align-items:center;

  gap:70px;

  border-bottom:
    1px solid var(--line);
}


.subhero-copy h1{
  font-size:
    clamp(4rem,7.5vw,7.4rem);

  line-height:.88;

  margin:22px 0 28px;
}


.subhero-copy{
  max-width:720px;
}


/* Kreisgrafik auf der Zustandsprüfungsseite */
.metric-orbit{
  position:relative;

  width:min(500px,44vw);

  aspect-ratio:1;

  margin:auto;

  border:
    1px solid rgba(91,180,255,.22);

  border-radius:50%;

  animation:
    float 5s ease-in-out infinite;
}


.metric-orbit:before,
.metric-orbit:after{
  content:"";

  position:absolute;

  border:
    1px solid rgba(91,180,255,.12);

  border-radius:50%;

  inset:14%;
}


.metric-orbit:after{
  inset:31%;
}


.orbit-core{
  position:absolute;

  inset:39%;

  display:grid;

  place-items:center;

  border-radius:50%;

  background:var(--blue);

  color:#06131f;

  font-weight:900;

  letter-spacing:.1em;
}


.orbit-item{
  position:absolute;

  padding:10px 12px;

  background:#0b2031;

  border:
    1px solid var(--line);

  border-radius:10px;

  color:#cfe1ee;

  font-size:.8rem;
}


.oi1{
  left:-4%;
  top:22%;
}

.oi2{
  right:2%;
  top:15%;
}

.oi3{
  right:-5%;
  bottom:22%;
}

.oi4{
  left:0;
  bottom:12%;
}


/* Leichte Auf-/Ab-Bewegung */
@keyframes float{
  50%{
    transform:
      translateY(-10px);
  }
}


/* Timeline auf Zustandsprüfung */
.timeline{
  display:grid;

  gap:1px;

  background:var(--line);

  border:
    1px solid var(--line);

  border-radius:24px;

  overflow:hidden;
}


.timeline-item{
  display:grid;

  grid-template-columns:
    90px 1fr;

  gap:20px;

  background:#081a2a;

  padding:28px 30px;
}


.timeline-item > b{
  font-size:2rem;

  color:var(--blue);
}


.timeline-item h3{
  font-size:1.45rem;

  margin-bottom:5px;
}


.timeline-item p{
  margin:0;

  color:#9fb3c4;
}


/* Zwei-Spalten-Bereich auf Unterseiten */
.split-feature{
  display:grid;

  grid-template-columns:
    .7fr 1.3fr;

  gap:70px;

  align-items:start;
}


/* Check-Karten */
.check-grid{
  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:12px;
}


.check-card{
  padding:26px;

  border:
    1px solid var(--line);

  border-radius:18px;

  background:
    rgba(255,255,255,.025);
}


.check-card b,
.check-card span{
  display:block;
}


.check-card b{
  font-size:1.05rem;

  margin-bottom:8px;
}


.check-card span{
  color:#9fb3c4;

  font-size:.92rem;
}


/* Route auf Fahrzeugüberführungsseite */
.route-card{
  padding:36px;

  border:
    1px solid rgba(91,180,255,.24);

  border-radius:30px;

  background:
    linear-gradient(
      150deg,
      rgba(255,255,255,.05),
      rgba(255,255,255,.015)
    );
}


.route-labels,
.route-cities,
.route-meta{
  display:flex;

  justify-content:space-between;

  gap:15px;
}


.route-labels{
  font-size:.68rem;

  color:var(--blue);

  letter-spacing:.14em;
}


.route-cities{
  font-weight:800;

  font-size:1.5rem;
}


.route-meta{
  margin-top:38px;

  color:#8fa6b7;

  font-size:.8rem;
}


.route-line{
  height:4px;

  background:
    rgba(255,255,255,.08);

  position:relative;

  margin:42px 0 16px;

  border-radius:10px;
}


.route-line i{
  position:absolute;

  left:0;
  top:0;
  bottom:0;

  width:60%;

  background:var(--blue);

  border-radius:10px;

  box-shadow:
    0 0 20px rgba(91,180,255,.45);
}


.route-line b{
  position:absolute;

  left:
    calc(60% - 18px);

  top:50%;

  transform:
    translateY(-50%);

  width:36px;
  height:36px;

  border-radius:50%;

  display:grid;

  place-items:center;

  background:#e8f5ff;

  color:#06131f;

  box-shadow:
    0 10px 28px rgba(0,0,0,.3);
}


/* Kartenraster auf Unterseiten */
.step-grid,
.flow-grid{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:12px;
}


.step-card,
.flow-card{
  min-height:270px;

  border:
    1px solid var(--line);

  border-radius:22px;

  padding:26px;

  background:
    rgba(255,255,255,.025);
}


.step-card > span,
.flow-card > span{
  color:var(--blue);

  font-weight:800;
}


.step-card h3,
.flow-card h3{
  font-size:1.4rem;

  margin:60px 0 10px;
}


.step-card p,
.flow-card p{
  color:#9fb3c4;

  font-size:.92rem;
}


/* Dunkler Infobereich */
.dark-slab{
  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:60px;

  padding:60px;

  border:
    1px solid var(--line);

  border-radius:32px;

  background:
    linear-gradient(
      135deg,
      #0c2437,
      #071724
    );
}


.dark-slab h2{
  font-size:
    clamp(2.6rem,4vw,4.5rem);
}


.slab-list{
  display:grid;

  gap:10px;

  align-content:center;
}


.slab-list span{
  padding:16px 18px;

  border:
    1px solid var(--line);

  border-radius:14px;

  color:#c4d4df;
}


/* Kartenstapel auf Automakler-Seite */
.search-stack{
  position:relative;

  height:520px;
}


.search-card{
  position:absolute;

  width:72%;

  padding:26px;

  border:
    1px solid rgba(91,180,255,.24);

  border-radius:24px;

  background:
    linear-gradient(
      145deg,
      #102b40,
      #091b2a
    );

  box-shadow:
    0 30px 70px rgba(0,0,0,.28);
}


.search-card small,
.search-card b,
.search-card span{
  display:block;
}


.search-card small{
  color:var(--blue);

  letter-spacing:.13em;

  font-size:.65rem;
}


.search-card b{
  font-size:1.8rem;

  margin:18px 0 6px;
}


.search-card span{
  color:#9fb3c4;
}


.sc1{
  left:4%;
  top:6%;

  transform:
    rotate(-7deg);
}


.sc2{
  right:1%;
  top:33%;

  transform:
    rotate(5deg);
}


.sc3{
  left:10%;
  bottom:4%;

  transform:
    rotate(-2deg);
}


/* Suchprofil-Beispiel */
.profile-demo{
  display:grid;

  grid-template-columns:
    .65fr 1.35fr;

  gap:60px;
}


.profile-grid{
  display:grid;

  grid-template-columns:
    repeat(2,1fr);

  gap:10px;
}


.profile-grid > span{
  padding:20px;

  border:
    1px solid var(--line);

  border-radius:16px;

  background:
    rgba(255,255,255,.025);
}


.profile-grid small,
.profile-grid b{
  display:block;
}


.profile-grid small{
  color:#8299aa;

  font-size:.7rem;

  text-transform:uppercase;

  letter-spacing:.1em;
}


.profile-grid b{
  margin-top:6px;
}


/* =====================================================================
   16. KONTAKTSEITE
   ===================================================================== */

.contact-hero{
  align-items:start;

  padding-top:
    calc(var(--header) + 120px);
}


/* Anfrage-Konfigurator */
.request-builder{
  padding:30px;

  border:
    1px solid var(--line);

  border-radius:26px;

  background:
    rgba(255,255,255,.025);
}


.builder-label{
  display:block;

  color:#8fa6b7;

  font-size:.72rem;

  text-transform:uppercase;

  letter-spacing:.12em;

  margin:4px 0 12px;
}


/* Drei Leistungsauswahl-Buttons */
.choice-grid{
  display:grid;

  grid-template-columns:
    1fr 1fr 1fr;

  gap:8px;

  margin-bottom:24px;
}


.choice-grid button{
  padding:14px 10px;

  border:
    1px solid var(--line);

  border-radius:12px;

  background:transparent;

  color:#d9e7f0;

  cursor:pointer;
}


/* Aktuell ausgewählte Leistung */
.choice-grid button.active{
  background:
    rgba(91,180,255,.13);

  border-color:var(--blue);

  color:#fff;
}


/* Textfeld der Anfrage */
.request-builder textarea{
  width:100%;

  resize:vertical;

  border:
    1px solid var(--line);

  border-radius:14px;

  background:#071725;

  color:#fff;

  padding:15px;

  outline:none;
}


/* Fokus auf Textfeld */
.request-builder textarea:focus{
  border-color:
    rgba(91,180,255,.7);

  box-shadow:
    0 0 0 3px rgba(91,180,255,.08);
}


/* WhatsApp-Senden-Button */
.builder-send{
  width:100%;

  margin-top:14px;
}


/* Kontaktmöglichkeiten unten */
.contact-options{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:12px;
}


.contact-option{
  position:relative;

  min-height:200px;

  padding:25px;

  border:
    1px solid var(--line);

  border-radius:20px;

  text-decoration:none;

  background:
    rgba(255,255,255,.025);
}


.contact-option span,
.contact-option b{
  display:block;
}


.contact-option span{
  color:#8299aa;

  font-size:.75rem;

  text-transform:uppercase;

  letter-spacing:.1em;
}


.contact-option b{
  margin-top:60px;
}


.contact-option i{
  position:absolute;

  right:22px;
  top:22px;

  color:var(--blue);

  font-style:normal;
}


/* =====================================================================
   17. RECHTLICHE SEITEN
   ---------------------------------------------------------------------
   Für Impressum und Datenschutz.
   ===================================================================== */

.legal-page{
  width:
    min(880px,calc(100% - 40px));

  margin:0 auto;

  padding:
    calc(var(--header) + 70px)
    0
    110px;
}


.legal-page h1{
  font-size:
    clamp(3rem,6vw,5.7rem);

  line-height:.95;

  margin:22px 0 45px;
}


.legal-page h2{
  font-size:1.45rem;

  line-height:1.2;

  margin:42px 0 12px;
}


.legal-page p,
.legal-page li{
  color:#b6c6d2;
}


.legal-page a{
  color:#8fd0ff;
}


/* =====================================================================
   18. FOOTER
   ===================================================================== */

.site-footer{
  display:grid;

  grid-template-columns:
    1fr auto auto;

  gap:40px;

  align-items:end;

  padding:
    50px max(
      24px,
      calc((100vw - var(--max))/2)
    );

  border-top:
    1px solid var(--line);

  background:#04101a;
}


/* ÄNDERN: Logo-Größe im Footer */
.footer-brand img{
  width:210px;

  margin-bottom:14px;
}


.footer-brand p{
  margin:0;

  color:#7f96a8;

  font-size:.82rem;
}


.footer-contact,
.footer-legal{
  display:flex;

  flex-direction:column;

  gap:7px;
}


.footer-contact a,
.footer-legal a{
  text-decoration:none;

  color:#b9cad6;

  font-size:.84rem;
}


.footer-contact a:hover,
.footer-legal a:hover{
  color:#fff;
}


.footer-legal{
  align-items:flex-end;

  color:#6f8799;

  font-size:.76rem;
}


/* Button "Cookie-Einstellungen" sieht wie normaler Textlink aus */
.privacy-settings{
  padding:0;

  border:0;

  background:none;

  color:#b9cad6;

  font:inherit;

  cursor:pointer;
}


/* =====================================================================
   19. COOKIE-/ANALYTICS-DIALOG
   ===================================================================== */

/* Wenn das HTML-Attribut hidden gesetzt ist, wird der Dialog ausgeblendet */
.cookie-banner[hidden]{
  display:none;
}


.cookie-banner{
  position:fixed;

  inset:0;

  z-index:5000;

  display:flex;

  align-items:flex-end;

  justify-content:center;

  padding:18px;

  background:
    rgba(1,7,12,.58);

  backdrop-filter:blur(7px);
}


.cookie-card{
  width:min(720px,100%);

  padding:28px;

  border:
    1px solid rgba(255,255,255,.15);

  border-radius:22px;

  background:#0b2031;

  box-shadow:
    0 30px 100px rgba(0,0,0,.55);
}


.cookie-card h2{
  font-size:1.8rem;

  line-height:1.08;

  margin:15px 0 10px;
}


.cookie-card p{
  color:#9fb3c4;

  margin-bottom:10px;
}


.text-link{
  color:#8fd0ff;

  font-size:.85rem;
}


.cookie-actions{
  display:flex;

  justify-content:flex-end;

  gap:10px;

  margin-top:24px;
}


/* =====================================================================
   20. TABLET-ANPASSUNGEN
   ---------------------------------------------------------------------
   Alles in diesem Block gilt bis 1100px Bildschirmbreite.
   ===================================================================== */

@media(max-width:1100px){

  /* Header auf Tablet etwas kleiner */
  :root{
    --header:74px;
  }

  /* Logo auf Tablet etwas kleiner */
  .brand{
    width:190px;
  }

  /* Hero und Unterseiten werden einspaltig */
  .hero-home,
  .subhero{
    grid-template-columns:1fr;

    min-height:auto;
  }

  /* Mehr Platz oben auf Startseite */
  .hero-home{
    padding-top:150px;
  }

  .hero-copy{
    max-width:850px;
  }

  /* Scan-Grafik zentrieren */
  .scan-visual{
    width:min(720px,100%);

    margin:auto;
  }

  .scan-frame{
    min-height:480px;
  }

  /* Leistungskarten auf Tablet: 2 Spalten */
  .service-grid{
    grid-template-columns:
      1fr 1fr;
  }

  /* Dritte Karte über volle Breite */
  .service-card:last-child{
    grid-column:1/-1;
  }

  /* Dokumente etwas anders aufteilen */
  .report-stage{
    grid-template-columns:
      .65fr 1.35fr;
  }

  .report-page{
    width:min(430px,45vw);
  }

  /* Unterseiten-Karten auf 2 Spalten */
  .step-grid,
  .flow-grid{
    grid-template-columns:
      1fr 1fr;
  }

  /* Zweispaltige Unterseitenbereiche werden einspaltig */
  .profile-demo,
  .split-feature{
    grid-template-columns:1fr;
  }

  .contact-hero{
    padding-top:140px;
  }
}


/* =====================================================================
   21. HANDY-ANPASSUNGEN
   ---------------------------------------------------------------------
   Alles in diesem Block gilt bis 760px Bildschirmbreite.
   DAS ist der wichtigste Bereich für iPhone / Smartphone.
   ===================================================================== */

@media(max-width:760px){

  /* Kleinere Headerhöhe */
  :root{
    --header:68px;
  }


  /* ---------------------------------------------------------------
     HANDY-HEADER
     Desktop nutzt Grid.
     Handy wechselt zurück zu Flexbox:
     Logo links / Burger rechts.
     --------------------------------------------------------------- */
  .site-header{
    height:68px;

    padding:0 18px;

    /* HANDY: komplett blickdichter Hintergrund */
    background:#06131f;

    display:flex;

    justify-content:space-between;

  }


  /* Logo-Größe auf Handy */
  .brand{
    width:164px;
  }


  /* Rechter Desktop-Anfragebutton verschwindet auf Handy */
  .header-contact{
    display:none;
  }


  /* Burger-Menü wird sichtbar */
  .menu-toggle{
    display:grid;

    width:44px;
    height:44px;

    place-content:center;

    gap:6px;

    border:0;

    background:transparent;

    cursor:pointer;
  }


  /* Zwei Linien des Burger-Menüs */
  .menu-toggle span{
    display:block;

    width:24px;
    height:2px;

    background:#fff;

    transition:.25s;
  }


  /* Bei geöffnetem Menü wird Linie 1 gedreht */
  .menu-toggle[aria-expanded="true"] span:first-child{
    transform:
      translateY(4px)
      rotate(45deg);
  }


  /* Bei geöffnetem Menü wird Linie 2 gedreht */
  .menu-toggle[aria-expanded="true"] span:last-child{
    transform:
      translateY(-4px)
      rotate(-45deg);
  }


  /* ---------------------------------------------------------------
     MOBILES VOLLFLÄCHIGES MENÜ
     --------------------------------------------------------------- */
  .main-nav{
    position:fixed;

    /* Beginn direkt unter dem Header */
    inset:68px 0 0;

    display:flex;

    flex-direction:column;

    align-items:stretch;

    justify-content:flex-start;

    gap:4px;

    padding:30px 18px;

    background:#06131f;

    /* MOBILE-FIX:
       Etwas weiter als 100% aus dem Bildschirm schieben,
       damit auf iPhone/Safari keine schmale Kante sichtbar bleibt. */
    transform:translateX(105%);

    /* Solange das Menü geschlossen ist, ist es zusätzlich unsichtbar
       und kann nicht versehentlich angetippt werden. */
    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:
      transform .35s var(--ease),
      opacity .2s ease,
      visibility 0s linear .35s;
  }


  /* JavaScript setzt .open -> Menü fährt ins Bild */
  .main-nav.open{
    transform:translateX(0);

    opacity:1;
    visibility:visible;
    pointer-events:auto;

    transition:
      transform .35s var(--ease),
      opacity .2s ease;
  }


  /* Menülinks auf Handy groß und untereinander */
  .main-nav a{
    font-size:1.3rem;

    padding:16px;

    border-bottom:
      1px solid var(--line);

    border-radius:0;
  }


  /* Anfrage erscheint im Handymenü */
  .mobile-contact{
    display:block;

    margin-top:20px;

    border:
      1px solid rgba(91,180,255,.45) !important;

    border-radius:
      12px !important;

    text-align:center;
  }


  /* ---------------------------------------------------------------
     ALLGEMEINE HANDY-ABSTÄNDE
     --------------------------------------------------------------- */
  .section{
    width:min(
      100% - 30px,
      var(--max)
    );

    padding:85px 0;
  }


  /* Große H2-Überschriften auf Handy */
  h2{
    font-size:
      clamp(2.4rem,11vw,4.4rem);
  }


  /* ---------------------------------------------------------------
     STARTSEITEN-HERO AUF HANDY
     --------------------------------------------------------------- */
  .hero-home{
    display:block;

    min-height:100svh;

    padding:
      130px 18px 80px;
  }


  .hero-home h1{
    font-size:
      clamp(3.7rem,17vw,6rem);

    margin-top:18px;
  }


  .hero-lead{
    font-size:1rem;
  }


  /* Hero-Buttons auf Handy über volle Breite */
  .hero-actions .btn{
    width:100%;
  }


  /* Scan-Grafik kommt unter den Text */
  .scan-visual{
    margin-top:60px;
  }


  .scan-frame{
    min-height:380px;

    border-radius:24px;
  }


  /* Scan-Labels etwas kleiner */
  .scan-label{
    transform:
      scale(.88);
  }


  .label-a{
    left:4%;
  }

  .label-b{
    right:4%;
  }

  .label-c{
    right:5%;
  }


  /* "Scroll"-Hinweis auf Handy ausblenden */
  .scroll-hint{
    display:none;
  }


  /* ---------------------------------------------------------------
     LEISTUNGSKARTEN AUF HANDY
     --------------------------------------------------------------- */
  .service-grid{
    grid-template-columns:1fr;
  }


  .service-card:last-child{
    grid-column:auto;
  }


  .service-card{
    min-height:360px;
  }


  .service-icon{
    margin-top:34px;
  }


  /* Ablaufzeile kann horizontal gescrollt werden */
  .story-line{
    overflow-x:auto;

    justify-content:flex-start;

    padding:0 10px;

    white-space:nowrap;
  }


  .story-line i{
    min-width:45px;
  }


  /* ---------------------------------------------------------------
     DOKUMENTE AUF HANDY
     ---------------------------------------------------------------
     Auf Desktop: vertikal scrollen -> Dokumente fahren seitlich.
     Auf Handy: echter horizontaler Wisch-/Swipe-Bereich.
     --------------------------------------------------------------- */
  .report-scroll{
    height:auto;

    padding:90px 0;
  }


  .report-stage{
    position:relative;

    height:auto;

    display:block;

    padding:0;
  }


  .report-copy{
    padding:0 18px;

    margin-bottom:34px;
  }


  .report-deck{
    height:auto;

    display:flex;

    position:relative;

    gap:14px;

    overflow-x:auto;

    /* Sorgt dafür, dass Dokumentseiten beim Wischen einrasten */
    scroll-snap-type:
      x mandatory;

    padding:
      8px 18px 36px;

    scrollbar-width:none;
  }


  /* Scrollleiste in Safari/Chrome ausblenden */
  .report-deck::-webkit-scrollbar{
    display:none;
  }


  .report-page{
    position:relative;

    left:auto;
    top:auto;

    /* Jede Karte nimmt 84% der Handybreite ein */
    flex:
      0 0 84vw;

    width:auto;

    height:auto;

    min-height:570px;

    aspect-ratio:auto;

    /* Desktop-JavaScript-Transformationen auf Handy deaktivieren */
    transform:none !important;

    opacity:1 !important;

    scroll-snap-align:center;

    padding:22px;
  }


  /* Fortschrittsbalken braucht man beim Wischen nicht */
  .report-progress{
    display:none;
  }


  /* ---------------------------------------------------------------
     WEITERE HANDY-ANPASSUNGEN
     --------------------------------------------------------------- */

  .trust-panel{
    grid-template-columns:1fr;

    gap:18px;

    padding:28px;
  }


  .cta-section{
    min-height:520px;

    padding:80px 18px;
  }


  .cta-section h2{
    font-size:
      clamp(3rem,14vw,5rem);
  }


  .subhero{
    display:block;

    min-height:auto;

    padding:
      130px 18px 80px;
  }


  .subhero-copy h1{
    font-size:
      clamp(3.7rem,16vw,5.8rem);
  }


  .metric-orbit{
    width:min(390px,92vw);

    margin:
      70px auto 20px;
  }


  .timeline-item{
    grid-template-columns:
      58px 1fr;

    padding:24px 20px;
  }


  .check-grid{
    grid-template-columns:1fr;
  }


  .route-card{
    margin-top:60px;

    padding:24px;
  }


  .step-grid,
  .flow-grid{
    grid-template-columns:1fr;
  }


  .step-card,
  .flow-card{
    min-height:230px;
  }


  .step-card h3,
  .flow-card h3{
    margin-top:45px;
  }


  .dark-slab{
    grid-template-columns:1fr;

    padding:28px;
  }


  .search-stack{
    height:470px;

    margin-top:50px;
  }


  .search-card{
    width:82%;
  }


  .profile-grid{
    grid-template-columns:1fr;
  }


  .choice-grid{
    grid-template-columns:1fr;
  }


  .request-builder{
    margin-top:55px;

    padding:22px;
  }


  .contact-options{
    grid-template-columns:1fr;
  }


  .contact-option{
    min-height:150px;
  }


  .contact-option b{
    margin-top:40px;
  }


  /* Footer auf Handy einspaltig */
  .site-footer{
    grid-template-columns:1fr;

    gap:26px;

    padding:42px 20px;
  }


  .footer-legal{
    align-items:flex-start;
  }


  /* Cookiebuttons untereinander */
  .cookie-actions{
    flex-direction:
      column-reverse;
  }


  .cookie-actions .btn{
    width:100%;
  }
}


/* =====================================================================
   22. WENIGER ANIMATIONEN FÜR NUTZER, DIE DAS IM SYSTEM WÜNSCHEN
   ---------------------------------------------------------------------
   Diese Einstellung verbessert Barrierefreiheit und Komfort.
   ===================================================================== */

@media(prefers-reduced-motion:reduce){
  /* Kamerafahrt bei aktivierter Systemoption "Bewegung reduzieren" ausschalten */
  .hero-car-frame{
    transform:none !important;
    transition:none !important;
  }



  html{
    scroll-behavior:auto;
  }

  *,
  *:before,
  *:after{
    animation-duration:.01ms !important;

    animation-iteration-count:1 !important;

    transition-duration:.01ms !important;
  }

  .reveal{
    opacity:1;

    transform:none;
  }
}

/* =====================================================================
   23. KUULA / AUSSEN + INNEN
   ---------------------------------------------------------------------
   Auf der Startseite gibt es jetzt ZWEI getrennte 360°-Bereiche:

   1. 360°-AUSSENRUNDGANG = 9 Außenaufnahmen
   2. 360°-INNENRAUMBLICK = Interieur

   Desktop:
   beide Karten nebeneinander

   Handy:
   beide Karten untereinander

   Jeder Viewer wird erst nach Klick geladen.
   ===================================================================== */


/* Gesamter 360°-Abschnitt */
.kuula-section{
  padding-top:100px;
  padding-bottom:130px;
}


/* Zwei 360°-Karten nebeneinander */
.kuula-dual-grid{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:18px;
}


/* Eine einzelne Außen-/Innen-Karte */
.kuula-card{
  padding:24px;

  border:
    1px solid var(--line);

  border-radius:28px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.015)
    );

  overflow:hidden;
}


/* Kopfbereich jeder Karte */
.kuula-card-head{
  display:grid;

  grid-template-columns:
    auto 1fr;

  gap:18px;

  min-height:190px;

  padding:8px 6px 24px;
}


/* Nummer 01 / 02 */
.kuula-card-number{
  color:#668196;

  font-size:.78rem;

  font-weight:800;

  letter-spacing:.12em;

  padding-top:4px;
}


/* Titel Außenrundgang / Innenraumblick */
.kuula-card-head h3{
  margin:12px 0 10px;

  font-size:
    clamp(1.8rem,3vw,3rem);

  line-height:1;
}


/* Beschreibung im Kartenkopf */
.kuula-card-head p{
  color:#9fb3c4;

  margin:0;

  max-width:520px;
}


/* ---------------------------------------------------------------
   VIEWER-RAHMEN
   --------------------------------------------------------------- */
.kuula-shell{
  position:relative;

  width:100%;

  overflow:hidden;

  border:
    1px solid rgba(91,180,255,.22);

  background:
    radial-gradient(
      520px 340px at 30% 30%,
      rgba(91,180,255,.13),
      transparent 70%
    ),
    linear-gradient(
      145deg,
      #0b2031,
      #06131f
    );

  box-shadow:
    0 25px 60px rgba(0,0,0,.25);
}


/* Viewer innerhalb der beiden Karten */
.kuula-shell-card{
  min-height:500px;

  border-radius:22px;
}


/* Wenn Kuula geladen wurde */
.kuula-shell.is-loaded{
  background:#06131f;
}


/* ---------------------------------------------------------------
   PLATZHALTER VOR DEM LADEN
   --------------------------------------------------------------- */
.kuula-placeholder{
  position:absolute;

  inset:0;

  display:grid;

  align-items:center;
}


/* Spezieller Aufbau in den Karten */
.kuula-placeholder-card{
  grid-template-rows:
    auto 1fr;

  align-content:center;

  gap:18px;

  padding:36px;
}


/* Große 360°-Kreisgrafik */
.kuula-orbit{
  position:relative;

  aspect-ratio:1;

  margin:auto;

  display:grid;

  place-items:center;

  border:
    1px solid rgba(91,180,255,.30);

  border-radius:50%;

  box-shadow:
    inset 0 0 60px rgba(91,180,255,.06),
    0 0 70px rgba(91,180,255,.06);
}


/* Kleinere Variante für die zwei Karten */
.kuula-orbit-small{
  width:min(230px,65%);
}


/* Rotierender Innenkreis */
.kuula-orbit:before{
  content:"";

  position:absolute;

  inset:14%;

  border:
    1px dashed rgba(143,208,255,.35);

  border-radius:50%;

  animation:
    kuulaRotate 16s linear infinite;
}


/* Ellipse quer durch den Kreis */
.kuula-orbit:after{
  content:"";

  position:absolute;

  width:112%;
  height:44%;

  border:
    1px solid rgba(91,180,255,.25);

  border-radius:50%;

  transform:
    rotate(-14deg);
}


/* 360°-Schrift in der Mitte */
.kuula-orbit span{
  position:relative;

  z-index:2;

  font-size:
    clamp(3rem,5vw,5rem);

  font-weight:900;

  letter-spacing:-.06em;

  color:#fff;

  text-shadow:
    0 0 35px rgba(91,180,255,.35);
}


/* Drehung des gestrichelten Kreises */
@keyframes kuulaRotate{
  to{
    transform:rotate(360deg);
  }
}


/* ---------------------------------------------------------------
   TEXT + BUTTON IM PLATZHALTER
   --------------------------------------------------------------- */
.kuula-placeholder-copy{
  width:100%;
}


.kuula-placeholder-copy-card{
  text-align:center;
}


.kuula-placeholder-copy strong{
  display:block;

  font-size:1.25rem;

  margin-bottom:8px;
}


.kuula-placeholder-copy p{
  color:#9fb3c4;

  font-size:.9rem;

  margin:
    0 auto 20px;

  max-width:420px;
}


/* Direkter Kuula-Link unter dem Button */
.kuula-direct-link{
  display:block;

  width:max-content;

  max-width:100%;

  margin:
    16px auto 0;

  color:#9ccff5;

  text-decoration:none;

  font-size:.82rem;
}


.kuula-direct-link:hover{
  color:#fff;
}


/* ---------------------------------------------------------------
   ECHTER KUULA-iFRAME
   Wird von script.js erzeugt
   --------------------------------------------------------------- */
.kuula-iframe{
  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  min-height:inherit;

  border:0;

  background:#06131f;
}


/* =====================================================================
   TABLET
   ===================================================================== */
@media(max-width:1100px){

  /* Auf schmaleren Tablets untereinander */
  .kuula-dual-grid{
    grid-template-columns:1fr;
  }


  .kuula-card-head{
    min-height:auto;
  }


  .kuula-shell-card{
    min-height:560px;
  }


  .kuula-orbit-small{
    width:min(250px,50%);
  }

}


/* =====================================================================
   HANDY
   ===================================================================== */
@media(max-width:760px){

  .kuula-section{
    padding-top:70px;
    padding-bottom:90px;
  }


  .kuula-dual-grid{
    gap:14px;
  }


  .kuula-card{
    padding:16px;

    border-radius:22px;
  }


  .kuula-card-head{
    grid-template-columns:1fr;

    gap:8px;

    padding:
      10px 4px 22px;
  }


  .kuula-card-number{
    padding:0;
  }


  .kuula-card-head h3{
    font-size:
      clamp(2rem,10vw,3rem);
  }


  .kuula-shell-card{
    min-height:610px;

    border-radius:18px;
  }


  .kuula-placeholder-card{
    padding:26px 18px;
  }


  .kuula-orbit-small{
    width:min(230px,72vw);
  }


  .kuula-placeholder-copy-card .btn{
    width:100%;
  }


  .kuula-iframe{
    min-height:610px;
  }

}

/* =====================================================================
   24. ECHTES HERO-FAHRZEUG + LICHTHUPE
   ---------------------------------------------------------------------
   Dieser Abschnitt ersetzt optisch das frühere gezeichnete CSS-Auto.

   DATEI DES FAHRZEUGS:
   assets/hero-audi.webp

   WAS PASSIERT?
   - Das Foto sitzt rechts im Hero.
   - Beim ersten deutlichen Scrollen blitzen beide Scheinwerfer 2× auf.
   - Danach bleibt ein sehr dezentes Licht bestehen.
   - Gleichzeitig fährt einmal eine Scan-Linie über das Auto.
   - Auf Handy bleibt der Effekt erhalten, aber etwas zurückhaltender.

   WICHTIG BEI EINEM SPÄTEREN AUTOTAUSCH:
   Die Positionen der Scheinwerfer stehen weiter unten bei:
   .hero-headlight-left
   .hero-headlight-right
   ===================================================================== */


/* Der rechte Fahrzeugbereich im Hero */
.hero-car-visual{
  /* Werte werden beim Scrollen leicht durch script.js verändert */
  --hero-shift:0px;
  --hero-scale:1;

  /* KAMERFAHRT:
     Diese vier Werte werden beim Scrollen von script.js verändert. */
  --camera-x:24px;
  --camera-y:10px;
  --camera-scale:.982;
  --camera-rotate:-.55deg;

  position:relative;

  width:min(720px,52vw);

  justify-self:end;

  perspective:1200px;

  transform:
    translateY(var(--hero-shift))
    scale(var(--hero-scale));

  transform-origin:center center;

  transition:transform .12s linear;
}


/* Rahmen um das echte Fahrzeugfoto */
.hero-car-frame{
  position:relative;

  /* ===============================================================
     KAMERFAHRT
     ---------------------------------------------------------------
     Wir bewegen den KOMPLETTEN Rahmen inklusive:
     - Foto
     - Scheinwerfer
     - Matrix-Segmente
     - Scan-Effekt

     Dadurch bleibt alles exakt übereinander.
     =============================================================== */
  transform:
    translate3d(
      var(--camera-x),
      var(--camera-y),
      0
    )
    scale(var(--camera-scale))
    rotate(var(--camera-rotate));

  transform-origin:52% 58%;

  will-change:transform;

  transition:transform .08s linear;

  /* Entspricht dem Seitenverhältnis des optimierten Fotos */
  aspect-ratio:1800 / 1196;

  overflow:hidden;

  border:
    1px solid rgba(91,180,255,.26);

  border-radius:34px;

  background:#071522;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 45px 100px rgba(0,0,0,.36),
    0 0 70px rgba(35,137,216,.08);

  isolation:isolate;
}


/* Das eigentliche Audi-Foto */
.hero-car-image{
  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;

  /* Foto bewusst etwas dunkler, damit Text/Scanner/Licht edel wirken */
  filter:
    brightness(.72)
    saturate(.90)
    contrast(1.08);

  transform:scale(1.012);

  transition:
    filter .5s ease,
    transform .7s var(--ease);
}


/* Beim Scrollen wird das Fahrzeug ganz leicht klarer */
.hero-car-visual.lights-on .hero-car-image{
  filter:
    brightness(.76)
    saturate(.96)
    contrast(1.08);

  transform:scale(1.018);
}


/* Dunkle Maske über den Bildrändern.
   Dadurch verschmilzt das helle Foto besser mit der dunklen Website. */
.hero-car-shade{
  position:absolute;

  inset:0;

  z-index:2;

  pointer-events:none;

  background:
    linear-gradient(
      180deg,
      rgba(4,16,27,.23) 0%,
      rgba(4,16,27,.02) 42%,
      rgba(4,16,27,.20) 100%
    ),
    radial-gradient(
      ellipse at 54% 58%,
      transparent 45%,
      rgba(5,18,30,.11) 69%,
      rgba(5,18,30,.48) 100%
    );

  box-shadow:
    inset 0 0 70px rgba(2,11,19,.22);
}


/* ---------------------------------------------------------------------
   SCHEINWERFER – GEMEINSAME EINSTELLUNGEN
   --------------------------------------------------------------------- */
.hero-headlight{
  position:absolute;

  z-index:7;

  pointer-events:none;

  opacity:.07;

  border-radius:50%;

  /* Heller Kern + bläulicher Rand */
  background:
    radial-gradient(
      ellipse at center,
      rgba(255,255,255,1) 0%,
      rgba(242,252,255,.98) 18%,
      rgba(192,231,255,.88) 36%,
      rgba(91,180,255,.52) 57%,
      rgba(91,180,255,0) 77%
    );

  filter:
    blur(1.4px)
    brightness(1.1);

  mix-blend-mode:screen;

  will-change:opacity,filter;
}


/* Größerer Lichtschein um jeden Scheinwerfer */
.hero-headlight:after{
  content:"";

  position:absolute;

  inset:-55%;

  border-radius:50%;

  background:
    radial-gradient(
      ellipse at center,
      rgba(226,246,255,.44) 0%,
      rgba(91,180,255,.20) 38%,
      transparent 72%
    );

  opacity:.18;

  filter:blur(8px);
}


/* ---------------------------------------------------------------------
   POSITION LINKER SCHEINWERFER IM FOTO
   ---------------------------------------------------------------------
   Prozentwerte beziehen sich auf das Bild.
   Wenn du später das Foto wechselst, werden NUR diese Werte angepasst.
   --------------------------------------------------------------------- */
.hero-headlight-left{
  /* Neues Audi-Frontbild: linker Scheinwerfer */
  left:20.6%;
  top:50.6%;

  width:15.2%;
  height:8.6%;

  transform:rotate(1.4deg);
}


/* ---------------------------------------------------------------------
   POSITION RECHTER SCHEINWERFER IM FOTO
   --------------------------------------------------------------------- */
.hero-headlight-right{
  /* Neues Audi-Frontbild: rechter Scheinwerfer */
  left:64.3%;
  top:50.5%;

  width:15.3%;
  height:8.6%;

  transform:rotate(-1.4deg);
}


/* Nach der Lichthupe bleibt ein dezentes Licht stehen */
.hero-car-visual.lights-on .hero-headlight{
  /* Nach Lichthupe + Matrix bleibt nur ein dezentes Licht stehen. */
  opacity:.18;

  filter:
    blur(1.6px)
    brightness(1.16);
}

.hero-car-visual.lights-on .hero-headlight:after{
  opacity:.24;
}




/* ---------------------------------------------------------------------
   MATRIX-LICHTSEQUENZ
   ---------------------------------------------------------------------
   Nach der zweiten Lichthupe laufen einzelne Lichtsegmente nacheinander
   durch den Scheinwerfer. Links und rechts spiegelverkehrt.

   Das ist KEIN Video: Die Segmente werden komplett mit CSS erzeugt.
   --------------------------------------------------------------------- */

/* Die Matrix-Segmente existieren immer, sind aber normalerweise unsichtbar. */
.hero-headlight:before{
  content:"";

  position:absolute;

  z-index:3;

  left:4%;
  right:4%;
  top:27%;
  height:46%;

  border-radius:999px;

  /* Mehrere helle Segmente nebeneinander */
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,1) 0%,
      rgba(235,249,255,1) 6%,
      rgba(143,208,255,.95) 8%,
      transparent 9.5%,
      transparent 13%
    );

  opacity:0;

  filter:
    blur(.6px)
    brightness(1.8);

  mix-blend-mode:screen;

  box-shadow:
    0 0 10px rgba(255,255,255,.65),
    0 0 22px rgba(91,180,255,.48);

  pointer-events:none;
}


/* Während der Matrix-Sequenz leuchtet der Grundscheinwerfer moderat. */
.hero-car-visual.is-matrix .hero-headlight{
  opacity:.34;

  filter:
    blur(1.5px)
    brightness(1.22);
}


/* LINKER Scheinwerfer:
   Segmente laufen von außen nach innen. */
.hero-car-visual.is-matrix .hero-headlight-left:before{
  animation:
    heroMatrixLeft 1.35s cubic-bezier(.2,.75,.2,1) both;
}


/* RECHTER Scheinwerfer:
   gespiegelt in die Gegenrichtung. */
.hero-car-visual.is-matrix .hero-headlight-right:before{
  animation:
    heroMatrixRight 1.35s .06s cubic-bezier(.2,.75,.2,1) both;
}


/* Linke Matrix-Sequenz */
@keyframes heroMatrixLeft{
  0%{
    opacity:0;
    clip-path:inset(0 100% 0 0);
  }

  8%{
    opacity:1;
  }

  48%{
    opacity:1;
    clip-path:inset(0 0 0 0);
  }

  63%{
    opacity:.32;
    clip-path:inset(0 0 0 0);
  }

  72%{
    opacity:1;
    clip-path:inset(0 0 0 48%);
  }

  88%{
    opacity:.55;
    clip-path:inset(0 0 0 78%);
  }

  100%{
    opacity:0;
    clip-path:inset(0 0 0 100%);
  }
}


/* Rechte Matrix-Sequenz – gespiegelt */
@keyframes heroMatrixRight{
  0%{
    opacity:0;
    clip-path:inset(0 0 0 100%);
  }

  8%{
    opacity:1;
  }

  48%{
    opacity:1;
    clip-path:inset(0 0 0 0);
  }

  63%{
    opacity:.32;
    clip-path:inset(0 0 0 0);
  }

  72%{
    opacity:1;
    clip-path:inset(0 48% 0 0);
  }

  88%{
    opacity:.55;
    clip-path:inset(0 78% 0 0);
  }

  100%{
    opacity:0;
    clip-path:inset(0 100% 0 0);
  }
}


/* ---------------------------------------------------------------------
   LICHTHUPEN-ANIMATION
   Zwei schnelle Lichtimpulse, danach übernimmt .lights-on.
   --------------------------------------------------------------------- */
.hero-car-visual.is-flashing .hero-headlight{
  animation:
    heroHeadlightFlash 1.28s ease-out both;
}


/* Rechte Lampe minimal versetzt -> wirkt weniger künstlich */
.hero-car-visual.is-flashing .hero-headlight-right{
  animation-delay:.035s;
}


.hero-car-visual.is-flashing .hero-headlight:after{
  animation:
    heroHeadlightHalo 1.28s ease-out both;
}


@keyframes heroHeadlightFlash{
  0%{
    opacity:.08;
    filter:blur(1.4px) brightness(1.1);
  }

  9%{
    opacity:1;
    filter:blur(3px) brightness(2.45);
  }

  19%{
    opacity:.13;
    filter:blur(1.4px) brightness(1.1);
  }

  31%{
    opacity:1;
    filter:blur(3.4px) brightness(2.75);
  }

  43%{
    opacity:.16;
    filter:blur(1.5px) brightness(1.12);
  }

  100%{
    opacity:.26;
    filter:blur(1.8px) brightness(1.24);
  }
}


@keyframes heroHeadlightHalo{
  0%,44%{
    opacity:.12;
  }

  9%,31%{
    opacity:1;
  }

  100%{
    opacity:.36;
  }
}


/* ---------------------------------------------------------------------
   SCAN-LINIE ÜBER DEM ECHTEN FAHRZEUG
   --------------------------------------------------------------------- */
.hero-scan-sweep{
  position:absolute;

  z-index:8;

  left:5%;
  right:5%;

  top:7%;

  height:2px;

  opacity:0;

  pointer-events:none;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(143,208,255,.35),
      #ffffff,
      rgba(91,180,255,.75),
      transparent
    );

  box-shadow:
    0 0 16px rgba(91,180,255,.85),
    0 0 38px rgba(91,180,255,.32);
}


.hero-car-visual.is-flashing .hero-scan-sweep{
  animation:
    heroScanSweep 1.2s .08s var(--ease) both;
}


@keyframes heroScanSweep{
  0%{
    top:8%;
    opacity:0;
  }

  12%{
    opacity:.9;
  }

  82%{
    opacity:.75;
  }

  100%{
    top:91%;
    opacity:0;
  }
}


/* ---------------------------------------------------------------------
   SCAN-ECKEN + BESCHRIFTUNGEN AUF DEM FOTO
   --------------------------------------------------------------------- */
.hero-car-frame .scan-corner{
  z-index:9;
}


.hero-car-frame .scan-label{
  z-index:9;

  border-color:
    rgba(91,180,255,.30);

  background:
    rgba(3,14,24,.78);
}

.hero-label-a{
  left:6%;
  top:15%;
}

.hero-label-b{
  right:5%;
  top:25%;
}

.hero-label-c{
  right:7%;
  bottom:8%;
}


/* Kleine "Scrollen · Licht an"-Anzeige unten links */
.hero-car-hint{
  position:absolute;

  z-index:9;

  left:24px;
  bottom:22px;

  display:flex;

  align-items:center;

  gap:9px;

  padding:8px 11px;

  border:
    1px solid rgba(255,255,255,.11);

  border-radius:999px;

  background:
    rgba(3,14,24,.66);

  backdrop-filter:blur(9px);

  color:#b8cad7;

  font-size:.68rem;

  letter-spacing:.08em;

  text-transform:uppercase;
}


.hero-car-hint span{
  width:6px;
  height:6px;

  border-radius:50%;

  background:var(--blue);

  box-shadow:
    0 0 12px rgba(91,180,255,.85);
}


/* ---------------------------------------------------------------------
   HERO-LAYOUT MIT DEM ECHTEN AUTO
   Etwas mehr Platz für das Foto als beim früheren CSS-Auto.
   --------------------------------------------------------------------- */
@media(min-width:1101px){

  .hero-home{
    grid-template-columns:
      minmax(0,.94fr)
      minmax(450px,1.06fr);

    gap:clamp(26px,4vw,62px);
  }

}


/* =====================================================================
   TABLET – ECHTES HERO-AUTO
   ===================================================================== */
@media(max-width:1100px){

  .hero-car-visual{
    width:min(760px,100%);

    justify-self:center;

    margin:10px auto 0;
  }

}


/* =====================================================================
   HANDY – ECHTES HERO-AUTO
   ===================================================================== */
@media(max-width:760px){

  .hero-car-visual{
    width:100%;

    margin-top:54px;

    transform:none !important;
  }


  .hero-car-frame{
    border-radius:22px;
  }


  /* Bild auf Handy einen Tick heller, weil der Bildschirm kleiner ist */
  .hero-car-image{
    filter:
      brightness(.76)
      saturate(.92)
      contrast(1.06);
  }


  .hero-car-visual.lights-on .hero-car-image{
    filter:
      brightness(.79)
      saturate(.97)
      contrast(1.06);
  }


  /* Labels kleiner halten, damit sie das Auto nicht verdecken */
  .hero-car-frame .scan-label{
    font-size:.62rem;

    padding:7px 8px;
  }


  .hero-label-a{
    left:4%;
    top:11%;
  }


  .hero-label-b{
    right:4%;
    top:17%;
  }


  .hero-label-c{
    right:4%;
    bottom:5%;
  }


  /* Den erklärenden Mini-Hinweis auf kleinen Displays ausblenden */
  .hero-car-hint{
    display:none;
  }


  /* Licht etwas dezenter auf Handy */
  .hero-car-visual.lights-on .hero-headlight{
    opacity:.16;
  }

}


/* =====================================================================
   REDUCED MOTION – KEINE LICHTHUPEN-ANIMATION
   ---------------------------------------------------------------------
   Wenn ein Nutzer im Betriebssystem "Bewegung reduzieren" aktiviert,
   zeigen wir nur das dezente Dauerlicht.
   ===================================================================== */
@media(prefers-reduced-motion:reduce){

  .hero-car-visual{
    transform:none !important;
  }


  .hero-car-visual.is-flashing .hero-headlight,
  .hero-car-visual.is-flashing .hero-headlight:after,
  .hero-car-visual.is-flashing .hero-scan-sweep,
  .hero-car-visual.is-matrix .hero-headlight:before{
    animation:none !important;
  }

}



/* =====================================================================
   24. V3 – VIER LEISTUNGEN / NEUE UNTERSEITEN
   ---------------------------------------------------------------------
   Dieser Block ergänzt die neue Seitenstruktur:
   01 Fahrzeugbesichtigung
   02 Fahrzeugsuche & Kaufbegleitung
   03 Fahrzeugverkauf im Kundenauftrag
   04 Fahrzeugüberführung
   ===================================================================== */


/* ---------------------------------------------------------------------
   STARTSEITE: 4 IDENTISCHE LEISTUNGSKACHELN
   --------------------------------------------------------------------- */
.service-grid-four{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.service-grid-four .service-card{
  min-height:390px;
}

.service-grid-four .service-card:last-child{
  grid-column:auto;
}

.service-grid-four .service-number{
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#7990a2;
}

.service-grid-four .service-card h3{
  font-size:clamp(1.75rem,2.5vw,2.5rem);
  line-height:1.02;
}


/* ---------------------------------------------------------------------
   NEUE UNTERSEITEN: GROSSER EINSTIEG
   --------------------------------------------------------------------- */
.service-hero{
  min-height:92svh;

  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);
  align-items:center;
  gap:60px;

  padding:
    calc(var(--header) + 85px)
    max(24px,calc((100vw - var(--max))/2))
    90px;

  border-bottom:1px solid var(--line);

  overflow:hidden;
}

.service-hero-copy{
  max-width:790px;
}

.service-hero-copy h1{
  font-size:clamp(3.8rem,7.3vw,7.5rem);
  line-height:.88;
  margin:20px 0 30px;
}

.service-hero-copy > p{
  max-width:720px;
  color:#b2c3d0;
  font-size:clamp(1rem,1.55vw,1.16rem);
}

.service-punchline{
  color:#fff !important;
  font-weight:750;
  margin:25px 0 !important;
}

.service-hero-number{
  justify-self:center;

  font-size:clamp(11rem,24vw,24rem);
  font-weight:900;
  line-height:.7;
  letter-spacing:-.09em;

  color:transparent;

  -webkit-text-stroke:1px rgba(91,180,255,.24);

  opacity:.7;

  user-select:none;
}


/* ---------------------------------------------------------------------
   ALLGEMEINE INHALTSABSCHNITTE
   --------------------------------------------------------------------- */
.content-section{
  width:min(var(--max),calc(100% - 40px));
  margin:0 auto;
  padding:110px 0;
}

.content-section + .content-section{
  border-top:1px solid rgba(255,255,255,.055);
}

.content-split{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:clamp(45px,7vw,100px);
  align-items:start;
}

.content-heading{
  position:sticky;
  top:110px;
}

.content-heading h2{
  font-size:clamp(2.7rem,4.7vw,5rem);
}

.content-copy{
  max-width:680px;
}

.content-copy p{
  color:#acbecb;
  font-size:1.05rem;
}

.content-copy .btn{
  margin-top:18px;
}

.content-note{
  margin:30px 0 0;
  color:#9fb3c4;
}


/* ---------------------------------------------------------------------
   FEATURE-LISTE / LEISTUNGSUMFANG
   --------------------------------------------------------------------- */
.feature-list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.feature-list span{
  position:relative;
  min-height:86px;

  display:flex;
  align-items:center;

  padding:18px 18px 18px 46px;

  border:1px solid var(--line);
  border-radius:16px;

  background:rgba(255,255,255,.025);

  color:#d2e0ea;

  font-size:.94rem;
}

.feature-list span:before{
  content:"✓";

  position:absolute;
  left:18px;

  color:var(--blue);
  font-weight:900;
}

.feature-list-two{
  grid-template-columns:repeat(2,minmax(0,1fr));
}


/* ---------------------------------------------------------------------
   360° DETAIL-VIEWER AUF UNTERSEITEN
   --------------------------------------------------------------------- */
.kuula-detail-section .section-head{
  max-width:850px;
}

.kuula-detail-section .section-head p{
  max-width:760px;
}

.kuula-detail-view{
  min-height:650px;
  border-radius:28px;
}

.kuula-placeholder-detail{
  grid-template-columns:.8fr 1.2fr;
  gap:60px;
  padding:50px;
}

.kuula-orbit-detail{
  width:min(330px,32vw);
}

.kuula-placeholder-detail .kuula-placeholder-copy h3{
  font-size:clamp(2.2rem,4vw,4rem);
  line-height:.98;
  margin:18px 0 14px;
}


/* ---------------------------------------------------------------------
   PROZESSLISTE – 1 BIS 5
   --------------------------------------------------------------------- */
.process-list{
  border-top:1px solid var(--line);
}

.process-row{
  display:grid;
  grid-template-columns:100px 1fr;
  gap:25px;

  padding:28px 0;

  border-bottom:1px solid var(--line);
}

.process-row > span{
  color:var(--blue);
  font-size:1.3rem;
  font-weight:850;
}

.process-row h3{
  margin:0 0 6px;
  font-size:1.45rem;
}

.process-row p{
  margin:0;
  color:#9fb3c4;
}


/* ---------------------------------------------------------------------
   WICHTIGE HINWEISE / ROLLENVERTEILUNG
   --------------------------------------------------------------------- */
.legal-callout{
  padding:clamp(30px,5vw,60px);

  border:1px solid rgba(91,180,255,.22);
  border-radius:30px;

  background:
    radial-gradient(
      600px 300px at 10% 0%,
      rgba(91,180,255,.09),
      transparent 70%
    ),
    rgba(255,255,255,.025);
}

.legal-callout h2{
  max-width:850px;
  font-size:clamp(2.7rem,4.6vw,4.8rem);
}

.legal-callout p{
  max-width:850px;
  color:#aebfcb;
}


/* ---------------------------------------------------------------------
   FAHRZEUGSUCHE: VERTIKALER ABLAUF
   --------------------------------------------------------------------- */
.vertical-flow{
  max-width:820px;
  margin:0 auto;
}

.flow-stage{
  padding:30px;
  border:1px solid var(--line);
  border-radius:20px;
  background:rgba(255,255,255,.025);
}

.flow-stage span{
  display:block;
  color:var(--blue);
  font-size:.77rem;
  font-weight:900;
  letter-spacing:.17em;
  margin-bottom:10px;
}

.flow-stage p{
  margin:0;
  color:#b6c7d3;
  font-size:1.05rem;
}

.flow-arrow{
  text-align:center;
  color:var(--blue);
  font-size:2rem;
  padding:10px 0;
}


/* ---------------------------------------------------------------------
   QUERVERWEISE ZU ANDEREN LEISTUNGEN
   --------------------------------------------------------------------- */
.cross-service{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}

.cross-card{
  padding:35px;
  border:1px solid var(--line);
  border-radius:24px;
  background:rgba(255,255,255,.025);
}

.cross-card h2{
  font-size:clamp(2rem,3.6vw,3.6rem);
  margin:16px 0;
}

.cross-card p{
  color:#a9bbc8;
}

.single-cross{
  grid-template-columns:1fr;
}


/* ---------------------------------------------------------------------
   ÜBERFÜHRUNG: ROUTEN-ANGABEN
   --------------------------------------------------------------------- */
.route-request{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;

  margin:25px 0;

  padding:16px;

  border:1px solid var(--line);
  border-radius:14px;

  background:rgba(255,255,255,.025);
}

.route-request span{
  color:#e2edf4;
  font-weight:700;
}

.route-request i{
  color:var(--blue);
  font-style:normal;
}


/* ---------------------------------------------------------------------
   CTA-TEXT UNTER DER ÜBERSCHRIFT
   --------------------------------------------------------------------- */
.cta-copy{
  max-width:720px;
  margin:0 auto 28px;
  color:#aabcc9;
}


/* ---------------------------------------------------------------------
   KONTAKTSEITE: VIER AUSWAHLBUTTONS
   --------------------------------------------------------------------- */
.contact-service-hero{
  align-items:start;
  padding-top:calc(var(--header) + 120px);
}

.choice-grid-four{
  grid-template-columns:repeat(2,minmax(0,1fr));
}


/* =====================================================================
   25. AUSWAHL-MENÜ UNTEN – "WAS MÖCHTEN SIE TUN?"
   ===================================================================== */
.action-menu{
  border-top:1px solid var(--line);
  background:#071725;
}

.action-menu-inner{
  width:min(var(--max),calc(100% - 40px));
  margin:0 auto;
  padding:90px 0;
}

.action-menu-head{
  margin-bottom:38px;
}

.action-menu-head h2{
  margin:14px 0 0;
  font-size:clamp(2.5rem,5vw,5rem);
}

.action-menu-links{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}

.action-menu-links a{
  min-height:180px;

  display:flex;
  flex-direction:column;

  padding:22px;

  border:1px solid var(--line);
  border-radius:18px;

  background:rgba(255,255,255,.025);

  text-decoration:none;

  transition:.25s var(--ease);
}

.action-menu-links a:hover{
  transform:translateY(-4px);
  border-color:rgba(91,180,255,.4);
  background:rgba(91,180,255,.05);
}

.action-menu-links span{
  color:#6f8799;
  font-size:.76rem;
}

.action-menu-links b{
  margin-top:auto;
  color:#fff;
  font-size:1.15rem;
}

.action-menu-links i{
  margin-top:14px;
  color:var(--blue);
  font-size:1.4rem;
  font-style:normal;
}


/* =====================================================================
   26. TABLET – V3
   ===================================================================== */
@media(max-width:1100px){

  .main-nav{
    gap:2px;
  }

  .main-nav a{
    padding:9px 9px;
    font-size:.84rem;
  }

  .header-contact{
    padding:9px 14px;
    font-size:.84rem;
  }

  .service-hero{
    grid-template-columns:1fr;
    min-height:auto;
  }

  .service-hero-number{
    display:none;
  }

  .feature-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .action-menu-links{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .kuula-placeholder-detail{
    grid-template-columns:1fr;
    text-align:center;
  }

  .kuula-orbit-detail{
    width:min(280px,55vw);
  }
}


/* =====================================================================
   27. HANDY – V3
   ===================================================================== */
@media(max-width:760px){

  /* Vier Karten untereinander */
  .service-grid-four{
    grid-template-columns:1fr;
  }

  .service-grid-four .service-card{
    min-height:350px;
  }


  /* Unterseiten-Hero */
  .service-hero{
    display:block;

    padding:
      125px 18px 75px;
  }

  .service-hero-copy h1{
    font-size:clamp(3.35rem,15vw,5.5rem);
  }


  /* Inhalt */
  .content-section{
    width:calc(100% - 30px);
    padding:78px 0;
  }

  .content-split{
    grid-template-columns:1fr;
    gap:28px;
  }

  .content-heading{
    position:static;
  }


  /* Leistungslisten untereinander */
  .feature-list,
  .feature-list-two{
    grid-template-columns:1fr;
  }

  .feature-list span{
    min-height:72px;
  }


  /* 360° */
  .kuula-detail-view{
    min-height:660px;
    border-radius:20px;
  }

  .kuula-placeholder-detail{
    min-height:660px;
    padding:28px 20px;
  }

  .kuula-placeholder-detail .kuula-placeholder-copy .btn{
    width:100%;
  }


  /* Ablauf */
  .process-row{
    grid-template-columns:50px 1fr;
    gap:14px;
  }


  /* Querverweise */
  .cross-service{
    grid-template-columns:1fr;
  }

  .cross-card{
    padding:25px;
  }


  /* Kontakt */
  .choice-grid-four{
    grid-template-columns:1fr;
  }


  /* Menü unten */
  .action-menu-inner{
    width:calc(100% - 30px);
    padding:70px 0;
  }

  .action-menu-links{
    grid-template-columns:1fr;
  }

  .action-menu-links a{
    min-height:110px;
  }
}

/* =====================================================================
   28. FIX: STARTSEITE DESKTOP – AUTO UNTER DEM TEXT
   ---------------------------------------------------------------------
   Problem:
   Auf großen Desktop-Bildschirmen standen Text und Fahrzeug nebeneinander
   bzw. das Fahrzeug konnte optisch in den Textbereich hineinragen.

   Neue Lösung:
   - Text steht oben.
   - Fahrzeug steht darunter.
   - Beide nutzen die volle verfügbare Breite.
   - Die Kamerafahrt/Lichthupe/Matrix bleiben vollständig erhalten.
   ===================================================================== */

@media(min-width:1101px){

  .hero-home{
    /* Statt zwei Spalten jetzt eine einzige Spalte */
    grid-template-columns:1fr;

    /* Text zuerst, Auto darunter */
    align-items:start;

    gap:52px;

    /* Auf Desktop darf der Hero etwas höher sein */
    min-height:auto;

    padding-top:calc(var(--header) + 85px);
    padding-bottom:95px;
  }

  .hero-copy{
    /* Text darf etwas breiter wirken, bleibt aber gut lesbar */
    max-width:980px;

    /* Ganz normal links ausrichten */
    justify-self:start;
  }

  .hero-home h1{
    /* Etwas begrenzen, damit die Überschrift nicht übermäßig breit wird */
    max-width:1050px;
  }

  .hero-lead{
    max-width:760px;
  }

  .hero-car-visual{
    /* Fahrzeug jetzt klar UNTER dem Text */
    width:min(1040px,92vw);

    justify-self:center;

    margin:8px auto 0;

    /* Eigener Abstand zum Text */
    position:relative;
    z-index:1;
  }

  .hero-car-frame{
    width:100%;
  }

  /* Der kleine Scroll-Hinweis soll nicht mitten zwischen Text/Auto liegen */
  .scroll-hint{
    bottom:20px;
  }
}


/* =====================================================================
   29. FIX: PDF-ZUSTANDSPROTOKOLL BLEIBT BEIM BLÄTTERN STEHEN
   ---------------------------------------------------------------------
   Problem:
   Die Dokumentseiten wechselten zwar, aber der gesamte Bereich scrollte
   gleichzeitig aus dem sichtbaren Fenster.

   Ursache kann u. a. ein Overflow-Scrollcontainer eines Eltern-Elements
   sein. position:sticky funktioniert nur zuverlässig, wenn die Vorfahren
   keinen unerwünschten Scrollcontainer erzeugen.

   Neue Lösung:
   - horizontales Abschneiden mit "clip" statt "hidden"
   - Report-Bereich ausdrücklich overflow:visible
   - Report-Stage klebt unter dem festen Header
   - genügend Scrollweg für alle fünf Dokumentseiten
   ===================================================================== */


/* "clip" verhindert seitliches Herausragen, ohne einen neuen
   Scrollcontainer für position:sticky zu erzeugen. */
html,
body{
  overflow-x:clip;
}

/* Der Hauptinhalt darf den Sticky-Bereich nicht beschneiden. */
main{
  overflow:visible;
}


/* Gesamter Scrollweg für die 5 Berichtseiten.
   500vh = ungefähr fünf Bildschirmhöhen Scrollweg. */
.report-scroll{
  position:relative;

  height:500vh;

  overflow:visible !important;

  /* Kein transform/contain hier setzen – das würde Sticky stören. */
}


/* Der sichtbare Bericht bleibt während des Scrollens an Ort und Stelle. */
.report-stage{
  position:sticky !important;

  /* Der Header ist nach dem Scrollen 68px hoch.
     Deshalb klebt der Bericht direkt darunter. */
  top:68px;

  /* Sichtbarer Bereich endet am unteren Bildschirmrand. */
  height:calc(100vh - 68px);
  height:calc(100svh - 68px);

  min-height:560px;

  overflow:hidden;

  /* Sticky zuverlässig über nachfolgenden Inhalten halten */
  z-index:20;
}


/* Die Dokumente nutzen die verfügbare Höhe im feststehenden Bereich. */
.report-deck{
  height:min(calc(100vh - 150px),760px);
  height:min(calc(100svh - 150px),760px);
}


/* =====================================================================
   HANDY:
   Hier bleibt bewusst dein bisheriger Wisch-/Swipe-Modus erhalten.
   Auf dem Handy soll der Bereich NICHT sticky sein.
   ===================================================================== */
@media(max-width:760px){

  .report-scroll{
    height:auto;
    overflow:visible !important;
  }

  .report-stage{
    position:relative !important;

    top:auto;

    height:auto;
    min-height:0;

    z-index:auto;
  }

  .report-deck{
    height:auto;
  }
}

/* =====================================================================
   30. SUPER-MATRIX-LED – NEUES AUDI-FRONTBILD
   ---------------------------------------------------------------------
   Dieser Block verändert NUR den Licht-/Matrix-Effekt.
   Das Seitenlayout, die vier Leistungskarten, der PDF-Scroll,
   Tablet und Smartphone bleiben unangetastet.
   ===================================================================== */

.hero-headlight:before{
  left:3%;
  right:3%;
  top:23%;
  height:52%;

  border-radius:999px;

  /* Heller LED-Kern + einzelne Matrix-Segmente */
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.12) 0%,
      rgba(255,255,255,.60) 14%,
      rgba(255,255,255,.90) 34%,
      rgba(194,233,255,.95) 54%,
      rgba(90,180,255,.62) 76%,
      rgba(90,180,255,.12) 100%
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,1) 0%,
      rgba(250,253,255,1) 4.8%,
      rgba(178,228,255,.98) 6.2%,
      rgba(78,168,255,.90) 7.4%,
      transparent 8.8%,
      transparent 12.6%
    );

  opacity:0;

  filter:
    blur(.42px)
    brightness(2.05)
    saturate(1.18);

  box-shadow:
    0 0 10px rgba(255,255,255,.78),
    0 0 22px rgba(144,214,255,.70),
    0 0 40px rgba(91,180,255,.38);

  transform-origin:center center;
}


/* Während Matrix aktiv ist, leuchtet der gesamte Scheinwerfer etwas mit */
.hero-car-visual.is-matrix .hero-headlight{
  opacity:.44;

  filter:
    blur(1.25px)
    brightness(1.34);
}


/* Bewegter Lichtschein um den Scheinwerfer */
.hero-car-visual.is-matrix .hero-headlight:after{
  animation:heroMatrixHaloSuper 1.75s ease-in-out both;
}


/* Linker Matrix-Scheinwerfer */
.hero-car-visual.is-matrix .hero-headlight-left:before{
  animation:
    heroMatrixLeftSuper 1.75s cubic-bezier(.18,.8,.2,1) both;
}


/* Rechter Matrix-Scheinwerfer – leicht zeitversetzt */
.hero-car-visual.is-matrix .hero-headlight-right:before{
  animation:
    heroMatrixRightSuper 1.75s .05s cubic-bezier(.18,.8,.2,1) both;
}


@keyframes heroMatrixHaloSuper{
  0%{
    opacity:.10;
    transform:scale(.92);
    filter:blur(7px);
  }

  18%{
    opacity:.42;
    transform:scale(1.04);
    filter:blur(10px);
  }

  48%{
    opacity:.30;
    transform:scale(1);
    filter:blur(9px);
  }

  68%{
    opacity:.36;
    transform:scale(1.06);
    filter:blur(11px);
  }

  100%{
    opacity:.16;
    transform:scale(.98);
    filter:blur(8px);
  }
}


@keyframes heroMatrixLeftSuper{
  0%{
    opacity:0;
    clip-path:inset(0 100% 0 0);
    transform:translateX(-2%) scaleX(.95);
  }

  8%{
    opacity:1;
  }

  24%{
    opacity:1;
    clip-path:inset(0 56% 0 0);
  }

  42%{
    opacity:1;
    clip-path:inset(0 18% 0 0);
    transform:translateX(0) scaleX(1);
  }

  56%{
    opacity:.96;
    clip-path:inset(0 0 0 0);
  }

  67%{
    opacity:.42;
  }

  76%{
    opacity:1;
    clip-path:inset(0 0 0 44%);
  }

  88%{
    opacity:.78;
    clip-path:inset(0 0 0 74%);
  }

  100%{
    opacity:0;
    clip-path:inset(0 0 0 100%);
    transform:translateX(1.5%) scaleX(1.03);
  }
}


@keyframes heroMatrixRightSuper{
  0%{
    opacity:0;
    clip-path:inset(0 0 0 100%);
    transform:translateX(2%) scaleX(.95);
  }

  8%{
    opacity:1;
  }

  24%{
    opacity:1;
    clip-path:inset(0 0 0 56%);
  }

  42%{
    opacity:1;
    clip-path:inset(0 0 0 18%);
    transform:translateX(0) scaleX(1);
  }

  56%{
    opacity:.96;
    clip-path:inset(0 0 0 0);
  }

  67%{
    opacity:.42;
  }

  76%{
    opacity:1;
    clip-path:inset(0 44% 0 0);
  }

  88%{
    opacity:.78;
    clip-path:inset(0 74% 0 0);
  }

  100%{
    opacity:0;
    clip-path:inset(0 100% 0 0);
    transform:translateX(-1.5%) scaleX(1.03);
  }
}
/* =====================================================================
   AUDI – BESCHRIFTUNGEN AUSBLENDEN
   ===================================================================== */

/* Zustand / Lackmesswerte / Reifen usw. */
.hero-car-frame .scan-label{
  display:none !important;
}

/* Kleiner Hinweis "Scrollen · Licht an" */
.hero-car-hint{
  display:none !important;
}

/* =====================================================================
   KUULA INNENRAUM – KLICK ZUM LADEN + KORREKTE GRÖSSE
   ===================================================================== */

/* Gleiche, feste Darstellung wie die Außen-Karte */
.kuula-consent-shell{
  position:relative;
  width:100%;
  min-height:500px;
  aspect-ratio:16 / 10;
  border-radius:22px;
}

/* Platzhalter füllt den kompletten Bereich */
.kuula-consent-shell .kuula-placeholder{
  position:absolute;
  inset:0;
}

/* Geladener externer Player füllt den Rahmen vollständig */
.kuula-consent-shell .kuula-iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  min-height:0;
  border:0;
  display:block;
}

/* Tablet */
@media(max-width:1100px){
  .kuula-consent-shell{
    min-height:460px;
  }
}

/* Smartphone */
@media(max-width:760px){
  .kuula-consent-shell{
    min-height:420px;
    aspect-ratio:auto;
  }

  .kuula-consent-shell .kuula-placeholder-card{
    padding:26px 20px;
  }
}