/* ═══════════════════════════════════════════════════════════════
 * CLUB 218 · UI-SYSTEM v1 · Senior-Modus · 09.05.2026
 * Konsolidiert 75+ Button-Klassen + Mobile-Modal-Fix
 * Mobile-First · A11y-Compliant · Premium-UX
 * ═══════════════════════════════════════════════════════════════ */

:root {
  /* Brand-Colors */
  --c218-pink: #FF006E;
  --c218-pink-soft: rgba(255, 0, 110, 0.12);
  --c218-pink-hover: #ff1a7a;
  --c218-purple: #8338EC;
  --c218-gold: #D4AF37;
  --c218-success: #10B981;
  --c218-success-hover: #059669;
  --c218-warning: #F59E0B;
  --c218-warning-hover: #D97706;
  --c218-danger: #EF4444;
  --c218-danger-hover: #DC2626;
  --c218-info: #3B82F6;
  --c218-info-hover: #2563EB;
  --c218-text: #FFFFFF;
  --c218-text-soft: rgba(255, 255, 255, 0.85);
  --c218-bg-soft: rgba(255, 255, 255, 0.06);
  --c218-bg-hover: rgba(255, 255, 255, 0.12);
  --c218-border: rgba(255, 255, 255, 0.18);
  --c218-border-strong: rgba(255, 255, 255, 0.32);
  
  /* Button Tokens */
  --btn-radius: 999px;
  --btn-padding-y: 11px;
  --btn-padding-x: 22px;
  --btn-padding-y-sm: 7px;
  --btn-padding-x-sm: 14px;
  --btn-font-size: 0.92rem;
  --btn-font-size-sm: 0.78rem;
  --btn-font-weight: 600;
  --btn-touch-min: 44px;
  --btn-transition: all 0.2s cubic-bezier(.4, 0, .2, 1);
}

/* ─── BASE: alle Button-Klassen einheitlich ─── */
.btn,
button.btn,
a.btn,
input[type="button"].btn,
input[type="submit"].btn,
.filter-btn,
.tab-btn,
.topbar-btn,
.back-btn,
.book-btn,
.btn-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-family: inherit;
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  line-height: 1.2;
  border-radius: var(--btn-radius);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: var(--btn-transition);
  min-height: var(--btn-touch-min);
  background: var(--c218-bg-soft);
  color: var(--c218-text);
  position: relative;
}

.btn:focus-visible,
.filter-btn:focus-visible,
.tab-btn:focus-visible {
  outline: 2px solid var(--c218-pink);
  outline-offset: 2px;
}

