@font-face { font-family: 'Inter'; src: url('/schrift/Inter-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/schrift/Inter-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/schrift/Inter-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'InterDisplay'; src: url('/schrift/InterDisplay-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap; }

[hidden] { display: none !important; }

:root {
  --marke:     #58BFC7;
  --tinte:     #22343A;
  --jade:      #0C6F79;
  --jade-fl:   #E3F4F6;
  --signal:    #8A4F08;
  --signal-fl: #FAEEDA;
  --rot:       #A4322A;
  --rot-fl:    #FBE9E7;
  --gruen:     #1B7F3B;
  --gruen-fl:  #E3F5E8;
  --linnen:    #EFF5F6;
  --karte:     #FFFFFF;
  --nebel:     #4F656B;
  --rand:      #D2E4E7;
  --rand-kraeftig: #6E97A0;

  --text:        var(--tinte);
  --jade-text:   var(--jade);
  --signal-text: var(--signal);

  --akz-schrift: #FFFFFF;
  --vers: none;
  --sp: .02em;
  --mono: 'Inter', system-ui, sans-serif;

  --anzeige: 'InterDisplay', 'Inter', system-ui, sans-serif;
  --text-schrift: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --r-klein: 8px;
  --r: 12px;
  --r-gross: 18px;
  --schatten: 0 1px 2px rgba(34, 52, 58, .06), 0 8px 24px -12px rgba(34, 52, 58, .18);
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --linnen:    #0E1619;
  --karte:     #172226;
  --nebel:     #93A6AB;
  --rand:      #2B383C;
  --rand-kraeftig: #5F7378;
  --text:      #EAF2F3;
  --jade-fl:   #113238;
  --jade-text: #5FD1C6;
  --signal-fl: #3A2712;
  --signal-text: #E7A94C;
  --rot-fl:    #3A1613;
  --rot:       #E98A82;
  --gruen:     #6FD394;
  --gruen-fl:  #133A22;
  --schatten: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.7);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--linnen); color: var(--text);
  font-family: var(--text-schrift); font-size: 17px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.kopf {
  background: var(--tinte);
  color: var(--akz-schrift);
  padding: 14px 20px; display: flex; align-items: center; gap: 12px;
}
.kopf.schmal { padding: 10px 20px; }
.kopf.schmal .marke { font-size: 16px; }
.kopf.schmal .marke img { height: 22px; }
.kopf .marke {
  font-family: var(--anzeige); font-weight: 600; font-size: 19px;
  letter-spacing: -.02em; display: flex; align-items: center; gap: 9px;
}
.kopf .marke img { height: 28px; width: auto; display: block; }
.kopf .marke .marke-zeichen { font-size: 24px; line-height: 28px; display: block; }
.kopf.schmal .marke .marke-zeichen { font-size: 19px; line-height: 22px; }
.kopf .marke .zusatz { font-family: var(--text-schrift); font-weight: 400; font-size: 14px; letter-spacing: 0; }
.kopf .kopf-aktionen { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.kopf .rechts { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.kopf .rechts .wer { font-weight: 500; }
.theme-toggle, .optik-wuerfel {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; min-height: 34px; flex: none; border-radius: 999px;
  border: 1px solid color-mix(in srgb, currentColor 32%, transparent);
  background: color-mix(in srgb, currentColor 10%, transparent);
  color: inherit; cursor: pointer; padding: 0;
  transition: background .15s ease, border-color .15s ease;
}
.theme-toggle:hover, .optik-wuerfel:hover {
  background: color-mix(in srgb, currentColor 22%, transparent);
  border-color: color-mix(in srgb, currentColor 55%, transparent);
}
.theme-toggle svg, .optik-wuerfel svg { width: 17px; height: 17px; display: block; }
.optik-wuerfel[hidden], .optik-hinweis[hidden] { display: none; }

.optik-hinweis {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; line-height: 1.25;
  background: var(--karte); color: var(--text);
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  border-radius: 999px; padding: 6px 8px 6px 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
  max-width: min(92vw, 420px);
}
.hk-kopf .hk-rechts { position: relative; }
.optik-hinweis .optik-wort { opacity: .85; white-space: nowrap; }
.optik-hinweis .optik-zurueck {
  border: 1px solid color-mix(in srgb, currentColor 32%, transparent);
  background: color-mix(in srgb, currentColor 10%, transparent);
  color: inherit; font: inherit; font-weight: 600; font-size: 12.5px;
  min-height: 26px; padding: 3px 10px; border-radius: 999px; cursor: pointer;
  white-space: nowrap;
}
.optik-hinweis .optik-zurueck:hover { background: color-mix(in srgb, currentColor 22%, transparent); }

.huelle { max-width: 680px; margin: 0 auto; padding: 22px 16px 72px; }
.huelle.breit { max-width: 940px; }

h1 { font-family: var(--anzeige); font-weight: 600; font-size: 26px; letter-spacing: -.025em; margin: 0 0 6px; }
h2 { font-family: var(--anzeige); font-weight: 600; font-size: 18px; letter-spacing: -.015em; margin: 30px 0 12px; }
h2:first-child { margin-top: 0; }
h3 { font-family: var(--anzeige); font-weight: 600; font-size: 15px; letter-spacing: -.01em; margin: 22px 0 8px; }
.blass { color: var(--nebel); }
.klein { font-size: 14px; }
.fuehrung { color: var(--nebel); font-size: 15px; margin: 0 0 20px; }

.marke-zeile {
  font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--nebel); margin: 0 0 8px;
}

.karte {
  background: var(--karte); border: 1px solid var(--rand);
  border-radius: var(--r-gross); padding: 20px; margin-bottom: 14px;
}
.karte.eng { padding: 15px; }

label { display: block; font-size: 14px; font-weight: 600; margin: 22px 0 6px; }
label:first-child { margin-top: 0; }
input:not([type]),
input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=search],
input[type=datetime-local], input[type=date], input[type=time], input[type=file], textarea, select {
  width: 100%; padding: 12px 13px; border-radius: var(--r);
  border: 1.5px solid var(--rand-kraeftig); background: var(--karte); color: var(--text);
  font: inherit; font-size: 16px;
}
textarea { resize: vertical; min-height: 84px; }
.bogen-datum { margin-top: 26px; }
.bogen-datum:first-child { margin-top: 0; }

label.checkbox { display: flex; align-items: flex-start; gap: 10px; font-weight: 500; font-size: 15px; line-height: 1.45; }
label.checkbox input { margin-top: 2px; width: 20px; height: 20px; flex: none; accent-color: var(--jade-text); }
input:focus-visible, textarea:focus-visible, select:focus-visible,
button:focus-visible, a:focus-visible, .kal-tag:focus-visible, .zeit:focus-visible {
  outline: 3px solid var(--jade-text); outline-offset: 2px;
}
::placeholder { color: var(--nebel); opacity: .8; }

button, .knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1.5px solid var(--rand-kraeftig); background: var(--karte); color: var(--text);
  padding: 11px 18px; border-radius: var(--r); font: inherit; font-weight: 600;
  font-size: 15px; cursor: pointer; min-height: 46px; text-decoration: none;
  transition: background .14s ease, border-color .14s ease, transform .14s cubic-bezier(.16,1,.3,1), box-shadow .14s ease;
}
button:hover, .knopf:hover { background: var(--linnen); }
button.haupt, .knopf.haupt {
  background: var(--jade); color: var(--akz-schrift); border-color: var(--jade);
  box-shadow: 0 1px 2px rgba(0,0,0,.16), 0 8px 16px -10px rgba(0,0,0,.34);
}
button.haupt:hover, .knopf.haupt:hover {
  background: color-mix(in srgb, var(--jade) 88%, var(--akz-schrift));
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,.18), 0 12px 22px -10px rgba(0,0,0,.38);
}
button.haupt:active, .knopf.haupt:active { transform: translateY(0); }
button.gefahr { color: var(--rot); border-color: color-mix(in srgb, var(--rot) 45%, var(--karte)); }
button.gefahr:hover { background: var(--rot-fl); }
button.stiller { border-color: transparent; background: transparent; color: var(--nebel); padding: 8px 10px; min-height: 40px; }
button.stiller:hover { background: var(--linnen); color: var(--text); }
button.klein-knopf, .knopf.klein-knopf { min-height: 38px; padding: 7px 13px; font-size: 14px; }
button:disabled { opacity: .45; cursor: default; }
.reihe { display: flex; gap: 16px 14px; flex-wrap: wrap; }
.reihe.eng { gap: 10px; }
.reihe { margin-top: 18px; }
.reihe:first-child { margin-top: 0; }
label + .reihe { margin-top: 6px; }

.meldung { padding: 12px 15px; border-radius: var(--r); margin: 12px 0; font-size: 15px; border: 1px solid; }
.meldung.ok  { background: var(--jade-fl);   color: var(--jade-text);   border-color: color-mix(in srgb, var(--jade-text) 45%, var(--karte)); }
.meldung.err { background: var(--rot-fl);    color: var(--rot);    border-color: color-mix(in srgb, var(--rot) 45%, var(--karte)); }
.meldung.warnung { background: var(--signal-fl); color: var(--signal-text); border-color: color-mix(in srgb, var(--signal-text) 45%, var(--karte)); }
.plakette {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px;
  border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap;
}
.plakette.wartet     { background: var(--signal-fl); color: var(--signal-text); }
.plakette.bestaetigt { background: var(--jade-fl);   color: var(--jade-text); }
.plakette.abgelehnt  { background: var(--rot-fl);    color: var(--rot); }
.plakette.frei       { background: var(--jade-fl);   color: var(--jade-text); }
.plakette.neutral    { background: var(--linnen);    color: var(--nebel); }
.plakette::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.plakette.ohne-punkt::before { display: none; }

.umschalter { display: inline-flex; gap: 2px; background: var(--linnen); border-radius: 999px; padding: 3px; }
.umschalter button {
  border: none; background: transparent; color: var(--nebel); min-height: 34px;
  padding: 5px 15px; border-radius: 999px; font-size: 14px; font-weight: 600;
}
.umschalter button:hover { background: color-mix(in srgb, var(--karte) 65%, transparent); }
.umschalter button.aktiv { background: var(--karte); color: var(--text); box-shadow: 0 1px 3px rgba(18,49,44,.14); }

