@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap");

/* =====================================================================
   Zynotic – SimplyBook.me Theme (an zynotic.de angelehnt)
   Ink #0c0d0f / #141619 / #1c1f23 · Paper #f2f1ed · Signal #c6f135 / #d6f86a
   Gilt für die Buchungsseite zynotic.simplybook.it und das Widget auf
   zynotic.de/termin. Einfügen unter Einstellungen → Benutzerdefiniertes CSS.
   ===================================================================== */

:root {
  --z-ink: #0c0d0f;
  --z-ink-2: #141619;
  --z-ink-3: #1c1f23;
  --z-paper: #f2f1ed;
  --z-muted: rgba(242, 241, 237, 0.65);
  --z-faint: rgba(242, 241, 237, 0.32);
  --z-line: rgba(255, 255, 255, 0.08);
  --z-signal: #c6f135;
  --z-signal-soft: #d6f86a;
  --z-radius: 16px;
}

/* ---------- Schrift & Grundfarben ---------- */
html, body, #main, button, input, select, textarea, .btn, .nav, .section,
body *:not(.fa):not(.fi):not([class*="flaticon"]):not([class*="fa-"]):not(.iti__flag) {
  font-family: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif !important;
}
html, body, #main, #main-content, .sb-layout {
  background: var(--z-ink) !important;
  color: var(--z-paper) !important;
}
body { -webkit-font-smoothing: antialiased; }
a, a:hover, a:focus { color: var(--z-paper); }
::selection { background: var(--z-signal); color: var(--z-ink); }
h1, h2, h3, h4, .title-main, .title-section, .title-sub, .title-small, .cap {
  color: var(--z-paper) !important;
  letter-spacing: -0.02em;
}

/* ---------- Kopfzeile & Menü ---------- */
header, #header, header.web {
  background: rgba(12, 13, 15, 0.92) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--z-line) !important;
  box-shadow: none !important;
}
#header .nav-item a, header .nav a, .menu-item a {
  color: var(--z-muted) !important;
  border-color: transparent !important;
  transition: color 0.2s;
}
#header .nav-item.active a, #header .nav-item a:hover, header .nav a:hover, .menu-item.active a {
  color: var(--z-paper) !important;
  border-bottom-color: var(--z-signal) !important;
}
.nav-trigger, .nav-trigger.btn, .btn--phantom-cart {
  background: var(--z-ink-3) !important;
  border: 1px solid var(--z-line) !important;
  color: var(--z-paper) !important;
  border-radius: 12px !important;
}
.nav-trigger .fa { color: var(--z-paper) !important; }
/* Aufgeklapptes Menü auf dem Handy */
.nav-wrapper, .nav-wrapper .nav, header .nav { background: transparent !important; }
@media (max-width: 991px) {
  .nav-wrapper.active, .nav-wrapper.active .nav, .nav-wrapper.open, .nav-wrapper.open .nav {
    background: var(--z-ink-2) !important;
  }
}

/* ---------- Startbereich (ohne Stockfoto) ---------- */
#main-buttons, .default-bg {
  background: var(--z-ink) !important;
  background-image: radial-gradient(60% 80% at 50% 0%, rgba(198, 241, 53, 0.10), transparent 70%) !important;
  border-bottom: 1px solid var(--z-line);
}
@media (max-width: 767px) {
  #main-buttons, #main-buttons .wrapper, #main-buttons .inner { min-height: 0 !important; height: auto !important; }
  #main-buttons { padding: 48px 0 40px !important; }
}
#main-buttons .company-name, .company-name {
  display: inline-flex !important;
  color: var(--z-paper) !important;
  font-weight: 600 !important;
  letter-spacing: -0.035em !important;
  text-transform: none !important;
}
#main-buttons .company-name::after {
  content: ".";
  color: var(--z-signal);
}

