/* ===========================================================================
   1. DESIGN TOKENS
   Zentrale Stellschrauben. Wer Farben oder Abstaende aendern will, aendert
   sie hier einmal, nicht verteilt im Dokument.
   =========================================================================== */
:root{
  /* Farbpalette. Blau ist Akzent, keine Flaeche: nur Klickbares und die
     hervorgehobene Empfehlungskarte tragen Blau. */
  --fl-white:      #FFFFFF;
  --fl-off-white:  #F4F5F7;
  --fl-black:      #0A0A0A;
  --fl-grey:       #6B7280;
  --fl-blue:       #0000FF;
  --fl-blue-soft:  #DEDEFF;

  /* Abgeleitete Werte, damit Hover- und Randfarben zur Palette passen. */
  --fl-blue-dark:  #0000C4;   /* Hover auf blauen Flaechen */
  --fl-blue-ink:   #0000A8;   /* Text auf --fl-blue-soft, WCAG AA erfuellt */
  --fl-blue-track: #BEBEF7;   /* ausgeschalteter Schalter auf blauer Flaeche */
  --fl-blue-rgb:   0,0,255;   /* fuer Schatten mit Transparenz */
  --fl-line:       rgba(10,10,10,.10);
  --fl-line-dark:  rgba(255,255,255,.14);
  --fl-ink-soft:   rgba(255,255,255,.72);

  /* Ein einziges Radius-System fuer die ganze Seite:
     Karten 20px, Eingabefelder 12px, alles Interaktive als Pille. */
  --fl-r-card:  20px;
  --fl-r-input: 12px;
  --fl-r-pill:  999px;

  /* Schatten sind zum Untergrund getoent, nie reines Schwarz. */
  --fl-shadow-sm: 0 2px 8px rgba(10,10,10,.05);
  --fl-shadow-md: 0 10px 30px rgba(10,10,10,.08);
  --fl-shadow-lg: 0 24px 70px rgba(10,10,10,.13);

  --fl-maxw: 1240px;
  --fl-gutter: clamp(20px, 5vw, 48px);
  --fl-section-y: clamp(64px, 9vw, 120px);

  --fl-ease: cubic-bezier(.16,1,.3,1);

  /* DSGVO: Standard ist ein reiner System-Font-Stack, es wird nichts von
     einem fremden Server geladen. Wer eine echte geometrische Grotesk moechte,
     hostet sie selbst und traegt sie hier als erste Familie ein.
     Anleitung dazu in README.md, Abschnitt "Schrift austauschen".
     Alternative per CDN waere Google Fonts "Outfit" - dann aber Consent noetig. */
  --fl-font: "Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,
             "Helvetica Neue",Helvetica,Arial,sans-serif;
}

/* ===========================================================================
   2. RESET UND BASIS
   =========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--fl-white);
  color:var(--fl-black);
  font-family:var(--fl-font);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; }
a{ color:inherit; }

h1,h2,h3,h4{
  margin:0;
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.035em;
}
p{ margin:0; }

/* Sichtbarer Fokus auf allem, was per Tastatur erreichbar ist. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, summary:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--fl-blue);
  outline-offset:3px;
  border-radius:4px;
}
/* Auf dunklem Grund braucht der Fokusring einen hellen Kern. */
.fl-dark a:focus-visible, .fl-dark button:focus-visible{
  outline-color:var(--fl-white);
}

.fl-shell{
  width:100%;
  max-width:var(--fl-maxw);
  margin-inline:auto;
  padding-inline:var(--fl-gutter);
}

/* Nur fuer Screenreader sichtbar. */
.fl-sr{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Logo-Ausschnitt. Wird von Navbar UND Footer benutzt, steht deshalb hier
   in der Basis. Die Logodatei enthaelt Bildmarke und Schriftzug in einem
   Quadrat mit viel Weissraum. Bei Navbar-Groesse waere der Schriftzug
   unlesbar, deshalb zeigen wir per Ausschnitt nur die Bildmarke. Die Werte
   gelten fuer genau diese Datei. Wer ein anderes Logo einsetzt, passt sie an
   oder ersetzt den Block durch ein schlichtes img mit fester Hoehe.
   Details in README.md, Abschnitt "Logo austauschen". */
.fl-logomark{
  position:relative; overflow:hidden; flex:0 0 auto;
  width:72px; height:27px;
}
.fl-logomark img{
  position:absolute; max-width:none;
  width:94px; left:-12px; top:-22px;
}

/* Sprungmarke fuer Tastaturnutzer, wird bei Fokus sichtbar. */
.fl-skip{
  position:absolute; left:var(--fl-gutter); top:-100px; z-index:200;
  background:var(--fl-black); color:var(--fl-white);
  padding:12px 20px; border-radius:var(--fl-r-pill);
  text-decoration:none; font-weight:700; font-size:15px;
  transition:top .2s var(--fl-ease);
}
.fl-skip:focus{ top:16px; }

/* ===========================================================================
   3. TYPOGRAFIE-SKALA
   Grosser Kontrast zwischen Headline und Fliesstext, Fliesstext in Grau.
   =========================================================================== */
/* Die H1 ist auf zwei Zeilen ausgelegt. Wer den Text in CONFIG verlaengert,
   sollte den oberen clamp-Wert entsprechend senken. */
.fl-h1{ font-size:clamp(2.4rem, 5.4vw, 4.15rem); }
.fl-h2{ font-size:clamp(2rem, 4.4vw, 3.25rem); }
.fl-h3{ font-size:clamp(1.25rem, 2.2vw, 1.6rem); letter-spacing:-.025em; }

.fl-lead{
  font-size:clamp(1rem, 1.35vw, 1.125rem);
  color:var(--fl-grey);
  max-width:62ch;
}
.fl-dark .fl-lead{ color:var(--fl-ink-soft); }

/* Kopfzeile einer Sektion: Ueberschrift oben, Fliesstext darunter. */
.fl-secthead{ max-width:56ch; margin-bottom:clamp(36px,5vw,60px); }
.fl-secthead .fl-lead{ margin-top:18px; }

/* ===========================================================================
   4. BUTTONS
   Ein Formsystem: alles Interaktive ist eine Pille.
   =========================================================================== */
.fl-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:0 28px;
  border:1px solid transparent; border-radius:var(--fl-r-pill);
  font-size:16px; font-weight:700; letter-spacing:-.01em;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .25s var(--fl-ease), background-color .25s var(--fl-ease),
             box-shadow .25s var(--fl-ease), color .25s var(--fl-ease),
             border-color .25s var(--fl-ease);
}
.fl-btn:hover{ transform:translateY(-2px); }
.fl-btn:active{ transform:translateY(0) scale(.985); }

