/* ==========================================================================
   corelay - Sektion 5.6: Kundenstimmen und Terminbuchung (Startseite)
   --------------------------------------------------------------------------
   Geteilte Sektion ueber die volle Fensterbreite: links die dunkle Haelfte mit
   dem Kundenstimmen-Slider, rechts die weisse Haelfte mit dem Buchungs-Widget.
   Kein aeusserer Seitenabstand - die Innenabstaende sitzen in den Haelften
   (--half-pad, clamp(40px, 5vw, 64px)).

   Setzt auf css/tokens.css, css/base.css und css/layout.css auf. Flaechen,
   Typo-Skala, Buttons, Icons und das Einblenden kommen vollstaendig aus dem
   Design-System - diese Datei ergaenzt ausschliesslich die Eigenheiten der
   Sektion. Alle Selektoren stehen unter dem Praefix .stimmen, damit nichts
   mit anderen Sektionen kollidiert.

   Inhalt
     1. Sektionsgeruest und Zweiteilung
     2. Linke Haelfte - Flaeche, Textur, Inhaltsspalte
     3. Linke Haelfte - Label und Ueberschrift
     4. Slider - Folien
     5. Zitat, Avatar und Person
     6. Steuerzeile - Punkte und Pfeilbuttons
     7. Rechte Haelfte - Flaeche und Kopf
     8. Buchungs-Widget - Karte und inneres Raster
     9. Kalender - Kopf und Wochentagszeile
    10. Kalender - Datumsraster
    11. Zeitfenster
    12. Bestaetigen und Hinweiszeile
    13. Fokusring auf runden Bedienelementen
    14. Staffelung des Einblendens
    15. Breakpoint 1200px
    16. Breakpoint 1024px
    17. Breakpoint 900px - Haelften untereinander
    18. Breakpoint 900-1100px - Buchungs-Widget einspaltig
    19. Breakpoint 700px
    20. Breakpoint 560px - Kalender und Zeiten untereinander
    21. Breakpoint 400px - Innenabstaende der Haelften
    22. Breakpoint 380px
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Sektionsgeruest und Zweiteilung
   --------------------------------------------------------------------------
   Die Sektion traegt bewusst kein .section: der vertikale Abstand steckt in
   den beiden Haelften. .wrap-full liefert die randlose volle Breite, das
   Raster teilt sie in zwei gleich hohe Spalten.
   -------------------------------------------------------------------------- */

.stimmen {
  position: relative;
  scroll-margin-top: var(--header-h);
}

.stimmen-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

/* Steht nur eine Haelfte im Raster - zurzeit die Terminbuchung, seit die
   erfundenen Kundenstimmen entfernt wurden -, nimmt sie die volle Breite.
   Mittig bleibt der Inhalt durch die max-width der Innenspalte. Kommen
   echte Stimmen zurueck, greift wieder die Zweiteilung darueber. */
.stimmen-split:has(> :only-child) {
  grid-template-columns: minmax(0, 1fr);
}


/* --------------------------------------------------------------------------
   2. Linke Haelfte - Flaeche, Textur, Inhaltsspalte
   --------------------------------------------------------------------------
   Flaeche (.bg-dark), Punktraster (.dot-grid, ::before) und Rauschen (.noise)
   stehen im Markup. Das ::after ergaenzt den weichen, abgedunkelten Verlauf
   aus der Spezifikation - es ist frei, weil .glow hier nicht eingesetzt wird.
   -------------------------------------------------------------------------- */

.stimmen-quotes {
  display: flex;
  padding: var(--half-pad);
}

.stimmen-quotes::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 100% at 8% 0%, rgba(47, 128, 255, .10), rgba(11, 17, 32, 0) 58%),
    linear-gradient(180deg, rgba(8, 12, 22, 0) 45%, rgba(8, 12, 22, .55) 100%);
}

/* Inhalt liegt ueber Punktraster und Verlauf */
.stimmen-quotes-inner {
  position: relative;
  z-index: var(--z-raised);
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
}


/* --------------------------------------------------------------------------
   3. Linke Haelfte - Label und Ueberschrift
   -------------------------------------------------------------------------- */

.stimmen-label {
  color: var(--blue-400);
  margin-bottom: var(--sp-3);
}

.stimmen-titel {
  color: var(--t-on-dark);
  margin-bottom: var(--sp-7);
}


/* --------------------------------------------------------------------------
   4. Slider - Folien
   --------------------------------------------------------------------------
   js/main.js blendet die Folien ueber das Attribut [hidden] um. Die
   Mindesthoehe haelt die Steuerzeile beim Wechsel ruhig; sobald die Haelften
   untereinander stehen (900px), faellt sie weg.
   -------------------------------------------------------------------------- */

.stimmen-slider {
  min-height: 230px;
  margin-bottom: var(--sp-8);
}

.stimmen-slide {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  margin: 0;
  animation: stimmen-einblenden var(--dur-slow) var(--ease) both;
}

/* [hidden] muss die Flex-Anzeige sicher ueberschreiben */
.stimmen-slide[hidden] {
  display: none;
}

@keyframes stimmen-einblenden {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}


/* --------------------------------------------------------------------------
   5. Zitat, Avatar und Person
   -------------------------------------------------------------------------- */

.stimmen-zitat {
  margin: 0;
}

.stimmen-zitat p {
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--t-on-dark-soft);
}

.stimmen-person {
  display: flex;
  align-items: center;
  gap: 14px;
}

.stimmen-avatar {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: var(--r-pill);
  background-color: var(--ink-850);
}

.stimmen-person-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.stimmen-name {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  color: var(--t-on-dark);
}

.stimmen-rolle {
  font-size: 13px;
  line-height: 1.4;
  color: var(--t-on-dark-mute);
}


/* --------------------------------------------------------------------------
   6. Steuerzeile - Punkte und Pfeilbuttons
   --------------------------------------------------------------------------
   margin-top: auto haelt die Zeile am unteren Rand der Haelfte, damit sie auf
   Augenhoehe mit dem Buchungs-Widget rechts abschliesst.
   -------------------------------------------------------------------------- */

.stimmen-steuerung {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: auto;
}

/* --- 6.1 Punkte ------------------------------------------------------------ */

.stimmen-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stimmen-dot {
  position: relative;
  width: 8px;
  height: 8px;
  padding: 0;
  flex: none;
  border: 0;
  border-radius: var(--r-pill);
  background-color: rgba(255, 255, 255, .22);
  cursor: pointer;
  transition:
    width var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}

/* Grosszuegige Trefferflaeche, ohne den Punkt optisch zu vergroessern */
.stimmen-dot::before {
  content: "";
  position: absolute;
  inset: -11px -6px;
}

.stimmen-dot:hover {
  background-color: rgba(255, 255, 255, .42);
}

/* Aktiver Punkt: blau und auf 20px verbreitert. Beide Zustandsformen werden
   unterstuetzt, damit das Skript wahlweise .is-active oder aria-current setzt. */
.stimmen-dot.is-active,
.stimmen-dot[aria-current="true"],
.stimmen-dot[aria-pressed="true"] {
  width: 20px;
  background-color: var(--blue-500);
}

/* --- 6.2 Pfeilbuttons ------------------------------------------------------ */

.stimmen-pfeile {
  display: flex;
  gap: 10px;
}

.stimmen-pfeil {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  flex: none;
  border: 1px solid var(--ink-border);
  border-radius: var(--r-pill);
  background-color: transparent;
  color: var(--t-on-dark-soft);
  cursor: pointer;
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

/* 36px optisch, 40px zum Antippen. Der Abstand der beiden Pfeile betraegt
   10px, die Trefferflaechen beruehren sich also nicht. */
.stimmen-pfeil::before {
  content: "";
  position: absolute;
  inset: -3px;
}

.stimmen-pfeil .ico {
  width: 15px;
  height: 15px;
}

.stimmen-pfeil:hover {
  background-color: var(--blue-500);
  border-color: var(--blue-500);
  color: var(--t-on-dark);
}

.stimmen-pfeil:active {
  background-color: var(--blue-600);
  border-color: var(--blue-600);
}


/* --------------------------------------------------------------------------
   7. Rechte Haelfte - Flaeche und Kopf
   -------------------------------------------------------------------------- */

.stimmen-buchung {
  display: flex;
  padding: var(--half-pad);
}

.stimmen-buchung-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
}

.stimmen-buchung-kopf {
  margin-bottom: var(--sp-7);
}

