/* ============================================================
   Coiffeur Aris: Design System
   Konzept: "Atelier Noir": tiefes Schwarz & Anthrazit, warmes
   Messing/Bronze als Lichtakzent, editoriale Serife für Ruhe
   und Präzision. Inspiriert vom Art-déco-Interieur vor Ort.
   ============================================================ */

:root{
  --ink:#121314;
  --panel:#1b1c1d;
  --panel-2:#242527;
  --panel-3:#2e3031;
  --line:rgba(255,255,255,.10);
  --line-soft:rgba(255,255,255,.06);
  --line-strong:rgba(149,151,152,.45);
  --gold:#959798;
  --gold-light:#c3c5c6;
  --gold-deep:#6a6c6d;
  --cream:#f3f4f4;
  --muted:#b5b7b8;
  --muted-2:#8a8c8d;
  --radius-sm:3px;
  --radius-md:8px;
  --radius-lg:16px;
  --shadow-md:0 20px 50px rgba(0,0,0,.45);
  --shadow-lg:0 40px 100px rgba(0,0,0,.6);
  --header-h:88px;
  --ease:cubic-bezier(.16,1,.3,1);
  --font-display:'Bodoni Moda',Georgia,'Times New Roman',serif;
  --font-sans:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

@font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:400 900;font-display:swap;src:url('../fonts/bodoni-var.woff2') format('woff2')}
@font-face{font-family:'Bodoni Moda';font-style:italic;font-weight:400 900;font-display:swap;src:url('../fonts/bodoni-italic-var.woff2') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/jost-var.woff2') format('woff2')}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
body{margin:0;background:var(--ink);color:var(--cream);font-family:var(--font-sans);font-size:16px;font-weight:350;line-height:1.7;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
::selection{background:rgba(149,151,152,.35);color:#fff}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--cream);line-height:1.12;margin:0;font-weight:500;letter-spacing:-.005em}
h1{font-weight:400}
h2{font-weight:400}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font:inherit}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
section{position:relative}

/* ---------- Reveal-on-scroll ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .75s cubic-bezier(.16,1,.3,1),transform .75s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
noscript ~ .reveal,.no-js .reveal{opacity:1!important;transform:none!important}

/* ---------- Eyebrow / Divider ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:14px;font-family:var(--font-sans);font-weight:500;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-light)}
.section-head.center .eyebrow::before,.section-head.center .eyebrow::after,.footer-cta .eyebrow::before,.footer-cta .eyebrow::after{content:"";width:28px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.section-head.center .eyebrow::after,.footer-cta .eyebrow::after{background:linear-gradient(90deg,var(--gold),transparent)}
.eyebrow-line{display:flex;align-items:center;gap:14px;justify-content:center;margin-bottom:16px}
.eyebrow-line::before,.eyebrow-line::after{content:"";width:34px;height:1px;background:var(--line-strong)}
.divider{display:flex;align-items:center;gap:16px;justify-content:center;color:var(--gold);opacity:.6;margin:0 auto}
.divider svg{width:16px;height:16px;flex:none}
.divider::before,.divider::after{content:"";flex:1;max-width:200px;height:1px;background:linear-gradient(90deg,transparent,var(--line-strong),transparent)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 32px;border-radius:2px;font-family:var(--font-sans);font-weight:500;font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;border:1px solid transparent;cursor:pointer;transition:transform .25s cubic-bezier(.2,.9,.3,1.2),box-shadow .25s ease,background .2s ease,color .2s ease,border-color .2s ease}
.btn:hover{transform:translateY(-1px)}
.btn-gold{background:linear-gradient(180deg,#b3b5b6 0%,var(--gold) 100%);color:#4a4c4e;border-color:rgba(226,227,228,.6);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 10px 24px rgba(0,0,0,.35)}
.btn-gold:hover{background:linear-gradient(180deg,#cfd1d2 0%,#a5a7a8 100%);box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 14px 30px rgba(0,0,0,.45)}
.btn-ghost{background:rgba(255,255,255,.05);color:var(--cream);border-color:rgba(255,255,255,.22)}
.btn-ghost:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.4)}
.btn-line{background:transparent;color:var(--cream);border-color:var(--line-strong)}
.btn-line:hover{background:rgba(149,151,152,.1);border-color:var(--gold)}
.btn-sm{padding:11px 22px;font-size:.72rem}
.btn svg{width:16px;height:16px;flex:none}
.btn svg:not([fill]){fill:currentColor}
.btn-whatsapp{background:#25d366;color:#fff;border-color:#25d366;box-shadow:0 10px 24px rgba(37,211,102,.18)}
.btn-whatsapp:hover{background:#1ebe5b;border-color:#1ebe5b;box-shadow:0 14px 30px rgba(37,211,102,.28)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}
@media(max-width:480px){.btn-row{flex-direction:column}.btn-row .btn{width:100%}}

/* ---------- Header ---------- */
/* Hintergrund auf ::before, damit der Header selbst keinen Filter hat (sonst bricht das fixe Handy-Menü) */
.site-header{position:sticky;top:0;z-index:80}
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(74,76,78,.9);backdrop-filter:saturate(1.3) blur(16px);-webkit-backdrop-filter:saturate(1.3) blur(16px);border-bottom:1px solid var(--line);transition:background .3s ease}
.site-header.is-scrolled::before{background:rgba(74,76,78,.96);box-shadow:0 12px 30px -18px rgba(40,42,44,.5)}
.header-bar{display:flex;align-items:center;gap:28px;height:var(--header-h);max-width:1320px;margin:0 auto;padding:0 32px;transition:height .4s var(--ease)}
.site-header.is-scrolled .header-bar{height:72px}
.brand{display:flex;align-items:center;gap:16px;flex:none;color:var(--cream)}
.brand-logo{height:52px;width:auto;flex:none;transition:height .4s var(--ease)}
.site-header.is-scrolled .brand-logo{height:44px}
.brand-tag{padding-left:16px;border-left:1px solid var(--line-strong);font-family:var(--font-display);font-size:.86rem;line-height:1.25;color:rgba(243,244,244,.75)}

.main-nav-desktop{display:flex;align-items:center;gap:4px;margin:0 auto}
.main-nav-desktop a{position:relative;font-family:var(--font-sans);font-weight:500;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;color:rgba(243,244,244,.72);padding:12px 13px;transition:color .2s ease}
.main-nav-desktop a:hover{color:var(--cream)}
.main-nav-desktop a.active{color:var(--gold-light)}
.main-nav-desktop a::after{content:"";position:absolute;left:13px;right:13px;bottom:4px;height:1px;background:var(--gold);transform:scaleX(0);transition:transform .35s var(--ease)}
.main-nav-desktop a:hover::after,.main-nav-desktop a.active::after{transform:scaleX(1)}

.header-actions{display:flex;align-items:center;gap:12px;flex:none}
.call-cta{display:inline-flex;align-items:center;gap:9px;color:var(--cream);font-weight:500;font-size:.9rem;letter-spacing:.02em;padding:8px 4px;white-space:nowrap;transition:color .2s ease}
.call-cta svg{width:16px;height:16px;color:var(--gold)}
.call-cta:hover{color:var(--gold-light)}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);color:var(--gold-light);flex:none;transition:background .2s ease,transform .2s ease}
.icon-btn svg{width:18px;height:18px;fill:currentColor}
.icon-btn-wa{background:#25d366;border-color:#25d366;color:#fff}
.icon-btn-wa:hover{background:#1ebe5b;transform:translateY(-1px)}
.header-actions .order-btn{padding:13px 22px}
.header-call{display:none}
@media(max-width:1340px){.brand-tag{display:none}}
@media(max-width:1200px){.call-cta{display:none}}

/* Menü-Knopf */
.nav-toggle{display:none;position:relative;width:44px;height:44px;padding:0;border:1px solid var(--line-strong);border-radius:50%;background:transparent;cursor:pointer;flex:none}
.nav-toggle::before,.nav-toggle::after,.nav-toggle span{content:"";position:absolute;left:13px;right:13px;height:1.4px;border-radius:1px;background:var(--cream);transition:transform .3s var(--ease),opacity .2s ease}
.nav-toggle::before{top:15.5px}
.nav-toggle span{top:21px}
.nav-toggle::after{top:26.5px}
.nav-toggle[aria-expanded="true"]::before{transform:translateY(5.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"]::after{transform:translateY(-5.5px) rotate(-45deg)}
.nav-toggle[aria-expanded="true"] span{opacity:0}

.mobile-panel{display:none}
.nav-scrim{position:fixed;inset:0;background:rgba(74,76,78,.6);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .35s ease;z-index:85}
body.nav-open .nav-scrim{opacity:1;pointer-events:auto}

@media(max-width:1024px){
  .header-bar{padding:0 20px;gap:12px}
  .main-nav-desktop,.header-actions .order-btn,.header-actions .icon-btn{display:none}
  .header-actions{margin-left:auto;gap:10px}
  .nav-toggle{display:block}
  .header-call{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--gold-light),var(--gold));color:#121314}
  .header-call svg{width:18px;height:18px}
  body.nav-open{overflow:hidden}

  /* Seitliches Menü (wie vorher), aufgeräumt */
  .mobile-panel{display:flex;flex-direction:column;position:fixed;top:0;right:0;bottom:0;width:min(380px,88vw);background:var(--panel);border-left:1px solid var(--line-strong);box-shadow:var(--shadow-lg);z-index:90;transform:translateX(100%);visibility:hidden;transition:transform .45s cubic-bezier(.16,1,.3,1),visibility 0s linear .45s;overflow-y:auto}
  .mobile-panel.open{transform:none;visibility:visible;transition:transform .45s cubic-bezier(.16,1,.3,1)}
  .mobile-panel-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line);flex:none}
  .mobile-panel-brand img{height:42px;width:auto}
  .mobile-panel-close{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;border:1px solid var(--line-strong);color:var(--cream);background:transparent;cursor:pointer}
  .mobile-panel-close svg{width:16px;height:16px}
  .mobile-panel-links{padding:10px 22px;flex:1}
  .mobile-panel-links a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 0;font-family:var(--font-display);font-size:1.32rem;color:var(--cream);border-bottom:1px solid var(--line-soft);transition:color .2s ease,padding .3s var(--ease)}
  .mobile-panel-links a .chev{width:18px;height:18px;color:var(--muted-2);flex:none}
  .mobile-panel-links a.active{color:var(--gold-light);padding-left:14px;box-shadow:inset 2px 0 0 var(--gold)}
  .mobile-panel-links a.active .chev{color:var(--gold)}
  .mobile-panel-info{padding:0 22px 18px;font-size:.88rem;line-height:1.55;color:var(--muted)}
  .mobile-panel-info b{font-weight:500;color:var(--cream)}
  .mobile-panel-info p{margin:0}
  .mobile-panel-cta{display:flex;flex-direction:column;gap:10px;padding:18px 22px calc(22px + env(safe-area-inset-bottom));border-top:1px solid var(--line);flex:none}
  .mobile-panel-cta .btn{width:100%;padding:15px 20px;gap:12px;font-size:.76rem;letter-spacing:.14em}
  .mobile-panel-cta .btn svg{width:17px;height:17px}
  .mobile-panel-cta .btn:hover{transform:none}
}
@media(max-width:700px){
  :root{--header-h:72px}
  .brand-logo{height:46px}
}

/* ---------- Hero (Start) ---------- */
.hero-full{position:relative;min-height:92vh;display:flex;align-items:flex-end;overflow:hidden}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(74,76,78,.35) 0%,rgba(74,76,78,.55) 55%,rgba(74,76,78,.94) 100%)}
.hero-full .wrap{position:relative;width:100%;padding-bottom:120px;padding-top:150px}
.hero-eyebrow{display:inline-flex;align-items:center;gap:12px;color:var(--gold-light);font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;margin-bottom:22px}
.hero-eyebrow::before{content:"";width:30px;height:1px;background:var(--gold)}
.hero-full h1{font-size:clamp(2.7rem,6.2vw,5rem);max-width:16ch;color:#fff;line-height:1.04}
.hero-lead{margin-top:24px;max-width:46ch;color:rgba(243,244,244,.82);font-size:1.08rem;line-height:1.7}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.hero-rating{display:inline-flex;align-items:center;gap:10px;margin-top:34px;color:var(--muted);font-size:.86rem}
.hero-rating .stars{color:var(--gold);letter-spacing:1px}
.hero-rating a{color:var(--gold-light);border-bottom:1px solid var(--line-strong)}
.hero-rating a:hover{color:var(--cream)}
.scroll-cue{position:absolute;right:28px;bottom:28px;display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--muted);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase}
.scroll-cue .line{width:1px;height:48px;background:linear-gradient(180deg,var(--gold),transparent)}
@media(max-width:700px){.scroll-cue{display:none}}

/* ---------- Hero slideshow ---------- */
.hero-slider{min-height:min(94vh,960px);background:var(--ink)}
.hero-slides{position:absolute;inset:0;overflow:hidden}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.6s cubic-bezier(.4,0,.2,1);will-change:opacity}
.hero-slide.is-active{opacity:1;z-index:1}
.hero-slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 9s cubic-bezier(.25,.1,.25,1)}
.hero-slide.is-active img{transform:scale(1.02)}
.hero-slider .hero-scrim{z-index:2;background:
  linear-gradient(90deg,rgba(74,76,78,.82) 0%,rgba(74,76,78,.5) 45%,rgba(74,76,78,.12) 100%),
  linear-gradient(180deg,rgba(74,76,78,.55) 0%,rgba(74,76,78,0) 28%,rgba(74,76,78,0) 60%,rgba(74,76,78,.92) 100%)}
