/* Alpine Automotive — Designsystem „Der Grat".
 *
 * Die Gratlinie: die letzte harte Kante vor dem Abbruch. Dunkel, kuehl,
 * gruen gefuehrt, wobei das Markengruen die Arbeit macht, die sonst eine
 * Akzentfarbe taete. Es GIBT keine Akzentfarbe — Betonung entsteht aus
 * Gewicht, Groesse und dem Wechsel zwischen hellem und dunklem Grund.
 *
 * Warum nicht wie die Nachbarseiten: das Logogruen des Kunden liegt nah an
 * dem einer Schwesterseite, der Farbton allein kann die beiden also nicht
 * trennen. Die Trennung laeuft ueber vier andere Achsen gleichzeitig —
 * Temperatur des Grundes, Akzentdisziplin, Schriftsilhouette und
 * Strukturmotiv. Siehe DESIGN.md.
 *
 * Die Zielgruppe sind aeltere Verkaeuferinnen und Verkaeufer. Das ist keine
 * Stimmung, sondern eine Reihe von Zahlen, die hier nicht unterschritten
 * werden: Fliesstext 1.155rem bei 1.7, Bedienflaechen ab 3.5rem, keine
 * Versalzeile unter 0.84rem, kein Akkordeon.
 */

:root {
  /* Grundflaechen */
  --nacht: #0F1513;      /* tiefster Grund: Kopf, Titelbild, Fuss */
  --forst: #14382B;      /* dunkelgruenes Band: Statement, Schlussband */
  --firn: #F2F4F3;       /* Seitengrund, kuehles Gebrochen-Weiss */
  --schnee: #FFFFFF;     /* Flaechen, Formularfelder, Schneeflaechen im Zeichen */
  --tau: #E6EDE9;        /* dritter heller Grund: stark verduennter Markenton */

  /* Marke */
  --tann: #1D4A38;       /* Markengruen: Knopffuellung, Links, aktive Zustaende */
  --tann-hell: #2C6A50;  /* Hover und gedrueckt */

  /* Schrift */
  --fels: #2F3A35;       /* Fliesstext auf hellem Grund — bewusst dunkel */
  --nebel: #C2CFC8;      /* Fliesstext auf dunklem Grund */
  --moos: #55645C;       /* Metadaten auf HELLEM Grund, auch auf --tau */
  --latsche: #93A399;    /* Metadaten auf DUNKLEM Grund (7.0:1 auf --nacht) */

  /* Linien und Zustaende */
  --grat: #C9D4CE;       /* 1px-Linien, Feldraender — nie eine Fuellung */
  --fokus: #3F8C66;      /* Fokusring, sichtbar auf hellem UND dunklem Grund */
  --fehler: #B3352E;     /* nur Fehlerzustaende, nie Dekoration */
  --erledigt: #2F6B4F;   /* nur Erfolgszustaende */

  /* Schriftfamilien. Newsreader, Barlow Condensed und Geist sind gesperrt:
     die ersten beiden gehoeren Nachbarprojekten, Geist tragen beide. */
  --display: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --body: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Mass */
  --gutter: clamp(1.15rem, 4.5vw, 4rem);
  --section: clamp(3.5rem, 7.5vw, 6rem);

  /* Markenlauf: Abstand zwischen zwei Zeichen und Dauer eines Durchlaufs. */
  --marken-abstand: clamp(1.6rem, 3vw, 2.6rem);
  --marken-dauer: 26s;

  /* Der Abstand von der Fensterkante bis zur linken Textkante der Seite. Wird
     gebraucht, wo ein Abschnitt randlos laeuft, sein Text aber trotzdem auf der
     Kante aller uebrigen Abschnitte stehen muss — eine um 70 Pixel versetzte
     Textkante liest sich als Fehler, weil sie einer ist. */
  --rand: max(var(--gutter), calc((100vw - 78rem) / 2 + var(--gutter)));
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--firn);
  color: var(--fels);
  font-family: var(--body);
  font-size: 1.2rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
p { margin: 0; }
a { color: inherit; }

/* Der Ring sitzt mit Abstand auf dem SEITENgrund, nicht auf dem Bedienelement —
   deshalb ist --fokus gegen alle vier Grundflaechen geprueft, auf denen ein
   Knopf stehen kann. */
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }

/* font-stretch, nicht font-variation-settings: die selbst gehostete Archivo ist
   eine variable Schrift, deren Breitenachse ueber font-stretch angesprochen
   wird. font-variation-settings haette dieselbe Wirkung, umgeht aber die
   Schriftauswahl des Browsers und bricht damit die Rueckfallkette. */
h1, h2, h3, .mark {
  font-family: var(--display);
  font-stretch: 105%;
  color: var(--nacht);
  margin: 0;
  text-wrap: balance;
  /* Deutsch, und dann auch noch Fahrzeugdeutsch: „Unfallfahrzeuge",
     „Gebrauchtwagen", „Nutzfahrzeuge". Auf einem 320er Schirm ist so ein Wort
     in Ueberschriftgroesse breiter als die Spalte, und weil ein Rasterelement
     mindestens so breit wird wie sein laengstes Wort, schob es auf den
     Kategorieseiten die ganze Seite 15 Pixel nach rechts. Die Trennung nach
     Sprachregeln loest das dort, wo es entsteht — lang="de-AT" steht im
     <html>. */
  hyphens: auto;
  -webkit-hyphens: auto;
}
h1 { font-size: clamp(2.5rem, 5.9vw, 4.8rem); font-weight: 600; line-height: 1.03; letter-spacing: -0.032em; }
h2 { font-size: clamp(2.15rem, 4.4vw, 3.5rem); font-weight: 600; line-height: 1.06; letter-spacing: -0.028em; }
h3 { font-size: clamp(1.4rem, 2.1vw, 1.8rem); font-weight: 600; line-height: 1.18; letter-spacing: -0.018em; }

