/* ============================================================
   Clean Up – "Perk"-Stil-Schicht (gemeinsam für alle Seiten)
   ------------------------------------------------------------
   Wird NACH dem Inline-<style> jeder Seite eingebunden und legt
   den Perk-Look darüber: große, fette Display-Typo, Pillen-Buttons,
   großzügige Abstände, farbiger Hero-Block und der schwebende
   "Springer" (Abschnitts-Navigation).

   WICHTIG: Nutzt die bestehenden CSS-Variablen (--blau, --text,
   --bg, --muted, --linie ...). Dadurch funktioniert der Hell-/
   Dunkelmodus automatisch weiter. Keine externen Anfragen
   (Schrift ist lokal gehostet) -> DSGVO-konform.
   ============================================================ */

/* ---------- Geräte-Treue: kein horizontales Wischen/Scrollen (alle Seiten) ----------
   Harte Norm-Regel (DESIGN-NORM §0.1): Auf keinem Gerät – v. a. mobil – darf die Seite
   seitlich wischbar sein. overflow-x:hidden am Wurzelelement kappt jeden Rest-Überlauf,
   ohne den sticky-Header zu stören (Scroll-Container bleibt der Viewport). Lange Wörter
   brechen zusätzlich um, statt das Layout aufzuweiten. */
html{overflow-x:hidden}
body{overflow-x:clip}
img,svg,video{max-width:100%}
h1,h2,h3,p,a,span,li{overflow-wrap:break-word}
/* Grid-/Flex-Karten dürfen NIE über den Viewport hinausragen (DESIGN-NORM §0.1, Nutzer-Norm
   2026-06-19: „nichts soll auf irgendeiner Seite rausfallen"). Ein Grid-Item hat per Default
   min-width:auto und schrumpft NICHT unter die Breite seines längsten Wortes („Kindergarten-
   reinigung" o. Ä.) -> die Spalte bläht den Container über den Rand. min-width:0 lässt die
   Spalte schrumpfen, overflow-wrap:anywhere bricht das lange Wort dann sauber um. Gilt site-weit
   für alle Karten-Raster (.card, .svc-card, .fact, .step). */
.card,.svc-card,.fact,.step{min-width:0}
.card h3,.svc-card h3,.fact .fv,.step h3{overflow-wrap:anywhere}

/* ---------- Display-Schrift "Outfit" (lokal gehostet) ---------- */
@font-face{
  font-family:'Outfit';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/outfit-400.woff2') format('woff2');
}
@font-face{
  font-family:'Outfit';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/outfit-600.woff2') format('woff2');
}
@font-face{
  font-family:'Outfit';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/outfit-700.woff2') format('woff2');
}
@font-face{
  font-family:'Outfit';font-style:normal;font-weight:800;font-display:swap;
  src:url('fonts/outfit-800.woff2') format('woff2');
}
/* Der Outfit-Ampersand wirkt unvollständig ("der Strich fehlt", Nutzer 2026-06-18). Dieses
   zusätzliche Face zieht NUR das &-Zeichen (U+0026) aus der lokalen System-Schrift (deren &
   ist vollständig). Da es nach den Outfit-Faces steht, denselben Familiennamen trägt und den
   ganzen Gewichtsbereich abdeckt, gewinnt es für genau dieses eine Zeichen -> alle Display-
   Überschriften zeigen ein normales &. Markup-frei, keine externe Anfrage (nur local()). */
@font-face{
  font-family:'Outfit';font-style:normal;font-weight:100 900;
  src:local('Segoe UI'),local('Helvetica Neue'),local('Arial'),local('Roboto');
  unicode-range:U+0026;
}

:root{
  /* Display-Schrift für Überschriften, Buttons, Logo, Springer.
     Der Fließtext bleibt auf --font (System / optional Inter). */
  --font-display:'Outfit',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  /* Perk = rundere Ecken */
  --radius:18px;
}

/* ============================================================
   TYPOGRAFIE – groß, fett, eng (der Kern des Perk-Looks)
   ============================================================ */