.hero-slider .wrap{z-index:3}
.hero-slider::after{content:"";position:absolute;inset:18px;border:1px solid rgba(195,197,198,.14);border-radius:var(--radius-md);pointer-events:none;z-index:3}
.hero-nav{position:absolute;z-index:4;left:0;right:0;bottom:34px;max-width:1160px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:flex-end;gap:26px}
.hero-count{display:flex;align-items:baseline;gap:8px;font-family:var(--font-display);color:var(--muted);font-size:.9rem;min-width:170px;justify-content:flex-end}
.hero-count b{font-weight:500;font-size:1.35rem;color:var(--gold-light)}
.hero-cap{font-family:var(--font-sans);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(243,244,244,.7);margin-left:10px;transition:opacity .4s ease}
.hero-dots{display:flex;gap:8px}
.hero-dot{position:relative;width:38px;height:22px;padding:0;border:0;background:transparent;cursor:pointer}
.hero-dot::before,.hero-dot span{content:"";position:absolute;left:0;top:50%;height:2px;margin-top:-1px;border-radius:2px}
.hero-dot::before{right:0;background:rgba(243,244,244,.22)}
.hero-dot span{width:0;background:var(--gold-light)}
.hero-dot.is-done span{width:100%}
.hero-dot.is-active span{animation:heroProgress var(--hero-dur,6500ms) linear forwards}
.hero-slider.is-paused .hero-dot.is-active span{animation-play-state:paused}
.hero-dot em{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@keyframes heroProgress{from{width:0}to{width:100%}}
.hero-arrows{display:flex;gap:8px}
.hero-arrow{width:44px;height:44px;border-radius:50%;border:1px solid rgba(195,197,198,.35);background:rgba(74,76,78,.35);color:var(--cream);display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .2s ease,border-color .2s ease,color .2s ease}
.hero-arrow:hover{background:rgba(149,151,152,.18);border-color:var(--gold);color:var(--gold-light)}
.hero-arrow svg{width:18px;height:18px}
@media(prefers-reduced-motion:reduce){.hero-slide img{transform:none!important}}
@media(max-width:900px){.hero-count{min-width:0}.hero-cap{display:none}}
@media(max-width:700px){
  .hero-slider{min-height:calc(100svh - var(--header-h))}
  .hero-slider .hero-scrim{background:linear-gradient(180deg,rgba(74,76,78,.55) 0%,rgba(74,76,78,.35) 30%,rgba(74,76,78,.7) 60%,rgba(74,76,78,.96) 100%)}
  .hero-slider::after{inset:10px}
  .hero-full .wrap{padding-top:120px;padding-bottom:96px}
  .hero-nav{bottom:26px;justify-content:space-between;gap:16px}
  .hero-arrows{display:none}
  .hero-dots{flex:1;justify-content:flex-end}
  .hero-dot{width:auto;flex:0 1 34px}
  .hero-rating{flex-wrap:wrap;font-size:.8rem}
}
.lbl-short{display:none}
/* Handy-Start: Bild oben frei, Text unten auf ruhigem dunklem Grund, weniger Elemente */
@media(max-width:700px){
  .hero-slider::after{display:none}
  .hero-slider .hero-scrim{background:linear-gradient(180deg,rgba(74,76,78,.25) 0%,rgba(74,76,78,.1) 22%,rgba(74,76,78,.75) 46%,rgba(74,76,78,.97) 62%,var(--ink) 100%)}
  .hero-full .wrap{padding-top:0;padding-bottom:78px}
  .hero-eyebrow{font-size:.7rem;letter-spacing:.22em;margin-bottom:14px}
  .hero-eyebrow::before{width:22px}
  .hero-full h1{font-size:2.5rem;line-height:1.06}
  .hero-lead{display:none}
  .hero-slider .hero-actions{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:26px}
  .hero-slider .hero-actions .btn{padding:16px 18px}
  .hero-slider .hero-actions .btn-whatsapp{width:56px;padding:0}
  .hero-slider .hero-actions .btn-whatsapp .lbl,.lbl-long{display:none}
  .lbl-short{display:inline}
  .hero-slider .hero-actions .btn-whatsapp svg{width:22px;height:22px}
  .hero-rating{margin-top:20px;gap:6px 10px}
  .hero-count{display:none}
  .hero-nav{bottom:24px}
  .hero-dots{justify-content:flex-start}
}

/* ---------- Sections ---------- */
.section{padding:120px 0}
.section-tight{padding:100px 0}
.section-alt{background:var(--panel)}
.section-head{max-width:660px;margin-bottom:60px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head h2{font-size:clamp(2rem,3.8vw,3rem);margin-top:18px}
.section-head p{margin-top:18px;color:var(--muted);font-size:1.02rem;line-height:1.75}

/* ---------- Split (image + text) ---------- */
.split-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.split-media{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);aspect-ratio:6/5}
.split-media img{width:100%;height:100%;object-fit:cover}
.split-grid h2{font-size:clamp(2rem,3.6vw,2.8rem)}
.split-media.framed{overflow:visible;box-shadow:none}
.split-media.framed picture{display:block;height:100%;border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-md);position:relative;z-index:1}
.split-media.framed::before{content:"";position:absolute;inset:22px -22px -22px 22px;border:1px solid var(--line-strong);border-radius:var(--radius-md);z-index:0}
.split-media.framed::after{display:none}
@media(max-width:600px){.split-media.framed::before{inset:14px -10px -14px 10px}}
.split-media::after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.08);border-radius:inherit;pointer-events:none}
@media(max-width:880px){.split-grid{grid-template-columns:1fr;gap:34px}}

/* ---------- Service / value cards ---------- */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.service-card{background:var(--panel);padding:46px 34px 38px;display:flex;flex-direction:column;gap:16px;transition:background .25s ease}
.service-card:hover{background:var(--panel-2)}
.service-card svg{width:30px;height:30px;color:var(--gold)}
.service-card h3{font-size:1.45rem}
.service-card p{color:var(--muted);font-size:.94rem;line-height:1.65}
.service-card{position:relative}
.service-card::before{content:"";position:absolute;left:34px;right:34px;top:0;height:1px;background:linear-gradient(90deg,var(--gold),transparent);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.service-card:hover::before{transform:scaleX(1)}
.service-card .price-line{margin-top:auto;padding-top:20px;border-top:1px solid var(--line);font-family:var(--font-display);font-size:1.35rem;color:var(--gold-light)}
.service-card .price-line small{font-size:.85em;color:var(--muted);margin-right:4px}
@media(max-width:880px){.card-grid{grid-template-columns:1fr}}

/* ---------- Editorial numbered list ---------- */
.editorial-list{display:grid;grid-template-columns:repeat(2,1fr);gap:44px 60px}
.editorial-item{border-top:1px solid var(--line);padding-top:22px}
.editorial-num{font-family:var(--font-display);font-size:.95rem;color:var(--gold);letter-spacing:.08em}
.editorial-item h4{margin-top:12px;font-size:1.2rem;font-weight:500}
.editorial-item p{margin-top:10px;color:var(--muted);font-size:.94rem;line-height:1.65}
@media(max-width:700px){.editorial-list{grid-template-columns:1fr}}

/* ---------- Stat row ---------- */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));text-align:center;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
.stat-col{padding:38px 18px;position:relative}
.stat-col + .stat-col::before{content:"";position:absolute;left:0;top:28%;bottom:28%;width:1px;background:var(--line)}
.stat-col b{display:block;font-family:var(--font-display);font-size:2.4rem;line-height:1.1;color:var(--gold-light);font-weight:400}
.stat-col span{display:block;margin-top:10px;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
@media(max-width:760px){.stat-row{grid-template-columns:1fr 1fr}.stat-col{padding:28px 10px}.stat-col b{font-size:1.9rem}.stat-col:nth-child(odd)::before{display:none}.stat-col:nth-child(n+3){border-top:1px solid var(--line)}.stat-col span{letter-spacing:.14em;font-size:.64rem}}
@media(max-width:480px){.section-head.center .eyebrow::before,.section-head.center .eyebrow::after,.footer-cta .eyebrow::before,.footer-cta .eyebrow::after{display:none}.footer-cta .eyebrow{letter-spacing:.22em}}

/* ---------- Mosaic gallery ---------- */
.mosaic{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:clamp(170px,19vw,230px);gap:10px}
.mosaic a{position:relative;overflow:hidden;border-radius:var(--radius-md);display:block}
.mosaic img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.mosaic a:hover img{transform:scale(1.06)}
.mosaic a::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.5));opacity:0;transition:opacity .3s ease}
.mosaic a:hover::after{opacity:1}
.m-wide{grid-column:span 2}
.m-tall{grid-row:span 2}
@media(max-width:880px){.mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:130px}.m-wide{grid-column:span 2}.m-tall{grid-row:span 2}}

.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gallery-grid figure{margin:0;border-radius:var(--radius-md);overflow:hidden;cursor:zoom-in;position:relative;aspect-ratio:4/3}
.gallery-grid img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.gallery-grid figure:hover img{transform:scale(1.05)}
.gallery-grid figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;font-size:.78rem;letter-spacing:.06em;color:var(--cream);background:linear-gradient(0deg,rgba(0,0,0,.75),transparent);opacity:0;transition:opacity .3s ease}
.gallery-grid figure:hover figcaption{opacity:1}
@media(max-width:760px){.gallery-grid{grid-template-columns:repeat(2,1fr)}}

.lightbox{position:fixed;inset:0;background:rgba(74,76,78,.94);display:none;align-items:center;justify-content:center;z-index:200;padding:40px}
.lightbox.open{display:flex}
.lightbox img{max-width:min(1200px,92vw);max-height:86vh;object-fit:contain;border-radius:4px;box-shadow:var(--shadow-lg)}
.lightbox-close{position:absolute;top:24px;right:24px;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-strong);background:rgba(255,255,255,.06);color:var(--cream);cursor:pointer;display:flex;align-items:center;justify-content:center}
.lightbox-close svg{width:18px;height:18px}

/* ---------- Star rating (SVG, no unicode glyphs) ---------- */
.star-row{display:inline-flex;gap:3px;vertical-align:middle}
.star-row svg{width:13px;height:13px;fill:var(--gold)}
.testi-stars.star-row svg{width:15px;height:15px}

/* ---------- Testimonials ---------- */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.testi-card{background:var(--panel);padding:42px 34px;display:flex;flex-direction:column;gap:18px}
.testi-quote{width:30px;height:22px;fill:var(--gold);opacity:.55}
.testi-stars{color:var(--gold);letter-spacing:2px;font-size:.9rem}
.testi-card p{font-family:var(--font-display);font-style:italic;font-size:1.08rem;line-height:1.6;color:var(--cream)}
.testi-who{margin-top:auto;display:flex;flex-direction:column;gap:2px;padding-top:18px;border-top:1px solid var(--line)}
.testi-who b{font-size:.9rem;font-weight:600}
.testi-who span{font-size:.76rem;color:var(--muted);letter-spacing:.05em}
.testi-dots{display:none}
@media(max-width:880px){
  .testi-grid{display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;background:none;border:0;border-radius:0;margin:0 -24px;padding:4px 24px 6px;scroll-padding:0 24px}
  .testi-grid::-webkit-scrollbar{display:none}
  .testi-card{flex:0 0 min(86%,420px);scroll-snap-align:start;border:1px solid var(--line);border-radius:var(--radius-md);padding:32px 26px}
  .testi-card p{font-size:1.02rem}
  .testi-dots{display:flex;justify-content:center;gap:10px;margin-top:22px}
  .testi-dots button{width:26px;height:18px;padding:0;border:0;background:transparent;cursor:pointer;position:relative}
  .testi-dots button::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;border-radius:2px;background:rgba(243,244,244,.22);transition:background .3s ease}
  .testi-dots button.is-active::before{background:var(--gold-light)}
}

/* ---------- Info cards (Kontakt) ---------- */
.info-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;margin-top:-70px;position:relative;z-index:5}
.info-card{background:var(--panel-2);padding:36px 30px;display:flex;flex-direction:column;gap:12px}
.info-card svg{width:26px;height:26px;color:var(--gold);stroke:currentColor}
.info-card h3{font-size:1.1rem;margin-top:6px}
.info-card p{color:var(--muted);font-size:.92rem;line-height:1.6}
.info-card .btn{margin-top:10px;align-self:flex-start}
@media(max-width:880px){.info-cards{grid-template-columns:1fr;margin-top:-40px}}

/* ---------- Map ---------- */
.map-embed{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);aspect-ratio:4/3;background:var(--panel-2)}
.map-embed iframe{width:100%;height:100%;border:0;filter:grayscale(.3) contrast(1.05)}
.map-embed-gate{display:flex;align-items:center;justify-content:center}
.map-load-btn{display:flex;flex-direction:column;align-items:center;gap:12px;background:transparent;border:1px dashed var(--line-strong);border-radius:var(--radius-md);padding:34px;color:var(--cream);cursor:pointer;width:100%;height:100%}
.map-load-btn svg{width:30px;height:30px;color:var(--gold)}
.map-load-btn small{color:var(--muted);font-size:.78rem;font-weight:400;letter-spacing:.02em}

/* ---------- Hours note ---------- */
.hours-note{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius-md);padding:26px 28px}
.hours-note .hours-now{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:1.15rem;color:var(--gold-light);margin-bottom:6px}
.hours-note .hours-now::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold)}
.hours-note p{color:var(--muted);font-size:.92rem;line-height:1.7;margin-top:10px}

/* ---------- Page hero (subpages) ---------- */
.page-hero{position:relative;padding:172px 0 90px;overflow:hidden}
.page-hero .hero-bg{position:absolute;inset:0}
.page-hero .hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.34}
.page-hero .hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(74,76,78,.5) 0%,rgba(74,76,78,.88) 100%)}
.page-hero .wrap{position:relative}
.page-hero h1{font-size:clamp(2.3rem,4.6vw,3.4rem);margin-top:16px}
.page-hero p{margin-top:18px;max-width:52ch;color:var(--muted);font-size:1.02rem;line-height:1.7}
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--muted-2);margin-bottom:18px}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--gold-light)}

/* ---------- Leistungen list ---------- */
.service-rows{display:flex;flex-direction:column}
.service-row{display:grid;grid-template-columns:56px 1fr auto;gap:26px;align-items:start;padding:34px 0;border-top:1px solid var(--line)}
.service-rows .service-row:last-child{border-bottom:1px solid var(--line)}
.service-row svg{width:28px;height:28px;color:var(--gold);margin-top:4px}
.service-row h3{font-size:1.35rem}
.service-row p{margin-top:10px;color:var(--muted);font-size:.96rem;line-height:1.7;max-width:56ch}
.service-row .service-note{align-self:center;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-light);white-space:nowrap}
.service-row .service-price{align-self:center;font-family:var(--font-display);font-size:1.3rem;color:var(--gold-light);white-space:nowrap}
.service-row .service-price small{display:block;font-family:var(--font-sans);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:4px;font-style:normal}
@media(max-width:640px){.service-row{grid-template-columns:40px 1fr;row-gap:8px}.service-row .service-note,.service-row .service-price{grid-column:2;margin-top:4px;text-align:left}}

.price-mini{display:flex;flex-wrap:wrap;gap:2px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;margin-top:22px}
.price-mini-item{flex:1 1 220px;background:var(--panel-2);padding:22px 26px;display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.price-mini-item span:first-child{color:var(--muted);font-size:.92rem}
.price-mini-item b{font-family:var(--font-display);color:var(--gold-light);font-size:1.15rem;white-space:nowrap}

.process-row{display:grid;grid-template-columns:repeat(3,1fr);gap:44px}
.process-item{text-align:center}
.process-item .num{font-family:var(--font-display);font-style:italic;font-size:2.4rem;color:var(--gold);display:block;margin-bottom:14px}
.process-item h4{font-size:1.1rem}
.process-item p{margin-top:10px;color:var(--muted);font-size:.9rem;line-height:1.65}
@media(max-width:760px){.process-row{grid-template-columns:1fr;gap:36px}}

/* ---------- Signature list ---------- */
.sig-list{display:flex;flex-wrap:wrap;gap:10px 0;align-items:center}
.sig-list .tag{border:0;border-radius:0;padding:0;font-size:.72rem;letter-spacing:.24em;color:var(--gold-light);display:inline-flex;align-items:center}
.sig-list .tag:not(:last-child)::after{content:"";width:4px;height:4px;transform:rotate(45deg);background:var(--gold);margin:0 18px;opacity:.7}

/* ---------- Tag row ---------- */
.tag-row{display:flex;flex-wrap:wrap;gap:10px}
.tag{border:1px solid var(--line-strong);border-radius:999px;padding:8px 18px;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-light)}

