/* Farb-Tokens als LCH-Kanäle (L C H), nutzbar als lch(var(--token)) oder lch(var(--token) / alpha) */
:root {
  --green: 75% 72.8 125.7;
  --green-dark: 65% 65.1 126.8; /* Vignettenrand, auch Footer */
  --green-pale: 95% 12 125.7; /* sehr helle Schattierung des Hero-Grüns, Consent-Banner */
  --glow-warm: 98% 22 105;
  --glow-warm-deep: 95% 36 93;
  /* Zettel-Abrisskanten: grüne Fläche (--tear-*) und hellere Papierfaser-Kante darunter (--tear-*-rim) */
  --paper: 95% 9 105;
  --tear-hero: polygon(0 0, 100% 0, 100.0% calc(100% - 8.9px), 99.23% calc(100% - 11.1px), 98.46% calc(100% - 8.1px), 97.69% calc(100% - 4px), 96.92% calc(100% - 7.9px), 96.15% calc(100% - 8.4px), 95.38% calc(100% - 13.0px), 94.62% calc(100% - 7.7px), 93.85% calc(100% - 7.6px), 93.08% calc(100% - 5.7px), 92.31% calc(100% - 4.3px), 91.54% calc(100% - 7.6px), 90.77% calc(100% - 7.6px), 90.0% calc(100% - 10.1px), 89.23% calc(100% - 11.4px), 88.46% calc(100% - 10.2px), 87.69% calc(100% - 12.7px), 86.92% calc(100% - 13.0px), 86.15% calc(100% - 10.7px), 85.38% calc(100% - 18px), 84.62% calc(100% - 13.5px), 83.85% calc(100% - 17.1px), 83.08% calc(100% - 18px), 82.31% calc(100% - 18px), 81.54% calc(100% - 18px), 80.77% calc(100% - 18px), 80.0% calc(100% - 18px), 79.23% calc(100% - 18px), 78.46% calc(100% - 18px), 77.69% calc(100% - 18px), 76.92% calc(100% - 18px), 76.15% calc(100% - 18px), 75.38% calc(100% - 10.6px), 74.62% calc(100% - 14.3px), 73.85% calc(100% - 5.7px), 73.08% calc(100% - 12.5px), 72.31% calc(100% - 9.5px), 71.54% calc(100% - 6.9px), 70.77% calc(100% - 5.4px), 70.0% calc(100% - 4.0px), 69.23% calc(100% - 4px), 68.46% calc(100% - 4px), 67.69% calc(100% - 4px), 66.92% calc(100% - 4px), 66.15% calc(100% - 4px), 65.38% calc(100% - 4px), 64.62% calc(100% - 4px), 63.85% calc(100% - 4.7px), 63.08% calc(100% - 7.2px), 62.31% calc(100% - 10.0px), 61.54% calc(100% - 14.4px), 60.77% calc(100% - 10.3px), 60.0% calc(100% - 7.8px), 59.23% calc(100% - 9.4px), 58.46% calc(100% - 11.2px), 57.69% calc(100% - 10.9px), 56.92% calc(100% - 9.1px), 56.15% calc(100% - 8.3px), 55.38% calc(100% - 6.9px), 54.62% calc(100% - 6.0px), 53.85% calc(100% - 7.5px), 53.08% calc(100% - 9.1px), 52.31% calc(100% - 8.5px), 51.54% calc(100% - 9.7px), 50.77% calc(100% - 13.1px), 50.0% calc(100% - 9.2px), 49.23% calc(100% - 7.8px), 48.46% calc(100% - 10.1px), 47.69% calc(100% - 12.9px), 46.92% calc(100% - 14.8px), 46.15% calc(100% - 18px), 45.38% calc(100% - 18px), 44.62% calc(100% - 17.2px), 43.85% calc(100% - 15.7px), 43.08% calc(100% - 15.1px), 42.31% calc(100% - 8.9px), 41.54% calc(100% - 15.1px), 40.77% calc(100% - 18px), 40.0% calc(100% - 15.7px), 39.23% calc(100% - 17.1px), 38.46% calc(100% - 15.2px), 37.69% calc(100% - 15.8px), 36.92% calc(100% - 15.8px), 36.15% calc(100% - 12.3px), 35.38% calc(100% - 7.2px), 34.62% calc(100% - 17.2px), 33.85% calc(100% - 10.8px), 33.08% calc(100% - 12.2px), 32.31% calc(100% - 10.8px), 31.54% calc(100% - 9.6px), 30.77% calc(100% - 8.3px), 30.0% calc(100% - 9.2px), 29.23% calc(100% - 14.7px), 28.46% calc(100% - 9.3px), 27.69% calc(100% - 7.0px), 26.92% calc(100% - 9.9px), 26.15% calc(100% - 10.2px), 25.38% calc(100% - 11.8px), 24.62% calc(100% - 8.9px), 23.85% calc(100% - 11.3px), 23.08% calc(100% - 13.4px), 22.31% calc(100% - 14.8px), 21.54% calc(100% - 14.4px), 20.77% calc(100% - 12.4px), 20.0% calc(100% - 12.3px), 19.23% calc(100% - 11.7px), 18.46% calc(100% - 10.4px), 17.69% calc(100% - 11.2px), 16.92% calc(100% - 10.3px), 16.15% calc(100% - 8.4px), 15.38% calc(100% - 4.9px), 14.62% calc(100% - 10.4px), 13.85% calc(100% - 5.1px), 13.08% calc(100% - 6.2px), 12.31% calc(100% - 7.2px), 11.54% calc(100% - 7.7px), 10.77% calc(100% - 9.3px), 10.0% calc(100% - 9.0px), 9.23% calc(100% - 10.1px), 8.46% calc(100% - 13.6px), 7.69% calc(100% - 13.8px), 6.92% calc(100% - 13.2px), 6.15% calc(100% - 15.4px), 5.38% calc(100% - 18px), 4.62% calc(100% - 18px), 3.85% calc(100% - 18px), 3.08% calc(100% - 18px), 2.31% calc(100% - 18px), 1.54% calc(100% - 18px), 0.77% calc(100% - 16.2px), 0.0% calc(100% - 18px));
  --tear-hero-rim: polygon(0 0, 100% 0, 100.0% calc(100% - 6.7px), 99.67% calc(100% - 6.9px), 99.33% calc(100% - 7.9px), 99.0% calc(100% - 6.8px), 98.67% calc(100% - 3.6px), 98.33% calc(100% - 3.6px), 98.0% calc(100% - 1.3px), 97.67% 100%, 97.33% calc(100% - 1.2px), 97.0% calc(100% - 4.2px), 96.67% calc(100% - 4.9px), 96.33% calc(100% - 5.4px), 96.0% calc(100% - 6.4px), 95.67% calc(100% - 8.0px), 95.33% calc(100% - 10.4px), 95.0% calc(100% - 8.8px), 94.67% calc(100% - 6.3px), 94.33% calc(100% - 5.5px), 94.0% calc(100% - 2.9px), 93.67% calc(100% - 4.3px), 93.33% calc(100% - 2.0px), 93.0% calc(100% - 2.8px), 92.67% calc(100% - 1.5px), 92.33% calc(100% - 1.1px), 92.0% calc(100% - 3.7px), 91.67% calc(100% - 4.2px), 91.33% calc(100% - 4.5px), 91.0% calc(100% - 4.2px), 90.67% calc(100% - 4.0px), 90.33% calc(100% - 5.2px), 90.0% calc(100% - 6.8px), 89.67% calc(100% - 7.1px), 89.33% calc(100% - 9.7px), 89.0% calc(100% - 9.4px), 88.67% calc(100% - 8.6px), 88.33% calc(100% - 8.3px), 88.0% calc(100% - 10.2px), 87.67% calc(100% - 10.4px), 87.33% calc(100% - 9.5px), 87.0% calc(100% - 9.5px), 86.67% calc(100% - 9.7px), 86.33% calc(100% - 8.8px), 86.0% calc(100% - 6.8px), 85.67% calc(100% - 12.5px), 85.33% calc(100% - 13.5px), 85.0% calc(100% - 12.2px), 84.67% calc(100% - 10.7px), 84.33% calc(100% - 12.4px), 84.0% calc(100% - 11.7px), 83.67% calc(100% - 12.4px), 83.33% calc(100% - 13.8px), 83.0% calc(100% - 13.3px), 82.67% calc(100% - 13.2px), 82.33% calc(100% - 14.5px), 82.0% calc(100% - 16.0px), 81.67% calc(100% - 13.6px), 81.33% calc(100% - 14.9px), 81.0% calc(100% - 15.1px), 80.67% calc(100% - 14.2px), 80.33% calc(100% - 15.4px), 80.0% calc(100% - 14.2px), 79.67% calc(100% - 15.6px), 79.33% calc(100% - 13.9px), 79.0% calc(100% - 14.0px), 78.67% calc(100% - 16.1px), 78.33% calc(100% - 15.2px), 78.0% calc(100% - 14.3px), 77.67% calc(100% - 13.3px), 77.33% calc(100% - 13.7px), 77.0% calc(100% - 14.2px), 76.67% calc(100% - 14.1px), 76.33% calc(100% - 14.9px), 76.0% calc(100% - 13.5px), 75.67% calc(100% - 10.0px), 75.33% calc(100% - 7.8px), 75.0% calc(100% - 10.3px), 74.67% calc(100% - 10.7px), 74.33% calc(100% - 8.8px), 74.0% calc(100% - 5.6px), 73.67% calc(100% - 4.1px), 73.33% calc(100% - 6.8px), 73.0% calc(100% - 8.6px), 72.67% calc(100% - 5.5px), 72.33% calc(100% - 4.3px), 72.0% calc(100% - 6.0px), 71.67% calc(100% - 4.7px), 71.33% calc(100% - 2.6px), 71.0% calc(100% - 2.5px), 70.67% calc(100% - 3.4px), 70.33% calc(100% - 1.9px), 70.0% calc(100% - 1.5px), 69.67% 100%, 69.33% 100%, 69.0% calc(100% - 1.4px), 68.67% calc(100% - 0.7px), 68.33% calc(100% - 0.3px), 68.0% calc(100% - 0.6px), 67.67% calc(100% - 0.5px), 67.33% calc(100% - 2.5px), 67.0% calc(100% - 2.5px), 66.67% calc(100% - 0.7px), 66.33% calc(100% - 0.5px), 66.0% calc(100% - 1.9px), 65.67% 100%, 65.33% 100%, 65.0% calc(100% - 0.6px), 64.67% calc(100% - 0.4px), 64.33% calc(100% - 0.2px), 64.0% calc(100% - 1.7px), 63.67% calc(100% - 0.1px), 63.33% calc(100% - 4.4px), 63.0% calc(100% - 4.7px), 62.67% calc(100% - 6.6px), 62.33% calc(100% - 7.6px), 62.0% calc(100% - 8.6px), 61.67% calc(100% - 8.3px), 61.33% calc(100% - 9.9px), 61.0% calc(100% - 6.4px), 60.67% calc(100% - 5.8px), 60.33% calc(100% - 4.7px), 60.0% calc(100% - 4.9px), 59.67% calc(100% - 4.6px), 59.33% calc(100% - 5.4px), 59.0% calc(100% - 6.3px), 58.67% calc(100% - 8.5px), 58.33% calc(100% - 8.2px), 58.0% calc(100% - 7.9px), 57.67% calc(100% - 6.7px), 57.33% calc(100% - 5.5px), 57.0% calc(100% - 5.1px), 56.67% calc(100% - 3.5px), 56.33% calc(100% - 5.1px), 56.0% calc(100% - 5.4px), 55.67% calc(100% - 4.3px), 55.33% calc(100% - 4.1px), 55.0% calc(100% - 4.9px), 54.67% calc(100% - 4.6px), 54.33% calc(100% - 5.1px), 54.0% calc(100% - 4.9px), 53.67% calc(100% - 5.5px), 53.33% calc(100% - 3.8px), 53.0% calc(100% - 5.6px), 52.67% calc(100% - 2.8px), 52.33% calc(100% - 2.8px), 52.0% calc(100% - 4.2px), 51.67% calc(100% - 5.1px), 51.33% calc(100% - 7.8px), 51.0% calc(100% - 9.2px), 50.67% calc(100% - 9.4px), 50.33% calc(100% - 7.3px), 50.0% calc(100% - 6.3px), 49.67% calc(100% - 5.1px), 49.33% calc(100% - 2.9px), 49.0% calc(100% - 2.9px), 48.67% calc(100% - 5.0px), 48.33% calc(100% - 7.5px), 48.0% calc(100% - 8.4px), 47.67% calc(100% - 10.5px), 47.33% calc(100% - 11.1px), 47.0% calc(100% - 12.3px), 46.67% calc(100% - 14.4px), 46.33% calc(100% - 14.6px), 46.0% calc(100% - 15.6px), 45.67% calc(100% - 14.2px), 45.33% calc(100% - 15.1px), 45.0% calc(100% - 13.9px), 44.67% calc(100% - 12.3px), 44.33% calc(100% - 12.1px), 44.0% calc(100% - 11.9px), 43.67% calc(100% - 11.5px), 43.33% calc(100% - 10.9px), 43.0% calc(100% - 11.7px), 42.67% calc(100% - 9.0px), 42.33% calc(100% - 4.5px), 42.0% calc(100% - 7.8px), 41.67% calc(100% - 9.6px), 41.33% calc(100% - 11.8px), 41.0% calc(100% - 14.2px), 40.67% calc(100% - 14.6px), 40.33% calc(100% - 14.1px), 40.0% calc(100% - 11.5px), 39.67% calc(100% - 11.8px), 39.33% calc(100% - 12.9px), 39.0% calc(100% - 11.3px), 38.67% calc(100% - 10.6px), 38.33% calc(100% - 9.3px), 38.0% calc(100% - 10.0px), 37.67% calc(100% - 10.8px), 37.33% calc(100% - 11.5px), 37.0% calc(100% - 10.3px), 36.67% calc(100% - 11.1px), 36.33% calc(100% - 9.9px), 36.0% calc(100% - 8.4px), 35.67% calc(100% - 5.0px), 35.33% calc(100% - 3.8px), 35.0% calc(100% - 8.3px), 34.67% calc(100% - 13.7px), 34.33% calc(100% - 10.7px), 34.0% calc(100% - 7.2px), 33.67% calc(100% - 9.4px), 33.33% calc(100% - 8.0px), 33.0% calc(100% - 9.7px), 32.67% calc(100% - 9.6px), 32.33% calc(100% - 8.5px), 32.0% calc(100% - 6.4px), 31.67% calc(100% - 6.9px), 31.33% calc(100% - 5.5px), 31.0% calc(100% - 3.1px), 30.67% calc(100% - 2.7px), 30.33% calc(100% - 6.5px), 30.0% calc(100% - 5.6px), 29.67% calc(100% - 8.8px), 29.33% calc(100% - 10.8px), 29.0% calc(100% - 10.3px), 28.67% calc(100% - 7.6px), 28.33% calc(100% - 4.6px), 28.0% calc(100% - 3.7px), 27.67% calc(100% - 3.1px), 27.33% calc(100% - 4.5px), 27.0% calc(100% - 7.0px), 26.67% calc(100% - 6.5px), 26.33% calc(100% - 6.1px), 26.0% calc(100% - 6.7px), 25.67% calc(100% - 7.1px), 25.33% calc(100% - 7.0px), 25.0% calc(100% - 7.0px), 24.67% calc(100% - 4.8px), 24.33% calc(100% - 6.8px), 24.0% calc(100% - 7.1px), 23.67% calc(100% - 8.2px), 23.33% calc(100% - 9.5px), 23.0% calc(100% - 11.1px), 22.67% calc(100% - 12.7px), 22.33% calc(100% - 13.3px), 22.0% calc(100% - 13.2px), 21.67% calc(100% - 13.0px), 21.33% calc(100% - 12.4px), 21.0% calc(100% - 11.5px), 20.67% calc(100% - 10.6px), 20.33% calc(100% - 9.6px), 20.0% calc(100% - 8.3px), 19.67% calc(100% - 8.8px), 19.33% calc(100% - 7.0px), 19.0% calc(100% - 7.5px), 18.67% calc(100% - 7.2px), 18.33% calc(100% - 6.5px), 18.0% calc(100% - 6.3px), 17.67% calc(100% - 7.3px), 17.33% calc(100% - 7.2px), 17.0% calc(100% - 7.3px), 16.67% calc(100% - 6.1px), 16.33% calc(100% - 4.6px), 16.0% calc(100% - 2.7px), 15.67% 100%, 15.33% calc(100% - 0.4px), 15.0% calc(100% - 4.2px), 14.67% calc(100% - 6.0px), 14.33% calc(100% - 6.0px), 14.0% calc(100% - 2.6px), 13.67% calc(100% - 0.8px), 13.33% calc(100% - 0.7px), 13.0% calc(100% - 2.7px), 12.67% calc(100% - 1.9px), 12.33% calc(100% - 3.4px), 12.0% calc(100% - 2.5px), 11.67% calc(100% - 3.9px), 11.33% calc(100% - 4.1px), 11.0% calc(100% - 4.5px), 10.67% calc(100% - 5.7px), 10.33% calc(100% - 6.6px), 10.0% calc(100% - 5.7px), 9.67% calc(100% - 7.1px), 9.33% calc(100% - 5.5px), 9.0% calc(100% - 9.6px), 8.67% calc(100% - 8.8px), 8.33% calc(100% - 10.8px), 8.0% calc(100% - 11.3px), 7.67% calc(100% - 10.5px), 7.33% calc(100% - 10.9px), 7.0% calc(100% - 10.1px), 6.67% calc(100% - 9.8px), 6.33% calc(100% - 12.5px), 6.0% calc(100% - 13.6px), 5.67% calc(100% - 13.2px), 5.33% calc(100% - 16.5px), 5.0% calc(100% - 15.1px), 4.67% calc(100% - 14.5px), 4.33% calc(100% - 15.0px), 4.0% calc(100% - 14.4px), 3.67% calc(100% - 15.3px), 3.33% calc(100% - 15.1px), 3.0% calc(100% - 15.5px), 2.67% calc(100% - 15.4px), 2.33% calc(100% - 15.4px), 2.0% calc(100% - 13.4px), 1.67% calc(100% - 14.1px), 1.33% calc(100% - 12.8px), 1.0% calc(100% - 12.3px), 0.67% calc(100% - 13.7px), 0.33% calc(100% - 12.7px), 0.0% calc(100% - 14.8px));
  --tear-footer: polygon(0.0% 11.5px, 0.77% 11.9px, 1.54% 10.3px, 2.31% 17.6px, 3.08% 10.8px, 3.85% 12.0px, 4.62% 12.1px, 5.38% 11.4px, 6.15% 11.0px, 6.92% 13.0px, 7.69% 12.9px, 8.46% 8.0px, 9.23% 13.8px, 10.0% 13.3px, 10.77% 9.2px, 11.54% 12.6px, 12.31% 11.1px, 13.08% 8.4px, 13.85% 17.2px, 14.62% 8.3px, 15.38% 7.3px, 16.15% 7.5px, 16.92% 8.5px, 17.69% 7.0px, 18.46% 5.9px, 19.23% 8.1px, 20.0% 4px, 20.77% 6.6px, 21.54% 6.9px, 22.31% 6.5px, 23.08% 7.0px, 23.85% 5.8px, 24.62% 6.2px, 25.38% 7.6px, 26.15% 4px, 26.92% 8.3px, 27.69% 10.8px, 28.46% 10.6px, 29.23% 10.1px, 30.0% 11.2px, 30.77% 13.9px, 31.54% 14.8px, 32.31% 14.6px, 33.08% 13.6px, 33.85% 17.9px, 34.62% 12.5px, 35.38% 6.7px, 36.15% 14.9px, 36.92% 14.1px, 37.69% 13.2px, 38.46% 13.7px, 39.23% 10.3px, 40.0% 8.0px, 40.77% 7.4px, 41.54% 4px, 42.31% 17.4px, 43.08% 13.8px, 43.85% 12.9px, 44.62% 12.4px, 45.38% 16.6px, 46.15% 9.8px, 46.92% 18px, 47.69% 16.6px, 48.46% 15.6px, 49.23% 16.8px, 50.0% 18px, 50.77% 11.7px, 51.54% 15.9px, 52.31% 13.8px, 53.08% 14.6px, 53.85% 15.8px, 54.62% 14.2px, 55.38% 14.4px, 56.15% 15.1px, 56.92% 14.1px, 57.69% 10.9px, 58.46% 11.7px, 59.23% 11.3px, 60.0% 9.6px, 60.77% 10.9px, 61.54% 9.1px, 62.31% 11.2px, 63.08% 8.1px, 63.85% 8.4px, 64.62% 11.3px, 65.38% 7.5px, 66.15% 11.5px, 66.92% 8.2px, 67.69% 7.2px, 68.46% 6.8px, 69.23% 6.2px, 70.0% 7.5px, 70.77% 7.5px, 71.54% 7.3px, 72.31% 6.5px, 73.08% 6.0px, 73.85% 4.3px, 74.62% 4px, 75.38% 4px, 76.15% 5.6px, 76.92% 4.5px, 77.69% 6.2px, 78.46% 7.2px, 79.23% 8.5px, 80.0% 9.7px, 80.77% 10.7px, 81.54% 9.5px, 82.31% 12.2px, 83.08% 13.8px, 83.85% 15.9px, 84.62% 11.3px, 85.38% 15.9px, 86.15% 17.1px, 86.92% 17.0px, 87.69% 16.5px, 88.46% 16.4px, 89.23% 15.2px, 90.0% 16.0px, 90.77% 16.8px, 91.54% 18.0px, 92.31% 17.7px, 93.08% 16.9px, 93.85% 15.9px, 94.62% 18px, 95.38% 13.8px, 96.15% 16.8px, 96.92% 12.1px, 97.69% 11.4px, 98.46% 12.1px, 99.23% 10.5px, 100.0% 7.2px, 100% 100%, 0 100%);
  --tear-footer-rim: polygon(0.0% 8.0px, 0.33% 8.3px, 0.67% 10.3px, 1.0% 9.9px, 1.33% 6.9px, 1.67% 9.7px, 2.0% 12.1px, 2.33% 14.3px, 2.67% 11.4px, 3.0% 6.9px, 3.33% 6.9px, 3.67% 9.4px, 4.0% 10.2px, 4.33% 8.2px, 4.67% 7.7px, 5.0% 7.2px, 5.33% 8.1px, 5.67% 5.9px, 6.0% 5.7px, 6.33% 4.4px, 6.67% 7.0px, 7.0% 9.1px, 7.33% 9.0px, 7.67% 8.3px, 8.0% 6.3px, 8.33% 4.7px, 8.67% 5.4px, 9.0% 8.5px, 9.33% 9.1px, 9.67% 11.4px, 10.0% 11.1px, 10.33% 8.6px, 10.67% 8.2px, 11.0% 8.2px, 11.33% 8.5px, 11.67% 6.5px, 12.0% 6.0px, 12.33% 6.7px, 12.67% 7.6px, 13.0% 4.9px, 13.33% 8.8px, 13.67% 11.7px, 14.0% 12.0px, 14.33% 7.0px, 14.67% 5.4px, 15.0% 4.1px, 15.33% 4.6px, 15.67% 4.1px, 16.0% 5.1px, 16.33% 6.2px, 16.67% 5.7px, 17.0% 6.1px, 17.33% 5.7px, 17.67% 5.4px, 18.0% 4.0px, 18.33% 2.0px, 18.67% 1.8px, 19.0% 2.8px, 19.33% 5.7px, 19.67% 3.7px, 20.0% 1.2px, 20.33% 0.9px, 20.67% 0, 21.0% 2.0px, 21.33% 3.5px, 21.67% 3.8px, 22.0% 3.7px, 22.33% 1.8px, 22.67% 2.4px, 23.0% 3.5px, 23.33% 1.8px, 23.67% 1.0px, 24.0% 2.0px, 24.33% 1.4px, 24.67% 3.2px, 25.0% 3.9px, 25.33% 4.2px, 25.67% 2.2px, 26.0% 1.2px, 26.33% 0.1px, 26.67% 2.3px, 27.0% 3.4px, 27.33% 6.0px, 27.67% 6.4px, 28.0% 7.1px, 28.33% 5.9px, 28.67% 6.5px, 29.0% 5.6px, 29.33% 4.6px, 29.67% 6.0px, 30.0% 5.3px, 30.33% 6.9px, 30.67% 8.4px, 31.0% 11.7px, 31.33% 10.6px, 31.67% 12.3px, 32.0% 12.2px, 32.33% 12.2px, 32.67% 11.6px, 33.0% 10.4px, 33.33% 11.4px, 33.67% 13.7px, 34.0% 14.3px, 34.33% 11.7px, 34.67% 9.3px, 35.0% 6.8px, 35.33% 3.7px, 35.67% 6.1px, 36.0% 11.0px, 36.33% 10.1px, 36.67% 11.0px, 37.0% 8.5px, 37.33% 9.1px, 37.67% 10.0px, 38.0% 9.8px, 38.33% 9.2px, 38.67% 8.4px, 39.0% 8.0px, 39.33% 6.9px, 39.67% 5.5px, 40.0% 2.8px, 40.33% 4.0px, 40.67% 4.5px, 41.0% 2.4px, 41.33% 1.2px, 41.67% 2.1px, 42.0% 9.9px, 42.33% 14.3px, 42.67% 10.5px, 43.0% 9.4px, 43.33% 9.0px, 43.67% 10.0px, 44.0% 8.9px, 44.33% 9.3px, 44.67% 10.4px, 45.0% 10.2px, 45.33% 12.3px, 45.67% 9.7px, 46.0% 7.4px, 46.33% 6.5px, 46.67% 11.8px, 47.0% 15.3px, 47.33% 13.0px, 47.67% 12.9px, 48.0% 12.4px, 48.33% 14.1px, 48.67% 12.9px, 49.0% 14.3px, 49.33% 14.4px, 49.67% 14.2px, 50.0% 15.6px, 50.33% 13.2px, 50.67% 10.0px, 51.0% 10.3px, 51.33% 11.0px, 51.67% 11.5px, 52.0% 11.2px, 52.33% 10.2px, 52.67% 10.9px, 53.0% 12.1px, 53.33% 13.1px, 53.67% 10.5px, 54.0% 12.2px, 54.33% 11.0px, 54.67% 10.7px, 55.0% 10.9px, 55.33% 12.4px, 55.67% 11.4px, 56.0% 12.3px, 56.33% 11.0px, 56.67% 12.1px, 57.0% 10.6px, 57.33% 6.8px, 57.67% 7.8px, 58.0% 6.5px, 58.33% 6.8px, 58.67% 8.5px, 59.0% 7.2px, 59.33% 7.4px, 59.67% 6.7px, 60.0% 6.6px, 60.33% 6.8px, 60.67% 6.7px, 61.0% 6.0px, 61.33% 5.8px, 61.67% 6.3px, 62.0% 6.3px, 62.33% 8.7px, 62.67% 6.7px, 63.0% 4.0px, 63.33% 5.6px, 63.67% 5.3px, 64.0% 6.6px, 64.33% 5.7px, 64.67% 8.2px, 65.0% 6.3px, 65.33% 3.9px, 65.67% 5.6px, 66.0% 7.7px, 66.33% 7.3px, 66.67% 4.7px, 67.0% 4.8px, 67.33% 5.9px, 67.67% 2.6px, 68.0% 1.7px, 68.33% 2.3px, 68.67% 1.5px, 69.0% 1.8px, 69.33% 2.0px, 69.67% 3.7px, 70.0% 3.6px, 70.33% 3.7px, 70.67% 3.0px, 71.0% 3.2px, 71.33% 2.5px, 71.67% 3.9px, 72.0% 3.7px, 72.33% 4.3px, 72.67% 4.1px, 73.0% 4.0px, 73.33% 1.0px, 73.67% 2.6px, 74.0% 1.9px, 74.33% 1.6px, 74.67% 2.2px, 75.0% 1.8px, 75.33% 0.4px, 75.67% 2.0px, 76.0% 2.7px, 76.33% 1.9px, 76.67% 2.1px, 77.0% 0, 77.33% 1.8px, 77.67% 1.4px, 78.0% 4.9px, 78.33% 3.5px, 78.67% 4.0px, 79.0% 4.8px, 79.33% 5.3px, 79.67% 6.2px, 80.0% 7.6px, 80.33% 6.9px, 80.67% 6.8px, 81.0% 6.4px, 81.33% 5.7px, 81.67% 4.9px, 82.0% 6.5px, 82.33% 10.5px, 82.67% 9.1px, 83.0% 10.4px, 83.33% 12.2px, 83.67% 13.7px, 84.0% 11.4px, 84.33% 10.0px, 84.67% 8.9px, 85.0% 11.3px, 85.33% 12.9px, 85.67% 13.1px, 86.0% 14.6px, 86.33% 12.3px, 86.67% 13.3px, 87.0% 12.4px, 87.33% 13.0px, 87.67% 11.9px, 88.0% 10.6px, 88.33% 12.9px, 88.67% 11.3px, 89.0% 10.9px, 89.33% 11.2px, 89.67% 10.5px, 90.0% 11.5px, 90.33% 12.7px, 90.67% 13.2px, 91.0% 12.0px, 91.33% 14.1px, 91.67% 15.3px, 92.0% 14.4px, 92.33% 13.7px, 92.67% 13.1px, 93.0% 14.1px, 93.33% 12.9px, 93.67% 12.8px, 94.0% 12.1px, 94.33% 13.3px, 94.67% 12.6px, 95.0% 12.1px, 95.33% 11.2px, 95.67% 10.6px, 96.0% 13.6px, 96.33% 12.7px, 96.67% 12.2px, 97.0% 9.9px, 97.33% 9.2px, 97.67% 8.4px, 98.0% 8.8px, 98.33% 10.0px, 98.67% 7.2px, 99.0% 5.9px, 99.33% 6.7px, 99.67% 5.8px, 100.0% 3.8px, 100% 100%, 0 100%);
  --white: 100% 0 0;

  /* Links im Inhalt: Bootstrap erwartet RGB-Tripel. Entspricht lch(40% 45 130) (Kontrast 6,5:1 auf Weiß) bzw. lch(30% 40 130) beim Hover */
  --bs-link-color-rgb: 55, 106, 32;
  --bs-link-hover-color-rgb: 36, 80, 16;
  --on-green: 15% 25 130; /* dunkles Grün: Kontrast ≥ 5,6:1 auf Hero und Footer */

  --outline-green: 30% 40 130; /* Kontur der Hero-Schrift: grüner als --on-green */

  --glow-soft: 0 0 8px lch(var(--glow-warm) / 0.3), 0 0 20px lch(var(--glow-warm-deep) / 0.3);
}

html {
    font-size: 11pt;
}

address {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
    font-style: normal;
}

pre {
  background-color: rgb(245, 245, 245);
  border: 1px solid rgb(200, 200, 200);
  border-radius: 0.25em;
  padding: 0.75em;
}

.center-cropped {
  object-fit: scale-down; /* Do not scale the image */
  object-position: center; /* Center the image within the element */
  height: 7em; 
  width: 7em;
}

.center-cropped-lg {
  object-fit: scale-down; /* Do not scale the image */
  object-position: center; /* Center the image within the element */
  height: 12em; 
  width: 12em;
}

.scale-img {
  /* object-fit: scale-down; Do not scale the image */
  /* object-position: center; Center the image within the element */
  object-fit: scale-down;
  max-height: 100%; 
  max-width: 100%;
  height: auto;
}

.blog-post h1,
.blog-post h2,
.blog-post h3,
.blog-post h4,
.blog-post h5,
.blog-post h6 {
  font-family: 'Sniglet', system-ui, sans-serif;
}

.badge {
  font-family: 'Sniglet', system-ui, sans-serif;
  font-size: 0.85rem;
}

.page-notizen-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-flow: row;
  gap: 0.5rem;
}

.posts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}

.posts-grid-item {
  display: grid;
  grid-template-columns: 6rem 1fr;
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "hero title"
    "hero date"
    "hero tags";
  row-gap: 0.5rem;
  column-gap: 1rem;

  align-items: center;

  border: 1px solid rgba(0,0,0,0.125);
  border-radius: 0.25rem;

  padding: 1rem;
}

