/* ══════════════════════════════════════════════════════════════════════
   küchenform — „Anfassen"
   Die Musterwand. Material in Originalgröße, im Licht einer Ausstellung.
   Messing ist Material. Rot ist Entscheidung. Dinge haben Dicke.
   ══════════════════════════════════════════════════════════════════════ */

/* ── SCHRIFT ─────────────────────────────────────────────────────────── */
@font-face{
  font-family:'Bricolage Grotesque';
  src:url(assets/fonts/bricolage-latin.woff2) format('woff2');
  font-weight:200 800; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Bricolage Grotesque';
  src:url(assets/fonts/bricolage-latin-ext.woff2) format('woff2');
  font-weight:200 800; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Schibsted Grotesk';
  src:url(assets/fonts/schibsted-latin.woff2) format('woff2');
  font-weight:400 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Schibsted Grotesk';
  src:url(assets/fonts/schibsted-latin-ext.woff2) format('woff2');
  font-weight:400 900; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ── MARKEN ──────────────────────────────────────────────────────────── */
:root{
  /* Felder */
  --lack-tief:#0C0A09;
  --lack:#141110;
  --lack-hoch:#1F1A17;
  --tanne:#1E2C24;
  --tanne-hoch:#27392F;
  --stein:#CBC4B6;
  --stein-hoch:#D8D2C6;

  /* Schrift auf dunkel */
  --kreide:#EDE7DA;
  --leinen:#B0A594;
  --leinen-linie:#6E645A;

  /* Schrift auf hell */
  --graphit:#191512;
  --graphit-weich:#4E463C;
  --stein-regel:#6E6456;
  --stein-linie:#A9A092;
  --stein-platzhalter:#5A5147;

  /* Material */
  --messing:#C9964A;
  --messing-hell:#D9A757;
  --messing-tief:#7A5A22;
  --eiche:#6A4630;

  /* Entscheidung */
  --signal:#C51718;
  --signal-tief:#A81214;
  --signal-press:#8E0F11;
  --signal-text:#94100F;
  --signal-lift:#E8524A;
  --weiss:#FFFFFF;

  /* Maß */
  --haar:4px; --xs:8px; --sm:13px; --md:21px; --lg:34px; --xl:58px;
  --wand:clamp(76px,11.5vh,138px);
  --rand:clamp(20px,4.4vw,66px);
  --breite:1500px;

  /* Schatten: Kontakt + Streuung, nie Halo */
  --heben:0 2px 3px rgba(6,4,3,.5), 0 16px 34px -12px rgba(6,4,3,.62);
  --heben-hoch:0 3px 5px rgba(6,4,3,.46), 0 30px 56px -16px rgba(6,4,3,.66);
  --heben-hell:0 2px 3px rgba(30,22,14,.14), 0 16px 32px -12px rgba(30,22,14,.22);

  --federn:cubic-bezier(.2,.8,.25,1);
}

/* ── GRUNDLAGE ───────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0; background:var(--lack); color:var(--kreide);
  font-family:'Schibsted Grotesk',-apple-system,'Helvetica Neue',Arial,sans-serif;
  font-size:17px; line-height:1.66; letter-spacing:.002em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
button,input,select,textarea{font:inherit; color:inherit}
h1,h2,h3,p,ol,ul,dl,dd,figure,fieldset,legend{margin:0; padding:0}
ol,ul{list-style:none}
fieldset{border:0; min-inline-size:0}

::selection{background:var(--messing); color:var(--lack)}

:where(a,button,summary,input,select,textarea,label.karte):focus-visible{
  outline:2px solid var(--signal); outline-offset:3px; border-radius:1px;
}
.feld--lack :where(a,button,summary):focus-visible,
.feld--tanne :where(a,button,summary,label.karte):focus-visible,
.hero :where(a,button):focus-visible,
.kopf :where(a,button):focus-visible,
.fuss :where(a,button,summary):focus-visible{outline-color:var(--signal-lift)}

.skip{
  position:absolute; left:var(--rand); top:-100px; z-index:200;
  background:var(--signal); color:#fff; padding:14px 22px;
  font-size:.6875rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  text-decoration:none; transition:top .2s;
}
.skip:focus{top:14px}

/* ── TYPO-REGISTER ───────────────────────────────────────────────────── */
.anzeige{
  font-family:'Bricolage Grotesque','Helvetica Neue',Arial,sans-serif;
  font-variation-settings:'opsz' 96;
  font-weight:800; font-size:clamp(2.9rem,7.8vw,6rem);
  line-height:.94; letter-spacing:-.032em; text-wrap:balance;
  color:var(--kreide);
}
.anzeige em{font-style:normal; color:var(--signal-lift)}
.anzeige--dunkel{color:var(--graphit)}
.anzeige--dunkel em{color:var(--signal-text)}

.ueber{
  font-family:'Bricolage Grotesque','Helvetica Neue',Arial,sans-serif;
  font-variation-settings:'opsz' 48;
  font-weight:700; font-size:clamp(1.95rem,3.9vw,3.15rem);
  line-height:1.04; letter-spacing:-.024em; text-wrap:balance;
  color:var(--graphit);
}
.ueber--hell{color:var(--kreide)}

.titel{
  font-family:'Bricolage Grotesque','Helvetica Neue',Arial,sans-serif;
  font-variation-settings:'opsz' 24;
  font-weight:700; font-size:1.22rem; line-height:1.26; letter-spacing:-.012em;
}

.etikett{
  display:flex; align-items:center; gap:10px;
  font-size:.6875rem; font-weight:600; line-height:1;
  letter-spacing:.15em; text-transform:uppercase;
  font-variant-numeric:tabular-nums; color:var(--graphit-weich);
}
.etikett::before{
  content:''; flex:0 0 auto; width:16px; height:1px;
  background:var(--messing-tief);
}
.etikett--hell{color:var(--leinen)}
.etikett--hell::before{background:var(--messing)}

.fliess{max-width:60ch; color:var(--graphit-weich); text-wrap:pretty}
.fliess p + p{margin-top:var(--md)}
.fliess--hell{color:var(--leinen)}

/* Materialspur: die kleine Beschriftung unter jedem Bild */
.spur{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px;
  font-size:.625rem; font-weight:500; line-height:1;
  letter-spacing:.11em; text-transform:uppercase;
  font-variant-numeric:tabular-nums; color:var(--graphit-weich);
}
.spur b{font-weight:600; color:var(--graphit)}
.spur span{position:relative; padding-left:15px}
.spur span::before{
  content:''; position:absolute; left:0; top:50%; width:8px; height:1px;
  background:var(--messing-tief);
}
.feld--lack .spur,.feld--tanne .spur{color:var(--leinen)}
.feld--lack .spur b,.feld--tanne .spur b{color:var(--kreide)}
.feld--lack .spur span::before,.feld--tanne .spur span::before{background:var(--messing)}

/* ── LAYOUT ──────────────────────────────────────────────────────────── */
.wand{max-width:var(--breite); margin-inline:auto; padding-inline:var(--rand)}
.wand--schmal{max-width:1040px}

.feld{padding-block:var(--wand); scroll-margin-top:78px}
.feld--lack{background:var(--lack)}
.feld--tanne{background:var(--tanne); color:var(--kreide)}
.feld--stein{background:var(--stein); color:var(--graphit)}
.feld--abschluss{padding-bottom:calc(var(--wand) * 1.05)}

.einleitung{max-width:70ch}
.einleitung .etikett{margin-bottom:var(--md)}
.einleitung .ueber,.einleitung .anzeige{margin-bottom:var(--lg)}
.einleitung--breit{max-width:none}
.einleitung--breit .ueber,.einleitung--breit .anzeige{max-width:18ch}
.einleitung--breit .fliess{margin-top:var(--lg)}

.trenner{
  height:1px; background:var(--stein-linie);
  margin-block:var(--xl) var(--wand);
}

/* ── KOPF ────────────────────────────────────────────────────────────── */
.kopf{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:space-between; gap:var(--md);
  padding:18px var(--rand);
  transition:background .4s var(--federn), backdrop-filter .4s var(--federn), box-shadow .4s var(--federn);
}
.kopf.ist-fest{
  background:rgba(12,10,9,.86); backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 1px 0 rgba(201,150,74,.22);
}
.marke{
  font-family:'Bricolage Grotesque','Helvetica Neue',Arial,sans-serif;
  font-variation-settings:'opsz' 24;
  font-weight:800; font-size:1.28rem; letter-spacing:-.03em;
  text-decoration:none; line-height:1; white-space:nowrap;
}
.marke__a{color:var(--kreide)}
.marke__b{color:var(--signal-lift)}

.nav{display:flex; align-items:center; gap:var(--lg)}
.nav a{
  font-size:.6875rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  text-decoration:none; color:var(--leinen); white-space:nowrap;
  transition:color .22s;
}
.nav a:hover{color:var(--kreide)}
.nav .tel{
  color:var(--kreide); font-variant-numeric:tabular-nums; letter-spacing:.08em;
  padding-left:var(--lg); position:relative;
}
.nav .tel::before{
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:15px; background:var(--leinen-linie);
}
.burger{
  display:none; width:44px; height:44px; padding:0; border:0; background:none;
  cursor:pointer; position:relative;
}
.burger span{
  position:absolute; left:11px; width:22px; height:1.5px; background:var(--kreide);
  transition:transform .32s var(--federn), opacity .2s;
}
.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){top:21.5px}
.burger span:nth-child(3){top:27px}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* ── KNOPF ───────────────────────────────────────────────────────────── */
.knopf{
  display:inline-flex; align-items:center; gap:12px;
  background:var(--signal); color:var(--weiss);
  padding:19px 30px; border:0; cursor:pointer;
  font-size:.6875rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  text-decoration:none; line-height:1; white-space:nowrap;
  transition:background .22s;
}
.knopf i{
  width:6px; height:6px; background:var(--weiss); flex:0 0 auto;
  transition:transform .32s var(--federn);
}
.knopf:hover{background:var(--signal-tief)}
.knopf:hover i{transform:translateX(4px)}
.knopf:active{background:var(--signal-press)}
.knopf--klein{padding:13px 20px}

