/* Kliebenschädel Schreinerei – Entwurf
   Idee: Sein Name hängt als Schild auf einer Nussbaum-Lamellenwand,
   so wie die Praxisschilder auf den Wänden, die er baut. */

:root {
  --grund: #ECEEEA;        /* Mineralweiss, wie Staron */
  --flaeche: #DFE3DE;
  --linie: #C9CEC8;
  --tinte: #201B17;
  --t1: rgba(32, 27, 23, .92);
  --t2: rgba(32, 27, 23, .68);
  --t3: rgba(32, 27, 23, .48);
  --nuss: #5A3A27;
  --nuss-dunkel: #3B261A;
  --nuss-hell: #74503A;
  --fuge: #24170F;
  --schild: #F7F8F5;
  --mint: #A8DCCF;         /* aus seinem Badge «seit 2013» */
  --mint-tief: #8CCAB9;

  --serif: "Newsreader", Georgia, serif;
  --sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;

  --rand: 20px;
  --luft: 72px;
  --expo: cubic-bezier(0.19, 1, 0.22, 1);
}
@media (min-width: 900px) {
  :root { --rand: 40px; --luft: 120px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 16px; }
body {
  margin: 0;
  background: var(--grund);
  color: var(--t1);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--nuss); outline-offset: 3px; }

.rahmen { max-width: 1200px; margin: 0 auto; padding: 0 var(--rand); }

/* ---------- Balken ganz oben ---------- */
.balken {
  background: var(--fuge);
  color: rgba(236, 238, 234, .86);
  font-size: 13px;
  line-height: 1.4;
  padding: 8px var(--rand);
}
.balken__text { max-width: 1200px; margin: 0 auto; }
.balken a { color: var(--mint); text-underline-offset: 3px; display: inline-block; padding: 8px 0; margin: -8px 0; }

/* ---------- Kopf ---------- */
.kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px var(--rand);
}
.zeichen { display: flex; flex-direction: column; text-decoration: none; line-height: 1; }
.zeichen__name { font-family: var(--serif); font-size: 21px; font-weight: 500; letter-spacing: -0.01em; color: var(--nuss); }
.zeichen__was { font-size: 11px; letter-spacing: .16em; color: var(--t2); margin-top: 4px; }
.kopf__nav { display: flex; gap: 24px; font-size: 15px; }
.kopf__nav a { text-decoration: none; color: var(--t2); transition: color 150ms ease-out; }
.kopf__nav a:hover { color: var(--tinte); }
.kopf__nav a:not(.kopf__anfragen) { display: none; }
.kopf__anfragen {
  color: var(--tinte) !important;
  border-bottom: 1px solid var(--tinte);
  padding: 10px 0 2px;
}
@media (min-width: 900px) {
  .kopf__nav a:not(.kopf__anfragen) { display: inline; }
}

/* ---------- Einstieg ---------- */
.einstieg { position: relative; }
.wand {
  position: relative;
  height: min(46svh, 420px);
  overflow: hidden;
  display: flex;
  gap: 5px;
  padding: 0 3px;
  background: var(--fuge);
  /* ohne JS: Lamellen als Muster */
  background-image: repeating-linear-gradient(90deg, var(--nuss) 0 22px, var(--fuge) 22px 27px);
}
.wand.ist-gebaut { background-image: none; }
@media (min-width: 900px) {
  .wand { height: min(62vh, 640px); gap: 7px; }
}
.lamelle {
  flex: 1 0 22px;
  background-color: var(--nuss);
  /* Maserung: feine Längsstreifen */
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 4px, rgba(0,0,0,.05) 4px 5px, transparent 5px 9px);
  transform: translateY(-102%);
  transition: transform 1000ms var(--expo);
  transition-delay: calc(var(--i) * 35ms);
}
.lamelle--hell { background-color: var(--nuss-hell); }
.lamelle--dunkel { background-color: var(--nuss-dunkel); }
@media (min-width: 900px) { .lamelle { flex-basis: 30px; } }
.ist-bereit .lamelle { transform: none; }
.wand::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Licht von oben wie unter einem Downlight */
  background: linear-gradient(180deg, rgba(255, 236, 214, .10) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,.28) 100%);
}

