/* ==========================================================================
   DeLux Finanz, Design C "Hausfarben im Buero". Gemeinsames Stylesheet.

   Einbinden (jede Seite, relative Pfade):
     <link rel="stylesheet" href="css/fonts.css">
     <link rel="stylesheet" href="css/delux.css">
     <script src="js/delux.js" defer></script>
   delux.js setzt beim Start die Klasse .reveal-on am <html>. Nur dann sind [data-reveal]-Inhalte vor dem
   Einblenden versteckt; faellt das Skript aus, bleibt alles sichtbar.
   Hero-Eintritt ohne JS (wie Startseite): Elternelement class="enter", Kinder style="--i:0..n" (50 ms Versatz);
   Bild daneben class="enter-media" (Blur-Up, 160 ms spaeter) oder Buero-Reveal von rechts class="enter-office".
   Den Hero NICHT mit data-reveal einblenden (H1 haengt sonst an JS).
   Icons kommen aus dem SVG-Symbolsatz am Anfang von <body> (siehe index.html), Aufruf
   <svg class="ic"><use href="#i-arrow"/></svg>.

   BAUSTEINE (Klasse, Zweck)
    1  Tokens            :root  Farben, Schrift, Abstaende, Radien, Schatten, Bewegung
    2  Grundlage         .wrap .vh .skip .ic .ic-fill .ph (Platzhalter-Marke) .kicker .sec-h .sec .sec--deep .stars
    3  Buttons, Links    .btn (Orange, Hauptweg) .btn-ghost (Rahmen) .link (unterstrichen, gross) .link.on-dark .txt (im Fliesstext)
    4  Kopf              .site-head .head-in .brand .nav .nav-list .nav-link .nav-tel .has-sub .sub (Untermenue Leistungen)
                         .head-mobile .icon-btn .mnav .mnav-link .mnav-sub .mnav-cta   (JS: data-head, data-sub, data-menu-toggle, data-mnav, data-mnav-sub)
    5  Hero Startseite   .hero .hero-stage .hero-office (Buero von rechts) .hero-portrait .hero-copy .hero-h .hero-meta .hero-sub .hero-lead .hero-actions .hero-rating
    6  Zitate            .quote .quote-lead .quote-mark .quote-pair .score .score-num
    7  Wegweiser-Liste   .svc-list .svc .svc-t .svc-d .svc-arw .tag
    8  Zeitleiste        .steps .step .step-n .startbox
    9  Dunkle Zone       .cross .cross-lead .dist (Strecke Trier bis Grenze) .cross-grid .cross-big .cross-item .cross-note .cross-acts
   10  Mini-Rechner      .calc .calc-head .badge .field .money .hint .err .calc-out .calc-rows .calc-result   (JS: data-calc)
       Formular          .fld (Feld mit label, .opt fuer "optional") .inp (input, textarea.inp) .chk (Kontrollkaestchen mit Label) .form-note (Hinweis, hidden)
   11  Ruhiges Band      .cert .cert-grid .cert-body
   12  Fast-Lane-Karte   .flc-sec .flc-box .flc .flc-t .flc-s .flc-arw .flc-legal   (JS: data-flcard)
   13  FAQ-Akkordeon     .acc .acc-item .acc-btn .acc-ic .acc-panel   (JS: data-acc, Panels mit hidden="until-found")
   14  Kontakt           .contact .addr .ways .way .way-ic .way-l .way-v .service24
   15  Bild-Rahmen       .media (Rahmen, Zoom beim Hover) .media-cap
       Bildplatz         .bildplatz (gestaltete Flaeche "Bild von ... folgt") mit Format .ar-3x2 .ar-4x5 .ar-1x1 .ar-3x2-4x5 (Computer 3:2, Handy 4:5)
   16  Seitenfuss        .foot .foot-grid .foot-brand .foot-bottom .foot-btn
   17  Kontaktleiste     .cbar (fest, nur Handy unter 768 px) a.is-main
   18  Cookie, Pille     .cookie (Attrappe, JS: data-cookie, data-cookie-choice, data-cookie-open)
                         .flbtn (schwebender Fast-Lane-Button, immer sichtbar, alle Seiten ausser fast-lane.html;
                         Texte .flbtn-lang ab 1024 px, sonst .flbtn-kurz; .flbtn-k .flbtn-dot .flbtn-t .flbtn-s .flbtn-arw; Markup siehe index.html)
   19  Einblendungen     [data-reveal] mit style="--i:n" fuer den Versatz (Blur-Up, einmalig), nur unter .reveal-on
       Hero-Eintritt     .enter (Kinder mit --i) .enter-media .enter-office   (reine CSS-Animation, kein JS)
   20  Not-Aus           prefers-reduced-motion: nur Deckkraft
   Seitenspezifisches gehoert in einen kleinen <style>-Block der jeweiligen Seite.
   ========================================================================== */

/* ==========================================================
   1. Tokens
   ========================================================== */