.btn:disabled, .btn.disabled,
button:disabled.btn {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ─── VARIANTS ─── */
.btn-primary, .btn.btn-primary {
  background: var(--c218-pink);
  border-color: var(--c218-pink);
  color: #fff;
  box-shadow: 0 4px 14px rgba(255, 0, 110, 0.3);
}
.btn-primary:hover {
  background: var(--c218-pink-hover);
  border-color: var(--c218-pink-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255, 0, 110, 0.4);
}

.btn-secondary, .btn.btn-secondary {
  background: var(--c218-bg-soft);
  border-color: var(--c218-border);
  color: var(--c218-text);
}
.btn-secondary:hover {
  background: var(--c218-bg-hover);
  border-color: var(--c218-border-strong);
}

.btn-success, .btn.btn-success {
  background: var(--c218-success);
  border-color: var(--c218-success);
  color: #fff;
}
.btn-success:hover {
  background: var(--c218-success-hover);
  transform: translateY(-1px);
}

.btn-danger, .btn.btn-danger {
  background: var(--c218-danger);
  border-color: var(--c218-danger);
  color: #fff;
}
.btn-danger:hover {
  background: var(--c218-danger-hover);
  transform: translateY(-1px);
}

.btn-warning, .btn.btn-warning {
  background: var(--c218-warning);
  border-color: var(--c218-warning);
  color: #fff;
}
.btn-warning:hover {
  background: var(--c218-warning-hover);
  transform: translateY(-1px);
}

.btn-info, .btn.btn-info {
  background: var(--c218-info);
  border-color: var(--c218-info);
  color: #fff;
}
.btn-info:hover {
  background: var(--c218-info-hover);
  transform: translateY(-1px);
}

.btn-gold, .btn.btn-gold {
  background: linear-gradient(135deg, #D4AF37, #F4D03F);
  border-color: #D4AF37;
  color: #1A0A00;
}
.btn-gold:hover {
  background: linear-gradient(135deg, #F4D03F, #D4AF37);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
}

.btn-outline, .btn.btn-outline {
  background: transparent;
  border-color: var(--c218-pink);
  color: var(--c218-pink);
}
.btn-outline:hover {
  background: var(--c218-pink);
  color: #fff;
}

.btn-ghost, .btn.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--c218-text-soft);
}
.btn-ghost:hover {
  background: var(--c218-bg-soft);
  color: var(--c218-text);
}

/* ─── SIZES ─── */
.btn-small, .btn.btn-small,
.btn-sm, .btn.btn-sm {
  padding: var(--btn-padding-y-sm) var(--btn-padding-x-sm);
  font-size: var(--btn-font-size-sm);
  min-height: 36px;
}

.btn-lg, .btn.btn-lg {
  padding: 14px 28px;
  font-size: 1.02rem;
}

.btn.full, .btn-block,
.btn.btn-block {
  width: 100%;
  display: flex;
}

/* ─── SPECIAL CLASSES (mapped to standard) ─── */
.topbar-btn {
  padding: 9px 16px;
  background: var(--c218-bg-soft);
  border: 1px solid var(--c218-border);
  font-size: 0.84rem;
  min-height: 40px;
}
.topbar-btn:hover {
  background: var(--c218-pink-soft);
  border-color: var(--c218-pink);
  color: var(--c218-pink);
}

.back-btn, .book-btn {
  padding: 8px 16px;
  font-size: 0.84rem;
  min-height: 38px;
  background: var(--c218-bg-soft);
  border: 1px solid var(--c218-border);
}

.filter-btn {
  background: transparent;
  border: 1px solid var(--c218-border);
  color: var(--c218-text-soft);
  padding: 8px 14px;
  font-size: 0.84rem;
  min-height: 38px;
}
.filter-btn:hover, .filter-btn.active {
  background: var(--c218-pink-soft);
  border-color: var(--c218-pink);
  color: var(--c218-pink);
}

.tab-btn {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--c218-text-soft);
  padding: 10px 18px;
  border-radius: 8px 8px 0 0;
  min-height: 40px;
}
.tab-btn:hover { color: var(--c218-text); }
.tab-btn.active {
  border-bottom-color: var(--c218-pink);
  color: var(--c218-pink);
}

.btn-close {
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: none;
  font-size: 1.4rem;
  color: var(--c218-text-soft);
  border-radius: 8px;
  min-height: 36px;
}
.btn-close:hover {
  background: var(--c218-bg-soft);
  color: var(--c218-text);
}

/* ═══════════════════════════════════════════════════════════════
 * MODAL · MOBILE-FIX
 * Behebt: "Account-Modal lagert sich über die ganze Seite aus"
 * ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .modal-backdrop {
    padding: 12px !important;
    align-items: flex-start !important;
    padding-top: 5vh !important;
  }
  
  .modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 90vh !important;
    margin: 0 !important;
    border-radius: 16px !important;
    overflow-y: auto !important;
  }
  
  .modal-header {
    padding: 16px 20px !important;
    position: sticky !important;
    top: 0 !important;
    background: inherit !important;
    z-index: 10 !important;
    backdrop-filter: blur(10px);
  }
  
  .modal-body {
    padding: 16px 20px !important;
  }
  
  .modal-close {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

@media (max-width: 380px) {
  .modal-backdrop { padding: 0 !important; padding-top: 0 !important; }
  .modal {
    border-radius: 0 !important;
    max-height: 100vh !important;
    height: 100vh !important;
  }
}

/* ─── ACCESSIBILITY ─── */
@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover, .filter-btn, .tab-btn, .topbar-btn {
    transition: none;
    transform: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
 * UI-SYSTEM v2 · 10.05.2026 · Premium Variants + Sizes + Mobile
 * ═══════════════════════════════════════════════════════════════ */

/* ─── PREMIUM VARIANTS ─────────────────────────────────────── */

/* NEON-PINK · Hero-CTAs (Reservieren, Buchen) */
.btn-neon-pink, .btn.btn-neon-pink {
  background: linear-gradient(135deg, #FF006E, #8338EC);
  border-color: transparent;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 20px rgba(255, 0, 110, 0.35), 0 1px 3px rgba(0,0,0,0.2);
  position: relative;
  overflow: hidden;
}
.btn-neon-pink:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(255, 0, 110, 0.55), 0 2px 5px rgba(0,0,0,0.3);
}
.btn-neon-pink::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.18), transparent 50%);
  pointer-events: none; opacity: 0; transition: opacity 0.2s;
}
.btn-neon-pink:hover::before { opacity: 1; }

