/*
 * Stile der Stundenerfassung (Modul). Eingebunden über $r->style('stunden.css'),
 * nach core.css und vor public/assets/app/app.css (Projekt kann überschreiben).
 */

:root {
    --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: calc(var(--app-nav-h, 0px) + 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; }
.eingabe:not(.versteckt-projekt) .nur-frei { 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; }
.abrechnung .abschnitt th { padding-top: .45rem; font-size: 8pt; text-transform: uppercase; letter-spacing: .05em; color: #6b767d; }
.abrechnung .eingerueckt th { padding-left: .9rem; }
.abrechnung .zwischen th, .abrechnung .zwischen td { color: #3d464b; }
.datum-sprung input[type=date] { width: auto; }
.pruefung:not(.ok) { border-left: 4px solid var(--st-rot); }
.pruefung.ok { border-left: 4px solid var(--st-gruen); padding-top: .6rem; padding-bottom: .6rem; }

/* ---------- Jahr: Karten Zeitkonto / Urlaub / Gearbeitet ---------- */
.jahr-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin: 1rem 0 1.25rem; }
.jk { background: #fff; border: 1px solid var(--app-line); border-radius: var(--app-radius); padding: .9rem 1.1rem; }
.jk h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--app-muted); font-weight: 600; margin: 0 0 .25rem; }
.jk-zahl { font-size: 1.9rem; font-weight: 650; margin: 0 0 .5rem; line-height: 1.1; }
.jk-zahl span { font-size: .85rem; font-weight: 400; color: var(--app-muted); }
.jk-zeilen { width: 100%; border-collapse: collapse; font-size: .9rem; }
.jk-zeilen th { font-weight: 400; color: #3d464b; padding: .12rem 0; }
.jk-zeilen td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding: .12rem 0 .12rem .75rem; }
.jk-zeilen .jk-zwischen th, .jk-zeilen .jk-zwischen td { border-top: 1px solid var(--app-line); }
.jk-zeilen .jk-summe th, .jk-zeilen .jk-summe td { border-top: 1px solid var(--app-ink); font-weight: 650; color: var(--app-ink); }

.jk-zeilen.mit-tagen td { min-width: 4.2rem; }
.jk-zeilen .jk-kopf td { font-size: .72rem; color: var(--app-muted); padding-bottom: 0; }
.jk-fuss { font-size: .75rem; color: var(--app-muted); margin: .4rem 0 0; }

/* Monatsbericht: anklickbare Tage/Wochen (nur am Bildschirm) */
@media screen {
    .tag-link { cursor: pointer; }
    .tag-link:hover, .tag-link:focus-visible { text-decoration: underline; color: var(--akzent, var(--app-brand)); outline: none; }
}
/* Jahreswechsler: Mitte zeigt immer das gewählte Jahr */
.jahr-wahl .jahr-mitte { width: auto; border-radius: 0; text-align: center; font-weight: 600; }

/* ---------- Aufgaben 1.5: Checkliste, Kommentare, Anhänge, Labels, Beteiligte ---------- */
.aufgabe-seitenleiste { display: grid; gap: .75rem; align-content: start; }
.aufgabe-seitenleiste .karte { padding: .75rem .9rem; }
.check-liste { list-style: none; padding: 0; margin: 0 0 .4rem; display: grid; gap: .25rem; }
.check-punkt { display: flex; align-items: center; gap: .5rem; }
.check-punkt .form-check-input { margin: 0; flex: 0 0 auto; }
.check-punkt.erledigt input[name="check_text[]"] { text-decoration: line-through; color: var(--app-muted); }
.kommentar { border-top: 1px solid var(--app-line); padding: .45rem 0; font-size: .9rem; }
.kommentar:first-of-type { border-top: 0; }
.kommentar-kopf { display: flex; gap: .5rem; align-items: baseline; font-size: .8rem; }
.kommentar-text p, .kommentar-text ul, .kommentar-text ol { margin: .2rem 0; }
.erwaehnung { color: var(--app-brand); font-weight: 600; }
.anhang { display: flex; gap: .5rem; align-items: baseline; font-size: .9rem; padding: .15rem 0; flex-wrap: wrap; }
.anhang > a:first-child { word-break: break-all; }
.verlauf summary { cursor: pointer; }
.aufgabe-unten { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.label-chip { font-size: .7rem; padding: .05rem .45rem; border-radius: 999px; background: #eef3f7; color: #34516a; text-decoration: none; border: 1px solid #d5e1ea; }
.label-chip:hover { background: #dfeaf2; }
.beteiligte { display: inline-flex; }
.kuerzel { display: inline-grid; place-items: center; width: 1.55rem; height: 1.55rem; border-radius: 50%; background: #e7ecef; color: #3d464b; font-size: .62rem; font-weight: 700; margin-left: -.3rem; border: 2px solid #fff; }
.kuerzel.verantwortlich { background: var(--app-brand); color: #fff; }
.check-stand.fertig { color: var(--st-gruen); }
.beteiligte-wahl .form-check-inline { margin-right: 1rem; }
.vorlagen-menue form { margin: 0; }
.aufgabe-beschreibung p:last-child { margin-bottom: 0; }
/* Bootstrap lässt <legend> fließen (float) – in Formularen der Aufgaben normal darstellen */
.aufgabe-seite fieldset > legend, .vorlage-form fieldset > legend { float: none; font-size: 1rem; width: auto; margin-bottom: .35rem; }
.aufgabe-seite fieldset, .vorlage-form fieldset { min-width: 0; }

/* ---------- Projekte 1.6: Budget ---------- */
.legende .lg { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; margin: 0 .2rem 0 .7rem; vertical-align: -1px; }
.lg-gebucht, .budget-balken .bb-gebucht { background: var(--st-blau); fill: var(--st-blau); }
.lg-offen, .budget-balken .bb-offen { background: #b8dcf5; fill: #b8dcf5; }
.lg-ueber, .budget-balken .bb-ueber { background: var(--st-rot); fill: var(--st-rot); }
.lg-grenze { background: #1f2427; width: 2px !important; }
.budget-balken { display: block; width: 100%; height: 10px; border-radius: 5px; overflow: hidden; }
.budget-balken .bb-grund { fill: var(--app-surface); }
.budget-balken .bb-grenze { fill: #1f2427; }
.projekt-liste { display: grid; }
.projekt-zeile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 260px) 7.5rem; gap: 1rem; align-items: center; padding: .7rem .4rem; border-top: 1px solid var(--app-line); color: inherit; text-decoration: none; }
.projekt-zeile:hover { background: var(--app-surface); }
.projekt-zeile .pz-name { display: grid; }
.projekt-zeile .pz-balken { display: grid; gap: .25rem; }
.projekt-zeile.status-abgeschlossen, .projekt-zeile.status-pausiert { opacity: .65; }
.pz-ampel { text-align: right; }
.ampel { font-size: .75rem; padding: .15rem .5rem; border-radius: var(--app-radius); white-space: nowrap; }
.ampel-gruen { background: #e3f4ea; color: #1d6b43; }
.ampel-gelb { background: #fff3d6; color: #7a5300; }
.ampel-rot { background: #fde4e1; color: #a12a1f; }
.ampel-ohne { background: var(--app-surface); color: var(--app-muted); }
.budget-kz { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; margin-bottom: .6rem; }
.budget-kz > div { background: var(--app-surface); border-radius: var(--app-radius); padding: .6rem .8rem; display: grid; }
.budget-kz span { font-size: .78rem; color: var(--app-muted); }
.budget-kz strong { font-size: 1.35rem; font-weight: 650; }
.budget-kz small { font-size: .72rem; color: var(--app-muted); }
.budget-kz .kz-ampel.ampel-gelb { background: #fff3d6; } .budget-kz .kz-ampel.ampel-rot { background: #fde4e1; } .budget-kz .kz-ampel.ampel-gruen { background: #e3f4ea; }
.projekt-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; align-items: start; }
.status-badge { font-size: .7rem; vertical-align: middle; background: var(--app-surface); color: var(--app-muted); }
.status-badge.status-aktiv { background: #e6f1fb; color: #0c447c; }
.budget-hinweis { margin-top: .25rem; color: var(--app-muted); }
.budget-hinweis.ampel-text-gelb { color: #7a5300; } .budget-hinweis.ampel-text-rot { color: #a12a1f; font-weight: 600; }
.projekt-form fieldset > legend { float: none; font-size: 1rem; width: auto; }
@media (max-width: 700px) { .projekt-zeile { grid-template-columns: 1fr; } .pz-ampel { text-align: left; } }

/* ---------- Timer ---------- */
.timer-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; background: #fdecea; border: 1px solid #f3c2bb; border-radius: var(--app-radius); padding: .45rem .75rem; margin-bottom: .75rem; font-size: .9rem; }
.timer-leiste form { margin: 0; }
.timer-leiste input { min-width: 14rem; }
.timer-punkt { width: .6rem; height: .6rem; border-radius: 50%; background: var(--st-rot); animation: timer-puls 1.6s ease-in-out infinite; }
.timer-zeit { font-variant-numeric: tabular-nums; }
@keyframes timer-puls { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .timer-punkt { animation: none; } }

/* ---------- Projektbericht ---------- */
.projektbericht .pb-tabelle td { padding: .3rem .5rem; }
.projektbericht .pb-bar { width: 90px; }
.pb-balken { display: block; width: 90px; height: 8px; border-radius: 3px; overflow: hidden; }
.pb-balken .bb-grund { fill: #eef1f3; } .pb-balken .bb-gebucht { fill: var(--akzent, var(--st-blau)); } .pb-balken .bb-ueber { fill: var(--st-rot); }
.projektbericht .minus { color: var(--st-rot); }
.pb-anteil { color: #6b767d; font-size: 8pt; margin-left: .3rem; }
.blatt-kennzahlen.drei { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.projektbericht .blatt-kennzahlen { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.projektbericht .pb-kopf td { font-size: 7.5pt; color: #6b767d; }
.timer-leiste .btn { white-space: nowrap; }
/* Aufgabe: formatierte Beschreibung über dem Bearbeitungsfeld */
.aufgabe-beschreibung { padding: .75rem 1rem; font-size: .92rem; line-height: 1.55; background: #fbfcfd; }
.aufgabe-beschreibung p { margin: 0 0 .55rem; }
.aufgabe-beschreibung ul, .aufgabe-beschreibung ol { margin: 0 0 .55rem; padding-left: 1.3rem; }
.aufgabe-beschreibung > :last-child { margin-bottom: 0; }
.aufgabe-beschreibung code { font-size: .85em; background: #eef1f3; padding: 0 .25rem; border-radius: 3px; }
.beschreibung-bearbeiten > summary { cursor: pointer; margin-bottom: .35rem; }

/* ---------- Aufklappbare Einträge (Akkordeon) in der Verwaltung ---------- */
.akk-liste { display: grid; gap: .55rem; }
.akk-knoepfe { display: flex; gap: .4rem; justify-content: flex-end; font-size: .85rem; }
details.akk { border: 1px solid var(--app-line); border-radius: var(--app-radius); background: #fff; }
details.akk > summary { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; padding: .6rem .9rem; cursor: pointer;
    background: var(--app-surface); border-radius: var(--app-radius); user-select: none; }
details.akk > summary::-webkit-details-marker { display: none; }
details.akk > summary::before { content: "›"; display: inline-block; width: .9rem; font-size: 1.15rem; line-height: 1; color: var(--app-muted); transition: transform .15s; }
details.akk[open] > summary::before { transform: rotate(90deg); }
details.akk[open] > summary { border-bottom: 1px solid var(--app-line); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
details.akk > summary:hover { background: #eef1f3; }
details.akk > summary:focus-visible { outline: 2px solid var(--app-brand); outline-offset: 2px; }
.akk-titel { font-weight: 650; }
.akk-meta { font-size: .8rem; color: var(--app-muted); }
.akk-rechts { margin-left: auto; display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.akk-logo { height: 1.4rem; width: auto; max-width: 5rem; object-fit: contain; }
.akk-inhalt { padding: .9rem; }
details.akk.inaktiv > summary .akk-titel { color: var(--app-muted); }
.akk-inhalt.zuteilung { margin-bottom: 0; }
details.akk-neu > summary { background: #fff; color: var(--app-brand); }
details.akk-neu > summary .akk-titel { font-weight: 600; }
@media (prefers-reduced-motion: reduce) { details.akk > summary::before { transition: none; } }
@media print { details.akk > summary::before { display: none; } }

/* Termine (optional) in der Erfassung */
.termine-offen { padding: .6rem .8rem; margin-bottom: .8rem; background: #f6fafd; }
.termin-zeile { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) auto; gap: .6rem; align-items: center; padding: .25rem 0; border-top: 1px solid var(--app-line); }
.termin-zeile:first-of-type { border-top: 0; }
.termin-text { font-size: .9rem; }
@media (max-width: 600px) { .termin-zeile { grid-template-columns: 1fr auto; } .termin-zeile > span:first-child { grid-column: 1 / -1; } }

/* Stammdaten Projekte: jede Zeile mit Kopf und kräftiger Trennlinie */
.akk-inhalt .stammzeile { border: 1px solid var(--app-line); border-top: 5px solid var(--app-brand); border-radius: var(--app-radius); padding: .6rem .9rem .8rem; margin-bottom: .9rem; background: #fff; }
.akk-inhalt .stammzeile.inaktiv { border-top-color: #b8c0c6; }
.stamm-kopf { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding-bottom: .35rem; margin-bottom: .1rem; border-bottom: 1px solid var(--app-line); }
.stamm-kopf strong { font-size: 1rem; }

.von-aufgabe { background: #eef6fd; border: 1px solid #cfe3f5; border-radius: var(--app-radius); padding: .45rem .6rem; }
.von-aufgabe a { white-space: nowrap; margin-left: .25rem; }

/* ---------- Aufgaben: Filterleiste, scrollbare Spalten ---------- */
.aufgaben-filter { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: end; background: #fff; border: 1px solid var(--app-line); border-radius: var(--app-radius); padding: .5rem .75rem; margin-bottom: .9rem; }
.aufgaben-filter.gefiltert { border-color: #9cc3e6; background: #f6fafe; }
.af-feld { display: grid; gap: .15rem; font-size: .75rem; color: var(--app-muted); margin: 0; }
.af-feld select, .af-feld input { min-width: 9rem; }
.af-suche input { min-width: 14rem; }
.af-knoepfe { display: flex; gap: .25rem; align-items: center; }
.kanban-spalte header { display: flex; align-items: center; gap: .4rem; }
.spalte-knoepfe { margin-left: auto; display: inline-flex; gap: .15rem; align-items: center; }
.spalte-scroll { border: 0; background: transparent; color: var(--app-muted); font-size: .95rem; line-height: 1; padding: .15rem .3rem; border-radius: 4px; }
.spalte-scroll:hover, .spalte-scroll:focus-visible { background: rgba(0, 0, 0, .06); color: var(--app-text, #1f2427); }
.kanban-liste { max-height: calc(100vh - 290px); min-height: 6rem; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; padding-right: .15rem; }
@media (max-width: 900px) { .kanban-liste { max-height: 70vh; } }
@media print { .kanban-liste { max-height: none; overflow: visible; } }

/* ---------- Formularbereiche mit Farbe und Symbol (Projekt, Termin, Website) ---------- */
.fb { --fb-farbe: #5c6770; --fb-hell: #eef1f3; border: 1px solid var(--app-line); border-left: 4px solid var(--fb-farbe); border-radius: var(--app-radius); background: #fff; padding: .8rem 1rem 1rem; }
.fb-blau { --fb-farbe: #1b6fb5; --fb-hell: #e6f1fb; }
.fb-gruen { --fb-farbe: #1d7a4c; --fb-hell: #e3f4ea; }
.fb-orange { --fb-farbe: #b5651d; --fb-hell: #fdf0e3; }
.fb-violett { --fb-farbe: #5b4bb7; --fb-hell: #eeedfe; }
.fb-grau { --fb-farbe: #5c6770; --fb-hell: #eef1f3; }
.fb-kopf { display: flex; gap: .65rem; align-items: center; margin-bottom: .75rem; }
.fb-kopf h2 { font-size: 1rem; font-weight: 650; margin: 0; color: var(--fb-farbe); }
.fb-kopf p { margin: .05rem 0 0; font-size: .8rem; color: var(--app-muted); }
.fb-symbol { flex: 0 0 auto; width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center; background: var(--fb-hell); color: var(--fb-farbe); }
.symbol { width: 1.15rem; height: 1.15rem; }
.fb .form-label { font-size: .85rem; font-weight: 500; margin-bottom: .2rem; }
.fb-fuss { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding-top: .25rem; }
.fb-fuss .ms-auto { margin-left: auto; }

/* Allgemeines Overlay (Termin, Projekt, Website) */
.ueberlagerung .modal-body { background: #f6f7f8; }
.ueberlagerung .modal-body .page-title, .ueberlagerung .modal-body .ueber-zurueck { display: none; }