.posts-grid-item,
.posts-grid-item:hover {
  text-decoration: none;
}

.posts-grid-item > .post-hero {
  grid-area: hero;
}

.posts-grid-item > .post-title {
  grid-area: title;
  font-family: 'Sniglet', system-ui, sans-serif;

  font-size: 1.25rem;
  font-weight: bold;

  text-wrap: balance;
}

.posts-grid-item > .post-date {
  grid-area: date;
}

.posts-grid-item > .post-tags {
  grid-area: tags;
  align-self: flex-start;

  text-wrap: balance;
}

@font-face {
  font-family: 'Sniglet';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/sniglet-latin-400.woff2') format('woff2');
}

.hero {
  background-color: lch(var(--green));
  /* Vignette: Rand etwas dunkler wie bei einer Linse */
  background-image: radial-gradient(ellipse at center, transparent 45%, lch(var(--green-dark)) 100%);
  height: 220px;
  clip-path: var(--tear-hero);
  overflow: hidden;
  position: relative;
}

/* Filmkorn: feTurbulence-Rauschen als Data-URI (CSP erlaubt img-src data:) */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 300px 300px;
  mix-blend-mode: overlay;
  opacity: 0.3;
}

.hero-link {
  display: block;
  height: 100%;
}

.hero picture {
  display: block;
  height: 100%;
}

.hero-img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left bottom;
  margin-left: 15%;
  /* Glow folgt der freigestellten Kontur der Maus */
  filter: drop-shadow(0 0 10px lch(var(--glow-warm) / 0.55)) drop-shadow(0 0 28px lch(var(--glow-warm-deep) / 0.35));
}

.hero-text {
  font-family: 'Sniglet', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(1.75rem, 5vw, 3rem);
  line-height: 1.1;
  margin: 0;
}

/* Links auf Grün (Hero und Footer): keine Unterstreichung, beim Hover leichter Glow */
.hero-text a,
.hero-subtext a,
.footer-bar a,
.footer-bar .btn-link {
  color: lch(var(--on-green));
  text-decoration: none;
  transition: text-shadow 0.2s ease;
}

.hero-text a:hover,
.hero-text a:focus-visible,
.hero-subtext a:hover,
.hero-subtext a:focus-visible,
.footer-bar a:hover,
.footer-bar a:focus-visible,
.footer-bar .btn-link:hover,
.footer-bar .btn-link:focus-visible {
  text-shadow: var(--glow-soft);
}

.footer-bar a:hover,
.footer-bar a:focus-visible,
.footer-bar .btn-link:hover,
.footer-bar .btn-link:focus-visible {
  text-decoration: underline;
}

