/* =========================================
   Block: Hero Banner (kss/lswn-hero-banner)
   ========================================= */

.lswn-hero-banner {
    /* Fluide statt in Breakpoints springende Werte: min(vw,vh) sorgt dafür,
       dass Bogen, Wortmarke & Abstände sich nach der JEWEILS kleineren
       Dimension richten — ein Handy im Querformat (breit, aber flach) und
       ein schmales Hochformat-Handy landen beide bei einer stimmigen,
       nicht überlappenden Größe, ohne dass sich zwei Media-Queries
       gegenseitig überschreiben. */
    /* --lswn-edge kommt jetzt zentral aus brand_tokens.css */
    /* Bogen-Maße als eigene Variablen, damit padding-top direkt daraus
       abgeleitet werden kann (statt separat geraten zu sein) — die Sonne
       sitzt im SVG bei lokal y:116 von 500, also ~17% der Bogenbreite unter
       dessen Oberkante. So landet der Kicker IMMER knapp unter der Sonne,
       ganz gleich wie groß der Bogen gerade skaliert. */
    --lswn-arch-top: clamp(8px, 9vh, 90px);
    --lswn-arch-w: clamp(240px, min(88vw, 75vh), 680px);
    --lswn-pad-top: calc(var(--lswn-arch-top) + var(--lswn-arch-w) * 0.17 + 40px);
    --lswn-pad-bot: clamp(40px, 8vh, 76px);
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: var(--lswn-pad-top) var(--lswn-edge) var(--lswn-pad-bot);
    text-align: center;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* --- Bogen --- */

.lswn-hero-banner__arch {
    position: absolute;
    top: var(--lswn-arch-top);
    left: 50%;
    transform: translateX(-50%);
    width: var(--lswn-arch-w);
    pointer-events: none;
    z-index: -1;
    overflow: visible;
}

.lswn-hero-banner__arch path {
    fill: none;
    stroke: var(--lswn-gold);
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lswn-hero-banner__arch-outer {
    stroke-width: 1.2;
}

.lswn-hero-banner__arch-inner {
    stroke-width: .8;
    opacity: .62;
}

.lswn-hero-banner__tendril {
    stroke-width: .85;
    opacity: .7;
}

.lswn-hero-banner__bud {
    fill: var(--lswn-gold);
    stroke: none;
}

.lswn-hero-banner__sun-ring {
    fill: none;
    stroke: var(--lswn-gold);
    stroke-width: 1.1;
}

.lswn-hero-banner__sun-ring--soft {
    stroke-width: .8;
    opacity: .6;
}

.lswn-hero-banner__sun-ray {
    stroke: var(--lswn-gold);
    stroke-width: 1;
    opacity: .8;
}

.lswn-hero-banner__sun-ray--soft {
    stroke-width: .7;
    opacity: .45;
}

/* --- Kicker --- */

.lswn-hero-banner__kicker {
    font-size: clamp(9.5px, min(1.7vw, 2vh), 12px);
    letter-spacing: .36em;
    text-transform: uppercase;
    color: var(--lswn-gold);
    margin: 0 0 clamp(16px, 4vh, 32px);
}

/* --- Wortmarke --- */

.lswn-hero-banner__wordmark {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    font-weight: 400;
}

.lswn-hero-banner__line {
    overflow: hidden;
    display: flex;
}

.lswn-hero-banner__line .ltr {
    display: inline-block;
    font-family: var(--lswn-serif);
    font-size: clamp(34px, min(11vw, 19vh), 172px);
    line-height: .95;
    color: var(--lswn-wine);
}

.lswn-hero-banner__line--hollow {
    margin-top: .06em;
}

.lswn-hero-banner__line--hollow .ltr {
    color: transparent;
    -webkit-text-stroke: 1px var(--lswn-wine);
    letter-spacing: .01em;
}

/* --- Subtext --- */

.lswn-hero-banner__sub {
    margin: clamp(18px, 4vh, 36px) 0 0;
    font-size: clamp(15px, 1.5vw, 18.5px);
    color: var(--lswn-ink-soft);
    max-width: 530px;
    margin-top: 15rem;
}

.lswn-hero-banner__sub em {
    font-family: var(--lswn-serif);
    font-style: italic;
    color: var(--lswn-wine);
}

.lswn-hero-banner__ImageLogo {
    position: relative;
}

.lswn-hero-banner__ImageLogo img {
    width: 800px;
    height: 800px;
    position: absolute;
    left: -400px;
    top: -415px;
    z-index: -1;
}



/* --- Pillen-Liste --- */

.lswn-hero-banner__pills {
    margin: clamp(14px, 3.4vh, 26px) 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 20px;
    font-family: var(--lswn-serif);
    font-style: italic;
    font-size: clamp(13px, min(1.7vw, 2vh), 16px);
    color: var(--lswn-gold);
}

.lswn-hero-banner__pills li {
    position: relative;
}

.lswn-hero-banner__pills li+li::before {
    content: '';
    position: absolute;
    left: -11px;
    top: 50%;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--lswn-gold);
    transform: translateY(-50%);
}

/* --- Scroll-Hinweis --- */

.lswn-hero-banner__scrollcue {
    padding-top: 2rem;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    overflow: visible;
}

.lswn-hero-banner__scrollcue path {
    fill: none;
    stroke: var(--lswn-gold);
    stroke-width: 1.1;
    stroke-linecap: round;
}

/* --- Responsive --- */

/* Feindetails (Ranken, Knospen am Bogen) werden bei kleiner Bogenbreite
   selbst zu Bildrauschen statt erkennbarem Ornament — das ist eine bewusste
   Vereinfachung, keine Größenanpassung (die übernehmen die clamp()-Formeln
   oben bereits stufenlos für jede Fenstergröße). */
@media (max-width: 600px) {

    .lswn-hero-banner__tendril,
    .lswn-hero-banner__bud {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lswn-hero-banner__line .ltr {
        transform: none !important;
    }
}