/* 
    BASIC DEFINITIONS
 */

 :root {
    --accent: rgb(136, 170, 12);;
    --bg: #0d1115;
    --bg-transparent: #0d1115d0;
    --text: #eff0e7;
    --heroHeight: 100vH;
    --monofont: 'Geist Mono', monospace;
    --gridSizeMin: 150px;
    --gridSizeMax: calc(25% - 3rem);
    --transition: cubic-bezier(.22, 1, .36, 1);

    --kundenfilter_normal: invert(1);
    --kundenfilter_hover: contrast(0.85);
    --switchcolor: var(--text);
}

body.lightmode {
    --accent: rgb(136, 170, 12);;
    --bg: #f0eee5;
    --bg-transparent: #f0eee5d0;
    --text: #272824;
    --kundenfilter_normal: contrast(0.98);
    --kundenfilter_hover: invert(1);
    --switchcolor: var(--bg);

}


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


html{
    font-family: 'Inter', sans-serif;
    font-size: clamp(14px, calc(11.4px + 0.54vw), 21px);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    line-height: 1.7;
    overflow: auto;
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
}

html, body {
    width: 100vW;
    min-height: 100vH;
    background: var(--bg);
    color: var(--text);
}

body {
    overflow:visible;
}

.container {
    max-width: min(100vW - 2rem, 65rem);
    margin: auto;
    padding: 0 24px;
}

h1,h2 {
    font-weight: 600;
    margin-bottom: 0.2em;
    font-family: var(--monofont);
}

h1 {
    font-size: 2.6rem;
}
h2 {
    font-size: 2rem;
}
h3 {
    letter-spacing: 0.1em;
    font-weight: 200;
    font-size: 1.5rem;
}


ul {
    margin: 0;
    padding: 0;
    list-style-position: inside;
}


/* 
    HEADER
 */

header {
    background-color: var(--bg-transparent);
    backdrop-filter: blur(8px);
    position: fixed;
    z-index: 10;
    width: 100%;
    padding: 0.5rem 0;
}


nav {
    display: flex; 
    gap: 1rem;
    justify-content: space-between;
}

nav a {
    font-weight: 700;
    margin-bottom: 0.2em;
    font-family: var(--monofont);
    color: var(--text);
    text-decoration: none;
    font-weight: 400;
    position: relative;
    padding: 0.2rem 0.3rem;
    line-height: 1.4rem;
    padding-bottom: 0.2rem;

}

nav a::before {
    content: attr(data-text);
    position: absolute;
    background-color: var(--accent);
    color: var(--accent);
    left: 0;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    transition: all 0.2s;
    text-indent: 0.3rem;
    height: 1.7rem;
    transform: translateY(-0.1em) rotateZ(1deg) scaleX(0) ;
    z-index: 1;
    transform-origin: left center;
}

nav a:nth-child(odd)::before{
    transform: translateY(-0.1em) rotateZ(-1deg) scaleX(0) ;
}

nav a span::after {
    content: attr(data-text);
    position: absolute;
    color: var(--bg);
    left: 0;
    width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: all 0.2s;
    text-indent: 0.3rem;
    height: 1.6rem;
    transform: none;
    z-index: 2;
}

nav a:hover::before, nav a:hover span::after, nav a.active::before, nav a.active span::after {
    width: calc(100%);
}
nav a:hover::before, nav a.active::before  {
    transform: translateY(-0.1em) rotateZ(-1.2deg) scaleX(1);
}


#logo {
    width: 10em;
    transition: all 0.2s;
}
#logo::before{
    content: unset;
}

