/* ========================================================================== HÖHER Blocks: gemeinsame Grundlagen aller Blöcke dieses Plugins. Hintergrundfarbe und Hintergrundbild folgen exakt dem Muster der vorhandenen Theme-Blöcke: --bg-color auf der Sektion, --bg-image und --bg-image-mobile über ein :before. Dazu die Abstands-Optionen aus dem ACF-Feld. ========================================================================== */ .hb-section{position:relative} .hb-section:before{ background:var(--bg-image); background-repeat:no-repeat; background-size:cover; content:""; height:100%; min-width:1400px; position:absolute; right:0; top:0; width:100%; pointer-events:none; } .hb-section > .container{position:relative;z-index:1} @media only screen and (max-width:767px){ .hb-section:before{ background:var(--bg-image-mobile); background-position:bottom; background-repeat:no-repeat; background-size:cover; bottom:0; left:0; min-width:100%; right:auto; top:auto; width:100%; } } /* Deutsche Komposita sprengen auf schmalen Schirmen jede Überschrift. „Qualifizierungschancengesetz" sind 28 Zeichen und passen bei 28px Schriftgröße in keine 301 Pixel breite Spalte, der Rest lief bisher aus dem Element heraus. `hyphens:auto` trennt sauber nach deutschen Regeln (das steht), `overflow-wrap` ist die Rückfallebene, falls ein Wort selbst dafür zu lang ist. */ /* Der Schutz galt bisher nur für Überschriften. Rezensionen kommen aber unredigiert von den Portalen: „Qualitätsmanagementbeauftragte" hat 30 Zeichen und braucht in Rowan bei 18px rund 270px, eine Zitatkarte auf 375px bietet 271px. Das ist auf dem Millimeter, „Pflegedienstleitungsweiterbildung" läuft sicher heraus. -webkit-hyphens ist Pflicht: Safari kennt hyphens unpräfigiert erst ab Version 17, auf iOS 16 und darunter fiele die gesamte Trennung sonst ersatzlos aus. */ .hb-section h1, .hb-section h2, .hb-section h3, .hb-section h4, .hb-section p, .hb-section li, .hb-section blockquote, .foerder-highlight__title, .fp-prog__name, .leistungen__karte-titel, .ersparnis__kurs-name, .stapel__label, .rez__zitat, .rez__wer, .rez__kurs, .rez__quelle, .vt-card__title{ overflow-wrap:break-word; -webkit-hyphens:auto; hyphens:auto; } /* Highlight-Wort aus eckigen Klammern, erzeugt von includes/highlight.php. Muss hier stehen und nicht im Rezensionen-Block: der Filter greift auf ratings, media-text und intro-block, also auf Seiten, die den Block gar nicht enthalten. Dessen CSS lädt WordPress nur, wenn der Block auch gerendert wird. */ .hb-mark{ background:var(--orange-300,#ffc46a); border-radius:12px; padding:0 .3em .1em; -webkit-box-decoration-break:clone; box-decoration-break:clone; } /* -------------------------------------------------------------------------- Steuerpfeile für wischbare Reihen (assets/reihe.js). Erscheinen nur, wenn JavaScript läuft UND die Reihe wirklich breiter ist als ihr Sichtfenster. Passt alles hinein, bleiben sie unsichtbar. Auf dem Handy sind sie ausgeblendet, dort wischt man. -------------------------------------------------------------------------- */ /* Punkte unter der Reihe, Maße wie beim Kurs-Slider des Themes (12px, 12px Abstand, zentriert, 30px Abstand nach oben). Farben aber aus dem Token-Set: die Theme-Werte #dee2e6 und #8b45c7 stehen dort nicht und wären zwei neue Töne. Liegen bewusst UNTER der Reihe, nicht darüber: Pfeile über den Karten verdecken das Motiv, und genau das ist bei Videokacheln mit eingebranntem Text das Problem. */ .hb-punkte{ display:none;gap:12px;justify-content:center;margin-top:30px; } .hb-punkte_aktiv{display:flex} .hb-punkt{ width:12px;height:12px;padding:0;border:0;border-radius:999px;cursor:pointer; background:var(--background-borders,#e4d6c4); transition:background-color 300ms cubic-bezier(.16,1,.3,1),transform 300ms cubic-bezier(.16,1,.3,1); } .hb-punkt:hover{background:var(--orange-300,#ffc46a)} .hb-punkt_aktiv{background:var(--typography-black,#27252a)} /* Die Klickfläche muss 44px sein, der sichtbare Punkt bleibt 12px. Ein 12px-Ziel ist auf dem Handy nicht zuverlässig zu treffen. */ .hb-punkt::before{ content:"";position:absolute;width:44px;height:44px; transform:translate(-16px,-16px); } .hb-punkt{position:relative} .hb-punkt:focus-visible{outline:3px solid var(--typography-black,#27252a);outline-offset:4px} /* -------------------------------------------------------------------------- Laufband für Zitatreihen (assets/reihe.js, data-reihe-auto="1"). Ausnahme aus taste-und-emotion.md 3.6, freigegeben am 01.08.2026, und nur für Zitate. Nie für Kurse, Preise oder Förderprogramme: wo jemand vergleicht und entscheidet, ist Bewegung eine Zumutung. -------------------------------------------------------------------------- */ /* Scroll-Snapping und ein von Hand gesetztes scrollLeft arbeiten gegeneinander, der Browser zieht sonst bei jedem Frame auf die nächste Kartenkante zurück. */ .hb-reihe_laufband{scroll-snap-type:none} /* Ohne die zweite Zeile ist `steuerung.hidden = true` wirkungslos: eine Autorenregel mit display:flex schlaegt die Browserregel [hidden]{display:none}. */ .hb-steuerung{display:flex;justify-content:center;margin:0 0 16px} .hb-steuerung[hidden]{display:none} /* Beschriftet, nicht nur ein Symbol, und mindestens 44px hoch. Ein Pause-Knopf, den man erst deuten muss, ist für jemanden, den die Bewegung stört, keine Hilfe. Form und Farben wie die Filter-Chips der Rezensionen, damit nichts Neues entsteht. */ .hb-laufband-schalter{ display:inline-flex;align-items:center;justify-content:center; min-height:44px;min-width:96px;padding:0 20px; border:1.5px solid var(--background-borders,#e4d6c4);border-radius:999px; background:var(--background-white,#fff);color:var(--typography-black,#27252a); font-family:var(--font8,"Bricolage Grotesque",sans-serif);font-size:15px;line-height:1; cursor:pointer; transition:background-color 300ms cubic-bezier(.16,1,.3,1),border-color 300ms cubic-bezier(.16,1,.3,1); } .hb-laufband-schalter:hover{border-color:var(--orange-400,#ffaf54)} .hb-laufband-schalter:focus-visible{outline:3px solid var(--typography-black,#27252a);outline-offset:2px} /* Rückfallebene zur Abschaltung in reihe.js: schaltet jemand „Bewegung reduzieren" erst nach dem Laden ein, ist der Knopf sofort weg, auch ohne dass ein Skript läuft. */ @media (prefers-reduced-motion: reduce){ .hb-steuerung{display:none} .hb-laufband-schalter{transition:none} } /* Abstands-Optionen: Standard, Kein Abstand, Mehr, Viel */ .hb-sp-none{padding-top:0 !important} .hb-sp-more{padding-top:clamp(80px,10vw,132px) !important} .hb-sp-max{padding-top:clamp(104px,13vw,168px) !important} .hb-spb-none{padding-bottom:0 !important} .hb-spb-more{padding-bottom:clamp(80px,10vw,132px) !important} .hb-spb-max{padding-bottom:clamp(104px,13vw,168px) !important} /* ========================================================================== DIE PRODUKTKACHEL — eine Anatomie, zwei Seiten ========================================================================== Denis, 21.08.2026: „die kacheln find ich gut so wenn du das sauber umgesetzt bekommst will ich die selben kacheln auch auf den hubpages haben." WARUM DIESE REGELN HIER STEHEN UND NICHT ZWEIMAL Die Kachel entsteht an zwei völlig verschiedenen Orten. Auf /weiterbildungen/ baut `assets/uebersicht.js` sie im Browser über die gesperrten Theme-Karten (`.course-card__*`), auf den sechs Themen-Hubs rendert `blocks/kursfinder/index.php` sie serverseitig in PHP. Eine gemeinsame MARKUP-Funktion ist damit unmöglich — PHP kann das JS nicht bedienen. Teilbar sind genau zwei Schichten: die DATEN (`hoeher_uebersicht_preiszeile()`, beide Seiten rufen sie) und dieses CSS. Genau die zwei werden geteilt. ZUM NAMEN: `hx-uebersicht-*` ist historisch — die Regeln standen bis 1.75.0 in `assets/uebersicht.css`. Sie sind hierher UMGEZOGEN, nicht kopiert, und die Klassennamen bleiben unverändert (CLAUDE.md 1a: „Maße, Abstände, Schriftgrößen und Klassennamen 1:1, damit erkennbar bleibt, dass es dasselbe Bauteil ist"). Ein Umbenennen hätte ~30 Klassen-Strings im laufenden Übersichts-JS berührt, darunter die Idempotenz-Wächter — Risiko ohne Gegenwert. WAS NICHT HIERHER GEHÖRT: alles, was einen seitenspezifischen Selektor braucht (`.course-card:hover`, `.kv__karte`, Titel- und Kartenmaße). Das steht weiter in `uebersicht.css` bzw. `hubs.css`. Sonst greifen die Regeln auf jeder Seite der Website, die zufällig eine Theme-Kurskarte trägt. Die Werte sind unverändert übernommen; jede Zahl darin ist eine Denis-Entscheidung oder ein Messwert, die Begründungen stehen an den Regeln. ========================================================================== */ .hx-uebersicht-status, .hx-uebersicht-preis, .hx-uebersicht-eyebrow, .hx-uebersicht-fakten { font-family: var(--font4); } /* ---------- Zone 1: Badge, maximal EINES ---------- Gelb --primary-300 mit schwarzer Schrift = Aktion/Preisvorteil (11,0:1), Schwarz mit weißer Schrift = neutrale Auszeichnung („Beliebt", „NEU", 15,2:1). Aktions-Tag und Preis-Pille tragen dieselbe Farbe, damit beide als EIN Signal gelesen werden (Denis: „das tag aktion soll die selbe bekommen damit es auffällt"). */ .hx-uebersicht-status { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 100px; background: var(--typography-black); color: var(--typography-white); font-size: 0.75rem; /* 12px */ font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } .hx-uebersicht-status--rabatt { background: var(--primary-300); color: var(--typography-black); } /* FÖRDERUNG (Denis, 21.08.2026: „bei den produkten die azav gefördert sind will ich das du den switch für förderung anmachst ... statt beliebt bis zu 100% förderung"). Grün, weil es weder Preisvorteil (gelb) noch neutrale Auszeichnung (schwarz) ist, sondern ein drittes Merkmal — und weil dieselbe Paarung als Förder-Chip auf den Hubs schon gilt: --green-200 mit schwarzer Schrift, 13,9:1. SONST NICHTS: gleiche Form, gleiche Versalien, gleicher Sperrsatz wie „BELIEBT" und „NEU". Eine erste Fassung setzte diesen einen Fall gemischt, aus Sorge um die Breite. Nachgemessen in echter DM Sans bei 12px: „BIS ZU 100 % FÖRDERUNG" braucht 176px, auf der 375px-Kachel stehen 246px zur Verfügung. Die Sorge war unbegründet, und eine Ausnahme in der Schreibweise für genau ein Badge zerreißt die Familie. */ .hx-uebersicht-status--foerderung { background: var(--green-200); color: var(--typography-black); } /* ---------- Zone 1: Format-Pille ---------- Die Durchführungsart als weißes Plättchen, der erste Blickanker auf der pastellfarbenen Kachel (Denis, 21.08.: „in deinem Design hatten die Fernlehrgänge noch ne Pille drum herum"). Text wörtlich: „Kurs", Monat ausgeschrieben — „Live · Jan." war nicht erkennbar. E10: mobil 12px statt 14px, sonst bricht „Fernlehrgang · Start jederzeit" bei 375px auf zwei Zeilen (gemessen: 240,1px nötig, 230,3px vorhanden). */ .hx-uebersicht-eyebrow { display: inline-flex; align-self: flex-start; align-items: center; gap: 0.5rem; height: 36px; margin: 0 0 0.875rem; padding: 0 16px 0 12px; background: var(--background-white); border-radius: 100px; font-size: 0.875rem; /* 14px */ font-weight: 400; color: var(--typography-black); white-space: nowrap; } .hx-uebersicht-eyebrow svg { flex: 0 0 auto; } @media (max-width: 767px) { .hx-uebersicht-eyebrow { font-size: 0.75rem; /* 12px */ } } /* ---------- Zone 2: Kurztext ---------- Füllt die Kachel zwischen Titel und Bodengruppe. Ohne ihn hingen die Fakten optisch in der Kartenmitte (Denis, 21.08.: „in deinem Design waren diese Facts nah an der Linie"). */ .hx-uebersicht-kurztext { margin: 0 0 0.75rem; font-family: var(--font4); font-size: 0.875rem; line-height: 1.55; color: var(--typography-dark-grey); } /* ---------- Zone 3: Fakten, untereinander, jeder Wert mit Label ---------- Der Auto-Anker `margin: auto 0 0` sitzt auf DIESER Zone: Preis und Pfeil bleiben unten, die Fakten wachsen nach oben in die Lücke. KEIN min-height — es reservierte Platz für zwei Zeilen und trieb den Abstand zur Trennlinie von 14 auf 30px. Label und Wert unterscheiden sich über die FARBE, nicht über eine zweite Schriftstärke. --typography-dark-grey (#444, 8,2–9:1) statt light-grey (#7c7c7c, auf den vier Pastellgründen nur 3,5–3,8:1 — unter WCAG AA). */ .hx-uebersicht-fakten { display: flex; flex-direction: column; gap: 4px; margin: auto 0 0; padding: 0; font-size: 0.875rem; /* 14px */ line-height: 1.4; color: var(--typography-black); } .hx-uebersicht-fakten__zeile { margin: 0; } .hx-uebersicht-fakten__label { font-style: normal; color: var(--typography-dark-grey); } /* Die PHP-Seite gibt dieselbe Zone als `
` aus — für Crawler ist ein Begriff-Wert-Paar mehr wert als ein Absatz, und die Hub-Kachel ist im Gegensatz zur Übersicht überhaupt serverseitig lesbar. Damit beide gleich AUSSEHEN, laufen dt und dd hier inline: optisch „Dauer: 6 Monate", strukturell ein Definitionspaar. Die JS-Seite kann das nicht nachziehen, sie hängt am Theme-Markup. */ .hx-uebersicht-fakten > div { margin: 0; } .hx-uebersicht-fakten dt, .hx-uebersicht-fakten dd { display: inline; margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; } .hx-uebersicht-fakten dt { color: var(--typography-dark-grey); } .hx-uebersicht-fakten dt::after { content: ": "; } /* ---------- Zone 4: Bodengruppe — Trennlinie, Preis links, Pfeil rechts ---------- 16/16 statt 14/18: die Trennlinie liegt damit 24 (Kachel-Innenrand) + 52 (Mindesthöhe Preiszone) + 16 + 1 = 93px über der Kachelunterkante — der im Entwurf nachgemessene Wert. */ .hx-uebersicht-aktion { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(39, 37, 42, 0.12); } .hx-uebersicht-pfeil { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: var(--typography-black); border-radius: 100px; flex: 0 0 auto; } .hx-uebersicht-pfeil, .hx-uebersicht-pfeil svg { transition: background 0.18s ease, stroke 0.18s ease; } /* Der Vollzahlerpreis sitzt UNTEN in seinem Feld. Fehlt die Ratenzeile, hängt er sonst in der Luft (Denis, 21.08.) — flex-end zieht ihn auf dieselbe Grundlinie wie bei Kacheln mit Rate. min-height 52px = Preiszeile + Ratenzeile; hält die Trennlinie auf einer Höhe, wenn die Rate fehlt. */ .hx-uebersicht-preis { display: flex; flex-direction: column; justify-content: flex-end; gap: 0.125rem; min-height: 3.25rem; } .hx-uebersicht-preis__zeile { display: flex; align-items: baseline; gap: 0.375rem; flex-wrap: wrap; } /* Im Aktionsfall stehen Pille und Streichpreis in DERSELBEN Zeile, mittig zueinander — eine Pille auf der Grundlinie auszurichten kippt sie optisch nach oben. */ .hx-uebersicht-preis__zeile--aktion { align-items: center; gap: 0.5rem; } .hx-uebersicht-preis__ab { font-size: 0.8125rem; color: var(--typography-dark-grey); } .hx-uebersicht-preis__voll { font-family: var(--font4); font-size: 1.25rem; /* 20px */ font-weight: 600; line-height: 28px; color: var(--typography-black); } /* Der reduzierte Preis in einer Pille, --primary-300 mit schwarzem Text — dieselbe Farbe wie das Aktions-Tag: es gibt nur EIN Gelb. HÖHE GENAU 32px (28 Zeilenhöhe + 2/2): 32 + 17 Ratenzeile = 49px, unter den 52px Mindesthöhe der Preiszone — die Trennlinie bleibt bei 93px. Bei 36px wären es 53px und die Linie spränge um 1px. */ .hx-uebersicht-preis__pille { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 100px; background: var(--primary-300); color: var(--typography-black); font-family: var(--font4); font-size: 1.25rem; /* 20px */ font-weight: 600; line-height: 28px; white-space: nowrap; } /* Das „ab" der Premium-Überlagerung steht INNERHALB der Pille und erbt deren Farbe. */ .hx-uebersicht-preis__pille .hx-uebersicht-preis__ab { color: inherit; } .hx-uebersicht-preis__rate { font-size: 0.75rem; color: var(--typography-dark-grey); /* kleine Schrift: dunkles statt helles Grau, WCAG AA */ } /* Streichpreis RECHTS neben dem reduzierten Preis, einzeilig („streichpreis würd ich ehrlich gesagt rechts neben dem reduzierten preis machen"). */ .hx-uebersicht-preis__alt { font-size: 0.875rem; /* 14px */ line-height: 1.4; color: var(--typography-dark-grey); text-decoration: line-through; white-space: nowrap; } @media (max-width: 767px) { .hx-uebersicht-preis { min-height: 0; /* einspaltig gibt es keine Reihen-Ausrichtung */ } .hx-uebersicht-preis__voll, .hx-uebersicht-preis__pille { font-size: 1rem; /* 16px, Entwurf V3-Mobil */ } } @media (prefers-reduced-motion: reduce) { .hx-uebersicht-pfeil, .hx-uebersicht-pfeil svg { transition: none; } } /* ========================================================================== DIE MENSCHEN-ZEILE — Gesichter, die 150.000, der Sternwert ========================================================================== Denis, 21.08.2026: „auf der produktdetailseite hattest du das element doch schon gut gebaut warum nimmst du nicht das einfach? bei der suche hast du das wieder neu gebaut ist doch kaese mach ueberall das selbe bitte nimm das was optimierter ist fuer mobile" — und Desktop. Er hat recht, und es ist derselbe Fehler wie in CLAUDE.md 1a beschrieben: das Bauteil gab es laengst als `.eh__menschen` im Hub-Hero (blocks/hero-hub/index.php). Auf /weiterbildungen/ ist stattdessen eine zweite Fassung ueber dem Theme-Partial `trusted-by.php` entstanden, mit eigenen Mobilregeln. GENOMMEN WURDE DIE HUB-FASSUNG, weil ihre Mobilregel gemessen ist: bei 390px teilte die Zeile 343px zwischen dem 148px breiten Gesichterbild und dem Text auf, dem blieben 181px — die 150.000er-Zeile brach auf drei Zeilen, die Sternezeile auf drei weitere, der Block war 167px hoch. Gestapelt hat der Text die volle Breite. Die Uebersichts- Fassung loeste dasselbe Problem, indem sie das Gesichterbild auf 81px schrumpfte und die Sternezeile umbrechen liess — kleinere Gesichter statt mehr Platz. Diese Regeln sind aus hubs.css UMGEZOGEN, nicht kopiert. Aendern heisst: beide Seiten. ========================================================================== */ /* Menschen-Zeile: Gesichter, dann die Zahl, dann der Sternwert. Reihenfolge bewusst so — die Zahl ist der stärkste Satz der Marke, der Sternwert belegt sie. Eine Zeile Abstand zum Button, keine Linie, kein Kasten. */ .eh__menschen{display:flex;align-items:center;gap:14px;margin-top:30px} .eh__gesichter{flex:0 0 auto;height:44px} .eh__gesichter img{height:100%;width:auto;display:block} .eh__zahl{font-family:var(--font4);font-weight:600;font-size:16px;line-height:1.3;color:var(--typography-black);margin:0} .eh__sterne{display:flex;align-items:center;gap:7px;margin-top:3px} .eh__sterne svg{width:13px;height:13px;display:block} .eh__sterne-text{font-family:var(--font4);font-size:13px;color:var(--typography-dark-grey)} .eh__sterne-text a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(68,68,68,.35)} .eh__sterne-text a:hover{text-decoration-color:currentColor} /* Auf dem Handy stapeln statt nebeneinander. GEMESSEN am 19.08.2026 bei 390px: die Zeile teilt 343px zwischen dem 148px breiten Gesichterbild und dem Text auf, dem bleiben 181px. Darin brach „Über 150.000 Pflegekräfte weitergebildet" auf DREI Zeilen und die Sternezeile auf drei weitere; der ganze Block war 167px hoch. Es gab fuer diesen Block bis dahin ueberhaupt keine Mobilregel, die Desktop-Zeile galt einfach mit. Gestapelt steht dem Text die volle Breite zur Verfuegung. */ @media (max-width:560px){ .eh__menschen{flex-direction:column;align-items:flex-start;gap:10px} .eh__sterne{margin-top:5px} } /* Trefferflaeche des Bewertungslinks (Audit 15.08.2026): gemessen 112x38px, gefordert 44px. `padding-block` statt Hoehe, damit die Zeile im Flusstext nicht auseinanderreisst. */ .eh__sterne-text a{display:inline-block;padding-block:3px} /* Sticky-Navigation (58px) plus Kopfzeile: Sprungziele und Tastaturfokus duerfen nicht darunter landen (WCAG 2.4.11). */ html{scroll-padding-top:calc(var(--hh,64px) + 74px)}