.wrap { max-width: 78rem; margin-inline: auto; padding-inline: var(--gutter); }
.lede { font-size: clamp(1.28rem, 1.75vw, 1.55rem); line-height: 1.55; max-width: 46ch; }

/* Hier stand die Kicker-Zeile: gesperrte Versalien in Monospace, einmal ueber
   jeder Ueberschrift der Seite. Sie ist ersatzlos gestrichen — sie war die
   kleinste Schrift eines Auftritts fuer aeltere Leser und zugleich das
   deutlichste Merkmal einer Vorlage. Was sie an Auskunft trug, steht jetzt im
   Satz darunter oder in der Ueberschrift selbst.

   Die einzige Ausnahme ist die Nummer auf den Kategorieseiten: die Reihenfolge
   01/02/03 bedeutet etwas, also steht sie da — aber gross und in Markengruen,
   nicht als 13-Pixel-Versalzeile. */
.seitenkopf__nr, .kategorie__nr {
  font-family: var(--display); font-stretch: 105%; font-weight: 700;
  font-size: clamp(2.3rem, 4.2vw, 3.2rem); line-height: .85; letter-spacing: -.03em;
  color: var(--tann);
}
.seitenkopf__nr { margin-bottom: .5rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  background: var(--tann); color: #fff;
  font-family: var(--body); font-weight: 600; font-size: 1.1rem;
  text-decoration: none; padding: 1.15rem 2rem; border: 0; border-radius: 2px;
  cursor: pointer;
  min-height: 3.5rem;           /* Zielgruppen-Untergrenze, nicht Geschmack */
  transition: background .18s;
}
.btn:hover { background: var(--tann-hell); }
.btn--licht { background: var(--firn); color: var(--nacht); }
.btn--licht:hover { background: #fff; }

.textlink {
  font-weight: 500; text-decoration: underline;
  text-underline-offset: 4px; text-decoration-thickness: 1px;
}

/* Der Telefonblock. Eine gleichrangige Hauptaktion, keine Fussnote: wer nicht
   tippen will, soll auf dieser Seite nirgends tippen muessen. */
.tel { display: inline-flex; flex-direction: column; gap: .15rem; text-decoration: none; }
.tel small { font-size: .95rem; color: var(--fels); }
.tel b {
  font-family: var(--mono); font-weight: 600; font-variant-numeric: tabular-nums;
  font-size: clamp(1.45rem, 2.3vw, 1.85rem); color: var(--nacht); letter-spacing: -.01em;
}
.tel--dunkel small { color: var(--nebel); }
.tel--dunkel b { color: #fff; }
.tel:hover b { text-decoration: underline; text-underline-offset: 5px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }

  /* Der Markenlauf steht durch die Zeile darueber still — und damit stuende
     die halbe Spur ausserhalb des Bandes. Angehalten ist er deshalb kein
     Laufband mehr, sondern wieder der umbrechende Streifen, der er vorher war:
     die Kopie faellt weg, die echte Spur bricht um. */
  .marken__band { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .marken__spur { flex: 1 1 auto; flex-wrap: wrap; }
  .marken__spur[aria-hidden="true"] { display: none; }

  /* Und derselbe Fall beim Bildlauf: steht die Spur still, stuenden zwei von
     drei Aufnahmen ausserhalb des Rahmens und waeren ohne Bedienelement gar
     nicht mehr erreichbar. Angehalten ist er deshalb kein Laufwerk mehr,
     sondern eine Reihe — nebeneinander, wo Platz ist, untereinander auf dem
     Telefon. Die Kopie des ersten Feldes faellt weg. */
  .bildlauf__rahmen { overflow: visible; }
  .bildlauf__spur { flex-wrap: wrap; gap: .5rem; }
  .bildlauf__feld { flex: 1 1 13rem; }
  .bildlauf__feld[aria-hidden="true"] { display: none; }
}

/* ==========================================================================
   Layout
   ==========================================================================

   Die Reihenfolge der Abschnitte auf der Startseite ist der Entwurf (siehe
   DESIGN.md): dunkles Titelbild, duenne Markenleiste, dunkles Statement, der
   Grat, klebendes Register, randloses Bild, Karten, zweifarbiger Block,
   typografisches Raster, dunkle Zeitleiste, offene Fragen, helles Unternehmen,
   tiefgruenes Schlussband. Der erste Entwurf hatte fuenfmal denselben
   zweispaltigen Block und ist genau daran gescheitert.

   Eine Klasse pro Abschnitt, keine Typselektoren, die sich mit Klassen um
   dieselbe Polsterung streiten.
   ========================================================================== */

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--tann); color: #fff; padding: 1rem 1.5rem; text-decoration: none;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ---------- Kopf ---------- */

.kopf { background: var(--nacht); position: relative; z-index: 5; }
.kopf__in { display: flex; align-items: center; gap: 1.75rem; padding-block: 1.05rem; flex-wrap: wrap; }

/* Auf dem dunklen Band kehrt sich das Zeichen um: die Bergflaeche wird hell,
   der Schnee wird zum Bandton. Genau so ist die Vorlage gezeichnet — die
   weissen Taeler sind Aussparungen, keine Fuellung. */
.kopf__marke {
  display: inline-flex; text-decoration: none;
  --logo-berg: var(--firn); --logo-schnee: var(--nacht); --logo-salbei: var(--latsche);
}
.kopf__marke .logo { height: 52px; width: auto; }

.nav { display: flex; gap: 1.6rem; flex-wrap: wrap; margin-left: auto; font-size: 1.02rem; font-weight: 500; }
.nav a { color: var(--nebel); text-decoration: none; padding-block: .5rem; border-bottom: 2px solid transparent; }
.nav a:hover { color: #fff; border-bottom-color: var(--latsche); }
.nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--tann-hell); }

