/* Reiners Fahrschule, Startseite im Glasentwurf.
   Die Buehne und die Glasflaechen selbst stehen in glas.css und gelten fuer
   alle Seiten. Hier nur, was die Startseite ausmacht.
   Klassen mit Praefix rfj-, so wie es in CLAUDE.md festgelegt ist. */

/* overflow-x:clip, weil das Laufband durch die leichte Vergroesserung
   seitlich ueber die Seite hinausragt und sonst einen waagerechten
   Scrollbalken erzeugt. clip statt hidden, damit kein neuer Scrollrahmen
   entsteht. */
#rfj-startseite{color:var(--tinte);overflow-x:clip}

/* Lesefortschritt oben */
#rfj-startseite .rfj-progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:70}
#rfj-startseite .rfj-progress span{
  display:block;height:100%;transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,var(--red),var(--yellow));
}

.rfj-bahn{max-width:1200px;margin-inline:auto;padding:0 24px}

/* ===== Hero ===== */
/* Das Bild steht fuer sich, nichts liegt darauf. */
#rfj-startseite .rfj-hero{line-height:0;background:#f1e6d8}
#rfj-startseite .rfj-hero-bild{display:block;width:100%;height:auto}

#rfj-startseite .rfj-kurs-aussen{padding:26px 0 0}
/* Der Kurstermin ist die wichtigste Einzelangabe der Startseite: Wer keinen
   Kursbeginn findet, ruft nicht an. Er stand vorher zu klein und zu flach
   unter dem Hero-Bild. Deshalb dickeres Glas als die uebrigen Tafeln, ein
   kraeftigerer Schatten und durchgehend groessere Schrift. */
#rfj-startseite .rfj-kurs{
  display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;
  padding:30px 30px 30px 36px;border-radius:26px;line-height:1.62;
  background:rgba(255,255,255,.86);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 22px 50px rgba(40,26,16,.26);
}
#rfj-startseite .rfj-kurs-datum{display:flex;align-items:center;gap:20px;min-width:0}
#rfj-startseite .rfj-kurs-datum i{
  flex-shrink:0;width:66px;height:66px;border-radius:18px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--red),#8e2229);color:#fff;
  font-size:20px;font-weight:800;font-style:normal;line-height:1.1;text-align:center;
  box-shadow:0 10px 22px rgba(181,49,61,.38);
}
#rfj-startseite .rfj-kurs-datum b{display:block;font-size:22px;font-weight:800;letter-spacing:-.018em}
#rfj-startseite .rfj-kurs-datum small{display:block;font-size:15px;color:var(--tinte-weich);margin-top:4px}
#rfj-startseite .rfj-kurs-knoepfe{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:820px){
  #rfj-startseite .rfj-kurs{grid-template-columns:1fr;gap:20px;padding:24px 22px}
  #rfj-startseite .rfj-kurs-datum i{width:58px;height:58px;font-size:18px}
  #rfj-startseite .rfj-kurs-datum b{font-size:19.5px}
  #rfj-startseite .rfj-kurs-knoepfe .rfj-knopf{flex:1}
}

/* ===== Laufband ===== */
/* Kein Gelb im Verlauf: Weisse Schrift auf #ffca28 kommt nur auf 1,53:1.
   Das Gelb sitzt stattdessen als Kante oben und unten, dort traegt es keine
   Schrift. */
#rfj-startseite .rfj-band{
  margin:34px 0 0;padding:15px 0;overflow:hidden;white-space:nowrap;
  background:linear-gradient(96deg,#c4343f 0%,#93222c 54%,#7c1c24 100%);
  border-top:3px solid var(--yellow);
  border-bottom:3px solid var(--yellow);
  transform:rotate(-.9deg) scale(1.04);
}
#rfj-startseite .rfj-band div{display:inline-block;animation:rfj-laufen 34s linear infinite}
#rfj-startseite .rfj-band span{
  padding-right:14px;font-size:14.5px;font-weight:800;letter-spacing:.14em;color:#fff;
}
#rfj-startseite .rfj-band i{padding-right:14px;font-style:normal;color:var(--yellow)}
@keyframes rfj-laufen{to{transform:translateX(-50%)}}