.stimmen-buchung-kopf .h3 {
  margin-bottom: var(--sp-3);
}

.stimmen-buchung-text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}


/* --------------------------------------------------------------------------
   8. Buchungs-Widget - Karte und inneres Raster
   -------------------------------------------------------------------------- */

.stimmen-widget {
  padding: 20px;
  background-color: var(--paper-100);
  border-radius: var(--r-card);
}

.stimmen-widget-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: var(--sp-5);
  align-items: start;
}


/* --------------------------------------------------------------------------
   9. Kalender - Kopf und Wochentagszeile
   -------------------------------------------------------------------------- */

.stimmen-kal-kopf {
  display: grid;
  grid-template-columns: 28px 1fr 28px;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.stimmen-kal-label {
  font-family: var(--ff-display);
  font-size: 16px;
  font-weight: var(--fw-bold);
  line-height: 1.3;
  letter-spacing: -.01em;
  text-align: center;
  color: var(--t-on-light);
}

.stimmen-kal-nav {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  flex: none;
  border: 0;
  border-radius: var(--r-pill);
  background-color: transparent;
  color: var(--t-on-light-soft);
  cursor: pointer;
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

/* Grosszuegige Trefferflaeche wie bei .stimmen-dot: 28px optisch, 40px zum
   Antippen. Das ::before liegt absolut und faellt deshalb aus dem Raster des
   Buttons heraus - die Zentrierung des Icons bleibt unberuehrt. Die Nachbarn
   sind 8px entfernt und werden nicht ueberdeckt. */
.stimmen-kal-nav::before {
  content: "";
  position: absolute;
  inset: -6px;
}

.stimmen-kal-nav .ico {
  width: 14px;
  height: 14px;
}

.stimmen-kal-nav:hover {
  background-color: var(--blue-50);
  color: var(--blue-500);
}

.stimmen-kal-woche {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  justify-items: center;
  margin-bottom: 6px;
  font-size: 11px;
  line-height: 1.4;
  font-weight: var(--fw-medium);
  color: var(--t-on-light-mute);
}


/* --------------------------------------------------------------------------
   10. Kalender - Datumsraster
   --------------------------------------------------------------------------
   Sieben Spalten, Zellen 30px, Zahlen 13px. Der ausgewaehlte Tag traegt
   aria-pressed="true" - der Zustand wird ausschliesslich darueber gestylt,
   das Skript muss also nur das Attribut pflegen.
   -------------------------------------------------------------------------- */

.stimmen-kal-raster {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  justify-items: center;
  row-gap: 4px;
}

/* Der Kreis bleibt optisch 30px gross, schrumpft aber mit, wenn eine Spur
   schmaler als 30px wird. Eine feste Breite wuerde dort ueber die Spur
   hinausragen und die Nachbarzahlen ueberdecken - deshalb width: min(...)
   statt width: 30px. aspect-ratio haelt den Kreis rund; die Terminseite
   ueberschreibt beide Werte in css/sections/termin-seite.css. */
.stimmen-tag {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 30px);
  height: auto;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background-color: transparent;
  font-family: var(--ff-body);
  font-size: 13px;
  font-weight: var(--fw-medium);
  line-height: 1;
  color: var(--t-on-light);
  cursor: pointer;
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

/* Trefferflaeche nach oben und unten bis in den Zeilenabstand hinein
   (30px + 2 x 2px = 34px hoch). Bewusst nur senkrecht: waagerecht stehen die
   Tage je nach Fensterbreite dicht an dicht, eine Verbreiterung wuerde die
   Trefferflaechen der Nachbartage ueberlappen und zu Fehlgriffen fuehren. */
.stimmen-tag::before {
  content: "";
  position: absolute;
  inset: -2px 0;
}

.stimmen-tag:hover:not([disabled]) {
  background-color: var(--blue-50);
  color: var(--blue-600);
}

/* Ausgewaehlter Tag: gefuellter blauer Kreis mit weisser Zahl */
.stimmen-tag[aria-pressed="true"] {
  background-color: var(--blue-500);
  color: #fff;
  font-weight: var(--fw-semibold);
}

.stimmen-tag[aria-pressed="true"]:hover {
  background-color: var(--blue-600);
  color: #fff;
}

/* Wochenenden und vergangene Tage: blass und nicht klickbar */
.stimmen-tag[disabled] {
  color: var(--t-on-light-mute);
  opacity: .55;
  cursor: default;
}

/* Tage der Nachbarmonate: noch blasser */
.stimmen-tag--aussen {
  opacity: .3;
}


/* --------------------------------------------------------------------------
   11. Zeitfenster
   --------------------------------------------------------------------------
   Raster 3x2 aus Pillen. Der vorausgewaehlte Eintrag (10:00) traegt
   aria-pressed="true".
   -------------------------------------------------------------------------- */

.stimmen-zeiten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-content: start;
}

.stimmen-zeit {
  display: grid;
  place-items: center;
  height: 34px;
  padding: 0 6px;
  border: 1px solid var(--paper-200);
  border-radius: var(--r-input);
  background-color: var(--paper);
  font-family: var(--ff-body);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--t-on-light);
  cursor: pointer;
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.stimmen-zeit:hover {
  border-color: var(--blue-500);
  color: var(--blue-600);
}

.stimmen-zeit[aria-pressed="true"] {
  background-color: var(--blue-500);
  border-color: transparent;
  color: #fff;
}

.stimmen-zeit[aria-pressed="true"]:hover {
  background-color: var(--blue-600);
  border-color: transparent;
  color: #fff;
}

.stimmen-zeit[disabled] {
  opacity: .45;
  cursor: default;
}


/* --------------------------------------------------------------------------
   12. Bestaetigen und Hinweiszeile
   -------------------------------------------------------------------------- */

.stimmen-bestaetigen {
  min-height: 44px;
  margin-top: var(--sp-5);
}

.stimmen-hinweis {
  margin-top: 10px;
  text-align: center;
}


/* --------------------------------------------------------------------------
   13. Fokusring auf runden Bedienelementen
   --------------------------------------------------------------------------
   css/base.css setzt bei :focus-visible border-radius: 4px. Die runden
   Elemente dieser Sektion behalten ihre Pillenform.
   -------------------------------------------------------------------------- */

.stimmen-dot:focus-visible,
.stimmen-pfeil:focus-visible,
.stimmen-kal-nav:focus-visible,
.stimmen-tag:focus-visible,
.stimmen-zeit:focus-visible,
.stimmen-bestaetigen:focus-visible {
  border-radius: var(--r-pill);
}


/* --------------------------------------------------------------------------
   14. Staffelung des Einblendens
   --------------------------------------------------------------------------
   js/main.js setzt .is-visible, die Verzoegerung steuert --reveal-delay.
   -------------------------------------------------------------------------- */

.stimmen-quotes-inner { --reveal-delay: 0ms; }
.stimmen-buchung-kopf { --reveal-delay: 80ms; }
.stimmen-widget { --reveal-delay: 180ms; }


/* --------------------------------------------------------------------------
   15. Breakpoint 1200px
   -------------------------------------------------------------------------- */

@media (max-width: 1199.98px) {

  .stimmen-widget {
    padding: 18px;
  }

  .stimmen-widget-grid {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--sp-4);
  }

  .stimmen-titel {
    margin-bottom: var(--sp-6);
  }
}


