/* WK-Möbel — Grundriss als Einstieg, darunter je Bereich ein Band in seinem Holzton. */
@font-face { font-family: "Sofia Sans"; font-weight: 400; src: url(assets/fonts/sofia-sans-400.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Sofia Sans"; font-weight: 600; src: url(assets/fonts/sofia-sans-600.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Sofia Sans Condensed"; font-weight: 600; src: url(assets/fonts/sofia-sans-condensed-600.woff2) format("woff2"); font-display: swap; }

:root {
  --bg: #e9e5dd;
  --floor: #d6d0c4;
  --ink: #1c140c;
  --muted: #5a5047;
  --wall: #1c140c;
  --on-wall: #f4f1ea;
  --accent: #f6851f;
  --on-accent: #1a1206;
  --focus: #1c140c;
  --m: clamp(20px, 2.6vw, 40px);
  --outer: clamp(8px, 1vw, 14px);
  --inner: clamp(5px, 0.7vw, 9px);
  --small: clamp(0.9375rem, 0.9rem + 0.1vw, 1rem);
  --body: clamp(1.125rem, 1.05rem + 0.25vw, 1.25rem);
  --lead: clamp(1.3125rem, 1.1rem + 0.8vw, 1.75rem);
  --head: clamp(2.25rem, 1.4rem + 3.2vw, 4.25rem);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
body { font: 400 var(--body)/1.5 "Sofia Sans", system-ui, sans-serif; }
h2, .claim, .cell span, .topbar, .arrow { font-family: "Sofia Sans Condensed", "Sofia Sans", sans-serif; font-weight: 600; line-height: 1; }
h2 { font-size: var(--head); }

/* ── Erster Bildschirm: Kopfzeile, darunter der Grundriss ── */
.hero { min-height: 100svh; display: grid; grid-template-rows: auto 1fr; gap: var(--m); padding: var(--m); }
.bar { display: grid; grid-template-columns: auto 1fr auto; column-gap: clamp(24px, 4vw, 64px); align-items: end; }
.bar h1 img { width: clamp(150px, 15vw, 230px); }
.claim { font-size: clamp(1.875rem, 1rem + 3vw, 3.75rem); max-width: 13em; }
.where { color: var(--muted); text-align: right; }
.house { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: 5fr 1.7fr 5fr; gap: var(--inner); padding: var(--outer); background: var(--wall); min-height: 440px; }
.cell { position: relative; overflow: hidden; min-height: 0; background: var(--floor); color: var(--on-wall); text-decoration: none; }
.cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: filter 0.35s var(--ease), scale 0.6s var(--ease); }
.cell span { position: absolute; left: 0; top: 0; padding: 0.42em 0.7em 0.36em; background: var(--wall); font-size: clamp(0.9375rem, 0.7rem + 0.7vw, 1.375rem); transition: background 0.2s, color 0.2s; }
.cell:hover img, .cell:focus-visible img { filter: brightness(1.12) saturate(1.1); scale: 1.04; }
.cell:hover span, .cell:focus-visible span { background: var(--accent); color: var(--on-accent); }
.kueche { grid-area: 1 / 1 / 2 / 5; }
.essen { grid-area: 1 / 5 / 2 / 7; }
.wohnen { grid-area: 1 / 7 / 2 / 10; }
.flur { grid-area: 2 / 1 / 3 / 10; }
.bad { grid-area: 3 / 1 / 4 / 3; }
.schlafen { grid-area: 3 / 3 / 4 / 6; }
.jugend { grid-area: 3 / 6 / 4 / 8; }
.buero { grid-area: 3 / 8 / 4 / 10; }
.praxis { grid-area: 1 / 10 / 4 / 13; }
/* Türöffnungen zum Flur: ein Stück Wand in Bodenfarbe */
.door-b, .door-t { overflow: visible; }
.door-b img, .door-t img { clip-path: inset(0); }
.door-b::after, .door-t::after { content: ""; position: absolute; right: 14%; width: clamp(18px, 2.6vw, 38px); height: var(--inner); background: var(--floor); }
.door-b::after { top: 100%; }
.door-t::after { bottom: 100%; }

/* ── Übersicht als ruhiges Raster: neun gleiche Kacheln ── */
.hero:has(.raster) { min-height: 0; }
.raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.2vw, 18px); align-content: start; }
.tile { display: grid; grid-template-rows: 1fr auto; min-height: 0; background: var(--wall); color: var(--on-wall); text-decoration: none; overflow: hidden; }
.tile img { width: 100%; height: auto; object-fit: cover; aspect-ratio: 16 / 10; transition: scale 0.6s var(--ease), filter 0.35s var(--ease); }
.tile span { padding: 0.55em 0.8em 0.5em; font-family: "Sofia Sans Condensed", "Sofia Sans", sans-serif; font-weight: 600; font-size: clamp(1.0625rem, 0.8rem + 0.8vw, 1.5rem); line-height: 1; transition: background 0.2s, color 0.2s; }
.tile:hover img, .tile:focus-visible img { scale: 1.04; filter: brightness(1.08); }
.tile:hover span, .tile:focus-visible span { background: var(--accent); color: var(--on-accent); }