/* ---------- Buttons ---------- */
.btn, .btn.custom, .btn a, .btn.custom a, button.btn, .btn-primary, .sb-book-btn-container .btn,
.buttons-container .btn, input[type="submit"] {
  border-radius: 999px !important;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.1s;
}
.btn.book, .btn.book a, .sb-book-btn-container .btn, .buttons-container .btn, .btn-primary,
button[type="submit"], .book-btn-container .btn, .btn.select-item, .btn.btn-select {
  background: var(--z-signal) !important;
  border-color: var(--z-signal) !important;
  color: var(--z-ink) !important;
  font-weight: 600 !important;
}
.btn.book:hover, .btn.book a:hover, .sb-book-btn-container .btn:hover, .buttons-container .btn:hover,
.btn-primary:hover, button[type="submit"]:hover {
  background: var(--z-signal-soft) !important;
  border-color: var(--z-signal-soft) !important;
}
.btn.book a::after, .btn.book .fa { color: var(--z-ink) !important; }
.btn.map, .btn.map a {
  background: transparent !important;
  border: 1px solid rgba(242, 241, 237, 0.25) !important;
  color: var(--z-paper) !important;
}
.btn.map:hover { border-color: var(--z-signal) !important; }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--z-signal) !important;
  outline-offset: 2px;
}

