/* ==========================================================================
   A Master's Touch — Basis: Tokens, Reset, Keyframes, Shell (Nav, Footer, Cookie)
   Reveal-/Counter-/Glow-Mechanik aus court-one-pitch/sb-tt-rebuild uebernommen
   (bewaehrt, Muhammed 27.08. ausdruecklich "das beibehalten"). Alles, was die
   Seite als Reskin von Andreas' Seite erkennbar machen wuerde, bewusst
   GEAENDERT: Farben jetzt Mazlums echte Marke (Navy+Hellblau+Gruen statt
   Teal/Anthrazit/Amber), Nav von der schwebenden Pille zu einer angedockten
   Vollbreiten-Leiste, Cookie-Hinweis von der schwebenden Karte zu einer
   angedockten Unterkante-Leiste, Schriftpaar komplett anders (Space Grotesk +
   Inter statt Archivo Black + League Spartan). Variable NAMEN aus der
   Fork-Vorlage bewusst beibehalten (--purple/--yellow), nur Werte geaendert.
   ========================================================================== */

:root{
  /* Farben — Mazlums echte Marke: Navy + Hellblau (Fahrzeug-Wrap) + Gruen (Flyer-Akzent) */
  --bg:#0a0e15;
  --bg-soft:rgba(10,14,21,.6);
  --purple:#0e6b97;
  --purple-light:#1f9cd8;
  --purple-deep:#08344a;
  --purple-link:#7fc4ec;
  --yellow:#87c71f;
  --yellow-ink:#0a2408;
  /* WhatsApp-CTAs: bewusst Mazlums eigenes CI-Gruen statt WhatsApp-Markengruen
     (Muhammed 29.08.: "ich will den whatsapp in seiner CI haben"), EIN Token
     fuer alle WhatsApp-Elemente (Float-Button, alle CTA-Varianten), damit
     Farbe/Optik ueberall garantiert identisch bleiben. */
  --wa-green:var(--yellow);
  --wa-green-ink:var(--yellow-ink);
  --wa-green-rgb:135,199,31;
  --ink:#fff;
  --ink-90:rgba(255,255,255,.9);
  --ink-85:rgba(255,255,255,.85);
  --ink-80:rgba(255,255,255,.8);
  --ink-78:rgba(255,255,255,.78);
  --ink-75:rgba(255,255,255,.75);
  --ink-72:rgba(255,255,255,.72);
  --ink-70:rgba(255,255,255,.7);
  --ink-68:rgba(255,255,255,.68);
  --ink-66:rgba(255,255,255,.66);
  --ink-65:rgba(255,255,255,.65);
  --ink-60:rgba(255,255,255,.6);
  --ink-55:rgba(255,255,255,.55);
  --ink-50:rgba(255,255,255,.5);
  --ink-40:rgba(255,255,255,.4);
  /* Linien und Flaechen */
  --line:rgba(255,255,255,.09);
  --line-soft:rgba(255,255,255,.07);
  --line-strong:rgba(255,255,255,.14);
  --surface:rgba(255,255,255,.04);
  --surface-2:rgba(255,255,255,.045);
  --purple-surface:rgba(14,107,151,.16);
  --purple-border:rgba(31,156,216,.3);
  /* Typografie (03.10.): Montserrat wie Logo, Auto-Beschriftung und Film,
     Inter fuer Fliesstext. Beide selbst gehostet (public/fonts), kein
     Google-Fonts-Aufruf mehr (Abmahnrisiko). */
  --font-display:'Montserrat','Montserrat Fallback',Arial,sans-serif;
  --font-body:'Inter','Inter Fallback',Arial,sans-serif;
  /* Helle Sektionen: eigene Flaechen, siehe .light weiter unten */
  --paper:#f5f8fb;
  --paper-tint:#e8f0f6;
  /* Layout */
  --wrap:73.75rem;
  --radius-pill:999px;
  --accent:var(--yellow);
}

/* --- Helle Sektionen (03.10.) -------------------------------------------
   Seite laeuft im Wechsel hell/dunkel statt komplett schwarz. .light
   ueberschreibt nur die Tokens, die Bausteine darunter bleiben dieselben.
   Gruen und Hellblau sind auf Weiss als Schrift zu schwach, deshalb wird
   der Akzent dort zum dunkleren Markenblau. */
