/* Autohaus am Ring — Gestaltung der Verkaufsseite, zuerst fürs Handy gebaut.
   Hell und ruhig, das Blau aus dem Logo als Grundton, ein warmer Sandton aus
   dem Abendlicht des Startbilds als Akzent. Keine Schriften von fremden Servern:
   Avenir Next ist auf Apple-Geräten an Bord, sonst greift die Systemschrift. */

:root {
  --blau: #003E6C;
  --blau-tief: #002A4A;
  --nacht: #0D1A26;
  --sand: #F0DEC2;
  --papier: #F6F4F0;
  --weiss: #FFFFFF;
  --tinte: #14202B;
  --grau: #5F6870;
  --linie: rgba(20, 32, 43, .1);
  --rund: 20px;
  --kopf: 64px;
  --schrift: "Avenir Next", "Avenir", "Helvetica Neue", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
html { background: var(--nacht); }
body { font-family: var(--schrift); color: var(--tinte); background: var(--papier); line-height: 1.5;
       -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
.bahn { max-width: 1200px; margin: 0 auto; padding: 0 18px; }
.bahn.schmal > * { max-width: 820px; }
.sprung { position: absolute; left: -9999px; }
.sprung:focus { left: 12px; top: 12px; z-index: 300; background: #fff; padding: 10px 14px; border-radius: 8px; }
.verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid #4DA3E6; outline-offset: 2px; }

h1, h2, h3 { letter-spacing: -.02em; line-height: 1.08; }
h1 { font-size: clamp(2.3rem, 8.5vw, 4.4rem); font-weight: 700; }
h2 { font-size: clamp(1.8rem, 5.6vw, 2.8rem); font-weight: 700; margin-bottom: .4em; }
h3 { font-size: 1.15rem; }
p + p { margin-top: .7em; }
.ober { font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--sand); margin-bottom: .9em; }
.ober.dunkel { color: var(--blau); }
.fuehrung { font-size: 1.08rem; color: #3A4652; max-width: 40em; }
.klein { font-size: .88rem; color: var(--grau); }

/* ── Knöpfe ── */
.knoepfe { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 24px; border-radius: 999px;
         font-weight: 600; text-decoration: none; font-size: 1rem; border: 1px solid transparent; transition: transform .2s, background .2s; }
.knopf:active { transform: scale(.97); }
.knopf.hell { background: #fff; color: var(--nacht); }
.knopf.dunkel { background: var(--blau); color: #fff; }
.knopf.dunkel:hover { background: var(--blau-tief); }
.knopf.rand { border-color: var(--linie); background: #fff; color: var(--tinte); }
.knopf.glas { background: rgba(13,26,38,.38); color: #fff; border-color: rgba(255,255,255,.55);
              backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.knopf.gross { font-size: 1.12rem; padding: 16px 28px; }
.weiter { font-weight: 600; text-decoration: none; color: var(--blau); white-space: nowrap; }
.weiter::after { content: " →"; }

/* ── Kopf ── */
.kopf { position: fixed; z-index: 100; inset: 0 0 auto 0; display: flex; align-items: center; gap: 14px;
        height: var(--kopf); padding: 0 16px; padding-top: env(safe-area-inset-top); color: #fff;
        transition: background .3s, box-shadow .3s, color .3s; }
.kopf.fest { background: rgba(255,255,255,.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
             box-shadow: 0 1px 0 var(--linie); color: var(--tinte); }
.marken { display: flex; align-items: center; gap: 12px; min-width: 0; }
.marke { position: relative; display: block; flex: none; }
.marken { flex: none; }
a[href^="tel:"], .nowrap { white-space: nowrap; }
.marke img, .hersteller img { width: auto; transition: opacity .3s; }
.marke img { height: 34px; }
.zwei { position: relative; display: block; }
.zwei .dunkel { position: absolute; inset: 0; opacity: 0; }
.kopf.fest .zwei .hell { opacity: 0; }
.kopf.fest .zwei .dunkel { opacity: 1; }
.hersteller { display: none; flex: none; align-items: center; gap: 14px; padding-left: 14px; border-left: 1px solid currentColor;
              border-color: rgba(255,255,255,.4); }
.kopf.fest .hersteller { border-color: var(--linie); }
.hersteller img { height: 15px; flex: none; max-width: none; }
.hersteller .poessl img { height: 19px; }
.menue { display: none; }
.ruf { margin-left: auto; display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; font-weight: 700;
       background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.4); border-radius: 999px; padding: 9px 12px; flex: none; }
.ruf svg { width: 18px; height: 18px; fill: currentColor; }
.ruf span { display: none; }
.kopf.fest .ruf { color: #fff; background: var(--blau); border-color: var(--blau); }
.menuknopf { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 999px;
             background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.4); color: inherit; }
.kopf.fest .menuknopf { background: #fff; border-color: var(--linie); }
.menuknopf svg { width: 20px; height: 20px; fill: currentColor; }
.klappmenue { position: fixed; z-index: 130; inset: var(--kopf) 0 auto 0; background: #fff; color: var(--tinte);
              max-height: calc(100dvh - var(--kopf)); overflow-y: auto; overscroll-behavior: contain;
              box-shadow: 0 18px 40px rgba(13,26,38,.18); padding: 8px 18px 18px; display: none; }
.klappmenue.auf { display: block; }
.klappmenue a { display: block; padding: 14px 4px; border-bottom: 1px solid var(--linie); text-decoration: none; font-weight: 600; font-size: 1.05rem; }
.klappmenue a[aria-current=page] { color: var(--blau); }
.klappmenue .hersteller-zeile { display: flex; gap: 18px; align-items: center; padding: 16px 4px 4px; }
.klappmenue .hersteller-zeile img { height: 15px; width: auto; }
.klappmenue .hersteller-zeile .poessl img { height: 19px; }

/* ── Startbild ── */
.buehne { position: relative; height: 100svh; min-height: 560px; overflow: hidden; background: var(--nacht); color: #fff; }
.buehnenbild, .buehnenbild img { position: absolute; inset: 0; width: 100%; height: 100%; }
.buehnenbild img { object-fit: cover; object-position: 50% 62%; }
.buehne::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,22,34,.7) 0%, rgba(10,22,34,.38) 34%, rgba(10,22,34,0) 52%),
              linear-gradient(0deg, rgba(10,22,34,.35) 0%, rgba(10,22,34,0) 18%); }
.buehnentext { position: absolute; inset: 0; z-index: 2; text-align: center; padding: calc(var(--kopf) + 26px) 20px 0; }
.buehnentext .aktionen { position: absolute; left: 0; right: 0; bottom: 4%; padding: 0 14px; }
.buehnentext .aktionen .knoepfe { margin: 0; gap: 8px; }
.buehnentext .aktionen .knopf { font-size: .84rem; padding: 11px 14px; }
.buehnentext h1 { text-shadow: 0 2px 24px rgba(0,0,0,.25); }
.buehnentext .knoepfe { justify-content: center; }
.buehnentext h1 { font-size: clamp(2.3rem, 9vw, 4.4rem); }
.unterzeile { margin-top: 12px; font-size: clamp(1.15rem, 4.6vw, 1.6rem); font-weight: 600; letter-spacing: .03em;
              color: #fff; text-shadow: 0 1px 14px rgba(0,0,0,.5); }
.knopf.mietknopf { background: var(--sand); color: var(--nacht); }
.knopf.mietknopf:hover { background: #F6E8D2; }
.mietvermerk { margin-top: 8px; font-size: .78rem; color: rgba(255,255,255,.85); text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.symbolbild { position: absolute; z-index: 2; right: 12px; bottom: 8px; font-size: .68rem; color: rgba(255,255,255,.7); }
.unter { text-shadow: 0 1px 14px rgba(0,0,0,.5); font-size: 1.02rem; color: rgba(255,255,255,.92); margin-top: 14px; max-width: 34em; margin-left: auto; margin-right: auto; }
.runter { display: none !important; position: absolute; z-index: 2; left: 50%; bottom: 22px; transform: translateX(-50%); flex-direction: column;
          align-items: center; gap: 2px; color: #fff; text-decoration: none; font-size: .85rem; font-weight: 600; }
.runter svg { width: 26px; height: 26px; fill: currentColor; animation: wippen 2s infinite; }
@keyframes wippen { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* ── Kopf der Unterseiten ── */
.bahn.seitenkopf { padding-top: calc(var(--kopf) + 32px); padding-bottom: 22px; }
.seitenkopf h1 { font-size: clamp(2.1rem, 7vw, 3.4rem); margin-bottom: .25em; }
.brotkrume { font-size: .86rem; color: var(--grau); margin-bottom: 14px; }
.brotkrume a { color: var(--grau); }

/* ── Abschnitte ── */
.abschnitt { padding: 44px 0; }
.abschnitt.weiss { background: var(--weiss); }
.abschnittkopf { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.abschnittkopf h2 { margin: 0; }
.abschnittkopf .zahl { font-size: .9rem; font-weight: 600; color: var(--grau); }
.gruppe + .gruppe { margin-top: 40px; }
.gruppe h2 { font-size: clamp(1.5rem, 4.6vw, 2.1rem); }
.leer { background: var(--weiss); border-radius: var(--rund); padding: 22px 20px; color: #3A4652; max-width: 46em; }
.leer .knoepfe { margin-top: 14px; }

/* ── Filter ── */
.filterleiste { position: sticky; top: var(--kopf); z-index: 50; background: rgba(246,244,240,.94);
                backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 10px 0; margin-bottom: 8px; }
.filterbahn { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.filterbahn::-webkit-scrollbar { display: none; }
.filterbahn button { flex: none; border: 1px solid var(--linie); background: #fff; border-radius: 999px; padding: 10px 16px;
                     font-weight: 600; font-size: .95rem; color: var(--tinte); white-space: nowrap; }
.filterbahn button[aria-pressed=true] { background: var(--blau); border-color: var(--blau); color: #fff; }

/* ── Fahrzeugkarten ── */
.raster { display: grid; grid-template-columns: 1fr; gap: 16px; }
.karte { position: relative; display: flex; flex-direction: column; background: var(--weiss); border-radius: var(--rund);
         overflow: hidden; text-decoration: none; color: inherit; box-shadow: 0 1px 2px rgba(20,32,43,.06), 0 8px 24px rgba(20,32,43,.06);
         transition: transform .2s, box-shadow .2s; }
.karte:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(20,32,43,.06), 0 14px 32px rgba(20,32,43,.1); }
.karte[hidden] { display: none; }
.karte .bild { position: relative; aspect-ratio: 16 / 10; background: #E9EBEC; overflow: hidden; }
.karte .bild img { width: 100%; height: 100%; object-fit: cover; }
.karte .kein-bild { display: grid; place-items: center; height: 100%; color: var(--grau); font-size: .9rem; }
.chips { position: absolute; left: 12px; top: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px;
        background: rgba(255,255,255,.92); color: var(--tinte); }
.chip.neu { background: var(--blau); color: #fff; }
.chip.zulauf { background: var(--sand); color: #5B4422; }
.chip.platzhalter { background: #FFE7A6; color: #6B4B00; }
.karte .text { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.karte h3 { font-size: 1.2rem; }
.karte .daten { font-size: .9rem; color: var(--grau); }
.karte .unten { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--linie); }
.karte .unten { flex-wrap: wrap; }
.karte .preis { font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em; }
.karte .wann { font-size: .82rem; color: var(--grau); text-align: right; }
.hinweis { font-size: .85rem; color: var(--grau); margin-top: 22px; }

/* ── Startseite: Sprungleiste zu den Fahrzeugen ── */
.startseite { scroll-padding-top: calc(var(--kopf) + 70px); }
html:has(.startseite) { scroll-padding-top: calc(var(--kopf) + 70px); }
.sprungleiste { position: sticky; top: var(--kopf); z-index: 60; background: rgba(246,244,240,.94);
                backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--linie); }
.sprungbahn { display: flex; gap: 8px; padding-top: 10px; padding-bottom: 10px; overflow-x: auto; scrollbar-width: none; }
.sprungbahn::-webkit-scrollbar { display: none; }
.sprungbahn a { flex: none; text-decoration: none; border: 1px solid var(--linie); background: #fff; border-radius: 999px;
                padding: 10px 16px; font-weight: 600; font-size: .95rem; color: var(--tinte); white-space: nowrap; }
.sprungbahn a b { display: inline-block; min-width: 22px; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
                  background: rgba(20,32,43,.07); font-size: .8rem; text-align: center; }
.sprungbahn a.an { background: var(--blau); border-color: var(--blau); color: #fff; }
.sprungbahn a.an b { background: rgba(255,255,255,.2); }
.sprungbahn a.leise { margin-left: auto; border-color: transparent; background: none; color: var(--blau); }
.fahrzeugabschnitt { padding-top: 34px; }
.fahrzeugabschnitt + .fahrzeugabschnitt { padding-top: 10px; }
.fahrzeugabschnitt .gruppe { margin-top: 6px; }
.fahrzeugabschnitt .gruppe > .abschnittkopf h3 { font-size: 1.25rem; color: var(--grau); font-weight: 600; letter-spacing: 0; }

/* ── Preis auf den Karten: drei Darstellungen, Auswahl in website.json → preis_stil ── */
.karte .preisschild { display: none; position: absolute; left: 12px; bottom: 12px; background: #fff; color: var(--tinte);
                      font-weight: 800; font-size: 1.35rem; letter-spacing: -.01em; padding: 6px 14px 5px; border-radius: 12px;
                      box-shadow: 0 6px 18px rgba(13,26,38,.28); font-variant-numeric: tabular-nums; }
/* a: Preisschild auf dem Foto */
.preis-a .karte .preisschild { display: block; }
.preis-a .karte .unten .preis { display: none; }
.preis-a .karte .unten { justify-content: flex-start; }
.preis-a .karte .wann { text-align: left; }
.preis-a .karte .unten:not(:has(.wann:not(:empty))) { display: none; }
/* b: blaue Preisleiste unten */
.preis-b .karte .unten { background: var(--blau); color: #fff; margin: auto -18px -18px; padding: 14px 18px; border-top: 0; }
.preis-b .karte .preis { font-size: 1.6rem; }
.preis-b .karte .wann { color: rgba(255,255,255,.78); }
/* c: großer Preis über dem Titel */
.preis-c .karte .unten { order: -1; margin: 0 0 2px; padding: 0; border-top: 0; }
.preis-c .karte .preis { font-size: 1.85rem; color: var(--blau); }
/* Auf der Fahrzeugseite den Preis immer deutlich in Blau */
.fahrzeugdaten .preis { color: var(--blau); font-size: 2.3rem; }

/* ── Service ── */
.kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
.kachel h3 { overflow-wrap: anywhere; hyphens: auto; }
.leistungen .kachel { background: var(--weiss); box-shadow: 0 1px 2px rgba(20,32,43,.06), 0 8px 24px rgba(20,32,43,.06); }
.leistungen .kachel p { font-size: .95rem; }
.kachel { background: var(--papier); border-radius: 16px; padding: 18px 16px; text-decoration: none; color: inherit; display: block; }
a.kachel:hover { background: #EFEBE4; }
.kachel svg { width: 28px; height: 28px; fill: var(--blau); margin-bottom: 10px; }
.kachel h3 { margin-bottom: 4px; }
.kachel p { font-size: .9rem; color: var(--grau); }

/* ── Kontaktband ── */
.kontakt { background: linear-gradient(160deg, var(--blau) 0%, var(--nacht) 100%); color: #fff; padding: 56px 0; }
.kontaktbahn { display: grid; gap: 26px; }
.kontakt .unter { margin: 10px 0 0; text-align: left; }
.kontaktknoepfe { display: flex; flex-wrap: wrap; gap: 10px; align-content: start; }
.mieten { width: 100%; font-size: .92rem; color: rgba(255,255,255,.7); margin-top: 6px; }
.mieten a { color: #fff; }

/* ── Fahrzeugseite ── */
.fahrzeugkopf { display: grid; gap: 22px; padding-bottom: 10px; }
.galerie { display: grid; gap: 10px; }
.grossbild { position: relative; padding: 0; border: 0; border-radius: var(--rund); overflow: hidden; background: #E9EBEC;
             cursor: zoom-in; display: block; width: 100%; }
.grossbild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.lupe { position: absolute; left: 12px; bottom: 12px; background: rgba(13,26,38,.72); color: #fff; font-size: .78rem;
        padding: 6px 12px; border-radius: 999px; }
.vorschauleiste { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.vorschaubild { flex: 0 0 96px; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: #E9EBEC; }
.vorschaubild img { width: 96px; height: 64px; object-fit: cover; }
.vorschaubild.jetzt { border-color: var(--blau); }
.fahrzeugdaten { background: var(--weiss); border-radius: var(--rund); padding: 22px 20px;
                 box-shadow: 0 1px 2px rgba(20,32,43,.06), 0 8px 24px rgba(20,32,43,.06); }
.fahrzeugdaten .chiprreihe { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.fahrzeugdaten .chip { background: var(--papier); }
.fahrzeugdaten .chip.neu { background: var(--blau); }
.fahrzeugdaten .chip.zulauf { background: var(--sand); }
.fahrzeugdaten h1 { font-size: clamp(1.7rem, 5.5vw, 2.3rem); }
.fahrzeugdaten .preis { font-size: 2rem; font-weight: 700; letter-spacing: -.02em; margin: 12px 0 2px; }
.datentabelle { width: 100%; border-collapse: collapse; margin: 16px 0 4px; font-size: .94rem; }
.datentabelle th { text-align: left; font-weight: 400; color: var(--grau); padding: 8px 12px 8px 0; vertical-align: top; }
.datentabelle td { text-align: right; padding: 8px 0; font-weight: 600; }
.datentabelle tr + tr th, .datentabelle tr + tr td { border-top: 1px solid var(--linie); }
.fahrzeugdaten .knoepfe { margin-top: 18px; }
.fahrzeugdaten .knoepfe .knopf { flex: 1 1 auto; }
.nebenlink { display: inline-block; margin-top: 12px; font-size: .88rem; color: var(--grau); }
.inhaltsblock { background: var(--weiss); border-radius: var(--rund); padding: 22px 20px; margin-top: 16px; }
.inhaltsblock h2 { font-size: clamp(1.35rem, 4vw, 1.7rem); }
.punkte { list-style: none; display: grid; gap: .45em; }
.punkte li { padding-left: 20px; position: relative; }
.punkte li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--blau); }
.zweispaltig { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); column-gap: 32px; }
.grundriss { width: 100%; max-width: 680px; border-radius: 12px; background: #fff; }
.pakete { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.paket h3 { font-size: 1.02rem; margin-bottom: 6px; }
.hinweisblock { border-left: 4px solid #C47A00; }
.beschreibung p, .beschreibung .text { color: #3A4652; max-width: 75ch; }
.beschreibung .text b { color: var(--tinte); }
.beschreibung .absatz { display: block; height: .6em; }
.beschreibung hr { border: 0; border-top: 1px solid var(--linie); margin: 12px 0; }
.rechtstext { font-size: .8rem; color: var(--grau); margin-top: 18px; line-height: 1.5; }

/* ── Textseiten ── */
.textseite { background: var(--weiss); border-radius: var(--rund); padding: 24px 20px 28px; }
.textseite h2 { font-size: clamp(1.3rem, 4vw, 1.65rem); margin: 1.4em 0 .4em; }
.textseite h2:first-child { margin-top: 0; }
.textseite ul.schlicht { list-style: none; }
.textseite ul.schlicht li { padding: 8px 0; border-bottom: 1px solid var(--linie); }
.anfahrtskarte { display: block; margin-top: 18px; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--linie); }
.anfahrtskarte picture { display: block; }
.anfahrtskarte img { display: block; width: 100%; height: auto; transition: transform .3s ease; }
.anfahrtskarte:hover img { transform: scale(1.015); }
.kartenquelle { font-size: .78rem; color: rgba(20, 32, 43, .6); margin-top: 6px; }
.kartenquelle a { color: inherit; }

/* ── Anfrageformular ── */
.formular form { display: grid; gap: 14px; margin-top: 14px; max-width: 560px; }
.formular label { display: grid; gap: 6px; font-weight: 600; font-size: .95rem; }
.formular input, .formular textarea { font: inherit; font-weight: 400; padding: 12px 14px; border: 1px solid var(--linie);
                                      border-radius: 12px; background: var(--papier); width: 100%; color: var(--tinte); }
.formular button { justify-self: start; border: 0; }

/* ── Ankauf- und Werkstattformular ── */
.bauform { display: grid; gap: 22px; margin-top: 8px; }
.formgruppe { border: 0; padding: 0; margin: 0; min-width: 0; }
.formgruppe > legend { font-size: 1.15rem; font-weight: 700; margin-bottom: 12px; padding: 0; }
.formraster { display: grid; gap: 14px; }
.formfeld { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; font-weight: 600; font-size: .95rem; }
.formfeld > legend { font-weight: 600; font-size: .95rem; margin-bottom: 6px; padding: 0; }
.formfeld input, .formfeld textarea { font: inherit; font-weight: 400; padding: 12px 14px; border: 1px solid var(--linie);
                                      border-radius: 12px; background: var(--papier); width: 100%; color: var(--tinte); }
.formfeld input:focus, .formfeld textarea:focus { outline: 3px solid #4DA3E6; outline-offset: 1px; background: #fff; }
.formfeld.fehlt input, .formfeld.fehlt textarea { border-color: #C0392B; background: #FDF1EF; }
.formfeld.fehlt > legend, .formfeld.fehlt > span { color: #A93226; }
.pflicht { color: var(--blau); }
.wahlreihe { display: flex; flex-wrap: wrap; gap: 8px; }
.wahlknopf { position: relative; cursor: pointer; }
.wahlknopf input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wahlknopf span { display: inline-block; padding: 10px 15px; border: 1px solid var(--linie); border-radius: 999px;
                  background: var(--papier); font-weight: 600; font-size: .92rem; }
.wahlknopf input:checked + span { background: var(--blau); border-color: var(--blau); color: #fff; }
.wahlknopf input:focus-visible + span { outline: 3px solid #4DA3E6; outline-offset: 2px; }
.formfeld.fehlt .wahlknopf span { border-color: #C0392B; }
.formfehler { background: #FDF1EF; color: #A93226; border-radius: 12px; padding: 12px 14px; font-weight: 600; }
.formende { display: grid; gap: 10px; }
.formende .knopf { justify-self: start; border: 0; }
.formende .knopf[disabled] { opacity: .45; cursor: not-allowed; }
.formdank { background: #EEF6EE; color: #1E5631; border-radius: 12px; padding: 12px 14px; }
@media (min-width: 700px) {
  .formraster { grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .formraster > .formfeld { grid-column: 1 / -1; }
  .formraster > .formfeld.halb { grid-column: auto; }
}

/* ── Finanzierung ── */
.platzhalter { margin-top: 14px; display: inline-block; font-size: .82rem; font-weight: 600; padding: 6px 12px; border-radius: 999px;
               background: #FFE7A6; color: #6B4B00; }
.rechner { display: grid; gap: 16px; margin-top: 20px; align-items: start; }
.eingaben { background: var(--weiss); border-radius: var(--rund); padding: 20px 18px; display: grid; gap: 20px; align-content: start;
            box-shadow: 0 1px 2px rgba(20,32,43,.06), 0 8px 24px rgba(20,32,43,.06); }
.feld { display: grid; gap: 8px; border: 0; min-width: 0; }
.feld > span:not(.betrag), .feld legend { font-weight: 600; display: flex; justify-content: space-between; gap: 10px; padding: 0; }
.feld output { font-weight: 700; color: var(--blau); }
.feld small { color: var(--grau); font-size: .82rem; line-height: 1.4; }
.feld select, .betrag { width: 100%; font: inherit; font-size: 1.05rem; padding: 12px 14px; border: 1px solid var(--linie);
                        border-radius: 12px; background: var(--papier); color: var(--tinte); }
.betrag { display: flex; align-items: center; gap: 8px; }
.betrag input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--tinte); outline: none; }
.betrag:focus-within { outline: 3px solid #4DA3E6; outline-offset: 2px; }
.feld input[type=range] { width: 100%; accent-color: var(--blau); height: 28px; }
.laufzeiten { display: flex; flex-wrap: wrap; gap: 6px; }
.laufzeiten button { flex: 1 0 auto; min-width: 54px; border: 1px solid var(--linie); background: var(--papier); border-radius: 999px;
                     padding: 9px 10px; font-weight: 600; color: var(--tinte); }
.laufzeiten button[aria-pressed=true] { background: var(--blau); border-color: var(--blau); color: #fff; }
.ergebnis { background: linear-gradient(160deg, var(--blau) 0%, var(--nacht) 100%); color: #fff; border-radius: var(--rund);
            padding: 22px 20px; display: grid; gap: 10px; align-content: start; }
.ergebnis .vorab { font-size: .85rem; color: rgba(255,255,255,.75); }
.ergebnis .rate { font-size: clamp(2.6rem, 11vw, 3.4rem); font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.ergebnis .rate small { font-size: .45em; font-weight: 600; }
.ergebnis.leer-ergebnis dl, .ergebnis.leer-ergebnis .knopf { opacity: .35; }
.ergebnis dl { display: grid; gap: 6px; margin: 6px 0 8px; font-size: .9rem; }
.ergebnis dl div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.14); }
.ergebnis dt { color: rgba(255,255,255,.72); }
.ergebnis dd { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.ergebnis .knopf { text-align: center; }
.nur-beispiel { font-size: .88rem; color: rgba(255,255,255,.78); line-height: 1.5; }
.rechtlich { margin-top: 14px; font-size: .92rem; color: var(--tinte); line-height: 1.55; max-width: 62em;
             background: var(--weiss); border-radius: 14px; padding: 14px 16px; }
.ergebnis dl .betont dt, .ergebnis dl .betont dd { color: #fff; font-weight: 700; }
.ergebnis dl .summe { border-bottom-color: rgba(255,255,255,.4); }
.ergebnis dl .summe dt, .ergebnis dl .summe dd { color: #fff; }
/* Pflichthinweis (UWG Anhang Nr. 23e): ruhig gesetzt, aber gut lesbar — nicht kleiner oder blasser machen */
.warnung { font-weight: 600; color: #fff; }
/* Beim Fahrzeug ist die Rate nicht größer als der Kaufpreis (sonst irreführend) */
.beim-fahrzeug .ergebnis .rate { font-size: 2rem; }

/* ── Fuß ── */
.fuss { background: var(--nacht); color: rgba(255,255,255,.72); padding: 40px 0 calc(28px + 76px); font-size: .9rem; }
.fussbahn { display: grid; gap: 26px; }
.fuss h3 { color: var(--sand); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: .8em; }
.fuss ul { list-style: none; display: grid; gap: 6px; }
.fuss a { color: rgba(255,255,255,.86); text-decoration: none; }
.fuss a:hover { text-decoration: underline; }
.fuss .logo-fuss { height: 32px; width: auto; margin-bottom: 12px; }
.fuss .hersteller-fuss { display: flex; gap: 16px; align-items: center; margin-top: 14px; }
.fuss .hersteller-fuss img { height: 14px; width: auto; opacity: .85; }
.fuss .hersteller-fuss .poessl img { height: 18px; }
.fusszeile { border-top: 1px solid rgba(255,255,255,.12); margin-top: 28px; padding-top: 16px; font-size: .8rem; color: rgba(255,255,255,.5); }

/* ── Schnellkontakt am Handy ── */
.aktionsleiste { position: fixed; z-index: 120; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
                 display: grid; padding: 6px; border-radius: 999px; background: #fff; box-shadow: 0 8px 30px rgba(13,26,38,.22);
                 transition: opacity .25s, visibility .25s; }
.aktionsleiste.weg { opacity: 0; visibility: hidden; }
.aktionsleiste a { text-align: center; padding: 13px 10px; border-radius: 999px; font-weight: 700; text-decoration: none;
                   background: var(--blau); color: #fff; }

/* ── Lupe ── */
.lupenfenster { position: fixed; inset: 0; background: rgba(13,26,38,.95); z-index: 200; display: none;
                align-items: center; justify-content: center; padding: 24px; }
.lupenfenster.offen { display: flex; }
.lupenfenster img { max-width: min(1400px, 94vw); max-height: 86vh; object-fit: contain; border-radius: 10px; }
.lupenfenster button { position: absolute; background: rgba(255,255,255,.14); border: 0; color: #fff; font-size: 1.7rem;
                       line-height: 1; padding: 12px 16px; border-radius: 999px; }
.lupe-zu { top: 18px; right: 18px; }
.lupe-vor { right: 14px; top: 50%; transform: translateY(-50%); }
.lupe-zurueck { left: 14px; top: 50%; transform: translateY(-50%); }

@media (max-width: 520px) { .leistungen { grid-template-columns: 1fr; } }

/* ── Größere Bildschirme ── */
@media (min-width: 560px) {
  .hersteller { display: flex; }
}
@media (min-width: 700px) {
  .bahn { padding: 0 28px; }
  .raster { grid-template-columns: 1fr 1fr; gap: 20px; }
  .kacheln { grid-template-columns: repeat(3, 1fr); }
  .kontaktbahn { grid-template-columns: 1.2fr 1fr; align-items: center; }
  .ruf span { display: inline; }
  .fussbahn { grid-template-columns: 1.4fr repeat(auto-fit, minmax(160px, 1fr)); }
  .textseite { padding: 34px 36px 38px; }
  .inhaltsblock { padding: 28px 30px; }
}
@media (min-width: 860px) {
  .rechner { grid-template-columns: 1.15fr 1fr; gap: 20px; }
  .eingaben { padding: 26px; }
  .ergebnis { padding: 28px; position: sticky; top: 96px; }
  .fahrzeugkopf { grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); align-items: start; gap: 28px; }
  .fahrzeugdaten { position: sticky; top: 96px; }
}
@media (min-width: 1100px) {
  :root { --kopf: 76px; }
  .fuss { padding-bottom: 28px; }
  .aktionsleiste, .menuknopf, .klappmenue { display: none !important; }
  .kopf { padding: 0 36px; gap: 18px; }
  .menue { display: flex; gap: 18px; margin-left: auto; }
  .menue a { color: inherit; text-decoration: none; font-weight: 500; white-space: nowrap; }
  .menue a[aria-current=page] { box-shadow: 0 2px 0 currentColor; }
  .menue a.leise { opacity: .72; }
  .ruf { margin-left: 8px; }
  .raster { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .hersteller img { height: 17px; }
  .hersteller .poessl img { height: 22px; }
}
@media (min-width: 1100px) and (max-width: 1379px) {
  .menue a.leise { display: none; }          /* „Mieten“ steht im Fuß und im Kontaktband */
  .ruf span { display: none; }
}

/* Startbild quer (Rechner, Tablet quer, Handy quer): Text oben im Himmel, Knöpfe unten auf dem Kies,
   die Fahrzeuge in der Mitte bleiben frei */
@media (min-aspect-ratio: 4/5) {
  .buehne::after { background: linear-gradient(180deg, rgba(10,22,34,.62) 0%, rgba(10,22,34,.32) 26%, rgba(10,22,34,0) 44%),
                                linear-gradient(0deg, rgba(10,22,34,.35) 0%, rgba(10,22,34,0) 16%); }
  .buehnentext { padding: calc(var(--kopf) + 1.2vh) 20px 0; }
  .buehnentext .ober { display: none; }      /* steht schon im Logo */
  .buehnentext h1 { font-size: clamp(2.4rem, 3.7vw, 3.9rem); }
  .buehnentext h1 br { display: none; }
  .buehnentext .unter { font-size: clamp(1rem, 1.15vw, 1.15rem); max-width: 50em; margin-top: 10px; }
  .buehnentext .aktionen { bottom: 4.5%; }
  .buehnentext .aktionen .knopf { font-size: 1rem; padding: 14px 24px; }
  .buehnentext .unterzeile { font-size: clamp(1.2rem, 1.7vw, 1.7rem); margin-top: 6px; }
  .runter { display: none; }
}
/* Handy quer: wenig Höhe — nur die Überschrift, kleiner */
@media (min-aspect-ratio: 4/5) and (max-height: 500px) {
  .buehne { min-height: 0; }
  .buehnentext .unter { display: none; }
  .buehnentext h1 { font-size: 1.8rem; }
  .buehnentext .unterzeile { font-size: 1.05rem; }
  .buehnentext .aktionen .knopf { padding: 9px 16px; font-size: .92rem; }
  .mietvermerk { display: none; }
}

/* ── Startbild: je Bildschirmform ein eigener Zuschnitt, die Fahrzeuge werden nie seitlich abgeschnitten ── */
/* Laptop (zwischen 4:5 und 16:9): Bild 4:3 in voller Breite, Dach des T 58 bei 31 % der Höhe */
@media (min-aspect-ratio: 4/5) and (max-aspect-ratio: 16/9) {
  .buehnenbild img { object-position: 50% min(0px, max(calc(100svh - 75vw), calc(34svh - 24vw))); }
}
@media (min-aspect-ratio: 4/5) and (max-aspect-ratio: 4/3) {
  .buehne { height: min(100svh, 75vw); min-height: 0; }
  .buehnenbild img { object-position: 50% 0; }
}
/* Breitbild: Bild 21:9, füllt die Höhe, links und rechts wird nur Landschaft gekappt */
@media (min-aspect-ratio: 16/9) {
  .buehnenbild img { object-position: 50% 50%; }
}
/* Handy und Tablet hochkant: Bühne nie höher als das Bild, sonst würde es seitlich beschnitten */
@media (max-aspect-ratio: 4/5) {
  .buehne { height: min(100svh, calc(100vw * 16 / 9)); min-height: 0; }
  .buehnenbild img { object-position: 50% 40%; }
}

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