/* ============================================================
   Insy Reception — Globale CSS
   Schriften lokal: assets/schriften/
   ============================================================ */

/* Bis zum 29.09.2026 stand hier ein @import auf das Schriften-CDN. Damit holte
   JEDER Seitenaufruf die Schrift bei einem Dritten und gab dessen IP-Adresse
   preis, bevor der Besucher irgendetwas getan hatte -- auf der Landingpage
   genauso wie auf der Buchungsseite. Die Dateien liegen seitdem im Repo;
   erzeugt und nachpruefbar mit tools/assets-holen.mjs --pruefen. */
@import url('assets/schriften/ui.css');

/* ============================================================
   CSS Variablen
   ============================================================ */
:root {
  --tp:     #4a1c6b;
  --tp-txt-rgb: 74,28,107;
  --tp-txt: #4a1c6b;  /* --tp als Schrift, siehe insyLesbarAuf */   /* Primär Lila */
  --tpl:    #6b3fa0;
  --tpl-txt:#6b3fa0;  /* --tpl als Schrift, siehe insyDeriveBrandVars */
  --tpp:    #f0eaf7;   /* Lila sehr hell */
  --tpm:    #5a2d82;   /* Lila mittel (Buttons, Gradient-Ende) */
  --tpd:    #3d1568;   /* Lila dunkel (Gradient-Start) */
  --tp-rgb: 74,28,107; /* Primär als r,g,b — für rgba(var(--tp-rgb),.x) */
  --tg:     #c9a84c;
  --tg-txt: #9a7200;  /* Akzent als Schrift, siehe insyLesbarAuf */   /* Gold (Akzent) */
  --tgl:    #e8d08a;   /* Gold hell */
  --tgp:    #fdf8ec;   /* Gold sehr hell */
  --tg-rgb: 201,168,76;/* Akzent als r,g,b */
  --insy-gold: #c9a84c; /* Insy-Branding (Logo) — NIE vom Akzent gethemt */
  --td:     #1a0a2e;   /* Dunkel */
  --bg:     #f5f2f8;   /* Seitenhintergrund */
  --border: #e8e0f0;   /* Border */
  --muted:  #7a6a8a;   /* Gedämpft */
  --danger: #c0392b;
  --success: #27ae60;
  /* Auswahl-Gruen: Standard fuer ALLES, was gewaehlt ist — Team-Kachel, Tag im
     Kalender, Zeitfenster, Fortschrittsanzeige (Entscheidung 14.09.2026).
     Dunkler als das rgb(0,205,0) der Uiverse-Vorlage, weil die Schrift auf
     gewaehlten Flaechen weiss ist: auf dem hellen Ton ergab Weiss 2,16:1 und
     war unlesbar, auf diesem 4,53:1 (gemessen 14.09.2026). */
  --sel:     rgb(0,138,0);
  --sel-rgb: 0,138,0;
  /* Dunkle Stufe fuer Verlaeufe auf gruenen Knoepfen. Heller als --sel darf
     ein Verlauf nicht werden, sonst faellt die weisse Schrift unter 4,5:1:
     rgb(0,168,0) ergaebe nur noch 3,18:1 (gemessen 14.09.2026). */
  --sel-dark: rgb(0,110,0);
  /* Schrift auf Flaechen in der rohen Markenfarbe (--tp). Wird von
     insyDeriveBrandVars zur Laufzeit ueberschrieben; dieser Wert gilt fuer
     das Standard-Lila, das dunkel genug fuer weisse Schrift ist. */
  --on-tp:  #ffffff;
  --on-tp-rgb: 255,255,255;
  --white:  #ffffff;
  --radius: 16px;
  --radius-sm: 10px;
}

/* ============================================================
   Kanon — Merkmale nach 219_wertekanon (entschieden 12.09.2026)
   ============================================================
   Übergangsskalen: so gewählt, dass beim Aufräumen der Seiten nichts sichtbar
   wird — jeder häufige Bestandswert ist eine Stufe. Die knappere Zielskala
   kommt erst mit der Designentscheidung; dann ändern sich hier Werte, nicht
   Namen. Die 26 Merkmale darüber bleiben unverändert; --radius und
   --radius-sm sind ab jetzt Aliasse auf die Skala.
   Noch benutzt sie keine Seite (Schritt B). Ab Schritt C ersetzen sie die
   Inline-Werte, Seite für Seite. */
:root {
  /* Eckenradien — 6 · 8 · 10 · 12 · 16 · rund. 50 % (Kreis) ist Geometrie,
     kein Merkmal. */
  --radius-xs: 6px;      /* Felder, Chips, kleine Marken */
  --radius-s:  8px;      /* kleine Knöpfe, Menüpunkte */
  --radius-m:  10px;     /* Knöpfe, Tabellenzeilen — bisher --radius-sm */
  --radius-l:  12px;     /* Karten, Kacheln */
  --radius-xl: 16px;     /* große Karten, Fenster — bisher --radius */
  --radius-round: 999px; /* Pillen */

  /* Abstände — 2 · 4 · 6 · 8 · 10 · 12 · 14 · 16 · 20 · 24 · 32.
     Ab 40px ist es Seitenlayout und bleibt ohne Merkmal. */
  --space-1:  2px;
  --space-2:  4px;
  --space-3:  6px;
  --space-4:  8px;
  --space-5:  10px;
  --space-6:  12px;
  --space-7:  14px;
  --space-8:  16px;
  --space-9:  20px;
  --space-10: 24px;
  --space-11: 32px;

  /* Schriftgrößen — 10 · 11 · 12 · 13 · 14 · 15 · 16 · 18 · 20, dazu drei
     Titelstufen. 9px wird beim Aufräumen zu --text-1 (Entscheidung S1). */
  --text-1:  10px;   /* Kleinstmarken */
  --text-2:  11px;   /* Feldbeschriftung */
  --text-3:  12px;   /* Nebentext */
  --text-4:  13px;   /* Fließtext, Tabellenzeile */
  --text-5:  14px;   /* Knopftext */
  --text-6:  15px;
  --text-7:  16px;   /* Eingabefelder (unter 16px zoomt iOS hinein), Kartentitel */
  --text-8:  18px;
  --text-9:  20px;   /* Bestätigung */
  --text-title-s: 22px;
  --text-title-m: 26px; /* Logo-Name, Seitentitel */
  --text-title-l: 32px;

  /* Farbrollen — 15 neue zu den 13 bestehenden (--tp…, --tg…, --td, --bg,
     --border, --muted, --white, --danger, --success). Jeder Wert ist der,
     der heute am häufigsten vorkommt; die übrigen desselben Sinns fallen
     beim Aufräumen darauf (219, Abschnitt 4). */
  --surface-2:      #f2ecfb; /* Zeile beim Überfahren, "noch offen" */
  --border-strong:  #c8bcd8; /* Trennlinien, gesperrte Elemente */
  --done:           #e5e5e5; /* erledigt, ausgegraut */
  --danger-strong:  #a93226; /* Überfahren, Balken */
  --danger-bg:      #fdecea;
  --danger-border:  #f5b7b1;
  --warning:        #e67e22; /* Text, Punkte */
  --warning-strong: #b8860b; /* Balken am unteren Rand */
  --warning-bg:     #fdf6e3; /* neu vergeben: es gab keine deckende Warnfläche */
  --success-strong: #1e7a3c; /* Schrift auf hell */
  --success-bg:     #f0faf4;
  --success-border: #a8e6bf;

  /* Durchscheinend — Weiß auf Markenfläche (vier Stufen), Marke auf hell
     (drei Stufen), Abdunkelung hinter Fenstern. */
  --on-tp-faint: rgba(var(--on-tp-rgb), .1);  /* Rahmen, Flächen im Kopf */
  --on-tp-soft:  rgba(var(--on-tp-rgb), .25); /* Chips */
  --on-tp-muted: rgba(var(--on-tp-rgb), .55); /* Nebentext im Kopf */
  --tp-faint:  rgba(var(--tp-txt-rgb), .06);
  --tp-soft:   rgba(var(--tp-txt-rgb), .13);  /* Fokus, Überfahren */
  --tp-strong: rgba(var(--tp-txt-rgb), .3);
  --overlay:   rgba(20, 8, 40, .55);

  /* Schatten — vier Stufen. Leuchten für Pflichtpunkte bleibt an den
     Zustandsfarben. */
  --shadow-sm:    0 1px 3px rgba(var(--tp-txt-rgb), .07);
  --shadow-md:    0 4px 14px rgba(var(--tp-txt-rgb), .12);
  --shadow-lg:    0 18px 50px rgba(0, 0, 0, .3);
  --shadow-focus: 0 0 0 3px rgba(var(--tp-txt-rgb), .13);

  /* Bewegung — Übergang: .15s für Farbe und Rahmen, .2s für Bewegung
     (Ziel .25s). */
  --t-fast:   .15s;
  --t-normal: .2s;

  /* Schriftfamilien — welche Schrift hinter --font-ui steht, entscheidet die
     Designphase; die Salon-Schriftwahl der Buchungsseite setzt dann dieses
     Merkmal zur Laufzeit. */
  --font-ui:      'Segoe UI', system-ui, sans-serif;
  --font-display: 'Playfair Display', serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Die beiden alten Radius-Merkmale zeigen auf die Skala. Gleicher Wert wie
   bisher — nur die Quelle ist jetzt eine. */
:root {
  --radius:    var(--radius-xl);
  --radius-sm: var(--radius-m);
}

/* ============================================================
   Reset
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ============================================================
   Basis
   ============================================================ */
html, body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  color: var(--td);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--tpl-txt);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ============================================================
   Logo / Branding
   ============================================================ */
