/* ==========================================================================
Nachhilfe mit Herz – Design-Tokens
Markenrichtung „Nah & persönlich“ · Stand 2. Oktober 2026
Einbinden (Reihenfolge wichtig):
Die Marke in einem Satz:
Viel Papier, Tinte für Text, Brombeere für die Marke,
Fensterlicht für höchstens EIN Wort pro Fläche, Rheingrün nur für Wasser und Wege.
Kontraste: berechnet nach WCAG 2.2 (relative Leuchtdichte, sRGB).
AAA = ab 7 : 1 · AA = ab 4,5 : 1 · „groß“ = ab 3 : 1 (nur Schrift ab 24 px oder 19 px fett)
========================================================================== */
:root {
/* ------------------------------------------------------------------------
1. Grundfarben (nur diese Werte verwenden)
HEX · RGB · CMYK-Näherung (ICC, gestrichen) – vor dem Druck Proof ansehen
------------------------------------------------------------------------ */
--nmh-brombeere: #7C2855; /* 124 40 85 · C47 M93 Y33 K15 · Marke: Logo, Hauptknopf, Links */
--nmh-brombeere-dunkel: #5F1D41; /* 95 29 65 · C55 M88 Y41 K39 · nur für Hover/gedrückt */
--nmh-tinte: #231A22; /* 35 26 34 · C20 M23 Y16 K87 · Text, Überschriften, Abendfläche */
--nmh-tinte-leise: #5A5258; /* 90 82 88 · C38 M41 Y27 K47 · Nebentext, Bildunterschrift */
--nmh-papier: #FFFFFF; /* 255 255 255 · C0 M0 Y0 K0 · Grundfläche (immer die größte) */
--nmh-flussnebel: #E8EEEB; /* 232 238 235 · C8 M3 Y6 K0 · kühle Ruhefläche: Infos, Karte */
--nmh-malvenbluete: #F0DEE6; /* 240 222 230 · C4 M13 Y5 K0 · warme Fläche: ab und zu Posts, Fensterfolie */
--nmh-rheingruen: #1E5F5A; /* 30 95 90 · C71 M33 Y44 K35 · sparsam: Rhein, Wege, Ortsnamen */
--nmh-fensterlicht: #FFD45C; /* 255 212 92 · C1 M16 Y82 K0 · Textmarker: 1 Wort pro Fläche; Herz auf Brombeere */
/* Linien (keine Schrift!) */
--nmh-haarlinie: #D9D3D7; /* feine Trennlinie statt Kasten (nur Deko, 1,5 : 1) */
--nmh-feldrand: #857B81; /* Rand von Eingabefeldern: 4,1 : 1 auf Papier (WCAG 1.4.11 ok) */
/* ------------------------------------------------------------------------
2. Rollen – im Baukasten bitte diese Namen benutzen, nicht die HEX-Werte
------------------------------------------------------------------------ */
--farbe-grund: var(--nmh-papier);
--farbe-text: var(--nmh-tinte);
--farbe-text-leise: var(--nmh-tinte-leise);
--farbe-marke: var(--nmh-brombeere);
--farbe-link: var(--nmh-brombeere);
--farbe-link-hover: var(--nmh-brombeere-dunkel);
--farbe-flaeche-kuehl: var(--nmh-flussnebel);
--farbe-flaeche-warm: var(--nmh-malvenbluete);
--farbe-flaeche-abend: var(--nmh-tinte);
--farbe-akzent: var(--nmh-fensterlicht);
--farbe-orientierung: var(--nmh-rheingruen);
--farbe-linie: var(--nmh-haarlinie);
--farbe-feldrand: var(--nmh-feldrand);
--farbe-knopf: var(--nmh-brombeere);
--farbe-knopf-text: var(--nmh-papier);
--farbe-knopf-hover: var(--nmh-brombeere-dunkel);
--farbe-fokus: var(--nmh-brombeere);
--farbe-fokus-dunkel: var(--nmh-fensterlicht); /* Fokus auf Brombeere- oder Tinte-Flächen */
/* ------------------------------------------------------------------------
3. Geprüfte Paare Text auf Grund (Kontrast · Stufe)
Tinte auf Papier 16,9 : 1 AAA ← Standard für allen Text
Tinte auf Flussnebel 14,4 : 1 AAA
Tinte auf Malvenblüte 13,1 : 1 AAA
Tinte auf Fensterlicht 11,9 : 1 AAA (nur das markierte Wort)
Tinte leise auf Papier 7,6 : 1 AAA
Tinte leise auf Flussnebel 6,4 : 1 AA
Tinte leise auf Malvenblüte 5,9 : 1 AA
Brombeere auf Papier 9,2 : 1 AAA ← Links, Wortmarke
Brombeere auf Flussnebel 7,8 : 1 AAA
Brombeere auf Malvenblüte 7,1 : 1 AAA
Papier auf Brombeere 9,2 : 1 AAA ← Hauptknopf
Papier auf Brombeere dk. 12,1 : 1 AAA ← Knopf gedrückt
Fensterlicht auf Brombeere 6,5 : 1 AA ← Herz, ein Wort
Papier auf Tinte 16,9 : 1 AAA
Fensterlicht auf Tinte 11,9 : 1 AAA
Rheingrün auf Papier 7,4 : 1 AAA
Papier auf Rheingrün 7,4 : 1 AAA
NIE: Fensterlicht auf Papier (1,4 : 1) · Brombeere auf Tinte (1,8 : 1)
------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------
4. Schrift
------------------------------------------------------------------------ */
--schrift-titel: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
--schrift-text: "NMH Ziffern", "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
--schrift-hand: "Kalam", "Segoe Print", cursive; /* nur Randnotiz, ab 18 px */
--gewicht-text: 400;
--gewicht-stark: 700; /* Fett im Fließtext, Knöpfe */
--gewicht-titel: 650; /* Bricolage-Überschriften: kräftig, aber ruhig */
--gewicht-display: 700; /* nur die große Startseiten-Überschrift */
/* Größen fließend zwischen 360 px und 1280 px Fensterbreite (min · max) */
--text-xs: 0.8125rem; /* 13 px Kleingedrucktes */
--text-s: clamp(0.875rem, 0.8506rem + 0.1087vw, 0.9375rem); /* 14–15 px Bildtext */
--text-m: clamp(1.0625rem, 1.0136rem + 0.2174vw, 1.1875rem); /* 17–19 px Fließtext */
--text-l: clamp(1.1875rem, 1.0897rem + 0.4348vw, 1.4375rem); /* 19–23 px Einleitung */
--text-xl: clamp(1.375rem, 1.1793rem + 0.8696vw, 1.875rem); /* 22–30 px H3 */
--text-2xl: clamp(1.75rem, 1.3587rem + 1.7391vw, 2.75rem); /* 28–44 px H2 */
--text-3xl: clamp(2.25rem, 1.5652rem + 3.0435vw, 4rem); /* 36–64 px H1, Startseite */
--zeile-titel: 1.1;
--zeile-zwischen: 1.3;
--zeile-text: 1.6;
--laufweite-titel: -0.005em; /* Bricolage nie enger als -0.01em */
--laufweite-label: 0.08em; /* kleine Versal-Zeilen („MONDORF · PROVINZIALSTRASSE 60A“) */
--textbreite: 38rem; /* ca. 65 Zeichen pro Zeile */
/* ------------------------------------------------------------------------
5. Abstände (4er-Raster) – lieber eine Stufe mehr Luft als zu wenig
------------------------------------------------------------------------ */
--abstand-1: 0.25rem; /* 4 px */
--abstand-2: 0.5rem; /* 8 px */
--abstand-3: 0.75rem; /* 12 px */
--abstand-4: 1rem; /* 16 px */
--abstand-5: 1.5rem; /* 24 px */
--abstand-6: 2rem; /* 32 px */
--abstand-7: 3rem; /* 48 px */
--abstand-8: 4rem; /* 64 px */
--abstand-9: 6rem; /* 96 px */
--abstand-10: 8rem; /* 128 px */
--abstand-abschnitt: clamp(3.5rem, 2.4rem + 4.9vw, 7rem); /* zwischen Abschnitten */
--seitenrand: clamp(1rem, 0.6rem + 1.8vw, 2.5rem); /* links/rechts am Rand */
--inhalt-breite: 72rem;
/* ------------------------------------------------------------------------
6. Radien – Papier hat gerade Kanten
------------------------------------------------------------------------ */
--radius-papier: 2px; /* Zettel, Karten, Fotos */
--radius-klein: 4px; /* Schildchen, Eingabefelder */
--radius-knopf: 6px; /* Knöpfe */
--radius-gross: 12px; /* große Flächen, Handy-Rahmen */
--radius-rund: 999px; /* nur Profilbild, Punkte */
/* ------------------------------------------------------------------------
7. Schatten – nur für echte Gegenstände (Zettel, Visitenkarte), nie für Kästen
------------------------------------------------------------------------ */
--schatten-papier: 0 1px 1px rgb(35 26 34 / 0.08), 0 8px 18px -8px rgb(35 26 34 / 0.24);
--schatten-gehoben: 0 2px 2px rgb(35 26 34 / 0.08), 0 16px 28px -12px rgb(35 26 34 / 0.30);
--fokus-ring: 0 0 0 3px var(--nmh-papier), 0 0 0 5px var(--farbe-fokus);
/* ------------------------------------------------------------------------
8. Bewegung – ruhig, kurz, nichts blinkt, nichts wiederholt sich
------------------------------------------------------------------------ */
--dauer-sofort: 80ms; /* Farbe von Knöpfen */
--dauer-kurz: 160ms; /* Hover, Fokus */
--dauer-mittel: 280ms; /* Aufklappen, Einblenden */
--dauer-lang: 520ms; /* Abreißzettel: Streifen löst sich */
--kurve-standard: cubic-bezier(0.2, 0, 0, 1); /* weich ankommen */
--kurve-raus: cubic-bezier(0.4, 0, 1, 1); /* weg-bewegen */
--kurve-papier: cubic-bezier(0.3, 1.25, 0.5, 1); /* kleines Nachschwingen wie Papier */
}
/* Wer „Bewegung reduzieren“ eingestellt hat, bekommt alles sofort und ohne Bewegung. */
@media (prefers-reduced-motion: reduce) {
:root {
--dauer-sofort: 0ms;
--dauer-kurz: 0ms;
--dauer-mittel: 0ms;
--dauer-lang: 0ms;
}
}
/* ==========================================================================
Optionale Helfer (dürfen im Baukasten als eigene CSS-Klassen genutzt werden)
========================================================================== */
/* Geprüfte Flächen: setzen Hintergrund UND passende Schriftfarbe */
.nmh-flaeche-papier { background: var(--nmh-papier); color: var(--nmh-tinte); }
.nmh-flaeche-nebel { background: var(--nmh-flussnebel); color: var(--nmh-tinte); }
.nmh-flaeche-malve { background: var(--nmh-malvenbluete); color: var(--nmh-tinte); }
.nmh-flaeche-brombeere { background: var(--nmh-brombeere); color: var(--nmh-papier); }
.nmh-flaeche-abend { background: var(--nmh-tinte); color: var(--nmh-papier); }
/* Textmarker: genau EIN Wort pro Fläche, z. B. Zeit */
.nmh-marker {
background: linear-gradient(transparent 58%, var(--nmh-fensterlicht) 58%, var(--nmh-fensterlicht) 92%, transparent 92%);
color: inherit;
padding: 0 0.08em;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
/* Telefon, Adresse, Zeiten, Preise in Bricolage – nie mit durchgestrichener Null */
.nmh-ziffern {
font-family: var(--schrift-titel);
font-variant-numeric: tabular-nums;
font-weight: 600;
}