.listen-tag { margin-bottom: 22px; }
.listen-tag:last-child { margin-bottom: 0; }
.listen-kopf {
  display: flex; align-items: baseline; gap: 9px; margin-bottom: 9px;
  position: sticky; top: 0; background: var(--karte); padding: 5px 0; z-index: 1;
}
.listen-kopf .tag { font-family: var(--anzeige); font-weight: 600; font-size: 16px; letter-spacing: -.015em; }
.kal { margin-bottom: 6px; }
.kal-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.kal-monat { font-family: var(--anzeige); font-weight: 600; font-size: 19px; letter-spacing: -.02em; }
.kal-wochentage, .kal-gitter { display: grid; grid-template-columns: repeat(7, 1fr); gap: 9px; }
.kal-wochentage {
  margin-bottom: 5px; font-size: 12px; font-weight: 600; color: var(--nebel);
  text-align: center; letter-spacing: .04em;
}
@keyframes einrichten {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}
.kal-tag {
  position: relative; aspect-ratio: 1 / 1; min-height: 46px; max-height: 72px;
  width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 1.5px solid transparent; border-radius: var(--r); background: transparent;
  font-family: var(--anzeige); font-weight: 600; font-size: 16px; color: var(--nebel);
  cursor: default; padding: 0; min-width: 0;
  transition: background .12s ease, border-color .12s ease;
}
.treffer-liste { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.treffer-liste:empty { margin-top: 0; }
.treffer {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  width: 100%; min-height: 44px; text-align: left;
  padding: 8px 12px; border: 1px solid var(--rand); border-radius: var(--r);
  background: var(--karte); color: var(--text); font: inherit; font-weight: 600; cursor: pointer;
  min-width: 0;
}
.treffer > span { min-width: 0; overflow-wrap: anywhere; }
.treffer:hover, .treffer:focus-visible { border-color: var(--jade-text); background: var(--jade-fl); }

.kal-tag.fuellung { visibility: hidden; }
.kal-tag.zu { color: var(--nebel); opacity: .55; }
.kal-tag.leer { cursor: pointer; color: var(--nebel); }
.kal-tag.leer:hover, .kal-tag.leer:focus-visible { opacity: 1; border-color: var(--jade-text); background: var(--jade-fl); }
.kal-tag.leer.gewaehlt { opacity: 1; }
.kal-tag.nachbar .kal-zahl { opacity: .45; font-weight: 500; }
.kal-tag.nachbar.hat { background: transparent; border-style: dashed; }
.kal-tag.nachbar.hat .kal-zahl { opacity: 1; color: var(--nebel); }
.kal-tag.nachbar.hat:hover { background: var(--jade-fl); border-style: solid; }
.kal-tag.nachbar.gewaehlt .kal-zahl { opacity: 1; }
.kal-tag.hat {
  background: var(--karte); border-color: var(--nebel); color: var(--text); cursor: pointer;
  animation: einrichten .35s cubic-bezier(.16,1,.3,1) backwards;
  animation-delay: calc(var(--zelle, 0) * 10ms);
}
.kal-tag.hat:hover { border-color: var(--jade-text); background: var(--jade-fl); }
.kal-tag.hat.prio-gebucht { background: color-mix(in srgb, var(--text) 16%, var(--karte)); border-color: var(--text); }
.kal-tag.hat.prio-wartet { background: var(--signal-fl); border-color: var(--signal-text); }
.kal-tag.gewaehlt { background: var(--jade); border-color: var(--jade); color: var(--akz-schrift); animation: none; }
.kal-tag.gewaehlt .kal-zahl { color: var(--akz-schrift); }
.kal-tag.heute { box-shadow: inset 0 0 0 2px var(--jade-text); }
.kal-tag.heute.hat { box-shadow: inset 0 0 0 2px var(--jade-text); }
.kal-tag.heute.gewaehlt { box-shadow: none; }
.kal-zahl { line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.kal-marke {
  font-family: var(--text-schrift); font-weight: 600; font-size: 11px;
  line-height: 1; padding: 2px 5px; border-radius: 999px;
  background: var(--jade-fl); color: var(--jade-text);
}
.kal-tag.gewaehlt .kal-marke { background: var(--akz-schrift); color: var(--jade); }
.kal-marke.wartet { background: var(--signal-fl); color: var(--signal-text); }
.kal-marke.gebucht { background: color-mix(in srgb, var(--text) 14%, var(--karte)); color: var(--text); }
.kal-tag.gewaehlt .kal-marke.wartet, .kal-tag.gewaehlt .kal-marke.gebucht { background: var(--akz-schrift); color: var(--jade); }
.kal-punkte { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; justify-content: center; min-height: 15px; }
.kal-punkt { width: 8px; height: 8px; border-radius: 50%; }
.kal-punkt.frei { background: var(--jade-text); }
.kal-tag.gewaehlt .kal-punkt { background: var(--akz-schrift); }

.kal-legende { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--nebel); margin-top: 12px; }
.kal-legende span { display: inline-flex; align-items: center; gap: 6px; }
.kal-legende i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

.tag-kopf {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--rand);
}
.tag-kopf .datum { font-family: var(--anzeige); font-weight: 600; font-size: 21px; letter-spacing: -.025em; }
.saeule { position: relative; }
.zeit {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%;
  background: var(--karte); border: 1.5px solid var(--rand); border-radius: var(--r);
  padding: 12px 15px; margin-bottom: 7px; cursor: pointer; text-align: left;
  font: inherit; min-height: 54px;
  transition: border-color .12s ease, background .12s ease;
  animation: einrichten .3s cubic-bezier(.16,1,.3,1) backwards;
  animation-delay: calc(var(--reihe, 0) * 30ms);
}
.zeit:hover { border-color: var(--jade-text); background: var(--jade-fl); }
.zeit.gewaehlt { border-color: var(--jade-text); background: var(--jade-fl); border-width: 2px; }
.zeit.nicht-frei { cursor: default; background: var(--linnen); border-style: dashed; }
.zeit.markiert { border-color: var(--rot); border-width: 2px; background: var(--rot-fl); }
.zeit.markiert .uhr { color: var(--rot); }
.zeit.nicht-frei:hover { border-color: var(--rand); background: var(--linnen); }
.zeit .uhr {
  font-family: var(--anzeige); font-weight: 600; font-size: 19px; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; min-width: 62px;
}
.zeit .dauer { color: var(--nebel); font-size: 14px; }
.zeit { flex-wrap: wrap; }
.zeit .rechts {
  margin-left: auto; display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; justify-content: flex-end; min-width: 0;
}
.patient-info { min-width: 0; }
.patient-info .klein, .kontakt-klein { overflow-wrap: anywhere; }
.zeit.hat-patient { padding-top: 10px; padding-bottom: 10px; }
.patient-info { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.kontakt-klein { font-size: 12px; color: var(--nebel); }
.loesch-knopf { padding: 5px 7px; min-height: 0; font-size: 14px; line-height: 1; color: var(--nebel); }
.loesch-knopf:hover, .loesch-knopf:focus-visible { background: var(--rot-fl); color: var(--rot); }

.aktionsleiste {
  position: sticky; bottom: 14px; z-index: 3;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--karte); border: 1px solid var(--rand-kraeftig); border-radius: var(--r);
  padding: 10px 14px; margin-top: 14px; box-shadow: var(--schatten);
}
.aktionsleiste .anzahl { font-weight: 600; font-size: 14px; }