.logo_svg {
    color:var(--text);
    mask: url("data:image/svg+xml,%3Csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='85.04px' height='11.764px' viewBox='0 0 85.04 11.764' enable-background='new 0 0 85.04 11.764' xml:space='preserve'%3E%3Cpath fill='%23323237' d='M79.236,9.276c0-0.547,0-1.093,0-1.638c1.254,0,2.506,0,3.759,0c0.111,0,0.209-0.04,0.288-0.121 c0.08-0.08,0.12-0.176,0.12-0.289c0-0.115-0.04-0.191-0.12-0.227c-0.079-0.036-0.177-0.055-0.288-0.055c-0.57,0-1.14,0-1.71,0 c-0.287,0-0.553-0.053-0.802-0.162c-0.249-0.109-0.466-0.256-0.65-0.443c-0.185-0.187-0.33-0.405-0.435-0.653 c-0.108-0.249-0.162-0.515-0.162-0.8c0-0.285,0.054-0.552,0.162-0.801c0.104-0.249,0.25-0.464,0.435-0.65 c0.185-0.184,0.401-0.33,0.65-0.437c0.249-0.106,0.515-0.16,0.802-0.16c1.11,0,2.218,0,3.327,0c0,0.546,0,1.092,0,1.638 c-1.109,0-2.217,0-3.327,0c-0.112,0-0.209,0.041-0.29,0.121c-0.079,0.08-0.122,0.177-0.122,0.289c0,0.116,0.043,0.216,0.122,0.298 c0.081,0.082,0.178,0.124,0.29,0.124c0.57,0,1.14,0,1.71,0c0.28,0,0.545,0.046,0.793,0.141c0.249,0.094,0.467,0.225,0.65,0.394 c0.185,0.168,0.331,0.372,0.44,0.608c0.109,0.238,0.162,0.495,0.162,0.776c0,0.285-0.053,0.552-0.162,0.798 c-0.109,0.246-0.256,0.464-0.44,0.651c-0.184,0.187-0.401,0.333-0.65,0.438c-0.248,0.106-0.513,0.16-0.793,0.16 C81.742,9.276,80.49,9.276,79.236,9.276z M60.304,9.276c0.417,0,0.833,0,1.247,0c0-0.547,0-1.093,0-1.638c-0.414,0-0.83,0-1.247,0 c-0.17,0-0.333-0.033-0.486-0.1c-0.151-0.066-0.285-0.155-0.397-0.268c-0.109-0.112-0.199-0.244-0.265-0.394 c-0.064-0.15-0.097-0.313-0.097-0.484c0-0.639,0-1.277,0-1.915c0.832,0,1.662,0,2.492,0c0-0.546,0-1.091,0-1.638 c-0.83,0-1.66,0-2.492,0c0-0.859,0-1.717,0-2.576c-0.546,0-1.091,0-1.638,0c0,0.859,0,1.717,0,2.576c-0.267,0-0.531,0-0.801,0 c0,0.546,0,1.092,0,1.638c0.27,0,0.534,0,0.801,0c0,0.638,0,1.276,0,1.915c0,0.396,0.077,0.77,0.227,1.12 c0.151,0.349,0.357,0.654,0.62,0.918c0.262,0.262,0.568,0.468,0.918,0.619C59.535,9.2,59.91,9.276,60.304,9.276z M48.855,9.276 V0.264h-1.656v9.012H48.855z M30.17,9.276c0-1.185,0-2.368,0-3.553c0-0.172,0.032-0.335,0.096-0.487 c0.065-0.153,0.153-0.285,0.264-0.398c0.112-0.112,0.246-0.201,0.399-0.265c0.152-0.064,0.315-0.097,0.487-0.097 c0.483,0,0.966,0,1.45,0c0-0.546,0-1.091,0-1.638c-0.484,0-0.967,0-1.45,0c-0.361,0-0.711,0.066-1.048,0.197 c-0.337,0.131-0.638,0.316-0.902,0.557c-0.182-0.255-0.362-0.51-0.543-0.765c-0.132,0-0.265,0-0.397,0c0,2.148,0,4.298,0,6.448 C29.075,9.276,29.622,9.276,30.17,9.276z M71.621,5.995c0,0.481-0.087,0.93-0.259,1.345c-0.174,0.416-0.406,0.775-0.703,1.078 c-0.298,0.302-0.646,0.542-1.046,0.717c-0.397,0.174-0.827,0.261-1.286,0.261c-0.452,0-0.878-0.087-1.277-0.261 C66.65,8.96,66.303,8.72,66.001,8.418c-0.298-0.303-0.536-0.662-0.706-1.078c-0.171-0.416-0.259-0.864-0.259-1.345 c0-0.489,0.088-0.943,0.259-1.361c0.17-0.417,0.408-0.777,0.706-1.08c0.302-0.303,0.649-0.541,1.049-0.714 c0.399-0.171,0.825-0.259,1.277-0.259c0.459,0,0.889,0.082,1.286,0.244c0.4,0.163,0.748,0.394,1.046,0.692 c0.297,0.299,0.529,0.659,0.703,1.078C71.534,5.015,71.621,5.482,71.621,5.995z M69.964,5.995c0-0.265-0.042-0.504-0.126-0.72 c-0.088-0.215-0.205-0.399-0.354-0.554s-0.321-0.273-0.521-0.355c-0.199-0.083-0.411-0.124-0.637-0.124 c-0.223,0-0.434,0.042-0.634,0.124c-0.198,0.082-0.372,0.201-0.518,0.355c-0.146,0.154-0.264,0.339-0.346,0.554 c-0.082,0.216-0.125,0.455-0.125,0.72c0,0.249,0.043,0.48,0.125,0.693c0.082,0.212,0.199,0.396,0.346,0.553 c0.146,0.156,0.319,0.279,0.518,0.37c0.2,0.09,0.411,0.136,0.634,0.136c0.226,0,0.438-0.042,0.637-0.127 c0.199-0.085,0.372-0.203,0.521-0.356c0.148-0.152,0.266-0.337,0.354-0.553C69.922,6.494,69.964,6.256,69.964,5.995z M19.607,2.829 c-0.132,0-0.264,0-0.397,0c-0.212,0.255-0.424,0.51-0.637,0.765c0,0.932,0,1.865,0,2.799c0,0.171-0.033,0.339-0.097,0.502 c-0.065,0.162-0.153,0.307-0.265,0.437c-0.113,0.128-0.244,0.231-0.396,0.309c-0.15,0.079-0.31,0.118-0.478,0.118 c-0.173,0-0.334-0.028-0.484-0.085c-0.151-0.056-0.283-0.142-0.395-0.255c-0.112-0.114-0.203-0.257-0.269-0.428 c-0.065-0.171-0.099-0.371-0.099-0.599c0-1.189,0-2.376,0-3.564c-0.546,0-1.091,0-1.637,0c0,1.188,0,2.375,0,3.564 c0,0.461,0.074,0.877,0.225,1.248c0.151,0.371,0.357,0.686,0.62,0.947c0.264,0.257,0.57,0.457,0.918,0.599 c0.349,0.14,0.723,0.209,1.12,0.209c0.188,0,0.376-0.038,0.563-0.113c0.187-0.077,0.37-0.153,0.551-0.229 c-0.061,0.147-0.139,0.285-0.235,0.412C18.12,9.593,18.009,9.7,17.884,9.793c-0.127,0.094-0.264,0.164-0.414,0.218 c-0.129,0.045-0.265,0.069-0.403,0.078c-0.021,0-0.041,0-0.06,0c-0.305-0.005-0.611-0.009-0.916-0.014c0,0.003,0,0.009,0,0.014 c-0.546,0-1.091,0-1.637,0c0,0.55,0,1.104,0,1.654c0.826,0,1.654,0,2.48,0c0.453,0,0.878-0.085,1.276-0.258 c0.397-0.173,0.745-0.408,1.044-0.705c0.299-0.298,0.535-0.643,0.708-1.042c0.173-0.396,0.262-0.823,0.265-1.274 c0-1.88,0-3.757,0-5.635C20.022,2.829,19.814,2.829,19.607,2.829z M6.585,5.995c0,0.505-0.086,0.967-0.258,1.385 C6.155,7.797,5.919,8.155,5.622,8.455C5.325,8.752,4.977,8.984,4.578,9.15C4.178,9.314,3.75,9.396,3.292,9.396 c-0.453,0-0.878-0.083-1.278-0.252C1.614,8.975,1.265,8.739,0.967,8.438c-0.3-0.301-0.536-0.659-0.708-1.074 C0.086,6.948,0,6.493,0,5.995c0-1.911,0-3.82,0-5.731c0.205,0,0.409,0,0.615,0c0.132,0,0.265,0,0.397,0 c0.213,0.255,0.425,0.51,0.638,0.765c0,0.748,0,1.497,0,2.245c0.088-0.112,0.195-0.212,0.322-0.301 c0.126-0.088,0.263-0.161,0.41-0.216c0.146-0.057,0.298-0.1,0.454-0.13c0.157-0.03,0.309-0.045,0.457-0.045 c0.458,0,0.886,0.086,1.286,0.256c0.399,0.171,0.748,0.41,1.044,0.713c0.297,0.304,0.533,0.666,0.705,1.081 C6.499,5.046,6.585,5.501,6.585,5.995z M4.93,5.995c0-0.25-0.043-0.481-0.13-0.696C4.713,5.085,4.596,4.9,4.448,4.743 s-0.322-0.279-0.52-0.367C3.729,4.288,3.518,4.243,3.292,4.243c-0.224,0-0.436,0.049-0.634,0.148C2.458,4.49,2.285,4.62,2.137,4.782 C1.987,4.945,1.872,5.131,1.789,5.341C1.703,5.552,1.662,5.77,1.662,5.995c0,0.249,0.042,0.48,0.127,0.693 C1.872,6.9,1.987,7.084,2.137,7.241c0.148,0.156,0.321,0.279,0.521,0.37c0.199,0.09,0.41,0.136,0.634,0.136 c0.226,0,0.437-0.046,0.636-0.136C4.126,7.52,4.3,7.397,4.448,7.241S4.713,6.9,4.8,6.688C4.887,6.475,4.93,6.244,4.93,5.995z M25.67,7.129c0.57,0.124,1.141,0.249,1.71,0.372c-0.644,1.345-1.439,1.894-2.949,1.894c-2.905,0-4.321-3.531-2.448-5.685 c1.952-2.247,5.477-0.947,5.728,1.978c-1.588,0.346-3.174,0.691-4.762,1.037c0.071,0.165,0.168,0.32,0.286,0.456 c0.065,0.075,0.138,0.145,0.216,0.207c0.099,0.08,0.206,0.147,0.32,0.202c0.205,0.097,0.433,0.148,0.661,0.148 c0.227,0,0.454-0.052,0.66-0.148c0.114-0.054,0.222-0.123,0.32-0.202C25.506,7.311,25.593,7.224,25.67,7.129z M22.875,5.456 c0.931-0.202,1.864-0.404,2.796-0.607c-0.014-0.018-0.029-0.035-0.043-0.053c-0.067-0.075-0.139-0.145-0.216-0.208 c-0.098-0.078-0.206-0.146-0.32-0.201c-0.207-0.097-0.433-0.148-0.66-0.148c-0.228,0-0.456,0.052-0.661,0.148 c-0.114,0.055-0.222,0.123-0.32,0.201c-0.101,0.082-0.191,0.174-0.271,0.276c-0.083,0.104-0.152,0.219-0.208,0.339 C22.932,5.286,22.9,5.371,22.875,5.456z M37.154,9.276c0.279,0,0.544-0.054,0.793-0.16c0.249-0.105,0.466-0.252,0.649-0.438 c0.186-0.188,0.333-0.405,0.44-0.651C39.146,7.78,39.2,7.513,39.2,7.228c0-0.281-0.054-0.538-0.163-0.776 c-0.107-0.236-0.254-0.439-0.44-0.608c-0.184-0.169-0.4-0.3-0.649-0.394c-0.249-0.095-0.514-0.141-0.793-0.141 c-0.57,0-1.14,0-1.709,0c-0.113,0-0.21-0.042-0.29-0.124c-0.08-0.082-0.12-0.182-0.12-0.298c0-0.112,0.04-0.209,0.12-0.289 c0.08-0.08,0.177-0.121,0.29-0.121c1.108,0,2.218,0,3.327,0c0-0.546,0-1.091,0-1.638c-1.109,0-2.219,0-3.327,0 c-0.286,0-0.554,0.054-0.802,0.16c-0.249,0.107-0.465,0.252-0.65,0.437c-0.184,0.186-0.331,0.401-0.436,0.65 c-0.107,0.249-0.159,0.517-0.159,0.801c0,0.285,0.052,0.552,0.159,0.8c0.105,0.249,0.251,0.467,0.436,0.653 c0.185,0.188,0.401,0.334,0.65,0.443c0.249,0.108,0.516,0.162,0.802,0.162c0.569,0,1.139,0,1.709,0c0.112,0,0.208,0.019,0.289,0.055 c0.08,0.036,0.121,0.112,0.121,0.227c0,0.113-0.041,0.209-0.121,0.289c-0.081,0.082-0.177,0.121-0.289,0.121 c-1.252,0-2.504,0-3.756,0c0,0.545,0,1.091,0,1.638C34.65,9.276,35.902,9.276,37.154,9.276z M74.156,9.276c0-1.229,0-2.458,0-3.686 c0-0.168,0.032-0.327,0.096-0.478c0.065-0.15,0.153-0.281,0.264-0.395c0.113-0.112,0.245-0.199,0.399-0.264 c0.152-0.065,0.313-0.096,0.486-0.096c0.171,0,0.328,0.031,0.477,0.096c0.147,0.065,0.279,0.152,0.392,0.264 c0.111,0.113,0.2,0.244,0.265,0.395c0.063,0.151,0.095,0.31,0.095,0.478c0,1.228,0,2.456,0,3.686c0.549,0,1.096,0,1.645,0 c0-1.229,0-2.458,0-3.686c0-0.396-0.076-0.771-0.225-1.123c-0.152-0.351-0.358-0.657-0.617-0.921 c-0.262-0.262-0.565-0.469-0.916-0.62c-0.348-0.149-0.72-0.225-1.114-0.225c-0.362,0-0.714,0.066-1.049,0.197 c-0.337,0.131-0.635,0.315-0.901,0.556c-0.181-0.208-0.36-0.418-0.541-0.626c-0.134,0-0.264,0-0.398,0c0,2.148,0,4.298,0,6.448 C73.061,9.276,73.608,9.276,74.156,9.276z M64.114,9.276V2.829H62.46v6.448H64.114z M54.868,8.523 c0.181,0.251,0.362,0.501,0.541,0.753c0.133,0,0.267,0,0.398,0c0-2.15,0-4.299,0-6.448c-0.549,0-1.096,0-1.643,0 c0,1.188,0,2.375,0,3.564c0,0.171-0.032,0.339-0.097,0.502c-0.065,0.162-0.154,0.307-0.265,0.437 c-0.114,0.128-0.246,0.231-0.396,0.309C53.259,7.72,53.1,7.759,52.931,7.759c-0.174,0-0.336-0.03-0.486-0.09 c-0.149-0.06-0.28-0.148-0.393-0.265c-0.112-0.117-0.201-0.26-0.27-0.431c-0.066-0.17-0.099-0.364-0.099-0.58 c0-1.189,0-2.376,0-3.564c-0.546,0-1.091,0-1.636,0c0,1.188,0,2.375,0,3.564c0,0.461,0.074,0.877,0.225,1.248 c0.148,0.371,0.357,0.686,0.62,0.947c0.262,0.257,0.569,0.457,0.918,0.599c0.351,0.14,0.723,0.209,1.12,0.209 c0.179,0,0.357-0.022,0.532-0.069c0.174-0.045,0.345-0.108,0.508-0.186c0.166-0.078,0.323-0.172,0.474-0.277 C54.596,8.757,54.736,8.644,54.868,8.523z M46.308,5.995c0,0.481-0.087,0.93-0.259,1.345c-0.174,0.416-0.407,0.775-0.705,1.078 C45.048,8.72,44.699,8.96,44.3,9.135c-0.4,0.174-0.827,0.261-1.285,0.261c-0.453,0-0.88-0.087-1.28-0.261 c-0.398-0.175-0.748-0.415-1.047-0.717c-0.3-0.303-0.535-0.662-0.707-1.078c-0.173-0.416-0.259-0.864-0.259-1.345 c0-0.489,0.086-0.943,0.259-1.361c0.172-0.417,0.407-0.777,0.707-1.08c0.299-0.303,0.649-0.541,1.047-0.714 c0.4-0.171,0.827-0.259,1.28-0.259c0.458,0,0.885,0.082,1.285,0.244c0.399,0.163,0.748,0.394,1.044,0.692 c0.298,0.299,0.531,0.659,0.705,1.078C46.221,5.015,46.308,5.482,46.308,5.995z M44.652,5.995c0-0.265-0.044-0.504-0.13-0.72 c-0.087-0.215-0.204-0.399-0.353-0.554s-0.322-0.273-0.52-0.355c-0.199-0.083-0.41-0.124-0.635-0.124 c-0.224,0-0.436,0.042-0.635,0.124c-0.199,0.082-0.373,0.201-0.518,0.355c-0.146,0.154-0.263,0.339-0.346,0.554 c-0.085,0.216-0.127,0.455-0.127,0.72c0,0.249,0.042,0.48,0.127,0.693c0.083,0.212,0.199,0.396,0.346,0.553 c0.146,0.156,0.319,0.279,0.518,0.37c0.199,0.09,0.411,0.136,0.635,0.136c0.225,0,0.437-0.042,0.635-0.127 c0.198-0.085,0.372-0.203,0.52-0.356c0.148-0.152,0.266-0.337,0.353-0.553C44.608,6.494,44.652,6.256,44.652,5.995z M64.207,0.976 c0-0.124-0.024-0.24-0.073-0.352c-0.047-0.111-0.113-0.208-0.196-0.289c-0.083-0.082-0.181-0.147-0.292-0.195 c-0.11-0.048-0.229-0.072-0.357-0.072c-0.125,0-0.245,0.024-0.355,0.072c-0.111,0.048-0.208,0.113-0.29,0.195 c-0.08,0.081-0.146,0.178-0.192,0.289c-0.05,0.112-0.074,0.229-0.074,0.352c0,0.125,0.024,0.245,0.074,0.354 c0.046,0.109,0.112,0.206,0.192,0.287c0.082,0.081,0.179,0.146,0.29,0.194c0.11,0.049,0.23,0.072,0.355,0.072 c0.128,0,0.247-0.023,0.357-0.072c0.111-0.048,0.209-0.113,0.292-0.194c0.083-0.082,0.149-0.178,0.196-0.287 C64.183,1.221,64.207,1.102,64.207,0.976z M11.682,7.129c0.569,0.124,1.141,0.249,1.71,0.372c-0.644,1.345-1.439,1.894-2.949,1.894 c-2.905,0-4.321-3.531-2.448-5.685c1.952-2.247,5.476-0.947,5.727,1.978c-1.588,0.346-3.175,0.691-4.763,1.037 c0.072,0.165,0.169,0.32,0.287,0.456c0.065,0.075,0.137,0.145,0.214,0.207c0.1,0.08,0.207,0.147,0.321,0.202 c0.205,0.097,0.434,0.148,0.661,0.148c0.227,0,0.455-0.052,0.66-0.148c0.114-0.054,0.221-0.123,0.32-0.202 C11.519,7.311,11.605,7.224,11.682,7.129z M8.886,5.456c0.932-0.202,1.864-0.404,2.796-0.607c-0.014-0.018-0.029-0.035-0.043-0.053 c-0.066-0.075-0.137-0.145-0.214-0.208c-0.1-0.078-0.207-0.146-0.321-0.201c-0.206-0.097-0.433-0.148-0.66-0.148 c-0.228,0-0.456,0.052-0.661,0.148C9.668,4.443,9.561,4.511,9.461,4.589c-0.1,0.082-0.19,0.174-0.271,0.276 C9.108,4.969,9.039,5.084,8.982,5.205C8.944,5.286,8.912,5.371,8.886,5.456z'/%3E%3C/svg%3E");
    mask-position: center center;
    mask-size: contain;
    mask-repeat: no-repeat;
    margin-top: 0.3em;
    background-color: var(--text);
}




