/* =========================================================================
   Hammer & Neuderth – Intro-Animation (Startseite)
   Sechs Varianten (data-variante 1–6), gemeinsamer Ablauf:
   Phase 1 (Variante) -> Logo baut sich auf -> Claim -> blaue Blende
   Wird nur einmal pro Browser-Sitzung gezeigt (sessionStorage),
   bei "Bewegung reduzieren" gar nicht.
   ========================================================================= */
#hun-intro {
    --hi-blau: #008FD7;
    --hi-blau-dunkel: #0071AB;
    --hi-text: #0f172a;
    --hi-bg: radial-gradient(ellipse at 50% 45%, #ffffff 0%, #f3f9fd 55%, #e3f1fa 100%);
    position: fixed; inset: 0; z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    background: var(--hi-bg);
    font-family: 'Inter', system-ui, sans-serif;
    overflow: hidden;
    /* Notbremse: falls JavaScript nicht läuft, verschwindet das Intro nach 9 s */
    animation: hi-notaus 0.4s ease 9s forwards;
}
html.hun-intro-aus #hun-intro { display: none !important; }
html.hun-intro-aktiv, html.hun-intro-aktiv body { overflow: hidden !important; }
@keyframes hi-notaus { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* feines Raster im Hintergrund */
.hi-grid {
    position: absolute; inset: -10%;
    background-image:
        linear-gradient(rgba(0, 143, 215, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 143, 215, .07) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%);
            mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%);
    opacity: 0; transform: scale(1.06);
    transition: opacity 1.2s ease, transform 3s ease-out;
}
#hun-intro.ist-gestartet .hi-grid { opacity: 1; transform: scale(1); }

/* blaue Kanten oben/unten */
.hi-kante { position: absolute; left: 0; right: 0; height: 6px; background: var(--hi-blau); transform: scaleX(0); transition: transform 1s cubic-bezier(.65, 0, .35, 1); }
.hi-kante.oben { top: 0; transform-origin: left; }
.hi-kante.unten { bottom: 0; transform-origin: right; }
#hun-intro.ist-gestartet .hi-kante { transform: scaleX(1); }

.hi-buehne { position: relative; width: min(360px, 80vw); height: 380px; }

/* ---------- Phase 1: Drucker ---------- */
.hi-druck { position: absolute; left: 50%; bottom: 40px; width: 230px; transform: translateX(-50%); transition: opacity .5s ease, transform .6s cubic-bezier(.65, 0, .35, 1); }
#hun-intro.ist-logo .hi-druck { opacity: 0; transform: translate(-50%, 40px) scale(.92); }
#hun-intro.ist-logo .hi-blattrahmen { opacity: 0; transform: translateY(-24px) scale(.96); }