/* ===== Abschnitte ===== */
#rfj-startseite .rfj-abschnitt{padding:38px 0}
#rfj-startseite .rfj-tafel{padding:62px 56px}
#rfj-startseite .rfj-marke{
  display:inline-flex;align-items:center;gap:8px;margin:0 0 20px;
  padding:7px 15px 7px 11px;border-radius:100px;
  background:rgba(181,49,61,.10);border:1px solid rgba(181,49,61,.24);
  font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#8e2229;
}
#rfj-startseite .rfj-marke i{width:7px;height:7px;border-radius:50%;background:var(--red);font-style:normal}
#rfj-startseite h2{
  margin:0 0 16px;font-size:clamp(29px,4.4vw,52px);font-weight:800;line-height:1.03;
  letter-spacing:-.035em;
}
#rfj-startseite h2 em{font-style:normal;color:var(--rot-satt)}
#rfj-startseite .rfj-vor{margin:0 0 34px;max-width:64ch;font-size:17.5px;color:var(--tinte-weich)}
#rfj-startseite .rfj-tafel > p:last-child{margin-bottom:0}
@media(max-width:760px){
  #rfj-startseite .rfj-tafel{padding:38px 22px}
  #rfj-startseite .rfj-abschnitt{padding:18px 0}
}

/* ===== Knöpfe ===== */
#rfj-startseite .rfj-knopf{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 26px;border-radius:100px;border:0;
  font-size:15px;font-weight:700;text-decoration:none;white-space:nowrap;
  background:linear-gradient(140deg,#c4343f,#93222c);color:#fff;
  box-shadow:0 10px 24px rgba(147,34,44,.32),inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .24s;
}
#rfj-startseite .rfj-knopf:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(147,34,44,.4)}
#rfj-startseite .rfj-knopf-klar{
  background:rgba(255,255,255,.62);color:var(--tinte);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 20px rgba(70,45,25,.14);
  -webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6);
}
#rfj-startseite .rfj-knopf-klar:hover{background:rgba(255,255,255,.8)}

/* ===== Karten ===== */
#rfj-startseite .rfj-karten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
#rfj-startseite .rfj-karten article{
  padding:32px 28px;border-radius:22px;
  background:rgba(255,255,255,.52);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 10px 26px rgba(70,45,25,.10);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),background .3s,box-shadow .3s;
}
#rfj-startseite .rfj-karten article:hover{
  transform:translateY(-8px);background:rgba(255,255,255,.74);
  box-shadow:inset 0 1px 0 rgba(255,255,255,1),0 22px 46px rgba(70,45,25,.18);
}
#rfj-startseite .rfj-karten b{
  display:block;font-size:52px;font-weight:800;line-height:.86;letter-spacing:-.05em;
  color:var(--rot-satt);
}
#rfj-startseite .rfj-karten h3{margin:20px 0 9px;font-size:19px;font-weight:700}
#rfj-startseite .rfj-karten p{margin:0;font-size:15.5px;line-height:1.64;color:var(--tinte-weich)}
@media(max-width:880px){#rfj-startseite .rfj-karten{grid-template-columns:1fr}}

/* ===== Klassen, dunkles Glas ===== */
/* Die Kuerzel stehen in satter Volltonfarbe mit harter Kante. Ein
   Leuchtschein macht die Kanten weich und wirkt dadurch blass. */
#rfj-startseite .rfj-klassen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
#rfj-startseite .rfj-klasse{
  display:block;padding:26px 22px;border-radius:20px;text-decoration:none;color:#fff;
  background:linear-gradient(158deg,rgba(28,18,14,.78),rgba(18,13,11,.86));
  -webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 10px 26px rgba(30,16,8,.30);
  transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s;
}
#rfj-startseite .rfj-klasse b{
  display:block;font-size:36px;font-weight:800;letter-spacing:-.045em;line-height:1;
  color:var(--yellow);transition:color .25s;
}
/* 13.5px statt 11.5px und etwas heller: Gegen ein 36px grosses gelbes
   Kuerzel verschwand die Beschreibung darunter, obwohl genau sie sagt,
   was die Klasse bedeutet. */
