/* =====================================================================================
   Vorlage 33 Tischlerei · Farben, Schrift, Holztöne, Abstände
   Bautyp Werkbank: Die Seite ist eine Werkbank von oben. Jeder Abschnitt ist ein liegendes Brett
   (section.brett mit data-holz), dazwischen Fugen in der Farbe des Gestells (--bank).
   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.
   Umfärben: Holztöne unter „Bretter", Knöpfe unter „Holzklotz", Brandfarbe --brand.
   ===================================================================================== */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --schrift: "Archivo", "Segoe UI", system-ui, sans-serif;

  /* Gestell der Werkbank: Fugen, Werkzeugleiste, Fuß */
  --bank: #1d140c;
  --bank-hell: #2e2114;
  --bank-text: #f6ecdc;        /* 15,5 : 1 auf --bank */
  --bank-leise: #b9a58c;       /* 7,6 : 1 auf --bank */

  /* Werkstattzettel: Karten aus Papier, die auf den Brettern liegen */
  --papier: #f7f0e1;
  --papier-rand: #e3d6bd;
  --papier-text: #2a1a0e;      /* 14,8 : 1 */
  --papier-leise: #5a4330;     /* 8,1 : 1 */
  --stift: #4a4541;            /* Bleistift: Zahlen, Maße, Maßlinien */

  /* Brandstempel: der eine Akzent */
  --brand: #5a2408;            /* Weiß darauf 12,4 : 1 */
  --brand-hell: #8a3b12;

  /* Holzklotz: Knöpfe */
  --klotz: #8a5a2b;            /* Weiß darauf 5,9 : 1 */
  --klotz-hell: #96643a;
  --klotz-kante: #4a2d12;
  --klotz-text: #ffffff;
  --klotz-leise: #ead9b8;      /* heller Klotz (Ahorn) */
  --klotz-leise-kante: #b59a72;

  /* Brücke zur Anwendung */
  --bg: var(--bank);
  --surface: var(--papier);
  --text: var(--papier-text);
  --muted: var(--papier-leise);
  --accent: var(--brand);
  --on-accent: #ffffff;
  --border: var(--papier-rand);
  --error: #b42318;
  --radius: 6px;
  --radius-klein: 3px;

  --breite: 1240px;
  --abstand: clamp(72px, 9vw, 120px);
  --kopf: 76px;
  --fuge: 14px;

  /* Maserungsmuster für die Bretter (SVG als Daten-URI, dunkle und helle Wellenlinien) */
  --maser-ruhig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='160' viewBox='0 0 520 160'%3E%3Cpath d='M0 11.4 65 14.2 130 15.4 195 14.4 260 11.4 325 8.6 390 7.4 455 8.4 520 11.4' fill='none' stroke='rgba(255,255,255,0.12)' stroke-width='1.2'/%3E%3Cpath d='M0 38.7 65 37.8 130 34.3 195 31 260 29.9 325 31.5 390 34.9 455 37.9 520 38.7' fill='none' stroke='rgba(0,0,0,0.10)' stroke-width='1.2'/%3E%3Cpath d='M0 53.2 65 50.4 130 50.1 195 52.7 260 56.5 325 59.1 390 58.7 455 55.8 520 53.2' fill='none' stroke='rgba(255,255,255,0.12)' stroke-width='1.2'/%3E%3Cpath d='M0 79.2 65 76.6 130 77.4 195 81.1 260 84.3 325 84.5 390 81.7 455 78.1 520 79.2' fill='none' stroke='rgba(0,0,0,0.10)' stroke-width='1.2'/%3E%3Cpath d='M0 98 65 97.5 130 101.8 195 105.6 260 105.3 325 101.7 390 98 455 98.3 520 98' fill='none' stroke='rgba(255,255,255,0.12)' stroke-width='1.2'/%3E%3Cpath d='M0 122.2 65 125.3 130 128 195 127.5 260 124.2 325 121.1 390 120.6 455 123.1 520 122.2' fill='none' stroke='rgba(0,0,0,0.10)' stroke-width='1.2'/%3E%3Cpath d='M0 150.6 65 153.9 130 151.6 195 147.1 260 145.9 325 148.7 390 152.1 455 151.3 520 150.6' fill='none' stroke='rgba(255,255,255,0.12)' stroke-width='1.2'/%3E%3C/svg%3E");
  --maser-lebhaft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='180' viewBox='0 0 640 180'%3E%3Cpath d='M0 10 80 17.8 160 21 240 17.8 320 10 400 2.2 480 -1 560 2.2 640 10' fill='none' stroke='rgba(255,255,255,0.10)' stroke-width='1.6'/%3E%3Cpath d='M0 39.8 80 37.5 160 29.9 240 23.3 320 20.2 400 22.5 480 30.1 560 36.7 640 39.8' fill='none' stroke='rgba(0,0,0,0.13)' stroke-width='1.6'/%3E%3Cpath d='M0 58.9 80 51.4 160 49.1 240 54 320 61.1 400 68.6 480 70.9 560 66 640 58.9' fill='none' stroke='rgba(255,255,255,0.10)' stroke-width='1.6'/%3E%3Cpath d='M0 68.3 80 63.9 160 67.6 240 76.5 320 81.7 400 80.1 480 72.4 560 63.5 640 68.3' fill='none' stroke='rgba(0,0,0,0.13)' stroke-width='1.6'/%3E%3Cpath d='M0 79.6 80 86.6 160 96.5 240 101.3 320 100.4 400 93.4 480 83.5 560 78.7 640 79.6' fill='none' stroke='rgba(255,255,255,0.10)' stroke-width='1.6'/%3E%3Cpath d='M0 102.2 80 112.6 160 120 240 120 320 112.2 400 101.8 480 94.4 560 94.4 640 102.2' fill='none' stroke='rgba(0,0,0,0.13)' stroke-width='1.6'/%3E%3Cpath d='M0 133.4 80 140.6 160 140.6 240 133.4 320 122.6 400 115.4 480 115.4 560 122.6 640 133.4' fill='none' stroke='rgba(255,255,255,0.10)' stroke-width='1.6'/%3E%3Cpath d='M0 160.5 80 156.4 160 145.9 240 139.9 320 139.5 400 143.6 480 154.1 560 160.1 640 160.5' fill='none' stroke='rgba(0,0,0,0.13)' stroke-width='1.6'/%3E%3Cpath d='M0 162.1 80 157.6 160 161.4 240 170.4 320 177.9 400 182.4 480 178.6 560 169.6 640 162.1' fill='none' stroke='rgba(255,255,255,0.10)' stroke-width='1.6'/%3E%3C/svg%3E");
  --maser-dicht: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='120' viewBox='0 0 420 120'%3E%3Cpath d='M0 6 52.5 8.1 105 9 157.5 8.1 210 6 262.5 3.9 315 3 367.5 3.9 420 6' fill='none' stroke='rgba(255,255,255,0.09)' stroke-width='1'/%3E%3Cpath d='M0 20.7 52.5 20 105 17.7 157.5 15.5 210 15.3 262.5 17.5 315 19.9 367.5 20.9 420 20.7' fill='none' stroke='rgba(0,0,0,0.14)' stroke-width='1'/%3E%3Cpath d='M0 27.4 52.5 25.3 105 25.1 157.5 27.2 210 29.9 262.5 31.5 315 31.3 367.5 29.2 420 27.4' fill='none' stroke='rgba(255,255,255,0.09)' stroke-width='1'/%3E%3Cpath d='M0 41.5 52.5 39.9 105 40.7 157.5 43.2 210 45.1 262.5 44.9 315 43 367.5 40.9 420 41.5' fill='none' stroke='rgba(0,0,0,0.14)' stroke-width='1'/%3E%3Cpath d='M0 51.7 52.5 51.9 105 54.4 157.5 56.3 210 55.8 262.5 53.3 315 51.3 367.5 51.9 420 51.7' fill='none' stroke='rgba(255,255,255,0.09)' stroke-width='1'/%3E%3Cpath d='M0 63.1 52.5 65.1 105 66.9 157.5 66.4 210 64.4 262.5 62.6 315 62.6 367.5 64.1 420 63.1' fill='none' stroke='rgba(0,0,0,0.14)' stroke-width='1'/%3E%3Cpath d='M0 78.6 52.5 80.3 105 79.2 157.5 76.6 210 75.6 262.5 77.1 315 79.3 367.5 79.4 420 78.6' fill='none' stroke='rgba(255,255,255,0.09)' stroke-width='1'/%3E%3Cpath d='M0 92.1 52.5 92 105 89.5 157.5 87.6 210 88.2 262.5 90.6 315 92.4 367.5 92.3 420 92.1' fill='none' stroke='rgba(0,0,0,0.14)' stroke-width='1'/%3E%3Cpath d='M0 101.4 52.5 99.7 105 99.4 157.5 101.2 210 103.5 262.5 104.4 315 103.3 367.5 101.6 420 101.4' fill='none' stroke='rgba(255,255,255,0.09)' stroke-width='1'/%3E%3Cpath d='M0 115.3 52.5 113.6 105 114.9 157.5 117.2 210 118.1 262.5 116.9 315 114.8 367.5 114 420 115.3' fill='none' stroke='rgba(0,0,0,0.14)' stroke-width='1'/%3E%3C/svg%3E");
}