/* NEON-BLUE · Buchen, Aktion, CTA (cyan glow) */
.btn-neon-blue, .btn.btn-neon-blue {
  background: linear-gradient(135deg, #00C9FF, #0099FF, #0066FF);
  border-color: transparent;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 20px rgba(0, 153, 255, 0.4), 0 0 30px rgba(0, 201, 255, 0.15);
  text-shadow: 0 0 8px rgba(0, 201, 255, 0.5);
}
.btn-neon-blue:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 153, 255, 0.6), 0 0 50px rgba(0, 201, 255, 0.25);
}

/* NEON-GOLD · VIP, Premium, Exklusiv */
.btn-neon-gold, .btn.btn-neon-gold {
  background: linear-gradient(135deg, #D4AF37, #FFD700, #B8860B);
  border-color: transparent;
  color: #1a1a1a;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 4px 20px rgba(212, 175, 55, 0.5), 0 0 30px rgba(255, 215, 0, 0.2);
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}
.btn-neon-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(212, 175, 55, 0.7), 0 0 50px rgba(255, 215, 0, 0.3);
}

/* GLASS · Subtle/Secondary, frosted */
.btn-glass, .btn.btn-glass {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: #fff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.btn-glass:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.32);
  transform: translateY(-1px);
}

/* ─── GRÖSSEN-SYSTEM ─────────────────────────────────────── */
.btn-xs, .btn.btn-xs {
  padding: 5px 12px;
  font-size: 0.72rem;
  min-height: 32px;
  letter-spacing: 0.02em;
}
.btn-sm, .btn.btn-sm {
  padding: var(--btn-padding-y-sm) var(--btn-padding-x-sm);
  font-size: var(--btn-font-size-sm);
  min-height: 38px;
}
.btn-lg, .btn.btn-lg {
  padding: 14px 28px;
  font-size: 1rem;
  min-height: 52px;
  font-weight: 700;
}
.btn-xl, .btn.btn-xl {
  padding: 18px 38px;
  font-size: 1.1rem;
  min-height: 60px;
  font-weight: 800;
  letter-spacing: 0.05em;
}

/* Icon-Only Button (für Mobile/Compact) */
.btn-icon-only, .btn.btn-icon-only {
  padding: 0;
  width: var(--btn-touch-min);
  min-width: var(--btn-touch-min);
  aspect-ratio: 1;
}
.btn-icon-only.btn-sm { width: 38px; min-width: 38px; }
.btn-icon-only.btn-xs { width: 32px; min-width: 32px; }

/* Icon im Button (Lucide/SVG) */
.btn .icon, .btn svg {
  width: 1.05em;
  height: 1.05em;
  flex-shrink: 0;
}

/* Block-Button (full-width) */
.btn-block, .btn.btn-block {
  width: 100%;
  display: flex;
}

/* ─── LEGACY-CLASSES NORMALIZER ─────────────────────────── */
/* Bestehende Custom-Klassen erben Premium-Style ohne HTML-Änderungen */

