/* === Basis: Icons (Lucide-Sprite) =================================== Gilt seitenweit für alle Elemente, die das lokale Sprite nutzen (files/kletterzentrum/theme/icons/lucide-sprite.svg). Kein CDN, kein Lucide-JS, siehe CLAUDE.md, Design-System → Icons. */ .kzc-icon { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.15em; } /* === kzc_hero – Hero-Banner (RSCE) ==================================== Drei Layouts über die Modifier-Klasse aus dem Feld "layout": .kzc-hero--fullwidth Foto flächig, Petrol-Verlauf (::before), Wein-Diagonale an der schrägen Unterkante (__blade per z-index übers Foto, clip-path). Referenz: design-ref/KZC-hero-full-image-1.jpg. .kzc-hero--split Petrol-Textspalte links, Foto rechts per clip-path freigestellt, Weinrot-Klinge (__blade hinter dem Foto, Spalt am Diagonal- Übergang). Geometrie aus KZC-Schritt5-Nav-Event.css (.hero .wine/.photo). .kzc-hero--plain Kein Foto, kein Overlay. Kompaktes Petrol-Band fuer Unterseiten (Seitenkopf), EXAKT dieselbe Keil+Weinrot-Kante-Mechanik wie --fullwidth (__blade + ::after, gemeinsam genutzte Variablen --kzc-hero-cut/-edge/-foot an der Basis .kzc-hero). Kundenfeedback 10.09.2026: immer ein steiler roter Klingenabschluss, gleiche Mechanik wie die Startseite. Seit 11.09.2026 Redaktionsregel: auf jede Seite mit kzc_hero kommt direkt danach IMMER eine kzc_notice_bar (die unterdrueckt dafuer ihre eigene Oberkante, siehe ".kzc-hero + .kzc-notice-bar"), kein Sonderfall "Hero ohne Leiste" mehr. NICHT die helle Diagonale aus dem Preise-Entwurf (design-ref/KZC-Preise.html/.css ".page-head::after") – erster Versuch, verworfen. Eyebrow OHNE Klinge, wie bei fullwidth/split (zweiter verworfener Versuch: kurzzeitig mit Sektions-Kopf-Klinge, der Hero-Eyebrow hat auf der Startseite aber nie eine). Gemeinsam: __inner (jetzt auf Projekt-Containerbreite 1320 statt der alten --kzc-w-content), Eyebrow, Headline (variable H-Ebene über RSCE-Standardfeld), Text, Button-Liste (0–4, Icon optional, Varianten primär Weinrot / ghost / dezent [kleine Pille, z. B. Sprungmarken]). Breakpoints 1024/768 (TODO 360/768/1024/1440-Angleichung, CLAUDE.md). */ .kzc-hero { /* Stellschrauben fuer den Diagonal-Keil + Weinrot-Kante an der Unterkante (__blade + ::after, siehe --fullwidth/--plain weiter unten – gleiche Mechanik, beide Layouts teilen sich diese drei Variablen, vereinheitlicht 10.09.2026): --kzc-hero-cut Höhe des Keils (rechts hoch, links 0) --kzc-hero-edge Stärke der Weinrot-Linie auf der Diagonale --kzc-hero-foot Füllfarbe des Keils, fest --kzc-bg-band. Redaktions- regel (11.09.2026, dritte Runde): auf jede Seite mit kzc_hero kommt direkt danach IMMER eine kzc_notice_bar, kein Sonderfall "Hero ohne Leiste" mehr. Vorherige Zwischenstaende (transparent, dann --kzc-white als Default mit ":has(+ .kzc-notice-bar)"-Umschaltung) wieder verworfen: selbst mit der Subpixel-Ueberlappung weiter unten blieb am Uebergang Weiss/Wein/Petrol eine sichtbare Haarlinie, und optisch ueberzeugte die helle Variante ohnehin nicht. --kzc-bg-band matcht die Aktuell-Leiste exakt, der Keil liest sich als ihr schraeger Fortsatz. KEIN Weinrot flächig (CLAUDE.md Farbeinsatz), Weinrot ist nur die Kantenlinie. Split nutzt eine eigene Mechanik (diagonale Klingen-Flaeche statt Unterkanten- Keil) und referenziert diese Variablen nicht. */ --kzc-hero-cut: var(--kzc-diagonal-px); --kzc-hero-edge: 5px; --kzc-hero-foot: var(--kzc-bg-band); position: relative; overflow: hidden; min-height: 620px; display: flex; align-items: center; background-color: var(--kzc-petrol); color: var(--kzc-white); } .kzc-hero__inner { position: relative; z-index: 3; box-sizing: border-box; width: 100%; max-width: var(--kzc-container-max); margin-inline: auto; padding-inline: var(--kzc-section-padding-x); } .kzc-hero__text { max-width: 32.5rem; } /* --- Split: Klinge + freigestelltes Foto rechts --- */ /* Redaktionsregel 11.09.2026: einheitliche Hoehe auf Unterseiten, egal ob mit Foto (Split) oder ohne (Seitenkopf) – NUR die Startseite ist hoeher (Vollbild, erbt die 620px-Basis oben unveraendert). Ohne dies waere Split (bisher 620px von der Basis geerbt) sichtbar hoeher als der Seitenkopf (bisher 0/content-getrieben) gewesen, siehe Kundenfeedback (Vergleich Klettern-&-Halle-Seite vs. Preise-Seite). */ .kzc-hero--split { min-height: 480px; } .kzc-hero--split .kzc-hero__blade { position: absolute; inset: 0; background-color: var(--kzc-wine); clip-path: polygon(54% 0, 100% 0, 100% 100%, 43% 100%); } .kzc-hero--split .kzc-hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: polygon(55.8% 0, 100% 0, 100% 100%, 43% 100%); } /* --- Vollbild: Foto flächig, Petrol-Verlauf, Wein-Diagonale unten --- */ .kzc-hero--fullwidth { /* --kzc-hero-overlay Grundton des Foto-Overlays als "R, G, B" (Petrol/Ink-Mischung; weniger Blau = Werte senken), Deckung steuern die drei Alphas im ::before. Foto-spezifisch, deshalb nicht an der Basis (--kzc-hero-cut/-edge/-foot dort, siehe .kzc-hero oben). */ --kzc-hero-overlay: 22, 48, 60; padding-bottom: calc(var(--kzc-hero-cut) + var(--kzc-space-8)); } .kzc-hero--fullwidth .kzc-hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Foto-Overlay für Textlesbarkeit, links dicht -> rechts fast offen. Einziger im Design erlaubte Verlauf (CLAUDE.md). Dunkler, entsättigter Blaugrau-Ton wie in design-ref/KZC-hero-full-image-1.jpg, kein flächiges Petrol. */ .kzc-hero--fullwidth::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient( 90deg, rgba(var(--kzc-hero-overlay), 0.80) 0%, rgba(var(--kzc-hero-overlay), 0.42) 55%, rgba(var(--kzc-hero-overlay), 0.10) 100% ); } /* Diagonal-Keil an der Unterkante: vollbreites Dreieck im Fuß-Ton (links 0, rechts --kzc-hero-cut hoch), damit KEINE Lücke zur Aktuell-Leiste klafft und die Behandlung sauber ausläuft. z-index über Foto/Overlay (Vollbild), unter dem Inhalt. Gilt fuer --fullwidth UND --plain (gleiche Mechanik, vereinheitlicht 10.09.2026 – der Seitenkopf hatte zwischenzeitlich einen eigenen, flacheren Keil in eigenen Variablen, auf einer vollen Seitenbreite kaum als Diagonale erkennbar und ohne Weinrot-Kante an der Naht zur Aktuell-Leiste). --split bleibt aussen vor, eigene Klingen-Flaeche statt Unterkanten-Keil. Hoehe um 2px ueber --kzc-hero-cut hinaus (Befund 11.09.2026, Screenshot Preise-Seite): __blade und die Weinrot-Linie (::after) sind zwei getrennt geclippte Ebenen mit exakt gemeinsamer Diagonal-Kante – Browser rastern beide unabhaengig, an der gemeinsamen Kante blieb ein Subpixel-Spalt, durch den der Hero-Grund (Petrol) als duenne Linie durchschien. Bei dunkler Fuellfarbe (--kzc-bg-band, Aktuell-Leiste folgt) kaum sichtbar, bei Weiss (Regelfall ohne Leiste, seit heute Standard) deutlich. Die 2px Overlap liegen sicher unter der 5px breiten Linie (::after reicht bis --kzc-hero-cut + --kzc-hero-edge), bleiben also unsichtbar, schliessen aber die Naht. */ .kzc-hero--fullwidth .kzc-hero__blade, .kzc-hero--plain .kzc-hero__blade { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: calc(var(--kzc-hero-cut) + 2px); background-color: var(--kzc-hero-foot); clip-path: polygon(0 100%, 100% 0, 100% 100%); } /* Weinrot-Linie auf der Diagonale ("Klinge"): gleichmäßig starkes, vollbreites Parallelogramm entlang der Keil-Oberkante. Nur Kante, nicht Fläche – Weinrot bleibt winziger Akzent (CLAUDE.md Farbeinsatz). ::after liegt in der Baum-Reihenfolge nach __blade, gleicher z-index, also darüber; der Inhalt (z-index 3) bleibt oben. Immer vorhanden, mit oder ohne folgende Aktuell-Leiste (Kundenfeedback 10.09.2026) – die Leiste unterdrueckt dafuer ihre eigene Oberkante, siehe ".kzc-hero + .kzc-notice-bar" weiter unten. */ .kzc-hero--fullwidth::after, .kzc-hero--plain::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: calc(var(--kzc-hero-cut) + var(--kzc-hero-edge)); background-color: var(--kzc-wine); clip-path: polygon( 0 100%, 100% var(--kzc-hero-edge), 100% 0, 0 var(--kzc-hero-cut) ); } /* Foto-Quelle: kleine Zeile im hohen (rechten) Teil des Keils, gibt der Diagonale einen Zweck. Nur Vollbild (Twig rendert sie nur dort). */ .kzc-hero--fullwidth .kzc-hero__credit { position: absolute; right: var(--kzc-section-padding-x); bottom: calc((var(--kzc-hero-cut) - 1.4em) / 2); z-index: 3; margin: 0; font-size: var(--kzc-fs-caption); font-weight: var(--kzc-fw-medium); letter-spacing: var(--kzc-tracking-wide); text-transform: uppercase; color: rgba(255, 255, 255, 0.55); } /* --- Seitenkopf: kein Foto, kompaktes Petrol-Band, gleicher Keil wie Vollbild (Kundenfeedback 10.09.2026: "genauso steil, gleiche Mechanik") --- */ .kzc-hero--plain { /* Fuenfte Runde (Befund "immer noch zu hoch, jetzt 740"): zwei Fehler uebersehen. (1) Die Basis .kzc-hero setzt min-height:620px – height:480px allein ueberschreibt das NICHT, min-height gewinnt immer, wenn es groesser ist als height. (2) Kein box-sizing: border-box (das Theme hat keinen globalen Reset, siehe colors_and_type.css) – Padding kommt bei content-box oben drauf statt in der Hoehe enthalten zu sein. 620px min-height + 120px Padding (32 oben + 56 Keil + 32 unten) = 740px, exakt der gemeldete Wert. Jetzt beides behoben: min-height explizit auf 0 zurueckgesetzt, box-sizing: border-box lokal (wie bei kzc_split_diagonal/kzc_steps/kzc_price_overview aus demselben Grund), damit height:480px die GESAMTE Box inkl. Padding meint. */ box-sizing: border-box; height: 480px; min-height: 0; padding-block: var(--kzc-space-6) calc(var(--kzc-hero-cut) + var(--kzc-space-6)); } /* --- Hoehe Vollbild: Unterseite vs. Startseite (29.09.2026) --- Vollbild ist nicht mehr der Startseite vorbehalten. Auf Unterseiten gilt fuer ALLE Layouts dieselbe Hoehe wie beim Seitenkopf (480px Gesamtbox, border-box, gleicher Grund wie bei --plain oben), nur die Startseite bleibt beim grossen Hero. Unterscheidung ueber die Body-Klasse kzc-home aus dem eigenen Seitenlayout "Startseite" (tl_layout.cssClass, Contao schreibt sie in ), KEIN Feld am Element. Die kzc-home-Werte sind 1:1 die bisherigen Vollbild-Werte (content-box, 620/560/480px + Keil-Padding), die Startseite sieht also unveraendert aus. */ /* 30.09.2026: min-height statt fester height. Mit Eyebrow, zweizeiliger H1, Text, Eckdaten und Buttons (Einsteiger-Seite) sprengte der Inhalt die festen 480px, overflow:hidden schnitt die Eyebrow oben ab. Kurze Heroes (Kursseiten) bleiben bei 480px, lange wachsen mit. Oben Abstand, damit der Text nie am Header klebt. */ .kzc-hero--fullwidth { box-sizing: border-box; height: auto; min-height: 480px; padding-top: var(--kzc-space-6); } .kzc-home .kzc-hero--fullwidth { box-sizing: content-box; height: auto; min-height: 620px; padding-top: 0; } .kzc-hero--plain .kzc-hero__text { max-width: none; } .kzc-hero--plain .kzc-hero__headline { font-size: clamp(2.125rem, 5vw, 3.625rem); max-width: 20ch; } .kzc-hero__eyebrow { font-size: var(--kzc-fs-eyebrow); font-weight: var(--kzc-fw-semi); letter-spacing: var(--kzc-tracking-wide); text-transform: uppercase; color: var(--kzc-blue); margin: 0 0 var(--kzc-space-3); } /* Vollbild-Override: --kzc-blue auf hellen Fotostellen des Overlays nur ~2,3:1 (Test-Pass 02.09.2026, Befund 3), WCAG AA fuer Normaltext verfehlt. Weiss haelt in jeder Overlay-Zone sicher Kontrast. Split bleibt unveraendert (Textspalte auf vollflaechigem Petrol, kein Foto-Kontrastproblem, nicht Teil des Befunds). */ .kzc-hero--fullwidth .kzc-hero__eyebrow { color: var(--kzc-white); } /* Seitenkopf-Override: Weiss statt Blau (Befund 10.09.2026, Screenshot-Test) – --kzc-blue auf vollflaechigem Petrol faellt fast so knapp aus wie beim Vollbild-Foto-Overlay, gleiche Korrektur wie dort uebernommen statt neu vermessen. KEINE Klinge davor (Korrektur 10.09.2026, zweite Runde): der Hero-Eyebrow hat auf der Startseite nie eine Klinge, egal welches Layout – das Sektions-Kopf-Muster mit Klinge gilt nur fuer Abschnitts-Ueberschriften weiter unten im Seitenfluss (kzc_cards/kzc_steps/etc.), nicht fuer kzc_hero. War kurzzeitig anders umgesetzt, wieder entfernt. */ .kzc-hero--plain .kzc-hero__eyebrow { color: var(--kzc-white); } .kzc-hero__headline { font-family: var(--kzc-font-sans); font-weight: var(--kzc-fw-xbold); /* Eigener, kleinerer Clamp statt --kzc-fs-display-1 (bis 96px): passt sonst nicht in die 520px-Textspalte, Wert 1:1 aus design-ref (.hero-text h1, clamp(46px, 5.2vw, 66px)). */ font-size: clamp(2.875rem, 5.2vw, 4.125rem); line-height: 1; letter-spacing: var(--kzc-tracking-tight); text-transform: uppercase; color: var(--kzc-white); /* Lange deutsche Komposita (VORSTIEGSKURS) sind in 66px breiter als die 520px-Spalte. hyphens trennt an der Silbe (lang="de"), overflow-wrap bleibt nur letzter Notnagel (brach vorher mitten im Wort, Befund 30.09.2026). hyphenate-limit-chars: erst ab 10 Zeichen trennen, sonst trennte der Browser auch kurze Woerter nur zum Zeilenfuellen ("HÖ-HER" im Startseiten-Hero, Befund 30.09.2026). */ hyphens: auto; hyphenate-limit-chars: 10 4 4; overflow-wrap: break-word; margin: 0 0 var(--kzc-space-4); } .kzc-hero__text-body { max-width: var(--kzc-w-prose); font-size: var(--kzc-fs-body); line-height: var(--kzc-lh-normal); color: rgba(255, 255, 255, 0.92); margin: 0 0 var(--kzc-space-6); } .kzc-hero__buttons { display: flex; flex-wrap: wrap; gap: var(--kzc-space-3); } .kzc-hero__button { display: inline-flex; align-items: center; justify-content: center; gap: var(--kzc-space-2); font-weight: var(--kzc-fw-bold); font-size: var(--kzc-fs-body); padding: var(--kzc-space-4) var(--kzc-space-5); border-radius: var(--kzc-radius-md); border: 1.5px solid transparent; text-decoration: none; transition: transform var(--kzc-dur-fast) var(--kzc-ease-out), background-color var(--kzc-dur-base) var(--kzc-ease-out), border-color var(--kzc-dur-base) var(--kzc-ease-out); } .kzc-hero__button-icon { flex: none; } .kzc-hero__button:hover { text-decoration: none; transform: translateY(-1px); } .kzc-hero__button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85); } .kzc-hero__button--primary { background-color: var(--kzc-cta); color: var(--kzc-cta-fg); } .kzc-hero__button--primary:hover { background-color: var(--kzc-wine-hover); color: var(--kzc-cta-fg); } .kzc-hero__button--ghost { background-color: transparent; color: var(--kzc-white); border-color: rgba(255, 255, 255, 0.42); } .kzc-hero__button--ghost:hover { background-color: rgba(255, 255, 255, 0.1); border-color: var(--kzc-white); color: var(--kzc-white); } /* Dezent: kleine Pille auf dunklem Grund, fuer Sprungmarken/Sekundaer- links statt echter CTAs (Referenz KZC-Preise.css .page-head .quick). Kein translateY-Hover wie primaer/ghost, nur die Flaeche hellt auf – Pillen sind Navigationshilfen, keine Aktionen. */ .kzc-hero__button--quiet { background-color: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.24); color: var(--kzc-white); font-size: var(--kzc-fs-caption); padding: var(--kzc-space-3) var(--kzc-space-4); border-radius: var(--kzc-radius-pill); } .kzc-hero__button--quiet:hover { background-color: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.24); color: var(--kzc-white); transform: none; } .kzc-hero__button--quiet .kzc-hero__button-icon { color: var(--kzc-blue); } /* Eckdaten-Chips (Feld keyFacts, 29.09.2026, Referenz design-ref/KZC-Grundkurs.css ".k-hero .keys"): reine Info, deshalb KEIN Hover und kein Zeiger, sonst laesst sich der Chip mit einem "dezent"-Button verwechseln. Optisch Geschwister der dezenten Pille (gleiche Transluzenz), aber eckiger Radius statt Pill-Rundung als zweites Unterscheidungsmerkmal. Die weinrot gefuellte erste Pille aus der Referenz bewusst NICHT uebernommen: Weinrot signalisiert bei uns "Jetzt buchen", auf einem nicht klickbaren Chip waere das eine falsche Fährte. */ .kzc-hero__facts { display: flex; flex-wrap: wrap; gap: var(--kzc-space-2); list-style: none; margin: 0 0 var(--kzc-space-6); padding: 0; } .kzc-hero__fact { display: inline-flex; align-items: center; gap: var(--kzc-space-2); font-size: var(--kzc-fs-caption); font-weight: var(--kzc-fw-bold); line-height: 1.2; color: var(--kzc-white); background-color: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: var(--kzc-radius-sm); padding: var(--kzc-space-2) var(--kzc-space-3); } .kzc-hero__fact-icon { flex: none; width: 14px; height: 14px; /* Weiss wie in der Referenz: Blau (wie bei den dezenten Buttons) verschwindet auf dem Foto-Overlay im Vollbild (Befund 29.09.2026). */ color: currentColor; } @media (max-width: 1024px) { /* Nur der Startseiten-Hero reduziert hier, alle Unterseiten-Heroes bleiben bei ihren 480px (siehe "Hoehe Vollbild" oben) – sonst wuerde die gemeinsame Unterseiten-Hoehe hier durch eine ungescopte Regel wieder auseinanderlaufen. */ .kzc-home .kzc-hero--fullwidth { min-height: 560px; } .kzc-hero--split .kzc-hero__blade { clip-path: polygon(54% 0, 100% 0, 100% 100%, 42% 100%); } .kzc-hero--split .kzc-hero__image { clip-path: polygon(56% 0, 100% 0, 100% 100%, 42% 100%); } .kzc-hero--split .kzc-hero__text { max-width: 50%; } } @media (max-width: 768px) { /* Split stapelt: Foto oben mit eigener Diagonale, Text darunter. */ .kzc-hero--split { display: block; min-height: 0; } .kzc-hero--split .kzc-hero__blade { display: none; } .kzc-hero--split .kzc-hero__image { position: relative; inset: auto; width: 100%; height: 260px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 46px), 0 100%); } .kzc-hero--split .kzc-hero__inner { padding-block: var(--kzc-space-6) var(--kzc-space-7); } .kzc-hero--split .kzc-hero__text { max-width: 100%; } /* Vollbild: Diagonale + Wein-Linie flacher, Hero kompakter. */ .kzc-hero--fullwidth { --kzc-hero-cut: 36px; /* Unterseite: wie --plain unten keine harte Deckelung auf Mobil, langer Text wuerde sonst abgeschnitten. */ height: auto; } .kzc-home .kzc-hero--fullwidth { min-height: 480px; } /* Unterseite: ohne feste Hoehe fehlte oben jeder Abstand, die Eyebrow klebte an der Oberkante (Befund Staging 30.09.2026). Startseite bleibt mittig in ihrer min-height. */ body:not(.kzc-home) .kzc-hero--fullwidth { padding-top: var(--kzc-space-7); } /* Foto-Quelle ueber den Keil statt hinein: der Keil ist mobil so flach, dass die Zeile sonst durch die Weinrot-Linie laeuft. */ .kzc-hero--fullwidth .kzc-hero__credit { bottom: calc(var(--kzc-hero-cut) + var(--kzc-space-2)); } .kzc-hero__headline { font-size: clamp(2.125rem, 11vw, 2.875rem); } .kzc-hero__text-body { max-width: none; } .kzc-hero__buttons { flex-direction: column; align-items: stretch; } /* Seitenkopf: gleiche kompaktere Keil-Hoehe wie Vollbild (geteilte Variable, siehe .kzc-hero oben), Buttons bleiben Pillen im Zeilenumbruch statt gestapelt – das sind Sprungmarken, keine CTAs (Referenz KZC-Preise.css ".page-head .quick", kein Stack-Override dort). */ .kzc-hero--plain { /* Feste 480px (Desktop) auf Mobil zurueck zu min-height: bei schmaler Spalte wickelt Eyebrow/H1/Intro auf mehr Zeilen, eine harte Deckelung wuerde dort eher Text abschneiden statt nur die Box zu strecken. */ height: auto; min-height: 0; --kzc-hero-cut: 36px; padding-block: var(--kzc-space-6) calc(var(--kzc-hero-cut) + var(--kzc-space-6)); } .kzc-hero--plain .kzc-hero__buttons { flex-direction: row; flex-wrap: wrap; align-items: center; } /* Nur Sprungmarken (alle Buttons "dezent", z. B. Klettern & Halle mit 6 Bereichen, 01.10.2026): auch bei Vollbild/Split Pillen im Zeilenumbruch statt 6 gestapelter Vollbreiten-Buttons. */ .kzc-hero__buttons:not(:has(.kzc-hero__button:not(.kzc-hero__button--quiet))) { flex-direction: row; flex-wrap: wrap; align-items: center; } } @media (prefers-reduced-motion: reduce) { .kzc-hero__button { transition: none; } #header, #header.is-scrolled { transition: none; } } /* === kzc_cards – Karten mit Bild ================================== Bild-/Icon-Karten-Raster (Kurse, Angebote, USPs, Zielgruppen, Buchungsanlaesse). Vorbild design-ref KZC-Schritt5-Nav-Event.css Abschnitt M06 ".occ" (Anlass-Band "Ideen fuer deinen Besuch"). Sektions-Inhaltselement: KEIN eigener Zentrierungs-Wrapper, KEIN background-Feld. Steht zwischen kzc_section_start / kzc_section_stop, die .kzc-section/.kzc-section-inner (kzc-grid.css) Breite UND Hintergrund liefern (CLAUDE.md "Sektions-Wrapper vs. Vollbild- Elemente"). Grid-Breakpoints 768/1024 mobile-first wie kzc-grid.css (Rebuild 08.09.2026, weg von den alten 640/960). Ganze Karte klickbar: bei gesetztem Link deckt .kzc-cards__link per ::after die ganze Karte ab (ein echter , Titel bleibt reine Ueberschrift). Diagonalschnitt am Kartenbild nur bei aktivem Element-Feld "diagonal", Richtung alterniert per :nth-child, greift nur bei Fotos (nicht bei Icon-Karten). featured = weinrote Oberkante + weinroter Link (Referenz .occ.feat), sparsam. */ .kzc-cards { --kzc-cards-cut: 22px; padding-block: var(--kzc-space-8); } .kzc-cards__head { max-width: var(--kzc-w-prose); margin-bottom: var(--kzc-space-6); } .kzc-cards__headline { font-size: var(--kzc-fs-h2); font-weight: var(--kzc-fw-bold); line-height: var(--kzc-lh-snug); color: var(--kzc-petrol); margin: var(--kzc-space-2) 0 0; } .kzc-cards__intro { font-size: var(--kzc-fs-body); line-height: var(--kzc-lh-normal); color: var(--kzc-fg-mute); margin: var(--kzc-space-4) 0 0; } .kzc-cards__grid { display: grid; grid-template-columns: 1fr; gap: var(--kzc-space-5); } /* cols-6 = kompaktes Anlass-Band (Vorbild Wireframe v4 ".occ-grid"): viele schmale Karten, engerer Abstand. Stufen 2 -> 3 -> 6 (768 / 1024 / 1280px). */ .kzc-cards--cols-6 .kzc-cards__grid { gap: var(--kzc-space-4); } @media (min-width: 768px) { .kzc-cards--cols-2 .kzc-cards__grid, .kzc-cards--cols-3 .kzc-cards__grid, .kzc-cards--cols-4 .kzc-cards__grid, .kzc-cards--cols-6 .kzc-cards__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .kzc-cards--cols-3 .kzc-cards__grid { grid-template-columns: repeat(3, 1fr); } .kzc-cards--cols-4 .kzc-cards__grid { grid-template-columns: repeat(4, 1fr); } .kzc-cards--cols-6 .kzc-cards__grid { grid-template-columns: repeat(3, 1fr); } } /* 6 Spalten ab 1280px statt 1440px (Test 02.10.2026), damit gaengige Laptops das Band einreihig sehen. 1280 liegt bewusst ausserhalb der Projekt-Breakpoints (360/768/1024/1440). */ @media (min-width: 1280px) { .kzc-cards--cols-6 .kzc-cards__grid { grid-template-columns: repeat(6, 1fr); } } .kzc-cards__card { position: relative; display: flex; flex-direction: column; background-color: var(--kzc-bg); border: 1px solid var(--kzc-border); border-radius: var(--kzc-radius-md); box-shadow: var(--kzc-shadow-1); overflow: hidden; transition: transform var(--kzc-dur-fast) var(--kzc-ease-out), box-shadow var(--kzc-dur-fast) var(--kzc-ease-out); } .kzc-cards__card:hover { transform: translateY(-2px); box-shadow: var(--kzc-shadow-2); } /* Weinrote Oberkante (Dreiecks-Clip) statt eines vollen Rahmens. */ .kzc-cards__card--featured { border-color: transparent; box-shadow: var(--kzc-shadow-2); } .kzc-cards__card--featured::before { content: ""; position: absolute; inset: 0 0 auto; height: 7px; background: var(--kzc-wine); clip-path: polygon(0 0, 100% 0, 100% 38%, 0 100%); z-index: 3; pointer-events: none; } .kzc-cards__media { position: relative; overflow: hidden; } .kzc-cards__media picture { display: block; } .kzc-cards__image { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; } /* Diagonalschnitt: einseitig, alle Karten gleiche Richtung (wechselseitig war zu unruhig, Feedback 08.09.2026). Der Schnitt gibt den weissen Kartengrund frei und liest sich als schraege Unterkante. Nur bei Fotos. */ .kzc-cards--diagonal .kzc-cards__image { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--kzc-cards-cut))); } /* Icon-Karte (kein Foto): Icon auf ruhiger, leicht getoenter Flaeche. */ .kzc-cards__media--icon { display: grid; place-items: center; min-height: 140px; background-color: var(--kzc-bg-alt); } .kzc-cards__icon { width: 48px; height: 48px; color: var(--kzc-blue); } /* Badge – Pille oben links auf dem Bild. Farbe je badgeType, Text bei blauer Fuellung dunkel (WCAG AA). pointer-events: none, damit die klickbare Karte darunter nicht blockiert wird. */ .kzc-cards__badge { position: absolute; left: var(--kzc-space-3); top: var(--kzc-space-3); z-index: 2; display: inline-flex; align-items: center; gap: var(--kzc-space-1); padding: 5px 11px; border-radius: 999px; font-size: var(--kzc-fs-caption); font-weight: var(--kzc-fw-bold); letter-spacing: var(--kzc-tracking-wide); text-transform: uppercase; pointer-events: none; } .kzc-cards__badge--beliebt { background: var(--kzc-wine); color: #fff; } .kzc-cards__badge--hinweis { background: var(--kzc-success); color: #fff; } .kzc-cards__badge--info { background: var(--kzc-blue); color: var(--kzc-ink); } .kzc-cards__badge-icon { width: 13px; height: 13px; } .kzc-cards__body { display: flex; flex-direction: column; flex: 1; padding: var(--kzc-space-5) var(--kzc-space-5) var(--kzc-space-6); } .kzc-cards__title { font-size: var(--kzc-fs-h3); font-weight: var(--kzc-fw-bold); line-height: var(--kzc-lh-snug); color: var(--kzc-petrol); margin: 0 0 var(--kzc-space-2); } .kzc-cards__text { font-size: var(--kzc-fs-body-sm); line-height: var(--kzc-lh-normal); color: var(--kzc-fg); margin: 0; } .kzc-cards__link { display: inline-flex; align-items: center; gap: var(--kzc-space-2); margin-top: var(--kzc-space-4); align-self: flex-start; font-weight: var(--kzc-fw-semi); color: var(--kzc-link); text-decoration: none; } /* deckt die ganze Karte ab -> Karte ist anklickbar */ .kzc-cards__link::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* cols-6: kompakte Karten-Innenmasse wie im Wireframe v4 (".occ"): flaches Bild (~2:1), enges Padding, kleinere Schrift, kleinerer Badge. Greift erst, wenn das Raster wirklich 6-spaltig laeuft (>= 1280px), darunter sind die Karten normal breit. cols-6-gescopt, 3/4-Spalten bleiben unangetastet. */ @media (min-width: 1280px) { .kzc-cards--cols-6 .kzc-cards__image { aspect-ratio: 2 / 1; } .kzc-cards--cols-6 .kzc-cards--diagonal .kzc-cards__image, .kzc-cards--diagonal.kzc-cards--cols-6 .kzc-cards__image { --kzc-cards-cut: 14px; } .kzc-cards--cols-6 .kzc-cards__badge { left: var(--kzc-space-2); top: var(--kzc-space-2); padding: 3px 8px; font-size: 0.6875rem; /* 11px */ } .kzc-cards--cols-6 .kzc-cards__body { padding: var(--kzc-space-3); } .kzc-cards--cols-6 .kzc-cards__title { font-size: var(--kzc-fs-body-sm); margin-bottom: var(--kzc-space-1); } .kzc-cards--cols-6 .kzc-cards__text { font-size: var(--kzc-fs-caption); line-height: var(--kzc-lh-snug); } /* Link an die Kartenunterkante (gleiche Hoehe ueber alle Karten, auch bei unterschiedlich langem Text) wie im Wireframe v4. */ .kzc-cards--cols-6 .kzc-cards__link { margin-top: auto; padding-top: var(--kzc-space-3); font-size: var(--kzc-fs-caption); } } .kzc-cards__card--featured .kzc-cards__link { color: var(--kzc-wine); } .kzc-cards__link:hover, .kzc-cards__link:focus-visible { text-decoration: underline; } .kzc-cards__link-icon { transition: transform var(--kzc-dur-base) var(--kzc-ease-out); } .kzc-cards__link:hover .kzc-cards__link-icon { transform: translateX(3px); } @media (prefers-reduced-motion: reduce) { .kzc-cards__card, .kzc-cards__link-icon { transition: none; } } /* === kzc_utility_bar – Utility-Zeile (RSCE) ========================== Seitenuebergreifende Petrol-Leiste ueber dem Header, gepflegt im Include-Artikel (siehe CLAUDE.md Abschnitt 8). Zweistufig wie kzc-section, aber eigenstaendig: kzc-utility-bar traegt den Hintergrund fullwidth, kzc-utility-bar__inner zentriert auf --kzc-container-max (kzc-grid.css), kein Umweg ueber section_start/stop. Ab 1024px ausgeblendet, wandert dort ins Burgermenue (noch nicht gebaut, siehe CLAUDE.md). Geometrie/Werte 1:1 aus design-ref KZC-Schritt5-Nav-Event.css (.util / .util-left / .util-right). */ .kzc-utility-bar { background-color: var(--kzc-petrol); color: rgba(255, 255, 255, 0.9); font-size: var(--kzc-fs-caption); visibility: visible; transition: visibility 0s linear 0s; } /* Befund 03.09.2026, Teil 4: max-height/opacity auf der Utility-Zeile selbst war noch immer nicht flackerfrei, weil eine Hoehenaenderung IMMER einen Layout-Reflow des gesamten gestickten #header auslöst (auf jedem Animationsframe neu, gemessen per MutationObserver + Pixel-Sampling in einem headless Chromium, siehe Chat). Jetzt animiert stattdessen NUR noch #header selbst per transform (Compositor-Property, kein Reflow) um exakt die Hoehe der Utility-Zeile nach oben – die Zeile behaelt dabei ihre normale Boxhoehe die ganze Zeit, sie wird nur aus dem sichtbaren Bereich herausgeschoben, kein einziges Layout-Recalc mehr waehrend der Animation. Hoehe kommt aus --kzc-utility-bar-h, von kzc-chrome.js einmalig gemessen (getBoundingClientRect) und bei Resize aktualisiert, nicht hart kodiert (Zeile kann durch flex-wrap umbrechen). visibility bleibt fuer Tab-Reihenfolge/Screenreader zustaendig (verzoegert bis die Transform-Animation fertig ist), hat selbst keinen Layout-Einfluss. */ #header.is-scrolled .kzc-utility-bar { visibility: hidden; transition: visibility 0s linear var(--kzc-dur-base); } .kzc-utility-bar__inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--kzc-space-2); min-height: 40px; max-width: var(--kzc-container-max); margin-inline: auto; padding-inline: var(--kzc-section-padding-x); padding-block: var(--kzc-space-1); } .kzc-utility-bar__contact { display: flex; align-items: center; flex-wrap: wrap; gap: var(--kzc-space-1) var(--kzc-space-4); } /* Adresse + Telefon kommen seit 30.09.2026 aus dem eingebundenen Element "KZC Kontaktdaten", Optik siehe Abschnitt kzc_contact (Kontext .kzc-utility-bar). */ .kzc-utility-bar__links { display: flex; align-items: center; flex-wrap: wrap; } .kzc-utility-bar__link { color: rgba(255, 255, 255, 0.82); font-weight: var(--kzc-fw-medium); } .kzc-utility-bar__link { padding-inline: var(--kzc-space-4); border-left: 1px solid rgba(255, 255, 255, 0.16); } .kzc-utility-bar__link:first-child { border-left: none; padding-inline-start: 0; } .kzc-utility-bar__link:hover, .kzc-utility-bar__link:focus-visible { color: var(--kzc-white); text-decoration: none; } /* Weisser Ring statt globalem Blau-Ring, gleiche Loesung wie .kzc-hero__button:focus-visible auf dunklem Grund. */ .kzc-utility-bar__link:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85); border-radius: var(--kzc-radius-xs); } /* === kzc_logo – Marken-Lockup (RSCE) ================================= Icon-Mark + zweizeilige Wortmarke, siehe rsce_kzc_logo.html.twig. Platzhalterform (Diamant) 1:1 aus design-ref KZC-Schritt5-Nav-Event.css (.brand .peak). Letter-Spacing bewusst weggelassen: design-ref nutzt 0.02em, dafür existiert kein Token (nur -tight/-wide), siehe CLAUDE.md CSS-Regel "nur echte Tokens". */ .kzc-logo { display: inline-flex; align-items: center; gap: var(--kzc-space-3); text-decoration: none; flex: none; } .kzc-logo:hover { text-decoration: none; } /* Nur Hoehe fixieren, Breite automatisch (Test-Pass 03.09.2026): fixe 30x23px (Seitenverhaeltnis 1.30) stauchten das tatsaechlich hochformatige Logo (real ~39x46, 0.85) – width:auto skaliert seitenverhaeltnis-treu zur fixen Hoehe, unabhaengig vom genauen Format der Bilddatei (relevant, wenn spaeter das PNG-Provisorium durchs echte SVG ersetzt wird). */ .kzc-logo__mark { flex: none; width: auto; height: 23px; } /* Reines CSS-Shape ohne eigenes Bild-Seitenverhaeltnis, braucht anders als .kzc-logo__mark oben eine feste Breite (sonst 0, leeres Block-Element). */ .kzc-logo__mark--placeholder { display: block; width: 30px; background-color: var(--kzc-blue); clip-path: polygon(0 100%, 50% 0, 70% 40%, 85% 18%, 100% 100%); } .kzc-logo__word { display: flex; flex-direction: column; font-weight: var(--kzc-fw-xbold); font-size: var(--kzc-fs-body-sm); line-height: 1; color: var(--kzc-petrol); text-transform: uppercase; } .kzc-logo__word-line { display: block; } /* Dunkel-Override fuer die zweite kzc_logo-Instanz im Footer (petrol- dunkler Grund statt Header-Weiss). Gescoped auf #footer statt einer Footer-internen Klasse, damit das unabhaengig von der genauen Grid-Struktur greift, egal wo der Redakteur die Instanz platziert. */ #footer .kzc-logo__word { color: var(--kzc-white); } /* === kzc_cta_group – CTA-Gruppe (RSCE) ================================ Primär "Jetzt buchen" (Weinrot) + optionaler Ghost "Einsteiger" (Petrol-Text, grauer Rahmen). Farben/Geometrie des Ghost-Buttons 1:1 aus design-ref KZC-Schritt5-Nav-Event.css (.head-cta .ghost), auch wenn die dortige HTML-Kundenansicht den Button noch nicht zeigt (siehe CLAUDE.md Abschnitt "Navigation und Header", mit Kunde abgestimmt). Mobil (<1024px, Entscheidung vom 02.09.2026): die Header-Instanz der CTA-Gruppe wird ausgeblendet (kein fixierter Buchen-Balken mehr, siehe Media-Query weiter unten). Buchen auf Mobil läuft über den Hero-Button und den Burger-Drawer. Die Drawer-Instanz (zweites Rendering derselben RSCE per Insert-Tag) ist eigener Abschnitt ".mobile_menu .kzc-cta-group" weiter unten, dort gestapelt mit beiden Buttons. */ .kzc-cta-group { display: flex; align-items: center; gap: var(--kzc-space-3); } .kzc-cta-group__button { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; font-weight: var(--kzc-fw-bold); font-size: var(--kzc-fs-body-sm); padding: var(--kzc-space-3) var(--kzc-space-4); border-radius: var(--kzc-radius-md); border: 1.5px solid transparent; text-decoration: none; white-space: nowrap; transition: transform var(--kzc-dur-fast) var(--kzc-ease-out), background-color var(--kzc-dur-base) var(--kzc-ease-out), border-color var(--kzc-dur-base) var(--kzc-ease-out); } .kzc-cta-group__button:hover { text-decoration: none; transform: translateY(-1px); } .kzc-cta-group__button:focus-visible { outline: none; box-shadow: var(--kzc-ring-focus); } .kzc-cta-group__button--primary { background-color: var(--kzc-cta); color: var(--kzc-cta-fg); } .kzc-cta-group__button--primary:hover { background-color: var(--kzc-wine-hover); color: var(--kzc-cta-fg); } .kzc-cta-group__button--ghost { background-color: transparent; color: var(--kzc-petrol); border-color: var(--kzc-border); } .kzc-cta-group__button--ghost:hover { background-color: var(--kzc-bg-alt); color: var(--kzc-petrol); } /* Mobil (<1024px, Entscheidung 02.09.2026): die Header-CTA-Gruppe wird NICHT angezeigt. Kein fixierter "Jetzt buchen"-Balken am Bildschirm- unterrand mehr (vorher hier), er duplizierte im sichtbaren Bereich den Hero-CTA und die "immer sichtbar"-Priorität war ohnehin inkonsequent (Einsteiger-Ghost liegt auf Mobil nur im Drawer). Buchen auf Mobil: Hero-Button + Drawer. Der Drawer rendert dieselbe RSCE-Instanz noch einmal (siehe .mobile_menu .kzc-cta-group weiter unten), die ist von dieser Regel ausgenommen (kein direktes Kind von .kzc-header__inner, und das Plugin hängt den Drawer ohnehin nach um). */ @media (max-width: 1023px) { .kzc-header__inner > .kzc-cta-group { display: none; } } @media (max-width: 1023px) { .kzc-utility-bar { display: none; } } /* === kzc-header – Site-Chrome-Hauptzeile (FE-Modul-Sandwich) ========== Kein eigenes RSCE: drei native Contao-Module in der Layout-Modulspalte "header" bilden den Rahmen, siehe Chat-Absprache vom 28.08.2026 zu CLAUDE.md Abschnitt "Navigation und Header": 1. HTML-Modul "Header Begin" ->
2. HTML-Modul "Include Header Navi" ->
+ Insert-Tag auf den Include-Artikel (Artikel enthält rsce_kzc_logo, Inhaltselement "Modul einfügen" (Navigation, Kern-Modul), rsce_kzc_cta_group) 3. HTML-Modul "Header End" ->
Korrektur nach Live-Check im gerenderten HTML (28.08.2026): der Include-Artikel wird per Insert-Tag eingebunden, nicht über ein echtes Artikel-Modul, deshalb fehlt das sonst übliche .mod_article-Div (siehe .kzc-cards/.kzc-hero, die in einem echten Artikel stecken) als zweite Ebene. .kzc-header__inner übernimmt jetzt genau diese Rolle, muss aber im HTML-Modul "Include Header Navi" per Hand mit um den Insert-Tag gelegt werden (reines Textfeld, keine Datei) – ohne dieses Div wäre die Zweistufigkeit (voller Hintergrund außen, 1320px-Zeile innen) mit einer einzigen Klasse nicht möglich, siehe .kzc-section/.kzc-section- inner als Vorbild. Geometrie 1:1 aus design-ref KZC-Schritt5-Nav- Event.css (header.site / .wrap). Navigation und Burgermenü sind noch nicht gestylt, hier deshalb nur der Rahmen plus die zwei fertigen Kinder (Logo, CTA-Gruppe) als Referenz. Sticky: sitzt auf #header (Contao-Layoutsektion, direktes Kind von #wrapper), NICHT auf .kzc-header. Ein sticky-Element kann seinen Elternbereich nicht verlassen; .kzc-header steckt in header#header > .inside, das nur inhaltshoch ist -> praktisch kein Klebe-Weg, sieht aus wie nicht sticky. #header umschliesst dagegen die ganze Seite (header + Content + Footer). Die Utility-Zeile klebt dadurch mit und wird ab dem ersten Scroll ausgeblendet (Regel unten): am Seitenanfang zwei Baender, beim Scrollen nur die Hauptzeile. Referenz-Pendant: KZC-Schritt5-Nav-Event.css header.site (dort liegt .util ausserhalb des sticky-Headers, bei uns steckt beides in der einen Contao-Header-Sektion). Klasse .is-scrolled setzt kzc-chrome.js (scrollY > 8) auf #header. */ #header { position: sticky; top: 0; z-index: 60; transform: translateY(0); transition: transform var(--kzc-dur-base) var(--kzc-ease-out); will-change: transform; } /* --kzc-utility-bar-h kommt von kzc-chrome.js (0px unter 1024px, da die Zeile dort per display:none ohnehin keine Hoehe hat). Verschiebt den ganzen gestickten Header exakt um die Zeilenhoehe nach oben, siehe Kommentar bei .kzc-utility-bar oben. */ #header.is-scrolled { transform: translateY(calc(-1 * var(--kzc-utility-bar-h, 0px))); } .kzc-header { width: 100%; background-color: var(--kzc-white); border-bottom: 1px solid var(--kzc-border); transition: background-color var(--kzc-dur-base) var(--kzc-ease-out), box-shadow var(--kzc-dur-base) var(--kzc-ease-out); } #header.is-scrolled .kzc-header { background-color: rgba(255, 255, 255, 0.92); box-shadow: var(--kzc-shadow-1); } /* backdrop-filter komplett gestrichen (Befund 03.09.2026, Teil 3). Per MutationObserver + Pixel-Sampling in einem headless Chromium (siehe Chat) verifiziert: die .is-scrolled-Klasse kippt sauber genau einmal pro Scroll-Richtung, kein Nachzittern, die Utility-Zeile blendet messbar monoton aus/ein, keine Logikfehler mehr. Das gemeldete Rest-Flackern trat trotzdem weiter auf und ist damit kein Zustands-, sondern ein Rendering-Kostenproblem, das ein headless/Software- Renderer nicht zeigt: backdrop-filter erzwingt einen eigenen Compositing-Layer, der bei jedem Animationsframe der gleichzeitig hoehenaendernden Utility-Zeile (Layout-Reflow) neu aufgebaut werden muss – auf echter GPU/echtem Treiber sichtbar ruckelig, in der automatisierten Messung nicht reproduzierbar. Blur war ohnehin nur ein Ab-Desktop-Kosmetik-Layer (siehe alte Kommentar-Historie), kein Kernbestandteil des Scroll-Zustands – gestrichen statt weiter Transitions-Feintuning zu betreiben. Scrolled-Zustand bleibt uebers transluzente Weiss + Schatten oben sichtbar. */ .kzc-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--kzc-space-4); min-height: 74px; max-width: var(--kzc-container-max); margin-inline: auto; padding-inline: var(--kzc-section-padding-x); } /* === kzc-nav – Hauptnavigation, Desktop-Instanz (Kern-Modul) ========== Kein eigenes Template: Contaos Standard-Navigationsmodul liefert schon stabile Klassen (level_1, active am aktiven , trail an den Vorfahren des aktiven Pfads, sibling an Geschwistern, submenu am
  • mit Unterseiten), verifiziert in vendor/contao/core-bundle gegen compileNavigationRow. .kzc-nav kommt ueber das Modul-eigene CSS-Klasse-Feld (tl_module) an den Standard-