/* =====================================================================
   DEIN RAD – Design (Version 5: hell mit Tiefe)
   ---------------------------------------------------------------------
   Heller Grund wie gehabt, aber die Räder sind freigestellt und schweben
   mit echtem Schatten. Karten heben sich beim Draufgehen an.
   (Dunkle Fassung am 28.07. gebaut und von Bilal wieder verworfen.)
   Hier musst du normalerweise nichts ändern.
   ===================================================================== */

:root{
  --bg:        #f6f5f2;   /* warmes Papierweiß */
  --bg2:       #efeeea;
  --karte:     #ffffff;
  --karte2:    #fbfaf8;
  --linie:     #e5e3dd;
  --linie2:    #cfcdc5;
  --text:      #131313;
  --muted:     #55534e;
  --faint:     #8f8d86;
  --hell:      #ffffff;
  --dunkel:    #121212;   /* dunkle Sektionen (Band, Footer) */
  --gruen:     #131313;   /* Alt-Name aus Version 1 */
  --disp:      'Playfair Display', Georgia, serif;
  --body:      'Hanken Grotesk', system-ui, sans-serif;
  --mono:      'IBM Plex Mono', 'Courier New', monospace;
  --r:         18px;
  --feder:     cubic-bezier(.22,.9,.35,1.1);
}

*{margin:0;padding:0;box-sizing:border-box}
/* Das hidden-Attribut muss IMMER gewinnen. Ohne diese Regel schlägt
   z.B. .leistung{display:grid} das versteckte Angebots-Element auf der
   Startseite, und ohne JavaScript stünde dort eine leere Zeile. */
[hidden]{display:none!important}
/* Harte Sperre gegen waagerechtes Scrollen. Wenn irgendwo doch etwas
   übersteht, wackelt sonst die ganze Seite seitlich und der Browser malt
   beim Scrollen Reste stehen. Genau das hat Bilal am 05.08. gesehen. */
html{scroll-behavior:smooth;overflow-x:hidden}
body{overflow-x:hidden;max-width:100%}
[id]{scroll-margin-top:92px}
:focus{outline:none}
:focus-visible{outline:2px solid var(--text);outline-offset:3px;border-radius:6px}
.skiplink{
  position:fixed;top:-70px;left:16px;z-index:200;
  background:var(--text);color:var(--bg);padding:12px 22px;border-radius:100px;
  font-size:14px;font-weight:600;transition:top .2s;
}
.skiplink:focus{top:14px}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  font-size:16.5px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--text);color:var(--bg)}

.wrap{max-width:1180px;margin:0 auto;padding:0 28px}

/* ---------- Typografie ---------- */
h1,h2,h3{font-family:var(--disp);font-weight:500;letter-spacing:-.01em;line-height:1.12;color:#0e0e0e}
h1{font-size:clamp(42px,6vw,78px)}
h2{font-size:clamp(30px,4vw,50px)}
h3{font-size:21px;line-height:1.3;letter-spacing:0}
.hl{font-style:normal;color:inherit;text-decoration:none}
/* Kein Wirbel-Zeichen mehr vor den Überzeilen (Ansage Bilal 05.08.:
   "das kann überall weg"). Nur noch die Schrift. */
.eyebrow{
  display:inline-flex;align-items:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--faint);font-weight:500;margin-bottom:18px;
}
.lead{font-size:18.5px;color:var(--muted);max-width:640px;margin-top:20px;font-weight:400}
/* Fließtext, der nach dem Vorspann weiterläuft. Etwas kleiner als .lead,
   damit der erste Satz vorne bleibt. */
.fliess{font-size:16.5px;color:var(--muted);max-width:640px;margin-top:16px;line-height:1.75}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}
.center .eyebrow{justify-content:center}

.et{font-family:var(--body);font-weight:600;font-size:.82em;vertical-align:.03em}

.vpreis{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;
  border-bottom:1px dashed var(--linie);font-size:15px}
.vpreis:last-child{border-bottom:0}
.vpreis span{color:var(--muted)}
.vpreis b{font-family:var(--mono);font-size:14.5px;font-weight:600;text-align:right}

/* ---------- Preistafel (Werkstatt) ----------
   Ein geschlossener Kasten, in zwei Blöcke gegliedert: oben die festen
   Preise, unten der Arbeitswert. Ansage Bilal 06.08.2026: die offene
   zweispaltige Fassung wirkte unruhig, lieber wieder ein Kasten, dafür
   ordentlich. Die frühere .tafel / .tafeln ist damit ersetzt. */
/* .karte.preistafel, nicht nur .preistafel: sonst gewinnt das Padding
   von .karte, weil die Regel weiter unten in dieser Datei steht. */
.karte.preistafel{
  max-width:820px;margin-top:40px;padding:42px 46px 34px;
}
.pt-kopf{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  border-bottom:2px solid var(--text);padding-bottom:16px;flex-wrap:wrap;
}
.pt-kopf h3{font-size:28px}
.pt-kopf span{font-family:var(--mono);font-size:11.5px;color:var(--faint);
  letter-spacing:.08em;text-transform:uppercase}

/* Jeder Block bekommt eine kleine Überschrift und etwas Luft davor */
.pt-gruppe + .pt-gruppe{margin-top:18px;border-top:1px solid var(--linie);padding-top:24px}
.pt-titel{
  font-family:var(--mono);font-size:11.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
  margin:22px 0 6px;
}
.pt-gruppe:first-of-type .pt-titel{margin-top:24px}

.preistafel .zeile{
  display:flex;align-items:baseline;gap:14px;
  padding:14px 12px;margin:0 -12px;font-size:16px;border-radius:10px;
}
.preistafel .zeile span{color:var(--muted)}
.preistafel .zeile i{flex:1;border-bottom:2px dotted var(--linie2);transform:translateY(-5px)}
/* Feste Breite für die Preisspalte: dadurch stehen alle Beträge in einer
   sauberen Kolonne untereinander, auch der Streichpreis daneben. */
.preistafel .zeile b{
  font-family:var(--mono);font-weight:600;white-space:nowrap;font-size:17px;
  min-width:152px;text-align:right;
}
.preistafel .zeile:hover span{color:var(--text)}

/* Die rabattierte Zeile bekommt einen sehr zarten goldenen Grund, damit
   das Auge sie findet, ohne dass es nach Werbebanner aussieht. */