.btn-reserve {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-family: inherit;
  font-size: var(--btn-font-size);
  font-weight: 700;
  line-height: 1.2;
  border-radius: var(--btn-radius);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: var(--btn-transition);
  min-height: var(--btn-touch-min);
  background: linear-gradient(135deg, #FF006E, #8338EC);
  color: #fff !important;
  box-shadow: 0 4px 20px rgba(255, 0, 110, 0.35);
  letter-spacing: 0.04em;
}
.btn-reserve:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(255, 0, 110, 0.55);
}

.event-btn, .book-btn, .quick-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-family: inherit;
  font-size: var(--btn-font-size);
  font-weight: 700;
  border-radius: var(--btn-radius);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: var(--btn-transition);
  min-height: var(--btn-touch-min);
  background: linear-gradient(135deg, #FF006E, #8338EC);
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(255, 0, 110, 0.3);
}
.event-btn:hover, .book-btn:hover, .quick-action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255, 0, 110, 0.45);
}

/* ─── MOBILE-OPTIMIERUNG ─────────────────────────────────── */
@media (max-width: 600px) {
  .btn, .btn-reserve, .event-btn, .book-btn, .quick-action-btn,
  .filter-btn, .tab-btn, .topbar-btn {
    padding: 9px 16px;
    font-size: 0.85rem;
  }
  
  .btn-lg, .btn-reserve-lg { padding: 12px 22px; font-size: 0.92rem; min-height: 46px; }
  .btn-xl { padding: 14px 28px; font-size: 1rem; min-height: 52px; }
  
  /* Hide-Text-Mobile (nur Icon zeigen) */
  .text-mobile-hide { display: none; }
  .icon-mobile-only { display: inline-flex !important; }
  
  /* Default: icon-only ist sichtbar */
  .icon-only-mobile {
    padding: 0 !important;
    width: 40px !important;
    min-width: 40px !important;
    aspect-ratio: 1;
  }
  .icon-only-mobile span,
  .icon-only-mobile .label-text { display: none; }
}

@media (min-width: 601px) {
  .icon-mobile-only { display: none; }
}

/* ─── GALERIE-TABS Mobile Compact ────────────────────────── */
.gallery-tab, .gallery-filter, .album-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 14px;
  font-size: 0.82rem;
  border-radius: var(--btn-radius);
  border: 1px solid var(--c218-border);
  background: var(--c218-bg-soft);
  color: var(--c218-text);
  cursor: pointer;
  transition: var(--btn-transition);
  white-space: nowrap;
}
.gallery-tab:hover, .gallery-filter:hover, .album-tab:hover {
  background: var(--c218-bg-hover);
  border-color: var(--c218-border-strong);
}
.gallery-tab.active, .gallery-filter.active, .album-tab.active {
  background: var(--c218-pink);
  border-color: var(--c218-pink);
  color: #fff;
  box-shadow: 0 2px 8px rgba(255, 0, 110, 0.3);
}

@media (max-width: 600px) {
  .gallery-tab, .gallery-filter, .album-tab {
    padding: 6px 10px;
    font-size: 0.75rem;
    min-height: 36px;
  }
  /* Auf Mobile nur Icon + Count zeigen, Label schrumpfen */
  .gallery-tab .label-long,
  .gallery-filter .label-long { display: none; }
}

/* ─── ICON-LIBRARY Helper ────────────────────────────────── */
/* Lucide Icons via CDN: <i data-lucide="calendar"></i> */
[data-lucide] {
  display: inline-flex;
  width: 1.1em;
  height: 1.1em;
  vertical-align: middle;
}

/* ═══ END UI-SYSTEM v2 ════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   DESIGN_POLISH_v1 · 10.05.2026 · Premium Animations
   ──────────────────────────────────────────────────────────── */

