:root {
  --grund: #f4f5f7;
  --flaeche: #ffffff;
  --text: #1c2230;
  --leise: #5c6578;
  --linie: #d9dde5;
  --akzent: #1f5fbf;
  --akzent-text: #ffffff;
  --rot: #c62828;
  --rot-hell: #fdecea;
  --orange: #e67700;
  --orange-hell: #fff3e0;
  --gelb: #b58900;
  --gelb-hell: #fff8d6;
  --blau: #1e88c7;
  --blau-hell: #e6f3fb;
  --gruen: #2e7d32;
  --gruen-hell: #e8f5e9;
  --radius: 8px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --grund: #14171d;
    --flaeche: #1d2129;
    --text: #e6e9ef;
    --leise: #9aa3b5;
    --linie: #333a47;
    --akzent: #5b9bff;
    --akzent-text: #0d1117;
    --rot: #ff6b6b;
    --rot-hell: #3a1d1d;
    --orange: #ffa94d;
    --orange-hell: #3a2a17;
    --gelb: #ffd43b;
    --gelb-hell: #36301a;
    --blau: #63b3ed;
    --blau-hell: #17293a;
    --gruen: #69db7c;
    --gruen-hell: #1b3320;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--grund); color: var(--text); }
a { color: var(--akzent); }
h1 { font-size: 1.5rem; margin: 0 0 .75rem; }
h2 { font-size: 1.1rem; margin: 1.25rem 0 .5rem; }
small, .hinweis { color: var(--leise); }
code { background: var(--grund); padding: 0 .25em; border-radius: 4px; word-break: break-all; }
code.gross { font-size: 1.4rem; }
main { max-width: 1360px; margin: 0 auto; padding: 16px; }

.kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 10px 16px; background: var(--flaeche); border-bottom: 1px solid var(--linie); }
.marke { font-weight: 700; text-decoration: none; color: var(--text); }
.haupt { display: flex; flex-wrap: wrap; gap: 4px; }
.haupt a { text-decoration: none; padding: 6px 10px; border-radius: 6px; color: var(--text); }
.haupt a.aktiv, .haupt a:hover { background: var(--grund); }
.konto { margin-left: auto; display: flex; gap: 12px; align-items: center; }
form.inline { display: inline; }
button.link { background: none; border: 0; color: var(--akzent); cursor: pointer; padding: 0; font: inherit; }

.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; }
.karte.schmal { max-width: 520px; margin: 24px auto; }
.karte.hervor { border-color: var(--akzent); }
.stapel { display: flex; flex-direction: column; gap: 10px; }
.zeile { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 6px 0; }
label { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; color: var(--leise); }
label.haken { flex-direction: row; align-items: center; gap: 6px; color: var(--text); }
input, select, textarea { font: inherit; padding: 7px 9px; border: 1px solid var(--linie); border-radius: 6px; background: var(--flaeche); color: var(--text); max-width: 100%; }
textarea { width: 100%; }
button { font: inherit; padding: 8px 14px; border-radius: 6px; border: 1px solid var(--linie); background: var(--flaeche); color: var(--text); cursor: pointer; }
button.primaer { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); font-weight: 600; }
button.gross { font-size: 1.15rem; padding: 12px 22px; }

.meldung { padding: 10px 14px; border-radius: 6px; margin: 0 0 14px; }
.meldung.ok { background: var(--gruen-hell); color: var(--gruen); }
.meldung.warn { background: var(--gelb-hell); color: var(--text); }
.meldung.fehler { background: var(--rot-hell); color: var(--rot); font-weight: 600; }
.meldung.gross { font-size: 1.1rem; }
.rot { color: var(--rot); font-weight: 700; }
.warnung { color: var(--orange); font-weight: 600; }

.zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-bottom: 14px; }
.zahlen div { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 10px; }
.zahlen b { display: block; font-size: 1.5rem; }
.zahlen span { color: var(--leise); font-size: .85rem; }
.zahlen .rot b { color: var(--rot); }