:root{
  /* Flaechen */
  --c-bg:#F4F2EE;
  --c-bg-top:#F7F5F2;
  --c-bg-deep:#EEEBE6;
  --c-white:#FFFFFF;
  /* Schrift */
  --c-ink:#1D2D54;            /* Navy */
  --c-muted:#4A5677;          /* 6,1:1 auf der tiefsten hellen Flaeche */
  /* Akzent */
  --c-accent:#E97603;         /* Orange als Flaeche: Buttons, Sterne, Linien. Navy darauf 4,54:1 */
  --c-accent-hover:#F2851A;   /* Navy darauf 5,24:1 */
  --c-accent-line:#DB6E00;    /* nur Linien und Rahmen (3:1 Nicht-Text), nie Flaeche unter Schrift */
  --c-accent-ink:#9E4D00;     /* Orange als Schriftfarbe auf Hell, mindestens 5,0:1 auf allen hellen Flaechen */
  --c-accent-wash:rgba(233,118,3,.14);
  /* Linien und Waschungen */
  --c-hair:rgba(29,45,84,.14);
  --c-hair-strong:rgba(29,45,84,.28);
  --c-hair-hover:rgba(29,45,84,.45);
  --c-wash:rgba(29,45,84,.06);
  --c-wash-strong:rgba(29,45,84,.10);
  --c-shadow:rgba(29,45,84,.16);
  /* Dunkle Zone */
  --c-on-dark:#FFFFFF;
  --c-on-dark-muted:rgba(255,255,255,.78);
  --c-hair-dark:rgba(255,255,255,.18);
  --c-wash-dark:rgba(255,255,255,.08);
  /* Deaktiviert */
  --c-disabled-bg:rgba(29,45,84,.08);
  --c-disabled-ink:#4A5677;
  /* Fokus und Feldrahmen */
  --c-focus:#1D2D54;
  --c-field:rgba(29,45,84,.58);
  --c-field-hover:rgba(29,45,84,.8);
  /* Fehler: eigenes Rot, damit Fehler nicht wie Fokus oder Hauptweg (Orange) aussieht. 6,6:1 auf Weiss, 6,1:1 auf #EEEBE6 */
  --c-error:#B42318;
  /* Verlaeufe */
  --g-page:linear-gradient(180deg,#F7F5F2 0%,#F4F2EE 55%,#EEEBE6 100%);
  --g-veil-x:linear-gradient(90deg,#F4F2EE 0%,rgba(244,242,238,.82) 18%,rgba(244,242,238,.38) 55%,rgba(244,242,238,.5) 100%);
  --g-veil-y:linear-gradient(180deg,rgba(244,242,238,.85) 0%,rgba(244,242,238,.4) 24%,rgba(244,242,238,.42) 100%);
  --g-veil-top:linear-gradient(180deg,#F7F5F2 0%,rgba(247,245,242,.72) 72px,rgba(247,245,242,0) 168px);
  --g-glow-x:radial-gradient(ellipse 44% 46% at 56% 40%,rgba(233,118,3,.14),rgba(233,118,3,0) 72%);
  --g-glow-y:radial-gradient(ellipse 58% 48% at 50% 40%,rgba(233,118,3,.14),rgba(233,118,3,0) 72%);
  --g-fade-b:linear-gradient(180deg,rgba(244,242,238,0) 74%,#EEEBE6 100%);
  --g-fade-m:linear-gradient(180deg,rgba(244,242,238,0),#F4F2EE);
  --g-bildplatz:linear-gradient(160deg,#F7F5F2 0%,#EEEBE6 100%);
  /* Schatten */
  --sh-btn:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -2px 0 rgba(29,45,84,.12);
  --sh-btn-press:inset 0 2px 5px rgba(29,45,84,.26),inset 0 0 0 1px rgba(29,45,84,.10);
  --sh-panel:0 0 0 1px var(--c-hair),0 18px 40px -16px var(--c-shadow);
  --sh-lift:inset 0 0 0 1px var(--c-hair),0 24px 48px -32px var(--c-shadow);
  /* Schrift */
  --f-display:'Outfit',system-ui,sans-serif;
  --f-body:'Instrument Sans',system-ui,sans-serif;
  --t-12:12px; --t-14:14px; --t-15:15px; --t-16:16px; --t-17:17px;
  --t-20:20px; --t-24:24px; --t-30:30px;
  --t-h3:clamp(20px,1.2vw + 14px,26px);
  --t-h2:clamp(30px,2.6vw + 18px,52px);
  --t-h1:clamp(36px,5.28vw,76px);
  --t-num:clamp(96px,10vw,160px);
  --lh-body:1.62; --lh-head:1.12;
  /* Abstaende */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;
  --gutter:20px; --sec:var(--s-8);
  /* Radien */
  --r-s:6px; --r-m:10px; --r-l:18px;
  /* Bewegung: Eintritt ease-out, Austritt ease-in, Zustand ease-in-out */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in:cubic-bezier(.4,0,1,1);
  --ease-io:ease-in-out;
  --d-fast:140ms; --d-base:180ms; --d-slow:240ms; --d-enter:400ms;
  /* Masse */
  --head-h:64px; --bar-h:72px; --cookie-h:0px;
}
@media (min-width:768px){ :root{ --gutter:48px; } }
@media (min-width:1024px){ :root{ --gutter:clamp(64px,6.67vw,96px); --sec:var(--s-10); --head-h:104px; } }

/* ==========================================================
   2. Grundlage
   ========================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--head-h) + var(--s-4));scroll-padding-bottom:calc(max(var(--bar-h),var(--cookie-h)) + env(safe-area-inset-bottom) + var(--s-4))}
@media (min-width:768px){ html{scroll-padding-bottom:0} }
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }
body{margin:0;background:var(--c-bg);color:var(--c-ink);font:400 var(--t-17)/var(--lh-body) var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:clip;padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom))}
@media (min-width:768px){ body{padding-bottom:0} }
img{max-width:100%;height:auto;display:block}
/* Schutz: nichts in Inhalt und Fuss (auch Einblendungen vor dem Eintritt) verbreitert die Seite. clip statt hidden: kein Scrollcontainer, sticky bleibt intakt */
main,.foot{overflow-x:clip}
/* Silbentrennung: standardmaessig nur an weichen Trennstellen (&shy;), so trennt auch Safari nie haesslich.
   Automatisch nur unter 768 px und nur in Browsern, die die Mindestlaengen kennen (Safari kennt sie nicht). */
h1,h2,h3{font-family:var(--f-display);font-weight:600;letter-spacing:-.02em;line-height:var(--lh-head);margin:0;text-wrap:balance;-webkit-hyphens:manual;hyphens:manual;overflow-wrap:break-word}
@supports (hyphenate-limit-chars:12 5 5){
  @media (max-width:767px){ h1,h2,h3,.acc-btn{hyphens:auto;hyphenate-limit-chars:12 5 5} }
}
p,figure,blockquote,address{margin:0}
address{font-style:normal}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--c-focus);outline-offset:3px}
.wrap{width:100%;max-width:calc(1248px + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--s-4);top:var(--s-4);z-index:100;padding:var(--s-3) var(--s-4);border-radius:var(--r-m);background:var(--c-ink);color:var(--c-on-dark);font-weight:600;text-decoration:none;transform:translateY(calc(-100% - 2 * var(--s-4)));transition:transform var(--d-base) var(--ease-out)}
.skip:focus{transform:none}
.skip:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ic-fill{fill:currentColor;stroke:none}
.nobr{white-space:nowrap}   /* Telefonnummern, Wortpaare mit Bindestrich: nie umbrechen */
.ph{display:inline-block;padding:0 var(--s-1);border-radius:var(--r-s);background:var(--c-accent-wash);color:var(--c-ink);font-family:var(--f-body);font-weight:600;font-size:.9em;letter-spacing:0}
.kicker{font:600 var(--t-15)/1.3 var(--f-body);color:var(--c-muted);margin-bottom:var(--s-3)}
.sec-h{font-size:var(--t-h2)}
.sec{padding:var(--sec) 0}
.sec--deep{background:var(--c-bg-deep)}
.stars{display:inline-flex;gap:2px;color:var(--c-accent)}
.stars .ic{width:14px;height:14px}

/* ==========================================================
   3. Buttons und Links (Ruhe, Hover, Fokus, Aktiv, Deaktiviert)
   ========================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-3);min-height:56px;padding:0 var(--s-6);border:0;border-radius:var(--r-m);background:var(--c-accent);color:var(--c-ink);font:600 var(--t-17)/1 var(--f-display);text-decoration:none;cursor:pointer;box-shadow:var(--sh-btn);transition:transform var(--d-fast) var(--ease-out),background-color var(--d-base) var(--ease-io),box-shadow var(--d-fast) var(--ease-io)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:var(--c-accent-hover)}
}
/* Aktiv: gedrueckt per Innenschatten statt dunklerem Orange, Navy bleibt ueber 4,5:1 */
.btn:active{transform:scale(.97);background:var(--c-accent);box-shadow:var(--sh-btn-press)}
.btn:focus-visible{outline:2px solid var(--c-focus);outline-offset:3px}
.btn:disabled,.btn[aria-disabled="true"]{background:var(--c-disabled-bg);color:var(--c-disabled-ink);box-shadow:none;cursor:not-allowed;transform:none}
.btn .ic{width:18px;height:18px;stroke-width:2;transition:transform var(--d-base) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .btn:hover .ic{transform:translateX(3px)}
  .btn:disabled:hover,.btn[aria-disabled="true"]:hover{background:var(--c-disabled-bg)}
  .btn:disabled:hover .ic,.btn[aria-disabled="true"]:hover .ic{transform:none}
}

.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:44px;padding:0 var(--s-5);border:0;border-radius:var(--r-m);background:transparent;box-shadow:inset 0 0 0 1.5px var(--c-ink);color:var(--c-ink);font:600 var(--t-15)/1 var(--f-display);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color var(--d-base) var(--ease-io),color var(--d-base) var(--ease-io),transform var(--d-fast) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .btn-ghost:hover{background:var(--c-ink);color:var(--c-on-dark)}
  .btn-ghost:disabled:hover,.btn-ghost[aria-disabled="true"]:hover{background:transparent;color:var(--c-disabled-ink)}
}
.btn-ghost:active{transform:scale(.97)}
.btn-ghost:focus-visible{outline:2px solid var(--c-focus);outline-offset:3px}
.btn-ghost:disabled,.btn-ghost[aria-disabled="true"]{box-shadow:inset 0 0 0 1.5px var(--c-hair-strong);color:var(--c-disabled-ink);background:transparent;cursor:not-allowed;transform:none}

/* Grosser Textlink: Unterstrich rueckt beim Hover heran, Schrift wird Orange-Ink (5:1) wie im Claude-Design-Vorschlag */
.link{display:inline-flex;align-items:center;min-height:44px;color:var(--c-ink);font:600 var(--t-17)/1.2 var(--f-display);text-decoration:underline;text-decoration-color:var(--c-accent);text-decoration-thickness:2px;text-underline-offset:7px;transition:color var(--d-base) var(--ease-io),text-decoration-color var(--d-base) var(--ease-io),text-underline-offset var(--d-base) var(--ease-io)}
@media (hover:hover) and (pointer:fine){
  .link:hover{color:var(--c-accent-ink);text-decoration-color:var(--c-accent-line);text-underline-offset:4px}
}
.link:active{text-decoration-color:var(--c-accent-line);text-decoration-thickness:3px}
.link:focus-visible{outline:2px solid var(--c-focus);outline-offset:4px;border-radius:var(--r-s)}
.link[aria-disabled="true"]{color:var(--c-disabled-ink);text-decoration-color:var(--c-hair-strong);pointer-events:none}
.link.on-dark{color:var(--c-on-dark)}
@media (hover:hover) and (pointer:fine){
  .link.on-dark:hover{color:var(--c-on-dark);text-decoration-color:var(--c-accent)}
}

.txt{color:inherit;text-decoration:underline;text-decoration-color:var(--c-accent);text-decoration-thickness:1.5px;text-underline-offset:3px;transition:text-decoration-color var(--d-base) var(--ease-io),text-underline-offset var(--d-base) var(--ease-io)}
@media (hover:hover) and (pointer:fine){
  .txt:hover{text-decoration-color:var(--c-accent-line);text-underline-offset:2px}
}
.txt:active{text-decoration-color:var(--c-accent-line);text-decoration-thickness:2.5px}
.txt:focus-visible{outline-offset:2px;border-radius:2px}

/* ==========================================================
   4. Kopf, Untermenue, mobiles Menue
   ========================================================== */
.site-head{position:fixed;inset:0 0 auto;z-index:50;height:var(--head-h);background:transparent;transition:background-color var(--d-slow) var(--ease-io),box-shadow var(--d-slow) var(--ease-io)}
.site-head.is-scrolled,.site-head.menu-open{background:var(--c-bg-top);box-shadow:0 1px 0 var(--c-hair)}
.head-in{height:100%;max-width:1440px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);padding:0 var(--s-3) 0 var(--gutter)}
.brand{display:inline-flex;align-items:center;flex:none;min-height:44px;border-radius:var(--r-s)}
.brand img{height:36px;width:auto}
.nav{display:none}
.nav-list{display:flex;align-items:center;gap:var(--s-5);list-style:none;margin:0;padding:0}
.nav-link{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0;border:0;background:none;color:var(--c-ink);text-decoration:none;font:500 var(--t-15)/1 var(--f-body);white-space:nowrap;cursor:pointer;transition:color var(--d-base) var(--ease-io)}
.nav-link::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:2px;border-radius:2px;background:var(--c-accent);transform:scaleX(0);transform-origin:left;transition:transform var(--d-base) var(--ease-out)}
.nav-link[aria-expanded="true"]::after,.nav-link[aria-current="page"]::after{transform:scaleX(1)}
@media (hover:hover) and (pointer:fine){
  .nav-link:hover{color:var(--c-accent-ink)}
  .nav-link:hover::after{transform:scaleX(1)}
}
.nav-link:active::after{background:var(--c-accent-line)}
.nav-link:focus-visible{outline:2px solid var(--c-focus);outline-offset:4px;border-radius:var(--r-s)}
.nav-link .chev{width:14px;height:14px;stroke-width:2;transition:transform var(--d-base) var(--ease-io)}
.nav-link[aria-expanded="true"] .chev{transform:rotate(180deg)}
.nav-tel .ic{width:17px;height:17px}
.nav-tel .tel-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.has-sub{position:relative}
.sub{position:absolute;top:calc(100% + var(--s-1));left:calc(-1 * var(--s-4));min-width:300px;list-style:none;margin:0;padding:var(--s-2);background:var(--c-bg-top);border-radius:var(--r-l);box-shadow:var(--sh-panel);visibility:hidden;opacity:0;transform:translateY(-4px) scale(.98);transform-origin:top left;transition:opacity var(--d-base) var(--ease-in),transform var(--d-base) var(--ease-in),visibility 0s linear var(--d-base)}
.has-sub.is-open > .sub{visibility:visible;opacity:1;transform:none;transition:opacity var(--d-base) var(--ease-out),transform var(--d-base) var(--ease-out),visibility 0s}
.sub a{display:flex;align-items:center;min-height:44px;padding:var(--s-2) var(--s-3);border-radius:var(--r-s);color:var(--c-ink);text-decoration:none;font:500 var(--t-15)/1.3 var(--f-body);transition:background-color var(--d-fast) var(--ease-io)}
@media (hover:hover) and (pointer:fine){
  .sub a:hover{background:var(--c-wash)}
}
.sub a:active{background:var(--c-wash-strong)}
.sub a:focus-visible{outline-offset:-2px}
.sub a[aria-current="page"]{background:var(--c-accent-wash)}
.head-mobile{display:flex;gap:var(--s-1)}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:var(--r-m);background:none;color:var(--c-ink);cursor:pointer;transition:background-color var(--d-fast) var(--ease-io),transform var(--d-fast) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .icon-btn:hover{background:var(--c-wash)}
}
.icon-btn:active{transform:scale(.97);background:var(--c-wash-strong)}
.icon-btn:focus-visible{outline-offset:2px}
.icon-btn .ic{width:22px;height:22px;stroke-width:1.8}
.icon-btn .i-close{display:none}
.icon-btn[aria-expanded="true"] .i-menu{display:none}
.icon-btn[aria-expanded="true"] .i-close{display:block}
.mnav{position:absolute;top:100%;left:0;right:0;max-height:calc(100svh - var(--head-h));overflow:auto;overscroll-behavior:contain;padding:var(--s-2) var(--gutter) var(--s-6);background:var(--c-bg-top);box-shadow:0 1px 0 var(--c-hair),0 24px 40px -24px var(--c-shadow);visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity var(--d-base) var(--ease-in),transform var(--d-base) var(--ease-in),visibility 0s linear var(--d-base)}
.mnav.is-open{visibility:visible;opacity:1;transform:none;transition:opacity var(--d-slow) var(--ease-out),transform var(--d-slow) var(--ease-out),visibility 0s}
.mnav ul{list-style:none;margin:0;padding:0}
.mnav-link{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:56px;padding:0;border:0;border-bottom:1px solid var(--c-hair);background:none;color:var(--c-ink);text-align:left;text-decoration:none;font:600 var(--t-20)/1.2 var(--f-display);cursor:pointer;transition:color var(--d-fast) var(--ease-io)}
.mnav-link:active{color:var(--c-muted)}
.mnav-link:focus-visible{outline-offset:-2px;border-radius:var(--r-s)}
.mnav-link .chev{width:18px;height:18px;transition:transform var(--d-base) var(--ease-io)}
.mnav-link[aria-expanded="true"] .chev{transform:rotate(180deg)}
.mnav .mnav-sub{padding:var(--s-1) 0 var(--s-2) var(--s-4);border-bottom:1px solid var(--c-hair)}
.mnav-sub a{display:flex;align-items:center;min-height:48px;color:var(--c-ink);text-decoration:none;font:500 var(--t-17)/1.3 var(--f-body);transition:color var(--d-fast) var(--ease-io)}
.mnav-sub a:active{color:var(--c-muted)}
.mnav-sub a:focus-visible{outline-offset:-2px;border-radius:var(--r-s)}
.mnav-cta{display:grid;gap:var(--s-2);margin-top:var(--s-5)}
.mnav-cta .btn{width:100%}
.mnav-cta .row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2)}
.mnav-cta .btn-ghost{min-height:48px}
@media (min-width:1024px){
  .head-in{padding:0 var(--gutter)}
  .brand img{height:52px}
  .nav{display:block}
  .head-mobile,.mnav{display:none}
}
@media (min-width:1280px){
  .nav-list{gap:var(--s-6)}
  .nav-tel .tel-txt{position:static;width:auto;height:auto;overflow:visible;clip:auto}
}

