/*
 * Projektspezifische Stile (Stundenerfassung). Wird nach core.css geladen.
 * Farben: Variablen aus core/assets/css/core.css hier überschreiben.
 */

:root {
    --app-brand: #0b679f;          /* DbNet-Blau, dunkel genug für weiße Schrift */
    --app-brand-hover: #08527f;
    --st-blau: #1597e5;
    --st-gruen: #2e9a6a;
    --st-ocker: #c98a1b;
    --st-frei: #9aa7b1;
    --st-rot: #c0392b;
    --st-sofei: #8a5a00;
}

.stunden { font-variant-numeric: tabular-nums; }
.plus { color: var(--st-gruen); }
.minus { color: var(--st-rot); }
.karte { background: #fff; border: 1px solid var(--app-line); border-radius: var(--app-radius); padding: 1rem 1.25rem; }
.karte.schmal { max-width: 46rem; }
.inaktiv { opacity: .6; }

/* ---------- Person/Firma ---------- */
.kontext-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: -.25rem 0 1rem; }
.kontext-leiste .form-select { width: auto; }
.kontext-leiste.fremd { padding: .4rem .75rem; background: #fff4dc; border: 1px solid #f0d9a8; border-radius: var(--app-radius); }
.fremd-hinweis { font-size: .9rem; }

/* ---------- Projektfarben ---------- */
.gruppe-prinz { --farbe: var(--st-blau); }
.gruppe-mc { --farbe: var(--st-gruen); }
.gruppe-andere, .gruppe-shop { --farbe: var(--st-ocker); }
.art-frei { --farbe: var(--st-frei); }

/* ---------- Erfassung ---------- */
.erfassung { display: grid; grid-template-columns: minmax(280px, 340px) 1fr; gap: 2rem; align-items: start; }
.eingabe { position: sticky; top: 1rem; background: #fff; border: 1px solid var(--app-line); border-radius: var(--app-radius); padding: 1.1rem; }
.eingabe .form-label { margin-bottom: .15rem; font-size: .85rem; color: var(--app-muted); }
.eingabe.versteckt-projekt .nur-arbeit { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.chip { font: inherit; font-size: .82rem; padding: .2rem .55rem; border: 1px solid var(--app-line); background: #fff; color: var(--app-ink); border-radius: 999px; cursor: pointer; }
.chip:hover, .chip.aktiv { border-color: var(--app-ink); background: var(--app-ink); color: #fff; }
.schnell { border-top: 1px solid var(--app-line); margin-top: 1.1rem; padding-top: .8rem; }
.schnell form { margin: 0; }
.schnell-knopf { width: 100%; text-align: left; font: inherit; background: #fff; border: 1px solid var(--app-line); border-left: 4px solid var(--farbe, var(--app-muted)); border-radius: var(--app-radius); padding: .4rem .65rem; cursor: pointer; display: grid; }
.schnell-knopf:hover { background: var(--app-surface); }
.schnell-knopf small { color: var(--app-muted); }

.woche-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.woche-titel { font-size: 2.2rem; font-weight: 650; margin: 0; }
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--app-line); border: 1px solid var(--app-line); border-radius: var(--app-radius); overflow: hidden; margin: 1.1rem 0; }
.kennzahlen div { background: #fff; padding: .65rem 1rem; }
.kennzahlen dt { color: var(--app-muted); font-size: .82rem; font-weight: 400; }
.kennzahlen dd { margin: 0; font-size: 1.3rem; font-weight: 650; }
.kennzahlen dd span { font-size: .85rem; font-weight: 400; color: var(--app-muted); }
.kennzahlen.gross dd { font-size: 1.7rem; }

.tage { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.tag { background: #fff; border: 1px solid var(--app-line); border-radius: var(--app-radius); padding: .75rem 1rem .55rem; }
.tag.heute { border-color: var(--st-blau); }
.tag.gewaehlt { box-shadow: 0 0 0 2px rgba(21, 151, 229, .35); }
.tag.wochenende { background: #fbfaf6; }
.tag-kopf { display: flex; align-items: baseline; gap: .5rem; }
.tag-name { color: var(--app-ink); text-decoration: none; }
.tag-name:hover strong { text-decoration: underline; }
.tag-summe { margin-left: auto; font-weight: 650; }
.sofei { font-size: .75rem; font-weight: 600; color: var(--st-sofei); background: #fff1cc; border: 1px solid #f0d58a; border-radius: 999px; padding: .05rem .5rem; margin-left: auto; }
.sofei + .tag-summe { margin-left: .5rem; }

/* Tagesbalken (SVG, damit die strenge CSP keine Inline-Styles braucht) */
.balken { display: block; width: 100%; height: 12px; margin: .45rem 0 .5rem; }
.balken rect { fill: var(--farbe, var(--app-muted)); }
.balken .balken-grund { fill: var(--app-surface); }
.balken .balken-soll { fill: var(--app-ink); }

.feiertag { margin: 0 0 .3rem; color: var(--app-muted); font-size: .9rem; }
.eintraege { list-style: none; margin: 0; padding: 0; }
.eintraege li { display: grid; grid-template-columns: 9.5rem 1fr auto auto; gap: .75rem; align-items: baseline; padding: .3rem 0; border-top: 1px solid var(--app-surface); }
.eintraege li.in-bearbeitung { background: #fff8e1; }
.eintraege li.ist-sofei .std { color: var(--st-sofei); }
.eintraege li.ist-sofei .std::after { content: " ✱"; }
.projekt { font-size: .82rem; color: var(--app-muted); border-left: 3px solid var(--farbe, var(--app-muted)); padding-left: .45rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.std { font-weight: 600; text-align: right; min-width: 3rem; }
.werkzeug { display: flex; gap: .1rem; opacity: .4; }
.eintraege li:hover .werkzeug, .werkzeug:focus-within { opacity: 1; }
.werkzeug a, .werkzeug button { border: 0; background: none; color: var(--app-muted); padding: 0 .3rem; cursor: pointer; }
.werkzeug button:hover { color: var(--st-rot); }
.werkzeug form { margin: 0; }
.leer { display: flex; gap: .75rem; flex-wrap: wrap; align-items: baseline; color: var(--app-muted); font-size: .9rem; margin: 0; }

/* ---------- Tabellen ---------- */
.zahlen th, .zahlen td { text-align: right; white-space: nowrap; }
.zahlen th:first-child { text-align: left; font-weight: 500; }
.zahlen thead th { font-size: .8rem; color: var(--app-muted); font-weight: 500; }
.zahlen tfoot th, .zahlen tfoot td { font-weight: 650; border-top: 2px solid var(--app-ink); }
.zahlen tr.zukunft td, .zahlen tr.zukunft th { color: var(--st-frei); }
.laeuft { font-size: .75rem; color: var(--app-muted); margin-left: .35rem; font-weight: 400; }
.sofei-wert { color: var(--st-sofei) !important; }

/* ---------- Monatsbericht ---------- */
.bericht-werkzeug { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.jahr-feld { width: 6rem; }
.blatt { --akzent: var(--app-brand); --akzent-hell: color-mix(in srgb, var(--akzent) 9%, #fff); background: #fff; max-width: 860px; margin: 0 auto; padding: 2.2rem 2.6rem; border: 1px solid var(--app-line); font-size: 9.5pt; line-height: 1.4; color: #1f2427; }
.blatt-kopf { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding-bottom: .9rem; border-bottom: 3px solid var(--akzent); }
.blatt-logo img { max-height: 62px; max-width: 190px; width: auto; height: auto; display: block; }
.blatt-logo-absender img { margin-left: auto; max-height: 44px; }
.blatt-titel { text-align: center; }
.blatt-art { margin: 0; font-size: 9pt; letter-spacing: .12em; text-transform: uppercase; color: var(--akzent); font-weight: 600; }
.blatt-titel h1 { margin: .1rem 0 0; font-size: 19pt; font-weight: 700; }
.blatt-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem 1rem; margin: .9rem 0; }
.blatt-meta dt { font-size: 7.5pt; text-transform: uppercase; letter-spacing: .06em; color: #6b767d; font-weight: 500; }
.blatt-meta dd { margin: 0; font-weight: 600; }
.blatt-kennzahlen { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid #dfe3e1; border-radius: 6px; overflow: hidden; margin-bottom: 1rem; }
.blatt-kennzahlen div { padding: .55rem .7rem; border-left: 1px solid #dfe3e1; display: flex; flex-direction: column; justify-content: space-between; gap: .25rem; }
.blatt-kennzahlen div:first-child { border-left: 0; }
.blatt-kennzahlen span { font-size: 7.5pt; color: #6b767d; line-height: 1.25; }
.blatt-kennzahlen strong { line-height: 1.1; }
.blatt-kennzahlen strong { font-size: 13pt; font-weight: 700; }
.blatt-kennzahlen .kz-haupt { background: var(--akzent-hell); }
.blatt-kennzahlen .kz-haupt strong, .blatt-kennzahlen .kz-saldo strong { color: var(--akzent); }
.blatt-kennzahlen .minus { color: var(--st-rot) !important; }
.blatt-h2 { font-size: 10.5pt; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--akzent); margin: 1.2rem 0 .45rem; }
.einleitung, .schluss { font-style: italic; color: #5b656b; font-size: 8.5pt; }

.tagebuch { width: 100%; border-collapse: collapse; }
.tagebuch thead th { font-size: 7.5pt; text-transform: uppercase; letter-spacing: .05em; color: #6b767d; font-weight: 600; text-align: left; padding: .3rem .5rem; border-bottom: 2px solid var(--akzent); }
.tagebuch td { padding: .22rem .5rem; vertical-align: top; }
.tagebuch .t-datum { width: 6.6rem; white-space: nowrap; }
.tagebuch .t-datum strong { display: block; }
.t-tagessumme { display: block; font-size: 8pt; color: #6b767d; }
.t-sofei { display: inline-block; margin-top: .15rem; font-size: 7pt; font-weight: 600; color: var(--st-sofei); background: #fff1cc; border-radius: 3px; padding: 0 .3rem; }

.tagebuch .t-std { width: 3.6rem; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tagebuch thead .t-std { text-align: right; }
.tagebuch tr.tag-erste td { border-top: 1px solid #e3e6e4; padding-top: .4rem; }
.tagebuch tr.zeile-frei .t-projekt { color: #6b767d; font-style: italic; }
.tagebuch tr { break-inside: avoid; }
.wochenkopf th { padding: .35rem .5rem .25rem; font-size: 8pt; font-weight: 700; color: var(--akzent); text-align: left; letter-spacing: .03em; }
.wochensumme td { background: var(--akzent-hell); font-weight: 600; padding: .3rem .5rem; border-top: 1px solid color-mix(in srgb, var(--akzent) 35%, #fff); }
.wochenabstand td { height: 1.1rem; padding: 0; border: 0; }
.woche:last-of-type .wochenabstand { display: none; }

/* Tagebuch und Liste: ein Tag = eine Zeile; der Inhalt ist ein eigenes Raster (keine Lücken neben der Datumsspalte) */
.tagebuch .t-inhalt { padding-top: .4rem; padding-bottom: .35rem; }
.tag-block { break-inside: avoid; }
.z-std { width: 3.6rem; flex: 0 0 3.6rem; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tb-gruppe + .tb-gruppe { margin-top: .3rem; }
.tb-kopf, .tb-zeile, .ls-zeile { display: flex; align-items: baseline; gap: .5rem; }
.tb-kopf > :first-child, .tb-zeile > .tb-text { flex: 1 1 auto; min-width: 0; }
.tb-name { font-weight: 600; color: #2b3338; }
.tb-gruppe.zeile-frei .tb-name { font-weight: 400; font-style: italic; color: #6b767d; }
.tb-summe { color: #6b767d; font-size: 8pt; }
.tb-zeile { padding-left: 1.1rem; position: relative; margin-top: .05rem; }
.tb-zeile::before { content: "–"; position: absolute; left: .3rem; color: #9aa7b1; }
.ls-zeile + .ls-zeile { margin-top: .12rem; }
.ls-zeile .ls-projekt { flex: 0 0 10.5rem; color: #3d464b; }
.ls-zeile .ls-text { flex: 1 1 auto; min-width: 0; }
.ls-zeile.zeile-frei .ls-projekt, .ls-zeile.zeile-frei .ls-text { font-style: italic; color: #6b767d; }
/* Vorlage Tageszeilen */
.vorlage-tageszeilen .t-inhalt { line-height: 1.5; }
.tz-gruppe { display: block; }
.tz-gruppe.zeile-frei { font-style: italic; color: #6b767d; }
.tz-std { color: #6b767d; font-size: 8pt; white-space: nowrap; }
.wochentabelle td { padding: .3rem .5rem; }

.blatt-auswertung { display: grid; grid-template-columns: 1fr 1.25fr; gap: 1.5rem; break-inside: avoid; margin-top: .5rem; }
.abrechnung table, .verteilung table { width: 100%; border-collapse: collapse; }
.abrechnung th, .verteilung th { text-align: left; font-weight: 400; padding: .14rem 0; }
.abrechnung td { text-align: right; font-variant-numeric: tabular-nums; }
.abrechnung .summe th, .abrechnung .summe td { font-weight: 700; border-top: 1px solid #1f2427; }
.abrechnung .klein th, .abrechnung .klein td { font-size: 8pt; color: #6b767d; }
.verteilung th { padding-right: .5rem; max-width: 12rem; }
.verteilung .v-balken { width: 30%; }
.verteilung svg { display: block; width: 100%; height: 8px; }
.verteilung rect { fill: var(--akzent); }
.verteilung .t-std { text-align: right; width: 3.6rem; font-variant-numeric: tabular-nums; }
.ohne-stunden { font-size: 7.5pt; color: #6b767d; margin-top: .4rem; }
.sofei-zeile th, .sofei-zeile td { color: var(--st-sofei); }
.unterschriften { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-top: 2.5rem; break-inside: avoid; font-size: 8pt; color: #6b767d; }
.unterschriften span { display: block; height: 2.2rem; border-bottom: 1px solid #1f2427; margin-bottom: .25rem; }
.blatt-fuss { margin-top: 2rem; padding-top: .5rem; border-top: 1px solid var(--app-line); font-size: 7.5pt; color: var(--app-muted); text-align: center; }

@media print {
    @page { size: A4; margin: 12mm 13mm 17mm; }
    .stunden .page, .page.stunden { padding: 0; max-width: none; }
    .blatt { border: 0; padding: 0; max-width: none; }
    .blatt-fuss { display: none; }
    .app-main { padding: 0; }
    .tagebuch thead { display: table-header-group; }
    .blatt-h2, .wochenkopf { break-after: avoid; }
}
@media (max-width: 700px) {
    .blatt-kopf { grid-template-columns: 1fr; text-align: left; }
    .blatt-titel { text-align: left; }
    .blatt-meta, .blatt-kennzahlen { grid-template-columns: 1fr 1fr; }
    .blatt-auswertung { grid-template-columns: 1fr; }
    .ls-zeile .ls-projekt { flex-basis: 7rem; }
}

/* ---------- Verwaltung ---------- */
.stammzeile { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .5rem .75rem; align-items: end; background: #fff; border: 1px solid var(--app-line); border-radius: var(--app-radius); padding: .75rem 1rem; margin-bottom: .5rem; }
.stammzeile .form-label { margin: 0; font-size: .8rem; color: var(--app-muted); display: grid; gap: .15rem; }
.stammzeile .breit { grid-column: 1 / -1; }
.karte .stammzeile { border: 0; padding: 0; margin: 0; }
.firmen .form-label, .karte > form .form-label { width: 100%; }
.logo-feld { display: flex; align-items: center; gap: .75rem; min-height: 3.2rem; margin-bottom: .3rem; }
.logo-vorschau { max-height: 48px; width: auto; border: 1px solid var(--app-line); padding: 4px; border-radius: 4px; background: #fff; }
.feiertagzeile { display: grid; grid-template-columns: 8.5rem 1fr 8rem auto auto; gap: .4rem; align-items: center; margin-bottom: .35rem; }
.jahres-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.jahres-chips .chip { text-decoration: none; }
.jahres-chips .chip small { color: var(--app-muted); }
.jahres-chips .chip.aktiv small, .jahres-chips .chip:hover small { color: #cfd8df; }
.zuteilung { margin-bottom: .75rem; }
.zuteilung-kopf { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: baseline; margin-bottom: .5rem; }
.zuteilung-firmen { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .4rem 1.25rem; margin-bottom: .6rem; }
.zuteilung-firma { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.zuteilung-firma input[type=date] { width: auto; }
.wochentage { display: grid; grid-template-columns: repeat(7, minmax(3.5rem, 1fr)); gap: .4rem; }
.std-feld { max-width: 5.5rem; }
.import-tabelle td:nth-child(5) { min-width: 20rem; }

@media (max-width: 860px) {
    .erfassung { grid-template-columns: 1fr; gap: 1.25rem; }
    .eingabe { position: static; }
    .eintraege li { grid-template-columns: 1fr auto auto; }
    .eintraege .projekt { grid-column: 1 / -1; }
    .werkzeug { opacity: 1; }
    .blatt { padding: 1.25rem; }
    .feiertagzeile { grid-template-columns: 1fr 7rem auto auto; }
    .feiertagzeile > span, .feiertagzeile > input[type=date] { grid-column: 1 / -1; }
    .wochentage { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Aufgaben (Kanban) ---------- */
.page-breit { max-width: 96rem; }
.kanban { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: .9rem; align-items: start; }
.kanban-spalte { background: var(--app-surface); border: 1px solid var(--app-line); border-radius: var(--app-radius); padding: .6rem; min-height: 12rem; }
.kanban-spalte header { display: flex; align-items: center; gap: .5rem; padding: .1rem .2rem .55rem; }
.kanban-spalte h2 { font-size: .95rem; font-weight: 650; margin: 0; }
.kanban-spalte .anzahl { font-size: .75rem; background: #fff; border: 1px solid var(--app-line); border-radius: 999px; padding: 0 .45rem; color: var(--app-muted); }
.kanban-spalte .neu { margin-left: auto; color: var(--app-muted); }
.spalte-arbeit header h2 { color: var(--st-blau); }
.spalte-warten header h2 { color: var(--st-ocker); }
.spalte-erledigt header h2 { color: var(--st-gruen); }
.kanban-liste { display: grid; gap: .5rem; min-height: 4rem; border-radius: var(--app-radius); transition: background .15s; }
.kanban-liste.ziel { background: rgba(21, 151, 229, .08); outline: 2px dashed rgba(21, 151, 229, .4); outline-offset: 2px; }
.leer-hinweis { font-size: .8rem; color: var(--app-muted); text-align: center; margin: 1rem 0; }
.aufgabe-karte { background: #fff; border: 1px solid var(--app-line); border-left: 4px solid var(--farbe, var(--app-line)); border-radius: var(--app-radius); padding: .55rem .65rem; display: grid; gap: .35rem; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.ziehbar .aufgabe-karte { cursor: grab; }
.aufgabe-karte.zieht { opacity: .45; }
.aufgabe-karte.prio-hoch { box-shadow: inset 0 0 0 1px rgba(192, 57, 43, .35); }
.spalte-erledigt .aufgabe-karte { opacity: .75; }
.spalte-erledigt .aufgabe-titel { text-decoration: line-through; text-decoration-color: rgba(0, 0, 0, .3); }
.aufgabe-titel { font-weight: 600; color: var(--app-ink); text-decoration: none; line-height: 1.3; }
.aufgabe-titel:hover { text-decoration: underline; }
.aufgabe-meta { display: flex; flex-wrap: wrap; gap: .25rem .6rem; font-size: .75rem; color: var(--app-muted); align-items: center; }
.aufgabe-meta .projekt { font-size: .75rem; }
.aufgabe-meta .ueberfaellig { color: var(--st-rot); font-weight: 600; }
.aufgabe-stunden { font-size: .75rem; color: var(--app-muted); display: grid; gap: .2rem; }
.aufgabe-stunden svg { display: block; width: 100%; height: 4px; }
.aufgabe-stunden .grund { fill: var(--app-surface); }
.aufgabe-stunden .wert { fill: var(--st-gruen); }
.aufgabe-stunden .ueber { fill: var(--st-rot); }
.aufgabe-aktionen { display: flex; align-items: center; gap: .3rem; }
.aufgabe-aktionen form { margin: 0; }
.aufgabe-aktionen .btn-sm { padding: .1rem .45rem; font-size: .75rem; }
.aufgabe-seite { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 2rem; align-items: start; }
.aufgabe-badge { display: inline-block; margin-left: .4rem; font-size: .75rem; color: var(--app-brand); text-decoration: none; background: rgba(11, 103, 159, .07); border-radius: 3px; padding: 0 .35rem; }
.zuteilung-chefs { border: 0; padding: 0; margin: 0 0 .6rem; }
@media (max-width: 1100px) { .kanban { grid-template-columns: repeat(2, minmax(220px, 1fr)); } }
@media (max-width: 860px) { .aufgabe-seite { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .kanban { grid-template-columns: 1fr; } }
.aufgaben-liste tr.status-erledigt td { opacity: .65; }
.aufgaben-liste tr.status-erledigt a { text-decoration: line-through; }
.vorlage-liste thead .t-projekt { width: 11rem; }