/* ==========================================================================
   Fahrservice Lukat — Stylesheet
   Handgeschrieben, keine Frameworks, keine externen Einbindungen, keine Cookies.
   Maße und Farben sind der bisherigen Website nachempfunden.
   1 Grundlagen · 2 Bausteine · 3 Kopf · 4 Hero · 5 Willkommen · 6 Leistungen
   7 Preisrechner · 8 Abschluss · 9 Formular · 10 Textseiten · 11 Fuß · 12 Animation
   ========================================================================== */

/* --- 1 Grundlagen ------------------------------------------------------- */

@font-face{font-family:Roboto;font-style:normal;font-weight:200;font-display:swap;
  src:url(../fonts/roboto-200.woff2) format('woff2')}
@font-face{font-family:Roboto;font-style:normal;font-weight:300;font-display:swap;
  src:url(../fonts/roboto-300.woff2) format('woff2')}
@font-face{font-family:Roboto;font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/roboto-400.woff2) format('woff2')}
@font-face{font-family:Roboto;font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/roboto-500.woff2) format('woff2')}
@font-face{font-family:Roboto;font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/roboto-700.woff2) format('woff2')}

:root{
  --text:#000;
  --text-soft:#4a4a4a;
  --line:#dcdcdc;
  --footer:#333;
  --akzent:#111;
  --whatsapp:#25d366;
  --breite:1140px;
  --radius:50px;
  --schatten:0 2px 12px rgba(0,0,0,.09);
}

*,*::before,*::after{box-sizing:border-box}
/* overflow-x:clip gegen waagerechtes Scrollen: Die Einblend-Effekte in Abschnitt 12
   verschieben Elemente vor dem Erscheinen nach rechts bzw. unten (translateX/Y). Solange
   ein Abschnitt noch nicht sichtbar war, steht sein Inhalt dadurch über den rechten Rand
   hinaus — bei gut 1000 px Fensterbreite entstand so ein Scrollbalken. „clip" statt
   „hidden", damit scroll-behavior:smooth und der fixierte WhatsApp-Knopf weiter wirken. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}

body{
  margin:0;
  font:400 15px/1.48 Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  color:var(--text);
  background:#fff;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}

h1,h2,h3,h4{margin:0 0 .5em;font-weight:300;line-height:1.24}
h1{font-size:28px}
h2{font-size:28px}
h3{font-size:18.75px}
p{margin:0 0 1em}

.wrap{width:100%;max-width:var(--breite);margin-inline:auto;padding-inline:20px}
.mitte{text-align:center}
.nur-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible{outline:3px solid #0a58ca;outline-offset:2px}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:#fff;padding:12px 18px}
.skip:focus{left:8px;top:8px}

/* --- 2 Bausteine -------------------------------------------------------- */

.btn{
  display:inline-block;
  padding:18px 48px 19px;
  border:0;border-radius:var(--radius);
  background:#fff;color:#000;
  font:500 14px/1 Roboto,sans-serif;
  letter-spacing:.4px;text-transform:uppercase;text-decoration:none;
  box-shadow:var(--schatten);
  cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.22)}
