/* Reiners Fahrschule, gemeinsame Basis für alle Seiten
   Farben, Grundtypografie, Kopfzeile, Fußbereich. */

/* Barlow, lokal ausgeliefert. Nichts wird von fremden Servern geladen,
   das ist der Grund, warum die Seite ohne Cookie-Banner auskommt.
   Lizenz und Herkunft: assets/fonts/LIESMICH.txt */
@font-face{
  font-family:Barlow;font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/barlow-400.woff2) format("woff2");
}
@font-face{
  font-family:Barlow;font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/barlow-600.woff2) format("woff2");
}
@font-face{
  font-family:Barlow;font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/barlow-700.woff2) format("woff2");
}
@font-face{
  font-family:Barlow;font-style:normal;font-weight:800;font-display:swap;
  src:url(../fonts/barlow-800.woff2) format("woff2");
}

:root{
  --ink:#292727;
  --muted:#575c65;
  --paper:#eceef1;
  --soft:#dde1e6;
  --red:#b5313d;
  --red2:#ee3341;
  --yellow:#ffca28;
  --line:#c8ced6;
  --kopf-hoehe:74px;
}

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

html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:transparent;
  color:var(--ink);
  font-family:Barlow,"Helvetica Neue",Arial,sans-serif;
  line-height:1.6;
  -webkit-text-size-adjust:100%;
}

img{max-width:100%;height:auto;border:0}

/* Sprungmarke für Tastatur und Vorlesefunktion */
.rf-skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--red);color:#fff;padding:12px 18px;border-radius:0 0 6px 0;
  font-size:14px;font-weight:700;text-decoration:none;
}
.rf-skip:focus{left:0}

:where(a,button,summary):focus-visible{
  outline:3px solid var(--red2);
  outline-offset:3px;
}

/* ===== Kopfzeile ===== */

/* Glasleiste. Sie liegt ueber der Buehne, deshalb durchscheinend statt
   flaechig. Der Rand unten ist eine Lichtkante, keine Linie. */
.rf-kopf{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(26px) saturate(1.8);
  backdrop-filter:blur(26px) saturate(1.8);
  box-shadow:
    inset 0 -1px 0 rgba(120,90,60,.14),
    0 6px 26px rgba(70,45,25,.10);
}
.rf-kopf-innen{
  max-width:1220px;margin:auto;padding:0 22px;
  height:var(--kopf-hoehe);
  display:flex;align-items:center;gap:26px;
}
.rf-marke{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;flex-shrink:0}
.rf-marke img{height:42px;width:auto;display:block}
.rf-marke b{font-size:16px;font-weight:700;line-height:1.1;letter-spacing:-.015em}
.rf-marke span{display:block;font-size:11px;font-weight:500;color:var(--muted);letter-spacing:.09em;text-transform:uppercase}

.rf-nav{margin-left:auto}
.rf-nav ul{display:flex;gap:3px;list-style:none;margin:0;padding:0}
.rf-nav a{
  display:block;padding:9px 13px;border-radius:6px;
  color:var(--ink);text-decoration:none;
  font-size:15px;font-weight:600;white-space:nowrap;
  transition:background .18s,color .18s;
}
.rf-nav a:hover{background:var(--soft)}
.rf-nav a[aria-current="page"]{color:var(--red);background:var(--soft)}