.ruf{text-decoration:none; display:flex; flex-direction:column; gap:7px}
.ruf__nr{
  font-size:1.05rem; font-weight:600; letter-spacing:.01em;
  font-variant-numeric:tabular-nums; color:var(--kreide);
  border-bottom:1px solid var(--messing-tief); padding-bottom:3px;
  transition:border-color .22s;
}
.ruf:hover .ruf__nr{border-color:var(--messing)}

/* ══════════════════════════ HERO ══════════════════════════ */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  justify-content:flex-end; overflow:hidden; background:var(--lack-tief);
}
.hero__bild{position:absolute; inset:0}
.hero__bild img{width:100%; height:100%; object-fit:cover; object-position:60% 50%}
/* Der Verlauf trägt die Schrift, ohne das Material zu ersticken:
   links und unten dicht, zur rechten Bildhälfte hin offen. */
.hero__bild::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(9,7,6,.92) 0%, rgba(9,7,6,.62) 30%, transparent 62%, rgba(9,7,6,.34) 100%),
    linear-gradient(to right, rgba(9,7,6,.78) 0%, rgba(9,7,6,.42) 34%, transparent 66%);
}
.hero__inhalt{
  position:relative; z-index:2;
  max-width:var(--breite); width:100%; margin-inline:auto;
  padding:0 var(--rand) var(--xl);
}
.hero__inhalt .etikett{margin-bottom:var(--md)}
.hero .anzeige{max-width:15ch}
.hero__text{
  margin-top:var(--lg); max-width:48ch; color:var(--leinen);
  font-size:1.0625rem; text-wrap:pretty;
}
.hero__aktion{
  margin-top:var(--xl); display:flex; align-items:center; gap:var(--xl); flex-wrap:wrap;
}
.hero__notiz{
  position:relative; z-index:2;
  max-width:var(--breite); width:100%; margin-inline:auto;
  padding:0 var(--rand) var(--lg);
  border-top:0;
  display:flex; flex-wrap:wrap; gap:6px 24px;
  font-size:.625rem; font-weight:500; letter-spacing:.11em; text-transform:uppercase;
  color:var(--leinen);
}
.hero__notiz span{position:relative; padding-left:16px}
.hero__notiz span::before{
  content:''; position:absolute; left:0; top:50%; width:9px; height:1px; background:var(--messing);
}
.weiter{
  position:absolute; right:var(--rand); bottom:calc(var(--xl) + 46px); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  text-decoration:none;
}
.weiter i{
  width:1px; height:52px; background:linear-gradient(var(--messing), transparent);
  position:relative;
}
@media (prefers-reduced-motion:no-preference){
  .weiter i::after{
    content:''; position:absolute; left:-1.5px; top:0; width:4px; height:4px;
    background:var(--messing); animation:tropf 2.6s var(--federn) infinite;
  }
}
@keyframes tropf{0%{transform:translateY(0); opacity:0}18%{opacity:1}78%{opacity:1}100%{transform:translateY(48px); opacity:0}}

