/* ============================================================
   SCHRIFTEN — lokal gehostet (kein Google-Fonts-CDN, DSGVO)
   Variable Fonts: eine Datei deckt den gesamten Gewichtsbereich ab.
   ============================================================ */
      @font-face {
        font-family: "Archivo";
        font-style: normal;
        font-weight: 500 900;
        font-display: swap;
        src: url("../fonts/archivo-latin.woff2") format("woff2");
        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: "Archivo";
        font-style: normal;
        font-weight: 500 900;
        font-display: swap;
        src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
        unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
          U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
          U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
          U+A720-A7FF;
      }
      @font-face {
        font-family: "Inter";
        font-style: normal;
        font-weight: 400 600;
        font-display: swap;
        src: url("../fonts/inter-latin.woff2") format("woff2");
        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: "Inter";
        font-style: normal;
        font-weight: 400 600;
        font-display: swap;
        src: url("../fonts/inter-latin-ext.woff2") format("woff2");
        unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
          U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
          U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
          U+A720-A7FF;
      }

      /* ============================================================
   DESIGN TOKENS — Warme Cinematic-Industrial Welt
   ============================================================ */
      :root {
        /* Hintergründe (warm) */
        --cream: #f7f2e8;
        --cream-soft: #fbf7ef;
        --sand: #e9dcc3;
        --kraft: #dac7a4;
        --graybrown: #cfc4b2;

        /* Text */
        --graphite: #26231e; /* weicher als Schwarz */
        --brown-deep: #3a2c1c;
        --ink: #1b1813;

        /* Akzente */
        --forest: #2c4733; /* Haupt-CTA */
        --forest-hover: #21372760; /* nur für Schatten/Glow */
        --forest-dark: #20342568;
        --terracotta: #b5532e;
        --carton: #8a6a42; /* Linien / Hover */

        /* Funktional */
        --line: #00000016;
        --line-strong: #0000002a;
        --overlay-l: rgba(28, 24, 19, 0.62); /* linke Hero-Abdunklung */
        --overlay-r: rgba(28, 24, 19, 0);

        --header-h: 76px;
        --maxw: 1380px;

        --ease: cubic-bezier(0.22, 1, 0.36, 1);

        /* Logo-Maske inline als data:-URI — externe SVG-Masken werden von
   Firefox und Chrome unter file:// als cross-origin blockiert. */
        --logo-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 941 232'%3E%3Cpath fill='%23fff' d='M48 224L47 224 44 224 36 225 34 225 32 224 28 223 26 223 23 222 18 221 17 221 9 219 6 219 5 218 4 217 4 194 4 181 4 180 5 179 7 178 13 174 14 173 17 171 18 170 21 168 22 167 25 165 26 164 28 163 33 159 36 157 40 156 43 155 44 155 47 154 48 154 51 153 52 153 56 152 57 152 60 151 61 151 64 150 65 150 67 149 69 149 72 148 73 148 76 147 77 147 84 145 85 145 89 144 90 144 91 143 91 142 92 83 92 62 93 14 93 12 93 11 92 10 91 9 92 8 92 7 93 6 95 4 97 4 104 4 105 4 107 6 108 7 108 8 108 9 107 11 107 13 107 29 108 70 109 96 109 133 110 134 114 135 115 135 116 136 116 137 116 140 117 141 130 152 132 154 136 157 137 157 140 157 142 157 160 155 161 154 161 153 161 151 161 115 162 97 163 47 163 42 163 41 163 40 162 38 162 36 164 34 165 34 166 34 171 34 173 34 175 34 177 36 177 37 177 38 177 39 176 40 176 41 176 44 177 59 177 91 178 115 178 149 179 149 189 139 190 139 191 138 192 138 193 138 201 139 204 139 209 140 212 140 213 141 213 142 212 143 211 143 202 142 197 142 196 142 197 143 200 146 209 157 210 157 216 158 219 158 227 159 237 159 238 160 238 161 238 162 237 163 229 162 226 162 208 161 207 160 204 156 200 151 195 146 192 143 191 142 190 143 177 157 173 160 173 161 173 162 174 163 175 163 177 162 179 161 184 158 188 158 190 157 193 157 196 158 200 159 202 159 206 162 207 162 209 164 212 167 213 169 214 171 215 172 216 173 219 173 221 173 232 174 235 174 237 174 238 174 238 175 238 176 238 177 237 177 235 177 226 177 219 176 217 176 216 176 216 177 216 213 216 214 217 215 230 214 238 214 239 215 239 217 238 218 237 218 224 218 218 218 211 218 176 219 155 219 150 219 134 219 126 219 120 219 108 220 103 220 93 221 86 221 79 222 70 222 62 223 55 224 49 224ZM96 142L97 142 98 142 102 141 104 141 105 140 104 137 105 136 105 135 105 134 105 101 105 79 104 33 103 11 103 10 104 8 103 8 96 8 96 9 96 10 96 11 95 98 95 141 95 142ZM171 158L173 156 174 155 174 154 174 122 174 114 173 74 173 60 172 40 173 38 172 37 167 37 166 37 166 38 166 39 166 40 165 125 165 154 165 155 167 156 169 158 170 159ZM690 146L673 146 666 146 665 145 665 144 665 143 666 142 667 142 670 141 671 140 672 139 672 136 672 127 672 77 672 76 671 74 669 73 666 72 665 72 665 71 665 70 665 69 666 68 669 68 673 67 674 67 677 66 678 66 680 65 681 65 682 65 682 66 683 67 683 131 683 138 684 140 685 141 688 142 690 142 691 143 691 144 691 145ZM762 146L750 146 738 146 737 146 736 145 736 144 736 143 737 142 739 142 742 141 743 139 743 138 744 136 744 102 743 101 736 101 735 100 735 99 737 97 738 96 739 95 742 95 743 95 743 94 744 90 744 86 746 82 747 78 749 76 751 73 753 70 755 69 758 67 761 65 766 65 767 65 771 66 773 67 774 68 776 70 776 72 776 74 774 76 773 77 772 77 771 77 770 77 766 73 764 72 762 72 760 72 759 72 758 73 757 74 756 75 755 78 754 82 754 85 754 94 754 95 755 95 765 95 766 96 766 97 766 98 766 100 765 101 754 101 754 102 754 133 754 138 755 140 756 141 760 142 762 142 763 143 763 145ZM633 147L631 148 627 148 623 148 620 147 619 147 616 146 615 146 613 145 609 143 606 142 602 138 600 136 597 133 596 130 594 127 594 126 592 121 591 120 591 117 591 116 590 113 590 107 591 102 592 97 592 96 593 94 594 90 595 88 597 85 600 82 603 79 604 78 608 75 612 72 614 72 617 71 622 70 627 69 630 69 632 70 633 70 636 71 637 71 639 72 640 72 641 72 642 73 643 73 644 74 645 75 649 78 652 81 656 85 657 88 659 92 660 95 661 97 661 98 662 104 663 108 662 112 662 118 661 122 660 123 659 125 656 131 654 134 653 136 650 139 648 141 647 141 645 143 641 145 639 145 637 146 636 146ZM256 146L255 146 255 145 255 143 255 142 256 142 260 141 261 141 262 140 263 139 263 138 264 136 264 134 264 100 264 85 264 82 263 79 263 78 262 77 261 76 260 76 256 75 255 75 254 74 255 72 255 71 256 71 285 71 288 71 291 71 296 73 300 74 303 77 304 78 307 81 308 83 308 85 309 89 310 93 309 96 308 100 307 104 306 106 303 109 300 112 297 113 295 114 292 115 290 116 285 116 280 116 275 114 275 115 275 132 275 137 276 139 277 140 278 141 282 142 285 142 286 143 286 145 285 146 284 146 268 146ZM632 142L635 141 636 140 637 140 641 137 644 133 645 132 647 127 648 125 648 124 649 122 649 120 650 116 650 109 649 101 648 96 648 95 647 93 647 92 646 91 645 88 643 85 641 82 639 80 636 78 635 77 633 76 630 75 626 75 624 75 621 75 620 75 618 76 616 77 613 79 610 82 608 85 606 89 604 96 603 103 603 106 603 111 604 118 606 125 608 129 609 130 609 131 611 134 613 136 615 138 618 140 619 140 620 141 623 142 625 142 628 142 631 142ZM287 110L289 109 291 108 292 107 294 105 295 103 296 100 297 96 297 91 297 88 296 85 295 83 294 81 293 80 290 78 287 77 283 76 280 76 278 76 276 77 275 78 275 79 275 81 275 108 275 109 280 110 284 110ZM347 147L346 147 344 147 343 146 341 144 340 141 339 140 334 144 333 145 332 146 331 146 330 146 327 147 325 148 323 147 321 147 319 146 318 145 315 142 315 141 314 139 313 136 312 135 312 132 313 130 313 128 315 126 316 125 317 124 319 122 321 121 325 120 327 119 328 119 332 117 333 117 335 116 337 115 338 114 339 113 338 106 337 103 336 102 335 101 333 100 332 100 330 100 328 100 326 101 325 102 324 104 323 106 323 108 322 110 321 111 319 112 318 112 317 112 316 111 315 111 313 109 313 107 313 106 314 105 316 102 318 101 321 99 325 96 326 96 327 95 328 95 329 95 333 94 335 94 337 94 339 94 340 95 343 96 345 98 345 99 347 101 347 102 348 103 348 105 348 106 349 109 349 132 349 135 349 136 350 138 352 139 353 139 356 138 357 139 358 140 358 141 357 142 355 143 353 144 349 147ZM383 173L366 173 358 173 357 173 356 172 356 170 357 169 361 168 362 168 363 167 364 165 364 162 364 107 364 105 364 104 363 103 361 102 358 101 357 100 357 99 358 98 361 97 362 96 364 96 365 96 367 95 370 94 371 94 373 93 374 94 374 95 374 100 375 100 381 97 385 95 386 94 389 94 391 94 394 94 397 96 399 97 401 98 403 100 404 102 406 105 408 108 408 109 408 111 409 112 409 116 409 120 408 124 408 125 408 127 406 130 405 132 402 136 401 138 398 140 394 143 393 144 392 145 391 145 390 146 389 146 388 146 384 147 381 148 379 147 377 147 376 146 375 146 374 146 374 147 374 152 374 162 375 165 375 166 376 167 378 168 379 168 383 169 384 170 384 171 384 172ZM437 173L412 173 411 173 410 172 410 170 411 169 415 168 416 168 417 167 418 165 418 164 418 105 418 104 417 103 416 102 413 102 412 101 411 100 411 99 412 98 413 98 415 97 417 96 419 96 420 96 422 95 427 93 428 94 428 95 428 100 429 101 434 98 436 96 437 96 438 95 441 94 444 94 447 94 449 95 451 96 452 96 453 97 455 98 457 100 459 102 460 105 461 107 462 110 463 111 463 116 463 118 463 120 462 124 462 125 461 127 459 132 457 135 456 137 452 140 449 143 446 144 445 145 444 145 441 146 436 147 434 147 431 147 429 146 429 161 429 165 430 167 431 168 432 168 434 169 437 169 438 170 438 171 438 172ZM494 147L493 147 492 147 489 148 488 147 484 147 483 146 481 145 478 143 477 143 474 140 474 139 472 136 471 134 470 131 469 129 469 128 468 124 468 121 468 117 469 116 469 113 470 110 471 108 472 106 475 103 478 100 482 96 486 95 491 94 493 94 497 94 499 95 501 96 504 99 507 102 508 104 508 105 508 106 509 110 509 113 508 115 506 116 504 117 496 117 489 117 479 118 478 118 478 119 479 125 480 128 481 130 482 131 484 134 487 136 488 137 491 138 492 138 495 138 498 138 501 137 503 136 504 135 506 133 507 133 508 134 509 136 509 137 507 139 503 142 500 144 499 145 498 146 497 146 496 147ZM567 145L566 146 565 146 552 146 544 146 543 146 543 145 543 144 543 143 544 142 545 142 548 141 549 140 549 139 550 135 550 115 549 111 549 109 549 108 548 106 547 104 546 103 544 102 542 102 540 102 537 102 535 103 533 104 530 106 529 107 529 108 529 109 529 115 529 134 530 138 530 140 531 141 534 142 535 142 536 143 536 144 536 145 535 146 514 146 513 146 512 146 512 145 512 144 512 143 513 142 515 142 517 141 518 140 519 138 519 136 519 108 519 105 518 103 516 102 514 102 513 101 512 100 513 99 513 98 514 98 517 97 521 96 524 95 527 94 528 93 529 94 529 95 529 101 529 102 530 101 535 98 538 96 540 95 541 94 544 94 545 94 549 94 550 95 552 95 554 97 555 98 557 101 558 102 558 103 559 107 560 109 560 133 560 138 561 140 562 141 564 142 566 142 567 143 567 144 567 145ZM718 147L716 148 713 148 711 147 710 147 708 147 705 145 702 143 701 142 699 140 697 137 695 135 693 130 693 127 693 126 692 124 692 121 693 118 694 113 696 108 697 105 698 104 699 103 701 101 702 100 706 97 707 96 708 95 709 95 710 95 715 94 718 94 721 94 723 95 725 96 727 98 730 101 731 104 733 107 733 111 733 112 733 114 732 115 731 116 730 116 728 117 720 117 715 117 703 118 702 119 703 123 704 127 705 129 706 131 708 134 711 136 715 138 716 138 719 138 722 138 725 137 727 136 728 135 730 133 731 133 732 134 733 136 730 140 726 143 724 145 723 145 722 146 721 146 720 147ZM498 112L499 111 499 110 499 108 498 105 498 104 497 103 496 101 494 100 492 99 491 99 489 99 488 99 486 100 484 101 483 102 481 105 480 107 479 111 479 112 481 112 493 112ZM722 112L723 111 723 110 722 106 722 105 721 103 720 102 718 100 716 99 715 99 713 99 712 99 710 100 707 102 706 104 704 107 703 112 704 113 719 112ZM384 141L386 141 389 140 391 139 392 138 394 136 396 133 397 130 398 127 398 122 398 119 398 115 397 111 396 109 395 108 394 106 393 105 390 103 388 102 387 102 385 102 382 102 379 103 378 104 377 104 375 105 375 106 374 107 374 114 374 135 375 136 376 138 378 139 379 139 380 140ZM444 140L445 139 447 138 448 137 449 135 450 133 451 132 451 131 451 129 452 128 452 124 452 119 452 115 452 114 451 112 450 109 449 107 447 105 444 103 443 103 441 102 439 102 437 102 434 103 432 104 430 105 429 106 429 107 429 135 429 136 431 138 433 139 435 140 438 141 440 141ZM883 146L882 147 880 147 877 147 875 146 872 146 871 145 870 144 869 143 870 119 869 109 869 108 868 107 867 107 866 106 866 105 867 104 872 103 873 102 874 102 875 103 875 119 876 120 879 118 881 118 884 118 886 119 889 120 891 122 891 123 893 125 893 126 893 127 894 130 894 133 893 135 892 138 890 141 888 143 885 145ZM811 146L810 147 806 147 803 147 800 147 798 146 795 145 794 145 793 144 790 142 788 140 785 137 784 133 783 132 783 128 783 126 783 124 783 121 784 118 785 116 787 114 789 111 792 109 794 107 796 107 799 106 801 105 805 105 807 105 811 105 814 106 816 106 817 107 817 108 818 116 817 117 816 117 815 116 814 113 813 111 812 110 810 109 806 108 804 108 799 109 797 110 796 111 794 113 793 114 793 115 792 116 791 118 790 123 790 127 791 132 792 135 793 137 794 139 795 140 796 141 798 142 800 143 803 144 806 144 809 143 810 143 811 142 811 141 812 135 812 133 811 131 809 130 806 130 805 129 805 128 806 127 807 127 817 127 820 127 821 128 821 129 820 130 819 130 818 131 818 132 818 144 817 145ZM935 146L934 146 921 146 920 146 919 145 920 144 922 143 924 142 924 141 924 139 924 127 923 127 907 127 906 127 906 129 906 138 906 141 907 142 908 143 910 143 911 144 911 145 910 146 896 146 895 145 895 144 896 143 898 143 899 143 899 142 900 141 900 139 900 127 900 113 900 111 899 110 899 109 898 109 896 109 895 108 895 107 895 106 896 106 898 106 909 106 910 106 911 107 911 108 910 108 908 109 907 109 907 110 906 111 906 113 906 122 906 123 907 123 923 123 924 123 924 122 924 113 924 110 923 109 920 108 919 107 920 106 921 106 922 106 926 106 934 106 935 106 936 107 935 108 932 109 931 110 930 112 930 114 930 128 930 140 930 141 931 142 932 143 935 144 936 145ZM866 146L855 146 854 145 854 144 855 143 856 143 857 142 858 139 858 129 857 125 856 124 855 123 853 123 851 123 849 124 847 125 847 126 847 128 847 140 847 142 848 143 850 144 851 145 850 146 849 146 839 146 838 145 838 144 839 143 840 143 841 143 841 142 842 138 841 127 841 125 840 124 839 123 838 123 837 123 835 123 833 124 832 125 832 126 832 142 832 143 834 144 835 144 835 145 834 146 823 146 822 145 822 144 823 143 825 143 826 141 826 125 826 124 824 123 823 122 823 121 824 120 828 119 830 118 831 118 832 119 832 120 831 121 832 122 835 120 837 119 839 118 841 118 842 119 844 120 845 121 846 122 847 122 849 121 852 119 853 118 856 118 858 119 860 120 861 121 862 123 863 125 863 129 863 139 863 141 863 142 864 143 866 144 867 144 867 145ZM333 139L335 138 337 137 338 136 339 135 339 126 339 120 338 119 337 120 336 120 335 121 332 122 328 124 325 126 324 127 323 129 323 131 323 133 324 135 325 137 326 138 328 139 330 139 332 139ZM883 143L884 142 886 140 887 138 887 136 888 133 887 130 887 128 886 126 885 125 884 124 883 123 881 122 879 122 876 123 875 123 875 124 875 137 875 140 876 141 876 142 878 143 880 143 882 143ZM109 140L110 139 111 139 113 138 112 137 108 137 108 138 107 140 108 141ZM84 218L87 218 97 217 105 217 119 216 122 216 122 215 123 197 122 175 122 174 120 174 119 173 121 171 124 168 125 167 124 167 123 167 122 167 122 166 122 160 122 159 123 158 127 158 128 158 129 159 129 162 130 162 132 161 133 160 133 159 131 157 129 156 119 147 114 143 113 142 112 143 109 145 106 148 87 163 82 167 79 170 78 171 78 199 78 218 79 218ZM21 177L22 177 27 176 28 176 32 175 34 175 37 174 40 174 50 172 52 172 63 170 65 170 69 169 70 169 75 168 77 167 78 166 87 159 94 153 103 146 104 145 104 144 103 144 101 145 98 146 95 146 94 147 91 147 90 147 87 148 86 148 83 149 82 149 79 150 78 150 75 151 74 151 71 152 69 153 66 153 61 154 58 155 57 155 55 156 53 156 50 157 48 158 45 158 44 158 38 160 37 160 30 166 27 168 26 169 25 169 18 174 14 177 15 178ZM105 167L104 168 99 168 98 167 98 166 98 159 98 158 99 158 102 158 104 158 105 158 106 159 106 162 106 166 105 167ZM133 170L136 169 144 169 146 169 148 169 150 168 157 161 159 159 159 158 157 158 151 159 149 159 144 160 142 161 137 161 136 162 131 166 128 169 126 170 127 170ZM174 215L174 179 174 172 174 169 174 168 171 164 165 159 164 160 165 215 165 216 166 216 173 216 174 215ZM202 215L212 215 213 214 213 175 212 173 211 171 210 170 209 169 207 166 205 165 202 163 199 162 197 162 195 161 194 161 189 161 185 162 180 164 177 166 178 168 178 170 178 215ZM162 215L161 169 161 162 161 161 160 162 157 165 153 170 152 215 153 216 161 216ZM10 195L15 195 26 194 30 194 33 193 36 192 38 192 40 192 43 191 44 191 51 189 52 189 54 188 55 188 57 187 58 187 60 186 61 186 65 188 67 189 71 191 74 192 75 191 75 172 74 172 71 172 69 172 66 173 63 173 59 174 57 174 54 175 51 175 48 176 46 176 40 177 39 177 34 178 32 178 28 179 25 180 21 180 19 180 12 181 11 181 8 182 8 191 8 194 8 195ZM147 215L147 184 148 173 147 172 144 172 139 173 138 173 138 175 138 178 138 215 139 216 143 216 147 216ZM135 215L135 174 135 173 133 173 126 174 126 175 126 215 127 216 135 215ZM66 184L65 185 62 185 61 184 61 176 62 175 65 175 66 175 67 175 67 176 67 183 66 184ZM91 186L85 186 84 185 84 177 84 176 84 175 85 174 91 174 92 175 92 184 92 185ZM105 186L100 186 99 186 98 185 98 176 99 175 105 175 106 176 106 185 105 186ZM114 186L113 186 112 185 112 176 113 175 114 175 119 175 120 176 120 177 120 178 120 184 120 185 119 186ZM56 185L55 186 53 186 52 185 52 178 52 177 53 177 55 176 56 176 57 177 57 184 56 185ZM47 187L45 187 44 186 44 185 44 179 44 178 45 177 47 177 48 178 48 179 48 185 48 186ZM39 188L37 188 36 187 36 186 36 180 37 179 38 178 39 178 40 179 40 180 41 186 40 187ZM32 188L30 188 29 188 29 187 29 181 30 180 31 180 32 180 33 180 33 181 33 187 33 188ZM25 189L24 189 23 189 23 188 23 184 23 182 24 181 25 180 26 180 27 181 27 182 27 187 27 188 26 189ZM19 190L18 190 17 189 16 188 16 183 17 182 18 181 19 181 20 182 21 183 20 188 20 189ZM13 190L12 190 11 190 11 189 11 187 10 183 11 182 12 182 13 182 14 182 15 183 15 187 15 189 14 190ZM497 226L494 227 490 227 486 225 485 225 484 224 484 223 483 221 483 216 483 215 484 215 485 215 486 216 487 219 488 221 489 222 491 223 494 224 496 224 497 223 498 222 499 221 500 219 500 218 499 215 499 214 498 213 495 211 492 209 489 208 487 206 485 204 485 203 484 202 484 200 484 198 484 195 486 193 488 191 490 189 492 189 493 188 497 188 499 189 500 189 502 190 503 190 503 191 504 197 504 198 503 199 502 198 501 196 500 194 499 193 497 192 494 191 492 192 491 193 490 194 489 196 489 197 490 199 490 200 491 201 492 202 497 205 498 206 501 208 502 208 503 210 504 211 505 212 505 214 506 216 505 218 505 220 503 222 503 223 501 224 499 226ZM57 194L61 194 67 194 69 193 68 193 67 192 66 192 62 190 60 189 57 190 56 191 53 192 51 192 50 192 46 193 45 193 43 194 45 194ZM538 195L537 196 535 196 533 194 533 192 533 191 534 190 535 189 536 189 537 189 538 189 539 191 540 192 540 193 539 194ZM591 226L590 226 581 226 576 226 575 225 575 224 576 223 578 223 579 223 580 222 580 221 580 199 580 196 579 195 576 195 575 194 576 193 577 193 579 192 581 192 583 191 584 191 585 190 586 191 586 218 586 221 587 222 589 223 591 223 592 224 592 225ZM611 226L609 227 606 227 605 226 603 226 601 224 599 223 599 222 597 220 597 218 597 217 597 215 598 214 598 213 600 211 603 209 604 208 603 207 602 207 600 204 599 202 598 200 598 198 599 197 599 195 601 193 602 192 603 191 605 190 607 190 609 190 612 190 614 192 616 193 616 194 617 196 618 197 618 199 618 200 617 201 617 202 615 204 614 205 613 206 613 207 615 208 617 210 618 211 619 213 619 216 619 219 618 221 616 223 614 225 613 225ZM629 226L626 227 625 226 625 225 627 221 628 220 630 217 630 216 631 215 632 213 634 209 635 207 638 201 639 199 640 197 640 196 639 196 628 196 627 196 626 197 625 198 625 199 624 200 623 200 622 200 622 199 622 197 623 192 624 191 627 191 642 191 644 191 645 191 645 192 644 194 643 196 643 197 642 198 642 199 640 203 638 207 638 208 638 209 636 212 635 214 634 216 633 218 633 219 633 220 632 221 630 225ZM657 226L655 227 653 227 652 226 650 226 648 224 647 223 647 222 648 221 649 220 650 219 654 222 657 223 658 223 660 222 661 221 662 220 663 218 663 217 663 215 663 214 662 211 661 210 659 209 657 209 654 209 653 208 653 207 654 206 656 205 658 204 659 203 660 202 661 200 661 199 661 198 660 196 659 195 657 194 655 195 654 195 653 196 650 198 649 198 648 197 649 196 649 195 651 193 653 192 655 191 657 190 659 190 661 191 663 192 665 193 665 194 666 196 667 197 666 199 665 201 664 203 663 204 662 205 664 206 665 206 666 207 668 209 668 211 669 214 668 216 668 218 666 220 666 221 663 223 661 225 659 226ZM554 226L552 226 550 225 548 224 548 222 547 218 547 205 547 204 545 204 544 203 544 202 545 201 546 201 547 201 547 200 547 197 548 196 551 193 552 193 553 194 553 200 554 201 558 201 559 201 559 202 559 203 558 204 557 204 554 204 553 204 553 205 553 218 553 220 553 221 554 222 555 222 556 222 557 222 558 222 559 222 559 223 558 225 556 226ZM611 204L612 202 613 199 613 197 612 195 611 194 610 193 608 193 606 193 605 194 604 196 604 199 604 200 605 202 606 203 608 204 610 205ZM40 221L42 221 45 221 46 220 46 216 46 202 46 201 47 201 48 202 48 203 48 219 48 220 49 220 53 220 58 220 67 219 72 219 74 219 75 218 75 217 75 215 75 214 75 197 74 196 49 197 44 197 36 197 36 198 36 221ZM91 210L85 210 84 209 84 198 84 197 85 196 91 196 92 197 92 198 92 208 92 209ZM105 210L100 210 99 210 98 209 98 198 98 197 99 196 104 196 105 196 106 197 106 198 106 208 106 209ZM120 209L119 210 114 210 113 210 112 209 112 198 113 197 114 196 119 196 120 197 120 198 120 209ZM33 220L33 202 33 198 32 197 30 197 12 198 9 198 8 198 8 199 8 215 10 216 13 216 15 217 18 218 19 217 19 205 19 204 19 203 20 203 21 204 21 214 21 218 23 219 25 219 27 219 29 220 31 220 32 221 33 221ZM521 226L519 227 517 226 515 226 513 224 511 223 511 222 510 221 509 220 508 217 508 215 508 213 509 211 509 210 510 208 511 206 511 205 513 203 515 202 516 201 517 200 518 200 520 200 523 200 525 201 526 202 527 204 528 206 529 209 529 210 528 211 527 212 515 212 514 212 514 213 514 216 515 218 516 219 518 221 520 222 521 222 522 222 524 221 525 221 526 220 527 219 528 219 529 220 528 221 526 224 525 224 523 226ZM543 225L542 226 532 226 531 226 531 225 531 224 533 223 534 222 534 221 534 206 534 205 532 204 531 204 531 203 532 202 533 202 536 201 538 200 539 201 540 205 540 222 541 223 542 223 543 224 543 225ZM522 209L523 209 523 208 523 206 523 205 522 204 520 203 519 203 517 204 516 205 515 206 514 208 514 209 515 209ZM465 212L464 213 456 212 449 212 430 211 419 211 402 210 397 210 394 209 398 209 415 208 420 208 437 207 444 207 459 206 464 206 465 206 465 207 465 209 465 211 465 212ZM702 212L695 213 686 213 685 212 685 207 686 206 688 206 702 207 708 207 730 208 737 208 751 209 757 209 752 210 746 210ZM611 223L613 221 614 219 614 217 613 215 612 213 609 211 607 210 606 210 604 212 603 214 603 217 603 219 604 221 605 222 606 223 608 224 610 223Z'/%3E%3C/svg%3E");
      }

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      html {
        scroll-behavior: smooth;
        -webkit-text-size-adjust: 100%;
      }

      body {
        font-family: "Inter", system-ui, sans-serif;
        color: var(--graphite);
        background: var(--cream);
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
      }

      /* Horizontalen Überlauf verhindern, OHNE body/html zum Scroll-Container zu machen
   (clip statt hidden -> window.scrollY & Scroll-Events bleiben intakt) */
      html,
      body {
        overflow-x: clip;
      }

      ::selection {
        background: var(--forest);
        color: #fff;
      }

      a {
        color: inherit;
        text-decoration: none;
      }

      /* Sichtbarer Fokus für Tastatur-Navigation */
      :focus-visible {
        outline: 2px solid var(--forest);
        outline-offset: 3px;
      }
      *:focus:not(:focus-visible) {
        outline: none;
      }

      /* ============================================================
   SCROLL-PROGRESS
   ============================================================ */
      .progress {
        position: fixed;
        top: 0;
        left: 0;
        height: 3px;
        width: 0%;
        background: var(--forest);
        z-index: 200;
        transition: width 0.08s linear;
      }

      /* ============================================================
   HEADER
   ============================================================ */
      .header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: var(--header-h);
        z-index: 100;
        display: flex;
        align-items: center;
        transition:
          background 0.4s var(--ease),
          backdrop-filter 0.4s var(--ease),
          border-color 0.4s var(--ease),
          height 0.4s var(--ease);
        border-bottom: 1px solid transparent;
      }
      .header.scrolled {
        background: rgba(247, 242, 232, 0.86);
        backdrop-filter: blur(14px) saturate(140%);
        -webkit-backdrop-filter: blur(14px) saturate(140%);
        border-bottom: 1px solid var(--line);
      }
      .header__inner {
        width: 100%;
        max-width: var(--maxw);
        margin: 0 auto;
        padding: 0 clamp(20px, 4vw, 56px);
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      /* Fallback: Wortmarke als Text, falls CSS-Masken nicht unterstützt werden */
      .brand {
        font-family: "Archivo", sans-serif;
        font-weight: 800;
        font-size: 19px;
        letter-spacing: 0.14em;
        color: var(--cream);
        transition: color 0.4s var(--ease);
      }
      .header.scrolled .brand {
        color: var(--graphite);
      }

      /* Logo als Maske einfärben: exakte Markenfarben statt schwarzer SVG-Datei,
   dadurch derselbe Farbwechsel beim Scrollen wie zuvor beim Text. */
      @supports (mask-image: none) or (-webkit-mask-image: none) {
        .brand {
          display: block;
          /* Hoher Mindestwert, damit die Wortmarke auch auf schmalen
     Displays lesbar bleibt statt mitzuschrumpfen. */
          width: clamp(152px, 14vw, 184px);
          aspect-ratio: 941 / 232;
          font-size: 0;
          background-color: var(--cream);
          /* Einzelne Longhands statt Kurzform: die Kurzform setzt mask-mode
     auf "match-source" zurück. Firefox wertet das bei SVG-Quellen als
     Luminanz aus — eine schwarze Grafik wäre dort unsichtbar. Deshalb
     zusätzlich die weisse Maskenvariante und mask-mode: alpha. */
          -webkit-mask-image: var(--logo-mask);
          mask-image: var(--logo-mask);
          -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
          -webkit-mask-position: center;
          mask-position: center;
          -webkit-mask-size: contain;
          mask-size: contain;
          mask-mode: alpha;
          transition:
            background-color 0.4s var(--ease),
            width 0.4s var(--ease);
        }
        .header.scrolled .brand {
          background-color: var(--graphite);
        }

        /* Startseite: großer Auftritt vor dem ersten Scroll.
   Der Header ist oben transparent, daher wirkt die höhere Leiste
   wie freier Raum — ab 40px Scroll klappt beides auf Normalmaß. */
        .home .header {
          height: clamp(92px, 11vw, 112px);
        }
        .home .header.scrolled {
          height: var(--header-h);
        }
        .home .header:not(.scrolled) .brand {
          width: clamp(192px, 19vw, 264px);
        }
      }

      .nav {
        display: flex;
        gap: clamp(20px, 2.6vw, 44px);
        align-items: center;
        margin-left: auto;
      }
      .nav a {
        font-family: "Archivo", sans-serif;
        font-size: 12.5px;
        font-weight: 600;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: rgba(247, 242, 232, 0.86);
        position: relative;
        padding: 6px 0;
        transition: color 0.3s var(--ease);
      }
      .header.scrolled .nav a {
        color: var(--graphite);
      }
      .nav a::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 0;
        height: 1.5px;
        background: var(--carton);
        transition: width 0.3s var(--ease);
      }
      .nav a:hover::after,
      .nav a:focus-visible::after {
        width: 100%;
      }
      .nav a:hover {
        color: var(--cream);
      }
      .header.scrolled .nav a:hover {
        color: var(--brown-deep);
      }

      /* Sprachumschalter — auf jeder Seite ganz rechts im Header */
      .language-switch {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        flex: 0 0 auto;
        margin-left: clamp(20px, 2.6vw, 40px);
        padding: 3px;
        border: 1px solid rgba(247, 242, 232, 0.5);
        background: rgba(27, 24, 19, 0.14);
        transition:
          background 0.3s var(--ease),
          border-color 0.3s var(--ease);
      }
      .language-switch a {
        min-width: 30px;
        padding: 7px 6px 6px;
        font-family: "Archivo", sans-serif;
        font-size: 10.5px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0.1em;
        text-align: center;
        color: rgba(247, 242, 232, 0.76);
        transition:
          color 0.25s var(--ease),
          background 0.25s var(--ease);
      }
      .language-switch a:hover {
        color: var(--cream);
      }
      .language-switch a[aria-current="true"] {
        color: var(--graphite);
        background: var(--cream);
      }
      .language-switch a:focus-visible {
        outline: 2px solid var(--kraft);
        outline-offset: 2px;
      }
      .header.scrolled .language-switch {
        border-color: var(--line-strong);
        background: rgba(218, 199, 164, 0.22);
      }
      .header.scrolled .language-switch a {
        color: rgba(38, 35, 30, 0.7);
      }
      .header.scrolled .language-switch a:hover {
        color: var(--graphite);
      }
      .header.scrolled .language-switch a[aria-current="true"] {
        color: var(--cream-soft);
        background: var(--forest);
      }

      /* Burger (mobile) */
      .burger {
        display: none;
        width: 44px;
        height: 44px;
        background: transparent;
        border: none;
        cursor: pointer;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
      }
      .burger span {
        display: block;
        width: 26px;
        height: 2px;
        background: var(--cream);
        transition:
          transform 0.35s var(--ease),
          opacity 0.25s var(--ease),
          background 0.4s var(--ease);
      }
      .header.scrolled .burger span {
        background: var(--graphite);
      }
      .burger.open span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
      }
      .burger.open span:nth-child(2) {
        opacity: 0;
      }
      .burger.open span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
      }

      /* Mobile-Menü Overlay */
      .mobile-menu {
        position: fixed;
        inset: 0;
        z-index: 90;
        background: var(--graphite);
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 32px;
        transform: translateY(-100%);
        transition: transform 0.5s var(--ease);
      }
      .mobile-menu.open {
        transform: translateY(0);
      }
      .mobile-menu a {
        font-family: "Archivo", sans-serif;
        font-size: clamp(34px, 9vw, 56px);
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        color: var(--cream);
        padding: 12px 0;
        border-bottom: 1px solid rgba(247, 242, 232, 0.12);
        transition:
          color 0.25s var(--ease),
          padding-left 0.35s var(--ease);
      }
      .mobile-menu a:hover {
        color: var(--kraft);
        padding-left: 14px;
      }

      /* ============================================================
   BUTTONS
   ============================================================ */
      .btn {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        font-family: "Archivo", sans-serif;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        padding: 17px 30px;
        border: 1.5px solid transparent;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition:
          transform 0.25s var(--ease),
          box-shadow 0.3s var(--ease);
        min-height: 48px;
      }
      .btn__label {
        position: relative;
        z-index: 2;
      }
      .btn svg {
        position: relative;
        z-index: 2;
        transition: transform 0.3s var(--ease);
      }
      .btn:hover svg {
        transform: translateX(5px);
      }

      /* Primär: Waldgrün, gefüllt, kantig */
      .btn--primary {
        background: var(--forest);
        color: var(--cream-soft);
      }
      .btn--primary::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background: var(--brown-deep);
        transform: translateY(101%);
        transition: transform 0.4s var(--ease);
      }
      .btn--primary:hover::before {
        transform: translateY(0);
      }
      .btn--primary:hover {
        box-shadow: 0 16px 34px -16px var(--forest-dark);
      }

      /* Sekundär: Rahmen */
      .btn--ghost {
        background: transparent;
        color: var(--cream-soft);
        border-color: rgba(247, 242, 232, 0.55);
      }
      .btn--ghost::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background: var(--cream-soft);
        transform: translateY(101%);
        transition: transform 0.4s var(--ease);
      }
      .btn--ghost:hover {
        color: var(--graphite);
        border-color: var(--cream-soft);
      }
      .btn--ghost:hover::before {
        transform: translateY(0);
      }

      .textlink {
        font-family: "Archivo", sans-serif;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.08em;
        color: var(--cream-soft);
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 2px;
        border-bottom: 1px solid transparent;
        transition:
          border-color 0.3s var(--ease),
          gap 0.3s var(--ease);
      }
      .textlink:hover {
        border-color: var(--kraft);
        gap: 12px;
      }

      /* ============================================================
   SECTIONS / CINEMATIC CHAPTERS
   ============================================================ */
      .section {
        position: relative;
        /* Navbar-Höhe abziehen, damit die Sektion in den sichtbaren Bereich
           unter dem (deckenden) Header passt */
        min-height: calc(100svh - var(--header-h));
        display: flex;
        align-items: flex-end;
        padding: clamp(40px, 8vh, 96px) clamp(20px, 4vw, 56px)
          clamp(48px, 9vh, 104px);
        overflow: hidden;
      }
      /* Hero: volle Höhe, da der Header hier transparent überlagert */
      #hero {
        min-height: 100svh;
      }
      .section__bg {
        position: absolute;
        inset: 0;
        z-index: 0;
      }
      .section__bg img,
      .section__bg video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
      /* Warmer Verlauf links->rechts + Bodenverlauf + gleichmäßiger dunkler Tint
         (verbessert den Kontrast zwischen Bild/Video und Text) */
      .section__scrim {
        position: absolute;
        inset: 0;
        z-index: 1;
        background:
          linear-gradient(
            90deg,
            var(--overlay-l) 0%,
            rgba(28, 24, 19, 0.3) 42%,
            var(--overlay-r) 78%
          ),
          linear-gradient(
            0deg,
            rgba(28, 24, 19, 0.55) 0%,
            rgba(28, 24, 19, 0) 38%
          ),
          linear-gradient(rgba(28, 24, 19, 0.58), rgba(28, 24, 19, 0.58));
      }
      .section__inner {
        position: relative;
        z-index: 2;
        width: 100%;
        max-width: var(--maxw);
        margin: 0 auto;
      }
      .section__content {
        max-width: min(94vw, 1080px);
      }

      /* Kapitel-Index oben (kleine Marke) */
      .chapter-tag {
        font-family: "Archivo", sans-serif;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.28em;
        text-transform: uppercase;
        color: var(--kraft);
        display: inline-flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 26px;
      }
      .chapter-tag::before {
        content: "";
        width: 38px;
        height: 1.5px;
        background: var(--carton);
      }

      /* Headlines */
      .headline {
        font-family: "Archivo", sans-serif;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: -0.01em;
        line-height: 0.96;
        color: var(--cream-soft);
        font-size: clamp(26px, 6.2vw, 84px);
        /* Lange Wörter ohne Bindestrich auf weitere Zeilen umbrechen */
        overflow-wrap: anywhere;
        hyphens: none;
        -webkit-hyphens: none;
      }
      .headline .accent {
        color: var(--kraft);
      }

      .lede {
        margin-top: 28px;
        font-size: clamp(16px, 1.5vw, 20px);
        line-height: 1.55;
        color: rgba(247, 242, 232, 0.88);
        max-width: 56ch;
      }

      .actions {
        margin-top: 40px;
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        align-items: center;
      }

      /* ============================================================
         HELLE INFO-SEKTION (Kontakt & Anlieferung)
         ============================================================ */
      .section--light {
        background: var(--cream);
        color: var(--graphite);
        align-items: center;
        border-top: 1px solid var(--line-strong);
      }
      .section--light .section__content {
        max-width: var(--maxw);
        width: 100%;
      }
      .section--light .headline {
        color: var(--graphite);
      }
      .section--light .headline .accent {
        color: var(--forest);
      }
      .section--light .lede {
        color: rgba(38, 35, 30, 0.78);
      }
      .section--light .chapter-tag {
        color: var(--brown-deep);
      }

      /* Kontakt-Raster (E-Mail / Telefon / Anlieferzeiten) */
      .info-grid {
        margin-top: clamp(40px, 6vh, 72px);
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        border-top: 1px solid var(--line-strong);
      }
      .info-block {
        padding: 30px 34px 30px 0;
      }
      .info-block + .info-block {
        border-left: 1px solid var(--line);
        padding-left: 34px;
      }
      .info-label {
        display: block;
        font-family: "Archivo", sans-serif;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--brown-deep);
        margin: 0 0 12px;
      }
      .info-value {
        font-family: "Inter", sans-serif;
        font-size: clamp(16px, 1.5vw, 20px);
        font-weight: 500;
        line-height: 1.55;
        color: var(--graphite);
        font-style: normal;
        margin: 0;
      }
      .tabular {
        font-variant-numeric: tabular-nums;
      }
      .info-link {
        color: var(--graphite);
        border-bottom: 1px solid var(--line-strong);
        padding-bottom: 1px;
        transition:
          color 0.25s var(--ease),
          border-color 0.25s var(--ease);
      }
      .info-link:hover {
        color: var(--forest);
        border-color: var(--forest);
      }

      /* Zwei Lieferadressen: Werk 1 / Werk 2 */
      .werke-grid {
        margin-top: clamp(28px, 4vh, 44px);
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(16px, 2vw, 24px);
      }
      .werk-card {
        background: var(--cream-soft);
        border: 1px solid var(--line-strong);
        border-left: 3px solid var(--forest);
        padding: clamp(24px, 3vw, 34px);
      }
      .werk-card .info-value {
        margin-top: 14px;
        line-height: 1.7;
      }

      /* Prozesszeile (Hero unten) */
      .process {
        position: absolute;
        z-index: 2;
        left: 50%;
        transform: translateX(-50%);
        bottom: clamp(20px, 3.4vh, 36px);
        width: 100%;
        max-width: var(--maxw);
        padding: 0 clamp(20px, 4vw, 56px);
        display: flex;
        gap: clamp(14px, 2vw, 30px);
        flex-wrap: wrap;
        align-items: center;
      }
      .process span {
        font-family: "Archivo", sans-serif;
        font-size: clamp(10px, 1vw, 12.5px);
        font-weight: 700;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: rgba(247, 242, 232, 0.78);
        display: inline-flex;
        align-items: center;
        gap: clamp(14px, 2vw, 30px);
      }
      .process span:not(:last-child)::after {
        content: "";
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--carton);
      }

      /* Scroll-Hinweis */
      .scrollhint {
        position: absolute;
        right: clamp(20px, 4vw, 56px);
        bottom: clamp(56px, 9vh, 104px);
        z-index: 2;
        writing-mode: vertical-rl;
        font-family: "Archivo", sans-serif;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.26em;
        text-transform: uppercase;
        color: rgba(247, 242, 232, 0.7);
        display: flex;
        align-items: center;
        gap: 16px;
      }
      .scrollhint::after {
        content: "";
        width: 1.5px;
        height: 54px;
        background: linear-gradient(var(--kraft), transparent);
        animation: scrolldrop 2.2s var(--ease) infinite;
      }
      @keyframes scrolldrop {
        0% {
          transform: scaleY(0);
          transform-origin: top;
          opacity: 0;
        }
        40% {
          transform: scaleY(1);
          transform-origin: top;
          opacity: 1;
        }
        60% {
          transform: scaleY(1);
          transform-origin: bottom;
          opacity: 1;
        }
        100% {
          transform: scaleY(0);
          transform-origin: bottom;
          opacity: 0;
        }
      }

      /* ============================================================
   BILD-PLATZHALTER (bis echte Fotos/Video da sind)
   Material-Look: Kraftpapier + Wellpappe-Struktur
   ============================================================ */
      .placeholder {
        position: relative;
        width: 100%;
        height: 100%;
      }
      .placeholder::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image:
          repeating-linear-gradient(
            98deg,
            rgba(0, 0, 0, 0.05) 0 2px,
            transparent 2px 9px
          ),
          radial-gradient(
            120% 120% at 30% 20%,
            rgba(255, 255, 255, 0.1),
            transparent 55%
          );
        mix-blend-mode: overlay;
      }
      .placeholder::after {
        content: attr(data-note);
        position: absolute;
        top: calc(var(--header-h) + 16px);
        left: clamp(20px, 4vw, 56px);
        font-family: "Archivo", sans-serif;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        white-space: nowrap;
        color: rgba(247, 242, 232, 0.5);
        border: 1px solid rgba(247, 242, 232, 0.22);
        padding: 5px 10px;
      }
      .ph-hero {
        background: linear-gradient(135deg, #4a3a26, #6b5230 45%, #8a6a42 100%);
      }
      .ph-historie {
        background: linear-gradient(135deg, #3a3128, #5a4a36 55%, #7a6244);
      }
      .ph-jobs {
        background: linear-gradient(135deg, #6b5836, #93794b 55%, #b39a6b);
      } /* heller */
      .ph-standort {
        background: linear-gradient(135deg, #3f4334, #5c5c44 55%, #7d7656);
      }
      .ph-kontakt {
        background: linear-gradient(135deg, #4a3a26, #7a5c3a 55%, #9a7a4e);
      }

      /* ============================================================
   FOOTER
   ============================================================ */
      .footer {
        background: var(--graphite);
        color: var(--cream-soft);
        padding: clamp(56px, 9vh, 100px) clamp(20px, 4vw, 56px) 40px;
      }
      .footer__inner {
        max-width: var(--maxw);
        margin: 0 auto;
      }
      .footer__top {
        display: grid;
        grid-template-columns: 1.4fr 1fr 1fr;
        gap: clamp(32px, 5vw, 80px);
        padding-bottom: 56px;
        border-bottom: 1px solid rgba(247, 242, 232, 0.12);
      }
      .footer__brand {
        font-family: "Archivo", sans-serif;
        font-weight: 800;
        font-size: 26px;
        letter-spacing: 0.12em;
      }
      .footer__tagline {
        margin-top: 16px;
        color: rgba(247, 242, 232, 0.55);
        font-size: 14px;
        max-width: 34ch;
      }
      .footer__col h4 {
        font-family: "Archivo", sans-serif;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--kraft);
        margin-bottom: 20px;
      }
      .footer__col ul {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 12px;
      }
      .footer__col a,
      .footer__col address {
        font-size: 14.5px;
        color: rgba(247, 242, 232, 0.78);
        font-style: normal;
        transition: color 0.25s var(--ease);
      }
      .footer__col a:hover {
        color: var(--cream);
      }
      .footer__bottom {
        margin-top: 32px;
        display: flex;
        flex-wrap: wrap;
        gap: 16px 28px;
        align-items: center;
        justify-content: space-between;
      }
      .footer__legal {
        display: flex;
        flex-wrap: wrap;
        gap: 22px;
      }
      .footer__legal a {
        font-size: 13px;
        color: rgba(247, 242, 232, 0.6);
        transition: color 0.25s var(--ease);
      }
      .footer__legal a:hover {
        color: var(--cream);
      }
      .footer__copy {
        font-size: 13px;
        color: rgba(247, 242, 232, 0.45);
      }

      /* ============================================================
   REVEAL-ANIMATIONEN
   ============================================================ */
      /* Nur ausblenden, wenn JS aktiv ist (html.js). Ohne JS -> Text sichtbar. */
      html.js .reveal > * {
        opacity: 0;
        transform: translateY(34px);
        transition:
          opacity 0.8s var(--ease),
          transform 0.9s var(--ease);
      }
      html.js .reveal.in > * {
        opacity: 1;
        transform: translateY(0);
      }
      .reveal.in > *:nth-child(1) {
        transition-delay: 0.05s;
      }
      .reveal.in > *:nth-child(2) {
        transition-delay: 0.16s;
      }
      .reveal.in > *:nth-child(3) {
        transition-delay: 0.28s;
      }
      .reveal.in > *:nth-child(4) {
        transition-delay: 0.4s;
      }

      /* ============================================================
   RESPONSIVE
   ============================================================ */
      @media (max-width: 860px) {
        .nav {
          display: none;
        }
        .burger {
          display: flex;
          margin-left: auto;
        }
        .language-switch {
          margin-left: 8px;
        }
        .footer__top {
          grid-template-columns: 1fr 1fr;
        }
        .footer__brandcol {
          grid-column: 1 / -1;
        }
        .scrollhint {
          display: none;
        }
        .section {
          align-items: flex-end;
        }
        .section--light {
          align-items: flex-start;
        }
        .process {
          gap: 10px 14px;
        }
        /* Info-Sektion: Spalten stapeln */
        .info-grid {
          grid-template-columns: 1fr;
        }
        .info-block {
          padding: 24px 0;
        }
        .info-block + .info-block {
          border-left: none;
          border-top: 1px solid var(--line);
          padding-left: 0;
        }
        .werke-grid {
          grid-template-columns: 1fr;
        }
      }
      @media (max-width: 540px) {
        @supports (mask-image: none) or (-webkit-mask-image: none) {
          .home .header:not(.scrolled) .brand {
            width: clamp(136px, 42vw, 168px);
          }
        }
        .footer__top {
          grid-template-columns: 1fr;
        }
        .actions {
          flex-direction: column;
          align-items: stretch;
        }
        .btn {
          justify-content: center;
        }
        .process span {
          font-size: 9.5px;
          letter-spacing: 0.16em;
        }
        /* Mehr Bodenabstand, damit Content nicht an die (ggf. 2-zeilige) Prozesszeile stößt */
        .section {
          padding-bottom: 124px;
        }
      }

      /* Reduced motion */
      @media (prefers-reduced-motion: reduce) {
        html {
          scroll-behavior: auto;
        }
        .reveal > * {
          opacity: 1 !important;
          transform: none !important;
          transition: none !important;
        }
        .scrollhint::after {
          animation: none;
        }
        .btn::before,
        .btn--ghost::before {
          transition: none;
        }
        * {
          scroll-behavior: auto !important;
        }
      }

/* ============================================================
   SUBPAGES (Jobs, Bewerbung) — kompakter Seiten-Hero + helle Inhalte
   ============================================================ */
.page-hero {
  position: relative;
  min-height: clamp(360px, 56svh, 560px);
  display: flex;
  align-items: flex-end;
  padding: clamp(100px, 14vh, 150px) clamp(20px, 4vw, 56px)
    clamp(40px, 6vh, 64px);
  overflow: hidden;
}
.page-hero .section__inner {
  position: relative;
  z-index: 2;
}
.page-section {
  background: var(--cream);
  padding: clamp(48px, 9vh, 104px) clamp(20px, 4vw, 56px)
    clamp(56px, 10vh, 120px);
}
.page-section__inner {
  max-width: var(--maxw);
  margin: 0 auto;
}
.page-section .chapter-tag {
  color: var(--brown-deep);
}
.group-title {
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--graphite);
  font-size: clamp(28px, 4vw, 48px);
  margin-bottom: clamp(24px, 4vh, 40px);
}
.jobs-group + .jobs-group {
  margin-top: clamp(56px, 9vh, 104px);
}
.page-lede {
  max-width: 60ch;
  margin-bottom: clamp(28px, 5vh, 52px);
  color: rgba(38, 35, 30, 0.78);
  font-size: clamp(16px, 1.5vw, 19px);
}

/* ============================================================
   ACCORDION
   ============================================================ */
.acc-list {
  list-style: none;
  border-top: 1px solid var(--line-strong);
}
.acc {
  border-bottom: 1px solid var(--line-strong);
}
.acc__head {
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "title chev"
    "meta chev";
  align-items: center;
  column-gap: clamp(16px, 3vw, 32px);
  padding: clamp(20px, 3.2vh, 32px) 2px;
  text-align: left;
  color: var(--graphite);
}
.acc__title {
  grid-area: title;
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 1.05;
  font-size: clamp(19px, 2.5vw, 30px);
  transition: color 0.25s var(--ease);
}
.acc__mwd {
  display: inline-block;
  white-space: nowrap;
  color: var(--carton);
  font-weight: 600;
}
.acc__meta {
  grid-area: meta;
  margin-top: 8px;
  font-family: "Archivo", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brown-deep);
}
.acc__chev {
  grid-area: chev;
  width: 28px;
  height: 28px;
  flex: none;
  color: var(--forest);
  transition: transform 0.35s var(--ease);
}
.acc.open .acc__chev {
  transform: rotate(180deg);
}
.acc__head:hover .acc__title {
  color: var(--brown-deep);
}
/* Panel: sanft via max-height (JS setzt die exakte Content-Höhe) */
.acc__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s var(--ease);
}
.acc__panel p {
  max-width: 68ch;
  padding: 0 2px clamp(22px, 3.4vh, 34px);
  color: rgba(38, 35, 30, 0.82);
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.65;
}

/* ============================================================
   FORMULAR (Bewerbung)
   ============================================================ */
.form {
  max-width: 760px;
}
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 24px);
}
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: clamp(18px, 2.6vh, 28px);
}
.field label {
  font-family: "Archivo", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brown-deep);
}
.req {
  color: var(--terracotta);
}
.field input,
.field textarea {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  color: var(--graphite);
  background: var(--cream-soft);
  border: 1px solid var(--line-strong);
  padding: 14px 16px;
  width: 100%;
  min-height: 52px;
  transition:
    border-color 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}
