/*!
 * Design-System «Peter Schärer» – Fassung 1.2 (29.10.2026)
 * © 2026 Peter Schärer. Alle Rechte vorbehalten.
 * Geschützt sind Design, Signet, Texte, Grafiken, Daten, Code und alle bereitgestellten Dateien.
 * Nutzung, Vervielfältigung, Bearbeitung oder Weitergabe nur mit schriftlicher Erlaubnis (URG, Schweiz).
 * Ohne Gewähr: Wer Inhalte oder Dateien verwendet, muss sie selbst prüfen; keine Haftung, soweit gesetzlich zulässig.
 *
 * Neu in 1.2: Punkt-Motiv aus dem Signet statt Verlauf, Hero-Motiv «Zielweg» aus feinen Punkten,
 * Titelschrift Hanken Grotesk SemiBold, ruhige Kopfzeile ohne Feldlinien, Navigationspunkt folgt dem sichtbaren Abschnitt, ruhigere Formen,
 * Hover ohne Anheben, feine Linien bei Kennzahlen und Tabellen, kompakte Fusszeile mit aufklappbaren rechtlichen Hinweisen.
 */

/* ===== 1. Design-Tokens: Hell (Standard) ===== */
:root {
  color-scheme: light;

  /* Neutral – Sandstein / Kalk */
  --bg:         #F7F5F0;
  --surface:    #FFFFFF;
  --surface-2:  #EFECE4;
  --line:       #DEDAD0;
  --text:       #1F2933;
  --text-2:     #4A5562;
  --text-3:     #5E6874;

  /* Primär – Seeblau */
  --blue:       #2E6A8E;
  --blue-hover: #245675;
  --blue-soft:  #E3EEF5;
  --on-blue:    #FFFFFF;

  /* Sekundär – Wiesengrün */
  --green:      #4C8A5E;
  --green-text: #3B7049;
  --green-soft: #E4F0E7;
  --on-green:   #FFFFFF;

  /* Akzent – Ziegelorange (sparsam) */
  --orange:       #B85C24;
  --orange-hover: #9E4C1A;
  --orange-text:  #A85320;
  --orange-soft:  #FBEBDD;
  --on-orange:    #FFFFFF;

  /* Ergänzungen */
  --ocker:       #B8892A;
  --ocker-text:  #85620F;
  --ocker-soft:  #F7EFD9;
  --red:         #A8403E;
  --red-soft:    #F8E4E3;
  --violet:      #605F90;
  --violet-soft: #EAE9F4;

  /* Verlauf – ab 1.2 nicht mehr verwenden, bleibt nur für ältere Seiten bestehen */
  --grad: linear-gradient(135deg, #2E6A8E 0%, #3A7C78 50%, #4C8A5E 100%);

  /* Punkt-Motiv aus dem Signet: quadratische Punkte Blau · Grün · Orange */
  --dot: 7px;
  --dot-gap: 4px;

  /* Hero-Motiv «Zielweg»: feine Punkte, Ringe um ein Ziel mit leichter Tiefe (hinten feiner) und
     ein Weg vom äussersten Ring dorthin (Maske aus werkzeuge/zielweg.py; Farbe kommt aus dem
     Verlauf Blau → Grün → Orange im Ziel) */
--zielweg: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 800 600%22%3E%3Cpath fill-opacity=%220.06%22 d=%22M398.6 12.8h1.7v1.7h-1.7zM410.4 10.4h1.7v1.7h-1.7zM422.2 8.2h1.7v1.7h-1.7zM434.0 6.4h1.7v1.7h-1.7zM445.9 4.8h1.7v1.7h-1.7zM457.9 3.6h1.7v1.7h-1.7zM469.8 2.7h1.7v1.7h-1.7zM481.8 2.1h1.7v1.7h-1.7zM493.8 1.7h1.7v1.7h-1.7zM505.8 1.7h1.7v1.7h-1.7zM517.8 1.9h1.7v1.7h-1.7zM529.8 2.4h1.7v1.7h-1.7zM541.8 3.2h1.7v1.7h-1.7zM553.7 4.2h1.7v1.7h-1.7zM565.7 5.5h1.7v1.7h-1.7zM577.5 7.1h1.7v1.7h-1.7zM589.4 9.0h1.7v1.7h-1.7zM601.2 11.1h1.7v1.7h-1.7zM613.0 13.5h1.7v1.7h-1.7zM624.7 16.1h1.7v1.7h-1.7zM636.3 19.0h1.7v1.7h-1.7z%22/%3E%3Cpath fill-opacity=%220.07%22 d=%22M230.8 100.7h1.7v1.7h-1.7zM239.4 92.4h1.7v1.7h-1.7zM248.4 84.4h1.7v1.7h-1.7zM257.7 76.8h1.7v1.7h-1.7zM267.3 69.7h1.7v1.7h-1.7zM277.2 62.9h1.7v1.7h-1.7zM287.4 56.5h1.7v1.7h-1.7zM297.8 50.5h1.7v1.7h-1.7zM308.4 44.8h1.7v1.7h-1.7zM319.2 39.6h1.7v1.7h-1.7zM330.1 34.7h1.7v1.7h-1.7zM341.2 30.2h1.7v1.7h-1.7zM352.5 26.0h1.7v1.7h-1.7zM363.9 22.2h1.7v1.7h-1.7zM375.4 18.8h1.7v1.7h-1.7zM387.0 15.6h1.7v1.7h-1.7zM647.9 22.2h1.7v1.7h-1.7zM659.4 25.6h1.7v1.7h-1.7zM670.8 29.3h1.7v1.7h-1.7zM682.1 33.3h1.7v1.7h-1.7zM693.4 37.5h1.7v1.7h-1.7zM704.5 42.1h1.7v1.7h-1.7zM715.5 46.8h1.7v1.7h-1.7zM726.4 51.9h1.7v1.7h-1.7zM737.1 57.3h1.7v1.7h-1.7zM747.7 62.9h1.7v1.7h-1.7zM758.1 68.8h1.7v1.7h-1.7zM768.4 75.1h1.7v1.7h-1.7zM778.4 81.6h1.7v1.7h-1.7zM788.3 88.5h1.7v1.7h-1.7zM797.9 95.6h1.7v1.7h-1.7z%22/%3E%3Cpath fill-opacity=%220.08%22 d=%22M178.1 180.2h1.8v1.8h-1.8zM182.9 169.2h1.8v1.8h-1.8zM188.2 158.4h1.8v1.8h-1.8zM194.1 148.0h1.8v1.8h-1.8zM200.5 137.8h1.8v1.8h-1.8zM207.4 128.0h1.8v1.8h-1.8zM214.7 118.5h1.8v1.8h-1.8zM222.6 109.5h1.7v1.7h-1.7z%22/%3E%3Cpath fill-opacity=%220.09%22 d=%22M357.8 99.3h1.7v1.7h-1.7zM367.9 92.9h1.7v1.7h-1.7zM378.3 86.9h1.7v1.7h-1.7zM388.9 81.3h1.7v1.7h-1.7zM399.7 76.1h1.7v1.7h-1.7zM410.8 71.4h1.7v1.7h-1.7zM422.0 67.0h1.7v1.7h-1.7zM433.3 63.2h1.7v1.7h-1.7zM444.8 59.7h1.7v1.7h-1.7zM456.4 56.7h1.7v1.7h-1.7zM468.2 54.1h1.7v1.7h-1.7zM480.0 52.0h1.7v1.7h-1.7zM491.8 50.3h1.7v1.7h-1.7zM503.8 49.0h1.7v1.7h-1.7zM515.7 48.1h1.7v1.7h-1.7zM527.7 47.7h1.7v1.7h-1.7zM539.7 47.7h1.7v1.7h-1.7zM551.7 48.1h1.7v1.7h-1.7zM563.7 48.9h1.7v1.7h-1.7zM575.6 50.1h1.7v1.7h-1.7zM587.5 51.8h1.7v1.7h-1.7zM599.3 53.9h1.7v1.7h-1.7zM611.1 56.3h1.7v1.7h-1.7zM622.7 59.2h1.7v1.7h-1.7zM634.2 62.6h1.7v1.7h-1.7zM645.7 66.3h1.7v1.7h-1.7zM656.9 70.4h1.7v1.7h-1.7zM668.0 74.9h1.7v1.7h-1.7zM679.0 79.9h1.7v1.7h-1.7zM689.7 85.2h1.7v1.7h-1.7zM160.6 249.7h1.9v1.9h-1.9zM162.2 237.9h1.9v1.9h-1.9zM164.4 226.1h1.8v1.8h-1.8zM167.0 214.4h1.8v1.8h-1.8zM170.1 202.8h1.8v1.8h-1.8zM173.8 191.4h1.8v1.8h-1.8z%22/%3E%3Cpath fill-opacity=%220.1%22 d=%22M302.9 145.6h1.7v1.7h-1.7zM311.3 137.1h1.7v1.7h-1.7zM320.0 128.8h1.7v1.7h-1.7zM329.0 120.9h1.7v1.7h-1.7zM338.3 113.3h1.7v1.7h-1.7zM347.9 106.1h1.7v1.7h-1.7zM700.3 90.9h1.7v1.7h-1.7zM710.6 97.1h1.7v1.7h-1.7zM720.6 103.6h1.7v1.7h-1.7zM730.4 110.5h1.7v1.7h-1.7zM740.0 117.8h1.7v1.7h-1.7zM749.2 125.5h1.7v1.7h-1.7zM758.1 133.5h1.7v1.7h-1.7zM160.3 321.6h1.9v1.9h-1.9zM159.4 309.7h1.9v1.9h-1.9zM158.8 297.7h1.9v1.9h-1.9zM158.6 285.7h1.9v1.9h-1.9zM158.9 273.7h1.9v1.9h-1.9zM159.5 261.7h1.9v1.9h-1.9z%22/%3E%3Cpath fill-opacity=%220.11%22 d=%22M435.3 129.4h1.7v1.7h-1.7zM446.5 125.0h1.7v1.7h-1.7zM457.8 121.0h1.7v1.7h-1.7zM469.2 117.4h1.7v1.7h-1.7zM480.8 114.1h1.7v1.7h-1.7zM492.4 111.2h1.7v1.7h-1.7zM504.2 108.7h1.7v1.7h-1.7zM516.0 106.7h1.7v1.7h-1.7zM527.9 105.1h1.7v1.7h-1.7zM539.8 104.0h1.7v1.7h-1.7zM551.8 103.3h1.7v1.7h-1.7zM563.8 103.2h1.7v1.7h-1.7zM575.8 103.6h1.7v1.7h-1.7zM587.8 104.5h1.7v1.7h-1.7zM599.7 105.9h1.7v1.7h-1.7zM611.5 107.9h1.7v1.7h-1.7zM265.3 192.3h1.8v1.8h-1.8zM272.2 182.5h1.8v1.8h-1.8zM279.5 172.9h1.8v1.8h-1.8zM287.0 163.6h1.8v1.8h-1.8zM294.8 154.5h1.7v1.7h-1.7zM766.6 141.9h1.8v1.8h-1.8zM774.7 150.7h1.8v1.8h-1.8zM782.5 159.9h1.8v1.8h-1.8zM789.8 169.4h1.8v1.8h-1.8zM796.6 179.3h1.8v1.8h-1.8zM173.2 392.3h2v2h-2zM170.1 380.7h2v2h-2zM167.4 369.0h2v2h-2zM165.1 357.2h2v2h-2zM163.1 345.4h2v2h-2zM161.5 333.5h2v2h-2z%22/%3E%3Cpath fill-opacity=%220.12%22 d=%22M381.1 155.1h1.7v1.7h-1.7zM391.7 149.4h1.7v1.7h-1.7zM402.4 144.0h1.7v1.7h-1.7zM413.3 138.9h1.7v1.7h-1.7zM424.2 134.0h1.7v1.7h-1.7zM623.2 110.5h1.7v1.7h-1.7zM634.8 113.6h1.7v1.7h-1.7zM646.2 117.4h1.7v1.7h-1.7zM657.4 121.7h1.7v1.7h-1.7zM668.3 126.7h1.7v1.7h-1.7zM678.9 132.3h1.7v1.7h-1.7zM240.5 233.4h1.8v1.8h-1.8zM246.2 222.9h1.8v1.8h-1.8zM252.3 212.5h1.8v1.8h-1.8zM258.7 202.3h1.8v1.8h-1.8zM803.0 189.4h1.8v1.8h-1.8zM206.3 469.2h2.1v2.1h-2.1zM200.2 458.8h2.1v2.1h-2.1zM194.6 448.2h2.1v2.1h-2.1zM189.5 437.3h2.1v2.1h-2.1zM184.8 426.3h2v2h-2zM180.5 415.1h2v2h-2zM176.7 403.8h2v2h-2z%22/%3E%3Cpath fill-opacity=%220.13%22 d=%22M487.0 157.8h1.7v1.7h-1.7zM498.9 156.7h1.7v1.7h-1.7zM510.9 155.8h1.7v1.7h-1.7zM522.9 155.3h1.7v1.7h-1.7zM534.9 155.0h1.7v1.7h-1.7zM546.9 155.2h1.7v1.7h-1.7zM350.2 173.5h1.7v1.7h-1.7zM360.4 167.1h1.7v1.7h-1.7zM370.7 161.0h1.7v1.7h-1.7zM689.2 138.5h1.7v1.7h-1.7zM699.0 145.4h1.7v1.7h-1.7zM708.4 152.9h1.7v1.7h-1.7zM717.2 161.0h1.7v1.7h-1.7zM225.5 266.1h1.9v1.9h-1.9zM230.1 255.0h1.9v1.9h-1.9zM235.1 244.1h1.9v1.9h-1.9zM795.4 487.8h2.1v2.1h-2.1zM786.7 496.1h2.1v2.1h-2.1zM777.8 504.2h2.1v2.1h-2.1zM768.7 512.0h2.1v2.1h-2.1zM759.4 519.6h2.1v2.1h-2.1zM749.9 526.9h2.1v2.1h-2.1zM740.2 533.9h2.1v2.1h-2.1zM730.3 540.7h2.2v2.2h-2.2zM720.2 547.2h2.2v2.2h-2.2zM308.9 567.9h2.2v2.2h-2.2zM298.6 561.7h2.2v2.2h-2.2zM288.6 555.1h2.2v2.2h-2.2zM278.8 548.2h2.1v2.1h-2.1zM269.3 540.9h2.1v2.1h-2.1zM260.2 533.2h2.1v2.1h-2.1zM251.3 525.1h2.1v2.1h-2.1zM242.8 516.6h2.1v2.1h-2.1zM234.7 507.7h2.1v2.1h-2.1zM227.0 498.6h2.1v2.1h-2.1zM219.7 489.1h2.1v2.1h-2.1zM212.7 479.3h2.1v2.1h-2.1z%22/%3E%3Cpath fill-opacity=%220.14%22 d=%22M439.7 165.9h1.7v1.7h-1.7zM451.4 163.2h1.7v1.7h-1.7zM463.2 161.0h1.7v1.7h-1.7zM475.1 159.2h1.7v1.7h-1.7zM558.9 155.7h1.7v1.7h-1.7zM570.8 156.6h1.7v1.7h-1.7zM582.8 158.1h1.7v1.7h-1.7zM594.6 160.0h1.7v1.7h-1.7zM606.3 162.6h1.7v1.7h-1.7zM321.2 194.8h1.8v1.8h-1.8zM330.6 187.3h1.8v1.8h-1.8zM340.2 180.2h1.8v1.8h-1.8zM725.3 169.7h1.8v1.8h-1.8zM732.8 179.1h1.8v1.8h-1.8zM739.6 189.0h1.8v1.8h-1.8zM212.8 312.3h1.9v1.9h-1.9zM215.0 300.5h1.9v1.9h-1.9zM217.9 288.8h1.9v1.9h-1.9zM221.4 277.4h1.9v1.9h-1.9zM710.0 553.5h2.2v2.2h-2.2zM699.6 559.5h2.2v2.2h-2.2zM689.0 565.2h2.2v2.2h-2.2zM678.3 570.6h2.2v2.2h-2.2zM667.5 575.8h2.2v2.2h-2.2zM656.5 580.6h2.2v2.2h-2.2zM645.3 585.1h2.2v2.2h-2.2zM634.1 589.3h2.2v2.2h-2.2zM622.8 593.2h2.2v2.2h-2.2zM611.3 596.7h2.2v2.2h-2.2zM599.7 600.0h2.2v2.2h-2.2zM386.3 600.0h2.2v2.2h-2.2zM374.8 596.6h2.2v2.2h-2.2zM363.4 592.8h2.2v2.2h-2.2zM352.2 588.6h2.2v2.2h-2.2zM341.1 584.0h2.2v2.2h-2.2zM330.1 579.0h2.2v2.2h-2.2zM319.4 573.6h2.2v2.2h-2.2z%22/%3E%3Cpath fill-opacity=%220.15%22 d=%22M405.5 177.0h1.7v1.7h-1.7zM416.7 172.7h1.7v1.7h-1.7zM428.1 169.0h1.7v1.7h-1.7zM617.9 165.8h1.7v1.7h-1.7zM629.2 169.8h1.7v1.7h-1.7zM640.2 174.5h1.7v1.7h-1.7zM295.4 219.8h1.8v1.8h-1.8zM303.5 211.0h1.8v1.8h-1.8zM312.1 202.7h1.8v1.8h-1.8zM745.5 199.4h1.8v1.8h-1.8zM750.6 210.3h1.8v1.8h-1.8zM754.8 221.5h1.8v1.8h-1.8zM211.9 360.0h2v2h-2zM210.8 348.1h2v2h-2zM210.6 336.1h2v2h-2zM211.3 324.1h2v2h-2z%22/%3E%3Cpath fill-opacity=%220.16%22 d=%22M478.4 186.0h1.7v1.7h-1.7zM490.4 184.8h1.7v1.7h-1.7zM502.4 184.6h1.7v1.7h-1.7zM514.4 185.3h1.7v1.7h-1.7zM526.2 186.9h1.7v1.7h-1.7zM538.0 189.2h1.7v1.7h-1.7zM549.7 192.1h1.7v1.7h-1.7zM561.1 195.6h1.7v1.7h-1.7zM384.1 187.8h1.7v1.7h-1.7zM394.6 182.0h1.7v1.7h-1.7zM650.9 180.0h1.7v1.7h-1.7zM661.1 186.4h1.7v1.7h-1.7zM275.0 249.4h1.9v1.9h-1.9zM281.0 239.0h1.9v1.9h-1.9zM287.8 229.2h1.8v1.8h-1.8zM758.0 233.1h1.9v1.9h-1.9zM760.2 244.8h1.9v1.9h-1.9zM799.9 381.6h2v2h-2zM792.9 391.3h2v2h-2zM785.3 400.6h2.1v2.1h-2.1zM225.4 405.8h2.1v2.1h-2.1zM220.7 394.9h2v2h-2zM216.9 383.5h2v2h-2zM213.9 371.9h2v2h-2z%22/%3E%3Cpath fill-opacity=%220.17%22 d=%22M455.2 191.9h1.7v1.7h-1.7zM466.7 188.3h1.7v1.7h-1.7zM572.5 199.6h1.7v1.7h-1.7zM364.6 201.8h1.8v1.8h-1.8zM374.0 194.3h1.8v1.8h-1.8zM670.5 193.6h1.8v1.8h-1.8zM679.3 201.8h1.8v1.8h-1.8zM266.1 271.6h1.9v1.9h-1.9zM270.0 260.3h1.9v1.9h-1.9zM761.5 256.8h1.9v1.9h-1.9zM761.8 268.8h1.9v1.9h-1.9zM777.3 409.5h2.1v2.1h-2.1zM768.8 418.0h2.1v2.1h-2.1zM760.0 426.2h2.1v2.1h-2.1zM750.8 433.9h2.1v2.1h-2.1zM741.3 441.2h2.1v2.1h-2.1zM260.4 454.2h2.1v2.1h-2.1zM252.1 445.5h2.1v2.1h-2.1zM244.4 436.3h2.1v2.1h-2.1zM237.3 426.6h2.1v2.1h-2.1zM231.0 416.5h2.1v2.1h-2.1z%22/%3E%3Cpath fill-opacity=%220.18%22 d=%22M504.4 215.5h1.7v1.7h-1.7zM516.3 214.8h1.7v1.7h-1.7zM528.2 216.4h1.7v1.7h-1.7zM444.2 196.7h1.7v1.7h-1.7zM583.6 204.1h1.7v1.7h-1.7zM594.4 209.2h1.7v1.7h-1.7zM348.4 219.4h1.8v1.8h-1.8zM356.0 210.1h1.8v1.8h-1.8zM687.0 211.0h1.8v1.8h-1.8zM693.5 221.1h1.8v1.8h-1.8zM761.0 282.0h1.9v1.9h-1.9zM759.4 293.9h1.9v1.9h-1.9zM262.0 295.2h1.9v1.9h-1.9zM263.4 283.3h1.9v1.9h-1.9zM731.5 448.2h2.1v2.1h-2.1zM721.5 454.8h2.1v2.1h-2.1zM711.3 461.1h2.1v2.1h-2.1zM700.9 467.0h2.1v2.1h-2.1zM690.2 472.6h2.2v2.2h-2.2zM679.5 477.9h2.2v2.2h-2.2zM668.6 483.0h2.2v2.2h-2.2zM341.3 504.5h2.2v2.2h-2.2zM330.2 499.9h2.2v2.2h-2.2zM319.4 495.0h2.1v2.1h-2.1zM308.7 489.5h2.1v2.1h-2.1zM298.3 483.5h2.1v2.1h-2.1zM288.3 476.9h2.1v2.1h-2.1zM278.6 469.9h2.1v2.1h-2.1zM269.3 462.3h2.1v2.1h-2.1z%22/%3E%3Cpath fill-opacity=%220.19%22 d=%22M492.8 218.7h1.7v1.7h-1.7zM539.5 220.4h1.7v1.7h-1.7zM424.6 210.4h1.8v1.8h-1.8zM434.0 202.9h1.7v1.7h-1.7zM604.8 215.1h1.8v1.8h-1.8zM342.0 229.5h1.8v1.8h-1.8zM698.6 231.9h1.8v1.8h-1.8zM756.7 305.6h2v2h-2zM753.3 317.1h2v2h-2zM749.0 328.3h2v2h-2zM266.4 330.7h2v2h-2zM263.5 319.1h2v2h-2zM262.0 307.2h2v2h-2zM657.6 487.7h2.2v2.2h-2.2zM646.4 492.2h2.2v2.2h-2.2zM635.2 496.4h2.2v2.2h-2.2zM623.9 500.3h2.2v2.2h-2.2zM612.4 504.0h2.2v2.2h-2.2zM600.9 507.4h2.2v2.2h-2.2zM589.3 510.6h2.2v2.2h-2.2zM577.7 513.5h2.2v2.2h-2.2zM566.0 516.1h2.2v2.2h-2.2zM554.2 518.4h2.2v2.2h-2.2zM542.4 520.5h2.2v2.2h-2.2zM530.5 522.2h2.2v2.2h-2.2zM518.6 523.7h2.2v2.2h-2.2zM506.7 524.9h2.2v2.2h-2.2zM494.7 525.8h2.2v2.2h-2.2zM482.7 526.3h2.2v2.2h-2.2zM470.7 526.5h2.2v2.2h-2.2zM458.7 526.4h2.2v2.2h-2.2zM446.7 526.0h2.2v2.2h-2.2zM434.8 525.1h2.2v2.2h-2.2zM422.8 524.0h2.2v2.2h-2.2zM410.9 522.4h2.2v2.2h-2.2zM399.1 520.5h2.2v2.2h-2.2zM387.3 518.1h2.2v2.2h-2.2zM375.6 515.3h2.2v2.2h-2.2zM364.1 512.2h2.2v2.2h-2.2zM352.6 508.5h2.2v2.2h-2.2z%22/%3E%3Cpath fill-opacity=%220.2%22 d=%22M549.8 226.4h1.7v1.7h-1.7zM416.7 219.4h1.8v1.8h-1.8zM614.6 222.0h1.8v1.8h-1.8zM333.7 251.9h1.9v1.9h-1.9zM337.0 240.4h1.9v1.9h-1.9zM702.0 243.4h1.9v1.9h-1.9zM703.7 255.2h1.9v1.9h-1.9zM743.9 339.1h2v2h-2zM738.0 349.6h2v2h-2zM275.9 352.7h2v2h-2zM270.6 342.0h2v2h-2z%22/%3E%3Cpath fill-opacity=%220.21%22 d=%22M482.2 224.3h1.7v1.7h-1.7zM410.5 229.6h1.8v1.8h-1.8zM623.5 230.1h1.8v1.8h-1.8zM702.9 272.9h1.9v1.9h-1.9zM332.3 263.8h1.9v1.9h-1.9zM731.5 359.6h2v2h-2zM724.2 369.1h2.1v2.1h-2.1zM716.3 378.2h2.1v2.1h-2.1zM306.2 389.5h2.1v2.1h-2.1zM297.5 381.3h2.1v2.1h-2.1zM289.5 372.4h2.1v2.1h-2.1zM282.3 362.9h2v2h-2z%22/%3E%3Cpath fill-opacity=%220.22%22 d=%22M559.0 234.0h1.8v1.8h-1.8zM631.1 239.4h1.8v1.8h-1.8zM700.4 284.6h1.9v1.9h-1.9zM334.9 287.5h2v2h-2zM332.8 275.8h1.9v1.9h-1.9zM707.8 386.7h2.1v2.1h-2.1zM698.9 394.7h2.1v2.1h-2.1zM689.5 402.1h2.1v2.1h-2.1zM335.3 410.7h2.1v2.1h-2.1zM325.2 404.2h2.1v2.1h-2.1zM315.5 397.2h2.1v2.1h-2.1z%22/%3E%3Cpath fill-opacity=%220.23%22 d=%22M473.3 232.2h1.8v1.8h-1.8zM406.3 240.8h1.8v1.8h-1.8zM696.4 295.8h2v2h-2zM338.8 298.9h2v2h-2zM679.7 409.0h2.1v2.1h-2.1zM669.5 415.4h2.1v2.1h-2.1zM659.0 421.2h2.1v2.1h-2.1zM648.1 426.4h2.2v2.2h-2.2zM637.1 431.2h2.2v2.2h-2.2zM389.9 435.2h2.2v2.2h-2.2zM378.5 431.2h2.2v2.2h-2.2zM367.4 426.9h2.1v2.1h-2.1zM356.5 422.0h2.1v2.1h-2.1zM345.7 416.6h2.1v2.1h-2.1z%22/%3E%3Cpath fill-opacity=%220.24%22 d=%22M404.3 252.6h1.9v1.9h-1.9zM636.7 249.9h1.9v1.9h-1.9zM691.1 306.6h2v2h-2zM684.8 316.8h2v2h-2zM350.4 319.9h2v2h-2zM344.0 309.7h2v2h-2zM625.9 435.4h2.2v2.2h-2.2zM614.5 439.2h2.2v2.2h-2.2zM603.0 442.5h2.2v2.2h-2.2zM591.3 445.3h2.2v2.2h-2.2zM579.6 447.7h2.2v2.2h-2.2zM567.7 449.7h2.2v2.2h-2.2zM555.8 451.3h2.2v2.2h-2.2zM543.9 452.5h2.2v2.2h-2.2zM531.9 453.3h2.2v2.2h-2.2zM519.9 453.7h2.2v2.2h-2.2zM507.9 453.8h2.2v2.2h-2.2zM495.9 453.6h2.2v2.2h-2.2zM483.9 452.9h2.2v2.2h-2.2zM472.0 452.0h2.2v2.2h-2.2zM460.1 450.7h2.2v2.2h-2.2zM448.2 449.0h2.2v2.2h-2.2zM436.3 447.0h2.2v2.2h-2.2zM424.6 444.6h2.2v2.2h-2.2zM412.9 441.9h2.2v2.2h-2.2zM401.3 438.8h2.2v2.2h-2.2z%22/%3E%3Cpath fill-opacity=%220.25%22 d=%22M466.9 242.3h1.8v1.8h-1.8zM567.0 243.0h1.8v1.8h-1.8zM640.2 264.4h1.9v1.9h-1.9zM404.6 264.6h1.9v1.9h-1.9zM677.7 326.5h2v2h-2zM669.7 335.4h2.1v2.1h-2.1zM357.7 329.4h2v2h-2z%22/%3E%3Cpath fill-opacity=%220.26%22 d=%22M661.1 343.8h2.1v2.1h-2.1zM374.6 346.3h2.1v2.1h-2.1zM365.8 338.1h2.1v2.1h-2.1z%22/%3E%3Cpath fill-opacity=%220.27%22 d=%22M639.5 276.3h2v2h-2zM407.0 276.3h2v2h-2zM652.0 351.7h2.1v2.1h-2.1zM642.5 358.9h2.1v2.1h-2.1zM393.7 360.7h2.1v2.1h-2.1zM383.9 353.8h2.1v2.1h-2.1z%22/%3E%3Cpath fill-opacity=%220.28%22 d=%22M464.1 253.9h1.9v1.9h-1.9zM636.0 287.7h2v2h-2zM411.3 287.5h2v2h-2zM632.5 365.5h2.1v2.1h-2.1zM622.1 371.6h2.1v2.1h-2.1zM611.4 377.0h2.2v2.2h-2.2zM425.2 377.9h2.2v2.2h-2.2zM414.4 372.8h2.1v2.1h-2.1zM403.9 367.1h2.1v2.1h-2.1z%22/%3E%3Cpath fill-opacity=%220.29%22 d=%22M574.0 256.5h1.9v1.9h-1.9zM630.0 298.1h2v2h-2zM417.3 297.9h2v2h-2zM600.4 381.8h2.2v2.2h-2.2zM589.2 386.0h2.2v2.2h-2.2zM577.7 389.6h2.2v2.2h-2.2zM566.1 392.5h2.2v2.2h-2.2zM554.3 394.8h2.2v2.2h-2.2zM482.6 394.9h2.2v2.2h-2.2zM470.8 392.7h2.2v2.2h-2.2zM459.1 389.9h2.2v2.2h-2.2zM447.6 386.5h2.2v2.2h-2.2zM436.3 382.5h2.2v2.2h-2.2z%22/%3E%3Cpath fill-opacity=%220.3%22 d=%22M622.1 307.1h2.1v2.1h-2.1zM424.6 307.3h2.1v2.1h-2.1zM542.4 396.4h2.2v2.2h-2.2zM530.4 397.4h2.2v2.2h-2.2zM518.4 397.7h2.2v2.2h-2.2zM506.4 397.4h2.2v2.2h-2.2zM494.5 396.5h2.2v2.2h-2.2zM267.1 539.1h2.6v2.6h-2.6z%22/%3E%3Cpath fill-opacity=%220.31%22 d=%22M465.8 265.6h2v2h-2zM613.1 314.9h2.1v2.1h-2.1zM433.2 315.7h2.1v2.1h-2.1z%22/%3E%3Cpath fill-opacity=%220.32%22 d=%22M574.7 268.4h2v2h-2zM603.1 321.6h2.1v2.1h-2.1zM592.5 327.2h2.1v2.1h-2.1zM442.7 322.9h2.1v2.1h-2.1zM275.4 529.0h2.6v2.6h-2.6z%22/%3E%3Cpath fill-opacity=%220.33%22 d=%22M581.4 331.8h2.2v2.2h-2.2zM453.0 329.0h2.1v2.1h-2.1z%22/%3E%3Cpath fill-opacity=%220.34%22 d=%22M471.9 275.8h2.1v2.1h-2.1zM570.0 335.6h2.2v2.2h-2.2zM558.4 338.7h2.2v2.2h-2.2zM546.6 341.0h2.2v2.2h-2.2zM486.9 340.6h2.2v2.2h-2.2zM475.3 337.8h2.2v2.2h-2.2zM463.9 334.0h2.2v2.2h-2.2zM282.9 518.4h2.7v2.7h-2.7z%22/%3E%3Cpath fill-opacity=%220.35%22 d=%22M569.9 279.2h2.1v2.1h-2.1zM534.7 342.5h2.2v2.2h-2.2zM522.8 343.3h2.2v2.2h-2.2zM510.8 343.3h2.2v2.2h-2.2zM498.8 342.4h2.2v2.2h-2.2z%22/%3E%3Cpath fill-opacity=%220.37%22 d=%22M561.1 287.3h2.1v2.1h-2.1zM481.0 283.6h2.1v2.1h-2.1zM290.0 507.4h2.8v2.8h-2.8z%22/%3E%3Cpath fill-opacity=%220.38%22 d=%22M550.3 292.5h2.2v2.2h-2.2zM491.6 289.1h2.2v2.2h-2.2z%22/%3E%3Cpath fill-opacity=%220.39%22 d=%22M538.6 295.2h2.2v2.2h-2.2zM502.9 292.9h2.2v2.2h-2.2zM296.8 496.4h2.8v2.8h-2.8z%22/%3E%3Cpath fill-opacity=%220.4%22 d=%22M526.7 296.0h2.2v2.2h-2.2zM514.7 295.2h2.2v2.2h-2.2z%22/%3E%3Cpath fill-opacity=%220.41%22 d=%22M303.5 485.2h2.9v2.9h-2.9z%22/%3E%3Cpath fill-opacity=%220.43%22 d=%22M310.1 474.0h2.9v2.9h-2.9z%22/%3E%3Cpath fill-opacity=%220.45%22 d=%22M316.8 462.9h3v3h-3z%22/%3E%3Cpath fill-opacity=%220.47%22 d=%22M323.6 451.8h3v3h-3z%22/%3E%3Cpath fill-opacity=%220.5%22 d=%22M330.6 440.8h3.1v3.1h-3.1z%22/%3E%3Cpath fill-opacity=%220.52%22 d=%22M337.9 430.1h3.1v3.1h-3.1z%22/%3E%3Cpath fill-opacity=%220.54%22 d=%22M345.5 419.5h3.2v3.2h-3.2z%22/%3E%3Cpath fill-opacity=%220.56%22 d=%22M353.6 409.4h3.2v3.2h-3.2z%22/%3E%3Cpath fill-opacity=%220.58%22 d=%22M362.3 399.7h3.2v3.2h-3.2z%22/%3E%3Cpath fill-opacity=%220.61%22 d=%22M371.5 390.6h3.3v3.3h-3.3z%22/%3E%3Cpath fill-opacity=%220.63%22 d=%22M381.6 382.3h3.4v3.4h-3.4z%22/%3E%3Cpath fill-opacity=%220.65%22 d=%22M392.5 375.3h3.4v3.4h-3.4z%22/%3E%3Cpath fill-opacity=%220.67%22 d=%22M404.3 369.9h3.5v3.5h-3.5z%22/%3E%3Cpath fill-opacity=%220.69%22 d=%22M416.4 365.2h3.5v3.5h-3.5z%22/%3E%3Cpath fill-opacity=%220.72%22 d=%22M428.6 360.7h3.6v3.6h-3.6z%22/%3E%3Cpath fill-opacity=%220.74%22 d=%22M440.8 356.2h3.6v3.6h-3.6z%22/%3E%3Cpath fill-opacity=%220.76%22 d=%22M453.0 351.7h3.7v3.7h-3.7z%22/%3E%3Cpath fill-opacity=%220.78%22 d=%22M465.1 347.2h3.7v3.7h-3.7z%22/%3E%3Cpath fill-opacity=%220.8%22 d=%22M477.2 342.5h3.8v3.8h-3.8z%22/%3E%3Cpath fill-opacity=%220.82%22 d=%22M489.3 337.6h3.8v3.8h-3.8z%22/%3E%3Cpath fill-opacity=%220.85%22 d=%22M501.1 332.3h3.9v3.9h-3.9z%22/%3E%3Cpath fill-opacity=%220.87%22 d=%22M512.7 326.5h3.9v3.9h-3.9z%22/%3E%3Cpath fill-opacity=%220.89%22 d=%22M523.7 319.6h4v4h-4z%22/%3E%3Cpath fill-opacity=%220.91%22 d=%22M533.6 311.1h4v4h-4z%22/%3E%3Cpath fill-opacity=%220.93%22 d=%22M540.4 300.2h4.1v4.1h-4.1z%22/%3E%3Cpath fill-opacity=%220.96%22 d=%22M541.8 287.4h4.1v4.1h-4.1z%22/%3E%3Cpath fill-opacity=%220.98%22 d=%22M537.9 274.9h4.2v4.2h-4.2z%22/%3E%3Cpath fill-opacity=%221%22 d=%22M531.3 263.8h4.2v4.2h-4.2zM514.0 244.0h12v12h-12z%22/%3E%3C/svg%3E");
  --zielweg-opacity: .85;

  /* Diagrammpalette (validiert, feste Reihenfolge) */
  --c1: #2B6FA8; --c2: #C8692F; --c3: #00929E; --c4: #6A62B0; --c5: #3E8E55;

  /* Schatten (nur noch für schwebende Elemente wie Tooltip) */
  --shadow-1: 0 1px 2px rgba(31,41,51,.06), 0 1px 3px rgba(31,41,51,.08);
  --shadow-2: 0 10px 30px -10px rgba(31,41,51,.22), 0 4px 10px -6px rgba(31,41,51,.12);

  /* Schrift */
  --font-head: "Hanken Grotesk", system-ui, sans-serif;
  --font-body: "Figtree", system-ui, sans-serif;
  --fs-hero: clamp(2.3rem, 1.4rem + 4.2vw, 4.75rem);
  --fs-h2:   clamp(1.7rem, 1.25rem + 1.9vw, 2.75rem);
  --fs-h3:   clamp(1.15rem, 1.05rem + .45vw, 1.4rem);
  --fs-lead: clamp(1.05rem, 1rem + .35vw, 1.3rem);
  --fs-body: 1.0625rem;
  --fs-small: .875rem;

  /* Raster, Abstände, Radien (1.2: kantiger, näher am Plan) */
  --container: 1280px;
  --gutter: clamp(16px, 4vw, 40px);
  --space-section: clamp(56px, 8vw, 112px);
  --radius-s: 5px;
  --radius:   8px;
  --radius-l: 10px;
  --rule: 2px;  /* kräftige Linie: nur Kopfzeile oben */

  /* Bewegung */
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur: .2s;
}

/* ===== 2. Dunkel: Systemeinstellung ===== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:#0F1720; --surface:#16212C; --surface-2:#1D2A37; --line:#2A3A4A;
    --text:#E6EAEE; --text-2:#B3BDC7; --text-3:#8F9AA6;
    --blue:#7FB3D5; --blue-hover:#9CC6E2; --blue-soft:rgba(127,179,213,.14); --on-blue:#0F1720;
    --green:#8CC7A0; --green-text:#8CC7A0; --green-soft:rgba(140,199,160,.14); --on-green:#0F1720;
    --orange:#F0A06A; --orange-hover:#F5B68A; --orange-text:#F0A06A; --orange-soft:rgba(240,160,106,.14); --on-orange:#0F1720;
    --ocker:#E0BC62; --ocker-text:#E0BC62; --ocker-soft:rgba(224,188,98,.14);
    --red:#E5827F; --red-soft:rgba(229,130,127,.14);
    --violet:#A9A8D6; --violet-soft:rgba(169,168,214,.14);
    --grad: linear-gradient(135deg, #4A90C8 0%, #3FA08F 55%, #5FAE77 100%);
    --zielweg-opacity: .8;
    --c1:#4A90C8; --c2:#CF6F30; --c3:#16A2AC; --c4:#8A80D0; --c5:#4FA36A;
    --shadow-1: 0 1px 2px rgba(0,0,0,.4);
    --shadow-2: 0 14px 34px -12px rgba(0,0,0,.7), 0 0 0 1px rgba(127,179,213,.10);
  }
}
/* ===== 3. Dunkel: manuell über Umschalter ===== */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:#0F1720; --surface:#16212C; --surface-2:#1D2A37; --line:#2A3A4A;
  --text:#E6EAEE; --text-2:#B3BDC7; --text-3:#8F9AA6;
  --blue:#7FB3D5; --blue-hover:#9CC6E2; --blue-soft:rgba(127,179,213,.14); --on-blue:#0F1720;
  --green:#8CC7A0; --green-text:#8CC7A0; --green-soft:rgba(140,199,160,.14); --on-green:#0F1720;
  --orange:#F0A06A; --orange-hover:#F5B68A; --orange-text:#F0A06A; --orange-soft:rgba(240,160,106,.14); --on-orange:#0F1720;
  --ocker:#E0BC62; --ocker-text:#E0BC62; --ocker-soft:rgba(224,188,98,.14);
  --red:#E5827F; --red-soft:rgba(229,130,127,.14);
  --violet:#A9A8D6; --violet-soft:rgba(169,168,214,.14);
  --grad: linear-gradient(135deg, #4A90C8 0%, #3FA08F 55%, #5FAE77 100%);
  --zielweg-opacity: .8;
  --c1:#4A90C8; --c2:#CF6F30; --c3:#16A2AC; --c4:#8A80D0; --c5:#4FA36A;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 14px 34px -12px rgba(0,0,0,.7), 0 0 0 1px rgba(127,179,213,.10);
}


/* ===== 4. Basis ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 var(--fs-body)/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--text); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: var(--fs-hero); font-weight: 600; letter-spacing: -.035em; }
h2 { font-size: var(--fs-h2); font-weight: 600; }
h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.01em; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: var(--blue); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--blue-hover); text-decoration-thickness: 2px; }
img, svg { max-width: 100%; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 2px; }
.num { font-variant-numeric: tabular-nums; }
.lead { font-size: var(--fs-lead); color: var(--text-2); max-width: 62ch; }
.muted { color: var(--text-3); }
.grad-text { color: inherit; } /* ab 1.2 ohne Verlauf, nur noch für ältere Seiten */

/* Punkt-Motiv: drei quadratische Punkte wie im Signet (Blau · Grün · Orange) */
.dots { display: inline-block; flex: none; width: calc(3 * var(--dot) + 2 * var(--dot-gap)); height: var(--dot);
  background:
    linear-gradient(var(--blue), var(--blue)) 0 0 / var(--dot) var(--dot) no-repeat,
    linear-gradient(var(--green), var(--green)) calc(var(--dot) + var(--dot-gap)) 0 / var(--dot) var(--dot) no-repeat,
    linear-gradient(var(--orange), var(--orange)) 100% 0 / var(--dot) var(--dot) no-repeat; }

/* ===== 5. Layout ===== */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.section { padding-block: var(--space-section); }
.section--alt { background: var(--surface-2); }
.section-head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); }
.eyebrow {
  display: inline-flex; align-items: center; gap: .75em;
  font: 700 .8rem/1 var(--font-head); letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-2); margin-bottom: 1rem;
}
.eyebrow::before { content: ""; display: inline-block; flex: none; width: calc(3 * var(--dot) + 2 * var(--dot-gap)); height: var(--dot);
  background:
    linear-gradient(var(--blue), var(--blue)) 0 0 / var(--dot) var(--dot) no-repeat,
    linear-gradient(var(--green), var(--green)) calc(var(--dot) + var(--dot-gap)) 0 / var(--dot) var(--dot) no-repeat,
    linear-gradient(var(--orange), var(--orange)) 100% 0 / var(--dot) var(--dot) no-repeat; }