/* --------------------------------------------------------------------------
   16. Breakpoint 1024px
   -------------------------------------------------------------------------- */

@media (max-width: 1023.98px) {

  .stimmen-slider {
    min-height: 250px;
    margin-bottom: var(--sp-7);
  }

  .stimmen-widget-grid {
    grid-template-columns: 1.15fr 1fr;
    gap: var(--sp-3);
  }

  .stimmen-zeit {
    height: 32px;
    font-size: 12.5px;
  }
}


/* --------------------------------------------------------------------------
   17. Breakpoint 900px - Haelften untereinander
   --------------------------------------------------------------------------
   Ab hier stapeln sich die beiden Haelften. Die Inhalte duerfen wieder auf
   volle Lesebreite laufen, die Mindesthoehe des Sliders entfaellt.
   -------------------------------------------------------------------------- */

@media (max-width: 899.98px) {

  .stimmen-split {
    grid-template-columns: minmax(0, 1fr);
  }

  .stimmen-quotes-inner,
  .stimmen-buchung-inner {
    max-width: 640px;
  }

  .stimmen-slider {
    min-height: 0;
    margin-bottom: var(--sp-7);
  }

  .stimmen-widget-grid {
    grid-template-columns: 1.25fr 1fr;
    gap: var(--sp-5);
  }

  .stimmen-widget {
    padding: 20px;
  }

  .stimmen-zeit {
    height: 34px;
    font-size: 13px;
  }
}


