/* ============================================================
   Schreinerei Baumgartner – Entwurf G "Zeichnung"

   Ein Riss ist beim Schreiner die Zeichnung: links die Ansicht, rechts
   die Maße. Genau so ist diese Seite gebaut. Jeder Abschnitt ist eine
   Doppelseite - links wird geredet, rechts steht, was gilt - und
   dazwischen läuft eine Haarlinie durch die ganze Seite.

   Der Aufmacher ist geteilt: links der Text, rechts das Foto. Die
   Überschrift steht auf einer hellen Tafel, die über die Bildkante
   hinausragt. So läuft sie über die Kante, ohne je auf dem Foto zu
   liegen - Schrift auf einem Foto ist immer ein Kompromiss, und der
   Kontrast wäre nicht nachrechenbar.

   Was diesen Entwurf von den anderen sechs trennt:
   - Zweiteilung als durchgehendes Prinzip, nicht nur im Aufmacher.
   - Eine Didone (Playfair) neben einer runden Grotesk (Manrope) -
     nirgends sonst steht eine so hochkontrastige Schrift.
   - Bordeaux. Kein anderer Entwurf hat einen roten Weinton.
   - Das Foto ist zweifarbig gerechnet, nicht bunt: Graustufen plus
     eine Farbschicht. Damit kann es sich mit der Palette nicht
     streiten - dieselbe Lehre wie in Entwurf E, nur in Farbe.

   Farben nachgerechnet (WCAG 2.1):
     Tinte      #1B1F23 auf Kalk     #F3F2EE  14,80:1
     Leise      #5A6169 auf Kalk     #F3F2EE   5,60:1
     Bordeaux   #6A2E3E auf Kalk     #F3F2EE   9,04:1
     Kalk       #F3F2EE auf Bordeaux #6A2E3E   9,04:1
     Kalk       #F3F2EE auf Schiefer #23292E  13,13:1
     Rose       #D99DAE auf Schiefer #23292E   6,57:1
   ============================================================ */

:root {
  --kalk: #F3F2EE;
  --tinte: #1B1F23;
  --leise: #5A6169;
  --schiefer: #23292E;
  --bordeaux: #6A2E3E;
  --bordeaux-tief: #55232F;
  --rose: #D99DAE;
  --rose-blass: #EBD7DC;
  --linie: #D9D7D0;

  --bahn: 78rem;
}

*, *::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(--kalk);
  color: var(--tinte);
  font-family: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1, h2, .tafel__zeile, .buch__wert {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  letter-spacing: -0.015em;
}

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

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

/* ---------- Hinweisbalken ---------- */
.hinweis {
  margin: 0;
  background: var(--schiefer);
  color: var(--kalk);
  font-size: 0.78rem;
  line-height: 1.5;
  padding: 0.6rem 1.25rem;
  text-align: center;
}

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

/* ---------- Kopf ----------
   Keine Knopf-Pille, kein Kasten: nur Text auf einer Linie. Der
   Entwurf lebt von Linien, ein gefüllter Knopf wäre der erste
   Fremdkörper. */
.kopf {
  border-bottom: 1px solid var(--linie);
}
.kopf__innen {
  display: flex; align-items: baseline; gap: 1rem 1.5rem;
  flex-wrap: wrap;
  padding: 1.3rem 0;
}
.marke {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700; font-size: 1.35rem; letter-spacing: -0.02em;
  color: var(--tinte); text-decoration: none;
  margin-right: auto;
}
.kopf__nav { display: none; gap: 1.6rem; }
.kopf__nav a, .kopf__ruf {
  font-size: 0.86rem; font-weight: 600; letter-spacing: 0.02em;
  color: var(--tinte); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .15s, color .15s;
}
.kopf__nav a:hover, .kopf__ruf:hover { color: var(--bordeaux); border-bottom-color: var(--bordeaux); }
.kopf__ruf { color: var(--bordeaux); border-bottom-color: var(--linie); }
@media (min-width: 56em) { .kopf__nav { display: flex; } }

/* ---------- Geteilter Aufmacher ---------- */
.auf { border-bottom: 1px solid var(--linie); }
.auf__raster { display: grid; }

.auf__text { padding: 3rem 0 3.5rem; }
.marke__zeile {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--bordeaux);
  margin: 0 0 1.6rem;
}
.auf__satz { max-width: 34em; color: var(--leise); font-size: 1.08rem; margin: 0 0 2rem; }
.auf__wege { display: flex; flex-wrap: wrap; gap: 1.6rem; align-items: center; margin: 0; }
.wort-knopf {
  font-weight: 700; font-size: 1rem; text-decoration: none;
  color: var(--tinte);
  border-bottom: 2px solid var(--bordeaux);
  padding-bottom: 2px;
  transition: color .15s;
}
.wort-knopf:hover { color: var(--bordeaux); }
.auf__nummer { font-weight: 700; color: var(--bordeaux); text-decoration: none; font-size: 1rem; }

/* Das Bild: zweifarbig gerechnet statt bunt geladen. Graustufen,
   darüber eine Schicht Bordeaux im Farbmodus - so bleibt die Zeichnung
   des Fotos erhalten, aber der Farbstreit ist weg. Kann ein Browser
   mix-blend-mode nicht, sieht man ein sauberes Graustufenbild. */