.field textarea {
  min-height: 150px;
  resize: vertical;
  line-height: 1.6;
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--forest);
  box-shadow: 0 0 0 3px rgba(44, 71, 51, 0.16);
}
.field .hint {
  font-size: 13px;
  color: rgba(38, 35, 30, 0.6);
}
/* Datei-Upload (rein nativ, kein JS) */
.field input[type="file"] {
  min-height: auto;
  padding: 0;
  border: 1px dashed var(--line-strong);
  background: var(--cream-soft);
  cursor: pointer;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: rgba(38, 35, 30, 0.7);
}
.field input[type="file"]::file-selector-button {
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--forest);
  color: var(--cream-soft);
  border: 0;
  padding: 16px 20px;
  margin-right: 16px;
  cursor: pointer;
  transition: background 0.2s var(--ease);
}
.field input[type="file"]::file-selector-button:hover {
  background: var(--brown-deep);
}
.form__actions {
  margin-top: clamp(20px, 3vh, 32px);
}
.form__actions .btn[disabled] {
  cursor: wait;
  opacity: 0.68;
}
.form-trap {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}
.form-status {
  margin-top: 18px;
  border: 1px solid var(--line-strong);
  border-left-width: 3px;
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.55;
}
.form-status[hidden] {
  display: none;
}
.form-status.is-success {
  border-left-color: var(--forest);
  background: rgba(44, 71, 51, 0.08);
  color: var(--forest);
}
.form-status.is-error {
  border-left-color: var(--terracotta);
  background: rgba(176, 83, 54, 0.08);
  color: var(--brown-deep);
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"],
.field select[aria-invalid="true"] {
  border-color: var(--terracotta);
}

/* Zweispaltiges Layout: Formular links, Info-Spalte rechts */
.form-layout {
  display: grid;
  grid-template-columns: minmax(0, 760px) minmax(300px, 1fr);
  column-gap: clamp(40px, 6vw, 96px);
}
.form-layout .form {
  max-width: none;
}

/* Spalte streckt sich über die Zeilenhöhe, damit die Karte darin kleben kann */
.form-aside__inner {
  position: sticky;
  top: calc(var(--header-h) + clamp(20px, 3vh, 36px));
  background: var(--cream-soft);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--forest);
  padding: clamp(26px, 2.6vw, 36px);
}
.aside-block + .aside-block {
  margin-top: clamp(26px, 3.4vh, 36px);
  padding-top: clamp(26px, 3.4vh, 36px);
  border-top: 1px solid var(--line);
}
.aside-steps {
  list-style: none;
  counter-reset: step;
}
.aside-steps li {
  counter-increment: step;
  position: relative;
  padding-left: 38px;
  color: rgba(38, 35, 30, 0.82);
  font-size: 15px;
  line-height: 1.6;
}
.aside-steps li + li {
  margin-top: 18px;
}
.aside-steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1px;
  font-family: "Archivo", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--carton);
}
.aside-steps strong {
  display: block;
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 14px;
  color: var(--graphite);
  margin-bottom: 3px;
}
.form-aside__inner .info-value {
  font-size: 17px;
}
.form-aside__inner .info-value + .info-value {
  margin-top: 8px;
}
.aside-note {
  color: rgba(38, 35, 30, 0.78);
  font-size: 15px;
  line-height: 1.6;
}

