/* Redesign hero (ghero) — extracted from webroot/redesign/final.html + the unified
   "Hero V2" block shared by all sub pages (funktionen/preise/hardware/kontakt/
   branche/kundenbeispiel). Page-specific h1/sub/stage variants live in
   pages/redesign-<page>.css and intentionally load after this file. */
.ghero { font-family: var(--g-body); font-size: 1.2rem; line-height: 1.55; }
.ghero {
    position: relative; overflow: hidden;
    background:
        radial-gradient(ellipse 70% 60% at 78% 20%, rgba(255,255,255,.14), transparent 60%),
        linear-gradient(168deg, #6d8cbd 0%, #5174ac 42%, #48679c 100%);
    color: #fff;
}
/* Light cone (adapted from the live site) */
.ghero::before {
    content: ""; position: absolute; top: -30%; left: 8%;
    width: 60%; height: 200%;
    background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.45), rgba(255,255,255,.14) 30%, transparent 58%);
    transform: rotate(16deg);
    pointer-events: none;
}
.ghero > .wrap, .ghero .wrap { position: relative; z-index: 2; }

/* Announcement pill */
.gannounce {
    display: inline-flex; align-items: center; gap: 10px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 999px; padding: 6px 16px 6px 7px;
    font-size: .95rem; color: #eaf0fa;
    backdrop-filter: blur(4px);
    margin-bottom: .85rem;
}
.gannounce .tag {
    background: var(--g-yellow); color: var(--g-navy);
    font-family: var(--g-display-bold); text-transform: uppercase;
    font-size: .78rem; padding: 3px 11px; border-radius: 999px;
}

/* CTA row inside hero (start page overrides margin-top to 2rem) */
.ghero-row { display: flex; align-items: center; gap: 24px; margin-top: 1.8rem; flex-wrap: wrap; }

/* Horizontal ground glow (original: #header.blue .footer) */
.ghero .gfooter {
    position: absolute; left: 0; right: 0; bottom: 0; height: 25%;
    background: linear-gradient(180deg, rgba(184,202,238,0) 0%, rgba(184,202,238,.5) 25%, rgba(184,202,238,.6) 30%, rgba(128,154,208,1) 100%);
    pointer-events: none;
}

/* Unified hero V2 (reference: start page) — grid, Muffel stage, spot */
.ghero .ghero-grid, .ghero--page .ghero-grid {
    display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: 3rem; align-items: center;
    padding: 3rem 28px 0;
    min-height: 480px;
}
.ghero-stage { position: relative; text-align: center; align-self: end; }
.ghero-stage img { height: 380px; width: auto; max-width: none; margin-bottom: 4rem !important; display: inline-block; position: relative; z-index: 2; filter: drop-shadow(0 26px 28px rgba(16, 30, 54, .35)); }
.ghero-stage .gspot { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.16), transparent 62%); }
.ghero .ghero-grid > div:first-child { padding-bottom: 4rem; }
@media (max-width: 1100px) { .ghero-stage img { height: 300px; } }
@media (max-width: 900px) {
    .ghero .ghero-grid, .ghero--page .ghero-grid { grid-template-columns: 1fr; min-height: 0; }
    /* mascot stage moves below the full-width text block */
    .ghero-stage img { height: 220px; margin-bottom: 2rem !important; }
    .ghero .ghero-grid > div:first-child { padding-bottom: 0; }
    /* grid children may not force min-content width (the one-line
       announcement pill would otherwise overflow the viewport) */
    .ghero .ghero-grid > div, .ghero--page .ghero-grid > div { min-width: 0; }
    /* announcement, headline, copy and buttons span the full width */
    .gannounce { display: flex; width: 100%; flex-wrap: wrap; box-sizing: border-box; justify-content: center; text-align: center; margin-bottom: 1.85rem; }
    .ghero h1 { max-width: none; overflow-wrap: break-word; hyphens: auto; }
    .ghero-sub { max-width: none; }
    .ghero-row { flex-direction: column; align-items: stretch; gap: 12px; }
    .ghero-row .gbtn,
    .ghero-row .btn,
    .ghero .ghero-video { width: 100%; text-align: center; justify-content: center; box-sizing: border-box; }
    /* "kostenlos, inkl. gratis Beratungstermin" note centered below the button */
    .ghero-note { text-align: center; width: 100%; }
}
.ghero--page .ghero-stage img { margin-bottom: -3.6rem; }
@media (max-width: 900px) { .ghero--page .ghero-stage img { margin-bottom: -2rem; } }

/* ---------- Global fallbacks (pages without a pages/redesign-*.css) ----------
   Page CSS loads after this file and overrides where needed. */
.ghero h1 {
    color: #fff;
    font-family: var(--g-display);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .01em;
    font-size: var(--g-t-hero);
    line-height: 1.06;
    margin: 18px 0 0;
}
.ghero h1 b { font-family: var(--g-display-bold); font-weight: 400; color: var(--g-yellow); }
.ghero-sub { font-size: 1.15rem; color: #e6edf8; margin-top: 1.2rem; max-width: 62ch; }
.ghero-note { font-size: .95rem; color: #cdd9ec; margin-top: 14px; }
.ghero-note em { font-style: italic; }
.ghero-note a { color: #fff; }
.ghero-video {
    display: inline-flex; align-items: center; gap: 10px;
    color: #eaf0fa; text-decoration: none; font-size: .98rem;
}
.ghero-video:hover { color: #fff; }
.ghero-video .dot {
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .68rem; color: var(--g-yellow);
}
/* Legacy "bracket" bullet list from the old header, restyled as hero list */
.ghero-brackets { list-style: none; margin: 1.2rem 0 0; padding: 0; }
.ghero-brackets li { position: relative; padding: 3px 0 3px 26px; color: #e6edf8; font-size: 1.02rem; }
.ghero-brackets li::before {
    content: "\f00c"; font-family: "Font Awesome 5 Pro"; font-weight: 900;
    position: absolute; left: 0; top: 3px; color: var(--g-yellow); font-size: .8rem;
}

/* rotating hero words (kutego.js handleTypedWords rewrites [data-words]
   into b.words > b.words--top/b.words--bottom; keyframes taken from the
   old kutego.css which is no longer loaded on redesign pages) */
.ghero .words {
    /* the rotating word sits on its own line (after a <br>), so it must
       stay in flow and reserve one line of height; overflow clips the
       roll-in/roll-out animation */
    position: relative;
    display: block;
    width: 100%;
    height: 1.15em;
    line-height: 1.15em;
    overflow: hidden;
    text-align: inherit;
}

.ghero .words--top,
.ghero .words--bottom {
    display: inline-block;
    animation: 1.3s ease .1s infinite running none;
    animation-delay: 2500ms;
}

.ghero .words--top {
    animation-name: spinTop;
}

.ghero .words--bottom {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    animation-name: spinBottom;
}

@keyframes spinTop {
    0% { transform: translateY(0%); }
    20% { transform: translateY(-100%); }
    100% { transform: translateY(-100%); }
}

@keyframes spinBottom {
    0% { opacity: 1; transform: translateY(100%); }
    20% { opacity: 1; transform: translateY(0%); }
    100% { opacity: 1; transform: translateY(0%); }
}

@media (prefers-reduced-motion: reduce) {
    .ghero .words--top,
    .ghero .words--bottom { animation: none; }
}