/* Aussehen der Praxisseite praxis-fedosov.de, übertragen auf ein Werkzeug.
   Übernommen sind die Farben (--primary #994940 und Verwandte), die Schrift,
   die eckigen Kanten, der weiche Schatten statt harter Rahmen, die versalen
   Knöpfe mit der von links einlaufenden Füllung und der „Topper": das kleine
   gesperrte Wort in Ziegelrot über einem Abschnitt.

   Nicht übernommen sind die Maße. Auf der Website ist ein Knopf 50 px hoch und
   eine Überschrift 49 px groß - das ist für eine Seite gedacht, die man liest.
   Hier wird geplant: dieselben Formen, dieselben Farben, engere Raster. */

:root {
  /* Aus assets/css/root.css der Website, die dortigen Namen in Klammern. */
  --akzent: #994940; /* (--primary)      Ziegelrot, die eine Akzentfarbe */
  --akzent-hell: #c5685e; /* (--primaryLight) */
  --akzent-licht: #d28b83; /* (--highlight)    Füllung beim Überfahren */
  --akzent-blass: #f4eceb; /*                  getönte Fläche, hier ergänzt */
  --akzent-text: #ffffff;
  --text: #1a1a1a; /* (--headerColor) */
  --leise: #4e4b66; /* (--bodyTextColor) */

  --grund: #f5f3f2; /* warmes Grau, nicht das übliche Blaugrau */
  --flaeche: #ffffff;
  --rand: #e3dedd;
  --schatten: 0 2px 8px rgba(0, 0, 0, 0.12);

  --warnung: #8a5a00;
  --warnung-flaeche: #fff4dd;
  --fehler: #9b2c2c;

  --radius: 2px; /* die Website ist eckig; 2 px nimmt nur die Kante */
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  /* Die Website lädt Roboto von Google. Das wird hier nicht nachgemacht: eine
     Schrift von außen nachzuladen meldet jeden Aufruf an einen Dritten und
     widerspräche der Regel "keine externen Ressourcen". Wer Roboto hat,
     bekommt Roboto, alle anderen die nächstbeste Grotesk des Systems. */
  font-family: Roboto, "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--grund);
}

/* Kopfzeile in drei Zonen: Titel, Navigation, Konto - von links nach rechts,
   das Konto zieht sich selbst an den rechten Rand.
   Kein unterer Rahmen, sondern der Schatten der Website. */
header.kopf {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  align-items: center;
  padding: 8px 20px;
  background: var(--flaeche);
  box-shadow: var(--schatten);
  position: relative;
  z-index: 10;
}

/* Der Titel als Topper - ohne Logo ist er das einzige Markenzeichen oben links. */
header.kopf h1 {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--akzent);
  white-space: nowrap;
}

header.kopf .hauptnav {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}

/* Die Website unterstreicht den aktiven Punkt mit einem 1-px-Strich unter der
   Schrift, statt ihn mit einer Fläche zu hinterlegen. */
header.kopf .hauptnav a {
  position: relative;
  padding: 4px 1px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.95rem;
  white-space: nowrap;
}

header.kopf .hauptnav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transition: transform 0.25s;
}

header.kopf .hauptnav a:hover::after {
  transform: scaleX(1);
}

header.kopf .hauptnav a.aktiv {
  color: var(--akzent);
  font-weight: 700;
}

header.kopf .hauptnav a.aktiv::after {
  transform: scaleX(1);
}

/* Das Konto hängt sich mit margin-left selbst an den rechten Rand, statt von
   der Navigation dorthin geschoben zu werden - auf „Mein Konto" gibt es keine,
   die schieben könnte. Es wirkt je Zeile, also auch, wenn die Leiste umbricht. */
