/* ---------------------------------------------------------------------------
   Gemeinsames Design aller Kanzlei-Tools.

   Diese eine Datei gestaltet das Portal UND den Urlaubsworkflow. Eine Aenderung
   hier wirkt ueberall - das ist beabsichtigt: Die Tools sollen wie ein
   zusammengehoeriges Ganzes wirken, nicht wie mehrere fremde Programme.

   Schrift: Source Sans 3, siehe static/schriften/LIESMICH.txt.
   --------------------------------------------------------------------------- */

@font-face {
    font-family: "Source Sans 3";
    src: url("../schriften/source-sans-3.30164609c163.woff2") format("woff2");
    font-weight: 100 900;   /* eine Datei fuer alle Schriftstaerken */
    font-style: normal;
    font-display: swap;
}

:root {
    /* Corporate Design KanzlAI StB M. Schwarz */
    --farbe-text: #1c1a19;
    --farbe-haupt: #343433;      /* Ueberschriften */
    --farbe-akzent: #A5342C;     /* Primaer-Rot */
    --farbe-akzent-hell: #fdf3f1;
    --farbe-gedaempft: #6f6a66;  /* Nebentexte */
    --farbe-leise: #8a847e;

    --farbe-grund: #FAF8F5;      /* warmes Elfenbein - der Seitenhintergrund */
    --farbe-flaeche: #ffffff;    /* Karten und Kacheln liegen darauf */
    --farbe-rand: #e8e3dc;
    --farbe-rand-stark: #d8d0c6;

    /* Status-Farben bleiben bewusst deutlich vom Akzent-Rot unterschieden,
       damit eine Fehlermeldung nicht wie ein normaler Knopf aussieht. */
    --farbe-erfolg: #1a7f4e;
    --farbe-fehler: #b3261e;
    --farbe-warnung: #9a6b00;

    --schatten-ruhe: 0 1px 2px rgba(52, 52, 51, 0.05), 0 3px 10px rgba(52, 52, 51, 0.035);
    --schatten-hoch: 0 2px 4px rgba(52, 52, 51, 0.05), 0 14px 30px rgba(52, 52, 51, 0.10);
    --rundung: 10px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--farbe-text);
    background: var(--farbe-grund);
    -webkit-font-smoothing: antialiased;
}

/* Grundfarbe aller Links. Bewusst als einfacher Element-Selektor, damit ihn
   jede genauere Angabe (Kacheln, Knoepfe, Kopfzeile) muehelos ueberschreibt. */
a { color: var(--farbe-akzent); }

/* ---------------------------------------------------------------- Kopfzeile */

.kopf {
    background: var(--farbe-flaeche);
    border-bottom: 1px solid var(--farbe-rand);
}

.kopf-inner {
    max-width: 1040px;
    margin: 0 auto;
    padding: 1rem 1.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    text-decoration: none;
}
.logo img { height: 34px; width: auto; display: block; }
.logo::after {
    /* feiner Trennstrich zwischen Logo und Bereichsname */
    content: "";
    width: 1px;
    height: 24px;
    background: var(--farbe-rand);
    order: 1;
}
.logo .logo-untertitel {
    order: 2;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--farbe-gedaempft);
}

nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}

/* Ein Knopf, der wie ein Link aussehen soll (z. B. "Abmelden" - technisch ein
   Formular, damit die Abmeldung nicht versehentlich ueber einen Link ausgeloest
   werden kann). Standardmaessig in der Akzentfarbe wie ein normaler Link ... */
.link-button {
    color: var(--farbe-akzent);
    text-decoration: none;
    font: inherit;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}
.link-button:hover { text-decoration: underline; }

/* ... innerhalb der Kopfzeile dagegen wie die uebrigen Navigationspunkte. */
nav a, nav .link-button, .person-menue .link-button {
    color: var(--farbe-gedaempft);
    text-decoration: none;
    font-size: 0.92rem;
    padding: 0.4rem 0.7rem;
    border-radius: 7px;
}
nav a:hover, nav .link-button:hover, .person-menue .link-button:hover {
    background: var(--farbe-grund);
    color: var(--farbe-haupt);
    text-decoration: none;
}

/* Persoenliches Menue hinter dem eigenen Namen. Ohne JavaScript geloest
   (<details>/<summary>), damit die Seite ohne Zusatztechnik auskommt. */