.einstieg__schild {
  position: absolute;
  left: 0; right: 0;
  top: calc(min(46svh, 420px) - 40px);
  transform: translateY(-100%);
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--rand);
  pointer-events: none;
}
@media (min-width: 900px) {
  .einstieg__schild { top: calc(min(62vh, 640px) - 64px); }
}
.schild {
  position: relative;
  display: inline-block;
  pointer-events: auto;
  background: var(--schild);
  padding: 24px 20px;
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 18px 40px -18px rgba(0,0,0,.55);
  opacity: 0;
  transform: translateY(-16px) rotate(-1.2deg);
  transform-origin: 50% 0;
  transition: opacity 600ms ease-out 700ms, transform 1100ms var(--expo) 700ms;
}
.ist-bereit .schild { opacity: 1; transform: none; }
@media (min-width: 900px) { .schild { padding: 40px 64px 40px 40px; } }

.schild__titel { margin: 0; font-weight: 400; }
.maske { display: block; overflow: hidden; padding-bottom: .06em; }
.maske > span { display: block; transform: translateY(105%); transition: transform 900ms var(--expo); }
.maske:nth-child(1) > span { transition-delay: 1000ms; }
.maske:nth-child(2) > span { transition-delay: 1090ms; }
.ist-bereit .maske > span { transform: none; }
.schild__name {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: clamp(40px, 11.2vw, 116px);
  font-weight: 460;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--nuss);
}
.schild__was {
  font-family: var(--sans);
  font-size: clamp(17px, 2.1vw, 24px);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--t2);
  margin-top: 8px;
}
.plakette {
  position: absolute;
  right: 4px;
  top: -64px;
  width: 84px; height: 84px;
  border-radius: 50%;
  background: var(--mint);
  color: var(--fuge);
  display: grid;
  place-items: center;
  text-align: center;
  font-family: var(--serif);
  font-size: 13px;
  line-height: 1.1;
  transform: rotate(-14deg);
}
@media (min-width: 900px) {
  .plakette { width: 120px; height: 120px; font-size: 17px; right: -48px; top: -56px; }
}

.einstieg__text { padding-top: 24px; padding-bottom: var(--luft); }
.einstieg__satz { max-width: 36em; font-size: 17px; color: var(--t1); }
.einstieg__tun { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 24px; }
.einstieg__sterne { font-size: 14px; color: var(--t2); }
.sterne { color: var(--nuss); letter-spacing: .08em; margin-right: 4px; }
@media (min-width: 900px) {
  .einstieg__text { display: grid; grid-template-columns: 7fr 5fr; gap: 40px; align-items: end; padding-top: 40px; }
  .einstieg__satz { font-size: 19px; }
  .einstieg__tun { margin-top: 0; justify-content: flex-end; }
}

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  border: 0;
  border-radius: 2px;
  background: var(--mint);
  color: var(--fuge);
  font: 600 16px/1 var(--sans);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease-out, transform 150ms ease-out;
}
.knopf:hover { background: var(--mint-tief); }
.knopf:active { transform: translateY(1px); }
.textlink { text-underline-offset: 4px; display: inline-block; padding: 8px 0; }

/* ---------- Abschnitte allgemein ---------- */
.praxen, .kuechen, .werkstatt { padding: var(--luft) 0; border-top: 1px solid var(--linie); }
.kopfzeile { margin-bottom: 40px; }
.titel {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 440;
  font-size: clamp(40px, 7vw, 88px);
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0 0 24px;
  color: var(--tinte);
}
.kopfzeile__text { max-width: 36em; color: var(--t2); }
@media (min-width: 900px) {
  .kopfzeile { display: grid; grid-template-columns: 5fr 7fr; gap: 40px; align-items: end; margin-bottom: 64px; }
  .titel { margin: 0; }
}
.untertitel {
  font-family: var(--serif);
  font-weight: 440;
  font-size: 32px;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 64px 0 24px;
  color: var(--tinte);
}

/* ---------- Bilder ---------- */
.bild { margin: 0; }
.bild img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--flaeche);
}
.bild figcaption, .galerie__bild figcaption { font-size: 14px; color: var(--t2); margin-top: 8px; }
.bild--breit img { aspect-ratio: 4 / 3; }
@media (min-width: 900px) { .bild--breit img { aspect-ratio: 16 / 8; } }

[data-zeige] { overflow: hidden; }
.js [data-zeige] img {
  clip-path: inset(100% 0 0 0);
  transform: scale(1.15);
  transition: clip-path 1000ms var(--expo), transform 1400ms var(--expo);
}
.js [data-zeige].ist-da img { clip-path: inset(0 0 0 0); transform: none; }

.reihe { display: grid; gap: 24px; margin-top: 40px; }
.reihe--drei { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
.reihe--drei .bild img { aspect-ratio: 4 / 5; }
.reihe--drei .bild:first-child { grid-column: 1 / -1; }
.reihe--drei .bild:first-child img { aspect-ratio: 3 / 2; }
@media (min-width: 700px) {
  .reihe--drei { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .reihe--drei .bild:first-child { grid-column: auto; }
  .reihe--drei .bild:first-child img { aspect-ratio: 4 / 5; }
}
.reihe--werkstatt { margin-top: 0; }
@media (min-width: 700px) { .reihe--werkstatt { grid-template-columns: 2fr 1fr; } }
.reihe--werkstatt .bild img { aspect-ratio: 4 / 3; }
@media (min-width: 700px) { .reihe--werkstatt .bild:last-child img { height: 100%; aspect-ratio: auto; } .reihe--werkstatt .bild:last-child { display: flex; flex-direction: column; } .reihe--werkstatt .bild:last-child img { flex: 1; min-height: 0; } }
.hinweis { font-size: 14px; color: var(--t3); margin-top: 16px; }

/* ---------- Tafel: Praxen wie im Eingang eines Ärztehauses ---------- */
.tafel {
  margin-top: 40px;
  padding: 24px 16px;
  background: var(--fuge);
  background-image: repeating-linear-gradient(90deg, var(--nuss) 0 22px, var(--fuge) 22px 27px);
  border-radius: 2px;
}
@media (min-width: 900px) { .tafel { padding: 64px 104px; background-image: repeating-linear-gradient(90deg, var(--nuss) 0 30px, var(--fuge) 30px 37px); } }
.tafel__titel {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--schild);
  margin: 0 0 16px 8px;
}
.tafel__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
@media (min-width: 900px) { .tafel__liste { grid-template-columns: 1fr 1fr; gap: 8px 16px; } }
.schildchen {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  background: var(--schild);
  padding: 16px 16px 14px;
  border-radius: 2px;
  box-shadow: 0 10px 20px -14px rgba(0,0,0,.7);
}
.schildchen__name { font-family: var(--serif); font-size: 20px; line-height: 1.15; color: var(--tinte); letter-spacing: -0.01em; }
.schildchen__ort { font-size: 14px; color: var(--t2); white-space: nowrap; }
.schildchen__stand {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fuge);
  background: var(--mint);
  padding: 4px 8px;
  border-radius: 2px;
  white-space: nowrap;
}
.schildchen[data-stand="plan"] .schildchen__stand { background: transparent; box-shadow: inset 0 0 0 1px var(--mint-tief); }
.js .schildchen { opacity: 0; transform: translateX(-12px); transition: opacity 500ms ease-out, transform 800ms var(--expo); transition-delay: calc(var(--i, 0) * 60ms); }
.js .tafel.ist-da .schildchen { opacity: 1; transform: none; }

/* ---------- Galerie Küchen ---------- */
.galerie {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 var(--rand) 16px;
  scroll-padding: 0 var(--rand);
  scrollbar-width: thin;
  scrollbar-color: var(--linie) transparent;
}
.galerie__bild { flex: 0 0 82%; margin: 0; scroll-snap-align: start; }
.galerie__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--flaeche); }
@media (min-width: 900px) {
  .galerie { padding-left: max(var(--rand), calc((100vw - 1200px) / 2 + var(--rand))); gap: 24px; }
  .galerie__bild { flex-basis: 520px; }
}

.liste { margin: 40px 0 0; border-top: 1px solid var(--linie); }
.liste__zeile {
  display: grid;
  gap: 4px;
  padding: 16px 0;
  border-bottom: 1px solid var(--linie);
}
.liste dt { font-family: var(--serif); font-size: 22px; letter-spacing: -0.01em; color: var(--tinte); line-height: 1.2; }
.liste dd { margin: 0; color: var(--t2); }
@media (min-width: 900px) {
  .liste__zeile { grid-template-columns: 5fr 7fr; gap: 40px; align-items: baseline; padding: 24px 0; }
  .liste dt { font-size: 28px; }
}

/* ---------- Team als Türschilder ---------- */
.team { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 24px 16px; }
@media (min-width: 900px) { .team { grid-template-columns: repeat(6, 1fr); gap: 24px; } }
.person img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--flaeche); margin-bottom: 8px; }
.person__name { font-weight: 600; font-size: 16px; line-height: 1.3; color: var(--tinte); }
.person__rolle { font-size: 14px; color: var(--t2); line-height: 1.35; margin-top: 4px; }
.person__seit { font-family: var(--mono); font-size: 12px; color: var(--t3); margin-top: 4px; }