/* ==========================================================
   5. Hero Startseite mit Buero-Reveal von rechts (einziger mutiger Moment)
   ========================================================== */
.hero{position:relative;overflow:hidden;background:var(--g-page)}
/* Bildband passt sich der Hoehe an: H1, Termin und Nebenweg bleiben ueber Fast-Lane-Button und Kontaktleiste */
.hero-stage{position:relative;height:clamp(220px,calc(100svh - 372px),396px);overflow:hidden}
.hero-office{position:absolute;inset:0;overflow:hidden;animation:office var(--d-enter) var(--ease-out) both}
.hero-office img{width:100%;height:100%;object-fit:cover;object-position:42% 50%;filter:blur(2px) saturate(.75) brightness(1.04);transform:scale(1.03)}
.hero-office::before,.hero-office::after{content:"";position:absolute;inset:0;z-index:1}
.hero-office::before{background:var(--g-veil-y)}
.hero-office::after{background:var(--g-glow-y)}
.hero-office .fade-b{display:none}
.hero-stage .fade-m{position:absolute;left:0;right:0;bottom:0;height:44px;background:var(--g-fade-m);z-index:2}
.hero-portrait{position:absolute;left:3%;top:88px;height:540px;width:auto;max-width:none;z-index:1;animation:rise var(--d-enter) var(--ease-out) 160ms both}
.hero-copy{position:relative;z-index:2;display:flex;flex-direction:column;padding:var(--s-3) var(--gutter) var(--s-8)}
.hero-copy > *{animation:rise var(--d-enter) var(--ease-out) both;animation-delay:calc(var(--i,0) * 50ms)}
.hero-h{order:1;font-size:var(--t-h1);line-height:1.05;letter-spacing:-.025em}
.hero-meta{order:2;margin-top:var(--s-2);font-size:var(--t-15);line-height:1.4;color:var(--c-muted)}
.hero-actions{order:3;display:flex;flex-direction:column;gap:var(--s-1);margin-top:var(--s-4)}
.hero-actions .link{justify-content:center;align-self:center}   /* Tippflaeche nur so breit wie der Text: der kompakte Fast-Lane-Knopf rechts beruehrt sie nicht */
.hero-rating{order:4;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--s-2) var(--s-3);margin-top:var(--s-2)}
.hero-rating .num{font:600 22px/1 var(--f-display)}
.hero-rating .cnt{font-size:var(--t-14);color:var(--c-muted)}
.hero-rating .link{display:none}
.hero-sub{order:5;margin-top:var(--s-7);font:500 var(--t-20)/1.35 var(--f-body)}
.hero-lead{order:6;margin-top:var(--s-3);max-width:54ch;font-size:var(--t-16);color:var(--c-muted)}
/* Sehr kurze Handys (z. B. 320x568): Bildband und Porträt kleiner, damit Termin ueber der Kontaktleiste bleibt. 375x667 und hoeher unveraendert */
@media (max-width:767px) and (max-height:600px){
  .hero-stage{height:196px}
  .hero-portrait{top:52px;height:400px}
  .hero-h{font-size:28px}
  .hero-meta{margin-top:var(--s-1)}
  .hero-actions{margin-top:var(--s-3)}
}
@keyframes office{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes rise{from{opacity:0;transform:translateY(10px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (min-width:768px) and (max-width:1023px){
  .hero-stage{height:520px}
  .hero-portrait{left:8%;top:96px;height:700px}
  .hero-copy{max-width:720px;padding-top:var(--s-4)}
  .hero-actions{flex-direction:row;align-items:center;gap:var(--s-6)}
  .hero-rating{justify-content:flex-start}
}
@media (min-width:1024px){
  .hero{display:flex;min-height:clamp(720px,100svh,960px)}
  .hero-stage{position:absolute;inset:0;height:auto}
  .hero-office{left:50%}
  .hero-office img{object-position:38% 50%}
  .hero-office::before{background:var(--g-veil-top),var(--g-veil-x)}
  .hero-office::after{background:var(--g-glow-x)}
  .hero-office .fade-b{display:block;position:absolute;inset:0;z-index:1;background:var(--g-fade-b)}
  .hero-stage .fade-m{display:none}
  .hero-portrait{left:calc(50% + min(7.64%,110px));top:max(108px,12.4%);height:97.8%}
  .hero-copy{--copy-w:min(620px,calc(57.6vw - var(--gutter) - 32px));flex:1;width:100%;max-width:1440px;margin:0 auto;padding:calc(var(--head-h) + clamp(48px,10svh,92px)) var(--gutter) 56px}
  .hero-copy > *{max-width:var(--copy-w)}
  .hero-meta{order:0;margin:0 0 var(--s-5);font-size:var(--t-16)}
  .hero-h{order:1;line-height:1.02}
  .hero-sub{order:2;margin-top:var(--s-6);font-size:var(--t-24);color:var(--c-ink)}
  .hero-lead{order:3;margin-top:var(--s-3);font-size:var(--t-17)}
  .hero-actions{order:4;flex-direction:row;align-items:center;gap:var(--s-6);margin:var(--s-7) 0 var(--s-7)}
  .hero-rating{order:5;width:var(--copy-w);margin-top:auto;padding-top:var(--s-5);border-top:1px solid var(--c-hair);justify-content:flex-start;gap:var(--s-4)}
  .hero-rating .num{font-size:var(--t-30)}
  .hero-rating .cnt{font-size:var(--t-15)}
  .hero-rating .stars .ic{width:16px;height:16px}
  .hero-rating .link{display:inline-flex;margin-left:auto;font-size:var(--t-15)}
}

/* ==========================================================
   6. Zitate und Bewertungs-Kennzahl
   ========================================================== */
.score{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-3)}
.score h2{font-size:var(--t-h3)}
.score-num{font:600 var(--t-num)/.9 var(--f-display);letter-spacing:-.04em;margin-top:var(--s-3)}
.score .stars .ic{width:22px;height:22px}
.score-txt{color:var(--c-muted)}
.quote blockquote p{overflow-wrap:anywhere;font-variant-ligatures:none;font-feature-settings:"liga" 0,"calt" 0,"dlig" 0,"ss01" 0,"ss02" 0}  /* Zitate woertlich: kein Pfeil-Ersatz fuer "->" */
.quote-lead blockquote p{font:500 clamp(24px,1.8vw + 14px,36px)/1.3 var(--f-display);letter-spacing:-.01em;overflow-wrap:break-word}
/* Das tiefe Anfuehrungszeichen sitzt auf der Grundlinie: eigene Zeile mit Luft (Zierzeichen, aria-hidden) */
.quote-mark{display:block;height:64px;margin:calc(-1 * var(--s-5)) 0 var(--s-2);font:600 72px/.6 var(--f-display);color:var(--c-accent)}
.quote figcaption{margin-top:var(--s-4);font-size:var(--t-15);color:var(--c-muted)}
.quote figcaption strong{color:var(--c-ink);font-weight:600}
.quote-pair{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-6);margin-top:var(--s-7);padding-top:var(--s-6);border-top:1px solid var(--c-hair)}
.quote-pair + .quote-pair{margin-top:var(--s-6)}
.quote-pair blockquote p{font-size:var(--t-17);line-height:1.55}
@media (min-width:768px){
  .quote-pair{grid-template-columns:1fr 1fr;gap:0}
  .quote-pair .quote:last-child{padding-left:var(--s-6);margin-left:var(--s-6);border-left:1px solid var(--c-hair)}
}

/* ==========================================================
   7. Wegweiser-Liste (Leistungen)
   ========================================================== */
.svc-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--c-hair)}
.svc a{display:grid;grid-template-columns:1fr auto;column-gap:var(--s-5);row-gap:var(--s-1);align-items:center;padding:var(--s-5) var(--s-3);border-bottom:1px solid var(--c-hair);color:var(--c-ink);text-decoration:none;transition:background-color var(--d-base) var(--ease-io),transform var(--d-fast) var(--ease-out)}
.svc-t{grid-column:1;font:600 var(--t-h3)/1.15 var(--f-display);letter-spacing:-.015em;overflow-wrap:anywhere}
.svc-d{grid-column:1;font-size:var(--t-16);color:var(--c-muted)}
.svc-arw{grid-column:2;grid-row:1 / span 2;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--c-hair-strong);transition:background-color var(--d-base) var(--ease-io),box-shadow var(--d-base) var(--ease-io)}
.svc-arw .ic{width:18px;height:18px;stroke-width:2;transition:transform var(--d-base) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .svc a:hover{background:var(--c-wash)}
  .svc a:hover .svc-arw{background:var(--c-accent);box-shadow:none}
  .svc a:hover .svc-arw .ic{transform:translateX(2px)}
}
.svc a:active{transform:scale(.99);background:var(--c-wash-strong)}
.svc a:focus-visible{outline-offset:-2px;border-radius:var(--r-s)}
.svc a[aria-current="page"] .svc-arw{background:var(--c-accent-wash);box-shadow:none}
.tag{display:inline-block;margin-left:var(--s-2);padding:2px var(--s-2);border-radius:var(--r-s);background:var(--c-accent-wash);font:600 var(--t-14)/1.4 var(--f-body);letter-spacing:0;vertical-align:middle}
@media (min-width:1024px){ .svc a{padding:var(--s-6) var(--s-4)} }

