/* ==========================================================================
   HERO Styles — Hello Elementor Child (CLEAN)
   Struktur: .e-con.hero → .hero-canvas (Canvas) → .hero-topfade (Overlay) → Content
   Layer-Regel: ::before -3 < Canvas -2 < Grain -1 < .hero-topfade 5 < Content/Switcher 100+
   ========================================================================== */

/* ============== 1) Self-Hosted Fonts ===================================== */
@font-face{
  font-family:"LemonMilk";
  src:url("/wp-content/themes/hello-elementor-child/assets/fonts/LEMONMILK-Light.otf") format("opentype");
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"LemonMilk";
  src:url("/wp-content/themes/hello-elementor-child/assets/fonts/LEMONMILK-Regular.otf") format("opentype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"LemonMilk";
  src:url("/wp-content/themes/hello-elementor-child/assets/fonts/LEMONMILK-Medium.otf") format("opentype");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"LemonMilk";
  src:url("/wp-content/themes/hello-elementor-child/assets/fonts/LEMONMILK-Bold.otf") format("opentype");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"FantasmSecrets";
  src:url("/wp-content/themes/hello-elementor-child/assets/fonts/Fantasm%20and%20Secrets.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}

/* ============== 2) Design Tokens ========================================= */
:root{
  --font-sans:"LemonMilk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display:"FantasmSecrets", Georgia, "Times New Roman", serif;
  --font-symbols:var(--font-sans), "Segoe UI Symbol", "Noto Sans Symbols 2", "Apple Symbols", sans-serif;

  /* Default Theme (blue·gold) */
  --hero-bg:#F6F1E7;
  --hero-color-1:#FFF3D6;
  --hero-color-2:#A6B6FF;
  --hero-color-3:#F6C45B;

  --hero-saturate:110%;
  --hero-contrast:110%;
  --hero-anim-duration:12s;
}

/* Theme Presets */
.theme-bluegold{ --hero-bg:#E9E1D3; --hero-color-1:#EED9A9; --hero-color-2:#738CFF; --hero-color-3:#D9A73D; }
.theme-blush   { --hero-bg:#F8D7DA; --hero-color-1:#F9B8C4; --hero-color-2:#E04820; --hero-color-3:#E3A236; }
.theme-aurora  { --hero-bg:#D7F0E2; --hero-color-1:#B9E5D1; --hero-color-2:#4B84E0; --hero-color-3:#3DA46E; }

/* ============== 3) Base =================================================== */
body{
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* Oberster Hero-Container */
.e-con.hero{
  position:relative;
  min-height:100vh; min-height:100svh; min-height:100lvh; min-height:100dvh;
  overflow:hidden; isolation:isolate; z-index:0;
  background:transparent !important; /* Safari blend-fix */
  content-visibility:auto;           /* Speed */
  contain-intrinsic-size:1000px;
}

/* CSS-Fallback unter Canvas */
.e-con.hero::before{
  content:""; position:absolute; inset:0; z-index:-3;
  background:
    radial-gradient(60% 80% at 20% 20%, var(--hero-color-2) 0%, transparent 60%),
    radial-gradient(60% 80% at 80% 30%, var(--hero-color-3) 0%, transparent 55%),
    radial-gradient(80% 80% at 50% 80%, var(--hero-color-1) 0%, var(--hero-color-1) 60%),
    var(--hero-bg); /* Basisfarbe unten für Safari */
  filter:saturate(var(--hero-saturate)) contrast(var(--hero-contrast));
  animation:heroFloat var(--hero-anim-duration) ease-in-out infinite alternate;
}

/* Canvas-Layer */
.hero-canvas{ position:absolute; inset:0; z-index:-2; pointer-events:none; }
#gradient-canvas{
  width:100%; height:100%; display:block;
  --gradient-color-1:var(--hero-color-1);
  --gradient-color-2:var(--hero-color-2);
  --gradient-color-3:var(--hero-color-3);
}

/* Grain über Canvas */
.hero-canvas::before{
  content:""; position:absolute; inset:0; z-index:0;
  pointer-events:none;
  opacity:.82;
  mix-blend-mode:overlay;
  background-image:url("/wp-content/themes/hello-elementor-child/assets/img/grain-256.jpg");
  background-repeat:repeat;
  background-size:160px 160px;
  filter:contrast(140%) brightness(92%) saturate(110%);
  animation:grainJitter 2.5s steps(5) infinite;
}

/* Weißes Top-Fade */
.hero-topfade{
  position:absolute; inset:0; z-index:5; pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0) 30%);
}

/* Weißes Bottom-Fade */
.hero-bottomfade{
  position:absolute; inset:0; z-index:5; pointer-events:none;
  background:linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 30%);
}

/* ============== 4) Headings (H1) ========================================= */
.e-con.hero .h1 .elementor-heading-title,
.e-con.hero .elementor-heading-title.h1{
  font-family:"LemonMilk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight:700 !important;
  color:rgba(170,30,30,.95);
  mix-blend-mode:overlay;
  position:relative; z-index:2;
  backface-visibility:hidden;
  -webkit-font-smoothing:antialiased;
  transform:translateZ(0);
  background:transparent !important;
  font-size:clamp(36px, 8vw, 120px);
  line-height:0.95;
  letter-spacing:0.01em;
}
@supports (-webkit-touch-callout: none){
  .e-con.hero .h1 .elementor-heading-title,
  .e-con.hero .elementor-heading-title.h1{
    mix-blend-mode:hard-light; /* Safari fallback */
  }
}

/* ============== 5) Theme Switch (oben, zentriert, ohne Kreis-Hintergrund) ============= */
.e-con.hero .elementor-widget-html,
.e-con.hero .elementor-widget-html .elementor-widget-container{
  position:static !important;
  overflow:visible !important;
  z-index:auto !important;
}

.e-con.hero .theme-switch{
  position:absolute;
  top: clamp(10px, 2vh, 20px);
  left:50%;
  transform: translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(.4rem, 1vw, .8rem);
  z-index:120;
  pointer-events:auto;
  background:transparent;
}

/* === Icons pur (ohne Kreis) =========================================== */
.e-con.hero .theme-icon {
  position: relative;
  width: clamp(18px, 2vw, 18px); /* Desktop kleiner */
  height: clamp(18px, 2vw, 18px);
  cursor:pointer;
  background: none;
  border: none;
  padding: 0;
  transition: transform .25s ease, filter .25s ease;
}

/* Hover & Active Glow */
.e-con.hero .theme-icon:hover,
.e-con.hero .theme-icon.is-active,
.e-con.hero .theme-icon[aria-pressed="true"] {
  transform: scale(1.12);
}

/* === Icons aus /assets/img/icons/ ===================================== */
.e-con.hero .theme-icon[data-theme="theme-bluegold"]::before {
  content: "";
  position: absolute; inset: 0;
  background: url("/wp-content/themes/hello-elementor-child/assets/img/icons/herz.png") center/contain no-repeat;
}

.e-con.hero .theme-icon[data-theme="theme-blush"]::before {
  content: "";
  position: absolute; inset: 0;
  background: url("/wp-content/themes/hello-elementor-child/assets/img/icons/blume.png") center/contain no-repeat;
}

.e-con.hero .theme-icon[data-theme="theme-aurora"]::before {
  content: "";
  position: absolute; inset: 0;
  background: url("/wp-content/themes/hello-elementor-child/assets/img/icons/stern.png") center/contain no-repeat;
}

/* === Mobile: größere Icons & unten platzieren ========================= */
@media (max-width: 680px){
  .e-con.hero .theme-switch{
    top: auto;
    bottom: clamp(18px, 5vh, 48px);
    left: 50%;
    transform: translateX(-50%);
    gap: clamp(0.8rem, 2vw, 1.6rem); /* Abstand zwischen Icons */
  }

  .e-con.hero .theme-icon {
    width: clamp(22px, 4vw, 22px);  /* größer auf Handy */
    height: clamp(22px, 4vw, 22px);
  }

}




/* ============== 6) Ticker ================================================ */
.hero-ticker{
  position:relative; width:100%; overflow:hidden; z-index:10;
  font-family:var(--font-sans); font-weight:500; font-size:14px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--hero-color-2);
  background:transparent; padding-top:3%; opacity:.2;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-repeat:no-repeat; -webkit-mask-size:100% 100%;
  mask-image:linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-repeat:no-repeat; mask-size:100% 100%;
}
.hero-ticker .ticker-track{ display:flex; width:max-content; animation:ticker-scroll 1000s linear infinite; will-change:transform; }
.hero-ticker .ticker-item{ flex:none; padding-right:4rem; white-space:nowrap; }
@supports not (mask-image: linear-gradient(to right, black, black)) {
  .hero-ticker::before,.hero-ticker::after{ content:""; position:absolute; top:0; bottom:0; width:min(8%,120px); pointer-events:none; z-index:1; }
  .hero-ticker::before{ left:0; background:linear-gradient(to right, #fff, rgba(255,255,255,0)); }
  .hero-ticker::after{ right:0; background:linear-gradient(to left, #fff, rgba(255,255,255,0)); }
}

/* ============== 7) Kreis-Links ============================================ */
.circle-link{ width:140px; height:140px; display:inline-block; position:relative; }
.circle-link a{ display:grid; place-items:center; width:100%; height:100%; text-decoration:none; color:var(--hero-text,#000); outline:none; cursor:pointer; transition:color .3s ease; }
.circle-link svg{ display:block; transform-origin:50% 50%; animation:spin 18s linear infinite; }
.circle-link:hover svg{ animation-play-state:paused; }
.circle-link:hover a{ color:#fff; }
.circle-link:active svg{ animation-play-state:paused; transform:scale(0.98); }
.circle-link a:focus-visible{ outline:2px dashed currentColor; outline-offset:6px; }
.circle-link text{ font-family:"LemonMilk", system-ui, sans-serif; font-size:clamp(14px,2vw,22px); letter-spacing:1.5px; text-transform:uppercase; dominant-baseline:middle; fill:currentColor; }
.hero-actions{ position:absolute; left:50%; bottom:clamp(20px,4vh,40px); transform:translateX(-50%); display:flex; gap:clamp(16px,3vw,36px); z-index:110; }
@media (max-width:768px){ .circle-link{ width:108px; height:108px; } }

/* ============== 8) Motion & Responsive =================================== */
@keyframes heroFloat{0%{transform:translate3d(0,0,0) scale(1.02);}100%{transform:translate3d(0,-1%,0) scale(1.04);} }
@keyframes grainJitter{0%,100%{background-position:0 0;}25%{background-position:1px 0;}50%{background-position:0 1px;}75%{background-position:-1px -1px;} }
@keyframes ticker-scroll{0%{transform:translateX(0);}100%{transform:translateX(-50%);} }
@keyframes spin{to{transform:rotate(360deg);} }

@media (prefers-reduced-motion:reduce){
  .e-con.hero::before,.hero-canvas::before{ animation:none; }
  .hero-ticker .ticker-track{ animation-duration:0.01ms; animation-iteration-count:1; }
}
@media (max-width:680px){
  .e-con.hero{ min-height:88vh; }
  .hero-canvas::before{ opacity:.6; background-size:200px 200px; animation-duration:4s; }
  .hero-ticker .ticker-track{ animation-duration:2000s; }
}

/* ============== 9) Überlappende Signatur ================================= */
.container-titel{ position:relative; }
.container-titel .signature{
  position:absolute; top:1em; left:50%;
  transform:translateX(-50%) rotate(-2.5deg);
  transform-origin:center;
  font-family:"FantasmSecrets",sans-serif;
  font-size:clamp(1.5em,6vw,6em);
  font-weight:400; color:rgba(255,255,255,1);
  pointer-events:none; z-index:1;
  transition:transform .4s ease;
}
.container-titel:hover .signature{ transform:translateX(-50%) rotate(0deg); }

/* ============== 10) Idle-State (IO gesteuert) ============================ */
.e-con.hero.hero--idle::before,
.e-con.hero.hero--idle .hero-canvas::before{ animation:none!important; }
.e-con.hero.hero--idle .hero-ticker .ticker-track{ animation:none!important; }