/* ==========================================================================
   HOSCH-Agent - Oberflaeche im Design der HOSCH GRUPPE
   Hausfarben: Dunkelblau #000080, Rot #E30613, Schwarz, Weiss
   ========================================================================== */

:root {
    --hosch-blau:        #000080;
    --hosch-blau-hell:   #1a1a9e;
    --hosch-blau-dunkel: #00005c;
    --hosch-rot:         #e30613;
    --hosch-rot-dunkel:  #b00410;

    --grund:        #f2f4f8;
    --flaeche:      #ffffff;
    --flaeche-alt:  #f7f9fc;
    --rand:         #dde3ec;
    --rand-stark:   #c3ccdb;

    --text:         #1b2434;
    --text-leise:   #5a677d;
    --text-invers:  #ffffff;

    --erfolg:       #1b7a43;
    --erfolg-hg:    #e6f4ec;
    --warnung:      #a86200;
    --warnung-hg:   #fdf3e2;
    --fehler:       #c2131f;
    --fehler-hg:    #fdecec;
    --info:         #0b5fa5;
    --info-hg:      #e8f1fa;

    --radius:       6px;
    --radius-gross: 10px;
    --schatten:     0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .10);
    --schatten-gross: 0 4px 6px -1px rgba(16, 24, 40, .08), 0 10px 20px -6px rgba(16, 24, 40, .14);

    --kopf-hoehe:   58px;
    --menue-breite: 246px;

    --schrift: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --schrift-mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font-family: var(--schrift);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    background: var(--grund);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--hosch-blau); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Inline-Symbole: ohne feste Groesse wuerden sie den Platz vollstaendig
   ausfuellen, da die SVG selbst keine Breite mitbringt. */
svg.icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    display: inline-block;
    vertical-align: -.18em;
}
.meldung svg.icon      { width: 20px; height: 20px; margin-top: .1rem; }
.knopf svg.icon        { width: 16px; height: 16px; }
.knopf.klein svg.icon  { width: 14px; height: 14px; }
.karte-kopf svg.icon   { width: 17px; height: 17px; color: var(--hosch-blau); }
.kopf-marke svg.icon,
.kopf-benutzer svg.icon,
.kopf-mandant svg.icon { width: 16px; height: 16px; }
.leer-hinweis svg.icon { width: 22px; height: 22px; }

h1, h2, h3, h4 { margin: 0 0 .6rem; font-weight: 600; line-height: 1.25; color: var(--text); }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }

p { margin: 0 0 .8rem; }

/* ==========================================================================
   Anmeldung / Mandantenauswahl
   ========================================================================== */

.anmelde-seite {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    padding: 2rem 1rem;
    background:
        radial-gradient(1200px 600px at 15% -10%, rgba(227, 6, 19, .12), transparent 60%),
        radial-gradient(900px 500px at 110% 110%, rgba(0, 0, 128, .18), transparent 60%),
        var(--grund);
}

.anmelde-karte {
    width: 100%;
    max-width: 430px;
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius-gross);
    box-shadow: var(--schatten-gross);
    overflow: hidden;
}

.anmelde-kopf {
    padding: 1.8rem 2rem 1.4rem;
    text-align: center;
    border-bottom: 3px solid var(--hosch-rot);
}

.anmelde-kopf .logo { max-width: 230px; height: auto; margin: 0 auto .9rem; display: block; }
.anmelde-kopf h1 { font-size: 1.2rem; margin-bottom: .15rem; letter-spacing: .01em; }
.anmelde-kopf p  { color: var(--text-leise); font-size: .82rem; margin: 0; }

.anmelde-koerper { padding: 1.6rem 2rem 1.9rem; }
.anmelde-fuss {
    padding: .9rem 2rem;
    background: var(--flaeche-alt);
    border-top: 1px solid var(--rand);
    font-size: .78rem;
    color: var(--text-leise);
    text-align: center;
}

/* Wortmarke als Textfallback, falls kein Logo hinterlegt ist */
.wortmarke { font-weight: 800; letter-spacing: .06em; font-size: 1.7rem; line-height: 1; }
.wortmarke .ho { color: var(--hosch-rot); }
.wortmarke .sch { color: var(--hosch-blau); }
.wortmarke-zusatz {
    display: block;
    font-size: .68rem;
    letter-spacing: .42em;
    color: var(--text);
    font-weight: 600;
    margin-top: .3rem;
}

/* ==========================================================================
   Grundgeruest
   ========================================================================== */

.rahmen { min-height: 100vh; }