/* ══════════════════════════ NAH DRAN ══════════════════════════ */
.platten{
  margin-top:var(--wand);
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--wand) var(--xl);
}
.platte:nth-child(even){margin-top:calc(var(--wand) * .62)}
.platte figcaption{margin-top:var(--md)}
.platte .titel{margin-bottom:12px}
.platte p{max-width:44ch; color:var(--graphit-weich); text-wrap:pretty}
.platte .spur{margin-top:var(--md); padding-top:12px; border-top:1px solid var(--stein-linie)}

.rahmen{
  position:relative; overflow:hidden;
  border:1px solid var(--stein-linie);
  box-shadow:var(--heben-hell);
  background:var(--stein-hoch);
}
.rahmen img{width:100%; aspect-ratio:3/2; object-fit:cover}
.rahmen--dunkel{border-color:var(--leinen-linie); box-shadow:var(--heben); background:var(--lack-hoch)}

/* ══════════════════════════ MUSTERWAND ══════════════════════════ */
.mw{
  margin-top:var(--wand);
  display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:var(--xl);
  align-items:start;

  /* Standardpaarung — auch ohne JavaScript gültig */
  --front:url(assets/material/f_tanne.jpg);
  --front-name:"Tannengrün";
  --front-spec:"Mattlack, fingerabdruckarm · LA-6009 · 19 mm";
  --platte:url(assets/material/p_nero.jpg);
  --platte-name:"Nero geschliffen";
  --platte-spec:"Naturstein · NS-01 · 30 mm";
  --staerke:"30 mm";
}
#mw:has(#f-graphit:checked){--front:url(assets/material/f_graphit.jpg);--front-name:"Graphit";--front-spec:"Mattlack, fingerabdruckarm · LA-7024 · 19 mm"}
#mw:has(#f-eiche:checked){--front:url(assets/material/f_eiche.jpg);--front-name:"Eiche geräuchert";--front-spec:"Echtholzfurnier, geölt · FU-114 · 19 mm"}
#mw:has(#f-nussbaum:checked){--front:url(assets/material/f_nussbaum.jpg);--front-name:"Nussbaum";--front-spec:"Echtholzfurnier, geölt · FU-208 · 19 mm"}
#mw:has(#f-kalk:checked){--front:url(assets/material/f_kalk.jpg);--front-name:"Kalkweiß";--front-spec:"Mattlack, fingerabdruckarm · LA-9010 · 19 mm"}
#mw:has(#f-beton:checked){--front:url(assets/material/f_beton.jpg);--front-name:"Beton";--front-spec:"Schichtstoff, matt · SC-330 · 19 mm"}

