/* cyrillic-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/inter-cyrillic-ext.woff2") format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/inter-cyrillic.woff2") format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/inter-greek-ext.woff2") format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/inter-greek.woff2") format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/inter-vietnamese.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
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;
}
/* latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
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;
}
/* cyrillic-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/inter-cyrillic-ext.woff2") format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/inter-cyrillic.woff2") format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/inter-greek-ext.woff2") format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/inter-greek.woff2") format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/inter-vietnamese.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
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;
}
/* latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
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;
}
/* cyrillic-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/inter-cyrillic-ext.woff2") format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/inter-cyrillic.woff2") format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/inter-greek-ext.woff2") format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/inter-greek.woff2") format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/inter-vietnamese.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 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;
}
/* latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 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;
}
/* cyrillic-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/inter-cyrillic-ext.woff2") format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/inter-cyrillic.woff2") format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/inter-greek-ext.woff2") format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/inter-greek.woff2") format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/inter-vietnamese.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
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;
}
/* latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
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;
}
/* cyrillic-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("../fonts/inter-cyrillic-ext.woff2") format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("../fonts/inter-cyrillic.woff2") format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("../fonts/inter-greek-ext.woff2") format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("../fonts/inter-greek.woff2") format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("../fonts/inter-vietnamese.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 800;
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;
}
/* latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 800;
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;
}
/* cyrillic */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/playfair-cyrillic-ext.woff2") format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/playfair-vietnamese.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/playfair-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;
}
/* latin */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/playfair-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;
}
/* cyrillic */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/playfair-cyrillic-ext.woff2") format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/playfair-vietnamese.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/playfair-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;
}
/* latin */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/playfair-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;
}
/* cyrillic */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/playfair-cyrillic-ext.woff2") format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/playfair-vietnamese.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/playfair-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;
}
/* latin */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/playfair-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;
}
/* cyrillic */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("../fonts/playfair-cyrillic-ext.woff2") format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("../fonts/playfair-vietnamese.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("../fonts/playfair-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;
}
/* latin */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("../fonts/playfair-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;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--nav-height: 88px;
--primary: #061B3A;
--primary-deep: #030D1F;
--accent: #2472E8;
--accent-light: rgba(36,114,232,0.07);
--accent-sky: #DDEAFD;
--bg: #ffffff;
--bg-2: #F5F7FA;
--bg-3: #EFF6FF;
--bg-4: #F5F7FA;
--bg-5: #F5F7FA;
--border: #E9EEF6;
--muted: #5B6A79;
--muted-fg: #8A9AB0;
--card-bg: #ffffff;
--gold: #C99A3D;
--gold-light: rgba(201,154,61,0.10);
--font: 'Inter', system-ui, -apple-system, sans-serif;
--font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
}
html { scroll-behavior: smooth; scroll-padding-top: 88px; margin: 0; padding: 0; }
body { margin: 0; padding: 0; font-family: var(--font); color: var(--primary); background: var(--bg); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
/* Sicherheitsnetz: dunkler Streifen (Ton des oberen Bildrands) hinter den obersten Pixeln — falls durch Subpixel-Rundung je 1px Gap entsteht, ist er unsichtbar statt weiß */
body::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: #16233f; z-index: -1; pointer-events: none; }
header, .hero-viewport { margin-top: 0; }
.container { max-width: 1360px; margin: 0 auto; padding: 0 24px; }
/* ── HEADER ── */
header {
position: sticky; top: 0; z-index: 50;
background: transparent;
border-bottom: 1px solid transparent;
transition: background .25s ease, border-color .25s ease, box-shadow .2s ease;
}
/* Nicht gescrollt: komplett transparent — Logo, Links und Button liegen direkt auf dem Hero-Bild */
header:not(.scrolled) { background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
header.scrolled {
background: #FFFFFF;
backdrop-filter: blur(14px) saturate(115%);
-webkit-backdrop-filter: blur(14px) saturate(115%);
border-bottom-color: var(--border);
box-shadow: 0 2px 14px rgba(6,27,58,0.07);
}
.header-inner {
max-width: 1460px; margin: 0 auto; padding: 0 clamp(28px, 3.4vw, 56px);
display: grid; grid-template-columns: auto 1fr auto;
align-items: center; height: 88px; gap: 32px;
}
.header-logo { display: flex; align-items: center; }
.header-logo img { height: 66px; width: auto; object-fit: contain; margin-top: -4px; cursor: pointer; }
.header-nav {
display: flex; justify-content: center; align-items: center; gap: 4px;
padding: 0; border-radius: 0;
transition: background .25s ease;
}
header:not(.scrolled) .header-nav { background: transparent; }
.nav-btn {
background: none; border: none; cursor: pointer;
font-family: var(--font); font-size: 16.5px; font-weight: 700;
color: #ffffff; padding: 10px 16px; border-radius: 999px;
white-space: nowrap;
text-shadow: 0 1px 4px rgba(0,0,0,0.35);
transition: background .15s, color .15s;
}
.nav-btn:hover { background: rgba(255,255,255,0.12); }
.nav-btn.active { font-weight: 800; background: rgba(255,255,255,0.10); }
header.scrolled .nav-btn { color: #14233D; text-shadow: none; }
header.scrolled .nav-btn:hover { background: rgba(20,35,61,0.07); color: var(--primary); }
header.scrolled .nav-btn.active { color: var(--primary); font-weight: 700; background: rgba(20,35,61,0.06); }
.header-cta { display: flex; align-items: center; gap: 12px; }
.header-cta .btn-primary {
font-size: 15.5px; padding: 13px 28px; border-radius: 10px;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%);
box-shadow: 0 8px 22px -8px rgba(6,27,58,0.5), 0 2px 8px rgba(6,27,58,0.18);
border: 1px solid rgba(255,255,255,0.14);
}
.header-cta .btn-primary:hover { box-shadow: 0 10px 26px -8px rgba(6,27,58,0.55), 0 2px 8px rgba(6,27,58,0.2); }
.btn-primary {
display: inline-flex; align-items: center; gap: 6px;
background: var(--primary); color: white;
font-family: var(--font); font-size: 14px; font-weight: 600;
padding: 10px 22px; border-radius: 10px; border: none; cursor: pointer;
box-shadow: 0 2px 10px rgba(6,27,58,0.22), 0 1px 2px rgba(6,27,58,0.10);
transition: background .15s, box-shadow .15s, transform .1s;
text-decoration: none;
}
.btn-primary:hover { background: var(--primary-deep); box-shadow: 0 5px 18px rgba(6,27,58,0.32); transform: translateY(-1px); }
.btn-outline {
display: inline-flex; align-items: center; gap: 6px;
background: white; color: var(--primary);
font-family: var(--font); font-size: 14px; font-weight: 500;
padding: 10px 22px; border-radius: 10px; border: 1.5px solid var(--border); cursor: pointer;
transition: background .15s, border-color .15s;
text-decoration: none;
}
.btn-outline:hover { background: #f8f6f2; border-color: rgba(6,27,58,0.18); }
/* ── HERO ── */
.hero-viewport {
/* nach oben unter die (transparente) Navbar gezogen, damit das Bild am Seitenrand beginnt */
margin-top: calc(-1 * var(--nav-height));
padding-top: var(--nav-height);
background-color: #16233f;
/* Bereich (Navbar + Hero) übernimmt das Seitenverhältnis des Bildes (941/1672 = 56.28%),
wächst aber mit, falls der Inhalt höher ist — der weiße Bereich darunter verschmilzt
mit dem bereits ins Weiß auslaufenden unteren Bildrand */
min-height: 100svh;
display: flex; flex-direction: column;
position: relative; overflow: hidden; isolation: isolate;
}
/* Sanfter, unsichtbarer Aufheller hinter Headline/Subline — Bild selbst bleibt unverändert, nur bessere Lesbarkeit über unruhigen Bildbereichen (Dächer/Türme) */
.hero-text-scrim {
position: absolute; left: 50%; top: 2%; transform: translateX(-50%);
width: min(1200px, 94vw); height: 48%;
background: radial-gradient(ellipse at center, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.08) 38%, rgba(255,255,255,0) 70%);
z-index: 0; pointer-events: none;
}
/* Hintergrundbild füllt den gesamten Hero — Szene bleibt auch hinter der Branchenleiste klar sichtbar */
.hero-bg-img {
position: absolute; inset: 0;
width: 100%; height: 100%;
background-size: cover; background-position: center center; background-repeat: no-repeat; background-attachment: scroll;
z-index: 0; pointer-events: none; user-select: none;
}
.hero-viewport::before { display: none; }
/* Bottom-Fade: Bild läuft unten weich über volle Breite in den Sektion-2-Ton (var(--bg)) aus */
.hero-viewport::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 100px;
background:
radial-gradient(
ellipse 42% 165% at 50% 100%,
var(--bg) 0%,
var(--bg) 38%,
rgba(255,255,255,0.35) 58%,
transparent 72%
),
linear-gradient(
to bottom,
transparent 0%,
transparent calc(100% - 48px),
var(--bg) 100%
);
pointer-events: none;
z-index: 1;
}
.hero {
background: transparent;
padding: clamp(14px, 2.4vh, 36px) 24px clamp(22px, 2.8vh, 38px);
padding-bottom: 0;
position: relative; overflow: visible; z-index: 2;
flex: 1 1 auto;
display: flex; align-items: flex-end; justify-content: center;
}
.hero-inner {
max-width: 1280px; margin: 0 auto; width: 100%; padding: 0 clamp(1.5rem, 5vw, 4rem);
display: flex; flex-direction: column; align-items: center;
text-align: center; position: relative; z-index: 2;
}
.hero-badge {
display: inline-flex; align-items: center; gap: 8px;
background: rgba(255,255,255,0.85); border: 1px solid var(--border);
border-radius: 999px; padding: 6px 16px;
font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--accent); backdrop-filter: blur(8px);
}
.hero-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.hero h1 {
margin-top: -24px; margin-left: auto; margin-right: auto;
font-family: var(--font-serif);
font-size: clamp(2.8rem, 4.5vw, 4.2rem); font-weight: 700;
line-height: 0.96; letter-spacing: -0.035em; color: #07162E;
max-width: 980px; text-wrap: balance;
text-shadow: 0 2px 10px rgba(7,22,46,0.16);
position: relative; z-index: 1;
}
.hero h1 .accent { color: #0A7CFF; }
.hero h1 strong { font-weight: 700; }
.hero-sub {
margin-top: 18px; margin-left: auto; margin-right: auto; font-size: clamp(1rem, 1.6vw, 1.2rem); line-height: 1.6;
color: rgba(255,255,255,0.88); font-weight: 500; max-width: 900px; text-wrap: pretty;
text-shadow: 0 1px 10px rgba(0,0,0,0.4);
position: relative; z-index: 1;
}
.hero-guarantee {
margin-top: 18px; display: inline-flex; align-items: center; gap: 8px;
background: rgba(201,154,61,0.05); border: 1px solid rgba(201,154,61,0.26);
border-radius: 999px; padding: 9px 18px;
font-size: 13.5px; font-weight: 600; color: var(--primary);
box-shadow: 0 2px 10px -4px rgba(201,154,61,0.14);
}
.hero-btns { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; }
/* Hero mockup — laptop + floating cards */
.hero-mockup {
width: 100%; max-width: 1340px; justify-self: end; flex-shrink: 1;
margin-right: 0;
position: relative; min-height: 0;
display: flex; align-items: center; justify-content: center;
}
/* Weicher heller Lichtschein hinter dem Laptop -> ruhiger, heller Bereich rechts */
.hero-mockup::before {
content: ''; position: absolute; z-index: 1; pointer-events: none;
left: 50%; top: 47%; transform: translate(-50%,-50%);
width: 94%; height: 86%;
background: radial-gradient(ellipse at center, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.32) 44%, rgba(255,255,255,0) 74%);
}
/* Weicher Bodenschatten + kompakter Kontaktschatten – erdet den Laptop natürlich, ohne harte Platte */
.hero-mockup::after {
content: ''; position: absolute; z-index: 2; pointer-events: none;
left: 50%; bottom: 0.5%; transform: translateX(-50%);
width: 88%; height: clamp(48px, 5.5vw, 74px);
background:
radial-gradient(ellipse 46% 58% at 50% 64%, rgba(12,31,74,0.18) 0%, rgba(12,31,74,0) 72%),
radial-gradient(ellipse at center, rgba(12,31,74,0.12) 0%, rgba(12,31,74,0.05) 50%, rgba(12,31,74,0) 80%);
filter: blur(22px);
}
/* Background dashed ellipse + connector lines */
.hero-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: visible; }
.hero-connect { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: visible; }
/* ===== Hero Laptop (Foto-Render) ===== */
.hero-laptop-img {
position: relative; z-index: 3;
display: block;
width: 100%;
max-width: none;
height: auto;
margin: 0;
filter: drop-shadow(0 36px 52px rgba(6,27,58,0.13)) drop-shadow(0 14px 26px rgba(6,27,58,0.08)) drop-shadow(0 3px 8px rgba(6,27,58,0.05));
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
/* Floating info cards */
.float-card {
position: absolute; z-index: 10;
background: rgba(255,255,255,0.97); border-radius: 14px;
border: 1px solid var(--border);
box-shadow: 0 12px 32px -10px rgba(6,27,58,0.20), 0 2px 6px rgba(6,27,58,0.05);
backdrop-filter: blur(10px);
padding: 13px 16px;
display: flex; align-items: center; gap: 12px;
text-align: left;
}
.float-card-icon {
width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
}
.float-card-icon svg { width: 21px; height: 21px; }
.float-card-title { font-size: 14px; font-weight: 700; color: var(--primary); line-height: 1.25; letter-spacing: -0.01em; white-space: nowrap; }
.float-card-sub { font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.35; }
.float-card-tl {
top: 3%; right: -18px; width: 226px;
animation: floatCard 7s ease-in-out infinite; animation-delay: 0s;
}
.float-card-ml {
top: 45%; left: -28px; width: 216px;
animation: floatCard 7s ease-in-out infinite; animation-delay: -2.3s;
}
.float-card-br {
bottom: 8%; right: -14px; width: 218px;
animation: floatCard 7s ease-in-out infinite; animation-delay: -4.6s;
}
@keyframes floatCard {
0%,100% { transform: translateY(0px); }
50% { transform: translateY(-8px); }
}
/* ===== Desktop-Skalierung: Hero präsenter auf großen Screens ===== */
@media (min-width: 1280px) {
.header-inner { max-width: 1760px; }
.hero h1 { max-width: 980px; }
.hero-sub { max-width: 1000px; }
}
@media (min-width: 1600px) {
.header-inner { max-width: min(2120px, 95vw); }
}
/* ── Explizite Breakpoints (Viewport-Fix) ── */
@media (min-width: 768px) { /* MacBook / Laptop */ }
@media (min-width: 1440px) { /* Desktop */ }
@media (min-width: 2000px) { /* Großer Monitor — font-sizes leicht reduzieren, damit nichts überdimensioniert wirkt */
.hero h1 { font-size: clamp(2.8rem, 3.4vw, 4.4rem); }
.hero-sub { font-size: clamp(1rem, 1.3vw, 1.25rem); }
}
.mockup-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.mockup-card { height: 36px; border-radius: 10px; background: #f8fafc; border: 1px solid #E2E8F0; }
/* ── TRUST STRIP ── */
.trust-strip { background: transparent; }
.trust-inner {
max-width: 1280px; margin: 0 auto; padding: 0 24px 52px;
display: flex; flex-wrap: wrap; gap: 10px 36px;
}
.trust-item {
display: flex; align-items: center; gap: 8px;
font-size: 13.5px; font-weight: 500; color: #64748b;
}
.trust-item svg { color: #0C1F4A; flex-shrink: 0; opacity: 0.7; }
@media (max-width: 640px) { .trust-inner { gap: 10px 24px; } }
/* ── WARM WAVE (Creme-Welle hinter „Wer wir sind“) ── */
.wave { position: absolute; left: 0; right: 0; line-height: 0; pointer-events: none; z-index: 0; }
.wave svg { display: block; width: 100%; height: 100%; }
.wave-hero-cream { top: 0; height: 84px; transform: none; z-index: 1; }
.wave-cream-features { top: 0; height: 84px; }
.wave-about-bottom { bottom: -1px; height: 70px; z-index: 2; }
/* ── TRUST BAR (4-up, wie Referenz) — jetzt auf warmer Creme-Fläche ── */
.trustbar { background: transparent; position: relative; flex-shrink: 0; z-index: 1; padding: clamp(4px,0.8vw,12px) clamp(20px,3vw,44px) clamp(16px,2.2vw,30px); }
.trustbar-grid {
max-width: min(1500px, 92vw); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr);
background: rgba(255,255,255,0.97); border: 1px solid var(--border); border-radius: 16px;
box-shadow: 0 4px 24px -10px rgba(6,27,58,0.09), 0 1px 3px rgba(6,27,58,0.04);
overflow: hidden;
}
.trustbar-col {
position: relative;
display: flex; flex-direction: column; align-items: center; text-align: center;
padding: clamp(16px,1.8vw,24px) clamp(18px,2.2vw,34px);
}
.trustbar-col + .trustbar-col::before {
content: ''; position: absolute; left: -0.5px; top: 50%; transform: translateY(-50%);
width: 1px; height: 52px;
background: linear-gradient(180deg,
transparent 0%,
#D4DCE8 20%,
#C8D2E0 50%,
#D4DCE8 80%,
transparent 100%);
}
.trustbar-icon { color: var(--accent); opacity: 0.75; margin-bottom: 10px; }
.trustbar-title { font-size: 14.5px; font-weight: 700; color: var(--primary); letter-spacing: -0.01em; margin-bottom: 5px; }
.trustbar-sub { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
@media (max-width: 760px) {
.trustbar-grid { grid-template-columns: repeat(2, 1fr); }
.trustbar-col:nth-child(3)::before { display: none; }
.trustbar-col { padding: 26px 22px; }
}
@media (max-width: 460px) {
.trustbar-grid { grid-template-columns: 1fr; }
.trustbar-col::before { display: none; }
}
/* ── STATS BAR (Teil der Startseite) ── */
.stats-bar { max-width: 1180px; margin: 4px auto 0; padding: 0 24px 4px; }
.stats-grid {
display: grid; grid-template-columns: repeat(4, 1fr);
background: linear-gradient(180deg,#ffffff,#fbfcfe);
border: 1px solid var(--border); border-radius: 18px;
box-shadow: 0 14px 36px rgba(12,31,74,0.06), 0 2px 6px rgba(12,31,74,0.04);
padding: 24px 10px; gap: 10px;
}
.stat {
display: flex; flex-direction: column; align-items: center; text-align: center;
padding: 2px 14px; gap: 6px; position: relative;
}
.stat + .stat::before {
content: ''; position: absolute; left: 0; top: 14%; height: 72%;
width: 1px; background: linear-gradient(180deg,transparent,var(--border) 22%,var(--border) 78%,transparent);
}
.stat-icon {
width: 42px; height: 42px; border-radius: 12px;
display: flex; align-items: center; justify-content: center;
background: var(--accent-sky); color: var(--accent); margin-bottom: 1px;
}
.stat-num { font-size: 25px; font-weight: 800; letter-spacing: -0.03em; color: var(--accent); line-height: 1; }
.stat-label { font-size: 12.5px; font-weight: 500; color: #475569; line-height: 1.35; max-width: 170px; }
@media (max-width: 760px) {
.stats-grid { grid-template-columns: repeat(2, 1fr); padding: 26px 8px; row-gap: 30px; }
.stat:nth-child(odd)::before { display: none; }
.stat:nth-child(3)::before, .stat:nth-child(4)::before { display: none; }
}
/* ── ABOUT („Wer wir sind“) — warme Creme-Fläche, großzügig ── */
.about-section { background: var(--bg-2); padding: clamp(104px, 9vw, 132px) 24px clamp(78px, 7vw, 108px); position: relative; overflow: hidden; }
/* Schlichtes Punktraster (gleiches Motiv wie Sektion 2) — dezent, randweich ausgeblendet */
.about-section::before {
content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background-image: radial-gradient(circle at center, rgba(6,27,58,0.05) 1.3px, transparent 1.5px);
background-size: 28px 28px;
-webkit-mask-image: radial-gradient(118% 100% at 50% 46%, #000 22%, transparent 72%);
mask-image: radial-gradient(118% 100% at 50% 46%, #000 22%, transparent 72%);
}
.about-inner, .about-section .wave { position: relative; z-index: 1; }
.about-section .section-eyebrow { background: rgba(255,255,255,0.7); border-color: rgba(201,154,61,0.3); color: #C99A3D; }
.about-section .section-h2 { color: #061B3A; font-size: clamp(33px, 3.8vw, 50px); line-height: 1.13; letter-spacing: -0.025em; text-wrap: balance; max-width: 16ch; }
.about-section .section-body { color: #5B6A79; max-width: 470px; font-size: 17px; line-height: 1.75; margin-top: 22px; }
.about-section .checklist { margin-top: 34px; gap: 11px; }
.about-section .checklist-item {
font-size: 15.5px; font-weight: 600; gap: 14px; color: #1B2740; align-items: center;
background: rgba(255,255,255,0.5); border: 1px solid rgba(12,31,74,0.05);
border-radius: 13px; padding: 12px 16px;
}
.about-section .checklist-item .chk {
width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
background: #E4EDFA; display: flex; align-items: center; justify-content: center;
}
.about-section .checklist-item .chk svg { color: #2472E8; width: 17px; height: 17px; }
/* About neu geordnet: rechte Wertekacheln (2×2) + regionaler Chip */
.about-content { max-width: 600px; }
.about-values { margin-top: clamp(26px, 3vw, 38px); display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.about-value {
background: rgba(255,255,255,0.62); border: 1px solid rgba(12,31,74,0.06); border-radius: 16px;
padding: 20px 20px 18px; box-shadow: 0 1px 2px rgba(6,27,58,0.03);
transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
}
.about-value:hover { transform: translateY(-2px); border-color: rgba(12,31,74,0.12); box-shadow: 0 10px 26px -14px rgba(6,27,58,0.22); }
.about-value .av-ico { width: 40px; height: 40px; border-radius: 11px; background: #E4EDFA; color: #2472E8; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.about-value .av-ico svg { width: 21px; height: 21px; }
.about-value .av-title { font-size: 16px; font-weight: 800; color: #1B2740; letter-spacing: -0.01em; line-height: 1.25; }
.about-value .av-desc { margin-top: 6px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.about-chip {
position: absolute; top: clamp(-12px,-1.4vw,-18px); right: clamp(-8px,-1vw,-16px); z-index: 2;
display: inline-flex; align-items: center; gap: 7px;
background: #fff; border: 1px solid rgba(12,31,74,0.06); border-radius: 999px;
padding: 8px 15px 8px 12px;
box-shadow: 0 10px 26px -12px rgba(6,27,58,0.28), 0 2px 6px rgba(6,27,58,0.06);
font-size: 12.5px; font-weight: 700; color: var(--primary); letter-spacing: 0.01em;
}
.about-chip svg { width: 15px; height: 15px; color: #C99A3D; }
@media (max-width: 980px) { .about-content { max-width: none; } }
@media (max-width: 480px) { .about-values { grid-template-columns: 1fr; } }
.about-values-wide { max-width: 1280px; margin: clamp(28px, 3vw, 44px) auto 0; padding: 0 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
@media (max-width: 480px) { .about-values-wide { grid-template-columns: 1fr; } }
.about-grid {
display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
gap: clamp(16px, 1.6vw, 24px); width: 100%; height: 100%; min-height: 460px;
}
.about-grid-img {
width: 100%; height: 100%; min-height: 0; object-fit: cover; display: block;
border-radius: 20px; border: 1px solid #E8E2D8;
box-shadow: 0 22px 50px rgba(6,27,58,0.10), 0 4px 12px rgba(6,27,58,0.06);
background: #E8E2D8;
}
@media (max-width: 480px) { .about-grid { gap: 12px; } }
.about-inner {
max-width: 1280px; margin: 0 auto;
display: grid; grid-template-columns: minmax(0, 0.96fr) minmax(0, 1fr);
gap: clamp(40px, 4.6vw, 84px); align-items: center;
}
/* About: großes Hauptbild rechts + EINE klare Floating-Card */
.about-visual { position: relative; width: 100%; max-width: 600px; margin: 0 auto; }
.about-photo { position: relative; }
.about-photo-frame {
position: relative; border-radius: 22px; overflow: hidden;
aspect-ratio: 1.12 / 1;
border: 1px solid rgba(255,255,255,0.85);
box-shadow: 0 36px 80px -30px rgba(6,27,58,0.42), 0 10px 26px rgba(6,27,58,0.10);
}
.about-photo-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 72%; display: block; }
.about-deco {
position: absolute; top: -28px; right: -24px; width: clamp(148px, 17vw, 206px); height: auto;
color: #0C1F4A; opacity: 0.10; z-index: 0; pointer-events: none;
}
.about-photo-card {
position: absolute; left: clamp(-12px, -1.5vw, -26px); bottom: clamp(-14px, -1.7vw, -24px);
display: flex; align-items: center; gap: 14px;
background: #fff; border-radius: 16px; padding: 15px 19px;
box-shadow: 0 22px 46px -16px rgba(6,27,58,0.32), 0 3px 10px rgba(6,27,58,0.08);
border: 1px solid rgba(12,31,74,0.05); max-width: 292px;
}
.about-photo-card .apc-badge {
width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
background: #E4EDFA; display: flex; align-items: center; justify-content: center;
}
.about-photo-card .apc-icon { color: #2472E8; flex-shrink: 0; width: 26px; height: 26px; }
.about-photo-card .apc-title { font-size: 16px; font-weight: 800; color: var(--primary); line-height: 1.2; letter-spacing: -0.01em; }
.about-photo-card .apc-sub { margin-top: 3px; font-size: 13.5px; color: var(--muted); line-height: 1.4; }
@media (max-width: 600px) {
.about-visual { margin-bottom: 22px; }
.about-photo-card { left: 8px; bottom: -18px; padding: 12px 15px; gap: 11px; max-width: min(84%, 282px); }
.about-photo-card .apc-badge { width: 40px; height: 40px; }
.about-photo-card .apc-icon { width: 22px; height: 22px; }
.about-deco { display: none; }
}
.section-eyebrow {
display: inline-flex; align-items: center;
background: rgba(233,238,246,0.55); border: 1px solid var(--border);
border-radius: 999px; padding: 5px 13px;
font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em;
text-transform: uppercase; color: var(--accent);
}
.section-h2 {
margin-top: 18px; font-size: clamp(26px, 3vw, 40px); font-weight: 800;
line-height: 1.1; letter-spacing: -0.02em; color: var(--primary);
}
.section-body { margin-top: 22px; font-size: 15px; line-height: 1.75; color: var(--muted); max-width: 480px; }
.checklist { margin-top: 34px; display: flex; flex-direction: column; gap: 15px; }
.checklist-item { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--primary); }
.checklist-item svg { color: var(--primary); flex-shrink: 0; }
/* Dresden card */
.dresden-card {
background: white; border-radius: 20px;
border: 1px solid rgba(148,163,184,0.5);
overflow: hidden;
box-shadow: 0 20px 60px rgba(12,31,74,0.07), 0 4px 14px rgba(0,0,0,0.04);
max-width: 400px; width: 100%;
}
.dresden-map {
height: 220px; background: #EDEAE4; position: relative; overflow: hidden;
}
.dresden-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-pin {
position: absolute; left: 50%; top: 48%; transform: translate(-50%, -100%);
display: flex; flex-direction: column; align-items: center;
}
.map-pin-circle {
width: 40px; height: 40px; border-radius: 50%;
background: var(--primary); display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 16px rgba(12,31,74,0.35);
border: 4px solid white;
}
.map-pin-tail { width: 2px; height: 12px; background: var(--primary); margin-top: -2px; }
.map-pulse {
position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
width: 64px; height: 64px; border-radius: 50%;
border: 2px solid rgba(12,31,74,0.2); background: rgba(12,31,74,0.05);
pointer-events: none;
}
.map-pulse-2 {
position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
width: 110px; height: 110px; border-radius: 50%;
border: 1px solid rgba(12,31,74,0.1); pointer-events: none;
}
.dresden-foot {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 20px;
}
.dresden-loc-label { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(12,31,74,0.6); }
.dresden-loc-name { margin-top: 2px; font-size: 14px; font-weight: 600; color: #1e293b; }
.dresden-badge { background: #EDEAE4; border-radius: 10px; padding: 6px 14px; font-size: 12px; font-weight: 500; color: var(--primary); }
/* ── PROBLEM / LÖSUNG (Website-Check) ── */
.ps-section {
background: var(--bg);
padding: clamp(54px, 6vw, 92px) 24px clamp(56px, 6vw, 96px);
position: relative; overflow: hidden;
}
.ps-section::before {
content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background-image: radial-gradient(circle at center, rgba(6,27,58,0.05) 1.3px, transparent 1.5px);
background-size: 28px 28px;
-webkit-mask-image: radial-gradient(125% 90% at 50% 32%, #000 30%, transparent 78%);
mask-image: radial-gradient(125% 90% at 50% 32%, #000 30%, transparent 78%);
}
.ps-section::after {
content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background: radial-gradient(42% 52% at 50% 0%, rgba(201,154,61,0.04) 0%, rgba(201,154,61,0) 72%);
}
.ps-section > .container { position: relative; z-index: 1; }
.ps-section .section-header { text-align: center; max-width: 1000px; margin: 0 auto clamp(40px,4.2vw,66px); }
.ps-section .section-eyebrow { background: rgba(233,238,246,0.6); border-color: var(--border); color: var(--accent); margin: 0 auto; display: inline-flex; }
.ps-section .section-h2 { color: #061B3A; margin-top: 0; font-family: var(--font-serif); font-weight: 700; line-height: 1.1; letter-spacing: -0.015em; font-size: clamp(32px, 4.1vw, 56px); text-wrap: balance; }
.ps-section .section-header .section-h2 { margin-top: 22px; }
.ps-section .section-body { color: #5B6A79; max-width: 660px; margin: 20px auto 0; text-align: center; font-size: 17.5px; line-height: 1.7; }
/* WEBSITE-CHECK Badge — weiße Pille mit rotem Punkt (wie Vorlage) */
.wc-eyebrow-badge {
display: inline-flex; align-items: center; gap: 10px;
background: #ffffff; border: 1px solid #E9E7E1; color: var(--primary);
font-size: 12.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
padding: 9px 20px; border-radius: 30px;
box-shadow: 0 2px 12px rgba(6,27,58,0.06);
}
.wc-eyebrow-dot { width: 9px; height: 9px; border-radius: 50%; background: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,0.15); flex-shrink: 0; }
/* Self-Check Header */
/* WEBSITE-CHECK (Sektion 2) — zwei Spalten */
.wc-inner { max-width: 1220px; margin: 0 auto; display: grid; grid-template-columns: 41% 59%; gap: clamp(32px, 3.6vw, 60px); align-items: center; }
.wc-eyebrow {
display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
background: #E6F1FB; color: #185FA5;
font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
padding: 6px 16px; border-radius: 20px;
}
.wc-eyebrow svg { width: 13px; height: 13px; }
.wc-h2 {
font-family: var(--font-serif); font-weight: 500;
font-size: clamp(30px, 3.2vw, 42px); line-height: 1.14; letter-spacing: -0.015em;
color: #0F1B2D; margin-top: 16px; text-wrap: balance;
}
.wc-sub { font-size: 15px; line-height: 1.6; color: #5F5E5A; max-width: 480px; margin-top: 12px; }
.wc-cards { margin-top: 0; display: flex; flex-direction: column; gap: 16px; }
.wc-card {
background: #ffffff; border: 1px solid #E9E7E1; border-radius: 14px; padding: 22px 24px;
box-shadow: 0 1px 2px rgba(6,27,58,0.04);
transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
}
.wc-card:hover { transform: translateY(-2px); border-color: #D7D6D0; box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.wc-card-head { display: flex; align-items: center; gap: 12px; }
.wc-card-ico { width: 24px; height: 24px; color: #dc2626; flex-shrink: 0; }
.wc-card-title { font-size: 17.5px; font-weight: 700; color: #0F1B2D; letter-spacing: -0.01em; }
.wc-card-text { font-size: 15px; color: #5F5E5A; line-height: 1.6; margin-top: 10px; }
.wc-card-sol { font-size: 15px; color: var(--accent); font-weight: 600; line-height: 1.55; margin-top: 10px; }
.wc-cta-wrap { margin-top: 28px; }
.wc-cta {
display: inline-flex; align-items: center; gap: 11px;
background: #0F1B2D; color: #ffffff; text-decoration: none;
border-radius: 11px; padding: 16px 30px;
font-family: var(--font); font-size: 15.5px; font-weight: 600;
transition: transform .2s ease, box-shadow .25s ease, background .2s ease;
}
.wc-cta:hover { transform: translateY(-2px); background: #16263D; box-shadow: 0 14px 30px -12px rgba(15,27,45,0.5); }
.wc-cta svg { width: 17px; height: 17px; }
.wc-visual { align-self: center; }
.wc-visual img { width: 100%; max-width: 100%; height: auto; display: block; border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,0.12); }
@media (max-width: 860px) {
.wc-inner { grid-template-columns: 1fr; gap: 32px; }
.wc-visual { order: -1; }
.wc-sub { max-width: none; }
}
/* ── FEATURES („Das macht uns aus“) — kühl & klar nach der Welle ── */
.features-section { background: linear-gradient(180deg, #F8F2E9 0%, #F5EEE2 55%, #F3EBDC 100%); padding: clamp(60px, 7vw, 96px) 24px clamp(56px, 6vw, 84px); position: relative; overflow: hidden; }
.features-section::after {
content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background:
radial-gradient(42% 50% at 88% 10%, rgba(201,154,61,0.06) 0%, rgba(201,154,61,0) 72%),
radial-gradient(40% 48% at 8% 94%, rgba(190,138,55,0.05) 0%, rgba(190,138,55,0) 72%);
}
.features-section .section-eyebrow { background: rgba(255,255,255,0.7); border-color: var(--border); color: var(--accent); }
.features-section .section-h2 { color: #061B3A; }
.features-section .section-body { color: #5B6A79; }
.features-section > .container, .features-section .feat-carousel-wrapper { position: relative; z-index: 1; }
.section-header { text-align: center; max-width: 660px; margin: 0 auto clamp(34px, 3.6vw, 52px); }
.section-header .section-eyebrow { margin: 0 auto; display: inline-flex; }
.features-grid {
max-width: 1280px; margin: 0 auto;
display: grid; grid-template-columns: repeat(4,1fr); gap: 32px 32px;
}
.feature-card { display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1; }
.feature-icon {
width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
color: var(--accent);
}
.feature-icon svg { stroke-width: 1.25; }
.feature-title { margin-top: 18px; font-size: 15px; font-weight: 700; color: var(--primary); line-height: 1.3; }
.feature-desc { margin-top: 10px; font-size: 13.5px; line-height: 1.65; color: rgba(12,31,74,0.7); }
/* ── TESTIMONIALS ── */
.testimonials-section { background: white; padding: clamp(72px, 8.5vw, 120px) 24px; }
.testimonials-grid {
max-width: 1100px; margin: 48px auto 0;
display: grid; grid-template-columns: repeat(3,1fr); gap: 28px;
}
@media (max-width: 900px) { .testimonials-grid { grid-template-columns: 1fr; max-width: 480px; } }
.testi-card {
background: white; border: 1px solid var(--border);
border-radius: 16px; padding: 28px 28px 24px;
display: flex; flex-direction: column; gap: 16px;
}
.testi-stars { display: flex; gap: 3px; color: var(--gold); font-size: 14px; }
.testi-quote { font-size: 14px; line-height: 1.65; color: var(--primary); flex: 1; }
.testi-author { display: flex; align-items: center; gap: 12px; padding-top: 8px; border-top: 1px solid var(--border); }
.testi-avatar {
width: 44px; height: 44px; border-radius: 50%;
overflow: hidden; flex-shrink: 0;
border: 2px solid var(--border);
}
.testi-name { font-size: 13px; font-weight: 700; color: var(--primary); }
.testi-role { font-size: 12px; color: var(--muted); margin-top: 1px; }
/* ── PROJECTS GRID ── */
.projects-section { background: var(--bg-4); padding: clamp(72px, 8.5vw, 120px) 24px; }
.projects-grid {
max-width: 1280px; margin: 48px auto 0;
display: grid; grid-template-columns: repeat(4,1fr); gap: 26px;
}
@media (max-width: 768px) { .projects-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px) { .projects-grid { grid-template-columns: 1fr; } }
.carousel-viewport {
overflow: hidden; cursor: grab; user-select: none;
}
.carousel-viewport:active { cursor: grabbing; }
.carousel-track {
display: flex; gap: 20px;
transition: transform .45s cubic-bezier(.25,.46,.45,.94);
will-change: transform;
}
.carousel-slide {
flex: 0 0 100%;
min-width: 0;
}
.carousel-nav {
display: flex; flex-direction: column; align-items: center; justify-content: center;
margin-top: 28px; padding: 0 24px; gap: 16px;
}
.carousel-dots { display: flex; gap: 7px; align-items: center; }
.carousel-dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--border); border: none; padding: 0; cursor: pointer;
transition: all .25s;
}
.carousel-dot.active { width: 22px; border-radius: 4px; background: var(--primary); }
.carousel-arrows { display: flex; gap: 8px; }
.carousel-btn {
width: 40px; height: 40px; border-radius: 50%;
border: 1px solid var(--border); background: white;
display: flex; align-items: center; justify-content: center;
cursor: pointer; color: var(--primary); transition: all .15s;
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.carousel-btn:hover { background: var(--primary); color: white; border-color: var(--primary); }
.carousel-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.carousel-btn:disabled:hover { background: white; color: var(--primary); border-color: var(--border); }
.project-card {
background: white; border-radius: 20px;
border: 1px solid rgba(148,163,184,0.5);
overflow: hidden;
box-shadow: 0 4px 16px rgba(12,31,74,0.05);
transition: box-shadow .2s, transform .2s;
}
.project-card:hover { box-shadow: 0 12px 32px rgba(12,31,74,0.10); transform: translateY(-2px); }
.project-chrome {
background: #f8fafc; border-bottom: 1px solid #f1f5f9;
padding: 9px 12px; display: flex; align-items: center; gap: 5px;
}
.proj-dot { width: 7px; height: 7px; border-radius: 50%; background: #e2e8f0; }
.proj-url { flex: 1; margin-left: 5px; height: 14px; border-radius: 5px; background: white; border: 1px solid #e2e8f0; }
.project-body { padding: 14px; height: 208px; overflow: hidden; }
/* Hover-Scroll: Inhalt ist höher als das Fenster und faehrt bei Hover nach unten durch.
Für echte Screenshots später: gesamten Skeleton-Inhalt von .proj-scroll durch
ersetzen — gleiche Mechanik. */
.proj-scroll { transition: transform 2.8s cubic-bezier(.33,.62,.61,1); will-change: transform; }
.project-card:hover .proj-scroll { transform: translateY(calc(208px - 100% - 28px)); }
.proj-shot { width: 100%; display: block; }
@media (prefers-reduced-motion: reduce) { .proj-scroll { transition: none; } .project-card:hover .proj-scroll { transform: none; } }
.proj-hero {
border-radius: 10px; padding: 18px 14px 14px;
display: flex; flex-direction: column; justify-content: flex-end;
margin-bottom: 12px;
}
.proj-h { height: 10px; border-radius: 5px; background: rgba(12,31,74,0.65); width: 72%; margin-bottom: 6px; }
.proj-p { height: 6px; border-radius: 4px; background: rgba(12,31,74,0.3); width: 50%; margin-bottom: 12px; }
.proj-cta { height: 24px; width: 90px; border-radius: 7px; background: var(--primary); }
.proj-rows { padding: 0 4px; display: flex; flex-direction: column; gap: 7px; }
.proj-line { height: 6px; border-radius: 4px; background: #f1f5f9; }
.proj-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-top: 10px; padding: 0 4px; }
.proj-mini { height: 28px; border-radius: 8px; background: #f8fafc; border: 1px solid #f1f5f9; }
.project-footer { border-top: 1px solid #f1f5f9; padding: 12px 14px; }
.project-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(12,31,74,0.6); }
.project-name { margin-top: 2px; font-size: 14px; font-weight: 600; color: var(--primary); }
.projects-cta { text-align: center; margin-top: 36px; }
/* ── BRANCHEN-BAR (Beispielwebseiten für verschiedene Branchen) ── */
.branchen-bar { max-width: 1280px; margin: clamp(48px,6vw,72px) auto 0; }
.branchen-bar-title {
text-align: center; font-size: clamp(17px,1.6vw,20px); font-weight: 700;
color: var(--primary); letter-spacing: -0.01em;
padding-bottom: 18px; border-bottom: 1px solid var(--border);
}
.branchen-bar-row { display: flex; align-items: center; padding-top: 24px; }
.branchen-item {
flex: 1; display: flex; align-items: center; justify-content: center; gap: 12px;
padding: 4px 8px;
}
.branchen-item + .branchen-item { border-left: 1px solid var(--border); }
.branchen-item svg { width: 26px; height: 26px; color: var(--primary); flex-shrink: 0; stroke-width: 1.6; }
.branchen-item span { font-size: clamp(14px,1.15vw,16px); font-weight: 600; color: var(--primary); white-space: nowrap; }
@media (max-width: 1080px) {
.branchen-bar-row { flex-wrap: wrap; row-gap: 22px; }
.branchen-item { flex: 0 0 33.33%; }
.branchen-item + .branchen-item { border-left: none; }
}
@media (max-width: 520px) {
.branchen-item { flex: 0 0 50%; gap: 9px; }
.branchen-item span { font-size: 14px; }
}
/* ── PRICING ── */
.pricing-section { background: var(--bg-5); padding: clamp(72px, 8.5vw, 120px) 24px; position: relative; }
.pricing-grid {
max-width: 1280px; margin: 48px auto 0;
display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.pricing-card {
background: #0B1220; border-radius: 20px;
border: 1px solid rgba(255,255,255,0.08);
padding: 28px; display: flex; flex-direction: column;
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .3s ease;
position: relative;
cursor: default;
}
.pricing-card:hover {
transform: translateY(-8px) scale(1.025);
box-shadow: 0 28px 56px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.14);
border-color: rgba(255,255,255,0.2);
z-index: 2;
}
.pricing-card.popular {
background: #0f1e3a; border-color: rgba(12,31,74,0.7);
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
transform: translateY(-4px) scale(1.01);
}
.pricing-card.popular:hover {
transform: translateY(-14px) scale(1.04);
box-shadow: 0 36px 72px rgba(0,0,0,0.45), 0 0 0 1px rgba(99,148,255,0.4);
border-color: rgba(99,148,255,0.55);
}
.popular-badge {
position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
background: var(--primary); color: white;
font-size: 11px; font-weight: 700; padding: 4px 14px; border-radius: 999px;
white-space: nowrap;
}
.plan-name { font-size: 20px; font-weight: 800; color: white; }
.plan-tagline { margin-top: 4px; font-size: 13px; color: rgba(255,255,255,0.45); }
.plan-price { margin-top: 20px; font-size: 32px; font-weight: 800; color: white; line-height: 1; }
.plan-features { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.plan-feature { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: rgba(255,255,255,0.8); }
.plan-feature svg { color: #D1E0F5; flex-shrink: 0; margin-top: 2px; }
.plan-divider { border: none; border-top: 1px solid rgba(255,255,255,0.08); margin: 16px 0; }
.plan-extras { display: flex; flex-direction: column; gap: 10px; }
.plan-extra { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: rgba(255,255,255,0.4); }
.plan-extra svg { color: rgba(255,255,255,0.22); flex-shrink: 0; margin-top: 2px; }
.plan-note {
margin-top: 20px; background: rgba(255,255,255,0.04);
border-radius: 12px; padding: 12px 16px;
font-size: 12px; line-height: 1.6; color: rgba(255,255,255,0.38);
}
.plan-btn {
margin-top: 20px; width: 100%;
background: white; color: #0B1220;
font-family: var(--font); font-size: 14px; font-weight: 600;
padding: 12px; border-radius: 12px; border: none; cursor: pointer;
transition: background .15s;
}
.plan-btn:hover { background: rgba(255,255,255,0.9); }
/* ── PRICING: coolere Animationen ── */
/* Gestaffeltes Einfliegen mit Blur-Clearing (per Keyframe, damit Hover schnell bleibt) */
@keyframes cardRise {
0% { opacity: 0; transform: translateY(52px) scale(0.9); filter: blur(7px); }
60% { opacity: 1; }
100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.pricing-card.reveal.in {
animation: cardRise .85s cubic-bezier(.22,1,.36,1) backwards;
}
.pricing-grid .pricing-card:nth-child(2).reveal.in { animation-delay: .12s; }
.pricing-grid .pricing-card:nth-child(3).reveal.in { animation-delay: .24s; }
/* Glanz-Sweep über die Karte beim Hover */
.pricing-card::after {
content: ''; position: absolute; inset: 0; border-radius: 20px;
background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,0.16) 50%, transparent 62%);
background-size: 230% 100%; background-position: 135% 0;
opacity: 0; pointer-events: none;
transition: opacity .3s ease;
}
.pricing-card.reveal.in:hover::after {
opacity: 1; background-position: -35% 0;
transition: background-position .9s cubic-bezier(.22,1,.36,1), opacity .25s ease;
}
/* Pulsierender Glow-Ring um die beliebteste Karte */
.pricing-card.popular::before {
content: ''; position: absolute; inset: -1px; border-radius: 21px;
pointer-events: none;
box-shadow: 0 0 34px rgba(99,148,255,0.3);
animation: haloPulse 3.6s ease-in-out infinite;
}
@keyframes haloPulse { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
/* Schimmerndes "Beliebteste Wahl"-Badge */
.popular-badge {
background: linear-gradient(100deg, var(--primary) 0%, #3a5da8 28%, #6394ff 45%, #3a5da8 62%, var(--primary) 100%);
background-size: 220% 100%;
box-shadow: 0 4px 16px rgba(12,31,74,0.45);
animation: badgeShimmer 3.2s linear infinite;
}
@keyframes badgeShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
/* Icons & Button: lebendiger beim Hover */
.plan-feature svg, .plan-extra svg { transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.pricing-card.reveal.in:hover .plan-feature svg { transform: scale(1.22) rotate(-4deg); }
.plan-btn { transition: background .15s, transform .2s ease, box-shadow .25s ease; }
.plan-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.28); }
.plan-btn:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
.pricing-card.reveal.in { animation: none; }
.pricing-card.popular::before, .popular-badge { animation: none; }
.pricing-card::after { display: none; }
}
.pricing-note { text-align: center; margin-top: 24px; font-size: 12px; color: var(--muted-fg); max-width: 1280px; margin-left: auto; margin-right: auto; }
.kalkulator-box {
max-width: 700px; margin: 32px auto 0;
background: var(--bg-3); border: 1px solid var(--border);
border-radius: 20px; padding: 36px 32px;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
text-align: center;
box-shadow: 0 4px 16px rgba(12,31,74,0.06);
}
.kalk-h { font-size: 19px; font-weight: 800; color: var(--primary); }
.kalk-p { margin-top: 6px; font-size: 14px; color: var(--muted); line-height: 1.6; max-width: 500px; }
.kalk-tags { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.kalk-tag {
background: white; border-radius: 999px;
padding: 6px 14px; font-size: 12px; font-weight: 500; color: var(--primary);
border: 1px solid var(--border);
}
/* ── FAQ (new 2-col layout) ── */
.faq-section { background: var(--bg-3); padding: clamp(72px, 8.5vw, 120px) 24px; }
.faq-2col {
max-width: 1100px; margin: 0 auto;
display: grid; grid-template-columns: 1fr 1.6fr;
gap: 80px; align-items: start;
}
@media (max-width: 860px) { .faq-2col { grid-template-columns: 1fr; gap: 40px; } }
.faq-left-title {
font-size: clamp(32px,4vw,52px); font-weight: 800;
line-height: 1.08; letter-spacing: -0.025em; color: var(--primary);
margin-bottom: 16px;
}
.faq-left-sub { font-size: 15px; color: var(--muted); line-height: 1.65; margin-bottom: 28px; }
.faq-card {
background: white; border: 1px solid var(--border);
border-radius: 18px; overflow: hidden;
box-shadow: 0 4px 24px rgba(12,31,74,0.07);
}
.faq-item2 { border-bottom: 1px solid var(--border); }
.faq-item2:last-child { border-bottom: none; }
.faq-trigger2 {
width: 100%; background: none; border: none; cursor: pointer;
font-family: var(--font); font-size: 14.5px; font-weight: 600; color: var(--primary);
display: flex; align-items: center; justify-content: space-between; gap: 20px;
padding: 20px 24px; text-align: left;
transition: background .15s;
}
.faq-trigger2:hover { background: rgba(12,31,74,0.025); }
.faq-chevron {
flex-shrink: 0; color: var(--muted-fg);
transition: transform .3s cubic-bezier(.25,.46,.45,.94);
}
.faq-item2.open2 .faq-chevron { transform: rotate(180deg); }
.faq-body2 {
font-size: 13.5px; line-height: 1.75; color: var(--muted);
max-height: 0; overflow: hidden;
transition: max-height .35s cubic-bezier(.25,.46,.45,.94), padding .3s;
padding: 0 24px;
}
.faq-item2.open2 .faq-body2 { max-height: 200px; padding-bottom: 20px; }
/* ── CONTACT ── */
.contact-section { background: white; padding: clamp(72px, 8.5vw, 120px) 24px; }
.contact-inner {
max-width: 1280px; margin: 0 auto;
background: var(--bg-3); border: 1px solid var(--border); border-radius: 24px; overflow: hidden;
display: grid; grid-template-columns: 1fr 1fr;
gap: 0; align-items: stretch;
}
.contact-inner > .reveal:first-child {
background: var(--bg-3); padding: 48px 40px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--border);
}
.contact-inner > .reveal:last-child {
background: white; padding: 48px 40px;
}
.contact-inner .section-eyebrow { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 1.2px; font-weight: 600; }
.contact-inner .section-h2 { color: var(--primary); margin-top: 12px; font-size: 28px; font-weight: 800; }
.contact-inner .section-body { color: var(--muted); margin-top: 16px; font-size: 15px; line-height: 1.6; }
.contact-info-list { margin-top: 40px; display: flex; flex-direction: column; gap: 28px; }
.contact-info-item { display: flex; align-items: flex-start; gap: 16px; }
.info-icon {
width: 40px; height: 40px; border-radius: 10px;
background: rgba(12,31,74,0.08); display: flex; align-items: center; justify-content: center;
flex-shrink: 0; color: var(--muted);
}
.info-label { font-size: 12px; color: var(--primary); font-weight: 600; margin-bottom: 4px; }
.info-val { font-size: 14px; font-weight: 500; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.copy-btn {
background: none; border: none; cursor: pointer;
color: var(--muted); padding: 4px 6px; border-radius: 4px;
transition: color .15s; display: flex; align-items: center;
}
.copy-btn:hover { color: var(--primary); }
.contact-form {
background: white; border: none; padding: 0;
box-shadow: none;
}
.form-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.form-group label { font-size: 14px; font-weight: 600; color: var(--primary); }
.form-group input,
.form-group textarea {
font-family: var(--font); font-size: 14px; color: var(--primary);
background: white; border: 1px solid var(--border);
border-radius: 8px; padding: 12px 14px; outline: none;
transition: border-color .15s, box-shadow .15s;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--muted); }
.form-group input:focus,
.form-group textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(12,31,74,0.08); }
.form-group textarea { resize: vertical; min-height: 120px; }
.form-submit {
width: 100%; background: var(--primary); color: white;
font-family: var(--font); font-size: 14px; font-weight: 700;
padding: 14px; border-radius: 8px; border: none; cursor: pointer;
transition: background .15s; margin-top: 8px;
}
.form-submit:hover { background: rgba(12,31,74,0.9); }
.form-note { text-align: center; font-size: 12px; color: var(--muted); margin-top: 12px; }
.contact-inner .btn-primary { display: none; }
/* ── FEATURES CAROUSEL ── */
.feat-carousel-wrapper {
position: relative; max-width: 1280px; margin: 32px auto 0; padding: 0 24px;
}
.feat-carousel-viewport { overflow: hidden; cursor: grab; user-select: none; }
.feat-carousel-viewport:active { cursor: grabbing; }
.feat-carousel-track {
display: flex; gap: 20px;
transition: transform .45s cubic-bezier(.25,.46,.45,.94);
will-change: transform;
}
.feat-carousel-slide {
flex: 0 0 calc(25% - 15px); min-width: 0;
display: flex;
}
@media (max-width: 1024px) { .feat-carousel-slide { flex: 0 0 calc(50% - 10px); } }
@media (max-width: 560px) { .feat-carousel-slide { flex: 0 0 calc(85%); } }
/* ── TIMELINE ── */
/* ── TIMELINE ── */
.timeline-section {
background: linear-gradient(180deg, #F3EBDC 0%, #F6EFE4 50%, #F4EDE1 100%);
padding: clamp(58px, 6.5vw, 92px) 24px clamp(64px, 7vw, 100px);
position: relative; overflow: hidden;
}
.timeline-section::before {
content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background:
radial-gradient(40% 46% at 90% 8%, rgba(201,154,61,0.05) 0%, rgba(201,154,61,0) 72%),
radial-gradient(38% 44% at 6% 96%, rgba(190,138,55,0.05) 0%, rgba(190,138,55,0) 72%);
}
.timeline-section > .container { position: relative; z-index: 1; }
.timeline-section .section-eyebrow { background: rgba(255,255,255,0.72); border-color: var(--border); color: var(--accent); }
.timeline-section .section-h2 { color: #061B3A; }
.timeline-section .section-body { color: #5B6A79; }
/* Roadmap: 5 Schritte in einer Reihe, dezente Verbindungslinie */
.process-flow {
position: relative; max-width: 1240px; margin: clamp(40px,4.2vw,62px) auto 0;
display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(14px, 1.5vw, 22px);
}
.process-flow::before, .process-flow::after {
content: ''; position: absolute; top: 28px; left: 10%; right: 10%; height: 2px; border-radius: 2px;
}
.process-flow::before { background: linear-gradient(90deg, rgba(12,31,74,0) 0%, rgba(12,31,74,0.13) 12%, rgba(12,31,74,0.13) 88%, rgba(12,31,74,0) 100%); z-index: 0; }
.process-flow::after { background: linear-gradient(90deg, var(--primary) 0%, #1E6DEB 100%); z-index: 1; transform-origin: left center; transform: scaleX(0); transition: transform 1.4s cubic-bezier(.4,0,.2,1); }
.timeline-section.animated .process-flow::after { transform: scaleX(1); }
.pstep {
position: relative; z-index: 2;
display: flex; flex-direction: column; align-items: center; text-align: center;
opacity: 0; transform: translateY(16px);
transition: opacity .55s ease, transform .55s ease;
}
.timeline-section.animated .pstep { opacity: 1; transform: translateY(0); }
.timeline-section.animated .pstep:nth-child(2) { transition-delay: .08s; }
.timeline-section.animated .pstep:nth-child(3) { transition-delay: .16s; }
.timeline-section.animated .pstep:nth-child(4) { transition-delay: .24s; }
.timeline-section.animated .pstep:nth-child(5) { transition-delay: .32s; }
.pstep-node {
width: 54px; height: 54px; border-radius: 50%; flex-shrink: 0;
background: var(--primary); color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 15px; font-weight: 800; letter-spacing: 0.01em;
box-shadow: 0 8px 20px -7px rgba(6,27,58,0.48), 0 0 0 7px #F0EBE2;
margin-bottom: 20px;
}
.pstep-card {
width: 100%; flex: 1 1 auto;
background: #fff; border: 1px solid rgba(12,31,74,0.07); border-radius: 16px;
padding: 24px 20px 22px;
box-shadow: 0 16px 38px -26px rgba(12,31,74,0.26), 0 1px 2px rgba(12,31,74,0.04);
display: flex; flex-direction: column; align-items: center;
}
.pstep-icon {
width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
background: var(--accent-sky); color: var(--accent);
display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.pstep-icon svg { width: 22px; height: 22px; }
.pstep-title { font-size: clamp(15px,1.15vw,16.5px); font-weight: 800; color: var(--primary); letter-spacing: -0.01em; line-height: 1.25; margin-bottom: 8px; }
.pstep-desc { font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.pstep-desc .timeline-highlight { font-weight: 700; color: var(--primary); }
@media (max-width: 1024px) {
.process-flow { grid-template-columns: repeat(2, 1fr); gap: 24px 20px; max-width: 660px; }
.process-flow::before, .process-flow::after { display: none; }
.pstep:last-child { grid-column: 1 / -1; }
.pstep:last-child .pstep-card { max-width: 420px; }
}
@media (max-width: 560px) {
.process-flow { grid-template-columns: 1fr; max-width: 420px; gap: 18px; }
.pstep:last-child { grid-column: auto; }
.pstep-node { width: 50px; height: 50px; margin-bottom: 16px; }
.pstep-card { padding: 20px 18px; }
}
/* ── DSGVO Checkbox ── */
display: flex; align-items: flex-start; gap: 10px;
margin-bottom: 16px; margin-top: 4px;
}
.dsgvo-row input[type="checkbox"] {
width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0;
accent-color: var(--primary); cursor: pointer;
}
.dsgvo-label {
font-size: 12px; color: var(--muted); line-height: 1.55;
}
.dsgvo-label a { color: var(--primary); text-decoration: underline; }
.dsgvo-error {
font-size: 11.5px; color: #dc2626; margin-top: -10px; margin-bottom: 12px;
display: none;
}
.dsgvo-error.visible { display: block; }
/* ── Features expand ── */
.features-extra {
max-height: 0; overflow: hidden;
transition: max-height .45s cubic-bezier(.4,0,.2,1), opacity .35s ease;
opacity: 0;
}
.features-extra.open { max-height: 600px; opacity: 1; }
.features-extra .features-grid { margin-top: 20px; }
.btn-mehr {
display: inline-flex; align-items: center; gap: 7px;
background: white; color: var(--primary);
border: 1.5px solid var(--border); border-radius: 12px;
padding: 11px 24px; font-family: var(--font); font-size: 14px; font-weight: 600;
cursor: pointer; margin-top: 32px;
box-shadow: 0 1px 4px rgba(12,31,74,0.06);
transition: background .15s, border-color .15s, box-shadow .15s;
}
.btn-mehr:hover { background: #f1f5f9; border-color: rgba(12,31,74,0.25); box-shadow: 0 2px 8px rgba(12,31,74,0.09); }
.btn-mehr svg { transition: transform .3s; }
.btn-mehr.open svg { transform: rotate(180deg); }
/* ── FOOTER ── */
footer { background: var(--primary); color: white; }
.footer-inner { max-width: 1280px; margin: 0 auto; padding: 56px 24px; }
.footer-grid {
display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px;
}
.footer-logo { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.footer-logo img { height: 38px; width: auto; object-fit: contain; }
/* -- THEME TOGGLE (Liquid-Glass-Schieberegler, 22.08.2026) --
Vanilla statt React, siehe react-stack/README.md fuer die Begruendung.
Umgebaut von einem Icon-Knopf (der nur per Crossfade zeigte, WAS als
naechstes passiert) zu einem echten Schieberegler: Track mit Sonne links,
Mond rechts, ein glaeserner Knopf sitzt sichtbar auf der aktiven Seite -
der Zustand ist damit ablesbar, ohne erst zu klicken.
'System' loeste sich im Code (siehe setThemeMode) schon vorher immer zu
Hell auf, war also nie ein dritter echter Zustand - deshalb ein Zweier-
Schieberegler, kein Dreier. */
.theme-toggle-liquid {
--ttl-track-w: 60px;
--ttl-track-h: 32px;
--ttl-thumb: 26px;
--ttl-inset: 3px;
position: relative;
isolation: isolate;
display: inline-flex;
align-items: center;
width: var(--ttl-track-w);
height: var(--ttl-track-h);
margin-top: 18px;
padding: 0;
border: 0;
border-radius: 999px;
background: rgba(255,255,255,0.10);
box-shadow: inset 0 1px 3px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.theme-toggle-liquid:focus-visible { outline: 2px solid rgba(255,255,255,.7); outline-offset: 3px; }
/* Sonne/Mond sitzen fest an den Enden der Bahn - sie tauschen nicht die
Seite, nur ihre Deckkraft wechselt, je nachdem welche Seite gerade aktiv ist. */
.theme-toggle-liquid__track {
position: relative;
z-index: 0;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 100%;
padding: 0 7px;
color: rgba(255,255,255,.85);
}
.theme-toggle-liquid__track svg {
width: 13px;
height: 13px;
transition: opacity .3s ease;
}
.theme-toggle-liquid__mark--sun { opacity: 1; }
.theme-toggle-liquid__mark--moon { opacity: .35; }
/* Der Knopf ist ein echtes Element, kein Pseudo-Element wie beim vorigen
Icon-Knopf - Bevel-Schatten und Verzerrung koennen dadurch direkt auf ihm
liegen, ohne ::before/::after fuers Gleiten zu brauchen. */
.theme-toggle-liquid__thumb {
position: absolute;
top: var(--ttl-inset);
left: var(--ttl-inset);
z-index: 1;
width: var(--ttl-thumb);
height: var(--ttl-thumb);
border-radius: 50%;
background: rgba(255,255,255,.18);
box-shadow:
inset 1.5px 1.5px 1px -1px rgba(255,255,255,.8),
inset -1.5px -1.5px 1px -1px rgba(255,255,255,.3),
inset 0 0 5px 2px rgba(255,255,255,.1),
0 2px 6px rgba(0,0,0,.35),
0 0 10px rgba(120,160,255,.18);
/* Nur Firefox loest die SVG-Filter-Referenz tatsaechlich auf (Stand 2026);
Chrome/Safari ignorieren "url(#dwc-liquid-glass)" in der Kette
stillschweigend und wenden nur blur()/saturate() an - kein Fehler, nur
ohne den Welligkeits-Effekt. In beiden Faellen bleibt ein sauberer
Frosted-Glass-Punkt. */
backdrop-filter: url("#dwc-liquid-glass") blur(5px) saturate(150%);
-webkit-backdrop-filter: blur(5px) saturate(150%);
transform: translateX(0);
transition: transform .35s cubic-bezier(.23,1,.32,1), filter .2s ease;
}
@media (hover: hover) and (pointer: fine) {
.theme-toggle-liquid:hover .theme-toggle-liquid__thumb { filter: brightness(1.12); }
}
@media (prefers-reduced-motion: reduce) {
.theme-toggle-liquid__thumb,
.theme-toggle-liquid__track svg { transition: none; }
}
.footer-col-title { font-size: 13px; font-weight: 700; color: white; margin-bottom: 16px; }
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a, .footer-links button {
font-size: 13.5px; color: rgba(209,224,245,0.65);
text-decoration: none; background: none; border: none; cursor: pointer;
font-family: var(--font); padding: 0; text-align: left;
transition: color .15s;
}
.footer-links a:hover, .footer-links button:hover { color: white; }
.footer-bottom {
border-top: 1px solid rgba(255,255,255,0.08);
margin-top: 48px; padding-top: 24px;
display: flex; align-items: center; justify-content: space-between;
font-size: 13px; color: rgba(209,224,245,0.55);
flex-wrap: wrap; gap: 8px;
}
/* Floating chat btn */
.dock-btn {
position: fixed; bottom: 24px; right: 24px; z-index: 100;
width: 54px; height: 54px; border-radius: 50%;
background: var(--primary); color: white; border: none; cursor: pointer;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 8px 24px rgba(12,31,74,0.3);
transition: transform .2s, box-shadow .2s, background .15s, opacity .25s ease, visibility .25s;
}
.dock-btn.is-hidden { opacity: 0; visibility: hidden; transform: translateY(14px); pointer-events: none; }
.dock-btn:hover { transform: scale(1.06); background: var(--primary-deep); box-shadow: 0 12px 32px rgba(12,31,74,0.4); }
/* ── iOS SPINNER OVERLAY ── */
.loading-overlay {
position: fixed; inset: 0; z-index: 9999;
background: rgba(255,255,255,0.88); backdrop-filter: blur(8px);
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 18px; opacity: 0; pointer-events: none;
transition: opacity .25s;
}
.loading-overlay.visible { opacity: 1; pointer-events: all; }
.spinner {
position: relative; display: inline-block;
width: 36px; height: 36px;
}
.spinner-blade {
position: absolute;
height: 20%; width: 8%;
background: var(--primary);
border-radius: 2px;
top: 37%; left: 44%;
animation: spinner-blade 1s linear infinite;
will-change: opacity;
}
.spinner-blade:nth-child(1) { transform: rotate(0deg) translateY(-130%); animation-delay: -1.667s; }
.spinner-blade:nth-child(2) { transform: rotate(30deg) translateY(-130%); animation-delay: -1.583s; }
.spinner-blade:nth-child(3) { transform: rotate(60deg) translateY(-130%); animation-delay: -1.5s; }
.spinner-blade:nth-child(4) { transform: rotate(90deg) translateY(-130%); animation-delay: -1.417s; }
.spinner-blade:nth-child(5) { transform: rotate(120deg) translateY(-130%); animation-delay: -1.333s; }
.spinner-blade:nth-child(6) { transform: rotate(150deg) translateY(-130%); animation-delay: -1.25s; }
.spinner-blade:nth-child(7) { transform: rotate(180deg) translateY(-130%); animation-delay: -1.167s; }
.spinner-blade:nth-child(8) { transform: rotate(210deg) translateY(-130%); animation-delay: -1.083s; }
.spinner-blade:nth-child(9) { transform: rotate(240deg) translateY(-130%); animation-delay: -1s; }
.spinner-blade:nth-child(10) { transform: rotate(270deg) translateY(-130%); animation-delay: -0.917s; }
.spinner-blade:nth-child(11) { transform: rotate(300deg) translateY(-130%); animation-delay: -0.833s; }
.spinner-blade:nth-child(12) { transform: rotate(330deg) translateY(-130%); animation-delay: -0.75s; }
@keyframes spinner-blade {
0% { opacity: 0.85; }
50% { opacity: 0.25; }
100% { opacity: 0.25; }
}
.loading-label { font-size: 14px; font-weight: 500; color: var(--primary); letter-spacing: 0.01em; }
/* Reveal animation */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }
/* Hover muss reveal.in überschreiben → höhere Spezifität nötig */
.pricing-card.reveal.in:hover {
transform: translateY(-8px) scale(1.025);
}
.pricing-card.popular.reveal.in {
transform: translateY(-4px) scale(1.01);
}
.pricing-card.popular.reveal.in:hover {
transform: translateY(-14px) scale(1.04);
}
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }
/* ── CONTACT MODAL ── */
.modal-overlay {
position: fixed; inset: 0; z-index: 9000;
background: rgba(12,31,74,0.45); backdrop-filter: blur(6px);
display: flex; align-items: center; justify-content: center;
padding: 20px;
opacity: 0; pointer-events: none;
transition: opacity .25s ease;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal-box {
background: white; border-radius: 24px;
width: 100%; max-width: 540px;
box-shadow: 0 32px 80px rgba(12,31,74,0.22);
overflow: hidden;
transform: translateY(20px) scale(0.97);
transition: transform .3s cubic-bezier(.22,1,.36,1), opacity .25s;
opacity: 0;
}
.modal-overlay.open .modal-box { transform: none; opacity: 1; }
.modal-head {
background: var(--primary); color: white;
padding: 28px 32px 24px;
display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}
.modal-head-title { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.modal-head-sub { font-size: 13px; color: rgba(255,255,255,0.6); margin-top: 4px; }
.modal-close {
background: rgba(255,255,255,0.12); border: none; color: white;
width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; transition: background .15s;
}
.modal-close:hover { background: rgba(255,255,255,0.22); }
.modal-body { padding: 28px 32px 32px; }
.modal-form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.modal-form-group label { font-size: 13px; font-weight: 600; color: var(--primary); }
.modal-form-group input,
.modal-form-group textarea {
font-family: var(--font); font-size: 14px; color: var(--primary);
background: var(--bg); border: 1px solid var(--border);
border-radius: 10px; padding: 11px 14px; outline: none;
transition: border-color .15s, box-shadow .15s;
}
.modal-form-group input:focus,
.modal-form-group textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(12,31,74,0.08); }
.modal-form-group textarea { resize: vertical; min-height: 100px; }
.modal-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal-dsgvo { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 18px; }
.modal-dsgvo input[type=checkbox] { margin-top: 2px; width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; accent-color: var(--primary); }
.modal-dsgvo label { font-size: 12px; color: var(--muted); line-height: 1.5; cursor: pointer; }
.modal-dsgvo a { color: var(--primary); font-weight: 600; }
.modal-submit {
width: 100%; background: var(--primary); color: white;
font-family: var(--font); font-size: 14px; font-weight: 700;
padding: 14px; border-radius: 10px; border: none; cursor: pointer;
transition: background .15s; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.modal-submit:hover { background: rgba(12,31,74,0.88); }
.modal-success { text-align: center; padding: 12px 0 4px; }
.modal-success-icon { font-size: 48px; margin-bottom: 12px; color: #16a34a; }
.modal-success h3 { font-size: 18px; font-weight: 800; color: var(--primary); }
.modal-success p { font-size: 14px; color: var(--muted); margin-top: 6px; line-height: 1.6; }
.modal-err { font-size: 12px; color: #dc2626; margin-top: 4px; display: none; }
.modal-err.show { display: block; }
@media (max-width: 480px) {
.modal-row { grid-template-columns: 1fr; }
.modal-head, .modal-body { padding-left: 20px; padding-right: 20px; }
}
/* ── NAV DROPDOWN ── */
.nav-dropdown-wrap { position: relative; display: inline-flex; }
.nav-dropdown-btn {
display: inline-flex; align-items: center; gap: 6px;
background: none; border: none; cursor: pointer;
font-family: var(--font); font-size: 16.5px; font-weight: 700;
color: #ffffff; padding: 10px 16px; border-radius: 999px;
white-space: nowrap;
text-shadow: 0 1px 4px rgba(0,0,0,0.35);
transition: background .15s, color .15s;
}
.nav-dropdown-btn:hover, .nav-dropdown-btn.open { background: rgba(255,255,255,0.12); }
header.scrolled .nav-dropdown-btn { color: #14233D; text-shadow: none; }
header.scrolled .nav-dropdown-btn:hover, header.scrolled .nav-dropdown-btn.open { background: rgba(20,35,61,0.07); color: var(--primary); }
/* Chevron: Glyph exakt in seiner 14px-Box zentriert, damit rotate() um die
echte Bildmitte dreht statt versetzt zu kreisen. Auf-Zustand kippt an Ort
und Stelle nach oben. 1:1 mit index.html / subpage-nav.css. */
.nav-dropdown-btn .chev {
width: 14px; height: 14px; font-size: 14px; line-height: 1;
display: inline-flex; align-items: center; justify-content: center;
transition: transform .28s cubic-bezier(0.23, 1, 0.32, 1);
}
.nav-dropdown-btn.open .chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
.nav-dropdown-btn .chev { transition: none; }
}
.nav-dropdown {
position: absolute; top: calc(100% + 8px); left: 50%;
transform: translateX(-50%) translateY(-6px);
width: 360px; background: white;
border: 1px solid var(--border); border-radius: 16px;
box-shadow: 0 12px 40px rgba(12,31,74,0.12);
padding: 8px; z-index: 500;
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.nav-dropdown.open {
opacity: 1; visibility: visible; pointer-events: all;
transform: translateX(-50%) translateY(0);
transition: opacity .2s ease, transform .2s ease, visibility 0s linear 0s;
}
.nav-dd-active-indicator { display:none; position:absolute; z-index:2; left:8px; top:0; width:2px; height:1px; border-radius:999px; background:#2472e8; box-shadow:0 1px 5px rgba(36,114,232,.24); opacity:0; pointer-events:none; transform:translate3d(0,0,0) scaleY(1); transform-origin:top; transition:transform .24s cubic-bezier(.23,1,.32,1),opacity .12s ease; will-change:transform; }
.nav-dropdown--indicator-visible .nav-dd-active-indicator { opacity:1; }
.nav-dd-item { position:relative; display:flex; align-items:flex-start; gap:12px; padding:12px 14px; border-radius:10px; text-decoration:none; transition:background-color .15s ease; }
.nav-dd-item:hover,.nav-dd-item:focus-visible { background:rgba(36,114,232,0.05); }
@media (prefers-reduced-motion: reduce) { .nav-dd-item { transition:none; } .nav-dd-active-indicator { transition:opacity .12s ease; } }
.nav-dd-icon { width: 36px; height: 36px; border-radius: 8px; background: rgba(12,31,74,0.06); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--primary); }
.nav-dd-title { font-size: 13.5px; font-weight: 700; color: var(--primary); margin-bottom: 3px; }
.nav-dd-desc { font-size: 12px; color: var(--muted); line-height: 1.45; }
/* Icon-Hover-Animationen fehlten hier komplett (gefunden 06.09.2026, Julian:
Redesign-Icon soll "genauso wie bei Website-Erstellung" animieren - dessen
eigene Animation lief auf dieser Seite bislang gar nicht, weil weder die
Keyframes noch die Regeln aus index.html/subpage-nav.css hier ankamen).
1:1 von dort uebernommen, plus die neuen Regeln fuer das Redesign-Icon. */
.nav-dd-item:hover .nav-dd-icon-lp__r1 { animation: nav-dd-lp-y .5s ease both; }
.nav-dd-item:hover .nav-dd-icon-lp__r2 { animation: nav-dd-lp-x-left .5s ease both; animation-delay: .3s; }
.nav-dd-item:hover .nav-dd-icon-lp__r3 { animation: nav-dd-lp-x-right .5s ease both; animation-delay: .4s; }
@keyframes nav-dd-lp-y { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes nav-dd-lp-x-left { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
@keyframes nav-dd-lp-x-right { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }
.nav-dd-item:hover .nav-dd-icon-pal__body { animation: nav-dd-lp-y .5s ease both; }
.nav-dd-item:hover .nav-dd-icon-pal__dot-left { animation: nav-dd-lp-x-left .5s ease both; animation-delay: .3s; }
.nav-dd-item:hover .nav-dd-icon-pal__dot-right { animation: nav-dd-lp-x-right .5s ease both; animation-delay: .4s; }
.nav-dd-item:hover .nav-dd-icon-pal__dot-top { animation: nav-dd-lp-y .5s ease both; animation-delay: .5s; }
@media (prefers-reduced-motion: reduce) {
.nav-dd-item:hover .nav-dd-icon-lp__r1,
.nav-dd-item:hover .nav-dd-icon-lp__r2,
.nav-dd-item:hover .nav-dd-icon-lp__r3,
.nav-dd-item:hover .nav-dd-icon-pal__body,
.nav-dd-item:hover .nav-dd-icon-pal__dot-left,
.nav-dd-item:hover .nav-dd-icon-pal__dot-right,
.nav-dd-item:hover .nav-dd-icon-pal__dot-top { animation: none; }
}
/* Icon "Hosting & Wartung" (06.09.2026, Julian: AnimateIcons ServerIcon,
animateicons.in/Avijit Dey, MIT). Vanilla-Nachbau wie beim Sprachen-Icon
oben: die drei Reihen zeichnen sich per stroke-dasharray/-dashoffset nach
(Vorlage: Framer-Motion pathLength [0,1], gestaffelt um 0.08s je Reihe),
die sechs Punkte fliegen danach ein - dafuer keine neuen Keyframes noetig,
das sind dieselben nav-dd-lp-x-left/-right von ganz oben (linke Spalte
von links, rechte Spalte von rechts), nur pro Reihe leicht versetzt statt
die Punkte der Vorlage einzeln neu zu bauen. */
.nav-dd-icon-srv__row1 { --len: 45; }
.nav-dd-icon-srv__row2 { --len: 45; }
.nav-dd-icon-srv__row3 { --len: 45; }
.nav-dd-icon-srv path { stroke-dasharray: var(--len); stroke-dashoffset: 0; opacity: 1; }
.nav-dd-item:hover .nav-dd-icon-srv__row1 { animation: nav-dd-srv-draw .5s cubic-bezier(.23,1,.32,1) 0s both; }
.nav-dd-item:hover .nav-dd-icon-srv__row2 { animation: nav-dd-srv-draw .5s cubic-bezier(.23,1,.32,1) .08s both; }
.nav-dd-item:hover .nav-dd-icon-srv__row3 { animation: nav-dd-srv-draw .5s cubic-bezier(.23,1,.32,1) .16s both; }
@keyframes nav-dd-srv-draw {
0% { opacity: 0; stroke-dashoffset: var(--len); }
2% { opacity: 1; }
100% { opacity: 1; stroke-dashoffset: 0; }
}
.nav-dd-item:hover .nav-dd-icon-srv__dot-1 { animation: nav-dd-lp-x-left .5s ease .3s both; }
.nav-dd-item:hover .nav-dd-icon-srv__dot-2 { animation: nav-dd-lp-x-right .5s ease .32s both; }
.nav-dd-item:hover .nav-dd-icon-srv__dot-3 { animation: nav-dd-lp-x-left .5s ease .38s both; }
.nav-dd-item:hover .nav-dd-icon-srv__dot-4 { animation: nav-dd-lp-x-right .5s ease .4s both; }
.nav-dd-item:hover .nav-dd-icon-srv__dot-5 { animation: nav-dd-lp-x-left .5s ease .46s both; }
.nav-dd-item:hover .nav-dd-icon-srv__dot-6 { animation: nav-dd-lp-x-right .5s ease .48s both; }
@media (prefers-reduced-motion: reduce) {
.nav-dd-item:hover .nav-dd-icon-srv__row1,
.nav-dd-item:hover .nav-dd-icon-srv__row2,
.nav-dd-item:hover .nav-dd-icon-srv__row3,
.nav-dd-item:hover .nav-dd-icon-srv__dot-1,
.nav-dd-item:hover .nav-dd-icon-srv__dot-2,
.nav-dd-item:hover .nav-dd-icon-srv__dot-3,
.nav-dd-item:hover .nav-dd-icon-srv__dot-4,
.nav-dd-item:hover .nav-dd-icon-srv__dot-5,
.nav-dd-item:hover .nav-dd-icon-srv__dot-6 { animation: none; }
}
/* Icon "Barrierefreiheit & Mehrsprachigkeit" (06.09.2026, Julian: Lucide-
Animated LanguagesIcon, lucide-animated.com), 1:1 aus index.html /
subpage-nav.css uebernommen (dieselbe stroke-dasharray/-dashoffset-
Draw-in-Technik wie dort, siehe Kommentar dort fuer die volle Begruendung). */
.nav-dd-icon-lang__p1 { --len: 8.5; }
.nav-dd-icon-lang__p2 { --len: 12.8; }
.nav-dd-icon-lang__p3 { --len: 12; }
.nav-dd-icon-lang__p4 { --len: 1; }
.nav-dd-icon-lang__p5 { --len: 22.4; }
.nav-dd-icon-lang__p6 { --len: 6; }
.nav-dd-icon-lang path { stroke-dasharray: var(--len); stroke-dashoffset: 0; opacity: 1; }
.nav-dd-item:hover .nav-dd-icon-lang__p1 { animation: nav-dd-lang-draw .5s cubic-bezier(.23,1,.32,1) .3s both; }
.nav-dd-item:hover .nav-dd-icon-lang__p2 { animation: nav-dd-lang-draw .5s cubic-bezier(.23,1,.32,1) .2s both; }
.nav-dd-item:hover .nav-dd-icon-lang__p3 { animation: nav-dd-lang-draw .5s cubic-bezier(.23,1,.32,1) .1s both; }
.nav-dd-item:hover .nav-dd-icon-lang__p4 { animation: nav-dd-lang-draw .5s cubic-bezier(.23,1,.32,1) 0s both; }
.nav-dd-item:hover .nav-dd-icon-lang__p5 { animation: nav-dd-lang-draw .5s cubic-bezier(.23,1,.32,1) .3s both; }
.nav-dd-item:hover .nav-dd-icon-lang__p6 { animation: nav-dd-lang-draw .5s cubic-bezier(.23,1,.32,1) .3s both; }
@keyframes nav-dd-lang-draw {
0% { opacity: 0; stroke-dashoffset: var(--len); }
2% { opacity: 1; }
100% { opacity: 1; stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
.nav-dd-item:hover .nav-dd-icon-lang__p1,
.nav-dd-item:hover .nav-dd-icon-lang__p2,
.nav-dd-item:hover .nav-dd-icon-lang__p3,
.nav-dd-item:hover .nav-dd-icon-lang__p4,
.nav-dd-item:hover .nav-dd-icon-lang__p5,
.nav-dd-item:hover .nav-dd-icon-lang__p6 { animation: none; }
}
/* Icon "SEO & Performance" (06.09.2026, Julian: Lucide-Animated
ChartLineIcon, lucide-animated.com), 1:1 aus index.html / subpage-nav.css
uebernommen - siehe Kommentar dort fuer die volle Begruendung. */
.nav-dd-icon-chart__line { --len: 17; stroke-dasharray: var(--len); stroke-dashoffset: 0; opacity: 1; }
.nav-dd-item:hover .nav-dd-icon-chart__line {
animation: nav-dd-chart-opacity .3s ease-in-out .1s both, nav-dd-chart-draw .3s ease-in-out .15s both;
}
@keyframes nav-dd-chart-opacity { from { opacity: 0; } to { opacity: 1; } }
@keyframes nav-dd-chart-draw { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
.nav-dd-item:hover .nav-dd-icon-chart__line { animation: none; }
}
/* Icon "KI und Automatisierung" (06.09.2026, Julian: eigene WorkflowCircle04-
Vorlage), 1:1 aus index.html / subpage-nav.css uebernommen - siehe
Kommentar dort fuer die volle Begruendung (dritte Korrektur: beide Aeste
der Verbindungslinie zeichnen sich jetzt GLEICHZEITIG von unten nach oben,
statt nacheinander - das nacheinander war der gemeldete Ruckler). */
.nav-dd-icon-workflow__bottom,
.nav-dd-icon-workflow__top-left,
.nav-dd-icon-workflow__top-right { opacity: 1; }
.nav-dd-icon-workflow__line-left { --len: 8; stroke-dasharray: var(--len); stroke-dashoffset: 0; }
.nav-dd-icon-workflow__line-right { --len: 18.3; stroke-dasharray: var(--len); stroke-dashoffset: 0; }
.nav-dd-item:hover .nav-dd-icon-workflow__bottom { animation: nav-dd-workflow-fade .15s ease both; }
.nav-dd-item:hover .nav-dd-icon-workflow__line-left,
.nav-dd-item:hover .nav-dd-icon-workflow__line-right { animation: nav-dd-workflow-connect .4s ease both; animation-delay: .1s; }
.nav-dd-item:hover .nav-dd-icon-workflow__top-left,
.nav-dd-item:hover .nav-dd-icon-workflow__top-right { animation: nav-dd-workflow-fade .3s ease-out both; animation-delay: .35s; }
@keyframes nav-dd-workflow-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes nav-dd-workflow-connect { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
.nav-dd-item:hover .nav-dd-icon-workflow__bottom,
.nav-dd-item:hover .nav-dd-icon-workflow__line-left,
.nav-dd-item:hover .nav-dd-icon-workflow__line-right,
.nav-dd-item:hover .nav-dd-icon-workflow__top-left,
.nav-dd-item:hover .nav-dd-icon-workflow__top-right { animation: none; }
}
/* Icon "Fotografie und Bildbearbeitung" (06.09.2026, Julian: AnimateIcons
CameraIcon, animateicons.in/Avijit Dey, MIT). Restlos ersetzt (vorher
Tabler-Font-Glyphe ti-camera) durch die gelieferte Kamera als Inline-SVG.
Gehaeuse bleibt ein normaler, unanimierter Pfad wie in der Vorlage (dort
ein einfaches ohne motion.path) - nur die Linse (Kreis) bekommt die
Vorlagen-Animation: scale [1, 0.45, 1.15, 1] bei times [0, .3, .65, 1],
0.8s, dieselbe Kurve wie die Vorlage (cubic-bezier(.34,1.4,.64,1)) statt
der Standardkurve der Seite - der kurze Uebersprung ist hier bewusst
staerker als sonst (Kamera "schnappt" zu, wie ein Verschluss). */
.nav-dd-icon-cam__lens { transform-box: fill-box; transform-origin: center; transition: transform .3s ease; }
.nav-dd-item:hover .nav-dd-icon-cam__lens { animation: nav-dd-cam-snap .8s cubic-bezier(.34,1.4,.64,1) both; }
@keyframes nav-dd-cam-snap {
0% { transform: scale(1); }
30% { transform: scale(.45); }
65% { transform: scale(1.15); }
100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.nav-dd-item:hover .nav-dd-icon-cam__lens { animation: none; }
}
/* ── MOBILE-MENÜ (Hamburger), 1:1 aus index.html übernommen (25.08.2026) ── */
.nav-burger {
display: none;
width: 44px; height: 44px; padding: 0; border: none; background: none;
cursor: pointer; flex-direction: column; align-items: center; justify-content: center;
gap: 5px; color: #111827; -webkit-tap-highlight-color: transparent; flex-shrink: 0;
}
/* Der Burger war auf dem Handy praktisch unsichtbar (30.08.2026).
Ursache: Diese Seite läuft im Light-Theme (data-theme="light"), hat aber
durchgehend einen schwarzen Grund (body: #050505). Die Grundregel darüber
setzt color:#111827 — fast schwarz auf schwarz, gemessener Kontrast 1.1:1.
Die Korrektur darüber greift nur bei data-theme="dark" und lief hier ins
Leere. Das Menü existierte also, war aber nicht zu sehen.
Deshalb hier an die Seite gebunden statt ans Theme. */
.nav-burger { color: #F4F7FB; }
.nav-burger__line {
width: 22px; height: 2px; border-radius: 2px; background: currentColor;
transition: transform .25s cubic-bezier(.23,1,.32,1), opacity .2s ease;
}
.nav-burger.active .nav-burger__line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.active .nav-burger__line:nth-child(2) { opacity: 0; }
.nav-burger.active .nav-burger__line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu-overlay {
position: fixed; top: var(--nav-height); left: 0; right: 0; bottom: 0; z-index: 8500;
background: rgba(6,10,18,.55); backdrop-filter: blur(4px);
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity .25s ease, visibility 0s linear .25s;
}
.mobile-menu-overlay.open {
opacity: 1; visibility: visible; pointer-events: all;
transition: opacity .25s ease, visibility 0s linear 0s;
}
.mobile-menu {
position: absolute; top: 0; right: 0; bottom: 0; width: min(360px, 86vw);
background: var(--bg); box-shadow: -18px 0 44px rgba(6,10,18,.28);
display: flex; flex-direction: column;
transform: translateX(100%); transition: transform .32s cubic-bezier(.23,1,.32,1);
overscroll-behavior: contain;
}
.mobile-menu-overlay.open .mobile-menu { transform: none; }
.mobile-menu__head {
display: flex; align-items: center; justify-content: space-between;
padding: 20px 20px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.mobile-menu__title { font-family: var(--font); font-weight: 800; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--primary); }
.mobile-menu__close {
width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer;
display: flex; align-items: center; justify-content: center;
background: rgba(6,27,58,.06); color: var(--primary); transition: background .15s; flex-shrink: 0;
}
.mobile-menu__close:hover { background: rgba(6,27,58,.12); }
.mobile-menu__body { flex: 1; overflow-y: auto; padding: 10px 12px 20px; display: flex; flex-direction: column; gap: 2px; }
.mobile-menu__link, .mobile-menu__group-btn {
display: flex; align-items: center; justify-content: space-between; width: 100%;
text-align: left; background: none; border: none; cursor: pointer;
font-family: var(--font); font-size: 16.5px; font-weight: 700; color: var(--primary);
padding: 14px 12px; border-radius: 10px;
}
.mobile-menu__link:hover, .mobile-menu__group-btn:hover { background: rgba(6,27,58,.05); }
.mobile-menu__group-btn .chev { font-size: 15px; transition: transform .2s ease; }
.mobile-menu__group-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.mobile-submenu { max-height: 0; overflow: hidden; transition: max-height .25s ease; display: flex; flex-direction: column; padding-left: 10px; }
.mobile-submenu.open { max-height: 220px; }
.mobile-submenu a {
display: block; padding: 11px 12px; border-radius: 8px; text-decoration: none;
font-family: var(--font); font-size: 15px; font-weight: 600; color: var(--muted);
}
.mobile-submenu a:hover { background: rgba(6,27,58,.05); color: var(--primary); }
.mobile-menu__foot { padding: 16px 20px 24px; border-top: 1px solid var(--border); flex-shrink: 0; }
.mobile-menu__foot .btn-primary { width: 100%; justify-content: center; }
@media (min-width: 900px) {
.mobile-menu-overlay, .nav-burger { display: none !important; }
}
/* Responsive */
@media (max-width: 980px) {
.hero-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.hero-mockup { display: none; }
.hero h1, .hero-sub { max-width: 620px; margin-left: auto; margin-right: auto; }
.hero-btns { justify-content: center; }
.hero-viewport::before { width: 100%; height: 62%; opacity: 0.6; background-size: 165% auto; background-position: 50% 100%; }
.hero { min-height: 0; padding-top: clamp(20px,6vw,40px); padding-bottom: 0; }
.about-inner { grid-template-columns: 1fr; align-items: start; }
.about-grid { height: auto; grid-template-rows: auto auto; }
.about-grid-img { height: auto; aspect-ratio: 3 / 2; }
.features-grid { grid-template-columns: repeat(2,1fr); }
.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) and (max-width: 1180px) {
.header-inner { gap: 16px; padding: 0 24px; height: 80px; }
.header-logo img { height: 56px; }
.header-nav { gap: 2px; }
.nav-btn, .nav-dropdown-btn { font-size: 14px; padding: 8px 11px; }
.header-cta .btn-primary { font-size: 14px; padding: 11px 18px; }
}
@media (max-width: 899px) {
.header-nav { display: none; }
.header-cta { display: none; }
.nav-burger { display: flex; }
.header-inner { display: flex; justify-content: space-between; }
.contact-inner { grid-template-columns: 1fr; }
.pricing-grid { grid-template-columns: 1fr; }
.kalkulator-box { flex-direction: column; }
.features-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
.header-inner {
grid-template-columns: minmax(0, 1fr) auto;
height: 72px;
gap: 8px;
padding: 0 12px;
}
.header-logo { min-width: 0; }
.header-logo img { height: 42px; max-width: 100%; }
.header-cta .btn-primary {
padding: 10px 12px;
font-size: 12px;
white-space: nowrap;
}
.features-grid { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; }
}
/* ── PRICING V2 (neues Layout) ── */
.pricing-card2 {
background: #0B1220;
border: 1px solid rgba(255,255,255,0.10);
border-radius: 16px; overflow: hidden;
display: flex; flex-direction: column;
transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .3s ease;
}
.pricing-card2.reveal.in:hover {
transform: translateY(-6px) scale(1.015);
box-shadow: 0 24px 50px rgba(0,0,0,0.38);
border-color: rgba(255,255,255,0.18);
}
.pricing-card2.popular2 {
border-color: rgba(99,148,255,0.4);
background: #0d1a35;
}
.pricing-card2.popular2.reveal.in:hover {
border-color: rgba(99,148,255,0.65);
box-shadow: 0 28px 60px rgba(0,0,0,0.42), 0 0 0 1px rgba(99,148,255,0.35);
}
.pc2-top {
padding: 22px 22px 18px;
border-bottom: 1px solid rgba(255,255,255,0.07);
}
.pc2-name-row {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 18px;
}
.pc2-name {
display: flex; align-items: center; gap: 8px;
font-size: 15px; font-weight: 600; color: white;
}
.pc2-name svg { color: rgba(255,255,255,0.50); flex-shrink:0; }
.pc2-popular-badge {
background: rgba(255,255,255,0.12); color: white;
border: 1px solid rgba(255,255,255,0.22);
font-size: 10.5px; font-weight: 700; letter-spacing:0.04em;
padding: 3px 10px; border-radius: 999px; white-space:nowrap;
}
.pc2-price-row {
display: flex; align-items: baseline; gap: 10px; margin-bottom: 18px;
}
.pc2-price {
font-size: 34px; font-weight: 800; color: white; letter-spacing: -0.025em; line-height: 1;
}
.pc2-old-price {
font-size: 15px; color: rgba(255,255,255,0.3); text-decoration: line-through;
}
.pc2-btn {
width: 100%; padding: 11px 16px; border-radius: 9px;
background: white; color: #0B1220;
font-family: var(--font); font-size: 14px; font-weight: 600;
border: none; cursor: pointer;
transition: background .15s, transform .18s, box-shadow .2s;
}
.pc2-btn:hover { background: rgba(255,255,255,0.88); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,0.28); }
.pc2-btn:active { transform: translateY(0); }
.pc2-bottom {
padding: 18px 22px 22px; flex: 1;
}
.pc2-tagline {
font-size: 12.5px; color: rgba(255,255,255,0.38); margin-bottom: 14px; line-height: 1.4;
}
.pc2-features {
display: flex; flex-direction: column; gap: 10px;
list-style: none; padding: 0; margin: 0;
}
.pc2-feature {
display: flex; align-items: flex-start; gap: 9px;
font-size: 13.5px; color: #D1E0F5; line-height: 1.45;
}
.pc2-feature svg { flex-shrink: 0; margin-top: 1px; color: rgba(100,160,240,0.9); }
/* stagger entrance */
.pricing-grid .pricing-card2:nth-child(2).reveal.in { animation-delay: .12s; }
.pricing-grid .pricing-card2:nth-child(3).reveal.in { animation-delay: .24s; }
.pricing-card2.reveal.in { animation: cardRise .85s cubic-bezier(.22,1,.36,1) backwards; }
@media (prefers-reduced-motion: reduce) { .pricing-card2.reveal.in { animation: none; } }
/* ── DWC PALETTE — GOLD & PREMIUM ACCENTS ── */
.trustbar-col:nth-child(3) .trustbar-icon { color: var(--gold) !important; opacity: 1 !important; }
.hero-badge { border-color: rgba(201,154,61,0.20) !important; background: rgba(255,255,255,0.94) !important; }
.ps-card.problem .ps-card-title { color: var(--muted); }
.ps-card.problem .ps-badge { background: #ECEDF1; color: var(--muted); }
.ps-card.problem .ps-list li { color: var(--muted); font-weight: 500; }
.ps-card.problem .ps-ico { background: #ECEDF1; color: var(--muted-fg); }
.faq-section { background: var(--bg-5); }
.faq-card { background: white; border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
box-shadow: 0 4px 18px rgba(6,27,58,0.06); }
.project-card { border-color: var(--border); }
.nav-dd-item:hover { background: rgba(36,114,232,0.05); }
/* ── FEATURE 238: BROWSER CARD STACK ── */
/* ── HERO EYEBROW ── */
.hero-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-size: 13.5px; font-weight: 600; color: var(--primary);
background: rgba(255,255,255,0.82); border: 1px solid var(--border);
border-radius: 999px; padding: 6px 14px 6px 10px;
margin-bottom: 8px; letter-spacing: 0.01em;
}
.hero-eyebrow-dot {
width: 9px; height: 9px; border-radius: 50%; background: var(--gold); flex-shrink: 0;
}
/* ── FEATURE 238 CTAs ── */
.feat238-ctas {
margin-top: 28px; display: flex; flex-direction: row;
align-items: center; justify-content: center; gap: 16px;
flex-wrap: wrap;
}
.feat238-btn-primary {
display: inline-flex; align-items: center; gap: 9px; justify-content: center;
background: var(--primary); color: white;
font-family: var(--font); font-size: 16px; font-weight: 600;
padding: 16px 32px; border-radius: 11px; border: none; cursor: pointer;
box-shadow: 0 6px 18px -4px rgba(6,27,58,0.30), 0 2px 6px rgba(6,27,58,0.16);
transition: background .18s, box-shadow .18s, transform .14s;
text-decoration: none; white-space: nowrap;
}
.feat238-btn-primary:hover {
background: var(--primary-deep);
box-shadow: 0 6px 20px rgba(6,27,58,0.30);
transform: translateY(-1px);
}
.feat238-btn-secondary {
display: inline-flex; align-items: center; gap: 9px; justify-content: center;
background: rgba(255,255,255,0.96); color: var(--primary);
font-family: var(--font); font-size: 16px; font-weight: 600;
padding: 16px 32px; border-radius: 11px;
border: 1.5px solid rgba(6,27,58,0.18); cursor: pointer;
box-shadow: 0 4px 14px -6px rgba(6,27,58,0.18);
transition: background .15s, border-color .15s, transform .14s;
text-decoration: none; white-space: nowrap;
}
.feat238-btn-secondary:hover {
background: rgba(6,27,58,0.04);
border-color: rgba(6,27,58,0.26);
transform: translateY(-1px);
}
.feat238-chev { flex-shrink: 0; }
/* ── CARD STACK ── */
/* ── CARD STACK — alle gleich groß, Hierarchie via Position + Z-Index + Schatten ── */
.showcase-stage {
width: clamp(580px, 68vw, 920px); max-width: 100%;
position: relative;
z-index: 2;
width: min(1540px, 96vw);
height: 500px;
margin: clamp(18px,2vh,32px) auto 0;
}
.feat238-cards {
position: absolute;
top: 0; left: 50%;
width: 1010px; height: 248px;
transform: translateX(-50%) scale(1.66);
transform-origin: top center;
}
.feat238-card {
position: absolute; min-width: 0;
width: 420px; height: 230px;
border-radius: 12px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform .55s cubic-bezier(.34,1.1,.64,1), box-shadow .5s cubic-bezier(.25,.46,.45,.94);
will-change: transform, box-shadow;
}
/* LEFT: leicht nach unten, schwacher Schatten */
.feat238-card--left {
left: 0; top: 18px; z-index: 1;
background: #fff;
border: 1px solid #DDE3EC;
box-shadow: 0 24px 54px -18px rgba(6,27,58,0.22), 0 5px 14px -4px rgba(6,27,58,0.05);
animation: f238fade .7s .22s cubic-bezier(.22,1,.36,1) both;
}
.feat238-card--left:hover { transform: translateY(-12px) scale(1.04); z-index: 6; box-shadow: 0 44px 88px -20px rgba(6,27,58,0.30), 0 12px 28px -6px rgba(6,27,58,0.10); }
/* CENTER: überlappt die linke deutlich, z-index 2 */
.feat238-card--center {
left: 295px; top: 8px; z-index: 2;
background: #0d1828;
border: 1px solid rgba(255,255,255,0.07);
box-shadow: 0 34px 76px -20px rgba(6,16,34,0.50), 0 12px 30px -10px rgba(0,0,0,0.22);
animation: f238fade .6s 0s cubic-bezier(.22,1,.36,1) both;
}
.feat238-card--center:hover { transform: translateY(-12px) scale(1.04); z-index: 6; box-shadow: 0 52px 100px -22px rgba(6,16,34,0.52), 0 18px 40px -10px rgba(0,0,0,0.26); }
/* RIGHT: überlappt die mittlere leicht, liegt vorne, z-index 3 */
.feat238-card--right {
left: 590px; right: auto; top: 0; z-index: 3;
background: #fff;
border: 1px solid #DDE3EC;
box-shadow: 0 28px 62px -18px rgba(6,27,58,0.24), 0 6px 16px -4px rgba(6,27,58,0.07);
animation: f238fade .7s .12s cubic-bezier(.22,1,.36,1) both;
}
.feat238-card--right:hover { transform: translateY(-12px) scale(1.04); z-index: 6; box-shadow: 0 48px 92px -22px rgba(6,27,58,0.32), 0 14px 32px -6px rgba(6,27,58,0.11); }
@keyframes f238fade {
from { opacity: 0; transform: translateY(36px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes f238center {
from { opacity: 0; transform: translateX(-50%) translateY(36px); }
to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.feat238-card--left, .feat238-card--center, .feat238-card--right { animation: none !important; opacity: 1 !important; }
}
/* Chrome bar */
.f238-chrome {
flex-shrink: 0;
padding: 9px 12px 8px;
display: flex; align-items: center; gap: 8px;
border-bottom: 1px solid rgba(0,0,0,0.07);
background: #F3F4F6;
}
.feat238-card--center .f238-chrome {
background: rgba(255,255,255,0.05);
border-bottom-color: rgba(255,255,255,0.07);
}
.f238-dots { display: flex; gap: 5px; align-items: center; flex-shrink: 0; }
.f238-dot { width: 10px; height: 10px; border-radius: 50%; }
.f238-dr { background: #FF5F57; }
.f238-dy { background: #FEBC2E; }
.f238-dg { background: #28C840; }
.f238-chrome-url {
flex: 1; height: 16px; background: rgba(0,0,0,0.07);
border-radius: 4px;
}
.feat238-card--center .f238-chrome-url { background: rgba(255,255,255,0.10); }
.f238-chrome-menu {
width: 16px; height: 16px; flex-shrink: 0; opacity: 0.35;
display: flex; flex-direction: column; justify-content: center; gap: 3px;
}
.f238-chrome-menu span {
display: block; height: 1.5px; background: #333; border-radius: 2px;
}
.feat238-card--center .f238-chrome-menu span { background: white; }
/* Placeholder card body */
.f238-body { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
/* Branchen-Strip unter den Karten (Hero) */
.hero-branchen {
width: min(1200px, 88vw); max-width: 1200px;
margin: clamp(30px,3.6vh,54px) auto 0;
padding: 0;
position: relative; z-index: 2;
}
.hero-branchen-label {
text-align: center;
font-size: clamp(11px, 0.95vw, 13px); font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--primary); opacity: 0.88;
text-shadow: 0 1px 2px rgba(255,255,255,0.92), 0 0 14px rgba(255,255,255,0.7);
margin-bottom: 12px;
}
.hero-branchen-row {
display: flex; align-items: center;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.22);
border-radius: 14px;
box-shadow: none;
backdrop-filter: blur(6px);
min-height: 60px;
padding: 0 clamp(6px, 1.1vw, 18px);
}
.hero-branchen-item { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 3px clamp(6px, 1vw, 17px); }
.hero-branchen-item + .hero-branchen-item { border-left: 1px solid rgba(255,255,255,0.22); }
.hero-branchen-item svg { width: 20px; height: 20px; color: rgba(255,255,255,0.9); flex-shrink: 0; stroke-width: 1.7; filter: drop-shadow(0 0 1.5px rgba(0,0,0,0.85)) drop-shadow(0 1px 4px rgba(0,0,0,0.45)); }
.hero-branchen-item span { font-size: clamp(11.5px, 0.87vw, 13.5px); font-weight: 650; color: rgba(255,255,255,0.95); white-space: nowrap; letter-spacing: -0.005em; text-shadow: 0 0 1px rgba(0,0,0,0.8), 0 1px 3px rgba(0,0,0,0.7), 0 1px 8px rgba(0,0,0,0.4); }
/* ── PARTNERZEILE (dezent, unter der Branchenleiste) ── */
.hero-partners {
width: min(1200px, 88vw);
margin: clamp(18px, 2vh, 24px) auto clamp(24px, 2.8vh, 32px);
display: flex; flex-direction: row; align-items: baseline; justify-content: center;
flex-wrap: wrap; gap: clamp(20px, 2.8vw, 44px);
position: relative; z-index: 2;
}
.hero-partners-label {
font-family: var(--font);
font-size: clamp(10px, 0.78vw, 11.5px); font-weight: 750; letter-spacing: 0.13em; text-transform: uppercase;
color: rgba(255,255,255,0.92); white-space: nowrap; opacity: 1;
text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
.hero-partners-row {
display: flex; align-items: baseline; justify-content: center;
gap: clamp(1rem, 3vw, 2.5rem); flex-wrap: wrap;
}
.hero-partner {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font);
font-size: clamp(14px, 1.05vw, 16.5px); font-weight: 700; letter-spacing: -0.01em; text-transform: none;
color: rgba(255,255,255,0.92); opacity: 1;
text-shadow: 0 1px 6px rgba(0,0,0,0.5);
white-space: nowrap; transition: opacity .2s ease, transform .2s ease;
}
.hero-partner svg { flex-shrink: 0; display: block; transform: scale(0.82); filter: drop-shadow(0 1px 6px rgba(0,0,0,0.35)); }
.hero-partner:hover { opacity: 0.78; transform: translateY(-1px); }
@media (max-width: 520px) {
.hero-partners-row { gap: 22px 30px; }
}
@media (max-width: 767px) {
/* Mobile: einzeilig, horizontal scrollbar statt Umbruch — kein Abschneiden von Inhalten */
.hero-branchen-row { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; justify-content: flex-start; scrollbar-width: none; }
.hero-branchen-row::-webkit-scrollbar { display: none; }
.hero-branchen-item { flex: 0 0 auto; }
}
@media (min-width: 768px) and (max-width: 980px) {
.hero-branchen-row { flex-wrap: wrap; row-gap: 16px; justify-content: center; }
.hero-branchen-item { flex: 0 0 33.33%; }
.hero-branchen-item + .hero-branchen-item { border-left: none; }
}
@media (max-width: 520px) {
.hero-branchen-item { flex: 0 0 50%; gap: 8px; }
}
/* Logobar unter Karten */
.hero-logobar {
text-align: center;
padding: 38px 24px 0;
position: relative; z-index: 2;
}
.hero-logobar-label {
font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--muted-fg); margin-bottom: 20px;
}
.hero-logobar-logos {
display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
gap: 0; max-width: min(1100px, 95vw); margin: 0 auto;
}
.hero-logobar-logo {
display: flex; flex-direction: column; align-items: center; gap: 4px;
padding: 10px 20px; opacity: 0.38; transition: opacity .2s; cursor: default;
border-right: 1px solid var(--border);
}
.hero-logobar-logo:last-child { border-right: none; }
.hero-logobar-logo:hover { opacity: 0.70; }
.hero-logobar-logo-icon { color: var(--primary); }
.hero-logobar-logo-name {
font-size: 9px; font-weight: 700; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--primary); white-space: nowrap;
}
.hero-logobar-logo-sub {
font-size: 7.5px; font-weight: 500; letter-spacing: 0.04em;
text-transform: uppercase; color: var(--muted-fg); white-space: nowrap;
}
/* Showcase-Gruppe — drastisch vergrößert, Inhalte skalieren proportional mit. Kleinere Screens: Scale runter */
/* 16:9-Desktop: Karten kompakter + Cluster etwas straffer — Hero füllt weiterhin (Partnerzeile sitzt über dem weißen Fade wie in der Vorlage) */
@media (min-width: 1701px) {
.showcase-stage { margin-top: clamp(8px, 1.2vh, 20px); }
.hero-branchen { margin-top: clamp(30px, 3.4vh, 52px); }
}
@media (max-width: 1700px) {
.showcase-stage { height: 250px; }
.feat238-cards { transform: translateX(-50%) scale(0.93); }
}
@media (max-width: 1200px) {
.showcase-stage { width: 96vw; height: 300px; }
.feat238-cards { transform: translateX(-50%) scale(1.0); }
}
@media (max-width: 980px) {
.showcase-stage { height: 270px; }
.feat238-cards { transform: translateX(-50%) scale(0.78); }
}
@media (max-width: 780px) {
.showcase-stage { height: 215px; }
.feat238-cards { transform: translateX(-50%) scale(0.6); }
}
@media (max-width: 620px) {
.showcase-stage { height: 320px; }
.feat238-cards { width: min(360px, 86vw); height: 300px; transform: translateX(-50%) scale(1); }
.feat238-card { width: min(360px, 86vw); height: 300px; }
.feat238-card--left, .feat238-card--right { display: none; }
.feat238-card--center { left: 0; top: 0; transform: none; }
}
@media (max-width: 480px) {
.feat238-ctas { flex-direction: column; align-items: center; }
.feat238-btn-primary, .feat238-btn-secondary { width: 100%; max-width: 300px; justify-content: center; }
}
/* ── MACBOOK / 16:10 ONLY: Trustbar & Partnerzeile etwas kompakter (Karten-Geometrie & Übergang sind jetzt vereinheitlicht, siehe Basis-Regeln) ── */
/* Greift nur bei 16:10-artigen Seitenverhältnissen (MacBook-Fenster) — Desktop/16:9 bleibt komplett unberührt */
@media (min-width: 1280px) and (max-width: 1800px) and (max-aspect-ratio: 5/3) {
.showcase-stage { height: 250px; margin-top: clamp(10px, 1.4vh, 22px); }
.feat238-cards { transform: translateX(-50%) scale(1.03); }
.hero-branchen { width: min(1050px, 86vw); max-width: 1050px; margin: clamp(14px, 1.8vh, 24px) auto 0; }
.hero-branchen-label { margin-bottom: 10px; font-size: clamp(10px, 0.85vw, 11.5px); }
.hero-branchen-row { min-height: 52px; padding: 0 clamp(4px, 0.9vw, 13px); }
.hero-branchen-item { gap: 7px; padding: 3px clamp(4px, 0.8vw, 12px); }
.hero-branchen-item svg { width: 16px; height: 16px; }
.hero-branchen-item span { font-size: clamp(9.5px, 0.72vw, 11px); }
.hero h1 { font-size: clamp(58px, 5.4vw, 76px); max-width: 820px; }
.hero-sub { max-width: 820px; }
.hero-partners { margin: clamp(14px, 1.6vh, 18px) auto clamp(14px, 1.8vh, 20px); gap: clamp(14px, 2vw, 26px); }
.hero-partners-label { font-size: clamp(9px, 0.7vw, 10px); }
.hero-partner { font-size: clamp(12px, 0.9vw, 13.5px); gap: 6px; }
.hero-partner svg { transform: scale(0.7); }
}
/* ── HERO HÖHEN-ANPASSUNG: kurze Bildschirme ── */
@media (min-width: 981px) and (max-height: 860px) {
.feat238-ctas { margin-top: 20px; }
.showcase-stage { margin-top: 28px; }
.hero-branchen { margin-top: clamp(40px, 4vw, 64px); }
}
@media (min-width: 981px) and (max-height: 760px) {
.hero { padding-top: 4px; padding-bottom: 0; }
.hero h1 { font-size: clamp(32px, 3.2vw, 50px); margin-top: 6px; }
.hero-sub { margin-top: 10px; font-size: 16px; }
.feat238-ctas { margin-top: 18px; }
.showcase-stage { margin-top: 18px; }
}
/* ═══════════ DWC REDESIGN 2026 · Sektionen 2–9 · rev2 ═══════════ */
:root{ --rd-primary:#0F1B2D; --rd-blue:#2563EB; --rd-muted:#5F5E5A; --rd-border:#E5E7EB; --rd-gold:#CA8A04; }
.ti{ font-size:20px; line-height:1; display:inline-flex; }
/* Eyebrow badges (unified) */
.rd-eyebrow{ display:inline-flex; align-items:center; gap:7px; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; padding:5px 14px; border-radius:20px; font-weight:500; white-space:nowrap; }
.rd-eyebrow.blue{ background:#EFF6FF; color:#2563EB; }
.rd-eyebrow.red { background:#FFE4E6; color:#DC2626; }
.rd-eyebrow .ti{ font-size:13px; }
/* harmonise legacy eyebrow in kept sections (Preise / Kontakt) */
.pricing-section .section-eyebrow{ background:#EFF6FF; border-color:transparent; color:#2563EB; }
/* Two-line section sub (S4 + S5) */
.rd-sub2{ margin:14px auto 0; text-align:center; max-width:680px; font-size:16px; line-height:1.6; color:var(--rd-muted); }
.rd-sub2 b{ display:block; color:var(--rd-primary); font-weight:600; margin-bottom:4px; }
/* ── BEFORE/AFTER COMPARISON SLIDER ── */
.ba-slider-wrap {
position: relative; width: 100%; aspect-ratio: 1672 / 941;
overflow: hidden; border-radius: 12px;
cursor: ew-resize; user-select: none; -webkit-user-select: none;
border: 1px solid var(--rd-border);
box-shadow: 0 18px 50px -18px rgba(15,27,45,0.28), 0 4px 14px rgba(15,27,45,0.08);
}
.ba-layer {
position: absolute; inset: 0;
background-repeat: no-repeat; background-attachment: scroll;
}
.ba-before-layer {
background-image: url("../images/before-after-laptop.webp");
background-size: 200% 100%; background-position: 0% center;
z-index: 1;
}
.ba-after-layer {
background-image: url("../images/before-after-laptop.webp");
background-size: 200% 100%; background-position: 100% center;
z-index: 2;
clip-path: inset(0 0 0 50%);
}
.ba-label {
position: absolute; top: 14px; z-index: 10;
padding: 4px 13px; border-radius: 20px;
font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
pointer-events: none;
}
.ba-label-before {
left: 14px; background: rgba(255,255,255,0.92); color: #0F1B2D;
border: 1px solid rgba(0,0,0,0.10);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.ba-label-after {
right: 14px; background: rgba(15,27,45,0.85); color: #fff;
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.ba-handle {
position: absolute; top: 0; bottom: 0; width: 2px;
background: rgba(255,255,255,0.88);
z-index: 20; display: flex; align-items: center; justify-content: center;
transform: translateX(-50%); touch-action: none;
left: 50%;
}
.ba-handle::before, .ba-handle::after {
content: ''; position: absolute; left: 50%;
transform: translateX(-50%);
width: 1px; background: rgba(255,255,255,0.4);
}
.ba-handle-circle {
width: 48px; height: 48px; border-radius: 50%; background: var(--rd-blue);
display: flex; align-items: center; justify-content: center; gap: 2px;
box-shadow: 0 4px 18px rgba(37,99,235,0.35), 0 1px 4px rgba(0,0,0,0.10);
transition: transform .2s cubic-bezier(.34,1.1,.64,1), box-shadow .2s ease;
flex-shrink: 0; cursor: ew-resize;
}
.ba-handle-circle.is-dragging {
transform: scale(1.12);
box-shadow: 0 8px 28px rgba(0,0,0,0.30);
}
/* Neutralise legacy decorations on kept sections */
.ps-section::before, .ps-section::after, .about-section::before{ display:none !important; }
.ps-section, .about-section{ overflow:visible; }
/* ─── S2 · PAIN POINTS ─── */
.rd-s2{ max-width:1220px; margin:0 auto; display:grid; grid-template-columns:55% 45%; gap:clamp(32px,4vw,60px); align-items:center; }
.section-2-header {
position: relative;
z-index: 10;
margin-top: 26px;
margin-bottom: 0;
text-align: center;
padding: 0 clamp(1rem, 12vw, 20%) 28px;
background: transparent;
}
#website-check { padding-top: 24px; }
.section-2-header h2 { font-family:var(--font-serif); font-weight:700; font-size:clamp(22px, 2.6vw, 34px); line-height:1.08; letter-spacing:-0.015em; color:#0f1f3d; text-wrap:balance;
text-shadow: none;
position: relative;
z-index: 1;
}
@media (max-width: 767px) {
.section-2-header { margin-top: 20px; padding: 0 1rem; }
}
.rd-s2 .rd-eyebrow{ margin-bottom:18px; }
.rd-s2 h2{ font-family:var(--font-serif); font-weight:700; font-size:clamp(30px,3.6vw,46px); line-height:1.08; letter-spacing:-0.015em; color:var(--rd-primary); text-wrap:balance; }
.rd-s2-sub{ margin-top:16px; font-size:16px; line-height:1.7; color:var(--rd-muted); max-width:520px; }
.rd-pain-cards{ margin-top:28px; display:flex; flex-direction:column; gap:22px; }
.rd-pain-card{ background:#fff; border:1px solid var(--rd-border); border-radius:10px; padding:24px 26px; transition:border-color .15s ease, transform .15s ease; }
.rd-pain-card:hover{ transform:translateY(-2px); border-color:rgba(37,99,235,0.35); }
.rd-pain-head{ display:flex; align-items:center; gap:14px; }
.rd-pain-head .ti{ font-size:19px; color:var(--rd-blue); flex-shrink:0; width:40px; height:40px; border-radius:50%; background:rgba(37,99,235,0.12); display:flex; align-items:center; justify-content:center; }
.rd-pain-title{ font-size:17px; font-weight:700; color:var(--rd-primary); letter-spacing:-0.01em; }
.rd-pain-body{ margin-top:12px; font-size:14.5px; line-height:1.6; color:var(--rd-muted); }
.rd-pain-sol{ margin-top:12px; font-size:12.5px; line-height:1.5; color:var(--rd-blue); font-weight:700; text-transform:uppercase; letter-spacing:0.03em; }
.rd-s2-cta{ margin-top:26px; }
.rd-s2-img{ border-radius:12px; overflow:hidden; border:1px solid var(--rd-border); box-shadow:0 18px 50px -18px rgba(15,27,45,0.28), 0 4px 14px rgba(15,27,45,0.08); }
.rd-s2-img img{ width:100%; height:auto; display:block; }
@media(max-width:860px){ .rd-s2{ grid-template-columns:1fr; } }
/* ─── S3 · ÜBER DWC (recolor) ─── */
.about-section .section-h2{ color:var(--rd-primary); font-weight:500; font-size:clamp(34px,3.8vw,48px); letter-spacing:-0.02em; }
.about-section .section-body{ color:#3D3C38; font-size:16px; line-height:1.75; max-width:520px; margin-top:20px; }
.about-section .about-value{ background:#fff; border:1px solid var(--rd-border); box-shadow:0 1px 2px rgba(15,27,45,0.03); border-radius:10px; }
.about-section .about-value:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.07); border-color:var(--rd-border); }
.about-section .av-title{ color:var(--rd-primary); font-weight:700; }
.about-section .av-desc{ color:var(--rd-muted); }
/* ─── MINI-CTA BANNER ─── */
.rd-banner{ background:#0F1B2D; padding:40px clamp(24px,5vw,80px); }
.rd-banner-inner{ max-width:1220px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.rd-banner-h{ font-family:var(--font-serif); color:#fff; font-size:clamp(20px,2.2vw,24px); font-weight:600; line-height:1.28; max-width:640px; }
.rd-banner-sub{ margin-top:9px; color:#94A3B8; font-size:14px; line-height:1.5; }
.rd-banner-btn{ flex-shrink:0; background:#fff; color:#0F1B2D; border-radius:8px; padding:13px 26px; font-weight:600; font-size:15px; text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition:transform .12s ease, box-shadow .15s ease; white-space:nowrap; }
.rd-banner-btn:hover{ transform:translateY(-1px); box-shadow:0 8px 22px rgba(0,0,0,0.28); }
@media(max-width:760px){ .rd-banner-inner{ flex-direction:column; text-align:center; } .rd-banner-h,.rd-banner-sub{ max-width:none; } }
/* ─── S4 · PROZESS (stacked steps) ─── */
.rd-process-section{ background:var(--bg-3); padding:clamp(56px,7vw,80px) 24px; }
.rd-proc{ max-width:860px; margin:clamp(34px,4vw,52px) auto 0; }
.rd-step{ position:relative; padding:40px 0; border-bottom:1px solid var(--rd-border); overflow:visible; }
.rd-step:last-child{ border-bottom:none; }
.rd-step-num{ position:absolute; top:50%; left:-20px; right:auto; transform:translateY(-50%); font-size:clamp(96px,11vw,120px); font-weight:800; color:rgba(202,138,4,0.13); line-height:1; user-select:none; pointer-events:none; z-index:0; }
.rd-step.num-right .rd-step-num{ left:-20px; right:auto; }
.rd-step.num-left .rd-step-num{ left:-20px; }
.rd-step-content{ position:relative; z-index:1; }
.rd-step-head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.rd-step-head .ti{ font-size:24px; color:var(--rd-blue); flex-shrink:0; }
.rd-step-title{ font-size:18px; font-weight:600; color:var(--rd-primary); }
.rd-step-badge{ display:inline-flex; align-items:center; background:#EFF6FF; color:#2563EB; font-size:11px; font-weight:500; padding:2px 8px; border-radius:10px; }
.rd-step-body{ margin-top:11px; font-size:15px; line-height:1.75; color:var(--rd-muted); max-width:580px; }
.rd-step-body b{ color:var(--rd-primary); font-weight:600; }
@media(max-width:560px){ .rd-step-num{ font-size:72px; left:-8px; } }
/* ─── S5 · WAS SIE ERWARTET (2×2 grid) ─── */
.rd-expect-section{ background:var(--bg); padding:clamp(56px,7vw,80px) 24px; }
.rd-expect-inner{ max-width:1220px; margin:clamp(34px,4vw,52px) auto 0; display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(24px,4vw,56px); align-items:center; }
.rd-lanyard-wrap{ width:100%; height:640px; overflow:hidden; }
.rd-lanyard-iframe{ width:100%; height:100%; border:none; background:transparent; display:block; }
.rd-exp{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:860px){ .rd-expect-inner{ grid-template-columns:1fr; } .rd-lanyard-wrap{ height:460px; order:-1; } }
.rd-exp-card{ background:#fff; border:1px solid var(--rd-border); border-radius:10px; padding:28px 26px; transition:all .15s ease; }
.rd-exp-card:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.07); }
.rd-exp-ico{ width:44px; height:44px; border-radius:11px; background:#EFF6FF; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.rd-exp-ico .ti{ font-size:22px; color:var(--rd-blue); }
.rd-exp-title{ font-size:17px; font-weight:700; color:var(--rd-primary); letter-spacing:-0.01em; }
.rd-exp-body{ margin-top:9px; font-size:14px; line-height:1.6; color:var(--rd-muted); }
@media(max-width:680px){ .rd-exp{ grid-template-columns:1fr; } }
/* ─── S6 · REFERENZEN (badges + 5th card) ─── */
.projects-section .projects-grid{ max-width:1120px; }
@media(min-width:769px){ .projects-section .projects-grid{ grid-template-columns:repeat(auto-fit,minmax(300px,356px)); justify-content:center; } }
.project-card{ position:relative; }
/* Dezenter Hover-Hinweis auf der Galerie: Pfeil erscheint im Footer */
.project-footer{ position:relative; }
.proj-peek{ position:absolute; right:14px; top:50%; transform:translateY(-50%) translateX(6px); opacity:0; transition:opacity .2s ease, transform .2s ease; color:var(--rd-blue); font-size:15px; }
.project-card:hover .proj-peek{ opacity:1; transform:translateY(-50%) translateX(0); }
.rd-proj-badge{ position:absolute; top:12px; left:12px; z-index:4; font-size:10px; font-weight:500; padding:2px 8px; border-radius:10px; letter-spacing:0.03em; }
.rd-proj-badge.konzept{ background:#E5E7EB; color:#6B7280; }
.rd-proj-badge.referenz{ background:#FEF9C3; color:#854D0E; }
.rd-proj-soon{ pointer-events:none; opacity:0.75; }
.rd-proj-ph{ background:#E5E7EB; border-radius:8px; min-height:172px; display:flex; align-items:center; justify-content:center; color:#9CA3AF; font-size:14px; }
.rd-proj-cat{ font-size:10px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:#9CA3AF; }
/* ─── S7 · BEWERTUNGEN (single Google card) ─── */
.rd-review-wrap{ display:flex; justify-content:center; margin-top:44px; }
.rd-review-card{ max-width:480px; width:100%; background:#fff; border-radius:12px; padding:32px 40px; box-shadow:0 4px 16px rgba(0,0,0,0.08); text-align:center; }
.rd-review-top{ display:flex; align-items:center; justify-content:center; gap:10px; }
.rd-review-label{ font-size:13px; color:#5F5E5A; }
.rd-review-stars{ margin-top:14px; display:flex; justify-content:center; gap:3px; color:#FBBF24; }
.rd-review-stars .ti{ font-size:18px; }
.rd-review-rating{ margin-top:12px; font-size:14px; color:#0F1B2D; font-weight:500; }
.rd-review-link{ margin-top:16px; display:inline-block; color:#2563EB; font-size:14px; font-weight:500; text-decoration:none; }
.rd-review-link:hover{ text-decoration:underline; }
/* ─── S8 · PREISE (note + Hosting teaser) ─── */
.rd-price-note{ font-size:12px; color:#9CA3AF; text-align:center; margin-top:16px; }
.rd-hosting{ max-width:700px; margin:32px auto 0; background:#F0F4FF; border:1px solid #DBEAFE; border-radius:10px; padding:24px 32px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.rd-hosting-eyebrow{ font-size:11px; color:#2563EB; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; }
.rd-hosting-h{ margin-top:7px; font-size:18px; color:#0F1B2D; font-weight:700; }
.rd-hosting-sub{ margin-top:7px; font-size:13px; color:#5F5E5A; line-height:1.5; }
.rd-hosting-right{ text-align:right; flex-shrink:0; }
.rd-hosting-price{ font-size:14px; color:#0F1B2D; font-weight:600; }
.rd-hosting-link{ margin-top:7px; display:inline-block; color:#2563EB; font-size:14px; font-weight:500; text-decoration:none; }
.rd-hosting-link:hover{ text-decoration:underline; }
@media(max-width:640px){ .rd-hosting{ flex-direction:column; text-align:center; } .rd-hosting-right{ text-align:center; } }
/* ─── S9 · KONTAKT (recolor card + WhatsApp) ─── */
.contact-inner{ background:#fff; border-color:var(--rd-border); }
.contact-inner > .reveal:first-child{ background:#F5F7FA; border-right-color:var(--rd-border); }
.btn-whatsapp{ background:#25D366; color:#fff; border-radius:8px; padding:12px 24px; font-weight:500; display:flex; align-items:center; gap:8px; text-decoration:none; width:fit-content; }
.btn-whatsapp:hover{ filter:brightness(0.96); }
/* ─── S3 · FOTO-PLATZHALTER (grau, beschriftet — später durch echtes Foto ersetzen) ─── */
.rd-photo-ph{ position:absolute; inset:0; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; background:repeating-linear-gradient(135deg,#ECEDF0 0 13px,#E4E6EA 13px 26px); color:#9CA3AF; }
.rd-photo-ph span{ font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace; font-size:12px; letter-spacing:0.18em; text-transform:uppercase; font-weight:700; }
.rd-photo-ph .rd-photo-ph-sub{ font-size:11px; letter-spacing:0.06em; font-weight:500; color:#AEB4BC; text-transform:none; }
/* ─── USP STRIP (zwischen S5 und S6) ─── */
.rd-usp{ background:#fff; border-top:1px solid var(--rd-border); border-bottom:1px solid var(--rd-border); padding:28px 0; }
.rd-usp-label{ text-align:center; font-size:11px; color:#9CA3AF; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:22px; }
.rd-usp-row{ max-width:1220px; margin:0 auto; padding:0 24px; display:flex; justify-content:space-evenly; flex-wrap:wrap; gap:24px 12px; }
.rd-usp-item{ flex:1 1 0; min-width:118px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:9px; }
.rd-usp-item .ti{ font-size:21px; color:var(--rd-blue); }
.rd-usp-item span{ font-size:12px; line-height:1.4; color:var(--rd-muted); max-width:134px; }
@media(max-width:760px){ .rd-usp-item{ flex:0 0 calc(50% - 12px); } }
/* ─── S7 · BEWERTUNGEN PLATZHALTER-KARTEN ─── */
.rd-review-ph-row{ max-width:1120px; margin:24px auto 0; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.rd-review-ph{ background:#fff; border:1px solid var(--rd-border); border-radius:10px; padding:24px; min-height:140px; }
.rd-review-ph-stars{ display:flex; gap:3px; color:#FBBF24; }
.rd-review-ph-stars .ti{ font-size:16px; }
.rd-review-ph-name{ margin-top:14px; font-size:13px; color:#9CA3AF; }
.rd-review-ph-text{ margin-top:6px; font-size:13px; color:#C4C4C4; font-style:italic; line-height:1.5; }
@media(max-width:760px){ .rd-review-ph-row{ grid-template-columns:1fr; } }