/* ========================================================================== IDO DNS Service - Designsystem -------------------------------------------------------------------------- Alle Farben, Abstaende und Radien stehen als Variablen am Anfang dieser Datei. Wer die Optik an ein anderes IDO-Produkt angleichen will, aendert nur diesen Block - an den Bauteilen darunter ist nichts zu tun. Drei Erscheinungsbilder werden bedient: :root hell (Vorgabe) @media (prefers-color-scheme) folgt dem Betriebssystem [data-theme="hell"|"dunkel"] vom Nutzer selbst gewaehlt Wichtig: Farben werden NIE direkt in einem @media- oder [data-theme]-Block auf ein Bauteil gesetzt, sondern immer nur ueber die Variablen. Sonst gilt eine Farbe im nicht gekennzeichneten Zustand gar nicht, und man liest dunkle Schrift auf dunklem Grund. ========================================================================== */ :root { /* Zement - die gemeinsame Neutralskala der IDO-Produktfamilie. Farbton 245 bei fast null Saettigung: kuehl genug, um nach Werkstoff auszusehen, und neutral genug, um unter jeder der vier Kennfarben zu liegen. Eine ins Petrol gezogene Skala haette Patina bevorzugt und Messing schmutzig aussehen lassen. */ --grund: #F4F7FB; --flaeche: #FFFFFF; --flaeche-2: #E7EEF3; --flaeche-3: #D9E1E8; --linie: #CED7DF; --linie-zart: #E4EAF1; --tinte: #0C151C; --tinte-2: #424F5A; --tinte-3: #5E6A75; /* Werkstoff: die Kennfarben der Familie. Alle vier stehen hier, damit sich das Stylesheet zwischen den Produkten nur in der Zuweisung von --kenn unterscheidet. Gleiche Helligkeit und Saettigung, nur der Farbton wechselt - so wirken sie als Satz. Patina Kupfer, das Jahre am Bau war -> IDO DNS Service Messing Klingel- und Namensschild -> IDO Haustafel (Vorschlag) Zink verzinktes Blech, das Gerippe -> IDO Baukasten (Vorschlag) Kobalt Elektroinstallation -> IDO Verteiler (Vorschlag) */ --patina: #00666C; --messing: #614700; --zink: #315C7F; --kobalt: #365692; --patina-2: #005055; --patina-bg: #DDF2F3; --messing-bg: #F4ECDD; --zink-bg: #E1EFFB; --kobalt-bg: #E5EDFC; /* Kennfarbe DIESES Produkts. Ein anderes IDO-Produkt aendert genau diese drei Zeilen - an den Bauteilen darunter ist nichts zu tun. */ --kenn: var(--patina); --kenn-2: var(--patina-2); --kenn-bg: var(--patina-bg); /* Signal. In allen IDO-Produkten identisch und nie dekorativ: Rot bedeutet ueberall dasselbe. Getragen wird ein Status immer von Punkt UND Text, nie von der Farbe allein. */ --aktiv: #28763F; --aktiv-bg: #E4F3E6; --verspaetet: #8F5D00; --verspaetet-bg:#F8EDDD; --inaktiv: #A8372E; --inaktiv-bg: #FEE9E6; --auf-kenn: #FFFFFF; --schatten: 0 1px 2px rgba(12,21,28,.05), 0 8px 24px -14px rgba(12,21,28,.20); --schatten-s: 0 1px 2px rgba(12,21,28,.06); /* Schriften */ --schrift-titel: 'Archivo', 'Helvetica Neue', Arial, sans-serif; --schrift-text: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --schrift-daten: 'IBM Plex Mono', ui-monospace, Consolas, 'Liberation Mono', monospace; /* Abstaende und Radien */ --r-klein: 5px; --r: 8px; --r-gross: 12px; /* Der aeltere Name - er stand in vier Regeln ohne Definition und lief auf den Notwert 10px. */ --rundung: var(--r-gross); /* --breite (1120px) gab es bis zum 09.09.2026. Sie war die Fessel: Auf einem 1920er Schirm blieben links und rechts 400 Pixel leer. Seitdem nimmt der Inhalt die ganze Flaeche, und die Lesbarkeit regeln --lesebreite (Fliesstext) und --doku-breite (Anleitungen) dort, wo sie gebraucht wird - nicht als Deckel ueber allem. */ --breite-schmal: 680px; /* DIE WERKBANK: das eine Mass der Arbeitsflaeche (10.09.2026). Das Gegenteil der alten --breite und trotzdem ihre Wiederkehr - deshalb steht hier, was dazwischen passiert ist. --breite fiel, weil sie ALLES deckelte: auch die Tabelle mit acht Spalten, die auf 2560 Pixeln keinen Grund hat, bei 1120 aufzuhoeren. Danach hatte die Arbeitsflaeche gar kein Mass mehr - und was folgte, war schlimmer als die Fessel: Jeder Block brachte sein eigenes mit. Auf der Vermittlerseite standen an einem Nachmittag SECHS Kanten untereinander: der Hinweiskasten bei 830, der Zustandskasten bei 830, die Tabelle bei 1760, der Abschnittskopf bei 272, die Feldspalte bei 736, der Seitenkopf bei doku-breite. Die Seite war nicht zu breit, sie war ZERFRANST - und auf der naechsten Seite franste sie anders. Die Werkbank ist deshalb kein Deckel ueber den Inhalten, sondern EIN Rahmen fuer die Seite: Alles, was direkt in der Arbeitsflaeche steht, ist genau so breit - eine linke Kante, eine rechte Kante, von Seite zu Seite dieselben. Darunter darf ein Block innen gliedern, was er will; nach aussen zeigt er dieselbe Kante wie sein Nachbar. 80rem (1280px) ist das Mass, weil eine Tabelle mit acht Spalten hineinpasst, ohne dass ein Datensatz auf 1760 Pixel auseinandergezogen wird - dort sucht das Auge zwischen Name und Zustand den Zusammenhang. Wer mehr braucht, bekommt ihn: Die Tabelle rollt in ihrem Rahmen, statt die Seite zu verziehen. */ --werkbank: 80rem; /* DER AUFTRITT: dasselbe fuer die oeffentliche Seite (11.09.2026). Aus dem Betrieb: "die oeffentlichen Seiten wirken zu fuellig, mehr Platz schaffen und eventuell doch nicht die gesamte Breite nutzen, das erschlaegt einen." Es ist derselbe Weg wie drinnen, nur ein halbes Jahr spaeter gelernt. Am 09.09.2026 fiel --breite mit der Begruendung "immer die gesamte Breite nutzen", und das war fuer TABELLEN richtig: Acht Spalten haben keinen Grund, bei 1120 aufzuhoeren. Fuer einen AUFTRITT ist es falsch. Dort steht keine Tabelle, sondern eine Ansprache - und die auf 2560 Pixel zu spannen heisst: Die Ueberschrift klebt am linken Rand, das Bild am rechten, dazwischen liegt ein Meter Nichts, und vier Karten stehen als Band quer durch den Bildschirm. Nicht grosszuegig, sondern laut. 76rem (1216px) ist knapp unter der Werkbank, und das ist Absicht: Der Auftritt traegt keine achtspaltige Tabelle. Was er traegt, sind Text, Karten und ein Bild - und die vertragen eine Kante, an der das Auge zur Ruhe kommt. Ein Deckel ueber allem ist es trotzdem nicht: Wer die volle Flaeche braucht - ein Hintergrundband, eine Trennlinie ueber die Seite -, steht ausserhalb von .inhalt. */ --auftritt: 76rem; /* ABSTANDSSKALA (Befund 08.09.2026: 47 verschiedene rem-Werte in dieser Datei, 680 Inline-Styles in den Vorlagen als Ersatz fuer die fehlende Skala). Acht Stufen auf dem 4-Pixel-Raster. Wer einen Abstand braucht, nimmt eine Stufe - nicht einen Wert. */ --a-1: .25rem; /* 4px Haarspalt: Marker zu Text */ --a-2: .5rem; /* 8px innerhalb einer Zeile */ --a-3: .75rem; /* 12px Nachsatz unter einem Block */ --a-4: 1rem; /* 16px Absatz, Feldgruppe */ --a-5: 1.5rem; /* 24px Karte innen, Karte zu Karte */ --a-6: 2rem; /* 32px Abschnitt zu Abschnitt (Arbeitsflaeche) */ --a-7: 3rem; /* 48px Abschnitt zu Abschnitt (Auftritt) */ --a-8: 4rem; /* 64px Buehne */ /* TYPOSKALA. Sieben Grade, dazu das Etikett. Nichts darunter: 11 Pixel sind die Untergrenze fuer Text, den jemand lesen soll. */ --t-xs: .75rem; /* 12px Nachsatz, Stand, Fussnote */ --t-s: .875rem; /* 14px Nebentext, Tabellen, Knoepfe */ --t-m: 1rem; /* 16px Fliesstext */ --t-l: 1.125rem; /* 18px Kartenueberschrift */ --t-xl: 1.375rem; /* 22px Abschnittsueberschrift */ --t-2xl: 1.75rem; /* 28px Seitentitel */ --t-3xl: 2.25rem; /* 36px Buehne */ --t-etikett: .72rem;/* 11.5px Versalien-Etikett mit Sperrung */ /* LESEBREITE. 52ch der Textschrift sind rund 65 bis 70 Zeichen - die Zeilenlaenge, bei der das Auge den Zeilenanfang wiederfindet. Karten und Hinweiskaesten liefen bis 166 Zeichen je Zeile. */ --lesebreite: 52ch; /* DIE LAUFWEITE EINER DOKUMENTATION (09.09.2026). --lesebreite ist das Mass fuer einen Absatz NEBEN etwas anderem - eine Erklaerung in einer Karte, ein Nachsatz unter einer Tabelle. Eine Anleitung ist anderes: Sie ist der Text, man liest sie am Stueck, und sie traegt Befehle und Werte mitten im Satz. Dafuer sind 52 Zeichen zu eng und die ganze Fensterbreite zu weit - bei 1296 px verliert das Auge am Zeilenende die naechste Zeile. */ --doku-breite: 76ch; /* EINGABEFELDER. Der Rahmen einer Karte (--linie) ist als Feldrand zu leise: 1,46:1 Kontrast, im Dunkeln kaum zu finden. */ /* 3:1 GEGEN BEIDE FLAECHEN (Befund 23, 12.09.2026). Der Kommentar an der Feldregel sagt "Rahmen mit 3:1" zu - #8C9AA8 lag bei 2,88 gegen Weiss und 2,68 gegen den Seitengrund. #82909C erreicht 3,27 und 3,05 und ist optisch derselbe Grauton. Die Zusage haelt jetzt auch gegen die hellere der beiden Flaechen; vorher waere sie selbst mit 3,0 gegen Weiss auf dem Seitengrund noch darunter geblieben. */ --linie-stark: #82909C; --flaeche-eingabe: #FFFFFF; color-scheme: light; } /* Dunkel, wenn das Betriebssystem es vorgibt - aber nur, solange der Nutzer nicht ausdruecklich "hell" gewaehlt hat. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="hell"]) { /* Zement - die gemeinsame Neutralskala der IDO-Produktfamilie. Farbton 245 bei fast null Saettigung: kuehl genug, um nach Werkstoff auszusehen, und neutral genug, um unter jeder der vier Kennfarben zu liegen. Eine ins Petrol gezogene Skala haette Patina bevorzugt und Messing schmutzig aussehen lassen. */ --grund: #090F14; --flaeche: #131A21; --flaeche-2: #1E262E; --flaeche-3: #29333C; --linie: #313C46; --linie-zart: #202930; --linie-stark: #55636F; --flaeche-eingabe: #0E141A; --tinte: #E7EEF3; --tinte-2: #A1AEBA; --tinte-3: #8896A2; /* Werkstoff: die Kennfarben der Familie. Alle vier stehen hier, damit sich das Stylesheet zwischen den Produkten nur in der Zuweisung von --kenn unterscheidet. Gleiche Helligkeit und Saettigung, nur der Farbton wechselt - so wirken sie als Satz. Patina Kupfer, das Jahre am Bau war -> IDO DNS Service Messing Klingel- und Namensschild -> IDO Haustafel (Vorschlag) Zink verzinktes Blech, das Gerippe -> IDO Baukasten (Vorschlag) Kobalt Elektroinstallation -> IDO Verteiler (Vorschlag) */ --patina: #6ECCD1; --messing: #D7BA7D; --zink: #92C0E8; --kobalt: #96BBFE; --patina-2: #8CEAEF; --patina-bg: #052325; --messing-bg: #261D09; --zink-bg: #0F202E; --kobalt-bg: #151E2F; /* Kennfarbe DIESES Produkts. Ein anderes IDO-Produkt aendert genau diese drei Zeilen - an den Bauteilen darunter ist nichts zu tun. */ --kenn: var(--patina); --kenn-2: var(--patina-2); --kenn-bg: var(--patina-bg); /* Signal. In allen IDO-Produkten identisch und nie dekorativ: Rot bedeutet ueberall dasselbe. Getragen wird ein Status immer von Punkt UND Text, nie von der Farbe allein. */ --aktiv: #76CF8A; --aktiv-bg: #0F2013; --verspaetet: #F2B458; --verspaetet-bg:#251908; --inaktiv: #F38275; --inaktiv-bg: #2A1512; --auf-kenn: #090F14; --schatten: 0 1px 2px rgba(0,0,0,.45), 0 10px 30px -16px rgba(0,0,0,.75); --schatten-s: 0 1px 2px rgba(0,0,0,.4); color-scheme: dark; } } /* Dunkel, weil der Nutzer es gewaehlt hat - gilt auch bei hellem System. */ :root[data-theme="dunkel"] { /* Zement - die gemeinsame Neutralskala der IDO-Produktfamilie. Farbton 245 bei fast null Saettigung: kuehl genug, um nach Werkstoff auszusehen, und neutral genug, um unter jeder der vier Kennfarben zu liegen. Eine ins Petrol gezogene Skala haette Patina bevorzugt und Messing schmutzig aussehen lassen. */ --grund: #090F14; --flaeche: #131A21; --flaeche-2: #1E262E; --flaeche-3: #29333C; --linie: #313C46; --linie-zart: #202930; --linie-stark: #55636F; --flaeche-eingabe: #0E141A; --tinte: #E7EEF3; --tinte-2: #A1AEBA; --tinte-3: #8896A2; /* Werkstoff: die Kennfarben der Familie. Alle vier stehen hier, damit sich das Stylesheet zwischen den Produkten nur in der Zuweisung von --kenn unterscheidet. Gleiche Helligkeit und Saettigung, nur der Farbton wechselt - so wirken sie als Satz. Patina Kupfer, das Jahre am Bau war -> IDO DNS Service Messing Klingel- und Namensschild -> IDO Haustafel (Vorschlag) Zink verzinktes Blech, das Gerippe -> IDO Baukasten (Vorschlag) Kobalt Elektroinstallation -> IDO Verteiler (Vorschlag) */ --patina: #6ECCD1; --messing: #D7BA7D; --zink: #92C0E8; --kobalt: #96BBFE; --patina-2: #8CEAEF; --patina-bg: #052325; --messing-bg: #261D09; --zink-bg: #0F202E; --kobalt-bg: #151E2F; /* Kennfarbe DIESES Produkts. Ein anderes IDO-Produkt aendert genau diese drei Zeilen - an den Bauteilen darunter ist nichts zu tun. */ --kenn: var(--patina); --kenn-2: var(--patina-2); --kenn-bg: var(--patina-bg); /* Signal. In allen IDO-Produkten identisch und nie dekorativ: Rot bedeutet ueberall dasselbe. Getragen wird ein Status immer von Punkt UND Text, nie von der Farbe allein. */ --aktiv: #76CF8A; --aktiv-bg: #0F2013; --verspaetet: #F2B458; --verspaetet-bg:#251908; --inaktiv: #F38275; --inaktiv-bg: #2A1512; --auf-kenn: #090F14; --schatten: 0 1px 2px rgba(0,0,0,.45), 0 10px 30px -16px rgba(0,0,0,.75); --schatten-s: 0 1px 2px rgba(0,0,0,.4); color-scheme: dark; } /* ========================================================================== Grundlagen ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } /* DAS ATTRIBUT "hidden" MUSS AUCH WIRKLICH VERSTECKEN. BEFUND AUS DEM BETRIEB (06.09.2026): Der Filter der Anleitungen setzt das Attribut, und drei von dreizehn Beitraegen blieben trotzdem stehen. Der Grund ist der Rangfolge des Browsers: Seine eigene Regel ist nur "[hidden] { display: none }", und jede Regel aus DIESER Datei sticht sie - ".karte--klickbar { display: block }" genuegt. Das faellt niemandem als Fehler auf: Es sieht aus, als traefe die Suche eben mehr. Deshalb steht die Regel hier ganz oben und gilt fuer alles, statt sie an jedem Bauteil einzeln nachzuziehen. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--grund); color: var(--tinte); font-family: var(--schrift-text); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } img, svg { max-width: 100%; } a { color: var(--kenn); text-underline-offset: .18em; } a:hover { color: var(--kenn-2); } :where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--kenn); outline-offset: 2px; border-radius: var(--r-klein); } /* Sprungmarke fuer Tastatur- und Screenreader-Nutzung. */ .sprungmarke { position: absolute; left: -9999px; top: 0; background: var(--kenn); color: var(--auf-kenn); padding: .7rem 1.1rem; border-radius: 0 0 var(--r) 0; z-index: 100; } .sprungmarke:focus { left: 0; } .nur-vorlesen { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ========================================================================== Bausteine auf der Skala ========================================================================== Was hier steht, ersetzt die Inline-Styles der Vorlagen (Befund 08.09.2026). Reihenfolge der Wahl: erst der Baustein (Karte, Kasten, Aufklapper, Befehl), dann eine Variante davon, zuletzt eine der Abstandsklassen ganz unten - und nie ein style-Attribut. Der Test BausteineTest zaehlt die Reste. */ /* ERSTES UND LETZTES KIND EINER FLAECHE. Der grosse Oberabstand einer h2 ist richtig zwischen zwei Abschnitten - in einer Karte, deren erstes Element sie ist, stand er 135-mal inline auf 0. */ .karte > :first-child, .hinweiskasten > :first-child, .meldung > :first-child, .falter-inhalt > :first-child, .aufklapper-inhalt > :first-child, .tabelle-leer > :first-child, td > :first-child, .vabschnitt-kopf > :first-child { margin-top: 0; } .hinweiskasten > :last-child, .meldung > :last-child, .falter-inhalt > :last-child, .aufklapper-inhalt > :last-child, td > :last-child { margin-bottom: 0; } /* KARTENUEBERSCHRIFT: eine Stufe unter dem Abschnitt, in dem die Karte steht. Zwoelfmal stand dafuer "font-size:1.05rem" inline. */ .karte > h2 { font-size: var(--t-l); margin-bottom: var(--a-3); } .karte > h3 { font-size: var(--t-m); margin-bottom: var(--a-2); } .arbeit-inhalt .karte > h2 { font-size: 1.05rem; } /* LESEBREITE in Flaechen. Tabellen, Raster und Formulare sind nicht betroffen - nur Absaetze und Listen. */ .karte > p, .karte > ul, .karte > ol, .karte > dl, .hinweiskasten p, .hinweiskasten li, .meldung { max-width: var(--lesebreite); } .karte > .lesebreite-frei, .karte > p.lesebreite-frei { max-width: none; } /* NACHSATZ: die kleine, gedaempfte Zeile unter einem Block. Bisher ".klein gedaempft" plus zwanzig verschiedene Inline-Margins. */ /* DAS ETIKETT: die kleine, ruhige Zeile ueber einem Block. Das Token --t-etikett gab es seit dem 08.09.2026, die Klasse dazu nicht - jede Stelle baute sich ihre eigene (.tarif-name, .zugangsdaten dt, .wissen-zahl). Wer eine Beschriftung ueber ein Formular oder eine Angabe setzt, nimmt jetzt diese. */ .etikett { font-family: var(--schrift-daten); font-size: var(--t-etikett); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-3); margin: 0 0 var(--a-2); } .nachsatz { font-size: var(--t-xs); color: var(--tinte-3); margin: var(--a-3) 0 0; } .nachsatz a { color: inherit; } .karte > .nachsatz:last-child, .hinweiskasten > .nachsatz:last-child { margin-bottom: 0; } /* AUFKLAPPER:
als Baustein. Der Titel traegt Zeiger und Gewicht ueber die Klasse, nicht ueber neun Inline-Fassungen. */ /* ========================================================================== Der Waehler - was frueher vier gestapelte Aufklapper waren -------------------------------------------------------------------------- Wo sich Varianten GEGENSEITIG AUSSCHLIESSEN - Linux oder QNAP oder OPNsense oder Windows -, war die Klappe das falsche Werkzeug: vier Dreiecke untereinander, jedes ein Versprechen, dass darunter noch etwas kommt, und wer sein System sucht, klappt sich durch. Hier waehlt man einmal und sieht seine Fassung. Ohne Javascript: Die Schalter sind Radioknoepfe, die Reiter ihre Beschriftungen, und ":checked ~" zeigt das passende Blatt. Alle Blaetter stehen im Quelltext - Suchen im Browser findet auch, was gerade nicht sichtbar ist. Der nav zaehlt bei nth-of-type nicht mit, weil er kein div ist; deshalb trifft div.wahl-blatt:nth-of-type(k) genau das k-te Blatt. Fuenf Plaetze. Wer einen sechsten braucht, ergaenzt hier drei Zeilen - und ueberlegt vorher, ob fuenf Varianten nicht eine eigene Seite verdienen. ========================================================================== */ .wahl { margin: var(--a-5) 0; } /* Sichtbar fuer die Tastatur, unsichtbar fuer das Auge. display:none waere falsch - dann waere der Knopf nicht mehr fokussierbar. */ .wahl-schalter { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .wahl-reiter { display: flex; flex-wrap: wrap; gap: var(--a-2); border-bottom: 1px solid var(--linie); padding-bottom: var(--a-3); margin-bottom: var(--a-5); } .wahl-reiter label { display: inline-flex; align-items: center; gap: .4rem; margin: 0; padding: .42rem .9rem; border: 1px solid var(--linie); border-radius: 999px; background: var(--flaeche); color: var(--tinte-2); font-size: var(--t-s); font-weight: 500; cursor: pointer; } .wahl-reiter label:hover { border-color: var(--kenn); color: var(--kenn); } .wahl > div.wahl-blatt { display: none; } .wahl > input:nth-of-type(1):checked ~ div.wahl-blatt:nth-of-type(1), .wahl > input:nth-of-type(2):checked ~ div.wahl-blatt:nth-of-type(2), .wahl > input:nth-of-type(3):checked ~ div.wahl-blatt:nth-of-type(3), .wahl > input:nth-of-type(4):checked ~ div.wahl-blatt:nth-of-type(4), .wahl > input:nth-of-type(5):checked ~ div.wahl-blatt:nth-of-type(5) { display: block; } .wahl > input:nth-of-type(1):checked ~ .wahl-reiter label:nth-of-type(1), .wahl > input:nth-of-type(2):checked ~ .wahl-reiter label:nth-of-type(2), .wahl > input:nth-of-type(3):checked ~ .wahl-reiter label:nth-of-type(3), .wahl > input:nth-of-type(4):checked ~ .wahl-reiter label:nth-of-type(4), .wahl > input:nth-of-type(5):checked ~ .wahl-reiter label:nth-of-type(5) { background: var(--kenn); border-color: var(--kenn); color: var(--auf-kenn); } .wahl > input:nth-of-type(1):focus-visible ~ .wahl-reiter label:nth-of-type(1), .wahl > input:nth-of-type(2):focus-visible ~ .wahl-reiter label:nth-of-type(2), .wahl > input:nth-of-type(3):focus-visible ~ .wahl-reiter label:nth-of-type(3), .wahl > input:nth-of-type(4):focus-visible ~ .wahl-reiter label:nth-of-type(4), .wahl > input:nth-of-type(5):focus-visible ~ .wahl-reiter label:nth-of-type(5) { outline: 2px solid var(--kenn); outline-offset: 2px; } @media (pointer: coarse) { .wahl-reiter label { min-height: 2.75rem; } } /* EINE FORMULARZEILE, DIE IN EINE TABELLENZELLE PASST. Feld und Knopf nebeneinander, der Nachsatz darunter. Damit braucht ein kleines Aendern-Formular keine Klappe mehr: Es ist eine Zeile hoch und steht offen da. Am Telefon bricht es um. */ .zeilenform { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-2); margin: var(--a-2) 0 0; } .zeilenform > input { flex: 1 1 11rem; min-width: 0; width: auto; } .zeilenform > .knopf { flex: 0 0 auto; } .zeilenform > .nachsatz { flex: 1 0 100%; margin: 0; } .aufklapper { margin: var(--a-4) 0; } .aufklapper > summary { cursor: pointer; font-weight: 600; } .aufklapper > summary:hover { color: var(--kenn); } .aufklapper-inhalt { margin-top: var(--a-3); } .aufklapper--leise > summary { font-weight: 500; font-size: var(--t-s); color: var(--tinte-2); } .hinweiskasten > .aufklapper, .karte > .aufklapper:first-child { margin-top: 0; } .karte > .aufklapper:last-child { margin-bottom: 0; } .umbruch { overflow-wrap: anywhere; word-break: break-all; } .vorformatiert { white-space: pre-wrap; overflow-wrap: anywhere; } .kein-umbruch { white-space: nowrap; } /* SUCHZEILE: Feld(er) und Knopf in einer Zeile, umbrechend. Die drei Inline-Flex-Container der Verwaltung. */ .suchzeile { display: flex; flex-wrap: wrap; gap: var(--a-3); align-items: flex-end; margin-bottom: var(--a-4); } .suchzeile > * { flex: 1 1 12rem; min-width: 0; margin: 0; } .suchzeile > .knopf, .suchzeile > .formaktionen { flex: 0 0 auto; margin: 0; } /* DER ZURUECKSETZER MUSS GEWINNEN (Befund 13.09.2026, aus dem Betrieb: "das suchenfeld ist verschoben"). ".suchzeile > *" hat die Spezifitaet (0,1,0) - genau wie ".feldgruppe" mit seinem margin-bottom: 1rem, und das steht 1300 Zeilen WEITER UNTEN. Bei gleicher Spezifitaet gewinnt das spaetere: Die Feldgruppe behielt ihren Aussenrand von 15 Pixeln. Sichtbar wurde das durch align-items: flex-end. Ausgerichtet wird der MARGIN-Kasten, nicht der Inhalt - die Unterkante der Gruppe lag also 15 Pixel unter der Unterkante des Eingabefeldes, und der Knopf stand um genau diese 15 Pixel tiefer als das Feld daneben. ZWEI SELEKTOREN, WEIL ES ZWEI GEGNER GIBT: ".feldgruppe" (0,1,0) und ".arbeit-inhalt .feldgruppe" (0,2,0) - letzteres steht noch einmal 1000 Zeilen weiter unten und setzt 0,95rem. Der erste Anlauf mit nur ".suchzeile > .feldgruppe" (0,2,0) verlor gegen ihn, weil er spaeter kommt; genau 15,2 Pixel, und der Versatz blieb unveraendert stehen. Beide Faelle stehen deshalb hier, jeder eine Stufe ueber seinem Gegner. Ein Zuruecksetzer, der davon abhaengt, WO er in der Datei steht, wird beim naechsten Umsortieren wieder ausgehebelt - und das faellt niemandem auf, weil nichts kaputtgeht, sondern nur etwas verrutscht. */ .suchzeile > .feldgruppe, .arbeit-inhalt .suchzeile > .feldgruppe { margin: 0; } /* Im Arbeitsbereich zog "flex: 1 1 12rem" das Suchfeld auf die ganze Fensterbreite - 1536 Pixel fuer ein Wort. Ein Suchfeld braucht nicht mehr Platz als eine Zeile Suchbegriff. */ .arbeit-inhalt .suchzeile { max-width: 40rem; } .ton-gefahr { color: var(--inaktiv); } .ton-warnung { color: var(--verspaetet); } .ton-aktiv { color: var(--aktiv); } .ton-kenn { color: var(--kenn); } .ton-tinte { color: var(--tinte); } /* LISTEN in Flaechen. */ .liste-eng { margin: 0; padding-left: 1.1rem; } .liste-eng li + li { margin-top: var(--a-1); } .liste-zweispaltig { columns: 2; column-gap: var(--a-5); } @media (max-width: 640px) { .liste-zweispaltig { columns: 1; } } /* ABGESETZT: ein Block mit Linie darueber, wie ein Fuss in der Karte. */ .abgesetzt { margin-top: var(--a-5); padding-top: var(--a-4); border-top: 1px solid var(--linie-zart); } /* QR-CODE: weiss bleibt weiss, auch im Dunkeln - die Kamera braucht den Kontrast, nicht das Thema. */ .qr-rahmen { max-width: 16rem; background: #fff; padding: .75rem; border: 1px solid var(--linie-zart); border-radius: var(--r); margin: var(--a-4) 0; } .qr-rahmen img, .qr-rahmen svg { display: block; width: 100%; height: auto; } /* SUMME unter einer Betragstabelle (Tarif: "Zusammen je Monat"). Eine Stufe groesser als die Posten darueber. */ .betrag-summe { font-size: var(--t-l); } /* KASTENUEBERSCHRIFT im Hinweiskasten: dieselbe Stufe wie .karte > h2. */ .hinweiskasten > h2 { font-size: var(--t-l); margin-bottom: var(--a-3); } /* MARKERZEILE: mehrere Marker nebeneinander, umbrechend - unter einem Titel im Seitenkopf oder unter dem Namen in einer Tabellenzelle. */ .markerzeile { display: flex; flex-wrap: wrap; gap: var(--a-2); margin-top: var(--a-1); } /* BETRAGSFELD in einer Tabellenzelle: so breit wie "9.999,99", rechtsbuendig wie die Betraege daneben. */ .eingabe-betrag { max-width: 7rem; text-align: right; } /* TON-KLASSEN GEWINNEN gegen .klein und .gedaempft, die spaeter in der Datei stehen - sonst waere grau. */ .klein.ton-gefahr, .gedaempft.ton-gefahr { color: var(--inaktiv); } .klein.ton-warnung, .gedaempft.ton-warnung { color: var(--verspaetet); } .klein.ton-aktiv, .gedaempft.ton-aktiv { color: var(--aktiv); } .klein.ton-kenn, .gedaempft.ton-kenn { color: var(--kenn); } .klein.ton-tinte, .gedaempft.ton-tinte { color: var(--tinte); } /* SCHMALE FLAECHEN, BLOCK-LINKS, AUSRICHTUNG. */ .schmal { max-width: 32rem; } /* Zwischen .schmal und der vollen Flaeche fehlte ein Mass. 32rem sind fuer ein Formular MIT Erklaertext oder fuer ein Schreibfeld knapp, die volle Breite ist unlesbar. 44rem ist die Breite, die an vier Stellen gefehlt hat (Befund 09.09.2026). */ .schmal--weit { max-width: 44rem; } .lesebreite { max-width: var(--lesebreite); } .block { display: block; } .link-still { text-decoration: none; color: inherit; } .link-still:hover { color: var(--kenn); } .zentriert { text-align: center; } /* WER ZENTRIERT, MEINT AUCH DEN KASTEN (Befund 13.09.2026, aus dem Betrieb: "Der Text muss Mittig"). `.karte > p` bekommt seine Lesbarkeitsbreite (Zeile 425) - 52 Zeichen, damit ein Absatz nicht ueber die ganze Karte laeuft. Ohne Rand aussen klebt dieser schmale Kasten am LINKEN Rand der Karte, und der Text darin ist zwar mittig, aber eben mittig in seinem eigenen Kasten. Auf einer 1139 Pixel breiten Karte sieht ein 499 Pixel breiter Absatz damit aus wie linksbuendig - was er streng genommen nicht ist, und genau deshalb faellt es beim Schreiben des CSS nicht auf. text-align zentriert Text, nicht Kaesten. Fuer die braucht es den automatischen Aussenrand. */ .zentriert > p, .zentriert > ul, .zentriert > ol, .zentriert > dl { margin-left: auto; margin-right: auto; } .normalgewicht { font-weight: 400; } /* ABSTANDSKLASSEN - die Rueckfallebene auf der Skala. Nur fuer den Rand zwischen zwei Bloecken, nie fuer Innenabstaende. */ .oben-0 { margin-top: 0 !important; } .oben-2 { margin-top: var(--a-2) !important; } .oben-3 { margin-top: var(--a-3) !important; } .oben-4 { margin-top: var(--a-4) !important; } .oben-5 { margin-top: var(--a-5) !important; } .oben-6 { margin-top: var(--a-6) !important; } .unten-0 { margin-bottom: 0 !important; } .unten-2 { margin-bottom: var(--a-2) !important; } .unten-3 { margin-bottom: var(--a-3) !important; } .unten-4 { margin-bottom: var(--a-4) !important; } .unten-5 { margin-bottom: var(--a-5) !important; } .rand-0 { margin: 0 !important; } /* SPRUNGZIELE unter der klebenden Kopfzeile: Wer #kontingent folgt, soll die Ueberschrift sehen, nicht die Kopfzeile darueber. */ [id] { scroll-margin-top: 4.5rem; } /* ========================================================================== Aufbau der Seite ========================================================================== */ /* DIE GANZE BREITE, AUF JEDEM BILDSCHIRM (Wunsch vom 09.09.2026). Hier stand eine feste Obergrenze von 1120 px. Auf einem 27-Zoll- Bildschirm lag damit rechts und links je ein Drittel der Flaeche brach, und die Anwendung sah aus wie eine Seite in einem zu grossen Fenster - nicht wie ein Programm, mit dem man arbeitet. Die Flaeche fuellt jetzt das Fenster; was NICHT mitwaechst, ist die Laufweite von Fliesstext: Eine Zeile ueber etwa 90 Zeichen findet das Auge am Zeilenende nicht mehr zurueck. Dafuer gibt es --lesebreite und die Klasse .lesebreite - die Breite gehoert an den Absatz, nicht an die Seite. Was die Flaeche fuellt, sind Raster, Tabellen und Karten, die auf breiten Bildschirmen mehr Spalten bekommen. */ .inhalt { width: 100%; max-width: var(--auftritt); margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2.5rem); } .inhalt--schmal { max-width: var(--breite-schmal); } main { flex: 1 0 auto; padding: clamp(1.6rem, 4vw, 2.8rem) 0 clamp(3rem, 6vw, 4.5rem); } /* ========================================================================== Kopfzeile ========================================================================== */ .kopf { background: var(--flaeche); border-bottom: 1px solid var(--linie); position: sticky; top: 0; z-index: 30; } .kopf-innen { display: flex; align-items: center; flex-wrap: nowrap; /* Der Abstand schrumpft mit: auf einem 320-px-Telefon zaehlt jeder Millimeter, auf dem Schreibtisch darf die Zeile atmen. */ gap: clamp(.5rem, 2.2vw, 1.2rem); padding-top: .75rem; padding-bottom: .75rem; } .marke { display: inline-flex; align-items: baseline; gap: .38rem; min-width: 0; flex: 0 1 auto; font-family: var(--schrift-titel); font-weight: 700; /* Auf dem Telefon teilt sich der Schriftzug die Zeile mit dem Erscheinungsbild-Umschalter und dem Menueknopf. Damit nichts aus dem Bild laeuft, wird er dort eine Spur kleiner gesetzt. */ font-size: clamp(.98rem, 3.2vw, 1.08rem); letter-spacing: -.015em; color: var(--tinte); text-decoration: none; white-space: nowrap; } .marke:hover { color: var(--tinte); } /* "Service" traegt die Leitfarbe - das ist das Erkennungsmerkmal des Schriftzugs und wiederholt sich in allen IDO-Produkten. */ .marke b { color: var(--kenn); font-weight: 700; } /* NICHT SCHRUMPFEN, WO PLATZ IST (Befund 07.09.2026). Auf dem Telefon muss der Schriftzug nachgeben - er teilt sich die Zeile mit Umschalter und Menueknopf, dafuer steht oben min-width: 0. Ab 900 Pixeln steht das Menue offen daneben, und dort nahm es allen Platz: Der Schriftzug wurde auf 123 von 218 Pixeln gequetscht und stand mit "white-space: nowrap" quer ueber dem ersten Menuepunkt. */ @media (min-width: 1024px) { .marke { min-width: max-content; } } /* --- Menue ------------------------------------------------------------- Auf schmalen Bildschirmen ein Klappmenue, ab 1024 px eine offene Navigationsleiste. Getragen von
/, damit es ohne JavaScript funktioniert und der Zustand von selbst an Screenreader gemeldet wird. DIE ZAHL IST ZWEIMAL NACHGEMESSEN WORDEN, und beide Male hat sie sich nach oben bewegt: 900 -> 1000 (08.09.2026): Zwischen 900 und 960 Pixeln verschwand der letzte Menuepunkt hinter dem verborgenen Scrollstreifen - "Preise" fuer Besucher, "Verwaltung" fuer Verwalter. 1000 -> 1024 (29.09.2026): Gemessen an zwoelf Breiten von 360 bis 1440 Pixeln war GENAU bei 1000 die offene Leiste 21 Pixel zu breit fuer ihren Platz. Die Seite verschob sich dabei nicht - der Scrollstreifen unten faengt das ab, so ist er gedacht -, aber die Leiste stand am Umschaltpunkt selbst angeschnitten da. 1024 ist ausserdem die Breite, an der die gaengigen Tablets im Querformat liegen; dort soll die Leiste stehen und nicht klappen. Fuenf Regeln tragen diesen Punkt: .marke, .thema, .menue-knopf mit .menue, und .kopf-konto in beiden Richtungen. Wer eine davon verschiebt, muss alle verschieben - sonst klappt das Menue bei einer Breite, in der die Marke schon ihre Endbreite hat. */ /* Reihenfolge in der Kopfzeile: Marke - (Navigation) - Erscheinungsbild - Menueknopf. Der Knopf steht ganz aussen, dort wird er am Handy mit dem Daumen erreicht. */ .menue { position: relative; order: 3; } .thema { order: 2; margin-left: auto; } @media (min-width: 1024px) { .thema { margin-left: 0; } } .menue-knopf { display: inline-flex; align-items: center; justify-content: center; /* Feste Groesse: das ist die Trefferflaeche fuer den Daumen, sie darf im Gedraenge nicht zusammengedrueckt werden. */ flex: none; width: 40px; height: 36px; border: 1px solid var(--linie); border-radius: var(--r-klein); background: var(--flaeche-2); color: var(--tinte-2); cursor: pointer; list-style: none; } /* Das Dreieck, das Safari und Firefox von sich aus vor ein summary setzen. */ .menue-knopf::-webkit-details-marker { display: none; } .menue-knopf::marker { content: ""; } .menue-knopf:hover { color: var(--tinte); border-color: var(--tinte-3); } .menue-knopf svg { width: 20px; height: 20px; display: block; } /* Aus den drei Balken wird beim Aufklappen ein Kreuz. */ .menue-knopf .kreuz { display: none; } .menue[open] .menue-knopf .balken { display: none; } .menue[open] .menue-knopf .kreuz { display: block; } .menue[open] .menue-knopf { background: var(--kenn-bg); color: var(--kenn); border-color: var(--kenn); } .menue-inhalt { position: absolute; top: calc(100% + .55rem); right: 0; min-width: min(17rem, calc(100vw - 2rem)); background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-gross); box-shadow: var(--schatten); padding: .5rem; z-index: 40; } .haupt-navigation { display: flex; flex-direction: column; } .haupt-navigation a { font-size: .95rem; color: var(--tinte-2); text-decoration: none; padding: .6rem .7rem; border-radius: var(--r-klein); border-bottom: none; } .haupt-navigation a:hover { color: var(--tinte); background: var(--flaeche-2); } .haupt-navigation a[aria-current="page"] { color: var(--kenn); font-weight: 500; background: var(--kenn-bg); } .menue-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .4rem; padding: .7rem .7rem .3rem; border-top: 1px solid var(--linie-zart); } .menue-fuss .knopf { flex: 1; } /* Das Abmelden-Formular soll sich in der Zeile verhalten wie zuvor der blanke Knopf - display:contents laesst den Knopf direkt am Flex-Layout der Fusszeile teilnehmen. */ .menue-fuss form { display: contents; } /* Ab hier ist Platz genug: das Menue steht offen in der Kopfzeile. */ @media (min-width: 1024px) { .menue-knopf { display: none; } .menue { display: contents; } /* Zwei Browservorgaben muessen ueberschrieben werden, damit der Inhalt eines GESCHLOSSENEN
hier sichtbar ist: - aeltere Browser blenden ihn mit display:none aus, - Chromium ab 131 mit content-visibility:hidden am Pseudoelement ::details-content. Ohne die zweite Regel steht die Navigation zwar im Baum, ist aber zusammengefallen (Breite 0) - sie war damit auf breiten Bildschirmen unsichtbar. Browser ohne ::details-content ignorieren die Regel folgenlos. */ .menue::details-content { content-visibility: visible; block-size: auto; /* UND SCHRUMPFBAR. Seit Chromium 131 steckt der Inhalt eines
in diesem Pseudoelement - und DAS ist hier das Flex-Element, nicht .menue-inhalt. Mit der Vorgabe min-width: auto konnte es nicht schmaler werden als seine Menuepunkte; das "lieber scrollt die Leiste als die Seite" weiter unten lief damit ins Leere, und nachgegeben hat stattdessen der Schriftzug. */ min-width: 0; } .menue > .menue-inhalt { display: flex; align-items: center; gap: clamp(.9rem, 1.8vw, 1.4rem); position: static; min-width: 0; margin-left: auto; padding: 0; background: none; border: none; box-shadow: none; } .haupt-navigation { flex-direction: row; align-items: center; /* Eine Spur enger als frueher (1,3rem). Ist ein Verwalter angemeldet, traegt die Leiste sieben Punkte, daneben Konto, Abmelden und den Umschalter - mit dem alten Abstand blieb der letzte Punkt um vierzehn Pixel angeschnitten. */ gap: clamp(.8rem, 1.5vw, 1.05rem); /* min-width:0 hebt die Vorgabe min-width:auto fuer Flex-Elemente auf. Ohne sie kann die Leiste nicht schmaler werden als ihre Eintraege - sie schob dann die ganze Seite nach rechts, statt das vorgesehene overflow-x zu nutzen. Der Streifen ist die Rueckfallebene: lieber scrollt die Leiste als die Seite. */ min-width: 0; overflow-x: auto; scrollbar-width: none; } .haupt-navigation::-webkit-scrollbar { display: none; } .haupt-navigation a { padding: .25rem 0; border-radius: 0; border-bottom: 2px solid transparent; font-size: .88rem; white-space: nowrap; } .haupt-navigation a:hover { background: none; } .haupt-navigation a[aria-current="page"] { color: var(--tinte); background: none; border-bottom-color: var(--kenn); } .menue-fuss { margin-top: 0; padding: 0; border-top: none; flex-wrap: nowrap; } .menue-fuss .knopf { flex: none; } } /* ========================================================================== DIE UNTERLISTE "LEISTUNGEN" (04.10.2026) ========================================================================== Aus dem Betrieb, schon am 29.09.2026: "Sollte man die Menuestruktur optimieren, vielleicht mit Dropdown und in der mobilen Ansicht mit Hamburgermenue und statt Dropdown Akkordeon nutzen?" - und heute: "redesign und struktur seo neues level genauso menue". EIN ELEMENT, ZWEI DARSTELLUNGEN. Auf dem Telefon ist die Unterliste ein Akkordeon im Hamburger: Sie klappt nach unten auf und schiebt den Rest weiter. Am Schreibtisch ist dasselbe
ein Klappmenue, das ueber der Seite schwebt. Keine zweite Fassung im Quelltext, die mit der ersten auseinanderlaufen koennte. DIE FALLE, DIE HIER SCHON VOR DEM BAUEN STAND: .haupt-navigation traegt am Schreibtisch overflow-x: auto - die Rueckfallebene fuer eine ueberfuellte Leiste. overflow beschneidet aber BEIDE Richtungen, sobald es nicht visible ist. Ein Klappmenue darin waere unter der Leiste abgeschnitten worden und damit unsichtbar. Die Leiste mit Unterliste hat drei Punkte statt sechs und braucht den Streifen nicht mehr; die Leiste der Angemeldeten behaelt ihn. */ .unterliste > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: .35rem; padding: .6rem .7rem; font-size: .95rem; color: var(--tinte-2); cursor: pointer; border-radius: var(--r-klein); user-select: none; } .unterliste > summary::-webkit-details-marker { display: none; } .unterliste > summary:hover { color: var(--tinte); background: var(--flaeche-2); } .unterliste > summary:focus-visible { outline: 2px solid var(--kenn); outline-offset: 2px; } /* Man steht auf einer der Leistungen - die Zeile sagt es, auch zu. */ .unterliste > summary[aria-current] { color: var(--kenn); font-weight: 500; } .unterliste-pfeil { width: 1rem; height: 1rem; flex: none; transition: transform .15s ease; } .unterliste[open] > summary .unterliste-pfeil { transform: rotate(180deg); } .unterliste-inhalt { display: flex; flex-direction: column; padding: 0 0 .3rem .7rem; } /* Die Zeile darunter sagt in drei Woertern, was hinter dem Namen steckt. "Zertifikate" allein sagt einem, der eine Warnung im Browser loswerden will, nichts - "HTTPS ohne Warnung" sagt es. */ .unterliste-inhalt a span { display: block; font-size: .8rem; color: var(--tinte-3); font-weight: 400; margin-top: .1rem; } @media (prefers-reduced-motion: reduce) { .unterliste-pfeil { transition: none; } } @media (min-width: 1024px) { /* Siehe oben: ohne das schneidet die Leiste ihr eigenes Klappmenue ab. Nur die Leiste MIT Unterliste - die der Angemeldeten behaelt ihren Scrollstreifen. */ .haupt-navigation:has(.unterliste) { overflow: visible; } .unterliste { position: relative; } .unterliste > summary { padding: .25rem 0; font-size: .88rem; border-radius: 0; border-bottom: 2px solid transparent; white-space: nowrap; justify-content: flex-start; } .unterliste > summary:hover { background: none; } .unterliste > summary[aria-current] { color: var(--tinte); border-bottom-color: var(--kenn); } .unterliste-inhalt { position: absolute; top: calc(100% + .75rem); left: -1rem; z-index: 50; min-width: 17rem; padding: .4rem; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-gross); box-shadow: var(--schatten); } /* SPEZIFISCHER ALS .haupt-navigation a, und zwar mit Absicht ueber den Selektor und nicht ueber !important: Die Leistenregel setzt Unterstrich, schmale Polsterung und nowrap - alles richtig fuer die Leiste, alles falsch fuer eine Liste in einem Kasten. */ .haupt-navigation .unterliste-inhalt a { padding: .55rem .7rem; border-bottom: none; border-radius: var(--r-klein); white-space: normal; font-size: .9rem; color: var(--tinte); font-weight: 500; } .haupt-navigation .unterliste-inhalt a:hover { background: var(--flaeche-2); } .haupt-navigation .unterliste-inhalt a[aria-current="page"] { background: var(--kenn-bg); border-bottom: none; color: var(--kenn); } } .kopf-konto { font-family: var(--schrift-daten); font-size: .72rem; color: var(--tinte-3); max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Im Klappmenue steht die Adresse immer - dort ist sie die einzige Stelle, an der man sieht, mit welchem Konto man angemeldet ist. In der offenen Kopfzeile ist sie das erste, was weichen darf: zwischen 900 und 1200 px braucht die Navigation den Platz dringender. Wer wissen will, welches Konto angemeldet ist, findet es auf /konto. */ @media (min-width: 1024px) { .kopf-konto { display: none; } } @media (min-width: 1200px) { .kopf-konto { display: block; max-width: 18ch; } } @media (max-width: 1023px) { .kopf-konto { flex: 1 0 100%; margin-bottom: .3rem; max-width: none; } } /* Im Arbeitsbereich (Kundenbereich, Verwaltung) steht die Adresse immer neben dem Avatar - dort gibt es keine Navigationsleiste, die den Platz braeuchte. Unter 720px weicht sie (siehe .arbeit-konto). */ .arbeit-konto .kopf-konto { display: block; flex: none; margin: 0; max-width: 22ch; } /* Umschalter fuer das Erscheinungsbild */ .thema { display: inline-flex; flex: none; background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: var(--r-klein); padding: 2px; gap: 2px; } .thema button { display: inline-flex; align-items: center; justify-content: center; width: clamp(26px, 7vw, 30px); height: 26px; border: none; background: transparent; color: var(--tinte-3); border-radius: 3px; cursor: pointer; padding: 0; } .thema button:hover { color: var(--tinte); } .thema button[aria-pressed="true"] { background: var(--flaeche); color: var(--kenn); box-shadow: var(--schatten-s); } .thema svg { width: 15px; height: 15px; display: block; } /* ========================================================================== Fusszeile ========================================================================== */ .fuss { flex: none; border-top: 1px solid var(--linie); background: var(--flaeche); padding: 2rem 0 2.4rem; font-size: .85rem; color: var(--tinte-3); } .fuss-innen { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; justify-content: space-between; } .fuss-links { display: flex; flex-wrap: wrap; gap: .4rem 1.3rem; } /* Im Kopf darf der Schriftzug schrumpfen - dort teilt er sich die Zeile mit Umschalter und Menueknopf (min-width: 0 bei .marke). Im Fuss steht daneben nur die Linkliste, und die nahm sich so viel Platz, dass "IDO DNS Service" auf 123 Pixel gequetscht wurde und rechts herauslief. */ .fuss .marke { min-width: max-content; font-size: var(--t-m); } .fuss a { color: var(--tinte-2); text-decoration: none; } .fuss a:hover { color: var(--kenn); text-decoration: underline; } /* DIE KUENDIGUNGSSCHALTFLAECHE (12.09.2026). § 312k Abs. 2 BGB verlangt sie "unmittelbar und leicht erreichbar". Als zwoelfter Link zwischen elf gleich aussehenden Links waere sie das nicht - sie bekommt deshalb einen Rahmen und traegt ihn auch im Fuss als das, was sie ist: eine Schaltflaeche. Die Farbe bleibt die des Fusses; auffaellig muss sie nicht sein, auffindbar schon. */ .fuss-kuendigen { border: 1px solid var(--linie-stark, var(--linie)); border-radius: var(--r-klein); padding: .18rem .6rem; margin: -.18rem 0; } .fuss-kuendigen:hover { border-color: var(--kenn); text-decoration: none; } /* ========================================================================== Typografie ========================================================================== */ /* DER SENKRECHTE ABSTAND, UND ZWAR IN EINEM MASS (11.09.2026). Aus dem Betrieb: "Luft zwischen Ueberschriften, Boxen, Texte in einem gesunden Mass." ZWEI REGELN, an denen sich das nachrechnen laesst: 1. UEBER EINER UEBERSCHRIFT STEHT RUND DREIMAL SO VIEL LUFT WIE DARUNTER. Eine Ueberschrift gehoert zu dem, was FOLGT, nicht zu dem, was ueber ihr steht. Sitzt sie in der Mitte, muss das Auge raten, welchen Absatz sie benennt - und bei einer Seite aus Abschnitten raet es dauernd. 2. DAS MASS HAENGT AN DER SCHRIFTGROESSE, nicht an einer festen Zahl. Deshalb "em" und nicht "rem": Eine h2 ist im Auftritt 24 Pixel gross und in der Arbeitsflaeche 17 - dieselbe feste Zahl waere einmal zu wenig und einmal zu viel. Mit em stimmt das Verhaeltnis von selbst, an jeder Stelle und auf jedem Schirm. Vorher stand hier eine feste Zahl fuer alle vier Stufen: .6rem Abstand nach unten, gleich ob darueber eine 34 Pixel hohe h1 oder eine 17 Pixel hohe h3 stand. Unter der h1 klebte der Text, unter der h3 stand er zu weit weg. */ h1, h2, h3, h4 { font-family: var(--schrift-titel); letter-spacing: -.018em; line-height: 1.16; text-wrap: balance; margin: 0 0 .5em; color: var(--tinte); } h1 { font-size: clamp(1.6rem, 3.6vw, 2.1rem); font-weight: 700; } h2 { font-size: clamp(1.25rem, 2.6vw, 1.5rem); font-weight: 600; margin-top: 1.7em; } h3 { font-size: 1.08rem; font-weight: 600; margin-top: 1.5em; } h4 { font-family: var(--schrift-daten); font-size: .72rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--tinte-3); margin: 0 0 .8rem; } /* EIN ABSATZABSTAND VON RUND VIER FUENFTELN EINER ZEILE. Vorher 1rem bei einer Zeilenhoehe von 1.6 - also 16 von 25.6 Pixeln, nicht einmal zwei Drittel. Zwei Absaetze lesen sich dann als einer mit einem Knick darin; der Blick findet beim Zurueckspringen den Anfang nicht wieder. Eine ganze Leerzeile waere das andere Extrem: Dann zerfaellt ein Gedankengang in Zettel. Vier Fuenftel sind der Punkt, an dem man die Zaesur sieht, ohne dass der Zusammenhang reisst. */ p { margin: 0 0 1.25rem; } .vorspann { font-size: 1.05rem; color: var(--tinte-2); } .klein { font-size: var(--t-s); color: var(--tinte-3); } /* Schluessel, Adressen und Hostnamen kennen keine Leerzeichen. Ohne eine Erlaubnis zum Umbruch laeuft "vermittlung.idodns.de:51820" auf einem 375-Pixel-Bildschirm einfach aus dem Bild - lieber ein Umbruch mitten in der Adresse als eine Seite, die seitlich wegrutscht. */ .mono { font-family: var(--schrift-daten); overflow-wrap: anywhere; } .zahl { font-family: var(--schrift-daten); font-variant-numeric: tabular-nums; } /* Der Steuerzusatz unter einem Betrag ("22,61 € brutto") gehoert zusammen. In der schmalen Monatsspalte der Preistabelle brach er sonst zwischen Zahl und Wort um und stand dreizeilig da. NUR EIN SPAN, UND NUR UNMITTELBAR IN DER ZELLE (Befund 07.09.2026: "ich moechte keine Scrollbalken links nach rechts"). Als Nachfahrenregel galt sie fuer alles Kleingedruckte irgendwo unter einer Datenzelle - auch fuer den Aufklapper "Erreichbare Netze" der Gegenstellentabelle, der ebenfalls .klein traegt. Fliesstext ohne Umbruch macht eine Zelle so breit wie ihr laengster Satz: Die Tabelle stand mit 2790 statt 982 Pixeln da, und darunter lag eine Bildlaufleiste ueber die ganze Seite. "> .klein" allein reicht dafuer nicht: Der Aufklapper ist ein direktes Kind der Zelle. Der Zusatz, um den es ging, ist immer ein - ein Element, in dem kein Absatz stehen kann. */ .zahl > span.klein { white-space: nowrap; } .gedaempft { color: var(--tinte-3); } .betont { font-weight: 600; } .seitenkopf { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.4rem; } .seitenkopf h1, .seitenkopf h2 { margin-bottom: .15rem; } /* Der Untertitel unter dem Seitentitel ist ein Satz. Ohne Mass lief er ueber die ganze Fensterbreite - je nach Seite 609 bis 1137 Pixel. Zentral hier, damit es niemand je Vorlage nachtragen muss. Das Mass ist --doku-breite und nicht --lesebreite: Unter dieser Ueberschrift steht oft eine Angabenzeile ("Fremdkunde . fremdkunde . Netz 10.80.14.0/24 . 3 Gegenstellen"), und die bei 52 Zeichen umzubrechen trennt "3" von "Gegenstellen". */ .seitenkopf p { margin: 0; max-width: var(--doku-breite); } .zurueck { display: inline-block; font-family: var(--schrift-daten); font-size: .78rem; color: var(--tinte-3); text-decoration: none; margin-bottom: .8rem; } .zurueck:hover { color: var(--kenn); } /* Die Brotkrume der Anleitungen. Sie steht dort, wo vorher der Rueckwaertspfeil stand, und sagt zusaetzlich, WO man ist - dieselbe Auskunft, die auch in den Strukturdaten steht. Umbricht auf dem Handy, statt die Seite breiter zu machen. */ .brotkrume { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-family: var(--schrift-daten); font-size: .78rem; color: var(--tinte-3); margin-bottom: .8rem; } .brotkrume a { color: inherit; text-decoration: none; } .brotkrume a:hover { color: var(--kenn); } .brotkrume [aria-current="page"] { color: var(--tinte-2); } /* ========================================================================== Flaechen ========================================================================== */ .karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-gross); /* MEHR LUFT (Wunsch vom 09.09.2026: "gerne noch etwas Platz lassen"). Die Karte hatte 1.4/1.5rem und 1.2rem Abstand nach unten; das war dicht gesetzt und wirkte gedraengt, seit die Karten nebeneinander stehen statt untereinander. RUNDUM GLEICH VIEL (11.09.2026). Bis dahin standen 1.5rem oben und unten gegen 1.75rem links und rechts - der Unterschied ist klein genug, um nicht als Absicht zu gelten, und gross genug, um die Karte oben und unten gedrungen wirken zu lassen. Gleich viel auf allen vier Seiten ist die ruhigere Loesung und eine Entscheidung weniger. Die Arbeitsflaeche bleibt dichter - siehe "Dichte der Arbeitsflaeche" weiter unten. Dort wird gearbeitet, nicht gelesen. */ padding: 1.75rem; margin-bottom: var(--a-6); } .karte--eng { padding: 1rem 1.15rem; } .karte > :last-child { margin-bottom: 0; } /* KARTENVARIANTEN. Hervorgehoben (die empfohlene, die laufende) und Gefahr (Loeschen, Kuendigen) - statt border-color inline. Sie MUESSEN hinter .karte stehen, siehe der Block ganz oben in dieser Datei. */ .karte--betont { border-color: var(--kenn); } .karte--gefahr { border-color: var(--inaktiv); } .karte--still { background: var(--flaeche-2); border-color: var(--linie-zart); } .raster { display: grid; gap: 1rem; } @media (min-width: 720px) { .raster--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 900px) { .raster--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); } .raster--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Ueberschrift ueber einer Kartengruppe. Sie traegt die Trennung zwischen zwei Gruppen allein - deshalb der grosse Abstand nach oben und der kleine nach unten: Die Ueberschrift gehoert sichtbar zu dem, was UNTER ihr steht. */ .gruppentitel { font-size: 1.05rem; letter-spacing: .02em; margin: 2.2rem 0 .9rem; } .gruppentitel:first-of-type { margin-top: 0; } /* Die Gruppen des Wissensspeichers. Der Abstand haengt an der GRUPPE und nicht an der Ueberschrift: Seit jede Gruppe in einem eigenen
steht, ist ihre Ueberschrift dort "first-of-type" - und die Regel darueber nahm allen den Abstand nach oben. Die dritte Gruppe klebte an der zweiten. */ [data-wissen-gruppe] + [data-wissen-gruppe] { margin-top: 2.6rem; } [data-wissen-gruppe] .gruppentitel { margin-top: 0; } /* Das Filterfeld traegt die ganze Karte - ein halbbreites Suchfeld sieht aus, als gehoerte etwas daneben. */ .wissen-filter { width: 100%; } /* DIE SUCHE ALS ERSTES UND GROSS (07.09.2026). Vorher eine schmale Zeile zwischen Ueberschrift und Reiterleiste - die las sich wie ein Filter fuer die Liste darunter. Wer eine Hilfeseite oeffnet, hat aber ein Wort im Kopf und keine Lust, sich durch eine fremde Ordnung zu klicken. Also bekommt das Feld das Gewicht, das der Sache entspricht. */ .wissen-suchkopf { /* UEBER ALLE SPALTEN (09.09.2026). Der Suchkopf steht jetzt im Rahmen, ausserhalb des Rasters aus Baum und Inhalt - er nimmt die ganze Breite, die die Seite hat. Feld und Knopf in einer Zeile; auf dem Telefon bricht der Knopf unter das Feld, statt es auf Briefmarkengroesse zu druecken. */ display: flex; flex-wrap: wrap; gap: var(--a-3); align-items: center; margin: 0 0 var(--a-6); } .wissen-suchkopf > .wissen-filter { flex: 1 1 18rem; min-width: 0; } .wissen-suchkopf > .nachsatz { flex: 1 0 100%; margin: 0; } .wissen-suchknopf { flex: 0 0 auto; } .wissen-filter--gross { font-size: 1.02rem; padding: .7rem .9rem; } /* DIE BEREICHE ALS KACHELN. Dieselbe Umschaltmechanik wie die Reiterleiste, aber mit dem Satz dabei, worum es in einem Bereich geht. Drei Woerter in einer Reiterleiste verlangen, dass man raet. */ .wissen-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: .8rem; margin: 0 0 1.8rem; } .wissen-kacheln a { display: block; padding: .85rem 1rem; border: 1px solid var(--linie); border-radius: var(--rundung, 10px); background: var(--flaeche); color: var(--tinte-2); text-decoration: none; transition: border-color .15s ease, transform .15s ease; } .wissen-kacheln a:hover, .wissen-kacheln a:focus-visible { border-color: var(--kenn); transform: translateY(-1px); } .wissen-kacheln a[aria-current="true"] { border-color: var(--kenn); box-shadow: inset 0 0 0 1px var(--kenn); } .wissen-kacheln a[aria-current="true"] strong { color: var(--kenn); } /* Der empfohlene Einstieg: drei Verweise in einer Zeile. Bewusst keine Kaesten - die Bereichskacheln stehen direkt darunter, und zwei Dreierreihen uebereinander sind eine Wand. */ .wissen-einstieg { margin: 0 0 .4rem; line-height: 1.9; } .wissen-einstieg a { font-weight: 600; } .wissen-trenner { color: var(--tinte-3); margin: 0 .45rem 0 .3rem; } /* DIE THEMENKACHELN DER HAEUFIGEN FRAGEN. Wie die Bereichskacheln der Anleitungen, aber mit einem Symbol: Sechs Kacheln untereinander sehen sonst aus wie sechs Absaetze. Das Symbol traegt keine Aussage - es gibt dem Auge einen Ankerpunkt, damit man die gesuchte Kachel wiederfindet, ohne jedes Mal zu lesen. */ .fragen-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: .8rem; margin: 0 0 2.2rem; } .fragen-kacheln a { display: block; padding: .95rem 1.05rem; border: 1px solid var(--linie); border-radius: var(--rundung, 10px); background: var(--flaeche); color: var(--tinte-2); text-decoration: none; transition: border-color .15s ease, transform .15s ease; } .fragen-kacheln a:hover, .fragen-kacheln a:focus-visible { border-color: var(--kenn); transform: translateY(-1px); } .fragen-kachel-kopf { display: flex; align-items: center; gap: .55rem; margin-bottom: .3rem; } .fragen-kachel-kopf svg { width: 1.35rem; height: 1.35rem; flex: none; color: var(--kenn); } .fragen-kachel-kopf strong { color: var(--tinte-1); } /* Die Zahl rutscht ans Ende der Zeile, nicht neben den Namen. */ .fragen-kachel-kopf .wissen-zahl { margin-left: auto; } /* EINE FRAGE UND IHRE ANTWORT. Die Frage traegt ein Sprungziel, damit der Support auf GENAU eine Antwort verweisen kann statt auf die Seite. scroll-margin-top, weil sonst die Ueberschrift unter der Kopfzeile klebt, wenn jemand einem solchen Verweis folgt. */ .fragen { display: grid; gap: 0 1.6rem; align-items: start; } .frage { scroll-margin-top: 5rem; max-width: 60ch; border-bottom: 1px solid var(--linie-zart); } .frage > summary { list-style: none; display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; padding: .85rem 0; cursor: pointer; } .frage > summary::-webkit-details-marker { display: none; } .frage > summary::after { content: ""; flex: none; width: .55rem; height: .55rem; margin-top: .35rem; border-right: 2px solid var(--tinte-3); border-bottom: 2px solid var(--tinte-3); transform: rotate(45deg); transition: transform .15s ease; } .frage[open] > summary::after { transform: rotate(-135deg); margin-top: .55rem; } .frage > summary:hover h3 { color: var(--kenn); } .frage > summary:focus-visible { outline: 2px solid var(--kenn); outline-offset: 2px; } .frage h3 { margin: 0; font-size: 1rem; line-height: 1.4; } .frage p { margin: 0 0 1rem; color: var(--tinte-2); } @media (prefers-reduced-motion: reduce) { .frage > summary::after { transition: none; } } .wissen-kachel-kopf { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .25rem; } /* DER UMSCHALTER ZWISCHEN DEN BEREICHEN. WOFUER (06.09.2026): "Stelle dir vor, ich habe nach einem Jahr 100 Geraete getestet und der Kunde muss scrollen." Ein Bereich auf einmal, mit der Zahl daneben - so bleibt die Seite gleich lang, egal ob es dreizehn Beitraege sind oder dreihundert. Ohne JavaScript sind es Sprungmarken auf die Abschnitte darunter, und alle bleiben sichtbar. Die Reiter sind deshalb und keine