#mw:has(#p-keramik:checked){--platte:url(assets/material/p_keramik.jpg);--platte-name:"Keramik hell";--platte-spec:"Feinsteinzeug · KE-04 · 12 mm";--staerke:"12 mm"}
#mw:has(#p-eiche:checked){--platte:url(assets/material/p_eiche.jpg);--platte-name:"Eiche massiv";--platte-spec:"Massivholz, geölt · MH-02 · 40 mm";--staerke:"40 mm"}
#mw:has(#p-stahl:checked){--platte:url(assets/material/p_stahl.jpg);--platte-name:"Edelstahl";--platte-spec:"gebürstet · ES-01 · 10 mm";--staerke:"10 mm"}

/* ── Die Ansicht ── */
.mw__ansicht{
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--md);
}
.ansicht{
  position:relative; display:flex; flex-direction:column; width:100%;
  aspect-ratio:3/2; background:var(--lack-tief);
  border:1px solid rgba(201,150,74,.24);
  box-shadow:var(--heben-hoch);
  overflow:hidden;
}
/* Ausstellungslicht über der ganzen Reihe — ein Objekt, nicht eine Fläche */
.ansicht::after{
  content:''; position:absolute; inset:0; z-index:4; pointer-events:none;
  background:
    radial-gradient(120% 90% at 18% -12%, rgba(255,244,224,.22), transparent 58%),
    linear-gradient(to bottom, transparent 52%, rgba(6,4,3,.42) 100%);
}
.ansicht__platte{
  position:relative; flex:0 0 11%;
  background-image:var(--platte); background-size:cover; background-position:center;
  box-shadow:inset 0 -3px 7px rgba(6,4,3,.55);
  transition:background-image .01s;
}
.ansicht__platte::before{ /* belichtete Oberkante der Platte */
  content:''; position:absolute; inset:0 0 auto 0; height:34%;
  background:linear-gradient(rgba(255,255,255,.26), rgba(255,255,255,.02));
  border-top:1px solid rgba(255,255,255,.3);
}
.ansicht__platte::after{ /* Schattenwurf der Platte auf die Fronten */
  content:''; position:absolute; top:100%; left:0; right:0; height:22px; z-index:3;
  background:linear-gradient(rgba(6,4,3,.6), transparent); pointer-events:none;
}
/* Die Stärke steht an der Kante, die sie beschreibt — auf eigenem Grund,
   damit sie über Nero wie über heller Keramik gleich sicher liest. */
.ansicht__staerke{
  position:absolute; right:10px; bottom:7px; z-index:5;
  display:flex; align-items:center; gap:8px;
  padding:4px 9px; background:rgba(8,6,5,.78);
  font-size:.625rem; font-weight:600; letter-spacing:.11em;
  font-variant-numeric:tabular-nums; color:var(--kreide);
}
.ansicht__staerke::before{content:''; width:12px; height:1px; background:var(--messing)}
.ansicht__staerke::after{content:var(--staerke)}