/* ==========================================================
   8. Zeitleiste (Ablauf) und Startkasten
   ========================================================== */
.steps{position:relative;list-style:none;margin:var(--s-7) 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-6)}
/* Verbindungslinie je Schritt (nicht auf dem letzten): endet genau am naechsten Kreis */
.step:not(:last-child)::after{content:"";position:absolute;left:19px;top:40px;bottom:calc(-1 * var(--s-6));width:1.5px;background:var(--c-hair-strong)}
.step{position:relative;padding-left:var(--s-8)}
.step-n{position:absolute;left:0;top:0;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--c-bg-deep);box-shadow:inset 0 0 0 1.5px var(--c-ink);font:600 var(--t-17)/1 var(--f-display)}
.step:last-child .step-n{background:var(--c-accent);box-shadow:none}
.step h3{font-size:var(--t-20);padding-top:var(--s-2)}
.step p{margin-top:var(--s-2);font-size:var(--t-16);color:var(--c-muted);max-width:36ch}
.startbox{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-5);margin-top:var(--s-8);padding-top:var(--s-6);border-top:1px solid var(--c-hair)}
.startbox h3{font-size:var(--t-h3)}
.startbox p{margin-top:var(--s-2);color:var(--c-muted);max-width:60ch}
.startbox .acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-5)}
@media (min-width:1024px){
  .steps{grid-template-columns:repeat(4,1fr);gap:var(--s-6)}
  .step:not(:last-child)::after{left:40px;right:calc(-1 * var(--s-6));top:19px;bottom:auto;width:auto;height:1.5px}
  .step{padding-left:0;padding-top:var(--s-8)}
  .step h3{padding-top:0}
  .startbox{grid-template-columns:1fr auto;align-items:center}
}

/* ==========================================================
   9. Dunkle Zone (Grenzgaenger)
   ========================================================== */
