/* Autohaus Siebenbürger — Niedergurig bei Bautzen
   ------------------------------------------------------------------
   Thema: Ein Hof, zwei Welten. Links die Werkstatt (dunkel, ölig, alle
   Marken), rechts der Handel (hell, freigestellt, zehn Marken). Der
   Betrieb lebt seit 1998 von beidem, und die Seite muss beides gleich
   ernst nehmen — deshalb ist der WECHSEL zwischen dunkel und hell die
   Signatur dieser Seite und keine Dekoration.

   Farbe kommt aus dem Material: Das Orange ist das Federbein-Orange der
   CFMOTO-Freisteller, die im Fahrzeugraster liegen.

   Mobile first (Hausregel 3 vom 04.08.2026): Die Grundregeln beschreiben
   die schmale Ansicht. Jede Medienabfrage ist ein `min-width`.
*/

@font-face{font-family:GroteskLokal;src:url("schrift/space-grotesk-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:GroteskLokal;src:url("schrift/space-grotesk-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:TightLokal;src:url("schrift/inter-tight-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:TightLokal;src:url("schrift/inter-tight-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:TightLokal;src:url("schrift/inter-tight-600.woff2") format("woff2");font-weight:600;font-display:swap}

:root{
  --nacht:#0c0d0f;
  --stahl:#15171b;
  --stahl-2:#1d2026;
  --kante:rgba(238,240,243,.13);
  --text:#eef0f3;
  --gedaempft:rgba(238,240,243,.7);
  /* Markenblau, gemessen am Signet des Betriebs (Wagenkontur ueber dem
     Schriftzug, Favicon der bisherigen Website): #004890. Vorher stand hier
     Orange — das stammte aus dem WordPress-Thema der Altseite, nicht aus der
     Marke (05.08.2026 nachgemessen).
     Das Original ist auf dem Nachtgrund zu dunkel (2,16:1), traegt aber die
     gefuellten Knoepfe hervorragend. Deshalb drei Abstufungen derselben Farbe:
       --akzent      hell, NUR auf dunklem Grund      #4a93e0 auf #0c0d0f = 6,06:1
       --akzent-hoch aufgehellt fuer Text ueber Fotos #6aa8ea auf #38393a = 4,72:1
       --akzent-satt gefuellte Knoepfe, weisser Text  #fff auf #004890   = 9,01:1
       --akzent-tief Akzenttext auf hellem Grund      #00417f auf #f2f0ec = 8,95:1 */
  --akzent:#4a93e0;
  --akzent-hoch:#6aa8ea;
  --akzent-satt:#004890;
  --akzent-tief:#00417f;
  --akzent-dunkler:#00417f;
  --hell:#f2f0ec;
  --hell-2:#e4e0d9;
  --dunkel-auf-hell:#15171b;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--nacht);color:var(--text);
  font-family:TightLokal,system-ui,Arial,sans-serif;font-weight:400;
  line-height:1.62;font-size:16px;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

h1,h2,h3{font-family:GroteskLokal,system-ui,sans-serif;font-weight:700;
  line-height:1.04;margin:0;letter-spacing:-.02em;overflow-wrap:break-word}
h1{font-size:clamp(2.3rem,10vw,3.2rem)}
h2{font-size:clamp(1.75rem,7vw,2.4rem)}
h3{font-size:1.12rem;line-height:1.2}
p{margin:0;color:var(--gedaempft)}
h1+p,h2+p,h3+p{margin-top:1rem}

.marke{display:inline-block;font-family:GroteskLokal;font-weight:500;
  font-size:.7rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--akzent);margin-bottom:.9rem}
/* Ueber einem Foto ist der Untergrund nie so dunkel wie die Seitenfarbe. */
.hero .marke{color:var(--akzent-hoch)}

.sprung{position:absolute;left:-9999px;top:.5rem;background:var(--text);
  color:var(--nacht);padding:.7rem 1rem;z-index:40;border-radius:6px}
.sprung:focus{left:.75rem}

/* ── Kopf ───────────────────────────────────────────────────────────
   Zwei Reihen auf dem Handy: Marke und Rufknopf oben, die Seitenlinks
   in einer schiebbaren Reihe darunter. Fuenf Eintraege nebeneinander
   passen unter 760 px nicht, ohne dass die Beschriftungen aus ihrem
   Kasten laufen. Zusammen bleibt der Kopf unter 80 px. */
/* Weisse Kopfleiste (Ansage 05.08.2026). Das Signet ist ein blaues Zeichen
   auf weissem Grund — auf dunkler Leiste brauchte es ein weisses Kaestchen
   darunter, das wie ein Aufkleber wirkte. Auf weissem Grund steht es frei.
   Nachgerechnet: Navigationstext #12151a auf Weiss 18,3:1, gedaempft
   #3d4550 9,7:1, Markenblau als Knopf mit weisser Schrift 9,0:1. */
.kopf{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);border-bottom:1px solid rgba(12,13,15,.14)}
.kopf .wortmarke img{background:transparent;padding:0;border-radius:0}
.kopf .wege a{color:#3d4550}
.kopf .wege a[aria-current="page"],.kopf .wege a:hover{color:#12151a;background:rgba(12,13,15,.07)}
.kopf .knopf,.kopf .knopf--voll{background:var(--akzent-satt);border-color:var(--akzent-satt);color:#fff}
.kopf .knopf:hover{background:#00376b;border-color:#00376b}
.kopf .nav-schalter,.kopf .kwnav-burger{color:#12151a;border-color:rgba(12,13,15,.3)}
.kopf__innen{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;row-gap:.2rem;column-gap:.6rem;
  max-width:1220px;margin:auto;padding:.25rem 1rem .3rem}
.wortmarke{display:flex;align-items:center;gap:.55rem;order:1;flex:0 1 auto;min-width:0}
.wortmarke img{width:74px;height:32px;object-fit:contain;background:#fff;
  border-radius:6px;padding:3px}
.wortmarke span{font-family:GroteskLokal;font-weight:700;font-size:.76rem;
  line-height:1.05;letter-spacing:-.01em}
.wege{order:3;flex:1 0 100%;display:flex;gap:.1rem;overflow-x:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.wege::-webkit-scrollbar{display:none}
.wege a{flex:0 0 auto;font-size:.8rem;color:var(--gedaempft);
  padding:.3rem .5rem;border-radius:999px;white-space:nowrap}
.wege a[aria-current="page"],.wege a:hover{color:var(--text);background:rgba(238,240,243,.09)}
.ruf{order:2;flex:0 0 auto}

.knopf{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:.55rem 1.05rem;border-radius:6px;border:1px solid transparent;
  background:var(--akzent-satt);color:#fff;font-family:GroteskLokal;font-weight:700;
  font-size:.86rem;letter-spacing:.01em;cursor:pointer}
.knopf:hover{background:var(--akzent-tief)}
.kopf .knopf{min-height:36px;padding:.35rem .8rem;font-size:.82rem}
.knopf--leer{background:transparent;border-color:var(--kante);color:var(--text)}
.knopf--leer:hover{background:rgba(238,240,243,.08)}

/* ── Hero ───────────────────────────────────────────────────────────
   Ein Foto ueber die volle Breite, abgedunkelt, Text unten links.
   Das ist die Vorgabe aus `elektro_hell`. */
.hero{position:relative;display:grid;align-items:end;min-height:74vh;
  overflow:hidden;border-bottom:1px solid var(--kante)}
.hero__bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Die Abdunklung muss die TEXTZONE unten links zuverlaessig tragen, nicht
   nur „irgendwie dunkler machen". Bei 1920 px lag hinter der Auszeichnung
   auf „Ueber uns" eine helle Stelle des Fotos, und der Akzent kam dort nur
   auf 4,10:1 statt der geforderten 4,5. Deshalb links und unten deutlich
   staerker als vorher. */
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(12,13,15,.97) 10%,rgba(12,13,15,.62) 58%,rgba(12,13,15,.66)),
             linear-gradient(90deg,rgba(12,13,15,.93) 8%,rgba(12,13,15,.55) 55%,transparent 82%)}
/* `margin:auto` NICHT verwenden: Ein Rasterelement mit automatischen Raendern
   zentriert sich selbst und setzt `align-items:end` ausser Kraft — der
   Hero-Text stand dadurch in der Bildmitte statt unten, mit 200 px Leere
   darunter. Waagerecht zentrieren, senkrecht nicht. */
.hero__innen{position:relative;z-index:1;width:100%;max-width:1220px;
  margin-inline:auto;padding:5rem 1rem 2.6rem}
.hero p{font-size:1.05rem;max-width:38rem}
.hero__knoepfe{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1.8rem}
.hero__knoepfe .knopf{flex:1 1 14rem}
/* Zwei Klassen, damit die Unterseiten-Hoehe nicht von der spaeteren
   Breiten-Regel `.hero{min-height:82vh}` ueberschrieben wird. */
.hero.klein{min-height:44vh}
.hero.klein .hero__innen{padding-top:4rem}

.band{padding:3.4rem 1rem}
.innen{max-width:1220px;margin:auto}
.hell{background:var(--hell);color:var(--dunkel-auf-hell);
  border-block:1px solid var(--hell-2)}
.hell h1,.hell h2,.hell h3{color:var(--dunkel-auf-hell)}
.hell p{color:#4a4f57}
/* Umrissknopf auf hellem Band: Er erbte die helle Textfarbe der dunklen
   Seite und stand damit fast unsichtbar auf dem Papierton (1,00:1). */
.hell .knopf--leer{color:var(--dunkel-auf-hell);border-color:#c9c4bb}
.hell .knopf--leer:hover{background:rgba(21,23,27,.07)}
.hell .marke{color:var(--akzent-tief)}

.zwei{display:grid;gap:1.6rem}
.zwei p{font-size:1.04rem}

/* ── Kacheln ────────────────────────────────────────────────────────
   Hausregel 4 vom 04.08.2026: Die Nummer steht LINKS NEBEN der
   Ueberschrift, in derselben Groesse, in der Akzentfarbe, und ist fuer
   die Vorlesestimme unsichtbar. Der Kopfbereich haelt zwei Zeilen frei,
   damit in einer Reihe alle Fliesstexte auf derselben Hoehe beginnen. */
.kacheln{display:grid;gap:1px;background:var(--kante);border:1px solid var(--kante);
  margin-top:2.2rem}
.kachel{background:var(--stahl);padding:1.4rem 1.25rem 1.6rem}
.hell .kacheln{background:var(--hell-2);border-color:var(--hell-2)}
.hell .kachel{background:var(--hell)}
/* Die Kachelnummer traegt die Akzentfarbe. Im hellen Band ist das die
   dunkle Stufe — der helle Akzent kam dort auf 2,77:1. */
.hell .kachel__nr{color:var(--akzent-tief)}
.kachel__kopf{display:flex;align-items:baseline;gap:.65rem;
  font-size:1.12rem;line-height:1.2;min-height:2.4em}
.kachel__nr{font-family:GroteskLokal;font-weight:700;color:var(--akzent);
  font-size:inherit;line-height:inherit}
.kachel p{margin-top:.55rem;font-size:.96rem}

/* ── Leistungsliste ─────────────────────────────────────────────── */
/* Leistung links, Zusatz rechts — aber erst, wenn beides nebeneinander passt.
   Auf 320 px lief „Karosserieinstandsetzung" neben „im Haus" aus der Seite;
   deshalb ist gestapelt der Grundzustand und nebeneinander die Erweiterung. */
.liste{display:grid;gap:0;margin-top:2rem;border-top:1px solid var(--kante)}
.liste div{display:flex;flex-wrap:wrap;justify-content:space-between;
  align-items:baseline;gap:.15rem 1rem;padding:.85rem 0;
  border-bottom:1px solid var(--kante)}
.liste b{font-family:GroteskLokal;font-weight:500;font-size:1rem;min-width:0}
.liste span{color:var(--gedaempft);font-size:.86rem}
.hell .liste,.hell .liste div{border-color:var(--hell-2)}
.hell .liste span{color:#565c64}

/* ── Fahrzeugraster (Freisteller auf hell) ──────────────────────── */
.fahrzeuge{display:grid;gap:1px;background:var(--hell-2);
  border:1px solid var(--hell-2);margin-top:2rem}
.fahrzeug{background:#fff;padding:1.2rem;display:flex;flex-direction:column}
.fahrzeug img{width:100%;height:150px;object-fit:contain;margin-bottom:.9rem}
.fahrzeug b{font-family:GroteskLokal;font-weight:700;font-size:1rem;
  color:var(--dunkel-auf-hell)}
.fahrzeug span{font-size:.84rem;color:#565c64;margin-top:.2rem}
.fahrzeug[hidden]{display:none}

/* ── Mitmach-Station ────────────────────────────────────────────── */
.station{border:1px solid var(--kante);background:var(--stahl);
  padding:1.3rem 1.15rem;margin-top:1.8rem}
.hell .station{border-color:var(--hell-2);background:#fff}
.wahl{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:1.2rem}
.wahl button{appearance:none;font:inherit;font-family:GroteskLokal;font-weight:500;
  font-size:.88rem;min-height:44px;padding:.55rem 1rem;border-radius:6px;cursor:pointer;
  border:1px solid var(--kante);background:transparent;color:var(--text)}
.wahl button[aria-pressed="true"]{background:var(--akzent);border-color:var(--akzent);color:#fff}
.hell .wahl button{border-color:#cfcac2;color:var(--dunkel-auf-hell)}
.hell .wahl button[aria-pressed="true"]{background:var(--akzent-satt);border-color:var(--akzent-satt);color:#fff}
.antwort{border-left:3px solid var(--akzent-satt);padding:.2rem 0 .2rem 1rem}
.antwort b{display:block;font-family:GroteskLokal;font-weight:700;font-size:1.05rem;
  color:var(--text);margin-bottom:.35rem}
.hell .antwort b{color:var(--dunkel-auf-hell)}
.antwort a{color:var(--akzent);text-decoration:underline;text-underline-offset:3px;
  display:inline-block;min-height:24px;padding-block:2px}
.hell .antwort a{color:var(--akzent-tief)}

/* ── Bildstreifen ───────────────────────────────────────────────── */
.streifen{position:relative;min-height:38vh;overflow:hidden;
  border-block:1px solid var(--kante)}
.streifen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.streifen::after{content:"";position:absolute;inset:0;background:rgba(12,13,15,.55)}

/* ── Kontakt ────────────────────────────────────────────────────── */
.feld{display:grid;gap:.9rem;margin-top:1.6rem}
label{display:grid;gap:.3rem;font-family:GroteskLokal;font-weight:500;font-size:.88rem}
input,textarea,select{width:100%;font:inherit;padding:.75rem;border-radius:6px;
  border:1px solid var(--kante);background:rgba(238,240,243,.06);color:var(--text)}
textarea{min-height:7.5rem;resize:vertical}
.daten{display:grid;gap:0;margin-top:1.4rem;border-top:1px solid var(--kante)}
.daten p{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;
  gap:.2rem 1.2rem;padding:.15rem 0;border-bottom:1px solid var(--kante)}
.daten b,.daten span,.daten a{display:flex;align-items:center;min-height:44px;margin:0}
.daten a{padding-block:0}
.daten b{font-family:GroteskLokal;font-weight:600;font-size:.98rem;color:var(--text)}
.daten span{color:var(--gedaempft);font-size:.9rem}
.daten a{color:var(--akzent);text-decoration:underline;text-underline-offset:3px;
  display:inline-block;min-height:44px;padding-block:.55rem}

/* ── Rechtstexte ────────────────────────────────────────────────── */
.rechtstext{max-width:44rem}
.rechtstext h1{font-size:clamp(2rem,8vw,2.6rem);margin-bottom:.4rem}
.rechtstext h2{font-size:1.15rem;margin:2.2rem 0 .5rem}
.rechtstext p{margin-bottom:.85rem}
.rechtstext a{text-decoration:underline;text-underline-offset:3px;
  display:inline-block;min-height:24px;padding-block:2px}
.hinweis{margin-top:2.6rem;border:1px solid var(--akzent);border-left-width:4px;
  background:rgba(239,104,32,.09);padding:1.15rem;border-radius:6px}
.hinweis strong{display:block;font-family:GroteskLokal;color:var(--akzent);margin-bottom:.5rem}
.hinweis p:last-child{margin-bottom:0}

/* ── Fuss ───────────────────────────────────────────────────────── */
.fuss{background:#080909;border-top:1px solid var(--kante);padding:2.6rem 1rem}
.fuss__innen{max-width:1220px;margin:auto;display:grid;gap:1.6rem}
.fuss b{font-family:GroteskLokal;font-weight:700}
.fuss p{font-size:.92rem}
.fuss a{color:var(--text);text-decoration:underline;text-underline-offset:3px;
  display:inline-block;min-height:44px;padding-block:.55rem}
.fein{font-size:.82rem;color:rgba(238,240,243,.55)}
/* Impressum und Datenschutz sind kleiner gesetzt als die uebrigen Fusszeilen,
   muessen aber trotzdem sicher zu treffen sein: gemessen waren sie 23,6 px
   hoch und damit unter der Mindestgroesse von 24. */
.fein a{min-height:32px;padding-block:.3rem;font-weight:600}

:focus-visible{outline:3px solid var(--akzent);outline-offset:3px}

/* ══ ab 620 px ═══════════════════════════════════════════════════ */
@media (min-width:620px){
  .kacheln{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .fahrzeuge{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .fuss__innen{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .feld{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .feld .weit{grid-column:1/-1}
  .hero__knoepfe .knopf{flex:0 0 auto}
}

/* ══ ab 760 px: der Kopf passt wieder in eine Reihe ═══════════════ */
@media (min-width:760px){
  .kopf__innen{flex-wrap:nowrap;padding:.5rem 1.4rem;column-gap:1.2rem}
  .wortmarke{order:0}
  .wortmarke img{width:92px;height:40px}
  .wortmarke span{font-size:.86rem}
  .wege{order:0;flex:1 1 auto;justify-content:center;overflow:visible}
  .wege a{font-size:.88rem;padding:.45rem .7rem}
  .ruf{order:0}
  .kopf .knopf{min-height:42px;padding:.5rem 1rem;font-size:.86rem}
  .band{padding:5rem 1.4rem}
  .hero__innen{padding:7rem 1.4rem 4rem}
  .fuss{padding:3.4rem 1.4rem}
}

/* ══ ab 1000 px ══════════════════════════════════════════════════ */
@media (min-width:1000px){
  h1{font-size:clamp(3rem,5.4vw,4.6rem)}
  h2{font-size:clamp(2.2rem,3.4vw,3rem)}
  .hero{min-height:82vh}
  .hero.klein{min-height:50vh}
  /* 05.08.2026: Ueberschrift und Text stehen UNTEREINANDER. Der Beitext
     neben der Ueberschrift zerreisst den Lesefluss — die Anweisung dazu
     steht in ANWEISUNG-NEU, Hausregel 15. */
  .zwei{grid-template-columns:minmax(0,1fr);gap:1.1rem}
  .zwei > div > p{max-width:70ch}
  /* Zwei eigenstaendige Bloecke duerfen nebeneinander stehen (Kontaktdaten
     und Formular). Das ist kein Beitext zur Ueberschrift, sondern ein Paar. */
  .zwei.gespann{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2.6rem;align-items:start}
  .kacheln{grid-template-columns:repeat(3,1fr)}
  .fahrzeuge{grid-template-columns:repeat(3,1fr)}
  .fahrzeug img{height:180px}
  .band{padding:6rem 2rem}
  .hero__innen{padding:8rem 2rem 5rem}
  .streifen{min-height:46vh}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* Bilder auf der Fahrzeugseite (ergänzt 05.08.2026). Die drei Kacheln
   „Gebrauchtwagen", „EU-Neuwagen" und „Fahrzeugbeschaffung" trugen als
   einzige der Seite kein Bild — darunter standen zwölf Modellfotos, darüber
   drei leere Kästen. Die Motive stammen von der bisherigen Website: der Hof
   in Niedergurig, das Meisterschild, das Team. */
.karte__bild{width:calc(100% + 2.5rem);height:auto;margin:-1.4rem -1.25rem 1.1rem;
  display:block;aspect-ratio:16/9;object-fit:cover;border-bottom:1px solid var(--kante)}
.kachel:has(.karte__bild){padding-top:0}