.rf-kopf-tel{
  flex-shrink:0;display:inline-flex;align-items:center;gap:8px;
  background:var(--red);color:#fff;text-decoration:none;
  padding:11px 17px;border-radius:6px;
  font-size:15px;font-weight:700;white-space:nowrap;
  box-shadow:0 6px 16px rgba(181,49,61,.2);
  transition:transform .18s,background .18s;
}
.rf-kopf-tel:hover{background:#9d2a35;transform:translateY(-1px)}

.rf-menue-knopf{
  display:none;margin-left:auto;
  background:none;border:1px solid var(--line);border-radius:6px;
  padding:9px 12px;font:inherit;font-size:14px;font-weight:700;
  color:var(--ink);cursor:pointer;align-items:center;gap:8px;
}
.rf-menue-knopf b{display:block;width:17px;height:2px;background:var(--ink);position:relative}
.rf-menue-knopf b::before,.rf-menue-knopf b::after{
  content:"";position:absolute;left:0;width:17px;height:2px;background:var(--ink);
}
.rf-menue-knopf b::before{top:-5px}
.rf-menue-knopf b::after{top:5px}

/* Acht Menuepunkte plus Telefonknopf brauchen Platz. Darunter das Klappmenue.

   Gemessen am 22.09.2026: Marke 310 + Menue 699 + Telefonknopf 199 plus
   Abstaende braucht die volle Leiste 1344 Pixel. Die Grenze stand aber bei 1120, zwischen
   1121 und 1303 lief die Leiste deshalb aus dem Fenster und die ganze
   Seite bekam einen waagerechten Scrollbalken. Aufgefallen ist das nie,
   weil der Entwicklungsmonitor 3440 breit ist und Handys unter 1120
   liegen. Betroffen waren Laptops mit 1280 und jedes halbierte Fenster.

   Wer einen Menuepunkt ergaenzt, misst nach und zieht diese Zahl mit. */
@media(max-width:1360px){
  .rf-kopf-innen{gap:14px}
  .rf-menue-knopf{display:inline-flex}
  .rf-kopf-tel{padding:10px 13px}
  .rf-nav{
    position:absolute;left:0;right:0;top:var(--kopf-hoehe);
    background:rgba(255,255,255,.92);
    -webkit-backdrop-filter:blur(26px) saturate(1.7);
    backdrop-filter:blur(26px) saturate(1.7);
    border-bottom:1px solid rgba(120,90,60,.14);
    padding:10px 22px 18px;margin:0;
    display:none;box-shadow:0 16px 30px rgba(0,0,0,.09);
  }
  .rf-nav[data-offen="ja"]{display:block}
  .rf-nav ul{flex-direction:column;gap:2px}
  .rf-nav a{padding:13px 12px;font-size:16px;border-bottom:1px solid var(--line)}
  .rf-nav li:last-child a{border-bottom:0}
}
@media(max-width:700px){
  /* Der Telefonknopf oben faellt weg. Unten klebt ohnehin ein Anrufknopf,
     und zu dritt passen Marke, Menue und Nummer nicht in 375 Pixel: Die
     Leiste brauchte 573 und erzeugte einen waagerechten Scrollbalken. */
  .rf-kopf-tel{display:none}

  /* Logo links, Schriftzug in der Mitte, Menue rechts. Vorher stand alles
     links und der Name wurde ab 560 Pixeln abgeschnitten, ab 430 ganz
     ausgeblendet: Die Leiste sah auf dem Handy anders aus als ueberall
     sonst.

     Die beiden Randspalten sind beide 1fr und damit gleich breit. Nur
     deshalb steht die mittlere Spalte in der echten Fenstermitte und nicht
     bloss zwischen Logo und Knopf. Ein zentriertes Paket aus Logo und Text
     reicht dafuer nicht: Das Logo ist 136 Pixel breit, der Schriftzug
     saesse 44 Pixel rechts der Mitte.

     display:contents loest den Marken-Link als Kasten auf, damit Logo und
     Schriftzug eigene Rasterfelder bekommen. Anklickbar bleiben beide. */
  .rf-kopf-innen{
    display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
    gap:10px;padding:0 16px;
  }
  .rf-marke{display:contents}
  .rf-marke img{grid-column:1;justify-self:start;height:38px}
  .rf-marke b{grid-column:2;justify-self:center;text-align:center;font-size:15.5px}
  .rf-marke span{display:block;font-size:10.5px;letter-spacing:.11em}
  .rf-menue-knopf{grid-column:3;justify-self:end;margin-left:0}
  /* Das Klappmenue haengt an der Leiste, nicht an einer Rasterspalte. */
  .rf-nav{grid-column:1/-1}
}
@media(max-width:430px){
  /* Auf 375 Pixeln wird es eng: Marke und Knopf brauchen zusammen 321 von
     343 verfuegbaren Pixeln. Das Wort "Menü" faellt deshalb weg, das
     Symbol bleibt. Vorgelesen wird weiterhin "Menü", das steht im
     aria-label am Knopf. */
  .rf-kopf-innen{padding:0 12px;gap:6px}
  .rf-marke img{height:32px}
  .rf-marke b{font-size:14px}
  .rf-marke span{font-size:9.5px}
  .rf-menue-knopf{font-size:0;padding:10px 12px}
  .rf-menue-knopf b{margin:0}
}

/* ===== Fußbereich ===== */

.rf-fuss{
  background:rgba(255,255,255,.66);
  -webkit-backdrop-filter:blur(26px) saturate(1.7);
  backdrop-filter:blur(26px) saturate(1.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
  padding:52px 22px 34px;
  margin-top:40px;
}
.rf-fuss-innen{
  max-width:1220px;margin:auto;
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;
}
.rf-fuss h2{margin:0 0 14px;font-size:13px;letter-spacing:.14em;color:var(--red)}
.rf-fuss ul{list-style:none;margin:0;padding:0}
.rf-fuss li{margin-bottom:9px}
.rf-fuss a{color:var(--ink);text-decoration:none;font-size:14px}
.rf-fuss a:hover{text-decoration:underline}
.rf-fuss address{font-style:normal;font-size:14px;line-height:1.75;color:var(--muted)}
.rf-fuss address b{display:block;color:var(--ink);font-size:15px;margin-bottom:5px}
.rf-fuss-widerruf-zeile{margin:16px 0 0}
.rf-fuss a.rf-fuss-widerruf{display:inline-block;padding:10px 20px;border:2px solid #b5313d;border-radius:999px;color:#fff;font-size:14px;font-weight:700;text-decoration:none;background:#b5313d;box-shadow:0 4px 12px rgba(181,49,61,.28)}
.rf-fuss a.rf-fuss-widerruf:hover,.rf-fuss a.rf-fuss-widerruf:focus-visible{background:#9d2a35;border-color:#9d2a35;color:#fff;text-decoration:none}
.rf-fuss-logo{height:44px;width:auto;margin-bottom:16px;display:block}
.rf-fuss-unten{
  max-width:1220px;margin:38px auto 0;padding-top:20px;
  border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:12.5px;color:var(--muted);
}
@media(max-width:820px){
  .rf-fuss-innen{grid-template-columns:1fr;gap:32px}
}

/* ===== Dauerhafter Anrufknopf auf dem Handy ===== */

.rf-tel-mobil{
  display:none;
  position:fixed;left:14px;right:14px;bottom:14px;z-index:70;
  background:var(--red);color:#fff;text-decoration:none;
  padding:15px;border-radius:8px;text-align:center;
  font-size:15px;font-weight:900;
  box-shadow:0 10px 26px rgba(0,0,0,.28);
}
@media(max-width:700px){
  .rf-tel-mobil{display:block}
  .rf-fuss{padding-bottom:96px}
}

/* ===== Einblenden beim Scrollen, gilt auf allen Seiten ===== */

/* Versteckt wird nur, wenn JavaScript laeuft (Klasse js am html-Element,
   gesetzt ganz oben im Kopf). Vorher blieben die Abschnitte ohne Skript
   fuer immer unsichtbar, weil nur das Skript sie einblendet. */
.js .rf-auf{opacity:0;transform:translateY(60px) scale(.97);transition:opacity .85s ease,transform .85s cubic-bezier(.16,.84,.3,1)}
.js .rf-auf.rf-da{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .js .rf-auf{opacity:1;transform:none;transition:none}
}
/* ===== Sehr breite Bildschirme =====
   Ab hier waechst die Seite nicht weiter mit. Ohne diese Grenze wird das
   Hero-Bild auf ein Verhaeltnis von ueber 4:1 beschnitten (auf 3440px waren
   nur 39 Prozent des Bildes zu sehen) und der Textblock der Unterseiten
   steht als schmale Saeule in einer fast leeren Flaeche. */
@media(min-width:1760px){
  html{background:#c4cbd4}
  body{
    max-width:1720px;
    margin-inline:auto;
    box-shadow:0 0 0 1px var(--line);
  }
}

/* Hinweis auf KI-gestaltete Bilder. Er gehoert auf jede Seite, nicht nur
   ins Impressum: Die Bilder stehen auf den Inhaltsseiten, also gehoert die
   Kennzeichnung dorthin, wo sie zu sehen sind. */
.rf-fuss-ki{
  max-width:1220px;margin:14px auto 0;
  font-size:12px;line-height:1.6;color:var(--muted);
}

/* ===== Bildlupe, gilt auf allen Seiten =====
   Stand bis 22.09.2026 in unterseite.css. Die Startseite laedt die
   Datei nicht, dort blieb die Lupe deshalb ohne Gestaltung. */

.rf-lupe-bild{cursor:zoom-in;transition:transform .18s,box-shadow .18s}
.rf-lupe-bild:hover{transform:scale(1.03)}
.rf-gespann-zeile .rf-lupe-bild:hover{transform:scale(1.05)}
.rf-lupe-bild:focus-visible{outline:3px solid var(--red2);outline-offset:3px}

.rf-lupe{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  padding:40px 24px;
  background:rgba(32,38,46,.86);
  backdrop-filter:blur(4px);
}
.rf-lupe[hidden]{display:none}
.rf-lupe figure{margin:0;max-width:1100px;width:100%;text-align:center}
.rf-lupe img{
  display:block;width:auto;max-width:100%;max-height:78vh;margin:auto;
  border-radius:10px;background:#fff;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.rf-lupe figcaption{
  margin-top:16px;font-size:14px;line-height:1.6;color:#e7eaee;
}
.rf-lupe-zu{
  position:absolute;top:18px;right:20px;
  width:44px;height:44px;border-radius:50%;
  background:#fff;color:var(--ink);border:0;
  font-size:26px;line-height:1;cursor:pointer;
  display:grid;place-items:center;
}
.rf-lupe-zu:hover{background:var(--red);color:#fff}
.rf-lupe-zu:focus-visible{outline:3px solid var(--red2);outline-offset:3px}

@media(prefers-reduced-motion:reduce){
  .rf-lupe-bild{transition:none}
  .rf-lupe-bild:hover{transform:none}
}
@media(max-width:700px){
  .rf-lupe{padding:20px 14px}
  .rf-lupe-bild:hover{transform:none}
}

/* Fuer Suchmaschinen, KI und Vorleseprogramme lesbar, auf dem Bildschirm
   nicht zu sehen. Nur fuer Text, der sichtbar schon da ist, etwa im
   Hero-Bild. Niemals fuer Text, den Besucher nicht sehen sollen. */
.rf-unsichtbar{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}