/* ============================================================
   SUBPAGE RESPONSIVE
   ============================================================ */
@media (max-width: 1040px) {
  .form-layout {
    grid-template-columns: 1fr;
    row-gap: clamp(36px, 5vh, 56px);
  }
  .form-aside__inner {
    position: static;
    max-width: 760px;
  }
}
@media (max-width: 640px) {
  .form__row {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   FORMULAR — Select + Multi-Datei-Upload
   ============================================================ */
.select-wrap {
  position: relative;
}
.field select {
  appearance: none;
  -webkit-appearance: none;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  color: var(--graphite);
  background: var(--cream-soft);
  border: 1px solid var(--line-strong);
  padding: 14px 48px 14px 16px;
  width: 100%;
  min-height: 52px;
  cursor: pointer;
  transition:
    border-color 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}
.field select:focus {
  outline: none;
  border-color: var(--forest);
  box-shadow: 0 0 0 3px rgba(44, 71, 51, 0.16);
}
/* Platzhalter-Optik, solange nichts gewählt ist */
.field select:invalid {
  color: rgba(38, 35, 30, 0.5);
}
.select-chev {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  color: var(--forest);
  pointer-events: none;
}

/* Datei-Liste */
.file-list {
  list-style: none;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.file-list:empty {
  display: none;
}
.file-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--cream-soft);
  border: 1px solid var(--line-strong);
  padding: 10px 12px;
}
.file-item__name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  color: var(--graphite);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-item__size {
  font-size: 12px;
  color: rgba(38, 35, 30, 0.6);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.file-remove {
  flex: none;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line-strong);
  cursor: pointer;
  color: var(--graphite);
  transition:
    background 0.2s var(--ease),
    color 0.2s var(--ease),
    border-color 0.2s var(--ease);
}
.file-remove:hover {
  background: var(--terracotta);
  color: #fff;
  border-color: var(--terracotta);
}
.file-error {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--terracotta);
}
.file-error:empty {
  display: none;
}
/* ============================================================
   TIMELINE (Historie) — zentrale Achse, alternierend (Kering-inspiriert),
   in warmer PO-Palette. Eigentümerwechsel = zentrierte Variante.
   ============================================================ */
