/* fewo-pirna.com — Design Tokens „Sandstein"
   Quelle: design/Fewo Pirna Layout.dc.html, Optionen 1b / 2a–2d
   Änderung ggü. Handoff: Google-Fonts-@import entfernt — Fonts sind self-hosted
   (siehe @font-face in main.css). */

:root {
  /* ---- Farben ---- */
  --bg:          #f6f2ea;  /* Grundfläche, Text auf Grün */
  --sand:        #efe9db;  /* Panels: Zitat, Sidebar */
  --paper:       #fbf9f4;  /* Zebra-Zeilen, Formularfelder, Hover */
  --ink:         #26302a;  /* Primärtext */
  --ink-soft:    #4d5850;  /* Fließtext */
  /* ink-mute/ink-faint/ochre ggü. Handoff minimal abgedunkelt (#6d7a6f, #8a927f,
     #8a6a45): Original erreichte auf --bg/--sand/--paper keine 4,5:1 (WCAG AA). */
  --ink-mute:    #5d6a60;  /* Metatext */
  --ink-faint:   #6a7563;  /* Placeholder, inaktiv */
  --green:       #34523f;  /* Primär: Buttons, Bänder, starke Linien */
  --green-dark:  #2a4333;  /* Button-Hover */
  --ochre:       #7d5e3c;  /* Akzent: Nummern, Eyebrows, aktiver Nav-Link */
  --ochre-light: #c2a37e;  /* Akzent abgeschwächt (Wohnung 4) */
  --line:        #d8d2c2;  /* Hairlines */
  --line-strong: var(--green); /* Nav-/Footer-/Hero-Rahmen */
  --field-border:#c9c2b0;  /* Formularfelder */

  /* ---- Typografie ---- */
  --font-serif: 'Source Serif 4', Georgia, serif;   /* Display, Nummern, Zitate */
  --font-sans:  'Public Sans', system-ui, sans-serif; /* UI & Fließtext */

  --text-hero:    58px;  /* H1 Start, lh 1.05, serif 600 */
  --text-h1:      44px;  /* H1 Unterseiten, lh 1.05 */
  --text-h2:      34px;  /* Sektionstitel */
  --text-h3:      28px;  /* Band-Titel */
  --text-quote:   21px;  /* Zitate, serif kursiv, lh 1.5 */
  --text-lead:    16px;  /* Intro, lh 1.65 */
  --text-body:    15.5px;/* Fließtext, lh 1.7 */
  --text-ui:      14px;  /* Nav, Buttons: 13–14px, 600 */
  --text-meta:    13.5px;/* Footer, Attribution */
  --text-eyebrow: 12px;  /* 600, letter-spacing .14em, uppercase, --ochre */

  --num-row:    40px;    /* Serif-Nummer Wohnungszeile */
  --num-detail: 56px;    /* Serif-Nummer Detailseite */

  /* ---- Spacing ---- */
  --page-pad:        56px; /* Desktop-Seitenränder */
  --page-pad-mobile: 20px;
  --section-pad:     48px; /* vertikal 48–64px */
  --gap-tight:       12px;
  --gap:             24px;

  /* ---- Form ---- */
  --radius-img: 2px;   /* Bilder, Chips */
  --radius-btn: 4px;   /* Buttons, Felder */
  --hairline: 1px solid var(--line);
  --rule:     1px solid var(--line-strong);
  /* Keine box-shadows verwenden. */

  /* ---- Motion ---- */
  --transition: 150ms ease;
}

/* ---- Basis ---- */
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
}

/* ---- Referenz-Komponenten ---- */
.btn-primary {
  display: inline-block;
  background: var(--green);
  color: var(--bg);
  padding: 13px 24px;
  font: 600 14px var(--font-sans);
  border-radius: var(--radius-btn);
  border: 1.5px solid var(--green);
  cursor: pointer;
  transition: background var(--transition);
}
.btn-primary:hover { background: var(--green-dark); }

.btn-outline {
  display: inline-block;
  background: transparent;
  color: var(--green);
  padding: 13px 24px;
  font: 600 14px var(--font-sans);
  border-radius: var(--radius-btn);
  border: 1.5px solid var(--green);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.btn-outline:hover { background: var(--green); color: var(--bg); }

.eyebrow {
  font: 600 var(--text-eyebrow) var(--font-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ochre);
}