/* =====================================================================
   Das Sehstudio der TBit GmbH – Online-Terminer
   Gestaltung „Editorial“: Weißraum, dünne Linien, klare Schrift.
   Die Farbe kommt aus den Fotos, nicht aus der Oberfläche.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Schriften vom eigenen Server. Nichts wird bei Google oder sonstwo
   nachgeladen – das ist datenschutzrechtlich die saubere Lösung und
   sorgt nebenbei dafür, dass die Seite auf jedem Gerät gleich aussieht.
   Beide Schriften stehen unter der SIL Open Font License, siehe
   assets/schriften/LIZENZ.txt
   --------------------------------------------------------------------- */
@font-face {
  font-family: "Terminer Sans";
  src: url("schriften/poppins-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Terminer Sans";
  src: url("schriften/poppins-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Terminer Sans";
  src: url("schriften/poppins-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
:root {
  /* --- Farbspektrum der Bildwelt, sparsam eingesetzt ----------------- */
  --gelb:    #f5a300;
  --orange:  #f26522;
  --rot:     #e5231b;
  --magenta: #d81b76;
  --violett: #7b3fbf;
  --blau:    #2b4fcf;
  --tuerkis: #00a499;
  --spektrum: linear-gradient(90deg,
      var(--gelb) 0%, var(--orange) 17%, var(--rot) 33%,
      var(--magenta) 50%, var(--violett) 67%, var(--blau) 84%, var(--tuerkis) 100%);

  /* --- Papier und Tinte --------------------------------------------- */
  --weiss:    #ffffff;
  --tinte:    #141110;
  --text:     #2f2b28;   /* 14 : 1 – auch bei schwachem Licht gut lesbar */
  --leise:    #5f5952;   /*  6,9 : 1 */
  --zart:     #8a837c;   /*  3,7 : 1 – nur für Beiwerk und Inaktives */
  --linie:    #ddd8d2;
  --fond:     #f7f5f2;

  --warnung:     #b4271d;
  --warnung-050: #fdf1ef;
  --gut:         #0f7a5f;
  --gut-050:     #eef6f3;

  /* --- Schrift ------------------------------------------------------
     Eigene Schriftdateien, oben eingebunden. Die Ersatzangaben greifen
     nur, falls eine Datei einmal nicht ausgeliefert wird.             */
  --schrift: "Terminer Sans", system-ui, -apple-system, "Segoe UI", Roboto,
             Helvetica, Arial, sans-serif;

  --breite: 40rem;
}

* { box-sizing: border-box; }

/* Muss vor allen display-Regeln stehen: sonst überschreibt z. B.
   `display: grid` das hidden-Attribut und ein unsichtbares Element
   fängt weiterhin alle Klicks ab. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--weiss);
  color: var(--text);
  font-family: var(--schrift);
  font-weight: 400;
  font-size: 1.02rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

a { color: var(--tinte); text-decoration-color: var(--zart); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--magenta); }

.huelle {
  width: 100%;
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.sprungmarke {
  position: absolute;
  left: -9999px;
  background: var(--tinte);
  color: #fff;
  padding: .7rem 1.2rem;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  z-index: 100;
}
.sprungmarke:focus { left: 0; top: 0; }

/* ------------------------------------------------------------- Marke */
/* Kleine gesetzte Auszeichnung, wie eine Rubrik in einer Zeitschrift */
.marke {
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--leise);
  font-weight: 500;
}

/* -------------------------------------------------------------- Kopf */
.kopf {
  border-bottom: 1px solid var(--linie);
  padding: 2.6rem 0 1.9rem;
  position: relative;
}
/* Haarstrich im Spektrum – der einzige Ort, an dem alle Farben stehen */
.kopf::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: var(--spektrum);
}
.kopf__inhalt { display: block; }

.kopf__auge { width: 2.6rem; height: 2.6rem; display: block; margin-bottom: 1.1rem; }

.kopf__marke {
  margin: 0;
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--leise);
  font-weight: 500;
}
.kopf__titel {
  margin: .85rem 0 0;
  font-size: clamp(1.95rem, 8vw, 2.6rem);
  line-height: 1.06;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--tinte);
}
/* Eine Schrift fuer die ganze Ueberschrift - der zweite Teil steht nur
   etwas leichter, damit die Zeile Rhythmus behaelt. */
.kopf__titel em { font-style: normal; font-weight: 400; }

.kopf__hinweis {
  margin: 1.15rem 0 0;
  font-size: .92rem;
  color: var(--text);
}
.kopf__hinweis a { color: var(--tinte); }

main { padding-bottom: 4rem; }

/* ------------------------------------------------------- Fortschritt */
.schritte {
  display: flex;
  align-items: center;
  gap: .9rem;
  list-style: none;
  margin: 0;
  padding: 1.4rem 0 1.2rem;
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--zart);
  border-bottom: 1px solid var(--linie);
  white-space: nowrap;
  overflow: hidden;
}
@media (min-width: 26rem) { .schritte { font-size: .66rem; letter-spacing: .14em; gap: .9rem; } }
.schritte__punkt { display: flex; align-items: baseline; gap: .4rem; }
.schritte__punkt span { font-variant-numeric: tabular-nums; }
/* Die Ziffer steht vor dem Wort, nicht in einem Kreis */
.schritte__punkt span::after { content: ""; }
.schritte__punkt--aktiv { color: var(--tinte); font-weight: 700; }
.schritte__punkt--fertig { color: var(--leise); }
.schritte__punkt--fertig span { color: var(--magenta); }
/* Auf schmalen Geräten stehen die Schritte ohne Trennstriche dicht an
   dicht, sonst rutscht der letzte aus dem Bild. */
.schritte { gap: 0; justify-content: space-between; }
.schritte__punkt + .schritte__punkt::before { content: none; }

@media (min-width: 27rem) {
  .schritte { gap: .9rem; justify-content: flex-start; }
  .schritte__punkt + .schritte__punkt::before {
    content: "";
    width: 1.1rem;
    height: 1px;
    background: var(--linie);
    margin-right: .5rem;
    align-self: center;
  }
}

/* ------------------------------------------------------------ Karten */
/* Keine Kacheln mit Schatten – Abschnitte, getrennt durch Linien */
.karte {
  padding: 2.2rem 0 2.4rem;
  border-bottom: 1px solid var(--linie);
}
.karte__titel em { font-style: normal; font-weight: 400; }
.karte__titel {
  margin: 0 0 .55rem;
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.2;
  color: var(--tinte);
}
.karte__untertitel {
  margin: 2rem 0 .9rem;
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--leise);
  font-weight: 500;
}
.karte__text { margin: 0 0 1.6rem; color: var(--text); font-size: 1rem; }
.karte__fussnote { margin: 1.3rem 0 0; font-size: .88rem; color: var(--leise); line-height: 1.7; }

.karte--erfolg { text-align: left; border-bottom: none; }
.haken {
  width: 2.6rem; height: 2.6rem;
  margin: 0 0 1.4rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--spektrum);
  color: #fff;
  font-size: 1.2rem;
}

/* --------------------------------------------------------- Hinweise */
.hinweis {
  padding: .95rem 1.1rem;
  margin: 1.4rem 0 0;
  font-size: .96rem;
  border-left: 2px solid var(--tinte);
  background: var(--fond);
}
.hinweis--fehler { border-left-color: var(--warnung); background: var(--warnung-050); color: var(--warnung); }
.hinweis--gut    { border-left-color: var(--gut);     background: var(--gut-050);     color: var(--gut); }

.reservierung {
  margin: 0 0 1.8rem;
  padding: .1rem 0 .1rem .9rem;
  border-left: 3px solid var(--gelb);
  font-size: .92rem;
  color: var(--text);
}
.reservierung strong { font-variant-numeric: tabular-nums; font-weight: 500; }

