/* =========================================================
   Landing „Sideboard weiß“ – Lookbook-Fassung (Marco 29.10.2026)
   Bildfüllende Raumbilder wie eine schöne Kategorieseite, eingestreute Infokacheln.
   Regel: Bilder behalten ihr Seitenverhältnis (kein Beschnitt der Möbel). Raster so
   berechnet, dass Bilder 5:4 und 16:9 bündig aufgehen.
   Basis-CSS (style.css, roto-sektionen.css) bleibt unverändert.
   ========================================================= */

.ntl { --gap:6px; --tile:#0e0e10; --tile-2:#16161a; }
@media (min-width:1025px){ .ntl { --gap:8px; } }

/* ---------- Kopf: feste schwarze Leiste (Logo bleibt auf hellen Bildern lesbar) ---------- */
.lb .nt-nav { background:#000; }
.lb .nt-nav__logo { filter:none; }

/* ---------- Startbild ---------- */
.lb-hero__link { display:block; position:relative; color:#fff; }
.lb-hero__link:focus-visible { outline:3px solid #fff; outline-offset:-3px; }
.lb-hero { position:relative; background:#000; }
.lb-hero__pic, .lb-hero__pic img { display:block; width:100%; }
.lb-hero__pic img { height:auto; }
.lb-hero__content { position:absolute; z-index:2; left:0; right:0; }
/* Schrift liegt auf der hellen, ruhigen Wand: dunkel, ohne Verlauf über dem Bild */
.lb-hero__content { pointer-events:none; }
.lb-hero__title { font-size:clamp(2.7rem,6vw,10rem); font-weight:300; letter-spacing:-.025em; line-height:.98; color:#1a1714; }
.lb-hero__sub { margin-top:.5em; font-size:clamp(1.05rem,1.5vw,1.6rem); line-height:1.35; color:#2b2621; max-width:34ch; }
@media (min-width:1025px){ .lb-hero__sub { max-width:30ch; } }
.lb-hero__content .nt-eyebrow { color:#3d362f; margin-bottom:.9em; }
.lb-hero__cta { display:flex; flex-wrap:wrap; gap:10px; margin-top:1.6em; }
.lb-hero .lb-tag { z-index:3; }
/* Desktop: Querbild füllt die Breite; Höhe = Bildhöhe, aber höchstens Bildschirmhöhe (dann nur Decke/Boden minimal gekürzt). */
/* Bild beginnt unter der Kopfzeile (36 px Leiste + 51 px Logo-Zeile). Desktop: Querbild füllt die Breite,
   Höhe höchstens Bildschirmhöhe – dann wird nur Decke/Teppich minimal gekürzt (Sideboard liegt bei 60–85 % der Bildhöhe). */
.lb-hero { padding-top:87px; }
@media (max-width:1024px){ .lb-hero { padding-top:84px; } }
@media (min-width:1025px){
  .lb-hero__link { height:min(56.25vw, calc(100svh - 96px)); min-height:520px; overflow:hidden; }
  .lb-hero__pic, .lb-hero__pic img { height:100%; }
  .lb-hero__pic img { object-fit:cover; object-position:50% 72%; }
  .lb-hero__content { top:calc(96px + min(9vw, 14svh)); left:21vw; right:auto; padding:0; }
}
/* Handy/Tablet: Hochformat-Bild, Schrift auf der ruhigen Wand im oberen Bildteil */
@media (max-width:1024px){
  .lb-hero__content { top:calc(84px + 9vw); padding-inline:var(--gut); }
  .lb-hero__title { font-size:clamp(2.6rem,12.5vw,5rem); }
}

/* ---------- Bild-Kachel (Link auf das gezeigte Modell) ---------- */
.lb-shot { position:relative; display:block; overflow:hidden; background:#111; color:#fff; }
.lb-shot picture, .lb-shot img { display:block; width:100%; height:auto; }
.lb-shot img { transition:filter .5s var(--ease); }
@media (hover:hover){ .lb-shot:hover img { filter:brightness(1.05); } }
.lb-shot:focus-visible { outline:3px solid #fff; outline-offset:-3px; }
.lb-shot:focus-visible .lb-tag { background:#fff; color:#000; }

/* Etikett: Modell + Preis */
.lb-tag { position:absolute; left:clamp(10px,1.4vw,22px); bottom:clamp(10px,1.4vw,22px); display:inline-flex; flex-direction:column; gap:2px;
  padding:.55em .85em .6em; background:rgba(12,12,14,.74); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  color:#fff; line-height:1.2; max-width:calc(100% - 24px); transition:background .3s, color .3s; }
.lb-tag b { font-weight:600; font-size:clamp(.82rem,1vw,.98rem); letter-spacing:.01em; }
.lb-tag i { font-style:normal; font-size:clamp(.74rem,.85vw,.86rem); color:rgba(255,255,255,.82); }
.lb-shot:hover .lb-tag i, .lb-shot:focus-visible .lb-tag i { color:inherit; }
.lb-tag i::after { content:" →"; }
/* Hinweis digital staging: sehr klein, unten rechts */
.lb-ki { position:absolute; right:8px; bottom:5px; max-width:52%; text-align:right; font-size:max(9px,.56rem); line-height:1.25; letter-spacing:.01em;
  color:rgba(255,255,255,.72); text-shadow:0 0 4px rgba(0,0,0,.7), 0 0 1px rgba(0,0,0,.9); pointer-events:none; }
@media (max-width:640px){ .lb-ki { top:5px; bottom:auto; max-width:75%; } .lb-tag { padding:.45em .7em .5em; } }

/* ---------- Raster ---------- */
.lb-row { display:grid; gap:var(--gap); margin-top:var(--gap); }
.lb-row--2 { grid-template-columns:1fr 1fr; }
/* Mosaik: 1 großes 5:4-Bild + 2 gestapelte 5:4-Bilder, Höhen gehen exakt auf (a = 2b + 1,25·gap) */
.lb-row--mosaik { grid-template-columns:1fr calc((100% - 2.25 * var(--gap)) / 3); }
.lb-row--mosaik.is-rev { grid-template-columns:calc((100% - 2.25 * var(--gap)) / 3) 1fr; }
.lb-row--mosaik.is-rev > .lb-stack { order:-1; }
.lb-stack { display:grid; gap:var(--gap); align-content:start; }
.lb-row--full > * { grid-column:1 / -1; }
@media (max-width:760px){
  .lb-row--2, .lb-row--mosaik, .lb-row--mosaik.is-rev { grid-template-columns:1fr; }
  .lb-row--mosaik.is-rev > .lb-stack { order:0; }
}
/* 4K und größer: Inhalt nicht endlos strecken, aber ohne leere Ränder (dunkler Grund, breite Fläche) */
.lb-gallery { max-width:3200px; margin-inline:auto; }

/* ---------- Raum-Kapitel (kurze Überschrift über den Bildern) ---------- */
.lb-chapter { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.4em 2em;
  padding:clamp(40px,7vh,84px) var(--gut) clamp(16px,2.4vh,26px); max-width:3200px; margin-inline:auto; }
@media (min-width:1025px){ .lb-chapter { padding-left:clamp(48px,7.5vw,220px); padding-right:clamp(48px,7.5vw,220px); } }
.lb-chapter .nt-eyebrow { margin:0 0 .5em; }
.lb-chapter h2 { font-size:clamp(1.9rem,1rem + 2.6vw,3.4rem); font-weight:300; letter-spacing:-.015em; line-height:1.08; }
.lb-chapter h2 strong { font-weight:600; }
.lb-chapter > div { flex:1 1 32em; }
.lb-chapter p { flex:0 1 46ch; color:var(--fg-soft); font-size:clamp(.98rem,1.2vw,1.1rem); max-width:52ch; line-height:1.6; }

/* ---------- Einleitung + Schnellwahl ---------- */
.lb-intro { padding:clamp(34px,6vh,72px) var(--gut) clamp(10px,2vh,20px); max-width:3200px; margin-inline:auto; }
@media (min-width:1025px){ .lb-intro { padding-left:clamp(48px,7.5vw,220px); padding-right:clamp(48px,7.5vw,220px); display:flex; align-items:end; justify-content:space-between; gap:3em; } }
.lb-intro p { font-size:clamp(1.08rem,1.5vw,1.4rem); line-height:1.55; color:var(--fg-soft); max-width:46ch; }
.lb-intro p strong { color:var(--fg); font-weight:400; }
.lb-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:1.2em; list-style:none; padding:0; }
@media (min-width:1025px){ .lb-chips { margin-top:0; justify-content:flex-end; max-width:640px; } }
.lb-chips a { display:inline-flex; align-items:center; min-height:44px; padding:0 1.1em; border:1px solid rgba(255,255,255,.32);
  font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--fg); transition:background .3s, border-color .3s; }
.lb-chips a:hover { border-color:#fff; background:rgba(255,255,255,.07); }

/* ---------- Infokacheln ---------- */
.lb-tiles { display:grid; gap:var(--gap); margin-top:var(--gap); grid-template-columns:repeat(3,1fr); }
.lb-tile { background:var(--tile); padding:clamp(26px,3vw,52px) clamp(22px,2.6vw,46px); display:flex; flex-direction:column; gap:.7em; min-width:0; }
.lb-tile--alt { background:var(--tile-2); }
.lb-tile .nt-eyebrow { margin:0; }
.lb-tile h3 { font-size:clamp(1.5rem,1rem + 1.4vw,2.4rem); font-weight:300; line-height:1.12; letter-spacing:-.01em; }
.lb-tile h3 strong { font-weight:600; }
.lb-tile p { color:var(--fg-soft); line-height:1.6; font-size:clamp(.96rem,1.05vw,1.06rem); }
.lb-tile p strong { color:var(--fg); font-weight:400; }
.lb-tile ul { list-style:none; padding:0; margin:.3em 0 0; border-top:1px solid var(--line); }
.lb-tile li { border-bottom:1px solid var(--line); }
.lb-tile ul:not(.lb-breiten) li > a, .lb-tile ul:not(.lb-breiten) li > span { display:flex; justify-content:space-between; gap:1em; align-items:baseline; padding:.7em 0; min-height:44px; color:var(--fg); font-size:.98rem; }
.lb-tile li > a em { font-style:normal; color:var(--fg-mute); font-size:.88rem; white-space:nowrap; }
.lb-tile li a:hover em { color:var(--fg); }
.lb-tile li a:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.lb-tile__icon { width:64px; height:44px; color:var(--fg); }
@media (max-width:1024px){ .lb-tiles { grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .lb-tiles { grid-template-columns:1fr; } }

/* Matt/Hochglanz: Regler groß + Text-Kachel */
.lb-vergleich { display:grid; gap:var(--gap); margin-top:var(--gap); grid-template-columns:1fr calc((100% - 2.25 * var(--gap)) / 3); }
.lb-vergleich { align-items:stretch; }
.lb-vergleich .nt-cmp { align-self:start; }
.lb-vergleich .lb-tile { justify-content:center; }
.lb-tile__h { font-size:clamp(1.6rem,1rem + 1.8vw,2.8rem); font-weight:300; line-height:1.1; letter-spacing:-.012em; }
.lb-tile__h strong { font-weight:600; }
@media (max-width:1024px){ .lb-vergleich { grid-template-columns:1fr; } .lb-vergleich .lb-tile { order:-1; } }

/* Breiten-Skala */
.lb-tile ul.lb-breiten { display:grid; gap:.25em; margin:.4em 0 .2em; border:0; } /* 01.11.: 14 Modelle, Abstand kleiner, damit die Kachel nicht höher als das Bild wird */
.lb-tile ul.lb-breiten li { border:0; }
.lb-breite { display:grid; grid-template-columns:6.8em 1fr; gap:.8em; align-items:center; font-size:.9rem; color:var(--fg-soft); }
.lb-breite__bar { position:relative; height:10px; }
.lb-breite__bar span { position:absolute; top:0; bottom:0; background:rgba(255,255,255,.88); }
.lb-breite__bar::before { content:""; position:absolute; left:0; right:0; top:4px; height:2px; background:rgba(255,255,255,.12); }
.lb-breite__ax { display:grid; grid-template-columns:6.8em 1fr; gap:.8em; font-size:.74rem; color:var(--fg-mute); height:1.4em; }
.lb-breite__scale { position:relative; }
.lb-breite__scale span { position:absolute; top:0; transform:translateX(-50%); white-space:nowrap; }
/* 01.11.: 14 Modelle – auf mittleren Breiten Kachel enger, damit sie nicht höher als das Raumbild daneben wird */
@media (min-width:761px) and (max-width:1365px){ #breiten { gap:.45em; padding-top:clamp(16px,1.6vw,52px); padding-bottom:clamp(16px,1.6vw,52px); } #breiten ul.lb-breiten { gap:0; margin:.2em 0 0; } #breiten .lb-breite { font-size:.76rem; } #breiten p:not(.nt-eyebrow) { font-size:.85rem; line-height:1.4; } }
.lb-breite__scale span:first-child { transform:none; } .lb-breite__scale span:last-child { transform:translateX(-100%); }
.lb-breite__bar span { min-width:6px; }

/* ---------- Modelle (Kategorie-Raster mit Shopfotos) ---------- */
.lb-models { padding:clamp(56px,9vh,110px) 0 clamp(56px,9vh,110px); background:var(--bg); }
.lb-models .nt-models__grid { grid-template-columns:repeat(4,1fr); gap:clamp(30px,3.6vw,52px) clamp(14px,1.8vw,28px); }
.lb-models .nt-wrap { max-width:1680px; }
@media (max-width:1280px){ .lb-models .nt-models__grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:1024px){ .lb-models .nt-models__grid { grid-template-columns:1fr 1fr; } }
@media (max-width:560px){
  .lb-models .nt-models__grid { grid-template-columns:1fr 1fr; gap:28px 12px; }
  .lb-models .nt-model__name { font-size:1.02rem; }
  .lb-models .nt-model__spec { font-size:.82rem; }
  .lb-models .nt-model__price { font-size:.92rem; }
}

/* ---------- Kleinere Abstände in den Standard-Sektionen (weniger Leerraum) ---------- */
.lb .nt-reviews, .lb .nt-faq, .lb .nt-end { padding-block:clamp(56px,9vh,110px); }

@media (prefers-reduced-motion:reduce){ .lb-shot img { transition:none; } }

/* 30.10.: KI-Hinweis nur einmal im Fuß, sehr klein (wie Trendblog) */
.nt-footer__ki { font-size:.68rem; opacity:.85; }
.lb-tile__hint { font-size:.88rem !important; opacity:.8; }

/* ---------- 30.10.: Kopf wie im Onlineshop (livarea.de): Menü + Brotkrumen | Logo | Suche, Kontakt, Merkzettel, Warenkorb ---------- */
.lb .lb-kopf { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; height:60px; padding:0 clamp(14px,4.4vw,62px); background:#000; }
.lb-kopf__l, .lb-kopf__r { display:flex; align-items:center; min-width:0; }
.lb-kopf__r { justify-content:flex-end; gap:clamp(6px,1.6vw,26px); }
.lb-kopf__l { gap:clamp(6px,1.2vw,16px); }
.lb-kopf__btn { display:inline-flex; align-items:center; gap:.4em; min-height:44px; min-width:44px; justify-content:center; padding:0 4px;
  background:none; border:0; color:#fff; font:inherit; font-size:1.25rem; font-weight:300; line-height:1; cursor:pointer; text-decoration:none; }
.lb-kopf__btn svg { width:22px; height:22px; flex:none; }
.lb-kopf__btn:hover { color:rgba(255,255,255,.78); }
.lb-kopf__btn:focus-visible, .lb-kopf__logo:focus-visible, .lb-kopf__crumb a:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.lb-kopf__logo img { display:block; height:21px; width:auto; }
.lb-kopf__crumb ol { display:flex; align-items:center; list-style:none; margin:0; padding:0; white-space:nowrap; overflow:hidden; }
.lb-kopf__crumb li { display:flex; align-items:center; font-size:1.25rem; font-weight:300; }
.lb-kopf__crumb li::before { content:""; width:7px; height:7px; border:solid rgba(255,255,255,.85); border-width:1.4px 1.4px 0 0; transform:rotate(45deg); margin:0 .85em 0 .55em; }
.lb-kopf__crumb a { color:#fff; text-decoration:none; padding:10px 0; }
.lb-kopf__crumb a:hover { color:rgba(255,255,255,.78); }
.lb-kopf__nur-mobil { display:none; }
.lb-suche { position:absolute; left:0; right:0; top:100%; display:flex; gap:8px; padding:10px clamp(14px,4.4vw,62px); background:#000; border-top:1px solid rgba(255,255,255,.12); }
.lb-suche[hidden] { display:none; }
.lb-suche input { flex:1; min-width:0; height:44px; padding:0 14px; border:1px solid rgba(255,255,255,.35); background:#111; color:#fff; font:inherit; font-size:1rem; }
.lb-suche button { height:44px; padding:0 18px; border:1px solid #fff; background:#fff; color:#000; font:inherit; font-size:1rem; cursor:pointer; }
.lb-menu { position:fixed; top:0; left:0; bottom:0; z-index:200; width:min(360px,88vw); background:#0b0b0c; color:#fff; overflow-y:auto;
  transform:translateX(-102%); transition:transform .26s ease; box-shadow:8px 0 40px rgba(0,0,0,.5); }
.lb-menu.is-offen { transform:none; }
.lb-menu[hidden] { display:none; }
.lb-menu__kopf { display:flex; align-items:center; justify-content:space-between; padding:8px 12px 8px 22px; border-bottom:1px solid rgba(255,255,255,.12); font-size:1.25rem; font-weight:300; }
.lb-menu__liste, .lb-menu__liste ul { list-style:none; margin:0; padding:0; }
.lb-menu__liste > li { border-bottom:1px solid rgba(255,255,255,.08); }
.lb-menu__liste a, .lb-menu__liste summary { display:flex; align-items:center; justify-content:space-between; min-height:48px; padding:0 22px; color:#fff; text-decoration:none; font-size:1.05rem; font-weight:300; cursor:pointer; }
.lb-menu__liste summary { list-style:none; }
.lb-menu__liste summary::-webkit-details-marker { display:none; }
.lb-menu__liste summary::after { content:""; width:7px; height:7px; border:solid #fff; border-width:0 1.4px 1.4px 0; transform:rotate(45deg); margin-top:-4px; transition:transform .2s; }
.lb-menu__liste details[open] > summary::after { transform:rotate(225deg); margin-top:4px; }
.lb-menu__liste ul a { min-height:42px; padding-left:36px; font-size:.98rem; color:rgba(255,255,255,.82); }
.lb-menu__liste a:hover, .lb-menu__liste summary:hover { background:rgba(255,255,255,.06); }
.lb-menu__liste a:focus-visible, .lb-menu__liste summary:focus-visible { outline:2px solid #fff; outline-offset:-2px; }
.lb-schleier { position:fixed; inset:0; z-index:150; background:rgba(0,0,0,.55); opacity:0; transition:opacity .26s ease; }
.lb-schleier.is-offen { opacity:1; }
.lb-schleier[hidden] { display:none; }
html.lb-menu-offen { overflow:hidden; }
@media (max-width:1100px){ .lb-kopf__crumb { display:none; } }
@media (max-width:760px){
  .lb .lb-kopf { height:48px; gap:4px; padding:0 6px; }
  .lb-kopf__txt { display:none; }
  .lb-kopf__nur-mobil { display:inline-flex; }
  .lb-kopf__nur-gross { display:none; }
  .lb-kopf__r, .lb-kopf__l { gap:0; }
  .lb-kopf__btn svg { width:20px; height:20px; }
  .lb-kopf__logo img { height:16px; }
  .lb-suche { padding:8px 10px; }
}
/* Kopfhöhe: Leiste 36 px + Kopf 60 px (Handy 48 px) */
.lb-hero { padding-top:96px; }
@media (max-width:1024px){ .lb-hero { padding-top:96px; } }
@media (max-width:760px){ .lb-hero { padding-top:84px; } }
@media (min-width:761px) and (max-width:1024px){ .lb-hero__content { top:calc(96px + 9vw); } }
/* 30.10. (K7): alle Karten gleiches Bildformat 6:5 (Bilder sind 6:5, Spaziora pixeltreu oben/unten erweitert – kein Beschnitt),
   Eigenschaftszeile immer zwei Zeilen hoch, damit „Zum Produkt“ in allen Karten auf gleicher Höhe steht */
.lb-models .nt-model__img { aspect-ratio:6/5; }
.lb-models .nt-model__img img { height:100%; object-fit:contain; }
.lb-models .nt-model__spec { line-height:1.5; min-height:3em; }
.lb-models .nt-model { height:100%; }
.lb-models .nt-model__name { min-height:1.25em; }
.lb-models .nt-model__cta { margin-top:auto; }
.lb-models .nt-model__price { margin-bottom:1.1em; }

/* 01.11. SEO: Dachzeile steht als <span class="nt-eyebrow"> IN der Überschrift (Suchbegriff Teil von H2/H3).
   Aussehen wie vorher als <p> davor: gleiche Schrift/Farbe/Zeilenhöhe, Abstand ersetzt das frühere Flex-gap der Kachel. */
.lb-chapter h2 > .nt-eyebrow { display:block; color:var(--fg-soft); font-size:clamp(.98rem,1.2vw,1.1rem); line-height:1.6; }
.lb-tile h2 > .nt-eyebrow, .lb-tile h3 > .nt-eyebrow { display:block; color:var(--fg-soft); font-size:clamp(.96rem,1.05vw,1.06rem); line-height:1.6; margin-bottom:.7rem; }
@media (min-width:761px) and (max-width:1365px){ #breiten h3 > .nt-eyebrow { margin-bottom:.45rem; } }