.kopf__tel { display: flex; flex-direction: column; text-decoration: none; line-height: 1.25; }
.kopf__tel small { font-size: .82rem; color: var(--latsche); }
.kopf__tel b { font-family: var(--mono); font-weight: 600; font-size: 1.22rem; color: #fff; font-variant-numeric: tabular-nums; }

/* ---------- Titelbild ---------- */

.hero { position: relative; background: var(--nacht); isolation: isolate;
  padding-bottom: clamp(3.5rem, 7vw, 5.5rem); }
.hero__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: center 44%; z-index: 0; }
/* Der Schleier war mit 96% so dicht, dass vom Fahrzeug fast nichts uebrig blieb
   — auf einer Seite, deren Farbe die Fotos sind. Er ist jetzt nur noch dort
   dicht, wo wirklich Text darauf steht, und gibt die rechte Haelfte frei. */
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(15,21,19,.94) 0%, rgba(15,21,19,.80) 38%,
    rgba(15,21,19,.24) 72%, rgba(15,21,19,.42) 100%); }
.hero__in { position: relative; z-index: 2; padding-block: clamp(3.25rem, 8vw, 6rem) 0; }
/* Sentence case statt gesperrter Versalien: dieselbe Auskunft, aber lesbar. */
.hero__ort { color: var(--nebel); font-size: 1.05rem; margin-bottom: 1.3rem; }
.hero h1 { hyphens: none; color: #fff; max-width: 16ch; margin-bottom: 1.4rem; }
.hero__lede { color: #D3DED8; margin-bottom: 2.2rem; }
.hero__cta { display: flex; gap: 2.25rem; align-items: center; flex-wrap: wrap; }

/* ---------- Markenleiste ---------- */

.marken { background: var(--nacht); padding-block: clamp(3.25rem, 5vw, 4.25rem) 1.75rem; }
.marken__in { border-top: 1px solid rgba(255,255,255,.15); padding-top: 1.5rem; }
.marken__in > span { font-size: 1.02rem; color: var(--latsche); }

/* Der Markenlauf.
 *
 * Zwei identische Spuren nebeneinander, beide um die eigene Breite nach links.
 * Wenn die erste vollstaendig draussen ist, steht die zweite exakt an deren
 * Startpunkt — daher kein Sprung und kein sichtbarer Anfang.
 *
 * Die Geschwindigkeit ist in Sekunden je Durchlauf gesetzt, nicht in Pixeln je
 * Sekunde: eine Spur ist am Telefon schmaler als am Schirm, und mit fester
 * Dauer laeuft sie dort von selbst ruhiger. Rund 45 Pixel je Sekunde am
 * Schirm — schnell genug, dass man den Lauf sieht, langsam genug, dass man
 * jedes Zeichen erkennt.
 *
 * Der Lauf ist die einzige dauernde Bewegung auf dieser Seite. Er haelt an,
 * sobald jemand mit der Maus darauf geht oder mit der Tastatur hineinkommt,
 * und er laeuft gar nicht erst, wenn das Geraet reduzierte Bewegung meldet —
 * siehe den Block ganz unten.
 */
.marken__band {
  display: flex; width: 100%; overflow: hidden; margin-top: .9rem;
  /* Die Zeichen sollen an den Raendern verblassen statt abgeschnitten zu
     werden; sonst sieht der Lauf aus, als endete er in einer Kante. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marken__spur {
  display: flex; flex: 0 0 auto; align-items: center;
  gap: var(--marken-abstand); padding-right: var(--marken-abstand);
  animation: marken-lauf var(--marken-dauer) linear infinite;
  will-change: transform;
}
@keyframes marken-lauf { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.marken__band:hover .marken__spur,
.marken__band:focus-within .marken__spur { animation-play-state: paused; }

/* Die Zeichen sind einfarbig und alle in einem quadratischen Feld. Dadurch
   stehen sie optisch gleich gross, obwohl ein Ford-Oval und ein Opel-Blitz
   voellig verschieden gebaut sind. Faellt eine Datei aus, zeigt der Browser
   den Markennamen aus dem alt-Attribut — der Streifen bleibt lesbar. */
.marke { height: clamp(1.8rem, 2.5vw, 2.15rem); width: auto; opacity: .82;
  color: var(--latsche); font-size: 1rem; flex: none; }

/* ---------- Statement ---------- */

.statement { background: var(--nacht); color: var(--nebel); padding-block: clamp(2.5rem, 6vw, 4.25rem); }
.statement__in { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(1.75rem, 4vw, 4rem);
  align-items: end; border-top: 1px solid rgba(255,255,255,.15); padding-top: 2.5rem; }
.statement h2 { color: #fff; font-size: clamp(2.1rem, 4.4vw, 3.4rem); max-width: 13ch; }
.statement__text { display: flex; flex-direction: column; gap: 1.1rem; }

.grat { display: block; width: 100%; height: clamp(40px, 5vw, 80px); margin-top: -1px; }

/* ---------- Kategorien ---------- */

/* Drei randlose Bildtafeln, abwechselnd seitenverkehrt.
 *
 * Vorher stand hier ein klebendes Register aus 1.08rem-Zeilen neben Bildern in
 * einer 1fr-Spalte. Beides war falsch herum: die kleinste Schrift der Seite
 * bekam eine eigene Spalte, und die Fotos — auf einer hellen Seite die einzige
 * Farbe — bekamen den Rest. Jetzt laeuft das Bild bis an die Fensterkante und
 * der Text steht in der halben Seite daneben.
 *
 * Die Textkante bleibt dabei exakt auf der Kante aller uebrigen Abschnitte,
 * siehe --rand. Eine randlose Tafel, deren Text 70 Pixel neben dem Rest der
 * Seite beginnt, sieht nicht grosszuegig aus, sondern schief.
 */
.kategorien { background: var(--schnee); border-block: 1px solid var(--grat);
  padding-block: var(--section) 0; }
.kategorien__kopf { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.kategorien__kopf h2 { margin-bottom: .9rem; }
.kategorien__liste { display: flex; flex-direction: column; }

.kategorie { scroll-margin-top: 2rem; display: grid; align-items: center;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  border-top: 1px solid var(--grat); }
.kategorie:first-child { border-top: 0; }
.kategorie__bild { position: relative; min-height: clamp(19rem, 33vw, 31rem); }
.kategorie__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kategorie__text { display: flex; flex-direction: column; gap: 1.05rem;
  padding-block: clamp(2.25rem, 4.5vw, 3.5rem); }
.kategorie__text > * { max-width: 40rem; }

/* Ungerade: Bild links an der Fensterkante, Text rechts.
   Gerade: gespiegelt — und dann muss der Text auf der Seitenkante sitzen. */
.kategorie:nth-child(odd) .kategorie__text {
  padding-left: clamp(1.15rem, 3vw, 3rem); padding-right: var(--rand); }
.kategorie:nth-child(even) .kategorie__bild { order: 2; }
.kategorie:nth-child(even) .kategorie__text {
  order: 1; padding-left: var(--rand); padding-right: clamp(1.15rem, 3vw, 3rem); }

/* Die Nummer war eine 0.88rem-Monozeile und hat als Ordnung nichts geleistet.
   Als Ziffer in Markengruen ist sie das, was das Gruen auf einer hellen Seite
   sonst nirgends ist: gross. */
.kategorie p { max-width: 56ch; }

.merkmale { list-style: none; margin: .25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .55rem; }
.merkmale li { font-size: .98rem; color: var(--fels); border: 1px solid var(--grat);
  background: var(--schnee); padding: .45rem .85rem; border-radius: 2px; }
.merkmale--gross li { font-size: 1.05rem; padding: .7rem 1.1rem; }

/* ---------- Export ---------- */

.export { position: relative; background: var(--nacht); isolation: isolate;
  padding-block: clamp(4rem, 8vw, 6.5rem); }
.export__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: 0; opacity: .5; }
.export::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(88deg, rgba(15,21,19,.97) 0%, rgba(15,21,19,.88) 48%, rgba(15,21,19,.4) 100%); }
.export__in { position: relative; z-index: 2; max-width: 37rem; display: flex;
  flex-direction: column; gap: 1.5rem; }
.export h2 { color: #fff; }
.export__zitat { font-family: var(--display); font-stretch: 105%;
  font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 500; line-height: 1.35;
  color: #fff; border-left: 3px solid var(--latsche); padding-left: 1.3rem; }
.export p { color: var(--nebel); }
.export .kicker { margin-bottom: -.3rem; }

/* ---------- Sicherheit ---------- */

.sicherheit { background: var(--firn); padding-block: var(--section); }
.sicherheit__kopf { max-width: 46ch; margin-bottom: 2.5rem; }
.sicherheit__kopf h2 { margin-bottom: 1rem; }
.karten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.karte { border-top: 3px solid var(--tann); padding-top: 1.2rem; display: flex;
  flex-direction: column; gap: .6rem; }
.karte h3 { font-size: 1.22rem; }
.karte p { font-size: 1.04rem; }

/* ---------- Was wir nicht ankaufen ---------- */

.ausschluss { display: grid; grid-template-columns: 1fr 1.35fr; align-items: stretch; }
.ausschluss__kopf { background: var(--forst); color: var(--nebel);
  padding: clamp(2.25rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem);
  display: flex; flex-direction: column; justify-content: center; gap: .9rem; }
.ausschluss__kopf h2 { color: #fff; max-width: 12ch; }
.ausschluss__body { background: var(--firn); padding: clamp(2.25rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem); }
.ausschluss__liste { list-style: none; margin: 0; padding: 0; }
.ausschluss__liste li { display: flex; gap: 1rem; align-items: baseline; padding-block: 1rem;
  border-top: 1px solid var(--grat); }
.ausschluss__liste li:first-child { border-top: 0; padding-top: 0; }
.ausschluss__liste b { font-weight: 400; color: var(--moos); flex: none; }
.ausschluss__schluss { margin-top: 1.6rem; padding-top: 1.3rem; border-top: 2px solid var(--tann);
  color: var(--nacht); font-weight: 500; }

/* ---------- Bundeslaender ---------- */

/* Der dritte helle Grund. „In ganz Österreich" war vorher eine Liste mit neun
   Namen — die ueberzeugendste Tatsache der Seite im langweiligsten Block. */
.laender { background: var(--tau); border-block: 1px solid var(--grat);
  padding-block: var(--section); }
.laender__in { display: grid; grid-template-columns: 1.12fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.laender__text h2 { margin-bottom: .9rem; }
.laender__text > p { max-width: 44ch; }

.landkarte__rahmen { margin: 0; }
.landkarte { width: 100%; height: auto; display: block; overflow: visible; }

/* Alle neun Laender im selben Markengruen: die Aussage ist die Flaeche. Die
   Trennlinien sind der Seitengrund, nicht eine Farbe — dadurch stehen die
   Grenzen als Fugen im Block und nicht als Umrandung jedes Einzelteils. */
.landkarte__land { fill: var(--tann); fill-opacity: .18;
  stroke: var(--tau); stroke-width: 2.5; stroke-linejoin: round; }
.landkarte__land--sitz { fill-opacity: .40; }
.landkarte__laender { filter: drop-shadow(0 2px 0 rgba(29,74,56,.10)); }

.landkarte__sitz { fill: var(--tann); stroke: var(--schnee); stroke-width: 3.5; }
/* Der weisse Rand liegt dank paint-order UNTER der Schrift. Ohne ihn steht die
   Beschriftung auf der Grenze zwischen Ober- und Niederoesterreich. */
.landkarte__beschriftung { font-family: var(--display); font-stretch: 105%; font-weight: 600;
  font-size: 26px; fill: var(--nacht); stroke: var(--tau); stroke-width: 6; }
.landkarte__quelle { margin-top: .9rem; font-size: .95rem; color: var(--moos); }

.laender__raster { list-style: none; margin: 1.9rem 0 0; padding: 0; display: grid;
  grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--grat); }
.laender__raster li { border-bottom: 1px solid var(--grat); padding-block: 1.1rem;
  display: flex; gap: 1rem; align-items: baseline; }
.laender__raster i { font-family: var(--mono); font-style: normal; font-size: .88rem;
  color: var(--moos); min-width: 2.1rem; }
.laender__raster b { font-family: var(--display); font-stretch: 105%; font-weight: 500;
  font-size: clamp(1.15rem, 1.6vw, 1.38rem); color: var(--nacht); }

/* ---------- Ablauf ---------- */

.ablauf { background: var(--nacht); color: var(--nebel); padding-block: var(--section); }
.ablauf h2 { color: #fff; max-width: 16ch; }
.ablauf .kicker { margin-bottom: .9rem; }
.schritte { list-style: none; margin: 2.75rem 0 0; padding: 0; display: grid;
  grid-template-columns: repeat(3, 1fr); gap: clamp(1.75rem, 3vw, 2.75rem);
  border-top: 1px solid rgba(255,255,255,.16); }
.schritt { padding-top: 1.4rem; display: flex; flex-direction: column; gap: .7rem; position: relative; }
.schritt::before { content: ""; position: absolute; top: -2px; left: 0; width: 3rem; height: 3px;
  background: var(--latsche); }
.schritt span { font-family: var(--mono); font-size: .86rem; letter-spacing: .1em; color: var(--latsche); }
.schritt h3 { color: #fff; font-size: 1.3rem; }
.ablauf__mehr { margin-top: 2rem; }

/* ---------- Fragen ---------- */

/* KEIN <details>. Die Antworten stehen offen da — fuer dieses Publikum ist ein
   Aufklapper die falsche Geste, und fuer die Suche auch. */
.fragen { background: var(--schnee); border-block: 1px solid var(--grat); padding-block: var(--section); }
.fragen__kopf { margin-bottom: 2.25rem; }
.fragen__liste { display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem clamp(2rem, 4vw, 3.5rem); margin: 0; }
.fragen__liste--seite { padding-block: clamp(2rem, 4vw, 3rem) var(--section); }
.frage { border-top: 1px solid var(--grat); padding-top: 1.15rem; }
.frage dt { font-family: var(--display); font-stretch: 105%; font-weight: 600; font-size: 1.2rem;
  color: var(--nacht); margin-bottom: .45rem; letter-spacing: -0.012em; }
.frage dd { margin: 0; }
.fragen__mehr { margin-top: 2rem; }

/* ---------- Unternehmen ---------- */

.unternehmen { background: var(--firn); padding-block: var(--section); }
.unternehmen__in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4.5vw, 4rem);
  align-items: center; }
.unternehmen img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 2px; }
.unternehmen h2 { margin-bottom: 1rem; }
.unternehmen__mehr { margin-top: 1.5rem; }

.daten { list-style: none; margin: 1.9rem 0 0; padding: 0; display: grid;
  grid-template-columns: repeat(2, 1fr); gap: 1.15rem 1.5rem; }
.daten dt { font-size: .92rem; color: var(--fels); margin-bottom: .1rem; }
.daten dd { margin: 0; color: var(--nacht); font-size: 1.06rem; font-weight: 600; }
.daten--liste { grid-template-columns: 1fr; gap: 0; margin-top: 0; }
.daten--liste > div { display: grid; grid-template-columns: 15rem 1fr; gap: 1rem;
  padding-block: .9rem; border-top: 1px solid var(--grat); }
.daten--liste dt { font-size: 1.02rem; margin: 0; }
.daten--liste dd { font-weight: 500; }

/* ---------- Schlussband ---------- */

.schluss { background: var(--forst); color: var(--nebel); padding-block: var(--section); }
.schluss__in { display: flex; justify-content: space-between; align-items: flex-end;
  gap: 2.25rem; flex-wrap: wrap; }
.schluss h2 { color: #fff; max-width: 14ch; margin-bottom: 1rem; }
.schluss p { max-width: 42ch; }
.schluss__cta { display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start; }

/* ---------- Fuss ---------- */

.fuss { background: var(--nacht); color: #8B978F; padding-block: 2.5rem; font-size: 1rem; }
.fuss .mark { color: #E4EBE7; font-weight: 700; letter-spacing: .04em; font-size: 1.1rem;
  margin-bottom: .7rem; }
.fuss a { color: #A9B6AF; }
.fuss__zeile { margin-bottom: .5rem; }
.fuss__kontakt { font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 1.1rem; margin-bottom: 1.1rem; }
.fuss__kontakt a { color: #E4EBE7; }
.fuss__nav { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: center; }
.fuss__consent { background: none; border: 0; color: #A9B6AF; font: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 4px; padding: .5rem 0; }

/* ---------- feste Anrufleiste ---------- */

/* Die wichtigste einzelne Entscheidung fuer diese Zielgruppe: unterhalb von
   860px steht die Nummer dauerhaft in Daumenhoehe. Siehe den Umbruch unten. */
.rufbalken { display: none; }

/* ==========================================================================
   Innenseiten
   ========================================================================== */

/* Weisser Grund mit Abschlusslinie: damit jede Innenseite dieselbe
   Zweiklang-Eroeffnung hat wie die Startseite — heller Kopf, dann der
   Seitengrund darunter — statt eines durchgehenden Feldes in einem Ton. */
.seitenkopf { background: var(--schnee); border-bottom: 1px solid var(--grat);
  padding-block: clamp(2.75rem, 6vw, 4.5rem); }
.seitenkopf h1 { margin-block: .8rem 1.1rem; }
.seitenkopf__in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center; }
/* Ein Rasterelement ist von Haus aus mindestens so breit wie sein laengstes
   Wort. min-width: 0 hebt das auf, damit ein Wort im Notfall ueber seine
   Spalte laeuft statt die Seite zu verbreitern. Gurt und Hosentraeger neben
   der Silbentrennung oben — beides zusammen ist der Grund, dass diese Stelle
   nicht wiederkommt. */
.seitenkopf__in > *, .kategorie > *, .laender__in > *, .unternehmen__in > *,
.statement__in > *, .ausschluss > * { min-width: 0; }
.seitenkopf__bild { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; }
.seitenkopf__cta { display: flex; gap: 2rem; align-items: center; flex-wrap: wrap; margin-top: 1.8rem; }
.seitenkopf__alternative { margin-top: 1.6rem; display: flex; gap: .7rem; align-items: baseline;
  flex-wrap: wrap; }

.tel--zeile { flex-direction: row; align-items: baseline; gap: .5rem; }
.tel--zeile b { font-size: 1.35rem; }

/* Der Bildlauf.
   ==========================================================================
   Frueher stand hier ein einzelnes Band (.bildband, 21:9). Drei Aufnahmen
   sagen ueber ein Fahrzeug mehr als eine, und drei untereinander waeren auf
   einem Telefon ein halber Meter Scrollweg — also nacheinander in einem
   Rahmen.

   KEIN SKRIPT. Der Lauf steht vollstaendig hier, wie das Markenband auch.
   Eine Zwischenfassung hatte drei Ziffern zum Schalten und einen Zeitgeber in
   main.js; beides ist raus. Was von selbst laeuft, muss niemand bedienen —
   und ein Bildlauf ohne Skript ist einer, der auch auf einer langsamen
   Leitung ankommt.

   VIER FELDER FUER DREI BILDER: das vierte ist die Kopie des ersten. Die Spur
   zieht 0 → -100% → -200% → -300%, und auf -300% steht die Kopie im Rahmen —
   genau dort springt die Schleife auf 0 zurueck. Weil an beiden Enden dasselbe
   Bild steht, ist der Sprung unsichtbar. Dieselbe Mechanik wie beim
   Markenband, nur schrittweise statt gleichmaessig.

   TAKT: 2,6 s Stand, 0,7 s Zug, macht 3,3 s je Aufnahme und 10 s je Runde.
   Der erste Entwurf stand bei 18 s je Runde, damit dieses Publikum Zeit zum
   Ansehen hat; der Kunde wollte es schneller, und 10 s ist seine Zahl. Der Zug
   selbst bleibt knapp unter einer Sekunde — schneller wuerde er zum Zucken,
   und dann sieht man den Wechsel statt das Bild.

   --bildlauf-format ist der Rahmen, nicht das Bild: die Aufnahmen liegen in
   3:2 und werden beschnitten. Neben einer Ueberschrift ist 4:3 richtig (die
   Spalte ist halb so breit wie die Seite), ueber die volle Breite 16:9. */
.bildlauf { --bildlauf-format: 4 / 3; --bildlauf-takt: 10s;
  margin-block: clamp(2rem, 4vw, 3rem); }
.seitenkopf__in .bildlauf { margin-block: 0; }

.bildlauf__rahmen { overflow: hidden; border-radius: 2px; }
.bildlauf__spur { display: flex; margin: 0; padding: 0; list-style: none;
  animation: bildlauf-zug var(--bildlauf-takt) infinite;
  animation-timing-function: cubic-bezier(.65, 0, .35, 1);
  will-change: transform; }
.bildlauf__feld { flex: 0 0 100%; }
.bildlauf__feld img { display: block; width: 100%; height: auto;
  aspect-ratio: var(--bildlauf-format); object-fit: cover; }

@keyframes bildlauf-zug {
  0%, 26.333%      { transform: translateX(0); }
  33.333%, 59.667% { transform: translateX(-100%); }
  66.667%, 93%     { transform: translateX(-200%); }
  100%             { transform: translateX(-300%); }
}

/* Wer hinsieht, soll das Bild anhalten koennen. Das ist die einzige
   Bedienung, die der Lauf noch hat — und dieselbe, die das Markenband hat. */
.bildlauf:hover .bildlauf__spur,
.bildlauf:focus-within .bildlauf__spur { animation-play-state: paused; }

@media (min-width: 721px) {
  .bildlauf--breit { --bildlauf-format: 16 / 9; }
}

/* Die Prosaspalte ist 52rem breit, steht aber LINKS an der Gutter-Kante und
   nicht mittig im Fenster: die ganze Seite ist linksbuendig aufgebaut, und eine
   zentrierte Textspalte unter einer linksbuendigen Ueberschrift sieht aus wie
   ein Fehler — sie ist auch einer. Deshalb bleibt das Element auf Wrap-Breite
   und nur sein Inhalt ist schmal. */
.text { padding-block: clamp(2rem, 4vw, 3rem) var(--section); }
.text > * { max-width: 52rem; }
.text__block + .text__block { margin-top: clamp(2rem, 3.5vw, 2.75rem); }
.text__block h2 { margin-bottom: .8rem; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.text__block p + p { margin-top: 1rem; }

.ablaufliste { list-style: none; margin: 0; padding: 0;
  padding-block: clamp(2rem, 4vw, 3rem);
  display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3rem); }
.ablaufliste__punkt { display: grid; grid-template-columns: 5rem 1fr; gap: clamp(1rem, 2.5vw, 2rem);
  align-items: start; border-top: 1px solid var(--grat); padding-top: 1.5rem; }
.ablaufliste__nr { font-family: var(--display); font-stretch: 105%; font-weight: 700;
  font-size: clamp(2.5rem, 5vw, 3.5rem); line-height: .9; color: var(--grat); }
.ablaufliste h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: .7rem; }
.ablaufliste p { max-width: 62ch; }

.fehler__liste { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex;
  flex-direction: column; gap: .8rem; }
.fehler__tel { margin-block: 2rem clamp(3rem, 6vw, 5rem); display: flex; gap: .7rem;
  align-items: baseline; flex-wrap: wrap; }

/* ---------- Einwilligungsbanner ---------- */

.cookiebar { position: fixed; inset: auto 0 0 0; z-index: 60; background: var(--schnee);
  border-top: 3px solid var(--tann); box-shadow: 0 -20px 50px -30px rgba(6,14,11,.5); }
.cookiebar-inner { max-width: 62rem; margin-inline: auto; padding: clamp(1.25rem, 3vw, 2rem) var(--gutter); }
.cookiebar-titel { font-size: 1.35rem; margin-bottom: .6rem; }
.cookiebar-lead { font-size: 1.02rem; max-width: 70ch; }
.cookiebar-detail { margin-block: 1rem; }
.cookiebar-detail summary { cursor: pointer; font-weight: 500; padding: .6rem 0; }
.cookiebar-liste { list-style: none; margin: 1rem 0; padding: 0; display: flex;
  flex-direction: column; gap: 1rem; }
.cookiebar-zeile { display: flex; gap: 1rem; align-items: flex-start; }
.cookiebar-zeile input { width: 1.5rem; height: 1.5rem; margin-top: .2rem; flex: none;
  accent-color: var(--tann); }
.cookiebar-hinweis { display: block; font-size: 1rem; color: var(--fels); margin-top: .2rem; }
.cookiebar-aktionen { display: flex; gap: 1rem; flex-wrap: wrap; }
.cookiebar-btn { flex: 1 1 14rem; }
.btn-zweitrangig { display: inline-flex; align-items: center; justify-content: center;
  background: var(--firn); color: var(--nacht); border: 1px solid #B9C4BE; border-radius: 2px;
  font-family: var(--body); font-weight: 600; font-size: 1.1rem; padding: 1.15rem 2rem;
  min-height: 3.5rem; cursor: pointer; }
.btn-zweitrangig:hover { border-color: var(--tann); }

/* ==========================================================================
   Umbrueche
   ========================================================================== */

@media (max-width: 1000px) {
  .karten { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 960px) {
  /* Die Bildtafeln stapeln: Bild oben in voller Breite, Text darunter auf der
     Seitenkante. Die Spiegelung faellt weg — gespiegelt gestapelt ist sie kein
     Rhythmus mehr, sondern nur noch eine wandernde Textkante. */
  .kategorie, .kategorie:nth-child(even) { grid-template-columns: 1fr; }
  .kategorie__bild, .kategorie:nth-child(even) .kategorie__bild { order: 0; min-height: 0; }
  .kategorie__bild img { position: static; height: auto; aspect-ratio: 16 / 9; }
  .kategorie__text, .kategorie:nth-child(odd) .kategorie__text,
  .kategorie:nth-child(even) .kategorie__text {
    order: 0; padding-inline: var(--rand); padding-block: clamp(1.75rem, 4vw, 2.5rem); }
  .laender__in { grid-template-columns: 1fr; }
  .laender__karte { max-width: 34rem; }
  .statement__in, .unternehmen__in, .seitenkopf__in { grid-template-columns: 1fr; align-items: start; }
  .ausschluss { grid-template-columns: 1fr; }
  .fragen__liste { grid-template-columns: repeat(2, 1fr); }
  .schritte { grid-template-columns: 1fr; gap: 1.6rem; }
  /* Sobald die Navigation auf eine eigene Zeile rutscht, ist sie auf einem
     Telefon. Dort ist eine 26 Pixel hohe Zeile keine Schaltflaeche, sondern
     eine Wette — die Punkte bekommen deshalb die vollen 44 Pixel, und die
     Zeilen ruecken dafuer enger zusammen. */
  .nav { order: 3; width: 100%; margin-left: 0; gap: .1rem 1.15rem; }
  .nav a { display: inline-flex; align-items: center; min-height: 2.75rem; padding-block: 0; }
  .kopf__tel { margin-left: auto; padding-block: .4rem; }
  .daten--liste > div { grid-template-columns: 1fr; gap: .2rem; }
}

@media (max-width: 860px) {
  /* width: 100% ist hier eine Absicherung, keine Korrektur: ein
     position:fixed-Element mit left:0 und right:0 ist ohnehin so breit wie das
     Fenster. min-width: 0 und das nowrap auf der Nummer sind die eigentliche
     Arbeit — ohne sie kann die Zeile auf einem sehr schmalen Telefon
     auseinanderbrechen, und eine umgebrochene Telefonnummer ist keine mehr. */
  .rufbalken { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    width: 100%; max-width: 100%;
    background: var(--tann); border-top: 1px solid rgba(255,255,255,.2);
    padding-bottom: env(safe-area-inset-bottom, 0px); }
  .rufbalken a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
    min-height: 4rem; width: 100%; min-width: 0; color: #fff; text-decoration: none;
    font-weight: 600; font-size: 1.12rem; padding-inline: 1rem; }
  .rufbalken b { font-family: var(--mono); font-weight: 600; font-size: clamp(.95rem, 3.6vw, 1.25rem);
    font-variant-numeric: tabular-nums; white-space: nowrap; }
  body { padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px)); }
  /* Das Banner darf nicht unter der Anrufleiste liegen. */
  .cookiebar { bottom: calc(4rem + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 760px) {
  .fragen__liste { grid-template-columns: 1fr; }
  .ablaufliste__punkt { grid-template-columns: 1fr; gap: .5rem; }
}

@media (max-width: 560px) {
  .laender__raster, .karten { grid-template-columns: 1fr; }
  .daten { grid-template-columns: 1fr; }
  .schluss__in, .seitenkopf__cta { align-items: flex-start; }
}

/* Die internationale Schreibweise steht nur im Impressum daneben — dort ist
   Eindeutigkeit wichtiger als Vertrautheit. */
.daten__intl { color: var(--moos); font-weight: 400; }

/* ==========================================================================
   Korrekturen aus der Sichtpruefung (tools/shot.mjs)
   ========================================================================== */

/* Der schmale Seitenkopf war mittig gesetzt, das Formular darunter linksbuendig
   — die beiden linken Kanten lagen 200px auseinander und das sah aus wie ein
   Versehen. Der Wrap bleibt jetzt breit, nur sein INHALT ist schmal, und beide
   Kanten stehen uebereinander. */
.seitenkopf--schmal .wrap > * { max-width: 52rem; }

/* Der Kopf nahm auf dem Telefon ein Viertel des ersten Bildschirms ein: fuenf
   Navigationspunkte auf zwei Zeilen plus Telefonblock. Ein Burger-Menue waere
   hier die falsche Antwort — diese Zielgruppe sucht nichts hinter einem Symbol.
   Stattdessen wird die Zeile enger gesetzt, ohne unter die Tippgroesse zu
   fallen. */
@media (max-width: 620px) {
  .kopf__in { gap: .9rem; padding-block: .8rem; }
  .kopf__marke .logo { height: 42px; }
  .nav { gap: .1rem 1.1rem; font-size: .98rem; }
  .kopf__tel b { font-size: 1.15rem; }
}

/* Contact guidance remains readable without scripts or a new enquiry channel. */
.hero__hilfe { max-width: 56ch; color: var(--nebel); margin-top: 1.5rem; font-size: 1.05rem; line-height: 1.6; }
.whatsapp__kanal { display: block; font-size: 1rem; font-weight: 400; margin-top: .15rem; }
.rufbalken__wa { border-left: 1px solid var(--latsche); }
.rufbalken a:hover { background: var(--tann-hell); }