.logo,.eyebrow,.btn,.btn-sm{font-family:var(--font-display)}

h1,h2,h3,
.hero h1,h2.section-title,.empathy h2,.final h2,
.quiz-q,.quiz-result h3,.lm-text h3,.fact .fv{
  font-family:var(--font-display);
  letter-spacing:-.03em;
}

.hero h1{
  font-size:clamp(30px,5vw,56px);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.035em;
  margin-bottom:22px;
  overflow-wrap:break-word;     /* Sicherheitsnetz gegen Überlauf */
}
/* verhindert, dass ein langes Wort die Grid-Spalte sprengt (horizontaler Überlauf) */
.hero>div{min-width:0}
.hero .lead{font-size:clamp(17px,1.6vw,20px);line-height:1.6;max-width:520px}

h2.section-title,.empathy h2,.final h2{
  font-size:clamp(30px,4.4vw,52px);
  font-weight:800;
  line-height:1.06;
  letter-spacing:-.03em;
}
.section-intro,.final p{font-size:clamp(17px,1.8vw,20px);line-height:1.6}
/* Lesbare Textspalte: Intros nicht über die volle Breite laufen lassen (sonst zu lange
   Zeilen auf großen Schirmen). Linksbündige Sektionen bekommen so eine ruhige Spalte;
   zentrierte (combo-head) bleiben durch ihre auto-Ränder mittig. Gilt auf allen Seiten. */
.section-intro{max-width:64ch}

.eyebrow{font-weight:600;letter-spacing:.01em}
.logo{font-weight:800;letter-spacing:-.03em}
/* Header-Logo ist jetzt das SVG-Markenlogo (Kompakt-Variante) statt der Text-Wortmarke.
   Eigene Höhe; Bar trägt eigenen Hintergrund -> in Hell UND Dark lesbar. Siehe DESIGN-NORM §5. */
.logo{display:inline-flex;align-items:center;line-height:0}
.logo img{display:block;height:30px;width:auto}
@media (max-width:880px){.logo img{height:27px}}
/* Wortmarke jetzt OHNE eigenen Kasten: transparente SVGs, Schriftfarbe folgt dem Theme
   (dunkles Navy im Hellmodus – wie das Footer-Logo –, Weiß im Dunkelmodus). So „sticht"
   das Logo nicht mehr als Box hervor. Zwei Varianten, per [data-theme] umgeschaltet. */
.logo .logo-dark{display:none}
[data-theme="dark"] .logo .logo-light{display:none}
[data-theme="dark"] .logo .logo-dark{display:block}

/* Schwebender WhatsApp-Button (alle Seiten, unten rechts) – direkter Chat.
   Reiner Outbound-Link (kein Script/Tracking) -> keine Cookie-Einwilligung nötig.
   Markenfarbe WhatsApp-Grün #25D366; cookie-reopen sitzt unten LINKS -> kein Konflikt. */
.wa-fab{position:fixed;right:18px;bottom:18px;z-index:998;width:54px;height:54px;border-radius:50%;
  background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;font-size:30px;
  text-decoration:none;box-shadow:0 6px 20px rgba(8,30,42,.28);transition:transform .15s,box-shadow .15s}
.wa-fab:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 10px 28px rgba(37,211,102,.45);color:#fff}
.wa-fab i{line-height:1}
@media (max-width:880px){.wa-fab{width:50px;height:50px;font-size:27px;right:14px;bottom:14px}}

/* ============================================================
   BUTTONS & CHIPS – vollrunde Pillen wie bei Perk
   ============================================================ */
.btn{
  border-radius:999px;
  font-weight:700;
  padding:15px 30px;
  font-size:15.5px;
}
.btn-sm{border-radius:999px;padding:10px 20px}
.btn:hover{box-shadow:0 10px 26px rgba(0,168,232,.32)}

/* etwas weichere, größere Karten/Felder */
.theme-toggle,.nav-toggle,.mm-close{border-radius:14px}