.leer-hinweis {
  padding: 1.4rem 0;
  color: var(--text);
  font-size: .96rem;
  border-top: 1px solid var(--linie);
}

/* ---------------------------------------------------------- Berater */
/* Zeilen über die volle Breite, nur durch Linien getrennt */
.berater {
  display: block;
  border-top: 1px solid var(--linie);
  margin: 0 -1.5rem;
}
/* Die Liste bringt ihre eigene Abschlusslinie mit */
#bereich-mitarbeiter,
#bereich-anliegen { border-bottom: none; padding-bottom: .6rem; }
.berater__karte {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  align-items: center;
  gap: 1.2rem;
  width: 100%;
  padding: 1.5rem;
  border: none;
  border-bottom: 1px solid var(--linie);
  background: var(--weiss);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: background .15s;
}
.berater__karte:hover { background: var(--fond); }
.berater__karte::after {
  content: "→";
  font-size: 1.05rem;
  color: var(--zart);
  transition: color .15s, transform .15s;
}
.berater__karte:hover::after { transform: translateX(3px); }
.berater__karte[aria-checked="true"]::after { color: var(--farbe, var(--magenta)); }
.berater__karte[aria-checked="true"]::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--farbe, var(--magenta));
}

.berater__foto {
  width: 88px;
  height: 110px;
  object-fit: cover;
  display: block;
  filter: grayscale(.35) contrast(1.03);
  transition: filter .2s;
}
.berater__karte:hover .berater__foto,
.berater__karte[aria-checked="true"] .berater__foto { filter: none; }

.berater__foto--leer,
.berater__foto--egal {
  display: grid;
  place-items: center;
  background: var(--fond);
  border: 1px solid var(--linie);
  font-weight: 400;
  font-size: 1.1rem;
  color: var(--leise);
  letter-spacing: .06em;
}
.berater__foto--egal { padding: .9rem; background: var(--weiss); }
.berater__foto--egal svg { width: 100%; height: auto; }

.berater__text { min-width: 0; }
.berater__name {
  display: block;
  font-size: 1.22rem;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.25;
  color: var(--tinte);
}
.berater__rolle {
  display: block;
  margin-top: .35rem;
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--leise);
}

/* --------------------------------------------------------- Anliegen */
.auswahl {
  display: block;
  border-top: 1px solid var(--linie);
  margin: 0 -1.5rem;
}
.auswahl__knopf {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  border-bottom: 1px solid var(--linie);
  background: var(--weiss);
  padding: 1.4rem 1.5rem;
  font: inherit;
  color: inherit;
  cursor: pointer;
  position: relative;
  transition: background .15s;
}
.auswahl__knopf:hover { background: var(--fond); }
.auswahl__knopf[aria-checked="true"]::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--magenta);
}
.auswahl__name {
  display: block;
  font-size: 1.12rem;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--tinte);
}
.auswahl__zusatz {
  display: block;
  margin-top: .3rem;
  font-size: .94rem;
  color: var(--text);
}
.auswahl__dauer {
  display: block;
  margin-top: .5rem;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--leise);
}

/* --------------------------------------------------------- Kalender */
.kalender { margin-bottom: 1.4rem; }
.kalender__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--linie);
  margin-bottom: 1rem;
}
.kalender__monat {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--tinte);
}
.kalender__pfeil {
  width: 2.4rem; height: 2.4rem;
  border: 1px solid var(--linie);
  background: var(--weiss);
  font-size: 1.1rem; line-height: 1;
  color: var(--tinte);
  cursor: pointer;
  transition: border-color .15s;
}
.kalender__pfeil:hover:not(:disabled) { border-color: var(--tinte); }
.kalender__pfeil:disabled { color: var(--zart); cursor: default; }

.kalender__wochentage,
.kalender__gitter {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .2rem;
}
.kalender__wochentage {
  margin-bottom: .5rem;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--leise);
  text-align: center;
}