#rfj-startseite .rfj-klasse span{
  display:block;margin-top:10px;font-size:13.5px;font-weight:700;letter-spacing:.055em;
  text-transform:uppercase;color:#d5c9bb;line-height:1.45;
}
#rfj-startseite .rfj-klasse:hover{
  transform:translateY(-6px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 20px 44px rgba(30,16,8,.42);
}
#rfj-startseite .rfj-klasse:hover b{color:#ffdd6b}
@media(max-width:900px){#rfj-startseite .rfj-klassen{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ===== Merkkasten ===== */
#rfj-startseite .rfj-merk{
  margin-top:26px;padding:30px 32px;border-radius:20px;
  background:rgba(255,255,255,.5);border-left:4px solid var(--red);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
#rfj-startseite .rfj-merk h3{margin:0 0 10px;font-size:19px;font-weight:700}
#rfj-startseite .rfj-merk p{margin:0 0 14px;font-size:16px;line-height:1.68;color:var(--tinte-weich)}
#rfj-startseite .rfj-merk p:last-child{margin-bottom:0}

/* ===== Preise ===== */
/* Hier stand bis zum 22.09.2026 die Liste der fuenf Posten, zweispaltig
   neben dem Hinweis auf die Preisliste. Sie steht auf kosten.html noch
   einmal, dort ausfuehrlich mit den dunklen Ziffernkacheln. Auf der
   Startseite war sie eine Doppelung: Die Startseite reisst an, die
   Unterseite fuehrt aus. */
#rfj-startseite .rfj-preis{margin-top:26px}
#rfj-startseite .rfj-preis p{margin:0 0 22px;font-size:15.5px;line-height:1.66;color:var(--tinte-weich);max-width:62ch}

/* ===== Silke ===== */
/* Vorher .85fr zu 1.15fr: Das Bild wirkte neben der grossen
   Ueberschrift wie eine Briefmarke. Jetzt gleichberechtigt. */
#rfj-startseite .rfj-silke{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
#rfj-startseite .rfj-silke figure{margin:0}
/* Quadratischer Ausschnitt: Das Bild ist Querformat und stand mit 332
   Pixeln Hoehe neben einem 609 Pixel hohen Textblock, also in einer
   halb leeren Spalte. Die Bildlupe zeigt weiterhin das ganze Bild. */
#rfj-startseite .rfj-silke img{
  display:block;width:100%;aspect-ratio:1/1;object-fit:cover;
  border-radius:18px;
}
@media(max-width:880px){
  /* Einspaltig steht das Bild ueber dem Text, da darf es breit bleiben. */
  #rfj-startseite .rfj-silke img{aspect-ratio:3/2}
}
#rfj-startseite .rfj-silke blockquote{
  margin:24px 0;padding:18px 24px;border-left:3px solid var(--gold);
  font-family:Georgia,serif;font-size:17.5px;line-height:1.6;color:var(--tinte);
}
@media(max-width:880px){#rfj-startseite .rfj-silke{grid-template-columns:1fr;gap:28px}}

/* ===== Statement, dunkles Glas ===== */
#rfj-startseite .rfj-statement{
  padding:76px 56px;text-align:center;border-radius:var(--glas-rund);
  /* .74 statt .58: Ueber der hellsten Stelle der Kulisse kam der Fliesstext
     sonst nur auf 3,25:1 und das gelbe Label auf 2,99. */
  background:rgba(32,20,16,.74);color:#fff;
  -webkit-backdrop-filter:blur(30px) saturate(1.8);backdrop-filter:blur(30px) saturate(1.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 24px 56px rgba(40,22,12,.34);
}
#rfj-startseite .rfj-statement h2{color:#fff}
#rfj-startseite .rfj-statement h2 em{color:var(--yellow)}
#rfj-startseite .rfj-statement .rfj-vor{color:#e2d8cd;margin-inline:auto;margin-bottom:0}
#rfj-startseite .rfj-statement .rfj-marke{
  background:rgba(255,202,40,.18);border-color:rgba(255,202,40,.4);color:var(--yellow);
}
#rfj-startseite .rfj-statement .rfj-marke i{background:var(--yellow)}
#rfj-startseite .rfj-zahl{
  display:block;font-size:clamp(84px,14vw,180px);font-weight:800;line-height:.82;
  letter-spacing:-.06em;margin-bottom:8px;color:var(--yellow);
}
@media(max-width:760px){#rfj-startseite .rfj-statement{padding:48px 22px}}

/* ===== Team ===== */
#rfj-startseite .rfj-team-kopf{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:end;margin-bottom:38px}
#rfj-startseite .rfj-team-kopf .rfj-vor{margin-bottom:0}
#rfj-startseite .rfj-team{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:30px}
#rfj-startseite .rfj-team figure{margin:0;text-align:center}
#rfj-startseite .rfj-team img{
  width:124px;height:124px;border-radius:50%;object-fit:cover;
  border:3px solid rgba(255,255,255,.9);box-shadow:0 10px 26px rgba(70,45,25,.18);
}
#rfj-startseite .rfj-team figcaption{margin-top:14px}
#rfj-startseite .rfj-team b{display:block;font-size:17px;font-weight:700}
#rfj-startseite .rfj-team span{
  display:block;margin-top:3px;font-size:12px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--tinte-weich);
}
@media(max-width:820px){
  #rfj-startseite .rfj-team-kopf{grid-template-columns:1fr;gap:18px}
  #rfj-startseite .rfj-team{grid-template-columns:1fr;gap:28px}
}