.grid { display: grid; gap: clamp(14px, 2vw, 24px); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 340px)), 1fr)); }
.grid--2 { --min: 420px; }
.grid--4 { --min: 220px; }
.stack > * + * { margin-top: 1rem; }

/* ===== 6. Kopfzeile ===== */
/* Ruhig: kräftige Linie oben, feine unten, keine Feldlinien. Signet und Navigation stehen auf einer Grundlinie. */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: var(--bg); border-top: var(--rule) solid var(--text); border-bottom: 1px solid var(--line);
}
.site-header .container { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 clamp(32px, 5vw, 72px); padding-block: 10px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font: 800 1.15rem/1 var(--font-head); letter-spacing: -.02em; }
.brand:hover { color: var(--text); }
.brand svg { flex: none; }
.nav { display: flex; flex-wrap: wrap; gap: 0 4px; margin-left: auto; }
.nav a {
  display: inline-flex; align-items: baseline; gap: 9px; padding: 10px 14px; min-height: 44px;
  color: var(--text-2); text-decoration: none; font-weight: 600;
  transition: color var(--dur);
}
.nav a::before { /* Punkt: leer, beim Überfahren blau, beim sichtbaren bzw. aktuellen Abschnitt orange */
  content: ""; width: var(--dot); height: var(--dot); flex: none; align-self: center; /* Grundlinie kommt so vom Text */
  border: 1.5px solid var(--text-3); transition: background-color var(--dur), border-color var(--dur);
}
.nav a:hover { color: var(--text); }
.nav a:hover::before { background: var(--blue); border-color: var(--blue); }
.nav a[aria-current] { color: var(--text); }
.nav a[aria-current]::before { background: var(--orange); border-color: var(--orange); }
.tools { display: flex; gap: 10px; align-items: center; align-self: center; }
@media (max-width: 860px) {
  .site-header .container { padding-block: 10px 0; }
  .nav { order: 3; width: calc(100% + 2 * var(--gutter)); margin: 4px calc(-1 * var(--gutter)) 0; padding-inline: calc(var(--gutter) - 14px);
    overflow-x: auto; flex-wrap: nowrap; }
  .nav a { white-space: nowrap; }
  .tools { margin-left: auto; }
}