.tag {
  position: relative;
  aspect-ratio: 1 / 1;
  min-height: 2.7rem;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  background: transparent;
  color: var(--zart);
  font: inherit;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  cursor: default;
}
.tag--leer { background: transparent; }
.tag--frei {
  color: var(--tinte);
  font-weight: 500;
  cursor: pointer;
}
/* Freie Tage bekommen einen Strich, keinen Punkt und keine Fläche */
.tag--frei::after {
  content: "";
  position: absolute;
  bottom: .45rem;
  width: 1.15rem;
  height: 1.5px;
  background: var(--magenta);
}
.tag--frei:hover { background: var(--fond); }
/* Ausgebuchte Tage verschwinden nicht - sie werden durchgestrichen.
   So sieht man, dass an dem Tag ueberhaupt Sprechzeiten waeren. */
.tag--voll {
  color: var(--zart);
  cursor: not-allowed;
}
.tag--voll::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.35rem;
  height: 1px;
  background: var(--zart);
  transform: translate(-50%, -50%) rotate(-20deg);
}
.tag--heute { border-color: var(--linie); }
.tag--gewaehlt,
.tag--frei.tag--gewaehlt:hover {
  background: var(--tinte);
  border-color: var(--tinte);
  color: #fff;
}
.tag--gewaehlt::after { background: #fff; }

.kalender__legende {
  margin: 1rem 0 0;
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--leise);
  display: flex; align-items: center; gap: .5rem;
}
.punkt { width: 1rem; height: 1.5px; background: var(--magenta); display: inline-block; }
.punkt--voll { background: var(--zart); margin-left: 1rem; transform: rotate(-20deg); }

/* ------------------------------------------------------------ Zeiten */
.slot-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.slot-zaehler {
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--leise);
  white-space: nowrap;
}

.slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: 0;
  border-top: 1px solid var(--linie);
}
.slot {
  border: none;
  border-bottom: 1px solid var(--linie);
  border-right: 1px solid var(--linie);
  background: var(--weiss);
  padding: .95rem .6rem;
  font: inherit;
  cursor: pointer;
  text-align: left;
  transition: background .15s;
}
.slot:hover { background: var(--fond); }

/* Belegte Zeiten bleiben stehen, damit der Kunde den Tag einschaetzen
   kann. Es steht nur "belegt" dort - nie ein Name. */
.slot--belegt {
  background: repeating-linear-gradient(
    -45deg,
    var(--fond) 0 6px,
    var(--weiss) 6px 12px
  );
  cursor: not-allowed;
}
.slot--belegt:hover { background: repeating-linear-gradient(
    -45deg,
    var(--fond) 0 6px,
    var(--weiss) 6px 12px
  ); }
.slot--belegt .slot__zeit {
  color: var(--zart);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.slot--belegt .slot__person { color: var(--zart); }
.slot__zeit {
  display: block;
  font-size: 1.12rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  color: var(--tinte);
}
.slot__person {
  display: block;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--leise);
  margin-top: .2rem;
}

/* ---------------------------------------------------------- Formular */
.feldgruppe { display: grid; gap: 0; }
@media (min-width: 30rem) {
  .feldgruppe { grid-template-columns: 1fr 1fr; gap: 0 1.4rem; }
  .feldgruppe--plz { grid-template-columns: 8rem 1fr; }
}

.feld { display: block; margin-bottom: 1.4rem; }
.feld__beschriftung {
  display: block;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--leise);
  margin-bottom: .4rem;
}
.feld__eingabe {
  width: 100%;
  padding: .55rem 0;
  font: inherit;
  font-size: 1.05rem;          /* verhindert Zoom auf iOS */
  font-weight: 400;
  color: var(--tinte);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--linie);
  border-radius: 0;
  transition: border-color .15s;
}
.feld__eingabe:focus {
  outline: none;
  border-bottom-color: var(--tinte);
  border-bottom-width: 2px;
  margin-bottom: -1px;
}
.feld__eingabe--fehler { border-bottom-color: var(--warnung); }
textarea.feld__eingabe { resize: vertical; min-height: 3.5rem; line-height: 1.6; }
select.feld__eingabe { appearance: none; }