/* ─── 1. SCROLL-REVEAL (auto via IntersectionObserver) ─── */
[data-reveal]{opacity:0;transform:translateY(36px);transition:opacity 0.8s cubic-bezier(0.22,1,0.36,1),transform 0.8s cubic-bezier(0.22,1,0.36,1)}
[data-reveal].in-view{opacity:1;transform:translateY(0)}
[data-reveal="left"]{transform:translateX(-36px)}
[data-reveal="right"]{transform:translateX(36px)}
[data-reveal="left"].in-view,[data-reveal="right"].in-view{transform:translateX(0)}
[data-reveal="scale"]{transform:scale(0.92)}
[data-reveal="scale"].in-view{transform:scale(1)}

/* Staggered delays (auto via data-reveal-delay="N") */
[data-reveal-delay="1"]{transition-delay:0.1s}
[data-reveal-delay="2"]{transition-delay:0.2s}
[data-reveal-delay="3"]{transition-delay:0.3s}
[data-reveal-delay="4"]{transition-delay:0.4s}
[data-reveal-delay="5"]{transition-delay:0.5s}

/* ─── 2. HERO LOADING-PULSE ─── */
@keyframes c218-hero-pulse{0%,100%{box-shadow:0 0 30px rgba(255,0,110,0.4),0 0 60px rgba(255,0,110,0.15)}50%{box-shadow:0 0 40px rgba(255,0,110,0.6),0 0 80px rgba(255,0,110,0.25)}}
@keyframes c218-shimmer{0%{background-position:-1000px 0}100%{background-position:1000px 0}}
@keyframes c218-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes c218-glow-text{0%,100%{text-shadow:0 0 20px rgba(255,0,110,0.6),0 0 40px rgba(255,0,110,0.3)}50%{text-shadow:0 0 28px rgba(255,0,110,0.8),0 0 56px rgba(255,0,110,0.4)}}

.hero h1{animation:c218-glow-text 4s ease-in-out infinite}
.hero .hero-logo{animation:c218-float 6s ease-in-out infinite}
.hero .btn-primary{animation:c218-hero-pulse 3s ease-in-out infinite}

/* Image-Skeleton beim Laden */
.img-skeleton{background:linear-gradient(90deg,rgba(255,255,255,0.04) 0%,rgba(255,255,255,0.08) 50%,rgba(255,255,255,0.04) 100%);background-size:1000px 100%;animation:c218-shimmer 1.5s infinite linear}

/* ─── 3. MICRO-INTERACTIONS ─── */
/* Card hover lift + glow */
.card-interactive,.cp-card,.event-card,.zimmer-card,.galerie-item,.sauna-type-card{transition:transform 0.3s cubic-bezier(0.22,1,0.36,1),box-shadow 0.3s ease,border-color 0.3s ease}
.card-interactive:hover,.cp-card:hover,.event-card:hover,.zimmer-card:hover,.galerie-item:hover,.sauna-type-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(255,0,110,0.15),0 0 60px rgba(0,201,255,0.06)}

/* Button ripple effect */
.btn{position:relative;overflow:hidden}
.btn::before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:rgba(255,255,255,0.4);transform:translate(-50%,-50%);transition:width 0.5s ease,height 0.5s ease,opacity 0.5s ease;pointer-events:none;opacity:0}
.btn:active::before{width:300px;height:300px;opacity:0;transition:width 0.5s ease,height 0.5s ease,opacity 0.6s ease}

/* Smooth-Scroll global */
html{scroll-behavior:smooth}

