/* ========================================================================== KUPFER MOMENT – styles.css Reihenfolge: Tokens → Font → Themes → Basis → Header/Nav → Sections → Komponenten → Footer → Reveal → Reduced Motion Massstab: fluide Typo- und Abstandsskala (siehe Tokens), kalibriert auf das Design bei 1920 px. ========================================================================== */ /* 1. Globale Brand Tokens (Brand Guidelines v1.0) ------------------------- */ :root { --km-kupfer: #B86442; --km-nachtpetrol: #071D20; --km-warmgrau: #8B8581; --km-weiss: #FFFFFF; --km-mitternacht: #170D1C; --km-flieder: #CC96FC; --km-koralle: #FF6B67; --km-puder: #FEE1D4; --km-sonnengelb: #FFD84D; --km-lagune: #19C6B3; --km-azur: #2878FF; --km-nebel: #EAF0E9; --km-bordeaux: #5A1628; /* Fluide Skala (Utopia-Methode): 390 → 1920 px, Basis 16 → 20 px, Ratio 1.2 → 1.25 (Minor → Major Third). Alle Grössen, Abstände und Masse leiten sich daraus ab: Typo in Stufen, Abstände als Vielfache der Basis. */ --step--1: clamp(0.833rem, 0.791rem + 0.174vw, 1.000rem); --step-0: clamp(1.000rem, 0.936rem + 0.261vw, 1.250rem); --step-1: clamp(1.200rem, 1.108rem + 0.379vw, 1.562rem); --step-2: clamp(1.440rem, 1.309rem + 0.537vw, 1.953rem); --step-3: clamp(1.728rem, 1.546rem + 0.746vw, 2.441rem); --step-4: clamp(2.074rem, 1.824rem + 1.023vw, 3.052rem); --step-5: clamp(2.488rem, 2.150rem + 1.387vw, 3.815rem); --space-xs: clamp(0.500rem, 0.468rem + 0.131vw, 0.625rem); --space-s: clamp(1.000rem, 0.936rem + 0.261vw, 1.250rem); --space-m: clamp(1.500rem, 1.404rem + 0.392vw, 1.875rem); --space-l: clamp(2.000rem, 1.873rem + 0.523vw, 2.500rem); --space-xl: clamp(3.000rem, 2.809rem + 0.784vw, 3.750rem); --space-2xl: clamp(4.000rem, 3.745rem + 1.046vw, 5.000rem); --space-3xl: clamp(6.000rem, 5.618rem + 1.569vw, 7.500rem); --fs-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem); /* Footer-Meta, Bildunterschriften */ --fs-small: var(--step--1); --fs-nav: var(--step--1); --fs-body: var(--step-0); --fs-toc: var(--step-1); --fs-h2: var(--step-3); --fs-h1: var(--step-5); --lh-tight: 1; /* Headlines */ --lh-snug: 1.2; /* Liste, Nav, Button */ --lh-body: 1.5; /* Fliesstext */ --rule: color-mix(in srgb, var(--section-fg) 18%, transparent); /* Trennlinien, folgen der Textfarbe */ --container-max: 1200px; --header-height: clamp(6.000rem, 4.725rem + 5.229vw, 11.000rem); /* Nav-Mitte bei 88 px auf 1920; Minimum fasst das 160-px-Logo */ --section-padding: var(--space-3xl); --logo-width: clamp(10rem, calc(var(--fs-body) * 9), 11.25rem); /* 9 × Basis = 180 px auf 1920; Minimum 160 px gemäss Guidelines */ --icon-width: calc(var(--logo-width) / 2); --hero-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0.002 941 218.589%22%3E%3Cg transform=%22translate%28-1211.723,-562.866%29 scale%281.60817%29%22%3E%3Cpath fill=%22%23fff%22 fill-rule=%22evenodd%22 d=%22M1291.51,433.074L1285.04,433.074L1285.04,483.933C1285.04,485.035,1284.15,485.929,1283.05,485.929L1240.4,485.929C1239.3,485.929,1238.4,485.035,1238.4,483.933L1238.4,352.001C1238.4,350.899,1239.3,350.005,1240.4,350.005L1314.83,350.005C1324.03,350.005,1330.41,352.363,1334.09,356.735C1336.62,359.737,1337.94,363.721,1337.94,368.723L1337.94,407.127C1337.94,410.896,1336.83,413.822,1334.76,415.952C1334.04,416.693,1333.19,417.341,1332.22,417.889C1333.25,418.468,1334.15,419.151,1334.91,419.931C1337.02,422.1,1338.14,425.044,1338.14,428.806L1338.14,483.933C1338.14,485.035,1337.25,485.929,1336.15,485.929L1293.5,485.929C1292.4,485.929,1291.51,485.035,1291.51,483.933L1291.51,433.074ZM1291.51,402.86L1291.51,387.032L1285.04,387.032L1285.04,402.86L1291.51,402.86ZM1114.06,387.032L1114.06,391.091L1148.96,391.091C1150.06,391.091,1150.96,391.985,1150.96,393.087L1150.96,426.122C1150.96,427.224,1150.06,428.118,1148.96,428.118L1114.06,428.118L1114.06,483.933C1114.06,485.035,1113.16,485.929,1112.06,485.929L1069.41,485.929C1068.31,485.929,1067.42,485.035,1067.42,483.933L1067.42,368.723C1067.42,363.718,1068.75,359.732,1071.31,356.728C1075.02,352.361,1081.45,350.005,1090.74,350.005L1149.37,350.005C1150.48,350.005,1151.37,350.899,1151.37,352.001L1151.37,385.036C1151.37,386.138,1150.48,387.032,1149.37,387.032L1114.06,387.032ZM903.908,449.11L910.373,449.11L910.373,352.001C910.373,350.899,911.267,350.005,912.369,350.005L955.014,350.005C956.116,350.005,957.01,350.899,957.01,352.001L957.01,467.623C957.01,472.527,955.671,476.432,953.106,479.374C949.396,483.629,942.962,485.929,933.691,485.929L880.59,485.929C871.317,485.929,864.883,483.629,861.174,479.373C858.61,476.431,857.271,472.527,857.271,467.623L857.271,352.001C857.271,350.899,858.165,350.005,859.267,350.005L901.912,350.005C903.014,350.005,903.908,350.899,903.908,352.001L903.908,449.11ZM982.507,485.929L965.47,485.929C964.368,485.929,963.474,485.035,963.474,483.933L963.474,352.001C963.474,350.899,964.368,350.005,965.47,350.005L1039.89,350.005C1049.17,350.005,1055.61,352.361,1059.32,356.728C1061.88,359.732,1063.21,363.718,1063.21,368.723L1063.21,417.863C1063.21,422.87,1061.88,426.856,1059.32,429.86C1055.61,434.228,1049.17,436.584,1039.89,436.584L1010.11,436.584L1010.11,478.688C1010.11,479.542,1009.57,480.302,1008.76,480.577C1007.95,480.853,1007.05,480.583,1006.53,479.906C1006.32,479.629,1006.08,479.36,1005.82,479.098C1004.45,477.731,1002.14,477.239,999.199,477.887C994.907,478.832,988.847,482.18,983.598,485.605C983.274,485.816,982.895,485.929,982.507,485.929ZM1016.58,401.416L1016.58,387.032L1010.11,387.032L1010.11,401.416L1016.58,401.416ZM1192.79,485.929L1157.78,485.929C1156.68,485.929,1155.78,485.035,1155.78,483.933L1155.78,352.001C1155.78,350.899,1156.68,350.005,1157.78,350.005L1229.94,350.005C1231.05,350.005,1231.94,350.899,1231.94,352.001L1231.94,385.036C1231.94,386.138,1231.05,387.032,1229.94,387.032L1202.42,387.032L1202.42,399.557L1229.54,399.557C1230.64,399.557,1231.53,400.451,1231.53,401.553L1231.53,434.588C1231.53,435.69,1230.64,436.584,1229.54,436.584L1202.42,436.584L1202.42,449.11L1230.15,449.11C1231.25,449.11,1232.15,450.004,1232.15,451.106L1232.15,483.933C1232.15,485.035,1231.25,485.929,1230.15,485.929L1217.44,485.929C1216.76,485.929,1216.13,485.586,1215.76,485.018C1215.4,484.45,1215.34,483.734,1215.62,483.117C1215.86,482.568,1216.06,482.067,1216.2,481.608C1216.44,480.823,1216.52,480.021,1216.57,479.471C1216.59,479.236,1216.57,478.925,1216.51,478.629C1216.45,478.275,1216.39,477.938,1216.25,477.557C1216.09,477.128,1215.76,476.497,1215.38,476.053C1214.96,475.55,1214.17,474.874,1213.47,474.448C1213.11,474.227,1212.69,474.06,1212.3,473.943C1211.95,473.839,1211.64,473.759,1211.23,473.758C1210.41,473.757,1209.01,473.905,1207.7,474.428C1204.07,475.87,1199.11,479.967,1194.27,485.278C1193.89,485.692,1193.36,485.929,1192.79,485.929ZM808.771,484.666L798.68,459.116L798.68,483.933C798.68,485.035,797.786,485.929,796.684,485.929L755.477,485.929C754.375,485.929,753.481,485.035,753.481,483.933L753.481,352.001C753.481,350.899,754.375,350.005,755.477,350.005L796.684,350.005C797.786,350.005,798.68,350.899,798.68,352.001L798.68,374.723L807.53,351.296C807.823,350.519,808.567,350.005,809.397,350.005L854.296,350.005C854.976,350.005,855.61,350.352,855.977,350.925C856.344,351.498,856.393,352.219,856.108,352.837L827.171,415.607L857.348,483.119C857.624,483.736,857.569,484.451,857.201,485.019C856.833,485.586,856.202,485.929,855.526,485.929L810.627,485.929C809.808,485.929,809.072,485.428,808.771,484.666Z%22/%3E%3C/g%3E%3C/svg%3E"); --pattern-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 62 84%22%3E%3Cg transform=%22translate%285.5 3.0%29%22%3E%3Cg transform=%22matrix%280.205893,0,0,0.205893,-156.605,-94.2585%29%22%3E%3Cpath d=%22M962.666,571.176C971.451,564.072 974.122,563.964 962.141,575.433C953.517,583.688 938.001,598.522 933.68,598.338C928.594,598.117 928.152,594.579 930.363,588.387C932.574,582.196 943.189,560.967 952.255,545.93C961.321,530.894 983.877,497.503 983.877,497.503C971.493,505.464 934.343,536.422 920.854,550.132C907.366,563.842 879.945,592.81 874.859,597.675C869.773,602.54 866.678,600.992 869.552,595.242C872.427,589.493 888.348,565.832 896.751,550.574C905.154,535.316 925.719,503.695 925.719,503.695C927.101,501.483 926.825,500.93 923.01,502.755C919.196,504.579 898.797,517.847 887.187,525.808C875.578,533.768 839.589,560.304 821.18,575.396C802.771,590.488 782.206,609.726 776.401,616.526C770.597,623.326 764.958,630.789 761.973,630.623C758.987,630.457 761.862,625.537 761.862,625.537C776.678,602.982 830.191,558.535 843.901,548.363C857.611,538.191 905.265,504.091 912.894,499.272C922.347,493.301 935.228,485.783 940.093,490.648C944.958,495.513 938.103,507.675 930.363,520.279C922.624,532.884 901.395,562.073 901.395,562.073C924.614,537.97 975.031,494.186 982.771,488.879C990.51,483.572 1001.12,477.601 1004.22,480.697C1007.32,483.793 1005.11,488.437 1001.79,493.301C998.471,498.166 940.977,587.503 940.977,587.503C948.459,582.509 957.802,575.11 962.666,571.176ZM795.721,576.267C795.721,578.133 794.205,579.648 792.339,579.648C790.473,579.648 788.958,578.133 788.958,576.267L788.958,461.185C788.958,459.317 790.472,457.803 792.339,457.803L849.325,457.803C851.192,457.803 852.706,459.317 852.706,461.185L852.706,489.204L863.743,459.99C864.24,458.674 865.499,457.803 866.906,457.803L928.997,457.803C930.15,457.803 931.224,458.391 931.845,459.362C932.467,460.333 932.551,461.553 932.068,462.6L923.574,481.026C922.792,482.721 920.782,483.463 919.087,482.682C917.392,481.9 916.651,479.89 917.432,478.195L923.715,464.566L869.243,464.566L852.488,508.918C851.911,510.445 850.324,511.342 848.718,511.049C847.111,510.756 845.944,509.356 845.944,507.723L845.944,464.566L795.721,464.566L795.721,576.267ZM845.944,569.655C845.944,567.789 847.459,566.273 849.325,566.273C851.191,566.273 852.706,567.789 852.706,569.655L852.706,597.262C852.706,599.129 851.192,600.643 849.325,600.643L812.868,600.643C811.002,600.643 809.486,599.128 809.486,597.262C809.486,595.396 811.002,593.88 812.868,593.88L845.944,593.88L845.944,569.655Z%22/%3E%3C/g%3E%3C/g%3E%3Cg transform=%22translate%2836.5 45.0%29%22%3E%3Cg transform=%22matrix%280.205893,0,0,0.205893,-156.605,-94.2585%29%22%3E%3Cpath d=%22M962.666,571.176C971.451,564.072 974.122,563.964 962.141,575.433C953.517,583.688 938.001,598.522 933.68,598.338C928.594,598.117 928.152,594.579 930.363,588.387C932.574,582.196 943.189,560.967 952.255,545.93C961.321,530.894 983.877,497.503 983.877,497.503C971.493,505.464 934.343,536.422 920.854,550.132C907.366,563.842 879.945,592.81 874.859,597.675C869.773,602.54 866.678,600.992 869.552,595.242C872.427,589.493 888.348,565.832 896.751,550.574C905.154,535.316 925.719,503.695 925.719,503.695C927.101,501.483 926.825,500.93 923.01,502.755C919.196,504.579 898.797,517.847 887.187,525.808C875.578,533.768 839.589,560.304 821.18,575.396C802.771,590.488 782.206,609.726 776.401,616.526C770.597,623.326 764.958,630.789 761.973,630.623C758.987,630.457 761.862,625.537 761.862,625.537C776.678,602.982 830.191,558.535 843.901,548.363C857.611,538.191 905.265,504.091 912.894,499.272C922.347,493.301 935.228,485.783 940.093,490.648C944.958,495.513 938.103,507.675 930.363,520.279C922.624,532.884 901.395,562.073 901.395,562.073C924.614,537.97 975.031,494.186 982.771,488.879C990.51,483.572 1001.12,477.601 1004.22,480.697C1007.32,483.793 1005.11,488.437 1001.79,493.301C998.471,498.166 940.977,587.503 940.977,587.503C948.459,582.509 957.802,575.11 962.666,571.176ZM795.721,576.267C795.721,578.133 794.205,579.648 792.339,579.648C790.473,579.648 788.958,578.133 788.958,576.267L788.958,461.185C788.958,459.317 790.472,457.803 792.339,457.803L849.325,457.803C851.192,457.803 852.706,459.317 852.706,461.185L852.706,489.204L863.743,459.99C864.24,458.674 865.499,457.803 866.906,457.803L928.997,457.803C930.15,457.803 931.224,458.391 931.845,459.362C932.467,460.333 932.551,461.553 932.068,462.6L923.574,481.026C922.792,482.721 920.782,483.463 919.087,482.682C917.392,481.9 916.651,479.89 917.432,478.195L923.715,464.566L869.243,464.566L852.488,508.918C851.911,510.445 850.324,511.342 848.718,511.049C847.111,510.756 845.944,509.356 845.944,507.723L845.944,464.566L795.721,464.566L795.721,576.267ZM845.944,569.655C845.944,567.789 847.459,566.273 849.325,566.273C851.191,566.273 852.706,567.789 852.706,569.655L852.706,597.262C852.706,599.129 851.192,600.643 849.325,600.643L812.868,600.643C811.002,600.643 809.486,599.128 809.486,597.262C809.486,595.396 811.002,593.88 812.868,593.88L845.944,593.88L845.944,569.655Z%22/%3E%3C/g%3E%3C/g%3E%3Cg transform=%22translate%28-25.5 45.0%29%22%3E%3Cg transform=%22matrix%280.205893,0,0,0.205893,-156.605,-94.2585%29%22%3E%3Cpath d=%22M962.666,571.176C971.451,564.072 974.122,563.964 962.141,575.433C953.517,583.688 938.001,598.522 933.68,598.338C928.594,598.117 928.152,594.579 930.363,588.387C932.574,582.196 943.189,560.967 952.255,545.93C961.321,530.894 983.877,497.503 983.877,497.503C971.493,505.464 934.343,536.422 920.854,550.132C907.366,563.842 879.945,592.81 874.859,597.675C869.773,602.54 866.678,600.992 869.552,595.242C872.427,589.493 888.348,565.832 896.751,550.574C905.154,535.316 925.719,503.695 925.719,503.695C927.101,501.483 926.825,500.93 923.01,502.755C919.196,504.579 898.797,517.847 887.187,525.808C875.578,533.768 839.589,560.304 821.18,575.396C802.771,590.488 782.206,609.726 776.401,616.526C770.597,623.326 764.958,630.789 761.973,630.623C758.987,630.457 761.862,625.537 761.862,625.537C776.678,602.982 830.191,558.535 843.901,548.363C857.611,538.191 905.265,504.091 912.894,499.272C922.347,493.301 935.228,485.783 940.093,490.648C944.958,495.513 938.103,507.675 930.363,520.279C922.624,532.884 901.395,562.073 901.395,562.073C924.614,537.97 975.031,494.186 982.771,488.879C990.51,483.572 1001.12,477.601 1004.22,480.697C1007.32,483.793 1005.11,488.437 1001.79,493.301C998.471,498.166 940.977,587.503 940.977,587.503C948.459,582.509 957.802,575.11 962.666,571.176ZM795.721,576.267C795.721,578.133 794.205,579.648 792.339,579.648C790.473,579.648 788.958,578.133 788.958,576.267L788.958,461.185C788.958,459.317 790.472,457.803 792.339,457.803L849.325,457.803C851.192,457.803 852.706,459.317 852.706,461.185L852.706,489.204L863.743,459.99C864.24,458.674 865.499,457.803 866.906,457.803L928.997,457.803C930.15,457.803 931.224,458.391 931.845,459.362C932.467,460.333 932.551,461.553 932.068,462.6L923.574,481.026C922.792,482.721 920.782,483.463 919.087,482.682C917.392,481.9 916.651,479.89 917.432,478.195L923.715,464.566L869.243,464.566L852.488,508.918C851.911,510.445 850.324,511.342 848.718,511.049C847.111,510.756 845.944,509.356 845.944,507.723L845.944,464.566L795.721,464.566L795.721,576.267ZM845.944,569.655C845.944,567.789 847.459,566.273 849.325,566.273C851.191,566.273 852.706,567.789 852.706,569.655L852.706,597.262C852.706,599.129 851.192,600.643 849.325,600.643L812.868,600.643C811.002,600.643 809.486,599.128 809.486,597.262C809.486,595.396 811.002,593.88 812.868,593.88L845.944,593.88L845.944,569.655Z%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); --pattern-size: clamp(3.5rem, 3.9vw, 4.75rem); /* Kachelbreite ≈ 75 px auf 1920, Monogramm ≈ 60 px, dichte Textur */ --icon-mask: url("data:image/svg+xml,%3Csvg width=%22100%25%22 height=%22100%25%22 viewBox=%220 0 74 74%22 version=%221.1%22 xmlns=%22http://www.w3.org/2000/svg%22 xml:space=%22preserve%22 style=%22fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;%22%3E %3Cg transform=%22matrix%281,0,0,1,-412.996,-79.0788%29%22%3E %3Cg id=%22Icon%22 transform=%22matrix%280.205893,0,0,0.205893,268.771,3.91733%29%22%3E %3Cpath d=%22M879.649,365.051C978.532,365.051 1058.81,445.332 1058.81,544.215C1058.81,643.098 978.532,723.378 879.649,723.378C780.766,723.378 700.486,643.098 700.486,544.215C700.486,445.332 780.766,365.051 879.649,365.051ZM879.649,371.814C784.499,371.814 707.249,449.064 707.249,544.215C707.249,639.365 784.499,716.615 879.649,716.615C974.8,716.615 1052.05,639.365 1052.05,544.215C1052.05,449.064 974.8,371.814 879.649,371.814ZM962.666,571.176C971.451,564.072 974.122,563.964 962.141,575.433C953.517,583.688 938.001,598.522 933.68,598.338C928.594,598.117 928.152,594.579 930.363,588.387C932.574,582.196 943.189,560.967 952.255,545.93C961.321,530.894 983.877,497.503 983.877,497.503C971.493,505.464 934.343,536.422 920.854,550.132C907.366,563.842 879.945,592.81 874.859,597.675C869.773,602.54 866.678,600.992 869.552,595.242C872.427,589.493 888.348,565.832 896.751,550.574C905.154,535.316 925.719,503.695 925.719,503.695C927.101,501.483 926.825,500.93 923.01,502.755C919.196,504.579 898.797,517.847 887.187,525.808C875.578,533.768 839.589,560.304 821.18,575.396C802.771,590.488 782.206,609.726 776.401,616.526C770.597,623.326 764.958,630.789 761.973,630.623C758.987,630.457 761.862,625.537 761.862,625.537C776.678,602.982 830.191,558.535 843.901,548.363C857.611,538.191 905.265,504.091 912.894,499.272C922.347,493.301 935.228,485.783 940.093,490.648C944.958,495.513 938.103,507.675 930.363,520.279C922.624,532.884 901.395,562.073 901.395,562.073C924.614,537.97 975.031,494.186 982.771,488.879C990.51,483.572 1001.12,477.601 1004.22,480.697C1007.32,483.793 1005.11,488.437 1001.79,493.301C998.471,498.166 940.977,587.503 940.977,587.503C948.459,582.509 957.802,575.11 962.666,571.176ZM795.721,576.267C795.721,578.133 794.205,579.648 792.339,579.648C790.473,579.648 788.958,578.133 788.958,576.267L788.958,461.185C788.958,459.317 790.472,457.803 792.339,457.803L849.325,457.803C851.192,457.803 852.706,459.317 852.706,461.185L852.706,489.204L863.743,459.99C864.24,458.674 865.499,457.803 866.906,457.803L928.997,457.803C930.15,457.803 931.224,458.391 931.845,459.362C932.467,460.333 932.551,461.553 932.068,462.6L923.574,481.026C922.792,482.721 920.782,483.463 919.087,482.682C917.392,481.9 916.651,479.89 917.432,478.195L923.715,464.566L869.243,464.566L852.488,508.918C851.911,510.445 850.324,511.342 848.718,511.049C847.111,510.756 845.944,509.356 845.944,507.723L845.944,464.566L795.721,464.566L795.721,576.267ZM845.944,569.655C845.944,567.789 847.459,566.273 849.325,566.273C851.191,566.273 852.706,567.789 852.706,569.655L852.706,597.262C852.706,599.129 851.192,600.643 849.325,600.643L812.868,600.643C811.002,600.643 809.486,599.128 809.486,597.262C809.486,595.396 811.002,593.88 812.868,593.88L845.944,593.88L845.944,569.655Z%22 style=%22fill:rgb%28204,150,252%29;%22/%3E %3C/g%3E %3C/g%3E %3C/svg%3E"); --logo-ratio: 180 / 87; --logo-mask: url("data:image/svg+xml,%3Csvg width=%22100%25%22 height=%22100%25%22 viewBox=%220 0 180 87%22 version=%221.1%22 xmlns=%22http://www.w3.org/2000/svg%22 xml:space=%22preserve%22 style=%22fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;%22%3E %3Cg transform=%22matrix%281,0,0,1,-360,-1142.63%29%22%3E %3Cg transform=%22matrix%281,0,0,1,0,1058.25%29%22%3E %3Cg transform=%22matrix%280.307474,1.13975e-18,-1.13975e-18,0.307474,128.324,-23.2367%29%22%3E %3Cpath d=%22M1291.51,433.074L1285.04,433.074L1285.04,483.933C1285.04,485.035 1284.15,485.929 1283.05,485.929L1240.4,485.929C1239.3,485.929 1238.4,485.035 1238.4,483.933L1238.4,352.001C1238.4,350.899 1239.3,350.005 1240.4,350.005L1314.83,350.005C1324.03,350.005 1330.41,352.363 1334.09,356.735C1336.62,359.737 1337.94,363.721 1337.94,368.723L1337.94,407.127C1337.94,410.896 1336.83,413.822 1334.76,415.952C1334.04,416.693 1333.19,417.341 1332.22,417.889C1333.25,418.468 1334.15,419.151 1334.91,419.931C1337.02,422.1 1338.14,425.044 1338.14,428.806L1338.14,483.933C1338.14,485.035 1337.25,485.929 1336.15,485.929L1293.5,485.929C1292.4,485.929 1291.51,485.035 1291.51,483.933L1291.51,433.074ZM1295.5,431.491L1295.5,481.937L1334.15,481.937L1334.15,428.806C1334.15,426.24 1333.49,424.195 1332.05,422.716C1330.54,421.164 1328.24,420.251 1325.22,419.841C1324.22,419.705 1323.48,418.851 1323.49,417.846C1323.5,416.841 1324.25,415.999 1325.25,415.881C1328.19,415.533 1330.43,414.677 1331.9,413.167C1333.31,411.719 1333.95,409.69 1333.95,407.127L1333.95,368.723C1333.95,364.807 1333.02,361.656 1331.04,359.306C1327.96,355.652 1322.52,353.997 1314.83,353.997L1242.4,353.997L1242.4,481.937L1281.05,481.937L1281.05,431.078C1281.05,429.976 1281.94,429.082 1283.05,429.082L1293.09,429.082L1293.66,429.144L1294.1,429.286L1294.82,429.776L1295.3,430.494L1295.44,430.926L1295.5,431.491ZM1295.5,385.449L1295.5,404.443L1295.44,405.007L1295.3,405.441L1294.81,406.166L1294.08,406.655L1293.65,406.793L1293.09,406.852L1283.05,406.852C1281.94,406.852 1281.05,405.958 1281.05,404.856L1281.05,385.036C1281.05,383.934 1281.94,383.04 1283.05,383.04L1293.09,383.04L1293.66,383.102L1294.1,383.244L1294.82,383.734L1295.3,384.452L1295.44,384.884L1295.5,385.449ZM1291.51,402.86L1291.51,387.032L1285.04,387.032L1285.04,402.86L1291.51,402.86ZM1114.06,387.032L1114.06,391.091L1148.96,391.091C1150.06,391.091 1150.96,391.985 1150.96,393.087L1150.96,426.122C1150.96,427.224 1150.06,428.118 1148.96,428.118L1114.06,428.118L1114.06,483.933C1114.06,485.035 1113.16,485.929 1112.06,485.929L1069.41,485.929C1068.31,485.929 1067.42,485.035 1067.42,483.933L1067.42,368.723C1067.42,363.718 1068.75,359.732 1071.31,356.728C1075.02,352.361 1081.45,350.005 1090.74,350.005L1149.37,350.005C1150.48,350.005 1151.37,350.899 1151.37,352.001L1151.37,385.036C1151.37,386.138 1150.48,387.032 1149.37,387.032L1114.06,387.032ZM1110.06,385.449L1110.12,384.894L1110.26,384.465L1110.74,383.739L1111.47,383.242L1111.9,383.101L1112.47,383.04L1147.38,383.04L1147.38,353.997L1090.74,353.997C1082.96,353.997 1077.46,355.654 1074.35,359.313C1072.35,361.661 1071.41,364.81 1071.41,368.723L1071.41,481.937L1110.06,481.937L1110.06,426.122C1110.06,425.02 1110.96,424.126 1112.06,424.126L1146.96,424.126L1146.96,395.083L1112.06,395.083C1110.96,395.083 1110.06,394.189 1110.06,393.087L1110.06,385.449ZM903.908,449.11L910.373,449.11L910.373,352.001C910.373,350.899 911.267,350.005 912.369,350.005L955.014,350.005C956.116,350.005 957.01,350.899 957.01,352.001L957.01,467.623C957.01,472.527 955.671,476.432 953.106,479.374C949.396,483.629 942.962,485.929 933.691,485.929L880.59,485.929C871.317,485.929 864.883,483.629 861.174,479.373C858.61,476.431 857.271,472.527 857.271,467.623L857.271,352.001C857.271,350.899 858.165,350.005 859.267,350.005L901.912,350.005C903.014,350.005 903.908,350.899 903.908,352.001L903.908,449.11ZM933.691,481.937C941.476,481.937 946.982,480.324 950.097,476.751C952.082,474.474 953.018,471.419 953.018,467.623L953.018,397.366L953.018,353.997L914.365,353.997L914.365,450.693L914.306,451.254L914.168,451.686L913.681,452.41L912.957,452.902L912.523,453.042L911.959,453.102L902.322,453.102L901.759,453.042L901.323,452.902L900.595,452.407L900.109,451.678L899.974,451.247L899.916,450.693L899.916,353.997L861.263,353.997L861.263,467.623C861.263,471.419 862.198,474.474 864.183,476.751C867.297,480.324 872.803,481.937 880.59,481.937L933.691,481.937ZM982.507,485.929L965.47,485.929C964.368,485.929 963.474,485.035 963.474,483.933L963.474,352.001C963.474,350.899 964.368,350.005 965.47,350.005L1039.89,350.005C1049.17,350.005 1055.61,352.361 1059.32,356.728C1061.88,359.732 1063.21,363.718 1063.21,368.723L1063.21,417.863C1063.21,422.87 1061.88,426.856 1059.32,429.86C1055.61,434.228 1049.17,436.584 1039.89,436.584L1010.11,436.584L1010.11,478.688C1010.11,479.542 1009.57,480.302 1008.76,480.577C1007.95,480.853 1007.05,480.583 1006.53,479.906C1006.32,479.629 1006.08,479.36 1005.82,479.098C1004.45,477.731 1002.14,477.239 999.199,477.887C994.907,478.832 988.847,482.18 983.598,485.605C983.274,485.816 982.895,485.929 982.507,485.929ZM1006.12,474.537L1006.12,434.588C1006.12,433.486 1007.01,432.592 1008.11,432.592L1039.89,432.592C1047.67,432.592 1053.17,430.935 1056.28,427.275C1058.28,424.927 1059.22,421.777 1059.22,417.863L1059.22,368.723C1059.22,364.81 1058.28,361.661 1056.28,359.314C1053.17,355.654 1047.67,353.997 1039.89,353.997L967.466,353.997L967.466,481.937L981.917,481.937C987.481,478.35 993.831,474.981 998.341,473.989C1001.46,473.303 1004.08,473.608 1006.12,474.537ZM1020.57,385.449L1020.57,402.999L1020.51,403.567L1020.37,404.002L1019.87,404.726L1019.15,405.211L1018.72,405.349L1018.16,405.408L1008.11,405.408C1007.01,405.408 1006.12,404.514 1006.12,403.412L1006.12,385.036C1006.12,383.934 1007.01,383.04 1008.11,383.04L1018.16,383.04L1018.73,383.101L1019.16,383.241L1019.88,383.727L1020.37,384.446L1020.51,384.88L1020.57,385.449ZM1016.58,401.416L1016.58,387.032L1010.11,387.032L1010.11,401.416L1016.58,401.416ZM1192.79,485.929L1157.78,485.929C1156.68,485.929 1155.78,485.035 1155.78,483.933L1155.78,352.001C1155.78,350.899 1156.68,350.005 1157.78,350.005L1229.94,350.005C1231.05,350.005 1231.94,350.899 1231.94,352.001L1231.94,385.036C1231.94,386.138 1231.05,387.032 1229.94,387.032L1202.42,387.032L1202.42,399.557L1229.54,399.557C1230.64,399.557 1231.53,400.451 1231.53,401.553L1231.53,434.588C1231.53,435.69 1230.64,436.584 1229.54,436.584L1202.42,436.584L1202.42,449.11L1230.15,449.11C1231.25,449.11 1232.15,450.004 1232.15,451.106L1232.15,483.933C1232.15,485.035 1231.25,485.929 1230.15,485.929L1217.44,485.929C1216.76,485.929 1216.13,485.586 1215.76,485.018C1215.4,484.45 1215.34,483.734 1215.62,483.117C1215.86,482.568 1216.06,482.067 1216.2,481.608C1216.44,480.823 1216.52,480.021 1216.57,479.471C1216.59,479.236 1216.57,478.925 1216.51,478.629C1216.45,478.275 1216.39,477.938 1216.25,477.557C1216.09,477.128 1215.76,476.497 1215.38,476.053C1214.96,475.55 1214.17,474.874 1213.47,474.448C1213.11,474.227 1212.69,474.06 1212.3,473.943C1211.95,473.839 1211.64,473.759 1211.23,473.758C1210.41,473.757 1209.01,473.905 1207.7,474.428C1204.07,475.87 1199.11,479.967 1194.27,485.278C1193.89,485.692 1193.36,485.929 1192.79,485.929ZM1220.23,481.937L1228.15,481.937L1228.15,453.102L1200.42,453.102C1199.32,453.102 1198.43,452.208 1198.43,451.106L1198.43,434.588C1198.43,433.486 1199.32,432.592 1200.42,432.592L1227.54,432.592L1227.54,403.549L1200.42,403.549C1199.32,403.549 1198.43,402.655 1198.43,401.553L1198.43,385.036C1198.43,383.934 1199.32,383.04 1200.42,383.04L1227.95,383.04L1227.95,353.997L1159.77,353.997L1159.77,481.937L1191.92,481.937C1197.08,476.401 1202.37,472.251 1206.22,470.719C1208.08,469.977 1210.07,469.765 1211.24,469.767C1212.08,469.768 1212.73,469.905 1213.45,470.119C1214.15,470.33 1214.9,470.643 1215.55,471.043C1216.61,471.689 1217.81,472.729 1218.45,473.492C1219.11,474.283 1219.71,475.406 1219.99,476.171C1220.22,476.786 1220.33,477.326 1220.44,477.896C1220.57,478.576 1220.59,479.29 1220.54,479.828C1220.49,480.392 1220.41,481.144 1220.23,481.937ZM808.771,484.666L798.68,459.116L798.68,483.933C798.68,485.035 797.786,485.929 796.684,485.929L755.477,485.929C754.375,485.929 753.481,485.035 753.481,483.933L753.481,352.001C753.481,350.899 754.375,350.005 755.477,350.005L796.684,350.005C797.786,350.005 798.68,350.899 798.68,352.001L798.68,374.723L807.53,351.296C807.823,350.519 808.567,350.005 809.397,350.005L854.296,350.005C854.976,350.005 855.61,350.352 855.977,350.925C856.344,351.498 856.393,352.219 856.108,352.837L827.171,415.607L857.348,483.119C857.624,483.736 857.569,484.451 857.201,485.019C856.833,485.586 856.202,485.929 855.526,485.929L810.627,485.929C809.808,485.929 809.072,485.428 808.771,484.666ZM811.985,481.937L852.448,481.937L823.157,416.408C822.922,415.883 822.925,415.281 823.167,414.758L851.178,353.997L810.776,353.997L798.551,386.358C798.21,387.26 797.274,387.79 796.326,387.616C795.377,387.443 794.688,386.617 794.688,385.653L794.688,353.997L757.473,353.997L757.473,481.937L794.688,481.937L794.688,448.629C794.688,447.671 795.369,446.848 796.311,446.668C797.252,446.489 798.188,447.005 798.54,447.896L811.985,481.937ZM1336.08,504.137C1336.52,505.077 1334.59,504.911 1334.59,504.911C1320.77,504.469 1293.6,505.906 1277.43,507.233C1261.26,508.559 1232.81,512.54 1221.2,514.281C1209.6,516.023 1187.29,520.086 1187.29,520.086C1187.29,520.086 1183.14,526.72 1179.49,532.607C1175.85,538.495 1165.4,557.07 1161.09,564.865C1156.77,572.659 1148.4,589.244 1145.16,595.712C1141.93,602.18 1138.45,607.073 1135.21,604.834C1131.98,602.595 1136.87,591.898 1136.87,591.898C1140.93,581.035 1159.51,547.285 1159.51,547.285C1152.38,554.582 1137.62,564.865 1131.81,563.952C1126.01,563.04 1126.17,557.319 1128.58,552.924C1130.98,548.529 1135.96,541.978 1135.96,541.978C1131.15,545.046 1123.02,551.846 1119.04,556.406C1115.06,560.967 1110.92,565.445 1108.59,565.113C1106.27,564.782 1105.69,562.211 1107.27,559.392C1108.84,556.572 1112.66,550.768 1112.66,550.768C1103.04,559.475 1088.28,569.26 1080.9,568.099C1076.6,567.426 1074.35,564.929 1073.39,561.962C1066.74,569.656 1058.4,576.336 1052.54,574.898C1046.24,573.351 1046.01,564.616 1049,558.093C1051.99,551.569 1057.29,543.719 1057.29,543.719C1052.1,547.036 1043.25,554.554 1038.27,559.53C1033.3,564.505 1031.31,566.938 1028.65,566.053C1026,565.169 1026.78,560.967 1029.1,556.545C1031.42,552.122 1037.94,542.503 1037.94,542.503C1028.55,550.795 1013.73,567.933 1010.41,571.692C1007.1,575.451 1004.66,577.663 1002.01,577.11C999.356,576.557 998.692,572.798 1001.68,568.265C1004.66,563.731 1015.61,546.483 1015.61,546.483C1006.76,555.439 997.918,558.866 997.918,558.866C988.52,575.672 975.031,587.061 968.176,585.292C964.325,584.296 962.077,580.583 962.141,575.433C953.517,583.688 938.001,598.522 933.68,598.338C928.594,598.117 928.152,594.579 930.363,588.387C932.574,582.196 943.189,560.967 952.255,545.93C961.321,530.894 983.877,497.503 983.877,497.503C971.493,505.464 934.343,536.422 920.854,550.132C907.366,563.842 879.945,592.81 874.859,597.675C869.773,602.54 866.678,600.992 869.552,595.242C872.427,589.493 888.348,565.832 896.751,550.574C905.154,535.316 925.719,503.695 925.719,503.695C927.101,501.483 926.825,500.93 923.01,502.755C919.196,504.579 898.797,517.847 887.187,525.808C875.578,533.768 839.589,560.304 821.18,575.396C802.771,590.488 782.206,609.726 776.401,616.526C770.597,623.326 764.958,630.789 761.973,630.623C758.987,630.457 761.862,625.537 761.862,625.537C776.678,602.982 830.191,558.535 843.901,548.363C857.611,538.191 905.265,504.091 912.894,499.272C922.347,493.301 935.228,485.783 940.093,490.648C944.958,495.513 938.103,507.675 930.363,520.279C922.624,532.884 901.395,562.073 901.395,562.073C924.614,537.97 975.031,494.186 982.771,488.879C990.51,483.572 1001.12,477.601 1004.22,480.697C1007.32,483.793 1005.11,488.437 1001.79,493.301C998.471,498.166 974.368,532.441 965.302,547.036C956.235,561.631 940.977,587.503 940.977,587.503C948.459,582.509 957.802,575.11 962.666,571.176C963.348,568.136 964.703,564.782 966.85,561.299C974.147,549.468 983.324,545.046 983.324,545.046C985.867,541.95 992.39,537.527 998.471,540.844C1004.55,544.161 1001.12,552.785 1001.12,552.785C1005.11,550.242 1013.29,544.493 1017.05,540.734C1020.81,536.975 1026.89,533.215 1029.65,535.206C1032.41,537.196 1028.77,541.508 1028.77,541.508L1021.8,551.79C1021.8,551.79 1030.2,543.277 1034.29,539.628C1038.38,535.98 1045.79,531.889 1049.11,534.1C1052.43,536.311 1049.66,540.955 1049.66,540.955L1041.59,550.685C1041.59,550.685 1048.56,544.825 1052.87,541.508C1057.18,538.191 1065.14,532.884 1068.35,534.542C1071.56,536.201 1070.45,539.296 1068.79,542.945C1067.13,546.594 1061.6,555.107 1059.06,560.414C1056.52,565.722 1056.3,569.37 1060.83,566.938C1064.02,565.224 1069.72,560.608 1072.83,558.028C1072.84,557.107 1072.93,556.195 1073.1,555.328C1074.1,550.27 1078.49,542.724 1085.96,537.5C1093.42,532.276 1103.04,529.871 1106.52,532.856C1110,535.841 1107.43,540.983 1099.14,546.704C1090.85,552.426 1082.61,554.444 1082.61,554.444C1082.61,554.444 1080.4,563.952 1089.69,561.299C1098.98,558.645 1115.45,544.382 1115.45,544.382C1120.42,535.758 1124.18,533.215 1127.72,534.653C1131.26,536.09 1128.83,540.07 1128.83,540.07L1122.53,547.81C1132.81,537.638 1142.54,533.326 1145.19,534.874C1147.84,536.422 1147.62,539.075 1145.3,543.056C1142.98,547.036 1139.66,551.68 1137.78,554.776C1135.9,557.871 1139.44,556.987 1139.44,556.987C1150.17,551.569 1161.66,540.955 1161.66,540.955L1172.61,521.938C1172.61,521.938 1134.02,529.125 1128.16,530.009C1122.3,530.894 1116.66,530.783 1116.89,527.577C1117.11,524.37 1121.75,523.928 1121.75,523.928C1130.71,522.048 1177.03,513.867 1177.03,513.867C1177.03,513.867 1188.31,495.402 1195.17,487.663C1202.02,479.923 1209.21,474.505 1212.3,476.385C1215.4,478.265 1214.96,480.697 1210.54,487.442C1206.11,494.186 1191.74,512.429 1191.74,512.429C1215.62,508.67 1270.79,503.529 1278.37,503.086C1285.94,502.644 1307.06,501.207 1317.29,501.649C1327.51,502.091 1335.64,503.197 1336.08,504.137ZM1092.67,539.849C1087.7,543.94 1084.16,550.353 1084.16,550.353C1092.45,546.704 1101.19,539.296 1101.41,537.085C1101.63,534.874 1097.65,535.758 1092.67,539.849ZM973.262,578.879C975.916,579.21 983.434,571.803 989.626,561.078C989.626,561.078 981.886,562.626 980.56,555.328C980.56,555.328 975.584,560.967 972.488,568.375C969.393,575.783 970.609,578.547 973.262,578.879ZM994.27,550.795C995.486,547.368 995.265,545.378 993.164,544.825C991.063,544.272 987.525,547.699 986.088,550.906C984.65,554.112 985.535,558.424 991.395,556.876C991.395,556.876 993.053,554.223 994.27,550.795Z%22 style=%22fill:rgb%28184,100,66%29;%22/%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/svg%3E"); --ease-brand: cubic-bezier(0.22, 1, 0.36, 1); --duration-fast: 200ms; --duration-medium: 500ms; --duration-slow: 700ms; } /* 2. Font ------------------------------------------------------------------ */ @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../assets/fonts/montserrat-latin.woff2") format("woff2"); } /* 3. Themes – die Section ist die einzige Theme Authority ----------------- --section-bg Hintergrund --section-fg Fliesstext --headline Überschrift --chrome Logo, Navigation, Scroll-Pfeil --accent Buttons, Hover-Flächen --on-accent Text darauf --world Signaturfarbe der Welt (Listen-Hover, Markierungen) --on-world Text darauf --muted sekundäre Information (Standard: Textfarbe) --brand-icon 1 = Icon statt Logo im Header (nur Hero), Standard 0 */ :root { --brand-icon: 0; --muted: var(--section-fg); } [data-theme="hero"] { --section-bg: var(--km-mitternacht); --section-fg: var(--km-weiss); --headline: var(--km-weiss); --chrome: var(--km-flieder); --accent: var(--km-flieder); --on-accent: var(--km-mitternacht); --world: var(--km-flieder); --on-world: var(--km-mitternacht); --brand-icon: 1; /* Header zeigt das Icon statt des Logos */ } [data-theme="light"] { --section-bg: var(--km-weiss); --section-fg: var(--km-mitternacht); --headline: var(--km-mitternacht); --chrome: var(--km-kupfer); --accent: var(--km-kupfer); --on-accent: var(--km-weiss); --world: var(--km-kupfer); --on-world: var(--km-weiss); } [data-theme="koralle"] { --section-bg: var(--km-koralle); --section-fg: var(--km-mitternacht); --headline: var(--km-mitternacht); --chrome: var(--km-mitternacht); --accent: var(--km-mitternacht); --on-accent: var(--km-puder); --world: var(--km-koralle); --on-world: var(--km-mitternacht); } [data-theme="sonnengelb"] { --section-bg: var(--km-sonnengelb); --section-fg: var(--km-weiss); --headline: var(--km-sonnengelb); --chrome: var(--km-mitternacht); --accent: var(--km-sonnengelb); --on-accent: var(--km-mitternacht); --world: var(--km-sonnengelb); --on-world: var(--km-mitternacht); } [data-theme="dark-koralle"] { --section-bg: var(--km-mitternacht); --section-fg: var(--km-koralle); --headline: var(--km-koralle); --chrome: var(--km-koralle); --accent: var(--km-koralle); --on-accent: var(--km-mitternacht); --world: var(--km-koralle); --on-world: var(--km-mitternacht); } [data-theme="dark-lagune"] { --section-bg: var(--km-mitternacht); --section-fg: var(--km-weiss); --headline: var(--km-lagune); --chrome: var(--km-lagune); --accent: var(--km-lagune); --on-accent: var(--km-nachtpetrol); --world: var(--km-lagune); --on-world: var(--km-nachtpetrol); } [data-theme="dark-flieder"] { --section-bg: var(--km-mitternacht); --section-fg: var(--km-weiss); --headline: var(--km-flieder); --chrome: var(--km-flieder); --accent: var(--km-flieder); --on-accent: var(--km-mitternacht); --world: var(--km-flieder); --on-world: var(--km-mitternacht); } [data-theme="dark-puder"] { --section-bg: var(--km-mitternacht); --section-fg: var(--km-weiss); --headline: var(--km-puder); --chrome: var(--km-puder); --accent: var(--km-puder); --on-accent: var(--km-kupfer); /* Konzept: CTA Puder mit Kupfer-Text */ --world: var(--km-puder); --on-world: var(--km-mitternacht); } [data-theme="kupfer"] { --section-bg: var(--km-kupfer); --muted: var(--km-puder); /* sekundäre Information: Adresse, Rechtliches, Social, Trennlinie */ --pattern: color-mix(in srgb, var(--km-kupfer) 95%, var(--km-mitternacht)); /* Shade an der Wahrnehmungsgrenze, wie Blindprägung */ --section-fg: var(--km-mitternacht); --headline: var(--km-mitternacht); --chrome: var(--km-mitternacht); --accent: var(--km-mitternacht); --on-accent: var(--km-puder); --world: var(--km-kupfer); --on-world: var(--km-weiss); } /* 4. Basis ----------------------------------------------------------------- */ html { background: var(--section-bg); scroll-behavior: smooth; /* Sanftes Einrasten: Hält man nahe einer Section-Kante an, zieht der Browser dorthin. «proximity» statt «mandatory», damit sich der Scroll beim Weiterziehen natürlich löst und Sections, die höher als der Viewport sind (Mobile), nicht blockieren. */ scroll-snap-type: y proximity; } .km-hero, .km-section { scroll-snap-align: start; } body { font-family: "Montserrat", system-ui, sans-serif; font-size: var(--fs-body); font-weight: 500; line-height: var(--lh-body); color: var(--section-fg); background: var(--section-bg); } p { margin-bottom: var(--space-xs); } a { color: inherit; } :focus-visible { outline: 2px solid var(--chrome); outline-offset: 4px; } @media (min-width: 1400px) { .container { max-width: var(--container-max); } } /* Breite des Bootstrap-Containers als Variable, damit Elemente bis zum Seitenrand ausbrechen können. */ :root { --container-w: 100%; } @media (min-width: 576px) { :root { --container-w: 540px; } } @media (min-width: 768px) { :root { --container-w: 720px; } } @media (min-width: 992px) { :root { --container-w: 960px; } } @media (min-width: 1200px) { :root { --container-w: 1140px; } } @media (min-width: 1400px) { :root { --container-w: var(--container-max); } } :root { --bleed: calc((100vw - var(--container-w)) / 2 + 0.75rem); } /* bis zum Viewport-Rand, inkl. Spalten-Gutter */ /* Alles, was Theme-Farben konsumiert, blendet weich über. */ .km-header, .km-nav, .km-nav__link, .km-logo, .km-burger, .km-next, .km-hero, .km-section, .km-footer, .km-button { transition: color var(--duration-medium) var(--ease-brand), background-color var(--duration-medium) var(--ease-brand), border-color var(--duration-medium) var(--ease-brand); } /* 5. Header & Navigation --------------------------------------------------- */ .km-header { position: fixed; inset: 0 0 auto; z-index: 10; height: var(--header-height); color: var(--chrome); } .km-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-l); height: 100%; } /* Logo: Original-SVG als Maske (Data-URI, damit es auch ohne Server erscheint), Farbe aus dem Theme. */ .km-logo { display: block; width: var(--logo-width); aspect-ratio: var(--logo-ratio); background-color: currentColor; -webkit-mask: var(--logo-mask) center / contain no-repeat; mask: var(--logo-mask) center / contain no-repeat; } /* Brand im Header: Icon (Hero) wird zum Logo. Beide liegen übereinander, --brand-icon steuert den Zustand. Der Rahmen (Logo) öffnet sich aus dem Moment (Icon): Icon wächst und löst sich auf, Logo zieht nach. */ .km-brand { position: relative; display: block; width: var(--logo-width); aspect-ratio: var(--logo-ratio); } .km-brand__logo, .km-brand__icon { position: absolute; inset: 0 auto 0 0; margin-block: auto; transition: opacity var(--duration-slow) var(--ease-brand), transform var(--duration-slow) var(--ease-brand); } .km-brand__logo { opacity: calc(1 - var(--brand-icon)); transform: scale(calc(0.7 + 0.3 * (1 - var(--brand-icon)))); transform-origin: left center; transition-delay: calc(var(--duration-fast) * (1 - var(--brand-icon))); } .km-brand__icon { width: var(--icon-width); aspect-ratio: 1; background-color: currentColor; -webkit-mask: var(--icon-mask) center / contain no-repeat; mask: var(--icon-mask) center / contain no-repeat; opacity: var(--brand-icon); transform: scale(calc(1 + 0.6 * (1 - var(--brand-icon)))) rotate(calc(-12deg * (1 - var(--brand-icon)))); transform-origin: center; } .km-nav__list { display: flex; gap: var(--space-l); margin: 0; padding: 0; list-style: none; } .km-nav__link { display: inline-block; padding: 0.35em 0.7em; border: 1px solid transparent; border-radius: 2px; font-size: var(--fs-nav); font-weight: 500; line-height: var(--lh-snug); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; } .km-nav__link:hover, .km-nav__link[aria-current="page"] { border-color: currentColor; } /* Subnavigation «Angebot»: Panel in der Farbe der aktiven Section, Zeilen leuchten in ihrer Welt. Öffnet per Hover oder Tastaturfokus (focus-within), reines CSS. */ .km-subnav { margin: 0; padding: 0; list-style: none; counter-reset: sub; } .km-subnav li { counter-increment: sub; } .km-subnav a { display: flex; gap: 0.9em; align-items: baseline; padding: 0.55em 0.9em; font-size: var(--fs-nav); font-weight: 600; line-height: var(--lh-snug); letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background-color var(--duration-fast) var(--ease-brand), color var(--duration-fast) var(--ease-brand); } .km-subnav a::before { content: counter(sub, decimal-leading-zero); font-weight: 400; opacity: 0.55; } .km-subnav a:hover, .km-subnav a:focus-visible { background-color: var(--world); color: var(--on-world); outline: none; } .km-subnav a:hover::before, .km-subnav a:focus-visible::before { opacity: 1; } @media (min-width: 992px) { .km-nav__item--sub { position: relative; } .km-subnav { position: absolute; top: 100%; left: 0; min-width: 100%; padding: var(--space-xs) 0; margin-top: var(--space-xs); color: var(--chrome); background: var(--section-bg); border-radius: 2px; opacity: 0; translate: 0 calc(-1 * var(--space-xs)); visibility: hidden; transition: opacity var(--duration-fast) var(--ease-brand), translate var(--duration-fast) var(--ease-brand), visibility 0s linear var(--duration-fast), background-color var(--duration-medium) var(--ease-brand), color var(--duration-medium) var(--ease-brand); } /* Lücke zwischen Link und Panel überbrücken, damit der Hover nicht abreisst */ .km-subnav::before { content: ""; position: absolute; inset: calc(-1 * var(--space-xs)) 0 auto; height: var(--space-xs); } .km-nav__item--sub:hover .km-subnav, .km-nav__item--sub:focus-within .km-subnav { opacity: 1; translate: 0 0; visibility: visible; transition-delay: 0s; } } /* Mobile: Unterpunkte immer sichtbar, eingerückt unter «Angebot» */ @media (max-width: 991.98px) { .km-nav__item--sub { display: grid; justify-items: center; } .km-subnav { margin-top: var(--space-xs); } .km-subnav a { justify-content: center; padding-block: 0.4em; font-size: var(--fs-small); } } /* Burger und Close: reine CSS-Icons in currentColor */ .km-burger, .km-nav__close { width: 2.75rem; height: 2.75rem; padding: 0; border: 0; color: inherit; background: transparent; } .km-burger { background: linear-gradient(currentColor 0 0) center / 1.5rem 2px no-repeat; } .km-burger::before, .km-burger::after { content: ""; display: block; width: 1.5rem; height: 2px; margin: 0 auto; background: currentColor; translate: 0 -0.5rem; } .km-burger::after { translate: 0 0.5rem; } .km-nav__close { position: absolute; inset: 0.9rem 1rem auto auto; background: linear-gradient(currentColor 0 0) center / 1.5rem 2px no-repeat, linear-gradient(currentColor 0 0) center / 2px 1.5rem no-repeat; } /* Mobile: dieselbe