.cross{--c-focus:var(--c-on-dark);padding:var(--sec) 0;background:var(--c-ink);color:var(--c-on-dark)}
.cross h2{max-width:20ch}
.cross-lead{margin-top:var(--s-5);max-width:46ch;font-size:var(--t-20);line-height:1.5;color:var(--c-on-dark-muted)}
.dist{margin:var(--s-8) 0 var(--s-7)}
.dist-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s-3)}
.dist-pt{display:inline-flex;align-items:center;gap:var(--s-2);font:600 var(--t-17)/1.2 var(--f-display)}
.dist-pt::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--c-accent)}
.dist-pt.lux::before{background:transparent;box-shadow:inset 0 0 0 2px var(--c-accent)}
.dist-line{position:relative;height:2px;background:repeating-linear-gradient(90deg,var(--c-hair-dark) 0 6px,transparent 6px 12px)}
.dist-lbl{position:absolute;left:50%;bottom:var(--s-3);transform:translateX(-50%);white-space:nowrap;font-size:var(--t-14);color:var(--c-on-dark-muted)}
.dist figcaption{margin-top:var(--s-5);max-width:60ch;color:var(--c-on-dark-muted)}
@media (max-width:559px){
  .dist-row{grid-template-columns:auto;justify-items:start;gap:var(--s-2)}
  .dist-line{width:2px;height:56px;margin-left:5px;background:repeating-linear-gradient(180deg,var(--c-hair-dark) 0 6px,transparent 6px 12px)}
  .dist-lbl{left:var(--s-5);bottom:auto;top:50%;transform:translateY(-50%)}
}
.cross-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-7)}
.cross-big{font:500 clamp(22px,1.4vw + 14px,30px)/1.4 var(--f-display);letter-spacing:-.01em}
.cross-item{padding:var(--s-5) 0;border-top:1px solid var(--c-hair-dark)}
.cross-item:first-child{padding-top:0;border-top:0}
.cross-item h3{font-size:var(--t-20)}
.cross-item p{margin-top:var(--s-2);color:var(--c-on-dark-muted);max-width:51ch}
.cross-note{margin-top:var(--s-5);font-size:var(--t-15);color:var(--c-on-dark-muted);max-width:54ch}
.cross-acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4) var(--s-6);margin-top:var(--s-7)}
.cross .btn:focus-visible{outline-color:var(--c-on-dark)}
@media (min-width:1024px){ .cross-grid{grid-template-columns:5fr 7fr;gap:var(--s-9)} }

/* ==========================================================
   10. Mini-Rechner (Leer, Fehler, Ergebnis, Deaktiviert)
   ========================================================== */
.calc{padding:var(--s-5);border-radius:var(--r-l);background:var(--c-bg-top);box-shadow:var(--sh-lift)}
.calc-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-2)}
.calc-head h3{font-size:var(--t-20)}
.badge{display:inline-flex;align-items:center;min-height:28px;padding:0 var(--s-2);border-radius:var(--r-s);background:var(--c-accent-wash);font:600 var(--t-14)/1 var(--f-body)}
.calc-fields{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-4);margin-top:var(--s-5)}
.field label{display:block;margin-bottom:var(--s-2);font:600 var(--t-15)/1.3 var(--f-body)}
.money{position:relative}
.money input{width:100%;min-width:0;height:56px;padding:0 var(--s-8) 0 var(--s-4);border:0;border-radius:var(--r-m);background:var(--c-white);box-shadow:inset 0 0 0 1.5px var(--c-field);color:var(--c-ink);font:600 var(--t-20)/1 var(--f-display);font-variant-numeric:tabular-nums;transition:box-shadow var(--d-base) var(--ease-io)}
/* Platzhalter in Fliesstextschrift, damit er nicht wie ein eingetragener Wert wirkt (Wert: Outfit 20 px, 600) */
.money input::placeholder{color:var(--c-muted);opacity:1;font:400 var(--t-17)/1 var(--f-body)}
@media (hover:hover) and (pointer:fine){
  .money input:hover{box-shadow:inset 0 0 0 1.5px var(--c-field-hover)}
}
.money input:focus{box-shadow:inset 0 0 0 2px var(--c-ink)}
.money input:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}
.money input[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--c-error)}
.money input:disabled{background:var(--c-disabled-bg);color:var(--c-disabled-ink);box-shadow:none;cursor:not-allowed}
.money .unit{position:absolute;right:var(--s-4);top:50%;transform:translateY(-50%);font:600 var(--t-17)/1 var(--f-display);color:var(--c-muted);pointer-events:none}
.hint{margin-top:var(--s-2);font-size:var(--t-14);color:var(--c-muted)}
.err{display:flex;gap:var(--s-2);align-items:flex-start;margin-top:var(--s-2);font-size:var(--t-14);font-weight:600;color:var(--c-error);overflow-wrap:anywhere}
.err::before{content:"!";flex:none;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--c-error);color:var(--c-white);font:700 var(--t-12)/1 var(--f-display);margin-top:1px}
.err[hidden]{display:none}
.calc-out{margin-top:var(--s-5);padding-top:var(--s-5);border-top:1px solid var(--c-hair)}
.calc-rows{margin:0;display:grid;gap:var(--s-2)}
.calc-rows div[hidden],.calc-result[hidden]{display:none!important}
.calc-rows div{display:flex;justify-content:space-between;gap:var(--s-4);font-size:var(--t-15)}
.calc-rows dt{color:var(--c-muted)}
.calc-rows dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.calc-result{margin-top:var(--s-4);padding:var(--s-4);border-radius:var(--r-m);background:var(--c-bg-deep)}
.calc-result .lbl{font-size:var(--t-14);color:var(--c-muted)}
.calc-result .val{margin-top:var(--s-1);font:600 clamp(26px,2vw + 16px,38px)/1.1 var(--f-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.calc-empty{font-size:var(--t-15);color:var(--c-muted)}
.calc[data-state="leer"] .calc-rows,.calc[data-state="leer"] .calc-result{display:none}
.calc:not([data-state="leer"]) .calc-empty{display:none}
.calc[data-state="fehler"] .calc-rows,.calc[data-state="fehler"] .calc-result{opacity:.4}
.calc-rows,.calc-result{transition:opacity var(--d-base) var(--ease-io)}
.calc-foot{margin-top:var(--s-4);font-size:var(--t-14);color:var(--c-muted)}
.calc-acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-5);margin-top:var(--s-5)}
/* Hauptweg im Rechner: bricht am Handy zweizeilig um, dann mit Luft und mittig */
.calc-acts .btn{line-height:1.2;padding-top:var(--s-3);padding-bottom:var(--s-3);text-align:center}
@media (max-width:559px){ .calc-acts .btn{width:100%;padding-left:var(--s-5);padding-right:var(--s-5)} }
@media (min-width:560px){ .calc{padding:var(--s-6)} .calc-fields{grid-template-columns:1fr 1fr} }
/* Formular: Ruhe, Hover, Fokus, Fehler, Deaktiviert (uebernommen aus baufinanzierung-luxemburg.html) */
.fld label{display:block;margin-bottom:var(--s-2);font:600 var(--t-15)/1.3 var(--f-body)}
.fld .opt{font-weight:400;color:var(--c-muted)}
.inp{display:block;width:100%;min-width:0;height:56px;padding:0 var(--s-4);border:0;border-radius:var(--r-m);background:var(--c-white);box-shadow:inset 0 0 0 1.5px var(--c-field);color:var(--c-ink);font:500 var(--t-17)/1.3 var(--f-body);transition:box-shadow var(--d-base) var(--ease-io)}
textarea.inp{height:auto;min-height:144px;padding:var(--s-3) var(--s-4);resize:vertical}
.inp::placeholder{color:var(--c-muted);opacity:1}
@media (hover:hover) and (pointer:fine){ .inp:hover{box-shadow:inset 0 0 0 1.5px var(--c-field-hover)} }
.inp:focus{box-shadow:inset 0 0 0 2px var(--c-ink)}
.inp:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}
.inp[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--c-error)}
.inp:disabled{background:var(--c-disabled-bg);color:var(--c-disabled-ink);box-shadow:none;cursor:not-allowed}
.chk{display:grid;grid-template-columns:24px 1fr;gap:var(--s-3);align-items:start;min-height:44px;margin-top:var(--s-5);font-size:var(--t-15);line-height:1.5;cursor:pointer}
.chk input{width:24px;height:24px;margin:0;accent-color:var(--c-ink);cursor:pointer}
.chk input:focus-visible{outline:2px solid var(--c-focus);outline-offset:3px}
.chk input[aria-invalid="true"]{outline:2px solid var(--c-error);outline-offset:2px}
.chk input:disabled{cursor:not-allowed}
.form-note{display:flex;gap:var(--s-3);align-items:flex-start;margin-top:var(--s-4);padding:var(--s-4);border-radius:var(--r-m);background:var(--c-bg-deep);font-size:var(--t-15);color:var(--c-ink)}
.form-note[hidden]{display:none}
.form-note .ic{margin-top:2px}

/* ==========================================================
   11. Ruhiges Band (Kaeuferzertifikat)
   ========================================================== */