/* Link underline animation */
a.fancy-link,.footer-links a{position:relative;display:inline-block;transition:color 0.2s}
a.fancy-link::after,.footer-links a::after{content:"";position:absolute;bottom:-2px;left:0;width:0;height:1px;background:linear-gradient(90deg,#FF006E,#00C9FF);transition:width 0.3s cubic-bezier(0.22,1,0.36,1)}
a.fancy-link:hover::after,.footer-links a:hover::after{width:100%}

/* Cursor-Glow on interactive items */
.glow-on-hover{position:relative;transition:all 0.3s}
.glow-on-hover::after{content:"";position:absolute;inset:-2px;border-radius:inherit;background:linear-gradient(135deg,#FF006E,#00C9FF);opacity:0;z-index:-1;transition:opacity 0.3s;filter:blur(20px)}
.glow-on-hover:hover::after{opacity:0.5}

/* ─── 4. PREMIUM-FOOTER ─── */
.footer-premium{background:linear-gradient(180deg,#0a0612 0%,#04020a 100%);border-top:1px solid rgba(255,0,110,0.15);padding:4rem 0 1.5rem;color:#aaa;position:relative}
.footer-premium::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 10%,rgba(255,0,110,0.6) 50%,transparent 90%)}
.footer-premium .container{max-width:1200px;margin:0 auto;padding:0 1rem}
.footer-grid-premium{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.5rem;margin-bottom:3rem}
.footer-premium h4{color:#fff;font-family:'Playfair Display',serif;font-size:1.1rem;margin-bottom:1rem;letter-spacing:0.02em}
.footer-premium ul{list-style:none;padding:0}
.footer-premium ul li{margin-bottom:0.55rem;font-size:0.88rem}
.footer-premium a{color:#aaa;text-decoration:none;transition:color 0.2s}
.footer-premium a:hover{color:#fff}
.footer-brand-premium img{width:48px;height:48px;border-radius:8px;margin-bottom:0.8rem}
.footer-brand-premium .name{font-family:'Bebas Neue',sans-serif;font-size:1.6rem;color:#fff;letter-spacing:0.06em;margin-bottom:0.3rem}
.footer-brand-premium .tagline{font-style:italic;color:#888;margin-bottom:1rem;font-size:0.92rem}
.footer-brand-premium .addr{color:#bbb;font-size:0.88rem;line-height:1.6;margin-bottom:1rem}
.footer-newsletter{background:rgba(255,255,255,0.03);border:1px solid rgba(255,0,110,0.2);border-radius:10px;padding:1rem;margin-top:1rem}
.footer-newsletter p{font-size:0.82rem;color:#aaa;margin-bottom:0.6rem}
.footer-newsletter form{display:flex;gap:0.4rem}
.footer-newsletter input{flex:1;padding:0.55rem 0.8rem;background:rgba(0,0,0,0.4);border:1px solid rgba(255,255,255,0.1);border-radius:6px;color:#fff;font-size:0.85rem}
.footer-newsletter button{padding:0.55rem 1rem;background:linear-gradient(135deg,#FF006E,#00C9FF);color:#fff;border:0;border-radius:6px;font-weight:700;cursor:pointer;font-size:0.82rem}
.footer-social-premium{display:flex;gap:0.6rem;margin-top:1rem;flex-wrap:wrap}
.footer-social-premium a{width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:50%;font-size:1rem;transition:all 0.2s;text-decoration:none}
.footer-social-premium a:hover{background:linear-gradient(135deg,#FF006E,#00C9FF);border-color:transparent;transform:translateY(-2px) scale(1.05)}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.06);padding-top:1.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;font-size:0.78rem;color:#666}
.footer-bottom .legal-links{display:flex;gap:1.5rem;flex-wrap:wrap}
.footer-bottom .legal-links a{color:#888}

@media(max-width:900px){
  .footer-grid-premium{grid-template-columns:1fr 1fr;gap:1.8rem}
}
@media(max-width:600px){
  .footer-grid-premium{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;text-align:center}
}

/* ─── 5. UX BOOSTERS ─── */
/* Selection-Color */
::selection{background:rgba(255,0,110,0.4);color:#fff}

/* Focus-Outline (Accessibility + schön) */
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #FF006E;outline-offset:3px;border-radius:4px}

/* Scrollbar styling */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:rgba(0,0,0,0.4)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(255,0,110,0.5),rgba(0,201,255,0.4));border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,rgba(255,0,110,0.8),rgba(0,201,255,0.7))}

/* Loading-Indicator (für API-Loads) */
.c218-loader{display:inline-block;width:24px;height:24px;border:3px solid rgba(255,0,110,0.2);border-top-color:#FF006E;border-radius:50%;animation:c218-spin 0.8s linear infinite}
@keyframes c218-spin{to{transform:rotate(360deg)}}

/* === END DESIGN_POLISH_v1 === */