/* ---------- Legal ---------- */
.legal-body{max-width:760px;padding:70px 24px 110px}
.legal-body h2{font-size:1.3rem;margin-top:44px;margin-bottom:14px}
.legal-body h2:first-child{margin-top:0}
.legal-body p{color:var(--muted);font-size:.96rem;line-height:1.8;margin-bottom:4px}
.legal-body a{color:var(--gold-light);border-bottom:1px solid var(--line-strong)}
.legal-body a:hover{color:var(--cream)}

/* ---------- Footer ---------- */
.site-footer{background:var(--panel);border-top:1px solid var(--line)}
.footer-cta{padding:100px 0;text-align:center;border-bottom:1px solid var(--line)}
.footer-cta{background:radial-gradient(ellipse at 50% 0%,rgba(149,151,152,.10),transparent 65%)}
.footer-cta h2{margin-top:18px;font-size:clamp(2rem,4vw,3rem)}
.footer-cta .btn-row{margin-top:32px;justify-content:center}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding:64px 0 40px}
.footer-brand{display:flex;align-items:center;gap:18px;margin-bottom:22px}
.footer-brand img{height:72px;width:auto}
.footer-brand span{font-family:var(--font-display);font-size:.95rem;line-height:1.3;color:rgba(243,244,244,.78);padding-left:18px;border-left:1px solid var(--line-strong)}
.footer-grid > div > p{color:var(--muted);font-size:.9rem;line-height:1.7;max-width:34ch}
.footer-col h4{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-light);font-family:var(--font-sans);font-weight:600;margin-bottom:16px}
.footer-col ul{display:flex;flex-direction:column;gap:11px}
.footer-col a{color:var(--muted);font-size:.92rem}
.footer-col a:hover{color:var(--cream)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding:26px 0;border-top:1px solid var(--line);font-size:.8rem;color:var(--muted-2)}
.footer-bottom a{color:var(--muted-2)}
.footer-bottom a:hover{color:var(--gold-light)}
@media(max-width:880px){.footer-grid{grid-template-columns:1fr 1fr;gap:36px}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr}}

/* ---------- To top ---------- */
.to-top{position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:50%;background:var(--panel-2);border:1px solid var(--line-strong);color:var(--gold);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .3s ease,transform .3s ease;z-index:60}
.to-top.show{opacity:1;pointer-events:auto;transform:none}
.to-top svg{width:18px;height:18px}

/* ---------- Status pill ---------- */
.status-pill{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:8px 16px}
.status-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--muted-2)}
.status-pill.is-open{color:var(--gold-light);border-color:var(--line-strong)}
.status-pill.is-open::before{background:var(--gold)}

@media(max-width:640px){
  .section{padding:84px 0}
  .section-tight{padding:72px 0}
  .card-grid{border-radius:var(--radius-md)}
}

/* ============================================================
   Farbpalette: eine kühle Graureihe, abgeleitet von rgb(149,151,152)
   950 #121314 · 900 #1b1c1d · 850 #242527 · 800 #2e3031 · 700 #45474a
   600 #5f6163 · 500 #7b7d7e · 450 #8a8c8d · 400 #959798 · 300 #a7a9aa
   200 #c3c5c6 · 100 #e2e3e4 · 50 #f3f4f4
   Helle Flächen (Grau 400) mit dunkler Schrift, dunkle Flächen (Grau 950)
   mit heller Schrift. Einzige Fremdfarbe: WhatsApp-Grün.
   ============================================================ */
:root{
  --g950:#121314;--g900:#1b1c1d;--g850:#242527;--g800:#2e3031;--g700:#45474a;--g600:#5f6163;
  --g500:#7b7d7e;--g450:#8a8c8d;--g400:#959798;--g300:#a7a9aa;--g200:#c3c5c6;--g100:#e2e3e4;--g50:#f3f4f4;
  --ink:var(--g400);
  --panel:var(--g450);
  --panel-2:var(--g300);
  --panel-3:var(--g200);
  --line:rgba(74,76,78,.16);
  --line-soft:rgba(74,76,78,.09);
  --line-strong:rgba(74,76,78,.38);
  --gold:var(--g900);
  --gold-light:var(--g800);
  --gold-deep:var(--g950);
  --cream:var(--g950);
  --muted:var(--g800);
  --muted-2:var(--g700);
  --shadow-md:0 20px 50px rgba(74,76,78,.22);
  --shadow-lg:0 40px 100px rgba(74,76,78,.3);
}
.site-header,.hero-full,.page-hero,.site-footer,.mobile-panel{
  --ink:var(--g950);--panel:var(--g900);--panel-2:var(--g850);--panel-3:var(--g800);
  --line:rgba(243,244,244,.10);--line-soft:rgba(243,244,244,.06);--line-strong:rgba(195,197,198,.38);
  --gold:var(--g200);--gold-light:var(--g100);--gold-deep:var(--g500);
  --cream:var(--g50);--muted:var(--g200);--muted-2:var(--g500);
  --shadow-md:0 20px 50px rgba(0,0,0,.45);--shadow-lg:0 40px 100px rgba(0,0,0,.6);
  color:var(--cream);
}
body{background:var(--ink)}
.site-footer{background:var(--g950)}
.footer-cta{background:var(--g900)}
/* Knöpfe: auf Grau dunkel, auf Dunkel hell */
.btn-gold{background:var(--g900);color:var(--g50);border-color:var(--g900);box-shadow:0 10px 24px rgba(74,76,78,.22)}
.btn-gold:hover{background:var(--g950);border-color:var(--g950);box-shadow:0 14px 30px rgba(74,76,78,.32)}
.site-header .btn-gold,.hero-full .btn-gold,.page-hero .btn-gold,.site-footer .btn-gold,.mobile-panel .btn-gold{background:var(--g100);color:var(--g950);border-color:var(--g100);box-shadow:0 10px 24px rgba(0,0,0,.35)}
.site-header .btn-gold:hover,.hero-full .btn-gold:hover,.page-hero .btn-gold:hover,.site-footer .btn-gold:hover,.mobile-panel .btn-gold:hover{background:var(--g50);border-color:var(--g50)}
.btn-ghost{background:rgba(74,76,78,.05);border-color:rgba(74,76,78,.3)}
.btn-ghost:hover{background:rgba(74,76,78,.1);border-color:rgba(74,76,78,.5)}
.btn-line:hover{background:rgba(74,76,78,.07)}
.hero-full .btn-ghost,.page-hero .btn-ghost,.site-footer .btn-ghost{background:rgba(243,244,244,.05);border-color:rgba(243,244,244,.22)}
.hero-full .btn-line:hover,.page-hero .btn-line:hover,.site-footer .btn-line:hover,.mobile-panel .btn-line:hover{background:rgba(243,244,244,.08)}
.header-call{background:var(--g100)!important;color:var(--g950)!important}
::selection{background:var(--g900);color:var(--g50)}
/* Fotos im Kopfbereich leicht entsättigt, passend zur kühlen Graureihe */
.hero-full img,.page-hero .hero-bg img{filter:saturate(.72) contrast(1.03)}

/* Dunkleres Grau als Hintergrund (Nutzerwunsch), helle Schrift */
:root{
  --g-bg:#5a5c5e;--g-alt:#525456;--g-card:#666869;
  --ink:var(--g-bg);
  --panel:var(--g-alt);
  --panel-2:var(--g-card);
  --panel-3:#707274;
  --line:rgba(243,244,244,.12);
  --line-soft:rgba(243,244,244,.07);
  --line-strong:rgba(195,197,198,.4);
  --gold:var(--g200);
  --gold-light:var(--g100);
  --gold-deep:var(--g500);
  --cream:var(--g50);
  --muted:#dcdedf;
  --muted-2:#c3c5c6;
  --shadow-md:0 20px 50px rgba(0,0,0,.35);
  --shadow-lg:0 40px 100px rgba(0,0,0,.45);
}
.btn-gold{background:var(--g100);color:var(--g950);border-color:var(--g100);box-shadow:0 10px 24px rgba(0,0,0,.3)}
.btn-gold:hover{background:var(--g50);border-color:var(--g50);box-shadow:0 14px 30px rgba(0,0,0,.4)}
.btn-ghost{background:rgba(243,244,244,.05);border-color:rgba(243,244,244,.24)}
.btn-ghost:hover{background:rgba(243,244,244,.1);border-color:rgba(243,244,244,.42)}
.btn-line:hover{background:rgba(243,244,244,.08)}
::selection{background:var(--g100);color:var(--g950)}

