/* style.css */
@charset "UTF-8";              /* Muss ganz oben stehen, ohne etwas davor */

:root{
  --bg:#0f1116; --fg:#eaeff7; --muted:#a9b4c6;
  --panel:#151a24; --panel2:#111621; --line:#202532;
  --gold:#ffd000; --gold2:#ffe46e; 
  --max:1180px; --r:14px;
  --s1:8px; --s2:12px; --s3:16px; --s4:24px; --s5:36px; --s6:56px; --s7:84px;
  --hdrH:78px; --hdrHsm:64px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,"Helvetica Neue",sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  padding-top:var(--hdrH);
}
a{color:var(--gold);text-decoration:none}
.container{max-width:var(--max);margin-inline:auto;padding-inline:clamp(14px,2vw,22px)}
.section{padding-block:var(--s6)}
.grid-2{display:grid;gap:var(--s4);grid-template-columns:1fr 1fr}
.grid-3{display:grid;gap:var(--s4);grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){.grid-2,.grid-3{grid-template-columns:1fr}}

/* Header */
header.site{
  position:fixed; inset:0 0 auto 0; z-index:1000;
  background:#0f1116; border-bottom:1px solid var(--line);
  transition:transform .2s ease, box-shadow .2s ease;
}
.navwrap{max-width:var(--max);margin:0 auto;padding:8px 16px;display:flex;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:12px;min-width:0;text-decoration:none}
.brand img{height:46px;width:auto}
.brand .txt{display:flex;flex-direction:column;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand .txt b{font-weight:900;color:#fff}
.brand .txt span{font-size:.86rem;color:var(--muted)}
.counter{margin-left:auto;display:flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:#111621;color:#cfe1ff;font-size:.86rem}
.counter i{font-style:normal;opacity:.9}

/* Hauptmenü: 4 wichtigste */
nav.main{display:none;gap:6px;margin-left:10px}
@media (min-width:980px){nav.main{display:flex}}
.nav-link{
  padding:10px 12px;border-radius:10px;color:#fff;font-weight:800;display:flex;align-items:center;gap:8px
}
.nav-link:hover{background:#1a2030}

/* Subbar */
.subbar{
  position:relative;
  background:#0b0f19;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.subwrap{
  max-width:var(--max);
  margin:0 auto;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:10px;
  padding:6px clamp(8px,1.6vw,14px);
  position:relative;
}

/* Edge-Fades links/rechts */
.fade-edge{
  position:absolute; top:0; bottom:0; width:56px; z-index:1; pointer-events:none;
  opacity:.0; transition:opacity .25s ease;
}
.fade-edge.left{ left:0; background:linear-gradient(90deg,#0b0f19 20%,transparent 100%); }
.fade-edge.right{ right:0; background:linear-gradient(270deg,#0b0f19 20%,transparent 100%); }
.fade-edge.show{ opacity:1; }

.scroller{ position:relative; overflow:hidden }
.hscroll{
  display:flex; gap:8px; align-items:center;
  overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity; scrollbar-width:none; padding:4px 2px;
}
.hscroll::-webkit-scrollbar{ display:none; }

.chip{
  position:relative;
  flex:0 0 auto; scroll-snap-align:center;
  padding:10px 14px;
  border-radius:999px;
  background:#121728;
  border:1px solid #272f42;
  color:#eaeff7; font-weight:900; white-space:nowrap;
  transition:transform .16s ease,border-color .2s ease,background .2s ease;
}
.chip:hover{ border-color:var(--gold); transform:translateY(-1px); }
.chip[aria-current="true"]{ background:#151f34; border-color:var(--gold); }

/* Pfeile */
.arrow{
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; border:1px solid #2a3244;
  background:#0f1116; color:#fff; cursor:pointer; user-select:none;
  transition:transform .16s ease,opacity .2s ease;
  z-index:2;
}
.arrow:active{ transform:scale(.96); }
.arrow[disabled]{ opacity:.35; cursor:default }

/* Active Ink (Unterstreichungs-Animator) */
.active-ink{
  position:absolute; bottom:0; height:2px; background:linear-gradient(90deg,var(--gold),var(--gold2));
  border-radius:2px;
  left:24px; width:60px;
  transform:translateY(1px);
  transition:left .25s ease,width .25s ease,opacity .25s ease;
  pointer-events:none;
}

/* leichte Tilt-Animation bei Auto-Nudge (optisch) */
@keyframes nudge {
  0% { transform:translateX(0)}
  50%{ transform:translateX(-6px)}
  100%{ transform:translateX(0)}
}
/* Burger */
.burger{margin-left:10px;display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--line);border-radius:10px;background:#121728;cursor:pointer}
.burger span{width:20px;height:2px;display:block;margin:3px 0}
@media (min-width:980px){.burger{display:none}}

/* Drawer (mobil) */
.menu-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);opacity:0;visibility:hidden;transition:opacity .25s ease;z-index:1400}
.menu-overlay.active{opacity:1;visibility:visible}
.drawer{
  position:fixed;top:0;right:-100%;width:min(86vw,380px);height:100dvh;z-index:1500;background:#0f1116;border-left:1px solid var(--line);box-shadow:0 0 32px rgba(0,0,0,.6);transition:right .28s ease;display:flex;flex-direction:column;padding-top:6px;overscroll-behavior:contain
}
.drawer.open{right:0}
.drawer nav{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;padding-bottom:calc(16px + env(safe-area-inset-bottom,0))}
.drawer a,.drawer button.acchead{padding:16px 18px;color:#fff;font-weight:900;font-size:1.06rem;border-bottom:1px solid #1a2030;text-align:left;background:transparent;border-radius:0;cursor:pointer;display:block}
.drawer a:hover,.drawer button.acchead:hover{background:#151b2a}
.drawer .call{margin:14px 18px;border:2px solid var(--gold);border-radius:12px;text-align:center;padding:12px 0;color:var(--gold)}
.drawer .back{margin:8px 18px 22px;padding:12px;border-radius:10px;border:2px solid #2a3244;background:transparent;color:#fff;font-weight:900}
/* Accordion robust */
.acc{max-height:0;overflow:hidden;background:#0d121f;transition:max-height .28s ease;will-change:max-height}
.acc a{border:0;padding:14px 22px;font-weight:700;font-size:1rem}
.acchead{display:flex;align-items:center;justify-content:space-between}
.acchead .chev{transition:transform .25s ease}
.acchead[aria-expanded="true"] .chev{transform:rotate(180deg)}
/* Accordion-Header im Hamburger-Menü – ohne Rahmen, flach & clean */
.acchead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: none !important;           /* 👈 Rahmen vollständig weg */
  outline: none !important;          /* 👈 Fokusrahmen entfernen */
  padding: 16px 22px;
  font-weight: 900;
  font-size: 1.06rem;
  cursor: pointer;
  text-align: left;
}

.acchead:hover {
  background: rgba(255, 255, 255, 0.05); /* leichte Hover-Fläche (optional) */
}

.acchead .chev {
  transition: transform 0.25s ease;
}

.acchead[aria-expanded="true"] .chev {
  transform: rotate(180deg);
}

/* Optional: den .acc-Container ebenfalls ohne Rand halten */
.acc {
  border: none !important;
}

/* Hero */
.hero{display:grid;place-items:center;text-align:center;padding-block:calc(var(--s7) + 8px) var(--s6);background:linear-gradient(180deg,#0f1116 0%,#12172a 100%)}
.hero h1{margin:0 0 var(--s3);font-weight:900;font-size:clamp(30px,3.6vw,46px)}
.hero p{max-width:860px;margin-inline:auto;color:#cbd4e6;font-size:1.08rem;margin-bottom:var(--s4)}
.btn{display:inline-block;background:linear-gradient(180deg,var(--gold),var(--gold2));color:#111;padding:14px 22px;border-radius:12px;font-weight:900;border:0;cursor:pointer}

/* Cards */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:var(--s4)}
.card h3{margin:0 0 var(--s2);font-size:clamp(18px,2.2vw,22px)}
.lead{color:var(--muted)}
.list{margin:0;padding-left:20px}
.list li{margin:.45rem 0}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 18px rgba(0,0,0,.35);
  transition: all .25s ease;
}

/* Footer */
footer{background:#0b0f19;border-top:1px solid var(--line)}
.foot{max-width:var(--max);margin:0 auto;padding:var(--s5) clamp(14px,2vw,22px);color:#9aa4b8;text-align:center}

/* Animations */
.fade-in{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .6s ease}
.fade-in.visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* easyPreis Modal */
.calc-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;z-index:2000}
.calc-modal{position:fixed;inset:0;display:none;flex-direction:column;z-index:2001}
.calc-head{height:56px;background:#0f1116;color:#fff;display:flex;align-items:center;gap:10px;justify-content:space-between;padding:0 14px;border-bottom:1px solid var(--line)}
.calc-head h2{margin:0;font-size:1rem;color:var(--gold)}
.calc-body{position:absolute;top:56px;bottom:0;left:0;right:0;background:#0b0f19}
.calc-body iframe{width:100%;height:100%;border:0;display:block}

/* Doc Modal */
.doc-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;z-index:2100}
.doc-modal{position:fixed;inset:0;display:none;flex-direction:column;z-index:2101}
.doc-head{height:56px;background:#0f1116;color:#fff;display:flex;align-items:center;gap:10px;justify-content:space-between;padding:0 14px;border-bottom:1px solid var(--line)}
.doc-head h2{margin:0;font-size:1rem;color:var(--gold)}
.doc-body{position:absolute;top:56px;bottom:0;left:0;right:0;overflow:auto;-webkit-overflow-scrolling:touch;background:#0b0f19;padding:16px}

/* Quickbar & Preis-Merker */
.quickbar{position:fixed;right:16px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;z-index:1600}
.quickbtn{position:relative;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#0f1116;border:2px solid var(--line);box-shadow:0 8px 22px rgba(0,0,0,.35);cursor:pointer}
.quickbtn:hover{border-color:var(--gold)}
.quickbtn .badge{position:absolute;top:-6px;right:-6px;background:var(--gold);color:#111;font-weight:900;font-size:12px;padding:3px 6px;border-radius:20px;display:none}
.icon{width:22px;height:22px;fill:#ffd000}
.icon-phone{fill:#eaeff7}
.q-panel{position:fixed;right:-360px;top:50%;transform:translateY(-50%);width:320px;max-width:86vw;background:#111621;border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 38px rgba(0,0,0,.45);z-index:1601;padding:16px;transition:right .25s ease}
.q-panel.open{right:84px}
.q-panel h4{margin:0 0 10px;color:var(--gold)}
.q-panel p{margin:6px 0;color:#cbd4e6}
.q-time{font-size:.85rem;color:#9aa4b8}
.q-panel .row{display:flex;gap:8px;margin-top:10px}
.q-panel .row button{flex:1;text-align:center;padding:10px 12px;border-radius:10px;font-weight:800;cursor:pointer}
.q-panel .row .primary{border:0;background:linear-gradient(180deg,var(--gold),var(--gold2));color:#111}
.q-panel .row .ghost{border:2px solid var(--gold);color:var(--gold);background:transparent}
/* Quickbar ausblenden, wenn das Hamburger-Menü offen ist */
.menu-open .quickbar,
.menu-open .q-panel {
  display: none !important;
}

/* 👁️ Runder Counter unter den Badges */
.quick-counter{
  min-width: 52px;
  padding:7px 10px;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:linear-gradient(180deg, rgba(16,19,30,.96), rgba(12,15,24,.96));
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  box-shadow: 0 8px 22px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
  color:#cfd4e2; font-weight:700; font-size:13px;
  backdrop-filter: blur(6px);
}
.quick-counter i{ font-style:normal; color:#ffd000; }

/* Mobile: Quickbar unten quer */
@media (max-width: 820px){
  .quickbar{
    left:50%; right:auto; bottom:14px; top:auto;
    transform: translateX(-50%);
    flex-direction:row; gap:10px;
    background:rgba(13,16,24,.75);
    border:1px solid rgba(255,255,255,.08);
    padding:8px 10px; border-radius:14px;
    box-shadow: 0 10px 24px rgba(0,0,0,.35);
    backdrop-filter: blur(10px);
  }
  .quick-counter{ padding:6px 10px; font-size:12px; }
  .quickbtn{ width:44px;height:44px; }
}
/* Order Modal */
.order-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;z-index:2200}
.order-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:2201}
.order-card{width:min(720px,94vw);background:#151a24;color:#eaeff7;border:1px solid #202532;border-radius:14px;box-shadow:0 14px 50px rgba(0,0,0,.5);padding:16px}
.order-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:10px;border-bottom:1px solid #202532}
.order-body{padding-top:12px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:760px){ .row{grid-template-columns:1fr} }
label{display:block;margin:8px 0 6px}
input,textarea,button{font:inherit}
input,textarea{width:100%;padding:10px;border-radius:10px;border:1px solid #2a3042;background:#0e1320;color:#fff}
.actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.btnp{padding:10px 14px;border-radius:10px;font-weight:900;cursor:pointer;border:0}
.btnp.primary{background:linear-gradient(180deg,var(--gold),var(--gold2));color:#111}
.btnp.ghost{border:2px solid var(--gold);color:var(--gold);background:transparent}
.msg{white-space:pre-wrap;margin-top:10px;padding:10px;border-radius:10px;background:#101522;border:1px solid #1f2536;display:none}
.msg.ok{border-color:#10B981}
.msg.err{border-color:#EF4444}

.body-lock{overflow:hidden;touch-action:none}
/* Sichtbarkeit: nur EINE Leiste auf groß, nur Burger auf klein */
.scrollmenu{ display:none; }         /* default aus */
.burger{ display:grid; }             /* default an */
@media (min-width:980px){
  .scrollmenu{ display:grid; }       /* auf groß an */
  .burger{ display:none; }           /* auf groß aus */
}

/* Active Ink */
.ink{
  position:absolute; bottom:0; height:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold2));
  border-radius:2px; left:24px; width:60px;
  transform:translateY(1px);
  transition:left .25s ease,width .25s ease,opacity .25s ease;
  pointer-events:none;
}

/* Kanten-Fades */
.fade{
  position:absolute; top:0; bottom:0; width:56px; z-index:1; pointer-events:none; opacity:0; transition:opacity .25s ease;
}
.fade.left{ left:0;  background:linear-gradient(90deg,#0f1116 20%,transparent 100%); }
.fade.right{ right:0; background:linear-gradient(270deg,#0f1116 20%,transparent 100%); }
.fade.show{ opacity:1; }

/* Drawer / Accordion: (wie bei dir, belassen – nur sicherheitshalber) */
.acc{max-height:0;overflow:hidden;background:#0d121f;transition:max-height .28s ease;will-change:max-height}
.acchead{display:flex;align-items:center;justify-content:space-between}
.acchead .chev{transition:transform .25s ease}
.acchead[aria-expanded="true"] .chev{transform:rotate(180deg)}
.drawer nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0));
  overflow-y: auto;
}
.drawer {
  position: fixed;
  top: 0;
  right: -100%;
  width: min(86vw, 380px);
  height: 100dvh;
  z-index: 1500;
  background: #0f1116;
  border-left: 1px solid var(--line);
  box-shadow: 0 0 32px rgba(0,0,0,.6);
  transition: right .28s ease;
  display: flex;
  flex-direction: column;
  padding-top: 6px;
  overscroll-behavior: contain;

  /* 👇 Scrollbar-Aktivierung */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.15) transparent;
}
.drawer.open {
  right: 0;
}

.drawer a,
.drawer button.acchead {
  padding: 16px 22px;
  color: #fff;
  font-weight: 900;
  font-size: 1.06rem;
  border-bottom: 1px solid #1a2030;
  text-align: left;
  background: transparent;
  border-radius: 0;
  cursor: pointer;
  display: block;
}

.drawer a:hover,
.drawer button.acchead:hover {
  background: #151b2a;
}
/* 📱 Handymenü Modal */
.handy-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .85);
  display: none;
  z-index: 3000;
}

.handy-modal {
  position: fixed;
  inset: 0;
  display: none;
  flex-direction: column;
  z-index: 3001;
  background: #0f1116;
}

.handy-head {
  height: 56px;
  background: #0f1116;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
}

.handy-head h2 {
  margin: 0;
  font-size: 1rem;
  color: var(--gold);
}

.handy-body {
  position: absolute;
  top: 56px;
  bottom: 0;
  left: 0;
  right: 0;
  background: #0b0f19;
}

.handy-body iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* =================== Anti-Overlap & progressive Skalierung =================== */

/* 1) Grid sauber auf eine Zeile ausrichten – kein Absolut-Layout */
.navwrap{
  display: grid;
  grid-template-columns: auto auto minmax(0,1fr) auto auto; /* brand | dtbox | mainnav | call | burger */
  grid-template-areas: "brand dtbox mainnav call burger";
  align-items: center;
  gap: 8px;
}

/* Zuweisung (HTML bleibt gleich) */
.brand{ grid-area: brand; min-width: 0; }
.dtbox{ 
  grid-area: dtbox; 
  position: static !important; 
  transform: none !important; 
  width: auto !important; 
  min-width: 115px;            /* nie kleiner als lesbar */
  white-space: nowrap; 
  line-height: 1; 
}
.mainnav{ grid-area: mainnav; min-width: 0; overflow: hidden; }
.mainnav .top-level{ flex-wrap: nowrap; overflow: hidden; gap: 6px; }
.callbtn{ grid-area: call; white-space: nowrap; }
.burger{ grid-area: burger; }

/* 2) Einheitliche, steuerbare Menügröße (inkl. Telefon) */
:root{ --menu-fs: clamp(12px, 1.25vw, 14px); }
.mainnav a,
.mainnav .more-btn,
.callbtn{
  font-size: var(--menu-fs);
  padding: 6px 10px;
  border-radius: 10px;
  line-height: 1.05;
  font-weight: 700;
  white-space: nowrap;
  background: var(--chip-bg, rgba(255,255,255,0.06));
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: saturate(140%) blur(6px);
}

/* 3) Brand & Subline skalieren (immer einzeilig) */
.brand .txt{ white-space: nowrap; }
.brand .txt b{
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1;
}
.brand .subline{
  font-size: clamp(9px, 1.05vw, 12px);  /* sehr klein erlaubt, aber sichtbar */
  line-height: 1.22;
  opacity:.9;
  padding-bottom: 2px;            /* kleine Sicherheitsreserve für Unterlängen */
}


/* 4) Uhr/Datum skalieren – niemals umbrechen */
#dtTime,#dtDate{
  font-size: clamp(10px, 1.3vw, 13px);
  letter-spacing: .06em;                 /* etwas enger bei klein */
}

/* 5) Breakpoints – schrittweise kleiner, aber EINZEILIG bleiben */
@media (max-width: 1200px){
  :root{ --menu-fs: clamp(11.5px, 1.2vw, 13px); }
  #dtTime,#dtDate{ font-size: clamp(9.5px, 1.2vw, 12px); }
  .brand .txt b{ font-size: clamp(15px, 1.5vw, 18px); }
  .brand .subline{ font-size: clamp(8.5px, 1vw, 11px); }
}

@media (max-width: 1040px){
  :root{ --menu-fs: clamp(11px, 1.1vw, 12.5px); }
  .mainnav .top-level{ gap: 4px; }
  .mainnav a, .mainnav .more-btn, .callbtn{ padding: 5px 8px; }
  #dtTime,#dtDate{ font-size: clamp(9px, 1.1vw, 11.5px); letter-spacing:.04em; }
  .brand .txt b{ font-size: clamp(14px, 1.4vw, 17px); }
  .brand .subline{ font-size: clamp(8px, .95vw, 10.5px); }
}

@media (max-width: 940px){
  :root{ --menu-fs: clamp(10.5px, 1vw, 12px); }
  #dtTime,#dtDate{ font-size: clamp(8.8px, 1vw, 11px); }
  .brand .txt b{ font-size: clamp(13.5px, 1.3vw, 16px); }
  .brand .subline{ font-size: clamp(7.8px, .9vw, 10px); }
}

/* 6) Mobil-Switch: Desktop-Menü ausblenden, Brand+dtbox+Telefon+Burger bleiben EINZEILIG */
@media (max-width: 860px){
  .mainnav{ display:none !important; }         /* Drawer übernimmt */
  .burger{ display:inline-flex !important; }
  /* alles andere bleibt – inklusive Uhr/Datum und Telefon */
}

/* 7) Sehr schmal – noch kleiner ziehen, aber weiterhin sichtbar */
@media (max-width: 430px){
  :root{ --menu-fs: 10.5px; }
  #dtTime,#dtDate{ font-size: 10px; letter-spacing:.02em; }
  .brand .txt b{ font-size: 13px; }
  .brand .subline{ font-size: 7.6px; }         /* minimal, aber vorhanden */
  .callbtn{ padding: 4px 6px; }                /* schmaler Chip */
  .navwrap{ gap: 6px; }
}

/* 8) Harte Grenze: Header-Höhe erzwingen, damit nichts „nach unten drückt“ */
:root{ --hdr: 56px; }              /* passt zu deinem Sticky-Header-Offset */
@media (min-width: 721px){ :root{ --hdr: 68px; } }
.site .navwrap{ min-height: var(--hdr); }
section[id], [id].scroll-target{ scroll-margin-top: var(--hdr); }

/* — Brand/Subline: Unterlängen (g, y, p) nicht mehr abschneiden — */
.brand .txt{
  overflow: visible;              /* statt hidden → nichts wird abgeschnitten */
  text-overflow: clip;            /* Ellipsis nicht für den ganzen Block */
}

.brand .txt b{
  /* Ellipsis nur auf der fetten Hauptzeile, falls Platz knapp */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand .subline{
  display: block;
  line-height: 1.22;              /* vorher 1 → zu eng */
  padding-bottom: 2px;            /* kleine Sicherheitsreserve für Unterlängen */
}

/* ===== Bewertungen: 3D/Neon & Slider ===== */
#bewertungen{ --neon:#fff7c2; --gap:12px; }
#bewertungen .rv-title{
  margin:0 0 clamp(14px,2vw,18px);
  font-size:clamp(20px,2.2vw,26px);
  text-align:center; color:#fff; font-weight:900; letter-spacing:.2px;
}

/* Viewport + Track (3/2/1 Spalten wie FAQ) */
#bewertungen .rv-viewport{ position:relative; overflow:hidden; width:100%; }
#bewertungen .rv-track{
  display:grid; grid-auto-flow:column; gap:var(--gap);
  --cols:3;
  grid-auto-columns:calc((100% - (var(--cols) - 1)*var(--gap)) / var(--cols));
  will-change:transform; transform:translateX(0);
  transition:transform 420ms cubic-bezier(.22,.61,.36,1);
}
/* Breakpoints */
@media (max-width:1023.98px){ #bewertungen .rv-track{ --cols:2; } }
@media (max-width:599.98px) { #bewertungen .rv-track{ --cols:1; } }

/* 3D Neon-Karte (angepasst an deinen FAQ-Look) */
#bewertungen .rv-card{
  position:relative; isolation:isolate;
  border-radius:16px; padding:16px;
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(255,255,255,.08) 0%, rgba(255,255,255,.03) 38%, transparent 60%),
    linear-gradient(180deg, rgba(24,30,44,.92), rgba(14,18,30,.92));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 8px 18px rgba(0,0,0,.36), 0 22px 42px rgba(0,0,0,.28);
}
#bewertungen .rv-card::before{
  content:""; position:absolute; inset:-1px; border-radius:16px; filter:blur(10px);
  background:conic-gradient(from 200deg, rgba(0,229,255,.35), rgba(124,58,237,.32), rgba(0,229,255,.35));
  opacity:.28; pointer-events:none; z-index:-1;
}
#bewertungen .rv-card::after{
  content:""; position:absolute; left:0; right:0; top:0; height:44px; border-radius:16px 16px 0 0;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));
  pointer-events:none;
}

/* Typo in der Karte */
#bewertungen .rv-card h3{
  margin:0 0 6px; font-weight:800; color:#fff; font-size:clamp(15px,2.1vw,18px);
}
#bewertungen .rv-card p{
  margin:8px 0 0; color:#dbe1ef; font-size:clamp(14px,1.9vw,16px); line-height:1.55;
}
#bewertungen .rv-meta{
  margin-top:10px; font-size:12px; color:#9fb0c9; opacity:.95;
}

/* Sterne (Neon-Gold) */
#bewertungen .rv-stars{ display:inline-flex; gap:2px; margin:2px 0 6px; }
#bewertungen .rv-stars svg{ width:14px; height:14px; fill:#ffd54a; filter:drop-shadow(0 0 4px rgba(255,208,0,.35)); }

/* Pfeile (wie FAQ) */
#bewertungen .rv-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:12px; border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.08); display:grid; place-items:center;
  font-size:24px; color:#fff; cursor:pointer; z-index:5;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
#bewertungen .rv-arrow.left{ left:8px; }
#bewertungen .rv-arrow.right{ right:8px; }
#bewertungen .rv-arrow:hover{
  transform:translateY(-50%) scale(1.06);
  border-color:rgba(255,255,white,.24);
  box-shadow:0 0 12px rgba(0,229,255,.35), 0 0 18px rgba(124,58,237,.28);
}

/* Für Monospace/Neon-Anmutung (optional – wenn du es wie Uhrzeit willst) */
#bewertungen .rv-card, #bewertungen .rv-card *{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans", sans-serif;
}
/* 📱 Quickbar kompakter auf Smartphones */
@media (max-width: 820px) {
  .quickbar {
    gap: 8px;
    padding: 6px 8px;
    border-radius: 12px;
  }

  .quickbtn {
    width: 42px;
    height: 42px;
  }

  .quickbtn .icon {
    width: 20px;
    height: 20px;
  }

  .quickbtn .badge {
    font-size: 11px;
    padding: 2px 5px;
    top: -5px;
    right: -5px;
  }
}

/* 📱 Extra kompakt bei sehr kleinen Geräten */
@media (max-width: 480px) {
  .quickbar {
    gap: 6px;
    padding: 5px 6px;
  }

  .quickbtn {
    width: 38px;
    height: 38px;
  }

  .quickbtn .icon {
    width: 18px;
    height: 18px;
  }

  .quickbtn .badge {
    font-size: 10px;
    padding: 2px 4px;
  }
}
/* ===============================
   QUICKBAR – Neon, farbige Icons,
   kompakt auf Handy
   =============================== */

:root{
  /* Basissize für Desktop */
  --qb-size: 56px;         /* Button-Außenmaß */
  --qb-icon: 24px;         /* Icon-Größe */
  --qb-gap:  10px;
  --qb-radius: 14px;

  /* Handy (wird unten überschrieben) */
  --qb-size-m: 44px;
  --qb-icon-m: 20px;
  --qb-gap-m:  8px;
  --qb-radius-m: 12px;
}

/* Layout der Leiste (belasse Position wie bei dir;
   falls du sie fix unten willst: position:fixed; bottom:16px; left:50%; transform:translateX(-50%);) */
.quickbar{
  display: flex;
  align-items: center;
  gap: var(--qb-gap);
  /* Optional zentriert unten:
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 2500;
  */
}

/* Grundstil aller Buttons/Kapseln */
.quickbtn{
  position: relative;
  width: var(--qb-size);
  height: var(--qb-size);
  border-radius: var(--qb-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  box-shadow:
    inset 0 0 8px rgba(255,255,255,.08),
    0 6px 18px rgba(0,0,0,.30);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
  overflow: hidden;
}

/* Icon-Größe */
.quickbtn .icon{
  width: var(--qb-icon);
  height: var(--qb-icon);
  display: block;
}

/* SVG-Pfade auf currentColor setzen (damit per color einfärbbar) */
.quickbtn .icon path,
.quickbtn .icon circle,
.quickbtn .icon rect,
.quickbtn .icon polygon{
  fill: currentColor;
}

/* Hover */
.quickbtn:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.07);
  box-shadow:
    inset 0 0 10px rgba(255,255,255,.10),
    0 10px 24px rgba(0,0,0,.38);
}

/* === Festpreis-Zähler (Badge) === */
#qb-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
  color: #111;
  background: #ffa500; /* 🔥 Orange für den Festpreis-Zähler */
  box-shadow: 0 0 10px rgba(255,165,0,.5), 0 0 20px rgba(255,140,0,.3);
  border: 1px solid rgba(255,165,0,.8);
}
/* Besucherzähler-Kapsel */
.quick-counter{
  font-family: ui-monospace, "Roboto Mono", monospace;
  color: #fff7c2;
}
.quick-counter #vcNum{
  font-weight: 900;
  letter-spacing: .06em;
  text-shadow:
    0 0 2px rgba(255,240,150,.8),
    0 0 8px rgba(255,220,70,.55),
    0 0 18px rgba(255,208,0,.40);
}

/* ---------- Farbliche Varianten ---------- */
/* € – Merker (grün) */
#qb-euro{
  color: #16a34a; /* grün */
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(255,255,255,.06) 0%, rgba(255,255,255,.03) 38%, transparent 60%),
    linear-gradient(180deg, rgba(16,185,129,.20), rgba(5,150,105,.12));
  border-color: rgba(16,185,129,.35);
  box-shadow:
    inset 0 0 12px rgba(16,185,129,.22),
    0 8px 20px rgba(16,185,129,.18);
}

/* Telefon (grün/teal) */
#qb-call{
  color: #10b981;
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(255,255,255,.06) 0%, rgba(255,255,255,.03) 38%, transparent 60%),
    linear-gradient(180deg, rgba(20,184,166,.20), rgba(13,148,136,.12));
  border-color: rgba(20,184,166,.35);
  box-shadow:
    inset 0 0 12px rgba(20,184,166,.22),
    0 8px 20px rgba(20,184,166,.18);
}

/* Facebook (blau) */
#qb-fb{
  color: #1877F2;
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(255,255,255,.06) 0%, rgba(255,255,255,.03) 38%, transparent 60%),
    linear-gradient(180deg, rgba(24,119,242,.20), rgba(24,119,242,.12));
  border-color: rgba(24,119,242,.35);
  box-shadow:
    inset 0 0 12px rgba(24,119,242,.22),
    0 8px 20px rgba(24,119,242,.18);
}

/* Instagram (Verlaufsbutton, Icon weiß) */
#qb-ig{
  color: #fff; /* Icon weiß auf Gradient */
  background:
    linear-gradient(45deg, #f58529, #dd2a7b 50%, #8134af 75%, #515bd4);
  border-color: rgba(255,255,255,.28);
  box-shadow:
    inset 0 0 12px rgba(255,255,255,.10),
    0 8px 22px rgba(221,42,123,.32);
}

/* ---------- Responsive: Handy kompakter ---------- */
@media (max-width: 720px){
  :root{
    --qb-size: var(--qb-size-m);
    --qb-icon: var(--qb-icon-m);
    --qb-gap:  var(--qb-gap-m);
    --qb-radius: var(--qb-radius-m);
  }

  .quickbar{
    gap: var(--qb-gap);
  }

  .quickbtn{
    width: var(--qb-size);
    height: var(--qb-size);
    border-radius: var(--qb-radius);
  }

  .quickbtn .badge{
    top: -5px;
    right: -5px;
    min-width: 16px;
    height: 16px;
    font-size: 10px;
    line-height: 16px;
  }

  /* Zähler dezenter auf Handy */
  .quick-counter #vcNum{
    font-size: 12px;
  }
}

.q-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 92%;
  max-width: 360px;
  padding: 20px;
  font-size: 18px;
  background: #1b1f2a;
  border-radius: 14px;
  box-shadow: 0 0 28px rgba(0,0,0,0.5);
  display: none; /* ⬅️ Standard: ausgeblendet */
  z-index: 9999;
}

.q-panel.active {
  display: block; /* ⬅️ Nur wenn JS .active setzt */
}

/* 🔶 Rechteckiger Festpreis-Badge mit Orange/Rot */
#qb-badge {
  background: #ff7a00 !important;      /* kräftiges Orange */
  color: #cc0000 !important;           /* kräftiges Rot für Text */
  border: 2px solid #ff9b3d;           /* leicht hellerer Rand */
  border-radius: 6px !important;       /* leicht abgerundet statt rund */
  padding: 4px 10px !important;        /* rechteckige Form */
  font-weight: 800;
  font-size: 0.85rem;
  box-shadow: 0 0 8px rgba(255, 122, 0, 0.5);
  position: relative;
  top: -4px;
  right: -4px;
}

/* Optional: Button-Hintergrund beim Hover */
#qb-euro:hover #qb-badge {
  background: #ff8c1a;
  color: #b30000;
}

.visually-hidden {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Badge Zähler */
.quickbtn .badge{
  position:absolute; top:-6px; right:-6px; background:var(--gold); color:#111;
  font-weight:900; font-size:12px; padding:3px 6px; border-radius:20px;
}

/* Preis-Panel */
.q-panel {
  position: fixed;
  bottom: 20px; /* Schwebend rechts unten */
  right: 20px;
  width: min(90vw, 360px); /* Kompakte Breite */
  background: #121520;
  border: 1px solid #2a3349;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  padding: 12px;
  z-index: 1000;
  font-size: 13px;
  color: #d0d4dc;
}

.q-panel h4 {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 500;
  color: #e0e0e0;
}

.qlist {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.qlist .price-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: #181b28;
  border-radius: 8px;
  border: 1px solid #2a3349;
  transition: background 0.2s;
}

.qlist .price-row:hover {
  background: #202330;
}

.qlist .price-row input[type="checkbox"] {
  margin: 0;
  width: 16px;
  height: 16px;
  accent-color: #5a9cf4;
  cursor: pointer;
}

.qlist .price-row label {
  flex: 1;
  font-size: 12px;
  color: #d0d4dc;
}

.q-panel .row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.q-panel .primary,
.q-panel .ghost {
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}

.q-panel .primary {
  background: #5a9cf4;
  color: #fff;
  border: none;
}

.q-panel .primary:hover {
  background: #4a8ce4;
  transform: translateY(-1px);
}

.q-panel .ghost {
  background: transparent;
  border: 1px solid #2a3349;
  color: #d0d4dc;
}

.q-panel .ghost:hover {
  background: #2a3349;
  transform: translateY(-1px);
}

/* Order Modal */
.order-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  z-index: 2000;
}

.order-overlay.show {
  display: block;
}

.order-modal {
  position: fixed;
  bottom: 20px; /* Schwebend rechts unten */
  right: 20px;
  width: min(90vw, 640px);
  display: none;
  z-index: 2001;
}

.order-modal.show {
  display: block; /* Kein Flex, da nicht zentriert */
}

.order-card {
  max-height: 80vh;
  overflow-y: auto;
  background: #121520;
  border: 1px solid #2a3349;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  font-size: 13px;
  color: #d0d4dc;
}

.order-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid #2a3349;
  background: #171a26;
  font-size: 15px;
  font-weight: 500;
}

.order-head .btnp.ghost {
  padding: 6px 12px;
  font-size: 12px;
  background: transparent;
  border: 1px solid #2a3349;
  color: #d0d4dc;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
}

.order-head .btnp.ghost:hover {
  background: #2a3349;
}

.order-body {
  padding: 12px;
}

.order-body .msg {
  margin-bottom: 12px;
  font-size: 12px;
  color: #a0a4b0;
}

/* Tabellarische Anordnung für Kontakt-Formular */
.order-body .row {
  display: flex; /* Horizontale Anordnung */
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.order-body .row div {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.order-body label {
  font-size: 12px;
  font-weight: 500;
  color: #e0e0e0;
  margin-bottom: 4px;
}

.order-body input {
  padding: 8px;
  font-size: 12px;
  background: #181b28;
  border: 1px solid #2a3349;
  border-radius: 8px;
  color: #d0d4dc;
  outline: none;
}

.order-body input:focus {
  border-color: #5a9cf4;
}

/* Tabellarische Anordnung für Fahrten */
#orderTrips {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

#orderTrips .price-row {
  display: flex; /* Horizontale Anordnung */
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #181b28;
  border-radius: 8px;
  border: 1px solid #2a3349;
  transition: background 0.2s;
}

#orderTrips .price-row:hover {
  background: #202330;
}

#orderTrips .price-row input[type="checkbox"] {
  margin: 0;
  width: 16px;
  height: 16px;
  accent-color: #5a9cf4;
  cursor: pointer;
}

