/* Modul abwesenheit: Urlaub & Abwesenheit, Teamkalender, Team, Verwaltung Urlaub & Verträge.
   Farben je Art laufen über Klassen (farbe-gruen …), weil die CSP kein style= erlaubt. */
.farbe-gruen { --art: #2e7d32; --art-hell: #dcefdc; }
.farbe-rot { --art: #c62828; --art-hell: #f7d6d6; }
.farbe-violett { --art: #4527a0; --art-hell: #e3dcf3; }
.farbe-blau { --art: #1565c0; --art-hell: #d6e6f7; }
.farbe-orange { --art: #e65100; --art-hell: #fbe0cc; }
.farbe-braun { --art: #6d4c41; --art-hell: #e8dcd7; }
.farbe-tuerkis { --art: #00838f; --art-hell: #d0eceb; }
.farbe-grau { --art: #616161; --art-hell: #e4e1e0; }
.farbe-bordeaux { --art: #8e0038; --art-hell: #f3d9e3; }

.abw-punkt { display: inline-block; flex: none; width: .875rem; height: .875rem; margin-right: .5rem; border-radius: 2px; background: var(--art, #616161); vertical-align: -.0625rem; }
.abw-art { display: inline-flex; align-items: center; }
.abw-klein { margin: .125rem 0; font-size: .9063rem; color: var(--leise); font-weight: 400; }
.abw-gross { margin: .5rem 0 0; font: 500 3rem/1 var(--titel); font-variant-numeric: tabular-nums; }
.abw-warnung { color: #a11919; font-weight: 600; }
.abw-vorschau { margin: 0; min-height: 1.5rem; color: var(--leise); }
.abw-nur-lesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Reiter */
.abw-reiter { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: 1rem; border-bottom: 1px solid var(--linie); }
.abw-reiter button { min-height: var(--ziel); padding: 0 1rem; background: none; border: 0; border-bottom: 3px solid transparent; color: var(--tinte); font-weight: 600; }
.abw-reiter button[aria-selected="true"] { color: var(--bordeaux); border-bottom-color: var(--bordeaux); background: var(--rose-2); }
.abw-zahl { display: inline-block; min-width: 1.375rem; padding: 0 .375rem; border-radius: 1rem; background: #b25e00; color: #fff; font-size: .8125rem; text-align: center; }

/* Karten und Listen */
.abw-karte { padding: 1rem; background: var(--hemd); border: 1px solid var(--linie); }
.abw-karte h2 { margin: 0; font-size: 1.375rem; }
.abw-karte h3 { margin: 1.25rem 0 .25rem; font-size: 1.0625rem; }
.abw-spalten { display: grid; gap: 1rem; align-items: start; }
.abw-monat { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; }
.abw-monat .knopf { min-width: var(--ziel); padding: 0 .75rem; }
.abw-zeile { display: flex; justify-content: space-between; padding: .375rem 0; border-top: 1px solid var(--linie); font-variant-numeric: tabular-nums; }
.abw-summe { font-weight: 700; border-top: 2px solid var(--tinte); }
.abw-liste { margin: 1rem 0 0; padding: 0; list-style: none; }
.abw-karte > .abw-liste { margin: 0; padding: 0; }
.abw-eintrag { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; padding: .75rem 0; border-top: 1px solid var(--linie); }
.abw-eintrag:first-child { border-top: 0; }
.abw-eintrag > div > small, .abw-eintrag > div > span { display: block; }
.abw-eintrag small { color: var(--leise); font-size: .9063rem; }
.abw-aus { opacity: .6; }
.abw-rechts { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.abw-antrag { display: grid; gap: .5rem 1rem; }
.abw-person { display: flex; gap: .75rem; align-items: center; }
.abw-person small { display: block; }
.abw-umschalter { display: flex; gap: .5rem; margin-bottom: .75rem; }

/* Status */
.pille-abw-beantragt { background: #fbe9cf; color: #7a4500; }
.pille-abw-genehmigt { background: #dcefdc; color: #1b5e20; }
.pille-abw-abgelehnt { background: #f7d6d6; color: #8e1414; }
.pille-abw-storniert { background: #e4e1e0; color: #424242; }

/* Tabellen (Konten, Arten) */
.abw-tabelle { width: 100%; border-collapse: collapse; min-width: 44rem; }
.abw-tabelle th, .abw-tabelle td { padding: .5rem .625rem; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: middle; }
.abw-tabelle thead th { font-size: .9063rem; color: var(--leise); }
.abw-tabelle td small { color: var(--leise); }
.abw-aktionen { white-space: nowrap; }
.abw-aktionen .knopf { margin-right: .25rem; }
.abw-stunden { display: grid; grid-template-columns: repeat(auto-fit, minmax(4.25rem, 1fr)); gap: .5rem; }
.abw-schnell { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .5rem; }

/* Teamkalender */
.kal-rahmen { overflow-x: auto; border: 1px solid var(--linie); }
.kal { border-collapse: collapse; width: 100%; min-width: 58rem; table-layout: fixed; }
.kal th, .kal td { border: 1px solid var(--linie); padding: 0; text-align: center; font-size: .8125rem; line-height: 1.2; }
.kal thead th { padding: .25rem 0; background: var(--rose); font-weight: 400; color: var(--leise); }
.kal thead strong { color: var(--tinte); }
.kal .kal-name { position: sticky; left: 0; z-index: 1; width: 11rem; min-width: 11rem; padding: .25rem .5rem; background: var(--hemd); text-align: left; font-weight: 600; }
.kal thead .kal-name { background: var(--rose); }
.kal tbody .kal-name { display: table-cell; }
.kal tbody .kal-name .gesicht { display: inline-grid; width: 1.75rem; height: 1.75rem; margin-right: .5rem; font-size: .75rem; vertical-align: middle; }
.kal tbody .kal-name span { vertical-align: middle; font-size: .9375rem; }
.kal-zelle { height: 2.5rem; }
.kal-grau { background: #ece9e8; }
.kal-schule { background: #ece6f7; }
.kal-balken { background: var(--art); color: #fff; font-weight: 700; }
.kal-antrag { background: repeating-linear-gradient(135deg, var(--art) 0 4px, #fff 4px 8px); color: var(--tinte); }
.kal-halb { background: linear-gradient(90deg, var(--art) 50%, transparent 50%); color: var(--tinte); }
.kal-heute { box-shadow: inset 2px 0 var(--bordeaux), inset -2px 0 var(--bordeaux); }
.kal thead .kal-heute { box-shadow: inset 2px 2px 0 var(--bordeaux), inset -2px 0 var(--bordeaux); background: var(--hemd); }
.kal tbody tr:last-child .kal-heute { box-shadow: inset 2px 0 var(--bordeaux), inset -2px 0 var(--bordeaux), inset 0 -2px var(--bordeaux); }
.kal [data-aktion] { cursor: pointer; }
.kal [data-aktion]:hover { background: var(--rose-2); }
.kal-legende { display: flex; flex-wrap: wrap; gap: .375rem 1.25rem; margin: 1rem 0 0; padding: 0; list-style: none; font-size: .9375rem; }
.kal-legende li { display: flex; align-items: center; }
.kal-legende .kal-grau { border: 1px solid var(--linie); }

/* Team */
.team-raster { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.team-karte { display: flex; flex-direction: column; align-items: center; gap: .125rem; padding: 1.25rem 1rem; background: var(--hemd); border: 1px solid var(--linie); text-align: center; }
.team-karte h3 { margin: .5rem 0 0; font-size: 1.25rem; }
.team-karte p { margin: 0; }
.team-karte a { overflow-wrap: anywhere; }
.team-foto { width: 6.875rem; height: 6.875rem; font-size: 2rem; }
.team-heute { display: inline-block; margin: .375rem 0; padding: 0 .625rem; border-radius: 1rem; font-size: .9063rem; font-weight: 600; }
.team-da { background: #dcefdc; color: #1b5e20; }
.team-weg { background: #fbe9cf; color: #7a4500; }

@media (min-width: 48rem) {
  .abw-spalten { grid-template-columns: minmax(18rem, 24rem) minmax(0, 1fr); }
  .abw-antrag { grid-template-columns: 12rem 1fr auto; align-items: center; }
}