.feld__fehler {
  display: none;
  margin-top: .35rem;
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--warnung);
}
.feld__fehler--sichtbar { display: block; }

.feld--code { max-width: 12rem; }
.feld__eingabe--code {
  font-size: 1.8rem;
  font-weight: 500;
  letter-spacing: .45rem;
  font-variant-numeric: tabular-nums;
}

.ankreuz {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  font-size: .92rem;
  color: var(--text);
  margin: 1.4rem 0 .3rem;
  line-height: 1.6;
}
.ankreuz input { margin-top: .25rem; width: 1rem; height: 1rem; flex: none; accent-color: var(--tinte); }

.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------ Rechenaufgabe */
.rechnung {
  margin: 1.8rem 0 0;
  padding: 1.2rem 0 0;
  border-top: 1px solid var(--linie);
}
.feld--rechnung { margin-bottom: .5rem; max-width: 16rem; }
.feld--rechnung .feld__beschriftung { text-transform: none; letter-spacing: 0; font-size: .95rem; font-weight: 400; color: var(--text); }
.feld--rechnung .feld__beschriftung strong {
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--tinte);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.feld__eingabe--rechnung { max-width: 5rem; font-size: 1.3rem; }
.rechnung__erklaerung { margin: 0; font-size: .86rem; color: var(--leise); line-height: 1.7; }

/* ----------------------------------------------------------- Knöpfe */
.knopfzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .7rem;
  margin-top: 2rem;
}
.knopf {
  appearance: none;
  border: 1px solid var(--tinte);
  border-radius: 0;
  padding: .9rem 1.6rem;
  font: inherit;
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.knopf:disabled { opacity: .4; cursor: default; }
.knopf--stark { background: var(--tinte); color: #fff; margin-left: auto; }
.knopf--stark:hover:not(:disabled) { background: #000; }
.knopf--leise { background: transparent; color: var(--tinte); border-color: var(--linie); }
.knopf--leise:hover:not(:disabled) { border-color: var(--tinte); }

.karte > .knopf--leise { margin-top: 2rem; }

/* -------------------------------------------------------------- Fuß */
.fuss {
  border-top: 1px solid var(--linie);
  padding: 1.8rem 0 3rem;
  font-size: .84rem;
  letter-spacing: .02em;
  color: var(--leise);
  line-height: 1.9;
}
.fuss p { margin: 0; }
.fuss a { color: var(--leise); }

/* ------------------------------------------------------------ Lader */
.lader {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .72);
  z-index: 50;
}
.lader__ring {
  width: 1.9rem; height: 1.9rem;
  border: 1px solid var(--linie);
  border-top-color: var(--tinte);
  border-radius: 50%;
  animation: dreh .9s linear infinite;
}
@keyframes dreh { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

:focus-visible { outline: 2px solid var(--tinte); outline-offset: 3px; }

/* ------------------------------------------------------ Zurück oben */
.zurueck {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 1.5rem;
  padding: .35rem 0;
  border: none;
  background: none;
  font: inherit;
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--leise);
  cursor: pointer;
  border-bottom: 1px solid var(--linie);
  transition: color .15s, border-color .15s;
}
.zurueck:hover { color: var(--tinte); border-bottom-color: var(--tinte); }
.zurueck span { font-size: .9rem; transition: transform .15s; }
.zurueck:hover span { transform: translateX(-3px); }

/* --------------------------------------------------------- Freigabe */
.freigabe {
  margin: 1.2rem 0 0;
  padding: 1.1rem 0 .2rem;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}
.freigabe__text { margin: 0 0 1rem; font-size: .86rem; color: var(--text); }
.freigabe__zeile { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.freigabe__zeile .feld { margin-bottom: .6rem; flex: 1 1 12rem; }
.freigabe__zeile .knopf { margin-bottom: .6rem; }
.freigabe--gut { border-color: var(--gut); }