.naechster { margin: 6px 0 14px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.liste { display: flex; flex-direction: column; gap: 6px; }
.ticket { display: grid; grid-template-columns: 120px 110px minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--radius); background: var(--flaeche); border: 1px solid var(--linie); border-left-width: 6px; text-decoration: none; color: var(--text); }
.ticket:hover { outline: 2px solid var(--akzent); }
.ticket .marke { font-weight: 700; font-size: .8rem; letter-spacing: .03em; }
.ticket .firma { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.ticket .info { color: var(--leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket.rot { border-left-color: var(--rot); background: var(--rot-hell); }
.ticket.rot .marke, .ticket.rot .zeit { color: var(--rot); }
.ticket.rot .marke { animation: blinken 1.2s steps(2) infinite; }
.ticket.orange { border-left-color: var(--orange); background: var(--orange-hell); }
.ticket.orange .marke { color: var(--orange); }
.ticket.gelb { border-left-color: var(--gelb); background: var(--gelb-hell); }
.ticket.blau { border-left-color: var(--blau); background: var(--blau-hell); }
.ticket.weiss { border-left-color: var(--linie); }
.ticket.grau { opacity: .65; border-left-color: var(--linie); }
@keyframes blinken { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .ticket.rot .marke { animation: none; } }
h2.trenner { color: var(--leise); }
@media (max-width: 700px) {
  .ticket { grid-template-columns: 1fr 1fr; }
  .ticket .firma, .ticket .info { grid-column: 1 / -1; }
}

/* Anruf-Karte: links Firma + Ergebnis, rechts der Leitfaden – läuft beim Scrollen mit (eigener Bildlauf) */
.anruf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "karte leitfaden" "ergebnis leitfaden"; gap: 0 16px; align-items: start; }
.anruf > .firmenkarte { grid-area: karte; }
.anruf > .ergebnis { grid-area: ergebnis; }
.anruf > .leitfaden { grid-area: leitfaden; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 1000px) {
  .anruf { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "karte" "leitfaden" "ergebnis"; }
  .anruf > .leitfaden { position: static; max-height: none; }
}
.leitfaden > details > summary { font-size: 1.05rem; }
.leitfaden .sprung { position: sticky; top: -16px; z-index: 1; display: flex; flex-wrap: wrap; gap: 4px; margin: 0 -16px 8px; padding: 8px 16px; background: var(--flaeche); border-bottom: 1px solid var(--linie); }
.leitfaden .sprung a { font-size: .78rem; text-decoration: none; padding: 3px 8px; border-radius: 99px; background: var(--grund); color: var(--text); white-space: nowrap; }
.leitfaden .sprung a.einwaende-link { background: var(--orange-hell); color: var(--orange); font-weight: 600; }
.leitfaden h3 { font-size: .95rem; margin: 1.1rem 0 .35rem; padding-top: .25rem; color: var(--akzent); scroll-margin-top: 48px; }
.leitfaden p { margin: .3rem 0; }
.leitfaden ul { margin: .3rem 0; padding-left: 18px; }
.leitfaden .sprechtext { padding: 6px 10px; border-left: 3px solid var(--akzent); background: var(--blau-hell); border-radius: 4px; }
.leitfaden .folge { color: var(--leise); padding-left: 10px; }
.leitfaden mark { background: var(--gruen-hell); color: inherit; padding: 0 2px; border-radius: 3px; }
.leitfaden .platzhalter { background: var(--gelb-hell); padding: 0 2px; border-radius: 3px; }
.leitfaden .einwaende-titel { color: var(--orange); scroll-margin-top: 48px; }
.leitfaden details.einwand { border: 1px solid var(--linie); border-radius: 6px; padding: 6px 10px; margin: 6px 0; }
.leitfaden details.einwand > summary { margin: 0; font-weight: 600; }
.leitfaden details.einwand[open] { border-color: var(--orange); }
.leitfaden details.einwand[open] > summary { margin-bottom: 6px; }
.leitfaden .einwand-vorab p { color: var(--leise); }
a.knopf-link { display: inline-block; padding: 9px 14px; border-radius: 6px; border: 1px solid var(--linie); text-decoration: none; color: var(--text); background: var(--flaeche); font-weight: 600; }
a.knopf-link.primaer { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); }
pre.vorlage { white-space: pre-wrap; font: inherit; font-size: .9rem; background: var(--grund); padding: 10px; border-radius: 6px; }
.ticketart { color: var(--leise); margin: 0 0 4px; font-size: .9rem; }
.adresse { color: var(--leise); margin-top: -8px; }
a.anrufen { display: inline-block; font-size: 1.3rem; font-weight: 700; text-decoration: none; padding: 6px 12px; border: 2px solid var(--akzent); border-radius: 8px; }
blockquote { margin: 0; padding: 8px 12px; border-left: 4px solid var(--akzent); background: var(--grund); border-radius: 4px; }
.kontakte, .verlauf { padding-left: 18px; margin: 0; }
.verlauf li { margin-bottom: 8px; }
.verlauf time { color: var(--leise); font-size: .85rem; }
fieldset.knoepfe { border: 0; padding: 0; margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 6px; }
fieldset.knoepfe legend { width: 100%; font-size: .8rem; color: var(--leise); margin-bottom: 4px; }
.knopf { flex-direction: row; align-items: center; gap: 6px; padding: 8px 10px; border: 1px solid var(--linie); border-radius: 6px; color: var(--text); cursor: pointer; }
.knopf:has(input:checked) { border-color: var(--akzent); background: var(--blau-hell); }
.zusatz { border-left: 3px solid var(--akzent); padding-left: 10px; }
.zusatz[hidden] { display: none; }
.aktionen { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
details summary { cursor: pointer; font-weight: 600; margin-bottom: 8px; }

.filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.tabelle { width: 100%; border-collapse: collapse; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; display: block; overflow-x: auto; }
.tabelle th, .tabelle td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.tabelle th { font-size: .85rem; color: var(--leise); white-space: nowrap; }
tr.inaktiv { opacity: .55; }
.liste-einfach li { margin-bottom: 6px; }

.kalender-kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.woche { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
@media (max-width: 900px) { .woche { grid-template-columns: 1fr; } }
.tag { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 8px; min-height: 120px; }
.tag.heute { border-color: var(--akzent); border-width: 2px; }
.tag h2 { margin: 0 0 6px; font-size: .95rem; }
.eintrag { display: block; font-size: .85rem; padding: 5px 6px; border-radius: 4px; margin-bottom: 4px; text-decoration: none; color: var(--text); }
.eintrag time { font-weight: 700; }
.eintrag.rueckruf { background: var(--rot-hell); }
.eintrag.nachfassen { background: var(--gelb-hell); }
.eintrag.erstgespraech { background: var(--gruen-hell); }
.eintrag.blocker { background: var(--grund); color: var(--leise); }
img.qr { display: block; margin: 8px auto; background: #fff; padding: 6px; border-radius: 6px; }