/* ---------- Kontakt ---------- */
.kontakt {
  background: var(--nuss-dunkel);
  color: rgba(236, 238, 234, .92);
  padding: var(--luft) 0;
}
.titel--hell { color: var(--schild); }
.kontakt__satz { max-width: 34em; color: rgba(236, 238, 234, .72); font-size: 18px; }
.kontakt__mail {
  display: block;
  margin: 40px 0 64px;
  font-family: var(--serif);
  font-weight: 420;
  font-size: clamp(30px, 6.4vw, 80px);
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--mint);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color 150ms ease-out;
}
.kontakt__mail:hover { color: var(--schild); }
.kontakt__raster { display: grid; gap: 64px; }
@media (min-width: 900px) { .kontakt__raster { grid-template-columns: 7fr 5fr; gap: 104px; } }

.anfrage { display: grid; gap: 16px; }
.anfrage__wahl { border: 0; padding: 0; margin: 0 0 8px; }
.anfrage__wahl legend { font-size: 15px; color: rgba(236, 238, 234, .72); margin-bottom: 8px; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font: 500 15px/1 var(--sans);
  color: rgba(236, 238, 234, .92);
  background: transparent;
  border: 1px solid rgba(236, 238, 234, .32);
  border-radius: 2px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
}
.chip:hover { border-color: rgba(236, 238, 234, .7); }
.chip[aria-pressed="true"] { background: var(--mint); border-color: var(--mint); color: var(--fuge); }
.feld { display: grid; gap: 8px; }
.feld span { font-size: 15px; color: rgba(236, 238, 234, .72); }
.feld input, .feld textarea {
  font: 400 17px/1.4 var(--sans);
  color: var(--schild);
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(236, 238, 234, .24);
  border-radius: 2px;
  padding: 14px 16px;
  transition: border-color 150ms ease-out;
}
.feld input:focus, .feld textarea:focus { outline: none; border-color: var(--mint); }
.anfrage .knopf { justify-self: start; margin-top: 8px; }
.anfrage__hilfe { font-size: 14px; color: rgba(236, 238, 234, .52); }

.kontakt__infos { display: grid; gap: 40px; align-content: start; }
.info { display: grid; gap: 8px; }
.info__titel { font-family: var(--serif); font-size: 24px; color: var(--schild); }
.info__klein { font-size: 14px; color: rgba(236, 238, 234, .6); }
.kontakt .textlink { color: var(--mint); }
.zeiten { border-collapse: collapse; font-family: var(--mono); font-size: 15px; }
.zeiten th { text-align: left; font-weight: 400; color: rgba(236, 238, 234, .6); padding: 0 24px 8px 0; vertical-align: top; }
.zeiten td { padding: 0 0 8px; }
.stimme { margin: 0; padding-top: 24px; border-top: 1px solid rgba(236, 238, 234, .2); }
.stimme p { font-family: var(--serif); font-size: 22px; line-height: 1.3; color: var(--schild); }
.stimme footer { font-size: 14px; color: rgba(236, 238, 234, .6); margin-top: 8px; }

/* ---------- Fuss ---------- */
.fuss { background: var(--fuge); color: rgba(236, 238, 234, .7); padding: 64px 0 40px; font-size: 14px; }
.fuss__name {
  font-family: var(--serif);
  font-size: clamp(44px, 12vw, 156px);
  font-weight: 440;
  letter-spacing: -0.04em;
  line-height: .9;
  color: var(--nuss-hell);
  margin-bottom: 40px;
}
.fuss__zeile { display: grid; gap: 8px; }
@media (min-width: 900px) { .fuss__zeile { display: flex; justify-content: space-between; } }
.fuss a { color: rgba(236, 238, 234, .86); text-underline-offset: 3px; display: inline-block; padding: 8px 0; }
.fuss__entwurf { margin-top: 24px; color: rgba(236, 238, 234, .5); }

/* ---------- Ruhig, wenn gewünscht ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .lamelle, .maske > span, .schild { transform: none !important; opacity: 1 !important; }
  .js [data-zeige] img { clip-path: none !important; transform: none !important; }
  .js .schildchen { opacity: 1 !important; transform: none !important; }
}