/* Hell/Dunkel-Knopf: zeigt Mond (→ dunkel) oder Sonne (→ hell) */
.theme-toggle {
  appearance: none; width: 40px; height: 40px; border-radius: var(--radius-s); display: grid; place-items: center; cursor: pointer;
  background: transparent; color: var(--text-2); border: 1px solid var(--line);
  transition: background var(--dur), color var(--dur), border-color var(--dur);
}
.theme-toggle svg { width: 18px; height: 18px; grid-area: 1 / 1; transition: opacity var(--dur), transform .4s var(--ease); }
.theme-toggle .i-sun { opacity: 0; transform: rotate(-90deg) scale(.6); }
.theme-toggle.is-dark .i-sun { opacity: 1; transform: none; }
.theme-toggle.is-dark .i-moon { opacity: 0; transform: rotate(90deg) scale(.6); }
@media (hover: hover) { .theme-toggle:hover { color: var(--text); background: var(--surface); border-color: var(--text-3); } }

/* ===== 7. Buttons ===== */
.btn {
  --b-bg: var(--surface); --b-fg: var(--text); --b-bd: var(--line);
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 48px; padding: 0 22px; border-radius: var(--radius-s); cursor: pointer;
  background: var(--b-bg); color: var(--b-fg); border: 1.5px solid var(--b-bd);
  font: 700 1rem/1 var(--font-head); text-decoration: none;
  transition: background var(--dur), border-color var(--dur), color var(--dur);
}
.btn--primary { --b-bg: var(--blue); --b-fg: var(--on-blue); --b-bd: var(--blue); }
.btn--accent  { --b-bg: var(--orange); --b-fg: var(--on-orange); --b-bd: var(--orange); }
.btn--secondary { --b-bg: transparent; --b-fg: var(--text); --b-bd: var(--text-3); }
.btn--green { --b-bg: var(--green-text); --b-fg: #fff; --b-bd: var(--green-text); }
:root[data-theme="dark"] .btn--green { --b-fg: var(--on-green); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn--green { --b-fg: var(--on-green); } }
.btn-note { display: block; font-size: var(--fs-small); color: var(--text-3); margin-top: .5rem; }
@media (hover: hover) {
  .btn:hover { color: var(--b-fg); }
  .btn--primary:hover { --b-bg: var(--blue-hover); --b-bd: var(--blue-hover); }
  .btn--accent:hover { --b-bg: var(--orange-hover); --b-bd: var(--orange-hover); }
  .btn--secondary:hover { --b-bd: var(--blue); --b-bg: var(--surface); }
  .btn--green:hover { filter: brightness(.92); }
}
.btn:active { transform: translateY(1px); }

/* ===== 8. Hero ===== */
.hero { position: relative; padding-block: clamp(56px, 9vw, 128px) clamp(40px, 6vw, 72px); overflow: hidden; border-bottom: 1px solid var(--line); }
.hero::after { /* Zielweg: feine Punkte, rechts angeschnitten; Orange im Ziel */
  content: ""; position: absolute; pointer-events: none;
  top: clamp(-60px, -3vw, 0px); right: clamp(-240px, -12vw, -60px); width: clamp(560px, 64vw, 1000px); aspect-ratio: 4 / 3;
  background: radial-gradient(ellipse at 65% 41.7%, var(--orange) 0 2%, var(--green) 22%, var(--blue) 55%);
  -webkit-mask: var(--zielweg) center / 100% 100% no-repeat;
  mask: var(--zielweg) center / 100% 100% no-repeat;
  opacity: var(--zielweg-opacity);
}
@media (max-width: 700px) { .hero::after { top: -40px; right: -170px; opacity: calc(var(--zielweg-opacity) * .55); } }
.hero > .container { position: relative; z-index: 1; }
.hero h1 { max-width: 15ch; }
.hero .lead { margin-bottom: 2rem; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }

/* ===== 9. Kennzahlen als Leiste ===== */
.stats { margin-top: clamp(40px, 6vw, 64px); display: grid; overflow: hidden; border-top: 1px solid var(--line);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.stat { margin-left: -1px; border-left: 1px solid var(--line); padding: 16px 20px 6px; }
.stat__value { font: 600 clamp(1.9rem, 1.5rem + 1.5vw, 2.6rem)/1 var(--font-head); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stat__label { color: var(--text-2); font-size: .95rem; margin-top: .4rem; }

/* ===== 10. Karten ===== */
.card {
  position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
  padding: clamp(20px, 2.4vw, 28px); display: flex; flex-direction: column; gap: .75rem;
  transition: border-color var(--dur), box-shadow var(--dur);
}
.card h3 { margin: 0; }
.card p { color: var(--text-2); margin: 0; }
.card__icon { width: 40px; height: 40px; border-radius: var(--radius-s); display: grid; place-items: center; color: var(--blue);
  border: 1px solid color-mix(in srgb, currentColor 40%, transparent); }
.card__icon svg { width: 22px; height: 22px; }
.card__icon--green { color: var(--green-text); }
.card__icon--orange { color: var(--orange-text); }
.card__icon--violet { color: var(--violet); }
.card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.card__foot { margin-top: auto; padding-top: .75rem; display: flex; justify-content: space-between; align-items: center; gap: 8px; border-top: 1px dashed var(--line); font-size: var(--fs-small); color: var(--text-3); }
.card__link { font-weight: 700; text-decoration: none; display: inline-flex; gap: .35em; align-items: center; }
@media (hover: hover) {
  /* Hover: farbige Kante oben statt Anheben */
  .card:hover { border-color: var(--blue); box-shadow: inset 0 3px 0 var(--blue); }
  .card:hover .card__link { text-decoration: underline; }
}

/* ===== 11. Badges / Pills ===== */
.badge { display: inline-flex; align-items: center; gap: .45em; font: 700 .78rem/1 var(--font-body); padding: 6px 9px; border-radius: 3px; white-space: nowrap; background: var(--surface-2); color: var(--text-2); }
.badge::before { content: ""; width: 6px; height: 6px; background: currentColor; }
.badge--blue   { background: var(--blue-soft);   color: var(--blue); }
.badge--green  { background: var(--green-soft);  color: var(--green-text); }
.badge--orange { background: var(--orange-soft); color: var(--orange-text); }
.badge--ocker  { background: var(--ocker-soft);  color: var(--ocker-text); }
.badge--red    { background: var(--red-soft);    color: var(--red); }
.badge--violet { background: var(--violet-soft); color: var(--violet); }
.pill { display: inline-block; padding: 6px 12px; border-radius: 3px; border: 1px solid var(--line); font-size: .85rem; color: var(--text-2); background: var(--surface); transition: border-color var(--dur), color var(--dur); }
@media (hover: hover) { .pill:hover { border-color: var(--green); color: var(--text); } }

/* ===== 12. Hinweisboxen ===== */
.note { display: grid; grid-template-columns: 24px 1fr; gap: 12px; padding: 16px 18px; border-radius: var(--radius-s); border: 1px solid; border-left-width: 4px; }
.note svg { width: 22px; height: 22px; margin-top: 2px; }
.note strong { display: block; font-family: var(--font-head); }
.note p { margin: .2rem 0 0; color: var(--text-2); }
.note--info    { background: var(--blue-soft);   border-color: var(--blue);   color: var(--blue); }
.note--success { background: var(--green-soft);  border-color: var(--green);  color: var(--green-text); }
.note--warning { background: var(--ocker-soft);  border-color: var(--ocker);  color: var(--ocker-text); }
.note--error   { background: var(--red-soft);    border-color: var(--red);    color: var(--red); }

/* ===== 13. Text / Bericht ===== */
.prose { max-width: 70ch; }
.prose h3 { margin-top: 1.8em; }
.prose ul { list-style: none; padding-left: 1.3em; }
.prose li { position: relative; }
.prose li::before { content: ""; position: absolute; left: -1.25em; top: .62em; width: 6px; height: 6px; background: var(--green); }
blockquote { margin: 1.5em 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--green); font: 600 1.2rem/1.45 var(--font-head); color: var(--text); }
blockquote cite { display: block; font: 400 .9rem var(--font-body); color: var(--text-3); margin-top: .5rem; font-style: normal; }
mark { background: var(--orange-soft); color: var(--text); padding: 0 .2em; border-radius: 2px; box-shadow: inset 0 -2px 0 var(--orange); }

/* ===== 14. Tabelle ===== */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
caption { text-align: left; padding: 14px 16px 0; font-weight: 700; font-family: var(--font-head); }
th, td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font: 700 .78rem/1.2 var(--font-body); text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); background: var(--surface-2); }
td.r, th.r { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr { transition: background var(--dur); }
@media (hover: hover) { tbody tr:hover { background: var(--blue-soft); } }
tbody tr:last-child td { border-bottom: 0; }
tr.is-best td:first-child { box-shadow: inset 3px 0 0 var(--orange); }

/* ===== 15. Fortschritt ===== */
.progress { height: 8px; border-radius: 1px; background: var(--surface-2); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--blue); width: var(--v, 50%); transform-origin: left; }
.js .reveal .progress > span { transform: scaleX(0); transition: transform 1s var(--ease) .2s; }
.js .reveal.is-visible .progress > span { transform: scaleX(1); }

