/* Bau & Montageservice Marco Krüger – Design-Werte. EINZIGE Quelle, abgeleitet aus DESIGN.md.
   site.css nutzt ausschliesslich diese Variablen. */
:root {
  /* Farben */
  --anthrazit: #20262B;
  --anthrazit-2: #2B3238;
  --gelb: #E0A82E;
  --gelb-dunkel: #B9861B;
  --grund: #F5F2EC;
  --flaeche: #EBE6DD;
  --text: #1B2126;
  --text-leise: #5A6066;
  --hell: #F5F2EC;
  --hell-leise: #B5B9BC;
  --linie: #D9D3C8;
  --linie-dunkel: #3A4249;
  --luecke: #FFF3B0;
  --fehler: #A8321F;
  --ok: #2F6B3C;
  --schleier: rgba(32, 38, 43, .72);
  --schleier-stark: rgba(32, 38, 43, .9);
  --schleier-null: rgba(32, 38, 43, 0);

  /* Schriften */
  --kopf: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --lese: "Source Sans 3", "Segoe UI", Arial, sans-serif;
  --g-h1: clamp(2.1rem, 5.2vw, 3.9rem);
  --g-h2: clamp(1.7rem, 3.2vw, 2.5rem);
  --g-h3: 1.25rem;
  --g-text: 1.125rem;
  --g-klein: .95rem;
  --g-marke: .8rem;

  /* Abstaende (4, 8, 12, 16, 24, 32, 48, 64, 96, 128) */
  --a1: 4px; --a2: 8px; --a3: 12px; --a4: 16px; --a5: 24px;
  --a6: 32px; --a7: 48px; --a8: 64px; --a9: 96px; --a10: 128px;
  --sektion: var(--a9);
  --breite: 1200px;
  --spalte: 680px;
  --rand: 32px;

  /* Radien, Schatten */
  --r-klein: 3px;
  --r-gross: 6px;
  --schatten: 0 1px 2px rgba(32, 38, 43, .08), 0 8px 24px rgba(32, 38, 43, .08);
  --schatten-stark: 0 2px 4px rgba(32, 38, 43, .1), 0 16px 40px rgba(32, 38, 43, .14);

  /* Bewegung */
  --kurz: 200ms;
  --lang: 500ms;
  --kurve: cubic-bezier(.2, .7, .2, 1);

  /* Ebenen */
  --z-leiste: 30; --z-header: 40; --z-menue: 50;
}
@media (max-width: 760px) {
  :root { --sektion: var(--a8); --rand: 20px; --g-text: 1.0625rem; }
}