/* ==========================================================================
   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; }

/* ---------------------------------------------------------------------
   Rechnungseingang: die Pruefzeile eines eingelesenen PDF

   Die Tabelle ist breit, weil eine Rechnung viele Felder hat. Wichtig
   ist nur eines: Man muss auf einen Blick sehen, welcher Wert sicher
   ist und welcher geraten. Deshalb bekommt ein geratenes Feld einen
   gelben Rahmen und einen Punkt daneben - nicht eine Fussnote, die
   niemand liest.
   --------------------------------------------------------------------- */
.stapel-zeile > td { vertical-align: top; }
.stapel-zeile input[type="text"],
.stapel-zeile input[type="date"],
.stapel-zeile select { padding: .22rem .35rem; font-size: .8rem; }
.stapel-zeile .zahl-eingabe { width: 5.4rem; }
.stapel-zeile .nummer-eingabe { width: 8.5rem; }
.stapel-zeile .datum-eingabe { width: 8.2rem; }
.stapel-zeile .lieferant-wahl { min-width: 11rem; max-width: 15rem; }

/* Geraten heisst: nachsehen. Hergeleitet heisst: ist gerechnet, nicht
   abgelesen - das ist in Ordnung, soll aber erkennbar bleiben. */
.unsicher-geraten  { border-color: var(--warnung) !important; background: var(--warnung-hg); }
.unsicher-fehlt    { border-color: var(--fehler) !important;  background: var(--fehler-hg); }
.herkunft {
    display: inline-block;
    width: .5rem; height: .5rem;
    border-radius: 50%;
    margin-left: .2rem;
    vertical-align: middle;
}
.herkunft.xml           { background: var(--erfolg); }
.herkunft.beschriftung  { background: #9aa6bb; }
.herkunft.spalte        { background: #9aa6bb; }
.herkunft.hergeleitet   { background: var(--hosch-blau); }
.herkunft.geraten       { background: var(--warnung); }
.herkunft.fehlt         { background: var(--fehler); }

/* Die zweite Zeile je Datei: Hinweise und die kleinen Wege. Sie darf
   nicht wie eine eigene Rechnung aussehen, deshalb ohne Rahmen oben. */
.stapel-fuss > td {
    border-top: 0;
    padding-top: 0;
    font-size: .78rem;
    color: var(--text-leise);
}
.stapel-fuss ul { margin: .2rem 0 0; padding-left: 1.1rem; }
.stapel-fuss .wege { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }

/* Der gelesene Text zum Nachsehen. Feste Schrittweite, damit Spalten
   stehen bleiben - er ist aus einem PDF, und dort stand er in Spalten. */
.rohtext {
    font-family: var(--schrift-mono);
    font-size: .74rem;
    line-height: 1.45;
    white-space: pre-wrap;
    max-height: 32rem;
    overflow: auto;
    background: var(--flaeche-leise, #f7f8fb);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    padding: .6rem .7rem;
    margin: 0;
}

/* ---------------------------------------------------------------------
   Aufmass und Objektaufnahme

   Zwei Eigenheiten bestimmen das Bild. Erstens: Die Gewerke werden
   angekreuzt, nicht aus einer Liste gewaehlt - mehrere sind der
   Normalfall, und angekreuzt wird mit dem Daumen auf einem Tablet.
   Zweitens: Jede Position hat zwei Zeilen. Oben steht, was bestellt
   wird, unten, was man wissen muss. Beides in eine Zeile zu pressen
   hiesse, die Notiz auf eine Handbreit zu kuerzen - und dann schreibt
   sie niemand hin.
   --------------------------------------------------------------------- */
.gewerkewahl {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: .6rem;
}
.gewerkewahl .gewerk {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "box name" ". hinweis";
    gap: .15rem .5rem;
    align-items: center;
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    padding: .55rem .7rem;
    cursor: pointer;
}
.gewerkewahl .gewerk:hover { border-color: var(--hosch-blau); }
.gewerkewahl .gewerk input { grid-area: box; }
.gewerkewahl .gewerk-name {
    grid-area: name;
    font-weight: 600;
    display: flex; align-items: center; gap: .35rem;
}
.gewerkewahl .gewerk-hinweis {
    grid-area: hinweis;
    font-size: .76rem;
    color: var(--text-leise);
}
/* Angekreuzt heisst: kommt mit. Das soll man sehen, ohne das Kaestchen
   zu suchen - sechs Kaestchen nebeneinander sind sonst sechs gleiche
   Kacheln. */
.gewerkewahl .gewerk:has(input:checked) {
    border-color: var(--hosch-blau);
    background: var(--info-hg);
}

/* Die Positionszeile */
.aufmasstabelle .aufmass-zeile > td { vertical-align: top; }
/* Die Eingabefelder nehmen die Breite ihrer Spalte an, statt sie zu
   bestimmen. Ohne das zieht die Eigenbreite eines Textfeldes die
   Tabelle ueber den Kartenrand hinaus, und die letzte Spalte liegt
   hinter dem Rand. */
.aufmasstabelle .aufmass-zeile input {
    width: 100%;
    box-sizing: border-box;
    padding: .25rem .4rem;
    font-size: .82rem;
}
.aufmasstabelle .aufmass-zeile .zahl-eingabe { width: 100%; min-width: 3.4rem; }

/* Die zweite Zeile gehoert zur ersten. Kein Rahmen oben, damit sie
   nicht wie eine eigene Position aussieht; der Rahmen unten trennt
   dann die Positionen voneinander. */
.aufmasstabelle .aufmass-notiz > td {
    border-top: 0;
    padding-top: 0;
    padding-bottom: .55rem;
}
.notizpaar { display: flex; gap: .6rem; flex-wrap: wrap; }
.notizpaar label { flex: 1 1 16rem; min-width: 0; }
.notizpaar label > span {
    display: block;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--text-leise);
    margin-bottom: .15rem;
}
.notizpaar textarea { width: 100%; font-size: .82rem; padding: .3rem .4rem; }

/* Der Katalog zum Ankreuzen. Eingeklappt, weil er beim zweiten
   Durchgang nicht mehr gebraucht wird - die Positionen stehen dann
   schon in der Tabelle. */
.katalogwahl > summary { cursor: pointer; font-weight: 600; }
.katalogwahl > summary svg.icon { vertical-align: -.15em; }
.katalogliste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
    gap: .35rem .8rem;
    margin: .6rem 0 .7rem;
}
.katalogposten {
    display: grid;
    grid-template-columns: 1fr 4.4rem 8rem;
    gap: .35rem;
    align-items: center;
}
.katalogposten label { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.katalogposten label > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.katalogposten input[type="text"] { padding: .22rem .35rem; font-size: .8rem; }

/* Die Pflegetabelle des Aufmasskatalogs.
   Sie erbt von .aufmasstabelle die Eingabefelder, braucht aber die
   Mindestbreite der Belegtabellen (880 px) nicht: Hier stehen fuenf
   schmale Spalten statt sechs breiter. Mit der geerbten Breite liefe
   die Schluesselspalte aus der Karte heraus, und man muesste quer
   scrollen, um zu sehen, was man gerade bearbeitet.
   Der Selektor nennt das Element mit: `table.positionen` setzt die
   880 px, und eine Regel aus der Klasse allein waere schwaecher - sie
   verlore, egal wie weit unten sie steht. */
table.katalogtabelle { min-width: 0; }
.katalogtabelle .aufmass-zeile > td { vertical-align: middle; }
.katalogtabelle input[type="checkbox"] { margin: 0; }