/* Werkatlas-Gestaltungssystem v1 · 15.10.2026
   Richtung C „Architektur-Magazin“ + Messing-Akzent aus A (Entscheidung Thomas 15.10.)
   Gilt für werkatlas.de, Muster-Seiten und alle Druckstücke (Flyer, Karte, Brief, Mappe).
   Schriften selbst gehostet (SIL OFL), kein Abruf bei Google. */

@font-face{font-family:"Instrument Serif";src:url(schriften/instrument-serif-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Serif";src:url(schriften/instrument-serif-latin-ext-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Serif";src:url(schriften/instrument-serif-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Inter Tight";src:url(schriften/inter-tight-latin-wght-normal.woff2) format("woff2-variations");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter Tight";src:url(schriften/inter-tight-latin-ext-wght-normal.woff2) format("woff2-variations");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* Farben – Anteil auf jeder Fläche ungefähr: Papier 70 · Tinte 20 · Stein 8 · Messing 2 */
  --papier:#F5F3EE;      /* Grundfläche */
  --weiss:#FFFFFF;       /* nur für Karten/Fotos-Passepartout */
  --stein:#E7E2D8;       /* ruhige Flächen, Kästen */
  --linie:#CFC9BC;       /* feine Trennlinien auf Papier */
  --tinte:#1C1B19;       /* Text, starke Linien, dunkle Flächen */
  --grau:#5F5B53;        /* Nebentext (Kontrast 6,1:1 auf Papier) */
  --messing:#A8823C;     /* Akzent: Linien, Zeichen, große Zahlen ≥ 24 px (3,2:1) */
  --messing-text:#7E5F27;/* Messing für kleine Schrift auf Papier (5,3:1) */
  --grau-dunkel:#A9A397; /* Nebentext auf Tinte */

  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Inter Tight","Helvetica Neue",Arial,sans-serif;

  /* Abstände: 8er-Raster */
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:64px;--s7:96px;--s8:144px;
  --rand:clamp(16px,4vw,56px);   /* Seitenrand */
  --breite:1320px;               /* max. Inhaltsbreite */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--tinte);font:400 17px/1.6 var(--sans);font-feature-settings:"ss01","cv11";-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}

/* ---------- Schrift ---------- */
.wa-display{font:400 clamp(52px,8.4vw,128px)/.94 var(--serif);letter-spacing:-.015em;margin:0}
.wa-h1{font:400 clamp(40px,5.6vw,80px)/1 var(--serif);letter-spacing:-.01em;margin:0}
.wa-h2{font:400 clamp(30px,3.6vw,52px)/1.05 var(--serif);margin:0}
.wa-h3{font:500 20px/1.3 var(--sans);letter-spacing:-.005em;margin:0}
.wa-lead{font:300 clamp(19px,1.6vw,23px)/1.5 var(--sans);color:var(--tinte);max-width:34em}
.wa-text{max-width:38em}
.wa-kicker{font:500 12px/1.2 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--grau)}
.wa-kicker--messing{color:var(--messing-text)}
.wa-caption{font:400 13px/1.45 var(--sans);color:var(--grau)}
.wa-caption b{font-weight:500;color:var(--tinte)}
.wa-nr{font:400 italic 22px/1 var(--serif);color:var(--messing-text)}  /* Kapitelnummer „01“ */
em,.wa-kursiv{font-family:var(--serif);font-style:italic;font-weight:400}

/* ---------- Raster & Linien ---------- */
.wa-wrap{max-width:var(--breite);margin:0 auto;padding:0 var(--rand)}
.wa-raster{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--s3)}
.wa-linie{border:0;border-top:1px solid var(--tinte);margin:0}
.wa-linie--fein{border-top-color:var(--linie)}
.wa-linie--messing{border-top:2px solid var(--messing);width:56px}
.wa-abschnitt{padding:var(--s7) 0}
.wa-kopfzeile{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);padding:var(--s2) 0;border-top:1px solid var(--tinte)}

/* ---------- Bausteine ---------- */
.wa-knopf{display:inline-flex;align-items:center;gap:12px;padding:16px 26px;background:var(--tinte);color:var(--papier);font:500 15px/1 var(--sans);letter-spacing:.04em;text-decoration:none;border:1px solid var(--tinte);transition:background .2s,color .2s}
.wa-knopf::after{content:"";width:18px;height:1px;background:var(--messing);transition:width .2s}
.wa-knopf:hover{background:transparent;color:var(--tinte)}
.wa-knopf:hover::after{width:28px}
.wa-knopf--hell{background:transparent;color:var(--tinte)}
.wa-knopf--hell:hover{background:var(--tinte);color:var(--papier)}
.wa-link{font:500 15px/1 var(--sans);text-decoration:none;border-bottom:1px solid var(--messing);padding-bottom:4px}

.wa-zahl{font:400 clamp(48px,5vw,72px)/1 var(--serif);color:var(--tinte)}
.wa-zahl small{font-size:.4em;color:var(--messing)}

.wa-bild{position:relative;background:var(--stein)}
.wa-bild img{width:100%;height:100%;object-fit:cover}
.wa-bild figcaption{margin-top:10px}

.wa-dunkel{background:var(--tinte);color:var(--papier)}
.wa-dunkel .wa-kicker,.wa-dunkel .wa-caption{color:var(--grau-dunkel)}
.wa-dunkel .wa-linie{border-top-color:#3a3833}

@media (max-width:760px){
  .wa-raster{grid-template-columns:repeat(4,1fr);column-gap:var(--s2)}
  .wa-abschnitt{padding:var(--s6) 0}
  body{font-size:16px}
}

/* ---------- Druck ---------- */
@media print{
  body{background:#fff;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ---------- Linie v2 „Werkstatt“ (freigegeben Thomas 15.10.2026, eingefroren) ----------
   Überschriften: Archivo (kräftig), genau ein Wort kursiv in Instrument Serif.
   Logo: logo-final/werkatlas-*.svg */
@font-face{font-family:"Archivo";src:url(schriften/archivo-latin-standard-normal.woff2) format("woff2-variations");font-weight:100 900;font-stretch:62% 125%;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";src:url(schriften/archivo-latin-ext-standard-normal.woff2) format("woff2-variations");font-weight:100 900;font-stretch:62% 125%;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}
:root{--kraeftig:"Archivo","Helvetica Neue",Arial,sans-serif}
.linie2 .wa-display,.linie2 .wa-h1,.linie2 .wa-h2{font-family:var(--kraeftig);font-weight:650;font-stretch:96%;letter-spacing:-.02em;line-height:1.02}
.linie2 .wa-display em,.linie2 .wa-h1 em,.linie2 .wa-h2 em{font-family:var(--serif);font-weight:400;font-style:italic;letter-spacing:0;font-size:1.1em}