/* Eine Unterschrankreihe: drei Schränke, 3-mm-Fuge in beiden Richtungen */
.ansicht__korpus{flex:1; display:flex; gap:3px; background:#080605}
.ansicht__schrank{flex:1; display:flex; flex-direction:column; gap:3px}
.ansicht__schrank--breit{flex:1.5}
.ansicht__front{
  position:relative; flex:1;
  background-image:var(--front); background-size:cover; background-position:center;
}
.ansicht__front--flach{flex:0 0 19%}
.ansicht__front--hoch{flex:2}
.griff{ /* Griffmulde: Schattenfuge mit Messinglippe */
  position:absolute; inset:0 0 auto 0; height:9px;
  background:linear-gradient(180deg,
    rgba(6,4,3,.82) 0%, rgba(6,4,3,.54) 50%,
    var(--messing-hell) 52%, var(--messing) 68%, var(--messing-tief) 100%);
}
.ansicht__sockel{
  flex:0 0 7%; background:var(--lack-tief);
  box-shadow:inset 0 5px 10px rgba(6,4,3,.7);
}

.ablesung{
  width:100%; display:grid; gap:var(--sm);
  border-top:1px solid rgba(201,150,74,.24); padding-top:var(--md);
}
.ablesung__zeile{display:grid; grid-template-columns:130px minmax(0,1fr); gap:var(--md); align-items:baseline}
.ablesung__wert{display:flex; flex-direction:column; gap:5px}
.ablesung__wert::before{
  font-family:'Bricolage Grotesque','Helvetica Neue',Arial,sans-serif;
  font-variation-settings:'opsz' 24;
  font-weight:700; font-size:1.22rem; line-height:1.2; letter-spacing:-.012em;
  color:var(--kreide);
}
.ablesung__wert::after{
  font-size:.625rem; font-weight:500; letter-spacing:.11em; text-transform:uppercase;
  font-variant-numeric:tabular-nums; color:var(--leinen);
}
.ablesung__wert[data-slot=front]::before{content:var(--front-name)}
.ablesung__wert[data-slot=front]::after{content:var(--front-spec)}
.ablesung__wert[data-slot=platte]::before{content:var(--platte-name)}
.ablesung__wert[data-slot=platte]::after{content:var(--platte-spec)}

/* ── Die Musterregale ── */
.mw__regale{display:flex; flex-direction:column; gap:var(--xl)}
.regal legend{margin-bottom:var(--md)}
.regal__reihe{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--md);
  position:relative; padding-top:13px;
}
/* Die vier Platten hängen an einer Schiene — kein Rest in der zweiten Reihe */
.regal--platten .regal__reihe{grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--sm)}
.regal--platten .karte__schild{padding:9px 10px 11px}
.regal--platten .karte__schild b{font-size:.78125rem}
@media (max-width:880px){.regal--platten .karte__schild b{font-size:.8125rem}}
.regal__reihe::before{ /* die Messingschiene, an der die Muster hängen */
  content:''; position:absolute; inset:0 0 auto 0; height:2px;
  background:linear-gradient(90deg, var(--messing-tief), var(--messing) 12%, var(--messing-hell) 50%, var(--messing) 88%, var(--messing-tief));
}
.regal input{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none}

/* ── Die Musterkarte ── */
.karte{
  position:relative; display:block; cursor:pointer;
  background:var(--lack-hoch); border-radius:1.5px;
  box-shadow:var(--heben);
  transition:transform .34s var(--federn), box-shadow .34s var(--federn);
}
.karte::before{ /* obere Schnittkante, belichtet */
  content:''; position:absolute; inset:0 0 auto 0; height:3px; z-index:3;
  background:linear-gradient(90deg, var(--messing-tief), var(--messing-hell) 24%, var(--messing) 76%, var(--messing-tief));
  border-radius:1.5px 1.5px 0 0;
}
.karte::after{ /* untere Kante, im Schatten */
  content:''; position:absolute; inset:auto 0 0 0; height:2px; z-index:3;
  background:rgba(6,4,3,.62);
}
.karte__flaeche{
  display:block; aspect-ratio:5/4; margin-top:3px;
  background-size:cover; background-position:center;
  box-shadow:inset 0 0 26px rgba(6,4,3,.34);
}
.karte__loch{ /* das gebohrte Aufhängeloch */
  position:absolute; top:14px; left:13px; z-index:2;
  width:9px; height:9px; border-radius:50%;
  background:rgba(8,6,5,.9);
  box-shadow:inset 0 1.5px 2px rgba(6,4,3,.9), 0 1px 0 rgba(255,255,255,.13);
}
.karte__schild{
  display:flex; flex-direction:column; gap:4px;
  padding:11px 13px 13px;
  border-top:1px solid rgba(201,150,74,.16);
}
.karte__schild b{
  font-size:.8125rem; font-weight:600; line-height:1.2; letter-spacing:-.004em;
  color:var(--kreide);
  display:flex; align-items:center; gap:7px;
}
.karte__schild b::before{
  content:''; width:5px; height:5px; flex:0 0 auto;
  background:transparent; border:1px solid var(--leinen-linie);
  transition:background .22s, border-color .22s;
}
.karte__schild i{
  font-style:normal; font-size:.625rem; font-weight:500; line-height:1.2;
  letter-spacing:.11em; text-transform:uppercase;
  font-variant-numeric:tabular-nums; color:var(--leinen);
}

@media (hover:hover){
  .karte:hover{transform:translateY(-3px); box-shadow:var(--heben-hoch)}
}
.regal input:checked + .karte{
  box-shadow:var(--heben-hoch), 0 0 0 2px var(--messing);
  transform:translateY(-3px);
}
.regal input:checked + .karte .karte__schild b::before{
  background:var(--messing); border-color:var(--messing);
}
.regal input:focus-visible + .karte{
  outline:2px solid var(--signal-lift); outline-offset:4px;
}

.mw__ehrlich{
  max-width:62ch; font-size:.9375rem; line-height:1.62;
  color:var(--leinen); text-wrap:pretty;
  border-left:1px solid var(--messing-tief); padding-left:var(--md);
}
.ansicht__sockel{position:relative}
.ansicht__sockel::after{
  content:''; position:absolute; inset:auto 0 0 0; height:1px;
  background:rgba(201,150,74,.16);
}

/* ══════════════════════════ AUSSTELLUNG ══════════════════════════ */
.ambiente{
  margin-top:var(--wand);
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--xl);
}
.ambiente figcaption{margin-top:var(--md); display:flex; flex-direction:column; gap:11px}
.ambiente .titel{color:var(--kreide)}

