/* ═══════════════════════════════════════════════════════════
   DESIGN TOKENS – DM-Bauprojekte GmbH
═══════════════════════════════════════════════════════════ */
:root {
  /* ── Farben ──────────────────────────────────────────────── */
  --bg:           #e5e5e5;
  --white:        #ffffff;
  --off-white:    #f7f6f4;
  --anthracite:   #2d2d2d;
  --text:         #3a3a3a;
  --text-mid:     #656565;
  --text-sub:     #7a7a7a;
  --text-light:   #aaaaaa;
  --border:       #d4d0cc;
  --border-light: #e8e5e1;

  /* ── Footer ──────────────────────────────────────────────── */
  --footer-bg:    #333333;
  --footer-text:  rgba(255,255,255,.72);
  --footer-head:  #ffffff;

  /* ── Typografie ──────────────────────────────────────────── */
  --font-serif: 'Cormorant Garamond', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
  --font-sans:  'Nunito Sans', 'Helvetica Neue', Arial, sans-serif;

  /* ── Radien ──────────────────────────────────────────────── */
  --radius:    4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* ── Schatten ────────────────────────────────────────────── */
  --shadow-xs: 0 1px 4px rgba(0,0,0,.06);
  --shadow-sm: 0 2px 10px rgba(0,0,0,.08);
  --shadow-md: 0 4px 20px rgba(0,0,0,.11);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.14);

  /* ── Layout ──────────────────────────────────────────────── */
  --max-w:      1100px;
  --transition: .2s ease;
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; font-size: 16px; }
body  {
  font-family: var(--font-sans);
  font-weight: 300;
  color: var(--text);
  background: var(--bg);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img   { display: block; max-width: 100%; height: auto; }
a     { color: inherit; text-decoration: none; }
ul    { list-style: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; border: none; background: none; }

/* ── Typografie ──────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.25;
  color: var(--text);
}
h1 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin-bottom: 1rem; }
h2 { font-size: clamp(1.5rem, 2.7vw, 2.1rem); margin-bottom: .85rem; }
h3 { font-size: 1.2rem; margin-bottom: .6rem; }

p  { margin-bottom: .85rem; font-size: .93rem; line-height: 1.8; }
p:last-child { margin-bottom: 0; }

/* ── Utility ─────────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.lead {
  font-size: 1.05rem;
  color: var(--text-mid);
  line-height: 1.85;
  font-weight: 300;
}
.eyebrow {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: .65rem;
}
.display {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--text);
}

/* ── Form Toast ──────────────────────────────────────────── */
.form-toast {
  position: fixed;
  bottom: 2rem; left: 50%;
  transform: translateX(-50%) translateY(20px);
  display: flex; align-items: center; gap: .75rem;
  padding: 1rem 1.5rem;
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  border-left: 3px solid #16a34a;
  font-size: .88rem;
  z-index: 9998;
  opacity: 0;
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
  white-space: nowrap;
}
.form-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.form-toast svg { color: #16a34a; flex-shrink: 0; }
.form-toast.is-error { border-left-color: #dc2626; }
.form-toast.is-error svg { color: #dc2626; }