.termin {
  display: flex; gap: 14px; align-items: flex-start;
  border: 1px solid var(--rand); border-radius: var(--r); padding: 15px; margin-bottom: 10px; background: var(--karte);
}
.termin.hervor { border-color: var(--signal-text); border-width: 2px; background: var(--signal-fl); }
.termin .wann { min-width: 92px; }
.termin .wann .tag-zahl {
  font-family: var(--anzeige); font-weight: 600; font-size: 24px; letter-spacing: -.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.termin .wann .rest { font-size: 13px; color: var(--nebel); margin-top: 3px; }
.termin .inhalt { flex: 1; min-width: 0; }
.termin .inhalt .titel { font-weight: 600; }
.termin .aktionen { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 11px; }
.zitat {
  margin: 9px 0 0; padding: 9px 12px; background: var(--linnen); border-radius: var(--r-klein);
  font-size: 15px; color: var(--text); white-space: pre-line;
}
.termin.hervor .zitat { background: color-mix(in srgb, var(--karte) 65%, transparent); }

.leer { text-align: center; padding: 30px 18px; color: var(--nebel); }
.leer .zeichen { font-size: 26px; display: block; margin-bottom: 8px; opacity: .55; }
.leer .haupt-satz { color: var(--text); font-weight: 600; margin-bottom: 4px; }

.reiter { display: flex; flex-wrap: wrap; gap: 4px; background: var(--karte); border: 1px solid var(--rand); border-radius: var(--r); padding: 4px; margin-bottom: 20px; }
.reiter button { flex: 1 1 auto; min-width: 0; border: none; background: transparent; min-height: 42px; color: var(--nebel); border-radius: var(--r-klein); }
.reiter button:hover { background: var(--linnen); }
.reiter button.aktiv { background: var(--tinte); color: var(--akz-schrift); }
.reiter button.aktiv:hover { background: var(--tinte); }
.reiter .zaehler {
  margin-left: 6px; background: var(--signal); color: #fff; border-radius: 999px;
  padding: 1px 7px; font-size: 12px; font-variant-numeric: tabular-nums;
}
.reiter button.aktiv .zaehler { background: var(--signal); }

.admin-flaeche { display: flex; align-items: flex-start; min-height: calc(100vh - 53px); }
.seitenleiste {
  width: 232px; flex: none; background: var(--tinte); color: var(--akz-schrift);
  padding: 22px 14px; display: flex; flex-direction: column; gap: 20px;
  position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto;
}
.sl-gruppe { display: flex; flex-direction: column; gap: 2px; }
.sl-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: rgba(255,255,255,.42); padding: 6px 10px 6px;
}
.sl-item {
  display: flex; align-items: center; gap: 9px; justify-content: flex-start;
  border: none; background: transparent; color: rgba(255,255,255,.8);
  padding: 10px 11px; border-radius: 10px; font: inherit; font-weight: 600; font-size: 14px;
  cursor: pointer; min-height: 0; text-align: left;
}
.sl-item:hover { background: rgba(255,255,255,.07); }
.sl-item.aktiv { background: var(--jade); color: var(--akz-schrift); }
.sl-item .sl-badge {
  margin-left: auto; background: var(--signal); color: #fff; font-size: 11px; font-weight: 700;
  border-radius: 999px; padding: 1px 8px; font-variant-numeric: tabular-nums;
}
.admin-inhalt { flex: 1; min-width: 0; padding: 24px 28px 60px; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.kpi { background: var(--karte); border: 1px solid var(--rand); border-radius: 12px; padding: 14px 16px; }
.kpi .n { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.kpi .l { font-size: 12px; color: var(--nebel); margin-top: 2px; }
.kpi.warn .n { color: var(--signal-text); }
@media (max-width: 780px) {
  .kopf { flex-wrap: wrap; row-gap: 6px; }
  .kopf .marke { min-width: 0; }
  .admin-flaeche { flex-direction: column; min-height: 0; }
  .seitenleiste {
    width: 100%; position: static; height: auto; overflow: visible;
    flex-direction: row; flex-wrap: wrap; align-items: center;
    padding: 9px 10px; gap: 6px; row-gap: 6px;
  }
  .sl-gruppe { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .sl-item { padding: 8px 11px; font-size: 13.5px; }
  .sl-label { display: none; }
  .sl-item { padding: 8px 12px; white-space: nowrap; }
  .admin-inhalt { padding: 16px 14px 50px; }
  .kpis { grid-template-columns: repeat(2, 1fr); }

}

.tabelle-huelle { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; padding: 11px 9px; border-bottom: 1px solid var(--rand); vertical-align: middle; }
th { font-size: 13px; font-weight: 600; color: var(--nebel); }
tbody tr.klickbar { cursor: pointer; }
tbody tr.klickbar:hover { background: var(--jade-fl); }
tbody tr:last-child td { border-bottom: none; }

.dialog-grund { position: fixed; inset: 0; background: rgba(18, 49, 44, .45);
  z-index: 20; display: flex; align-items: center; justify-content: center;
  padding: 20px; overflow: hidden; }
.dialog-grund.verdeckt { display: none; }

.dialog { background: var(--karte); border-radius: var(--r-gross);
  width: 100%; max-width: 520px; box-shadow: var(--schatten);
  display: flex; flex-direction: column;
  max-height: calc(100dvh - 40px); overflow: hidden; }

.dialog-kopf { display: flex; align-items: flex-start; gap: 12px;
  padding: 20px 22px 12px; border-bottom: 1px solid var(--rand); flex: 0 0 auto; }
.dialog-kopf h2 { margin: 0; flex: 1; font-size: 1.15rem; }

.dialog-inhalt { flex: 1 1 auto; min-height: 0; overflow-y: auto;
  overscroll-behavior: contain; padding: 16px 22px; }

.dialog-aktionen { flex: 0 0 auto; display: flex; justify-content: flex-end;
  gap: 10px; flex-wrap: wrap; padding: 14px 22px; border-top: 1px solid var(--rand);
  background: var(--karte); border-radius: 0 0 var(--r-gross) var(--r-gross); }

@media (max-width: 560px) {
  .dialog-grund { padding: 10px; }
  .dialog { max-height: calc(100dvh - 20px); }
  .dialog-kopf { padding: 16px 16px 10px; }
  .dialog-inhalt { padding: 14px 16px; }
  .dialog-aktionen { padding: 12px 16px; }
  .dialog-aktionen button { flex: 1 1 100%; min-height: 46px; }

}
.beschreibung { margin: 0 0 4px; }
dl.antworten dt { font-weight: 600; font-size: 14px; color: var(--nebel); margin-top: 14px; }
dl.antworten dd { margin: 3px 0 0; }

a { color: var(--jade-text); }
.fuss { display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 6px 14px; color: var(--nebel); font-size: 13px; padding: 26px 16px 18px; }
.fuss a { color: var(--nebel); }

.fuss-recht { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-size: 12.5px; }
.fuss-recht a { color: var(--nebel); text-decoration: underline; text-underline-offset: 2px;
  text-decoration-thickness: 1px; }
.fuss-recht a:hover, .fuss-recht a:focus-visible { color: var(--tinte); }
.fuss-trenner { opacity: .5; }
@media (max-width: 520px) {
  .fuss { gap: 4px 10px; }
  .fuss-recht { font-size: 12px; }

}

.fuss .pb { display: inline-flex; align-items: center; gap: 9px; font-size: 12px;
  flex-wrap: wrap; justify-content: center; row-gap: 4px;
  color: var(--text); text-decoration: none; transition: color .18s ease; }
.fuss .pb:hover, .fuss .pb:focus-visible { color: var(--jade-text); }
.fuss .pb .pb-label { font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--nebel); white-space: nowrap; }
.fuss .pb .pb-mark { height: 16px; width: 16px; display: block; flex: none; color: var(--jade-text); }
.fuss .pb .pb-name { font-weight: 700; font-size: 12.5px; letter-spacing: -.01em; color: inherit; }
.pb-arc { transform-box: view-box; transform-origin: 70px 70px; animation: pbSpin 9s linear infinite; }
@keyframes pbSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pb-arc { animation: none; } 
}

.ik { width: 18px; height: 18px; display: block; flex: none; }
.ik-leer { width: 44px; height: 44px; stroke-width: 1.9; color: var(--nebel); margin: 0 auto 6px; }
.ik-gross { width: 22px; height: 22px; }

details.block { background: var(--karte); border: 1px solid var(--rand); border-radius: var(--r-gross); margin-bottom: 14px; }
details.block > summary {
  list-style: none; cursor: pointer; padding: 16px 20px; font-weight: 600;
  display: flex; align-items: center; gap: 9px; border-radius: var(--r-gross);
}
details.block > summary::-webkit-details-marker { display: none; }
details.block > summary::after { content: '＋'; margin-left: auto; color: var(--nebel); font-size: 19px; }
details.block[open] > summary::after { content: '−'; }
details.block > summary:hover { background: var(--linnen); }
details.block .block-inhalt { padding: 4px 20px 20px; }

@media (min-width: 900px) {
  .huelle.breit { max-width: 1200px; }
  .termin-flaeche[data-ansicht="kal"] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr));
    gap: 22px; align-items: start;
  }
  .termin-flaeche[data-ansicht="kal"] > .karte { max-width: 640px; }
  .termin-flaeche[data-ansicht="kal"] #tagBox { position: sticky; top: 20px; }
  .termin-flaeche[data-ansicht="kal"] #tagBox:empty { display: none; }
  .kal-tag { min-height: 60px; max-height: 112px; font-size: 17px; }
  .kal-monat { font-size: 21px; }
  .kal-marke { font-size: 12px; padding: 2px 6px; }

}

@media (max-width: 560px) {
  .fuss { padding: 12px 12px 10px; }
  .hk-inhalt { padding-bottom: 16px; }
  .tl-wege { margin-top: 22px; }

}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .huelle { padding: 18px 13px 60px; }
  .karte { padding: 16px; border-radius: var(--r); }
  h1 { font-size: 23px; }
  .kal-tag { min-height: 42px; font-size: 15px; }
  .kal-marke { font-size: 10px; padding: 1px 4px; }
  .termin { flex-direction: column; gap: 9px; }
  .termin .wann { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
  .termin .wann .rest { margin-top: 0; }
  .kopf { padding: 12px 14px; }
  .kopf .marke { font-size: 17px; }

}

:root.ohne-uebergang *, :root.ohne-uebergang *::before, :root.ohne-uebergang *::after {
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }

}


.dialog.breit { max-width: 760px; }

a.sl-item { text-decoration: none; }
.sl-extern { margin-left: auto; opacity: .6; font-size: 11px; }
.sl-item .sl-badge + .sl-badge { margin-left: 4px; }
a.sl-item:hover { color: var(--akz-schrift); }

.klickbar-zeile:hover b { text-decoration: underline; }

.crm-knopf {
  font-size: 12px; font-weight: 600; min-height: 32px; padding: 4px 9px;
  border-radius: 999px; white-space: nowrap; color: var(--nebel);
}
.crm-knopf:hover, .crm-knopf:focus-visible { background: var(--jade-fl); color: var(--jade-text); }

.mail-liste { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }

.mail-eintrag {
  border: 1px solid var(--rand); border-radius: var(--r);
  padding: 12px 14px; background: var(--karte);
}
.mail-kopf { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.mail-titel { flex: 1 1 260px; min-width: 0; }
.mail-titel b { font-family: var(--anzeige); }

.schalter {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--nebel); white-space: nowrap; cursor: pointer;
}
.schalter input { width: 16px; height: 16px; accent-color: var(--jade); cursor: pointer; }

.mail-form { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rand); }
.mail-form label { display: block; margin: 10px 0 4px; font-size: 13px; font-weight: 600; }
.mail-form input[type="text"], .mail-form textarea {
  width: 100%; box-sizing: border-box; font: inherit;
  border: 1px solid var(--rand); border-radius: 8px; padding: 9px 11px;
  background: var(--linnen); color: var(--text);
}
.mail-form textarea { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.5; resize: vertical; }

.ph {
  display: inline-block; background: var(--linnen); border: 1px solid var(--rand);
  border-radius: 6px; padding: 1px 6px; font-size: 12px; cursor: help;
}
.mail-knoepfe { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

.mail-vorschau { margin-top: 12px; border: 1px dashed var(--rand); border-radius: 8px; padding: 12px; }
.mv-betreff { font-weight: 700; margin: 6px 0 8px; font-family: var(--anzeige); }
.mv-text {
  white-space: pre-wrap; word-break: break-word; overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; line-height: 1.55; margin: 0; color: var(--text);
}

@media (max-width: 640px) {
  .mail-kopf { gap: 8px; }
  .schalter { order: 3; }

}

.hinweis-kasten {
  margin: 16px 0 0; padding: 12px 14px;
  background: var(--linnen); border: 1px solid var(--rand);
  border-left: 3px solid var(--nebel); border-radius: 8px;
  font-size: 14px; line-height: 1.55; color: var(--text);
}

.pflichthaken {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  margin-top: 12px; padding: 12px 14px; min-height: 46px;
  border: 1px solid var(--rand); border-radius: 8px; background: var(--karte);
  font-size: 14px; font-weight: 600; line-height: 1.45;
}
.pflichthaken:hover { border-color: var(--jade); }
.pflichthaken input { width: 18px; height: 18px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--jade); cursor: pointer; }
.pflichthaken span { flex: 1; min-width: 0; }


.vorteil-hinweis {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 16px 0 4px; padding: 13px 15px;
  background: var(--jade-fl); border-radius: var(--r);
  border: 1px solid color-mix(in srgb, var(--jade-text) 30%, var(--jade-fl));
}
.vorteil-hinweis .zeichen { font-size: 20px; line-height: 1.2; flex: none; }
.vorteil-hinweis b { display: block; font-size: 15px; margin-bottom: 3px; }
.vorteil-hinweis .klein { display: block; color: var(--nebel); }

