/* ===========================================================================
Onda – Website components/website/website.css
Regeln: keine R-Nummer – Kapitel 14 ist die App. Die Regeln der Website stehen
im Vault auf onda-gestaltung-foerderer, Abschnitt „Website-Katalog“.
Stand 2026-10-13 – WEB20 Häufige Fragen und die Variante „seitlich“ von WEB9 auf Jan-Philips
Freigabe (aus /mitmachen), Satz im Fuß am Telefon in einer Zeile. Zuvor 2026-10-06 – im Kit
auf Jan-Philips Freigabe des Vorschlags vom 06.10.2026.
Werte aus der Förderfassung (werkzeuge/pitch-seite/vorlage.html, /impact);
Knopf ist der Textknopf EL33 (components/buttons/textknopf.css), am Telefon
ein Burger, kein Hinweis-Band über dem Kopf.
Eine Datei für alle Seiten von onda-app.de, je Baustein eine Karte:
WEB1 Grundgerüst grundgeruest.card.html Seite, Band, Blob, Aufbau, Text baut sich auf
WEB2 Schrift schrift.card.html Überschriften, Lead, Zeilen, Textlink
WEB3 Kopf kopf.card.html feste Leiste, Sprungmarken, Burger
WEB4 Fuß fuss.card.html Partnerleiste, Fuß in Petrol
Laden: tokens/colors.css, typography.css, radius-shadow.css, die Schriften
(eingebettet, kein CDN), diese Datei, textknopf.css; website.js mit defer im head.
Text-Body ist die Farbe, --onda-text-copy die Schrift (bis 06.10.2026 hießen beide
--onda-text-body, die Schrift überschrieb die Farbe).
Ein Umbruchpunkt: 900 px. Darunter eine Spalte, Rand 16 px, Band 52 px.
… WEB3
WEB1
…
…
WEB4
WEB4
=========================================================================== */
:root {
--web-inhalt: 1040px; /* Breite des Inhalts */
--web-text-seite: 680px; /* Textseite: Impressum, Datenschutz */
--web-rand: clamp(16px, 6vw, 96px);
--web-band: clamp(52px, 7vw, 88px); /* Abstand oben und unten je Band */
--web-leiste: 53px; /* Höhe des Kopfs */
--web-blob-b: 560px;
--web-blob-h: 520px;
}
@media (max-width: 900px) {
:root { --web-rand: 16px; --web-band: 52px; --web-blob-b: 340px; --web-blob-h: 320px; }
}
/* --- WEB1 · Grundgerüst ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--web-leiste); -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--onda-warm-white);
color: var(--onda-text-body);
font: var(--onda-text-copy);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: var(--onda-petrol); }
/* Band: eine Farbfläche über die volle Breite. Nur helle Flächen, nie zwei
gleiche nebeneinander; keine dunklen Bänder, keine Kanten, keine Kästen. */
.band { position: relative; overflow: clip; padding: var(--web-band) var(--web-rand); background: var(--onda-warm-white); }
.band--petrol { background: var(--onda-petrol-wash); }
.band--sky { background: var(--onda-sky-stage); }
.band--pink { background: var(--onda-pink-wash); }
.band > * { position: relative; z-index: 1; }
/* Das erste Band läuft unter dem Kopf durch. */
.kopf ~ main > .band:first-child { padding-top: calc(var(--web-band) + var(--web-leiste)); }
/* Je Band höchstens ein Blob, halb aus dem Bild. Farbe über --blob (Kit-Farbe),
Deckung --blob-deckung, Drehung --blob-dreh. Zwei Bänder hintereinander tragen
ihren Blob nie auf derselben Seite, sonst konkurrieren sie; im Zweifel bleibt ein
Band ohne Blob – die Fläche trennt die Bänder schon (06.10.2026, Jan-Philip). */
.band[data-blob]::before {
content: "";
position: absolute;
z-index: 0;
width: var(--web-blob-b);
height: var(--web-blob-h);
border-radius: var(--onda-blob-radius);
background: var(--blob, var(--onda-sky-stage));
opacity: var(--blob-deckung, .6);
rotate: var(--blob-dreh, 0deg);
pointer-events: none;
}
.band[data-blob="oben-rechts"]::before { top: -160px; right: -220px; }
.band[data-blob="unten-rechts"]::before { bottom: -220px; right: -260px; }
.band[data-blob="unten-links"]::before { bottom: -200px; left: -240px; }
.band[data-blob="oben-links"]::before { top: -120px; left: -240px; }
/* Aufbau: eine Spalte, zwei Spalten, Mitte, Dreierreihe; Textseite */
.innen { max-width: var(--web-inhalt); margin-inline: auto; }
.spalte { max-width: 600px; } /* eine Spalte wie die Startseite; der Lead darin bleibt bei 46ch */
.zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.zwei--text { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); } /* langer Text, daneben eine Grafik */
.mitte { text-align: center; }
/* Mittiger Text läuft breiter als linker: Spalte und Lead bis 700 px, sonst wirkt er wie ein
schmaler Streifen (06.10.2026, Jan-Philip). Links bleibt der Lead bei 46 Zeichen. */
.mitte .spalte, .mitte .lead { max-width: 700px; margin-inline: auto; }
.drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 4vw, 48px); }
.textseite { max-width: var(--web-text-seite); margin-inline: auto; }
@media (max-width: 900px) {
.zwei, .drei { grid-template-columns: minmax(0, 1fr); }
}
/* Text baut sich auf, sobald das Band im Bild ist: .auf je Zeile, 70 ms gestaffelt.
website.js setzt data-aufbau nur ohne reduzierte Bewegung; ohne Skript steht alles. */
html[data-aufbau="ja"] .auf {
opacity: 0;
transform: translateY(14px);
transition: opacity .45s ease, transform .55s cubic-bezier(.2, .8, .2, 1);
transition-delay: calc(var(--i, 0) * 70ms);
}
html[data-aufbau="ja"] .da .auf { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
html[data-aufbau="ja"] .auf { opacity: 1; transform: none; transition: none; }
}
/* --- WEB2 · Schrift --------------------------------------------------------- */
/* Überschriften League Spartan 700 in Petrol, −0,01 em; Text Montserrat 300;
Sublines in Sanchez, Pink-Deep. Pink-Deep statt Pink, wo Text auf hellem
Grund steht. */
h1, .h1, h2, .h2, h3, .h3, .vision {
font-family: var(--onda-font-display);
font-weight: var(--onda-w-bold);
letter-spacing: -.01em;
color: var(--onda-petrol);
text-wrap: balance;
}
h1, .h1 { font-size: clamp(40px, 5.6vw, 72px); line-height: 1; margin: 0 0 28px; }
h2, .h2 { font-size: clamp(30px, 4vw, 48px); line-height: 1.04; margin: 0 0 20px; }
h3, .h3 { font-size: 22px; line-height: 1.1; margin: 0 0 8px; }
.h3--gross { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.05; margin-bottom: 12px; }
.vision { font-size: clamp(36px, 5.4vw, 68px); line-height: 1; color: var(--onda-petrol-deep); max-width: 14ch; margin: 0 auto 20px; }
p { margin: 0 0 1.1em; text-wrap: pretty; }
/* kleine Überschrift über h1/h2 */
.augenbraue {
display: block;
font: var(--onda-text-eyebrow);
letter-spacing: var(--onda-eyebrow-tracking);
text-transform: uppercase;
color: var(--onda-pink-deep);
margin: 0 0 16px;
}
.lead {
font: var(--onda-w-light) clamp(17px, 1.4vw, 19px)/1.6 var(--onda-font-body);
color: var(--onda-text-body);
max-width: 46ch;
margin: 0;
text-wrap: pretty;
}
/* Schlusszeile eines Bands: der Satz, der bleibt */
.schlusszeile {
font: 400 clamp(20px, 1.9vw, 24px)/1.35 var(--onda-font-serif);
color: var(--onda-pink-deep);
max-width: 30ch;
margin: 26px 0 0;
}
/* hervorgehobene Zeile: worum es geht, mit Pink-Line darüber */
.hervor {
font: var(--onda-w-medium) 17px/1.55 var(--onda-font-body);
color: var(--onda-petrol);
max-width: 38ch;
margin: 28px 0 0;
padding-top: 22px;
border-top: 2px solid var(--onda-pink-line);
}
.quelle { font: var(--onda-w-light) 12px/1.5 var(--onda-font-body); color: var(--onda-text-muted); margin: 12px 0 0; }
.textlink {
font-weight: var(--onda-w-medium);
color: var(--onda-petrol);
text-decoration: none;
border-bottom: 2px solid var(--onda-petrol-tint);
white-space: nowrap;
}
.textlink:hover { border-color: var(--onda-petrol); }
.textlink::after { content: " →"; }
/* --- WEB3 · Kopf ------------------------------------------------------------ */
/* Feste Leiste, Warm-White 86 % mit Unschärfe. Startseite: Sprungmarken, die
aktive als Pille in Petrol-Tint; am Telefon Wortmarke mittig und Burger.
Unterseiten: nur „Zur Startseite“. Kein Hinweis-Band darüber. */
.kopf {
position: fixed;
inset: 0 0 auto 0;
z-index: 50;
height: var(--web-leiste);
display: flex;
align-items: center;
gap: 20px;
padding: 0 var(--web-rand);
background: color-mix(in srgb, var(--onda-warm-white) 86%, transparent);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
border-bottom: 1px solid color-mix(in srgb, var(--onda-ink) 6%, transparent);
}
.kopf-marke { display: block; flex: 0 0 auto; }
.kopf-marke img, .kopf-marke svg { display: block; height: 26px; width: auto; }
.kopf-nav { display: flex; gap: 4px; margin-left: auto; }
.kopf-nav a, .kopf-zurueck {
font: var(--onda-w-semibold) 13px/1 var(--onda-font-body);
color: var(--onda-text-muted);
text-decoration: none;
padding: 7px 10px;
border-radius: var(--onda-radius-button);
white-space: nowrap;
}
.kopf-nav a:hover, .kopf-zurueck:hover { color: var(--onda-petrol); }
.kopf-nav a[aria-current] { color: var(--onda-petrol); background: var(--onda-petrol-tint); }
.kopf-zurueck { margin-left: auto; }
.kopf-zurueck::before { content: "← "; }
.burger { display: none; }
@media (max-width: 900px) {
.kopf:has(.kopf-nav) { justify-content: center; }
.burger {
display: grid;
gap: 5px;
place-content: center;
position: absolute;
right: 4px;
top: 50%;
translate: 0 -50%;
width: 44px;
height: 44px;
padding: 0;
border: 0;
background: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.burger span { display: block; width: 22px; height: 2px; border-radius: 1px; background: var(--onda-petrol); transition: transform .2s ease, opacity .2s ease; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.kopf-nav {
display: none;
position: absolute;
left: 0;
right: 0;
top: 100%;
flex-direction: column;
gap: 0;
margin: 0;
background: var(--onda-warm-white);
border-bottom: 1px solid var(--onda-line);
box-shadow: var(--onda-shadow-card);
}
.kopf-nav[data-offen="ja"] { display: flex; }
.kopf-nav a { padding: 16px; border-radius: 0; text-align: center; font-size: 16px; border-top: 1px solid var(--onda-line); }
}
/* --- WEB4 · Fuß ------------------------------------------------------------- */
/* Partnerleiste auf Warm-White, darunter der Fuß in Petrol: Wortmarke weiß, Satz
in Sanchez, Gründungshinweis, Spalten Kontakt und Rechtliches, ggf. Quellen,
Copyright. Impressum im Wortlaut nur auf Seiten, die als Datei verschickt werden. */
.partnerleiste { background: var(--onda-warm-white); border-top: 1px solid var(--onda-line-warm); padding: 28px var(--web-rand) 36px; }
.partnerleiste .innen { display: flex; align-items: center; justify-content: center; gap: 28px; }
.partnerleiste .augenbraue { margin: 0; color: var(--onda-text-muted); }
.partnerleiste img { height: 56px; width: auto; }
.fuss {
background: var(--onda-petrol);
color: var(--onda-white);
padding: 48px var(--web-rand) 28px;
font: var(--onda-w-light) 14px/1.6 var(--onda-font-body);
}
.fuss a { color: var(--onda-white); text-decoration: none; }
.fuss a:hover { text-decoration: underline; }
.fuss-oben {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
gap: 24px 40px;
padding-bottom: 24px;
border-bottom: 1px solid color-mix(in srgb, var(--onda-white) 20%, transparent);
}
/* Wortmarke weiß: inline das umfärben oder als Bild per Filter; die Augen
sind Löcher, durch sie scheint das Petrol. */
.fuss-wortmarke { display: block; margin-bottom: 14px; }
.fuss-wortmarke svg, .fuss-wortmarke img { display: block; height: 28px; width: auto; }
.fuss-wortmarke svg g { fill: var(--onda-white); }
.fuss-wortmarke img { filter: brightness(0) invert(1); }
.fuss-satz { font: 400 16px/1.4 var(--onda-font-serif); margin: 0 0 8px; }
.fuss-hinweis { font-weight: var(--onda-w-medium); margin: 0; }
.fuss-spalte b {
display: block;
font: var(--onda-text-eyebrow);
letter-spacing: var(--onda-eyebrow-tracking);
text-transform: uppercase;
color: var(--onda-sky);
margin-bottom: 8px;
}
.fuss-spalte a { display: block; }
.fuss-quellen { font-size: 12px; line-height: 1.6; color: color-mix(in srgb, var(--onda-white) 75%, transparent); margin: 20px 0 0; }
.fuss-copyright { font-size: 12px; color: color-mix(in srgb, var(--onda-white) 70%, transparent); margin: 20px 0 0; }
.fuss .innen { max-width: var(--web-inhalt); margin-inline: auto; }
@media (max-width: 900px) {
.partnerleiste .innen { flex-direction: column; gap: 12px; }
.fuss-oben { grid-template-columns: minmax(0, 1fr); }
}
/* Am Telefon steht der Satz im Fuß in einer Zeile (Jan-Philip, 13.10.2026) */
@media (max-width: 900px) {
.fuss-satz { font-size: clamp(12px, 3.75vw, 16px); white-space: nowrap; }
}
/* ===========================================================================
Elemente WEB5–WEB18 (Stand 2026-10-06), je eine Karte. Der Knopf ist der
Textknopf EL33 (textknopf.css), der Textlink steht in WEB2. Grafiken selbst
(Ring, Plätze) kommen von der Seite, nur ihr Rahmen steht hier (WEB16).
=========================================================================== */
/* --- WEB5 · Leitzahl: eine große Zahl, daneben der Satz ---------------------
25%
Jedes vierte Kind …
*/
.leitzahl { display: flex; align-items: flex-start; gap: 24px; }
.leitzahl-zahl {
font: var(--onda-w-bold) clamp(72px, 8vw, 120px)/.8 var(--onda-font-display);
letter-spacing: -.03em;
color: var(--onda-pink);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.leitzahl-zahl small { font-size: .42em; letter-spacing: 0; margin-left: .08em; vertical-align: .95em; }
.leitzahl p { font: var(--onda-w-light) 17px/1.5 var(--onda-font-body); color: var(--onda-text-body); max-width: 30ch; margin: 8px 0 0; }
/* --- WEB18 · Balkenvergleich: zwei oder drei Werte als wachsende Balken -------
Für einen Vergleich über die Zeit (2001 : 2021); der aktuelle Wert in Pink, die
anderen in Sky. Die Balken wachsen, sobald das Band im Bild ist. --balken-max ist
der Wert, der die ganze Spur füllt (Vorgabe 31,25: 25 % füllen 80 %).
200117 %
202125 %
*/
.balkenvergleich { margin: 32px 0; max-width: 560px; }
.balken { display: grid; grid-template-columns: 52px minmax(0, 1fr) 64px; align-items: center; gap: 14px; margin-bottom: 12px; }
.balken b { font: var(--onda-w-bold) 15px/1 var(--onda-font-display); color: var(--onda-text-muted); }
.balken i { font: var(--onda-w-bold) 22px/1 var(--onda-font-display); font-style: normal; color: var(--onda-ink); }
.balken .stab {
display: block;
height: 26px;
border-radius: var(--onda-radius-chip);
background: var(--onda-sky);
width: calc(var(--wert) / var(--balken-max, 31.25) * 100%);
transform-origin: left;
}
.balken.jetzt .stab { background: var(--onda-pink); }
.balken.jetzt i { color: var(--onda-pink); }
html[data-aufbau="ja"] .balken .stab { transform: scaleX(0); transition: transform 1.1s cubic-bezier(.2, .7, .2, 1) .2s; }
html[data-aufbau="ja"] .da .balken .stab { transform: scaleX(1); }
html[data-aufbau="ja"] .da .balken.jetzt .stab { transition-delay: .45s; }
/* --- WEB6 · Zahlenreihe: drei Zahlen, darunter je ein Satz ------------------
Spalten so breit wie ihre Zahl (min-content, die Zahl bricht nie um), der
Satz bricht darunter um: die Zahl ragt nie über ihre Spalte (in der
Förderfassung bei 1440 px um 20 px).
Die Zahlen zählen hoch, sobald das Band im Bild ist (data-zaehle wie WEB5); am
Telefon untereinander und mittig.
60+Kinder begleitet
…
*/
.zahlenreihe {
display: grid;
grid-template-columns: repeat(3, min-content);
gap: 20px clamp(32px, 6vw, 72px);
margin-top: 36px;
}
.zahlenreihe > div { font: var(--onda-w-light) 15px/1.3 var(--onda-font-body); color: var(--onda-text-muted); }
.zahlenreihe b {
display: block;
white-space: nowrap;
font: var(--onda-w-bold) clamp(40px, 4.6vw, 60px)/.95 var(--onda-font-display);
letter-spacing: -.01em;
color: var(--onda-petrol);
margin-bottom: 6px;
}
.zahlenreihe small { font-size: .42em; letter-spacing: 0; margin-right: 4px; }
/* Zählt eine Zahl hoch, behält sie die Breite ihres Endwerts: die Spalten wackeln nicht (website.js) */
[data-zaehle] { display: inline-block; font-variant-numeric: tabular-nums; text-align: right; }
/* --- WEB7 · Zeitleiste: waagrecht, am Telefon senkrecht ----------------------
Marken: erledigt (Petrol), jetzt (Pink, pulsiert), kommt (weiß mit Rand).