/* * Weiterbildungen-Uebersicht (Seite 2039): Styles fuer die per uebersicht.js * eingefuegten Elemente. Nur auf dieser Seite geladen (siehe includes/uebersicht.php). * * Ausschliesslich Token-Farben und Theme-Schriften, keine neuen Werte. Wo ein * Theme-Selektor ueberschrieben wird (.filter-item, .live-search-input, * .live-search-results, .course-card__tag), steht ein Kommentar, warum die * Spezifitaet dort noetig ist. */ .hx-uebersicht-zaehler, .hx-uebersicht-reset, .hx-uebersicht-subline, .hx-uebersicht-suchpille, .hx-hero-binde { font-family: var(--font4); } /* ========================================================================== BAUPLAN A -- HERO (Neubau, v3 vom 21.08.2026) Zweispaltig: links der umklammerte Theme-Text (.hx-hero-text), rechts der Freisteller mit Bauchbinde. Das Theme-Template ist gesperrt, das Umklammern macht heroWrapperBauen() in uebersicht.js -- hier steht nur die Optik. ========================================================================== */ /* E6, Pflichtregeln. `max-width:none` hebt die 780px-Spalte des Themes auf, sonst bliebe die Bildspalte in der Textbreite gefangen. */ .courses-hero { max-width: none; display: grid; grid-template-columns: 1fr; gap: 56px; } /* Die zweite Spalte setzt heroBildEinfuegen(), nicht das Stylesheet: ohne Bild (fehlendes Attachment) stuende hier sonst eine leere 400px-Spalte neben dem Text. */ .courses-hero.hx-hero-zweispaltig { /* Denis, 21.08. an der Stage: "sie steht da gerade komisch alleine rechts ist viel platz daher wuerd ich gern in der breite was mehr haben", dann nach dem Live-Gang: "die maedels und das trustbadge stehen ganz schoen weit rechts. links ist sehr viel platz koennen wir das nicht groesser skalieren und links mehr platz damit wegmachen?" 400 -> 480 -> 600px. Die Rechnung dahinter: der Inhalt ist 1344px breit, bei 480px Bildspalte blieben der Textspalte 808px -- die Suchzeile nutzt davon aber nur 600px (`max-width`), es standen also rund 200px leer. Mit 600px Bildspalte bleiben 688px, der Ueberhang schrumpft auf gut 40px. Am Bild selbst lag es NICHT: gemessen hat das Motiv nur 2px transparenten Rand links, es fuellt seine Flaeche also voll aus. PREIS: der Hero waechst um rund 120px. Bei 33 % mittlerer Scrolltiefe ist das bewusst in Kauf genommen -- Denis' Entscheidung nach dem Blick auf die Live-Seite. */ /* NACHTRAG 21.08. nachmittags: die 600px waren FEST und nur bei 1344px Inhaltsbreite nachgerechnet. Zwischen 992 und rund 1350px rissen sie der Textspalte den Boden weg -- bei 1024px blieben ihr 321px, die H1 lief dort ueber VIER Zeilen (gemessen). Die Bildspalte waechst jetzt mit und deckelt bei denselben 600px: am Desktop aendert sich nichts (42vw sind bei 1440px 604,8px, also gekappt), bei 1024px sind es 430px und der Text bekommt rund 506 statt 321. */ grid-template-columns: 1fr clamp(340px, 42vw, 600px); } /* GROESSE (Denis, 21.08.: „ist die headline in der h1 nicht bissl klein? im vergleich zur produktdetail und hub seite?"). Live nachgemessen bei 1440px: Produktdetailseite 50px, Themen-Hub 46px, hier 37px -- die Uebersicht war die kleinste von dreien. 43px UND NICHT 46: das ist die groesste Groesse, die in der 643px breiten Textspalte noch ZWEIZEILIG bleibt. Bei 44px kippt der Satz auf drei Zeilen und der Hero waechst um 59px -- bei 33 % mittlerer Scrolltiefe der teuerste Platz der Seite. So kostet es 16px (96 -> 112). Nur der Deckel steigt; mobil bleibt es bei 28px, und dort liegen Produktseite (28px) und Hub (30px) ohnehin gleichauf. */ .courses-hero__title { text-align: left; font-size: clamp(28px, 6vw, 43px); } /* Die Zeile TRAEGT SEIT 1.75.2 DIE HUB-ANATOMIE `.eh__menschen` (uebersicht.js, menschenZeileBauen; Regeln in shared.css). Hier bleibt nur, was seitenspezifisch ist: der Linksbuendig-Zwang gegen die zentrierte Theme-Fassung und der Abstand zur Suche. Die eigene Mobilfassung ist ersatzlos raus -- sie schrumpfte die Gesichter auf 81px, die Hub-Fassung stapelt stattdessen unter 560px. Denis: „mach ueberall das selbe". */ .hero-search__rating { justify-content: flex-start; /* Denis, 21.08. an der Stage: "trust klebt zu sehr an der suchleiste". Gemessen war der Abstand exakt 0px -- die Sterne-Zeile sitzt per `margin-top:auto` auf der gemeinsamen Unterkante mit der Bildspalte und stiess dabei direkt an das Suchfeld. 24px Mindestabstand loesen das, ohne den Boden-Anker aufzugeben. */ margin-top: 24px; } /* ------------------------------------------------------------------------ STICKY-FILTERLEISTE: der eigentliche Grund, warum sie nicht klebte. Denis, 21.08.: "filterleiste muss noch sticky sein aber so das es unter der hauptnavigation sticky ist." Die Leiste trug `position:sticky; top:69px; z-index:999` -- korrekt. Sie klebte trotzdem nicht: das Theme setzt auf dem BODY `overflow-x:hidden` (computed `overflow: hidden auto`), und ein Vorfahre mit overflow != visible macht `position:sticky` wirkungslos. Im Browser auf der Stage gegengeprueft: mit `hidden` steht die Leiste beim Scrollen auf y=1400 bei top -12838 (also weggescrollt), mit `clip` bei exakt 69px -- der Hoehe des fixierten Theme-Headers. `clip` statt `hidden` ist der Unterschied: es beschneidet genauso, erzeugt aber KEINEN Scroll-Container und toetet sticky deshalb nicht. Der Schutz gegen horizontales Scrollen, den das Theme damit bezweckt, bleibt erhalten. Nur auf dieser Seite, weil uebersicht.css page-scoped geladen wird. ------------------------------------------------------------------------ */ body { overflow-x: clip; } .courses-hero__form input { max-width: 600px; } /* Punkt 5 (Denis, 21.08.): "das es unten an der section anliegt". Die 60px padding-bottom der Sektion hoben den Freisteller sonst von der Grundlinie ab. */ @media (min-width: 992px) { .courses-hero-section { padding-bottom: 0; } } @media (max-width: 991px) { .courses-hero, .courses-hero.hx-hero-zweispaltig { grid-template-columns: 1fr; gap: 24px; } } /* Die Textspalte ist vertikal zentriert: oben angeschlagen bliebe unter ihr ein Loch, weil die Bildspalte die hoehere ist (Messung im Entwurf: 125px). */ .hx-hero-text { display: flex; flex-direction: column; justify-content: center; min-width: 0; } /* Punkt 5: das Bild liegt UNTEN an der Sektionskante auf und darf oben ueber die H1-Kante hinausragen. `align-self:end` setzt es auf die Unterkante, der negative Vorlauf laesst es in die Kopfluft der Sektion wachsen. 480px Bildhoehe halten den Hero unter der 520px-Grenze -- 64 Weiterbildungen warten darunter, die mittlere Scrolltiefe der Seite liegt bei 33 %. */ .hx-hero-bild { position: relative; align-self: end; margin-top: -24px; min-width: 0; } .hx-hero-freisteller { display: block; /* Das Motiv ist fast quadratisch (577x545). Mit fester Hoehe von 480px waere es 508px breit und liefe aus der Spalte. Deshalb ueber die BREITE binden, damit es die Spalte immer voll ausfuellt: 600px Spalte -> 600px hoch. `max-height` muss mitwachsen, sonst greift `contain` und legt links und rechts wieder Leerraum an -- genau das, was hier weg soll. */ width: 100%; height: auto; max-height: 600px; /* KEIN margin-left:auto mehr: das schob den Freisteller an die rechte Spaltenkante und liess links die Luecke entstehen, die Denis gesehen hat. Jetzt sitzt er am Spaltenanfang -- dort, wo auch die Bauchbinde ansetzt. */ } /* Punkt 6/6b: Bauchbinde als INSEL unten links, inhaltsbreit -- Masse 1:1 aus assets/hubs.css (.eh__binde), damit es dasselbe Element ist wie auf den Hubs. hubs.css wird bewusst NICHT mitgeladen: von dessen ~40 KB braucht der Hero zwoelf Zeilen. EINZIGE Abweichung: Radius 12 -> 20 (Punkt 17, Flaeche = 20px). */ .hx-hero-binde { position: absolute; /* Denis: "das kann viel weiter links sein wo der split anfaengt". Die Binde sass 24px vom BILDrand -- und weil das Bild rechtsbuendig stand, landete sie weit rechts. Jetzt beginnt sie am Anfang der Bildspalte, also genau an der Kante, an der der zweispaltige Split ansetzt. */ left: 0; bottom: 24px; display: flex; flex-direction: column; gap: 9px; padding: 13px 18px; background: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-radius: 20px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10); line-height: 1.2; } .hx-hero-binde__label { font-weight: 600; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--typography-dark-grey); } /* Denis: "die trustsymbole sind unnoetig eng zusammen". 16 -> 24px. Die 16px sind das Hub-Mass (.eh__binde-reihe); dort stehen die Siegel in einer schmaleren Platte. Hier ist Platz, und vier Logos brauchen Luft, sonst lesen sie sich als ein Block statt als vier Auszeichnungen. */ .hx-hero-binde__reihe { display: flex; align-items: center; gap: 24px; } /* Nur `height`, nie `width`: die Siegel laufen auf einheitlicher Hoehe, die Breite folgt dem Seitenverhaeltnis (1,0 bis 1,5). Eine feste Breite quetscht die runden Siegel. Mit Elternteil geschrieben, damit eine Theme-Regel wie `img{width:100%}` sie nicht aufzieht (auf den Hubs am 19.08. passiert). */ .hx-hero-binde .hx-hero-binde__siegel { height: 44px; width: auto; display: block; flex: 0 0 auto; } /* Punkt 3 / Entwurf E1: die Suchzeile ist EINE weisse Pille, der gelbe Knopf sitzt INNEN rechts. Die Theme-Lupe im Feld faellt weg -- die Lupe IST das gelbe Bedienelement, auf beiden Groessen dieselbe Regel. */ .courses-hero .courses-hero__form { max-width: 600px; width: 100%; } /* BLOCKER 1 (Prueflauf 21.08.2026): `flex-direction:row` ist PFLICHT, kein Default-Luxus. Das Theme setzt unter 767px `.courses-hero__form form{display:flex;flex-direction:column}` (style.min.css, am Original nachgelesen). Unsere Regel hier ueberschreibt `display`, aber ohne eigene `flex-direction` bleibt die Theme-Spalte stehen -- Feld und 48px-Lupenknopf stapeln sich in einer auf 64px festgenagelten Pille. 76 % der Sessions sind mobil. */ .courses-hero .js-live-search-form { position: relative; display: flex; flex-direction: row; align-items: center; gap: 12px; height: 64px; padding: 0 8px 0 20px; background: var(--background-white); border-radius: 100px; box-shadow: 0 4px 24px rgba(39, 37, 42, 0.08); box-sizing: border-box; } .courses-hero .js-live-search-form > .icon_search { display: none; } .courses-hero .courses-hero__form input.live-search-input { flex: 1 1 auto; min-width: 0; height: auto; padding: 0; border: none; background: transparent; box-shadow: none; } /* Der Theme-Knopf behaelt seine Masse (3rem hoch, Radius 24px, 200px breit, --primary-300, Bricolage in Versalien) -- nur seine Lage aendert sich, er steht jetzt IM Feld. `position:static` hebt die absolute Theme-Lage auf. */ .courses-hero .courses-hero__form button.button { position: static; flex: 0 0 200px; width: 200px; max-width: 200px; height: 48px; margin: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } /* FARBE GEERBT, NICHT GESETZT (Denis, 21.08.2026: „wenn ich auf den suchen button hovere verschwindet die lupe die müsste aber weiß werden"). Hier stand `color: var(--typography-black)`. Das SVG zeichnet mit `stroke="currentColor"`, und das Theme dreht `.button:hover` auf `background:var(--typography-black); color:#fff` — die feste Farbe blieb schwarz und die Lupe war schwarz auf schwarz. `inherit` nimmt die Farbe des Knopfes: schwarz auf Gelb, weiß beim Überfahren. Gleiche Falle überall, wo ein Icon in einem Knopf steckt, der beim Hover die Farben tauscht. */ .hx-hero-lupe { flex: 0 0 auto; color: inherit; } /* Punkt 9: "Beliebte Themen" als eigener schmaler Streifen UNTER dem Hero. */ .hx-uebersicht-themen { background: var(--background-white); padding: 20px 0 24px; } /* ---------- Design-Canvas-Runde: H1-Text (JS-Swap, siehe uebersicht.js) ---------- */ .hx-uebersicht-h1-balance { text-wrap: balance; } /* ---------- Zweite Fix-Runde Punkt 2 / Design-Canvas-Runde: Hero-Subline ---------- */ /* Linksbuendig statt zentriert: der Hero ist seit v3 zweispaltig, die Textspalte ist links angeschlagen (H1, Suche und Sterne-Zeile ebenfalls, siehe E6). */ .hx-uebersicht-subline { margin: 0.5rem 0 2rem; font-size: 1rem; /* 16px, Entwurf V3-Hero */ line-height: 1.5; color: var(--typography-dark-grey); text-align: left; max-width: 52ch; } /* ---------- Fix-Runde Punkt 6: Theme-Dropdown auf dieser Seite abschalten ---------- */ /* * Filterung IST die Suche auf dieser Seite (Denis' Kernwunsch) -- das Theme-eigene * Ajax-Dropdown wuerde sonst parallel eigene, zu den sichtbaren Kacheln unpassende * Treffer einblenden. `!important` ist hier bewusst gesetzt: das Theme-Skript setzt den * Anzeigezustand des Dropdowns selbst per Inline-Style, das schlaegt jede externe Regel * ohne `!important`. Nur `.courses-hero` betroffen, das Header-Suchmodal bleibt unberuehrt. */ .courses-hero .live-search-results { display: none !important; } /* ---------- Massnahme 1 / Fix-Runde C: Zaehler + Leerzustand ---------- */ .hx-uebersicht-zaehler { width: 100%; margin-bottom: 1rem; font-family: var(--font4); font-size: 0.875rem; font-weight: 600; color: var(--typography-dark-grey); } /* `.nothing-found` ist die Theme-Klasse (siehe style.min.css), wir liefern nur den Button * dazu -- keine Layoutwerte hier doppeln, die das Theme schon setzt. */ /* PUNKT 11: der Leerzustand hat ZWEI gleichwertige Ausgaenge -- zurueck in die Suche oder raus in ein Gespraech. Beide tragen deshalb dieselbe Pille, keiner ist optisch der Haupt-CTA (ein Primaer-CTA je Seite, und das ist die Suche). */ /* Kein eigener Aussenabstand: `.nothing-found` ist eine Flex-Spalte mit `gap:2rem`. */ .hx-uebersicht-ausgaenge { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } /* Das Theme setzt `.nothing-found{font-size:20px}` -- der Erklaersatz ist ein Nebensatz, keine zweite Ueberschrift. */ .hx-uebersicht-leerhinweis { max-width: 44ch; font-size: 0.9375rem; font-weight: 400; color: var(--typography-dark-grey); } /* PUNKT 12: vorher `background:var(--background-white); border:none` -- ein weisser Knopf in einem weissen `.nothing-found`, also unsichtbar. Jetzt gefuellte Flaeche MIT Kontur, exakt die Fassung, die "Alles löschen" in der Filterleiste schon traegt. Keine neue Farbe. */ .hx-uebersicht-reset, .hx-uebersicht-beratung { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 1.25rem; border-radius: 999px; border: 1px solid var(--background-borders); background: var(--background-light-beige); color: var(--typography-black); font-family: var(--font4); font-size: 0.9375rem; cursor: pointer; } .hx-uebersicht-reset:focus-visible, .hx-uebersicht-beratung:focus-visible { outline: 2px solid var(--typography-black); outline-offset: 2px; } /* * FABLE-KACHELSPEZ (20.08.2026 abends, Denis: "unruhig, kann mich nicht fokussieren"): * Der Kachelkopf verschwindet als eigene Zeile. Die Dauer-Pille wird entpillt (die Dauer * ist ein Fakt und wandert per JS in die Fakten-Zeile unterm Titel), der ganze Header wird * zum absoluten Badge-Slot oben rechts -- maximal EIN Badge, warmweiss mit Ink-Text statt * Farbflaeche: es darf markieren, nicht schreien. Die alte Kollisionssorge (Fix-Runde * Punkt 22: feste Ecke vs. Dauer-Pille) ist damit gegenstandslos, die Pille ist ja weg. */ .course-card__link { position: relative; } /* * DIE KOPFZEILE STEHT IM FLUSS, NICHT MEHR ABSOLUT (Denis, 21.08.2026, mit Screenshot: * „das sieht bissl kacke aus ... ich würde die durchführungsart bissl weiter runtersetzen * dass sie sich nicht überschneiden"). * * Gemessen am Live-DOM bei 1440px: das Badge lag mit 16px ÜBER der Format-Pille — bei * allen drei Arten, nicht nur beim langen Förder-Badge. Ursache war diese Regel: das Theme * legt `.course-card__header` absolut in die rechte obere Ecke, sie schwebt also über dem * Kachelinhalt. Solange dort nur die versteckte Dauer-Pille lag, fiel es nicht auf; seit * 1.75.5 tragen 21 von 64 Kacheln ein Badge. * * WARUM IM FLUSS UND NICHT „die Pille 24px runter": ein Abstand müsste zur Badge-Breite * passen und nur dann greifen, wenn überhaupt ein Badge da ist — zwei Bedingungen, die bei * der nächsten Textänderung wieder auseinanderlaufen. Im Fluss kann sich nichts * überschneiden, egal wie breit das Badge wird. Genau diese Regel galt seit dem * BLOCKER-8-Fix ohnehin schon unter 768px; sie gilt jetzt überall, und die Sonderregel für * Mobil entfällt. * * PREIS: eine Kachel MIT Badge wird um 24px plus 8px Abstand höher. Kacheln ohne Badge * bleiben unverändert, weil die leere Kopfzeile 0px hoch ist (gemessen). */ .course-card__header { position: static; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 8px; } /* Die Dauer-Pille selbst: unsichtbar, aber im DOM lesbar (JS zieht ihren Text). */ .course-card__header .course-card__tag:not([class*='course-card__tag_']) { display: none; } /* * ZWEI ROLLEN, getrennt ueber bunt gegen unbunt (Denis, 21.08.2026): * Gelb --primary-300 (#ffc46a) mit schwarzem Text = bedienen UND Preisvorteil * (Suchknopf, Pfeil-Hover, * Aktions-Tag, Preis-Pille) * Schwarz --typography-black mit weisser Schrift = neutrale Auszeichnung * ("Beliebt", "NEU") * Das warmweisse #f7f5f1 von vorher stand direkt neben der weissen Format-Pille und sah * aus wie ein Fehldruck ("das grau sieht komisch neben dem weiß … ich würd schwarz * nehmen"). Kontraste: Weiss auf #27252a = 15,2:1, Schwarz auf #ffc46a = 11,0:1. */ /* Die Deklarationen stehen hier BEWUSST ein zweites Mal: `.hx-uebersicht-status` ist seit * 1.75.0 nach assets/shared.css umgezogen (beide Seiten teilen sie), aber der NEU-Tag des * Themes kann unsere Klasse nicht tragen -- er kommt fertig aus dem gesperrten Template. * Wer die Badge-Optik aendert, aendert BEIDE Stellen. */ .course-card__header .course-card__tag_new { 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; } /* * BLOCKER 8 (Prueflauf 21.08.2026): Badge und Format-Pille teilen sich mobil dieselbe Zone. * Senkrecht ueberschneiden sie sich sicher: das Badge liegt absolut auf top:16 und ist 24px * hoch (y 16-40), die Format-Pille beginnt beim padding-top 24 und ist 36px hoch (y 24-60). * * WAAGERECHT IST DIE LAGE KNAPPER ALS BEHAUPTET, ABER NICHT BEWIESEN. Im Pruefstand * (echtes Theme-CSS, Snapshot-Markup, 375px) gemessen: * Container 375 - 2x16 Rand = 343px Kachel, `.course-card__link` hat 24px Innenrand * -> 295px nutzbare Breite. Die im E10-Kommentar weiter unten genannten "230,3px" sind * an dieser Stelle NICHT reproduzierbar. * Badge "Beliebt": 70px. Format-Pille laut E10-Messung 213,5px -> zusammen 283,5px, * also 11,5px Luft. Ueberlappt hat im Pruefstand keine der 14 Badge-Kacheln. * EINSCHRAENKUNG: im Pruefstand laedt DM Sans nicht (Schriftdateien liegen auf dem * Live-Server), die Pille misst dort nur 195px -- die 11,5px sind also gerechnet, nicht * gemessen. Ob die echte Schrift sie aufbraucht, entscheidet sich erst auf der Stage. * * Der Fix ist trotzdem drin, weil er in beiden Faellen richtig ist: das Badge verlaesst * mobil die absolute Ecke und steht im Fluss UEBER der Pille. Ein `padding-right` an der * Pille waere keine Alternative -- sie ist `white-space:nowrap` und kann nicht schmaler * werden. Kosten: 24px Badge plus 8px Abstand, und nur auf den Kacheln, die ueberhaupt ein * Badge tragen (im Pruefstand 14 von 64: die acht umsatzstaerksten plus NEU- und * Aktionskacheln). Der Kachelkopf ohne Badge bleibt leer und damit 0px hoch (gemessen) -- * deshalb haengt der Abstand am Badge selbst und nicht am Kopf. */ /* Die frühere Mobil-Sonderregel (BLOCKER 8) ist entfallen: sie machte genau das, was jetzt überall gilt — Kopfzeile im Fluss statt absolut. */ .course-card__tag_popular { display: none; } /* ---------- Format-Eyebrow -- 11px/700, Kapitaelchen ---------- */ /* Schrift: --font4 (DM Sans), NICHT --font8 (Bricolage Grotesque). Denis, 20.08.2026: "da sind jetzt noch komische fonts gewaehlt". Die ganze Uebersichtsseite laeuft auf DM Sans, nur die H1 auf Rowan (--font3) -- Bricolage war in dieser Umgebung ein Fremdkoerper. Gilt fuer Zaehler, Eyebrow und Preis gleichermassen. */ /* RICHTUNG C (Denis, 21.08.: "wenn du das ohne die farbigen Hintergruende pro Section machst, dann find ich C besser -- mit farbigen Hintergruenden D"). Die Sektionen sind weiss geblieben (Farbmenge unveraendert, seine Sorge "wird das nicht zu bunt"), also gilt C: die Durchfuehrungsart steht als Zeile IM Kachelinneren statt als Reiter an der Kartenkante. Ein weisser Reiter auf pastellfarbener Kachel bliebe ohnehin schwaecher als auf weisser Akte -- die Registerkarten-Silhouette lebt vom Farbtausch, den wir bewusst nicht machen. Alles andere aus der D-Runde bleibt: Pfeil-Aktionsleiste, woertliches "Kurs"-Label mit ausgeschriebenem Monat, Bodengruppe. */ /* Die komplette Theme-Fusszeile ist aus: das Format steht in der Format-Zeile oben, die Fakten stehen unterm Titel, der Preis ist das letzte Element der Kachel (Fable-Spez: klarer Zweiklang Titel/Preis statt sieben Stimmen). Die Format-Items bleiben im DOM -- das JS liest sie als Datenquelle aus. */ .course-card__footer { display: none; } /* ---------- Massnahme 3 / Design-Canvas-Runde: Preis + Aktionspreis ---------- */ /* Preis und Fusszeile sitzen in JEDER Kachel auf derselben Hoehe. Denis, 20.08.2026: "die preise springen schon ganz schoen". Ursache am Stage-DOM gemessen: sowohl unser Preisblock als auch die Theme-Fusszeile hatten `margin-top: auto`, zwei Auto-Margins in einer Flex-Spalte teilen den Freiraum aber HALBE-HALBE (je ~40 px) -- also wanderte der Preis mit der Titellaenge mit (216 / 197 / 192 px in einer einzigen Reihe). Drei Schrauben: die Fusszeile verliert ihren Auto-Margin (der Preis allein schiebt), und Preis wie Meta-Zeile bekommen die Hoehe ihrer laengsten Variante als Minimum -- sonst rutscht alles um eine Zeile hoch, sobald eine Rate oder ein Meta-Umbruch fehlt. */ /* FABLE-KACHELSPEZ Zone 2: der Titel ist die Entscheidung -- 19px/600, nie truncaten (amtliche Namen wie "§ 84 AVPfleWoqG" sind das Erkennungszeichen der Zielgruppe). Desktop: min-height 2 Zeilen, damit die Fakten-Zeile in einer Kachelreihe auf gleicher Hoehe beginnt. Mobil (einspaltig, keine Reihen) entfaellt das Minimum, die Kacheln schrumpfen auf Inhaltshoehe -- bei 33 % Scrolltiefe ist das direkt mehr sichtbares Sortiment. */ .course-card__title { font-size: 1.1875rem; font-weight: 600; line-height: 1.35; } @media (min-width: 768px) { .course-card__title { min-height: 2.7em; /* 2 Zeilen bei line-height 1.35 */ } } /* Innenabstand wie im Entwurf: 24px statt der 16px des Themes -- Denis' wiederkehrende Beschwerde "alles so zusammengequetscht". */ .course-card__link { padding: 24px; } /* ---------- Massnahme 6: Hero-Feinschliff ---------- */ /* * KEIN FOKUSRAHMEN AN DER SUCHE (Denis, 21.08.2026, zweimal: „raus damit bitte" und * „aussen brauchst du die kontur auch nicht machen sondern wenn ich was eintippe soll der * text verschwinden so wie auf der startseite"). * * Vorgeschichte: der Rahmen sass erst auf `.live-search-input` — einem rechteckigen Feld * mitten in der weissen 64px-Pille mit 100px Radius, also ein Kasten im Kasten. Ich hatte * ihn dann auf die Pille umgehaengt, damit er ihrer Rundung folgt. Auch das wollte Denis * nicht, und er hat einen Bezugspunkt genannt: die Startseite. Dort nachgemessen — * `outline-style: none` auf dem Suchfeld, es gibt dort ueberhaupt keinen Fokusrahmen. * Zwei verschiedene Suchfelder auf derselben Website unterschiedlich zu behandeln waere * schlechter als beide ohne Rahmen zu lassen. * * WAS DAS KOSTET, und das steht hier, damit es niemand spaeter fuer ein Versehen haelt: * Ohne sichtbaren Fokus sieht jemand, der mit der Tastatur navigiert, nicht, wo er steht. * Das ist ein bewusster Verzicht, keine Nachlaessigkeit — Denis' Entscheidung nach * zweimaligem Hinweis. Als Rest bleibt der Platzhalter, der beim Hineinklicken ausblendet * (Regel darunter): eine sichtbare Zustandsaenderung ohne Kontur. */ .courses-hero .live-search-input.live-search-input:focus, .courses-hero .live-search-input.live-search-input:focus-visible { outline: none; box-shadow: none; } /* „wenn ich was eintippe soll der text verschwinden": beim Tippen tut er das ohnehin, das macht jeder Browser. Neu ist, dass er schon beim HINEINKLICKEN geht — damit hat das Feld eine sichtbare Reaktion auf den Fokus, ohne Rahmen. */ .courses-hero .live-search-input::placeholder { transition: opacity 0.12s ease; } .courses-hero .live-search-input:focus::placeholder { opacity: 0; } /* ---------- Massnahme 7 / Fix-Runde Punkt 18: Chip-Feedback ---------- */ /* * `.filter-item.active` statt einer eigenen Klasse: das Theme setzt/entfernt `.active` * bereits selbst (Auswahl, Abwahl, Reset, Deep-Link), hatte dafuer aber keine sichtbare * Darstellung (im Theme-CSS gegengeprueft: keine einzige Regel fuer `.filter-item.active`). * Das war die gemessene Ursache der 21 % Dead-Click-Sessions auf den Chips. Flaeche * (orange-100) als einziges Signal, keine Kontur/Ring mehr (dritte Runde: reiner Rueckbau, * Feinschliff kommt aus dem Design-Canvas). */ .filter-item.active { background: var(--orange-100); border-radius: 100px; /* Punkt 17: 8 -> 100, der Eintrag ist ein Bedienelement */ color: var(--typography-black); } /* ---------- Fix-Runde Punkt 17 -- DENIS-VORBEHALT, im Bericht ausgewiesen: Steuerhinweis ---------- */ .hx-uebersicht-steuerhinweis { width: 100%; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--background-borders); font-size: 0.75rem; color: var(--typography-dark-grey); text-align: center; } /* ========================================================================== BAUPLAN Punkt 13 -- Kategorie-Ueberschrift mit Icon UND Funktion Die Kategorienamen sind die Spitzenreiter der Dead Clicks (686 Sessions, 20,91 %): 81 / 79 / 57 Klicks, bei denen heute nichts passiert. Ein Icon allein waere Schmuck an genau der Stelle, an der Nutzer schon vergeblich klicken -- deshalb bekommt die Ueberschrift beides. ========================================================================== */ /* BLOCKER 4 (Prueflauf 21.08.2026): das `h2` traegt KEINE Button-Rolle mehr -- damit fielen vier der sechs h2 dieser Seite aus der Gliederung. Das Interaktive ist jetzt ein echter `