/* HUBER Hero – Geräte-Muster mit Funk-Puls, Einstiegsanimation, Farbleiste.
   Wird von huber-hero.js auf .award-hero, .page-hero und .home-hero angewendet. */
:root{
  --hh-blue:#23437E; --hh-blue-deep:#1b3566; --hh-tone:#3B60A7;
  --hh-cyan:#00ADEF; --hh-red:#EF2D38; --hh-ink:#23437E; --hh-muted:#6a7894; --hh-line:#d6deea;
}

/* Fläche: Blau statt Verlauf (überschreibt den bisherigen Hero-Hintergrund) */
.hh-hero{
  position:relative; overflow:hidden; isolation:isolate;
  background-color:var(--hh-blue)!important; background-image:none!important;
  padding-bottom:8px; /* Platz für die Farbleiste */
}
.hh-hero > :not(.hh-bg):not(.hh-shade):not(.hh-bar):not(.hh-device){position:relative; z-index:2}
.hh-bg{position:absolute; inset:0; z-index:0; pointer-events:none}
.hh-bg svg{display:block; width:100%; height:100%}
.hh-bg use{fill:var(--hh-tone); transition:fill .5s}
.hh-bg use.hh-on{fill:var(--hh-cyan)}
.hh-bg .hh-ring{fill:none; stroke:var(--hh-cyan); stroke-width:2; opacity:0; transform-box:fill-box; transform-origin:center; animation:hh-ping 1.6s ease-out forwards}
.hh-shade{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(35,67,126,.93) 0%, rgba(35,67,126,.8) 45%, rgba(35,67,126,0) 80%)}

/* Farbleiste unten: 24 | 4 | 72 | 4 | 376 */
.hh-bar{position:absolute; left:0; right:0; bottom:0; height:8px; display:flex; z-index:3}
.hh-bar i{display:block; transform-origin:left}
.hh-bar i:nth-child(1){flex:24; background:var(--hh-red)}
.hh-bar i:nth-child(2){flex:4}
.hh-bar i:nth-child(3){flex:72; background:var(--hh-cyan)}
.hh-bar i:nth-child(4){flex:4}
.hh-bar i:nth-child(5){flex:376; background:var(--hh-blue-deep)}

/* „zu Hause“ hervorheben: <em> in der H1 */
.hh-hero h1 em{font-style:normal; color:var(--hh-cyan); position:relative; white-space:nowrap}
.hh-hero h1 em::after{content:""; position:absolute; left:0; right:0; bottom:.08em; height:.06em; border-radius:2px; background:var(--hh-cyan); transform-origin:left}
.hh-w{display:inline-block}