.cert{padding:var(--s-8) 0;background:var(--c-bg-deep);border-top:1px solid var(--c-hair);border-bottom:1px solid var(--c-hair)}
.cert-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-5)}
.cert h2{font-size:clamp(26px,1.8vw + 16px,42px);max-width:22ch}
.cert-body p{max-width:44ch;color:var(--c-muted)}
.cert-body .btn-ghost{margin-top:var(--s-5)}
@media (min-width:1024px){
  .cert{padding:var(--s-9) 0}
  .cert-grid{grid-template-columns:7fr 5fr;gap:var(--s-9);align-items:end}
}

/* ==========================================================
   12. Fast-Lane-Einstiegskarte
   ========================================================== */
.flc-sec{padding:var(--s-8) 0 0}
/* volle Inhaltsbreite wie die anderen Sektionen: Text links (Lesemass begrenzt), Pfeil rechts */
.flc-box{max-width:none}
.flc > span:first-child{max-width:68ch}
.flc{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--s-4);padding:var(--s-5);border-radius:var(--r-l);background:var(--c-bg-top);box-shadow:inset 0 0 0 1px var(--c-hair),0 24px 48px -32px var(--c-shadow);color:var(--c-ink);text-decoration:none;transition:box-shadow var(--d-base) var(--ease-io),transform var(--d-base) var(--ease-out)}
.flc-t{display:block;font:600 clamp(20px,1.2vw + 14px,26px)/1.25 var(--f-display);letter-spacing:-.01em}
.flc-s{display:block;margin-top:var(--s-2);font-size:var(--t-16);color:var(--c-muted)}
.flc-arw{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--c-accent-line);transition:background-color var(--d-base) var(--ease-io),box-shadow var(--d-base) var(--ease-io)}
.flc-arw .ic{width:18px;height:18px;stroke-width:2;transition:transform var(--d-base) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .flc:hover{box-shadow:inset 0 0 0 1px var(--c-hair-hover),0 28px 52px -30px var(--c-shadow);transform:translateY(-2px)}
  .flc:hover .flc-arw{background:var(--c-accent);box-shadow:none}
  .flc:hover .flc-arw .ic{transform:translateX(2px)}
}
.flc:active{transform:scale(.99)}
.flc:focus-visible{outline:2px solid var(--c-focus);outline-offset:3px}
.flc-legal{margin-top:var(--s-3);font-size:var(--t-14);color:var(--c-muted)}
@media (min-width:768px){ .flc{padding:var(--s-6);gap:var(--s-6)} }
@media (min-width:1024px){ .flc{padding:var(--s-6) var(--s-7)} .flc-arw{width:56px;height:56px} }

/* ==========================================================
   13. FAQ-Akkordeon
   ========================================================== */
.acc{border-top:1px solid var(--c-hair)}
.acc-item{border-bottom:1px solid var(--c-hair)}
.acc-btn{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);width:100%;min-height:64px;padding:var(--s-5) var(--s-2);border:0;border-radius:var(--r-s);background:none;color:var(--c-ink);text-align:left;font:600 var(--t-20)/1.3 var(--f-display);letter-spacing:-.01em;-webkit-hyphens:manual;hyphens:manual;overflow-wrap:break-word;cursor:pointer;transition:background-color var(--d-fast) var(--ease-io)}
@media (hover:hover) and (pointer:fine){
  .acc-btn:hover{background:var(--c-wash)}
  .acc-btn:hover .acc-ic{box-shadow:inset 0 0 0 1.5px var(--c-hair-hover)}
  .acc-btn[aria-expanded="true"]:hover .acc-ic{box-shadow:none}
}
.acc-btn:active{background:var(--c-wash-strong)}
.acc-btn:focus-visible{outline-offset:-2px}
.acc-ic{position:relative;flex:none;width:32px;height:32px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--c-hair-strong);transition:background-color var(--d-base) var(--ease-io),box-shadow var(--d-base) var(--ease-io)}
.acc-ic::before,.acc-ic::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;border-radius:1px;background:var(--c-ink);transform:translate(-50%,-50%);transition:transform var(--d-base) var(--ease-io)}
.acc-ic::after{transform:translate(-50%,-50%) rotate(90deg)}
.acc-btn[aria-expanded="true"] .acc-ic{background:var(--c-accent);box-shadow:none}
.acc-btn[aria-expanded="true"] .acc-ic::after{transform:translate(-50%,-50%) rotate(90deg) scaleX(0)}
.acc-panel{padding:0 var(--s-2) var(--s-6);max-width:50ch;color:var(--c-muted)}
.acc-panel[hidden]{padding:0}
.acc-panel p + p{margin-top:var(--s-4)}
.acc-panel:not([hidden]) > *{animation:accIn var(--d-slow) var(--ease-out) both}
@keyframes accIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (min-width:1024px){
  .acc-btn{padding:var(--s-5) var(--s-4)}
  .acc-panel{padding:0 var(--s-4) var(--s-6)}
  .acc-panel[hidden]{padding:0}
}

/* ==========================================================
   14. Kontakt
   ========================================================== */
.contact{padding:var(--sec) 0;background:var(--c-bg-deep)}
.addr{margin-top:var(--s-4);font-size:var(--t-17);line-height:1.55}
.addr strong{font-family:var(--f-display);font-weight:600}
.ways{list-style:none;margin:var(--s-6) 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-2)}
.way{display:grid;grid-template-columns:44px 1fr;align-items:center;gap:var(--s-4);min-height:72px;padding:var(--s-3) var(--s-4);border-radius:var(--r-m);background:var(--c-bg-top);box-shadow:inset 0 0 0 1px var(--c-hair);color:var(--c-ink);text-decoration:none;transition:box-shadow var(--d-base) var(--ease-io),transform var(--d-fast) var(--ease-out)}
.way-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-m);background:var(--c-accent-wash);transition:background-color var(--d-base) var(--ease-io)}
.way-l{display:block;font-size:var(--t-14);color:var(--c-muted);line-height:1.3}
.way-v{display:block;font:600 var(--t-17)/1.3 var(--f-display);overflow-wrap:anywhere}
@media (hover:hover) and (pointer:fine){
  .way:hover{box-shadow:inset 0 0 0 1px var(--c-hair-hover)}
  .way:hover .way-ic{background:var(--c-accent)}
}
.way:active{transform:scale(.98)}
.way:focus-visible{outline-offset:2px}
.service24{display:flex;gap:var(--s-3);align-items:flex-start;margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--c-hair);max-width:56ch}
.service24 .ic{margin-top:3px}
.service24 + .btn,.service24 + p + .btn{margin-top:var(--s-5)}
@media (min-width:560px){ .ways{grid-template-columns:1fr 1fr} .ways li:last-child:nth-child(odd){grid-column:1 / -1} }

/* ==========================================================
   15. Bild-Rahmen mit Hover und Bildplatz
   ========================================================== */
.media{position:relative;overflow:hidden;border-radius:var(--r-l);background:var(--c-bg)}
.media img{width:100%;height:100%;object-fit:cover;transition:transform var(--d-slow) var(--ease-out)}
@media (hover:hover) and (pointer:fine){ .media:hover img{transform:scale(1.04)} }
.media-cap{margin-top:var(--s-3);font-size:var(--t-14);color:var(--c-muted)}
/* Bildplatz: ruhige Flaeche im spaeteren Format, Text "Bild von ... folgt". Kein Stockfoto, keine KI-Bilder. */
.bildplatz{display:grid;place-items:center;align-content:center;gap:var(--s-3);padding:var(--s-5);text-align:center;background:var(--g-bildplatz);box-shadow:inset 0 0 0 1px var(--c-hair);color:var(--c-muted);transition:box-shadow var(--d-base) var(--ease-io)}
.bildplatz::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 78% 18%,rgba(233,118,3,.08),rgba(233,118,3,0) 70%);pointer-events:none}
.bildplatz-ic{position:relative;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--c-hair-strong);color:var(--c-ink);transition:transform var(--d-slow) var(--ease-out),box-shadow var(--d-base) var(--ease-io)}
.bildplatz-ic .ic{width:22px;height:22px}
.bildplatz-t{position:relative;max-width:26ch;font:600 var(--t-15)/1.35 var(--f-display);color:var(--c-ink)}
@media (hover:hover) and (pointer:fine){
  .bildplatz:hover{box-shadow:inset 0 0 0 1px var(--c-hair-hover)}
  .bildplatz:hover .bildplatz-ic{transform:scale(1.04);box-shadow:inset 0 0 0 1.5px var(--c-hair-hover)}
}
.ar-3x2{aspect-ratio:3 / 2}
.ar-4x5{aspect-ratio:4 / 5}
.ar-1x1{aspect-ratio:1 / 1}
.ar-3x2-4x5{aspect-ratio:4 / 5}
@media (min-width:768px){ .ar-3x2-4x5{aspect-ratio:3 / 2} }
/* Bildplatz am Handy, solange kein Foto da ist: volle Breite im flachen Format 3:2 statt 4:5 (kein Loch rechts, weniger leere Flaeche).
   Echte Fotos (.media ohne .bildplatz) behalten 4:5. */
