:root {

    --red-500:#F42C2C; --red-600:#D72121; --red-700:#B2201F; --red-50:#FCE9E8;
    --ink-900:#16171B; --ink-800:#202229; --ink-700:#2C2E35; --ink-600:#3B3E47; --ink-500:#4C4F59;
    --gold-600:#AE914A; --gold-300:#E2C96B; --gold-200:#E5D4AE;
    --beige-300:#DED4C2; --beige-100:#F4EFE6; --beige-50:#FAF7F1;
    --grau-400:#9A9DA3; --grau-200:#E2E3E6; --white:#FFFFFF;

    --accent:var(--red-500); --accent-hover:var(--red-600); --accent-press:var(--red-700);
    --gold:var(--gold-300);
    --ink:var(--ink-700); --ink-soft:var(--ink-500);
    --on-dark:var(--beige-50); --on-dark-soft:#A7A9B0;

    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    --veins: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23v)'/%3E%3C/svg%3E");

    --f-display:'Oswald', system-ui, sans-serif;
    --f-script:'Great Vibes', cursive;
    --f-body:'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
    --track:0.04em; --track-eye:0.26em;

    --fs-hero: clamp(44px, 6.6vw, 90px);
    --fs-d2:   clamp(32px, 5vw, 56px);
    --fs-d3:   clamp(22px, 2.4vw, 28px);
    --fs-lg:22px; --fs-base:16px; --fs-sm:14px; --fs-xs:13px; --fs-eye:12px;

    --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;
    --r-sm:4px; --r-md:6px; --r-lg:10px; --r-full:999px;
    --cut: clamp(28px, 4vw, 64px);
    --sh-sm:0 1px 2px rgba(22,23,27,.06), 0 1px 1px rgba(22,23,27,.05);
    --sh-md:0 2px 4px rgba(22,23,27,.05), 0 12px 28px rgba(22,23,27,.09);
    --sh-plate:0 18px 40px rgba(0,0,0,.45), 0 2px 0 rgba(255,255,255,.06) inset;

    --ease: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-soft: cubic-bezier(0.2, 0.8, 0.2, 1);
    --d-fast:120ms; --d-base:260ms; --d-slow:420ms;

    --maxw:1180px; --gutter:clamp(20px,5vw,52px);
    --nav-top:112px; --nav-slim:66px;
}

* { box-sizing: border-box; }
html {
    scroll-behavior: smooth; scroll-padding-top: var(--nav-slim); -webkit-text-size-adjust:100%;
    background:
        radial-gradient(130% 96svh at 70% -10.5svh, var(--ink-600) 0%, var(--ink-800) 42%, var(--ink-900) 100%)
        no-repeat var(--ink-900);
}
body {
    margin:0; background:var(--ink-900); color:var(--ink);
    font-family:var(--f-body); font-size:var(--fs-base); line-height:1.65;
    overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3 { font-family:var(--f-display); font-weight:600; text-transform:uppercase; letter-spacing:var(--track); line-height:1.02; margin:0; overflow-wrap:break-word; }
p { margin:0; }
a { color:inherit; }
img { display:block; max-width:100%; }

.nav-logo-full, .nav-bull, .hero-mark, .hero-watermark, .footer-mark, .section-ghost { display:block; }
.nav-bull { color:var(--on-dark); }
.footer-mark { color:var(--on-dark); }
.hero-watermark { color:#fff; }
.section-ghost--right { color:var(--on-dark); }
.section-ghost--left { color:var(--ink-700); }
strong { font-weight:700; }

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

.eyebrow {
    display:inline-flex; align-items:center; gap:var(--sp-3);
    font-family:var(--f-display); font-weight:600; font-size:14px;
    letter-spacing:var(--track-eye); text-transform:uppercase; color:var(--accent); margin:0;
}
.eyebrow .eyebrow-rule { width:34px; height:2px; background:currentColor; border-radius:2px; flex:0 0 auto; }
.hero-copy .eyebrow { letter-spacing:.32em; }
.hero-copy .eyebrow .eyebrow-rule { flex:1 1 34px; width:auto; min-width:34px; }
.eyebrow--gold { color:var(--gold); }

.script { font-family:var(--f-script); font-weight:400; line-height:1; color:var(--accent);
    font-size:clamp(30px,4vw,46px); margin:var(--sp-3) 0 var(--sp-1); }
.script--gold { color:var(--gold); }

.display-2 { font-size:var(--fs-d2); color:var(--ink); }
.display-2.on-dark { color:var(--on-dark); }

.section-head { margin-bottom:var(--sp-8); max-width:780px; }
.section-head--center { margin-inline:auto; text-align:center; }
.section-head--center .eyebrow { justify-content:center; }

#services .section-head .eyebrow { font-size:15px; letter-spacing:.28em; }
#services .section-head .script  { font-size:clamp(40px,5.2vw,64px); }
#services .section-head .display-2 { font-size:clamp(40px,6.4vw,76px); }

.btn {
    --py:12px; --px:24px;
    position:relative; display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
    font-family:var(--f-display); font-weight:600; font-size:var(--fs-sm); letter-spacing:var(--track);
    text-transform:uppercase; text-decoration:none; padding:var(--py) var(--px);
    border:1px solid transparent; border-radius:var(--r-md); cursor:pointer; overflow:hidden; white-space:nowrap;
    transition:background var(--d-fast) var(--ease), color var(--d-fast) var(--ease),
        border-color var(--d-fast) var(--ease), box-shadow var(--d-base) var(--ease), transform var(--d-fast) var(--ease);
}
.btn-lg { --py:15px; --px:30px; font-size:var(--fs-base); }
.btn-block { display:flex; width:100%; }

.btn-primary { background:var(--accent); color:#fff; }
.btn-primary::before {
    content:''; position:absolute; top:0; left:-150%; width:60%; height:100%;
    background:linear-gradient(115deg, transparent, rgba(255,255,255,.0) 35%, rgba(255,255,255,.4) 50%, rgba(255,255,255,0) 65%, transparent);
    transform:skewX(-18deg); pointer-events:none;
}
.btn-primary:hover { background:var(--accent-hover); box-shadow:var(--sh-md); transform:translateY(-2px); }
.btn-primary:hover::before { animation:shimmer 1100ms var(--ease-soft) forwards; }
.btn-primary:active { background:var(--accent-press); transform:translateY(0) scale(.99); }

.btn-ghost { background:transparent; color:var(--on-dark); border-color:rgba(250,247,241,.28); }
.btn-ghost:hover { border-color:var(--gold); color:var(--gold); transform:translateY(-2px); }
.btn-ghost:active { transform:translateY(0) scale(.99); }

@keyframes shimmer { 0%{left:-150%;} 100%{left:150%;} }

.text-link { color:var(--accent); text-decoration:none; font-weight:600; border-bottom:1px solid transparent; transition:border-color var(--d-fast) var(--ease); }
.text-link:hover { border-bottom-color:currentColor; }
.section--slate .text-link, .kontakt .text-link { color:var(--gold); }

.nav {
    position:fixed; inset:0 0 auto 0; z-index:1000;
    transition:background var(--d-base) var(--ease-soft), box-shadow var(--d-base) var(--ease-soft);
}
.nav.is-scrolled {
    background:rgba(22,23,27,.92);
    -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%);
    box-shadow:0 10px 34px rgba(0,0,0,.4);
}
.nav.is-scrolled::after {
    content:''; position:absolute; inset:auto 0 0 0; height:1px;
    background:linear-gradient(90deg, transparent, rgba(226,201,107,.5) 40%, rgba(226,201,107,.5) 60%, transparent);
}
.nav-inner {
    display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--sp-5);
    height:var(--nav-top); transition:height var(--d-base) var(--ease-soft);
}
.nav.is-scrolled .nav-inner { height:var(--nav-slim); }

.nav-links { display:flex; align-items:center; gap:var(--sp-1); list-style:none; margin:0; padding:0; }
.nav-links--left { justify-self:start; }
.nav-links--right { justify-self:end; }
.nav-links a {
    position:relative; display:block; padding:9px 14px;
    font-family:var(--f-display); font-weight:500; font-size:var(--fs-xs); letter-spacing:.08em;
    text-transform:uppercase; text-decoration:none; color:var(--on-dark-soft);
    transition:color var(--d-fast) var(--ease);
}
.nav-links a:hover { color:var(--on-dark); }
.nav-links a::after {
    content:''; position:absolute; left:14px; right:14px; bottom:4px; height:2px; border-radius:2px;
    background:var(--accent); transform:scaleX(0); opacity:0;
    transition:transform var(--d-base) var(--ease), opacity var(--d-fast) var(--ease);
}
.nav-links a:hover::after { transform:scaleX(1); opacity:.5; }
.nav-links a.is-active { color:var(--on-dark); }
.nav-links a.is-active::after { transform:scaleX(1); opacity:1; }
.nav-links a.nav-cta { color:#fff; background:var(--accent); border-radius:var(--r-md); padding:9px 18px; overflow:hidden; margin-left:var(--sp-2); }
.nav-links a.nav-cta::after { display:none; }
.nav-links a.nav-cta::before {
    content:''; position:absolute; top:0; left:-150%; width:60%; height:100%;
    background:linear-gradient(115deg, transparent, rgba(255,255,255,.35) 50%, transparent); transform:skewX(-18deg); pointer-events:none;
}
.nav-links a.nav-cta:hover { background:var(--accent-hover); }
.nav-links a.nav-cta:hover::before { animation:shimmer 1100ms var(--ease-soft) forwards; }

.nav-links a.nav-aktuell, .nav-drawer a.nav-aktuell {
    font-weight:600; color:var(--gold);
    background:linear-gradient(110deg, var(--gold) 38%, #fff3c8 50%, var(--gold) 62%);
    background-size:220% 100%;
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
    animation:aktuell-shine 3.4s linear infinite;
}
.nav-links a.nav-aktuell::after { background:var(--gold); }
@keyframes aktuell-shine { from { background-position:0% 0; } to { background-position:-220% 0; } }
@media (prefers-reduced-motion: reduce) {
    .nav-links a.nav-aktuell, .nav-drawer a.nav-aktuell {
        animation:none; background:none;
        -webkit-background-clip:border-box; background-clip:border-box; -webkit-text-fill-color:var(--gold);
    }
}

.nav-center {
    justify-self:center; display:inline-flex; align-items:center; gap:var(--sp-3);
    text-decoration:none; color:var(--on-dark);
    opacity:0; transform:translateY(-5px); pointer-events:none;
    transition:opacity var(--d-base) var(--ease), transform var(--d-base) var(--ease);
}
.nav.is-scrolled .nav-center { opacity:1; transform:none; pointer-events:auto; }
.nav-bull { height:28px; width:auto; transition:height var(--d-base) var(--ease-soft); filter:drop-shadow(0 4px 10px rgba(0,0,0,.4)); }
.nav.is-scrolled .nav-bull { height:24px; }
.nav-name { font-family:var(--f-display); font-weight:600; font-size:18px; letter-spacing:var(--track); text-transform:uppercase; color:var(--on-dark); white-space:nowrap; }

.nav.is-scrolled .nav-center:hover { transform:translateY(-3px) scale(1.06); }

.nav-toggle { display:none; flex-direction:column; gap:5px; width:44px; height:44px; padding:11px; justify-self:end;
    background:rgba(22,23,27,.55); border:1px solid rgba(250,247,241,.16); border-radius:var(--r-sm); cursor:pointer; }
.nav-toggle span { display:block; height:2px; width:100%; background:var(--on-dark); border-radius:2px;
    transition:transform var(--d-base) var(--ease), opacity var(--d-fast) var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.nav-drawer { display:none; }

.hero {
    position:relative; min-height:calc(100svh + var(--cut)); display:flex; align-items:center;
    padding-top:var(--nav-top); padding-bottom:calc(var(--cut) + 56px); overflow:hidden;
    background:var(--ink-900); color:var(--on-dark);
}
.hero-slate {
    position:absolute; inset:0; z-index:0;
    background:
        radial-gradient(130% 90% at 70% -10%, var(--ink-600) 0%, var(--ink-800) 42%, var(--ink-900) 100%);
}
.hero-slate::before {
    content:''; position:absolute; inset:0;
    background-image:var(--veins); background-size:760px 760px;
    opacity:.5; mix-blend-mode:soft-light;
}
.hero-slate::after {
    content:''; position:absolute; inset:0;
    background-image:
        repeating-linear-gradient(115deg, transparent 0 238px, rgba(0,0,0,.30) 238px 240px),
        repeating-linear-gradient(25deg,  transparent 0 196px, rgba(0,0,0,.22) 196px 198px),
        var(--grain);
    opacity:.55; mix-blend-mode:overlay;
}
.hero-light {
    position:absolute; inset:0; z-index:0; pointer-events:none;
    background:radial-gradient(60% 45% at 30% 8%, rgba(226,201,107,.10), transparent 60%);
}

.hero-shimmer {
    position:absolute; top:-30%; left:-60%; width:220%; height:160%; z-index:1; pointer-events:none;
    background:linear-gradient(115deg,
        transparent 30%,
        rgba(226,201,107,0) 38%,
        rgba(229,212,174,0.10) 45%,
        rgba(250,247,241,0.26) 49%,
        rgba(255,255,255,0.38) 50%,
        rgba(250,247,241,0.26) 51%,
        rgba(229,212,174,0.10) 55%,
        rgba(226,201,107,0) 62%,
        transparent 70%);
    filter:blur(22px); mix-blend-mode:screen; will-change:transform;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, black 16%, black 74%, transparent 100%);
    mask-image:linear-gradient(to bottom, transparent 0%, black 16%, black 74%, transparent 100%);
    animation:hero-shimmer 9s cubic-bezier(0.38,0.05,0.22,1) infinite;
}
@keyframes hero-shimmer {
    0%   { transform:translate(-70%,-70%); }
    70%  { transform:translate(70%,70%); }
    100% { transform:translate(70%,70%); }
}
.hero-watermark {
    position:absolute; z-index:0; right:-8%; bottom:-14%;
    width:min(560px, 60vw); opacity:.04; transform:rotate(-6deg);
    pointer-events:none;
}

.hero-grid {
    position:relative; z-index:2; width:100%;
    display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:clamp(32px,5vw,72px);
}
.hero-copy { max-width:700px; }
.hero-script { margin-top:var(--sp-5); font-size:clamp(38px,5.4vw,62px); }
.hero-title { font-size:var(--fs-hero); color:var(--on-dark); letter-spacing:.01em; margin:var(--sp-2) 0 var(--sp-6); white-space:nowrap; }

.t3d { position:relative; z-index:0; display:inline-block; color:#FAF7F1; }
.t3d::before {
    content:attr(data-text); position:absolute; left:3px; top:3px; z-index:-1;
    color:#15161b; -webkit-text-stroke:1px #FAF7F1; text-stroke:1px #FAF7F1;
    pointer-events:none;
}
.hero-lead { font-size:clamp(18px,1.5vw,21px); line-height:1.6; color:var(--on-dark-soft); max-width:50ch; margin-bottom:var(--sp-7); }
.hero-actions { display:flex; flex-wrap:wrap; gap:var(--sp-3); }

.hero-visual { position:relative; display:flex; justify-content:center; align-items:center; perspective:900px; }
.hero-logo-floater {
    position:relative; display:flex; justify-content:center; align-items:center;
    animation:float 6s var(--ease-soft) infinite;
    will-change:transform;
}
.hero-mark {
    position:relative; z-index:1; width:clamp(200px, 25vw, 320px); height:auto;
    filter:drop-shadow(0 22px 44px rgba(0,0,0,.55));
    transition:transform var(--d-slow) var(--ease-soft), filter var(--d-base) var(--ease);
    cursor:pointer;
}
.hero-logo-floater:hover .hero-mark {
    transform:scale(1.12);
    filter:drop-shadow(0 32px 64px rgba(0,0,0,.6)) drop-shadow(0 0 30px rgba(250,247,241,.18));
}
.hero-visual:hover .hero-mark-halo { opacity:1; }

.hero-mark-halo {
    position:absolute; width:90%; aspect-ratio:1; border-radius:50%;
    background:radial-gradient(circle at 50% 45%, rgba(250,247,241,.16), rgba(226,201,107,.06) 42%, rgba(226,201,107,0) 70%);
    filter:blur(44px); opacity:.7;
    transition:opacity var(--d-slow) var(--ease);
    animation:halo 7s var(--ease-soft) infinite;
}
.hero-visual:hover .hero-mark-halo { opacity:1; }
@keyframes float { 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-16px) rotate(-1deg); } }
@keyframes halo  { 0%,100%{ transform:translateY(0) scale(1); } 50%{ transform:translateY(-10px) scale(1.05); } }

.scroll-cue {
    position:absolute; left:50%; bottom:8px; transform:translateX(-50%); z-index:3;
    display:flex; flex-direction:column; align-items:center; gap:6px; padding:0 16px;
    text-decoration:none;
}
.scroll-cue-label { font-family:var(--f-display); font-size:9px; font-weight:600; letter-spacing:.32em; text-transform:uppercase; color:var(--on-dark-soft); }
.scroll-cue-line { width:1px; height:100px; background:linear-gradient(var(--gold), transparent); animation:cue 2.2s var(--ease) infinite; }
@keyframes cue { 0%{transform:scaleY(0);transform-origin:top;opacity:0;} 40%{transform:scaleY(1);transform-origin:top;opacity:1;} 60%{transform:scaleY(1);transform-origin:bottom;opacity:1;} 100%{transform:scaleY(0);transform-origin:bottom;opacity:0;} }

.section { position:relative; padding-block:clamp(72px,11vw,128px); overflow:hidden; }
.section--beige { background:var(--beige-50); }
.section--slate { background:var(--ink-800); color:var(--on-dark); }
.section--slate::before {
    content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
    background-image:var(--veins); background-size:720px 720px; opacity:.35; mix-blend-mode:soft-light;
}
.section > .container { position:relative; z-index:2; }

.cut-top { clip-path:polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%); margin-top:calc(var(--cut) * -1); padding-top:calc(clamp(72px,11vw,128px) + var(--cut)); }
.cut-both {
    clip-path:polygon(0 var(--cut), 100% 0, 100% calc(100% - var(--cut)), 0 100%);
    margin-top:calc(var(--cut) * -1); margin-bottom:calc(var(--cut) * -1);
    padding-block:calc(clamp(72px,11vw,128px) + var(--cut));
}

.section-ghost { position:absolute; z-index:0; width:min(520px,55vw); pointer-events:none; }
.section-ghost--left  { left:-12%; bottom:-10%; opacity:.05; transform:rotate(8deg); }
.section-ghost--right { right:-10%; top:6%;    opacity:.05; transform:rotate(-6deg); }

.about { display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(36px,6vw,88px); align-items:start; }
.about-body { font-size:var(--fs-lg); color:var(--ink-soft); margin-top:var(--sp-5); }
.about-body strong { color:var(--ink); }

.principles { list-style:none; margin:0; padding:0; display:grid; gap:0; }
.principle { display:grid; grid-template-columns:auto 1fr; gap:var(--sp-5); align-items:start;
    padding:var(--sp-5) 0; border-top:1px solid var(--beige-300); }
.principle:last-child { border-bottom:1px solid var(--beige-300); }
.principle-num {
    position:relative; display:inline-block; padding-bottom:8px;
    font-family:var(--f-display); font-weight:600; font-size:var(--fs-d3); line-height:1; letter-spacing:.02em;
    color:var(--gold-600);
    transition:color var(--d-base) var(--ease), transform var(--d-base) var(--ease-soft);
}
@supports ((-webkit-text-stroke:1px #000) or (text-stroke:1px #000)) {
    .principle-num { color:transparent; -webkit-text-stroke:1.4px var(--gold-600); }
    .principle:hover .principle-num { color:var(--gold-600); }
}
.principle-num::after {
    content:''; position:absolute; left:2px; bottom:0; height:2px; width:0;
    background:var(--accent); transition:width var(--d-base) var(--ease);
}
.principle:hover .principle-num { transform:translateY(-3px); }
.principle:hover .principle-num::after { width:100%; }
.principle h3 { font-size:var(--fs-d3); margin-bottom:var(--sp-1); }
.principle p { font-size:var(--fs-sm); color:var(--ink-soft); }

.services { display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,3.4vw,46px) clamp(32px,5vw,72px); }
.service {
    position:relative; display:block; width:100%; text-align:left;
    appearance:none; -webkit-appearance:none; background:none; border:none;
    border-top:1px solid rgba(250,247,241,.12); padding:var(--sp-6) 0;
    color:inherit; font:inherit; cursor:pointer;
}
.service-index { font-family:var(--f-display); font-weight:600; font-size:var(--fs-sm); letter-spacing:.2em; color:var(--gold); transition:color var(--d-fast) var(--ease); }
.service h3 { font-size:var(--fs-d3); color:var(--on-dark); margin:var(--sp-3) 0 var(--sp-2); transition:transform var(--d-base) var(--ease), color var(--d-fast) var(--ease); }
.service > p { font-size:var(--fs-sm); color:var(--on-dark-soft); max-width:42ch; }
.service:hover h3 { transform:translateX(8px); }
.service:hover .service-index { color:#fff; }
.service::after {
    content:''; position:absolute; left:0; top:-1px; width:0; height:2px; background:var(--accent);
    transition:width var(--d-base) var(--ease);
}
.service:hover::after { width:100%; }
.service-more {
    display:inline-flex; align-items:center; gap:var(--sp-2); margin-top:var(--sp-4);
    font-family:var(--f-display); font-weight:600; font-size:var(--fs-xs); letter-spacing:.16em; text-transform:uppercase;
    background-image:linear-gradient(to right, #fff 0%, #fff 50%, var(--gold) 50%, var(--gold) 100%);
    background-size:200% 100%; background-position:100% 0;
    -webkit-background-clip:text; background-clip:text;
    color:var(--gold); -webkit-text-fill-color:transparent;
    transition:background-position var(--d-slow) var(--ease);
}
.service-more .arrow { transition:transform var(--d-base) var(--ease); }
.service:hover .service-more { background-position:0 0; }
.service:hover .service-more .arrow { transform:translateX(8px); }

.svc-modal {
    position:fixed; inset:0; z-index:9500; display:grid; place-items:center; padding:var(--gutter);
    visibility:hidden; transition:visibility .5s var(--ease);
}
.svc-modal.is-open { visibility:visible; }

.svc-modal-overlay {
    position:absolute; inset:0; background:rgba(10,11,14,.62);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    opacity:0; transition:opacity .5s var(--ease);
}
.svc-modal.is-open .svc-modal-overlay { opacity:1; }
.svc-modal-card {
    position:relative; z-index:1; width:fit-content; min-width:min(560px, 100%); max-width:100%;
    background:linear-gradient(180deg, var(--ink-700), var(--ink-900));
    border:1px solid rgba(226,201,107,.30);
    clip-path:polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
    padding:clamp(28px,4vw,46px); box-shadow:0 30px 80px rgba(0,0,0,.55);
    transform:translateY(14px) scale(.97); opacity:0;
    transition:transform var(--d-base) var(--ease-soft), opacity var(--d-base) var(--ease);
}
.svc-modal.is-open .svc-modal-card { transform:none; opacity:1; }
.svc-modal-index { font-family:var(--f-display); font-weight:600; font-size:var(--fs-sm); letter-spacing:.2em; color:var(--gold); margin-bottom:var(--sp-2); }
.svc-modal-title { font-size:var(--fs-d2); color:var(--on-dark); white-space:nowrap; overflow-wrap:normal; }
.svc-modal-title::after { content:''; display:block; width:46px; height:3px; background:var(--accent); margin:var(--sp-3) 0 var(--sp-5); }
.svc-modal-text { font-size:var(--fs-base); line-height:1.7; color:var(--on-dark-soft); max-width:58ch; }
.svc-modal-close {
    position:absolute; top:12px; right:12px; width:40px; height:40px; display:grid; place-items:center;
    background:rgba(250,247,241,.06); border:1px solid rgba(250,247,241,.16); border-radius:var(--r-sm);
    color:var(--on-dark); font-size:24px; line-height:1; cursor:pointer;
    transition:background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.svc-modal-close:hover { background:var(--accent); border-color:var(--accent); color:#fff; }

.filialen { display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; gap:var(--sp-6); margin-bottom:var(--sp-8); }
.filiale {
    position:relative; background:var(--white); border:1px solid var(--grau-200);
    padding:var(--sp-7); box-shadow:var(--sh-sm);
    clip-path:polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
    transition:box-shadow var(--d-base) var(--ease), transform var(--d-base) var(--ease);
}
.filiale:hover { box-shadow:var(--sh-md); transform:translateY(-3px); }
.filiale-name { font-size:var(--fs-d2); margin-bottom:var(--sp-2); }
.filiale-owner { font-family:var(--f-display); font-weight:500; font-size:var(--fs-sm); letter-spacing:.1em; text-transform:uppercase; color:var(--gold-600); margin-bottom:var(--sp-3); }
.filiale-name::after { content:''; display:block; width:40px; height:3px; background:var(--accent); margin-top:var(--sp-3); }
.filiale-addr { font-size:var(--fs-base); color:var(--ink-soft); margin-bottom:var(--sp-2); }
.filiale-phone { margin-bottom:var(--sp-5); }
.hours { border-top:1px solid var(--grau-200); padding-top:var(--sp-4); margin-top:var(--sp-5); }
.hours-row { display:flex; justify-content:space-between; gap:var(--sp-4); font-size:var(--fs-sm); padding:6px 0; }
.hours-row > span:first-child { font-family:var(--f-display); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); }
.hours-row > span:last-child { color:var(--ink-soft); }
.hours-row--closed > span:last-child { color:var(--grau-400); }
.filiale-link { display:inline-block; margin-top:var(--sp-5); font-family:var(--f-display); font-weight:600; font-size:var(--fs-xs);
    letter-spacing:.1em; text-transform:uppercase; color:var(--accent); text-decoration:none; }
.filiale-link::after { content:' →'; }
.filiale-link:hover { color:var(--accent-hover); }

.filialen-mark { display:flex; align-items:center; justify-content:center; }
.diamond { width:18px; height:18px; background:var(--ink-700); transform:rotate(45deg); position:relative; }
.diamond::before { content:''; position:absolute; inset:4px; border:1px solid var(--gold); }

.map-fallback {
    position:absolute; inset:0; z-index:500; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:var(--sp-3); text-align:center;
    padding:var(--sp-6); background:var(--ink-800); color:var(--on-dark);
}
.map-fallback strong { font-family:var(--f-display); font-weight:600; letter-spacing:var(--track); text-transform:uppercase; font-size:var(--fs-base); }
.map-fallback p { font-size:var(--fs-sm); color:var(--on-dark-soft); max-width:38ch; }
.map-fallback .btn { margin-top:var(--sp-2); }

.kontakt { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(36px,6vw,88px); align-items:start; }
.kontakt-lead { font-size:var(--fs-lg); color:var(--on-dark-soft); margin:var(--sp-4) 0 var(--sp-6); }
.kontakt-list { list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-4); }
.kontakt-list li { display:grid; gap:2px; }
.kontakt-list span { font-family:var(--f-display); font-weight:600; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-soft); }

.kontakt-form { display:grid; gap:var(--sp-6); }
.ufield { position:relative; }
.ufield input, .ufield textarea {
    width:100%; font-family:var(--f-body); font-size:var(--fs-base); color:var(--on-dark);
    background:transparent; border:none; border-bottom:1px solid rgba(250,247,241,.22);
    padding:10px 2px; transition:border-color var(--d-fast) var(--ease);
}
.ufield textarea { resize:vertical; }
.ufield label {
    position:absolute; left:2px; top:10px; color:var(--on-dark-soft); font-size:var(--fs-base);
    pointer-events:none; transition:transform var(--d-fast) var(--ease), color var(--d-fast) var(--ease), font-size var(--d-fast) var(--ease);
}
.ufield input:focus, .ufield textarea:focus { outline:none; border-bottom-color:var(--gold); }
.ufield input:focus + label, .ufield textarea:focus + label,
.ufield input:not(:placeholder-shown) + label, .ufield textarea:not(:placeholder-shown) + label {
    transform:translateY(-22px); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold);
}
.ufield input.is-invalid, .ufield textarea.is-invalid { border-bottom-color:var(--red-500); }
.form-feedback { font-size:var(--fs-sm); min-height:1.2em; margin:0; }
.form-feedback.is-ok { color:var(--gold); }
.form-feedback.is-error { color:var(--red-500); }

.site-footer { background:var(--ink-900); color:var(--on-dark-soft); padding-block:var(--sp-8); }
.footer-content { display:grid; justify-items:center; gap:var(--sp-4); text-align:center; }
.footer-mark { height:46px; width:auto; }
.footer-mark-link { display:inline-block; cursor:pointer; transition:transform var(--d-base) var(--ease); }
.footer-mark-link:hover { transform:translateY(-4px); }
.footer-tagline { font-size:clamp(20px, 3.5vw, 28px); }
.footer-nav { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--sp-5); }
.footer-nav a { font-family:var(--f-display); font-weight:500; font-size:var(--fs-xs); letter-spacing:.08em; text-transform:uppercase; text-decoration:none; color:var(--on-dark-soft); transition:color var(--d-fast) var(--ease); }
.footer-nav a:hover { color:var(--gold); }
.footer-legal { font-size:var(--fs-xs); color:var(--ink-500); }

