/* ============================================
   Header-Slim + Logo-Komposition + Spot-Ticker
   ============================================ */

.header-inner {
    height: 110px !important;
    padding: 1.1rem 2rem 0.45rem 2rem !important;
    align-items: center !important;
}

/* Logo-Komposition, neues Logo ab 27.08.2026.
   Aufbau: Bildmarke links, rechts Wortmarke ueber Claim.
   Alle Masse leiten sich aus --logo-h (Gesamthoehe des Logoblocks) ab.
   Bezug ist die Original-Geometrie der Logodatei in pt:
     Marke      53.76 x 47.28
     Luecke     11.28
     Wortmarke 145.80 x 30.24
     Luecke      7.20
     Claim     145.80 x 10.08
     gesamt    210.84 x 47.52   (Verhaeltnis 4.437 : 1)
   --logo-h 61.83px entspricht exakt der Hoehe des vorherigen Logos. */
.header .logo, .footer .logo {
    --logo-h: 61.83px;
    display: inline-flex !important;
    flex-direction: row;
    align-items: center;
    gap: calc(var(--logo-h) * 11.28 / 47.52);
    text-decoration: none;
    line-height: 1;
    flex-shrink: 0;
}

.header .logo .logo-mark, .footer .logo .logo-mark {
    height: calc(var(--logo-h) * 47.28 / 47.52);
    width: auto;
    display: block;
    flex-shrink: 0;
}

/* .logo-top traegt jetzt die Textspalte: Wortmarke ueber Claim */
.header .logo .logo-top, .footer .logo .logo-top {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    gap: calc(var(--logo-h) * 7.2 / 47.52);
}

.header .logo .logo-wordmark, .footer .logo .logo-wordmark {
    height: calc(var(--logo-h) * 30.24 / 47.52);
    width: auto;
    display: block;
}

.header .logo .logo-claim, .footer .logo .logo-claim {
    display: block;
    width: 100%;
    aspect-ratio: 145.8 / 10.08;
    background-image: url('/assets/images/logos/elements/claim.svg?v=2026082701');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* Nav = Grid: Logo zentriert, Ticker + Reiter tiefer */
.nav {
    display: grid !important;
    align-self: flex-end !important;
    padding-bottom: 2px !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    column-gap: 1.5rem !important;
    row-gap: 6px !important;
    align-items: center !important;
}

.nav .spot-ticker {
    grid-row: 1;
    grid-column: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.9rem;
    padding: 4px 0;
    border-bottom: 1px solid rgba(200,158,41,0.18);
    width: 100%;
}

.nav .nav-links {
    grid-row: 2;
    grid-column: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
}



/* Ticker-Item */
.tick {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
    font-size: 0.78rem;
    line-height: 1;
    white-space: nowrap;
}

.tick-label {
    color: var(--gold, #c89e29);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.tick-value {
    color: #fff;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.tick-delta {
    font-size: 0.68rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    min-width: 4.5ch;
    color: rgba(255,255,255,0.4);
}
.tick-delta.up   { color: #4ade80; }
.tick-delta.down { color: #f87171; }

.spot-ticker.market-closed::after {
    content: 'Markt geschlossen';
    font-size: 0.65rem;
    color: rgba(255,255,255,0.45);
    font-style: italic;
    letter-spacing: 0.03em;
    margin-left: 0.6rem;
}
.spot-ticker.market-closed .tick-delta { display: none; }

/* Cylinder-Roll Animation */
.roll {
    display: inline-block;
    position: relative;
    height: 1em;
    line-height: 1;
    perspective: 90px;
    vertical-align: bottom;
    overflow: visible;
}
.roll-face {
    display: inline-block;
    transform-origin: center;
    backface-visibility: hidden;
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.45s ease;
    transform: rotateX(0deg);
    opacity: 1;
}
.roll.animate .roll-face {
    transform: rotateX(-90deg);
    opacity: 0;
}
.roll-face-new {
    display: inline-block;
    position: absolute;
    inset: 0;
    transform-origin: center;
    backface-visibility: hidden;
    transform: rotateX(90deg);
    opacity: 0;
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.45s ease 0.05s;
    white-space: nowrap;
}
.roll.animate .roll-face-new {
    transform: rotateX(0deg);
    opacity: 1;
}
.roll.flash-up   .roll-face-new { color: #4ade80; }
.roll.flash-down .roll-face-new { color: #f87171; }

.nav {
    align-items: center !important;
}

.hero {
    padding-top: 110px !important;
}

@media (max-width: 1180px) {
    .tick { font-size: 0.72rem; gap: 0.35rem; }
    .tick-delta { font-size: 0.62rem; }
    .nav .spot-ticker { gap: 0.55rem; }
}


/* Reiter wie Dropdown-Eintraege (font-size + color) */
.header .nav .nav-link {
    font-size: 0.85rem !important;
    padding: 0.5rem 1rem !important;
    color: #fff !important;
    font-weight: 600 !important;
}

/* Zwischenbereich 969-1099 px: Dort steht die Navigation noch waagerecht,
   der Platz reicht aber nicht fuer das breitere neue Logo - es wuerde in die
   Navigation laufen. Hier bekommt das Logo exakt die Breite des vorherigen
   Logos (193 px), damit sich am Platzbedarf gegenueber vorher nichts aendert.
   Der Footer ist nicht betroffen und behaelt die volle Groesse. */
@media (max-width: 1099px) {
    .header .logo { --logo-h: 43.5px; }
}

@media (max-width: 968px) {
    .nav {
        top: 110px !important;
    }
    .header-inner {
        height: 78px !important;
        padding: 0.55rem 1rem !important;
    }
    .header .logo, .footer .logo { --logo-h: 54.11px; }
    .hero { padding-top: 78px !important; }
    .nav .spot-ticker { display: none; }
    .nav { display: flex !important; flex-direction: column; align-items: stretch !important; gap: 0.5rem !important; }
}

@media (max-width: 480px) {
    .header .logo .logo-claim, .footer .logo .logo-claim { display: none; }
    .header .logo, .footer .logo { --logo-h: 34px; }
    .header-inner { height: 60px !important; padding: 0.4rem 1rem !important; }
    .hero { padding-top: 60px !important; }
    .nav { top: 60px !important; }
}

/* Sehr schmale Geraete (bis 340 px): Dort steht das Logo direkt neben dem
   Menue-Symbol. Auf 133 px Breite gebracht - der Wert des vorherigen Logos. */
@media (max-width: 340px) {
    .header .logo { --logo-h: 30px; }
}

/* Login-Button: ausserhalb der nav, vertikal mittig wie Logo */
.header-inner > .nav-partner {
    align-self: center !important;
}