/* ============================================================================= HdKD · Der Bausteinkasten · v6.61.0 ----------------------------------------------------------------------------- Drei Dinge, die im Haus überall vorkommen — ein Knopf, eine Karte, eine Marke. Gezählt am 21.08.2026: **533 Varianten** dafür, verteilt auf 47 Dateien. Nicht weil jemand 533 verschiedene Knöpfe wollte, sondern weil beim Bauen einer neuen Seite niemand wusste, wo der bestehende steht. Ab hier gibt es je einen. Er steht hier, er hängt am Fundament (hdkd-basis.css), und er ist an KEINEN Rahmen gebunden: die Regeln greifen auf jeder Seite, im Büro wie im Portal, auch auf den sieben Büro-Seiten, die `.hdkd-wrap` gar nicht haben. ── WAS DAS HIER IST UND WAS NICHT ──────────────────────────────────────── Das hier ist das ZIEL, auf das die bestehenden 533 zulaufen — nicht ihr Ersatz von heute auf morgen. Wer sie alle auf einmal umhängt, ändert gleichzeitig hunderte Pixel und merkt zu spät, welche Änderung falsch war. Deshalb: · JETZT umgehängt sind die Varianten, die schon Zeichen für Zeichen gleich aussahen — dort ändert sich nichts, es verschwinden nur Kopien. · Der Rest steht in docs/BAUSTEINKASTEN.md mit seinem Abstand zum Baustein und kommt seitenweise in Schritt 4 dran, mit Bild davor und danach. ── REGEL FÜR NEUE SEITEN ───────────────────────────────────────────────── Keine neue Knopf-, Karten- oder Marken-Klasse mehr. Diese hier benutzen. Reicht eine Abwandlung nicht, kommt sie als Modifikator HIER dazu — nicht als neue Klasse in der Seite. Der Prüfstand tests/test-bausteine.php zählt mit und schlägt an, wenn die Zahl wieder steigt. ── EINE REGEL, DIE HIER TEUER GELERNT WURDE ────────────────────────────── KEINE Kurzformen mit var() — also nicht und nicht , sondern und ein eigenes . Am 21.08.2026 im Rendering gemessen: der Knopf blieb beim Umschalten auf dunkel auf der HELLEN Farbe stehen, obwohl seine eigene Variable längst den dunklen Wert lieferte. Ein frisch erzeugter Knopf war richtig, der bestehende falsch — der Browser rechnet Kurzformen mit var() beim Wechsel nicht zuverlässig neu. Das fällt in keiner Textprüfung auf. Nur im echten Rendering. ========================================================================== */ /* ═══════════════════════════════════════════════════════════════════════════ KNOPF · .hdkd-btn --------------------------------------------------------------------------- Der Normalfall ist der STILLE Knopf (heller Grund, Rahmen). Der laute Knopf (.hdkd-btn--pri) ist die eine Sache, die auf der Seite passieren soll — davon gehört höchstens einer pro Bereich hin. Im Büro trägt den lauten Knopf meistens WordPress selbst (.button-primary, 139 Stellen). Der wird weiter unten auf denselben Look gezogen, statt ihn zu ersetzen — 139 Stellen umschreiben wäre viel Risiko für nichts. ═══════════════════════════════════════════════════════════════════════════ */ .hdkd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; box-sizing: border-box; min-height: 34px; padding: 7px 15px; border: 1px solid; border-color: var(--h-line-strong, #d8cab6); border-radius: var(--h-r-mittel, 9px); background-color: var(--h-surface, #ffffff); color: var(--h-ink, #2a2320); font-family: var(--h-font-body, "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif); font-size: var(--h-t-14, 14px); font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background var(--h-dur-fast, 90ms) var(--h-ease, cubic-bezier(.2,0,0,1)), border-color var(--h-dur-fast, 90ms) var(--h-ease, cubic-bezier(.2,0,0,1)), color var(--h-dur-fast, 90ms) var(--h-ease, cubic-bezier(.2,0,0,1)); } .hdkd-btn:hover { background-color: var(--h-hover, #f6efe4); } /* Der Fokusring ist die einzige Stelle, an der Tastatur-Bedienung sichtbar wird. Er gehört an JEDEN Knopf, nicht nur an die schönen. */ .hdkd-btn:focus-visible { outline: none; box-shadow: var(--h-ring, 0 0 0 4px rgba(226,0,26,.18)); border-color: var(--h-accent, #e2001a); } .hdkd-btn:disabled, .hdkd-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; } /* Laut — die eine Handlung. */ .hdkd-btn--pri { background-color: var(--h-accent, #e2001a); border-color: var(--h-accent, #e2001a); color: var(--h-accent-ink, #ffffff); } .hdkd-btn--pri:hover { background: color-mix(in oklab, var(--h-accent, #e2001a) 88%, #000); border-color: color-mix(in oklab, var(--h-accent, #e2001a) 88%, #000); } /* Rahmenlos — für Werkzeugleisten, wo Rahmen nur Lärm wären. */ .hdkd-btn--ghost { background-color: transparent; border-color: transparent; color: var(--h-ink-2, #6f6358); } .hdkd-btn--ghost:hover { background-color: var(--h-hover, #f6efe4); color: var(--h-ink, #2a2320); } /* Löschen und Ähnliches. Rot heißt hier NICHT Marke, sondern Warnung. */ .hdkd-btn--danger { border-color: var(--h-danger-line, #d4423a); color: var(--h-danger-ink, #8c2220); background-color: var(--h-danger-bg, #f7dcdc); } .hdkd-btn--danger:hover { background: color-mix(in oklab, var(--h-danger-bg, #f7dcdc) 78%, #000); } .hdkd-btn--klein { min-height: 27px; padding: 3px 10px; font-size: var(--h-t-12, 12px); } .hdkd-btn--gross { min-height: 42px; padding: 11px 21px; font-size: var(--h-t-16, 16px); } .hdkd-btn--voll { width: 100%; } /* ═══════════════════════════════════════════════════════════════════════════ KARTE · .hdkd-card --------------------------------------------------------------------------- Steht schon an 90 Stellen im Haus und war die einzige der drei Rollen, die von Anfang an sauber auf Tokens lag. Sie zieht hierher um — unverändert, aber nicht mehr an .hdkd-wrap gebunden. Kopf/Körper/Fuß sind neu und ersetzen ein Muster, das in page-team.php, team-einsatzplanung.php und team-geschaeftsstelle.php dreimal Zeichen für Zeichen gleich stand. ═══════════════════════════════════════════════════════════════════════════ */ .hdkd-card { background-color: var(--h-surface, #ffffff); border: 1px solid; border-color: var(--h-line, #e8ddce); border-radius: var(--h-r-gross, 14px); box-shadow: var(--h-shadow-sm, 0 1px 2px rgba(42,35,32,.05), 0 10px 22px -18px rgba(42,35,32,.30)); padding: 22px 26px; margin-bottom: 18px; color: var(--h-ink, #2a2320); } /* Ohne Schatten — wenn Karten dicht nebeneinander liegen, addieren sich Schatten zu Schmutz. */ .hdkd-card--flach { box-shadow: none; } .hdkd-card--eng { padding: 14px 16px; } /* Karte mit eigenen Zonen: dann trägt die Karte selbst keine Polsterung, sonst polstert man zweimal. */ .hdkd-card--zonen { padding: 0; overflow: hidden; } .hdkd-card__kopf { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--h-line, #e8ddce); font-weight: 600; color: var(--h-ink, #2a2320); } .hdkd-card__koerper { padding: 14px 16px; } .hdkd-card__fuss { display: flex; align-items: center; gap: 9px; padding: 11px 16px; border-top: 1px solid var(--h-line, #e8ddce); background-color: var(--h-surface-2, #f6efe4); } /* ═══════════════════════════════════════════════════════════════════════════ MARKE · .hdkd-marke --------------------------------------------------------------------------- Die kleine farbige Pille: „bestätigt", „offen", „abgesagt", ein Zähler, eine Kategorie. Mit 259 Varianten die zerstreuteste der drei Rollen — im Büro allein liefen bis hierher .hdkd-status, .hdkd-legend und .hdkd-chip-* nebeneinander, alle drei fast gleich. Die Farbe trägt BEDEUTUNG, nicht Geschmack: grün ist bestätigt, gelb ist angefragt, rot ist abgesagt. Deshalb hängen die Abwandlungen an den Bedeutungsfarben des Fundaments und nicht am Grundton. ═══════════════════════════════════════════════════════════════════════════ */ .hdkd-marke { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border: 1px solid transparent; border-radius: var(--h-r-pille, 999px); background-color: var(--h-surface-2, #f6efe4); color: var(--h-ink-2, #6f6358); font-family: var(--h-font-body, "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif); font-size: var(--h-t-12, 12px); font-weight: 700; line-height: 1.45; letter-spacing: .01em; white-space: nowrap; } .hdkd-marke--ok { background-color: var(--h-ok-bg, #e4f1e6); color: var(--h-ok-ink, #1f6b39); } .hdkd-marke--info { background-color: var(--h-info-bg, #e2ecf8); color: var(--h-info-ink, #1a5694); } .hdkd-marke--warn { background-color: var(--h-warn-bg, #faeccd); color: var(--h-warn-ink, #856217); } .hdkd-marke--danger { background-color: var(--h-danger-bg, #f7dcdc); color: var(--h-danger-ink, #8c2220); } .hdkd-marke--akzent { background-color: var(--h-accent-soft, #fbeaea); color: var(--h-accent-strong, #b30015); } .hdkd-marke--still { background-color: transparent; color: var(--h-ink-3, #7d7164); border-color: var(--h-line, #e8ddce); } /* Mit Umbruch — für Marken, deren Text nicht in eine Zeile passt. Der Normalfall ist `nowrap`, weil eine Marke kurz sein soll; Vereinsnamen wie „Kreis der Düsseldorfer Muslime (KDDM) · Vorsitz" sind aber nun einmal lang, und abgeschnitten nützen sie niemandem. */ .hdkd-marke--umbruch { white-space: normal; text-align: left; } /* Mit Rand statt Fläche — für Legenden, wo viele Marken nebeneinander stehen und Flächen die Seite zukleistern würden. */ .hdkd-marke--rand { background-color: transparent; font-weight: 600; } .hdkd-marke--rand.hdkd-marke--ok { border-color: var(--h-ok-line, #3a9d54); color: var(--h-ok-ink, #1f6b39); } .hdkd-marke--rand.hdkd-marke--info { border-color: var(--h-info-line, #3580cf); color: var(--h-info-ink, #1a5694); } .hdkd-marke--rand.hdkd-marke--warn { border-color: var(--h-warn-line, #e0a82c); color: var(--h-warn-ink, #856217); } .hdkd-marke--rand.hdkd-marke--danger { border-color: var(--h-danger-line, #d4423a); color: var(--h-danger-ink, #8c2220); } /* Eckig statt rund — wenn die Marke an einer Kante klebt. */ .hdkd-marke--eckig { border-radius: var(--h-r-klein, 5px); } /* ═══════════════════════════════════════════════════════════════════════════ ZUSAMMENGELEGT · was vorher mehrfach identisch dastand --------------------------------------------------------------------------- Die Regeln unten standen Zeichen für Zeichen gleich in mehreren Dateien. Sie stehen jetzt einmal hier; in den Seiten sind sie entfernt. Weil die Werte gleich waren, ändert sich am Bild nichts — es verschwinden nur Kopien. ═══════════════════════════════════════════════════════════════════════════ */ /* Die drei Team-Karten (Team-Cockpit, Einsatzplanung, Geschäftsstelle) hatten je eine eigene Karte mit identischem Körper — plus je einen identischen Kopf. Der Rahmen war hart auf #e4e7eb gesetzt und die Rundung auf 15px; beides folgt jetzt dem Haus (14px, Linienfarbe des Grundtons). */ .hdkd-tc-card, .hdkd-ep-card, .hdkd-gs-card, .hdkd-de-karte, .hdkd-ve-karte { border: 1px solid; border-color: var(--h-line-strong, #d8cab6); /* war hart #e4e7eb */ border-radius: var(--h-r-gross, 14px); background-color: var(--h-surface, #ffffff); overflow: hidden; } .hdkd-tc-card .ch, .hdkd-ep-card .ch, .hdkd-gs-card .ch { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--h-line, #e8ddce); /* war hart #eef0f2 */ } /* ═══════════════════════════════════════════════════════════════════════════ BRÜCKE ZUM WORDPRESS-KNOPF --------------------------------------------------------------------------- Das Büro benutzt an 139 Stellen den Knopf von WordPress. Ihn zu ersetzen hieße, 139 Stellen anzufassen — viel Risiko für nichts. Stattdessen bekommt er denselben Look wie .hdkd-btn. Gescopt auf `body.hdkd-ui-v2`: diese Klasse sitzt seit v6.60.0 auf genau den HdKD-Seiten und nirgends sonst. Vorher hing dieselbe Regel an `.hdkd-wrap` — und griff damit auf den sieben Seiten ohne diesen Rahmen nicht. Kein Eingriff in andere wp-admin-Seiten. ═══════════════════════════════════════════════════════════════════════════ */ body.hdkd-ui-v2 .button-primary, body.hdkd-ui-v2 .page-title-action.button-primary, body.hdkd-ui-v2 button.page-title-action.button-primary { background-color: var(--h-accent, #e2001a); border-color: var(--h-accent, #e2001a); color: var(--h-accent-ink, #ffffff); box-shadow: 0 8px 18px -12px color-mix(in oklab, var(--h-accent, #e2001a) 80%, #000); } body.hdkd-ui-v2 .button-primary:hover, body.hdkd-ui-v2 .page-title-action.button-primary:hover { background: color-mix(in oklab, var(--h-accent, #e2001a) 88%, #000); border-color: color-mix(in oklab, var(--h-accent, #e2001a) 88%, #000); color: var(--h-accent-ink, #ffffff); } body.hdkd-ui-v2 .button:focus-visible, body.hdkd-ui-v2 .button-primary:focus-visible, body.hdkd-ui-v2 .page-title-action:focus-visible { outline: none; box-shadow: var(--h-ring, 0 0 0 4px rgba(226,0,26,.18)); border-color: var(--h-accent, #e2001a); }