.footer-deploy { position:relative; display:flex; justify-content:center; margin-top:var(--sp-7); }
.footer-dev {
    appearance:none; -webkit-appearance:none; background:none; border:none; padding:10px 20px; cursor:pointer;
    font-family:var(--f-body); font-weight:400; font-size:11px;
    letter-spacing:.14em; text-transform:uppercase;
    color:var(--ink-500); opacity:.65;
    transition:color var(--d-fast) var(--ease), opacity var(--d-fast) var(--ease);
}
.footer-deploy:hover .footer-dev, .footer-deploy.is-open .footer-dev { color:var(--grau-400); opacity:1; }
.deploy-pop {
    position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%) translateY(4px);
    opacity:0; pointer-events:none;
    transition:opacity var(--d-base) var(--ease), transform var(--d-base) var(--ease-soft);
}
.footer-deploy:hover .deploy-pop, .footer-deploy.is-open .deploy-pop {
    opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0);
}
.deploy-pill {
    display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
    padding:9px 18px; border-radius:var(--r-full);
    border:1px solid rgba(226,201,107,.30); background:var(--ink-800);
    box-shadow:0 12px 30px rgba(0,0,0,.45);
    font-family:var(--f-body); font-size:var(--fs-xs); font-variant-numeric:tabular-nums;
    color:var(--grau-400); letter-spacing:.02em;
}
.deploy-pill #deployTime { color:var(--on-dark-soft); }