.bereichswahl {
  display: flex; gap: 6px; margin: 0 0 18px; padding: 4px;
  background: var(--karte); border: 1px solid var(--rand); border-radius: 999px;
}
.bereichswahl button {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: none; background: transparent; color: var(--nebel);
  padding: 9px 14px; border-radius: 999px; font-size: 15px; font-weight: 600; min-height: 42px;
}
.bereichswahl button:hover { background: var(--linnen); }
.bereichswahl button.aktiv { background: var(--jade); color: var(--akz-schrift); }
.bw-badge {
  background: var(--signal); color: #fff; font-size: 12px; font-weight: 700;
  border-radius: 999px; padding: 1px 8px; font-variant-numeric: tabular-nums;
}

.chat-verlauf { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.chat-blase {
  max-width: min(88%, 640px); align-self: flex-start;
  background: var(--linnen); border: 1px solid var(--rand);
  border-radius: var(--r-gross); border-bottom-left-radius: var(--r-klein);
  padding: 11px 14px;
}
.chat-blase.eigen {
  align-self: flex-end; background: var(--jade-fl);
  border-color: color-mix(in srgb, var(--jade-text) 26%, var(--jade-fl));
  border-bottom-left-radius: var(--r-gross); border-bottom-right-radius: var(--r-klein);
}
.chat-blase.neu { border-left: 3px solid var(--signal-text); }
.chat-kopf {
  display: flex; align-items: baseline; gap: 10px; justify-content: space-between;
  font-size: 12.5px; margin-bottom: 5px;
}
.chat-kopf .wer { font-weight: 700; color: var(--text); }
.chat-kopf .wann { color: var(--nebel); white-space: nowrap; }
.chat-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15.5px; line-height: 1.5; }
.chat-status {
  display: block; margin-top: 6px; font-size: 11.5px; font-weight: 600;
  color: var(--nebel); text-align: right;
}
.chat-status.gelesen, .chat-status.beantwortet { color: var(--jade-text); }
.chat-blase:not(.eigen) .chat-status { text-align: left; }

.chat-karte .chat-karten-kopf {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--rand);
}
.chat-karte.abgeschlossen { border-left: 3px solid var(--rand-kraeftig); }

.pn-flaeche { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 16px; align-items: start; }
.pn-spalte { margin: 0; }
#pnListe { max-height: calc(100vh - 210px); overflow-y: auto; padding: 8px; }
.pn-zeile {
  display: block; width: 100%; text-align: left; border: 1px solid transparent;
  background: transparent; border-radius: var(--r); padding: 11px 12px; margin-bottom: 4px;
  min-height: 0; font: inherit; cursor: pointer;
}
.pn-zeile:hover { background: var(--linnen); }
.pn-zeile.aktiv { background: var(--jade-fl); border-color: color-mix(in srgb, var(--jade-text) 32%, var(--jade-fl)); }
.pn-zeile.ungelesen { border-left: 3px solid var(--signal-text); }
.pn-zeile-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pn-zeile-kopf .wer { font-weight: 700; font-size: 15px; color: var(--text); }
.pn-betreff { font-size: 13px; font-weight: 600; color: var(--jade-text); margin-top: 2px; }
.pn-vorschau {
  font-size: 13.5px; color: var(--nebel); margin-top: 3px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pn-marken { display: flex; align-items: center; gap: 8px; margin-top: 7px; flex-wrap: wrap; }
.pn-zahl {
  background: var(--signal); color: #fff; font-size: 11.5px; font-weight: 700;
  border-radius: 999px; padding: 2px 8px; font-variant-numeric: tabular-nums;
}
.pn-verlauf-kopf {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--rand);
}
.pn-kopf-aktionen { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: flex-end; }
.pn-verlauf-rolle { max-height: calc(100vh - 430px); min-height: 160px; overflow-y: auto; padding-right: 4px; }
.pn-antwort { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rand); }

@media (max-width: 900px) {
  .pn-flaeche { grid-template-columns: minmax(0, 1fr); }
  #pnListe { max-height: 46vh; }
  .pn-verlauf-rolle { max-height: none; overflow-y: visible; }

}
@media (max-width: 560px) {
  .bereichswahl button { font-size: 14px; padding: 9px 8px; }
  .chat-blase { max-width: 96%; }
  .pn-verlauf-kopf { flex-direction: column; }
  .pn-kopf-aktionen { justify-content: flex-start; }

}

.zw { position: relative; }
.zw-paar { display: grid; gap: 10px; }

.zw-feld {
  width: 100%; display: flex; align-items: center; gap: 12px;
  justify-content: flex-start; text-align: left;
  padding: 9px 13px; min-height: 58px;
  border: 1.5px solid var(--rand-kraeftig); border-radius: var(--r);
  background: var(--karte); color: var(--text); font: inherit; cursor: pointer;
}
.zw-feld:hover { background: var(--karte); border-color: var(--jade-text); }
.zw-feld[aria-expanded="true"] { border-color: var(--jade-text); }
.zw-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.zw-marke {
  font-size: 12px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--nebel);
}
.zw-wert {
  font-family: var(--anzeige); font-weight: 600; font-size: 17px;
  letter-spacing: -.015em; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.zw-wert.zw-leer { color: var(--nebel); font-weight: 500; }
.zw-pfeil { flex: none; color: var(--nebel); transition: transform .16s cubic-bezier(.16,1,.3,1); }
.zw-feld[aria-expanded="true"] .zw-pfeil { transform: rotate(180deg); color: var(--jade-text); }

.zw-tafel {
  display: block; margin-top: 8px; padding: 14px;
  border: 1.5px solid var(--jade-text); border-radius: var(--r);
  background: var(--karte);
  animation: einrichten .22s cubic-bezier(.16,1,.3,1) backwards;
}
.zw-tafel[hidden] { display: none; }
.zw-tafel .kal { margin-bottom: 0; }

.zw-schau { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.zw-gross {
  font-family: var(--anzeige); font-weight: 600; font-size: 28px;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--text);
}
.zw-gross.zw-leer { color: var(--nebel); }
.zw-hinweis { font-size: 12.5px; color: var(--nebel); }
.zw-fuss { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; flex-wrap: wrap; }

.zw-rolle { max-height: 258px; overflow-y: auto; overscroll-behavior: contain; }
.zw-rolle-liste { max-height: 312px; padding-right: 2px; }
.zw-zeit-gitter.zw-liste { display: flex; flex-direction: column; gap: 3px; }
.zw-liste .zw-zelle { min-height: 44px; justify-content: flex-start; padding: 0 14px; font-size: 15px; }
.zw-liste .zw-zelle .zw-uhr { font-weight: 500; color: var(--nebel); margin-left: 4px; }
.zw-liste .zw-zelle.gewaehlt .zw-uhr { color: inherit; }
.zw-liste .zw-zelle.zw-volle { border-color: var(--rand-kraeftig); }
.zw-keine { margin: 8px 2px; }
.zw-zeit-gitter { display: grid; grid-template-columns: auto repeat(4, minmax(0, 1fr)); gap: 5px; align-items: center; }
.zw-stunde {
  font-family: var(--anzeige); font-weight: 600; font-size: 14px;
  color: var(--nebel); font-variant-numeric: tabular-nums;
  text-align: right; padding-right: 7px;
}
.zw-zelle {
  min-height: 46px; padding: 0; width: 100%;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--rand); border-radius: var(--r);
  background: var(--karte); color: var(--text);
  font-family: var(--anzeige); font-weight: 600; font-size: 15px;
  font-variant-numeric: tabular-nums; cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
  animation: einrichten .3s cubic-bezier(.16,1,.3,1) backwards;
  animation-delay: calc(var(--reihe, 0) * 12ms);
}
.zw-feld:disabled { cursor: not-allowed; opacity: .55; }
.zw-feld:disabled:hover { background: var(--karte); border-color: var(--rand-kraeftig); }
.zw-zelle:hover { background: var(--jade-fl); border-color: var(--jade-text); }
.zw-zelle.gewaehlt { background: var(--jade); border-color: var(--jade); color: var(--akz-schrift); animation: none; }
.zw-zelle:focus-visible, .zw-feld:focus-visible { outline: 3px solid var(--jade-text); outline-offset: 2px; }