.timeline {
  position: relative;
  margin: 0 auto;
}
/* Achslinie als Segmente pro Eintrag -> erlaubt eine Lücke am zentrierten
   Eigentümerwechsel (Linie endet oben, startet darunter neu). */
.tl-item::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: var(--line-strong);
  z-index: 0;
}
.tl-item--center::after {
  display: none;
}

.tl-intro {
  max-width: 60ch;
  margin: 0 auto clamp(48px, 9vh, 96px);
  text-align: center;
  color: rgba(38, 35, 30, 0.82);
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.6;
}

.tl-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(48px, 9vw, 130px);
  align-items: center;
  padding: clamp(26px, 5.5vh, 68px) 0;
}
/* Knoten auf der Achse */
.tl-item::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--forest);
  box-shadow: 0 0 0 5px var(--cream);
  z-index: 1;
}

.tl-text-col {
  text-align: center;
}
.tl-media-col {
  display: flex;
  justify-content: center;
}

/* Alternierende Seiten (DOM-Reihenfolge immer Bild -> Text).
   grid-row: 1 zwingt beide Spalten in DIESELBE Zeile, sonst schiebt das
   Auto-Placement bei getauschten Spalten den Text in eine zweite Zeile. */
.tl-item--left .tl-media-col {
  grid-column: 1;
  grid-row: 1;
}
.tl-item--left .tl-text-col {
  grid-column: 2;
  grid-row: 1;
}
.tl-item--right .tl-text-col {
  grid-column: 1;
  grid-row: 1;
}
.tl-item--right .tl-media-col {
  grid-column: 2;
  grid-row: 1;
}

