/* ═══════════════════════════════════════════════
   TERMINBUCHUNG (Erstgespräch)
   Nutzt die Variablen aus main.css. Keine Kursivschrift.
═══════════════════════════════════════════════ */

.termin-block {
  padding: 6rem var(--gutter);
  /* Platz fuer die fixierte Navigation beim Sprung auf #termin */
  scroll-margin-top: 96px;
}
.termin-inner {
  max-width: var(--site-container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 3rem;
  align-items: start;
}
.termin-intro .section-label {
  margin-bottom: 1rem;
}
.termin-title {
  font-size: clamp(2.25rem, 5vw, 64px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -2px;
  color: var(--black);
  margin-bottom: 1.5rem;
}
.termin-intro p {
  max-width: 34rem;
}

/* Direkt nach dem schwarzen Kontakt-Container (kontakt.html, ueber-uns.html) kein doppelter Abstand */
.kontakt-block + .termin-block {
  padding-top: 0;
}

/* Platzhalter: der Rahmen fuellt die reservierte Hoehe, damit beim Nachladen nichts springt */
[data-termin-widget] {
  display: flex;
  flex-direction: column;
}
[data-termin-widget] > .termin-frame {
  flex: 1 1 auto;
}
[data-termin-widget][data-variant="kompakt"] {
  min-height: var(--termin-min-height-kompakt, 400px);
}
[data-termin-widget][data-variant="leiste"] {
  min-height: var(--termin-min-height-leiste, 76px);
}
[data-termin-widget][data-variant="voll"] {
  min-height: var(--termin-voll-height);
}
/* Feste Hoehe der Variante voll (Desktop, inline und Dialog), auch als CLS-Reserve.
   Bemessen fuer Schritt 1 mit 6 Kalenderwochen und zwei Reihen Uhrzeiten; reicht der Platz
   nicht (Dialog auf niedrigen Bildschirmen), scrollt der Inhaltsbereich. */
[data-termin-widget],
.termin-dialog {
  --termin-voll-height: 700px;
}

/* Positionen im Artikel */
.art-sidebar [data-termin-widget] {
  width: 100%;
  flex: none;
}
/* Die Sidebar klebt beim Scrollen oben fest. Ist sie mit dem Widget hoeher als
   der Bildschirm, waere das Widget nie zu sehen. Deshalb bleibt sie auf
   Bildschirmhoehe begrenzt, das Inhaltsverzeichnis scrollt bei Bedarf in sich. */
@media (min-width: 1025px) {
  .art-sidebar-inner:has([data-termin-widget]) {
    max-height: calc(100vh - 7rem);
  }
  .art-sidebar-inner:has([data-termin-widget]) .art-toc {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}
/* Sehr niedrige Fenster: kein Platz fuer Inhaltsverzeichnis und Widget zusammen */
@media (min-width: 1025px) and (max-height: 640px) {
  .art-sidebar [data-termin-widget] { display: none; }
}
.art-body > [data-termin-widget]:last-child {
  margin-top: 2.5rem;
}
.art-cta-section [data-termin-widget] {
  margin-top: 2rem;
}
/* Rechner und Magazin-Uebersicht: Leiste in Seitenbreite */
.termin-position {
  max-width: var(--site-container);
  margin: 0 auto 3rem;
  padding: 0 var(--gutter);
}

/* Startseite: Buchung als dritte Karte im Service-Raster (gleiche Spaltenbreite wie die Nachbarkarten) */
.service-termin-card {
  background: var(--black);
  border-radius: 20px;
  padding-top: 2rem;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  min-width: 0;
  scroll-margin-top: 96px;
}
.service-termin-label {
  padding: 0 2rem;
  font-size: 15px;
  font-weight: 500;
  color: var(--grey);
}
.service-termin-card .termin-frame {
  border: none;
  border-radius: 0 0 20px 20px;
}
.service-termin-card [data-termin-widget] {
  margin-top: 0.25rem;
  flex: 1 1 auto;
}
/* Die Karte ist so hoch wie die Nachbarspalten: keine feste Modulhoehe, nichts scrollt in sich */
.service-termin-card .termin-widget--voll > .termin-app {
  background: transparent;
  height: auto;
  flex: 1 1 auto;
  padding: 1rem 2rem 2rem;
}
.service-termin-card .termin-widget--voll .termin-step-body {
  overflow: visible;
}

/* Kontaktseite: Terminbuchung und Formular in einem Block, umschaltbar */
.kontakt-direkt {
  margin-top: 2rem;
  color: var(--grey);
  font-size: 16px;
  line-height: 1.7;
  max-width: 26rem;
}
.kontakt-direkt a {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.kontakt-switch {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.kontakt-tabs {
  display: inline-flex;
  align-self: flex-start;
  gap: 2px;
  padding: 3px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.12);
}
.kontakt-tabs [role="tab"] {
  min-height: 40px;
  padding: 0 1.25rem;
  border: none;
  border-radius: 50px;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  font: 600 15px/1 var(--sans);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.kontakt-tabs [role="tab"]:hover {
  color: var(--white);
}
.kontakt-tabs [role="tab"][aria-selected="true"] {
  background: var(--white);
  color: var(--black);
}
.kontakt-tabs [role="tab"]:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}
/* hidden gegen display-Regeln der Karte absichern */
.kontakt-panel[hidden] {
  display: none !important;
}
.kontakt-panel [data-termin-widget] {
  margin-top: 0;
}
/* Formular im Umschalter dunkel wie das Buchungsmodul (gleiche Flaechen, Felder, Buttons) */
.kontakt-switch .kontakt-card {
  background: var(--black);
  padding: 2rem;
}
.kontakt-switch .form-group input:not([type="checkbox"]):not([type="radio"]),
.kontakt-switch .form-group textarea {
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
}
.kontakt-switch .form-group input::placeholder,
.kontakt-switch .form-group textarea::placeholder {
  color: rgba(255, 255, 255, 0.55);
}
.kontakt-switch .form-group input:not([type="checkbox"]):not([type="radio"]):focus,
.kontakt-switch .form-group textarea:focus {
  box-shadow: 0 0 0 1px var(--white);
}
.kontakt-switch .form-group input:-webkit-autofill {
  -webkit-text-fill-color: var(--white);
  box-shadow: 0 0 0 100px var(--black) inset;
  caret-color: var(--white);
}
.kontakt-switch .form-radio-options label,
.kontakt-switch .form-checkbox-options label {
  color: var(--white);
}
.kontakt-switch .form-radio-options input[type="radio"],
.kontakt-switch .form-checkbox-options input[type="checkbox"] {
  background-color: rgba(255, 255, 255, 0.2);
}
.kontakt-switch .form-radio-options input[type="radio"]:checked {
  background: var(--white);
  box-shadow: inset 0 0 0 3px var(--black);
}
.kontakt-switch .form-checkbox-options input[type="checkbox"]:checked {
  background-color: var(--white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8l3 3 5-5' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.kontakt-switch .form-privacy-note {
  color: rgba(255, 255, 255, 0.72);
}
.kontakt-switch .form-privacy-note a {
  color: var(--white);
}
/* Alle Buttons im Modul weiss gefuellt */
.kontakt-switch .form-submit {
  background: var(--white);
  color: var(--black);
}
@media (max-width: 768px) {
  .kontakt-tabs { align-self: stretch; }
  .kontakt-tabs [role="tab"] { flex: 1 1 0; padding: 0 0.75rem; }
}

/* Modul-Tokens: alle Varianten und der Dialog erscheinen schwarz mit weisser Schrift.
   Komponenten, die auch ausserhalb des Moduls vorkommen (Storno-Seite), fallen
   ueber den zweiten var()-Wert auf die helle Darstellung zurueck. */
.termin-widget,
.termin-dialog {
  --termin-frame-color: var(--black, #000000);
  --termin-frame-width: 2px;
  --termin-radius: 16px;
  --termin-bg: var(--black);
  --termin-fg: var(--white);
  --termin-muted: rgba(255, 255, 255, 0.72);
  --termin-faint: rgba(255, 255, 255, 0.35);
  /* Ein Rand fuer alle umrandeten Flaechen (Karten, Kacheln, Chips, Buttons, Hinweise) */
  --termin-line: var(--white);
  /* Dezente Trennlinie: Dialogkopf, Monatsnavigation, Uhrzeiten */
  --termin-divider: rgba(255, 255, 255, 0.35);
  --termin-tile-radius: 10px;
  /* kompakte Groesse aus dem Button-System (main.css) */
  --termin-btn-height: var(--btn-height-sm, 48px);
  --termin-btn-font: var(--btn-font-sm, 600 15px/1 var(--sans));
  --termin-accent-bg: var(--white);
  /* Gefuellte Flaechen: freie Tage, Umschalter-Spur (Hover zeigt den weissen Rand, keine Grauflaeche) */
  --termin-soft: rgba(255, 255, 255, 0.12);
  --termin-accent-fg: var(--black);
  --termin-error: #FF8A80;
  --termin-error-bg: rgba(255, 138, 128, 0.14);
}
.termin-widget :is(button, a):focus-visible,
.termin-dialog :is(button, a):focus-visible {
  outline: 2px solid var(--termin-fg);
  outline-offset: 2px;
}

/* hidden-Attribut gegen display-Regeln der Komponenten absichern */
.termin-widget [hidden],
.termin-dialog [hidden] {
  display: none !important;
}

/* Schwarzer Rahmen fuer alle Varianten und den Dialog */
.termin-frame {
  border: var(--termin-frame-width) solid var(--termin-frame-color);
  border-radius: var(--termin-radius);
}

.termin-app {
  background: var(--termin-bg);
  padding: 2rem;
  min-height: 420px;
  /* Abstand fuer die fixierte Navigation, wenn mobil an den Modulanfang gescrollt wird */
  scroll-margin-top: 96px;
}

/* Schritte */
.termin-step {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.termin-step-body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Desktop: Variante voll (inline und im Dialog) in allen Schritten gleich hoch.
   Kopf und Aktionsleiste bleiben stehen, nur der Inhaltsbereich scrollt bei Bedarf. */
@media (min-width: 769px) {
  [data-termin-widget][data-variant="voll"] {
    min-height: var(--termin-voll-height);
  }
  .termin-widget--voll > .termin-app {
    height: var(--termin-voll-height);
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .termin-dialog .termin-dialog-body {
    /* Dialogkopf (ca. 74px) und Rand des Dialogs abziehen, damit er nie ueber den Bildschirm ragt */
    height: min(var(--termin-voll-height), calc(100dvh - 32px - 78px));
    display: flex;
    flex-direction: column;
  }
  .termin-widget--voll > .termin-app > .termin-step,
  .termin-dialog-body > .termin-step {
    flex: 1 1 auto;
    min-height: 0;
  }
  .termin-widget--voll .termin-step-body,
  .termin-dialog-body .termin-step-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Platz fuer Fokusrahmen am Rand des Scrollbereichs */
    padding: 4px;
    margin: -4px;
  }
  /* Inhalte behalten ihre Hoehe, der Bereich scrollt statt sie zu stauchen */
  .termin-widget--voll .termin-step-body > *,
  .termin-dialog-body .termin-step-body > * {
    flex-shrink: 0;
  }
  .termin-widget--voll .termin-step > .termin-actions,
  .termin-dialog-body .termin-step > .termin-actions {
    flex: none;
  }
}
.termin-step-title {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--termin-fg);
  letter-spacing: -0.5px;
}
.termin-step-title:focus {
  outline: none;
}
.termin-step-title:focus-visible {
  outline: 2px solid var(--termin-fg);
  outline-offset: 4px;
}
.termin-step-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}

/* Umschalter (Dauer, Kanal) */
.termin-segment {
  border: none;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.termin-segment-track {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 50px;
  background: var(--termin-soft);
}
.termin-segment-option {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 1rem;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  color: var(--termin-muted);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.termin-segment-option:hover {
  color: var(--termin-fg);
}
.termin-segment-option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
/* Auswahlzustand per Klasse (termin.js), damit auch Browser ohne :has() ihn zeigen */
.termin-segment-option.is-checked {
  background: var(--termin-accent-bg);
  color: var(--termin-accent-fg);
}
.termin-segment-option:focus-within {
  outline: 2px solid var(--termin-fg);
  outline-offset: 2px;
}
.termin-field-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--termin-fg);
  margin-bottom: 0.5rem;
}
.termin-channel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.termin-channel .termin-hint {
  margin: 0;
  font-size: 13px;
}

/* Buttons */
.termin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  align-items: center;
}
.termin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--termin-btn-height, 48px);
  font: var(--termin-btn-font, 600 15px/1 var(--sans));
  border-radius: 50px;
  padding: 0 24px;
  cursor: pointer;
  transition: opacity 0.2s;
  /* Alle Buttons gleich: weiss gefuellt, schwarze Schrift (ausserhalb des Moduls schwarz) */
  background: var(--termin-accent-bg, var(--black));
  color: var(--termin-accent-fg, var(--white));
  border: 1px solid var(--termin-accent-bg, var(--black));
}
.termin-btn:hover { opacity: 0.85; }
.termin-btn:disabled {
  opacity: 0.5;
  cursor: progress;
}
.termin-btn-primary {
  margin-left: auto;
}

/* Monatskalender */
.termin-month-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--termin-divider);
}
.termin-month-label {
  font-size: 1.125rem;
  color: var(--termin-muted);
}
.termin-month-label strong {
  font-weight: 600;
  color: var(--termin-fg);
}
.termin-month-buttons {
  display: flex;
  gap: 0.25rem;
}
.termin-nav-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--termin-fg);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.termin-nav-btn:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--termin-line); }
.termin-nav-btn:disabled {
  opacity: 0.3;
  cursor: default;
}
.termin-grid {
  border-collapse: separate;
  border-spacing: 6px;
  table-layout: fixed;
  margin: -6px;
  width: calc(100% + 12px);
}
.termin-grid th {
  font-size: 12px;
  font-weight: 600;
  color: var(--termin-muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding-bottom: 0.25rem;
}
.termin-grid td {
  padding: 0;
}
.termin-day {
  width: 100%;
  height: 44px;
  border-radius: var(--termin-tile-radius);
  border: none;
  background: transparent;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--termin-faint);
  cursor: default;
  transition: background 0.2s;
}
.termin-day.is-available {
  background: var(--termin-soft);
  color: var(--termin-fg);
  font-weight: 600;
  cursor: pointer;
}
.termin-day.is-available:hover {
  box-shadow: inset 0 0 0 1px var(--termin-line);
}
.termin-day.is-selected,
.termin-day.is-selected:hover {
  background: var(--termin-accent-bg);
  color: var(--termin-accent-fg);
}
.termin-calendar-body {
  min-height: 0;
}
.termin-loading,
.termin-hint {
  color: var(--termin-muted);
  margin-top: 1rem;
}

