:root{
  --cb-primary:#16A0DC;
  --cb-black:#000;
  --cb-gray-100:#111;   /* dunkles Grundrauschen statt Hellgrau */
  --cb-gray-200:#191919;
  --cb-gray-300:#222;
  --cb-gray-700:#999;
  --cb-gray-900:#fff;    /* Schriftfarbe */
}

/* Dreamland – lokal eingebettet (liefer die Files in /assets/fonts/) */
@font-face{
  font-family:"Dreamland";
  src:url("/assets/fonts/Dreamland.woff2") format("woff2"),
	  url("/assets/fonts/Dreamland.woff") format("woff");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* titillium-web-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/fonts/titillium-web-v19-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* titillium-web-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 700;
  src: url('/assets/fonts/titillium-web-v19-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* titillium-web-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 900;
  src: url('/assets/fonts/titillium-web-v19-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

html,body{height:100%}
body{
  background:#000;               /* Haupt-Hintergrund */
  color:#f5f5f5;                 /* Primärtextfarbe */
  font-family:"Titillium Web",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji",sans-serif;
}

a {
	color: var(--cb-primary);
}
a:hover {
	color: var(--bs-btn-hover-bg);
}

.h1, h1,.display-1,.display-2,.display-3,.display-4,.hero .headline{
  font-family:"Dreamland","Titillium Web",sans-serif;
  letter-spacing:.2px;
  text-transform: uppercase;
}

.text-gradient{
  background:linear-gradient(60deg,var(--cb-primary),#0b6c94);
  -webkit-background-clip:text;background-clip:text;color:transparent
}

.btn-primary{
  --bs-btn-bg:var(--cb-primary);
  --bs-btn-border-color:var(--cb-primary);
  --bs-btn-hover-bg:#0e7aa6;
  --bs-btn-hover-border-color:#0e7aa6;
  color:#fff;
}

.btn-outline-light{
  color:#fff;
  border-color:#fff;
}
.filter-chip{
  border:1px solid rgba(255,255,255,.2);
  color:#ccc;
}
.filter-chip.active{
  background:var(--cb-primary);
  color:#fff;
  border-color:var(--cb-primary);
}
.badge-soft{
  background:rgba(22,160,220,.2);
  color:var(--cb-primary);
  border:1px solid rgba(22,160,220,.35);
}

.shadow-soft{box-shadow:0 10px 30px rgba(0,0,0,.6);}
.badge-soft{background:rgba(22,160,220,.12);color:#0b6c94;border:1px solid rgba(22,160,220,.25)}
.section{padding:72px 0}
.section-muted{
  background:linear-gradient(180deg,#0a0a0a 0%,#111 100%);
}

.bg-white{background:rgba(255,255,255,.05)!important;}

.hero{position:relative;min-height:88vh;display:grid;place-items:center;overflow:hidden;color:#fff}
.hero .overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.65))}
.hero video,.hero .bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .content{position:relative;z-index:2;max-width:1050px}
.brandmark{height:250px; padding-bottom: 25px}

.feature-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:14px;background:rgba(22,160,220,.12);color:var(--cb-primary)}
.feature-icon{background:rgba(22,160,220,.15);color:var(--cb-primary);}
.price-card{border:1px solid rgba(255,255,255,.08);}

.floating-wa{position:fixed;right:18px;bottom:18px;z-index:1040}
.floating-wa .btn{border-radius:999px;padding:.85rem 1.1rem}

.card-checklist li{margin:.35rem 0}
.filter-chip{border:1px solid var(--cb-gray-300);border-radius:999px;padding:.35rem .75rem;cursor:pointer;user-select:none}
.filter-chip.active{background:var(--cb-primary);color:#fff;border-color:var(--cb-primary)}
.qr-box{border:1px dashed var(--cb-gray-300);border-radius:16px;padding:1rem}

footer{background:#0a0d11;color:#b6c2d0}
footer a{color:#eaf6ff}

/* Dezent animierte Entrances */
[data-animate]{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
[data-animate].in{opacity:1;transform:none}

/* Utility */
.opacity-90{opacity:.9}
.rounded-4{border-radius:1rem}

.hero .overlay{
  background:linear-gradient(180deg,rgba(0,0,0,.65),rgba(0,0,0,1));
}
.hero .overlay::after{
  background:radial-gradient(ellipse at center, rgba(0,0,0,.6) 0%, rgba(0,0,0,.9) 100%);
}

footer{
  background:#000;
  color:#777;
}
footer a{color:#16A0DC;}
footer a:hover{color:#59c3ff;}

.btn-primary, .text-gradient {
  text-shadow:0 0 10px rgba(22,160,220,.5);
}

/* ===========================
   Accordion – Dark Style
   =========================== */
.accordion-dark .accordion-item {
  background: transparent;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: .75rem;
}
.accordion-dark .accordion-button,
.accordion-button-dark {
  background: rgba(255,255,255,.05);
  color: #c8c8c8;            /* nicht knallweiß */
  border: 0;
  box-shadow: none;
}
.accordion-dark .accordion-button.collapsed {
  background: rgba(255,255,255,.04);
  color: #b8b8b8;
}
.accordion-dark .accordion-button:not(.collapsed) {
  background: rgba(255,255,255,.09);
  color: #e7e7e7;
}
.accordion-dark .accordion-button::after {
  filter: invert(1) opacity(.7);
}
.accordion-dark .accordion-body {
  background: rgba(255,255,255,.03);
  color: #d5d5d5;
}

/* Karten/feature-icon – sicherstellen, dass Events und Vorteile identisch wirken */
.bg-white { background: rgba(255,255,255,.05) !important; }
.feature-icon{
  width:52px;height:52px;display:grid;place-items:center;
  border-radius:14px;background:rgba(22,160,220,.12);color:var(--cb-primary);
}

/* Cocktail-Suche dunkel */
.form-control-dark{
  background:#121212; color:#ddd; border-color:#2a2a2a;
}
.form-control-dark::placeholder{ color:#8f8f8f; }
.form-control-dark:focus{
  background:#171717; color:#fff; border-color:#16A0DC;
  box-shadow: 0 0 0 .25rem rgba(22,160,220,.15);
}

/* Liste der Cocktails – Fade-in bei Filterwechsel */
#cocktailList .card-fade[data-animate]{
  opacity:0; transform: translateY(14px);
  transition: opacity .45s ease, transform .45s ease;
}
#cocktailList .card-fade.in{ opacity:1; transform:none; }


/* ==== WOW: Hero-Headline (Neon-Glas + Shimmer) ==== */
.headline-hero{
  font-family:"Dreamland","Titillium Web",sans-serif;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height:1.05;
  letter-spacing:.5px;
  color:#f2f6ff;             /* Grundfarbe */
  position:relative;
  text-shadow:
	0 1px 0 rgba(255,255,255,.25),
	0 10px 20px rgba(0,0,0,.35),
	0 0 24px rgba(22,160,220,.3); /* weicher Neon-Glow */
  -webkit-text-stroke: 0.6px rgba(255,255,255,.2); /* Glas-Kante */
}

/* Underline als animierter „Lightbar“ */
.headline-hero::after{
  content:"";
  position:absolute; left:50%; transform:translateX(-50%) scaleX(0);
  bottom:-14px; width:min(520px, 80%); height:3px;
  border-radius:999px;
  background:linear-gradient(90deg, transparent, #16A0DC, #59c3ff, transparent);
  box-shadow:0 0 20px rgba(22,160,220,.6), 0 0 40px rgba(89,195,255,.25);
  transform-origin:center;
  transition:transform .9s cubic-bezier(.18,.8,.2,1);
}
[data-animate].in.headline-hero::after{ transform:translateX(-50%) scaleX(1); }

/* Highlight-Wort: animierte Verlaufsschrift + Shine-Sweep */
.headline-hero .hl{
  background:linear-gradient(60deg,#eaf6ff 0%, #b9e3ff 25%, #16A0DC 50%, #59c3ff 75%, #eaf6ff 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation: hl-sweep 4.5s ease-in-out infinite;
  text-shadow: 0 0 0 rgba(0,0,0,0); /* reines Fill, Glow kommt über H1 */
}
@keyframes hl-sweep{
  0%,100%{ background-position:0% 50%; }
  50%{    background-position:100% 50%; }
}

/* Optional: sanfter „Bloom“, wenn der Hero sichtbar wird */
[data-animate].in.headline-hero{
  filter: saturate(1.08) brightness(1.05);
}


/* ==== Staggered Word Reveal für H2 ==== */
.headline-section{ display:inline-block; position:relative; }
.headline-section .w{
  display:inline-block;
  transform:translateY(12px);
  opacity:0;
  transition:transform .5s ease, opacity .5s ease;
  transition-delay: calc(var(--i) * 60ms);
}
[data-animate].in.headline-section .w{
  transform:none; opacity:1;
}

/* ===== Infomappe Download – Premium Glass ===== */
.section-download{
  position: relative;
  background: radial-gradient(1200px 500px at 10% -10%, rgba(22,160,220,.14), transparent 60%),
			  radial-gradient(1000px 400px at 120% 120%, rgba(89,195,255,.12), transparent 55%);
}
.dl-hero{
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  box-shadow: 0 30px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(8px);
}
.dl-bg{ position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.6));
  pointer-events:none;
}
.dl-ribbon{ background: rgba(25,135,84,.15)!important; border:1px solid rgba(25,135,84,.35)!important; color:#bff3d5!important; }
.dl-bullets li{ margin:.35rem 0; }

.dl-btn{ position:relative; }
.pulse::after{
  content:""; position:absolute; inset:-6px; border-radius:14px;
  border:2px solid rgba(22,160,220,.35);
  filter: blur(2px);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{
  0%{ transform: scale(.98); opacity:.7; }
  70%{ transform: scale(1.05); opacity:0; }
  100%{ transform: scale(1.07); opacity:0; }
}

/* Dokument-Stack */
.doc-stack{ position:relative; width: 320px; height: 420px; margin-left:auto; }
.doc-sheet{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  box-shadow: 0 20px 40px rgba(0,0,0,.45);
}
.sheet-3{ transform: rotate(-6deg) translate(0, 10px); opacity:.6; }
.sheet-2{ transform: rotate(-3deg) translate(10px, 6px); opacity:.8; }
.sheet-1{ transform: rotate(-1deg) translate(18px, 2px); }
.doc-glow{
  position:absolute; inset:auto -40px -40px auto; width:160px; height:160px; border-radius:50%;
  background: radial-gradient(circle, rgba(22,160,220,.4), rgba(22,160,220,0) 70%);
  filter: blur(8px);
}

/* Entrances für die Sektion */
.section-download [data-animate]{ opacity:0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.section-download [data-animate].in{ opacity:1; transform:none; }

/* Button-Kontrast sicherstellen */
.section-download .btn-outline-light{ border-color: rgba(255,255,255,.5); color:#eaeaea; }
.section-download .btn-outline-light:hover{ background: rgba(255,255,255,.08); }

/* ===== Frosted Glass Footer mit blauen Glows ===== */
.cb-footer{
  position: relative;
  padding-top: 56px;
  padding-bottom: 56px;
  background: transparent;
}
.cb-footer [data-animate]{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
.cb-footer [data-animate].in{ opacity:1; transform:none; }

/* Glas-Panel */
.cb-footer .glass{
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
  position: relative;
  overflow: hidden;
}
.cb-footer .glass::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:2px;
  background: linear-gradient(90deg, transparent, rgba(22,160,220,.7), rgba(89,195,255,.7), transparent);
  filter: blur(.4px);
}

/* Links */
.cb-footer .footer-links a{
  color:#d8e8f3; text-decoration:none; border-bottom:1px dotted transparent;
  transition: color .2s ease, border-color .2s ease;
}
.cb-footer .footer-links a:hover{
  color:#ffffff; border-color: rgba(216,232,243,.4);
}

/* Hintergrund-Blobs */
.cb-footer-glow{
  position:absolute; inset:-80px 0 -40px 0; pointer-events:none; overflow:hidden;
}
.cb-footer-glow .blob{
  position:absolute; width:420px; height:420px; border-radius:50%;
  filter: blur(28px); opacity:.28;
  background: radial-gradient(circle at 30% 30%, #59c3ff 0%, rgba(89,195,255,0) 60%);
  animation: drift 18s ease-in-out infinite;
}
.cb-footer-glow .b1{ left:-120px; bottom:-60px; background: radial-gradient(circle, #16A0DC 0%, rgba(22,160,220,0) 60%); animation-delay: .0s; }
.cb-footer-glow .b2{ right:10%; bottom:-80px; background: radial-gradient(circle, #59c3ff 0%, rgba(89,195,255,0) 60%); animation-delay: .9s; }
.cb-footer-glow .b3{ left:55%; top:-120px; background: radial-gradient(circle, rgba(22,160,220,.85) 0%, rgba(22,160,220,0) 65%); animation-delay: 1.6s; }

@keyframes drift{
  0%   { transform: translate3d(0,0,0) scale(1);   opacity:.25; }
  50%  { transform: translate3d(20px,-18px,0) scale(1.06); opacity:.35; }
  100% { transform: translate3d(0,0,0) scale(1);   opacity:.25; }
}

/* Buttons Kontrast im Footer absichern */
.cb-footer .btn-outline-light{
  border-color: rgba(255,255,255,.5); color:#eaeaea;
}
.cb-footer .btn-outline-light:hover{
  background: rgba(255,255,255,.08);
}

/* Brandmark im Footer etwas kleiner */
.cb-footer .brandmark{ height:48px; }

/* ===== FAQ: clean dark, ohne Frost ===== */
.faq-summary .badge{
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  color:#cfe8f6;
}
.accordion.clean .accordion-item{
  background: transparent;
  border:1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: .75rem;
}
.accordion.clean .accordion-button{
  background: rgba(255,255,255,.04);
  color:#cfd7de;
  box-shadow:none; border:0;
  transition: background .25s ease, color .25s ease, padding .2s ease;
  padding-left: 3rem;
  position: relative;
}
.accordion.clean .accordion-button.collapsed{
  background: rgba(255,255,255,.03);
  color:#b8c4cc;
}
.accordion.clean .accordion-button:not(.collapsed){
  background: rgba(22,160,220,.12);
  color:#eaf6ff;
}
.accordion.clean .accordion-button::after{
  filter: invert(1) opacity(.85);
}
.accordion.clean .accordion-body{
  background: rgba(255,255,255,.02);
  color:#d7e2ea;
}
.accordion.clean .q-mark{
  position:absolute; left:1.1rem; top:50%; transform:translateY(-50%);
  width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center; font-weight:700; font-size:.9rem;
  color:#0c2f41; background:#59c3ff;
  box-shadow:0 0 0 3px rgba(89,195,255,.2);
}

/* ===== Kontaktformular: clean dark ===== */
.form-panel{
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 1rem;
}
.info-panel{
  background: rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 1rem 1.25rem;
}
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

.input-icon{ position:relative; }
.input-icon > i{
  position:absolute; left:.75rem; top:50%; transform:translateY(-50%);
  opacity:.7; pointer-events:none;
}
.input-icon .form-control{ padding-left: 2.25rem; }

.form-control-dark{
  background:#111; color:#e6eef3; border-color:#2a2a2a;
}
.form-control-dark::placeholder{ color:#8fa3af; }
.form-control-dark:focus{
  background:#141414; color:#fff; border-color:#16A0DC;
  box-shadow: 0 0 0 .2rem rgba(22,160,220,.15);
}

.form-label{ font-weight:600; }
.form-hint{ color:#8fa3af; }

.charcount{ opacity:.8; }

/* Valid/invalid feedback via border + subtle glow */
.form-control-dark.is-valid{ border-color:#198754; box-shadow: 0 0 0 .2rem rgba(25,135,84,.15); }
.form-control-dark.is-invalid{ border-color:#dc3545; box-shadow: 0 0 0 .2rem rgba(220,53,69,.15); }

/* Button spinner */
#sendBtn .btn-spinner{ margin-left:.5rem; }

/* kleine Utility für Info-Icons */
.text-secondary-subtle{ color:#98a9b5 !important; }

/* Kontakt – Karten gleich hoch */
.form-panel, .info-panel { display:flex; flex-direction:column; height:100%; }

/* Footer-Stage: Bühne für Glows, nichts wird abgeschnitten */
.cb-footer-stage{
  position:relative;
  overflow:visible;            /* wichtig */
  padding-top:56px;
  padding-bottom:180px;        /* Platz für die unteren Blobs */
  z-index:0;
}
.cb-footer{ position:relative; z-index:1; }
.cb-footer .glass{ position:relative; z-index:2; }

/* Glows liegen unter allem und dürfen rauslaufen */
.cb-footer-glow{
  position:absolute; inset:-160px 0 -160px 0;
  pointer-events:none; overflow:visible;
  z-index:0;
}
.cb-footer-glow .blob{
  position:absolute; width:420px; height:420px; border-radius:50%;
  filter: blur(28px); opacity:.28;
  background: radial-gradient(circle at 30% 30%, #59c3ff 0%, rgba(89,195,255,0) 60%);
  animation: drift 18s ease-in-out infinite;
}
.cb-footer-glow .b1{ left:-120px; bottom:0;   background: radial-gradient(circle, #16A0DC 0%, rgba(22,160,220,0) 60%); animation-delay:.0s; }
.cb-footer-glow .b2{ right:10%; bottom:-40px; background: radial-gradient(circle, #59c3ff 0%, rgba(89,195,255,0) 60%); animation-delay:.9s; }
.cb-footer-glow .b3{ left:55%; top:-80px;     background: radial-gradient(circle, rgba(22,160,220,.85) 0%, rgba(22,160,220,0) 65%); animation-delay:1.6s; }

/* ===== Lieferumfang / Kit Layout ===== */
.kit-chips .chip{
  display:flex; gap:.75rem; align-items:center;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding:.75rem .9rem;
}
.kit-chips .chip i{
  width:36px; height:36px; border-radius:10px;
  display:grid; place-items:center;
  background: rgba(22,160,220,.12);
  color:#16A0DC;
  font-size:1.1rem;
}
.kit-card{
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  padding:1rem 1.1rem;
}
.kit-card-head{ margin-bottom:.25rem; }
.kit-list li{ margin:.45rem 0; }

.spec{
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  padding:.75rem .9rem;
}
.spec-label{
  font-size:.8rem; letter-spacing:.04em; text-transform:uppercase;
  color:#8fa3af;
}
.spec-value{
  font-weight:700; letter-spacing:.3px;
}

/* kleine Entrance-Animationen re-use */
#lieferumfang [data-animate]{ opacity:0; transform: translateY(12px); transition: opacity .45s ease, transform .45s ease; }
#lieferumfang [data-animate].in{ opacity:1; transform:none; }

/* ===== Kalkulator UI ===== */
.quote-form .input-icon{ position:relative; }
.quote-form .input-icon > i{
  position:absolute; left:.75rem; top:50%; transform:translateY(-50%); opacity:.7;
}
.quote-form .input-icon .form-control{ padding-left:2.25rem; }

.form-range{ accent-color:#16A0DC; }
.form-range::-webkit-slider-runnable-track{ background:rgba(255,255,255,.12); }
.form-range::-moz-range-track{ background:rgba(255,255,255,.12); }

.chip-group{ display:flex; gap:.5rem; flex-wrap:wrap; }
.chip{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  color:#dfefff;
  border-radius:999px; padding:.4rem .75rem; line-height:1;
}
.chip.active{ background:rgba(22,160,220,.16); border-color:rgba(22,160,220,.45); color:#ffffff; }

.q-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
}
.q-total{
  background:linear-gradient(90deg,#eaf6ff,#59c3ff,#16A0DC);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 6px 24px rgba(0,0,0,.35);
}
.q-stat{ background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:.5rem .75rem; }
.q-stat-label{ color:#8fa3af; font-size:.8rem; letter-spacing:.04em; text-transform:uppercase; }
.q-stat-value{ font-weight:700; }

.q-meter{
  position:relative; height:12px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; margin-top:.25rem;
}
.q-meter-fill{
  position:absolute; left:0; top:0; bottom:0; width:0%;
  background:linear-gradient(90deg,#16A0DC,#59c3ff);
  transition: width .5s cubic-bezier(.2,.9,.2,1);
}
.q-meter .q-meter-mark{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-size:.7rem; color:#b8c4cc;
}

/* Buttons */
#qFillForm{ border-color:rgba(255,255,255,.5); }

/* ===== Cocktail-Swiper Dark Theme ===== */
.cb-cocktail-swiper{
  --swiper-theme-color: #16A0DC;
  padding-bottom: 44px; /* Platz für Pagination */
}
.cb-cocktail-swiper .swiper-pagination-bullet{
  background: rgba(255,255,255,.4);
  opacity: 1;
}
.cb-cocktail-swiper .swiper-pagination-bullet-active{
  background: #16A0DC;
  box-shadow: 0 0 0 6px rgba(22,160,220,.18);
}
.cb-cocktail-swiper .swiper-button-prev,
.cb-cocktail-swiper .swiper-button-next{
  color:#e8f4fb;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.35));
}
.cb-cocktail-swiper .swiper-button-prev:hover,
.cb-cocktail-swiper .swiper-button-next:hover{
  color:#ffffff;
}

/* Kartenabstand innerhalb der Slides */
.cb-slide-grid{ /* Wrapper in jeder Slide */
  padding-top: .25rem;
}

/* ===== Cocktailkarte – Filterbar / Suche / Sortierung ===== */
.cocktail-filterbar{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:.75rem 1rem;
  backdrop-filter:blur(8px);
}

.cocktail-filterbar .filter-chips{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
}

.filter-chip{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  color:#e0eaf3;
  border-radius:999px;
  padding:.4rem .8rem;
  font-size:.9rem;
  line-height:1;
  cursor:pointer;
  transition:all .2s ease;
}
.filter-chip:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.2);
}
.filter-chip.active{
  background:rgba(22,160,220,.18);
  border-color:rgba(22,160,220,.6);
  color:#ffffff;
  font-weight:600;
}

.form-select-dark{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  color:#e0eaf3;
  font-size:.9rem;
  border-radius:8px;
  padding:.4rem .75rem;
}
.form-select-dark:focus{
  border-color:#16A0DC;
  box-shadow:0 0 0 .2rem rgba(22,160,220,.25);
}
.form-select-dark option{
  background-color:#0f0f0f;
  color:#e0eaf3;
}

.search-control .form-control-dark{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  color:#fff;
  padding-left:2.25rem;
  font-size:.9rem;
  border-radius:8px;
}
.search-control .form-control-dark::placeholder{ color:#a9b6c2; }
.search-control .input-icon{ position:relative; }
.search-control .input-icon i{
  position:absolute;
  left:.75rem;
  top:50%;
  transform:translateY(-50%);
  opacity:.6;
  color:#e0eaf3;
}

.sort-control select{
  min-width:180px;
}

/* sanftes Fade für Cocktailkarten */
.card-fade{
  animation:cardfade .5s ease both;
}
@keyframes cardfade{
  from{ opacity:0; transform:translateY(12px);}
  to{ opacity:1; transform:none;}
}

/* ===== Swiper Navigation – korrekt positioniert + blauer Glow-Effekt ===== */
.cb-cocktail-swiper{
  position:relative;
  overflow:visible; /* wichtig: Pfeile dürfen über Container hinausragen */
  padding-bottom:56px;
}

/* Grundlayout der Pfeile */
.cb-cocktail-swiper .swiper-button-prev,
.cb-cocktail-swiper .swiper-button-next{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:46px;
  height:46px;
  border-radius:50%;
  background:rgba(0,0,0,.35);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .25s ease;
  z-index:10;
  box-shadow:0 0 0 rgba(22,160,220,0);
}

.cb-slide-grid {
	overflow: visible;
}

/* sanfter Glow bei Hover */
.cb-cocktail-swiper .swiper-button-prev:hover,
.cb-cocktail-swiper .swiper-button-next:hover{
  background:rgba(22,160,220,.75);
  color:#fff;
  box-shadow:0 0 20px rgba(22,160,220,.8), 0 0 40px rgba(22,160,220,.5);
  transform:translateY(-50%) scale(1.05);
}

/* Icons minimal größer */
.cb-cocktail-swiper .swiper-button-prev::after,
.cb-cocktail-swiper .swiper-button-next::after{
  font-size:1.3rem;
}

/* Pfeile leicht außerhalb platzieren */
.cb-cocktail-swiper .swiper-button-prev{ left:-2.5rem; }
.cb-cocktail-swiper .swiper-button-next{ right:-2.5rem; }

/* Pagination etwas tiefer */
.cb-cocktail-swiper .swiper-pagination{
  bottom:8px !important;
}

/* ===== Mobile Handling ===== */
@media (max-width:768px){
  .cb-cocktail-swiper .swiper-button-prev,
  .cb-cocktail-swiper .swiper-button-next{
	display:none !important;
  }
  .cb-cocktail-swiper{
	padding-bottom:32px;
  }
  .cb-cocktail-swiper,
	.cb-cocktail-swiper .swiper-wrapper,
	.cb-cocktail-swiper .swiper-slide {
	  max-height: none;
	  overflow: visible;
	}
}

/* Inaktive Slides nicht anklickbar, aktive schon */
.cb-cocktail-swiper .swiper-slide{ pointer-events:none; overflow: visible}
.cb-cocktail-swiper .swiper-slide-active{ pointer-events:auto; }

/* Stagger-Entrance der Karten innerhalb der aktiven Slide */
.cb-cocktail-swiper .swiper-slide .card-fade{
  opacity:0;
  transform: translateY(10px);
}
.cb-cocktail-swiper .swiper-slide.is-active .card-fade{
  animation: card-in .5s cubic-bezier(.2,.9,.2,1) both;
  animation-delay: calc(var(--stagger, 0) * 40ms);
}
@keyframes card-in{
  from{ opacity:0; transform: translateY(12px); }
  to  { opacity:1; transform: none; }
}

/* ===== Mobile Layout: Cocktails in 2 Spalten, vertikal ===== */
@media (max-width: 768px) {

  /* Zwei Spalten */
  #cocktails .cb-slide-grid .col-6 {
	flex: 0 0 50%;
	max-width: 50%;
  }

  /* Karte vertikal stacken */
  #cocktails .card-fade {
	flex-direction: column;
	text-align: center;
	align-items: center;
	justify-content: flex-start;
	padding: 1rem;
  }

  /* Bild größer und zentriert */
  #cocktails .card-fade img {
	width: 100%;
	height: auto;
	border-radius: 12px;
	margin-bottom: .75rem;
  }

  /* Titel und Badge zentriert untereinander */
  #cocktails .card-fade h4 {
	font-size: 1rem;
	margin-bottom: .25rem;
  }

  #cocktails .card-fade .badge {
	display: inline-block;
	margin-bottom: .5rem;
	position: absolute;
	top: 1rem;
	right: 1rem;
  }

  /* Zutaten in kleinerer Schrift darunter */
  #cocktails .card-fade small,
  #cocktails .card-fade p {
	font-size: .85rem;
	line-height: 1.3;
	text-align: center;
  }

  /* Etwas mehr Abstand zwischen Karten */
  #cocktails .cb-slide-grid .row.g-3 {
	row-gap: 1rem;
  }
}

/* ===== Mobile-Optimierung: Filterbar / Suche / Sortierung ===== */
@media (max-width: 768px){

  /* Gesamtbar kompakter und stapeln */
  .cocktail-filterbar{
	flex-direction: column;
	align-items: stretch;
	gap: .6rem;
	padding: .5rem .6rem;
	border-radius: 12px;
	position: relative;
  }

  /* Chips als horizontales Scrollband mit Mask-Fades */
  .cocktail-filterbar .filter-chips{
	position: relative;
	display: flex;
	gap: .4rem;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
	padding: .25rem .25rem;
	margin: -.25rem; /* visuell bündig in der Bar */
	scrollbar-width: none;
  }
  .cocktail-filterbar .filter-chips::-webkit-scrollbar{ display:none; }

  /* Chip-Größe für Finger */
  .filter-chip{
	display:inline-flex;
	align-items:center;
	gap:.35rem;
	padding:.5rem .7rem;
	font-size:.9rem;
	border-radius: 999px;
  }

  /* Suche und Sortierung untereinander, Suche vollbreit */
  .cocktail-filterbar .search-sort{
	flex-direction: column;
	gap: .5rem;
  }
  .cocktail-filterbar .search-control .form-control-dark{
	width: 100%;
	height: 40px;
	font-size: .95rem;
	padding-left: 2.25rem;
  }
  .cocktail-filterbar .sort-control select{
	width: 100%;
	min-width: 0;
	height: 40px;
	font-size: .95rem;
  }
}

/* Optional: Sticky-Filterbar auf Mobil (klebt unter deinem Header) */
@media (max-width: 768px){
  #cocktails .cocktail-filterbar.is-sticky{
	position: sticky;
	top: 64px; /* an deine Navbarhöhe anpassen */
	z-index: 6;
	backdrop-filter: blur(8px);
  }
}

/* ===== Frosted-Glas Bar (ruhig, edel) ===== */
.glassbar{
  border-radius: 16px;
  padding: .8rem;
  background: radial-gradient(120% 120% at 10% -10%, rgba(22,160,220,.08) 0%, rgba(22,160,220,0) 55%),
			  rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
}

/* Sticky, aber dezent */
@media (max-width: 992px){
  .cocktail-filterbar.is-sticky{
	position: sticky;
	top: 64px; /* ggf. an Navbar anpassen */
	z-index: 6;
  }
}

/* ===== Chips: sanft, touch-freundlich, scrollable ===== */
.cocktail-filterbar .filter-chips{
  display:flex; gap:.5rem; align-items:center;
  overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch;
  padding:.25rem .25rem .5rem;
  scrollbar-width:none;
}
.cocktail-filterbar .filter-chips::-webkit-scrollbar{ display:none; }
.filter-chip{
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.35);
  color:#e9f1f8;
  padding:.5rem .8rem;
  font-size:.92rem;
  line-height:1;
  display:inline-flex; align-items:center; gap:.35rem;
  transition:transform .12s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.filter-chip:hover{ background:rgba(255,255,255,.08); }
.filter-chip.active{
  background:rgba(22,160,220,.22);
  border-color:rgba(22,160,220,.55);
  color:#fff;
  box-shadow:0 0 0 6px rgba(22,160,220,.12);
}

/* ===== Controls: Suche vollbreit, Sort rechts „ploppt“ ===== */
.cocktail-filterbar .filter-controls{
  display:flex; gap:.6rem; align-items:center; margin-top:.5rem;
}
.search-control{
  position:relative; flex:1 1 auto;
}
.search-control i{
  position:absolute; left:.75rem; top:50%; transform:translateY(-50%); opacity:.7;
}
.search-control .form-control-dark{
  width:100%;
  height:44px;
  padding-left:2.25rem;
  border-radius:10px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);
  color:#fff;
}
.search-control .form-control-dark:focus{
  border-color:#16A0DC;
  box-shadow:0 0 0 .2rem rgba(22,160,220,.25);
}

/* Sortier-„Pill“ als Button-Select */
.sort-control{ flex:0 0 auto; }
.sort-pills{
  appearance:none;
  -webkit-appearance:none;
  height:44px;
  padding:.5rem 2.25rem .5rem .9rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  color:#e9f1f8;
  background:
	radial-gradient(120% 120% at 20% -20%, rgba(22,160,220,.20) 0%, rgba(22,160,220,0) 60%),
	rgba(0,0,0,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}
/* Dropdown-Pfeil selbst zeichnen */
.sort-pills{
  background-image:
	linear-gradient(transparent, transparent),
	radial-gradient(120% 120% at 20% -20%, rgba(22,160,220,.20) 0%, rgba(22,160,220,0) 60%),
	rgba(0,0,0,.45);
}
.sort-pills:focus{
  border-color:rgba(22,160,220,.7);
  box-shadow:0 0 0 8px rgba(22,160,220,.15), 0 10px 30px rgba(0,0,0,.35);
  outline:0;
  transform:translateY(-1px) scale(1.02);
}
.sort-pills:hover{
  box-shadow:0 0 0 6px rgba(22,160,220,.12);
}

/* Mobile: Controls stapeln, Sort unten vollbreit */
@media (max-width: 768px){
  .cocktail-filterbar .filter-controls{
	flex-direction:column;
  }
  .sort-control, .sort-pills{
	width:100%;
  }
}

/* ===== Mobile Cocktail-Suchleiste: Command-Bar Style ===== */
@media (max-width: 768px){

  .cocktail-filterbar .search-control{
	position: relative;
	width: 100%;
  }

  .cocktail-filterbar .search-control .form-control-dark{
	background: radial-gradient(140% 140% at 10% 0%, rgba(22,160,220,.08) 0%, rgba(0,0,0,.35) 40%, rgba(0,0,0,.2) 100%);
	border: 1px solid rgba(255,255,255,.1);
	border-radius: 1.15rem;
	height: 46px;
	padding-left: 2.6rem;
	color: #fff;
	font-size: .95rem;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
  }

  .cocktail-filterbar .search-control .form-control-dark::placeholder{
	color: rgba(233,241,248,.55);
  }

  .cocktail-filterbar .search-control i{
	position: absolute;
	left: .85rem;
	top: 50%;
	transform: translateY(-50%);
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 999px;
	background: rgba(0,0,0,.25);
	display: grid;
	place-items: center;
	color: #fff;
	font-size: .8rem;
	box-shadow: 0 0 0 4px rgba(22,160,220,0);
	transition: box-shadow .2s ease;
  }

  /* Fokus-Effekt wie bei modernen mobile inputs */
  .cocktail-filterbar .search-control .form-control-dark:focus{
	border-color: rgba(22,160,220,.85);
	box-shadow: 0 0 0 .2rem rgba(22,160,220,.25);
	background: rgba(0,0,0,.35);
  }
  .cocktail-filterbar .search-control .form-control-dark:focus + ._dummy { /* fallback leer */ }

  .cocktail-filterbar .search-control:has(.form-control-dark:focus) i{
	box-shadow: 0 0 14px 2px rgba(22,160,220,.55);
	background: rgba(22,160,220,.8);
  }

  /* kleine helle Linie oben für „eingelassene“ Optik */
  .cocktail-filterbar .search-control::after{
	content:"";
	position:absolute;
	left:1rem;
	right:1rem;
	top:0;
	height:1px;
	background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.15) 25%, rgba(255,255,255,0) 100%);
	pointer-events:none;
  }
}

/* ===== Mobile Overflow Fix ===== */
@media (max-width: 768px) {

  /* komplette Seite soll nicht seitlich scrollen */
  html, body {
	max-width: 100%;
	overflow-x: hidden;
  }

  /* Cocktail-Sektion und Swiper auch einfangen */
  #cocktails,
  #cocktailListStage,
  .cb-cocktail-swiper {
	position: relative;
	max-width: 100%;
	overflow-x: hidden;
  }

  /* Swiper-Pfeile auf Mobil sind eh aus, aber falls ein Breakpoint verrutscht */
  .cb-cocktail-swiper .swiper-button-prev,
  .cb-cocktail-swiper .swiper-button-next {
	display: none !important;
  }

  /* Filterbar soll nicht über den Rand hinausschieben */
  .cocktail-filterbar {
	max-width: 100%;
  }
}

/* Desktop: Pfeile nicht so weit raus, damit sie nicht auf kleinen Screens einrasten */
@media (min-width: 769px) {
  .cb-cocktail-swiper .swiper-button-prev { left: -1.6rem; }
  .cb-cocktail-swiper .swiper-button-next { right: -1.6rem; }
}