/* Session Planer – Web-App für Buchungen. Keine externen Schriften, keine Bibliotheken. */

:root {
  color-scheme: dark;
  --bg: #0b1410;
  --flaeche: #111c17;
  --flaeche-2: #16241d;
  --linie: #22322a;
  --linie-stark: #3b5247;
  --text: #eef5f0;
  --still: #9fb3a7;
  --primaer: #3ddc84;
  --primaer-text: #062012;
  --primaer-hover: #5ee69b;
  --link: #3ddc84;
  --warnung: #e9b44c;
  --warnung-flaeche: #2a2312;
  --fehler: #e8603f;
  --fehler-flaeche: #2c1610;
  --fokus: #f4d35e;
  --radius: 18px;
  --radius-klein: 12px;
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: #f4f6f5;
    --flaeche: #ffffff;
    --flaeche-2: #eef2ef;
    --linie: #d3dbd6;
    --linie-stark: #7d8f84;
    --text: #1e2a23;
    --still: #4b5a51;
    --primaer: #157f48;
    --primaer-text: #ffffff;
    --primaer-hover: #12723f;
    --link: #11683a;
    --warnung: #7a5200;
    --warnung-flaeche: #fdf3dc;
    --fehler: #b23a1c;
    --fehler-flaeche: #fdeae4;
    --fokus: #1b4fd1;
  }
}

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.125rem;          /* 18px bei Standardgrösse, wächst mit der Systemschrift */
  line-height: 1.5;
  overflow-wrap: anywhere;
}

a { color: var(--link); text-underline-offset: 0.18em; }

:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 3px;
  border-radius: 6px;
}
.titel:focus, .inhalt:focus { outline: none; }
.titel:focus-visible { outline: 3px solid var(--fokus); }

.sprung {
  position: absolute;
  left: 1rem;
  top: -10rem;
  z-index: 10;
  padding: 0.75rem 1rem;
  background: var(--flaeche);
  color: var(--text);
  border-radius: var(--radius-klein);
}
.sprung:focus { top: 1rem; }

.offline {
  padding: 0.75rem 1rem;
  background: var(--warnung-flaeche);
  color: var(--text);
  border-bottom: 2px solid var(--warnung);
  text-align: center;
  font-weight: 600;
}

.inhalt {
  flex: 1 0 auto;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 1.5rem 1rem 2rem;
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
}

.ansicht > * + * { margin-top: 1.25rem; }

.titel {
  font-size: 1.75rem;
  line-height: 1.25;
  margin: 0;
  font-weight: 700;
}

h2, .h2 {
  font-size: 1.3rem;
  line-height: 1.3;
  margin: 2rem 0 0.75rem;
  font-weight: 700;
}

p { margin: 0; }
.still { color: var(--still); }
.klein { font-size: 1rem; }

.kopf { display: flex; flex-direction: column; gap: 0.35rem; }
.kopf .still { font-size: 1.05rem; }

.schrittzeile {
  color: var(--still);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ---------- Karten und Listen ---------- */

.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
}

.liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.guthaben__name { font-weight: 700; }
.guthaben__art { color: var(--still); font-size: 1rem; }
.guthaben__wert { font-size: 1.15rem; margin-top: 0.15rem; }
.guthaben--leer { border-color: var(--warnung); }
.guthaben--leer .guthaben__wert { color: var(--warnung); font-weight: 700; }
.guthaben__hinweis { color: var(--warnung); font-size: 1rem; margin-top: 0.35rem; }

.termin { display: flex; flex-direction: column; gap: 0.6rem; }
.termin__wann { font-weight: 700; font-size: 1.15rem; }
.termin__was { color: var(--still); font-weight: 400; }
.termin__hinweis { color: var(--still); font-size: 1rem; }

.leer {
  border: 1px dashed var(--linie-stark);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  color: var(--still);
}

/* ---------- Knöpfe ---------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.5rem;           /* 56px */
  padding: 0.75rem 1.4rem;
  border: 2px solid transparent;
  border-radius: 14px;
  font: inherit;
  font-size: 1.2rem;            /* fett und ≥ 18.66px: zählt als grosse Schrift */
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  background: var(--primaer);
  color: var(--primaer-text);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.knopf:hover { background: var(--primaer-hover); }
.knopf[disabled], .knopf[aria-disabled="true"] {
  cursor: not-allowed;
  background: var(--flaeche-2);
  color: var(--still);
  border-color: var(--linie);
}
.knopf--breit { width: 100%; }

.knopf--zweit {
  background: transparent;
  color: var(--text);
  border-color: var(--linie-stark);
}
.knopf--zweit:hover { background: var(--flaeche-2); }

.knopf--gefahr {
  background: transparent;
  color: var(--fehler);
  border-color: var(--fehler);
}
.knopf--gefahr:hover { background: var(--fehler-flaeche); }

.knopf--klein {
  min-height: 3rem;             /* 48px */
  font-size: 1.05rem;
  padding: 0.5rem 1rem;
}

.knopfreihe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.knopfreihe > .knopf { flex: 1 1 12rem; }

.textknopf {
  background: none;
  border: 0;
  padding: 0.6rem 0.25rem;
  min-height: 3rem;
  font: inherit;
  font-size: 1.05rem;
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}