#orderTrips .price-row label {
  flex: 1;
  font-size: 12px;
  color: #d0d4dc;
}

#orderTrips .price-row input[type="datetime-local"] {
  font-size: 12px;
  padding: 6px;
  background: #181b28;
  border: 1px solid #2a3349;
  border-radius: 8px;
  color: #d0d4dc;
  width: 160px; /* Feste Breite für Konsistenz */
}

.actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.actions .btnp {
  padding: 8px 14px;
  font-size: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}

.actions .btnp.primary {
  background: #5a9cf4;
  color: #fff;
  border: none;
}

.actions .btnp.primary:hover {
  background: #4a8ce4;
  transform: translateY(-1px);
}

.actions .btnp.ghost {
  background: transparent;
  border: 1px solid #2a3349;
  color: #d0d4dc;
}

.actions .btnp.ghost:hover {
  background: #2a3349;
  transform: translateY(-1px);
}

/* Responsive Anpassungen */
@media (max-width: 560px) {
  .q-panel {
    width: 92vw;
    font-size: 12px;
    bottom: 10px;
    right: 10px;
  }

  .q-panel h4 {
    font-size: 14px;
  }

  .qlist .price-row {
    padding: 6px;
  }

  .qlist .price-row input[type="checkbox"] {
    width: 14px;
    height: 14px;
  }

  .qlist .price-row label {
    font-size: 11px;
  }

  .q-panel .primary,
  .q-panel .ghost {
    padding: 5px 10px;
    font-size: 11px;
  }

  .order-modal {
    bottom: 10px;
    right: 10px;
    width: 92vw;
  }

  .order-card {
    font-size: 12px;
  }

  .order-head {
    font-size: 14px;
    padding: 8px 10px;
  }

  .order-body {
    padding: 10px;
  }

  .order-body .row {
    flex-direction: column; /* Vertikal auf Mobilgeräten */
    gap: 8px;
  }

  .order-body label {
    font-size: 11px;
  }

  .order-body input {
    font-size: 11px;
    padding: 6px;
  }

  #orderTrips .price-row {
    padding: 6px 8px;
    flex-wrap: wrap; /* Wrap bei langen Inhalten */
  }

  #orderTrips .price-row input[type="checkbox"] {
    width: 14px;
    height: 14px;
  }

  #orderTrips .price-row label {
    font-size: 11px;
  }

  #orderTrips .price-row input[type="datetime-local"] {
    font-size: 11px;
    padding: 5px;
    width: 100%; /* Volle Breite auf Mobilgeräten */
  }

  .actions .btnp {
    padding: 6px 12px;
    font-size: 11px;
  }
}
.btnp{ padding:9px 12px; border-radius:10px; font-weight:900; cursor:pointer; border:0 }
.btnp.primary{ background:linear-gradient(180deg,#ffd84d,#f6c700); color:#111 }
.btnp.ghost{ border:2px solid #ffd84d; color:#ffd84d; background:transparent }

.msg{ margin-top:10px; font-size:.95rem; color:#cbd4e6; }
.msg.ok{ color:#8cff9c; }
.msg.err{ color:#ff9a9a; }

/* Badge deutlicher */
.badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 6px;
  border-radius:999px; background:#ffd000; color:#111; font-weight:900; font-size:12px;
  border:2px solid #111; transform:translate(6px,-6px); box-shadow:0 2px 6px rgba(0,0,0,.45);
}