/* ── Übersicht als Liste: Raumnamen links, ein großes Bild rechts ── */
.zeilen { display: grid; grid-template-columns: 5fr 7fr; gap: var(--m); align-items: stretch; }
.zeilen ul { display: grid; align-content: center; }
.zeilen li a { display: block; padding: 0.18em 0; font-family: "Sofia Sans Condensed", "Sofia Sans", sans-serif; font-weight: 600; font-size: clamp(1.75rem, 1rem + 2.8vw, 3.5rem); line-height: 1; text-decoration: none; color: var(--muted); transition: color 0.2s, padding-left 0.3s var(--ease); }
.zeilen li a:hover, .zeilen li a:focus-visible, .zeilen li a[aria-current] { color: var(--ink); padding-left: 0.3em; }
.zeilen li a[aria-current] { text-decoration: underline 3px var(--accent); text-underline-offset: 0.18em; }
.stage { position: relative; min-height: 420px; background: var(--wall); padding: var(--outer); }
.shot { position: absolute; inset: var(--outer); opacity: 0; transition: opacity 0.5s var(--ease); }
.shot.on { opacity: 1; }
.shot img { width: 100%; height: 100%; object-fit: cover; }

/* ── Leiste, die beim Scrollen oben bleibt ── */
.topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); min-height: 56px; padding: 8px var(--m); background: var(--wall); color: var(--on-wall); --focus: var(--accent); }
.topbar .home img { width: 72px; }
.topbar .list { display: flex; flex-wrap: wrap; gap: 0.2em 1.3em; font-size: clamp(1rem, 0.8rem + 0.5vw, 1.25rem); }
.topbar a { text-decoration: underline 2px transparent; text-underline-offset: 0.3em; transition: text-decoration-color 0.25s, color 0.2s; }
.topbar a:hover, .topbar a[aria-current] { text-decoration-color: var(--accent); }
.topbar .up { margin-left: auto; font-size: clamp(1rem, 0.8rem + 0.5vw, 1.25rem); }
.menu { display: none; position: relative; }
.menu summary { list-style: none; cursor: pointer; padding: 0.4em 0; font-size: 1.125rem; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: ""; display: inline-block; width: 0.5em; height: 0.5em; margin-left: 0.5em; border: solid currentColor; border-width: 0 2px 2px 0; rotate: 45deg; translate: 0 -0.2em; }
.menu[open] summary::after { rotate: 225deg; translate: 0 0.1em; }
.menu ul { position: absolute; left: 0; top: 100%; min-width: 14em; padding: 0.6em 0; background: var(--wall); }
.menu li a { display: block; padding: 0.45em var(--m); font-size: 1.125rem; }