/* ============================================================
   HERO – farbiger Block (Perk färbt den Hero kräftig ein)
   ============================================================ */
.hero-band{
  background:linear-gradient(165deg,rgba(0,168,232,.16) 0%,rgba(0,168,232,.04) 48%,transparent 78%);
  border-bottom:1px solid var(--linie);
}
/* Kopf straffer: weniger Leerraum über dem Hero und vor allem weniger unter ihm,
   damit der Fakten-Streifen enger anschließt (zusammenhängender Kopfbereich). */
.hero-band .hero{padding:clamp(8px,1.5vw,18px) 0 clamp(20px,2.5vw,34px)}

/* ------------------------------------------------------------
   KOPF-BAND (Unterseiten ohne eigenen Hero, z. B. leistungen/
   impressum/datenschutz): farbiger Anschluss direkt unter dem
   Header – oben etwas "Luft" im Marken-Hellblau, das nach unten
   ins weiße bzw. dunkle Seiten-Bg ausläuft (analog zum Index-
   Hero-Band, nur kürzer). rgba über var(--bg) -> wirkt in HELL
   wie in DUNKEL automatisch passend (kein eigener Dark-Override).
   ------------------------------------------------------------ */
.head-band{
  /* Gleicher straffer, "cleaner" Kopfabstand wie der Index-Hero (Nutzer-Wunsch 2026-06-18):
     gleiches Padding wie .hero-band .hero, damit Unterseiten oben NICHT mehr Luft haben als index. */
  padding-top:clamp(8px,1.5vw,18px);
  background:linear-gradient(180deg,rgba(0,168,232,.14) 0%,rgba(0,168,232,.05) 42%,transparent 80%);
}

/* ============================================================
   ABSCHNITTE – luftiger
   ============================================================ */
section.block{padding:clamp(64px,8.5vw,116px) 0}

/* ============================================================
   "SPRINGER" – schwebende Abschnitts-Navigation
   (klebt unter dem Header, hebt den aktiven Abschnitt hervor,
    springt beim Klick sanft dorthin)
   ============================================================ */
.springer{
  position:sticky;
  /* Kanonische angedockte Position – GLEICH auf allen Seiten (Norm: Springer sitzt überall
     mit demselben Abstand unter dem Header, nicht mal höher, mal tiefer). */
  top:92px;
  z-index:18;
  width:-moz-fit-content;
  width:fit-content;
  max-width:calc(100% - 28px);
  margin:-26px auto 0;
  display:flex;
  gap:4px;
  background:var(--header-bg);
  -webkit-backdrop-filter:saturate(180%) blur(10px);
  backdrop-filter:saturate(180%) blur(10px);
  /* etwas deutlicher umrandet, damit der Springer nicht "untergeht":
     ein dezenter, blau getönter Rahmen + etwas kräftigerer Schatten */
  border:1.5px solid rgba(0,168,232,.32);
  border-radius:999px;
  padding:5px;
  box-shadow:0 14px 38px rgba(8,30,42,.18);
  overflow-x:auto;
  scrollbar-width:none;
}
.springer::-webkit-scrollbar{display:none}

/* Unterseiten (Leistungen) haben jetzt ein eigenes Kopf-Band (.head-band) wie der Index-Hero.
   Der Springer überlappt es daher GENAUSO wie auf dem Index (Basis-margin -26px) -> das Band
   beginnt direkt an der Header-Linie, gleicher cleaner Abstand wie index (Nutzer-Wunsch 2026-06-18;
   vorher schob +14px den Springer in eine weiße Zone und das Band ~50px tiefer). */
.springer.springer-sub{margin-top:-26px}

/* Schwebender Zustand am Seitenanfang: solider Hintergrund + kräftigerer Schatten, damit der
   Springer klar ÜBER dem Inhalt liegt und Hintergrund-Linien (z. B. Fakten-Kacheln) nicht
   durchschlagen/stören. Im angedockten Zustand bleibt er dezent (durchscheinend). */