/* 
    HERO
 */


#hero {
    height:var(--heroHeight);
    width: 100vW;
    display: flex;
    justify-content: center;
    align-items: center;
}

#hero-bg {
  position: absolute;
  width: 100vW;
  height: var(--heroHeight);
  overflow: hidden;
  z-index: 0;
}

#pixelCanvas {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: calc(100% + 30px);
  margin-left: 4px;
  background-color: var(--bg);    
}

#herotext{
    z-index: 1;
    pointer-events: none;
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
    padding-bottom:4rem;
}   

#herotext h2 {
  line-height: 1.6em;
  margin-bottom: 0;
  width: 100%;
  max-width: 40rem;
  aspect-ratio: 30 / 5;
}

#herotext h3 {
  font-size: 1.3rem;
  text-align: center;
  background-color: var(--accent);
  padding: 0.2em 0.6em;
  margin-top: 0.4em;
  color:var(--bg);
  transform: rotateZ(-2deg);
  display: inline-block;
  font-family: var(--monofont);
}

#separatorline {
    position: sticky;
    width: 100%;
    height: 2px;
    background-color: var(--accent);
    top:3rem;
    margin-top:-2px;
}







.entry{
    display: flex;
    flex-direction: column;
    margin:9rem auto;
}


.entry h2 {
    margin: 2rem auto;
    position: relative;
    display: inline-block;
    color: var(--text);
    position: relative;
}

