* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
    background: #f5f5f5;
}

a {
    color: #2563eb;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Header */
header {
    background: #1e3a5f;
    color: white;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header h1 {
    font-size: 1.5rem;
}

header h1 a {
    color: white;
}

header h1 a:hover {
    text-decoration: none;
}

header nav a {
    color: #93c5fd;
    margin-left: 1.5rem;
}

header nav a:hover {
    color: white;
}

/* Logout ist seit 1e ein POST-Formular (CSRF), soll aber wie die übrigen Nav-Links
   aussehen — das Formular bleibt inline, der Button wird optisch zum Link. */
header nav form.logout-form {
    display: inline;
    margin: 0;
}

header nav form.logout-form button {
    background: none;
    border: none;
    color: #93c5fd;
    margin-left: 1.5rem;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

header nav form.logout-form button:hover {
    color: white;
    text-decoration: underline;
}

/* Angemeldeter Benutzer im Kopf (docs/archive/PLAN-2026-10-objekt-beschraenkung.md, Schritt 6):
   gedämpft, nur der Name — E-Mail, Rolle und Beschränkung stehen im Mouseover. */
header nav .angemeldet {
    color: #cbd5e1;
    font-size: 0.9em;
    margin-left: 1.5rem;
    display: inline-block;
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    cursor: default;
}

/* Gerade angemeldete Benutzer (nur Administrator, docs/archive/PLAN-2026-10-ux-editor.md, Schritt 4):
   grüner Punkt vor dem Namen, gedämpft wie .angemeldet. */
header nav a.online {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.9rem;
    margin-left: 1.5rem;
    font-size: 0.9em;
    color: #cbd5e1;
    text-decoration: none;
    vertical-align: bottom;
}

header nav a.online[hidden] {
    display: none;
}

.online-benutzer {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.online-punkt {
    flex: 0 0 auto;
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background: #22c55e;
}

/* Objektauswahl im Benutzerformular */
fieldset.benutzer-objekte {
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
}

fieldset.benutzer-objekte label {
    display: block;
}

/* Main */
main {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1rem;
}

/* Buttons */
button, .btn {
    background: #2563eb;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    display: inline-block;
}

button:hover, .btn:hover {
    background: #1d4ed8;
    text-decoration: none;
}

.btn-secondary {
    background: #6b7280;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    display: inline-block;
}

.btn-secondary:hover {
    background: #4b5563;
    text-decoration: none;
}

/* Löschen-Einstieg unten in der Bearbeiten-Maske (Schritt 3 aus docs/PLAN.md, .form-actions
   in edit.html): gleiche Größe wie Speichern/Abbrechen daneben, aber rot wie .btn-delete —
   die gefährliche Handlung soll sich von den beiden übrigen abheben. Eigene Klasse statt
   .btn-delete, weil dieses hier ein Link ist, kein <button>, und deutlich größer als die
   kleinen Löschen-Schaltflächen an Kacheln und Kostenzeilen sein soll. */
.btn-delete-link {
    background: #dc2626;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    display: inline-block;
}

.btn-delete-link:hover {
    background: #b91c1c;
    text-decoration: none;
}

/* Forms */
.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 500;
}

/* Bauphase und Folgetermin teilen sich eine Zeile: beide Werte sind kurz
   (ein Phasenkürzel, ein Datum) und kosteten je eine volle Formularzeile.
   Der Abstand nach unten kommt weiter aus .form-group, deshalb nur ein
   Spalten-Gap. */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
textarea,
select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 1rem;
}

textarea {
    resize: vertical;
}

/* Beschreibung im Editor: Schrift fester Breite, damit Listen und Einzüge untereinander stehen
   (docs/archive/PLAN-2026-10-ux-editor.md, Schritt 3). Die Hinterlegung der freigegebenen Abschnitte
   übernimmt die Schrift per getComputedStyle und bleibt deckungsgleich. */
#beschreibung {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.95rem;
    line-height: 1.5;
}

.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: normal;
}

.form-actions {
    margin-top: 1.5rem;
    display: flex;
    gap: 1rem;
}

/* Login */
.login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #1e3a5f;
}

.login-container {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    width: 100%;
    max-width: 400px;
}

.login-container h1 {
    text-align: center;
    margin-bottom: 1.5rem;
    color: #1e3a5f;
}

.error {
    background: #fee2e2;
    color: #991b1b;
    padding: 0.75rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}