.fl-btn--primary{
  background:var(--fl-blue); color:var(--fl-white);
  box-shadow:0 8px 22px rgba(var(--fl-blue-rgb),.30);
}
.fl-btn--primary:hover{ background:var(--fl-blue-dark); box-shadow:0 14px 32px rgba(var(--fl-blue-rgb),.38); }

.fl-btn--dark{ background:var(--fl-black); color:var(--fl-white); }
.fl-btn--dark:hover{ background:#1d1d1d; }

/* Sekundaerbutton auf dunklem Grund: heller Rand, damit der Kontrast passt. */
.fl-btn--ghost-light{
  background:rgba(255,255,255,.10); color:var(--fl-white);
  border-color:rgba(255,255,255,.42);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.fl-btn--ghost-light:hover{ background:rgba(255,255,255,.20); border-color:var(--fl-white); }

/* Sekundaerbutton auf hellem Grund. */
.fl-btn--outline{ background:var(--fl-white); color:var(--fl-black); border-color:var(--fl-line); }
.fl-btn--outline:hover{ border-color:var(--fl-black); box-shadow:var(--fl-shadow-md); }

.fl-btn--sm{ min-height:44px; padding:0 20px; font-size:15px; }
.fl-btn--block{ width:100%; }

/* Runder Icon-Button, z. B. Telefon in der Navbar. */
.fl-iconbtn{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; flex:0 0 48px;
  border-radius:var(--fl-r-pill); border:1px solid var(--fl-line);
  background:var(--fl-white); color:var(--fl-black);
  text-decoration:none; cursor:pointer;
  transition:background-color .25s var(--fl-ease), color .25s var(--fl-ease),
             border-color .25s var(--fl-ease), transform .25s var(--fl-ease);
}
.fl-iconbtn:hover{ background:var(--fl-blue); border-color:var(--fl-blue); color:var(--fl-white); transform:translateY(-2px); }
.fl-iconbtn svg{ width:20px; height:20px; }

/* ===========================================================================
   5. NAVBAR
   Schwebende weisse Pille ueber dem Hero.
   =========================================================================== */
.fl-nav{
  position:sticky; top:14px; z-index:120;
  padding-inline:var(--fl-gutter);
  margin-bottom:-78px;           /* Navbar schwebt ueber dem Hero, statt Platz zu belegen */
}
.fl-nav__inner{
  max-width:var(--fl-maxw); margin-inline:auto;
  display:flex; align-items:center; gap:16px;
  height:64px; padding:8px 8px 8px 22px;
  background:var(--fl-white); border-radius:var(--fl-r-pill);
  box-shadow:var(--fl-shadow-md);
}
/* padding-block sorgt fuer eine Trefferflaeche von mindestens 44px. */
.fl-nav__logo{
  display:flex; align-items:center; gap:11px; text-decoration:none; flex:0 0 auto;
  padding-block:9px;
}
.fl-nav__wordmark{ font-size:16px; letter-spacing:-.03em; white-space:nowrap; }
.fl-nav__wordmark b{ font-weight:800; }
.fl-nav__wordmark span{ font-weight:500; color:var(--fl-grey); }

.fl-nav__links{
  display:flex; align-items:center; gap:4px;
  margin:0 auto; padding:0; list-style:none;
}
.fl-nav__links a{
  display:block; padding:10px 14px; border-radius:var(--fl-r-pill);
  font-size:15px; font-weight:600; text-decoration:none; color:var(--fl-black);
  white-space:nowrap;
  transition:background-color .2s var(--fl-ease), color .2s var(--fl-ease);
}
.fl-nav__links a:hover{ background:var(--fl-off-white); color:var(--fl-blue); }

.fl-nav__actions{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }

/* Hamburger, nur unter 1024px sichtbar. */
.fl-nav__burger{
  display:none; align-items:center; justify-content:center;
  width:48px; height:48px; flex:0 0 48px;
  border:1px solid var(--fl-line); border-radius:var(--fl-r-pill);
  background:var(--fl-white); cursor:pointer;
}
.fl-nav__burger svg{ width:22px; height:22px; }

/* Ausklappbares Menue auf kleinen Bildschirmen. */
.fl-nav__panel{
  max-width:var(--fl-maxw); margin:10px auto 0;
  background:var(--fl-white); border-radius:var(--fl-r-card);
  box-shadow:var(--fl-shadow-lg);
  padding:10px; display:none;
}
.fl-nav__panel[data-open="true"]{ display:block; }
.fl-nav__panel ul{ list-style:none; margin:0; padding:0; }
.fl-nav__panel a{
  display:block; padding:14px 16px; min-height:44px;
  font-size:16px; font-weight:600; text-decoration:none;
  border-radius:var(--fl-r-input);
}
.fl-nav__panel a:hover{ background:var(--fl-off-white); }
.fl-nav__panel .fl-btn{ margin-top:8px; }

@media (max-width:1023px){
  .fl-nav__links{ display:none; }
  .fl-nav__burger{ display:inline-flex; }
  .fl-nav__actions .fl-btn{ display:none; }   /* Platz sparen, CTA steht im Panel */
  .fl-nav__inner{ padding-left:16px; }
}
/* Auf schmalen Geraeten wird der Namenszusatz zuerst knapp, dann der Name.
   Die Bildmarke bleibt in jedem Fall stehen. */
@media (max-width:420px){
  .fl-nav__wordmark span{ display:none; }
}
@media (max-width:345px){
  .fl-nav__wordmark{ display:none; }
}

/* ===========================================================================
   6. HERO
   Dunkles Grossflaechenfoto, Headline unten links, Fliesstext unten rechts.
   =========================================================================== */
.fl-hero{
  position:relative; isolation:isolate;
  min-height:min(88dvh, 780px);
  display:flex; align-items:flex-end;
  padding-top:clamp(112px, 14vw, 150px);          /* Platz unter der Navbar */
  padding-bottom:clamp(120px, 14vw, 170px);       /* Platz fuer die Konfigurator-Karte */
  background:var(--fl-black);
  overflow:hidden;
}
.fl-hero__media{ position:absolute; inset:0; z-index:-2; }
.fl-hero__media img{ width:100%; height:100%; object-fit:cover; }
/* Zwei Verlaeufe: einer fuer die Lesbarkeit unten, einer fuer die Navbar oben. */
.fl-hero__media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(10,10,10,.92) 0%, rgba(10,10,10,.62) 42%, rgba(10,10,10,.30) 72%, rgba(10,10,10,.55) 100%),
    linear-gradient(to right, rgba(10,10,10,.55) 0%, rgba(10,10,10,0) 60%);
}
/* Zwei Reihen: Headline ueber die volle Breite, darunter links die Buttons,
   rechts der erklaerende Fliesstext. So bleibt die H1 zweizeilig. */
.fl-hero__grid{ width:100%; }
.fl-hero h1{ color:var(--fl-white); }
.fl-hero__row{
  display:grid; gap:clamp(24px,4vw,56px);
  grid-template-columns:minmax(0,1fr);
  margin-top:clamp(28px,3.5vw,44px);
}
@media (min-width:900px){
  .fl-hero__row{ grid-template-columns:minmax(0,1fr) minmax(0,26rem); align-items:end; }
}
.fl-hero__sub{
  color:var(--fl-ink-soft); font-size:clamp(1rem,1.4vw,1.15rem);
  max-width:44ch;
}
@media (min-width:900px){
  .fl-hero__sub{ padding-bottom:6px; }
}
.fl-hero__cta{ display:flex; flex-wrap:wrap; gap:12px; }

/* Vertrauens-Chips direkt unter den Buttons. */
.fl-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:26px; padding:0; list-style:none; }
.fl-chips li{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 16px 8px 12px; border-radius:var(--fl-r-pill);
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.20);
  color:var(--fl-white); font-size:14px; font-weight:600;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.fl-chips svg{ width:16px; height:16px; flex:0 0 16px; opacity:.85; }

/* ===========================================================================
   7. KONFIGURATOR
   Weisse Karte, die den Hero unten ueberlappt. Vier Schritte ohne Reload,
   durchgehend sichtbare Preissumme.
   =========================================================================== */
.fl-konf-wrap{
  position:relative; z-index:10;
  padding-bottom:var(--fl-section-y);
  background:linear-gradient(to bottom, transparent 0 90px, var(--fl-off-white) 90px);
}
.fl-konf{
  margin-top:clamp(-150px, -11vw, -80px);
  background:var(--fl-white);
  border-radius:var(--fl-r-card);
  box-shadow:var(--fl-shadow-lg);
  overflow:hidden;
}

/* --- Kopf mit Schrittanzeige --- */
.fl-konf__head{ padding:20px clamp(18px,3vw,32px) 0; border-bottom:1px solid var(--fl-line); }
.fl-konf__steps{
  display:flex; gap:4px; margin:0; padding:0; list-style:none;
  overflow-x:auto; scrollbar-width:none;
}
.fl-konf__steps::-webkit-scrollbar{ display:none; }
.fl-konf__step{
  display:flex; align-items:center; gap:9px;
  min-height:44px; padding:10px 16px;
  background:none; border:0; border-bottom:2px solid transparent;
  font-size:15px; font-weight:600; color:var(--fl-grey);
  cursor:pointer; white-space:nowrap;
  transition:color .2s var(--fl-ease), border-color .2s var(--fl-ease);
}
.fl-konf__step:disabled{ cursor:default; opacity:.55; }
.fl-konf__step[aria-current="step"]{ color:var(--fl-black); border-bottom-color:var(--fl-blue); }
.fl-konf__num{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; flex:0 0 24px; border-radius:var(--fl-r-pill);
  background:var(--fl-off-white); color:var(--fl-grey);
  font-size:13px; font-weight:700;
  transition:background-color .2s var(--fl-ease), color .2s var(--fl-ease);
}
.fl-konf__step[aria-current="step"] .fl-konf__num{ background:var(--fl-blue); color:var(--fl-white); }
.fl-konf__step.is-done .fl-konf__num{ background:var(--fl-blue-soft); color:var(--fl-blue); }
.fl-konf__step.is-done .fl-konf__num svg{ width:14px; height:14px; }

/* Auf schmalen Schirmen passen vier Beschriftungen nicht nebeneinander.
   Dann bleiben die Ziffern stehen und nur der aktive Schritt wird benannt. */
@media (max-width:560px){
  .fl-konf__step{ padding:10px 12px; }
  .fl-konf__step > span:not(.fl-konf__num){ display:none; }
  .fl-konf__step[aria-current="step"] > span:not(.fl-konf__num){ display:inline; }
}

/* --- Fortschrittsbalken --- */
.fl-konf__bar{ height:3px; background:var(--fl-off-white); }
.fl-konf__bar span{
  display:block; height:100%; width:25%;
  background:var(--fl-blue);
  transition:width .45s var(--fl-ease);
}

/* --- Inhalt --- */
.fl-konf__body{ padding:clamp(24px,3.4vw,38px) clamp(18px,3vw,32px); }
.fl-konf__title{ font-size:clamp(1.3rem,2.4vw,1.75rem); letter-spacing:-.03em; }
.fl-konf__hint{ color:var(--fl-grey); font-size:15px; margin-top:8px; }
.fl-konf__panel > * + *{ margin-top:0; }
.fl-konf__panel .fl-optgrid{ margin-top:24px; }

/* --- Auswahlkacheln (Fahrzeug, Paket) --- */
.fl-optgrid{ display:grid; gap:12px; grid-template-columns:1fr; }
@media (min-width:720px){ .fl-optgrid{ grid-template-columns:repeat(3,1fr); } }

.fl-opt{ position:relative; display:block; cursor:pointer; }
.fl-opt input{
  position:absolute; opacity:0; width:1px; height:1px;
  margin:0; pointer-events:none;
}
.fl-opt__box{
  display:flex; flex-direction:column; gap:6px;
  min-height:44px; height:100%; padding:18px 18px 20px;
  border:1.5px solid var(--fl-line); border-radius:var(--fl-r-input);
  background:var(--fl-white);
  transition:border-color .2s var(--fl-ease), background-color .2s var(--fl-ease),
             box-shadow .2s var(--fl-ease), transform .2s var(--fl-ease);
}
.fl-opt:hover .fl-opt__box{ border-color:var(--fl-grey); transform:translateY(-2px); }
.fl-opt input:checked + .fl-opt__box{
  border-color:var(--fl-blue); background:var(--fl-blue-soft);
  box-shadow:0 6px 20px rgba(var(--fl-blue-rgb),.18);
}
.fl-opt input:focus-visible + .fl-opt__box{ outline:2px solid var(--fl-blue); outline-offset:3px; }
.fl-opt__icon{ color:var(--fl-black); margin-bottom:4px; }
.fl-opt__icon svg{ width:26px; height:26px; }
.fl-opt__name{ font-weight:700; font-size:17px; letter-spacing:-.02em; }
.fl-opt__meta{ font-size:14px; color:var(--fl-grey); }
.fl-opt input:checked + .fl-opt__box .fl-opt__meta{ color:var(--fl-blue-ink); }
.fl-opt__price{ margin-top:auto; padding-top:12px; font-size:22px; font-weight:800; letter-spacing:-.03em; }