.kopfleiste {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--kopf-hoehe);
    background: var(--hosch-blau);
    color: var(--text-invers);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1rem;
    z-index: 40;
    border-bottom: 3px solid var(--hosch-rot);
}

.kopf-marke {
    display: flex;
    align-items: center;
    gap: .65rem;
    color: #fff;
    font-weight: 700;
    letter-spacing: .02em;
    min-width: calc(var(--menue-breite) - 1rem);
}
.kopf-marke:hover { text-decoration: none; }
.kopf-marke img { height: 26px; width: auto; display: block; }

.kopf-mandant {
    display: flex;
    align-items: center;
    gap: .55rem;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--radius);
    padding: .3rem .7rem;
    color: #fff;
    font-size: .85rem;
}
.kopf-mandant:hover { background: rgba(255, 255, 255, .18); text-decoration: none; }
.kopf-mandant .nummer {
    font-family: var(--schrift-mono);
    font-size: .78rem;
    background: rgba(0, 0, 0, .25);
    padding: .1rem .4rem;
    border-radius: 3px;
}
.kopf-mandant .punkt { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: .5rem; }

.kopf-benutzer {
    display: flex; align-items: center; gap: .5rem;
    color: #fff; font-size: .85rem;
    padding: .3rem .5rem; border-radius: var(--radius);
}
.kopf-benutzer:hover { background: rgba(255,255,255,.12); text-decoration: none; }

.avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--hosch-rot);
    display: grid; place-items: center;
    font-size: .75rem; font-weight: 700; color: #fff;
}

/* Seitenmenue */
.seitenmenue {
    position: fixed;
    top: var(--kopf-hoehe); bottom: 0; left: 0;
    width: var(--menue-breite);
    background: var(--flaeche);
    border-right: 1px solid var(--rand);
    overflow-y: auto;
    padding: .8rem 0 2rem;
    z-index: 30;
}

.menue-gruppe { margin-bottom: .9rem; }
.menue-titel {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--text-leise);
    font-weight: 700;
    padding: .45rem 1.1rem .35rem;
}

.menue-eintrag {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem 1.1rem;
    color: var(--text);
    font-size: .875rem;
    border-left: 3px solid transparent;
}
.menue-eintrag:hover { background: var(--flaeche-alt); text-decoration: none; }
.menue-eintrag.aktiv {
    background: var(--flaeche-alt);
    border-left-color: var(--hosch-rot);
    color: var(--hosch-blau);
    font-weight: 600;
}
.menue-eintrag .icon { width: 18px; height: 18px; flex: 0 0 18px; opacity: .75; }
.menue-eintrag.aktiv .icon { opacity: 1; }

.inhalt {
    margin-left: var(--menue-breite);
    padding: calc(var(--kopf-hoehe) + 1.2rem) 1.5rem 3rem;
    min-height: 100vh;
}

.seitenkopf {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.1rem;
}
.seitenkopf .titelblock { flex: 1 1 320px; min-width: 0; }
.seitenkopf h1 { margin-bottom: .15rem; }
.seitenkopf .untertitel { color: var(--text-leise); font-size: .87rem; margin: 0; }
.seitenkopf .aktionen { display: flex; gap: .5rem; flex-wrap: wrap; }

.brotkrumen { font-size: .8rem; color: var(--text-leise); margin-bottom: .35rem; }
.brotkrumen a { color: var(--text-leise); }
.brotkrumen span::after { content: "›"; margin: 0 .4rem; opacity: .6; }
.brotkrumen span:last-child::after { content: ""; }

/* ==========================================================================
   Karten und Raster
   ========================================================================== */

.karte {
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
    margin-bottom: 1.1rem;
}
.karte-kopf {
    padding: .8rem 1.1rem;
    border-bottom: 1px solid var(--rand);
    display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
}
.karte-kopf h2, .karte-kopf h3 { margin: 0; font-size: .98rem; }
.karte-kopf .rechts { margin-left: auto; display: flex; gap: .5rem; align-items: center; }
.karte-koerper { padding: 1.1rem; }
.karte-koerper.eng { padding: 0; }
.karte-fuss {
    padding: .7rem 1.1rem;
    border-top: 1px solid var(--rand);
    background: var(--flaeche-alt);
    display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
}