.btn:active{transform:translateY(0)}
.btn--dunkel{background:var(--akzent);color:#fff}
.btn--voll{display:block;width:100%;text-align:center}

.sektion{padding:56px 0}
.sektion__titel{font-size:28px;font-weight:700;margin-bottom:10px}

/* --- 3 Kopfbereich ------------------------------------------------------ */

.kopf{background:#fff}
.kopf__zeile{display:flex;align-items:center;flex-wrap:wrap;gap:14px;padding-block:14px}

.marke{display:flex;align-items:center;gap:14px;text-decoration:none;margin-inline:auto}
.marke__logo{width:166px;height:auto}
.marke__name{
  display:none;
  font-size:24px;font-weight:200;line-height:1.1;letter-spacing:-.15px;
  text-shadow:2px 2px 8px #808080;
}

.burger{
  position:relative;z-index:50;
  margin-left:auto;
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:10px;background:none;border:0;cursor:pointer;flex:0 0 auto;
}
.burger span{display:block;height:2px;background:#000;border-radius:2px;
  transition:transform .2s ease,opacity .2s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Am Handy fährt die Navigation als volle Fläche sanft ein.
   Der Menüknopf bleibt darüber sichtbar und wird zum Kreuz. */
.nav{
  position:fixed;inset:0;z-index:40;
  display:flex;flex-direction:column;justify-content:center;
  padding:88px 24px 32px;
  background:#fff;
  opacity:0;visibility:hidden;
  transform:translateY(-14px);
  transition:opacity .28s ease,transform .28s ease,visibility .28s;
  overflow-y:auto;
}
.nav.offen{opacity:1;visibility:visible;transform:none}

.nav ul{list-style:none;margin:0 auto;padding:0;width:100%;max-width:420px}
.nav li{
  opacity:0;transform:translateY(12px);
  transition:opacity .34s ease,transform .34s ease;
}
.nav.offen li{opacity:1;transform:none}
/* Die Einträge kommen nacheinander — das macht das Aufgehen ruhiger */
.nav.offen li:nth-child(1){transition-delay:.06s}
.nav.offen li:nth-child(2){transition-delay:.12s}
.nav.offen li:nth-child(3){transition-delay:.18s}
.nav.offen li:nth-child(4){transition-delay:.24s}

.nav a{
  display:block;padding:17px 6px;font-size:19px;font-weight:300;color:#404040;
  text-align:center;text-decoration:none;
  border-bottom:1px solid var(--line);
}
.nav a[aria-current="page"]{color:#000}
.nav a:active{background:#f4f4f4}

.nav__direkt{
  display:flex;flex-direction:column;gap:12px;
  width:100%;max-width:420px;margin:26px auto 0;
  opacity:0;transform:translateY(12px);
  transition:opacity .34s ease .3s,transform .34s ease .3s;
}
.nav.offen .nav__direkt{opacity:1;transform:none}
.nav__direkt .btn{display:block;text-align:center}
/* Die Knöpfe im Menü sind auch Links — `.nav a` (graue Linkfarbe) war spezifischer als
   `.btn--dunkel` und färbte „Jetzt anrufen" dunkelgrau auf Schwarz (Kontrast 1,8 : 1). */
.nav__direkt .btn--dunkel{color:#fff}
.nav__direkt .btn--rand{color:#000}
.btn--rand{background:transparent;color:#000;box-shadow:inset 0 0 0 2px #000}
/* Umrandeter Knopf für dunkle Flächen (Foto im Kopfbereich) — neben dem weißen Hauptknopf */
.btn--hell-rand{background:rgba(17,17,17,.88);color:#fff;box-shadow:inset 0 0 0 2px #fff}
/* fast deckender dunkler Grund: durchsichtig schien das Nummernschild im Foto durch die Schrift */
.btn--hell-rand:hover{background:#111;box-shadow:inset 0 0 0 2px #fff,0 6px 18px rgba(0,0,0,.22)}
/* Zwei Knöpfe nebeneinander, auf dem Handy untereinander — gleich breit, sonst wirkt der Stapel schief */
.hero__knoepfe{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.hero__knoepfe .btn{min-width:250px;text-align:center}

/* Solange das Menü offen ist, soll die Seite dahinter nicht mitscrollen */
body.menue-offen{overflow:hidden}

@media (min-width:900px){
  .kopf__zeile{padding-block:18px;flex-wrap:nowrap}
  .marke{margin-inline:0 auto}
  .marke__logo{width:168px}
  .marke__name{display:block;font-size:38px}
  .burger{display:none}
  .nav{
    position:static;padding:0;background:none;
    opacity:1;visibility:visible;transform:none;overflow:visible;
    display:block;flex-basis:auto;
  }
  .nav li{opacity:1;transform:none}
  .nav__direkt{display:none}
  .nav ul{display:flex;gap:26px;padding:0;max-width:none;margin:0}
  .nav a{border:0;padding:6px 0;font-size:16px;font-weight:300;color:#404040;text-align:left}
  .nav a[aria-current="page"]{color:#000;font-weight:300}
  .nav a:hover{text-decoration:underline}
}

.telleiste{background:#fff;padding:6px 0 16px;text-align:center}
.telleiste p{margin:0;font-size:14px;font-weight:300;line-height:1.7;letter-spacing:-.15px}
.telleiste a{font-weight:700;text-decoration:none;white-space:nowrap;position:relative}
.telleiste a:hover{text-decoration:underline}

/* Größere Trefferfläche für Finger, ohne den Textfluss zu verändern: Die Zeile bleibt
   optisch gleich, der antippbare Bereich wächst von 17 auf 38 px. Telefonnummern sind bei
   einem Fahrdienst die wichtigsten Elemente der Seite, und ein Teil der Fahrgäste trifft
   kleine Ziele nicht zuverlässig.

   Bewusst NUR hier: In den Fließtexten weiter unten stehen mehrere Links unter- und
   nebeneinander. Dort würden sich die unsichtbaren Flächen überlappen — wer knapp neben
   die zweite Nummer tippt, riefe die erste an. Das wäre schlimmer als ein kleines Ziel.
   Für den Abschlussbereich gibt es ohnehin den großen Knopf „Jetzt anrufen". */
.telleiste a::after{content:"";position:absolute;inset:-11px -5px}

/* --- 4 Hero ------------------------------------------------------------- */

.hero{
  position:relative;
  min-height:440px;
  display:grid;place-items:center;
  background:
    linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4)),
    image-set(url(../img/hero-800.webp) type("image/webp"), url(../img/hero-800.jpg) type("image/jpeg"))
      center/cover no-repeat;
}
.hero__inhalt{padding:64px 20px;text-align:center;color:#fff;max-width:900px}
.hero__claim{font-size:22px;font-weight:300;line-height:1.35;margin-bottom:28px;
  letter-spacing:-.15px}

@media (min-width:700px){
  .hero{min-height:560px;background-image:
    linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4)),
    image-set(url(../img/hero-1280.webp) type("image/webp"), url(../img/hero-1280.jpg) type("image/jpeg"))}
  .hero__claim{font-size:25px}
}
@media (min-width:1200px){
  .hero{min-height:800px;background-image:
    linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4)),
    image-set(url(../img/hero-1920.webp) type("image/webp"), url(../img/hero-1920.jpg) type("image/jpeg"))}
  .hero__claim{font-size:25px}
}

/* --- 5 Willkommen ------------------------------------------------------- */

.willkommen{background:linear-gradient(#fff,#c0c0c0);padding:46px 0 56px;text-align:center}
/* Das Logo sitzt rechtsbündig über dem Textblock — wie in der Vorlage */
.willkommen__logo{width:96px;margin:0 auto 18px}

.willkommen__titel{font-size:24px;font-weight:700;max-width:900px;margin-inline:auto;
  margin-bottom:22px}
.willkommen p{max-width:900px;margin-inline:auto;text-align:center}

@media (min-width:700px){
  .willkommen{padding:54px 0 60px}
  .willkommen__titel{font-size:28px}
  .willkommen__logo{width:123px;margin:0 0 10px auto;max-width:900px}
}

/* --- 6 Leistungen ------------------------------------------------------- */

.leistungen{
  position:relative;
  padding:48px 0 60px;
  background:
    image-set(url(../img/leistungen-800.webp) type("image/webp"), url(../img/leistungen-800.jpg) type("image/jpeg"))
      center/cover no-repeat;
}
@media (min-width:700px){
  .leistungen{background-image:image-set(url(../img/leistungen-1280.webp) type("image/webp"),
    url(../img/leistungen-1280.jpg) type("image/jpeg"))}
}
@media (min-width:1200px){
  .leistungen{background-image:image-set(url(../img/leistungen-1920.webp) type("image/webp"),
    url(../img/leistungen-1920.jpg) type("image/jpeg"))}
}

/* Der Schatten ist dichter als auf der Vorlage, und zwar aus einem messbaren Grund: Das
   Hintergrundfoto ist an dieser Stelle hell (Luminanz 0,69), weiße Schrift käme darauf nur
   auf einen Kontrast von 1,4 — gefordert sind 3,0 für große Schrift. Am Bild selbst ändert
   sich nichts (1:1-Nachbau), der Text bleibt aber auch bei Sonnenlicht auf dem Handy lesbar.
   Sauberer wäre ein leichter dunkler Verlauf über dem oberen Bildbereich; das wäre eine
   sichtbare Abweichung vom Original und gehört deshalb dem Kunden vorgelegt. */
.leistungen__titel{font-size:28px;font-weight:700;color:#fff;text-align:center;
  text-shadow:0 2px 10px rgba(0,0,0,.75), 0 0 4px rgba(0,0,0,.65), 2px 2px 8px rgba(0,0,0,.4);
  margin-bottom:26px}

.kacheln{display:grid;gap:8px;grid-template-columns:1fr;list-style:none;margin:0;padding:0}

/* Jede Kachel liegt als weißer Schleier über dem Foto — abwechselnd 90 % und 80 %
   Deckkraft, genau wie auf der bisherigen Website. Durch die Fugen bleibt das Foto sichtbar. */
.kachel{position:relative;text-align:center;padding:30px 20px 14px}
.kachel::before{content:"";position:absolute;inset:0;background:#fff;opacity:.9}
.kachel > *{position:relative}
.kachel:nth-child(2)::before,
.kachel:nth-child(4)::before,
.kachel:nth-child(5)::before,
.kachel:nth-child(7)::before{opacity:.8}
.kachel__icon{width:88px;height:88px;margin:0 auto 12px}
.kachel h3{margin-bottom:.5em;font-weight:300}
.kachel__zusatz{font-size:15px}
.kachel p{margin:0;font-size:14px;line-height:1.5}

@media (min-width:600px){.kacheln{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){
  .kacheln{grid-template-columns:repeat(4,1fr)}
  .kachel{padding:30px 30px 14px}
}

/* --- 7 Preisrechner ----------------------------------------------------- */

.rechner{background:#f4f4f4}
.rechner__vor{max-width:640px;margin:0 auto 26px;color:var(--text-soft)}
.rechner__karte{max-width:720px;margin-inline:auto;background:#fff;border-radius:14px;
  padding:26px 20px 30px;box-shadow:var(--schatten)}
.feld{margin-bottom:16px;text-align:left}
.feld > label{display:block;margin-bottom:6px;font-weight:500;font-size:14px}
.feld input,.feld select,.feld textarea{
  width:100%;padding:13px 14px;font:inherit;color:inherit;
  background:#fff;border:1px solid #bdbdbd;border-radius:8px;
}
.feld input:focus,.feld select:focus,.feld textarea:focus{border-color:#000}
.feld__hilfe{margin:6px 0 0;font-size:13px;color:var(--text-soft)}
.feld--paar{display:grid;gap:16px}
@media (min-width:560px){.feld--paar{grid-template-columns:1fr 1fr}}

.schalter{display:flex;align-items:flex-start;gap:10px;margin-bottom:16px;font-size:14px;
  text-align:left}
.schalter input{width:20px;height:20px;margin:1px 0 0;flex:0 0 auto}

.ergebnis{margin-top:22px;padding:20px;border-radius:12px;background:#f0f4f0;
  border:1px solid #cfe0cf;text-align:center}
.ergebnis[hidden]{display:none!important}
.ergebnis__preis{font-size:30px;font-weight:700;line-height:1.2;margin:0 0 4px}
.ergebnis__rahmen{font-size:14px;color:var(--text-soft);margin:0 0 14px}
.ergebnis__liste{list-style:none;margin:0 0 16px;padding:0;font-size:14px;text-align:left}
.ergebnis__liste li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;
  border-bottom:1px dashed #cfcfcf}
.ergebnis__liste li:last-child{border:0}
.ergebnis--hinweis{background:#fff8e5;border-color:#f0dca8}

.kleingedruckt{margin:14px 0 0;font-size:12.5px;line-height:1.5;color:var(--text-soft)}

/* --- 8 Abschluss -------------------------------------------------------- */

.abschluss{background:#fff;padding:44px 0 54px}
.abschluss__gitter{display:grid;gap:26px;align-items:center}
.abschluss__bild{width:100%;border-radius:4px}
.abschluss__text{text-align:center}
.abschluss__text h2{font-size:24px;font-weight:700}
.abschluss__text p{max-width:560px;margin-inline:auto}

@media (min-width:900px){
  .abschluss__gitter{grid-template-columns:1fr 1fr;gap:44px}
  .abschluss__text h2{font-size:28px}
}

.btn--puls{animation:pulsieren 2.4s ease-in-out infinite}
@keyframes pulsieren{
  0%,100%{transform:scale(1);box-shadow:var(--schatten)}
  50%{transform:scale(1.045);box-shadow:0 6px 20px rgba(0,0,0,.2)}
}

.wa-knopf{
  position:fixed;right:16px;bottom:16px;z-index:50;
  width:52px;height:52px;display:grid;place-items:center;
  border-radius:50%;background:var(--whatsapp);color:#fff;
  box-shadow:0 3px 14px rgba(0,0,0,.28);
}
.wa-knopf svg{width:30px;height:30px}
.wa-knopf:hover{filter:brightness(1.07)}

/* --- 9 Formular --------------------------------------------------------- */

.formular{max-width:720px;margin-inline:auto;text-align:left}
.formular fieldset{margin:0 0 26px;padding:0;border:0}
.formular legend{padding:0;margin-bottom:12px;font-size:17px;font-weight:500}
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.pflicht{color:#b00020}
.hinweisbox{padding:16px 18px;border-radius:10px;background:#fff8e5;border:1px solid #f0dca8;
  font-size:14px}

/* --- 10 Textseiten ------------------------------------------------------ */

.text{max-width:820px;margin-inline:auto}
.text h2{margin-top:1.6em;font-size:22px}
.text h3{margin-top:1.4em;font-size:17px;font-weight:500}
.text p,.text li{color:#222;line-height:1.65}
.text ul{padding-left:22px}
.text table{width:100%;border-collapse:collapse;margin:1em 0;font-size:14px}
.text th,.text td{padding:9px 10px;border:1px solid var(--line);text-align:left;vertical-align:top}
.text th{background:#f4f4f4;font-weight:500}
.tabellenrahmen{overflow-x:auto}

.seitenkopf{padding:26px 0 6px;text-align:center}
.seitenkopf h1{font-size:26px;letter-spacing:1px;text-transform:uppercase;font-weight:700}

/* --- 11 Fußbereich ------------------------------------------------------ */

.fuss{background:var(--footer);color:#fff;padding:30px 0;text-align:center;font-size:13px}
.fuss p{margin:0}
.fuss a{color:#fff}
.fuss__links{margin-top:10px;line-height:2}
.fuss__links a{margin:0 3px}
/* Hinweis auf die Sprachfassung der Rechtstexte — bewusst zurückhaltend. */
.fuss__hinweis{margin-top:10px;font-size:13px;line-height:1.5;opacity:.75;
  max-width:560px;margin-left:auto;margin-right:auto}

/* Sprachumschalter. Auf dem Handy eine Zeile wie die übrigen, ab Tablet als
   kleiner abgesetzter Knopf — er soll auffindbar sein, aber die Navigation
   nicht dominieren. */
.nav a.sprache{font-weight:400}
@media (min-width:900px){
  .nav a.sprache{
    border:1px solid #d4d4d4;border-radius:999px;padding:4px 12px;font-size:14px;
    line-height:1.4;color:#262626
  }
  .nav a.sprache:hover{background:#f4f4f4;text-decoration:none}
}

/* --- 12 Einblenden beim Scrollen ---------------------------------------- */

[data-anim]{opacity:0;transition:opacity .9s ease,transform .9s ease}
[data-anim="up"]{transform:translateY(28px)}
[data-anim="fade"]{transform:none}
[data-anim="rechts"]{transform:translateX(44px)}
[data-anim].sichtbar{opacity:1;transform:none}

/* Ohne JavaScript oder bei abgeschalteter Bewegung bleibt alles sichtbar */
.kein-js [data-anim]{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-anim]{opacity:1!important;transform:none!important;transition:none}
  .btn--puls{animation:none}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

@media print{
  .kopf__zeile,.burger,.nav,.hero,.fuss__links,.btn,.wa-knopf{display:none!important}
  body{font-size:11pt}
  [data-anim]{opacity:1!important;transform:none!important}
}

/* Schnellwahl beliebter Ziele im Preisrechner */
.schnellziele{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
.schnellziel{
  padding:7px 13px;font:inherit;font-size:13px;line-height:1.2;
  background:#f1f1f1;border:1px solid #d5d5d5;border-radius:20px;cursor:pointer;
}
.schnellziel:hover{background:#e6e6e6}

/* Anfrageformular: PLZ schmal, Ort breit — sonst wirkt die Zeile unruhig */
.formular__vor{margin-bottom:24px}
.formular fieldset + fieldset{margin-top:8px}
@media (min-width:560px){
  .feld--plz{grid-template-columns:120px 1fr}
}