/* Stöckli Schreinerei & Bestattung – Entwurf von Seetalwebsites
   Zwei Türen, zwei Stimmen: Schreinerei in Schibsted Grotesk, Bestattung in Newsreader. */

:root {
  --nussbaum: #47291E;
  --kalk: #ECEDE7;
  --kalk-tief: #E2E3DC;
  --russ: 32 28 26;          /* #201C1A */
  --schiefer: #222927;
  --hell: 231 232 226;       /* #E7E8E2 */
  --gold: #C29A3A;
  --gold-hover: #D1AA4C;

  --t1: rgb(var(--russ) / 0.92);
  --t2: rgb(var(--russ) / 0.68);
  --t3: rgb(var(--russ) / 0.48);
  --h1: rgb(var(--hell) / 0.94);
  --h2: rgb(var(--hell) / 0.70);
  --h3: rgb(var(--hell) / 0.50);

  --grotesk: "Schibsted Grotesk", system-ui, sans-serif;
  --serif: "Newsreader", Georgia, serif;

  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 40px; --s5: 64px; --s6: 104px;
  --rand: 20px;
  --breite: 1200px;
  --radius: 4px;
  --streifen: 44px;

  --expo: cubic-bezier(0.19, 1, 0.22, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--streifen) + var(--s2)); }
body {
  margin: 0;
  background: var(--kalk);
  color: var(--t1);
  font: 400 17px/1.55 var(--grotesk);
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.innen { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }
.abschnitt { padding: var(--s5) 0; }

h2 {
  font: 500 40px/1.05 var(--grotesk);
  letter-spacing: -0.03em;
}
h3 {
  font: 500 21px/1.25 var(--grotesk);
  letter-spacing: -0.015em;
}

.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 var(--s3);
  background: var(--gold); color: #1E1A16;
  border-radius: 999px;
  font: 500 17px/1 var(--grotesk);
  text-decoration: none;
  transition: background-color 150ms ease-out;
}
.knopf:hover { background: var(--gold-hover); }

.textlink {
  display: inline-block; padding: 6px 0;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
  text-decoration-color: currentColor;
  transition: text-decoration-color 150ms ease-out, color 150ms ease-out;
}
.textlink:hover { color: var(--gold); }

/* ---------- Die zwei Türen (Umschalter ganz oben) ---------- */
.tueren {
  position: sticky; top: 0; z-index: 100;
  background: var(--schiefer);
  height: var(--streifen);
}
.tueren__innen {
  max-width: var(--breite); height: 100%; margin: 0 auto; padding: 0 var(--rand);
  display: flex; gap: var(--s3); align-items: stretch;
}
.tueren__tuer {
  display: flex; align-items: center;
  color: var(--h3);
  font: 500 15px/1 var(--grotesk);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 150ms ease-out, border-color 150ms ease-out;
}
.tueren__tuer:hover { color: var(--h1); }
.tueren__tuer[aria-current="true"] { color: var(--h1); border-bottom-color: var(--gold); }
.tueren__tuer[data-tuer="bestattung"] { margin-left: auto; }

/* ---------- Einstieg ---------- */
.einstieg {
  background: var(--nussbaum);
  color: var(--h1);
}
.einstieg__text { padding: var(--s2) var(--rand) var(--s4); }
.marke {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: var(--s4);
}
.marke__s { width: 36px; height: 36px; border-radius: 2px; }
.marke__name { font: 600 18px/1.1 var(--grotesk); letter-spacing: -0.01em; }
.marke__ort { display: block; font-weight: 400; font-size: 14px; color: var(--h2); }
.marke__kontakt {
  margin-left: auto; padding: 8px 0; font-size: 15px; color: var(--h2);
  text-decoration: none; transition: color 150ms ease-out;
}
.marke__kontakt:hover { color: var(--h1); }

.titel {
  font: 500 46px/1 var(--grotesk);
  letter-spacing: -0.035em;
  color: var(--h1);
}
.zeile { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.zeile > span { display: block; }

.einstieg__satz {
  margin-top: var(--s3);
  max-width: 34ch;
  font-size: 18px; line-height: 1.5;
  color: var(--h2);
}
.einstieg__tun {
  margin-top: var(--s4);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3);
}
.einstieg__zeit { font-size: 14px; line-height: 1.4; color: var(--h3); }