.springer.is-floating{background:var(--bg);box-shadow:0 22px 55px rgba(8,30,42,.34)}

/* "Start"-Button (Haus-Icon) ganz links im Springer auf Unterseiten – führt zur
   Startseite zurück und ist dank des schwebenden Springers immer sichtbar. */
.springer-home{flex-shrink:0;padding:9px 14px!important;color:var(--accent-text)!important}
.springer-home i{font-size:18px}
.springer-home:hover{background:var(--blau-soft);color:var(--accent-text)!important}
.springer-sep{flex-shrink:0;width:1px;align-self:stretch;margin:5px 3px;background:var(--linie)}
.springer a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:9px 22px;
  border-radius:999px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:15px;
  line-height:1;
  color:var(--muted);
  text-decoration:none;
  white-space:nowrap;
  transition:background .2s,color .2s;
}
.springer a:hover{color:var(--text)}
.springer a.active{background:var(--blau);color:var(--blau-dunkel)}

/* Anker so versetzen, dass beim Sprung der Titel einheitlich knapp unter Header +
   Springer landet. Ein EINHEITLICHER Wert für ALLE Abschnitte (beide Seiten) sorgt
   dafür, dass Eyebrow/Titel überall gleich tief im farbigen Hintergrund-Band sitzen.
   72px statt vorher 120px = der Titel rückt ein Stück höher (weniger Leerraum oben). */
#leistungen,#ablauf,#anfrage,#quiz,#vertrauen,#kontakt,#kontaktdaten,#top,
#unterhaltsreinigung,#glasreinigung,#grundreinigung,#sonderreinigung,#gebaeudeservice{scroll-margin-top:72px}

/* ============================================================
   SCHNELL-CHECK + ANFRAGE (zusammengeführt, nur Startseite)
   Links das Quiz, rechts das Formular, dazwischen ein Pfeil,
   der zeigt: die Antworten "fließen" ins Formular.
   ============================================================ */
.combo-head{text-align:center;max-width:680px;margin:0 auto 30px}
.combo-head .section-intro{margin-left:auto;margin-right:auto}
.combo{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;position:relative}
.combo-col{min-width:0}
.combo-tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--accent-text);background:var(--bg);border:1px solid var(--linie);padding:8px 16px;border-radius:999px;margin-bottom:16px}
.combo-tag i{font-size:16px}
/* Quiz & Formular sollen in der Spalte die volle Breite nutzen */
.combo .quiz{max-width:none;margin:0}
.combo .form-card{max-width:none;margin:0}
/* Verbindungs-Element zwischen Check (links) und Anfrage (rechts): ein länglicher
   Pillen-Tag wie die übrigen abgerundeten Elemente – KEIN Pfeil/Kreis mehr.
   - Ruhezustand dezent (heller Grund, dünne Linie, gedämpft), nicht klickbar.
   - Leuchtet beim Befüllen elegant in Marken-Blau auf ("nach rechts eingefügt").
   - Vertikale Höhe per JS = Mitte des Textfelds; horizontal mittig in der Lücke. */
.combo-arrow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  pointer-events:none;z-index:3}
.combo-arrow .ca-pill{display:inline-flex;align-items:center;
  /* kompakt gehalten, damit die Pille sauber in die Lücke passt und KEINE der beiden
     Karten anschneidet */
  font-family:var(--font-display);font-weight:600;font-size:9.5px;letter-spacing:.03em;text-transform:uppercase;
  color:var(--muted);background:var(--bg);border:1.5px solid var(--linie);
  padding:6px 11px;border-radius:999px;white-space:nowrap;
  box-shadow:0 8px 22px rgba(8,30,42,.12);
  transition:color .45s,background .45s,border-color .45s,box-shadow .45s}
/* Pille leuchtet sofort in Marken-Blau auf und BLINKT dann schnell 3x (auffällig:
   "wurde eingefügt"). Endzustand bleibt Blau. */