/* Kein Schwarz mehr: dunkelste Stufen der Graureihe sind jetzt mittleres Grau */
:root{--g950:#4a4c4e;--g900:#525456;--g850:#5a5c5e;--g800:#606264}
.site-header,.hero-full,.page-hero,.site-footer,.mobile-panel{--ink:#4a4c4e;--panel:#525456;--panel-2:#5a5c5e;--panel-3:#666869}
.site-header,.hero-full,.page-hero,.site-footer,.mobile-panel{--muted:#e2e3e4;--muted-2:#c3c5c6}
/* Ohne Bildsymbole: Leistungszeilen ohne Symbolspalte */
.service-row{grid-template-columns:1fr auto}
@media(max-width:640px){.service-row{grid-template-columns:1fr}.service-row .service-note,.service-row .service-price{grid-column:1}}

/* ============================================================
   Veredelung: ruhigere Formen, kühle Fotos, grössere Typografie,
   edleres WhatsApp-Grün
   ============================================================ */
:root{--radius-md:3px;--radius-lg:4px;--wa:#2f8f5b;--wa-hover:#277a4d}
/* Fotos farblich an die kühle Graureihe angleichen */
.split-media img,.mosaic img,.gallery-grid img{filter:saturate(.74) contrast(1.04)}
.mosaic a img,.gallery-grid figure img{transition:transform 1.2s var(--ease),filter .6s ease}
@media(hover:hover){.mosaic a:hover img,.gallery-grid figure:hover img{filter:saturate(.95) contrast(1.04)}}
/* Typografie: mehr Grösse und Ruhe */
.section{padding:150px 0}
.section-tight{padding:120px 0}
.section-head{margin-bottom:72px}
.section-head h2{font-size:clamp(2.2rem,4.4vw,3.6rem);line-height:1.08;letter-spacing:-.012em;margin-top:22px}
.eyebrow{letter-spacing:.34em;font-size:.7rem}
.section-head p{font-size:1.05rem;line-height:1.8}
@media(max-width:700px){.section{padding:96px 0}.section-tight{padding:84px 0}.section-head{margin-bottom:48px}}
/* Preise in der Serifenschrift grösser und feiner */
.service-card .price-line{font-size:1.7rem;letter-spacing:-.01em;padding-top:24px}
.service-card .price-line small{font-family:var(--font-sans);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;vertical-align:.35em;margin-right:8px}
.service-card{padding:54px 40px 44px}
/* Knöpfe: etwas grosszügiger, feiner Rand */
.btn{padding:18px 36px;letter-spacing:.22em}
.btn-gold{box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 12px 28px rgba(0,0,0,.18)}
/* WhatsApp: gedecktes, edleres Grün statt Neon */
.btn-whatsapp,.icon-btn-wa{background:var(--wa);border-color:var(--wa);box-shadow:none}
.btn-whatsapp:hover,.icon-btn-wa:hover{background:var(--wa-hover);border-color:var(--wa-hover);box-shadow:none}
/* Bewertungen: Zitate ruhiger und grösser */
.testi-card{padding:52px 40px}
@media(max-width:700px){.testi-card{padding:34px 26px}.service-card{padding:40px 28px 34px}.btn{padding:17px 26px}}
.service-card .price-line small{font-size:.78rem;letter-spacing:.14em;vertical-align:.2em}
h1,h2,h3{text-wrap:balance}
.service-card .price-line small{font-family:var(--font-display);font-size:.62em;letter-spacing:0;text-transform:none;vertical-align:baseline;margin-right:6px}

/* ============================================================
   Einheitliche Typografie und Abstände
   Schriftskala (10 Stufen) und Abstandsskala, überall dieselben Werte
   ============================================================ */
:root{
  --fs-label:.72rem;   /* Grossbuchstaben-Labels, Eyebrows */
  --fs-ui:.76rem;      /* Knöpfe, Navigation */
  --fs-small:.875rem;  /* Meta, Fusszeile, Bildunterschriften */
  --fs-body:1rem;      /* Fliesstext */
  --fs-lead:1.125rem;  /* Einleitungen, Zitate */
  --fs-h4:1.25rem;     /* kleine Titel */
  --fs-h3:1.5rem;      /* Karten- und Zeilentitel */
  --fs-price:1.75rem;  /* Preise */
  --fs-stat:clamp(2rem,3.6vw,2.6rem);
  --fs-h2:clamp(2.2rem,4.2vw,3.5rem);
  --fs-h1:clamp(2.6rem,5.2vw,4.2rem);
  --fs-hero:clamp(2.9rem,7.2vw,6.4rem);
  --lh-tight:1.06;--lh-head:1.14;--lh-body:1.75;
  --sp-1:8px;--sp-2:16px;--sp-3:24px;--sp-4:32px;--sp-5:48px;--sp-6:64px;--sp-7:96px;--sp-8:144px;
  --section:var(--sp-8);--section-tight:120px;
}
@media(max-width:700px){:root{--section:var(--sp-7);--section-tight:80px}}

body{font-size:var(--fs-body);line-height:var(--lh-body)}
h1,h2,h3,h4{line-height:var(--lh-head);letter-spacing:-.012em;font-weight:400}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
h4{font-size:var(--fs-h4)}

/* Abschnitte */
.section{padding:var(--section) 0}
.section-tight{padding:var(--section-tight) 0}
.section-head{margin-bottom:var(--sp-6)}
.section-head h2,.split-grid h2,.footer-cta h2{font-size:var(--fs-h2);line-height:var(--lh-tight);margin-top:var(--sp-3)}
.section-head p,.split-grid h2 + p,.page-hero p{font-size:var(--fs-lead);line-height:var(--lh-body);margin-top:var(--sp-3)}
@media(max-width:700px){.section-head{margin-bottom:var(--sp-5)}}

/* Labels */
.eyebrow,.hero-eyebrow,.hero-cap,.stat-col span,.sig-list .tag,.service-row .service-note,.service-row .service-price small,.status-pill,.scroll-cue,.testi-who span,.map-load-btn small{font-size:var(--fs-label);letter-spacing:.3em}
.btn,.btn-sm,.main-nav-desktop a,.mobile-panel-cta .btn{font-size:var(--fs-ui)}

/* Kleintext */
.breadcrumb,.footer-bottom,.brand-tag,.call-cta,.info-card p,.hours-note p,.price-mini-item span:first-child,.footer-col a,.mobile-panel-info,.gallery-grid figcaption,.footer-brand span,.testi-who b{font-size:var(--fs-small)}

/* Fliesstext */
.service-card p,.editorial-item p,.service-row p,.legal-body p,.info-card p,.hours-note p{line-height:var(--lh-body)}
.service-card p,.editorial-item p,.service-row p,.legal-body p{font-size:var(--fs-body)}

/* Einleitungen und Zitate */
.hero-lead,.testi-card p{font-size:var(--fs-lead)}

/* Titel */
.service-card h3,.service-row h3,.legal-body h2{font-size:var(--fs-h3)}
.info-card h3,.process-item h4,.editorial-item h4,.hours-note .hours-now,.price-mini-item b{font-size:var(--fs-h4)}
.page-hero h1{font-size:var(--fs-h1);line-height:var(--lh-tight);margin-top:var(--sp-2)}

/* Preise und Zahlen */
.service-card .price-line,.service-row .service-price{font-size:var(--fs-price)}
.stat-col b,.process-item .num{font-size:var(--fs-stat)}

/* Abstände in Karten einheitlich */
.service-card{padding:var(--sp-6) var(--sp-5) var(--sp-5);gap:var(--sp-2)}
.testi-card{padding:var(--sp-6) var(--sp-5)}
.service-row{padding:var(--sp-5) 0}
@media(max-width:700px){.service-card,.testi-card{padding:var(--sp-5) var(--sp-4)}.service-row{padding:var(--sp-4) 0}}

/* ============================================================
   Startbereich hochwertiger
   ============================================================ */
.hero-slider{min-height:min(96vh,1000px)}
.hero-slider .hero-scrim{background:
  linear-gradient(90deg,rgba(74,76,78,.9) 0%,rgba(74,76,78,.62) 38%,rgba(74,76,78,.08) 78%),
  linear-gradient(180deg,rgba(74,76,78,.6) 0%,rgba(74,76,78,0) 26%,rgba(74,76,78,0) 58%,rgba(90,92,94,.96) 100%)}
.hero-slider::after{inset:24px;border-color:rgba(226,227,228,.18)}
.hero-full .wrap{padding-top:180px;padding-bottom:150px}
.hero-eyebrow{margin:0 0 var(--sp-4);color:var(--g100)}
.hero-eyebrow::before{width:44px;background:rgba(226,227,228,.6)}
.hero-full h1{font-size:var(--fs-hero);line-height:.98;letter-spacing:-.022em;font-weight:400;max-width:12ch}
.hero-lead{margin-top:var(--sp-4);max-width:44ch;line-height:var(--lh-body);color:rgba(243,244,244,.88)}
.hero-actions{margin-top:var(--sp-5);gap:var(--sp-2)}
/* Fakten-Leiste: drei Spalten mit Haarlinie */
.hero-meta{list-style:none;margin:var(--sp-6) 0 0;padding:var(--sp-3) 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,200px));gap:var(--sp-4);border-top:1px solid rgba(226,227,228,.22);max-width:680px}
.hero-meta li{display:flex;flex-direction:column;gap:4px;min-width:0}
.hero-meta span{font-size:var(--fs-label);letter-spacing:.3em;text-transform:uppercase;color:var(--g200)}
.hero-meta b{font-family:var(--font-display);font-weight:400;font-size:var(--fs-h4);color:#fff;line-height:1.3}
.hero-meta a{font-size:var(--fs-small);color:var(--g100);text-decoration:underline;text-decoration-color:rgba(226,227,228,.4);text-underline-offset:4px;width:max-content;max-width:100%}
.hero-meta a:hover{color:#fff;text-decoration-color:#fff}
.hero-nav{bottom:48px}
.hero-arrow{width:48px;height:48px;background:transparent;border-color:rgba(226,227,228,.4)}
@media(max-width:900px){
  .hero-full .wrap{padding-top:140px;padding-bottom:120px}
  .hero-meta{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3)}
}
@media(max-width:700px){
  .hero-slider::after{display:none}
  .hero-full .wrap{padding-top:0;padding-bottom:84px}
  .hero-eyebrow{margin-bottom:var(--sp-2)}
  .hero-eyebrow::before{width:24px}
  .hero-full h1{font-size:clamp(2.5rem,11vw,3.2rem);line-height:1.02}
  .hero-actions{margin-top:var(--sp-4)}
  .hero-meta{grid-template-columns:1fr 1fr;margin-top:var(--sp-4);padding-top:var(--sp-2);gap:var(--sp-2)}
  .hero-meta li:nth-child(3){display:none}
  .hero-meta b{font-size:1.05rem}
  .hero-nav{bottom:28px}
}
/* Startbereich: kompakter, damit alles auf den ersten Blick sichtbar ist */
:root{--fs-hero:clamp(2.9rem,6vw,5.6rem)}
.hero-slider{min-height:max(640px,calc(100svh - var(--header-h)))}
.hero-full .wrap{padding-top:120px;padding-bottom:96px}
.hero-eyebrow{margin-bottom:var(--sp-3)}
.hero-lead{margin-top:var(--sp-3)}
.hero-actions{margin-top:var(--sp-4)}
.hero-meta{margin-top:var(--sp-5)}
.hero-nav{bottom:40px}
@media(max-height:820px) and (min-width:701px){.hero-lead{display:none}}
@media(max-width:900px){.hero-full .wrap{padding-top:110px;padding-bottom:110px}}
@media(max-width:700px){
  .hero-full .wrap{padding-top:0;padding-bottom:80px}
  .hero-eyebrow{letter-spacing:.2em;font-size:.68rem}
  .hero-eyebrow::before{display:none}
}
.map-load-btn small,.testi-who span{font-size:var(--fs-small);letter-spacing:normal}
.map-embed .map-load-btn{position:absolute;inset:0;height:100%;justify-content:center;font-family:var(--font-display);font-size:var(--fs-h4)}

/* ============================================================
   Startseite: geteilter Startbereich (Text links, Bild rechts)
   ============================================================ */
.hx{--muted:#e2e3e4;position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);min-height:max(640px,calc(100svh - var(--header-h)));max-height:1000px;background:var(--g950);overflow:hidden}
.hx-text{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;padding:var(--sp-6) var(--sp-6) var(--sp-6) max(24px,calc((100vw - 1160px) / 2 + 24px))}
.hx-eyebrow{display:flex;align-items:center;gap:var(--sp-2);margin:0 0 var(--sp-3);font-weight:500;font-size:var(--fs-label);letter-spacing:.3em;text-transform:uppercase;color:var(--g100)}
.hx-eyebrow::before{content:"";width:40px;height:1px;background:rgba(226,227,228,.6)}
.hx h1{font-size:clamp(2.8rem,4.6vw,5rem);line-height:1;letter-spacing:-.022em;font-weight:400;color:#fff;max-width:10ch}
.hx-lead{margin:var(--sp-3) 0 0;max-width:40ch;font-size:var(--fs-lead);line-height:var(--lh-body);color:rgba(243,244,244,.86)}
.hx-actions{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-4)}
.hx-meta{list-style:none;margin:var(--sp-5) 0 0;padding:var(--sp-3) 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3);border-top:1px solid rgba(226,227,228,.22);max-width:560px}
.hx-meta li{display:flex;flex-direction:column;gap:4px;min-width:0}
.hx-meta span{font-size:var(--fs-label);letter-spacing:.3em;text-transform:uppercase;color:var(--g200)}
.hx-meta b{font-family:var(--font-display);font-weight:400;font-size:var(--fs-h4);color:#fff;line-height:1.3}
.hx-meta a{font-size:var(--fs-small);color:var(--g100);text-decoration:underline;text-decoration-color:rgba(226,227,228,.4);text-underline-offset:4px;width:max-content;max-width:100%}
.hx-meta a:hover{color:#fff;text-decoration-color:#fff}

/* Bildfläche: randlos rechts, Wisch-Übergang statt Überblendung */
.hx-media{position:relative;min-height:100%;overflow:hidden;background:var(--g900)}
.hx .hero-slides{position:absolute;inset:0}
.hx .hero-slide{position:absolute;inset:0;opacity:1;visibility:hidden;transition:none}
.hx .hero-slide.is-prev{visibility:visible;z-index:1}
.hx .hero-slide.is-active{visibility:visible;z-index:2;animation:hxWipe 1.25s cubic-bezier(.77,0,.18,1) both}
.hx.is-back .hero-slide.is-active{animation-name:hxWipeBack}
.hx .hero-slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:none;filter:saturate(.72) contrast(1.03)}
.hx .hero-slide.is-active img{animation:hxZoom 8s cubic-bezier(.25,.1,.25,1) both}
@keyframes hxWipe{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0)}}
@keyframes hxWipeBack{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes hxZoom{from{transform:scale(1.1)}to{transform:scale(1.02)}}
/* weicher Übergang vom Textfeld ins Bild */
.hx-media::before{content:"";position:absolute;inset:0 auto 0 0;width:22%;z-index:3;background:linear-gradient(90deg,rgba(74,76,78,.55),rgba(74,76,78,0));pointer-events:none}

/* Leiste unten im Bild: Nummer + Titel, Vorschaubilder, Pfeile */
.hx-bar{position:absolute;z-index:4;left:0;right:0;bottom:0;display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-5) var(--sp-5) var(--sp-4);background:linear-gradient(180deg,rgba(74,76,78,0),rgba(74,76,78,.88) 62%)}
.hx .hero-count{display:flex;align-items:baseline;gap:8px;min-width:0;margin-right:auto;font-family:var(--font-display);font-size:.9rem;color:var(--g200)}
.hx .hero-count b{font-weight:400;font-size:1.6rem;color:#fff}
.hx .hero-cap{margin-left:var(--sp-1);font-family:var(--font-sans);color:var(--g100);white-space:nowrap}
.hx .hero-dots{display:flex;gap:10px}
.hx .hero-dot{position:relative;display:block;width:84px;height:56px;padding:0;border:1px solid rgba(226,227,228,.25);border-radius:2px;background:var(--g900);cursor:pointer;overflow:visible;transition:border-color .3s ease}
.hx .hero-dot img{display:block;width:100%;height:100%;object-fit:cover;opacity:.5;filter:saturate(.4);transition:opacity .3s ease,filter .3s ease}
.hx .hero-dot:hover img{opacity:.85}
.hx .hero-dot.is-active{border-color:#fff}
.hx .hero-dot.is-active img{opacity:1;filter:saturate(.72)}
.hx .hero-dot::before,.hx .hero-dot span{content:"";position:absolute;left:0;top:auto;bottom:-10px;height:2px;margin:0;border-radius:0}
.hx .hero-dot::before{right:0;background:rgba(226,227,228,.22)}
.hx .hero-dot span{width:0;background:#fff}
.hx .hero-dot.is-done span{width:100%}
.hx .hero-dot.is-active span{animation:heroProgress var(--hero-dur,6500ms) linear forwards}
.hx.is-paused .hero-dot.is-active span{animation-play-state:paused}
.hx .hero-arrows{display:flex;gap:8px;margin-left:var(--sp-1)}
.hx .hero-arrow{width:48px;height:48px;border-radius:2px;background:transparent;border-color:rgba(226,227,228,.4);backdrop-filter:none;-webkit-backdrop-filter:none}
.hx .hero-arrow:hover{background:rgba(243,244,244,.1);border-color:#fff;color:#fff}

@media(prefers-reduced-motion:reduce){
  .hx .hero-slide.is-active,.hx .hero-slide.is-active img{animation:none}
}
@media(max-height:820px) and (min-width:901px){.hx-lead{display:none}}
@media(max-width:1180px){
  .hx{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .hx-text{padding-right:var(--sp-5)}
  .hx .hero-cap{display:none}
  .hx .hero-dot{width:64px;height:44px}
}
/* Tablet und Handy: Bild oben, Text darunter */
@media(max-width:900px){
  .hx{grid-template-columns:1fr;min-height:0;max-height:none}
  .hx-media{order:-1;min-height:0;height:min(58svh,560px)}
  .hx-media::before{inset:auto 0 0 0;width:auto;height:30%;background:linear-gradient(0deg,rgba(74,76,78,.6),rgba(74,76,78,0))}
  .hx-text{padding:var(--sp-5) 24px var(--sp-6)}
  .hx-bar{padding:var(--sp-4) 24px 22px}
  .hx .hero-arrows{display:none}
  .hx .hero-cap{display:inline}
}
@media(max-width:700px){
  .hx-media{height:46svh;min-height:300px}
  .hx-text{padding:var(--sp-4) 24px var(--sp-5)}
  .hx-eyebrow{font-size:.68rem;letter-spacing:.2em;margin-bottom:var(--sp-2)}
  .hx-eyebrow::before{display:none}
  .hx h1{font-size:clamp(2.5rem,11vw,3.2rem);line-height:1.02}
  .hx-lead{display:none}
  .hx-actions{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:var(--sp-3)}
  .hx-actions .btn{padding:16px 18px}
  .hx-actions .btn-whatsapp{width:56px;padding:0}
  .hx-actions .btn-whatsapp .lbl{display:none}
  .hx-actions .btn-whatsapp svg{width:22px;height:22px}
  .hx-meta{grid-template-columns:1fr 1fr;margin-top:var(--sp-4);padding-top:var(--sp-2);gap:var(--sp-2)}
  .hx-meta li:nth-child(3){display:none}
  .hx-meta b{font-size:1.05rem}
  .hx .hero-cap{display:none}
  .hx .hero-dots{gap:8px}
  .hx .hero-dot{width:52px;height:36px}
  .hx .hero-dot::before,.hx .hero-dot span{bottom:-8px}
}
/* Feinschliff: Textspalte bündig mit dem Logo, breiter */
@media(min-width:901px){
  .hx{grid-template-columns:minmax(0,46fr) minmax(0,54fr)}
  .hx-text{padding:var(--sp-6) var(--sp-5) var(--sp-7) max(24px,calc((100vw - 1320px) / 2 + 32px))}
}
.hx .hero-count{flex-wrap:nowrap;white-space:nowrap;justify-content:flex-start;flex-shrink:0}
@media(max-width:1180px){
  .hx .lbl-long{display:none}.hx .lbl-short{display:inline}
  .hx-meta{grid-template-columns:1fr 1fr}
  .hx-meta li:nth-child(3){display:none}
  .hx-actions{flex-wrap:nowrap}
  .hx-actions .btn{padding-left:24px;padding-right:24px}
}
.hx-eyebrow{letter-spacing:.22em}
.hx-eyebrow::before{width:28px}
.hx h1{font-size:clamp(2.8rem,4.4vw,4.8rem);max-width:none}
.hx-meta{gap:var(--sp-2);max-width:none}
.hx-meta b{font-size:1.125rem}
@media(max-width:1180px){.hx h1{font-size:clamp(2.6rem,4.6vw,3.6rem)}}
@media(max-width:900px){.hx-text{padding:var(--sp-5) 24px var(--sp-6)}}
@media(max-width:700px){.hx-media{height:42svh}.hx-text{padding:var(--sp-4) 24px var(--sp-5)}}
.hx-bar{padding-left:var(--sp-4);padding-right:var(--sp-4)}
@media(max-width:1599px){.hx .hero-cap{display:none}.hx .hero-dot{width:72px;height:48px}}
@media(max-width:1180px){.hx .hero-arrows{display:none}.hx .hero-dot{width:64px;height:44px}}
@media(max-width:700px){.hx-bar{padding:var(--sp-4) 24px 22px}.hx .hero-dot{width:52px;height:36px}}

/* Startbereich: hochwertiger Hintergrund (Lichtverlauf + feines Korn, nur Grautöne) */
.hx{background:
  radial-gradient(120% 90% at 0% 0%,rgba(243,244,244,.09) 0%,rgba(243,244,244,0) 55%),
  radial-gradient(90% 70% at 30% 110%,rgba(30,32,34,.28) 0%,rgba(30,32,34,0) 60%),
  linear-gradient(160deg,#55575a 0%,#4a4c4e 45%,#424446 100%)}
.hx::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.22;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hx-media{z-index:2}
.hx-text{z-index:3}
@media(min-width:901px){.hx-media{box-shadow:-1px 0 0 rgba(226,227,228,.14),-24px 0 48px rgba(30,32,34,.22)}}
@media(max-width:900px){.hx-media{box-shadow:0 1px 0 rgba(226,227,228,.14),0 24px 48px rgba(30,32,34,.22)}}

/* ============================================================
   Edel-Pass: Licht, Korn, Haarlinien, ruhigere Flächen (nur Grautöne)
   ============================================================ */
:root{
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --hair:rgba(226,227,228,.14);
  --hair-strong:rgba(226,227,228,.26);
}
html{background:#4a4c4e}
body{text-rendering:optimizeLegibility;font-kerning:normal;font-feature-settings:"kern","liga"}
::selection{background:rgba(226,227,228,.85);color:#3f4143}

/* Flächen: Grund mit sanftem Licht von oben + feines Korn */
body{background:var(--grain),linear-gradient(180deg,#5a5c5e,#55575a) fixed}
.section{position:relative;background:var(--grain),radial-gradient(80% 60% at 50% 0%,rgba(243,244,244,.05),rgba(243,244,244,0) 70%),#5a5c5e}
.section-alt{background:var(--grain),radial-gradient(70% 70% at 0% 0%,rgba(243,244,244,.06),rgba(243,244,244,0) 60%),linear-gradient(180deg,#535557,#4e5052)}
/* Haarlinie statt harter Farbkante zwischen Abschnitten */
.section + .section::before,.section + .section-tight::before{content:"";position:absolute;top:0;left:50%;width:min(1112px,calc(100% - 48px));height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--hair-strong) 20%,var(--hair-strong) 80%,transparent)}
.section-tight{position:relative}

/* Kopf und Fuss */
.site-header::before{background:var(--grain),linear-gradient(180deg,rgba(82,84,86,.94),rgba(74,76,78,.92));border-bottom:1px solid var(--hair)}
.site-footer{background:var(--grain),radial-gradient(60% 80% at 100% 0%,rgba(243,244,244,.05),rgba(243,244,244,0) 60%),linear-gradient(180deg,#4a4c4e,#434547)}
.footer-cta{background:var(--grain),radial-gradient(70% 120% at 50% 0%,rgba(243,244,244,.08),rgba(243,244,244,0) 65%),#4e5052;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.footer-bottom{border-top-color:var(--hair)}
.page-hero{background:#4a4c4e}
.page-hero .hero-scrim{background:radial-gradient(90% 90% at 0% 0%,rgba(243,244,244,.07),rgba(243,244,244,0) 60%),linear-gradient(180deg,rgba(74,76,78,.45) 0%,rgba(74,76,78,.9) 100%)}
.page-hero::after{content:"";position:absolute;inset:0;background:var(--grain);pointer-events:none}
.page-hero .wrap{z-index:1}
.mobile-panel{background:var(--grain),linear-gradient(180deg,#55575a,#4a4c4e)}

/* Karten: leichter Lichtschein oben, Haarlinien statt Spaltfugen */
.card-grid,.testi-grid,.info-cards{background:var(--hair);border-color:var(--hair);gap:1px}
.service-card,.testi-card,.info-card{background:linear-gradient(180deg,#606264 0%,#57595b 100%);transition:background .4s ease}
.service-card:hover{background:linear-gradient(180deg,#67696b 0%,#5c5e60 100%)}
.service-card .price-line,.testi-who,.editorial-item{border-color:var(--hair)}
.stat-row{border-color:var(--hair-strong)}
.stat-col + .stat-col::before{background:var(--hair)}

/* Bilder: feine Innenkante + weicher, tiefer Schatten */
.split-media img,.mosaic img,.gallery-grid img{outline:1px solid rgba(243,244,244,.1);outline-offset:-1px}
.split-media,.mosaic > *{box-shadow:0 30px 60px -30px rgba(40,42,44,.55)}
.split-media.framed::before{border-color:var(--hair-strong)}
.mosaic img,.split-media img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1),filter .6s ease}
.mosaic > *{overflow:hidden}
.mosaic > *:hover img{transform:scale(1.035)}

/* Knöpfe: heller Knopf mit Lichtkante, Linienknöpfe füllen sich ruhig */
.btn{transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease,background .35s ease,color .35s ease,border-color .35s ease}
.btn-gold,.site-header .btn-gold,.hero-full .btn-gold,.page-hero .btn-gold,.site-footer .btn-gold,.mobile-panel .btn-gold{background:linear-gradient(180deg,#f3f4f4 0%,#dcdedf 100%);color:#45474a;border-color:rgba(243,244,244,.9);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 14px 30px -12px rgba(40,42,44,.6)}
.btn-gold:hover,.site-header .btn-gold:hover,.hero-full .btn-gold:hover,.page-hero .btn-gold:hover,.site-footer .btn-gold:hover,.mobile-panel .btn-gold:hover{background:linear-gradient(180deg,#fff 0%,#e6e7e8 100%);border-color:#fff;transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 20px 36px -14px rgba(40,42,44,.65)}
.btn-line{border-color:var(--hair-strong);background:linear-gradient(rgba(243,244,244,.1),rgba(243,244,244,.1)) no-repeat 0 100%/100% 0}
.btn-line:hover{background-size:100% 100%;border-color:rgba(243,244,244,.55);color:#fff}
.btn-whatsapp{box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 14px 30px -12px rgba(40,42,44,.6)}
.btn-whatsapp:hover{transform:translateY(-1px)}

/* Typografie: ruhiger, mehr Luft in Labels */
.eyebrow{color:var(--g100)}
.eyebrow-line::before,.eyebrow-line::after,.section-head.center .eyebrow::before,.section-head.center .eyebrow::after{background:var(--hair-strong)}
.section-head h2,.split-grid h2{font-weight:400;letter-spacing:-.018em}
.testi-card p{color:#f3f4f4}

@media(prefers-reduced-motion:reduce){.mosaic > *:hover img{transform:none}.btn:hover{transform:none!important}}

/* ============================================================
   Farbsystem: wenige, klar gestufte kühle Grautöne, die zusammenspielen
   Rahmen (Kopf, Start, Fuss) am dunkelsten, Inhalt heller, Karten am hellsten
   ============================================================ */
:root{
  --c-frame:#46484b;   /* Kopf, Startbereich, Unterseiten-Kopf, Fuss */
  --c-frame-2:#4c4e51; /* Aufruf vor dem Fuss, Handy-Menü */
  --c-alt:#505255;     /* abwechselnde Abschnitte */
  --c-base:#57595c;    /* Grund */
  --c-raise-1:#626467; /* Karten oben */
  --c-raise-2:#5b5d60; /* Karten unten */
  --t-1:#f4f5f5;       /* Titel */
  --t-2:#dfe1e2;       /* Fliesstext */
  --t-3:#c9cbcd;       /* Labels, Nebentext */
  --ink:var(--c-base);--panel:var(--c-alt);--panel-2:var(--c-raise-2);--panel-3:var(--c-raise-1);
  --cream:var(--t-1);--muted:var(--t-2);--muted-2:var(--t-3);
  --wa:#3a845e;--wa-hover:#326f50;
}
html{background:var(--c-frame)}
body{background:var(--grain),var(--c-base);color:var(--t-2)}

/* Rahmenflächen: alle aus derselben dunkelsten Stufe */
.site-header::before{background:var(--grain),rgba(70,72,75,.95);border-bottom:1px solid var(--hair)}
.hx{background:
  radial-gradient(120% 90% at 0% 0%,rgba(244,245,245,.07) 0%,rgba(244,245,245,0) 55%),
  linear-gradient(160deg,#4d4f52 0%,var(--c-frame) 50%,#424447 100%)}
.hx-media{background:var(--c-frame)}
.hx-bar{background:linear-gradient(180deg,rgba(70,72,75,0),rgba(70,72,75,.9) 62%)}
.hx-media::before{background:linear-gradient(90deg,rgba(70,72,75,.55),rgba(70,72,75,0))}
.page-hero{background:var(--c-frame)}
.page-hero .hero-scrim{background:radial-gradient(90% 90% at 0% 0%,rgba(244,245,245,.06),rgba(244,245,245,0) 60%),linear-gradient(180deg,rgba(70,72,75,.5) 0%,rgba(70,72,75,.92) 100%)}
.site-footer{background:var(--grain),radial-gradient(60% 80% at 100% 0%,rgba(244,245,245,.04),rgba(244,245,245,0) 60%),var(--c-frame)}
.footer-cta{background:var(--grain),radial-gradient(70% 120% at 50% 0%,rgba(244,245,245,.07),rgba(244,245,245,0) 65%),var(--c-frame-2)}
.mobile-panel{background:var(--grain),var(--c-frame-2)}
.site-header,.hero-full,.page-hero,.site-footer,.mobile-panel,.hx{--ink:var(--c-frame);--muted:var(--t-2);--muted-2:var(--t-3)}

/* Inhaltsflächen */
.section{background:var(--grain),radial-gradient(80% 60% at 50% 0%,rgba(244,245,245,.045),rgba(244,245,245,0) 70%),var(--c-base)}
.section-alt{background:var(--grain),radial-gradient(70% 70% at 0% 0%,rgba(244,245,245,.05),rgba(244,245,245,0) 60%),var(--c-alt)}
.service-card,.testi-card,.info-card{background:linear-gradient(180deg,var(--c-raise-1),var(--c-raise-2))}
.service-card:hover{background:linear-gradient(180deg,#696b6e,var(--c-raise-1))}
.section-alt .service-card,.section-alt .testi-card,.section-alt .info-card{background:linear-gradient(180deg,#5c5e61,#55575a)}

/* Schrift: drei Helligkeitsstufen, überall gleich */
h1,h2,h3,h4,.hx h1,.hero-full h1,.hx-meta b,.service-row .service-price,.service-card .price-line,.stat-col b,.price-mini-item b{color:var(--t-1)}
p,.hx-lead,.hero-lead,.section-head p,.service-card p,.service-row p,.testi-card p,.info-card p{color:var(--t-2)}
.eyebrow,.hx-eyebrow,.hx-meta span,.stat-col span,.sig-list .tag,.testi-who span,.service-row .service-note,.breadcrumb,.footer-bottom,.hero-count span{color:var(--t-3)}
.hx-meta a,.footer-col a{color:var(--t-2)}
.hx-meta a:hover,.footer-col a:hover{color:var(--t-1)}

/* Fotos: eine gemeinsame, kühle Bildsprache */
.hx .hero-slide img,.hero-full img,.page-hero .hero-bg img,.split-media img,.mosaic img,.gallery-grid img{filter:saturate(.6) contrast(1.05) brightness(.98)}
@media(hover:hover){.mosaic a:hover img,.gallery-grid figure:hover img,.mosaic > *:hover img{filter:saturate(.8) contrast(1.05)}}
.hx .hero-dot img{filter:saturate(.3)}
.hx .hero-dot.is-active img{filter:saturate(.6) contrast(1.05)}

/* Knöpfe: Hellton passt zur Titelfarbe, Grün gedämpft zum Grau */
.btn-gold,.site-header .btn-gold,.hero-full .btn-gold,.page-hero .btn-gold,.site-footer .btn-gold,.mobile-panel .btn-gold{background:linear-gradient(180deg,var(--t-1) 0%,#dcdedf 100%);color:var(--c-frame)}
.btn-whatsapp,.icon-btn-wa{background:var(--wa);border-color:var(--wa)}
.btn-whatsapp:hover,.icon-btn-wa:hover{background:var(--wa-hover);border-color:var(--wa-hover)}

/* ============================================================
   Modern: eine klare Groteskschrift (Jost) für alles, normale
   Schreibweise statt gesperrter Grossbuchstaben, freistehende Karten
   ============================================================ */
:root{--font-display:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
h1,h2,h3,h4{font-family:var(--font-sans);font-weight:500;letter-spacing:-.028em}
.hx h1,.hero-full h1{font-weight:500;letter-spacing:-.04em;line-height:.98}
.section-head h2,.split-grid h2,.footer-cta h2,.page-hero h1{font-weight:500;letter-spacing:-.035em;line-height:1.04}
h3,h4,.service-card h3,.service-row h3,.info-card h3{letter-spacing:-.015em}
.testi-card p,.process-item .num{font-style:normal}
.testi-card p{font-family:var(--font-sans);font-weight:400;line-height:1.65}
.service-card .price-line,.service-row .service-price,.price-mini-item b,.stat-col b,.hx-meta b,.hero-count,.process-item .num,.editorial-num{font-family:var(--font-sans);font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.brand-tag,.footer-brand span,.mobile-panel-links a,.map-embed .map-load-btn,.hours-note .hours-now{font-family:var(--font-sans);font-weight:450}
.mobile-panel-links a{letter-spacing:-.01em}

/* Labels: klein, kaum gesperrt, ohne Zierlinien */
.eyebrow,.hx-eyebrow,.hx-meta span,.stat-col span,.sig-list .tag,.service-row .service-note,.service-row .service-price small,.status-pill,.footer-col h4,.hero-cap{letter-spacing:.12em;font-weight:500}
.hx-eyebrow::before,.hero-eyebrow::before,.eyebrow-line::before,.eyebrow-line::after,
.section-head.center .eyebrow::before,.section-head.center .eyebrow::after,.footer-cta .eyebrow::before,.footer-cta .eyebrow::after{display:none}

/* Navigation und Knöpfe in normaler Schreibweise */
.main-nav-desktop a{text-transform:none;letter-spacing:0;font-size:.95rem;font-weight:450}
.btn,.btn-sm,.mobile-panel-cta .btn{text-transform:none;letter-spacing:0;font-size:.95rem;font-weight:500}
.btn{padding:15px 26px}
.btn-sm{padding:11px 20px}
.order-btn{font-size:.9rem}

/* Karten freistehend mit Abstand statt verbundener Tabelle */
@media(min-width:881px){
  .card-grid,.testi-grid,.info-cards{gap:16px;background:none;border:0;overflow:visible}
  .service-card,.testi-card,.info-card{border:1px solid var(--hair);border-radius:var(--radius-lg)}
}
@media(max-width:880px){
  .testi-grid{gap:14px;background:none;border:0}
  .testi-card{border:1px solid var(--hair)}
  .card-grid,.info-cards{gap:12px;background:none;border:0;overflow:visible}
  .service-card,.info-card{border:1px solid var(--hair);border-radius:var(--radius-lg)}
}
.service-card,.testi-card,.info-card{box-shadow:0 1px 0 rgba(244,245,245,.06) inset,0 18px 40px -24px rgba(40,42,44,.6)}

/* Bild ohne versetzten Zierrahmen */
.split-media.framed::before{display:none}
/* Stichworte als kleine eckige Etiketten */
.sig-list{gap:8px}
.sig-list .tag{padding:7px 12px;border:1px solid var(--hair-strong);border-radius:2px;text-transform:none;letter-spacing:0;font-size:var(--fs-small);font-weight:450;color:var(--t-2);background:rgba(244,245,245,.04)}
.sig-list .tag:not(:last-child)::after{display:none}

/* ============================================================
   Startbereich mit TikTok-Clips: drei Hochkant-Videos versetzt
   ============================================================ */
.hx-reels{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-4);padding:var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-4);
  background:radial-gradient(70% 60% at 55% 45%,rgba(244,245,245,.09),rgba(244,245,245,0) 70%),linear-gradient(160deg,#4f5154,#45474a)}
.hx-reels::before{display:none}
.hx-reel-row{display:flex;align-items:center;justify-content:center;gap:clamp(12px,1.4vw,22px);width:100%;height:min(100%,640px);min-height:0;flex:1}
.hx-reel{position:relative;margin:0;height:72%;aspect-ratio:9/16;border-radius:var(--radius-lg);overflow:hidden;background:#3f4144;border:1px solid var(--hair-strong);box-shadow:0 40px 70px -30px rgba(30,32,34,.75)}
.hx-reel.is-main{height:100%}
.hx-reel.r1{transform:translateY(9%)}
.hx-reel.r3{transform:translateY(-9%)}
.hx-reel video{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.72) contrast(1.04)}
.hx-reel:not(.is-main)::after{content:"";position:absolute;inset:0;background:rgba(70,72,75,.18);pointer-events:none}
.hx-tiktok{display:inline-grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:10px 18px 10px 14px;border:1px solid var(--hair-strong);border-radius:var(--radius-md);background:rgba(244,245,245,.05);color:var(--t-1);transition:background .3s ease,border-color .3s ease}
.hx-tiktok:hover{background:rgba(244,245,245,.1);border-color:rgba(244,245,245,.5)}
.hx-tiktok svg{grid-row:1 / 3;width:22px;height:22px;fill:currentColor}
.hx-tiktok span{font-weight:500;font-size:.95rem;line-height:1.2}
.hx-tiktok small{font-size:var(--fs-small);color:var(--t-3);line-height:1.2}
@media(max-width:1180px){.hx-reel.r1,.hx-reel.r3{height:64%}}
@media(max-width:900px){
  .hx-reels{height:auto;min-height:0;padding:var(--sp-4) 24px var(--sp-3);gap:var(--sp-3);box-shadow:none}
  .hx-reel-row{height:auto;flex:none;gap:10px}
  .hx-reel.is-main{height:auto;width:46%}
  .hx-reel.r1,.hx-reel.r3{height:auto;width:27%}
}
@media(max-width:700px){
  .hx-reels{padding-top:var(--sp-3)}
  .hx-reel.is-main{width:48%}
  .hx-reel.r1,.hx-reel.r3{width:26%}
  .hx-tiktok{padding:8px 14px 8px 12px}
}
.hx-reels{background:radial-gradient(60% 55% at 50% 45%,rgba(244,245,245,.07),rgba(244,245,245,0) 70%);box-shadow:none!important}

/* ============================================================
   Silbergrau (helleres Schiefergrau): leicht kühler Ton, weiche
   Lichtflächen statt Körnung (edel + modern)
   ============================================================ */
:root{
  --c-frame:#4f5458;
  --c-frame-2:#565b60;
  --c-alt:#63686d;
  --c-base:#6a6f74;
  --c-raise-1:#777c81;
  --c-raise-2:#70757a;
  --t-1:#ffffff;--t-2:#eef0f2;--t-3:#dadde0;
  --hair:rgba(222,228,236,.13);
  --hair-strong:rgba(222,228,236,.24);
  --glow:rgba(214,224,238,.09);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .025 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html{background:var(--c-frame)}
body{background:var(--c-base)}
::selection{background:rgba(222,228,236,.85);color:var(--c-frame)}

/* Kopf: fast deckend, feine Linie */
.site-header::before{background:rgba(79,84,88,.92);border-bottom:1px solid var(--hair)}

/* Startbereich: ruhiger Verlauf, weiches Licht hinter den Videos */
.hx{background:
  radial-gradient(45% 60% at 72% 48%,var(--glow),transparent 70%),
  radial-gradient(60% 80% at 0% 0%,rgba(214,224,238,.06),transparent 60%),
  linear-gradient(165deg,#585d62 0%,var(--c-frame) 55%,#4a4f53 100%)}
.hx::before{opacity:.12}
.hx-reels{background:none}
.hx-reel{background:#4a4e52}
.hx-reel:not(.is-main)::after{background:rgba(79,84,88,.18)}

/* Abschnitte: grosse, weiche Lichtflächen, kaum Korn */
.section{background:var(--grain),radial-gradient(70% 55% at 85% 0%,var(--glow),transparent 65%),var(--c-base)}
.section-alt{background:var(--grain),radial-gradient(70% 60% at 10% 0%,var(--glow),transparent 65%),var(--c-alt)}
.section + .section::before,.section + .section-tight::before{background:linear-gradient(90deg,transparent,var(--hair-strong) 20%,var(--hair-strong) 80%,transparent)}

/* Unterseiten-Kopf, Aufruf, Fuss, Handy-Menü */
.page-hero{background:var(--c-frame)}
.page-hero .hero-scrim{background:radial-gradient(80% 90% at 0% 0%,rgba(214,224,238,.07),transparent 60%),linear-gradient(180deg,rgba(79,84,88,.5) 0%,rgba(79,84,88,.93) 100%)}
.footer-cta{background:radial-gradient(60% 120% at 50% 0%,rgba(214,224,238,.1),transparent 65%),var(--c-frame-2)}
.site-footer{background:radial-gradient(50% 80% at 100% 0%,rgba(214,224,238,.05),transparent 60%),var(--c-frame)}
.mobile-panel{background:linear-gradient(180deg,#585d62,var(--c-frame))}

/* Karten: glasartig hell, feine Lichtkante oben */
.service-card,.testi-card,.info-card{background:linear-gradient(180deg,var(--c-raise-1),var(--c-raise-2));box-shadow:0 1px 0 rgba(235,240,246,.08) inset,0 20px 44px -26px rgba(28,31,35,.65)}
.service-card:hover{background:linear-gradient(180deg,#7e8388,var(--c-raise-1))}
.section-alt .service-card,.section-alt .testi-card,.section-alt .info-card{background:linear-gradient(180deg,#6f7479,#6a6f74)}
.split-media,.mosaic > *{box-shadow:0 30px 60px -30px rgba(28,31,35,.6)}
.btn-gold,.site-header .btn-gold,.hero-full .btn-gold,.page-hero .btn-gold,.site-footer .btn-gold,.mobile-panel .btn-gold{color:var(--c-frame)}
/* Kontakt-Teil auf "Über uns": Karten nicht mehr in den Seitenkopf gezogen */
.section-kontakt .info-cards{margin-top:0}
#kontakt,#anfahrt{scroll-margin-top:var(--header-h)}
/* Handy: TikTok-Knopf unter den Videos ausblenden */
@media(max-width:900px){.hx-tiktok{display:none}.hx-reels{padding-bottom:var(--sp-2)}}

/* ============================================================
   Handy: alles mittig ausgerichtet
   ============================================================ */
@media(max-width:700px){
  main,.footer-cta{text-align:center}
  /* Startbereich */
  .hx-text{align-items:center;text-align:center}
  .hx-actions{width:100%}
  .hx-meta{width:100%;justify-items:center}
  .hx-meta li{align-items:center}
  .hx-meta a{margin:0 auto}
  /* Seitenkopf Unterseiten */
  .page-hero .wrap{display:flex;flex-direction:column;align-items:center}
  .breadcrumb{justify-content:center}
  .page-hero p{margin-left:auto;margin-right:auto}
  /* Text-Bild-Abschnitte */
  .split-grid > div{display:flex;flex-direction:column;align-items:center}
  .split-grid > .split-media,.split-grid > .map-embed{display:block;width:100%}
  .split-grid p,.section-head p{margin-left:auto;margin-right:auto}
  .sig-list,.btn-row,.hero-actions{justify-content:center}
  .hours-note{width:100%}
  .hours-note .hours-now{justify-content:center}
  /* Karten und Listen */
  .info-card{align-items:center}
  .service-card .price-line{text-align:center}
  .testi-who{align-items:center}
  .service-row{justify-items:center;text-align:center}
  .service-row .service-note,.service-row .service-price{text-align:center}
  .price-mini-item{flex-direction:column;align-items:center;gap:4px}
  .editorial-item{text-align:center}
  /* Fussleiste bleibt linksbündig */
  .site-footer .footer-grid,.site-footer .footer-bottom{text-align:left}
  .info-card .btn-row{width:100%}
  .info-card .btn-row .btn{width:100%}
  /* Rechtstexte bleiben linksbündig, damit sie lesbar sind */
  .legal-body{text-align:left}
}

/* ============================================================
   Hintergrund edler: gebürstetes Graphit (feine waagrechte Struktur),
   weiche Randabdunklung und Lichtkante oben an jedem Abschnitt
   ============================================================ */
:root{
  --brush:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='300'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.003 .75' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");
  --vignette:radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(30,33,37,.28) 100%);
}
.section{background:var(--brush),var(--vignette),radial-gradient(70% 55% at 85% 0%,var(--glow),transparent 65%),var(--c-base)}
.section-alt{background:var(--brush),var(--vignette),radial-gradient(70% 60% at 10% 0%,var(--glow),transparent 65%),var(--c-alt)}
.footer-cta{background:var(--brush),var(--vignette),radial-gradient(60% 120% at 50% 0%,rgba(214,224,238,.1),transparent 65%),var(--c-frame-2)}
.site-footer{background:var(--brush),radial-gradient(50% 80% at 100% 0%,rgba(214,224,238,.05),transparent 60%),var(--c-frame)}
.hx{background:var(--brush),
  radial-gradient(45% 60% at 72% 48%,var(--glow),transparent 70%),
  radial-gradient(60% 80% at 0% 0%,rgba(214,224,238,.06),transparent 60%),
  radial-gradient(120% 100% at 40% 40%,transparent 55%,rgba(30,33,37,.3) 100%),
  linear-gradient(165deg,#585d62 0%,var(--c-frame) 55%,#4a4f53 100%)}
.hx::before{display:none}
.page-hero::after{background:var(--brush)}
/* Lichtkante oben an jedem Abschnitt, wie poliertes Metall */
.section::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(235,240,246,.16) 50%,transparent);pointer-events:none}
.section + .section::before,.section + .section-tight::before{display:none}
/* Silbergrau: Linien und Schatten etwas kräftiger, damit Karten auf hellerem Grund stehen */
:root{--hair:rgba(240,243,246,.17);--hair-strong:rgba(240,243,246,.3)}
.service-card,.testi-card,.info-card{box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 22px 46px -26px rgba(28,31,35,.55)}

/* ============================================================
   PERLGRAU: heller Auftritt, fast weisses Grau, dunkelgraue Schrift
   (kein Schwarz). Überschreibt alle dunklen Stufen davor.
   ============================================================ */
:root,.site-header,.hero-full,.page-hero,.site-footer,.mobile-panel,.hx{
  --c-frame:#d9dbdd;    /* Kopf, Fuss, Aufruf */
  --c-frame-2:#dfe1e3;
  --c-alt:#e1e3e4;      /* abwechselnde Abschnitte */
  --c-base:#e8e9ea;     /* Grund */
  --c-raise-1:#f4f5f6;  /* Karten */
  --c-raise-2:#eef0f1;
  --t-1:#2e3135;        /* Titel */
  --t-2:#44484d;        /* Fliesstext */
  --t-3:#5b5f64;        /* Labels */
  --ink:var(--c-base);--panel:var(--c-alt);--panel-2:var(--c-raise-2);--panel-3:var(--c-raise-1);
  --cream:var(--t-1);--muted:var(--t-2);--muted-2:var(--t-3);
  --gold:#3c4045;--gold-light:#2e3135;--gold-deep:#5b5f64;
  --line:rgba(40,44,48,.12);--line-soft:rgba(40,44,48,.07);--line-strong:rgba(40,44,48,.26);
  --hair:rgba(40,44,48,.12);--hair-strong:rgba(40,44,48,.24);
  --glow:rgba(255,255,255,.7);
  --g50:#2e3135;--g100:#3c4045;--g200:#5b5f64;
  --brush:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='300'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.003 .75' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .37 0 0 0 0 .4 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");
  --vignette:radial-gradient(120% 90% at 50% 40%,transparent 60%,rgba(120,126,132,.10) 100%);
}
html{background:var(--c-frame)}
body{background:var(--c-base);color:var(--t-2)}
::selection{background:#3c4045;color:#f4f5f6}

/* Logo dunkel */
.brand-logo,.mobile-panel-brand img,.footer-brand img{filter:brightness(0) opacity(.82)}

/* Kopf */
.site-header::before{background:rgba(232,233,234,.9);border-bottom:1px solid var(--hair)}
.main-nav-desktop a{color:var(--t-2)}
.main-nav-desktop a:hover,.main-nav-desktop a.active{color:var(--t-1)}
.main-nav-desktop a::after{background:var(--t-1)}
.brand-tag{color:var(--t-2);border-left-color:var(--hair-strong)}
.call-cta{color:var(--t-1)}.call-cta svg{color:var(--t-2)}
.nav-toggle{border-color:var(--hair-strong)}
.nav-toggle::before,.nav-toggle::after,.nav-toggle span{background:var(--t-1)}
.header-call{background:#3c4045!important;color:#f4f5f6!important}

/* Knöpfe: dunkelgrau mit heller Schrift; Linienknöpfe dunkel umrandet */
.btn-gold,.site-header .btn-gold,.hero-full .btn-gold,.page-hero .btn-gold,.site-footer .btn-gold,.mobile-panel .btn-gold{background:linear-gradient(180deg,#4a4e54 0%,#3a3e43 100%);color:#f6f7f8;border-color:#3a3e43;box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 14px 28px -14px rgba(40,44,48,.45)}
.btn-gold:hover,.site-header .btn-gold:hover,.hero-full .btn-gold:hover,.page-hero .btn-gold:hover,.site-footer .btn-gold:hover,.mobile-panel .btn-gold:hover{background:linear-gradient(180deg,#55595f 0%,#43474c 100%);border-color:#43474c;color:#fff}
.btn-line,.btn-ghost{color:var(--t-1);border-color:var(--hair-strong);background:linear-gradient(rgba(40,44,48,.06),rgba(40,44,48,.06)) no-repeat 0 100%/100% 0}
.btn-line:hover,.btn-ghost:hover{color:var(--t-1);border-color:rgba(40,44,48,.5);background-size:100% 100%}
.icon-btn{border-color:var(--hair)}

/* Startbereich */
.hx{background:var(--brush),
  radial-gradient(45% 60% at 72% 48%,rgba(255,255,255,.75),transparent 70%),
  radial-gradient(60% 80% at 0% 0%,rgba(255,255,255,.5),transparent 60%),
  linear-gradient(165deg,#e4e6e7 0%,#dcdee0 55%,#d6d8da 100%)}
.hx h1,.hx-meta b{color:var(--t-1)}
.hx-lead{color:var(--t-2)}
.hx-meta{border-top-color:var(--hair-strong)}
.hx-meta span{color:var(--t-3)}
.hx-meta a{color:var(--t-2);text-decoration-color:rgba(40,44,48,.3)}
.hx-meta a:hover{color:var(--t-1);text-decoration-color:var(--t-1)}
.hx-reel{background:#cfd2d4;border-color:rgba(40,44,48,.14);box-shadow:0 40px 70px -32px rgba(60,66,72,.5)}
.hx-reel:not(.is-main)::after{background:rgba(232,233,234,.12)}
.hx-tiktok{color:var(--t-1);border-color:var(--hair-strong);background:rgba(255,255,255,.45)}
.hx-tiktok:hover{background:rgba(255,255,255,.8);border-color:rgba(40,44,48,.45)}
.hx-tiktok small{color:var(--t-3)}

/* Abschnitte */
.section{background:var(--brush),var(--vignette),radial-gradient(70% 55% at 85% 0%,var(--glow),transparent 65%),var(--c-base)}
.section-alt{background:var(--brush),var(--vignette),radial-gradient(70% 60% at 10% 0%,var(--glow),transparent 65%),var(--c-alt)}
.section::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.9) 50%,transparent)}
.eyebrow,.hx-eyebrow,.stat-col span,.sig-list .tag,.testi-who span,.service-row .service-note,.breadcrumb,.footer-bottom{color:var(--t-3)}
.sig-list .tag{background:rgba(255,255,255,.5);color:var(--t-2)}
.split-media img,.mosaic img,.gallery-grid img{outline-color:rgba(40,44,48,.1)}
.split-media,.mosaic > *{box-shadow:0 30px 60px -32px rgba(60,66,72,.45)}

/* Karten weiss-grau, weicher Schatten */
.service-card,.testi-card,.info-card,.section-alt .service-card,.section-alt .testi-card,.section-alt .info-card{background:linear-gradient(180deg,var(--c-raise-1),var(--c-raise-2));box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 20px 40px -26px rgba(60,66,72,.4)}
.service-card:hover{background:linear-gradient(180deg,#fafafb,var(--c-raise-1))}
.hours-note,.price-mini-item,.map-embed{background:var(--c-raise-1)}
.price-mini{background:var(--hair);border-color:var(--hair)}
.map-load-btn{color:var(--t-1);border-color:var(--hair-strong)}
.testi-dots button::before{background:rgba(40,44,48,.2)}
.testi-dots button.is-active::before{background:var(--t-1)}

/* Unterseiten-Kopf: Foto hell überdeckt */
.page-hero{background:var(--c-frame)}
.page-hero .hero-bg img{opacity:.5}
.page-hero .hero-scrim{background:radial-gradient(80% 90% at 0% 0%,rgba(255,255,255,.55),transparent 60%),linear-gradient(180deg,rgba(232,233,234,.72) 0%,rgba(232,233,234,.93) 100%)}
.page-hero h1{color:var(--t-1)}.page-hero p{color:var(--t-2)}
.breadcrumb a{color:var(--t-2)}

/* Aufruf + Fuss */
.footer-cta{background:var(--brush),radial-gradient(60% 120% at 50% 0%,rgba(255,255,255,.6),transparent 65%),var(--c-frame-2);border-color:var(--hair)}
.site-footer{background:var(--brush),var(--c-frame)}
.footer-col h4{color:var(--t-1)}
.footer-col a,.footer-brand span,.site-footer p{color:var(--t-2)}
.footer-col a:hover{color:var(--t-1)}
.footer-brand span{border-left-color:var(--hair-strong)}

/* Handy-Menü */
.mobile-panel{background:var(--c-base);border-left-color:var(--hair)}
.mobile-panel-links a{color:var(--t-1);border-bottom-color:var(--hair)}
.mobile-panel-close{color:var(--t-1);border-color:var(--hair-strong)}
.nav-scrim{background:rgba(120,126,132,.35)}
.to-top{background:var(--c-raise-1);color:var(--t-1);border-color:var(--hair-strong)}
.lightbox{background:rgba(46,49,53,.94)}

/* Fotos und Videos: natürlicher, weil der Grund hell ist */
.hx .hero-slide img,.hero-full img,.split-media img,.mosaic img,.gallery-grid img,.hx-reel video{filter:saturate(.8) contrast(1.03)}
/* Perlgrau: Kopfleiste bleibt beim Scrollen hell */
.site-header.is-scrolled::before{background:rgba(236,237,238,.94);border-bottom-color:var(--hair);box-shadow:0 10px 30px -20px rgba(60,66,72,.35)}

/* ============================================================
   Perlgrau edler: feinere Abstufung, weisse Lichtkanten,
   Aufruf und Fuss als ruhiger Graphit-Kontrast
   ============================================================ */
:root{--c-base:#ebeced;--c-alt:#e3e5e6;--c-raise-1:#f8f9f9;--c-raise-2:#f1f2f3;--graphit:#373b40;--graphit-2:#3f4348}
body{background:var(--c-base)}
.section{background:var(--brush),radial-gradient(70% 55% at 85% 0%,rgba(255,255,255,.85),transparent 65%),var(--c-base)}
.section-alt{background:var(--brush),radial-gradient(70% 60% at 10% 0%,rgba(255,255,255,.7),transparent 65%),linear-gradient(180deg,#e5e7e8,#e0e2e3)}
.section::after{height:1px;background:linear-gradient(90deg,transparent,#fff 50%,transparent)}

/* Kopf: mattes Milchglas */
.site-header::before,.site-header.is-scrolled::before{background:rgba(242,243,244,.86);backdrop-filter:saturate(1.2) blur(14px);-webkit-backdrop-filter:saturate(1.2) blur(14px);border-bottom:1px solid rgba(40,44,48,.09)}

/* Startbereich: weiches Studiolicht */
.hx{background:var(--brush),
  radial-gradient(40% 55% at 72% 46%,#fff,transparent 70%),
  radial-gradient(55% 75% at 0% 0%,rgba(255,255,255,.8),transparent 60%),
  linear-gradient(165deg,#eceeef 0%,#e3e5e6 55%,#dcdee0 100%)}

/* Karten: fast weiss, feine Kante, tiefer weicher Schatten */
.service-card,.testi-card,.info-card,.section-alt .service-card,.section-alt .testi-card,.section-alt .info-card{background:linear-gradient(180deg,var(--c-raise-1),var(--c-raise-2));border-color:rgba(40,44,48,.08);box-shadow:0 1px 0 #fff inset,0 1px 2px rgba(60,66,72,.06),0 24px 48px -28px rgba(60,66,72,.35)}

/* Aufruf und Fuss: hell wie der Rest */
.footer-cta{background:var(--brush),radial-gradient(60% 120% at 50% 0%,rgba(255,255,255,.8),transparent 65%),#e5e7e8;border-top:1px solid rgba(40,44,48,.08);border-bottom:0}
.site-footer{background:var(--brush),#e0e2e3}
.footer-bottom{border-top-color:rgba(40,44,48,.1)}

/* ============================================================
   Schrift: Fraunces (Titel, Preise, Zahlen) + DM Sans (Text, Knöpfe, Labels)
   ============================================================ */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/fraunces.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/dmsans.woff2') format('woff2')}
:root{--font-display:'Fraunces',Georgia,'Times New Roman',serif;--font-sans:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
body,p,.btn,.main-nav-desktop a,.eyebrow,.hx-meta span,.hx-meta a,.footer-col a,.footer-col h4,.breadcrumb,.sig-list .tag,.testi-card p,.mobile-panel-info,.brand-tag,.footer-brand span{font-family:var(--font-sans)}
h1,h2,h3,h4,.hx h1,.page-hero h1,.section-head h2,.split-grid h2,.footer-cta h2,
.service-card h3,.service-row h3,.info-card h3,.editorial-item h4,.process-item h4,.legal-body h2,
.service-card .price-line,.service-row .service-price,.price-mini-item b,.stat-col b,.hx-meta b,.process-item .num,.editorial-num,
.mobile-panel-links a,.map-embed .map-load-btn,.hours-note .hours-now,.hero-count{font-family:var(--font-display)}
.footer-col h4{font-family:var(--font-sans)}
h1,h2,.hx h1,.page-hero h1,.section-head h2,.split-grid h2,.footer-cta h2{font-weight:500;letter-spacing:-.02em}
.hx h1{line-height:1.02}
h3,h4,.service-card h3,.service-row h3,.info-card h3,.editorial-item h4,.process-item h4{font-weight:500;letter-spacing:-.01em}
.service-card .price-line,.service-row .service-price,.price-mini-item b,.hx-meta b{font-weight:500;letter-spacing:-.01em}
.service-card .price-line small{font-family:var(--font-display)}
body{font-weight:400;letter-spacing:-.003em}
.btn{font-weight:500;letter-spacing:0}
.main-nav-desktop a{font-weight:500}

/* ============================================================
   Hintergrund eine Stufe dunkler (Nutzer: Perlgrau zu hell)
   ============================================================ */
:root{--c-base:#d8dadc;--c-alt:#d0d3d5;--c-frame:#c8cbce;--c-raise-1:#eceeef;--c-raise-2:#e4e6e8}
html{background:var(--c-frame)}
body{background:var(--c-base)}
.section{background:var(--brush),radial-gradient(70% 55% at 85% 0%,rgba(255,255,255,.45),transparent 65%),var(--c-base)}
.section-alt{background:var(--brush),radial-gradient(70% 60% at 10% 0%,rgba(255,255,255,.4),transparent 65%),linear-gradient(180deg,#d3d6d8,#cdd0d2)}
.section::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.7) 50%,transparent)}
.site-header::before,.site-header.is-scrolled::before{background:rgba(214,216,219,.88)}
.hx{background:var(--brush),
  radial-gradient(40% 55% at 72% 46%,rgba(255,255,255,.55),transparent 70%),
  radial-gradient(55% 75% at 0% 0%,rgba(255,255,255,.35),transparent 60%),
  linear-gradient(165deg,#d9dbdd 0%,#d0d3d5 55%,#c9ccce 100%)}
.page-hero{background:var(--c-frame)}
.page-hero .hero-scrim{background:radial-gradient(80% 90% at 0% 0%,rgba(255,255,255,.35),transparent 60%),linear-gradient(180deg,rgba(214,216,219,.72) 0%,rgba(214,216,219,.93) 100%)}
.footer-cta{background:var(--brush),radial-gradient(60% 120% at 50% 0%,rgba(255,255,255,.45),transparent 65%),#d0d3d5}
.site-footer{background:var(--brush),#c8cbce}
.mobile-panel{background:var(--c-base)}
.sig-list .tag{background:rgba(255,255,255,.35)}
.hx-tiktok{background:rgba(255,255,255,.35)}
.to-top{background:var(--c-raise-1)}


/* Unterseiten-Kopf niedriger */
.page-hero{padding:76px 0 64px}
@media(max-width:700px){.page-hero{padding:48px 0 44px}}

/* Handy: kein eingeblendeter Play-Knopf auf den Clips */
.hx-reel video::-webkit-media-controls,.hx-reel video::-webkit-media-controls-start-playback-button,.hx-reel video::-webkit-media-controls-overlay-play-button{display:none!important;-webkit-appearance:none;opacity:0}
.hx-reel .hx-reel-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.8) contrast(1.03)}

/* ============================================================
   Schrift Titel: Bebas Neue (ersetzt Fraunces), Text bleibt DM Sans
   ============================================================ */
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/bebas-neue.woff2') format('woff2')}
:root{--font-display:'Bebas Neue','Arial Narrow',Impact,sans-serif}
h1,h2,h3,h4,.hx h1,.page-hero h1,.section-head h2,.split-grid h2,.footer-cta h2,
.service-card h3,.service-row h3,.info-card h3,.editorial-item h4,.process-item h4,.legal-body h2,
.service-card .price-line,.service-row .service-price,.price-mini-item b,.stat-col b,.hx-meta b,.process-item .num,.editorial-num,
.mobile-panel-links a,.map-embed .map-load-btn,.hours-note .hours-now,.hero-count,.service-card .price-line small{font-weight:400;font-style:normal;letter-spacing:.02em}
h1,.hx h1,.page-hero h1{line-height:.95}
h2,.section-head h2,.split-grid h2,.footer-cta h2{line-height:1}
h3,h4{line-height:1.05}
.hx h1,.page-hero h1{font-size:calc(var(--fs-h1) * 1.15)}
.section-head h2,.split-grid h2,.footer-cta h2{font-size:calc(var(--fs-h2) * 1.12)}
.service-card h3,.service-row h3,.info-card h3,.editorial-item h4,.process-item h4{font-size:1.45em}

/* ============================================================
   Ruhe-Pass: Nummern statt Labels, Haarlinien statt Schatten,
   mehr Weissraum, langsame Einblendungen, Handy-Kontaktleiste
   ============================================================ */
.eyebrow-num{font-family:var(--font-display);font-size:1.05rem;letter-spacing:.08em;color:var(--t-3);display:inline-flex;align-items:center;gap:14px}
.eyebrow-num::after{content:"";width:40px;height:1px;background:var(--hair-strong)}
.eyebrow-line{margin-bottom:28px}.eyebrow-line::before,.eyebrow-line::after{display:none}

.hx h1{font-size:clamp(3.6rem,7.4vw,7.2rem);line-height:.9;letter-spacing:.01em}
.hx-wa{align-self:center;color:var(--t-2);font-size:.95rem;border-bottom:1px solid var(--hair-strong);padding-bottom:2px;transition:color .2s ease,border-color .2s ease}
.hx-wa:hover{color:var(--t-1);border-color:var(--t-1)}

.btn,.btn-gold,.btn-whatsapp,.btn-line,.btn-ghost,.hx-reel,.hx-tiktok,.split-media picture,.split-media.framed picture,
.service-card,.info-card,.testi-card,.editorial-item,.process-item,.mosaic a,.gallery-grid a,.gallery-grid figure,.map-embed,.to-top,
.site-header .btn-gold,.hero-full .btn-gold,.page-hero .btn-gold,.site-footer .btn-gold,.mobile-panel .btn-gold{box-shadow:none!important}
.btn-gold:hover,.site-header .btn-gold:hover,.hero-full .btn-gold:hover,.page-hero .btn-gold:hover,.site-footer .btn-gold:hover,.mobile-panel .btn-gold:hover{transform:none;box-shadow:none}
.hx-reel,.split-media picture,.mosaic a,.map-embed{border:1px solid var(--hair-strong)}

:root{--section:calc(var(--sp-8) * 1.25);--section-tight:150px}
@media(max-width:700px){:root{--section:calc(var(--sp-7) * 1.2);--section-tight:96px}}

.reveal{transform:translateY(14px);transition:opacity 1.3s cubic-bezier(.22,.61,.36,1),transform 1.3s cubic-bezier(.22,.61,.36,1)}
@media(prefers-reduced-motion:reduce){.reveal{transform:none;transition:opacity .4s linear}}

.hx .hero-slide img,.hero-full img,.page-hero .hero-bg img,.split-media img,.mosaic img,.gallery-grid img,.hx-reel video,.hx-reel .hx-reel-img{filter:saturate(.82) contrast(1.03) sepia(.08)}

.m-bar{display:none}
@media(max-width:700px){
  .m-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:1fr 1fr;
    background:rgba(236,238,239,.94);border-top:1px solid var(--hair-strong);padding-bottom:env(safe-area-inset-bottom)}
  .m-bar a{display:flex;align-items:center;justify-content:center;gap:9px;height:54px;color:var(--t-1);font-size:.95rem;font-weight:500}
  .m-bar a + a{border-left:1px solid var(--hair)}
  .m-bar svg{width:18px;height:18px;flex:none}
  .m-bar-wa svg{fill:#2f8f5b}
  body{padding-bottom:calc(54px + env(safe-area-inset-bottom))}
  .to-top{bottom:calc(70px + env(safe-area-inset-bottom))}
}
.site-header,.site-header.scrolled,.site-header.is-scrolled{box-shadow:none!important}
@media(max-width:700px){.hx-wa{display:none}}

/* Hero: WhatsApp als grüner Knopf neben "anrufen" (2026-10-29) */
.hx-actions .hx-wa-btn{color:#fff}
.hx-actions .hx-wa-btn svg{width:18px;height:18px;fill:#fff}
@media(max-width:900px){
  .hx-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .hx-actions .hx-wa-btn{width:auto;padding:16px 18px}
  .hx-actions .hx-wa-btn span{display:inline}
}
@media(max-width:380px){.hx-actions{grid-template-columns:1fr}}

/* Galerie: Work (Instagram-Bilder + Clips), 2026-10-29 */
.work-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.work-item{margin:0;position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:var(--radius-md);background:var(--c-raise-2,#e4e6e8);outline:1px solid rgba(40,44,48,.1);outline-offset:-1px}
.work-item a,.work-item picture{display:block;width:100%;height:100%;cursor:zoom-in}
.work-item img,.work-item video{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.82) contrast(1.03) sepia(.08);transition:transform 1.2s var(--ease),filter .6s ease}
@media(hover:hover){.work-item:hover img,.work-item:hover video{transform:scale(1.04);filter:saturate(.95) contrast(1.03)}}
.work-video video::-webkit-media-controls,.work-video video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
.work-ig{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;color:var(--t-1);text-decoration:none;padding:24px;background:var(--c-raise-1,#eceeef);transition:background .3s ease}
.work-ig svg{width:36px;height:36px;margin-bottom:6px}
.work-ig b{font-family:var(--font-display);font-weight:400;font-size:var(--fs-h3);letter-spacing:.02em}
.work-ig span{font-size:var(--fs-small);color:var(--t-2);border-bottom:1px solid currentColor;padding-bottom:2px}
.work-ig:hover{background:var(--c-raise-2,#e4e6e8)}
@media(max-width:900px){.work-grid{grid-template-columns:repeat(2,1fr);gap:10px}}
@media(max-width:480px){.work-ig{padding:14px;gap:6px}.work-ig b{font-size:1.15rem}.work-ig span{white-space:nowrap;font-size:.8rem}.work-ig svg{width:28px;height:28px}}

/* ============================================================
   GRAPHITGRAU (Nutzerwahl Option 7, 2026-10-29): dunkles kühles Grau,
   helle Schrift, helle Knöpfe. Überschreibt alle hellen Stufen davor.
   ============================================================ */
:root,.site-header,.hero-full,.page-hero,.site-footer,.mobile-panel,.hx{
  --c-frame:#4b5056;--c-frame-2:#4f545a;--c-alt:#51565c;--c-base:#565b61;
  --c-raise-1:#646a70;--c-raise-2:#5e6369;
  --t-1:#ffffff;--t-2:#e3e6e9;--t-3:#c5cacf;
  --ink:var(--c-base);--panel:var(--c-alt);--panel-2:var(--c-raise-2);--panel-3:var(--c-raise-1);
  --cream:var(--t-1);--muted:var(--t-2);--muted-2:var(--t-3);
  --gold:#e3e6e9;--gold-light:#ffffff;--gold-deep:#c5cacf;
  --line:rgba(235,240,245,.14);--line-soft:rgba(235,240,245,.08);--line-strong:rgba(235,240,245,.3);
  --hair:rgba(235,240,245,.14);--hair-strong:rgba(235,240,245,.28);
  --glow:rgba(225,232,240,.07);
  --g50:#ffffff;--g100:#f2f3f4;--g200:#e3e6e9;
  --vignette:radial-gradient(120% 90% at 50% 40%,transparent 60%,rgba(30,34,38,.18) 100%);
}
html{background:var(--c-frame)}
body{background:var(--c-base);color:var(--t-2)}
::selection{background:#f2f3f4;color:#2e3135}
.brand-logo,.mobile-panel-brand img,.footer-brand img{filter:none}

.site-header::before,.site-header.is-scrolled::before{background:rgba(75,80,86,.9);border-bottom:1px solid var(--hair)}
.header-call{background:#f2f3f4!important;color:#2e3135!important}

.btn-gold,.site-header .btn-gold,.hero-full .btn-gold,.page-hero .btn-gold,.site-footer .btn-gold,.mobile-panel .btn-gold{background:linear-gradient(180deg,#ffffff 0%,#e6e8ea 100%);color:#2e3135;border-color:#e6e8ea}
.btn-gold:hover,.site-header .btn-gold:hover,.hero-full .btn-gold:hover,.page-hero .btn-gold:hover,.site-footer .btn-gold:hover,.mobile-panel .btn-gold:hover{background:#ffffff;border-color:#ffffff;color:#24282c}
.btn-line,.btn-ghost{background:linear-gradient(rgba(255,255,255,.1),rgba(255,255,255,.1)) no-repeat 0 100%/100% 0}
.btn-line:hover,.btn-ghost:hover{border-color:rgba(255,255,255,.55)}

.hx{background:var(--brush),
  radial-gradient(40% 55% at 72% 46%,rgba(225,232,240,.10),transparent 70%),
  radial-gradient(55% 75% at 0% 0%,rgba(225,232,240,.07),transparent 60%),
  linear-gradient(165deg,#5b6066 0%,#555a60 55%,#4f545a 100%)}
.hx-meta a{text-decoration-color:rgba(255,255,255,.3)}
.hx-reel{background:#4b5056;border-color:var(--hair-strong);box-shadow:0 40px 70px -32px rgba(20,22,26,.6)}
.hx-reel:not(.is-main)::after{background:rgba(86,91,97,.12)}
.hx-tiktok,.sig-list .tag{background:rgba(255,255,255,.07)}
.hx-tiktok:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.45)}

.section{background:var(--brush),var(--vignette),radial-gradient(70% 55% at 85% 0%,var(--glow),transparent 65%),var(--c-base)}
.section-alt{background:var(--brush),var(--vignette),radial-gradient(70% 60% at 10% 0%,var(--glow),transparent 65%),var(--c-alt)}
.section::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.16) 50%,transparent)}
.split-media img,.mosaic img,.gallery-grid img{outline-color:rgba(255,255,255,.08)}

.service-card,.testi-card,.info-card,.section-alt .service-card,.section-alt .testi-card,.section-alt .info-card{background:linear-gradient(180deg,var(--c-raise-1),var(--c-raise-2));border-color:var(--hair);box-shadow:none}
.service-card:hover{background:linear-gradient(180deg,#6a7076,var(--c-raise-1))}
.hours-note,.price-mini-item,.map-embed{background:var(--c-raise-2)}
.testi-dots button::before{background:rgba(255,255,255,.25)}

.page-hero{background:var(--c-frame)}
.page-hero .hero-bg img{opacity:.55}
.page-hero .hero-scrim{background:linear-gradient(180deg,rgba(75,80,86,.7) 0%,rgba(75,80,86,.9) 100%)}

.footer-cta{background:var(--brush),radial-gradient(60% 120% at 50% 0%,rgba(225,232,240,.08),transparent 65%),var(--c-frame-2);border-top:1px solid var(--hair);border-bottom:0}
.site-footer{background:var(--brush),var(--c-frame)}
.footer-bottom{border-top-color:var(--hair)}

.mobile-panel{background:var(--c-frame)}
.nav-scrim{background:rgba(30,34,38,.45)}
.to-top{background:var(--c-raise-1);color:var(--t-1);border-color:var(--hair-strong)}
.lightbox{background:rgba(40,44,48,.95)}
@media(max-width:700px){.m-bar{background:rgba(75,80,86,.95)}.m-bar-wa svg{fill:#4fbf82}}

.work-item{background:var(--c-raise-2);outline-color:rgba(255,255,255,.08)}
.work-ig{background:var(--c-raise-2)}
.work-ig:hover{background:var(--c-raise-1)}
/* Work: ohne doppelte Fotos, Instagram als Link darunter */
.work-more{display:flex;justify-content:center;margin-top:32px}
.work-more .work-ig{flex-direction:row;gap:14px;padding:14px 22px;background:rgba(255,255,255,.07);border:1px solid var(--hair-strong);border-radius:var(--radius-md);text-align:left}
.work-more .work-ig svg{width:26px;height:26px;margin:0}
.work-more .work-ig b{font-size:1.25rem}
.work-more .work-ig:hover{background:rgba(255,255,255,.14)}
@media(max-width:480px){.work-more .work-ig{padding:12px 16px}}

/* ============================================================
   NEBELGRAU + WEISS (Nutzerwunsch 2026-10-29): Grund #878c92,
   Schrift weiss (vorher Gold, 29.10. ersetzt). Überschreibt Graphitgrau davor.
   ============================================================ */
:root,.site-header,.hero-full,.page-hero,.site-footer,.mobile-panel,.hx{
  --c-frame:#7b8086;--c-frame-2:#80858b;--c-alt:#82878d;--c-base:#878c92;
  --c-raise-1:#92979d;--c-raise-2:#8c9197;
  --t-1:#ffffff;--t-2:#f4f5f6;--t-3:#e6e8ea;
  --ink:var(--c-base);--panel:var(--c-alt);--panel-2:var(--c-raise-2);--panel-3:var(--c-raise-1);
  --cream:var(--t-1);--muted:var(--t-2);--muted-2:var(--t-3);
  --gold:#f4f5f6;--gold-light:#ffffff;--gold-deep:#e6e8ea;
  --line:rgba(255,255,255,.2);--line-soft:rgba(255,255,255,.1);--line-strong:rgba(255,255,255,.38);
  --hair:rgba(255,255,255,.2);--hair-strong:rgba(255,255,255,.36);
  --glow:rgba(255,255,255,.08);
  --vignette:radial-gradient(120% 90% at 50% 40%,transparent 60%,rgba(60,62,66,.16) 100%);
}
html{background:var(--c-frame)}
body{background:var(--c-base);color:var(--t-2)}
/* leichter Schatten hält die weisse Schrift auf dem mittleren Grau lesbar */
h1,h2,h3,h4,p,li,a,span,b,small,.eyebrow,.hx-lead,.hero-lead{text-shadow:0 1px 2px rgba(40,42,46,.35)}
.btn,.btn *,.header-call,.header-call *,.m-bar a{text-shadow:none}
::selection{background:#ffffff;color:#2e3135}

.site-header::before,.site-header.is-scrolled::before{background:rgba(123,128,134,.92);border-bottom:1px solid var(--hair)}
.main-nav-desktop a{color:var(--t-2)}
.main-nav-desktop a:hover,.main-nav-desktop a.active{color:var(--t-1)}
.main-nav-desktop a::after{background:var(--t-1)}
.nav-toggle::before,.nav-toggle::after,.nav-toggle span{background:var(--t-1)}
.header-call{background:linear-gradient(180deg,#ffffff,#e9ebed)!important;color:#2e3135!important}

.btn-gold,.site-header .btn-gold,.hero-full .btn-gold,.page-hero .btn-gold,.site-footer .btn-gold,.mobile-panel .btn-gold{background:linear-gradient(180deg,#ffffff 0%,#e9ebed 100%);color:#2e3135;border-color:#e9ebed}
.btn-gold:hover,.site-header .btn-gold:hover,.hero-full .btn-gold:hover,.page-hero .btn-gold:hover,.site-footer .btn-gold:hover,.mobile-panel .btn-gold:hover{background:#ffffff;border-color:#ffffff;color:#24282c}
.btn-line,.btn-ghost{color:var(--t-1);border-color:var(--hair-strong);background:linear-gradient(rgba(255,255,255,.12),rgba(255,255,255,.12)) no-repeat 0 100%/100% 0}
.btn-line:hover,.btn-ghost:hover{color:var(--t-1);border-color:rgba(255,255,255,.7)}

.hx{background:var(--brush),
  radial-gradient(40% 55% at 72% 46%,rgba(255,255,255,.10),transparent 70%),
  radial-gradient(55% 75% at 0% 0%,rgba(255,255,255,.07),transparent 60%),
  linear-gradient(165deg,#8c9197 0%,#858a90 55%,#7e8389 100%)}
.hx-meta a{text-decoration-color:rgba(255,255,255,.4)}
.hx-reel{background:#7b8086;box-shadow:0 40px 70px -32px rgba(40,42,46,.55)}
.hx-reel:not(.is-main)::after{background:rgba(135,140,146,.12)}
.hx-tiktok,.sig-list .tag{background:rgba(255,255,255,.08);color:var(--t-2)}
.hx-tiktok:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.6)}

.section::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.25) 50%,transparent)}
.service-card:hover{background:linear-gradient(180deg,#989da3,var(--c-raise-1))}
.testi-dots button::before{background:rgba(255,255,255,.3)}
.testi-dots button.is-active::before{background:var(--t-1)}

.page-hero .hero-bg img{opacity:.45}
.page-hero .hero-scrim{background:linear-gradient(180deg,rgba(123,128,134,.72) 0%,rgba(123,128,134,.92) 100%)}
.footer-cta{background:var(--brush),radial-gradient(60% 120% at 50% 0%,rgba(255,255,255,.08),transparent 65%),var(--c-frame-2)}
.footer-col a,.footer-col h4,.footer-bottom,.footer-bottom a{color:var(--t-2)}
.footer-col a:hover{color:var(--t-1)}

.to-top{color:var(--t-1)}
.nav-scrim{background:rgba(40,42,46,.4)}
@media(max-width:700px){.m-bar{background:rgba(123,128,134,.96)}.m-bar a{color:var(--t-1)}}