header.kopf .konto {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

header.kopf .konto .person {
  color: var(--leise);
  font-size: 0.9rem;
  white-space: nowrap;
}

/* Eine leere Navigation - „Mein Konto" hat keine - soll weder eine Zeile noch
   eine Lücke belegen. */
header.kopf .hauptnav:empty {
  display: none;
}

/* Am Telefon passen Titel, Navigation und Konto nicht nebeneinander. Von
   allein bricht die Leiste dann in drei Zeilen um und das Abmelden steht
   verloren ganz unten. Stattdessen die übliche Aufteilung einer App-Leiste:
   oben der Titel links und das Konto rechts, darunter die Navigation über die
   volle Breite. */
@media (max-width: 760px) {
  header.kopf {
    gap: 6px 12px;
    padding: 8px 16px;
  }

  header.kopf .hauptnav {
    order: 1;
    flex-basis: 100%;
    gap: 18px;
  }
}

/* Unter 480 px teilen sich Titel, Name und Knopf keine Zeile mehr. Der Name
   weicht - aber nur dort, wo eine Navigation um denselben Platz konkurriert.
   Auf „Mein Konto" gibt es keine, dort bleibt er stehen. */
@media (max-width: 480px) {
  header.kopf .hauptnav:not(:empty) ~ .konto .person {
    display: none;
  }
}

/* Waagerechter Trenner innerhalb eines Formulars, 16 px Luft nach oben und unten. */
hr.trenner {
  border: none;
  border-top: 1px solid var(--rand);
  margin: 16px 0;
}

/* Wochenmuster: ein Tag ist eine Zeile, die Beschriftungen stehen einmal oben. */
.musterzeile {
  display: grid;
  grid-template-columns: 72px repeat(3, minmax(72px, 1fr));
  gap: 0 10px;
  align-items: center;
  padding: 2px 0;
}

.musterzeile input {
  margin-top: 0;
}

.musterzeile label.tag {
  margin: 0;
  color: var(--text);
  white-space: nowrap;
}

.musterzeile.kopf {
  color: var(--leise);
  font-size: 0.82rem;
  padding-bottom: 2px;
}

@media (max-width: 520px) {
  /* Zu schmal für vier Spalten: Tag über die volle Breite, darunter die Zeiten. */
  .musterzeile {
    grid-template-columns: repeat(3, 1fr);
  }

  .musterzeile label.tag {
    grid-column: 1 / -1;
    padding-top: 6px;
  }

  .musterzeile.kopf label.tag,
  .musterzeile.kopf span:first-child {
    display: none;
  }
}

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 16px;
}

/* Eine zu breite Tabelle scrollt in ihrer Karte, statt die ganze Seite seitlich
   mitzuziehen - am Telefon sonst der Fall, etwa bei den Urlaubskonten.
   Nebenwirkung: overflow-y rechnet damit auf auto mit, was absichtlich über den
   Kartenrand hinausragen soll, wird abgeschnitten. */
section.karte {
  background: var(--flaeche);
  border-radius: var(--radius);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 18px;
  overflow-x: auto;
}

/* Der Topper der Website: kleines gesperrtes Versalwort in Ziegelrot.
   Dort steht darunter eine schwere Überschrift; hier ist der Topper selbst
   die Überschrift, weil eine Karte keinen zweizeiligen Titel braucht. */
h2 {
  margin: 0 0 14px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--akzent);
}

label {
  display: block;
  margin-bottom: 10px;
  font-size: 0.9rem;
  color: var(--leise);
}

input,
select,
button {
  font: inherit;
}

input,
select {
  width: 100%;
  padding: 8px 10px;
  margin-top: 3px;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche);
  color: var(--text);
}

input:focus,
select:focus {
  outline: none;
  border-color: var(--akzent);
  box-shadow: 0 0 0 2px rgba(153, 73, 64, 0.18);
}

input[type="checkbox"] {
  width: auto;
  margin-right: 6px;
  accent-color: var(--akzent);
}

/* Knöpfe wie auf der Website: eckig, versal, fett - und beim Überfahren läuft
   eine hellere Füllung von links ein. Die Website macht das mit einem
   ::before auf z-index -1; hier ist es derselbe Effekt über die Breite eines
   Hintergrundbildes, ohne Pseudoelement und ohne Stapelkontext, der in einer
   Tabellenzelle sonst gern hinter die Zelle rutscht. */