.combo-arrow.flowed .ca-pill{
  color:var(--blau-dunkel);background:var(--blau);border-color:var(--blau);
  box-shadow:0 12px 30px rgba(0,168,232,.42);
  animation:caBlink .34s ease-in-out 3 both;
}
@keyframes caBlink{
  0%,100%{box-shadow:0 0 0 0 rgba(0,168,232,0),0 12px 30px rgba(0,168,232,.42);opacity:1}
  50%{box-shadow:0 0 0 10px rgba(0,168,232,.32),0 12px 30px rgba(0,168,232,.42);opacity:.5}
}

/* Schmaler: Check + Formular untereinander. Die Verbindungs-Pille „füllt aus/eingefügt"
   ergibt vertikal keinen Sinn mehr -> ganz aus. Auf Mobil rutscht man nach dem Ausfüllen
   stattdessen sanft zum bereits befüllten Formular (Logik in index.html). */
@media (max-width:980px){
  .combo{grid-template-columns:1fr;gap:18px}
  .combo-arrow{display:none}
}

/* ============================================================
   RESPONSIV – Springer auch auf dem Handy nutzbar
   ============================================================ */
@media (max-width:880px){
  /* Mehr Luft oben, damit der „Region Köln"-Eyebrow nicht unter der angedockten Springer-Leiste
     verschwindet (sie sitzt mobil bei top:78px / Unterkante ~118px). Nutzer-Wunsch 2026-06-26. */
  .hero-band .hero{padding:36px 0 28px}
  /* Headline kleiner & umbruchsicher, damit lange Wörter ("Gebäudereinigung")
     auf schmalen Displays nicht aus dem Bild laufen */
  .hero h1{letter-spacing:-.02em;line-height:1.1}
  .hero .lead{font-size:16px}
  h2.section-title,.empathy h2,.final h2{font-size:clamp(25px,6.4vw,34px)}
  .springer{top:78px;margin-top:-22px;gap:2px;padding:4px}
  .springer.springer-sub{margin-top:10px}
  .springer a{padding:8px 15px;font-size:13.5px}
  /* Geräte-Treue/§0.1: gleiche Komposition, nur kompakter skaliert. Weniger Luft pro
     Abschnitt -> Schnell-Check + Formular brauchen deutlich weniger Scrollen, ohne dass
     sich am Aufbau etwas ändert. Gilt site-weit für alle .block-Abschnitte. */
  section.block{padding:44px 0}
  .combo-head{margin-bottom:18px}
  .combo-tag{margin-bottom:10px}
}

/* Kleine Phones: der Unterseiten-Springer (Leistungen: Home · Unterhalt · Glas · Grund · Sonder ·
   Gebäude) soll KOMPLETT auf einen Blick passen – kein seitliches Scrollen mehr (Nutzer-Wunsch
   2026-06-19). Pillen/Abstände/Schrift enger, Home-Button schlanker -> alle Punkte passen in die
   Springer-Breite (calc(100% - 28px)). Gilt nur für den Sub-Springer, der Index-Springer bleibt. */
@media (max-width:560px){
  .springer.springer-sub{gap:1px;padding:4px}
  .springer.springer-sub a{padding:7px 9px;font-size:12px}
  .springer.springer-sub .springer-home{padding:7px 9px!important}
  .springer.springer-sub .springer-home i{font-size:16px}
  .springer.springer-sub .springer-sep{margin:5px 1px}
}

/* ============================================================
   Off-Canvas-Mobilmenü iOS-sicher „einsperren" (alle Seiten)
   ------------------------------------------------------------
   Problem: das geschlossene Menü ist rechts geparkt (transform:translateX(100%)).
   Als position:fixed clippt iOS/WebKit es NICHT per html{overflow-x:hidden} -> man
   kann die Seite seitlich zum Menü „wegwischen" (wirkt unverankert/nicht mittig).
   Lösung: eine fixe, randlose Klammer-Schicht mit overflow:hidden hält das Menü im
   Käfig; das Menü selbst wird darin position:absolute. pointer-events:none an der
   Klammer -> Seite bleibt bedienbar; das Menü reaktiviert sie für sich (auto).
   Markup: <div class="mm-clip"> umschließt das <aside class="mobile-menu">. ============ */