@media (max-width:767px){ .bildplatz.ar-3x2-4x5{aspect-ratio:3 / 2;width:100%} }
.bildplatz--klein{gap:var(--s-2);padding:var(--s-3)}
.bildplatz--klein .bildplatz-t{font-size:var(--t-14)}
@media (max-width:767px){ .bildplatz--klein .bildplatz-ic{display:none} }

/* ==========================================================
   16. Seitenfuss
   ========================================================== */
.foot{--c-focus:var(--c-on-dark);padding:var(--s-8) 0 var(--s-6);background:var(--c-ink);color:var(--c-on-dark)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-6)}
.foot-brand img{height:52px;width:auto}
.foot-brand p{margin-top:var(--s-4);font-size:var(--t-15);color:var(--c-on-dark-muted);line-height:1.55}
.foot h2{font:600 var(--t-15)/1.3 var(--f-body);letter-spacing:0;color:var(--c-on-dark-muted);margin-bottom:var(--s-2)}
.foot ul{list-style:none;margin:0;padding:0}
.foot a,.foot-btn{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;color:var(--c-on-dark);font:500 var(--t-15)/1.3 var(--f-body);text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1.5px;text-underline-offset:4px;cursor:pointer;overflow-wrap:anywhere;transition:text-decoration-color var(--d-base) var(--ease-io)}
@media (hover:hover) and (pointer:fine){
  .foot a:hover,.foot-btn:hover{text-decoration-color:var(--c-accent)}
}
.foot a:active,.foot-btn:active{text-decoration-color:var(--c-accent-line)}
.foot a:focus-visible,.foot-btn:focus-visible{outline-offset:2px;border-radius:var(--r-s)}
.foot-bottom{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--s-5);margin-top:var(--s-7);padding-top:var(--s-4);border-top:1px solid var(--c-hair-dark);font-size:var(--t-14);color:var(--c-on-dark-muted)}
.foot-bottom .copy{margin-right:auto}
/* Handy: Copyright eigene Zeile, darunter die drei Links links buendig in einer Reihe */
@media (max-width:767px){
  .foot-bottom{gap:0 var(--s-3)}
  .foot-bottom a,.foot-bottom .foot-btn{font-size:var(--t-14)}
  .foot-bottom .copy{flex:0 0 100%;margin:0 0 var(--s-1)}
}
@media (min-width:768px){ .foot-grid{grid-template-columns:1.3fr 1fr 1fr 1fr;gap:var(--s-6)} }

/* ==========================================================
   17. Feste Kontaktleiste (Handy)
   ========================================================== */
.cbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;gap:var(--s-2);padding:var(--s-2) var(--s-2) calc(var(--s-2) + env(safe-area-inset-bottom));background:var(--c-ink)}
.cbar a{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-1);min-height:56px;border-radius:var(--r-m);color:var(--c-on-dark);text-decoration:none;font:600 var(--t-12)/1 var(--f-body);transition:transform var(--d-fast) var(--ease-out),background-color var(--d-fast) var(--ease-io),box-shadow var(--d-fast) var(--ease-io)}
@media (hover:hover) and (pointer:fine){
  .cbar a:hover{background:var(--c-wash-dark)}
}
.cbar a:active{transform:scale(.97);background:var(--c-wash-dark)}
.cbar a:focus-visible{outline:2px solid var(--c-on-dark);outline-offset:-2px}
.cbar a.is-main{background:var(--c-accent);color:var(--c-ink)}
@media (hover:hover) and (pointer:fine){
  .cbar a.is-main:hover{background:var(--c-accent-hover)}
}
.cbar a.is-main:active{background:var(--c-accent);box-shadow:var(--sh-btn-press)}
.cbar a.is-main:focus-visible{outline-color:var(--c-ink)}
@media (min-width:768px){ .cbar{display:none} }

/* ==========================================================
   18. Cookie-Hinweis (Attrappe) und Fast-Lane-Schaltflaeche
   ========================================================== */
.cookie{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:var(--s-4) var(--gutter) calc(var(--s-4) + env(safe-area-inset-bottom));background:var(--c-bg-top);box-shadow:0 -1px 0 var(--c-hair),0 -16px 40px -24px var(--c-shadow);opacity:0;transform:translateY(16px);transition:opacity var(--d-slow) var(--ease-out),transform var(--d-slow) var(--ease-out)}
.cookie[hidden]{display:none}
.cookie.is-on{opacity:1;transform:none}
.cookie h2{font-size:var(--t-17)}
.cookie p{margin-top:var(--s-1);font-size:var(--t-15);line-height:1.5;color:var(--c-muted)}
.cookie-acts{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2);margin-top:var(--s-3)}
.cookie-acts .btn-ghost{min-height:44px;padding:0 var(--s-3)}
/* Solange der Hinweis offen ist, reserviert die Seite unten seine Hoehe (JS setzt --cookie-h):
   so laesst sich jede Zeile, auch die Befugnisangabe der Fast-Lane-Karte, ueber den Hinweis scrollen. */
@media (max-width:767px){
  html.has-cookie body{padding-bottom:calc(max(var(--bar-h),var(--cookie-h)) + env(safe-area-inset-bottom) + var(--s-4))}
}
@media (min-width:768px){
  .cookie{left:var(--s-5);right:auto;bottom:var(--s-5);max-width:440px;padding:var(--s-5);border-radius:var(--r-l);box-shadow:0 0 0 1px var(--c-hair),0 24px 48px -24px var(--c-shadow)}
  .cookie-acts{margin-top:var(--s-4)}
  .cookie-acts .btn-ghost{min-height:48px}
}
/* Fast-Lane-Button (Variante C, freigegeben 20.10.2026): schwebt immer sichtbar, nicht wegklickbar.
   Helle Karte mit feiner Kontur und weichem Navy-Schatten, kein Seitenstreifen. Akzent traegt der orange Pfeilkreis
   (Navy-Pfeil auf Orange 4,54:1) und der Statuspunkt mit ruhigem Hof. Navy auf #F7F5F2 13:1.
   Handy: kompakt ueber der Kontaktleiste; Computer: Karte mit Frage und Unterzeile unten rechts. */
