/* ========================================================================== SysTec.AI — Basis, Komponenten, Sektionen ========================================================================== */ /* ---- Reset ------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--ff); font-size: var(--fs-text); line-height: var(--lh-body); color: var(--text); background: var(--c-25); -webkit-font-smoothing: antialiased; } img, svg { max-width: 100%; display: block; } /* hidden muss jede display-Regel schlagen. Ohne diese Zeile bleibt ein Element sichtbar, sobald seine Klasse ein display setzt — bei .card und .entwurf ist genau das schon passiert und hat als Filterfehler ausgesehen. */ [hidden] { display: none !important; } button, input, select, textarea { font: inherit; color: inherit; } /* Deutsche Komposita — „Auftragsverarbeitungsvertrag", „Projektverzeichnisstruktur" — sprengen sonst auf dem Telefon das Raster. hyphens:auto greift, weil gesetzt ist. */ h1, h2, h3, h4, p, li, dd, dt, blockquote, .fact__v { overflow-wrap: break-word; hyphens: auto; } h1, h2, h3, h4 { margin: 0; line-height: var(--lh-head); font-weight: var(--fw-bold); color: var(--c-900); } h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -.02em; } h2 { font-size: var(--fs-h2); letter-spacing: -.015em; } h3 { font-size: var(--fs-h3); font-weight: var(--fw-semi); } p { margin: 0; } /* Aufeinanderfolgende Absätze brauchen Luft. Ohne diese Regel kleben sie überall dort zusammen, wo die Abstände nicht von .stack kommen — also in jedem Textblock, der mehrere Absätze in einem div bündelt. */ p + p { margin-top: .625rem; } /* ol muss mit zurückgesetzt werden: .steplist bringt einen eigenen Zähler mit, sonst erscheint die native Nummerierung zusätzlich davor. */ ul, ol { margin: 0; padding: 0; list-style: none; } /* Auf dem Element statt auf der Klasse: eine Klassenregel hätte dieselbe Spezifität wie .stack-lg > * + * und würde deren Abstand aushebeln. */ figure { margin: 0; } /* Links in --c-700 (10,4:1). Das neue --c-500 waere mit 5,6:1 zulaessig, aber Links sollen sich vom Fliesstext deutlich abheben. */ a { color: var(--c-700); text-decoration-thickness: 1px; text-underline-offset: .18em; } /* WCAG 2.2, 2.5.8: ein Tippziel misst mindestens 24 x 24 px. Einzeilig kamen die Zusammenfassungen auf 21-22 px -- die Hoehe stammt vom Pluszeichen, nicht vom Text. Hier an der Basis statt dreimal an den drei Aufklapp- Bausteinen (FAQ, Schrittliste, Aufklappkachel): min-height hebt nur an, wer schon hoeher ist, bleibt es. Gilt damit auch fuer den naechsten. */ summary { min-height: 1.5rem; } a:hover { color: var(--c-500); } :focus-visible { outline: 3px solid var(--c-500); outline-offset: 2px; border-radius: 3px; } /* ---- Layout ------------------------------------------------------------ */ .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-y); position: relative; } /* Das Planraster bleibt dem Hero vorbehalten. In den Inhaltsabschnitten wirkte es als Muster statt als Textur und hat die Ruhe genommen. */ .section--50 { background: var(--c-50); } .section--white{ background: var(--surface); } .section--dark { background: var(--c-700); color: var(--text-on-dark); } .section--dark h2, .section--dark h3 { color: #fff; } .stack > * + * { margin-top: .75rem; } .stack-lg > * + * { margin-top: 1.375rem; } .measure { max-width: var(--maxw-text); } /* Rasterspalten dürfen nicht von ihrem Inhalt aufgeblasen werden. Voreinstellung einer 1fr-Spur ist minmax(min-content, 1fr) — ein langes deutsches Kompositum in einer Überschrift sprengt damit das Layout. overflow-wrap allein reicht nicht: es erlaubt den Umbruch, verkleinert aber die Mindestbreite nicht. */ .hero > *, .split > *, .grid > *, .steps > *, .stufenraster > *, .detail > *, .proof__grid > *, .band > *, .ctablock > *, .facts > *, .footer__grid > *, .card > * { min-width: 0; } .split { display: grid; gap: clamp(1.75rem, 3.2vw, 2.75rem); grid-template-columns: 1.25fr .75fr; align-items: start; } .split--even { grid-template-columns: 1fr 1fr; align-items: center; } @media (max-width: 900px) { .split, .split--even { grid-template-columns: 1fr; } } /* Spalte, die beim Scrollen stehen bleibt, waehrend die Nachbarspalte weiterlaeuft. 74px = 60px Kopfzeile plus Luft, derselbe Wert wie bei .detail__side -- zwei verschiedene Abstaende zur Kopfzeile waeren an derselben Website nicht zu erklaeren. Setzt align-items:start voraus, das .split ohnehin hat: eine gedehnte Zelle fuellt die Zeile, und dann hat sticky nichts, woran es haften koennte. */ .haftspalte { position: sticky; top: 74px; align-self: start; /* Notbremse: gemessen ist die Spalte zugeklappt 525px hoch und passt ueberall. Sind alle drei Aufklapper offen, sind es 878px -- auf einem Laptop mit 700px Fensterhoehe waere der untere Teil dann nicht mehr erreichbar, weil er festgeklebt ausserhalb des Bildes steht. Der Innenlauf erscheint erst, wenn er gebraucht wird. */ max-height: calc(100vh - 74px - 1rem); overflow-y: auto; overscroll-behavior: contain; } @media (max-width: 900px) { /* Einspaltig gibt es keine Nachbarspalte, an der etwas vorbeilaeuft -- der Block wuerde nur ueber dem folgenden Inhalt kleben. Mit ihm faellt auch die Notbremse weg: ohne sie stand der Text einspaltig in einem 754px hohen Kasten mit eigenem Rollbalken. Gemessen, nicht vermutet. */ .haftspalte { position: static; max-height: none; overflow: visible; } } /* Spaltenzahl explizit statt auto-fit: auto-fit hat aus grid--2 je nach Breite drei Spalten gemacht — bei vier Karten blieb eine verwaist übrig. */ .grid { display: grid; gap: var(--gap-grid); } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } /* Explizit, nicht auto-fit -- dieselbe Falle wie bei grid--2 und grid--3: bei 1440px hat auto-fit fuenf Spuren gebildet, die fuenfte leer. Die vier Kacheln standen dadurch auf 259 statt 277px und die Reihe endete 72px vor dem rechten Rand. Bei 834px waren es drei Spalten, also 3 + 1 verwaist. */ .grid--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 980px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 980px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 700px) { .grid--2, .grid--3 { grid-template-columns: 1fr; } } @media (max-width: 560px) { .grid--4 { grid-template-columns: 1fr; } } /* ---- Typo-Bausteine ---------------------------------------------------- */ .eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--fs-klein); font-weight: var(--fw-semi); letter-spacing: .1em; text-transform: uppercase; color: var(--c-700); margin-bottom: .625rem; } .eyebrow::before { content: ""; width: 1.5rem; height: 2px; background: var(--c-500); border-radius: 2px; } .section--dark .eyebrow { color: var(--c-200); } /* Auf dunklem Grund ist --c-500 zu dunkel (2,5:1) — dort die helle Stufe. */ .section--dark .eyebrow::before { background: var(--c-300); } /* Abschnittsnummern. Die Seite liest sich für die Zielgruppe wie ein technisches Dokument, nicht wie eine Werbebroschüre. Die Nummer gibt dem Scrollen Rhythmus und macht auf einen Blick klar, wo man sich im Aufbau befindet. Gezählt wird per CSS, damit beim Umsortieren nichts von Hand nachgeführt werden muss. Bewusst auf .section-head eingegrenzt: ohne das trägt JEDE Vorzeile im Abschnitt die Nummer. Eine zweite Spalte mit eigener Vorzeile zeigte die Nummer dann doppelt und sah wie ein Fehler aus. */ main { counter-reset: abschnitt; } .section--nr { counter-increment: abschnitt; } .section--nr .section-head .eyebrow::before { content: counter(abschnitt, decimal-leading-zero); width: auto; height: auto; background: none; border-radius: 0; font-family: var(--ff-technisch); font-variant-numeric: tabular-nums; font-weight: var(--fw-bold); letter-spacing: 0; color: var(--c-700); padding-right: .5rem; border-right: 2px solid var(--c-200); } .section--dark.section--nr .section-head .eyebrow::before { color: var(--c-300); border-right-color: rgba(255,255,255,.28); } .lead { font-size: var(--fs-text); color: var(--text-2); } .section--dark .lead { color: var(--text-2-on-dark); } /* Volle Spaltenbreite. Vorher 64ch = 47 % der Spalte, was neben Kacheln, die sie ganz fuellen, nach halbem Layout aussah -- und die langen Aussage-Ueberschriften dreizeilig umbrechen liess. */ .section-head { margin-bottom: 1.75rem; } /* ---- Platzhalter ------------------------------------------------------- Alles, was der Kunde noch liefern muss, ist sichtbar markiert. */ .ph { background: var(--markierung-flaeche); border-bottom: 1px dashed var(--markierung); padding: 0 .25em; border-radius: 2px; } .ph::after { content: "▸ Platzhalter"; font-size: var(--fs-klein); font-weight: var(--fw-semi); letter-spacing: .06em; text-transform: uppercase; color: var(--markierung); vertical-align: super; margin-left: .3em; } /* markiert, aber ohne Beschriftung — für Zahlen und kurze Werte */ .ph--quiet::after { content: none; } /* Umkehrung auf jedem dunklen Grund. Ohne die Fusszeile hier erbt der Platzhalter deren helle Schrift auf der hellen Markierungsflaeche: 1,7:1. */ .section--dark .ph, .footer .ph, .pagehead .ph, .hero .ph { background: rgba(240,188,128,.15); color: var(--markierung-hell); border-bottom-color: var(--markierung-hell); } .section--dark .ph::after, .footer .ph::after, .pagehead .ph::after, .hero .ph::after { color: var(--markierung-hell); } /* ---- Bilder ------------------------------------------------------------- Fester Rahmen mit aspect-ratio, Bild per object-fit eingepasst. So bleibt das Raster ruhig, auch wenn ein Motiv ein anderes Seitenverhältnis hat als der Platz, für den es gedacht ist. */ /* Seitenverhältnis liegt auf dem Bild, nicht auf der figure — sonst würde eine Bildunterschrift vom overflow:hidden des Rahmens abgeschnitten. Die figure ist ein Raster: Bild und Markierung teilen sich Zelle 1, die Bildunterschrift steht in Zelle 2. Damit sitzt die Markierung immer auf dem Bild, auch wenn eine Unterschrift darunter steht. */ .shot { display: grid; grid-template-columns: 1fr; } .shot > img { grid-area: 1 / 1; } .shot > figcaption { grid-area: 2 / 1; } .shot img { display: block; width: 100%; height: auto; object-fit: cover; border-radius: var(--r-card); background: var(--c-50); } .shot--3x2 img { aspect-ratio: 3 / 2; } .shot--4x3 img { aspect-ratio: 4 / 3; } .shot--16x9 img { aspect-ratio: 16 / 9; } .shot--4x5 img { aspect-ratio: 4 / 5; } .shot--1x1 img { aspect-ratio: 1 / 1; } /* Teamkarten: Hochformat quadratisch beschnitten */ .shot figcaption { margin-top: .5rem; font-size: var(--fs-text); color: var(--text-2); line-height: 1.45; } /* Bild randlos oben in einer Karte. Feste Höhe statt Seitenverhältnis: Eine Kachel im Zweispalter ist rund 530px breit, im Dreispalter 350px — bei festem Verhältnis wäre das Bild im Zweispalter 300px hoch und würde die Kachel unnötig aufblähen. Mit fester Höhe sind alle Kartenbilder gleich hoch, unabhängig vom Raster. */ .card__shot { margin: calc(var(--pad-card) * -1) calc(var(--pad-card) * -1) .875rem; } .card__shot img { aspect-ratio: auto; height: 8.5rem; border-radius: var(--r-card) var(--r-card) 0 0; } @media (max-width: 700px) { .card__shot img { height: 9rem; } } /* Ausnahme: Teamporträts behalten ihr Seitenverhältnis. Die feste Höhe gilt nur den breiten Vorschaubildern in Listenkacheln. */ .card__shot--portrait img { aspect-ratio: 1 / 1; height: auto; } @media (max-width: 700px) { .card__shot--portrait img { height: auto; } } /* ---- Bildplatzhalter --------------------------------------------------- Benennt, WELCHES Bild an diese Stelle gehört — nicht nur eine graue Fläche. Damit ist gleichzeitig die Materialliste für den Kunden fertig. */ .imgph { position: relative; overflow: hidden; border-radius: var(--r-card); border: 1px dashed var(--markierung); /* Schraffur in den Markierungstoenen, nicht in der Gestaltungsfarbe: .imgph ist eine Arbeitsmarkierung wie .ph und verschwindet mit ihr. Vorher stand hier rgba(19,122,95,...) -- ein Gruen aus einer Palette, die es seit zwei Umstellungen nicht mehr gibt. */ background: repeating-linear-gradient(135deg, transparent 0 11px, var(--markierung-flaeche) 11px 22px), var(--c-25); display: grid; place-content: center; justify-items: center; padding: 1rem; text-align: center; } .imgph--1x1 { aspect-ratio: 1 / 1; } /* Platzhalter randlos oben in einer Kachel -- damit er genauso hoch wird wie ein echtes Portraet daneben. Innerhalb der Polsterung war er um zweimal --pad-card schmaler und bei 1:1 damit genauso viel niedriger. Unten eckig wie das Kartenbild, das er vertritt. */ .imgph.card__shot { border-radius: var(--r-card) var(--r-card) 0 0; } .imgph__icon { color: var(--markierung); margin-bottom: .5rem; } .imgph__label { font-weight: var(--fw-semi); color: var(--c-900); font-size: var(--fs-text); max-width: 34ch; } .imgph__hint { font-size: var(--fs-klein); font-weight: var(--fw-bold); letter-spacing: .07em; text-transform: uppercase; color: var(--markierung); margin-top: .375rem; } .imgph__note { font-size: var(--fs-text); color: var(--text-2); margin-top: .3rem; max-width: 42ch; line-height: 1.45; } /* Auf dunklen Sektionen */ .section--dark .imgph { border-color: rgba(240,188,128,.6); background: repeating-linear-gradient(135deg, transparent 0 11px, rgba(240,188,128,.12) 11px 22px), rgba(240,188,128,.07); } .section--dark .imgph__label { color: #fff; } .section--dark .imgph__note { color: var(--text-2-on-dark); } .section--dark .imgph__hint, .section--dark .imgph__icon { color: var(--markierung-hell); } /* ---- Logoplatz für MSR ------------------------------------------------- Immer auf weißer Platte. Partnerlogos liegen auf dunklem Grund sonst entweder falsch (farbig auf Petrol) oder brauchen eine eigene Negativfassung, die es noch nicht gibt. */ .logoslot { display: grid; place-items: center; padding: .625rem 1rem; background: var(--surface); border-radius: var(--r-btn); transition: box-shadow .15s ease; } .logoslot img { display: block; width: 100%; max-width: 10.5rem; height: auto; } .logoslot--inline { display: inline-grid; } a.logoslot:hover { box-shadow: 0 0 0 2px var(--c-500); } /* Auf hellem Grund braucht es keine Platte — dort steht das Logo frei. */ .logoslot--plain { background: none; padding: 0; place-items: start; } .logoslot--plain img { max-width: 9.5rem; } /* Ohne Polster klebte der Ring der Grundregel an der Grafikkante. Ein Umriss mit Abstand statt eines Schattens direkt am Rand. */ a.logoslot--plain:hover { box-shadow: none; outline: 2px solid var(--c-500); outline-offset: 5px; } /* Eigene Kachel für ein Partnerlogo, das für sich steht: Rand, Polster und ein Überfahren, das den Rand färbt statt einen Ring danebenzusetzen. inline-grid, damit der Kasten nur so breit wird wie sein Inhalt. */ .logoslot--kachel { display: inline-grid; place-items: center; padding: .9375rem 1.25rem; /* --c-200, nicht --line: der Abschnitt liegt auf --c-50, und dort traegt --line nur 1,08:1 -- die Kachel waere unsichtbar gewesen. --c-200 gibt 1,55:1, dazu hebt der Schatten sie von der getoenten Flaeche ab. Die 3:1-Regel fuer Bedienelemente greift hier nicht: erkannt wird der Link an der Wortmarke, und Logotypen sind davon ausgenommen. */ border: 1px solid var(--c-200); border-radius: var(--r-card); box-shadow: var(--sh-1); } .logoslot--kachel img { max-width: 9.5rem; } a.logoslot--kachel:hover { box-shadow: var(--sh-2); border-color: var(--c-500); /* 5,02:1 */ } /* Partnerzeile: Logoplatz plus Erläuterung nebeneinander */ .partner { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; } @media (max-width: 560px) { .partner { grid-template-columns: 1fr; } } .partner__text { font-size: var(--fs-text); } .section--dark .partner__text { color: var(--text-2-on-dark); } /* ---- Buttons ----------------------------------------------------------- Azur traegt dunklen Text, Petrol weissen — siehe tokens.css. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .625rem 1.125rem; font-size: var(--fs-klein); font-weight: var(--fw-semi); border-radius: var(--r-btn); border: 1px solid transparent; text-decoration: none; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, transform .15s ease; } .btn:active { transform: translateY(1px); } /* Es gibt keine Akzentfarbe. Die Hauptschaltfläche ist die tiefste Blaustufe mit weißer Schrift (10,4:1), die zweite nur eine Kontur. Rangfolge entsteht über Fläche und Tonwert, nicht über Farbe. */ .btn--primaer { background: var(--c-700); color: var(--auf-tief); box-shadow: var(--sh-1); } .btn--primaer:hover { background: var(--c-900); color: var(--auf-tief); } /* Systemfarbe — sekundäre Aktionen */ /* .btn--system ist entfallen: mit nur einer Farbe braucht es keine zweite gefuellte Schaltflaechenart. Alle gefuellten Schaltflaechen sind --primaer. */ /* Kontur in --c-500, nicht --c-200: gegen Weiss erreicht --c-200 nur 1,7:1 und auf einer getoenten Flaeche 1,4:1 — die Schaltflaeche war dort praktisch randlos. WCAG 1.4.11 verlangt 3:1 fuer die Umrandung eines Bedienelements. --c-500 liefert 5,6:1 auf Weiss und 4,5:1 auf --c-100. */ .btn--ghost { background: transparent; color: var(--c-700); border-color: var(--c-500); } .btn--ghost:hover { background: var(--c-50); color: var(--c-700); border-color: var(--c-700); } /* .35 ergab auf --c-900 genau 3,0:1 und lag damit exakt auf der Grenze. */ .btn--ghost-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); } .btn--ghost-dark:hover { background: rgba(255,255,255,.1); color: #fff; border-color: #fff; } /* Eine gefuellte Schaltflaeche in --c-700 verschwindet auf einer Flaeche in --c-700 oder --c-900: gleiche Farbe, kein Rand, sichtbar bleibt nur die weisse Schrift. Genau das ist im Abschlussblock von fuenf Seiten passiert, Flaechenkontrast 1,00. Auf dunklem Grund kehrt sie sich deshalb um: helle Flaeche, dunkle Schrift. --c-300 auf --c-700 sind 4,5:1, auf --c-900 6,0:1 — der Knopf ist klar als Flaeche erkennbar, und die Schrift darauf traegt 6,0:1. Es gibt keine eigene Klasse dafuer: welche Flaeche dunkel ist, weiss das Stylesheet selbst. Eine Klasse im Markup waere eine Angabe, die jemand beim Verschieben eines Blocks vergisst. ACHTUNG -- die Liste unten ist gepflegt, nicht abgeleitet: JEDE neue dunkle Flaeche muss hier eingetragen werden, sonst steht ein c-700-Knopf auf c-700 und ist unsichtbar. Das ist dreimal passiert (.ctablock, .card--hero und die inzwischen entfallene .demo--dunkel). Die Kontrastpruefung findet es, aber erst nach dem Einbau. */ .ctablock .btn--primaer, .hero .btn--primaer, .pagehead .btn--primaer, .section--dark .btn--primaer, .skarte--gross .btn--primaer, .card--hero .btn--primaer { background: var(--c-300); color: var(--auf-hell); } .ctablock .btn--primaer:hover, .hero .btn--primaer:hover, .pagehead .btn--primaer:hover, .section--dark .btn--primaer:hover, .skarte--gross .btn--primaer:hover, .card--hero .btn--primaer:hover { background: #fff; color: var(--c-900); } .btn-row { display: flex; flex-wrap: wrap; gap: .75rem; } /* ---- Badges & Tags ----------------------------------------------------- */ .badge { display: inline-block; padding: .2rem .55rem; font-size: var(--fs-klein); font-weight: var(--fw-semi); letter-spacing: .02em; background: var(--c-100); color: var(--c-900); border-radius: var(--r-pill); } /* Fachkürzel wie „LPH 3" sind technische Angaben, keine Marketingwörter. */ .badge--outline { background: transparent; border: 1px solid var(--c-200); color: var(--c-700); font-family: var(--ff-technisch); font-variant-numeric: tabular-nums; font-weight: var(--fw-semi); } .tag-row { display: flex; flex-wrap: wrap; gap: .35rem; } /* ---- Karten ------------------------------------------------------------ */ /* Spalte, damit die Fußzeile der Karte unten andocken kann. Das display gehört auf .card selbst — eine Regel wie a.card{display:block} hätte höhere Spezifität und würde ein Flex-Layout auf Untervarianten kippen. */ .card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--pad-card); box-shadow: var(--sh-1); transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; } a.card, .card--link { text-decoration: none; color: inherit; } a.card:hover, .card--link:hover { box-shadow: var(--sh-2); transform: translateY(-2px); border-color: var(--c-200); } /* Wie bei den Stufenkacheln: der Text behaelt beim Ueberfahren seine Farbe. */ a.card:hover, .card--link:hover { color: inherit; } /* Ein Badge als direktes Kind würde im Spaltenlayout auf volle Breite gedehnt — die Pille soll sich aber auf ihren Inhalt beschränken. */ .card > .badge { align-self: flex-start; } /* Kategorie in der oberen rechten Ecke der Kachel, über dem Bild. :has() statt position:relative auf .card allgemein — sonst bekämen alle Karten einen neuen Bezugsrahmen, auch die ohne absolut gesetztes Kind. Volle Fläche, kein durchsichtiger Rand: die Pille liegt auf einem Foto, dessen Helligkeit nicht vorhersehbar ist. Weiß mit --c-700 trägt 10,78:1, unabhängig davon, was darunter liegt. */ .card:has(> .card__marke) { position: relative; } .card__marke { position: absolute; top: .625rem; right: .625rem; z-index: 2; background: var(--surface); color: var(--c-700); box-shadow: 0 1px 3px rgba(5, 46, 69, .28); } /* Der Kacheltitel traegt seine Groesse SELBST. Vorher stand hier nur der Abstand, die Groesse kam vom Element -- deshalb rendern die News-Kacheln mit 21px (ihr Titel ist aus Gliederungsgruenden ein h2), waehrend optisch gleiche Kacheln mit h3 auf 16px standen. Eine Komponente darf ihre Groesse nicht von der Ueberschriftenebene beziehen. */ .card__title { font-size: var(--fs-h3); margin-bottom: .375rem; } /* Kachel, die nur ein Schlagwort traegt. Ohne Text darunter braucht die Ueberschrift keinen Abstand nach unten, sonst sitzt sie im Kasten zu hoch. */ .card--wort { justify-content: center; } .card--wort .card__title { margin-bottom: 0; } .card__text { color: var(--text-2); font-size: var(--fs-text); } /* Aufklappkachel: der Titel steht immer, der Erklaertext kommt erst auf Klick. Kein neues Zeichen erfunden -- dasselbe +/- wie in der FAQ und in der Schrittliste der Detailseiten. "Hier steckt mehr dahinter" sieht damit auf der ganzen Website gleich aus. Das
traegt die Polsterung, die Kachel selbst keine mehr: so reicht der Klickbereich der Zusammenfassung ueber die volle Kachelbreite statt nur ueber den Titeltext. Einen eigenen Rahmen bekommt es nicht -- der Rahmen der Kachel IST der Rahmen des Aufklappers. */ .card--auf { padding: 0; } .card--auf > details { padding: var(--pad-card); } .card--auf summary { cursor: pointer; list-style: none; display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; } .card--auf summary::-webkit-details-marker { display: none; } .card--auf summary::after { content: "+"; flex-shrink: 0; color: var(--c-500); /* em statt rem: das Zeichen folgt dem Titel, statt eine eigene Groesse in die Schriftleiter einzuschmuggeln. */ font-weight: var(--fw-bold); font-size: 1.3em; line-height: 1.15; } .card--auf details[open] summary::after { content: "–"; } /* Kompakter Kacheltitel: Textgroesse statt h3-Groesse -- genau wie die Frage in der FAQ. Zwei Wege dorthin, ein Wert: die Aufklappkachel bekommt ihn von selbst, weil ihr Titel eine Zusammenfassung ist; die Vorschaukachel holt ihn ueber die Klasse. Die Ueberschriftenebene bleibt davon unberuehrt. Sie folgt der Gliederung (unter einer h2 eine h3, unter einer Gruppenueberschrift eine h4), die Groesse folgt dem Aussehen -- deshalb traegt .card__title sie selbst. */ .card--auf summary .card__title, .card__title--klein { font-size: var(--fs-text); } .card--auf summary .card__title { margin-bottom: 0; } .card--auf summary:hover .card__title { color: var(--c-700); } .card--auf details[open] .card__text { margin-top: .625rem; } /* Zugeklappte Kacheln bleiben flach, statt auf die Hoehe der aufgeklappten Nachbarin gedehnt zu werden. Sonst steht neben einem offenen Text eine leere Kachel mit derselben Hoehe. */ .grid:has(> .card--auf) { align-items: start; } /* Fußzeile immer am unteren Rand: In einer Kachelreihe sind alle Karten gleich hoch, also stehen Trennlinie und Schlagworte auf einer Linie, egal wie viel Text darüber steht. Der Mindestabstand kommt vom Vorgänger, weil margin-top:auto bei voller Karte auf 0 zusammenfällt. */ .card > *:has(+ .card__meta) { margin-bottom: .875rem; } .card__meta { margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .35rem 1rem; font-family: var(--ff-technisch); font-variant-numeric: tabular-nums; font-size: var(--fs-klein); color: var(--text-2); } /* Held-Karte — höchstens EINE pro Sektion */ .card--hero { background: var(--c-700); border-color: var(--c-700); color: var(--text-on-dark); box-shadow: var(--sh-3); } .card--hero .card__title { color: #fff; } .card--hero .card__text { color: var(--text-2-on-dark); } .card--hero .card__meta { border-top-color: rgba(255,255,255,.18); color: var(--text-2-on-dark); } .card--hero .badge { background: var(--c-300); color: var(--auf-hell); } /* Textlinks auf dunklem Grund. Ohne diese Regel erben sie die allgemeine Linkfarbe --c-700 und stehen damit auf einer c-700-Flaeche bei 1,0:1 -- derselbe Fehler wie beim gefuellten Knopf auf gleichfarbigem Grund, nur als Text. Stufe 300 reicht nicht: auf einer weiss aufgehellten Flaeche wie .proof__note sind es nur 3,7:1. Helle Schrift traegt dort 7,9:1, die Unterstreichung macht den Link ohne Farbunterschied erkennbar. */ .card--hero a:not(.btn), .ctablock a:not(.btn), .hero a:not(.btn), .pagehead a:not(.btn):not(.crumbs a), .section--dark a:not(.btn), .skarte--gross a:not(.btn) { color: var(--text-on-dark); text-decoration-thickness: 1px; } .card--hero a:not(.btn):hover, .ctablock a:not(.btn):hover, .hero a:not(.btn):hover, .section--dark a:not(.btn):hover, .skarte--gross a:not(.btn):hover { color: #fff; text-decoration-thickness: 2px; } /* Tint-Karte */ .card--tint { background: var(--c-100); border-color: transparent; } /* ---- Kopfzeile --------------------------------------------------------- */ .header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .header__inner { display: flex; align-items: center; gap: 1.25rem; min-height: 60px; } .header__nav { margin-left: auto; } .header__navliste { display: flex; gap: 1.15rem; list-style: none; margin: 0; padding: 0; } .header__nav a { font-size: var(--fs-text); font-weight: var(--fw-medium); color: var(--text); text-decoration: none; padding: .375rem 0; border-bottom: 2px solid transparent; } .header__nav a:hover { color: var(--c-700); border-bottom-color: var(--c-500); } /* ---- Ausklappmenue ----------------------------------------------------- Oeffnet beim Ueberfahren UND beim Tabben: :focus-within greift, sobald der Punkt oder ein Eintrag darin den Fokus hat. Deshalb ohne JavaScript und mit der Tastatur bedienbar. Der Punkt bleibt zugleich ein Link auf seine Uebersichtsseite -- Klick navigiert, Ueberfahren klappt aus. Das Auffuellen oben am Kasten ist die Bruecke ueber die Luecke zwischen Kopfzeile und Menue: ohne sie reisst der Hover ab, sobald der Zeiger die Luecke ueberquert. ---------------------------------------------------------------------- */ .navpunkt { position: relative; display: flex; align-items: center; } .navpunkt--unter > a::after { content: "\25BE"; margin-left: .3125rem; font-size: .8em; color: var(--text-2); } .navpunkt--unter:hover > a::after, .navpunkt--unter:focus-within > a::after { color: var(--c-500); } .navunter { display: none; position: absolute; top: 100%; left: -.875rem; z-index: 60; padding-top: .9375rem; } .navpunkt--unter:hover > .navunter, .navpunkt--unter:focus-within > .navunter { display: block; } .navunter__kasten { list-style: none; margin: 0; padding: .375rem; min-width: 15rem; max-width: 20rem; background: var(--surface); /* Nicht --line und nicht --sh-2: die Tafel schwebt ueber Seiteninhalt und braucht eine erkennbare Kante. --line traegt gegen Weiss nur 1,20:1, und --sh-2 liegt bei 6 Prozent Deckung -- ueber einem hellen Abschnitt waere von der Flaeche nichts zu sehen. Die Links darin tragen 15,84:1, das ist also keine WCAG-Frage, sondern eine gestalterische. */ border: 1px solid var(--c-200); border-radius: var(--r-card); box-shadow: 0 2px 4px rgba(5, 46, 69, .08), 0 12px 28px rgba(5, 46, 69, .16); } .navunter a { display: block; padding: .5rem .625rem; border-bottom: 0; border-radius: var(--r-btn); font-size: var(--fs-text); font-weight: var(--fw-regular); line-height: 1.35; } .navunter a:hover, .navunter a:focus-visible { background: var(--c-50); color: var(--c-700); border-bottom-color: transparent; } .navunter__trenner { border-top: 1px solid var(--c-200); margin: .375rem .625rem; } .header__cta { flex-shrink: 0; } /* flex-shrink: 0 gehoert hierher, nicht auf das Bild: Flex-Element in der Kopfzeile ist dieser Link. Ohne das quetscht die enge Zeile das Logo. */ .logo { display: inline-flex; align-items: center; gap: .625rem; text-decoration: none; flex-shrink: 0; } /* Logo als Bild. In BEIDEN Faellen steuert die Hoehe, die Breite folgt dem Seitenverhaeltnis 4,33:1 -- so kann es nicht verzerren. Niemals zusaetzlich eine Breite setzen: genau diese Mischung hat das Fusszeilenlogo schon einmal platt gedrueckt. flex-shrink: 0 ist Pflicht -- die Kopfzeile ist ein Flexbereich und quetscht das Bild sonst bei knapper Breite (gemessen: 3,54 statt 4,33). */ .logo__bild { height: 1.875rem; width: auto; flex-shrink: 0; } .logo__bild--fuss { height: 2.75rem; } /* Nur das Kopflogo, nicht das im Fuss -- der Fuss hat unter 560 px Platz. */ @media (max-width: 560px) { .logo__bild:not(.logo__bild--fuss) { height: 1.625rem; } } /* Nicht --line: als einzige Begrenzung eines Bedienelements waren das gemessen 1,20:1, gefordert sind 3,0:1 (WCAG 1.4.11). Unter 900px ist das der Hauptzugang zur Navigation. Stufe 500 traegt 5,61:1 -- derselbe Wert wie bei .btn--ghost, aus demselben Grund. */ .navtoggle { display: none; background: none; border: 1px solid var(--c-500); border-radius: var(--r-btn); padding: .5rem .75rem; cursor: pointer; margin-left: auto; color: var(--c-700); /* Ausdruecklich, nicht geerbt: der Menuknopf ist ein Knopf und traegt dieselbe Groesse wie die uebrigen. */ font-size: var(--fs-klein); } /* ---- Hero -------------------------------------------------------------- */ /* Der Seitenkopf ist zweigeteilt: links eine deckende Farbfläche mit dem Text, rechts das Foto ohne Schleier. Dazwischen ein Verlauf, der die Farbfläche in das Bild auslaufen lässt. Vorher lag das Foto unter einem Schleier von über 90 Prozent Deckkraft und war dort, wo es zählt, unsichtbar. Weder Fläche noch Bild. Der Kontrast hängt jetzt nicht mehr vom Motiv ab: weiße Schrift auf --c-900 sind feste 14,2:1. Beim Bildtausch ist nichts nachzumessen. */ .hero { display: grid; grid-template-columns: 1fr 1fr; /* Derselbe Blauton wie der Kopf der Unterseiten (--c-900). Vorher stand hier --c-700 — beim Wechsel von der Startseite auf eine Unterseite sprang die Farbe sichtbar um. */ background: var(--c-900); border-bottom: 3px solid var(--c-500); overflow: hidden; } .hero > * { min-width: 0; } .hero__flaeche { display: grid; grid-template-columns: 1fr; align-content: center; padding-block: clamp(2rem, 4vw, 3.25rem); } /* Die linke Textkante muss auf der Inhaltskante der Seite liegen, sonst fluchtet die Überschrift nicht mit dem Logo in der Kopfzeile darüber. Bewusst ohne vw gerechnet: vw enthält die Scrollleiste. Bezug ist die Textspalte selbst — der Block wird rechts angeschlagen und exakt so breit, dass links der Seitenrand übrig bleibt. */ /* Wie im Seitenkopf, siehe die Begruendung dort: Breite plus Ueberhang UND negativer rechter Rand. Der Kasten wird breiter, er wandert nicht. */ .hero__flaeche { position: relative; z-index: 1; } .hero__inhalt { width: min(calc(100% - var(--gutter) + var(--ueberhang)), calc(var(--maxw) / 2 - var(--gutter) + var(--ueberhang))); margin-left: auto; margin-right: calc(-1 * var(--ueberhang)); padding-right: clamp(.75rem, 1.2vw, 1rem); } .hero__bildseite { position: relative; min-height: clamp(17rem, 27vw, 23rem); } .hero__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Der Verlauf sitzt auf dem Bild, nicht zwischen den Hälften: er beginnt deckend in der Farbe der linken Fläche und ist bei 55 Prozent der Bildbreite ganz verschwunden. Dadurch gibt es keine harte Kante, und das Bild bleibt auf zwei Dritteln seiner Fläche unangetastet. */ .hero__bildseite::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--c-900) 0%, rgba(5,46,69,.92) 22%, rgba(5,46,69,.35) 40%, rgba(5,46,69,0) 58%); } .hero .eyebrow { color: var(--c-200); } .hero h1 { color: #fff; margin-bottom: .5rem; } .hero .btn-row { margin-top: 1.5rem; } @media (max-width: 900px) { /* Einspaltig: erst das Bild als Streifen, darunter die Farbfläche mit dem Text. Der Verlauf dreht sich mit nach unten. */ .hero { grid-template-columns: 1fr; } .hero__bildseite { min-height: 13rem; order: -1; } .hero__bildseite::after { background: linear-gradient(180deg, rgba(5,46,69,0) 45%, rgba(5,46,69,.55) 78%, var(--c-900) 100%); } .hero__inhalt { width: auto; margin-left: 0; margin-right: 0; padding-inline: var(--gutter); } .hero__flaeche { padding-block: clamp(1.75rem, 5vw, 2.5rem); } } /* Zweite Zeile der Hauptüberschrift: nennt die konkreten Dokumente und trägt damit die eigentliche Antwort auf „Was macht ihr?". */ .hero__was { display: block; margin-top: .35rem; font-size: var(--fs-text); font-weight: var(--fw-medium); line-height: 1.3; /* --c-100, nicht --c-200: die Zeile liegt bei 17–18 px im Schnitt 500 und gilt damit nicht als große Schrift (dafür bräuchte sie 24 px bei diesem Gewicht), muss also 4,5:1 halten statt 3,0:1. Mit --c-200 waren es bei 960 px Fensterbreite nur 4,0:1. */ color: var(--c-200); letter-spacing: -.01em; } .hero__was b { font-weight: var(--fw-bold); color: #fff; } .trustbar { margin-top: 1.75rem; padding-top: 1.125rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: var(--fs-text); color: var(--text-2); } .trustbar li { display: flex; align-items: center; gap: .5rem; } .trustbar li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-500); flex-shrink: 0; } /* ---- Kennzeichenband --------------------------------------------------- Schmaler heller Streifen direkt unter dem Seitenkopf. Er nimmt die drei Kennzeichen auf, die vorher im Kopf standen — dort waren sie die achte von acht Textformen und haben ihn zur Textwand gemacht. Hier tragen sie dieselbe Aussage, ohne den Kopf zu belasten. ---------------------------------------------------------------------- */ @media (max-width: 760px) { } /* ---- Kennzahlen -------------------------------------------------------- */ /* Die Kennzahlen lesen sich als Auszug aus einem Datenblatt, nicht als Kacheln. Deshalb keine Fläche, kein Rahmen, kein Radius — nur eine Haarlinie über jedem Wert, wie die Trennlinien in einem Leistungsverzeichnis. Vorher stand hier eine weiße Karte mit farbigem Balken links. Die hat zwei Probleme gemacht: sie sah aus wie die Karten der Seite, war aber keine (nicht anklickbar, kein Ziel), und der Balken war die einzige Stelle, an der --c-500 als reines Zierelement auftrat. Die Zahl selbst trägt die Betonung besser. */ .stats { display: grid; gap: var(--gap-grid); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-top: 1.75rem; } /* Untereinander neben dem Fließtext statt als Dreierreihe darunter */ .stats--spalte { grid-template-columns: 1fr; gap: 1.375rem; margin-top: 0; align-content: start; } .stat { padding-top: .875rem; border-top: 1px solid var(--c-200); } .stat__num { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--c-700); line-height: 1.15; font-family: var(--ff-technisch); font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .stat__label { font-size: var(--fs-text); color: var(--text-2); margin-top: .4375rem; line-height: 1.45; } /* ---- Vorher-Nachher im Kachelfuß -------------------------------------- Der durchgestrichene Vorherwert macht den Vergleich ohne Erklärtext lesbar, die Ersparnis steht als Pille rechts. Das ist der eigentliche Beleg auf der Startseite und darf nicht als Beiwerk untergehen. ---------------------------------------------------------------------- */ .card__meta.vergleich { justify-content: space-between; align-items: center; } /* Wo eine Nutzenzeile folgt, darf der Vergleich nicht mehr nach unten gedrueckt werden — sonst reisst er von seiner Erklaerung ab. */ .card__meta.vergleich:has(+ .nutzen) { margin-top: auto; } .nutzen:last-child { margin-top: .625rem; } .vergleich__vor { color: var(--text-2); text-decoration: line-through; } .vergleich__pfeil { color: var(--text-2); margin-inline: .125rem; } /* nicht --c-200: nur 1,7:1, der Pfeil traegt die Aussage von-nach */ .vergleich strong { color: var(--c-700); font-size: var(--fs-text); font-variant-numeric: tabular-nums; } .vergleich__minus { font-size: var(--fs-klein); font-weight: var(--fw-bold); color: var(--c-900); background: var(--c-100); padding: .1875rem .4375rem; border-radius: var(--r-pill); } /* ---- Einstiege --------------------------------------------------------- Die zwei Wege, die der Kunde im Kopf angeboten haben will: Schulung für wer sich erst umsehen will, Workshop für wer schon weiß, was er sucht. ---------------------------------------------------------------------- */ .einstieg { display: flex; flex-direction: column; gap: .4375rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: clamp(1.25rem, 2.4vw, 1.75rem); box-shadow: var(--sh-1); text-decoration: none; color: inherit; transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease; } .einstieg:hover { box-shadow: var(--sh-2); border-color: var(--c-200); transform: translateY(-2px); } .einstieg p { color: var(--text-2); font-size: var(--fs-text); } .einstieg__fuss { margin-top: auto; padding-top: 1.125rem; display: flex; gap: 1rem; flex-wrap: wrap; font-family: var(--ff-technisch); font-size: var(--fs-klein); color: var(--c-900); font-variant-numeric: tabular-nums; font-weight: var(--fw-semi); } /* Hervorgehoben ueber die Randstaerke, nicht ueber eine zweite Farbe. */ .einstieg--primaer { border-color: var(--c-700); box-shadow: 0 0 0 1px var(--c-700), var(--sh-2); } @media (max-width: 860px) { .stufenreihe { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 460px) { .stufenreihe { grid-template-columns: 1fr; } } /* ---- Zitat ------------------------------------------------------------- */ .quote { border-left: 3px solid var(--c-500); padding: .125rem 0 .125rem 1.125rem; margin-block: 1.375rem; } /* Textgroesse, nicht h3-Groesse: das Zitat steht mitten im Fliesstext und soll ihn nicht ueberragen. Als Zitat erkennbar bleibt es an der Linie links, am mittleren Schriftschnitt und an der dunkleren Farbe -- der umgebende Text ist --text-2 und normal. */ .quote blockquote { margin: 0; font-size: var(--fs-text); font-weight: var(--fw-medium); color: var(--c-900); } .quote figcaption { margin-top: .5rem; font-size: var(--fs-klein); color: var(--text-2); } /* ---- Bandstreifen (Readiness-Check) ------------------------------------ */ .band { background: var(--c-100); border-radius: var(--r-card); padding: clamp(1.25rem, 3vw, 2rem); display: grid; gap: 1.25rem; grid-template-columns: 1.4fr auto; align-items: center; } /* Ohne Schaltflaeche daneben bekommt der Text die ganze Breite -- sonst stuende er auf 1,4fr und liesse rechts eine leere Haelfte stehen. */ .band:has(> :only-child) { grid-template-columns: 1fr; } /* Groesse folgt der Ebene, auch hier: der Stoerer steht innerhalb eines Abschnitts, seine Ueberschrift ist deshalb eine h3 und rendert wie jede h3. Auffaellig wird er durch Flaeche und Schaltflaeche, nicht durch Groesse. */ .band h2 { font-size: var(--fs-h2); margin-bottom: .4rem; } .band h3 { margin-bottom: .4rem; } .band p { color: var(--c-900); opacity: .8; font-size: var(--fs-text); } /* Schmale Fassung: ein Streifen unter einem Kachelraster, kein Kasten neben Kacheln. Ueberschrift und Text stehen nebeneinander in einer Zeile statt uebereinander -- das halbiert die Hoehe und macht klar, dass hier ein Nachsatz steht und kein weiterer Eintrag des Rasters. */ .band--schmal { grid-template-columns: auto 1fr; gap: .25rem 1.25rem; align-items: baseline; padding: clamp(.875rem, 2vw, 1.125rem) clamp(1.125rem, 2.5vw, 1.5rem); } .band--schmal h3 { margin-bottom: 0; white-space: nowrap; } /* ---- Beweisblock MSR --------------------------------------------------- */ .proof__grid { display: grid; gap: clamp(1.75rem, 3.2vw, 2.75rem); grid-template-columns: 1.1fr .9fr; align-items: start; } .proof__note { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-card); padding: 1.125rem; } .proof__note h3 { margin-bottom: .375rem; } .proof__note p { font-size: var(--fs-text); color: var(--text-2-on-dark); } .section--dark a { color: #fff; } .section--dark a:hover { color: var(--c-200); } /* ---- Abschluss-CTA ----------------------------------------------------- */ .finalcta { text-align: center; } .finalcta .btn-row { justify-content: center; } .finalcta p { margin-inline: auto; } /* ---- Fußzeile ---------------------------------------------------------- */ .footer { background: var(--c-900); color: var(--text-2-on-dark); padding-block: 2.75rem 1.5rem; font-size: var(--fs-text); } .footer h4 { color: #fff; font-size: var(--fs-klein); letter-spacing: .09em; text-transform: uppercase; margin-bottom: .75rem; } .footer a { color: var(--text-2-on-dark); text-decoration: none; } .footer a:hover { color: #fff; text-decoration: underline; } .footer__grid { display: grid; gap: 1.75rem; grid-template-columns: 1.4fr repeat(3, 1fr); } .footer__cols li + li { margin-top: .35rem; } .footer__bottom { margin-top: 2rem; padding-top: 1.125rem; border-top: 1px solid rgba(255,255,255,.14); display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; font-size: var(--fs-klein); } .footer__msr { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-card); padding: 1rem; margin-top: 1.125rem; } /* ---- Responsive -------------------------------------------------------- */ /* Unterhalb dieser Breite füllt der Textblock das Banner fast vollständig aus. Der Schleier darf dann nicht mehr nach rechts auslaufen — die Schrift stünde sonst am rechten Rand auf halber Deckkraft, und der Kontrast fällt je nach Motiv unter die AA-Grenze. Gemessen mit dem aktuellen Foto: bei 780 px waren es mit dem waagerechten Verlauf 3,1:1, mit dem senkrechten 12:1. Die 940 px sind bewusst dieselbe Schwelle wie beim Umklappen der Navigation — eine Zahl weniger, die man einzeln pflegen muss. */ @media (max-width: 940px) { .hero { min-height: clamp(14rem, 44vw, 19rem); } .hero__schleier { background: linear-gradient(180deg, rgba(4,38,58,.90) 0%, rgba(4,38,58,.95) 100%); } } @media (max-width: 900px) { .proof__grid { grid-template-columns: 1fr; } .band { grid-template-columns: 1fr; } /* Untereinander bliebe der Ueberschrift zu wenig Platz, und 'nowrap' wuerde den Streifen aufreissen. Steht hier und nicht bei der Variante: diese Zeile ist gleich stark und spaeter, sie haette den eigenen Umbruchpunkt der Variante ohnehin ueberstimmt. */ .band--schmal h3 { white-space: normal; margin-bottom: .25rem; } .footer__grid { grid-template-columns: 1fr 1fr; } } /* Navigationspunkte plus Logo und Schaltfläche brauchen Platz — auf das Menü umschalten, nicht erst bei 760px. RICHTIG MESSEN: die Kinder der Kopfzeile brauchen zusammen 806px (Logo 130 + Navigation 524 + Knopf 112 + 2 Lücken à 20). Den Seitenrand NICHT mit 96px dazurechnen — --gutter ist ein clamp und schrumpft mit dem Fenster: bei 901px sind es 36px je Seite, nicht 48. Nachgemessen bleiben dort 80px Luft, die Zeile ist einzeilig und das Logo unverzerrt. DIESE ZAHL HÄNGT AN DER ANZAHL DER NAVIGATIONSPUNKTE UND AN DER SCHRIFTGRÖSSE. Sie ist zweimal gewandert: 940 → 1010px, als „News" als sechster Punkt dazukam; 1010 → 860px, als „Rahmenbedingungen" wegfiel; 860 → 900px, als der Fließtext von 13 auf 14px ging und die Navigation dadurch von 439 auf 467px wuchs. Die Knopfbeschriftung auf 12px hat den Bedarf danach wieder gesenkt, die Ausklappmarken der Untermenüs haben ihn auf 524px für die Navigation gehoben. 900px trägt beides. Wer einen Punkt oder eine Schriftstufe ändert, muss hier nachmessen. */ @media (max-width: 900px) { .navtoggle { display: block; } .header__nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; background: var(--surface); border-bottom: 1px solid var(--line); padding: .5rem var(--gutter) 1rem; box-shadow: var(--sh-2); /* Mit offenen Unterpunkten ist die Liste hoeher als das Fenster (gemessen 931px auf 844px Hoehe). Die Kopfzeile klebt oben, die Tafel haengt absolut daran -- ohne eigene Scrollhoehe waere der untere Teil des Menues NIE erreichbar. Genau das war der Fall. dvh statt vh, weil die Adressleiste mobiler Browser die Fensterhoehe veraendert. */ max-height: calc(100vh - 3.75rem); max-height: calc(100dvh - 3.75rem); overflow-y: auto; overscroll-behavior: contain; } .header__nav.is-open { display: block; } .header__navliste { flex-direction: column; gap: 0; } .header__nav a { padding: .75rem 0; border-bottom: 1px solid var(--line); } .header__cta { display: none; } /* Auf dem Telefon gibt es kein Ueberfahren. Die Unterpunkte stehen deshalb offen und eingerueckt untereinander -- kein Aufklappen, kein JavaScript, kein Tippziel, das man erst finden muss. */ .navpunkt { display: block; } .navpunkt--unter > a::after { display: none; } .navunter { display: block; position: static; padding-top: 0; } .navunter__kasten { min-width: 0; max-width: none; padding: 0 0 0 1rem; background: none; border: 0; box-shadow: none; } .navunter a { padding: .625rem 0; border-radius: 0; color: var(--text-2); } .navunter a:hover { background: none; color: var(--c-700); } .navunter__trenner { margin: 0; border-top: 0; } } @media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } .btn { width: 100%; } .btn-row { flex-direction: column; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto; } }