button,
a.knopf {
  display: inline-block;
  padding: 0 18px;
  line-height: 2.35em;
  border: 1px solid var(--akzent);
  border-radius: var(--radius);
  background-color: var(--akzent);
  background-image: linear-gradient(var(--akzent-licht), var(--akzent-licht));
  background-repeat: no-repeat;
  background-size: 0 100%;
  transition: background-size 0.3s;
  color: var(--akzent-text);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

button:hover,
a.knopf:hover {
  background-size: 100% 100%;
}

button:focus-visible,
a.knopf:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
}

/* Der zurückhaltende Knopf: nur Kontur, Füllung in blassem Ziegelrot.
   Die Schriftgröße steht hier noch einmal, weil .leise auch eine Textklasse
   ist und sonst mit ihrer höheren Spezifität gewinnen würde. */
button.leise,
a.knopf.leise {
  background-color: transparent;
  background-image: linear-gradient(var(--akzent-blass), var(--akzent-blass));
  border-color: var(--rand);
  color: var(--leise);
  font-size: 0.82rem;
}

button.leise:hover,
a.knopf.leise:hover {
  border-color: var(--akzent-licht);
  color: var(--akzent);
}

button:disabled {
  opacity: 0.5;
  cursor: default;
  background-size: 0 100%;
}

.reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0 14px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93rem;
}

th,
td {
  text-align: left;
  padding: 8px;
  border-bottom: 1px solid var(--rand);
}

th {
  color: var(--leise);
  font-weight: 600;
}

/* In den Listen bekommt die Kopfzeile den Topper-Schnitt. In den beiden
   Rastern nicht: dort stehen einzelne Buchstaben und Zahlen in 22-px-Zellen,
   die Sperrung würde sie aus der Spalte schieben. */
table:not(.raster):not(.plan) th {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

tbody tr {
  cursor: pointer;
}

tbody tr:hover {
  background: var(--grund);
}

tbody tr.gewaehlt {
  background: var(--akzent-blass);
  box-shadow: inset 3px 0 0 var(--akzent);
}

.meldung {
  padding: 10px 12px;
  border-radius: var(--radius);
  border-left: 3px solid;
  margin-bottom: 12px;
}

.meldung.fehler {
  background: #fbeceb;
  color: var(--fehler);
  border-color: var(--fehler);
}

.meldung.hinweis {
  background: var(--warnung-flaeche);
  color: var(--warnung);
  border-color: #d9a441;
}

/* Auch die Marke ist eckig. Sie trägt mal Text ("Minijob", "freigegeben"),
   mal nur zwei geschützte Leerzeichen als Farbtupfer in der Legende -
   deshalb bleibt die Polsterung, auch wenn nichts darin steht. */
.marke {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius);
  font-size: 0.76rem;
  background: var(--akzent-blass);
  border: 1px solid var(--rand);
  color: var(--leise);
}

.leise {
  color: var(--leise);
  font-size: 0.9rem;
}

/* Anmeldung und Passwortvergabe: die Karte mit dem roten Balken oben - wie das
   rote Feld auf der Startseite der Website. */
.anmeldung {
  max-width: 400px;
  margin: 9vh auto;
}

.anmeldung .karte {
  border-top: 4px solid var(--akzent);
}

