/* =====================================================================
   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);
}

/* Umschalter zwischen den Ansichten – sitzt jetzt IN der Box */
.auto-schalter {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  margin-bottom: 10px;
}
.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; }
}