.entry h2 span{
    position: relative;
    z-index: 1;
}
.entry p {
    line-height: 1.8em;
    text-align: justify;
    hyphens: auto;
    margin-bottom: 2rem;
}



.content_with_image_left :is(img, svg) {
  width: 9rem;
  height: 9rem;
  fill: var(--text);
  float: left;
  margin: 0.25rem 2rem 2rem 0;
}






.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--gridSizeMin), var(--gridSizeMax)));
    gap: 3rem;
    justify-content: center;
}

.card {
    padding: 1rem;
    transition: 0.6s var(--transition);
    position: relative;
    overflow: hidden;
    text-align: center;
    border: 2px solid var(--accent);
    color:var(--accent);
}

.card:hover, .card.hovered {
    transform: scale(1.05) rotate(-2deg) !important;
    background-color: var(--accent);
    color:var(--bg);
}

/* .card:nth-child(2n):hover {
    transform: scale(1.03) rotate(2deg) !important;
} */

.card svg {
    width: 100%;
    height: auto;
    margin-bottom: 1rem;
}

.card svg * {
    stroke: currentColor;
    stroke-width: 2px;
    vector-effect: non-scaling-stroke;
}
.card h3 {
    font-size: 1.2rem;
    color: inherit;
    font-family: var(--monofont);
}


