/* =========================================================
   röner : design – Hero „Clean“ (Variante B v2)
   Shortcode [roener_hero] · Dateien: hero/rd-hero.css, hero/rd-hero.js, hero/rd-hero.php
   Alle Selektoren sind unter .rd-hero gekapselt, Keyframes mit rdh- geprefixt.
   ========================================================= */
.rd-hero{
  --rdh-wine:#802249;--rdh-blue:#7F9BA8;--rdh-navy:#22323D;--rdh-bg:#E9E3E1;
  --rdh-font:"The Sans","TheSans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --rdh-header-h:88px;--rdh-gutter:max(16px,env(safe-area-inset-left,0px));--rdh-gutter-r:max(16px,env(safe-area-inset-right,0px));
  position:relative;width:100%;min-height:calc(100svh - var(--rdh-header-h));max-height:1100px;overflow:hidden;isolation:isolate;
  background:var(--rdh-bg);color:var(--rdh-navy);font-family:var(--rdh-font);line-height:1.35;
}
.rd-hero *,.rd-hero *::before,.rd-hero *::after{box-sizing:border-box}
@media (max-width:900px){ .rd-hero{min-height:calc(100svh - var(--rdh-header-h));--rdh-header-h:72px} }

/* Hintergrund: weich driftende Farbflächen */
.rd-hero .rdh-aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.rd-hero .rdh-blob{position:absolute;width:90vmax;height:90vmax;border-radius:50%;will-change:transform}
.rd-hero .rdh-blob.rdh-b1{left:-30vmax;top:-45vmax;background:radial-gradient(closest-side,rgba(127,155,168,.42),rgba(127,155,168,0) 72%);animation:rdh-drift1 34s ease-in-out infinite alternate}
.rd-hero .rdh-blob.rdh-b2{display:none} /* weinroter Blur entfernt (25.10.) */
.rd-hero .rdh-blob.rdh-b3{left:20vw;bottom:-60vmax;width:70vmax;height:70vmax;background:radial-gradient(closest-side,rgba(255,255,255,.55),rgba(255,255,255,0) 70%);animation:rdh-drift1 47s ease-in-out infinite alternate-reverse}
@keyframes rdh-drift1{from{transform:translate(0,0)}to{transform:translate(12vw,10vh)}}
@keyframes rdh-drift2{from{transform:translate(0,0)}to{transform:translate(-14vw,-12vh)}}

/* Punktfeld (Logo) */
.rd-hero .rdh-field{position:absolute;left:50%;top:50%;width:var(--L);height:var(--L);container-type:size;--L:min(62vmin,520px);--fx:0px;--fy:0px;--fs:1;--fr:-34deg;--mx:0px;--my:0px;
  transform:translate(-50%,-50%) translate(var(--fx),var(--fy)) scale(var(--fs)) rotate(var(--fr));transition:transform 1.35s cubic-bezier(.7,0,.16,1);z-index:2}
.rd-hero .rdh-field.is-assembled{--fr:0deg}
.rd-hero .rdh-field.is-top{--fx:0px;--fy:-12vh;--fs:.58}
.rd-hero .rdh-field.is-final{--fx:0px;--fy:-12vh;--fs:.58;--fr:360deg}
@media (max-width:900px){
  .rd-hero .rdh-field{--L:min(70vw,360px)}
  .rd-hero .rdh-field.is-top{--fx:0px;--fy:-12vh;--fs:.62}
  .rd-hero .rdh-field.is-final{--fx:0px;--fy:-12vh;--fs:.62;--fr:360deg}
}
.rd-hero .rdh-ring{position:absolute;inset:0}
.rd-hero .rdh-field.is-noanim,.rd-hero .rdh-field.is-noanim .rdh-dot,.rd-hero .rdh-field.is-noanim .rdh-dot-in{transition:none!important}
.rd-hero .rdh-field.is-noanim .rdh-dot-fill{animation:none!important}
.rd-hero .rdh-field.is-assembled .rdh-ring{animation:rdh-sway 14s ease-in-out infinite}
@keyframes rdh-sway{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
.rd-hero .rdh-dot{position:absolute;left:calc(50% + var(--x) * 1%);top:calc(50% + var(--y) * 1%);width:calc(var(--s) * 1%);height:calc(var(--s) * 1%);margin:calc(var(--s) * -.5%) 0 0 calc(var(--s) * -.5%);
  transform:translate(var(--ex),var(--ey)) rotate(var(--er)) scale(.15);opacity:0;
  transition:transform 1.25s cubic-bezier(.18,.9,.22,1.04),opacity .45s ease;transition-delay:calc(var(--i) * 24ms)}
.rd-hero .rdh-field.is-assembled .rdh-dot{transform:none;opacity:1}
.rd-hero .rdh-dot-in{position:absolute;inset:0;--hs:1;transform:translate(calc(var(--mx) * var(--dp)),calc(var(--my) * var(--dp))) scale(var(--hs));transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.rd-hero .rdh-dot-in:hover{--hs:1.35;transition-duration:.3s}
.rd-hero .rdh-dot-fill{position:absolute;inset:0;border-radius:50%;background:var(--c);transition:transform .35s cubic-bezier(.34,1.6,.64,1)}
.rd-hero .rdh-dot.is-sq .rdh-dot-fill{border-radius:22%}
.rd-hero .rdh-field.is-alive .rdh-dot-fill{animation:rdh-breathe 5.6s ease-in-out infinite;animation-delay:calc(var(--i) * -175ms)}
@keyframes rdh-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.13)}}
.rd-hero .rdh-field.is-ripple .rdh-dot-fill{animation:rdh-ripple .75s cubic-bezier(.34,1.4,.64,1) both;animation-delay:calc(var(--i) * 16ms)}
@keyframes rdh-ripple{0%{transform:scale(1)}40%{transform:scale(1.45)}100%{transform:scale(1)}}

