/* ==========================================================================
Designsystem „Bommelmütze“ – Komponenten
Setzt tokens.css voraus. Präfix nb- (Nico Bommelmütze).
Signatur: Jede Fläche trägt Nicos Mütze (Rippbündchen oben, Bommel an der Ecke).
========================================================================== */
:root {
/* Form der Bommel (Wollknäuel), als Maske: Farbe kommt immer aus einem Token */
--nb-bommel-form: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='11.2'/%3E%3Ccircle cx='20.00' cy='8.40' r='7.2'/%3E%3Ccircle cx='25.80' cy='9.95' r='7.2'/%3E%3Ccircle cx='30.05' cy='14.20' r='7.2'/%3E%3Ccircle cx='31.60' cy='20.00' r='7.2'/%3E%3Ccircle cx='30.05' cy='25.80' r='7.2'/%3E%3Ccircle cx='25.80' cy='30.05' r='7.2'/%3E%3Ccircle cx='20.00' cy='31.60' r='7.2'/%3E%3Ccircle cx='14.20' cy='30.05' r='7.2'/%3E%3Ccircle cx='9.95' cy='25.80' r='7.2'/%3E%3Ccircle cx='8.40' cy='20.00' r='7.2'/%3E%3Ccircle cx='9.95' cy='14.20' r='7.2'/%3E%3Ccircle cx='14.20' cy='9.95' r='7.2'/%3E%3C/svg%3E");
/* Rippbündchen: senkrechte Rippen in zwei Blautönen (Muster, kein Verlauf) */
--nb-rippen: repeating-linear-gradient(90deg, var(--nb-blau-tief) 0 var(--nb-rippe-breite), var(--nb-rippe) var(--nb-rippe-breite) calc(var(--nb-rippe-breite) * 2));
--nb-rippen-quer: repeating-linear-gradient(0deg, var(--nb-blau-tief) 0 var(--nb-rippe-breite), var(--nb-rippe) var(--nb-rippe-breite) calc(var(--nb-rippe-breite) * 2));
}
/* --- Grund-Reset ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
/* --- Basis --------------------------------------------------------------- */
.nb-basis {
background: var(--nb-papier);
color: var(--nb-text);
font-family: var(--nb-font-text);
font-size: var(--nb-fs-body);
line-height: var(--nb-lh-body);
-webkit-font-smoothing: antialiased;
}
.nb-basis :focus-visible { outline: 3px solid var(--nb-fokus); outline-offset: 3px; border-radius: 4px; }
.nb-basis a { color: var(--nb-blau); text-underline-offset: .2em; text-decoration-thickness: 2px; }
.nb-basis ::selection { background: var(--nb-blau-hauch); color: var(--nb-text); }
.nb-mega, .nb-h1, .nb-h2, .nb-h3 {
font-family: var(--nb-font-display);
font-variation-settings: var(--nb-display-achsen);
letter-spacing: var(--nb-track-display);
color: var(--nb-tinte);
margin: 0;
text-wrap: balance;
hyphens: auto;
overflow-wrap: break-word;
}
.nb-mega { font-size: var(--nb-fs-mega); font-weight: var(--nb-wght-mega); line-height: var(--nb-lh-tight); }
.nb-h1 { font-size: var(--nb-fs-h1); font-weight: var(--nb-wght-mega); line-height: var(--nb-lh-tight); }
.nb-h2 { font-size: var(--nb-fs-h2); font-weight: var(--nb-wght-head); line-height: var(--nb-lh-head); }
.nb-h3 { font-size: var(--nb-fs-h3); font-weight: var(--nb-wght-head); line-height: var(--nb-lh-head); letter-spacing: 0; }
.nb-h2, .nb-h3 { hyphens: manual; }
.nb-lead { font-size: var(--nb-fs-lead); color: var(--nb-text-2); max-width: var(--nb-max-text); margin: 0; }
.nb-text { max-width: var(--nb-max-text); color: var(--nb-text-2); margin: 0; }
.nb-klein { font-size: var(--nb-fs-small); color: var(--nb-text-3); }
.nb-erzaehlt { font-family: var(--nb-font-display); font-variation-settings: var(--nb-display-achsen); font-style: italic; font-weight: 500; }
/* --- 1 · Bommelpunkt: der Punkt am Ende eines Claims wird zur Bommel ------
Mut ist, wenn man trotzdem geht.
*/
.nb-bommelpunkt {
display: inline-block; width: .34em; height: .34em; margin-left: .06em;
color: transparent; overflow: hidden; vertical-align: baseline;
background: var(--nb-blau);
-webkit-mask: var(--nb-bommel-form) center / contain no-repeat; mask: var(--nb-bommel-form) center / contain no-repeat;
animation: nb-hopsen 7s var(--nb-ease) 2s infinite;
}
/* --- 2 · Etikett --------------------------------------------------------- */
.nb-etikett {
display: inline-flex; align-items: center; gap: var(--nb-s-2);
font: 700 var(--nb-fs-label)/1.2 var(--nb-font-text);
letter-spacing: var(--nb-track-label); text-transform: uppercase; color: var(--nb-text-2);
}
.nb-etikett::before {
content: ""; width: var(--nb-bommel-klein); height: var(--nb-bommel-klein); flex: none;
background: var(--nb-blau);
-webkit-mask: var(--nb-bommel-form) center / contain no-repeat; mask: var(--nb-bommel-form) center / contain no-repeat;
}
.nb-etikett b { color: var(--nb-blau); }
/* --- 3 · Mützen-Karte: ersetzt die Standard-Karte -------------------------
Heu-Fläche mit runden Ecken. Oben das Rippbündchen, an der rechten Ecke die Bommel.
Kein Rahmen, kein Schatten. Hover/Fokus: die Bommel wippt einmal nach. */
.nb-muetze {
--nb-b: var(--nb-buendchen); --nb-bo: var(--nb-bommel);
position: relative; display: block;
margin-top: calc(var(--nb-bo) * .5);
padding: calc(var(--nb-b) + var(--nb-s-5)) var(--nb-s-5) var(--nb-s-5);
background: var(--nb-flaeche); color: inherit; text-decoration: none;
border-radius: var(--nb-radius-2);
}
.nb-muetze::before { /* Rippbündchen */
content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--nb-b);
background: var(--nb-rippen);
border-radius: var(--nb-radius-2) var(--nb-radius-2) 3px 3px;
}
.nb-muetze::after { /* Bommel */
content: ""; position: absolute; right: var(--nb-s-5); top: calc(var(--nb-bo) * -.5);
width: var(--nb-bo); height: var(--nb-bo);
background: var(--nb-blau);
-webkit-mask: var(--nb-bommel-form) center / contain no-repeat; mask: var(--nb-bommel-form) center / contain no-repeat;
transform-origin: 50% 95%;
}
/* Leerlauf: Jede Bommel wippt von selbst alle paar Sekunden sanft, versetzt nach Position in der Gruppe.
Hover/Fokus auf Link-Karten: kräftiges Wippen. „Bewegung reduzieren“: still. */
.nb-muetze::after { animation: nb-wippen-leerlauf 6.5s var(--nb-ease) infinite; animation-delay: var(--nb-wippen-versatz, 0s); }
:is(.nb-raster, .nb-stapel) > :nth-child(2) { --nb-wippen-versatz: 1.6s; }
:is(.nb-raster, .nb-stapel) > :nth-child(3) { --nb-wippen-versatz: 3.2s; }
:is(.nb-raster, .nb-stapel) > :nth-child(4) { --nb-wippen-versatz: 4.8s; }
a.nb-muetze:hover::after, a.nb-muetze:focus-visible::after { animation: nb-wippen var(--nb-dauer-wippen) var(--nb-ease-feder); }
.nb-muetze > * + * { margin-top: var(--nb-s-3); }
.nb-muetze .nb-h3 { transition: color var(--nb-dauer) var(--nb-ease); }
a.nb-muetze:hover .nb-h3, a.nb-muetze:focus-visible .nb-h3 { color: var(--nb-blau); }
.nb-muetze--hervor { --nb-b: var(--nb-buendchen-gross); --nb-bo: var(--nb-bommel-gross); padding-inline: var(--nb-s-6); padding-bottom: var(--nb-s-6); }
.nb-muetze--ohne-bommel { margin-top: 0; }
.nb-muetze--ohne-bommel::after { display: none; }
.nb-muetze--papier { background: var(--nb-papier); box-shadow: inset 0 0 0 2px var(--nb-linie); }
.nb-muetze--nacht { background: var(--nb-nacht); color: var(--nb-auf-nacht); }
.nb-muetze--nacht .nb-h3, .nb-muetze--nacht .nb-text { color: var(--nb-auf-nacht); }
@keyframes nb-wippen-leerlauf {
0%, 80%, 100% { transform: rotate(0) translateY(0); }
85% { transform: rotate(-13deg) translateY(-3px); }
91% { transform: rotate(8deg) translateY(-1px); }
96% { transform: rotate(-3deg); }
}
@keyframes nb-hopsen {
0%, 86%, 100% { transform: translateY(0); }
90% { transform: translateY(-0.22em); }
94% { transform: translateY(0); }
97% { transform: translateY(-0.08em); }
}
@keyframes nb-wippen {
0% { transform: rotate(0) translateY(0); }
25% { transform: rotate(-16deg) translateY(-4px); }
55% { transform: rotate(10deg) translateY(-1px); }
80% { transform: rotate(-4deg); }
100% { transform: rotate(0) translateY(0); }
}
/* --- 4 · Bündchen-Trenner: Abschnittstrenner aus Rippen ------------------ */
.nb-buendchen {
display: block; width: 100%; height: var(--nb-buendchen-fein); border: 0; margin: var(--nb-s-7) 0;
background: var(--nb-rippen); border-radius: var(--nb-radius-voll);
}
.nb-buendchen--kurz { width: 96px; }
/* --- 5 · Bommel-Liste: Aufzählung mit kleinen Bommeln -------------------- */
.nb-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nb-s-3); }
.nb-liste > li { position: relative; padding-left: calc(var(--nb-bommel-klein) + var(--nb-s-3)); max-width: var(--nb-max-text); }
.nb-liste > li::before {
content: ""; position: absolute; left: 0; top: .42em; width: var(--nb-bommel-klein); height: var(--nb-bommel-klein);
background: var(--nb-blau);
-webkit-mask: var(--nb-bommel-form) center / contain no-repeat; mask: var(--nb-bommel-form) center / contain no-repeat;
}
/* --- 6 · Bommel-Schritte: Ablauf als Bommeln am Wollfaden ---------------- */
.nb-schritte { list-style: none; margin: 0; padding: 0; counter-reset: nb-schritt; display: grid; gap: 0; }
.nb-schritte > li { counter-increment: nb-schritt; position: relative; padding: 0 0 var(--nb-s-6) calc(var(--nb-bommel) + var(--nb-s-4)); min-height: var(--nb-bommel); }
.nb-schritte > li::before { /* Bommel mit Nummer */
content: counter(nb-schritt); position: absolute; left: 0; top: -4px;
width: var(--nb-bommel); height: var(--nb-bommel);
display: grid; place-items: center;
font: 700 .95rem/1 var(--nb-font-text); color: var(--nb-auf-blau);
background: var(--nb-blau); /* die Zahl liegt innerhalb der Bommelform und bleibt sichtbar */
-webkit-mask: var(--nb-bommel-form) center / contain no-repeat; mask: var(--nb-bommel-form) center / contain no-repeat;
}
.nb-schritte > li:not(:last-child)::after { /* Wollfaden zur nächsten Bommel */
content: ""; position: absolute; left: calc(var(--nb-bommel) / 2 - 1.5px); top: calc(var(--nb-bommel) - 2px); bottom: 2px;
border-left: 3px dashed var(--nb-rippe);
}
.nb-schritte .nb-h3 { margin-bottom: var(--nb-s-2); }
/* --- 7 · Plakette: Goldfläche für „Neu“, Erscheinungstermin -------------- */
.nb-plakette {
display: inline-flex; align-items: center; gap: var(--nb-s-2);
padding: 6px 14px; border-radius: var(--nb-radius-voll);
background: var(--nb-gold); color: var(--nb-auf-gold); box-shadow: inset 0 0 0 2px var(--nb-gold-tief);
font: 700 var(--nb-fs-small)/1.2 var(--nb-font-text);
}
/* --- 8 · Buttons ---------------------------------------------------------- */
.nb-btn {
display: inline-flex; align-items: center; gap: var(--nb-s-3);
min-height: 52px; padding: 0 var(--nb-s-6);
font: 700 1.0625rem/1 var(--nb-font-text); text-decoration: none; cursor: pointer;
border: 2px solid var(--nb-tinte); border-radius: var(--nb-radius-voll);
background: var(--nb-tinte); color: var(--nb-papier);
transition: background var(--nb-dauer) var(--nb-ease), border-color var(--nb-dauer) var(--nb-ease);
}
.nb-btn:hover { background: var(--nb-tinte-2); border-color: var(--nb-tinte-2); }
.nb-btn--muetze { background: var(--nb-blau); border-color: var(--nb-blau); color: var(--nb-auf-blau); }
.nb-btn--muetze::after { /* kleine Bommel statt Pfeil */
content: ""; width: 16px; height: 16px; flex: none; background: var(--nb-auf-blau);
-webkit-mask: var(--nb-bommel-form) center / contain no-repeat; mask: var(--nb-bommel-form) center / contain no-repeat;
transform-origin: 50% 90%;
animation: nb-wippen-leerlauf 5s var(--nb-ease) 1s infinite;
}
.nb-btn--muetze:hover { background: var(--nb-blau-tief); border-color: var(--nb-blau-tief); }
.nb-btn--muetze:hover::after, .nb-btn--muetze:focus-visible::after { animation: nb-wippen var(--nb-dauer-wippen) var(--nb-ease-feder); }
.nb-btn--rahmen { background: transparent; color: var(--nb-tinte); }
.nb-btn:disabled, .nb-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.nb-btn:disabled::after { animation: none !important; }
.nb-btn--rahmen:hover { background: var(--nb-flaeche); }
.nb-basis a.nb-btn { color: var(--nb-papier); }
.nb-basis a.nb-btn--muetze { color: var(--nb-auf-blau); }
.nb-basis a.nb-btn--rahmen { color: var(--nb-tinte); }
/* Link mit Wollfaden: beim Darüberfahren wird die Unterstreichung wellig */
.nb-link { font-weight: 700; color: var(--nb-blau); text-decoration: underline 2px; text-underline-offset: .22em; }
.nb-link:hover, .nb-link:focus-visible { text-decoration-style: wavy; text-decoration-color: var(--nb-rippe); }
/* --- 9 · Zitat / Erzählerstimme ------------------------------------------- */
.nb-zitat {
position: relative; margin: 0; padding: var(--nb-s-5) var(--nb-s-6) var(--nb-s-5) calc(var(--nb-s-6) + 10px);
background: var(--nb-flaeche); border-radius: var(--nb-radius-2);
font-family: var(--nb-font-display); font-variation-settings: var(--nb-display-achsen);
font-style: italic; font-weight: 500; font-size: var(--nb-fs-h3); line-height: 1.35; color: var(--nb-tinte);
}
.nb-zitat::before { /* Bündchen senkrecht am linken Rand */
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 12px;
background: var(--nb-rippen-quer); border-radius: var(--nb-radius-2) 3px 3px var(--nb-radius-2);
}
.nb-zitat cite { display: block; margin-top: var(--nb-s-3); font: 700 var(--nb-fs-label)/1.4 var(--nb-font-text); letter-spacing: var(--nb-track-label); text-transform: uppercase; color: var(--nb-text-3); font-style: normal; }
/* --- 10 · Formular ---------------------------------------------------------- */
.nb-feld { display: grid; gap: var(--nb-s-2); }
.nb-feld label { font-weight: 700; font-size: var(--nb-fs-small); }
.nb-feld input, .nb-feld textarea, .nb-feld select {
font: inherit; color: var(--nb-text); background: var(--nb-weiss);
min-height: 52px; padding: var(--nb-s-3) var(--nb-s-4);
border: 2px solid var(--nb-linie); border-radius: var(--nb-radius-1);
}
.nb-feld input:focus-visible, .nb-feld textarea:focus-visible, .nb-feld select:focus-visible { outline: var(--nb-strich-stark) solid var(--nb-fokus); outline-offset: 2px; border-color: var(--nb-blau); box-shadow: 0 0 0 6px var(--nb-blau-hauch); }
.nb-feld small { color: var(--nb-text-3); }
.nb-pflicht { color: var(--nb-warnung); margin-left: 2px; }
.nb-hinweis { font-size: var(--nb-fs-small); color: var(--nb-text-2); max-width: var(--nb-max-text); margin: 0; } /* Hinweis vor dem Absenden, z. B. Double-Opt-in */
.nb-feld [aria-invalid="true"] { border-color: var(--nb-warnung); }
.nb-feld .nb-fehler { color: var(--nb-warnung); font-size: var(--nb-fs-small); font-weight: 700; }
.nb-auswahl { display: grid; grid-template-columns: 24px 1fr; gap: var(--nb-s-3); align-items: start; font-size: var(--nb-fs-small); color: var(--nb-text-2); }
.nb-auswahl input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--nb-blau); }
.nb-meldung { padding: var(--nb-s-4) var(--nb-s-5); border-radius: var(--nb-radius-1); background: var(--nb-flaeche); border-left: 6px solid var(--nb-erfolg); }
.nb-meldung--fehler { border-left-color: var(--nb-warnung); }
/* --- 11 · Bild (Illustration aus dem Buch) ---------------------------------- */
.nb-bild { margin: 0; }
.nb-bild img { display: block; width: 100%; height: auto; border-radius: var(--nb-radius-2); }
.nb-bild figcaption { display: flex; gap: var(--nb-s-2); align-items: baseline; margin-top: var(--nb-s-2); font-size: var(--nb-fs-small); color: var(--nb-text-3); }
.nb-bild figcaption::before {
content: ""; width: 10px; height: 10px; flex: none; background: var(--nb-blau); transform: translateY(1px);
-webkit-mask: var(--nb-bommel-form) center / contain no-repeat; mask: var(--nb-bommel-form) center / contain no-repeat;
}
.nb-ki-hinweis { font-size: var(--nb-fs-label); color: var(--nb-text-3); }
/* --- 12 · Seitengerüst -------------------------------------------------------- */
.nb-seite { max-width: var(--nb-max-page); margin: 0 auto; padding: 0 var(--nb-gutter); }
@media (min-width: 760px) { .nb-seite { padding: 0 var(--nb-s-6); } }
.nb-sektion { padding: var(--nb-s-9) 0; }
.nb-sektion--flaeche { background: var(--nb-flaeche); }
.nb-sektion--flaeche :is(.nb-muetze, .nb-zitat, .nb-faq details) { background: var(--nb-papier); }
.nb-sektion--nacht { background: var(--nb-nacht); color: var(--nb-auf-nacht); }
.nb-sektion--nacht .nb-h1, .nb-sektion--nacht .nb-h2, .nb-sektion--nacht .nb-h3, .nb-sektion--nacht .nb-mega { color: var(--nb-auf-nacht); }
/* Auf Nachtblau: alles Sekundäre in --nb-auf-nacht-2, Links und Fokus in --nb-auf-nacht, Bommeln in --nb-bommel-nacht */
:is(.nb-sektion--nacht, .nb-fuss, .nb-muetze--nacht) { --nb-fokus: var(--nb-auf-nacht); }
:is(.nb-sektion--nacht, .nb-fuss, .nb-muetze--nacht) :is(.nb-lead, .nb-text, .nb-klein, .nb-ki-hinweis, .nb-etikett, .nb-hinweis, small) { color: var(--nb-auf-nacht-2); }
:is(.nb-sektion--nacht, .nb-fuss, .nb-muetze--nacht) a:not(.nb-btn) { color: var(--nb-auf-nacht); }
:is(.nb-sektion--nacht, .nb-fuss, .nb-muetze--nacht) :is(.nb-etikett, .nb-liste > li, .nb-bild figcaption)::before,
:is(.nb-sektion--nacht, .nb-fuss) .nb-bommelpunkt, .nb-muetze--nacht::after { background: var(--nb-bommel-nacht); }
@media (max-width: 759px) { .nb-sektion { padding: var(--nb-s-8) 0; } }
.nb-raster { display: grid; gap: var(--nb-s-6); }
@media (min-width: 760px) {
.nb-raster--2 { grid-template-columns: repeat(2, 1fr); }
.nb-raster--3 { grid-template-columns: repeat(3, 1fr); }
.nb-raster--hero { grid-template-columns: 1.1fr 1fr; align-items: center; }
}
.nb-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nb-s-4) var(--nb-s-5); }
.nb-einstieg { display: grid; gap: var(--nb-s-4); align-content: start; }
.nb-einstieg > * { margin: 0; }
.nb-stapel > * + * { margin-top: var(--nb-s-4); }
/* --- 13 · FAQ (details/summary): Bommel als Schalter --------------------------- */
.nb-faq { display: grid; gap: var(--nb-s-3); }
.nb-faq details { background: var(--nb-flaeche); border-radius: var(--nb-radius-1); }
.nb-faq summary {
list-style: none; cursor: pointer; position: relative;
padding: var(--nb-s-4) calc(var(--nb-s-7) + 4px) var(--nb-s-4) var(--nb-s-5);
font: var(--nb-wght-head) var(--nb-fs-h3)/var(--nb-lh-head) var(--nb-font-display); font-variation-settings: var(--nb-display-achsen); color: var(--nb-tinte);
}
.nb-faq summary::-webkit-details-marker { display: none; }
.nb-faq summary::after {
content: ""; position: absolute; right: var(--nb-s-5); top: 50%; translate: 0 -50%;
width: 22px; height: 22px; background: var(--nb-text-3);
-webkit-mask: var(--nb-bommel-form) center / contain no-repeat; mask: var(--nb-bommel-form) center / contain no-repeat;
transition: background var(--nb-dauer) var(--nb-ease), scale var(--nb-dauer) var(--nb-ease-feder);
}
.nb-faq details[open] summary::after { background: var(--nb-blau); scale: 1.25; }
.nb-faq details > :not(summary) { margin: 0; padding: 0 var(--nb-s-5) var(--nb-s-5); color: var(--nb-text-2); max-width: var(--nb-max-text); }
/* --- 14 · Skip-Link, Logo --------------------------------------------------------- */
.nb-skip { position: absolute; left: var(--nb-s-4); top: -100%; z-index: 100; padding: var(--nb-s-2) var(--nb-s-4); background: var(--nb-tinte); color: var(--nb-papier) !important; font-weight: 700; text-decoration: none; border-radius: 0 0 var(--nb-radius-1) var(--nb-radius-1); }
.nb-skip:focus { top: 0; }
.nb-logo { display: block; height: var(--nb-logo-hoehe, 52px); width: auto; }
@media (max-width: 480px) { .nb-logo { --nb-logo-hoehe: 44px; } }
/* --- 15 · Kopf: Wortmarke links, Navigation rechts, unten feines Bündchen ------
Logo im Gute-Nacht-Modus über tauschen (siehe DESIGN.md §12). */
.nb-kopf { background: var(--nb-papier); }
.nb-kopf::after { content: ""; display: block; height: var(--nb-buendchen-fein); background: var(--nb-rippen); }
.nb-kopf .nb-seite { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--nb-s-4); padding-block: var(--nb-s-4); }
.nb-nav { display: flex; flex-wrap: wrap; gap: 0 var(--nb-s-5); list-style: none; margin: 0; padding: 0; }
.nb-nav a { display: inline-flex; align-items: center; min-height: 48px; font-weight: 700; color: var(--nb-tinte); text-decoration: none; }
.nb-nav a:hover, .nb-nav a[aria-current="page"] { text-decoration: underline wavy var(--nb-rippe) 2px; text-underline-offset: .3em; }
/* --- 16 · Fuß: Nachtblau, feines Bündchen oben, negatives Lockup ------------------ */
.nb-fuss { position: relative; background: var(--nb-nacht); color: var(--nb-auf-nacht); padding-block: var(--nb-s-8); }
.nb-fuss::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--nb-buendchen-fein); background: var(--nb-rippen); }
.nb-fuss .nb-seite { display: grid; gap: var(--nb-s-5); }
.nb-fuss .nb-logo { --nb-logo-hoehe: 56px; } /* Wortmarke negativ; Unterzeile als echter Text daneben */
.nb-fuss p { margin: 0; font-size: var(--nb-fs-small); max-width: var(--nb-max-text); }
.nb-fuss-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--nb-s-2) var(--nb-s-5); font-weight: 700; }
.nb-fuss-links a { display: inline-flex; align-items: center; min-height: 48px; }
/* --- Bewegung reduzieren ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.nb-muetze::after, .nb-btn--muetze::after, .nb-faq summary::after, .nb-bommelpunkt { animation: none !important; transition: none !important; }
}
/* --- Druck (A4, Ausmalbilder, Rätselblätter): keine Flächen, nur das Bündchen --- */
@media print {
.nb-basis { background: #fff; font-size: var(--nb-druck-text); }
.nb-klein, .nb-etikett, .nb-ki-hinweis { font-size: var(--nb-druck-klein); }
.nb-buendchen, .nb-etikett::before, .nb-bommelpunkt, .nb-liste > li::before, .nb-schritte > li::before, .nb-kopf::after { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.nb-kopf, .nb-fuss { background: none; color: var(--nb-tinte); }
.nb-muetze { background: none; padding: calc(var(--nb-buendchen-fein) + 10pt) 0 0; margin-top: 0; }
.nb-muetze::before { height: var(--nb-buendchen-fein); print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.nb-muetze::after { display: none; }
.nb-zitat { background: none; }
.nb-btn { border: 0; background: none; color: var(--nb-tinte); padding: 0; min-height: 0; text-decoration: underline; }
.nb-btn::after { display: none; }
.nb-sektion--nacht { background: none; color: var(--nb-tinte); }
}