/* ============================================================
   DDL Hero-Kachel v1 — der Seitenanfang der Bühnen-Landings (11.09.2026)
   ============================================================
   Kochbuch DDL-MOTION-REZEPTE.md, Rezept 2 („Apple-Event-Kachel"): eine
   Fensterhöhe, dunkler Grund, zwei Nebelwolken mit gegenläufigem Parallax,
   die leuchtende Wortmarke, eine Pille, ein Satz, zwei Knöpfe.
   Ursprung: dasdensch.de-Hub (index/index.html, monochrom); hier
   produktfarbig — Wolke und Glow tragen --wolke, der Wortmarken-Teil
   --akzent (hell auf Schwarz), Fallback --marke / --ddl-accent.

   SSOT: /densch-shared/ddl/ddl-hero.css — keine Kopien.
   Markup: partials/landing/landing.php (hero['wortmarke_html'] schaltet
   die Kachel ein). Braucht ddl-motion.js (data-hero-fade, data-parallax,
   data-scroll-indicator, data-loop), ddl-typography.css (Tokens,
   .ddl-eyebrow) und ddl-landing.css (.lp-btn, .lp-hero-badge).
   Farbe: .showcase--<produkt> am <header> (ddl-mockups.css) liefert
   --marke/--wolke; --akzent setzt die Seite (helle Produktfarbe).
   --hk-abzug = Höhe von Beta-Banner + Nav über der Kachel (Falz!).
   Regel 1: Glow/Cue sind Loops, die Wortmarke steht still — der
   Hero-Fade auf .hk__innen ist ihr einziger Besitzer.
   ============================================================ */

.hk {
    position: relative;
    min-height: calc(100svh - var(--hk-abzug, 5.8rem));
    display: grid; place-items: center;
    /* --hk-pad-top: Platz für eine FIXE Nav (Landing-Template: 6rem) */
    padding: var(--hk-pad-top, 2.5rem) var(--buehne-rand, clamp(1.25rem, 5vw, 3rem)) 2.5rem;
    overflow: clip; isolation: isolate;
    text-align: center;
    background: var(--hk-bg, #000);
    color: var(--ddl-text, #f5f5f7);
}
.hk__grund { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* Nebel-Wolken, gegenläufiges Parallax — Lage NUR über inset (Regel 1) */
.hk__wolke { position: absolute; border-radius: 50%; filter: blur(60px); }
.hk__wolke--a {
    width: 60vw; height: 60vw; left: -12vw; top: -18vw;
    background: radial-gradient(circle, var(--wolke, rgba(255,255,255,0.07)), transparent 65%);
}
.hk__wolke--b {
    width: 70vw; height: 70vw; right: -20vw; bottom: -26vw;
    background: radial-gradient(circle, color-mix(in srgb, var(--wolke, rgba(255,255,255,0.06)) 60%, transparent), transparent 65%);
}
.hk__innen {
    position: relative; width: 100%; max-width: 46rem;
    display: flex; flex-direction: column; align-items: center;
}
.hk__eyebrow { font-size: 0.75rem; color: var(--ddl-text-soft, rgba(245,245,247,0.72)); margin: 0; }

/* Die leuchtende Wortmarke: Glow absolut + translate (NICHT als Rasterkind,
   Kochbuch-Falle Rezept 2) */
.hk__marke {
    position: relative;
    display: grid; place-items: center;
    width: 100%;
    min-height: clamp(7rem, 20vw, 11rem);
    margin: 0.25rem 0 0;
}
.hk__glow {
    position: absolute; left: 50%; top: 50%;
    translate: -50% -50%;
    width: clamp(18rem, 50vw, 26rem); aspect-ratio: 1;
    border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, var(--wolke, rgba(255,255,255,0.10)) 0%, transparent 65%);
    /* 8-s-Zyklus hält Abstand zur vestibulär kritischen ~0,2-Hz-Zone */
    animation: hkGlow 8s ease-in-out infinite;
}
.hk__wort {
    position: relative; margin: 0;
    font-size: clamp(3rem, 2rem + 6vw, 6.5rem);
    font-weight: 800; letter-spacing: var(--ddl-track-display, -0.04em); line-height: 1;
    color: var(--ddl-text, #f5f5f7);
    filter: drop-shadow(0 0 1.25rem var(--wolke, rgba(255,255,255,0.25)));
}
.hk__wort span { color: var(--akzent, var(--marke, var(--ddl-accent))); }
/* Bild-Wortmarke (Markenseite, Hub): statt .hk__wort */
.hk__logo { position: relative; width: min(360px, 70vw); height: auto; filter: drop-shadow(0 0 1.25rem var(--wolke, rgba(255,255,255,0.35))); }
@keyframes hkGlow {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.1); opacity: 0.72; }
}

.hk__badge { margin: 0.75rem 0 0; }
.hk__titel {
    margin: 0.75rem 0 0;
    font-size: clamp(2rem, 1.2rem + 3.4vw, 3.5rem);
    font-weight: 700; letter-spacing: var(--ddl-track-title, -0.02em);
    line-height: 1.05; color: var(--ddl-text, #fff);
}
.hk__sub {
    max-width: 34rem; margin: 1rem auto 0;
    font-size: var(--ddl-fs-lead, 1.125rem); line-height: 1.45;
    color: var(--ddl-text-soft, rgba(245,245,247,0.72));
    text-wrap: pretty;
}
.hk__cta {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem;
    margin-top: 1.5rem;
}
/* Niedrige Fenster (1280×720): eine Stufe kleiner — HINTER den Basisregeln */
@media (max-height: 47.5rem) {
    .hk__marke { min-height: 6.5rem; }
    .hk__wort { font-size: clamp(2.5rem, 2rem + 4vw, 5rem); }
    .hk__logo { width: min(300px, 70vw); }
}

/* Scroll-Hinweis: außen gehört die Opacity der Engine (data-scroll-indicator),
   der Loop liegt auf dem inneren Wrapper — Regel 1 */
.hk__cue { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); }
.hk__cue span {
    display: block; width: 1px; height: 48px;
    background: linear-gradient(to bottom, var(--ddl-text-soft, rgba(255,255,255,0.3)), transparent);
    animation: hkCue 2.5s ease-in-out infinite;
}
@keyframes hkCue {
    0%   { opacity: 0; transform: scaleY(0); transform-origin: top; }
    40%  { opacity: 1; transform: scaleY(1); }
    100% { opacity: 0; transform: scaleY(1); transform-origin: bottom; }
}

@media (prefers-reduced-motion: reduce) {
    .hk__glow, .hk__cue span { animation: none !important; }
}
@media print {
    .hk__grund, .hk__glow, .hk__cue { display: none; }
    .hk { min-height: auto; }
}