/* ════════════════════════════════════════════════════════
   CLUB 218 · buttons-unified.css · 07.09.2026
   ────────────────────────────────────────────────────────
   ZWECK
   Auf der Startseite hatte praktisch jede Sektion ihre eigene
   Button-Klasse erfunden. Die Inventur ergab:

     Radien   : 8px · 10px · 12px · 50px · 99px · 999px · 8px !important
     Farben   : Pink-Lila, aber auch Tuerkis-Gold (firmen-cta),
                Gold-Orange (bs-cta), Gold-Pink (sp2-info-btn,
                giftcard-teaser-cta), Pink-Tuerkis (bottle-teaser-cta)

   Genau das ist der "bunte Hippie"-Eindruck. Referenz ist .vz-cta
   aus dem VIP-Zonen-Bereich — 12px Radius, Pink-Lila-Verlauf.

   AUFBAU
   Teil 1 · Das .btn-c218-System fuer neue Buttons.
   Teil 2 · Angleichung der bestehenden Sektions-Klassen auf dieselben
            Werte. Dadurch musste kein einziges HTML-Element geaendert
            werden — kein Risiko fuer Layout oder Klick-Handler.

   NICHT ANGEFASST (bewusst)
     Age-Gate · Login · Cookie-Banner · Lightbox-Navigation ·
     Slider-Punkte · Menue- und Schliessen-Symbole ·
     der schwebende Sticky-Button (runde Form ist dort Absicht)
   ════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────
   TEIL 1 · Das System
   ───────────────────────────────────────────────────────── */

.btn-c218 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.8rem;
  border-radius: 12px;
  border: none;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  line-height: 1.2;
}