/* Filters */
.filters {
    background: white;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.filter-form {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.filter-form input[type="text"] {
    width: auto;
    min-width: 200px;
}

.filter-form select {
    width: auto;
}

/* Table */
table {
    width: 100%;
    background: white;
    border-collapse: collapse;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

th, td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
}

th {
    background: #f9fafb;
    font-weight: 600;
}

tr:hover {
    background: #f9fafb;
}

.datum {
    width: 120px;
    white-space: nowrap;
}

/* Aktionsspalte der Übersichtstabelle. Die Detailansicht benutzt diese Klasse seit
   docs/archive/PLAN-2026-09-ansicht.md, Schritt 1, NICHT mehr: Dort erzwang die feste Breite
   den Umbruch zwischen »Zurück« und »Bearbeiten«, siehe .arbeit-aktionen. */
.actions {
    width: 180px;
}

.actions a {
    margin-right: 1rem;
}

/* Übersicht: Bauteil, Phase und Kategorien. Datum (120 px) und Aktionen (180 px) sind
   gesetzt, Bauteil und Phase bekommen je eine schmale feste Breite, den Rest teilen
   sich Titel und Kategorien. */
.bauteil-zelle,
.projektphase-zelle {
    width: 110px;
}

.kategorien-zelle .kategorie {
    margin-bottom: 0.25rem;
}

.no-results {
    background: white;
    padding: 2rem;
    text-align: center;
    border-radius: 8px;
}

/* Detail View */
.arbeit-detail {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.arbeit-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.arbeit-header h2 {
    margin-bottom: 0.5rem;
}

/* Schaltflächenzeile der Detailansicht (docs/archive/PLAN-2026-09-ansicht.md, Schritt 1): steht
   unter dem Text, nicht mehr im Kopf, und hält »Zurück« und »Bearbeiten« nebeneinander.
   Bewusst nicht .actions — deren feste Breite von 180 px gilt der Spalte der
   Übersichtstabelle und brach die beiden Schaltflächen hier um. */
.arbeit-aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1.5rem 0 2rem;
}

.meta {
    color: #6b7280;
    margin-bottom: 1rem;
}

.meta span {
    margin-right: 1.5rem;
}

.folgetermin {
    color: #b45309;
}

/* Schritt 3: Eintrag gehört nicht zum aktuell aktiven Objekt */
.objekt-kennzeichnung {
    display: inline-block;
    background: #fef3c7;
    color: #92400e;
    padding: 0.15rem 0.6rem;
    border-radius: 9999px;
    font-weight: 600;
}

.objekt-umschalter {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.kategorien {
    margin-bottom: 1.5rem;
}

.kategorie {
    display: inline-block;
    background: #dbeafe;
    color: #1e40af;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    margin-right: 0.5rem;
}

/* Kürzel mit hinterlegter Beschreibung (docs/archive/PLAN-2026-09-ansicht.md, Schritt 3): Dass
   im Mouseover etwas steht, ist sonst nicht zu erraten. Der Ausschluss von title=""
   ist nötig, weil die Templates das Attribut immer setzen — auch dort, wo im Vokabular
   keine Beschreibung gepflegt ist. */
.kategorie[title]:not([title=""]),
.bauteil[title]:not([title=""]),
.projektphase[title]:not([title=""]),
.plan-marke[title]:not([title=""]) {
    cursor: help;
}

/* Gerendertes Markdown (markdown.Render). Kein white-space: pre-wrap mehr — das machte
   aus den Zeilenumbrüchen zwischen goldmarks Blöcken Leerzeilen, sodass vor h3 und
   Listen mehr Abstand stand als vor h2. Umbrüche im Absatz liefert jetzt WithHardWraps.
   Der globale Reset (* { margin: 0; padding: 0 }) nimmt Listen ihre Einrückung; die
   kommt hier zurück, auch für verschachtelte Unterpunkte. */
.beschreibung {
    margin-bottom: 2rem;
}

.beschreibung p,
.beschreibung ul,
.beschreibung ol,
.beschreibung pre,
.beschreibung blockquote,
.beschreibung hr {
    margin: 0 0 0.75rem;
}

.beschreibung h1,
.beschreibung h2,
.beschreibung h3,
.beschreibung h4,
.beschreibung h5,
.beschreibung h6 {
    line-height: 1.3;
    margin: 1.5rem 0 0.5rem;
}

.beschreibung > :first-child {
    margin-top: 0;
}

.beschreibung ul,
.beschreibung ol {
    padding-left: 1.5rem;
}

.beschreibung li + li {
    margin-top: 0.25rem;
}

.beschreibung li > ul,
.beschreibung li > ol {
    margin: 0.25rem 0 0;
}

/* Lockere Liste (Leerzeile zwischen den Punkten): goldmark packt jeden Punkt in ein <p>. */
.beschreibung li > p {
    margin-bottom: 0.25rem;
}

.beschreibung blockquote {
    border-left: 3px solid #d1d5db;
    padding-left: 1rem;
    color: #555;
}

.beschreibung pre {
    overflow-x: auto;
}

/* Freigegebener Abschnitt (docs/archive/PLAN-2026-09-abschnitt-freigabe.md, Schritt 7):
   blauer Streifen und zart blaue Hinterlegung, Mouseover (title) mit den Freigaben.
   markdown.Render hüllt ihn in eine <section>. Der Abstand vor der Überschrift wandert auf
   die Hülle, sonst begänne der Streifen über einer leeren Zeile.

   Der Streifen steht LINKS vom Textrand, der Text rückt nicht ein: Die Hülle zieht sich
   um 1rem nach links heraus (negativer Außenabstand) und gibt denselben Betrag als
   Innenabstand zurück. 1rem passt in den Innenabstand von .arbeit-detail, auch auf dem
   Handy (dort 1rem). Rechts dasselbe, damit die Hinterlegung nicht am letzten Buchstaben
   endet.

   Ein freigegebener »###« in einem freigegebenen »##« liegt in dessen Hülle. Sein Streifen
   steht 2px rechts neben dem äußeren, ebenfalls vor dem Textrand (−10px statt −1rem), und
   die halbtransparente Hinterlegung wird dort doppelt so kräftig. */
.beschreibung .abschnitt-freigegeben {
    border-left: 4px solid #2563eb;
    background: rgba(37, 99, 235, 0.06);
    margin: 1.5rem -0.5rem 0.75rem -1rem;
    padding: 0.5rem 0.5rem 0.25rem calc(1rem - 4px);
    border-radius: 0 6px 6px 0;
}

.beschreibung .abschnitt-freigegeben .abschnitt-freigegeben {
    margin-left: -10px;
    margin-right: 0;
    padding-left: 6px;
}

.beschreibung .abschnitt-freigegeben > :first-child {
    margin-top: 0;
}

.beschreibung .abschnitt-freigegeben > :last-child {
    margin-bottom: 0.25rem;
}

/* Kopierknöpfe an der Überschrift (je Freigabe einer, beschriftet mit ihrer
   Bezeichnung): dieselbe Bauform wie an der Anhangskachel, in normaler Schrift statt der
   der Überschrift. */
.beschreibung .abschnitt-kopieren {
    vertical-align: middle;
    margin-left: 0.25rem;
    font-weight: normal;
    line-height: 1.4;
}

/* Kennzeichen »freigegeben« an der Überschrift: Mouseover gibt es am iPhone nicht, das
   Kennzeichen springt deshalb auf den Block #freigaben. */
.abschnitt-marke {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.5rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.6;
}

/* Schaltfläche »Freigeben« an jeder Überschrift (view.html setzt sie per Skript ein).
   Zurückhaltend grau, erst beim Zeigen blau — sie steht an jeder Überschrift und soll den
   Text nicht übertönen. Aufgeklappt wird sie zum Formular unter der Überschrift, in
   normaler Schrift statt der der Überschrift. */
.abschnitt-freigeben {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.5rem;
    font-size: 1rem;
    font-weight: normal;
    line-height: 1.6;
}

/* Stift (Bearbeiten ab hier) und Kettenglied (Freigeben) sind reine Symbol-Schaltflächen,
   quadratisch und gleich groß; der Text steht im title. */
a.abschnitt-bearbeiten,
.abschnitt-freigeben > .btn-edit {
    background: #e5e7eb;
    color: #374151;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    justify-content: center;
    box-sizing: border-box;
}

.abschnitt-bearbeiten {
    vertical-align: middle;
    margin-left: 0.5rem;
    font-size: 1rem;
    font-weight: normal;
    text-decoration: none;
}

.abschnitt-bearbeiten + .abschnitt-freigeben {
    margin-left: 0.25rem;
}

a.abschnitt-bearbeiten:hover,
.abschnitt-freigeben > .btn-edit:hover,
.abschnitt-freigeben[open] > .btn-edit {
    background: #2563eb;
    color: white;
}

.abschnitt-freigeben[open] {
    display: block;
    margin: 0.5rem 0 0;
    padding: 0.75rem 1rem;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.abschnitt-freigeben[open] > .btn-edit {
    margin-bottom: 0.75rem;
}

/* Warnung über der Beschreibung: eine Kennung steht doppelt im Text. */
.abschnitt-warnung {
    color: #92400e;
    background: #fef3c7;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
}

/* sql/012_kostenplaene.sql, Schritt 1e/6: Bauteil (ersetzt den früheren Bauabschnitt —
   die Leistungsphase LPH1-9 sitzt seither in der Kostenstelle der Kosten-Position). */
.bauteil {
    display: inline-block;
    background: #ede9fe;
    color: #5b21b6;
    padding: 0.15rem 0.6rem;
    border-radius: 9999px;
    font-weight: 600;
}

/* Projektphase an der Arbeit (sql/012_kostenplaene.sql, Schritt 1f/6): eigene, gedämpftere
   Farbe als Bauteil — beide Pillen stehen nebeneinander in derselben Zeile/Zelle. */
.projektphase {
    display: inline-block;
    background: #e0f2fe;
    color: #075985;
    padding: 0.15rem 0.6rem;
    border-radius: 9999px;
    font-weight: 600;
}

/* Eine abgeleitete Phase an der Arbeit (docs/PLAN-2026-09-phase-ableiten.md): .abgeleitet
   allein setzt nur Schriftfarbe und Kursive — auf der kräftigen Pille sähe das nach
   blasser Schrift auf gepflegtem Grund aus. Deshalb bekommt der Grund dieselbe Dämpfung,
   die Schriftfarbe erbt sie von .abgeleitet. */
.projektphase.abgeleitet {
    background: #f3f4f6;
    font-weight: 500;
}

/* Befund in der Phasenspalte der Übersicht: eigene Zeile unter der Pille, statt eines
   <br> im Template. »mehrere Stufen« bricht in der 110 px schmalen Spalte um; das ist in
   einer Spalte, die sonst ein Zeichen trägt, verkraftbar. */
.projektphase-zelle .hinweis {
    display: block;
    margin-top: 0.25rem;
}

/* Derselbe Befund ausgeschrieben, im Kopf der Arbeitsansicht. .meta darüber gibt allen
   Kindern 1,5 rem Abstand nach rechts; hier zählt der Abstand nach oben. */
.phasen-befund {
    margin-top: 0.5rem;
    max-width: 60ch;
}

/* Plan-Pille an der Anhangskachel (sql/013_plaene.sql, docs/archive/PLAN-2026-09-planlisten.md,
   Schritt 3): eigene Farbe, damit sie nicht mit .bauteil verwechselt wird — beide können
   an derselben Kachel bzw. Zeile nebeneinander stehen. */
.plan-marke {
    display: inline-block;
    background: #dcfce7;
    color: #166534;
    padding: 0.15rem 0.6rem;
    border-radius: 9999px;
    font-weight: 600;
    margin: 0.35rem 0;
}

/* Behälter mit mehr als einer Datei (docs/archive/PLAN-2026-09-anhang-container.md,
   Entscheidung 10): sichtbar ohne Aufklappen, nach dem Muster von .plan-marke, aber
   gedämpfter — die zweite Datei ist eine Eigenschaft des Anhangs, keine eigene Rolle
   wie »Plan«. Bei genau einer Datei (353 von 357) erscheint gar nichts. */
.dateien-marke {
    display: inline-block;
    background: #e5e7eb;
    color: #374151;
    padding: 0.15rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 600;
    margin: 0.35rem 0;
}

.dateien-marke[title]:not([title=""]) {
    cursor: help;
}

/* Versionspille an einem Plan mit Historie (docs/archive/PLAN-2026-10-planer-rolle.md, Schritt 4):
   nach dem Muster von .dateien-marke, eigene Farbe gegen .plan-marke/.dateien-marke
   abgesetzt — Einstieg in die Versionsliste der Ansichtsseite. */
.version-marke {
    display: inline-block;
    background: #dbeafe;
    color: #1e40af;
    padding: 0.15rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 600;
    margin: 0.35rem 0;
    cursor: help;
}

/* V1 trägt keinen title (die Herkunft steht daneben als Text) — also auch keinen Hilfe-Cursor. */
.ansicht-herkunft .version-marke {
    cursor: default;
}

/* Die Zeile mit der Herkunft ist lang und bricht um — kein Kapselrand, Zeiger statt Hilfe. */
.ansicht-versionen > summary.version-marke {
    border-radius: 0.75rem;
    cursor: pointer;
}

.anhang-dateien > summary {
    cursor: pointer;
    font-size: 0.8125rem;
    color: #4b5563;
}

.anhang-dateien-liste {
    list-style: none;
    margin: 0.35rem 0 0;
    padding: 0;
    font-size: 0.8125rem;
}

.anhang-dateien-liste li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    padding: 0.15rem 0;
}

/* Die Knöpfe je Datei stehen in eigenen Formularen und würden sonst untereinander
   brechen. */
.anhang-datei-aktionen {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
}

.anhang-datei-aktionen form {
    margin: 0;
}

/* Zweite Endung in der Spalte »Datei« auf /plaene ("plan.pdf + dwg") und der passende
   Dateiname in der Trefferliste der Anhangssuche — beide gedämpft: Sie ergänzen die
   Angabe daneben, sie ersetzen sie nicht. */
.weitere-datei,
.anhang-treffer-datei {
    color: #6b7280;
    font-size: 0.8125rem;
}

/* Feldbeschreibung unter einem Formularfeld — kleiner, gedämpfter Fließtext, anders als
   .hinweis (Warnfarbe für "ohne Nachweis"/"abgelaufen"). Bislang nur an Bauteil
   (sql/012_kostenplaene.sql, Schritt 1e/6), um die Faustregel gegen die Kategorie
   unterzubringen. */
.feld-hinweis {
    color: #6b7280;
    font-size: 0.8125rem;
    margin-top: 0.25rem;
}

/* Kosten (Schritt 9) */
.kosten {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
}

.kosten h3 {
    margin-bottom: 1rem;
}

.kosten-erfassen {
    margin-top: 1.5rem;
}

.kosten-erfassen summary {
    cursor: pointer;
    font-weight: 600;
    margin-bottom: 1rem;
}

.kosten-tabelle {
    width: 100%;
    background: white;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.kosten-tabelle th, .kosten-tabelle td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
}

/* .betrag gewinnt gegen die allgemeine th/td-Regel oben — Klasse+Element schlägt Klasse */
.kosten-tabelle th.betrag,
.kosten-tabelle td.betrag {
    text-align: right;
}

.kosten-tabelle tfoot td {
    font-weight: 600;
    border-top: 2px solid #d1d5db;
    border-bottom: none;
}

/* Aktionszeile der Kostentabelle (Schritt 2 aus docs/PLAN.md), dieselbe Bauform wie
   .anhang-aktionen an der Anhangskachel: Bearbeiten und Löschen liegen nebeneinander in
   einer eigenen Zeile unter dem Kosteneintrag. Der Löschen-Knopf stand zunächst in einer
   sechsten Tabellenspalte rechts, während Bearbeiten darunter saß — zwei Schaltflächen
   zu einem Eintrag an zwei Orten. Die Zelle trägt nicht die Polsterung der Datenzeilen
   darüber, sonst wirkte sie wie eine weitere, leere Kostenzeile. */
.kosten-bearbeiten td {
    padding: 0 0.75rem 0.5rem;
    border-bottom: 1px solid #e5e7eb;
}

/* flex-wrap zusammen mit der [open]-Regel unten gibt dem aufgeklappten Formular die
   volle Zeilenbreite; Löschen rückt dann darunter — wie an der Anhangskachel. */
.kosten-aktionen {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem;
}

/* .delete-form bringt für den Einsatz außerhalb dieser Zeile einen eigenen Abstand mit,
   der hier die beiden Schaltflächen gegeneinander versetzen würde. */
.kosten-aktionen .delete-form {
    margin-top: 0;
}

.kosten-bearbeiten-formular {
    flex: 0 0 auto;
}

.kosten-bearbeiten-formular[open] {
    flex: 1 0 100%;
    padding-bottom: 0.5rem;
}

.kosten-bearbeiten-formular[open] .btn-edit {
    margin-bottom: 0.75rem;
}

.betrag {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Drilldown-Links auf /kosten (docs/PLAN-2026-09-kosten-drilldown.md, Schritt 4): dieselbe
   Linkfarbe wie überall im Projekt, kein eigener Zierrat -- .erklaert ist an denselben
   Zeilen bereits vergeben (Mouseover-Erklärung der Phasen), eine zweite Markierung
   erklärte nichts mehr. white-space: nowrap kommt schon von .betrag; der Link darf den
   Umbruch nicht einführen. */
.kosten-tabelle td.betrag a,
.kosten-gesamt a {
    color: #2563eb;
}

.hinweis {
    color: #92400e;
    font-size: 0.875rem;
}

/* Eine Stelle, an der eine Mouseover-Erklärung (title) zu holen ist. Phasencodes wie
   "2c" sind ohne Erklärung nicht lesbar, ein title-Attribut allein aber unsichtbar --
   die gepunktete Unterstreichung und der Hilfe-Zeiger sagen, dass hier etwas steht.
   Bewusst nur an den Phasen (Abschnitt, Tabellenköpfe, Zellen) und nicht an jedem title
   im Projekt: Eine Markierung, die überall steht, zeigt nichts mehr an. Auswahlfelder
   und Pillen bleiben ebenfalls unmarkiert -- die laden von sich aus zum Draufgehen ein. */
.erklaert {
    text-decoration: underline dotted #9ca3af;
    text-underline-offset: 0.2em;
    cursor: help;
}

/* Eine leere Phasenzelle hat keinen Text, den man unterstreichen könnte -- der
   Hilfe-Zeiger bleibt, die Erklärung dazu steht im Spaltenkopf. */
td.erklaert:empty {
    cursor: default;
}

/* Eine wirksame Projektphase, die aus der Kostenstelle abgeleitet ist (kostengliederung.pph
   statt kosten.pph, siehe Kosten.IstPPHAbgeleitet) — gedämpft, damit sie nicht wie ein
   gepflegter Wert aussieht (docs/archive/PLAN-2026-09-kostenplaene.md, Schritt 5e). */
.abgeleitet {
    color: #9ca3af;
    font-style: italic;
}

.kosten-summen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.kosten-gesamt, .kosten-gruppe {
    background: white;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.kosten-gesamt {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
}

.kosten-gesamt strong {
    font-size: 1.5rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Die drei Gliederungen auf /kosten (docs/archive/PLAN-2026-09-kostenplaene.md, Schritt 5):
   ÖNORM B 1801-1, Projektphasen, Schätzung Kuen. Eigene Karte je Abschnitt, dieselbe
   Bauform wie .kosten-gesamt/.kosten-gruppe darin. */
.kosten-abschnitt {
    background: white;
    padding: 1rem 1.5rem 1.5rem;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    margin-bottom: 1.5rem;
}

.kosten-abschnitt .kosten-summen {
    margin-bottom: 0;
}

.kosten-abschnitt .kosten-gruppe {
    box-shadow: none;
    padding: 0;
}

.kosten-abschnitt h4 {
    margin-bottom: 0.25rem;
}

/* Grobelement-Zeilen unter ihrem Kostenbereich einrücken (Schritt 5a): '2' bleibt
   flach, '2B' eine Stufe, eine Elementzeile ('7C.LPH3') zwei Stufen tiefer. */
.kostengruppe-ebene-2 td:first-child {
    padding-left: 1.5rem;
}

.kostengruppe-ebene-3 td:first-child {
    padding-left: 3rem;
}

/* Aufklappbarer ÖNORM-B-1801-1-Baum (PLAN-2026-10-kostengliederung-baum.md),
   ersetzt die beiden Tabellen »Nach Kostenbereich« und »Nach Grobelement«.
   Jede Zeile (Kopf, Summary, Div, Fuss) ist ein CSS-Grid mit denselben
   Spaltenbreiten, damit Beträge und Anteile über alle Ebenen fluchten. */
.kostenbaum {
    width: 100%;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.kostenbaum-kopf,
.kostenbaum-zeile,
.kostenknoten-zeile,
.kostenbaum-fuss {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 7.5rem 4.5rem;
    padding: 0.4rem 0.75rem;
    border-bottom: 1px solid #e5e7eb;
    align-items: baseline;
}

.kostenbaum-kopf {
    font-weight: 600;
    font-size: 0.875rem;
    background: #f9fafb;
}

.kostenbaum-fuss {
    font-weight: 600;
    border-top: 2px solid #d1d5db;
    border-bottom: none;
}

.kb-betrag,
.kb-anteil {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.kostenbaum a {
    color: #2563eb;
}

/* Eigener Pfeil statt Browser-Disclosure-Marker; gleich breit wie
   der Platzhalter .kb-platz in Blattzeilen (display:inline-block, 1.2em). */
.kostenbaum summary {
    list-style: none;
    cursor: pointer;
}
.kostenbaum summary::-webkit-details-marker {
    display: none;
}
.kb-pfeil,
.kb-platz {
    display: inline-block;
    width: 1.2em;
    flex-shrink: 0;
}
.kostenknoten > summary .kb-pfeil::before { content: "▸"; color: #6b7280; }
.kostenknoten[open] > summary .kb-pfeil::before { content: "▾"; color: #6b7280; }

/* Einrückung nach Ebene; Ebene 1 braucht keinen Extra-Abstand. */
.kostenknoten.ebene-2 > summary .kb-label,
.kostenknoten-zeile.ebene-2 .kb-label { padding-left: 1.5rem; }

.kostenknoten.ebene-3 > summary .kb-label,
.kostenknoten-zeile.ebene-3 .kb-label { padding-left: 3rem; }

/* Restzeile (»ohne Grobelement« / »ohne Element«): kursiv, gedämpfte Farbe. */
.kostenknoten-zeile.rest .kb-label { font-style: italic; color: #6b7280; }

/* Leer-Knoten (Summe 0): gedämpft — kein Link, nur Anzeige. */
.kostenknoten.leer > summary,
.kostenknoten-zeile.leer { color: #6b7280; }

/* Kennzahlen BWK/BAK/ERK/GEK (Schritt 5a): gerechnet, nicht gespeichert — siehe
   kostenKostenbereich in handlers/kosten.go. */
.kennzahlen {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
}

.kennzahlen > div {
    display: flex;
    flex-direction: column;
}

.kennzahlen dt {
    font-size: 0.75rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.kennzahlen dd {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* Die Kuen-Spalte der flachen Liste auf /kosten (Schritt 5e) bekommt bewusst KEIN
   display:none unter 640px, anders als seinerzeit die Bauabschnitt-Spalte der
   Arbeitenliste: .kosten-tabelle ist inzwischen ihr eigener horizontaler
   Scroll-Container (siehe @media weiter unten), acht Spalten laufen dort nebeneinander
   weiter statt eine zu verlieren. */
.kuen-zelle {
    white-space: nowrap;
}

.kosten-ohne-nachweis {
    margin-bottom: 1.5rem;
}

/* Beleg-Kopfdaten (docs/PLAN-2026-09-belege.md, Schritt 3): einfache Definitionsliste,
   zwei Spalten je Zeile ab genug Platz, darunter (Mobilansicht) einspaltig gestapelt. */
.beleg-daten {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.5rem 1.5rem;
    margin-bottom: 1rem;
}

.beleg-daten div {
    display: flex;
    gap: 0.5rem;
}

.beleg-daten dt {
    color: #6b7280;
    min-width: 8rem;
}

.beleg-daten dd {
    font-weight: 500;
}

/* Probe auf /beleg/{id}: Summe der Positionen gegen die Belegsumme. */
.beleg-probe {
    background: white;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin: 1rem 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.beleg-probe-abweichung {
    background: #fef2f2;
    color: #b91c1c;
}

/* Belegliste /belege (docs/PLAN-2026-09-belegliste.md, Schritt 4). Zwei Ebenen in einer
   Tabelle: je Beleg ein <tbody> mit der Belegzeile und darunter seinen Positionen. Die
   Abgrenzung läuft deshalb über die Gruppe (obere Linie je tbody) statt über
   Zebrastreifen je Zeile — die würden hier quer zur Gliederung laufen. */
.belegliste {
    margin-top: 1.5rem;
    /* Der Scroll-Container ist der umgebende div, NICHT die Tabelle: Eine Tabelle, die
       per min-width breiter als ihr Kasten ist, scrollt sich nicht selbst — sie schiebt
       stattdessen die ganze Seite seitlich weg. Beides steht hier und nicht in der
       Media-Query, weil fünf Spalten auch zwischen 640 px und 800 px nicht in die
       Breite passen und dort sonst niemand zuständig wäre. */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* table-layout: fixed macht die colgroup-Breiten verbindlich statt zu einem Vorschlag,
   den der längste Zelleninhalt überstimmt. Die Mindestbreite ist die Gegenprobe dazu:
   Unter ~800 px ergeben fünf feste Spalten nur noch Wortsalat — ein Rechnungsdatum
   bricht dann mitten entzwei. overflow-wrap fängt ab, was trotzdem nicht in seine
   Spalte passt (lange Dateinamen sind über kuerzeDateiname ohnehin begrenzt). */
.belegliste .kosten-tabelle {
    table-layout: fixed;
    min-width: 800px;
}

.belegliste .kosten-tabelle td,
.belegliste .kosten-tabelle th {
    overflow-wrap: anywhere;
}

.belegliste tbody.beleg {
    border-top: 2px solid #e5e7eb;
}

/* Gruppenkopf mit dem Aussteller und seiner Zwischensumme. Er ist der Grund für die
   ganze Ansicht: Die Belege eines Ausstellers untereinander zeigen eine Lücke, die in
   der chronologischen Liste zwischen fremden Zeilen untergeht. */
.belegliste tbody.aussteller-kopf th,
.belegliste tbody.aussteller-kopf td {
    background: #f3f4f6;
    border-top: 2px solid #d1d5db;
    border-bottom: none;
    font-weight: 600;
    padding-top: 0.75rem;
}

/* Die Einrückung sitzt am ersten td, nicht am tr: Ein <tr> nimmt weder padding noch
   text-indent an. */
.belegliste tr.position td {
    font-size: 0.875rem;
    color: #4b5563;
    border-bottom: none;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.belegliste tr.position td:first-child {
    padding-left: 2rem;
}

/* Die Kostenstelle steht vor dem Arbeitstitel in derselben Zelle. Betrag, Belegsumme,
   Zwischensumme und Gesamtsumme teilen sich dafür EINE Spalte — die Probe »Positionen
   ergeben die Belegsumme« liest sich sonst nicht ab. Die frühere zusätzliche
   Bauabschnitt-Pille (Bauteil der Arbeit) ist mit Kosten.Bauabschnitt entfallen
   (sql/012_kostenplaene.sql, Schritt 6) — die Kostenstelle der Position selbst steht
   jetzt allein hier. */
.belegliste tr.position .kostenstelle {
    display: inline-block;
    min-width: 3.5rem;
    color: #6b7280;
    font-weight: 600;
}

/* Planliste /plaene (docs/archive/PLAN-2026-09-planlisten.md, Schritt 5): eigener
   Scroll-Container wie .belegliste (siehe dort für die Begründung), neun schmale
   Spalten statt fünf, daher die größere Mindestbreite. */
.planeliste {
    margin-top: 1.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.planeliste .kosten-tabelle {
    table-layout: fixed;
    min-width: 1100px;
}

.planeliste .kosten-tabelle td,
.planeliste .kosten-tabelle th {
    overflow-wrap: anywhere;
}

.planeliste tbody.plantyp-kopf th {
    background: #f3f4f6;
    border-top: 2px solid #d1d5db;
    font-weight: 600;
}

.planeliste-anzahl {
    color: #6b7280;
    margin-top: 0.75rem;
}

/* Verweis von /kosten auf die Belegliste, an der Stelle der früheren Probenliste. */
.belege-verweis {
    background: white;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Umschalter für die Ordnung, neben dem Filterformular. */
.sortierung-form {
    align-items: center;
}

.sortierung-form label {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* Rückwärts-Referenzen (Schritt 4) */
.verweise {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
}

.verweise h3 {
    margin-bottom: 1rem;
}

/* Anhänge */
.anhaenge {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
}

.anhaenge h3 {
    margin-bottom: 1rem;
}

/* Gruppen der Anhänge (docs/archive/PLAN-2026-10-anhang-sortierung.md): einklappbar, Titel als h3.
   Dreieck wie im Kostenbaum; ohne JavaScript, Standard ist ausgeklappt. */
.anhang-gruppe {
    margin-top: 1.5rem;
}

.anhang-gruppe:first-of-type {
    margin-top: 0;
}

.anhang-gruppe > summary {
    cursor: pointer;
    list-style: none;
    margin-bottom: 0.75rem;
}

.anhang-gruppe > summary::-webkit-details-marker {
    display: none;
}

.anhang-gruppe > summary > h3 {
    display: inline;
    margin: 0;
}

.anhang-gruppe > summary::before {
    content: "\25BE";
    display: inline-block;
    width: 1.25em;
    color: #6b7280;
}

.anhang-gruppe:not([open]) > summary::before {
    content: "\25B8";
}

/* Eingeklappt: eine Zeile »…« unter dem Titel. Sie liegt im summary und klappt beim
   Klick deshalb ebenfalls auf. */
.anhang-gruppe:not([open]) > summary::after {
    content: "\2026";
    display: block;
    margin-left: 1.25em;
    color: #6b7280;
}

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

.anhang img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 4px;
}

/* PDF-Kachel (docs/archive/PLAN-2026-09-ansicht.md, Schritt 2): dasselbe Raster wie beim Foto,
   aber die Seite wird eingepasst statt beschnitten — bei "cover" bliebe von einer
   Rechnung nur der mittlere Streifen übrig. Der weiße Grund hinter dem eingepassten
   Bild lässt die Seite als Blatt erscheinen. */
.anhang-pdf img {
    object-fit: contain;
    background: white;
    border: 1px solid #e5e7eb;
}

/* Der Sprung zum Hochladen ist nur am Handy da (siehe @media unten). */
.anhang-sprung {
    display: none;
}

.anhang-bezeichnung {
    font-size: 0.875rem;
    font-weight: 600;
    margin-top: 0.5rem;
    word-break: break-word;
}

.anhang-beschreibung {
    font-size: 0.875rem;
    color: #6b7280;
    margin-top: 0.5rem;
}

.file-link {
    display: block;
    padding: 1rem;
    background: #f3f4f6;
    border-radius: 4px;
    text-align: center;
}

/* Ansichtsseite eines Anhangs mit Vorschau (docs/PLAN-2026-09-anhang-blaettern.md, Schritt 6):
   Bühne (Bild oder PDF-Rahmen mit Pfeilen an den Rändern) und Angaben darunter, je eine
   eigene weiße Karte wie .arbeit-detail. Schmaler als der übrige Inhalt (main ist
   1200px) — ein Bild in voller Anwendungsbreite wirkt auf einem großen Bildschirm nur
   verwaschen. */
.ansicht {
    max-width: 900px;
}

.ansicht-kopf {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.ansicht-zaehler {
    color: #6b7280;
    font-size: 0.875rem;
}

.ansicht-buehne {
    position: relative;
    background: white;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    text-align: center;
}

.ansicht-bild {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
}

/* PDF-Rahmen: feste Höhe statt einer, die dem Seitenverhältnis des Dokuments folgt — ein
   <iframe> kennt seinen Inhalt nicht im Voraus. "Im PDF-Betrachter öffnen" daneben ist am
   Telefon der eigentliche Weg, ein Rahmen ist dort zäh zu bedienen. */
.ansicht-pdf-rahmen {
    height: min(80vh, 900px);
}

.ansicht-pdf {
    width: 100%;
    height: 100%;
    border: 1px solid #e5e7eb;
}

.ansicht-pdf-hinweis {
    text-align: center;
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

/* Pfeile sind Zeichen (U+2039/203A), keine Bilddateien — über die Bildränder gelegt, mit
   mindestens 44px Grundfläche (Konvention "Mobil zuerst im Lesepfad"). Fehlt ein Pfeil
   (erster/letzter Halt der Folge), steht dort nichts, statt grau und tot dazustehen. */
.ansicht-pfeil {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #1e3a5f;
    font-size: 1.75rem;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.ansicht-pfeil:hover {
    background: white;
    text-decoration: none;
}

.ansicht-vorher {
    left: 0.5rem;
}

.ansicht-nachher {
    right: 0.5rem;
}

.ansicht-angaben {
    background: white;
    margin-top: 1rem;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.ansicht-download {
    margin-top: 0.75rem;
}

.delete-form {
    margin-top: 0.5rem;
}

.btn-delete {
    background: #dc2626;
    color: white;
    border: none;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75rem;
}

.btn-delete:hover {
    background: #b91c1c;
}

.upload-section {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
}

.upload-section h3 {
    margin-bottom: 1rem;
}

/* Löschen-Bestätigungsseite (Schritt 3 aus docs/PLAN.md, templates/loeschen.html): macht
   sichtbar, was am Eintrag hängt, bevor er verschwindet — die Seite selbst ist die
   Bestätigung, kein confirm()-Dialog. */
.loeschen-meta {
    color: #6b7280;
    margin-bottom: 1.5rem;
}

.loeschen-uebersicht {
    list-style: disc;
    padding-left: 1.25rem;
    margin: 0 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.loeschen-anhaenge {
    margin: 0.5rem 0 0 1.25rem;
    padding: 0;
    font-size: 0.875rem;
    color: #6b7280;
}

.loeschen-bleibt {
    color: #15803d;
}

.loeschen-mitgeloescht {
    color: #b91c1c;
}

.loeschen-sperre {
    color: #92400e;
    font-weight: 600;
}

/* Edit Form */
.arbeit-edit {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.arbeit-edit h2 {
    margin-bottom: 1.5rem;
}

.upload-section summary,
.anhang-verknuepfen summary {
    cursor: pointer;
    font-weight: 600;
    margin-bottom: 1rem;
}

/* Dezent wie die Beschreibung — der Dateiname ist eine Nebenangabe, keine
   Überschrift der Kachel. Genau eine Zeile: Zu lange Namen enden auf … , der
   vollständige steht im title-Attribut. */
.anhang-dateiname {
    font-size: 0.875rem;
    color: #6b7280;
    margin-top: 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Aktionen der Kachel: Bearbeiten und Löschen nebeneinander in einer Zeile.
   flex-wrap zusammen mit der [open]-Regel unten gibt dem aufgeklappten Formular
   die volle Kachelbreite; Löschen rückt dann darunter. */
.anhang-aktionen {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* .delete-form bringt für den Einsatz außerhalb dieser Zeile einen eigenen
   Abstand mit, der hier die beiden Schaltflächen gegeneinander versetzen würde. */
.anhang-aktionen .delete-form {
    margin-top: 0;
}

/* In der Trefferliste steht der Dateiname hinter der Bezeichnung statt in einer
   eigenen Flex-Spalte — inline-block, damit die Kürzung dort überhaupt greift. */
.anhang-treffer .anhang-dateiname {
    display: inline-block;
    max-width: 100%;
    vertical-align: bottom;
    margin: 0 0 0 0.4rem;
}

/* Ansichtsseite: Dateiname und Aufnahmezeitpunkt in einer Zeile, die zwischen den Teilen
   umbricht (iPhone-Breite), nie mitten in einem Teil. */
.anhang-dateiname.ansicht-dateizeile {
    white-space: normal;
    overflow: visible;
}

.ansicht-dateiname,
.ansicht-aufnahme {
    white-space: nowrap;
}

.ansicht-dateiname {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

.anhang-dateiname-leer {
    color: #9ca3af;
}

/* Menü »Aktionen« an der Anhangskachel: geschlossen nur ein Knopf, aufgeklappt die
   bisherige Zeile der Schaltflächen. */
.anhang-aktionen-menue {
    margin-top: 0.5rem;
}

.anhang-aktionen-menue > summary {
    display: inline-flex;
}

.anhang-aktionen-menue[open] > summary {
    margin-bottom: 0.5rem;
}

.anhang-aktionen-menue .anhang-aktionen {
    margin-top: 0;
}

.anhang-bearbeiten {
    flex: 0 0 auto;
}

/* Die Zusammenfassung ist die Schaltfläche »Bearbeiten«: blau, in Größe und Form
   wie das rote Löschen daneben (.btn-delete). */
.btn-edit {
    background: #2563eb;
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
    /* Das Dreieck der details-Zusammenfassung weg — in einer Schaltfläche stünde
       sonst zweierlei Bedienung nebeneinander. display für Safari und ältere
       WebKit-Versionen (dort greift list-style auf summary nicht), list-style für
       Firefox, ::marker und ::-webkit-details-marker als dritter Weg für
       Safari-Versionen, die den Marker trotz display: flex zeichnen. */
    display: inline-flex;
    list-style: none;
    align-items: center;
    gap: 0.3rem;
}

.btn-edit::marker,
.btn-edit::-webkit-details-marker {
    content: "";
    display: none;
}

.btn-edit svg {
    width: 0.95em;
    height: 0.95em;
}

.btn-edit:hover {
    background: #1d4ed8;
}

.anhang-bearbeiten[open] {
    flex: 1 0 100%;
}

.anhang-bearbeiten[open] .btn-edit {
    margin-bottom: 0.75rem;
}

/* Dritte Schaltfläche der Anhangskachel, gleiche Bauform wie .anhang-bearbeiten. */
.anhang-freigeben {
    flex: 0 0 auto;
}

.anhang-freigeben[open] {
    flex: 1 0 100%;
}

.anhang-freigeben[open] .btn-edit {
    margin-bottom: 0.75rem;
}

/* Vierte Schaltfläche der Anhangskachel (docs/archive/PLAN-2026-09-planlisten.md, Schritt 3),
   gleiche Bauform wie .anhang-bearbeiten/.anhang-freigeben. */
.anhang-plan {
    flex: 0 0 auto;
}

.anhang-plan[open] {
    flex: 1 0 100%;
}

.anhang-plan[open] .btn-edit {
    margin-bottom: 0.75rem;
}

/* Freigabe-Links (docs/PLAN.md, Schritt 4) im Block #freigaben der Detailansicht,
   gleiche Grundform wie .kosten bzw. .anhaenge (Abstand zum Block darüber). */
.freigaben {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
}

.freigaben h3 {
    margin-bottom: 1rem;
}

.freigabe-erstellen-formular {
    margin-bottom: 1rem;
}

.freigaben-liste {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.freigabe-eintrag {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.75rem 1rem;
}

/* Abgelaufen, aber bewusst nicht ausgeblendet — die Zeile bleibt sichtbar, damit klar
   ist, dass es diese Freigabe gab und dass sie nicht mehr funktioniert. */
.freigabe-abgelaufen {
    color: #9ca3af;
}

.freigabe-zeile {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

/* Markierbares, aber unveränderliches Eingabefeld: die ganze URL soll sich mit einem
   Klick markieren und kopieren lassen (siehe onclick="this.select()"), monospace macht
   den Token darin besser lesbar. */
.freigabe-url {
    flex: 1;
    min-width: 12rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8rem;
    background: #f9fafb;
}

/* Freigegebener Anhang: Die Schaltfläche »Freigeben« an der Kachel wird grün, sobald
   eine gültige Freigabe besteht — an der Kachel selbst ist sonst nicht zu sehen, dass
   diese Datei außer Haus ist. Abgelaufene Freigaben färben nicht mehr, sie geben nichts
   mehr preis. */
.btn-freigegeben {
    background: #15803d;
}

.btn-freigegeben:hover {
    background: #166534;
}

/* Marke »freigegeben« unter dem Vorschaubild der Anhangskachel (docs/archive/PLAN-2026-10-anhang-aktionen-ansicht.md):
   Das Aktionen-Menü mit dem grünen Knopf liegt jetzt in der Detailansicht, die Übersicht
   behält den Hinweis. Farbe wie .btn-freigegeben. */
.freigabe-marke {
    display: inline-block;
    background: #15803d;
    color: white;
    padding: 0.15rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 600;
    margin: 0.35rem 0;
}

/* Downloads links, Aktionen rechts in einer Zeile der Detailansicht. Aufgeklappt nimmt das
   Menü die volle Breite und rückt unter die Downloads; min-width: 0 und Umbruch halten die
   Seite am iPhone ohne waagrechten Überlauf. */
.ansicht-kopf {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem 1rem;
}

.ansicht-kopf h2 {
    margin: 0;
    min-width: 0;
}

/* Ohne Titel bleiben die Aktionen rechts. */
.ansicht-kopf > details {
    margin: 0 0 0 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.ansicht-kopf > details[open] {
    flex: 1 1 100%;
}

/* Der Knopf bleibt beim Aufklappen rechts auf Titelhöhe, statt unter den Titel zu
   springen: Das offene Menü nimmt die volle Breite der zweiten Zeile, nur sein Knopf wird
   an die Ecke oben rechts gehängt. Die Formulare darunter beginnen links. */
.ansicht-kopf {
    position: relative;
}

.ansicht-kopf > details[open] > summary {
    position: absolute;
    top: 0.25rem;
    right: 0;
    margin: 0;
}

/* Versionstabelle der Detailansicht: Nummer, Planstand, Herkunft, Dateien — in jeder Zeile
   dieselben Spalten. Nummer und Planstand brechen nicht um; Herkunft und Dateinamen dürfen
   es, damit die Tabelle am iPhone nicht breiter als die Seite wird. */
.ansicht-versionen-liste {
    border-collapse: collapse;
    margin-top: 0.5rem;
    font-size: 0.875rem;
}

.ansicht-versionen-liste td {
    padding: 0.2rem 1rem 0.2rem 0;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.ansicht-versionen-liste td:last-child {
    padding-right: 0;
}

.ansicht-versionen-liste .version-nummer,
.ansicht-versionen-liste .version-planstand {
    white-space: nowrap;
}

.ansicht-versionen-liste .version-nummer {
    font-weight: 600;
}

/* Kopierknopf daneben: legt den Freigabe-Link in die Zwischenablage. Gleiche Größe wie
   die übrigen Kachel-Schaltflächen, aber zurückhaltend gefärbt — er ist eine Beigabe zur
   grünen Schaltfläche, keine eigene Handlung an den Daten. */
.btn-kopieren {
    background: #4b5563;
    color: white;
    border: none;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.btn-kopieren:hover {
    background: #374151;
}

.btn-kopieren svg {
    width: 0.95em;
    height: 0.95em;
}

/* Kurze Rückmeldung nach dem Kopieren — ohne sie bleibt offen, ob der Klick gewirkt hat. */
.btn-kopieren-fertig {
    background: #15803d;
}

/* Freigaben einer Kachel stehen im aufgeklappten Freigeben-Bereich unter dem Formular. */
.anhang-freigaben-liste {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
}

.freigabe-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #6b7280;
}

/* Was eine Freigabe im Block #freigaben freigibt: »ganzer Eintrag« oder »Abschnitt
   ›Zeitplan‹« (docs/archive/PLAN-2026-09-abschnitt-freigabe.md). */
.freigabe-element {
    font-weight: 600;
    color: #374151;
}

.freigaben-aktionen {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.freigaben-aktionen .delete-form {
    margin-top: 0;
}

.freigabe-verlaengern-formular {
    flex: 0 0 auto;
}

.freigabe-verlaengern-formular[open] {
    flex: 1 0 100%;
    padding-bottom: 0.5rem;
}

.freigabe-verlaengern-formular[open] .btn-edit {
    margin-bottom: 0.75rem;
}

/* Übersicht /freigaben (FreigabenListe): dieselbe Tabelle wie bei den Kosten. */
.freigaben-tabelle .freigabe-url {
    width: 100%;
    min-width: 10rem;
}

/* Freigabeseite (templates/freigabe.html): eigenes, schlankes Grundgerüst ohne das
   dunkle Kopfband der angemeldeten Seiten — der Empfänger hat kein Konto, ein Kopf mit
   Objekt-Umschalter und Navigation liefe für ihn ohnehin nur auf /login. */
.freigabe-header {
    background: #1e3a5f;
    color: white;
    padding: 1rem 2rem;
}

.freigabe-header h1 {
    font-size: 1.25rem;
}

/* Objektfreigabe (docs/PLAN-2026-09-freigabe-objekt.md): Der Kopf trägt bei einem
   Objekt-Token zusätzlich den Namen des Bauvorhabens und, auf den Unterseiten, den
   Rückweg zur Übersicht. Beide Elemente fehlen bei einer Freigabe auf ein einzelnes
   Element — dort gibt es kein Objekt zu nennen und nichts, wohin zurück. */
.freigabe-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.freigabe-objekt {
    font-weight: normal;
    opacity: 0.85;
}

.freigabe-zurueck {
    color: white;
    font-size: 0.875rem;
    text-decoration: none;
    opacity: 0.85;
}

.freigabe-zurueck:hover {
    opacity: 1;
    text-decoration: underline;
}

.freigabe-einleitung {
    margin-bottom: 1.5rem;
    color: #4b5563;
}

.freigabe-inhalt {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.freigabe-footer {
    max-width: 1200px;
    margin: 0 auto 2rem;
    padding: 0 1rem;
    color: #6b7280;
    font-size: 0.875rem;
}

/* Kosten in einer Freigabe (docs/PLAN-2026-09-freigabe-kosten.md).

   Die Marke steht an zwei Stellen, an denen sonst nur Freundliches steht: in der
   Freigabenliste am Eintrag und in der Spalte "Kosten" auf /freigaben. Sie ist deshalb
   bewusst auffällig gesetzt und nicht grau wie die übrige Meta-Zeile — wer über seine
   Freigaben schaut, soll die mit Beträgen ohne Suchen finden. Dieselben Farben wie
   .hinweis, nur als gefüllte Marke. */
.freigabe-kosten-marke {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 0.25rem;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
}

/* Das Ankreuzfeld im Erstellen-Formular: Kästchen und Text in einer Zeile, der
   Erklärsatz darunter. .form-group label ist block und fett — für ein Kontrollkästchen
   beides falsch. */
.form-group-kontrollkaestchen label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 400;
}

.form-group-kontrollkaestchen input[type="checkbox"] {
    width: auto;
    margin: 0;
}

.feldhinweis {
    margin: 0.25rem 0 0 1.6rem;
    color: #6b7280;
    font-size: 0.8125rem;
}

.freigabe-kosten-fussnote {
    margin-top: 0.5rem;
    color: #6b7280;
    font-size: 0.875rem;
}

/* ==========================================================================
   Mobiltauglichkeit (Schritt 6) — Telefone bis 640px Breite.
   Lesepfad (Liste -> Detail -> Bild) hat Vorrang, die Edit-Maske muss hier
   nur benutzbar sein, nicht schön. Alles unterhalb wirkt ausschließlich in
   diesem Bereich, die Desktop-Darstellung bleibt unverändert.
   ========================================================================== */
@media (max-width: 640px) {

    main {
        margin: 1rem auto;
        padding: 0 0.75rem;
    }

    .arbeit-detail,
    .arbeit-edit {
        padding: 1rem;
    }

    /* Kopfzeile: Objektauswahl und Navigation umbrechen statt abzuschneiden */
    header {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
    }

    header h1 {
        width: 100%;
        font-size: 1.15rem;
    }

    .objekt-umschalter {
        width: 100%;
        flex-wrap: wrap;
    }

    .objekt-umschalter select {
        flex: 1;
        min-width: 0;
    }

    header nav {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    header nav a {
        margin-left: 0;
        padding: 0.5rem 0;
    }

    header nav form.logout-form button {
        margin-left: 0;
        padding: 0.5rem 0;
    }

    header nav a.online {
        margin-left: 0;
        padding: 0.5rem 0;
    }

    header nav .angemeldet {
        margin-left: 0;
        padding: 0.5rem 0;
        max-width: 10rem;
    }

    /* .arbeit-aktionen ist schon in der Grundregel ein flex-Container (siehe dort);
       am Handy bleibt nur der engere Abstand. */
    .arbeit-aktionen {
        gap: 0.5rem;
    }

    /* Schaltflächen mind. 44px hoch — gilt fürs ganze Formular, nicht nur den Kopf.
       .btn-delete-link (Schritt 3 aus docs/PLAN.md) ist ein Link wie .btn-secondary und
       braucht die Regel deshalb ausdrücklich, anders als .btn-delete: das sind immer
       <button>-Elemente und damit über den Selektor "button" bereits erfasst. */
    button, .btn, .btn-secondary, .btn-delete-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Einträgeliste: Tabelle -> gestapelte Karten, Aktionen-Spalte entfällt,
       die Karte selbst führt zum Eintrag */
    .arbeiten-liste table,
    .arbeiten-liste thead,
    .arbeiten-liste tbody,
    .arbeiten-liste tr,
    .arbeiten-liste th,
    .arbeiten-liste td {
        display: block;
        width: auto;
    }

    .arbeiten-liste thead {
        display: none;
    }

    .arbeiten-liste tr {
        position: relative;
        background: white;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        padding: 0.75rem 1rem;
        margin-bottom: 0.75rem;
    }

    .arbeiten-liste td {
        border-bottom: none;
        padding: 0.15rem 0;
    }

    .arbeiten-liste td.datum {
        color: #6b7280;
        font-size: 0.875rem;
    }

    .arbeiten-liste td.actions {
        display: none;
    }

    .arbeiten-liste td.bauteil-zelle,
    .arbeiten-liste td.projektphase-zelle,
    .arbeiten-liste td.kategorien-zelle {
        display: inline-block;
        width: auto;
        vertical-align: middle;
    }

    .arbeiten-liste td.bauteil-zelle,
    .arbeiten-liste td.projektphase-zelle {
        margin-right: 0.5rem;
    }

    /* Klickfläche über die ganze Karte legen — ein <tr> selbst als <a> wäre
       ungültiges HTML, stattdessen streckt sich der Titel-Link per ::after */
    .arbeiten-liste .karte-link::after {
        content: "";
        position: absolute;
        inset: 0;
    }

    /* Filter- und sonstige Formulare: volle Breite statt fester Mindestbreiten */
    .filter-form {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-form input[type="text"],
    .filter-form select {
        width: 100%;
        min-width: 0;
    }

    .filter-form label {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .filter-form label input {
        flex: 1;
        min-width: 0;
    }

    /* Ausnahme von der Regel darüber: Die beiden Radioschalter der Belegliste sind keine
       Eingabefelder, die volle Breite brauchen — gestreckt schöben sie ihre Beschriftung
       aus dem Bild. Sie bleiben nebeneinander. */
    .sortierung-form label {
        width: auto;
        display: inline-flex;
    }

    .sortierung-form label input {
        flex: 0 0 auto;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    /* 16px verhindert das Auto-Zoom beim Fokussieren in iOS-Safari */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="date"],
    textarea,
    select {
        font-size: 16px;
    }

    /* Anhang-Raster: zwei Spalten, auch auf dem iPhone. minmax(0, 1fr) statt 1fr: Mit 1fr
       lässt der Mindestinhalt einer Kachel (die Schaltflächen) die Spalte über den
       Bildschirmrand wachsen. Das Vorschaubild hat eine feste, niedrige Höhe, sonst
       füllt ein Hochformatfoto den ganzen Bildschirm. */
    .anhaenge-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .anhang {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .anhang img {
        width: 100%;
        height: 110px;
    }

    .anhang-beschreibung {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Sprung zum Hochladen am Kopf der Anhangsliste: Am Handy liegt der Dialog sonst weit unten. */
    .anhang-sprung {
        display: inline-block;
        margin-left: 0.5rem;
        font-size: 0.8rem;
        font-weight: normal;
    }

    /* Wie die übrigen Schaltflächen (button, .btn) mit dem Finger treffbar —
       die Zusammenfassung ist kein <button> und fällt sonst durch die Regel oben. */
    .btn-edit {
        min-height: 44px;
        justify-content: center;
    }

    /* Die quadratischen Symbol-Schaltflächen an den Überschriften bleiben quadratisch. */
    a.abschnitt-bearbeiten,
    .abschnitt-freigeben > .btn-edit {
        min-height: 1.75rem;
    }

    /* Breite Kosten-Tabellen (view.html-Kostenblock, kosten.html): eigener
       Scroll-Container statt Seiten-Scroll. Zeilen/Zellen behalten ihr
       Tabellen-Layout, nur die <table> selbst wird zum Block und darf
       innerhalb ihrer eigenen Breite scrollen. */
    .kosten-tabelle {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Zurück auf display: table — die Regel darüber macht jede .kosten-tabelle zu ihrem
       eigenen Scroll-Container, die Belegliste hat dafür aber ihren äußeren div. */
    .belegliste .kosten-tabelle {
        display: table;
    }

    /* Dieselbe Rückausnahme für die Planliste (docs/archive/PLAN-2026-09-planlisten.md, Schritt 5) —
       .planeliste ist ebenfalls schon ihr eigener äußerer Scroll-Container. */
    .planeliste .kosten-tabelle {
        display: table;
    }

    /* Ansichtsseite (docs/PLAN-2026-09-anhang-blaettern.md, Schritt 6): Die Pfeile rücken auf
       die Bildecken statt der Bildmitte — mittig überlagerten sie sonst auf einem
       hochformatigen Foto den Bildinhalt selbst. */
    .ansicht-pfeil {
        top: auto;
        bottom: 0.5rem;
        transform: none;
    }

    .ansicht-vorher {
        left: 0.5rem;
    }

    .ansicht-nachher {
        right: 0.5rem;
    }

    .ansicht-pdf-rahmen {
        height: 60vh;
    }
}

@media (max-width: 340px) {
    /* Sehr schmale Geräte: eine Spalte statt zwei im Anhang-Raster */
    .anhaenge-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Hinterlegung freigegebener Abschnitte im Textfeld des Bearbeiten-Formulars
   (docs/archive/PLAN-2026-09-abschnitt-freigabe.md): Eine Ebene mit demselben Text liegt
   hinter dem durchsichtig gemachten Feld; das Skript in edit.html richtet sie an Schrift,
   Innenabstand und Breite des Felds aus. Der Text der Ebene selbst ist unsichtbar, nur die
   Markierungen scheinen durch. Erst mit .aktiv (vom Skript gesetzt) wird das Feld
   durchsichtig — ohne Skript bleibt es ein gewöhnliches Textfeld. */
.textfeld-markiert {
    position: relative;
}

.textfeld-hinterlegung {
    display: none;
}

.textfeld-markiert.aktiv {
    background: white;
    border-radius: 4px;
}

.textfeld-markiert.aktiv .textfeld-hinterlegung {
    display: block;
    position: absolute;
    box-sizing: border-box;
    overflow: hidden;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    color: transparent;
    pointer-events: none;
    z-index: 0;
}

.textfeld-markiert.aktiv textarea {
    position: relative;
    z-index: 1;
    background: transparent;
    display: block;
}

.textfeld-hinterlegung mark {
    /* Ein Bereich beginnt immer an einem Zeilenanfang (der Überschrift) und endet an einem
       (der nächsten) oder am Textende — als Block gezeichnet, bricht er genau so um wie der
       Text im Feld, füllt aber die ganze Breite statt nur die Buchstaben. Der Außenabstand
       holt den Innenabstand des Felds (0.5rem, siehe textarea) wieder herein, der
       Innenabstand gibt ihn dem Text zurück; der Streifen links wie in der Ansicht. */
    display: block;
    color: transparent;
    background: rgba(37, 99, 235, 0.08);
    box-shadow: inset 3px 0 #2563eb;
    margin: 0 -0.5rem;
    padding: 0 0.5rem;
}

/* Zwei ineinanderliegende freigegebene Abschnitte: zwei Streifen nebeneinander und die
   Hinterlegung doppelt so kräftig, wie in der Ansicht. */
.textfeld-hinterlegung mark.tiefe-2 {
    background: rgba(37, 99, 235, 0.16);
    box-shadow: inset 3px 0 #2563eb, inset 5px 0 white, inset 8px 0 #2563eb;
}

/* Test-Umgebung (UMGEBUNG=test): rot statt blau, damit sie sich auf den ersten Blick von
   der Produktivumgebung unterscheidet. Schaltflächen und Links bleiben blau, Rot ist für
   Lösch-Schaltflächen belegt. Siehe docs/archive/PLAN-2026-10-staging-umgebung.md, Schritt 7. */
.umgebung-test {
    border-top: 6px solid #b91c1c;
}

.umgebung-test header {
    background: #7f1d1d;
}

.umgebung-test header nav a {
    color: #fecaca;
}

.umgebung-test.login-page {
    background: #7f1d1d;
}

/* Sprungmarke an Überschriften der Detailansicht (docs/archive/PLAN-2026-10-sprungmarken.md,
   Schritt 3): auf Geräten mit Maus unsichtbar, bis der Zeiger über der Überschrift steht
   oder das Symbol den Fokus hat; am Touch-Gerät blass sichtbar. */
.anker {
    display: inline-block;
    width: 0.85em;
    height: 0.85em;
    margin-left: 0.35em;
    vertical-align: middle;
    color: #9ca3af;
    text-decoration: none;
}

.anker svg {
    display: block;
    width: 100%;
    height: 100%;
}

@media (hover: hover) {
    .anker {
        opacity: 0;
        transition: opacity 0.15s;
    }

    h1:hover > .anker,
    h2:hover > .anker,
    h3:hover > .anker,
    h4:hover > .anker,
    h5:hover > .anker,
    h6:hover > .anker,
    .anker:focus-visible,
    .anker.anker-kopiert {
        opacity: 1;
    }
}

@media (hover: none) {
    .anker {
        opacity: 0.45;
    }
}

.anker:hover {
    color: #4b5563;
}

.anker.anker-kopiert {
    color: #15803d;
    opacity: 1;
}

[id].verweise,
#anhaenge,
#kosten,
#freigaben,
.anhang-gruppe[id],
.beschreibung [id] {
    scroll-margin-top: 0.75rem;
}

/* Aktivitätsübersicht (docs/PLAN-2026-10-aktivitaet.md) */
.hinweis-klein {
    color: #6b7280;
    font-size: 0.8rem;
}

.aktivitaet-marke {
    display: inline-block;
    padding: 0 0.4rem;
    border-radius: 3px;
    background: #e5e7eb;
    color: #374151;
    font-size: 0.75rem;
}

.aktivitaet-abgewiesen {
    background: #fef2f2;
}

.aktivitaet-filter .filter-form label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.aktivitaet-filter .aktivitaet-haken input {
    flex: none;
    width: auto;
}

.datenschutz-seite {
    max-width: 44rem;
    margin: 2rem auto;
    padding: 0 1rem;
    background: transparent;
}

.datenschutz-seite h1,
.datenschutz-seite h2 {
    color: #1e3a5f;
    margin-top: 1.5rem;
}

.datenschutz-seite table {
    margin: 0.5rem 0 1rem;
}

.login-hinweis {
    margin-top: 1rem;
    color: #6b7280;
    font-size: 0.8rem;
    text-align: center;
}