/* ============================================================ Abschnittskopf Masse aus Prototyp.dc.html Zeile 1873, 1985-1988, 2050-2052, 2565-2566. Vier Schriftgroessen, weil der Prototyp vier benutzt — und nicht, weil es schoen aussieht: gross die Ueberschrift eines Abschnitts mittel die Aussage auf dem dunklen Band klein Zwischenueberschrift und Unternehmensgruppe aussage der Leitsatz oben auf der Startseite, meist als Absatz Zur Spezifitaet: Die Ueberschrift traegt bewusst zwei Klassen im Selektor. Die globalen Stile aus theme.json kommen als `:root :where(h2)` und liegen damit auf derselben Stufe wie eine einzelne Klasse — welche Regel gewinnt, haenge dann an der Ladereihenfolge im . Eine Klasse mehr entscheidet das eindeutig. ============================================================ */ .ps-kopf { --ps-kopf-gap: var(--space-4); /* Titel: Groesse, Zeilenhoehe, Sperrung */ --ps-kopf-titel: clamp(2rem, 3.4vw, 2.9rem); --ps-kopf-titel-lh: 1.15; --ps-kopf-titel-ls: -0.028em; /* Kennzeichnung: Schrift und Strich koennen verschiedene Farben tragen */ --ps-kopf-marke: var(--text-muted); --ps-kopf-strich: var(--highlight); --ps-kopf-anriss: var(--text-lg); display: flex; flex-direction: column; gap: var(--ps-kopf-gap); max-width: 100%; margin-block: 0; } /* ---------- Abstand innerhalb der Gruppe ---------- */ .ps-kopf--eng { --ps-kopf-gap: var(--space-3); } .ps-kopf--weit { --ps-kopf-gap: var(--space-5); } .ps-kopf--weiter { --ps-kopf-gap: var(--space-6); } /* ---------- Groessenstufen ---------- */ .ps-kopf--mittel { --ps-kopf-titel: clamp(1.6rem, 2.8vw, 2.3rem); --ps-kopf-titel-lh: 1.3; --ps-kopf-titel-ls: -0.02em; } .ps-kopf--klein { --ps-kopf-titel: clamp(1.4rem, 2.2vw, 1.9rem); --ps-kopf-titel-lh: 1.28; --ps-kopf-titel-ls: -0.02em; /* Eine Zwischenueberschrift traegt keinen Anriss in Schaufenstergroesse. */ --ps-kopf-anriss: var(--text-base); } .ps-kopf--aussage { --ps-kopf-titel: clamp(1.7rem, 3.4vw, 2.9rem); --ps-kopf-titel-lh: 1.35; --ps-kopf-titel-ls: -0.02em; } /* ---------- Farbe der Kennzeichnung ---------- */ /* Auf dem Band traegt auch die Schrift den Akzent, nicht nur der Strich. */ .ps-kopf--kennzeichnung-akzent { --ps-kopf-marke: var(--highlight); } /* Wo es um die Muttergesellschaft geht, ist der Strich E1-blau. */ .ps-kopf--kennzeichnung-gruppe { --ps-kopf-strich: var(--e1-blue); } /* ---------- Abstand zum naechsten Block ---------- Der Abschnitt setzt seinen Abstand als `gap`; den kann ein Kind nicht ueberschreiben. Ein negativer Aussenabstand zieht den Nachbarn wieder heran — und weil `--ps-abschnitt-gap` vererbt wird, rechnet die Formel auch dann noch richtig, wenn der Abschnitt auf "eng" steht oder das Handy-Layout greift. */ .ps-kopf--folge-eng { margin-bottom: calc(var(--space-7) - var(--ps-abschnitt-gap, var(--space-9))); } .ps-kopf--folge-knapp { margin-bottom: calc(var(--space-5) - var(--ps-abschnitt-gap, var(--space-9))); } /* ---------- Die drei Bausteine ---------- */ .ps-kopf__kennzeichnung { display: flex; align-items: center; gap: 12px; margin: 0; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-regular); letter-spacing: 0.18em; line-height: 1.4; text-transform: uppercase; color: var(--ps-kopf-marke); } .ps-kopf__kennzeichnung::before { content: ""; flex: none; width: 26px; height: 1px; background: var(--ps-kopf-strich); } .ps-kopf .ps-kopf__titel { margin: 0; font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--ps-kopf-titel); line-height: var(--ps-kopf-titel-lh); letter-spacing: var(--ps-kopf-titel-ls); color: var(--text-strong); text-wrap: balance; } .ps-kopf__anriss { margin: 0; font-size: var(--ps-kopf-anriss); line-height: 1.8; color: var(--text-muted); text-wrap: pretty; } /* ---------- Schmale Breiten ---------- */ @media (max-width: 480px) { /* 0.18em Sperrung reisst die Versalzeile auf schmalen Geraeten in zwei Zeilen. Etwas enger bleibt sie einzeilig und liest sich weiter als Auszeichnung. */ .ps-kopf__kennzeichnung { gap: 10px; letter-spacing: 0.12em; } .ps-kopf__kennzeichnung::before { width: 18px; } }