/* ============================================================ plate_partials — Organisms/PageHero Seitenkopf: Medium + Abdunklung + Textblock. Ein Vertrag für alle Kopf-Varianten eines Projekts, damit Freiraum, Inhaltskante und Schichtung nicht pro Implementierung neu erfunden (und einzeln repariert) werden. WARUM GENERISCH: In einem Projekt entstehen erfahrungsgemäß mehrere Köpfe nebeneinander — aus Seiteneigenschaften, als ContentBlock, pro Generikum. Sie sehen gleich aus, driften aber auseinander, weil jede ihre eigene Rechnung mitbringt. Hier steht die Rechnung einmal. HARTE REGELN (Workspace-CLAUDE.md, Frame-System): - KEIN Sektions-Hintergrund und KEIN Sektions-Padding als Optik-Entscheidung. Das `padding-top` unten ist KEINE Optik, sondern der reservierte Freiraum unter einem fixierten Seiten-Header; ohne ihn liegt die oberste Kopfzeile unsichtbar darunter. - KEINE eigene Inhaltsbreite. `__inner` bildet die Box des generischen `.frame-container` NACH — aus denselben Quellen (`--frame-width-xxl`, `--bs-gap-default`) —, weil der Kopf außerhalb des Frame-Systems liegt und den Container nicht benutzen kann. Eine zweite Rechnung an dieser Stelle ist genau der Fehler, den dieser Vertrag verhindern soll. - KEINE Heading-Typografie (font-family/-size an h*). Die kommt aus dem Theme bzw. den plate_bootstrap-Settings-Slots (`h1-font-size` …). - Farben nur über `--bs-*` bzw. die `--pl-pagehero-*`-Slots unten. THEMING: Ein Theme setzt idealerweise NUR die Slots — keine Eigenschaften. ============================================================ */ /* Slot-VORGABEN in :where() — Spezifitaet 0. Damit gewinnt jede Theme-Angabe, ganz gleich in welcher Reihenfolge die Dateien laden. Wuerden die Vorgaben in `.pl-pagehero` stehen (0,1,0), haetten Theme-Werte auf `.lr-pghero` dieselbe Staerke und die Ladereihenfolge entschiede — eine Falle, die genau dann zuschlaegt, wenn jemand die Asset-Prioritaet aendert. */ :where(.pl-pagehero) { /* ---- Slots: das setzt das Theme ---- */ /* Höhe des fixierten Seiten-Headers. 0 = kein fixierter Header. */ --pl-pagehero-header-h: 0px; /* Zusätzliche Luft zwischen Header-Unterkante und erster Kopfzeile. */ --pl-pagehero-header-gap: 3rem; --pl-pagehero-min-height: 46vh; --pl-pagehero-pad-bottom: clamp(2.6rem, 6vh, 5rem); /* HELL als Vorgabe, NICHT --bs-body-color: Ein Kopf MIT Medium traegt eine Abdunklung darueber; --bs-body-color ist mit geladenem plate_bootstrap dunkel, das ergaebe dunkle Schrift auf dunklem Grund, solange kein Theme den Slot setzt — und der frueher hier stehende #fff-Fallback haette nie gegriffen, weil --bs-body-color ja definiert IST. Der bildlose Kopf dreht das unten wieder auf `inherit`. */ --pl-pagehero-color: #fff; --pl-pagehero-accent: var(--bs-primary, currentColor); /* Abdunklung über dem Medium. Auf hellen Motiven entscheidet sie über die Lesbarkeit — Kontrast prüfen, nicht schätzen. */ --pl-pagehero-scrim: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.25) 40%, rgba(0, 0, 0, 0.8) 100%); /* Zeilenlängen: gehören an die Text-Elemente, NICHT an den Wrapper. */ --pl-pagehero-title-measure: 18ch; --pl-pagehero-text-measure: 76ch; /* Inhaltsbreite. Default = die des generischen .frame-container, damit der Kopf mit dem Seiteninhalt fluchtet — das ist der Normalfall und sollte nicht ohne Grund verlassen werden. Ein Projekt, das einen bewusst breiteren Kopf will (z. B. auf Höhe eines breiteren Seiten-Headers), drückt das HIER aus statt den Vertrag zu umgehen. Solche Ausnahmen meldet `hero-audit` weiterhin als Abweichung — zu Recht: sie gehören dokumentiert. */ --pl-pagehero-inner-maxw: var(--frame-width-xxl, 1380px); /* Seitliches Innen-Padding. Default = das des .frame-container. Muss ZUSAMMEN mit --pl-pagehero-inner-maxw gedacht werden: die linke Kante ist die Summe aus beiden. Wer nur eines der beiden verstellt, verschiebt den Kopf gegen den Inhalt, ohne es zu merken. */ --pl-pagehero-inner-pad: var(--bs-gap-default, 1.5rem); } /* ---- Struktur: gehoert dem Vertrag, nicht dem Theme ---- */ .pl-pagehero { position: relative; display: flex; align-items: flex-end; height: var(--pl-pagehero-height); min-height: var(--pl-pagehero-min-height); /* Freiraum für den fixierten Header. Die Rechnung steht NUR hier. */ padding-top: calc(var(--pl-pagehero-header-h) + var(--pl-pagehero-header-gap)); padding-bottom: var(--pl-pagehero-pad-bottom); overflow: hidden; /* Eigener Stapelkontext: die negativen z-index von Medium und Abdunklung bleiben dadurch INNERHALB des Kopfes und rutschen nicht hinter die Seite. */ isolation: isolate; color: var(--pl-pagehero-color); } .pl-pagehero__media { position: absolute; inset: 0; z-index: -2; } .pl-pagehero__media img, .pl-pagehero__media video { width: 100%; height: 100%; object-fit: cover; display: block; } .pl-pagehero__scrim { position: absolute; inset: 0; z-index: -1; background: var(--pl-pagehero-scrim); } /* Bildet .frame-container nach — siehe Kopfkommentar. Fallbacks, damit das Partial auch ohne plate_bootstrap brauchbar rendert. */ .pl-pagehero__inner { position: relative; width: 100%; max-width: var(--pl-pagehero-inner-maxw); margin-inline: auto; padding-inline: var(--pl-pagehero-inner-pad); } .pl-pagehero__title { max-width: var(--pl-pagehero-title-measure); margin: 0.6rem 0 0; } .pl-pagehero__meta { margin: 1.1rem 0 0; } .pl-pagehero__abstract { max-width: var(--pl-pagehero-text-measure); margin: 1.4rem 0 0; } /* Ohne Medium ist der Kopf eine gewöhnliche helle Sektion: keine Abdunklung, keine Mindesthöhe, Textfarbe erbt vom Dokument. */ /* Der bildlose Kopf ist eine gewoehnliche helle Sektion. SPEZIFITAET MIT ABSICHT (0,2,0), nicht `:where()`: Die uebrigen Vorgaben oben stehen bei 0, damit Theme-Werte sie ueberschreiben. Stuende diese Regel ebenfalls bei 0, wuerde ein pauschales `--pl-pagehero-color: #fff` auf der Block-Klasse des Themes (0,1,0) AUCH hier gewinnen — weiss auf weiss. Zwei Klassen schlagen eine; wer den bildlosen Kopf trotzdem umfaerben will, muss ihn ausdruecklich adressieren. */ .pl-pagehero.pl-pagehero--nomedia { --pl-pagehero-min-height: 0; --pl-pagehero-color: inherit; } .pl-pagehero--nomedia .pl-pagehero__scrim { display: none; } /* ============================================================ Layout-Variante `--split`: Medium und Textflaeche NEBENEINANDER ------------------------------------------------------------ Warum es diese Variante gibt: Beim Vollflaechen-Kopf liegt das Medium als Hintergrund und wird auf die Kopfhoehe zugeschnitten — bei 16:9-Material schneidet das zuverlaessig Kopf oder Fuss ab, und der Text braucht eine Abdunklung, die das Motiv truebt. Hier bekommt das Medium sein EIGENES Seitenverhaeltnis (Vorgabe 16:9, also kein Beschnitt, wenn das Material so geliefert wird) und der Text eine ruhige Farbflaeche daneben. Kein eigenes Markup noetig: dieselben drei Kinder wie sonst, nur anders gesetzt — `__media` wird vom Hintergrund zum Rasterfeld, `__scrim` entfaellt (es gibt nichts abzudunkeln), `__inner` wird zur Farbflaeche. ACHTUNG Kopf-Freiraum: Hier steht `header-gap` auf 0, der Freiraum ist also exakt die Header-Hoehe. Das Medium schliesst damit buendig an einen deckenden fixierten Header an. Bei einem TRANSPARENTEN Header muss das Theme `--pl-pagehero-header-gap` wieder anheben, sonst laeuft der Header ueber das Bild. Die Flucht zum Seiteninhalt gilt hier NICHT: Der Titel sitzt bewusst in der rechten Flaeche. `hero-audit` kennt die Variante und prueft sie deshalb nur auf Freiraum und Typografie. ============================================================ */ /* SPEZIFITAET MIT ABSICHT (0,2,0) — wie bei `--nomedia`, aus demselben Grund: Die allgemeinen Vorgaben oben stehen in `:where()` (0), damit Theme-Werte sie ueberschreiben koennen. Eine Layout-Variante ist aber KEINE Vorgabe, sondern eine Zustandsregel: Sie muss den Theme-Wert schlagen, sonst kippt das Layout. Konkret passiert: Das Theme setzt `--pl-pagehero-header-gap: 50px` fuer alle seine Koepfe (0,1,0). Stand die 0 der Split-Variante in `:where()`, gewann die 50 — und zwischen Header und Bild klaffte genau diese Luecke. */ .pl-pagehero.pl-pagehero--split { --pl-pagehero-min-height: 0; --pl-pagehero-header-gap: 0px; /* Seitenverhaeltnis des Mediums. 16/9 = das ueblich gelieferte Format. */ --pl-pagehero-split-ratio: 16 / 9; /* Breite der Medienspalte. Der Rest ist Farbflaeche. */ --pl-pagehero-split-media: 63%; --pl-pagehero-panel-bg: var(--bs-secondary-bg, #2b2b2b); --pl-pagehero-panel-pad: clamp(1.8rem, 3.4vw, 4rem); } .pl-pagehero--split { display: grid; grid-template-columns: var(--pl-pagehero-split-media) 1fr; align-items: stretch; padding-bottom: 0; } .pl-pagehero--split .pl-pagehero__media { position: static; z-index: auto; aspect-ratio: var(--pl-pagehero-split-ratio); } /* Nichts abzudunkeln — der Text liegt daneben, nicht darauf. */ .pl-pagehero--split .pl-pagehero__scrim { display: none; } .pl-pagehero--split .pl-pagehero__inner { /* KEINE Frame-Box hier: die Flaeche fuellt ihre Rasterspalte. Die Inhaltskante des Kopfes ist in dieser Variante die Panel-Innenkante. */ max-width: none; margin-inline: 0; padding: var(--pl-pagehero-panel-pad); background: var(--pl-pagehero-panel-bg); display: flex; flex-direction: column; justify-content: center; } /* Einspaltig, sobald nebeneinander zu schmal wird: Bild oben, Flaeche darunter. */ @media (max-width: 62rem) { .pl-pagehero--split { grid-template-columns: 1fr; } } /* ---- Schalter fuer die Bewegung (WCAG 2.2.2) ---- Sitzt in der unteren Ecke des Mediums, nicht im Textblock: Er gehoert zum Video, nicht zum Inhalt. Bewusst zurueckhaltend — er soll auffindbar sein, ohne den Kopf zu dominieren. Farben und Groesse sind Slots. `hidden` bleibt wirksam: ohne JavaScript laeuft kein Video, dann darf auch kein Schalter erscheinen. */ .pl-pagehero__motion { --pl-pagehero-motion-size: 2.5rem; --pl-pagehero-motion-bg: rgba(0, 0, 0, 0.45); --pl-pagehero-motion-color: #fff; --pl-pagehero-motion-inset: 1rem; position: absolute; z-index: 2; inset-block-end: var(--pl-pagehero-motion-inset); inset-inline-end: var(--pl-pagehero-motion-inset); inline-size: var(--pl-pagehero-motion-size); block-size: var(--pl-pagehero-motion-size); display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: var(--pl-pagehero-motion-bg); color: var(--pl-pagehero-motion-color); cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .pl-pagehero__motion[hidden] { display: none; } /* Symbol per CSS, damit kein Icon-Satz noetig ist: Dreieck = starten, zwei Balken = anhalten. */ .pl-pagehero__motion-icon { inline-size: 0.75rem; block-size: 0.75rem; background: currentColor; clip-path: polygon(20% 0, 100% 50%, 20% 100%); } .pl-pagehero__motion.is-playing .pl-pagehero__motion-icon { clip-path: polygon(0 0, 32% 0, 32% 100%, 0 100%, 0 0, 68% 0, 100% 0, 100% 100%, 68% 100%, 68% 0); } /* In der Split-Variante gehoert der Schalter an die Ecke des BILDES, nicht an die des ganzen Kopfes — sonst laege er auf der Farbflaeche. */ .pl-pagehero--split .pl-pagehero__media { position: relative; } .pl-pagehero--split .pl-pagehero__motion { inset-block-end: var(--pl-pagehero-motion-inset); inset-inline-end: auto; inset-inline-start: var(--pl-pagehero-motion-inset); }