.site-header { position: relative; z-index: 100; width: 100%; border-bottom: 1px solid var(--color-border-warm); background: var(--color-ivory); color: var(--color-graphite); }
.site-header__band { height: 7px; background: repeating-linear-gradient(90deg, var(--color-sky) 0 76px, var(--color-ivory) 76px 84px, var(--color-tangerine) 84px 102px, var(--color-ivory) 102px 110px, var(--color-sky) 110px 188px); }
.site-header__inner { position: relative; display: flex; min-height: 78px; align-items: center; gap: clamp(12px, 2vw, 28px); }
.site-header__brand { display: flex; min-width: 0; flex: 0 1 222px; align-items: center; gap: 10px; color: var(--color-graphite); text-decoration: none; }
.site-header__brand:hover { color: var(--color-graphite); }
.site-header__mark-wrap { display: grid; width: 48px; height: 48px; flex: 0 0 48px; place-items: center; overflow: hidden; border: 1px solid var(--color-border-cool); border-radius: 10px; background: var(--color-sky); }
.site-header__mark { width: 48px; height: 48px; max-width: none; object-fit: contain; }
.site-header__brand-copy { display: grid; min-width: 0; gap: 2px; }
.site-header__wordmark, .site-header__strapline, .site-header__nav-heading, .site-header__nav-strapline { font-family: var(--font-heading); }
.site-header__wordmark { font-size: 18px; font-weight: 700; letter-spacing: 0.02em; line-height: 1; white-space: nowrap; }
.site-header__strapline { color: var(--color-graphite-soft); font-size: 9px; font-weight: 650; letter-spacing: 0.075em; line-height: 1.25; white-space: nowrap; }
.site-header__controls { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; margin-left: auto; }
.site-header__cta { min-height: 44px; white-space: nowrap; }
.site-header__toggle { display: none; min-width: 44px; min-height: 44px; align-items: center; gap: 7px; padding: 8px; border: 1px solid var(--color-graphite); border-radius: var(--radius-control); color: var(--color-graphite); font-family: var(--font-heading); font-size: 13px; font-weight: 650; line-height: 1; }
.site-header__toggle-icon { display: grid; width: 16px; gap: 4px; }
.site-header__toggle-icon span { display: block; width: 16px; height: 2px; background: currentColor; transition: transform var(--transition-fast); }
.site-header__nav { display: flex; min-width: 0; align-items: center; gap: 16px; order: 2; }
.site-header__nav-strapline, .site-header__nav-heading, .site-header__mobile-cta { display: none; }
.site-header__nav-group { min-width: 0; }
.site-header__nav-list { display: flex; align-items: center; gap: 12px; margin: 0; padding: 0; list-style: none; }
.site-header__nav-list li, .site-header__nav-list li + li { display: flex; align-items: center; margin: 0; padding: 0; }
.site-header__nav-list a { position: relative; display: inline-flex; min-height: 44px; align-items: center; color: var(--color-graphite); font-family: var(--font-heading); font-size: 14px; font-weight: 500; letter-spacing: -0.02em; line-height: 1; text-decoration: none; white-space: nowrap; }
.site-header__nav-list a::after { position: absolute; bottom: 8px; left: 0; width: 100%; height: 2px; transform: scaleX(0); transform-origin: left; background: var(--color-tangerine); content: ""; transition: transform var(--transition-fast); }
.site-header__nav-list a:hover::after, .site-header__nav-list a[aria-current="page"]::after { transform: scaleX(1); }
.site-header__nav-list a[aria-current="page"]::before { width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: var(--color-emerald); content: ""; }
.site-header__nav-group--casino { display: none; }
.site-header__nav-group--contact .site-header__nav-list { gap: 0; }
@media (max-width: 74.99rem) { .site-header__nav-group--primary .site-header__nav-list { gap: 9px; } .site-header__desktop-only { display: none !important; } }
@media (max-width: 63.99rem) { .site-header__inner { min-height: 70px; } .site-header__nav { position: absolute; z-index: 2; top: calc(100% + 1px); right: 0; left: 0; display: grid; max-height: calc(100vh - 77px); padding: 20px max(var(--container-padding), 16px) 24px; overflow-y: auto; border-bottom: 1px solid var(--color-border-warm); background: var(--color-ivory-warm); box-shadow: var(--shadow-float); opacity: 0; pointer-events: none; transform: translateY(-12px); transition: opacity var(--transition-fast), transform var(--transition-fast); } .site-header__nav.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); } .site-header__toggle { display: inline-flex; } .site-header__toggle[aria-expanded="true"] .site-header__toggle-label { font-size: 0; } .site-header__toggle[aria-expanded="true"] .site-header__toggle-label::after { font-size: 13px; content: "Schließen"; } .site-header__toggle[aria-expanded="true"] .site-header__toggle-icon span:first-child { transform: translateY(3px) rotate(45deg); } .site-header__toggle[aria-expanded="true"] .site-header__toggle-icon span:last-child { transform: translateY(-3px) rotate(-45deg); } .site-header__nav-strapline { display: block; margin: 0 0 8px; color: var(--color-graphite-soft); font-size: 10px; font-weight: 650; letter-spacing: .08em; line-height: 1.4; } .site-header__nav-group { padding-top: 14px; border-top: 1px solid var(--color-border-warm); } .site-header__nav-heading { display: block; margin-bottom: 6px; color: var(--color-graphite-soft); font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; } .site-header__nav-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; } .site-header__nav-list a { min-height: 42px; } .site-header__nav-group--casino { display: block; } .site-header__nav-group--contact { padding-bottom: 6px; } .site-header__mobile-cta { display: inline-flex; width: 100%; min-height: 52px; margin-top: 8px; } }
@media (max-width: 39.99rem) { .site-header__inner { min-height: 64px; gap: 8px; } .site-header__mark-wrap, .site-header__mark { width: 38px; height: 38px; } .site-header__mark-wrap { flex-basis: 38px; } .site-header__brand { flex-basis: auto; gap: 8px; } .site-header__wordmark { font-size: 15px; } .site-header__strapline { display: none; } .site-header__cta { display: none; } .site-header__toggle { min-height: 40px; } .site-header__nav { max-height: calc(100vh - 71px); } .site-header__nav-list { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .site-header__nav, .site-header__toggle-icon span { transition: none; } }