/* ===== 16. Tabs ===== */
.tabs [role="tablist"] { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs [role="tab"] { appearance: none; background: none; border: 0; cursor: pointer; padding: 12px 16px; min-height: 44px; font: 700 .95rem var(--font-head); color: var(--text-3); border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs [role="tab"]:hover { color: var(--text); }
.tabs [role="tab"][aria-selected="true"] { color: var(--text); border-bottom-color: var(--orange); }
.tabs [role="tabpanel"] { padding-top: 20px; }

/* ===== 17. Formular ===== */
.form { display: grid; gap: 18px 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field label, .field legend { font-weight: 700; font-size: .92rem; }
.field .hint { font-size: var(--fs-small); color: var(--text-3); }
.input, select.input, textarea.input {
  width: 100%; min-height: 48px; padding: 10px 14px; font: inherit; color: var(--text);
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-s);
  transition: border-color var(--dur), box-shadow var(--dur);
}
textarea.input { min-height: 110px; resize: vertical; }
.input:hover { border-color: var(--text-3); }
.input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); }
.input[aria-invalid="true"] { border-color: var(--red); }
.field .error { color: var(--red); font-size: var(--fs-small); font-weight: 600; }
.input-affix { display: flex; align-items: stretch; }
.input-affix span { display: grid; place-items: center; padding: 0 12px; background: var(--surface-2); border: 1.5px solid var(--line); border-right: 0; border-radius: var(--radius-s) 0 0 var(--radius-s); color: var(--text-2); font-weight: 700; }
.input-affix .input { border-radius: 0 var(--radius-s) var(--radius-s) 0; text-align: right; }
fieldset.field { border: 0; padding: 0; margin: 0; }
.choice { display: flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; }
.choice input { width: 20px; height: 20px; accent-color: var(--green); }
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--text-2); }
.switch input { appearance: none; width: 42px; height: 24px; border-radius: 999px; background: var(--line); position: relative; cursor: pointer; transition: background var(--dur); margin: 0; }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform var(--dur) var(--ease); box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.switch input:checked { background: var(--green); }
.switch input:checked::after { transform: translateX(18px); }