.hi-blattrahmen { position: absolute; left: 50%; bottom: 58px; width: 150px; height: 196px; margin-left: -75px; overflow: hidden; transition: opacity .45s ease, transform .6s cubic-bezier(.65, 0, .35, 1); }
.hi-blatt {
    position: absolute; inset: 0; background: #fff; border-radius: 4px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .12), 0 0 0 1px rgba(15, 23, 42, .05);
    padding: 22px 18px; transform: translateY(100%);
    transition: transform 1.1s cubic-bezier(.35, .1, .25, 1) .15s;
}
#hun-intro.ist-gestartet .hi-blatt { transform: translateY(0); }
.hi-zeile { height: 6px; border-radius: 3px; background: #e2e8f0; margin-bottom: 11px; transform: scaleX(0); transform-origin: left; transition: transform .45s ease-out; }
.hi-zeile.kopf { height: 10px; background: var(--hi-blau); margin-bottom: 16px; }
#hun-intro.ist-gestartet .hi-zeile { transform: scaleX(1); }

.hi-drucker {
    position: relative; height: 64px; border-radius: 14px;
    background: linear-gradient(180deg, #334155 0%, #1e293b 100%);
    box-shadow: 0 18px 40px rgba(15, 23, 42, .25), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.hi-drucker::before { /* Ausgabeschlitz */
    content: ""; position: absolute; left: 30px; right: 30px; top: 0; height: 6px;
    border-radius: 0 0 6px 6px; background: #0b1220;
}
.hi-drucker::after { /* Bedienfeld */
    content: ""; position: absolute; right: 22px; bottom: 18px; width: 46px; height: 8px; border-radius: 4px;
    background: rgba(255, 255, 255, .14);
}
.hi-led { position: absolute; left: 22px; bottom: 18px; width: 9px; height: 9px; border-radius: 50%; background: var(--hi-blau); box-shadow: 0 0 10px var(--hi-blau); animation: hi-blinken .5s ease-in-out infinite alternate; }
@keyframes hi-blinken { from { opacity: .35; } to { opacity: 1; } }

/* ---------- Phase 2: Logo ---------- */
.hi-logo { position: absolute; left: 50%; top: 90px; width: min(480px, 78vw); aspect-ratio: 1050 / 178; transform: translateX(-50%); pointer-events: none; }
.hi-logo-innen { position: absolute; inset: 0; }
.hi-teil { position: absolute; inset: 0; background: url('logo-intro-2.png') center / 100% 100% no-repeat; opacity: 0; }
/* neues Querformat-Logo: nur ein Teil, es wird von links nach rechts aufgezogen */
.hi-teil.und, .hi-teil.n, .hi-teil.strich, .hi-teil.claim { display: none; }
.hi-teil.h { clip-path: inset(0 100% 0 0); transform: translateY(10px); }
#hun-intro.ist-logo .hi-teil.h { opacity: 1; clip-path: inset(0 0 0 0); transform: none; transition: opacity .3s ease, clip-path 1s cubic-bezier(.65, 0, .35, 1), transform .8s cubic-bezier(.2, .9, .3, 1); }

/* ---------- Phase 3: Text ---------- */
.hi-unter { position: absolute; left: 0; right: 0; top: 226px; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: #475569; }
.hi-unter span { display: inline-block; opacity: 0; transform: translateY(10px); transition: opacity .4s ease, transform .5s cubic-bezier(.2, .9, .3, 1); transition-delay: calc(var(--i) * 90ms); }
.hi-unter .punkt { color: var(--hi-blau); margin: 0 .35em; }
#hun-intro.ist-text .hi-unter span { opacity: 1; transform: none; }

.hi-claim { position: absolute; left: -140px; right: -140px; top: 266px; text-align: center; opacity: 0; transform: translateY(12px); transition: opacity .6s ease .35s, transform .7s cubic-bezier(.2, .9, .3, 1) .35s; }
.hi-claim b { display: block; font-size: clamp(18px, 2.4vw, 22px); font-weight: 700; color: var(--hi-text); }
.hi-claim small { display: block; margin: 6px auto 0; max-width: calc(100vw - 32px); font-size: 12px; color: #64748b; letter-spacing: .04em; }
#hun-intro.ist-text .hi-claim { opacity: 1; transform: none; }

/* ---------- Überspringen ---------- */
.hi-skip {
    position: absolute; right: 24px; bottom: 24px;
    padding: 10px 18px; border-radius: 999px; border: 1px solid #cbd5e1; background: rgba(255, 255, 255, .8);
    font: 600 12px/1 'Inter', system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #475569;
    cursor: pointer; transition: color .2s, border-color .2s, background .2s;
}
.hi-skip:hover, .hi-skip:focus-visible { color: #fff; background: var(--hi-blau); border-color: var(--hi-blau); outline: none; }

/* ---------- Phase 4: Blende ---------- */
.hi-blende { position: absolute; inset: 0; background: var(--hi-blau); transform: translateY(100%); z-index: 5; }
#hun-intro.ist-raus .hi-blende { animation: hi-blende 1s cubic-bezier(.76, 0, .24, 1) forwards; }
#hun-intro.ist-raus { animation: hi-hintergrund-weg 1s linear forwards; }
@keyframes hi-hintergrund-weg {
    0%, 49% { background: var(--hi-bg); }
    50%, 100% { background: transparent; }
}
#hun-intro.ist-raus > :not(.hi-blende) { opacity: 0; transition: opacity .01s linear .5s; }
@keyframes hi-blende {
    0%   { transform: translateY(100%); }
    50%  { transform: translateY(0); }
    100% { transform: translateY(-100%); }
}


/* =========================================================================
   Gemeinsam für dunkle/farbige Varianten (2, 4, 5): Logo auf weißer Karte,
   Text hell
   ========================================================================= */
#hun-intro[data-variante="2"], #hun-intro[data-variante="5"] {
    --hi-bg: radial-gradient(ellipse at 50% 40%, #12304a 0%, #0b1a2b 55%, #060f1a 100%);
}
#hun-intro[data-variante="4"] { --hi-bg: linear-gradient(135deg, #0098e4 0%, #008FD7 45%, #006ea6 100%); }
#hun-intro[data-variante="2"] .hi-logo::before,
#hun-intro[data-variante="4"] .hi-logo::before,
#hun-intro[data-variante="5"] .hi-logo::before {
    content: ""; position: absolute; inset: -20px -26px; border-radius: 22px; background: #fff;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .35); opacity: 0; transform: scale(.7);
    transition: opacity .35s ease, transform .6s cubic-bezier(.2, .9, .3, 1.2);
}
#hun-intro[data-variante="2"].ist-logo .hi-logo::before,
#hun-intro[data-variante="4"].ist-logo .hi-logo::before,
#hun-intro[data-variante="5"].ist-logo .hi-logo::before { opacity: 1; transform: none; }
#hun-intro[data-variante="2"] .hi-unter, #hun-intro[data-variante="5"] .hi-unter { color: rgba(255, 255, 255, .78); }
#hun-intro[data-variante="2"] .hi-claim b, #hun-intro[data-variante="4"] .hi-claim b, #hun-intro[data-variante="5"] .hi-claim b { color: #fff; }
#hun-intro[data-variante="2"] .hi-claim small, #hun-intro[data-variante="5"] .hi-claim small { color: rgba(255, 255, 255, .6); }
#hun-intro[data-variante="2"] .hi-unter, #hun-intro[data-variante="5"] .hi-unter { top: 240px; }
#hun-intro[data-variante="2"] .hi-claim, #hun-intro[data-variante="5"] .hi-claim,
#hun-intro[data-variante="4"] .hi-claim { top: 280px; }
#hun-intro[data-variante="2"] .hi-skip, #hun-intro[data-variante="5"] .hi-skip,
#hun-intro[data-variante="4"] .hi-skip { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .3); color: rgba(255, 255, 255, .85); }
#hun-intro[data-variante="2"] .hi-grid, #hun-intro[data-variante="5"] .hi-grid {
    background-image: linear-gradient(rgba(0, 143, 215, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 143, 215, .12) 1px, transparent 1px);
}
#hun-intro[data-variante="4"] .hi-grid, #hun-intro[data-variante="6"] .hi-grid { display: none; }
#hun-intro[data-variante="4"] .hi-kante, #hun-intro[data-variante="6"] .hi-kante { background: #fff; }

/* =========================================================================
   Variante 2 – Netzwerk
   ========================================================================= */
.hi-netz { position: absolute; left: 50%; top: 50%; width: min(700px, 94vw); transform: translate(-50%, -50%); overflow: visible;
    transition: opacity .6s ease, transform .9s cubic-bezier(.65, 0, .35, 1), filter .9s ease; }
#hun-intro.ist-logo .hi-netz { opacity: .14; transform: translate(-50%, -50%) scale(1.25); filter: blur(2px); }
.hi-netz-linie { stroke: var(--hi-blau); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .9;
    transition: stroke-dashoffset .6s cubic-bezier(.65, 0, .35, 1); }
#hun-intro.ist-gestartet .hi-netz-linie { stroke-dashoffset: 0; }
.hi-netz-ort { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.4); transition: opacity .3s ease, transform .45s cubic-bezier(.3, 1.6, .5, 1); }
#hun-intro.ist-gestartet .hi-netz-ort { opacity: 1; transform: none; }
.hi-netz-ort circle { fill: #0b1a2b; stroke: #5cc0f2; stroke-width: 2; }
.hi-netz text { fill: rgba(255, 255, 255, .82); font: 600 9px 'Inter', system-ui, sans-serif; letter-spacing: .02em; }
.hi-netz-zentrale circle { fill: var(--hi-blau); }
.hi-netz-zentrale text { fill: #fff; font-weight: 700; font-size: 10px; }
.hi-netz-welle { fill: none !important; stroke: var(--hi-blau); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: hi-welle 1.4s ease-out infinite; }
@keyframes hi-welle { from { transform: scale(1); opacity: .9; } to { transform: scale(4.5); opacity: 0; } }
.hi-netz-paket { fill: #fff; opacity: 0; filter: drop-shadow(0 0 4px #5cc0f2); }
#hun-intro.ist-gestartet .hi-netz-paket { animation: hi-paket 1.1s ease-in-out forwards; }
@keyframes hi-paket {
    0% { opacity: 0; transform: translate(var(--x0), var(--y0)); }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--x1), var(--y1)); }
}

/* =========================================================================
   Variante 3 – Scan
   ========================================================================= */
.hi-scan-dok { position: absolute; left: 50%; top: 50%; width: 190px; height: 250px; margin: -125px 0 0 -95px;
    transition: opacity .5s ease, transform .7s cubic-bezier(.65, 0, .35, 1); }
#hun-intro[data-variante="3"].ist-gestartet .hi-scan-dok { animation: hi-dok-rein .6s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes hi-dok-rein { from { opacity: 0; transform: translateY(30px) rotate(-3deg); } }
#hun-intro.ist-logo .hi-scan-dok { opacity: 0 !important; transform: translateX(140px) rotate(6deg) scale(.85) !important; }
.hi-scan-blatt { position: absolute; inset: 0; border-radius: 6px; padding: 26px 22px; background: #fff;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .14), 0 0 0 1px rgba(15, 23, 42, .05); }
.hi-scan-blatt .hi-zeile { transform: none; }
.hi-scan-blatt.analog .hi-zeile { background: #cbd5e1; }
.hi-scan-blatt.analog .hi-zeile.kopf { background: #64748b; }
.hi-scan-blatt.digital { background: #f2f9fe; box-shadow: 0 0 0 2px var(--hi-blau), 0 16px 40px rgba(0, 143, 215, .25);
    clip-path: inset(0 0 100% 0); }
.hi-scan-blatt.digital .hi-zeile { background: rgba(0, 143, 215, .35); background-image: repeating-linear-gradient(90deg, rgba(0, 143, 215, .9) 0 6px, transparent 6px 9px); }
.hi-scan-blatt.digital .hi-zeile.kopf { background: var(--hi-blau); }
#hun-intro[data-variante="3"].ist-gestartet .hi-scan-blatt.digital { animation: hi-scan-auf 1.15s cubic-bezier(.45, 0, .55, 1) .55s forwards; }
@keyframes hi-scan-auf { to { clip-path: inset(0 0 0 0); } }
.hi-scan-haken { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 5px 10px; border-radius: 999px;
    background: var(--hi-blau); color: #fff; font: 700 10px/1 'Inter', sans-serif; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
    opacity: 0; }
#hun-intro[data-variante="3"].ist-gestartet .hi-scan-haken { animation: hi-haken .35s cubic-bezier(.3, 1.6, .5, 1) 1.7s forwards; }
@keyframes hi-haken { from { opacity: 0; transform: translate(-50%, 6px) scale(.8); } to { opacity: 1; transform: translate(-50%, 0); } }
.hi-scan-balken { position: absolute; left: -16px; right: -16px; top: 0; height: 3px; border-radius: 2px; background: #5cc0f2;
    box-shadow: 0 0 12px 3px rgba(0, 143, 215, .7), 0 0 40px 10px rgba(0, 143, 215, .25); opacity: 0; }
#hun-intro[data-variante="3"].ist-gestartet .hi-scan-dok .hi-scan-balken { animation: hi-balken 1.15s cubic-bezier(.45, 0, .55, 1) .55s forwards; }
@keyframes hi-balken { 0% { top: 0; opacity: 1; } 92% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
/* Logo wird von oben nach unten "eingescannt" */
#hun-intro[data-variante="3"] .hi-logo-innen { clip-path: inset(0 0 100% 0); }
#hun-intro[data-variante="3"] .hi-teil { opacity: 1; transform: none !important; clip-path: none !important; transition: none !important; }
#hun-intro[data-variante="3"].ist-logo .hi-logo-innen { animation: hi-scan-auf .95s cubic-bezier(.45, 0, .55, 1) .1s forwards; }
#hun-intro[data-variante="3"].ist-logo .hi-scan-balken.logo { animation: hi-balken .95s cubic-bezier(.45, 0, .55, 1) .1s forwards; z-index: 2; }

/* =========================================================================
   Variante 4 – Kinetische Typografie
   ========================================================================= */
.hi-worte { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.hi-wort, .hi-wort-und { grid-area: 1 / 1; color: #fff; font-weight: 800; letter-spacing: -.03em; line-height: 1;
    font-size: clamp(44px, 9vw, 120px); opacity: 0; white-space: nowrap; }
#hun-intro.ist-gestartet .hi-wort { animation: hi-wort .3s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes hi-wort {
    0% { opacity: 0; transform: translateY(40%) scale(1.08); filter: blur(6px); }
    35% { opacity: 1; transform: none; filter: none; }
    80% { opacity: 1; transform: none; }
    100% { opacity: 0; transform: translateY(-30%) scale(.96); }
}
.hi-wort:nth-child(odd) { color: #d9f0fc; }
.hi-wort-und { font-size: clamp(120px, 22vw, 280px); }
#hun-intro.ist-gestartet .hi-wort-und { animation: hi-und .55s cubic-bezier(.3, 1.6, .5, 1) 1.95s both; }
@keyframes hi-und { from { opacity: 0; transform: scale(.3) rotate(-12deg); } to { opacity: 1; transform: none; } }
#hun-intro.ist-logo .hi-wort-und { animation: none; opacity: 0; transform: scale(.15); transition: opacity .35s ease, transform .5s cubic-bezier(.65, 0, .35, 1); }
#hun-intro[data-variante="4"] .hi-unter { color: rgba(255, 255, 255, .9); top: 240px; }
#hun-intro[data-variante="4"] .hi-unter .punkt { color: #fff; }
#hun-intro[data-variante="4"] .hi-claim small { color: rgba(255, 255, 255, .8); }
#hun-intro[data-variante="4"] .hi-blende { background: #fff; }

/* =========================================================================
   Variante 5 – Terminal
   ========================================================================= */
.hi-term { position: absolute; left: 50%; top: 50%; width: min(470px, 92vw); transform: translate(-50%, -50%);
    border-radius: 14px; background: rgba(6, 15, 26, .92); box-shadow: 0 30px 80px rgba(0, 0, 0, .5), 0 0 0 1px rgba(92, 192, 242, .25);
    overflow: hidden; opacity: 0; transition: opacity .5s ease, transform .7s cubic-bezier(.65, 0, .35, 1), filter .7s ease; }
#hun-intro.ist-gestartet .hi-term { opacity: 1; }
#hun-intro.ist-logo .hi-term { opacity: 0; transform: translate(-50%, -50%) scale(.9); filter: blur(3px); }
.hi-term-kopf { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: rgba(255, 255, 255, .05); border-bottom: 1px solid rgba(255, 255, 255, .07); }
.hi-term-kopf span { width: 10px; height: 10px; border-radius: 50%; background: #334155; }
.hi-term-kopf span:first-child { background: var(--hi-blau); }
.hi-term-kopf small { margin-left: 8px; font: 500 11px ui-monospace, Consolas, monospace; color: #64748b; }
.hi-term-inhalt { padding: 18px 20px 20px; font: 500 clamp(11px, 2.9vw, 13.5px)/1.75 ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace; color: #cbd5e1; }
.hi-term-zeile { width: 0; overflow: hidden; white-space: pre; }
#hun-intro.ist-gestartet .hi-term-zeile { animation: hi-tippen .32s steps(24, end) forwards; }
@keyframes hi-tippen { to { width: calc(var(--n) * 1ch + 1ch); } }
.hi-term-zeile i { font-style: normal; color: var(--hi-blau); }
.hi-term-zeile em { font-style: normal; color: #5cc0f2; }
.hi-term-zeile b { color: #7ee0a8; font-weight: 700; }
.hi-term-zeile:last-of-type b { color: #fff; }
.hi-term-cursor { width: 9px; height: 16px; margin-top: 4px; background: var(--hi-blau); animation: hi-cursor .8s steps(1) infinite; }
@keyframes hi-cursor { 50% { opacity: 0; } }

/* =========================================================================
   Variante 6 – Kacheln
   ========================================================================= */
#hun-intro[data-variante="6"] { --hi-bg: #ffffff; perspective: 1200px; }
.hi-kacheln { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--spalten), 1fr); grid-template-rows: repeat(var(--reihen), 1fr); }
.hi-kacheln i { display: block; background: var(--hi-blau); transform: rotateX(90deg); opacity: 0; backface-visibility: hidden; }
.hi-kacheln i:nth-child(3n) { background: #0085c9; }
.hi-kacheln i:nth-child(5n+2) { background: #0098e4; }
#hun-intro.ist-gestartet .hi-kacheln i { animation: hi-kachel-rein .5s cubic-bezier(.2, .9, .3, 1) var(--rein) forwards, hi-kachel-raus .5s cubic-bezier(.65, 0, .35, 1) var(--raus) forwards; }
@keyframes hi-kachel-rein { from { transform: rotateX(90deg); opacity: 0; } to { transform: rotateX(0); opacity: 1; } }
@keyframes hi-kachel-raus { from { transform: rotateY(0); opacity: 1; } to { transform: rotateY(-90deg) scale(.8); opacity: 0; } }
.hi-kachel-titel { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; color: #fff;
    font-weight: 800; font-size: clamp(30px, 6vw, 72px); letter-spacing: -.02em; opacity: 0; }
.hi-kachel-titel b { color: #fff; border-bottom: 6px solid #fff; }
#hun-intro.ist-gestartet .hi-kachel-titel { animation: hi-titel 1.3s cubic-bezier(.2, .9, .3, 1) .7s both; }
@keyframes hi-titel {
    0% { opacity: 0; letter-spacing: .3em; filter: blur(8px); }
    35% { opacity: 1; letter-spacing: -.02em; filter: none; }
    80% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-50%) scale(1.1); }
}

/* =========================================================================
   Familien-Thema „blau“ (Varianten 7–9, Stil von Variante 4)
   ========================================================================= */
#hun-intro[data-thema="blau"] { --hi-bg: linear-gradient(135deg, #0098e4 0%, #008FD7 45%, #006ea6 100%); }
#hun-intro[data-thema="blau"] .hi-grid { display: none; }
#hun-intro[data-thema="blau"] .hi-kante { background: #fff; }
#hun-intro[data-thema="blau"] .hi-logo::before {
    content: ""; position: absolute; inset: -20px -26px; border-radius: 22px; background: #fff;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .3); opacity: 0; transform: scale(.7);
    transition: opacity .35s ease, transform .6s cubic-bezier(.2, .9, .3, 1.2);
}
#hun-intro[data-thema="blau"].ist-logo .hi-logo::before { opacity: 1; transform: none; }
#hun-intro[data-thema="blau"] .hi-unter { color: rgba(255, 255, 255, .9); top: 240px; }
#hun-intro[data-thema="blau"] .hi-unter .punkt { color: #fff; }
#hun-intro[data-thema="blau"] .hi-claim { top: 280px; }
#hun-intro[data-thema="blau"] .hi-claim b { color: #fff; }
#hun-intro[data-thema="blau"] .hi-claim small { color: rgba(255, 255, 255, .8); }
#hun-intro[data-thema="blau"] .hi-skip { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .35); color: #fff; }
#hun-intro[data-thema="blau"] .hi-blende { background: #fff; }

/* 7 – Stapel */
.hi-stapel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; gap: .04em;
    font-weight: 800; letter-spacing: -.035em; line-height: 1.02; font-size: clamp(30px, 6vw, 76px); color: #fff;
    transition: opacity .45s ease, transform .7s cubic-bezier(.65, 0, .35, 1); }
.hi-stapel-zeile { overflow: hidden; padding-bottom: .06em; }
.hi-stapel-zeile span { display: inline-block; transform: translateY(105%); }
.hi-stapel-zeile i { font-style: normal; color: #9fdcfb; }
#hun-intro.ist-gestartet .hi-stapel-zeile span { animation: hi-stapel-rein .55s cubic-bezier(.2, .9, .3, 1) var(--d) forwards, hi-stapel-leise .4s ease var(--n) forwards; }
#hun-intro.ist-gestartet .hi-stapel-zeile:last-child span { animation: hi-stapel-rein .55s cubic-bezier(.2, .9, .3, 1) var(--d) forwards; }
@keyframes hi-stapel-rein { to { transform: none; } }
@keyframes hi-stapel-leise { to { transform: none; opacity: .32; } }
#hun-intro.ist-logo .hi-stapel { opacity: 0; transform: translate(-50%, -62%) scale(.94); }

/* 8 – Laufband */
.hi-baender { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: clamp(6px, 1.4vw, 18px);
    transform: rotate(-6deg) scale(1.12); }
.hi-band { overflow: hidden; white-space: nowrap; font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; line-height: 1;
    font-size: clamp(46px, 9.5vw, 132px); opacity: 0; transition: transform .8s cubic-bezier(.65, 0, .35, 1), opacity .5s ease; }
.hi-band-lauf { display: inline-flex; }
.hi-band span { padding-right: .3em; }
.hi-band.b0, .hi-band.b2 { color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, .9); }
.hi-band.b1 { color: #fff; }
#hun-intro.ist-gestartet .hi-band { opacity: 1; }
#hun-intro.ist-gestartet .hi-band.b0 { transition-delay: .05s; }
#hun-intro.ist-gestartet .hi-band.b1 { transition-delay: .2s; }
#hun-intro.ist-gestartet .hi-band.b2 { transition-delay: .35s; }
#hun-intro.ist-gestartet .hi-band .hi-band-lauf { animation: hi-band-links 7s linear infinite; }
#hun-intro.ist-gestartet .hi-band.b1 .hi-band-lauf { animation-name: hi-band-rechts; animation-duration: 6s; }
@keyframes hi-band-links { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes hi-band-rechts { from { transform: translateX(-50%); } to { transform: translateX(0); } }
#hun-intro.ist-logo .hi-band.b0 { transform: translateY(-140%); opacity: 0; }
#hun-intro.ist-logo .hi-band.b2 { transform: translateY(140%); opacity: 0; }
#hun-intro.ist-logo .hi-band.b1 { transform: scale(.85); opacity: 0; }

/* 9 – Monogramm */
.hi-mono-wort { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; color: #fff;
    font-weight: 800; letter-spacing: -.02em; font-size: clamp(34px, 7vw, 90px); white-space: nowrap; }
.hi-mono-wort span { display: inline-block; opacity: 0; transform: translateY(60%); }
#hun-intro.ist-gestartet .hi-mono-wort span { animation: hi-buchstabe .5s cubic-bezier(.2, .9, .3, 1.2) calc(.1s + var(--i) * 45ms) forwards,
    hi-buchstabe-weg .35s ease-in calc(1.15s + var(--i) * 18ms) forwards; }
@keyframes hi-buchstabe { to { opacity: 1; transform: none; } }
@keyframes hi-buchstabe-weg { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-70%); } }
.hi-mono { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .02em; color: #fff;
    font-weight: 900; line-height: 1; font-size: clamp(110px, 25vw, 330px); letter-spacing: -.04em;
    transition: transform .6s cubic-bezier(.65, 0, .35, 1), opacity .4s ease .15s; }
.hi-mono span { display: inline-block; opacity: 0; }
.hi-mono .m-und { font-size: .55em; color: #0b2f47; margin: 0 .04em; }
#hun-intro.ist-gestartet .hi-mono .m-h { animation: hi-schlag-links .55s cubic-bezier(.2, 1.1, .3, 1.1) 1.45s forwards; }
#hun-intro.ist-gestartet .hi-mono .m-n { animation: hi-schlag-rechts .55s cubic-bezier(.2, 1.1, .3, 1.1) 1.6s forwards; }
#hun-intro.ist-gestartet .hi-mono .m-und { animation: hi-und-dreh .5s cubic-bezier(.3, 1.6, .5, 1) 1.85s forwards; }
@keyframes hi-schlag-links { from { opacity: 0; transform: translateX(-70%) skewX(-12deg); } to { opacity: 1; transform: none; } }
@keyframes hi-schlag-rechts { from { opacity: 0; transform: translateX(70%) skewX(12deg); } to { opacity: 1; transform: none; } }
@keyframes hi-und-dreh { from { opacity: 0; transform: scale(2.6) rotate(-90deg); } to { opacity: 1; transform: none; } }
#hun-intro.ist-logo .hi-mono { transform: scale(.32) translateY(-40%); opacity: 0; }

/* =========================================================================
   Familien-Thema „kachel“ (Varianten 10–12, Stil von Variante 6)
   ========================================================================= */
#hun-intro[data-thema="kachel"] { --hi-bg: #ffffff; perspective: 1200px; }
#hun-intro[data-thema="kachel"] .hi-grid { display: none; }
.hi-kachel-titel .p { color: #9fdcfb; border: 0; }
.hi-kachel-titel.klein { font-size: clamp(24px, 4.6vw, 56px); }

/* 10 – Zentrum */
.hi-kacheln.zentrum { gap: 3px; background: transparent; }
.hi-kacheln.zentrum i { transform: scale(0); opacity: 1; border-radius: 40%; }
#hun-intro.ist-gestartet .hi-kacheln.zentrum i { animation: hi-zentrum-rein .55s cubic-bezier(.2, .9, .3, 1.1) var(--rein) forwards, hi-zentrum-raus .5s cubic-bezier(.65, 0, .35, 1) var(--raus) forwards; }
@keyframes hi-zentrum-rein { from { transform: scale(0); border-radius: 50%; } to { transform: scale(1.06); border-radius: 4px; } }
@keyframes hi-zentrum-raus { from { transform: scale(1.06); border-radius: 4px; } to { transform: scale(0); border-radius: 50%; } }

/* 11 – Jalousie */
.hi-lamellen { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--n), 1fr); overflow: hidden; }
.hi-lamellen i { display: block; background: var(--hi-blau); transform: translateY(-101%); }
.hi-lamellen i:nth-child(odd) { background: #0085c9; }
.hi-lamellen i.von-unten { transform: translateY(101%); }
#hun-intro.ist-gestartet .hi-lamellen i.von-oben { animation: hi-lam-oben-rein .6s cubic-bezier(.65, 0, .35, 1) var(--rein) forwards, hi-lam-oben-raus .6s cubic-bezier(.65, 0, .35, 1) var(--raus) forwards; }
#hun-intro.ist-gestartet .hi-lamellen i.von-unten { animation: hi-lam-unten-rein .6s cubic-bezier(.65, 0, .35, 1) var(--rein) forwards, hi-lam-unten-raus .6s cubic-bezier(.65, 0, .35, 1) var(--raus) forwards; }
@keyframes hi-lam-oben-rein { from { transform: translateY(-101%); } to { transform: none; } }
@keyframes hi-lam-unten-rein { from { transform: translateY(101%); } to { transform: none; } }
@keyframes hi-lam-oben-raus { from { transform: none; } to { transform: translateY(101%); } }
@keyframes hi-lam-unten-raus { from { transform: none; } to { transform: translateY(-101%); } }

/* 12 – Pixel */
.hi-kacheln.pixel i { transform: scale(.3); opacity: 0; }
.hi-kacheln.pixel i { background: color-mix(in srgb, var(--hi-blau) calc(100% - var(--ton) * 9%), #003f60); }
#hun-intro.ist-gestartet .hi-kacheln.pixel i { animation: hi-pixel-rein .22s ease-out var(--rein) forwards, hi-pixel-raus .22s ease-in var(--raus) forwards; }
@keyframes hi-pixel-rein { from { transform: scale(.3); opacity: 0; } to { transform: scale(1.02); opacity: 1; } }
@keyframes hi-pixel-raus { from { transform: scale(1.02); opacity: 1; } to { transform: scale(.3); opacity: 0; } }

@media (max-height: 520px) {
    .hi-buehne { transform: scale(.78); }
}
@media (prefers-reduced-motion: reduce) {
    #hun-intro { display: none !important; }
}