.ambiente__fuss{
  margin-top:var(--wand); padding-top:var(--lg);
  border-top:1px solid var(--leinen-linie);
  display:flex; flex-wrap:wrap; gap:var(--lg) var(--xl); justify-content:space-between; align-items:start;
}
.ambiente__fuss p{color:var(--leinen); max-width:34ch}
.ambiente__fuss b{color:var(--kreide); font-weight:600}
.zeiten{display:flex; flex-wrap:wrap; gap:var(--lg)}
.zeiten div{display:flex; flex-direction:column; gap:7px}
.zeiten dt{
  font-size:.6875rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--leinen);
}
.zeiten dd{font-variant-numeric:tabular-nums; color:var(--kreide); font-weight:600}

/* ══════════════════════════ LEISTUNGEN ══════════════════════════ */
.liste{margin-top:var(--wand); border-top:1px solid var(--stein-regel)}
.liste li{
  display:grid; grid-template-columns:44px minmax(0,240px) minmax(0,1fr) 108px;
  gap:var(--lg); align-items:baseline;
  padding:var(--lg) var(--sm);
  border-bottom:1px solid var(--stein-linie);
  transition:background .22s;
}
.liste li:hover{background:var(--stein-hoch)}
.liste__nr{
  font-size:.625rem; font-weight:600; letter-spacing:.11em;
  font-variant-numeric:tabular-nums; color:var(--signal-text);
}
.liste p{color:var(--graphit-weich); max-width:56ch; text-wrap:pretty}
.ort{
  justify-self:end; white-space:nowrap;
  font-size:.625rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  color:var(--graphit-weich);
  border:1px solid var(--stein-regel); padding:6px 10px;
}

/* ── Ablauf ── */
.schritte{
  margin-top:var(--wand);
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--xl) var(--wand);
}
.schritte li{display:grid; grid-template-columns:56px minmax(0,1fr); gap:var(--md); align-items:start}
.schritte__nr{
  font-family:'Bricolage Grotesque','Helvetica Neue',Arial,sans-serif;
  font-variation-settings:'opsz' 48;
  font-weight:800; font-size:1.7rem; line-height:.9; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; color:var(--stein-regel);
  padding-top:2px;
}
.schritte .titel{margin-bottom:10px}
.schritte p{color:var(--graphit-weich); max-width:46ch; text-wrap:pretty}

/* ── Fabrikate ── */
.fabrikate{
  margin-top:var(--wand);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--stein-regel); border-left:1px solid var(--stein-linie);
}
.fabrikate li{
  padding:var(--lg);
  border-right:1px solid var(--stein-linie); border-bottom:1px solid var(--stein-linie);
}
.fabrikate .titel{margin-bottom:10px}
.fabrikate p{font-size:.9375rem; line-height:1.58; color:var(--graphit-weich); text-wrap:pretty}

/* ══════════════════════════ FRAGEN ══════════════════════════ */
.faq{margin-top:var(--wand); border-top:1px solid var(--leinen-linie)}
.faq details{border-bottom:1px solid var(--leinen-linie)}
.faq summary{
  list-style:none; cursor:pointer; padding:var(--lg) 46px var(--lg) 0;
  position:relative; transition:color .22s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary .titel{color:var(--kreide); transition:color .22s}
.faq summary:hover .titel{color:var(--messing)}
.faq summary::before,.faq summary::after{
  content:''; position:absolute; right:6px; top:50%; background:var(--messing);
  transition:transform .34s var(--federn), opacity .28s;
}
.faq summary::before{width:15px; height:1.5px; transform:translateY(-50%)}
.faq summary::after{width:1.5px; height:15px; right:12.75px; transform:translateY(-50%)}
.faq details[open] summary::after{transform:translateY(-50%) rotate(90deg); opacity:0}
.faq__a{padding:0 46px var(--lg) 0; max-width:70ch}
.faq__a p{color:var(--leinen); text-wrap:pretty}
.faq__a a{color:var(--kreide); text-underline-offset:4px; text-decoration-color:var(--messing)}
@media (prefers-reduced-motion:no-preference){
  .faq details[open] .faq__a{animation:auf .42s var(--federn) both}
}
@keyframes auf{from{opacity:0; transform:translateY(-7px)}to{opacity:1; transform:none}}

/* ══════════════════════════ ANFRAGE ══════════════════════════ */
.anfrage{
  margin-top:var(--wand);
  display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr); gap:var(--wand);
  align-items:start;
}
.form{display:flex; flex-direction:column; gap:var(--lg)}
.form__paar{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--lg)}
.feldchen{display:flex; flex-direction:column; gap:9px}
.feldchen label{
  font-size:.6875rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--graphit-weich);
}
.feldchen label span{text-transform:none; letter-spacing:.02em; opacity:.72; font-weight:400}
.feldchen input,.feldchen select,.feldchen textarea{
  background:transparent; border:0; border-bottom:1px solid var(--stein-regel);
  padding:11px 0; color:var(--graphit); border-radius:0;
  transition:border-color .22s, box-shadow .22s;
}
.feldchen textarea{resize:vertical; min-height:104px; line-height:1.6}
.feldchen select{
  appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--graphit-weich) 50%),linear-gradient(135deg,var(--graphit-weich) 50%,transparent 50%);
  background-position:calc(100% - 13px) center, calc(100% - 8px) center;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
  padding-right:30px;
}
.feldchen input::placeholder,.feldchen textarea::placeholder{color:var(--stein-platzhalter)}
.feldchen :is(input,select,textarea):focus{
  outline:none; border-bottom-width:2px; border-color:var(--signal);
  box-shadow:0 1px 0 var(--signal);
}
.feldchen :is(input,select,textarea):focus-visible{outline:2px solid var(--signal); outline-offset:4px}
.feldchen :is(input,textarea)[aria-invalid=true]{border-color:var(--signal-text); border-bottom-width:2px}
.fehler{
  font-size:.8125rem; font-weight:500; color:var(--signal-text);
  display:flex; align-items:center; gap:8px;
}
.fehler[hidden]{display:none} /* sonst schlägt display:flex das hidden-Attribut */
.fehler::before{content:''; width:9px; height:9px; background:var(--signal-text); flex:0 0 auto}
.form .knopf{align-self:flex-start}
.form__notiz{
  font-size:.8125rem; line-height:1.62; color:var(--graphit-weich); max-width:62ch;
  border-top:1px solid var(--stein-linie); padding-top:var(--md);
}
.form__notiz a{color:var(--signal-text); text-underline-offset:3px}