.mm-clip{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:1100}
.mm-clip .mobile-menu{position:absolute;pointer-events:auto}

/* Mobilmenü „Unsere Leistungen" (Nutzer-Wunsch 2026-06-19): KEIN Aufklapp-Reiter mehr –
   die 5 Kategorien stehen unter einem kleinen Label IMMER sichtbar (flache, sortierte Liste).
   „Alle Leistungen" ist als eigener, hervorgehobener Chip darunter abgesetzt (siehe .mm-all). */
.mm-sub{display:flex;flex-direction:column}
.mobile-menu nav .mm-sub a{font-size:15px;font-weight:500;color:var(--muted);padding-left:12px}
.mobile-menu nav .mm-sub a:hover{color:var(--text)}
/* „Alle Leistungen": normaler Menüpunkt OHNE Farb-Hervorhebung (Nutzer-Wunsch 2026-06-19) –
   erbt den Standard-Linkstil (.mobile-menu nav a). Nur der Pfeil rechts bleibt und rückt
   beim Hover leicht weiter. */
.mm-all .mm-all-arrow{margin-left:auto;font-size:17px;transition:transform .15s}
.mobile-menu nav a.mm-all:hover .mm-all-arrow{transform:translateX(3px)}

/* „Unsere Leistungen" steht als Gruppen-Überschrift jetzt im SELBEN Stil wie „Über uns"/„Kontakt"
   (16px/600, Text-Farbe) statt als kleines Mini-Label (Nutzer-Wunsch 2026-06-19). */
.mobile-menu nav .mm-label{margin:0;padding:12px 10px;font-size:16px;font-weight:600;
  color:var(--text);text-transform:none;letter-spacing:normal}

/* Menü-CTA „Kostenloses Angebot anfragen": elegant zusammengezogen statt randvoll –
   zentrierte Pille, die ihren Text umschließt (Nutzer-Wunsch 2026-06-19). Die Pillenform
   (border-radius:999px) kommt aus .btn; durch die schmalere Breite wirkt sie runder. */
.mm-cta{margin-top:22px;text-align:center}
.mm-cta .btn{display:inline-flex;width:auto;justify-content:center;padding:14px 32px}

/* Sprach-Weltkugel im Mobilmenü: sitzt zentriert zwischen „Kontakt" und dem CTA in einer eigenen
   Reihe (.mm-lang-row, s. oben; Nutzer-Wunsch 2026-06-26, schiebt den CTA zugleich nach unten).
   .mm-leist-head trägt dadurch nur noch das „Unsere Leistungen"-Label. Funktion: DE/EN/AR über
   perk.js. Optik wie der Header-Theme-Toggle (40x40, gerundet); aus dem Header entfernt. */
.mm-leist-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mm-lang{width:40px;height:40px;border-radius:14px;border:1px solid var(--linie);
  background:var(--bg-soft);color:var(--text);display:inline-flex;align-items:center;
  justify-content:center;font-size:19px;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s}
.mm-lang:hover{border-color:var(--blau);color:var(--accent-text)}
/* Weltkugel-Reihe: zentriert zwischen „Kontakt" und dem CTA-Button (Nutzer-Wunsch 2026-06-26 –
   Globe aus der „Unsere Leistungen"-Kopfzeile hierher verlegt; schiebt den CTA zugleich nach unten). */
.mm-lang-row{display:flex;justify-content:center;margin-top:16px}

/* Menü-Kopf: Logo zentriert, Schließen-Button rechts angedockt (Nutzer-Wunsch 2026-06-19).
   Überschreibt das per-Seite-Inline justify-content:space-between zentral für alle Seiten. */
.mm-head{position:relative;justify-content:center}
.mm-head .mm-close{position:absolute;right:0;top:50%;transform:translateY(-50%)}

