/* Design "neu" (2026-10-17), uebernommen aus dem Gurp-Forum (dort skin-neu.css): Glasflaechen fuer Leisten und
   Kartenknoepfe, helle Creme-Karten mit Glasrand fuer Sheets/Panels/Fenster, dunkelgruene Pillen mit weichem
   Schein, Terrakotta-Verlauf fuer "Jetzt buchen", weisse Rundknoepfe, weiche Eingabefelder.
   Standard auf /; altes Design (ohne diese Datei) unter /alt (server.js). Alle Regeln mit html[data-skin="neu"]. */

html[data-skin="neu"] {
  --sk-glass: rgba(255, 255, 255, .78);
  --sk-glass-strong: rgba(255, 255, 255, .92);
  --sk-line: rgba(30, 34, 27, .08);
  --sk-ink: #1b1f18;
  --sk-orange: #bf4a20;
  --sk-orange-2: #e2683a;
  --sk-green: #3a4233;
  --sk-paper: #fbf9f5;
  --sk-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 18px 40px -18px rgba(30, 34, 27, .35), 0 4px 12px rgba(30, 34, 27, .08);
  --sk-radius: 24px;
}

/* ------------------------------------------------------------ Glas: Kopfleiste, Kartenknoepfe, Menues */
/* Kopfleiste bewusst ohne Glas (Nutzerwunsch 2026-10-17), bleibt wie im alten Design */
@media (max-width: 747.98px) {
  html[data-skin="neu"] .tb-row2,
  html[data-skin="neu"] .site-foot {
    background: var(--sk-glass) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
  }
  html[data-skin="neu"] .tb-row2 { border: 1px solid rgba(255, 255, 255, .7); box-shadow: var(--sk-shadow) !important; }
  html[data-skin="neu"] .site-foot { box-shadow: 0 -1px 0 var(--sk-line) !important; }
  html[data-skin="neu"] .tb-cal-icon { background: rgba(30, 34, 27, .07) !important; }
}
/* Runde Knoepfe (Sprache, Infos, Anmelden mobil), Zoom und Kartenstil: weisses Glas mit Schatten */
@media (max-width: 1023.98px) {
  html[data-skin="neu"] .lang-current { box-shadow: var(--sk-shadow) !important; }
  html[data-skin="neu"] .tb-right .auth-btn:not(.primary):not(.tb-info-btn) {
    background: var(--sk-glass-strong) !important; border: 1px solid rgba(255, 255, 255, .8) !important;
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--sk-shadow) !important;
  }
}
html[data-skin="neu"] .zoom-btns,
html[data-skin="neu"] .ms-toggle,
html[data-skin="neu"] .admin-toggle {
  background: var(--sk-glass) !important; border: 1px solid rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); box-shadow: var(--sk-shadow) !important;
}
html[data-skin="neu"] .zb { border-top-color: var(--sk-line) !important; }
html[data-skin="neu"] .user-dropdown,
html[data-skin="neu"] .lp-info-dropdown,
html[data-skin="neu"] .lang-menu {
  background: var(--sk-glass-strong) !important; border: 1px solid rgba(255, 255, 255, .7) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); box-shadow: var(--sk-shadow) !important;
}
html[data-skin="neu"] .user-dropdown .ud-item:hover, html[data-skin="neu"] .lp-info-dropdown .ud-item:hover { background: rgba(30, 34, 27, .06) !important; }
html[data-skin="neu"] .leaflet-container .leaflet-control-attribution {
  background: var(--sk-glass) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}

/* ------------------------------------------------------------ Schalter: helle Schiene, Balken mit Schein */
html[data-skin="neu"] .tb-chips.seg,
html[data-skin="neu"] .tb-row2 .tb-chips.seg,
html[data-skin="neu"] .seg {
  background: rgba(30, 34, 27, .07) !important; box-shadow: inset 0 1px 2px rgba(30, 34, 27, .06) !important; border: 0 !important;
}
html[data-skin="neu"] .seg-thumb { box-shadow: 0 6px 14px -6px rgba(30, 34, 27, .55) !important; }
html[data-skin="neu"] #ss-elec .seg-thumb, html[data-skin="neu"] #pf-lang-seg .seg-thumb { box-shadow: 0 6px 14px -6px rgba(30, 34, 27, .45) !important; }
html[data-skin="neu"] .tb-dates:hover { background: rgba(30, 34, 27, .05) !important; }

