:root {
  
  --j-nacht-900: #111a33;
  --j-nacht-800: #1b2750;
  --j-nacht-700: #243468;
  --j-nacht-600: #2f4383;
  --j-nacht-100: #e6eaf5;
  --j-nacht-50:  #f2f4fa;
  --j-bernstein-600: #c77d12;
  --j-bernstein-500: #e39a2d;
  --j-bernstein-100: #fcefd9;

  
  --j-stein-900: #1e1f24;
  --j-stein-700: #43454d;
  --j-stein-500: #6b6e78;
  --j-stein-300: #c9cbd2;
  --j-stein-200: #e1e2e7;
  --j-stein-100: #eef0f3;
  --j-stein-50:  #f7f7f9;
  --j-weiss: #ffffff;

  
  --j-ok-bg: #dff3e4;      --j-ok-fg: #17663a;
  --j-warn-bg: #fdf0c8;    --j-warn-fg: #7a5600;
  --j-fehler-bg: #fbe0de;  --j-fehler-fg: #a3261d;
  --j-info-bg: #dcecfb;    --j-info-fg: #0d5a8c;
  --j-neutral-bg: var(--j-stein-100); --j-neutral-fg: var(--j-stein-700);

  
  --flaeche: var(--j-stein-50);
  --karte: var(--j-weiss);
  --text: var(--j-stein-900);
  --text-leise: var(--j-stein-500);
  --linie: var(--j-stein-200);
  --primaer: var(--j-nacht-700);
  --primaer-hover: var(--j-nacht-800);
  --auf-primaer: var(--j-weiss);   
  --akzent: var(--j-bernstein-500);
  --fokus: var(--j-bernstein-500);

  
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --schrift-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --gr-klein: .8125rem;  
  --gr-text:  .9375rem;  
  --gr-titel: 1.125rem;  
  --gr-seite: 1.625rem;  
  
  --gr-winzig:  .5625rem; 
  --gr-mini:    .625rem;  
  --gr-etikett: .6875rem; 
  --gr-zusatz:  .75rem;   
  --gr-mittel:  1rem;     
  --gr-lese:    1.0625rem; 
  --gr-gross:   1.25rem;  

  
  --a1: .25rem; --a2: .5rem; --a3: .75rem; --a4: 1rem; --a5: 1.5rem; --a6: 2rem; --a8: 3rem;

  --rund-s: 6px; --rund-m: 10px; --rund-voll: 999px;
  --schatten: 0 1px 2px rgba(17, 26, 51, .06), 0 1px 1px rgba(17, 26, 51, .04);
  --schatten-hoch: 0 2px 8px rgba(17, 26, 51, .10);
  --schatten-dialog: 0 10px 30px rgba(17, 26, 51, .25);
  --schatten-tief-farbe: rgba(15, 23, 42, .18); 
  --j-fehler-rand: #efbdb8;  
  --schleier: rgba(17, 26, 51, .45);
  --breite-max: 72rem;
}


*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--flaeche); }
body { margin: 0; background: var(--flaeche); color: var(--text); font: var(--gr-text)/1.5 var(--schrift); }
h1, h2, h3 { line-height: 1.25; margin: 0; }
a { color: var(--primaer); text-underline-offset: 2px; }
a:hover { color: var(--primaer-hover); }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; border-radius: 3px; }

.kalender-tag:has(input:focus-visible),
.datei-knopf:focus-within,
.ansicht-karte:has(input:focus-visible),
.med-art input:focus-visible + span,
.kasse-art input:focus-visible ~ .akt-rund-kreis { outline: 3px solid var(--fokus); outline-offset: 2px; }
.talk-kurz:focus-visible,
button.akt-zeile:focus-visible,
.tz .chip-wahl input:focus-visible + span,
.pinn-farbe input:focus-visible + span,
.kasse-art input:focus-visible + span { outline: 3px solid var(--fokus); outline-offset: 1px; }
code { font-family: var(--schrift-mono); font-size: .9em; background: var(--j-stein-100); padding: 0 .3em; border-radius: 4px; }


.kopf { background: var(--j-nacht-800); color: var(--j-weiss); border-bottom: 3px solid var(--akzent); }
.kopf-innen { max-width: var(--breite-max); margin: 0 auto; padding: var(--a3) var(--a5);
              display: flex; flex-wrap: wrap; align-items: center; gap: var(--a3) var(--a6); }
.kopf-marke { display: flex; align-items: center; gap: var(--a2); color: inherit; text-decoration: none; font-weight: 700; }
.kopf-marke:hover { color: inherit; }
.kopf-marke .logo { width: 28px; height: 28px; flex: none; }
.kopf-marke small { display: block; font-weight: 400; font-size: var(--gr-klein); opacity: .75; }
.kopf-nutzer { font-size: var(--gr-klein); color: var(--j-nacht-100); display: flex; gap: var(--a3); align-items: center; }
.kopf-nutzer a { color: var(--j-weiss); }

.inhalt { max-width: var(--breite-max); margin: 0 auto; padding: var(--a5); }


.seitenkopf { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--a3) var(--a4); margin-bottom: var(--a5); }
.seitenkopf h1 { font-size: var(--gr-seite); display: flex; flex-wrap: wrap; align-items: center; gap: var(--a3); }
.seitenkopf .aktionen { margin-left: auto; display: flex; gap: var(--a2); }
.brotkrume { width: 100%; font-size: var(--gr-klein); color: var(--text-leise); }
.brotkrume a { color: var(--text-leise); }
.untertitel { width: 100%; color: var(--text-leise); margin: calc(-1 * var(--a2)) 0 0; }

.raster-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: var(--a4); }




.kachel { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund-m);
          box-shadow: var(--schatten); padding: var(--a5); margin-bottom: var(--a4); }
.kachel-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a2) var(--a4); margin-bottom: var(--a4); }
.kachel-kopf h2 { font-size: var(--gr-titel); }
.kachel-kopf .aktionen { margin-left: auto; display: flex; gap: var(--a2); }

.kachel > h3, .abschnitt-titel { font-size: var(--gr-klein); text-transform: uppercase; letter-spacing: .06em;
          color: var(--text-leise); margin: var(--a5) 0 var(--a3); font-weight: 600; }
.kachel > h3:first-child { margin-top: 0; }


.knopf { display: inline-flex; align-items: center; justify-content: center; gap: var(--a2);
         min-height: 2.5rem; padding: 0 var(--a4); border-radius: var(--rund-s); border: 1px solid transparent;
         font: 600 var(--gr-text)/1 var(--schrift); text-decoration: none; cursor: pointer; white-space: nowrap;
         background: var(--primaer); color: var(--auf-primaer); }
.knopf:hover { background: var(--primaer-hover); color: var(--auf-primaer); }
.knopf-sekundaer { background: var(--karte); color: var(--primaer); border-color: var(--j-stein-300); }
.knopf-sekundaer:hover { background: var(--j-nacht-50); color: var(--primaer-hover); }
.knopf-still { background: transparent; color: var(--primaer); padding: 0 var(--a2); }
.knopf-still:hover { background: var(--j-nacht-50); color: var(--primaer-hover); }
.knopf-klein { min-height: 2rem; padding: 0 var(--a3); font-size: var(--gr-klein); }
.knopf[disabled] { opacity: .45; cursor: not-allowed; }


.felder { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--a4); }
.felder .breit { grid-column: 1 / -1; }
.feld { display: flex; flex-direction: column; gap: var(--a1); min-width: 0; }
.feld > span, .feld > legend { font-size: var(--gr-klein); font-weight: 600; color: var(--j-stein-700); padding: 0; }
.feld .pflicht::after { content: " *"; color: var(--j-fehler-fg); }
.feld small { font-size: var(--gr-klein); color: var(--text-leise); }
fieldset.feld { border: 0; margin: 0; padding: 0; }
.eingabe, input[type=text], input[type=email], input[type=tel], input[type=number], input[type=search], input[type=time], input[type=password], select, textarea {
  width: 100%; min-height: 2.5rem; padding: var(--a2) var(--a3); border: 1px solid var(--j-stein-300);
  border-radius: var(--rund-s); background: var(--karte); color: var(--text); font: inherit; }
input:hover, select:hover, textarea:hover { border-color: var(--j-stein-500); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--fokus); outline-offset: 0; border-color: var(--primaer); }
.feld-schmal input { max-width: 8rem; }
.formular-fuss { display: flex; flex-wrap: wrap; gap: var(--a2); align-items: center; margin-top: var(--a5);
                 padding-top: var(--a4); border-top: 1px solid var(--linie); }
.formular-fuss .rechts { margin-left: auto; }


.auswahl { display: flex; flex-wrap: wrap; gap: var(--a2); }
.auswahl label { display: inline-flex; align-items: center; gap: var(--a2); padding: var(--a2) var(--a3);
                 border: 1px solid var(--j-stein-300); border-radius: var(--rund-s); background: var(--karte); cursor: pointer; }
.auswahl label:hover { border-color: var(--primaer); }
.auswahl label:has(input:checked) { border-color: var(--primaer); background: var(--j-nacht-50); font-weight: 600; }
.auswahl label:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.auswahl input { accent-color: var(--primaer); margin: 0; }


.werte { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--a4) var(--a5); margin: 0; }
.werte div { min-width: 0; }
.werte dt { font-size: var(--gr-klein); color: var(--text-leise); margin-bottom: 2px; }
.werte dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }

.werte dd:empty::before, .leer::before { content: "-"; color: var(--text-leise); }
.leer { display: inline-block; min-width: .6em; text-align: center; }


.marke { display: inline-flex; align-items: center; gap: .4em; padding: .15rem .6rem; border-radius: var(--rund-voll);
         font-size: var(--gr-klein); font-weight: 600; white-space: nowrap; line-height: 1.5; vertical-align: middle; }
.marke::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: currentColor; }
.marke-ok, .status-Aktiv { background: var(--j-ok-bg); color: var(--j-ok-fg); }
.marke-warn { background: var(--j-warn-bg); color: var(--j-warn-fg); }
.marke-fehler, .status-Inaktiv { background: var(--j-fehler-bg); color: var(--j-fehler-fg); }
.marke-info { background: var(--j-info-bg); color: var(--j-info-fg); }
.marke-neutral { background: var(--j-neutral-bg); color: var(--j-neutral-fg); }
.marke-schlicht::before { display: none; }


.chips { display: flex; flex-wrap: wrap; gap: var(--a2); }
.chip { display: inline-flex; align-items: center; gap: var(--a1); padding: var(--a1) var(--a3); border-radius: var(--rund-voll);
        background: var(--j-nacht-50); border: 1px solid var(--j-nacht-100); color: var(--primaer); text-decoration: none; font-size: var(--gr-klein); font-weight: 600; }
.chip:hover { background: var(--j-nacht-100); }
.chip small { font-weight: 400; color: var(--text-leise); }


.meldung { display: flex; gap: var(--a3); align-items: flex-start; padding: var(--a3) var(--a4); border-radius: var(--rund-s);
           margin-bottom: var(--a4); border: 1px solid transparent; }
.meldung::before { font-weight: 700; }
.meldung-ok { background: var(--j-ok-bg); color: var(--j-ok-fg); border-color: #b7e2c3; }
.meldung-ok::before { content: "✓"; }
.meldung-fehler { background: var(--j-fehler-bg); color: var(--j-fehler-fg); border-color: var(--j-fehler-rand); }
.meldung-fehler::before { content: "!"; }
.meldung-info { background: var(--j-info-bg); color: var(--j-info-fg); border-color: #b9d8f1; }
.meldung-info::before { content: "i"; font-style: italic; font-family: Georgia, serif; }
.meldung-warn { background: var(--j-warn-bg); color: var(--j-warn-fg); border-color: #f0d890; }
.meldung-warn::before { content: "!"; }


.filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--a3); margin-bottom: var(--a4); }
.filter .feld { min-width: 10rem; }
.filter .feld-suche { flex: 1; min-width: 12rem; }


.tabelle-rahmen { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund-m); box-shadow: var(--schatten); overflow-x: auto; }
.tabelle { width: 100%; border-collapse: collapse; }
.tabelle th { text-align: left; font-size: var(--gr-klein); font-weight: 600; color: var(--text-leise); background: var(--j-stein-50);
              padding: var(--a3) var(--a4); border-bottom: 1px solid var(--linie); white-space: nowrap; }
.tabelle td { padding: var(--a3) var(--a4); border-bottom: 1px solid var(--linie); vertical-align: middle; }
.tabelle tbody tr:last-child td { border-bottom: 0; }
.tabelle tbody tr:hover { background: var(--j-nacht-50); }
.tabelle .haupt a { font-weight: 600; text-decoration: none; }
.tabelle .haupt a:hover { text-decoration: underline; }
.tabelle-fuss { font-size: var(--gr-klein); color: var(--text-leise); margin-top: var(--a2); }


.leerzustand { text-align: center; padding: var(--a6) var(--a4); color: var(--text-leise); }
.leerzustand strong { display: block; color: var(--text); margin-bottom: var(--a1); }


.anmeldung { max-width: 26rem; margin: 10vh auto; text-align: center; }
.anmeldung .logo { width: 56px; height: 56px; margin-bottom: var(--a3); }


.farbfelder { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--a3); }
.farbfeld { border: 1px solid var(--linie); border-radius: var(--rund-s); overflow: hidden; font-size: var(--gr-klein); background: var(--karte); }
.farbfeld i { display: block; height: 3rem; }
.farbfeld span { display: block; padding: var(--a2); }
.farbfeld code { background: none; padding: 0; color: var(--text-leise); }


.dashboard-gruppe { margin-bottom: var(--a5); }
.dashboard-gruppe > .abschnitt-titel { margin-top: 0; }
.raster-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--a4); }
.kachel-link { display: flex; flex-direction: column; gap: var(--a2); margin: 0; color: var(--text); text-decoration: none;
               border-top: 3px solid var(--primaer); transition: border-color .15s, box-shadow .15s; }
.kachel-link:hover { color: var(--text); border-color: var(--primaer); border-top-color: var(--akzent);
                     box-shadow: var(--schatten-hoch); }
.kachel-link-titel, .stempelkarte-titel { font-size: var(--gr-titel); font-weight: 700; color: var(--primaer); }
.kachel-link-stand { display: flex; flex-wrap: wrap; gap: var(--a1) var(--a2); }
.kachel-link-stand .marke { white-space: normal; border-radius: var(--rund-s); }
.kachel-link-aktion { margin-top: auto; padding-top: var(--a2); font-size: var(--gr-klein); font-weight: 600; color: var(--primaer); }


.monatswahl { display: flex; align-items: center; gap: var(--a3); margin-bottom: var(--a4); }
.kalender { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--a2); margin-bottom: var(--a4); }
.kalender-kopf { font-size: var(--gr-klein); font-weight: 600; color: var(--text-leise); text-align: center; }
.kalender-tag { position: relative; display: flex; flex-direction: column; gap: var(--a1); min-width: 0; min-height: 4.5rem;
                padding: var(--a2); border: 1px solid var(--linie); border-radius: var(--rund-s); background: var(--karte);
                cursor: pointer; font-size: var(--gr-klein); }
.kalender-tag.wochenende { background: var(--j-stein-50); }
.kalender-tag:hover { border-color: var(--primaer); }
.kalender-tag input { position: absolute; opacity: 0; pointer-events: none; }
.kalender-tag:has(input:checked), .kalender-tag.gewaehlt, .team-kal .kalender-tag.markiert { border-color: var(--primaer); background: var(--j-nacht-50); box-shadow: inset 0 0 0 1px var(--primaer); }
.kalender-tag .tag-nr { font-weight: 700; font-size: var(--gr-text); }
.kalender-tag small { color: var(--text-leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kalender-kw, .tag-wt, .tag-monat { display: none; }
div.kalender-tag { cursor: default; }
div.kalender-tag:hover { border-color: var(--linie); }

.kalender-tag.st-voll { border-left: 4px solid var(--j-ok-fg); }
.kalender-tag.st-teilweise { border-left: 4px solid var(--j-warn-fg); }
.kalender-tag.st-konflikt { border-left: 4px solid var(--j-fehler-fg); }
.kalender-tag.zuletzt { box-shadow: 0 0 0 3px var(--akzent); }
.kalender-tag.heute .tag-nr { color: var(--primaer); text-decoration: underline 2px var(--akzent); text-underline-offset: 3px; }

.plan-schicht { display: flex; align-items: center; gap: var(--a1); width: 100%; min-width: 0; padding: 2px var(--a1);
                border: 1px solid transparent; border-radius: 4px; background: none; font: inherit; color: var(--text);
                text-align: left; cursor: pointer; }
.plan-schicht:hover { border-color: var(--primaer); background: var(--j-nacht-50); }
.plan-schicht b { flex: none; min-width: 1.9em; font-size: var(--gr-etikett); color: var(--text-leise); }
.plan-schicht .wer { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.plan-schicht .wer.offen { font-weight: 400; color: var(--text-leise); font-style: italic; }
.plan-schicht.konflikt { background: var(--j-fehler-bg); color: var(--j-fehler-fg); }
.plan-schicht.konflikt .wer { color: var(--j-fehler-fg); }
.plan-schicht.woanders { background: var(--j-warn-bg); }
.plan-zeichen { flex: none; font-size: var(--gr-etikett); font-weight: 700; }
.kalender-tag .tag-status { display: block; width: fit-content; max-width: 100%; overflow: hidden; white-space: nowrap;
  text-overflow: ellipsis; font-size: var(--gr-etikett); padding: 0 .4rem; }  

#kollisionen { margin-top: var(--a5); }

.gruppe-titel { font-size: var(--gr-titel); margin: var(--a5) 0 var(--a3); display: flex; align-items: center; gap: var(--a2); }
.klaer-fall .chips { margin-bottom: var(--a2); }
.klaer-fall details { margin-top: var(--a3); }
.klaer-fall summary { list-style: none; display: inline-flex; cursor: pointer; }
.klaer-fall summary::-webkit-details-marker { display: none; }
.korr-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--a3); margin-top: var(--a3); }
.korr-form fieldset label { margin-right: var(--a3); }
.korr-form .formular-fuss { grid-column: 1 / -1; margin: 0; }
.korr-zeile { border-left: 3px solid var(--j-info-fg); padding-left: var(--a2); margin: var(--a1) 0; }
.tabelle .plus { color: var(--j-ok-fg); font-weight: 600; }
.tabelle .minus { color: var(--j-fehler-fg); font-weight: 600; }
.abo-zeile { display: flex; flex-wrap: wrap; gap: var(--a2); align-items: center; margin: var(--a2) 0; }
.abo-zeile input { flex: 1 1 18rem; min-width: 0; font: inherit; font-size: var(--gr-klein); padding: var(--a2);
  border: 1px solid var(--linie); border-radius: var(--rund-s); background: var(--j-stein-50); }

.zeitplan-form { display: grid; gap: var(--a3); max-width: 40rem; }
.zeitplan-form .haken { display: flex; gap: var(--a2); align-items: center; font-weight: 600; }
.zeitplan-form input[type=number] { width: 6rem; }
.zeitplan-form textarea { width: 100%; font: inherit; }

.stempelkarte { display: flex; flex-direction: column; gap: var(--a2); border-top: 4px solid var(--linie); }
.stempelkarte-laeuft { border-top-color: var(--j-ok-fg); }
.stempelkarte-stempelbar { border-top-color: var(--akzent); }
.stempelkarte-klaerung { border-top-color: var(--j-warn-fg); }
.stempelkarte p { margin: 0; }
.stempelkarte-naechste { font-size: var(--gr-titel); font-weight: 600; }
.stempelkarte form { display: grid; gap: var(--a2); margin-top: var(--a2); }
.timer { font-size: clamp(2.5rem, 9vw, 3.5rem); font-weight: 700; line-height: 1.1; color: var(--text);
         font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.spaeter { margin-top: var(--a3); }

.gruppe-titel { font-size: var(--gr-titel); margin: var(--a5) 0 var(--a2); }
.grenze-form { display: flex; flex-wrap: wrap; gap: var(--a3); align-items: end; margin: var(--a3) 0; }
.grenze-form input[type=number] { width: 6rem; }
.ausnahmen form.inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a2); }
.spaeter summary { cursor: pointer; color: var(--primaer); font-weight: 600; font-size: var(--gr-klein); padding: var(--a2) 0; }
.zentral-stand { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a1) var(--a2); }
.zentral-aktionen { white-space: nowrap; text-align: right; }
.zentral-aktionen .knopf + .knopf { margin-left: var(--a1); }
.knopf[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.plan-legende { display: flex; flex-wrap: wrap; gap: var(--a2); margin-bottom: var(--a3); }

.dialog { border: 1px solid var(--linie); border-radius: var(--rund-m); box-shadow: var(--schatten-dialog);
          padding: 0; width: min(34rem, calc(100vw - 2rem)); background: var(--karte); color: var(--text); }
.dialog::backdrop { background: var(--schleier); }
.dialog-kopf { display: flex; align-items: center; gap: var(--a3); padding: var(--a4) var(--a5); border-bottom: 1px solid var(--linie); }
.dialog-kopf h2 { font-size: var(--gr-titel); flex: 1; }
.dialog-inhalt { padding: var(--a4) var(--a5); display: grid; gap: var(--a4); }
.dialog .formular-fuss { margin: 0; padding: var(--a4) var(--a5); }
.planung select { min-width: 10rem; }
.planung td .marke { margin-top: var(--a1); }
.planung tr.wochenende td { background: var(--j-stein-50); }
.liste { margin: 0; padding-left: var(--a5); }
.liste li { margin: var(--a1) 0; }

.reiter { display: flex; gap: var(--a1); border-bottom: 1px solid var(--linie); margin-bottom: var(--a4); overflow-x: auto; }
.reiter a { padding: var(--a2) var(--a4); color: var(--text-leise); text-decoration: none; font-weight: 600;
            border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; min-height: 44px;
            display: inline-flex; align-items: center; }
.reiter a:hover { color: var(--primaer); }
.reiter a[aria-current="page"] { color: var(--primaer); border-bottom-color: var(--akzent); }
.reiter-zahl { display: inline-block; min-width: 1.4em; padding: 0 .4em; margin-left: var(--a1); border-radius: var(--rund-voll);
               background: var(--j-warn-bg); color: var(--j-warn-fg); font-size: var(--gr-klein); text-align: center; }


.marke-link { text-decoration: none; }
.marke-link:hover .marke { filter: brightness(.95); text-decoration: underline; }
.tabelle-personen td[data-label="Rolle"] { white-space: nowrap; }
.tabelle-personen tr[hidden] { display: none; }
.tabelle .text-link a { text-decoration: none; }
.tabelle .text-link a:hover { text-decoration: underline; }
@container seite (min-width: 48rem) { .tabelle-personen td[data-label="Maßnahme"] { white-space: nowrap; } }

.kalender.mit-kw { grid-template-columns: 3.5rem repeat(7, minmax(0, 1fr)); }
.kalender.mit-kw .kalender-kw { display: flex; flex-direction: column; align-items: center; justify-content: center;
                                gap: var(--a1); font-size: var(--gr-klein); color: var(--text-leise); font-weight: 600; }
.kalender.mit-kw .kalender-kw .marke { font-size: var(--gr-mini); padding: 0 .3rem; }

.vp-raster { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: var(--a4); align-items: start; }
.vp-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a2) var(--a3); }
.vp-leiste .aktionen { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--a2); }

.monatsstreifen { display: none; }
@container seite (max-width: 64rem) { .vp-raster { grid-template-columns: minmax(0, 1fr); } }
@container seite (max-width: 44rem) { .kalender { gap: var(--a1); } .kalender-tag { min-height: 3.5rem; padding: var(--a1); } .kalender-tag .marke { font-size: var(--gr-etikett); padding: 0 .3rem; } .kalender-tag small { display: none; } .raster-kacheln { grid-template-columns: 1fr; } .kalender-liste { grid-template-columns: 1fr; gap: var(--a2); } .kalender-liste .kalender-kopf, .kalender-liste .kalender-leer { display: none; } .kalender-liste .kalender-kw { display: block; margin-top: var(--a3); font-size: var(--gr-klein); font-weight: 600;
                                 color: var(--text-leise); text-transform: uppercase; letter-spacing: .06em; } .kalender-liste .kalender-kw:first-of-type { margin-top: 0; } .kalender-liste .kalender-tag { min-height: 0; padding: var(--a2) var(--a3); } .kalender-liste .tag-wt, .kalender-liste .tag-monat { display: inline; } .kalender-liste .kalender-tag .marke { font-size: var(--gr-klein); padding: .1rem .5rem; } .kalender-liste .kalender-tag small { display: inline; white-space: normal; } .kalender-liste .plan-schicht { min-height: 2.5rem; padding: var(--a1) var(--a2); } .kalender-liste .plan-schicht b { font-size: var(--gr-klein); min-width: 2.2em; } .kalender-liste.mit-kw { grid-template-columns: 1fr; } .kalender-liste.mit-kw .kalender-kw { flex-direction: row; justify-content: flex-start; } .kalender-liste.mit-kw .kalender-kw::after { content: ""; flex: 1; height: 1px; margin-left: var(--a2); background: var(--linie); } .monatsstreifen { display: flex; gap: 4px; overflow-x: auto; padding: var(--a1) 0 var(--a2); margin-bottom: var(--a2);
                    position: sticky; top: 0; background: var(--flaeche); z-index: 2; } .monatsstreifen a { flex: none; width: 2rem; height: 2rem; border-radius: 50%; display: inline-flex; align-items: center;
                      justify-content: center; font-size: var(--gr-klein); font-weight: 600; text-decoration: none;
                      color: var(--text); background: var(--j-neutral-bg); border: 2px solid transparent; } .monatsstreifen a.st-voll { background: var(--j-ok-bg); border-color: var(--j-ok-fg); color: var(--j-ok-fg); } .monatsstreifen a.st-teilweise { background: var(--j-warn-bg); border-color: var(--j-warn-fg); color: var(--j-warn-fg); } .monatsstreifen a.st-konflikt { background: var(--j-fehler-bg); border-color: var(--j-fehler-fg); color: var(--j-fehler-fg); } }


.hinweis { font-size: var(--gr-klein); color: var(--text-leise); }
.hinweis-oben { margin-top: 0; }   
[hidden] { display: none !important; }
.nur-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.zahl { font-variant-numeric: tabular-nums; }
.tabelle th.zahl, .tabelle td.zahl { text-align: right; }

@container seite (max-width: 44rem) { .inhalt { padding: var(--a4); } .kachel { padding: var(--a4); } .seitenkopf .aktionen { margin-left: 0; width: 100%; } .seitenkopf .aktionen .knopf { flex: 1; } .tabelle-rahmen { background: none; border: 0; box-shadow: none; } .tabelle thead { display: none; } .tabelle, .tabelle tbody, .tabelle tr, .tabelle td { display: block; width: 100%; } .tabelle tr { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund-m); margin-bottom: var(--a3); padding: var(--a2) 0; } .tabelle td { border: 0; padding: var(--a1) var(--a4); display: flex; justify-content: space-between; gap: var(--a3); } .tabelle td[data-label]::before { content: attr(data-label); font-size: var(--gr-klein); color: var(--text-leise); } .tabelle td.haupt { font-size: var(--gr-titel); } .tabelle td.haupt::before { display: none; } .tabelle td.haupt { display: block; } .zentral-stand { justify-content: flex-end; text-align: right; } .tabelle td.zentral-aktionen { justify-content: flex-start; flex-wrap: wrap; white-space: normal; padding-top: var(--a2); } .zentral-aktionen .knopf + .knopf { margin-left: 0; } .zentral-aktionen .knopf { min-height: 44px; } }

@media print {
  .kopf, .aktionen, .formular-fuss, .filter { display: none !important; }
  .kachel, .tabelle-rahmen { box-shadow: none; }
}


.plan-schicht.ruhe { background: var(--j-warn-bg); border-style: dashed; }
.aushang { background: var(--j-flaeche, var(--j-weiss)); padding: var(--a4); border-radius: 12px; }
.aushang-kopf h2 { margin: 0 0 var(--a1); }
.aushang-kopf p { margin: 0 0 var(--a1); font-size: var(--gr-klein); }
.aushang-tabelle { width: 100%; border-collapse: collapse; font-size: .85rem; }
.aushang-tabelle th, .aushang-tabelle td { border: 1px solid #bbb; padding: 2px 6px; text-align: left; }
.aushang-tabelle thead th { background: #eee; }
.aushang-tabelle tr.we { background: #f4f4f4; }
.aushang-tabelle tbody th { white-space: nowrap; width: 7rem; }
@media print {
  @page { size: A4 landscape; margin: 8mm; }
  .nicht-drucken, .kopf { display: none !important; }
  body, main { background: var(--j-weiss) !important; padding: 0 !important; margin: 0 !important; }
  .aushang { padding: 0; }
  .aushang-tabelle { font-size: 8.5pt; }
  .aushang-tabelle th, .aushang-tabelle td { padding: 1px 4px; }
  .aushang-tabelle tr { break-inside: avoid; }
}



.symbol { flex: none; width: 1rem; height: 1rem; color: var(--text-leise); }
.kontakte { display: flex; flex-direction: column; gap: var(--a1); align-items: flex-start; }
.kontakte-detail { gap: var(--a3); margin-bottom: var(--a4); }
.kontakt { display: inline-flex; align-items: center; gap: var(--a2); white-space: nowrap; }
a.kontakt:hover .symbol { color: var(--primaer); }
.tabelle-massnahmen td { vertical-align: top; }

.kontakt-mail span { white-space: nowrap; }
.adresse-menue { position: relative; display: inline-block; border-radius: var(--rund-s); outline: none;
  padding: 2px var(--a1); margin: -2px calc(-1 * var(--a1)); cursor: default; transition: background .12s, color .12s; }
.adresse-menue .kontakt { white-space: normal; }
.adresse-menue:hover, .adresse-menue:focus-within { background: var(--j-nacht-50); color: var(--primaer); }
.adresse-menue:hover .symbol, .adresse-menue:focus-within .symbol { color: var(--akzent); }
.adresse-menue:focus-visible { outline: 3px solid var(--fokus); }
.adresse-menue-liste { display: none; position: absolute; left: 0; top: 100%; z-index: 20; min-width: 14rem;
  padding: var(--a1); background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund-m);
  box-shadow: var(--schatten-hoch); }
.adresse-menue:hover .adresse-menue-liste, .adresse-menue:focus-within .adresse-menue-liste { display: flex; flex-direction: column; }
.adresse-menue-liste a, .adresse-menue-liste button { display: flex; align-items: center; gap: var(--a2); width: 100%;
  padding: var(--a2) var(--a3); border: 0; border-radius: var(--rund-s); background: none; color: var(--text);
  font: inherit; font-size: var(--gr-text); text-align: left; text-decoration: none; cursor: pointer; white-space: nowrap; }
.adresse-menue-liste a:hover, .adresse-menue-liste button:hover, .adresse-menue-liste :focus-visible { background: var(--j-nacht-50); color: var(--primaer); }
.tabelle-rahmen:has(.adresse-menue) { overflow: visible; }

.adresse-felder { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 2fr); gap: var(--a4); }
.adresse-strasse { position: relative; }
.vorschlaege { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; margin: 2px 0 0; padding: var(--a1);
  list-style: none; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund-m);
  box-shadow: var(--schatten-hoch); min-width: min(28rem, 90vw); }
.vorschlaege li { padding: var(--a2) var(--a3); border-radius: var(--rund-s); cursor: pointer; font-weight: 400; color: var(--text); }
.vorschlaege li:hover, .vorschlaege li[aria-selected="true"] { background: var(--j-nacht-50); color: var(--primaer); }
.feld-knopf { justify-content: flex-end; }

.name-status { display: flex; flex-wrap: wrap; gap: var(--a4); align-items: flex-end; }
.name-status > .feld { flex: 1 1 16rem; }
.status-box { display: inline-flex; align-items: center; gap: var(--a3); min-height: 2.5rem; padding: var(--a1) var(--a4);
  border: 1px solid var(--j-stein-300); border-radius: var(--rund-s); cursor: pointer; background: var(--j-fehler-bg); color: var(--j-fehler-fg); }
.status-box:has(input:checked) { background: var(--j-ok-bg); color: var(--j-ok-fg); border-color: transparent; }
.status-box input { accent-color: var(--j-ok-fg); width: 1.1rem; height: 1.1rem; margin: 0; }
.status-box-text { display: flex; flex-direction: column; line-height: 1.2; }
.status-box-text small { font-size: var(--gr-etikett); opacity: .85; }

.auswahl-spalte { flex-direction: column; align-items: flex-start; }
.schichtbloecke { display: flex; flex-direction: column; gap: var(--a3); }
.schichtblock { display: grid; grid-template-columns: 8rem 8rem auto 8rem minmax(0, 1fr); align-items: end; gap: var(--a3);
  padding: var(--a3); border: 1px solid var(--linie); border-radius: var(--rund-m); background: var(--j-stein-50); }
.schichtblock-name { font-weight: 600; align-self: center; }
.schichtblock-bis { padding-bottom: .6rem; color: var(--text-leise); }
.stunden-marke { display: inline-flex; flex-direction: column; justify-self: start; padding: .2rem .7rem; border-radius: var(--rund-m);
  background: var(--j-nacht-50); color: var(--primaer); line-height: 1.2; font-variant-numeric: tabular-nums; }
.stunden-marke strong { font-size: var(--gr-text); }
.stunden-marke small { font-size: var(--gr-etikett); color: var(--text-leise); }
.stunden-marke-klein { display: inline-flex; padding: 0 .5rem; margin-left: var(--a1); }
.formular-fuss-handy { display: none; }

@container seite (max-width: 44rem) { .adresse-felder { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); } .schichtblock { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } .schichtblock-name, .schichtblock .stunden-marke { grid-column: 1 / -1; } .kontakt, .kontakt-mail span { white-space: normal; overflow-wrap: anywhere; } .formular-fuss-handy { display: flex; } }


.einzeilig { white-space: nowrap; }
.tabelle-massnahmen .chip { white-space: nowrap; }
.schicht-system { margin: 0 0 var(--a3); font-weight: 600; white-space: nowrap; }
.schicht-anzeige { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--a2); }
.schicht-anzeige li { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr) auto minmax(5.5rem, 1fr);  align-items: center;
  gap: var(--a3); min-height: 3rem; padding: var(--a2) var(--a3); border: 1px solid var(--linie);
  border-radius: var(--rund-m); background: var(--j-stein-50); }

.schicht-code { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--primaer); color: var(--auf-primaer); font-weight: 700; font-size: var(--gr-etikett); letter-spacing: .02em; }
.schicht-name { font-weight: 600; }
.schicht-zeit { white-space: nowrap; justify-self: center; }
.schicht-anzeige .stunden-marke-klein { justify-self: end; margin: 0; white-space: nowrap; }

.in-arbeit { display: flex; gap: var(--a2); align-items: flex-start; margin: 0 0 var(--a4); padding: var(--a2) var(--a3);
  border: 1px dashed var(--j-bernstein-500); border-radius: var(--rund-s); background: var(--j-bernstein-100);
  color: var(--j-warn-fg); font-size: var(--gr-klein); }
.in-arbeit .symbol { flex: none; margin-top: 2px; }

.klienten { display: flex; flex-wrap: wrap; gap: var(--a3); }
.klient-badge { display: inline-flex; flex-direction: column; gap: 2px; padding: var(--a2) var(--a3);
  border: 1px solid var(--linie); border-left: 4px solid var(--akzent); border-radius: var(--rund-s); background: var(--karte); }
.klient-badge small { font-size: var(--gr-klein); color: var(--text-leise); font-variant-numeric: tabular-nums; }
.chip-klient { background: var(--j-bernstein-100); color: var(--j-warn-fg); cursor: default; white-space: nowrap; }
.chip-klient:hover { background: var(--j-bernstein-100); }
.knopf .symbol { flex: none; }

.kachel-kompakt { padding-top: var(--a3); padding-bottom: var(--a3); }
.kachel-kompakt .kachel-kopf { margin-bottom: var(--a2); }
.protokoll { margin-top: var(--a2); font-size: var(--gr-klein); }
.protokoll summary { cursor: pointer; color: var(--primaer); }
input[aria-invalid="true"] { border-color: var(--j-fehler-fg); }

@container seite (max-width: 44rem) { .schicht-anzeige li { grid-template-columns: 1.75rem minmax(0, 1fr) auto; } .schicht-anzeige .schicht-zeit { grid-column: 2; justify-self: start; } .schicht-anzeige .stunden-marke-klein { grid-column: 3; grid-row: 1 / span 2; align-self: center; } .einzeilig { white-space: normal; } }



.werte-paare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wert-mit-marke { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a2); }
.felder-paare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a4); align-items: start; }
.felder-paare > .paar-adresse { min-width: 0; }
.felder-paare .adresse-felder { grid-column: auto; }
.felder-paare > .feld { min-width: 0; }
.felder-paare > div.feld { display: grid; gap: var(--a2); }
@container seite (max-width: 44rem) { .werte-paare, .felder-paare { grid-template-columns: minmax(0, 1fr); } }




.monatsnavi { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a2) var(--a4); margin-bottom: var(--a4); min-width: 0; }


.verf-stand { display: flex; flex-wrap: wrap; gap: var(--a2); align-items: center; margin-bottom: var(--a3); }


.vp2 { display: grid; grid-template-columns: 16.5rem minmax(0, 1fr); gap: var(--a4); align-items: start; }
.vp2.nur-lesen { grid-template-columns: minmax(0, 1fr); }
.vp-personen { position: sticky; top: var(--a4); max-height: calc(100vh - 2rem); overflow-y: auto; padding: var(--a3); }
.vp-personen h3:not(.abschnitt-linie) { font-size: var(--gr-klein); text-transform: uppercase; letter-spacing: .06em; color: var(--text-leise);
  margin: var(--a3) 0 var(--a2); }
.vp-personen h3:first-of-type { margin-top: 0; }
.vp-suche { width: 100%; margin-bottom: var(--a2); }
.vp-person { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--a2); align-items: center;
  padding: var(--a2) var(--a3); margin-bottom: var(--a2); border: 1px solid var(--linie); border-left: 4px solid var(--j-nacht-600);
  border-radius: var(--rund-s); background: var(--karte); cursor: grab; user-select: none; }
.vp-person:hover { border-color: var(--primaer); background: var(--j-nacht-50); }
.vp-person.springer { border-left-color: var(--akzent); }
.vp-person.gewaehlt { box-shadow: 0 0 0 3px var(--akzent); background: var(--j-bernstein-100); }
.vp-person.zieht { opacity: .45; }
.vp-person[hidden] { display: none; }
.vp-person strong { font-size: var(--gr-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-person .vp-rest { font-size: var(--gr-klein); font-weight: 700; font-variant-numeric: tabular-nums; }
.vp-person .vp-rest.minus { color: var(--j-fehler-fg); }
.vp-person .vp-balken { grid-column: 1 / -1; height: 4px; border-radius: var(--rund-voll); background: var(--j-stein-100); overflow: hidden; }
.vp-person .vp-balken span { display: block; height: 100%; background: var(--j-ok-fg); }
.vp-person.ueberzogen .vp-balken span { background: var(--j-fehler-fg); }
.vp-person .vp-info { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--a1); font-size: var(--gr-etikett); color: var(--text-leise); }
.vp-person .marke { font-size: var(--gr-etikett); padding: 0 .4rem; }


.vp-slot { position: relative; display: flex; flex-direction: column; gap: 1px; width: 100%; min-width: 0; min-height: 3rem;
  padding: var(--a1) var(--a2); border: 1px solid var(--linie); border-radius: var(--rund-s); background: var(--j-stein-50); }
.vp-slot-kopf { display: flex; justify-content: space-between; align-items: center; gap: var(--a1); font-size: var(--gr-etikett);
  color: var(--text-leise); font-variant-numeric: tabular-nums; }
.vp-slot-kopf b { font-weight: 700; }
.vp-slot .wer { font-weight: 700; font-size: var(--gr-klein); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-slot .wer.offen { font-weight: 400; color: var(--j-stein-500); font-style: italic; }
.vp-slot.belegt { background: var(--j-nacht-50); border-color: var(--j-nacht-100); }
.vp-slot.belegt.springer { background: var(--j-bernstein-100); border-color: var(--j-bernstein-500); }
.vp-slot.konflikt { background: var(--j-fehler-bg); border-color: var(--j-fehler-fg); }
.vp-slot.konflikt .wer { color: var(--j-fehler-fg); }
.vp-slot.woanders { box-shadow: inset 3px 0 0 var(--j-warn-fg); }
.vp-slot .vp-marke { font-size: var(--gr-mini); font-weight: 700; padding: 0 .35rem; border-radius: var(--rund-voll); }
.vp-slot .vp-marke.fehler { background: var(--j-fehler-bg); color: var(--j-fehler-fg); }
.vp-slot .vp-marke.warn { background: var(--j-warn-bg); color: var(--j-warn-fg); }
.bearbeitbar .vp-slot { cursor: pointer; }
.bearbeitbar .vp-slot.belegt { cursor: grab; }
.bearbeitbar .vp-slot:hover { border-color: var(--primaer); }
.vp-slot.ziel { outline: 2px dashed var(--primaer); outline-offset: -2px; background: var(--j-nacht-100); }
.vp-slot.ziel-gesperrt { outline: 2px dashed var(--j-fehler-fg); outline-offset: -2px; background: var(--j-fehler-bg); }
.vp-slot.speichert { opacity: .55; }
.vp-slot.zieht { opacity: .4; }
.vp-slot .vp-weg { position: absolute; top: 2px; right: 2px; display: none; width: 1.25rem; height: 1.25rem; padding: 0;
  border: 0; border-radius: 50%; background: var(--karte); color: var(--j-fehler-fg); font-weight: 700; line-height: 1; cursor: pointer; z-index: 2; }
.bearbeitbar .vp-slot.belegt:hover .vp-weg, .bearbeitbar .vp-slot.belegt:focus-within .vp-weg { display: block; }

.vp-slot .vp-sel { position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; opacity: 0; pointer-events: none; }
.vp-slot .vp-sel:focus { position: static; height: auto; opacity: 1; pointer-events: auto; font-size: var(--gr-klein); }
.vp-slot:focus-within { outline: 3px solid var(--fokus); outline-offset: 1px; }
.vp-titel { font-size: var(--gr-kachel, var(--gr-titel)); margin: 0; }
.vp2 .kalender-tag { min-height: 0; gap: var(--a1); }
.vp2 .kalender-tag .tag-status { display: none; }
.vp-massnahme { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--a2) var(--a3); margin-bottom: var(--a3); }
.vp-massnahme .feld { min-width: 14rem; }
.vp-massnahme .aktionen { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--a2); align-items: center; }
@container seite (max-width: 64rem) { .vp2 { grid-template-columns: minmax(0, 1fr); } .vp-personen { position: static; max-height: none; display: flex; flex-wrap: wrap; gap: var(--a2); } .vp-personen h3, .vp-personen .vp-suche { flex-basis: 100%; } .vp-person { flex: 1 1 12rem; margin: 0; } }
@container seite (max-width: 44rem) { .kalender-liste .vp-slot { min-height: 2.75rem; } .kalender-liste .vp-slot .vp-weg { display: block; } .vp-slot .vp-sel { inset: 0; height: 100%; pointer-events: auto; } .vp-slot .vp-sel:focus { position: absolute; opacity: 0; } .vp-massnahme .aktionen { margin-left: 0; } .vp-personen { flex-wrap: nowrap; overflow-x: auto; padding: var(--a2); gap: var(--a2); } .vp-personen h3, .vp-personen .vp-suche { display: none; } .vp-person { flex: 0 0 9.5rem; padding: var(--a1) var(--a2); } .vp-person .vp-info span:not(.marke) { display: none; } }
@media print { .vp-personen, .monatsnavi, .reiter { display: none !important; } .vp2 { display: block; } }




.tabelle-personen th, .tabelle-personen th.zahl { text-align: center; }


.ruecksprung { width: 100%; display: flex; flex-wrap: wrap; gap: var(--a2); align-items: center; }
.ruecksprung .knopf-still { color: var(--text-leise); }
.ruecksprung .knopf-still:hover { color: var(--primaer); }


.toast-ort { position: fixed; top: calc(var(--a5) + 3.5rem); right: var(--a4); z-index: 60; max-width: min(24rem, calc(100vw - 2 * var(--a4))); }
.meldung.toast { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--a2); padding: var(--a2) var(--a3); font-size: var(--gr-klein);
  border-radius: var(--rund-m, .75rem); box-shadow: 0 6px 20px rgba(17, 26, 51, .14); cursor: pointer;
  animation: toast-rein .25s ease-out; transition: opacity .4s, transform .4s; }
.meldung.toast::before { grid-column: 1; grid-row: 1 / 3; align-self: center; }
.toast-weg { opacity: 0; transform: translateY(-.5rem); }
@keyframes toast-rein { from { opacity: 0; transform: translateY(-.5rem); } }
@keyframes toast-dreh { from { transform: rotate(-270deg); } }
@media (prefers-reduced-motion: reduce) { .meldung.toast { animation: none; } }




.seiten-raster { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: var(--a5); align-items: start; }
.seiten-raster.nur-lesen { grid-template-columns: minmax(0, 1fr); }
.seiten-haupt { min-width: 0; display: flex; flex-direction: column; gap: var(--a3); }
.seiten-haupt > * { margin-top: 0; margin-bottom: 0; }
.seiten-seite { min-width: 0; }
@container seite (max-width: 64rem) { .seiten-raster { grid-template-columns: minmax(0, 1fr); } }


.monatsnavi-zeile { display: flex; flex-direction: column; gap: var(--a2); }
.monatsnavi-voll { margin-bottom: 0; }
.monatsnavi-aktionen { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--a2); }
.abgabe-status { min-width: 5.5rem; justify-content: center; }
@container seite (max-width: 44rem) { .monatsnavi-aktionen { justify-content: stretch; } .monatsnavi-aktionen .knopf { flex: 1; } }


.sms-box { border: 1px solid var(--j-stein-300); border-radius: 1rem 1rem 1rem .25rem; background: var(--karte); padding: var(--a2) var(--a3); }
.sms-box:focus-within { border-color: var(--primaer); box-shadow: 0 0 0 3px var(--j-nacht-50); }
.sms-box textarea { width: 100%; border: 0; resize: none; padding: var(--a1) 0; min-height: 3.2em; font: inherit; background: transparent; }
.sms-box textarea:focus { outline: none; }
.sms-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a2); border-top: 1px solid var(--linie); padding-top: var(--a2); }
.sms-zaehler { font-size: var(--gr-zusatz); color: var(--text-leise); margin-left: var(--a2); }
.sms-box .hinweis { margin: var(--a1) 0 0; font-size: var(--gr-klein); }
.hinweis-fehler { color: var(--j-fehler-fg); font-weight: 600; }
.verf-wahl { display: flex; flex-wrap: wrap; gap: var(--a1); }
.wahl-trenner { flex: 1; min-width: var(--a4); }
.wahl-knopf { display: inline-flex; align-items: center; gap: var(--a2); min-height: 2.25rem; padding: 0 var(--a3); border-radius: var(--rund-voll);
  border: 1px solid var(--j-stein-300); font: inherit; font-size: var(--gr-klein); font-weight: 600; cursor: pointer; background: var(--karte); }
.wahl-knopf::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; opacity: .75; }
.wahl-knopf .symbol { width: 14px; height: 14px; }
.wahl-notiz::before { display: none; }
.wahl-verfuegbar { color: var(--j-ok-fg); }
.wahl-unverfuegbar { color: var(--j-fehler-fg); }
.wahl-urlaub { color: var(--j-info-fg); }
.wahl-notiz { color: var(--j-warn-fg); }
.wahl-loeschen { color: var(--text-leise); border-style: dashed; }
.wahl-loeschen::before { content: "×"; width: auto; height: auto; background: none; opacity: 1; font-weight: 700; }
.wahl-knopf:hover { border-color: currentColor; }
.wahl-knopf[aria-pressed="true"], .verf-seite .wahl-knopf[aria-checked="true"], .verf-seite .wahl-knopf[aria-pressed="true"] { border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor; }
.wahl-verfuegbar[aria-pressed="true"] { background: var(--j-ok-bg); }
.wahl-unverfuegbar[aria-pressed="true"] { background: var(--j-fehler-bg); }
.wahl-urlaub[aria-pressed="true"] { background: var(--j-info-bg); }
.wahl-notiz[aria-pressed="true"] { background: var(--j-warn-bg); }
.wahl-loeschen[aria-pressed="true"] { background: var(--j-neutral-bg); border-style: solid; }
.verf-kachel.speichert { cursor: progress; }
.verf-kachel.speichert .kalender { opacity: .6; transition: opacity .15s; }




.verf-stand { display: grid; grid-template-columns: 1fr 1fr; gap: var(--a2); }


.vt { display: flex; align-items: center; justify-content: center; gap: .3em; width: 100%; min-width: 0; padding: .1rem .25rem;
  border-radius: var(--rund-voll); border: 1px solid currentColor; font-size: var(--gr-etikett); font-weight: 700; line-height: 1.3; background: var(--karte); }
.vt::before { content: ""; flex: none; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.vt > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt .symbol { width: 12px; height: 12px; }
.vt-verfuegbar { color: var(--j-ok-fg); background: var(--j-ok-bg); }
.vt-unverfuegbar { color: var(--j-fehler-fg); background: var(--j-fehler-bg); }
.vt-urlaub { color: var(--j-info-fg); background: var(--j-info-bg); }
.vt-notiz { color: var(--j-warn-fg); background: var(--j-warn-bg); }

.kalender-tag .vt-notiz { position: absolute; top: 3px; right: 3px; width: 1.25rem; height: 1.25rem; padding: 0; border: 0; border-radius: 4px;
  display: flex; align-items: center; justify-content: center; background: var(--j-bernstein-100, #fff3d6); color: var(--j-bernstein-500, #e0a100); }
.kalender-tag .vt-notiz::before { display: none; }
.kalender-tag:has(.vt-unverfuegbar) { background: #fdf6f5; }
.kalender-tag:has(.vt-urlaub) { background: #f4f9fd; }
.kalender-tag:has(.vt-verfuegbar) { background: #f5fbf7; }
@container seite (max-width: 44rem) { .kalender-tag .vt { padding: .15rem 0; } .kalender-tag .vt > span { display: none; } .kalender-tag .vt-notiz { width: 1rem; height: 1rem; top: 2px; right: 2px; } .kalender-tag .vt-notiz .symbol { width: 10px; height: 10px; } }


.verf-notizen { border-left: 1px solid var(--linie); padding-left: var(--a4); }
.verf-notizen h3 { font-size: var(--gr-text); margin: 0 0 var(--a2); }
.verf-notizen .notiz-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--a2); }
@container seite (max-width: 64rem) { .verf-notizen { border-left: 0; padding-left: 0; border-top: 1px solid var(--linie); padding-top: var(--a3); } }


.vp2.seiten-raster { grid-template-columns: minmax(0, 1fr) 16.5rem; }
.vp2.seiten-raster.nur-lesen { grid-template-columns: minmax(0, 1fr); }
.vp-massnahme { margin-bottom: 0; align-items: center; }
.vp-massnahme .vp-leiste { margin-left: auto; margin-bottom: 0; }
@container seite (max-width: 64rem) { .vp2.seiten-raster { grid-template-columns: minmax(0, 1fr); } .vp2 .vp-personen { order: -1; } .vp-massnahme .vp-leiste { margin-left: 0; } }




.kopf-nutzer { gap: var(--a2); margin-left: auto; }
.kopf-konto { display: inline-flex; align-items: center; gap: var(--a2); padding: 3px var(--a3) 3px 3px; border-radius: var(--rund-voll);
  color: var(--j-weiss); text-decoration: none; font-weight: 600; font-size: var(--gr-klein); border: 1px solid transparent; }
.kopf-nutzer a.kopf-konto { color: var(--j-weiss); }
.kopf-konto:hover, .kopf-konto[aria-current="page"] { background: var(--j-nacht-700); border-color: var(--j-nacht-600); color: var(--j-weiss); }
.kopf-konto-name { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kopf-abmelden { display: inline-flex; align-items: center; gap: var(--a1); min-height: 2rem; padding: 0 var(--a3); border-radius: var(--rund-s);
  border: 1px solid var(--j-nacht-600); color: var(--j-nacht-100); text-decoration: none; font-size: var(--gr-klein); font-weight: 600; }
.kopf-nutzer a.kopf-abmelden { color: var(--j-nacht-100); }
.kopf-nutzer a.kopf-abmelden:hover { background: var(--j-nacht-700); border-color: var(--akzent); color: var(--j-weiss); }
.avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%;
  overflow: hidden; background: var(--akzent); color: var(--j-nacht-900); font-weight: 700; font-size: var(--gr-zusatz); letter-spacing: .02em; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-gross { width: 7rem; height: 7rem; font-size: 2.25rem; box-shadow: 0 0 0 4px var(--karte), 0 0 0 5px var(--linie); }
@container seite (max-width: 44rem) { .kopf-innen { padding: var(--a2) var(--a4); gap: var(--a2); } .kopf-marke small { display: none; } .kopf-nutzer { order: 2; } .kopf-konto-name, .kopf-abmelden span { display: none; } .kopf-konto { padding: 2px; } .kopf-abmelden { width: 2.25rem; justify-content: center; padding: 0; } }


.konto-raster { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: var(--a4); align-items: start; }
.konto-karte { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--a2); }
.konto-karte h2 { font-size: var(--gr-titel); margin-top: var(--a2); }
.konto-karte .hinweis { margin: 0; overflow-wrap: anywhere; }
.konto-bild-form { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--a2); margin-top: var(--a2); }
.datei-knopf { position: relative; overflow: hidden; }
.datei-knopf input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.konto-einsatz { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--a2); }
.konto-einsatz li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a2); }
@container seite (max-width: 64rem) { .konto-raster { grid-template-columns: minmax(0, 1fr); } }


.vp-kachel .vp-personen { padding: 0 0 0 var(--a4); border-left: 1px solid var(--linie); top: var(--a2); }
.vp-slot { background: var(--karte); }
.vp-slot:not(.belegt) { border-style: dashed; border-color: var(--j-stein-300); }
.vp-kachel .monatsstreifen { background: var(--karte); }
@container seite (max-width: 64rem) { .vp-kachel .vp-personen { padding: 0 0 var(--a3); border-left: 0; border-bottom: 1px solid var(--linie); } }


.seiten-block { border-top: 1px solid var(--linie); padding-top: var(--a3); margin-top: var(--a2); }
.seiten-block summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: var(--a2); list-style: none; }
.seiten-block summary::-webkit-details-marker, .regel > summary::-webkit-details-marker { display: none; }
.seiten-block summary::after, .regel > summary::after { content: "▾"; margin-left: auto; color: var(--text-leise); transition: transform .15s; }
.seiten-block:not([open]) summary::after, .regel:not([open]) > summary::after { transform: rotate(-90deg); }
.seiten-block[open] > :not(summary) { margin-top: var(--a3); }
.seiten-block .zeitplan-form { gap: var(--a2); }
.ausnahmen form.inline { display: grid; grid-template-columns: minmax(0, 1fr) auto; font-size: var(--gr-klein); }


.zentral-hilfe { margin: calc(-1 * var(--a2)) 0 var(--a3); }
.stunden-kachel .filter { margin: 0; }
.stunden-stand { margin: 0; }

@container seite (max-width: 82rem) { .kopf-konto-name { max-width: 9rem; } }
@container seite (max-width: 72rem) { .kopf-konto-name { display: none; } .kopf-konto { padding: 2px; } }
.konto-haupt .kachel-kopf > .knopf { margin-left: auto; }


.tabelle-stunden td a:not(.knopf) { color: inherit; text-decoration: none; }
.tabelle-stunden td a:not(.knopf):hover { color: var(--primaer); text-decoration: underline; }
.tabelle-stunden td.haupt { white-space: nowrap; }
.stunden-detail { margin-left: var(--a2); padding: 0 var(--a2); min-height: 1.6rem; font-size: var(--gr-zusatz); }
.design-einleitung { margin: 0 0 var(--a4); }



.reiter { border-bottom: 0; box-shadow: inset 0 -1px 0 var(--linie); overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none; }
.reiter::-webkit-scrollbar { display: none; }
.reiter a { margin-bottom: 0; }


a.klient-badge { color: inherit; text-decoration: none; }
a.klient-badge:hover { border-color: var(--primaer); background: var(--j-nacht-50); }
a.chip-klient { cursor: pointer; text-decoration: none; }
a.chip-klient:hover { background: var(--j-bernstein-200, #fde7b0); }
.notiz-text { white-space: pre-line; margin: 0; }
@container seite (max-width: 44rem) { .filter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .filter .feld { min-width: 0; } .filter .feld select { width: 100%; min-width: 0; text-overflow: ellipsis; } .filter .feld-suche { grid-column: 1 / -1; } }



.kopf-nutzer { gap: var(--a3); align-items: flex-start; }
.kopf-rund { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; min-width: 3.5rem;
  color: var(--j-nacht-100); text-decoration: none; font-size: var(--gr-etikett); font-weight: 600; line-height: 1.1; padding: 0; border: 0; background: none; }
.kopf-nutzer a.kopf-rund { color: var(--j-nacht-100); }
.kopf-kreis { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  border: 1px solid var(--j-nacht-600); background: var(--j-nacht-700); color: var(--j-weiss); overflow: hidden;
  transition: border-color .15s, box-shadow .15s; }
.kopf-kreis.avatar { background: var(--akzent); color: var(--j-nacht-900); border-color: var(--akzent); font-size: var(--gr-zusatz); }
.kopf-rund-text { max-width: 5.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kopf-nutzer a.kopf-rund:hover { color: var(--j-weiss); }
.kopf-rund:hover .kopf-kreis, .kopf-rund:focus-visible .kopf-kreis { border-color: var(--akzent); box-shadow: 0 0 0 2px var(--akzent); }
.kopf-rund:focus-visible { outline: none; }
.kopf-rund[aria-current="page"] { color: var(--j-weiss); }
.kopf-rund[aria-current="page"] .kopf-kreis { box-shadow: 0 0 0 2px var(--akzent); }
.kopf-abmelden:hover .kopf-kreis { background: var(--j-fehler-fg); border-color: var(--j-fehler-bg); box-shadow: 0 0 0 2px var(--j-fehler-bg); }

.kopf-konto { padding: 0; border: 0; border-radius: 0; }
.kopf-konto:hover, .kopf-konto[aria-current="page"] { background: none; }
@container seite (max-width: 72rem) { .kopf-konto { padding: 0; } }
@container seite (max-width: 44rem) { .kopf-nutzer { gap: var(--a2); } .kopf-rund { min-width: 3rem; font-size: var(--gr-mini); } .kopf-kreis { width: 2rem; height: 2rem; } .kopf-abmelden { width: auto; padding: 0; } .kopf-abmelden span.kopf-rund-text, .kopf-konto .kopf-rund-text { display: block; } .kopf-abmelden span.kopf-kreis { display: inline-flex; } }


.tabelle th, .tabelle th.zahl { text-align: center; }
.tabelle th:first-child { text-align: left; }
@container seite (min-width: 44.01rem) { .tabelle td:has(> .marke:only-child), .tabelle td:has(> a.marke-link:only-child), .tabelle td:has(> .marke + .marke),
  .tabelle td.marken { text-align: center; } }
.marke-alter { font-variant-numeric: tabular-nums; }


.ms-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--a3); }
.ms-liste li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--a2) var(--a3); align-items: center;
  padding: var(--a3) var(--a4); border: 1px solid var(--linie); border-left: 4px solid var(--primaer); border-radius: var(--rund-m); }
.ms-liste-name { font-weight: 700; font-size: var(--gr-titel); color: var(--text); text-decoration: none; }
.ms-liste-name:hover { color: var(--primaer); text-decoration: underline; }
.ms-liste-werte { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--a2); }
.werte div.breit { grid-column: 1 / -1; }
@container seite (max-width: 44rem) { .ms-liste-werte { grid-template-columns: minmax(0, 1fr); } }

@container seite (min-width: 44.01rem) { .tabelle-personen td.zahl, .tabelle-klienten td.zahl, .tabelle-personen td[data-label="Rolle"], .tabelle-klienten td[data-label="Alter"] { text-align: center; } }



.schichtblock { grid-template-columns: 7.5rem minmax(9rem, 13rem) 6.5rem auto 6.5rem minmax(0, auto) auto; }
.feld-uhr input { font-variant-numeric: tabular-nums; text-align: center; }
.feld-uhr input.feld-fehler, input.feld-fehler { border-color: var(--j-fehler-fg); background: var(--j-fehler-bg); }
.schichtblock [data-als-vorlage] { align-self: center; white-space: nowrap; }
.vorlage-ok { grid-column: 1 / -1; font-size: var(--gr-klein); color: var(--j-ok-fg); }
.vorlage-neu, .vorlage-form { grid-template-columns: minmax(9rem, 16rem) 6.5rem auto 6.5rem minmax(0, 1fr); border: 0; padding: 0; background: none; }
.vorlage-form { grid-template-columns: minmax(9rem, 14rem) 6.5rem auto 6.5rem auto minmax(0, 1fr); }
.vorlage-knoepfe { display: flex; gap: var(--a2); align-self: center; justify-self: end; }
.tabelle-vorlagen td.aktionen { display: flex; gap: var(--a1); justify-content: flex-end; white-space: nowrap; }
.tabelle-vorlagen td.aktionen form { display: inline; }
.tabelle-vorlagen .marke + .marke { margin-left: .15rem; }
.tabelle-vorlagen td[data-label="Verwendet in"] { text-align: center; }
@container seite (max-width: 64rem) { .schichtblock { grid-template-columns: 7.5rem minmax(0, 1fr) auto minmax(0, 1fr); } .schichtblock .feld-vorlage { grid-column: 2 / -1; } .schichtblock .stunden-marke, .schichtblock [data-als-vorlage] { grid-column: 2 / -1; justify-self: start; } .schichtblock .feld-uhr:first-of-type { grid-column: 2; } }
@container seite (max-width: 44rem) { .schichtblock, .vorlage-neu, .vorlage-form { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } .schichtblock .feld-vorlage, .vorlage-neu > .feld:first-child, .vorlage-form > .feld:first-of-type,
  .schichtblock .stunden-marke, .schichtblock [data-als-vorlage], .vorlage-knoepfe { grid-column: 1 / -1; } .schichtblock .feld-uhr:first-of-type { grid-column: auto; } .tabelle-vorlagen td.aktionen { justify-content: flex-start; } }

.schichtblock { grid-template-columns: 7.5rem minmax(10rem, 15rem) 6.5rem 1rem 6.5rem max-content max-content; justify-content: start; }
.vorlage-neu { grid-template-columns: minmax(10rem, 16rem) 6.5rem 1rem 6.5rem max-content; justify-content: start; }
.vorlage-form { grid-template-columns: minmax(10rem, 14rem) 6.5rem 1rem 6.5rem max-content 1fr; }
.schichtblock-bis { text-align: center; }
.tabelle-vorlagen td[data-label="Zeit"], .tabelle-vorlagen td[data-label="Dauer"] { text-align: center; }
.tabelle-vorlagen td.aktionen { display: table-cell; text-align: right; }
.tabelle-vorlagen .marke { text-decoration: none; }
.tabelle-vorlagen a.marke:hover { text-decoration: underline; }
.adresse-felder > *, .adresse-felder input { min-width: 0; width: 100%; }
@container seite (max-width: 64rem) { .schichtblock { grid-template-columns: 7.5rem 6.5rem 1rem 6.5rem max-content; } .schichtblock .feld-vorlage { grid-column: 2 / -1; max-width: 18rem; } .schichtblock .feld-uhr:first-of-type { grid-column: 2; } .schichtblock .stunden-marke, .schichtblock [data-als-vorlage] { grid-column: auto; } }
@container seite (max-width: 44rem) { .schichtblock, .vorlage-neu, .vorlage-form { grid-template-columns: minmax(0, 1fr) 1rem minmax(0, 1fr); } .schichtblock .feld-vorlage { grid-column: 1 / -1; max-width: none; } .schichtblock .feld-uhr:first-of-type { grid-column: 1; } .schichtblock .stunden-marke, .schichtblock [data-als-vorlage] { grid-column: 1 / -1; } }
@container seite (max-width: 44rem) { .adresse-felder { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--a3); } .adresse-felder > :nth-child(1), .adresse-felder > :nth-child(4) { grid-column: span 3; } .adresse-felder > :nth-child(2), .adresse-felder > :nth-child(3) { grid-column: span 1; } .adresse-felder > :nth-child(3) { order: 3; } .adresse-felder > :nth-child(4) { order: 4; } }

.tabelle-vorlagen tr.gruppe-kopf th { text-align: left; background: var(--j-stein-50, #f6f6f4); font-weight: 700; padding-top: var(--a3); padding-bottom: var(--a2); }
.tabelle-vorlagen tr.gruppe-kopf .hinweis { font-weight: 400; margin-left: var(--a1); }
.tabelle-vorlagen td[data-label="Zeit"] { text-align: left; }
.tabelle-vorlagen th:first-child { text-align: left; }
@container seite (max-width: 44rem) { .tabelle-vorlagen tr.gruppe-kopf { display: block; } .tabelle-vorlagen tr.gruppe-kopf th { display: block; } }

.werte-paare > .azk-zeile { grid-column: 1 / -1; margin-top: var(--a3); padding-top: var(--a3); border-top: 1px dashed var(--linie); }

.klient-zuordnung { position: relative; display: inline-flex; }
.klient-zuordnung form { position: absolute; top: -.5rem; right: -.5rem; }
.klient-loesen { width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 1px solid var(--linie); background: var(--karte);
  color: var(--text-leise); line-height: 1; cursor: pointer; font-size: .95rem; padding: 0; }
.klient-loesen:hover, .klient-loesen:focus-visible { color: var(--j-fehler-fg); border-color: var(--j-fehler-fg); }
.zuweisen-zeile { display: flex; align-items: end; gap: var(--a3); margin-top: var(--a4); padding-top: var(--a4); border-top: 1px solid var(--linie); flex-wrap: wrap; }
.zuweisen-zeile .feld { flex: 1 1 18rem; max-width: 28rem; margin: 0; }



.filter .feld-suche { flex: 0 1 20rem; min-width: 12rem; }
.blaettern { display: flex; flex-wrap: wrap; gap: var(--a1); justify-content: center; margin-top: var(--a3); }
.blaettern-knopf { min-width: 2.25rem; height: 2.25rem; padding: 0 var(--a2); border-radius: 999px; border: 1px solid var(--linie);
  background: var(--karte); color: var(--text); font: inherit; font-variant-numeric: tabular-nums; cursor: pointer; }
.blaettern-knopf:hover:not(:disabled) { border-color: var(--primaer); color: var(--primaer); }
.blaettern-knopf.aktiv { background: var(--primaer); border-color: var(--primaer); color: var(--auf-primaer); font-weight: 600; }
.blaettern-knopf:disabled { opacity: .4; cursor: default; }
.blaettern-luecke { align-self: center; padding: 0 var(--a1); color: var(--text-leise); }
@container seite (max-width: 44rem) { .filter .feld-suche { grid-column: auto; } }


@container seite (min-width: 44.01rem) { .tabelle td, .tabelle td.zahl { text-align: center; } .tabelle td:first-child, .tabelle th:first-child { text-align: left; } .tabelle td .chips { justify-content: center; } .tabelle td .kontakte { display: flex; flex-direction: column; align-items: center; } .tabelle-vorlagen td[data-label="Zeit"] { text-align: center; } .tabelle-vorlagen td.aktionen { text-align: right; } }

@container seite (max-width: 44rem) { .filter .feld-suche { min-width: 0; } .filter .feld-suche input { width: 100%; min-width: 0; } }

.kontakt-zweizeilig { white-space: normal; align-items: flex-start; text-align: left; }
.kontakt-zweizeilig > span { display: flex; flex-direction: column; line-height: 1.35; }
.kontakt-zweizeilig > span > span { white-space: nowrap; }
.kontakt-zweizeilig .symbol { margin-top: .2em; }

.tabelle td .kontakte .kontakt { white-space: normal; }
.tabelle td .kontakte .kontakt-mail span { white-space: normal; text-align: left; }
.zwei-zeilen { display: inline-flex; flex-direction: column; line-height: 1.3; }
.zwei-zeilen small { color: var(--text-leise); font-size: var(--gr-klein); }
.zwei-zeilen > span { white-space: nowrap; }
.tabelle td .kontakte .kontakt-mail span { white-space: nowrap; }
@container seite (min-width: 44.01rem) { .tabelle-massnahmen td .kontakte .kontakt-mail > span { white-space: normal; } .tabelle-massnahmen td[data-label="Teamleitung"], .tabelle-massnahmen td[data-label="Klient:in"] { min-width: 8rem; } }
.tabelle-rahmen:has(.adresse-menue) > .tabelle { table-layout: auto; max-width: 100%; }

@container seite (min-width: 44.01rem) { .tabelle th.text-spalte, .tabelle td.text-spalte { text-align: left; } .tabelle td.text-spalte .kontakte { align-items: flex-start; } }

.tabelle td.text-spalte .kontakte { gap: var(--a2); }
.kontakt-mail.kontakt-zweizeilig > span > span { white-space: nowrap; }




.status-Ausstehend { background: var(--j-warn-bg); color: var(--j-warn-fg); }
.konto-kachel { margin-top: var(--a4); }
.konto-kachel .kachel-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--a3); }
.lebenszyklus { display: flex; list-style: none; margin: 0 0 var(--a4); padding: 0; gap: var(--a2); counter-reset: schritt; }
.lebenszyklus li { flex: 1; display: flex; align-items: center; gap: var(--a2); font-size: var(--gr-klein); color: var(--j-neutral-fg);
  padding-top: var(--a2); border-top: 3px solid var(--linie); counter-increment: schritt; }
.lebenszyklus li::before { content: counter(schritt); display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem;
  border-radius: 50%; background: var(--j-neutral-bg); font-weight: 600; font-size: var(--gr-etikett); flex: none; }
.lebenszyklus li.erledigt { border-top-color: var(--j-ok-fg); color: var(--j-ok-fg); }
.lebenszyklus li.erledigt::before { content: "✓"; background: var(--j-ok-bg); }
.lebenszyklus li.aktuell { border-top-color: var(--akzent, var(--j-info-fg)); color: inherit; font-weight: 600; }
.lebenszyklus li.aktuell::before { background: var(--j-info-bg); color: var(--j-info-fg); }
.lebenszyklus li.fehler { border-top-color: var(--j-fehler-fg); color: var(--j-fehler-fg); }
.lebenszyklus li.fehler::before { content: "!"; background: var(--j-fehler-bg); color: var(--j-fehler-fg); }
.konto-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a3); margin-top: var(--a4); }
.konto-aktionen .hinweis { flex: 1 1 100%; margin: 0; }
.konto-kachel code { font-size: .95em; }
@container seite (max-width: 44rem) { .lebenszyklus li { flex: 1 1 0; min-width: 0; gap: var(--a1); font-size: var(--gr-etikett); } }


.filter .feld-suche { flex: 1 1 14rem; min-width: 12rem; }
@container seite (max-width: 44rem) { .filter .feld-suche { min-width: 0; } }
.vorschlaege li.vorschlag-hinweis { color: var(--text-leise, #6b7280); cursor: default; font-style: italic; background: none; }

.tabelle td .kontakte { min-width: 0; max-width: 100%; }
.tabelle td .kontakt-mail.kontakt-kurz { display: inline-flex; max-width: 15rem; min-width: 0; white-space: nowrap; }
.tabelle td .kontakt-mail.kontakt-kurz > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; display: block; }
@container seite (max-width: 44rem) { .tabelle td .kontakt-mail.kontakt-kurz { max-width: 100%; } }


.konto-kachel { margin-top: 0; }
.konto-kachel .meldung { margin: 0 0 var(--a4); }
.status-Papierkorb { background: var(--j-neutral-bg); color: var(--j-neutral-fg); }
.pw-feld { display: flex; gap: var(--a2); align-items: center; }
.pw-feld input { flex: 1; min-width: 0; }


.papierkorb-knopf { position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; flex: none; border-radius: var(--radius, 8px); border: 1px solid var(--linie);
  background: var(--karte); color: var(--text-leise); text-decoration: none; }
.papierkorb-knopf .symbol { width: 18px; height: 18px; }
.papierkorb-knopf:hover, .papierkorb-knopf:focus-visible { color: var(--primaer); border-color: var(--primaer); }
.papierkorb-knopf.aktiv { background: var(--primaer); border-color: var(--primaer); color: var(--auf-primaer); }
.papierkorb-zahl { position: absolute; top: -.4rem; right: -.4rem; min-width: 1.1rem; height: 1.1rem; padding: 0 .25rem;
  border-radius: 999px; background: var(--j-neutral-bg); color: var(--j-neutral-fg); font-size: var(--gr-mini); font-weight: 600;
  line-height: 1.1rem; text-align: center; box-shadow: 0 0 0 2px var(--karte); }
.papierkorb-knopf.aktiv .papierkorb-zahl { display: none; }
.papierkorb-hinweis::before { content: none; }
.papierkorb-hinweis { display: flex; align-items: center; gap: var(--a2); flex-wrap: wrap; }
.papierkorb-hinweis > span { flex: 1; min-width: 12rem; }
.papierkorb-hinweis .knopf { margin-left: auto; }



@container seite (max-width: 72rem) { .tabelle th, .tabelle td { padding-left: var(--a2); padding-right: var(--a2); } .tabelle th { white-space: normal; } .tabelle-personen td[data-label="Maßnahme"], .tabelle-personen td[data-label="Rolle"] { white-space: normal; } .tabelle-massnahmen td[data-label="Teamleitung"], .tabelle-massnahmen td[data-label="Klient:in"] { min-width: 0; } .tabelle-massnahmen .chip, .chip-klient { white-space: normal; } .tabelle td .kontakt-mail.kontakt-kurz { max-width: 11rem; } }
@container seite (min-width: 44.01rem) and (max-width: 58rem) { .tabelle { font-size: var(--gr-klein); } .tabelle th, .tabelle td { padding-left: var(--a1); padding-right: var(--a1); } .tabelle .marke { white-space: normal; text-align: center; } .tabelle td .kontakt-mail.kontakt-kurz { max-width: 7rem; } .tabelle-massnahmen .kontakt .symbol { display: none; } }

.kachel > .monatsnavi-zeile { margin-bottom: var(--a4); }
@container seite (min-width: 44.01rem) and (max-width: 58rem) { .tabelle .kontakt-zweizeilig > span > span, .tabelle .zwei-zeilen > span { white-space: normal; } }



.papierkorb-knopf { width: auto; min-width: 2.5rem; height: auto; align-self: stretch; max-height: none;
  padding: 0 var(--a2); gap: var(--a1); box-sizing: border-box; }
.papierkorb-zahl { position: static; min-width: 0; height: auto; padding: 0; background: none; box-shadow: none;
  color: inherit; font-size: var(--gr-klein); line-height: 1; font-variant-numeric: tabular-nums; }
.papierkorb-knopf.aktiv .papierkorb-zahl { display: inline; }

.tabelle-massnahmen { table-layout: fixed; width: 100%; }
.tabelle-rahmen:has(.adresse-menue) > .tabelle-massnahmen { table-layout: fixed; }
.tabelle-massnahmen td .kontakte .kontakt-mail > span { white-space: normal; overflow-wrap: anywhere; }
.tabelle-massnahmen td, .tabelle-massnahmen th { overflow-wrap: anywhere; }
@container seite (min-width: 44.01rem) { .tabelle-massnahmen th:nth-child(1) { width: 13%; } .tabelle-massnahmen th:nth-child(2) { width: 19%; } .tabelle-massnahmen th:nth-child(3) { width: 20%; } .tabelle-massnahmen th:nth-child(4) { width: 11%; } .tabelle-massnahmen th:nth-child(5) { width: 14%; } .tabelle-massnahmen th:nth-child(6) { width: 13%; } .tabelle-massnahmen th:nth-child(7) { width: 10%; } .tabelle-massnahmen td[data-label="Teamleitung"], .tabelle-massnahmen td[data-label="Klient:in"] { min-width: 0; } .tabelle-massnahmen .chip { white-space: normal; max-width: 100%; } }

.eingabe-symbol { position: relative; display: block; }
.eingabe-symbol > .symbol { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); width: 16px; height: 16px;
  color: var(--text-leise); pointer-events: none; }
.eingabe-symbol > input { padding-left: 2.25rem; width: 100%; }

.kontakt-leer { color: var(--text-leise); }
.kontakt-leer .symbol { opacity: .7; }
.abgleich-liste { margin: var(--a3) 0 0; padding-left: 1.2rem; }
.abgleich-liste li { margin: var(--a1) 0; }


.tabelle-massnahmen .kontakt-zweizeilig > span > span { white-space: normal; overflow-wrap: anywhere; }




.feld-regeln { list-style: none; margin: var(--a1) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--a1) var(--a3);
  font-size: var(--gr-klein); color: var(--text-leise); }
.feld-regeln li { display: inline-flex; align-items: center; gap: .3rem; transition: color .15s; }
.feld-regeln li .symbol { width: 14px; height: 14px; opacity: .35; }
.feld-regeln li.erfuellt { color: var(--j-ok-fg); }
.feld-regeln li.erfuellt .symbol { opacity: 1; }
.feld-regeln li.verletzt { color: var(--j-fehler-fg); }
.feld-fehler { margin: var(--a1) 0 0; font-size: var(--gr-klein); color: var(--j-fehler-fg); font-weight: 600; }
.feld input[aria-invalid="true"] { border-color: var(--j-fehler-fg); }
.knopf:disabled { opacity: .5; cursor: not-allowed; }



.filter .feld-suche { flex: 0 1 16rem; min-width: 9rem; }
.filter { max-width: 100%; box-sizing: border-box; }

.zelle-wiederherstellen { white-space: nowrap; text-align: center; }
.zelle-wiederherstellen form { display: inline; margin: 0; }
.zelle-wiederherstellen .knopf .symbol { width: 14px; height: 14px; margin-right: 4px; }

.pk-aktionen { display: inline-flex; gap: var(--a2); align-items: center; flex-wrap: wrap; justify-content: center; }
.pk-endgueltig { max-width: 44rem; }
.pk-endgueltig > .meldung { margin: 0 0 var(--a4); }
.pk-umfang { list-style: none; margin: 0 0 var(--a4); padding: 0; }
.pk-umfang li { display: flex; justify-content: space-between; gap: var(--a3); padding: var(--a2) 0; border-bottom: 1px solid var(--linie); }
@container seite (min-width: 44.01rem) { .tabelle-massnahmen th:nth-child(8) { width: 13%; } }
#zugaenge .felder > .feld { grid-column: 1 / -1; max-width: 32rem; }
#zugaenge .pw-feld { width: 100%; }



.rueckfrage { border: 0; border-radius: var(--rund-m); padding: var(--a5); max-width: min(28rem, calc(100vw - 2rem));
  box-shadow: 0 20px 50px rgba(0,0,0,.25); background: var(--karte); color: var(--text); }
.rueckfrage::backdrop { background: rgba(15, 20, 40, .45); }
.rueckfrage p { margin: 0 0 var(--a4); line-height: 1.5; }
.rueckfrage-knoepfe { display: flex; justify-content: flex-end; gap: var(--a2); flex-wrap: wrap; }
.konto-kachel .kachel-kopf .papierkorb-knopf { height: 2.25rem; margin-left: auto; }



@container seite (min-width: 44.01rem) { .filter { flex-wrap: nowrap; } .filter > .feld:not(.feld-suche) { flex: 0 1 10rem; min-width: 7rem; } .filter .feld-suche { flex: 1 1 12rem; min-width: 8rem; } }




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


.tb-text { width: 100%; min-height: 6rem; resize: vertical; font: inherit; line-height: 1.5; box-sizing: border-box; }
.tb-lesen { white-space: pre-line; margin: 0; line-height: 1.55; }
.tb-klient .kachel-kopf { margin-bottom: var(--a2); }
.tb-gespeichert { align-self: center; min-width: 7rem; text-align: right; }
.tb-pdf-link { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%;
  color: var(--primaer); border: 1px solid transparent; vertical-align: middle; }
.tb-pdf-link:hover, .tb-pdf-link:focus-visible { border-color: var(--primaer); background: var(--j-nacht-50); }
.tb-korrektur { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--a2); margin-left: auto; }
.tb-korrektur .feld { min-width: 16rem; margin: 0; }
.tb-versionen { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--a2); }
.tb-versionen li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a2); padding: var(--a1) var(--a2); border-radius: var(--rund-s); }
.tb-versionen li[aria-current] { background: var(--j-nacht-50); font-weight: 600; }
@container seite (max-width: 44rem) { .tb-korrektur { margin-left: 0; width: 100%; } .tb-korrektur .feld { min-width: 0; flex: 1 1 100%; } .seitenkopf .aktionen .tb-gespeichert { order: 3; width: 100%; text-align: left; } }


.dp-vp-stand { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--a1) var(--a2); }
.dp-kachel .vp-slot .vp-marke.fehler { white-space: nowrap; }

.vp2 > .vp-personen, .vp2 > .seiten-haupt { min-width: 0; }

.bearbeitbar .kalender-liste .vp-slot.belegt .vp-slot-kopf { padding-right: 1.5rem; }


.talk-kurz { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem;
  margin-left: var(--a1); padding: 0; vertical-align: middle; border: 1px solid transparent; border-radius: 50%;
  background: transparent; color: var(--text-leise); cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.talk-kurz .symbol { width: 16px; height: 16px; color: inherit; }
.talk-kurz:hover, .talk-kurz:focus-visible { background: var(--j-nacht-50); border-color: var(--akzent); color: var(--akzent); }
@container seite (max-width: 44rem) { .talk-kurz { width: 2.25rem; height: 2.25rem; } }


.tabelle .spalte-talk { width: 2.75rem; padding-left: 0; padding-right: 0; text-align: center; }
.tabelle td.spalte-talk .talk-kurz { vertical-align: middle; }
@container seite (max-width: 44rem) { .tabelle-personen tbody tr { position: relative; } .tabelle-personen td.spalte-talk { position: absolute; top: var(--a2); right: var(--a2); width: auto; padding: 0; } .tabelle-personen td.spalte-talk::before { display: none; } }


.emoji-wahl { position: relative; flex: none; align-self: flex-end; }
.emoji-knopf[aria-expanded="true"] .akt-rund-kreis { border-color: var(--akzent); }   
.emoji-liste { position: absolute; right: 0; bottom: calc(100% + var(--a2)); z-index: 40; width: 17.5rem; max-height: 18rem; overflow-y: auto;
  padding: var(--a2); background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund-m); box-shadow: var(--schatten-hoch, var(--schatten)); }
.emoji-liste[hidden] { display: none; }
.emoji-gruppe + .emoji-gruppe { margin-top: var(--a2); }
.emoji-titel { display: block; margin: 0 0 2px var(--a1); font-size: var(--gr-etikett); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-leise); }
.emoji-raster { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; }
.emoji { display: flex; align-items: center; justify-content: center; height: 2.5rem; padding: 0; font-size: 1.35rem; line-height: 1;
  background: none; border: 1px solid transparent; border-radius: var(--rund-s); cursor: pointer; }
.emoji:hover, .emoji:focus-visible { background: var(--j-nacht-50); border-color: var(--akzent); outline: none; }
@keyframes live-puls { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } }
#chat-meldung .meldung { margin: var(--a2) 0 0; }

@container seite (max-width: 44rem) { .emoji-wahl { position: static; } .emoji-liste { left: 0; right: 0; width: auto; } }




.team-kopf { align-items: flex-end; }
.team-titel { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.team-bez { font-size: var(--gr-klein); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-leise); }

.titel-wahl { position: relative; }
.titel-wahl h1, .titel-wahl h2 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a2); }
.titel-wahl-knopf { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 0 -6px; padding: 2px 6px; border: 0;
  border-radius: var(--rund-s); background: none; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.titel-wahl-knopf:hover { background: var(--j-nacht-50); }
.titel-wahl-knopf:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.titel-wahl-pfeil { flex: none; color: var(--text-leise); transition: transform .15s ease; }
.titel-wahl-knopf:hover .titel-wahl-pfeil { color: var(--primaer); }
.titel-wahl.offen .titel-wahl-pfeil { transform: rotate(180deg); color: var(--primaer); }
.titel-wahl-menue { position: absolute; top: calc(100% + 4px); left: -6px; z-index: 30; min-width: 15rem; max-width: min(22rem, 92vw);
  max-height: 60vh; overflow-y: auto; padding: var(--a1); background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--rund-m); box-shadow: 0 10px 30px rgba(15, 22, 50, .16); }
.titel-wahl-gruppe { padding: var(--a2) var(--a3) 2px; font-size: var(--gr-klein); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-leise); }
.titel-wahl-menue a { display: flex; align-items: center; justify-content: space-between; gap: var(--a2);
  padding: var(--a2) var(--a3); border-radius: var(--rund-s); color: var(--text); text-decoration: none; font-weight: 500; }
.titel-wahl-menue a:hover, .titel-wahl-menue a:focus-visible { background: var(--j-nacht-50); color: var(--primaer); outline: none; }
.titel-wahl-menue a[aria-current] { color: var(--primaer); font-weight: 700; }
.team-unter { font-size: var(--gr-klein); text-transform: uppercase; letter-spacing: .04em; color: var(--text-leise); margin: var(--a3) 0 var(--a1); }
.team-unter:first-of-type { margin-top: 0; }

.segment { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: var(--rund-voll); background: var(--flaeche); border: 1px solid var(--linie); }
.segment a { padding: var(--a1) var(--a3); border-radius: var(--rund-voll); color: var(--text-leise); text-decoration: none; font-weight: 600; font-size: var(--gr-klein); transition: background .15s ease, color .15s ease; }
.segment a:hover { color: var(--primaer); }
.segment a[aria-current="page"] { background: var(--primaer); color: var(--auf-primaer); font-weight: 700; }
.segment a[aria-current="page"]:hover { background: var(--primaer-hover); color: var(--auf-primaer); }
.segment a[aria-current="page"] .symbol { color: var(--auf-primaer); }
.team-unterleiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--a2); margin-bottom: var(--a4); }

.team-kal-schreiben div.kalender-tag { cursor: pointer; }
.team-kal-schreiben div.kalender-tag:hover { border-color: var(--primaer); }
.team-kal-plus { position: absolute; top: 4px; right: 4px; display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-leise);
  cursor: pointer; opacity: 0; transition: opacity .12s; }
.team-kal-plus .symbol { width: 14px; height: 14px; margin: 0; }
.kalender-tag:hover .team-kal-plus, .team-kal-plus:focus-visible, .kalender-tag.gewaehlt .team-kal-plus { opacity: 1; }
.team-kal-plus:hover { background: var(--primaer); color: var(--auf-primaer); }
.team-termin { --farbe: var(--akzent); display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--a1); width: 100%; min-width: 0;
  padding: 3px var(--a2) 3px 6px; border: 0; border-left: 3px solid var(--farbe); background: var(--j-nacht-50);
  border-radius: 4px; font: inherit; font-size: var(--gr-klein); text-align: left; color: var(--text); cursor: pointer; }
.team-termin:hover, .team-termin:focus-visible { background: var(--j-nacht-100, #dfe3f2); }
.team-termin-zeit { color: var(--text-leise); }
.team-termin-titel { font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.team-termin-person { display: inline-flex; align-items: center; justify-content: center; min-width: 1.35rem; height: 1.35rem; padding: 0 3px;
  border-radius: 50%; background: var(--karte); border: 1px solid var(--linie); font-size: .65rem; font-weight: 700; color: var(--text-leise); }
.art-arzt { --farbe: #c0392b; } .art-hilfeplan { --farbe: #7d3c98; } .art-schule { --farbe: #2471a3; }
.art-familie { --farbe: #d68910; } .art-team { --farbe: #1d2654; } .art-ausflug { --farbe: #1e8449; }
.kal-pop-art { font-size: var(--gr-klein); font-weight: 700; color: var(--farbe, var(--akzent)); text-transform: uppercase; letter-spacing: .04em; }
.kal-pop-von { margin: var(--a2) 0 0; }
.kal-pop-ganztags { display: inline-flex; align-items: center; gap: var(--a1); font-size: var(--gr-klein); cursor: pointer; }
.kal-pop-zeit { display: grid; grid-template-columns: 1fr 1fr; gap: var(--a2); }
.kal-pop-zeit[hidden] { display: none; }
.chip-wahl { position: relative; display: inline-flex; cursor: pointer; }
.chip-wahl input { position: absolute; opacity: 0; }
.chip-wahl span { padding: var(--a1) var(--a3); border: 1px solid var(--linie); border-radius: var(--rund-voll); font-size: var(--gr-klein); background: var(--karte); }
.chip-wahl span small { color: var(--text-leise); }
.chip-wahl input:checked + span { background: var(--primaer); border-color: var(--primaer); color: var(--auf-primaer); }
.chip-wahl input:checked + span small { color: var(--j-nacht-100, #dfe3f2); }
.chip-wahl input:focus-visible + span { outline: 2px solid var(--fokus); outline-offset: 2px; }
@container seite (max-width: 44rem) { .team-kal-plus { opacity: 1; } }
.knopf-symbol { border: 0; background: none; color: var(--text-leise); cursor: pointer; font-size: var(--gr-mittel); line-height: 1; padding: 0 2px; }
.knopf-symbol:hover, .knopf-symbol:focus-visible { color: var(--j-fehler-fg); }
.team-klienten { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: var(--a3); }
.team-klient { display: flex; align-items: center; gap: var(--a3); margin: 0; color: inherit; text-decoration: none; }
.team-klient:hover { border-color: var(--primaer); }
.team-klient > .symbol { transform: rotate(180deg); margin-left: auto; color: var(--text-leise); flex: none; }
.team-klient-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.team-klient-marken { display: flex; flex-wrap: wrap; gap: var(--a1); margin-top: 2px; }
.team-klient .avatar { width: 2.75rem; height: 2.75rem; flex: none; }
.akte-karte { display: flex; flex-direction: column; align-items: flex-start; gap: var(--a1); padding: var(--a3); border: 1px solid var(--linie); border-radius: var(--rund-m); }
.akte-karte a { display: inline-flex; align-items: center; gap: 4px; }
.akte-karte form { margin-top: auto; }
.akte-verlauf-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a2); margin-bottom: var(--a1); }


.ort-feld { position: relative; }
.ort-zeile { display: flex; gap: var(--a1); align-items: stretch; }
.ort-zeile input { flex: 1; min-width: 0; }
.ort-karte { flex: none; align-self: center; }   
.ort-feld .vorschlaege li small { color: var(--text-leise); font-weight: 600; }
.ort-feld .vorschlaege { min-width: 0; width: auto; left: 0; right: 0; max-width: 100%; }
.ort-feld .vorschlaege li { overflow-wrap: anywhere; }
.kal-pop-ort-link { color: inherit; }
.abfuhr { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 6px; border-radius: var(--rund-voll);
  font-size: var(--gr-klein); font-weight: 600; background: color-mix(in srgb, var(--farbe, #6b7280) 14%, var(--karte));
  color: var(--text); border: 1px solid color-mix(in srgb, var(--farbe, #6b7280) 40%, transparent); white-space: nowrap; }
.abfuhr::before { content: ""; width: .65em; height: .65em; border-radius: 50%; background: var(--farbe, #6b7280); flex: none; }
.abfuhr-rest { --farbe: #3f4652; } .abfuhr-bio { --farbe: #8a5a2b; } .abfuhr-papier { --farbe: #2463b0; }
.abfuhr-gelb { --farbe: #e3b300; } .abfuhr-glas { --farbe: #2e8b57; } .abfuhr-sperr { --farbe: #b45309; }
.abfuhr-baum { --farbe: #1e7a3c; } .abfuhr-schad { --farbe: #c0392b; } .abfuhr-sonst { --farbe: #6b7280; }
.abfuhr-tag { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.abfuhr-tag form { margin: 0; }


.akte-warnung { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a1); margin: var(--a2) 0 0; padding: var(--a1) var(--a3);
  background: var(--j-fehler-bg); color: var(--j-fehler-fg); border-radius: var(--rund-s); font-size: var(--gr-klein); }
.akte-warnung .symbol { color: currentColor; }
.akte-text { white-space: pre-line; overflow-wrap: anywhere; }
fieldset.feld.akte-gruppe { border: 0; padding: 0; margin: 0 0 var(--a4); min-width: 0; }
fieldset.feld.akte-gruppe legend { font-weight: 700; padding: 0; margin-bottom: var(--a2); }
.akte-med-kurz { list-style: none; margin: 0 0 var(--a1); padding: 0; display: grid; gap: 2px; }
.akte-aenderungen { list-style: none; margin: 0 0 var(--a3); padding: 0; display: grid; gap: var(--a2); }
.akte-aenderungen li { display: flex; flex-direction: column; gap: 2px; padding-bottom: var(--a2); border-bottom: 1px solid var(--linie); }
.akte-alt summary { cursor: pointer; color: var(--primaer); font-size: var(--gr-klein); }
.akte-alt .akte-text { display: block; margin-top: var(--a1); padding: var(--a2); background: var(--flaeche); border-radius: var(--rund-s); font-size: var(--gr-klein); }

.med-kette { padding: var(--a3) 0; border-top: 1px solid var(--linie); }
.med-kette:first-of-type { border-top: 0; padding-top: 0; }
.med-kette h3 { margin: 0 0 var(--a2); display: flex; align-items: center; gap: var(--a2); }
.med-beendet h3 { color: var(--text-leise); }
.med-fassungen { list-style: none; margin: 0; padding: 0 0 0 var(--a3); border-left: 2px solid var(--linie); display: grid; gap: var(--a2); }
.med-fassungen li { display: flex; flex-direction: column; gap: 2px; }
.med-fassungen li:first-child { font-weight: 400; }
.med-zeitraum { font-weight: 700; font-size: var(--gr-klein); }
.med-diff { font-size: var(--gr-klein); color: var(--j-warn-fg); }

.akte-filter { display: flex; flex-wrap: wrap; gap: var(--a1); margin-bottom: var(--a4); }
.akte-filter a { padding: var(--a1) var(--a3); border: 1px solid var(--linie); border-radius: var(--rund-voll); color: var(--text-leise);
  text-decoration: none; font-size: var(--gr-klein); font-weight: 600; background: var(--karte); }
.akte-filter a:hover { color: var(--primaer); border-color: var(--primaer); }
.akte-filter a[aria-current="page"] { background: var(--primaer); border-color: var(--primaer); color: var(--auf-primaer); }
.akte-filter a[aria-current="page"] .reiter-zahl { background: rgba(255, 255, 255, .25); color: inherit; }
.akte-doku-neu { position: sticky; top: var(--a4); }
.doku-extra { margin: var(--a1) 0; }
.doku-extra-felder[hidden] { display: none; }
@container seite (max-width: 60rem) { .akte-doku-neu { position: static; } }
@media print {
  .team-kopf, .team-unterleiste, .ruecksprung, .reiter { display: none !important; }
}




:root { --metis-dauer: .52s; --metis-kurve: cubic-bezier(.32, .72, 0, 1); }
body { container: seite / inline-size; }
.kopf-rund.kopf-metis { position: relative; cursor: pointer; font: inherit; font-size: var(--gr-etikett); font-weight: 600; color: var(--j-nacht-100); }
.kopf-metis:hover, .kopf-metis[aria-expanded="true"] { color: var(--j-weiss); }
.kopf-metis:hover .kopf-kreis, .kopf-metis:focus-visible .kopf-kreis, .kopf-metis[aria-expanded="true"] .kopf-kreis {
  background: var(--j-nacht-600); color: var(--akzent); }
.kopf-metis[aria-expanded="true"] .kopf-kreis { box-shadow: 0 0 0 2px var(--akzent); border-color: var(--akzent); }
.kopf-metis .kopf-kreis svg { transition: transform .6s var(--metis-kurve); }
.kopf-metis:hover .kopf-kreis svg, .kopf-metis:focus-visible .kopf-kreis svg { transform: rotate(-150deg); }
.metis-punkt { position: absolute; top: -1px; right: calc(50% - 1.25rem); width: .7rem; height: .7rem; border-radius: 50%;
  background: var(--akzent); box-shadow: 0 0 0 2px var(--j-nacht-800); }
@media (max-width: 44rem) { .metis-punkt { right: calc(50% - 1.1rem); } }


body.seite-metis { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
.inhalt.inhalt-metis { flex: 1; min-height: 0; max-width: none; width: 100%; padding: 0; margin: 0; }
.metis-seite { display: flex; height: 100%; background: var(--flaeche); }
.mt-liste { flex: 0 0 clamp(17rem, 24vw, 24rem); min-width: 0; display: flex; flex-direction: column; border-right: 1px solid var(--linie); }
.mt-raum { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--flaeche); }
.mt-raum-haupt { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.mt-seite { flex: 0 0 clamp(16rem, 22vw, 21rem); min-width: 0; display: none; flex-direction: column; border-left: 1px solid var(--linie); background: var(--karte); }
.metis-seite.info-offen .mt-seite { display: flex; }
.metis-seite:not(.hat-raum) .mt-seite { display: none; }
.metis-seite:not(.hat-raum) #metis-info-knopf { display: none; }
.mt-kopf { display: flex; align-items: center; gap: var(--a2); min-height: 3.75rem; padding: var(--a3) var(--a3) var(--a3) var(--a4);
  background: var(--karte); border-bottom: 1px solid var(--linie); }
.mt-kopf h1, .mt-kopf h2 { flex: 1; font-size: var(--gr-titel); margin: 0; }
.mt-raum-kopf { padding-left: var(--a3); }
.mt-raum-kopf[hidden] { display: none; }
.mt-reiter { display: flex; gap: var(--a1); padding: var(--a2) var(--a3) 0; border-bottom: 1px solid var(--linie); }
.mt-reiter[hidden], .mt-tafel[hidden] { display: none; }
.mt-reiter button { padding: var(--a2) var(--a3); border: 0; border-bottom: 3px solid transparent; background: none; color: var(--text-leise);
  font: 600 var(--gr-text) var(--schrift); cursor: pointer; }
.mt-reiter button[aria-selected="true"] { color: var(--primaer); border-bottom-color: var(--akzent); }
.mt-tafel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mt-profil { display: flex; flex-direction: column; align-items: center; gap: var(--a1); padding: var(--a5) var(--a4); text-align: center; }
.mt-profil .mt-profil-bild { width: 5rem; height: 5rem; font-size: 1.5rem; }
.mt-profil small { color: var(--text-leise); }
.mt-profil-text { margin: var(--a3) 0 0; color: var(--text-leise); font-size: var(--gr-klein); }
.mt-notiz-liste { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mt-notiz-liste[hidden] { display: none; }
.mt-notiz-kopf { display: flex; align-items: center; gap: var(--a2); margin: var(--a3) var(--a3) var(--a1); }
.mt-notiz-kopf .abschnitt-titel.metis-abschnitt { flex: 1; margin: 0 var(--a2); }
.metis-eintrag[aria-current="true"] { background: var(--karte); box-shadow: inset 3px 0 0 var(--akzent), var(--schatten); }

@container seite (max-width: 55.99rem) { .mt-liste { flex: 1; border-right: 0; } .mt-seite { position: absolute; inset: 0 0 0 auto; width: min(100%, 22rem); z-index: 3; box-shadow: var(--schatten-dialog); } }@media (max-width: 55.99rem) { .metis-seite { position: relative; } .metis-seite[data-ansicht="raum"] .mt-liste, .metis-seite[data-ansicht="liste"] .mt-raum { display: none; } .metis-zurueck { display: inline-flex; } }
@container seite (max-width: 44rem) { .mt-seite { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .kopf-metis .kopf-kreis svg { transition: none !important; } }

.metis-kopf-knopf { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 2.25rem; height: 2.25rem;
  padding: 0 .45rem; border: 0; border-radius: var(--rund-voll); background: none; color: var(--text-leise); font: 600 var(--gr-klein) var(--schrift);
  cursor: pointer; transition: background .2s, color .2s; }
.metis-kopf-knopf .symbol { width: 18px; height: 18px; color: inherit; }
.metis-kopf-knopf:hover, .metis-kopf-knopf[aria-pressed="true"] { background: var(--j-nacht-50); color: var(--primaer); }
.metis-kopf-knopf[hidden] { display: none; }
.metis-suche { display: flex; align-items: center; gap: var(--a2); margin: var(--a3) var(--a3) var(--a1); padding: 0 var(--a3);
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund-voll); color: var(--text-leise); }
.metis-suche input { flex: 1; min-width: 0; border: 0; background: none; padding: var(--a2) 0; font: inherit; color: var(--text); }
.metis-suche input:focus { outline: none; }
.metis-suche:focus-within { border-color: var(--primaer); box-shadow: 0 0 0 2px var(--j-nacht-100); }
.metis-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--a2) var(--a4); }
.abschnitt-titel.metis-abschnitt { margin: var(--a4) var(--a2) var(--a1); letter-spacing: .04em; }   
.metis-liste { list-style: none; margin: 0; padding: 0; }
.metis-eintrag { width: 100%; display: flex; align-items: center; gap: var(--a3); padding: var(--a2); border: 0; border-radius: var(--rund-m);
  background: none; text-align: left; font: inherit; color: var(--text); cursor: pointer; transition: background .15s; }
.metis-eintrag:hover { background: var(--karte); box-shadow: var(--schatten); }
.metis-eintrag:disabled { cursor: default; opacity: .6; box-shadow: none; background: none; }
.metis-eintrag-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.metis-eintrag-text strong, .metis-eintrag-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.metis-eintrag-text small { color: var(--text-leise); font-size: var(--gr-klein); }
.metis-eintrag.ungelesen strong, .metis-eintrag.ungelesen small { color: var(--text); font-weight: 700; }
.metis-eintrag-rechts { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  font-size: var(--gr-klein); color: var(--text-leise); font-variant-numeric: tabular-nums; }
.metis-zahl { display: inline-block; min-width: 1.35rem; padding: 0 .35rem; border-radius: var(--rund-voll); background: var(--akzent);
  color: var(--j-nacht-900); font: 700 var(--gr-etikett)/1.35rem var(--schrift); text-align: center; }
.metis-zahl[hidden] { display: none; }
.metis-bild { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem;
  border-radius: 50%; overflow: hidden; background: var(--j-nacht-100); color: var(--primaer); font-size: var(--gr-klein); font-weight: 700; }
.metis-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.metis-bild-team { border-radius: var(--rund-m); background: var(--primaer); color: var(--auf-primaer); }
.metis-bild-info { border-radius: var(--rund-m); background: var(--akzent); color: var(--j-nacht-900); }
.metis-leer { display: flex; align-items: center; justify-content: center; gap: var(--a2); margin: var(--a5) var(--a3);
  color: var(--text-leise); text-align: center; }
.metis-leer .symbol { color: inherit; width: 20px; height: 20px; flex: none; }
.metis-leer[hidden] { display: none; }


.metis-zurueck { flex: none; display: none; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem;
  border: 0; border-radius: 50%; background: none; color: var(--primaer); cursor: pointer; }
.metis-zurueck .symbol { color: inherit; }
.metis-zurueck:hover { background: var(--j-nacht-50); }
.metis-raum-kopf .metis-bild { width: 2.25rem; height: 2.25rem; font-size: var(--gr-zusatz); }
.metis-raum-titel { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.metis-raum-titel strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.metis-raum-titel small { color: var(--text-leise); font-size: var(--gr-klein); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.metis-raum-leer { flex: 1; display: flex; align-items: center; justify-content: center; }
.metis-verlauf-rahmen { flex: 1; min-height: 0; overflow-y: auto; padding: var(--a2) var(--a3) var(--a3); overscroll-behavior: contain; }
.metis-verlauf { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.metis-tag { align-self: center; position: sticky; top: var(--a1); z-index: 1; margin: var(--a3) 0 var(--a2); padding: 2px var(--a3);
  border-radius: var(--rund-voll); background: var(--karte); box-shadow: var(--schatten); font-size: var(--gr-etikett); font-weight: 600; color: var(--text-leise); }
.metis-msg { display: flex; align-items: flex-end; gap: var(--a2); margin-top: 2px; max-width: min(88%, 44rem); animation: metis-rein .35s var(--metis-kurve); }
.metis-msg.neu-gruppe { margin-top: var(--a3); }
.metis-msg.eigen { align-self: flex-end; flex-direction: row-reverse; }
.metis-msg .metis-bild { width: 1.75rem; height: 1.75rem; font-size: var(--gr-mini); }
.metis-msg .metis-bild.leer { visibility: hidden; }
.metis-msg-inhalt { min-width: 0; display: flex; flex-direction: column; }
.metis-msg.eigen .metis-msg-inhalt { align-items: flex-end; }
.metis-msg-name { margin: 0 0 2px var(--a2); font-size: var(--gr-etikett); font-weight: 700; color: var(--primaer); }
.metis-blase { padding: var(--a2) var(--a3); border-radius: 16px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.4;
  background: var(--karte); border: 1px solid var(--linie); box-shadow: var(--schatten); }
.metis-msg.eigen .metis-blase { background: var(--primaer); color: var(--auf-primaer); border-color: var(--primaer); }
.metis-msg.fremd:not(.gruppe-ende) .metis-blase { border-bottom-left-radius: 6px; }
.metis-msg.eigen:not(.gruppe-ende) .metis-blase { border-bottom-right-radius: 6px; }
.metis-msg.fremd.gruppe-ende .metis-blase { border-bottom-left-radius: 4px; }
.metis-msg.eigen.gruppe-ende .metis-blase { border-bottom-right-radius: 4px; }
.metis-zeit { margin-left: var(--a2); font-size: var(--gr-mini); opacity: .65; font-variant-numeric: tabular-nums; float: right; margin-top: .45em; }
.metis-msg.pending .metis-blase { opacity: .72; }
.metis-msg.pending.fehler .metis-blase { opacity: 1; background: var(--j-fehler-bg, #fde8e8); color: var(--j-fehler-fg, #8a1f1f); border-color: var(--j-fehler-fg, #8a1f1f); }
.metis-msg.pending .metis-nochmal { align-self: flex-end; margin-top: 2px; }
.metis-msg.info .metis-blase { background: var(--j-nacht-50); border-color: var(--j-nacht-100); }
@keyframes metis-rein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.metis-aeltere { align-self: center; margin: var(--a2) 0; }
.metis-runter { position: absolute; right: var(--a3); bottom: calc(100% + var(--a2)); display: inline-flex; align-items: center; gap: 4px;
  padding: 4px var(--a3); border: 0; border-radius: var(--rund-voll); background: var(--primaer); color: var(--auf-primaer);
  font: 600 var(--gr-klein) var(--schrift); box-shadow: var(--schatten-hoch); cursor: pointer; }
.metis-runter .symbol { width: 14px; height: 14px; color: inherit; }
.metis-runter[hidden] { display: none; }
.metis-eingabe { position: relative; display: flex; gap: var(--a2); align-items: flex-end; padding: var(--a3); background: var(--karte); border-top: 1px solid var(--linie); }
.metis-eingabe[hidden] { display: none; }
.metis-eingabe textarea { flex: 1; min-width: 0; resize: none; min-height: 2.5rem; max-height: 9rem; }
.metis-eingabe .knopf { flex: none; height: 2.5rem; width: 2.75rem; padding: 0; justify-content: center; }
.metis-eingabe .knopf .symbol { width: 18px; height: 18px; margin: 0; color: inherit; }
.metis-nurlesen { margin: 0; padding: var(--a3); background: var(--karte); border-top: 1px solid var(--linie); color: var(--text-leise);
  font-size: var(--gr-klein); text-align: center; }
.metis-nurlesen[hidden] { display: none; }



.metis-notiz { width: 100%; display: flex; flex-direction: column; gap: 2px; margin: 0 0 var(--a2); padding: var(--a3);
  border: 1px solid var(--linie); border-radius: var(--rund-m); background: var(--karte); text-align: left; font: inherit; color: var(--text);
  cursor: pointer; box-shadow: var(--schatten); transition: border-color .15s, box-shadow .15s; }
.metis-notiz:hover, .metis-notiz[aria-current="true"] { border-color: var(--primaer); box-shadow: var(--schatten-hoch); }
.metis-notiz.angeheftet { border-left: 3px solid var(--akzent); }
.metis-notiz strong { display: flex; align-items: center; gap: 4px; }
.metis-notiz strong .symbol { width: 14px; height: 14px; color: var(--akzent); flex: none; }
.metis-notiz-vorschau { color: var(--text-leise); font-size: var(--gr-klein); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.metis-notiz-meta { color: var(--text-leise); font-size: var(--gr-etikett); }
.metis-editor { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--a2); padding: var(--a3); overflow-y: auto; }
.metis-editor input[type="text"] { font-weight: 700; font-size: var(--gr-titel); }
.metis-editor textarea { flex: 1; min-height: 12rem; resize: none; line-height: 1.5; }
.metis-editor-fuss { display: flex; align-items: center; gap: var(--a2); flex-wrap: wrap; }
.metis-editor-fuss .metis-notiz-meta { flex: 1; min-width: 8rem; }
.metis-meldung { margin: 0; padding: var(--a2) var(--a3); border-radius: var(--rund-s); background: var(--j-fehler-bg); color: var(--j-fehler-fg); font-size: var(--gr-klein); }
.metis-meldung[hidden] { display: none; }


.metis-schnell .symbol { color: inherit; }
@media print { .kopf-metis { display: none !important; } }




.j-badges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a2); margin: 0; padding: 0; list-style: none; }
.j-badges-stapel { flex-direction: column; align-items: flex-start; }
.j-badge { display: inline-flex; align-items: center; gap: var(--a2); min-height: 2.25rem; max-width: 100%;
  padding: 3px var(--a3) 3px 3px; border: 1px solid var(--j-nacht-100); border-radius: var(--rund-voll);
  background: var(--karte); color: var(--text); font-size: var(--gr-klein); font-weight: 600; text-decoration: none;
  line-height: 1.2; transition: border-color .2s, background .2s, box-shadow .2s; }
a.j-badge:hover, button.j-badge:hover { border-color: var(--primaer); background: var(--j-nacht-50); color: var(--text); }
.j-badge-avatar { width: 1.75rem; height: 1.75rem; font-size: var(--gr-mini); }
.j-badge-symbol { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem;
  border-radius: 50%; background: var(--j-nacht-50); color: var(--primaer); }
.j-badge-symbol .symbol { width: 15px; height: 15px; }
.j-badge-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.4; } 
.j-badge-text small { margin-left: .25em; font-weight: 400; color: var(--text-leise); }
.j-badge-klein { min-height: 1.75rem; padding: 2px var(--a3); }
.j-badge-klient { border-color: var(--j-bernstein-500); background: var(--j-bernstein-100); }
.j-badge-klient .j-badge-avatar { background: var(--j-nacht-900); color: var(--akzent); }
a.j-badge-klient:hover { background: var(--j-bernstein-100); border-color: var(--j-nacht-900); }
.j-badge-ms .j-badge-symbol { background: var(--j-nacht-900); color: var(--akzent); }
.j-badge-schicht { padding-left: 3px; }
.j-badge-code { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 1.75rem; height: 1.75rem;
  padding: 0 .35rem; border-radius: var(--rund-voll); background: var(--primaer); color: var(--auf-primaer); font-size: var(--gr-etikett); letter-spacing: .02em; }
.j-badge-leer { padding-left: var(--a3); border-style: dashed; color: var(--text-leise); }




.j-datum { position: relative; display: inline-block; }
.j-datum-knopf { cursor: pointer; font: inherit; font-size: var(--gr-text); }
.j-datum-knopf > .symbol:last-child { width: 14px; height: 14px; color: var(--text-leise); }
.j-datum-pop { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; width: 17.5rem; margin: 0; padding: var(--a3);
  box-shadow: 0 12px 32px var(--schatten-tief-farbe); animation: j-pop-rein .22s var(--metis-kurve, ease-out); }
.j-datum-pop[hidden] { display: none; }
@keyframes j-pop-rein { from { opacity: 0; transform: translateY(-4px); } }
.j-datum-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--a2); }
.j-datum-kopf button { width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: none; color: var(--primaer); font-size: var(--gr-gross); cursor: pointer; }
.j-datum-kopf button:hover { background: var(--j-nacht-50); }
.j-datum-raster { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.j-datum-wt { font-size: var(--gr-etikett); font-weight: 700; color: var(--text-leise); padding: 2px 0; }
.j-datum-raster button { height: 2.1rem; border: 0; border-radius: 50%; background: none; font: inherit; font-size: var(--gr-klein);
  font-variant-numeric: tabular-nums; cursor: pointer; color: var(--text); }
.j-datum-raster button:hover:not([disabled]) { background: var(--j-nacht-50); }
.j-datum-raster button.heute { font-weight: 700; text-decoration: underline 2px var(--akzent); text-underline-offset: 3px; }
.j-datum-raster button.gewaehlt { background: var(--primaer); color: var(--auf-primaer); }
.j-datum-raster button[disabled] { color: var(--j-stein-300); cursor: default; }




.tb-klient .kachel-kopf { margin-bottom: var(--a3); }
.tb-form .kachel-kopf .tb-gespeichert { margin-left: auto; }
.tb-fuss { justify-content: space-between; }
.tb-fuss-rechts { display: flex; gap: var(--a2); margin-left: auto; }
.tb-fertig p { display: flex; align-items: center; gap: var(--a2); margin: 0 0 var(--a3); }
.tb-fertig .symbol { color: var(--j-ok-fg); }
@container seite (max-width: 44rem) { .tb-fuss-rechts { width: 100%; } .tb-fuss-rechts .knopf { flex: 1; } }


.akt-kachel .kachel-kopf { margin-bottom: var(--a3); }
.akt-liste { list-style: none; margin: 0 0 var(--a3); padding: 0; display: grid; gap: var(--a1); }
.akt-zeile { display: flex; align-items: center; gap: var(--a3); min-height: 2.75rem; padding: var(--a1) var(--a2);
  border-radius: var(--rund-s); color: var(--text); text-decoration: none; }
a.akt-zeile:hover { background: var(--j-nacht-50); color: var(--text); }
a.akt-zeile:hover .akt-pfeil { color: var(--primaer); transform: translateX(2px); }
.akt-datum { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem;
  border-radius: var(--rund-s); background: var(--j-nacht-50); color: var(--primaer); line-height: 1; }
.akt-datum b { font-size: var(--gr-mittel); } .akt-datum small { font-size: var(--gr-mini); font-weight: 700; text-transform: uppercase; color: var(--text-leise); }
.akt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.akt-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.akt-text small { color: var(--text-leise); font-size: var(--gr-klein); }
.akt-pfeil { flex: none; color: var(--j-stein-300); font-size: var(--gr-gross); transition: transform .2s, color .2s; }
.akt-dienst { flex-wrap: wrap; gap: var(--a2); padding-left: 0; }


.team-kal-raster { display: grid; grid-template-columns: minmax(0, 1fr) 0; gap: 0; align-items: start;
  transition: grid-template-columns var(--metis-dauer, .52s) var(--metis-kurve, ease), gap var(--metis-dauer, .52s) var(--metis-kurve, ease); }
.team-kal-raster > .team-kal { margin: 0; min-width: 0; }
.team-kal-raster.mit-detail { grid-template-columns: minmax(0, 1fr) 19rem; gap: var(--a4); }
.kal-detail { position: sticky; top: var(--a4); margin: 0; min-width: 0; overflow: hidden; opacity: 0; transform: translateX(16px);
  transition: opacity .35s var(--metis-kurve, ease), transform var(--metis-dauer, .52s) var(--metis-kurve, ease);
  border-top: 4px solid var(--akzent); }
.mit-detail > .kal-detail { opacity: 1; transform: none; }
.kal-detail.kal-detail-neu > * { animation: metis-rein .35s var(--metis-kurve, ease); }
.kal-detail-titel { margin: var(--a2) 0 var(--a3); font-size: var(--gr-titel); overflow-wrap: anywhere; }
.kal-detail-liste { display: grid; gap: var(--a3); margin: 0 0 var(--a3); }
.kal-detail-liste > div { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--a2); align-items: start; }
.kal-detail-liste dt { color: var(--text-leise); padding-top: 2px; }
.kal-detail-liste dt.kal-detail-dt { grid-column: 1 / -1; font-size: var(--gr-etikett); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 0; }
.kal-detail-liste dt.kal-detail-dt + dd { grid-column: 1 / -1; }
.kal-detail-liste dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.kal-detail-notiz dd { white-space: pre-line; }
.team-termin[aria-expanded="true"] { box-shadow: inset 0 0 0 2px var(--primaer); }
.team-termin-serie { display: inline-flex; color: var(--text-leise); }
.team-termin-serie .symbol { width: 12px; height: 12px; }
.kal-serie-hinweis { align-items: center; }
@container seite (max-width: 64rem) { .team-kal-raster, .team-kal-raster.mit-detail { grid-template-columns: minmax(0, 1fr); gap: 0; } .mit-detail > .kal-detail { transform: none; } }@media (max-width: 64rem) { .kal-detail { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; top: auto; max-height: 75vh; overflow-y: auto;
    border-radius: var(--rund-m) var(--rund-m) 0 0; box-shadow: 0 -12px 32px rgba(15, 23, 42, .2); transform: translateY(100%); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .team-kal-raster, .kal-detail { transition: none; } }



.kal-detail h3.kal-detail-titel { text-transform: none; letter-spacing: 0; color: var(--text); font-size: var(--gr-titel); font-weight: 700; }
.team-kal .team-termin-titel { overflow-wrap: break-word; hyphens: auto; }



.j-badge-person { flex-wrap: nowrap; }
.j-badge-person .j-badge-text { white-space: nowrap; }

.j-badge-klient { padding: 3px var(--a3); }


.tb-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--a3); }
.tb-leiste-rechts { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--a2); margin-left: auto; }
.tb-zeitraum { margin: 0; }

.tb-doku-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--a2); }
.tb-doku-link { display: grid; grid-template-columns: 8.5rem minmax(11rem, 14rem) minmax(0, 1fr) auto; 
  align-items: center; gap: var(--a3) var(--a4); padding: var(--a3); border: 1px solid var(--linie);
  border-radius: var(--rund-m); background: var(--karte); color: var(--text); text-decoration: none;
  transition: border-color .2s, background .2s, box-shadow .2s; }
a.tb-doku-link:hover { border-color: var(--primaer); background: var(--j-nacht-50); color: var(--text); }
.tb-doku-offen a.tb-doku-link { border-style: dashed; }
.tb-doku-eigen .tb-doku-link { box-shadow: inset 3px 0 0 var(--akzent); }
.tb-doku-gesperrt { opacity: .65; }
.tb-doku-schicht, .tb-doku-wer { min-width: 0; display: flex; }
.tb-doku-klienten { display: flex; flex-wrap: wrap; gap: var(--a2); min-width: 0; }
@container seite (max-width: 44rem) { .tb-doku-link { grid-template-columns: minmax(0, 1fr); gap: var(--a2); } .tb-doku-wer, .tb-doku-klienten { display: flex; flex-wrap: wrap; gap: var(--a2); } }


.tb-zuo { padding: var(--a4) var(--a5, 1.5rem); }
.tb-zuordnung-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--a4) var(--a5, 1.5rem); margin: 0; }
.tb-zuordnung-raster > div { display: grid; gap: var(--a2); align-content: start; min-width: 0; }
.tb-zuordnung-raster dt, .verf-kontingent-titel { font-size: var(--gr-etikett); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-leise); }
.tb-zuordnung-raster dd { margin: 0; display: flex; flex-wrap: wrap; gap: var(--a2); min-width: 0; }
.tb-zuordnung-fuss { margin: var(--a4) 0 0; padding-top: var(--a3); border-top: 1px solid var(--linie); }
.tb-feld { padding: var(--a4) var(--a5, 1.5rem); }
.tb-feld + .tb-feld { margin-top: var(--a4); }
.tb-feld .kachel-kopf { margin-bottom: var(--a2); }
.tb-feld-hilfe { margin: 0 0 var(--a3); }
.tb-feld .tb-text { width: 100%; min-height: 8rem; line-height: 1.55; padding: var(--a3); }
.tb-form .tb-fuss { margin-top: var(--a4); }
@container seite (max-width: 44rem) { .tb-zuo, .tb-feld { padding: var(--a3); } }


.akt-raster4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--a5); }
.akt-raster4 > .kachel { margin: 0; min-width: 0; display: flex; flex-direction: column; }
.akt-raster4 .team-unter:first-of-type { margin-top: 0; }
@container seite (max-width: 44rem) { .akt-raster4 { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: var(--a4); } }


.akt-kachel .kachel-kopf { align-items: flex-start; }
.akt-rund { margin-left: auto; display: inline-flex; flex-direction: column; align-items: center; gap: 3px; min-width: 3.5rem;
  color: var(--text-leise); text-decoration: none; font-size: var(--gr-etikett); font-weight: 600; line-height: 1.1; }
.akt-rund-kreis { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem;
  border-radius: 50%; border: 1px solid var(--linie); background: var(--j-nacht-50); color: var(--primaer);
  transition: border-color .15s, box-shadow .15s, background .15s; }
.akt-rund-kreis .symbol { width: 18px; height: 18px; color: inherit; }
.akt-rund:hover, .akt-rund:focus-visible { color: var(--primaer); outline: none; }
.akt-rund:hover .akt-rund-kreis, .akt-rund:focus-visible .akt-rund-kreis { border-color: var(--akzent); box-shadow: 0 0 0 2px var(--akzent); background: var(--karte); }

.akt-muell-fuss { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--a1) var(--a2);
  padding: var(--a3) var(--a1) 0; border-top: 1px dashed var(--linie); color: var(--text-leise); font-size: var(--gr-klein); text-decoration: none; }


.tb-zeitraum { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a2); min-width: 0; }
.monatsnavi .tb-zeitraum { width: 100%; }
.jahr-wahl { position: relative; }
.jahr-wahl-knopf { display: inline-flex; align-items: center; gap: 4px; padding: var(--a1) var(--a2) var(--a1) var(--a3); border: 1px solid var(--linie);
  border-radius: var(--rund-voll); background: var(--karte); font: inherit; font-weight: 700; font-size: var(--gr-mittel); color: var(--text); cursor: pointer; }
.jahr-wahl-knopf svg { color: var(--text-leise); transition: transform .15s ease; }
.jahr-wahl-knopf:hover { border-color: var(--primaer); } .jahr-wahl-knopf:hover svg { color: var(--primaer); }
.jahr-wahl.offen .jahr-wahl-knopf svg { transform: rotate(180deg); color: var(--primaer); }
.jahr-wahl-menue { left: 0; min-width: 8rem; }
.tb-monate { align-items: center; }
.tb-monate-trenner { width: 1px; align-self: stretch; margin: 4px 2px; background: var(--linie); }
.tb-monat-zukunft { padding: var(--a1) var(--a3); font-weight: 600; font-size: var(--gr-klein); color: var(--j-stein-300); cursor: default; }
@container seite (max-width: 44rem) { .tb-monate { display: grid; grid-template-columns: repeat(6, 1fr); border-radius: var(--rund-m); width: 100%; } .tb-monate a, .tb-monat-zukunft { text-align: center; padding: var(--a1) 0; } .tb-monate .tb-14 { grid-column: 1 / -1; } .tb-monate-trenner { display: none; } }


.akt-monate { display: grid; gap: var(--a2); margin-bottom: var(--a3); }
.akt-monate .akt-liste { margin: 0; }
.akt-monate .hinweis { margin: 0 0 var(--a1); }
.akt-datum-heute { background: var(--primaer); color: var(--auf-primaer); }
.akt-datum-heute small { color: var(--j-nacht-100); }


.geb-mit-alter { display: inline-flex; align-items: center; gap: var(--a2); white-space: nowrap; }
.tabelle-klienten td.zahl .geb-mit-alter { justify-content: flex-end; }


.konto-spalte { display: grid; gap: var(--a4); max-width: 44rem; }
.konto-spalte .kachel { margin: 0; }
.felder-einspaltig { grid-template-columns: minmax(0, 1fr) !important; max-width: 28rem; }
.feld-regeln li[data-gleich].erfuellt { color: var(--j-ok-fg); }
.ansicht-wahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--a3); }
.ansicht-karte { display: flex; flex-direction: column; gap: var(--a2); padding: var(--a2); border: 1px solid var(--linie); border-radius: var(--rund-m);
  cursor: pointer; background: var(--karte); }
.ansicht-karte input { position: absolute; opacity: 0; pointer-events: none; }
.ansicht-karte:has(input:checked) { border-color: var(--primaer); box-shadow: 0 0 0 2px var(--primaer); }
.ansicht-text { display: flex; align-items: center; gap: var(--a1); font-weight: 600; }
.ansicht-text .symbol { width: 14px; height: 14px; color: var(--primaer); visibility: hidden; }
.ansicht-karte:has(input:checked) .ansicht-text .symbol { visibility: visible; }
.ansicht-bild { position: relative; display: block; height: 4.5rem; border-radius: var(--rund-s); overflow: hidden; border: 1px solid var(--linie); }
.ansicht-bild i { position: absolute; inset: 0 0 auto; height: 1rem; background: #1b2750; border-bottom: 2px solid #e39a2d; }
.ansicht-bild b { position: absolute; left: .5rem; right: .5rem; height: 1.1rem; border-radius: 4px; }
.ansicht-bild b:nth-of-type(1) { top: 1.6rem; } .ansicht-bild b:nth-of-type(2) { top: 3rem; right: 2.5rem; }
.ansicht-bild-hell { background: #f7f7f9; } .ansicht-bild-hell b { background: var(--j-weiss); border: 1px solid #e1e2e7; }
.ansicht-bild-dunkel { background: #10131b; } .ansicht-bild-dunkel b { background: #1a1f2c; border: 1px solid #2c3345; }
.ansicht-bild-system { background: linear-gradient(135deg, #f7f7f9 50%, #10131b 50%); }
.ansicht-bild-system b { background: linear-gradient(135deg, var(--j-weiss) 50%, #1a1f2c 50%); border: 1px solid #8a8f9c; }


:root[data-ansicht="dunkel"] {
  color-scheme: dark;
  --j-stein-900: #e7e9ef; --j-stein-700: #c4c8d3; --j-stein-500: #9aa1b1; --j-stein-300: #465067;
  --j-stein-200: #2d3445; --j-stein-100: #242a39; --j-stein-50: #181c27;
  --j-nacht-50: #222a44; --j-nacht-100: #2d3860; --j-bernstein-100: #3a2d14; --j-bernstein-200: #4a3919;
  --j-ok-bg: #15301f;     --j-ok-fg: #7ed69c;
  --j-warn-bg: #362b0c;   --j-warn-fg: #f1c761;
  --j-fehler-bg: #3b1917; --j-fehler-fg: #f3968f;
  --j-info-bg: #122c45;   --j-info-fg: #8cc4f0;
  --flaeche: #10131b; --karte: #1a1f2c; --text: var(--j-stein-900); --text-leise: var(--j-stein-500); --linie: var(--j-stein-200);
  --primaer: #9fb2f2; --primaer-hover: #bccaf7; --auf-primaer: #111a33;
  --schatten: 0 1px 2px rgba(0, 0, 0, .45); --schatten-hoch: 0 2px 10px rgba(0, 0, 0, .5);
  --schatten-dialog: 0 10px 30px rgba(0, 0, 0, .6); --schleier: rgba(0, 0, 0, .6);
}
@media (prefers-color-scheme: dark) {
  :root[data-ansicht="system"] {
    color-scheme: dark;
    --j-stein-900: #e7e9ef; --j-stein-700: #c4c8d3; --j-stein-500: #9aa1b1; --j-stein-300: #465067;
    --j-stein-200: #2d3445; --j-stein-100: #242a39; --j-stein-50: #181c27;
    --j-nacht-50: #222a44; --j-nacht-100: #2d3860; --j-bernstein-100: #3a2d14; --j-bernstein-200: #4a3919;
    --j-ok-bg: #15301f;     --j-ok-fg: #7ed69c;
    --j-warn-bg: #362b0c;   --j-warn-fg: #f1c761;
    --j-fehler-bg: #3b1917; --j-fehler-fg: #f3968f;
    --j-info-bg: #122c45;   --j-info-fg: #8cc4f0;
    --flaeche: #10131b; --karte: #1a1f2c; --text: var(--j-stein-900); --text-leise: var(--j-stein-500); --linie: var(--j-stein-200);
    --primaer: #9fb2f2; --primaer-hover: #bccaf7; --auf-primaer: #111a33;
    --schatten: 0 1px 2px rgba(0, 0, 0, .45); --schatten-hoch: 0 2px 10px rgba(0, 0, 0, .5);
    --schatten-dialog: 0 10px 30px rgba(0, 0, 0, .6); --schleier: rgba(0, 0, 0, .6);
  }
}

.kopf, .ansicht-bild { --j-nacht-100: #e6eaf5; --j-nacht-50: #f2f4fa; }
:root[data-ansicht="dunkel"] .kopf { --j-stein-50: #f7f7f9; }

:root[data-ansicht="dunkel"] .meldung { border-color: color-mix(in srgb, currentColor 35%, transparent); }
:root[data-ansicht="dunkel"] .kalender-tag:has(.vt-unverfuegbar) { background: color-mix(in srgb, var(--j-fehler-bg) 60%, var(--karte)); }
:root[data-ansicht="dunkel"] .kalender-tag:has(.vt-urlaub) { background: color-mix(in srgb, var(--j-info-bg) 60%, var(--karte)); }
:root[data-ansicht="dunkel"] .kalender-tag:has(.vt-verfuegbar) { background: color-mix(in srgb, var(--j-ok-bg) 60%, var(--karte)); }
:root[data-ansicht="dunkel"] :is(.chip-wahl input:checked + span small, .akt-datum-heute small) { color: var(--auf-primaer); }
:root[data-ansicht="dunkel"] .akte-filter a[aria-current="page"] .reiter-zahl { background: rgba(0, 0, 0, .2); }
:root[data-ansicht="dunkel"] img { opacity: .95; }
@media (prefers-color-scheme: dark) {
  :root[data-ansicht="system"] .meldung { border-color: color-mix(in srgb, currentColor 35%, transparent); }
  :root[data-ansicht="system"] .kalender-tag:has(.vt-unverfuegbar) { background: color-mix(in srgb, var(--j-fehler-bg) 60%, var(--karte)); }
  :root[data-ansicht="system"] .kalender-tag:has(.vt-urlaub) { background: color-mix(in srgb, var(--j-info-bg) 60%, var(--karte)); }
  :root[data-ansicht="system"] .kalender-tag:has(.vt-verfuegbar) { background: color-mix(in srgb, var(--j-ok-bg) 60%, var(--karte)); }
  :root[data-ansicht="system"] :is(.chip-wahl input:checked + span small, .akt-datum-heute small) { color: var(--auf-primaer); }
}



.verwaltung-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a3); margin: 0 0 var(--a4); }
.verwaltung-leiste .aktionen { margin-left: auto; display: flex; gap: var(--a2); }
.adresse-menue:hover, .adresse-menue:focus-within { z-index: 30; }



.akt-monat.team-unter { margin: 0; }
.akt-dienst { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); align-items: start; gap: var(--a2); }
.akt-dienst > .j-badge-schicht { width: 100%; }
.akt-dienst-personen, .akt-personen { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: var(--a2); min-width: 0; }
.akt-dienst-personen .j-badge, .akt-personen .j-badge { width: 100%; min-width: 0; }
.akt-personen { margin-bottom: var(--a1); }
.ruecksprung-team { margin-bottom: var(--a3); }


@container seite (max-width: 34rem) { .akt-dienst { grid-template-columns: 3.25rem minmax(0, 1fr); gap: var(--a2); } .akt-dienst > .j-badge-schicht-kurz { flex-direction: column; gap: 2px; padding: 0; border: 0; background: none; min-height: 0; } .akt-dienst > .j-badge-schicht-kurz .j-badge-text { white-space: normal; text-align: center; font-size: var(--gr-mini); line-height: 1.15;
    color: var(--text-leise); overflow: visible; } .akt-dienst > .j-badge-schicht-kurz .j-badge-text:has(.j-zeit-von) { display: grid; justify-items: center; row-gap: 1px;
    padding: 1px 0 1px 5px; border-left: 1.5px solid var(--text-leise); } .akt-dienst > .j-badge-schicht-kurz .j-zeit-strich { display: none; } .akt-dienst > .j-badge-schicht-kurz .j-badge-code { margin-top: calc((2.25rem - 1.75rem) / 2); } .akt-dienst-personen { grid-template-columns: minmax(0, 1fr); gap: var(--a1); } .akt-dienst + .akt-dienst { padding-top: var(--a1); border-top: 1px dashed var(--linie); } }
.j-badge-schicht-kurz .j-badge-text { font-variant-numeric: tabular-nums; font-weight: 600; }


:root[data-marke="gleis9"] {
  --j-nacht-900: #033a41; --j-nacht-800: #054d56; --j-nacht-700: #076571; --j-nacht-600: #0a7f8d;
  --j-nacht-100: #d5ecee; --j-nacht-50: #eaf5f6;
  --j-bernstein-600: #c1780a; --j-bernstein-500: #f5bd60; --j-bernstein-100: #fdf1dc;
  --fokus: #c1780a;
}
:root[data-marke="gleis9"][data-ansicht="dunkel"] { --primaer: #7fd0d9; --primaer-hover: #a6e0e6; --auf-primaer: #033a41;
  --j-nacht-50: #15343a; --j-nacht-100: #1d4850; --j-bernstein-100: #3a2d14; }
@media (prefers-color-scheme: dark) {
  :root[data-marke="gleis9"][data-ansicht="system"] { --primaer: #7fd0d9; --primaer-hover: #a6e0e6; --auf-primaer: #033a41;
    --j-nacht-50: #15343a; --j-nacht-100: #1d4850; --j-bernstein-100: #3a2d14; }
}
:root[data-marke="gleis9"] .kopf { --j-nacht-100: #d5ecee; --j-nacht-50: #eaf5f6; }
.kopf-marke .logo-marke { width: auto; height: 34px; }
.kopf-marke-text small { opacity: .85; }
@container seite (max-width: 44rem) { .kopf-marke .logo-marke { height: 28px; } .kopf-marke-text { display: none; } }
.branding-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: var(--a4); }
.branding-karte { display: flex; flex-direction: column; gap: var(--a3); cursor: pointer; position: relative; margin: 0; }
.branding-karte input { position: absolute; top: var(--a4); right: var(--a4); width: 1.1rem; height: 1.1rem; accent-color: var(--primaer); }
.branding-karte:has(input:checked) { outline: 2px solid var(--primaer); outline-offset: -1px; }
.branding-vorschau { display: flex; align-items: center; justify-content: center; gap: var(--a2); height: 5.5rem; border-radius: var(--rund-s);
  border-bottom: 3px solid; }
.branding-vorschau img { max-height: 3.75rem; max-width: 80%; }
.branding-jupiter { background: #1b2750; border-color: #e39a2d; color: var(--j-weiss); letter-spacing: .15em; }
.branding-jupiter img { height: 2.5rem; }
.branding-gleis9 { background: #054d56; border-color: #f5bd60; }
.branding-text { display: flex; flex-direction: column; }
.branding-text small { color: var(--text-leise); }
.branding-farben { display: flex; gap: 4px; }
.branding-farben i, .branding-liste i { display: inline-block; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1px solid var(--linie); }
.branding-liste { display: grid; grid-template-columns: 1fr 1fr; gap: var(--a1) var(--a3); font-size: var(--gr-klein); color: var(--text-leise); }
.branding-liste span { display: flex; align-items: center; gap: var(--a2); }
.branding-liste i { width: .9rem; height: .9rem; }
.branding-farben { display: none; }
.branding-karte:first-child .branding-farben { display: flex; }
.branding-fuss { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--a3); flex-wrap: wrap; }



.akt-monate > .chips { margin-bottom: var(--a1); }


@container seite (max-width: 44rem) { .tb-leiste .tb-zeitraum, .tb-leiste .tb-monate { width: 100%; } .tb-leiste .tb-leiste-rechts:empty { display: none; } }
.tb-zuordnung-raster > div { justify-items: center; text-align: center; }
.tb-zuordnung-raster dd { justify-content: center; }


.akte-raster4 { grid-auto-rows: auto; }
.akte-raster4 .werte { margin: 0; }


.kal-tagliste { margin-top: var(--a4); }
.kal-tagliste-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--a2); margin-bottom: var(--a2); }
.kal-tagliste-kopf .akt-monat { flex: 1; }
.kal-tagliste-termine { display: grid; gap: var(--a2); }
.kal-tagliste-termine .team-termin { padding: var(--a2) var(--a3); font-size: var(--gr-text); }
@container seite (max-width: 44rem) { .team-kal .kalender { gap: 3px; margin-bottom: 0; } .team-kal .kalender-kopf { font-size: var(--gr-etikett); } .team-kal .kalender-tag { min-height: 3.25rem; padding: 3px; gap: 2px; align-items: stretch; } .team-kal .kalender-tag .tag-nr { font-size: var(--gr-klein); text-align: center; } .team-kal .kalender-tag.heute .tag-nr { text-decoration: none; } .team-kal .kalender-tag.heute { border-color: var(--akzent); box-shadow: inset 0 0 0 1px var(--akzent); } .team-kal .kalender-tag.gewaehlt { background: var(--primaer); border-color: var(--primaer); box-shadow: none; } .team-kal .kalender-tag.gewaehlt .tag-nr { color: var(--auf-primaer); } .team-kal .kalender .team-kal-plus { display: none; } .team-kal .kalender .team-termin { height: 5px; min-height: 0; padding: 0; border: 0; border-radius: 3px; background: var(--farbe);
    font-size: 0; pointer-events: none; overflow: hidden; } .team-kal .kalender .team-termin > * { display: none; } .team-kal .kalender-tag.gewaehlt .team-termin { box-shadow: 0 0 0 1px var(--auf-primaer); } }


.design-raster { grid-auto-rows: auto; align-items: start; margin-top: var(--a4); }
.design-regel-titel { scroll-margin-top: 5rem; }
.design-regel { font-size: var(--gr-klein); line-height: 1.55; color: var(--text); margin: var(--a1) 0 var(--a3); }
.design-beispiel { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--a4); }
.design-beispiel .akt-rund { margin-left: 0; }

.design-vorschau { display: grid; gap: var(--a3); margin-bottom: var(--a4); }
.design-handy { container: seite / inline-size; max-width: 24.375rem; border: 1px solid var(--linie); border-radius: var(--rund); padding: var(--a3); }

.design-breit, .design-handy { background: var(--karte); }
.design-breit { border: 1px solid var(--linie); border-radius: var(--rund); padding: var(--a3); }
@container seite (max-width: 44rem) { .design-breit { display: none; } }

.baustein-id { display: inline-block; min-width: 2.1rem; padding: 1px var(--a1); border-radius: var(--rund-s); background: var(--primaer); color: var(--j-weiss);
  font-size: var(--gr-zusatz); font-weight: 700; line-height: 1.5; text-align: center; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.baustein-id-leise { background: var(--j-stein-300); }

.akt-monate:has(> .regel) { gap: 0; }
.regel { border-bottom: 1px solid var(--linie); scroll-margin-top: 5rem; }
.regel:last-child { border-bottom: 0; }
.regel > summary { list-style: none; cursor: pointer; display: flex; align-items: flex-start; gap: var(--a3); padding: var(--a2) 0; }
.regel-kopf { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: var(--gr-klein); }
.regel-kopf small { color: var(--text-leise); font-size: var(--gr-klein); }
.regel[open] .regel-kopf small { display: none; }
.regel > .design-regel { margin-top: 0; }

.stein-schritte { margin: 0 0 var(--a4); padding-left: 1.25rem; display: grid; gap: var(--a1); font-size: var(--gr-klein); }
.stein-sprung { display: flex; flex-wrap: wrap; gap: var(--a2); }
.stein-sprung a { display: inline-flex; align-items: center; gap: var(--a2); padding: var(--a1) var(--a3) var(--a1) var(--a1); border: 1px solid var(--linie);
  border-radius: var(--rund-voll); background: var(--karte); color: var(--text); text-decoration: none; font-size: var(--gr-klein); font-weight: 600; }
.stein-sprung a:hover { border-color: var(--primaer); }
.stein-sprung small { color: var(--text-leise); font-weight: 400; }
.stein-kategorie { margin-top: var(--a6); scroll-margin-top: 5rem; }
.stein-kat-titel { display: flex; align-items: center; gap: var(--a2); font-size: var(--gr-titel); margin: 0 0 var(--a3); }
.stein-kat-hinweis { margin: 0 0 var(--a3); }
.stein-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: var(--a4); align-items: start; }
.stein { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--a3); scroll-margin-top: 5rem; }
.stein-breit { grid-column: 1 / -1; }
.stein-kopf { display: flex; align-items: flex-start; gap: var(--a3); }
.stein-kopf .baustein-id { min-width: 2.75rem; padding: var(--a1); font-size: var(--gr-klein); }
.stein-kopf h3 { margin: 0; font-size: var(--gr-text); }
.stein-kopf p { margin: 2px 0 0; color: var(--text-leise); font-size: var(--gr-klein); }
.stein-beispiel { display: grid; gap: var(--a3); min-width: 0; padding: var(--a4); border-radius: var(--rund-m); background: var(--flaeche); }
.stein-reihe { display: flex; flex-wrap: wrap; gap: var(--a4); align-items: flex-start; }
.stein-reihe .akt-rund { margin-left: 0; }
.stein-wo { display: flex; align-items: center; gap: var(--a2); margin: 0; color: var(--text-leise); font-size: var(--gr-klein); }
.stein-wo svg { width: 1rem; height: 1rem; flex: none; }
.stein-technik { border-top: 1px solid var(--linie); padding-top: var(--a2); font-size: var(--gr-klein); }
.stein-technik > summary { cursor: pointer; color: var(--primaer); font-weight: 600; }
.stein-technik-text p { margin: var(--a2) 0 0; }
.stein-ohne { margin-top: var(--a4); }
.stein-ohne ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: var(--a2) var(--a5); }
.stein-ohne li { display: flex; align-items: flex-start; gap: var(--a2); font-size: var(--gr-klein); scroll-margin-top: 5rem; }
.stein-ohne small { display: block; color: var(--text-leise); }
@container seite (max-width: 44rem) { .stein-beispiel { padding: var(--a3); } }
.stein-datum { min-height: 21rem; }
.stein-datum .hinweis { margin: var(--a2) 0 0; }
.stein-beispiel .ohne-rand { margin: 0; }
.stein-teil { display: grid; gap: var(--a2); min-width: 0; }
.stein-teil + .stein-teil { padding-top: var(--a3); border-top: 1px dashed var(--linie); }
.stein-teil-titel { margin: 0; font-size: var(--gr-etikett); font-weight: 600; color: var(--text-leise); }
.kachel[id] { scroll-margin-top: 5rem; }
.design-mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a2); max-width: 20rem; }
.design-mini span { border: 1px solid var(--linie); border-radius: var(--rund); padding: var(--a2); font-weight: 600; font-size: var(--gr-klein); color: var(--text-leise); background: var(--flaeche); }
.akt-rund-aus { cursor: default; opacity: .45; }
.akt-rund-aus:hover .akt-rund-kreis { border-color: var(--linie); box-shadow: none; background: inherit; }



.akt-rund-menue { position: relative; margin-left: 0; }
.akt-rund-menue > summary { list-style: none; display: inline-flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; }
.akt-rund-menue > summary::-webkit-details-marker { display: none; }
.akt-rund-menue > summary:focus-visible { outline: none; }
.akt-rund-menue > summary:focus-visible .akt-rund-kreis, .akt-rund-menue[open] .akt-rund-kreis { border-color: var(--akzent); box-shadow: 0 0 0 2px var(--akzent); background: var(--karte); }
.akt-rund-liste { position: absolute; z-index: 70; top: calc(100% + 6px); right: 0; min-width: 11rem; display: grid; gap: 2px; padding: var(--a1);
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund-m); box-shadow: 0 10px 28px rgba(15, 20, 40, .18); }
.akt-rund-liste a, .akt-rund-liste button { display: block; width: 100%; padding: var(--a2) var(--a3); border: 0; border-radius: var(--rund-s); background: none;
  font: inherit; font-size: var(--gr-klein); font-weight: 600; text-align: left; color: var(--text); text-decoration: none; cursor: pointer; }
.akt-rund-liste a:hover, .akt-rund-liste button:hover, .akt-rund-liste a:focus-visible, .akt-rund-liste button:focus-visible { background: var(--j-nacht-50); color: var(--primaer); outline: none; }
.akt-rund-liste form { margin: 0; }
.akt-rund-gefahr .akt-rund-kreis, a.akt-rund.akt-rund-gefahr .akt-rund-kreis { color: var(--j-fehler-fg); }
.akt-rund-gefahr .akt-rund-liste button:hover { color: var(--j-fehler-fg); background: var(--j-fehler-bg); }
button.akt-rund { border: 0; background: none; padding: 0; font: inherit; font-size: var(--gr-etikett); font-weight: 600; line-height: 1.1; cursor: pointer; margin-left: 0; }



.tb-doku-kachel { padding-top: var(--a3); }
.tb-doku-kachel .tb-doku-tag { display: flex; align-items: center; gap: var(--a2); margin-top: var(--a4); scroll-margin-top: var(--a5, 1.5rem); }
.tb-doku-kachel .tb-doku-tag:first-child { margin-top: 0; }
.tb-doku-tag > span:first-child { color: var(--text); font-size: var(--gr-klein); }
.tb-doku-heute { padding: 1px 8px; border-radius: var(--rund-voll); background: var(--j-nacht-50); color: var(--primaer); font-size: var(--gr-mini); }
.tb-doku-zaehler { order: 9; color: var(--text-leise); font-weight: 600; letter-spacing: 0; }
.tb-doku-kachel .tb-doku-liste { gap: 0; }
.tb-doku-kachel .tb-doku { display: grid; grid-template-columns: minmax(0, 1fr) 2.25rem; align-items: center; border-bottom: 1px solid var(--linie); }
.tb-doku-kachel .tb-doku:last-child { border-bottom: 0; }
.tb-doku-kachel .tb-doku-link { display: grid; grid-template-columns: 1.5rem 8.5rem minmax(10rem, 13rem) minmax(0, 1fr) auto; align-items: center;
  gap: var(--a3); padding: 6px var(--a2); border: 0; border-radius: var(--rund-s); background: none; box-shadow: none; color: var(--text); text-decoration: none; }
.tb-doku-kachel a.tb-doku-link:hover { background: var(--j-nacht-50); }
.tb-doku-kachel .tb-doku-offen a.tb-doku-link { border: 0; }
.tb-doku-kachel .tb-doku-eigen .tb-doku-link { box-shadow: inset 3px 0 0 var(--akzent); }
.tb-doku-status { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  border: 1.5px dashed var(--j-stein-300, #c7cbd6); color: var(--text-leise); }
.tb-doku-status .symbol { width: 13px; height: 13px; margin: 0; }
.tb-doku-abgeschlossen .tb-doku-status { border: 0; background: var(--j-ok-bg); color: var(--j-ok-fg); }
.tb-doku-entwurf .tb-doku-status { border: 0; background: var(--j-warn-bg); color: var(--j-warn-fg); }
.tb-doku-offen .tb-doku-status .symbol { opacity: 0; }
.tb-doku-offen a:hover .tb-doku-status .symbol { opacity: 1; }
.tb-doku-kachel .j-badge { min-height: 1.9rem; }
@container seite (max-width: 44rem) { .tb-doku-kachel .tb-doku { grid-template-columns: minmax(0, 1fr) 2.25rem; } .tb-doku-kachel .tb-doku-link { grid-template-columns: 1.5rem auto minmax(0, 1fr); gap: var(--a1) var(--a2); padding: var(--a2) var(--a1); } .tb-doku-kachel .tb-doku-klienten { grid-column: 2 / -1; } .tb-doku-kachel .tb-doku-klienten:empty { display: none; } .tb-doku-kachel .tb-doku-wer .j-badge { max-width: 100%; } }


.lese { margin: 0; min-width: 0; }
.lese-leiste { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--a3); margin-bottom: var(--a4); }
.lese-aktionen { display: inline-flex; gap: var(--a3); }
.lese-aktionen .akt-rund { margin-left: 0; }
.lese-teil { margin: 0 0 var(--a5); }
.lese-teil h2 { margin: 0 0 var(--a2); font-size: var(--gr-klein); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-leise);
  display: flex; align-items: center; gap: var(--a2); }
.lese-teil h2::after { content: ""; flex: 1; height: 1px; background: var(--linie); }
.lese-teil h2 .j-badge { text-transform: none; letter-spacing: 0; }
.lese-text { margin: 0; white-space: pre-line; font-size: var(--gr-lese); line-height: 1.7; max-width: 68ch; overflow-wrap: break-word; hyphens: auto; }
.lese-leer { margin: 0; color: var(--text-leise); font-style: italic; }
@container seite (max-width: 44rem) { .lese-text { font-size: var(--gr-mittel); line-height: 1.65; } .lese-leiste .ruecksprung { flex: 1; } }
@media print { .lese-leiste { display: none; } .lese { max-width: none; } }


.tk-leiste .monatsnavi-zeile { flex-direction: row; align-items: flex-start; gap: var(--a3); }
.tk-leiste .monatsnavi-zeile > .monatsnavi { flex: 1; min-width: 0; }
.tk-leiste .monatsnavi-aktionen { flex: none; justify-content: flex-end; }
.tk-leiste .monatsnavi-zeile { width: 100%; }
.tk-leiste .monatsnavi-aktionen { margin-left: auto; }   
.dpl-kal .kalender { gap: 4px; margin-bottom: var(--a3); }
.dpl-kal .kalender-tag { min-height: 0; padding: 4px 5px 5px; gap: 2px; cursor: default; }
.dpl-kal .kalender-tag .tag-nr { font-size: var(--gr-klein); color: var(--text-leise); }
.dpl-kal .kalender-tag.heute { border-color: var(--akzent); box-shadow: inset 0 0 0 1px var(--akzent); }
.dpl-kal .kalender-tag.heute .tag-nr { color: var(--primaer); }
.dpl-tag { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.dpl-dienst { display: flex; align-items: center; gap: 4px; min-width: 0; padding: 2px 4px 2px 2px; border-radius: var(--rund-voll); font-size: var(--gr-zusatz); line-height: 1.2; }
.dpl-code { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.35rem; height: 1.35rem; border-radius: 50%;
  background: var(--primaer); color: var(--auf-primaer); font-size: var(--gr-winzig); font-weight: 700; letter-spacing: .02em; }
.dpl-zeit { flex: none; color: var(--text-leise); font-size: var(--gr-etikett); }
.dpl-wer { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.dpl-dienst.frei .dpl-code { background: none; color: var(--text-leise); box-shadow: inset 0 0 0 1px var(--linie); }
.dpl-dienst.frei .dpl-wer { font-weight: 400; color: var(--text-leise); font-style: italic; }
.dpl-dienst.eigen { background: var(--j-bernstein-100); box-shadow: inset 0 0 0 1px var(--j-bernstein-500); }
.dpl-dienst.eigen .dpl-code { background: var(--akzent); color: var(--j-nacht-900, #111a3d); }
.dpl-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a1) var(--a4); margin: 0; }
.dpl-legende { display: inline-flex; align-items: center; gap: 5px; }
.dpl-eigen-punkt { width: .85rem; height: .85rem; border-radius: 50%; background: var(--j-bernstein-100); box-shadow: inset 0 0 0 1px var(--j-bernstein-500); }
.dpl-stand { margin-left: auto; }
@container seite (max-width: 64rem) { .dpl-zeit { display: none; } }
@container seite (max-width: 44rem) { .dpl-kal .kalender { grid-template-columns: minmax(0, 1fr); gap: 0; } .dpl-kal .kalender-kopf, .dpl-kal .kalender-leer { display: none; } .dpl-kal .kalender-tag { flex-direction: row; align-items: center; gap: var(--a2); padding: 6px 2px; border: 0; border-bottom: 1px solid var(--linie);
    border-radius: 0; background: none; } .dpl-kal .kalender-tag.heute { box-shadow: inset 3px 0 0 var(--akzent); border-color: var(--linie); padding-left: 8px; } .dpl-kal .kalender-tag .tag-nr { flex: none; width: 3.25rem; } .dpl-kal .tag-wt { display: inline; } .dpl-tag { flex: 1; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 4px; min-width: 0; } .dpl-zeit { display: none; } .dpl-stand { margin-left: 0; } }


.team-kal-kopfzeile { display: flex; align-items: flex-start; gap: var(--a3); margin-bottom: var(--a3); }
.team-kal-kopfzeile .monatsnavi { flex: 1; min-width: 0; margin-bottom: 0; }
.team-kal-kopfzeile .akt-rund { margin-left: auto; }
.team-kal .kalender { gap: 4px; margin-bottom: 0; }
.team-kal .kalender-tag { min-height: 5.25rem; padding: 5px; gap: 3px; }
.team-kal .kalender-tag .tag-nr { font-size: var(--gr-klein); color: var(--text-leise); }
.team-kal .kalender-tag.heute { border-color: var(--akzent); box-shadow: inset 0 0 0 1px var(--akzent); }
.team-kal .kalender-tag.heute .tag-nr { color: var(--primaer); text-decoration: none; }
.team-kal .team-termin { border-radius: var(--rund-s); padding: 3px 6px; }
.team-kal-raster { align-items: stretch; }
.team-kal-raster.mit-detail > .kal-detail { align-self: stretch; }
.kal-detail { display: flex; flex-direction: column; }
.kal-detail-oben { display: flex; align-items: flex-start; gap: var(--a3); }
.kal-detail-oben .kal-detail-titel { flex: 1; margin: var(--a1) 0 0; }
.kal-detail-knoepfe { display: inline-flex; gap: var(--a2); }
.kal-detail-knoepfe .akt-rund { margin-left: 0; min-width: 3rem; }
.kal-detail-art { display: flex; align-items: center; justify-content: space-between; gap: var(--a2); margin-bottom: var(--a2); }
.kal-detail-liste { margin-top: var(--a4); }
.kal-detail .kal-pop-von { margin-top: auto; padding-top: var(--a3); border-top: 1px solid var(--linie); }
@container seite (max-width: 44rem) { .team-kal .kalender-tag { min-height: 3.25rem; padding: 3px; } }
.kal-detail-loeschen { margin: 0; }


@container seite (max-width: 44rem) { .tb-doku-kachel .j-zeit-strich, .tb-doku-kachel .j-zeit-bis { display: none; } .tb-doku-kachel .tb-doku-link { grid-template-columns: 1.5rem auto minmax(0, 1fr); } }


.lese-flaeche { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem); gap: var(--a5); align-items: start; }
.lese-flaeche .lese { padding: var(--a5) var(--a6, 2.5rem); }
.lese-seite { margin: 0; position: sticky; top: var(--a4); }
.lese-seite .akt-monat:first-child { margin-top: 0; }
.lese-angaben { display: grid; gap: var(--a2); margin: 0 0 var(--a4); }
.lese-angaben > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--a2); align-items: center; min-width: 0; }
.lese-angaben dt { font-size: var(--gr-klein); color: var(--text-leise); }
.lese-angaben dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.lese-angaben dd .symbol { width: 14px; height: 14px; color: var(--j-ok-fg); vertical-align: -2px; }
.lese-text { max-width: 72ch; }
.tb-hash { font-size: var(--gr-zusatz); word-break: break-all; line-height: 1.5; }
.tb-details { margin-top: var(--a4); }
.tb-details .lese-angaben > div { grid-template-columns: 6.5rem minmax(0, 1fr); }
.tb-details-kopf { margin-bottom: 0; }
.tb-details-kopf h1 { margin: 0; }
.tb-leiste-rechts .akt-rund { margin-left: 0; }

.tb-doku-kachel .tb-doku { grid-template-columns: minmax(0, 1fr); }
.tb-doku-kachel .tb-doku-link { grid-template-columns: 1.5rem 8.5rem minmax(10rem, 13rem) minmax(0, 1fr); }
.tb-doku-offen .tb-doku-status .symbol { opacity: 1; }
.tb-doku-offen a .tb-doku-status { border-style: dashed; color: var(--akzent); }
.tb-doku-offen .tb-doku-gesperrt .tb-doku-status { border-color: transparent; }
@container seite (max-width: 64rem) { .lese-flaeche { grid-template-columns: minmax(0, 1fr); } .lese-seite { position: static; order: -1; } .lese-seite .lese-angaben { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--a2) var(--a4); } }
@container seite (max-width: 44rem) { .lese-flaeche { gap: var(--a3); } .lese-flaeche .lese { padding: var(--a4); } .lese-seite .lese-angaben { grid-template-columns: minmax(0, 1fr); } .tb-doku-kachel .tb-doku { grid-template-columns: minmax(0, 1fr); } .tb-doku-kachel .tb-doku-link { grid-template-columns: 1.5rem auto minmax(0, 1fr); } }
.akt-raster4.tb-details { grid-auto-rows: auto; align-items: start; }
@container seite (max-width: 44rem) { .lese-seite { order: 0; } .tb-leiste { position: relative; } .tb-leiste .tb-leiste-rechts { position: absolute; top: 0; right: 0; margin: 0; } }


.kal-form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.kal-form[hidden], .kal-detail-inhalt[hidden] { display: none; }
.kal-detail-inhalt { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.kal-form-titel { display: block; margin: var(--a1) 0 0; }
.kal-form-titel input { width: 100%; font-size: var(--gr-titel); font-weight: 700; padding: var(--a1) 0; border: 0;
  border-bottom: 2px solid var(--linie); border-radius: 0; background: none; color: var(--text); }
.kal-form-titel input:focus { outline: none; border-bottom-color: var(--akzent); }
.kal-form-titel input::placeholder { font-weight: 400; color: var(--text-leise); }
.kal-form .kal-serie-hinweis { margin: var(--a3) 0 0; }
.kal-form-liste > div > div { min-width: 0; }
.kal-form-sym { color: var(--text-leise); padding-top: 1.55rem; }
.kal-form-sym .symbol { width: 16px; height: 16px; }
.kal-form-wann { display: grid; gap: var(--a2); }
.kal-form-wann .feld, .kal-form .ort-feld { margin: 0; }
.kal-form-liste > .kal-form-voll { grid-template-columns: none; display: flex; flex-direction: column; gap: 4px; margin: 0; }
.kal-form-liste > .kal-form-voll .kal-detail-dt { font-size: var(--gr-etikett); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-leise); }
fieldset.kal-form-personen { border: 0; padding: 0; min-width: 0; }
fieldset.kal-form-personen legend { padding: 0; margin-bottom: var(--a1); }
.kal-form-personen .hinweis:empty { display: none; }
.kal-form textarea { resize: vertical; }
.kal-form-fuss { display: flex; justify-content: flex-end; gap: var(--a2); margin-top: auto; padding-top: var(--a3); border-top: 1px solid var(--linie); }
.kal-form-liste { margin-bottom: var(--a4); }
.team-kal-raster.mit-detail { grid-template-columns: minmax(0, 1fr) 21rem; }
.team-kal-schreiben .kalender .kalender-tag { cursor: pointer; }




.kal-griff { display: none; }
.kal-schleier { position: fixed; inset: 0; z-index: 59; background: rgba(15, 20, 40, .28); animation: metis-rein .3s var(--metis-kurve, ease); }
.kal-schleier[hidden] { display: none; }
html.kal-sperre, html.kal-sperre body { overflow: hidden; overscroll-behavior: none; }
@container seite (max-width: 64rem) { .kal-griff { display: block; position: sticky; top: calc(-1 * var(--a4)); z-index: 2; flex: none; height: 1.75rem;
    margin: calc(-1 * var(--a4)) calc(-1 * var(--a4)) var(--a1); background: var(--karte); touch-action: none; cursor: grab; } .kal-griff::before { content: ""; position: absolute; left: 50%; top: .7rem; width: 2.5rem; height: 4px; margin-left: -1.25rem;
    border-radius: var(--rund-voll); background: var(--j-stein-300, #cbd5e1); } .kal-detail { max-height: 85vh; overscroll-behavior: contain; padding-bottom: calc(var(--a4) + env(safe-area-inset-bottom)); } .kal-form-fuss { position: sticky; bottom: calc(-1 * var(--a4) - env(safe-area-inset-bottom)); background: var(--karte); padding-bottom: var(--a2); } }
@container seite (max-width: 44rem) { .kal-tagliste-kopf .knopf { min-height: 2.5rem; } }
@container seite (min-width: 64.01rem) { .team-kal-raster.mit-detail > .kal-detail { contain: size; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 0; } .kal-form-fuss { position: sticky; bottom: 0; background: var(--karte); padding-bottom: var(--a4); } }


.muell-hinweis { --mh: 1.5rem; display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--a1) var(--a2); min-height: var(--mh);
  color: var(--text); text-decoration: none; font-size: var(--gr-klein); line-height: 1; }
.muell-hinweis:hover .muell-hinweis-text { text-decoration: underline; text-underline-offset: 3px; }
.muell-marke { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: var(--mh); height: var(--mh); border-radius: 50%; background: var(--j-nacht-50); color: var(--primaer); }
.muell-marke .symbol { width: 13px; height: 13px; margin: 0; }
.muell-marke-punkt { position: absolute; top: -4px; right: -5px; display: inline-flex; align-items: center; justify-content: center;
  width: 13px; height: 13px; border-radius: 50%; background: var(--j-fehler-fg); color: var(--j-weiss); font-size: var(--gr-mini); font-weight: 800;
  line-height: 1; box-shadow: 0 0 0 2px var(--karte); }
.muell-hinweis-text { font-weight: 700; display: inline-flex; align-items: center; height: var(--mh); white-space: nowrap; }
.muell-hinweis-tonnen { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.muell-hinweis .abfuhr { height: var(--mh); padding-top: 0; padding-bottom: 0; font-size: var(--gr-etikett); line-height: 1; box-sizing: border-box; }
.muell-hinweis-dringend .muell-marke { background: var(--j-fehler-bg); color: var(--j-fehler-fg); }
.muell-hinweis-dringend .muell-hinweis-text { color: var(--j-fehler-fg); }
.muell-hinweis-leise { color: var(--text-leise); }
.muell-hinweis-leise .muell-hinweis-text { font-weight: 600; }
.muell-hinweis-leise .muell-marke { background: var(--j-stein-50); color: var(--text-leise); }

.akt-muell-fuss { flex-direction: row; gap: var(--a2) var(--a4); }


.akt-muell-fuss .muell-hinweis { gap: var(--a2) var(--a3); }
.akt-muell-fuss .muell-hinweis-tonnen { gap: var(--a2); }
@container seite (max-width: 44rem) { .akt-muell-fuss .muell-hinweis { gap: var(--a1) var(--a2); } .akt-muell-fuss .muell-hinweis-tonnen { gap: 4px; } }



.kachel-kopf:has(> .akt-rund, > .akt-rund-menue) { align-items: flex-start; }
.kachel-kopf:has(> .akt-rund, > .akt-rund-menue) > h2 { margin: 0; line-height: 2.25rem; }

@container seite (max-width: 34rem) { .akt-dienst > .j-badge-schicht-kurz { align-items: center; } .akt-dienst > .j-badge-schicht-kurz .j-badge-text:has(.j-zeit-von) { padding: 1px 5px; border-right: 1.5px solid transparent; } }

button.akt-zeile { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
button.akt-zeile:hover { background: var(--j-nacht-50); }

.muell-hinweis { flex-wrap: nowrap; max-width: 100%; }
.muell-hinweis-tonnen { flex-wrap: nowrap; min-width: 0; }
@container seite (max-width: 44rem) { .muell-hinweis, .akt-muell-fuss .muell-hinweis { --mh: 1.375rem; gap: 6px; font-size: var(--gr-klein); } .muell-hinweis-tonnen, .akt-muell-fuss .muell-hinweis-tonnen { gap: 3px; } .muell-hinweis .abfuhr { padding-left: 6px; padding-right: 6px; font-size: var(--gr-mini); } }


@container seite (max-width: 44rem) { .tb-leiste .jahr-wahl { min-height: 3.25rem; display: flex; align-items: center; } .tb-leiste .tb-zeitraum { gap: var(--a2); } }

.tb-doku-kachel .tb-doku-eigen .tb-doku-link { padding-left: calc(var(--a2) + 3px + var(--a2)); }

.tb-doku-kachel .tb-doku-klienten .j-badge { white-space: nowrap; }
@container seite (max-width: 44rem) { .tb-doku-kachel .tb-doku-eigen .tb-doku-link { padding-left: calc(var(--a1) + 3px + var(--a2)); } .tb-doku-kachel .tb-doku-klienten { grid-column: auto; justify-content: flex-end; flex-wrap: nowrap; overflow: hidden; } .tb-doku-kachel .tb-doku-wer { grid-column: 2 / -1; } .tb-doku-kachel .tb-doku-wer .j-badge-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }

.akt-rund-zurueck { margin-left: 0; margin-right: auto; }




.verf-raster > .verf-kachel { margin: 0; }
.verf-kachel .monatsnavi-zeile { flex-direction: row; align-items: flex-start; gap: var(--a3); }
.verf-kachel .monatsnavi-zeile > .monatsnavi { flex: 1; min-width: 0; }
.verf-kachel .monatsnavi-aktionen { flex: none; justify-content: flex-end; }
.verf-abgabe-an .akt-rund-kreis { background: var(--j-ok-bg); color: var(--j-ok-fg); border-color: transparent; }
.verf-kachel .verf-notizen { border: 0; padding: 0; margin-top: var(--a4); }
.verf-kachel .verf-notizen h3 { margin: 0 0 var(--a2); }
.verf-kachel .notiz-liste { gap: var(--a1); }
.verf-zeile .akt-text { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--a1) var(--a2); }
.verf-zeile .akt-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.verf-unten { position: fixed; z-index: 55; left: var(--a3); right: var(--a3); bottom: calc(var(--a3) + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: var(--a2); padding: var(--a2) var(--a2) var(--a2) var(--a3); border-radius: var(--rund-voll);
  background: var(--karte); border: 1px solid var(--linie); box-shadow: 0 12px 28px var(--schatten-tief-farbe); animation: metis-rein .25s var(--metis-kurve, ease); }
.verf-unten[hidden] { display: none; }
@container seite (min-width: 64.01rem) { .verf-unten { display: none; } }

.kal-liste-tag { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--a3); align-items: start; padding: var(--a1) 0; }
.kal-liste-tag + .kal-liste-tag { border-top: 1px solid var(--linie); padding-top: var(--a2); }
.kal-liste-termine { display: grid; gap: var(--a1); min-width: 0; }
.kal-liste-termine .hinweis { margin: var(--a2) 0 0; }
.kal-tagliste-termine { gap: var(--a1); }



.akt-termine.akt-termin-offen .akt-monat,
.akt-termine.akt-termin-offen .akt-monate > .hinweis,
.akt-termine.akt-termin-offen .akt-termin-eintrag:not(.gewaehlt),
.akt-termine.akt-termin-offen .akt-liste:not(:has(.gewaehlt)) { display: none; }
.akt-termin-eintrag.gewaehlt > .akt-zeile { background: var(--j-nacht-50); box-shadow: inset 3px 0 0 var(--akzent); }
.akt-termin-info { margin: var(--a2) 0 0; padding: var(--a3) var(--a3) var(--a1) calc(2.5rem + var(--a3) + var(--a2)); }
.akt-termin-info.metis-rein { animation: metis-rein .3s var(--metis-kurve, ease); }
.akt-termin-info .kal-detail-liste { margin-bottom: 0; }
@container seite (max-width: 44rem) { .akt-termin-info { padding-left: var(--a2); padding-right: var(--a1); } }

.akt-muell-fuss { padding-left: var(--a2); }
.akt-muell-fuss .muell-hinweis { --mh-spalte: 2.5rem; }
.akt-muell-fuss .muell-marke { margin-left: calc((var(--mh-spalte) - var(--mh)) / 2); margin-right: calc((var(--mh-spalte) - var(--mh)) / 2); }


.abfuhr-kal .kalender-tag { min-height: 4.5rem; }
.abfuhr-kal .abfuhr-tag .abfuhr { font-size: var(--gr-etikett); max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.abfuhr-kal .abfuhr-tag button.abfuhr { cursor: pointer; font-family: inherit; }
.abfuhr-leer { margin: var(--a2) 0 0; }
.abfuhr-liste { display: none; }
.abf-leiste .kal-detail-titel { margin: var(--a1) 0 var(--a3); }
.abf-leiste form { margin: 0; }
.abf-import { display: grid; gap: var(--a3); }
.abf-einzeln { display: grid; gap: var(--a2); margin-top: var(--a5) !important; }
.abf-einzeln .felder { grid-template-columns: 1fr; gap: var(--a2); }
.abf-leeren { margin-top: var(--a4) !important; padding-top: var(--a3); border-top: 1px solid var(--linie); }
.abf-hilfe summary { cursor: pointer; font-size: var(--gr-klein); font-weight: 600; color: var(--primaer); }
.abf-hilfe .hinweis { margin: var(--a2) 0 0; }
.abf-leiste .kal-form-fuss { display: flex; justify-content: flex-end; }
.abf-leiste[data-modus="einzeln"] .abf-import { display: none; }
.abf-leiste[data-modus="einzeln"] .abf-einzeln { margin-top: var(--a1) !important; }

.datei-feld { position: relative; display: flex; align-items: center; gap: var(--a3); padding: var(--a3); cursor: pointer;
  border: 1.5px dashed var(--j-stein-300, #cbd5e1); border-radius: var(--rund-m); background: var(--j-nacht-50);
  transition: border-color .15s, background .15s, box-shadow .15s; }
.datei-feld input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.datei-feld:hover, .datei-feld.zieht, .datei-feld:focus-within { border-color: var(--akzent); background: var(--karte); box-shadow: 0 0 0 2px color-mix(in srgb, var(--akzent) 35%, transparent); }
.datei-feld-kreis { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem;
  border-radius: 50%; background: var(--karte); border: 1px solid var(--linie); color: var(--primaer); }
.datei-feld-kreis .symbol { width: 18px; height: 18px; color: inherit; }
.datei-feld-text { display: flex; flex-direction: column; min-width: 0; }
.datei-feld-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.datei-feld-text small { color: var(--text-leise); font-size: var(--gr-klein); }
.datei-feld.gewaehlt { border-style: solid; border-color: var(--j-ok-fg, #15803d); background: var(--karte); }
.datei-feld.gewaehlt .datei-feld-kreis { background: var(--j-ok-bg); color: var(--j-ok-fg); border-color: transparent; }
@container seite (max-width: 44rem) { .abfuhr-kal .kalender .abfuhr-tag { gap: 2px; } .abfuhr-kal .kalender .abfuhr { font-size: 0; padding: 0; width: 100%; height: 5px; min-height: 0; border: 0; border-radius: 3px; background: var(--farbe); } .abfuhr-kal .kalender .abfuhr::before { display: none; } .abfuhr-kal .kalender .abfuhr-tag form { width: 100%; } .abfuhr-kal .kalender .abfuhr-tag button.abfuhr { pointer-events: none; } .abfuhr-kal .kalender-tag { min-height: 3.25rem; } .abfuhr-liste { display: block; margin-top: var(--a4); } .abfuhr-liste .akt-zeile { min-height: 0; } .abfuhr-vorbei { opacity: .5; } .tk-import-radial { display: none; } }
@container seite (min-width: 44.01rem) { .tk-import-radial-mobil { display: none; } }


.dpl-fuss { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--a1) 4px; align-items: center; }
.dpl-fuss .dpl-legende { padding-left: calc(5px + 2px); white-space: nowrap; }
.dpl-fuss .dpl-stand { grid-column: -3 / -1; justify-self: end; margin: 0; }

@container seite (max-width: 44rem) { .dpl-kal { display: none; } .dpl-fuss { grid-template-columns: 3rem repeat(var(--dpl-n, 3), minmax(0, 1fr)); } .dpl-fuss .dpl-legende { grid-row: 1; flex-direction: column; justify-content: center; gap: 1px; padding: 0; font-size: var(--gr-mini); text-align: center; white-space: normal; } .dpl-fuss .dpl-legende:first-child { grid-column: 2; } .dpl-fuss .dpl-legende-du { grid-column: 1; grid-row: 1; } .dpl-fuss .dpl-stand { grid-column: 1 / -1; justify-self: start; } }

@media print {
  @page { size: A4 landscape; margin: 8mm; }
  .team-kopf, .ruecksprung-team, .reiter, .team-unterleiste, #metis, .metis, .toast-ort { display: none !important; }
  .dpl { border: 0; padding: 0; box-shadow: none; }
  .dpl-kal { display: block !important; }
  .dpl-kal .kalender { display: grid !important; grid-template-columns: repeat(7, minmax(0, 1fr)) !important; gap: 1.5mm !important; }
  .dpl-kal .kalender-kopf { display: block !important; font-size: 8pt; }
  .dpl-kal .kalender-leer { display: block !important; }
  .dpl-kal .kalender-tag { display: flex !important; flex-direction: column !important; padding: 1mm 1.2mm !important; border: .3mm solid #bbb !important;
    border-radius: 1.5mm !important; background: var(--j-weiss) !important; break-inside: avoid; min-height: 0 !important; }
  .dpl-kal .kalender-tag.wochenende { background: #f4f4f4 !important; }
  .dpl-kal .kalender-tag .tag-nr { width: auto !important; font-size: 8pt; }
  .dpl-kal .tag-wt { display: none !important; }
  .dpl-tag { display: grid !important; grid-template-columns: 1fr !important; gap: .6mm !important; }
  .dpl-dienst { font-size: 7.5pt; padding: .3mm .8mm .3mm .3mm; }
  .dpl-zeit { display: inline !important; font-size: 6.5pt; }
  .dpl-code { width: 4.2mm; height: 4.2mm; font-size: 5.5pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .dpl-dienst.eigen { background: none; box-shadow: none; }
  .dpl-dienst.eigen .dpl-code { background: var(--primaer); color: var(--j-weiss); }
  .dpl-legende-du { display: none !important; }
  .dpl-fuss { display: flex !important; gap: 3mm 6mm; font-size: 8pt; margin-top: 2mm; }
  .dpl-fuss .dpl-legende { padding: 0; }
  .dpl-fuss .dpl-stand { margin-left: auto; }
  .kalender-tag.heute { box-shadow: none !important; border-color: #bbb !important; }
}



.verf-abgabe .akt-rund-kreis { position: relative; }
.verf-offen-punkt { position: absolute; top: -2px; right: -2px; width: .7rem; height: .7rem; border-radius: 50%;
  background: var(--j-fehler-fg); box-shadow: 0 0 0 2px var(--karte); }
.verf-abgabe-an .akt-rund-kreis { background: var(--j-ok-bg); color: var(--j-ok-fg); border-color: color-mix(in srgb, var(--j-ok-fg) 35%, transparent); }
.verf-abgabe-an .akt-rund-text { color: var(--j-ok-fg); }

.verf-kontingent { display: flex; align-items: center; flex-wrap: wrap; gap: var(--a2) var(--a5); margin: 0 0 var(--a3); padding: 0 var(--a1); }
.verf-ring { display: inline-flex; align-items: center; gap: var(--a2); min-width: 0; }
.verf-ring-kreis { --ring: var(--j-ok-fg); flex: none; display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: conic-gradient(var(--ring) calc(var(--anteil) * 1%), var(--j-stein-100, #e5e7eb) 0); position: relative; }
.verf-ring-kreis::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--karte); }
.verf-ring-kreis b { position: relative; font-size: var(--gr-zusatz); color: var(--text); }
.verf-ring-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.verf-ring-text strong { font-size: var(--gr-klein); }
.verf-ring-text small { font-size: var(--gr-etikett); color: var(--text-leise); }
.verf-ring-voll .verf-ring-kreis { --ring: var(--j-warn-fg, #b45309); }
.verf-ring-ueber .verf-ring-kreis { --ring: var(--j-fehler-fg); }
.verf-ring-ueber .verf-ring-text small, .verf-ring-ueber .verf-ring-kreis b { color: var(--j-fehler-fg); font-weight: 700; }

.verf-datum { border-radius: 50%; }
.verf-tage-rund { display: inline-flex; align-items: center; min-width: 0; }
.verf-datum-rund { flex: none; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem;
  border-radius: 50%; background: var(--j-nacht-50); color: var(--primaer); line-height: 1; box-shadow: 0 0 0 2px var(--karte); border: 1.5px solid var(--linie); }
.verf-datum-rund + .verf-datum-rund { margin-left: -.6rem; }
.verf-datum-rund b { font-size: var(--gr-mittel); } .verf-datum-rund small { font-size: var(--gr-winzig); font-weight: 700; text-transform: uppercase; color: var(--text-leise); }
.verf-datum-rund.vt-verfuegbar { border-color: var(--j-ok-fg); background: var(--j-ok-bg); }
.verf-datum-rund.vt-unverfuegbar { border-color: var(--j-fehler-fg); background: var(--j-fehler-bg); }
.verf-datum-rund.vt-urlaub { border-color: var(--j-info-fg); background: var(--j-info-bg); }
.verf-datum-rund.vt-notiz { border-color: var(--j-warn-fg); background: var(--j-warn-bg); }
.verf-datum-mehr { background: var(--primaer); color: var(--auf-primaer); border-color: var(--primaer); }
.verf-datum-mehr b { font-size: var(--gr-klein); }

.verf-seite .kal-detail-oben { align-items: center; margin-bottom: var(--a1); }
.verf-seite .verf-tage-rund { flex: 1; }
.verf-seite .verf-tage { margin: var(--a2) 0 var(--a4); font-size: var(--gr-klein); }
.verf-seite .verf-wahl { display: grid; grid-template-columns: 1fr; gap: var(--a2); margin-bottom: var(--a4); }
.verf-seite .verf-wahl .wahl-knopf { justify-content: flex-start; min-height: 2.75rem; padding: 0 var(--a3); font-family: inherit; cursor: pointer; }
.verf-seite .wahl-verfuegbar[aria-checked="true"] { background: var(--j-ok-bg); }
.verf-seite .wahl-unverfuegbar[aria-checked="true"] { background: var(--j-fehler-bg); }
.verf-seite .wahl-urlaub[aria-checked="true"] { background: var(--j-info-bg); }
.verf-seite .wahl-knopf[aria-checked="true"]::after { content: "✓"; margin-left: auto; font-weight: 700; }
.verf-seite .sms-box { display: grid; gap: var(--a1); margin-bottom: var(--a2); }
.verf-seite .sms-box textarea { width: 100%; resize: vertical; min-height: 5rem; }
.verf-seite .sms-zaehler { justify-self: end; font-size: var(--gr-etikett); color: var(--text-leise); }
.verf-seite [data-verf-hinweis]:empty { display: none; }
.verf-seite .verf-fuss { justify-content: flex-end; }
.verf-seite .verf-speichern { margin-left: 0; }
.verf-speichern .akt-rund-kreis { background: var(--primaer); color: var(--auf-primaer); border-color: var(--primaer); }
.verf-speichern:hover .akt-rund-kreis, .verf-speichern:focus-visible .akt-rund-kreis { background: var(--primaer); }
@container seite (min-width: 64.01rem) { .verf-raster.mit-detail > .verf-seite { contain: none; align-self: stretch; position: relative; top: auto; overflow: visible; padding-bottom: 0; } .verf-seite .verf-fuss { position: sticky; bottom: 0; background: var(--karte); padding-bottom: var(--a4); z-index: 1; } }

.verf-unten { padding: var(--a1) var(--a2) var(--a1) var(--a2); gap: var(--a3); }
.verf-unten .verf-tage-rund { flex: 1; }
.verf-unten .verf-datum-rund { width: 2.5rem; height: 2.5rem; }
.verf-unten .akt-rund { margin-left: 0; min-width: 3rem; }
.verf-unten .akt-rund[hidden] { display: none; }
.verf-unten [data-eintragen] .akt-rund-kreis { background: var(--primaer); color: var(--auf-primaer); border-color: var(--primaer); }

.verf-kachel .kalender-tag:has(.vt-unverfuegbar) { box-shadow: inset 0 -3px 0 var(--j-fehler-fg); }
.verf-kachel .kalender-tag:has(.vt-urlaub) { box-shadow: inset 0 -3px 0 var(--j-info-fg); }
.verf-kachel .kalender-tag:has(.vt-verfuegbar) { box-shadow: inset 0 -3px 0 var(--j-ok-fg); }
.verf-kachel .kalender-tag:has(input:checked) { box-shadow: inset 0 0 0 2px var(--primaer); }

@container seite (max-width: 44rem) { .verf-kachel .monatsnavi-zeile { position: relative; display: block; } .verf-kachel .monatsnavi-zeile > .monatsnavi { width: 100%; } .verf-kachel .monatsnavi-aktionen { position: absolute; top: 0; right: 0; } .verf-kachel .verf-abgabe { flex-direction: row; gap: var(--a1); min-width: 0; min-height: 2.25rem; } .verf-kachel .verf-abgabe .akt-rund-kreis { width: 2rem; height: 2rem; } .verf-kachel .verf-abgabe .akt-rund-kreis .symbol { width: 15px; height: 15px; } .verf-kontingent { gap: var(--a2) var(--a4); } .verf-kontingent-titel { width: 100%; } .verf-kachel .kalender-tag .vt { display: none; } .verf-kachel .kalender-tag:has(.vt-unverfuegbar) { box-shadow: inset 0 -4px 0 var(--j-fehler-fg); } .verf-kachel .kalender-tag:has(.vt-urlaub) { box-shadow: inset 0 -4px 0 var(--j-info-fg); } .verf-kachel .kalender-tag:has(.vt-verfuegbar) { box-shadow: inset 0 -4px 0 var(--j-ok-fg); } .verf-kachel .kalender-tag:has(input:checked) { box-shadow: inset 0 0 0 2px var(--primaer); } }


.verf-zeile .vt { width: auto; flex: none; padding: .1rem .55rem; }
@container seite (max-width: 44rem) { .verf-kachel .kalender-tag .vt-notiz { top: 4px; right: 4px; width: .5rem; height: .5rem; border-radius: 50%; background: var(--j-warn-fg, #b45309); } .verf-kachel .kalender-tag .vt-notiz .symbol { display: none; } }


@container seite (max-width: 44rem) { .abfuhr-kal .team-kal-kopfzeile { position: relative; display: block; } .abfuhr-kal .team-kal-kopfzeile > .akt-rund { position: absolute; top: 0; right: 0; flex-direction: row; gap: var(--a1); min-width: 0; min-height: 2.25rem; } .abfuhr-kal .team-kal-kopfzeile > .akt-rund .akt-rund-kreis { width: 2rem; height: 2rem; } .abfuhr-kal .team-kal-kopfzeile > .akt-rund .symbol { width: 15px; height: 15px; } }






.vp-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--a4); align-items: start; }
.vp-raster.mit-seite { grid-template-columns: minmax(0, 1fr) 19rem; }
.vp-raster > * { min-width: 0; margin: 0; }
.vp-raster > .vp-personen { position: sticky; top: var(--a4); max-height: calc(100vh - 2 * var(--a4)); overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: var(--a2); padding: var(--a4); background: var(--karte); border: 1px solid var(--linie);
  border-top: 4px solid var(--akzent); border-radius: var(--rund-m); box-shadow: var(--schatten-1, 0 1px 2px rgba(15,23,42,.06)); }
.vp-kachel .vp-personen { padding: var(--a4); border-left: 1px solid var(--linie); top: var(--a4); }
.vp-seite-kopf { display: flex; flex-direction: column; gap: 2px; }
.vp-seite-hinweis { font-size: var(--gr-klein); color: var(--text-leise); }
.mit-person .vp-seite-hinweis { color: var(--text); font-weight: 600; }
.vp-personen .vp-suche { margin: 0; }
.vp-personen-liste { display: flex; flex-direction: column; gap: var(--a2); }
.vp-personen-liste h3 { margin: var(--a2) 0 0; }
.vp-personen-liste h3.abschnitt-linie:first-child { margin-top: 0; }   
.vp-pub-stand { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a2); margin: 0 0 var(--a3); font-size: var(--gr-klein); color: var(--text-leise); }

.vp-raster .vp-person { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2px var(--a3);
  padding: var(--a2) var(--a3); border: 1px solid var(--linie); border-left: 3px solid var(--primaer); border-radius: var(--rund-m);
  background: var(--karte); cursor: pointer; }
.vp-raster .vp-person.springer { border-left-color: var(--akzent); }
.vp-person-ring { width: 2.5rem; height: 2.5rem; }
.vp-person-ring b { font-size: var(--gr-etikett); }
.vp-person.ueberzogen .vp-person-ring { --ring: var(--j-fehler-fg); }
.vp-person.ueberzogen .vp-person-ring b { color: var(--j-fehler-fg); }
.vp-person-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.vp-person-text strong { font-size: var(--gr-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-person-text small { font-size: var(--gr-etikett); color: var(--text-leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-person-sperre { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 .3rem;
  border-radius: var(--rund-voll); background: var(--j-fehler-bg); color: var(--j-fehler-fg); font-size: var(--gr-etikett); font-weight: 700; }
.vp-info-handy { display: none; }
.vp-person-mehr { display: none; grid-column: 1 / -1; flex-direction: column; gap: var(--a1); margin-top: var(--a2); padding-top: var(--a2); border-top: 1px dashed var(--linie); }
.vp-person.gewaehlt .vp-person-mehr { display: flex; }
.vp-mehr-zeile { display: flex; flex-direction: column; gap: 3px; }
.vp-mehr-zeile em { font-style: normal; font-size: var(--gr-mini); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-leise); }
.vp-mehr-zeile > span { display: flex; flex-wrap: wrap; gap: 3px; }
.vp-tag { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 1.6rem; height: 1.6rem; padding: 0 2px;
  border-radius: 50%; border: 1.5px solid var(--linie); font-style: normal; font-size: var(--gr-etikett); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.vp-tag small { font-size: .5rem; font-weight: 700; }
.vp-tag-dienst { border-radius: var(--rund-voll); min-width: 2rem; height: 1.9rem; background: var(--j-bernstein-100); border-color: var(--j-bernstein-500); }
.vp-tag-verf { background: var(--j-ok-bg); border-color: var(--j-ok-fg); color: var(--j-ok-fg); }
.vp-tag-gesperrt { background: var(--j-fehler-bg); border-color: var(--j-fehler-fg); color: var(--j-fehler-fg); }
.vp-raster .vp-person.gewaehlt { box-shadow: 0 0 0 2px var(--akzent); background: var(--karte); }

.mit-person .vp-slot.fuer-verf:not(.belegt) { border-style: solid; border-color: var(--j-ok-fg); background: var(--j-ok-bg); }
.mit-person .vp-slot.fuer-gesperrt { opacity: .45; cursor: not-allowed; background: repeating-linear-gradient(135deg, var(--j-fehler-bg) 0 6px, transparent 6px 12px); }
.mit-person .vp-slot.fuer-eigen { box-shadow: 0 0 0 2px var(--akzent); }

.vp-kachel .vp-leiste { margin: 0 0 var(--a3); }
.vp-kachel .monatsnavi-zeile { flex-direction: row; align-items: flex-start; gap: var(--a3); }
.vp-kachel .monatsnavi-zeile > .monatsnavi { flex: 1; min-width: 0; }
.vp-kachel .monatsnavi-aktionen { flex: none; justify-content: flex-end; }
.vp-abschluss { margin-left: 0; }
.vp-abschluss .akt-rund-kreis { position: relative; }
.vp-legende { display: flex; flex-wrap: wrap; gap: var(--a1) var(--a4); margin-top: var(--a3); }
.vp-legende b { font-weight: 700; }
.vp-leg-springer { padding-left: .5rem; border-left: 3px solid var(--akzent); }
@container seite (max-width: 64rem) { .vp-raster.mit-seite { grid-template-columns: minmax(0, 1fr); } .vp-raster.mit-seite .vp-kachel { padding-bottom: 7rem; } .vp-personen .vp-suche, .vp-personen-liste h3 { display: none; } .vp-seite-kopf { flex-direction: row; justify-content: space-between; align-items: baseline; order: 3; } .vp-personen-liste { flex-direction: row; overflow-x: auto; gap: var(--a2); padding: 2px 2px var(--a1); scroll-snap-type: x proximity; } .vp-raster .vp-person { flex: none; grid-template-columns: auto auto; padding: var(--a1) var(--a2) var(--a1) var(--a1); border-radius: var(--rund-voll); scroll-snap-align: start; } .vp-person-ring { width: 2.25rem; height: 2.25rem; } .vp-person-text small, .vp-person-sperre { display: none; } .vp-person-text strong { font-size: var(--gr-klein); max-width: 7rem; } .vp-raster .vp-person.gewaehlt .vp-person-mehr { display: none; } .vp-info-handy { display: flex; flex-direction: column; gap: var(--a1); order: 2; padding: var(--a1) var(--a1) var(--a2); border-bottom: 1px solid var(--linie); } .vp-info-handy[hidden] { display: none; } .vp-info-handy .vp-mehr-zeile { flex-direction: row; align-items: center; gap: var(--a2); } .vp-info-handy .vp-mehr-zeile em { flex: none; width: 4.5rem; } .vp-info-handy .vp-mehr-zeile > span { flex-wrap: nowrap; overflow-x: auto; } .vp-kachel .kalender-liste .kalender-tag { display: grid; grid-template-columns: 2.75rem repeat(var(--schichten, 3), minmax(0, 1fr)); gap: var(--a1); align-items: stretch; padding: var(--a1) var(--a2); } .vp-kachel .kalender-liste .kalender-tag .tag-nr { display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: var(--gr-mittel); font-weight: 700; line-height: 1; } .vp-kachel .kalender-liste .kalender-tag .tag-wt { font-size: var(--gr-winzig); text-transform: uppercase; color: var(--text-leise); order: -1; } .vp-kachel .kalender-liste .kalender-tag .tag-monat { display: none; } .vp-kachel .kalender-liste .kalender-tag .tag-status { display: none; } .vp-kachel .kalender-liste .vp-slot { min-height: 2.75rem; padding: 3px 5px; } .vp-kachel .kalender-liste .vp-slot-kopf { font-size: var(--gr-mini); } .vp-kachel .kalender-liste .vp-slot-kopf > span:first-child { white-space: nowrap; overflow: hidden; } .vp-kachel .kalender-liste .vp-slot .vp-marke { display: none; } .vp-kachel .kalender-liste .vp-slot .wer { font-size: var(--gr-zusatz); } .vp-kachel .kalender-liste .vp-slot .vp-sel { display: none; } }@media (max-width: 64rem) { .vp-raster > .vp-personen { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; top: auto; max-height: 60vh; padding: var(--a2) var(--a3) calc(var(--a2) + env(safe-area-inset-bottom));
    border-radius: var(--rund-m) var(--rund-m) 0 0; border: 0; border-top: 3px solid var(--akzent); box-shadow: 0 -10px 28px var(--schatten-tief-farbe); gap: var(--a1);
    display: flex; flex-direction: column-reverse; overflow: visible; } }
@container seite (max-width: 44rem) { .vp-kachel .monatsnavi-zeile { position: relative; display: block; } .vp-kachel .monatsnavi-zeile > .monatsnavi { width: 100%; } .vp-kachel .monatsnavi-aktionen { position: absolute; top: 0; right: 0; } .vp-kachel .vp-abschluss { flex-direction: row; gap: var(--a1); min-width: 0; min-height: 2.25rem; } .vp-kachel .vp-abschluss .akt-rund-kreis { width: 2rem; height: 2rem; } .vp-kachel .vp-abschluss .akt-rund-kreis .symbol { width: 15px; height: 15px; } .vp-kachel .vp-leiste { gap: var(--a2) var(--a4); } .vp-kachel .vp-leiste .verf-ring-text small { display: none; } .vp-kachel .kalender-liste .vp-slot-kopf > span:first-child { font-size: 0; } .vp-kachel .kalender-liste .vp-slot-kopf b { font-size: var(--gr-mini); } }
@media print { .vp-raster { display: block; } .vp-raster > .vp-personen { display: none !important; } }


.verf-seite .verf-wahl .wahl-knopf { justify-content: space-between; }
.verf-seite .wahl-knopf::after { content: none !important; }
.wahl-ring { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  border: 2px solid currentColor; opacity: .45; color: inherit; }
.wahl-ring .symbol { width: 12px; height: 12px; opacity: 0; }
.verf-seite .wahl-verfuegbar[aria-pressed="true"] { background: var(--j-ok-bg); }
.verf-seite .wahl-unverfuegbar[aria-pressed="true"] { background: var(--j-fehler-bg); }
.verf-seite .wahl-urlaub[aria-pressed="true"] { background: var(--j-info-bg); }
.wahl-knopf[aria-pressed="true"] .wahl-ring { opacity: 1; background: currentColor; }
.wahl-knopf[aria-pressed="true"] .wahl-ring .symbol { opacity: 1; color: var(--karte); }


.akt-muell-fuss { max-width: 100%; min-width: 0; }
.akt-muell-fuss .muell-hinweis { flex-wrap: wrap; min-width: 0; max-width: 100%; }
.akt-muell-fuss .muell-hinweis-tonnen { flex-wrap: wrap; min-width: 0; }

.ruecksprung-team .akt-rund { margin: 0; }
.vp-raster .kalender-tag { min-height: 0; gap: var(--a1); }
.vp-raster .kalender-tag .tag-status { display: none; }


.tb-doku-kachel .tb-doku-link, .tb-doku-kachel .tb-doku-eigen .tb-doku-link { padding-left: calc(var(--a2) + 3px + var(--a2)); align-items: center; }
.tb-doku-kachel .tb-doku-link > * { align-self: center; }
.tb-doku-kachel .tb-doku-schicht, .tb-doku-kachel .tb-doku-klienten, .tb-doku-kachel .tb-doku-wer { align-items: center; }
@container seite (max-width: 44rem) { .tb-doku-kachel .tb-doku-link, .tb-doku-kachel .tb-doku-eigen .tb-doku-link { padding-left: calc(var(--a1) + 3px + var(--a2)); } }

.tb-doku-kachel .tb-doku-link .j-badge { min-height: 2.25rem; box-sizing: border-box; display: inline-flex; align-items: center; }


.vp-std { display: inline-flex; align-items: baseline; gap: 3px; padding: 2px 8px; border-radius: var(--rund-voll); background: var(--j-stein-50, #f5f5f4);
  font-style: normal; font-size: var(--gr-etikett); color: var(--text-leise); white-space: nowrap; }
.vp-std b { font-size: var(--gr-zusatz); color: var(--text); }
.vp-std-rest { background: var(--j-ok-bg); color: var(--j-ok-fg); }
.vp-std-rest b { color: var(--j-ok-fg); }
.vp-std-rest.minus { background: var(--j-fehler-bg); color: var(--j-fehler-fg); }
.vp-std-rest.minus b { color: var(--j-fehler-fg); }
@container seite (max-width: 64rem) { .vp-raster > .vp-personen { flex-direction: column; max-height: 70vh; overflow-y: auto; gap: var(--a2); padding-top: var(--a3); } .vp-seite-kopf { order: 1; } .vp-personen-liste { order: 2; flex-wrap: wrap; overflow-x: visible; scroll-snap-type: none; } .vp-info-handy { order: 3; border-bottom: 0; border-top: 1px dashed var(--linie); padding: var(--a2) var(--a1) 0; gap: var(--a2); } .vp-info-handy .vp-mehr-zeile { align-items: flex-start; } .vp-info-handy .vp-mehr-zeile em { width: 4.25rem; padding-top: .35rem; } .vp-info-handy .vp-mehr-zeile > span { flex-wrap: wrap; overflow: visible; gap: 4px; } .vp-raster.mit-seite .vp-kachel { padding-bottom: calc(var(--dock, 7rem) + var(--a4)); } .vp-kachel .monatsstreifen { position: static; display: grid; grid-template-columns: repeat(auto-fill, minmax(1.75rem, 1fr)); gap: 4px; overflow: visible;
    background: none; padding: 0; margin-bottom: var(--a3); } .vp-kachel .monatsstreifen a { width: 1.75rem; height: 1.75rem; justify-self: center; font-size: var(--gr-etikett); } .vp-kachel .vp-leiste .verf-ring-text { flex-direction: row; align-items: baseline; gap: var(--a2); } .vp-kachel .vp-leiste .verf-ring-text small { display: inline; } }

.verf-unten { padding-right: var(--a4); gap: var(--a2); }
.verf-unten .akt-rund { min-width: 3.75rem; }

@container seite (max-width: 64rem) { .vp-raster > .vp-personen { max-height: 55vh; } .vp-personen-liste { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; flex: none; } }
.verf-unten { padding-right: calc(var(--a4) + var(--a2)); }



.vp-kachel .monatsnavi-aktionen { position: relative; }

.vp-griff, .vp-wahl { display: none; }
@container seite (max-width: 64rem) { .vp-raster > .vp-personen { transform: translateY(calc(100% + 1rem)); visibility: hidden;
    transition: transform var(--metis-dauer, .45s) var(--metis-kurve, ease), visibility 0s linear var(--metis-dauer, .45s); overflow-y: auto; overscroll-behavior: contain; } .vp-raster > .vp-personen.offen { transform: none; visibility: visible; transition: transform var(--metis-dauer, .45s) var(--metis-kurve, ease), visibility 0s; } .vp-raster > .vp-personen.still, .vp-raster > .vp-personen.zieht { transition: none; } .vp-raster.mit-seite .vp-kachel { padding-bottom: calc(var(--dock, 0px) + var(--a4)); } .vp-personen-liste { display: none; } .vp-griff { display: block; position: sticky; top: calc(-1 * var(--a3)); z-index: 2; flex: none; height: 1.5rem; margin: calc(-1 * var(--a3)) calc(-1 * var(--a3)) 0;
    background: var(--karte); touch-action: none; cursor: grab; order: 0; } .vp-griff::before { content: ""; position: absolute; left: 50%; top: .6rem; width: 2.5rem; height: 4px; margin-left: -1.25rem;
    border-radius: var(--rund-voll); background: var(--j-stein-300, #cbd5e1); } .vp-seite-kopf { align-items: center; gap: var(--a2); } .vp-seite-kopf .kal-pop-art { flex: none; } .vp-seite-hinweis { flex: 1; min-width: 0; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vp-wahl { display: block; position: relative; order: 2; } .vp-wahl-knopf { display: flex; align-items: center; gap: var(--a3); width: 100%; padding: var(--a2) var(--a3) var(--a2) var(--a2); border: 1px solid var(--linie);
    border-left: 3px solid var(--primaer); border-radius: var(--rund-m); background: var(--karte); color: var(--text); font: inherit; text-align: left; cursor: pointer; } .vp-wahl-knopf:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; } .vp-wahl-knopf.ueberzogen .vp-person-ring { --ring: var(--j-fehler-fg); } .vp-wahl-text { flex: 1; display: flex; flex-direction: column; min-width: 0; line-height: 1.2; } .vp-wahl-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vp-wahl-text small { font-size: var(--gr-etikett); color: var(--text-leise); } .vp-wahl.offen .titel-wahl-pfeil { transform: rotate(180deg); color: var(--primaer); } .vp-wahl-menue { position: static; margin-top: 4px; min-width: 0; max-width: none; max-height: 38vh; box-shadow: 0 6px 18px rgba(15, 22, 50, .12); } .vp-wahl-menue button { display: flex; align-items: center; gap: var(--a2); width: 100%; padding: var(--a2) var(--a3); border: 0; border-radius: var(--rund-s);
    background: none; color: var(--text); font: inherit; font-weight: 500; text-align: left; cursor: pointer; } .vp-wahl-menue button.springer { box-shadow: inset 3px 0 0 var(--akzent); } .vp-wahl-menue button:hover, .vp-wahl-menue button:focus-visible { background: var(--j-nacht-50); color: var(--primaer); outline: none; } .vp-wahl-menue button[aria-selected="true"] { color: var(--primaer); font-weight: 700; } .vp-wahl-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vp-wahl-rest { flex: none; font-size: var(--gr-etikett); color: var(--j-ok-fg); } .vp-wahl-rest.minus { color: var(--j-fehler-fg); } .vp-wahl-haken { flex: none; visibility: hidden; } .vp-wahl-menue button[aria-selected="true"] .vp-wahl-haken { visibility: visible; } .vp-info-handy { order: 3; } .vp-slot.vp-ziel { outline: 2px solid var(--primaer); outline-offset: 1px; } .kalender-tag.vp-ziel-tag { box-shadow: inset 3px 0 0 var(--akzent); } .vp-kachel .kalender-liste .kalender-tag .tag-nr { cursor: pointer; } }
@media (prefers-reduced-motion: reduce) { .vp-raster > .vp-personen { transition: none !important; } }


@container seite (max-width: 64rem) { .verf-unten { align-items: flex-start; } .verf-unten .verf-tage-rund { align-self: flex-start; margin-top: calc((2.25rem - 2.5rem) / 2); } }


.dpl-handy { display: none; }
@container seite (max-width: 44rem) { .dpl-handy { display: block; padding: 0; border: 0; box-shadow: none; background: none; margin-bottom: var(--a3); } .dpl-handy .kalender-liste .kalender-tag { display: grid; grid-template-columns: 2.75rem repeat(var(--schichten, 3), minmax(0, 1fr)); gap: var(--a1);
    align-items: stretch; padding: var(--a1) var(--a2); min-height: 0; cursor: default; } .dpl-handy .kalender-liste .kalender-tag .tag-nr { display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: var(--gr-mittel); font-weight: 700; line-height: 1; } .dpl-handy .kalender-liste .kalender-tag .tag-wt { font-size: var(--gr-winzig); text-transform: uppercase; color: var(--text-leise); order: -1; } .dpl-handy .kalender-liste .kalender-tag .tag-monat { display: none; } .dpl-handy .kalender-liste .kalender-tag.heute { border-color: var(--akzent); box-shadow: inset 3px 0 0 var(--akzent); } .dpl-handy .vp-slot { min-height: 2.75rem; padding: 3px 5px; } .dpl-handy .vp-slot-kopf { font-size: var(--gr-mini); } .dpl-handy .vp-slot-kopf > span:first-child { white-space: nowrap; overflow: hidden; } .dpl-handy .vp-slot .wer { font-size: var(--gr-zusatz); } .dpl-handy .vp-slot.eigen { background: var(--j-bernstein-100); border-color: var(--j-bernstein-500); } .dpl-handy .kalender-liste .vp-slot-kopf > span:first-child { font-size: var(--gr-mini); } .dpl-fuss { grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); } .dpl-fuss .dpl-legende { grid-row: auto; flex-direction: row; gap: 5px; font-size: var(--gr-klein); text-align: left; } .dpl-fuss .dpl-legende:first-child { grid-column: auto; } .dpl-fuss .dpl-legende-du { grid-column: auto; grid-row: auto; } }
.dpl-zeit.abw { color: var(--j-warn-fg); font-weight: 700; }
@media print { .dpl-handy { display: none !important; } }





@container seite (max-width: 44rem) { .vp-kachel .monatsnavi-aktionen { position: absolute; top: 0; right: 0; flex-wrap: nowrap; } }


@container seite (max-width: 64rem) { .verf-unten { left: 0; right: 0; width: max-content; max-width: calc(100% - 2 * var(--a3)); margin: 0 auto;
    justify-content: center; gap: var(--a4); padding: var(--a2) var(--a4) var(--a1); } .verf-unten .verf-tage-rund { flex: none; } .verf-unten .akt-rund { min-width: 3.25rem; } }


@container seite (max-width: 64rem) { .vp-wahl-gruppe { display: grid; grid-template-columns: minmax(0, 1fr) 4.25rem 16px; gap: var(--a2); padding-right: var(--a3); } .vp-wahl-gruppe span:last-child { grid-column: 2; text-align: right; } .vp-wahl-menue button { display: grid; grid-template-columns: minmax(0, 1fr) 4.25rem 16px; } .vp-wahl-rest { text-align: right; font-variant-numeric: tabular-nums; } .vp-seite-kopf { padding-right: 0; } }




.kal-form-fuss .kal-speichern { margin-left: 0; }

@container seite (max-width: 64rem) { .kal-detail .kal-detail-art > .knopf-symbol[data-zu] { display: none; } .akt-form-blatt { transform: translateY(100%); transition: transform var(--metis-dauer, .45s) var(--metis-kurve, ease); } .akt-form-blatt.offen { transform: none; } }
@container seite (min-width: 64.01rem) { .akt-form-blatt { display: none !important; } }


.verf-kontingent .verf-urlaub-titel { width: 100%; margin-top: var(--a1); }
.verf-ring-urlaub .verf-ring-kreis { --ring: var(--j-info-fg, var(--primaer)); }
.verf-ring-urlaub.verf-ring-ueber .verf-ring-kreis { --ring: var(--j-fehler-fg); }
.verf-seite .verf-urlaub { display: grid; gap: var(--a2); margin: 0 0 var(--a3); padding: var(--a2) var(--a3); border: 1px solid var(--linie);
  border-radius: var(--rund, .5rem); background: var(--j-info-bg); }
.verf-seite .verf-urlaub[hidden], .verf-seite .verf-urlaub [hidden] { display: none; }
.verf-seite .verf-urlaub .verf-ring-text strong { font-size: var(--gr-klein); }
.verf-seite .verf-urlaub .hinweis { margin: 0; font-size: var(--gr-klein); }
@container seite (max-width: 64rem) { .vp-personen .vp-seite-kopf { cursor: grab; user-select: none; } .vp-personen.zieht .vp-seite-kopf, .vp-personen.zieht .vp-griff { cursor: grabbing; } .verf-seite { max-height: calc(100dvh - var(--a4)); } .verf-seite .verf-wahl { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a1); margin-bottom: var(--a2); } .verf-seite .verf-wahl .wahl-knopf { min-height: 2.5rem; padding: 0 var(--a2); font-size: var(--gr-klein); gap: var(--a1); } .verf-seite .verf-wahl .wahl-ring { display: none; } .verf-seite .verf-wahl .wahl-knopf span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .verf-seite .verf-tage { margin: var(--a1) 0 var(--a2); } .verf-seite .sms-box { margin-bottom: var(--a1); } .verf-seite .sms-box textarea { min-height: 3.5rem; } .verf-seite .kal-detail-art { margin-bottom: var(--a1); } .verf-seite .kal-detail-oben { position: sticky; top: calc(1.75rem - var(--a4)); z-index: 1; background: var(--karte); padding: var(--a1) 0; } .verf-seite .verf-fuss { position: sticky; bottom: calc(-1 * var(--a4) - env(safe-area-inset-bottom)); background: var(--karte); padding-bottom: var(--a2); } }


.verf-inhalt { display: contents; }
.verf-inhalt[hidden] { display: none; }
.verf-seite .verf-leer { margin: var(--a4) 0; }
.verf-seite .verf-leer[hidden] { display: none; }
@container seite (min-width: 64.01rem) { .verf-raster, .verf-raster.mit-detail { grid-template-columns: minmax(0, 1fr) 19rem; gap: var(--a4); transition: none; } .verf-raster > .verf-seite, .verf-raster > .verf-seite[hidden] { display: flex; opacity: 1; transform: none; transition: none; } .verf-seite [data-zu] { display: none; } }
.verf-kontingent .verf-kontingent-titel, .vp-leiste .verf-kontingent-titel { display: flex; align-items: center; gap: var(--a3); width: 100%; }
.verf-kontingent .verf-kontingent-titel::after, .vp-leiste .verf-kontingent-titel::after { content: ""; flex: 1; border-top: 1px solid var(--linie); }
.verf-kontingent .verf-urlaub-titel { margin-top: var(--a3); }
.vp-abschluss, .verf-abgabe { min-width: 5rem; }
@container seite (max-width: 44rem) { .vp-abschluss, .verf-abgabe { min-width: 7rem; } .verf-seite .verf-wahl .wahl-knopf { justify-content: center; padding: 0 var(--a1); font-size: var(--gr-klein); font-weight: 600; } .verf-seite .verf-wahl .wahl-knopf::before { display: none; } .verf-seite .verf-wahl .wahl-knopf span:first-child { overflow: visible; text-overflow: clip; } }


.vp-raster.vp-abgeschlossen .vp-person, .vp-raster.vp-abgeschlossen .vp-slot { cursor: default; }
.vp-raster.vp-abgeschlossen .vp-personen { opacity: .6; animation: none; }   
.vp-fuss { margin-top: var(--a3); }

@container seite (min-width: 44.01rem) { .vp-fuss { grid-template-columns: 3.5rem repeat(7, minmax(0, 1fr)); } .vp-fuss .dpl-legende { padding-left: 13px; grid-column: span 2; } .vp-fuss .dpl-legende:first-child { grid-column: 2 / span 2; } }

@container seite (max-width: 44rem) { .vp-fuss { grid-template-columns: 44px repeat(var(--dpl-n, 3), minmax(0, 1fr)); column-gap: 4px; padding: 0 8px; } .vp-fuss .dpl-legende { grid-row: auto; flex-direction: row; justify-content: flex-start; padding: 0; gap: 4px; font-size: var(--gr-mini); text-align: left; white-space: nowrap; } .vp-fuss .dpl-legende:first-child { grid-column: 2; } }

@container seite (max-width: 44rem) { .akt-muell-fuss .muell-hinweis { --mh: 1.125rem; gap: 4px; font-size: var(--gr-etikett); flex-wrap: nowrap; } .akt-muell-fuss .muell-marke { margin-right: 0; } .akt-muell-fuss .muell-hinweis-tonnen { gap: 2px; flex-wrap: nowrap; } .akt-muell-fuss .muell-hinweis .abfuhr { font-size: var(--gr-winzig); padding: 0 5px 0 4px; gap: 3px; } }


@container seite (max-width: 64rem) { .vp-raster.vp-abgeschlossen .vp-personen { display: none; } }
.vp-pub-sperre .akt-rund-kreis { color: var(--text-leise); }

@container seite (max-width: 44rem) { .akt-muell-fuss .muell-marke .symbol { width: 11px; height: 11px; } .akt-muell-fuss .muell-marke-punkt { top: -5px; right: -6px; width: 9px; height: 9px; font-size: 7px; box-shadow: 0 0 0 1.5px var(--karte); } }


.akte-raster { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: var(--a5); align-items: start; }
.akte-raster.ohne-seite { grid-template-columns: minmax(0, 1fr); }
.akte-haupt { min-width: 0; display: grid; gap: var(--a5); }
.akte-haupt > .kachel, .akte-haupt > section { margin: 0; }
.blatt { position: sticky; top: var(--a4); display: flex; flex-direction: column; gap: var(--a3); min-width: 0;
  padding: var(--a4); background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund-m);
  max-height: calc(100vh - 2 * var(--a4)); overflow: auto; }
.blatt-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--a2); }
.blatt-kopf h2 { margin: 0; font-size: var(--gr-titel); }
.blatt .formular-fuss { justify-content: flex-start; }
.blatt .felder { grid-template-columns: minmax(0, 1fr); }
.blatt-panel[hidden], .blatt-leer[hidden] { display: none; }
.blatt-griff, .blatt-zu, .blatt-fab { display: none; }




.akte-kachel { position: relative; }
.akte-kachel .kachel-kopf { align-items: center; }
.akte-kachel .kachel-kopf .akt-rund { margin-left: auto; min-width: 0; }
.akte-kachel .akt-rund-text { font-size: var(--gr-etikett); }
.akte-kachel .akt-rund-kreis { width: 2rem; height: 2rem; }


.akte-filter { margin-bottom: 0; }


.akt-rund-ok .akt-rund-kreis { color: var(--j-ok-fg); border-color: var(--j-ok-fg); }
.akt-rund-fehler .akt-rund-kreis { color: var(--j-fehler-fg); border-color: var(--j-fehler-fg); }
.akt-rund-knopf, .pinn-kopf > .akt-rund-knopf, button.wz-knopf { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.med-panel-info { margin: 0; padding: var(--a2) var(--a3); background: var(--flaeche); border-radius: var(--rund-m); }

@container seite (max-width: 64rem) { .akte-raster { grid-template-columns: minmax(0, 1fr); } .blatt.offen { transform: none; } .blatt.zieht { transition: none; } .blatt-griff { display: block; position: relative; flex: none; height: 1rem; margin-top: calc(-1 * var(--a2)); touch-action: none; } .blatt-griff::before { content: ""; position: absolute; left: 50%; top: .25rem; width: 2.5rem; height: 4px; margin-left: -1.25rem; border-radius: 2px; background: var(--linie); } .blatt-kopf { touch-action: none; } .blatt-zu { display: inline-flex; } .blatt.offen ~ .blatt-fab { display: none; } }@media (max-width: 64rem) { .blatt { position: fixed; left: 0; right: 0; top: auto; bottom: 0; z-index: 70; max-height: 88dvh; border-radius: var(--rund-l, 1rem) var(--rund-l, 1rem) 0 0;
    border-bottom: 0; transform: translateY(105%); transition: transform .25s ease; box-shadow: 0 -10px 34px rgba(0, 0, 0, .2);
    padding-bottom: calc(var(--a4) + env(safe-area-inset-bottom, 0px)); } .blatt-fab { display: flex; position: fixed; right: var(--a4); bottom: calc(var(--a4) + env(safe-area-inset-bottom, 0px)); z-index: 60;
    margin: 0; padding: var(--a2); border-radius: var(--rund-m); background: var(--karte); box-shadow: 0 6px 20px rgba(0, 0, 0, .22); border: 1px solid var(--linie); } }

.akt-rund-fehler .akt-rund-text { color: var(--j-fehler-fg); }
.akt-rund-ok .akt-rund-text { color: var(--j-ok-fg); }


.kal-detail-liste:not(.kal-form-liste) { gap: 0; border-top: 1px solid var(--linie); margin-top: var(--a3); }
.kal-detail-liste:not(.kal-form-liste) > div { padding: var(--a3) 0; align-items: center; }
.kal-detail-liste:not(.kal-form-liste) > div + div { border-top: 1px solid var(--linie); }
.kal-detail-liste:not(.kal-form-liste) > div:last-child { padding-bottom: 0; }
.kal-detail-liste:not(.kal-form-liste) dt { padding-top: 0; display: inline-flex; align-items: center; }
.kal-detail-liste:not(.kal-form-liste) dt.kal-detail-dt { display: block; margin-bottom: var(--a2); }
.kal-detail-liste:not(.kal-form-liste) dt.kal-detail-dt + dd { margin-top: 0; }
.kal-detail-liste:not(.kal-form-liste) > div:has(> dt.kal-detail-dt) { display: block; }
.akt-termin-info .kal-detail-liste:not(.kal-form-liste) { margin-top: 0; }
.akt-inline-edit > :not(.kal-form) { display: none; }
.akt-inline-edit .kal-form { margin: 0; padding: 0; }
.akt-inline-edit .kal-form .kal-detail-art > .knopf-symbol[data-zu] { display: inline-flex; }
.akt-rund-nur { min-width: 0; margin-left: auto; }
.kal-tagliste-kopf [data-tag-titel] { display: none; }
.kal-tagliste-kopf { margin-bottom: var(--a1); }
.kal-liste-tag { align-items: stretch; }
.kal-liste-termine { gap: 0; }
.kal-liste-termine .team-termin { min-height: 2.5rem; align-items: center; background: none; border-radius: 0; padding-top: var(--a1); padding-bottom: var(--a1); }
.kal-liste-termine .team-termin + .team-termin { border-top: 1px solid var(--linie); }
.kal-liste-tag { padding: var(--a2) 0; }
.kal-liste-tag + .kal-liste-tag { padding-top: var(--a2); }

.lese-adresse { display: block; margin-top: var(--a1); color: var(--text-leise); font-size: var(--gr-klein); }
.ruecksprung-rund { display: flex; gap: var(--a3); align-items: flex-start; }


.vp-slot.vp-wechsel { outline: 2px dashed var(--akzent); outline-offset: -2px; }
.akt-rund-klein .akt-rund-kreis { width: 1.75rem; height: 1.75rem; }
.akt-rund-klein .akt-rund-kreis svg { width: .875rem; height: .875rem; }
.vp-abwahl { margin-left: auto; }
.vp-pub-sperre, .vp-abschluss.verf-abgabe-an { opacity: 1; }
.vp-raster.nur-lesen .kalender-tag, .vp-raster.nur-lesen .vp-slot { -webkit-tap-highlight-color: transparent; user-select: none; }
.vp-raster.nur-lesen .vp-slot:hover, .vp-raster.vp-abgeschlossen .vp-slot:hover { background: inherit; }
[data-vp-hinweis][hidden] { display: none; }
.verf-eintraege-titel { display: flex; align-items: center; gap: var(--a3); width: 100%; margin: 0 0 var(--a2); }
.verf-eintraege-titel::after { content: ""; flex: 1; border-top: 1px solid var(--linie); }




.med-abschnitt { margin-top: var(--a4); }
.abschnitt-linie, .akt-monat, .tb-zuo-label { display: flex; align-items: center; gap: var(--a3); margin: 0 0 var(--a2); font-size: var(--gr-etikett); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-leise); }
.abschnitt-linie::after { content: ""; flex: 1; border-top: 1px solid var(--linie); }
.akt-monat::after, .tb-zuo-label::after { content: ""; flex: 1; height: 1px; background: var(--linie); }   

.akt-monat { gap: var(--a2); margin: 0; }


.kachel-kopf > .akt-rund { margin-left: auto; }
.med-badges { display: inline-flex; flex-wrap: wrap; gap: var(--a2); }
.med-badge { gap: var(--a2); padding-left: var(--a3); }
.med-badge-label { font-size: var(--gr-etikett); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-leise); }
.med-z-info { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--a2); }
.med-form { display: grid; gap: var(--a2); }
.med-form .abschnitt-linie { margin: var(--a3) 0 0; }
.med-form .abschnitt-linie:first-child { margin-top: 0; }
.med-dosis-rund { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--a2); }
.med-dosis-rund label { display: grid; justify-items: center; gap: var(--a1); }
.med-dosis-rund input { width: 3rem; height: 3rem; min-height: 0; padding: 0; border-radius: 50%; text-align: center; font-weight: 700; }
.med-dosis-rund span { font-size: var(--gr-mini); color: var(--text-leise); text-transform: uppercase; letter-spacing: .04em; }
.med-form-fuss { display: flex; justify-content: flex-end; margin-top: var(--a3); }
.med-dosis-kreise { display: inline-flex; gap: var(--a2); }
.med-dosis-kreis { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1.5px solid var(--primaer); color: var(--primaer); line-height: 1; }
.med-dosis-kreis b { font-size: var(--gr-klein); }
.med-dosis-kreis small { font-size: .5rem; color: var(--text-leise); text-transform: uppercase; }
.med-dosis-kreis.null { border-color: var(--linie); color: var(--text-leise); opacity: .6; }
.med-kette { display: grid; gap: var(--a3); padding: var(--a3) 0; }
.med-kette + .med-kette { border-top: 1px solid var(--linie); }
.med-kette-kopf { display: grid; grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr) auto; align-items: center; gap: var(--a3); }
.med-kette-titel { display: flex; flex-direction: column; align-items: flex-start; gap: var(--a1); }
.med-fassungen { list-style: none; margin: 0; padding: 0; display: grid; }
.med-fassungen li { display: grid; grid-template-columns: minmax(9rem, 13rem) auto minmax(0, 1fr) auto; align-items: center; gap: var(--a3); padding: var(--a2) 0; border-top: 1px dashed var(--linie); }
.med-fassung-diff { display: flex; flex-wrap: wrap; gap: var(--a1) var(--a2); }
.med-beendet .med-kette-titel strong { color: var(--text-leise); }
@container seite (max-width: 40rem) { .med-kette-kopf { grid-template-columns: minmax(0, 1fr); } .med-fassungen li { grid-template-columns: minmax(0, 1fr) auto; } .med-fassung-diff, .med-fassung-von { grid-column: 1 / -1; } }
.felder > .med-form { grid-column: 1 / -1; }


.med-seite-aktionen { display: flex; gap: var(--a3); align-items: flex-start; }
.med-pille { position: relative; }
.med-ecke { position: absolute; right: -.25rem; bottom: -.25rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--flaeche, var(--j-weiss)); border: 1.5px solid var(--primaer); color: var(--primaer); display: flex; align-items: center; justify-content: center; font-style: normal; }
.med-ecke .symbol { width: 9px; height: 9px; }
.med-pk { list-style: none; margin: 0; padding: 0; display: grid; }
.med-pk li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--a3); padding: var(--a2) 0; border-top: 1px solid var(--linie); }
.med-pk li:first-child { border-top: 0; }
.med-pk-text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--a1); min-width: 0; }
.blatt .med-dosis-kreis { width: 1.875rem; height: 1.875rem; }
.blatt .med-dosis-kreis b { font-size: var(--gr-zusatz); }
.blatt .med-dosis-kreis small { font-size: .4375rem; }
.med-matrix { width: 100%; border-collapse: collapse; font-size: var(--gr-klein); }
.med-matrix th { text-align: center; font-size: var(--gr-etikett); text-transform: uppercase; letter-spacing: .04em; color: var(--text-leise); padding: var(--a1) var(--a2); border-bottom: 1px solid var(--linie); }
.med-matrix th .abschnitt-linie { margin: 0; }
.med-matrix th .abschnitt-linie::after { content: none; }
.med-matrix th:first-child { text-align: left; padding-left: 0; }
.med-matrix td { padding: var(--a2); border-top: 1px solid var(--linie); vertical-align: middle; }
.med-matrix tr:first-child td { border-top: 0; }
.med-matrix td:first-child { padding-left: 0; }
.med-matrix td small { display: block; color: var(--text-leise); }
.med-matrix td.zahl { text-align: center; font-weight: 700; }

@container seite (max-width: 64rem) { .blatt .blatt-zu { display: none; } .blatt-griff { cursor: pointer; } }
.blatt .med-matrix td .marke { margin-top: var(--a1); }


.blatt-kopf { padding-bottom: var(--a3); border-bottom: 1px solid var(--linie); }
.blatt-kopf h2 { font-size: var(--gr-klein); font-weight: 700; color: var(--akzent); text-transform: uppercase; letter-spacing: .04em; }
.blatt .med-seite-aktionen { padding-bottom: var(--a3); }
.blatt .abschnitt-linie { color: var(--akzent); }
.blatt .blatt-panel > .hinweis:first-child { margin: 0; }

.blatt-panel[data-ansicht="regel"] [data-ansicht-nur="bedarf"], .blatt-panel[data-ansicht="bedarf"] [data-ansicht-nur="regel"] { display: none; }
.med-bedarf-text { font-size: var(--gr-klein); }
.blatt .blatt-panel form + form { margin-top: var(--a4); }
.blatt .med-form-fuss { justify-content: center; }

.akte-raster4 { grid-auto-rows: 1fr; }
.akte-med-kurz { display: grid; grid-template-columns: minmax(0, 1fr) max-content max-content; column-gap: var(--a4); row-gap: 0; margin: 0; padding: 0; list-style: none; }
.akte-med-kurz > li { display: contents; }
.akte-med-kurz > li > * { padding: var(--a2) 0; border-top: 1px solid var(--linie); align-self: center; }
.akte-med-kurz > li:first-child > * { border-top: 0; }
.akte-med-kurz .akte-med-schema { text-align: right; }
.akte-med-kurz .marke { grid-column: 1 / -1; justify-self: start; padding: 0 var(--a2); border-top: 0; margin-bottom: var(--a2); }
.akte-med-kurz { column-gap: 0; }
.akte-med-kurz > li > * { padding-right: var(--a4); }
.akte-med-kurz > li > *:nth-child(3) { padding-right: 0; }
.akte-med-kurz .akte-med-staerke { text-align: right; white-space: nowrap; }
.akte-med-kurz .marke { padding: 0 var(--a2); }

.akt-rund-klein .akt-rund-kreis { width: 1.875rem; height: 1.875rem; }
.akt-rund-klein .akt-rund-kreis .symbol { width: 14px; height: 14px; }
.akt-rund-klein .akt-rund-text { display: none; }
.blatt .med-seite-aktionen:has(.akt-rund-klein:only-child) { padding-bottom: 0; border-bottom: 0; }

@container seite (max-width: 64rem) { .blatt { overscroll-behavior: contain; } }
@container seite (min-width: 64.01rem) { .akte-raster > .blatt { max-height: var(--blatt-max, calc(100dvh - 2 * var(--a4))); overflow-y: auto; overscroll-behavior: auto; scrollbar-gutter: stable; } }
@media (max-width: 64rem) { html.blatt-offen, html.blatt-offen body { overflow: hidden; } }


.vw-kachel { --vw-z: 2.375rem; --vw-gap: .375rem; --vw-name: 6rem; }
.vw-raster { display: grid; gap: 0; }
.vw-zeile { display: grid; grid-template-columns: minmax(var(--vw-name), 1fr) repeat(var(--vw-n, 7), var(--vw-z)); column-gap: var(--vw-gap); align-items: center; padding: var(--a1) 0; }
.vw-zeile + .vw-zeile:not(.vw-kopfzeile) { border-top: 1px dashed var(--linie); }
.vw-kopfzeile { padding: 0 0 var(--a1); }
.vw-tag { display: flex; flex-direction: column; align-items: center; line-height: 1.15; color: var(--text-leise); }
.vw-tag small { font-size: var(--gr-mini); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.vw-tag b { font-size: var(--gr-klein); font-variant-numeric: tabular-nums; }
.vw-tag.we { opacity: .75; }
.vw-tag.heute { color: var(--primaer); }
.vw-tag.heute b { text-decoration: underline 2px var(--akzent); text-underline-offset: 3px; }
.vw-name { min-width: 0; display: flex; flex-direction: column; gap: 1px; padding-right: var(--a2); }
.vw-name strong { font-weight: 700; overflow-wrap: anywhere; }
.vw-name small { color: var(--text-leise); font-size: var(--gr-zusatz); overflow-wrap: anywhere; }
.vw-zelle { box-sizing: border-box; width: var(--vw-z); height: var(--vw-z); border-radius: 50%; padding: 0; margin: 0; display: inline-flex; align-items: center; justify-content: center;
            border: 2px solid var(--linie); background: var(--karte); color: var(--text-leise); font: inherit; font-size: var(--gr-zusatz); font-weight: 700; justify-self: center; }
.vw-zelle .symbol { width: 1.125rem; height: 1.125rem; color: inherit; }
button.vw-zelle { cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
button.vw-zelle:hover, button.vw-zelle:focus-visible { border-color: var(--primaer); box-shadow: 0 0 0 3px var(--j-nacht-50); }
button.vw-zelle:active { transform: scale(.94); }
.vw-offen { border-color: var(--j-stein-300); }
.vw-offen.vw-zu { border-style: dashed; opacity: .55; }
.vw-gegeben { background: var(--j-ok-bg); border-color: var(--j-ok-fg); color: var(--j-ok-fg); }
.vw-nicht { background: var(--j-fehler-bg); border-color: var(--j-fehler-fg); color: var(--j-fehler-fg); }
.vw-zelle.vw-leer, .vw-bedarf.vw-zu:not(.vw-gegeben) { width: .375rem; height: .375rem; border: 0; background: var(--linie); opacity: .7; }
.vw-bedarf:not(.vw-gegeben) { border-style: dashed; }
.vw-gaben { list-style: none; margin: 0; padding: 0; display: grid; }
.vw-gaben > li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto auto; gap: var(--a3); align-items: center; padding: var(--a2) 0; }
.vw-gaben > li + li { border-top: 1px dashed var(--linie); }
.vw-gabe-tag { color: var(--text-leise); font-size: var(--gr-klein); }
.vw-gabe-text { min-width: 0; overflow-wrap: anywhere; }
.vw-gaben .akt-rund { margin-left: 0; min-width: 0; }
@container seite (max-width: 44rem) { .vw-kachel { --vw-z: 1.875rem; --vw-gap: .25rem; --vw-name: 3.5rem; } .vw-zeile { grid-template-columns: minmax(var(--vw-name), 1fr) repeat(var(--vw-n, 7), var(--vw-z)); } .vw-zelle .symbol { width: .9375rem; height: .9375rem; } .vw-zelle { font-size: var(--gr-etikett); border-width: 1.5px; } .vw-gaben > li { grid-template-columns: minmax(0, 1fr) auto auto; } .vw-gaben .vw-gabe-tag { grid-column: 1 / -1; } }


.vp-raster.vp-abgeschlossen #vp-kalender, .vp-raster.vp-abgeschlossen .vp-fuss, .vp-raster.vp-abgeschlossen .vp-legende { pointer-events: none; }
.vp-raster.vp-abgeschlossen .vp-slot, .vp-raster.vp-abgeschlossen .kalender-tag { cursor: default; }
.vp-pub-sperre, .vp-abschluss.akt-rund-aus { pointer-events: none; }

.verf-seite .verf-inhalt { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.verf-seite .verf-inhalt[hidden] { display: none; }
.verf-seite .sms-box { display: flex; flex-direction: column; flex: 1 1 auto; gap: var(--a1); min-height: 7rem; }
.verf-seite .sms-box textarea { resize: none; flex: 1 1 auto; min-height: 4.5rem; height: auto; }
.verf-seite .sms-zaehler { align-self: flex-end; }


.vw-scroll { overflow-x: auto; overscroll-behavior-x: contain; margin: 0 calc(var(--a1) * -1); padding: 0 var(--a1); }
.vw-raster { min-width: max-content; }
.vw-scroll.vw-eng { --vw-z: 1.875rem; --vw-gap: .25rem; }
.vw-scroll.vw-eng .vw-zelle .symbol { width: .9375rem; height: .9375rem; }
.vw-scroll.vw-eng .vw-zelle { font-size: var(--gr-etikett); }
.vw-scroll.vw-eng { --vw-name: 6.5rem; }
.vw-name, .vw-kopfzeile > :first-child { position: sticky; left: 0; z-index: 1; background: var(--karte); }
.vw-raster .abschnitt-linie { position: sticky; left: 0; width: max-content; }
.vw-kachel .tb-zeitraum { margin-bottom: var(--a3); }
@container seite (max-width: 44rem) { .vw-scroll.vw-eng { --vw-z: 1.75rem; --vw-name: 4.5rem; } }
.akte-raster > .akte-haupt, .vw-kachel { min-width: 0; max-width: 100%; }
.vw-scroll { max-width: 100%; }


.vw-kachel { min-height: 26rem; }
@container seite (min-width: 64.01rem) { .vw-rahmen { align-items: stretch; } .vw-rahmen > .blatt { position: relative; top: auto; align-self: stretch; contain: size; max-height: none; overflow-y: auto; } .vw-rahmen.vw-voll { grid-template-columns: minmax(0, 1fr); } .vw-rahmen.vw-voll > .blatt { display: none; } }
.vw-scroll.vw-monat { --vw-z: 1.5rem; --vw-gap: 2px; }
.vw-scroll.vw-monat .vw-zeile { grid-template-columns: minmax(var(--vw-name), 1fr) repeat(var(--vw-n, 7), minmax(var(--vw-z), 1fr)); column-gap: var(--vw-gap); }
.vw-scroll.vw-monat .vw-raster { min-width: 0; }
.vw-scroll.vw-monat .vw-zelle { justify-self: center; font-size: var(--gr-mini); border-width: 1.5px; }
.vw-scroll.vw-monat .vw-zelle .symbol { width: .75rem; height: .75rem; }
.vw-scroll.vw-monat .vw-tag { font-size: var(--gr-etikett); }
.vw-scroll.vw-monat .vw-tag b { font-size: var(--gr-zusatz); }
.vw-scroll.vw-monat { --vw-name: 7rem; }
.vw-liste { display: none; }
.vw-chip { display: inline-flex; align-items: center; gap: var(--a2); min-width: 0; padding: 2px var(--a2) 2px 2px; border: 1px solid var(--linie); border-radius: 999px; background: var(--karte); font: inherit; color: var(--text); text-align: left; }
button.vw-chip { cursor: pointer; }
button.vw-chip:active { transform: scale(.97); }
.vw-chip .vw-zelle { width: 1.75rem; height: 1.75rem; flex: none; }
.vw-chip-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--gr-klein); font-weight: 600; }
.vw-tagblock { padding: var(--a2) 0; border-top: 1px solid var(--linie); display: grid; gap: var(--a2); }
.vw-tagblock:first-child { border-top: 0; }
.vw-tagkopf { display: flex; align-items: baseline; gap: var(--a2); margin: 0; font-size: var(--gr-klein); color: var(--text-leise); text-transform: none; letter-spacing: 0; }
.vw-tagkopf span { font-size: var(--gr-etikett); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; min-width: 1.5rem; }
.vw-tagkopf b { color: var(--text); font-size: var(--gr-text); }
.vw-tagkopf.heute b { text-decoration: underline 2px var(--akzent); text-underline-offset: 3px; color: var(--primaer); }
.vw-tz { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); gap: var(--a2); align-items: start; }
.vw-tz-l { padding-top: .35rem; font-size: var(--gr-etikett); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--akzent); }
.vw-chips { display: flex; flex-wrap: wrap; gap: var(--a1) var(--a2); min-width: 0; }
@container seite (max-width: 44rem) { .vw-scroll { display: none; } .vw-liste { display: block; } }


.vw-raster .vw-abschnitt { position: static; width: 100%; margin: var(--a3) 0 var(--a1); }
.vw-raster .vw-abschnitt span { position: sticky; left: 0; background: var(--karte); padding-right: var(--a1); }
.vw-raster .vw-kopfzeile { padding-bottom: 0; }
.vw-raster .med-abschnitt + .med-abschnitt { margin-top: 0; }
.vw-wahlzeile { display: flex; align-items: center; justify-content: space-between; gap: var(--a3); margin-bottom: var(--a3); }
.vw-wahlzeile .tb-zeitraum { margin: 0; min-width: 0; }

.vw-wahlzeile { align-items: flex-start; margin-bottom: var(--a6, 2rem); }
.vw-raster .vw-kopfzeile + .med-abschnitt .vw-abschnitt { margin-top: var(--a1); }


@container seite (max-width: 44rem) { .vw-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a2); } .vw-chip { width: 100%; } }
@container seite (max-width: 64rem) { .vw-wahlzeile { display: block; position: relative; margin-bottom: var(--a3); } .vw-wahlzeile .jahr-wahl { min-height: 3.25rem; display: flex; align-items: center; } .vw-wahlzeile .tb-zeitraum { width: 100%; gap: var(--a2); } .vw-wahlzeile .tb-monate { width: 100%; } }
@container seite (min-width: 64.01rem) { .vw-rahmen.vw-voll > .blatt.offen { transform: none; visibility: visible; transition: transform .25s ease; } .vw-rahmen.vw-voll .blatt .blatt-zu { display: inline-flex; } }@media (min-width: 64.01rem) { .vw-rahmen.vw-voll > .blatt { display: flex; position: fixed; top: var(--a4); right: var(--a4); bottom: var(--a4); left: auto; width: 22rem; max-height: none; contain: none;
    z-index: 70; transform: translateX(calc(100% + 2rem)); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; box-shadow: 0 10px 34px rgba(0, 0, 0, .22); } }


.tb-doku-kachel .tb-doku-eigen .tb-doku-link { box-shadow: none; position: relative; }
.tb-doku-kachel .tb-doku-eigen .tb-doku-link::before { content: ""; position: absolute; left: 0; top: var(--a2); bottom: var(--a2); width: 3px; border-radius: 2px; background: var(--akzent); }
.tb-doku-kachel .tb-doku-link { padding-top: var(--a3); padding-bottom: var(--a3); }
.kalender-liste .kalender-tag.heute .tag-nr { text-decoration: none; }
.kalender-liste .kalender-tag.heute .tag-nr .tag-zahl { text-decoration: underline 2px var(--akzent); text-underline-offset: 3px; }
.team-kal .kalender-tag.heute .tag-nr .tag-zahl { text-decoration: none; }
.akte-warnung-solo { margin: 0 0 var(--a3); }
.vw-rund { display: flex; align-items: flex-start; gap: var(--a3); margin-left: auto; flex: none; }
.vw-rund .akt-rund { margin: 0; }
.vw-tag.zukunft { opacity: .45; }
@container seite (max-width: 64rem) { .vw-wahlzeile .vw-rund { position: absolute; top: 0; right: 0; } }
@container seite (max-width: 44rem) { .vw-chips { grid-template-columns: minmax(0, 1fr); } .vw-chip { align-items: flex-start; border-radius: var(--rund-m, 12px); padding: var(--a1) var(--a3) var(--a1) var(--a1); } .vw-chip .vw-zelle { margin-top: 1px; } .vw-chip-t { display: flex; flex-direction: column; overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; font-weight: 400; align-self: center; } .vw-chip-t b { font-weight: 700; font-size: var(--gr-text); } .vw-chip-t small { color: var(--text-leise); font-size: var(--gr-zusatz); } .vw-tz { grid-template-columns: 4rem minmax(0, 1fr); } }



.blatt-kopf h2 { flex: 1; min-width: 0; }
.blatt-kopf .blatt-zurueck { flex: none; margin: 0; }
.blatt-kopf .blatt-zurueck[hidden] { display: none; }
.blatt .med-panel-info { margin: 0; }

.med-art { display: flex; gap: 2px; padding: 3px; border-radius: var(--rund-voll); background: var(--flaeche); border: 1px solid var(--linie); }
.med-art label { flex: 1; display: block; margin: 0; }
.med-art input { position: absolute; opacity: 0; pointer-events: none; }
.med-art span { display: block; padding: var(--a2) var(--a3); border-radius: var(--rund-voll); text-align: center; color: var(--text-leise); font-weight: 600; font-size: var(--gr-klein); cursor: pointer; }
.med-art input:checked + span { background: var(--karte); color: var(--primaer); box-shadow: var(--schatten); }
.med-form:has(input[name="art"][value="bedarf"]:checked) .med-sek-regel { display: none; }
.med-form:has(input[name="art"]):not(:has(input[name="art"][value="bedarf"]:checked)) .med-sek-bedarf { display: none; }
.med-sek-regel, .med-sek-bedarf { display: grid; gap: var(--a2); }
.med-sek-regel .abschnitt-linie, .med-sek-bedarf .abschnitt-linie { margin-top: var(--a3); }

.med-gruppe { padding: var(--a3) 0; }
.med-gruppe + .med-gruppe { border-top: 1px solid var(--linie); }
.med-gruppe-name { display: flex; align-items: center; gap: var(--a3); margin: 0 0 var(--a2); font-size: var(--gr-titel); font-weight: 700; color: var(--text); }
.med-gruppe-mehr .med-kette { margin-left: var(--a2); padding-left: var(--a3); border-left: 3px solid var(--akzent); }
.med-gruppe .med-kette + .med-kette { border-top: 0; margin-top: var(--a2); }
.med-staerke { display: inline-flex; align-items: center; align-self: flex-start; padding: 2px var(--a3); border-radius: var(--rund-voll); background: var(--j-nacht-900); color: var(--auf-primaer, var(--j-weiss)); font-weight: 700; font-size: var(--gr-mittel); line-height: 1.5; }
.med-staerke-leer { background: none; border: 1px dashed var(--linie); color: var(--text-leise); font-weight: 600; font-size: var(--gr-klein); }
.med-beendet .med-staerke { background: var(--j-neutral-bg); color: var(--j-neutral-fg); }
.med-status .j-badge-symbol { width: 1.25rem; height: 1.25rem; }
.med-status .j-badge-symbol .symbol { width: 12px; height: 12px; }
.med-status-ok { border-color: transparent; background: var(--j-ok-bg); color: var(--j-ok-fg); }
.med-status-ok .j-badge-symbol { background: transparent; color: inherit; }
.med-status-aus { border-color: transparent; background: var(--j-neutral-bg); color: var(--j-neutral-fg); }
.med-diff { border-color: transparent; background: var(--j-nacht-50); color: var(--primaer); }
.med-diff-neu { background: var(--j-neutral-bg); color: var(--j-neutral-fg); }
.med-diff .j-badge-symbol { width: 1.25rem; height: 1.25rem; background: transparent; }
.med-diff .j-badge-symbol .symbol { width: 12px; height: 12px; }
.med-fassung-von .j-badge { justify-self: end; }
.med-fassung-von { justify-self: end; max-width: 100%; }
.med-dosis-kreis b { font-size: var(--gr-text); }




@container seite (max-width: 64rem) { .blatt-schleier[hidden] { display: none; } .blatt { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .blatt-griff { height: 1.75rem; margin-top: calc(-1 * var(--a3)); } .blatt-griff::before { top: .625rem; } .blatt-kopf { position: sticky; top: calc(-1 * var(--a4)); z-index: 2; background: var(--karte); margin-top: calc(-1 * var(--a2)); padding-top: var(--a2); } }@media (max-width: 64rem) { body.blatt-sperre { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; } .blatt-schleier { position: fixed; inset: 0; z-index: 69; background: var(--schleier, rgba(0, 0, 0, .45)); touch-action: none; } }


@container seite (max-width: 44rem) { .vw-tz { display: block; margin-top: var(--a3); } .vw-tz-l { display: flex; align-items: center; gap: var(--a3); padding: 0; margin-bottom: var(--a2); } .vw-tz-l::after { content: ""; flex: 1; border-top: 1px solid var(--linie); } }

.med-kette-titel { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--a2); }
.med-kette-kopf { grid-template-columns: minmax(0, 1fr) auto; }
.med-kette-kopf .med-z-info { grid-column: 1 / -1; }
.med-fassungen li { grid-template-columns: auto auto minmax(0, 1fr) auto; }
.med-zeitraum { display: inline-flex; align-items: center; gap: var(--a2); flex-wrap: wrap; font-weight: 400; }
.med-bis { display: inline-flex; color: var(--text-leise); }
.med-bis .symbol { width: 14px; height: 14px; }
.med-datum { border-color: var(--linie); background: var(--karte); color: var(--text); }
.med-datum .j-badge-symbol { background: transparent; color: var(--text-leise); width: 1.25rem; height: 1.25rem; }
.med-datum .j-badge-symbol .symbol { width: 12px; height: 12px; }
.med-datum-heute { border-color: transparent; background: var(--primaer); color: var(--auf-primaer, var(--j-weiss)); }
.med-datum-heute .j-badge-symbol { color: inherit; }
.med-diff-neu { background: var(--j-info-bg); color: var(--j-info-fg); }
.med-diff-neu .j-badge-symbol { color: inherit; }
.med-status-aus .j-badge-symbol { background: transparent; color: inherit; }
.med-dosis-leer { display: none; }
@media (max-width: 40rem), (max-width: 64rem) {
  .med-fassungen li { grid-template-columns: minmax(0, 1fr); gap: var(--a2); }
  .med-fassungen li > * { grid-column: 1 / -1; justify-self: start; min-width: 0; }
  .med-fassungen .med-fassung-von { justify-self: start; }
  .med-fassungen .med-dosis-kreise { justify-self: start; }
  .med-fassungen .med-fassung-diff { grid-column: 1 / -1; }
}
@container seite (max-width: 40rem) { .med-kette-kopf { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; } .med-gruppe .med-kette { padding: var(--a3); } .med-gruppe-name { padding: var(--a3); } }
.med-datum-heute .j-badge-symbol, .med-datum-heute .j-badge-symbol .symbol { background: transparent; color: var(--auf-primaer, var(--j-weiss)); }


.akte-med-kurz { column-gap: 0; }
.akte-med-kurz > li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; border-top: 1px solid var(--linie); padding: var(--a2) 0; }
.akte-med-kurz > li:first-child { border-top: 0; padding-top: 0; }
.akte-med-kurz > li > * { border-top: 0; padding: 0 var(--a4) 0 0; }
.akte-med-kurz > li > *:nth-child(3) { padding-right: 0; }
.akte-med-kurz .marke { grid-column: 1 / -1; margin: var(--a1) 0 0; padding: 0 var(--a2); }
.med-staerke-feld { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem; gap: var(--a2); }
.med-form .j-datum { justify-self: start; }


.vp-slot { container-type: inline-size; }
.vp-slot-kopf { flex-wrap: nowrap; }
.vp-slot-kopf > span:first-child { white-space: nowrap; min-width: 0; overflow: hidden; }
.vp-slot .vp-marke { display: inline-flex; align-items: center; gap: .2em; white-space: nowrap; flex: none; line-height: 1.4; }
.vp-slot .vp-m-sym { font-weight: 700; }
@container (max-width: 9.5rem) { .vp-slot .vp-m-text { display: none; } .vp-slot .vp-marke { padding: 0 .4rem; } }


@container seite (min-width: 64.01rem) { .vw-rahmen:not(.vw-voll) > .blatt { position: sticky; top: var(--a4); align-self: start; contain: none;
    height: min(var(--vw-h, 26rem), calc(100dvh - 2 * var(--a4))); max-height: none; overflow-y: auto; } }


.nous-marke { display: inline-block; margin-left: .25em; padding: 0 .4em; border-radius: var(--rund-voll); background: var(--akzent); color: var(--j-nacht-900); font-size: var(--gr-mini); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; }


.med-matrix td.zahl { position: relative; }
.med-matrix td.zahl + td.zahl::before { content: "–"; position: absolute; left: 0; top: 50%; transform: translate(-50%, -50%); color: var(--text-leise); font-weight: 400; }


.kachel-radiale { display: inline-flex; align-items: center; gap: var(--a3); }
.kp { width: min(32rem, calc(100vw - 1.5rem)); max-height: min(44rem, calc(100dvh - 2rem)); overflow: hidden; }
.kp[open] { display: flex; flex-direction: column; }
.kp > .kp-ansicht { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.kp > .kp-ansicht[hidden] { display: none; }
.kp form[data-kp-form] { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.kp-kopf { display: flex; align-items: center; gap: var(--a3); padding: var(--a3) var(--a4); border-bottom: 1px solid var(--linie); }
.kp-kopf h2 { margin: 0; font-size: var(--gr-titel); }
.kp-kopf-rechts { margin-left: auto; display: inline-flex; align-items: center; gap: var(--a3); }
.kp-zahl { min-width: 1.5rem; padding: 0 .4rem; border-radius: var(--rund-voll); background: var(--akzent); color: var(--j-nacht-900); font: 700 var(--gr-etikett)/1.4rem var(--schrift); text-align: center; }
.kp-suche { margin: var(--a3) var(--a4) var(--a2); }
.kp-filter { display: flex; flex-wrap: wrap; gap: var(--a2); padding: 0 var(--a4) var(--a3); }
.kp-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--a3) var(--a3); overscroll-behavior: contain; }
.kp-scroll.kp-form { padding: var(--a4); }
.kp-liste { list-style: none; margin: 0; padding: 0; display: grid; }
.kp-eintrag { border-top: 1px solid var(--linie); }
.kp-eintrag:first-child { border-top: 0; }
.kp-eintrag[hidden] { display: none; }
.kp-zeile { display: flex; align-items: center; gap: var(--a3); padding: var(--a2); border-radius: var(--rund-m); }
.kp-eintrag.offen > .kp-zeile { background: var(--j-nacht-50); }
.kp-text { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 0; border: 0; background: none; text-align: left; font: inherit; color: var(--text); cursor: pointer; }
.kp-text strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-text small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-leise); font-size: var(--gr-klein); }
.kp-klient { display: inline-flex; align-items: center; gap: var(--a1); font-size: var(--gr-etikett); font-weight: 600; color: var(--text-leise); }
.kp-klient .symbol { width: 12px; height: 12px; }
.kp-aktionen { flex: none; display: inline-flex; align-items: center; gap: var(--a2); }
.kp-knopf { display: inline-flex; align-items: center; justify-content: center; gap: var(--a1); min-width: 2.5rem; height: 2.5rem; padding: 0 var(--a2); border: 1px solid var(--j-nacht-100); border-radius: var(--rund-voll);
  background: var(--karte); color: var(--primaer); text-decoration: none; font-size: var(--gr-klein); font-weight: 600; }
.kp-knopf:hover { border-color: var(--primaer); background: var(--j-nacht-50); }
.kp-knopf .symbol { width: 16px; height: 16px; }
.kp-anruf { background: var(--primaer); border-color: var(--primaer); color: var(--auf-primaer); }
.kp-anruf:hover { background: var(--primaer); filter: brightness(1.15); }
.kp-anruf span { display: none; }
.kp-detail { display: grid; gap: var(--a2); padding: var(--a2) var(--a2) var(--a3) calc(2.5rem + var(--a3) + var(--a2)); }
.kp-detail[hidden] { display: none; }
.kp-d { display: grid; gap: 1px; font-size: var(--gr-klein); }
.kp-d b { font-size: var(--gr-mini); letter-spacing: .05em; text-transform: uppercase; color: var(--akzent); }
.kp-d-fuss { display: flex; gap: var(--a2); flex-wrap: wrap; }
.kp-d-fuss form { margin: 0; }
.kp-leer { margin: var(--a4); text-align: center; }
.kp .formular-fuss { margin: 0; padding: var(--a3) var(--a4); border-top: 1px solid var(--linie); }
@container seite (max-width: 44rem) { .kp-aktionen { gap: var(--a1); } .kp-knopf { min-width: 2.75rem; height: 2.75rem; padding: 0; } .kp-anruf { min-width: 2.75rem; height: 2.75rem; } .kp-zeile { gap: var(--a2); } .kp-detail { padding-left: var(--a2); } }
.kachel-kopf > .kachel-radiale { align-self: flex-start; }
.kachel-kopf:has(> .kachel-radiale) { align-items: flex-start; }


.tz { display: grid; gap: var(--a3); margin-bottom: var(--a3); padding: var(--a3) var(--a4); border: 1px solid var(--linie); border-radius: var(--rund-m); background: var(--j-stein-50); }
.tz-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--a1) var(--a3); }
.tz-titel { margin: 0; font-size: var(--gr-etikett); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--akzent); }
.tz fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.tz legend { padding: 0; margin-bottom: var(--a1); font-size: var(--gr-klein); font-weight: 600; color: var(--text-leise); }
.tz-zeile { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--a3); }
.tz-chips { display: flex; flex-wrap: wrap; gap: var(--a2); }
.tz-chips legend { flex-basis: 100%; }
.tz .chip-wahl input:checked + span { border-color: var(--primaer); background: var(--primaer); color: var(--auf-primaer); font-weight: 700; }
.tz .chip-leer input:checked + span { background: var(--j-neutral-bg); color: var(--text); border-color: var(--linie); }
.tz-e-fehler input:checked + span { background: var(--j-fehler-bg) !important; color: var(--j-fehler-fg) !important; border-color: var(--j-fehler-fg) !important; }
.tz-e-warn input:checked + span { background: var(--j-warn-bg) !important; color: var(--j-warn-fg) !important; border-color: var(--j-warn-fg) !important; }
.tz-e-ok input:checked + span { background: var(--j-ok-bg) !important; color: var(--j-ok-fg) !important; border-color: var(--j-ok-fg) !important; }
.tz-e-info input:checked + span { background: var(--j-info-bg) !important; color: var(--j-info-fg) !important; border-color: var(--j-info-fg) !important; }
.tz-lesen { padding: var(--a2) var(--a3); }
.tz-badges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a2); }
.tz-ressource { display: flex; align-items: flex-start; gap: var(--a2); margin: 0; font-size: var(--gr-klein); color: var(--j-ok-fg); }
.tz-ressource .symbol { flex: none; margin-top: 2px; }
.tz-ressource span { color: var(--text); }


.akte-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--a3); margin-bottom: var(--a4); }
.akte-leiste .akte-filter { margin-bottom: 0; }
.akte-leiste-aktionen { display: flex; align-items: center; gap: var(--a3); }
.akte-stat { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--a4); margin-bottom: var(--a4); align-items: stretch; }
.akte-stat-karte { min-width: 0; }
.stat-balkenliste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--a2); }
.stat-balkenliste li { display: grid; grid-template-columns: minmax(6.5rem, 9rem) minmax(0, 1fr) 1.5rem; align-items: center; gap: var(--a2); font-size: var(--gr-klein); }
.stat-leiste { height: .625rem; border-radius: var(--rund-voll); background: var(--j-stein-100); overflow: hidden; }
.stat-fuell { display: block; height: 100%; border-radius: inherit; background: var(--j-nacht-500, var(--primaer)); }
.stat-fuell.stat-fehler { background: var(--j-fehler-fg); } .stat-fuell.stat-warn { background: #d68910; } .stat-fuell.stat-ok { background: var(--j-ok-fg); } .stat-fuell.stat-info { background: var(--j-info-fg); }
.stat-balkenliste b { text-align: right; }
.stat-werte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a3) var(--a4); margin: 0; }
.stat-werte dt { font-size: var(--gr-etikett); text-transform: uppercase; letter-spacing: .04em; color: var(--text-leise); }
.stat-werte dd { margin: 0; font-size: var(--gr-gross); font-weight: 700; }
.stat-werte small { font-size: var(--gr-etikett); font-weight: 400; color: var(--text-leise); }
.stat-ressourcen { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--a2); font-size: var(--gr-klein); }
.stat-ressourcen li { display: flex; gap: var(--a2); align-items: flex-start; color: var(--j-ok-fg); }
.stat-ressourcen li > span { color: var(--text); }
.stat-ressourcen .symbol { flex: none; margin-top: 2px; }
.akte-tage { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--a2); }
.akte-tag-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a2) var(--a3); margin-top: var(--a3); padding-top: var(--a3); border-top: 1px solid var(--linie); }
.akte-tage > .akte-tag-kopf:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.akte-tag-titel { font-weight: 700; font-variant-numeric: tabular-nums; }
.akte-tag-chips { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--a2); }
.akte-karte { margin-left: var(--a5); padding: var(--a3) var(--a4); border: 1px solid var(--linie); border-left: 4px solid var(--j-stein-300); border-radius: var(--rund-m); background: var(--karte); }
.akte-karte.doku-tb { border-style: dashed; border-left-style: solid; background: var(--j-stein-50); border-left-color: var(--text-leise); }
.akte-karte.doku-kat-arzt { border-left-color: #c0392b; } .akte-karte.doku-kat-hilfeplan { border-left-color: #7d3c98; } .akte-karte.doku-kat-schule { border-left-color: #2471a3; }
.akte-karte.doku-kat-familie { border-left-color: #d68910; } .akte-karte.doku-kat-krise { border-left-color: var(--j-fehler-fg); }
.akte-karte .akte-verlauf-kopf { margin-bottom: var(--a2); }
@container seite (max-width: 44rem) { .akte-karte { margin-left: 0; } }

@container seite (min-width: 64.01rem) { .akte-stat { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row; align-items: stretch; } }
.stat-werte dd small { white-space: nowrap; }
.stat-werte { grid-template-columns: repeat(2, minmax(0, auto)); justify-content: space-between; }

.pinnwand { margin-bottom: var(--a5); }
.pinn-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--a3); margin-bottom: var(--a3); }
.pinn-kopf h2 { margin: 0; font-size: var(--gr-titel); }
.pinn-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--a4); align-items: start; }
.pinn-karte { position: relative; display: flex; flex-direction: column; gap: var(--a2); padding: var(--a4); border: 1px solid var(--linie);
  border-radius: var(--rund-m); background: var(--karte); box-shadow: var(--schatten); border-top-width: 4px; min-width: 0; }
.pinn-karte header { display: flex; align-items: center; justify-content: space-between; gap: var(--a2); }
.pinn-karte h3 { margin: 0; font-size: var(--gr-text); }
.pinn-karte p { margin: 0; }
.pinn-art { display: inline-flex; align-items: center; gap: var(--a1); font-size: var(--gr-etikett); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-leise); }
.pinn-art .symbol { width: 14px; height: 14px; }
.pinn-bernstein { border-top-color: var(--j-bernstein-500); }
.pinn-nacht { border-top-color: var(--j-nacht-900); }
.pinn-gruen { border-top-color: var(--j-ok-fg); }
.pinn-rot { border-top-color: var(--j-fehler-fg); }
.pinn-blau { border-top-color: var(--j-info-fg); }
.pinn-neutral { border-top-color: var(--j-stein-500); }
.pinn-fest { box-shadow: 0 0 0 2px var(--akzent), var(--schatten); }
.pinn-nadel { display: inline-flex; color: var(--akzent); }
.pinn-nadel .symbol { width: 16px; height: 16px; }
.pinn-bild { width: 100%; max-height: 14rem; object-fit: cover; border-radius: var(--rund-s); background: var(--j-nacht-50); }
.pinn-stamm { grid-column: 1 / -1; }
.pinn-stamm .werte { margin: 0; }
@container seite (min-width: 64.01rem) { .pinn-stamm { grid-column: span 2; } }
.pinn-meta { font-size: var(--gr-zusatz); }
.pinn-komm { list-style: none; margin: 0; padding: var(--a2) 0 0; border-top: 1px solid var(--linie); display: grid; gap: var(--a1); font-size: var(--gr-klein); }
.pinn-komm strong { font-weight: 700; }
.pinn-komm .pinn-erw, .pinn-komm-form .pinn-erw { color: var(--primaer); font-weight: 700; }
.pinn-komm-form { position: relative; display: flex; gap: var(--a1); align-items: center; }
.pinn-komm-form input { flex: 1; min-width: 0; padding: var(--a1) var(--a3); border: 1px solid var(--linie); border-radius: var(--rund-voll); font: inherit; font-size: var(--gr-klein); background: var(--karte); color: var(--text); }
.pinn-komm-form input:focus { outline: none; border-color: var(--primaer); box-shadow: 0 0 0 2px var(--j-nacht-100); }
.pinn-karte footer { display: flex; gap: var(--a1); justify-content: flex-end; }
.pinn-karte footer form { margin: 0; }
.pinn-erw-liste { position: absolute; left: 0; right: 0; bottom: calc(100% + 4px); z-index: 30; margin: 0; padding: var(--a1); list-style: none; background: var(--karte);
  border: 1px solid var(--linie); border-radius: var(--rund-m); box-shadow: var(--schatten-dialog); max-height: 11rem; overflow-y: auto; }
.pinn-erw-liste button { width: 100%; text-align: left; padding: var(--a2) var(--a3); border: 0; background: none; border-radius: var(--rund-s); font: inherit; font-size: var(--gr-klein); color: var(--text); cursor: pointer; }
.pinn-erw-liste button:hover, .pinn-erw-liste button[aria-selected="true"] { background: var(--j-nacht-50); }
.pinn-farben { display: flex; flex-wrap: wrap; gap: var(--a2); border: 0; padding: 0; margin: 0; }
.pinn-farben legend { font-size: var(--gr-klein); font-weight: 600; margin-bottom: var(--a1); padding: 0; }
.pinn-farbe { position: relative; display: inline-flex; cursor: pointer; border: 0; box-shadow: none; padding: 0; background: none; }
.pinn-farbe input { position: absolute; opacity: 0; }
.pinn-farbe span { padding: var(--a1) var(--a3); border: 1px solid var(--linie); border-top-width: 4px; border-radius: var(--rund-s); font-size: var(--gr-klein); background: var(--karte); }
.pinn-farbe.pinn-bernstein span { border-top-color: var(--j-bernstein-500); } .pinn-farbe.pinn-nacht span { border-top-color: var(--j-nacht-900); }
.pinn-farbe.pinn-gruen span { border-top-color: var(--j-ok-fg); } .pinn-farbe.pinn-rot span { border-top-color: var(--j-fehler-fg); }
.pinn-farbe.pinn-blau span { border-top-color: var(--j-info-fg); } .pinn-farbe.pinn-neutral span { border-top-color: var(--j-stein-500); }
.pinn-farbe input:checked + span { background: var(--j-nacht-50); border-color: var(--primaer); border-top-color: inherit; font-weight: 700; }

@container seite (min-width: 64.01rem) { .pinn-stamm { grid-column: auto; } }
.pinn-kopf { align-items: center; }
.pinn-raster { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.pinn-stamm .werte-paare { grid-template-columns: minmax(0, 1fr); }


.kopf-wechsel { display: none; }
.seitenkopf > .kopf-wechsel { margin-left: auto; align-self: flex-start; }
@container seite (max-width: 44rem) { .kopf-wechsel { display: inline-flex; } .kopf-metis { display: none; } .seitenkopf:has(> .kopf-wechsel) { flex-wrap: nowrap; align-items: flex-start; } .seitenkopf:has(> .kopf-wechsel) > :first-child { min-width: 0; } }


.kp-griff { display: none; }
.kp-kopf { padding-bottom: var(--a3); }
.kp-kopf h2 { font-size: var(--gr-klein); font-weight: 700; color: var(--akzent); text-transform: uppercase; letter-spacing: .04em; }
body.kp-sperre { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
.kp::backdrop { overscroll-behavior: contain; touch-action: none; }
@keyframes kp-hoch { from { transform: translateY(105%); } to { transform: none; } }
@container seite (max-width: 64rem) { .kp { width: 100vw; max-width: 100vw; max-height: 88dvh; margin: auto 0 0; border-bottom: 0; border-radius: var(--rund-l, 1rem) var(--rund-l, 1rem) 0 0;
    box-shadow: 0 -10px 34px rgba(0, 0, 0, .2); padding-bottom: env(safe-area-inset-bottom, 0px); transition: transform .22s ease; animation: kp-hoch .25s ease; overscroll-behavior: contain; } .kp.kp-zieht { transition: none; } .kp-griff { display: block; position: relative; flex: none; height: 1.75rem; touch-action: none; cursor: pointer; } .kp-griff::before { content: ""; position: absolute; left: 50%; top: .625rem; width: 2.5rem; height: 4px; margin-left: -1.25rem; border-radius: 2px; background: var(--linie); } .kp-kopf { touch-action: none; padding-top: 0; } }
@media (prefers-reduced-motion: reduce) { .kp { animation: none; transition: none; } }


.kachel-kopf:has(> .kachel-radiale) { flex-wrap: nowrap; }
.kachel-kopf:has(> .kachel-radiale) > h2 { margin: 0; line-height: 2.25rem; }
.kachel-kopf > .kachel-radiale { margin-left: auto; flex: none; }
.kachel-kopf > .kachel-radiale { align-items: flex-start; }
.kachel-radiale > .akt-rund { margin: 0; line-height: 1.1; vertical-align: top; }


.team-titelzeile { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--a1) var(--a3); min-width: 0; }
.bereich-wahl { display: none; position: relative; min-width: 0; }
.bereich-wahl .titel-wahl-knopf { margin-left: 0; max-width: 100%; }
.bereich-wahl-menue { left: -6px; right: auto; }
.vw-bez { display: none; }
@container seite (max-width: 44rem) { .bereich-wahl { display: block; } .vw-h1 { display: none; } .vw-bez { display: block; } .bereichskopf, .verwaltung-kopf { margin-bottom: var(--a3); } .titel-wahl-menue.bereich-wahl-menue { min-width: 12rem; } .team-titelzeile .titel-wahl h1, .verwaltung-kopf .titel-wahl h1 { font-size: clamp(1.0625rem, 5.4vw, 1.375rem); flex-wrap: nowrap; } .team-titelzeile > .titel-wahl:first-child { flex: 0 1 auto; min-width: 0; } .team-titelzeile .titel-wahl-knopf { min-width: 0; max-width: 100%; } .team-titelzeile .titel-wahl-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .team-titelzeile > .bereich-wahl { flex: none; } .team-titelzeile { flex-wrap: nowrap; } }

@container seite (max-width: 44rem) { .seitenkopf h1.vw-h1 { display: none; } .bereichskopf > .team-titel, .verwaltung-kopf > .team-titel { flex: 1 1 0; min-width: 0; } .team-titelzeile { gap: var(--a1) var(--a2); } }
@container seite (max-width: 44rem) { .team-titelzeile > .titel-wahl:first-child { flex: 0 1 auto; } .team-titelzeile > .titel-wahl:first-child .titel-wahl-knopf { margin-left: -6px; padding-right: 8px; } .team-titelzeile > .titel-wahl:first-child .titel-wahl-text { flex: 0 1 auto; } .team-titelzeile > .titel-wahl:first-child { padding-left: 0; margin-right: 6px; } }
@container seite (max-width: 44rem) { .team-titelzeile > .titel-wahl:first-child .titel-wahl-knopf { margin-left: 0; padding-left: 0; } .team-titelzeile .bereich-wahl .titel-wahl-knopf { padding-left: 0; } .team-titelzeile .titel-wahl-menue { left: 0; } }
@container seite (max-width: 44rem) { .verwaltung-kopf .bereich-wahl .titel-wahl-knopf { padding-left: 0; padding-top: 0; padding-bottom: 0; } .verwaltung-kopf .titel-wahl-menue.bereich-wahl-menue { left: 0; } .verwaltung-kopf .team-titel { gap: 2px; } .verwaltung-leiste .aktionen { margin-left: auto; } }
@container seite (max-width: 44rem) { .bereichskopf > .team-titel, .verwaltung-kopf > .team-titel { position: relative; } .team-titel .titel-wahl, .team-titelzeile .titel-wahl { position: static; } .team-titel .titel-wahl-menue { left: 0; right: auto; top: 100%; min-width: min(15rem, 100%); max-width: 100%; box-sizing: border-box; } }


@media (max-width: 44rem) and (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .kopf { view-transition-name: seitenkopf; }
  .bereichskopf, .verwaltung-kopf { view-transition-name: bereichskopf; }
  ::view-transition-group(seitenkopf), ::view-transition-group(bereichskopf) { animation-duration: 0s; }
  ::view-transition-old(root) { animation: jup-aus .12s ease-out both; }
  ::view-transition-new(root) { animation: jup-ein .22s ease-out both; }
}
@keyframes jup-aus { to { opacity: 0; } }
@keyframes jup-ein { from { opacity: 0; transform: translateY(6px); } }
@container seite (max-width: 44rem) { .bereichskopf, .verwaltung-kopf { position: relative; z-index: 40; } }


.jahr-wahl-in { display: none; }
@container seite (max-width: 44rem) { .tb-zeitraum-kompakt > .jahr-wahl { display: none; } .tb-zeitraum-kompakt { display: block; } .tb-zeitraum-kompakt .tb-monate { display: grid; grid-template-columns: repeat(6, 1fr); width: 100%; gap: 2px; } .tb-zeitraum-kompakt .tb-monate > .jahr-wahl-in { display: block; grid-column: 1 / 3; grid-row: 1; min-height: 0; } .tb-zeitraum-kompakt .jahr-wahl-in .jahr-wahl-knopf { width: 100%; justify-content: center; box-sizing: border-box; border: 0; background: transparent; padding: var(--a1) var(--a2); border-radius: var(--rund-voll); font-size: var(--gr-klein); font-weight: 700; } .tb-zeitraum-kompakt .jahr-wahl-in .jahr-wahl-menue { left: 0; } .tb-zeitraum-kompakt .jahr-wahl-in .jahr-wahl-menue a { text-align: left; padding: var(--a2) var(--a3); } .tb-zeitraum-kompakt .tb-monate .tb-14 { display: block; grid-column: 3 / -1; grid-row: 1; } .tb-zeitraum-kompakt .tb-monate-trenner { display: none; } .tb-zeitraum-kompakt .tb-monate > .tb-14-leer { display: block; grid-column: 3 / -1; grid-row: 1; } }
.tb-14-leer { display: none; }


@media (max-width: 44rem) and (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: none; }
  ::view-transition-new(root) { animation: jup-ein2 .2s ease-out both; }
  ::view-transition-old(seitenkopf), ::view-transition-old(bereichskopf) { display: none; }
  ::view-transition-new(seitenkopf), ::view-transition-new(bereichskopf) { animation: none; }
  ::view-transition-image-pair(root) { isolation: auto; }
  html::view-transition { background: var(--hintergrund, var(--flaeche, #f6f7fb)); }
}
@keyframes jup-ein2 { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }



.akt-rund-kreis { background: var(--primaer); color: var(--auf-primaer); border-color: var(--primaer); }
.akt-rund:hover .akt-rund-kreis, .akt-rund:focus-visible .akt-rund-kreis,
.akt-rund-menue > summary:focus-visible .akt-rund-kreis, .akt-rund-menue[open] .akt-rund-kreis { background: var(--primaer-hover); border-color: var(--akzent); box-shadow: 0 0 0 2px var(--akzent); }

.akt-rund-ok .akt-rund-kreis { background: var(--j-ok-bg); color: var(--j-ok-fg); border-color: var(--j-ok-fg); }
.akt-rund-fehler .akt-rund-kreis, .akt-rund-gefahr .akt-rund-kreis, a.akt-rund.akt-rund-gefahr .akt-rund-kreis { background: var(--j-fehler-bg); color: var(--j-fehler-fg); border-color: var(--j-fehler-fg); }
.akt-rund-aus .akt-rund-kreis, .akt-rund-aus:hover .akt-rund-kreis { background: var(--j-nacht-50); color: var(--text-leise); border-color: var(--linie); box-shadow: none; }
.vp-pub-sperre .akt-rund-kreis { background: var(--j-nacht-50); }
.verf-abgabe-an .akt-rund-kreis { background: var(--j-ok-bg); color: var(--j-ok-fg); }


.lese-schicht dd { display: flex; align-items: center; justify-content: space-between; gap: var(--a2); }
.lese-datum { margin-left: auto; }
.lese-seite-kopf { margin-bottom: var(--a3); }
.lese-seite .kachel-kopf h2 { font-size: var(--gr-klein); font-weight: 700; color: var(--akzent); text-transform: uppercase; letter-spacing: .04em; }
@container seite (max-width: 44rem) { .lese-flaeche { margin-top: 0; } }


@container seite (max-width: 64rem) { .vp-kachel .kalender-liste .kalender-tag .tag-nr { width: 2.5rem; height: 2.5rem; align-self: center; justify-self: center; gap: 1px;
    border-radius: var(--rund-s); background: var(--j-nacht-50); color: var(--primaer); } .vp-kachel .kalender-liste .kalender-tag .tag-zahl { font-size: var(--gr-mittel); font-weight: 700; text-decoration: none; } .vp-kachel .kalender-liste .kalender-tag .tag-wt { order: 1; font-size: var(--gr-mini); font-weight: 700; color: var(--text-leise); } .vp-kachel .kalender-liste .kalender-tag.heute .tag-nr { background: var(--primaer); color: var(--auf-primaer); text-decoration: none; } .vp-kachel .kalender-liste .kalender-tag.heute .tag-nr .tag-zahl { text-decoration: none; } .vp-kachel .kalender-liste .kalender-tag.heute .tag-wt { color: var(--j-nacht-100); } }
@container seite (max-width: 44rem) { .dpl-handy .kalender-liste .kalender-tag .tag-nr { width: 2.5rem; height: 2.5rem; align-self: center; justify-self: center; gap: 1px;
    border-radius: var(--rund-s); background: var(--j-nacht-50); color: var(--primaer); } .dpl-handy .kalender-liste .kalender-tag .tag-zahl { font-size: var(--gr-mittel); font-weight: 700; text-decoration: none; } .dpl-handy .kalender-liste .kalender-tag .tag-wt { order: 1; font-size: var(--gr-mini); font-weight: 700; color: var(--text-leise); } .dpl-handy .kalender-liste .kalender-tag.heute .tag-nr { background: var(--primaer); color: var(--auf-primaer); text-decoration: none; } .dpl-handy .kalender-liste .kalender-tag.heute .tag-nr .tag-zahl { text-decoration: none; } .dpl-handy .kalender-liste .kalender-tag.heute .tag-wt { color: var(--j-nacht-100); } }


.tb-zuo-kompakt { padding: var(--a3) var(--a4); }


.tb-zuo-raster { display: grid; grid-template-columns: minmax(0, 1fr) 3.5rem; gap: var(--a2) var(--a3); align-items: center; }
.tb-zuo-l { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--a2); }
.tb-zuo-r { display: flex; justify-content: center; align-items: center; }
.tb-zuo-r .akt-rund { margin: 0; }
.tb-zuo-frei { display: block; width: 2.25rem; height: 2.25rem; }
.tb-zuo-raster > :nth-last-child(n+3) { }


.vw-rund-handy { display: none; }
@container seite (max-width: 44rem) { .vw-wahlzeile > .vw-rund { display: none; } .vw-tagkopf:has(.vw-rund-handy) { align-items: center; } .vw-rund-handy { display: flex; margin-left: auto; } .vw-rund-handy .vw-rund-kopie { display: flex; align-items: flex-start; gap: var(--a3); position: static; margin: 0; } .vw-rund-handy .akt-rund { margin: 0; text-transform: none; letter-spacing: 0; color: var(--text-leise); } }
@container seite (max-width: 44rem) { .vw-tagkopf:has(.vw-rund-handy) { align-items: flex-start; } .vw-tagkopf:has(.vw-rund-handy) > span:not(.vw-rund-handy), .vw-tagkopf:has(.vw-rund-handy) > b { line-height: 2.25rem; } .vw-rund-handy .akt-rund-text { text-transform: none; letter-spacing: 0; font-size: var(--gr-etikett); font-weight: 600; } }
.tb-zuo-raster { row-gap: var(--a3); }


.akt-rund-info { cursor: default; pointer-events: none; }
.tb-zuo-l > .j-badge { width: 100%; box-sizing: border-box; }
.tb-zuo-l > .j-badge-adresse { align-items: center; padding-right: var(--a3); }
.j-badge-adresse .j-badge-symbol { background: var(--j-nacht-50); color: var(--primaer); border-radius: 50%; }
.j-badge-adresse .j-badge-text { white-space: normal; line-height: 1.25; font-size: var(--gr-klein); padding: 2px 0; }
.tb-zuo-l > .j-badge-klient { justify-content: center; }

@container seite (min-width: 44rem) { .tb-zuo-raster { grid-template-columns: minmax(0, 1fr) 3.5rem minmax(0, 1fr) 3.5rem; column-gap: var(--a3); } .tb-zuo-kompakt { padding: var(--a3) var(--a4); } }
.tb-zuo-l > .j-badge-klient { justify-content: flex-start; padding-left: var(--a4); }


.j-badge-adresse .j-badge-text { display: flex; flex-direction: column; gap: 0; line-height: 1.25; }
.j-badge-adresse .adr-zeile { display: block; }
.tb-zuo-l > .j-badge-adresse { padding-top: 2px; padding-bottom: 2px; }
.j-badge-klient .j-badge-symbol { background: var(--j-nacht-900); color: var(--akzent); }
.tb-zuo-l > .j-badge-klient { justify-content: flex-start; padding-left: 3px; }
.akt-rund-heute .akt-rund-text { color: var(--primaer); }

.kp-kopf .kp-speichern { margin-left: auto; margin-top: 0; }
.j-badge-klient .j-badge-symbol, .j-badge-klient .j-badge-symbol .symbol { color: var(--akzent); }


.akt-termine.akt-termin-offen .akt-monat:has(+ .akt-liste .gewaehlt) { display: flex; }
.akt-zeile-wrap { position: relative; }
.akt-termin-stift { display: none; }
.akt-termin-eintrag.gewaehlt .akt-termin-stift { display: inline-flex; position: absolute; right: var(--a2); top: 50%; transform: translateY(-50%); }
.akt-termin-eintrag.gewaehlt .akt-zeile-wrap > .akt-zeile { padding-right: 3.25rem; }
.akt-termin-stift .akt-rund-text { display: none; }
.akt-termin-stift .akt-rund-kreis { width: 1.875rem; height: 1.875rem; }
.akt-termin-stift .akt-rund-kreis svg { width: .9375rem; height: .9375rem; }
.akt-termin-info { padding-top: var(--a1); }

.tb-zuo-l > .j-badge-klient { border-color: var(--j-nacht-100); background: var(--karte); }
.tb-zuo-l > .j-badge-klient .j-badge-symbol { background: var(--primaer); color: var(--auf-primaer); }
.tb-zuo-l > .j-badge-klient .j-badge-symbol .symbol { color: var(--auf-primaer); }


.tb-zuo-raster { row-gap: var(--a4); }
.tb-zuo-r { position: relative; align-self: stretch; }
.tb-zuo-r .akt-rund { display: flex; align-items: center; justify-content: center; position: static; }
.tb-zuo-r .akt-rund-kreis { width: 1.75rem; height: 1.75rem; }
.tb-zuo-r .akt-rund-kreis svg, .tb-zuo-r .akt-rund-kreis .symbol { width: 15px; height: 15px; }
.tb-zuo-r .akt-rund-text { position: absolute; left: 50%; top: calc(50% + .875rem + 3px); transform: translateX(-50%);
  max-width: 4.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--gr-mini); line-height: 1.2; }

.j-badge-adresse .j-badge-symbol { background: var(--primaer); color: var(--auf-primaer); }
.j-badge-adresse .j-badge-symbol .symbol { color: var(--auf-primaer); }

.titel-wahl-knopf:focus, .titel-wahl-knopf:focus-visible { outline: none; box-shadow: none; }
.titel-wahl-knopf:focus-visible:not(:hover) { background: none; }

.team-kal .kalender-tag.heute.gewaehlt .tag-nr, .team-kal .kalender-tag.heute.gewaehlt .tag-nr .tag-zahl { color: var(--auf-primaer); }
@container seite (min-width: 44.01rem) { .team-kal .kalender-tag.heute.gewaehlt .tag-nr, .team-kal .kalender-tag.heute.gewaehlt .tag-nr .tag-zahl { color: var(--primaer); } }
.kal-tagliste-kopf [data-tag-neu] { margin-left: auto; }


.tb-zuo-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-items: start; }
.tb-zuo-paar { display: grid; grid-template-columns: minmax(0, 1fr) 3.5rem; column-gap: var(--a3); row-gap: var(--a1); align-items: center; padding: var(--a3) 0; border-top: 1px solid var(--linie); }
.tb-zuo-paar:first-child { border-top: 0; padding-top: 0; }
.tb-zuo-paar:last-child { padding-bottom: 0; }
.tb-zuo-label { grid-column: 1 / -1; margin: 0; }   
.tb-zuo-paar > .tb-zuo-r { align-self: stretch; position: relative; }
@container seite (min-width: 44rem) { .tb-zuo-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--a5, 1.5rem); } .tb-zuo-paar:nth-child(2) { border-top: 0; padding-top: 0; } .tb-zuo-paar:nth-last-child(2):nth-child(odd) { padding-bottom: 0; } }

.kal-detail-ort dd { margin: 0; }
.kal-detail-ort .j-badge-adresse { width: auto; max-width: 100%; text-decoration: none; }
.akt-termin-stift .akt-rund-kreis { width: 2.25rem; height: 2.25rem; }
.akt-termin-stift .akt-rund-kreis svg { width: 1.125rem; height: 1.125rem; }
.akt-termin-eintrag.gewaehlt .akt-zeile-wrap > .akt-zeile { padding-right: 3.75rem; }

.tb-zuo-paar:has(.akt-rund-text) { padding-bottom: calc(var(--a3) + .75rem); }
.tb-zuo-paar:last-child:has(.akt-rund-text) { padding-bottom: .75rem; }
.kal-detail-ort .j-badge-adresse { display: inline-flex; flex-direction: row; align-items: center; height: auto; min-height: 2.75rem; align-self: flex-start; }
.kal-detail-ort dd { display: block; }
.kal-detail-ort { display: block; }
.kal-detail-liste > .kal-detail-ort { display: block; grid-template-columns: none; }


.j-badge-klient-neu { border-color: var(--j-nacht-100); background: var(--karte); padding: 3px var(--a3) 3px 3px; }
.j-badge-klient-neu .j-badge-symbol { background: var(--primaer); color: var(--auf-primaer); }
.j-badge-klient-neu .j-badge-symbol .symbol { color: var(--auf-primaer); }

.lese-leiste { margin-bottom: var(--a3); }


.kachel-kopf .akt-rund { width: 4.75rem; min-width: 0; }
.kachel-kopf .akt-rund .akt-rund-text { max-width: 100%; text-align: center; white-space: nowrap; }



.tb-doku-kachel .tb-doku-zaehler { display: none; }
.tb-doku-ring { display: inline-flex; order: 9; }
.tb-doku-ring .verf-ring-kreis { width: 2.25rem; height: 2.25rem; }
.tb-doku-ring .verf-ring-kreis b { font-size: var(--gr-mini); }
.tb-doku-ring-fertig .verf-ring-kreis { background: var(--j-ok-fg); }
.tb-doku-ring-fertig .verf-ring-kreis::before { background: var(--j-ok-bg); }
.tb-doku-ring-fertig .symbol { position: relative; width: 16px; height: 16px; color: var(--j-ok-fg); }
@container seite (max-width: 44rem) { .tb-doku-kachel .tb-doku-tag { min-height: 2.25rem; } .tb-doku-kachel .tb-doku-status { display: none; } .tb-doku-kachel .tb-doku-link, .tb-doku-kachel .tb-doku-eigen .tb-doku-link {
    grid-template-columns: auto minmax(0, 1fr); gap: var(--a2); padding: var(--a3) var(--a2) var(--a3) calc(var(--a2) + 3px + var(--a2)); position: relative; } .tb-doku-kachel .tb-doku-schicht { grid-column: 1; } .tb-doku-kachel .tb-doku-klienten { grid-column: 2; justify-content: flex-start; flex-wrap: nowrap; overflow: visible; min-width: 0; } .tb-doku-kachel .tb-doku-klienten > span { min-width: 0; max-width: 100%; display: flex; } .tb-doku-kachel .tb-doku-klienten .j-badge { min-width: 0; max-width: 100%; } .tb-doku-kachel .tb-doku-klienten .j-badge-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tb-doku-kachel .tb-doku-wer { grid-column: 1 / -1; } .tb-doku-kachel .tb-doku-link::before { content: ""; position: absolute; left: 0; top: var(--a2); bottom: var(--a2); width: 4px; border-radius: 2px; background: transparent; box-shadow: none; } .tb-doku-kachel .tb-doku-abgeschlossen .tb-doku-link::before { background: var(--j-ok-fg); } .tb-doku-kachel .tb-doku-offen a.tb-doku-link::before, .tb-doku-kachel .tb-doku-entwurf .tb-doku-link::before { background: var(--akzent); } .tb-doku-kachel .tb-doku-eigen .tb-doku-link { box-shadow: none; } }


@container seite (max-width: 44rem) { .kachel-kopf .akt-rund { width: 2.25rem; position: relative; padding-bottom: 1.1rem; box-sizing: content-box; } .kachel-kopf .akt-rund .akt-rund-text { position: absolute; top: calc(2.25rem + 3px); left: 50%; transform: translateX(-50%);
    width: max-content; max-width: 5.5rem; text-align: center; white-space: nowrap; } .kachel-kopf > .kachel-radiale, .kachel-kopf > .akt-rund { margin-right: 1.25rem; } .kachel-kopf > .kachel-radiale { gap: 2.75rem; } }

.tb-zuo-label { gap: var(--a2); }


.tb-slot { display: flex; align-items: center; gap: var(--a2); min-width: 0; flex-wrap: wrap; padding: 0 var(--a1); }
.tb-slot a.muell-slot { display: inline-flex; align-items: center; gap: var(--a2); min-width: 0; padding: 2px var(--a2) 2px 2px; border-radius: var(--rund-voll);
  text-decoration: none; color: var(--text); background: transparent; font-weight: 600; font-size: var(--gr-klein); line-height: 1.2; --mh: 1.5rem; }
.muell-slot-text { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px var(--a2); min-width: 0; }
.muell-slot-text strong { font-weight: 700; white-space: nowrap; }
.muell-slot-tonnen { display: inline-flex; flex-wrap: wrap; gap: 3px; }
.muell-slot .abfuhr { font-size: var(--gr-etikett); line-height: 1.3; }
.tb-slot a.muell-slot-dringend { background: var(--j-fehler-bg); color: var(--j-fehler-fg); }
.muell-slot-dringend .muell-marke { background: var(--karte); color: var(--j-fehler-fg); }
.tb-slot a.muell-slot-leise { color: var(--text-leise); } .muell-slot-leise strong { font-weight: 600; }
.muell-slot-leise .muell-marke { background: var(--j-stein-50); color: var(--text-leise); }
@container seite (min-width: 44.01rem) { .tb-zeitraum-kompakt { display: flex; } .tb-zeitraum-kompakt > .jahr-wahl { display: block; } }


.pinn-kopf { gap: var(--a3); }
.pinn-kopf h2 { display: flex; align-items: center; flex: 1; gap: var(--a3); min-width: 0; font-size: var(--gr-zusatz); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-leise); }
.pinn-kopf h2::after { content: ""; flex: 1; height: 0; border-top: 1px solid var(--linie); }
.pinn-kopf .akt-rund { margin-left: 0; flex: none; }


.kasse-titel { display: flex; align-items: center; gap: var(--a3); margin: var(--a5) 0 var(--a3); font-size: var(--gr-zusatz); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-leise); }
.kasse-titel::after { content: ""; flex: 1; border-top: 1px solid var(--linie); }
.kasse-anzahl { font-size: var(--gr-etikett); background: var(--j-nacht-50); color: var(--primaer); border-radius: var(--rund-voll); padding: 0 var(--a2); }
.kasse-kopfzeile .monatsnavi-zeile { flex: 1; min-width: 0; }
.kasse-bestand { display: grid; grid-template-columns: minmax(12rem, 1fr) 3fr; gap: var(--a4); align-items: stretch; }
.kasse-bestand-haupt { display: flex; flex-direction: column; justify-content: center; gap: var(--a1); padding: var(--a4); border-radius: var(--rund-m); background: var(--j-nacht-900, #1e2a3a); color: var(--j-weiss); }
.kasse-bestand-haupt small { font-size: var(--gr-etikett); text-transform: uppercase; letter-spacing: .05em; opacity: .8; font-weight: 700; }
.kasse-bestand-haupt strong { font-size: 1.75rem; line-height: 1.1; }
.kasse-bestand-haupt.kasse-minus { background: var(--j-fehler-fg); }
.kasse-zahlen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--a2); margin: 0; }
.kasse-zahlen > div { display: flex; flex-direction: column; gap: 2px; padding: var(--a3); border: 1px solid var(--linie); border-top-width: 4px; border-radius: var(--rund-s); background: var(--karte); min-width: 0; }
.kasse-zahlen dt { font-size: var(--gr-etikett); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-leise); }
.kasse-zahlen dd { margin: 0; font-weight: 700; font-size: var(--gr-mittel); white-space: nowrap; }
.kasse-zahlen .kz-anfang, .kasse-zahlen .kz-ende { border-top-color: var(--j-stein-500); }
.kasse-zahlen .kz-ein { border-top-color: var(--j-ok-fg); } .kz-ein dd { color: var(--j-ok-fg); }
.kasse-zahlen .kz-aus { border-top-color: var(--j-fehler-fg); } .kz-aus dd { color: var(--j-fehler-fg); }
.kasse-zahlen .kz-aus2 { border-top-color: var(--j-bernstein-500); } .kz-aus2 dd { color: var(--j-warn-fg); }
.kasse-liste { list-style: none; margin: 0; padding: 0; display: grid; }
.kasse-zeile { display: grid; grid-template-columns: 3.25rem 3rem minmax(0, 1fr) 6.5rem 6.5rem auto; gap: var(--a3); align-items: center; padding: var(--a3);
  border-bottom: 1px solid var(--linie); border-left: 4px solid var(--j-stein-300, #cbd5e1); }
.kasse-zeile:hover { background: var(--j-nacht-50); }
.kasse-zeile.kasse-einzahlung { border-left-color: var(--j-ok-fg); } .kasse-zeile.kasse-ausgabe { border-left-color: var(--j-fehler-fg); } .kasse-zeile.kasse-auszahlung { border-left-color: var(--j-bernstein-500); }
.kasse-nr { font-weight: 700; color: var(--text-leise); font-size: var(--gr-klein); }
.kasse-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .kasse-text > strong { overflow-wrap: anywhere; }
.kasse-sub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a1) var(--a2); }
.kasse-betrag { text-align: right; font-weight: 700; white-space: nowrap; }
.kasse-einzahlung .kasse-betrag { color: var(--j-ok-fg); } .kasse-ausgabe .kasse-betrag { color: var(--j-fehler-fg); } .kasse-auszahlung .kasse-betrag { color: var(--j-warn-fg); }
.kasse-saldo { display: flex; flex-direction: column; align-items: flex-end; font-size: var(--gr-klein); color: var(--text-leise); white-space: nowrap; } .kasse-saldo small { font-size: var(--gr-mini); text-transform: uppercase; letter-spacing: .04em; }
.kasse-aktionen { display: flex; gap: var(--a1); justify-content: flex-end; min-width: 2.5rem; }
.kasse-aktionen .akt-rund { min-width: 0; margin: 0; }
.kasse-beleg-da .akt-rund-kreis { background: var(--j-ok-bg); color: var(--j-ok-fg); border-color: var(--j-ok-fg); }
.kasse-storniert { opacity: .6; } .kasse-storniert .kasse-betrag, .kasse-storniert .kasse-text > strong { text-decoration: line-through; }
.kasse-storno-hinweis { color: var(--j-fehler-fg); font-size: var(--gr-klein); font-weight: 600; }
.kasse-leer { padding: var(--a4) 0; }
.kasse-art { display: flex; gap: var(--a2); border: 0; padding: 0; margin: 0; min-width: 0; }
.kasse-art label { flex: 1; cursor: pointer; position: relative; } .kasse-art input { position: absolute; opacity: 0; pointer-events: none; }
.kasse-art span { display: flex; align-items: center; justify-content: center; gap: var(--a2); padding: var(--a3); border: 1px solid var(--linie); border-top-width: 4px; border-radius: var(--rund-s); font-weight: 700; font-size: var(--gr-klein); background: var(--karte); }
.kasse-art-ein span { border-top-color: var(--j-ok-fg); } .kasse-art-aus span { border-top-color: var(--j-fehler-fg); } 
.kasse-art input:checked + span { background: var(--j-nacht-50); border-color: var(--primaer); box-shadow: 0 0 0 1px var(--primaer); }
.kasse-dialog { width: min(34rem, calc(100vw - 1.5rem)); max-height: calc(100dvh - 2rem); }
.kasse-dialog form { display: flex; flex-direction: column; min-height: 0; max-height: calc(100dvh - 2rem); }
.kasse-dialog form .dialog-inhalt { overflow-y: auto; }
.kasse-pos { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .kasse-pos li { display: flex; justify-content: space-between; gap: var(--a3); border-bottom: 1px dotted var(--linie); padding: 2px 0; }
.kasse-beleg-bild { max-width: 100%; max-height: 22rem; object-fit: contain; border-radius: var(--rund-s); background: var(--j-nacht-50); }
.kasse-hinweis { margin: 0; }
@container seite (max-width: 64rem) { .kasse-bestand { grid-template-columns: 1fr; } .kasse-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kasse-zahlen .kz-ende { grid-column: 1 / -1; } }
@container seite (max-width: 44rem) { .kasse-zeile { grid-template-columns: 2.75rem minmax(0, 1fr) auto; grid-template-areas: "nr text betrag" "datum text saldo" "aktion aktion aktion"; gap: var(--a1) var(--a3); padding: var(--a3) var(--a2); } .kasse-nr { grid-area: nr; } .kasse-text { grid-area: text; } .kasse-betrag { grid-area: betrag; align-self: start; } .kasse-saldo { grid-area: saldo; align-self: start; } .kasse-aktionen { grid-area: aktion; justify-content: flex-end; } .kasse-aktionen:empty { display: none; } .kasse-art span { flex-direction: column; gap: 2px; padding: var(--a2); } }
@container seite (max-width: 64rem) { .kasse-dialog { width: 100vw; max-width: 100vw; margin: auto 0 0; border-bottom: 0; border-radius: var(--rund-l, 1rem) var(--rund-l, 1rem) 0 0; max-height: 92dvh; } }
@media print { .kasse-aktionen, .akt-rund { display: none !important; } }

.kasse-kopfzeile .monatsnavi-zeile { flex-direction: row; align-items: flex-start; gap: var(--a3); }
.kasse-kopfzeile .monatsnavi-zeile > .monatsnavi { flex: 1; min-width: 0; }
.kasse-kopfzeile .monatsnavi-aktionen { flex: none; }
.kasse-kopfzeile .monatsnavi-aktionen .akt-rund { margin: 0; }
@container seite (max-width: 44rem) { .kasse-kopfzeile .monatsnavi-zeile { position: relative; display: block; } .kasse-kopfzeile .monatsnavi-aktionen { position: absolute; top: 0; right: 0; } .kasse-kopfzeile .monatsnavi-aktionen .akt-rund { flex-direction: row; min-width: 0; min-height: 2.25rem; } .kasse-kopfzeile .monatsnavi-aktionen .akt-rund-text { display: none; } }



@container seite (max-width: 44rem) { .team-kopf > .team-titel { display: grid; grid-template-columns: minmax(0, auto) auto; justify-content: start; column-gap: var(--a3); row-gap: 2px; align-items: center; } .team-kopf .team-titelzeile { display: contents; } .team-kopf .team-bez { grid-row: 1; grid-column: 1; } .team-kopf .team-titelzeile > .titel-wahl { grid-row: 2; grid-column: 1; min-width: 0; } .team-kopf .team-titelzeile .bereich-wahl { grid-row: 2; grid-column: 2; } }


.akt-dpl-radial-pc, .akt-team-radial { display: none; }

.kal-tagliste-kopf [data-tag-titel] { display: flex; }
.kal-tagliste-kopf { margin-bottom: var(--a2); }


.abfuhr-liste .akt-monat .tk-import-radial-mobil { order: 2; margin-left: 0; }


.tk-leiste .team-kal-kopfzeile, .tk-leiste .tb-leiste { margin-bottom: 0; }


.akt-stempel-radial.akt-rund-aktiv .akt-rund-kreis { background: var(--j-ok-bg); color: var(--j-ok-fg); border-color: var(--j-ok-fg); }
.sp-scroll { display: flex; flex-direction: column; gap: var(--a3); padding: var(--a1) var(--a4) var(--a4); overflow-y: auto; }
.sp-hinweis, .sp-fuss { margin: 0; }
.sp-karte { display: flex; flex-direction: column; gap: var(--a3); padding: var(--a3); border: 1px solid var(--linie); border-radius: var(--rund-m, .75rem); background: var(--karte); }
.sp-zeile { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--a3); min-width: 0; }
.sp-schicht { display: flex; }
.sp-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sp-text small { color: var(--text-leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-werte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a2); margin: 0; }
.sp-werte > div { display: flex; flex-direction: column; gap: 2px; padding: var(--a2) var(--a3); border-radius: var(--rund-s); background: var(--j-nacht-50); }
.sp-werte dt { font-size: var(--gr-klein); color: var(--text-leise); }
.sp-werte dd { margin: 0; font-weight: 700; }
.sp-form { display: grid; gap: var(--a2); margin: 0; }
.sp-form .knopf { width: 100%; }



.tabelle-personen, .tabelle-massnahmen, .tabelle-klienten { border-collapse: separate; border-spacing: 0; }
.tabelle-personen thead th, .tabelle-massnahmen thead th, .tabelle-klienten thead th {
  font-size: var(--gr-etikett); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-leise);
  background: var(--j-nacht-50); padding-top: var(--a3); padding-bottom: var(--a3); }
.tabelle-personen tbody td, .tabelle-massnahmen tbody td, .tabelle-klienten tbody td { padding-top: var(--a3); padding-bottom: var(--a3); }
.tabelle-personen tbody tr, .tabelle-massnahmen tbody tr, .tabelle-klienten tbody tr { transition: background .12s; }
.tabelle-personen tbody tr:hover, .tabelle-massnahmen tbody tr:hover, .tabelle-klienten tbody tr:hover { background: var(--j-nacht-50); }
.tabelle-personen td .j-badge, .tabelle-klienten td .j-badge, .tabelle-massnahmen td .j-badge { max-width: 100%; }
.tabelle-personen td[data-label="Springer"], .tabelle-personen td[data-label="Maßnahme"],
.tabelle-klienten td[data-label="Maßnahme"] { text-align: left; }
.tabelle-personen td[data-label="Springer"] { display: table-cell; }
.tabelle-personen td[data-label="Springer"] .j-badge { margin: 0 .25rem .25rem 0; }
@container seite (max-width: 44rem) { .tabelle-personen tr, .tabelle-massnahmen tr, .tabelle-klienten tr { position: relative; padding: var(--a3) 0; box-shadow: var(--schatten); } .tabelle-personen td.haupt, .tabelle-massnahmen td.haupt, .tabelle-klienten td.haupt { padding-right: 7rem; padding-bottom: var(--a2); } .tabelle-personen td[data-label="Status"], .tabelle-massnahmen td[data-label="Status"], .tabelle-klienten td[data-label="Status"] {
    position: absolute; top: var(--a3); right: var(--a4); width: auto; padding: 0; } .tabelle-personen td[data-label="Status"]::before, .tabelle-massnahmen td[data-label="Status"]::before,
  .tabelle-klienten td[data-label="Status"]::before { display: none; } .tabelle-personen td:has(> .leer:only-child), .tabelle-massnahmen td:has(> .leer:only-child), .tabelle-klienten td:has(> .leer:only-child) { display: none; } .tabelle-personen td[data-label="Springer"] { display: flex; flex-wrap: wrap; justify-content: flex-end; } .tabelle-personen td[data-label="AV"], .tabelle-personen td[data-label="OS"] { display: inline-flex; width: 50%; } .tabelle-personen td[data-label="AV"] { float: left; } .tabelle-personen td[data-label="OS"] { float: right; } }

@container seite (min-width: 44.01rem) { .tabelle-personen td .j-badge, .tabelle-klienten td .j-badge { font-size: var(--gr-klein); padding: .1rem .55rem .1rem .15rem; gap: .35rem; } .tabelle-personen td .j-badge-symbol, .tabelle-klienten td .j-badge-symbol { width: 1.25rem; height: 1.25rem; } .tabelle-personen td .j-badge-symbol .symbol, .tabelle-klienten td .j-badge-symbol .symbol { width: .8rem; height: .8rem; } .tabelle-personen td[data-label="Maßnahme"] { white-space: normal; } .tabelle-personen td.haupt { min-width: 9.5rem; } .tabelle-personen th, .tabelle-personen td { padding-left: var(--a2); padding-right: var(--a2); } }

@container seite (min-width: 44.01rem) and (max-width: 64rem) { .tabelle-personen td[data-label="Springer"] { min-width: 0; } .tabelle-personen th, .tabelle-personen td { padding-left: .35rem; padding-right: .35rem; } .tabelle-personen { font-size: var(--gr-klein); } .tabelle-personen td .j-badge { font-size: var(--gr-zusatz); } .tabelle-personen td.haupt { min-width: 0; } .tabelle-personen td .marke { font-size: var(--gr-etikett); padding-left: .35rem; padding-right: .35rem; } }
@container seite (min-width: 44.01rem) and (max-width: 52rem) { .tabelle-personen th:nth-child(2), .tabelle-personen td[data-label="Rolle"], .tabelle-personen th:nth-child(3):not(.spalte-talk) { } .tabelle-personen td[data-label="AV"], .tabelle-personen td[data-label="OS"], .tabelle-personen th.zahl { padding-left: .15rem; padding-right: .15rem; } .tabelle-personen td .j-badge-symbol { display: none; } .tabelle-personen td .j-badge { padding-left: .5rem; } .tabelle-personen td[data-label="Nachweise"] .marke { white-space: nowrap; } }
@container seite (min-width: 44.01rem) and (max-width: 50rem) { .tabelle-personen td[data-label="OS"], .tabelle-personen td[data-label="AV"] { font-size: var(--gr-zusatz); } .tabelle-personen td[data-label="Maßnahme"] .j-badge, .tabelle-personen td[data-label="Springer"] .j-badge { max-width: 5.5rem; } .tabelle-personen td[data-label="Maßnahme"] .j-badge-text, .tabelle-personen td[data-label="Springer"] .j-badge-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tabelle-personen td[data-label="Nachweise"] .marke { font-size: var(--gr-mini); padding-left: .25rem; padding-right: .25rem; } }


.badges-gruppe { display: flex; flex-wrap: wrap; gap: .3rem; }
.tabelle-personen td[data-label="Springer"] .badges-gruppe { max-width: 16rem; }
@container seite (max-width: 44rem) { .tabelle-personen tr, .tabelle-massnahmen tr, .tabelle-klienten tr { padding: 0; overflow: hidden; } .tabelle-personen td, .tabelle-massnahmen td, .tabelle-klienten td { border-top: 1px solid var(--linie); padding: var(--a3) var(--a4); } .tabelle-personen td.haupt, .tabelle-massnahmen td.haupt, .tabelle-klienten td.haupt {
    border-top: 0; border-bottom: 2px solid var(--linie); background: var(--j-nacht-50); padding-top: var(--a3); padding-bottom: var(--a3); } .tabelle-personen td[data-label]:not(.haupt)::before, .tabelle-massnahmen td[data-label]:not(.haupt)::before,
  .tabelle-klienten td[data-label]:not(.haupt)::before { text-transform: uppercase; letter-spacing: .06em; font-size: var(--gr-etikett); font-weight: 700; flex: none; } .tabelle-personen td[data-label="Springer"], .tabelle-personen td[data-label="Maßnahme"],
  .tabelle-massnahmen td[data-label="Teamleitung"], .tabelle-massnahmen td[data-label="Klient:in"],
  .tabelle-klienten td[data-label="Maßnahme"] { flex-direction: column; align-items: flex-start; gap: var(--a2); justify-content: flex-start; } .tabelle-personen td[data-label="Springer"] .badges-gruppe { max-width: none; width: 100%; justify-content: flex-start; } .tabelle-personen td[data-label="Springer"] { display: flex; } .tabelle-personen td .j-badge { max-width: 100%; } .tabelle-personen tr { display: grid; grid-template-columns: 1fr 1fr; } .tabelle-personen tr > td { grid-column: 1 / -1; } .tabelle-personen tr > td[data-label="AV"], .tabelle-personen tr > td[data-label="OS"] {
    grid-column: auto; float: none; width: auto; flex-direction: column; align-items: flex-start; gap: .15rem; } .tabelle-personen tr > td[data-label="OS"] { border-left: 1px solid var(--linie); } .tabelle-personen tr > td[data-label="Status"] { grid-column: auto; } }
@container seite (max-width: 44rem) { .tabelle-personen tr > td[data-label="Status"], .tabelle-massnahmen tr > td[data-label="Status"], .tabelle-klienten tr > td[data-label="Status"] { border-top: 0; } }


.status-rund { display: inline-flex; flex-direction: column; align-items: center; gap: .15rem; background: none !important; padding: 0; border-radius: 0; line-height: 1.1; }
.status-rund::before { display: none; }
.status-rund-kreis { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1.5px solid currentColor; }
.status-rund-kreis .symbol { width: 16px; height: 16px; }
.status-rund-text, .kasse-nr { font-size: var(--gr-etikett); font-weight: 600; color: var(--text-leise); }
.status-Aktiv.status-rund .status-rund-kreis { background: var(--j-ok-bg); color: var(--j-ok-fg); }
.status-Inaktiv.status-rund .status-rund-kreis { background: var(--j-fehler-bg); color: var(--j-fehler-fg); }
.status-Ausstehend.status-rund .status-rund-kreis { background: var(--j-warn-bg); color: var(--j-warn-fg); }
.fortschritt-ring { display: inline-flex; }
.fortschritt-ring .verf-ring-kreis { width: 2.25rem; height: 2.25rem; }
.fortschritt-ring .verf-ring-kreis b { font-size: var(--gr-mini); }
.fortschritt-warn .verf-ring-kreis { --ring: var(--j-warn-fg); }
.fortschritt-fehler .verf-ring-kreis { --ring: var(--j-fehler-fg); }
.fortschritt-neutral .verf-ring-kreis { --ring: var(--j-neutral-fg); }
.fortschritt-fertig .verf-ring-kreis { background: var(--j-ok-fg); }
.fortschritt-fertig .verf-ring-kreis::before { background: var(--j-ok-bg); }
.fortschritt-fertig .symbol { position: relative; width: 16px; height: 16px; color: var(--j-ok-fg); }
.karte-pfeil { display: none; }

.tabelle-personen td[data-label="Springer"], .tabelle-personen td[data-label="Maßnahme"],
.tabelle-personen td[data-label="Status"], .tabelle-personen td[data-label="Nachweise"] { text-align: center; }
.tabelle-personen td[data-label="Springer"] .badges-gruppe { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); justify-content: center; gap: .3rem; max-width: none; }
.tabelle-personen td[data-label="Springer"] .badges-gruppe:has(> :only-child) { grid-template-columns: minmax(0, max-content); }
.tabelle-personen td[data-label="Springer"] .j-badge { margin: 0; }
.tabelle-personen td.haupt .j-badge { max-width: 100%; }
.tabelle-personen td.haupt .j-badge-text { white-space: nowrap; }
@container seite (max-width: 64rem) { .sp .kp-kopf-rechts { display: none; } }
@container seite (max-width: 44rem) { .tabelle-personen td.haupt, .tabelle-massnahmen td.haupt, .tabelle-klienten td.haupt { display: flex; align-items: center; gap: var(--a2); padding-right: 5rem; } .karte-pfeil { display: inline-grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; margin-left: auto; border: 0; border-radius: 50%; background: transparent; color: var(--primaer); cursor: pointer; } .karte-pfeil .symbol { width: 20px; height: 20px; transition: transform .2s; } .karte-offen .karte-pfeil .symbol { transform: rotate(180deg); } .tabelle-personen td[data-label="Status"], .tabelle-massnahmen td[data-label="Status"], .tabelle-klienten td[data-label="Status"] { top: .8rem; right: .75rem; } .tabelle-personen td[data-label="Status"] .status-rund-text, .tabelle-massnahmen td[data-label="Status"] .status-rund-text, .tabelle-klienten td[data-label="Status"] .status-rund-text { display: none; } .tabelle-personen tr:not(.karte-offen) > td:not(.haupt):not([data-label="Status"]),
  .tabelle-massnahmen tr:not(.karte-offen) > td:not(.haupt):not([data-label="Status"]),
  .tabelle-klienten tr:not(.karte-offen) > td:not(.haupt):not([data-label="Status"]) { display: none; } .tabelle-personen tr:not(.karte-offen) > td.haupt, .tabelle-massnahmen tr:not(.karte-offen) > td.haupt, .tabelle-klienten tr:not(.karte-offen) > td.haupt { border-bottom: 0; } .tabelle-personen td[data-label="Springer"] .badges-gruppe { display: flex; flex-wrap: wrap; justify-content: flex-start; } .tabelle-personen td[data-label="Springer"], .tabelle-personen td[data-label="Maßnahme"] { text-align: left; } .tabelle-personen td[data-label="Nachweise"] { display: flex; align-items: center; justify-content: space-between; } }


.db-umschalter { padding: var(--a3) var(--a4); margin-bottom: var(--a4); }
.db-umschalter-zeile { display: flex; align-items: center; justify-content: space-between; gap: var(--a3); }
.db-umschalter .kachel-radiale { margin-left: auto; align-items: flex-start; }
.db-umschalter .akt-rund { margin-left: 0; }
.akt-rund-aktiv .akt-rund-kreis { background: var(--j-ok-fg); border-color: var(--j-ok-fg); color: var(--j-weiss); }
.akt-rund-aktiv { color: var(--j-ok-fg); }
.akt-rund-aktiv:hover .akt-rund-kreis, .akt-rund-aktiv:focus-visible .akt-rund-kreis { background: var(--j-ok-fg); border-color: var(--j-ok-fg); box-shadow: 0 0 0 2px var(--j-ok-bg); }

.tabelle-personen td[data-label="Maßnahme"], .tabelle-klienten td[data-label="Maßnahme"] { text-align: center; }
.tabelle-personen td[data-label="Maßnahme"] > .j-badge, .tabelle-klienten td[data-label="Maßnahme"] > .j-badge { margin-inline: auto; }
.tabelle-personen td[data-label="Maßnahme"], .tabelle-personen td[data-label="Springer"] { vertical-align: middle; }
@container seite (max-width: 44rem) { .tabelle-personen td.haupt .j-badge, .tabelle-klienten td.haupt .j-badge { flex: 0 0 calc(100% - 3.5rem - 2.5rem); width: calc(100% - 3.5rem - 2.5rem); max-width: none; min-width: 0; } .tabelle-personen td.haupt .j-badge-text, .tabelle-klienten td.haupt .j-badge-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tabelle-massnahmen td.haupt > a:first-child { flex: 0 0 calc(100% - 3.5rem - 2.5rem); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tabelle-personen td.haupt, .tabelle-massnahmen td.haupt, .tabelle-klienten td.haupt { min-height: 3.25rem; padding-top: 0; padding-bottom: 0; align-items: center; } .tabelle-personen td.haupt .karte-pfeil, .tabelle-massnahmen td.haupt .karte-pfeil, .tabelle-klienten td.haupt .karte-pfeil { margin-left: auto; } .tabelle-personen td[data-label="Status"], .tabelle-massnahmen td[data-label="Status"], .tabelle-klienten td[data-label="Status"] {
    top: 0; right: .75rem; height: 3.25rem; display: flex; align-items: center; } .tabelle-personen td[data-label="Status"]::before, .tabelle-massnahmen td[data-label="Status"]::before, .tabelle-klienten td[data-label="Status"]::before { display: none; } }


.db-umschalter-zeile { flex-wrap: wrap; row-gap: var(--a2); }
.db-umschalter .kachel-radiale { flex-wrap: wrap; justify-content: flex-end; gap: var(--a2); }
.db-umschalter .akt-rund { position: relative; min-width: 3.5rem; }
.wz-trenner { align-self: flex-start; flex: none; width: 1px; height: 2.25rem; background: var(--linie); margin: 0 var(--a1); }
.wz-knopf .akt-rund-kreis { background: var(--j-nacht-50); color: var(--primaer); border-color: var(--linie); }
.wz-knopf[aria-expanded="true"] .akt-rund-kreis { background: var(--primaer); color: var(--auf-primaer); border-color: var(--primaer); box-shadow: 0 0 0 2px var(--akzent); }
.wz-punkt { position: absolute; top: 0; left: calc(50% + .45rem); width: .75rem; height: .75rem; border-radius: 50%; border: 2px solid var(--karte); display: none; }
.wz-punkt.wz-an { display: block; }
.wz-punkt-gruen { background: var(--j-ok-fg); }
.wz-punkt-rot { background: var(--j-fehler-fg); }
.akt-rund-aktiv-rot .akt-rund-kreis { border-color: var(--j-fehler-fg); box-shadow: 0 0 0 2px var(--j-fehler-bg); }
.akt-rund-aktiv-rot { color: var(--j-fehler-fg); }
.wz-anlegen .akt-rund-kreis { background: var(--primaer); color: var(--auf-primaer); border-color: var(--primaer); }
.wz-form { margin: 0; }
.wz-feld { margin-top: var(--a3); padding-top: var(--a3); border-top: 1px solid var(--linie); }
.wz-feld[hidden] { display: none; }
.wz-feld .feld-suche { width: 100%; max-width: none; }
@container seite (max-width: 44rem) { .db-umschalter .kachel-radiale { margin-left: 0; width: 100%; justify-content: space-between; } .db-umschalter .akt-rund { min-width: 3rem; } }
button.wz-knopf { font-size: var(--gr-etikett); font-weight: 600; line-height: 1.1; color: var(--text-leise); gap: 3px; flex-direction: column; align-items: center; display: inline-flex; }
button.wz-knopf .akt-rund-text { font-size: var(--gr-etikett); font-weight: 600; }
button.wz-knopf:hover, button.wz-knopf[aria-expanded="true"] { color: var(--primaer); }
@container seite (max-width: 44rem) { .db-umschalter { padding: var(--a3); } .db-umschalter .kachel-radiale { flex-wrap: nowrap; justify-content: space-between; gap: 0; } .db-umschalter .akt-rund { min-width: 0; flex: 1 1 0; } .db-umschalter .akt-rund-text { font-size: var(--gr-mini); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wz-trenner { height: 2.25rem; margin: 0; flex: 0 0 1px; } }
@container seite (max-width: 44rem) { .db-umschalter .kachel-radiale { flex-wrap: wrap; justify-content: space-around; row-gap: var(--a3); } .db-umschalter .kachel-radiale > .wz-trenner:first-of-type { flex: 0 0 100%; width: 100%; height: 1px; margin: 0; } .db-umschalter .akt-rund { flex: 0 0 auto; min-width: 4.25rem; } .db-umschalter .akt-rund-text { font-size: var(--gr-etikett); overflow: visible; max-width: none; } .db-umschalter .kachel-radiale > .wz-trenner:not(:first-of-type) { height: 2.25rem; flex: 0 0 1px; } }
@container seite (max-width: 44rem) { .db-umschalter .kachel-radiale { justify-content: space-between; } .db-umschalter .kachel-radiale > .akt-rund { min-width: 0; width: 3.6rem; } .db-umschalter .kachel-radiale > .wz-trenner:not(:first-of-type) { margin: 0 -.25rem; } .db-umschalter .akt-rund-text { font-size: var(--gr-mini); } }


.db-umschalter .db-umschalter-zeile { justify-content: flex-start; }
.db-umschalter .kachel-radiale { margin-left: 0; width: 100%; justify-content: flex-start; flex-wrap: wrap; gap: var(--a3); align-items: flex-start; }
.wz-gruppe { display: inline-flex; align-items: flex-start; gap: var(--a3); }
.wz-neu { margin-left: 0; }
.wz-trenner-neu { margin-left: auto; }
.wz-trenner { margin: 0; }
.wz-link .akt-rund-kreis { background: var(--j-nacht-50); color: var(--primaer); border-color: var(--linie); }
.wz-link-an .akt-rund-kreis { background: var(--j-ok-fg); border-color: var(--j-ok-fg); color: var(--j-weiss); }
.wz-link-an { color: var(--j-ok-fg); }
a.wz-knopf { display: inline-flex; position: relative; }
.wz-fraster { display: grid; gap: var(--a4); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.wz-fgruppe { display: flex; flex-direction: column; gap: var(--a2); min-width: 0; padding: var(--a3); border: 1px solid var(--linie); border-radius: var(--rund-m); background: var(--j-nacht-50); }
.wz-fkopf { font-size: var(--gr-etikett); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-leise); display: flex; flex-wrap: wrap; gap: .25rem .5rem; align-items: baseline; }
.wz-fkopf small { font-size: var(--gr-klein); letter-spacing: 0; text-transform: none; font-weight: 600; color: var(--j-ok-fg); }
.wz-pillen { display: flex; flex-wrap: wrap; gap: var(--a2); }
.wz-pille { display: inline-flex; align-items: center; gap: .3rem; min-height: 2rem; padding: 0 var(--a3); border: 1px solid var(--linie); border-radius: var(--rund-voll);
  background: var(--karte); color: var(--text); font: inherit; font-size: var(--gr-klein); font-weight: 600; text-decoration: none; cursor: pointer; transition: border-color .15s, background .15s; }
.wz-pille:hover, .wz-pille:focus-visible { border-color: var(--primaer); outline: none; }
.wz-pille .symbol { width: 14px; height: 14px; }
.wz-pille-an { background: var(--j-ok-bg); border-color: var(--j-ok-fg); color: var(--j-ok-fg); }
.wz-zurueck { display: inline-flex; align-items: center; gap: .35rem; margin-top: var(--a3); font-size: var(--gr-klein); font-weight: 600; color: var(--text-leise); text-decoration: none; }
.wz-zurueck .symbol { width: 14px; height: 14px; }
.wz-zurueck:hover { color: var(--j-fehler-fg); }
.tabelle-uebersicht th, .tabelle-uebersicht td { text-align: center; }
.tabelle-uebersicht th:first-child, .tabelle-uebersicht td:first-child { text-align: left; }
.tabelle-uebersicht .ue-typ { max-width: 8rem; white-space: normal; line-height: 1.2; }
.tabelle-uebersicht .ue-zelle .marke { display: inline-flex; flex-direction: column; align-items: center; gap: 0; border-radius: var(--rund-m); padding: .2rem .55rem; text-decoration: none; line-height: 1.2; }
.tabelle-uebersicht .ue-zelle .marke::before { display: none; }
.tabelle-uebersicht .ue-zelle .marke small { font-size: var(--gr-etikett); font-weight: 400; opacity: .85; }
.tabelle-uebersicht td.haupt { text-align: left; }
@container seite (max-width: 44rem) { .db-umschalter .kachel-radiale { justify-content: space-between; gap: 0; } .wz-trenner-neu { margin-left: 0; } .wz-gruppe { gap: 0; display: contents; } .wz-fraster { grid-template-columns: 1fr; } .tabelle-uebersicht td.ue-zelle { text-align: left; } }
.wz-fraster { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
@container seite (max-width: 44rem) { .db-umschalter .kachel-radiale { display: grid; grid-template-columns: 1fr; gap: 0; } .db-umschalter .wz-gruppe { display: flex; justify-content: space-around; align-items: flex-start; gap: var(--a2); padding: var(--a3) 0; } .db-umschalter .wz-funktionen { flex-wrap: wrap; row-gap: var(--a3); } .db-umschalter .wz-trenner { width: 100%; height: 1px; flex: none; margin: 0; align-self: auto; } .db-umschalter .wz-neu { justify-content: flex-end; padding: var(--a3) var(--a3) 0; } .db-umschalter .wz-trenner-neu { display: none; } .db-umschalter .akt-rund { flex: 0 0 auto; width: 4.25rem; min-width: 0; } .db-umschalter .akt-rund-text { font-size: var(--gr-etikett); overflow: visible; max-width: none; white-space: nowrap; } }
@container seite (max-width: 44rem) { .db-umschalter .kachel-radiale { grid-template-columns: repeat(5, 1fr); grid-auto-rows: auto; align-items: start; } .db-umschalter .wz-gruppe { display: contents; } .db-umschalter .wz-ansichten > .akt-rund { grid-column: span 1; } .db-umschalter .wz-ansichten > .akt-rund:nth-child(1) { grid-column: 1 / span 2; } .db-umschalter .wz-ansichten > .akt-rund:nth-child(2) { grid-column: 3; } .db-umschalter .wz-ansichten > .akt-rund:nth-child(3) { grid-column: 4 / span 2; } .db-umschalter .wz-trenner { grid-column: 1 / -1; height: 1px; min-height: 0; width: 100%; background: var(--linie); margin: var(--a3) 0; align-self: center; } .db-umschalter .akt-rund { width: auto; justify-self: center; } .db-umschalter .wz-neu { display: contents; } }
@container seite (max-width: 44rem) { .db-umschalter .kachel-radiale > .wz-trenner, .db-umschalter .kachel-radiale > .wz-trenner:not(:first-of-type) { height: 1px !important; flex: none !important; margin: var(--a2) 0 !important; } }
@container seite (max-width: 44rem) { .db-umschalter .wz-ansichten { grid-row: 1; } .db-umschalter .wz-trenner-1 { grid-row: 2; } .db-umschalter .wz-funktionen > .akt-rund:nth-child(1) { grid-row: 3; grid-column: 1; } .db-umschalter .wz-funktionen > .akt-rund:nth-child(2) { grid-row: 3; grid-column: 2; } .db-umschalter .wz-funktionen > .akt-rund:nth-child(3) { grid-row: 3; grid-column: 3; } .db-umschalter .wz-funktionen > .akt-rund:nth-child(4) { grid-row: 3; grid-column: 4; } .db-umschalter .wz-funktionen > .akt-rund:nth-child(5) { grid-row: 3; grid-column: 5; } .db-umschalter .wz-ansichten > .akt-rund { grid-row: 1; } .db-umschalter .wz-neu > .akt-rund { grid-row: 5; grid-column: 5; justify-self: end; } .db-umschalter .wz-trenner-neu { display: block !important; grid-row: 4; } }


.tm-bar { padding: var(--a3) var(--a4); margin-bottom: var(--a4); }
.tm-zeile { display: flex; align-items: flex-start; gap: var(--a3); flex-wrap: wrap; }
.tm-gruppe { display: inline-flex; align-items: flex-start; gap: var(--a3); }
.tm-trenner { align-self: flex-start; flex: none; width: 1px; height: 2.25rem; background: var(--linie); }
.tm-bar .akt-rund { margin-left: 0; position: relative; min-width: 3.5rem; }
@container seite (max-width: 44rem) { .tm-bar { padding: var(--a3); } .tm-zeile { flex-direction: column; align-items: stretch; gap: var(--a3); } .tm-gruppe { display: flex; justify-content: space-between; gap: 0; } .tm-funktionen { justify-content: flex-start; gap: var(--a4); } .tm-trenner { width: 100%; height: 1px; align-self: auto; } .tm-bar .akt-rund { min-width: 0; flex: 1 1 0; } .tm-funktionen .akt-rund { flex: 0 0 auto; min-width: 3.5rem; } .tm-bar .akt-rund-text { font-size: var(--gr-mini); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }
@container seite (max-width: 44rem) { .tm-abteilungen .akt-rund-text { font-size: var(--gr-winzig); letter-spacing: -.01em; overflow: visible; text-overflow: clip; } .tm-abteilungen .akt-rund { flex: 1 1 0; min-width: 0; } }

.verwaltung-kopf .bereich-wahl { display: block; }
.verwaltung-kopf .vw-h1 { display: none; }
.verwaltung-kopf .vw-bez { display: block; }
.verwaltung-kopf .team-titel { gap: 2px; }
.verwaltung-kopf .bereich-wahl .titel-wahl-knopf { padding-left: 0; padding-top: 0; padding-bottom: 0; }
.verwaltung-kopf .titel-wahl-menue.bereich-wahl-menue { left: 0; min-width: 12rem; }


@container seite (max-width: 44rem) { .tm-bar .tm-abteilungen { gap: 0; justify-content: space-between; } .tm-bar .tm-abteilungen .akt-rund { flex: 0 1 auto; min-width: 0; padding-inline: 1px; } .tm-bar .tm-abteilungen .akt-rund-text { white-space: nowrap; overflow: visible; text-overflow: clip; max-width: none; } }



.vw-bez { display: block; }
.vw-bez .team-bez { display: inline; }
.bez-wahl { position: relative; display: inline-block; }
.bez-wahl-knopf { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0; margin: 0; font: inherit; cursor: pointer; color: var(--text-leise); }
.bez-wahl-knopf .team-bez { display: inline; }
.bez-wahl-knopf:hover, .bez-wahl.offen .bez-wahl-knopf { color: var(--primaer); }
.bez-wahl-pfeil { flex: none; transition: transform .15s; }
.bez-wahl.offen .bez-wahl-pfeil { transform: rotate(180deg); }
.bez-wahl .titel-wahl-menue { min-width: 11rem; }


.tm-bar .tm-funktionen .akt-rund-kreis { background: var(--j-nacht-50); color: var(--primaer); border-color: var(--linie); }
.akt-rund.akt-rund-aktiv .akt-rund-kreis, .akt-rund.wz-link-an .akt-rund-kreis,
.akt-rund.akt-rund-aktiv:hover .akt-rund-kreis, .akt-rund.wz-link-an:hover .akt-rund-kreis {
  background: var(--j-ok-bg); color: var(--j-ok-fg); border: 2px solid var(--j-ok-fg); box-shadow: none; position: relative; }
.akt-rund.akt-rund-aktiv .akt-rund-text, .akt-rund.wz-link-an .akt-rund-text { color: var(--j-ok-fg); font-weight: 700; }
.akt-rund.akt-rund-aktiv:not(.wz-link-an) .akt-rund-kreis::after, .akt-rund.wz-link-an .akt-rund-kreis::after { content: ""; position: absolute; top: -3px; right: -3px; width: .7rem; height: .7rem;
  border-radius: 50%; background: var(--j-ok-fg); border: 2px solid var(--karte); box-sizing: border-box; }
.wz-link-an .wz-punkt { display: none; }


@container seite (min-width: 44.01rem) { .verf-kachel .monatsnavi-zeile { align-items: center; justify-content: flex-start; gap: var(--a3); } .verf-kachel .monatsnavi-zeile > .monatsnavi { flex: 1 1 auto; } .verf-kachel .monatsnavi .tb-zeitraum { width: 100%; flex-wrap: nowrap; } .verf-kachel .monatsnavi .tb-monate { flex: 1 1 auto; flex-wrap: nowrap; min-width: 0; justify-content: space-between; } .verf-kachel .monatsnavi .tb-monate a, .verf-kachel .monatsnavi .tb-monat-zukunft { padding-inline: .5rem; } .verf-kachel .monatsnavi-aktionen { margin-left: 0; flex: none; } .verf-kachel .verf-abgabe { flex-direction: row; gap: var(--a1); min-width: 0; min-height: 2.25rem; } .verf-kachel .verf-abgabe .akt-rund-text { position: static; } }


@container seite (max-width: 44rem) { .tm-zeile:has(.tm-funktionen) { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 0; row-gap: 0; align-items: start; } .tm-zeile:has(.tm-funktionen) > .tm-abteilungen { display: contents; } .tm-zeile:has(.tm-funktionen) > .tm-trenner { display: none; } .tm-zeile:has(.tm-funktionen) .tm-abteilungen .akt-rund:not(.akt-rund-aktiv) { display: none; } .tm-zeile:has(.tm-funktionen) .tm-abteilungen .akt-rund-aktiv { grid-column: 1; grid-row: 1; } .tm-zeile:has(.tm-funktionen) > .tm-funktionen { grid-column: 2 / -1; grid-row: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--a3) 0;
    justify-content: stretch; border-left: 1px solid var(--linie); align-self: stretch; padding-left: .5rem; margin-left: .25rem; } .tm-zeile:has(.tm-funktionen) > .tm-funktionen .akt-rund { flex: none; min-width: 0; padding-inline: 0; } .tm-zeile:has(.tm-funktionen) .akt-rund-text { white-space: nowrap; overflow: visible; text-overflow: clip; max-width: none; font-size: var(--gr-winzig); letter-spacing: -.02em; } .tm-zeile:has(.tm-funktionen) .tm-abteilungen .akt-rund-aktiv .akt-rund-text { font-size: .53rem; } .tk-leiste:has(.tb-leiste-rechts .akt-rund) .tb-leiste { padding-bottom: 0; } .tk-leiste .tb-leiste .tb-leiste-rechts:has(.akt-rund) { position: static; width: 100%; justify-content: flex-end; } }


@container seite (max-width: 26rem) { .tm-bar { padding-inline: .5rem; } .tm-zeile .akt-rund-text { font-size: .5rem !important; letter-spacing: -.02em !important; } }



@container seite (min-width: 44.01rem) { .tabelle-personen td[data-label="Maßnahme"] .j-badge, .tabelle-personen td[data-label="Springer"] .j-badge { box-sizing: border-box; width: 7.25rem; justify-content: flex-start; } .tabelle-personen td[data-label="Maßnahme"] .j-badge-text, .tabelle-personen td[data-label="Springer"] .j-badge-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tabelle-personen td[data-label="Maßnahme"], .tabelle-personen td[data-label="Springer"] { vertical-align: middle; } }

@container seite (max-width: 44rem) { .tabelle-personen td.haupt { padding-right: 3.6rem; gap: var(--a1); } .tabelle-personen td.haupt .j-badge { flex: 1 1 0; width: auto; min-width: 0; } .tabelle-personen td.haupt .karte-pfeil { margin-left: 0; width: 2rem; } .tabelle-personen td[data-label="Maßnahme"] > .j-badge, .tabelle-klienten td[data-label="Maßnahme"] > .j-badge { margin-inline: 0; } }

@container seite (max-width: 44rem) { .db-umschalter:not(.wz-alle) .kachel-radiale { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: var(--a3); column-gap: 0; } .db-umschalter:not(.wz-alle) .wz-ansichten > .akt-rund:not(.akt-rund-aktiv), .db-umschalter:not(.wz-alle) .wz-trenner { display: none !important; } .db-umschalter:not(.wz-alle) .wz-ansichten > .akt-rund-aktiv { grid-column: 1; grid-row: 1 / span 2; align-self: stretch; justify-self: stretch; width: auto; padding-right: .25rem; margin-right: .25rem; border-right: 1px solid var(--linie); } .db-umschalter:not(.wz-alle) .wz-funktionen > .akt-rund, .db-umschalter:not(.wz-alle) .wz-neu > .akt-rund { grid-row: auto; grid-column: auto; justify-self: center; width: auto; min-width: 0; } .db-umschalter .wz-ansichten > .akt-rund-aktiv { cursor: pointer; } .db-umschalter.wz-alle .wz-funktionen > .akt-rund, .db-umschalter.wz-alle .wz-neu > .akt-rund { display: none; } .db-umschalter.wz-alle .wz-trenner { display: none !important; } .db-umschalter.wz-alle .wz-ansichten > .akt-rund { grid-row: 1; } .db-umschalter .akt-rund-text, .db-umschalter button.wz-knopf .akt-rund-text { font-size: var(--gr-winzig) !important; letter-spacing: -.02em; font-weight: 600; } .db-umschalter button.wz-knopf { font-size: var(--gr-winzig); } }



@container seite (max-width: 44rem) { .ruecksprung-von-aktuelles { display: none; } }

@container seite (max-width: 44rem) { .tabelle-personen td.haupt { position: relative; padding-right: 3.5rem; } .tabelle-personen td.haupt .j-badge { width: 100%; flex: 1 1 auto; box-sizing: border-box; padding-right: 2.5rem; } .tabelle-personen td.haupt .karte-pfeil { position: absolute; top: 50%; right: 3.75rem; transform: translateY(-50%); margin: 0; width: 2rem; height: 2rem; z-index: 1; } }


:root { --popup-hoehe: 75dvh; }
@container seite (max-width: 64rem) { .blatt { height: var(--popup-hoehe); max-height: var(--popup-hoehe); } .kal-detail, .akt-form-blatt { height: var(--popup-hoehe); max-height: var(--popup-hoehe); } .dialog:not(.rueckfrage) { width: 100vw; max-width: 100vw; margin: auto 0 0; border-bottom: 0; border-radius: var(--rund-l, 1rem) var(--rund-l, 1rem) 0 0;
    height: var(--popup-hoehe); max-height: var(--popup-hoehe); overflow-y: auto; overscroll-behavior: contain; padding-bottom: env(safe-area-inset-bottom, 0px); } .dialog.kp[open] { overflow: hidden; } }

.vw-tagkopf { align-items: center; }
.vw-tagkopf .akt-datum { line-height: 1; min-width: 0; }
.vw-tagkopf:has(.vw-rund-handy) { align-items: center; }
.vw-gabe-tag .akt-datum { display: flex; }

.vw-tagkopf > .akt-datum { display: flex; min-width: 0; width: 2.5rem; height: 2.5rem; padding: 0; line-height: 1; letter-spacing: 0; text-transform: none; }
.vw-tagkopf > .akt-datum b { font-size: var(--gr-mittel); line-height: 1; color: inherit; text-decoration: none; }
.vw-tagkopf > .akt-datum small { font-size: var(--gr-mini); line-height: 1; min-width: 0; text-transform: uppercase; }
.vw-tagkopf.heute > .akt-datum b { color: inherit; text-decoration: none; }
.vw-tagkopf:has(.vw-rund-handy) > .akt-datum { line-height: 1; margin-top: 0; }


.b-rot { color: var(--j-fehler-fg); }
.b-protokoll { list-style: none; margin: 0; padding: 0; display: grid; }
.b-protokoll > li { display: flex; align-items: center; gap: var(--a3); padding: var(--a2) 0; border-top: 1px solid var(--linie); }
.b-protokoll > li:first-child { border-top: 0; }
.b-protokoll .akt-text { flex: 1; min-width: 0; }
.b-protokoll > li.b-storno { opacity: .55; } .b-protokoll > li.b-storno strong { text-decoration: line-through; }
.b-art-lieferung, .b-art-korrektur, .b-art-stellen { flex: none; width: 2rem; height: 2rem; display: inline-grid; place-items: center; border-radius: 50%; border: 1.5px solid currentColor; }
.b-art-lieferung { color: var(--j-ok-fg); } .b-art-korrektur { color: var(--j-warn-fg); } .b-art-stellen { color: var(--primaer); }
.b-art-lieferung .symbol, .b-art-korrektur .symbol, .b-art-stellen .symbol { width: 14px; height: 14px; }
.b-vorschau { min-height: 1.25rem; margin: 0; font-weight: 600; color: var(--primaer); }
.b-vorschau-fehler { color: var(--j-fehler-fg); } .b-vorschau-warn { color: var(--j-warn-fg); }


.dpl-m-tage { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.dpl-m-zeile { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--a3); align-items: start; padding: var(--a2) 0; border-top: 1px solid var(--linie); }
.dpl-m-tag.woche .dpl-m-zeile { border-top: 0; }
.dpl-m-tag.we .akt-datum:not(.akt-datum-heute) { background: var(--j-bernstein-100, var(--j-nacht-50)); }
.dpl-m-tag.heute .dpl-m-zeile { box-shadow: inset 3px 0 0 var(--akzent); padding-left: var(--a2); margin-left: calc(-1 * var(--a2)); }
.dpl-m-schichten { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--a2); min-width: 0; }
.dpl-m-schicht { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); gap: var(--a2); align-items: center; min-width: 0; }
.dpl-m-schicht .j-badge-schicht { width: 100%; box-sizing: border-box; }
.dpl-m-schicht .j-badge-person { min-width: 0; max-width: 100%; }
.dpl-m-schicht.eigen .j-badge-person { background: var(--j-bernstein-100); border-color: var(--j-bernstein-500); }
.dpl-m-schicht.abw .j-zeit-von, .dpl-m-schicht.abw .j-zeit-bis { color: var(--j-warn-fg); font-weight: 700; }
.dpl-m-frei { font-size: var(--gr-klein); font-style: italic; color: var(--text-leise); padding-left: var(--a2); }
@container seite (max-width: 44rem) { .dpl-handy.dpl-m { padding: 0; } .dpl-m-zeile .akt-datum { margin-top: 2px; } }

.b-protokoll > li { min-width: 0; }
.b-protokoll .j-badge-person { flex: 0 1 auto; min-width: 0; max-width: 40%; }
.b-protokoll .j-badge-person .j-badge-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-protokoll .akt-rund-klein, .b-protokoll .akt-rund-kreis { flex: none; }
@container seite (max-width: 44rem) { .b-protokoll .j-badge-person { max-width: 32%; } }


.dpl-m-schichten { gap: 0; }
.dpl-m-schicht { grid-template-columns: 3.5rem minmax(0, 1fr); gap: 0; align-items: stretch; padding: var(--a1) 0; }
.dpl-m-schicht + .dpl-m-schicht { border-top: 1px dashed var(--linie); }
.dpl-m-code { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding-right: var(--a2); border-right: 1px solid var(--linie); text-align: center; }
.dpl-m-kreis { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--primaer); color: var(--auf-primaer); font-size: var(--gr-etikett); font-weight: 700; }
.dpl-m-zeit { display: flex; flex-direction: column; font-size: var(--gr-winzig); line-height: 1.15; color: var(--text-leise); }
.dpl-m-schicht .j-badge-person, .dpl-m-frei { margin-left: var(--a2); align-self: center; }
.dpl-m-schicht .j-badge-person { width: calc(100% - var(--a2)); box-sizing: border-box; max-width: none; }
.dpl-m-schicht .j-badge-person .j-badge-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dpl-m-schicht.abw .dpl-m-zeit { color: var(--j-warn-fg); font-weight: 700; }
.dpl-m-zeile { grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--a2); }




.kal-tagliste { overflow-anchor: none; }
@container seite (max-width: 44rem) { .team-kal.team-kal-14 .kalender-tag { min-height: 2.5rem; } .team-kal.team-kal-14 .kalender { row-gap: 2px; } .team-kal.team-kal-14 .kalender-kw { font-size: var(--gr-winzig); } }


html::before { content: ""; position: fixed; z-index: 200; top: 0; left: 0; height: 3px; width: 100%; background: var(--akzent); transform: scaleX(0); transform-origin: left; opacity: 0; pointer-events: none; }
html.seite-laedt::before { opacity: 1; transform: scaleX(.85); transition: transform 8s cubic-bezier(.1, .6, .2, 1), opacity .15s; }
@media (min-width: 44.01rem) and (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .kopf { view-transition-name: seitenkopf; }
  .bereichskopf, .verwaltung-kopf { view-transition-name: bereichskopf; }
  ::view-transition-group(seitenkopf), ::view-transition-group(bereichskopf) { animation-duration: 0s; }
  ::view-transition-old(root) { animation: none; }
  ::view-transition-new(root) { animation: jup-ein2 .18s ease-out both; }
  ::view-transition-old(seitenkopf), ::view-transition-old(bereichskopf) { display: none; }
  ::view-transition-new(seitenkopf), ::view-transition-new(bereichskopf) { animation: none; }
  ::view-transition-image-pair(root) { isolation: auto; }
  html::view-transition { background: var(--hintergrund, var(--flaeche, #f6f7fb)); }
}
@media (hover: none) { a, button, .akt-rund, .segment a { -webkit-tap-highlight-color: transparent; } }
a:active, button:active, .akt-rund:active { transition: transform .06s; }
.akt-rund:active .akt-rund-kreis { transform: scale(.94); }
.akt-rund-kreis { transition: transform .12s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease; }
button, a, summary { touch-action: manipulation; }   


@media (prefers-reduced-motion: no-preference) {
  .blatt { will-change: transform; backface-visibility: hidden; }
  .blatt-panel:not([hidden]) { animation: jup-panel-ein .22s cubic-bezier(.2, .7, .2, 1) both; }
  .mt-seite, .verf-seite:not([hidden]), .vp-personen { animation: jup-seite-ein .24s cubic-bezier(.2, .7, .2, 1) both; }
  .blatt-schleier:not([hidden]) { animation: jup-schleier-ein .22s ease-out both; }
}
@container seite (max-width: 64rem) { .blatt { transition: transform .32s cubic-bezier(.22, .8, .2, 1); } .blatt.zieht { transition: none; } }
.vw-rahmen.vw-voll > .blatt { transition: transform .3s cubic-bezier(.22, .8, .2, 1), visibility 0s linear .3s; }
.vw-rahmen.vw-voll > .blatt.offen { transition: transform .3s cubic-bezier(.22, .8, .2, 1); }
@keyframes jup-panel-ein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes jup-seite-ein { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes jup-schleier-ein { from { opacity: 0; } to { opacity: 1; } }
.blatt { contain: layout style; }


.tb-doku-kachel .tb-doku-liste { content-visibility: auto; contain-intrinsic-size: auto 12rem; }


.dpl-m-code { justify-content: flex-start; }
.dpl-m-schicht .j-badge-person, .dpl-m-schicht .dpl-m-frei { align-self: start; height: 2rem; min-height: 2rem; box-sizing: border-box; display: inline-flex; align-items: center; }
.dpl-m-schicht .dpl-m-frei { padding-left: var(--a2); }


.tb-m-code, .tb-doku-datum { display: none; }
@container seite (max-width: 44rem) { .tb-doku-datum { display: flex; } .tb-doku-datumtext { display: none; } .tb-doku-kachel .tb-doku-tag { gap: var(--a2); align-items: center; } .tb-doku-kachel .tb-doku-tag::after { margin: 0; align-self: center; } .tb-doku-datum.we:not(.akt-datum-heute) { background: var(--j-bernstein-100, var(--j-nacht-50)); } .tb-doku-heute { order: 8; } .tb-doku-zaehler { display: none; } .tb-m-code { display: flex; } .tb-d-badge { display: none; } .tb-doku-kachel .tb-doku-link { grid-template-columns: 3.5rem minmax(0, 1fr) 1.5rem; grid-template-rows: auto auto; column-gap: 0; row-gap: var(--a1); padding: var(--a2) var(--a1); align-items: start; } .tb-doku-kachel .tb-doku-schicht { grid-column: 1; grid-row: 1 / span 2; align-self: stretch; padding-right: var(--a2); border-right: 1px solid var(--linie); justify-content: center; } .tb-doku-kachel .tb-doku-schicht .dpl-m-code { border-right: 0; padding-right: 0; justify-content: flex-start; } .tb-doku-kachel .tb-doku-klienten { grid-column: 2; grid-row: 1; margin-left: var(--a2); justify-content: flex-start; flex-wrap: wrap; overflow: visible; align-self: start; } .tb-doku-kachel .tb-doku-wer { grid-column: 2; grid-row: 2; margin-left: var(--a2); min-width: 0; align-self: start; } .tb-doku-kachel .tb-doku-klienten:empty { display: none; } .tb-doku-kachel .tb-doku-klienten:empty + .tb-doku-wer { grid-row: 1; } .tb-doku-kachel .tb-doku-status { display: inline-flex; grid-column: 3; grid-row: 1; justify-self: end; align-self: start; margin-top: .25rem; } .tb-doku-kachel .tb-doku-link .j-badge { min-height: 2rem; height: 2rem; } .tb-doku-kachel .tb-doku-eigen .tb-doku-link, .tb-doku-kachel .tb-doku-link { padding-left: calc(var(--a1) + 3px + var(--a2)); } }


@container seite (max-width: 44rem) { .tb-doku-kachel .tb-doku-klienten, .tb-doku-kachel .tb-doku-status { display: none; } .tb-doku-kachel .tb-doku-link { grid-template-columns: 3.5rem minmax(0, 1fr); grid-template-rows: auto; align-items: start; } .tb-doku-kachel .tb-doku-schicht { grid-row: 1; align-items: flex-start; } .tb-doku-kachel .tb-doku-wer { grid-column: 2; grid-row: 1; align-self: start; } .tb-doku-kachel .tb-doku-wer .j-badge { max-width: 100%; } .tb-doku-kachel .tb-doku-wer .j-badge-text { overflow: visible; text-overflow: clip; white-space: normal; } .tb-doku-datum.akt-datum-heute b, .tb-doku-datum.akt-datum-heute small { color: var(--auf-primaer); } }


@container seite (max-width: 44rem) { .tb-doku-kachel .tb-doku-link, .tb-doku-kachel .tb-doku-eigen .tb-doku-link { grid-template-columns: max-content minmax(0, 1fr); column-gap: 0; } .tb-doku-kachel .tb-doku-link > .tb-doku-wer { margin-left: var(--a2); } .tb-doku-kachel .tb-doku-tag { padding-left: calc(var(--a1) + 3px + var(--a2) - .625rem); } .tb-doku-kachel .tb-doku-datum { width: 3.25rem; } .tb-doku-kachel .tb-doku-datum b { font-size: .875rem; letter-spacing: -.01em; white-space: nowrap; } }


@container seite (max-width: 44rem) { .tb-doku-kachel .tb-doku-datum { width: 3rem; height: 3rem; } .tb-doku-kachel .tb-doku-datum b { font-size: var(--gr-klein); letter-spacing: -.02em; } .tb-doku-kachel .tb-doku-tag { padding-left: calc(var(--a1) + 3px + var(--a2) - .5rem); } }

.dpl-m-kopf { display: flex; align-items: center; gap: var(--a2); margin: var(--a3) 0 var(--a1); padding-left: calc(var(--a1) + 3px + var(--a2) - .5rem); font: inherit; }
.dpl-m-linie { flex: 1; height: 1px; background: var(--linie); }
.dpl-m-datum { width: 3rem; height: 3rem; }
.dpl-m-datum b { font-size: var(--gr-klein); letter-spacing: -.02em; white-space: nowrap; }
.dpl-m-datum.we:not(.akt-datum-heute) { background: var(--j-bernstein-100, var(--j-nacht-50)); }
.dpl-m-datum.akt-datum-heute b, .dpl-m-datum.akt-datum-heute small { color: var(--auf-primaer); }
.dpl-m-zeile { display: block; padding: 0; border-top: 0; margin: 0; box-shadow: none; }
.dpl-m-tag.heute .dpl-m-zeile { box-shadow: none; margin-left: 0; padding-left: 0; }
.dpl-m-schichten { gap: 0; }
.dpl-m-schicht { position: relative; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0; align-items: start;
  padding: var(--a2) var(--a1) var(--a2) calc(var(--a1) + 3px + var(--a2)); border-top: 0; }
.dpl-m-schicht + .dpl-m-schicht { border-top: 1px solid var(--linie); }
.dpl-m-schicht::before { content: ""; position: absolute; left: 0; top: var(--a2); bottom: var(--a2); width: 3px; border-radius: 2px; background: var(--akzent); }
.dpl-m-schicht.genehmigt::before { background: var(--j-ok-fg); }
.dpl-m-schicht .dpl-m-code { padding-right: var(--a2); border-right: 1px solid var(--linie); align-self: stretch; }
.dpl-m-schicht .j-badge-person .j-badge-text { overflow: visible; text-overflow: clip; white-space: normal; }
.dpl-m-schicht .j-badge-person { width: auto; max-width: calc(100% - var(--a2)); }
.dpl-m-schicht.eigen .j-badge-person { background: var(--j-bernstein-100); border-color: var(--j-bernstein-500); }


.dpl-m-kwtext { flex: none; font-size: var(--gr-etikett); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-leise); }
.dpl-m-kopf { margin-top: var(--a4); }
.dpl-m-tag:first-child .dpl-m-kopf { margin-top: 0; }
.dpl-m-linie { background: var(--text-leise); opacity: .45; }


.zr-aktion { display: flex; align-items: center; justify-content: center; gap: var(--a2); width: 100%; box-sizing: border-box; min-height: 2.25rem; padding: 0 var(--a3);
  border: 0; border-radius: var(--rund-voll); background: var(--primaer); color: var(--auf-primaer); font: inherit; font-size: var(--gr-klein); font-weight: 700; cursor: pointer; position: relative; }
.zr-aktion .symbol { width: 15px; height: 15px; }
.zr-aktion .verf-offen-punkt { position: absolute; top: 4px; right: 10px; }
.zr-aktion-fertig { background: var(--j-ok-bg); color: var(--j-ok-fg); }
.zr-aktion-aus { background: var(--j-nacht-50); color: var(--text-leise); cursor: default; }
@container seite (min-width: 44.01rem) { .zr-aktion-slot { display: none; } }
@container seite (max-width: 44rem) { .vp-kachel .vp-abschluss:not(.zr-aktion), .verf-kachel .verf-abgabe:not(.zr-aktion) { display: none; } }
@container seite (min-width: 44.01rem) { .tb-slot:has(> .zr-aktion-slot), .tb-slot:has(> .zr-aktion-slot) + .tb-monate-trenner { display: none; } }
@container seite (max-width: 44rem) { .tb-zeitraum-kompakt .tb-slot:has(> .zr-aktion) { padding: 0; } }
.zr-aktion .symbol { color: inherit; stroke: currentColor; }


.zr-aktion .verf-offen-punkt { display: none; }
@container seite (max-width: 44rem) { .zr-aktion { justify-content: center; } .zr-aktion .symbol { position: absolute; left: var(--a3); top: 50%; transform: translateY(-50%); } .zr-aktion > span { text-align: center; } .vp-kachel .vp-leiste .verf-kontingent-titel { width: auto; flex: 1 1 0; min-width: 0; order: 0; } .vp-kachel .vp-leiste .verf-ring-belegt { order: 1; flex: none; } .vp-kachel .vp-leiste .verf-ring-belegt .verf-ring-text { display: none; } .vp-kachel .vp-leiste > :not(.verf-kontingent-titel):not(.verf-ring-belegt) { order: 2; } }


.vp-m-kopf, .vp-m-code, .vp-m-wer { display: none; }
@container seite (max-width: 44rem) { .vp-leiste.vp-leiste-offen > :not(.verf-kontingent-titel):not(.verf-ring-belegt) { display: none; } .vp-kachel .kalender-liste { gap: 0; } .vp-kachel .kalender-liste .kalender-kw { display: none; } .vp-kachel .kalender-liste .kalender-tag { display: block; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; margin-top: var(--a4); } .vp-kachel .kalender-liste .kalender-tag.heute { box-shadow: none; border: 0; } .vp-kachel .kalender-liste .kalender-tag > .tag-nr, .vp-kachel .kalender-liste .kalender-tag > .tag-status { display: none; } .vp-kachel .vp-m-kopf { display: flex; align-items: center; gap: var(--a2); margin: 0 0 var(--a1); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; } .vp-kachel .vp-m-kopf .dpl-m-linie { flex: 1; height: 1px; background: var(--text-leise); opacity: .45; } .vp-kachel .kalender-tag.vp-ziel-tag .vp-m-kopf .dpl-m-datum { box-shadow: 0 0 0 2px var(--akzent); } .vp-kachel .kalender-liste .vp-slot { position: relative; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0; align-items: start; width: auto; min-height: 0;
    padding: var(--a2) var(--a1) var(--a2) calc(var(--a1) + 3px + var(--a2)); border: 0; border-radius: 0; background: none; box-shadow: none; outline-offset: -2px; } .vp-kachel .kalender-liste .vp-slot:not(.belegt) { border: 0; } .vp-kachel .kalender-liste .vp-slot + .vp-slot { border-top: 1px solid var(--linie); } .vp-kachel .kalender-liste .vp-slot::before { content: ""; position: absolute; left: 0; top: var(--a2); bottom: var(--a2); width: 3px; border-radius: 2px; background: var(--akzent); } .vp-kachel .kalender-liste .vp-slot.belegt::before { background: var(--j-ok-fg); } .vp-kachel .kalender-liste .vp-slot.konflikt::before { background: var(--j-fehler-fg); } .vp-kachel .kalender-liste .vp-slot.vp-ziel { outline: 2px solid var(--primaer); background: var(--j-nacht-50); border-radius: var(--rund-s); } .vp-kachel .kalender-liste .vp-slot.vp-wechsel { outline: 2px dashed var(--akzent); background: var(--j-bernstein-100, var(--j-nacht-50)); border-radius: var(--rund-s); } .vp-kachel .kalender-liste .vp-slot > .vp-slot-kopf, .vp-kachel .kalender-liste .vp-slot > .wer, .vp-kachel .kalender-liste .vp-slot > .vp-sel { display: none; } .vp-kachel .vp-slot .vp-m-code { display: flex; padding-right: var(--a2); border-right: 1px solid var(--linie); align-self: stretch; justify-content: flex-start; } .vp-kachel .vp-slot .vp-m-wer { display: flex; align-items: flex-start; gap: var(--a2); min-width: 0; margin-left: var(--a2); } .vp-kachel .vp-slot .vp-m-wer .j-badge-person { height: 2rem; min-height: 2rem; box-sizing: border-box; width: auto; max-width: calc(100% - var(--a2)); align-items: center; } .vp-kachel .vp-slot .vp-m-wer .j-badge-person .j-badge-text { overflow: visible; text-overflow: clip; white-space: normal; } .vp-kachel .vp-slot .vp-m-wer .dpl-m-frei { align-self: center; height: 2rem; display: inline-flex; align-items: center; padding-left: var(--a2); font-style: italic; color: var(--text-leise); } .vp-kachel .vp-slot .vp-m-konflikt { flex: none; align-self: center; display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--j-fehler-bg); color: var(--j-fehler-fg); font-size: var(--gr-zusatz); font-weight: 700; } .vp-kachel .vp-slot .vp-weg { display: none; } }


@container seite (max-width: 64rem) { .vp-raster > .vp-personen { animation: none !important; will-change: transform; backface-visibility: hidden; touch-action: pan-y;
    transition: transform .32s cubic-bezier(.22, .8, .2, 1), visibility 0s linear .32s; } .vp-raster > .vp-personen.offen { transition: transform .32s cubic-bezier(.22, .8, .2, 1), visibility 0s; } .vp-raster > .vp-personen.zieht, .vp-raster > .vp-personen.still { transition: none !important; } }
@container seite (max-width: 64rem) { .vp-seite-hinweis.wechsel { color: var(--akzent); font-weight: 700; white-space: normal; text-align: left; line-height: 1.25; } }


@container seite (max-width: 64rem) { .team-kal-raster.mit-detail { grid-template-columns: minmax(0, 1fr); gap: 0; } }


html, body { overscroll-behavior-y: contain; }


.kal-teil { border: 1px solid var(--linie); border-radius: var(--rund-s, 8px); background: var(--karte); }
.kal-teil-kopf { display: flex; align-items: center; gap: var(--a2); padding: var(--a2) var(--a3); min-height: 2.5rem; cursor: pointer; list-style: none; }
.kal-teil-kopf::-webkit-details-marker { display: none; }
.kal-teil-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--gr-klein); }
.kal-teil-text.leer { color: var(--text-leise); }
.kal-teil-pfeil { width: .5rem; height: .5rem; border-right: 2px solid var(--text-leise); border-bottom: 2px solid var(--text-leise); transform: rotate(45deg) translateY(-2px); transition: transform .2s; flex: none; }
.kal-teil[open] .kal-teil-pfeil { transform: rotate(-135deg) translateY(-2px); }
.kal-teil[open] .kal-teil-kopf { border-bottom: 1px solid var(--linie); }
.kal-teil-liste { max-height: 14rem; overflow-y: auto; overscroll-behavior: contain; padding: var(--a1) 0; }
.kal-teil-gruppe { padding: var(--a2) var(--a3) var(--a1); font-size: var(--gr-etikett); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-leise); }
.kal-teil-gruppe-trenn { margin-top: var(--a1); border-top: 1px solid var(--linie); padding-top: var(--a3); }
.kal-teil-zeile { display: flex; align-items: center; gap: var(--a3); padding: var(--a2) var(--a3); min-height: 2.5rem; cursor: pointer; font-size: var(--gr-klein); }
.kal-teil-zeile input { width: 1.125rem; height: 1.125rem; accent-color: var(--primaer); flex: none; }
.kal-teil-zeile:has(input:checked) { background: var(--j-nacht-50); font-weight: 600; }


.vp-zeitkachel, .verf-zeitkachel { margin-bottom: var(--a4); }
.vp-zeitkachel .team-kal-kopfzeile, .verf-zeitkachel .team-kal-kopfzeile { margin-bottom: 0; }
@container seite (min-width: 64.01rem) { .verf-raster > .verf-seite { align-self: stretch; } .verf-raster > .verf-seite > .verf-seite-innen { position: sticky; top: var(--a4); display: flex; flex-direction: column;
    max-height: calc(100dvh - 2 * var(--a4)); overflow-y: auto; overscroll-behavior: contain; } .verf-raster.mit-detail > .verf-seite .verf-fuss { position: sticky; bottom: 0; } }
@container seite (max-width: 64rem) { .verf-seite-innen { display: contents; } }


@container seite (max-width: 44rem) { .vp-zeitkachel .monatsnavi-aktionen, .verf-zeitkachel .monatsnavi-aktionen { display: none; } }

@container seite (min-width: 44.01rem) { .vp-kachel:not(.dp-kachel) .vp-leiste-kal { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--a4); margin: 0 0 var(--a3); padding: 0; } .vp-kachel:not(.dp-kachel) .vp-leiste-kal .verf-kontingent-titel { width: auto; flex: 1 1 0; min-width: 0; } .vp-kachel:not(.dp-kachel) .vp-leiste-kal .verf-ring-belegt { flex: none; width: 80px; justify-content: center; margin: 0; order: 2; } .vp-kachel:not(.dp-kachel) .vp-leiste-kal .verf-ring-belegt .verf-ring-text { display: none; } }


.verf-kachel .kalender-tag, .verf-kachel .kalender-tag *,
.verf-kachel .kalender-liste, .verf-kachel .kalender-liste * {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.verf-kachel .kalender-tag { cursor: pointer; }


.wischen-zieht, .wischen-zieht * { animation: none !important; }
.wischen-zieht { transition: none !important; will-change: transform; user-select: none; -webkit-user-select: none; }
.wischen-gleitet { animation: none !important; will-change: transform; pointer-events: none; }
.kal-griff, .blatt-griff, .kp-griff, [data-vp-griff] { touch-action: none; }


@container seite (max-width: 44rem) { .tm-bar .tm-abteilungen { justify-content: stretch; } .tm-bar .tm-zeile:not(:has(.tm-funktionen)) .tm-abteilungen .akt-rund { flex: 1 1 0; min-width: 0; padding-inline: 0; align-items: center; } .tm-bar .tm-zeile:not(:has(.tm-funktionen)) .tm-abteilungen .akt-rund-text { text-align: center; } }


.akt-rund-text .rt-kurz { display: none; }
@container seite (max-width: 44rem) { .akt-rund-text .rt-voll { display: none; } .akt-rund-text .rt-kurz { display: inline; } .tm-bar .tm-zeile:not(:has(.tm-funktionen)) .tm-abteilungen { justify-content: space-between; } .tm-bar .tm-zeile:not(:has(.tm-funktionen)) .tm-abteilungen .akt-rund { flex: 1 1 0; } .tm-zeile:has(.tm-funktionen) .tm-abteilungen .akt-rund-aktiv .akt-rund-text { font-size: var(--gr-winzig); } }



.vw-linie { display: none; }
@container seite (max-width: 44rem) { .vw-linie { display: block; flex: 1; height: 1px; background: var(--text-leise); opacity: .45; align-self: center; min-width: .5rem; } .vw-tagblock { border-top: 0; } .vw-tagkopf, .vw-tagkopf:has(.vw-rund-handy) { align-items: center; gap: var(--a3); } .vw-tagkopf:has(.vw-rund-handy) > span:not(.vw-rund-handy):not(.vw-linie):not(.akt-datum), .vw-tagkopf:has(.vw-rund-handy) > b { line-height: normal; } .vw-rund-handy { margin-left: 0; align-items: center; } .vw-rund-handy .akt-rund { margin-bottom: -1.1rem; } .vw-tagkopf:has(.vw-rund-handy) { margin-bottom: 1.1rem; } }


.kasse-zeitkachel { margin-bottom: var(--a4); }
.kasse-zeitkachel .team-kal-kopfzeile { margin-bottom: 0; }
@container seite (max-width: 44rem) { .kasse-buchen-radial { display: none; } }

.kasse-art { justify-content: space-around; gap: var(--a3); }
.kasse-art label.akt-rund { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: var(--a1); padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.kasse-art label.akt-rund > .akt-rund-kreis { display: flex; padding: 0; border-top-width: 1px; border-radius: 50%; }
.kasse-art label.akt-rund > .akt-rund-text { display: block; padding: 0; border: 0; background: none; box-shadow: none; font-size: var(--gr-etikett); font-weight: 600; color: var(--text-leise); text-transform: none; letter-spacing: 0; }
.kasse-art input:checked ~ .akt-rund-kreis { background: var(--j-ok-fg); border-color: var(--j-ok-fg); color: var(--j-weiss); box-shadow: none; }
.kasse-art input:checked ~ .akt-rund-kreis .symbol { color: inherit; }
.kasse-art input:checked ~ .akt-rund-text { color: var(--j-ok-fg); }

.kasse-betrag-datum { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--a4); align-items: start; }
@container seite (max-width: 44rem) { .kasse-betrag-datum { grid-template-columns: minmax(0, 1fr); gap: var(--a3); } }
.kasse-betrag-datum input[data-betrag] { font-size: 1.5rem; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; min-height: 3rem; }

.kasse-dialog .j-datum { display: block; }
.kasse-dialog .j-datum-knopf { width: 100%; min-height: 3rem; justify-content: flex-start; gap: var(--a2); padding: 0 var(--a3); border: 1px solid var(--linie); border-radius: var(--rund-s); background: var(--karte); font-size: var(--gr-mittel); font-weight: 600; }
.kasse-dialog .j-datum-knopf .j-badge-text { flex: 1; text-align: left; }
.kasse-dialog .j-datum-pop { position: static; width: 100%; box-sizing: border-box; margin-top: var(--a2); box-shadow: none; border: 1px solid var(--linie); border-radius: var(--rund-m); background: var(--flaeche, var(--karte)); padding: var(--a3); }
.kasse-dialog .j-datum-raster button { height: 2.5rem; font-size: var(--gr-text); }
.kasse-dialog .j-datum-raster button.gewaehlt { box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }
.kasse-dialog .j-datum-kopf strong { font-size: var(--gr-text); }
.kasse-dialog .j-datum-kopf button { width: 2.5rem; height: 2.5rem; }
.kasse-art label.akt-rund > .akt-rund-kreis { border: 1px solid var(--linie); border-radius: 50%; background: var(--karte); width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; box-shadow: none; flex-direction: row; gap: 0; }
.kasse-art label.akt-rund.kasse-art-ein > .akt-rund-kreis, .kasse-art label.akt-rund.kasse-art-aus > .akt-rund-kreis { border-color: var(--linie); }
.kasse-art label.akt-rund > .akt-rund-text { flex-direction: row; }
.kasse-art input:checked ~ .akt-rund-kreis, .kasse-art label.akt-rund input:checked ~ .akt-rund-kreis { background: var(--j-ok-fg); border-color: var(--j-ok-fg); color: var(--j-weiss); }
.kasse-art label.akt-rund > .akt-rund-kreis { color: var(--primaer); }
.kasse-art label.akt-rund > .akt-rund-kreis > .symbol { width: 20px; height: 20px; color: inherit; stroke: currentColor; }
.kasse-art label.akt-rund > .akt-rund-kreis > .med-ecke { color: var(--primaer); }
.kasse-art input:checked ~ .akt-rund-kreis { color: var(--j-weiss); }


.kasse-liste { gap: var(--a2); }
.kasse-zeile { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto auto; gap: var(--a3); align-items: center; padding: var(--a3);
  border: 1px solid var(--linie); border-left: 4px solid var(--j-stein-300, #cbd5e1); border-radius: var(--rund-m); background: var(--karte); }
.kasse-zeile:hover { background: var(--j-nacht-50); }
.kasse-zeile .kasse-kachel { width: 2.5rem; height: 2.5rem; }
.kasse-geld { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.kasse-geld .kasse-betrag { font-size: var(--gr-lese); }
.j-badge-art .j-badge-symbol { color: var(--j-weiss); }
.j-badge-art-einzahlung { border-color: var(--j-ok-fg); background: var(--j-ok-bg); color: var(--j-ok-fg); }
.j-badge-art-einzahlung .j-badge-symbol { background: var(--j-ok-fg); }
.j-badge-art-ausgabe { border-color: var(--j-fehler-fg); background: var(--j-fehler-bg); color: var(--j-fehler-fg); }
.j-badge-art-ausgabe .j-badge-symbol { background: var(--j-fehler-fg); }
.j-badge-art-auszahlung { border-color: var(--j-bernstein-500); background: var(--j-bernstein-100); color: var(--j-warn-fg); }
.j-badge-art-auszahlung .j-badge-symbol { background: var(--j-bernstein-500); }
.j-badge-umschlag { border-style: dashed; }
.j-badge-umschlag .j-badge-symbol { color: var(--primaer); }
@container seite (max-width: 44rem) { .kasse-zeile { grid-template-columns: 2.5rem minmax(0, 1fr) auto; row-gap: var(--a2); } .kasse-zeile .kasse-aktionen { grid-column: 2 / -1; justify-content: flex-start; } }

.kasse-art input:checked ~ .akt-rund-kreis { color: var(--j-weiss); }
.kasse-art .kasse-art-ein input:checked ~ .akt-rund-kreis { background: var(--j-ok-fg); border-color: var(--j-ok-fg); }
.kasse-art .kasse-art-aus input:checked ~ .akt-rund-kreis { background: var(--j-fehler-fg); border-color: var(--j-fehler-fg); }
.kasse-art .kasse-art-ein input:checked ~ .akt-rund-text { color: var(--j-ok-fg); }
.kasse-art .kasse-art-aus input:checked ~ .akt-rund-text { color: var(--j-fehler-fg); }
.kasse-art .kasse-art-aus input:checked ~ .akt-rund-kreis .med-ecke, .kasse-art .kasse-art-ein input:checked ~ .akt-rund-kreis .med-ecke { color: var(--text); border-color: var(--j-weiss); }

.kasse-dialog form .dialog-inhalt { overflow: visible; }
.kasse-dialog .kasse-betrag-datum { position: relative; }
.kasse-dialog .kasse-betrag-datum > .feld { position: relative; }
.kasse-dialog .j-datum { position: static; }
.kasse-dialog .j-datum-knopf, .kasse-dialog .kasse-betrag-datum input[data-betrag] { box-sizing: border-box; height: 3.25rem; min-height: 3.25rem; }
.kasse-dialog .j-datum-knopf { width: 100%; }
.kasse-dialog .j-datum-pop { position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 4px); width: auto; min-width: 17.5rem; margin: 0;
  box-shadow: var(--schatten-dialog, 0 12px 32px rgba(0, 0, 0, .22)); }
@container seite (min-width: 44.01rem) { .kasse-dialog .kasse-betrag-datum > .feld:last-child .j-datum-pop { left: auto; right: 0; } }
@container seite (max-width: 44rem) { .kasse-dialog .kasse-betrag-datum > .feld { position: static; } .kasse-dialog .kasse-betrag-datum { position: static; } .kasse-dialog .j-datum { position: relative; } }
.kasse-dialog .kasse-umschlag-wahl { display: grid; gap: var(--a3); }
.kasse-dialog [hidden] { display: none !important; }

.kasse-umschlaege { list-style: none; margin: 0 0 var(--a3); padding: 0; display: grid; gap: var(--a2); }
.kasse-umschlag { display: flex; align-items: center; justify-content: space-between; gap: var(--a3); flex-wrap: wrap; padding: var(--a3); border: 1px solid var(--linie); border-radius: var(--rund-m); background: var(--karte); }
.kasse-umschlag-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a2); min-width: 0; }
.kasse-umschlag-stand { font-size: var(--gr-titel); color: var(--j-ok-fg); }
.kasse-umschlag-stand.leer { color: var(--text-leise); }
.kasse-art label.akt-rund.kasse-art-aus input:checked ~ .akt-rund-kreis { background: var(--j-fehler-fg); border-color: var(--j-fehler-fg); color: var(--j-weiss); }
.kasse-art label.akt-rund.kasse-art-ein input:checked ~ .akt-rund-kreis { background: var(--j-ok-fg); border-color: var(--j-ok-fg); color: var(--j-weiss); }
.kasse-art label.akt-rund.kasse-art-aus input:checked ~ .akt-rund-text { color: var(--j-fehler-fg); }


.sp-karte.sp-haupt { border-color: var(--primaer); border-width: 2px; box-shadow: 0 0 0 3px var(--j-nacht-50); }
.sp-adresse { display: flex; align-items: center; gap: var(--a1); }
.sp-adresse .symbol { width: 1em; height: 1em; flex: none; }
.sp-ort { display: flex; flex-direction: column; gap: 2px; padding: var(--a2) var(--a3); border-radius: var(--rund-s); border-left: 4px solid var(--linie); background: var(--j-nacht-50); }
.sp-ort-text { font-weight: 700; }
.sp-ort-zahl { color: var(--text-leise); font-size: var(--gr-klein); }
.sp-ort-ja { border-left-color: var(--j-ok-fg); background: var(--j-ok-bg); }
.sp-ort-ja .sp-ort-text { color: var(--j-ok-fg); }
.sp-ort-nein { border-left-color: var(--j-warn-fg); background: var(--j-warn-bg); }
.sp-ort-nein .sp-ort-text { color: var(--j-warn-fg); }
.sp-ort-kein { border-left-color: var(--j-fehler-fg); background: var(--j-fehler-bg); }
.sp-ort-kein .sp-ort-text { color: var(--j-fehler-fg); }
.sp-timer { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--a2) 0; }
.sp-timer-zahl { font-size: 2.25rem; font-weight: 700; line-height: 1.1; color: var(--j-ok-fg); font-variant-numeric: tabular-nums; }
.sp-timer small { color: var(--text-leise); }
.sp-haupt .sp-knopf .akt-rund-kreis { width: 3.5rem; height: 3.5rem; }   


.kp-knopf.kp-anruf, .kp-knopf.kp-anruf:hover, .kp-knopf.kp-anruf:focus-visible { color: var(--j-weiss); }
.kp-knopf.kp-anruf .symbol, .kp-knopf.kp-anruf svg { color: var(--j-weiss); stroke: var(--j-weiss); }
.kp-kopf .akt-rund-kreis[class*="primaer"], .kp-kopf button.akt-rund .akt-rund-kreis { color: var(--j-weiss); }


@container seite (min-width: 44.01rem) { .vw-wahlzeile .tb-zeitraum-kompakt { flex-wrap: nowrap; gap: var(--a2); align-items: center; } .vw-wahlzeile .tb-zeitraum-kompakt .tb-monate { flex-wrap: nowrap; padding: 2px; gap: 0; } .vw-wahlzeile .tb-zeitraum-kompakt .tb-monate > a, .vw-wahlzeile .tb-zeitraum-kompakt .tb-monate > .tb-monat-zukunft { padding: .2rem .5rem; font-size: var(--gr-klein); white-space: nowrap; } .vw-wahlzeile .tb-zeitraum-kompakt .tb-monate .tb-monate-trenner { margin: 6px 2px; } .vw-wahlzeile .tb-zeitraum-kompakt .jahr-wahl-knopf { padding: .2rem .5rem .2rem .75rem; font-size: var(--gr-text); } .vw-wahlzeile { margin-bottom: var(--a2); } }


.bs-zeile { width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--a3); padding: var(--a2) var(--a3); border: 1px solid var(--linie); border-radius: var(--rund-m); background: var(--karte); font: inherit; color: var(--text); text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.bs-zeile:hover, .bs-zeile:focus-visible { border-color: var(--primaer); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primaer) 18%, transparent); outline: none; }
.bs-zeile .verf-ring-kreis, .bs-kopf .verf-ring-kreis { width: 3rem; height: 3rem; flex: none; }
.bs-zeile .verf-ring-kreis b, .bs-kopf .verf-ring-kreis b { font-size: .875rem; }
.bs-name { display: grid; min-width: 0; }
.bs-name strong { overflow: hidden; text-overflow: ellipsis; }
.bs-name small, .bs-tage { color: var(--text-leise); font-size: var(--gr-klein); }
.bs-tage { white-space: nowrap; font-weight: 600; }
.bs-zeile.b-stufe-warn .bs-tage { color: var(--j-warn-fg); } .bs-zeile.b-stufe-fehler .bs-tage { color: var(--j-fehler-fg); }
.bs-kopf { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--a3); margin-bottom: var(--a3); }
.bs-werte { display: grid; grid-template-columns: 1fr 1fr; gap: var(--a2); margin: 0 0 var(--a3); }
.bs-werte > div { padding: var(--a2) var(--a3); border-radius: var(--rund-m); background: var(--flaeche); display: grid; gap: 2px; }
.bs-werte dt { font-size: var(--gr-mini); letter-spacing: .05em; text-transform: uppercase; color: var(--akzent); font-weight: 700; }
.bs-werte dd { margin: 0; }
.bs-aktionen { display: flex; flex-wrap: wrap; gap: var(--a3); margin: var(--a3) 0; }
.bs-protokoll { margin: 0; }
@container seite (max-width: 64rem) { .bs-zeile { padding: var(--a3); } .bs-aktionen { justify-content: space-between; } }


.kp-scroll { overflow-x: hidden; }
.kp-zeile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.kp-text { overflow: hidden; }
.kp-aktionen { display: grid; grid-template-columns: repeat(2, 2.5rem); gap: var(--a2); justify-items: center; }
.kp-knopf-platz { display: block; width: 2.5rem; height: 2.5rem; }
@container seite (max-width: 44rem) { .kp-aktionen { grid-template-columns: repeat(2, 2.5rem); gap: var(--a1); } .kp-knopf, .kp-anruf, .kp-knopf-platz { min-width: 2.5rem; width: 2.5rem; height: 2.5rem; } .kp-zeile { gap: var(--a2); padding-right: 0; } }
a.kp-knopf.kp-anruf, a.kp-knopf.kp-anruf:visited, a.kp-knopf.kp-anruf:hover { color: var(--j-weiss) !important; }
a.kp-knopf.kp-anruf svg, a.kp-knopf.kp-anruf .symbol { color: var(--j-weiss) !important; stroke: var(--j-weiss) !important; fill: none !important; }


.vw-rund .akt-rund-kreis, .vw-rund-handy .akt-rund-kreis {
  background: var(--j-nacht-50); color: var(--primaer); border-color: var(--linie); }
.vw-rund .akt-rund-kreis .symbol { color: var(--primaer); stroke: currentColor; }


.bs-zeile .bs-name { display: grid; gap: 1px; }
.bs-zeile .bs-name strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-zeile .bs-tage { white-space: nowrap; }
.bs-ring { background: none; border: 0; padding: 0; cursor: pointer; border-radius: 50%; }
.bs-zeile .bs-ring .verf-ring-kreis { width: 2.75rem; height: 2.75rem; }


.kp-zeile { grid-template-columns: minmax(0, 1fr) auto; }
.kp-detail { padding-left: var(--a2); }
.kp-d-fuss { display: flex; gap: var(--a4); align-items: flex-start; }
.bs-zeile .bs-name strong { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }


.kp-zeile { padding-right: calc(var(--a2) + .5rem); }
.kp-kopf { padding-right: calc(var(--a3) + var(--a2) + .5rem); }
.kp-kopf-rechts { display: grid; grid-template-columns: repeat(2, 2.5rem); gap: var(--a2); justify-items: center; align-items: start; }
.kp-detail { padding-right: calc(var(--a2) + .5rem); }
.kp-d.kp-d-fuss { display: grid; grid-template-columns: repeat(2, 2.5rem); gap: var(--a2); justify-content: end; justify-items: center; align-items: start; }
.kp-d-fuss .akt-rund-kreis { width: 2.5rem; height: 2.5rem; }
@container seite (max-width: 44rem) { .kp-aktionen, .kp-kopf-rechts, .kp-d.kp-d-fuss { gap: var(--a1); } }


@container seite (min-width: 64.01rem) { .vw-rahmen.leiste-zu { grid-template-columns: minmax(0, 1fr); } .vw-rahmen.leiste-zu > .blatt { display: none; } }
.bs-seite .bs-zeile { grid-template-columns: 1fr auto; }
@container seite (min-width: 64.01rem) { [data-plan-rahmen] > .blatt .blatt-zu { display: inline-flex; } }   


.bs-ring { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.bs-einheit { color: var(--text-leise); font-size: var(--gr-etikett); font-weight: 600; line-height: 1; max-width: 4.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs-zeilen-aktionen { display: none; }
@container seite (min-width: 64.01rem) { .bs-zeile .bs-zeilen-aktionen { display: flex; flex-wrap: nowrap; gap: var(--a4); margin: 0; justify-content: flex-end; } .bs-zeilen-aktionen .akt-rund-kreis { width: 2.25rem; height: 2.25rem; } }



.bs-med { display: flex; align-items: center; gap: var(--a3); margin: 0 0 var(--a3); }
.bs-med-ico { flex: none; width: 2.5rem; height: 2.5rem; }
.bs-med-text { display: grid; min-width: 0; }
.bs-med-text strong { font-size: var(--gr-lese); overflow-wrap: anywhere; }
.bs-med-text small { color: var(--text-leise); font-size: var(--gr-klein); }
.bs-schalter { display: flex; gap: var(--a4); justify-content: center; margin: 0 0 var(--a3); padding-bottom: var(--a3); border-bottom: 1px solid var(--linie); }
.bs-schalter [hidden] { display: none; }


.bs-vorrat { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  border: 2px solid var(--j-ok-fg); background: var(--karte); font-weight: 700; font-size: var(--gr-text); font-variant-numeric: tabular-nums; color: var(--text); }
.bs-zeile.b-stufe-warn .bs-vorrat { border-color: var(--j-warn-fg); }
.bs-zeile.b-stufe-fehler .bs-vorrat { border-color: var(--j-fehler-fg); }
.bs-zeile.b-stufe-kein .bs-vorrat { border-color: var(--linie); color: var(--text-leise); }
.bs-ring:hover .bs-vorrat { box-shadow: 0 0 0 2px color-mix(in srgb, var(--primaer) 25%, transparent); }
@container seite (min-width: 64.01rem) { .bs-zeile .bs-name { padding-right: var(--a5, 1.5rem); } .bs-zeile .bs-tage { display: none; } .bs-datum-faellig b { color: var(--j-warn-fg); } }
@container seite (min-width: 64.01rem) { .bs-zeile .bs-zeilen-aktionen { justify-content: flex-start; } }
@container seite (min-width: 64.01rem) { .bs-zeile .bs-name { padding-right: 0; } .bs-zeile .bs-zeilen-aktionen { justify-content: flex-end; gap: var(--a5, 1.5rem); } }
@container seite (min-width: 64.01rem) { .bs-zeile .bs-zeilen-aktionen { justify-content: flex-start; gap: var(--a4); } }


.bs-tabelle { table-layout: auto; }
.bs-tabelle th, .bs-tabelle td { vertical-align: middle; }
.bs-tabelle td.bs-name { display: table-cell; padding-right: var(--a4); }
.bs-tabelle td.bs-name strong { display: block; white-space: normal; overflow: visible; overflow-wrap: anywhere; }
.bs-tabelle td.bs-name small { display: block; }
.bs-tabelle .bs-sp-vorrat { width: 6rem; text-align: center; }
.bs-tabelle th.bs-sp-vorrat { text-align: center; }
.bs-tabelle .bs-sp-datum { width: 22%; font-variant-numeric: tabular-nums; }
.bs-tabelle .bs-sp-aktion { width: 1%; white-space: nowrap; }
.bs-tabelle .bs-leer { color: var(--text-leise); }
.bs-tabelle tbody tr:hover { background: transparent; }
.bs-tabelle .bs-ring { margin: 0 auto; }
.bs-tabelle .bs-zeilen-aktionen { display: flex; gap: var(--a4); margin: 0; justify-content: flex-start; flex-wrap: nowrap; }
.bs-tabelle .bs-datum-faellig b { color: var(--j-warn-fg); }
.bs-tabelle .bs-zeilen-aktionen .akt-rund-kreis { width: 2.25rem; height: 2.25rem; }
@container seite (max-width: 64rem) { .bs-tabelle thead, .bs-tabelle .bs-sp-datum, .bs-tabelle .bs-sp-aktion { display: none; } .bs-tabelle, .bs-tabelle tbody { display: block; } .bs-tabelle tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--a3); padding: var(--a3); border-bottom: 1px solid var(--linie); } .bs-tabelle tbody tr:last-child { border-bottom: 0; } .bs-tabelle td { display: block; padding: 0; border: 0; width: auto; } .bs-tabelle .bs-tage { display: block; } }
@container seite (min-width: 64.01rem) { .bs-tabelle .bs-tage { display: none; } .bs-tabelle td.bs-name { width: 28%; } }
@container seite (min-width: 64.01rem) { .bs-tabelle tr.bs-zeile { display: table-row; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; cursor: default; } .bs-tabelle tr.bs-zeile > td { padding: var(--a3) var(--a4); border-bottom: 1px solid var(--linie); } .bs-tabelle tr.bs-zeile:last-child > td { border-bottom: 0; } .bs-tabelle tr.bs-zeile .bs-name { display: table-cell; } }
@container seite (max-width: 64rem) { .bs-tabelle tr.bs-zeile { border-radius: 0; background: transparent; box-shadow: none; border-width: 0 0 1px; } .bs-tabelle tr.bs-zeile:hover { box-shadow: none; } }
.bs-tabelle td::before { content: none !important; display: none !important; }   
@container seite (min-width: 64.01rem) { .bs-tabelle td.bs-name small.bs-tage { display: none; } }

@container seite (min-width: 64.01rem) { .bs-tabelle td.bs-name { width: 15rem; } .bs-tabelle .bs-sp-datum { width: 24%; } }   
@container seite (min-width: 64.01rem) { .bs-tabelle { table-layout: fixed; } .bs-tabelle td.bs-name, .bs-tabelle th:first-child { width: 12rem; } .bs-tabelle .bs-sp-vorrat, .bs-tabelle th.bs-sp-vorrat { width: 6.5rem; text-align: left; } .bs-tabelle .bs-ring { margin: 0; } .bs-tabelle .bs-sp-datum { width: auto; } .bs-tabelle .bs-sp-aktion, .bs-tabelle th.bs-sp-aktion { width: 11rem; } }
@container seite (min-width: 64.01rem) { .bs-tabelle .bs-sp-vorrat, .bs-tabelle th.bs-sp-vorrat { width: 8rem; text-align: center; } .bs-tabelle td.bs-sp-vorrat .bs-ring { margin: 0 auto; } }


.abo-aktionen { display: inline-flex; gap: var(--a3); align-items: flex-start; }
.pw-feld > .akt-rund { flex: none; margin-left: 0; min-width: 0; }
.konto-bild-form .akt-rund { margin-left: 0; }
.konto-abmelden { display: flex; justify-content: center; margin-top: var(--a6); }

.bereichszeile { margin: 0 0 var(--a1); }
.bereichszeile .bez-wahl-knopf, .bereichszeile .team-bez { white-space: nowrap; }
.inhalt-metis > .bereichszeile { flex: none; padding: var(--a2) var(--a4) 0; margin: 0; }
.inhalt.inhalt-metis:has(> .bereichszeile) { display: flex; flex-direction: column; }
.inhalt-metis > .bereichszeile ~ .metis-seite { flex: 1; min-height: 0; height: auto; }

.rollen-uebersicht .rollen-gruppe th { text-align: left; font-size: var(--gr-klein); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-leise); background: none; padding-top: var(--a4); }


.monatswahl > .akt-rund { margin-left: 0; }
.klaerung-ms { margin-bottom: var(--a4); }


.urlaub-zeile { border-left-color: var(--j-info-fg); }
.urlaub-zeile .kasse-aktionen form { display: contents; }
.j-badge-urlaub { border-color: var(--j-info-fg); background: var(--j-info-bg); color: var(--j-info-fg); }
.j-badge-urlaub .j-badge-symbol { color: var(--j-info-fg); }
.urlaub-ueber { color: var(--j-fehler-fg); }
.urlaub-erklaerung { margin: var(--a3) 0 0; }


.urlaub-kal { margin-bottom: var(--a4); }
.urlaub-kal-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--a3); margin-bottom: var(--a3); }
.urlaub-kal-kopf .titel-wahl h2, .urlaub-kal-kopf > h2 { margin: 0; font-size: 1.375rem; }
.urlaub-kal-zahlen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a3) var(--a5, 2rem); margin-bottom: var(--a3); }
.urlaub-kal-stunden { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); gap: var(--a2) var(--a5, 2rem); margin: 0; }
.urlaub-kal-stunden dt { font-size: var(--gr-etikett); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-leise); }
.urlaub-kal-stunden dd { margin: 0; }
.urlaub-kal-stunden small { color: var(--text-leise); }
.urlaub-kal .kalender-tag { position: relative; cursor: pointer; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.urlaub-kal .kalender-tag:has(input:focus-visible) { outline: 2px solid var(--fokus); outline-offset: -2px; }
.urlaub-kal .kalender-tag.urlaub-zieht-an { box-shadow: inset 0 0 0 2px var(--j-info-fg); background: var(--j-info-bg); }
.urlaub-kal .kalender-tag.urlaub-zieht-aus { box-shadow: inset 0 0 0 2px var(--j-fehler-fg); }
.urlaub-kal-dienst { position: absolute; top: 4px; right: 4px; display: inline-flex; color: var(--j-warn-fg, #b45309); }
.urlaub-kal-dienst .symbol { width: 12px; height: 12px; color: inherit; }
.urlaub-kal-hilfe { margin: var(--a3) 0 0; font-size: var(--gr-klein); }
.urlaub-kal-hilfe .symbol { width: 12px; height: 12px; vertical-align: -1px; }
.urlaub-kal.speichert .kalender { opacity: .6; pointer-events: none; }
.urlaub-kal [data-urlaub-meldung] { margin: var(--a2) 0 0; }
@container seite (max-width: 44rem) { .urlaub-kal-stunden { grid-template-columns: minmax(0, 1fr); } .urlaub-kal-kopf .titel-wahl-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .urlaub-kal-kopf .titel-wahl { min-width: 0; } }





.zentral-sperre-form { display: inline-flex; margin: 0; vertical-align: top; }
.zentral-stand .marke .symbol { width: .9em; height: .9em; vertical-align: -.1em; }


@container seite (min-width: 44.01rem) { .vp-kachel:not(.dp-kachel) .vp-leiste-kal .vp-abschluss { flex: none; margin: 0; order: 2; } }
.verf-kontingent-kopf { display: flex; align-items: center; gap: var(--a4); width: 100%; }
.verf-kontingent-kopf .verf-kontingent-titel { width: auto; flex: 1 1 0; min-width: 0; }
.verf-kontingent-kopf .akt-rund { flex: none; margin: 0; }
@container seite (min-width: 44.01rem) { .verf-kachel .verf-kontingent-kopf .verf-abgabe { flex-direction: column; gap: 3px; min-width: 5rem; } }
@container seite (max-width: 44rem) { .vp-kachel:not(.dp-kachel) .vp-leiste-kal .vp-abschluss, .verf-kontingent-kopf .akt-rund { display: none; } }

.tb-slot:has(> .ms-wahl) { padding: 0; }
.tb-slot > .ms-wahl .jahr-wahl-knopf { border: 0; background: transparent; padding: var(--a1) var(--a2) var(--a1) var(--a3);
  border-radius: var(--rund-voll); font-size: var(--gr-klein); font-weight: 700; color: var(--text); max-width: 100%; box-sizing: border-box; }
.tb-slot > .ms-wahl .jahr-wahl-knopf:hover { background: var(--j-nacht-50); }
.ms-wahl-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-wahl-menue { min-width: 12rem; max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; }
.ms-wahl-menue a { text-align: left; }
@container seite (max-width: 44rem) { .tb-slot > .ms-wahl { width: 100%; } .tb-slot > .ms-wahl .jahr-wahl-knopf { width: 100%; justify-content: center; padding: var(--a1) var(--a2); } .tb-slot > .ms-wahl .ms-wahl-menue { left: auto; right: 0; } .ms-wahl-menue a { padding: var(--a2) var(--a3); } }


.zp-zeitkachel { margin-bottom: var(--a4); }
.zp-titel { margin: 0 0 var(--a3); }
.zp-klaerung { margin: 0 0 var(--a3); } .zp-klaerung .symbol { width: 1em; height: 1em; vertical-align: -.15em; }
.zp-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--a2); }
.zp-zeile { display: grid; grid-template-columns: minmax(14rem, 1.2fr) minmax(0, 2fr) auto; align-items: center; gap: var(--a2) var(--a4);
  padding: var(--a2) var(--a3); border: 1px solid var(--linie); border-radius: var(--rund-m); background: var(--karte);
  transition: box-shadow .15s ease, border-color .15s ease; }
.zp-zeile:hover { box-shadow: var(--schatten); border-color: var(--j-nacht-100); }
.zp-haupt { display: flex; align-items: center; gap: var(--a3); min-width: 0; color: var(--text); text-decoration: none; }
.zp-haupt:hover strong { color: var(--primaer); }
.zp-bild .symbol { width: 1.15rem; height: 1.15rem; color: inherit; }
.zp-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.zp-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zp-text small { color: var(--text-leise); font-size: var(--gr-klein); white-space: normal; }
.zp-ring { flex: none; }
.zp-stand { display: flex; flex-direction: column; gap: var(--a1); min-width: 0; }
.zp-stand-teil { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a1) var(--a2); min-width: 0; }
.zp-etikett { flex: none; width: 5.5rem; font-size: var(--gr-etikett); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-leise); }
.zp-stand .marke .symbol { width: .9em; height: .9em; vertical-align: -.1em; }
.zp-vp-link { font-size: var(--gr-klein); }
.zp-aktionen { display: flex; align-items: flex-start; gap: var(--a1); white-space: nowrap; }

.zp-aktionen .akt-rund-klein .akt-rund-text { display: block; font-size: var(--gr-winzig); }
.zp-aktionen .akt-rund { min-width: 4rem; }
@container seite (max-width: 64rem) { .zp-zeile { grid-template-columns: minmax(0, 1fr) auto; } .zp-stand { grid-column: 1 / -1; } .zp-aktionen { grid-column: 1 / -1; grid-row: 1; justify-self: end; grid-column-start: 2; } }
@container seite (max-width: 44rem) { .zp-zeile { grid-template-columns: minmax(0, 1fr); padding: var(--a3); } .zp-aktionen { grid-column: 1; grid-row: auto; justify-self: stretch; justify-content: space-between; padding-top: var(--a2);
    border-top: 1px solid var(--linie); } .zp-etikett { width: 100%; } .zp-ring .verf-ring-text { display: none; } }


.urlaub-antraege-kopf { margin-bottom: var(--a2); }
.urlaub-antraege-kopf .verf-kontingent-titel { font-size: var(--gr-etikett); }
.pd-sync { flex: none; margin: 0; }
.pd-sync .akt-rund-kreis { position: relative; }

.pd-sync.akt-rund-ok .akt-rund-kreis, .pd-sync.akt-rund-ok:hover .akt-rund-kreis,
.pd-sync.pd-laeuft .akt-rund-kreis, .pd-sync.pd-laeuft:hover .akt-rund-kreis {
  background: var(--j-nacht-50); color: var(--primaer); border: 2px solid var(--primaer); box-shadow: none; }
.pd-sync.akt-rund-ok .akt-rund-text, .pd-sync.pd-laeuft .akt-rund-text { color: var(--primaer); font-weight: 700; }
.pd-sync.akt-rund-ok .akt-rund-kreis::after, .pd-sync.pd-laeuft .akt-rund-kreis::after { content: ""; position: absolute; top: -3px; right: -3px;
  width: .7rem; height: .7rem; border-radius: 50%; background: var(--j-ok-fg); border: 2px solid var(--karte); box-sizing: border-box; z-index: 1; }
.pd-sync.pd-laeuft .akt-rund-kreis::after { background: var(--akzent); }
.pd-sync.pd-laeuft .akt-rund-kreis::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(var(--akzent) calc(var(--pz, 0) * 1%), color-mix(in srgb, var(--akzent) 22%, transparent) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  transition: background .3s linear; }
.pd-sync.pd-laeuft .akt-rund-kreis .symbol { animation: pd-dreh 1.2s linear infinite; }
@keyframes pd-dreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pd-sync.pd-laeuft .akt-rund-kreis .symbol { animation: none; } }
.pd-sync[disabled] { cursor: not-allowed; opacity: .7; }
@container seite (min-width: 44.01rem) { .urlaub-antraege-kopf .pd-sync { flex-direction: column; gap: 3px; min-width: 6.5rem; } }
@container seite (max-width: 44rem) { .urlaub-antraege-kopf .akt-rund.pd-sync { display: inline-flex; } }



.urlaub-team { width: 100%; margin: var(--a2) 0 var(--a3); grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr)); gap: var(--a2); }
.urlaub-team-p { display: block; min-width: 0; transition: opacity .2s; }
.urlaub-team-p .j-badge { width: 100%; min-width: 0; min-height: 2.75rem; padding-top: var(--a1); padding-bottom: var(--a1); font-size: var(--gr-text); }
.urlaub-team-p .j-badge-avatar { width: 2rem; height: 2rem; font-size: var(--gr-mini); }
.urlaub-team-p .j-badge-text { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: var(--a2); font-weight: 600; }
.urlaub-team-p .j-badge-text small { margin-left: auto; flex: none; white-space: nowrap; font-size: var(--gr-klein); font-weight: 700; color: var(--j-info-fg); font-variant-numeric: tabular-nums; }
.urlaub-team-null .j-badge-text small { color: var(--text-leise); font-weight: 400; }
.urlaub-team-mit-wahl .urlaub-team-p:not(.urlaub-team-aktiv) { opacity: .5; }
.urlaub-team-mit-wahl .urlaub-team-p:not(.urlaub-team-aktiv):hover, .urlaub-team-mit-wahl .urlaub-team-p:focus-within { opacity: 1; }
.urlaub-team-aktiv .j-badge, .urlaub-team-aktiv a.j-badge:hover { border-color: var(--primaer); background: var(--j-nacht-50); box-shadow: inset 0 0 0 1px var(--primaer); }
.urlaub-team-aktiv .j-badge-text { font-weight: 700; }
.urlaub-team-hinweis { margin: 0; }
@container seite (max-width: 44rem) { .urlaub-team { grid-template-columns: minmax(0, 1fr); } }
.urlaub-kal-kopf { width: 100%; }

.urlaub-kal-name { margin: var(--a2) 0 0; }
.urlaub-kal-ringe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a3) var(--a5, 2rem); width: 100%; }
.vt-genehmigt { color: var(--j-ok-fg); background: var(--j-ok-bg); }
.urlaub-kal .kalender-tag:has(input[data-planday]) { cursor: not-allowed; }
.verf-kachel .kalender-tag:has(.vt-genehmigt) { box-shadow: inset 0 -3px 0 var(--j-ok-fg); }
.j-badge-genehmigt { border-color: var(--j-ok-fg); background: var(--j-ok-bg); color: var(--j-ok-fg); }
.j-badge-genehmigt .j-badge-symbol { color: var(--j-ok-fg); }



.urlaub-antraege-kopf { align-items: flex-start; }
.urlaub-antraege-kopf .verf-kontingent-titel { min-height: 2.25rem; }   

.urlaub-kal-kopf > h2.urlaub-kal-name { margin: var(--a3) 0 0; font-size: 1.375rem; overflow-wrap: anywhere; }

.urlaub-team-p .j-badge-text { overflow: visible; }
.urlaub-team-p .j-badge-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@container seite (max-width: 44rem) { .urlaub-liste .urlaub-zeile { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; justify-items: start; row-gap: var(--a2); } .urlaub-liste .urlaub-zeile > * { grid-area: auto; grid-column: 1; } .urlaub-liste .urlaub-zeile .kasse-geld { align-items: flex-start; text-align: left; } .urlaub-liste .urlaub-zeile .kasse-saldo { display: none; } .urlaub-liste .urlaub-zeile .kasse-aktionen { grid-column: 1; justify-content: flex-start; } }

.verf-kachel .kalender-tag:has(input[data-urlaub]) { cursor: not-allowed; }



.urlaub-kal-kopf { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; }
.urlaub-kal-kopf > .urlaub-personal-titel { margin: var(--a2) 0 0; }
.urlaub-kal-kopf > h2.urlaub-kal-name { margin-top: var(--a1); }
@container seite (min-width: 44.01rem) { .urlaub-kal-ringe .verf-ring-kreis { width: 3rem; height: 3rem; } .urlaub-kal-ringe .verf-ring-kreis::before { inset: 4px; } .urlaub-kal-ringe .verf-ring-kreis b { font-size: var(--gr-text); } .urlaub-kal-ringe .verf-ring-text strong { font-size: var(--gr-text); } .urlaub-kal-ringe .verf-ring-text small { font-size: var(--gr-klein); } }
@container seite (max-width: 44rem) { .urlaub-kal-ringe { flex-wrap: nowrap; gap: var(--a3); } .urlaub-kal-ringe > .verf-ring { flex: 1 1 0; min-width: 0; } .urlaub-kal-ringe .verf-ring-text strong, .urlaub-kal-ringe .verf-ring-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
.urlaub-zeile-ring { justify-content: center; }
.urlaub-zeile-ring .verf-ring { text-align: left; }

.verf-kachel .kalender-tag:has(input[data-urlaub-info]) { cursor: pointer; }
.verf-kachel .kalender-tag.urlaub-gewaehlt { box-shadow: inset 0 0 0 2px var(--j-info-fg); }
.verf-urlaub-info[hidden] { display: none; }
.verf-urlaub-info .kal-detail-liste { margin-top: var(--a2); }
.verf-urlaub-info .kal-detail-liste .symbol { width: 16px; height: 16px; }



.urlaub-zeile-l4 { display: none; }
.urlaub-zeile-daten { display: flex; align-items: center; gap: var(--a1); }
.urlaub-zeile-strich { color: var(--text-leise); font-weight: 700; }
.urlaub-datum-monat { font-size: .7em; font-weight: 700; }
.urlaub-zeile-badges { display: grid; grid-template-columns: 11.5rem 10rem; gap: var(--a2); align-items: center; }
.urlaub-zeile-badges > span { min-width: 0; display: flex; }
.urlaub-zeile-badges .j-badge { max-width: 100%; }
.urlaub-zeile-badges .j-badge-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.urlaub-zeile-status { display: flex; justify-content: center; }
.urlaub-genehmigt { margin: 0; min-width: 5rem; }
.urlaub-zeile-notiz { min-width: 0; }
.urlaub-notiz { display: flex; align-items: flex-start; gap: var(--a2); font-size: var(--gr-klein); line-height: 1.4; color: var(--text);
  white-space: pre-line; overflow-wrap: anywhere; word-break: normal; }
.urlaub-notiz .symbol { flex: none; width: 14px; height: 14px; margin-top: 2px; color: var(--text-leise); }
@container seite (min-width: 44.01rem) { .urlaub-liste .urlaub-zeile { grid-template-columns: 2.5rem auto 5.5rem minmax(0, 1fr) 10.5rem auto; column-gap: var(--a4); } .urlaub-liste .urlaub-zeile-daten > :not(:first-child) { display: none; } .urlaub-liste .urlaub-zeile-daten .urlaub-datum-monat { display: none; } .urlaub-zeile-ring { align-items: flex-start; } }
@container seite (max-width: 44rem) { .urlaub-zeile-l4 { display: flex; width: 100%; margin: 0; } .urlaub-zeile-name { display: none; } .urlaub-badge-zeitraum { display: none !important; } .urlaub-zeile-badges { grid-template-columns: minmax(0, 1fr); } .urlaub-zeile-badges:not(:has(.j-badge)) { display: none; } .urlaub-liste .urlaub-zeile-daten .kasse-kachel { width: 3.25rem; } .urlaub-zeile-status:empty, .urlaub-zeile-notiz:empty { display: none; } .urlaub-genehmigt { flex-direction: row; gap: var(--a2); min-width: 0; } .urlaub-liste .urlaub-zeile { justify-items: stretch; } .urlaub-liste .urlaub-zeile > .urlaub-zeile-status, .urlaub-liste .urlaub-zeile > .urlaub-zeile-ring { justify-self: start; } }



.urlaub-zeile-ms { display: flex; justify-content: center; min-width: 0; }
.urlaub-ms-rund { margin: 0; min-width: 0; max-width: 100%; }
.urlaub-ms-rund .akt-rund-text { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.urlaub-zeile-status { justify-content: center; }
.urlaub-zeile .kasse-text { gap: var(--a1); }
.urlaub-badge-zeitraum { display: flex; }
@container seite (min-width: 44.01rem) { .urlaub-liste .urlaub-zeile { grid-template-columns: 13rem 6.5rem minmax(0, 1fr) 10.5rem 5.5rem; column-gap: var(--a4); padding-left: var(--a4); } .urlaub-liste .urlaub-zeile-daten { display: none; } .urlaub-zeile-notiz { align-self: center; } }
@container seite (max-width: 44rem) { .urlaub-liste .urlaub-zeile .kasse-text { display: none; } .urlaub-liste .urlaub-zeile-daten { flex-wrap: nowrap; gap: var(--a2); } .urlaub-liste .urlaub-zeile-daten .kasse-kachel { width: 3.75rem; height: 3rem; } .urlaub-liste .urlaub-zeile-daten .kasse-kachel b { font-size: var(--gr-mittel); white-space: nowrap; } .urlaub-zeile-ms:empty { display: none; } .urlaub-zeile-ms { justify-content: flex-start; } .urlaub-ms-rund { flex-direction: row; gap: var(--a2); } .urlaub-liste .urlaub-zeile > .urlaub-zeile-ms { justify-self: start; } .urlaub-liste .urlaub-zeile .urlaub-zeile-status { justify-content: flex-start; } .urlaub-liste .urlaub-zeile .urlaub-zeile-status:not(:has(*)) { display: none; } .urlaub-zeile-l4 { font-size: var(--gr-klein); color: var(--text); } .urlaub-zeile-l4::after { flex: 1 1 auto; min-width: 1rem; } .urlaub-kal-kopf { display: flex; flex-direction: column; align-items: stretch; gap: 0; } .urlaub-kal-kopf > .urlaub-personal-titel { display: flex; width: 100%; margin: var(--a2) 0 0; } .urlaub-kal-kopf > h2.urlaub-kal-name, .urlaub-kal-kopf > h2 { display: block; width: 100%; margin: var(--a3) 0 0; line-height: 1.2; } }

.urlaub-ms-rund .akt-rund-kreis { background: var(--j-nacht-50); color: var(--primaer); border: 1px solid var(--linie); }   
.urlaub-ms-rund .akt-rund-text { color: var(--text-leise); }



.urlaub-suche-menue { min-width: 18rem; padding: var(--a2); }
.urlaub-suche-feld { margin: 0 0 var(--a1); }
.urlaub-suche-treffer:empty { display: none; }
.urlaub-suche-treffer a { display: block; padding: var(--a2) var(--a3); border-radius: var(--rund-s); color: var(--text); text-decoration: none; font-weight: 500; }
.urlaub-suche-treffer a:hover, .urlaub-suche-treffer a:focus-visible { background: var(--j-nacht-50); color: var(--primaer); outline: none; }
.urlaub-suche-leer { margin: var(--a2) var(--a3); }
.urlaub-notiz { align-items: center; gap: var(--a3); }
.urlaub-notiz .urlaub-notiz-kreis { flex: none; width: 2.25rem; height: 2.25rem; }
.urlaub-notiz .urlaub-notiz-kreis .symbol { width: 16px; height: 16px; margin: 0; color: var(--primaer); }
.urlaub-notiz-text { min-width: 0; white-space: pre-line; overflow-wrap: anywhere; }
.urlaub-liste .urlaub-zeile:hover { background: var(--karte); }
@container seite (max-width: 44rem) { .urlaub-liste .urlaub-zeile-daten .kasse-kachel b, .urlaub-liste .urlaub-zeile-daten .urlaub-datum-monat { font-size: var(--gr-mittel); font-weight: 700; } .urlaub-liste .urlaub-zeile-daten .kasse-kachel { width: 4.25rem; } .urlaub-kal-ringe .urlaub-ring-monat { display: none; } .urlaub-liste .urlaub-zeile, .urlaub-liste .urlaub-zeile:hover, .urlaub-liste .urlaub-zeile:active { background: var(--karte); -webkit-tap-highlight-color: transparent; } .urlaub-suche-menue { left: 0; min-width: min(18rem, calc(100vw - 3rem)); } }
.urlaub-notiz .urlaub-notiz-kreis { background: var(--j-nacht-50); color: var(--primaer); border: 1px solid var(--linie); display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }



.urlaub-liste .urlaub-notiz .urlaub-notiz-kreis, .urlaub-liste .urlaub-ring-liste .verf-ring-kreis,
.urlaub-liste .urlaub-genehmigt .akt-rund-kreis { width: 2.5rem; height: 2.5rem; flex: none; }
.urlaub-liste .urlaub-ring-liste .verf-ring-kreis::before { inset: 3px; }
.urlaub-liste .urlaub-ring-liste .verf-ring-kreis b { font-size: var(--gr-klein); }
.urlaub-liste .urlaub-notiz .urlaub-notiz-kreis .symbol, .urlaub-liste .urlaub-genehmigt .akt-rund-kreis .symbol { width: 18px; height: 18px; }
.urlaub-liste .urlaub-genehmigt { flex-direction: row; align-items: center; gap: var(--a2); min-width: 0; margin: 0;
  pointer-events: none; cursor: default; -webkit-tap-highlight-color: transparent; }
.urlaub-liste .urlaub-genehmigt .akt-rund-kreis { transform: none !important; transition: none; }
.urlaub-liste .urlaub-zeile-notiz, .urlaub-liste .urlaub-zeile-ring, .urlaub-liste .urlaub-zeile-status { align-self: center; align-items: center; }
.urlaub-liste .urlaub-ring-liste { align-items: center; }
@container seite (min-width: 44.01rem) { .urlaub-liste .urlaub-zeile { grid-template-columns: 13rem minmax(0, 1fr) 10.5rem 7.5rem; align-items: center; } .urlaub-liste .urlaub-zeile-status { justify-content: flex-start; } }



.abfrage-zeitkachel + .abfrage-kachel { margin-top: var(--a4); }
.abfrage-stand { display: flex; align-items: center; flex-wrap: wrap; gap: var(--a3) var(--a4); }
.abfrage-stand .verf-ring-kreis { width: 2.5rem; height: 2.5rem; }



.skills-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--a3); }
.skill-zeile { display: grid; grid-template-columns: auto 1fr auto; gap: var(--a3); align-items: start; padding: var(--a3) 0; border-top: 1px solid var(--linie); }
.skill-zeile:first-child { border-top: 0; padding-top: 0; }
.skill-symbol { width: 2.5rem; height: 2.5rem; display: inline-grid; place-items: center; border-radius: 50%; background: var(--j-nacht-50); color: var(--primaer); border: 1px solid var(--linie); }
.skill-symbol svg { width: 1.2rem; height: 1.2rem; }
.skill-an .skill-symbol { background: var(--j-ok-bg, #e7f6ec); color: var(--j-ok-fg); }
.skill-text { display: flex; flex-direction: column; gap: var(--a1, 4px); min-width: 0; }
.skill-text > small { color: var(--text-leise); font-size: var(--gr-klein); }
.skill-ms { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a2); margin-top: var(--a2); }
.skill-ms-titel { font-size: var(--gr-etikett); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-leise); width: 100%; }
.skill-ms-liste { display: flex; flex-wrap: wrap; gap: var(--a2); }
.skill-ms-wahl { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--linie); border-radius: var(--rund-voll); font-size: var(--gr-klein); cursor: pointer; }
.skill-ms-wahl:has(input:checked) { border-color: var(--j-ok-fg); background: var(--j-ok-bg, #e7f6ec); }
.skill-abgleich { display: flex; align-items: center; gap: var(--a2); justify-content: space-between; font-size: var(--gr-klein); color: var(--text-leise); border-top: 1px dashed var(--linie); padding-top: var(--a2); margin-top: var(--a2); }
@container seite (max-width: 44rem) { .skill-zeile { grid-template-columns: auto 1fr; } .skill-schalter { grid-column: 2; } }
.akt-pd-quelle { display: flex; align-items: center; gap: 6px; margin: var(--a2) 0 0; font-size: var(--gr-zusatz); }
.akt-pd-quelle svg { width: .9rem; height: .9rem; }


.dpl-pd-quelle { display: inline-flex; align-items: center; gap: 6px; }
.dpl-pd-quelle svg { width: .9rem; height: .9rem; }


.skill-abgleich-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.skill-abgleich-text b { color: var(--text); font-size: var(--gr-klein); }
.skill-abgleich-text small { font-size: var(--gr-zusatz); }


.skill-haengt { display: inline-flex; align-items: center; gap: var(--a1, 4px); margin-top: var(--a1, 4px); color: var(--text-leise); }
.skill-haengt svg { width: 14px; height: 14px; }



.abfrage-rahmen { margin-top: var(--a4); }
.abfrage-kachel { display: flex; flex-direction: column; gap: var(--a4); }
.abfrage-kopf .verf-kontingent-titel { display: flex; align-items: center; gap: var(--a3); }
.abfrage-kopf .verf-kontingent-titel::after { content: ""; flex: 1; border-top: 1px solid var(--linie); }
.abfrage-gesamt { flex: none; }
.abfrage-gesamt .verf-ring-kreis { width: 2.5rem; height: 2.5rem; }
.abfrage-zp-an .akt-rund-kreis { color: var(--j-ok-fg); border-color: var(--j-ok-fg); }
.verf-ring-fertig .verf-ring-kreis { background: var(--j-ok-fg); }
.verf-ring-fertig .verf-ring-kreis::before { background: var(--karte); }

.abfrage-liste { display: flex; flex-direction: column; gap: var(--a4); }
.abfrage-liste-gruppen { gap: 0; }
.abfrage-liste-gruppen > .abfrage-gruppe + .abfrage-gruppe { border-top: 1px solid var(--linie); }
.abfrage-gruppe-kopf { display: flex; align-items: center; gap: var(--a3); padding: var(--a3) var(--a2); list-style: none; cursor: pointer; border-radius: var(--rund-m); }
.abfrage-gruppe-kopf::-webkit-details-marker { display: none; }
.abfrage-gruppe-kopf:hover { background: var(--j-nacht-50, var(--flaeche)); }
.abfrage-gruppe-name { flex: 1 1 0; min-width: 0; display: flex; }
.abfrage-gruppe-name .j-badge { max-width: 100%; }
.abfrage-ohne { font-weight: 700; font-size: var(--gr-klein); color: var(--text-leise); }
.abfrage-gruppe-wahl { flex: none; font-size: var(--gr-etikett); font-weight: 600; color: var(--primaer); white-space: nowrap; }
.abfrage-gruppe-wahl:empty { display: none; }
.abfrage-gruppe-ring { flex: none; }
.abfrage-pfeil { flex: none; display: inline-flex; color: var(--text-leise); transition: transform .15s; }
.abfrage-pfeil .symbol { width: 18px; height: 18px; }
details.abfrage-gruppe[open] > .abfrage-gruppe-kopf .abfrage-pfeil { transform: rotate(180deg); }
details.abfrage-gruppe[open] > .abfrage-zeilen { padding-bottom: var(--a3); }

.abfrage-zeilen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.abfrage-zeile { display: flex; align-items: center; gap: var(--a3); padding: var(--a2); border-radius: var(--rund-m); cursor: pointer; transition: background .12s; }
.abfrage-zeile + .abfrage-zeile { border-top: 1px solid var(--linie); }
.abfrage-zeile:hover { background: var(--j-nacht-50, var(--flaeche)); }
.abfrage-zeile:not(.gewaehlt) .abfrage-person { opacity: .78; }
.abfrage-wahl { flex: none; background: none; border: 0; padding: var(--a1); cursor: pointer; display: inline-flex; }

.abfrage-wahl-kreis { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; flex: none;
  border: 1.5px dashed var(--j-stein-300, var(--linie)); color: var(--j-stein-400, var(--text-leise)); background: none; transition: background .12s, color .12s; }
.abfrage-wahl-kreis .symbol { width: 15px; height: 15px; color: inherit; }
.abfrage-wahl[aria-pressed="true"] .abfrage-wahl-kreis, .abfrage-wahl-kreis.abfrage-wahl-an { border: 1.5px solid var(--primaer); background: var(--primaer); color: var(--auf-primaer); }
.abfrage-legende { display: flex; align-items: center; gap: var(--a2); }
.abfrage-legende .abfrage-wahl-kreis { width: 1.5rem; height: 1.5rem; }
.abfrage-legende .abfrage-wahl-kreis .symbol { width: 12px; height: 12px; }
.abfrage-person { flex: 1 1 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.abfrage-person .j-badge { max-width: 100%; }
.abfrage-person .j-badge-name { overflow: hidden; text-overflow: ellipsis; }
.abfrage-info { font-size: var(--gr-zusatz); color: var(--text-leise); padding-left: calc(2.25rem + var(--a2)); }
.abfrage-werte { flex: none; display: grid; grid-template-columns: 5.5rem 7.5rem 7.5rem; align-items: center; gap: var(--a3); }
.abfrage-status { display: flex; justify-content: center; }
.status-Leer.status-rund .status-rund-kreis { background: var(--j-neutral-bg); color: var(--j-neutral-fg); }
.abfrage-zahl { display: flex; min-width: 0; }
.abfrage-ring .verf-ring-kreis { width: 2rem; height: 2rem; }
.abfrage-ring-null .verf-ring-kreis b { color: var(--text-leise); font-weight: 400; }
.abfrage-ring-eigen .verf-ring-text small { color: var(--j-info-fg, var(--primaer)); }
.abfrage-fuss { margin: 0; }


.abfrage-blatt-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--a2); padding-bottom: var(--a3); border-bottom: 1px solid var(--linie); }
.abfrage-blatt-nav .akt-rund { margin: 0; min-width: 0; }
.abfrage-blatt-nav .akt-rund-text { font-size: var(--gr-etikett); }
.abfrage-rahmen .blatt-panel { display: flex; flex-direction: column; gap: var(--a3); }
.abfrage-rahmen .blatt-panel[hidden] { display: none; }
.abfrage-rahmen .blatt-panel .abschnitt-linie { margin: var(--a2) 0 0; }
.abfrage-rahmen .blatt-panel .abschnitt-linie .marke { text-transform: none; letter-spacing: 0; }
.abfrage-rahmen .blatt-panel .hinweis { margin: 0; }
.abfrage-rahmen .sms-box textarea { width: 100%; min-height: 7em; font: inherit; font-size: var(--gr-klein); box-sizing: border-box; }
.abfrage-rahmen .grenze-form, .abfrage-rahmen .zeitplan-form { display: flex; flex-wrap: wrap; gap: var(--a3); margin: 0; }
.abfrage-rahmen .grenze-form .feld { flex: 1 1 6rem; margin: 0; }
.abfrage-rahmen .grenze-form .feld-voll, .abfrage-rahmen .zeitplan-form .feld, .abfrage-rahmen .zeitplan-form .haken { flex-basis: 100%; }
.abfrage-rahmen .grenze-form input, .abfrage-rahmen .grenze-form select, .abfrage-rahmen .zeitplan-form input[type=number],
.abfrage-rahmen .zeitplan-form textarea { width: 100%; box-sizing: border-box; }
.abfrage-panel-fuss { display: flex; justify-content: center; gap: var(--a5); width: 100%; padding-top: var(--a2); }
.abfrage-wahlzeile { display: flex; flex-direction: column; gap: var(--a2); }
.abfrage-wahl-zahl { font-size: var(--gr-text); }
.abfrage-ausnahmen, .abfrage-ergebnis-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--a2); }
.abfrage-ausnahmen form { display: flex; align-items: center; justify-content: space-between; gap: var(--a2); margin: 0; }
.abfrage-ergebnis-liste li { display: flex; align-items: center; justify-content: space-between; gap: var(--a2); font-size: var(--gr-klein); }


@container seite (max-width: 44rem) { .abfrage-kopf .verf-kontingent-titel { width: auto; } .abfrage-zeile { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "w p p" "s z1 z2";
    column-gap: var(--a2); row-gap: var(--a2); align-items: center; padding: var(--a3) var(--a1); } .abfrage-werte { display: contents; } .abfrage-wahl { grid-area: w; justify-self: center; } .abfrage-person { grid-area: p; min-width: 0; } .abfrage-status { grid-area: s; justify-content: center; min-width: 0; } .abfrage-zahl-1 { grid-area: z1; } .abfrage-zahl-2 { grid-area: z2; } .abfrage-person .j-badge { font-size: var(--gr-text); } .abfrage-info { padding-left: var(--a1); font-size: var(--gr-klein); } .abfrage-zahl { justify-content: center; min-width: 0; align-self: start; } .abfrage-status .status-rund { flex-direction: column; gap: 3px; } .abfrage-status .status-rund-kreis, .abfrage-ring .verf-ring-kreis { width: 2rem; height: 2rem; } .abfrage-status .status-rund-text { font-size: var(--gr-klein); color: var(--text); text-align: center; white-space: nowrap; } .abfrage-ring { flex-direction: column; gap: 3px; min-width: 0; max-width: 100%; } .abfrage-ring .verf-ring-text { align-items: center; text-align: center; max-width: 100%; } .abfrage-ring .verf-ring-text strong { font-size: var(--gr-klein); white-space: nowrap; } .abfrage-ring .verf-ring-text small { font-size: var(--gr-klein); } .abfrage-status .status-rund-text, .abfrage-ring .verf-ring-text strong, .abfrage-ring .verf-ring-text small { font-size: min(var(--gr-klein), 3.4vw); } .abfrage-gruppe-kopf { gap: var(--a2); padding: var(--a3) var(--a1); } .abfrage-gruppe-ring .verf-ring-text strong { display: none; } .abfrage-gruppe-ring .verf-ring-text small { font-size: var(--gr-klein); } .abfrage-gruppe-wahl { display: none; } }


@container seite (max-width: 44rem) { .tm-zeile:has(.tm-funktionen) > .tm-funktionen { grid-template-columns: repeat(4, max-content); justify-content: space-between; column-gap: 0; } .tm-zeile:has(.tm-funktionen) > .tm-funktionen .akt-rund { width: max-content; max-width: none; } .tm-zeile:has(.tm-funktionen) .akt-rund-text,
  .tm-zeile:has(.tm-funktionen) .tm-abteilungen .akt-rund-aktiv .akt-rund-text { font-size: min(.5rem, 2.55vw) !important; } }
.abfrage-person .j-badge { max-width: 100%; min-width: 0; }
.abfrage-person .j-badge-text { min-width: 0; overflow: hidden; }
.abfrage-person .j-badge-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


.abfrage-handy-nav { display: none; }
@container seite (max-width: 64rem) { .abfrage-handy-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--a1); padding-bottom: var(--a3); border-bottom: 1px solid var(--linie); } .abfrage-handy-nav .akt-rund { margin: 0; min-width: 0; } .abfrage-handy-nav .akt-rund-text, .abfrage-blatt-nav .akt-rund-text { font-size: min(var(--gr-etikett), 3vw); white-space: nowrap; } .abfrage-kopf .abfrage-gesamt .verf-ring-text strong, .abfrage-kopf .abfrage-gesamt .verf-ring-text small { font-size: min(var(--gr-klein), 3.4vw); } }


.konto-kopf .team-titelzeile:has(> .nur-sr:only-child) { min-height: 0; margin: 0; }
.konto-spalte-voll { display: grid; gap: var(--a4); }
.konto-profil { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--a5, 1.5rem); align-items: start; }
.konto-bild { display: flex; flex-direction: column; align-items: center; gap: var(--a2); padding-right: var(--a5, 1.5rem); border-right: 1px solid var(--linie); }
.konto-bild .konto-bild-form { margin-top: 0; }
.konto-daten { min-width: 0; }
.konto-daten .abschnitt-linie { margin-bottom: var(--a3); }
.konto-daten .werte-paare dd { overflow-wrap: anywhere; }
.konto-einsatz { gap: 0; }
.konto-einsatz li { display: grid; grid-template-columns: 9rem minmax(0, 1fr); align-items: center; gap: var(--a3); padding: var(--a2) 0; border-top: 1px solid var(--linie); }
.konto-einsatz li:first-child { border-top: 0; }
.konto-einsatz-rollen { display: flex; flex-wrap: wrap; gap: var(--a1); }
@container seite (max-width: 44rem) { .konto-profil { grid-template-columns: minmax(0, 1fr); } .konto-bild { padding: 0 0 var(--a3); border-right: 0; border-bottom: 1px solid var(--linie); } .konto-einsatz li { grid-template-columns: minmax(0, 1fr); gap: var(--a1); } }



.abfrage-rahmen .blatt-kopf { display: none; }   
.abfrage-rahmen .blatt-panel > .abfrage-panel-titel { margin-top: 0; }
.abfrage-rahmen .blatt-panel > .abfrage-panel-titel + .hinweis { margin-top: 0; }

.abfrage-stand-l4 { margin: var(--a3) 0; }
.abfrage-stand-l4::after { order: 1; }
.abfrage-stand-l4 .abfrage-schalter { order: 2; margin: 0; flex-direction: row; gap: var(--a2); text-transform: none; letter-spacing: 0; }
.abfrage-stand-l4 .abfrage-schalter .akt-rund-text { font-size: var(--gr-klein); font-weight: 700; color: var(--text-leise); }
.abfrage-stand-l4 .abfrage-schalter.akt-rund-ok .akt-rund-text { color: var(--j-ok-fg); }

.abfrage-zp-an .akt-rund-kreis { background: var(--j-ok-bg); color: var(--j-ok-fg); border-color: var(--j-ok-fg); }
.abfrage-zp-an .med-ecke { background: var(--j-ok-fg); border-color: var(--karte); color: var(--j-weiss); width: 1.05rem; height: 1.05rem; }
.abfrage-zp-an .med-ecke .symbol { width: 10px; height: 10px; stroke-width: 3; }



.abfrage-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a2) var(--a3); }
.abfrage-kopf .verf-kontingent-titel { flex: 1 1 8rem; min-width: 0; }
.abfrage-auswahl { display: flex; align-items: center; gap: var(--a2); flex: none; }
.abfrage-kopf .abfrage-auswahl .akt-rund { display: inline-flex; flex-direction: row; gap: var(--a1); margin: 0; min-width: 0; }
.abfrage-auswahl .akt-rund-text { font-size: var(--gr-klein); font-weight: 600; white-space: nowrap; }
.abfrage-auswahl .akt-rund-kreis { width: 1.75rem; height: 1.75rem; }
.abfrage-auswahl .akt-rund-kreis .symbol { width: 14px; height: 14px; }
.abfrage-auswahl .akt-rund.akt-rund-aktiv .akt-rund-kreis::after { width: .55rem; height: .55rem; }

.abfrage-gruppe-knopf { padding: 0; }
.abfrage-gruppe-knopf[aria-pressed="true"] .abfrage-wahl-kreis { border: 1.5px solid var(--primaer); background: var(--primaer); color: var(--auf-primaer); }
.abfrage-gruppe-knopf[aria-pressed="mixed"] .abfrage-wahl-kreis { border: 1.5px solid var(--primaer); color: var(--primaer); background: var(--karte); }

.abfrage-wahl-info { display: flex; align-items: center; gap: var(--a2); margin: 0; }
.abfrage-wahl-info .abfrage-wahl-kreis { width: 1.75rem; height: 1.75rem; }

.abfrage-abw { display: flex; align-items: center; justify-content: space-between; gap: var(--a2); margin: 0; }
.abfrage-abw > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.abfrage-abw small.hinweis { margin: 0; }

.abfrage-panel-fuss .abfrage-haupt { order: 9; }
.abfrage-panel-fuss { flex-wrap: wrap; }

.j-badge-vor, .j-badge-nach { overflow: hidden; text-overflow: ellipsis; }
@container seite (max-width: 44rem) { .abfrage-kopf .verf-kontingent-titel { flex-basis: 0; } .abfrage-auswahl { order: 3; width: 100%; justify-content: space-between; } .abfrage-gruppe-wahl { display: none; } .abfrage-gruppe-kopf { gap: var(--a2); padding-left: 0; padding-right: 0; } .abfrage-gruppe-name .j-badge { min-width: 0; } .abfrage-gruppe-name .j-badge-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .abfrage-kachel { min-width: 0; } .abfrage-auswahl .akt-rund-text { font-size: min(var(--gr-klein), 3.4vw); } .abfrage-person .j-badge { align-items: center; padding-top: 3px; padding-bottom: 3px; } .abfrage-person .j-badge-name { white-space: normal; line-height: 1.2; } .abfrage-person .j-badge-vor, .abfrage-person .j-badge-nach { display: block; white-space: nowrap; } .abfrage-person .j-badge-nach { font-weight: 400; } }



.verf-ring-erreicht .verf-ring-kreis { --ring: var(--j-ok-fg); }
.verf-ring-erreicht .verf-ring-kreis b { color: var(--j-ok-fg); font-weight: 700; }

.abfrage-zeile { cursor: default; }
.abfrage-zeile:not(.gewaehlt) .abfrage-person { opacity: 1; }
.abfrage-status:empty { visibility: hidden; }

.abfrage-gruppe-kopf { display: grid; grid-template-columns: 15rem max-content minmax(0, 1fr) auto; align-items: center; }
.abfrage-gruppe-kopf > .abfrage-pfeil { grid-column: 4; }
.abfrage-gruppe-name, .abfrage-gruppe-name .j-badge { width: 100%; min-width: 0; box-sizing: border-box; }
.abfrage-gruppe-name .j-badge-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.abfrage-gruppe-ring .verf-ring-text { min-width: 7.5rem; }

.abfrage-rahmen .abfrage-auswahl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a2); width: 100%; }
.abfrage-rahmen .abfrage-auswahl .akt-rund { margin: 0; min-width: 0; }
.abfrage-wliste { display: flex; flex-direction: column; border-top: 1px solid var(--linie); }
.abfrage-wgruppe { border-bottom: 1px solid var(--linie); }
.abfrage-wgruppe > summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--a2);
  padding: var(--a2) 0; list-style: none; cursor: pointer; }
.abfrage-wgruppe > summary::-webkit-details-marker { display: none; }
.abfrage-wgruppe-name { font-weight: 600; font-size: var(--gr-klein); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.abfrage-wgruppe-zahl { font-size: var(--gr-etikett); color: var(--text-leise); white-space: nowrap; }
.abfrage-wgruppe[open] > summary .abfrage-pfeil { transform: rotate(180deg); }
.abfrage-wgruppe ul { list-style: none; margin: 0; padding: 0 0 var(--a2) var(--a5, 1.5rem); display: flex; flex-direction: column; }
.abfrage-pwahl { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--a2); padding: var(--a1) 0; cursor: pointer; }
.abfrage-pwahl .abfrage-wahl-kreis { width: 1.6rem; height: 1.6rem; }
.abfrage-pwahl .abfrage-wahl-kreis .symbol { width: 12px; height: 12px; }
.abfrage-pwahl:has(input:checked) .abfrage-wahl-kreis { border: 1.5px solid var(--primaer); background: var(--primaer); color: var(--auf-primaer); }
.abfrage-pwahl input:focus-visible + .abfrage-wahl-kreis { outline: 2px solid var(--primaer); outline-offset: 2px; }
.abfrage-pwahl-name { font-size: var(--gr-klein); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.abfrage-pwahl small { font-size: var(--gr-etikett); color: var(--text-leise); }
@container seite (max-width: 44rem) { .abfrage-zeile { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 4.25rem; grid-template-areas: "p p s" "z1 z2 s"; cursor: default; } .abfrage-status { align-self: center; justify-self: center; } .abfrage-person { justify-self: start; align-items: flex-start; } .abfrage-gruppe-kopf { grid-template-columns: minmax(0, 1fr) max-content auto; } .abfrage-gruppe-kopf > .abfrage-pfeil { grid-column: 3; } .abfrage-gruppe-ring .verf-ring-text { min-width: 0; } .abfrage-rahmen .abfrage-auswahl .akt-rund-text { font-size: min(var(--gr-klein), 3.4vw); } .abfrage-rahmen .abfrage-auswahl { order: 0; } .abfrage-wgruppe .abfrage-wahl { grid-area: auto; justify-self: start; } }



.abfrage-rahmen .akt-rund:not(.akt-rund-aktiv):not(.abfrage-zp-an):not(.akt-rund-gefahr) .akt-rund-kreis { background: var(--j-nacht-50); color: var(--primaer); border-color: var(--linie); }
.abfrage-rahmen .akt-rund:not(.akt-rund-aktiv):not(.abfrage-zp-an):not(.akt-rund-gefahr):is(:hover, :focus-visible) .akt-rund-kreis { background: var(--karte); border-color: var(--akzent); box-shadow: 0 0 0 2px var(--akzent); }

.abfrage-rahmen .abfrage-auswahl { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.abfrage-gruppe-kopf { grid-template-columns: 11rem minmax(0, 1fr) 8.5rem auto; -webkit-tap-highlight-color: transparent; user-select: none; }
.abfrage-gruppe-kopf:hover, .abfrage-gruppe-kopf:active { background: none; }
.abfrage-gruppe-kopf:focus { outline: none; }
.abfrage-gruppe-kopf:focus-visible { outline: 2px solid var(--fokus, var(--primaer)); outline-offset: 2px; }
.abfrage-gruppe-kopf > .abfrage-gruppe-name { grid-column: 1; }
.abfrage-gruppe-kopf > .abfrage-gruppe-ring { grid-column: 3; justify-self: start; }
.abfrage-gruppe-kopf > .abfrage-pfeil { grid-column: 4; }
.abfrage-gruppe-ring .verf-ring-text { min-width: 0; }

.abfrage-person .j-badge { cursor: default; }
.abfrage-zeile:hover { background: none; }
.abfrage-spalten { display: none; }
@container seite (max-width: 44rem) { .abfrage-gruppe-kopf { grid-template-columns: 40vw minmax(0, 1fr) 21vw auto; } .abfrage-gruppe-ring .verf-ring-text small { white-space: nowrap; font-size: min(var(--gr-klein), 3.4vw); } .abfrage-gruppe-kopf .j-badge { font-size: var(--gr-klein); } .abfrage-zeile, .abfrage-spalten { display: grid; grid-template-columns: minmax(0, 1fr) 15vw 15vw 10vw; grid-template-areas: "p z1 z2 s";
    column-gap: var(--a2); align-items: center; } .abfrage-spalten { padding: 0 var(--a2) var(--a1); font-size: 2.5vw; font-weight: 600; color: var(--text-leise); } .abfrage-spalten > span:not(:first-child) { text-align: center; white-space: nowrap; } .abfrage-spalten > span:nth-child(3) { letter-spacing: -.02em; } .abfrage-zeile + .abfrage-zeile, .abfrage-spalten + .abfrage-zeile { border-top: 1px solid var(--linie); } .abfrage-person { grid-area: p; } .abfrage-zahl-1 { grid-area: z1; } .abfrage-zahl-2 { grid-area: z2; } .abfrage-status { grid-area: s; } .abfrage-zahl, .abfrage-status { align-self: center; justify-self: center; } .abfrage-ring .verf-ring-text strong { display: none; } .abfrage-ring .verf-ring-text small { font-size: min(var(--gr-etikett), 2.8vw); white-space: nowrap; } .abfrage-ring .verf-ring-kreis, .abfrage-status .status-rund-kreis { width: 8.5vw; height: 8.5vw; } .abfrage-ring .verf-ring-kreis b { font-size: 3.4vw; } .abfrage-person .j-badge { max-width: 100%; box-sizing: border-box; } .abfrage-person .j-badge-name { font-size: min(var(--gr-klein), 3.6vw); } .abfrage-person { min-width: 0; overflow: hidden; } .abfrage-person .j-badge, .abfrage-person .j-badge-text, .abfrage-person .j-badge-name { min-width: 0; } .abfrage-person .j-badge-vor, .abfrage-person .j-badge-nach { white-space: normal; overflow-wrap: anywhere; hyphens: auto; } .abfrage-status .status-rund-text { display: none; } .abfrage-info { padding-left: 0; font-size: min(var(--gr-etikett), 2.8vw); } }

.abfrage-rahmen .abfrage-wahl-kreis { background: var(--j-nacht-50); color: var(--primaer); border: 1px solid var(--linie); }
.abfrage-rahmen .abfrage-gruppe-knopf[aria-pressed="true"] .abfrage-wahl-kreis,
.abfrage-rahmen .abfrage-pwahl:has(input:checked) .abfrage-wahl-kreis { background: var(--j-ok-bg); color: var(--j-ok-fg); border: 2px solid var(--j-ok-fg); }
.abfrage-rahmen .abfrage-gruppe-knopf[aria-pressed="mixed"] .abfrage-wahl-kreis { background: var(--j-nacht-50); color: var(--j-ok-fg); border: 2px dashed var(--j-ok-fg); }




.abfrage-rahmen .blatt-panel .hinweis, .abfrage-rahmen .abfrage-text-block { text-align: justify; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.abfrage-rahmen .abfrage-zeile-form .hinweis, .abfrage-rahmen small.hinweis { text-align: left; }

.abfrage-rahmen .blatt { scrollbar-gutter: stable; }
@container seite (max-width: 64rem) { .abfrage-rahmen .blatt { -webkit-overflow-scrolling: touch; } }

.abfrage-psuche { position: relative; display: flex; flex-direction: column; gap: var(--a1); }
.abfrage-psuche > label { font-size: var(--gr-klein); font-weight: 600; }
.abfrage-psuche-feld { display: flex; align-items: center; gap: var(--a2); padding: 0 var(--a2); border: 1px solid var(--linie); border-radius: var(--rund-m); background: var(--karte); }
.abfrage-psuche-feld:focus-within { border-color: var(--primaer); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primaer) 25%, transparent); }
.abfrage-psuche-feld .symbol { color: var(--text-leise); flex: none; }
.abfrage-psuche-feld input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; padding: var(--a2) 0; font: inherit; color: inherit; }
.abfrage-psuche-feld[hidden], .abfrage-psuche-gewaehlt[hidden], .abfrage-psuche-liste[hidden], .abfrage-psuche-liste li[hidden] { display: none; }
.abfrage-psuche-liste { list-style: none; margin: 0; padding: var(--a1); border: 1px solid var(--linie); border-radius: var(--rund-m); background: var(--karte);
  max-height: 16rem; overflow-y: auto; overscroll-behavior: contain; box-shadow: var(--schatten-m, 0 6px 18px rgba(0,0,0,.08)); }
.abfrage-psuche-liste li[data-id] { padding: var(--a1); border-radius: var(--rund-s, .375rem); cursor: pointer; }
.abfrage-psuche-liste li[data-id]:hover, .abfrage-psuche-liste li[data-id]:focus { background: var(--j-nacht-50); outline: none; }
.abfrage-psuche-liste .j-badge, .abfrage-psuche-gewaehlt .j-badge { max-width: 100%; }
.abfrage-psuche-nichts { padding: var(--a2); font-size: var(--gr-klein); color: var(--text-leise); }
.abfrage-psuche-gewaehlt { display: flex; align-items: center; gap: var(--a2); padding: var(--a1); border: 1px solid var(--j-ok-fg); border-radius: var(--rund-m); background: var(--j-ok-bg); }
.abfrage-psuche-gewaehlt .j-badge { flex: 1; min-width: 0; }
.abfrage-psuche-weg { flex: none; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--linie); background: var(--karte); color: var(--text-leise); font-size: 1.1rem; line-height: 1; cursor: pointer; }

.abfrage-abgegeben .abfrage-person .j-badge { background: var(--j-ok-bg); border-color: var(--j-ok-fg); box-shadow: inset 0 0 0 1px var(--j-ok-fg); }
.abfrage-abgegeben .abfrage-person .j-badge { position: relative; }
.abfrage-abgegeben .abfrage-person .j-badge::after { content: "✓"; position: absolute; left: 1.45rem; top: 1.35rem; width: .95rem; height: .95rem; border-radius: 50%;
  background: var(--j-ok-fg); color: var(--j-weiss, #fff); border: 2px solid var(--karte); font-size: .55rem; font-weight: 800; line-height: .75rem; text-align: center; box-sizing: border-box; }
@container seite (max-width: 44rem) { .abfrage-zeile { grid-template-columns: minmax(0, 1fr) 15vw 15vw; grid-template-areas: "p z1 z2"; } .abfrage-zeile .abfrage-status { display: none; } .abfrage-zeile[data-stand="in_arbeit"] .abfrage-person .j-badge { box-shadow: inset 0 0 0 1.5px var(--j-warn-fg, #b45309); } .abfrage-spalten { display: none; } }




@container seite (min-width: 64.01rem) { .abfrage-rahmen { min-height: calc(100dvh - 2 * var(--a4)); } .abfrage-rahmen > .blatt { height: auto; } }

.abfrage-zeile .abfrage-status { display: none; }
.abfrage-zeile[data-stand="in_arbeit"] .abfrage-person .j-badge { box-shadow: inset 0 0 0 1.5px var(--j-warn-fg, #b45309); }

.abfrage-wliste > .abfrage-wgruppe:last-child { border-bottom: 0; }

@container seite (max-width: 64rem) { .abfrage-rahmen .blatt.sucht { top: 0; max-height: none; height: 100dvh; border-radius: 0; } .abfrage-rahmen .blatt.sucht [data-panel="ausnahmen"] { padding-bottom: 60dvh; } .abfrage-rahmen .blatt.sucht .abfrage-psuche-liste { max-height: var(--psuche-max, 40dvh); } }


@container seite (min-width: 44.01rem) { .abfrage-werte { grid-template-columns: 8.5rem 8.5rem; gap: var(--a4); } }



.abfrage-ausnahmen form > .j-badge { flex: 1 1 auto; min-width: 0; max-width: none; }
.abfrage-ausnahmen form > .j-badge .j-badge-text { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.abfrage-ausnahmen form > .j-badge small { display: block; }
.abfrage-ausnahmen form > .akt-rund { flex: none; margin: 0; }
.abfrage-monat { font-weight: 700; color: var(--text); }

@container seite (min-width: 64.01rem) { .abfrage-rahmen { align-items: stretch; } .abfrage-rahmen > .akte-haupt { display: flex; flex-direction: column; } .abfrage-rahmen > .akte-haupt > .abfrage-kachel { flex: 1 1 auto; } .abfrage-rahmen > .blatt { position: relative; top: auto; contain: size; height: auto; max-height: none; min-height: 34rem; overflow-y: auto; } }



.abfrage-rahmen .akt-rund.akt-rund-aktiv .akt-rund-kreis::after, .abfrage-handy-nav .akt-rund.akt-rund-aktiv .akt-rund-kreis::after { content: none; }

.tabelle-personen td.haupt .j-badge-name { display: flex; flex-direction: column; line-height: 1.2; white-space: normal; }
.tabelle-personen td.haupt .j-badge-vor { font-weight: 600; }
.tabelle-personen td.haupt .j-badge-nach { font-weight: 400; font-size: .92em; color: var(--text-leise); }
.tabelle-personen td.haupt .j-badge-text { white-space: normal; overflow: visible; }
.tabelle-personen td.haupt .j-badge-vor, .tabelle-personen td.haupt .j-badge-nach { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabelle-personen td[data-label="Springer"] .badges-gruppe { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.tabelle-personen td[data-label="Springer"] .j-badge { max-width: none; }
.tabelle-personen td[data-label="Springer"] .j-badge-text { overflow: visible; text-overflow: clip; white-space: nowrap; }
@container seite (max-width: 44rem) { .tabelle-personen td[data-label="Springer"] .badges-gruppe { align-items: flex-start; } .tabelle-personen td[data-label="Springer"] .j-badge { max-width: 100%; } .tabelle-personen td[data-label="Springer"] .j-badge-text { white-space: normal; } }



.vp-slot.belegt[style*="--p-h"] { background: hsl(var(--p-h) 70% 95%); border-color: hsl(var(--p-h) 55% 62%); box-shadow: inset 4px 0 0 hsl(var(--p-h) 60% 45%); }
.vp-slot.belegt[style*="--p-h"] .j-badge-person { background: hsl(var(--p-h) 65% 90%); border-color: hsl(var(--p-h) 50% 65%); }
.vp-slot.belegt[style*="--p-h"] .j-badge-avatar { background: hsl(var(--p-h) 55% 42%); color: #fff; }
.vp-slot.belegt.springer, .vp-slot.belegt.springer[style*="--p-h"] { background: #fdff9e; border-color: #d8e000; box-shadow: inset 4px 0 0 #e6f000; }
.vp-slot.belegt.springer .j-badge-person { background: #f6ff3a; border-color: #c9d100; }
.vp-slot.belegt.springer .j-badge-avatar { background: #b8bf00; color: #1d1d00; }
.vp-person[style*="--p-h"] { border-left-color: hsl(var(--p-h) 60% 45%); }
.vp-person[style*="--p-h"] .vp-person-ring { --ring: hsl(var(--p-h) 60% 42%); }
.vp-person.springer, .vp-raster .vp-person.springer { border-left-color: #e6f000; background: #fdffd0; }
.vp-leg-springer { border-left-color: #e6f000; }
:root[data-ansicht="dunkel"] .vp-slot.belegt[style*="--p-h"] { background: hsl(var(--p-h) 35% 18%); border-color: hsl(var(--p-h) 45% 40%); }
:root[data-ansicht="dunkel"] .vp-slot.belegt[style*="--p-h"] .j-badge-person { background: hsl(var(--p-h) 35% 24%); }
:root[data-ansicht="dunkel"] .vp-slot.belegt.springer { background: #4a4d00; border-color: #e6f000; }
:root[data-ansicht="dunkel"] .vp-slot.belegt.springer .j-badge-person { background: #6b7000; color: #fbff9e; }

.vp-slot.konflikt.urlaub { outline: 2px solid var(--j-info-fg); outline-offset: -2px; }
.vp-slot.konflikt.unverf { outline: 2px solid var(--j-fehler-fg); outline-offset: -2px; }
.vp-slot.konflikt.kollision { outline: 2px dashed var(--j-warn-fg); outline-offset: -2px; }
.vp-slot.konflikt { background: inherit; }
.vp-konflikt { display: inline-flex; align-items: center; gap: 3px; max-width: 100%; padding: 1px .4rem; border-radius: var(--rund-voll); font-size: var(--gr-mini); font-weight: 700; line-height: 1.3; }
.vp-konflikt .symbol { width: 11px; height: 11px; flex: none; }
.vp-konflikt > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.vp-konflikt-urlaub { background: var(--j-info-bg); color: var(--j-info-fg); }
.vp-konflikt-unverf, .vp-konflikt-unverfuegbar { background: var(--j-fehler-bg); color: var(--j-fehler-fg); }
.vp-konflikt-kollision { background: var(--j-warn-bg); color: var(--j-warn-fg); }
.vp-slot > .vp-konflikt { align-self: flex-start; margin-top: 2px; }

.mit-person .vp-slot.fuer-gesperrt { opacity: .55; background: repeating-linear-gradient(135deg, var(--j-info-bg) 0 6px, transparent 6px 12px); outline: 2px solid var(--j-info-fg); outline-offset: -2px; }
.mit-person .vp-slot.fuer-unverf { opacity: 1; cursor: pointer; background: repeating-linear-gradient(135deg, var(--j-fehler-bg) 0 6px, transparent 6px 12px); outline: 2px dashed var(--j-fehler-fg); outline-offset: -2px; }
.vp-tag-urlaub { background: var(--j-info-bg); border-color: var(--j-info-fg); color: var(--j-info-fg); }

.vp-konflikte { margin-top: var(--a4); }
.vp-konflikt-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.vp-konflikt-liste li { display: grid; grid-template-columns: 3.25rem 2rem minmax(0, 14rem) minmax(0, 1fr); align-items: center; gap: var(--a2); padding: var(--a2) 0; border-bottom: 1px solid var(--linie); }
.vp-konflikt-tag { display: flex; flex-direction: column; align-items: center; line-height: 1.1; text-decoration: none; color: inherit; }
.vp-konflikt-tag small { color: var(--text-leise); font-size: var(--gr-etikett); }
.vp-konflikt-liste .j-badge { max-width: 100%; }
.vp-konflikt-liste .vp-konflikt { justify-self: start; font-size: var(--gr-etikett); }
.vp-legende .vp-konflikt { margin-right: var(--a2); }
@container seite (max-width: 64rem) { .vp-kachel .kalender-liste .vp-slot.belegt[style*="--p-h"]::before { background: hsl(var(--p-h) 60% 45%); } .vp-kachel .kalender-liste .vp-slot.belegt.springer::before { background: #e6f000; } .vp-kachel .kalender-liste .vp-slot.belegt[style*="--p-h"], .vp-kachel .kalender-liste .vp-slot.belegt.springer { box-shadow: none; } .vp-kachel .kalender-liste .vp-slot > .vp-konflikt { grid-column: 2; margin-left: var(--a2); } .vp-konflikt-liste li { grid-template-columns: 2.75rem 1.75rem minmax(0, 1fr); } .vp-konflikt-liste li > .vp-konflikt { grid-column: 3; } }


.vp-urlaube { display: flex; flex-wrap: wrap; gap: 2px; margin: 0 0 2px; }
.vp-urlaub-chip { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; padding: 0 .3rem; border-radius: var(--rund-voll); font-size: var(--gr-etikett); font-weight: 600;
  background: var(--j-info-bg); color: var(--j-info-fg); border: 1px solid color-mix(in srgb, var(--j-info-fg) 40%, transparent); overflow: hidden; }
.vp-urlaub-chip .symbol { width: 10px; height: 10px; flex: none; }
.vp-urlaub-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kalender-tag:has(.vp-urlaub-chip) { box-shadow: inset 0 3px 0 var(--j-info-fg); }

.vp-slot > .vp-konflikt { max-width: 100%; min-width: 0; }
.vp-slot > .vp-konflikt > span { overflow: hidden; text-overflow: clip; white-space: nowrap; }

@container seite (min-width: 64.01rem) { .vp-slot > .vp-konflikt { padding: 0 .25rem; gap: 0; font-size: .6rem; letter-spacing: -.01em; } .vp-slot > .vp-konflikt .symbol { display: none; } }

@container seite (min-width: 64.01rem) { .vp-slot > .vp-konflikt > span { white-space: normal; hyphens: manual; overflow: visible; line-height: 1.1; } }

.vp-urlaub-chip::before { display: none; }
.kalender-tag .vp-urlaub-chip > span { display: inline; }
.vp-urlaub-chip { width: auto; justify-content: flex-start; }
@container seite (max-width: 64rem) { .vp-urlaube { padding: 0 var(--a2); } .vp-urlaub-chip { font-size: var(--gr-klein); padding: .1rem .5rem; } }


.vp-slot.belegt[style*="--p-h"] { background: hsl(var(--p-h) var(--p-s, 70%) calc(92% + var(--p-l, 0%) / 3 - var(--p-d, 0) * 8%)); border-color: hsl(var(--p-h) var(--p-s, 70%) calc(55% + var(--p-l, 0%) - var(--p-d, 0) * 10%)); box-shadow: inset 5px 0 0 hsl(var(--p-h) var(--p-s, 70%) calc(45% + var(--p-l, 0%) - var(--p-d, 0) * 10%)); }
.vp-slot.belegt[style*="--p-h"] .j-badge-person { background: hsl(var(--p-h) var(--p-s, 70%) calc(85% + var(--p-l, 0%) / 2 - var(--p-d, 0) * 8%)); border-color: hsl(var(--p-h) var(--p-s, 70%) calc(58% + var(--p-l, 0%) - var(--p-d, 0) * 10%)); }
.vp-slot.belegt[style*="--p-h"] .j-badge-avatar { background: hsl(var(--p-h) var(--p-s, 70%) calc(42% + var(--p-l, 0%) - var(--p-d, 0) * 9%)); color: #fff; }
.vp-person[style*="--p-h"] { border-left: 6px solid hsl(var(--p-h) var(--p-s, 70%) calc(45% + var(--p-l, 0%) - var(--p-d, 0) * 10%)); }
.vp-person[style*="--p-h"] .vp-person-ring { --ring: hsl(var(--p-h) var(--p-s, 70%) calc(45% + var(--p-l, 0%) - var(--p-d, 0) * 10%)); }
@container seite (max-width: 64rem) { .vp-kachel .kalender-liste .vp-slot.belegt[style*="--p-h"]::before { background: hsl(var(--p-h) var(--p-s, 70%) calc(45% + var(--p-l, 0%) - var(--p-d, 0) * 10%)); } }