/* Clarity – Seitenkopf (draggo_clarity_pagehead)
   Der globale Draggo-Header liegt absolut über dem Kopf (Desktop ca. 158 px, Mobil ca. 166 px hoch),
   deshalb beginnt der Inhalt erst nach 190–200 px. */
.cl-pagehead.cl-sec { display: flex; flex-direction: column; justify-content: flex-end; box-sizing: border-box; min-height: 520px; padding: 200px 0 80px; }
.cl-pagehead__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: #010317; }
.cl-pagehead__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--clph-pos, center); background-size: cover; background-position: var(--clph-pos, center); background-repeat: no-repeat; }
.cl-pagehead__img--fixed { background-attachment: fixed; }
/* Kein Verlauf ueber dem Kopfbild (Wunsch des Nutzers) */
/* Ohne Abdunklung braucht der weisse Text auf hellen Bildern Halt: dezenter Schatten statt Flaeche */
.cl-pagehead .cl-pagehead__title { text-shadow: 0 2px 18px rgba(1, 3, 23, .55), 0 1px 3px rgba(1, 3, 23, .45); }
.cl-pagehead .cl-pagehead__kicker { text-shadow: 0 1px 10px rgba(1, 3, 23, .5); }
.cl-pagehead .cl-pagehead__crumbs { text-shadow: 0 1px 8px rgba(1, 3, 23, .6); }
.cl-pagehead__yt { position: absolute; inset: 0; overflow: hidden; pointer-events: none; container-type: size; }
.cl-pagehead__yt iframe { position: absolute; top: 50%; left: 50%; width: max(100cqw, 177.78cqh); height: max(100cqh, 56.25cqw); border: 0; transform: translate(-50%, -50%); }

/* Clarity-Gestaltung im Code (vorher ins Bild eingebaut): der Kunde tauscht nur noch reine Fotos.
   Verlauf: Petrol flach bis ca. 42 %, bis ca. 68 % ausgeblendet – ausgemessen an Header-Unternehmen-1080p.
   Schräge: rotes Dreieck (#e10419) unter weißer Fläche, SVG streckt sich mit der Breite (Winkel bleiben wie im Original),
   Geometrie aus dem 1920×810-Original (Kante 587→728 px, roter Keil 634→Spitze bei x≈780). */