.person { position: relative; margin-left: 0.4rem; }
.person > summary {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.28rem 0.6rem 0.28rem 0.3rem;
    border: 1px solid var(--farbe-rand);
    border-radius: 999px;
    cursor: pointer;
    list-style: none;
    font-size: 0.9rem;
    color: var(--farbe-haupt);
}
.person > summary::-webkit-details-marker { display: none; }
.person > summary:hover { background: var(--farbe-grund); }
.person-kreis {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--farbe-akzent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    flex: none;
}
.person-pfeil { font-size: 0.6rem; color: var(--farbe-leise); }

.person-menue {
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    min-width: 200px;
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--rundung);
    box-shadow: var(--schatten-hoch);
    padding: 0.4rem;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.person-menue a, .person-menue .link-button {
    display: block;
    text-align: left;
    width: 100%;
    padding: 0.45rem 0.7rem;
    font-size: 0.9rem;
}
.logout-form { display: block; }

/* ------------------------------------------------------------------- Inhalt */

.inhalt {
    max-width: 1040px;
    margin: 0 auto;
    padding: 1.75rem 1.75rem 4rem;
}

h1, h2, h3 { color: var(--farbe-haupt); }
h1 {
    font-size: 1.95rem;
    font-weight: 700;
    letter-spacing: -0.022em;
    line-height: 1.25;
    margin: 0 0 1rem;
}
h2 {
    font-size: 1.2rem;
    font-weight: 650;
    letter-spacing: -0.014em;
    margin: 0 0 0.85rem;
}

.augenbraue {
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--farbe-akzent);
    margin-bottom: 0.6rem;
}
.untertitel { color: var(--farbe-gedaempft); margin: -0.9rem 0 2.25rem; }

/* -------------------------------------------------------- Karten & Meldungen */

.karte {
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--rundung);
    padding: 1.3rem 1.5rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--schatten-ruhe);
}

.hinweis, .meldung {
    border-radius: var(--rundung);
    padding: 0.85rem 1.1rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--schatten-ruhe);
}
.hinweis { background: #fff8e8; border: 1px solid #f0d9a0; color: #6d4c00; }
.meldung-success { background: #ecf6f0; border: 1px solid #b6ddc6; color: #14663f; }
.meldung-error   { background: #fbeeec; border: 1px solid #e8b9b3; color: #92201a; }
.meldung-warning { background: #fff8e8; border: 1px solid #f0d9a0; color: #6d4c00; }
.meldung-info    { background: #eef2f7; border: 1px solid #c5d2e2; color: #3a4c63; }

.hinweis-liste { font-size: 0.9rem; color: var(--farbe-warnung); }

/* ------------------------------------------------------------------ Tabellen */

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--farbe-flaeche);
    font-variant-numeric: tabular-nums;   /* Ziffern stehen spaltengerecht */
}
th, td {
    text-align: left;
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid var(--farbe-rand);
}
th {
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--farbe-leise);
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--farbe-grund); }
/* Links und link-artige Knoepfe in Tabellen sollen gleich aussehen - sonst
   wirken "Ändern" (Link) und "Zurückziehen" (Formular-Knopf) wie zwei
   verschiedene Arten von Bedienelement, obwohl sie dasselbe tun. */
table a { color: var(--farbe-akzent); text-decoration: none; }
table a:hover { text-decoration: underline; }
td .link-button { font-size: inherit; }

/* ----------------------------------------------------------------- Formulare */

form p { margin: 0 0 1.1rem; }
label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.35rem; color: var(--farbe-haupt); }

.helptext {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.84rem;
    color: var(--farbe-leise);
}

.errorlist { list-style: none; margin: 0.35rem 0; padding: 0; }
.errorlist li {
    display: block;
    background: #fbeeec;
    border: 1px solid #e8b9b3;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.3rem;
    color: #92201a;
    font-weight: 600;
    font-size: 0.88rem;
}

input[type=text], input[type=password], input[type=date],
input[type=number], input[type=email], select, textarea {
    width: 100%;
    max-width: 340px;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--farbe-rand-stark);
    border-radius: 8px;
    font: inherit;
    background: var(--farbe-flaeche);
    color: var(--farbe-text);
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--farbe-akzent);
    box-shadow: 0 0 0 3px var(--farbe-akzent-hell);
}
input[type=checkbox] { width: auto; margin: 0; flex: none; }