/* ---------- Bretter: fünf Holztöne, je Abschnitt eines (data-holz am Abschnitt) ----------
   --brett Grund, --brett-hell Kante oben, --brett-dunkel Kante unten, Text und Links mit Kontrast ≥ 4,5 : 1,
   --titel Farbe der Brandstempel-Überschrift, --brett-muster Maserung. */
[data-holz="eiche"]   { --brett: #c9a46a; --brett-hell: #d9b982; --brett-dunkel: #a8834e; --brett-text: #2a1a0e; --brett-leise: #4a3321; --brett-link: #4a1c05; --titel: var(--brand); --brett-muster: var(--maser-lebhaft); --brett-groesse: 640px; }
[data-holz="nuss"]    { --brett: #6b4a2f; --brett-hell: #7e5a3b; --brett-dunkel: #4e3420; --brett-text: #f6ecdc; --brett-leise: #e2cfb5; --brett-link: #f8d9a8; --titel: #f6ecdc;       --brett-muster: var(--maser-lebhaft); --brett-groesse: 720px; }
[data-holz="esche"]   { --brett: #e4d4b4; --brett-hell: #ede0c5; --brett-dunkel: #c8b48c; --brett-text: #2a1a0e; --brett-leise: #4a3321; --brett-link: #7a3410; --titel: var(--brand); --brett-muster: var(--maser-ruhig);   --brett-groesse: 560px; }
[data-holz="ahorn"]   { --brett: #efe1c6; --brett-hell: #f5ead4; --brett-dunkel: #d8c6a3; --brett-text: #2a1a0e; --brett-leise: #4a3321; --brett-link: #7a3410; --titel: var(--brand); --brett-muster: var(--maser-ruhig);   --brett-groesse: 760px; }
[data-holz="laerche"] { --brett: #d9a062; --brett-hell: #e4b27a; --brett-dunkel: #b97f45; --brett-text: #2a1a0e; --brett-leise: #4a3321; --brett-link: #4a1c05; --titel: var(--brand); --brett-muster: var(--maser-dicht);   --brett-groesse: 420px; }

/* ---------- Das Werkstück im ersten Bildschirm: Farben der gezeichneten Maserung je Holzart ----------
   --h-grund und --h-grund2 Verlauf der Fläche, --h-maser Linien, --h-zone dunkle Flader (Nuss), --h-rau Schleier der sägerauen Seite */
.brett-svg[data-holz="eiche"]   { --h-grund: #d2a86a; --h-grund2: #b88a4c; --h-maser: #7a5428; --h-zone: #8a6030; --h-rau: rgba(150, 140, 125, .42); }
.brett-svg[data-holz="nuss"]    { --h-grund: #76513a; --h-grund2: #553521; --h-maser: #2d1a0f; --h-zone: #3a2213; --h-rau: rgba(140, 130, 120, .40); }
.brett-svg[data-holz="esche"]   { --h-grund: #e9d7ae; --h-grund2: #d4bb8a; --h-maser: #9a7a4e; --h-zone: #b09260; --h-rau: rgba(150, 142, 130, .40); }
.brett-svg[data-holz="ahorn"]   { --h-grund: #f3e4c8; --h-grund2: #e3cfa9; --h-maser: #c3a67e; --h-zone: #d2b58c; --h-rau: rgba(150, 142, 130, .36); }
.brett-svg[data-holz="laerche"] { --h-grund: #e0a260; --h-grund2: #c47f3f; --h-maser: #8a4e22; --h-zone: #a0602a; --h-rau: rgba(150, 140, 125, .42); }