.einstieg__bild { position: relative; }
.einstieg__rahmen { overflow: hidden; aspect-ratio: 4 / 3; }
.einstieg__rahmen img {
  width: 100%; height: 115%; object-fit: cover; object-position: 60% 40%;
  will-change: transform;
}
.einstieg__bild figcaption {
  padding: var(--s1) var(--rand) var(--s2);
  font-size: 13px; color: var(--h3);
}

/* ---------- Schreinerei ---------- */
.kopfzeile { display: grid; gap: var(--s2); margin-bottom: var(--s4); }
.kopfzeile__text { max-width: 52ch; color: var(--t2); }

.liste { border-top: 1px solid rgb(var(--russ) / 0.16); }
.liste__zeile {
  display: grid;
  grid-template-columns: 1fr 104px;
  grid-template-areas: "titel bild" "text bild";
  column-gap: var(--s2); row-gap: 4px;
  padding: var(--s3) 0;
  border-bottom: 1px solid rgb(var(--russ) / 0.16);
}
.liste__zeile h3 { grid-area: titel; }
.liste__zeile p { grid-area: text; color: var(--t2); font-size: 16px; max-width: 52ch; }
.liste__klein {
  grid-area: bild; align-self: start;
  width: 104px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius);
}

.folger {
  position: fixed; left: 0; top: 0; z-index: 50;
  width: 320px; aspect-ratio: 4 / 3;
  pointer-events: none; overflow: hidden; border-radius: var(--radius);
  opacity: 0; transform: translate3d(-999px, -999px, 0) scale(0.92);
  transition: opacity 150ms ease-out;
  display: none;
}
.folger img { width: 100%; height: 100%; object-fit: cover; }

.aktuell {
  margin-top: var(--s5);
  display: grid; gap: var(--s3);
  padding: var(--s3);
  background: var(--kalk-tief);
  border-radius: var(--radius);
}
.aktuell img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; }
.aktuell__text { display: grid; gap: var(--s2); align-content: start; }
.aktuell__text p { color: var(--t2); max-width: 46ch; }

/* ---------- Bestattung: ruhig, ohne Bewegung ---------- */
.bestattung {
  background: var(--schiefer);
  color: var(--h1);
}
.bestattung h2, .bestattung h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }
.bestattung h2 { font-size: 44px; line-height: 1.05; }
.bestattung h3 { font-size: 26px; line-height: 1.2; }
.bestattung p, .bestattung li { font-family: var(--serif); font-size: 19px; line-height: 1.6; }

.bestattung__kopf { display: grid; gap: var(--s2); }
.bestattung__lead { color: var(--h2); max-width: 36ch; }
.bestattung__lead strong { color: var(--h1); font-weight: 500; }

.notdienst {
  margin-top: var(--s4);
  padding: var(--s3) 0;
  border-top: 1px solid rgb(var(--hell) / 0.18);
  border-bottom: 1px solid rgb(var(--hell) / 0.18);
  display: grid; gap: var(--s1);
}
.bestattung .notdienst__wann { font-family: var(--grotesk); font-size: 15px; color: var(--h3); }
.bestattung .notdienst__nummer {
  font: 400 44px/1.05 var(--serif);
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums;
}
.notdienst__mail { justify-self: start; padding: 6px 0; font-family: var(--grotesk); font-size: 16px; color: var(--h2); text-underline-offset: 4px; }
.notdienst__mail:hover { color: var(--h1); }

.todesfall { margin-top: var(--s5); display: grid; gap: var(--s4); }
.todesfall__einleitung { display: grid; gap: var(--s2); align-content: start; }
.todesfall__einleitung p { color: var(--h2); max-width: 44ch; }
.textlink--hell { font-family: var(--grotesk); font-size: 16px; color: var(--h1); justify-self: start; }

.schritte { counter-reset: schritt; border-top: 1px solid rgb(var(--hell) / 0.18); }
.schritte li { counter-increment: schritt; border-bottom: 1px solid rgb(var(--hell) / 0.18); }
.schritte summary {
  display: flex; align-items: baseline; gap: var(--s2);
  padding: var(--s2) 0;
  font: 400 21px/1.3 var(--serif);
  cursor: pointer; list-style: none;
}
.schritte summary::-webkit-details-marker { display: none; }
.schritte summary::before {
  content: counter(schritt) ".";
  min-width: 1.4em; color: var(--h3);
  font-variant-numeric: tabular-nums;
}
.schritte summary::after {
  content: "+"; margin-left: auto; color: var(--h3);
  font-family: var(--grotesk);
}
.schritte details[open] summary::after { content: "–"; }
.schritte details p {
  padding: 0 0 var(--s3) calc(1.4em + var(--s2));
  color: var(--h2); max-width: 56ch; font-size: 18px;
}