.light,.light-tint{
  --ink:#0c1b2a;
  --ink-90:rgba(12,27,42,.9);--ink-85:rgba(12,27,42,.86);--ink-80:rgba(12,27,42,.82);
  --ink-78:rgba(12,27,42,.8);--ink-75:rgba(12,27,42,.78);--ink-72:rgba(12,27,42,.76);
  --ink-70:rgba(12,27,42,.74);--ink-68:rgba(12,27,42,.72);--ink-66:rgba(12,27,42,.7);
  --ink-65:rgba(12,27,42,.7);--ink-60:rgba(12,27,42,.66);--ink-55:rgba(12,27,42,.62);
  --ink-50:rgba(12,27,42,.6);--ink-40:rgba(12,27,42,.52);
  --line:rgba(12,27,42,.1);--line-soft:rgba(12,27,42,.07);--line-strong:rgba(12,27,42,.16);
  --surface:#fff;--surface-2:#fff;
  --purple-surface:rgba(14,107,151,.08);--purple-border:rgba(14,107,151,.22);
  --purple-link:#0e6b97;
  --accent:#0e6b97;
  position:relative;z-index:1;
  background:var(--paper);color:var(--ink);
}
.light-tint{background:var(--paper-tint)}
.light .eyebrow--yellow,.light-tint .eyebrow--yellow{color:var(--accent)}
.light a:hover,.light-tint a:hover{color:var(--purple)}

/* --- Schriften, selbst gehostet ------------------------------------------
   Variable Fonts (Latin-Teilmenge), je eine Datei. Die Fallback-Flaechen sind
   an die Laufweite angeglichen, damit sich Zeilenumbrueche beim Nachladen
   kaum verschieben. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/inter-latin.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600 800;font-display:swap;src:url(/fonts/montserrat-latin.woff2) format('woff2')}
@font-face{font-family:'Inter Fallback';src:local('Arial');size-adjust:107%;ascent-override:90%;descent-override:22%;line-gap-override:0%}
@font-face{font-family:'Montserrat Fallback';src:local('Arial');size-adjust:113%;ascent-override:85%;descent-override:22%;line-gap-override:0%}

/* --- Handy: iPhone 17 Pro Max (440 px) ist die Vorlage --------------------
   Darunter schrumpft alles im Verhaeltnis Breite/440, weil alle Masse in rem
   stehen (16 px bei 440). Formation bleibt auf jedem Handy gleich. */
html{font-size:16px}
@media (max-width:439.98px){html{font-size:calc(100vw / 27.5)}}

/* --- Reset / Grundlagen ------------------------------------------------- */
html{scroll-behavior:smooth;font-synthesis:none}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1rem;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:var(--purple-link);text-decoration:none}
a:hover{color:#fff}
::selection{background:var(--purple);color:#fff}
summary::-webkit-details-marker{display:none}
input,textarea{font-family:var(--font-body)}
[hidden]{display:none !important}

/* --- Keyframes ---------------------------------------------------------- */
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(4%,7%) scale(1.08)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-5%,-4%) scale(1.12)}}
@keyframes pulseGlow{0%,100%{box-shadow:0 0.625rem 2.5rem rgba(14,107,151,.45)}50%{box-shadow:0 0.625rem 3.75rem rgba(14,107,151,.85)}}
@keyframes pulseGlowWhatsapp{0%,100%{box-shadow:0 0.625rem 2.5rem rgba(var(--wa-green-rgb),.45)}50%{box-shadow:0 0.625rem 3.75rem rgba(var(--wa-green-rgb),.85)}}

/* --- Sichtbarkeit je Breite --------------------------------------------- */
@media (max-width:900px){.only-desktop{display:none !important}}
@media (min-width:900.02px){.only-mobile{display:none !important}}

/* --- Scroll-Reveal (unveraendert aus der Fork-Vorlage) ------------------ */
.reveal{
  opacity:0;
  transform:translateY(2.375rem);
  filter:blur(0.625rem);
  transition:opacity .9s ease var(--d,0s),transform .9s ease var(--d,0s),filter .9s ease var(--d,0s);
}
.reveal.is-in{opacity:1;transform:none;filter:blur(0)}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;filter:none;transition:none}
}

