/* Kompass Sprechtag – Kompass-Design (Weinrot, weiße Karten mit Schatten) */
:root {
  --rot: #8b1d3f; --rot-dunkel: #6d1631; --rot-hell: #f7e9ee;
  --grund: #f6f3f4; --karte: #ffffff; --text: #1f1a1c; --leise: #6b6266; --linie: #e4dde0;
  --gruen: #1f7a4d; --gruen-hell: #e3f4ea; --gelb: #9a6a00; --gelb-hell: #fff4d6; --dring: #b42318; --dring-hell: #fde8e6;
  --blau: #1d5f9c; --blau-hell: #e6f0fa; --grau-hell: #efebed;
  --schatten: 0 1px 2px rgba(60, 20, 35, .08), 0 4px 14px rgba(60, 20, 35, .08);
  --rund: 14px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --grund: #17131a; --karte: #221d24; --text: #f1ecef; --leise: #b2a7ad; --linie: #3a3238;
    --rot-hell: #3a1a26; --gruen-hell: #173126; --gelb-hell: #3a2f12; --dring-hell: #3d1a17; --blau-hell: #182a3d; --grau-hell: #2c262d;
    --gruen: #5fd39a; --gelb: #f3c556; --dring: #ff8a7a; --blau: #8cc1f2;
    --schatten: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--grund); color: var(--text); font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-text-size-adjust: 100%; }