/* Botschaften + Headline, zentriert unter dem Logo */
.rd-hero .rdh-msgs{position:absolute;inset:0;z-index:3;pointer-events:none}
.rd-hero .rdh-wrap{position:relative;height:100%;max-width:1200px;margin-inline:auto;padding-left:var(--rdh-gutter);padding-right:var(--rdh-gutter-r)}
.rd-hero .rdh-msg{position:absolute;left:var(--rdh-gutter);right:var(--rdh-gutter-r);top:calc(50% + 12vh);margin:0;padding:0;display:grid;gap:.1em;visibility:hidden;line-height:1.08;text-align:center;font-family:var(--rdh-font)}
.rd-hero .rdh-msg .rdh-l1{font-weight:700;font-size:clamp(28px,3.4vw,50px);letter-spacing:-.005em;color:var(--rdh-navy)}
.rd-hero .rdh-msg .rdh-l2{font-weight:300;font-size:clamp(33px,4.1vw,60px);letter-spacing:-.01em;color:var(--rdh-wine)}
.rd-hero .rdh-msg span{display:block;opacity:0;will-change:transform,opacity,filter}
.rd-hero .rdh-msg.is-in{visibility:visible}
.rd-hero .rdh-msg.is-in .rdh-l1{animation:rdh-fallIn .62s cubic-bezier(.16,1,.3,1) both}
.rd-hero .rdh-msg.is-in .rdh-l2{animation:rdh-fallIn .62s cubic-bezier(.16,1,.3,1) .16s both}
.rd-hero .rdh-msg.is-out{visibility:visible}
.rd-hero .rdh-msg.is-out .rdh-l1{animation:rdh-fallOut .42s cubic-bezier(.6,0,.7,.2) both}
.rd-hero .rdh-msg.is-out .rdh-l2{animation:rdh-fallOut .42s cubic-bezier(.6,0,.7,.2) .07s both}
@keyframes rdh-fallIn{0%{opacity:0;transform:translateY(-.75em);filter:blur(10px)}70%{transform:translateY(.05em);filter:blur(0)}100%{opacity:1;transform:none;filter:none}}
@keyframes rdh-fallOut{from{opacity:1;transform:none;filter:none}to{opacity:0;transform:translateY(.45em);filter:blur(8px)}}
.rd-hero .rdh-final{position:absolute;left:var(--rdh-gutter);right:var(--rdh-gutter-r);top:calc(50% + 12vh);margin:0;padding:0;text-align:center;text-transform:uppercase;font-family:var(--rdh-font);font-weight:800;font-size:clamp(32px,4.6vw,68px);line-height:1.04;letter-spacing:.01em;visibility:hidden;color:var(--rdh-navy);text-wrap:balance}
@media (max-width:900px){ .rd-hero .rdh-msg,.rd-hero .rdh-final{top:calc(50% + 8vh)} }
.rd-hero .rdh-final span{display:inline-block;opacity:0;will-change:transform,opacity,filter}
.rd-hero .rdh-final.is-in{visibility:visible}
.rd-hero .rdh-final.is-in span{animation:rdh-dropIn .8s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--w) * 120ms)}
.rd-hero .rdh-final .rdh-amp{color:var(--rdh-wine);font-weight:300}
@keyframes rdh-dropIn{0%{opacity:0;transform:translateY(-.5em);filter:blur(12px);letter-spacing:.12em}100%{opacity:1;transform:none;filter:none;letter-spacing:.01em}}

/* Scroll-Hinweis */
.rd-hero .rdh-cue{position:absolute;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));width:1px;height:44px;margin-left:-.5px;overflow:hidden;opacity:0;transition:opacity .8s;z-index:3;color:var(--rdh-navy)}
.rd-hero .rdh-cue.is-on{opacity:.7}
.rd-hero .rdh-cue::before{content:"";position:absolute;inset:0;background:currentColor;opacity:.25}
.rd-hero .rdh-cue::after{content:"";position:absolute;left:0;top:-100%;width:100%;height:100%;background:currentColor;animation:rdh-cue 1.8s cubic-bezier(.6,0,.4,1) infinite}
@keyframes rdh-cue{to{top:100%}}

@media (prefers-reduced-motion:reduce){
  .rd-hero .rdh-field,.rd-hero .rdh-dot,.rd-hero .rdh-dot-in,.rd-hero .rdh-dot-fill{transition:none!important}
  .rd-hero .rdh-blob,.rd-hero .rdh-field.is-assembled .rdh-ring,.rd-hero .rdh-field.is-alive .rdh-dot-fill,.rd-hero .rdh-field.is-ripple .rdh-dot-fill,.rd-hero .rdh-msg.is-in span,.rd-hero .rdh-msg.is-out span,.rd-hero .rdh-final.is-in span,.rd-hero .rdh-cue::after{animation:none!important}
  .rd-hero .rdh-final.is-in span{opacity:1}
}