/* Zwei zusammengehoerende Felder nebeneinander (z. B. "Von" und "Bis").
   Auf schmalen Bildschirmen rutschen sie automatisch untereinander. */
.feldpaar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.4rem 1.5rem;
    margin-bottom: 0.85rem;
}
.feld { margin-bottom: 0; }
/* In einem Paar duerfen die Felder die volle Spaltenbreite nutzen - sonst
   bliebe rechts daneben Platz ungenutzt (betrifft vor allem die Anmerkung). */
.feldpaar .feld input, .feldpaar .feld select, .feldpaar .feld textarea { max-width: none; }

/* Ein einzelnes Ankreuzfeld: Kaestchen neben den Text statt darunter. */
.feld-ankreuz {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.65rem;
}
.feld-ankreuz label { margin-bottom: 0; font-weight: 500; }

/* Ankreuzfelder in Formularen, die Django selbst ausgibt. Dort steht die
   Beschriftung vor dem Feld; die umgekehrte Reihenfolge stellt sie
   nebeneinander, ohne jedes Formular einzeln anzufassen. */
form p:has(> input[type=checkbox]) {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    gap: 0.55rem;
}
form p:has(> input[type=checkbox]) label { margin-bottom: 0; font-weight: 500; }

/* ------------------------------------------------------------------- Knoepfe */

.knopf {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    border: 1px solid transparent;
    background: var(--farbe-akzent);
    color: #fff;
    font: inherit;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    text-decoration: none;
    box-shadow: var(--schatten-ruhe);
}
.knopf:hover { filter: brightness(1.08); }
.knopf:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--farbe-akzent-hell); }
.knopf-ablehnen { background: var(--farbe-fehler); }
.knopf-sekundaer {
    background: var(--farbe-flaeche);
    color: var(--farbe-haupt);
    border-color: var(--farbe-rand-stark);
    box-shadow: none;
}
.knopf-sekundaer:hover { background: var(--farbe-grund); filter: none; }

.aktionen { display: flex; gap: 0.75rem; margin-top: 1.25rem; flex-wrap: wrap; }

/* -------------------------------------------------------------------- Status */

.status {
    display: inline-block;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}
.status-vertretung_ausstehend { background: #eaecf7; color: #3949ab; }
.status-offen { background: #fff4e0; color: var(--farbe-warnung); }
.status-genehmigt { background: #ecf6f0; color: var(--farbe-erfolg); }
.status-abgelehnt { background: #fbeeec; color: var(--farbe-fehler); }
.status-storniert { background: #eceff1; color: var(--farbe-gedaempft); }

/* Vermerk hinter dem Namen der Vertretung: bestaetigt / noch ausstehend */
.vertretung-vermerk {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}
.vertretung-bestaetigt { background: #ecf6f0; color: var(--farbe-erfolg); }
.vertretung-offen { background: #eaecf7; color: #3949ab; }

.filterleiste {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.filterleiste label { display: flex; flex-direction: column; gap: 0.3rem; }

/* --------------------------------------------------------- Portal: Kacheln */

.kacheln {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 1.25rem;
}

.kachel {
    position: relative;
    display: block;
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--rundung);
    padding: 1.6rem 1.7rem 1.5rem;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--schatten-ruhe);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.kachel::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 1.7rem;
    right: 1.7rem;
    height: 2px;
    background: var(--farbe-akzent);
    opacity: 0;
    transition: opacity 0.18s ease;
}
.kachel:hover {
    transform: translateY(-3px);
    border-color: var(--farbe-rand-stark);
    box-shadow: var(--schatten-hoch);
}
.kachel:hover::before { opacity: 1; }
.kachel:focus-visible { outline: 2px solid var(--farbe-akzent); outline-offset: 3px; }

.kachel-symbol { display: block; color: var(--farbe-akzent); opacity: 0.85; margin-bottom: 1.05rem; }
.kachel-name {
    display: block;
    font-size: 1.08rem;
    font-weight: 650;
    letter-spacing: -0.012em;
    color: var(--farbe-haupt);
    margin-bottom: 0.3rem;
}
.kachel-beschreibung {
    display: block;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--farbe-gedaempft);
}
.kachel-pfeil {
    display: inline-block;
    margin-top: 1.05rem;
    color: var(--farbe-akzent);
    font-size: 0.86rem;
    font-weight: 600;
    transition: transform 0.18s ease;
}
.kachel:hover .kachel-pfeil { transform: translateX(4px); }

/* Kachel, die nur die Kanzleileitung aufgrund ihrer Rechte sieht */
.kachel-verwaltung .kachel-symbol { color: var(--farbe-warnung); }
.kachel-vermerk {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin-top: 1.05rem;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--farbe-rand);
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--farbe-warnung);
}
.kachel-vermerk svg { flex: none; margin-top: 0.15rem; }

/* --------------------------------------------------------------- Schmale Geraete */

@media (max-width: 640px) {
    .kopf-inner { padding: 0.85rem 1rem; }
    .inhalt { padding: 1.75rem 1rem 3rem; }
    h1 { font-size: 1.6rem; }
    .kacheln { grid-template-columns: 1fr; }
    .person-menue { right: auto; left: 0; }
    /* Tabellen duerfen seitlich rollen statt die Seite breit zu machen */
    .tabelle-rollbar { overflow-x: auto; }
}

/* --------------------------------------------------- Urlaubsplaner (Anzeige) */

.planer-titel { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; }
.planer-einleitung { color: var(--farbe-gedaempft); font-size: 0.85rem; font-weight: 400; }

.planer-leiste {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.planer-monate { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.planer-monat {
    font: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--farbe-rand);
    border-radius: 999px;
    background: var(--farbe-flaeche);
    color: var(--farbe-gedaempft);
    cursor: pointer;
}
.planer-monat:hover { background: var(--farbe-grund); }
.planer-monat.aktiv {
    background: var(--farbe-akzent-hell);
    border-color: var(--farbe-akzent);
    color: var(--farbe-akzent);
}

.planer-legende {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.8rem;
    color: var(--farbe-gedaempft);
}
.planer-legende span { display: inline-flex; align-items: center; gap: 0.35rem; }
.planer-punkt { width: 13px; height: 13px; border-radius: 3px; display: inline-block; }
.planer-punkt.planer-genehmigt { background: #6aa88a; }
.planer-punkt.planer-beantragt { background: #e5c07a; }
.planer-punkt.planer-frei { background: #ece7e0; }

.versteckt { display: none; }

/* Waagerecht rollbar: 31 Tagesspalten passen auf keinen schmalen Bildschirm.
   Die Seite selbst soll deswegen aber nicht breit werden. */
.planer-rollbereich { overflow-x: auto; padding-bottom: 0.35rem; }

.planer-tabelle {
    border-collapse: separate;
    border-spacing: 2px;
    width: auto;
    background: none;
}

.planer-tabelle th, .planer-tabelle td { border: none; padding: 0; }

.planer-namensspalte {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--farbe-flaeche);
    text-align: left;
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--farbe-text);
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
    padding-right: 0.85rem;
    min-width: 9rem;
}
.planer-namensspalte small { color: var(--farbe-leise); }

.planer-tagkopf {
    width: 20px;
    min-width: 20px;
    text-align: center;
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--farbe-leise);
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.15;
    padding-bottom: 0.35rem;
}
.planer-wochentag { display: block; font-weight: 400; opacity: 0.75; }
.planer-tagzahl { display: block; }
.planer-frei-kopf { color: #b8b1a9; }
.planer-heute { color: var(--farbe-akzent); }

.planer-zelle {
    width: 20px;
    min-width: 20px;
    height: 20px;
    border-radius: 3px;
    background: #f6f3ef;
}
.planer-zelle.planer-frei { background: #ece7e0; }
.planer-zelle.planer-genehmigt { background: #6aa88a; }
.planer-zelle.planer-beantragt { background: #e5c07a; }
/* Urlaub gewinnt optisch gegen den freien Tag - sonst verschwaende ein
   Brueckentag zwischen zwei Feiertagen in der Darstellung. */
.planer-zelle.planer-frei.planer-genehmigt { background: #6aa88a; }
.planer-zelle.planer-frei.planer-beantragt { background: #e5c07a; }

.planer-eigene-zeile .planer-namensspalte { font-weight: 700; color: var(--farbe-akzent); }
.planer-leer { padding: 0.75rem 0; color: var(--farbe-gedaempft); }