/* ========================================================================== TEDesign – Grundlagen: Reset, Typografie, Formularelemente Setzt tokens.css voraus. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-text); font-size: var(--fs-base); line-height: var(--lh-normal); font-weight: var(--fw-regular); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* --- Überschriften --------------------------------------------------------- Saira ist kantiger und etwas schmaler als der Fließtext – passt zur 45-Grad-Geometrie der Marke und trennt Struktur sichtbar von Inhalt. */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); margin: 0 0 var(--sp-4); text-wrap: balance; /* Deutsche Komposita sprengen auf schmalen Displays jede Überschrift: „Datenschutzerklärung" misst bei 36 px rund 362 px und passt damit in keinen 375-px-Viewport. hyphens greift auf das Silbentrennmuster des Browsers zurück und setzt dafür lang="de" am -Element voraus – das ist gegeben. overflow-wrap bleibt als Notnagel für Wörter, für die auch die Trennung nicht reicht. */ hyphens: auto; overflow-wrap: break-word; } h1 { font-size: var(--fs-3xl); } h2 { font-size: var(--fs-2xl); } h3 { font-size: var(--fs-lg); line-height: var(--lh-snug); } h4 { font-size: var(--fs-md); line-height: var(--lh-snug); font-weight: var(--fw-semibold); } p, ul, ol, dl, figure, table { margin: 0 0 var(--sp-4); } p { text-wrap: pretty; } /* Im Fließtext bewusst nur der Notnagel, keine automatische Silbentrennung: Die würde bei jeder Zeile greifen und das Schriftbild unruhig machen. Hier geht es allein darum, dass ein überlanges Wort die Seite nicht seitlich aufreißt. */ p, li, dd, td, th { overflow-wrap: break-word; } :where(p, li) { max-width: 68ch; } strong, b { font-weight: var(--fw-semibold); } small { font-size: var(--fs-sm); } /* --- Links ---------------------------------------------------------------- */ a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: color var(--dur-fast) var(--ease); } a:hover { color: var(--accent-hover); } /* --- Fokus ---------------------------------------------------------------- Sichtbar und mit Abstand zum Element, damit der Ring auch auf dunklen Flächen nicht mit der Kontur verschmilzt. */ :focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; border-radius: var(--radius-sm); } :focus:not(:focus-visible) { outline: none; } /* --- Listen --------------------------------------------------------------- */ ul, ol { padding-left: 1.25em; } li + li { margin-top: var(--sp-2); } .list-plain { list-style: none; padding: 0; } .list-plain li + li { margin-top: 0; } /* --- Medien --------------------------------------------------------------- */ img, svg, video { max-width: 100%; height: auto; display: block; } figure { margin-inline: 0; } figcaption { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--sp-2); } /* --- Tabellen ------------------------------------------------------------- Tabellen tragen auf dieser Seite technische Daten und müssen auf schmalen Displays waagerecht scrollen können, ohne die ganze Seite zu verschieben. */ .table-scroll { overflow-x: auto; margin-bottom: var(--sp-4); } table { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); } th, td { text-align: left; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); vertical-align: top; } th { font-family: var(--font-display); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); text-transform: uppercase; font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; } /* --- Formulare ------------------------------------------------------------ */ input, textarea, select, button { font: inherit; color: inherit; } hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-8) 0; } /* --- Hilfsklassen --------------------------------------------------------- */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skip-link { position: absolute; left: var(--sp-4); top: -100%; z-index: 100; background: var(--te-blue-600); color: #fff; padding: var(--sp-3) var(--sp-5); border-radius: var(--radius); font-weight: var(--fw-semibold); text-decoration: none; } .skip-link:focus { top: var(--sp-4); color: #fff; } .text-muted { color: var(--text-muted); } .nowrap { white-space: nowrap; }