/* Terminbuchung – schlicht, schwarz auf weiß.
   Farbwerte absichtlich identisch mit dem Dashboard (server/public/styles.css),
   damit beide Oberflächen zusammengehören. Blau = Hauptaktion, Orange = Auswahl. */
:root{
  --bg:#f4f5f7; --panel:#ffffff; --border:#e2e4e9; --text:#1c2430; --muted:#68707e;
  --btn:#8ec1ff; --btn-hover:#6faef9; --btn-text:#061739;
  --sel:#f6ac0a; --sel-soft:rgba(246,172,10,.20);
  --danger:#b3261e; --danger-soft:#fdecea; --ok:#1a7f4b; --ok-soft:#e5f4ec;
  --radius:10px; --shadow:0 1px 3px rgba(20,30,50,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;
  padding:24px 16px;
}
/* Oben 7 px weniger, dafür 7 px mehr unter dem Logo – der Abstand wandert also von
   über dem Logo darunter, die Karte bleibt gleich hoch. */
.karte{
  max-width:760px;margin:0 auto;background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:21px 28px 28px;
}
.logo img{height:30px;width:auto;display:block;margin-bottom:29px}
h1{font-size:21px;font-weight:700;margin-bottom:6px}
.untertitel{color:var(--muted);margin-bottom:22px}
.hinweis{
  border:1px solid var(--border);border-radius:8px;background:var(--bg);
  padding:14px 16px;color:var(--muted);
}
.klein{font-size:12.5px;color:var(--muted)}
.trenner{border-top:1px solid var(--border);margin:22px 0 0}
/* Schrittüberschriften: schwarz und zwei Punkt größer als die Feldbeschriftungen. */
.feldname{
  color:var(--text);font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  margin:20px 0 9px;
}
.feldname:first-child{margin-top:0}

/* ---------- Tagesauswahl ----------
   Mehrzeilig statt seitlich scrollend: auto-fill füllt so viele Kacheln in eine
   Zeile, wie bei mindestens 126 px hineinpassen. Bei der Innenbreite der Karte
   (704 px) sind das genau fünf; auf schmalen Bildschirmen entsprechend weniger.
   Die Obergrenze von fünf steckt also in der Mindestbreite – wer sie ändert,
   ändert auch die Kacheln pro Zeile. */
.tage{display:grid;grid-template-columns:repeat(auto-fill,minmax(126px,1fr));gap:8px}
.tag{
  font:inherit;color:inherit;cursor:pointer;
  background:var(--panel);border:1px solid var(--border);border-radius:8px;
  padding:9px 10px;display:flex;flex-direction:column;gap:1px;text-align:left;
}
.tag:hover{border-color:#b9c2d0}
.tag.an{border-color:var(--sel);box-shadow:0 0 0 2px var(--sel-soft)}
/* Ausgebuchte Tage: ausgegraut, aber weiterhin anklickbar – wer sie antippt,
   soll den Grund sehen statt ins Leere zu greifen. */
.tag.leer{background:var(--bg);color:var(--muted);border-style:dashed}
.tag.leer .tag-dat{font-weight:500}
.tag-wt{font-size:12px;color:var(--muted)}
.tag-dat{font-weight:600;font-variant-numeric:tabular-nums}
.tag-anz{font-size:11.5px;color:var(--muted)}
.leerHinweis{color:var(--muted);padding:10px 2px}

/* ---------- Uhrzeiten ---------- */
.zeiten{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.zeit{
  font:inherit;font-weight:600;color:inherit;cursor:pointer;
  background:var(--panel);border:1px solid var(--border);border-radius:8px;
  padding:9px 6px;text-align:center;font-variant-numeric:tabular-nums;
}
.zeit:hover{border-color:#b9c2d0}
.zeit.an{background:var(--btn);border-color:var(--btn);color:var(--btn-text)}

/* ---------- Formular ---------- */
.zeile{display:flex;gap:12px;margin-bottom:12px;flex-wrap:wrap}
/* Feldbeschriftungen ebenfalls schwarz, einen Punkt größer als zuvor. */
.zeile label{flex:1 1 200px;display:flex;flex-direction:column;gap:4px;font-size:13.5px;color:var(--text)}
/* Die Anrede steht allein in ihrer Zeile und soll nicht auf volle Breite laufen. */
.zeile label.schmal{flex:0 0 140px}
input[type=text],input[type=tel],input[type=email],select{
  font:inherit;font-size:14px;color:var(--text);background:var(--panel);
  border:1px solid var(--border);border-radius:8px;padding:8px 10px;outline:none;width:100%;
  /* Feste Höhe: Auswahlfelder rendern sonst niedriger als Textfelder und die
     Zeile steht versetzt. */
  height:36px;
}
select{cursor:pointer}
input:focus,select:focus{border-color:var(--btn);box-shadow:0 0 0 2px rgba(142,193,255,.35)}
input:user-invalid{border-color:var(--danger)}
.ankreuz{display:flex;gap:10px;align-items:flex-start;margin:14px 0 0;cursor:pointer}
/* Kästchen mittig zur ersten Textzeile: Zeilenhöhe 1.5 × 14 px = 21 px,
   Kästchen 18 px – bleiben 3 px, die sich oben und unten aufteilen. */
.ankreuz input{
  width:18px;height:18px;margin:1.5px 0 0;flex-shrink:0;cursor:pointer;
  accent-color:var(--btn-hover);
}
.ankreuz a{color:var(--text)}
/* Honigtopf: für Menschen unsichtbar, aber nicht display:none – manche Programme
   überspringen ausgeblendete Felder. */
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.fehler{color:var(--danger);background:var(--danger-soft);border-radius:8px;padding:9px 12px;margin-top:14px}
.knopfzeile{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px}
.gewaehlt{color:var(--muted);font-size:13px}

.btn{
  font:inherit;font-weight:600;border-radius:8px;padding:9px 18px;cursor:pointer;
  border:1px solid var(--border);background:var(--panel);color:var(--text);
  text-decoration:none;display:inline-block;
}
.btn:hover{background:var(--bg)}
.btn.primary{background:var(--btn);border-color:var(--btn);color:var(--btn-text)}
.btn.primary:hover{background:var(--btn-hover);border-color:var(--btn-hover)}
.btn.danger-o{background:var(--panel);color:var(--text);border-color:var(--danger)}
.btn.danger-o:hover{background:var(--danger-soft)}
.btn[disabled]{opacity:.5;pointer-events:none}

/* Der grüne Kasten umfasst die Bestätigung selbst – Dank und Terminangabe.
   Der Änderungslink steht bewusst darunter, außerhalb: er ist kein Teil der
   Bestätigung, sondern der nächste mögliche Schritt. */
.bestaetigt{
  border:1px solid var(--border);border-left:3px solid var(--ok);border-radius:8px;
  background:var(--ok-soft);padding:18px 20px;display:flex;flex-direction:column;gap:8px;
}
.bestaetigt h1{margin:0}
.aendern{margin:22px 0 10px}
.frage{margin:18px 0 0;font-weight:600}

/* Die Fußzeile fluchtet mit dem Inhalt der Karte: gleiche Breite, gleicher
   seitlicher Innenabstand (28 px, im Handyformat 16 px). */
footer{
  max-width:760px;margin:16px auto 0;padding:0 28px;color:var(--muted);font-size:12.5px;
  display:flex;gap:16px;
}
footer a{color:var(--muted)}

@media (max-width:520px){
  body{padding:14px 10px}
  .karte{padding:13px 16px 20px}
  footer{padding:0 16px}
  .zeiten{grid-template-columns:repeat(auto-fill,minmax(72px,1fr))}
  /* 96 px statt 126: auf einem 375-px-Bildschirm passen so drei Kacheln nebeneinander. */
  .tage{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
}