.btn-c218--primary {
  background: linear-gradient(135deg, #FF006E 0%, #9B59FF 100%);
  color: #fff;
  box-shadow: 0 8px 24px rgba(255, 0, 110, 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.btn-c218--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(255, 0, 110, 0.5),
              inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.btn-c218--secondary {
  background: rgba(255, 255, 255, 0.04);
  color: #E8DFD3;
  border: 1px solid rgba(255, 0, 110, 0.4);
}
.btn-c218--secondary:hover {
  background: rgba(255, 0, 110, 0.12);
  border-color: #FF006E;
  transform: translateY(-1px);
}

.btn-c218--ghost {
  background: transparent;
  color: #E8DFD3;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.btn-c218--ghost:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.4);
}

.btn-c218--sm { padding: 0.55rem 1.1rem; font-size: 0.82rem; }
.btn-c218--lg { padding: 1.1rem 2.4rem;  font-size: 1.05rem; }

/* Zustaende — gehoeren zu jedem ernsthaften Button-System */
.btn-c218:disabled,
.btn-c218.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none;
}
.btn-c218:focus-visible {
  outline: 2px solid #FF006E;
  outline-offset: 3px;
}

/* ─────────────────────────────────────────────────────────
   TEIL 2 · Angleichung der bestehenden Sektions-Buttons

   Diese Klassen bleiben im HTML stehen und behalten ihre
   Positionierung, Breite und Animationen. Vereinheitlicht werden
   nur Radius, Schrift, Uebergang — und dort, wo die Farbe aus der
   Palette fiel, auch der Verlauf.
   `!important` ist noetig, weil die Ursprungsregeln weiter unten
   in derselben Kaskade stehen bzw. selbst `!important` nutzen.
   ───────────────────────────────────────────────────────── */

/* Radius und Typografie fuer alle Sektions-CTAs */
.vz-cta,
.goc-btn,
.sp2-cta-btn,
.sp2-info-btn,
.fe-cta,
.firmen-cta,
.karriere-cta,
.galerie-cta-btn,
.bs-cta,
.event-btn,
.talents-teaser-cta,
.giftcard-teaser-cta,
.bottle-teaser-cta,
.hotel-rooms-cta,
.jga-prem-cta,
.jga-prem-cta-sec,
.lb-cta {
  border-radius: 12px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  letter-spacing: 0.05em;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Farbkorrektur · diese sechs lagen ausserhalb der Pink-Lila-Palette.
   Gold, Tuerkis und Orange waren der Grund fuer den bunten Eindruck. */
.sp2-info-btn,          /* war Gold → Pink   */
.firmen-cta,            /* war Tuerkis → Gold */
.karriere-cta,          /* war Violett → Pink */
.bs-cta,                /* war Gold → Orange  */
.giftcard-teaser-cta,   /* war Gold → Pink    */
.bottle-teaser-cta {    /* war Pink → Tuerkis */
  background: linear-gradient(135deg, #FF006E 0%, #9B59FF 100%) !important;
  color: #fff !important;
  box-shadow: 0 8px 24px rgba(255, 0, 110, 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}
.sp2-info-btn:hover,
.firmen-cta:hover,
.karriere-cta:hover,
.bs-cta:hover,
.giftcard-teaser-cta:hover,
.bottle-teaser-cta:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 32px rgba(255, 0, 110, 0.5),
              inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

/* Verlaufs-Endpunkt vereinheitlichen: einige nutzten #8338EC statt #9B59FF */
.sp2-cta-btn,
.galerie-cta-btn,
.hotel-rooms-cta,
.goc-btn-primary,
.fe-cta-primary {
  background: linear-gradient(135deg, #FF006E 0%, #9B59FF 100%) !important;
  color: #fff !important;
}

/* Der schwebende Button unten rechts bleibt rund — dort ist die Pillenform
   Absicht. Nur der Verlauf wird auf die Palette gebracht. */
.mobile-sticky-cta {
  background: linear-gradient(135deg, #FF006E 0%, #9B59FF 100%) !important;
}

@media (prefers-reduced-motion: reduce) {
  .btn-c218,
  .vz-cta, .goc-btn, .sp2-cta-btn, .sp2-info-btn, .fe-cta, .firmen-cta,
  .karriere-cta, .galerie-cta-btn, .bs-cta, .event-btn, .talents-teaser-cta,
  .giftcard-teaser-cta, .bottle-teaser-cta, .hotel-rooms-cta, .lb-cta {
    transition: none !important;
  }
  .btn-c218:hover,
  .sp2-info-btn:hover, .firmen-cta:hover, .karriere-cta:hover,
  .bs-cta:hover, .giftcard-teaser-cta:hover, .bottle-teaser-cta:hover {
    transform: none !important;
  }
}

/* ─────────────────────────────────────────────────────────
   TEIL 3 · Unterseiten · 07.09.2026

   Auf den Unterseiten stimmen die Farben bereits (Pink-Lila).
   Abweichend war nur der Radius: 8px, 9px, 10px, 99px, 999px.
   Hier wird deshalb NUR Radius, Schrift und Uebergang angeglichen,
   die Verlaeufe bleiben unberuehrt.

   Bewusst NICHT in dieser Liste:
     .remove-btn   · rundes Entfernen-Symbol (50%) — soll rund bleiben
     .social-btn   · Icon-Pillen
     .filter-btn   · Filter-Pillen in Leisten
     .zd-cta-bar · .sa-booking-cta · .ed-cta-card · .detail-footer-cta
                   · das sind Container/Karten, keine Buttons
   ───────────────────────────────────────────────────────── */

.c218-btn,
.ev-reserve-btn,
.book-btn,
.zd-reserve-btn,
.zd-cta-btn,
.detail-hero-cta,
.sticky-cta,
.sa-cta-btn,
.footer-cta,
.apply-btn,
.btn-write,
.btn-cancel,
.btn-submit,
.page-btn,
.ed-cta-btn {
  border-radius: 12px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  letter-spacing: 0.05em;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@media (prefers-reduced-motion: reduce) {
  .c218-btn, .ev-reserve-btn, .book-btn, .zd-reserve-btn, .zd-cta-btn,
  .detail-hero-cta, .sticky-cta, .sa-cta-btn, .footer-cta, .apply-btn,
  .btn-write, .btn-cancel, .btn-submit, .page-btn, .ed-cta-btn {
    transition: none !important;
  }
}

/* ─────────────────────────────────────────────────────────
   TEIL 4 · Social-Icons im Footer · 07.09.2026

   Beim Rundgang fiel auf: die Icons unter "Follow us" waren rund
   (border-radius 50% bzw. 999px), waehrend im ganzen Rest der Seite
   12px gelten. Der Hover-Verlauf lief ausserdem ins Tuerkis (#00C9FF) —
   dieselbe Palette-Abweichung wie bei den Sektions-Buttons.

   .social-icon ist die neue Klasse fuer neues Markup. Darunter werden
   die drei bereits bestehenden Klassen auf dieselben Werte gezogen,
   damit kein HTML angefasst werden muss:

     .footer-social-premium a · index.html · Icons aus contact/info API
     .footer-social a         · index.html · statischer Footer
     .social-btn              · index.html + talente.html · Icon-Pillen
   ───────────────────────────────────────────────────────── */

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 0, 110, 0.3);
  color: #E8DFD3;
  transition: all 0.3s ease;
  text-decoration: none;
  font-size: 1.1rem;
  line-height: 1;
}
.social-icon:hover {
  background: linear-gradient(135deg, #FF006E, #9B59FF);
  color: #fff;
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 0, 110, 0.4);
}
.social-icon svg { width: 20px; height: 20px; }

/* Angleichung der bestehenden Icon-Kacheln.
   `!important`, weil club218-ui-v1.css und die Seiten-<style>-Bloecke
   spaeter in der Kaskade stehen. */
.footer-social-premium a,
.footer-social a {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 0, 110, 0.3) !important;
  color: #E8DFD3 !important;
  transition: all 0.3s ease !important;
  text-decoration: none;
}
.footer-social-premium a:hover,
.footer-social a:hover {
  background: linear-gradient(135deg, #FF006E, #9B59FF) !important;
  color: #fff !important;
  border-color: transparent !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(255, 0, 110, 0.4) !important;
}

/* Die beschrifteten Pillen ("📷 Instagram") behalten ihre Breite und
   ihr Padding — angeglichen wird nur Radius, Rahmen und Hover. */
.social-btn {
  border-radius: 12px !important;
  border: 1px solid rgba(255, 0, 110, 0.3) !important;
  transition: all 0.3s ease !important;
}
.social-btn:hover {
  background: linear-gradient(135deg, #FF006E, #9B59FF) !important;
  color: #fff !important;
  border-color: transparent !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(255, 0, 110, 0.4) !important;
}

@media (prefers-reduced-motion: reduce) {
  .social-icon, .footer-social-premium a, .footer-social a, .social-btn {
    transition: none !important;
  }
  .social-icon:hover, .footer-social-premium a:hover,
  .footer-social a:hover, .social-btn:hover {
    transform: none !important;
  }
}

/* ─────────────────────────────────────────────────────────
   TEIL 5 · Restliche Unterseiten · 07.09.2026

   Beim Rundgang blieben die Seiten uebrig, die diese Datei bis dahin
   gar nicht geladen hatten: Rechtstexte, Login, Konto, Ticket,
   Wartungsseite. Befund war ueberall derselbe — Farben stimmten
   weitgehend, aber der Radius lag bei 8px, 9px oder 99px, und einige
   Verlaeufe endeten noch auf #8338EC statt #9B59FF.

   NICHT angeglichen (bewusst):
     scanner.html · club218_door.html
       Gruen = eingecheckt, Rot = No-Show, Gold = bezahlt. Das sind
       Bedienungssignale fuer Einlass und Theke, keine Deko. Sie auf
       Pink zu ziehen wuerde die Bedienung schlechter machen.
     .btn-danger · .av-btn-del
       Rot als Warnfarbe vor dem Loeschen — bleibt rot.
   ───────────────────────────────────────────────────────── */

.back-btn,
.legal-back-btn,
.btn-primary,
.btn-logout,
.av-btn-up,
.av-btn-cancel,
.kt-back,
.kt-cta-btn,
.kt-submit,
.kt-map-link {
  border-radius: 12px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  letter-spacing: 0.05em;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Verlaufs-Endpunkt vereinheitlichen · #8338EC war der letzte Rest
   der alten Palette (Login-Absenden, Konto-Primaerbutton). */
.btn-submit,
.btn-primary {
  border-radius: 12px !important;
  background: linear-gradient(135deg, #FF006E 0%, #9B59FF 100%) !important;
  color: #fff !important;
}

@media (prefers-reduced-motion: reduce) {
  .back-btn, .legal-back-btn, .btn-primary, .btn-logout, .av-btn-up,
  .av-btn-cancel, .kt-back, .kt-cta-btn, .kt-submit, .kt-map-link {
    transition: none !important;
  }
}

/* ─────────────────────────────────────────────────────────
   TEIL 6 · Zwei Lila-Toene, und wofuer sie da sind
   07.09.2026

   Beim Umstellen der Goldakzente auf die Palette ist ein Fehler
   passiert, der hier festgehalten wird, damit er sich nicht
   wiederholt: #9B59FF wurde auch fuer Text eingesetzt.

   Auf dunklem Grund gemessen (WCAG-Kontrast):

     #FFD700  Gold, der alte Ton   12.4 : 1   (sehr gut lesbar)
     #9B59FF  Palette-Lila          4.4 : 1   (unter dem Minimum 4.5)
     #B07FFF  heller, gleicher Ton  6.1 : 1   (bestanden)

   Der Wechsel von Gold auf #9B59FF hat den Kontrast also gedrittelt.
   Bei Eyebrows und Labels um 0.7rem war das deutlich zu wenig.

   REGEL
     #9B59FF  fuer Flaechen · Verlaeufe, Hintergruende, Rahmen
     #B07FFF  fuer Text auf dunklem Grund
     #FF006E  fuer Text ist mit 4.5:1 gerade noch in Ordnung —
              bei Schrift unter 0.8rem lieber #FF5C9E nehmen (6.0:1)

   Weiss bleibt Weiss: auf einem Pink-Lila-Verlauf ist #fff Pflicht.
   Dunkle Schrift stammt dort noch aus der Gold-Zeit und ist falsch.
   ───────────────────────────────────────────────────────── */

:root {
  --c218-pink:        #FF006E;
  --c218-purple:      #9B59FF;   /* Flaechen */
  --c218-purple-text: #B07FFF;   /* Text auf dunklem Grund */
  --c218-pink-text:   #FF5C9E;   /* Pink fuer kleine Schrift */
}