/* ===== 18. Diagramm ===== */
.chart { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(18px, 2.4vw, 28px); position: relative; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .axis text, .chart .lbl-txt { fill: var(--text-3); font: 500 12px var(--font-body); }
.chart .val-txt { fill: var(--text); font: 700 12px var(--font-body); }
.chart .grid-line { stroke: var(--line); stroke-width: 1; }
.chart .seg { transition: opacity var(--dur); cursor: pointer; }
.chart svg:hover .seg { opacity: .45; }
.chart svg .seg:hover { opacity: 1; }
/* Legende wie beim Zonenplan: quadratische Felder mit feiner Kontur */
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 14px; padding: 0; list-style: none; font-size: .88rem; color: var(--text-2); }
.legend li { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 13px; height: 13px; display: inline-block; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 30%, transparent); }
.tooltip { position: absolute; pointer-events: none; background: var(--text); color: var(--bg); padding: 8px 10px; border-radius: var(--radius-s); font-size: .85rem; line-height: 1.35; opacity: 0; transform: translate(-50%, -110%); transition: opacity .15s; white-space: nowrap; z-index: 5; }
.tooltip.is-on { opacity: 1; }

/* ===== 19. Fusszeile ===== */
.site-footer { border-top: 1px solid var(--line); padding-block: 24px; color: var(--text-3); font-size: .8125rem; line-height: 1.5; background: var(--bg); }
.site-footer a { color: var(--text-2); }
.footer-bar { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline; justify-content: space-between; }
.footer-bar p { margin: 0; }
/* Rechtliche Hinweise: auf jeder Seite vorhanden, aber zugeklappt; der Inhalt wird je Seite angepasst */
.legal { margin-top: 10px; }
.legal summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; color: var(--text-2); font-weight: 600; min-height: 32px; }
.legal summary::-webkit-details-marker { display: none; }
.legal summary::before { content: ""; width: 6px; height: 6px; border: 1.5px solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); transition: transform var(--dur); }
.legal[open] summary::before { transform: rotate(45deg); }
.legal summary:hover { color: var(--text); }
.legal__body { display: grid; gap: 4px 32px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); padding: 10px 0 4px; max-width: 1100px; }
.legal__body h4 { font: 700 .8125rem/1.4 var(--font-body); letter-spacing: 0; color: var(--text-2); margin: 8px 0 2px; }
.legal__body p { margin: 0; }
.legal__stand { grid-column: 1 / -1; margin-top: 8px !important; }