.auf__bild { position: relative; background: var(--schiefer); }
.auf__bild img {
  display: block; width: 100%; height: 100%;
  min-height: 18rem;
  object-fit: cover; object-position: 62% center;
  filter: grayscale(1) contrast(1.06) brightness(.96);
}
.auf__bild::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--bordeaux);
  mix-blend-mode: color;
  opacity: .85;
}

@media (min-width: 62em) {
  .auf__raster {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 0;
  }
  .auf__text { padding: 5rem 4rem 5rem 0; }
  .auf__bild { min-height: 34rem; }
}

/* Die Tafel ragt über die Bildkante - der ganze Textblock, nicht nur
   die Überschrift. Ein Rechteck, das nur zur Hälfte gefüllt ist, sieht
   nach Versehen aus; eine vollständige Karte, die sich überschiebt,
   liest sich als Absicht.

   Auf schmalen Fenstern gibt es keine Kante, über die etwas ragen
   könnte - dort ist die Tafel einfach der Text. */
.tafel { background: var(--kalk); }
.tafel h1 {
  font-size: clamp(2.2rem, 5.6vw, 3.6rem);
  line-height: 1.04;
  margin: 0 0 1.4rem;
}
.tafel h1 em { font-style: italic; color: var(--bordeaux); }
@media (min-width: 62em) {
  .tafel {
    position: relative; z-index: 2;
    width: calc(100% + 7rem);
    padding: 2rem 3rem 2rem 0;
    margin: -2rem 0;
  }
}

/* ---------- Doppelseiten ----------
   Links wird geredet, rechts steht, was gilt. Die Haarlinie in der
   Mitte ist der Riss, der der Seite den Namen gibt. */
.seite { border-bottom: 1px solid var(--linie); }
.seite__raster { display: grid; gap: 2.5rem; padding: 3.5rem 0; }
.seite h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  line-height: 1.12;
  margin: 0 0 1.2rem;
  max-width: 16em;
}
.seite p { margin: 0 0 1.1rem; max-width: 36em; color: var(--leise); }
.seite p:last-child { margin-bottom: 0; }
.seite p strong { color: var(--tinte); font-weight: 700; }

.masse { margin: 0; }
.masse > div {
  display: flex; justify-content: space-between; gap: 1.5rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--linie);
}
.masse > div:first-child { border-top: 1px solid var(--linie); }
.masse dt { font-size: 0.95rem; color: var(--leise); }
.masse dd {
  margin: 0; font-weight: 700; font-size: 0.95rem;
  text-align: right; white-space: nowrap;
}

@media (min-width: 62em) {
  .seite__raster {
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 4.5rem 0;
  }
  .seite__links  { padding-right: 4rem; border-right: 1px solid var(--linie); }
  .seite__rechts { padding-left: 4rem; }
}

/* ---------- Das Auftragsbuch ----------
   Drei erledigte Arbeiten statt drei erfundener Kundenstimmen. Was ein
   Betrieb gebaut hat, kann er belegen; was ein Kunde angeblich gesagt
   hat, glaubt ohnehin niemand. */
.buch { background: var(--schiefer); color: var(--kalk); padding: 4rem 0; }
.buch h2 { color: var(--kalk); margin-bottom: 2.4rem; }
.buch .marke__zeile { color: var(--rose); }
.buch__liste { list-style: none; margin: 0; padding: 0; }
.buch__liste li {
  display: grid; gap: 0.35rem;
  padding: 1.3rem 0;
  border-top: 1px solid rgba(243,242,238,.18);
}
.buch__liste li:last-child { border-bottom: 1px solid rgba(243,242,238,.18); }
.buch__wert { font-size: 1.35rem; line-height: 1.2; }
.buch__satz { color: #A9B0B7; font-size: 0.95rem; margin: 0; }
.buch__ort {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--rose);
}
@media (min-width: 48em) {
  .buch__liste li {
    grid-template-columns: 1fr 1.4fr auto;
    align-items: baseline; gap: 2rem;
  }
  .buch__ort { text-align: right; }
}

/* ---------- Schluss ---------- */
.schluss__raster { display: grid; gap: 2.5rem; padding: 4rem 0; }
.karte-bordeaux {
  background: var(--bordeaux); color: var(--kalk);
  padding: 2.4rem 2rem;
}
.karte-bordeaux p { color: var(--rose-blass); margin: 0 0 1.4rem; }
.karte-bordeaux .nummer {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.9rem, 4.5vw, 2.6rem);
  font-weight: 600; color: var(--kalk); text-decoration: none;
  border-bottom: 2px solid var(--rose);
}
.karte-bordeaux .zeit { display: block; margin-top: 1rem; font-size: .9rem; color: var(--rose-blass); }
.anschrift { font-style: normal; line-height: 1.8; color: var(--leise); }
.anschrift b { color: var(--tinte); }
@media (min-width: 62em) {
  .schluss__raster { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; padding: 5rem 0; }
}

/* ---------- Fuß ---------- */
.fuss {
  border-top: 1px solid var(--linie);
  padding: 1.5rem 0 2.5rem;
  font-size: 0.82rem; color: var(--leise);
}
.fuss__innen { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; justify-content: space-between; }
.fuss p { margin: 0; }
/* Tote Wörter: in der Demo liegt nichts dahinter. */
.fuss__tot { opacity: .75; }