/* REVEAL */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: 1s var(--transition);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}




#overlay {
    display: flex;
    position: fixed;
    inset: 0;
    backdrop-filter: blur(4px);
    z-index: 100;
    transition: 0.6s var(--transition);
    pointer-events: none;
    opacity:0;
}

#overlay_inner {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 100;
    transform: translateY(100%) rotate(-40deg) scale(0);
    transform-origin: center center;
    transition: 0.6s var(--transition);
    pointer-events: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#overlay.visible{
    opacity:1;
    pointer-events: all;
}

#overlay.visible #overlay_inner {
    transform: unset;
    pointer-events: all;
}
#overlay_content div {
    display:none;    
    padding: 3rem;
    padding-top: 2rem;

}
#overlay_content div.visible {
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 35rem;
    font-size: 1.3rem;
    position: relative;
}
#overlay_content div h2 {
    font-size: 2rem;
    color: var(--accent);
    margin-bottom: 4rem;
    text-align: left;
    width: 100%;
    
}

#overlay_content div::before {
    position: absolute;
    content: "";
    width: calc(100% + 4rem);
    height: calc(100% + 4rem);
    top: -2rem;
    left: -2rem;   
    background-color: var(--bg);
    border: 2px solid var(--accent);
    transform: rotate(-2deg);

}
#overlay_content div.visible * {
    position: relative;
    z-index: 1;
    flex-grow: 1;
    width: 100%;
}