.zeile-angebot{background:rgba(244,180,0,.08)}
.zeile-angebot b{color:#8a6500}
/* Auf den Rad-Karten steht der alte Preis ÜBER dem neuen (display:block).
   Hier sollen beide nebeneinander stehen, deshalb zurück auf inline. */
.zeile-angebot .alt-preis{
  display:inline;color:var(--faint);font-family:var(--mono);font-size:15px;
  margin-right:10px;margin-bottom:0;
}
.pt-angebot{
  margin:18px 0 0;font-size:14px;color:var(--muted);
  border-left:2px solid #f4b400;padding-left:14px;
}
.pt-angebot b{color:var(--text);font-weight:600}

/* Der Satz unter der Tafel. Kurz halten, sonst liest ihn keiner. */
.pt-nachsatz{
  margin-top:26px;max-width:600px;
  font-size:15px;line-height:1.7;color:var(--muted);
}

/* ---------- Streichpreis (Verleih) ---------- */
.alt-preis{text-decoration:line-through;color:var(--faint);font-weight:400;margin-right:8px}
.spar{display:inline-block;margin-left:8px;background:transparent;color:var(--text);border:1px solid var(--linie2);font-size:11px;
  font-weight:700;padding:3px 10px;border-radius:100px;letter-spacing:.04em;vertical-align:middle;white-space:nowrap}

/* ---------- Hinweis-Leiste ganz oben ----------
   Erscheint nur, wenn in einstellungen.js unter "hinweisOben" ein Text
   steht (skript.js Abschnitt 0). Liegt fest ÜBER dem Header, der
   Header rückt per JS um die Leistenhöhe nach unten. */
.hinweis-oben{position:fixed;top:0;left:0;right:0;z-index:60;
  background:var(--dunkel);color:#f4f3ef;text-align:center;
  padding:10px 18px;font-size:14.5px;line-height:1.5}

/* ---------- Header ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(246,245,242,.72);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s, box-shadow .3s;
}
header.fest{background:rgba(246,245,242,.93);border-bottom-color:var(--linie);box-shadow:0 6px 24px rgba(0,0,0,.05)}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:40px;width:auto;transition:transform .5s var(--feder)}
.brand:hover img{transform:translateX(6px)}  /* das Rad rollt los */
.brand b{font-family:var(--disp);font-size:21px;font-weight:600;letter-spacing:0}
.navlinks{display:flex;align-items:center;gap:22px}
.navlinks a{
  font-size:14px;color:var(--muted);font-weight:500;
  background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 1px;
  transition:color .2s, background-size .3s;
  padding-bottom:2px;
}
.navlinks a:hover{color:var(--text);background-size:100% 1px}
.navlinks a.aktiv{color:var(--text);background-size:100% 1px}
.navlinks a.btn, .navlinks a.btn:hover{color:var(--bg);background:var(--text);padding-bottom:10px}
.burger{display:none;background:none;border:1px solid var(--linie2);border-radius:10px;
  color:var(--text);font-size:20px;padding:6px 13px;cursor:pointer}

/* ---------- Buttons (mit Klick-Feder) ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--text);color:var(--bg);
  font-family:var(--body);font-weight:600;font-size:15px;
  padding:15px 30px;border-radius:100px;border:1px solid var(--text);
  cursor:pointer;
  transition:transform .25s var(--feder), box-shadow .25s, background .2s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.16)}
.btn:active{transform:scale(.96);box-shadow:0 4px 10px rgba(0,0,0,.12)}
.btn.line{background:transparent;color:var(--text);border-color:var(--linie2)}
.btn.line:hover{background:var(--text);color:var(--bg);border-color:var(--text);box-shadow:0 14px 30px rgba(0,0,0,.16)}
.btn.sm{padding:10px 20px;font-size:14px}

/* ---------- Hero: der echte Laden ----------
   Ansage Bilal 05.08.: das Herstellerfoto vom Grecos-Rad ist raus.
   Stattdessen steht der Laden selbst da. Foto tauschen heißt: eine Zeile
   in index.html ändern, der Rahmen hier bleibt. */
.hero{
  padding:118px 0 0;position:relative;overflow:hidden;text-align:center;
}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero-licht{
  position:absolute;left:50%;top:30%;transform:translate(-50%,-50%);
  width:min(1250px,130vw);aspect-ratio:1.55/1;pointer-events:none;z-index:1;
  background:radial-gradient(closest-side,
    rgba(19,19,19,.06), rgba(19,19,19,.025) 48%, transparent 74%);
}
/* line-height .9 zieht die Zeilen eng zusammen. Damit die Unterlänge
   vom "g" in Hamburg nicht in den Text darunter läuft, unten etwas Luft. */
.hero-titel{
  margin:0 0 .1em;padding-bottom:.06em;
  font-size:clamp(44px,9vw,128px);line-height:.9;letter-spacing:-.03em;
  font-weight:500;color:var(--text);
}
/* Zweite Zeile heller, damit die erste vorn steht. Nicht heller machen:
   darunter wird "Hamburg" auf dem Papierweiß praktisch unsichtbar. */
.hero-titel .zeile2{display:block;color:#8f8d86}
.hero-unten{display:flex;flex-direction:column;align-items:center;gap:6px}
/* Das Foto steht als breites Band unter der Überschrift und läuft unten
   aus dem Bild. Dadurch zieht es ins Scrollen, statt als Kasten dazustehen.
   Feste Höhe, damit es nicht auf seine eigene Bildhöhe aufgeht.
   Ausschnitt 38% von oben zeigt die Ladenzeile, nicht die Lenker davor. */
.hero-foto{
  position:relative;z-index:2;margin:clamp(26px,4vh,54px) auto 0;
  max-width:1180px;width:100%;padding:0 28px;
}
.hero-foto img{
  width:100%;height:clamp(230px,40vh,420px);
  object-fit:cover;object-position:center 38%;
  border-radius:20px 20px 0 0;
  box-shadow:0 -1px 0 rgba(19,19,19,.06), 0 32px 60px rgba(19,19,19,.16);
}
.hero-foto figcaption{
  position:absolute;left:54px;bottom:22px;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.9), 0 0 4px rgba(0,0,0,.6);
}
.hero-unten .sub{margin-top:6px}
.badge{
  display:inline-flex;align-items:center;gap:10px;
  border:1px solid var(--linie2);border-radius:100px;
  padding:9px 20px;font-size:13.5px;color:var(--muted);margin-bottom:28px;
  background:var(--karte);
}
.badge .dot{width:7px;height:7px;border-radius:50%;background:var(--text)}
.sub{font-size:clamp(16.5px,1.6vw,19px);color:var(--muted);max-width:540px;margin-top:24px}
.hero-cta{display:flex;gap:16px;margin-top:38px;flex-wrap:wrap}
/* Hero-Zeichnung und Bühne (aus der Dreh-Rad-Zeit) sind am 09.08.2026
   gelöscht, im HTML seit dem 05.08. ungenutzt. */

/* Marke klein über dem Modellnamen */
.marke-zeile{
  display:block;font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-bottom:5px;
}
/* Goldener Knopf im Hero, führt zu den Angeboten */
.btn.gold{background:#f4b400;color:#131313;border-color:#f4b400}
.btn.gold:hover{background:#131313;color:#f4b400;border-color:#131313}

/* ---------- Zahlenband unter dem Hero ---------- */
.zahlenband{background:var(--karte);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.zahlenband .wrap{
  display:flex;justify-content:space-between;gap:30px;
  padding-top:28px;padding-bottom:28px;flex-wrap:wrap;
}
.hu{min-width:120px;text-align:left}
.hu b{font-family:var(--disp);font-size:30px;font-weight:600;color:var(--text);display:block}
.hu span{font-family:var(--mono);font-size:11px;color:var(--faint);letter-spacing:.1em;text-transform:uppercase}

/* ---------- Sektionen ---------- */
section{padding:110px 0}
section.alt{background:var(--bg2);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
section.tight{padding:56px 0}

.kopf{padding:190px 0 80px;position:relative;overflow:hidden}
.kopf::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(700px 420px at 90% 0%, #ecebe5, transparent 65%);
}
.krumen{font-size:13px;color:#8f8d86;margin-bottom:22px;letter-spacing:.04em}
.krumen a:hover{color:var(--text)}

/* ---------- Raster & Karten ---------- */
.raster{display:grid;gap:22px;margin-top:56px}
.r2{grid-template-columns:repeat(2,1fr)}
.r3{grid-template-columns:repeat(3,1fr)}
.karte{
  background:var(--karte);border:1px solid var(--linie);border-radius:var(--r);
  padding:34px 30px;
}
.karte:hover{border-color:var(--linie2)}
.karte .ic{
  width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:var(--bg);border:1px solid var(--linie);
  font-size:22px;margin-bottom:22px;
  transition:transform .3s var(--feder);
}
.ic svg{width:25px;height:25px;display:block;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.karte h3{margin-bottom:12px}
.karte p{color:var(--muted);font-size:15.5px}

/* ---------- Split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.haken{list-style:none;margin-top:28px;display:grid;gap:15px}
.haken li{padding-left:36px;position:relative;color:var(--muted);font-size:16px}
.haken li::before{
  content:"✓";position:absolute;left:0;top:1px;
  width:23px;height:23px;border-radius:50%;
  background:var(--text);color:var(--bg);
  display:flex;align-items:center;justify-content:center;font-size:11px;
}
.haken b{color:var(--text);font-weight:600}
/* ---------- Fotos ----------
   Kein Rahmen mehr. Der gestrichelte Rand stammte noch aus der Zeit, als
   hier Platzhalter standen. Auf dem Handy war er außerdem größer als das
   Foto: der Kasten hatte 420px Mindesthöhe, das querformatige Bild wurde
   bei schmaler Breite aber viel niedriger und schwamm mittendrin.
   Ansage Bilal 06.08.2026: Rahmen weg, Bild soll die Fläche füllen.

   align-items:stretch statt center, damit das Bild die volle Höhe des
   Kastens bekommt. Auf dem Handy fällt die Mindesthöhe weg, dort
   bestimmt das Bild selbst, wie hoch es ist. So wird nichts
   abgeschnitten und es bleibt kein leerer Streifen. */
.bildbox{
  border-radius:var(--r);min-height:420px;overflow:hidden;
  display:flex;align-items:stretch;
}
/* Das Platzhalter-Aussehen gilt nur, wenn wirklich kein Bild drin ist */
.bildbox:empty{
  background:var(--bg2);border:1px dashed var(--linie2);padding:30px;
  align-items:center;justify-content:center;
  color:var(--faint);font-size:14px;text-align:center;
}
/* KEIN height:100% hier. Der Kasten hat nur eine Mindesthöhe, keine
   feste Höhe, deshalb hat sich 100% auf nichts bezogen und das Bild
   behielt seine eigene Höhe: unten blieb ein leerer Streifen.
   align-self:stretch zieht das Bild dagegen auf die volle Kastenhöhe,
   object-fit:cover schneidet den Überstand sauber weg. */
.bildbox img{
  width:100%;align-self:stretch;object-fit:cover;
  display:block;border-radius:var(--r);
}

/* ---------- Sterne ----------
   Gold, so wie im Google-Eintrag auch. Die Bewertungs-Kästen (.note,
   .zitat, .zitat-mehr) und die Schritt-Kästen (.schritt) sind am
   06.08.2026 rausgeflogen. Ansage Bilal: die Seite ist zu kastig.
   Die Zitate laufen jetzt als Band (.zitatband), die Schritte stehen
   als Zeilen (.ablauf). Nicht wieder als Kästen aufbauen. */
.sterne{color:#f4b400;letter-spacing:3px;font-size:15px}
.stern-gold{color:#f4b400}
.btn.line:hover .stern-gold{color:#ffd452}

/* ---------- Infobox & interne Hinweise ---------- */
/* ---------- Preis-Anzeige im Verleih ----------
   Früher ein Kasten (.infobox). Ansage Bilal 07.08.2026: schöner und
   nicht so kastig. Jetzt eine ruhige Zeile mit feiner Linie darüber.
   Sobald gerechnet werden kann, steht die Summe groß da.
   .infobox und .hinweisbox sind mit demselben Durchgang gelöscht
   worden, sie wurden nirgends mehr gebraucht. */
/* Kleiner Hinweis direkt unter einem Eingabefeld */
.feld-hinweis{
  margin:-10px 0 20px;font-size:13.5px;color:var(--faint);line-height:1.5;
}
.vpreis-anzeige{
  margin:0 0 22px;padding-top:20px;
  border-top:1px solid var(--linie);
  color:var(--muted);font-size:15px;line-height:1.6;
}
.vpreis-anzeige.da{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;
}
.vp-summe{
  font-family:var(--mono);font-size:30px;font-weight:600;
  color:var(--text);line-height:1.1;
}
.vp-dazu{font-size:15.5px;color:var(--text)}
.vp-klein{flex-basis:100%;font-size:13.5px;color:var(--faint);margin-top:2px}
/* Sonntag gewählt oder Datum verdreht: gleiche Zeile, nur in Gold, damit
   es auffällt, ohne dass ein roter Warnkasten die Seite zerreißt. */
.vpreis-anzeige.warnung{
  border-top-color:#f4b400;color:var(--text);
}
.vpreis-anzeige.warnung b{color:#8a6500}

/* ---------- Band (CTA, dunkel) ---------- */
.band{
  text-align:center;position:relative;overflow:hidden;
  background:var(--dunkel);color:#f4f3ef;
}
.band h2{color:#fff;font-size:clamp(34px,4.6vw,58px)}
.band .eyebrow{color:rgba(255,255,255,.55)}
.band .lead{margin:22px auto 0;color:rgba(255,255,255,.72)}
.band .hero-cta{justify-content:center;margin-top:38px}
/* Die Adresse im dunklen Band führt direkt in die Route. Unterstrichen,
   damit man sieht, dass man draufdrücken kann. */
.band .adresse-link{
  color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);
  text-underline-offset:5px;transition:text-decoration-color .25s;
}
.band .adresse-link:hover,.band .adresse-link:focus-visible{text-decoration-color:#fff}
/* Öffnungszeiten im dunklen Band: mittig, Tag und Uhrzeit dicht
   beieinander, beides in derselben Farbe. Ansage Bilal 06.08.2026. */
.band-zeiten{
  display:grid;gap:8px;margin:26px auto 0;width:max-content;
  font-size:16px;color:rgba(255,255,255,.82);
}
.band-zeiten div{display:grid;grid-template-columns:104px auto;gap:16px;text-align:left}
.band-zeiten b{font-weight:600;color:inherit}
.band-gruss{margin-top:26px;font-size:17px;color:rgba(255,255,255,.82)}
.band .btn{background:#fff;color:#131313;border-color:#fff}
.band .btn:hover{box-shadow:0 14px 30px rgba(0,0,0,.4)}
.band .btn.line{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.band .btn.line:hover{background:#fff;color:#131313;border-color:#fff}

/* ---------- Formulare ---------- */
.formbox{
  background:var(--karte);border:1px solid var(--linie);border-radius:var(--r);
  padding:38px 34px;box-shadow:0 20px 44px rgba(0,0,0,.05);
}
.feld{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.feld2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
/* Kurzes Auswahlfeld (Anrede). Ein Feld mit drei Wörtern über die volle
   Breite sieht verloren aus, deshalb gedeckelt. Auf dem Handy bleibt es
   trotzdem breit genug zum Tippen. */
.feld-schmal{max-width:220px}
.feld label{font-size:13.5px;color:var(--muted);font-weight:550}
.feld input,.feld select,.feld textarea{
  background:var(--bg);border:1px solid var(--linie);border-radius:12px;
  padding:14px 16px;color:var(--text);font-family:var(--body);font-size:15.5px;
  outline:none;transition:border-color .2s, box-shadow .2s;
}
.feld input:focus,.feld select:focus,.feld textarea:focus{border-color:var(--text);box-shadow:0 0 0 3px rgba(19,19,19,.08)}
.feld textarea{min-height:120px;resize:vertical}
.dsgvo{
  display:flex;gap:12px;align-items:flex-start;font-size:13px;color:#8f8d86;
  margin:6px 0 22px;cursor:pointer;line-height:1.55;
}
.dsgvo a{text-decoration:underline}

/* ALLE Kästchen im Formular sind gleich groß und stehen auf derselben
   senkrechten Kante (Ansage Bilal 14.08.2026: "eine Haken ist ein
   bisschen rechts, das andere ein bisschen links"). Ohne feste Maße
   nimmt der Browser für die Einwilligung sein Standard-Kästchen, das
   ist rund 13 Pixel klein. Die Regel gilt für beide Sorten zusammen,
   damit sie nie wieder auseinanderlaufen. */
.dsgvo input[type=checkbox],
.wahlhaken input[type=checkbox]{
  flex:0 0 18px;width:18px;height:18px;margin:1px 0 0;
  accent-color:var(--text);cursor:pointer;
}

/* Haken mitten im Formular ("Ich bin schon Kunde", "Rad bei uns
   gekauft"). Bewusst als schlichte Zeile direkt unter dem Feld, auf
   das sie sich bezieht, nicht als eigener Kasten. */
.wahlhaken{
  display:flex;gap:12px;align-items:flex-start;cursor:pointer;
  font-size:14.5px;color:var(--text);line-height:1.5;
  margin:-8px 0 20px;
}
.wahlhaken .wh-dazu{display:block;font-size:13px;color:var(--faint);margin-top:2px}
/* Die Werbe-Einwilligung muss sich sichtbar vom Rest abheben und darf
   nicht mit der Pflicht-Einwilligung verschwimmen (§ 7 UWG). Deshalb
   eine feine Linie darüber, kein Kasten. */
.wahlhaken.werbehaken{border-top:1px solid var(--linie);padding-top:18px;margin:26px 0 14px}

/* Fehlende Pflichtfelder rot umranden (Ansage Bilal 14.08.2026).
   Erst NACH einem Klick auf den Absende-Knopf, deshalb die Klasse
   .geprueft am Formular. Ohne sie wäre jedes leere Feld von Anfang an
   rot, und das schreckt beim Ausfüllen ab. */
form.anfrage.geprueft .feld input:invalid,
form.anfrage.geprueft .feld select:invalid,
form.anfrage.geprueft .feld textarea:invalid{
  border-color:#b3261e;
  background:rgba(179,38,30,.05);
}
form.anfrage.geprueft .feld input:invalid:focus,
form.anfrage.geprueft .feld select:invalid:focus,
form.anfrage.geprueft .feld textarea:invalid:focus{
  box-shadow:0 0 0 3px rgba(179,38,30,.12);
}
form.anfrage.geprueft .dsgvo input:invalid{
  outline:2px solid #b3261e;outline-offset:2px;border-radius:2px;
}
.formmeldung{margin-top:16px;font-size:14.5px;display:none}
/* Erfolgsmeldung mit grünem Haken (Ansage Bilal 11.08.): dezente grüne
   Fläche, damit der Kunde sicher sieht, dass die Anfrage raus ist. */
.formmeldung.ok{
  display:flex;gap:12px;align-items:flex-start;color:var(--text);font-weight:500;
  border:1px solid rgba(30,125,66,.35);background:rgba(30,125,66,.07);
  border-radius:12px;padding:14px 16px;line-height:1.55;
}
.formmeldung.ok b{font-weight:700}
.fm-haken{
  flex:0 0 26px;width:26px;height:26px;margin-top:1px;
  fill:none;stroke:#1e7d42;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;
}
.formmeldung.fehler{display:block;color:#8a2222}
.formmeldung a{text-decoration:underline}

/* ---------- Räder im Laden ---------- */
.chip{
  border:1px solid var(--linie2);border-radius:100px;padding:9px 20px;
  font-size:14px;color:var(--muted);cursor:pointer;background:var(--karte);
  font-family:var(--body);font-weight:500;
  transition:all .25s var(--feder);
}
.chip:hover{border-color:var(--text);color:var(--text);transform:translateY(-1px)}
.chip.an{background:var(--text);border-color:var(--text);color:var(--bg);font-weight:600;animation:pop .3s var(--feder)}
.chip:disabled{opacity:.35;cursor:default;transform:none}
@keyframes pop{50%{transform:scale(1.08)}}

.artzeile{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
/* Zweite und dritte Zeile. Erscheinen erst, wenn oben etwas gewählt ist.
   Liegen sie untereinander, rücken sie eng zusammen und wirken als Block. */
.alterzeile{
  display:flex;flex-wrap:wrap;gap:9px;align-items:center;
  margin:0 0 10px;padding:16px 20px;
  background:var(--karte);border:1px solid var(--linie);border-radius:14px;
}
.alterzeile + .alterzeile{margin-top:0}
.alterzeile .tit{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);margin-right:8px;
}

/* Rad-Liste: DREI Räder nebeneinander, Ansage Bilal 07.08.2026.
   Vorher fiel sie schon ab 1000px auf zwei Spalten zurück, dadurch
   standen auf einem normalen Laptop nur zwei Räder in einer Reihe.
   Jetzt bleiben es drei, bis der Platz wirklich nicht mehr reicht:
   3 Karten à mindestens 250px plus 2 Lücken à 22px plus 56px
   Seitenrand ergeben rund 850px. Darunter zwei Spalten, ab 680px eine. */
.radliste{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:20px}
@media (max-width:850px){
  .radliste{grid-template-columns:repeat(2,1fr)}
}
.rad{
  position:relative;
  background:var(--karte);border:1px solid var(--linie);border-radius:var(--r);
  overflow:hidden;
  box-shadow:0 1px 2px rgba(19,19,19,.04), 0 6px 16px rgba(19,19,19,.05);
  transition:box-shadow .45s ease, border-color .45s ease;
}
.rad:hover{box-shadow:0 2px 6px rgba(19,19,19,.05), 0 16px 34px rgba(19,19,19,.1);border-color:var(--linie2)}
/* Feste Bildfläche, damit die Karten gleich hoch beginnen,
   egal wie das Foto vom Handy geschnitten ist */
.rad .bild{background:var(--karte);aspect-ratio:900/563;display:flex;align-items:center;justify-content:center;overflow:hidden}
.rad .bild img{width:100%;height:100%;object-fit:contain;transition:transform .45s var(--feder)}
.rad:hover .bild img{transform:scale(1.05)}
.rad .txt{padding:24px 24px 26px}
.rad .kat{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--faint);font-weight:600}
.rad h3{margin:8px 0 16px;font-size:19px}
.daten{list-style:none;display:grid;gap:7px;font-size:13.5px}
.daten li{display:flex;justify-content:space-between;border-bottom:1px dashed var(--linie);padding-bottom:6px}
.daten span{color:var(--faint)}
.daten b{color:var(--muted);font-weight:500;text-align:right}
.rad .fuss{display:flex;align-items:center;justify-content:space-between;margin-top:20px}
.preis{font-family:var(--mono);font-size:17px;font-weight:600}
.leer{
  grid-column:1/-1;text-align:center;padding:60px 30px;color:var(--muted);
  background:var(--karte);border:1px dashed var(--linie2);border-radius:var(--r);
}
.marke-zeile{
  display:block;font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-bottom:4px;
}

/* ---------- Manufaktur ----------
   Steht anstelle der Rad-Liste, wenn "Manufaktur" gewählt ist. Bewusst
   kein Kasten (Bilal: "hingeklatscht"), sondern eine feine Linie oben
   und ruhiger Fließtext, wie beim .nachsatz. */
.manufaktur{
  grid-column:1/-1;max-width:660px;
  border-top:1px solid var(--linie2);padding-top:30px;
}
.manufaktur h3{font-size:clamp(24px,3.4vw,32px);line-height:1.15;margin:0 0 16px}
.manufaktur p{font-size:16.5px;color:var(--muted);line-height:1.75;margin:0 0 14px}
.mf-knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 26px !important}
.mf-hinweis{
  border-top:1px solid var(--linie);padding-top:18px;
  font-size:15.5px;margin-bottom:0 !important;
}

/* ---------- Angebote ----------
   Der Sale-Knopf steht am Ende der Knopfzeile und ist gold, damit man
   ihn findet. Auf der Karte liegt ein Etikett auf dem Bild, der alte
   Preis steht durchgestrichen darüber. */
.chip-angebot{border-color:#f4b400;color:#8a6500;font-weight:600}
.chip-angebot:hover{border-color:#f4b400;background:#fff8e6;color:#7a5a00}
.chip-angebot.an{background:#f4b400;border-color:#f4b400;color:#131313}
.rad.ist-angebot{border-color:#f4b400}
.angebot-etikett{
  position:absolute;top:16px;left:16px;z-index:2;
  background:#f4b400;color:#131313;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  padding:6px 12px;border-radius:100px;font-weight:600;
}
.alt-preis{
  display:block;font-family:var(--body);font-size:13px;color:var(--faint);
  font-weight:400;text-decoration:line-through;margin-bottom:1px;
}

/* ---------- Probefahrt: Kalender und Uhrzeiten ---------- */
.probe{max-width:760px;margin:44px auto 0}
.pf-block{padding-bottom:30px;margin-bottom:30px;border-bottom:1px solid var(--linie)}
.pf-block:last-of-type{border-bottom:0;padding-bottom:6px;margin-bottom:0}
.pf-block h3{font-size:18px;margin-bottom:18px}
.pf-chips{display:flex;flex-wrap:wrap;gap:9px}
.pf-leer{font-size:14.5px;color:var(--faint)}

.kalender{background:var(--bg);border:1px solid var(--linie);border-radius:14px;padding:20px}
.kal-kopf{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}
.kal-monat{font-family:var(--disp);font-size:20px;font-weight:500}
.kal-pfeil{
  width:38px;height:38px;flex:0 0 38px;border-radius:50%;cursor:pointer;
  border:1px solid var(--linie2);background:var(--karte);color:var(--text);
  font-size:15px;line-height:1;transition:all .2s var(--feder);
}
.kal-pfeil:hover:not(:disabled){background:var(--text);color:var(--bg);border-color:var(--text)}
.kal-pfeil:disabled{opacity:.3;cursor:default}
/* minmax(0,1fr) statt 1fr: Die Tages-Knöpfe haben aspect-ratio und eine
   Mindesthöhe. Bei 1fr überträgt sich die Höhe als Mindestbreite auf die
   Spalte, dann ist das Gitter auf dem Handy breiter als die Karte und die
   Samstagsspalte ragt raus (Bilal-Meldung 11.08.: "15., 22., 29. gehen
   aus dem Rahmen"). minmax(0,1fr) lässt die Spalten schrumpfen. */
.kal-wochentage,.kal-tage{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.kal-wochentage span{
  text-align:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);padding-bottom:8px;
}
.kal-tag{
  /* width:100% ist Pflicht: ohne sie leitet der Browser die BREITE aus
     min-height mal aspect-ratio ab (44px), und die Knöpfe ragen auf dem
     Handy aus ihren schmaleren Spalten. Mit fester Breite bestimmt die
     Spalte die Breite und das Seitenverhältnis nur noch die Höhe. */
  aspect-ratio:1;width:100%;min-height:40px;min-width:0;padding:0;border-radius:10px;cursor:pointer;
  border:1px solid var(--linie);background:var(--karte);
  color:var(--text);font-family:var(--body);font-size:14.5px;font-weight:500;
  transition:all .2s var(--feder);
}
.kal-tag:hover:not(:disabled){border-color:var(--text);transform:translateY(-2px)}
.kal-tag.zu{color:var(--faint);background:transparent;border-color:transparent;cursor:default;opacity:.45}
.kal-tag.an{background:var(--text);border-color:var(--text);color:var(--bg);font-weight:700}
.kal-leer{min-height:40px}
.kal-legende{font-size:12.5px;color:var(--faint);margin-top:14px}

.pf-zusammen{margin-bottom:20px;font-size:15px;color:var(--muted);min-height:24px}
.pf-zusammen b{color:var(--text)}
.pf-offen{color:var(--faint);font-size:14.5px}

/* Klick auf "buchen", obwohl noch Schritte offen sind: die Seite springt
   zum ersten offenen Schritt, der wird rot markiert (Ansage Bilal
   13.08.2026, vorher passierte sichtbar nichts und das Terminsystem
   wirkte kaputt). Rot gibt es erst NACH dem Klick auf den Knopf,
   nicht schon beim normalen Ausfüllen. */
.pf-block{scroll-margin-top:96px}
.pf-block.fehlt h3{color:#b3261e}
.pf-block.fehlt h3::after{content:"Bitte hier noch auswählen.";display:block;margin-top:5px;font-size:14px;font-weight:400;color:#b3261e}
.pf-block.fehlt select,.pf-block.fehlt .kalender{border-color:#b3261e}
.pf-zusammen.warnrot .pf-offen{color:#b3261e}
.pf-hinweis{font-size:13px;color:var(--faint);margin-top:16px;line-height:1.6}
.pf-hinweis a{text-decoration:underline;color:var(--muted)}

/* ---------- Leasing-Anbieter ----------
   Statt einer Knopfreihe: ruhige Felder mit Name und einer Zeile dazu,
   damit man auf einen Blick sieht, wer das jeweils ist. */
.anbieter{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--linie);
  border:1px solid var(--linie);border-radius:var(--r);overflow:hidden}
.anb{
  display:flex;flex-direction:column;gap:6px;text-align:left;cursor:pointer;
  background:var(--karte);border:0;padding:22px 22px 24px;
  font-family:var(--body);transition:background .3s ease;
}
.anb:hover{background:var(--bg)}
.anb-name{font-family:var(--disp);font-size:18px;font-weight:500;color:var(--text)}
.anb-ort{font-size:13px;color:var(--faint);line-height:1.5}
@media (max-width:1000px){ .anbieter{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .anbieter{grid-template-columns:1fr} }

/* ---------- Leistungen als Zeilen ----------
   Ansage Bilal 05.08.: die Kacheln sahen hingeklatscht aus. Deshalb
   keine Kästen mehr, sondern eine ruhige Liste mit feinen Trennlinien.
   Beim Draufgehen rückt die Zeile leicht ein und der Pfeil wandert. */
.leistungen{margin-top:52px;border-top:1px solid var(--linie)}
.leistung{
  display:grid;grid-template-columns:auto 1fr auto;align-items:start;
  gap:26px;padding:30px 12px;border-bottom:1px solid var(--linie);
  transition:padding-left .35s var(--feder), background .35s ease;
}
.leistung:hover{padding-left:26px;background:rgba(19,19,19,.022)}
.lg-ic{
  width:46px;height:46px;flex:0 0 46px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--linie);background:var(--karte);color:var(--text);
}
.lg-ic svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.lg-text{display:block;max-width:760px}
.lg-titel{display:block;font-family:var(--disp);font-size:23px;font-weight:500;margin-bottom:7px}
.lg-sub{display:block;color:var(--muted);font-size:15.5px;line-height:1.65}
.lg-pfeil{
  align-self:center;font-size:19px;color:var(--faint);
  transition:transform .35s var(--feder), color .35s;
}
.leistung:hover .lg-pfeil{transform:translateX(7px);color:var(--text)}
@media (max-width:680px){
  .leistung{grid-template-columns:auto 1fr;gap:18px;padding:24px 0}
  .leistung:hover{padding-left:0}
  .lg-pfeil{display:none}
  .lg-titel{font-size:20px}
}

/* Die Angebots-Zeile steht in derselben Liste, nur mit goldenem Symbol */
.leistung-angebot .lg-ic{border-color:#f4b400;background:#fff8e6;color:#8a6500}
.leistung-angebot .lg-ic svg{fill:#f4b400;stroke:#c99400;stroke-width:1.2}
.leistung-angebot .lg-titel::after{
  content:"reduziert";margin-left:10px;vertical-align:2px;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  background:#f4b400;color:#131313;padding:4px 10px;border-radius:100px;font-weight:600;
}

/* ---------- Persönlicher Code ----------
   Kunde tippt den Code ein, den er im Laden bekommen hat. */
.codebox{
  display:flex;gap:12px;flex-wrap:wrap;justify-content:center;
  max-width:560px;margin:38px auto 0;
}
.codebox input{
  flex:1;min-width:220px;
  background:var(--karte);border:1px solid var(--linie2);border-radius:100px;
  padding:16px 26px;color:var(--text);font-family:var(--mono);
  font-size:17px;letter-spacing:.12em;text-transform:uppercase;text-align:center;
  outline:none;transition:border-color .2s, box-shadow .2s;
}
.codebox input::placeholder{letter-spacing:.06em;color:var(--faint);text-transform:none}
.codebox input:focus{border-color:var(--text);box-shadow:0 0 0 3px rgba(19,19,19,.08)}
.codebox .btn{flex:0 0 auto}
.code-hinweis{
  max-width:560px;margin:16px auto 0;text-align:center;
  font-size:14.5px;color:var(--muted);min-height:1px;
}
.code-hinweis.warnung{color:#8a2222}
.code-treffer{margin-top:40px}
.code-gruss{
  font-family:var(--disp);font-size:clamp(24px,3vw,32px);font-weight:500;
  text-align:center;margin-bottom:12px;
}
.code-notiz{
  max-width:660px;margin:0 auto 34px;text-align:center;
  font-size:16.5px;color:var(--muted);line-height:1.7;
}
.code-treffer .radliste{margin-top:0}
.code-fuss{
  margin-top:30px;text-align:center;font-size:15px;color:var(--muted);
}
.code-fuss a{text-decoration:underline;color:var(--text);font-weight:600}
.visuell-versteckt{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;
}

/* ---------- Marken-Laufband ----------
   Ansage Bilal 05.08.: die Marken sollen langsam von links nach rechts
   laufen statt als Liste dazustehen. Läuft nach LINKS, damit man liest
   wie beim Lesen. Bei "weniger Bewegung" steht es still und lässt sich
   mit dem Finger schieben. Ohne Logo steht der Markenname da. */
.laufband{
  position:relative;overflow:hidden;margin-top:52px;
  padding:10px 0;
}
/* Die weichen Ränder nur auf Geräten mit Maus. Auf Touch-Geräten ist eine
   Maske über einer sehr breiten, bewegten Fläche eine häufige Ursache für
   Darstellungsfehler. Ohne Maske sieht es dort schlicht gerade aus. */
@media (hover:hover){
  .laufband{
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  }
}
/* KEIN will-change hier. Die Spur ist mehrere tausend Pixel breit. Mit
   will-change hält der Browser dafür dauerhaft eine eigene Grafikebene
   vor. Auf Handys reicht der Grafikspeicher dafür oft nicht, dann malt
   er Reste der Seite doppelt. Ohne will-change läuft es genauso weich. */
.lb-spur{display:flex;align-items:center;gap:64px;width:max-content}
.lb-marke{
  flex:0 0 auto;font-family:var(--disp);font-size:30px;font-weight:500;
  color:var(--faint);letter-spacing:-.01em;white-space:nowrap;
  transition:color .3s;
}
/* Jeder Name führt auf die Seite des Herstellers */
.lb-marke:hover,.lb-marke:focus-visible{color:var(--text)}
.lb-marke:focus-visible{outline:2px solid var(--text);outline-offset:6px;border-radius:6px}
.lb-marke img{height:44px;width:auto;display:block;opacity:.72;transition:opacity .3s}
.lb-marke:hover img{opacity:1}

/* ---------- Bewertungen als Laufband ----------
   Dasselbe Band wie bei den Marken, nur mit Zitaten statt Namen. Kein
   Kasten, kein Schatten: die Zitate stehen frei nebeneinander, getrennt
   durch eine feine senkrechte Linie. Ansage Bilal 06.08.: weniger Kästen.
   Ein viertes Zitat wird einfach im HTML angehängt, die Breite ergibt
   sich von selbst. */
.zitatband{margin-top:34px}
.zitatband .lb-spur{align-items:stretch;gap:0}
.lb-zitat{
  flex:0 0 auto;width:min(400px,78vw);margin:0;
  padding:6px 40px;border-left:1px solid var(--linie2);
  display:flex;flex-direction:column;justify-content:center;gap:10px;
}
.lb-zitat:first-child{border-left:0}
.lb-zitat p{
  font-family:var(--disp);font-size:20px;line-height:1.45;color:var(--text);
  margin:0;text-wrap:pretty;
}
/* Anführungszeichen kommen aus dem Stil, nicht aus dem Text. So steht in
   der Datei nur das reine Zitat und niemand vergisst ein Zeichen. */
.lb-zitat p::before{content:"„"}
.lb-zitat p::after{content:"“"}
.lb-zitat cite{font-size:13.5px;color:var(--faint);font-style:normal}
.lb-zitat .sterne{font-size:14px;letter-spacing:.14em}

/* Die Bewertung über dem Band: nur Zahl, Sterne und ein Link. */
.wertung{
  display:flex;align-items:baseline;justify-content:center;gap:16px;
  flex-wrap:wrap;margin-top:26px;
}
.wertung .zahl{font-family:var(--disp);font-size:clamp(38px,6vw,54px);line-height:1}
.wertung .sterne{font-size:19px;letter-spacing:.1em}
.wertung a{font-size:15px;color:var(--muted);text-underline-offset:4px}
.wertung a:hover{color:var(--text)}
@media (prefers-reduced-motion:reduce){
  .laufband{overflow-x:auto}
  .lb-spur{transform:none!important}
}

/* ---------- Ablauf in Schritten ----------
   Ansage Bilal 05.08.: nicht kästchenweise. Deshalb keine Karten,
   sondern eine durchgehende Zeile mit feinen Trennlinien dazwischen.
   Die Nummer steht groß und hell darüber wie eine Wegmarke. */
/* Ein Ablauf hat drei Schritte (Startseite) oder vier (Partner-Seite).
   Deshalb keine feste Spaltenzahl: auto-fit legt genau so viele Spalten
   an, wie Schritte da sind, und bricht auf schmalen Fenstern um. */
.ablauf{
  list-style:none;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:0;margin-top:52px;
}
.ablauf li{
  padding:6px 34px;border-left:1px solid var(--linie);
}
.ablauf li:first-child{border-left:0;padding-left:0}
.ablauf li:last-child{padding-right:0}
.ablauf .ab-nr{
  display:block;font-family:var(--disp);font-size:54px;line-height:1;
  font-weight:400;color:var(--linie2);margin-bottom:16px;
}
.ablauf h3{font-size:20px;margin-bottom:10px}
.ablauf p{color:var(--muted);font-size:15.5px}

/* ---------- Adresse als Wegweiser ----------
   Die Adresse ist anklickbar und führt direkt in die Karten-App.
   Darunter der Hinweis auf den Innenhof, weil uns sonst viele suchen. */
.adresse{
  font-weight:600;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--linie2);transition:text-decoration-color .2s;
}
.adresse:hover{text-decoration-color:var(--text)}
.wegweiser{
  margin-top:12px;padding-top:12px;border-top:1px dashed var(--linie);
  font-size:14px;color:var(--muted);line-height:1.6;
}

/* ---------- Nachsatz ----------
   Für den einen Satz, der nach einer Kartenreihe noch kommt.
   Bewusst KEIN Kasten (Ansage Bilal 05.08.: nicht hingeklatscht),
   sondern nur eine feine Linie und Text, der weiterläuft. */
.nachsatz{
  margin-top:44px;padding-top:26px;border-top:1px solid var(--linie);
  font-size:16.5px;color:var(--muted);max-width:720px;line-height:1.7;
}
.nachsatz b{color:var(--text);font-weight:600}
.nachsatz a{color:var(--text);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.nachsatz a:hover{text-decoration-thickness:2px}
.center .nachsatz{margin-left:auto;margin-right:auto}

/* FAQ-Zeilen (partner.html): Frage und Antwort als Zeilen mit feiner
   Trennlinie, keine Kästen (Ansage Bilal 06.08.). Der Text muss mit dem
   FAQPage-Block im Head der Seite übereinstimmen. */
.faq{margin-top:30px}
.faq>div{border-top:1px solid var(--linie);padding:24px 0}
.faq>div:last-child{border-bottom:1px solid var(--linie)}
.faq h3{font-size:19px;margin-bottom:8px}
.faq p{color:var(--muted);font-size:15.5px;line-height:1.65}

/* ---------- Rechtstexte ---------- */
.rechtstext{max-width:780px}
.rechtstext h2{font-size:22px;margin:44px 0 14px}
.rechtstext h3{font-size:17px;margin:30px 0 10px}
.rechtstext p,.rechtstext ul{color:var(--muted);font-size:15.5px;margin-bottom:12px}
.rechtstext ul{padding-left:22px}
.rechtstext a{text-decoration:underline}

/* ---------- Öffnungszeiten ---------- */
/* Öffnungszeiten. Tag und Uhrzeit standen vorher per space-between an
   den beiden Rändern der Spalte, dazwischen klaffte eine Lücke.
   Ansage Bilal 06.08.2026: näher zusammen. Deshalb feste erste Spalte,
   die Uhrzeit schließt direkt an. Und nur EINE Schriftfarbe: der
   Unterschied kommt über die Schriftstärke, nicht über die Helligkeit. */
.oeff{font-size:15px;color:var(--muted);display:grid;gap:7px}
.oeff div{display:grid;grid-template-columns:104px auto;gap:14px;align-items:baseline}
.oeff b{font-weight:600;color:inherit}
.oeff a{font-weight:600}

/* ---------- Footer (dunkel) ---------- */
footer{padding:80px 0 36px;background:var(--dunkel);color:#d8d6d0}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:50px}
.fbrand img{height:44px;width:auto;margin-bottom:20px}
.fbrand p{color:#8f8d86;font-size:14.5px;max-width:280px}
.fsocial{display:flex;gap:12px;margin-top:22px}
.fsocial a{
  width:40px;height:40px;border:1px solid rgba(255,255,255,.2);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:12.5px;
  color:#d8d6d0;transition:all .25s var(--feder);
}
.fsocial a:hover{border-color:#fff;color:#131313;background:#fff;transform:translateY(-2px)}
footer h4{font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  color:#8f8d86;font-weight:600;margin-bottom:20px}
footer ul{list-style:none;display:grid;gap:11px}
footer ul a{color:#b9b7b0;font-size:14.5px;transition:color .2s}
footer ul a:hover{color:#fff}
/* Im Footer stand der Wochentag grau und die Uhrzeit weiß. Das sah
   uneinheitlich aus (Ansage Bilal 06.08.2026). Jetzt beides in
   derselben Farbe, die Uhrzeit hebt sich nur durch die Fettung ab. */
footer .oeff{color:#d8d6d0}
footer .oeff b{color:inherit}
.fbottom{
  margin-top:64px;padding-top:26px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:13px;color:#8f8d86;
}
.fbottom a:hover{color:#fff}

/* ---------- Karten: ruhig liegen lassen ----------
   Ansage Bilal 05.08.: kein Hochspringen, kein Kippen zur Maus.
   Beim Draufgehen wird nur der Schatten etwas tiefer, langsam.
   Nichts bewegt sich, damit die Karten beim Lesen still stehen. */
.karte{
  box-shadow:0 1px 2px rgba(19,19,19,.04), 0 6px 16px rgba(19,19,19,.05);
  transition:box-shadow .45s ease, border-color .45s ease;
}
.karte:hover{
  box-shadow:0 2px 6px rgba(19,19,19,.05), 0 14px 30px rgba(19,19,19,.09);
}

/* ---------- Einblenden beim Scrollen ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s var(--feder)}
.rv.da{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  *{transition:none!important;animation:none!important}
}

dialog.partner-dialog{
  border:1px solid var(--linie);border-radius:var(--r);padding:34px;
  max-width:440px;width:calc(100vw - 40px);background:var(--karte);color:var(--text);
  box-shadow:0 30px 80px rgba(0,0,0,.28);
  /* margin:auto zentriert den Dialog. Der Reset oben setzt margin:0,
     deshalb hier wieder ausdrücklich setzen. */
  margin:auto;max-height:calc(100vh - 40px);
}
dialog.partner-dialog::backdrop{background:rgba(19,19,19,.45)}
.pd-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:10px}
.pd-kopf h3{font-size:23px}
.pd-kopf img{height:26px;width:auto;display:block;margin-top:3px}
.pd-schliessen{
  background:none;border:1px solid var(--linie2);border-radius:50%;
  width:38px;height:38px;cursor:pointer;font-size:15px;color:var(--text);flex-shrink:0;
  transition:all .25s;
}
.pd-schliessen:hover{background:var(--text);color:var(--bg);border-color:var(--text)}
.pd-rolle{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:12px}
.pd-text{color:var(--muted);font-size:15px;line-height:1.65;margin-bottom:22px}

/* ---------- Handy ---------- */
@media (max-width:1000px){
  .split{grid-template-columns:1fr;gap:44px}
  /* Sobald das Foto unter dem Text steht, braucht es keine Mindesthöhe
     mehr: dann bestimmt das Bild selbst, wie hoch es ist, und es bleibt
     kein leerer Streifen darüber und darunter. */
  .bildbox{min-height:0}
  .hero{min-height:0;padding:120px 0 0}
  .hero-titel{font-size:clamp(46px,15vw,120px)}
  .r3{grid-template-columns:repeat(2,1fr)}
  .fgrid{grid-template-columns:1fr 1fr}
  .ablauf{grid-template-columns:1fr}
  .ablauf li{border-left:0;border-top:1px solid var(--linie);padding:26px 0 0}
  .ablauf li:first-child{border-top:0;padding-top:0}
}
@media (max-width:860px){
  .hero{min-height:0;padding:136px 0 56px}
}

/* Menü als Klappmenü. Die Grenze liegt bei 900 Pixel, weil die Zeile
   einzeilig etwa 740 Pixel braucht. Darunter schob sie sich vorher
   über das Logo und "Partner & Leasing" brach um. */
@media (max-width:900px){
  /* Der Blur-Header ist auf dem Handy AUS. Grund (Fehlersuche 09.08.,
     Bilal: "dunkel nur bis Gewerbekunden"): backdrop-filter macht den
     Header zum Bezugsrahmen für position:fixed-Kinder. Das Klappmenü
     war dadurch nur so hoch wie der Header, die unteren Menüpunkte
     liefen ohne Hintergrund auf den Seiteninhalt hinaus. Ohne Blur
     gilt fixed wieder für den ganzen Bildschirm. Als Ausgleich ist der
     Header-Hintergrund hier fast deckend. Blur auf Mobile NICHT
     wieder einschalten. */
  header{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(246,245,242,.95)}
  .navlinks{
    display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:60;
    /* Deckend DUNKEL, und zwar über display:none/flex statt über
       opacity. Bilals Handy hat das Overlay als eigene Grafikebene
       nur TEILWEISE gemalt (dunkel bis "Gewerbekunden", darunter
       durchsichtig): dieselbe Grafikspeicher-Schwäche wie beim
       Laufband am 05.08. Ein display-Wechsel erzeugt keine eigene
       Ebene, da kann nichts halb gemalt werden. Kein opacity, kein
       transition, kein inset-Kurzschreibweise hier einbauen. */
    background:var(--dunkel);
    flex-direction:column;justify-content:center;align-items:flex-start;
    padding:100px 36px 44px;gap:4px;overflow-y:auto;
  }
  .navlinks.offen{display:flex}
  .navlinks a{font-size:27px;font-family:var(--disp);font-weight:500;color:#f4f3ef;background:none;padding:7px 0}
  .navlinks a.aktiv{color:#fff;border-bottom:2px solid rgba(244,243,239,.55)}
  .navlinks a.btn,.navlinks a.btn:hover{margin-top:20px;font-family:var(--body);font-size:15px;padding:14px 30px;color:#121212;background:#f4f3ef;border-color:#f4f3ef}
  .burger{display:block;position:relative;z-index:70;min-width:44px;min-height:44px}
  /* Der Knopf steht bei offenem Menü auf dunklem Grund: hell einfärben,
     sonst ist das Schließen-Kreuz unsichtbar. */
  body.menue-offen .burger{color:#f4f3ef;border-color:rgba(244,243,239,.45)}
  body.menue-offen{overflow:hidden}

  /* AB HIER GILT: TOUCH-GERÄT.
     Wo das Klappmenü erscheint, wird mit dem Finger bedient. Deshalb muss
     alles Anklickbare mindestens 44 Pixel hoch sein. Das stand vorher erst
     ab 680 Pixel und fehlte damit auf Tablets komplett (Fehler von Bilal
     am 05.08. gemeldet: "Tabletansicht buggt"). */
  footer .fgrid ul li a,
  footer .oeff a{display:inline-block;padding:11px 0;min-height:22px}
  footer .fgrid ul{margin-top:-8px}
  .fbottom a{display:inline-block;padding:11px 0}
  .kal-tag,.kal-leer{min-height:44px}
  .kal-tag{font-size:15px}
  .kal-pfeil{width:44px;height:44px;flex:0 0 44px}
  .chip{min-height:44px;padding:12px 20px;display:inline-flex;align-items:center}
  .artzeile,.alterzeile,.pf-chips{gap:8px}
  /* Haken groß genug zum Antippen. Beide Sorten zusammen, sonst
     stehen sie auf dem Handy wieder unterschiedlich groß da. */
  .wahlhaken{padding:10px 0;margin:-12px 0 16px}
  .dsgvo input[type=checkbox],
  .wahlhaken input[type=checkbox]{width:22px;height:22px;flex:0 0 22px;margin-top:0}
  .btn.sm{min-height:44px;padding:12px 20px}
  .codebox input{min-height:52px}
  /* Preistafel: der lange Text bricht um, dann fällt die Punktlinie auf
     null zusammen und der Preis klebt oben rechts. Deshalb gestapelt. */
  /* .karte.preistafel, sonst gewinnt die Grundregel: ein Media-Query
     erhöht die Spezifität nicht, und dort stehen zwei Klassen. */
  .karte.preistafel{padding:28px 22px 24px}
  .preistafel .zeile{flex-wrap:wrap;align-items:flex-start;gap:2px}
  .preistafel .zeile i{display:none}
  .preistafel .zeile span{width:100%}
  .preistafel .zeile b{width:100%;text-align:left;font-size:18px;margin-top:2px}
}
/* Jedes Gerät ohne Maus, unabhängig von der Breite. Fängt das große
   Tablet im Querformat ab, wo die Menüzeile noch breit angezeigt wird,
   aber trotzdem mit dem Finger bedient wird. */
@media (hover:none){
  footer .fgrid ul li a,
  footer .oeff a{display:inline-block;padding:11px 0;min-height:22px}
  .fbottom a{display:inline-block;padding:11px 0}
  .navlinks a{padding-top:11px;padding-bottom:11px}
  .kal-tag,.kal-leer{min-height:44px}
  .kal-pfeil{width:44px;height:44px;flex:0 0 44px}
  .chip{min-height:44px;display:inline-flex;align-items:center}
  .btn.sm{min-height:44px}
  .lg-pfeil{padding:4px 0}
}

@media (max-width:680px){
  section{padding:76px 0}
  .kopf{padding:150px 0 60px}
  .r2,.r3,.radliste{grid-template-columns:1fr}
  .feld2{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
  .zahlenband .wrap{gap:18px}
  .hu{min-width:40%}
  .hu b{font-size:24px}
  .fbottom{flex-direction:column;gap:10px;align-items:flex-start;text-align:left}
  .formbox{padding:26px 18px}
  .kalender{padding:14px 10px}
  .kal-tage,.kal-wochentage{gap:3px}
  .kal-tag{border-radius:8px}
  .kal-monat{font-size:18px}
  .alterzeile{padding:14px 14px}
  .alterzeile .tit{width:100%;margin-bottom:2px}
  .rad .fuss{flex-wrap:wrap;gap:12px}
  .rad .fuss .btn{width:100%;justify-content:center}
  .codebox .btn{width:100%;justify-content:center}
}