/* --- Zusatzleistungen als Schalter --- */
.fl-addons{ display:grid; gap:12px; margin-top:24px; }
.fl-addon{
  display:flex; align-items:center; gap:16px;
  padding:16px 18px; cursor:pointer;
  border:1.5px solid var(--fl-line); border-radius:var(--fl-r-input);
  transition:border-color .2s var(--fl-ease), background-color .2s var(--fl-ease);
}
.fl-addon:hover{ border-color:var(--fl-grey); }
.fl-addon input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none; }
.fl-addon:has(input:checked){ border-color:var(--fl-blue); background:var(--fl-blue-soft); }
.fl-addon:has(input:focus-visible){ outline:2px solid var(--fl-blue); outline-offset:3px; }
.fl-addon__text{ flex:1 1 auto; min-width:0; }
.fl-addon__name{ font-weight:700; font-size:16px; }
.fl-addon__desc{ font-size:14px; color:var(--fl-grey); margin-top:2px; }
.fl-addon:has(input:checked) .fl-addon__desc{ color:var(--fl-blue-ink); }
.fl-addon__price{ font-weight:800; font-size:17px; white-space:nowrap; }
/* Schalter, rein visuell. Der echte Zustand steckt in der Checkbox. */
.fl-switch{
  flex:0 0 48px; width:48px; height:28px; border-radius:var(--fl-r-pill);
  background:#D7DAE1; position:relative;
  transition:background-color .2s var(--fl-ease);
}
.fl-switch::after{
  content:""; position:absolute; top:3px; left:3px;
  width:22px; height:22px; border-radius:var(--fl-r-pill);
  background:var(--fl-white); box-shadow:var(--fl-shadow-sm);
  transition:transform .25s var(--fl-ease);
}
.fl-addon:has(input:checked) .fl-switch{ background:var(--fl-blue); }
.fl-addon:has(input:checked) .fl-switch::after{ transform:translateX(20px); }