/* Konto-Knoepfe in der Leiste: Registrieren dunkelgruen mit Schein, Avatar mit weissem Ring */
html[data-skin="neu"] .tb-right .auth-btn.primary {
  background: var(--sk-green) !important; box-shadow: 0 6px 14px -6px rgba(30, 34, 27, .6) !important;
}
/* weisser Ring INNEN (wie die Flagge), damit Info, Sprache und Konto gleich gross wirken */
html[data-skin="neu"] .user-badge { border: 3px solid #fff !important; box-sizing: border-box; box-shadow: var(--sk-shadow) !important; }
html[data-skin="neu"] .lang-current, html[data-skin="neu"] .tb-info-btn { box-shadow: var(--sk-shadow) !important; }

/* ------------------------------------------------------------ Sheets, Seitenpanels, Fenster */
html[data-skin="neu"] .overlay {
  background: rgba(30, 34, 27, .38) !important;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
html[data-skin="neu"] .sheet,
html[data-skin="neu"] .sheet-panel,
html[data-skin="neu"] .modal {
  background: linear-gradient(180deg, color-mix(in srgb, var(--sk-green) 6%, var(--sk-paper)) 0, var(--sk-paper) 260px) var(--sk-paper) !important;
  border: 1px solid rgba(255, 255, 255, .8) !important;
  box-shadow: 0 30px 70px -24px rgba(30, 34, 27, .5), 0 0 0 1px rgba(255, 255, 255, .6) inset !important;
}
html[data-skin="neu"] .sheet-head { border-bottom-color: var(--sk-line) !important; }
html[data-skin="neu"] .sb-foot { border-top-color: var(--sk-line) !important; }
html[data-skin="neu"] .modal-title, html[data-skin="neu"] .sb-title, html[data-skin="neu"] .rp-title { color: var(--sk-ink); letter-spacing: -.01em; }
/* Schliessen: weisser Rundknopf */
html[data-skin="neu"] .close-btn.round {
  background: #fff !important; color: var(--sk-ink) !important;
  border: 1px solid var(--sk-line) !important; box-shadow: 0 2px 8px rgba(30, 34, 27, .12);
}
/* Karten in den Panels: weiss mit feinem Rand */
html[data-skin="neu"] .main-card,
html[data-skin="neu"] .form-card,
html[data-skin="neu"] .person-card,
html[data-skin="neu"] .split-card {
  border: 1px solid var(--sk-line); box-shadow: 0 1px 2px rgba(30, 34, 27, .04);
}

/* ------------------------------------------------------------ Knoepfe */
/* Buchen = Haupt-Handlung: Terrakotta-Verlauf wie "Pin hinzufuegen" im Forum */
html[data-skin="neu"] .sb-foot .book-btn:not(:disabled),
html[data-skin="neu"] .book-btn:not(:disabled) {
  background: linear-gradient(135deg, var(--sk-orange-2), var(--sk-orange)) !important;
  box-shadow: 0 6px 12px -8px rgba(191, 74, 32, .55), inset 0 1px 0 rgba(255, 255, 255, .3) !important;
}
html[data-skin="neu"] .btn-primary:not(:disabled),
html[data-skin="neu"] .m-btn:not(.secondary) {
  background: var(--sk-green) !important; box-shadow: 0 6px 14px -6px rgba(30, 34, 27, .6) !important;
}
html[data-skin="neu"] .m-btn.secondary {
  background: #fff !important; color: var(--sk-ink) !important; border: 1px solid rgba(30, 34, 27, .16) !important; box-shadow: none !important;
}

/* ------------------------------------------------------------ Eingabefelder */
html[data-skin="neu"] :is(.sheet, .sheet-panel, .modal) :is(input[type=text], input[type=email], input[type=password], input[type=date], input[type=tel], select, textarea) {
  background-color: #fff !important; border: 1px solid rgba(30, 34, 27, .14) !important; border-radius: 14px !important;
  box-shadow: 0 1px 2px rgba(30, 34, 27, .04) !important;
}
html[data-skin="neu"] :is(.sheet, .sheet-panel, .modal) :is(input, select, textarea):focus-visible {
  outline: none !important; border-color: var(--sk-green) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sk-green) 22%, transparent) !important;
}

/* ------------------------------------------------------------ Bewegung reduzieren */
@media (prefers-reduced-motion: reduce) {
  html[data-skin="neu"] * { transition-duration: 0s !important; }
}

/* Ausgewaehlter Stellplatz: weisser Abstand + Terrakotta-Ring mit sanftem Puls (wie der aktive Pin im Forum) */
html[data-skin="neu"] .pin.selected .pc {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4.5px var(--sk-orange), 0 3px 8px rgba(30, 34, 27, .35) !important;
  animation: sk-pitch-ring 1.8s ease-out infinite;
}
@keyframes sk-pitch-ring {
  0% { box-shadow: 0 0 0 2px #fff, 0 0 0 4.5px var(--sk-orange), 0 3px 8px rgba(30, 34, 27, .35), 0 0 0 4.5px rgba(191, 74, 32, .5); }
  100% { box-shadow: 0 0 0 2px #fff, 0 0 0 4.5px var(--sk-orange), 0 3px 8px rgba(30, 34, 27, .35), 0 0 0 11px rgba(191, 74, 32, 0); }
}
@media (prefers-reduced-motion: reduce) { html[data-skin="neu"] .pin.selected .pc { animation: none; } }