/* ============================================================
   Schreinerei Baumgartner – Entwurf F "Katalog"

   Ein Kunde denkt nicht in Leistungen, er denkt in Stücken: "Ich
   brauche einen Schrank für die Dachschräge." Diese Seite ist deshalb
   ein Regal. Gleich unter der ersten Zeile stehen die Fächer - je
   eines für ein Stück, in verschiedenen Farben und verschiedenen
   Größen, wie Möbelfronten nebeneinander. Wer wissen will, was
   dazugehört, klappt ein Fach auf.

   Was diesen Entwurf von den anderen fünf trennt:
   - Die Kacheln sind der Inhalt, nicht die Zierde. Kein Aufmacher über
     die volle Höhe, keine Bühne: nach drei Zeilen kommt das Regal.
   - Drei Farben im Wechsel statt einer Akzentfarbe.
   - Runde Ecken und viel Farbe - der freundlichste der sechs.
   - Kein Javascript. Das Aufklappen macht der Browser selbst.

   Farben nachgerechnet (WCAG 2.1):
     Tinte    #1E1A17 auf Creme      #FFF9F2  16,53:1
     Leise    #5C534A auf Creme      #FFF9F2   7,20:1
     Creme    #FFF9F2 auf Terrakotta #A63F27   5,97:1
     Creme    #FFF9F2 auf Petrol     #14514E   8,67:1
     Tinte    #1E1A17 auf Sand       #EBD3B0  11,91:1
     Terra    #A63F27 auf Creme      #FFF9F2   5,97:1
     Petrol   #14514E auf Creme      #FFF9F2   8,67:1
   Sand auf Terrakotta liegt bei 4,31:1 und steht deshalb nur groß
   (Fachnummern), nie in Lesegröße.
   ============================================================ */

:root {
  --creme: #FFF9F2;
  --tinte: #1E1A17;
  --leise: #5C534A;
  --terra: #A63F27;
  --terra-dunkel: #8E3520;
  --petrol: #14514E;
  --petrol-dunkel: #0E3D3B;
  --sand: #EBD3B0;
  --linie: #E2D8CC;

  --bahn: 72rem;
  --ecke: 14px;
  --ecke-klein: 8px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--tinte);
  font-family: 'Karla', 'Segoe UI', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .fach__name, .marke {
  font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  letter-spacing: -0.01em;
}

a { color: var(--terra); }
a:focus-visible, summary:focus-visible, button:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 3px;
  border-radius: 3px;
}

.bahn { width: min(100% - 2.5rem, var(--bahn)); margin-inline: auto; }

/* ---------- Die zwei Balken ganz oben ----------
   Der schwarze sagt, dass der Betrieb erfunden ist - der muss zuerst
   kommen und darf nicht wegklickbar sein. Der farbige darunter ist
   das, was ein Betrieb dort wirklich hinschreiben würde: eine
   Ankündigung, die sich alle paar Wochen ändert. */
.hinweis {
  margin: 0;
  background: var(--tinte);
  color: var(--creme);
  font-size: 0.78rem;
  line-height: 1.5;
  padding: 0.6rem 1.25rem;
  text-align: center;
}
.ansage-balken {
  margin: 0;
  background: var(--terra);
  color: var(--creme);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0.55rem 1.25rem;
  text-align: center;
}
/* Die Nummer darf nicht umbrechen - eine halbe Telefonnummer am
   Zeilenende liest niemand als Telefonnummer. */
.ansage-balken a { color: var(--creme); font-weight: 700; white-space: nowrap; }

.sprung { position: absolute; left: -9999px; }
.sprung:focus {
  position: static; display: block;
  padding: 0.6rem 1.25rem;
  background: var(--petrol); color: var(--creme);
}

/* ---------- Kopf ---------- */
.kopf { padding: 1.4rem 0 0; }
.kopf__innen {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.marke {
  font-size: 1.6rem;
  color: var(--tinte);
  text-decoration: none;
  margin-right: auto;
  line-height: 1;
}
.kopf__nav { display: none; gap: 1.4rem; }
.kopf__nav a {
  font-size: 0.92rem; font-weight: 600; color: var(--tinte);
  text-decoration: none; border-bottom: 2px solid transparent;
  padding-bottom: 2px; transition: border-color 0.15s;
}
.kopf__nav a:hover { border-bottom-color: var(--terra); }
@media (min-width: 54em) { .kopf__nav { display: flex; } }

.ruf {
  display: inline-block;
  background: var(--petrol); color: var(--creme);
  font-weight: 700; font-size: 0.95rem;
  text-decoration: none;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  transition: background-color 0.15s;
}
.ruf:hover { background: var(--petrol-dunkel); }

/* ---------- Aufmacher: kurz halten ----------
   Drei Zeilen, dann kommt das Regal. Wer eine Küche sucht, soll nicht
   erst eine Seite Selbstbeschreibung lesen. */
.auf { padding: 3rem 0 2.5rem; }
.oben {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--terra);
  margin: 0 0 1rem;
}
.auf h1 {
  font-size: clamp(2.4rem, 7vw, 4.2rem);
  line-height: 1.02;
  margin: 0 0 1.2rem;
  max-width: 15em;
}
.auf h1 em { font-style: italic; color: var(--terra); }
.auf__satz { margin: 0; max-width: 34em; font-size: 1.1rem; color: var(--leise); }

/* ---------- Das Regal ----------
   Die Fächer sind ungleich groß: Das erste nimmt zwei Spalten, die
   anderen je eine. Ein gleichmäßiges Raster sähe aus wie ein
   Baukasten - ein Regal hat verschieden große Fächer. */