/* Zentriert — Eigentümerwechsel */
.tl-item--center {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}
.tl-item--center .tl-media-col,
.tl-item--center .tl-text-col {
  grid-column: 1;
  max-width: 660px;
}
.tl-item--center .tl-media {
  margin-bottom: clamp(22px, 3vh, 32px);
}
/* auf der Achse liegendes Bild -> kein separater Knoten nötig */
.tl-item--center::before {
  display: none;
}

.tl-year {
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 4.2vw, 58px);
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--graphite);
}
.tl-date {
  display: block;
  font-family: "Archivo", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--carton);
  margin-bottom: 14px;
}
.tl-kicker {
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: clamp(13px, 1.4vw, 16px);
  color: var(--brown-deep);
  margin-top: 16px;
}
.tl-text {
  margin: 16px auto 0;
  max-width: 44ch;
  color: rgba(38, 35, 30, 0.82);
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.7;
}

/* Runde Timeline-Bilder */
.tl-media {
  aspect-ratio: 1 / 1;
  width: clamp(220px, 30vw, 384px);
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background:
    repeating-linear-gradient(
      98deg,
      rgba(0, 0, 0, 0.035) 0 2px,
      transparent 2px 10px
    ),
    linear-gradient(135deg, var(--sand), var(--kraft));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.tl-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* ---- Mobile: einspaltig, linke Achse ---- */
@media (max-width: 820px) {
  .tl-item::after {
    left: 7px;
  }
  /* Auf Mobile läuft die linke Achse durch (kein Bruch am Eigentümerwechsel) */
  .tl-item--center::after {
    display: block;
  }
  .tl-item,
  .tl-item--left,
  .tl-item--right,
  .tl-item--center {
    grid-template-columns: 1fr;
    justify-items: start;
    text-align: left;
    padding: clamp(24px, 5vh, 44px) 0 clamp(24px, 5vh, 44px) 34px;
  }
  .tl-item::before {
    left: 7px;
    top: 14px;
    transform: translate(-50%, 0);
  }
  .tl-item--center::before {
    display: block;
  }
  .tl-item--left .tl-media-col,
  .tl-item--left .tl-text-col,
  .tl-item--right .tl-media-col,
  .tl-item--right .tl-text-col,
  .tl-item--center .tl-media-col,
  .tl-item--center .tl-text-col {
    grid-column: 1;
    grid-row: auto;
    max-width: none;
  }
  .tl-media-col {
    justify-content: flex-start;
    margin-bottom: 20px;
  }
  .tl-text-col,
  .tl-item--center .tl-text-col {
    text-align: left;
  }
  .tl-text,
  .tl-item--center .tl-text {
    margin-left: 0;
    margin-right: 0;
    max-width: 60ch;
  }
  .tl-media,
  .tl-item--center .tl-media {
    width: clamp(170px, 56vw, 280px);
    margin-bottom: 20px;
  }
  .tl-intro {
    text-align: left;
    margin-left: 0;
  }
}

/* ============================================================
   KONTAKT — Karten-Einbettung (Route) + Route-Link
   ============================================================ */
.werke-block {
  margin-top: clamp(48px, 8vh, 88px);
}
.werk-map {
  width: 100%;
  margin-top: 18px;
  border: 1px solid var(--line-strong);
  background: var(--sand);
  overflow: hidden;
}
.werk-map img {
  width: 100%;
  height: auto;
  display: block;
}
.map-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-family: "Archivo", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--forest);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition:
    gap 0.25s var(--ease),
    border-color 0.25s var(--ease);
}
.map-link:hover {
  gap: 12px;
  border-color: var(--forest);
}

