/* Vaydena Makler – gemeinsame Design-Tokens (Landingpage + App)
   Richtung „Lageplan“: Papier, Tinte, Ziegelrot als einziger Akzent, feine Planlinien. */
:root {
  --papier: #f5f2eb;
  --papier-2: #ece7dc;
  --karte: #fffdf8;
  --tinte: #17222e;
  --tinte-2: #2b3a49;
  --grau: #66707a;
  --linie: #d9d2c4;
  --linie-2: #c7bfae;
  --ziegel: #b8532a;
  --ziegel-2: #9b4220;
  --ziegel-hell: #f3e0d5;
  --gruen: #2f6b4f;
  --gruen-hell: #dcebe2;
  --ocker: #a7741f;
  --ocker-hell: #f4e7cc;
  --rot: #a8322b;
  --rot-hell: #f5dcd9;
  --blau-hell: #dfe7ef;
  --schatten: 0 1px 0 rgba(23,34,46,.04), 0 8px 24px -12px rgba(23,34,46,.18);
  --r: 10px;
  --r-s: 6px;
  --f-text: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-kopf: "Archivo", "Source Sans 3", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papier: #12181f; --papier-2: #19212a; --karte: #1d2630; --tinte: #ece7dd; --tinte-2: #cfc8bb;
    --grau: #98a1aa; --linie: #2e3945; --linie-2: #3c4855; --ziegel: #e07a4f; --ziegel-2: #f0936b;
    --ziegel-hell: #3a2418; --gruen: #6cc19a; --gruen-hell: #1d3229; --ocker: #dcae5a; --ocker-hell: #3a2f1a;
    --rot: #ef8178; --rot-hell: #3d1f1d; --blau-hell: #1f2b37; --schatten: 0 8px 24px -12px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papier: #12181f; --papier-2: #19212a; --karte: #1d2630; --tinte: #ece7dd; --tinte-2: #cfc8bb;
  --grau: #98a1aa; --linie: #2e3945; --linie-2: #3c4855; --ziegel: #e07a4f; --ziegel-2: #f0936b;
  --ziegel-hell: #3a2418; --gruen: #6cc19a; --gruen-hell: #1d3229; --ocker: #dcae5a; --ocker-hell: #3a2f1a;
  --rot: #ef8178; --rot-hell: #3d1f1d; --blau-hell: #1f2b37; --schatten: 0 8px 24px -12px rgba(0,0,0,.6);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papier); color: var(--tinte); font: 400 17px/1.55 var(--f-text); }
img { max-width: 100%; display: block; }
a { color: var(--ziegel); text-underline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--f-kopf); line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--ziegel); outline-offset: 2px; border-radius: 3px; }
.kicker { font: 600 12px/1.2 var(--f-kopf); font-stretch: 88%; letter-spacing: .14em; text-transform: uppercase; color: var(--ziegel); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em; min-height: 44px; padding: 0 18px;
  border-radius: var(--r-s); border: 1px solid var(--tinte); background: var(--tinte); color: var(--papier);
  font: 600 15px/1 var(--f-kopf); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.btn:hover { background: var(--tinte-2); border-color: var(--tinte-2); }
.btn:active { transform: translateY(1px); }
.btn-akzent { background: var(--ziegel); border-color: var(--ziegel); color: #fff; }
.btn-akzent:hover { background: var(--ziegel-2); border-color: var(--ziegel-2); }
.btn-leer { background: transparent; color: var(--tinte); border-color: var(--linie-2); }
.btn-leer:hover { background: var(--papier-2); color: var(--tinte); border-color: var(--tinte); }
.btn-klein { min-height: 34px; padding: 0 12px; font-size: 13.5px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }