/* 12-dokumente.css — Teil der Aufteilung von style.css (2026-08-10). Urspruenglich Zeilen 6539-7541 der einen Datei. Dokumentenmodul (Scope .dok/.dokw). Diese und alle anderen css/*.css-Dateien werden auf JEDER Seite gemeinsam geladen, in fester Reihenfolge - die Kaskade ist exakt dieselbe wie vorher, nur auf mehrere Dateien verteilt. */ /* ===================================================================== Verträge-schreiben-Modul (Dokumenten-Modul) nachgezogen (2026-08-09) --------------------------------------------------------------------- Die PHP-Seiten (Schriftverkehr.php, DokumentNeu/-Bearbeiten/-Ansicht/ -Zusammenstellen.php, AdminBausteine/-Vorlagen/-Briefkopf.php) waren live bereits vollstaendig vorhanden und byteidentisch zu main - nur diese CSS (.dok-/.dokw-Praefix) fehlte, dadurch wirkten die Seiten kaputt und der Menuepunkt war deshalb entfernt worden. 1:1 aus dem Git-Repo uebernommen (dort seit 2026-08-06/07). ===================================================================== */ /* ===================================================================== VORLAGENWERKSTATT (Dokumenten-Modul, 2026-08-06) --------------------------------------------------------------------- Klassen der drei Admin-Seiten AdminBausteine / AdminVorlagen / AdminBriefkopf. Praefix .dokw-. Bewusst hier statt inline: die Admin-Konsole hat historisch viel style="" im Markup, das soll sich nicht fortsetzen. Zwei Regeln aus dieser Datei muessen ueberall gegengesteuert werden: `* { font-size: 1rem }` (jede Groesse explizit) und die Grundfarbe --text-color (#333), die auf dunklem Glas unlesbar waere. ===================================================================== */ .dokw-h1 { font-size: 1.4rem; font-weight: 900; color: rgb(var(--ink)); } /* Zweispaltiges Grundgeruest: Arbeitsflaeche + Seitenspalte */ .dokw-spalten { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1rem; align-items: start; } .dokw-abstand { margin-top: 14px; } .dokw-knopfreihe { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .dokw-warn { background: var(--warn-bg); border: 1px solid var(--warn-border); color: var(--warn-text); } .dokw-warn i { color: var(--warn-text); } .dokw-rot { color: var(--err-text); } /* ---- Quill --------------------------------------------------------- Der Editor bringt eigenes CSS mit (helles Snow-Theme). Auf dunklem Grund waere er weiss-auf-weiss, deshalb Flaeche und Schrift auf die Theme-Variablen ziehen. */ .dokw-editor { min-height: 220px; background: var(--feld-bg); border-radius: 0 0 9px 9px; color: rgb(var(--ink)); font-size: 0.88rem; } .dokw-editor .ql-editor { min-height: 220px; font-size: 0.88rem; line-height: 1.6; } .dokw-editor .ql-editor p, .dokw-editor .ql-editor li { color: rgb(var(--ink)); font-size: 0.88rem; } .dokw-editor .ql-editor h3 { color: rgb(var(--ink)); font-size: 1rem; font-weight: 800; } .dokw-editor .ql-editor h4 { color: rgb(var(--ink)); font-size: 0.92rem; font-weight: 800; } .dokw-editor .ql-editor.ql-blank::before { color: rgba(var(--ink) / 0.72); font-style: normal; } /* WICHTIG: quill.snow.css wird NACH style.css geladen (der Link steht am Seitenende, weil header.php keine zusaetzlichen -Eintraege kennt). Bei gleicher Spezifitaet gewinnt daher Quill. Deshalb alle Regeln mit .ad-main davorgestellt statt mit !important - dieselbe Wirkung, ohne die Spezifitaetsspirale. Die Icons sind SVG mit stroke/fill und waeren sonst dunkelgrau (#444) auf dunklem Grund. */ .ad-main .ql-toolbar.ql-snow { background: rgba(var(--ink) / 0.10); border: 1px solid rgba(var(--ink) / 0.2); border-radius: 9px 9px 0 0; } .ad-main .ql-container.ql-snow { border: 1px solid rgba(var(--ink) / 0.2); border-top: none; } .ad-main .ql-snow .ql-stroke { stroke: rgb(var(--ink)); } .ad-main .ql-snow .ql-fill { fill: rgb(var(--ink)); } .ad-main .ql-snow .ql-picker-label { color: rgb(var(--ink)); } .ad-main .ql-snow .ql-picker-label::before { color: rgb(var(--ink)); } .ad-main .ql-snow .ql-picker-options { background: var(--tigers-nav-bg); border-color: rgba(255, 255, 255, 0.2); } .ad-main .ql-snow .ql-picker-item { color: rgba(255, 255, 255, 0.9); } .ad-main .ql-snow.ql-toolbar button:hover .ql-stroke { stroke: var(--tigers-yellow); } .ad-main .ql-snow.ql-toolbar button:hover .ql-fill { fill: var(--tigers-yellow); } .ad-main .ql-snow.ql-toolbar button.ql-active .ql-stroke { stroke: var(--tigers-yellow); } .ad-main .ql-snow.ql-toolbar button.ql-active .ql-fill { fill: var(--tigers-yellow); } .dokw-textarea { width: 100%; background: var(--feld-bg); border: 1px solid rgba(var(--ink) / 0.2); border-radius: 9px; padding: 8px 10px; color: rgb(var(--ink)); font-size: 0.86rem; line-height: 1.55; resize: vertical; } /* Beispiele im Fliesstext ({{Stundensatz}}, 20mm ...). Ohne eigene Regel erben sie --text-color (#333) und stehen dunkel auf dunklem Glas. */ .ad-main code { background: rgba(var(--ink) / 0.12); border: 1px solid rgba(var(--ink) / 0.18); border-radius: 5px; padding: 1px 5px; color: var(--tigers-yellow-ink); font-family: "Consolas", "Courier New", monospace; font-size: 0.78rem; } /* ---- Feldzeilen ---------------------------------------------------- */ .dokw-felder { display: flex; flex-direction: column; gap: 6px; } /* Sechste Spalte seit 2026-08-07: der Knopf "in den Text einfuegen" neben dem Papierkorb. Ohne ihn gab es keinen Weg von der angelegten Variablen zum Platzhalter im Text. */ .dokw-feld { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 118px 96px 34px 34px; gap: 6px; align-items: center; background: rgba(var(--ink) / 0.06); border: 1px solid rgba(var(--ink) / 0.14); border-radius: 10px; padding: 6px; } /* Zwei Zeilen je Feld. Eine Zeile mit sieben Spalten quetschte die Textfelder auf ~90px ("Stundens..." statt "Stundensatz"). Die Reihenfolge im Markup bleibt unveraendert, die Lage macht das Raster. */ .dokw-f-name { grid-row: 1; grid-column: 1; } .dokw-f-label { grid-row: 1; grid-column: 2; } .dokw-f-typ { grid-row: 1; grid-column: 3; } .dokw-f-pflicht { grid-row: 1; grid-column: 4; } .dokw-f-ein { grid-row: 1; grid-column: 5; } .dokw-f-weg { grid-row: 1; grid-column: 6; } .dokw-f-std { grid-row: 2; grid-column: 1 / span 2; } .dokw-f-opt { grid-row: 2; grid-column: 3 / span 4; } .dokw-feld input[type="text"], .dokw-feld select { height: var(--feld-hoehe); background: var(--feld-bg); border: 1px solid rgba(var(--ink) / 0.2); border-radius: 8px; padding: 0 8px; color: rgb(var(--ink)); font-size: 0.82rem; min-width: 0; } .dokw-f-pflicht { display: flex; align-items: center; gap: 5px; color: rgba(var(--ink) / 0.8); font-size: 0.76rem; font-weight: 700; } .dokw-f-weg, .dokw-f-ein { height: var(--feld-hoehe); border-radius: 8px; background: rgba(var(--ink) / 0.1); border: 1px solid rgba(var(--ink) / 0.2); color: var(--err-text); font-size: 0.8rem; cursor: pointer; /* Wie die uebrigen Symbol-Kaestchen: sonst haengt das Zeichen wieder auf der Schriftlinie statt in der Mitte (Sammelregel am Dateiende). */ display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 1; } .dokw-f-ein { color: var(--tigers-yellow-ink); } .dokw-f-ein:hover { background: var(--tigers-yellow); color: var(--tigers-black); border-color: var(--tigers-yellow); } .dokw-f-weg:hover { background: var(--err-bg); border-color: var(--err-border); } /* Eigene Variablen des Bausteins: dieselbe Chip-Form wie der feste Katalog, nur in Gelb abgesetzt — sie sind das, was auf DIESER Seite entsteht. */ .dokw-chip-eigen { border-color: var(--tigers-yellow-40); background: var(--tigers-yellow-12); } .dokw-eigene-leer { margin-top: 4px; } /* Bausteinwahl oben (2026-08-07) */ .dokw-waehler { margin-bottom: 14px; } .dokw-waehler-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; } .dokw-waehler-feld { flex: 1; min-width: 260px; } .dokw-waehler-los { height: var(--feld-hoehe); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .dokw-f-weg:hover { background: var(--err-bg); border-color: var(--err-border); } /* ---- Variablen-Chips ----------------------------------------------- */ .dokw-katgruppe { color: rgba(var(--ink) / 0.72); font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; margin: 12px 0 5px; } .dokw-chips { display: flex; flex-wrap: wrap; gap: 5px; } .dokw-chip { background: rgba(var(--ink) / 0.1); border: 1px solid rgba(var(--ink) / 0.2); border-radius: 999px; padding: 3px 9px; color: rgb(var(--ink)); font-size: 0.73rem; font-weight: 700; cursor: pointer; } .dokw-chip:hover { background: var(--tigers-yellow); border-color: var(--tigers-yellow); color: var(--tigers-black); } .dokw-chip-still { display: inline-flex; align-items: baseline; gap: 6px; background: var(--tigers-yellow-12); border: 1px solid var(--tigers-yellow-35); border-radius: 999px; padding: 3px 10px; color: rgb(var(--ink)); font-size: 0.76rem; font-weight: 700; } /* ---- Listen (Bibliothek, Vorlagen, Briefkoepfe) --------------------- */ .dokw-item { display: block; background: rgba(var(--ink) / 0.07); border: 1px solid rgba(var(--ink) / 0.14); border-radius: 10px; padding: 7px 10px; margin-bottom: 5px; text-decoration: none; } .dokw-item:hover { background: rgba(var(--ink) / 0.14); border-color: var(--tigers-yellow); } .dokw-item.on { background: var(--tigers-yellow-12); border-color: var(--tigers-yellow); } .dokw-item.aus { opacity: 0.55; } .dokw-item-name { display: block; color: rgb(var(--ink)); font-size: 0.84rem; font-weight: 700; } .dokw-item-meta { display: block; color: rgba(var(--ink) / 0.72); font-size: 0.72rem; } /* ---- Zusammenstellung ---------------------------------------------- */ .dokw-liste { display: flex; flex-direction: column; gap: 5px; } .dokw-zeile { display: flex; align-items: center; gap: 10px; background: rgba(var(--ink) / 0.07); border: 1px solid rgba(var(--ink) / 0.14); border-radius: 10px; padding: 7px 10px; } .dokw-nr { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%; background: var(--tigers-yellow); color: var(--tigers-black); font-size: 0.75rem; font-weight: 900; display: flex; align-items: center; justify-content: center; } .dokw-zeile-text { flex: 1; min-width: 0; } .dokw-zeile-text a { color: rgb(var(--ink)); font-size: 0.84rem; font-weight: 700; text-decoration: none; } .dokw-zeile-text a:hover { color: var(--tigers-yellow-ink); text-decoration: underline; } .dokw-zeile-tat { display: flex; gap: 4px; } .dokw-mini { width: 28px; height: 28px; border-radius: 8px; background: rgba(var(--ink) / 0.1); border: 1px solid rgba(var(--ink) / 0.2); color: rgba(var(--ink) / 0.75); font-size: 0.74rem; cursor: pointer; } .dokw-mini:hover { background: rgba(var(--ink) / 0.2); } .dokw-mini:disabled { opacity: 0.3; cursor: default; } .dokw-mini-weg { color: var(--err-text); } .dokw-mini-weg:hover { background: var(--err-bg); border-color: var(--err-border); } .dokw-auswahl { height: var(--feld-hoehe); min-width: 260px; background: var(--feld-bg); border: 1px solid rgba(var(--ink) / 0.2); border-radius: 9px; padding: 0 8px; color: rgb(var(--ink)); font-size: 0.84rem; } /* ---- Schalter mit Erklaertext -------------------------------------- */ .dokw-schalter { display: flex; color: rgb(var(--ink)); align-items: flex-start; gap: 9px; background: rgba(var(--ink) / 0.06); border: 1px solid rgba(var(--ink) / 0.14); border-radius: 10px; padding: 9px 11px; margin-bottom: 6px; cursor: pointer; } .dokw-schalter input { margin-top: 3px; } /* Felder, die zu einem Schalter DARUEBER gehoeren: eingerueckt und mit einer Leitlinie, damit die Zugehoerigkeit ohne Text erkennbar ist. `[hidden]` muss ausdruecklich gesetzt werden — `display:block` von der Klasse wuerde es sonst schlagen. */ .dokw-unterfeld { margin: -2px 0 8px 22px; padding: 8px 0 2px 12px; border-left: 2px solid rgba(var(--ink) / 0.16); } .dokw-unterfeld[hidden], .ad-field[hidden] { display: none; } .content.ad .dokw-schalter b { color: rgb(var(--ink)); font-size: 0.85rem; font-weight: 800; } .dokw-schalter .ad-lead { font-size: 0.76rem; } @media (max-width: 1100px) { .dokw-spalten { grid-template-columns: 1fr; } .dokw-feld { grid-template-columns: 1fr 1fr; } /* Im Schmalraster loest sich die feste Spaltenzuweisung auf; die beiden Symbolknoepfe wuerden sonst auf Zeile 1 Spalte 5/6 zeigen, die es dort nicht gibt. */ .dokw-f-name, .dokw-f-label, .dokw-f-typ, .dokw-f-pflicht, .dokw-f-ein, .dokw-f-weg, .dokw-f-std, .dokw-f-opt { grid-row: auto; grid-column: auto; } } /* ===================================================================== SCHRIFTVERKEHR (Dokumenten-Modul, 2026-08-06) --------------------------------------------------------------------- Klassen der Seiten Schriftverkehr / DokumentNeu / DokumentZusammenstellen / DokumentBearbeiten. Praefix .dok-. (Die Vorlagenwerkstatt im Admin nutzt .dokw-.) Wiederkehrende Fallen dieser Datei, die hier gegengesteuert werden: * { font-size: 1rem } -> jede Groesse explizit * { color: var(--text-color) } -> faerbt AUCH Zwischen-, deshalb Farben nie per "inherit" erwarten .content { background: weiss } -> .dok-seite macht die Flaeche transparent, sonst steht helles Papier auf hellem Kasten ===================================================================== */ .content.dok-seite { background: transparent; border: none; box-shadow: none; width: min(96%, 1440px); padding: 0; margin: 22px auto 48px; } /* Mit .content davor, weil style.css `.content h1 { color: var(--border-color); text-align:center }` und `.content h2 { border-bottom; padding }` setzt (je 0,1,1) — das schlaegt jedes schlichte .dok-h1/.dok-h2 und faerbt die Ueberschriften fast schwarz auf dunklem Glas. */ .content.dok-seite .dok-h1 { font-size: 1.5rem; font-weight: 900; color: rgb(var(--ink)); letter-spacing: -0.02em; text-align: left; margin: 0; } .content.dok-seite .dok-h2 { font-size: 1rem; font-weight: 800; color: rgb(var(--ink)); display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.2rem; padding: 0; border-bottom: none; } .dok-h2 i { color: var(--tigers-yellow-ink); font-size: 0.95rem; } .dok-h3 { font-size: 0.76rem; font-weight: 800; color: rgba(var(--ink) / 0.82); text-transform: uppercase; letter-spacing: 0.09em; margin: 1.1rem 0 0.55rem; display: flex; align-items: center; gap: 0.5rem; } .dok-lead { font-size: 0.85rem; color: rgba(var(--ink) / 0.7); margin: 0.15rem 0 0; } .dok-lead b { color: rgb(var(--ink)); font-weight: 800; } .dok-abstand { margin-top: 0.9rem; } .dok-knopfreihe { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; } /* style.css setzt weiter oben `.content > p, .content > div { background: var(--darker-background) }` (0,1,1). Jeder direkte Kind-Container waere damit hellgrau — auf dunklem Stage ein weisser Kasten mit unlesbarem Inhalt. seite-glass.php loest dasselbe mit !important; hier reicht Spezifitaet (0,2,1), die Panels holen sich ihre Flaeche danach zurueck. */ .content.dok-seite > div, .content.dok-seite > p, .content.dok-seite > form > div { background: transparent; border: none; box-shadow: none; padding: 0; } .dok-kopf { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; } .dok-kopf-tat { margin-left: auto; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; } .content.dok-seite .dok-panel, .dok-panel { background: rgba(var(--ink) / 0.12); backdrop-filter: blur(20px) saturate(1.25); -webkit-backdrop-filter: blur(20px) saturate(1.25); border: 1px solid rgba(var(--ink) / 0.22); border-radius: var(--glass-radius); padding: 1.1rem 1.15rem; } .dok-spalt-2 { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 1rem; align-items: start; } .dok-spalt-2b { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 1rem; align-items: start; } .dok-klebrig { position: sticky; top: 84px; } /* ---- Knoepfe ------------------------------------------------------- */ /* Die Flaeche ist DECKEND, nicht durchscheinend. Grund: eine Flaeche aus rgba(--ink / 0.1) ist nur dann sichtbar, wenn dahinter der dunkle Stage liegt. Sobald ein Elternteil hell wird - und `.content > div` faerbt jeden direkten Kind-Container hell - steht weisse Schrift auf hellem Grund und der Knopf verschwindet. Genau das wurde am 2026-08-06 gemeldet. Mit einer eigenen, deckenden Flaeche kann das nicht mehr passieren, egal was darunter liegt. */ .dok-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; height: var(--feld-hoehe); padding: 0 0.95rem; border-radius: 10px; border: 1px solid #cccccc; background: #ffffff; color: #1a1a1a; font-size: 0.84rem; font-weight: 700; cursor: pointer; text-decoration: none; white-space: nowrap; } :root[data-theme="dark"] .dok-btn { background: #2b2b2b; border-color: rgba(255, 255, 255, 0.3); color: #ffffff; } @media (prefers-color-scheme: dark) { :root[data-theme="system"] .dok-btn { background: #2b2b2b; border-color: rgba(255, 255, 255, 0.3); color: #ffffff; } } .dok-btn i { font-size: 0.82rem; } .dok-btn:hover { background: #f0f0f0; } :root[data-theme="dark"] .dok-btn:hover { background: #3a3a3a; } @media (prefers-color-scheme: dark) { :root[data-theme="system"] .dok-btn:hover { background: #3a3a3a; } } .dok-btn-haupt { background: var(--tigers-yellow); border-color: var(--tigers-yellow); color: var(--tigers-black); font-weight: 900; } .dok-btn-haupt:hover { background: var(--tigers-yellow-hover); } .dok-btn:disabled { opacity: 0.45; cursor: not-allowed; } .dok-zaehler { background: var(--tigers-black); color: var(--tigers-yellow); border-radius: 999px; padding: 0 0.4rem; font-size: 0.72rem; font-weight: 900; } .dok-mini { width: 28px; height: 28px; border-radius: 8px; background: rgba(var(--ink) / 0.1); border: 1px solid rgba(var(--ink) / 0.2); color: rgba(var(--ink) / 0.75); font-size: 0.74rem; cursor: pointer; } .dok-mini:hover { background: rgba(var(--ink) / 0.2); } .dok-mini:disabled { opacity: 0.3; cursor: default; } .dok-mini-weg { color: var(--err-text); } .dok-mini-weg:hover { background: var(--err-bg); border-color: var(--err-border); } /* ---- Chips --------------------------------------------------------- */ .dok-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.18rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 800; white-space: nowrap; border: 1px solid transparent; } .dok-chip i { font-size: 0.68rem; } .dok-chip-gelb { background: var(--tigers-yellow); color: var(--tigers-black); } .dok-chip-ok { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok-text); } .dok-chip-warn { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-text); } .dok-chip-err { background: var(--err-bg); border-color: var(--err-border); color: var(--err-text); } .dok-chip-grau { background: rgba(var(--ink) / 0.12); border-color: rgba(var(--ink) / 0.2); color: rgba(var(--ink) / 0.72); } /* ---- Meldungen ----------------------------------------------------- */ .dok-hinweis { display: flex; gap: 0.6rem; align-items: flex-start; background: var(--warn-bg); border: 1px solid var(--warn-border); border-radius: 10px; padding: 0.6rem 0.7rem; margin-bottom: 0.8rem; color: var(--warn-text); font-size: 0.82rem; line-height: 1.45; } .dok-hinweis i { color: var(--warn-text); font-size: 0.85rem; margin-top: 0.1rem; } .content.dok-seite .dok-hinweis b { color: var(--warn-text); font-weight: 900; } .content.dok-seite .dok-hinweis a { color: var(--warn-text); font-weight: 800; } .dok-liste-punkte { margin: 0.3rem 0 0 1.1rem; } .dok-liste-punkte li { margin-bottom: 0.15rem; font-size: 0.8rem; } .dok-ok { background: var(--ok-bg); border: 1px solid var(--ok-border); border-radius: 10px; padding: 0.55rem 0.7rem; margin-bottom: 0.8rem; color: var(--ok-text); font-size: 0.82rem; font-weight: 700; } .dok-ok i { color: var(--ok-text); } /* ---- Filterleiste -------------------------------------------------- */ .dok-filter { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.9rem; } .dok-f { display: inline-flex; align-items: center; gap: 0.4rem; background: rgba(var(--ink) / 0.1); border: 1px solid rgba(var(--ink) / 0.2); border-radius: 999px; padding: 0.3rem 0.8rem; color: rgba(var(--ink) / 0.8); font-size: 0.8rem; font-weight: 700; text-decoration: none; } .dok-f:hover { background: rgba(var(--ink) / 0.18); } .dok-f.on { background: var(--tigers-yellow); border-color: var(--tigers-yellow); color: var(--tigers-black); } .dok-f span { background: rgba(0, 0, 0, 0.2); border-radius: 999px; padding: 0 0.35rem; font-size: 0.72rem; } /* ---- Dokumentliste ------------------------------------------------- */ .dok-tabelle { display: flex; flex-direction: column; gap: 0.4rem; } .dok-zeile { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; background: rgba(var(--ink) / 0.1); border: 1px solid rgba(var(--ink) / 0.18); border-radius: 12px; padding: 0.65rem 0.85rem; text-decoration: none; } .dok-zeile:hover { background: rgba(var(--ink) / 0.17); border-color: var(--tigers-yellow); } .dok-zeile-offen { border-color: var(--warn-border); background: var(--warn-bg); } .dok-z-haupt { flex: 1; min-width: 0; } .dok-z-titel { display: block; color: rgb(var(--ink)); font-size: 0.88rem; font-weight: 800; } .dok-zeile-offen .dok-z-titel { color: var(--warn-text); } .dok-z-meta { display: block; color: rgba(var(--ink) / 0.6); font-size: 0.74rem; } .dok-zeile-offen .dok-z-meta { color: rgba(var(--warn-text) / 0.85); } .dok-z-rest { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; } .dok-z-liegt { color: var(--warn-text); font-size: 0.74rem; font-weight: 700; } /* ---- Kacheln (Vorlagenwahl) ---------------------------------------- */ .dok-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.6rem; margin-top: 0.7rem; } .dok-kachel { display: block; cursor: pointer; } .dok-kachel input { position: absolute; opacity: 0; pointer-events: none; } .dok-kachel-inhalt { display: block; height: 100%; background: rgba(var(--ink) / 0.08); border: 1px solid rgba(var(--ink) / 0.18); border-radius: 12px; padding: 0.75rem 0.85rem; } .dok-kachel:hover .dok-kachel-inhalt { background: rgba(var(--ink) / 0.16); } .dok-kachel input:checked + .dok-kachel-inhalt { background: var(--tigers-yellow-12); border-color: var(--tigers-yellow); box-shadow: 0 0 0 2px var(--tigers-yellow-35); } .dok-kachel-name { display: block; color: rgb(var(--ink)); font-size: 0.9rem; font-weight: 800; } .dok-kachel-text { display: block; color: rgba(var(--ink) / 0.72); font-size: 0.78rem; margin-top: 0.2rem; } .dok-kachel-meta { display: block; color: rgba(var(--ink) / 0.72); font-size: 0.72rem; margin-top: 0.35rem; } /* ---- Formularfelder ------------------------------------------------ */ .dok-feld { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.7rem; } .dok-feld-lbl { color: rgba(var(--ink) / 0.8); font-size: 0.76rem; font-weight: 700; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; } .dok-feld input[type="text"], .dok-feld input[type="date"], .dok-feld select, .dok-feld textarea { width: 100%; height: var(--feld-hoehe); background: var(--feld-bg); border: 1px solid rgba(var(--ink) / 0.2); border-radius: 9px; padding: 0 0.65rem; color: rgb(var(--ink)); font-size: 0.86rem; } .dok-feld textarea { height: auto; min-height: 74px; padding: 0.5rem 0.65rem; line-height: 1.5; resize: vertical; } .dok-feld input:focus, .dok-feld select:focus, .dok-feld textarea:focus { outline: none; border-color: var(--tigers-yellow); box-shadow: 0 0 0 3px var(--tigers-yellow-22); } .dok-feld input:disabled, .dok-feld select:disabled, .dok-feld textarea:disabled { opacity: 0.6; } .dok-feld-fehlt input, .dok-feld-fehlt select { border-color: var(--warn-border); } .dok-feld-hinweis { color: rgba(var(--ink) / 0.72); font-size: 0.72rem; } .dok-haken { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0.2rem 0 0.3rem; cursor: pointer; } .dok-haken span { color: rgba(var(--ink) / 0.8); font-size: 0.78rem; } /* ---- Bausteinregal ------------------------------------------------- */ .dok-katgruppe { color: rgba(var(--ink) / 0.72); font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; margin: 0.9rem 0 0.35rem; } .dok-regal-form { margin: 0 0 0.35rem; } .dok-regal-item { display: flex; align-items: center; gap: 0.5rem; width: 100%; text-align: left; background: rgba(var(--ink) / 0.08); border: 1px solid rgba(var(--ink) / 0.16); border-radius: 10px; padding: 0.45rem 0.55rem; cursor: pointer; } .dok-regal-item:hover { background: rgba(var(--ink) / 0.16); border-color: var(--tigers-yellow); } .dok-regal-item:disabled { opacity: 0.45; cursor: not-allowed; } .dok-regal-item i { color: var(--tigers-yellow-ink); font-size: 0.78rem; } .dok-regal-name { flex: 1; color: rgb(var(--ink)); font-size: 0.8rem; font-weight: 700; /* TEXTUMBRUCH (2026-08-07 gemeldet: Baustein-Titel liefen einzeilig ueber den Rand und wurden abgeschnitten). Ursache ist NICHT das fehlende Umbrechen, sondern `min-width: auto` — der Vorgabewert jedes Flex-Kindes. Er verbietet dem Element, schmaler als sein laengstes Wort zu werden; `flex: 1` kann dagegen nichts ausrichten, und die 320px-Spalte aus .dok-spalt-2 wird gesprengt. Erst `min-width: 0` erlaubt das Schrumpfen, danach greift der Umbruch. Beides wird gebraucht — einzeln bringt keins von beiden etwas. */ min-width: 0; overflow-wrap: anywhere; } .dok-regal-meta { color: rgba(var(--ink) / 0.5); font-size: 0.68rem; white-space: nowrap; } /* ---- Baustein-Karten im Dokument ----------------------------------- */ .dok-bs { background: rgba(var(--ink) / 0.08); border: 1px solid rgba(var(--ink) / 0.18); border-radius: 12px; padding: 0.6rem 0.7rem; margin-bottom: 0.5rem; } .dok-bs-kopf { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .dok-bs-nr { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%; background: var(--tigers-yellow); color: var(--tigers-black); font-size: 0.72rem; font-weight: 900; display: flex; align-items: center; justify-content: center; } /* min-width bleibt bei 120px (nicht 0 wie beim Regal): der Name soll die Aktionsknoepfe rechts erst umbrechen lassen, wenn wirklich kein Platz mehr ist. .dok-bs-kopf hat flex-wrap, das faengt den Rest ab. */ .dok-bs-name { flex: 1; color: rgb(var(--ink)); font-size: 0.86rem; font-weight: 800; min-width: 120px; overflow-wrap: anywhere; } .dok-bs-tat { display: flex; gap: 0.25rem; } .dok-bs-tat form { margin: 0; } /* Der Baustein-Text kommt aus Quill und kann alles enthalten — lange Links, Aktenzeichen ohne Leerzeichen, breite Tabellen. Ohne diese beiden Regeln schiebt so ein Fund die ganze rechte Spalte auf. */ .dok-bs-txt { color: rgba(var(--ink) / 0.7); font-size: 0.78rem; line-height: 1.55; margin-top: 0.4rem; overflow-wrap: anywhere; } .content.dok-seite .dok-bs-txt table { display: block; max-width: 100%; overflow-x: auto; } .content.dok-seite .dok-bs-txt p { color: rgba(var(--ink) / 0.7); font-size: 0.78rem; margin: 0 0 0.35rem; } .content.dok-seite .dok-bs-txt li { color: rgba(var(--ink) / 0.7); font-size: 0.78rem; } .content.dok-seite .dok-bs-txt h3, .content.dok-seite .dok-bs-txt h4 { color: rgb(var(--ink)); font-size: 0.82rem; font-weight: 800; margin: 0.3rem 0; } /* ---- Papier (Vorschau) --------------------------------------------- Bewusst eine echte weisse Flaeche mit dunkler Schrift: der Ersteller soll sehen, was spaeter aus dem Drucker kommt, nicht das Portal-Design. Deshalb hier ALLE Farben fest und nicht ueber --ink. Selektor mit .content.dok-seite prefix (0,3,0), sonst zieht ".content.dok-seite > div { background: transparent }" (0,2,1) weiter oben den Hintergrund transparent - auf dunklem Stage dann dunkle Schrift auf dunklem Grund, praktisch unlesbar (2026-08-10). */ .content.dok-seite .dok-papier { background: #ffffff; border-radius: 6px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45); padding: 26px 30px 30px; margin-top: 0.7rem; color: #1a1a1a; font-size: 0.8rem; line-height: 1.62; } .content.dok-seite .dok-papier p, .content.dok-seite .dok-papier li, .content.dok-seite .dok-papier div, .content.dok-seite .dok-papier span, .content.dok-seite .dok-papier b, .content.dok-seite .dok-papier strong, .content.dok-seite .dok-papier em { color: #1a1a1a; font-size: 0.8rem; } .content.dok-seite .dok-papier h3 { color: #1a1a1a; font-size: 0.86rem; font-weight: 900; margin: 0.8rem 0 0.2rem; } .content.dok-seite .dok-papier h4 { color: #1a1a1a; font-size: 0.82rem; font-weight: 800; margin: 0.6rem 0 0.2rem; } .dok-papier-kopf { border-bottom: 2px solid #1a1a1a; padding-bottom: 8px; text-align: right; } .content.dok-seite .dok-papier-verein { color: #444444; font-size: 0.62rem; line-height: 1.4; } .dok-papier-anschrift { margin: 20px 0 16px; } .dok-papier-anrede { margin: 0 0 12px; } .dok-papier-koerper ul, .dok-papier-koerper ol { margin: 0 0 0.5rem 1.1rem; } /* Blocksatz wie im PDF (2026-08-07). Nur der Fliesstext: Anrede und Anschrift sind einzelne Zeilen, Ueberschriften sollen linksbuendig bleiben. Ohne `hyphens` reisst der Blocksatz bei schmalen Spalten Luecken — im PDF geht das nicht, hier schon. */ .content.dok-seite .dok-papier-koerper p, .content.dok-seite .dok-papier-koerper li, .content.dok-seite .dok-bs-txt p, .content.dok-seite .dok-bs-txt li { text-align: justify; hyphens: auto; } /* Offene Stelle im Papier – dieselbe Optik wie im Entwurf besprochen. */ .content.dok-seite .dok-luecke { background: var(--tigers-yellow); border: 1px dashed var(--tigers-gold); border-radius: 4px; padding: 0 5px; color: #1a1a1a; font-weight: 700; } @media (max-width: 1100px) { .dok-spalt-2, .dok-spalt-2b { grid-template-columns: 1fr; } .dok-klebrig { position: static; } } /* ---- Ansicht, Unterschrift, Verlauf (Teil 5) ----------------------- */ .dok-panel-tat { border-color: var(--tigers-yellow-45); } /* Statusschiene */ .dok-rail { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; } .dok-st { padding: 0.28rem 0.65rem; border-radius: 999px; background: rgba(var(--ink) / 0.1); border: 1px solid rgba(var(--ink) / 0.18); color: rgba(var(--ink) / 0.6); font-size: 0.74rem; font-weight: 700; white-space: nowrap; } .dok-st.done { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok-text); } .dok-st.now { background: var(--tigers-yellow); border-color: var(--tigers-yellow); color: var(--tigers-black); } /* Unterschriftenzone im Papier */ .dok-papier-sig { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 26px; } .dok-sig-feld { flex: 1; min-width: 150px; } .dok-sig-bild { height: 46px; width: auto; display: block; } .dok-sig-leer { height: 46px; display: flex; align-items: flex-end; color: #999999; font-size: 0.7rem; } .content.dok-seite .dok-sig-leer { color: #999999; } .dok-sig-linie { border-top: 1px solid #1a1a1a; padding-top: 3px; font-size: 0.66rem; } .content.dok-seite .dok-sig-linie { color: #1a1a1a; font-size: 0.66rem; } /* Unterschriftsfeld (signature_pad). Die Hoehe steht bewusst FEST und nicht auf auto: ein Pad ohne feste Hoehe kollabiert auf wenige Pixel — genau der Fehler vom 2026-07-18 bei der Uebungsleiterpauschale. */ .dok-sigpad-rahmen { background: var(--bg-signature); border: 1px solid rgba(var(--ink) / 0.3); border-radius: 10px; padding: 4px; } .dok-sigpad { width: 100%; height: 150px; display: block; touch-action: none; } /* Verlauf */ .dok-verlauf { display: flex; flex-direction: column; gap: 0.35rem; } .dok-v-zeile { display: flex; gap: 0.6rem; align-items: baseline; border-left: 2px solid var(--tigers-yellow-35); padding-left: 0.6rem; } .dok-v-zeit { color: rgba(var(--ink) / 0.5); font-size: 0.7rem; white-space: nowrap; } .dok-v-text { color: rgba(var(--ink) / 0.78); font-size: 0.76rem; } .content.dok-seite .dok-v-text b { color: rgb(var(--ink)); font-weight: 800; font-size: 0.76rem; } .dok-v-kommentar { display: block; color: rgba(var(--ink) / 0.6); font-size: 0.72rem; font-style: italic; } .dok-btn-gefahr { border-color: var(--err-border); color: var(--err-text); } .dok-btn-gefahr:hover { background: var(--err-bg); } /* Plakette am Menuepunkt "Meine Dokumente" (Dokumenten-Modul). Sitzt in der Navigationsleiste, die in beiden Themes dunkel ist — deshalb feste Farben statt --ink. */ .ti-nav-plakette { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px; border-radius: 999px; background: var(--tigers-yellow); color: var(--tigers-black); font-size: 0.7rem; font-weight: 900; line-height: 1; vertical-align: middle; } /* Herkunftszeichen in "Meine Dokumente" (erstellt vs. hochgeladen). */ .dok-herkunft { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--tigers-yellow-ink); font-size: 0.72rem; font-weight: 800; } .dok-herkunft i { font-size: 0.68rem; } /* Feine Trennlinie innerhalb eines Panels (Ansicht: Unterschreiben ⇄ Zurückgeben). */ .dok-trenner { height: 1px; background: rgba(var(--ink) / 0.16); margin: 1rem 0 0.2rem; } /* ---- Ablauf als Schrittliste --------------------------------------- Ersetzt die frühere einzeilige Statusschiene: jede Vereinsunterschrift ist ein eigener Schritt, damit eine ausstehende zweite sichtbar wird. */ .dok-schritte { display: flex; flex-direction: column; gap: 0; } .dok-schritt { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.3rem 0; position: relative; } /* Verbindungslinie zwischen den Punkten */ .dok-schritt::before { content: ""; position: absolute; left: 10px; top: 1.5rem; bottom: -0.3rem; width: 2px; background: rgba(var(--ink) / 0.18); } .dok-schritt:last-child::before { display: none; } .dok-schritt.done::before { background: var(--ok-border); } .dok-schritt-punkt { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(var(--ink) / 0.12); border: 1px solid rgba(var(--ink) / 0.22); color: rgba(var(--ink) / 0.5); font-size: 0.66rem; position: relative; z-index: 1; } .dok-schritt.done .dok-schritt-punkt { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok-text); } .dok-schritt.now .dok-schritt-punkt { background: var(--tigers-yellow); border-color: var(--tigers-yellow); color: var(--tigers-black); } .dok-schritt-text { color: rgba(var(--ink) / 0.6); font-size: 0.82rem; font-weight: 700; padding-top: 1px; } .dok-schritt.done .dok-schritt-text { color: rgba(var(--ink) / 0.85); } .dok-schritt.now .dok-schritt-text { color: rgb(var(--ink)); } .dok-schritt-detail { display: block; color: rgba(var(--ink) / 0.5); font-size: 0.72rem; font-weight: 400; } /* ---- Leiste "Schritt 1-3" beim Erstellen ---------------------------- Waagrecht und ueber der Seite. Nicht zu verwechseln mit .dok-schritte (senkrecht, zeigt auf der Ansicht den Freigabe- und Unterschriftsweg). Erledigte Schritte sind Links — das ist der Weg zurueck. */ .dok-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0 0 1rem; } .dok-leiste-s { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0 0.7rem; height: var(--feld-hoehe); border: 1px solid rgba(var(--ink) / 0.18); border-radius: 999px; background: rgba(var(--ink) / 0.04); text-decoration: none; white-space: nowrap; } /* Trennpfeil zwischen den Schritten */ .dok-leiste-s + .dok-leiste-s::before { content: "\f054"; /* fa-chevron-right */ font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 0.6rem; color: rgba(var(--ink) / 0.35); margin: 0 0.25rem 0 -0.3rem; } .dok-leiste-nr { width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 800; background: rgba(var(--ink) / 0.12); color: rgba(var(--ink) / 0.72); } .dok-leiste-text { font-size: 0.8rem; font-weight: 700; color: rgba(var(--ink) / 0.72); } a.dok-leiste-s.done:hover { border-color: rgba(var(--ink) / 0.4); background: rgba(var(--ink) / 0.09); } .dok-leiste-s.done .dok-leiste-nr { background: var(--ok-bg); border: 1px solid var(--ok-border); color: var(--ok-text); } .dok-leiste-s.done .dok-leiste-text { color: rgba(var(--ink) / 0.8); } .dok-leiste-s.now { border-color: var(--tigers-yellow); background: rgba(var(--ink) / 0.06); } .dok-leiste-s.now .dok-leiste-nr { background: var(--tigers-yellow); color: var(--tigers-black); } .dok-leiste-s.now .dok-leiste-text { color: rgb(var(--ink)); } /* Der Hinweis unter der Leiste, wie sich Schritt 1 doch noch korrigieren laesst. Rueckt an die Leiste heran, ohne sie zu beruehren. */ .content.dok-seite .dok-zurueck-hinweis { margin: -0.5rem 0 1rem; } .content.dok-seite .dok-zurueck-hinweis i { color: rgba(var(--ink) / 0.72); margin-right: 0.3rem; } /* Ohne eigene Regel erbt der Link die gedaempfte Farbe von .dok-lead und ist als Link nicht mehr zu erkennen — im Gegentest 2026-08-07 gesehen. */ .content.dok-seite .dok-zurueck-hinweis a { color: rgb(var(--ink)); font-weight: 800; text-decoration: underline; text-underline-offset: 2px; } /* Knopfreihen: "zurueck" ganz links, "verwerfen" ganz rechts — ohne dafuer die Reihenfolge im Quelltext zu drehen. Der ERSTE Absende-Knopf eines Formulars ist der, den die Eingabetaste ausloest; das muss "Speichern" bleiben und darf nicht "Zurueck" werden. */ .dok-knopfreihe .dok-knopf-links { order: -1; } .dok-knopfreihe .dok-knopf-rechts { margin-left: auto; } @media (max-width: 700px) { .dok-knopfreihe .dok-knopf-rechts { margin-left: 0; } } /* Fette Stellen in Hinweistexten. Ohne eigene Regel greift `* { color: var(--text-color) }` und das steht dunkel auf dunklem Glas — dieselbe Falle wie bei .dokw-schalter b (2026-08-06, zweiter Fund). */ .content.dok-seite .dok-feld-hinweis b, .content.dok-seite .dok-haken b, .content.dok-seite .dok-kachel-text b, .content.dok-seite .dok-schritt-detail b { color: rgba(var(--ink) / 0.8); font-weight: 800; } /* ===================================================================== SYMBOL-KAESTCHEN: exakte Zentrierung (2026-08-07) --------------------------------------------------------------------- Gemeldet: "Symbole innerhalb der Kaestchen liegen nie genau in der Mitte, sondern sind vertikal/horizontal verschoben." Ursache: Diese Knoepfe haben eine feste Kantenlaenge (z. B. 28x28), ihr Inhalt ist aber ein im normalen Textfluss. Der sitzt damit auf der SCHRIFTLINIE, nicht in der Mitte — und weil FontAwesome-Glyphen ihre eigene, vom Kaestchen abweichende Zeilenhoehe mitbringen, kippt das Zeichen je nach Symbol um ein bis drei Pixel nach unten. Waagrecht kommt der Versatz aus dem geerbten Innenabstand des