/* Das Blatt: alles, was NICHT die Naht ist. Bewusst schlank gehalten - je weniger hier
   steht, desto eindeutiger gehört ein gemessener Farbsprung der Naht. */

/* Die Marken-Tokens genau so, wie DemoLayout sie im Bau auf das html-Element schreibt.
   Sie stehen hier, damit Stellschrauben aus dem Katalog (z.B. naht-linie:
   var(--brand-border)) im Schaustück dasselbe auflösen wie später in der Demo. */
:root{--brand-background:#faf8f5;--brand-surface:#fefefd;
  --brand-foreground:#26221c;--brand-accent:#B5532E;
  --brand-border:#e1dad1;--brand-on-accent:#faf8f5}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Hanken Grotesk",system-ui,sans-serif;
  color:#26221c;background:#faf8f5;
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Fraunces",Georgia,serif;font-weight:600;line-height:1.12;
  margin:0;letter-spacing:-0.015em}
p{margin:0}
section,footer{margin:0;display:block}
.mitte{max-width:1080px;margin:0 auto;padding:0 32px}

/* Die Kopfzeile sagt, welcher Stand offen ist. Bewusst NICHT sticky: Playwright stitcht
   sticky bei Vollbild-Aufnahmen falsch (Hand-Bau-Lehre 16), und eine Leiste über der
   Naht wäre ausgerechnet an der Messstelle im Weg. */
.marke{background:#26221c;color:#faf8f5;font-size:13px;
  letter-spacing:0.04em;padding:11px 0}
.marke .mitte{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap}
.marke b{font-weight:600}
.marke span{opacity:.62}

.buehne{background:#26221c;color:#faf8f5;padding:132px 0 148px}
.buehne h1{font-size:clamp(2.6rem,6vw,4.5rem);max-width:16ch}
.buehne p{margin-top:26px;max-width:46ch;font-size:1.2rem;opacity:.78}
.buehne .augenbraue{font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  opacity:.6;margin-bottom:26px}

.leistungen{background:#faf8f5;padding:104px 0 116px}
.geschichte{background:#fefefd;padding:104px 0 116px}
.zusagen{background:#B5532E;color:#faf8f5;padding:88px 0 96px}
.kontakt{background:#faf8f5;padding:104px 0 116px}
.fuss{background:#26221c;color:#faf8f5;padding:66px 0 74px;font-size:15px}

h2{font-size:clamp(1.9rem,3.4vw,2.7rem);max-width:20ch}
.vorsatz{font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  opacity:.55;margin-bottom:20px}

.raster{display:grid;gap:34px 44px;grid-template-columns:repeat(3,1fr);margin-top:52px}
.raster article h3{font-size:1.22rem;margin-bottom:9px}
.raster article p{opacity:.75;font-size:.97rem}
.ziffer{font-family:"Fraunces",serif;font-size:.9rem;opacity:.45;display:block;
  margin-bottom:12px;letter-spacing:.08em}

.zweispalt{display:grid;gap:56px;grid-template-columns:1.15fr 1fr;align-items:start}
.zweispalt p{opacity:.8;margin-top:22px}
.zitat{border-left:3px solid #B5532E;padding:6px 0 6px 26px;
  font-family:"Fraunces",serif;font-size:1.32rem;line-height:1.45}

.zusagen ul{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:18px 44px;
  grid-template-columns:repeat(3,1fr)}
.zusagen li{padding-top:16px;border-top:1px solid rgb(255 255 255/.28);font-size:1.02rem}
.zusagen h2{max-width:24ch}

.kontakt .zweispalt{grid-template-columns:1fr 1fr}
.kontakt dl{margin:0;display:grid;gap:16px}
.kontakt dt{font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.5}
.kontakt dd{margin:2px 0 0;font-size:1.06rem}

.fuss .mitte{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;opacity:.72}

@media (max-width:820px){
  .raster,.zusagen ul{grid-template-columns:1fr}
  .zweispalt,.kontakt .zweispalt{grid-template-columns:1fr}
}

/* Der Ausgangsstand: exakt das, was die Sektionen heute tun (border-t in der
   Rahmenfarbe). Steht hier und nicht in naht.css, weil es keine Naht-ART ist, sondern
   der Stand, gegen den verglichen wird. */
.naht--heute{height:0;border-top:1px solid #e1dad1}
.naht--heute>.naht__blatt{display:none}

/* NUR für die Positiv-Kontrolle der Messung, nie ausgeliefert: der Defekt aus
   Hand-Bau-Lehre 7 in Reinform. Der Verlauf hört bei 92 Prozent auf, der Rest ist ein
   Sprung. Findet die Pixel-Probe DAS nicht, findet sie gar nichts. */
.naht--kaputt{height:168px;
  background-image:linear-gradient(to bottom,var(--naht-von) 0%,
    color-mix(in oklab,var(--naht-nach) 92%,var(--naht-von)) 100%)}
.naht--kaputt>.naht__blatt{display:none}

/* Die Prüfstrecke ist absichtlich KEINE Seite, sondern ein Messblatt: nackte
   Farbfelder, beschriftet, ohne Gestaltung. So kann sie nicht mit dem Produkt
   verwechselt werden. */
.pruef{padding:0}
.pruef .paar{position:relative}
.pruef .feld{height:190px}
.pruef .schild{position:absolute;top:14px;left:32px;font-size:12px;letter-spacing:.06em;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;padding:5px 10px;
  border-radius:4px;background:rgb(0 0 0/.62);color:#fff}