.reveal { opacity:0; transform:translateY(22px); transition:opacity 700ms var(--ease-soft), transform 700ms var(--ease-soft); }
.reveal.is-visible { opacity:1; transform:translateY(0); }
.principles > .reveal:nth-child(2){ transition-delay:80ms; }
.principles > .reveal:nth-child(3){ transition-delay:160ms; }
.services > .reveal:not(.is-visible), .principles > .reveal:not(.is-visible){ transition-delay:0ms; }

.leaflet-container { font-family:var(--f-body); }
.ts-pin { width:28px; height:28px; display:grid; place-items:center; background:var(--accent); border:3px solid #fff; border-radius:50%; box-shadow:var(--sh-md); }
.ts-pin span { color:#fff; font-size:12px; font-weight:700; line-height:1; }

@media (max-width:980px){
    .hero-grid{ grid-template-columns:1fr; gap:var(--sp-7); }
    .hero-visual{ order:-1; } .hero-mark{ width:clamp(180px, 38vw, 270px); }
    .about, .kontakt{ grid-template-columns:1fr; }
    .services{ grid-template-columns:1fr; }
    .filialen{ grid-template-columns:1fr; }
}
@media (max-width:760px){
    :root{ --nav-top:66px; --nav-slim:66px; --fs-lg:20px; }
    html{ -webkit-tap-highlight-color:transparent; }
    body{ overflow-x:clip; }
    .nav{
        opacity:0; pointer-events:none; transform:translateY(-10px);
        transition:opacity var(--d-base) var(--ease), transform var(--d-base) var(--ease-soft),
            background var(--d-base) var(--ease-soft), box-shadow var(--d-base) var(--ease-soft);
    }
    .nav.is-past-hero{ opacity:1; pointer-events:auto; transform:none; }
    .nav-inner{ grid-template-columns:1fr auto 1fr; }
    .nav-links{ display:none; }
    .nav-center{ opacity:1; transform:none; pointer-events:auto; grid-column:2; justify-self:center; }
    .nav-toggle{ grid-column:3; justify-self:end; }
    .nav.is-scrolled .nav-inner{ height:var(--nav-top); }
    .nav-bull{ height:26px; } .nav.is-scrolled .nav-bull{ height:26px; }
    .nav-toggle{ display:flex; width:42px; height:42px; padding:10px; gap:4px; }
    .nav-name{ font-size:17px; }

    .nav-drawer{
        display:flex; flex-direction:column; gap:0;
        background:rgba(22,23,27,.98); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
        border-top:1px solid rgba(250,247,241,.10);
        padding:0 var(--gutter);
        max-height:0; overflow:hidden; opacity:0;
        transition:max-height var(--d-base) var(--ease), opacity var(--d-base) var(--ease), padding var(--d-base) var(--ease);
    }
    .nav-drawer:not(.is-open){ border-top-color:transparent; }
    .nav-drawer.is-open{ max-height:460px; opacity:1; padding:var(--sp-3) var(--gutter) var(--sp-5); }
    .nav-drawer a{ padding:14px 2px; font-family:var(--f-display); font-weight:500; font-size:var(--fs-sm);
        letter-spacing:.08em; text-transform:uppercase; text-decoration:none; color:var(--on-dark-soft); }
    .nav-drawer a:hover{ color:var(--on-dark); }
    .nav-drawer a.nav-cta{ color:#fff; background:var(--accent); border-radius:var(--r-md); padding:14px; text-align:center; margin-top:var(--sp-3); }

    .section{ padding-block:clamp(56px,12vw,84px); }
    .section-head{ margin-bottom:var(--sp-6); }

    .hero{ padding-bottom:calc(var(--cut) + 24px); }
    .scroll-cue{ display:none; }
    .hero-copy{ margin-inline:auto; text-align:center; display:flex; flex-direction:column; align-items:center; }
    .hero-script, .hero-title, .hero-lead{ text-align:center; }
    .hero-lead{ margin-inline:auto; }
    .hero-status{ align-self:center; }
    .hero-copy .eyebrow{
        display:flex; width:100%; justify-content:center; flex-wrap:nowrap;
        font-size:12px; letter-spacing:.22em; gap:var(--sp-2);
    }
    .hero-copy .eyebrow > span[data-bind]{ white-space:nowrap; }
    .hero-copy .eyebrow .eyebrow-rule{ flex:0 1 34px; min-width:10px; width:auto; }
    .hero-title{ font-size:clamp(34px,11vw,56px); white-space:normal; }
    .hero-script{ font-size:clamp(28px,8vw,42px); }
    .hero-mark{ width:clamp(160px, 50vw, 220px); }
    .hero-lead{ font-size:17px; margin-bottom:var(--sp-6); }
    .hero-actions{ flex-direction:column; align-items:stretch; gap:var(--sp-3); width:100%; }
    .hero-actions .btn{ width:100%; }
    .eyebrow{ flex-wrap:wrap; }
    .section-head{ margin-inline:auto; text-align:center; }
    .section-head .eyebrow{ justify-content:center; }
    .about-lead .eyebrow, .kontakt-intro .eyebrow{ display:flex; justify-content:center; }
    .about-lead .script, .about-lead .display-2{ text-align:center; }
    .kontakt-intro{ text-align:center; }

    #services .section-head .display-2{ font-size:clamp(34px,9vw,52px); }
    #services .section-head .script{ font-size:clamp(32px,8vw,46px); }
    .service-card{ flex-direction:column; align-items:flex-start; gap:var(--sp-4); }

    .filiale{ padding:var(--sp-6); }
    .filialen-mark{ padding:var(--sp-2) 0; }

    .kontakt-form .btn{ width:100%; }

    .svc-modal-card{ max-height:calc(100svh - 2*var(--gutter)); overflow-y:auto; width:100%; -webkit-overflow-scrolling:touch; }
    .svc-modal-title{ font-size:clamp(28px,7vw,40px); white-space:normal; }

    .section-ghost{ width:min(360px,68vw); }
}

@media (max-width:480px){
    :root{ --gutter:18px; }
    .nav-name{ font-size:15px; }
    .nav-bull{ height:22px; } .nav.is-scrolled .nav-bull{ height:20px; }
    .nav-center{ gap:var(--sp-2); }

    .hero-script{ font-size:26px; }
    .hero-title{ font-size:clamp(30px,12vw,44px); }
    .hero-lead{ font-size:16px; }

    .script{ font-size:30px; }
    .display-2{ font-size:clamp(28px,8.5vw,38px); }

    .filiale{ padding:var(--sp-5); }
    .section-ghost{ width:min(300px,72vw); }
    .svc-modal-close{ width:36px; height:36px; }
}

:focus-visible { outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; }

@media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
    .reveal{ opacity:1; transform:none; }
    .hero-mark, .hero-mark-halo{ animation:none; }
}

.service-card {
    display:flex; align-items:center; justify-content:space-between; gap:var(--sp-6);
    margin-top:var(--sp-8); padding:var(--sp-7);
    background:linear-gradient(180deg, rgba(59,62,71,.55), rgba(22,23,27,.55));
    border:1px solid rgba(226,201,107,.30);
    clip-path:polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);
    text-decoration:none; color:var(--on-dark);
    transition:transform var(--d-base) var(--ease), border-color var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease);
}
.service-card:hover { transform:translateY(-3px); border-color:var(--gold); box-shadow:0 20px 50px rgba(0,0,0,.35); }
.service-card-eyebrow { font-family:var(--f-display); font-weight:600; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:var(--sp-2); }
.service-card-body h3 { font-size:var(--fs-d3); color:var(--on-dark); margin-bottom:var(--sp-2); }
.service-card-body > p { font-size:var(--fs-sm); color:var(--on-dark-soft); max-width:60ch; }
.service-card-cta {
    flex:0 0 auto; display:inline-flex; align-items:center; gap:var(--sp-2);
    font-family:var(--f-display); font-weight:600; font-size:var(--fs-sm); letter-spacing:var(--track); text-transform:uppercase;
    color:#fff; background:var(--accent); padding:13px 22px; border-radius:var(--r-md); white-space:nowrap;
    transition:background var(--d-fast) var(--ease);
}
.service-card:hover .service-card-cta { background:var(--accent-hover); }
.service-card-cta .arrow { transition:transform var(--d-base) var(--ease); }
.service-card:hover .service-card-cta .arrow { transform:translateX(5px); }