.zurueck {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.zurueck::before { content: "←"; content: "←" / ""; text-decoration: none; display: inline-block; }

/* ---------- Formular ---------- */

.feld { display: flex; flex-direction: column; gap: 0.5rem; }
.feld label { font-weight: 700; }

.eingabe {
  width: 100%;
  min-height: 3.5rem;
  padding: 0.75rem 1rem;
  font: inherit;
  font-size: 1.15rem;
  color: var(--text);
  background: var(--flaeche);
  border: 2px solid var(--linie-stark);
  border-radius: var(--radius-klein);
}
.eingabe[aria-invalid="true"] { border-color: var(--fehler); }
.feldfehler { color: var(--fehler); font-weight: 600; font-size: 1.05rem; }

.hinweis {
  border-radius: var(--radius-klein);
  padding: 0.85rem 1rem;
  border-left: 5px solid var(--linie-stark);
  background: var(--flaeche);
}
.hinweis:empty { display: none; }
.hinweis--fehler { border-left-color: var(--fehler); background: var(--fehler-flaeche); }
.hinweis--ok { border-left-color: var(--primaer); }
.hinweis--warnung { border-left-color: var(--warnung); background: var(--warnung-flaeche); }

/* ---------- Buchen: Angebote ---------- */

.angebot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  width: 100%;
  min-height: 4rem;
  padding: 1rem 1.15rem;
  text-align: left;
  font: inherit;
  color: var(--text);
  background: var(--flaeche);
  border: 2px solid var(--linie);
  border-radius: var(--radius);
  cursor: pointer;
}
button.angebot:hover { border-color: var(--primaer); }
.angebot__name { font-weight: 700; font-size: 1.2rem; }
.angebot__info { color: var(--still); font-size: 1rem; }
.angebot--gesperrt { cursor: default; border-style: dashed; }
.angebot--gesperrt .angebot__name { color: var(--still); }
.angebot__grund { color: var(--warnung); font-size: 1rem; margin-top: 0.3rem; }

/* ---------- Buchen: Tage ---------- */

.tage {
  list-style: none;
  margin: 0 -1rem;
  padding: 0.25rem 1rem 0.75rem;
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.tage li { flex: 0 0 auto; scroll-snap-align: start; }

.tag {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 4.6rem;
  min-height: 4.6rem;
  padding: 0.5rem 0.6rem;
  font: inherit;
  color: var(--text);
  background: var(--flaeche);
  border: 2px solid var(--linie);
  border-radius: 14px;
  cursor: pointer;
}
.tag__wt { font-size: 0.95rem; color: var(--still); font-weight: 600; }
.tag__dat { font-size: 1.15rem; font-weight: 700; }
.tag[aria-pressed="true"] {
  background: var(--primaer);
  color: var(--primaer-text);
  border-color: var(--primaer);
}
.tag[aria-pressed="true"] .tag__wt { color: var(--primaer-text); }

.tagwahl-nav { display: flex; gap: 0.75rem; }
.tagwahl-nav > .knopf { flex: 1 1 0; }

/* ---------- Buchen: Zeiten ---------- */

.zeiten {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: 0.6rem;
}
.zeit {
  width: 100%;
  min-height: 3.5rem;
  font: inherit;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
  background: var(--flaeche);
  border: 2px solid var(--linie-stark);
  border-radius: 14px;
  cursor: pointer;
}
.zeit:hover { border-color: var(--primaer); }

/* ---------- Bestätigen ---------- */

.zusammenfassung { margin: 0; display: grid; gap: 0.85rem; }
.zusammenfassung div { display: flex; flex-direction: column; }
.zusammenfassung dt { color: var(--still); font-size: 1rem; }
.zusammenfassung dd { margin: 0; font-weight: 700; font-size: 1.15rem; }

.wahl { border: 0; margin: 0; padding: 0; }
.wahl legend { font-weight: 700; padding: 0; margin-bottom: 0.5rem; }
.wahl__opt {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 3.5rem;
  padding: 0.6rem 1rem;
  margin-top: 0.5rem;
  background: var(--flaeche);
  border: 2px solid var(--linie);
  border-radius: var(--radius-klein);
  cursor: pointer;
}
.wahl__opt:has(input:checked) { border-color: var(--primaer); }
.wahl__opt input {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--primaer);
}

.erfolg-zeichen {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--primaer);
  color: var(--primaer-text);
  font-size: 2rem;
  font-weight: 700;
}

/* ---------- Dialog ---------- */

.dialog {
  width: min(32rem, calc(100vw - 2rem));
  padding: 0;
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius);
  background: var(--flaeche);
  color: var(--text);
}
.dialog::backdrop { background: rgb(0 0 0 / 0.6); }
.dialog__form { padding: 1.4rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
.dialog__titel { margin: 0; font-size: 1.35rem; }
.dialog__text { margin: 0; }

/* ---------- Fuss ---------- */

.fuss {
  flex-shrink: 0;
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
  padding: 1.5rem 1rem 2rem;
  padding-bottom: max(2rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--linie);
  color: var(--still);
  font-size: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}
.fuss a { display: inline-block; padding: 0.6rem 0; min-height: 3rem; }

@media (prefers-reduced-motion: no-preference) {
  .tage { scroll-behavior: smooth; }
}

@media (forced-colors: active) {
  .tag[aria-pressed="true"] { outline: 3px solid Highlight; }
  .knopf { border-color: ButtonText; }
}