.studio{background:var(--stein-hoch); padding:var(--lg); box-shadow:var(--heben-hell)}
.studio > .titel{margin-bottom:var(--md); padding-bottom:var(--md); border-bottom:1px solid var(--stein-regel)}
.studio__dl{display:grid; gap:var(--sm)}
.studio__dl div{display:grid; grid-template-columns:96px minmax(0,1fr); gap:var(--sm); align-items:baseline}
.studio__dl dt{
  font-size:.6875rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--graphit-weich);
}
.studio__dl dd{font-size:.9375rem; font-variant-numeric:tabular-nums}
.studio__dl a{color:var(--graphit); text-underline-offset:3px; text-decoration-color:var(--stein-regel)}
.studio__notiz{
  margin-top:var(--md); padding-top:var(--md); border-top:1px solid var(--stein-linie);
  font-size:.8125rem; line-height:1.6; color:var(--graphit-weich);
}

/* ══════════════════════════ FUSS ══════════════════════════ */
.fuss{background:var(--lack-tief); padding-block:var(--wand) var(--xl); color:var(--leinen)}
.fuss__kopf{display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--md) var(--lg)}
.fuss__marke{
  font-family:'Bricolage Grotesque','Helvetica Neue',Arial,sans-serif;
  font-variation-settings:'opsz' 96;
  font-weight:800; font-size:clamp(2.4rem,6.4vw,4.6rem); line-height:.9; letter-spacing:-.035em;
}
.fuss__marke span{color:var(--kreide)}
.fuss__marke b{color:var(--signal-lift); font-weight:800}
.fuss__claim{font-size:.8125rem; letter-spacing:.02em}

.fuss__recht{
  margin-top:var(--wand); border-top:1px solid var(--leinen-linie);
}
.recht{border-bottom:1px solid var(--leinen-linie)}
.recht summary{
  list-style:none; cursor:pointer; padding:var(--md) 40px var(--md) 0; position:relative;
}
.recht summary::-webkit-details-marker{display:none}
.recht summary .titel{font-size:1.05rem; color:var(--kreide); transition:color .22s}
.recht summary:hover .titel{color:var(--messing)}
.recht summary::before,.recht summary::after{
  content:''; position:absolute; right:6px; top:50%; background:var(--messing);
  transition:transform .3s var(--federn), opacity .26s;
}
.recht summary::before{width:12px; height:1.5px; transform:translateY(-50%)}
.recht summary::after{width:1.5px; height:12px; right:11.25px; transform:translateY(-50%)}
.recht[open] summary::after{transform:translateY(-50%) rotate(90deg); opacity:0}
.recht__c{padding:0 0 var(--md); max-width:72ch}
.recht__c p{font-size:.8125rem; line-height:1.66}
.recht__c p + p{margin-top:var(--sm)}
.recht__c b{color:var(--kreide)}

.fuss__basis{
  margin-top:var(--lg); display:flex; flex-wrap:wrap; gap:var(--md) var(--lg);
  justify-content:space-between; align-items:center;
  font-size:.8125rem; font-variant-numeric:tabular-nums;
}
.hoch{
  text-decoration:none; display:inline-flex; align-items:center; gap:9px;
  font-size:.6875rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--kreide);
}
.hoch i{
  width:1px; height:14px; background:var(--messing); position:relative;
  transition:transform .3s var(--federn);
}
.hoch i::before{
  content:''; position:absolute; top:0; left:-2.5px;
  border-left:3px solid transparent; border-right:3px solid transparent;
  border-bottom:4px solid var(--messing);
}
.hoch:hover i{transform:translateY(-3px)}

