/* Wochenplan und Personenblatt. */
.wochen-navi { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; align-items: center; margin: 1rem 0; }
.wochen-navi strong { grid-column: 1 / -1; grid-row: 1; text-align: center; font: 500 1.1875rem/1.2 var(--titel); }

.plan-rahmen { background: var(--hemd); border: 1px solid var(--linie); }
.plan { width: 100%; border-collapse: collapse; table-layout: fixed; }
.plan th, .plan td { border: 1px solid var(--linie); padding: .125rem; text-align: center; font-size: .8125rem; line-height: 1.15; overflow-wrap: normal; }
.plan thead th { background: var(--wand); color: var(--auf-wand); border-color: var(--wand-3); font-weight: 600; padding: .3125rem .125rem; }
.plan thead small { color: var(--auf-wand-leise); font-size: .75rem; font-weight: 400; }
.plan thead th:first-child, .plan tbody th { width: 5.75rem; text-align: left; }
.plan thead th:first-child { padding-left: .5rem; }
.plan tbody th { padding: 0; background: var(--hemd); }
.plan tbody th button { width: 100%; min-height: var(--ziel); padding: .25rem .375rem; background: none; border: 0; text-align: left; line-height: 1.15; }
.plan tbody th button:hover { background: var(--rose-2); }
.plan tbody th strong { display: block; font-size: .8438rem; font-weight: 600; overflow-wrap: anywhere; hyphens: auto; }
.plan tbody th small { display: none; }
.plan .heute-spalte { background: var(--bordeaux); color: #fff; border-color: var(--bordeaux); }
.plan .heute-spalte small { color: #fff; }

.zelle-da { background: #e4f1ea; }
.zelle-vormittag { background: repeating-linear-gradient(135deg, #e4f1ea 0 8px, #fff 8px 14px); }
.zelle-frei, .zelle-wochenende { background: #e9e6e4; color: var(--leise); }
.zelle-feiertag { background: #e3dcea; }
.zelle-berufsschule { background: #e6e1f2; }
.zelle-urlaub { background: #f3dcbb; }
.zelle-urlaub_halb { background: repeating-linear-gradient(135deg, #f3dcbb 0 8px, #fff 8px 14px); }
.zelle-krank { background: #f7d6df; }
.zelle-aussendienst { background: #d9e6f4; }
.zelle-beantragt { background: #fff; outline: 2px dashed var(--eiche); outline-offset: -3px; }
/* Weitere Arten (Schulung, Überstundenabbau, eigene): Farbe kommt von der Klasse farbe-… (modul-abwesenheit.css) */
.zelle-art { background: var(--art-hell, #e9e6e4); }
.zelle-art.zelle-halb { background: repeating-linear-gradient(135deg, var(--art-hell, #e9e6e4) 0 8px, #fff 8px 14px); }

.legende { display: flex; flex-wrap: wrap; gap: .375rem 1.25rem; margin: 1rem 0 0; }
.legende div { display: flex; gap: .5rem; align-items: center; }
.legende dt { min-width: 3.5rem; padding: .0625rem .375rem; text-align: center; font-size: .875rem; border: 1px solid var(--linie); }
.legende dd { margin: 0; font-size: .9375rem; color: var(--leise); }

/* Urlaubskonto im Personenblatt */
.konto { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr)); gap: 0; margin-top: 1rem; border: 1px solid var(--linie); }
.konto div { padding: .5rem .625rem; }
.konto div + div { border-left: 1px solid var(--linie); }
.konto strong { display: block; font: 500 1.625rem/1.15 var(--titel); font-variant-numeric: tabular-nums; }
.konto span { display: block; font-size: .875rem; color: var(--leise); line-height: 1.2; }
.urlaub { display: grid; gap: .75rem; }
.eintrag { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; }

.wochenplan-wahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: .5rem; }

@media (min-width: 48rem) {
  .wochen-navi { grid-template-columns: auto 1fr auto; }
  .wochen-navi strong { grid-column: 2; }
  .plan th, .plan td { font-size: 1rem; padding: .375rem; }
  .plan thead th:first-child, .plan tbody th { width: 15rem; }
  .plan thead small { font-size: .875rem; }
  .plan tbody th button { padding: .25rem .625rem; }
  .plan tbody th strong { font-size: 1.0625rem; }
  .plan tbody th small { display: block; font-size: .875rem; }
  .urlaub { grid-template-columns: 1fr 1fr; align-items: end; }
  .urlaub h3, .urlaub .haken, .urlaub .knopf { grid-column: 1 / -1; }
  .urlaub h3 { margin-bottom: 0; }
}