/* ═══════════════════════════════════════════════════════════════════════════ Buchhandlung List — Hero-Widget --------------------------------------------------------------------------- Alle Farben und Maße kommen als CSS-Variablen vom Widget. Die Rückfallwerte hier greifen nur, wenn ein Regler im Panel leer bleibt — sie zeigen dann auf die Kit-Globals (--e-global-color-*) und erst zuletzt auf einen Hex. ═══════════════════════════════════════════════════════════════════════════ */ .bhl-hero{ /* Farben — Tag */ --bhl-cream: var(--e-global-color-66cf46a, #FFFDF9); --bhl-blue: var(--e-global-color-af66e52, #202684); --bhl-pink: var(--e-global-color-c8bbc15, #F78DA7); --bhl-pink-ink: var(--e-global-color-3190c4a, #C2456D); --bhl-muted-ink: var(--e-global-color-e266ad5, #6E7080); --bhl-pink-edge: #d97490; --bhl-muted-blue: #C9CBE4; /* Wellen — Tag. Halbtransparent, weil sie sich überlagern. */ --bhl-blob-1: rgba(248,141,167,.18); --bhl-blob-2: rgba(246,169,189,.26); --bhl-blob-3: rgba(32,39,130,.10); --bhl-blob-4: rgba(254,253,249,.55); --bhl-wave-back: rgba(248,141,167,.45); /* Nacht */ --bhl-night-bg: #0E1233; --bhl-night-heading: var(--bhl-cream); --bhl-night-lead: var(--bhl-muted-blue); --bhl-night-star: var(--bhl-cream); --bhl-night-blob-1: rgba(32,39,130,.72); --bhl-night-blob-2: rgba(42,49,122,.85); --bhl-night-blob-3: rgba(110,119,216,.20); --bhl-night-blob-4: rgba(143,150,228,.5); --bhl-night-wave-back: rgba(58,66,168,.6); /* Maße */ --bhl-hero-minh: 88vh; --bhl-hero-maxw: 1120px; --bhl-hero-textw: 760px; --bhl-hero-pt: 96px; --bhl-hero-pb: 128px; --bhl-hero-wave-h: 150px; --bhl-hero-gutter: 24px; position:relative; overflow:hidden; display:flex; align-items:flex-start; min-height:var(--bhl-hero-minh); padding:var(--bhl-hero-pt) 0 var(--bhl-hero-pb); background:var(--bhl-cream); isolation:isolate; /* Der Farbwechsel zur Nacht läuft über gut eine Sekunde — schnell genug, um beim Umschalten bemerkt zu werden, langsam genug, um nicht zu blitzen. */ transition:background-color 1.2s ease, color 1.2s ease; } /* Sprengt einen eingerückten Elementor-Container von innen. margin-inline statt left/right, weil das auch in Flex-Containern trägt. */ .bhl-hero--bleed{ width:100vw; max-width:100vw; margin-inline:calc(50% - 50vw); } /* ── Wellenfeld ─────────────────────────────────────────────────────────── */ .bhl-hero__field{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; } .bhl-hero__field svg{width:100%;height:100%;display:block} .bhl-hero__field g{transform-box:view-box;transform-origin:center} .bhl-hero__field .b1{fill:var(--bhl-blob-1-eff, var(--bhl-blob-1))} .bhl-hero__field .b2{fill:var(--bhl-blob-2-eff, var(--bhl-blob-2))} .bhl-hero__field .b3{fill:var(--bhl-blob-3-eff, var(--bhl-blob-3))} .bhl-hero__field .b4{fill:var(--bhl-blob-4-eff, var(--bhl-blob-4))} /* Zwei Bewegungen pro Fläche: das Morphen der Pfade (SMIL, im Markup) und ein langsames Driften des ganzen Knotens. Zusammen wirkt es unperiodisch. */ .bhl-hero__drift {animation:bhl-drift 26s ease-in-out infinite} .bhl-hero__drift-2{animation:bhl-drift2 34s ease-in-out infinite} .bhl-hero__drift-3{animation:bhl-drift3 30s ease-in-out infinite} @keyframes bhl-drift{ 0%,100%{transform:translate3d(0,0,0) scale(1)} 50% {transform:translate3d(-1.6%,1.2%,0) scale(1.035)} } @keyframes bhl-drift2{ 0%,100%{transform:translate3d(0,0,0) scale(1.02)} 50% {transform:translate3d(2%,-1%,0) scale(1)} } @keyframes bhl-drift3{ 0%,100%{transform:translate3d(0,0,0) scale(1)} 50% {transform:translate3d(-2.4%,1.6%,0) scale(1.06)} } /* ── Sterne — nur nachts sichtbar ───────────────────────────────────────── */ .bhl-hero__stars circle{ fill:var(--bhl-night-star); opacity:0; transition:opacity .8s ease; } .bhl-hero.is-night .bhl-hero__stars circle{ opacity:var(--star-o,.7); animation:bhl-twinkle var(--star-dur,5s) ease-in-out var(--star-delay,0s) infinite; } @keyframes bhl-twinkle{ 0%,100%{opacity:var(--star-o,.7)} 50% {opacity:calc(var(--star-o,.7) * .25)} } /* ── Abschlusswelle ─────────────────────────────────────────────────────── */ /* bottom:-1px schließt die Subpixel-Fuge, die bei fraktionalen Zoomstufen zwischen Welle und Sektionskante aufreißt. */ .bhl-hero__wave{ position:absolute; left:0; right:0; bottom:-1px; height:var(--bhl-hero-wave-h); z-index:1; pointer-events:none; } .bhl-hero__wave svg{width:100%;height:100%;display:block} .bhl-hero__wave .w-back{fill:var(--bhl-wave-back-eff, var(--bhl-wave-back))} /* Die vordere Welle trägt die Farbe der Sektion darunter — sie ist der Übergang, nicht eine Blende darüber. */ .bhl-hero__wave .w-front{fill:var(--bhl-cream)} /* ── Inhalt ─────────────────────────────────────────────────────────────── */ .bhl-hero__wrap{ position:relative; z-index:2; width:100%; max-width:var(--bhl-hero-maxw); margin:0 auto; padding:0 var(--bhl-hero-gutter); } .bhl-hero__inner{ max-width:var(--bhl-hero-textw); padding-bottom:var(--bhl-hero-pb); } .bhl-hero__eyebrow{ margin:0 0 24px; font-family:var(--e-global-typography-accent-font-family, "Jost", system-ui, sans-serif); font-size:.9rem; font-weight:500; letter-spacing:.28em; text-transform:uppercase; color:var(--bhl-pink-ink); overflow-wrap:anywhere; } .bhl-hero__title{ margin:0 0 32px; max-width:15ch; font-family:var(--e-global-typography-primary-font-family, "Literata", Georgia, serif); font-size:clamp(2.6rem, 8vw, 5rem); font-weight:300; line-height:1; letter-spacing:-.02em; color:var(--bhl-blue); } .bhl-hero__title em{font-style:italic;color:var(--bhl-pink-ink)} .bhl-hero__lead{ margin:0 0 48px; max-width:52ch; font-size:1.31rem; line-height:1.5; color:var(--bhl-muted-ink); } .bhl-hero__lead em{font-style:italic;color:var(--bhl-pink-ink)} /* Lange deutsche Komposita dürfen die Seite nicht seitwärts schieben. */ .bhl-hero__title,.bhl-hero__lead,.bhl-hero__label{overflow-wrap:break-word} .bhl-hero__actions{ display:flex; align-items:center; flex-wrap:wrap; gap:32px; } /* Primärbutton: gestapelte Kante plus weicher Schein. Beim Hover sinkt er 2 px ein, beim Klick 4 px — die Kante wird dabei kleiner, nicht der Button. */ .bhl-hero__cta{ display:inline-flex; align-items:center; gap:.6em; padding:.85em 1.7em; border-radius:6px; background:var(--bhl-pink); color:var(--bhl-blue); font-family:var(--e-global-typography-primary-font-family, "Literata", Georgia, serif); font-size:1.31rem; letter-spacing:.03em; text-decoration:none; box-shadow:0 4px 0 0 var(--bhl-pink-edge), 0 12px 24px rgba(248,141,167,.4); transition:transform .12s ease, box-shadow .12s ease; } .bhl-hero__cta:hover{ color:var(--bhl-blue); transform:translateY(2px); box-shadow:0 2px 0 0 var(--bhl-pink-edge), 0 8px 16px rgba(248,141,167,.35); } .bhl-hero__cta:active{ transform:translateY(4px); box-shadow:0 0 0 0 var(--bhl-pink-edge), 0 4px 10px rgba(248,141,167,.3); } .bhl-hero__cta .bhl-hero__label{white-space:nowrap} .bhl-hero__arrow{ display:flex; align-items:center; font-size:1.15em; transition:transform .18s ease; } .bhl-hero__cta:hover .bhl-hero__arrow{transform:translateX(3px)} /* Sekundärbutton: kursive Serifenschrift mit rosa Unterstrich, keine Fläche. */ .bhl-hero__ghost{ font-family:var(--e-global-typography-primary-font-family, "Literata", Georgia, serif); font-style:italic; font-size:1.31rem; letter-spacing:.02em; color:var(--bhl-blue); text-decoration:none; border-bottom:2px solid var(--bhl-pink); padding-bottom:2px; transition:color .18s, border-color .18s; } .bhl-hero__ghost:hover{color:var(--bhl-pink-ink)} /* Fokusring in Markenfarbe — der Browser-Standard verschwindet auf Creme. */ .bhl-hero a:focus-visible{ outline:3px solid var(--bhl-pink); outline-offset:3px; border-radius:4px; } /* ── Nacht ──────────────────────────────────────────────────────────────── */ .bhl-hero.is-night{ background:var(--bhl-night-bg); /* Warum -eff und nicht direkt --bhl-blob-N: Elementor schreibt die Farbwerte aus dem Panel je Widget mit drei Klassen in den Selektor (.elementor-NN .elementor-element.elementor-element-XXX .bhl-hero) — schwerer als dieser Block hier mit zwei. Die Nachtfarben wurden dadurch von den Tagfarben überschrieben: dunkler Himmel, aber rosa Wellen. Die Flächen lesen deshalb eine eigene Variable, die im Panel nicht vorkommt; dort kann nichts dagegenhalten. */ --bhl-blob-1-eff:var(--bhl-night-blob-1); --bhl-blob-2-eff:var(--bhl-night-blob-2); --bhl-blob-3-eff:var(--bhl-night-blob-3); --bhl-blob-4-eff:var(--bhl-night-blob-4); --bhl-wave-back-eff:var(--bhl-night-wave-back); } .bhl-hero.is-night .bhl-hero__eyebrow{color:var(--bhl-pink)} .bhl-hero.is-night .bhl-hero__title{color:var(--bhl-night-heading)} .bhl-hero.is-night .bhl-hero__title em{color:var(--bhl-pink)} .bhl-hero.is-night .bhl-hero__lead{color:var(--bhl-night-lead)} .bhl-hero.is-night .bhl-hero__lead em{color:var(--bhl-pink)} .bhl-hero.is-night .bhl-hero__ghost{color:var(--bhl-night-heading)} .bhl-hero.is-night .bhl-hero__ghost:hover{color:var(--bhl-pink)} /* Die vordere Abschlusswelle bleibt cremefarben: sie muss die Farbe der Sektion darunter treffen, nicht die des Heros. */ .bhl-hero__eyebrow,.bhl-hero__title,.bhl-hero__lead,.bhl-hero__ghost{ transition:color 1.2s ease, border-color 1.2s ease; } /* ── Gestaffeltes Einblenden ────────────────────────────────────────────── */ .bhl-hero--reveal .bhl-hero__inner>*{opacity:0;transform:translateY(20px)} .bhl-hero--reveal.is-revealed .bhl-hero__inner>*{ opacity:1; transform:none; transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); } .bhl-hero--reveal.is-revealed .bhl-hero__inner>*:nth-child(1){transition-delay:.05s} .bhl-hero--reveal.is-revealed .bhl-hero__inner>*:nth-child(2){transition-delay:.16s} .bhl-hero--reveal.is-revealed .bhl-hero__inner>*:nth-child(3){transition-delay:.27s} .bhl-hero--reveal.is-revealed .bhl-hero__inner>*:nth-child(4){transition-delay:.38s} /* Ohne JavaScript bleibt der Text sichtbar statt unsichtbar — die Regel steht im