/* Design-Ebene (Vorschau 21.10.2026): nur Farben, Schrift, Abstände, Flächen.
   Animationen und Buttons (.hb, .btn, Pole) bleiben unverändert. */

/* 1. Palette: warmes Schwarz statt kaltem Grau, ein Akzent (Gold) */
:root{
  --bg:#0b0a08; --bg2:#12100d; --bg3:#1a1713; --card:#14120f;
  --line:rgba(229,182,74,.10); --line2:rgba(229,182,74,.20);
  --text:#f4efe6; --mute:#b3aa9b; --dim:#948b7d;
  --mono:"Manrope","Segoe UI",system-ui,sans-serif;
}
html,body{background:var(--bg)}

/* 2. Typografie: eine Textschrift (Manrope), eine Display-Schrift (Bebas).
      Keine Konsolen-Schrift mehr bei Labels. */
body{font-size:17px;line-height:1.6;color:var(--text)}
.mono{font-family:var(--body);font-weight:700;font-size:.74rem;letter-spacing:.16em;color:var(--acc-text)}
.circle-badge text{font-family:var(--body);font-weight:700}
p{max-width:62ch}
h2,.h2{letter-spacing:.005em}
.lead,.hero p{color:var(--mute);font-size:clamp(1.05rem,.95rem + .4vw,1.25rem);line-height:1.55}

/* 3. Flächen: Karten einheitlich, warme feine Kante, gleicher Radius */
.svc,.loc,.card,.review,.rv,.hours,.contact-card,.rating{border-radius:18px;border-color:var(--line)}
.svc,.card,.review,.rv{background:var(--card)}
.svc p,.loc p{color:var(--mute)}


/* 5. Sterne/Zahlen im Gold, Rest zurückhaltend */
.stars{color:var(--acc)}

/* 6. Fokus sichtbar (Barrierefreiheit, ändert keine Button-Optik im Ruhezustand) */
a:focus-visible,button:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

/* 7. Handy: mehr Luft, größerer Fließtext */
@media(max-width:640px){
  body{font-size:16.5px}
  section{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
}

/* 8. Hadi-Figur statt Logo-Video/Logo (21.10.2026) */
.vhero{background:var(--bg)}
.vhero::after{height:18%}
.vhero-fig{position:absolute;z-index:1;left:50%;top:clamp(5.5rem,11svh,7.5rem);bottom:calc(clamp(2.5rem,8svh,5rem) + 9rem);height:auto;max-height:calc(100% - clamp(5.5rem,11svh,7.5rem) - clamp(2.5rem,8svh,5rem) - 9rem);width:auto;max-width:min(92vw,900px);transform:translateX(-50%);object-fit:contain;margin:auto 0}
@media(max-width:760px){
  .vhero{height:100svh}
  .vhero-ui{bottom:calc(4.5rem + env(safe-area-inset-bottom,0px))}
  .vhero-fig{top:5.5rem;bottom:calc(4.5rem + 11.5rem + env(safe-area-inset-bottom,0px));max-height:calc(100% - 5.5rem - 16rem - env(safe-area-inset-bottom,0px));max-width:92vw}
}
.mk-fig{-webkit-mask-image:none!important;mask-image:none!important;width:min(62svh,80vw)!important}
.mk-fig img{filter:drop-shadow(0 20px 40px rgba(0,0,0,.6))}
@media(max-width:760px){.mk-fig{width:min(56svh,84vw)!important}}
.brand-hadi{width:46px;height:46px;border-radius:50%;object-fit:cover;background:#272727;border:1px solid var(--line2)}

/* 9. Lesbarkeit (Detector-Funde 21.10.) */
.brand small{font-size:11px}

/* 10. Laden-Auswahl beim Anrufen */
.callpick{margin:auto;inset:0;position:fixed;height:fit-content;overflow:visible;border:0;padding:0;background:transparent;max-width:min(92vw,440px);width:100%;color:var(--text)}
.callpick::backdrop{background:rgba(5,4,3,.72);backdrop-filter:blur(3px)}
.callpick-in{background:#1b1814;border:1px solid rgba(229,182,74,.35);box-shadow:0 30px 80px -20px rgba(0,0,0,.8);border-radius:18px;padding:22px 18px 18px}
.callpick h2{font-family:var(--display);font-weight:400;font-size:2rem;line-height:1;margin:0 0 4px}
.callpick p{color:var(--mute);margin:0 0 16px;font-size:15px}
.callpick a{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:60px;padding:12px 16px;margin-top:10px;border-radius:14px;border:1px solid var(--line2);background:var(--bg2);color:var(--text);text-decoration:none}
.callpick a b{display:block;font-size:16px}.callpick a span{color:var(--mute);font-size:14px}
.callpick a i{font-style:normal;color:var(--acc-text);font-weight:700;white-space:nowrap}
.callpick a:active{transform:scale(.98)}
@media (hover:hover){.callpick a:hover{border-color:var(--acc)}}
.callpick .cp-close{display:block;width:100%;margin-top:14px;min-height:48px;background:none;border:0;color:var(--mute);font:600 15px var(--body);cursor:pointer}
.callpick[open] .callpick-in{animation:cpIn .22s cubic-bezier(.23,1,.32,1)}
@keyframes cpIn{from{opacity:0;transform:translateY(12px) scale(.98)}}
@media (prefers-reduced-motion:reduce){.callpick[open] .callpick-in{animation:none}}

/* 11. Feste Handy-Leiste wirklich ausblenden, solange Hero-Buttons sichtbar sind */
.mobile-bar.away{transform:translateY(150%)!important;opacity:0!important;pointer-events:none!important}