/* Reduzierte Bewegung respektieren (ergänzt bestehende Regeln) */
@media (prefers-reduced-motion:reduce){
  .springer{transition:none}
  /* Kein Aufleucht-Ablauf, aber Endzustand (hell) trotzdem zeigen */
  .combo-arrow.flowed .ca-pill{animation:none;background:var(--blau);border-color:var(--blau);color:var(--blau-dunkel)}
}

/* ============================================================
   Marken-Logo im Footer-Kontaktbereich (alle Seiten)
   ------------------------------------------------------------
   Logo-Datei: logo-clean-up.svg (Vektor; graue Box + weisser Text
   "CLEAN UP" + Emblem + graues "GEBAEUDESERVICE", transparenter Rand).
   Daher sitzt das Logo auf einer weissen, abgerundeten Karte ->
   verschmilzt nahtlos mit dem weissen Logo-Hintergrund und ist
   in Hell- UND Dunkelmodus gut lesbar (Footer ist immer dunkel).
   ============================================================ */
.footer-logo{display:inline-block;margin-bottom:16px;line-height:0;background:#fff;padding:14px 18px;border-radius:14px}
.footer-logo img{display:block;width:100%;max-width:210px;height:auto}

/* ============================================================
   MEHRSPRACHIGKEIT  – Sprach-Weltkugel, Popover, Arabisch/RTL
   (Engine: perk.js. Arabisch nutzt die System-Schrift -> kein externer
    Font, DSGVO-konform. Siehe DESIGN-NORM §12.)
   ============================================================ */
/* Header-Weltkugel (Desktop) – Optik wie der Theme-Toggle, mit kleinem Sprachkürzel */
.lang-toggle{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 11px;border-radius:14px;
  border:1px solid var(--linie);background:var(--bg-soft);color:var(--text);font-family:var(--font-display);
  font-weight:600;font-size:13px;cursor:pointer;flex-shrink:0;
  transition:background .15s,color .15s,border-color .15s}
.lang-toggle:hover{border-color:var(--blau);color:var(--accent-text)}
.lang-toggle>i{font-size:19px}
.lang-toggle .lang-code{line-height:1;letter-spacing:.02em}
/* Auf Mobil übernimmt die Weltkugel IM Menü (.mm-lang) -> Header-Globe ausblenden. */
@media (max-width:880px){.lang-toggle{display:none}}

/* Popover mit den 3 Sprachen (perk.js positioniert es an der angeklickten Weltkugel) */
.lang-pop{position:fixed;z-index:1300;min-width:190px;background:var(--bg);border:1px solid var(--linie);
  border-radius:14px;box-shadow:0 16px 44px rgba(8,30,42,.18);padding:6px}
.lang-pop[hidden]{display:none}
.lang-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  background:none;border:0;border-radius:10px;padding:11px 13px;font-family:var(--font-display);
  font-weight:600;font-size:15px;color:var(--text);text-align:start;cursor:pointer;
  transition:background .15s,color .15s}
.lang-opt:hover{background:var(--bg-soft)}
.lang-opt .lang-opt-check{font-size:18px;color:var(--accent-text);opacity:0}
.lang-opt.active{color:var(--accent-text)}
.lang-opt.active .lang-opt-check{opacity:1}

/* ---- Arabisch: System-Schrift (Outfit hat KEINE arabischen Glyphen) ----
   Fließtext UND Display auf eine arabische System-Schrift (Win/macOS/iOS/Android). */
html[lang="ar"]{
  --font:'Segoe UI','Tahoma','Geeza Pro','Noto Sans Arabic','Arabic Typesetting',system-ui,sans-serif;
  --font-display:'Segoe UI','Tahoma','Geeza Pro','Noto Sans Arabic',system-ui,sans-serif;
}
html[lang="ar"] body{line-height:1.7}                 /* arabische Schrift braucht etwas mehr Luft */
html[lang="ar"] .hero h1,html[lang="ar"] h2.section-title,
html[lang="ar"] .page-head h1,html[lang="ar"] .legal-head h1,html[lang="ar"] .lm-text h3,
html[lang="ar"] .quiz-q,html[lang="ar"] .quiz-result h3{letter-spacing:normal}  /* kein negatives Tracking auf AR */