/* Uhrzeiten unter dem Kalender */
.termin-times-box {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--termin-divider);
}
.termin-times-box:empty {
  display: none;
}
.termin-day-label {
  color: var(--termin-fg);
  font-size: 16px;
}
.termin-times {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 0.5rem;
}
.termin-time {
  width: 100%;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--termin-fg);
  background: var(--termin-bg);
  border: 1px solid var(--termin-line);
  border-radius: 50px;
  min-height: 44px;
  padding: 0 14px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.termin-time:hover,
.termin-time.is-selected {
  background: var(--termin-accent-bg);
  color: var(--termin-accent-fg);
  border-color: var(--termin-accent-bg);
}

/* Formular */
.termin-selected {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  background: transparent;
  border: 1px solid var(--termin-line);
  border-radius: var(--termin-tile-radius);
  padding: 0.75rem 1rem;
  color: var(--termin-muted);
}
.termin-selected strong {
  color: var(--termin-fg);
  font-size: 16px;
}
.termin-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.termin-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1rem;
}
.termin-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.termin-field label {
  font-size: 13px;
  font-weight: 500;
  color: var(--termin-fg);
}
.termin-field input:not([type="checkbox"]),
.termin-field select {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  color: var(--termin-fg, var(--black));
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: var(--termin-tile-radius);
  /* Dezent hinterlegt statt weiss (ausserhalb des Moduls weiss) */
  background-color: var(--termin-soft, var(--white));
  width: 100%;
}
/* Browser-Autofill faerbt Felder sonst hell ein */
.termin-field input:-webkit-autofill {
  -webkit-text-fill-color: var(--termin-fg, var(--black));
  box-shadow: 0 0 0 100px var(--termin-bg, var(--white)) inset;
  caret-color: var(--termin-fg, var(--black));
}
/* Aufklappliste des Status-Felds nutzt die Systemdarstellung: dort dunkle Schrift auf hell */
.termin-field select option {
  color: var(--black);
  background: var(--white);
}
.termin-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23bbb' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
  cursor: pointer;
}
.termin-field input:focus,
.termin-field select:focus {
  border-color: var(--termin-line, var(--black));
  outline: none;
}
.termin-field [aria-invalid="true"] {
  border-color: var(--termin-error);
  box-shadow: 0 0 0 2px var(--termin-error);
}
.termin-consent label {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-weight: 400;
  line-height: 1.5;
  color: var(--termin-muted);
  cursor: pointer;
}
.termin-consent input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--termin-fg);
}
.termin-consent a {
  color: var(--termin-fg);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.termin-error {
  font-size: 13px;
  color: var(--termin-error);
}
.termin-form-error,
.termin-unavailable {
  background: var(--termin-error-bg);
  color: var(--termin-error);
  border-radius: var(--termin-tile-radius);
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.termin-unavailable {
  background: transparent;
  color: var(--termin-muted);
  border: 1px solid var(--termin-line);
  margin-top: 1rem;
  align-items: flex-start;
}
.termin-unavailable strong {
  color: var(--termin-fg);
}
.termin-form-error a,
.termin-unavailable a {
  color: inherit;
  text-decoration: underline;
}
.termin-form-error:focus {
  outline: 2px solid var(--termin-fg);
  outline-offset: 3px;
}
.termin-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Fallback-Hinweis mit Link zur Kontaktseite (alle Varianten) */
.termin-fallback {
  margin: 0;
  color: var(--termin-muted);
}
.termin-fallback a {
  color: var(--termin-fg);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

/* Variante kompakt (Sidebar, ab ca. 280px) */
.termin-widget--kompakt {
  min-width: 0;
}
.termin-compact {
  background: var(--termin-bg);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.termin-compact-title {
  font-size: 18px;
  color: var(--termin-fg);
}
.termin-compact-title strong {
  font-weight: 600;
}
.termin-compact-sub {
  font-size: 13px;
  line-height: 1.5;
  color: var(--termin-muted);
}
.termin-teaser-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.termin-teaser-content .termin-loading,
.termin-teaser-content .termin-hint {
  margin-top: 0;
  font-size: 13px;
}

/* Tagesleiste (kompakt und schwebend) */
.termin-days {
  display: flex;
  align-items: center;
  gap: 4px;
}
.termin-days .termin-nav-btn {
  width: 28px;
  height: 28px;
  font-size: 18px;
  flex-shrink: 0;
}
.termin-days-list {
  list-style: none;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
}
.termin-daybtn {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0.4rem 0;
  border: none;
  border-radius: var(--termin-tile-radius);
  background: var(--termin-soft);
  color: var(--termin-fg);
  font-family: var(--sans);
  cursor: pointer;
}
.termin-daybtn:hover {
  box-shadow: inset 0 0 0 1px var(--termin-line);
}
.termin-daybtn.is-selected,
.termin-daybtn.is-selected:hover {
  background: var(--termin-accent-bg);
  color: var(--termin-accent-fg);
  box-shadow: none;
}
.termin-daybtn-wd {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.75;
}
.termin-daybtn-d {
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
}
.termin-compact-day {
  font-size: 14px;
  font-weight: 600;
  color: var(--termin-fg);
}
.termin-compact-times {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
}
.termin-compact-times .termin-time {
  min-height: 40px;
  padding: 0;
  font-size: 14px;
}

/* Variante schwebend: Button unten rechts, kompakte Ansicht als kleines Fenster */
.termin-widget--schwebend {
  position: fixed;
  right: 24px;
  bottom: 24px;
  /* unter Navigation (50) und Mobilmenue (52), damit das offene Menue nie verdeckt wird */
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  transition: opacity 0.25s, transform 0.25s, visibility 0s;
}
/* visibility statt nur opacity: verdeckt ist der Button auch per Tastatur nicht erreichbar */
.termin-widget--schwebend.is-covered:not(.is-open) {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s, visibility 0s linear 0.25s;
}
.termin-float-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: var(--btn-height, 52px);
  padding: 0 var(--btn-pad-x, 28px);
  border: 1px solid var(--termin-line);
  border-radius: 100px;
  background: var(--termin-bg);
  color: var(--termin-fg);
  font: var(--btn-font, 600 16px/1 var(--sans));
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.termin-float-btn:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), inset 0 0 0 1px var(--termin-line);
}
.termin-float-icon {
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  transform-origin: 50% 20%;
}
/* "Klingeln" des Symbols, von termin.js einige Male ausgeloest */
.termin-float-btn.is-ringing .termin-float-icon {
  animation: termin-ring 0.8s ease-in-out 1;
}
@keyframes termin-ring {
  0%, 100% { transform: rotate(0); }
  10% { transform: rotate(16deg); }
  20% { transform: rotate(-14deg); }
  30% { transform: rotate(12deg); }
  40% { transform: rotate(-10deg); }
  50% { transform: rotate(6deg); }
  60% { transform: rotate(-4deg); }
  70% { transform: rotate(0); }
}
.termin-float-panel {
  position: relative;
  width: min(360px, calc(100vw - 32px));
  /* Navigation (ca. 80px) und Button samt Abstand (ca. 90px) abziehen, sonst ragt es oben heraus */
  max-height: calc(100dvh - 170px);
  overflow-y: auto;
  overscroll-behavior: contain;
  margin-bottom: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
  border-radius: var(--termin-radius);
}
.termin-float-panel .termin-compact-title {
  padding-right: 48px;
}
.termin-float-panel .termin-compact-title:focus {
  outline: none;
}
.termin-float-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
}
@media print {
  .termin-widget--schwebend { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .termin-widget--schwebend,
  .termin-widget--schwebend.is-covered:not(.is-open) { transition: none; }
  .termin-float-btn.is-ringing .termin-float-icon { animation: none; }
}
.termin-slot-tile {
  text-align: left;
  font-size: 15px;
}
.termin-btn-block {
  width: 100%;
}

/* Variante leiste (Artikelmitte) */
.termin-bar {
  background: var(--termin-bg);
  padding: 0.75rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}
.termin-bar-label {
  margin: 0;
  font-size: 15px;
  color: var(--termin-fg);
}
.termin-bar-slot {
  flex: none;
  /* Kachelhoehe auch waehrend des Ladens, damit die Leiste nicht springt */
  min-height: 44px;
  display: flex;
  align-items: center;
}
.termin-bar-slot .termin-loading {
  margin: 0;
}
.termin-bar .termin-slot-tile {
  width: auto;
}
.termin-bar .termin-btn {
  margin-left: auto;
}
.termin-bar .termin-fallback {
  /* Gleiche Hoehe wie Kachel und Button, damit der Fallback nicht springt */
  flex: 1 1 auto;
  min-height: var(--termin-btn-height);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.35em;
}

/* Dialog (kompakt und leiste) */
.termin-dialog {
  /* main.css setzt margin global auf 0: Zentrierung des Dialogs wiederherstellen */
  margin: auto;
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  background: var(--termin-bg);
  color: var(--termin-muted);
  overflow: auto;
  overscroll-behavior: contain;
}
.termin-dialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
}
html.termin-dialog-open {
  overflow: hidden;
}
.termin-dialog-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: var(--termin-bg);
  border-bottom: 1px solid var(--termin-divider);
}
.termin-dialog-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--termin-fg);
}
.termin-dialog-close {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--termin-line);
  background: transparent;
  color: var(--termin-fg);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.termin-dialog-close:hover {
  border-color: var(--termin-line);
}
.termin-dialog-body {
  padding: 1.5rem;
}

