/* Beide Marken haben dieselbe Breite und Mittelachse; links bleibt Platz fürs Kreuz. */
.nav--markenwelt { --markenlogo-breite: 220px; }
.nav--markenwelt .nav-inner { height: auto; min-height: 54px; }
.nav--markenwelt .nav-identity { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: calc(var(--markenlogo-breite) + 44px); padding: 6px 0 6px 44px; grid-area: logo; }
.nav--markenwelt .nav-logo { padding: 4px 0; }
.nav--markenwelt .nav-logo img { width: var(--markenlogo-breite); }
.markenwelt-kennung { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; }
.markenwelt-logo { display: flex; align-items: center; justify-content: center; width: var(--markenlogo-breite); min-height: 36px; text-decoration: none; color: var(--text-strong); font-weight: 600; }
.markenwelt-logo img { display: block; max-width: 132px; max-height: 30px; object-fit: contain; }
.markenwelt-logo--dunkel { background: var(--petrol); }
.markenwelt-exit { position: absolute; left: -44px; top: 0; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--petrol); border-radius: var(--radius-sm); }
.markenwelt-exit:hover { background: var(--petrol-nebel); }
.markenwelt-kennung a:focus-visible, .markenwelt-dialog :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.markenwelt-dialog { margin: auto; width: min(520px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; padding: clamp(20px, 5vw, 36px); border: 1px solid var(--border); background: var(--surface); color: var(--text); box-shadow: var(--shadow-card); }
.markenwelt-dialog::backdrop { background: color-mix(in srgb, var(--petrol-tief) 65%, transparent); }
.markenwelt-dialog h2 { margin: 0 0 12px; font-size: 26px; line-height: 1.2; color: var(--text-strong); }
.markenwelt-dialog-aktionen { display: grid; gap: 12px; margin-top: 24px; }
.markenwelt-dialog .ss-btn { white-space: normal; text-align: center; }
@media(max-width: 560px) {
    .nav--markenwelt { --markenlogo-breite: clamp(160px, calc(100vw - 168px), 196px); }
    .nav--markenwelt .nav-inner { column-gap: 6px; padding-inline: 8px; }
}