/* --- Formularfelder --- */
.fl-fields{ display:grid; gap:18px; grid-template-columns:1fr; margin-top:24px; }
@media (min-width:720px){
  .fl-fields{ grid-template-columns:1fr 1fr; }
  .fl-field--wide{ grid-column:1 / -1; }
}
.fl-field label{ display:block; font-size:14px; font-weight:700; margin-bottom:7px; }
.fl-field input, .fl-field select{
  width:100%; min-height:52px; padding:0 15px;
  font:inherit; font-size:16px; color:var(--fl-black);
  background:var(--fl-white);
  border:1.5px solid #D7DAE1; border-radius:var(--fl-r-input);
  transition:border-color .2s var(--fl-ease), box-shadow .2s var(--fl-ease);
}
.fl-field select{ appearance:none; padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:18px;
}
.fl-field input::placeholder{ color:#9AA1AE; }   /* 4.6:1 auf Weiss */
.fl-field input:focus, .fl-field select:focus{ outline:none; border-color:var(--fl-blue); box-shadow:0 0 0 3px rgba(var(--fl-blue-rgb),.20); }
.fl-field .fl-help{ font-size:13px; color:var(--fl-grey); margin-top:6px; }
.fl-field.is-error input, .fl-field.is-error select{ border-color:#C22A2A; }
.fl-err{ display:none; font-size:13.5px; font-weight:600; color:#B3211F; margin-top:6px; }
.fl-field.is-error .fl-err{ display:flex; align-items:center; gap:6px; }
.fl-err svg{ width:15px; height:15px; flex:0 0 15px; }

/* Neukundenrabatt im vierten Schritt. Gleiche Bauart wie die Zusatzleistung,
   aber blau abgesetzt, weil er Geld spart statt welches zu kosten. */
.fl-promo-opt{
  display:flex; align-items:center; gap:16px;
  margin-top:24px; padding:16px 18px; cursor:pointer;
  border:1.5px solid var(--fl-blue); border-radius:var(--fl-r-input);
  background:var(--fl-blue-soft);
}
.fl-promo-opt input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none; }
.fl-promo-opt:has(input:focus-visible){ outline:2px solid var(--fl-blue); outline-offset:3px; }
.fl-promo-opt .fl-switch{ background:var(--fl-blue-track); }
.fl-promo-opt:has(input:checked) .fl-switch{ background:var(--fl-blue); }
.fl-promo-opt:has(input:checked) .fl-switch::after{ transform:translateX(20px); }
.fl-promo-opt__text{ display:grid; gap:2px; min-width:0; }
.fl-promo-opt__name{ font-weight:700; font-size:16px; }
.fl-promo-opt__desc{ font-size:14px; color:var(--fl-blue-ink); }

/* Zustimmung zur Datenschutzerklaerung */
.fl-consent{ display:flex; gap:12px; align-items:flex-start; margin-top:22px; cursor:pointer; }
.fl-consent input{ width:22px; height:22px; flex:0 0 22px; margin:1px 0 0; accent-color:var(--fl-blue); }
.fl-consent span{ font-size:14.5px; color:var(--fl-grey); line-height:1.5; }
.fl-consent a{ color:var(--fl-blue); font-weight:600; }
.fl-consent.is-error span{ color:#B3211F; }

/* --- Fuss mit Live-Preis und Navigation --- */
.fl-konf__foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:16px;
  padding:20px clamp(18px,3vw,32px);
  background:var(--fl-off-white); border-top:1px solid var(--fl-line);
}
.fl-konf__sum{ flex:1 1 220px; min-width:0; }
.fl-konf__sumlabel{ font-size:13px; font-weight:700; color:var(--fl-grey); text-transform:uppercase; letter-spacing:.08em; }
.fl-konf__total{ font-size:clamp(1.75rem,3vw,2.25rem); font-weight:800; letter-spacing:-.04em; line-height:1.1; }
.fl-konf__detail{ font-size:14px; color:var(--fl-grey); margin-top:2px; }
.fl-konf__nav{ display:flex; gap:10px; flex:0 0 auto; }
@media (max-width:560px){
  .fl-konf__foot{ flex-direction:column; align-items:stretch; gap:14px; }
  /* Ohne diese Zeile zieht sich der Preisblock durch flex-grow ueber die
     gesamte freie Hoehe und reisst eine grosse Luecke zum Weiter-Knopf. */
  .fl-konf__sum{ flex:0 0 auto; }
  .fl-konf__nav{ flex-direction:row; }
  .fl-konf__nav .fl-btn{ flex:1 1 auto; }
}

/* --- Hinweisleiste zum Neukundenangebot ---
   Sitzt direkt unter der Rechnerkarte, deshalb steht sie in diesem Block und
   nicht bei den Paketen: beide Sektionen koennen einzeln eingebettet sein. */
.fl-promobar{
  display:flex; flex-wrap:wrap; align-items:center; gap:20px;
  margin-top:20px; padding:clamp(20px,2.6vw,28px);
  border:1.5px solid var(--fl-blue); border-radius:var(--fl-r-card);
  background:var(--fl-blue-soft);
}
.fl-promobar__num{
  font-size:clamp(2rem,4vw,2.6rem); font-weight:800;
  letter-spacing:-.045em; line-height:1; color:var(--fl-blue);
}
.fl-promobar__text{ display:grid; gap:4px; }
.fl-promobar__text strong{ font-size:17px; letter-spacing:-.02em; }
.fl-promobar__text span{ font-size:15px; color:var(--fl-blue-ink); }

@media (max-width:560px){
  .fl-promobar{ gap:14px; padding:18px 20px; margin-top:16px; }
  .fl-promobar__num{ font-size:1.75rem; }
  .fl-promobar__text strong{ font-size:15.5px; }
  .fl-promobar__text span{ font-size:14px; }
}

/* --- Bestaetigung nach dem Senden --- */
.fl-konf__done{ text-align:center; padding:clamp(28px,4vw,48px) 8px; }
.fl-konf__done-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:64px; height:64px; border-radius:var(--fl-r-pill);
  background:var(--fl-blue-soft); color:var(--fl-blue); margin-bottom:20px;
}
.fl-konf__done-icon svg{ width:30px; height:30px; }
.fl-konf__done h3{ font-size:clamp(1.4rem,2.6vw,1.9rem); }
.fl-konf__done p{ color:var(--fl-grey); margin-top:12px; max-width:46ch; margin-inline:auto; }
.fl-konf__fallback{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:24px;
}

/* ===========================================================================
   8. ALLGEMEINE SEKTIONEN
   =========================================================================== */
.fl-sect{ padding-block:var(--fl-section-y); }
.fl-sect--tight{ padding-block:clamp(48px,6vw,80px); }
.fl-sect--offwhite{ background:var(--fl-off-white); }
.fl-dark{ background:var(--fl-black); color:var(--fl-white); }

/* ===========================================================================
   9. PAKETE
   Drei Preiskarten. Genau eine traegt die Empfehlung in --blue-soft.
   =========================================================================== */
.fl-pricing{ display:grid; gap:20px; grid-template-columns:1fr; align-items:stretch; }
@media (min-width:880px){ .fl-pricing{ grid-template-columns:repeat(3,1fr); } }

.fl-price{
  display:flex; flex-direction:column;
  padding:clamp(24px,3vw,34px);
  background:var(--fl-white); border:1px solid var(--fl-line);
  border-radius:var(--fl-r-card);
  transition:transform .3s var(--fl-ease), box-shadow .3s var(--fl-ease);
}
.fl-price:hover{ transform:translateY(-4px); box-shadow:var(--fl-shadow-md); }
.fl-price--reco{
  background:var(--fl-blue-soft); border-color:transparent;
  box-shadow:0 18px 50px rgba(var(--fl-blue-rgb),.18);
}
.fl-price__badge{
  display:inline-flex; align-self:flex-start; margin-bottom:14px;
  padding:6px 14px; border-radius:var(--fl-r-pill);
  background:var(--fl-blue); color:var(--fl-white);
  font-size:12.5px; font-weight:700; letter-spacing:.02em;
}
.fl-price__name{ font-size:1.5rem; font-weight:800; letter-spacing:-.03em; }
.fl-price__dur{ font-size:14.5px; color:var(--fl-grey); margin-top:4px; }
.fl-price--reco .fl-price__dur{ color:var(--fl-blue-ink); }
.fl-price__amount{
  font-size:clamp(2.4rem,4.5vw,3rem); font-weight:800;
  letter-spacing:-.045em; line-height:1.1; margin-top:18px;
}
.fl-price__sum{ font-size:15px; color:var(--fl-grey); margin-top:8px; }
.fl-price--reco .fl-price__sum{ color:var(--fl-blue-ink); }
/* Preise je Fahrzeugklasse als kompakte Liste statt als breite Tabelle.
   Eine echte Matrix waere ab 320px nicht mehr lesbar. */
.fl-price__matrix{
  margin:20px 0 0; padding:16px 0 0;
  border-top:1px solid var(--fl-line);
  display:grid; gap:8px;
}
.fl-price--reco .fl-price__matrix{ border-top-color:rgba(66,87,168,.28); }
.fl-price__matrix > div{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
}
.fl-price__matrix dt{ font-size:14.5px; color:var(--fl-grey); }
.fl-price--reco .fl-price__matrix dt{ color:var(--fl-blue-ink); }
.fl-price__matrix dd{ margin:0; font-size:15.5px; font-weight:700; white-space:nowrap; }

/* Waagerechte Variante fuer die Zusatzleistung unter den Karten. */
.fl-price__matrix--row{
  border-top:0; padding-top:0; margin:0;
  grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px 24px;
}
.fl-price__matrix--row > div{ flex-direction:column; align-items:flex-start; gap:2px; }

/* Zusatzleistung als eigene Zeile unter dem Kartenraster. */
.fl-addonrow{
  display:grid; gap:20px; align-items:center;
  grid-template-columns:1fr;
  margin-top:20px; padding:clamp(20px,2.6vw,28px);
  background:var(--fl-white); border:1px solid var(--fl-line);
  border-radius:var(--fl-r-card);
}
@media (min-width:760px){ .fl-addonrow{ grid-template-columns:1.35fr .95fr; } }
.fl-addonrow h3{ font-size:1.15rem; letter-spacing:-.025em; }
.fl-addonrow p{ color:var(--fl-grey); font-size:15px; margin-top:8px; max-width:52ch; }

.fl-pricenote{ margin-top:18px; font-size:14px; color:var(--fl-grey); }

.fl-price__list{ list-style:none; margin:24px 0 28px; padding:0; display:grid; gap:11px; }
.fl-price__list li{ display:flex; gap:11px; font-size:15px; line-height:1.45; }
.fl-price__list svg{ width:19px; height:19px; flex:0 0 19px; margin-top:1px; color:var(--fl-blue); }
.fl-price .fl-btn{ margin-top:auto; }

/* ===========================================================================
   10. ERGEBNISSE
   Bildraster im Hochformat, weil alle vorhandenen Aufnahmen hochkant sind.
   =========================================================================== */
.fl-gallery{ display:grid; gap:16px; grid-template-columns:repeat(2,1fr); }
@media (min-width:900px){ .fl-gallery{ grid-template-columns:repeat(4,1fr); } }

.fl-gcard{
  position:relative; display:block; width:100%; padding:0;
  border:0; background:none; cursor:pointer; text-align:left;
  border-radius:var(--fl-r-card); overflow:hidden;
  aspect-ratio:3 / 4;                     /* feste Proportion, kein Nachrutschen */
  transition:transform .35s var(--fl-ease), box-shadow .35s var(--fl-ease);
}
.fl-gcard:hover{ transform:translateY(-4px); box-shadow:var(--fl-shadow-lg); }
.fl-gcard img{ width:100%; height:100%; object-fit:cover; }
.fl-gcard::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(10,10,10,.60) 0%, rgba(10,10,10,0) 38%,
             rgba(10,10,10,0) 58%, rgba(10,10,10,.55) 100%);
}
.fl-gcard__title{
  position:absolute; top:18px; left:18px; right:18px; z-index:1;
  color:var(--fl-white); font-weight:700; font-size:16px; letter-spacing:-.02em;
  text-shadow:0 1px 12px rgba(0,0,0,.5);
}
.fl-gcard__go{
  position:absolute; right:14px; bottom:14px; z-index:1;
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:var(--fl-r-pill);
  background:var(--fl-white); color:var(--fl-black);
  transition:background-color .3s var(--fl-ease), color .3s var(--fl-ease);
}
.fl-gcard:hover .fl-gcard__go, .fl-gcard:focus-visible .fl-gcard__go{
  background:var(--fl-blue); color:var(--fl-white);
}
.fl-gcard__go svg{ width:19px; height:19px; }