/* ============================================================
   LEGAL-SEITEN (Impressum, Datenschutz)
   ============================================================ */
.page-hero--solid {
  background: var(--graphite);
  min-height: clamp(280px, 40svh, 420px);
}
.legal {
  max-width: 760px;
}
.legal h2 {
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(17px, 1.9vw, 23px);
  color: var(--brown-deep);
  margin: clamp(32px, 5vh, 48px) 0 12px;
}
.legal h2:first-child {
  margin-top: 0;
}
.legal p,
.legal address {
  color: rgba(38, 35, 30, 0.85);
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.7;
  font-style: normal;
  margin-bottom: 14px;
  max-width: 68ch;
}
.legal a {
  color: var(--forest);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease);
}
.legal a:hover {
  border-color: var(--forest);
}
.legal strong {
  font-weight: 600;
  color: var(--graphite);
}
.legal__note {
  margin-top: clamp(32px, 5vh, 48px);
  padding: 16px 18px;
  border-left: 3px solid var(--carton);
  background: var(--cream-soft);
  font-size: 14px;
  color: rgba(38, 35, 30, 0.72);
}

/* Datenschutz: Unter-Überschriften + Aufzählungen */
.legal h3 {
  font-family: "Archivo", sans-serif;
  font-weight: 600;
  font-size: clamp(15px, 1.5vw, 18px);
  color: var(--graphite);
  margin: 22px 0 8px;
}
.legal-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  max-width: 68ch;
}
.legal-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 7px;
  color: rgba(38, 35, 30, 0.85);
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.6;
}
.legal-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  background: var(--carton);
  border-radius: 50%;
}