a { color: var(--rot); }
@media (prefers-color-scheme: dark) { a { color: #f0a3bb; } }
button, input, select, textarea { font: inherit; color: inherit; }
.kopf { background: var(--rot); color: #fff; position: sticky; top: 0; z-index: 10; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.kopf-innen { max-width: 1100px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.marke { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: .06em; font-size: 15px; text-decoration: none; color: #fff; }
.marke svg { width: 28px; height: 28px; flex: none; }
.marke small { display: block; font-weight: 400; letter-spacing: 0; opacity: .85; font-size: 12px; }
.kopf .rechts { margin-inline-start: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kopf select, .kopf .knopf-hell { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35); color: #fff; border-radius: 10px; padding: 6px 10px; }
.kopf select option { color: #000; }
main { max-width: 1100px; margin: 0 auto; padding: 16px; }
.schmal { max-width: 720px; }
.karte { background: var(--karte); border-radius: var(--rund); box-shadow: var(--schatten); padding: 16px; margin-bottom: 14px; }
.karte h2, .karte h3 { margin: 0 0 8px; }
h1 { font-size: 1.45rem; margin: 6px 0 12px; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1.02rem; }
.leise { color: var(--leise); }
.klein { font-size: .88rem; }
.zeile { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.zeile > .wachsen { flex: 1 1 auto; }
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 8px 16px; border-radius: 11px; border: 1px solid var(--linie); background: var(--karte); cursor: pointer; text-decoration: none; color: var(--text); font-weight: 600; }
.knopf:hover { border-color: var(--rot); }
.knopf.haupt { background: var(--rot); border-color: var(--rot); color: #fff; }
.knopf.haupt:hover { background: var(--rot-dunkel); }
.knopf.klein { min-height: 34px; padding: 4px 11px; font-size: .9rem; border-radius: 9px; }
.knopf.gefahr { color: var(--dring); }
.knopf[disabled] { opacity: .45; cursor: not-allowed; }
.knopf-text { background: none; border: none; color: var(--rot); cursor: pointer; padding: 4px 6px; font-weight: 600; }
label.feld { display: block; margin-bottom: 10px; }
label.feld > span { display: block; font-size: .88rem; color: var(--leise); margin-bottom: 4px; }
input[type=text], input[type=password], input[type=date], input[type=time], input[type=datetime-local], input[type=number], input[type=url], select, textarea {
  width: 100%; min-height: 42px; padding: 8px 11px; border-radius: 10px; border: 1px solid var(--linie); background: var(--karte);
}
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus, .knopf:focus-visible, .zeit:focus-visible { outline: 3px solid color-mix(in srgb, var(--rot) 45%, transparent); outline-offset: 1px; }
.raster2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 14px; }
.pille { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 999px; font-size: .82rem; font-weight: 600; background: var(--grau-hell); color: var(--leise); white-space: nowrap; }
.pille.dringend { background: var(--dring-hell); color: var(--dring); }
.pille.erwuenscht { background: var(--gelb-hell); color: var(--gelb); }
.pille.gut { background: var(--gruen-hell); color: var(--gruen); }
.pille.blau { background: var(--blau-hell); color: var(--blau); }
.pille.rot { background: var(--rot-hell); color: var(--rot); }
.hinweis { border-radius: 12px; padding: 12px 14px; background: var(--blau-hell); color: var(--text); margin-bottom: 14px; border-inline-start: 5px solid var(--blau); }
.hinweis.gelb { background: var(--gelb-hell); border-color: var(--gelb); }
.hinweis.gruen { background: var(--gruen-hell); border-color: var(--gruen); }
.hinweis.rot { background: var(--dring-hell); border-color: var(--dring); }
.leer { text-align: center; color: var(--leise); padding: 22px 8px; }
.zeiten { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.zeit { min-width: 66px; min-height: 40px; border-radius: 10px; border: 1px solid var(--linie); background: var(--karte); cursor: pointer; font-variant-numeric: tabular-nums; font-weight: 600; }
.zeit:hover { border-color: var(--gruen); background: var(--gruen-hell); }
.lk-karte { border-inline-start: 6px solid transparent; }
.lk-karte.dringend { border-inline-start-color: var(--dring); }
.lk-karte.erwuenscht { border-inline-start-color: var(--gelb); }
.notiz { background: var(--grund); border-radius: 10px; padding: 8px 11px; margin-top: 8px; font-size: .94rem; }
.termin { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linie); }
.termin:last-child { border-bottom: none; }
.termin .uhr { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.reiter { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.reiter button { border: 1px solid var(--linie); background: var(--karte); border-radius: 999px; padding: 7px 15px; cursor: pointer; font-weight: 600; }
.reiter button[aria-selected=true] { background: var(--rot); border-color: var(--rot); color: #fff; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: start; padding: 8px 8px; border-bottom: 1px solid var(--linie); vertical-align: middle; }
th { font-size: .82rem; color: var(--leise); font-weight: 600; }
.tabelle-wrap { overflow-x: auto; }
.seg { display: inline-flex; border: 1px solid var(--linie); border-radius: 10px; overflow: hidden; }
.seg button { border: none; background: var(--karte); padding: 6px 11px; cursor: pointer; font-size: .88rem; font-weight: 600; min-height: 36px; }
.seg button + button { border-inline-start: 1px solid var(--linie); }
.seg button[aria-pressed=true].dringend { background: var(--dring); color: #fff; }
.seg button[aria-pressed=true].erwuenscht { background: var(--gelb); color: #fff; }
.seg button[aria-pressed=true].kein { background: var(--grau-hell); }
.balken { height: 8px; border-radius: 99px; background: var(--grau-hell); overflow: hidden; min-width: 80px; }
.balken > i { display: block; height: 100%; background: var(--rot); }
.slotliste { display: grid; grid-template-columns: 1fr; gap: 6px; }
.slot { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 11px; background: var(--grund); }
.slot.termin-slot { background: var(--rot-hell); }
.slot.entwurf { background: var(--blau-hell); }
.slot.pause, .slot.aus { opacity: .55; }
.slot.gesperrt { background: repeating-linear-gradient(45deg, var(--grau-hell), var(--grau-hell) 6px, transparent 6px, transparent 12px); }
.slot .uhr { font-weight: 700; font-variant-numeric: tabular-nums; }
dialog { border: none; border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.35); padding: 20px; max-width: min(460px, calc(100vw - 32px)); width: 100%; background: var(--karte); color: var(--text); }
dialog::backdrop { background: rgba(30, 10, 20, .45); }
.wahl { display: flex; gap: 8px; flex-wrap: wrap; }
.wahl label { display: flex; gap: 8px; align-items: center; border: 1px solid var(--linie); border-radius: 11px; padding: 9px 12px; cursor: pointer; flex: 1 1 140px; }
.wahl input { accent-color: var(--rot); width: 18px; height: 18px; }
.meldung { position: fixed; inset-inline: 16px; bottom: 18px; margin: 0 auto; max-width: 440px; background: #2a2226; color: #fff; padding: 12px 16px; border-radius: 12px; box-shadow: var(--schatten); z-index: 50; text-align: center; }
.meldung.fehler { background: var(--dring); }
.anmeldung { max-width: 420px; margin: 40px auto; }
.code-eingabe { font-size: 1.3rem; letter-spacing: .12em; text-transform: uppercase; text-align: center; font-variant-numeric: tabular-nums; }
.wunsch { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--linie); }
.wunsch .nr { width: 30px; height: 30px; border-radius: 50%; background: var(--rot); color: #fff; display: grid; place-items: center; font-weight: 700; }
.versteckt { display: none !important; }
.nur-druck { display: none; }
@media (max-width: 560px) {
  main { padding: 12px; }
  .karte { padding: 14px; }
  .marke small { display: none; }
}
@media print {
  @page { margin: 14mm; }
  body { background: #fff; color: #000; }
  .kopf, .reiter, .kein-druck, .meldung, dialog { display: none !important; }
  .nur-druck { display: block; }
  main { max-width: none; padding: 0; }
  .karte { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  .brief { break-after: page; border: none; padding: 0; }
  .aushang { break-after: page; }
}
.brief { font-size: 15px; }
.brief .qr svg { width: 46mm; height: 46mm; }
.brief .code { font-size: 22px; font-weight: 700; letter-spacing: .1em; font-family: ui-monospace, monospace; }
.brief .sprachen { font-size: 12.5px; display: grid; gap: 4px; margin-top: 14px; }
@media print {
  body.mit-druck main > *:not(.nur-druck) { display: none !important; }
}
.kopf select { width: auto; min-height: 36px; padding: 4px 8px; }
.kopf .knopf-hell { min-height: 36px; padding: 4px 10px; cursor: pointer; }
@media (max-width: 560px) { .marke { font-size: 13px; } .kopf .rechts { gap: 6px; } }
.kopf .knopf-hell { white-space: nowrap; }