.regal {
  display: grid;
  gap: 1rem;
  padding-bottom: 3.5rem;
}
@media (min-width: 40em) {
  .regal { grid-template-columns: 1fr 1fr; gap: 1.1rem; }
  .fach--breit { grid-column: span 2; }
}
@media (min-width: 62em) {
  .regal { grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
}

.fach {
  border-radius: var(--ecke);
  padding: 1.6rem 1.5rem 1.4rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.fach--foto:hover { transform: none; box-shadow: none; }
.fach:not(.fach--foto):hover { transform: translateY(-3px); box-shadow: 0 18px 30px -22px rgba(30,26,23,.55); }

.fach--petrol { background: var(--petrol); color: var(--creme); }
.fach--terra  { background: var(--terra);  color: var(--creme); }
.fach--sand   { background: var(--sand);   color: var(--tinte); }
.fach--rand   { background: transparent; color: var(--tinte); border: 1px solid var(--linie); }

/* Das Fach, in dem das Material liegt. Über die ganze Breite, weil ein
   einzelnes Foto neben zwei Farbflächen aussieht, als wäre es
   übriggeblieben - unten quer gelegt ist es der Boden des Regals.

   Kein Innenabstand und kein Text: Dieses Fach ist das Bild. */
.fach--foto {
  grid-column: 1 / -1;
  /* Kein Anheben beim Darüberfahren: Die anderen Fächer laden zum
     Aufklappen ein, dieses tut nichts. Bewegung würde etwas
     versprechen, das nicht kommt. */
  transition: none;
  padding: 0;
  overflow: hidden;
  margin: 0;
}
.fach--foto img {
  display: block; width: 100%;
  height: clamp(11rem, 24vw, 19rem);
  object-fit: cover; object-position: center 45%;
}

.fach__nr {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; opacity: 0.75;
  margin: 0 0 0.9rem;
}
.fach__name {
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  line-height: 1.05;
  margin: 0 0 0.6rem;
}
.fach--breit .fach__name { font-size: clamp(2rem, 5vw, 3rem); }
.fach__satz { margin: 0 0 1.2rem; font-size: 1rem; opacity: 0.92; max-width: 32em; }
.fach__preis {
  margin: auto 0 0;
  font-size: 0.95rem; font-weight: 700;
  padding-top: 1rem;
  border-top: 1px solid currentColor;
  border-top-color: color-mix(in srgb, currentColor 28%, transparent);
}

/* Das Aufklappen macht der Browser. Der Pfeil ist ein gedrehtes Eck,
   keine Grafik und kein Zeichensatz-Symbol. */
.fach details { margin-top: 1rem; }
.fach summary {
  list-style: none; cursor: pointer;
  font-size: 0.9rem; font-weight: 700;
  display: inline-flex; align-items: center; gap: 0.55rem;
}
.fach summary::-webkit-details-marker { display: none; }
.fach summary::after {
  content: "";
  width: 0.42em; height: 0.42em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.18s ease;
}
.fach details[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.fach details ul {
  margin: 0.9rem 0 0; padding: 0; list-style: none;
  display: grid; gap: 0.45rem;
  font-size: 0.95rem;
}
.fach details li { display: flex; gap: 0.6rem; }
.fach details li b { flex: 0 0 7.5rem; font-weight: 700; opacity: 0.75; }

/* ---------- Ablauf ---------- */
.ablauf { padding: 3.5rem 0; border-top: 1px solid var(--linie); }
.ablauf h2, .werkstatt h2, .schluss h2 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.1;
  margin: 0 0 2rem;
  max-width: 18em;
}
.stufen { display: grid; gap: 1.8rem; margin: 0; padding: 0; list-style: none; }
.stufen li { display: grid; gap: 0.4rem; }
.stufen b {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 1.9rem; font-weight: 400; line-height: 1;
  color: var(--terra);
}
.stufen h3 { font-size: 1.15rem; margin: 0; }
.stufen p { margin: 0; color: var(--leise); font-size: 1rem; }
@media (min-width: 48em) { .stufen { grid-template-columns: repeat(3, 1fr); gap: 2.2rem; } }

/* ---------- Werkstatt: das dunkle Band ---------- */
.werkstatt {
  background: var(--petrol);
  color: var(--creme);
  padding: 3.5rem 0;
  border-radius: var(--ecke);
  margin-bottom: 3.5rem;
}
.werkstatt__raster { display: grid; gap: 2rem; }
.werkstatt p { color: rgba(255,249,242,.86); max-width: 36em; }
.werkstatt .oben { color: var(--sand); }
.zahlen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.zahlen b {
  display: block;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 2.1rem; font-weight: 400; line-height: 1;
  color: var(--sand);
}
.zahlen span { font-size: 0.85rem; color: rgba(255,249,242,.75); }
@media (min-width: 62em) {
  .werkstatt__raster { grid-template-columns: 1.3fr 0.7fr; gap: 3.5rem; align-items: center; }
}

/* ---------- Schluss ---------- */
.schluss {
  background: var(--sand);
  border-radius: var(--ecke);
  padding: 3rem 2rem;
  margin-bottom: 3.5rem;
  text-align: center;
}
.schluss p { color: var(--leise); max-width: 34em; margin-inline: auto; }
.schluss__nummer {
  display: inline-block;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  color: var(--tinte);
  text-decoration: none;
  margin: 1.2rem 0 0.4rem;
  border-bottom: 2px solid var(--terra);
}
.schluss__zeit { margin: 0; font-size: 0.95rem; }

/* ---------- Fuß ---------- */
.fuss { padding-bottom: 2.5rem; font-size: 0.85rem; color: var(--leise); }
.fuss__innen { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; justify-content: space-between; }
.fuss p { margin: 0; }
/* Tote Wörter: in der Demo liegt nichts dahinter, also sehen sie auch
   nicht aus wie Verweise. */
.fuss__tot { opacity: 0.7; }