/* ===== Bewertungen ===== */
#rfj-startseite .rfj-bewert-kopf{display:flex;justify-content:space-between;align-items:end;gap:36px;flex-wrap:wrap;margin-bottom:34px}
#rfj-startseite .rfj-note{text-align:center;flex-shrink:0}
#rfj-startseite .rfj-note b{display:block;font-size:52px;font-weight:800;line-height:1;color:var(--rot-satt)}
#rfj-startseite .rfj-note span{display:block;color:#8a6212;font-size:17px;letter-spacing:.14em;margin-top:5px}
#rfj-startseite .rfj-note small{display:block;font-size:12.5px;color:var(--tinte-weich);margin-top:5px}
#rfj-startseite .rfj-bewert{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:26px}
#rfj-startseite .rfj-bewert blockquote{
  margin:0;padding:28px 26px;border-radius:20px;
  background:rgba(255,255,255,.52);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 10px 26px rgba(70,45,25,.10);
}
#rfj-startseite .rfj-bewert span{display:block;color:#8a6212;letter-spacing:.14em;margin-bottom:12px}
#rfj-startseite .rfj-bewert p{margin:0 0 14px;font-size:15.5px;line-height:1.68;color:var(--tinte-weich)}
#rfj-startseite .rfj-bewert footer{font-size:13.5px;font-weight:700}
#rfj-startseite .rfj-hinweis{margin:22px 0 0;font-size:12px;line-height:1.6;color:var(--tinte-weich)}
@media(max-width:900px){#rfj-startseite .rfj-bewert{grid-template-columns:1fr}}

/* ===== Kontakt ===== */
#rfj-startseite .rfj-kontakt{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
#rfj-startseite .rfj-kontakt .rfj-knopf{margin:0 10px 10px 0}
#rfj-startseite .rfj-kontakt address{
  font-style:normal;font-size:15px;line-height:1.85;color:var(--tinte-weich);
  padding:28px 30px;border-radius:20px;
  background:rgba(255,255,255,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
#rfj-startseite .rfj-kontakt address b{display:block;font-size:17px;color:var(--tinte);margin-bottom:4px}
#rfj-startseite .rfj-kontakt address span{display:block}
#rfj-startseite .rfj-kontakt address a{display:block;color:#a52c37;text-decoration:none;margin-top:6px}
#rfj-startseite .rfj-kontakt address a:hover{text-decoration:underline}
@media(max-width:860px){#rfj-startseite .rfj-kontakt{grid-template-columns:1fr;gap:28px}}

/* ===== Einblenden ===== */
/* Nur mit JavaScript verstecken, siehe basis.css bei .rf-auf. */
.js #rfj-startseite .rfj-reveal{opacity:0;transform:translateY(70px) scale(.96);
  transition:opacity .9s ease,transform .9s cubic-bezier(.16,.84,.3,1)}
.js #rfj-startseite .rfj-reveal.rfj-visible{opacity:1;transform:none}

/* Alle weitere Bewegung steht in bewegung.css. */
@media(prefers-reduced-motion:reduce){
  .js #rfj-startseite .rfj-reveal{opacity:1;transform:none;transition:none}
  #rfj-startseite .rfj-band div{animation:none}
  #rfj-startseite .rfj-karten article,#rfj-startseite .rfj-klasse,#rfj-startseite .rfj-knopf{transition:none}
}