/* cyrillic-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300;
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: 300;
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: 300;
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: 300;
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: 300;
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: 300;
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: 300;
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: 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-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 900;
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: 900;
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: 900;
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: 900;
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: 900;
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: 900;
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: 900;
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;
}
:root {
--turquoise: #52b7c1;
--turquoise-deep: #3a8b93;
--turquoise-soft: #8acdd3;
--black: #000;
--white: #fff;
--fuchsia: #e6007e;
--gray-bg: #ececec;
--gray-soft: #f4f4f4;
--gray-mid: #b8b8b8;
--gray-deep: #5b5b5b;
--bar-tracking: -0.035em;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
body {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-weight: 300;
color: var(--black);
background: var(--white);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* ===== Plakat-Selbstbau Studio ===== */
.plakat-studio {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 56px;
align-items: flex-start;
}
.plakat-studio .controls { display: flex; flex-direction: column; gap: 18px; }
.plakat-studio .preview-wrap {
position: relative;
aspect-ratio: 4 / 5;
background: var(--turquoise);
box-shadow: 14px 14px 0 var(--black);
overflow: hidden;
}
.plakat-studio .preview-wrap svg { display: block; width: 100%; height: 100%; }
.plakat-studio .preset-row { display: flex; gap: 8px; flex-wrap: wrap; }
.plakat-studio .preset-btn {
background: transparent;
border: 2px solid var(--black);
padding: 8px 12px;
font: 700 12px 'Inter';
cursor: pointer;
letter-spacing: 0.02em;
transition: all 0.15s ease;
}
.plakat-studio .preset-btn:hover { background: var(--black); color: var(--white); }
.plakat-studio .preset-btn.active { background: var(--fuchsia); color: var(--white); border-color: var(--fuchsia); }
.plakat-studio .field-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
@media (max-width: 960px) {
.plakat-studio { grid-template-columns: 1fr; }
}
::selection { background: var(--fuchsia); color: var(--white); }
html { scroll-behavior: smooth; scroll-padding-top: 78px; }
.sticky-header {
position: sticky;
top: 0;
z-index: 50;
background: var(--white);
}
/* ===== Scroll progress bar (top) ===== */
.scroll-progress {
position: absolute;
bottom: 0;
left: 0;
height: 3px;
background: var(--fuchsia);
z-index: 51;
transition: width 0.05s linear;
box-shadow: 0 0 12px rgba(230,0,126,0.5);
}
/* ===== Reveal-on-scroll ===== */
.reveal {
opacity: 0;
transform: translateX(-32px);
transition: opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.7s cubic-bezier(.2,.7,.2,1);
}
.reveal.in-view { opacity: 1; transform: translateX(0); }
.reveal-up { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal-up.in-view { opacity: 1; transform: translateY(0); }
/* ===== Aktuell-Ticker ===== */
.ticker {
background: var(--black);
color: var(--white);
border-bottom: 1px solid rgba(255,255,255,0.1);
border-top: 1px solid rgba(255,255,255,0.1);
overflow: hidden;
height: 38px;
display: flex;
align-items: stretch;
}
.ticker .label {
display: flex;
align-items: center;
padding: 0 14px;
background: var(--fuchsia);
color: var(--white);
font-weight: 800;
font-size: 11px;
letter-spacing: 0.2em;
flex-shrink: 0;
position: relative;
z-index: 2;
}
.ticker .label::after {
content: '';
position: absolute;
right: -18px;
top: 0;
bottom: 0;
width: 18px;
background: linear-gradient(to right, var(--fuchsia), transparent);
}
.ticker .live-dot {
width: 8px;
height: 8px;
background: var(--white);
border-radius: 50%;
margin-right: 8px;
animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.75); }
}
.ticker .tape {
flex: 1;
overflow: hidden;
display: flex;
align-items: center;
}
.ticker .tape-track {
display: flex;
gap: 48px;
white-space: nowrap;
animation: tickerScroll 50s linear infinite;
will-change: transform;
padding-left: 24px;
}
.ticker .tape:hover .tape-track { animation-play-state: paused; }
@keyframes tickerScroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.ticker .tick {
font-size: 13px;
font-weight: 500;
letter-spacing: 0.01em;
display: inline-flex;
align-items: center;
gap: 12px;
}
.ticker .tick strong { font-weight: 800; color: var(--turquoise); }
.ticker .tick .sep {
display: inline-block;
width: 4px;
height: 4px;
background: var(--fuchsia);
border-radius: 50%;
}
/* ===== Stat count-up: tabular for stability ===== */
.stat .num { font-variant-numeric: tabular-nums; }
/* ===== CDU-Schutzraum-Pattern (subtile Wortmarken-Tapete) ===== */
.cdu-tape {
background-image: url("data:image/svg+xml;utf8,");
background-size: 220px 160px;
background-repeat: repeat;
}
.cdu-tape-fuchsia {
background-image: url("data:image/svg+xml;utf8,");
background-size: 220px 160px;
background-repeat: repeat;
}
/* ===== Section divider with chapter number ===== */
.chapter-divider {
height: 56px;
background: var(--white);
border-bottom: 2px solid var(--black);
display: flex;
align-items: stretch;
overflow: hidden;
position: relative;
}
.chapter-divider .num {
background: var(--black);
color: var(--white);
padding: 0 24px;
display: flex;
align-items: center;
font-weight: 800;
font-size: 14px;
letter-spacing: 0.04em;
flex-shrink: 0;
}
.chapter-divider .num::after {
content: '';
border-left: 24px solid var(--black);
border-top: 28px solid transparent;
border-bottom: 28px solid transparent;
}
.chapter-divider .title {
display: flex;
align-items: center;
padding: 0 28px 0 32px;
font-weight: 700;
font-size: 13px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gray-deep);
}
.chapter-divider .accent {
flex: 1;
background:
linear-gradient(to right, transparent 0%, transparent 60%, var(--fuchsia) 60%, var(--fuchsia) 100%);
align-self: stretch;
}
/* ===== Magnetic-tilt buttons ===== */
.btn { transition: transform 0.18s cubic-bezier(.2,.7,.2,1), background 0.15s ease, box-shadow 0.18s ease; }
.btn:hover { transform: translateY(-3px) rotate(-0.5deg); box-shadow: 0 8px 0 rgba(0,0,0,0.18); }
.btn.fuchsia:hover { box-shadow: 0 8px 0 rgba(0,0,0,0.25); }
/* ===== Number reveal: enter animation ===== */
.stat .num { transition: color 0.3s ease; }
.stat:hover .num { color: var(--fuchsia); }
.stat { transition: background 0.18s ease; }
.stat:hover { background: var(--gray-soft); }
/* ===== Section heading: gradient text accent on hover ===== */
.sec-heading { transition: letter-spacing 0.4s ease; }
section:hover .sec-heading { letter-spacing: -0.038em; }
/* ===== Ausschuss-Karten 3D-hover ===== */
.ausschuss-card {
transform-style: preserve-3d;
perspective: 1000px;
}
.ausschuss-card .num { transition: color 0.2s ease; }
.ausschuss-card:hover .num { color: var(--fuchsia); }
.ausschuss-card:hover .tag-line { width: 100%; transition: width 0.25s ease; }
/* ===== BAR primitive ===== */
.bar {
display: inline-block;
font-family: 'Inter', sans-serif;
font-weight: 800;
letter-spacing: var(--bar-tracking);
line-height: 1;
padding: 0.12em 0.18em 0.14em 0.18em;
background: var(--black);
color: var(--white);
white-space: nowrap;
}
.bar.white { background: var(--white); color: var(--black); }
.bar.black { background: var(--black); color: var(--white); }
.bar.fuchsia { background: var(--fuchsia); color: var(--white); }
.bar.turquoise { background: var(--turquoise); color: var(--white); }
.bar.wrap { white-space: normal; }
/* CDU Logo */
.cdu-logo {
display: inline-block;
background: var(--white);
padding: 8px 14px 10px;
font-family: 'Inter', sans-serif;
font-weight: 900;
font-size: 26px;
letter-spacing: -0.06em;
line-height: 1;
color: var(--black);
font-style: italic;
transform: skewX(-8deg);
}
.cdu-logo > span { display: inline-block; transform: skewX(0); }
/* ===== Sticky top nav ===== */
.topnav {
background: var(--white);
height: 72px;
display: flex;
align-items: center;
padding: 0 32px;
gap: 32px;
position: relative;
}
.topnav .brand {
display: flex;
align-items: center;
gap: 14px;
font-family: 'Inter';
font-weight: 800;
font-size: 18px;
letter-spacing: -0.01em;
}
.topnav .brand .name-bar {
background: var(--black);
color: var(--white);
padding: 6px 10px 8px;
font-size: 16px;
letter-spacing: -0.02em;
}
.topnav .links {
display: flex;
gap: 24px;
margin-left: auto;
align-items: center;
}
.topnav .links a {
color: var(--black);
text-decoration: none;
font-weight: 600;
font-size: 14px;
padding: 6px 0;
position: relative;
letter-spacing: 0;
}
.topnav .links a:hover { color: var(--fuchsia); }
.topnav .links a.active::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: -2px;
height: 3px;
background: var(--turquoise);
}
.topnav .links .cta {
background: var(--fuchsia);
color: var(--white);
padding: 10px 14px;
font-weight: 800;
font-size: 13px;
letter-spacing: 0.01em;
}
.topnav .links .cta:hover { background: var(--black); color: var(--white); }
/* ===== Sections ===== */
section { padding: 96px 64px; position: relative; }
section.bg-turquoise { background: var(--turquoise); color: var(--black); }
section.bg-turquoise.dark { color: var(--white); }
section.bg-gray { background: var(--gray-bg); }
section.bg-soft { background: var(--gray-soft); }
section.bg-black { background: var(--black); color: var(--white); }
section.bg-white { background: var(--white); }
.container {
max-width: 1320px;
margin: 0 auto;
}
.container.narrow { max-width: 960px; }
.container.wide { max-width: 1480px; }
/* Section heading: small black tag label + big bars */
.sec-tag {
display: inline-block;
background: var(--black);
color: var(--white);
padding: 8px 14px 10px;
font-weight: 800;
font-size: 14px;
letter-spacing: 0.02em;
margin-bottom: 28px;
}
.sec-tag.invert {
background: var(--white);
color: var(--black);
}
.sec-heading {
font-family: 'Inter', sans-serif;
font-weight: 800;
font-size: clamp(36px, 5vw, 72px);
letter-spacing: -0.035em;
line-height: 1.02;
margin: 0 0 32px;
}
.sec-lead {
font-size: clamp(18px, 1.6vw, 22px);
line-height: 1.55;
font-weight: 300;
max-width: 760px;
margin: 0 0 40px;
}
.sec-lead strong { font-weight: 800; }
/* ===== HERO ===== */
.hero {
background: var(--turquoise);
min-height: calc(100vh - 72px);
padding: 64px 64px 96px;
position: relative;
overflow: hidden;
}
/* Subtle CDU wordmark tape pattern at edges */
.hero::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 220px 160px;
background-repeat: repeat;
pointer-events: none;
z-index: 0;
}
.hero > * { position: relative; z-index: 1; }
.hero-grid {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 48px;
align-items: center;
max-width: 1480px;
margin: 0 auto;
height: 100%;
}
.hero-claim-bar {
display: inline-block;
background: var(--white);
color: var(--black);
padding: 6px 10px 8px;
font-weight: 800;
font-size: clamp(13px, 1.2vw, 17px);
letter-spacing: 0.01em;
margin-bottom: 16px;
}
.hero-name { display: flex; flex-direction: column; align-items: flex-start; }
.hero-name .bar { font-size: clamp(56px, 9.5vw, 152px); margin-top: -0.04em; }
.hero-name .bar:first-child { margin-top: 0; }
.hero-sub {
margin-top: 28px;
font-size: clamp(15px, 1.3vw, 20px);
line-height: 1.5;
color: var(--white);
max-width: 540px;
font-weight: 400;
}
.hero-sub strong { font-weight: 800; }
.hero-cta-row { margin-top: 36px; display: flex; gap: 14px; flex-wrap: wrap; }
.btn {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--black);
color: var(--white);
padding: 14px 20px;
font-family: 'Inter';
font-weight: 800;
font-size: 14px;
letter-spacing: 0.02em;
text-decoration: none;
border: none;
cursor: pointer;
transition: transform 0.15s ease, background 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn.fuchsia { background: var(--fuchsia); }
.btn.white { background: var(--white); color: var(--black); }
.btn.ghost { background: transparent; color: var(--black); border: 2px solid var(--black); }
.btn.ghost.dark { color: var(--white); border-color: var(--white); }
.btn .arr { display: inline-block; transition: transform 0.15s ease; }
.btn:hover .arr { transform: translateX(4px); }
/* Portrait card on hero */
.portrait-card {
aspect-ratio: 3 / 4;
background: var(--turquoise);
position: relative;
overflow: hidden;
box-shadow: 0 30px 80px rgba(0,0,0,0.25);
}
.portrait-claim {
position: absolute;
top: 5%;
left: 5%;
z-index: 3;
}
.portrait-logo {
position: absolute;
top: 5%;
right: 5%;
z-index: 3;
}
.portrait-stack {
position: absolute;
left: 5%;
bottom: 7%;
display: flex;
flex-direction: column;
align-items: flex-start;
z-index: 3;
}
.portrait-stack .bar { font-size: clamp(24px, 3.6cqi, 56px); margin-top: -0.05em; }
.portrait-stack .bar:first-child { margin-top: 0; }
.portrait-stack .zusatz { margin-top: -0.05em; padding: 0.18em 0.28em 0.22em; background: var(--turquoise-deep); color: var(--white); font-weight: 800; font-size: clamp(11px, 1.4cqi, 17px); letter-spacing: 0; }
/* Lebenslauf timeline */
.timeline {
display: grid;
grid-template-columns: 80px 1fr;
gap: 32px 24px;
margin-top: 24px;
}
.timeline .year {
font-family: 'Inter';
font-weight: 800;
font-size: 18px;
letter-spacing: -0.01em;
padding-top: 3px;
color: var(--black);
font-variant-numeric: tabular-nums;
}
.timeline .entry {
border-left: 2px solid var(--black);
padding-left: 24px;
padding-bottom: 12px;
position: relative;
}
.timeline .entry::before {
content: '';
position: absolute;
left: -7px;
top: 8px;
width: 12px;
height: 12px;
background: var(--fuchsia);
}
.timeline .entry h4 {
margin: 0 0 6px;
font-weight: 800;
font-size: 17px;
letter-spacing: -0.01em;
}
.timeline .entry p {
margin: 0;
font-size: 14px;
line-height: 1.55;
color: var(--gray-deep);
font-weight: 400;
}
/* Ausschuss card grid */
.ausschuss-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 20px;
}
.ausschuss-card {
background: var(--white);
padding: 28px 24px 24px;
border: 2px solid var(--black);
position: relative;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ausschuss-card:hover {
transform: translateY(-4px);
box-shadow: 6px 6px 0 var(--black);
}
.ausschuss-card .num {
position: absolute;
top: 14px;
right: 14px;
font-family: 'Inter';
font-weight: 800;
font-size: 14px;
color: var(--gray-mid);
font-variant-numeric: tabular-nums;
}
.ausschuss-card h4 {
margin: 0 0 12px;
font-weight: 800;
font-size: 18px;
letter-spacing: -0.02em;
line-height: 1.2;
}
.ausschuss-card p {
margin: 0;
font-size: 13px;
line-height: 1.55;
color: var(--gray-deep);
font-weight: 400;
}
.ausschuss-card .tag-line {
margin-top: 14px;
height: 4px;
width: 40%;
background: var(--turquoise);
}
/* Stat row */
.stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1px;
background: var(--black);
border: 2px solid var(--black);
margin-top: 40px;
}
.stat {
background: var(--white);
padding: 28px 24px;
}
.stat .num {
font-family: 'Inter';
font-weight: 800;
font-size: clamp(36px, 4vw, 56px);
letter-spacing: -0.035em;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.stat .label {
margin-top: 8px;
font-size: 13px;
line-height: 1.4;
font-weight: 600;
color: var(--gray-deep);
}
/* Download card */
.download-card {
background: var(--white);
border: 3px solid var(--black);
padding: 32px;
display: grid;
grid-template-columns: 1fr auto;
gap: 32px;
align-items: center;
position: relative;
}
.download-card .pdf-icon {
width: 96px;
height: 124px;
background: var(--fuchsia);
color: var(--white);
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
padding: 14px 8px;
font-family: 'Inter';
font-weight: 800;
letter-spacing: 0.04em;
font-size: 14px;
position: relative;
flex-shrink: 0;
}
.download-card .pdf-icon::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 26px;
height: 26px;
background: linear-gradient(225deg, var(--white) 50%, transparent 50%);
}
.download-card .meta-row {
display: flex;
gap: 18px;
margin-top: 12px;
font-size: 12px;
color: var(--gray-deep);
font-weight: 600;
letter-spacing: 0.02em;
}
.download-card h3 {
margin: 0 0 8px;
font-size: clamp(22px, 2.2vw, 32px);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.1;
}
.download-card p {
margin: 0;
font-size: 14px;
line-height: 1.55;
color: var(--gray-deep);
max-width: 540px;
}
/* Wahlkreis map placeholder */
.map-card {
background: var(--turquoise);
aspect-ratio: 1.4 / 1;
position: relative;
overflow: hidden;
}
.map-svg-wrap { position: absolute; inset: 0; }
.map-pin {
position: absolute;
width: 28px;
height: 36px;
background: var(--fuchsia);
clip-path: path('M14 0 C 21 0, 28 7, 28 14 C 28 24, 14 36, 14 36 C 14 36, 0 24, 0 14 C 0 7, 7 0, 14 0 Z');
z-index: 3;
}
/* BBK callout */
.bbk-callout {
background: var(--black);
color: var(--white);
padding: 48px;
position: relative;
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 56px;
align-items: flex-start;
}
.bbk-callout::before {
content: 'BBK';
position: absolute;
top: 24px;
right: 32px;
font-weight: 900;
font-size: 11px;
letter-spacing: 0.3em;
color: var(--fuchsia);
}
.bbk-callout h3 {
margin: 0 0 24px;
font-size: clamp(28px, 3vw, 44px);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.05;
}
.bbk-callout p {
margin: 0 0 20px;
font-size: 15px;
line-height: 1.6;
font-weight: 300;
color: rgba(255,255,255,0.85);
}
.checklist {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.checklist li {
display: grid;
grid-template-columns: 28px 1fr;
gap: 14px;
align-items: flex-start;
padding: 14px 16px;
background: rgba(255,255,255,0.06);
border-left: 3px solid var(--fuchsia);
}
.checklist .icon {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
font-size: 16px;
}
.checklist .text { font-size: 14px; line-height: 1.45; font-weight: 500; }
.checklist .text strong { font-weight: 800; display: block; font-size: 14px; margin-bottom: 2px; }
.checklist .text span { font-weight: 400; color: rgba(255,255,255,0.7); font-size: 13px; }
/* Kontakt form */
.kontakt-grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 56px;
align-items: flex-start;
}
.form-field { margin-bottom: 18px; }
.form-field label {
display: block;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 6px;
}
.form-field input, .form-field textarea {
width: 100%;
border: 2px solid var(--black);
padding: 12px 14px;
font-family: 'Inter';
font-size: 15px;
font-weight: 500;
background: var(--white);
outline: none;
transition: border-color 0.15s ease;
}
.form-field input:focus, .form-field textarea:focus { border-color: var(--fuchsia); }
.form-field textarea { resize: vertical; min-height: 140px; }
.contact-block {
background: var(--white);
padding: 32px;
border: 2px solid var(--black);
}
.contact-block h4 {
font-size: 14px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
margin: 0 0 16px;
padding-bottom: 12px;
border-bottom: 2px solid var(--black);
}
.contact-block .row {
display: grid;
grid-template-columns: 90px 1fr;
gap: 12px;
margin-bottom: 12px;
font-size: 14px;
line-height: 1.4;
}
.contact-block .row .k {
font-weight: 700;
color: var(--gray-deep);
font-size: 12px;
letter-spacing: 0.04em;
text-transform: uppercase;
padding-top: 3px;
}
.contact-block a { color: var(--black); }
.contact-block a:hover { color: var(--fuchsia); }
/* Footer */
footer.site {
background: var(--black);
color: var(--white);
padding: 64px 64px 36px;
}
footer.site .ft-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: 40px;
max-width: 1480px;
margin: 0 auto;
}
footer.site h5 {
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 800;
margin: 0 0 18px;
color: var(--turquoise);
}
footer.site a {
color: rgba(255,255,255,0.8);
text-decoration: none;
font-size: 14px;
display: block;
margin-bottom: 8px;
transition: color 0.15s ease;
}
footer.site a:hover { color: var(--fuchsia); }
footer.site .legal {
margin-top: 48px;
padding-top: 24px;
border-top: 1px solid rgba(255,255,255,0.15);
display: flex;
justify-content: space-between;
gap: 32px;
font-size: 12px;
color: rgba(255,255,255,0.55);
flex-wrap: wrap;
}
/* Portrait placeholder visual: blitz-look gradient */
.blitz-portrait {
background:
radial-gradient(circle at 50% 38%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 32%),
linear-gradient(160deg, #6c8a92 0%, #2c3b40 100%);
position: absolute;
inset: 0;
}
.blitz-portrait::before {
/* silhouette */
content: '';
position: absolute;
left: 50%;
top: 22%;
width: 38%;
height: 70%;
transform: translateX(-50%);
background: radial-gradient(ellipse at 50% 22%, #2a3438 0%, #1c2326 60%, transparent 65%),
radial-gradient(ellipse at 50% 62%, #1c2326 0%, #1c2326 36%, transparent 50%);
}
.blitz-portrait::after {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.025) 2px, rgba(255,255,255,0.025) 3px);
pointer-events: none;
}
/* "Press flash" highlight on top edge of portrait */
.blitz-flash {
position: absolute;
top: -20%;
left: -10%;
width: 60%;
height: 60%;
background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 60%);
pointer-events: none;
z-index: 2;
}
/* Hero entrance choreography */
@keyframes barSlideIn {
from { transform: translateX(-60px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes claimDrop {
from { transform: translateY(-30px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.hero-claim-bar { animation: claimDrop 0.55s cubic-bezier(.2,.7,.2,1) 0.1s both; }
.hero-name .bar { animation: barSlideIn 0.6s cubic-bezier(.2,.7,.2,1) both; }
.hero-name .bar:nth-child(1) { animation-delay: 0.25s; }
.hero-name .bar:nth-child(2) { animation-delay: 0.42s; }
.hero-sub { animation: claimDrop 0.55s cubic-bezier(.2,.7,.2,1) 0.7s both; }
.hero-cta-row { animation: claimDrop 0.55s cubic-bezier(.2,.7,.2,1) 0.85s both; }
.portrait-card { animation: claimDrop 0.7s cubic-bezier(.2,.7,.2,1) 0.4s both; }
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.hero-claim-bar, .hero-name .bar, .hero-sub, .hero-cta-row, .portrait-card,
.ticker .tape-track {
animation: none !important;
}
}
@media (max-width: 960px) {
section { padding: 64px 32px; }
.hero { padding: 32px 32px 64px; }
.hero-grid { grid-template-columns: 1fr; }
.topnav { padding: 0 20px; gap: 16px; }
.topnav .links { gap: 14px; }
.topnav .links a:not(.cta) { display: none; }
.kontakt-grid { grid-template-columns: 1fr; }
.bbk-callout { grid-template-columns: 1fr; padding: 32px; gap: 32px; }
footer.site { padding: 48px 24px; }
footer.site .ft-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
/* ===== Small viewport hardening ===== */
html,
body {
width: 100%;
max-width: 100%;
}
img,
iframe,
svg {
max-width: 100%;
}
.container,
section,
.hero-grid,
.about-grid,
.video-grid,
.wahlkreis-grid,
.download-card,
.download-main,
.bbk-callout,
.kontakt-grid,
footer.site .ft-grid {
min-width: 0;
}
@media (max-width: 760px) {
section { padding: 56px 24px; }
.container { width: 100%; }
.about-grid,
.video-grid,
.wahlkreis-grid {
grid-template-columns: minmax(0, 1fr) !important;
gap: 32px !important;
}
.download-card {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
}
.download-main {
min-width: 0;
}
.download-card .btn {
width: 100%;
justify-content: center;
flex-shrink: 1 !important;
}
.download-card .meta-row {
flex-wrap: wrap;
gap: 8px 12px;
}
.report-archive-grid {
grid-template-columns: minmax(0, 1fr) !important;
}
.video-frame {
box-shadow: 8px 8px 0 var(--turquoise) !important;
}
.engagement-card,
.bbk-callout,
.contact-block {
padding: 28px !important;
}
.topic-grid {
grid-template-columns: minmax(0, 1fr) !important;
}
}
@media (max-width: 520px) {
html { scroll-padding-top: 110px; }
section { padding: 48px 18px; }
.topnav {
padding: 0 16px;
gap: 12px;
justify-content: space-between;
}
.topnav .brand {
min-width: 0;
flex-shrink: 1;
gap: 10px;
}
.topnav .brand .name-bar {
font-size: 14px;
flex-shrink: 0;
}
.topnav .brand span:last-child {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.topnav .links {
margin-left: 0;
flex-shrink: 0;
}
.topnav .links .cta {
padding: 8px 12px;
font-size: 12px;
}
.scroll-progress {
bottom: 0;
}
.ticker {
height: 34px;
}
.ticker .label {
padding: 0 10px;
font-size: 10px;
letter-spacing: 0.12em;
}
.ticker .tick {
font-size: 13px;
}
.sec-heading {
font-size: clamp(30px, 11vw, 44px);
letter-spacing: -0.02em;
overflow-wrap: anywhere;
}
.sec-lead {
font-size: 18px;
line-height: 1.45;
max-width: 100%;
}
.bar {
max-width: 100%;
white-space: normal;
overflow-wrap: anywhere;
}
.hero {
padding: 30px 18px 64px;
min-height: auto;
}
.hero-name .bar {
font-size: clamp(44px, 17vw, 76px);
}
.hero-cta-row .btn {
width: 100%;
justify-content: center;
}
.timeline {
grid-template-columns: minmax(0, 1fr);
gap: 8px;
}
.timeline .entry {
padding-left: 18px;
margin-bottom: 22px;
}
.engagement-card {
margin-left: 0;
padding: 24px !important;
}
.download-card {
padding: 24px;
}
.download-main {
flex-direction: column;
align-items: flex-start !important;
gap: 18px !important;
}
.download-card .pdf-icon {
width: 72px;
height: 92px;
}
.map-card {
aspect-ratio: 1.28 / 1;
}
.map-copy {
padding: 10px 10px 0 !important;
max-width: calc(100% - 20px);
}
.map-label {
font-size: 7px !important;
letter-spacing: 0.16em !important;
}
.map-title {
font-size: clamp(12px, 5vw, 18px) !important;
line-height: 1.05;
max-width: 100%;
}
.map-badge {
margin-top: 5px !important;
max-width: 100%;
gap: 6px !important;
padding: 4px 7px 5px !important;
font-size: clamp(10px, 3.8vw, 13px) !important;
line-height: 1.1;
white-space: normal;
}
.map-badge span {
width: 7px !important;
height: 7px !important;
flex: 0 0 auto;
}
.map-credit {
right: 8px !important;
bottom: 7px !important;
max-width: 78%;
font-size: clamp(6px, 2.4vw, 9px) !important;
line-height: 1.2;
}
footer.site {
padding: 44px 18px 28px;
}
footer.site .ft-grid {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 380px) {
section { padding-left: 14px; padding-right: 14px; }
.topnav { padding-left: 10px; padding-right: 10px; gap: 8px; }
.topnav .brand .name-bar {
font-size: 13px;
padding: 6px 8px 8px;
}
.topnav .brand span:last-child {
display: none; /* Hide MdA CDU Lankwitz completely on tiny screens to fit the button */
}
.btn {
padding: 12px 14px;
font-size: 13px;
}
.map-title {
font-size: 13px !important;
}
.map-badge {
font-size: 10px !important;
}
}