.zw-grob { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 4px; }
.zw-grobzelle {
  min-height: 46px; padding: 0 4px; width: 100%;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--rand); border-radius: var(--r);
  background: var(--karte); color: var(--text);
  font-family: var(--anzeige); font-weight: 600; font-size: 14px;
  font-variant-numeric: tabular-nums; cursor: pointer; text-align: center;
  transition: background .12s ease, border-color .12s ease;
}
.zw-grobzelle:hover { background: var(--jade-fl); border-color: var(--jade-text); }
.zw-grobzelle.gewaehlt { background: var(--jade); border-color: var(--jade); color: var(--akz-schrift); }
.zw-grobzelle.zu { opacity: .35; cursor: default; border-style: dashed; }
.zw-grobzelle:focus-visible { outline: 3px solid var(--jade-text); outline-offset: 2px; }
.zw-hoch {
  border: 1.5px solid transparent; border-radius: var(--r-klein);
  background: transparent; color: inherit; font: inherit; cursor: pointer; padding: 4px 10px;
}
.zw-hoch:hover:not(:disabled) { border-color: var(--jade-text); }
.zw-hoch:disabled { cursor: default; }
.zw-hoch:focus-visible { outline: 3px solid var(--jade-text); outline-offset: 2px; }
.zw-tippzeile { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.zw-tippzeile .zw-tippen {
  flex: 1; min-width: 8.5rem; width: auto; margin: 0;
  font-variant-numeric: tabular-nums;
}
.zw-tippfehler { margin: 6px 0 0; font-size: 12.5px; color: var(--signal-text); }

.zw-ansage {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

@media (max-width: 400px) {
  .zw-tafel { padding: 10px; }
  .zw-gross { font-size: 24px; }

}

.zw-tafel .kal-tag { aspect-ratio: auto; min-height: 46px; }
.zw-tafel .kal-tag { animation-delay: calc(var(--zelle, 0) * 6ms); }

body:has(> .hk) {
  --nav-breite: 224px;
  --inhalt-max: 1200px;
  --spur: calc(var(--nav-breite) + var(--inhalt-max));
}
.hk { min-height: 100vh; display: flex; flex-direction: column; background: var(--linnen); }
body:has(> .hk),
body:has(> .huelle),
body:has(> .anmelde-flaeche) { min-height: 100vh; display: flex; flex-direction: column; }
body:has(> .hk) > .hk { min-height: 0; flex: 1 0 auto; }
body:has(> .hk) > .fuss.werk-herkunft,
body:has(> .huelle) > .fuss.werk-herkunft,
body:has(> .anmelde-flaeche) > .fuss.werk-herkunft { flex: none; margin-top: auto; }
body:has(> .hk) > .fuss.werk-herkunft { width: 100%; max-width: var(--spur); margin-inline: auto; }
.hk-kopf {
  background-color: var(--tinte);
  background-image: var(--kopf-bild, none);
  color: var(--akz-schrift);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 8px 18px; row-gap: 6px;
  padding-inline: max(18px, calc((100% - var(--spur)) / 2));
}
.hk-kopf .marke { font-family: var(--anzeige); font-weight: 600; font-size: 16px; display: flex; align-items: center; gap: 9px; letter-spacing: -.02em; }
.hk-kopf .marke img { height: 22px; width: auto; display: block; }
.hk-kopf .marke .marke-zeichen { font-size: 19px; line-height: 22px; display: block; }
.hk-kopf .marke .zusatz { font-family: var(--text-schrift); font-weight: 400; font-size: 13px; opacity: .72; letter-spacing: 0; }
.hk-bereiche { display: flex; align-items: stretch; gap: 4px; margin-left: 8px; flex-wrap: wrap; }
.hk-bereich {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 13px; border-radius: var(--r-klein);
  color: rgba(255,255,255,.82); text-decoration: none;
  font: inherit; font-size: 14px; font-weight: 600; border: 1.5px solid transparent;
  background: transparent; cursor: pointer; white-space: nowrap;
}
.hk-bereich:hover { background: rgba(255,255,255,.10); color: #fff; }
.hk-bereich.aktiv { background: var(--karte); color: var(--text); border-color: var(--karte); }
.hk-bereich .hk-abz {
  background: var(--signal); color: #fff; font-size: 11px; font-weight: 700;
  border-radius: 999px; padding: 1px 7px; font-variant-numeric: tabular-nums;
}
.hk-bereich.aktiv .hk-abz { background: var(--signal-text); color: var(--karte); }
.hk-kopf .hk-rechts {
  flex: 1 1 0;
  display: flex; align-items: center; justify-content: flex-end;
  gap: 10px; font-size: 14px;
}
@media (max-width: 1360px) {
  .hk-kopf .marke .zusatz { display: none; }

}

.hk-kopf .hk-wer { display: inline-flex; align-items: center; }
.hk-kopf .hk-wer .wer { opacity: .85; }
.hk-kopf .hk-wer .wer { white-space: nowrap; }
@media (max-width: 1060px) {
  .hk-kopf .hk-wer .wer { display: none; }

}

.hk-flaeche { display: flex; align-items: stretch; flex: 1; min-height: 0;
  width: 100%; max-width: var(--spur); margin-inline: auto; }
.hk-unter[hidden] { display: none; }
.hk-unter {
  width: var(--nav-breite); flex: none; background: var(--karte); border-right: 1px solid var(--rand);
  padding: 16px 12px; display: flex; flex-direction: column; gap: 4px;
  box-shadow: 6px 0 18px -14px rgba(0, 0, 0, .38);
  position: relative; z-index: 1;
  max-height: 100%; overflow-y: auto; overscroll-behavior-y: auto;
}
.hk-unter-titel {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--nebel); padding: 4px 10px 8px;
}
.hk-punkt .ik { color: var(--nebel); }
.hk-punkt:hover .ik { color: var(--text); }
.hk-punkt.aktiv .ik { color: currentColor; }
.hk-punkt {
  display: flex; align-items: center; gap: 9px; justify-content: flex-start;
  padding: 9px 11px; border-radius: 10px; border: 1.5px solid transparent;
  background: transparent; color: var(--text); text-decoration: none;
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-align: left;
}
.hk-punkt:hover { background: var(--jade-fl); }
.hk-punkt.aktiv { background: var(--jade); color: var(--akz-schrift); }
.hk-leer { color: var(--nebel); font-size: 13px; padding: 6px 11px; line-height: 1.45; }
.hk-punkt + .hk-unter-titel { padding-top: 16px; }
.hk-punkt-abz {
  margin-left: auto; background: var(--signal); color: #fff; font-size: 11px; font-weight: 700;
  border-radius: 999px; padding: 1px 7px; font-variant-numeric: tabular-nums;
}
.hk-punkt.aktiv .hk-punkt-abz { background: var(--karte); color: var(--signal); }
.hk-inhalt { flex: 1; min-width: 0; padding: 22px 26px 60px; max-width: var(--inhalt-max); margin-inline: auto; }

@media (max-width: 780px) {
  .hk-flaeche { flex-direction: column; }
  .hk-unter {
    width: 100%; border-right: 0; border-bottom: 1px solid var(--rand);
    flex-direction: row; align-items: center; padding: 9px 10px; gap: 6px;
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; max-height: none;
    scrollbar-width: thin;
  }
  .hk-unter-titel { display: none; }
  .hk-punkt { padding: 8px 12px; font-size: 13.5px; white-space: nowrap; flex: none; }
  .hk-inhalt { padding: 16px 14px 50px; }
  .hk-kopf { padding: 6px 12px; row-gap: 4px; gap: 10px; }
  .hk-bereiche { margin-left: 0; width: 100%; gap: 3px; }
  .hk-bereich { padding: 6px 9px; font-size: 13px; gap: 6px; }
  .hk-bereich .ik { width: 16px; height: 16px; }
  .hk-kopf .marke { font-size: 15px; }

}

.ck-kopfzeile { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 4px; }
.ck-kopfzeile h1 { font-family: var(--anzeige); font-size: 26px; margin: 0; letter-spacing: var(--sp); }
.ck-datum { color: var(--nebel); font-size: 14px; }
.ck-hinweis { margin: 18px 0 0; }
.ck-gitter {
  display: grid; gap: 16px; margin: 22px 0 0;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.ck-kachel {
  display: block; text-decoration: none; color: inherit;
  background: var(--karte); border: 1px solid var(--rand); border-radius: var(--r);
  padding: 18px 18px 16px; box-shadow: var(--schatten);
  transition: border-color .15s ease, transform .15s ease;
}
.ck-kachel:hover, .ck-kachel:focus-visible {
  border-color: var(--rand-kraeftig);
  transform: translateY(var(--kachel-hebt, -1px));
  box-shadow: 0 2px 4px rgba(0,0,0,.07), 0 18px 32px -18px rgba(0,0,0,.30);
}
.ck-symbol { line-height: 1; color: var(--jade-text); }
.ck-symbol .ik { width: 22px; height: 22px; }
.ck-zahl { font-family: var(--anzeige); font-size: 40px; line-height: 1.1; margin: 10px 0 2px; font-variant-numeric: tabular-nums; }
.ck-kachel[data-leer="ja"] .ck-zahl { color: var(--nebel); }
.ck-titel { font-size: 15px; font-weight: 600; }
.ck-erklaerung { color: var(--nebel); font-size: 13px; margin-top: 4px; }
.ck-lade .ck-zahl { color: var(--nebel); }
@media (max-width: 620px) {
  .ck-gitter { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ck-kachel { padding: 14px 14px 13px; }
  .ck-zahl { font-size: 30px; margin: 6px 0 2px; }
  .ck-titel { font-size: 14px; }
  .ck-erklaerung { display: none; }

}

.tl-ruhe { margin: 14px 2px 0; color: var(--nebel); font-size: 14px; }
.tl-wege { margin: 30px 0 0; }
.tl-wege-titel {
  font-family: var(--text-schrift); font-size: 11.5px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--nebel);
  margin: 0 0 12px;
}
.tl-wege-gitter { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .tl-wege-gitter { grid-template-columns: 1fr 1fr; } 
}
.tl-weg {
  display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit;
  background: var(--karte); border: 1px solid var(--rand); border-radius: var(--r);
  padding: 14px 16px;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.tl-weg:hover, .tl-weg:focus-visible {
  border-color: var(--rand-kraeftig);
  transform: translateY(var(--kachel-hebt, -1px));
  box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 16px 28px -18px rgba(0,0,0,.28);
}
.tl-weg-symbol {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: var(--r-klein);
  background: color-mix(in oklab, var(--jade-text) 12%, transparent);
  color: var(--jade-text);
}
.tl-weg-symbol .ik { width: 20px; height: 20px; }
.tl-weg-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tl-weg-titel { font-weight: 600; font-size: 15px; }
.tl-weg-unter { font-size: 13px; color: var(--nebel); }
.tl-weg-pfeil { margin-left: auto; color: var(--nebel); transition: transform .15s ease, color .15s ease; }
.tl-weg-pfeil .ik { width: 17px; height: 17px; }
.tl-weg:hover .tl-weg-pfeil { transform: translateX(3px); color: var(--jade-text); }
@media (prefers-reduced-motion: reduce) {
  .tl-weg, .tl-weg-pfeil, .ck-kachel { transition: none; }
  .tl-weg:hover, .tl-weg:focus-visible, .ck-kachel:hover { transform: none; }

}

.hk-inhalt > h1 { font-family: var(--anzeige); font-size: 26px; letter-spacing: var(--sp); }
.hk-inhalt > .beschreibung { color: var(--nebel); }


.ansicht-schalter { display: flex; gap: 3px; background: var(--linnen); border: 1px solid var(--rand);
  border-radius: 999px; padding: 3px; }
.ansicht-schalter button { font: inherit; font-size: 13.5px; font-weight: 600; color: var(--nebel);
  background: none; border: 0; padding: 5px 15px; border-radius: 999px; cursor: pointer;
  transition: background .15s ease, color .15s ease; }
.ansicht-schalter button:hover { color: var(--text); }
.ansicht-schalter button[aria-pressed="true"] { background: var(--jade); color: var(--akz-schrift); }
.marke-zeile.mit-schalter { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

#freigabeBlock .block-inhalt { padding-top: 4px; }
#freigabeBlock .block-inhalt label { font-size: 13px; margin-top: 16px; margin-bottom: 5px; }
#freigabeBlock .block-inhalt input[type="text"] { padding: 7px 10px; font-size: 14px; }
#freigabeBlock .reiter { margin-bottom: 14px !important; }
#freigabeBlock .reihe { gap: 14px 12px; }
#freigabeBlock .reihe { margin-top: 16px; }
#freigabeBlock .reihe:first-child { margin-top: 0; }
#freigabeBlock label + .reihe { margin-top: 6px; }
#freigabeBlock .reihe.eng { gap: 10px; }
#freigabeBlock .haupt { margin-top: 18px !important; padding: 8px 18px; }

#freigabeBlock > summary {
  background: var(--jade); color: var(--akz-schrift); font-size: 15.5px;
}
#freigabeBlock > summary::after { color: var(--akz-schrift); font-weight: 700; }
#freigabeBlock > summary:hover { background: color-mix(in srgb, var(--jade) 88%, var(--text)); }
#freigabeBlock[open] > summary { border-radius: var(--r-gross) var(--r-gross) 0 0; }

.hk-wuerfel { font: inherit; font-size: 15px; line-height: 1; background: none; border: 0;
  cursor: pointer; padding: 6px 8px; border-radius: 999px; color: inherit; opacity: .7;
  transition: opacity .15s ease, background .15s ease; }
.hk-wuerfel:hover { opacity: 1; background: color-mix(in srgb, currentColor 14%, transparent); }
.hk-wuerfel:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
.hk-wuerfel[disabled] { opacity: .4; cursor: progress; }

.md-karte {
  border-left: 4px solid var(--signal-text);
  background: var(--signal-fl);
}
.md-liste { list-style: none; margin: 0; padding: 0; }
.md-zeile {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  padding: 10px 0; border-top: 1px solid var(--rand);
}
.md-zeile:first-child { border-top: 0; }
.md-wann { flex: 0 0 auto; min-width: 9.5rem; color: var(--nebel); font-size: .85rem; }
.md-text { flex: 1 1 14rem; }
.md-tat { flex: 0 0 auto; }
.md-tat .klein-knopf { min-height: 24px; }
@media (max-width: 560px) {
  .md-wann { min-width: 100%; }

}


.im-rahmen, .im-rahmen body { background: transparent; }
.im-rahmen body { margin: 0; }

.im-rahmen .kopf { display: none; }
.abmelden-rahmen { display: none; }
.im-rahmen .abmelden-rahmen {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  margin: 0 0 12px; flex-wrap: wrap;
}

.im-rahmen .huelle { max-width: none; padding: 0; }

.im-rahmen main > h1:first-child { display: none; }
.im-rahmen main > h1:first-child + .fuehrung { display: none; }

.im-rahmen .karte {
  background: transparent; border: 0; box-shadow: none; padding: 0;
}

.im-rahmen .fuss .fuss-recht { display: none; }
.im-rahmen .fuss {
  justify-content: flex-end; padding: 0; margin: 18px 0 0;
  border-top: 1px solid var(--rand); padding-top: 10px;
}

.fuss .pb.pb-gast { display: none; }
.im-rahmen .fuss .pb.pb-eigen { display: none; }
.im-rahmen .fuss .pb.pb-gast { display: inline-flex; }


.bogen-abschnitt { border: 1px solid var(--rand); border-radius: var(--r); padding: 4px 14px 14px; margin: 0 0 18px; min-width: 0; }
.bogen-abschnitt > legend {
  padding: 0 8px; margin-left: -4px;
  font-family: var(--anzeige); font-weight: 700; font-size: 15px; color: var(--jade-text);
  text-transform: none; letter-spacing: .01em;
}
.bogen-abschnitt > *:first-child { margin-top: 8px; }

.ankreuz-block { margin: 14px 0 4px; min-width: 0; }
.ankreuz-marke { margin: 0 0 6px; font-weight: 600; font-size: 15px; color: var(--text); }
.ankreuz-gitter { display: grid; grid-template-columns: repeat(2, 1fr); align-items: start; gap: 2px 16px; }
.ankreuz-zelle.voll { grid-column: 1 / -1; }
.ankreuz-zelle.paar-anfang { grid-column-start: 1; }
.ankreuz {
  display: flex; align-items: center; gap: 9px;
  min-height: 32px; padding: 3px 0; min-width: 0;
  font-weight: 500; font-size: 15px; line-height: 1.35; cursor: pointer;
}
.ankreuz > span { min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.ankreuz input { width: 20px; height: 20px; flex: none; accent-color: var(--jade-text); margin: 0; }
.ankreuz:hover > span { color: var(--jade-text); }

@media (max-width: 560px) {
  .bogen-abschnitt { padding: 4px 11px 12px; }
  .ankreuz-gitter { grid-template-columns: 1fr; }

}


.sr-nur {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.tr-glocke-huelle { position: relative; display: inline-flex; }

.tr-glocke {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  background: transparent; color: inherit;
  border: 1px solid transparent; border-radius: var(--r-klein);
  cursor: pointer; padding: 0;
}
.tr-glocke svg { width: 19px; height: 19px; }
.tr-glocke:hover { background: rgba(255, 255, 255, .12); }
.tr-glocke:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.tr-glocke[aria-expanded="true"] { background: rgba(255, 255, 255, .18); }

.tr-glocke-zahl {
  position: absolute; top: -2px; right: -2px;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--rot); color: #fff;
  border-radius: 9px; font-size: 11px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tr-glocke-zahl[hidden] { display: none !important; }

.tr-panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  width: min(420px, calc(100vw - 24px));
  background: var(--karte); color: var(--text);
  border: 1px solid var(--rand); border-radius: var(--r);
  box-shadow: var(--schatten);
  overflow: hidden;
  text-align: left;
}
.tr-panel[hidden] { display: none !important; }
@media (max-width: 620px) {
  .tr-glocke-huelle { position: static; }
  .tr-panel { width: min(420px, calc(100vw - 32px)); }

}

.tr-p-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 11px 14px; border-bottom: 1px solid var(--rand);
  font-family: var(--anzeige);
}
.tr-p-zahl {
  background: var(--jade-fl); color: var(--jade-text);
  border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tr-p-leer { margin: 0; padding: 22px 14px; color: var(--nebel); font-size: 14px; }

.tr-p-liste { list-style: none; margin: 0; padding: 0; max-height: 58vh; overflow-y: auto; }

.tr-zeile {
  display: flex; align-items: flex-start; gap: 6px;
  border-bottom: 1px solid var(--rand);
}
.tr-zeile:last-child { border-bottom: 0; }
.tr-zeile:hover { background: var(--linnen); }

.tr-z-weg {
  flex: 1; min-width: 0;
  display: flex; gap: 10px; align-items: baseline;
  padding: 10px 4px 10px 14px;
  color: inherit; text-decoration: none;
}
.tr-z-tot { cursor: default; }
.tr-z-weg:hover .tr-z-text { text-decoration: underline; }
.tr-z-tot:hover .tr-z-text { text-decoration: none; }

.tr-z-wann {
  flex: 0 0 auto; color: var(--nebel); font-size: 12px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tr-z-text { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.4; }
.tr-z-notiz {
  display: block; color: var(--nebel); font-size: 12px; margin-top: 2px;
  overflow-wrap: anywhere;
}

.tr-z-haken {
  flex: 0 0 auto; align-self: center;
  width: 26px; height: 26px; margin-right: 10px;
  border: 1px solid var(--rand); border-radius: var(--r-klein);
  background: var(--karte); color: var(--nebel);
  cursor: pointer; font-size: 13px; line-height: 1;
}
.tr-z-haken:hover { background: var(--jade-fl); color: var(--jade-text); border-color: var(--jade-text); }
.tr-z-haken:disabled { opacity: .4; cursor: default; }

.tr-p-fuss {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 14px; border-top: 1px solid var(--rand); background: var(--linnen);
}
.tr-p-alle {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--jade-text); font-size: 13px; font-weight: 600;
}
.tr-p-alle:disabled { color: var(--nebel); cursor: default; font-weight: 400; }
.tr-p-mehr { color: var(--jade-text); font-size: 13px; font-weight: 600; text-decoration: none; }
.tr-p-mehr:hover { text-decoration: underline; }

.bn-leiste {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.bn-filter { display: flex; gap: 6px; flex-wrap: wrap; }
.bn-filter button {
  border: 1px solid var(--rand); background: var(--karte); color: var(--text);
  border-radius: 999px; padding: 4px 13px; font-size: 13px; cursor: pointer;
}
.bn-filter button.haupt {
  background: var(--jade); border-color: var(--jade); color: #fff; font-weight: 600;
}

.bn-tabelle { width: 100%; border-collapse: collapse; }
.bn-tabelle td { border-bottom: 1px solid var(--rand); padding: 10px 8px; vertical-align: top; }
.bn-tabelle tr:last-child td { border-bottom: 0; }

.bn-offen td:first-child { box-shadow: inset 3px 0 0 var(--jade-text); }
.bn-gelesen { color: var(--nebel); }

.bn-wann { white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--nebel); width: 1%; }
.bn-quelle { width: 1%; }
.bn-was { font-size: 14px; line-height: 1.45; }
.bn-tat { width: 1%; white-space: nowrap; text-align: right; }
.bn-tat > * { margin-left: 6px; }
.bn-notiz { color: var(--nebel); font-size: 12.5px; margin-top: 3px; overflow-wrap: anywhere; }
.bn-quittung { color: var(--nebel); font-size: 12px; margin-top: 3px; font-style: italic; }

.bn-plakette {
  display: inline-block; border-radius: 999px; padding: 2px 9px;
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.bn-patient { background: var(--jade-fl); color: var(--jade-text); }
.bn-praxis  { background: var(--linnen); color: var(--nebel); border: 1px solid var(--rand); }
.bn-system  { background: var(--signal-fl); color: var(--signal-text); }

@media (max-width: 640px) {
  .bn-tabelle, .bn-tabelle tbody, .bn-tabelle tr, .bn-tabelle td { display: block; width: auto; }
  .bn-tabelle tr { border-bottom: 1px solid var(--rand); padding: 8px 0; }
  .bn-tabelle td { border-bottom: 0; padding: 2px 8px; }
  .bn-offen td:first-child { box-shadow: none; }
  .bn-offen { box-shadow: inset 3px 0 0 var(--jade-text); }
  .bn-tat { text-align: left; }
  .bn-tat > * { margin: 6px 6px 0 0; }

}

.wunsch-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  align-items: start; gap: 2px 12px; margin-top: 4px; }
.wunsch-haken { display: flex; align-items: center; gap: 8px; min-width: 0;
  margin: 0; padding: 5px 2px; cursor: pointer; font-weight: 400; }
.wunsch-haken input { flex: none; width: 18px; height: 18px; margin: 0; cursor: pointer; }
.wunsch-haken span { min-width: 0; overflow-wrap: break-word; }

.anfrage-streifen { display: flex; align-items: center; gap: 12px; width: 100%;
  margin: 0 0 12px; padding: 10px 12px; text-align: left; text-decoration: none;
  border: 1px solid var(--rand, #d7dde3); border-left: 4px solid var(--akzent, #0C6F79);
  border-radius: 8px; background: var(--karte, #fff); color: inherit; cursor: pointer; }
.anfrage-streifen:hover { background: var(--karte-hover, rgba(0, 0, 0, .03)); }
.anfrage-streifen .zahl { flex: none; display: grid; place-items: center;
  min-width: 32px; height: 32px; padding: 0 6px; border-radius: 999px;
  background: var(--akzent, #0C6F79); color: var(--auf-akzent, #fff);
  font-weight: 700; font-variant-numeric: tabular-nums; }

.ep-feld { display: inline-flex; align-items: center; gap: 6px; width: 100%; }
.ep-feld > input[type="text"] { flex: 1 1 auto; min-width: 48px; }
.ep-daumen { display: inline-flex; gap: 3px; flex: 0 0 auto; }
button.ep-d {
  min-height: 28px; height: 28px; min-width: 28px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1; border-radius: 8px;
  background: var(--karte); border: 1.5px solid var(--rand);
  opacity: .45;
}
button.ep-d[data-wert="auf"] { color: var(--gruen); }
button.ep-d[data-wert="ab"]  { color: var(--rot); }
button.ep-d:hover { opacity: .85; }
button.ep-d[aria-pressed="true"] { opacity: 1; border-width: 2px; }
button.ep-d[data-wert="auf"][aria-pressed="true"] { border-color: var(--gruen); background: var(--gruen-fl); }
button.ep-d[data-wert="ab"][aria-pressed="true"]  { border-color: var(--rot); background: var(--rot-fl); }
.ep-ds { vertical-align: -3px; }
.ep-quadrant { margin: 8px 0 4px; }
.ep-q-titel { display: block; margin-bottom: 4px; }
.ep-q-gitter { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 320px; }
.ep-q { position: relative; min-height: 56px; border: 1.5px solid var(--rand); border-radius: 10px; background: var(--karte); color: var(--text); display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 6px 10px; font: inherit; cursor: pointer; }
.ep-q:nth-child(1), .ep-q:nth-child(3) { align-items: flex-start; }
.ep-q:nth-child(2), .ep-q:nth-child(4) { align-items: flex-end; }
.ep-q-nr { font-family: var(--anzeige); font-weight: 700; font-size: 22px; line-height: 1; min-height: 22px; color: var(--jade-text); }
.ep-q-name { font-size: 11px; color: var(--nebel); }
.ep-q.gesetzt { border-color: var(--jade); background: var(--jade-fl); }
.ep-q-kopf { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%); color: var(--text); background: var(--linnen); border-radius: 50%; pointer-events: none; z-index: 1; }
.ep-q-lesen .ep-q-gitter { max-width: 250px; gap: 8px; }
.ep-q-lesen .ep-q { min-height: 46px; cursor: default; }
.ep-q-lesen .ep-q-nr { font-size: 18px; min-height: 18px; }
.ep-q-lesen .ep-q-kopf { width: 32px; height: 32px; }

.ep-dp { font-size: 12px; font-weight: 500; white-space: nowrap; }
.ep-dp.auf { color: var(--gruen); }
.ep-dp.ab  { color: var(--rot); }
.ep-dp.leer { color: var(--nebel); font-style: italic; }

.ep-feld.nur-daumen { justify-content: flex-start; }

hr.akte-schnitt { border: 0; border-top: 2px solid var(--rand); margin: 20px 0 0; }

table.akte-befunde { width: 100%; border-collapse: collapse; }
table.akte-befunde td { padding: 3px 8px 3px 0; border-bottom: 1px solid var(--rand); vertical-align: baseline; }
table.akte-befunde td:first-child { color: var(--nebel); width: 45%; }
table.akte-befunde tr:last-child td { border-bottom: 0; }

.akte-nachtrag { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--rand);
  border-left: 3px solid var(--jade); border-radius: var(--r); background: var(--karte); }
.akte-nachtrag + .akte-nachtrag { margin-top: 10px; }
.akte-nachtrag-kopf { margin: 0 0 6px; font-weight: 600; color: var(--tinte); }


@keyframes hk-auftritt { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hk-inhalt > *, .ck-kachel, .tl-weg, .kpi { animation: hk-auftritt .55s cubic-bezier(.22, 1, .36, 1) backwards; }
.hk-inhalt > :nth-child(2), .ck-kachel:nth-child(2), .tl-weg:nth-child(2), .kpi:nth-child(2) { animation-delay: .06s; }
.hk-inhalt > :nth-child(3), .ck-kachel:nth-child(3), .tl-weg:nth-child(3), .kpi:nth-child(3) { animation-delay: .12s; }
.hk-inhalt > :nth-child(4), .ck-kachel:nth-child(4), .tl-weg:nth-child(4), .kpi:nth-child(4) { animation-delay: .18s; }
.hk-inhalt > :nth-child(5), .tl-weg:nth-child(5) { animation-delay: .24s; }
.hk-inhalt > :nth-child(6), .tl-weg:nth-child(6) { animation-delay: .30s; }
.tl-weg:nth-child(7) { animation-delay: .36s; }

.hk-kopf {
  background-color: var(--karte); background-image: none; color: var(--text);
  border-bottom: 1px solid var(--rand); padding-block: 14px;
}
.hk-kopf .marke { font-size: 19px; color: var(--text); }
.hk-kopf .hk-rechts, .hk-kopf .hk-wer { color: var(--text); }
.hk-kopf .theme-toggle { background: var(--linnen); border-color: var(--rand); color: var(--text); }
.hk-kopf .theme-toggle:hover { background: var(--jade-fl); color: var(--jade-text); }

.hk-bereiche { gap: 26px; margin-left: 40px; }
.hk-bereich {
  position: relative; padding: 8px 0; border: 0; border-radius: 0; background: transparent;
  color: var(--nebel); font-size: 12.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  transition: color .18s ease;
}
.hk-bereich .ik { display: none; }
.hk-bereich::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -15px; height: 2px; background: var(--jade);
  transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
.hk-bereich:hover { background: transparent; color: var(--text); }
.hk-bereich.aktiv { background: transparent; color: var(--text); border-color: transparent; }
.hk-bereich.aktiv::after { transform: scaleX(1); }
.hk-bereich .hk-abz { color: var(--akz-schrift); }

.hk-flaeche { flex-direction: column; }
.hk-unter {
  width: 100%; max-width: var(--inhalt-max); margin-inline: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px;
  padding: 14px 26px 0; background: transparent; border: 0; box-shadow: none; max-height: none; overflow: visible;
}
.hk-unter-titel { padding: 0 6px 0 14px; }
.hk-unter-titel:first-child { padding-left: 4px; }
.hk-punkt + .hk-unter-titel { padding-top: 0; }
.hk-leer { display: none; }
.hk-punkt { border-radius: 999px; padding: 7px 14px; font-weight: 500; color: var(--nebel); }
.hk-punkt:hover { background: var(--linnen); color: var(--text); }
.hk-punkt.aktiv { background: var(--text); color: var(--karte); font-weight: 600; }
.hk-punkt.aktiv .ik { color: var(--karte); }
.hk-unter { gap: 10px 0; align-items: stretch; }
.hk-gruppe { display: flex; flex-direction: column; gap: 6px; padding: 0 22px 0 14px; border-left: 1px solid var(--rand); }
.hk-gruppe .hk-unter-titel { padding: 0 0 0 14px; }
.hk-gruppe-punkte { display: flex; flex-wrap: wrap; gap: 4px; }
.hk-punkt { border-color: var(--rand); background: var(--karte); }
.hk-punkt:hover { border-color: var(--rand-kraeftig); }
.hk-punkt.aktiv { border-color: var(--text); }
@media (max-width: 780px) {
  .hk-gruppe, .hk-gruppe-punkte { display: contents; }

}
.dialog-grund[data-tag] .tag-kopf .datum { display: none; }
.dialog-grund[data-tag] #tagBox > .karte { border: 0; padding: 0; margin: 0; background: transparent; box-shadow: none; }

.hk-inhalt { padding: 22px 26px 90px; }
.hk-inhalt > h1 { font-size: 46px; letter-spacing: -.035em; line-height: 1.02; margin: 10px 0 22px; }
.hk .karte { border: 0; border-top: 1px solid var(--rand); border-radius: 0; background: transparent; padding: 22px 0 8px; box-shadow: none; }
.hk .karte.eng { padding: 18px 0 6px; }
.hk .kpis { gap: 0; border-top: 1px solid var(--rand); border-bottom: 1px solid var(--rand); margin-bottom: 12px; }
.hk .kpi { border: 0; border-radius: 0; background: var(--karte); padding: 22px 24px; }
.hk .kpi + .kpi { border-left: 1px solid var(--rand); }
.hk .kpi .n { font-family: var(--anzeige); font-size: 52px; font-weight: 600; letter-spacing: -.045em; line-height: 1; }
.hk .kpi .l { margin-top: 8px; font-size: 13px; }
.hk .ansicht-schalter { border-color: transparent; }

.ck-gitter { gap: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rand); border-bottom: 1px solid var(--rand); margin-top: 14px; }
.ck-kachel { border: 0; border-radius: 0; background: var(--karte); box-shadow: none; padding: 24px 24px 22px; transition: background .18s ease; }
.ck-kachel + .ck-kachel { border-left: 1px solid var(--rand); }
.ck-kachel:hover, .ck-kachel:focus-visible { transform: none; box-shadow: none; background: var(--linnen); border-color: var(--rand); }
.ck-zahl { font-size: 68px; letter-spacing: -.045em; }
.ck-symbol { display: none; }
.tl-wege { margin-top: 36px; }
.tl-wege-gitter { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--rand); }
@media (min-width: 1000px) {
  .tl-wege-gitter { grid-template-columns: 1fr 1fr; column-gap: 40px; }

}
.tl-weg { border: 0; border-bottom: 1px solid var(--rand); border-radius: 0; background: transparent; padding: 16px 6px; transition: background .18s ease, padding .25s cubic-bezier(.22, 1, .36, 1); }
.tl-weg:hover, .tl-weg:focus-visible { transform: none; box-shadow: none; background: var(--linnen); padding-left: 14px; border-color: var(--rand); }
.tl-weg-titel { font-size: 17px; }

@media (max-width: 780px) {
  .hk-kopf { padding-block: 10px; padding-inline: 16px; }
  .hk-inhalt { padding: 16px 16px 50px; }
  .hk-bereiche { gap: 14px; margin-left: 0; }
  .hk-bereich { font-size: 11.5px; letter-spacing: .1em; }
  .hk-bereich::after { bottom: -11px; }
  .hk-unter { padding: 10px 16px 0; }
  .hk-inhalt > h1 { font-size: 34px; }
  .ck-gitter, .hk .kpis { grid-template-columns: 1fr 1fr; }
  .ck-kachel:nth-child(3), .hk .kpi:nth-child(3) { border-left: 0; }
  .ck-kachel:nth-child(n+3), .hk .kpi:nth-child(n+3) { border-top: 1px solid var(--rand); }
  .ck-zahl { font-size: 48px; }

}

.farb-gruppe { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 999px; background: var(--linnen); border: 1px solid var(--rand); }
.hk-kopf .farb-gruppe .theme-toggle { border: 0; background: transparent; }
.hk-kopf .farb-gruppe .theme-toggle:hover { background: var(--karte); }
.farb-wahl {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; min-height: 34px;
  border: 0; border-radius: 999px; background: transparent; color: var(--text); cursor: pointer; padding: 0;
  transition: background .15s ease, color .15s ease;
}
.farb-wahl:hover, .farb-wahl[aria-expanded="true"] { background: var(--karte); color: var(--jade-text); }
.farb-wahl svg { width: 18px; height: 18px; display: block; }
.farb-tafel {
  position: absolute; right: 0; top: calc(100% + 12px); width: 340px; z-index: 60;
  background: var(--karte); border: 1px solid var(--rand); border-radius: var(--r-gross); padding: 14px;
  box-shadow: var(--schatten), 0 24px 60px -30px color-mix(in srgb, var(--text) 50%, transparent);
  animation: hk-auftritt .25s cubic-bezier(.22, 1, .36, 1) backwards;
  text-align: left; font-weight: 400;
}
.farb-titel { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 4px 2px 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--nebel); }
.farb-hinweis { font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 11.5px; }
.farb-toenung { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: var(--linnen); border-radius: 999px; padding: 3px; margin-bottom: 14px; }
.farb-toenung button { border: 0; background: transparent; min-height: 32px; padding: 0 8px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 600; color: var(--nebel); cursor: pointer; }
.farb-toenung button:hover { color: var(--text); }
.farb-toenung button.an { background: var(--karte); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.farb-felder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; min-height: 60px; }
.farb-feld {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px 6px; min-height: 0;
  border: 1.5px solid var(--rand); border-radius: 12px; background: var(--f-grund, var(--linnen)); color: var(--text);
  font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; line-height: 1.1;
  transition: transform .2s cubic-bezier(.22, 1, .36, 1), border-color .2s ease, box-shadow .2s ease;
}
.farb-feld:hover { transform: translateY(-2px); border-color: var(--f-akz, var(--jade-text)); }
.farb-feld.an { border-color: var(--f-akz, var(--jade-text)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--f-akz, var(--jade)) 35%, transparent); }
.farb-feld:disabled { opacity: .6; cursor: progress; transform: none; }
.hk-kopf, .hk-inhalt, .hk .karte, .ck-kachel, .hk .kpi, .tl-weg, .hk-punkt.aktiv, button.haupt, .knopf.haupt { transition: background-color .22s ease, color .22s ease, border-color .22s ease; }
.farb-punkt { width: 26px; height: 26px; border-radius: 50%; background: var(--f-akz, var(--jade)); box-shadow: inset 0 0 0 3px var(--f-karte, var(--karte)); }
.farb-name { color: var(--text); }
.farb-meldung { font-size: 12px; color: var(--nebel); margin: 10px 2px 0; min-height: 1.2em; }
p.farb-meldung:empty { margin-top: 0; min-height: 0; }
@media (max-width: 480px) {
  .farb-tafel { width: min(92vw, 340px); right: -6px; }
  .farb-felder { grid-template-columns: repeat(3, 1fr); }

}
@keyframes tr-panel-herab {
  from { opacity: 0; transform: translateY(-10px); }
}
html[data-fuss="mobil"] { --warnleiste-unten: calc(86px + env(safe-area-inset-bottom)); }
html[data-fuss="schmal"] { --warnleiste-unten: 101px; }

.hk-fuss {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; align-items: stretch; gap: 2px;
  padding: 4px 6px calc(4px + env(safe-area-inset-bottom));
  min-height: calc(56px + env(safe-area-inset-bottom));
  background: var(--karte);
  border-top: 1px solid var(--rand);
  box-shadow: 0 -6px 18px -12px rgba(0, 0, 0, .38);
}
.hk-f-punkt {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-height: 52px; padding: 4px 2px;
  border: 0; background: transparent; color: var(--nebel);
  font: inherit; font-size: 10.5px; font-weight: 600; line-height: 1.15; letter-spacing: -.01em;
  text-decoration: none; border-radius: 14px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .16s ease;
}
.hk-f-punkt:hover { color: var(--text); }
.hk-f-punkt.aktiv { color: var(--jade-text); }
.hk-f-punkt:focus-visible { outline: 2px solid var(--jade-text); outline-offset: -2px; }
.hk-f-ik {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-width: 46px; height: 26px; border-radius: 999px;
  transition: background-color .18s ease;
}
.hk-f-punkt.aktiv .hk-f-ik { background: var(--jade-fl); }
.hk-f-ik .ik { width: 22px; height: 22px; }
.hk-f-titel { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 400px) {
  .hk-fuss { padding-inline: 2px; gap: 1px; }
  .hk-f-punkt { padding: 4px 0; }
  .hk-f-titel { font-size: 10.5px; letter-spacing: -.2px; }
  .hk-f-ik { height: 24px; min-width: 40px; }
  .hk-f-ik .ik { width: 20px; height: 20px; }

}
.hk-f-ik .hk-abz {
  position: absolute; top: -4px; right: 4px;
  background: var(--signal); color: #fff; font-size: 10px; font-weight: 700;
  border-radius: 999px; padding: 0 5px; line-height: 15px; min-width: 15px;
  text-align: center; font-variant-numeric: tabular-nums;
}
.hk-f-ik .hk-abz[hidden] { display: none !important; }
.hk-fuss.hk-fuss-schmal { justify-content: center; padding: 8px; min-height: 0; }
.hk-fuss.hk-fuss-schmal .hk-f-um {
  flex: 0 1 auto; flex-direction: row; gap: 12px;
  min-height: 76px; padding: 0 28px; font-size: 26px; border-radius: 18px;
  color: var(--text); background: var(--jade-fl);
}
.hk-fuss.hk-fuss-schmal .hk-f-ik { min-width: 0; height: auto; }
.hk-fuss.hk-fuss-schmal .ik { width: 30px; height: 30px; }
html[data-fuss="schmal"] .hk-inhalt { padding-bottom: 120px; }
.hk-f-blatt {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  background: var(--karte); border-top: 1px solid var(--rand);
  border-radius: 16px 16px 0 0;
  padding: 10px 10px calc(70px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 30px -16px rgba(0, 0, 0, .55);
  max-height: 60dvh; overflow-y: auto; overscroll-behavior: contain;
}
.hk-f-blatt[hidden] { display: none !important; }
.hk-f-blatt::before {
  content: ''; display: block; width: 38px; height: 4px; border-radius: 999px;
  background: var(--rand-kraeftig); opacity: .5; margin: 2px auto 10px;
}
.hk-f-blatt-kopf {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--nebel); padding: 2px 8px 8px;
}
.hk-f-blatt-punkte { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px; }
.hk-f-blatt .hk-f-punkt {
  flex-direction: row; justify-content: flex-start; gap: 10px;
  min-height: 48px; padding: 0 12px; font-size: 15px; color: var(--text);
}
.hk-f-blatt .hk-f-punkt.aktiv { color: var(--jade-text); }
.hk-f-blatt .hk-f-ik { min-width: 26px; height: 26px; }
@media (prefers-reduced-motion: reduce) {
  .hk-f-punkt, .hk-f-ik { transition: none; }

}

.ov-protokoll-pfeil { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; white-space: nowrap; }
.ov-protokoll-pfeil .ov-pfeil-zeichen { display: inline-block; transition: transform .15s ease; }
.ov-protokoll-pfeil[aria-expanded="true"] .ov-pfeil-zeichen { transform: rotate(180deg); }
.ov-protokoll-block { margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--rand); }
.ov-prot-titel { margin: 0 0 6px; font-size: 1rem; }

@media (min-width: 1280px) {
  .dialog.mit-auszug { position: relative; overflow: visible; }
  .dialog.mit-auszug .ov-protokoll-block {
    position: absolute; left: calc(100% + 16px); top: 0; height: 100%;
    width: min(400px, calc(50vw - 380px - 40px));
    margin: 0; padding: 16px 18px; border-bottom: 0;
    overflow-y: auto; overscroll-behavior: contain;
    background: var(--karte); border: 1px solid var(--rand);
    border-radius: var(--r-gross); box-shadow: var(--schatten);
  }
}
.ov-prot-eintrag { padding: 8px 0; border-bottom: 1px solid var(--rand); }
.ov-prot-eintrag:last-child { border-bottom: 0; }

.gruss-baender {
  width: 100%; max-width: var(--spur); margin-inline: auto;
  padding: 18px 26px 0; box-sizing: border-box;
}
.gruss-band {
  --gruss-farbe: var(--jade);
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--karte);
  border: 1px solid var(--rand);
  border-left: 4px solid var(--gruss-farbe);
  border-radius: 12px;
  padding: 14px 16px; margin: 0 0 12px;
}
.gruss-band .gsym { font-size: 26px; line-height: 1.15; flex: 0 0 auto; }
.gruss-band .gtext { flex: 1 1 auto; min-width: 0; }
.gruss-band .gtitel { font-weight: 600; font-size: 16px; margin: 0 0 3px; color: var(--text); }
.gruss-band .gtext p {
  margin: 0; font-size: 15px; line-height: 1.5; color: var(--nebel);
  overflow-wrap: anywhere; white-space: pre-wrap;
}