.cl-pagehead { --clph-edge-h: clamp(52px, 11.72vw, 240px); }
.cl-pagehead__shade { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, #1b2b2e 0%, #1b2b2e 42%, rgba(27, 43, 46, .78) 51%, rgba(27, 43, 46, .35) 59%, rgba(27, 43, 46, 0) 68%); }
.cl-pagehead__edge { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 0; height: calc(var(--clph-edge-h) + 1px); pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 225' preserveAspectRatio='none'%3E%3Cpolygon points='0,49 820,88 0,160' fill='%23e10419'/%3E%3Cpolygon points='0,143 1920,2 1920,225 0,225' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%; }
.cl-pagehead--edge:not(.cl-pagehead--split).cl-sec { padding-bottom: calc(var(--clph-edge-h) + 36px); }
.cl-pagehead--edge.cl-pagehead--hoch.cl-sec { padding-bottom: calc(var(--clph-edge-h) + 110px); }
.cl-pagehead--edge .cl-pagehead__down { bottom: calc(var(--clph-edge-h) + 20px); }
.cl-pagehead--edge.cl-pagehead--split.cl-sec::after { content: none; }
.cl-pagehead--edge.cl-pagehead--split.cl-sec { padding-bottom: calc(var(--clph-edge-h) + 36px); }
/* Mit Schräge etwas höher, damit über der Kante genug Foto bleibt (Original-Seitenverhältnis ca. 42 % der Breite) */
.cl-pagehead--edge:is(.cl-pagehead--bild, .cl-pagehead--video, .cl-pagehead--split).cl-sec { min-height: clamp(520px, 40vw, 760px); }

/* Ken-Burns-Zoom des Bildes (nicht bei fixiertem Hintergrund) */
@keyframes clph-kenburns { from { transform: scale(1); } to { transform: scale(1.06); } }
.cl-pagehead[data-cl-anim] .cl-pagehead__img:not(.cl-pagehead__img--fixed) { animation: clph-kenburns 12s ease-out both; }

.cl-pagehead__inner { position: relative; }
.cl-pagehead__content { max-width: 1100px; }
.cl-pagehead .cl-pagehead__kicker { margin: 0 0 12px; color: #e10419; }
.cl-pagehead .cl-pagehead__title { margin: 0; font-family: var(--cl-display); font-size: 56px; line-height: 1.1; font-weight: 500; color: #fff; }
.cl-pagehead .cl-pagehead__title :is(strong, b) { font-weight: 700; }
/* Kicker, Titel, Brotkrumen gleiten gestaffelt von links ein */
.cl-pagehead[data-cl-anim] .cl-anim:not(.is-in) { transform: translateX(-40px); }

.cl-pagehead__crumbs { margin-top: 22px; }
/* optionale Einleitung + Button (z. B. Landingpages) */
div p.cl-pagehead__lead { max-width: 640px; margin: 20px 0 0; color: #fff; font-family: var(--cl-sans); font-size: 19px; line-height: 1.6; font-weight: 400; text-shadow: 0 1px 10px rgba(1, 3, 23, .55); }
.cl-pagehead .cl-pagehead__btn { margin-top: 30px; }
.cl-pagehead__crumbs nav { margin: 0; padding: 0; }
.cl-pagehead__crumbs ul { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.cl-pagehead__crumbs li { margin: 0; padding: 0; font-family: var(--cl-sans); font-size: 16px; line-height: 26px; font-weight: 400; color: rgba(255, 255, 255, .8); }
.cl-pagehead__crumbs li + li::before { content: "\00bb"; margin: 0 8px; color: #e10419; }
.cl-pagehead__crumbs a { color: #fff; text-decoration: none; transition: color .3s; }
.cl-pagehead__crumbs a:hover, .cl-pagehead__crumbs a:focus-visible { color: #e10419; }
.cl-pagehead__crumbs :is(li.active, [aria-current]) { color: #fff; font-weight: 600; }

/* hoch: 80 % Bildschirmhöhe + Scroll-Pfeil */
.cl-pagehead--hoch.cl-sec { min-height: max(80vh, 600px); padding-bottom: 130px; }
.cl-pagehead__down { position: absolute; left: 50%; bottom: 36px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-left: -26px; border: 2px solid rgba(255, 255, 255, .6); border-radius: 50%; color: #fff; box-sizing: border-box; transition: background-color .3s, border-color .3s, transform .3s; }
.cl-pagehead__down svg { display: block; animation: clph-bounce 2s ease-in-out infinite; }
.cl-pagehead__down:hover, .cl-pagehead__down:focus-visible { background: #e10419; border-color: #e10419; color: #fff; transform: translateY(-2px); }
.cl-pagehead__end { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; }
@keyframes clph-bounce { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(4px); } }

/* kompakt: ohne Bild, blasses Titel-Wasserzeichen */
.cl-pagehead--kompakt.cl-sec { min-height: 340px; padding: 190px 0 40px; }
.cl-pagehead__mark { position: absolute; right: -.03em; bottom: -.22em; z-index: -1; font-family: var(--cl-display); font-size: 240px; line-height: 1; font-weight: 700; color: rgba(255, 255, 255, .12); white-space: nowrap; pointer-events: none; user-select: none; }

/* split: Text links auf Nachtblau, Bild rechts randabfallend mit schräger Kante, roter Balken unten */
.cl-pagehead--split .cl-pagehead__media { left: 50%; clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%); }

.cl-pagehead--split .cl-pagehead__content { max-width: calc(50% - 60px); }
.cl-pagehead--split.cl-sec::after { content: ""; position: absolute; left: 0; bottom: 0; z-index: 1; width: calc(50% + 8px); height: 8px; background: #e10419; pointer-events: none; }

/* Editor-Arbeitsfläche: kein JS, Endzustand, Draggo-Typografie überstimmen */
.draggo-canvas .cl-pagehead[data-cl-anim] .cl-anim:not(.is-in) { transform: none; }
.draggo-canvas .cl-pagehead .cl-pagehead__img, .draggo-canvas .cl-pagehead__down svg { animation: none; }
/* Arbeitsfläche setzt img { height: auto } – sonst füllt das Foto den Kopf nicht und endet über der Schräge */
.draggo-canvas .cl-pagehead .cl-pagehead__img { width: 100%; height: 100%; max-width: none; }
.draggo-canvas .cl-pagehead .cl-pagehead__title { font-family: var(--cl-display); font-size: 56px; line-height: 1.1; font-weight: 500; color: #fff; }
.draggo-canvas .cl-pagehead .cl-pagehead__kicker { font-family: var(--cl-display); color: #e10419; }
.draggo-canvas .cl-pagehead__crumbs ul { margin: 0; padding: 0; list-style: none; }
.draggo-canvas .cl-pagehead__crumbs li { font-family: var(--cl-sans); font-size: 16px; line-height: 26px; color: rgba(255, 255, 255, .8); }
.draggo-canvas .cl-pagehead__crumbs a { color: #fff; }
.draggo-canvas .cl-pagehead__crumbs :is(li.active, [aria-current]) { color: #fff; }

@media (max-width: 1199px) {
    .cl-pagehead.cl-sec { min-height: 460px; padding-top: 190px; }
    .cl-pagehead--kompakt.cl-sec { min-height: 320px; }
    .cl-pagehead .cl-pagehead__title, .draggo-canvas .cl-pagehead .cl-pagehead__title { font-size: 48px; }
    .cl-pagehead__mark { font-size: 180px; }
}
@media (max-width: 1024px), (hover: none) {
    .cl-pagehead__img--fixed { background-attachment: scroll; }
}
@media (max-width: 991px) {
    /* split gestapelt: Text oben (unter dem Header), Bild darunter mit schräger Oberkante */
    .cl-pagehead--split.cl-sec { justify-content: flex-start; min-height: 0; padding-bottom: 0; }
    .cl-pagehead--split .cl-pagehead__media { position: relative; inset: auto; order: 2; width: 100%; height: 300px; margin-top: 40px; clip-path: polygon(0 16%, 100% 0, 100% 100%, 0 100%); }

    .cl-pagehead--split .cl-pagehead__content { max-width: none; }
    .cl-pagehead--edge.cl-pagehead--split.cl-sec { min-height: 0; padding-bottom: 0; }
    .cl-pagehead--split.cl-sec::after { width: 100%; }
    .cl-pagehead--split:not(.cl-pagehead--media).cl-sec { padding-bottom: 48px; }
}
@media (max-width: 767px) {
    div p.cl-pagehead__lead { font-size: 16px; line-height: 1.55; }
    .cl-pagehead__shade { background: linear-gradient(90deg, #1b2b2e 0%, rgba(27, 43, 46, .9) 40%, rgba(27, 43, 46, .45) 100%); }
    .cl-pagehead--edge:not(.cl-pagehead--split).cl-sec { padding-bottom: calc(var(--clph-edge-h) + 28px); }
    .cl-pagehead--edge:is(.cl-pagehead--bild, .cl-pagehead--video).cl-sec { min-height: 360px; }
    .cl-pagehead--edge.cl-pagehead--hoch.cl-sec { padding-bottom: calc(var(--clph-edge-h) + 90px); }
    .cl-pagehead--edge .cl-pagehead__down { bottom: calc(var(--clph-edge-h) + 14px); }
    .cl-pagehead.cl-sec { min-height: 360px; padding: 190px 0 40px; }
    .cl-pagehead--hoch.cl-sec { min-height: max(70vh, 480px); padding-bottom: 100px; }
    .cl-pagehead--kompakt.cl-sec { min-height: 300px; }
    .cl-pagehead--split.cl-sec { min-height: 0; padding-bottom: 0; }
    .cl-pagehead--split .cl-pagehead__media { height: 220px; margin-top: 32px; }
    .cl-pagehead .cl-pagehead__title, .draggo-canvas .cl-pagehead .cl-pagehead__title { font-size: 32px; line-height: 40px; }

    .cl-pagehead__crumbs { margin-top: 14px; }
    .cl-pagehead__crumbs li, .draggo-canvas .cl-pagehead__crumbs li { font-size: 15px; line-height: 24px; }
    .cl-pagehead__mark { font-size: 110px; }
    .cl-pagehead__down { bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .cl-pagehead .cl-pagehead__img, .cl-pagehead__down svg { animation: none; }
}