/* ============================================================
   RTL (Arabisch) – Layout dort spiegeln, wo die Richtung „hart" verdrahtet ist.
   RTL ist eine seitenübergreifende Quereigenschaft -> gehört zentral in perk.css.
   ============================================================ */
/* Off-Canvas-Menü kommt im RTL von LINKS statt von rechts (inkl. iOS-Käfig) */
html[dir="rtl"] .mobile-menu{right:auto;left:0;border-left:0;border-right:1px solid var(--linie);
  box-shadow:16px 0 50px rgba(8,30,42,.22);transform:translateX(-100%)}
html[dir="rtl"] .mobile-menu.open{transform:none}
html[dir="rtl"] .mm-head .mm-close{right:auto;left:0}
/* „Alle Leistungen"-Pfeil zeigt im RTL nach links und rückt beim Hover nach links */
html[dir="rtl"] .mm-all .mm-all-arrow{margin-left:0;margin-right:auto;transform:scaleX(-1)}
html[dir="rtl"] .mobile-menu nav a.mm-all:hover .mm-all-arrow{transform:scaleX(-1) translateX(3px)}
/* fixe Eck-Elemente spiegeln */
html[dir="rtl"] .skip-link{left:auto;right:12px}
html[dir="rtl"] .cookie-reopen{left:auto;right:18px}
/* Quiz/Formular: linksbündige Texte -> im RTL rechtsbündig (logische Richtung) */
html[dir="rtl"] .quiz-opt,html[dir="rtl"] .form-card,html[dir="rtl"] .quiz-rooms-summary{text-align:right}
html[dir="rtl"] .quiz-opt-check{margin-left:0;margin-right:auto}
html[dir="rtl"] .qrs-detail{text-align:left}

/* ============================================================
   §14 Ultra-Review (2026-06-20) – zentrale, sichere Korrekturen.
   Liegen bewusst am Dateiende: überschreiben per Cascade die seiten-
   inline Werte (perk.css lädt nach dem Inline-<style>). Siehe DESIGN-NORM §14.
   ============================================================ */
/* 14.2 Fokus-Rahmen deckend & kontraststark (BFSG ≥3:1) statt rgba(.5) */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,
select:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--accent-text);outline-offset:3px}
/* 14.2 Touch-Targets ≥44px für reine Icon-Bedienelemente (Optik bleibt zentriert) */
.theme-toggle,.lang-toggle,.mm-lang,.nav-toggle,.mm-close{min-width:44px;min-height:44px}
/* 14.3 Pressed-/Active-Feedback zentral (war nur auf index .btn) */
.btn:active{transform:translateY(0);box-shadow:none}
.theme-toggle:active,.lang-toggle:active,.mm-lang:active,.nav-toggle:active,
.mm-close:active,.lang-opt:active{transform:scale(.96)}
/* 14.5 Overflow-Schutz: 1fr-Textspalte neben auto-Spalten braucht min-width:0 */
.lm-text{min-width:0}
.lm-text h3{overflow-wrap:anywhere}
/* 14.5 EIN scroll-margin-top (72px) – auch für #quiz/#anfrage (waren inline 24px) */
#quiz,#anfrage{scroll-margin-top:72px}
/* 14.2 Platzhalter-/Markierungsfarben token-sicher (Dark ≥4,5:1) */
::placeholder{color:var(--muted);opacity:1}
::selection{background:var(--blau-soft);color:var(--text)}
/* 14.5 Unterseiten-Sektionen skalieren auf Mobil mit, statt Desktop-Maß zu halten */
@media (max-width:880px){
  .page-head ~ section.block{padding:40px 0}
  .legal{padding:28px 0 56px}
}
/* 14.5 Schmalerer Außenrand auf sehr kleinen Phones */
@media (max-width:560px){
  .wrap{padding-left:16px;padding-right:16px}
}