/* --------------------------------------------------------------------------
   18. Breakpoint 900-1100px - Buchungs-Widget einspaltig
   --------------------------------------------------------------------------
   In diesem Fenster stehen die beiden Haelften noch nebeneinander, die rechte
   Haelfte ist aber schon zu schmal fuer zwei Spalten im Widget: Bei 1024px
   bleiben fuer die Kalenderspalte nur rund 195px, also 27.9px je Wochentag -
   weniger als die 30px des Tageskreises. Der Kalender steht deshalb hier oben
   und die Zeitfenster darunter, genau wie unter 560px. Die Regel steht nach
   den Bloecken 15 bis 17, damit sie deren Spaltenvorgaben ueberschreibt.
   -------------------------------------------------------------------------- */

@media (min-width: 900px) and (max-width: 1099.98px) {

  .stimmen-widget-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-5);
  }
}


/* --------------------------------------------------------------------------
   19. Breakpoint 700px
   -------------------------------------------------------------------------- */

@media (max-width: 699.98px) {

  .stimmen-titel,
  .stimmen-buchung-kopf {
    margin-bottom: var(--sp-6);
  }

  .stimmen-slide {
    gap: var(--sp-5);
  }

  .stimmen-widget-grid {
    gap: var(--sp-4);
  }
}


/* --------------------------------------------------------------------------
   20. Breakpoint 560px - Kalender und Zeiten untereinander
   --------------------------------------------------------------------------
   Innerhalb der rechten Haelfte reicht die Breite nicht mehr fuer zwei
   Spalten: der Kalender steht oben, die Zeitfenster darunter.
   -------------------------------------------------------------------------- */

@media (max-width: 559.98px) {

  .stimmen-widget-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-5);
  }

  .stimmen-kal-raster {
    row-gap: 6px;
  }

  .stimmen-tag {
    width: min(100%, 34px);
  }

  /* Zeilenabstand ist hier 6px - die Trefferflaeche darf entsprechend
     wachsen, ohne die Nachbarzeile zu ueberlappen (34px + 2 x 3px = 40px). */
  .stimmen-tag::before {
    inset: -3px 0;
  }

  .stimmen-zeiten {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .stimmen-zeit {
    height: 36px;
  }

  .stimmen-steuerung {
    margin-top: var(--sp-2);
  }
}


/* --------------------------------------------------------------------------
   21. Breakpoint 400px - Innenabstaende der Haelften
   --------------------------------------------------------------------------
   --half-pad ist eine clamp()-Groesse mit Mindestwert 40px. Auf sehr schmalen
   Geraeten fressen die seitlichen Innenabstaende damit 80px von 320px auf -
   die Inhaltsspalte waere schmaler als im uebrigen Layout. Hier laeuft sie
   deshalb waagerecht auf das normale Seitenpadding zurueck; der vertikale
   Abstand bleibt unveraendert bei --half-pad.
   -------------------------------------------------------------------------- */

@media (max-width: 399.98px) {

  .stimmen-quotes,
  .stimmen-buchung {
    padding: var(--half-pad) var(--wrap-pad-sm);
  }
}


/* --------------------------------------------------------------------------
   22. Breakpoint 380px
   -------------------------------------------------------------------------- */

@media (max-width: 379.98px) {

  .stimmen-widget {
    padding: 14px;
  }

  .stimmen-zitat p {
    font-size: var(--fs-body-sm);
    line-height: 1.7;
  }

  .stimmen-avatar {
    width: 42px;
    height: 42px;
  }

  .stimmen-tag {
    width: min(100%, 30px);
    font-size: 12.5px;
  }

  .stimmen-kal-label {
    font-size: 15px;
  }

  .stimmen-zeit {
    height: 34px;
    padding: 0 4px;
    font-size: 12.5px;
  }

  .stimmen-pfeil {
    width: 34px;
    height: 34px;
  }

  /* Trefferflaeche bleibt bei 40px, obwohl der Button kleiner wird */
  .stimmen-pfeil::before {
    inset: -4px;
  }
}