/* ============================================================
   base.css — Reset, Typografie, Layout-Primitive, Utilities
   ============================================================ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:17px;line-height:1.6;font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-wrap:break-word;
  hyphens:auto;text-align: justify;
}

/* Überschriften/Labels bewusst ungetrennt lassen — Trennstriche stören dort das Bild */
h1,h2,h3,h4{hyphens:manual;text-align:left;}
.btn{hyphens:manual;}
.intro-name,.intro-slogan,.intro-subtitle{hyphens:manual;text-align:center;}

h1,h2,h3,h4{margin:0;font-optical-sizing:auto;line-height:1.15}
h1,h2{font-family:var(--f-display);font-weight:800;letter-spacing:-.02em;line-height:1.02}
h2{font-size:clamp(1.9rem,4.2vw,3rem)}
p{margin:0 0 1rem}
a{color:inherit}

/* Satzspiegel: .wrap = breite Bahn (mehrspaltige Sektionen),
   .wrap.narrow = schmale Bahn (einspaltige Sektionen). Beide mittig.
   Maße stehen in tokens.css. */
.wrap{max-width:var(--w-wide);margin:0 auto;padding:0 var(--pad)}
.wrap.narrow{max-width:var(--w-text)}

/* Zwei gleich breite Spalten, als Gruppe mittig in der .wrap-Bahn.
   Spalten dürfen unter ihre Inhalts-Mindestbreite schrumpfen (SVGs ohne
   width-Attribut melden sonst die viewBox-Breite als Minimum → Overflow). */
.cols-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--col-gap)}
.cols-2>*{min-width:0}
/* Einspaltig: Reihenfolge/Abstände regeln die Sektionen selbst */
@media(max-width:760px){.cols-2{grid-template-columns:1fr}}
section{padding:clamp(58px,8vw,104px) 0;border-top:1px solid var(--line);position:relative}

/* Sichtbarer Sprunglink für Tastatur/Screenreader */
.skip{position:absolute;left:-9999px}
.skip:focus{position:fixed;left:16px;top:12px;z-index:300;background:var(--ink);color:#fff;padding:10px 16px}

/* Tastatur-Fokus durchgängig sichtbar */
:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* --- Buttons ------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--f-ui);font-weight:500;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.92em 1.5em;border-radius:2px;text-decoration:none;cursor:pointer;
  border:1px solid var(--ink);transition:background .15s,color .15s,transform .15s;
}
.btn:hover{transform:translateY(-1px)}
.btn-red{background:var(--red);color:#fff;border-color:var(--red)}
.btn-red:hover{background:var(--red-d);border-color:var(--red-d)}
.btn-line{background:var(--paper);color:var(--ink)}
.btn-line:hover{background:var(--ink);color:#fff}

/* --- Für den Titel ------------------------------------------ */


.intro-name{
  font-family:var(--f-slab);font-weight:900;font-size:8.0rem;letter-spacing:0.em;text-transform:uppercase;line-height:100%;
  color:black;display:inline-flex;align-items:center;max-width:80%;
}
@media(max-width:650px),(max-height:500px){.intro-name{font-size:3.6rem}}
.intro-slogan{
  font-family:var(--f-display);font-weight:300;font-size:4.5rem;letter-spacing:.17em;line-height:90%;margin-bottom:-0.05em;
  color:black;display:inline-flex;align-items:center;max-width:100%;
}
@media(max-width:650px),(max-height:500px){.intro-slogan{font-size:2.04rem;margin-top:-0.2em;margin-bottom:-0.45em;}}
.intro-subtitle{
  padding:1.0em;font-family:var(--f-tech);font-weight:400;font-size:1.0rem;letter-spacing:.12em;text-transform:uppercase;line-height:120%;
  color:var(--ink-60);display:inline-flex;align-items:center;max-width:45em;
  transform:translateY(var(--tech-shift));
}
@media(max-width:650px),(max-height:500px){.intro-subtitle{font-size:0.8rem}}

/* --- Technische Utilities ----------------------------------- */
/* Eyebrow = Zeichnungs-Label mit roter Markierungslinie */
.eyebrow{
  font-family:var(--f-tech);font-weight:400;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-60);display:inline-flex;align-items:center;gap:.7em;max-width:100%;
  transform:translateY(var(--tech-shift));
}
/* Linie bleibt an ihrer natürlichen Position (hebt den --tech-shift des
   Eyebrow-Texts wieder auf), der Text darüber sitzt jetzt global tiefer */
.eyebrow::before{content:"";width:22px;height:1px;background:var(--red);transform:translateY(calc(-1 * var(--tech-shift)))}

.mono{font-family:var(--f-slab)}

/* Bemaßungslinie mit Endstrichen */
.dim{
  display:flex;align-items:center;gap:10px;
  font-family:var(--f-slab);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--red);white-space:nowrap;
}
.dim::before,.dim::after{content:"";height:1px;background:var(--red);flex:1;min-width:18px}
.dim::before{box-shadow:0 -3px 0 -2px var(--red),0 3px 0 -2px var(--red)}
/* Mobil: Bemaßungstext umbrechen lassen statt über den Rand zu schieben */
@media(max-width:600px){.dim{white-space:normal;font-size:.62rem;letter-spacing:.08em}}

/* Schnitt-/Detail-Label oben rechts in einer Sektion */
.cut{
  position:absolute;top:14px;right:var(--pad);
  font-family:var(--f-tech);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-45);
  transform:translateY(var(--tech-shift));
}

/* Reveal beim Scrollen (per JS .in) */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* Abschnittsüberschrift */
.sec-head{max-width:var(--w-prose);margin-bottom:48px}
.sec-head h2{margin:14px 0 14px}
.sec-head p{color:var(--ink-60);font-size:1.04rem}