:root{--fl-h:52px;--fl-gap:var(--s-2);--fl-sh:0 0 0 1px var(--c-hair),0 2px 4px -2px rgba(20,31,59,.16),0 24px 48px -24px rgba(20,31,59,.55);--fl-sh-hover:0 0 0 1px var(--c-hair-strong),0 4px 8px -4px rgba(20,31,59,.2),0 32px 56px -24px rgba(20,31,59,.6)}
.flbtn{position:fixed;z-index:45;left:var(--s-3);right:var(--s-3);bottom:calc(var(--bar-h) + env(safe-area-inset-bottom) + var(--fl-gap));display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--s-3);min-height:var(--fl-h);padding:var(--s-2) var(--s-2) var(--s-2) var(--s-4);border-radius:var(--r-l);background:var(--c-bg-top);color:var(--c-ink);text-decoration:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),var(--fl-sh);animation:flIn var(--d-enter) var(--ease-out) 300ms both;transition:transform var(--d-fast) var(--ease-out),box-shadow var(--d-base) var(--ease-io),opacity var(--d-base) var(--ease-io),visibility 0s}
.flbtn-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.flbtn-k{display:inline-flex;align-items:center;gap:var(--s-2);font:600 var(--t-12)/1.2 var(--f-body);color:var(--c-accent-ink);letter-spacing:.02em}
/* Statuspunkt mit stillem Hof; atmet zweimal nach dem Eintritt, danach ruhig */
.flbtn-dot{position:relative;flex:none;width:8px;height:8px;border-radius:50%;background:var(--c-accent);box-shadow:0 0 0 3px var(--c-accent-wash)}
.flbtn-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--c-accent);opacity:0;animation:flDot 1.8s var(--ease-out) 900ms 2}
.flbtn-t{font:600 var(--t-15)/1.2 var(--f-display);letter-spacing:-.005em}
.flbtn-s{display:none}
.flbtn-arw{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--c-accent);color:var(--c-ink);box-shadow:var(--sh-btn);transition:background-color var(--d-base) var(--ease-io),box-shadow var(--d-fast) var(--ease-io)}
.flbtn-arw .ic{width:16px;height:16px;stroke-width:2;transition:transform var(--d-base) var(--ease-out)}
.flbtn-lang{display:none}
@media (hover:hover) and (pointer:fine){
  .flbtn:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),var(--fl-sh-hover)}
  .flbtn:hover .flbtn-arw{background:var(--c-accent-hover)}
  .flbtn:hover .flbtn-arw .ic{transform:translateX(2px)}
}
.flbtn:active{transform:scale(.98)}
.flbtn:active .flbtn-arw{box-shadow:var(--sh-btn-press)}
.flbtn:focus-visible{outline:2px solid var(--c-focus);outline-offset:3px}
@keyframes flIn{from{opacity:0;transform:translateY(8px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes flDot{0%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(2.6)}}
/* Handy: solange der Cookie-Hinweis offen ist, kurz ausgeblendet (er liegt ueber Leiste und Button), danach sofort da */
@media (max-width:767px){
  html.has-cookie .flbtn{opacity:0;visibility:hidden;transition:opacity var(--d-fast) var(--ease-in),visibility 0s linear var(--d-fast)}
  .foot{padding-bottom:calc(var(--s-6) + var(--fl-h) + var(--fl-gap) + var(--s-3))}
}
/* Niedrige Handys (bis 700 px Hoehe): flachere Karte, damit die Hero-Schaltflaechen frei bleiben; beide Zeilen bleiben */
@media (max-width:767px) and (max-height:700px){
  :root{--fl-h:44px}
  .flbtn{padding:6px 6px 6px var(--s-4)}
  .flbtn-tx{gap:1px}
  .flbtn-k{font-size:11px;line-height:1.1}
  .flbtn-t{font-size:var(--t-14);line-height:1.15}
  .flbtn-arw{width:32px;height:32px}
}
@media (min-width:768px){
  .flbtn{left:auto;right:var(--s-5);bottom:calc(var(--s-5) + env(safe-area-inset-bottom));width:380px;gap:var(--s-4);padding:var(--s-4) var(--s-4) var(--s-4) var(--s-5)}
  .flbtn-tx{gap:var(--s-1)}
  .flbtn-t{font-size:var(--t-17);line-height:1.25}
  .flbtn-s{display:block;font-size:var(--t-14);line-height:1.4;color:var(--c-muted)}
  .flbtn-arw{width:44px;height:44px}
  .flbtn-arw .ic{width:18px;height:18px}
  .foot{padding-bottom:calc(var(--s-6) + 140px)}
}
@media (min-width:1024px){ .flbtn-lang{display:inline} .flbtn-kurz{display:none} }
/* 768 bis 1279 px: Cookie-Kasten links und Karte rechts wuerden sich beruehren, Karte steht solange ueber der Kastenhoehe */
@media (min-width:768px) and (max-width:1279px){
  html.has-cookie .flbtn{bottom:calc(var(--s-5) + var(--cookie-h) + var(--s-3) + env(safe-area-inset-bottom))}
}
/* Handy: die Karte steht auf einem Navy-Sockel, der nahtlos in die Kontaktleiste uebergeht.
   So scheint zwischen Karte und Leiste kein Seitentext durch. */
@media (max-width:767px){
  .flbtn{left:var(--s-2);right:var(--s-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 var(--fl-gap) 0 var(--fl-gap) var(--c-ink)}
}
/* Ausweichen (JS setzt .is-kompakt und --fl-hub). Der Text bleibt fuer Screenreader immer im Link.
   Handy: runder Pfeilknopf rechts, nur solange die Karte Hero-Schaltflaechen oder Bewertungszeile verdecken wuerde.
   Ab 768 px: einzeilige Pille mit Statuspunkt und "Zur schnellen Bankzusage", Text bleibt lesbar.
   --fl-hub: Versatz nach oben, wenn die kompakte Form sonst Ueberschrift, Bedienelement oder Hinweis traefe. */
.flbtn{translate:0 var(--fl-hub,0px);transition:translate var(--d-slow) var(--ease-out),transform var(--d-fast) var(--ease-out),box-shadow var(--d-base) var(--ease-io),opacity var(--d-base) var(--ease-io),visibility 0s}
@media (max-width:767px){
  .flbtn.is-kompakt{left:auto;right:var(--s-2);width:auto;grid-template-columns:auto;gap:0;padding:6px;border-radius:999px;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),var(--fl-sh)}
  .flbtn.is-kompakt .flbtn-tx{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (min-width:768px){
  .flbtn.is-kompakt{width:auto;gap:var(--s-3);padding:6px 6px 6px var(--s-4);border-radius:999px;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px var(--c-hair-strong),0 2px 4px -2px rgba(20,31,59,.2),0 16px 32px -16px rgba(20,31,59,.6)}
  .flbtn.is-kompakt .flbtn-tx{flex-direction:row;align-items:center;gap:var(--s-2)}
  .flbtn.is-kompakt .flbtn-k .flbtn-lang,.flbtn.is-kompakt .flbtn-k .flbtn-kurz,.flbtn.is-kompakt .flbtn-s,.flbtn.is-kompakt .flbtn-t .flbtn-lang{display:none}
  .flbtn.is-kompakt .flbtn-t .flbtn-kurz{display:inline}
  .flbtn.is-kompakt .flbtn-t{font-size:var(--t-15);line-height:1;white-space:nowrap}
  .flbtn.is-kompakt .flbtn-arw{width:36px;height:36px}
  .flbtn.is-kompakt .flbtn-arw .ic{width:16px;height:16px}
}
/* Randleiste (ab 768 px, JS setzt .is-kante): wenn rechts keine Luecke frei ist, steht der Text senkrecht
   als schmale Leiste im leeren Seitenrand (Pfeilkreis unten). */
@media (min-width:768px){
  .flbtn.is-kante{right:max(4px,calc((var(--gutter) - 40px) / 2));width:40px;grid-template-columns:auto;justify-items:center;gap:var(--s-2);padding:var(--s-3) 0 4px}
  .flbtn.is-kante .flbtn-tx{writing-mode:vertical-rl;transform:rotate(180deg)}
  .flbtn.is-kante .flbtn-k{display:none}
  .flbtn.is-kante .flbtn-t{font-size:var(--t-14);letter-spacing:.01em}
  .flbtn.is-kante .flbtn-arw{width:32px;height:32px}
  .flbtn.is-kante .flbtn-arw .ic{width:14px;height:14px}
}
/* Offenes Handy-Menue: Button tritt zurueck, damit nichts unter dem Panel hervorschaut */
html.has-menu .flbtn{opacity:0;visibility:hidden;animation:none;transition:none}
/* Handy-Menue fuellt den Raum zwischen Kopf und Kontaktleiste (unter 1024 px bis zum unteren Rand),
   damit unter dem Panel kein Seitenstreifen und nichts vom Fast-Lane-Sockel durchscheint */
@media (max-width:1023px){ .mnav{min-height:calc(100svh - var(--head-h))} }
@media (max-width:767px){ .mnav{min-height:calc(100svh - var(--head-h) - var(--bar-h) - env(safe-area-inset-bottom));max-height:calc(100svh - var(--head-h) - var(--bar-h) - env(safe-area-inset-bottom))} }
@media (prefers-reduced-motion:reduce){
  .flbtn{animation:fade 200ms ease-out 300ms both}
  .flbtn-dot::after{animation:none}
  .flbtn{transition-property:opacity,visibility}
  .flbtn:hover,.flbtn:active{transform:none}
  .flbtn:hover .flbtn-arw .ic{transform:none}
}

/* ==========================================================
   19. Scroll-Eintritte (einmalig, Blur-Up in Sequenz)
   ========================================================== */
.reveal-on [data-reveal]{opacity:0;transform:translateY(12px);filter:blur(6px);transition:opacity var(--d-enter) var(--ease-out),transform var(--d-enter) var(--ease-out),filter var(--d-enter) var(--ease-out);transition-delay:calc(var(--i,0) * 60ms)}
.reveal-on [data-reveal].is-in{opacity:1;transform:none;filter:none}
/* Hero-Eintritt per CSS (ohne JS), wie auf der Startseite */
.enter > *{animation:rise var(--d-enter) var(--ease-out) both;animation-delay:calc(var(--i,0) * 50ms)}
.enter-media{animation:rise var(--d-enter) var(--ease-out) 160ms both}
.enter-office{animation:office var(--d-enter) var(--ease-out) both}

/* ==========================================================
   20. Not-Aus: reduzierte Bewegung, nur Deckkraft
   ========================================================== */
@media (prefers-reduced-motion:reduce){
  .hero-office,.hero-portrait,.hero-copy > *,.enter > *,.enter-media,.enter-office{animation:fade 200ms ease-out both!important}
  .reveal-on [data-reveal]{transform:none;filter:none;transition:opacity 200ms ease-out;transition-delay:0s}
  .acc-panel:not([hidden]) > *{animation:fade 200ms ease-out both}
  .sub,.mnav,.cookie{transform:none!important}
  .btn:active,.btn-ghost:active,.icon-btn:active,.svc a:active,.flc:active,.flc:hover,.way:active,.cbar a:active{transform:none}
  .btn:hover .ic,.svc a:hover .svc-arw .ic,.flc:hover .flc-arw .ic,.bildplatz:hover .bildplatz-ic{transform:none}
  .media:hover img{transform:none!important}
  .nav-link::after,.chev,.acc-ic::before,.acc-ic::after,.skip{transition:none!important}
}