/* --- Ambient-Hintergrund (drei driftende Farbwolken) -------------------- */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ambient span{position:absolute;border-radius:50%;display:block}
.ambient .a1{top:-12%;left:-14%;width:55vw;height:55vw;background:radial-gradient(circle,rgba(14,107,151,.26) 0%,transparent 68%);filter:blur(4.375rem);animation:drift 26s ease-in-out infinite}
.ambient .a2{top:34%;right:-18%;width:52vw;height:52vw;background:radial-gradient(circle,rgba(15,42,74,.35) 0%,transparent 68%);filter:blur(5rem);animation:drift2 32s ease-in-out infinite}
.ambient .a3{bottom:-16%;left:16%;width:44vw;height:44vw;background:radial-gradient(circle,rgba(135,199,31,.08) 0%,transparent 66%);filter:blur(5.625rem);animation:drift 38s ease-in-out infinite}

/* --- Navigation ----------------------------------------------------------
   Bewusst KEINE schwebende Pille (das ist Andreas'/COURT-ONE-Silhouette),
   stattdessen eine an die Oberkante angedockte Vollbreiten-Leiste. */
.nav-wrap{position:fixed;top:0;left:0;right:0;z-index:90}
.nav{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  width:100%;box-sizing:border-box;
  background:linear-gradient(180deg,rgba(9,13,19,.95) 0%,rgba(9,13,19,.82) 100%);
  backdrop-filter:blur(1rem);-webkit-backdrop-filter:blur(1rem);
  border-bottom:1px solid var(--line);
  padding:0.875rem max(1.25rem, calc((100% - var(--wrap)) / 2));
}
.nav-logo{display:flex;align-items:center;flex:none}
.wordmark{font-family:var(--font-display);font-weight:700;letter-spacing:0;color:#fff;display:inline-flex;align-items:baseline;white-space:nowrap}
.wordmark i{font-style:normal;color:var(--purple-light)}
.nav-logo .wordmark{font-size:1.0625rem}
.footer-brand .wordmark{font-size:1.3125rem;margin-bottom:1rem}
.final .wordmark{font-size:clamp(1.75rem,4.6vw,2.5rem);margin-bottom:1.5rem;justify-content:center;width:100%}

/* Echtes Logo (Mazlums Original-PNG aus dem Drive-Ordner, Datei unveraendert),
   ersetzt die bisherige Text-Wortmarke ueberall (Muhammed 29.08.: "das
   Masters Touch muss weg, Originallogo rein"). Leuchten ist ein reiner
   CSS-drop-shadow auf dem <img>, die Datei selbst bleibt unangetastet. */
.logo-img{display:block;width:auto;height:auto;object-fit:contain}
.logo-img--nav{height:3.25rem;filter:drop-shadow(0 0 0.625rem rgba(31,156,216,.35))}
.logo-img--footer{height:5.5rem;margin-bottom:1.25rem;animation:logoGlow 3.6s ease-in-out infinite}
.logo-img--final{
  height:7rem;margin:0 auto 1.375rem;
  animation:logoGlow 3.6s ease-in-out infinite;
}
@keyframes logoGlow{
  0%,100%{filter:drop-shadow(0 0 0.875rem rgba(31,156,216,.45)) drop-shadow(0 0 1.875rem rgba(135,199,31,.16))}
  50%{filter:drop-shadow(0 0 1.625rem rgba(31,156,216,.75)) drop-shadow(0 0 3.25rem rgba(135,199,31,.3))}
}
@media (prefers-reduced-motion:reduce){.logo-img--final,.logo-img--footer{animation:none;filter:drop-shadow(0 0 1.125rem rgba(31,156,216,.5))}}
.nav-links{display:flex;align-items:center;gap:1.625rem}
.nav-links a{color:var(--ink-66);font-weight:600;font-size:.9375rem;letter-spacing:.005em}
.nav-links a.is-active{color:#fff;font-weight:700}
.nav-links a:hover{color:#fff}
.nav-right{display:flex;align-items:center;gap:0.875rem;flex:none}
.burger{background:none;border:none;color:#fff;cursor:pointer;padding:0.5rem 0.875rem;display:flex;flex-direction:column;gap:0.3125rem}
.burger span{display:block;width:1.375rem;height:0.1562rem;background:#fff;border-radius:2px}
.burger span:last-child{width:0.875rem;background:var(--yellow)}

/* Mobiles Vollbild-Menue */
.menu-overlay{
  position:fixed;inset:0;z-index:89;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:rgba(8,11,16,.97);backdrop-filter:blur(0.625rem);
}
.menu-inner{display:flex;flex-direction:column;gap:0.25rem;padding:6.5rem 1.5rem 3rem;max-width:30rem;margin:0 auto}
.menu-top,.menu-group summary{
  display:flex;align-items:center;justify-content:space-between;
  color:#fff;font-family:var(--font-display);font-weight:700;font-size:1.5rem;letter-spacing:0;
  padding:0.75rem 0;border-bottom:1px solid var(--line);cursor:pointer;list-style:none
}
.menu-group summary::-webkit-details-marker{display:none}
.menu-group summary::after{content:'';width:0.625rem;height:0.625rem;border-right:2px solid var(--purple-light);border-bottom:2px solid var(--purple-light);transform:rotate(45deg) translate(-0.125rem,-0.125rem);transition:transform .2s ease}
.menu-group[open] summary::after{transform:rotate(225deg) translate(-0.125rem,-0.125rem)}
.menu-sub{display:grid;grid-template-columns:1fr 1fr;gap:0.125rem 1rem;padding:0.75rem 0 1rem;border-bottom:1px solid var(--line)}
.menu-sub a{color:var(--ink-66);font-weight:600;font-size:1rem;padding:0.5rem 0;line-height:1.3}
.menu-sub a.menu-all{grid-column:1 / -1;color:var(--purple-light)}
.menu-cta{justify-content:center;margin-top:1.75rem}

/* Desktop: aufklappende Untermenues fuer Leistungen und Einsatzgebiet */
.nav-dd{position:relative}
.nav-dd-btn{display:inline-flex;align-items:center;gap:0.375rem}
.nav-dd-btn svg{transition:transform .2s ease}
.nav-dd:hover .nav-dd-btn svg,.nav-dd:focus-within .nav-dd-btn svg{transform:rotate(180deg)}
.nav-dd-panel{
  position:absolute;top:100%;left:50%;transform:translate(-50%,0.5rem);
  min-width:28rem;padding:1.25rem 1.25rem 1rem;margin-top:0.75rem;
  background:rgba(12,17,24,.98);border:1px solid var(--line);border-radius:1rem;
  box-shadow:0 1.5rem 3rem rgba(0,0,0,.45);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,transform .18s ease,visibility .18s
}
.nav-dd-panel::before{content:'';position:absolute;left:0;right:0;top:-0.875rem;height:0.875rem}
.nav-dd:hover .nav-dd-panel,.nav-dd:focus-within .nav-dd-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.nav-dd-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.125rem 1rem}
.nav-dd-grid a{display:block;padding:0.5rem 0.625rem;border-radius:0.5rem;font-size:.9375rem;white-space:nowrap}
.nav-dd-grid a:hover{background:rgba(255,255,255,.06)}
.nav-dd-all{display:block;margin-top:0.75rem;padding:0.75rem 0.625rem 0;border-top:1px solid var(--line);color:var(--purple-light) !important;font-size:.875rem !important}

/* --- Buttons ------------------------------------------------------------ */
.btn{display:inline-flex;align-items:center;gap:0.625rem;border-radius:var(--radius-pill);font-weight:700;letter-spacing:.06em;transition:transform .2s ease,border-color .2s ease,background .2s ease}
.btn svg{display:block}
.btn-primary{
  background:radial-gradient(7.5rem circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.3),transparent 70%),linear-gradient(135deg,var(--purple),var(--purple-light));
  color:#051627;font-size:1rem;padding:1.1875rem 2.125rem;
  animation:pulseGlow 3.2s ease-in-out infinite;
}
.btn-primary:hover{transform:translateY(-2px)}
.btn-nav{
  gap:0.5rem;
  background:radial-gradient(5.625rem circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.28),transparent 70%),linear-gradient(135deg,var(--purple),var(--purple-light));
  color:#051627;font-weight:700;font-size:0.8438rem;letter-spacing:.05em;padding:0.75rem 1.25rem;
  box-shadow:0 0.375rem 1.625rem rgba(14,107,151,.5);
}
.btn-nav:hover{transform:translateY(-1px);color:#051627}
.btn-ghost{
  color:#fff;font-weight:700;font-size:0.9375rem;letter-spacing:.05em;padding:1.125rem 1.875rem;
  border:1.5px solid rgba(255,255,255,.28);background:rgba(255,255,255,.04);backdrop-filter:blur(0.5rem);
}
.btn-ghost:hover{border-color:var(--purple-light);background:rgba(14,107,151,.18);color:#fff}

/* WhatsApp als primaere CTA-Farbe (Muhammed 29.08.: "als Erstes immer
   WhatsApp"). Eigenes Markengruen, ueberschreibt bewusst die Verlaufsfarbe
   von .btn-primary/.btn-nav, indem die Regel spaeter in der Kaskade steht. */
.btn-whatsapp{background:var(--wa-green);color:var(--wa-green-ink);box-shadow:0 0.5rem 1.625rem rgba(var(--wa-green-rgb),.4);animation:pulseGlowWhatsapp 3.2s ease-in-out infinite}
.btn-whatsapp svg{width:1.125rem;height:1.125rem}
.btn-nav.btn-whatsapp{box-shadow:0 0.375rem 1.375rem rgba(var(--wa-green-rgb),.5)}
.btn-nav.btn-whatsapp svg{width:0.9375rem;height:0.9375rem}

/* --- Wiederkehrende Textbausteine --------------------------------------- */
.eyebrow{font-weight:700;font-size:0.8125rem;letter-spacing:.3em;color:var(--ink-50)}
.eyebrow--yellow{color:var(--yellow)}
.section-head{text-align:center}
.h2{font-family:var(--font-display);font-weight:700;font-size:clamp(1.75rem,4.6vw,3.375rem);margin:0;line-height:1.1;text-wrap:balance}
.lead{font-size:1rem;color:var(--ink-65);font-weight:500;line-height:1.55}

/* Handgezeichneter Unterstrich unter einzelnen Woertern in Ueberschriften,
   SVG-Pfad zeichnet sich per stroke-dashoffset-Transition ein, sobald das
   Element im Viewport ist (JS setzt nur die Klasse is-drawn, siehe site.js). */
.underline-wrap{position:relative;display:inline-block;text-shadow:0 1px 0.1875rem rgba(10,14,21,.55)}
.underline-wrap svg{position:absolute;left:-3%;bottom:-8px;width:106%;height:1rem;overflow:visible;z-index:-1}
.underline-wrap path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s ease .25s}
.underline-wrap path.is-drawn{stroke-dashoffset:0}

/* --- Footer ------------------------------------------------------------- */
.footer{
  position:relative;z-index:1;
  border-top:1px solid rgba(255,255,255,.08);
  background:var(--bg-soft);
  padding:clamp(2.5rem,6vw,4rem) 1.375rem 3.75rem;
}
.footer-inner{max-width:var(--wrap);margin:0 auto;display:flex;flex-wrap:wrap;gap:2.75rem;justify-content:space-between}
.footer-brand{max-width:20rem}
.footer-brand p{font-size:0.875rem;line-height:1.6;color:var(--ink-55);font-weight:500;margin:0}
.footer-col h3{font-weight:700;font-size:.875rem;letter-spacing:.02em;color:var(--ink-50);margin:0 0 1rem;font-family:var(--font-display)}
.footer-col nav{display:flex;flex-direction:column;gap:0.6875rem;font-size:0.9375rem;font-weight:600}
.footer-col nav a{color:var(--ink-80)}
.footer-col nav a:hover{color:#fff}
.footer-bottom{
  max-width:var(--wrap);margin:2.75rem auto 0;padding-top:1.375rem;
  border-top:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;gap:0.75rem;justify-content:space-between;
  font-size:0.8125rem;color:var(--ink-40);font-weight:500;
}

/* --- Cookie-Hinweis --------------------------------------------------------
   Bewusst KEINE schwebende Karte unten links (das ist wieder die Andreas-
   Silhouette), stattdessen eine an die Unterkante angedockte Vollbreiten-Leiste. */
.cookie{
  position:fixed;left:0;right:0;bottom:0;z-index:99;
  background:rgba(9,13,19,.97);backdrop-filter:blur(0.875rem);
  border-top:1px solid var(--line);
  padding:1rem max(1.25rem, calc((100% - var(--wrap)) / 2));
  box-shadow:0 -10px 2.5rem rgba(0,0,0,.4);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
}
.cookie-text{display:flex;align-items:baseline;gap:0.625rem;flex-wrap:wrap}
.cookie h3{font-weight:700;font-size:0.875rem;margin:0;font-family:var(--font-body)}
.cookie p{font-size:0.8438rem;line-height:1.5;color:var(--ink-70);font-weight:500;margin:0}
.cookie-actions{display:flex;gap:0.625rem;flex:none}
.cookie button{
  font-family:var(--font-body);font-weight:700;font-size:0.8438rem;letter-spacing:.04em;
  padding:0.6875rem 1.125rem;border-radius:var(--radius-pill);cursor:pointer;
}
.cookie .accept{background:linear-gradient(135deg,var(--purple),var(--purple-light));color:#051627;border:none}
.cookie .decline{background:none;color:var(--ink-70);border:1.5px solid rgba(255,255,255,.25);font-weight:700}

@media (max-width:640px){
  .cookie{flex-direction:column;align-items:stretch;text-align:left}
  .cookie-actions{width:100%}
  .cookie-actions button{flex:1}
}

/* --- WhatsApp-Button (schwebend, auf jeder Seite) ---------------------------
   Eigenes Markengruen (var(--wa-green)), bewusst NICHT unsere Site-Farben, damit er
   sofort als WhatsApp erkennbar ist. Rueckt hoch, solange der Cookie-Balken
   noch offen ist (Geschwister-Selektor, kein JS noetig), sonst wuerde er den
   Cookie-Text auf dem Handy verdecken. */
.whatsapp-float{
  position:fixed;right:1.25rem;bottom:1.375rem;z-index:96;
  width:3.5rem;height:3.5rem;border-radius:50%;
  background:var(--wa-green);display:flex;align-items:center;justify-content:center;
  box-shadow:0 0.5rem 1.5rem rgba(0,0,0,.4);
  transition:bottom .2s ease,transform .2s ease;
}
.whatsapp-float:hover{transform:translateY(-2px)}
/* Erst nach dem ersten Bildschirm einblenden, damit der Knopf im Hero nichts verdeckt */
.whatsapp-float:not(.zeigen){opacity:0;pointer-events:none;transform:translateY(1rem)}
.whatsapp-float{transition:bottom .2s ease,transform .25s ease,opacity .25s ease}
.whatsapp-float svg{width:1.75rem;height:1.75rem;display:block}
.cookie:not([hidden]) ~ .whatsapp-float{bottom:6.5rem}
@media (max-width:640px){
  .whatsapp-float{right:1rem;bottom:1.125rem;width:3.25rem;height:3.25rem}
  .cookie:not([hidden]) ~ .whatsapp-float{bottom:11.625rem}
}

/* Formular: WhatsApp als Hauptweg, E-Mail als Textlink daneben */
.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:0.75rem 1.5rem}
.form-actions .btn-primary{justify-content:center}
.form-mail{background:none;border:none;padding:0.5rem 0;color:var(--ink-66);font:inherit;font-weight:600;font-size:.9375rem;text-decoration:underline;text-underline-offset:0.25rem;cursor:pointer}
.form-mail:hover{color:var(--ink)}


/* 10 Kreisstaedte im 2er-Raster, Bochum als eigene volle Zeile (kein Loch rechts) */
.nav-dd-grid a.dd-wide,.menu-sub a.dd-wide{grid-column:1 / -1}
.dd-wide small{font-size:.8125rem;font-weight:500;opacity:.6}

/* Stadtseiten: echtes Wahrzeichen als Kopfbild */
.stadt-hero{position:relative;overflow:hidden}
.stadt-hero>*{position:relative;z-index:1}
.stadt-hero>.stadt-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.stadt-hero>.stadt-hero-scrim{position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(8,12,18,.78) 0%,rgba(8,12,18,.62) 45%,rgba(8,12,18,.9) 100%)}
.stadt-credit{position:absolute !important;right:1rem;bottom:.5rem;margin:0;font-size:.625rem;color:rgba(255,255,255,.55);letter-spacing:.02em;text-align:right;max-width:calc(100% - 2rem)}
.stadt-credit a{color:inherit;text-decoration:underline;text-underline-offset:.15em}
.stadt-credit a:hover{color:#fff}