/* ============================================================ mein ok - Designsystem EINE Datei als Quelle. Farben, Abstände und Formen stehen als Variablen oben; darunter kommt nichts vor, was nicht daraus abgeleitet ist. Wer eine Farbe ändern will, ändert sie hier - nicht an vierzig Stellen. Richtung: warm, ruhig, vertrauenswürdig. Kein Behörden-Look, nicht verspielt. Sandfarbener Grund, fast weiße Karten, sehr große fette Überschriften in tiefem Anthrazit, kleine luftige Fließtexte, EIN freundliches Grün für Aktionen. Mobil zuerst: die Grundwerte gelten für das Handy, die Medienabfragen weiten sie für breite Fenster. ============================================================ */ /* ---------- Schrift ---------- Fira Sans, SELBST AUSGELIEFERT. Die CSP erlaubt keine fremde Schriftquelle (font-src 'self') - und das ist nicht Prinzipienreiterei: eine Schrift von Google eingebunden heißt, dass jeder Aufruf einer Unterschriftsseite bei einem Dritten aufscheint, samt IP-Adresse der unterschreibenden Person. Die geht niemanden an. WOFF statt WOFF2: WOFF2 braucht Brotli, WOFF nur zlib - und die Dateien entstehen mit werkzeuge/schrift-woff.php aus den TTFs von Google Fonts. Ergebnis: 431 KB → 196 KB je Schnitt. WOFF2 wäre noch etwas kleiner; kommt, wenn ein Umwandler dafür zur Hand ist (dann einfach eine zweite src-Zeile DAVOR, der Browser nimmt die erste, die er kann). FÜNF Schnitte, und jeder hat eine Aufgabe (13.09.2026): Regular für Fließtext, Medium für Beschriftungen, SemiBold für kleine Versalzeilen und Knöpfe, Bold für Zwischenüberschriften, ExtraBold für die großen Überschriften. Warum fünf und nicht drei: das Design lebt vom GEWICHTSKONTRAST - eine 800er Überschrift über einem 400er Absatz. Mit nur Bold als schwerstem Schnitt fällt genau dieser Kontrast weg, und die Seite sieht flau aus. Zwei weitere Dateien sind rund 420 KB, die einmal geladen und dann zwischengespeichert werden. Was es NICHT gibt: eine zweite Schriftfamilie. Die Vorlage nutzte Caveat für das Wortzeichen und IBM Plex Mono für die Versalzeilen; beides ersetzt hier ein Gewicht derselben Schrift (Vorgabe 13.09.2026: "die schrift soll gleich bleiben, ändere die font-weight, je nach überschrift"). Eine Schrift, fünf Gewichte - das hält die Seite ruhig und spart zwei Downloads. font-display: swap - der Text steht sofort da, in der Ersatzschrift, und wird nachgezeichnet. Nichts blockiert. Fehlen die Dateien, bleibt es bei der Ersatzkette; die Seite sieht anders aus, aber nichts bricht. Lizenz: SIL Open Font License, siehe schrift/LIZENZ-OFL.txt. ---------------------------------------------------------------- */ @font-face { font-family: 'Fira Sans'; src: url('schrift/FiraSans-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Fira Sans'; src: url('schrift/FiraSans-Medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Fira Sans'; src: url('schrift/FiraSans-SemiBold.woff') format('woff'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Fira Sans'; src: url('schrift/FiraSans-ExtraBold.woff') format('woff'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Fira Sans'; src: url('schrift/FiraSans-Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; } :root { /* Flächen. Zwei Töne: der helle Grund trägt die Seite, das wärmere Sand die Bänder (Kopfleiste, Aufschlag, Fußzeile). Karten sind REIN WEISS - der Kontrast zum warmen Grund ist das tragende Mittel dieses Designs, nicht der Schatten. */ --sand: #FDFAF4; --sand-tief: #FAF0DE; --sand-warm: #F6EAD3; --karte: #FFFFFF; --linie: rgba(27, 26, 23, .09); --linie-fest: #E9E1D2; /* wo eine durchscheinende Linie nicht geht */ /* Text. Vier Stufen statt drei: der Fließtext steht zwischen Überschrift und Beschriftung, und genau dieser Zwischenton macht eine Textseite ruhig. */ --ink: #1B1A17; --ink-text: #443F38; --ink-weich: #56514A; --ink-zart: #8A8276; --ink-soft: #6F6A5F; /* Dunkler Block - der Blickfang am Ende eines Abschnitts. */ --dunkel: #1B1A17; --dunkel-text: #FAF6EE; /* Die EINE Aktionsfarbe: freundliches Grün. Grün ist die Farbe der Zustimmung, und darum geht es hier. ZWEI GRÜNTÖNE, UND DAS IST ABSICHT. `--gruen-mark` ist der Ton aus der Vorlage (#14B866) - er trägt Punkte, Versalzeilen und Ränder, also alles, was NICHT beschriftet ist. Für einen gefüllten Knopf mit weißer Schrift reicht er nicht: gemessen 2,6:1, und die WCAG-Grenze für Text dieser Größe liegt bei 4,5:1. Weiß auf `--gruen` (#0C8449) sind 4,8:1. Der helle Ton kommt beim Überfahren zurück - dort ist er Rückmeldung, nicht Textgrund. */ --gruen-mark: #14B866; --gruen: #0C8449; --gruen-dunkel:#0A6B3B; --gruen-zart: #E4F6EC; /* Zustände. Aktionsgrün und Zustandsgrün werden über Sättigung UND Form getrennt: Aktionen sind gefüllte Pillen, Zustände blasse Abzeichen mit Wort. FARBE STEHT NIE ALLEIN. */ --ok: #0C8449; --ok-zart: #E4F6EC; --warn: #8A5A10; --warn-zart: #FBF1DC; --stopp: #A63A2E; --stopp-zart: #FAE9E5; --info: #2C5F86; --info-zart: #E7EFF6; /* Formen. Deutlich runder als vorher - 26px an der Karte ist der Wert aus der Vorlage und der Grund, warum die Seite weich wirkt, obwohl fast nichts einen Schatten hat. */ --r-karte: 26px; --r-feld: 14px; --r-pille: 999px; /* Karten tragen KEINEN Schatten mehr, nur eine Haarlinie. Der Schatten bleibt für das, was wirklich über der Seite liegt. */ --schatten: none; --schatten-tief: 0 18px 40px rgba(27, 26, 23, .12); /* Abstände */ --l1: 4px; --l2: 8px; --l3: 12px; --l4: 16px; --l5: 24px; --l6: 32px; --l7: 48px; --l8: 72px; --schrift: 'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } /* ---------- Grundlagen ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--sand); color: var(--ink); font: 400 16px/1.65 var(--schrift); -webkit-font-smoothing: antialiased; } /* Überschriften. DAS GEWICHT MACHT DIE HIERARCHIE, nicht eine zweite Schrift: h1 und h2 stehen in 800, h3 in 700, die kleinen Versalzeilen in 600. Je größer die Überschrift, desto enger die Laufweite - eine große Zeile in normaler Laufweite fällt auseinander. clamp() statt Medienabfragen: eine Regel statt drei. */ h1, h2, h3, h4 { margin: 0 0 var(--l3); line-height: 1.08; } h1 { font-size: clamp(2.5rem, 7.2vw, 6.25rem); font-weight: 800; letter-spacing: -.035em; line-height: 1; max-width: 24ch; } h2 { font-size: clamp(1.75rem, 3.8vw, 3.25rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; max-width: 26ch; } h3 { font-size: clamp(1.3rem, 2.1vw, 1.7rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; } h4 { font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; } p { margin: 0 0 var(--l4); } p.gross { font-size: clamp(1.06rem, 1.5vw, 1.31rem); line-height: 1.5; color: var(--ink-text); max-width: 52ch; } /* Fließtext: eine Stufe heller als die Überschrift, nie grau. Das Lesemaß steht am Text, nicht an der Seite. */ .fliess { max-width: 62ch; color: var(--ink-text); line-height: 1.55; } .klein { font-size: .875rem; color: var(--ink-weich); } .zart { color: var(--ink-zart); } a { color: var(--gruen-dunkel); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--gruen); } hr { border: 0; border-top: 1px solid var(--linie); margin: var(--l6) 0; } /* ---------- Aufbau ---------- */ /* EINE Breite für Kopfleiste, Inhalt und Fußzeile. Es gab hier drei (560/780/1080); weil Kopf und Fuß immer die volle nahmen, sprang der Inhalt beim Seitenwechsel gegenüber dem Logo hin und her. Schmaler wird jetzt der INHALT (Text, Feld, Karte), nie die Seite - das gilt dann überall gleich. */ .huelle { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); } /* Die eine Ausnahme: eine Seite, die genau EINE Sache kann (anmelden, Passwort setzen, zweiter Faktor). Sie wird als GANZE schmal - Kopfleiste, Inhalt und Fußzeile gemeinsam -, damit auf ihr trotzdem alles bündig steht. */ .huelle-fokus { max-width: 560px; } /* IN EINER SCHMALEN HÜLLE IST DIE PLAKATGRÖSSE FALSCH. `h1` ist auf den Aufschlag der Startseite gerechnet (bis 100 px) - in einer 560-px-Karte füllt derselbe Satz damit den halben Bildschirm und wirkt wie eine Warnung. Hier gilt eine Stufe, die zu einer Karte passt; gesetzt wird sie an EINER Stelle, damit Anmelden, Registrieren, Bestätigen, Passwort und zweiter Faktor gleich aussehen. */ .huelle-fokus h1 { font-size: clamp(1.6rem, 3vw, 2.15rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.12; } .huelle-fokus h2 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); } /* Die zweite: ein Dokument, das Platz braucht. Vertragstexte laufen über die ganze Breite - der seitliche Abstand bleibt, damit der Text nicht an der Fensterkante klebt. */ .huelle-voll { max-width: none; } /* Lesemaß für längere Fließtexte: Rechtstexte, Erklärungen, Beschreibungen. Rund 68 Zeichen je Zeile - darüber verliert das Auge beim Zeilenwechsel den Anschluss. */ .lesetext { max-width: 68ch; } .lesetext > :last-child { margin-bottom: 0; } /* Die Gliederung eines Rechtstexts: eng am Text, nicht als Seitenüberschrift. h2 trägt den Abschnitt, h3 die Ziffer. */ .lesetext h2 { font-size: 1.25rem; margin: var(--l6) 0 var(--l2); } .lesetext h3 { font-size: 1.05rem; margin: var(--l5) 0 var(--l2); } .lesetext h4 { font-size: .95rem; margin: var(--l4) 0 var(--l1); } .lesetext > :first-child { margin-top: 0; } .lesetext ul { margin: 0 0 var(--l3); padding-left: var(--l5); } .lesetext li { margin-bottom: var(--l1); } .lesetext blockquote { margin: var(--l4) 0; padding: var(--l3) var(--l4); border-left: 3px solid var(--linie); background: var(--sand-tief); border-radius: 0 var(--r-feld) var(--r-feld) 0; } .lesetext blockquote p { margin: 0 0 var(--l1); } /* Eine Tabelle im Rechtstext darf über das Lesemaß hinaus - sonst drückt die Empfängertabelle ihre Spalten auf zwei Wörter. */ .lesetext .tabellenhuelle { max-width: none; margin-bottom: var(--l4); } main { padding: var(--l6) 0 var(--l8); } /* Kopfleiste: ein warmes Band, das beim Rollen oben stehen bleibt. Durchscheinend mit Weichzeichner - der Inhalt schiebt sich sichtbar darunter durch, statt an einer harten Kante zu verschwinden. `backdrop-filter` ist Zierde: fehlt sie, trägt die Grundfarbe. */ .kopf-band { position: sticky; top: 0; z-index: 20; background: rgba(250, 240, 222, .88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--linie); } .kopf { display: flex; align-items: center; gap: var(--l5); padding: 18px 0; } /* Das Wortzeichen. In der Vorlage stand „ok" in einer Schreibschrift; hier ist es dieselbe Schrift in 800 - mit dem grünen Punkt dahinter, der das Zeichen erst zum Zeichen macht. */ .kopf-marke { display: inline-flex; align-items: baseline; gap: 7px; font-size: 1.1rem; letter-spacing: -.01em; color: var(--ink); text-decoration: none; font-weight: 500; } .kopf-marke span { font-weight: 800; font-size: 1.35rem; letter-spacing: -.03em; color: var(--ink); } .kopf-marke::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--gruen-mark); align-self: center; } .kopf-menue { display: flex; gap: var(--l1); margin-left: auto; align-items: center; flex-wrap: wrap; } .kopf-menue a { padding: var(--l2) var(--l4); border-radius: var(--r-pille); color: var(--ink-weich); text-decoration: none; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; } .kopf-menue a:hover { background: rgba(27, 26, 23, .06); color: var(--ink); } /* Der LETZTE Punkt ist der Weg hinein („Anmelden") und trägt in der Vorlage als einziger eine Umrandung - so hebt er sich ab, ohne ein zweiter grüner Knopf zu sein. */ .kopf-menue a:last-child { border: 1px solid rgba(27, 26, 23, .2); padding-inline: var(--l5); } .kopf-menue a[aria-current="page"] { color: var(--ink); border: 1px solid rgba(27, 26, 23, .2); } /* Mandantenlogo in der Kopfleiste - das Branding des Mandanten erscheint hier und auf der Unterschriftsseite, nicht als Farbe über der ganzen Anwendung. */ .kopf-logo { height: 28px; width: auto; max-width: 140px; object-fit: contain; } /* ---------- Die Kopfleiste am Handy (14.09.2026) ---------- VORHER BRACH SIE UM, UND DAS WAR DAS PROBLEM. `flex-wrap` lässt die Punkte in eine zweite und dritte Zeile rutschen; im Mandantenbereich sind es sechs, und sie landeten in einem Block neben dem Wortzeichen - unterschiedlich hoch, je nachdem, welche Seite gerade offen war, weil der aktive Punkt eine Umrandung bekommt und damit breiter ist. Jetzt liegt die Leiste UNTER dem Wortzeichen und scrollt in ihrem EIGENEN Behälter waagrecht. Das ist dasselbe Muster wie bei den Reitern (siehe `.reiterhuelle`) - die Seite selbst scrollt nie seitwärts, nur diese eine Zeile. Kein Klappmenü: das bräuchte entweder JavaScript (und ohne muss es weitergehen) oder ein `
`, dessen Zustand man am Rechner wieder aufmachen müsste. Eine Leiste, die man schiebt, kann nicht zugehen. */ @media (max-width: 719px) { .kopf { flex-wrap: wrap; gap: 10px var(--l4); padding: 12px 0; } .kopf-marke { margin-right: auto; } .kopf-menue { order: 10; /* immer unter das Wortzeichen */ width: 100%; margin-left: 0; flex-wrap: nowrap; /* NICHT umbrechen, sondern schieben */ overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Randlos bis an die Kante schieben, damit man sieht, dass da noch etwas kommt - der Innenabstand der Hülle wird innen wieder aufgeschlagen. */ margin-inline: calc(var(--l4) * -1); padding-inline: var(--l4); gap: 4px; } .kopf-menue::-webkit-scrollbar { display: none; } .kopf-menue a { flex: 0 0 auto; /* sonst quetschen sich die Punkte */ padding: 7px 12px; font-size: .68rem; letter-spacing: .1em; } /* Am Handy bekommt der letzte Punkt KEINE Sonderrolle: eine Umrandung, die nur manchmal am rechten Rand sichtbar ist, sieht nach einem Fehler aus. Der aktive Punkt wird stattdessen gefüllt - der ist der, den man sucht. */ .kopf-menue a:last-child { border: 0; padding-inline: 12px; } .kopf-menue a[aria-current="page"] { border: 0; background: var(--ink); color: var(--sand); } .kopf-logo { height: 24px; max-width: 110px; } } /* ---------- Karten ---------- */ .karte { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: 28px 24px 32px; margin-bottom: 20px; } @media (min-width: 720px) { /* 32/28/36 ist der Wert aus der Vorlage - unten mehr als oben, damit die Karte nicht kopflastig wirkt. */ .karte { padding: 32px 28px 36px; } } .karte-still { background: transparent; border-style: dashed; } .karte > :last-child { margin-bottom: 0; } .karte-kopf { display: flex; align-items: baseline; gap: var(--l3); margin-bottom: var(--l4); flex-wrap: wrap; } .karte-kopf h2, .karte-kopf h3 { margin: 0; } .karte-kopf .rechts { margin-left: auto; } /* `auto-fit` mit Mindestbreite statt fester Bruchpunkte: die Karten brechen um, wenn sie ZU ENG werden, nicht bei einer Fensterbreite, die jemand einmal aufgeschrieben hat. So macht es die Vorlage, und es hält auch dann, wenn eine Spalte daneben dazukommt. */ .raster { display: grid; gap: 20px; grid-template-columns: 1fr; } @media (min-width: 560px) { .raster-drei { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .raster-zwei { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); } } /* ---------- Die kleine Versalzeile über einer Überschrift ---------- In der Vorlage stand hier IBM Plex Mono. Sie ist ersetzt durch dieselbe Schrift in 600 mit weiter Laufweite - das trägt dieselbe Rolle (ruhige, technische Vorzeile) ohne eine zweite Schriftdatei. KEINE PILLE MEHR. Sie war ein Kästchen um eine Zeile, die keines braucht; ohne sie steht die Überschrift darunter näher an ihrem Abschnitt und die Seite wird deutlich ruhiger. */ .etikett { display: block; color: var(--ink-soft); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .2em; margin-bottom: var(--l3); } /* Noch eine Stufe zurückgenommen - die Vorzeile einer Karte steht leiser als die eines Abschnitts. */ .etikett-sand { color: var(--ink-zart); letter-spacing: .18em; font-size: .69rem; } /* GRÜN nur dort, wo die Zeile einen Schritt nummeriert. In der Vorlage ist genau das der Unterschied zwischen „01 VORBEREITEN" (grün) und „ANWENDUNGEN" (grau) - und er trägt Bedeutung: grün heißt, hier geht etwas voran. */ .etikett-schritt { color: var(--gruen-mark); } /* Dieselbe Zeile, wo sie nicht über einer Überschrift steht. */ .versal { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .2em; color: var(--ink-zart); } /* ---------- Knöpfe ---------- Pillen, voll gerundet, Beschriftung in Versalien mit Laufweite - dieselbe Sprache wie die kleine Vorzeile. Klickflächen großzügig, das läuft am Handy. DIE SCHRIFTGRÖSSE IST BEWUSST KLEIN (13 px), die Klickfläche dafür 46 px hoch: eine Versalzeile in 16 px wirkt in einer Pille wie ein Schild. Die Höhe kommt aus dem Innenabstand, nicht aus der Schrift. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--l2); min-height: 46px; padding: var(--l3) var(--l5); border: 1px solid rgba(27, 26, 23, .2); border-radius: var(--r-pille); background: transparent; color: var(--ink); font: 600 .8rem/1 var(--schrift); text-transform: uppercase; letter-spacing: .12em; text-decoration: none; cursor: pointer; transition: background .12s, border-color .12s, color .12s, transform .06s; } .btn:hover { background: rgba(27, 26, 23, .06); border-color: var(--ink); color: var(--ink); } .btn:active { transform: translateY(1px); } .btn:focus-visible { outline: 2px solid var(--gruen); outline-offset: 3px; } /* DER TON DER VORLAGE, auf ausdrückliche Vorgabe („es soll genau so aussehen", 13.09.2026). Weiß darauf misst 2,6:1; die WCAG verlangt bei dieser Schriftgröße 4,5:1. Ausgeglichen wird das, so weit es ohne Farbwechsel geht: 700 statt 600, ein Deckstrich in der Grundfarbe als Rand, und beim Überfahren wird es dunkler statt heller. Wer die Grenze wirklich einhalten will, tauscht `--gruen-mark` gegen `--gruen` - eine Zeile. */ .btn-haupt { background: var(--gruen-mark); border-color: var(--gruen-mark); color: #fff; font-weight: 700; } .btn-haupt:hover { background: var(--gruen); border-color: var(--gruen); color: #fff; } .btn-still { background: transparent; border-color: transparent; color: var(--ink-weich); } .btn-still:hover { background: rgba(27, 26, 23, .06); } .btn-stopp { color: var(--stopp); border-color: rgba(166, 58, 46, .3); } .btn-stopp:hover { background: var(--stopp-zart); border-color: var(--stopp); color: var(--stopp); } .btn-gross { min-height: 56px; padding: var(--l4) calc(var(--l6) + 4px); font-size: .82rem; } .btn-klein { min-height: 36px; padding: var(--l2) var(--l4); font-size: .7rem; letter-spacing: .1em; } .btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: default; } .knopfreihe { display: flex; gap: var(--l3); flex-wrap: wrap; align-items: center; } /* ABSTAND IST EINE REGEL, KEINE VIER style-ANGABEN. Ein Knopf direkt hinter einem Feld bekommt Luft nach oben - versteckte Felder sind ausgenommen, und das ist der ganze Trick: ein hidden-Feld vor einem Knopf ist hier der Normalfall (CSRF, Aktion, Id), und ohne die Ausnahme rutscht jeder Knopf in jeder Tabellenzelle aus seiner Zeile. */ .feld + .btn, .feld + .knopfreihe, label + .btn, .hinweis + .btn, .reihe + .btn, .reihe + .knopfreihe, dl + .btn, .haken + .btn, .haken + .knopfreihe { margin-top: var(--l4); } h1 + .btn, h1 + .knopfreihe { margin-top: var(--l4); } /* ---------- Formulare ---------- */ label { display: block; font-weight: 500; font-size: .9rem; margin-bottom: 6px; } label .zart { font-weight: 400; } .feld, input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="time"], input[type="number"], input[type="tel"], input[type="url"], select, textarea { display: block; width: 100%; min-height: 46px; padding: var(--l3) var(--l4); border: 1px solid var(--linie); border-radius: var(--r-feld); background: #fff; color: var(--ink); font: 400 1rem/1.4 var(--schrift); } textarea { min-height: 140px; resize: vertical; line-height: 1.6; } select { appearance: none; padding-right: var(--l6); background-image: linear-gradient(45deg, transparent 50%, var(--ink-weich) 50%), linear-gradient(135deg, var(--ink-weich) 50%, transparent 50%); background-position: right 20px center, right 14px center; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; } .feld:focus, input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gruen); box-shadow: 0 0 0 3px var(--gruen-zart); } .feld[aria-invalid="true"], input[aria-invalid="true"] { border-color: var(--stopp); box-shadow: 0 0 0 3px var(--stopp-zart); } /* Ein Formular wird nicht so breit wie die Seite. Begrenzt wird am FELDBLOCK und nicht an der Seite - damit sieht ein Formular auf jeder Seite gleich aus, egal was sonst darauf steht. DIESELBE KANTE FÜR BEIDE: ein einzelnes Feld und eine Reihe (PLZ/Ort) enden an derselben Stelle. Vorher lief die Reihe über die ganze Karte, das einzelne Feld nicht - in einer Karte standen damit zwei verschiedene rechte Kanten. */ .feldgruppe { margin-bottom: var(--l4); max-width: 560px; } .feldgruppe textarea { max-width: none; } .reihe { display: grid; gap: var(--l4); grid-template-columns: 1fr; margin-bottom: var(--l4); max-width: 560px; } /* Ein Textfeld darf die Karte nutzen - dort wird geschrieben, nicht ausgefüllt. */ .feldgruppe:has(textarea), .reihe-voll { max-width: none; } @media (min-width: 560px) { .reihe-zwei { grid-template-columns: 1fr 1fr; } .reihe-drei { grid-template-columns: 1fr 1fr 1fr; } .reihe-schmal-breit { grid-template-columns: 1fr 2fr; } } /* Hinweis unter einem Feld. AM HANDY GIBT ES KEINEN TOOLTIP - ein Hinweis steht sichtbar da, nicht in einem title-Attribut. */ .hinweis { font-size: .825rem; color: var(--ink-weich); margin-top: 6px; } .hinweis-sparsam { color: var(--warn); } .haken { display: flex; gap: var(--l3); align-items: flex-start; margin-bottom: var(--l3); } .haken input[type="checkbox"], .haken input[type="radio"] { width: 22px; height: 22px; min-height: 0; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--gruen); } .haken label { margin: 0; font-weight: 400; font-size: .95rem; } fieldset { border: 0; margin: 0 0 var(--l5); padding: 0; } legend { padding: 0; font-weight: 700; font-size: 1rem; margin-bottom: var(--l3); } /* ---------- Meldungen ---------- NICHTS SCHWEIGT: was abgeschaltet, gescheitert oder nicht eingerichtet ist, sagt das an der Stelle, an der man es merkt - samt Grund und nächstem Handgriff. */ .meldung { display: flex; gap: var(--l3); align-items: flex-start; padding: var(--l4); border-radius: var(--r-feld); border: 1px solid var(--linie); background: var(--karte); margin-bottom: var(--l5); font-size: .95rem; } .meldung strong { display: block; margin-bottom: 2px; } .meldung > :last-child { margin-bottom: 0; } .meldung-ok { background: var(--ok-zart); border-color: #C6DED2; } .meldung-warn { background: var(--warn-zart); border-color: #E8D6B4; } .meldung-stopp { background: var(--stopp-zart); border-color: #E8C6C0; } .meldung-info { background: var(--info-zart); border-color: #C3D6E4; } .meldung-zeichen { flex: 0 0 auto; font-weight: 700; } /* ---------- Abzeichen (Zustände) ---------- Blass, mit Wort. Nie nur Farbe. */ .abzeichen { display: inline-flex; align-items: center; gap: 6px; padding: 4px var(--l3); border-radius: var(--r-pille); font-size: .78rem; font-weight: 700; letter-spacing: .02em; background: var(--sand-tief); color: var(--ink-weich); white-space: nowrap; } .abzeichen::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .abzeichen-ok { background: var(--ok-zart); color: var(--gruen-dunkel); } .abzeichen-warn { background: var(--warn-zart); color: var(--warn); } .abzeichen-stopp { background: var(--stopp-zart); color: var(--stopp); } .abzeichen-info { background: var(--info-zart); color: var(--info); } /* ---------- Zahlen groß herausstellen ---------- */ .kennzahl { display: flex; flex-direction: column; gap: 2px; } .kennzahl-wert { font-size: clamp(2.2rem, 7vw, 3rem); font-weight: 700; letter-spacing: -.03em; line-height: 1; } .kennzahl-wort { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-zart); } /* ---------- Bilder in Kapselform ---------- Ovale/kapselförmige Masken statt harter Rechtecke. */ .kapsel { border-radius: 50% / 32%; overflow: hidden; background: var(--sand-tief); } .kapsel img { display: block; width: 100%; height: 100%; object-fit: cover; } .rund { border-radius: 50%; overflow: hidden; aspect-ratio: 1; background: var(--sand-tief); } /* ---------- Listen und Tabellen ---------- Breite Inhalte scrollen in ihrem eigenen Behälter - die Seite selbst scrollt nie waagrecht. */ .tabellenhuelle { overflow-x: auto; margin: 0 calc(var(--l5) * -1) var(--l4); padding: 0 var(--l5); } table { width: 100%; border-collapse: collapse; font-size: .95rem; } th { text-align: left; padding: var(--l3) var(--l3) var(--l3) 0; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-zart); border-bottom: 1px solid var(--linie); white-space: nowrap; } td { padding: var(--l4) var(--l3) var(--l4) 0; border-bottom: 1px solid var(--linie); vertical-align: middle; } tr:last-child td { border-bottom: 0; } tbody tr:hover td { background: var(--sand); } td.rechts, th.rechts { text-align: right; padding-right: 0; } tfoot td { border-top: 2px solid var(--linie); border-bottom: 0; font-weight: 700; padding-top: var(--l4); } dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--l2) var(--l5); margin: 0 0 var(--l4); } dt { color: var(--ink-zart); font-size: .875rem; } dd { margin: 0; } /* ---------- Leerzustand ---------- */ .leer { text-align: center; padding: var(--l7) var(--l4); color: var(--ink-weich); } .leer h3 { color: var(--ink); } /* ---------- Unterschriftsfeld ---------- */ .signaturfeld { background: #fff; border: 2px dashed var(--linie); border-radius: var(--r-feld); touch-action: none; width: 100%; height: 190px; display: block; } .signaturfeld.gefuellt { border-style: solid; border-color: var(--gruen); } /* ---------- Hilfen ---------- */ .mitte { text-align: center; } .nur-lesen { color: var(--ink-weich); } .abstand-oben { margin-top: var(--l5); } .abstand-unten { margin-bottom: var(--l5); } [hidden] { display: none !important; } .fusszeile { background: var(--sand-tief); border-top: 1px solid var(--linie); margin-top: clamp(48px, 6vw, 88px); padding: clamp(36px, 5vw, 64px) 0 48px; font-size: .875rem; color: var(--ink-soft); } .fusszeile a { color: var(--ink); font-weight: 500; text-decoration: none; } .fusszeile a:hover { color: var(--gruen); text-decoration: underline; } .fusszeile-menue { display: flex; gap: var(--l2) var(--l5); flex-wrap: wrap; margin-bottom: var(--l4); } /* Eine Zeile über etwas, das ANGEKÜNDIGT ist - keine Meldung. Ein Kasten würde sich über Wochen vor die Arbeit drängen, obwohl die neue Fassung noch gar nicht gilt. */ .hinweisband { font-size: .82rem; color: var(--ink-zart); margin: 0 0 var(--l4); padding-bottom: var(--l4); border-bottom: 1px solid var(--linie); } .hinweisband a { color: var(--ink-soft); } /* Fußzeile leiser: die Rechtstexte müssen von jeder Seite aus erreichbar sein (§ 5 ECG), aber sie sind nicht das Produkt. */ .fusszeile-menue a { font-weight: 400; color: var(--ink-soft); } /* Ein Haken, der gerade nicht gelten kann - sichtbar, aber nicht anklickbar. Ausblenden wäre falsch: dann sucht man ihn. */ .haken-gesperrt label, .haken input:disabled + label { color: var(--ink-zart); } .haken input:disabled { opacity: .5; cursor: not-allowed; } /* Bewegung reduzieren, wenn das System es verlangt. */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* Druck: Karten ohne Schatten, Sand wird weiß. */ @media print { body { background: #fff; } .karte { box-shadow: none; border-color: #ccc; } .kopf, .fusszeile, .knopfreihe { display: none; } } /* ---------- Reiter ---------- Am Handy scrollt die Leiste in ihrem EIGENEN Behälter waagrecht - die Seite selbst darf das nie. */ .reiterhuelle { overflow-x: auto; margin: 0 calc(var(--l4) * -1) var(--l5); padding: 0 var(--l4); -webkit-overflow-scrolling: touch; scrollbar-width: none; } .reiterhuelle::-webkit-scrollbar { display: none; } .reiter { display: flex; gap: var(--l1); white-space: nowrap; border-bottom: 1px solid var(--linie); } .reiter a { padding: var(--l3) var(--l4); color: var(--ink-weich); text-decoration: none; font-size: .92rem; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; } .reiter a:hover { color: var(--ink); } .reiter a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--gruen); font-weight: 700; } /* Farbwahl: der Kreis zeigt die gewählte Farbe in echt. */ input[type="color"] { width: 54px; height: 46px; padding: 4px; min-height: 0; border: 1px solid var(--linie); border-radius: var(--r-feld); background: #fff; cursor: pointer; } details > summary { cursor: pointer; padding: var(--l2) 0; font-weight: 500; } details > summary::marker { color: var(--ink-zart); } /* ---------- Aufschlag (Text neben Bild) ---------- Am Handy untereinander, ab Tablett nebeneinander. Das Bild bekommt eine kapselförmige Maske - harte Rechtecke gibt es hier nicht. */ .aufschlag { display: grid; gap: var(--l5); grid-template-columns: 1fr; align-items: start; } .aufschlag-bild { max-width: 260px; margin: 0 auto; padding: var(--l5); background: var(--sand-tief); border-radius: 50% / 34%; } @media (min-width: 900px) { /* minmax(0, …) ist hier der ganze Trick: eine Grid-Spalte ist standardmäßig `minmax(auto, 1fr)`, und `auto` heißt mindestens so breit wie der längste unteilbare Inhalt. Eine Überschrift in 3 rem drückt die Spalte damit über ihren Anteil hinaus, und die Bildspalte daneben wird zum Splitter. Mit minmax(0, …) darf die Textspalte schrumpfen. Breakpoint bei 900 und nicht 760: darunter ist für zwei Spalten plus dieser Überschrift kein Platz. */ .aufschlag { grid-template-columns: minmax(0, 1.3fr) minmax(200px, 0.7fr); gap: var(--l7); align-items: center; } .aufschlag-bild { margin: 0 0 0 auto; } } .mitte .kennzahl { align-items: center; } /* ---------- Kleine Helfer statt inline-Stile ---------- DIE CSP BLOCKIERT JEDES style="…"-ATTRIBUT, und ein Nonce hilft dort NICHT (er wirkt nur auf