/* --- Lightbox --- */
.fl-lb{
  position:fixed; inset:0; z-index:300;
  display:none; align-items:center; justify-content:center;
  padding:clamp(16px,4vw,48px);
  background:rgba(10,10,10,.92);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.fl-lb[data-open="true"]{ display:flex; }
.fl-lb__img{ max-width:100%; max-height:82vh; border-radius:var(--fl-r-card); object-fit:contain; }
.fl-lb__cap{
  position:absolute; left:0; right:0; bottom:clamp(16px,3vw,32px);
  text-align:center; color:var(--fl-white); font-size:15px; font-weight:600;
}
.fl-lb__btn{
  position:absolute; display:flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:var(--fl-r-pill);
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28);
  color:var(--fl-white); cursor:pointer;
  transition:background-color .2s var(--fl-ease);
}
.fl-lb__btn:hover{ background:rgba(255,255,255,.28); }
.fl-lb__btn svg{ width:22px; height:22px; }
.fl-lb__close{ top:clamp(14px,3vw,28px); right:clamp(14px,3vw,28px); }
.fl-lb__prev{ left:clamp(10px,2vw,28px); top:50%; transform:translateY(-50%); }
.fl-lb__next{ right:clamp(10px,2vw,28px); top:50%; transform:translateY(-50%); }

/* ===========================================================================
   11. ABLAUF
   Vier Schritte auf einer durchgehenden Linie.
   =========================================================================== */
.fl-steps{ display:grid; gap:32px; grid-template-columns:1fr; counter-reset:fl-step; }
@media (min-width:820px){ .fl-steps{ grid-template-columns:repeat(4,1fr); gap:28px; } }
.fl-step{ position:relative; padding-top:26px; }
/* Die Linie laeuft nur auf breiten Schirmen durch. */
@media (min-width:820px){
  .fl-step::before{
    content:""; position:absolute; top:11px; left:0; right:-28px; height:1px;
    background:var(--fl-line);
  }
  .fl-step:last-child::before{ right:0; }
}
.fl-step__dot{
  position:absolute; top:0; left:0;
  display:flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:var(--fl-r-pill);
  background:var(--fl-blue); color:var(--fl-white);
  font-size:12px; font-weight:800;
}
.fl-step h3{ font-size:1.15rem; letter-spacing:-.025em; }
.fl-step p{ color:var(--fl-grey); font-size:15.5px; margin-top:9px; }

/* ===========================================================================
   12. VORTEILS-LEISTE
   Komplett schwarz, vier Spalten, Icon links, zweizeiliger Text rechts.
   =========================================================================== */
.fl-usps{ display:grid; gap:28px; grid-template-columns:1fr; }
@media (min-width:640px){ .fl-usps{ grid-template-columns:repeat(2,1fr); gap:36px 32px; } }
@media (min-width:1024px){ .fl-usps{ grid-template-columns:repeat(4,1fr); } }
.fl-usp{ display:flex; gap:16px; }
.fl-usp__icon{ flex:0 0 26px; color:var(--fl-white); opacity:.9; }
.fl-usp__icon svg{ width:26px; height:26px; }
.fl-usp h3{ font-size:16.5px; font-weight:700; letter-spacing:-.02em; }
.fl-usp p{ color:var(--fl-ink-soft); font-size:14.5px; margin-top:6px; line-height:1.5; }

/* ===========================================================================
   13. ÜBER UNS
   =========================================================================== */
.fl-about{ display:grid; gap:clamp(28px,4vw,60px); grid-template-columns:1fr; align-items:center; }
@media (min-width:900px){ .fl-about{ grid-template-columns:1fr .8fr; } }
/* Ohne Bild braucht der Abschnitt keine zweite Spalte. */
.fl-about--nurtext{ grid-template-columns:minmax(0,1fr); }
.fl-about--nurtext .fl-lead{ max-width:62ch; }
.fl-about__media{ border-radius:var(--fl-r-card); overflow:hidden; aspect-ratio:4 / 5; }
.fl-about__media img{ width:100%; height:100%; object-fit:cover; }
.fl-about p + p{ margin-top:16px; }
.fl-about .fl-btn{ margin-top:30px; }

/* ===========================================================================
   14. FAQ
   Eigenes Akkordeon mit aria-expanded statt <details>, damit sich das
   Aufklappen gleich verhaelt und die Zeichen frei gestaltbar bleiben.
   =========================================================================== */
