/* =====================================================================================
   Vorlage 32 Malerbetrieb · Farben, Schrift, Ecken, Abstände
   Brücke zur Web-App: --bg --surface --text --muted --accent --on-accent --border --radius --schrift
   heißen wie in 00_Projektstart/starter-webapp/styles.css.

   Die Seite ist ein Farbfächer: Jeder Abschnitt ist eine Fächerkarte mit eigenem Ton (Klasse .ton-…).
   Eine Karte setzt sechs Variablen, alles darin liest nur diese:
     --k-bg       Grund der Karte
     --k-text     Schrift (mindestens 4,5 : 1 auf --k-bg, Werte gerechnet am 04.10.2026)
     --k-leise    Nebentext (mindestens 4,5 : 1)
     --k-marke    kleine Überzeile (mindestens 4,5 : 1)
     --k-flaeche  Fläche für Karten in der Karte (hell: Weiß, dunkel: ein Ton dunkler als der Grund,
                  damit die helle Schrift darauf mehr Kontrast hat, nicht weniger)
     --k-knopf / --k-knopf-text  Dosendeckel-Knopf und seine Schrift
   Farbnummern („DW 204“) und Namen sind Beispielwerte, siehe KONZEPT.md.
   ===================================================================================== */
@font-face {
  font-family: "Anybody";
  src: url("../fonts/anybody-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 50% 150%;
  font-display: swap;
}

:root {
  --schrift: "Anybody", "Segoe UI", system-ui, sans-serif;
  --breit: 124%;            /* Überschriften: Breitenachse wie ein Pinselstrich */
  --schmal: 100%;           /* Fließtext */

  /* Brücke zur Web-App: die erste Karte (Deckweiß) ist der Grundton der Seite */
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #1f1b17;          /* 15,1 : 1 auf --bg */
  --muted: #5b544b;         /* 6,6 : 1 auf --bg */
  --accent: #a9472c;        /* Terrakotta: Knöpfe und Links auf hellen Karten, Weiß darauf 5,8 : 1 */
  --on-accent: #fff7ef;
  --accent-tief: #8f3a21;   /* Überzeilen auf hellen Karten, 5,5 : 1 auf Leinen */
  --border: #d8cfc0;
  --error: #b42318;

  /* Die neun Fächerkarten der Seite, von hell nach dunkel gelesen */
  --ton-101: #f5f0e6;       /* Deckweiß    · erster Bildschirm */
  --ton-204: #e7dccb;       /* Leinen      · fünf Schichten */
  --ton-318: #415c4c;       /* Salbei      · Leistungen */
  --ton-412: #d7d0c3;       /* Kiesel      · Farbberatung */
  --ton-507: #a5452b;       /* Terrakotta  · Preise */
  --ton-611: #ece7dd;       /* Kreide      · Stimmen */
  --ton-702: #1d5560;       /* Petrol      · Angebot */
  --ton-815: #d3d9dc;       /* Nebel       · Fragen */
  --ton-909: #24272b;       /* Graphit     · Kontakt */
  --ton-fuss: #15171a;

  /* Wand, Werkzeug, Abklebeband (erster Bildschirm und fünf Schichten) */
  --wand: #f8f5ee;          /* frisch grundierte Wand */
  --wand-alt: #e3dccd;      /* alte, vergilbte Wand */
  --leiste: #f1ede4;        /* Sockelleiste */
  --boden: #c9a27a;         /* Parkett */
  --boden-fuge: #b48b63;
  --band: #e9c46a;          /* Abklebeband */
  --band-kante: #cfa94d;
  --dose: #d9a441;          /* Ocker: Akzent auf dunklen Karten, Schrift darauf dunkel 7,6 : 1 */
  --spachtel: #c8ccd1;
  --schatten: rgba(31, 27, 23, .18);

  --radius: 20px;
  --radius-gross: 30px;
  --radius-klein: 10px;

  --breite: 1200px;
  --abstand: clamp(80px, 10vw, 136px);
  --schraeg: clamp(28px, 4.2vw, 64px);   /* Höhe der schrägen Fächerkante */
  --kopf: 66px;
  --chips: 60px;                         /* Platz für die Farbkarten-Leiste am Handy */
}

/* ---------- Fächerkarten: jede Karte ein Ton, Schrift wechselt mit ---------- */
.ton-101 { --k-bg: var(--ton-101); --k-text: #1f1b17; --k-leise: #5b544b; --k-marke: #8f3a21; --k-flaeche: #ffffff; --k-knopf: #a9472c; --k-knopf-text: #fff7ef; --k-linie: #d8cfc0; }
.ton-204 { --k-bg: var(--ton-204); --k-text: #1f1b17; --k-leise: #5b544b; --k-marke: #8f3a21; --k-flaeche: #f7f2ea; --k-knopf: #a9472c; --k-knopf-text: #fff7ef; --k-linie: #cbbfa9; }
.ton-318 { --k-bg: var(--ton-318); --k-text: #f3efe6; --k-leise: #cfd8cf; --k-marke: #f2d383; --k-flaeche: #37503f; --k-knopf: #f5f0e6; --k-knopf-text: #1f1b17; --k-linie: #5d7768; }
.ton-412 { --k-bg: var(--ton-412); --k-text: #1f1b17; --k-leise: #55504a; --k-marke: #1d5560; --k-flaeche: #ffffff; --k-knopf: #1d5560; --k-knopf-text: #f3efe6; --k-linie: #bfb6a7; }
.ton-507 { --k-bg: var(--ton-507); --k-text: #fff4ea; --k-leise: #f8e0d4; --k-marke: #ffd9c4; --k-flaeche: #8e3a23; --k-knopf: #f5f0e6; --k-knopf-text: #1f1b17; --k-linie: #c0674c; }
.ton-611 { --k-bg: var(--ton-611); --k-text: #1f1b17; --k-leise: #5b544b; --k-marke: #8f3a21; --k-flaeche: #ffffff; --k-knopf: #a9472c; --k-knopf-text: #fff7ef; --k-linie: #d3cbbd; }
.ton-702 { --k-bg: var(--ton-702); --k-text: #eef3f2; --k-leise: #bfd3d4; --k-marke: #e9c46a; --k-flaeche: #174650; --k-knopf: #f5f0e6; --k-knopf-text: #1f1b17; --k-linie: #3b727c; }
.ton-815 { --k-bg: var(--ton-815); --k-text: #1f1b17; --k-leise: #4f5559; --k-marke: #1d5560; --k-flaeche: #ffffff; --k-knopf: #1d5560; --k-knopf-text: #f3efe6; --k-linie: #b5bec2; }
.ton-909 { --k-bg: var(--ton-909); --k-text: #efece6; --k-leise: #b7b3ab; --k-marke: #d9a441; --k-flaeche: #1c1f22; --k-knopf: #d9a441; --k-knopf-text: #1f1b17; --k-linie: #3a3e44; }
.ton-fuss { --k-bg: var(--ton-fuss); --k-text: #e8e4dc; --k-leise: #8e8a82; --k-marke: #d9a441; --k-flaeche: #1c1f22; --k-knopf: #d9a441; --k-knopf-text: #1f1b17; --k-linie: #2a2e33; }