.raster { display: grid; gap: 1rem; }
.raster-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.raster-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.raster-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* Kennzahlen */
.kennzahl {
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-left: 4px solid var(--hosch-blau);
    border-radius: var(--radius);
    padding: .9rem 1.05rem;
    box-shadow: var(--schatten);
}
.kennzahl.rot    { border-left-color: var(--hosch-rot); }
.kennzahl.gruen  { border-left-color: var(--erfolg); }
.kennzahl.gelb   { border-left-color: var(--warnung); }
.kennzahl .label { font-size: .75rem; color: var(--text-leise); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.kennzahl .wert  { font-size: 1.6rem; font-weight: 700; line-height: 1.15; margin: .2rem 0 .1rem; font-variant-numeric: tabular-nums; }
.kennzahl .zusatz{ font-size: .78rem; color: var(--text-leise); }

/* Mandantenkacheln im Gruppen-Dashboard */
.firmenkachel {
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
    overflow: hidden;
    display: flex; flex-direction: column;
}
.firmenkachel .balken { height: 5px; background: var(--hosch-blau); }
.firmenkachel .kopf { padding: .9rem 1.1rem .5rem; }
.firmenkachel .kopf .nr {
    font-family: var(--schrift-mono); font-size: .75rem; color: var(--text-leise);
    background: var(--flaeche-alt); border: 1px solid var(--rand);
    padding: .05rem .35rem; border-radius: 3px;
}
.firmenkachel .kopf h3 { margin: .35rem 0 0; font-size: 1.02rem; }
.firmenkachel .werte { padding: .3rem 1.1rem 1rem; display: grid; grid-template-columns: 1fr 1fr; gap: .55rem .8rem; }
.firmenkachel .werte div span { display: block; font-size: .72rem; color: var(--text-leise); }
.firmenkachel .werte div b { font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.firmenkachel .fuss { margin-top: auto; padding: .65rem 1.1rem; border-top: 1px solid var(--rand); background: var(--flaeche-alt); }

/* ==========================================================================
   Tabellen
   ========================================================================== */

.tabelle-huelle { overflow-x: auto; }

table.liste {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}
table.liste thead th {
    text-align: left;
    padding: .6rem .75rem;
    background: var(--flaeche-alt);
    border-bottom: 1px solid var(--rand-stark);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-leise);
    font-weight: 700;
    white-space: nowrap;
}
table.liste thead th a { color: inherit; display: inline-flex; align-items: center; gap: .25rem; }
table.liste tbody td {
    padding: .55rem .75rem;
    border-bottom: 1px solid var(--rand);
    vertical-align: top;
}
table.liste tbody tr:hover { background: var(--flaeche-alt); }
table.liste tbody tr:last-child td { border-bottom: none; }
/* Im Belegverlauf der Beleg, auf dem man gerade steht */
table.liste tbody tr.hervorgehoben td {
    background: var(--flaeche-alt);
    box-shadow: inset 3px 0 0 var(--hosch-blau);
}
table.liste .rechts, table.liste th.rechts { text-align: right; font-variant-numeric: tabular-nums; }
table.liste .mitte, table.liste th.mitte { text-align: center; }
table.liste .aktionen { white-space: nowrap; text-align: right; width: 1%; }
table.liste td.nummer { font-family: var(--schrift-mono); font-size: .82rem; white-space: nowrap; }

.leer-hinweis {
    padding: 2.4rem 1rem;
    text-align: center;
    color: var(--text-leise);
}
.leer-hinweis .gross { font-size: 1.02rem; color: var(--text); margin-bottom: .3rem; font-weight: 600; }

/* ==========================================================================
   Formulare
   ========================================================================== */

.feldreihe { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.feld { margin-bottom: .9rem; }
.feld.voll { grid-column: 1 / -1; }

.feld label, .feld .label {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    margin-bottom: .28rem;
    color: var(--text);
}
.feld label .pflicht { color: var(--hosch-rot); margin-left: .15rem; }
.feld .hinweis { font-size: .76rem; color: var(--text-leise); margin-top: .25rem; }
.feld .fehlertext { font-size: .78rem; color: var(--fehler); margin-top: .25rem; }

input[type=text], input[type=password], input[type=email], input[type=number],
input[type=date], input[type=time], input[type=datetime-local], input[type=search],
input[type=tel], input[type=url], select, textarea {
    width: 100%;
    padding: .45rem .6rem;
    font: inherit;
    font-size: .875rem;
    color: var(--text);
    background: var(--flaeche);
    border: 1px solid var(--rand-stark);
    border-radius: var(--radius);
    transition: border-color .12s, box-shadow .12s;
}
textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
select { appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%235a677d' d='M4.5 6.5 8 10l3.5-3.5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .45rem center; padding-right: 1.7rem; }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--hosch-blau);
    box-shadow: 0 0 0 3px rgba(0, 0, 128, .12);
}
input:disabled, select:disabled, textarea:disabled,
input[readonly], textarea[readonly] { background: var(--flaeche-alt); color: var(--text-leise); }

input.fehlerhaft, select.fehlerhaft, textarea.fehlerhaft { border-color: var(--fehler); }
input.fehlerhaft:focus { box-shadow: 0 0 0 3px rgba(194, 19, 31, .12); }

.mono { font-family: var(--schrift-mono); }
.zahl-eingabe { text-align: right; font-variant-numeric: tabular-nums; }

.schalter { display: flex; align-items: center; gap: .5rem; font-size: .875rem; cursor: pointer; }
.schalter input[type=checkbox], .schalter input[type=radio] { width: 16px; height: 16px; accent-color: var(--hosch-blau); margin: 0; }

fieldset {
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    padding: 1rem 1.1rem .3rem;
    margin: 0 0 1.1rem;
}
fieldset legend { font-size: .82rem; font-weight: 700; color: var(--hosch-blau); padding: 0 .4rem; text-transform: uppercase; letter-spacing: .05em; }

/* ==========================================================================
   Schaltflaechen
   ========================================================================== */

.knopf {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .9rem;
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.35;
    border-radius: var(--radius);
    border: 1px solid transparent;
    cursor: pointer;
    background: var(--flaeche);
    color: var(--text);
    border-color: var(--rand-stark);
    white-space: nowrap;
    transition: background .12s, border-color .12s, color .12s;
}
.knopf:hover { text-decoration: none; background: var(--flaeche-alt); }
.knopf:focus-visible { outline: 2px solid var(--hosch-blau); outline-offset: 2px; }