/* ══════════════════════════ DOCK ══════════════════════════ */
.dock{
  position:fixed; inset:auto 0 0 0; z-index:90; display:none;
  transform:translateY(101%); transition:transform .42s var(--federn);
  background:rgba(12,10,9,.94); backdrop-filter:blur(14px);
  box-shadow:0 -1px 0 rgba(201,150,74,.28);
}
.dock.ist-da{transform:none}
.dock__tel,.dock__cta{
  display:flex; align-items:center; justify-content:center;
  padding:17px 18px; text-decoration:none; line-height:1;
  font-size:.6875rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
}
.dock__tel{flex:1; color:var(--kreide); font-variant-numeric:tabular-nums; letter-spacing:.08em}
.dock__cta{flex:0 0 auto; background:var(--signal); color:var(--weiss); padding-inline:26px}
.dock__cta:active{background:var(--signal-press)}

/* ══════════════════════════ BEWEGUNG ══════════════════════════ */
/* Ein einziger komponierter Moment: Inhalte steigen beim Eintritt.
   Standard ist sichtbar — ohne JS und ohne Bewegung bleibt alles lesbar. */
@media (prefers-reduced-motion:no-preference){
  .js .steigt{opacity:0; transform:translateY(22px)}
  .js .steigt.ist-da{
    opacity:1; transform:none;
    transition:opacity .72s var(--federn), transform .72s var(--federn);
  }
  .js .platte.steigt.ist-da,.js .ambiente li.steigt.ist-da,.js .karte-huelle.ist-da{transition-delay:var(--verzug,0ms)}
}

/* ══════════════════════════ BREITEN ══════════════════════════ */
@media (max-width:1160px){
  .mw{grid-template-columns:minmax(0,1fr); gap:var(--xl)}
  .mw__ansicht{position:static}
  .platten,.ambiente{grid-template-columns:minmax(0,1fr); gap:var(--wand)}
  .platte:nth-child(even){margin-top:0}
  .platte p,.ambiente figcaption p{max-width:58ch}
  .anfrage{grid-template-columns:minmax(0,1fr); gap:var(--xl)}
  .schritte{grid-template-columns:minmax(0,1fr); gap:var(--lg)}
  .fabrikate{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ansicht{aspect-ratio:16/10}
}
@media (max-width:1040px){
  .nav{
    position:fixed; inset:0 0 auto 0; z-index:-1;
    flex-direction:column; align-items:flex-start; gap:var(--md);
    background:var(--lack-tief); padding:96px var(--rand) var(--xl);
    transform:translateY(-101%); transition:transform .46s var(--federn);
    box-shadow:0 1px 0 rgba(201,150,74,.24);
  }
  .nav.ist-offen{transform:none}
  .nav a{font-size:.8125rem}
  .nav .tel{padding-left:0}
  .nav .tel::before{display:none}
  .nav .knopf--klein{margin-top:var(--sm)}
  .burger{display:block}
  .kopf.ist-fest,.nav.ist-offen ~ .kopf{background:rgba(12,10,9,.9)}
  .dock{display:flex}
  body{padding-bottom:0}
  .liste li{grid-template-columns:36px minmax(0,1fr); gap:var(--sm) var(--md)}
  .liste .titel{grid-column:2}
  .liste p{grid-column:2; max-width:60ch}
  .ort{grid-column:2; justify-self:start}
  .liste__nr{grid-row:1/2}
}
@media (max-width:880px){
  .regal__reihe,.regal--platten .regal__reihe{
    grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(158px,1fr);
    gap:var(--md);
    overflow-x:auto; scroll-snap-type:x mandatory;
    padding-bottom:var(--sm); margin-inline:calc(var(--rand) * -1); padding-inline:var(--rand);
    scrollbar-width:thin;
  }
  .regal__reihe::before{left:var(--rand); right:var(--rand)}
  .karte{scroll-snap-align:start}
  .ablesung__zeile{grid-template-columns:minmax(0,1fr); gap:9px}
  .hero__aktion{gap:var(--lg)}
}
@media (max-width:620px){
  body{font-size:16px}
  .hero{min-height:auto}
  .hero__bild{position:relative; aspect-ratio:5/4; inset:auto}
  .hero__bild::after{background:linear-gradient(to top, rgba(9,7,6,.72), transparent 52%)}
  .hero__inhalt{padding-top:var(--xl)}
  .hero .anzeige{max-width:none}
  .weiter{display:none}
  .hero__notiz{padding-bottom:var(--xl)}
  .fabrikate{grid-template-columns:minmax(0,1fr)}
  .studio__dl div{grid-template-columns:minmax(0,1fr); gap:3px}
  .form__paar{grid-template-columns:minmax(0,1fr)}
  .ambiente__fuss{flex-direction:column}
  .zeiten{gap:var(--md) var(--lg)}
  .ansicht{aspect-ratio:5/4}
  .faq summary{padding-right:38px}
  .faq__a{padding-right:0}
}

@media print{
  .kopf,.dock,.weiter,.burger{display:none !important}
  body{background:#fff; color:#000}
  .feld{padding-block:24pt; background:#fff !important; color:#000 !important}
  .faq details,.recht{border-color:#999}
  .faq__a,.recht__c{display:block !important}
}