/* Shop-Kopf für statische Landings (LP, 10.11.2026) – Nachbau des Live-Kopfs von livarea.de nach Messung
   (Playwright, Kategorie Sideboards): schwarze Vorteilsleiste 44px mit Länderwahl, darunter transparenter Kopf
   über dem Startbild; beim Scrollen fest oben, halbtransparent schwarz, am Handy runter = weg / hoch = da.
   Stufen wie im Shop: <768 · 768–1023 · 1024–1365 · ab 1366. Menü, Suche, Kontakt, Merkzettel, Länderwahl
   als eigene Fenster (shopkopf.js). Alles unter .sk-*, ändert sonst nur den Abstand des Startbilds. */

.sk-top, .sk-kopf, .sk-menu, .sk-ebene, .sk-fenster, .sk-suche { font-family:"Myriad Pro", Inter, system-ui, sans-serif; font-weight:300; -webkit-font-smoothing:antialiased; }
.sk-top *, .sk-kopf *, .sk-menu *, .sk-fenster *, .sk-suche * { box-sizing:border-box; }
.sk-nur-sr { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---------- Vorteilsleiste (wechselnd, wie Shop) ---------- */
.sk-top { position:relative; z-index:120; height:44px; background:#000; color:#fff; }
.sk-top__liste { position:absolute; inset:0 90px; margin:0; padding:0; list-style:none; }
.sk-top__item { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; margin:0;
  font-size:12px; line-height:1.25; letter-spacing:.01em; opacity:0; transition:opacity .6s ease; }
.sk-top__item.is-on { opacity:1; }
.sk-land { position:absolute; right:60px; top:10px; display:inline-flex; align-items:center; gap:6px; height:24px; padding:0; border:0; background:none;
  color:rgba(255,255,255,.95); font:inherit; font-size:12px; cursor:pointer; }
.sk-land img { width:12px; height:8px; display:block; }
.sk-land::after { content:""; border:4px solid transparent; border-top-color:currentColor; border-bottom:0; margin-left:2px; }
.sk-land:hover { color:#fff; text-decoration:underline; }

/* ---------- Kopf über dem Startbild ---------- */
.sk-kopf { position:absolute; top:44px; left:0; right:0; z-index:110; height:109px; color:#fff;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 60px; transition:background .3s ease, transform .35s ease; }
/* Bild oben leicht dunkler (wie Shop), damit Symbole auf hellen Bildern lesbar bleiben */
.sk-kopf::before { content:""; position:absolute; left:0; right:0; top:-44px; height:calc(100% + 120px); z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,.42) 0%, rgba(0,0,0,.22) 45%, rgba(0,0,0,0) 100%); transition:opacity .3s ease; }
.sk-kopf.is-fest { position:fixed; top:0; height:65px; background:rgba(0,0,0,.5); }
.sk-kopf.is-fest::before { opacity:0; }
.sk-kopf.is-weg { transform:translateY(-105%); }
.sk-kopf__l, .sk-kopf__r { display:flex; align-items:center; min-width:0; }
.sk-kopf__r { justify-content:flex-end; }
.sk-btn { display:inline-flex; align-items:center; justify-content:center; height:40px; padding:0; border:0; background:none; color:#fff; font:inherit;
  text-decoration:none; cursor:pointer; position:relative; }
.sk-btn:hover { opacity:.8; }
.sk-btn:focus-visible, .sk-krume a:focus-visible, .sk-logo:focus-visible, .sk-land:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.sk-btn img, .sk-btn svg { display:block; flex:none; }
.sk-menu-btn { gap:5px; font-size:22px; }
.sk-menu-btn svg { width:20px; height:20px; fill:#fff; }
.sk-menu-btn span { line-height:34px; }
.sk-krume { display:flex; align-items:center; margin-left:4px; }
.sk-krume ol { display:flex; align-items:center; list-style:none; margin:0; padding:0; white-space:nowrap; }
.sk-krume li { display:flex; align-items:center; font-size:22px; }
.sk-krume li + li::before, .sk-krume li:first-child::before { content:""; width:14px; height:14px; margin:0 10px 0 13px; flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' transform='rotate(90 11.5 12)' d='m11.5 7.9142 10.2929 10.293c.3905.3904 1.0237.3904 1.4142 0 .3905-.3906.3905-1.0238 0-1.4143l-11-11c-.3905-.3905-1.0237-.3905-1.4142 0l-11 11c-.3905.3905-.3905 1.0237 0 1.4142.3905.3905 1.0237.3905 1.4142 0L11.5 7.9142z'/%3E%3C/svg%3E") center/contain no-repeat; }
.sk-krume a { color:#fff; text-decoration:none; line-height:23px; }
.sk-krume a:hover { text-decoration:underline; }
.sk-logo { display:block; padding:5px 20px; }
.sk-logo img { display:block; width:110px; height:auto; }
.sk-such img { width:20px; height:20px; }
.sk-kont img { width:23px; height:15px; }
.sk-herz img { width:21px; height:21px; }
.sk-korb { gap:12px; font-size:22px; }
.sk-korb img { width:24px; height:17px; }
.sk-such { width:40px; }
.sk-kont { width:61px; }
.sk-herz { width:47px; }
.sk-korb { padding:0 0 0 19px; }
.sk-herz--mobil { display:none; }

@media (max-width:1365px){
  .sk-kopf { height:72px; padding:0 25px; }
  .sk-land { right:25px; }
  .sk-menu-btn svg { width:16px; height:16px; } .sk-menu-btn { gap:9px; }
  .sk-such img { width:16px; height:16px; } .sk-kont img { width:19px; height:12px; } .sk-herz img { width:18px; height:18px; } .sk-korb img { width:20px; height:14px; }
  .sk-such, .sk-kont, .sk-herz { width:44px; } .sk-korb { padding:0 0 0 12px; }
  .sk-korb span { display:none; }
  .sk-krume li::before { margin:0 9px 0 10px !important; }
}
@media (max-width:1023px){
  .sk-kopf { height:60px; }
  .sk-menu-btn span { display:none; }
  .sk-menu-btn svg { width:18px; height:18px; }
  .sk-krume li { font-size:17px; }
  .sk-krume li::before { width:11px !important; height:11px !important; margin:0 6px 0 8px !important; }
  .sk-logo { padding:5px 12px; } .sk-logo img { width:80px; }
}
@media (max-width:767px){
  .sk-kopf { padding:0 12px; }
  .sk-kopf.is-fest { height:60px; }
  .sk-top__liste { inset:0 44px 0 12px; }
  .sk-top__item { font-size:11px; }
  .sk-land { right:12px; } .sk-land span { display:none; }
  .sk-krume { display:none; }
  .sk-menu-btn svg { width:16px; height:16px; }
  .sk-herz--mobil { display:inline-flex; width:42px; margin-left:14px; }
  .sk-herz--gross { display:none; }
  .sk-herz img { width:16px; height:16px; }
  .sk-logo img { width:85px; }
  .sk-such img { width:14px; height:14px; } .sk-kont img { width:17px; height:11px; } .sk-korb img { width:17px; height:12px; }
  .sk-such { width:32px; } .sk-kont { width:40px; } .sk-korb { padding:0 0 0 2px; width:24px; }
}

/* ---------- Startbild beginnt direkt unter der Vorteilsleiste, Kopf liegt darüber ---------- */
.ntl .lb-hero, .lb .lb-hero, .lb .km-hero.lb-hero { padding-top:0 !important; }
.ntl.sk-ohne-alt .nt-topbar { display:none !important; }
.ntl .nt-hero__media { padding-top:0 !important; }
@media (min-width:1025px){ .ntl.lb .lb-hero .lb-hero__link { height:min(56.25vw, calc(100svh - 44px)); } }

/* ---------- Schleier für alle Fenster ---------- */
.sk-schleier { position:fixed; inset:0; z-index:900; background:rgba(0,0,0,.5); opacity:0; transition:opacity .25s ease; }
.sk-schleier.is-offen { opacity:1; }
.sk-schleier[hidden] { display:none; }
html.sk-offen { overflow:hidden; }

/* ---------- Menü (weiß, mit Symbolen, wie Shop) ---------- */
.sk-menu { position:fixed; top:0; left:0; bottom:0; z-index:1000; width:400px; max-width:calc(100vw - 20px); background:#fff; color:#000;
  overflow-y:auto; overscroll-behavior:contain; transform:translateX(-100%); transition:transform .3s ease; }
.sk-menu.is-offen { transform:none; }
/* wie im Shop: keine sichtbare Scrollleiste im Menü, scrollen geht trotzdem (Marco 10.11.) */
.sk-menu { scrollbar-width:none; -ms-overflow-style:none; }
.sk-menu::-webkit-scrollbar { display:none; width:0; height:0; }
.sk-menu[hidden] { display:none; }
.sk-menu__zu { position:sticky; top:0; z-index:2; display:flex; justify-content:flex-end; background:#fff; padding:4px 12px 0; }
.sk-menu__zu button { width:44px; height:36px; border:0; background:none; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.sk-menu__zu svg { width:20px; height:20px; fill:#758ca3; }
.sk-menu ul { list-style:none; margin:0; padding:0; }
.sk-menu__liste { padding:0 0 8px; }
.sk-menu__z { display:flex; align-items:center; position:relative; }
.sk-menu__z > a { flex:1; display:flex; align-items:center; min-height:42px; padding:0 52px 0 20px; color:#000; text-decoration:none; font-size:20px; }
.sk-menu__z > a:hover { text-decoration:underline; }
.sk-menu__ic { width:75px; flex:none; display:flex; align-items:center; }
.sk-menu__ic img { width:auto; height:30px; max-width:70px; display:block; }
.sk-menu__plus { position:absolute; right:12px; top:50%; transform:translateY(-50%); width:40px; height:40px; border:0; background:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; }
.sk-menu__plus svg { width:16px; height:16px; fill:#758ca3; }
.sk-menu__plus .sk-minus { display:none; }
.sk-menu li.is-auf > .sk-menu__z .sk-plus { display:none; }
.sk-menu li.is-auf > .sk-menu__z .sk-minus { display:block; }
.sk-menu .sk-menu__sub { display:none; padding:0 0 4px 140px; }
.sk-menu li.is-auf > .sk-menu__sub { display:block; }
@media (max-width:767px){ .sk-menu .sk-menu__sub { padding-left:120px; } }
.sk-menu__sub a { display:flex; align-items:center; min-height:42px; color:#000; text-decoration:none; font-size:20px; }
.sk-menu__sub a:hover { text-decoration:underline; }
.sk-menu__titel { margin:16px 0 0 75px; padding:0 0 8px 20px; border-bottom:1px solid #ddd; color:#8a8a8a; font-size:20px; }
.sk-menu__titel + ul { padding-top:6px; }
.sk-menu a:focus-visible, .sk-menu button:focus-visible { outline:2px solid #000; outline-offset:-2px; }

/* ---------- Suche (wie Shop: dunkle Fläche, weißes Feld) ---------- */
.sk-suche { position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,.75); }
.sk-suche[hidden] { display:none; }
.sk-suche__zu { position:absolute; top:24px; right:36px; width:48px; height:48px; border:0; background:none; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.sk-suche__zu svg { width:30px; height:30px; stroke:#fff; stroke-width:2.4; }
.sk-suche form { position:absolute; top:180px; left:50%; transform:translateX(-50%); width:min(820px, calc(100% - 40px)); display:flex; height:80px; background:#fff; }
.sk-suche input { flex:1; min-width:0; border:0; padding:0 20px; font:inherit; font-size:24px; font-weight:300; color:#000; background:#fff; outline:none; -webkit-appearance:none; }
.sk-suche input::placeholder { color:#222; opacity:1; }
.sk-suche input:focus, .sk-suche input:focus-visible { outline:none !important; box-shadow:inset 0 -3px 0 #000; }
.sk-suche form button { width:80px; border:0; background:#eee; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.sk-suche form button svg { width:30px; height:30px; stroke:#000; stroke-width:2; fill:none; }
.sk-suche form button:focus-visible { outline:2px solid #000; outline-offset:-4px; }
@media (max-width:767px){ .sk-suche form { top:177px; height:60px; } .sk-suche input { font-size:20px; } .sk-suche form button { width:60px; } .sk-suche__zu { top:20px; right:20px; } }

/* ---------- Kontakt / Merkzettel / Länderwahl (weißes Fenster wie Shop) ---------- */
.sk-fenster { position:fixed; inset:0; z-index:1000; overflow-y:auto; display:flex; justify-content:center; align-items:flex-start; padding:28px 16px; }
.sk-fenster[hidden] { display:none; }
.sk-fenster__box { position:relative; width:100%; max-width:1200px; background:#fff; color:#555; padding:40px 56px 44px; font-size:16px; line-height:1.5;
  box-shadow:0 10px 40px rgba(0,0,0,.25); }
.sk-fenster--klein .sk-fenster__box { padding:30px 36px 32px; }
.sk-fenster__zu { position:absolute; top:12px; right:12px; width:40px; height:40px; border:0; background:none; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.sk-fenster__zu svg { width:18px; height:18px; stroke:#666; stroke-width:1.6; }
.sk-fenster h2 { margin:0 0 14px; padding:0 0 4px; border-bottom:1px solid #ccc; color:#222; font-size:36px; font-weight:300; text-transform:uppercase; letter-spacing:.01em; line-height:1.2; }
.sk-fenster p { margin:0 0 14px; }
.sk-fenster b, .sk-fenster strong { font-weight:400; color:#222; }
.sk-fenster a:not(.sk-knopf) { color:#000; }
.sk-knopf { display:inline-flex; align-items:center; min-height:40px; padding:0 13px; margin:4px 10px 4px 0; background:#000; color:#fff; border:1px solid #000; text-decoration:none; font-size:16px; }
.sk-knopf:hover { background:#333; }
.sk-fenster a.sk-knopf { color:#fff; opacity:1; font-weight:300; }
.sk-fenster a.sk-knopf--hell { color:#000; }
.sk-knopf--hell { background:#fff; color:#000; }
.sk-fenster a.sk-knopf--hell:hover { background:#f2f2f2; }
.sk-knopf:focus-visible, .sk-fenster__zu:focus-visible, .sk-suche__zu:focus-visible { outline:2px solid #000; outline-offset:2px; }
.sk-laender { list-style:none; margin:6px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:4px 24px; }
.sk-laender a { display:flex; align-items:center; gap:10px; min-height:44px; color:#000; text-decoration:none; font-size:18px; }
.sk-laender a:hover { text-decoration:underline; }
.sk-laender a[aria-current] { font-weight:400; }
.sk-laender img { width:21px; height:14px; }
@media (max-width:767px){ .sk-fenster { padding:10px; } .sk-fenster__box { padding:34px 20px 24px; } .sk-fenster h2 { font-size:26px; } }
@media (prefers-reduced-motion:reduce){ .sk-menu, .sk-kopf, .sk-schleier, .sk-top__item { transition:none; } }