/* ============================================================
   PRODUKTION — Prozess-Schritte, Bauarten, Kennzahlen
   ============================================================ */

/* Bildplatzhalter im Wellpappen-Look (wie .tl-media, aber rechteckig) */
.prod-media {
  aspect-ratio: 4 / 3;
  width: 100%;
  border: 1px solid var(--line-strong);
  background:
    repeating-linear-gradient(
      98deg,
      rgba(0, 0, 0, 0.035) 0 2px,
      transparent 2px 10px
    ),
    linear-gradient(135deg, var(--sand), var(--kraft));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 3vw, 34px);
}
.prod-media span {
  font-family: "Archivo", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.6;
  text-align: center;
  color: var(--brown-deep);
  opacity: 0.75;
  border: 1px solid var(--line-strong);
  padding: 8px 12px;
  background: rgba(251, 247, 239, 0.5);
  max-width: 34ch;
}

/* Prozess-Schritte: Medium und Text wechseln die Seite */
.steps {
  margin-top: clamp(40px, 7vh, 80px);
}
.step {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(40px, 6vw, 96px);
  align-items: center;
  padding: clamp(32px, 6vh, 76px) 0;
}
.step + .step {
  border-top: 1px solid var(--line);
}
.step__media {
  grid-column: 1;
  grid-row: 1;
}
.step__body {
  grid-column: 2;
  grid-row: 1;
}
.step--flip .step__media {
  grid-column: 2;
}
.step--flip .step__body {
  grid-column: 1;
}
.step__num {
  display: block;
  font-family: "Archivo", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--carton);
  margin-bottom: 12px;
}
.step__title {
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.05;
  font-size: clamp(24px, 3.2vw, 40px);
  color: var(--graphite);
  margin-bottom: clamp(14px, 2vh, 20px);
}
.step__text {
  max-width: 46ch;
  color: rgba(38, 35, 30, 0.82);
  font-size: clamp(15px, 1.45vw, 17px);
  line-height: 1.7;
}