#ueber-uns { padding-block:clamp(88px,12vw,148px); }
.about-body + .about-body { margin-top:var(--sp-4); }
.principle { padding:var(--sp-6) 0; }

.imp-block { border-top:1px solid rgba(250,247,241,.14); padding-top:var(--sp-4); }

html { scrollbar-color: var(--ink-600) var(--ink-900); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--ink-900); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--ink-600), var(--ink-500));
    border: 2px solid var(--ink-900); border-radius: var(--r-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--gold-600); }

.hero-status {
    display: inline-flex; align-items: center; gap: 10px;
    margin-top: var(--sp-5); padding: 8px 16px 8px 12px;
    border: 1px solid rgba(250,247,241,.14); border-radius: var(--r-full);
    background: rgba(250,247,241,.04);
    text-decoration: none;
    font-family: var(--f-display); font-weight: 500; font-size: var(--fs-xs);
    letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark);
    transition: border-color var(--d-base) var(--ease), background var(--d-base) var(--ease);
}
.hero-status:hover { border-color: rgba(226,201,107,.45); background: rgba(250,247,241,.07); }
.hero-status-hint { color: var(--on-dark-soft); letter-spacing: .1em; }
.hero-status-hint:empty { display: none; }
.status-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.hero-status.is-open  .status-dot { background: #4CBB6C; }
.hero-status.is-closed .status-dot { background: var(--red-500); }
.hero-status.is-open .status-dot::after {
    content: ''; position: absolute; inset: -4px; border-radius: 50%;
    border: 1px solid #4CBB6C; opacity: 0;
    animation: status-ping 2.4s var(--ease) infinite;
}
@keyframes status-ping { 0% { transform: scale(.6); opacity: .9; } 70%, 100% { transform: scale(1.4); opacity: 0; } }

@media (prefers-reduced-motion: no-preference) {
    html.js .hero-copy > * { opacity: 0; animation: hero-in .8s var(--ease-soft) both paused; }
    html.js .hero-copy > .eyebrow       { animation-delay: .10s; }
    html.js .hero-copy > .hero-script   { animation-delay: .22s; }
    html.js .hero-copy > .hero-title    { animation-delay: .34s; }
    html.js .hero-copy > .hero-lead     { animation-delay: .48s; }
    html.js .hero-copy > .hero-actions  { animation-delay: .62s; }
    html.js .hero-copy > .hero-status   { animation-delay: .76s; }
    html.js .hero-visual { animation: hero-fade 1.1s var(--ease-soft) both paused; animation-delay: .3s; }
    html.js.intro-done .hero-copy > *,
    html.js.intro-done .hero-visual { animation-play-state: running; }
}
@keyframes hero-in   { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hero-fade { from { opacity: 0; } to { opacity: 1; } }

@media (hover: hover) {
    .service::before {
        content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
        background: radial-gradient(120% 130% at 50% 50%,
            rgba(226,201,107,.07), rgba(250,247,241,.03) 55%, transparent 88%);
        -webkit-mask: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
        mask: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
        opacity: 0; transition: opacity var(--d-slow) var(--ease);
    }
    .service:hover::before { opacity: 1; }
    .service > * { position: relative; z-index: 1; }
}

.service-badge[hidden] { display: none; }
.service-badge {
    display: inline-block; margin-left: var(--sp-3); padding: 3px 10px;
    vertical-align: 2px;
    font-family: var(--f-display); font-weight: 600; font-size: 10px;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--ink-900); background: linear-gradient(120deg, var(--gold-300), var(--gold-200));
    clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.service-badge--neu {
    background: linear-gradient(110deg, var(--gold-300) 34%, #fff6d8 50%, var(--gold-300) 66%);
    background-size: 220% 100%;
    animation: aktuell-shine 3.4s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .service-badge--neu { animation: none; } }

.service-card-note {
    font-size: 13px; font-style: italic; color: var(--on-dark-soft); opacity: .85;
    margin-top: var(--sp-3); max-width: 68ch;
}

.svc-modal-index, .svc-modal-title, .svc-modal-text {
    opacity: 0; transform: translateY(10px);
    transition: opacity var(--d-slow) var(--ease), transform var(--d-slow) var(--ease-soft);
}
.svc-modal.is-open .svc-modal-index { opacity: 1; transform: none; transition-delay: .12s; }
.svc-modal.is-open .svc-modal-title { opacity: 1; transform: none; transition-delay: .20s; }
.svc-modal.is-open .svc-modal-text  { opacity: 1; transform: none; transition-delay: .30s; }


.call-fab { display: none; }
@media (max-width: 760px) {
    .call-fab { display: block; position: fixed; right: 16px; bottom: 16px; z-index: 8500; }
    .consent { bottom: 88px; }
    .call-fab-btn {
        display: inline-flex; align-items: center; gap: 10px;
        padding: 14px 20px; border: none; border-radius: var(--r-full); cursor: pointer;
        background: var(--accent); color: #fff;
        font-family: var(--f-display); font-weight: 600; font-size: var(--fs-sm);
        letter-spacing: var(--track); text-transform: uppercase;
        box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.25);
        transition: background var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
    }
    .call-fab-btn:active { transform: scale(.96); }
    .call-fab-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .call-fab-sheet {
        position: absolute; right: 0; bottom: calc(100% + 12px); min-width: 230px;
        background: linear-gradient(180deg, var(--ink-700), var(--ink-900));
        border: 1px solid rgba(226,201,107,.30);
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
        padding: var(--sp-4); box-shadow: 0 24px 60px rgba(0,0,0,.5);
        opacity: 0; transform: translateY(8px); pointer-events: none;
        transition: opacity var(--d-base) var(--ease), transform var(--d-base) var(--ease-soft);
    }
    .call-fab[open] .call-fab-sheet { opacity: 1; transform: none; pointer-events: auto; }
    .call-fab-btn { list-style: none; user-select: none; -webkit-user-select: none; }
    .call-fab-btn::marker { content: ""; }
    .call-fab-btn::-webkit-details-marker { display: none; }
    .call-fab-title {
        font-family: var(--f-display); font-weight: 600; font-size: 11px;
        letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
        margin-bottom: var(--sp-2);
    }
    .call-fab-sheet a {
        display: flex; flex-direction: column; gap: 2px; text-decoration: none;
        padding: 10px 8px; border-top: 1px solid rgba(250,247,241,.10);
    }
    .call-fab-sheet a strong { font-family: var(--f-display); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark); font-size: var(--fs-sm); }
    .call-fab-ort { font-family: var(--f-display); font-weight: 500; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
    .call-fab-sheet a span { font-size: var(--fs-xs); color: var(--on-dark-soft); }
    .call-fab-sheet a:active { background: rgba(250,247,241,.05); }
}

.consent {
    position: fixed; left: 16px; bottom: 16px; z-index: 8900;
    display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-3);
    width: min(440px, calc(100vw - 32px));
    background: linear-gradient(180deg, var(--ink-700), var(--ink-900));
    border: 1px solid rgba(226,201,107,.30);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
    padding: var(--sp-4) var(--sp-5); box-shadow: 0 24px 60px rgba(0,0,0,.5);
    opacity: 0; transform: translateY(16px);
    transition: opacity .4s var(--ease), transform .4s var(--ease-soft);
}
.consent.is-in { opacity: 1; transform: none; }
.consent-text { font-size: var(--fs-xs); line-height: 1.55; color: var(--on-dark-soft); margin: 0; }
.consent-more { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.consent-ok { flex: 0 0 auto; }


.preloader { position: fixed; inset: 0; z-index: 9990; display: none; place-items: center; background: var(--ink-900); }
html.js .preloader { display: grid; }
html.intro-skip .preloader { display: none; }
.preloader-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.preloader img {
    width: clamp(76px, 10vw, 112px); height: auto;
    filter: drop-shadow(0 14px 30px rgba(0,0,0,.5));
    animation: pre-mark .9s var(--ease-soft) .1s both;
}
.preloader-name {
    font-family: var(--f-display); font-weight: 600; font-size: clamp(17px, 2.4vw, 25px);
    letter-spacing: .34em; text-transform: uppercase; color: var(--on-dark);
    padding-left: .34em; margin: 0;
    animation: pre-name .9s var(--ease-soft) .35s both;
}
.preloader-line {
    height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent);
    animation: pre-line .9s var(--ease) .6s both;
}
.preloader {
    transition: opacity .5s var(--ease) .05s, transform .65s var(--ease-soft) .05s, visibility 0s .75s;
}
html.intro-done .preloader {
    opacity: 0; transform: translateY(-2.5%);
    visibility: hidden; pointer-events: none;
}
@keyframes pre-mark { from { opacity: 0; transform: translateY(16px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes pre-name { from { opacity: 0; letter-spacing: .6em; } to { opacity: 1; letter-spacing: .34em; } }
@keyframes pre-line { from { width: 0; } to { width: min(240px, 60vw); } }

.map-stage {
    position: relative; overflow: hidden; isolation: isolate;
    aspect-ratio: 1720 / 1377; max-height: 74vh; margin-inline: auto;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 34px), calc(100% - 34px) 100%, 0 100%);
    box-shadow: 0 34px 90px rgba(0,0,0,0), 0 10px 28px rgba(0,0,0,0);
    transition: box-shadow 1.1s var(--ease);
}
.map-stage::before {
    content: ''; position: absolute; inset: 0; z-index: 0;
    background: radial-gradient(135% 105% at 50% 12%, #23262b 0%, var(--ink-900) 68%);
    opacity: 0; transition: opacity 1.1s var(--ease);
}
.map-stage.frame-in { box-shadow: 0 34px 90px rgba(0,0,0,.38), 0 10px 28px rgba(0,0,0,.22); }
.map-stage.frame-in::before { opacity: 1; }
.map-frame { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.map-frame path {
    fill: none; stroke: var(--gold); stroke-width: 1.5;
    stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0;
    filter: drop-shadow(0 0 7px rgba(226,201,107,.5));
}
.map-stage.frame-in .map-frame path {
    stroke-dashoffset: 0; opacity: .95;
    transition: stroke-dashoffset 1.9s var(--ease-soft), opacity .5s var(--ease);
}
.map-svg-host, .map-sat {
    position: absolute; inset: 0;
    transition: opacity .8s var(--ease);
}
.map-svg-host { touch-action: none; }
.map-svg-host svg { display: block; width: 100%; height: 100%; cursor: grab; }
.map-stage.is-panning .map-svg-host svg { cursor: grabbing; }
.map-sat { opacity: 0; visibility: hidden; z-index: 1; background: var(--ink-900); }
.map-stage.sat-on .map-sat { opacity: 1; visibility: visible; transition-delay: 0s; }
.map-stage.sat-on .map-svg-host { opacity: 0; visibility: hidden; }
.map-shine {
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    opacity: 0; transition: opacity 1.1s var(--ease);
    background:
        linear-gradient(165deg, rgba(250,247,241,.10) 0%, transparent 26%),
        radial-gradient(120% 90% at 50% 118%, rgba(10,11,14,.5), transparent 55%);
    mix-blend-mode: soft-light;
}
.map-stage.frame-in .map-shine { opacity: 1; }
#tsMap { opacity: 0; transition: opacity .8s var(--ease); }
#tsMap.show { opacity: 1; }
#tsMap #roads, #tsMap #towns, #tsMap #mountain-labels, #tsMap #pins {
    opacity: 0; transition: opacity .7s var(--ease);
}
#tsMap.in #roads { opacity: 1; }
#tsMap.in #towns { opacity: 1; transition-delay: .42s; }
#tsMap.in #mountain-labels { opacity: 1; transition-delay: .58s; }
#tsMap.in #pins { opacity: 1; transition-delay: .95s; }
.map-toggle {
    position: absolute; left: 14px; bottom: 14px; z-index: 3;
    display: inline-flex; align-items: center; gap: 9px;
    padding: 10px 16px; cursor: pointer;
    background: rgba(20,21,25,.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    border: 1px solid rgba(226,201,107,.35); border-radius: var(--r-full);
    color: var(--on-dark); font-family: var(--f-display); font-weight: 600;
    font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
    opacity: 0; transform: translateY(8px);
    transition: opacity .5s var(--ease), transform .5s var(--ease-soft), background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
.map-toggle-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); transition: background var(--d-fast) var(--ease); }
.map-stage.sat-on .map-toggle-dot { background: #4CBB6C; }
.map-toggle:hover { background: var(--accent); border-color: var(--accent); }
.map-replay {
    position: absolute; right: 14px; bottom: 14px; z-index: 3;
    width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer;
    background: rgba(20,21,25,.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    border: 1px solid rgba(250,247,241,.22); border-radius: var(--r-full);
    color: var(--on-dark); font-size: 17px; line-height: 1;
    opacity: 0; transform: translateY(8px);
    transition: opacity .5s var(--ease), transform .5s var(--ease-soft), background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
.map-replay:hover { background: var(--accent); border-color: var(--accent); }
.map-stage.is-done .map-toggle, .map-stage.is-done .map-replay { opacity: 1; transform: none; }
.map-hint {
    position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 2;
    margin: 0; pointer-events: none; white-space: nowrap;
    font-family: var(--f-display); font-weight: 500; font-size: 10px;
    letter-spacing: .18em; text-transform: uppercase; color: rgba(250,247,241,.38);
    opacity: 0; transition: opacity .8s var(--ease);
}
.map-stage.is-done:not(.sat-on) .map-hint { opacity: 1; }
.map-stage .leaflet-container { width: 100%; height: 100%; background: var(--ink-900); font-family: var(--f-body); }
.tel-card {
    position: relative; display: grid; gap: var(--sp-1); text-decoration: none;
    background: linear-gradient(180deg, var(--ink-700), var(--ink-900));
    border: 1px solid rgba(226,201,107,.28);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
    padding: clamp(22px, 3vw, 34px);
    transition: transform var(--d-base) var(--ease-soft), border-color var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease);
}
.tel-card:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: 0 22px 55px rgba(0,0,0,.4); }
.kontakt-cards { display: grid; gap: var(--sp-5); align-content: start; }
.tel-card-ort { font-family: var(--f-display); font-weight: 600; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.tel-card-inhaber { font-size: var(--fs-sm); color: var(--on-dark-soft); }
.tel-card-nummer { font-family: var(--f-display); font-weight: 600; font-size: clamp(24px, 2.6vw, 34px); color: var(--on-dark); letter-spacing: .02em; margin-top: var(--sp-2); }
.tel-card-cta {
    display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3);
    font-family: var(--f-display); font-weight: 600; font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
}
.tel-card-cta .arrow { transition: transform var(--d-base) var(--ease); }
.tel-card:hover .tel-card-cta .arrow { transform: translateX(6px); }
.kontakt-hinweis { font-size: var(--fs-sm); color: var(--on-dark-soft); border-left: 2px solid var(--gold); padding-left: var(--sp-3); }

.ts-bullpin { position: relative; }
.ts-bullpin svg { display: block; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
.leaflet-tooltip.ts-tip {
    background: linear-gradient(180deg, var(--ink-700), var(--ink-900));
    border: 1px solid rgba(226,201,107,.42); border-radius: 0;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
    color: var(--on-dark); font-family: var(--f-body); font-size: 12px; line-height: 1.45;
    padding: 9px 14px; box-shadow: 0 14px 34px rgba(0,0,0,.45);
}
.leaflet-tooltip.ts-tip::before { display: none; }
.ts-tip strong {
    display: block; font-family: var(--f-display); font-weight: 600; font-size: 11px;
    letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 2px;
}

.map-stage.sat-only .map-sat { visibility: visible; opacity: 0; }
.map-stage.sat-only.sat-ready .map-sat { opacity: 1; }
.map-stage.sat-only.frame-in { box-shadow: 0 34px 90px rgba(0,0,0,.38), 0 10px 28px rgba(0,0,0,.22); }
.map-stage.sat-only .map-hint { opacity: 1; }

/* Touch-Geraete: klebende Hover-Zustaende neutralisieren (Hover existiert dort nicht sinnvoll) */
@media (hover: none) {
    .btn-primary:hover { background:var(--accent); box-shadow:none; transform:none; }
    .btn-primary:hover::before { animation:none; }
    .btn-ghost:hover { border-color:rgba(250,247,241,.28); color:var(--on-dark); transform:none; }
    .text-link:hover { border-bottom-color:transparent; }
    .nav.is-scrolled .nav-center:hover { transform:none; }
    .hero-logo-floater:hover .hero-mark { transform:none; filter:drop-shadow(0 22px 44px rgba(0,0,0,.55)); }
    .hero-visual:hover .hero-mark-halo { opacity:0; }
    .hero-status:hover { border-color:rgba(226,201,107,.28); background:rgba(250,247,241,.04); }
    .principle:hover .principle-num { transform:none; }
    .principle:hover .principle-num::after { width:0; }
    .service:hover h3 { transform:none; }
    .service:hover .service-index { color:var(--gold); }
    .service:hover::after { width:0; }
    .service:hover::before { opacity:0; }
    .service:hover .service-more { background-position:100% 0; }
    .service:hover .service-more .arrow { transform:none; }
    .service-card:hover { transform:none; border-color:rgba(226,201,107,.30); box-shadow:none; }
    .service-card:hover .service-card-cta { background:var(--accent); }
    .service-card:hover .service-card-cta .arrow { transform:none; }
    .filiale:hover { box-shadow:none; transform:none; }
    .tel-card:hover { transform:none; border-color:rgba(226,201,107,.28); box-shadow:none; }
    .tel-card:hover .tel-card-cta .arrow { transform:none; }
    .footer-mark-link:hover { transform:none; }
}