/* Schriften, selbst gehostet als variable woff2 (SIL Open Font License, siehe assets/fonts/*-OFL.txt) */ @font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/assets/fonts/source-sans-3-variable.woff2") format("woff2"); } @font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600 700; font-display: swap; src: url("/assets/fonts/source-serif-4-variable.woff2") format("woff2"); } /* Reset */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } img, picture, svg { display: block; max-width: 100%; height: auto; } /* Grundtypografie */ body { font-family: var(--font-sans); font-size: var(--font-size-body); line-height: var(--line-height-body); color: var(--ink-900); background-color: var(--white); overflow-wrap: anywhere; } /* Überschriften trennen nach Silben statt mitten im Wort. Ohne diese Regel greift das globale "overflow-wrap: anywhere" und zerlegt Komposita wie "Schimmelpilzgutachter" an beliebiger Stelle, was auf 320 px sehr unschön aussieht. Die Trennung funktioniert, weil gesetzt ist. */ h1, h2, h3, h4 { hyphens: auto; /* Bewusst "anywhere" und nicht "break-word": nur "anywhere" verkleinert auch die min-content-Breite. Mit "break-word" ziehen einzelne lange Wörter sonst Grid-Spuren über den Container hinaus. Die Silbentrennung oben und die weichen Trennzeichen in den H1 greifen vorher, "anywhere" ist die Notbremse. */ overflow-wrap: anywhere; } h1 { font: 700 var(--font-size-h1) / var(--line-height-h1) var(--font-serif); letter-spacing: -0.015em; text-wrap: balance; } h2 { font: 600 var(--font-size-h2) / var(--line-height-h2) var(--font-serif); letter-spacing: -0.01em; text-wrap: balance; } h3 { font: 600 var(--font-size-h3) / var(--line-height-h3) var(--font-serif); text-wrap: balance; } h4 { font: 600 var(--font-size-h4) / var(--line-height-h4) var(--font-sans); } small, .klein { font-size: var(--font-size-klein); line-height: var(--line-height-klein); } /* Vertikale Rhythmik. Der Reset oben entfernt alle Abstände, hier werden sie bewusst und einheitlich zurückgegeben. Regel: der Abstand ÜBER einer Überschrift ist größer als der darunter, damit die Überschrift optisch zum folgenden Text gehört und nicht zum vorherigen Absatz. */ main p, main ul, main ol, main figure, main .preistabelle, main .faq-akkordeon { margin-bottom: var(--flow-absatz); } main p:last-child, main ul:last-child, main ol:last-child { margin-bottom: 0; } main h2 { margin-top: var(--flow-vor-h2); margin-bottom: var(--flow-nach-h2); } main h3 { margin-top: var(--flow-vor-h3); margin-bottom: var(--flow-nach-h3); } main h4 { margin-top: var(--space-m); margin-bottom: var(--space-2xs); } /* Die erste Überschrift einer Sektion braucht keinen zusätzlichen Vorlauf, den Abstand liefert bereits der Sektionsrhythmus. */ main section > h2:first-child, main section > h3:first-child, main > h1 + section > h2:first-child, main .card > h3:first-child, main .hinweisbox > h2:first-child { margin-top: 0; } main h1 { margin-bottom: var(--space-m); } /* Der Seitentitel auf Unterseiten steht direkt in main und braucht mehr Abstand zur ersten Sektionsüberschrift, sonst lesen sich beide als ein Block. Auf der Startseite steht die H1 im Hero und behält den kleinen Abstand zum Einleitungstext. */ main > h1 { margin-bottom: var(--space-xl); } main ul, main ol { padding-inline-start: 1.35em; } /* Fließtext-Listen bekommen Luft zwischen den Punkten. */ main li + li { margin-top: var(--space-3xs); } /* Listen, die ihr Layout selbst regeln, sind davon ausgenommen: dort käme der Zuschlag zum gap hinzu. In einer waagerechten Leiste versetzt er die Punkte sogar gegeneinander, statt Abstand zu schaffen. Wer hier eine Liste auf Raster oder Flex umstellt, trägt sie in diese Aufzählung ein. */ main :is(.breadcrumb ol, .ablauf, .gegenüber-block ul) > li + li { margin-top: 0; } main p, main li { max-width: var(--content-max-width); } /* Sprungziele nicht unter den fixierten Header schieben */ [id] { scroll-margin-top: var(--space-2xl); } /* Grid- und Flex-Kinder haben standardmäßig min-width: auto. Ein einzelnes langes Wort kann die Spur dann über den Container hinaus aufziehen, was bei deutschen Komposita und 200 Prozent Textzoom regelmäßig passiert. Diese Regel gilt für alle selbst definierten Raster dieses Projekts. */ .startseite-hero > *, .startseite-leistungen > *, .hero-fakten > *, .hero-fakt > *, .footer-grid > *, .preistabelle > *, .faq-akkordeon > *, .formular-feld > *, .card > *, .hinweisbox > * { min-width: 0; } a { color: var(--sky-700); text-decoration-color: var(--sky-300); text-decoration-thickness: 0.08em; text-underline-offset: 0.15em; transition: color var(--duration-hover) var(--ease-hover), text-decoration-color var(--duration-hover) var(--ease-hover); } a:hover { color: var(--sky-800); text-decoration-color: currentColor; } /* Fokus, immer sichtbar */ :focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); border-radius: 0.2rem; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Sprungmarke */ .skip-link { position: absolute; top: var(--space-2xs); left: var(--space-2xs); z-index: 100; padding: var(--space-2xs) var(--space-s); background-color: var(--sky-700); color: var(--white); border-radius: var(--radius); font-size: var(--font-size-klein); transform: translateY(-150%); opacity: 0; transition: transform var(--duration-enter) var(--ease-out), opacity var(--duration-enter) var(--ease-out); } .skip-link:focus { transform: translateY(0); opacity: 1; } /* Kein-JS-Zustand: Menü-Button nur sichtbar, wenn JS die Klasse "js" gesetzt hat. Ohne JS bleibt die Navigation vollständig offen, siehe components.css. */ html:not(.js) .menu-toggle { display: none; } /* Bewegung */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }