/* ========================================================================= theme.css -- Marken-Ebene: Schrift, Farbe, Rhythmus. Alles, was diese Site optisch ausmacht, steht hier. styles.css liest nur diese Tokens und bleibt unangetastet. Auftrag: dezent, hauptsaechlich Gruen und Weiss, klassische Schrift, minimalistisch mit viel Liebe zum Detail. ========================================================================= */ /* --- Schriften, self-hosted (kein Google-CDN, siehe fonts/LIESMICH.txt) --- */ @font-face { font-family: 'EB Garamond'; src: url('/fonts/ebgaramond-latin.woff2') format('woff2-variations'), url('/fonts/ebgaramond-latin.woff2') format('woff2'); font-weight: 400 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'EB Garamond'; src: url('/fonts/ebgaramond-latin-italic.woff2') format('woff2-variations'), url('/fonts/ebgaramond-latin-italic.woff2') format('woff2'); font-weight: 400 800; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Source Sans 3'; src: url('/fonts/sourcesans3-latin.woff2') format('woff2-variations'), url('/fonts/sourcesans3-latin.woff2') format('woff2'); font-weight: 200 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* --- Gruen: die einzige Markenfarbe, in gedeckten Abstufungen --------- Kontrast gegen Weiss geprueft: --green-700 9.7:1 Text, Links, Buttons --green-400 3.2:1 nur fuer grosse Zeichen und Dekor --muted 6.1:1 Sekundaertext -------------------------------------------------------------------- */ --green-900: #10261A; --green-800: #16311F; --green-700: #1E4D31; --green-600: #2A6440; --green-400: #6E9A78; --green-100: #DCE6DD; --green-50: #F2F6F1; /* --- Weiss und die zwei ruhigen Abstufungen darunter --- */ --paper: #FFFFFF; --paper-2: #F8F9F6; /* --- Text und Linien --- */ --ink: #16311F; --muted: #55665B; --line: #E1E6DF; --line-strong: #C7D1C6; /* --- Sand: der einzige warme Ton, sehr sparsam (Ziffern, Haarlinien) --- */ --sand: #B9A77E; /* nur Haarlinien und Dekor, nie Text */ --sand-ink: #7A6B45; /* 5.2:1 auf Weiss, 4.9:1 auf --paper-2: fuer lesbare Zeichen */ /* --- Schrift --- */ --font-display: 'EB Garamond', 'Iowan Old Style', Palatino, Georgia, 'Times New Roman', serif; --font-text: 'Source Sans 3', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* --- Fluide Skala --- */ --t--2: clamp(0.72rem, 0.70rem + 0.08vw, 0.78rem); --t--1: clamp(0.83rem, 0.80rem + 0.13vw, 0.91rem); --t-0: clamp(1.00rem, 0.96rem + 0.20vw, 1.09rem); --t-1: clamp(1.15rem, 1.06rem + 0.40vw, 1.40rem); --t-2: clamp(1.50rem, 1.26rem + 1.00vw, 2.15rem); --t-3: clamp(2.00rem, 1.52rem + 2.05vw, 3.10rem); --t-4: clamp(2.55rem, 1.62rem + 3.95vw, 4.60rem); /* --- Rhythmus --- */ --maxw: 74rem; /* aeussere Begrenzung */ --measure: 36rem; /* Lesespalte, rund 65 Zeichen */ --gutter: clamp(1.25rem, 4.5vw, 3.25rem); --section: clamp(4.5rem, 9vw, 7.5rem); /* Bewusst fast eckig. Runde Ecken wirken schnell nach Baukasten. */ --radius: 2px; --radius-lg: 3px; --ring: 0 0 0 3px rgba(30, 77, 49, 0.30); /* Ein einziger, sehr flacher Schatten. Sonst arbeiten wir mit Haarlinien. */ --lift: 0 1px 2px rgba(16, 38, 26, 0.04), 0 12px 28px -20px rgba(16, 38, 26, 0.35); /* --- Gruen-Karte ---------------------------------------------------- Die Topografie einer Gruen-Karte, wie sie im Green Book steht: das Gefaelle, das ein Coach vor dem Putt liest. Gleichzeitig zeigt sie, wie ein Platz gebaut ist. Deshalb dieses Muster und kein Streugut. Die Kachel ist aus einem Hoehenfeld mit ganzzahligen Frequenzen gerechnet und schliesst dadurch in beide Richtungen nahtlos an sich selbst an. Sie liegt als MASKE, nicht als Bild: so bleibt die Farbe eine gewoehnliche CSS-Variable und der dunkle Fussbereich muss nur eine Zeile ueberschreiben. In ein SVG als data-URI vererben sich keine Custom Properties. Zur Staerke, nachgerechnet statt geschaetzt: Engpass ist nicht der Fliesstext, sondern --muted. Liegt ein Buchstabe genau auf einer Linie, gilt 0.13 -> --muted 4.87:1 auf Weiss, haelt AA 0.20 -> --muted 4.32:1, faellt durch Deshalb flaechig hoechstens 0.13. In den Aussenraendern, wo nie Text steht, legt sich eine zweite Ebene darueber und verdoppelt die Zeichnung dort auf rund 0.24. -------------------------------------------------------------------- */ --pattern-line: rgba(30, 77, 49, 0.13); --pattern-line-dark: rgba(255, 255, 255, 0.15); --kontur: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27900%27 height=%27760%27 viewBox=%270 0 900 760%27%3E%3Cg fill=%27none%27 stroke=%27black%27 stroke-width=%271%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M543.6 253.3L525 257L510 262.1L497.5 268.5L485 278.6L477.1 288.8L472 298.9L467.5 314.1L465.7 329.3L466.4 349.6L470 370.7L476 390.1L485.6 410.4L496.7 425.6L510 437.2L520 442.2L535 444.9L550 442.6L560 438.5L570 432.7L590 417L610 397.6L640.3 364.8L664.7 334.4L676.7 314.1L680.3 304L681.6 293.9L679.9 283.7L673.6 273.6L667.8 268.5L660 263.8L645.8 258.4L625 254L600 251.5L570 251.1L543.6 253.3%27/%3E%3Cpath d=%27M630.1 207.7L535 218.1L510 222.6L490 228.3L470 237.4L455.5 248.3L445 261L438.4 273.6L434.9 283.7L431.6 298.9L430.1 314.1L430 334.4L434.4 374.9L444.1 415.5L455 443.9L470 469.4L480 481.4L490 490.7L500 497.7L510 502.9L520 506.3L530 507.9L545 506.9L560 501.5L575 491.5L595 472L635.5 425.6L660 400L680 381.3L739.7 329.3L752.7 314.1L761.5 298.9L764.9 288.8L766.6 278.7L766.1 263.5L763.8 253.3L759.7 243.2L753.5 233.1L745 223.4L738.2 217.9L730 212.8L720 208.6L700 204.3L675 203.7L630.1 207.7%27/%3E%3Cpath d=%27M690.2 152L630 169.6L600 177.2L570 183L500 193.9L465 202.7L445 211.6L430 222.3L420 233.5L411.6 248.3L406.3 263.5L402.6 283.7L401.2 304L401.6 329.3L403.9 359.7L408.5 395.2L414.3 425.6L420 447.3L426.6 466.1L433.4 481.3L442.1 496.5L453.2 511.7L465 524.4L475 533.3L490 544L505 552.2L525 559.5L545 562.3L555 561.5L565 558.9L580 550.7L590 541.7L600 529.7L642.6 466.1L658.6 445.9L672.4 430.7L690 414L710 397.7L765.9 359.7L785 345.1L800.2 329.3L809.6 314.1L815 298.9L817.4 283.7L817.4 268.5L815.6 253.3L810.4 233.1L804.7 217.9L797.1 202.7L787.2 187.5L778.8 177.3L768.1 167.2L755 158.2L745 153.5L735 150.4L720 148.6L705 149.3L690.2 152%27/%3E%3Cpath d=%27M698.2 91.2L680 100.2L626.7 131.7L610 139.5L590.3 146.9L550 157.6L460 173.1L429.9 182.4L411.4 192.5L399.8 202.7L390 215.8L382.4 233.1L377.6 253.3L375.3 278.7L375.4 309.1L377.8 349.6L382.8 405.3L387.6 440.8L392.9 466.1L401.3 491.5L410 509.7L421 526.9L435 543.8L454.9 562.4L475 577.3L495 589.4L520 601.5L540 608.6L560 613L570 613.6L580 612.8L595 607.6L605 599.9L611 592.8L620 578.2L644.7 521.9L657.6 496.5L670.5 476.3L686.5 456L707 435.7L730 417.9L755 402.3L803.9 374.9L824.9 359.7L835 349.6L842.4 339.5L847.7 329.3L851.4 319.2L854.5 304L855.5 283.7L853.9 263.5L849.3 238.1L842.2 212.8L832.7 187.5L823.1 167.2L810 145.3L799.9 131.7L785 115.7L770 103.3L755 94.3L740 88.6L725 86.2L710 87.6L698.2 91.2%27/%3E%3Cpath d=%27M683.8 0L675 3.5L668.6 10.1L643.7 55.7L633.5 70.9L625.3 81.1L609.7 96.3L587.8 111.5L565 122.3L540 130.4L510 136.9L450 145.8L425 150.7L404.4 157.1L384.9 167.2L370 180.8L360 196.9L353.3 217.9L350.4 238.1L349.9 283.7L359.2 456L362.2 476.3L367 496.5L374.8 516.8L382.9 532L397.6 552.3L417.2 572.5L442 592.8L470 611.8L510 635.3L560 660.9L595 676.3L610 681.4L620 683.5L630 683.4L635 681.7L640 677.9L645.4 668.8L650 652.5L659.9 582.7L667.8 547.2L674.6 526.9L681.3 511.7L689.6 496.5L700 481.3L710 469.4L723.6 456L750 436.3L775 422.3L835 394.1L850 385.1L860 377.5L872 364.8L880 351.5L885 337.5L888.2 319.2L888.7 298.9L886.6 273.6L881.5 243.2L875 215L865.5 182.4L856.2 157.1L845 132.6L835 114.7L820 92.8L806 76L790 59.7L770 42.5L745 24.4L725 12.5L705 3.2L692.3 0%27/%3E%3Cpath d=%27M590.4 760L584.3 744.8L574.7 729.6L566.4 719.5L550.9 704.3L518 678.9L430 622.4L395 597.6L377.2 582.7L362 567.5L349.9 552.3L340.6 537.1L335.8 526.9L330.7 511.7L327.5 496.5L326 481.3L325.7 456L329 390.1L329.3 354.7L321.7 222.9L323.6 192.5L325.6 182.4L330 168.7L340 151.8L350 142L357.7 136.8L375 128.8L395 123.4L420 119.4L480 112.5L510.9 106.4L540 96.2L555 87.9L564.3 81.1L578.8 65.9L585.2 55.7L589.5 45.6L592.3 35.5L593.5 25.3L592.7 10.1L590.4 0%27/%3E%3Cpath d=%27M900 195.5L891.2 162.1L882.9 136.8L872.1 111.5L861.2 91.2L847.7 70.9L830 49L810 27.7L781.3 0%27/%3E%3Cpath d=%27M0 394.2L10 381.8L15.8 369.9L20.6 349.6L21.6 329.3L20 304L15.8 273.6L0 195.5%27/%3E%3Cpath d=%27M900 394.2L890 402.5L875 411.2L855 419.9L795 442.2L775 451.9L755 464.3L735 481.3L721.9 496.5L709.4 516.8L701 537.1L696.7 552.3L694 567.5L692.3 597.9L695.4 628.3L703.6 658.7L715 683.4L728.6 704.3L750.3 729.6L781.3 760%27/%3E%3Cpath d=%27M536.3 760L529.2 744.8L518.5 729.6L504.2 714.4L486.5 699.2L450 673.8L349.6 613.1L328.7 597.9L311.4 582.7L297.7 567.5L284.8 547.2L277.4 526.9L275.2 506.7L278.1 481.3L296.8 405.3L300.1 385.1L302.4 359.7L302.9 329.3L301.2 298.9L289.6 207.7L287.1 177.3L287.1 162.1L288.8 146.9L291.1 136.8L295 126.7L301.1 116.5L310.8 106.4L325 97.7L340 92.3L370 87.4L435 84L460 81.5L485 76.4L505 68.8L515 63L523.9 55.7L530 48.7L535 40.5L538.4 30.4L539.6 20.3L538.8 10.1L536.3 0%27/%3E%3Cpath d=%27M900 89.4L885.9 65.9L870.6 45.6L852.6 25.3L827.4 0%27/%3E%3Cpath d=%27M0 441.1L16.7 435.7L28.1 430.7L36.4 425.6L45 418.2L50.9 410.4L55.7 400.3L58.2 390.1L59.6 374.9L58.6 354.7L55.2 329.3L24 162.1L13.5 121.6L0 89.4%27/%3E%3Cpath d=%27M900 441.1L845 454.3L820 461.6L796.1 471.2L777.9 481.3L760 495.2L745.2 511.7L733.5 532L726.5 552.3L722.9 577.6L723.9 602.9L729.4 628.3L739.2 653.6L753.8 678.9L770 700.6L791.5 724.5L827.4 760%27/%3E%3Cpath d=%27M0 25.3L18.8 45.6L34 65.9L42.8 81.1L51 101.3L57.9 131.7L66.3 217.9L74.7 268.5L89.4 324.3L107.5 374.9L125 413.6L140 438.3L145 444.2L155 452.2L165 455.9L175 456.9L190 454.9L210 447.3L225 437.8L240 423.8L250 410.7L260 392.1L266.3 374.9L270.9 354.7L273.2 334.4L273.6 314.1L269.8 273.6L260 226.6L237.8 146.9L232 116.5L231.3 101.3L232.8 86.1L237.4 70.9L242.9 60.8L251.1 50.7L265 40.1L280 33.7L295 30.7L310 29.8L325 30.4L400 37.9L420 37.6L440 34.4L455 28L463.7 20.3L468.2 10.1L468.2 0%27/%3E%3Cpath d=%27M468.2 760L464.9 749.9L454.6 734.7L440 720.8L424.1 709.3L406.9 699.2L385 688.4L295 651.9L275 641.1L255 627.1L235 609.3L215.2 587.7L195.4 562.4L160 512.8L150 501.1L140 492.7L125 485.9L100 481.6L50 478.5L0 478.3%27/%3E%3Cpath d=%27M900 478.3L870 480.7L840 486.1L815 494.4L795 505.3L780 517.6L771.8 526.9L765.2 537.1L758.5 552.3L754.1 572.5L753.9 592.8L757.2 613.1L765 635.7L777.1 658.7L791.3 678.9L810 700.7L835 725.5L873.1 760%27/%3E%3Cpath d=%27M144.5 0L135 9.8L125 17.1L115 21.5L105 23.3L95 22.8L80 19L60 10.6L39.9 0%27/%3E%3Cpath d=%27M133.8 152L125 159.9L120 167.8L114.2 182.4L109.8 202.7L108.5 222.9L109.4 243.2L112.4 263.5L117.5 283.7L125 304.5L134.9 324.3L145 339.1L155 350L165 358L179.7 364.8L190 366.4L200 365.2L210 360.8L220 351.9L227.6 339.5L232.7 324.3L235 309.1L234.8 288.8L231.9 268.5L226.6 248.3L216.9 222.9L205 200.4L195 185.4L180 167.8L165 155.5L155 150.5L145 148.7L140 149.3L133.8 152%27/%3E%3Cpath d=%27M144.5 760L155.7 744.8L165 727.1L170.7 709.3L172.6 694.1L171.9 678.9L167.3 658.7L159.5 638.4L149 618.1L136.1 597.9L120.2 577.6L105 561.9L85 545.8L65 533.9L45 525.2L25 519.3L0 515.2%27/%3E%3Cpath d=%27M900 515.2L875 514.6L855 517L835 522.8L820 530.4L805.9 542.1L795.4 557.3L790.1 572.5L788.4 587.7L789.6 602.9L795.2 623.2L805 643.3L815.2 658.7L830 676.6L850 696.3L875 717L900 735.1%27/%3E%3Cpath d=%27M0 680.7L20 689.1L35 692.4L50 692.6L60 690.2L70 684.6L75.6 678.9L81.2 668.8L84.1 653.6L82.5 638.4L77.5 623.2L69.1 608L60 596.2L45.7 582.7L30.5 572.5L15 565.5L0 561.4%27/%3E%3Cpath d=%27M900 561.4L885 559.9L875 560.5L865 562.7L855 567.2L848.1 572.5L840.6 582.7L838.7 587.7L836.9 597.9L837.6 608L840.2 618.1L845 628.9L854.6 643.5L863.5 653.6L875 664.1L888.4 673.9L900 680.7%27/%3E%3C/g%3E%3C/svg%3E"); --kontur-size: 900px 760px; /* --- Bewegung ------------------------------------------------------- Ruhig und laenger als ueblich. Schnelle Effekte wirken nervoes, hier soll es sich setzen wie eine umgeblaetterte Seite. -------------------------------------------------------------------- */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* Standard, sanftes Auslaufen */ --ease-soft: cubic-bezier(0.16, 0.84, 0.44, 1); /* fuer grosse Wege, Text und Bilder */ --dur-fast: 0.22s; --dur: 0.55s; --dur-slow: 0.9s; --stagger: 70ms; /* Abstand zwischen Geschwistern in einer Gruppe */ --header-h: 4.5rem; }