#close_overlay{
    display: block !important;
    background-color: transparent;
    border: none;
    position: absolute;
    top: 3rem;
    right: 3rem;
    width: 3rem;
    height: 3rem;
    cursor: pointer;
    color: var(--text);
    fill: var(--text);
    }



#kunden{
    flex-direction: row;    
    flex-wrap: wrap;
    justify-content: center;   
    gap:1.5rem;
    justify-content: center;
}

#kunden a {
    width: calc(33.33% - 1rem);
    border:1px solid var(--text);
    padding: 1.5rem;
    transition: 0.6s var(--transition);
}
#kunden img {
    width: 100%;
    height: auto;
    filter: var(--kundenfilter_normal);
    transition: 0.6s var(--transition);
    opacity: 0.7;    
}

#kunden a:hover, #kunden a.hovered {
    background-color: var(--accent);
    border-color: var(--accent);
    transform: scale(1.05) rotate(-2deg) !important;
}

#kunden a:hover img, #kunden a.hovered img{
    filter: var(--kundenfilter_hover);
    opacity: 1;    

}



footer {
    border-top: 2px solid var(--accent);
    padding: 4rem 0;
    text-align: center;
    color: var(--text);
}

footer .row {
    display: flex;
    justify-content: space-between;
}

footer .logo_svg{
    height: 1.65rem;
    width: 11.5rem;
    display: inline-block;
}