.logo {
  text-align: center;
  margin-bottom: 32px;
}

.logo-label {
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--tg);
  font-weight: 600;
  text-transform: uppercase;
}

.logo-name {
  font-size: 26px;
  font-weight: 600;
  color: var(--white);
  margin-top: 6px;
}

.logo-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, .5);
  margin-top: 6px;
}

/* ============================================================
   Card
   ============================================================ */
.card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 36px 32px;
  width: 100%;
  text-align: center;
}

.card-login {
  max-width: 380px;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--td);
  margin-bottom: 6px;
}

.card-sub {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 28px;
}

/* ============================================================
   Panel Card — geteilt zwischen configuration.html & manager.html
   ============================================================ */
.panel-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(74, 28, 107, .05);
}

.panel-card-title {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tpl-txt);
  font-weight: 600;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.panel-card-title svg {
  flex-shrink: 0;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  border: none;
  transition: all .15s;
}

.btn-primary {
  background: var(--tp);
  color: var(--white);
}

.btn-primary:hover {
  background: var(--tpl);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(74, 28, 107, .2);
}

.btn-google {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 20px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: 1.5px solid var(--border);
  font-family: inherit;
  background: var(--white);
  color: var(--td);
  transition: all .15s;
}

.btn-google:hover {
  border-color: var(--tpl);
  background: var(--tpp);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(74, 28, 107, .12);
}

.btn-google:disabled,
.btn:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}

/* ============================================================
   Fehler / Hinweise
   ============================================================ */
.error {
  font-size: 12px;
  color: #c0392b;
  margin-top: 12px;
  min-height: 16px;
}

.note {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.6;
  margin-top: 20px;
}

.note a {
  color: var(--tpl-txt);
  text-decoration: none;
}

/* ============================================================
   Header — Branding (Logo/Name/Chips) geteilt zwischen booking.html & success.html
   Äußerer Rahmen (.success-header) NUR für success.html — booking.html hat eigenen .booking-header
   ============================================================ */
.success-header {
  background: linear-gradient(135deg, var(--tpd) 0%, var(--tpm) 60%, var(--tp) 100%);
  padding: 14px 20px;
  width: calc(100% + 72px);
  position: relative;
  border-radius: 20px 20px 0 0;
  /* 12 statt 24: zwischen "mehr" und der Ueberschrift standen 38px Luft
     (14px Innenabstand unten + 24px Aussenabstand), gemessen 15.09.2026. */
  margin: -40px -36px 12px;
  text-align: center;
}
.success-header-inner { display: flex; align-items: flex-start; justify-content: center; gap: 16px; }
.success-header-left  { flex: 1; min-width: 0; text-align: center; }
.success-header-name  { font-size: 18px; font-weight: 600; color: var(--on-tp); margin-bottom: 5px; line-height: 1.2; }
.success-header-meta  { display: flex; flex-direction: column; gap: 5px; align-items: center; }
.success-header-meta-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.success-header-chip  { font-size: 12px; color: var(--on-tp); display: flex; align-items: center; gap: 5px; }
.success-header-hours-inline { cursor: pointer; position: relative; user-select: none; }
.success-header-hours-inline:hover { color: var(--on-tp); }

/* ============================================================
   Bemerkung im Kopf als Akkordeon "mehr" — EINZIGE QUELLE
   (geteilt: booking.html & success.html, Entscheidung 15.09.2026).
   Gleiche Mechanik wie das Storno-Akkordeon der Buchungsuebersicht:
   details/summary mit eigenem Pfeil statt des Browser-Dreiecks.
   Ausgeblendet, bis der Salon eine Bemerkung gepflegt hat — das Einblenden
   uebernimmt die jeweilige Seite.
   ============================================================ */
.hd-note { display: none; margin-top: 7px; font-size: 11px; color: var(--on-tp); }
.hd-note-title { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--on-tp); opacity: .85; transition: opacity .15s; }
.hd-note-title::-webkit-details-marker { display: none; }
.hd-note-title:hover { opacity: 1; }
.hd-note-title::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-top: -3px; transition: transform .2s; }
.hd-note[open] .hd-note-title::after { transform: rotate(-135deg); margin-top: 2px; }
.hd-note-text { margin-top: 6px; line-height: 1.5; white-space: pre-line; word-break: break-word; max-width: 520px; }

/* ============================================================
   Zeilen der Buchungsuebersicht — EINZIGE QUELLE
   (geteilt: booking.html & success.html, Entscheidung 15.09.2026).
   Die Erfolgsseite zeigt dieselbe Ansicht wie die Uebersicht vor dem Buchen:
   links Leistung mit Variante darunter, rechts der Mitarbeiter; darunter
   Uhrzeit, Datum und die Betraege als eigene Zeilen.
   ============================================================ */
.sumrow { display: flex; justify-content: space-between; align-items: center; padding: 6px 13px; font-size: 12px; }
.sumrow:last-child { border-bottom: none; }
.sl-lbl { color: var(--muted); }
/* Service-Zeile: links der Servicename und darunter die gewaehlte Variante,
   rechts der Mitarbeiter, der sie erbringt (Entscheidung 13.09.2026). */
.sl-zwei { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.sl-t { color: var(--td); font-weight: 500; overflow-wrap: anywhere; }
.sl-u { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.sl-val { font-weight: 500; color: var(--td); text-align: right; }
.sl-val.emp { color: #ccc; font-weight: 400; }
/* Nachricht des Kunden (Entscheidung 17.09.2026): Fliesstext statt Wertspalte —
   Beschriftung oben, Text darunter ueber die volle Breite. In der normalen Zeile
   wuerden 500 Zeichen die Beschriftung zusammenquetschen. pre-wrap behaelt die
   Absaetze, die der Kunde selbst gesetzt hat. */
.sumrow-text { flex-direction: column; align-items: flex-start; gap: 3px; }
.sumrow-text .sl-val { text-align: left; font-weight: 400; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 768px) {
  .sumrow { font-size: 13px; padding: 8px 13px; }
}

/* ============================================================
   Öffnungszeiten-Dropdown — EINZIGE QUELLE (geteilt: booking.html & success.html,
   mobile wie desktop). Das Markup erzeugt utils.js -> renderWorkingHours mit den
   Klassen hd-hour-row / hd-hour-today / hd-hour-closed. Das Dropdown-Element trägt
   die Klasse hd-hours-drop.
   ============================================================ */
.hd-hours-drop {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  min-width: 230px;
  z-index: 300;
  box-shadow: 0 4px 16px rgba(var(--tp-txt-rgb),.12);
  display: none;
}
/* Zwei fluchtende Spalten: links Wochentage, rechts Uhrzeiten — beide linksbündig.
   Eine Zeitspanne ('09:00 – 18:00') steht in EINER Zeile; mehrere Spannen eines
   Tages bleiben untereinander (formatHours trennt sie mit <br>). */
.hd-hour-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 14px;
  font-size: 12px;
  color: var(--muted);
  padding: 3px 0;
}
.hd-hour-row > span { text-align: left; }
.hd-hour-row > span:last-child { font-variant-numeric: tabular-nums; }
.hd-hour-today  { color: var(--tpd); font-weight: 600; }
.hd-hour-closed { color: #c8bcd8; }

/* ============================================================
   Bestätigung / Success
   ============================================================ */
.check-wrap { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg,rgba(var(--tg-rgb),0.35),rgba(var(--tg-rgb),0.15)); border: 2px solid rgba(var(--tg-rgb),0.55); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
/* Linksbuendig und in Grossbuchstaben (Entscheidung 15.09.2026). Der
   Aussenabstand unten ist von 20 auf 12 gekuerzt — zwischen Kopfunterkante
   und erster Leistung standen 95px. */
.conf-title { font-size: 20px; font-weight: 400; color: var(--on-tp); margin: 0 0 12px; text-align: left; text-transform: uppercase; letter-spacing: .02em; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 24px; }
.pill  { display: inline-flex; align-items: center; font-size: 12px; padding: 5px 12px; border-radius: 99px; background: rgba(255,255,255,.12); color: var(--on-tp); }
.pill.gold { background: rgba(var(--tg-rgb),.2); color: #e8d08a; border: 1px solid rgba(var(--tg-rgb),.3); }

/* ============================================================
   Detail Rows
   ============================================================ */
.details { background: rgba(0,0,0,.15); border-radius: 12px; padding: 14px 16px; margin-bottom: 24px; text-align: left; }
.detail-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: 12px; }
.detail-row:not(:last-child) { border-bottom: 1px solid rgba(255,255,255,.06); }
.detail-label { color: var(--on-tp); }
.detail-value { color: var(--on-tp); font-weight: 500; text-align: right; }

/* ============================================================
   Kalender / Cancel / New Booking Buttons
   ============================================================ */
.cal-btn { display: inline-flex; align-items: center; gap: 6px; background: rgba(var(--tg-rgb),.15); border: 1.5px solid rgba(var(--tg-rgb),.35); border-radius: 10px; padding: 10px 20px; font-size: 13px; color: #e8d08a; cursor: pointer; font-family: inherit; transition: all .2s; text-decoration: none; margin-top: 12px; }
.cal-btn:hover { background: rgba(var(--tg-rgb),.25); border-color: rgba(var(--tg-rgb),.6); }
.cancel-btn { display: inline-flex; align-items: center; gap: 6px; background: #c0392b; border: 1.5px solid #c0392b; border-radius: 10px; padding: 7px 16px; font-size: 11px; color: #fff; font-weight: 600; cursor: pointer; font-family: inherit; transition: all .2s; }
.cancel-btn:hover { background: #a93226; border-color: #a93226; }
.new-link { display: inline-flex; background: #2e8b57; color: #fff; border: 1.5px solid #2e8b57; border-radius: 10px; padding: 10px 22px; font-size: 14px; font-weight: 600; text-decoration: none; transition: all .2s; }
.new-link:hover { background: #256e46; }

/* ============================================================
   Nav Logo — geteilt zwischen configuration.html & manager.html
   ============================================================ */
.nav-logo {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: .01em;
  text-transform: none;
  line-height: 1;
}

.nav-logo span {
  color: var(--insy-gold);
}

.nav {
  background: linear-gradient(135deg, var(--tpd) 0%, var(--tpm) 60%, var(--tp) 100%);
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 0 rgba(255,255,255,.06), 0 8px 32px rgba(0,0,0,.28);
}

.nav-brand {
  padding: 16px 24px 16px 0;
  margin-right: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: 100%;
}

/* ============================================================
   Field — geteilt zwischen configuration.html & booking.html
   ============================================================ */
.field {
  margin-bottom: 8px;
}

.field label {
  display: block;
  font-size: 11px;
  color: #6a5a7a;
  margin-bottom: 3px;
  font-weight: 500;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  border: 1.5px solid #e0d8ec;
  /* 7px war ein Einzelwert, der zu nichts sonst passte. 6px fluchtet mit den
     Chips und den kompakten Eingabefeldern der Konfigurationsseite. */
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 16px;
  color: var(--td);
  background: #fff;
  font-family: inherit;
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(var(--tp-txt-rgb),.07), inset 0 1px 2px rgba(0,0,0,.03);
  transition: border-color .2s, box-shadow .2s;
  outline: none;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--tp);
  box-shadow: 0 0 0 3px rgba(var(--tp-txt-rgb),.13), 0 1px 3px rgba(var(--tp-txt-rgb),.07);
}


/* ============================================================
   Bausteine aus Vorlagen (Uiverse.io, MIT-Lizenz)
   ============================================================
   Vom Betreiber ausgewaehlt. Farben und Masse stehen so in der Vorlage und
   sind bewusst nicht an den Kanon angepasst (Entscheidung 13.09.2026). Der
   jeweilige Lizenzvermerk gehoert zum Block und zieht mit ihm um. */

/* Ladeanzeige nach dem Google-Login: fuenf pulsierende Punkte in den
   Google-Farben. Klassen hier mit auth- vorangestellt, damit sie mit nichts
   auf der Seite kollidieren. Die Farben sind bewusst fest — es ist die
   Google-Marke, keine Salonfarbe. Nur transform und opacity animiert, das ist
   fuer den Browser die guenstigste Bewegung.

   Vorlage von Uiverse.io, uebernommen unter der MIT-Lizenz. Dieser Vermerk
   muss bei dem Block bleiben, auch wenn er umzieht:

   Copyright - 2026 Fadhilmagass (Fadhil Muhammad Agast)

   Permission is hereby granted, free of charge, to any person obtaining a
   copy of this software and associated documentation files (the "Software"),
   to deal in the Software without restriction, including without limitation
   the rights to use, copy, modify, merge, publish, distribute, sublicense,
   and/or sell copies of the Software, and to permit persons to whom the
   Software is furnished to do so, subject to the following conditions:

   The above copyright notice and this permission notice shall be included in
   all copies or substantial portions of the Software.

   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
   IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
   FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
   AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
   LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
   FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
   DEALINGS IN THE SOFTWARE. */
.auth-loader{display:flex;justify-content:center;align-items:center;gap:6px}
.auth-dot{display:inline-block;width:10px;height:10px;border-radius:50%;animation:auth-dot-pulse 1.5s ease-in-out infinite}
.auth-dot-1{background-color:#4285f4;animation-delay:0s}
.auth-dot-2{background-color:#34a853;animation-delay:.3s}
.auth-dot-3{background-color:#fbbc05;animation-delay:.6s}
.auth-dot-4{background-color:#ea4335;animation-delay:.9s}
.auth-dot-5{background-color:#4285f4;animation-delay:1.2s}
@keyframes auth-dot-pulse{0%{transform:scale(.5);opacity:.5}50%{transform:scale(1);opacity:1}100%{transform:scale(.5);opacity:.5}}

/* Schalter (Toggle) — configuration.html (.toggle-sw, 14 Stellen, dazu .toggle-sm
   in den Oeffnungszeiten-Spalten). Die Fassung fuer die WhatsApp-Erinnerung in
   booking.html ist am 23.09.2026 entfallen. Das Markup der Seiten ist unveraendert: <label><input
   type="checkbox"><span class="slider"></span></label>. Die Vorlage arbeitet mit
   input + label; hier wird derselbe Nachbar-Selektor auf den span angewandt.
   Weggelassen gegenueber der Vorlage: margin:20px (Layout gehoert der Seite),
   die :hover-Regeln (sie setzten dieselben Werte noch einmal), die -webkit-/
   -moz-Doppelungen und die Hilfsklasse .yep. Dazugekommen: ein Fokusring aus
   dem Kanon, damit der Schalter per Tastatur sichtbar bleibt.

   Copyright - 2026 guilhermeyohan (Guilherme Yohan)

   Permission is hereby granted, free of charge, to any person obtaining a
   copy of this software and associated documentation files (the "Software"),
   to deal in the Software without restriction, including without limitation
   the rights to use, copy, modify, merge, publish, distribute, sublicense,
   and/or sell copies of the Software, and to permit persons to whom the
   Software is furnished to do so, subject to the following conditions:

   The above copyright notice and this permission notice shall be included in
   all copies or substantial portions of the Software.

   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
   IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
   FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
   AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
   LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
   FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
   DEALINGS IN THE SOFTWARE. */
.toggle-sw{position:relative;display:inline-block;width:50px;height:25px;flex-shrink:0;user-select:none}
.toggle-sw input{opacity:0;width:0;height:0;position:absolute}
.toggle-sw .slider{position:absolute;inset:0;border-radius:50px;background:linear-gradient(to bottom,#b3b3b3,#e6e6e6);cursor:pointer;transition:all .3s ease}
.toggle-sw .slider:after{content:'';position:absolute;top:1px;left:1px;width:23px;height:23px;border-radius:50%;background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:all .3s ease}
.toggle-sw input:checked+.slider{background:linear-gradient(to bottom,#4cd964,#5de24e)}
.toggle-sw input:checked+.slider:after{transform:translateX(25px)}
.toggle-sw input:focus-visible+.slider{box-shadow:var(--shadow-focus)}
/* Kleine Fassung fuer enge Stellen (Oeffnungszeiten-Spalten): gleiche Form,
   34 x 18 statt 50 x 25. */
.toggle-sm{width:34px;height:18px}
.toggle-sm .slider:after{width:16px;height:16px}
.toggle-sm input:checked+.slider:after{transform:translateX(16px)}

/* Team-Kachel — booking.html (Mitarbeiter-Auswahl, mkStaffGrid). Das Markup
   der Seite behaelt seine Klassen, die Vorlage wird darauf abgebildet:
     .card        -> .stf          .card__content     -> .stf-inner
     .card__shine -> .stf-shine    .card__image       -> .av (Foto oder Initiale)
     .card__glow  -> .stf-glow     .card__title       -> .stf-n (Name)
                                   .card__text        -> .stf-text
                                   .card__description -> .stf-r (Bezeichnung)
   Farben wie in der Vorlage (--card-bg, --card-accent, --card-text). Masse
   verkleinert und die Kachel schmaler gestellt (Entscheidungen 13.09.2026):
   190 x 254 -> erst 134 x 180, dann 110 x 180, damit auf einem 390px-Handy
   drei Kacheln nebeneinander stehen. Radien 20/12 -> 14/8; Innenabstand
   1.25em -> .7em (bei 110px Breite blieben sonst 80px fuer den Namen). Die
   uebrigen Innenmasse sind em-basiert und folgen ueber font-size:12px (Name
   13px, Bezeichnung 10px). Die Bildflaeche hat keine feste Hoehe mehr,
   sondern nimmt den Platz, der nach dem Text uebrig bleibt — dadurch steht
   das Foto HOCHKANT und ein zweizeiliger Name laeuft nicht aus der Kachel. Die Akzentfarbe steht als Variable; die festen
   rgba(124,58,237,…)-Werte der Vorlage (Glow, Rahmen beim Ueberfahren) haengen
   hier an --card-accent-rgb, damit eine Seite sie mit EINER Zeile umfaerben
   kann — booking.html setzt dort die Salonfarbe (--tp).
   Weggelassen gegenueber der Vorlage: font-family (die Seite bringt ihre
   Schrift mit), .card__badge/.card__price/.card__button/.card__footer samt
   pulse-Animation (kein Preis, kein Knopf auf der Kachel) und das ::after-
   Streifenmuster ueber dem Bild (es laege ueber dem Foto).

   Copyright - 2026 SachinKumar666 (Sachin Kumar)

   Permission is hereby granted, free of charge, to any person obtaining a
   copy of this software and associated documentation files (the "Software"),
   to deal in the Software without restriction, including without limitation
   the rights to use, copy, modify, merge, publish, distribute, sublicense,
   and/or sell copies of the Software, and to permit persons to whom the
   Software is furnished to do so, subject to the following conditions:

   The above copyright notice and this permission notice shall be included in
   all copies or substantial portions of the Software.

   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
   IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
   FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
   AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
   LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
   FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
   DEALINGS IN THE SOFTWARE. */
.stf{--card-bg:#ffffff;--card-accent:#7c3aed;--card-accent-rgb:124,58,237;--card-text:#1e293b;--card-shadow:0 10px 15px -3px rgba(0,0,0,.05);width:110px;height:180px;font-size:12px;background:var(--card-bg);border-radius:14px;position:relative;overflow:hidden;transition:all .5s cubic-bezier(.16,1,.3,1);box-shadow:var(--card-shadow);border:1px solid rgba(255,255,255,.2)}
/* background-repeat:no-repeat ist eine Abweichung von der Vorlage
   (Entscheidung 14.09.2026). Ohne sie wiederholt sich das Verlaufsbild und es
   jagen mehrere Streifen hintereinander her — die Pause in den Keyframes
   greift dann gar nicht, weil immer der naechste Streifen im Bild steht. */
.stf-shine{position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.8) 50%,rgba(255,255,255,0) 60%);background-size:200% 100%;background-repeat:no-repeat;opacity:0;transition:opacity .3s;pointer-events:none}
.stf-glow{position:absolute;inset:-10px;background:radial-gradient(circle at 50% 0%,rgba(var(--card-accent-rgb),.3) 0%,rgba(var(--card-accent-rgb),0) 70%);opacity:0;transition:opacity .5s;pointer-events:none}
.stf-inner{padding:.7em;height:100%;display:flex;flex-direction:column;gap:.5em;position:relative;z-index:2}
.av{width:100%;flex:1 1 auto;min-height:0;background:linear-gradient(45deg,#a78bfa,#8b5cf6);border-radius:8px;transition:all .5s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden}
.stf-text{display:flex;flex-direction:column;gap:.25em}
.stf-n{color:var(--card-text);font-size:1.1em;margin:0;font-weight:700;transition:all .3s}
.stf-r{color:var(--card-text);font-size:.85em;margin:0;opacity:.7;transition:all .3s}
.stf:hover{transform:translateY(-10px);box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04);border-color:rgba(var(--card-accent-rgb),.2)}
.stf:hover .stf-shine{opacity:1;animation:stf-shine 3s linear infinite}
.stf:hover .stf-glow{opacity:1}
.stf:hover .av{transform:translateY(-5px) scale(1.03);box-shadow:0 10px 15px -3px rgba(0,0,0,.1)}
.stf:hover .stf-n{color:var(--card-accent);transform:translateX(2px)}
.stf:hover .stf-r{transform:translateX(2px)}
.stf:active{transform:translateY(-5px) scale(.98)}
/* Abweichung von der Vorlage (Entscheidung 14.09.2026): dort laeuft der
   Streifen ohne Pause durch, das wirkt als Dauerbewegung und der Ansatz des
   naechsten Durchlaufs faellt auf. Hier zieht er in den ersten 20 % der
   Laufzeit einmal durch und ruht die restlichen 65 % — ein Durchzug mit Pause
   statt eines Dauerlaufs. Die Laufzeit je Stelle bestimmt beides: wie langsam
   der Streifen zieht und wie lange es bis zum naechsten Mal dauert. */
@keyframes stf-shine{0%{background-position:-100% 0}35%,100%{background-position:200% 0}}

/* Druck-Knopf — booking.html, die "Weiter"-Knoepfe der Abschnitte (.weiter-btn;
   bis 13.09.2026 auch die Varianten, die sind jetzt Kipp-Haekchen). Vorlage ist
   ein Tailwind-Knopf; hier in normales CSS uebersetzt (Werte laut Tailwind:
   px-6 = 24px, py-2 = 8px, rounded-lg = 8px, transition-all = 150ms
   cubic-bezier(.4,0,.2,1)). Farben an die Salonfarbe geknuepft: bg-blue-500
   -> --tp, border-blue-600 (die dunkle Unterkante) -> --tpd, text-white ->
   --on-tp (Entscheidung 13.09.2026). Der Knopf "drueckt" ueber die Unterkante:
   4px in Ruhe, 6px beim Ueberfahren (und 1px angehoben), 2px beim Druecken
   (und 2px abgesenkt) — dazu heller bzw. dunkler.
   Zustaende (Auswahl, Sperre, zweizeilig) gehoeren der Seite, siehe booking.html.

   Copyright - 2026 carlosepcc (Ing. Carlos Enrique)

   Permission is hereby granted, free of charge, to any person obtaining a
   copy of this software and associated documentation files (the "Software"),
   to deal in the Software without restriction, including without limitation
   the rights to use, copy, modify, merge, publish, distribute, sublicense,
   and/or sell copies of the Software, and to permit persons to whom the
   Software is furnished to do so, subject to the following conditions:

   The above copyright notice and this permission notice shall be included in
   all copies or substantial portions of the Software.

   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
   IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
   FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
   AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
   LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
   FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
   DEALINGS IN THE SOFTWARE. */
.push-btn{cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1);background-color:var(--tp);color:var(--on-tp);padding:8px 24px;border-radius:8px;border:0 solid var(--tpd);border-bottom-width:4px}
.push-btn:hover{filter:brightness(1.1);transform:translateY(-1px);border-bottom-width:6px}
.push-btn:active{border-bottom-width:2px;filter:brightness(.9);transform:translateY(2px)}

/* Listenkarte — booking.html, Service-Kachel: Kopf (Name, "ab"-Preis,
   Beschreibung, rechts der Link "Alle anzeigen | Weniger") und darunter je
   Variante eine Zeile (links Name/Bezeichnung, rechts der Druck-Knopf
   "Hinzufuegen"). Vorlage ist Tailwind-Markup; hier in CSS uebersetzt, Werte
   laut Tailwind: p-6 = 24px, pb-1 = 4px, rounded-md = 6px, py-4 = 16px,
   text-lg = 18px, text-sm = 14px, text-xs = 12px, font-semibold = 600,
   font-medium = 500, coolGray-900 #111827, -500 #6b7280, -400 #9ca3af,
   -200 #e5e7eb (border), -100 #f3f4f6 (Zeilentrenner). shadow-dashboard ist
   ein eigener Name der Vorlage ohne Wert im Code — gesetzt ist Tailwinds
   "shadow". Der Link ist in der Vorlage green-500; hier die Salonfarbe als
   Schrift (--tp-txt), wie bei den anderen Bausteinen (Entscheidung 13.09.2026).
   Weggelassen: das Symbolkaestchen links in jeder Zeile (Entscheidung
   13.09.2026) und der Text rechts ("128 GB") — dort steht der Knopf.
   Klassen: .list-card (Karte), .list-card-head (Kopfzeile), .list-card-title,
   .list-card-sub, .list-card-link, .list-row (Zeile), .list-row-title,
   .list-row-sub.

   Copyright - 2026 themrsami (themrsami)

   Permission is hereby granted, free of charge, to any person obtaining a
   copy of this software and associated documentation files (the "Software"),
   to deal in the Software without restriction, including without limitation
   the rights to use, copy, modify, merge, publish, distribute, sublicense,
   and/or sell copies of the Software, and to permit persons to whom the
   Software is furnished to do so, subject to the following conditions:

   The above copyright notice and this permission notice shall be included in
   all copies or substantial portions of the Software.

   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
   IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
   FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
   AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
   LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
   FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
   DEALINGS IN THE SOFTWARE. */
.list-card{padding:24px 24px 4px;border:1px solid #e5e7eb;background:#fff;border-radius:6px;box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1)}
.list-card-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
.list-card-title{font-size:18px;font-weight:600;color:#111827;margin:0}
.list-card-sub{font-size:12px;font-weight:500;color:#6b7280;margin:0}
.list-card-link{font-size:14px;font-weight:600;color:var(--tp-txt);text-decoration:none;cursor:pointer;white-space:nowrap}
.list-card-link:hover{color:var(--tpl-txt)}
.list-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:16px 0;border-bottom:1px solid #f3f4f6}
.list-row:last-child{border-bottom:0}
.list-row-title{font-size:14px;font-weight:500;color:#111827;margin:0}
/* -400 (#9ca3af) war auf Weiss zu schwach; -500 (#6b7280) ist die Farbe, die
   die Vorlage fuer ihre Nebenzeilen im Kopf nutzt (Entscheidung 14.09.2026). */
.list-row-sub{font-size:12px;font-weight:500;color:#6b7280;margin:0}

/* Kipp-Haekchen — booking.html, Varianten-Zeilen (rechts statt "Hinzufuegen").
   Ein verstecktes Kontrollkaestchen; das Etikett zeigt eine runde Flaeche, die
   beim Anhaken um die senkrechte Achse kippt: vorn ein "+", hinten der Haken.
   Zwei Aenderungen gegenueber der Vorlage (Entscheidungen 13.09.2026): 60 x 60
   -> 44 x 44 (44px ist das kleinste Mass, das sich auf dem Handy noch sicher
   treffen laesst), und die Vorderseite ist nicht mehr Rot-Orange, sondern das
   dezente Grau der Eingabefelder (#F2F2F2) mit einem grauen "+" — Rot las sich
   wie eine Warnung, obwohl es nur "noch nicht gewaehlt" heisst. Die Rueckseite
   bleibt gruen: sie ist die Bestaetigung. Die Farben sind bewusst NICHT die
   Salonfarbe. Klassen mit flip-cb- vorangestellt statt .checkbox, damit nichts
   Allgemeines kollidiert.
   Weggelassen: .checkbox-container (Zentrierung auf ganzer Hoehe — Layout
   gehoert der Seite).

   Copyright - 2026 risabbir (R. Sabbir)

   Permission is hereby granted, free of charge, to any person obtaining a
   copy of this software and associated documentation files (the "Software"),
   to deal in the Software without restriction, including without limitation
   the rights to use, copy, modify, merge, publish, distribute, sublicense,
   and/or sell copies of the Software, and to permit persons to whom the
   Software is furnished to do so, subject to the following conditions:

   The above copyright notice and this permission notice shall be included in
   all copies or substantial portions of the Software.

   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
   IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
   FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
   AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
   LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
   FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
   DEALINGS IN THE SOFTWARE. */
.flip-cb{display:none}
.flip-cb-label{position:relative;display:inline-flex;align-items:center;cursor:pointer}
.flip-cb-flip{width:44px;height:44px;border-radius:50%;perspective:1000px;display:flex;justify-content:center;align-items:center;position:relative;transition:transform .4s ease}
.flip-cb-front,.flip-cb-back{width:100%;height:100%;position:absolute;display:flex;justify-content:center;align-items:center;border-radius:50%;backface-visibility:hidden;transition:transform .3s ease}
.flip-cb-front{background:linear-gradient(135deg,#F2F2F2,#e6e6e6);box-shadow:0 2px 4px rgba(0,0,0,.1);transform:rotateY(0deg)}
.flip-cb-front .flip-cb-icon{stroke:#8B8E98}
/* Rueckseite (hinzugefuegt) im Auswahl-Gruen statt im Gruen-Tuerkis der
   Vorlage, mit demselben Lichtstreifen wie Tag und Zeitfenster
   (Entscheidung 14.09.2026). Der Streifen laeuft nur im gewaehlten Zustand,
   sonst zeigt die Rueckseite ohnehin von der Kachel weg. */
.flip-cb-back{background:linear-gradient(135deg,var(--sel),var(--sel-dark));box-shadow:0 2px 4px rgba(0,0,0,.1);transform:rotateY(180deg);overflow:hidden}
.flip-cb-back::after{content:'';position:absolute;inset:0;border-radius:50%;background-image:linear-gradient(120deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.45) 50%,rgba(255,255,255,0) 60%);background-size:200% 100%;background-repeat:no-repeat;pointer-events:none}
.flip-cb:checked+.flip-cb-label .flip-cb-back::after{animation:stf-shine 9s linear infinite}
.flip-cb-wrapper:hover .flip-cb-flip{transform:scale(1.1)}
.flip-cb:checked+.flip-cb-label .flip-cb-front{transform:rotateY(180deg)}
.flip-cb:checked+.flip-cb-label .flip-cb-back{transform:rotateY(0deg)}
.flip-cb-icon{stroke:#fff;stroke-width:2;fill:transparent}

/* Knoepfe "Zurueck" und "Weiter" — booking.html, unter der Fortschrittsanzeige
   und in der Auswahl-Kachel. Aus dieser Vorlage stammten bis 13.09.2026 auch
   die Schritt-Kreise; die sind durch die Fortschrittsanzeige weiter unten
   ersetzt, uebrig bleiben die beiden Knoepfe.
   Uebernommen wie in der Vorlage: Masse, Radius 6, heller Rahmen, weisser
   Grund. Der Hauptknopf traegt statt des dunklen #0f172a die Salonfarbe
   (--tp / --on-tp). Dazugekommen: ein gesperrter Zustand.

   Copyright - 2026 PriyanshuGupta28 (Priyanshu Gupta)

   Permission is hereby granted, free of charge, to any person obtaining a
   copy of this software and associated documentation files (the "Software"),
   to deal in the Software without restriction, including without limitation
   the rights to use, copy, modify, merge, publish, distribute, sublicense,
   and/or sell copies of the Software, and to permit persons to whom the
   Software is furnished to do so, subject to the following conditions:

   The above copyright notice and this permission notice shall be included in
   all copies or substantial portions of the Software.

   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
   IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
   FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
   AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
   LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
   FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
   DEALINGS IN THE SOFTWARE. */
.stepper-controls{display:flex;justify-content:space-between;margin-top:20px}
/* color ausdruecklich gesetzt (Entscheidung 17.09.2026): Ohne Angabe nahmen
   mobile Browser ihre eigene Knopffarbe — auf dem Handy stand "Zurueck" in
   Blau, am Rechner in Schwarz. Es ist derselbe Knopf, er muss ueberall gleich
   aussehen. -webkit-text-fill-color, weil iOS die Farbe sonst weiter selbst
   bestimmt. */
.stepper-button{font-family:inherit;padding:8px 16px;border-radius:6px;border:1px solid #e2e8f0;background-color:#fff;color:var(--td);-webkit-text-fill-color:currentColor;cursor:pointer;display:flex;align-items:center;gap:6px}
/* display:flex schlaegt das eingebaute [hidden]{display:none} des Browsers —
   ohne diese Zeile blieb der versteckte "Weiter"-Knopf im Check out stehen
   (Entscheidung 17.09.2026). */
.stepper-button[hidden]{display:none}
.stepper-button-primary{background-color:var(--tp);color:var(--on-tp);-webkit-text-fill-color:currentColor;border-color:var(--tp)}
.stepper-button:disabled{opacity:.45;cursor:default}

/* Bezahlkarte — booking.html, Buchungsuebersicht (.sumcard): die Karte selbst,
   die Eingabefelder darin und der Abschluss-Knopf (.book-btn). Die Vorlage ist
   ein Bezahlfenster; uebernommen sind genau diese drei Teile, alles andere der
   Uebersicht bleibt (Kopf mit Preis, Zeilen, Anzahlung, Nachricht, Erinnerung,
   Stornoregeln, Turnstile).
   Abbildung auf das vorhandene Markup:
     .modal        -> .sumcard        (Radius 26, gestapelter Schatten, 450px)
     .input_label  -> .sumcard .field label
     .input_field  -> .sumcard .field input/textarea/select, dazu das
                      zusammengesetzte Telefonfeld (.phone-wrap) und der
                      Erinnerungs-Aufklapper, damit alle Felder gleich aussehen
     .purchase--btn-> .book-btn
   Farben und Masse der Felder wie in der Vorlage (#F2F2F2, Fokusring #242424).
   Der Knopf behaelt die FORM der Vorlage (55px, Radius 11, Verlauf von hell
   nach dunkel), traegt aber die Salonfarbe statt des dunklen Grau-Verlaufs
   (Entscheidung 13.09.2026): --tpl -> --tp -> --tpd, Schrift --on-tp. Der
   Verlauf steht als --pay-btn-bg an der Karte, eine Zeile genuegt zum
   Umfaerben.
   Weggelassen: .form, .payment--options (Apple/Google Pay), .separator und
   .split — die gibt es in der Uebersicht nicht.

   Copyright - 2026 zanina-yassine

   Permission is hereby granted, free of charge, to any person obtaining a
   copy of this software and associated documentation files (the "Software"),
   to deal in the Software without restriction, including without limitation
   the rights to use, copy, modify, merge, publish, distribute, sublicense,
   and/or sell copies of the Software, and to permit persons to whom the
   Software is furnished to do so, subject to the following conditions:

   The above copyright notice and this permission notice shall be included in
   all copies or substantial portions of the Software.

   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
   IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
   FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
   AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
   LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
   FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
   DEALINGS IN THE SOFTWARE. */
.sumcard{--pay-btn-bg:linear-gradient(180deg,var(--sel) 0%,var(--sel-dark) 100%);background:#fff;box-shadow:0 187px 75px rgba(0,0,0,.01),0 105px 63px rgba(0,0,0,.05),0 47px 47px rgba(0,0,0,.09),0 12px 26px rgba(0,0,0,.1),0 0 0 rgba(0,0,0,.1);border-radius:26px;max-width:450px}
.sumcard .field label{font-size:10px;color:#8B8E98;font-weight:600}
.sumcard .field input,.sumcard .field select,.sumcard .phone-wrap{height:40px;border-radius:9px;outline:none;background-color:#F2F2F2;border:1px solid #e5e5e500;box-shadow:none;transition:all .3s cubic-bezier(.15,.83,.66,1)}
.sumcard .field input,.sumcard .field select{padding:0 0 0 16px}
.sumcard .field textarea{border-radius:9px;outline:none;background-color:#F2F2F2;border:1px solid #e5e5e500;box-shadow:none;padding:10px 16px;transition:all .3s cubic-bezier(.15,.83,.66,1)}
.sumcard .field input:focus,.sumcard .field select:focus,.sumcard .field textarea:focus,.sumcard .phone-wrap:focus-within{border:1px solid transparent;box-shadow:0 0 0 2px #242424;background-color:transparent}
.sumcard .field input::-webkit-outer-spin-button,.sumcard .field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.sumcard .field input[type=number]{-moz-appearance:textfield}
/* Der Knopf traegt seit 14.09.2026 das Auswahl-Gruen (--pay-btn-bg an der
   Karte) statt der Salonfarbe, dazu den Lichtstreifen. Die Schrift ist fest
   weiss, nicht --on-tp: --on-tp richtet sich nach der Salonfarbe und koennte
   auf dem Gruen dunkel ausfallen. overflow:hidden haelt den Streifen im
   Radius, position:relative ist der Bezug fuer ::after. */
.book-btn{height:55px;border-radius:11px;border:0;outline:none;color:var(--white);font-size:13px;font-weight:700;background:var(--pay-btn-bg);box-shadow:0 0 0 0 #FFFFFF,0 0 0 0 #000000;transition:all .3s cubic-bezier(.15,.83,.66,1);position:relative;overflow:hidden}
.book-btn::after{content:'';position:absolute;inset:0;background-image:linear-gradient(120deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.4) 50%,rgba(255,255,255,0) 60%);background-size:200% 100%;background-repeat:no-repeat;animation:stf-shine 9s linear infinite;pointer-events:none}
.book-btn:hover{box-shadow:0 0 0 2px #FFFFFF,0 0 0 4px #0000003a}

/* Fortschrittsanzeige — booking.html, die drei Abschnitte. Ein Balken mit drei
   Marken darauf; erledigte Marken sind gruen und stehen in voller Groesse, die
   noch offenen bleiben im Grau des Balkens und etwas kleiner. Die Namen stehen
   darunter.
   Die Vorlage ist eine LADEanzeige: ihr Balken laeuft alle 6 Sekunden von vorn,
   die Marken springen bei 29 %, 59 % und 89 % auf Gruen. Hier zeigt der Balken
   einen Zustand, keine Zeit — deshalb sind die vier @keyframes ersetzt durch die
   Breite des Balkens (0 %, 50 %, 100 % je nach Abschnitt) und die Klasse
   .fortschritt-an an den erledigten Marken (Entscheidung 13.09.2026). Neu
   dazugekommen ist die weiche Ueberblendung der Breite beim Abschnittswechsel.
   Der Balken startet bei 0 statt bei den 40px der Vorlage (das war das erste
   Bild ihrer Bewegung) und laeuft beim Abschnittswechsel in 1,8 Sekunden auf
   seinen neuen Stand. Die neu erreichte Marke wird gruen und gross, wenn der
   Balken bei ihr ankommt — die Wartezeit setzt setzeSchritt() als
   transition-delay, und zwar nur bei der Marke, die gerade dazukommt
   (Entscheidungen 13.09.2026).
   Weitere Aenderungen: Breite 330px -> volle Breite, vier Marken -> drei, und
   die erste Marke waechst nach rechts, die letzte nach links, damit beide auf
   dem Balken bleiben (die Vorlage macht das nur fuer die letzte). Der Haken in
   der Marke ist immer weiss, auch solange sie grau ist (13.09.2026).
   Klassen mit fortschritt- vorangestellt statt .loader/.bar/.check — die drei
   Namen waeren in einer gemeinsamen Datei viel zu allgemein.
   Farben wie in der Vorlage (Balken #535353), das Gruen der Vorlage aber
   abgedunkelt auf --sel, damit weisse Schrift darauf traegt.

   Copyright - 2026 musashi-13 (Karan Hathwar)

   Permission is hereby granted, free of charge, to any person obtaining a
   copy of this software and associated documentation files (the "Software"),
   to deal in the Software without restriction, including without limitation
   the rights to use, copy, modify, merge, publish, distribute, sublicense,
   and/or sell copies of the Software, and to permit persons to whom the
   Software is furnished to do so, subject to the following conditions:

   The above copyright notice and this permission notice shall be included in
   all copies or substantial portions of the Software.

   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
   IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
   FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
   AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
   LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
   FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
   DEALINGS IN THE SOFTWARE. */
.fortschritt{position:relative;background-color:#535353;border-radius:1em;height:1em;width:100%}
/* Ueber den gefuellten Teil laeuft derselbe Glanz wie ueber die gewaehlte
   Team-Kachel (Entscheidung 14.09.2026) — Gradient und Bewegung stammen aus dem
   Baustein "Team-Kachel" weiter oben, deshalb auch dessen @keyframes — nur
   langsamer: 7s statt 3s (14.09.2026). */
.fortschritt-bar{position:relative;overflow:hidden;background-color:var(--sel);height:100%;width:0;border-radius:1em;transition:width 1.8s cubic-bezier(.45,.05,.55,.95)}
.fortschritt-bar::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.8) 50%,rgba(255,255,255,0) 60%);background-size:200% 100%;background-repeat:no-repeat;animation:stf-shine 16s linear infinite;pointer-events:none}
.fortschritt-marken{position:absolute;left:0;top:-4px;z-index:3;display:flex;width:100%;justify-content:space-between;height:.5em}
.fortschritt-marke{border-radius:1em;height:1.5em;width:1.5em;padding:3px;box-sizing:border-box;background-color:#535353;transform:scale(.75);color:#fff;display:flex;align-items:center;justify-content:center;transition:transform .3s ease,background-color .3s ease}
.fortschritt-marke:first-child{transform-origin:left}
.fortschritt-marke:last-child{transform-origin:right}
.fortschritt-marke.fortschritt-an{transform:scale(1);background-color:var(--sel)}

/* Pfeilknopf mit Tiefe — booking.html, Monatswechsel im Kalender (.cal-nav).
   Drei Ebenen uebereinander: die Deckflaeche (.cal-nav-top), darunter die
   Flanke (.cal-nav-bottom) und ganz unten der Sockel (.cal-nav-base). Beim
   Druecken sinkt die Deckflaeche um 2px, die Flanke verliert ihre Hoehe und
   alle drei verlieren einen Teil ihrer Rundung — dadurch wirkt der Knopf
   gedrueckt.
   Wichtig fuer das Aussehen: Die Deckflaeche ist nur so hoch wie ihr Inhalt und
   sitzt OBEN im Knopf; die beiden Ebenen darunter reichen tiefer und sind
   breiter. Genau dieser Ueberstand ist die sichtbare Flanke — ohne ihn sieht der
   Knopf flach aus. Der Knopf braucht dafuer Hoehe: die Vorlage gibt ihm 4em
   (64 x 64). Hier sind es 52 x 42 — kleiner, aber mit denselben Abstaenden der
   Ebenen (4px/6px), sodass die Flanke 10px hoch bleibt und die Deckflaeche mit
   38 x 28 dasselbe liegende Verhaeltnis behaelt wie in der Vorlage (48 x 38);
   quadratisch sah sie aus wie ein Klecks. Radien 20 -> 14, Innenabstand der
   Deckflaeche 8px 16px -> 7px 5px.
   Weggelassen: .button-container (Zentrierung auf eigener Seite) und der
   Aussenabstand margin:10px — beides gehoert der Zeile, in der er steht.
   Farben: statt des Blau-Violett der Vorlage die Salonfarbe (13.09.2026) —
   heller Ton oben, dunkler unten (--tpl -> --tpd), Pfeil in --on-tp; beim
   Druecken dreht sich der Verlauf wie in der Vorlage um. Er steht als
   --cal-nav-bg am Knopf, eine Zeile genuegt zum Umfaerben.

   Copyright - 2026 Z4drus (Z4drus)

   Permission is hereby granted, free of charge, to any person obtaining a
   copy of this software and associated documentation files (the "Software"),
   to deal in the Software without restriction, including without limitation
   the rights to use, copy, modify, merge, publish, distribute, sublicense,
   and/or sell copies of the Software, and to permit persons to whom the
   Software is furnished to do so, subject to the following conditions:

   The above copyright notice and this permission notice shall be included in
   all copies or substantial portions of the Software.

   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
   IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
   FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
   AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
   LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
   FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
   DEALINGS IN THE SOFTWARE. */
.cal-nav{--cal-nav-bg:linear-gradient(145deg,var(--tpl),var(--tpd));--cal-nav-bg-tief:linear-gradient(145deg,var(--tpd),var(--tpl));-webkit-appearance:none;appearance:none;position:relative;border-width:0;padding:0 7px;width:52px;height:42px;box-sizing:border-box;background:transparent;font:inherit;cursor:pointer;border-radius:14px}
.cal-nav-top{display:flex;align-items:center;justify-content:center;position:relative;z-index:2;padding:7px 5px;font-size:14px;line-height:1;transform:translateY(0);color:var(--on-tp);background-image:var(--cal-nav-bg);text-shadow:0 -1px rgba(0,0,0,.25);border-radius:14px;transition:transform .3s,border-radius .3s,background 10s}
.cal-nav:active .cal-nav-top{border-radius:10px 10px 8px 8px/8px;transform:translateY(2px);background-image:var(--cal-nav-bg-tief)}
.cal-nav-bottom{position:absolute;z-index:1;bottom:4px;left:4px;border-radius:14px;padding-top:6px;width:calc(100% - 8px);height:calc(100% - 10px);background-image:var(--cal-nav-bg-tief);box-shadow:0 2px 3px 0 rgba(0,0,0,.5);transition:border-radius .2s,padding-top .2s}
.cal-nav-base{position:absolute;z-index:0;top:4px;left:0;border-radius:14px;width:100%;height:calc(100% - 4px);background-color:rgba(0,0,0,.15);box-shadow:0 1px 1px 0 rgba(255,255,255,.75),inset 0 2px 2px rgba(0,0,0,.25);transition:border-radius .2s,padding-top .2s}
.cal-nav:active .cal-nav-bottom{border-radius:10px 10px 8px 8px/8px;padding-top:0}
.cal-nav:active .cal-nav-base{border-radius:10px 10px 8px 8px/8px}