/* Hero-Schrift: weiß mit dunkelgrüner Kontur (nur außen, dank paint-order) */
.hero-text,
.hero-subtext {
  color: lch(var(--white));
  -webkit-text-stroke: var(--hero-outline) lch(var(--outline-green));
  paint-order: stroke fill;
}

.hero-text a,
.hero-subtext a {
  color: lch(var(--white));
}

.hero-text {
  --hero-outline: 0.14em;
  letter-spacing: 0.15em;
}

.hero-subtext {
  --hero-outline: 0.18em;
  letter-spacing: 0.14em;
  font-family: 'Sniglet', system-ui, sans-serif;
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  margin: 0.25rem 0 0;
}

@media (max-width: 575.98px) {
  .hero { height: 160px; }
  .hero-img { margin-left: 0; }
}

.hashtag-filter {
  gap: 0.25rem;
}

.hashtag-filter-btn {
  --bs-btn-font-family: 'Sniglet', system-ui, sans-serif;
  font-weight: 700;
}

@media (min-width: 992px) {
  .posts-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .posts-grid-item {
    grid-template-columns: 8rem 1fr;
  }
}
.consent-banner {
  position: fixed;
  bottom: 1rem;
  left: 0;
  right: 0;
  margin-inline: auto;
  width: calc(100% - 2rem);
  max-width: 1320px; /* wie .container (xxl) */
  z-index: 1030;
  /* Lavalampe: weiche, versetzte Farbblasen in Schattierungen des Hero-Grüns, langsam in Bewegung */
  background-color: lch(var(--green-pale));
  background-image:
    radial-gradient(circle at 20% 30%, lch(85% 55 125.7 / 0.5) 0, transparent 38%),
    radial-gradient(circle at 75% 25%, lch(80% 50 126.8 / 0.35) 0, transparent 35%),
    radial-gradient(circle at 55% 85%, lch(86% 52 125.7 / 0.45) 0, transparent 40%),
    radial-gradient(circle at 90% 80%, lch(92% 35 125.7 / 0.6) 0, transparent 35%);
  background-size: 200% 200%;
  animation: lava 24s ease-in-out infinite alternate;
  /* margin: 1rem; */
  padding: 1.5rem 2rem; /* vertikal 1.5rem, horizontal 2rem */
  border-radius: 1rem;
  /* box-shadow: 0 -0.25rem 1rem rgba(0,0,0,0.1); */
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

@keyframes lava {
  0% { background-position: 0% 0%; }
  50% { background-position: 100% 40%; }
  100% { background-position: 30% 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .consent-banner { animation: none; }
}

@media (max-width: 1399.98px) { .consent-banner { max-width: 1140px; } }
@media (max-width: 1199.98px) { .consent-banner { max-width: 960px; } }
@media (max-width: 991.98px) { .consent-banner { max-width: 720px; } }
@media (max-width: 767.98px) { .consent-banner { max-width: 540px; } }

/* Footer: gleiche Farbe wie der Vignettenrand im Hero */
.footer-bar {
  background-color: lch(var(--green-dark));
  clip-path: var(--tear-footer);
  color: lch(var(--on-green));
  font-family: 'Sniglet', system-ui, sans-serif;
  letter-spacing: 0.08em;
}

.footer-bar .btn-link {
  --bs-btn-font-family: inherit;
}

@media (min-width: 768px) {
  .footer-bar .row {
    max-width: 52rem;
    margin-inline: auto;
  }
}

.footer-hosting-logo {
  height: 2.25rem;
  width: auto;
  vertical-align: middle;
  /* Logo ist weiß: für ausreichend Kontrast auf dem Grün einfärben (≈ --on-green) */
  filter: brightness(0) opacity(0.85);
  transition: filter 0.2s ease;
}

.footer-hosting:hover .footer-hosting-logo,
.footer-hosting:focus-visible .footer-hosting-logo {
  filter: brightness(0) opacity(0.85) drop-shadow(0 0 8px lch(var(--glow-warm) / 0.3)) drop-shadow(0 0 20px lch(var(--glow-warm-deep) / 0.3));
}

/* Hover: Logo dreht sich einmal um die vertikale Achse. Die Transition steht nur im Hover-Zustand,
   damit es beim Verlassen ohne Rückdrehung zurückspringt (360° sieht aus wie 0°). */
@media (prefers-reduced-motion: no-preference) {
  .footer-hosting:hover .footer-hosting-logo,
  .footer-hosting:focus-visible .footer-hosting-logo {
    transform: perspective(600px) rotateY(360deg);
    transition: filter 0.2s ease, transform 2s ease-in-out;
  }
}

/* Etwas luftigerer Fließtext im Hauptbereich */
main {
  line-height: 1.7;
}


/* Abriss-Übergänge: Hero und Footer liegen wie Papier über dem Inhalt (Schatten per filter am Wrapper,
   weil clip-path einen eigenen box-shadow abschneiden würde) */
.hero-wrap,
.footer-wrap {
  position: relative;
}

.hero-wrap {
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.3));
}

.footer-wrap {
  filter: drop-shadow(0 -3px 5px rgba(0, 0, 0, 0.25));
}

.hero-wrap::before,
.footer-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: lch(var(--paper));
}

.hero-wrap::before {
  clip-path: var(--tear-hero-rim);
}

.footer-wrap::before {
  clip-path: var(--tear-footer-rim);
}

.footer-bar {
  position: relative;
}