/* Bestätigung */
.termin-done p {
  color: var(--termin-fg);
  font-size: 15px;
}

/* Storno-Seite (api/termin/v1/storno) */
.termin-storno-page {
  padding-top: 0;
  background: var(--off-white);
}
.termin-storno {
  max-width: 560px;
  margin: 4rem auto;
  padding: 2.5rem;
  background: var(--white);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.termin-storno-brand {
  /* gleiche Masse wie das Logo im Seitenkopf (partials/header.html) */
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 5px;
  text-decoration: none;
  margin-bottom: 1rem;
}
.termin-storno-brand img {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}
.termin-storno-brand span {
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #1A1F1D;
  white-space: nowrap;
}
.termin-storno h1 {
  font-size: 2rem;
  font-weight: 500;
  color: var(--black);
  letter-spacing: -1px;
}
.termin-storno-summary strong {
  color: var(--black);
}
.termin-storno-form {
  margin-top: 0.5rem;
}
.termin-storno-form .termin-btn-primary {
  margin-left: 0;
}

/* Responsive */
@media (max-width: 1024px) {
  /* Sidebar rutscht ueber den Inhalt: die Sidebar-Instanz entfaellt (keine Requests, da nie sichtbar) */
  .art-sidebar [data-termin-widget] { display: none; }
  .termin-block { padding: 4rem 2rem; }
  .termin-position { padding: 0 2rem; }
  .termin-inner { grid-template-columns: 1fr; gap: 2rem; }
  .service-termin-card { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .termin-block { padding: 3rem 24px; }
  .termin-position { padding: 0 24px; }
  .termin-widget--schwebend { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  [data-termin-widget][data-variant="leiste"] { min-height: var(--termin-min-height-leiste-mobil, 170px); }
  /* Leiste mobil: Text, Termin-Kachel und Button untereinander in voller Breite */
  .termin-bar { flex-direction: column; align-items: stretch; }
  .termin-bar .termin-slot-tile,
  .termin-bar .termin-btn { width: 100%; margin-left: 0; }
  .termin-app { padding: 1.5rem; }
  .service-termin-card { padding-top: 1.5rem; }
  .service-termin-label { padding: 0 1.5rem; }
  .service-termin-card .termin-widget--voll > .termin-app { padding: 0.75rem 1.5rem 1.5rem; }
  .termin-form-grid { grid-template-columns: 1fr; }
  .termin-grid { border-spacing: 4px; margin: -4px; width: calc(100% + 8px); }
  .termin-day { font-size: 14px; height: 42px; border-radius: 8px; }
  .termin-storno { margin: 0; border-radius: 0; padding: 2rem 24px; min-height: 100vh; }
  .termin-dialog-body { padding: 1.25rem; }
  .termin-dialog-head { padding: 0.75rem 1.25rem; }
}
@media (max-width: 480px) {
  [data-termin-widget][data-variant="voll"] { min-height: var(--termin-min-height-voll-mobil, 670px); }
  .termin-app { padding: 1.25rem; }
  .service-termin-label { padding: 0 1.25rem; }
  .service-termin-card .termin-widget--voll > .termin-app { padding: 0.75rem 1.25rem 1.25rem; }
  .termin-actions { flex-direction: column-reverse; align-items: stretch; }
  .termin-btn-primary { margin-left: 0; }
  .termin-btn { width: 100%; }
  .termin-grid { border-spacing: 2px; margin: -2px; width: calc(100% + 4px); }
  .termin-day { height: 38px; }
}