). --focus (Teal-Ink) hätte auf der Studio-Tafel nur 2,57:1, deshalb
die Schriftfarbe der Tafel (mindestens 16:1 auf der Tafel).
Der Basis-Offset von 3px reicht aber nicht: Die Tafel hat oben und unten
nur .08em Padding (1,8 px bei 22 px), die waagerechten Striche lägen auf
dem Sektionsgrund (weiß auf Weiß, Studio auf deep, 2,57:1 auf teal). Der
Ring sitzt deshalb direkt am Link, und ein Schatten in Tafelfarbe
verlängert die Tafel um .2em. So liegt der Ring auf jeder Seite vollständig
auf der Tafel. clone zeichnet den Schatten bei einem umbrechenden Link auf
jeder Zeile ganz. Im Kontrastmodus entfällt der Schatten, der Ring nimmt
dort die Systemfarbe. */
.pain__bridge a:focus-visible {
outline-color: var(--bridge-fg);
outline-offset: 0;
box-shadow: 0 0 0 .2em var(--bridge-bg);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
/* FIX: Silbentrennung nur auf schmalen Bildschirmen (siehe 02-base.css).
Der Brückensatz ist keine Überschrift und fällt nicht unter die
Basisregel, steht aber in 22 px Display-Schrift auf 284 px Satzbreite.
FIX: 22.49rem statt 29.99rem. Seit die Tafel nur die Kernaussage trägt
und balance setzt, reicht die Zeile bei 375 px für jedes Wort; dort
trennte die Regel ohne Not („zusätz-lich“), und ein Untertitel trennt
nicht. Unter 360 px (284 px Satzbreite bei 320 px) bleibt sie. */
@media (max-width: 22.49rem) {
.pain__bridge {
-webkit-hyphens: auto;
hyphens: auto;
-webkit-hyphenate-limit-before: 4;
-webkit-hyphenate-limit-after: 4;
hyphenate-limit-chars: 8 4 4;
overflow-wrap: break-word;
}
}
.pain__cta {
margin: 0;
}
/* Sektions-CTA (einheitlich für alle Sektionen): btn--lg, unter 48rem in
voller Breite (btn--block im Markup), ab 48rem in natürlicher Breite.
FIX: 48rem statt 30rem, derselbe Umschaltpunkt wie hero, channel_proof,
process und cta_band; zwischen 480 und 767 px wechselte die Breite sonst
von Sektion zu Sektion. :where hält die Spezifität bei einer Klasse, die
Reihenfolge im Build (50 nach 10) entscheidet. */
@media (min-width: 48rem) {
.pain__cta :where(.btn--block) {
display: inline-flex;
width: auto;
}
}
/* ---------- Bewegung (7.3, Inventar Nr. 3) ----------
Die Listen-Einblendung der Zeilen (opacity, 8 px, 420 ms) steht zentral in
90-motion.css an [data-reveal], nur unter html.smm-motion. Vertrag dort:
.problem trägt deshalb selbst keine transition. */
/* ===== 51-text-media.css ===== */
/* =========================================================================
51 text_media: Text mit Medium im Sucherrahmen (Besitz: Team C1, Spez. 6.7)
Signaturelement ist der Sucherrahmen des Fundaments (.frame, 5.4). Diese
Datei setzt nur Raster, Textspalte, Aufzählung und die Maße des Mediums.
Rahmen, Marken, Bauchbinde und Reel-Rahmen gehören F bzw. B.
========================================================================= */
/* ---------- Raster ---------- */
/* Die Spalten kommen aus .grid-12 (FIX dort: minmax(0, 1fr) statt 1fr).
Unter 62rem steht das Medium einspaltig nach dem Text. */
.text-media__inner {
row-gap: var(--sp-7);
align-items: start;
}
@media (min-width: 62rem) {
.text-media__text {
grid-column: 1 / span 6;
grid-row: 1;
}
.text-media__media {
grid-column: 8 / span 5;
grid-row: 1;
}
/* Medium links: Die Seite wechselt über die Platzierung, nicht über
order. Die DOM-Reihenfolge Text vor Medium bleibt, damit Lese- und
Tabreihenfolge in jeder Breite übereinstimmen. :where hält die
Spezifität bei einer Klasse, die Reihenfolge in der Datei entscheidet. */
.text-media--left :where(.text-media__text) {
grid-column: 7 / span 6;
}
.text-media--left :where(.text-media__media) {
grid-column: 1 / span 5;
}
}
/* Das Medium klebt, solange der Text daneben weiterläuft. Nur bei
ausreichender Fensterhöhe: Auf einem niedrigen Querformat-Laptop wäre ein
hohes Porträt sonst nie ganz zu sehen. */
@media (min-width: 62rem) and (min-height: 44rem) {
.text-media__media {
position: sticky;
top: calc(var(--header-h) + 2rem);
align-self: start;
}
}
/* Hochkant an der äußeren Rasterkante (Befund Runde 3 „Hochkant-Reels in
text_media hängen links in der Medienspalte“): Das schmale Medium stand
linksbündig in den Spalten 8–12, rechts davon blieb bei 1440 px ein
136 px breiter toter Streifen bis zur Rasterkante, anders als im Hero.
Jetzt wie im Hero (40-hero.css): Text in sieben Spalten, das Medium in
den übrigen fünf bündig an der Außenkante, bei „Medium rechts“ an der
rechten, bei „Medium links“ an der linken. Die Lücke zwischen Text und
Medium ist damit auf beiden Seiten gleich. Die Seite wechselt weiter über
die Grid-Platzierung, die DOM-Reihenfolge Text vor Medium bleibt.
ABWEICHUNG von 6.7 (Text 1–6, Medium 8–12 bzw. 1–5 und 7–12) nur für
Hochkant. :where hält die Spezifität bei einer bzw. zwei Klassen, damit
die Regeln die Grundplatzierung oben über die Reihenfolge übersteuern. */
@media (min-width: 62rem) {
.text-media--portrait :where(.text-media__text) {
grid-column: 1 / span 7;
}
.text-media--portrait :where(.text-media__media) {
grid-column: 8 / -1;
justify-self: end;
/* Mit justify-self schrumpft das Rasterelement auf seinen Inhalt. Der
9:16-Bildschirm hat keine eigene Breite (Kinder absolut), deshalb
braucht der Wrapper eine feste Breite, sonst wäre er 0 px breit. */
width: 100%;
}
.text-media--portrait.text-media--left :where(.text-media__text) {
grid-column: 6 / -1;
}
.text-media--portrait.text-media--left :where(.text-media__media) {
grid-column: 1 / span 5;
justify-self: start;
}
}
/* ---------- Textspalte ---------- */
/* Ohne Medium: schmale Spalte, linksbündig an der Containerkante. Die Klasse
.container--narrow sitzt dafür innerhalb von .container, so bleibt der
seitliche Gutter erhalten (am Container selbst läge die Spalte mit
margin-inline-start: 0 direkt am Viewportrand). */
.text-media__text--solo {
margin-inline-start: 0;
}
/* Kopf über dem Text (stack): höchstens 2.5rem bis zur Prosa. Überschrift
und Absätze sind hier ein Textblock; --head-gap (bis 4rem) ist für Köpfe
über Rastern gedacht und riss bei 1440 px eine 64-px-Lücke zwischen Titel
und ersten Satz. 2.5rem entspricht dem Wert aus 4.3 für 375 px.
ABWEICHUNG von --head-gap ab 48rem. */
.text-media__text > :where(.section__header--stack) {
margin-bottom: min(var(--head-gap), 2.5rem);
}
/* ---------- Ohne Medium: Lead über die Breite ----------
ABWEICHUNG von 6.7 (schmale Spalte) und vom Stand der Abnahme (Kopf links
als aside, Text rechts): Art-Director-Befund „gleiches Zwei-Spalten-
Schema auf jeder Sektion“ und „text_media ohne Medium mit leerer Spalte“.
Jetzt: Kopf oben, darunter ein großer Lead-Satz über die Breite (das Intro
oder der erste Satz des Textes, Auswahl in text_media.php), danach der
Text in einer Lesespalte. Ab 62rem steht die Aufzählung samt Button in
den Spalten 9–12 neben dem Text (.text-media__aside), sonst folgt sie
darunter. So bleibt neben der Lesespalte keine leere Hälfte, und die
Sektion unterscheidet sich vom Befund-Raster in pain_points, das auf
sieben Seiten direkt davor oder danach steht.
Unter 62rem: alles untereinander, der Lead eine Stufe kleiner. */
.text-media__lead,
.text-media__text--intro-lead :where(.section__header > .section__intro) {
max-width: 36ch;
margin: 0;
font: 500 clamp(1.3125rem, .95rem + 1.4vw, 2.125rem)/1.32 var(--font-text);
color: var(--text);
text-wrap: pretty;
}
/* Langer Lead (ab 120 Zeichen): eine Stufe kleiner, breiteres Maß. */
.text-media__text--long-lead > :where(.text-media__lead),
.text-media__text--long-lead :where(.section__header > .section__intro) {
max-width: 46ch;
font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
line-height: 1.38;
}
/* Intro als Lead: sitzt im Kopf, der Abstand zum Titel wie beim Kopf. */
.text-media__text--intro-lead :where(.section__header > .section__intro) {
margin-top: 1.25rem;
}
.text-media__lead {
margin-bottom: 2.5rem;
}
@media (min-width: 62rem) {
.text-media__text--solo {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: var(--gap);
max-width: none;
}
.text-media__text--solo > * {
grid-column: 1 / -1;
}
.text-media__text--solo > :where(.text-media__body) {
display: grid;
grid-template-columns: subgrid;
align-items: start;
}
.text-media__text--solo :where(.text-media__body > *) {
grid-column: 1 / span 7;
}
/* Aufzählung und Button neben dem Text, oben bündig mit der ersten
Textzeile, an der Kante von Spalte 8 wie das Intro im split-Kopf. */
.text-media__text--solo :where(.text-media__body > .text-media__aside) {
grid-column: 8 / -1;
grid-row: 1;
}
/* Ohne Aufzählung und Button: Lead links (1–5), Text rechts (7–12). */
.text-media__text--lead-beside > :where(.text-media__lead) {
grid-column: 1 / span 5;
grid-row: 2;
margin-bottom: 0;
}
.text-media__text--lead-beside > :where(.text-media__body) {
display: block;
grid-column: 7 / -1;
grid-row: 2;
}
.text-media__lead {
margin-bottom: 3rem;
}
.text-media__text--intro-lead > :where(.section__header) {
margin-bottom: 3rem;
}
}
/* Prosa in text_media: 17 px/1.65 in jeder Breite, schmaler als im Artikel.
Die Regel steht nach 02-base.css und übersteuert dort die größere Stufe
ab 48rem bei gleicher Spezifität. */
.text-media__prose {
max-width: 60ch;
font-size: var(--fs-body);
line-height: 1.65;
color: var(--text);
}
/* ---------- Aufzählung: Pixelquadrate (4.1) ---------- */
/* Die Liste selbst liefert F (.bullets in 16-lists-checks-stars.css):
Quadrat, Einzug, gap .75rem, list-style-type "" (FIX dort gegen den
Verlust der Listen-Semantik in Safari/VoiceOver) und die Regel für den
Windows-Kontrastmodus. Die Kreis-Haken des alten Stands entfallen.
Hier stehen nur die Abweichungen der Sektion. Die Klasse der Sektion statt
.bullets, weil .bullets auch im Formular (D) und im Takeaway-Block steht
und diese Datei im Build nach F kommt: Eine Regel an .bullets würde dort
Abstand, Schrift und Breite mitändern (8.5, Regel 3).
Der obere Abstand kollabiert mit dem Rand des Sektionskopfs, wenn kein
Fließtext davor steht. */
.text-media__bullets {
margin-top: 1.5rem;
}
.text-media__bullets > li {
max-width: 60ch;
font: 600 1rem/1.5 var(--font-text);
color: var(--text);
}
.text-media__cta {
margin-top: 2rem;
}
/* 375 px: Button in voller Breite (btn--block im Markup), ab 48rem in
natürlicher Breite. Einheitliche Regel aller Sektions-CTAs (Befund
sektions-cta-uneinheitlich): btn--lg, unter 48rem btn--block, derselbe
Umschaltpunkt wie Hero, channel_proof und cta_band. :where hält die
Spezifität bei einer Klasse. */
@media (min-width: 48rem) {
.text-media__cta :where(.btn--block) {
display: inline-flex;
width: auto;
}
}
/* ---------- Medium ---------- */
/* Tablet und Handy: Medium unter dem Text, nicht breiter als 36rem. Die
Rahmenmarken liegen 6 px außerhalb und damit im 18-px-Gutter. */
.text-media__media {
min-width: 0;
max-width: 36rem;
}
@media (min-width: 62rem) {
.text-media__media {
max-width: none;
}
}
/* Hochkant (Reel oder hochformatige Videodatei): unter 62rem linksbündig
unter dem Text, 20rem auf dem Handy, 22rem ab Tablet. Ab 62rem steht es an
der äußeren Rasterkante (Platzierung oben unter „Raster“). */
.text-media__media--portrait {
max-width: 20rem;
}
@media (min-width: 48rem) {
.text-media__media--portrait {
max-width: 22rem;
}
}
/* Kleben mit Hochkant: Ein Reel ist bei 22rem Breite rund 39rem hoch, dazu
Hinweiszeile und Header-Abstand. Bisher klebte es deshalb erst ab 52rem
Fensterhöhe, darunter stand es still, und neben dem langen Text blieb ein
Loch. Jetzt richtet sich die Breite nach der Fensterhöhe, damit Bildschirm
samt Datenschutzhinweis ab 44rem Fensterhöhe ganz im Fenster bleiben:
Fensterhöhe minus Kleberand (Header + 2rem) minus 7rem für die
Hinweiszeile (.75rem Abstand, bis vier Zeilen zu je 1.3125rem) und etwa
1rem Luft unten, davon 9/16. Bei 1440 × 900 bleibt es bei 22rem, bei
44rem Fensterhöhe rund 17rem. Die rem-Reserve wächst mit dem Textzoom mit.
vh zuerst als Fallback, dann svh, damit eine ein- und ausfahrende
Browserleiste die Breite nicht springen lässt. */
@media (min-width: 62rem) and (min-height: 44rem) {
.text-media__media--portrait {
--text-media-reserve: 7rem;
max-width: min(22rem, (100vh - var(--header-h) - 2rem - var(--text-media-reserve)) * 9 / 16);
max-width: min(22rem, (100svh - var(--header-h) - 2rem - var(--text-media-reserve)) * 9 / 16);
}
}
/* Unter 84rem Fensterbreite ist der rechte Gutter schmaler als der
Nach-oben-Knopf samt Abstand (1.25rem + 2.75rem, 34-floating.css). Ein
rechts klebendes Reel hätte dort das Ende der Hinweiszeile dauerhaft unter
dem Knopf. Die Reserve wächst deshalb um die Knopfhöhe samt Abstand, das
Medium endet über dem Knopf. Links klebt es fern vom Knopf. */
@media (min-width: 62rem) and (max-width: 83.99rem) {
.text-media:not(.text-media--left) .text-media__media--portrait {
--text-media-reserve: 10.5rem;
}
}
/* Überhängende Bauchbinde: Den Platz darunter hält .frame--overlap (F).
Reel-Rahmen und Datenschutzhinweis darunter kommen aus components/reel.php
(B), die Breite aus --portrait oben.
FIX aus dem alten Stand („.text-media__media .blk-video { margin-block: 0 }“
gegen weiße Streifen im Rahmen): liegt jetzt in 12-frame.css und in der
Ausgabe screen/frame von video-embed, hier also keine eigene Regel mehr. */
/* Aufzählung neben dem Text (ohne Medium, ab 62rem): oben bündig mit der
ersten Textzeile statt 1.5rem darunter. Steht nach der Grundregel der
Aufzählung und gewinnt über die Reihenfolge. */
@media (min-width: 62rem) {
.text-media__aside > :where(.text-media__bullets) {
margin-top: .3em;
}
}
/* ===== 52-channel-proof.css ===== */
/* =========================================================================
52 · channel_proof: Leitkennzahl und Kanal-Zeilen (Spezifikation 6.5)
Besitz: Team C. Signatur der Sektion: Walzenzähler (5.7, von F).
Markup: template-parts/sections/channel_proof.php,
template-parts/components/channel-row.php
Alle Farben kommen aus den semantischen Tokens. Auf deep und teal kippt
data-theme="dark" die Werte, auf white und mist bleibt alles hell.
Keine Karten, kein Akzentbalken, kein Hover-Lift.
ABWEICHUNG von 6.5 (Art-Director-Verbesserung „Aufrufzähler als Plakat“):
Die Leitkennzahl steht nicht mehr in den Spalten 1 bis 7 mit der dl
rechts daneben, sondern füllt die ganze Containerbreite. Rechts neben
„250 Mio.“ blieb sonst ein großer toter Raum, und die Sektion las sich wie
eine Datentabelle statt wie ein Aufrufzähler. Die übrigen Kennzahlen stehen
als Streifen darunter, die Kanal-Zeilen sind flacher (Kennzahlen nebenein-
ander, Startdatum im Kopf). Die Leitkennzahl ist eine der vier lauten
Stellen aus Kapitel 1, deshalb darf sie hier plakatgroß sein.
========================================================================= */
/* ---------- Leitkennzahl ---------- */
/* Container für cqi: Die Plakatgröße hängt an der Containerbreite, nicht am
Viewport. So läuft die Zahl weder auf 320 px noch bei 200 % Zoom über. */
.proof__lead {
container-type: inline-size;
align-items: start;
}
.proof__lead > * {
grid-column: 1 / -1;
}
/* Stand der Zahlen: echtes Datum, deshalb Plex Mono. */
.proof__stand {
margin: 0;
font: 500 var(--fs-mono)/1.35 var(--font-mono);
letter-spacing: .02em;
color: var(--text-soft);
}
/* Rückfall ohne Container-Einheiten: die Stufe aus den Tokens. nowrap hält
Zahl und Einheit in einer Zeile; die Breite stimmt über die Stufenklasse.
Gemessen an Archivo: In der 1em hohen Walzenzeile beginnen die Ziffern
.135em unter der Oberkante, das Komma von „35,1“ endet .016em unter der
Unterkante. Der Rand unten hält das Komma vom Label frei (in em, damit er
mit der Zahl skaliert). Oben bleibt der Leerraum bewusst stehen: Ein
negativer Rand zöge das Walzenfenster über die Stand-Zeile, und während
des Rollens lägen Ziffernteile auf dem Text. Der Leerraum ersetzt deshalb
den Abstand unter dem Stand. */
.proof__lead-value {
margin: 0 0 .04em;
font: 820 var(--fs-num-lead)/.9 var(--font-display);
font-stretch: 100%;
font-variant-numeric: tabular-nums lining-nums;
letter-spacing: -.01em;
white-space: nowrap;
color: var(--text);
}
/* Die Einheit spricht in der O-Ton-Stimme (schmal und schwer, 5.2). Sie
dreht sich nicht mit, die Walze bleibt bei den Ziffern. */
.proof__lead-unit {
font-stretch: var(--w-oton);
font-weight: 850;
}
/* Formatfüllend: Containerbreite geteilt durch die geschätzte Breite des
Werts in em (Stufe aus channel_proof.php, immer aufgerundet; dazu spart
letter-spacing rund .08em). Die Obergrenze 20rem greift nur bei sehr
kurzen Werten auf breiten Bildschirmen. */
@supports (width: 1cqi) {
.proof__lead-value {
font-size: min(20rem, calc(100cqi / var(--proof-fit, 4.9)));
}
}
.proof__lead-value--fit-200 { --proof-fit: 2; }
.proof__lead-value--fit-225 { --proof-fit: 2.25; }
.proof__lead-value--fit-250 { --proof-fit: 2.5; }
.proof__lead-value--fit-275 { --proof-fit: 2.75; }
.proof__lead-value--fit-300 { --proof-fit: 3; }
.proof__lead-value--fit-325 { --proof-fit: 3.25; }
.proof__lead-value--fit-350 { --proof-fit: 3.5; }
.proof__lead-value--fit-375 { --proof-fit: 3.75; }
.proof__lead-value--fit-400 { --proof-fit: 4; }
.proof__lead-value--fit-425 { --proof-fit: 4.25; }
.proof__lead-value--fit-450 { --proof-fit: 4.5; }
.proof__lead-value--fit-475 { --proof-fit: 4.75; }
.proof__lead-value--fit-500 { --proof-fit: 5; }
.proof__lead-value--fit-550 { --proof-fit: 5.5; }
.proof__lead-value--fit-600 { --proof-fit: 6; }
.proof__lead-value--fit-650 { --proof-fit: 6.5; }
.proof__lead-value--fit-700 { --proof-fit: 7; }
.proof__lead-value--fit-800 { --proof-fit: 8; }
.proof__lead-value--fit-900 { --proof-fit: 9; }
.proof__lead-value--fit-1000 { --proof-fit: 10; }
/* Kein Zahlwert, sondern ein ganzer Satz (über 10 em): umbrechen statt
einzeilig riesig. .odo (F) setzt selbst nowrap und muss mit. */
.proof__lead-value--wrap {
margin-block: 0;
font-size: clamp(2.25rem, 1rem + 4vw, 4.5rem);
line-height: 1.05;
white-space: normal;
}
.proof__lead-value--wrap > :where(.odo) {
white-space: normal;
}
.proof__lead-label {
margin: .75rem 0 0;
max-width: 44ch;
font: 600 clamp(var(--fs-lead), 1rem + .6vw, 1.5rem)/1.4 var(--font-text);
color: var(--text-soft);
}
/* ---------- Weitere Kennzahlen als Streifen ----------
Unter der Zahl statt rechts daneben. auto-fit verteilt 1 bis 3 Werte auf
gleich breite Spalten über die volle Breite; bei 375 px wird daraus eine
Spalte. 12rem Mindestbreite hält „35.076.799“ bei 768 px in der Zelle.
Die DOM-Reihenfolge bleibt dt vor dd (Screenreader lesen „Follower und
Abonnenten: 300.000“); der Wert steht optisch über dem Label. */
.proof__more {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
column-gap: var(--gap);
margin: clamp(2rem, 4vw, 3.5rem) 0 0;
}
.proof__more-row {
display: grid;
grid-template-columns: minmax(0, 1fr);
align-content: start;
padding-block: 1rem;
border-top: 1px solid var(--line);
}
.proof__more-row dd {
grid-row: 1;
margin: 0;
font: 820 clamp(1.75rem, 1rem + 2vw, 2.75rem)/1 var(--font-display);
font-stretch: 100%;
font-variant-numeric: tabular-nums lining-nums;
color: var(--text);
}
/* Silbentrennung nur schmal (02-base.css); breiter bricht das Label an
Wortgrenzen. overflow-wrap bleibt die letzte Sicherung. */
.proof__more-row dt {
grid-row: 2;
margin: .5rem 0 0;
max-width: 30ch;
font: 400 1rem/1.4 var(--font-text);
color: var(--text-soft);
overflow-wrap: anywhere;
}
@media (min-width: 48rem) {
.proof__more-row {
padding-block: 1.25rem 0;
}
}
/* ---------- Kanal-Zeilen ---------- */
.channels {
list-style: none;
margin: 0;
padding: 0;
}
.proof__lead + .channels {
margin-top: clamp(3rem, 6vw, 5rem);
}
.channel-row {
row-gap: 1.25rem;
padding-block: clamp(1.25rem, 2.2vw, 1.75rem);
border-top: 1px solid var(--line);
}
/* FIX: Rasterkinder mit langem Inhalt dürfen ihre Spalte nicht aufdrücken
(früher min-width: 0 an .channels__summary-item). */
.channel-row > * {
min-width: 0;
}
/* Kopf: Avatar links (nur mit Beitragsbild), Bauchbinde, Nische und
Startdatum untereinander. Ohne Bild fällt die Avatarspalte weg. */
.channel-row__head {
display: grid;
grid-template-columns: 3.5rem minmax(0, 1fr);
column-gap: 1rem;
align-items: center;
align-self: start;
}
.channel-row__head--plain {
grid-template-columns: minmax(0, 1fr);
}
/* Ring in der Akzentfarbe des Kanals (ACF), sonst in der Markenfarbe.
Der Ring ist Dekoration, keine UI-Grenze. */
.channel-row__avatar {
display: block;
width: 3.5rem;
height: 3.5rem;
border: 2px solid var(--accent, var(--mark));
border-radius: var(--r-round);
object-fit: cover;
}
.channel-row__niche,
.channel-row__since {
grid-column: 2;
}
.channel-row__head--plain :is(.channel-row__niche, .channel-row__since) {
grid-column: 1;
}
.channel-row__niche {
margin: .625rem 0 0;
font: 400 .9375rem/1.5 var(--font-text);
color: var(--text-soft);
}
/* Startdatum: Datum in Plex Mono 13 px (echte Daten), Bezeichnung dahinter.
Im DOM steht dt vor dd wie bei den Kennzahlen, optisch das Datum zuerst. */
.channel-row__since {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0 .5rem;
margin: .25rem 0 0;
}
.channel-row__since dd {
order: -1;
margin: 0;
font: 500 var(--fs-mono)/1.5 var(--font-mono);
letter-spacing: .02em;
color: var(--text);
}
.channel-row__since dt {
font: 400 .875rem/1.5 var(--font-text);
color: var(--text-soft);
}
/* Plattformliste: Linien nur zwischen den Plattformen. Die erste Zeile
beginnt auf der Oberkante der Kanalzeile, eine zweite Linie direkt unter
der Zeilenlinie wirkte doppelt. */
.channel-row__platforms {
list-style: none;
margin: 0;
padding: 0;
align-self: start;
}
.channel-row__platform {
display: grid;
grid-template-columns: 1.25rem minmax(0, 1fr) auto;
column-gap: .75rem;
align-items: center;
min-height: 2.75rem;
}
.channel-row__platform + .channel-row__platform {
border-top: 1px solid var(--line);
}
.channel-row__platform svg {
display: block;
width: 1rem;
height: 1rem;
color: var(--text-soft);
}
/* Netzwerkname als Link zum Profil: Textfarbe plus Unterstreichung (nicht
nur Farbe als Signal). Die Fläche füllt die 44 px hohe Zeile, damit die
Zielgröße auch für den kurzen Text „TikTok“ reicht.
Das frühere Inline-Style text-decoration:none entfällt. */
.channel-row__network {
display: flex;
align-items: center;
align-self: stretch;
min-height: 2.75rem;
font: 400 .9375rem/1.3 var(--font-text);
color: var(--text);
}
a.channel-row__network {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: .2em;
}
a.channel-row__network:hover {
color: var(--text);
text-decoration-thickness: 2px;
}
.channel-row__followers {
font: 500 .9375rem/1.3 var(--font-mono);
letter-spacing: .02em;
font-variant-numeric: tabular-nums;
color: var(--text);
white-space: nowrap;
}
/* Kennzahlen (Aufrufe, stärkstes Video) in jeder Breite nebeneinander.
grid-auto-flow: column verteilt 1 oder 2 Werte auf gleich breite Spalten,
ohne leere Zellen zu reservieren. */
.channel-row__stats {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
column-gap: 1rem;
align-self: start;
margin: 0;
}
.channel-row__stat {
display: grid;
align-content: start;
min-width: 0;
}
.channel-row__stat dd {
grid-row: 1;
margin: 0;
font: 720 1.25rem/1.2 var(--font-display);
font-stretch: 100%;
font-variant-numeric: tabular-nums lining-nums;
color: var(--text);
overflow-wrap: anywhere;
}
.channel-row__stat dt {
grid-row: 2;
margin-top: .25rem;
font: 400 .875rem/1.35 var(--font-text);
color: var(--text-soft);
overflow-wrap: anywhere;
}
/* Tablet: Kopf über volle Breite, darunter Plattformen und Kennzahlen
nebeneinander. .grid-12 ist hier noch einspaltig und wird überschrieben. */
@media (min-width: 48rem) and (max-width: 61.99rem) {
.channel-row {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: clamp(2rem, 5vw, 3rem);
}
.channel-row__head {
grid-column: 1 / -1;
}
.channel-row__platforms {
grid-column: 1;
}
.channel-row__stats {
grid-column: 2;
}
}
/* Desktop: Kopf 1–4, Plattformen 5–8, Kennzahlen 9–12. Fehlt die
Plattformliste oder fehlen Kennzahlen, bleiben die übrigen Blöcke in ihrer
Spalte, damit mehrere Kanäle untereinander vergleichbar ausgerichtet sind.
Die Kennzahlen rücken mit ihrer Wertzeile auf die Mitte der ersten
Plattformzeile (2.75rem hoch, Wert 1.25rem × 1.2). */
@media (min-width: 62rem) {
.channel-row__head {
grid-column: 1 / 5;
}
.channel-row__platforms {
grid-column: 5 / 9;
}
.channel-row__stats {
grid-column: 9 / 13;
padding-top: .625rem;
}
}
/* ---------- Fazit, Button, Hinweis ---------- */
.proof__close {
row-gap: 1.5rem;
margin-top: clamp(2.5rem, 5vw, 4rem);
}
/* FIX: Unter 48rem 17 px wie .section__intro (4.3: „375 px … Intro 17 px“).
Vorher lief das Fazit bei 375 px in 20 px über 11 bis 12 Zeilen und stand
über dem Intro. Die 1.25rem aus 6.5 gelten ab 48rem, wo auch das Intro auf
--fs-lead wächst. */
.proof__conclusion {
margin: 0;
max-width: 60ch;
font: 400 var(--fs-body)/var(--lh-body) var(--font-text);
color: var(--text);
}
/* 375 px: Button über die volle Breite über .btn--block aus 10-buttons.css
(Klasse im Markup, Regel für Sektions-CTAs). Ab 48rem steht er in
natürlicher Breite. :where hält die Spezifität bei einer Klasse, das
Innenleben des Buttons (Label, Segment) bleibt allein Sache von F. */
@media (min-width: 48rem) {
.proof__conclusion {
font-size: 1.25rem;
}
.proof__cta :where(.btn--block) {
display: inline-flex;
width: auto;
}
}
/* FIX: Der Button in Spalte 9–12 begann bei Spalte 9 und endete irgendwo
davor; er fluchtete mit keiner Kante. Jetzt schließt er rechts an der
Containerkante ab, wie die Sektions-CTAs in pain_points und services. */
@media (min-width: 62rem) {
.proof__conclusion {
grid-column: 1 / 8;
}
.proof__cta {
grid-column: 9 / 13;
align-self: end;
justify-content: flex-end;
}
.proof__cta:only-child {
grid-column: 1 / -1;
}
}
.proof__disclaimer {
margin: 2rem 0 0;
max-width: 70ch;
font: 400 .875rem/1.6 var(--font-text);
color: var(--text-soft);
}
/* ---------- Kompaktfassung (.proof--compact) ----------
ABWEICHUNG von 6.5 (Art-Director-Befund Runde 2 „channel_proof bis zur
Abnutzung wiederholt“): Außer auf Startseite und /unsere-kanaele/ steht der
Beleg als Kompaktfassung (Begründung in channel_proof.php). Aufbau ab 62rem:
Kopf gestapelt in den Spalten 1 bis 7, die Leitzahl in 8 bis 12 auf der
Unterkante des Kopfs, darunter die stärkste Kanalzeile über die volle
Breite, zum Schluss Hinweis links und Button rechts in einer Zeile.
Darunter alles untereinander. Die Leitzahl bleibt die laute Stelle der
Sektion, aber nicht mehr plakatbreit: Sie rechnet ihre Größe weiter über
die Stufenklasse aus der eigenen Spaltenbreite (cqi). */
.proof__top {
row-gap: clamp(2rem, 4vw, 2.5rem);
align-items: end;
}
.proof__top > * {
grid-column: 1 / -1;
min-width: 0;
}
/* Der Abstand zum Inhalt kommt vom Raster, nicht vom Kopf. */
.proof__top-head > :where(.section__header) {
margin-bottom: 0;
}
/* Kompakt mit Obergrenze 7rem statt 20rem: Neben dem Kopf bleibt die Zahl
die lauteste Stelle, ohne zum Plakat zu werden (bei 375 px greift ohnehin
die Spaltenbreite). */
@supports (width: 1cqi) {
.proof--compact .proof__lead-value {
font-size: min(7rem, calc(100cqi / var(--proof-fit, 4.9)));
}
}
.proof--compact .proof__lead-label {
margin-top: .5rem;
font-size: var(--fs-lead);
}
@media (min-width: 62rem) {
.proof__top-head {
grid-column: 1 / 8;
}
.proof__top > .proof__lead {
grid-column: 8 / -1;
}
/* Ohne Kopf steht die Zahl links. */
.proof__top--solo > .proof__lead {
grid-column: 1 / 8;
}
}
.proof__top + .channels {
margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
/* Eine einzelne Zeile schließt unten mit derselben Linie ab, mit der sie
oben beginnt: So steht sie als Registerzeile, nicht als Rest einer Tabelle. */
.channels--single {
border-bottom: 1px solid var(--line);
}
/* Mittig statt auf der Grundlinie: Bricht der Textlink neben einem langen
Button in eine zweite Zeile, bleibt der Hinweis trotzdem auf den Block
bezogen. */
.proof--compact .proof__close {
align-items: center;
margin-top: clamp(1.5rem, 3vw, 2rem);
}
.proof--compact .proof__disclaimer {
margin: 0;
}
/* Zweiter Weg zu allen Kanälen neben einem Button, der zum Erstgespräch
führt: Textlink mit Pfeil, 44 px hohe Trefferfläche. */
.proof__cta {
align-items: center;
column-gap: 1.5rem;
}
.proof__all {
min-height: 2.75rem;
}
@media (min-width: 62rem) {
.proof--compact .proof__disclaimer {
grid-column: 1 / 7;
}
/* Hinweis und Button teilen die Zeile, der Button steht rechts. Ab
Spalte 7, damit Button und Textlink bei 1440 px nebeneinander passen. */
.proof--compact .proof__cta {
grid-column: 7 / -1;
}
}
/* Listen-Einblendung (Inventar 7.3, Nr. 3): .channel-row und .proof__lead
tragen data-reveal. Ausgangszustand und Übergang liefert 90-motion.css (F)
nur unter html.smm-motion; eigene transitions an diesen Elementen gibt es
deshalb bewusst nicht. */
/* ===== 53-process.css ===== */
/* =========================================================================
53 · process: Schnitt-Spur mit Playhead (Spezifikation 5.6, 6.9)
Besitz: Team C. Signatur der Sektion ist die Spur selbst.
Grundzustand ist die vertikale Spur. Sie ist ohne JavaScript, ohne
animation-timeline und bei reduzierter Bewegung vollständig lesbar.
Horizontal wird sie nur über die Modifier aus process.php:
.timeline-wrap--cols 2 bis 4 Schritte, ab 62rem
.timeline-wrap--cols-wide 5 Schritte, ab 75rem
1 Schritt und 6+ Schritte bleiben vertikal (keine gestauchten Spalten).
Horizontal zeigt die Spur im Ruhezustand ihr Schlussbild (Clips gefüllt,
Playhead am Ende); unter html.smm-motion läuft der Playhead einmal durch
(Block „Playhead“ unten).
========================================================================= */
.timeline-wrap {
/* Höhe des Playheads: Lineal 10px, Abstand 6px, Clip-Reihe 3rem. */
--tl-head: calc(10px + 6px + 3rem);
/* Durchlauf: 450 ms je Clip, Start kurz nach der Listen-Einblendung. */
--tl-run: calc(var(--steps, 4) * 450ms);
--tl-lead: 240ms;
position: relative;
}
.timeline {
/* Schrittabstand (6.9: 2rem) als lokale Variable, weil die Spurlinie
ihn überbrücken muss (siehe .timeline__step::before). */
--tl-gap: 2rem;
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--tl-gap);
}
/* Vertikale Spur: 2px-Linie links, der Clip steht als Inline-Tafel daneben. */
.timeline__step {
position: relative;
min-width: 0;
padding-inline-start: 1.75rem;
}
.timeline__step::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: .5rem;
width: 2px;
background: var(--line);
}
/* ABWEICHUNG: 5.6 zieht die Linie „über die volle Höhe“ des li. Hier
reichen Linie und Füllung durch den Schrittabstand bis zum nächsten
Schritt. Mit 2rem Lücke zerfiel die Spur in einzelne Balken links an
jedem Textblock, die wie Akzentleisten wirkten (9.6), statt als eine
durchgehende Spur. Der letzte Schritt endet an seinem Text. Gilt auch
für ::after aus dem @supports-Block unten (höhere Spezifität); scaleY mit
transform-origin top füllt Schritt und Abstand dann gemeinsam.
Horizontal setzen die Modifier content: none, dort wirkt die Regel
nicht. */
.timeline__step:not(:last-child)::before,
.timeline__step:not(:last-child)::after {
bottom: calc(-1 * var(--tl-gap));
}
/* Clip: Nummer und Dauer sind echter Text (ol-Semantik bleibt).
Abweichung von 5.6: Die Spezifikation setzt line-height 1 und eine feste Höhe. Lange
Dauern wie „vor dem Termin, ohne dein Zutun“ brechen in schmalen Spalten
aber um; mit Zeilenhöhe 1 kleben die Zeilen aneinander, mit fester Höhe
laufen sie aus der Tafel. Deshalb min-height, 1.25 und etwas Innenabstand.
ABWEICHUNG: 5.6 setzt alle Clips in Plex Mono, die Nachträge dort
stellten einzelne Angaben in Worten auf Schibsted. In einer Spur standen
dadurch zwei Schriften nebeneinander („30 Minuten“ neben „laufend, Bericht
monatlich“), das wirkte unfertig. Jetzt hat jede Spur genau eine Schrift:
Grundfall ist Schibsted 600 für Nummer und Label. Nur wenn jede Dauer
der Spur eine echte Zeitangabe ist, setzt process.php --timecode, dann
steht die ganze Spur in Plex Mono (Regel 1.3). Tabellarische Ziffern
trägt die Nummer (.timeline__no): Die Schnittkante steht so in jedem
Clip an derselben Stelle. Im Label bleiben sie aus, Schibsted setzt mit
tnum auch das Komma auf Ziffernbreite („laufend , Bericht“). */
.timeline__clip {
display: inline-flex;
/* .625rem statt .75rem: Die Schnittkante an der Nummer bringt eigenen
Innenabstand mit, der Clip wird dadurch nicht breiter. */
gap: .625rem;
align-items: center;
max-width: 100%;
min-height: 2.25rem;
padding: .375rem .875rem;
background: var(--clip-bg);
color: var(--clip-fg);
border-radius: 2px;
font: 600 var(--fs-xs)/1.25 var(--font-text);
}
.timeline-wrap--timecode .timeline__clip {
font: 500 var(--fs-mono)/1.2 var(--font-mono);
letter-spacing: .02em;
}
.timeline__no {
flex: none;
color: var(--text-soft);
font-variant-numeric: tabular-nums lining-nums;
}
/* ABWEICHUNG: 5.6 trennt Nummer und Dauer nur durch .75rem. In derselben
Mono-Schrift lasen sie sich als eine Angabe („1 1 bis 2 Wochen“,
„3 30 Minuten“). Eine Schnittkante trennt sie. Sie nimmt die
Schriftfarbe (currentColor) und geht dadurch in jedem Zustand mit:
ungefüllt, gefüllt, auf Studio und im Kontrastmodus. Nur wenn
eine Dauer folgt. */
.timeline__no:not(:last-child) {
padding-inline-end: .625rem;
border-inline-end: 1px solid;
}
/* 6.9: Ohne Dauer steht nur die Nummer. Größer, damit der Clip nicht wie
ein leerer Platzhalter mit winziger Ziffer wirkt.
Farbe bewusst nur inherit: Eine feste Farbe kippte im gefüllten Clip
den Kontrast (Tinte auf #156A72 = 2,75:1). */
.timeline__no:only-child {
font-size: 1rem;
color: inherit;
}
.timeline__dur {
min-width: 0;
overflow-wrap: anywhere;
}
/* Optionales Bild: 3:2, Radius 2px, bewusst ohne Sucherrahmen-Marken. */
.timeline__media {
margin-top: 1rem;
max-width: 36rem;
}
.timeline__media img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 3 / 2;
object-fit: cover;
border-radius: 2px;
}
.timeline__title {
margin: .875rem 0 0;
font: 700 1.25rem/1.2 var(--font-display);
color: var(--text);
/* Keine Einzelwort-Zeile („Reportings“, „André“), auch in den
schmalen Spalten der horizontalen Spur. */
text-wrap: balance;
}
.timeline__text {
margin: .5rem 0 0;
max-width: 58ch;
font: 400 1rem/1.6 var(--font-text);
color: var(--text-soft);
}
.timeline__ruler,
.timeline__playhead {
display: none;
}
.process__cta {
margin-top: 3rem;
}
/* Sektions-CTA (einheitlich für alle Sektionen): btn--lg, unter 48rem in
voller Breite (btn--block im Markup), ab 48rem in natürlicher Breite wie
pain_points, text_media, hero und cta_band. Vorher endete der Button bei
375 px je nach Labellänge 5 px vor der Satzkante. :where hält die
Spezifität bei einer Klasse, die Reihenfolge im Build (53 nach 10)
entscheidet. */
@media (min-width: 48rem) {
.process__cta :where(.btn--block) {
display: inline-flex;
width: auto;
}
}
/* Befund sektions-cta-dichte-ausrichtung: Schließt ein Sektions-CTA eine
vollbreite Reihe ab (pain_points, channel_proof, services, process,
comparison, video_testimonials, cases), steht er ab 62rem rechtsbündig an
der Containerkante. Vorher sprang der Button auf Seiten wie
kundenstimmen-video von Sektion zu Sektion zwischen rechts und links.
CTAs in einer Textspalte (hero, text_media, cta_band) bleiben an deren
Textkante. ABWEICHUNG von 6.9 (dort „linksbündig“), Regel in 4.5. */
@media (min-width: 62rem) {
.process__cta {
justify-content: flex-end;
}
}
@media (min-width: 48rem) {
.timeline__title {
font-size: 1.375rem;
}
}
/* ---------- Horizontal: 2 bis 4 Schritte ab 62rem ---------- */
@media (min-width: 62rem) {
.timeline-wrap--cols .timeline {
grid-template-columns: repeat(var(--steps), minmax(0, 1fr));
column-gap: 4px;
row-gap: 0;
}
.timeline-wrap--cols .timeline__ruler {
display: block;
height: 10px;
margin-bottom: 6px;
background: repeating-linear-gradient(to right, var(--line-ui) 0 1px, transparent 1px 1.5rem);
}
.timeline-wrap--cols .timeline__step {
padding-inline-start: 0;
}
.timeline-wrap--cols .timeline__step::before,
.timeline-wrap--cols .timeline__step::after {
content: none;
}
.timeline-wrap--cols .timeline__clip {
display: flex;
min-height: 3rem;
background: var(--clip-on-bg);
color: var(--clip-on-fg);
}
.timeline-wrap--cols .timeline__no {
color: inherit;
}
/* Playhead im Ruhezustand: am Ende der Spur (siehe Block „Playhead“). */
.timeline-wrap--cols::after {
content: "";
position: absolute;
z-index: var(--z-raised);
top: -4px;
right: -4px;
width: 10px;
height: calc(4px + var(--tl-head));
background:
linear-gradient(var(--playhead) 0 0) left top / 10px 10px no-repeat,
linear-gradient(var(--playhead) 0 0) 4px top / 2px 100% no-repeat;
pointer-events: none;
}
.timeline-wrap--cols .timeline__media {
max-width: none;
}
.timeline-wrap--cols .timeline__title {
margin-top: 1.5rem;
padding-inline-end: 1.5rem;
}
.timeline-wrap--cols .timeline__text {
padding-inline-end: 1.5rem;
}
}
/* Gemeinsames Zeilenraster der Spalten: Clip, Bild, Titel und Text liegen
je Zeile auf einer Höhe. Ein zweizeiliger Titel („Veröffentlichung und
Auswertung“) schob seinen Text sonst rund 26 px tiefer als die Nachbarn,
unter der strengen Clip-Reihe entstand eine Stufe. Ohne subgrid bleibt es
beim bisherigen Satz untereinander. */
@supports (grid-template-rows: subgrid) {
@media (min-width: 62rem) {
.timeline-wrap--cols .timeline__step {
display: grid;
grid-row: span 4;
grid-template-rows: subgrid;
row-gap: 0;
}
.timeline-wrap--cols .timeline__clip {
grid-row: 1;
}
.timeline-wrap--cols .timeline__media {
grid-row: 2;
}
/* Titel unten in ihrer Zeile: Jeder Titel bleibt direkt über seinem
Text, die Titel enden auf einer Linie, die Texte beginnen auf einer.
Der Ausgleich fällt in den Abstand unter der Clip-Reihe. */
.timeline-wrap--cols .timeline__title {
grid-row: 3;
align-self: end;
}
.timeline-wrap--cols .timeline__text {
grid-row: 4;
}
}
}
/* ---------- Horizontal: 5 Schritte erst ab 75rem ---------- */
@media (min-width: 75rem) {
.timeline-wrap--cols-wide .timeline {
grid-template-columns: repeat(var(--steps), minmax(0, 1fr));
column-gap: 4px;
row-gap: 0;
}
.timeline-wrap--cols-wide .timeline__ruler {
display: block;
height: 10px;
margin-bottom: 6px;
background: repeating-linear-gradient(to right, var(--line-ui) 0 1px, transparent 1px 1.5rem);
}
.timeline-wrap--cols-wide .timeline__step {
padding-inline-start: 0;
}
.timeline-wrap--cols-wide .timeline__step::before,
.timeline-wrap--cols-wide .timeline__step::after {
content: none;
}
.timeline-wrap--cols-wide .timeline__clip {
display: flex;
min-height: 3rem;
background: var(--clip-on-bg);
color: var(--clip-on-fg);
}
.timeline-wrap--cols-wide .timeline__no {
color: inherit;
}
.timeline-wrap--cols-wide::after {
content: "";
position: absolute;
z-index: var(--z-raised);
top: -4px;
right: -4px;
width: 10px;
height: calc(4px + var(--tl-head));
background:
linear-gradient(var(--playhead) 0 0) left top / 10px 10px no-repeat,
linear-gradient(var(--playhead) 0 0) 4px top / 2px 100% no-repeat;
pointer-events: none;
}
.timeline-wrap--cols-wide .timeline__media {
max-width: none;
}
.timeline-wrap--cols-wide .timeline__title {
margin-top: 1.5rem;
padding-inline-end: 1.5rem;
}
.timeline-wrap--cols-wide .timeline__text {
padding-inline-end: 1.5rem;
}
}
/* Gemeinsames Zeilenraster der Spalten: Clip, Bild, Titel und Text liegen
je Zeile auf einer Höhe. Ein zweizeiliger Titel („Veröffentlichung und
Auswertung“) schob seinen Text sonst rund 26 px tiefer als die Nachbarn,
unter der strengen Clip-Reihe entstand eine Stufe. Ohne subgrid bleibt es
beim bisherigen Satz untereinander. */
@supports (grid-template-rows: subgrid) {
@media (min-width: 75rem) {
.timeline-wrap--cols-wide .timeline__step {
display: grid;
grid-row: span 4;
grid-template-rows: subgrid;
row-gap: 0;
}
.timeline-wrap--cols-wide .timeline__clip {
grid-row: 1;
}
.timeline-wrap--cols-wide .timeline__media {
grid-row: 2;
}
/* Titel unten in ihrer Zeile: Jeder Titel bleibt direkt über seinem
Text, die Titel enden auf einer Linie, die Texte beginnen auf einer.
Der Ausgleich fällt in den Abstand unter der Clip-Reihe. */
.timeline-wrap--cols-wide .timeline__title {
grid-row: 3;
align-self: end;
}
.timeline-wrap--cols-wide .timeline__text {
grid-row: 4;
}
}
}
/* ---------- Scroll-getriebene Linie der vertikalen Spur (Inventar 7.3, Nr. 5)
Nur mit animation-timeline und ohne reduzierte Bewegung. Fallback: graue
Linie. Playhead und Clip-Füllung der horizontalen Spur siehe unten. */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
/* Vertikal: Die Linie füllt sich je Schritt von oben. Die benannte
Timeline am li ist robuster als view() direkt am Pseudo-Element. */
.timeline__step {
view-timeline-name: --tl-step;
}
.timeline__step::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: .5rem;
width: 2px;
background: var(--clip-on-bg);
transform-origin: top;
animation: tl-rail linear both;
animation-timeline: --tl-step;
animation-range: entry 40% cover 50%;
}
}
}
/* ---------- Playhead (Befund „Spur-Elemente wirken unfertig“) ----------
ABWEICHUNG: 5.6 und Inventar 7.3 Nr. 4 koppeln Playhead und Clip-Füllung
an die Scrollposition. Im Ruhezustand eines Screenshots und in Browsern
ohne animation-timeline blieb davon nur ein Quadrat am Anfang des Lineals
stehen. Jetzt läuft der Playhead einmal durch die Spur:
- Ruhezustand (ohne JS, ohne IntersectionObserver, reduzierte Bewegung):
Der Playhead steht am Ende der Spur (::after an .timeline-wrap), alle
Clips sind gefüllt. Das ist das Schlussbild des Durchlaufs.
- html.smm-motion: Bis die Spur ins Bild kommt, steht der Playhead
(.timeline__playhead) am Anfang, die Clips sind leer. Mit is-revealed
(30-reveal.js, data-reveal an .timeline-wrap) fährt er in 450 ms je
Clip linear ans Ende. Jeder Clip wechselt hart auf --clip-on, wenn der
Playhead seine Vorderkante erreicht (Übergang 0 s mit Verzögerung,
kein Zwischenzustand, 5.6 Barrierefreiheit).
Animiert wird nur transform, die Füllung ist ein harter Farbwechsel (7.1).
Das ::after bleibt vom Netz in 90-motion.css unberührt, das dort
.timeline__playhead unter reduce ausblendet; so steht der Playhead auch
dann am Ende. Der Playhead liegt mit --z-raised über den Schritten, die
während der Einblendung einen transform tragen. */
@media (prefers-reduced-motion: no-preference) and (min-width: 62rem) {
html.smm-motion .timeline-wrap--cols {
container-type: inline-size;
}
html.smm-motion .timeline-wrap--cols::after {
content: none;
}
html.smm-motion .timeline-wrap--cols .timeline__playhead {
display: block;
position: absolute;
z-index: var(--z-raised);
top: -4px;
left: -4px;
width: 10px;
height: calc(4px + var(--tl-head));
background:
linear-gradient(var(--playhead) 0 0) left top / 10px 10px no-repeat,
linear-gradient(var(--playhead) 0 0) 4px top / 2px 100% no-repeat;
pointer-events: none;
transform: translateX(calc(100cqw - 2px));
}
html.smm-motion .timeline-wrap--cols:not(.is-revealed) .timeline__playhead {
transform: none;
}
/* Übergang nur im Zustand is-revealed (siehe Clip-Füllung unten). */
html.smm-motion .timeline-wrap--cols.is-revealed .timeline__playhead {
transition: transform var(--tl-run) linear var(--tl-lead);
}
html.smm-motion .timeline-wrap--cols:not(.is-revealed) .timeline__clip {
background-color: var(--clip-bg);
color: var(--clip-fg);
}
}
@media (prefers-reduced-motion: no-preference) and (min-width: 75rem) {
html.smm-motion .timeline-wrap--cols-wide {
container-type: inline-size;
}
html.smm-motion .timeline-wrap--cols-wide::after {
content: none;
}
html.smm-motion .timeline-wrap--cols-wide .timeline__playhead {
display: block;
position: absolute;
z-index: var(--z-raised);
top: -4px;
left: -4px;
width: 10px;
height: calc(4px + var(--tl-head));
background:
linear-gradient(var(--playhead) 0 0) left top / 10px 10px no-repeat,
linear-gradient(var(--playhead) 0 0) 4px top / 2px 100% no-repeat;
pointer-events: none;
transform: translateX(calc(100cqw - 2px));
}
html.smm-motion .timeline-wrap--cols-wide:not(.is-revealed) .timeline__playhead {
transform: none;
}
/* Übergang nur im Zustand is-revealed (siehe Clip-Füllung unten). */
html.smm-motion .timeline-wrap--cols-wide.is-revealed .timeline__playhead {
transition: transform var(--tl-run) linear var(--tl-lead);
}
html.smm-motion .timeline-wrap--cols-wide:not(.is-revealed) .timeline__clip {
background-color: var(--clip-bg);
color: var(--clip-fg);
}
}
/* Clip-Füllung: harter Wechsel, wenn der Playhead die Vorderkante des Clips
erreicht (Übergang 0 s, Verzögerung nach --i).
- Nur im Zustand is-revealed: Stünde der Übergang auch davor, liefe beim
Setzen von smm-motion der Wechsel gefüllt → leer mit denselben
Verzögerungen, und ein früher Eintritt kehrte ihn halb abgelaufen um.
- Bewusst ohne Breitenabfrage: Kippt die Breite kurz unter 62rem und
zurück (Fenstergröße, Bildschirmfoto über die volle Seitenhöhe), bleibt
der Wechsel zur vertikalen Spur in seiner Verzögerung hängen und wird
beim Zurückkippen verworfen. Mit dem Übergang nur in der breiten Fassung
lief die Füllung dort erneut los, während der Playhead schon am Ende
stand. */
@media (prefers-reduced-motion: no-preference) {
html.smm-motion :is(.timeline-wrap--cols, .timeline-wrap--cols-wide).is-revealed .timeline__clip {
transition:
background-color 0s linear calc(var(--tl-lead) + var(--tl-run) * var(--i, 0) / var(--steps, 4)),
color 0s linear calc(var(--tl-lead) + var(--tl-run) * var(--i, 0) / var(--steps, 4));
}
}
/* Windows-Kontrastmodus ersetzt die Clipfläche durch Canvas. Ein Rand hält
den Clip als Tafel erkennbar, die Spurlinie bekommt Systemfarbe.
FIX: Der Block steht nach @supports, damit er die Linienfüllung sicher
übersteuert. Der Browser erzwingt dort background-color auf Canvas: Die
Füllung (::after) malte sich deshalb deckend über die Linie, und
CanvasText als Hintergrund der Linie selbst wurde ebenfalls zu Canvas.
Die Füllung entfällt, forced-color-adjust none hält die Linie sichtbar. */
@media (forced-colors: active) {
.timeline__clip {
border: 1px solid CanvasText;
}
.timeline__step::before {
forced-color-adjust: none;
background: CanvasText;
}
.timeline__step::after {
content: none;
}
/* Playhead in Systemfarbe; Hintergrundbilder behalten sonst die
Tintenfarbe, die auf dunklem Canvas verschwände. */
.timeline-wrap::after,
.timeline__playhead {
forced-color-adjust: none;
background:
linear-gradient(CanvasText 0 0) left top / 10px 10px no-repeat,
linear-gradient(CanvasText 0 0) 4px top / 2px 100% no-repeat;
}
}
/* Reduzierte Bewegung: Die Linienfüllung schaltet 90-motion.css (F) zentral
mit animation: none ab (7.1.6), dort wird auch .timeline__playhead
ausgeblendet. Der Durchlauf des Playheads und die Clip-Füllung hängen hier
ohnehin an html.smm-motion und no-preference; ohne sie zeigt die Spur das
Schlussbild (Playhead am Ende als ::after, Clips gefüllt). */
@keyframes tl-rail {
from { transform: scaleY(0); }
to { transform: scaleY(1); }
}
/* Listen-Einblendung (Inventar 7.3, Nr. 3): Die li tragen data-reveal und
data-reveal-delay. Ausgangszustand und Übergang liefert 90-motion.css (F)
nur unter html.smm-motion; deshalb hat .timeline__step hier bewusst keine
eigene transition (Vertrag aus 90-motion.css). */
/* ---------- Schlichte Darstellung (process, style simple) ----------
Loom vom 06.10.2026: Nummer, Titel, kurzer Text. Jede Spalte beginnt
unter einer Haarlinie, die Nummer steht in der Display-Schrift im
Akzent. Ab 62rem alle Schritte nebeneinander (--steps). */
.steps {
list-style-type: "";
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 2rem var(--gap);
margin: 0;
padding: 0;
}
.steps__item {
display: grid;
align-content: start;
gap: .5rem;
padding-top: 1.25rem;
border-top: 1px solid var(--line);
}
.steps__no {
font: 700 clamp(1.75rem, 1.3rem + 1.2vw, 2.25rem)/1 var(--font-display);
font-stretch: 100%;
font-variant-numeric: tabular-nums;
color: var(--accent-text);
}
.steps__title {
margin: .25rem 0 0;
font: 700 var(--fs-h4)/1.25 var(--font-display);
font-stretch: 100%;
color: var(--text);
}
.steps__text {
max-width: 36ch;
margin: 0;
font-size: var(--fs-small);
line-height: 1.55;
color: var(--text-soft);
}
@media (min-width: 48rem) {
.steps {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 62rem) {
.steps {
grid-template-columns: repeat(var(--steps, 4), minmax(0, 1fr));
}
}
/* ===== 54-services.css ===== */
/* =========================================================================
54 · services: Leistungsregister (Spezifikation 6.10)
Besitz: Team C. Markup: template-parts/sections/services.php
Stil „card“ und „list“: eine Registerzeile je Leistung über die volle
Breite. Kein Kartenraster, deshalb keine verwaiste Einzelkarte bei 7
oder 11 Einträgen. Hover und Fokus: Fläche --surface von links,
Trim-Griffe (5.5, von F), Titel +.375rem, Pfeilquadrat gefüllt.
Stil „image“: horizontale Scroll-Snap-Reihe (.register--image).
Varianten der Liste (aus den Daten abgeleitet, kein Feld):
.register jede Zeile ist ein Link mit Pfeilquadrat
.register--static nicht jede Zeile hat ein Ziel: keine Zeilen-Links,
keine Pfeilspalte, vorhandene Links als Textlink
.register--lead ab 5 verlinkten Einträgen: erste Zeile als
Aufmacher (.register__item--lead)
ABWEICHUNG von 6.10: keine Symbolspalte mehr (Begründung in services.php).
Die Zeile benutzt benannte Rasterflächen, damit Titel, Text und Pfeil in
ihrer Spalte bleiben, auch wenn einer Zeile der Text fehlt.
========================================================================= */
.register {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--line);
}
.register__item {
margin: 0;
min-width: 0;
}
/* 375 px (Grundzustand): Titel · Pfeil, Text in Zeile 2 über die volle
Breite. Titelgröße als lokale Variable, weil Pfeilquadrat und Titelzeile
daran ausgerichtet werden. */
.register__link {
--register-title-fs: clamp(1.25rem, 1rem + .8vw, 1.625rem);
--register-title-lh: calc(var(--register-title-fs) * 1.15);
--register-go: 2.75rem;
--notch: var(--surface); /* Kerbe im Trim-Griff passt zur Hover-Fläche */
position: relative;
isolation: isolate;
display: grid;
grid-template-columns: minmax(0, 1fr) var(--register-go);
grid-template-areas:
"title go"
"text text";
align-items: start;
column-gap: .75rem;
padding: 1.25rem .25rem;
border-bottom: 1px solid var(--line);
color: var(--text);
text-decoration: none;
}
/* FIX: Früher wurde die Hover-Fläche hell eingefärbt und der Text blieb
var(--text) – auf dunklen Abschnitten also Weiß auf Hell, unlesbar. Die
Fläche ist jetzt --surface und kippt mit dem Theme, der Text bleibt lesbar. */
.register__link::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--surface);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--dur-2) var(--ease-cut);
}
.register__title {
grid-area: title;
font: 700 var(--register-title-fs)/1.15 var(--font-display);
font-stretch: 100%;
color: var(--text);
transition: transform var(--dur-1) var(--ease-cut);
}
/* FIX: Zeilenrhythmus mobil. Früher zentrierte eine Mindesthöhe der ersten
Zeile den Titel auf das Pfeilquadrat: Einzeilige Titel standen 17 px über
dem Text, zweizeilige klebten mit 6 px daran. Jetzt steht der Text immer
gleich weit unter dem Titel; das Pfeilquadrat sitzt auf der Mitte der
ersten Titelzeile und ragt nach unten über, daher 1rem Abstand. */
.register__text {
grid-area: text;
margin-top: 1rem;
font: 400 1rem/1.55 var(--font-text);
color: var(--text-soft);
}
/* Rahmen in --line-ui (≥3:1). Auf Sektion teal setzt 00-tokens.css den Wert
auf #D5E4E6 (4,82:1 auf #156A72), eine eigene Überschreibung entfällt.
Der negative Rand oben und unten zählt das Quadrat nur mit der Höhe einer
Titelzeile, zentriert auf deren Mitte. */
.register__go {
grid-area: go;
display: grid;
place-items: center;
width: var(--register-go);
height: var(--register-go);
margin-block: calc((var(--register-title-lh) - var(--register-go)) / 2);
border-radius: var(--r-control);
box-shadow: inset 0 0 0 1.5px var(--line-ui);
color: var(--text);
transition: background-color var(--dur-1) var(--ease-cut), color var(--dur-1) var(--ease-cut);
}
.register__go svg {
display: block;
width: 18px;
height: 18px;
}
/* Windows-Kontrastmodus entfernt box-shadow und Hintergründe: Das
Pfeilquadrat bekommt einen echten Rand, damit es als Einheit sichtbar bleibt. */
@media (forced-colors: active) {
.register__go {
border: 1px solid CanvasText;
}
}
/* Statisches Register: Titel, Text, Textlink untereinander, keine
Pfeilspalte. Der Abstand Titel–Text ist kleiner, weil kein Quadrat
überragt. */
.register--static .register__link {
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"title"
"text"
"more";
}
.register--static .register__text {
margin-top: .5rem;
}
.register__more {
grid-area: more;
justify-self: start;
margin-top: .625rem;
}
/* Leistungstitel trennen nicht (Befund silbentrennung-leistungstitel:
„vorhan-/denem“ auf reels-agentur bei 375 px). Ein Titel ist eine
Überschrift, keine Fließtextzeile; wie bei H1 bis H3 (02-base.css) brechen
Bindestrich-Komposita wie „Kundenstimmen-Video“ weiter am Strich.
manual ist der Startwert und steht hier ausdrücklich, weil die Zeile
vorher unter 30rem trennte. Eine kleinere Schrift ist nicht nötig: Gemessen
auf allen Seiten von 320 bis 479 px ist das breiteste Einzelwort
(„Straßenumfragen“ auf ugc-agentur, „Fahrtkostenzuschuss“ auf karriere)
bei 320 px höchstens 76 % der Titelspalte breit. overflow-wrap: anywhere
bleibt als letzte Sicherung für ein längeres Wort aus der Redaktion
(29.99rem wie in 02-base.css, damit bei 480 px nur eine Stufe gilt). */
.register__title {
-webkit-hyphens: manual;
hyphens: manual;
}
@media (max-width: 29.99rem) {
.register__title {
overflow-wrap: anywhere;
}
}
/* Tablet: Pfeilspalte 3rem, Text weiter in Zeile 2. */
@media (min-width: 48rem) {
.register__link {
--register-go: 3rem;
column-gap: 1.5rem;
padding: 1.5rem .75rem;
}
}
/* Desktop: Titel · Text · Pfeil in einer Zeile auf gemeinsamer Grundlinie,
das Pfeilquadrat senkrecht mittig (Spezifikation).
ABWEICHUNG von 6.10 (Befund split-kopf-raster): Statt 4fr/6fr liegt die
Zeile auf dem 12er-Raster des Containers. Der Text beginnt auf Spalte 8,
genau wie das Intro im split-Kopf darüber (05-section-header.css); vorher
stand er rund 215 px links davon. Dafür hat die Zeile seitlich kein
Padding mehr (sonst wären die Spalten um 2rem schmaler als die des
Kopfs); der Einzug von 1rem sitzt an Titel und Pfeil. */
@media (min-width: 62rem) {
/* .register--static steht mit, weil dessen Grundregel (einspaltig, zwei
Klassen) die einfache Klasse sonst überstimmt: Titel und Text lagen
dann übereinander. */
.register__link,
.register--static .register__link {
grid-template-columns: repeat(12, minmax(0, 1fr));
grid-template-areas: none;
column-gap: var(--gap);
align-items: baseline;
padding: 1.5rem 0;
}
.register__title {
grid-column: 1 / 8;
grid-row: 1;
padding-inline-start: 1rem;
}
.register__text {
grid-column: 8 / 12;
grid-row: 1;
align-self: baseline;
margin-top: 0;
}
/* Das Quadrat steht rechtsbündig in Spalte 12 und darf bei 62rem (Spalte
rund 55 px) etwas in den Spaltenabstand ragen. */
.register__go {
grid-column: 12 / 13;
grid-row: 1;
justify-self: end;
align-self: center;
margin-block: 0;
margin-inline-end: 1rem;
}
.register--static .register__text {
grid-column: 8 / -1;
margin-top: 0;
padding-inline-end: 1rem;
}
.register--static .register__more {
grid-column: 8 / -1;
grid-row: 2;
}
}
/* ---------- Hover, Fokus, Antippen (Inventar 7.3, Nr. 7) ----------
FIX: Auf Touchgeräten bleibt :hover nach dem Antippen „kleben“; die Zeile
sähe danach dauerhaft ausgewählt aus. Wie beim Trim in 14-trim.css (F)
hängen Fläche, Pfeilquadrat und Titelverschiebung deshalb nur mit echtem
Zeiger an :hover. Fläche und Pfeil erscheinen immer bei :focus-visible und
:active; die Titelverschiebung entfällt unter (hover: none) ganz (6.10).
Das gefüllte Pfeilquadrat ist der Hover-Zustand eines Ghost-Knopfs und
liest deshalb die Ghost-Tokens: Tinte mit weißem Pfeil auf Hell, Weiß mit
Studio-Pfeil auf deep und teal (6.10: #101B1C bzw. #fff). Früher standen
hier Rohfarben plus eine [data-theme="dark"]-Kopie der Regel; über die
Tokens folgt das Quadrat auch der Aufmacherzeile, wenn sie hell wird. */
a.register__link:is(:focus-visible, :active)::before {
transform: scaleX(1);
}
a.register__link:is(:focus-visible, :active) .register__go {
background: var(--ghost-bg-h);
color: var(--ghost-fg-h);
box-shadow: none;
}
@media (hover: hover) {
a.register__link:hover::before {
transform: scaleX(1);
}
a.register__link:is(:hover, :focus-visible) .register__title {
transform: translateX(.375rem);
}
a.register__link:hover .register__go {
background: var(--ghost-bg-h);
color: var(--ghost-fg-h);
box-shadow: none;
}
}
/* Eigener Fokusring: Trim ist nie das einzige Signal (5.5). */
a.register__link:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 2px;
}
/* ---------- Aufmacherzeile ----------
Art-Director-Verbesserung „Leistungsregister mit Aufmacherzeile“: Der
erste Eintrag eines verlinkten Registers mit 5 oder mehr Zeilen steht als
ausgewählter Clip über die volle Breite. Dauerhafte Trim-Griffe
(.is-trimmed, 5.5), Titel in der O-Ton-Stimme (schmal, schwer).
ABWEICHUNG von 6.10 (Art-Director-Befund Runde 2 „Gelber Rahmen um die
Aufmacherzeile“):
- Die Griffe liegen innen in der Fläche (.trim--inset aus 14-trim.css),
links und rechts, ohne Linien oben und unten. Vorher lief Gelb als 2 px
breiter Rahmen außen auf Kreide (Regel 4) und las sich wie ein Fokusrahmen.
- Kein Pfeilsegment über die volle Zeilenhöhe mehr, sondern dasselbe
Pfeilquadrat wie in den Zeilen darunter, innerhalb der Griffe. Die
senkrechte Segmentlinie stand sonst direkt neben dem rechten Griff.
- Titel deutlich größer (bis 4.5rem statt 2.75rem), damit die Zeile als
gewollter Aufmacher liest und nicht als etwas größere Registerzeile. Die
Größe hängt an der Zeilenbreite (cqi), nicht am Viewport: So passt
„Straßenumfragen“ auch bei 320 px in eine Zeile.
Flächen:
.register__item--studio Studio-Dunkel über data-theme="dark" an der
Zeile (Sektion white/mist): Grund --bg,
Hover-Fläche Studio-2, Griffe gelb (9,97:1)
hell --surface (Weiß auf Kreide, Kreide auf Weiß,
Studio-2 auf deep), Griffe in --trim
--register-lead-bg trägt die Fläche, damit Griffkerbe und Grund gleich
bleiben, egal welche Variante greift. */
.register--lead {
border-top: 0;
}
.register__item--lead {
--register-lead-bg: var(--surface);
container-type: inline-size;
}
.register__item--studio {
--register-lead-bg: var(--bg);
}
/* 375 px: Titel und Text über die volle Breite, das Pfeilquadrat rechts
darunter. Neben dem Text blieben bei 320 px nur rund 150 px Satzbreite.
Innenabstand links = Einzug des Griffs (.75rem) + Griff (6 px) + Luft;
rechts hält das Pfeilquadrat denselben Abstand zum rechten Griff. */
.register__item--lead .register__link {
--register-title-fs: clamp(1.75rem, 10.5cqi, 3rem);
--register-title-lh: calc(var(--register-title-fs) * 1.02);
--register-go: 2.75rem;
--notch: var(--register-lead-bg);
--trim-inset-block: .75rem;
--trim-inset-start: .75rem;
--trim-inset-end: .75rem;
grid-template-columns: minmax(0, 1fr) var(--register-go);
grid-template-areas:
"title title"
"text text"
". go";
column-gap: 1rem;
padding: 1.75rem 2rem 1.5rem 2.125rem;
border-bottom: 0;
background: var(--register-lead-bg);
}
/* Die Hover-Fläche wäre auf der hellen Zeile gleich ihrem Grund. Dort
tragen Pfeilquadrat und Titelversatz den Zustand, auf Studio zusätzlich
die Fläche Studio-2. */
.register__item--lead .register__link::before {
content: none;
}
.register__item--studio .register__link::before {
content: "";
}
.register__item--lead .register__title {
font-size: var(--register-title-fs);
font-weight: 850;
font-stretch: var(--w-oton);
line-height: 1.02;
letter-spacing: -.01em;
overflow-wrap: break-word;
}
/* Kein Trennen im Aufmacher: Der Titel ist über cqi so bemessen, dass ein
Wort wie „Straßenumfragen“ auch bei 320 px in die Zeile passt. */
@media (max-width: 29.99rem) {
.register__item--lead .register__title {
-webkit-hyphens: manual;
hyphens: manual;
}
}
.register__item--lead .register__text {
max-width: 48ch;
margin-top: 1rem;
font-size: 1.0625rem;
line-height: 1.6;
}
/* Pfeilquadrat wie in den übrigen Zeilen. */
.register__item--lead .register__go {
margin-block: .75rem 0;
}
.register__item--lead .register__go svg {
width: 20px;
height: 20px;
}
/* Der Fokusring liegt innen, knapp innerhalb der Flächenkante und außerhalb
der Griffe (die bei .75rem Einzug beginnen). Außen stünde er in der
Fokusfarbe der Zeile auf dem Sektionsgrund (Studio-Teal #2FAFAF auf
Kreide 2,4:1). Innen hat er 6,06:1 auf Studio bzw. ≥5,9:1 auf Hell. */
.register__item--lead a.register__link:focus-visible {
outline-offset: -5px;
}
/* Tablet: Titel und Pfeilquadrat in einer Zeile, der Text darunter. */
@media (min-width: 48rem) {
.register__item--lead .register__link {
--register-title-fs: clamp(2.5rem, 8cqi, 4rem);
--register-go: 3.5rem;
--trim-inset-block: 1rem;
--trim-inset-start: 1rem;
--trim-inset-end: 1rem;
grid-template-areas:
"title go"
"text go";
column-gap: 2rem;
padding: 2.25rem 2.5rem 2.25rem 2.75rem;
}
.register__item--lead .register__go {
align-self: center;
margin-block: 0;
}
}
/* Desktop: dasselbe 12er-Raster wie die Zeilen darunter. Der Titel steht in
1 bis 7 (Einzug für den Griff), der Text ab Spalte 8 auf der Kante des
Intros, das Pfeilquadrat rechtsbündig in 12 vor dem rechten Griff. */
@media (min-width: 62rem) {
.register__item--lead .register__link {
/* Die Grundregel der Aufmacherzeile (zwei Klassen) überstimmt sonst
das Raster der einfachen Zeilen, der Text begann dann vor Spalte 8. */
--register-title-fs: clamp(2.75rem, 6cqi, 4.5rem);
--register-go: 3.5rem;
grid-template-columns: repeat(12, minmax(0, 1fr));
grid-template-areas: none;
align-items: center;
column-gap: var(--gap);
padding: clamp(2.25rem, 3.4vw, 3.25rem) 0;
}
.register__item--lead .register__title {
padding-inline-start: 2.75rem;
}
/* Der Text beginnt auf Spalte 8 und reicht bis an die Kante; rechts hält
er Platz für Pfeilquadrat, dessen Abstand zum Griff und einen
Spaltenabstand frei. In Spalte 12 allein passte das Quadrat zwischen
62 und 75rem nicht, der Text lief bei 992 px darunter. */
.register__item--lead .register__text {
grid-column: 8 / -1;
margin-top: 0;
padding-inline-end: calc(var(--register-go) + 2.75rem + var(--gap));
}
.register__item--lead .register__go {
margin-inline-end: 2.75rem;
}
}
/* Hell neben dunklen Abschnitten: Folgt die Sektion direkt auf deep oder
teal, geht ihr direkt voraus oder schließt sie die Seite vor dem dunklen
Footer ab, stünden zwei Studio-Flächen dicht hintereinander (etwa auf
Leistungen direkt unter dem dunklen Hero). Dann erbt die Zeile die Tokens
der Sektion zurück, die sie liest, und steht auf --surface mit Griffen in
--trim (Teal auf Hell). Geprüft wird im CSS, was tatsächlich ausgegeben
wurde: Eine Sektion kann leer bleiben, die Baukasten-Daten allein sagen
nicht, was daneben steht. :where hält die Spezifität bei einer Klasse;
ohne :has() (ältere Browser) bleibt der Nachfolger-Fall Studio. */
:where(
.section--bg-deep + .section--services,
.section--bg-teal + .section--services,
.section--services:has(+ :is(.section--bg-deep, .section--bg-teal)),
.section--services:last-child
) .register__item--studio {
--bg: inherit;
--surface: inherit;
--text: inherit;
--text-soft: inherit;
--line-ui: inherit;
--focus: inherit;
--trim: inherit;
--ghost-bg-h: inherit;
--ghost-fg-h: inherit;
--register-lead-bg: var(--surface);
}
:where(
.section--bg-deep + .section--services,
.section--bg-teal + .section--services,
.section--services:has(+ :is(.section--bg-deep, .section--bg-teal)),
.section--services:last-child
) .register__item--studio .register__link::before {
content: none;
}
/* ---------- Stil „image“: Scroll-Snap-Reihe ----------
Bleibt im Container (kein Anschnitt bis an den Viewportrand). Der Scroller
ist per tabindex="0" mit der Tastatur scrollbar und trägt ein aria-label. */
.register--image {
display: flex;
gap: var(--gap);
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
padding-block: .25rem 1rem;
border-top: 0;
}
.register--image:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 4px;
}
.register__item--image {
position: relative;
flex: 0 0 min(22rem, 85%);
scroll-snap-align: start;
}
.register__media {
margin: 0 0 1rem;
}
.register__media img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 5;
object-fit: cover;
border-radius: var(--r-media);
}
.register__card-title {
margin: 0;
font: 700 1.25rem/1.2 var(--font-display);
font-stretch: 100%;
color: var(--text);
}
.register__item--image .register__text {
display: block;
margin: .5rem 0 0;
}
/* Der Titel-Link ist über den ganzen Eintrag gestreckt. Der Fokusring liegt
deshalb am gestreckten Pseudo-Element, nach innen versetzt, damit der
Scroller ihn nicht abschneidet. */
/* FIX: Linienwerte am Link, Linie in --accent-text wie bei Fallstudien-
Zeile, Post-Karte und Suchtreffer (66, 71, 75); der Zustand schaltet nur
die Linie ein. */
.register__card-link {
color: var(--text);
text-decoration: none;
text-decoration-color: var(--accent-text);
text-decoration-thickness: 2px;
text-underline-offset: .2em;
}
.register__card-link::after {
content: "";
position: absolute;
inset: 0;
border-radius: var(--r-media);
}
/* FIX: Hover nur mit echtem Zeiger (auf Touch bliebe die Linie kleben). */
@media (hover: hover) {
.register__card-link:hover {
text-decoration-line: underline;
}
}
.register__card-link:focus-visible {
outline: none;
text-decoration-line: underline;
}
.register__card-link:focus-visible::after {
outline: 2px solid var(--focus);
outline-offset: -2px;
}
/* ---------- Button unter dem Register ----------
Regel für Sektions-CTAs: btn--lg, unter 48rem btn--block über die volle
Breite, ab 48rem in natürlicher Breite. Ab 62rem rechtsbündig unter der
Liste an der Containerkante (wie pain_points und channel_proof), darunter
linksbündig. :where hält die Spezifität bei einer Klasse. */
.register__cta {
margin-top: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 48rem) {
.register__cta :where(.btn--block) {
display: inline-flex;
width: auto;
}
}
@media (min-width: 62rem) {
.register__cta {
justify-content: flex-end;
}
}
/* ===== 55-stats.css ===== */
/* =========================================================================
55 stats: Kennzahlen mit Walzenzähler (Besitz: Team C1, Spez. 6.8)
Keine Kästen, keine Zentrierung: jede Zahl steht linksbündig unter einer
Haarlinie. Die Walze selbst (.odo, .odo__*) liefert F in 15-odometer.css.
Farben nur über Tokens; auf Sektion teal sind Wert und Label damit weiß,
der Text #D5E4E6 (4,82:1).
FIX aus dem alten Stand: Dort stand der Wert auf teal zuerst in hellem
Teal (#2FAFAF auf #156A72 = 2,36:1). --text kippt jetzt mit dem Grund.
========================================================================= */
/* ---------- Raster ---------- */
/*
* Spaltenzahl nach Anzahl statt auto-fit: auto-fit mit 14rem ergab zwischen
* 62 und 75rem drei Spalten und damit bei vier Werten eine verwaiste vierte
* Zelle (9.9). Die Klasse --count-N setzt das Template.
*
* Der Raster ist Größen-Container. Daraus rechnet .stat__value die Breite
* einer Spalte und begrenzt die Schriftgröße (siehe unten).
*/
.stats__grid {
--stats-cols: 1;
--stats-gap: clamp(1.5rem, 3vw, 3rem);
--stats-fit: 3.5;
container-type: inline-size;
display: grid;
/* FIX: minmax(0, 1fr) statt 1fr, damit keine Zelle vom Inhalt aufgedrückt wird. */
grid-template-columns: repeat(var(--stats-cols), minmax(0, 1fr));
column-gap: var(--stats-gap);
row-gap: 3rem;
/* list-style-type "" statt none: Safari/VoiceOver behält so die Listenrolle. */
list-style-type: "";
margin: 0;
padding: 0;
}
@media (min-width: 48rem) {
.stats__grid--count-2,
.stats__grid--count-4,
.stats__grid--many {
--stats-cols: 2;
}
/* Drei Werte: drei Spalten statt 2 + 1. */
.stats__grid--count-3 {
--stats-cols: 3;
}
}
/* Ungerade Anzahl über vier im Zweier-Raster: Die letzte Zelle nimmt die
ganze Zeile, statt allein neben einem leeren Feld zu stehen. */
@media (min-width: 48rem) and (max-width: 74.99rem) {
.stats__grid--odd > :last-child {
grid-column: 1 / -1;
}
}
@media (min-width: 75rem) {
.stats__grid--count-4 {
--stats-cols: 4;
}
.stats__grid--many {
--stats-cols: 3;
}
/*
* Mehr als vier Werte, deren Anzahl nicht durch drei teilbar ist: Ein
* reiner Dreier-Raster ließe leere Felder (5, 8, 11) oder eine einzelne
* Zelle in der letzten Reihe (7, 10) stehen (9.9). Der Raster bekommt
* deshalb sechs Spuren. Eine Zelle belegt zwei davon (Drittel), die
* letzten Zellen belegen drei (Hälfte):
* Rest 2 (5, 8, 11): die letzten zwei, also eine Zweierreihe am Ende.
* Rest 1 (7, 10): die letzten vier, also zwei Zweierreihen am Ende.
* Eine Drittelzelle ist so breit wie im Dreier-Raster, --stats-cols
* bleibt 3. Die Schriftgröße richtet sich damit nach der schmalsten Zelle
* und ist in der ganzen Sektion gleich. Die Reihenfolge der Zellen bleibt
* die des Markups (keine dichte Platzierung).
*/
.stats__grid--r3-1,
.stats__grid--r3-2 {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.stats__grid--r3-1 > *,
.stats__grid--r3-2 > * {
grid-column: span 2;
}
.stats__grid--r3-1 > :nth-last-child(-n + 4),
.stats__grid--r3-2 > :nth-last-child(-n + 2) {
grid-column: span 3;
}
}
/* Breite der breitesten Wertzeile in em, vom Template geschätzt (Stufen).
Die Stufen reichen bis 12 em (bei 320 px noch rund 24 px Schrift). Eine
noch längere Zeile bekommt keine Stufe, sondern .stat__value--wrap. */
.stats__grid--fit-40 { --stats-fit: 4; }
.stats__grid--fit-45 { --stats-fit: 4.5; }
.stats__grid--fit-50 { --stats-fit: 5; }
.stats__grid--fit-55 { --stats-fit: 5.5; }
.stats__grid--fit-60 { --stats-fit: 6; }
.stats__grid--fit-70 { --stats-fit: 7; }
.stats__grid--fit-80 { --stats-fit: 8; }
.stats__grid--fit-90 { --stats-fit: 9; }
.stats__grid--fit-100 { --stats-fit: 10; }
.stats__grid--fit-120 { --stats-fit: 12; }
/* ---------- Zelle ---------- */
.stat {
min-width: 0;
padding-top: 1.5rem;
border-top: 1px solid var(--line);
}
.stat__value {
margin: 0;
font: 820 var(--fs-num)/1 var(--font-display);
/*
* Obergrenze: Spaltenbreite geteilt durch die Breite der längsten Zeile.
* „300.000“ misst 4,13 em und wäre bei 72 px im Vierer-Raster ab 75rem
* (Zelle rund 250 px) breiter als seine Spalte. Ohne Container-Einheiten
* bleibt die erste Deklaration stehen.
*/
font-size: min(var(--fs-num), (100cqi - (var(--stats-cols) - 1) * var(--stats-gap)) / var(--stats-cols) / var(--stats-fit));
font-stretch: var(--w-num);
font-variant-numeric: tabular-nums lining-nums;
color: var(--text);
/* Die Zahl bricht nie um, auch nicht zwischen „+“ und Ziffer. */
white-space: nowrap;
}
/*
* FIX: Wertzeile länger als die höchste Stufe (12 em, praktisch nur ein Satz
* im Zahlenfeld). Schrift nach ihrer Breite zu begrenzen, ergäbe winzige
* Zahlen, nowrap ohne Begrenzung einen seitlichen Überlauf (9.2). Sie darf
* deshalb umbrechen. .odo (F) setzt selbst nowrap und muss mit. anywhere
* statt break-word: Nur so zählt die Umbruchstelle für die Mindestbreite des
* inline-block, sonst bliebe er so breit wie sein längstes Wort. Das
* Template schaltet für diesen Wert die Walze ab, weil sie eine Zeile
* braucht. :where hält die Spezifität bei einer Klasse.
*/
.stat__value--wrap,
.stat__value--wrap > :where(.odo) {
white-space: normal;
overflow-wrap: break-word;
overflow-wrap: anywhere;
}
/* Präfix-Zeichen und Suffix in halber Größe auf der Grundlinie der Zahl. */
.stat__affix {
font-size: .5em;
font-weight: 700;
vertical-align: baseline;
}
/* Präfix mit Wort („über “): eigene Zeile über der Zahl (6.8). */
.stat__affix--word {
display: block;
margin-bottom: .5rem;
font: 600 var(--fs-small)/1.35 var(--font-text);
color: var(--text-soft);
white-space: normal;
}
/* Hat eine Zelle der Sektion eine Präfixzeile, rücken die Zahlen ohne
Präfix im Mehrspalter um genau diese Zeile nach unten. So stehen alle
Zahlen einer Reihe auf derselben Grundlinie. Einspaltig entfällt das. */
@media (min-width: 48rem) {
.stat__value--pad::before {
content: "";
display: block;
height: calc(var(--fs-small) * 1.35 + .5rem);
}
}
.stat__label {
margin: .75rem 0 0;
font: 650 1.125rem/1.3 var(--font-display);
font-stretch: 100%;
color: var(--text);
/* FIX: Ein langes zusammengesetztes Wort darf die schmale Zelle nicht
sprengen. overflow-wrap setzt keinen Trennstrich und greift nur, wenn
ein Wort wirklich nicht in die Zeile passt. */
overflow-wrap: break-word;
}
.stat__text {
max-width: 32ch;
margin: .5rem 0 0;
font-size: 1rem;
line-height: 1.55;
color: var(--text-soft);
}
/* ---------- Gemeinsames Zeilenraster im Mehrspalter ----------
Wert, Label und Text einer Reihe liegen je auf einer Höhe. Ein
zweizeiliges Label („Follower bei Herr Neugierig auf Instagram“) schob
seinen Text sonst eine Zeile tiefer als die Nachbarn. Das Label bleibt
oben in seiner Zeile, direkt unter der Zahl; der Ausgleich fällt unter
das kürzere Label. Einspaltig (unter 48rem) und ohne subgrid bleibt es
beim Satz untereinander.
Der Reihenabstand wandert vom row-gap des Rasters in einen Außenabstand
der Zellen: Ein Subgrid erbt das row-gap auch zwischen Wert, Label und
Text. Mit row-gap 0 nur im Subgrid verteilte Chrome die Differenz auf
die Spuren, das Label rückte rund 20 px vom Text ab. Der negative
Außenabstand des Rasters hebt den Abstand unter der letzten Reihe auf. */
@supports (grid-template-rows: subgrid) {
@media (min-width: 48rem) {
.stats__grid {
row-gap: 0;
margin-bottom: -3rem;
}
.stat {
display: grid;
grid-row: span 3;
grid-template-rows: subgrid;
align-content: start;
margin-bottom: 3rem;
}
/* Zahlen stehen unten in ihrer Zeile und damit je Reihe auf einer
Grundlinie, auch neben einer Präfixzeile („über“). Das ersetzt den
Platzhalter aus .stat__value--pad: Der rückte bisher im 2 × 2-Raster
auch Reihen ohne jedes Präfix um eine Zeile nach unten. */
.stat__value {
grid-row: 1;
align-self: end;
}
.stat__value--pad::before {
content: none;
}
.stat__label {
grid-row: 2;
}
.stat__text {
grid-row: 3;
}
}
}
/* ---------- Vier Werte: Leitzahl plus drei Belegzeilen ----------
ABWEICHUNG von 6.8 (Raster mit vier gleichen Spalten): Art-Director-Befund
„gleiches Schema auf jeder Sektion“. Vier gleiche Spalten standen auf
ueber-uns, recruiting-videos, reels-agentur, messe-content und
unsere-kanaele, dort direkt nach channel_proof mit der großen Leitkennzahl
und drei Zahlen in Spalten darunter. Jetzt steht die erste Zahl als
Leitzahl links, die übrigen drei als Zeilen rechts (Zahl, daneben
Bezeichnung und Text). Die Klassen setzt stats.php nur bei genau vier
Werten.
Aufbau je Breite:
unter 48rem alles untereinander, Leitzahl groß, Zeilenzahlen kleiner
48–62rem Leitzahl über die Breite, darunter die drei Zeilen
ab 62rem Leitzahl links (5 Teile), Zeilen rechts (Zahl + 6 Teile)
Walzen, Präfix- und Suffixregeln gelten unverändert. :where hält jede
Regel bei einer Klasse (8.5, Regel 4); sie stehen nach dem Spaltenraster
und gewinnen über die Reihenfolge. */
.stats__grid--lead {
row-gap: 2rem;
}
/* Die Leitzahl ist ihr eigener Größen-Container: Die Obergrenze der
Schriftgröße rechnet mit ihrer Spalte, nicht mit dem ganzen Raster. */
.stat--lead {
--stat-fit: 3.5;
container-type: inline-size;
}
.stat--fit-15 { --stat-fit: 1.5; }
.stat--fit-20 { --stat-fit: 2; }
.stat--fit-25 { --stat-fit: 2.5; }
.stat--fit-30 { --stat-fit: 3; }
.stat--fit-35 { --stat-fit: 3.5; }
.stat--fit-40 { --stat-fit: 4; }
.stat--fit-45 { --stat-fit: 4.5; }
.stat--fit-50 { --stat-fit: 5; }
.stat--fit-55 { --stat-fit: 5.5; }
.stat--fit-60 { --stat-fit: 6; }
.stat--fit-70 { --stat-fit: 7; }
.stat--fit-80 { --stat-fit: 8; }
.stat--fit-90 { --stat-fit: 9; }
.stat--fit-100 { --stat-fit: 10; }
.stat--fit-120 { --stat-fit: 12; }
/* Unter 48rem mindestens 4.5rem (Token --fs-num-lead beginnt bei 3.5rem),
damit die Leitzahl neben den gestapelten Zeilenzahlen (2rem) klar führt.
Die Obergrenze aus der Spaltenbreite gilt immer. */
.stat--lead > :where(.stat__value) {
font-size: min(max(var(--fs-num-lead), 4.5rem), 100cqi / var(--stat-fit));
}
.stat--lead > :where(.stat__label) {
margin-top: 1rem;
font-size: clamp(1.1875rem, 1rem + .6vw, 1.5rem);
line-height: 1.25;
}
.stat--lead > :where(.stat__text) {
max-width: 38ch;
font-size: var(--fs-body);
}
/* Zeilenzahlen: kleiner als die Leitzahl, aber noch Zahl, nicht Fließtext.
Gestapelt (unter 48rem) begrenzt die Rasterbreite, daneben (ab 48rem)
höchstens ein Drittel davon, damit die Bezeichnung Platz behält. */
.stat--row > :where(.stat__value) {
font-size: min(var(--fs-num-s), 100cqi / var(--stats-fit));
}
.stat--row > :where(.stat__label) {
margin-top: .625rem;
}
@media (min-width: 48rem) {
.stats__grid--lead {
grid-template-columns: minmax(0, calc(var(--stats-fit) * var(--fs-num-s))) minmax(0, 1fr);
column-gap: clamp(1.5rem, 3vw, 2.5rem);
row-gap: 0;
margin-bottom: 0;
}
.stats__grid--lead > :where(.stat) {
grid-row: auto;
margin-bottom: 0;
}
.stats__grid--lead > :where(.stat--lead) {
display: block;
grid-column: 1 / -1;
padding-bottom: 2.5rem;
}
/* Zeile: Zahl links, Bezeichnung auf der Grundlinie der Zahl daneben, der
Text darunter. Ohne subgrid ist die Zahlenspalte so breit wie die
breiteste Zahl der Sektion laut Schätzung (--stats-fit). */
.stats__grid--lead > :where(.stat--row) {
display: grid;
grid-column: 1 / -1;
grid-template-columns: minmax(0, calc(var(--stats-fit) * var(--fs-num-s))) minmax(0, 1fr);
grid-template-rows: auto auto;
column-gap: clamp(1.5rem, 3vw, 2.5rem);
padding-block: 1.25rem 1.5rem;
}
.stat--row > :where(.stat__value) {
grid-column: 1;
grid-row: 1 / span 2;
align-self: start;
font-size: min(var(--fs-num-s), 100cqi * .3 / var(--stats-fit));
}
.stat--row > :where(.stat__label) {
grid-column: 2;
grid-row: 1;
margin: 0;
}
.stat--row > :where(.stat__text) {
grid-column: 2;
grid-row: 2;
max-width: 44ch;
}
}
/* Mit subgrid teilen sich die drei Zeilen die Zahlenspalte des Rasters:
Sie ist genau so breit wie die breiteste Zeilenzahl, einstellige Werte
(„5 Mitarbeitende“) stehen nicht vor einer Lücke. Die Bezeichnung sitzt
auf der letzten Grundlinie der Zahl, auch unter einer Präfixzeile
(„über“). Ohne last baseline gilt end, das trifft die Grundlinie bis auf
die Unterlänge. */
@supports (grid-template-columns: subgrid) {
@media (min-width: 48rem) {
.stats__grid--lead {
grid-template-columns: max-content minmax(0, 1fr);
}
.stats__grid--lead > :where(.stat--row) {
grid-template-columns: subgrid;
}
.stat--row > :where(.stat__value) {
grid-row: 1;
align-self: end;
align-self: last baseline;
}
.stat--row > :where(.stat__label) {
align-self: end;
align-self: last baseline;
}
}
}
/* Ab 62rem liegt alles auf dem 12er-Raster des Sektionskopfs (ohne subgrid,
gleiche Spuren wie .grid-12): Leitzahl in den Spalten 1–4, Zeilen in
5–12. In der Zeile stehen die Zahlen rechtsbündig in 5–7 (tabellarische Ziffern, Einer unter Einern) und
hängen an der Kante von Spalte 8. Dort beginnen Bezeichnung und Text,
bündig mit dem Intro des split-Kopfs darüber (4.3). */
@media (min-width: 62rem) {
.stats__grid--lead {
grid-template-columns: repeat(12, minmax(0, 1fr));
grid-template-rows: repeat(3, auto);
column-gap: var(--gap);
}
.stats__grid--lead > :where(.stat--lead) {
grid-column: 1 / span 4;
grid-row: 1 / span 3;
padding-bottom: 0;
}
.stats__grid--lead > :where(.stat--row) {
grid-column: 5 / -1;
grid-template-columns: repeat(8, minmax(0, 1fr));
column-gap: var(--gap);
}
.stat--row > :where(.stat__value) {
grid-column: 1 / span 3;
justify-self: end;
text-align: end;
}
.stat--row > :where(.stat__label),
.stat--row > :where(.stat__text) {
grid-column: 4 / -1;
}
}
/* Nur kurze Zeilenzahlen (Klasse aus stats.php): Leitzahl in 1–5, Zeilen in
6–12, Zahl rechtsbündig in 6–7. Die Kante von Spalte 8 bleibt. :where hält
die Spezifität bei einer Klasse, die Regel steht nach der allgemeinen. */
@media (min-width: 62rem) {
.stats__grid--short-rows > :where(.stat--lead) {
grid-column: 1 / span 5;
}
.stats__grid--short-rows > :where(.stat--row) {
grid-column: 6 / -1;
grid-template-columns: repeat(7, minmax(0, 1fr));
}
.stats__grid--short-rows :where(.stat--row > .stat__value) {
grid-column: 1 / span 2;
}
.stats__grid--short-rows :where(.stat--row > .stat__label, .stat--row > .stat__text) {
grid-column: 3 / -1;
}
}
/* ===== 56-versus.css ===== */
/* =========================================================================
56 · versus: Gegenüberstellung Firma 1 / Firma 2 (Kundenfeedback 02.10.2026)
Oben das Vergleichsbild, darunter je Seite eine Liste. Links roter Punkt
(was schiefläuft), rechts grüner Haken (was funktioniert). Die rechte
Spalte ist der „ausgewählte Clip“ wie Spalte B im Vergleich (61): Fläche
--surface, Text in voller Stärke. Farbe ist nie allein das Signal: Punkt
und Haken unterscheiden sich in der Form, die Spalten tragen Titel.
Genutzt von: sections/versus.php
========================================================================= */
.versus__figure {
margin: 0 0 clamp(2rem, 4vw, 3rem);
}
.versus__img {
display: block;
width: 100%;
height: auto;
border-radius: var(--r-media);
}
.versus__cols {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1rem;
}
.versus__col {
padding: clamp(1.25rem, 3vw, 2rem);
border-top: 2px solid var(--line);
}
.versus__col--bad {
border-top-color: var(--error);
}
.versus__col--good {
background: var(--surface);
border-top-color: var(--ok);
}
.versus__label {
margin: 0 0 1rem;
font: 700 var(--fs-h3)/1.15 var(--font-display);
font-stretch: 100%;
color: var(--text);
}
.versus__list {
list-style-type: "";
margin: 0;
padding: 0;
display: grid;
gap: .875rem;
}
.versus__point {
display: grid;
grid-template-columns: 1.25rem minmax(0, 1fr);
column-gap: .75rem;
align-items: start;
font-size: var(--fs-body);
line-height: 1.5;
}
.versus__col--bad .versus__point {
color: var(--text-soft);
}
.versus__col--good .versus__point {
color: var(--text);
font-weight: 500;
}
/* Symbol mittig zur ersten Zeile (1.5 × 17 px ≈ 25,5 px Zeilenhöhe). */
.versus__mark {
width: 1.25rem;
height: 1.25rem;
margin-top: calc((1.5em - 1.25rem) / 2);
}
.versus__mark--bad {
fill: var(--error);
}
.versus__mark--good {
color: var(--ok);
}
.versus__cta {
margin-top: clamp(2rem, 4vw, 3rem);
}
/* Ab 48rem nebeneinander, jede Liste unter ihrer Bildhälfte. */
@media (min-width: 48rem) {
.versus__cols {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(1.5rem, 4vw, 4rem);
}
.versus__cta .btn--block {
width: auto;
}
}
/* ===== 57-formats.css ===== */
/* =========================================================================
57 · formats: Erfolgsformate (Kundenfeedback 02.10.2026, OnePager 2026)
Hochformatbild in Farbe, Titel, ein Satz, zwei Links. Loom vom
06.10.2026: Slider statt langer Liste (Komponente 44-slider.css), die
Details stehen auf den Leistungsseiten.
Genutzt von: sections/formats.php
========================================================================= */
/* Slide-Breite: bei 1440 px stehen gut vier Formate im Blick, das fünfte
ist angeschnitten und zeigt, dass es weitergeht. */
.formats__slider {
--slider-w: min(17rem, 78vw);
--slider-gap: var(--gap);
}
.formats__item {
display: flex;
flex-direction: column;
align-self: stretch;
}
.formats__media {
margin: 0 0 1.125rem;
}
.formats__media img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 5;
object-fit: cover;
border-radius: var(--r-media);
}
/* Kachel ohne Foto: Studio-Grund, die drei Pixelquadrate aus dem Logo oben
links, das Symbol groß in Signal-Teal (6,06:1 auf Studio). Gleiches 4:5
wie die Fotos, damit die Reihe geschlossen bleibt. */
.formats__tile {
position: relative;
display: grid;
place-items: center;
aspect-ratio: 4 / 5;
border-radius: var(--r-media);
background:
radial-gradient(120% 90% at 85% 100%, var(--c-studio-2) 0%, transparent 60%),
var(--c-studio);
color: var(--c-signal);
}
.formats__tile-pixels {
position: absolute;
top: 1.25rem;
left: 1.25rem;
display: grid;
grid-template-columns: repeat(2, 8px);
gap: 4px;
}
.formats__tile-pixels i {
display: block;
width: 8px;
height: 8px;
border-radius: 1px;
background: var(--c-signal);
}
.formats__tile-pixels i:first-child {
grid-column: 2;
}
.formats__tile-icon {
width: 38%;
height: auto;
fill: none;
stroke: currentColor;
stroke-width: 1.25;
stroke-linecap: round;
stroke-linejoin: round;
}
.formats__title {
margin: 0;
font: 700 1.25rem/1.2 var(--font-display);
font-stretch: 100%;
color: var(--text);
}
.formats__text {
margin: .5rem 0 0;
font-size: var(--fs-small);
line-height: 1.55;
color: var(--text-soft);
}
.formats__incl {
margin: 1.125rem 0 .5rem;
font: 500 var(--fs-mono)/1.3 var(--font-mono);
letter-spacing: .02em;
color: var(--text);
}
.formats__bullets {
list-style-type: "";
display: grid;
gap: .375rem;
margin: 0;
padding: 0;
font-size: var(--fs-small);
line-height: 1.45;
color: var(--text);
}
/* Pixelquadrat statt Aufzählungspunkt (Rahmenmarken-Farbe, 5.4). */
.formats__bullets li {
position: relative;
padding-inline-start: 1rem;
}
.formats__bullets li::before {
content: "";
position: absolute;
inset-inline-start: 0;
top: calc((1.45em - 6px) / 2);
width: 6px;
height: 6px;
background: var(--mark);
}
/* Links unten bündig, auch wenn Texte unterschiedlich lang sind. */
.formats__links {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: .5rem;
margin: auto 0 0;
padding-top: 1.25rem;
font-size: var(--fs-small);
}
.formats__example {
display: inline-flex;
align-items: center;
gap: .375rem;
min-height: 1.5rem; /* Zielgröße 24 px (WCAG 2.5.8) */
color: var(--text);
font-weight: 500;
text-decoration: underline;
text-decoration-color: var(--line-ui);
text-decoration-thickness: 1px;
text-underline-offset: .2em;
}
.formats__example:hover {
text-decoration-color: currentColor;
}
.formats__example svg {
flex: none;
width: 14px;
height: 14px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Abschluss: Satz links, Button daneben (ab 62rem), darunter gestapelt. */
.formats__close {
display: grid;
gap: 1.25rem;
margin-top: clamp(2.5rem, 5vw, 3.5rem);
padding-top: clamp(1.5rem, 3vw, 2rem);
border-top: 1px solid var(--line);
}
.formats__close-text {
max-width: 46ch;
margin: 0;
font: 600 var(--fs-lead)/1.45 var(--font-text);
color: var(--text);
}
@media (min-width: 62rem) {
.formats__close--text {
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
column-gap: var(--gap);
}
}
@media (min-width: 48rem) {
.formats__cta .btn--block {
width: auto;
}
}
/* Abzeichen am Titel („Neu“ bei Influencer Collaborations), wie im
Megamenü (31-megamenu.css). */
.formats__badge {
display: inline-block;
margin-left: .25rem;
padding: .15rem .4rem;
border-radius: var(--r-plate);
background: var(--c-teal-ink);
color: var(--c-white);
font: 500 .6875rem/1.3 var(--font-mono);
letter-spacing: .04em;
vertical-align: .2em;
}
/* ===== 58-locations.css ===== */
/* =========================================================================
58 · locations: Standorte (Kundenfeedback 02.10. und 15.10.2026)
Je Land eine Fläche mit Flagge, Name und Anzahl, darin die Städte im
Spaltensatz. Jede Stadt trägt ein kleines Pixelquadrat aus dem Logo,
der Sitz (Hamburg) ist als „Unser Sitz“ markiert und verlinkt.
Linksbündig wie alle Köpfe der Startseite. Farben aus den Tokens.
Genutzt von: sections/locations.php
========================================================================= */
.locations {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--gap);
}
.locations__group {
padding: clamp(1.5rem, 3vw, 2.25rem);
border-radius: var(--r-panel);
background: var(--surface);
}
.locations__country {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .5rem .75rem;
margin: 0 0 1.25rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--line);
font: 700 var(--fs-h3)/1.15 var(--font-display);
font-stretch: 100%;
color: var(--text);
}
/* Flaggen mit feiner Kontur, damit das Weiß der Schweizer Flagge und das
Schwarz der deutschen auf jedem Grund eine Kante haben. */
.locations__flag {
flex: none;
width: 2.25rem;
height: auto;
aspect-ratio: 5 / 3;
border-radius: 2px;
box-shadow: 0 0 0 1px var(--line);
}
.locations__flag--square {
width: 1.6rem;
aspect-ratio: 1;
}
.locations__count {
margin-left: auto;
font: 500 var(--fs-mono)/1.3 var(--font-mono);
letter-spacing: .04em;
color: var(--text-soft);
}
.locations__list {
list-style-type: "";
margin: 0;
padding: 0;
columns: 2;
column-gap: var(--gap);
}
.locations__city {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .25rem .5rem;
break-inside: avoid;
padding: .45rem 0;
font: 500 var(--fs-body)/1.35 var(--font-text);
color: var(--text);
}
/* Pixelquadrat vor jeder Stadt (Markenmotiv aus dem Logo). */
.locations__city::before {
content: "";
flex: none;
width: 6px;
height: 6px;
border-radius: 1px;
background: var(--mark);
}
.locations__link {
display: inline-flex;
align-items: center;
gap: .375rem;
min-height: 1.5rem;
color: var(--accent-text);
font-weight: 600;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: .2em;
}
.locations__link:hover {
text-decoration-thickness: 2px;
}
.locations__link svg {
flex: none;
width: 16px;
height: 16px;
}
.locations__badge {
display: inline-block;
padding: .125rem .4rem;
border-radius: var(--r-plate);
background: var(--l3-name-bg);
color: var(--l3-name-fg);
font: 500 .75rem/1.3 var(--font-mono);
letter-spacing: .02em;
}
/* Kleine Gruppen (Schweiz, Österreich): Städte untereinander. */
.locations__group:not(.locations__group--de) .locations__list {
columns: 1;
}
@media (min-width: 48rem) {
.locations__group--de .locations__list {
columns: 3;
}
}
@media (min-width: 62rem) {
.locations:has(.locations__group:nth-child(2)) {
grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
align-items: start;
}
.locations__group--de .locations__list {
columns: 4;
}
}
/* ===== 60-testimonials.css ===== */
/* =========================================================================
60 · testimonials: O-Ton-Satz (Spez. 6.11)
Kundenstimmen stehen wie O-Töne im Satz, nicht als Karten: kein Rahmen,
kein Schatten, keine Sprechblasenspitze. Name und Rolle kommen als
Bauchbinde (.l3, Team F). Grammatik: Bauchbinde. Kein Signaturelement.
Genutzt von: sections/testimonials.php, components/testimonial-card.php
(auch im Formular und in der Fallstudie).
========================================================================= */
/* ---------- Bewertungssiegel unter dem Intro ----------
smm_section_header() gibt den Kopf geschlossen aus, die Siegel können also
nicht in dessen Intro-Spalte stehen. Sie folgen dem Kopf und rücken per
negativem Rand an das Intro heran: Die Ränder fallen zusammen
(--head-gap + 1.25rem − --head-gap = 1.25rem), darunter bleibt der
normale Abstand zum Inhalt. Ab 62rem legt dasselbe 12er-Raster wie
im split-Kopf (05-section-header.css: Titel 1–7, Intro 8–12, --gap) die
Siegel exakt unter die Intro-Spalte. */
.testimonials__badges {
margin-top: calc(1.25rem - var(--head-gap));
margin-bottom: var(--head-gap);
}
/* Ohne Kopf gibt es keinen Rand, mit dem der negative zusammenfallen könnte. */
.testimonials__badges--top {
margin-top: 0;
}
.testimonials__badges .review-badges {
display: flex;
flex-wrap: wrap;
gap: .25rem 1.5rem;
margin: 0;
padding: 0;
list-style: none;
}
.testimonials__badges .review-badges__item,
.testimonials__badges .review-badges__item > a {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: .25rem .5rem;
color: var(--text-soft);
font: 400 var(--fs-small)/1.35 var(--font-text);
}
/* FIX: Das Siegel ist ein eigenständiger Link. 44 px Zielhöhe statt der
Zeilenhöhe von rund 20 px (WCAG 2.5.8). */
.testimonials__badges .review-badges__item > a {
min-height: 2.75rem;
text-decoration: none;
}
.testimonials__badges .review-badges__platform {
color: var(--text);
font-weight: 700;
}
/* Klein und sachlich, aber als Link erkennbar: Unterstreichung am Namen.
Nicht am Link selbst: Eine Unterstreichung am Link erbt jedes Kind, ein
Kind kann sie nicht zurücknehmen, sie liefe also auch unter Sternen und
Wert. :where(:hover) hält die Spezifität bei zwei Klassen (Spez. 8.5,
Regel 4); die Hover-Regel steht deshalb nach der Grundregel. */
.testimonials__badges a .review-badges__platform {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: .2em;
}
.testimonials__badges a:where(:hover) .review-badges__platform {
text-decoration-thickness: 2px;
}
/* FIX: Die Regeln für .stars svg und .review-badges__score sind entfallen.
Das Siegel nennt keine Durchschnittsnote mehr und zeigt keine Sterne: In
einer Sammelanzeige stünden beide für einen Durchschnitt, der nirgends
belegt ist. Die echten fünf Sterne stehen an jeder einzelnen Stimme. */
/* Ruhiger Trenner zwischen Portalname und Anzahl, rein dekorativ. */
.testimonials__badges .review-badges__count::before {
content: "·";
margin-inline-end: .5rem;
}
/* Die Anzahl ist ein echter Wert, deshalb Mono (Spez. 1, Regel 3). Das Wort
daneben bleibt Schibsted. */
.testimonials__badges .review-badges__num {
font: 500 var(--fs-mono)/1.35 var(--font-mono);
letter-spacing: .02em;
font-variant-numeric: tabular-nums;
color: var(--text);
}
@media (min-width: 62rem) {
.testimonials__badges {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: var(--gap);
}
.testimonials__badges > .review-badges {
grid-column: 8 / -1;
}
/* Kopf ohne Intro oder gar kein Kopf: Siegel unter den Titel, sonst
stünden sie rechts neben einer leeren Spalte. */
.testimonials__badges--under-title > .review-badges,
.testimonials__badges--top > .review-badges {
grid-column: 1 / span 7;
}
}
/* ---------- Satz ----------
ABWEICHUNG von 6.11 (columns: 1/2/3), nach Sichtprüfung: Der Spaltensatz
mit break-inside: avoid gleicht die Spalten auf die kleinste Höhe aus und
ließ bei 4, 5, 7, 8 oder 10 Stimmen ein Loch von rund einer Stimmenhöhe
stehen (5 Stimmen bei 1440 px: 2/1/2, Loch unter der Mittelspalte). Das
verstößt gegen 9.9. Stattdessen ein Raster, dessen Zeilen immer voll sind:
- unter 48rem eine Spalte,
- 48 bis 75rem zwei Spalten; bei ungerader Anzahl steht die erste Stimme
als Aufmacher über beiden Spalten, darunter nur volle Zweierzeilen,
- ab 75rem drei Stimmen je Zeile auf sechs Rasterspalten; bleiben am Ende
zwei übrig, teilen sie sich die Zeile, bleibt eine übrig, stehen die
letzten vier als 2 + 2.
Die Aufteilung folgt allein aus :nth-child/:nth-last-child, das Template
braucht keinen Zähl-Modifier. DOM-Reihenfolge = Lesefolge zeilenweise.
:where() hält jede Regel bei einer Klasse (Spez. 8.5, Regel 4); wo Regeln
gleich schwer sind, entscheidet die Reihenfolge. */
.oton-set {
display: grid;
grid-template-columns: minmax(0, 1fr);
row-gap: 2rem;
align-items: start;
}
/* Eine einzelne Stimme liefe sonst über die volle Containerbreite. */
.oton-set > :only-child {
max-width: var(--measure);
}
@media (min-width: 48rem) {
.oton-set {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 3.5rem clamp(2rem, 4vw, 4rem);
}
/* Ungerade Anzahl (die erste ist von hinten gezählt ungerade): Aufmacher
über beide Spalten, auf Lesebreite begrenzt. So bleibt weder ein Loch
noch eine verwaiste Stimme am Ende. */
.oton-set > :where(:first-child:nth-last-child(odd)) {
grid-column: 1 / -1;
max-width: var(--measure);
}
}
@media (min-width: 75rem) {
.oton-set {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.oton-set > :where(.oton) {
grid-column: span 2;
max-width: none;
}
/* Rest 2 (2, 5, 8, 11 Stimmen): die letzten zwei teilen sich die Zeile.
Rest 1 (4, 7, 10 Stimmen): die letzten vier stehen als 2 + 2. */
.oton-set > :where(
:nth-child(3n+1):nth-last-child(2),
:nth-child(3n+1):nth-last-child(2) ~ *,
:nth-child(3n+1):nth-last-child(4),
:nth-child(3n+1):nth-last-child(4) ~ *
) {
grid-column: span 3;
}
.oton-set > :where(:only-child) {
grid-column: 1 / -1;
}
}
/* Bauchbinden auf einer Linie: Ab 48rem übernimmt jede Stimme die Zeilen
des Satzes (subgrid) für Sterne, Zitat, Ergebnis und Fuß. Das längste
Zitat einer Zeile bestimmt die Zitatzeile, alle Bauchbinden der Zeile
stehen damit auf derselben Oberkante wie ein eingeblendeter Namenszug.
Der Satz hat dafür keinen Zeilenabstand: Ein Subgrid erbt die Fugen
zwischen seinen Spuren, jede (auch leere) Spur trüge sonst 3.5rem in die
Stimme hinein. Den Abstand zwischen den Stimmen trägt deshalb ihr
unterer Rand, den der Satz am Ende per negativem Rand wieder abgibt.
Ohne subgrid-Unterstützung gilt das Raster oben mit row-gap, die Stimmen
stehen oben bündig. */
@supports (grid-template-rows: subgrid) {
@media (min-width: 48rem) {
.oton-set {
row-gap: 0;
margin-bottom: -3.5rem;
}
.oton-set > .oton {
display: grid;
grid-template-rows: subgrid;
grid-row: span 4;
row-gap: 0;
margin-bottom: 3.5rem;
}
.oton-set .stars {
grid-row: 1;
}
.oton-set .oton__quote {
grid-row: 2;
}
.oton-set .oton__result {
grid-row: 3;
}
.oton-set .oton__foot {
grid-row: 4;
align-self: start;
}
}
}
/* 375 px: eine Spalte, zwischen den Stimmen eine Linie. Nur unterhalb von
48rem: Im mehrspaltigen Raster stünde die Linie versetzt über einzelnen
Stimmen. Nebeneinander stehende .oton gibt es nur im Satz; Slider,
Formular und Fallstudie setzen jede Stimme einzeln. */
@media (max-width: 47.99rem) {
.oton + .oton {
padding-top: 2rem;
border-top: 1px solid var(--line);
}
}
/* ---------- Stimme ---------- */
.oton {
/* FIX: figure bringt im Browser 40 px Seitenrand mit (alte Basisregel). */
margin: 0;
/* FIX: Ohne min-width: 0 dehnt ein langes Wort das Raster-Element auf. */
min-width: 0;
color: var(--text);
}
.oton > .stars {
display: flex;
width: fit-content;
margin-bottom: 1rem;
}
.oton > .stars svg {
width: 16px;
height: 16px;
}
/* Zitat mit hängendem „: Der Textblock fluchtet mit Sternen und Bauchbinde,
das Anführungszeichen steht davor im Spaltenabstand. */
.oton__quote {
margin: 0;
font: 400 var(--fs-body)/1.6 var(--font-text);
text-indent: -.42em;
text-wrap: pretty;
/* FIX: bricht nur, wenn ein Wort wirklich nicht in die Spalte passt. */
overflow-wrap: break-word;
}
.oton__quote::before {
content: "„";
}
.oton__quote::after {
content: "“";
}
/* kurz: der O-Ton selbst, schmal und schwer */
.oton--kurz .oton__quote {
font: 650 clamp(1.375rem, 1.1rem + 1vw, 1.875rem)/1.2 var(--font-display);
font-stretch: 88%;
letter-spacing: -.005em;
}
.oton--mittel .oton__quote {
font: 500 1.1875rem/1.5 var(--font-text);
}
.oton--lang .oton__quote {
font: 400 1.0625rem/1.6 var(--font-text);
}
/* Im Slider liegt die Stimme in einem Scroll-Container, der das hängende
Zeichen am Rand abschneiden würde. */
.oton--no-hang .oton__quote {
text-indent: 0;
}
/* 375 px: Das hängende „ stand nur rund 11 px vom Bildschirmrand, halb im
18-px-Gutter. Unter 48rem steht es deshalb im Satz. */
@media (max-width: 47.99rem) {
.oton__quote {
text-indent: 0;
}
}
/* Ergebnis: echte Zahl, deshalb Mono auf einer kleinen Tafel. */
.oton__result {
display: flex;
align-items: center;
gap: .375rem;
width: fit-content;
max-width: 100%;
margin-top: 1rem;
padding: .25rem .5rem;
border-radius: var(--r-plate);
background: var(--surface);
color: var(--text);
font: 500 var(--fs-mono)/1.35 var(--font-mono);
letter-spacing: .02em;
}
/* Trend-Icon per Klasse statt Inline-Style */
.oton__trend {
flex: none;
width: 13px;
height: 13px;
color: var(--accent-text);
}
/* Fuß: Avatar · Bauchbinde · Logo, darunter die Quelle.
Flex statt des Rasters „auto 1fr auto“: Avatar und Logo sind optional,
ein Raster hätte bei fehlendem Avatar die Bauchbinde in die schmale
auto-Spalte geschoben und eine leere Lücke stehen lassen. */
.oton__foot {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .75rem;
margin-top: 1.25rem;
}
.oton__avatar {
flex: none;
width: 44px;
height: 44px;
border-radius: var(--r-round);
object-fit: cover;
}
/* Die Bauchbinde ist so breit wie ihr Text. Mit flex: 1 1 11rem dehnte
sie sich auf den freien Platz links vom Logo; brach die Rolle um, lief die
helle Rollentafel dann mit 30 bis 80 px Leerfläche bis ans Logo. */
.oton__foot > .l3 {
flex: 0 1 auto;
min-width: 0;
}
/* Rolle und Firma stehen je in einer Zeile (testimonial-card.php trennt
sie mit einem Zeilenumbruch). Ein umbrechender Kasten wird so breit wie
der verfügbare Platz, nicht wie seine längste Zeile; mit festem Umbruch
ist die Tafel genau so breit wie die längere der beiden Zeilen, und alle
Füße einer Zeile haben dieselbe Form. Screenreader lesen den Umbruch als
Leerzeichen. */
.oton__foot .l3__role {
white-space: pre-line;
}
/* Logo in Originalfarbe, ohne Graustufen und ohne Opacity.
ABWEICHUNG von 6.11 (Logo max-height 24 px), nach Sichtprüfung: Eine
feste Höhe ließ kompakte Logos (Matari Solar, 1,56:1) auf rund 37 × 24 px
schrumpfen, breite (Gymside, 3,9:1) liefen dreimal so breit. Jetzt hat
jedes Logo dieselbe Fläche: testimonial-card.php ordnet das
Seitenverhältnis einer Stufe zu, die Stufe setzt q = √Seitenverhältnis,
die Box wird s · q breit und s / q hoch (Fläche immer s²). Trägt die
Datei transparenten Rand, vergrößert p die Box, bis das Gezeichnete
wieder die Fläche s² hat (Messung siehe testimonial-card.php). object-fit
hält das Bild in der Box, die feste Box gibt auch SVGs ohne Maße eine
Größe. Das Logo steht direkt neben der Bauchbinde, nicht an der
Spaltenkante: Es gehört zur Person, nicht zur Spalte. */
.oton__logo {
--oton-logo-s: 3.5rem;
--oton-logo-q: 1.5;
--oton-logo-p: 1;
flex: none;
width: calc(var(--oton-logo-s) * var(--oton-logo-q) * var(--oton-logo-p));
height: calc(var(--oton-logo-s) / var(--oton-logo-q) * var(--oton-logo-p));
max-width: 100%;
margin-inline-start: .25rem;
object-fit: contain;
object-position: left center;
}
.oton__logo--r1 { --oton-logo-q: 1; }
.oton__logo--r15 { --oton-logo-q: 1.225; }
.oton__logo--r22 { --oton-logo-q: 1.5; }
.oton__logo--r34 { --oton-logo-q: 1.844; }
.oton__logo--r5 { --oton-logo-q: 2.236; }
.oton__logo--r75 { --oton-logo-q: 2.739; }
.oton__logo--p1 { --oton-logo-p: 1.12; }
.oton__logo--p2 { --oton-logo-p: 1.25; }
.oton__logo--p3 { --oton-logo-p: 1.4; }
/* Schmale Spalten (375 px, 3 Spalten bei 1200 px): Die Grundfläche s
schrumpft mit der Breite des Fußes, bis Bauchbinde (rund 13 rem mit
Abstand) und das breiteste übliche Logo (q · p ≈ 2,3) nebeneinander
passen. Der Faktor gilt für alle Logos gleich, die Flächen bleiben also
gleich. Unter 2.75rem bricht das Logo lieber um, statt unleserlich zu
werden. In @supports, weil eine unbekannte Einheit in der Variablen erst
beim Einsetzen ungültig würde und das Logo dann in Originalgröße stünde. */
@supports (width: 1cqi) {
.oton__foot {
container-type: inline-size;
}
.oton__logo {
--oton-logo-s: clamp(2.75rem, (100cqi - 14rem) / 2.4, 3.5rem);
}
}
.oton__source {
flex-basis: 100%;
margin: 0;
color: var(--text-soft);
font: 400 var(--fs-xs)/1.45 var(--font-text);
}
/* ---------- Slider-Variante ----------
Gleiche Stimme, 22rem breit (Vertrag von 44-slider.css: Breite über
--slider-w am .slider). Auf dem Handy 82vw, damit die nächste Stimme
anschneidet. Ersetzt das alte Inline-Style width:min(100%,22rem). */
.testimonials__slider {
--slider-w: min(22rem, 82vw);
}
/* Bewegung: Die Listen-Einblendung der Stimmen (Spez. 7.3, Nr. 3) steht
zentral in 90-motion.css ([data-reveal], Staffelung per
data-reveal-delay aus 30-reveal.js). Deshalb trägt .oton hier bewusst
keine eigene transition. */
/* ===== 61-comparison.css ===== */
/* =========================================================================
61 · comparison: Vergleichstabelle (Spez. 6.13)
Spalte B ist der ausgewählte, „zugeschnittene“ Clip: durchgehende Spur auf
--surface mit Trim-Griffen (.trim.is-trimmed, Team F). Ab 48rem echte
Tabelle, darunter zwei Spuren mit dem Tabellenkopf als Legende.
Genutzt von: sections/comparison.php
========================================================================= */
/* FIX: Die alte Tabelle hatte min-width 34rem in einem Scroll-Container.
Die gestapelte Mobilfassung ersetzt beides; es gibt keinen Querscroll mehr,
und Fokusringe von Links in Randzellen werden nicht mehr abgeschnitten. */
.compare {
position: relative;
min-width: 0;
}
.compare__table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
color: var(--text);
}
.compare__table th,
.compare__table td {
text-align: start;
/* FIX: bricht nur, wenn ein Wort wirklich nicht in die Zelle passt. */
overflow-wrap: break-word;
}
/* Kopf B als Namenstafel. Tokens statt fester #156A72: auf white und mist
ergibt das genau #156A72, auf deep die Studio-Tafel (#1C818B, 4,60) und
auf Sektion teal eine dunkle Tafel, die sich vom Grund abhebt. */
.compare__name {
display: inline-block;
padding: .5rem .875rem;
border-radius: var(--r-plate);
background: var(--l3-name-bg);
color: var(--l3-name-fg);
font: 700 1.0625rem/1.2 var(--font-display);
}
/* Spur B: Die Kerben der Griffe haben die Farbe der Zelle, nicht des Grundes.
Nach Sichtprüfung auch im Kopf: Dort stand die Namenstafel auf dem
Sektionsgrund, die Zellen darunter auf --surface. Der Trim-Rahmen um
Spalte B wirkte dadurch zweifarbig, die Kerben saßen oben auf dem Grund.
Der ausgewählte Clip hat jetzt von oben bis unten eine Fläche. */
.compare__b {
--notch: var(--surface);
}
.compare__table .compare__b {
background: var(--surface);
}
.compare__table td.compare__b {
color: var(--text);
font: 500 1rem/1.5 var(--font-text);
}
.compare__table td.compare__a {
color: var(--text-soft);
font: 400 1rem/1.5 var(--font-text);
}
.compare__criterion {
color: var(--text);
font: 650 1rem/1.35 var(--font-display);
}
/* Kopf A: Schibsted 600 14 px --text-soft, in beiden Fassungen. */
.compare__table thead th.compare__a {
color: var(--text-soft);
font: 600 var(--fs-xs)/1.35 var(--font-text);
}
/* Trim-Griffe um die ganze Spalte B, in Tabelle und Spurfassung gleich.
Jede Zelle trägt .trim.is-trimmed; das ::after von Team F hat sechs
Ebenen: Kerbe links, Kerbe rechts, Griff links, Griff rechts, Linie
oben, Linie unten. Über background-size werden Ebenen abgeschaltet,
damit die Einzelzellen zu einem Clip verschmelzen: senkrechte Griffe
überall, Linie oben und Kerben nur im Kopf, Linie unten und Kerben nur
in der letzten Zeile. Zwei Klassen, damit die Regel auch dann greift,
wenn Team F die Griffe an .trim.is-trimmed::after zeichnet. */
.compare__table .compare__b::after {
background-size: 0 0, 0 0, var(--tw, 6px) 100%, var(--tw, 6px) 100%, 0 0, 0 0;
}
.compare__table .compare__b--head::after {
background-size: 2px 32%, 2px 32%, var(--tw, 6px) 100%, var(--tw, 6px) 100%, 100% 2px, 0 0;
}
.compare__table .compare__b--last::after {
background-size: 2px 32%, 2px 32%, var(--tw, 6px) 100%, var(--tw, 6px) 100%, 0 0, 100% 2px;
}
/* ---------- ab 48rem: Tabelle ---------- */
@media (min-width: 48rem) {
.compare__table {
table-layout: fixed;
}
/* Grundlinie statt Unterkante: Kopf A (Schibsted 14 px) steht auf
derselben Grundlinie wie der Text in der Namenstafel B (Archivo 17 px
mit .5rem Tafelabstand). Mit bottom lag A rund 9 px tiefer. */
.compare__table thead th {
padding: .75rem 1.25rem .875rem;
vertical-align: baseline;
}
/* Spaltenbreiten 26 / 37 / 37 % */
.compare__table thead th:first-child {
width: 26%;
padding-inline-start: 0;
}
.compare__table thead th.compare__a {
width: 37%;
}
.compare__table thead th.compare__b {
width: 37%;
}
.compare__row > th,
.compare__row > td {
padding: 1.125rem 1.25rem;
vertical-align: top;
border-bottom: 1px solid var(--line);
}
.compare__row > .compare__criterion {
padding-inline-start: 0;
}
/* Das ::after (inset: 0) endet an der Padding-Box, also über der 1px-Linie
jeder Zelle. Ohne Verlängerung hätten die senkrechten Griffe an jeder
Zeilengrenze eine Lücke. In der letzten Zeile liegt die untere
Trim-Linie dadurch bündig auf der Zeilenlinie statt darüber. Der Kopf
hat keine Linie und bleibt bei 0. */
.compare__row > .compare__b::after {
inset-block-end: -1px;
}
}
/* ---------- unter 48rem: zwei Spuren ----------
Befund vergleich-mobil-formular: Die gestapelten Blöcke wiederholten das
Mono-Label beider Spalten in jeder Zeile, jede Gewinnerzelle stand als
eigener Rahmenkasten; bei 375 px rund 1.800 px lang, gelesen wie ein
Formular. Jetzt bleibt es eine Tabelle mit zwei Spuren:
- Der Tabellenkopf steht einmal als Legende über der Liste: Kopf A über
der linken Spur, Namenstafel B über der Spur B. Kein zusätzliches
Markup, keine wiederholten Labels.
- Jede Zeile: links Kriterium und gedämpfter Wert A, rechts der Wert B.
- Spalte B ist wie ab 48rem ein einziger zugeschnittener Clip: Fläche
--surface und Trim-Griffe laufen ohne Lücke vom Kopf bis zur letzten
Zeile. Das ist die Spaltenmarkierung der Tabelle, keine Akzentleiste an
Karten (9.6): Es gibt keine Karten, und die Griffe gehören zur Spalte.
Gemessen: strassenumfragen 375 px Tabelle 766 px statt rund 1.500 px,
ugc-agentur (längste Texte) 1.028 px. Tabellensemantik: Die role-Attribute
aus comparison.php tragen Zeilen- und Spaltenbezug, der Kopf bleibt im
Barrierefreiheitsbaum wie bisher. */
@media (max-width: 47.99rem) {
.compare__table,
.compare__table > thead,
.compare__table > tbody {
display: block;
}
/* Spur B etwas breiter: Sie trägt Griffe und Innenabstand. Kopfzeile und
Zeilen nutzen dieselbe Teilung, damit die Spur senkrecht durchläuft. */
.compare__table tr {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
}
.compare__table th,
.compare__table td {
display: block;
}
/* Kopf A auf der letzten Grundlinie der Namenstafel, wie ab 48rem. */
.compare__table > thead > tr {
align-items: last baseline;
}
/* „Kriterium“ bleibt Spaltenkopf für Screenreader (sr-only-Muster),
belegt aber keine Spur. */
.compare__table > thead th:first-child {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.compare__table > thead th.compare__a {
padding: 0 .75rem .875rem 0;
}
.compare__table > thead th.compare__b {
padding: .75rem .875rem;
}
/* Wert B belegt beide Zeilen der Spur, damit die Fläche ohne Lücke
unter dem Kriterium weiterläuft. */
.compare__row {
grid-template-areas:
"crit b"
"a b";
grid-template-rows: auto 1fr;
}
/* Die Zeilenlinie sitzt oben an Kriterium und Spur B und läuft damit
durch beide Spuren. */
.compare__row > .compare__criterion {
grid-area: crit;
padding: .875rem .75rem .375rem 0;
border-top: 1px solid var(--line);
font-size: .9375rem;
}
.compare__row > .compare__a {
grid-area: a;
padding: 0 .75rem 1.125rem 0;
}
.compare__row > .compare__b {
grid-area: b;
padding: .875rem .875rem 1.125rem;
border-top: 1px solid var(--line);
}
.compare__table .compare__row > td {
font-size: .9375rem;
}
/* Das ::after (inset: 0) endet an der Padding-Box, also unter der
1px-Linie oben. Ohne Verlängerung hätten die Griffe an jeder
Zeilengrenze eine Lücke. */
.compare__row > .compare__b::after {
inset-block-start: -1px;
}
/* Leere Zelle A: bleibt im Barrierefreiheitsbaum (kein display: none),
sonst sagte der Screenreader den Wert von B mit dem Kopf von A an
(Spez. 9.5). Eine leere Zelle B behält ihre Spur, damit der Clip
nicht unterbrochen wird. */
.compare__row > .compare__a:empty {
padding: 0;
}
}
/* Namenstafel kleiner, solange die Spur schmal ist: „Straßenumfrage“ passt
so bei 320 px in die Spur, ab 30rem trägt sie die Tafel in voller Größe. */
@media (max-width: 29.99rem) {
.compare__name {
padding: .375rem .5rem;
font-size: .875rem;
}
}
/* Schmale Spalten bis 62rem: lange Wörter („Kennzeichnungspflicht“,
„Werbekennzeichnung“) trennen mit Strich, statt über overflow-wrap ohne
Strich zu brechen. Gemessen brach „Kennzeichnungspflicht“ in der
Kriteriumsspalte der Tabelle bei 768 px, in den Spuren bis 414 px.
Erst ab 15 Zeichen, sechs vor und nach dem Strich; Safari kennt dafür nur
die -webkit-Einzelwerte. Der Kopf trennt nicht (Namenstafel). */
@media (max-width: 61.99rem) {
.compare__row > :is(th, td) {
-webkit-hyphens: auto;
hyphens: auto;
-webkit-hyphenate-limit-before: 6;
-webkit-hyphenate-limit-after: 6;
hyphenate-limit-chars: 15 6 6;
}
}
/* ---------- CTA ----------
Einheitliche Sektions-CTAs (Befund sektions-cta-uneinheitlich): btn--lg,
unter 48rem btn--block über die volle Breite, ab 48rem natürliche Breite.
Derselbe Umschaltpunkt wie hero, channel_proof und cta_band. Keine
globale Regel an .btn--block (Paketkarten, mobiles Menü bleiben voll
breit); :where hält die Regel bei einer Klasse, 61 steht nach 10. */
.compare__cta {
margin-top: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 48rem) {
.compare__cta :where(.btn--block) {
display: inline-flex;
width: auto;
}
}
/* Befund sektions-cta-dichte-ausrichtung: Schließt ein Sektions-CTA eine
vollbreite Reihe ab (pain_points, channel_proof, services, process,
comparison, video_testimonials, cases), steht er ab 62rem rechtsbündig an
der Containerkante. Vorher sprang der Button auf Seiten wie
kundenstimmen-video von Sektion zu Sektion zwischen rechts und links.
CTAs in einer Textspalte (hero, text_media, cta_band) bleiben an deren
Textkante. ABWEICHUNG von 6.13 (dort „linksbündig“), Regel in 4.5. */
@media (min-width: 62rem) {
.compare__cta {
justify-content: flex-end;
}
}
/* ===== 62-faq.css ===== */
/* =========================================================================
62 · faq: Häufige Fragen (Spez. 6.15) und Block smm-faq-block
Ab 62rem: Kopf links als klebende Randspalte (aside, Team F), Fragen
rechts. Keine Karten, nur Linien zwischen den Fragen. Das einzige Stück
Höhen-Animation der Seite (Spez. 1 und 7.1).
Genutzt von: sections/faq.php, blocks/smm-faq-block.php, JS 41-faq.js
========================================================================= */
/* ---------- Aufbau ---------- */
/* FIX: Als Grid- oder Flex-Kind (Artikelspalte, Sektionsraster) darf eine
lange Frage die Spalte nicht über ihre min-content-Breite aufsprengen. */
.faq {
min-width: 0;
}
/* ABWEICHUNG von 6.15 (Grid 4fr 8fr), nach Sichtprüfung: Die 4fr-Spalte
war 284 bis 381 px breit, die H2 in voller --fs-h2 stapelte sich dort
zu 3 bis 4 Zeilen („Was / Unternehmer / uns vor dem / Start fragen“),
und „Empfehlungsprogramm“ (.hl, rund 451 px) brach ohne Trennstrich
mitten im Wort. 5/7 wie pain_points (6.6). */
@media (min-width: 62rem) {
.faq--aside {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
column-gap: clamp(2rem, 5vw, 5rem);
/* Ohne start wäre der Kopf so hoch wie die Liste und könnte nicht kleben. */
align-items: start;
}
}
/* Zwischen 62 und 72rem ist auch die 5fr-Spalte (355 bis 416 px) zu schmal
für das längste Wort in voller --fs-h2. Oberhalb von 30rem gibt es
bewusst keine Silbentrennung (02-base.css), deshalb eine kleinere H2.
:where hält die Spezifität bei einer Klasse (8.5, Regel 4); 62 steht im
Build nach 05 und gewinnt. */
@media (min-width: 62rem) and (max-width: 71.99rem) {
.faq--aside :where(.section__title) {
font-size: min(var(--fs-h2), 2.25rem);
}
}
/* ---------- Randspalte: Kopf und Anzahl der Fragen ----------
ABWEICHUNG von 6.15 (Art-Director-Befund „linke Spalte leer“): Unter dem
Kopf steht die echte Anzahl der Fragen als Datum in Plex Mono (Regel 3:
Mono nur für echte Daten, hier eine Zählung aus den Einträgen). Ab 62rem
kleben Kopf und Anzahl als Einheit neben der Liste; der Kopf selbst klebt
im Modus aside zusätzlich (05-section-header.css), innerhalb der gleich
hohen Hülle hat das keine Wirkung. Unter 62rem steht die Anzahl zwischen
Kopf und Liste, der Abstand des Kopfs wandert unter die Anzahl. */
.faq__side {
min-width: 0;
margin-bottom: var(--head-gap);
}
.faq__side > :where(.section__header) {
margin-bottom: 1.25rem;
}
@media (min-width: 62rem) {
.faq__side {
align-self: start;
margin-bottom: 0;
}
.faq__side > :where(.section__header) {
margin-bottom: 0;
}
}
@media (min-width: 62rem) and (min-height: 44rem) {
.faq__side {
position: sticky;
top: calc(var(--header-h) + 2rem);
}
}
/* Blocktitel im Beitrag: Größe und Schrift kommen aus der Artikeltypografie. */
.faq__title {
margin-bottom: 1.25rem;
}
/* ---------- Liste ---------- */
.faq__list {
min-width: 0;
}
.faq__item {
border-bottom: 1px solid var(--line);
}
.faq__item:first-child {
border-top: 1px solid var(--line);
}
/* ---------- Frage ---------- */
.faq__q {
display: grid;
grid-template-columns: minmax(0, 1fr) 2rem;
column-gap: 1.5rem;
align-items: start;
padding-block: 1.375rem;
color: var(--text);
font: 650 clamp(1.0625rem, .95rem + .5vw, 1.3125rem)/1.3 var(--font-display);
list-style: none;
cursor: pointer;
transition: color var(--dur-1) var(--ease-cut);
}
/* Keine Einzelwort-Zeile am Ende einer Frage („… / euch?“), vor allem mobil. */
.faq__q > span {
text-wrap: balance;
}
/* Safari zeigt sonst weiterhin sein Dreieck. */
.faq__q::-webkit-details-marker {
display: none;
}
.faq__q::marker {
content: "";
}
/* Offener Zustand: :where([open]) hält jeden Selektor bei zwei Klassen
(Spez. 8.5, Regel 4). Die Zustandsregeln stehen deshalb jeweils nach den
Grundregeln, die sie überschreiben. */
.faq__item:where([open]) > .faq__q {
color: var(--accent-text);
}
/* FIX: Auf Touchgeräten bleibt :hover nach dem Antippen stehen; eine
geschlossene Frage sähe dann geöffnet aus. Hover nur mit echtem Zeiger. */
@media (hover: hover) {
.faq__q:hover {
color: var(--accent-text);
}
}
.faq__q:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 4px;
}
/* ---------- Toggle ----------
Loom vom 06.10.2026 („schlichtere Dropdowns“): Plus ohne Rahmenquadrat
und ohne Füllung, in der Akzentfarbe. Offen fällt der senkrechte Balken
weg (Minus). Der Zustand hängt nicht an der Farbe: Plus und Minus
unterscheiden sich in der Form. Die 32-px-Fläche bleibt als Zielgröße. */
.faq__toggle {
position: relative;
width: 2rem;
height: 2rem;
/* Toggle oben ausgerichtet, aber mittig zur ersten Fragezeile. */
margin-top: calc((1.3em - 2rem) / 2);
color: var(--accent-text);
/* Nur Farben laufen weich (Spez. 7.1, Nr. 2). Der Ring wechselt hart; im
offenen Zustand hat er die Farbe der Füllung, der Wechsel fällt also
nicht auf. */
transition: background-color var(--dur-1) var(--ease-cut), color var(--dur-1) var(--ease-cut);
}
.faq__toggle::before,
.faq__toggle::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: currentColor;
transition: transform var(--dur-1) var(--ease-cut);
}
.faq__toggle::before {
width: 16px;
height: 2px;
margin: -1px 0 0 -8px;
}
.faq__toggle::after {
width: 2px;
height: 16px;
margin: -8px 0 0 -1px;
}
.faq__item:where([open]) .faq__toggle::after {
transform: scaleY(0);
}
@media (min-width: 48rem) {
.faq__q {
align-items: center;
}
.faq__toggle {
margin-top: 0;
}
}
/* ---------- Antwort ---------- */
.faq__a {
max-width: 64ch;
padding-bottom: 1.75rem;
color: var(--text-soft);
font: 400 1.0625rem/1.65 var(--font-text);
}
/* FIX: Der Absatzrand am Ende hätte den unteren Abstand verdoppelt. */
.faq__a > :last-child {
margin-bottom: 0;
}
.faq__a a {
color: var(--accent-text);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: .2em;
}
.faq__a a:hover {
text-decoration-thickness: 2px;
}
/* ---------- Öffnen (Spez. 7.3, Nr. 9) ----------
Nur mit interpolate-size und ohne reduzierte Bewegung. Firefox und ältere
Safari öffnen sofort, ohne Übergang. Ohne JavaScript funktioniert beides. */
@media (prefers-reduced-motion: no-preference) {
@supports (interpolate-size: allow-keywords) {
.faq__list {
interpolate-size: allow-keywords;
}
.faq__item::details-content {
block-size: 0;
overflow: clip;
/* Fokusringe von Links am Zeilenanfang (Offset 3 px) bleiben sichtbar. */
overflow-clip-margin: 6px;
transition: block-size var(--dur-2) var(--ease-cut), content-visibility var(--dur-2) allow-discrete;
}
.faq__item[open]::details-content {
block-size: auto;
}
}
}
/* ===== 63-cta-band.css ===== */
/* =========================================================================
63 · cta_band: Schluss-Panel (Besitz: Team D2, Spezifikation 6.16)
Markup: template-parts/sections/cta_band.php
Mitgenutzt von: footer.php (footer-cta, Team A). Der footer-cta steht ohne
Panel auf Studio und ergänzt seine eigenen Regeln in 33-footer.css; alles
hier ohne Varianten-Modifier gilt deshalb für beide.
.cta-band__inner[--panel|--deep|--teal][--split|--solo][--mark]
.cta-band__main Kicker · Titel mit Tafel · Intro · Buttons · Beruhigung
.cta-band__side Zeitmarke (Signatur), Bild im Sucherrahmen oder
.cta-band__hosts (Gesichter am Absender)
Signatur: Zeitmarke. Die Untertitel-Tafel im Titel zählt zur Seitenregel
(höchstens drei Tafeln). Kein Verlauf, kein Radial-Blob, kein Schatten,
keine Mikrofon-Illustration, keine Einblendung. --mark: Die Seitenspalte
ist die Zeitmarke (nur wenn der Titel die Minuten nennt, cta_band.php);
Anordnung siehe „Zeitmarke als Einheit“ unten, der Zeitraffer steht in
17-timemark.css und 34-timemark.js.
Spezifität (8.5.4): höchstens eine Klasse plus ein Zustand. Fremde Klassen
im Inneren (.btn, .frame, .timemark__value) stehen in :where() und zählen
nicht mit. Die Regeln gewinnen über die spätere Position im Build, und der
footer-cta (Team A) kann sie mit einer einfachen Regel überschreiben.
========================================================================= */
/* ---------- Aufbau ---------- */
.cta-band__inner {
/* Weiß 78 % (#CACFCF, 10,27:1) und Weiß 70 % (#B6BDBE, 8,48:1) nennt 6.16
ausdrücklich für Intro und Beruhigungszeile auf Studio. Auf Sektion teal
kämen sie nur auf 4,51 bzw. 3,97:1, dort gilt --text-soft (siehe unten). */
--cta-band-intro: rgb(255 255 255 / 78%);
--cta-band-note: rgb(255 255 255 / 70%);
display: grid;
/* FIX: minmax(0, 1fr) statt auto: Ohne Deckelung wird die Spur so breit
wie der breiteste Inhalt (lange Wörter im Titel, Buttons) und schiebt
den Text auf dem Handy aus dem Bild. */
grid-template-columns: minmax(0, 1fr);
row-gap: 2.5rem;
align-items: end;
color: var(--text);
}
/* FIX: Rasterkinder dürfen schrumpfen, sonst sprengt ein langes Wort die Spalte. */
.cta-band__main,
.cta-band__side {
min-width: 0;
}
/* Ohne Seitenspalte: einspaltig mit Lesebreite 48rem (6.16, Punkt 3). */
.cta-band__inner--solo {
grid-template-columns: minmax(0, 48rem);
}
/* FIX (Befund cta-band-solo-leerflaeche): 6.16 Punkt 3 meint das Panel,
nicht nur die Spur. Das Studio-Panel blieb 1216 px breit und rahmte eine
zu 41 % leere rechte Hälfte. Ohne Seitenspalte ist das Panel deshalb
höchstens 48rem Satzbreite plus Padding breit (border-box, 02-base.css),
linksbündig im Container. Auf Sektion teal und deep gibt es kein Panel,
dort läuft der Grund ohnehin über die volle Breite. */
@media (min-width: 48rem) {
.cta-band__inner--solo:where(.cta-band__inner--panel) {
max-width: calc(48rem + 2 * clamp(2.5rem, 5vw, 4.5rem));
}
}
/* ---------- Grund je Hintergrund ---------- */
/* white und mist: Studio-Panel. Die Tokens und die Grundfarbe liefert
.theme-studio (00-tokens.css, 03-layout.css); hier nur Form und Luft.
375 px: 2rem 1.25rem. */
.cta-band__inner--panel {
padding: 2rem 1.25rem;
border-radius: var(--r-panel);
}
@media (min-width: 48rem) {
.cta-band__inner--panel {
padding: clamp(2.5rem, 5vw, 4.5rem);
}
}
/* deep: kein Panel, Inhalt direkt auf Studio.
ABWEICHUNG von 6.16 („oben 1px Weiß 12 %“), begründet (Befund
cta-deep-footer-uebergang): Nach einer hellen Sektion trennt schon der
Wechsel von Weiß/Kreide zu Studio. Die Linie stand dann 64 bis 115 px tief
im Dunkel und trennte nichts. Sie erscheint deshalb nur, wo zwei
Studio-Flächen aneinanderstoßen, also nach einer deep-Sektion; dort
halbiert 03-layout.css den oberen Abstand ohnehin. :where() hält die
Spezifität bei einer Klasse (8.5.4). */
.cta-band__inner--deep:where(.section--bg-deep + .section--cta-band *) {
padding-top: clamp(2.5rem, 5vw, 4rem);
border-top: 1px solid var(--line);
}
/* teal: kein Panel. Titeltafel weiß mit #156A72-Schrift und Primärbutton
kommen aus den Tokens von .section--bg-teal. Weiß 78 %/70 % wären hier zu
schwach, --text-soft (#D5E4E6) hält 4,82:1. */
.cta-band__inner--teal {
--cta-band-intro: var(--text-soft);
--cta-band-note: var(--text-soft);
}
/* ---------- Text ---------- */
/* Archivo 800, --fs-cta (30 px bei 375). line-height 1.16 setzt
06-highlight.css, damit Tafeln keine Unterlängen der Zeile darüber
verdecken.
FIX: Breite über --stretch-title (94 %, unter 24rem 86 %, 00-tokens.css)
statt fest 94 % plus eigener 24rem-Regel. „30-Minuten-Gespräch“ oder
„Herumprobieren“ passen bei 320 px im Panel (Satzbreite 244 px) nur mit
86 %; so gilt dieselbe Stufe wie für alle anderen Titel. */
.cta-band__title {
margin: 0;
color: var(--text);
font-size: var(--fs-cta);
font-weight: 800;
font-stretch: var(--stretch-title);
letter-spacing: -.01em;
}
.cta-band__intro {
max-width: 40rem;
margin: 1.25rem 0 0;
color: var(--cta-band-intro);
font: 400 1.125rem/1.55 var(--font-text);
}
.cta-band__actions {
margin-top: 2rem;
}
.cta-band__reassurance {
max-width: 40rem;
margin: 1rem 0 0;
color: var(--cta-band-note);
font: 400 var(--fs-xs)/1.5 var(--font-text);
}
/* 375 px: Buttons untereinander über die volle Breite, Primär zuerst (4.5).
Wirkt wie .btn--block, nur unterhalb von 48rem. Gilt auch im footer-cta,
dessen Button-Reihe dieselbe Klasse trägt (footer.php).
FIX (Befund button-label-umbruch-mobil): Bricht ein Label doch zweizeilig
um, standen ein 66 px hoher Primärbutton und ein 56 px hoher Ghost
untereinander. Das einspaltige Raster mit gleich hohen Zeilen (1fr) gleicht
beide an. align-items: stretch hebt das center aus .btn-row auf,
minmax(0, 1fr) dessen flex-start, sonst schrumpfte die Spalte auf die
Breite des längsten Labels. */
@media (max-width: 47.99rem) {
.cta-band__actions {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-auto-rows: 1fr;
align-items: stretch;
}
.cta-band__actions > :where(.btn) {
display: flex;
width: 100%;
}
.cta-band__actions :where(.btn__label) {
flex: 1;
}
}
/* ---------- Seitenspalte ---------- */
/* Bild im Sucherrahmen: höchstens 16rem breit, Marken aus --mark
(#2FAFAF auf Studio 6,06, Weiß auf Sektion teal). */
.cta-band__side > :where(.frame) {
max-width: 16rem;
}
/* ---------- Gesichter am Absender (.cta-band__hosts) ----------
Zwei Fassungen, gewählt nach dem Platz, nicht nur nach dem Viewport:
Zeilen: je Person ein 4rem-Porträt mit der Bauchbinde daneben (ein 64 px
breites Bild trüge keine überhängende Tafel). Unter 62rem unter der
Beruhigungszeile, bei 375 px untereinander, ab 48rem nebeneinander; ab
62rem auch in einer Seitenspalte unter 22.75rem (Panel bei 992 bis
1280 px). Marken 14 px mit 6 px Versatz, sonst wirkt der Rahmen schwerer als das Gesicht;
1.5rem Zeilenabstand, damit die Ecken beider Rahmen (6 px außerhalb des
Bildes) nicht aneinanderstoßen.
Paar: ab 62rem und 22.75rem Spaltenbreite zwei 4:5-Porträts mit
überhängender Bauchbinde. 22.75rem, weil erst dann jedes Porträt 165 px
breit ist und der Name („Benjamin Schuler“, 149 px plus Einzug) in der
Tafel einzeilig bleibt; darunter brach bei 1024 px sogar
„Geschäftsfü-hrer“ mitten im Wort.
Die Spaltenbreite fragt eine Container-Abfrage auf der Hülle ab
(container-type nur hier, nicht am Header, 4.1). Farben ohne eigene Regel:
Marken aus --mark, Bauchbinde aus --l3-* (Panel, deep und teal kippen die
Tokens selbst). */
.cta-band__hosts {
container: cta-band-hosts / inline-size;
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 1.5rem 2rem;
}
.cta-band__host {
--mark-len: 18px;
/* Basis 0 mit Obergrenze statt Basis 11rem: Mit flex-wrap bräche das Paar
sonst in zwei Zeilen um, bevor es schrumpft. */
flex: 1 1 0;
max-width: 11rem;
margin: 0 0 1.5rem;
}
/* Das Paar: das zweite Porträt 1.5rem höher, damit die Bauchbinden nicht
auf einer Linie stehen (wie das Gründer-Duo in 6.14, gespiegelt, weil die
Spalte unten auf der Beruhigungszeile steht). frame--overlap hält unter
jedem Bild 1.5rem für den Überhang frei. */
.cta-band__host:nth-child(2) {
margin-bottom: 3rem;
}
/* Zeilen-Fassung. Zweimal notiert, weil eine Regel nicht zugleich an einer
Media- und einer Container-Abfrage hängen kann. :where() hält die
Spezifität bei einer Klasse (8.5.4); die Regeln gewinnen über die
Reihenfolge im Build gegen 12-frame.css und 13-lower-third.css. */
@media (max-width: 61.99rem) {
.cta-band__host,
.cta-band__host:nth-child(2) {
--mark-len: 14px;
--mark-off: 6px;
display: grid;
flex: 1 1 100%;
max-width: none;
grid-template-columns: 4rem minmax(0, 1fr);
column-gap: 1.25rem;
align-items: center;
margin: 0;
}
.cta-band__host > :where(.frame__cap) {
margin: 0;
}
.cta-band__host :where(.l3--overlap) {
position: static;
max-width: 100%;
transform: none;
}
}
@media (min-width: 48rem) and (max-width: 61.99rem) {
.cta-band__host,
.cta-band__host:nth-child(2) {
flex: 0 1 20rem;
}
}
@media (min-width: 62rem) {
@container cta-band-hosts (max-width: 22.74rem) {
.cta-band__host,
.cta-band__host:nth-child(2) {
--mark-len: 14px;
--mark-off: 6px;
display: grid;
flex: 1 1 100%;
max-width: none;
grid-template-columns: 4rem minmax(0, 1fr);
column-gap: 1.25rem;
align-items: center;
margin: 0;
}
.cta-band__host > :where(.frame__cap) {
margin: 0;
}
.cta-band__host :where(.l3--overlap) {
position: static;
max-width: 100%;
transform: none;
}
}
}
/* ---------- Zeitmarke als Seitenspalte (.cta-band__inner--mark) ----------
ABWEICHUNG von 6.16 („Tablet: Zeitmarke unter den Buttons“, „align-items:
end“), begründet (Befund „Zeitmarke 30:00 ist statische Deko“): Unten
rechts schwebte die Zahl ohne Bezug, rechts oben blieb Leere, und mobil
hing sie als Nachklapp unter den Buttons.
Unter 62rem: Kopfzeile über Kicker und Titel. Timecode und Clip stehen in
einer Zeile wie die Zeitleiste eines Players; der Clip füllt die Breite
neben der Zahl und sitzt auf ihrer Grundlinie. order verschiebt nur die
Darstellung: Die Spalte ist aria-hidden und enthält nichts Fokussierbares,
Lese- und Tabreihenfolge bleiben unberührt.
Ab 62rem: Timecode und Leiste als Einheit mittig neben dem Text
(siehe „Zeitmarke als Einheit“ unten).
Gilt auch im footer-cta (footer.php setzt dieselbe Klasse), ergänzt in
33-footer.css.
:where() hält die Spezifität bei einer Klasse (8.5.4). */
@media (max-width: 61.99rem) {
.cta-band__inner--mark {
--timemark-fs: 3.5rem;
row-gap: 1.75rem;
}
.cta-band__side:where(.cta-band__inner--mark > *) {
order: -1;
}
.timemark:where(.cta-band__inner--mark *) {
display: flex;
align-items: baseline;
column-gap: 1rem;
}
/* Ohne Text liegt die Grundlinie des Clips an seiner Unterkante: Die
Leiste steht damit auf der Schriftlinie der Ziffern. */
.timemark__clip:where(.cta-band__inner--mark *) {
flex: 1 1 0;
min-width: 0;
margin-top: 0;
}
}
@media (min-width: 48rem) and (max-width: 61.99rem) {
.cta-band__inner--mark {
--timemark-fs: 4.5rem;
row-gap: 2rem;
}
.timemark:where(.cta-band__inner--mark *) {
column-gap: 1.5rem;
}
}
/* ---------- Ab 62rem zweispaltig ---------- */
@media (min-width: 62rem) {
.cta-band__inner--split {
grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
column-gap: 4rem;
align-items: end;
}
}
/* ---------- Zeitmarke als Einheit (ab 62rem, white/mist und teal) ----------
ABWEICHUNG von 5.8 und 6.16 („Monitor“ und „Clip am Fuß“ aus Runde 3),
begründet (Befund „Zeitmarke 30:00 fast überall in gleicher Komposition“,
Abnahme Runde 3): Der Timecode stand oben rechts an der Titelzeile, die
Trim-Leiste abgelöst am Fuß des Panels, dazwischen 250 bis 300 px leere
Spalte. Jetzt bilden Timecode und Leiste eine Einheit wie die Anzeige
eines Players:
- Die Leiste steht direkt unter den Ziffern (Abstand in 17-timemark.css)
und ist genau so breit wie der Timecode. .cta-band__side schrumpft
dafür auf ihren Inhalt (justify-self); der Clip hat mit
container-type keine eigene Breite und folgt der Zeile darüber.
- Die Einheit steht vertikal mittig neben dem Text (align-items: center)
und rechts bündig mit der Satzkante des Panels bzw. des Containers.
So bleibt über und unter ihr gleich viel Luft, statt dass sich unten
eine Leerfläche sammelt.
- Das Panel braucht kein zusätzliches Padding mehr für eine Zeitleiste
am Fuß; das Band ist so hoch wie sein Text.
Die Zeitmarke erscheint nur noch, wo der Titel die Minuten nennt
(cta_band.php); die übrigen Bänder tragen Gesichter oder stehen
einspaltig. deep behält die breite Kopfzeile (unten), der footer-cta
dieselbe Einheit (33-footer.css).
:where() hält die Spezifität bei einer Klasse (8.5.4). */
@media (min-width: 62rem) {
.cta-band__inner--mark {
--timemark-fs: var(--fs-time);
align-items: center;
}
.cta-band__side:where(.cta-band__inner--mark > *) {
justify-self: end;
}
/* deep: Kopfzeile über die volle Breite, Timecode links, Clip daneben auf
seiner Grundlinie. Die Textspalte behält die Breite, die sie im Split
hätte (7 von 11 Teilen), damit Titel und Intro nicht zu langen Zeilen
auseinanderlaufen. */
.cta-band__inner--deep:where(.cta-band__inner--mark) {
grid-template-columns: minmax(0, 1fr);
row-gap: 2.5rem;
}
.cta-band__main:where(.cta-band__inner--deep.cta-band__inner--mark > *) {
max-width: calc((100% - 4rem) * 7 / 11);
}
.cta-band__side:where(.cta-band__inner--deep.cta-band__inner--mark > *) {
order: -1;
justify-self: stretch;
}
.timemark:where(.cta-band__inner--deep *) {
display: flex;
align-items: baseline;
column-gap: 2rem;
}
.timemark__clip:where(.cta-band__inner--deep *) {
flex: 1 1 0;
min-width: 0;
margin-top: 0;
}
}
/* ===== 64-form-section.css ===== */
/* =========================================================================
64 · form: Erstgespräch (Besitz: Team D2, Spezifikation 6.17)
Markup: template-parts/sections/form.php
.form-section__layout
.form-section__head Sektionskopf (stack), H1 mit Tafel
.form-section__hosts Gesichter am Absender (Sucherrahmen, Bauchbinde)
.form-section__main klebender Block der rechten Spalte
.form-card Contact Form 7 bzw. Ersatzdarstellung
.form-section__trust Vertrauenspunkte als ruhige Zeile
.form-section__alt Kalender-Alternative, direkt unter der Karte
.form-section__benefits .checks
.form-section__voice Kundenstimme (oton--kurz)
Feldoptik, Fehler, Antwortbox und Submit liefert 11-forms.css (F1).
Hier stehen nur Raster, Karte und Abstände. Kein Schatten, kein Verlauf,
nichts zentriert.
Abstände über margin statt row-gap: Fehlt ein optionaler Block (Benefits,
Stimme, Kalender), bleibt keine doppelte Lücke im Raster stehen.
Abweichung zu 6.17, begründet (Einzelheiten in form.php): Karte und
Kalender-Alternative teilen sich .form-section__main. Als eigenes
Rasterelement stand die Alternative ab 62rem unter der ganzen linken
Spalte statt unter der Karte, mit bis zu 530 px Leerraum dazwischen.
Mobile Reihenfolge damit: Kopf, Gesichter, Karte, Kalender, Benefits,
Stimme.
Signatur: Sucherrahmen an den Porträts, sofern der Text Personen nennt.
========================================================================= */
.form-section__layout {
display: grid;
/* FIX: minmax(0, 1fr): Ein select ist so breit wie seine längste Option
und zöge eine 1fr-Spur samt Karte über den Bildschirmrand. */
grid-template-columns: minmax(0, 1fr);
}
/* FIX: Rasterkinder dürfen schrumpfen, sonst sprengt ein langes Wort die Spalte. */
.form-section__head,
.form-section__hosts,
.form-section__main,
.form-section__voice {
min-width: 0;
}
/* ---------- Gesichter am Absender ----------
Zwei Fassungen, gewählt nach dem Platz (gleiches Muster wie
.cta-band__hosts in 63-cta-band.css):
Zeilen, unter 62rem: kompakt, damit der Weg zum Formular kurz bleibt. Je
Person ein 4rem-Porträt mit der Bauchbinde daneben statt darüber (ein
64 px breites Bild trüge keine überhängende Tafel). Bei 375 px zwei
Zeilen von je 80 px, ab 48rem beide nebeneinander. Marken 14 px mit 6 px
Versatz statt 16/22 px, sonst wirkt der Rahmen schwerer als das Gesicht. 1.5rem
Zeilenabstand: Die Marken liegen 6 px außerhalb jedes Bildes, bei
weniger Luft stießen die Ecken beider Rahmen aneinander.
Paar, ab 62rem in der linken Spalte unter dem Intro: zwei 4:5-Porträts,
höchstens 12rem breit, das zweite 1.5rem tiefer wie das Gründer-Duo im
Team (6.14). Die Bauchbinde hängt über die Unterkante (frame--overlap
hält 1.5rem frei) und deckt nur Jacke, nie Gesicht. Unter 22.75rem
Spaltenbreite (992 px) fiele jedes Porträt unter 165 px, der Name brach
in der Tafel um; dort bleibt die Zeilen-Fassung. Der Abstand von 2rem
nimmt den 1rem-Überhang der zweiten Tafel nach links und die 10px-Marken
beider Rahmen auf. */
.form-section__hosts {
container: form-section-hosts / inline-size;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 1.5rem 2rem;
margin: 0 0 2.5rem;
}
.form-section__host {
--mark-len: 18px;
/* Basis 0 mit Obergrenze statt Basis 12rem: Mit flex-wrap bräche das Paar
sonst in zwei Zeilen um, bevor es schrumpft. */
flex: 1 1 0;
max-width: 12rem;
margin: 0 0 1.5rem;
}
.form-section__host:nth-child(2) {
margin-top: 1.5rem;
}
/* Zeilen-Fassung. Zweimal notiert, weil eine Regel nicht zugleich an einer
Media- und einer Container-Abfrage hängen kann. :where() hält die
Spezifität bei einer Klasse (8.5.4); die Regeln gewinnen über die
Reihenfolge im Build gegen 12-frame.css und 13-lower-third.css. */
@media (max-width: 61.99rem) {
.form-section__host,
.form-section__host:nth-child(2) {
--mark-len: 14px;
--mark-off: 6px;
display: grid;
flex: 1 1 100%;
max-width: none;
grid-template-columns: 4rem minmax(0, 1fr);
column-gap: 1.25rem;
align-items: center;
margin: 0;
}
.form-section__host > :where(.frame__cap) {
margin: 0;
}
.form-section__host :where(.l3--overlap) {
position: static;
max-width: 100%;
transform: none;
}
}
@media (min-width: 48rem) and (max-width: 61.99rem) {
.form-section__host,
.form-section__host:nth-child(2) {
flex: 0 1 20rem;
}
}
@media (min-width: 62rem) {
@container form-section-hosts (max-width: 22.74rem) {
.form-section__host,
.form-section__host:nth-child(2) {
--mark-len: 14px;
--mark-off: 6px;
display: grid;
flex: 1 1 100%;
max-width: none;
grid-template-columns: 4rem minmax(0, 1fr);
column-gap: 1.25rem;
align-items: center;
margin: 0;
}
.form-section__host > :where(.frame__cap) {
margin: 0;
}
.form-section__host :where(.l3--overlap) {
position: static;
max-width: 100%;
transform: none;
}
}
}
/* ---------- Formularkarte ----------
Grund --surface: auf Sektion white Kreide #EEF2F1, auf mist Weiß, auf
deep #153438, auf teal #12545B. Die Felder bleiben überall weiß mit
Tintenschrift (11-forms.css). Radius 4px, 1px --line, kein Schatten.
375 px: Kartenpadding 1.25rem. */
.form-card {
min-width: 0;
padding: 1.25rem;
background: var(--surface);
color: var(--text);
border: 1px solid var(--line);
border-radius: var(--r-panel);
}
@media (min-width: 48rem) {
.form-card {
padding: clamp(1.5rem, 3vw, 2.5rem);
}
}
/* ---------- Benefits ---------- */
/* .checks (Haken 18 px, --accent-text) aus 16-lists-checks-stars.css.
Schibsted 16 px/1.5, Abstand .875rem. */
.form-section__benefits {
gap: .875rem;
margin: 2.5rem 0 0;
color: var(--text);
font: 400 1rem/1.5 var(--font-text);
}
/* ---------- Kundenstimme ---------- */
.form-section__voice {
margin-top: 2.5rem;
}
/* ---------- Vertrauenspunkte in der Karte ----------
Eine ruhige Zeile unter dem Absenden-Button: Schibsted 14 px --text-soft,
Pixelquadrate aus .bullets (16-lists-checks-stars.css), abgesetzt durch
1px --line wie die Kalender-Alternative. Die Punkte laufen nebeneinander
und brechen als Ganzes um, statt als dritte Liste der Seite zu wirken.
Kontrast --text-soft auf Kreide 6,9:1, auf Weiß 7,51:1. */
.form-section__trust {
display: flex;
flex-wrap: wrap;
gap: .5rem 1.5rem;
margin: 1.5rem 0 0;
padding-top: 1.25rem;
border-top: 1px solid var(--line);
color: var(--text-soft);
font: 400 var(--fs-xs)/1.5 var(--font-text);
}
/* ---------- Kalender-Alternative ----------
Vorhandener Satz in Schibsted 15 px --text-soft plus .arrow-link,
oben 1px --line und 1.25rem Luft. Steht unter der Karte im selben Block. */
.form-section__alt {
margin: 1.5rem 0 0;
padding-top: 1.25rem;
border-top: 1px solid var(--line);
color: var(--text-soft);
font: 400 var(--fs-small)/1.5 var(--font-text);
}
/* ---------- Ab 62rem: Kopf, Gesichter, Benefits und Stimme links, Karte rechts ----------
Die letzte Zeile ist 1fr: Ist der Hauptblock höher als die linke Spalte,
nimmt die Stimme-Zeile den Rest auf, und zwischen Kopf, Gesichtern und
Benefits entsteht keine Lücke. Fehlen Gesichter, bleibt ihre Zeile 0 hoch
(Abstände über margin). Die Kalender-Alternative wandert mit der Karte. */
@media (min-width: 62rem) {
.form-section__layout {
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
grid-template-rows: auto auto auto 1fr;
grid-template-areas:
"head form"
"hosts form"
"benefits form"
"voice form";
column-gap: clamp(2rem, 5vw, 5rem);
}
.form-section__head {
grid-area: head;
}
.form-section__hosts {
grid-area: hosts;
margin: 2.75rem 0 0;
}
/* Der Sektionskopf bringt seinen Abstand zum Inhalt mit (--head-gap);
neben der Karte zählt nur der Zeilenabstand von 2rem. :where() hält die
Spezifität bei einer Klasse (8.5.4), die Regel gewinnt über die
Reihenfolge gegen 05-section-header.css. */
.form-section__head > :where(.section__header) {
margin-bottom: 0;
}
.form-section__main {
grid-area: form;
/* Ohne start würde der Block auf die Höhe der linken Spalte gestreckt
und könnte nicht kleben. */
align-self: start;
}
.form-section__benefits {
grid-area: benefits;
margin-top: 2rem;
}
.form-section__voice {
grid-area: voice;
margin-top: 2rem;
}
}
/* Karte und Kalender-Alternative kleben gemeinsam unter dem Header, solange
die linke Spalte weiterläuft.
Abweichung zu 6.17 (min-height 44rem), begründet: Die Karte mit dem
Standardformular ist bei 1280 px rund 42rem hoch (667 px gemessen), mit
der Alternative darunter 46rem (736 px), bei 992 px 47,6rem (762 px). Bei
44rem Fensterhöhe blieben nach Header und 2rem Luft nur 37,5rem; der
Absenden-Button und die Alternative stünden dauerhaft unter dem
Fensterrand, bis die Sektion endet. Ab 55rem (880 px) passt der Block
samt Header und Luft (höchstens 866 px) vollständig ins Fenster. */
@media (min-width: 62rem) and (min-height: 55rem) {
.form-section__main {
position: sticky;
top: calc(var(--header-h) + 2rem);
}
}
/* ===== 65-packages.css ===== */
/* =========================================================================
65 · packages: Pakete (Besitz: Team D2, Spezifikation 6.18)
Markup: template-parts/sections/packages.php
.packages__grid.packages__grid--count-N | --many
article.package[.package--featured.trim.is-trimmed.theme-studio | .package--raised]
h3.package__name · p.l3__name.package__label · p.package__price
p.package__text · ul.checks.package__features · .package__cta
Spalten mit Haarlinien statt Karten: kein Rahmen, kein Schatten, keine
Akzentleiste, keine Pille. Das hervorgehobene Paket ist ein Studio-Panel
mit festen Trim-Griffen (Grammatik, 5.5).
Abweichung zu 6.18, begründet: Die Spec nennt
repeat(auto-fit, minmax(min(100%, 19rem), 1fr)). auto-fit ergäbe bei drei
Paketen zwischen 42 und 63rem zwei Spalten plus ein verwaistes drittes
Paket, dessen linke Haarlinie am Zeilenanfang stünde (9.9). Die Spalten
folgen deshalb der Anzahl, mit derselben Mindestbreite von rund 19rem:
1 Paket eine Spalte, höchstens 36rem
2 Pakete zwei Spalten ab 48rem
3 Pakete drei Spalten ab 62rem, auf dem Tablet gestapelt mit
zweispaltigem Innenaufbau
4 Pakete 2 × 2 ab 48rem, vier Spalten ab 82rem (erst dort ist der
Container 76rem breit und jede Spalte 19rem)
5 und mehr drei Spalten ab 62rem
Spezifität (8.5.4): höchstens eine Klasse plus ein Zustand. Rasterzustand
und Nachbarklasse stehen deshalb in :where() und zählen nicht mit; die
Regeln setzen sich über ihre Reihenfolge in dieser Datei durch. So kann
jede spätere einfache Klassenregel sie überschreiben.
========================================================================= */
/* ---------- Raster ---------- */
.packages__grid {
display: grid;
/* FIX: minmax(0, 1fr), damit kein langes Wort eine Spalte aufdrückt. */
grid-template-columns: minmax(0, 1fr);
gap: 0;
align-items: stretch;
}
.packages__grid--count-1 {
grid-template-columns: minmax(0, 36rem);
}
/* ---------- Spalte ----------
375 px: gestapelt, Trenner oben (border-top). Die Linienbreiten setzen die
Raster-Zustände unten; die Farbe steht einmal hier. */
.package {
display: flex;
flex-direction: column;
/* FIX: Flex- und Rasterkinder ohne min-width: 0 dehnen die Spalte auf. */
min-width: 0;
padding: 2rem 0;
border: 0 solid var(--line);
color: var(--text);
}
.package + :where(.package) {
border-top-width: 1px;
}
/* Name: Archivo 760 1.625rem. */
.package__name {
margin: 0;
color: var(--text);
font: 760 1.625rem/1.15 var(--font-display);
font-stretch: 100%;
letter-spacing: -.005em;
text-wrap: balance;
}
/* „Empfohlen“ als Namenstafel (.l3__name aus 13-lower-third.css) über dem
Namen. Im DOM steht die Tafel hinter dem Namen, order holt sie optisch
nach oben. Auf Studio Weiß auf #1C818B (4,60). */
.package__label {
order: -1;
align-self: flex-start;
/* Im Tablet-Raster (unten) sonst spaltenbreit gestreckt. */
justify-self: start;
max-width: 100%;
margin-bottom: 1rem;
}
/* Preis: Archivo 820, stretch 100 %, 2rem, tabellarische Ziffern.
Text, keine Walze (5.7: nicht an Preisen). */
.package__price {
margin: .75rem 0 0;
color: var(--text);
font: 820 2rem/1.1 var(--font-display);
font-stretch: 100%;
font-variant-numeric: tabular-nums lining-nums;
overflow-wrap: break-word;
}
.package__text {
margin: 1rem 0 0;
color: var(--text-soft);
font: 400 1rem/1.55 var(--font-text);
}
/* Haken aus .checks (16-lists-checks-stars.css); das ✓-Glyph fehlt in allen
Theme-Schriften, der Haken ist deshalb eine CSS-Maske. */
.package__features {
margin: 1.5rem 0 0;
color: var(--text);
font: 400 1rem/1.5 var(--font-text);
}
/* Button am Fuß der Spalte, alle Buttons einer Reihe auf einer Linie. */
.package__cta {
margin-top: auto;
padding-top: 2rem;
}
/* ---------- Hervorgehobenes Paket ----------
Studio-Panel (.theme-studio) mit Radius 4px und festen Trim-Griffen in
Gelb (9,97 auf Studio). 375 px: ohne Überstand, Padding 1.5rem. */
.package--featured {
padding: 1.5rem;
border-color: transparent;
border-radius: var(--r-panel);
}
/* Die Haarlinie direkt neben dem Panel entfällt, das Panel trennt selbst.
Aber nur die Linie, die tatsächlich am Panel anliegt. Nebeneinander ist
das die Linie links. Die obere Linie des Nachfolgers bleibt, denn im
2 × 2- und im Dreierraster beginnt er eine neue Zeile, wenn das Panel in
der letzten Spalte steht, und trennt dort vom Paket darüber (9.9). Nur wo
gestapelt wird, liegt die obere Linie direkt am Panel (siehe unten). */
.package--featured + :where(.package) {
border-inline-start-color: transparent;
}
@media (max-width: 47.99rem) {
.package--featured + :where(.package) {
border-top-color: transparent;
}
}
/* Die Griffe folgen dem Radius des Panels, statt als eckige Spitzen über die
runden Ecken zu stehen. */
.package--featured::after {
border-radius: inherit;
}
/* Auf Sektion deep: zweite dunkle Ebene statt Studio auf Studio. Die Kerbe im
Griff nimmt dieselbe Fläche an. */
.package--raised {
--notch: var(--surface);
background: var(--surface);
}
/* ---------- Tablet: gestapelt mit zweispaltigem Innenaufbau ----------
Drei (oder mehr) Pakete stehen zwischen 48 und 62rem untereinander. Eine
Spalte über 700 bis 900 px wäre leer; Name, Preis, Text und Button
stehen deshalb links, die Leistungen rechts. */
@media (min-width: 48rem) and (max-width: 61.99rem) {
:where(.packages__grid--count-3, .packages__grid--many) > .package {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-rows: auto auto auto 1fr auto;
grid-template-areas:
"label features"
"name features"
"price features"
"text features"
"cta features";
column-gap: 2rem;
align-items: start;
}
:where(.packages__grid--count-3, .packages__grid--many) > .package--featured {
padding: 2rem;
}
/* Gestapelt: Der Nachfolger steht direkt unter dem Panel. */
:where(.packages__grid--count-3, .packages__grid--many) > .package--featured + :where(.package) {
border-top-color: transparent;
}
.package__label {
grid-area: label;
}
.package__name {
grid-area: name;
}
.package__price {
grid-area: price;
}
.package__text {
grid-area: text;
}
.package__features {
grid-area: features;
}
.package__cta {
grid-area: cta;
}
:where(.packages__grid--count-3, .packages__grid--many) .package__features {
margin-top: 0;
}
:where(.packages__grid--count-3, .packages__grid--many) .package__cta {
align-self: end;
padding-top: 1.5rem;
}
}
/* ---------- Mehrspaltig: Haarlinien links, Überstand des Panels ---------- */
@media (min-width: 48rem) {
.packages__grid--count-2,
.packages__grid--count-4 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
:where(.packages__grid--count-2, .packages__grid--count-4) > .package {
padding: 2rem;
}
:where(.packages__grid--count-2) > .package + :where(.package) {
border-top-width: 0;
border-inline-start-width: 1px;
}
/* 2 × 2: Paket 2 und 4 mit Linie links, Paket 3 und 4 mit Linie oben. */
:where(.packages__grid--count-4) > .package:nth-child(2) {
border-top-width: 0;
}
:where(.packages__grid--count-4) > .package:nth-child(even) {
border-inline-start-width: 1px;
}
/* Ragt oben und unten 1rem heraus. Das Padding wächst um denselben Betrag,
damit die Inhalte mit den Nachbarspalten auf einer Höhe beginnen. */
:where(.packages__grid--count-2, .packages__grid--count-4) > .package--featured {
margin-block: -1rem;
padding: 3rem 2rem;
}
}
@media (min-width: 62rem) {
.packages__grid--count-3,
.packages__grid--many {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
:where(.packages__grid--count-3, .packages__grid--many) > .package {
padding: 2rem;
}
:where(.packages__grid--count-3) > .package + :where(.package) {
border-top-width: 0;
border-inline-start-width: 1px;
}
:where(.packages__grid--many) > .package:nth-child(-n + 3) {
border-top-width: 0;
}
:where(.packages__grid--many) > .package:not(:nth-child(3n + 1)) {
border-inline-start-width: 1px;
}
:where(.packages__grid--count-3, .packages__grid--many) > .package--featured {
margin-block: -1rem;
padding: 3rem 2rem;
}
}
@media (min-width: 82rem) {
.packages__grid--count-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
:where(.packages__grid--count-4) > .package + :where(.package) {
border-top-width: 0;
border-inline-start-width: 1px;
}
}
/* ---------- Außenkanten auf der Containerkante ----------
Befund split-kopf-raster: Nebeneinander hatte auch die erste und die
letzte Spalte 2rem Innenabstand. Name, Preis und Button standen dadurch
2rem rechts der Satzkante von Kopf und Intro darüber (werbevideo). Die
Außenseite der Randspalten bekommt deshalb kein Padding; die Haarlinien
stehen innen und bleiben, wo sie sind. Das Studio-Panel behält sein
Padding, es ist eine Fläche und keine Textspalte.
Rasterzustand und Position stehen in :where() (8.5.4), die Regeln
setzen sich über ihre Reihenfolge durch.
ABWEICHUNG von 6.18: nicht erst ab 82rem, sondern ab der Stufe, in der die
Pakete jeweils nebeneinander stehen. */
@media (min-width: 48rem) {
:where(.packages__grid--count-2) > .package:where(:first-child:not(.package--featured)) {
padding-inline-start: 0;
}
:where(.packages__grid--count-2) > .package:where(:last-child:not(.package--featured)) {
padding-inline-end: 0;
}
}
@media (min-width: 62rem) {
:where(.packages__grid--count-3, .packages__grid--many) > .package:where(:nth-child(3n + 1):not(.package--featured)) {
padding-inline-start: 0;
}
:where(.packages__grid--count-3, .packages__grid--many) > .package:where(:nth-child(3n):not(.package--featured)) {
padding-inline-end: 0;
}
}
@media (min-width: 82rem) {
:where(.packages__grid--count-4) > .package:where(:first-child:not(.package--featured)) {
padding-inline-start: 0;
}
:where(.packages__grid--count-4) > .package:where(:last-child:not(.package--featured)) {
padding-inline-end: 0;
}
}
/* ===== 66-cases.css ===== */
/* =========================================================================
66 · cases: Fallstudien-Zeilen und Einzelansicht (Besitz: Team D2,
Spezifikation 6.19, Seitenkopf nach 6.22)
Markup: template-parts/sections/cases.php, single-smm_case.php
.cases__list[.cases__list--no-logos]
article.case-row.trim.trim--hover
.case-row__logo > img Logo-Tafel auf --surface
.case-row__body h3.case-row__title > a.case-row__link · p.case-row__text
dl.case-row__results > .case-row__result > dt.case-row__label + dd.odo.case-row__value
Zeilen statt Karten: kein Rahmen, kein Schatten, kein Hover-Lift. Die
Zeile ist über den gestreckten Titel-Link ein einziger Tabstopp. Hover und
Fokus: Trim-Griffe (14-trim.css), Titel unterstrichen, Fokusring an der
Zeile.
========================================================================= */
/* ---------- Liste und Zeile ---------- */
.cases__list {
border-top: 1px solid var(--line);
}
/* 375 px: Logo-Tafel 8 × 4.5rem oben, darunter Titel, Text und Ergebnisse
als 2er-Raster. Die seitliche Luft hält Text und Trim-Griffe (6 px)
auseinander. Ohne Rasterbereiche: Fehlt einer Zeile das Logo oder die
Ergebnisse, entsteht keine leere Rasterzeile mit Abstand. */
.case-row {
display: grid;
/* FIX: minmax(0, 1fr), sonst drückt ein langer Titel die Zeile auf. */
grid-template-columns: minmax(0, 1fr);
row-gap: 1.25rem;
padding: 1.75rem .75rem;
border-bottom: 1px solid var(--line);
color: var(--text);
}
/* Flex statt Grid: Die Höhe der Tafel ist fest, damit greift max-height: 70 %
am Logo. In einem Grid-Bereich mit auto-Zeile blieb die Prozentangabe
wirkungslos, und ein quadratisches Logo ragte unten aus der Tafel. */
.case-row__logo {
display: flex;
align-items: center;
justify-content: center;
width: 8rem;
height: 4.5rem;
background: var(--surface);
border-radius: var(--r-plate);
}
/* Logo in Originalfarbe, ohne Graustufen und ohne Opacity (6.19). */
.case-row__logo-img {
width: auto;
height: auto;
max-width: 70%;
max-height: 70%;
object-fit: contain;
}
.case-row__body {
min-width: 0;
}
/* Titel: Archivo 700 1.5rem. */
.case-row__title {
margin: 0;
color: var(--text);
font: 700 1.5rem/1.2 var(--font-display);
font-stretch: 100%;
}
/* Gestreckter Link: Das ::after deckt die ganze Zeile ab (.trim setzt
position: relative und isolation, die Zeile ist damit der Stapelkontext).
z-index 1 hebt die Fläche über positionierte Kinder. .odo bringt
position: relative mit (15-odometer.css) und läge sonst in DOM-Reihenfolge
über dem ::after: Ein Klick auf die Kennzahlen, die auffälligste Stelle der
Zeile, ginge ins Leere. Die Trim-Griffe (.trim::after, ebenfalls z-index 1)
folgen später im Baum, liegen darüber und fangen mit pointer-events: none
keine Klicks ab.
FIX: Die Unterstreichung lief in Textfarbe, in Post-Karten und Suchzeilen
dagegen in --accent-text. Kundenerfolge und Ratgeber zeigten dieselbe Geste
in zwei Farben. Gemeinsame Geste aller Zeilen und Karten mit gestrecktem
Titel-Link (5.5, 6.10, 6.21): Unterstreichung 2px in --accent-text mit
Offset .2em wie jeder Link (02-base.css), bei Hover mit echtem Zeiger und
bei Tastaturfokus; dazu der Fokusring 2px mit Offset 2px am Container. */
.case-row__link {
color: inherit;
text-decoration: none;
text-decoration-color: var(--accent-text);
text-decoration-thickness: 2px;
text-underline-offset: .2em;
}
.case-row__link::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
.case-row__link:focus-visible {
text-decoration-line: underline;
}
/* :where() hält die Spezifität bei einer Klasse plus Zustand (8.5.4). */
@media (hover: hover) {
.case-row:hover :where(.case-row__link) {
text-decoration-line: underline;
}
}
/* Fokusring an der ganzen Zeile (6.19). Der Ring des Links selbst würde nur
den Titel umrahmen; er entfällt nur dort, wo :has() den Zeilenring
tatsächlich zeichnen kann. Der Titel-Link ist das einzige fokussierbare
Element der Zeile, :has(:focus-visible) trifft also genau ihn. */
.case-row:has(:focus-visible) {
outline: 2px solid var(--focus);
outline-offset: 2px;
}
@supports selector(:has(*)) {
.case-row__link:focus-visible {
outline: none;
}
}
.case-row__text {
margin: .5rem 0 0;
color: var(--text-soft);
font: 400 1rem/1.55 var(--font-text);
}
/* ---------- Ergebnisse ----------
dt vor dd im DOM, die Zahl steht optisch oben (column-reverse). */
.case-row__results {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem 1.5rem;
margin: 0;
}
.case-row__result {
display: flex;
flex-direction: column-reverse;
justify-content: flex-end;
min-width: 0;
}
/* Archivo 820 2rem, tabellarische Ziffern (.odo ohne Walze). .odo hält die
Zahl mit nowrap zusammen; in der halben Zeilenbreite darf ein Wert wie
„über 5.000 Anfragen“ aber an Leerzeichen umbrechen, statt aus der Spalte
zu ragen. Unter 48rem wächst die Größe von 1.5rem auf 2rem: „300.000“
passt so bei 320 px in eine halbe Zeile (118 px). */
.case-row__value {
margin: 0;
color: var(--text);
font: 820 clamp(1.5rem, 1rem + 2.5vw, 2rem)/1 var(--font-display);
font-stretch: 100%;
font-variant-numeric: tabular-nums lining-nums;
white-space: normal;
overflow-wrap: break-word;
}
.case-row__label {
margin-top: .375rem;
color: var(--text-soft);
font: 400 var(--fs-small)/1.35 var(--font-text);
}
/* ---------- Tablet: Logo-Tafel links, Text und Ergebnisse rechts ---------- */
@media (min-width: 48rem) {
.case-row {
grid-template-columns: 9rem minmax(0, 1fr);
grid-template-areas:
"logo body"
"logo results";
gap: 0 2rem;
align-items: start;
padding: 2rem 1.25rem;
}
.case-row__logo {
grid-area: logo;
width: 9rem;
height: 5.25rem;
}
.case-row__body {
grid-area: body;
}
/* Abstand als Rand statt row-gap: ohne Ergebnisse bleibt unten nichts leer.
Auf dem Tablet ist die Textspalte rund 30rem breit: Drei Kennzahlen
passen nebeneinander, statt zwei plus eine verwaiste darunter. */
.case-row__results {
grid-area: results;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
margin-top: 1.25rem;
}
/* :where(): eine Klasse Spezifität (8.5.4), die Regel gewinnt über die
Reihenfolge gegen .case-row oben. */
:where(.cases__list--no-logos) .case-row {
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"body"
"results";
}
}
/* ---------- Ab 62rem: 12rem · Text · Ergebnisse (22rem) ---------- */
@media (min-width: 62rem) {
.case-row {
grid-template-columns: 12rem minmax(0, 1fr) minmax(0, 22rem);
grid-template-areas: "logo body results";
align-items: center;
gap: 2rem;
}
.case-row__logo {
width: 12rem;
height: 7rem;
}
.case-row__results {
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-top: 0;
}
:where(.cases__list--no-logos) .case-row {
grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
grid-template-areas: "body results";
}
}
.cases__cta {
margin-top: 3rem;
}
/* Regel für Sektions-CTAs (4.5): btn--lg, unter 48rem btn--block über die
volle Breite, ab 48rem in natürlicher Breite wie in allen anderen
Sektionen. :where hält die Spezifität bei einer Klasse. */
@media (min-width: 48rem) {
.cases__cta :where(.btn--block) {
display: inline-flex;
width: auto;
}
}
/* Befund sektions-cta-dichte-ausrichtung: Schließt ein Sektions-CTA eine
vollbreite Reihe ab (pain_points, channel_proof, services, process,
comparison, video_testimonials, cases), steht er ab 62rem rechtsbündig an
der Containerkante. Vorher sprang der Button auf Seiten wie
kundenstimmen-video von Sektion zu Sektion zwischen rechts und links.
CTAs in einer Textspalte (hero, text_media, cta_band) bleiben an deren
Textkante. ABWEICHUNG von 6.19 (dort „linksbündig“), Regel in 4.5. */
@media (min-width: 62rem) {
.cases__cta {
justify-content: flex-end;
}
}
/* =========================================================================
Einzelansicht Kundenerfolg (single-smm_case.php)
========================================================================= */
/* Seitenkopf: etwas knapper als eine Sektion, wie der Hero (6.3). */
.section--case-head {
--section-pad: clamp(2.5rem, 5vw, 4.5rem);
}
.case-head {
display: grid;
grid-template-columns: minmax(0, 1fr);
row-gap: 1.5rem;
}
.case-head__text {
min-width: 0;
}
/* Logo-Tafel wie in der Zeile. 375 px: 8 × 4.5rem über dem Kicker. */
.case-head__logo {
display: flex;
align-items: center;
justify-content: center;
width: 8rem;
height: 4.5rem;
background: var(--surface);
border-radius: var(--r-plate);
}
.case-head__logo-img {
width: auto;
height: auto;
max-width: 70%;
max-height: 70%;
object-fit: contain;
}
/* H1 Seitenkopf: Archivo 800, stretch 94 %, --fs-h1-page, höchstens 20ch
(Größe und Gewicht aus 02-base.css). */
.case-head__title {
max-width: 20ch;
}
/* FIX: Lead mobil in Fließtextgröße, erst ab 48rem in --fs-lead, wie
.hero__intro (40-hero.css) und .section__intro (05-section-header.css).
19 px auf 320 px wirkten neben der H1 wie eine zweite Überschrift. */
.case-head__lead {
max-width: 42rem;
margin: 1.5rem 0 0;
color: var(--text-soft);
font: 400 var(--fs-body)/1.55 var(--font-text);
}
@media (min-width: 48rem) {
.case-head__lead {
font-size: var(--fs-lead);
}
}
/* Trennpunkt ist Dekoration (aria-hidden), deshalb die leise UI-Linienfarbe. */
.case-head__sep {
color: var(--line-ui);
}
/* FIX: Branche und Zeitraum standen in Schibsted 600, die Metazeile mit
gleicher Rolle im Artikelkopf, in Post-Karten und Suchtreffern (Inhaltstyp,
Datum) aber in Plex Mono. Der Zeitraum ist eine echte Datenangabe (Regel 3,
3.4 Mono-Daten), deshalb dieselbe Stimme wie .article__meta: Plex Mono 500
13 px, ls .02em, Abstände und Grundlinie wie dort. */
.case-head__meta {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: .25rem .5rem;
margin: 1.25rem 0 0;
color: var(--text-soft);
font: 500 var(--fs-mono)/1.35 var(--font-mono);
letter-spacing: .02em;
}
@media (min-width: 62rem) {
/* Logo-Tafel rechts neben dem Kopf, obenbündig. */
.case-head--logo {
grid-template-columns: minmax(0, 1fr) 12rem;
column-gap: 2rem;
}
:where(.case-head--logo) > .case-head__logo {
grid-column: 2;
grid-row: 1;
width: 12rem;
height: 7rem;
}
:where(.case-head--logo) > .case-head__text {
grid-column: 1;
grid-row: 1;
}
}
/* ---------- Ergebnisse im Seitenkopf ----------
Jede Zahl linksbündig unter einer Haarlinie, keine Kästen. Spalten nach
Anzahl statt auto-fit, damit keine Zahl allein in einer Zeile steht. */
.case-results {
--case-results-cols: 1;
display: grid;
grid-template-columns: repeat(var(--case-results-cols), minmax(0, 1fr));
gap: 2rem clamp(1.5rem, 3vw, 3rem);
margin: var(--head-gap) 0 0;
}
.case-results--count-2,
.case-results--count-4,
.case-results--many {
--case-results-cols: 2;
}
@media (min-width: 48rem) {
.case-results--count-3,
.case-results--many {
--case-results-cols: 3;
}
}
@media (min-width: 62rem) {
.case-results--count-4 {
--case-results-cols: 4;
}
}
.case-results--count-1 {
max-width: 20rem;
}
.case-results__item {
display: flex;
flex-direction: column-reverse;
justify-content: flex-end;
min-width: 0;
padding-top: 1rem;
border-top: 1px solid var(--line);
}
/* --fs-num-s, auf dem Handy kleiner: Zwei Werte nebeneinander haben bei
320 px je 130 px, „300.000“ in 2rem wäre 142 px breit. */
.case-results__value {
margin: 0;
color: var(--text);
font: 820 min(var(--fs-num-s), 1rem + 3vw)/1 var(--font-display);
font-stretch: 100%;
font-variant-numeric: tabular-nums lining-nums;
white-space: normal;
overflow-wrap: break-word;
}
.case-results__label {
margin-top: .5rem;
color: var(--text-soft);
font: 400 var(--fs-small)/1.35 var(--font-text);
}
/* ---------- Inhalt, Kundenstimme ---------- */
/* Prosa linksbündig an der Rasterkante (6.20); die Lesebreite 68ch setzt .prose. */
.case-body {
margin-inline: 0;
}
.case-voice {
max-width: var(--measure);
}
/* ===== 67-team.css ===== */
/* =========================================================================
67 · team (Spez. 6.14)
Porträts im Sucherrahmen (.frame--person.frame--4x5, Team F) mit dem Namen
als Bauchbinde. Signatur: Sucherrahmen.
Genutzt von: sections/team.php
========================================================================= */
/* ---------- Raster ----------
375 px: untereinander. Ab 48rem auto-fit mit 20rem Mindestbreite, damit
Tablet (768 px, Satzbreite rund 700 px) zwei Porträts nebeneinander zeigt;
mit 22rem plus Fuge passte dort nur eins, als 700 px breites Hochformat.
Ab 62rem die 22rem aus der Spezifikation.
ABWEICHUNG von 6.14 (gap clamp(2rem, 5vw, 5rem) in allen Breiten): Bei
375 px ergab das 32 px, abzüglich der Rahmenmarken 26 px zwischen den
Profil-Knöpfen der einen und dem Porträt der nächsten Person, also nicht
mehr als die Abstände innerhalb einer Person (24 bis 29 px). Untereinander
deshalb 3rem (sichtbar rund 42 px, so viel wie --head-gap); 4rem wäre so
groß wie der Sektionsabstand. */
.team__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
row-gap: 3rem;
column-gap: clamp(2rem, 5vw, 5rem);
align-items: start;
}
@media (min-width: 48rem) {
.team__grid {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
row-gap: clamp(2rem, 5vw, 5rem);
}
}
@media (min-width: 62rem) {
.team__grid {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}
/* Genau zwei Personen: die zweite versetzt, wie zwei Einstellungen im
Schnitt. Nur ab 62rem, darunter stehen sie ohne Versatz. Die Anzahl
setzt team.php als Modifier; :nth-child(2):last-child läge über der
erlaubten Spezifität (Spez. 8.5, Regel 4). */
.team__grid--duo > :last-child {
margin-top: 4rem;
}
}
/* ---------- Person ---------- */
.team-member {
/* FIX: Struktur-Container ohne min-width: 0 dehnen das Raster auf. */
min-width: 0;
/* Eine einzelne Person würde sonst über die volle Containerbreite ein
fast 1500 px hohes Porträt ergeben. */
max-width: 36rem;
}
/* Kopf und Kinn im Bild: object-position 50 % 20 % setzt 12-frame.css für
.frame--person. Die Bauchbinde hängt per .l3--overlap über die
Bildkante; .frame--overlap hält darunter 1.5rem frei. */
/* Bio: 2.5rem unter dem Porträt. Der Rand fällt mit den 1.5rem von
.frame--overlap zusammen, der Abstand bleibt also 2.5rem. Ohne Foto
(Modifier aus team.php) steht die Bauchbinde im Fluss, dann reicht 1.25rem. */
.team-member__bio {
max-width: 56ch;
margin: 2.5rem 0 0;
color: var(--text-soft);
font: 400 var(--fs-body)/1.65 var(--font-text);
}
.team-member--no-photo > .team-member__bio {
margin-top: 1.25rem;
}
/* ---------- Profile ---------- */
/* Direkt unter dem Porträt (ohne Bio) gilt der Abstand der Bio, damit die
überhängende Bauchbinde frei steht. Nach der Bio oder ohne Foto reicht
1.5rem. */
.team-member__socials {
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin: 2.5rem 0 0;
padding: 0;
list-style: none;
}
.team-member__bio + .team-member__socials,
.team-member--no-photo > .team-member__socials {
margin-top: 1.5rem;
}
/* FIX: Die Liste stand früher fest auf Weiß und war auf hellem Grund
unsichtbar. Farben kommen jetzt ausschließlich aus Tokens, dadurch passt
sie auf white, mist, deep und teal. 44 px Zielgröße (WCAG 2.5.8). */
.team-member__social {
display: grid;
place-items: center;
width: 2.75rem;
height: 2.75rem;
border-radius: var(--r-control);
box-shadow: inset 0 0 0 1.5px var(--line-ui);
color: var(--text);
text-decoration: none;
/* Nur Farben laufen weich (Spez. 7.1, Nr. 2), der Ring wechselt hart. */
transition: background-color var(--dur-1) var(--ease-cut), color var(--dur-1) var(--ease-cut);
}
/* Hover nur mit echtem Zeiger: Auf Touch bliebe die Füllung nach dem
Antippen stehen, obwohl der Link in einem neuen Tab aufging.
Der Ring nimmt sofort die Farbe der Füllung an, statt zu verschwinden:
Das Ergebnis gleicht „ohne Ring“, aber während die Füllung einblendet,
bleibt die Kante stehen. */
@media (hover: hover) {
.team-member__social:hover {
background: var(--text);
box-shadow: inset 0 0 0 1.5px var(--text);
color: var(--bg);
}
}
.team-member__social svg {
flex: none;
width: 18px;
height: 18px;
}
/* Mit Kontoname: gleiche Höhe (44 px Zielgröße), Breite nach Inhalt. */
.team-member__social--labeled {
grid-auto-flow: column;
gap: .5rem;
width: auto;
padding-inline: .75rem .875rem;
}
.team-member__handle {
font: 500 var(--fs-mono)/1.35 var(--font-mono);
letter-spacing: .02em;
white-space: nowrap;
}
/* ===== 70-content.css ===== */
/* =========================================================================
70 content: Freier Text (Besitz: Team E, Redaktion) – Spezifikation 6.20
Markup: template-parts/sections/content.php
Zwei Rollen:
.section--content Textabschnitt in einer Seite (Karriere,
Über uns, UGC, Kanäle)
.section--content.content--doc Dokument als erste Sektion (AGB,
Datenschutz, Impressum): h1, keine
Signatur, kleinere h2, eng
Typografie der Prosa (17 px/1.65 mobil, 17.5 px/1.7 ab 48rem, max 68ch,
Listen mit Pixelquadrat, Mono-Ziffern in ol, Tabellenkopf auf --surface)
kommt aus .prose in 02-base.css. Hier stehen nur Spalte, Dokumentmodus
und der Scrollbehälter für Tabellen.
Alle Farben über Tokens: gilt unverändert auf white, mist, deep und teal.
========================================================================= */
/* Lesespalte: linksbündig an der Rasterkante statt mittig (6.20). Unter
44rem ist sie ohnehin so breit wie der Container. */
.content__col {
margin-inline-start: 0;
/* FIX: Als Kind eines Grid- oder Flex-Elternteils darf eine lange URL die
Spalte nicht über ihre min-content-Breite aufsprengen. */
min-width: 0;
}
/* Breite „wide“ (6.20: max 56rem). Die Spalte begrenzt, die Prosa
(.content__prose--wide, gesetzt in content.php) läuft bis an ihren Rand.
Mit den 68ch aus .prose (bei Schibsted 17.5 px rund 727 px) läge „Breit“
nur gut 20 px über „Schmal“ (44rem = 704 px), das Backend-Feld hätte
praktisch keine Wirkung. Titel und Intro behalten ihre Satzbreiten aus
05-section-header.css, weil kurze Zeilen dort gewollt sind. */
.content__col--wide {
max-width: 56rem;
}
.content__prose--wide {
max-width: none;
}
/* FIX: Rechtstexte enthalten lange, unbrechbare Zeichenketten (im Impressum
die ODR-Adresse der EU als reiner Text, im Datenschutz E-Mail-Adressen und
Links). Auf 320 px schoben sie die Zeile über den Rand; overflow-x: clip am
Dokument hätte sie nur abgeschnitten. break-word bricht nur dort, wo ein
Wort wirklich nicht passt, und setzt keinen Trennstrich. */
.content__prose {
overflow-wrap: break-word;
}
/* ---------- Tabellen ----------
content.php hüllt jede Tabelle ohne figure in .content__table. Der Behälter
scrollt seitlich und ist per tabindex erreichbar; der Fokusring kommt aus
02-base.css. Ohne Behälter setzte die alte Regel display: block an die
Tabelle selbst, was in Safari/VoiceOver die Tabellensemantik kostet.
Ab der dritten Spalte gilt die Mindestbreite aus 02-base.css (34rem). */
.content__table {
max-width: 100%;
margin-block: 0 1em;
overflow-x: auto;
/* Scrollleiste nur so dick wie nötig, damit sie die letzte Zeile nicht verdeckt. */
scrollbar-width: thin;
}
.content__table > table {
margin: 0;
}
/* Kopfzeile: Schibsted 600 14 px auf --surface (6.20). Die Fläche liefert
02-base.css; hier nur die Zeile ohne thead (Tabellen aus dem klassischen
Editor setzen th direkt in die erste Zeile). */
.content__table tr:first-child > th {
background: var(--surface);
font: 600 var(--fs-xs)/1.4 var(--font-text);
color: var(--text);
}
/* ---------- Dokumentmodus (AGB, Datenschutz, Impressum) ----------
Lange Prosa läuft ruhig: h2 klein (1.375rem statt bis 2.125rem), damit bei
neun Paragrafen keine Plakatzeilen entstehen; Abstand nach oben bleibt
groß, damit Abschnitte als Einheiten lesbar sind.
FIX (Befund rechtstexte-markup): Die Zwischentitel standen als
…
im Inhalt und sind jetzt echte h3/h4
(content/datenschutz.json). Mit der Prosa-Basis aus 02-base.css (h3 21 px
gegen h2 22 px) wären die Stufen kaum zu unterscheiden, und eine h3 direkt
unter ihrer h2 hinge 42 px tiefer, so weit wie nach einem Absatz. Daher
h2 22/760 > h3 18/700 > h4 17/600 in Schibsted, eng an den eigenen Text
gebunden.
Keine Tafel, kein data-reveal (das Template setzt beides nicht). */
.content--doc .section__header {
margin-bottom: clamp(2rem, 4vw, 3rem);
}
.content--doc .content__prose h2 {
font-size: 1.375rem;
font-stretch: 100%;
line-height: 1.25;
letter-spacing: 0;
margin: 2.5em 0 .6em;
}
.content--doc .content__prose :is(h3, h4) {
font-stretch: 100%;
letter-spacing: 0;
text-wrap: balance;
}
.content--doc .content__prose h3 {
font-size: 1.125rem;
line-height: 1.3;
margin: 1.9em 0 .35em;
}
/* h4 (die Fragen unter „Datenerfassung auf dieser Website“) in der
Textstimme: Schibsted 600 statt Archivo 700. Bei 17 gegen 18 px trüge die
Größe allein die Stufe zur h3 nicht. */
.content--doc .content__prose h4 {
font: 600 1.0625rem/1.4 var(--font-text);
margin: 1.5em 0 .25em;
}
/* Titel direkt unter dem übergeordneten Titel gehört zu ihm, nicht zum
Absatz davor. */
.content--doc .content__prose :is(h2, h3) + :is(h3, h4) {
margin-top: .6em;
}
/* ---------- Stellenanzeige (Karriere) ----------
FIX (Befund karriere-stellenanzeige): Beginnt die Prosa eines
Textabschnitts mit einer h3, ist das der Titel des Inhalts (auf Karriere
die Stellenbezeichnung). Mit 20 px stand er kaum über den h4 „Deine
Aufgaben“ (18 px). Abgeleitet aus der Struktur, kein neues Feld; Dokumente
haben ihre eigene Stufung oben. */
.section--content:not(.content--doc) .content__prose > h3:first-child {
font-size: clamp(1.5rem, 1.3rem + .8vw, 1.875rem);
/* Gewicht aus dem Token der H2-Stimme (02-base.css), nicht mehr fest 760. */
font-weight: var(--wg-agency);
font-stretch: var(--w-agency);
line-height: 1.15;
letter-spacing: -.01em;
text-wrap: balance;
}
/* ---------- Satz nach Struktur: chapters und story ----------
ABWEICHUNG von 6.20 (schmale Lesespalte, rechts daneben leer): Art-
Director-Befund „content ohne Bild als halbleere Fläche“. content.php
wählt den Satz aus dem vorhandenen Text (Begründung dort). Unter 62rem
bleibt alles in der Lesespalte; nur der Aufmacher (story) ist dort schon
eine Stufe größer. Ab 62rem nutzen beide Fassungen die volle
Containerbreite auf dem 12er-Raster. */
/* Aufmacher: der erste Absatz in Lead-Größe, ruhig in der Textstimme. */
.content__lead {
max-width: 44ch;
margin: 0 0 1.5rem;
font: 500 clamp(1.1875rem, .95rem + .9vw, 1.75rem)/1.42 var(--font-text);
color: var(--text);
text-wrap: pretty;
}
.content__columns > :last-child {
margin-bottom: 0;
}
/* Intro in der Prosa (chapters): Unter 62rem steht es wie zuvor unter dem
Titel, der Kopf rückt deshalb näher heran; der Abstand zum Text folgt
unter dem Intro. */
.content__col--chapters > :where(.section__header) {
margin-bottom: 1rem;
}
.content__prose > :where(.content__intro) {
margin: 0 0 var(--head-gap);
}
@media (min-width: 62rem) {
.content__col--chapters,
.content__col--story {
max-width: none;
}
.content__col--chapters > :where(.section__header) {
margin-bottom: var(--head-gap);
}
/* chapters: Randspalte 1–3 für Intro und Zwischentitel, Text in 5–12
(Spalte 4 bleibt Bundsteg). Die automatische Platzierung legt jeden
Titel in eine neue Reihe und den folgenden Absatz daneben; die Reihe
richtet beide an der ersten Grundlinie aus. Ränder addieren sich im
Raster nicht, deshalb setzt jeder Block nur seinen unteren Abstand,
ein Kapitel beginnt mit gleichem Abstand über Titel und Absatz. */
.content__prose--chapters {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: var(--gap);
align-items: baseline;
max-width: none;
}
.content__prose--chapters > * {
grid-column: 5 / -1;
max-width: 68ch;
margin-top: 0;
}
.content__prose--chapters > :where(h2, h3, h4, .content__intro) {
grid-column: 1 / span 3;
margin-bottom: 0;
}
.content__prose--chapters > :where(h2, h3, h4),
.content__prose--chapters > :where(h2, h3, h4) + * {
margin-top: 2.5rem;
}
.content__prose--chapters > :where(.content__intro) {
max-width: none;
font-size: var(--fs-lead);
}
/* Folgen dem Intro zwei Absätze, reicht es über beide Reihen: Der zweite
Absatz rückt direkt unter den ersten, statt unter das längere Intro.
Ein überspannendes Element nimmt nicht an der Grundlinie teil, es steht
oben bündig. */
.content__prose--chapters > :where(.content__intro:has(+ p + p)) {
grid-row: span 2;
align-self: start;
}
/* Titel am Anfang der Prosa (Stellenbezeichnung auf karriere): über die
Breite, sonst stünde er vier Zeilen hoch in der Randspalte, und der
Text daneben begänne erst unter ihm. */
.content__prose--chapters > :where(h2, h3, h4):first-child {
grid-column: 1 / -1;
max-width: 32ch;
margin: 0 0 1.25rem;
}
.content__prose--chapters > :where(h2, h3, h4):first-child + * {
margin-top: 0;
}
/* story: Aufmacher über 1–9, der Rest in zwei Spalten über die Breite.
Der Text ist höchstens 2.600 Zeichen lang, jede Spalte bleibt damit
bei 1440 px unter einer Fensterhöhe. Absätze brechen nur mit mindestens
zwei Zeilen auf jeder Seite um. */
.content__prose--story {
max-width: none;
}
.content__lead {
max-width: 46ch;
margin-bottom: 2.5rem;
}
.content__columns {
columns: 2;
column-gap: clamp(2.5rem, 5vw, 5rem);
orphans: 2;
widows: 2;
}
}
/* ===== 71-posts.css ===== */
/* =========================================================================
71 posts und post-card (Besitz: Team E, Redaktion) – Spezifikation 6.21
Markup: template-parts/sections/posts.php,
template-parts/components/post-card.php
Genutzt auch von: index.php, archive.php, templates/template-blog.php,
single.php („Weiterlesen“)
div.post-list
article.post-card[.post-card--lead|--span][.post-card--media|--text]
div.post-card__media > img.post-card__image
div.post-card__body
div.post-card__head
p.post-card__cat
h2|h3.post-card__title > a.post-card__link (gestreckt)
div.post-card__info
p.post-card__excerpt (Aufmacher und Karten ohne Bild)
p.post-card__meta > time · span (Plex Mono)
Keine Rahmen, keine Schatten, kein Hover-Lift, kein Bildzoom, keine
Einblendung. Hover und Fokus unterstreichen den Titel, Fokus zeigt dazu
die Outline am ganzen article. Farben über Tokens (white, mist, deep, teal).
========================================================================= */
/* ---------- Liste ----------
Einspaltig; ab 48rem zwei Spalten. Der Aufmacher läuft über beide. Bleibt
eine Karte allein in ihrer Zeile, setzt das Template post-card--span. */
.post-list {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 2.5rem 2rem;
margin: 0;
padding: 0;
}
@media (min-width: 48rem) {
.post-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.post-list > .post-card--lead,
.post-list > .post-card--span {
grid-column: 1 / -1;
}
}
/* Link zum Blog unter der Liste (posts-Sektion), linksbündig. */
.posts__cta {
margin: 3rem 0 0;
}
/* ---------- Karte ---------- */
/* FIX: min-width 0, sonst sprengt ein langer Titel ohne Trennstelle die
Rasterspalte (minmax(0, 1fr)-Thema aus dem alten Stand). */
.post-card {
position: relative;
min-width: 0;
}
/* Ohne Beitragsbild steht oben eine Linie, damit Kategorie und Titel nicht
frei im Raster schweben. Keine leere Bildfläche (9.9). */
.post-card--text {
padding-top: 1.25rem;
border-top: 1px solid var(--line);
}
.post-card__media {
aspect-ratio: 16 / 9;
margin-bottom: 1rem;
}
/* Beitragsbild 16:9, Radius 2px, ohne Rahmenmarken (5.4). */
.post-card__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--r-media);
}
.post-card__body {
min-width: 0;
}
.post-card__cat {
margin: 0 0 .5rem;
font: 600 var(--fs-xs)/1.35 var(--font-text);
color: var(--accent-text);
}
/* Titel unabhängig von der Überschriftenebene (h2 im Archiv, h3 unter einer
Sektionsüberschrift): Archivo 700 1.25rem. */
.post-card__title {
margin: 0;
font: 700 1.25rem/1.25 var(--font-display);
font-stretch: 100%;
letter-spacing: 0;
/* FIX (Befund posts-ohne-beitragsbild): balance statt pretty. pretty ließ
„nicht“ allein in der letzten Zeile stehen. */
text-wrap: balance;
}
/* FIX: Gemeinsame Geste aller Zeilen und Karten mit gestrecktem Titel-Link
(5.5, 6.10, 6.19, 6.21). Bisher Offset .18em und Fokusring 4 px, die
Fallstudien-Zeilen hatten .2em und 2 px. Jetzt überall: Unterstreichung
2px in --accent-text mit Offset .2em wie jeder Link (02-base.css), bei
Hover mit echtem Zeiger und bei Tastaturfokus; Fokusring 2px, Offset 2px am
Container. Die Linienwerte stehen am Link, der Zustand schaltet nur die
Linie ein. */
.post-card__link {
color: var(--text);
text-decoration: none;
text-decoration-color: var(--accent-text);
text-decoration-thickness: 2px;
text-underline-offset: .2em;
}
/* Die ganze Karte ist Klickfläche, bleibt aber ein einziger Tabstopp. */
.post-card__link::after {
content: "";
position: absolute;
inset: 0;
}
/* Fokus unterstreicht den Titel wie Hover: Die Outline am article ist das
eigene Fokussignal, die Linie macht die Geste gleich. */
.post-card__link:focus-visible {
text-decoration-line: underline;
}
/* Nur mit echtem Zeiger: Auf Touch bliebe :hover nach dem Antippen kleben
(wie der Trim, 14-trim.css). :where() hält die Spezifität bei einer Klasse
plus Zustand (8.5.4). */
@media (hover: hover) {
.post-card:hover :where(.post-card__link) {
text-decoration-line: underline;
}
}
/* Fokus als Outline am article (6.21). Nur dort, wo :has() greift, verliert
der Link seinen eigenen Ring; ältere Browser behalten ihn. */
@supports selector(:has(*)) {
.post-card:has(:where(.post-card__link):focus-visible) {
outline: 2px solid var(--focus);
outline-offset: 2px;
}
.post-card__link:focus-visible {
outline: none;
}
}
.post-card__excerpt {
max-width: 52ch;
margin: .875rem 0 0;
font-size: var(--fs-body);
line-height: 1.6;
color: var(--text-soft);
}
/* Karten ohne Bild im Raster (Weiterlesen, Archiv): Auszug eine Stufe
kleiner als beim Aufmacher, damit Titel und Text nicht gleich laut sind. */
.post-card--text:not(.post-card--lead) .post-card__excerpt {
margin-top: .625rem;
font-size: var(--fs-small);
}
/* Datum und Lesedauer: echte Daten, Plex Mono 13 px (Regel 1.3, 3.4). */
.post-card__meta {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: .25rem .5rem;
margin: .75rem 0 0;
font: 500 var(--fs-mono)/1.35 var(--font-mono);
letter-spacing: .02em;
color: var(--text-soft);
}
/* ---------- Aufmacher ----------
375 px: wie die übrigen Karten (6.21), nur mit Auszug. Ab 48rem große
Titelzeile; mit Bild zuerst Bild | Text zu gleichen Teilen (Tablet, kein
gestauchtes Desktop-Raster), ab 62rem 7fr | 5fr. */
@media (min-width: 48rem) {
.post-card--lead .post-card__title {
font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
/* Breite und Gewicht der H2-Stimme aus den Tokens (02-base.css). */
font-weight: var(--wg-agency);
font-stretch: var(--w-agency);
line-height: 1.1;
letter-spacing: -.01em;
text-wrap: balance;
}
.post-card--lead .post-card__meta {
margin-top: 1.25rem;
}
/* Ohne Bild wäre die Zeile sonst über die ganze Containerbreite lang. */
.post-card--lead.post-card--text .post-card__body,
.post-card--span.post-card--text .post-card__body {
max-width: 44rem;
}
/* Mit Bild: Bild und Text nebeneinander. Gilt auch für die allein
stehende letzte Karte, damit sie die Zeile füllt, ohne ein Riesenbild
zu werden. */
.post-card--lead.post-card--media,
.post-card--span.post-card--media {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 2rem;
align-items: start;
}
.post-card--lead.post-card--media {
align-items: center;
}
.post-card--lead.post-card--media .post-card__media,
.post-card--span.post-card--media .post-card__media {
margin-bottom: 0;
}
}
/* Gemeinsame Meta-Kante im 2er-Raster: Die Meta steckt im Body, deshalb eine
Flex-Kette Karte → Body → Info. Ein zweizeiliger Titel neben einem
einzeiligen verschob die Meta-Zeilen sonst um eine Zeile (25 px).
Aufmacher und allein stehende Karte haben ihr eigenes Raster. */
@media (min-width: 48rem) {
.post-list > .post-card:where(:not(.post-card--lead, .post-card--span)) {
display: flex;
flex-direction: column;
}
.post-list > .post-card:where(:not(.post-card--lead, .post-card--span)) > .post-card__media {
flex: none;
}
.post-list > .post-card:where(:not(.post-card--lead, .post-card--span)) > .post-card__body {
display: flex;
flex: 1 0 auto;
flex-direction: column;
}
.post-list > .post-card:where(:not(.post-card--lead, .post-card--span)) .post-card__info {
margin-top: auto;
}
}
/* Ab 62rem: Aufmacher mit Bild 7fr | Text 5fr, gap 2.5rem (6.21). */
@media (min-width: 62rem) {
.post-card--lead.post-card--media {
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
column-gap: 2.5rem;
}
/* FIX (Befund posts-ohne-beitragsbild): Ohne Beitragsbild stand der
Aufmacher als 44rem-Block unter einer Linie über die ganze Breite,
rechts blieben rund 640 px leer. Jetzt dieselbe Aufteilung wie mit Bild:
Kategorie und Titel links (7fr), Auszug und Meta rechts (5fr), oben
bündig; bei der allein stehenden Karte ohne Auszug sitzt die Meta auf
der Grundlinie des Titels. */
.post-card--text:is(.post-card--lead, .post-card--span) .post-card__body {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
column-gap: 2.5rem;
align-items: start;
max-width: none;
}
.post-card--lead.post-card--text .post-card__excerpt {
margin-top: 0;
}
.post-card--span.post-card--text .post-card__info {
align-self: end;
}
.post-card--span.post-card--text .post-card__meta {
margin-top: 0;
}
/* Mit Auszug (Runde 3) steht die Info-Gruppe oben bündig mit der
Kategorie wie beim Aufmacher, die Meta folgt mit Abstand. */
.post-card--span.post-card--text .post-card__info:has(.post-card__excerpt) {
align-self: start;
}
.post-card--span.post-card--text .post-card__excerpt {
margin-top: 0;
}
.post-card--span.post-card--text .post-card__excerpt + .post-card__meta {
margin-top: .75rem;
}
}
/* ===== 72-archive.css ===== */
/* =========================================================================
72 Blog-Archiv (Besitz: Team E, Redaktion) – Spezifikation 6.22
Markup: index.php (Ratgeber), archive.php, templates/template-blog.php;
der Seitenkopf auch in search.php (75-404-search.css ergänzt)
und als h1-Rückfall in page.php, front-page.php und
templates/template-landing.php, wenn keine Baukasten-Zeilen
gepflegt sind (9.5)
section.section.page-head
div.page-head__inner
nav.breadcrumbs--inline (Team A)
p.eyebrow
h1.page-head__title (Tafel nur bei gepflegten {Klammern})
p|div.page-head__intro
nav.chip-nav > ul.chip-nav__list > li > a.chip[aria-current]
section.section.post-archive
div.post-list | div.result-list | div.post-archive__empty
nav.pagination (Team A)
Der Seitenkopf ist ein breiter Hero ohne Vertrauenszeile: linksbündig,
H1 in Seitenkopf-Größe, Beschreibung höchstens 62ch. Keine Zentrierung.
========================================================================= */
/* ---------- Seitenkopf ---------- */
.page-head__inner {
min-width: 0;
}
/* H1 Seitenkopf (3.4): Archivo 780, stretch 94 %, --fs-h1-page / 1.08,
höchstens 20ch. Bis 30rem Silbentrennung (02-base.css). Mit Tafel gilt
line-height 1.16 (06-highlight.css).
FIX: Breite aus --stretch-title (94 %, unter 24rem 86 %, 00-tokens.css).
Das feste 94 % überstimmte die 24rem-Regel aus 02-base.css in jeder
Breite. */
.page-head__title {
max-width: 20ch;
font-size: var(--fs-h1-page);
font-weight: 780;
font-stretch: var(--stretch-title);
line-height: 1.08;
}
/* Beschreibung: Archiv-Beschreibungen kommen als HTML mit
, die
Ratgeber-Einleitung als reiner Text. Beide gleich. */
.page-head__intro {
max-width: 62ch;
margin: 1.25rem 0 0;
font-size: var(--fs-body);
line-height: 1.55;
color: var(--text-soft);
}
.page-head__intro > :last-child {
margin-bottom: 0;
}
@media (min-width: 48rem) {
.page-head__intro {
margin-top: 1.5rem;
font-size: var(--fs-lead);
}
}
/* ---------- Themen-Chips ----------
.chip selbst (Rand, 40 px, aktiver Chip auf Studio, Trefferfläche 44 px)
kommt aus 16-lists-checks-stars.css. */
.chip-nav {
margin-top: 2rem;
}
.chip-nav__list {
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin: 0;
padding: 0;
list-style: none;
}
.chip-nav__list > li {
min-width: 0;
max-width: 100%;
}
/* In der Ratgeber-Vorlage stehen die Chips über der Liste statt im Kopf. */
.post-archive__chips {
margin: 0 0 clamp(2rem, 4vw, 3rem);
}
/* ---------- Liste und leerer Zustand ---------- */
.post-archive__empty {
max-width: 44rem;
}
/* Lead-Satz (3.4 Lead): Schibsted, kein Überschriften-Look ohne
Überschriften-Semantik. */
.post-archive__empty-lead {
margin: 0 0 .75rem;
font-size: var(--fs-lead);
line-height: 1.55;
color: var(--text);
}
.post-archive__empty p:not([class]) {
max-width: 60ch;
color: var(--text-soft);
}
.post-archive__empty .btn-row {
margin-top: 1.5rem;
}
/* Unter 48rem Button über die volle Breite, wie alle CTAs unter Inhalten
(Sektions-CTAs btn--lg, mobil btn--block, Umschaltpunkt 48rem wie Hero,
channel_proof und cta_band). smm_main_cta() liefert schon btn--lg.
Vorher galt die volle Breite nur bis 30rem, zwischen 480 und 767 px stand
der Button als einziger CTA inhaltsbreit. */
@media (max-width: 47.99rem) {
.post-archive__empty .btn {
display: flex;
width: 100%;
}
.post-archive__empty .btn__label {
flex: 1;
}
}
/* ===== 73-single.css ===== */
/* =========================================================================
73 Einzelartikel (Besitz: Team E, Redaktion) – Spezifikation 6.23
Markup: single.php
article.article
header.article__head > .container > .article__col
nav.breadcrumbs--inline (Team A) · ul.article__cats (Chips klein)
h1.article__title · p.article__lead · p.article__meta (Plex Mono)
.container > figure.article__figure > img.article__image
.container > .article__layout[.article__layout--track]
nav.chapter-track.chapter-track--aside (ab 75rem, klebt rechts)
.article__col
div.article__body.prose (Fließtext, Blöcke 74-blocks.css)
…Vorspann…
details.chapter-track.chapter-track--inline (unter 75rem)
div.article__chapter × n (je eine H2 und ihr Abschnitt)
ul.article__tags (Chips klein)
div.article__cta > .container > div.inline-cta.theme-studio
section.section--bg-mist.article-related (Karten ohne Aufmacher, 71-posts.css)
Kopf und Text stehen linksbündig in einer 44rem-Spalte an der
Rasterkante, das Beitragsbild in Containerbreite. Keine Rahmenmarken am
Beitragsbild, keine Einblendung, kein Verlauf im Inline-CTA.
========================================================================= */
.article {
display: block;
/* FIX: Struktur-Container dürfen in Flex- und Grid-Eltern schrumpfen. */
min-width: 0;
}
/* Lesespalte 44rem, linksbündig. */
.article__col {
max-width: var(--container-narrow);
min-width: 0;
}
/* ---------- Kopf ---------- */
.article__head {
padding-top: clamp(1.5rem, 4vw, 3rem);
}
.article__cats {
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin: 0 0 1.25rem;
padding: 0;
list-style: none;
}
.article__cats > li,
.article__tags > li {
min-width: 0;
max-width: 100%;
}
/* H1 Artikel (6.23): Archivo 800, stretch 94 %, --fs-h1-page (32 px bei
375 px), höchstens 20ch. Silbentrennung bis 30rem aus 02-base.css.
FIX: Breite aus --stretch-title (94 %, unter 24rem 86 %, 00-tokens.css).
Das feste 94 % überstimmte die 24rem-Regel aus 02-base.css in jeder
Breite. */
.article__title {
max-width: 20ch;
font-size: var(--fs-h1-page);
font-weight: 800;
font-stretch: var(--stretch-title);
line-height: 1.08;
letter-spacing: -.015em;
}
.article__lead {
max-width: 40em;
margin: 1.25rem 0 0;
font-size: 1.25rem;
line-height: 1.55;
color: var(--text-soft);
}
/* Datum, Aktualisierung, Lesedauer: echte Daten in Plex Mono 13 px. */
.article__meta {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: .25rem .5rem;
margin: 1.5rem 0 0;
font: 500 var(--fs-mono)/1.35 var(--font-mono);
letter-spacing: .02em;
color: var(--text-soft);
}
/* ---------- Beitragsbild ----------
16:9 in Containerbreite, Radius 2px, ohne Marken (5.4). */
.article__figure {
aspect-ratio: 16 / 9;
margin: clamp(2rem, 4vw, 3rem) 0 0;
}
.article__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--r-media);
}
/* ---------- Fließtext ----------
Typografie aus .prose (02-base.css): 17 px/1.65 mobil, 17.5 px/1.7 ab
48rem, h2 24 px bei 375 px, h3 20 px, Listen mit Pixelquadrat. */
.article__body {
margin-top: clamp(2rem, 4vw, 3rem);
/* FIX: Lange URLs und zusammengesetzte Wörter schieben die Zeile auf dem
Handy sonst über den Rand; overflow-x: clip am Dokument schnitte sie ab. */
overflow-wrap: break-word;
}
/* FIX (Befund artikel-tabelle-core-look): Auf Artikeln lädt WordPress die
Block-Styles (wp-block-table, inc/performance.php). Deren Ränder
(.wp-block-table td: 1px currentColor rundum, thead: 3px) stehen mit
gleicher Spezifität vor app.css; .prose th/td aus 02-base.css überschreibt
nur border-bottom. Übrig blieben dunkle Senkrechte, ein Kopfbalken und
hellgraue Zeilentrenner. Mit einer Elementstufe mehr (0,1,2) gewinnt die
ruhige Zeilenlinie unabhängig von der Ladereihenfolge. Die Kopffläche
(--surface) kommt weiter aus 02-base.css. */
.article__body table :is(th, td) {
border: 0;
border-bottom: 1px solid var(--line);
}
.article__body table > :is(thead, tfoot) {
border: 0;
}
/* Tabellen: figure.wp-block-table scrollt bereits (02-base.css); single.php
gibt ihr und dem Behälter um eine Tabelle ohne figure einen Tabstopp. */
.article__table {
max-width: 100%;
margin-block: 0 1em;
overflow-x: auto;
scrollbar-width: thin;
}
.article__table > table {
margin: 0;
}
.article__body .wp-block-table {
scrollbar-width: thin;
}
.article__body .wp-block-table > table {
margin: 0;
}
/* FAQ-Block (Team D) steht im Textfluss; ohne eigenen Abstand klebte er am
Absatz davor. Mit Kapitel-Spur liegt er in einem Kapitel. */
.article__body > .faq--block,
.article__chapter > :where(.faq--block) {
margin-block: 3rem;
}
/* Kapitel-Hülle: ohne eigene Abstände, die Ränder der Prosa fallen weiter
zusammen. Nur der Schluss des letzten Kapitels verliert seinen Rand, wie
.prose > :last-child ohne Hülle (02-base.css). */
.article__chapter:last-child > :last-child {
margin-bottom: 0;
}
/* ---------- Mehrseitige Beiträge (wp_link_pages) ----------
Wie die Paginierung (6.27): 44-px-Quadrate, aktuelle Seite auf Studio. */
.page-links {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .5rem;
margin-top: 2.5rem;
padding-top: 1.5rem;
border-top: 1px solid var(--line);
}
.page-links .post-page-numbers {
display: inline-grid;
place-items: center;
min-width: 2.75rem;
height: 2.75rem;
padding-inline: .5rem;
border: 1.5px solid var(--line-ui);
border-radius: var(--r-control);
color: var(--text);
font: 600 var(--fs-small)/1 var(--font-text);
font-variant-numeric: tabular-nums;
text-decoration: none;
}
.page-links a.post-page-numbers:hover {
border-color: var(--ghost-bg-h);
background: var(--ghost-bg-h);
color: var(--ghost-fg-h);
}
.page-links .current {
border-color: transparent;
background: var(--c-studio);
color: var(--c-white);
}
/* ---------- Schlagwörter ---------- */
.article__tags {
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin: 3rem 0 0;
padding: 1.5rem 0 0;
border-top: 1px solid var(--line);
list-style: none;
}
/* FIX (Befund artikel-details): Endet der Artikel mit dem FAQ-Block, liegt
dessen Unterkante 3rem über der Linie der Schlagwörter; zwei parallele
Linien mit Leere dazwischen. Dann trennt die FAQ-Linie allein. */
.article__body:where(:has(> .faq--block:last-child, > :last-child > .faq--block:last-child)) + .article__tags {
padding-top: 0;
border-top: 0;
}
/* ---------- Inline-CTA am Artikelende ----------
Studio-Panel, Radius 4px, kein Verlauf, kein Schatten. Zeitmarke rechts
mittig neben dem Text, wenn der Text eine Dauer nennt (5.8); unter 62rem als Kopfzeile über
dem Titel (siehe unten). Der
Primärbutton nimmt über .theme-studio die helle Variante. */
.article__cta {
padding-block: clamp(3rem, 6vw, 5rem) var(--section-y);
}
.inline-cta {
display: grid;
/* FIX: minmax(0, 1fr) statt 1fr/auto. Ohne Deckelung wird die Spur so
breit wie der breiteste Inhalt und schiebt den Text auf dem Handy aus
dem Bild (alter Stand). */
grid-template-columns: minmax(0, 1fr);
gap: 2rem;
padding: 2rem 1.25rem;
border-radius: var(--r-panel);
}
.inline-cta__main,
.inline-cta__side {
min-width: 0;
}
.inline-cta__title {
max-width: 22ch;
margin: 0 0 .875rem;
font: 760 clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem)/1.1 var(--font-display);
font-stretch: 96%;
letter-spacing: -.01em;
color: var(--text);
text-wrap: balance;
}
.inline-cta__desc {
max-width: 52ch;
margin: 0;
font-size: var(--fs-body);
line-height: 1.6;
color: var(--text-soft);
}
.inline-cta__actions {
margin-top: 1.75rem;
}
/* Sektions-CTA-Regel: btn--lg btn--block aus single.php, ab 48rem wieder
natürliche Breite. Unter 48rem stehen Primär- und Kalenderbutton
untereinander. FIX (Befund button-label-umbruch-mobil): Bricht ein Label
zweizeilig um, war der eine Button 66 px hoch und der andere 56 px. Das
Raster gibt beiden Zeilen dieselbe Höhe; stretch und minmax(0, 1fr) heben
align-items: center und justify-content: flex-start aus .btn-row auf. */
@media (max-width: 47.99rem) {
.inline-cta__actions {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-auto-rows: 1fr;
align-items: stretch;
}
}
@media (min-width: 48rem) {
.inline-cta__actions :where(.btn--block) {
display: inline-flex;
width: auto;
}
}
@media (min-width: 48rem) {
.inline-cta {
padding: clamp(2.5rem, 5vw, 4rem);
}
.inline-cta__desc {
font-size: 1.125rem;
}
}
/* ABWEICHUNG von 5.8/6.16 („unter 62rem unter den Buttons“, „gemeinsame
Unterkante“), gleiche Regel wie .cta-band__inner--mark (63-cta-band.css,
Befund „Zeitmarke 30:00 ist statische Deko“):
Unter 62rem Kopfzeile über dem Titel, Timecode und Clip in einer Zeile,
der Clip auf der Grundlinie der Ziffern. order verschiebt nur die
Darstellung; die Seitenspalte ist aria-hidden und nicht fokussierbar.
Ab 62rem Timecode und Leiste als Einheit mittig neben dem Text (unten). */
.inline-cta {
--inline-cta-title-fs: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
}
.inline-cta__title {
font-size: var(--inline-cta-title-fs);
}
@media (max-width: 61.99rem) {
.inline-cta--mark {
--timemark-fs: 3.5rem;
row-gap: 1.75rem;
}
.inline-cta__side:where(.inline-cta--mark > *) {
order: -1;
}
.timemark:where(.inline-cta--mark *) {
display: flex;
align-items: baseline;
column-gap: 1rem;
}
.timemark__clip:where(.inline-cta--mark *) {
flex: 1 1 0;
min-width: 0;
margin-top: 0;
}
}
@media (min-width: 48rem) and (max-width: 61.99rem) {
.inline-cta--mark {
--timemark-fs: 4.5rem;
row-gap: 2rem;
}
.timemark:where(.inline-cta--mark *) {
column-gap: 1.5rem;
}
}
/* Ab 62rem: Text 7fr | Zeitmarke 4fr. Ohne Zeitmarke bleibt das Panel
einspaltig mit begrenzter Breite.
ABWEICHUNG (Abnahme Runde 4, gleiche Regel wie „Zeitmarke als Einheit“ in
63-cta-band.css): Die Zeitmarke stand oben an der Titelzeile, die Leiste
lief über die volle Spalte, darunter blieben rund 170 px Leere. Jetzt
schrumpft die Seitenspalte auf den Timecode (justify-self), die Leiste ist
so breit wie die Ziffern, und die Einheit steht vertikal mittig neben dem
Text, rechts bündig an der Innenkante des Panels. Die Ausrichtungsrechnung
an der Versalhöhe entfällt damit. */
@media (min-width: 62rem) {
.inline-cta--mark {
--timemark-fs: var(--fs-time);
grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
column-gap: 4rem;
align-items: center;
}
.inline-cta__side:where(.inline-cta--mark > *) {
justify-self: end;
}
.inline-cta:not(.inline-cta--mark) .inline-cta__main {
max-width: 48rem;
}
}
/* =========================================================================
Kapitel-Spur (Art-Director-Verbesserung „Kapitel-Spur im Ratgeber“)
ABWEICHUNG: 5.6 kennt die Schnitt-Spur nur in process. Artikel haben
keinen process; auf der Seite gibt es weiter genau einen Playhead. Nur
echte Daten: die H2 als Namen, die Wortzahl je Abschnitt (--n) als Länge,
die vorhandene Lesedauer am Spurkopf.
ABWEICHUNG (Befund „Spur-Elemente wirken unfertig“): Die Clips hatten eine
Höhe nach Wortzahl. Lange Kapitel wurden hohe, leere Kacheln, kurze flache;
das sah nach kaputten Boxen aus. Jetzt ist jedes Kapitel eine gleich
gebaute Zeile: Name, darunter ein schmaler Längenstrich. Seine Breite ist
das Verhältnis der Wortzahl zum längsten Kapitel (--n am li durch --n an
der Liste). Der längste Abschnitt füllt die Zeile.
Zustände:
ohne JS gleichwertige Zeilen mit grauem Strich,
vollständige Sprungliste
JS (aria-current) aktuelle Zeile auf Kreide, Name in Tinte,
Strich in Teal; die übrigen Namen treten in
--text-soft zurück
animation-timeline und der Strich jedes Kapitels füllt sich beim
no-preference Lesen von links (gelesen = voll), an der
Füllkante des laufenden Kapitels steht der
Playhead
========================================================================= */
/* Kopf: Name und Lesedauer auf einer Zeile, wie im Kopf der aufklappbaren
Fassung. */
.chapter-track__head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
column-gap: .75rem;
row-gap: .25rem;
margin: 0;
}
.chapter-track__list {
/* --n an der Liste: Wortzahl des längsten Kapitels (single.php). Hier
aufgelöst, damit die li mit ihrem eigenen --n darauf zugreifen. */
--ch-max: var(--n, 1);
display: flex;
flex-direction: column;
gap: 2px;
margin: 0;
padding: 0;
list-style: none;
list-style-type: "";
}
/* .prose li + li (02-base.css) greift in der mobilen Variante, die im
Fließtext steht; gleiche Spezifität, spätere Regel. */
.chapter-track li + li {
margin-top: 0;
}
.chapter-track__item {
--ch-len: calc(var(--n, 1) / var(--ch-max, 1));
display: block;
min-width: 0;
margin: 0;
padding: 0;
}
/* Zeile: die ganze Zeile ist der Link, mindestens 44 px hoch (9.5).
Schibsted, nicht Mono: der Name ist Text, keine Messgröße (Regel 1.3). */
.chapter-track__clip {
display: grid;
grid-template-columns: minmax(0, 1fr);
align-content: start;
row-gap: .5rem;
min-width: 0;
min-height: 2.75rem;
padding: .625rem .75rem .75rem;
border-radius: 2px;
color: var(--text);
font: 600 var(--fs-xs)/1.35 var(--font-text);
text-decoration: none;
overflow-wrap: break-word;
}
.chapter-track__label {
min-width: 0;
text-decoration-color: var(--accent-text);
text-decoration-thickness: 2px;
text-underline-offset: .2em;
text-wrap: pretty;
}
/* Längenstrich: 4 px, Breite nach Wortzahl, mindestens so breit, dass auch
ein kurzes Kapitel (FAQ) einen erkennbaren Strich hat. Rein dekorativ
(aria-hidden), die Länge steckt nicht als Text in der Navigation. */
.chapter-track__len {
position: relative;
display: block;
width: max(1rem, calc(var(--ch-len) * 100%));
height: 4px;
border-radius: 1px;
background: var(--line);
}
/* Füllung des Strichs, von links. Ruhezustand leer. */
.chapter-track__len::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: var(--clip-on-bg);
transform: scaleX(0);
transform-origin: left center;
}
/* Hover nur mit echtem Zeiger (wie Post-Karte und Suchzeile). */
@media (hover: hover) {
.chapter-track__clip:hover .chapter-track__label {
text-decoration-line: underline;
}
}
.chapter-track__clip:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 2px;
}
.chapter-track__clip:focus-visible .chapter-track__label {
text-decoration-line: underline;
}
/* Aktueller Abschnitt (aria-current, nur mit JS): Zeile auf Kreide, Name in
Tinte, Strich voll in Teal (#156A72 auf Weiß 6,29, auf Kreide 5,6). Die
übrigen Namen treten zurück (#4A5758, 7,5). Kein Balken an der Zeilenkante
(Akzentleiste, 9.6). */
.chapter-track__clip[aria-current] {
background: var(--surface);
color: var(--text);
}
.chapter-track__list:has([aria-current]) .chapter-track__clip:not([aria-current]) {
color: var(--text-soft);
}
.chapter-track__clip[aria-current] .chapter-track__len::before {
transform: none;
}
@media (forced-colors: active) {
.chapter-track__clip[aria-current] {
outline: 2px solid CanvasText;
outline-offset: -2px;
}
.chapter-track__len {
forced-color-adjust: none;
background: GrayText;
}
.chapter-track__len::before {
background: CanvasText;
}
}
/* Name „Inhalt“ und Lesedauer (echte Meta-Angabe, Plex Mono 13 px). */
.chapter-track__name {
font: 600 var(--fs-xs)/1.35 var(--font-text);
}
.chapter-track__time {
margin: 0;
font: 500 var(--fs-mono)/1.35 var(--font-mono);
letter-spacing: .02em;
color: var(--text-soft);
}
/* ---------- Unter 75rem: details vor der ersten H2 ----------
Zu: Name, Lesedauer, Pfeil und darunter die Spur im Kleinen (Abschnitte
nebeneinander, Breite nach Wortzahl). Auf: die Kapitelzeilen. Kein
Öffnen-Übergang (7.3 kennt nur die FAQ-Höhe). */
.chapter-track--inline {
margin-block: 2rem;
}
.chapter-track__summary {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
column-gap: .75rem;
row-gap: .75rem;
min-height: 2.75rem;
padding-block: .5rem .75rem;
color: var(--text);
list-style: none;
cursor: pointer;
}
.chapter-track__summary::-webkit-details-marker {
display: none;
}
.chapter-track__summary:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 4px;
}
@media (hover: hover) {
.chapter-track__summary:hover .chapter-track__name {
text-decoration: underline;
text-decoration-thickness: 2px;
text-decoration-color: var(--accent-text);
text-underline-offset: .2em;
}
}
.chapter-track__chevron {
width: 18px;
height: 18px;
color: var(--accent-text);
}
.chapter-track--inline[open] .chapter-track__chevron {
transform: rotate(180deg);
}
/* Spur im Kleinen: Abschnitte mit Anteil nach Wortzahl, Schnitt 3 px. Rein
dekorativ (aria-hidden), die Namen stehen in der Liste. */
.chapter-track__strip {
grid-column: 1 / -1;
display: flex;
gap: 3px;
height: .5rem;
}
.chapter-track__seg {
flex: var(--n, 1) 1 0;
min-width: .25rem;
border-radius: 1px;
/* Gleicher Ton wie die Längenstriche der Zeilen darunter. */
background: var(--line);
}
/* Zeilen bündig mit dem Fließtext: der Innenabstand der Zeile steht links
vor der Satzkante, wie die Tafel-Einzüge (.hl--plate, .caption-plate). */
.chapter-track--inline .chapter-track__nav {
margin-inline: -.75rem;
padding-bottom: .5rem;
}
/* ---------- Ab 75rem: klebende Spur rechts neben dem Text ----------
Die Lesespalte behält ihre 44rem an der Rasterkante; die Spur steht an
der rechten Containerkante und beginnt auf Höhe des Fließtexts. */
.chapter-track--aside {
display: none;
}
@media (min-width: 75rem) {
.chapter-track--inline {
display: none;
}
.article__layout--track {
display: grid;
grid-template-columns: minmax(0, var(--container-narrow)) minmax(0, 1fr);
column-gap: clamp(3rem, 5vw, 6rem);
}
/* Die Spur steht im DOM vor dem Text (Tab-Reihenfolge), sichtbar rechts. */
.article__layout--track > .article__col {
grid-row: 1;
grid-column: 1;
}
.chapter-track--aside {
grid-row: 1;
grid-column: 2;
position: sticky;
top: calc(var(--header-h) + 2rem);
display: flex;
flex-direction: column;
gap: .75rem;
align-self: start;
justify-self: end;
width: min(100%, 18.5rem);
/* Höhe nach Inhalt. Reicht der Platz nicht, scrollt die Spur in sich
(33-chapter-track.js holt die aktuelle Zeile in den Blick). Unten
bleiben 5.5rem frei: Bis etwa 1300 px läge der Nach-oben-Knopf
(34-floating.css, 44 px, 1.25rem vom Rand) sonst über der letzten
Zeile. */
max-height: calc(100vh - var(--header-h) - 7.5rem);
max-height: calc(100svh - var(--header-h) - 7.5rem);
margin-top: clamp(2rem, 4vw, 3rem);
overflow-y: auto;
/* Platz für Fokusring und Playhead, die der Scrollbereich sonst
abschnitte. */
padding: 4px;
scrollbar-width: thin;
}
.chapter-track--aside .chapter-track__head {
padding-inline: .75rem;
}
}
@media (min-width: 75rem) and (max-height: 38rem) {
.chapter-track--aside {
position: static;
max-height: none;
}
}
/* ---------- Lese-Fortschritt (Inventar 7.3 Nr. 4 sinngemäß) ----------
Jedes Kapitel ist eine View-Timeline (--ch1 … --ch12). timeline-scope an
.article macht die Namen für die Spur sichtbar, die nicht im Kapitel
steht. exit-crossing mit Einzug 30 %: Das Kapitel läuft, solange seine
Ober- bis Unterkante die Leselinie bei 30 % der Fensterhöhe kreuzt
(dieselbe Linie wie 33-chapter-track.js).
- Füllung (::before am Strich): scaleX 0 → 1, bleibt gefüllt.
- Playhead (::after am Strich): 2 px breiter Strich in --playhead, 12 px
hoch, an der Füllkante. Die Ebene ist so breit wie der Strich, nur ihr
rechter Rand ist gefärbt; translateX −100 % → 0 führt ihn mit der
Füllung. Sichtbar nur, solange das Kapitel läuft (fill-mode none, sonst
opacity 0); mit JS hält die aktuelle Zeile ihn auch in der Lücke
zwischen zwei Kapiteln.
Animiert werden nur transform und opacity (7.1). Ohne Unterstützung, bei
reduzierter Bewegung und ab dem 13. Kapitel: kein Fortschritt, die
aktuelle Zeile trägt den vollen Strich (siehe oben). */
@supports (animation-timeline: view()) and (timeline-scope: --a) {
@media (prefers-reduced-motion: no-preference) {
.article:has(.article__chapter) {
timeline-scope: --ch1, --ch2, --ch3, --ch4, --ch5, --ch6, --ch7, --ch8, --ch9, --ch10, --ch11, --ch12;
}
.article__chapter {
view-timeline-inset: 30% 0%;
}
.article__chapter:nth-child(1 of .article__chapter) { view-timeline-name: --ch1; }
.article__chapter:nth-child(2 of .article__chapter) { view-timeline-name: --ch2; }
.article__chapter:nth-child(3 of .article__chapter) { view-timeline-name: --ch3; }
.article__chapter:nth-child(4 of .article__chapter) { view-timeline-name: --ch4; }
.article__chapter:nth-child(5 of .article__chapter) { view-timeline-name: --ch5; }
.article__chapter:nth-child(6 of .article__chapter) { view-timeline-name: --ch6; }
.article__chapter:nth-child(7 of .article__chapter) { view-timeline-name: --ch7; }
.article__chapter:nth-child(8 of .article__chapter) { view-timeline-name: --ch8; }
.article__chapter:nth-child(9 of .article__chapter) { view-timeline-name: --ch9; }
.article__chapter:nth-child(10 of .article__chapter) { view-timeline-name: --ch10; }
.article__chapter:nth-child(11 of .article__chapter) { view-timeline-name: --ch11; }
.article__chapter:nth-child(12 of .article__chapter) { view-timeline-name: --ch12; }
/* Spezifität bewusst niedrig (:where): Die Kapitelregeln unten setzen
nur animation-timeline und müssen die Kurzschreibweise hier
überstimmen, sonst liefe die Füllung auf der Dokument-Zeitleiste
sofort ans Ende. Ab dem 13. Kapitel keine Animation, ohne Hülle
(.article__chapter) auch nicht. */
:where(.article:has(.article__chapter) .chapter-track__item:nth-child(-n + 12)) .chapter-track__len::before {
animation: chapter-fill linear both;
animation-range: exit-crossing 0% exit-crossing 100%;
}
:where(.article:has(.article__chapter) .chapter-track__item:nth-child(-n + 12)) .chapter-track__len::after {
content: "";
position: absolute;
z-index: var(--z-raised);
top: -4px;
left: 0;
width: 100%;
height: 12px;
background: linear-gradient(var(--playhead) 0 0) right top / 2px 100% no-repeat;
opacity: 0;
pointer-events: none;
animation: chapter-play linear none;
animation-range: exit-crossing 0% exit-crossing 100%;
}
/* Zwischen zwei Kapiteln liegt der zusammengefallene Rand der nächsten
Überschrift (bis 85 px). Dort ist kein Kapitel „am Laufen“, der
Playhead verschwände kurz. Mit JS hält die aktuelle Zeile ihn deshalb
an der Füllkante, bis das nächste Kapitel übernimmt. */
:where(.article:has(.article__chapter) .chapter-track__item:nth-child(-n + 12)) [aria-current] .chapter-track__len::after {
animation-fill-mode: both;
}
:where(.chapter-track__item:nth-child(1)) .chapter-track__len::before,
:where(.chapter-track__item:nth-child(1)) .chapter-track__len::after { animation-timeline: --ch1; }
:where(.chapter-track__item:nth-child(2)) .chapter-track__len::before,
:where(.chapter-track__item:nth-child(2)) .chapter-track__len::after { animation-timeline: --ch2; }
:where(.chapter-track__item:nth-child(3)) .chapter-track__len::before,
:where(.chapter-track__item:nth-child(3)) .chapter-track__len::after { animation-timeline: --ch3; }
:where(.chapter-track__item:nth-child(4)) .chapter-track__len::before,
:where(.chapter-track__item:nth-child(4)) .chapter-track__len::after { animation-timeline: --ch4; }
:where(.chapter-track__item:nth-child(5)) .chapter-track__len::before,
:where(.chapter-track__item:nth-child(5)) .chapter-track__len::after { animation-timeline: --ch5; }
:where(.chapter-track__item:nth-child(6)) .chapter-track__len::before,
:where(.chapter-track__item:nth-child(6)) .chapter-track__len::after { animation-timeline: --ch6; }
:where(.chapter-track__item:nth-child(7)) .chapter-track__len::before,
:where(.chapter-track__item:nth-child(7)) .chapter-track__len::after { animation-timeline: --ch7; }
:where(.chapter-track__item:nth-child(8)) .chapter-track__len::before,
:where(.chapter-track__item:nth-child(8)) .chapter-track__len::after { animation-timeline: --ch8; }
:where(.chapter-track__item:nth-child(9)) .chapter-track__len::before,
:where(.chapter-track__item:nth-child(9)) .chapter-track__len::after { animation-timeline: --ch9; }
:where(.chapter-track__item:nth-child(10)) .chapter-track__len::before,
:where(.chapter-track__item:nth-child(10)) .chapter-track__len::after { animation-timeline: --ch10; }
:where(.chapter-track__item:nth-child(11)) .chapter-track__len::before,
:where(.chapter-track__item:nth-child(11)) .chapter-track__len::after { animation-timeline: --ch11; }
:where(.chapter-track__item:nth-child(12)) .chapter-track__len::before,
:where(.chapter-track__item:nth-child(12)) .chapter-track__len::after { animation-timeline: --ch12; }
}
}
@keyframes chapter-fill {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
@keyframes chapter-play {
from { opacity: 1; transform: translateX(-100%); }
to { opacity: 1; transform: translateX(0); }
}
/* ===== 74-blocks.css ===== */
/* =========================================================================
74 Blöcke im Artikel (Besitz: Team E, Redaktion) – Spezifikation 6.23
Markup: template-parts/blocks/smm-takeaway.php, smm-quote.php,
smm-cta-box.php
(smm-faq-block: 62-faq.css, Team D · smm-video-block: 45-video-sections.css, Team B)
Keine Seitenleisten, keine Akzentlinien, keine Schatten, keine
Untertitel-Tafel und keine Zeitmarke in Blöcken (5.1, 5.8, 9.6).
375 px: Blöcke in voller Spaltenbreite mit Padding 1.25rem.
========================================================================= */
/* ---------- smm-takeaway: Das Wichtigste in Kürze ----------
Ruhige Fläche (--surface: Kreide auf Weiß), Radius 4px. Liste mit den
Pixelquadraten aus .bullets (16-lists-checks-stars.css). */
.blk-takeaway {
margin-block: 2.5rem;
padding: 1.25rem;
border-radius: var(--r-panel);
background: var(--surface);
color: var(--text);
}
.blk-takeaway__title {
margin: 0 0 1rem;
font: 600 var(--fs-xs)/1.35 var(--font-text);
color: var(--text-soft);
}
.blk-takeaway__list {
margin: 0;
font-size: var(--fs-body);
line-height: 1.55;
}
/* .prose setzt Abstände zwischen Listenpunkten; hier regelt das gap der Liste. */
.blk-takeaway__list > li + li {
margin-top: 0;
}
/* ---------- smm-quote: Hervorgehobenes Zitat ----------
O-Ton: schmal und schwer (Leitidee 1), hängendes „ ohne Seitenlinie.
Person und Position als Bauchbinde (13-lower-third.css). */
.blk-quote {
margin-block: 3rem;
}
.blk-quote__text {
margin: 0;
padding: 0;
font: 650 clamp(1.375rem, 1.1rem + 1vw, 1.875rem)/1.3 var(--font-display);
font-stretch: 88%;
letter-spacing: -.005em;
color: var(--text);
/* Das „ steht vor der Satzkante, der Text fluchtet mit dem Fließtext.
Der Überhang ist kleiner als der seitliche Gutter (18 px bei 320 px). */
text-indent: -.42em;
text-wrap: pretty;
}
.blk-quote > .blk-quote__author {
/* FIX: Die Bildunterschrift-Regel aus 02-base.css gilt nur noch für
figcaption ohne Klasse bzw. mit Core-Klassen, der Autor erbt Größe und
Farbe also ohnehin; font-size/color: inherit entfallen. Der Abstand
bleibt: Die Bauchbinde braucht Luft unter dem Zitat. */
margin-top: 1.25rem;
}
/* ---------- smm-cta-box: CTA-Kasten ----------
Kompaktes Studio-Panel, Radius 4px. Titel Archivo 760 1.5rem weiß ohne
Tafel, Text #A7C0C2 (--text-soft auf Studio, 8,44:1), Button hell über
die Tokens von .theme-studio. */
.blk-cta {
margin-block: 2.5rem;
padding: 1.25rem;
border-radius: var(--r-panel);
}
.blk-cta__title {
margin: 0 0 .625rem;
font: 760 1.5rem/1.2 var(--font-display);
font-stretch: 96%;
letter-spacing: -.005em;
color: var(--text);
text-wrap: balance;
}
.blk-cta__text {
margin: 0;
font-size: var(--fs-body);
line-height: 1.6;
color: var(--text-soft);
}
.blk-cta__actions {
margin-top: 1.25rem;
}
/* 375 px: Button über die volle Kastenbreite (4.5), Beschriftung darf umbrechen. */
@media (max-width: 47.99rem) {
.blk-cta__actions .btn {
display: flex;
width: 100%;
}
.blk-cta__actions .btn__label {
flex: 1;
}
}
@media (min-width: 48rem) {
.blk-takeaway,
.blk-cta {
padding: 1.75rem;
}
}
/* ===== 75-404-search.css ===== */
/* =========================================================================
75 404 und Suche (Besitz: Team E, Redaktion) – Spezifikation 6.24, 6.25
Markup: 404.php, search.php, searchform.php (Feldoptik: 11-forms.css, F)
404: section.notfound > .notfound__inner
h1.notfound__title · p.notfound__text
div.notfound__actions > div.notfound__search + a.btn--ghost
div.notfound__popular > p.notfound__label + nav > ul.notfound__chips
div.notfound__mark
p.notfound__code echter Statuscode
span.notfound__clip[aria-hidden] Clip, Griffe, Playhead auf null
Suche: section.page-head (Grundlage 72-archive.css)
… h1.page-head__title · p.page-head__count · div.page-head__search
div.result-list > article.result-row.trim.trim--hover
div.search-empty
Linksbündig, keine Zentrierung. ABWEICHUNG 404: Statuscode als Zeitmarke
mit leerem Clip (siehe 404.php).
========================================================================= */
/* ---------- 404 ---------- */
/* Abstand wie der breite Hero (6.3), nicht wie eine Inhaltssektion. */
.notfound {
padding-block: clamp(3rem, 6vw, 6rem) clamp(3.5rem, 6vw, 5.5rem);
}
.notfound__inner {
max-width: 60rem;
min-width: 0;
}
/* ---------- Statuscode als Zeitmarke ----------
Grammatik aus 5.8 (17-timemark.css), hier nachgebaut statt die
.timemark-Klassen zu leihen: Dort ist der Playhead an den Zeitraffer aus
34-timemark.js gebunden und im Ruhezustand unsichtbar. Hier steht er fest
am Einstiegspunkt, denn der Clip wurde nie abgespielt. Keine Bewegung,
also auch ohne JS, bei reduzierter Bewegung und im Druck dasselbe Bild.
Unter 62rem Schlusszeile unter den Chips wie die Kopfzeile im cta_band
(63-cta-band.css): Ziffern und Clip in einer Zeile, der Clip steht auf der
Grundlinie der Ziffern (ohne Text liegt seine Grundlinie an der
Unterkante). Größe 3.5rem, ab 48rem 4.5rem wie dort.
Farben über Tokens: 404 in --accent-text (#156A72 auf Weiß, 6,29),
Clip --surface (Kreide), Griffe --trim (Teal), Playhead --playhead (Tinte). */
.notfound__mark {
--notfound-mark-fs: 3.5rem;
display: flex;
align-items: baseline;
column-gap: 1rem;
margin-top: 3rem;
}
.notfound__code {
flex: none;
margin: 0;
font: 800 var(--notfound-mark-fs)/.9 var(--font-display);
font-stretch: 72%;
/* Tabellarische Versalziffern wie im Timecode (tnum in archivo-var.woff2). */
font-variant-numeric: tabular-nums lining-nums;
letter-spacing: -.01em;
color: var(--accent-text);
white-space: nowrap;
}
/* Clip mit festen Trim-Griffen (5.5), 12 px hoch wie in 5.8. */
.notfound__clip {
position: relative;
display: block;
flex: 1 1 0;
min-width: 0;
height: .75rem;
background:
linear-gradient(var(--trim) 0 0) left / 6px 100% no-repeat,
linear-gradient(var(--trim) 0 0) right / 6px 100% no-repeat,
var(--surface);
}
/* Playhead auf null, Grammatik wie in der Schnitt-Spur (5.6): 2 px Strich
mit 10-px-Quadrat als Kopf über dem Clip. Mitte 7 px wie der Einstiegs-
punkt in 17-timemark.css (--timemark-in): Innenkante des Griffs plus
1 px, der Strich steht also neben dem Griff, nie darauf. */
.notfound__clip::before {
content: "";
position: absolute;
top: -.625rem;
bottom: -.25rem;
left: 2px;
width: 10px;
background:
linear-gradient(var(--playhead) 0 0) 50% 0 / 10px 10px no-repeat,
linear-gradient(var(--playhead) 0 0) 50% 0 / 2px 100% no-repeat;
pointer-events: none;
}
/* H1 wie im breiten Hero (3.4): Archivo 800, stretch 94 % (unter 24rem 86 %),
höchstens 18ch. Unter 48rem 34 px wie der Hero, --fs-h1-wide begänne bei
40 px. Keine Tafel.
FIX: Breite aus --stretch-title (00-tokens.css). Das feste 94 % überstimmte
die 24rem-Regel aus 02-base.css in jeder Breite. */
.notfound__title {
max-width: 18ch;
font-size: var(--fs-h1-split);
font-weight: 800;
font-stretch: var(--stretch-title);
line-height: 1.1;
letter-spacing: -.015em;
}
.notfound__text {
max-width: 34rem;
margin: 1.5rem 0 0;
font-size: var(--fs-body);
line-height: 1.55;
color: var(--text-soft);
}
/* Suchformular und „Zur Startseite“ in einer Reihe; 375 px untereinander in
voller Breite (6.24).
FIX (Befund notfound-aktionen): Mobil stand der Button 12 px unter dem
Suchfeld, mit derselben grauen Kante und 4 px niedriger; er las sich wie ein
zweites Feld. 20 px Abstand trennen die beiden Handlungen, bleiben aber
deutlich unter den 40 px bis „Häufig gesucht“. */
.notfound__actions {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 1.25rem;
margin-top: 2rem;
}
.notfound__search {
min-width: 0;
}
/* Gleiche Höhe wie Suchfeld und Lupe (11-forms.css) in jeder Breite. */
.notfound__actions .notfound__home {
display: flex;
width: 100%;
min-height: 3.25rem;
}
.notfound__home .btn__label {
flex: 1;
}
.notfound__popular {
margin-top: 2.5rem;
}
.notfound__label {
margin: 0 0 .75rem;
font: 600 var(--fs-xs)/1.35 var(--font-text);
color: var(--text);
}
.notfound__chips {
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 48rem) {
.notfound__title {
font-size: var(--fs-h1-wide);
line-height: 1.06;
}
.notfound__text {
font-size: var(--fs-lead);
}
/* Am Desktop lagen Lupe und Button 12 px auseinander, fast so eng wie Feld
und Lupe (8 px); der Button wirkte wie ein zweiter Absende-Knopf. */
.notfound__actions {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
column-gap: 1.5rem;
}
.notfound__search {
flex: 1 1 20rem;
max-width: 28rem;
}
.notfound__actions .notfound__home {
display: inline-flex;
width: auto;
}
.notfound__home .btn__label {
flex: 0 1 auto;
}
.notfound__mark {
--notfound-mark-fs: 4.5rem;
column-gap: 1.5rem;
}
}
/* Ab 62rem: Text links (7fr), Zeitmarke rechts (5fr) wie im Schluss-Panel
(5.8): oben der Timecode in --fs-time, direkt darunter der Clip in
Ziffernbreite, Ziffern und Clip als eine Einheit.
Ziffernoberkante bündig mit der Versalhöhe der ersten H1-Zeile. Archivo
(1000 Einheiten): Ascender 878, Descender 210, Versalhöhe 686,
Ziffernhöhe 698 (Messwerte aus 63-cta-band.css). Abstand zur Oberkante
der Zeilenbox = (Zeilenhöhe − 1,088) / 2 + 0,878 − Höhe:
H1, Zeilenhöhe 1.06 (ab 48rem, oben) 0,178 em von --fs-h1-wide
404, Zeilenhöhe .9 0,086 em von --notfound-mark-fs
Die H1 hat keinen oberen Rand (02-base.css), beide Boxen beginnen also
an der Oberkante der ersten Rasterzeile. */
@media (min-width: 62rem) {
.notfound__inner {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
column-gap: clamp(2.5rem, 5vw, 5rem);
max-width: none;
}
.notfound__inner > * {
grid-column: 1;
}
.notfound__inner > .notfound__mark {
--notfound-mark-fs: var(--fs-time);
display: block;
grid-column: 2;
grid-row: 1 / span 4;
align-self: start;
/* Abnahme Runde 4: Einheit wie die Zeitmarke im Schluss-Panel
(63-cta-band.css) – die Spalte schrumpft auf die Ziffern, die
Leiste ist genau so breit wie „404“ und steht rechts bündig an der
Rasterkante statt über die ganze Spalte zu laufen. */
justify-self: end;
margin-top: calc(.178 * var(--fs-h1-wide) - .086 * var(--notfound-mark-fs));
}
/* Abstand wie .timemark__clip (17-timemark.css): sichtbar rund 21 px. */
.notfound__clip {
margin-top: .375rem;
}
}
/* ---------- Suche: Kopf ---------- */
.page-head__count {
margin: 1rem 0 0;
font-size: var(--fs-body);
line-height: 1.5;
color: var(--text-soft);
}
.page-head__search {
max-width: 32rem;
margin-top: 1.5rem;
}
/* ---------- Suche: Trefferzeilen ----------
Titel Archivo 700 1.25rem (gestreckter Link), Auszug Schibsted 16 px,
Meta in Plex Mono 13 px, unten 1px --line, Padding-block 1.5rem.
Hover und Fokus: Trim-Griffe (14-trim.css), Titel unterstrichen; Fokus
zusätzlich mit eigener Outline an der Zeile. */
/* FIX (Befund suche-trefferliste): Die Linien liefen über 1216 px, der Text
endete bei rund 790 px; beim Hover umrahmten die Trim-Griffe eine halb
leere Fläche. 52rem fasst Titel (48rem) und Auszug (68ch) samt Innenabstand.
Gilt auch für die Zeilen in archive.php. */
.result-list {
max-width: 52rem;
border-top: 1px solid var(--line);
}
.result-row {
padding: 1.5rem 1rem;
border-bottom: 1px solid var(--line);
/* FIX: min-width 0 und break-word: Ein langer Titel oder eine URL im
Auszug darf die Zeile auf 320 px nicht aufsprengen. */
min-width: 0;
overflow-wrap: break-word;
}
.result-row__title {
max-width: 48rem;
margin: 0;
font: 700 1.25rem/1.25 var(--font-display);
font-stretch: 100%;
letter-spacing: 0;
/* FIX (Befund suche-trefferliste): pretty überschrieb balance aus
02-base.css (3.4) und ließ „nicht“ und „wirkt“ allein in der letzten
Zeile stehen. */
text-wrap: balance;
}
/* FIX: Linienwerte am Link statt am Hover-Zustand, Offset .2em wie jeder
Link (02-base.css) und wie Fallstudien-Zeile und Post-Karte (66, 71). Der
Zustand schaltet nur noch die Linie ein; so sehen alle gestreckten
Zeilen-Links bei Hover und Tastaturfokus gleich aus. */
.result-row__link {
color: var(--text);
text-decoration: none;
text-decoration-color: var(--accent-text);
text-decoration-thickness: 2px;
text-underline-offset: .2em;
}
/* Die ganze Zeile ist Klickfläche und genau ein Tabstopp (9.5). Die
Trim-Griffe liegen mit pointer-events: none darüber. */
.result-row__link::after {
content: "";
position: absolute;
inset: 0;
}
/* FIX: Tastaturfokus unterstreicht den Titel wie Hover (wie 66 und 71). */
.result-row__link:focus-visible {
text-decoration-line: underline;
}
/* FIX: Hover nur mit echtem Zeiger, sonst bleibt die Linie nach dem Antippen
auf Touch stehen. :where() hält die Spezifität bei einer Klasse plus
Zustand (8.5.4). */
@media (hover: hover) {
.result-row:hover :where(.result-row__link) {
text-decoration-line: underline;
}
}
@supports selector(:has(*)) {
.result-row:has(.result-row__link:focus-visible) {
outline: 2px solid var(--focus);
outline-offset: 2px;
}
.result-row__link:focus-visible {
outline: none;
}
}
.result-row__excerpt {
max-width: 68ch;
margin: .5rem 0 0;
font-size: 1rem;
line-height: 1.55;
color: var(--text-soft);
}
.result-row__meta {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: .25rem .5rem;
margin: .75rem 0 0;
font: 500 var(--fs-mono)/1.35 var(--font-mono);
letter-spacing: .02em;
color: var(--text-soft);
}
/* ---------- Suche: keine Treffer ----------
Linksbündig, ohne die alte zentrierte .empty-state (6.25). */
.search-empty {
max-width: 44rem;
}
.search-empty__lead {
margin: 0 0 .75rem;
font-size: var(--fs-lead);
line-height: 1.55;
color: var(--text);
}
.search-empty__text {
max-width: 60ch;
color: var(--text-soft);
}
.search-empty__actions {
margin-top: 1.5rem;
}
/* Sektions-CTA-Regel: btn--lg btn--block aus search.php. Unter 48rem stehen
die Buttons untereinander in voller Breite, primär zuerst (4.5), und in
gleicher Höhe, auch wenn ein Label umbricht (Raster statt .btn-row-Flex,
wie beim Inline-CTA). Ab 48rem natürliche Breite nebeneinander. */
@media (max-width: 47.99rem) {
.search-empty__actions {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-auto-rows: 1fr;
align-items: stretch;
}
}
@media (min-width: 48rem) {
.search-empty__actions :where(.btn--block) {
display: inline-flex;
width: auto;
}
}
/* ===== 90-motion.css ===== */
/* =========================================================================
90 Bewegung (Besitz: Fundament F2) – docs/design-system.md 7
1. Reduced-Motion-Netz (einzige Stelle mit !important)
2. Scroll-getriebene Animationen unter reduce explizit aus
3. Ausgangszustände der Einblendungen, nur unter html.smm-motion
Grundsatz 7.1.3: Nichts startet unsichtbar ohne JavaScript. smm-motion
setzt erst 30-reveal.js beim Boot, und nur ohne reduzierte Bewegung und
mit IntersectionObserver. Vorher, ohne JS und bei „JavaScript verzögern“
bleibt alles sichtbar. Das Inline-Skript im
setzt nur smm-js; daran
hängt hier bewusst kein Ausgangszustand.
========================================================================= */
/* ---------- 1. Reduced-Motion-Netz (7.1.6) ---------- */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}
/* ---------- 2. Scroll-getriebene Animationen (Inventar 4 und 5) ----------
Das Netz oben greift hier nicht: Bei animation-timeline: view() ist die
Dauer bedeutungslos, die Animation folgt weiter dem Scrollen. Die
Abschaltung liegt laut 7.1.6 zentral hier, damit sie auch greift, wenn eine
Sektionsregel die Media-Query-Klammer vergisst.
ABWEICHUNG von 9.4 (Runde 3, Schnitt-Spur): Der Playhead läuft nicht mehr
scroll-getrieben, sondern einmal zeitgesteuert über .timeline-wrap.is-revealed
(53-process.css). Unter reduce und ohne JavaScript zeigt die Spur das
Schlussbild: Playhead am Ende (als ::after an .timeline-wrap gezeichnet,
deshalb stört das display: none unten nicht), alle Clips gefüllt. Die
beiden Regeln bleiben als Netz für scroll-getriebene Varianten stehen. */
@media (prefers-reduced-motion: reduce) {
.timeline__playhead {
display: none !important;
animation: none !important;
}
.timeline__clip,
.timeline__step::after {
animation: none !important;
}
}
/* ---------- 3. Einblendungen (Inventar 2 und 3) ----------
Beide Zustände nur unter no-preference UND html.smm-motion. Die doppelte
Klammer hält den Inhalt auch dann sichtbar, wenn die Einstellung wechselt,
bevor das Skript smm-motion entfernt hat. */
@media (prefers-reduced-motion: no-preference) {
/* Listen-Einblendung (problems, oton, channel-row, timeline__step):
opacity 0→1, translateY 8px→0, 420 ms. Die Staffelung über
data-reveal-delay (0, 60, 120) setzt 30-reveal.js zeitlich, nicht über
transition-delay, damit spätere Hover-Übergänge nicht verzögert werden.
Vertrag: Ein Element mit data-reveal trägt selbst keine eigene
transition; Hover-Übergänge gehören an ein Kindelement.
Die Selektoren nennen genau das Inventar 7.3 („mehr gibt es nicht“),
nicht jedes [data-reveal]. Sonst würde jedes data-reveal, das ein
Template zusätzlich setzt (Karten, Rechtstexte, Panels), sofort zu
einer Einblendung, und die transition-Regel überschriebe dort eigene
Hover-Übergänge. data-reveal an anderen Elementen bleibt so wirkungslos:
30-reveal.js setzt zwar is-revealed, sichtbar ändert sich nichts.
Neue Einblendungen brauchen eine Änderung am Inventar und hier.
Die Druck-Sicherung in 99-print.css nutzt dieselben Selektoren. */
html.smm-motion :is(.problem, .oton, .channel-row, .timeline__step)[data-reveal] {
transition:
opacity var(--dur-3) var(--ease-cut),
transform var(--dur-3) var(--ease-cut);
}
html.smm-motion :is(.problem, .oton, .channel-row, .timeline__step)[data-reveal]:not(.is-revealed) {
opacity: 0;
transform: translateY(8px);
}
/* Rahmenmarken rasten ein (5.4): Nur die Marken bewegen sich, Poster und
Video nie. Abweichung zu 5.4, begründet: Dort steht
.frame:not(.is-revealed) ohne [data-reveal]. Ein Rahmen mit
reveal => false bekommt kein data-reveal, das Skript setzt dort nie
is-revealed, und seine Marken blieben für immer unsichtbar. */
.frame[data-reveal] .frame__screen::after {
transition:
opacity var(--dur-3) var(--ease-cut),
transform var(--dur-3) var(--ease-cut);
}
html.smm-motion .frame[data-reveal]:not(.is-revealed) .frame__screen::after {
opacity: 0;
transform: scale(1.035);
}
}
/* ===== 99-print.css ===== */
/* =========================================================================
99 Druck (Besitz: Fundament F2)
Ziel: Rechtstexte, Artikel und Leistungsseiten lassen sich lesbar drucken.
Browser drucken Hintergründe standardmäßig nicht. Weiße Schrift auf
Studio, Tafeln und Bauchbinden stünden dann weiß auf weißem Papier. Die
Tokens kippen deshalb für den Druck auf die helle Variante, und Tafeln
werden zu Text ohne Fläche.
========================================================================= */
@media print {
@page {
margin: 16mm 14mm;
}
/* Alle Gründe drucken hell: Tokens aus 00-tokens.css auf die Werte der
Sektion white zurücksetzen. Flächen-Tokens werden transparent, ihre
Schrift dunkel. */
:root,
[data-theme="dark"],
.theme-studio,
.section--bg-mist,
.section--bg-teal {
--bg: var(--c-white);
--surface: transparent;
--text: var(--c-ink);
--text-soft: var(--c-ink-soft);
--accent-text: var(--c-teal-ink);
--line: var(--c-line);
--line-ui: var(--c-line-ui);
--mark: var(--c-teal);
--trim: var(--c-teal);
--plate-bg: transparent;
--plate-fg: var(--c-ink);
--bridge-bg: transparent;
--bridge-fg: var(--c-ink);
--l3-name-bg: transparent;
--l3-name-fg: var(--c-ink);
--l3-role-bg: transparent;
--l3-role-fg: var(--c-ink-soft);
--clip-bg: transparent;
--clip-fg: var(--c-ink);
--clip-on-bg: transparent;
--clip-on-fg: var(--c-ink);
--star: var(--c-ink);
--star-off: var(--c-line-ui);
--error: var(--c-error);
--btn-label-bg: transparent;
--btn-label-fg: var(--c-ink);
--btn-go-bg: transparent;
--btn-go-fg: var(--c-ink);
--ghost-border: var(--c-line-ui);
--ghost-fg: var(--c-ink);
color: var(--c-ink);
background: var(--c-white);
}
/* Bedienelemente und schwebende Leisten haben auf Papier keinen Zweck.
(Liste aus der alten app.css, ergänzt um Megamenü, Skip-Link und
Abspielknöpfe. Die Kapitel-Spur im Artikel ist Navigation für den
Bildschirm; die Überschriften stehen im Text.) */
.chapter-track,
.site-header,
.topbar,
.megamenu,
.skip-link,
.site-footer,
.footer-cta,
.sticky-cta,
[data-sticky-cta],
.to-top,
[data-to-top],
.slider__nav,
.video-embed__play,
.reel__play,
.reel__sound {
display: none;
}
.section {
padding-block: 1rem;
}
/* FIX: Einblendungen. Druckt jemand, bevor er gescrollt hat, stünden alle
noch nicht eingeblendeten Elemente mit opacity 0 auf dem Papier.
30-reveal.js schaltet bei beforeprint alles frei; diese Regel ist die
Sicherung für Browser ohne beforeprint. Selektoren identisch zu
90-motion.css, damit die spätere Regel gewinnt. */
html.smm-motion :is(.problem, .oton, .channel-row, .timeline__step)[data-reveal]:not(.is-revealed) {
opacity: 1;
transform: none;
}
html.smm-motion .frame[data-reveal]:not(.is-revealed) .frame__screen::after {
opacity: 1;
transform: none;
}
/* FIX: Walzen. Eine noch nicht gerollte Walze zeigt lauter Nullen
(„000 Mio.“). Im Druck steht jede Ziffer sofort auf dem Endwert. */
.odo .odo__s {
transform: translateY(calc(var(--n, 0) * -1em));
transition: none;
}
/* Aktiver Chip ohne gedruckte Fläche: dunkler Rand statt weißer Schrift.
FIX: Alias .chip.is-active entfernt wie in 16-lists-checks-stars.css. */
.chip[aria-current="page"] {
border-color: var(--c-ink);
background: transparent;
color: var(--c-ink);
}
/* Zusammenhalten, was zusammengehört. */
.frame,
.l3,
.timemark,
.checks > li,
.bullets > li {
break-inside: avoid;
}
.section__title,
.section__header {
break-after: avoid;
}
/* Externe Ziele in Fließtexten sind auf Papier sonst verloren. */
.prose a[href^="http"]::after {
content: " (" attr(href) ")";
font-size: .875em;
overflow-wrap: anywhere;
}
}