/* ── Einrichtungsideen ── */
.intro { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--m); align-items: start; padding: clamp(80px, 10vw, 160px) var(--m); }
.intro h2 { grid-column: 1 / 6; font-size: clamp(2rem, 3.3vw, 3.25rem); }
.statement { grid-column: 6 / -1; font-size: var(--lead); line-height: 1.25; max-width: 46ch; }
.intro .body { grid-column: 6 / 12; margin-top: 1.2em; max-width: 64ch; }

/* ── Bereiche: jeder auf seinem Holzton, Bilder mit Pfeilen ── */
.room { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--m); row-gap: var(--m); align-items: center; padding: clamp(64px, 8vw, 128px) 0; background: var(--tone); color: var(--on); --focus: var(--on); scroll-margin-top: 56px; }
.room ::selection { background: var(--on); color: var(--tone); }
.room .txt { grid-column: 1 / 5; padding-left: var(--m); }
.room .slider { grid-column: 5 / -1; }
.room.flip .txt { grid-column: 9 / -1; grid-row: 1; padding: 0 var(--m) 0 0; }
.room.flip .slider { grid-column: 1 / 9; grid-row: 1; }
.room h2 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem); margin-bottom: 0.5em; }
.room .txt p { max-width: 46ch; }
.slider { position: relative; min-width: 0; max-width: 100%; --h: clamp(200px, 24vw, 330px); }
.track { display: flex; gap: var(--inner); overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--on) transparent; padding: 0 var(--m) 6px; scroll-padding-inline: var(--m); }
.js .track { scrollbar-width: none; padding-bottom: 0; }
.js .track::-webkit-scrollbar { display: none; }
.track .pic { flex: none; scroll-snap-align: start; overflow: hidden; }
.track img { height: var(--h); width: auto; max-width: none; transition: filter 0.3s; }
.track .pic:hover img, .track .pic:focus-visible img { filter: brightness(1.08); }
.arrow { display: none; position: absolute; top: 50%; translate: 0 -50%; place-items: center; width: 52px; height: 52px; border: 0; background: var(--on); color: var(--tone); transition: background 0.2s, color 0.2s, opacity 0.3s, transform 0.2s; }
.js .arrow { display: grid; }
.arrow:hover { background: var(--accent); color: var(--on-accent); }
.arrow:active { transform: scale(0.94); }
.arrow[disabled] { opacity: 0; pointer-events: none; }
.prev { left: calc(var(--m) - 8px); }
.next { right: calc(var(--m) - 8px); }

/* ── Schluss ── */
.foot { display: flex; flex-wrap: wrap; align-items: end; gap: var(--m); padding: clamp(56px, 7vw, 112px) var(--m) var(--m); background: var(--wall); color: var(--on-wall); --focus: var(--accent); }
.foot img { width: clamp(150px, 15vw, 230px); }
.foot p { color: #c9c0b3; }
.foot .legal { margin-left: auto; display: flex; gap: 1.5em; font-weight: 600; }
.foot a:hover { color: var(--accent); }

@media (max-width: 900px) {
  .bar { grid-template-columns: 1fr; row-gap: 12px; align-items: start; }
  .where { text-align: left; }
  .house { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: 30vw; min-height: 0; }
  .house > * { grid-area: auto !important; }
  .house > .kueche, .house > .flur, .house > .praxis { grid-column: span 2 !important; }
  .door-b::after, .door-t::after { display: none; }
  .raster { grid-template-columns: 1fr 1fr; }
  .zeilen { grid-template-columns: 1fr; }
  .zeilen li a { font-size: 1.75rem; }
  .stage { min-height: 62vw; }
  .topbar .list { display: none; }
  .menu { display: block; }
  .intro, .room { grid-template-columns: 1fr; }
  .intro h2 { margin-bottom: 0.5em; }
  .intro > *, .room > *, .room.flip .txt, .room.flip .slider { grid-column: 1 !important; grid-row: auto !important; }
  .room .txt, .room.flip .txt { padding: 0 var(--m); }
  .slider { --h: clamp(180px, 52vw, 260px); }
  .arrow { width: 44px; height: 44px; }
  .prev { left: 8px; }
  .next { right: 8px; }
}