/* Kompakte Fakten-Liste unter einem Schritt */
.spec-list {
  list-style: none;
  margin-top: clamp(18px, 2.6vh, 26px);
  border-top: 1px solid var(--line);
  max-width: 46ch;
}
.spec-list li {
  display: grid;
  grid-template-columns: minmax(96px, 30%) 1fr;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.5;
  color: rgba(38, 35, 30, 0.82);
}
.spec-list b {
  font-family: "Archivo", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brown-deep);
  padding-top: 2px;
}

/* Bauarten-Raster */
.cap-grid {
  margin-top: clamp(28px, 4vh, 44px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
.cap-card {
  background: var(--cream-soft);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--forest);
  padding: clamp(22px, 2.4vw, 32px);
}
.cap-card h3 {
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(15px, 1.5vw, 18px);
  color: var(--graphite);
  margin-bottom: 10px;
}
.cap-card p {
  color: rgba(38, 35, 30, 0.8);
  font-size: 15px;
  line-height: 1.6;
}

/* Kennzahlen-Band */
.fact-grid {
  margin-top: clamp(28px, 4vh, 44px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line-strong);
}
.fact {
  padding: clamp(24px, 3vh, 34px) 30px clamp(24px, 3vh, 34px) 0;
}
.fact + .fact {
  border-left: 1px solid var(--line);
  padding-left: 30px;
}
.fact__value {
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  line-height: 1.05;
  font-size: clamp(22px, 2.6vw, 34px);
  color: var(--graphite);
  margin-bottom: 8px;
}
.fact__label {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(38, 35, 30, 0.75);
}

@media (max-width: 900px) {
  .step {
    grid-template-columns: 1fr;
    row-gap: clamp(22px, 3.4vh, 32px);
  }
  .step__media,
  .step__body,
  .step--flip .step__media,
  .step--flip .step__body {
    grid-column: 1;
  }
  .step__media {
    grid-row: 1;
  }
  .step__body {
    grid-row: 2;
  }
  .cap-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .fact-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .fact:nth-child(odd) {
    border-left: 0;
    padding-left: 0;
  }
  .fact:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }
}
@media (max-width: 560px) {
  .cap-grid,
  .fact-grid {
    grid-template-columns: 1fr;
  }
  .fact + .fact {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--line);
  }
  .spec-list li {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}