.uebernehmen { margin-top: var(--s5); display: grid; gap: var(--s3); }
.uebernehmen ul { display: grid; gap: var(--s1); }
.uebernehmen li { color: var(--h2); padding-left: var(--s3); position: relative; max-width: 60ch; }
.uebernehmen li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 10px; height: 1px; background: rgb(var(--hell) / 0.4); }

.ausstellung { margin-top: var(--s5); display: grid; gap: var(--s2); }
.ausstellung > p { color: var(--h2); max-width: 48ch; }
.ausstellung__reihe {
  margin-top: var(--s2);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s2);
}
.ausstellung__reihe li { display: grid; gap: var(--s1); }
.ausstellung__reihe img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: contain;
  background: #FCFCFA; border-radius: var(--radius);
  padding: var(--s1);
}
.bestattung .ausstellung__reihe span { font-family: var(--grotesk); font-size: 15px; color: var(--h2); }

.team { margin-top: var(--s5); max-width: 640px; display: grid; gap: var(--s2); }
.team img { width: 100%; aspect-ratio: 940 / 475; object-fit: cover; border-radius: var(--radius); }
.team figcaption { font-family: var(--grotesk); font-size: 14px; line-height: 1.5; color: var(--h3); max-width: 60ch; }

/* ---------- Seit 1942 ---------- */
.seit__innen { display: grid; gap: var(--s3); }
.seit h2 { font-size: 64px; line-height: 1; letter-spacing: -0.04em; }
.seit__text { display: grid; gap: var(--s4); }
.seit__text p { font-size: 20px; line-height: 1.5; max-width: 40ch; }
.platzhalter {
  display: grid; place-items: center;
  aspect-ratio: 3 / 2; max-width: 520px;
  border: 1px dashed rgb(var(--russ) / 0.3); border-radius: var(--radius);
  color: var(--t3); font-size: 15px; text-align: center; padding: var(--s3);
}

/* ---------- Kontakt: der Mittelpunkt ---------- */
.kontakt { background: var(--nussbaum); color: var(--h1); }
.kontakt h2 { color: var(--h2); font-size: 21px; font-weight: 500; letter-spacing: -0.01em; }
.kontakt__mail {
  display: block; margin-top: var(--s2);
  font: 500 34px/1.1 var(--grotesk); letter-spacing: -0.03em;
  text-decoration: none;
  transition: color 150ms ease-out;
}
.kontakt__mail span { display: block; }
.kontakt__mail:hover { color: var(--gold); }

.anliegen { margin-top: var(--s4); display: grid; gap: var(--s3); justify-items: start; }
.anliegen fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.anliegen legend { padding: 0; margin-bottom: var(--s2); color: var(--h2); font-size: 16px; }
.anliegen__wahl { display: flex; flex-wrap: wrap; gap: var(--s1); }
.anliegen__wahl label { position: relative; cursor: pointer; }
.anliegen__wahl input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.anliegen__wahl span {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s2);
  border: 1px solid rgb(var(--hell) / 0.3); border-radius: 999px;
  font-size: 15px; color: var(--h2);
  transition: background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out;
}
.anliegen__wahl input:checked + span { background: var(--h1); color: var(--nussbaum); border-color: transparent; }
.anliegen__wahl input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }

.kontakt__spalten {
  margin-top: var(--s5);
  display: grid; gap: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid rgb(var(--hell) / 0.2);
}
.kontakt__spalten h3 { font-size: 17px; color: var(--h3); font-weight: 500; margin-bottom: var(--s1); }
.kontakt__spalten p { color: var(--h2); }
.kontakt__spalten p + p { margin-top: var(--s1); }
.kontakt .nummer { color: var(--h1); font-size: 21px; }
.kontakt__vermieten { margin-top: var(--s5); font-size: 14px; color: var(--h3); }