footer a, form a {
    color: var(--accent);
    text-decoration: none;
    font-family: var(--monofont);
    transition: 0.6s var(--transition);
    padding: 0 0.5em;
    display: inline-block;
}

footer a:hover, form a:hover {
    background-color: var(--accent);
    color: var(--bg);
    transform: rotate(-1deg);
}

footer .row > div:first-child {
    text-align: left;
}
footer .row > div:last-child {
    text-align: right;
}



form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
}


#kontaktform label {
    max-width: 40rem;
    position: relative;
    padding-top: 0.5rem;
    width: 100%;
}
#kontaktform :is(input, textarea) {
    border:2px solid var(--text);
    outline:2px solid var(--bg);
    border-radius: 0.1rem;
    width: 100%;
    transition: 0.6s var(--transition);
}


#kontaktform label:focus-within :is(input, textarea){
    border:2px solid var(--accent);
    outline:2px solid var(--accent);

}
#kontaktform label:not(.switch) span{
    position: absolute;
    background-color: var(--bg);
    top: -0.5rem;
    padding: 0 0.5rem;
    left: calc(0.5rem - 2px);
    z-index: 2;
}

#kontaktform input[type="submit"] {
  max-width: 40rem;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

#kontaktform:invalid input[type='submit'], #kontaktform:invalid input[type='submit']:hover, #kontaktform:invalid input[type='submit']:active {
  border-color: var(--text) !important;;
  color:var(--text) !important;
  transform: none !important;
  background-color: var(--bg) !important;
  outline: 2px solid var(--bg) !important;
}