/* ===== 20. Einblenden beim Scrollen ===== */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ===== 21. Druck ===== */
@media print {
  .site-header, .tools, .hero::after { display: none !important; }  body { background: #fff; color: #000; }
  .card, .stat, .chart { break-inside: avoid; box-shadow: none; }
}

/*!
 * Farbwelt «Nachtflug» für Wanderflieger – Ergänzung zum Design-System «Peter Schärer» 1.2
 * Fassung 1.1 (07.11.2026, von Peter übernommen; Farbwerte unverändert seit 1.0 vom 25.10.2026)
 * © 2026 Peter Schärer. Alle Rechte vorbehalten.
 * Wird NACH 20261029_ps-design.css und VOR 20261107_wf-ergaenzungen.css geladen und ersetzt nur Farb-Tokens; Schrift, Raster und Komponenten bleiben.
 * Punkt-Motiv und Zielweg (Design 1.2) übernehmen die Farben über --blue, --green und --orange automatisch.
 * Leitidee: Logo-Gelb #EDBE00 auf Graphit, Himmelblau als Zweitfarbe, Thermik-Orange als Akzent.
 * Variablennamen bleiben gleich (--blue = Primär usw.), damit alle Komponenten ohne Anpassung greifen.
 * Kontraste geprüft (WCAG): Text ≥ 4.5:1, Flächen und Symbole ≥ 3:1, in Hell und Dunkel.
 */

/* ===== 1. Hell (Standard) ===== */
:root {
  /* Neutral – Kalk und Graphit */
  --bg:         #FAF8F2;
  --surface:    #FFFFFF;
  --surface-2:  #F1EEE5;
  --line:       #E2DDD0;
  --text:       #1B1D21;
  --text-2:     #474B53;
  --text-3:     #5C616A;

  /* Primär – Logo-Gelb; auf hellem Grund als Dunkelgelb für Text und Links (5.4:1) */
  --blue:       #7F6200;
  --blue-hover: #644D00;
  --blue-soft:  #FAF0CC;
  --on-blue:    #FFFFFF;

  /* Akzent – Thermik-Orange (sparsam, die eine wichtigste Handlung) */
  --orange:       #C2561A;
  --orange-hover: #A44613;
  --orange-text:  #AE4A12;
  --orange-soft:  #FBE7DA;
  --on-orange:    #FFFFFF;

  /* Warnung – Bernstein (deutlich vom Primär-Gelb abgesetzt) */
  --ocker:       #C07A12;
  --ocker-text:  #8F4E00;
  --ocker-soft:  #FBEBD3;

  /* Zweitfarbe (Logo-Gelb und Signet: 20261025_wf-ergaenzungen.css) */
  --sky:           #2D6E9E;   /* Himmelblau: Information, sekundäre Links */
  --sky-soft:      #E3EEF6;

  /* Verlauf – Gelb → Thermik-Orange (nur noch für ältere Seiten; ab Design 1.2 ohne Verlauf) */
  --grad: linear-gradient(135deg, #9C7600 0%, #B06A10 50%, #C2561A 100%);
  --grad-hero: radial-gradient(1200px 500px at 85% -10%, rgba(237,190,0,.20), transparent 60%),
               radial-gradient(900px 500px at -10% 10%, rgba(45,110,158,.12), transparent 60%);

  /* Diagrammpalette: Gelb, Blau, Türkis, Grün, Beere (auch bei Rot-Grün-Schwäche unterscheidbar) */
  --c1: #B08700; --c2: #1F4E8C; --c3: #00929E; --c4: #3E8E55; --c5: #A33A6B;

  --shadow-1: 0 1px 2px rgba(27,29,33,.06), 0 1px 3px rgba(27,29,33,.08);
  --shadow-2: 0 10px 30px -10px rgba(27,29,33,.22), 0 4px 10px -6px rgba(27,29,33,.12);
}

/* ===== 2. Dunkel: Systemeinstellung ===== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#14161A; --surface:#1E2127; --surface-2:#262A31; --line:#343943;
    --text:#ECEAE4; --text-2:#BDBAB2; --text-3:#96938C;
    --blue:#EDBE00; --blue-hover:#FFD234; --blue-soft:rgba(237,190,0,.14); --on-blue:#14161A;
    --orange:#FF8A3D; --orange-hover:#FFA266; --orange-text:#FF8A3D; --orange-soft:rgba(255,138,61,.14); --on-orange:#14161A;
    --ocker:#F2A93B; --ocker-text:#F2A93B; --ocker-soft:rgba(242,169,59,.14);
    --sky:#7EB6E0; --sky-soft:rgba(126,182,224,.14);
    --grad: linear-gradient(135deg, #EDBE00 0%, #F7A425 50%, #FF8A3D 100%);
    --grad-hero: radial-gradient(1200px 500px at 85% -10%, rgba(237,190,0,.14), transparent 60%),
                 radial-gradient(900px 500px at -10% 10%, rgba(126,182,224,.12), transparent 60%);
    --c1:#D9AE00; --c2:#4A90C8; --c3:#3FC1C9; --c4:#4FA36A; --c5:#E07AA8;
    --shadow-1: 0 1px 2px rgba(0,0,0,.45);
    --shadow-2: 0 14px 34px -12px rgba(0,0,0,.75), 0 0 0 1px rgba(237,190,0,.10);
  }
}
/* ===== 3. Dunkel: manuell über Umschalter ===== */
:root[data-theme="dark"] {
  --bg:#14161A; --surface:#1E2127; --surface-2:#262A31; --line:#343943;
  --text:#ECEAE4; --text-2:#BDBAB2; --text-3:#96938C;
  --blue:#EDBE00; --blue-hover:#FFD234; --blue-soft:rgba(237,190,0,.14); --on-blue:#14161A;
  --orange:#FF8A3D; --orange-hover:#FFA266; --orange-text:#FF8A3D; --orange-soft:rgba(255,138,61,.14); --on-orange:#14161A;
  --ocker:#F2A93B; --ocker-text:#F2A93B; --ocker-soft:rgba(242,169,59,.14);
  --sky:#7EB6E0; --sky-soft:rgba(126,182,224,.14);
  --grad: linear-gradient(135deg, #EDBE00 0%, #F7A425 50%, #FF8A3D 100%);
  --grad-hero: radial-gradient(1200px 500px at 85% -10%, rgba(237,190,0,.14), transparent 60%),
               radial-gradient(900px 500px at -10% 10%, rgba(126,182,224,.12), transparent 60%);
  --c1:#D9AE00; --c2:#4A90C8; --c3:#3FC1C9; --c4:#4FA36A; --c5:#E07AA8;
  --shadow-1: 0 1px 2px rgba(0,0,0,.45);
  --shadow-2: 0 14px 34px -12px rgba(0,0,0,.75), 0 0 0 1px rgba(237,190,0,.10);
}

/* ===== 4. Ergänzte Komponenten ===== */
/* Haupt-Button in Logo-Gelb mit schwarzer Schrift (hell und dunkel gleich) */
.btn--primary { --b-bg: var(--wf-gelb); --b-fg: var(--on-wf-gelb); --b-bd: var(--wf-gelb); }
@media (hover: hover) {
  .btn--primary:hover { --b-bg: var(--wf-gelb-hover); --b-bd: var(--wf-gelb-hover); }
}
/* Information in Himmelblau statt Primär-Gelb */
.note--info { background: var(--sky-soft); border-color: var(--sky); color: var(--sky); }

/*!
 * Wanderflieger – Ergänzungen zum Design-System «Peter Schärer» (unabhängig von der Farbwelt)
 * Fassung 1.1 (07.11.2026, für Design 1.2) · © 2026 Peter Schärer. Alle Rechte vorbehalten.
 * Wird NACH 20261029_ps-design.css und der Farbwelt 20261107_wf-farben.css geladen.
 * Signet: output\signet\20261107_wf-*.svg (Entwurf D «Abflug», übernommen 07.11.2026).
 * Enthält nur, was Wanderflieger immer braucht: Logo-Gelb, Signet und Slogan.
 */

/* ===== 1. Marken-Tokens ===== */
:root {
  --wf-gelb:       #EDBE00;      /* Logo-Farbe als Fläche */
  --wf-gelb-hover: #D9AD00;
  --on-wf-gelb:    #14161A;      /* Schwarz auf Gelb: 10.3:1 */
  --wf-signet:     var(--text);  /* Signet auf hellem Grund in Textfarbe (Gelb auf Hell hat zu wenig Kontrast) */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --wf-gelb-hover: #FFD234; --wf-signet: #EDBE00; }
}
:root[data-theme="dark"] { --wf-gelb-hover: #FFD234; --wf-signet: #EDBE00; }

/* ===== 2. Komponenten ===== */
/* Signet (inline-SVG mit currentColor) */
.wf-signet { display: block; width: auto; color: var(--wf-signet); }
.wf-signet--kopf { height: 40px; }   /* ab 1.1 mit Rand oben für den Gleitschirm */
.wf-signet--fuss { height: 30px; }
.wf-signet--hero { height: clamp(140px, 22vw, 230px); margin-inline: auto; }
.wf-slogan { font: 500 var(--fs-lead)/1.3 var(--font-head); letter-spacing: .04em; color: var(--text-2); }
/* Kategorie in Himmelblau; ohne Farbwelt «Nachtflug» in Primärfarbe */
.badge--sky { background: var(--sky-soft, var(--blue-soft)); color: var(--sky, var(--blue)); }

/*!
 * wanderflieger.ch – Seitenstile (nach Design 1.2, Farbwelt «Nachtflug» und wf-ergaenzungen)
 * Fassung 1.0 (07.11.2026) · © 2026 Peter Schärer. Alle Rechte vorbehalten.
 * Nur Tokens verwenden; keine festen Farben.
 */

/* Startseite: Hero mit Signet */
.wf-hero { text-align: center; }
.wf-hero h1, .wf-hero .lead { margin-inline: auto; }
.wf-hero .wf-slogan { margin: 10px 0 clamp(36px, 6vw, 72px); }
.wf-hero .hero-actions { justify-content: center; }

/* Beitragskarten: ganze Karte klickbar über den Titel-Link */
.karte { position: relative; }
.karte h3 a.karte__link { color: var(--text); text-decoration: none; }
.karte h3 a.karte__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.karte h3 a.karte__link:focus-visible { outline: none; }
.karte:focus-within { outline: 3px solid var(--blue); outline-offset: 3px; }
.card__bild { margin: calc(-1 * clamp(20px, 2.4vw, 28px)) calc(-1 * clamp(20px, 2.4vw, 28px)) 4px;
  aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius-l) var(--radius-l) 0 0; background: var(--surface-2); }
.card__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.karte[hidden] { display: none !important; }

/* Filter im Blog */
.filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.filter__knopf { appearance: none; font: 600 .9rem/1 var(--font-body); min-height: 40px; padding: 0 14px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); color: var(--text-2); }
.filter__knopf:hover { border-color: var(--blue); color: var(--text); }
.filter__knopf[aria-pressed="true"] { background: var(--blue-soft); border-color: var(--blue); color: var(--text); }

/* Beitrag */
.beitrag .prose h1 { font-size: var(--fs-h2); margin-top: 0; }
figure.foto { margin: 1.5em 0; }
figure.foto img { width: 100%; height: auto; border-radius: var(--radius); display: block; }
figure.foto figcaption { font-size: var(--fs-small); color: var(--text-3); margin-top: 6px; }
.hint { font-size: var(--fs-small); color: var(--text-3); }
.beitrag__herkunft { margin-top: 2.5em; }
.beitrag__nav { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin-top: 32px; max-width: 70ch; }
.beitrag__nav .btn { white-space: normal; text-align: left; }

.beitrag__zurueck { margin-top: 20px; max-width: 70ch; }

/* Über mich: kompakte Liste der Beiträge */
.prose .beitragsliste, .prose .linkliste { padding-left: 0; }
.beitragsliste { list-style: none; padding: 0; display: grid; gap: 0; }
.beitragsliste li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.prose .beitragsliste li::before { content: none; }

/* Gleitschirme: Filter, Tabelle, Klasse */
.filter--form { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); margin-bottom: 8px; }
.gs-tabelle td, .gz-tabelle td { vertical-align: top; }
.table-wrap + .prose { margin-top: 24px; }
.gs-tabelle tr[hidden], .gz-tabelle tr[hidden] { display: none; }
.vz-karte[hidden], .vz-gruppe[hidden] { display: none; }
/* Mehrere Rollen umbrechen: Sonst wird die Karte bei 360 px breiter als die Seite (Schlusstest 14.11.2026) */
.vz-karte .card__top { flex-wrap: wrap; justify-content: flex-start; gap: 6px 8px; }
.vz-gruppe { margin-top: 32px; }
.vz-gruppe h2 { margin-bottom: 12px; }
.vz-gruppe .note { margin-bottom: 16px; }
/* Kopfzeile: sieben Menüpunkte und Schalter passen auf eine Zeile */
.site-header .container { column-gap: 20px; }
.site-header .nav a { padding-inline: 8px; }
/* Reisen: Originalpreis; Umrechnung beim Darüberfahren bzw. Antippen (Fokus) als Hinweis mit «≈» */
.rs-preis { margin-bottom: 4px; }
.rs-preis .hint { display: block; max-width: 16ch; margin-left: auto; }
.preis-orig { white-space: nowrap; position: relative; font-variant-numeric: tabular-nums; border-bottom: 1px dotted var(--text-2); cursor: help; }
.preis-orig:hover::after, .preis-orig:focus::after { content: attr(data-umr); position: absolute; right: 0; top: calc(100% + 4px); z-index: 5;
  width: max-content; max-width: 240px; white-space: normal; text-align: left; font: 400 .8rem/1.4 var(--font-body);
  padding: 6px 8px; border-radius: var(--radius-s); background: var(--surface-2); color: var(--text); box-shadow: 0 2px 8px rgb(0 0 0 / .2); }
/* Reisen: Leistungen je Reise aufklappbar */
.rs-inkl { margin-top: 4px; font-size: .85rem; max-width: 46ch; }
.rs-inkl summary { cursor: pointer; color: var(--text-2); }
.rs-inkl p { margin: 4px 0 0; }
/* Reisen: Spalten; Art als kleine Marken; Fluggebiet-Karte ganz anklickbar */
.rs-tabelle td { vertical-align: top; }
.rs-termin { white-space: nowrap; }
.rs-arten { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.rs-art { font: 600 .72rem/1.6 var(--font-body); padding: 0 6px; border-radius: var(--radius-s); background: var(--surface-2); color: var(--text-2); }
.fg-karte .fg-zeigen { position: static; }
.fg-karte .fg-zeigen::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.fg-karte { cursor: pointer; }
.fg-karte:hover { border-color: var(--blue); }
.fg-filter .fg-suche { grid-column: span 2; }
@media (max-width: 560px) { .fg-filter .fg-suche { grid-column: auto; } }
/* Verzeichnis: Suchfeld doppelt so breit wie die Auswahlfelder (14.11.2026) */
#vz-filter .vz-suche { grid-column: span 2; }
@media (max-width: 560px) { #vz-filter .vz-suche { grid-column: auto; } }
.fg-saison { margin-top: -4px; }
/* Übersichtskarte der Fluggebiete (13.11.2026) */
.ukarte-wahl { display: flex; gap: 8px; margin: 16px 0 8px; }
.ukarte { margin: 0 0 8px; }
.js .ukarte[hidden] { display: none; }
.ukarte__svg { display: block; width: 100%; height: auto; background: var(--sky-soft); border: 1px solid var(--line); border-radius: var(--radius-m, 12px); }
.ukarte__land { fill: var(--surface); stroke: var(--line); stroke-width: 0.8; stroke-linejoin: round; }
.ukarte__punkt { stroke: var(--surface); stroke-width: 1.5; cursor: pointer; }
.ukarte__punkt--offiziell { fill: var(--orange); }
.ukarte__punkt--osm { fill: var(--blue); }
.ukarte__ort:hover .ukarte__punkt, .ukarte__ort:focus-visible .ukarte__punkt { stroke: var(--text); stroke-width: 3; }
.ukarte__ort--aus { display: none; }
.ukarte-legende__p { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; }
.ukarte-legende__p--offiziell { background: var(--orange); }
.ukarte-legende__p--osm { background: var(--blue); }
/* Infos zum Fluggebiet: über der klickbaren Fläche der Karte, eigener Klick löst den Filter nicht aus */
.fg-infos { position: relative; z-index: 1; cursor: auto; margin-bottom: 8px; }
.fg-infos ul { margin: 4px 0 0; padding-left: 18px; }
.fg-ziel { position: relative; z-index: 1; margin: 8px 0 0; }
/* Zielseite: beste Monate dunkler, abgeleitete Angaben als Hinweis */
.saison__m--beste { background: var(--blue); }
.ziel-quelle { font-size: .8rem; color: var(--text-2); }
/* Modellseite: Grössentabelle so breit wie der Text darüber und darunter */
.table-wrap--prose { max-width: 70ch; }
.saison { display: flex; gap: 2px; margin: 8px 0; }
.saison__m { flex: 1; text-align: center; font: 600 .7rem/1.8 var(--font-body); border-radius: 3px; background: var(--surface-2); color: var(--text-2); }
.saison__m--an { background: var(--orange); color: var(--surface); }
.klasse { display: inline-block; min-width: 2.2em; text-align: center; font: 700 .85rem/1.6 var(--font-body);
  border-radius: var(--radius-s); padding: 0 6px; background: var(--surface-2); color: var(--text); }
.klasse--a { background: var(--green-soft); color: var(--green-text); }
.klasse--b { background: var(--sky-soft, var(--blue-soft)); color: var(--sky, var(--blue)); }
.klasse--c { background: var(--ocker-soft); color: var(--ocker-text); }
.klasse--d { background: var(--red-soft); color: var(--red); }
.eckdaten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 12px; margin: 1.5em 0; }
.eckdaten div { border-top: 1px solid var(--line); padding-top: 8px; }
.eckdaten dt { font-size: var(--fs-small); color: var(--text-3); }
.eckdaten dd { margin: 0; font-weight: 600; }
.sprungliste { display: flex; flex-wrap: wrap; gap: 6px 16px; padding-left: 0; list-style: none; }
.prose .sprungliste li::before { content: none; }

/* Linkliste mit Beschreibung */
.linkliste li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; }
.linkliste li p { grid-column: 1 / -1; margin: 0; color: var(--text-2); font-size: .95rem; }
.linkliste li p:empty { display: none; }

/* Planung: Linkliste */
.linkliste { list-style: none; padding: 0; display: grid; gap: 6px; }
.linkliste li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.prose .linkliste li::before { content: none; }

/* Funkverkehr in Beiträgen: Pilot links (blau), Tower eingerückt rechts (orange) */
.funkverkehr { max-width: 60ch; margin: 16px 0 24px; }
.funk { max-width: min(46ch, 85%); margin: 12px auto 12px 0; padding: 10px 14px; border-radius: var(--radius-s); border-left: 4px solid var(--blue); background: var(--blue-soft); }
.funk--tower { margin: 12px 0 12px auto; border-left: 0; border-right: 4px solid var(--orange); background: var(--orange-soft); }
.funk p { margin: 0; }
.funk__wer { font-size: var(--fs-small); font-weight: 700; color: var(--blue); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px !important; }
.funk--tower .funk__wer { color: var(--orange-text); }
.funk__text { font-family: var(--font-body); line-height: 1.5; color: var(--text); }
.funk-pause { text-align: center; color: var(--text-2); font-style: italic; margin: 16px 0 !important; }
.foto--signet { text-align: center; }
/* Tabellen und Hinweiskästen in Beiträgen */
.prose .table-wrap, .prose .note { margin: 1.4em 0; }
.prose .table-wrap td:first-child { white-space: nowrap; }
.wf-signet--beitrag { display: block; width: min(280px, 70%); height: auto; margin: 0 auto 8px; }