.fl-faq{ max-width:820px; margin-inline:auto; border-top:1px solid var(--fl-line); }
.fl-faq__item{ border-bottom:1px solid var(--fl-line); }
.fl-faq__q{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  width:100%; min-height:44px; padding:22px 0;
  background:none; border:0; cursor:pointer; text-align:left;
  font-size:clamp(1.02rem,1.6vw,1.15rem); font-weight:700; letter-spacing:-.02em;
}
.fl-faq__q:hover{ color:var(--fl-blue); }
.fl-faq__sign{
  position:relative; flex:0 0 34px; width:34px; height:34px;
  border-radius:var(--fl-r-pill); background:var(--fl-off-white);
  transition:background-color .25s var(--fl-ease), transform .3s var(--fl-ease);
}
.fl-faq__sign::before, .fl-faq__sign::after{
  content:""; position:absolute; top:50%; left:50%;
  width:13px; height:2px; border-radius:2px; background:var(--fl-black);
  transform:translate(-50%,-50%);
  transition:transform .3s var(--fl-ease), background-color .25s var(--fl-ease);
}
.fl-faq__sign::after{ transform:translate(-50%,-50%) rotate(90deg); }
.fl-faq__q[aria-expanded="true"] .fl-faq__sign{ background:var(--fl-blue); }
.fl-faq__q[aria-expanded="true"] .fl-faq__sign::before,
.fl-faq__q[aria-expanded="true"] .fl-faq__sign::after{ background:var(--fl-white); }
.fl-faq__q[aria-expanded="true"] .fl-faq__sign::after{ transform:translate(-50%,-50%) rotate(0deg); }
.fl-faq__a{ display:none; padding:0 54px 26px 0; color:var(--fl-grey); font-size:16px; }
.fl-faq__a.is-open{ display:block; }
.fl-faq__a p + p{ margin-top:12px; }

/* ===========================================================================
   15. ABSCHLUSS-CTA
   =========================================================================== */
.fl-final{ background:var(--fl-blue); color:var(--fl-white); }
.fl-final__inner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:24px; padding-block:clamp(36px,5vw,56px);
}
.fl-final h2{ font-size:clamp(1.6rem,3vw,2.3rem); max-width:22ch; }
.fl-final .fl-btn{ background:var(--fl-white); color:var(--fl-blue); }
.fl-final .fl-btn:hover{ background:var(--fl-black); color:var(--fl-white); }

/* ===========================================================================
   16. FOOTER
   =========================================================================== */
.fl-footer{ background:var(--fl-black); color:var(--fl-white); padding-block:clamp(52px,7vw,80px) 32px; }
.fl-footer__grid{ display:grid; gap:clamp(36px,5vw,56px); grid-template-columns:1fr; }
@media (min-width:820px){ .fl-footer__grid{ grid-template-columns:1.3fr repeat(3,.9fr); } }
.fl-footer__logo{ display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.fl-footer__logo .fl-logomark{ width:86px; height:32px; }
.fl-footer__logo .fl-logomark img{ width:113px; left:-14px; top:-27px; }
.fl-footer__wordmark{ font-size:18px; letter-spacing:-.03em; }
.fl-footer__wordmark b{ font-weight:800; }
.fl-footer__wordmark span{ font-weight:500; color:var(--fl-ink-soft); }
.fl-footer p{ color:var(--fl-ink-soft); font-size:15px; max-width:38ch; }
.fl-footer h3{ font-size:14px; font-weight:700; margin-bottom:16px; }
.fl-footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.fl-footer a{ color:var(--fl-ink-soft); text-decoration:none; font-size:15px; }
.fl-footer a:hover{ color:var(--fl-white); }
.fl-footer__contact{ display:grid; gap:12px; margin-top:22px; }
.fl-footer__contact a, .fl-footer__contact span{
  display:flex; align-items:center; gap:10px; color:var(--fl-white); font-size:15.5px; font-weight:600;
}
.fl-footer__contact svg{ width:18px; height:18px; flex:0 0 18px; opacity:.7; }
.fl-footer__bottom{
  display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between;
  margin-top:clamp(40px,5vw,60px); padding-top:26px;
  border-top:1px solid var(--fl-line-dark);
  font-size:14px; color:var(--fl-ink-soft);
}
.fl-footer__bottom nav{ display:flex; flex-wrap:wrap; gap:24px; }

/* ===========================================================================
   17. SCROLL-REVEAL
   Wird per IntersectionObserver freigeschaltet. Ohne JS bleibt alles sichtbar,
   weil die Startwerte erst gesetzt werden, wenn das Skript laeuft.
   =========================================================================== */
[data-fl-reveal]{
  opacity:1;
}
.fl-js [data-fl-reveal]{
  opacity:0; transform:translateY(22px);
  transition:opacity .7s var(--fl-ease), transform .7s var(--fl-ease);
  transition-delay:var(--fl-delay, 0ms);
}
.fl-js [data-fl-reveal].is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .fl-js [data-fl-reveal]{ opacity:1; transform:none; transition:none; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

/* ===========================================================================
   19. VERSANDKNOEPFE, LADEZUSTAND, FEHLER
   =========================================================================== */
/* WhatsApp-Knopf. Bewusst in Schwarz statt im WhatsApp-Gruen, damit die
   Seite bei einem einzigen Akzentton bleibt. Erkannt wird er am Zeichen. */
.fl-btn--wa{ background:var(--fl-black); color:var(--fl-white); }
.fl-btn--wa:hover{ background:#1d1d1d; }

.fl-btn.is-busy{ opacity:.75; cursor:progress; }
.fl-btn:disabled{ transform:none; }

.fl-spin{
  width:17px; height:17px; flex:0 0 17px;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:var(--fl-white);
  border-radius:var(--fl-r-pill);
  animation:fl-turn .7s linear infinite;
}
@keyframes fl-turn{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .fl-spin{ animation-duration:1.6s; }
}

/* Fehlerkasten, wenn der Versand per E-Mail nicht durchgeht. */
.fl-senderr{
  padding:18px clamp(18px,3vw,32px) 22px;
  background:#FDF2F2; border-top:1px solid rgba(179,33,31,.22);
}
.fl-senderr p{
  display:flex; gap:9px; align-items:flex-start;
  font-size:15px; font-weight:600; color:#8E1B19; margin-bottom:14px;
}
.fl-senderr svg{ flex:0 0 16px; margin-top:3px; }
.fl-senderr__ways{ display:flex; flex-wrap:wrap; gap:10px; }

/* ===========================================================================
   20. GOOGLE-BEWERTUNGEN
   Wird nur gezeichnet, wenn in CONFIG.google eine Adresse steht.
   =========================================================================== */
.fl-google{
  display:flex; flex-wrap:wrap; align-items:center; gap:clamp(20px,3vw,36px);
  padding:clamp(24px,3.4vw,38px);
  background:var(--fl-white); border:1px solid var(--fl-line);
  border-radius:var(--fl-r-card); box-shadow:var(--fl-shadow-sm);
}
.fl-google__mark{ flex:0 0 auto; display:flex; align-items:center; gap:12px; }
.fl-google__mark svg{ width:34px; height:34px; }
.fl-google__text{ flex:1 1 260px; min-width:0; }
.fl-google__text h3{ font-size:1.15rem; letter-spacing:-.025em; }
.fl-google__text p{ color:var(--fl-grey); font-size:15px; margin-top:7px; max-width:52ch; }
.fl-google__actions{ display:flex; flex-wrap:wrap; gap:10px; flex:0 0 auto; }

/* ===========================================================================
   21. UNTERSEITEN
   Navigationsleiste ohne Hero darunter, kompakter Seitenkopf, Fliesstext.
   =========================================================================== */
/* Auf der Startseite schwebt die Leiste ueber dem dunklen Hero. Auf allen
   anderen Seiten gibt es keinen Hero, dort darf sie keinen Platz wegziehen. */
.fl-nav--solid{ margin-bottom:0; padding-block:14px; }

.fl-pagehead{
  background:var(--fl-black); color:var(--fl-white);
  padding-block:clamp(44px,7vw,84px) clamp(40px,6vw,72px);
}
.fl-pagehead h1{
  font-size:clamp(2rem,4.6vw,3.4rem); color:var(--fl-white);
  max-width:20ch;
}
.fl-pagehead .fl-lead{ margin-top:20px; color:var(--fl-ink-soft); }
.fl-pagehead .fl-chips{ margin-top:28px; }
.fl-pagehead__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }

/* Brotkrumenpfad, hilft dem Besucher und der Suchmaschine bei der Einordnung. */
.fl-crumb{ font-size:14px; color:var(--fl-ink-soft); margin-bottom:20px; }
.fl-crumb ol{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0; }
.fl-crumb li::after{ content:"›"; margin-left:8px; opacity:.5; }
.fl-crumb li:last-child::after{ content:""; margin:0; }
.fl-crumb a{ color:var(--fl-ink-soft); text-decoration:none; }
.fl-crumb a:hover{ color:var(--fl-white); text-decoration:underline; }
.fl-crumb [aria-current]{ color:var(--fl-white); font-weight:600; }

/* Fliesstext auf den Unterseiten. */
.fl-prose{ max-width:70ch; }
.fl-prose h2{ font-size:clamp(1.5rem,3vw,2rem); margin-top:clamp(38px,5vw,56px); }
.fl-prose h2:first-child{ margin-top:0; }
.fl-prose h3{ font-size:1.2rem; margin-top:32px; }
.fl-prose p{ color:var(--fl-grey); font-size:17px; margin-top:16px; }
.fl-prose ul{ margin:16px 0 0; padding-left:22px; color:var(--fl-grey); }
.fl-prose li{ margin-bottom:9px; }
.fl-prose a{ color:var(--fl-blue); font-weight:600; }
.fl-prose strong{ color:var(--fl-black); font-weight:700; }

/* Zweispaltig: Text links, Randspalte mit Preisen rechts. */
.fl-split{ display:grid; gap:clamp(32px,4vw,56px); grid-template-columns:1fr; align-items:start; }
@media (min-width:960px){ .fl-split{ grid-template-columns:minmax(0,1.5fr) minmax(0,.85fr); } }
.fl-aside{
  padding:clamp(22px,2.8vw,30px);
  background:var(--fl-off-white); border-radius:var(--fl-r-card);
  position:sticky; top:96px;
}
.fl-aside h2{ font-size:1.25rem; letter-spacing:-.025em; }
.fl-aside dl{ margin:18px 0 0; display:grid; gap:10px; }
.fl-aside dl > div{ display:flex; justify-content:space-between; gap:14px; align-items:baseline; }
.fl-aside dt{ font-size:15px; color:var(--fl-grey); }
.fl-aside dd{ margin:0; font-weight:700; font-size:15.5px; white-space:nowrap; }
.fl-aside .fl-btn{ margin-top:22px; }
.fl-aside__note{ font-size:13.5px; color:var(--fl-grey); margin-top:14px; }

/* Ortsliste auf den Stadtseiten. */
.fl-places{ display:flex; flex-wrap:wrap; gap:9px; margin-top:20px; padding:0; list-style:none; }
.fl-places li{
  padding:8px 15px; border-radius:var(--fl-r-pill);
  background:var(--fl-off-white); font-size:14.5px; font-weight:600;
}

/* Seite nicht gefunden. */
.fl-404{ text-align:center; padding-block:clamp(70px,12vw,140px); }
.fl-404 h1{ font-size:clamp(3rem,10vw,6rem); }
.fl-404 p{ color:var(--fl-grey); margin:18px auto 32px; max-width:44ch; }
.fl-404 .fl-btn{ margin:0 6px; }

/* ===========================================================================
   22. SCHWEBENDER KNOPF ZU DEN PREISEN
   Immer sichtbar, damit der Weg zum Angebot nie mehr als einen Tipp entfernt
   ist. Blendet sich aus, sobald die Paketsektion ohnehin im Bild ist.
   =========================================================================== */
.fl-fab{
  position:fixed; z-index:110;
  right:max(16px, env(safe-area-inset-right));
  bottom:calc(16px + env(safe-area-inset-bottom));
  display:inline-flex; align-items:center; gap:9px;
  min-height:52px; padding:0 24px;
  border-radius:var(--fl-r-pill);
  background:var(--fl-blue); color:var(--fl-white);
  font-size:15.5px; font-weight:700; letter-spacing:-.01em;
  text-decoration:none; white-space:nowrap;
  box-shadow:0 10px 30px rgba(var(--fl-blue-rgb),.42);
  transition:opacity .3s var(--fl-ease), transform .3s var(--fl-ease),
             visibility .3s var(--fl-ease), background-color .25s var(--fl-ease);
}
.fl-fab:hover{ background:var(--fl-blue-dark); }
.fl-fab:active{ transform:scale(.97); }
.fl-fab svg{ width:18px; height:18px; }
/* Versteckt, wenn die Pakete im Bild sind oder die Bildansicht offen ist. */
.fl-fab.is-hidden{ opacity:0; visibility:hidden; transform:translateY(14px); }

@media (prefers-reduced-motion: reduce){
  .fl-fab{ transition:none; }
}

/* Auf dem Handy kompakter, damit er moeglichst wenig verdeckt. */
@media (max-width:560px){
  .fl-fab{
    min-height:48px; padding:0 18px; font-size:14.5px; gap:7px;
    right:max(14px, env(safe-area-inset-right));
    bottom:calc(14px + env(safe-area-inset-bottom));
  }
  .fl-fab svg{ width:17px; height:17px; }
}