#kontaktform input[type='submit']:hover {
  border-color: var(--accent) !important;
  background-color: var(--accent) !important;
  color:var(--bg) !important;
}

#kontaktform input[type='submit']:active {
  outline: 2px solid var(--accent);
}





input,
button[type="submit"],
textarea {
    width: 100%;
    font-size: 1rem;
    padding: 0.5rem 0.8rem;
    color: var(--text);
    font-family: 'Inter', sans-serif;
    background-color: transparent;
    line-height: 1.4;
    border:0px none;
    outline: none;
}

::placeholder {
  opacity: 0.2;
  color: var(--text);
}
input:not(:placeholder-shown):invalid {
    border-color: #cc0000 !important;
    outline-color: #cc0000 !important;
}

.switch input {
    position: absolute;
    margin: 0;
    opacity: 0 !important;
    width: 15px !important;
    z-index: -10;
    padding: 0 !important;
    min-height: 1px;
    min-width: 1px;
    transform: scale(0.1);
}

.switch {
    justify-content: center;
    align-items: center;
    position: relative;
    padding-left: 3em;
    display: inline-block;
    font-size: 0.75rem;
    margin-left: 0.3em;
    margin-top: 0.1em;
}

.switch:before {
    width: 2.5em;
    border-radius: 1em;
    background: var(--bg);
    border: 2px solid var(--text);
    transition: .3s
}

.switch:after {
    width: 1.5em;
    border-radius: 1em;
    background: var(--switchcolor);
    border: 2px solid var(--text);
    transition: .3s
}

.switch:hover:after {
    box-shadow: 0 0 .31em rgba(0, 0, 0, .3)
}

.switch:has(:checked):after {
    margin-left: 1em
}

.switch:has(:checked):before {
    background: var(--accent);
}

.switch:has(:disabled),
.switch:has(:disabled):after,
.switch:has(:disabled):before {
    opacity: .7;
    pointer-events: none;
    box-shadow: none !important
}

.switch:after,
.switch:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 1.5em;
    display: block;
}

.switch span {
  top: -0.5rem;
  position: relative;
  margin-left: 0.5rem;
}