/* ---------- Fuss ---------- */
.fuss { background: var(--schiefer); color: var(--h2); padding: var(--s4) 0; }
.fuss__name { font: 500 40px/1 var(--grotesk); letter-spacing: -0.035em; color: var(--h1); }
.fuss__zeile { margin-top: var(--s2); font-size: 14px; }
.fuss__entwurf { margin-top: var(--s3); font-size: 14px; color: var(--h3); }
.fuss__entwurf a { color: var(--h2); display: inline-block; padding: 6px 0; }

/* ---------- Bewegung (nur Einstieg und Liste) ---------- */
.js .zeile > span { transform: translateY(105%); }
.js .einstieg__rahmen { clip-path: inset(100% 0 0 0); }
.js .einstieg__rahmen img { scale: 1.15; }
.los .zeile > span { transform: none; transition: transform 1000ms var(--expo); }
.los .zeile:nth-child(2) > span { transition-delay: 90ms; }
.los .einstieg__rahmen { clip-path: inset(0 0 0 0); transition: clip-path 1100ms var(--expo) 150ms; }
.los .einstieg__rahmen img { scale: 1; transition: scale 1400ms var(--expo) 150ms; }

/* ---------- Computer ---------- */
@media (min-width: 900px) {
  :root { --rand: 40px; }
  .abschnitt { padding: var(--s6) 0; }
  h2 { font-size: 64px; }

  .einstieg {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: calc(100svh - var(--streifen));
  }
  .einstieg__text {
    display: flex; flex-direction: column;
    padding: var(--s3) var(--s4) var(--s5) max(var(--rand), calc((100vw - var(--breite)) / 2 + var(--rand)));
  }
  .einstieg__haupt { margin-top: auto; }
  .titel { font-size: clamp(64px, 6.4vw, 112px); line-height: 0.98; }
  .einstieg__satz { font-size: 19px; }
  .einstieg__bild { display: flex; flex-direction: column; }
  .einstieg__rahmen { flex: 1; aspect-ratio: auto; min-height: 0; }
  .einstieg__rahmen img { height: 115%; }
  .einstieg__bild figcaption { position: absolute; left: var(--s3); bottom: var(--s3); padding: 6px 12px; background: var(--nussbaum); color: var(--h2); border-radius: var(--radius); }

  .kopfzeile { grid-template-columns: 1fr 1fr; align-items: end; }
  .liste__zeile {
    grid-template-columns: 1fr 1fr; grid-template-areas: "titel text";
    padding: var(--s3) 0; column-gap: var(--s4);
  }
  .liste__zeile h3 { font-size: 26px; }
  .liste__klein { display: none; }
  .aktuell { grid-template-columns: 280px 1fr; align-items: center; gap: var(--s4); padding: var(--s4); }

  .bestattung h2 { font-size: 72px; }
  .bestattung__kopf { grid-template-columns: 1fr 1fr; align-items: end; }
  .bestattung__lead { font-size: 24px; }
  .notdienst { grid-template-columns: auto 1fr auto; align-items: baseline; gap: var(--s4); }
  .bestattung .notdienst__nummer { font-size: 64px; }
  .todesfall { grid-template-columns: 1fr 1fr; gap: var(--s5); }
  .uebernehmen { grid-template-columns: 1fr 1fr; gap: var(--s5); }
  .uebernehmen ul { gap: var(--s1); }
  .ausstellung__reihe { grid-template-columns: repeat(5, 1fr); }

  .seit__innen { grid-template-columns: 1fr 1fr; gap: var(--s5); }
  .seit h2 { font-size: 128px; }

  .kontakt__mail { font-size: clamp(48px, 5.6vw, 88px); }
  .kontakt__spalten { grid-template-columns: repeat(3, 1fr); }
  .fuss__name { font-size: 72px; }
}

@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  .folger { display: block; }
  .liste__zeile[data-bild] { cursor: default; }
  .liste__zeile { transition: color 150ms ease-out; }
  .liste:hover .liste__zeile:not(:hover) { color: var(--t3); }
  .liste:hover .liste__zeile:not(:hover) p { color: var(--t3); }
}

@media (prefers-reduced-motion: reduce) {
  .js .zeile > span, .los .zeile > span { transform: none; transition: none; }
  .js .einstieg__rahmen, .los .einstieg__rahmen { clip-path: none; transition: none; }
  .js .einstieg__rahmen img, .los .einstieg__rahmen img { scale: 1; transition: none; transform: none !important; }
  .folger { display: none !important; }
  html { scroll-behavior: auto; }
}