.knopfreihe {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

/* Wochennavigation: Pfeile und Kalenderwoche in einer Zeile, der Zeitraum
   darunter in normaler Größe. Vorher stand alles in einer Reihe und brach am
   Telefon zwischen Titel und Pfeil um - der zweite Pfeil landete unter dem
   Datum. */
.wochenkopf {
  margin-bottom: 14px;
}

.wochenkopf .zeile {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
}

/* Die drei gehören zusammen und dürfen nie getrennt umbrechen. */
.wochenkopf .blaettern {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
}

/* Feste Mindestbreite, sonst wandern die Pfeile zwischen "KW 9" und "KW 39". */
.wochenkopf .kw {
  min-width: 68px;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

.wochenkopf .zeitraum {
  margin: 8px 0 0;
  color: var(--leise);
}

/* Antragseingang: eine Zeile je Antrag statt eines Blocks.
   Der Text wächst, die Knöpfe bleiben rechts und klein. */
.antrag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 9px 0;
  border-top: 1px solid var(--rand);
}

.antrag:first-child {
  border-top: none;
}

.antrag .text {
  flex: 1 1 320px;
  min-width: 0;
}

.antrag .zusatz {
  color: var(--leise);
  font-size: 0.85rem;
}

.antrag .zusatz.kollision {
  color: var(--warnung);
}

.antrag .knoepfe {
  display: flex;
  gap: 6px;
}

.antrag .knoepfe button {
  padding: 0 12px;
  line-height: 2em;
  font-size: 0.74rem;
}

.zweispalt {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(320px, 1.4fr);
  gap: 16px;
  align-items: start;
}

@media (max-width: 760px) {
  /* minmax(0, …) und nicht 1fr: das wäre minmax(auto, 1fr), und dieses auto
     hält die Spalte auf der min-content-Breite der Mitarbeitertabelle fest -
     467 px auf einem 343 px breiten Blatt, die Seite wackelt seitlich. */
  .zweispalt {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Jahresraster: eine Zeile je Mitarbeiter, eine Spalte je Tag. */
table.raster {
  border-collapse: collapse;
  font-size: 0.75rem;
}

table.raster th,
table.raster td {
  border: 1px solid var(--rand);
  padding: 0;
  text-align: center;
}

table.raster thead th {
  width: 22px;
  min-width: 22px;
  height: 22px;
  font-weight: 500;
  color: var(--leise);
}

table.raster tbody td {
  width: 22px;
  min-width: 22px;
  height: 22px;
}

table.raster th.person {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 46px;
  padding: 0 6px;
  background: var(--flaeche);
  text-align: left;
}

table.raster .frei {
  background: #efecea;
}

/* Heute: im Kopf in der Akzentfarbe, in der Spalte als dünne dunkle Kontur.
   Die Kontur ist bewusst nicht ziegelrot. Rot ist hier die Hausfarbe und
   steht außerdem für Krankheit; ein Zeitmarker ist keins von beidem, er ist
   Gerüst - und Gerüst ist auf der Website dunkel. Als Kontur statt als
   Fläche, damit die Farbe der Abwesenheit darunter sichtbar bleibt. */
table.raster th.heute {
  color: var(--akzent);
  font-weight: 700;
}

table.raster td.heute {
  box-shadow: inset 0 0 0 1px var(--text);
}

.art-urlaub {
  background: #2f7fb8;
}
.art-krankheit {
  background: #b64a4a;
}
.art-kind_krank {
  background: #cf8236;
}
.art-fortbildung {
  background: #6b5b9a;
}
.art-sonderurlaub {
  background: #3f8f6b;
}
.art-unbezahlt {
  background: #8b8f93;
}
.art-unbekannt {
  background: #9aa5ab;
}

/* Noch nicht entschieden: schraffiert statt voll. */
table.raster td.offen {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.85) 0,
    rgba(255, 255, 255, 0.85) 3px,
    transparent 3px,
    transparent 6px
  );
}

/* Ganzjahresansicht: 365 Spalten, gelesen wird das Muster statt des Einzeltags. */
table.raster.jahr thead th,
table.raster.jahr tbody td {
  width: 3px;
  min-width: 3px;
  height: 18px;
}

table.raster.jahr th.person {
  min-width: 52px;
  width: 52px;
}

table.raster.jahr tbody td {
  border: none;
  border-right: 1px solid rgba(255, 255, 255, 0.35);
}

table.raster.jahr th.monatskopf {
  width: auto;
  min-width: 0;
  border-left: 1px solid var(--rand);
  font-size: 0.7rem;
  text-align: center;
  white-space: nowrap;
}

/* Wochenraster des Dienstplans: breitere Zellen, Dienste als Knöpfe darin. */
table.plan {
  border-collapse: collapse;
  font-size: 0.82rem;
  width: 100%;
}

table.plan th,
table.plan td {
  border: 1px solid var(--rand);
  vertical-align: top;
  padding: 3px;
  min-width: 96px;
}

table.plan thead th {
  font-weight: 600;
  color: var(--leise);
  text-align: center;
}

table.plan th.person {
  min-width: 64px;
  text-align: left;
  background: var(--flaeche);
  position: sticky;
  left: 0;
  z-index: 1;
}

table.plan .frei {
  background: #efecea;
}

table.plan th.heute {
  color: var(--akzent);
}

table.plan td.heute {
  box-shadow: inset 0 0 0 1px var(--text);
}

/* Ein Dienst ist technisch ein Knopf, aber keiner im Sinne der Website: er
   wird gelesen, nicht gedrückt wie "Online Termin". Deshalb hier zurück zu
   gemischter Schrift und normalem Gewicht - nur die Farbe bleibt warm. */
table.plan button.dienst {
  display: block;
  width: 100%;
  margin-bottom: 3px;
  padding: 4px 6px;
  border: 1px solid #e3ccc8;
  border-radius: var(--radius);
  background-color: #f9f2f1;
  background-image: none;
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  white-space: normal;
  cursor: pointer;
}

table.plan button.dienst:hover {
  border-color: var(--akzent-licht);
  background-color: var(--akzent-blass);
}

table.plan button.dienst.warnung {
  border-color: #d9a441;
  background-color: var(--warnung-flaeche);
}

table.plan button.dienst .bereich {
  color: var(--leise);
  font-size: 0.72rem;
}

table.plan button.zelleLeer {
  width: 100%;
  padding: 1px;
  border: 1px dashed var(--rand);
  border-radius: var(--radius);
  background-color: transparent;
  background-image: none;
  color: var(--leise);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.4;
  cursor: pointer;
  opacity: 0;
}

table.plan td:hover button.zelleLeer {
  opacity: 1;
}

/* Wunsch und Sperrtermin: Hinweis für die Planung, kein Eintrag im Kalender.
   Deshalb als Umriss statt gefüllt - sonst sähe es aus wie eine Abwesenheit. */
table.plan .wunsch {
  display: block;
  padding: 2px 5px;
  margin-bottom: 3px;
  border-radius: var(--radius);
  font-size: 0.72rem;
  border: 1px dashed var(--leise);
  color: var(--leise);
}

table.plan .wunsch.sperre {
  border-color: var(--warnung);
  color: var(--warnung);
  background: var(--warnung-flaeche);
}

table.plan .abwesend {
  display: block;
  padding: 3px 5px;
  margin-bottom: 3px;
  border-radius: var(--radius);
  color: #fff;
  font-size: 0.75rem;
}

/* Teamansicht: ein Block je Tag statt eines Rasters aus zwölf Zeilen und
   sieben Spalten. Eine Woche hat immer sieben Tage, deshalb sieben feste
   Spalten statt auto-fit; minmax(0, …), damit eine lange Zeile die Spalte
   nicht aufbläht. Am Telefon untereinander - so beantwortet die Ansicht
   die Frage „wer ist am Donnerstag da" ohne seitliches Schieben. */
.teamwoche {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 900px) {
  .teamwoche {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .teamwoche {
    grid-template-columns: 1fr;
  }
}

.teamwoche .tag {
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 10px 12px;
}

.teamwoche .tag.zu {
  background: #efecea;
}

/* Heute wie überall sonst: dunkle Kontur, nicht die Hausfarbe. */
.teamwoche .tag.heute {
  box-shadow: inset 0 0 0 1px var(--text);
}

.teamwoche h3 {
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--leise);
}

.teamwoche .tag.heute h3 {
  color: var(--akzent);
}

.teamwoche ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.85rem;
}

.teamwoche li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 10px;
  padding: 4px 0;
  border-top: 1px solid var(--rand);
}

.teamwoche li:first-child {
  border-top: none;
}

/* Die eigene Zeile findet man sonst in zwölf Namen nicht wieder. */
.teamwoche li.ich {
  font-weight: 700;
}

.teamwoche li .wann {
  color: var(--leise);
  white-space: nowrap;
}

.teamwoche .fehlt,
.teamwoche .zuText {
  margin: 8px 0 0;
  font-size: 0.76rem;
  color: var(--leise);
}

.marke.art-urlaub,
.marke.art-krankheit,
.marke.art-kind_krank,
.marke.art-fortbildung,
.marke.art-sonderurlaub,
.marke.art-unbezahlt {
  border-color: transparent;
}