.knopf.haupt { background: var(--hosch-blau); border-color: var(--hosch-blau); color: #fff; }
.knopf.haupt:hover { background: var(--hosch-blau-hell); border-color: var(--hosch-blau-hell); }

.knopf.rot { background: var(--hosch-rot); border-color: var(--hosch-rot); color: #fff; }
.knopf.rot:hover { background: var(--hosch-rot-dunkel); border-color: var(--hosch-rot-dunkel); }

.knopf.gefahr { color: var(--fehler); border-color: #f0bcc0; background: #fff; }
.knopf.gefahr:hover { background: var(--fehler-hg); }

.knopf.klein { padding: .25rem .55rem; font-size: .78rem; }
.knopf.gross { padding: .6rem 1.2rem; font-size: .95rem; }
.knopf.voll  { width: 100%; justify-content: center; }
.knopf:disabled, .knopf.gesperrt { opacity: .55; cursor: not-allowed; }

.knopfleiste { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.knopfleiste .abstand { margin-left: auto; }

/* ==========================================================================
   Meldungen, Marken, Fortschritt
   ========================================================================== */

.meldung {
    display: flex;
    gap: .65rem;
    padding: .7rem .95rem;
    border: 1px solid;
    border-radius: var(--radius);
    margin-bottom: .8rem;
    font-size: .875rem;
}
.meldung.erfolg  { background: var(--erfolg-hg);  border-color: #b7ddc7; color: #14532d; }
.meldung.warnung { background: var(--warnung-hg); border-color: #f0d4a3; color: #7a4700; }
.meldung.fehler  { background: var(--fehler-hg);  border-color: #f2c0c4; color: #8f1017; }
.meldung.info    { background: var(--info-hg);    border-color: #b9d6ef; color: #0a4d85; }

.marke {
    display: inline-block;
    padding: .12rem .5rem;
    border-radius: 999px;
    font-size: .73rem;
    font-weight: 700;
    letter-spacing: .02em;
    border: 1px solid;
    white-space: nowrap;
}
.marke.grau   { background: #eef1f6; border-color: #d7dee9; color: #47536b; }
.marke.blau   { background: var(--info-hg);    border-color: #b9d6ef; color: #0a4d85; }
.marke.gruen  { background: var(--erfolg-hg);  border-color: #b7ddc7; color: #14532d; }
.marke.gelb   { background: var(--warnung-hg); border-color: #f0d4a3; color: #7a4700; }
.marke.rot    { background: var(--fehler-hg);  border-color: #f2c0c4; color: #8f1017; }
.marke.navy   { background: #e4e4f3; border-color: #c2c2e4; color: #000080; }

.fortschritt { height: 6px; background: var(--rand); border-radius: 999px; overflow: hidden; }
.fortschritt > span { display: block; height: 100%; background: var(--hosch-blau); }
.fortschritt.warnung > span { background: var(--warnung); }
.fortschritt.fehler  > span { background: var(--hosch-rot); }

/* Blaetterung */
.blaetterung {
    display: flex; align-items: center; gap: .35rem; flex-wrap: wrap;
    font-size: .82rem;
}
.blaetterung .seite {
    padding: .3rem .6rem; border: 1px solid var(--rand-stark);
    border-radius: var(--radius); color: var(--text); background: var(--flaeche);
}
.blaetterung .seite:hover { background: var(--flaeche-alt); text-decoration: none; }
.blaetterung .seite.aktiv { background: var(--hosch-blau); border-color: var(--hosch-blau); color: #fff; }
.blaetterung .info { color: var(--text-leise); margin-right: auto; }

/* Filterleiste */
.filterleiste {
    display: flex; gap: .55rem; flex-wrap: wrap; align-items: flex-end;
    padding: .8rem 1.1rem;
    border-bottom: 1px solid var(--rand);
    background: var(--flaeche-alt);
}
.filterleiste .feld { margin-bottom: 0; min-width: 160px; }
.filterleiste .suche { flex: 1 1 260px; }

/* Detailliste (Schluessel/Wert) */
.dl { display: grid; grid-template-columns: minmax(140px, 200px) 1fr; gap: .35rem 1rem; font-size: .875rem; }
.dl dt { color: var(--text-leise); }
.dl dd { margin: 0; }
.dl dd.leer { color: var(--rand-stark); }

/* Reiter */
.reiter { display: flex; gap: .2rem; border-bottom: 1px solid var(--rand); margin-bottom: 1.1rem; flex-wrap: wrap; }
.reiter a {
    padding: .55rem .95rem;
    color: var(--text-leise);
    font-size: .875rem; font-weight: 600;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
}
.reiter a:hover { color: var(--text); text-decoration: none; }
.reiter a.aktiv { color: var(--hosch-blau); border-bottom-color: var(--hosch-rot); }

/* ==========================================================================
   Schliessplan-Matrix
   ========================================================================== */

.plan-huelle { overflow: auto; max-height: 72vh; border: 1px solid var(--rand); border-radius: var(--radius); }

table.schliessplan { border-collapse: separate; border-spacing: 0; font-size: .82rem; }
table.schliessplan th, table.schliessplan td {
    border-right: 1px solid var(--rand);
    border-bottom: 1px solid var(--rand);
    padding: .35rem .5rem;
    background: var(--flaeche);
}
table.schliessplan thead th {
    position: sticky; top: 0; z-index: 3;
    background: var(--flaeche-alt);
    font-size: .72rem; text-align: center;
    vertical-align: bottom;
    min-width: 46px;
}
table.schliessplan thead th.ecke {
    position: sticky; left: 0; top: 0; z-index: 5;
    text-align: left; min-width: 260px;
}
table.schliessplan tbody th.zeile {
    position: sticky; left: 0; z-index: 2;
    background: var(--flaeche);
    text-align: left; font-weight: 500; min-width: 260px;
}
table.schliessplan tbody tr:hover th.zeile,
table.schliessplan tbody tr:hover td { background: #fbfcfe; }
table.schliessplan td.zelle { text-align: center; cursor: pointer; user-select: none; }
table.schliessplan td.zelle.gesetzt { background: rgba(0, 0, 128, .09); color: var(--hosch-blau); font-weight: 700; }
table.schliessplan td.zelle:hover { background: rgba(227, 6, 19, .09); }
table.schliessplan .kennung { font-family: var(--schrift-mono); font-weight: 700; }
table.schliessplan .senkrecht {
    writing-mode: vertical-rl; transform: rotate(180deg);
    white-space: nowrap; max-height: 130px; margin: 0 auto;
}

/* ==========================================================================
   Stempeluhr
   ========================================================================== */

.stempel-uhr {
    font-size: 3.2rem; font-weight: 300; font-variant-numeric: tabular-nums;
    letter-spacing: .02em; text-align: center; color: var(--hosch-blau);
    line-height: 1.1;
}
.stempel-datum { text-align: center; color: var(--text-leise); margin-bottom: 1.2rem; }
.stempel-knoepfe { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; }
.stempel-knoepfe .knopf { justify-content: center; padding: 1rem .8rem; font-size: 1rem; }
.stempel-status {
    text-align: center; padding: .8rem; border-radius: var(--radius);
    background: var(--flaeche-alt); border: 1px solid var(--rand); margin-bottom: 1rem;
}

/* ==========================================================================
   Dienstplan
   ========================================================================== */

.plan-woche { display: grid; grid-template-columns: 190px repeat(7, minmax(120px, 1fr)); border: 1px solid var(--rand); border-radius: var(--radius); overflow: hidden; }
.plan-woche > div { border-right: 1px solid var(--rand); border-bottom: 1px solid var(--rand); padding: .45rem .55rem; min-height: 54px; background: var(--flaeche); }
.plan-woche .kopfzelle { background: var(--flaeche-alt); font-weight: 700; font-size: .78rem; text-align: center; min-height: 0; }
.plan-woche .kopfzelle.heute { background: rgba(0,0,128,.08); color: var(--hosch-blau); }
.plan-woche .namenszelle { background: var(--flaeche-alt); font-size: .82rem; font-weight: 600; }
.plan-woche .wochenende { background: #fafbfd; }

.schicht {
    display: block;
    font-size: .74rem;
    background: rgba(0, 0, 128, .07);
    border-left: 3px solid var(--hosch-blau);
    border-radius: 3px;
    padding: .2rem .35rem;
    margin-bottom: .2rem;
    color: var(--text);
}
.schicht:hover { text-decoration: none; background: rgba(0, 0, 128, .13); }
.schicht.offen { background: var(--fehler-hg); border-left-color: var(--hosch-rot); }
.schicht.erledigt { background: var(--erfolg-hg); border-left-color: var(--erfolg); }
.schicht b { display: block; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Positionstabellen (Angebote, Kalkulation)
   ========================================================================== */

/* Mindestbreite, damit die Eingabefelder bei vielen Spalten nicht gestaucht
   werden - die Huelle (.tabelle-huelle) scrollt dann waagerecht. */
table.positionen { width: 100%; min-width: 880px; border-collapse: collapse; font-size: .84rem; }
table.positionen.breit { min-width: 1240px; }
table.liste.breit      { min-width: 1180px; }
table.positionen th {
    background: var(--flaeche-alt); text-align: left; padding: .45rem .5rem;
    border-bottom: 1px solid var(--rand-stark); font-size: .72rem; text-transform: uppercase;
    letter-spacing: .04em; color: var(--text-leise);
}
table.positionen td { padding: .3rem .5rem; border-bottom: 1px solid var(--rand); vertical-align: middle; }
table.positionen input, table.positionen select, table.positionen textarea { padding: .3rem .4rem; font-size: .82rem; }
table.positionen tr.typ-titel td { background: #eef1f8; font-weight: 700; }
table.positionen tr.typ-zwischensumme td { background: var(--flaeche-alt); font-weight: 600; }
table.positionen .griff { cursor: grab; color: var(--rand-stark); text-align: center; }

.summenblock { margin-left: auto; max-width: 360px; font-size: .9rem; }
.summenblock .zeile { display: flex; justify-content: space-between; padding: .3rem 0; }
.summenblock .zeile.gesamt {
    border-top: 2px solid var(--hosch-blau); margin-top: .35rem; padding-top: .5rem;
    font-size: 1.05rem; font-weight: 700;
}
.summenblock .wert { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Hilfsklassen
   ========================================================================== */

.leise { color: var(--text-leise); }
.klein { font-size: .8rem; }
.fett  { font-weight: 700; }
.rechts { text-align: right; }
.mitte { text-align: center; }
.nowrap { white-space: nowrap; }
.abstand-oben { margin-top: 1rem; }
.abstand-unten { margin-bottom: 1rem; }
.kein-abstand { margin: 0; }
.verstecken { display: none !important; }
.trenner { height: 1px; background: var(--rand); border: 0; margin: 1.1rem 0; }

/* ==========================================================================
   Kleinere Bildschirme
   ========================================================================== */

@media (max-width: 900px) {
    :root { --menue-breite: 0px; }
    .seitenmenue {
        transform: translateX(-100%);
        transition: transform .18s ease;
        width: 250px;
        box-shadow: var(--schatten-gross);
    }
    .seitenmenue.offen { transform: translateX(0); }
    .inhalt { margin-left: 0; padding-left: 1rem; padding-right: 1rem; }
    .kopf-marke { min-width: 0; }
    .menue-schalter { display: inline-flex !important; }
}

.menue-schalter {
    display: none;
    background: transparent; border: 1px solid rgba(255,255,255,.3);
    color: #fff; border-radius: var(--radius); padding: .3rem .5rem; cursor: pointer;
}

/* ==========================================================================
   Druck
   ========================================================================== */

@media print {
    .kopfleiste, .seitenmenue, .seitenkopf .aktionen, .filterleiste,
    .blaetterung, .karte-fuss, .knopf, .reiter { display: none !important; }
    body { background: #fff; font-size: 11pt; }
    .inhalt { margin: 0; padding: 0; }
    .karte { border: none; box-shadow: none; margin: 0 0 .6cm; }
    .karte-kopf { border-bottom: 1px solid #000; padding-left: 0; }
    .karte-koerper { padding: 0; }
    table.liste thead th { background: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    table.schliessplan td.zelle.gesetzt { background: #ddd !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .plan-huelle { max-height: none; overflow: visible; }
    a { color: #000; text-decoration: none; }
}

/* --- Passwortmanager: Gruppenbaum links, Eintraege rechts --------------- */
.pw-fenster {
    display: grid;
    grid-template-columns: 17rem 1fr;
    gap: 1rem;
    align-items: start;
}
@media (max-width: 900px) {
    .pw-fenster { grid-template-columns: 1fr; }
}
.pw-baum { position: sticky; top: 1rem; }
.pw-baumliste { list-style: none; margin: 0; padding: .4rem 0; }
.pw-baumliste li { margin: 0; }
.pw-baum-name {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .6rem;
    border-radius: var(--radius);
    color: var(--text);
    text-decoration: none;
    font-size: .92rem;
}
a.pw-baum-name:hover { background: var(--flaeche-alt); }
.pw-baumliste li.aktiv > .pw-baum-name {
    background: var(--flaeche-alt);
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--hosch-blau);
}
.pw-baumliste li.gesperrt .pw-baum-name { cursor: default; }
.pw-baum-zahl {
    margin-left: auto;
    font-size: .78rem;
    color: var(--text-leise);
    font-variant-numeric: tabular-nums;
}
.pw-feld { display: flex; align-items: center; gap: .3rem; }
.pw-anzeige { flex: 1; word-break: break-all; font-size: .86rem; }

/* Zeilen mit Befund in den Rundgangtabellen.
   Nicht erfasst ist etwas anderes als ein Mangel: das eine ist eine
   Lücke im Nachweis, das andere ein Befund. Beides fällt auf, aber
   nicht in derselben Farbe. */
table.liste tbody tr.zeile-mangel td { background: #fbeaea; }
table.liste tbody tr.zeile-mangel:hover td { background: #f7dcdc; }
table.liste tbody tr.zeile-fehlt td { background: #fdf3e3; }
table.liste tbody tr.zeile-fehlt:hover td { background: #fbe9cd; }

/* Pfeile in der Spalte "Reihe" der Kontrollpunkte.
   Klein und dicht an der Nummer, damit die Tabelle nicht auseinanderlaeuft.
   Die Knoepfe schicken dasselbe Formular ab, nur an eine andere Adresse. */
.punkt-pfeile { display: inline-flex; flex-direction: column; gap: 2px; vertical-align: middle; }
.punkt-pfeile .knopf { padding: 1px 4px; line-height: 1; }
.punkt-pfeile .knopf svg.icon { width: 12px; height: 12px; }
table.positionen td.nowrap .zahl-eingabe { width: 3.4rem; }

/* ---------------------------------------------------------------------------
   Zeilen, die eine Handlung verlangen

   Ein offener Pflichtpunkt der Baustellencheckliste und ein abgelaufener
   Qualifikationsnachweis sind dasselbe: die eine Zeile, die zaehlt.
   Der Farbe allein darf man nicht trauen - deshalb steht in der Zeile
   zusaetzlich die Marke ("Pflicht", "abgelaufen") im Klartext.
--------------------------------------------------------------------------- */
tr.pflicht-offen { background: var(--fehler-hg); }
tr.pflicht-offen > td:first-child { box-shadow: inset 3px 0 0 var(--hosch-rot); }
table.checkliste td input[type=text] { width: 100%; }
table.checkliste input[type=checkbox] { width: 1.1rem; height: 1.1rem; }

/* ---------------------------------------------------------------------------
   Klappbare Karten und die Notizen je Tag

   Der Kartenkopf wird zum Klappgriff: <details class="klapp"> mit einem
   <summary class="karte-kopf">. Der Haken liegt rechts aussen, damit die
   Ueberschrift dort anfaengt, wo sie auch in einer festen Karte anfaengt -
   zugeklappt und aufgeklappt soll dieselbe Zeile stehen.
--------------------------------------------------------------------------- */
details.klapp > summary {
    cursor: pointer;
    list-style: none;
    position: relative;
    padding-right: 2.4rem;
}
details.klapp > summary::-webkit-details-marker { display: none; }
details.klapp > summary::after {
    content: '';
    position: absolute;
    right: 1.1rem; top: 50%;
    width: .5rem; height: .5rem;
    border-right: 2px solid var(--text-leise);
    border-bottom: 2px solid var(--text-leise);
    transform: translateY(-70%) rotate(45deg);
    transition: transform .12s ease;
}
details.klapp[open] > summary::after { transform: translateY(-20%) rotate(225deg); }
details.klapp > summary:hover { background: var(--flaeche-alt); }
/* Zugeklappt traegt der Kopf keinen Trennstrich - darunter kommt nichts mehr */
details.klapp:not([open]) > summary.karte-kopf { border-bottom: 0; }

/* Ein Tag im Notizbuch: zugeklappt eine Zeile, aufgeklappt die Tabelle. */
details.notiztag {
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    margin-bottom: .6rem;
    overflow: hidden;
}
details.notiztag > summary {
    cursor: pointer;
    list-style: none;
    padding: .5rem .7rem;
    display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
    background: var(--flaeche-alt);
}
details.notiztag[open] > summary { border-bottom: 1px solid var(--rand); }
details.notiztag > summary::-webkit-details-marker { display: none; }
details.notiztag > summary:hover { background: #e9edf4; }
details.notiztag > summary::after {
    content: '';
    margin-left: auto;
    width: .45rem; height: .45rem;
    border-right: 2px solid var(--text-leise);
    border-bottom: 2px solid var(--text-leise);
    transform: rotate(45deg);
}
details.notiztag[open] > summary::after { transform: rotate(225deg); }
/* Die Tabelle sitzt im Rahmen des Tages - kein zweiter Rahmen darum */
details.notiztag .tabelle-huelle { border: 0; border-radius: 0; margin: 0; }
.notiztag-datum { font-weight: 600; }
.notiztag-datum .marke { margin-left: .35rem; }

/* Eine Zeile mit Alarm, Polizei oder Feuerwehr faellt auf. */
table.liste tbody tr.notiz-wichtig td { background: #fdf6f6; }
table.liste tbody tr.notiz-wichtig:hover td { background: #fbeaea; }
table.liste tbody tr.notiz-wichtig td:first-child {
    box-shadow: inset 3px 0 0 0 var(--hosch-rot);
}

/* Die Massnahme steht unter der Meldung, abgesetzt und beschriftet. */
.notiz-massnahme {
    margin-top: .45rem;
    padding: .35rem .55rem;
    border-left: 3px solid var(--hosch-blau);
    background: var(--info-hg);
    border-radius: 0 var(--radius) var(--radius) 0;
}
.notiz-massnahme > div { line-height: 1.45; }

/* Bilder nur als Daumennagel. Wer Einzelheiten braucht, klickt darauf -
   in der Zeile wuerde ein grosses Bild die Tabelle auseinandertreiben. */
.notiz-bilder { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.notiz-bilder figure { margin: 0; }
.notiz-bilder img {
    width: 3.2rem; height: 3.2rem;
    object-fit: cover;
    border-radius: .25rem;
    border: 1px solid var(--rand-stark);
    display: block;
    transition: transform .1s ease, border-color .1s ease;
}
.notiz-bilder a:hover img,
.notiz-bilder a:focus-visible img {
    transform: scale(1.08);
    border-color: var(--hosch-blau);
}
.notiz-bilder .knopf.klein { padding: 0 .3rem; font-size: .7rem; }

/* Suchfeld ueber einem Auswahlfeld mit vielen Eintraegen. Steht direkt
   darueber und ist schmaler - es gehoert zum Feld und ist keine eigene
   Angabe, die gespeichert wuerde. */
.beziehung-suche {
    margin-bottom: .3rem;
    background-image: none;
}
.beziehung-suche::-webkit-search-cancel-button { cursor: pointer; }
.beziehung-zaehler { font-variant-numeric: tabular-nums; }
.beziehung-zaehler.leer-treffer { color: var(--fehler); font-weight: 600; }

/* Hinweis unter der Stempeluhr, wenn der Standort nicht zu holen war.
   Auffaellig genug, um gesehen zu werden - aber kein Fehler, denn die
   Buchung ist trotzdem durchgegangen. */
.warnton { color: var(--warnung); font-weight: 600; }