/* ---------- Karten / Abschnitte ---------- */
.section, .item-container, .modal-content, .full-info, .service-item, .provider-item {
  background: var(--z-ink-2) !important;
  color: var(--z-paper) !important;
  border: 1px solid var(--z-line) !important;
  border-radius: var(--z-radius) !important;
  box-shadow: none !important;
}
.section .section, .section .item-container, .section .service-item, .section .provider-item {
  border: 0 !important;
  background: transparent !important;
}
.calendar, .calendar *, .weeks-date, .booking-info, .booking-info--item, .booking-overview,
.current-booking-info, .detail-step-wrap, .step-content, .overview, .tab, .section-pd {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
table, tr, td, th { background: transparent !important; border-color: var(--z-line) !important; }
table { border: 0 !important; }
.txt, .info, .excerpt-info, .short, .overview p, .booking-info--item, .date-line, .date-line--caption,
.control-label, .label, label, p, td, th, li {
  color: var(--z-muted) !important;
}
.overview strong, .booking-info--item strong, b, strong { color: var(--z-paper) !important; }
.read-more, .read-more a { color: var(--z-signal) !important; }

/* Öffnungszeiten & Kontakt auf der Startseite */
#index_working_hours_part td:first-child, .working-hours .day, .day { color: var(--z-paper) !important; }
.phone a, .emails a, .info a, .fa-phone, .fa-at, .fa-map-marker { color: var(--z-signal) !important; }
.map, #map, .leaflet-container, .maplibregl-map { border-radius: var(--z-radius) !important; overflow: hidden; }

/* ---------- Schritt-Leiste ---------- */
.booking-info .step_info_item, .step_info_item, .title-sub {
  background: var(--z-ink-3) !important;
  color: var(--z-paper) !important;
  border: 0 !important;
}
.step_info_item.active, .step_info_item.active * {
  background: var(--z-signal) !important;
  color: var(--z-ink) !important;
}
.back-button, [class*="back"] a, .fa-angle-left, .fa-angle-right { color: var(--z-paper) !important; }

/* ---------- Kalender ---------- */
.calendar .header, .calendar .weeks-name, .calendar .weeks-name * {
  background: transparent !important;
  color: var(--z-muted) !important;
  border-color: var(--z-line) !important;
}
.calendar .header .fa, .calendar .header a { color: var(--z-signal) !important; }
.calendar .weeks-date .day-off, .calendar .day-off, .calendar .prev-or-next-month, .calendar .is-holiday {
  color: rgba(242, 241, 237, 0.22) !important;
  background: transparent !important;
}
.calendar .day-on, .calendar .sb-available-date, .calendar .weeks-date .day-on {
  color: var(--z-paper) !important;
  background: transparent !important;
  font-weight: 500 !important;
  border-radius: 999px !important;
}
.calendar .day-on:hover { background: var(--z-ink-3) !important; }
.calendar .today { box-shadow: inset 0 0 0 1px rgba(242, 241, 237, 0.35) !important; border-radius: 999px !important; }
.calendar .selected, .calendar .day-on.selected, .calendar .selected * {
  background: var(--z-signal) !important;
  color: var(--z-ink) !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
}

/* ---------- Zeitfenster ---------- */
.slot, .slot .sb-cell, .sb-cell.free, .timeline-wrapper .slot a, .slots-view .slot {
  background: var(--z-ink-3) !important;
  color: var(--z-paper) !important;
  border: 1px solid var(--z-line) !important;
  border-radius: 999px !important;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.slot:hover, .slot .sb-cell:hover, .sb-cell.free:hover {
  border-color: var(--z-signal) !important;
}
.slot.selected, .slot .sb-cell.selected, .sb-cell.selected {
  background: var(--z-signal) !important;
  color: var(--z-ink) !important;
}
.time-legend .circle, .time-legend .available .circle { background: var(--z-ink-3) !important; border: 1px solid var(--z-signal) !important; }
.time-legend, .time-legend * { color: var(--z-muted) !important; }

/* ---------- Formular ---------- */
.form-control, input[type="text"], input[type="email"], input[type="tel"], textarea, select, .iti__tel-input {
  background: var(--z-ink) !important;
  color: var(--z-paper) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
.form-control:focus, input:focus, textarea:focus { border-color: var(--z-signal) !important; }
.form-control::placeholder, input::placeholder, textarea::placeholder { color: var(--z-faint) !important; }
.iti__selected-country, .iti__country-container { background: transparent !important; }
.iti__dropdown-content, .iti__country-list { background: var(--z-ink-2) !important; color: var(--z-paper) !important; }
.required::after, .control-label .required, label .required, [class*="required"] sup { color: var(--z-signal) !important; }
.custom-checkbox .custom-label, .form-group--terms, .promotions-letter-flag, .license-links-container,
.custom-checkbox label, .form-group--terms * {
  color: var(--z-muted) !important;
  font-weight: 400 !important;
}
.form-group--terms a, .license-links-container a { color: var(--z-paper) !important; text-decoration: underline; }
input[type="checkbox"] { accent-color: var(--z-signal); }
.section-divider { border-color: var(--z-line) !important; background: var(--z-line) !important; }

/* ---------- Hinweise / Popups ---------- */
.modal-content, .modal-header, .modal-body, .modal-footer, .gdpr-popup, .cookies {
  background: var(--z-ink-2) !important;
  color: var(--z-paper) !important;
  border-color: var(--z-line) !important;
}
.modal-backdrop.in { opacity: 0.7 !important; }
.alert, .message { background: var(--z-ink-3) !important; color: var(--z-paper) !important; border-color: var(--z-line) !important; }

/* ---------- Fuß & Hilfsknöpfe ---------- */
footer, footer *, .copyright, .copyright *, .links { background: transparent !important; color: var(--z-faint) !important; }
footer a, .copyright a { color: var(--z-muted) !important; }
.scroll-top-button, .scroll-top-button.show {
  background: var(--z-ink-3) !important;
  color: var(--z-paper) !important;
  border: 1px solid var(--z-line) !important;
}

/* ---------- Firmenbeschreibung (HTML aus den Firmendaten) ---------- */
.z-about { color: var(--z-muted); line-height: 1.65; font-size: 15px; }
.z-about .z-lead { color: var(--z-paper) !important; font-size: 17px; line-height: 1.55; margin: 0 0 22px; }
.z-about h3 { font-size: 15px !important; font-weight: 600 !important; margin: 22px 0 10px !important; color: var(--z-paper) !important; }
.z-about ol, .z-about ul { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.z-about li::marker { content: "" !important; }
.z-about li { position: relative; list-style: none !important; padding-left: 30px !important; margin: 0 0 10px !important; color: var(--z-muted) !important; }
.z-about .z-steps { counter-reset: z; }
.z-about .z-steps li::before {
  counter-increment: z; content: "0" counter(z);
  position: absolute; left: 0; top: 1px;
  font: 600 12px/1.6 ui-monospace, "Geist Mono", monospace; color: var(--z-signal);
}
.z-about .z-list li::before {
  content: ""; position: absolute; left: 4px; top: 9px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--z-signal);
}
.z-about .z-more { margin: 20px 0 0; }
.z-about .z-more a { color: var(--z-signal) !important; font-weight: 600; text-decoration: none; }
.z-about .z-more a:hover { text-decoration: underline; }

/* ---------- Reste der Standardfarben ---------- */
#booking_info nav, .booking-info nav, nav { background: transparent !important; }
.step_info_item::after, .step_info_item.active::after, .step_info_item::before {
  background: var(--z-ink) !important;
}
.read-more { background: var(--z-ink-2) !important; }
.read-more::before {
  background: linear-gradient(90deg, rgba(20, 22, 25, 0) 0, var(--z-ink-2) 68%, var(--z-ink-2)) !important;
}