/* Unterseiten: großes Geräte-Icon als Anker rechts */
.hh-device{position:absolute; z-index:2; right:max(24px, calc((100vw - 1240px)/2)); top:50%; width:clamp(170px,19vw,260px); aspect-ratio:1;
  transform:translateY(-50%); border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(circle, #2c5296 0%, var(--hh-blue) 70%); border:1px solid rgba(255,255,255,.2);
  box-shadow:0 0 0 36px var(--hh-blue)}
.hh-device svg{width:56%; height:auto; fill:#fff}
.hh-has-device .page-hero-inner > *{max-width:min(720px, calc(100% - 300px))}

/* Startseite: Tourenplan-Karte und Vertrauensleiste. */
/* Fallback: Die Startseite bleibt auch dann vollständig aufgebaut, wenn das
   optionale Muster-Skript auf einem Server noch nicht ausgeliefert wird. */
main.home-v2 .award-hero, .award-hero.hh-hero{height:auto!important; min-height:0!important; display:block!important}
.hh-home{width:min(100% - 48px, 1440px); margin:0 auto; padding:clamp(40px,6vw,80px) 0 clamp(32px,4vw,56px)}
.hh-home-grid{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(28px,5vw,64px); align-items:center}
.hh-home .award-hero-copy{padding:0!important}
.hh-card, .hh-card *, .hh-home, .hh-device{box-sizing:border-box}
.hh-card{background:#fff; color:var(--hh-ink); border-radius:6px; padding:26px 28px; box-shadow:0 20px 50px rgba(0,0,0,.25)}
.hh-card .hh-k{margin:0; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--hh-red)}
.hh-card h2{font-family:"Rajdhani",ui-sans-serif,system-ui,sans-serif; font-weight:700; font-size:30px; line-height:1.1; margin:8px 0 14px; color:var(--hh-ink)}
.hh-steps{list-style:none; padding:0; margin:0 0 20px}
.hh-steps li{display:grid; grid-template-columns:38px 1fr; padding:9px 0; border-bottom:1px dashed var(--hh-line); font-size:16px}
.hh-steps li > b{grid-row:span 2; width:26px; height:26px; border-radius:50%; background:var(--hh-cyan); color:#fff; display:grid; place-items:center; font:700 15px "Rajdhani",sans-serif}
.hh-steps li > span{font-size:13px; color:var(--hh-muted); font-weight:300}
.hh-card .award-button{width:100%; justify-content:space-between; background:var(--hh-blue); color:#fff}
.hh-trust{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:clamp(40px,6vw,72px); overflow:hidden; border:1px solid rgba(255,255,255,.24); background:rgba(15,43,91,.74); box-shadow:0 16px 32px rgba(8,28,64,.16)}
.hh-trust > div{min-width:0; padding:24px 26px 26px; color:#d7e3f6; font-size:14px; font-weight:300}
.hh-trust > div + div{border-left:1px solid rgba(255,255,255,.18)}
.hh-trust b{display:block; font:700 clamp(24px,2.4vw,36px)/1.1 "Rajdhani",sans-serif; color:#fff; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
@media (min-width:768px){
  .hh-trust > div:last-child b{white-space:nowrap}
}

/* Einstieg (nur einmal; Inhalte sind ohne Animation sofort sichtbar) */
.hh-play .hh-w{animation:hh-up .7s cubic-bezier(.2,.7,.2,1) both}
.hh-play h1 em::after{animation:hh-grow .7s .95s cubic-bezier(.2,.7,.2,1) both}
.hh-play .hh-fade{animation:hh-up .7s both}
.hh-play .hh-card{animation:hh-card .9s .8s cubic-bezier(.2,.7,.2,1) both}
.hh-play .hh-steps li{animation:hh-up .5s both}
.hh-play .hh-device{animation:hh-pop .9s .5s cubic-bezier(.2,.7,.2,1) both}
.hh-play .hh-bar i{animation:hh-grow .8s both}
.hh-play .hh-bar i:nth-child(3){animation-delay:.12s}
.hh-play .hh-bar i:nth-child(5){animation-delay:.24s}
@keyframes hh-up{from{opacity:0; transform:translateY(18px)}}
@keyframes hh-card{from{opacity:0; transform:translate(30px,10px) scale(.98)}}
@keyframes hh-pop{from{opacity:0; transform:translateY(-50%) scale(.9)}}
@keyframes hh-grow{from{transform:scaleX(0)}}
@keyframes hh-ping{0%{opacity:.9; transform:scale(.6)} 100%{opacity:0; transform:scale(1.9)}}

@media (max-width:900px){
  .hh-device{display:none}
  .hh-has-device .page-hero-inner > *{max-width:none}
  .hh-home-grid{grid-template-columns:minmax(0,1fr)}
  .hh-trust{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hh-trust > div{padding:20px}
  .hh-trust > div:nth-child(3){border-left:0}
  .hh-trust > div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.17)}
  .hh-trust > div:last-child{grid-column:span 2}
  .hh-shade{background:rgba(35,67,126,.82)}
}
@media (max-width:767px){
  .hh-card{padding:20px}
  .hh-card h2{font-size:24px; margin-bottom:10px}
  .hh-steps li{grid-template-columns:38px 1fr; padding:7px 0}
  .hh-steps li > b{grid-row:auto}
  .hh-steps li > span{display:none}
  .hh-trust b{font-size:26px}
}
@media (max-width:560px){
  .hh-trust{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hh-trust > div{padding:16px 14px; font-size:12.5px}
  .hh-trust b{font-size:24px}
  .hh-trust > div + div{border-left:1px solid rgba(255,255,255,.18)}
  .hh-trust > div:nth-child(3){border-left:0}
  .hh-trust > div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.18)}
}
@media (prefers-reduced-motion:reduce){
  .hh-play *, .hh-play *::after, .hh-bg .hh-ring{animation:none!important}
  .hh-bg use{transition:none}
}

/* Hauptbutton im Hero rot (Akzentfarbe aus dem Logo); Karte behält Blau */
.hh-hero .award-hero-actions .award-button:not(.award-button-secondary){background:var(--hh-red); border-color:var(--hh-red); color:#fff}