/* ----- Self-hosted Geist + Geist Mono (SIL OFL 1.1) ----- */
/* latin-ext */
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(fonts/geist-300-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: 'Geist';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(fonts/geist-300-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;
}
/* latin-ext */
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(fonts/geist-400-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: 'Geist';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(fonts/geist-400-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;
}
/* latin-ext */
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(fonts/geist-500-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: 'Geist';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(fonts/geist-500-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;
}
/* latin-ext */
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(fonts/geist-600-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: 'Geist';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(fonts/geist-600-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;
}
/* latin-ext */
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(fonts/geist-700-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: 'Geist';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(fonts/geist-700-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;
}
/* symbols2 */
@font-face {
font-family: 'Geist Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(fonts/geistmono-400-symbols2.woff2) format('woff2');
unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
/* latin-ext */
@font-face {
font-family: 'Geist Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(fonts/geistmono-400-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: 'Geist Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(fonts/geistmono-400-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;
}
/* symbols2 */
@font-face {
font-family: 'Geist Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(fonts/geistmono-500-symbols2.woff2) format('woff2');
unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
/* latin-ext */
@font-face {
font-family: 'Geist Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(fonts/geistmono-500-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: 'Geist Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(fonts/geistmono-500-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;
}
/* ================================================================
Eder Fahrschule. Redesign
Clean Swiss · single navy accent · geometric · trustworthy
================================================================ */
/* ----- Scroll-reveal: subtle fade + lift when element enters viewport ----- */
/* Note: cross-document View Transitions (@view-transition) were removed. They are
Chrome-only and produced an unreliable transition handshake — the outgoing page
would start a transition the incoming heavy homepage couldn't finish in time,
freezing the old page's snapshot and making navigation feel broken on Chrome. */
.reveal {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.55s ease, transform 0.55s ease;
will-change: opacity, transform;
}
.reveal.is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.reveal, .reveal.is-revealed { opacity: 1; transform: none; transition: none; }
}
/* ----- Design tokens ----- */
:root {
--c-primary: #e74c3c;
--c-primary-dk: #c0392b;
--c-primary-bg: #FDECE9;
--c-primary-bd: #F8C4BC;
--c-ink: #14181F;
--c-ink2: #252B38;
--c-muted: #5F6878;
--c-muted2: #8C95A4;
--c-line: #E6E8EE;
--c-line2: #EFF1F5;
--c-tint: #F5F6FA;
--c-white: #FFFFFF;
--c-success: #0E7F55;
--c-success-bg: #E6F4EE;
--c-success-bd: #C9E5D6;
--c-warn: #A8631A;
--c-whatsapp: #25D366;
--c-canvas: #f0eee9;
--f-display: 'Geist', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
--f-body: 'Geist', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
--f-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
--r-sm: 3px;
--r-md: 4px;
--r-lg: 6px;
--r-xl: 8px;
--r-pill: 999px;
}
/* ----- Reset / base ----- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body {
margin: 0; padding: 0;
background: var(--c-canvas);
font-family: var(--f-body);
color: var(--c-ink);
font-size: 15px;
line-height: 1.45;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; padding: 0; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }
ul, ol { padding: 0; margin: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
/* ----- Page shell (1440 canvas) ----- */
.page {
max-width: 1440px;
margin: 0 auto;
background: var(--c-white);
color: var(--c-ink);
overflow: hidden;
}
/* ----- Typography utilities ----- */
.eyebrow {
font-family: var(--f-mono);
font-size: 11px;
color: var(--c-muted);
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 400;
}
.eyebrow--light { color: rgba(255, 255, 255, 0.5); }
.eyebrow--primary { color: var(--c-primary); }
.h1, h1.h1 {
font-family: var(--f-display);
font-size: 64px;
line-height: 1.02;
letter-spacing: -0.035em;
font-weight: 500;
color: var(--c-ink);
text-wrap: balance;
}
.h1--xl { font-size: 84px; letter-spacing: -0.04em; }
.h1--lg { font-size: 72px; }
.h1--md { font-size: 56px; }
.h2, h2.h2 {
font-family: var(--f-display);
font-size: 42px;
line-height: 1.05;
letter-spacing: -0.025em;
font-weight: 500;
color: var(--c-ink);
text-wrap: balance;
}
.h2--lg { font-size: 64px; }
.h2--sm { font-size: 32px; }
.h2--xs { font-size: 28px; }
.h3, h3.h3 {
font-family: var(--f-display);
font-size: 22px;
line-height: 1.2;
letter-spacing: -0.015em;
font-weight: 500;
color: var(--c-ink);
}
.body {
font-family: var(--f-body);
font-size: 16px;
line-height: 1.55;
color: var(--c-muted);
font-weight: 400;
text-wrap: pretty;
}
.body--lg { font-size: 19px; color: var(--c-ink2); }
.body--md { font-size: 17px; color: var(--c-ink2); }
.body--sm { font-size: 14px; }
.body--xs { font-size: 13px; }
.body--ink { color: var(--c-ink); }
.body--ink2 { color: var(--c-ink2); }
.mono { font-family: var(--f-mono); letter-spacing: 0.04em; }
.text-muted { color: var(--c-muted); }
.text-muted2 { color: var(--c-muted2); }
.text-primary { color: var(--c-primary); }
.text-success { color: var(--c-success); }
.text-white { color: #fff; }
.color-white { color: #fff !important; }
.color-white-65 { color: rgba(255,255,255,0.65); }
.color-white-70 { color: rgba(255,255,255,0.7); }
.color-white-82 { color: rgba(255,255,255,0.82); }
/* ----- Buttons ----- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 20px;
height: 46px;
border-radius: var(--r-md);
font-family: var(--f-body);
font-size: 14.5px;
font-weight: 500;
letter-spacing: -0.005em;
border: 1px solid transparent;
background: transparent;
color: var(--c-ink);
cursor: pointer;
transition: opacity 150ms ease, background 150ms ease, border-color 150ms ease;
white-space: nowrap;
}
.btn:hover { opacity: 0.9; }
.btn:focus-visible {
outline: 2px solid var(--c-primary);
outline-offset: 2px;
}
.btn--sm { padding: 8px 14px; height: 36px; font-size: 13px; }
.btn--lg { padding: 16px 28px; height: 56px; font-size: 16px; }
.btn--block { width: 100%; }
.btn--primary { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.btn--dark { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }
.btn--ghost { background: transparent; color: var(--c-ink); border-color: var(--c-line); }
.btn--ghost-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,0.3); }
.btn--white { background: #fff; color: var(--c-ink); border-color: #fff; }
.btn--whatsapp { background: var(--c-whatsapp); color: #fff; border-color: var(--c-whatsapp); }
.btn .ic { width: 14px; height: 14px; }
.btn--lg .ic { width: 16px; height: 16px; }
.btn--sm .ic { width: 13px; height: 13px; }
/* ----- Tag / Chip ----- */
.tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: var(--r-pill);
font-family: var(--f-body);
font-size: 12px;
font-weight: 500;
letter-spacing: -0.005em;
background: var(--c-tint);
color: var(--c-ink2);
border: 1px solid var(--c-line);
}
.tag--blue { background: var(--c-primary-bg); color: var(--c-primary-dk); border-color: var(--c-primary-bd); }
.tag--success { background: var(--c-success-bg); color: var(--c-success); border-color: var(--c-success-bd); }
.tag--outline { background: transparent; color: var(--c-ink2); border-color: var(--c-line); }
.tag--dark { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.16); }
/* ----- Initial avatar (instead of a person photo) ----- */
.avatar-initials {
background: var(--c-primary-bg) !important;
color: var(--c-primary-dk);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--f-mono);
font-weight: 600;
letter-spacing: 0.04em;
font-size: 14px;
text-transform: uppercase;
}
.avatar-initials.is-lg { font-size: 28px; letter-spacing: 0.06em; }
.avatar-initials::after { content: ''; }
/* ----- Iconoir-style user avatar (no initials, no photo) ----- */
.avatar-icon {
background: var(--c-primary-bg) !important;
color: var(--c-primary-dk);
display: flex;
align-items: center;
justify-content: center;
}
.avatar-icon svg { width: 38%; height: 38%; max-width: 56px; max-height: 56px; }
.avatar-icon.is-lg svg { width: 42%; height: 42%; max-width: 68px; max-height: 68px; }
/* ----- Photo slot ----- */
.photo {
background: repeating-linear-gradient(135deg, #EAEDF5 0 14px, #DEE3EE 14px 28px);
border-radius: var(--r-md);
display: flex;
align-items: center;
justify-content: center;
color: #5B6478;
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.04em;
text-transform: lowercase;
position: relative;
overflow: hidden;
}
.photo--dark {
background: repeating-linear-gradient(135deg, #1A2238 0 14px, #222C46 14px 28px);
color: rgba(255,255,255,0.85);
}
.photo > img,
.photo > video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hero-video-wrap { position: absolute; inset: 0; }
.hero-video-wrap video {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.6s ease;
pointer-events: none;
}
.hero-video-wrap video.is-active { opacity: 1; }
.hero-video-play {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: 64px; height: 64px;
padding: 0 0 0 4px;
display: flex; align-items: center; justify-content: center;
border: none;
border-radius: var(--r-pill);
background: var(--c-primary);
color: #fff;
cursor: pointer;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
transition: transform 0.15s ease, background 0.15s ease;
z-index: 2;
}
.hero-video-play:hover { background: var(--c-primary-dk); transform: translate(-50%, -50%) scale(1.06); }
.hero-video-play:active { transform: translate(-50%, -50%) scale(0.97); }
.hero-video-play[hidden] { display: none; }
/* Impressum layout */
.impressum-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 32px 64px; max-width: 1000px; }
@media (max-width: 760px) { .impressum-grid { grid-template-columns: 1fr; gap: 24px; } }
.photo__label {
background: rgba(255, 255, 255, 0.75);
padding: 4px 8px;
border-radius: var(--r-pill);
}
.photo--dark .photo__label { background: rgba(0,0,0,0.35); }
/* ----- Map address label (MapLibre marker) ----- */
.eder-map-address {
background: var(--c-primary);
color: #fff;
padding: 6px 12px;
border-radius: var(--r-md);
font-family: var(--f-body);
font-size: 12px;
font-weight: 500;
white-space: nowrap;
box-shadow: 0 6px 16px rgba(231, 76, 60, 0.35);
transform: translateY(-8px);
pointer-events: none;
}
/* ----- Status pills (Umtausch deadlines etc.) ----- */
.pill {
display: inline-flex;
align-items: center;
padding: 3px 8px;
border-radius: var(--r-sm);
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.04em;
font-weight: 500;
text-transform: uppercase;
}
.pill--past { background: var(--c-tint); color: var(--c-muted2); border: 1px solid var(--c-line); }
.pill--urgent { background: var(--c-primary-bg); color: var(--c-primary-dk); border: 1px solid var(--c-primary-bd); }
.pill--soon { background: var(--c-tint); color: var(--c-ink); border: 1px solid var(--c-line); }
.pill--upcoming { background: var(--c-success-bg); color: var(--c-success); border: 1px solid var(--c-success-bd); }
.pill-sub {
font-family: var(--f-mono);
font-size: 11px;
color: var(--c-muted);
margin-left: 8px;
}
/* ----- Umtausch (Pflichtumtausch deadline tracker) ----- */
.umtausch-calc {
background: #fff;
border: 1px solid var(--c-line);
border-radius: var(--r-lg);
padding: 32px;
}
.umtausch-mode {
display: flex;
gap: 8px;
margin-top: 12px;
}
.umtausch-mode button {
flex: 1;
padding: 14px 16px;
border: 1px solid var(--c-line);
background: #fff;
color: var(--c-ink);
border-radius: var(--r-md);
font-family: var(--f-body);
font-size: 14px;
font-weight: 500;
text-align: left;
}
.umtausch-mode button[aria-pressed="true"] {
background: var(--c-ink);
color: #fff;
border-color: var(--c-ink);
}
.umtausch-input {
margin-top: 24px;
}
.umtausch-input input {
width: 100%;
padding: 14px 16px;
border: 1px solid var(--c-line);
border-radius: var(--r-md);
font-family: var(--f-body);
font-size: 18px;
margin-top: 8px;
}
.umtausch-input input:focus {
outline: 2px solid var(--c-primary);
outline-offset: 2px;
border-color: var(--c-primary);
}
.umtausch-result {
margin-top: 24px;
padding: 24px;
border-radius: var(--r-md);
background: var(--c-tint);
border-left: 3px solid var(--c-line);
}
.umtausch-result--past { background: var(--c-tint); border-left-color: var(--c-muted2); }
.umtausch-result--urgent { background: var(--c-primary-bg); border-left-color: var(--c-primary); }
.umtausch-result--soon { background: var(--c-tint); border-left-color: var(--c-ink); }
.umtausch-result--upcoming { background: var(--c-success-bg); border-left-color: var(--c-success); }
.umtausch-result__head {
display: flex;
align-items: center;
gap: 12px;
}
.umtausch-result__range {
font-family: var(--f-mono);
font-size: 12px;
color: var(--c-muted);
}
.umtausch-result__date {
margin-top: 12px;
font-family: var(--f-display);
font-size: 28px;
font-weight: 500;
letter-spacing: -0.025em;
color: var(--c-ink);
}
.umtausch-result__sub {
margin-top: 4px;
font-family: var(--f-body);
font-size: 14px;
color: var(--c-muted);
}
.umtausch-table {
background: #fff;
border: 1px solid var(--c-line);
border-radius: var(--r-lg);
overflow: hidden;
}
.umtausch-table__head {
display: grid;
grid-template-columns: 1fr 1fr 1.4fr;
padding: 14px 24px;
background: var(--c-tint);
border-bottom: 1px solid var(--c-line);
font-family: var(--f-mono);
font-size: 10.5px;
color: var(--c-muted);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.umtausch-table__row {
display: grid;
grid-template-columns: 1fr 1fr 1.4fr;
padding: 18px 24px;
border-bottom: 1px solid var(--c-line2);
align-items: center;
}
.umtausch-table__row:last-child { border-bottom: 0; }
.umtausch-row--past { opacity: 0.55; }
.umtausch-row--urgent { background: rgba(231, 76, 60, 0.04); }
.umtausch-table__range {
font-family: var(--f-display);
font-size: 16px;
font-weight: 500;
color: var(--c-ink);
}
.umtausch-table__date {
font-family: var(--f-body);
font-size: 14px;
color: var(--c-ink2);
}
.umtausch-table__status {
display: flex;
align-items: center;
flex-wrap: wrap;
}
/* ----- Knowledge base grid (wissen page) ----- */
.kb-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
@media (max-width: 1100px) { .kb-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .kb-grid { grid-template-columns: 1fr; } }
.kb-card {
background: #fff;
border: 1px solid var(--c-line);
border-radius: var(--r-lg);
padding: 28px;
display: flex;
flex-direction: column;
gap: 12px;
}
.kb-card__topic {
font-family: var(--f-mono);
font-size: 11px;
color: var(--c-muted);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.kb-card__answer {
font-family: var(--f-display);
font-size: 28px;
font-weight: 500;
letter-spacing: -0.025em;
color: var(--c-ink);
line-height: 1.1;
}
.kb-card__body {
color: var(--c-ink2);
font-size: 14.5px;
line-height: 1.55;
}
.kb-card__link {
margin-top: auto;
font-family: var(--f-body);
font-size: 13px;
color: var(--c-ink);
text-decoration: underline;
display: inline-flex;
align-items: center;
gap: 6px;
}
.kb-card__link svg { width: 12px; height: 12px; }
/* ----- Reform compare table ----- */
.reform-compare {
background: #fff;
border: 1px solid var(--c-line);
border-radius: var(--r-lg);
overflow: hidden;
}
.reform-compare__row {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
padding: 18px 24px;
border-bottom: 1px solid var(--c-line2);
align-items: center;
}
.reform-compare__row:last-child { border-bottom: 0; }
.reform-compare__head {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
padding: 14px 24px;
background: var(--c-tint);
border-bottom: 1px solid var(--c-line);
font-family: var(--f-mono);
font-size: 10.5px;
color: var(--c-muted);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.reform-compare__label { font-family: var(--f-body); font-size: 14px; color: var(--c-ink); font-weight: 500; }
.reform-compare__old { font-family: var(--f-mono); font-size: 13px; color: var(--c-muted); }
.reform-compare__new { font-family: var(--f-mono); font-size: 13px; color: var(--c-primary); font-weight: 500; }
@media (max-width: 760px) {
.umtausch-table__head, .umtausch-table__row,
.reform-compare__head, .reform-compare__row { grid-template-columns: 1fr; }
.umtausch-table__head { display: none; }
.reform-compare__head { display: none; }
.umtausch-table__row > *, .reform-compare__row > * { padding: 4px 0; }
}
/* ----- Stars ----- */
.stars { display: inline-flex; gap: 2px; color: #F5A524; }
.stars svg { width: 14px; height: 14px; fill: currentColor; }
.stars--sm svg { width: 11px; height: 11px; }
.stars--lg svg { width: 16px; height: 16px; }
/* ----- Card ----- */
.card {
background: #fff;
border: 1px solid var(--c-line);
border-radius: var(--r-lg);
}
.card--inset { background: var(--c-tint); }
.card--dark { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }
/* ----- Section container ----- */
.section { padding: 96px 48px; background: #fff; }
.section--tint { background: var(--c-tint); border-top: 1px solid var(--c-line); }
.section--ink { background: var(--c-ink); color: #fff; }
.section--primary { background: var(--c-primary); color: #fff; }
.section--no-pad { padding: 0; }
.section-pad-sm { padding: 72px 48px; }
.section-pad-xs { padding: 56px 48px; }
.section-pad-x { padding-left: 48px; padding-right: 48px; }
/* ================================================================
Chrome. Trust strip · Header · Footer
================================================================ */
/* Trust strip */
.trust-strip {
display: flex;
align-items: center;
gap: 24px;
background: var(--c-ink);
color: #fff;
padding: 8px 48px;
font-size: 12.5px;
font-family: var(--f-body);
}
.trust-strip__item { display: flex; align-items: center; gap: 8px; }
.trust-strip__divider {
width: 1px;
height: 14px;
background: rgba(255, 255, 255, 0.18);
}
.trust-strip__muted { color: rgba(255, 255, 255, 0.65); }
.trust-strip__faint { color: rgba(255, 255, 255, 0.4); font-family: var(--f-mono); font-size: 11px; }
.trust-strip__right { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.trust-strip__whatsapp { color: #9DECB8; display: flex; align-items: center; gap: 6px; }
/* Header */
.site-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 48px;
background: #fff;
border-bottom: 1px solid var(--c-line);
position: sticky;
top: 0;
z-index: 50;
}
/* Logo. Wordmark: "Eder · [primary-color circle with 'Fahr'] · schule" */
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand__mark { display: inline-flex; align-items: center; }
.logo-eder {
font-family: var(--f-display);
font-size: 28px;
font-weight: 600;
color: var(--c-primary);
letter-spacing: -0.025em;
line-height: 1;
}
.logo-dot {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
background: var(--c-primary);
border-radius: 50%;
margin-left: 6px;
}
.logo-dot-text {
font-family: var(--f-body);
font-weight: 600;
font-size: 13px;
color: #fff;
letter-spacing: -0.01em;
}
.logo-fahrschule {
font-family: var(--f-body);
font-weight: 500;
font-size: 14px;
color: var(--c-muted);
letter-spacing: -0.01em;
margin-left: 2px;
}
.brand__text { display: flex; flex-direction: column; line-height: 1; margin-left: 4px; padding-left: 12px; border-left: 1px solid var(--c-line); }
.brand__name {
font-family: var(--f-mono);
font-weight: 500;
font-size: 9.5px;
letter-spacing: 0.12em;
color: var(--c-muted);
text-transform: uppercase;
}
.brand__sub {
font-family: var(--f-mono);
font-size: 9.5px;
letter-spacing: 0.12em;
color: var(--c-muted2);
margin-top: 3px;
text-transform: uppercase;
}
.brand--light .logo-eder { color: var(--c-primary); }
.brand--light .logo-fahrschule { color: rgba(255,255,255,0.6); }
.brand--light .brand__name { color: rgba(255,255,255,0.55); }
.brand--light .brand__sub { color: rgba(255,255,255,0.4); }
.brand--light .brand__text { border-left-color: rgba(255,255,255,0.18); }
@media (max-width: 760px) {
.logo-eder { font-size: 22px; }
.logo-dot { width: 28px; height: 28px; }
.logo-dot-text { font-size: 11px; }
.logo-fahrschule { font-size: 11px; }
.brand__text { display: none; }
}
/* Nav */
.nav { display: flex; gap: 32px; }
.nav__link {
font-family: var(--f-body);
font-size: 14.5px;
color: var(--c-muted);
font-weight: 400;
display: flex;
align-items: center;
gap: 6px;
border-bottom: 2px solid transparent;
padding-bottom: 4px;
transition: color 150ms ease;
}
.nav__link:hover { color: var(--c-ink); }
.nav__link--lang { display: none; }
.nav__link[aria-current="page"] {
color: var(--c-ink);
font-weight: 500;
border-bottom-color: var(--c-ink);
}
.nav__badge {
background: var(--c-primary-bg);
color: var(--c-primary-dk);
font-size: 9.5px;
padding: 2px 6px;
border-radius: var(--r-sm);
font-family: var(--f-mono);
letter-spacing: 0.04em;
font-weight: 500;
}
/* Header actions */
.header-actions { display: flex; align-items: center; gap: 12px; }
.lang-switcher {
display: flex;
align-items: center;
border: 1px solid var(--c-line);
border-radius: var(--r-md);
padding: 2px;
background: #fff;
}
.lang-switcher__icon { color: var(--c-muted); margin: 0 4px 0 8px; }
.lang-switcher__list {
font-family: var(--f-mono);
font-size: 11px;
padding: 0 4px;
letter-spacing: 0.05em;
display: flex;
gap: 2px;
}
.lang-switcher__list button,
.lang-switcher__list a {
font: inherit;
letter-spacing: inherit;
color: var(--c-muted2);
background: transparent;
border: 0;
padding: 4px 8px;
border-radius: var(--r-sm);
cursor: pointer;
text-decoration: none;
}
.lang-switcher__list button:hover,
.lang-switcher__list a:hover { color: var(--c-ink); }
.lang-switcher__list button.is-active,
.lang-switcher__list a.is-active {
color: var(--c-ink);
font-weight: 600;
background: var(--c-tint);
}
/* Mobile menu toggle (mobile only) */
.menu-toggle { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid var(--c-line); border-radius: var(--r-md); }
.menu-toggle svg { width: 18px; height: 18px; color: var(--c-ink); }
/* Footer */
.site-footer { background: #08080b; color: #fff; padding: 72px 48px 36px; }
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
gap: 32px;
margin-bottom: 56px;
}
.footer-col h4 {
font-family: var(--f-mono);
font-size: 11px;
color: rgba(255, 255, 255, 0.5);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 16px;
font-weight: 400;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a {
font-family: var(--f-body);
font-size: 13.5px;
color: rgba(255, 255, 255, 0.82);
}
.footer-col a:hover { color: #fff; }
.footer-brand p {
font-family: var(--f-body);
font-size: 14px;
color: rgba(255, 255, 255, 0.6);
margin-top: 24px;
line-height: 1.55;
max-width: 280px;
}
.footer-tags { display: flex; gap: 8px; margin-top: 24px; }
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 28px;
border-top: 1px solid rgba(255,255,255,0.12);
font-family: var(--f-mono);
font-size: 11px;
color: rgba(255,255,255,0.4);
letter-spacing: 0.04em;
}
.footer-bottom__legal { display: flex; gap: 16px; }
.footer-bottom__legal a { color: rgba(255,255,255,0.55); }
/* Mobile sticky CTA bar */
.m-cta-bar {
display: none;
position: fixed;
bottom: 14px;
left: 50%;
transform: translateX(-50%);
background: #fff;
border: 1px solid var(--c-line);
border-radius: 999px;
padding: 5px;
gap: 4px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.06);
z-index: 40;
}
/* Hero CTA row. Side-by-side on desktop, equal halves on mobile */
@media (max-width: 760px) {
.hero-cta-row { gap: 8px !important; flex-wrap: nowrap !important; }
.hero-cta-row > .btn { flex: 1 1 0; min-width: 0; padding-left: 12px; padding-right: 12px; }
}
.m-cta-bar button, .m-cta-bar a {
display: inline-flex;
align-items: center;
justify-content: center;
flex-direction: row;
gap: 6px;
height: 38px;
padding: 0 14px;
border-radius: 999px;
font-family: var(--f-body);
font-size: 13px;
font-weight: 500;
border: 0;
white-space: nowrap;
text-decoration: none;
}
.m-cta-bar .m-cta-call { background: var(--c-tint); color: var(--c-ink); }
.m-cta-bar .m-cta-wa { background: var(--c-whatsapp); color: #fff; }
.m-cta-bar .m-cta-book { background: var(--c-ink); color: #fff; }
/* ================================================================
Homepage sections
================================================================ */
/* Hero */
.hero {
padding: 80px 48px 96px;
background: #fff;
}
.hero-grid {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 64px;
align-items: center;
}
.hero-status { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }
.hero-status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-success); }
.hero-stats {
display: flex;
align-items: center;
gap: 40px;
margin-top: 64px;
}
.hero-stat .num {
font-family: var(--f-display);
font-size: 36px;
font-weight: 500;
letter-spacing: -0.025em;
color: var(--c-ink);
}
.hero-stat .lbl { font-family: var(--f-body); font-size: 13px; color: var(--c-muted); margin-top: 2px; }
.hero-stats__divider { width: 1px; height: 40px; background: var(--c-line); }
.hero-visual { position: relative; }
.hero-visual > .photo { height: 620px; }
.hero-quote-card {
position: absolute;
bottom: 24px;
left: 24px;
background: #fff;
border: 1px solid var(--c-line);
border-radius: var(--r-lg);
padding: 16px;
width: 300px;
}
.hero-quote-card__role { white-space: nowrap; }
.hero-quote-card__head { display: flex; align-items: center; gap: 10px; }
.hero-quote-card__head .photo { width: 40px; height: 40px; border-radius: 20px; }
.hero-quote-card__name { font-family: var(--f-body); font-size: 13px; font-weight: 500; color: var(--c-ink); }
.hero-quote-card__role { font-family: var(--f-body); font-size: 12px; color: var(--c-muted); }
.hero-quote-card p { font-size: 13px; margin-top: 12px; color: var(--c-ink2); }
/* License grid (Homepage classes) */
.license-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--c-line);
border: 1px solid var(--c-line);
border-radius: var(--r-lg);
overflow: hidden;
}
.license-tile {
background: #fff;
padding: 28px;
position: relative;
min-height: 220px;
display: flex;
flex-direction: column;
justify-content: space-between;
text-decoration: none;
color: inherit;
transition: background 150ms ease;
}
.license-tile:hover { background: #fafafb; }
.license-tile__img {
position: absolute;
top: 20px;
right: 20px;
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.85;
}
.license-tile__img img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.license-tile__id {
font-family: var(--f-mono);
font-size: 11px;
color: var(--c-muted);
letter-spacing: 0.08em;
}
.license-tile__name { margin-top: 8px; font-size: 24px; }
.license-tile__sub { font-size: 13px; color: var(--c-muted); margin-top: 4px; }
.license-tile__foot {
margin-top: 24px;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.license-tile__age {
font-family: var(--f-mono);
font-size: 10px;
color: var(--c-muted);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.license-tile__price {
font-family: var(--f-display);
font-size: 22px;
font-weight: 500;
color: var(--c-ink);
margin-top: 6px;
letter-spacing: -0.02em;
}
.license-tile__price--soft { font-size: 14px; color: var(--c-muted); }
.license-tile__badge {
font-family: var(--f-mono);
font-size: 10px;
color: var(--c-primary-dk);
background: var(--c-primary-bg);
padding: 3px 7px;
border-radius: var(--r-sm);
letter-spacing: 0.06em;
align-self: center;
}
.license-tile__foot-end {
display: inline-flex;
align-items: center;
gap: 8px;
}
/* Class detail page hero — h1 left, vehicle icons anchored top-right */
.klass-hero-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 32px;
margin-top: 8px;
}
.klass-icons {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--c-ink);
flex-shrink: 0;
margin-top: 18px;
}
.klass-icons svg { display: block; }
@media (max-width: 760px) {
.klass-hero-head { flex-direction: column-reverse; gap: 16px; align-items: flex-start; }
.klass-icons { margin-top: 0; }
}
.license-tile__arrow svg { width: 18px; height: 18px; color: var(--c-muted); margin-bottom: 4px; }
.license-tile__vehicle {
position: absolute;
top: 22px;
right: 22px;
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--c-ink);
opacity: 0.78;
pointer-events: none;
}
.license-tile__vehicle svg { display: block; }
.license-tile:hover .license-tile__vehicle { color: var(--c-primary); opacity: 1; }
/* If the BELIEBT badge is also present, push the vehicle down so they don't overlap */
.license-tile__badge ~ .license-tile__vehicle { top: 52px; }
/* Vehicle legend strip. Sits below the license grid */
.vehicle-legend {
margin-top: 32px;
display: flex;
flex-wrap: wrap;
gap: 28px;
padding: 18px 24px;
background: #fff;
border: 1px solid var(--c-line);
border-radius: var(--r-md);
align-items: center;
justify-content: center;
}
.vehicle-legend__item {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--f-mono);
font-size: 12px;
letter-spacing: 0.04em;
color: var(--c-ink2);
text-transform: uppercase;
}
.vehicle-legend__item svg { color: var(--c-ink); display: block; }
.vehicle-legend__sep { color: var(--c-muted); }
/* Section header row (eyebrow + h2 + side body) */
.section-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 48px;
gap: 32px;
}
.section-head--big { margin-bottom: 56px; }
.section-head--grid {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 64px;
align-items: center;
}
/* Pass rates */
.passrate-chart {
background: var(--c-tint);
border: 1px solid var(--c-line);
border-radius: var(--r-lg);
padding: 36px;
}
.passrate-chart__head {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 24px;
}
.passrate-chart__head .label {
font-family: var(--f-mono);
font-size: 11px;
color: var(--c-muted);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.passrate-chart__bars {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 14px;
align-items: end;
height: 200px;
}
.passrate-bar {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.passrate-bar__val {
font-family: var(--f-display);
font-size: 18px;
font-weight: 500;
color: var(--c-ink);
letter-spacing: -0.02em;
}
.passrate-bar__bar {
width: 100%;
background: var(--c-ink);
border-radius: var(--r-sm);
}
.passrate-bar__year { font-family: var(--f-mono); font-size: 11px; color: var(--c-muted); }
.passrate-bar.is-highlight .passrate-bar__val { color: var(--c-primary); }
.passrate-bar.is-highlight .passrate-bar__bar { background: var(--c-primary); }
.passrate-chart__caption {
font-family: var(--f-mono);
font-size: 10.5px;
color: var(--c-muted2);
text-align: center;
margin-top: 16px;
letter-spacing: 0.04em;
}
/* Pricing teaser (dark) */
.pricing-rows { display: flex; flex-direction: column; }
.pricing-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 20px 0;
border-bottom: 1px solid rgba(255,255,255,0.12);
}
.pricing-row:last-child { border-bottom: 0; }
.pricing-row__label { font-family: var(--f-body); font-size: 15px; color: rgba(255,255,255,0.82); }
.pricing-row__price {
font-family: var(--f-display);
font-size: 22px;
font-weight: 500;
color: #fff;
letter-spacing: -0.02em;
}
/* Process preview (4 steps) */
.process-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
position: relative;
}
.process-grid::before {
content: '';
position: absolute;
top: 30px;
left: 12%; right: 12%;
border-top: 1px dashed var(--c-line);
}
.process-step__num {
width: 60px;
height: 60px;
border-radius: 50%;
background: #fff;
border: 1px solid var(--c-line);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--f-mono);
font-size: 14px;
color: var(--c-ink);
position: relative;
z-index: 1;
}
.process-step__title { margin-top: 24px; font-size: 20px; }
.process-step__body { margin-top: 8px; font-size: 14.5px; }
/* Team strip */
.team-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.team-card { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; }
.team-card .photo { height: 280px; border-radius: 0; }
.team-card__body { padding: 20px; }
.team-card__role { font-family: var(--f-body); font-size: 13.5px; color: var(--c-muted); margin-top: 4px; }
.team-card__foot {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid var(--c-line2);
}
.team-card__since { font-family: var(--f-mono); font-size: 11px; color: var(--c-muted); }
/* Reviews row */
.reviews-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.review-card {
background: var(--c-tint);
border: 1px solid var(--c-line);
border-radius: var(--r-lg);
padding: 28px;
}
.review-card__text {
margin-top: 16px;
color: var(--c-ink2);
font-size: 15.5px;
line-height: 1.55;
}
.review-card__author {
display: flex;
align-items: center;
gap: 12px;
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid var(--c-line);
}
.review-card__avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--c-primary-bg);
color: var(--c-primary-dk);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--f-body);
font-size: 13px;
font-weight: 600;
}
.review-card__name { font-family: var(--f-body); font-size: 13.5px; font-weight: 500; color: var(--c-ink); }
.review-card__when { font-family: var(--f-mono); font-size: 11px; color: var(--c-muted); }
.reviews-summary { display: flex; align-items: center; gap: 16px; }
.reviews-summary__num {
font-family: var(--f-display);
font-size: 24px;
font-weight: 500;
letter-spacing: -0.02em;
}
.reviews-summary__sub { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
/* Theory app callout (dark inset) */
.theory-callout {
background: var(--c-ink);
color: #fff;
border-radius: var(--r-xl);
padding: 64px 64px 0;
position: relative;
overflow: hidden;
}
.theory-callout-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: flex-end;
}
.theory-callout-grid > div:first-child { padding-bottom: 64px; }
.theory-callout-grid .photo { height: 400px; align-self: flex-end; }
.theory-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 36px;
max-width: 460px;
}
.theory-stat .k {
font-family: var(--f-display);
font-size: 22px;
font-weight: 500;
letter-spacing: -0.02em;
}
.theory-stat .l { font-family: var(--f-body); font-size: 13px; color: rgba(255,255,255,0.55); margin-top: 4px; }
/* Location map */
.location-grid {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 32px;
border: 1px solid var(--c-line);
border-radius: var(--r-lg);
overflow: hidden;
}
.location-info { padding: 48px 40px; }
.location-info__list { margin-top: 28px; display: flex; flex-direction: column; gap: 18px; }
.location-info__item { padding-bottom: 18px; border-bottom: 1px solid var(--c-line2); }
.location-info__label { font-family: var(--f-body); font-size: 13px; font-weight: 500; color: var(--c-ink); margin-bottom: 4px; }
.location-info__addr { font-family: var(--f-body); font-size: 14px; color: var(--c-muted); }
.location-info__hours { font-family: var(--f-mono); font-size: 11.5px; color: var(--c-muted2); margin-top: 6px; }
.location-map {
background: var(--c-tint);
position: relative;
min-height: 420px;
}
.location-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.location-map__pin {
position: absolute;
background: var(--c-primary);
color: #fff;
padding: 6px 12px;
border-radius: var(--r-md);
font-family: var(--f-body);
font-size: 12px;
font-weight: 500;
white-space: nowrap;
}
.location-map__pin--alt {
background: #fff;
color: var(--c-ink);
border: 1px solid var(--c-line);
}
.location-map__hint {
position: absolute;
bottom: 16px; right: 16px;
font-family: var(--f-mono);
font-size: 10.5px;
color: var(--c-muted2);
background: rgba(255,255,255,0.9);
padding: 4px 8px;
border-radius: var(--r-sm);
letter-spacing: 0.04em;
}
/* FAQ teaser (homepage) */
.faq-teaser {
display: grid;
grid-template-columns: 1fr 1.6fr;
gap: 80px;
}
.faq-list .faq-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24px 0;
border-bottom: 1px solid var(--c-line);
cursor: pointer;
background: none;
border-left: 0;
border-right: 0;
border-top: 0;
width: 100%;
text-align: left;
color: var(--c-ink);
text-decoration: none;
font-family: inherit;
transition: padding-left 0.18s ease;
}
.faq-list .faq-row:hover { padding-left: 6px; }
.faq-list .faq-row:hover svg { color: var(--c-primary); }
.faq-row__num { font-family: var(--f-mono); font-size: 11px; color: var(--c-muted); width: 24px; }
.faq-row__q {
font-family: var(--f-display);
font-size: 19px;
color: var(--c-ink);
font-weight: 500;
letter-spacing: -0.015em;
display: flex;
gap: 20px;
align-items: center;
}
.faq-row svg { color: var(--c-muted); width: 18px; height: 18px; }
/* FAQ page (full) */
.faq-cat { margin-bottom: 64px; }
.faq-cat:last-child { margin-bottom: 0; }
.faq-cat__head {
display: flex;
align-items: baseline;
gap: 16px;
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 2px solid var(--c-ink);
}
.faq-cat__num { font-family: var(--f-mono); font-size: 12px; color: var(--c-muted); letter-spacing: 0.06em; }
.faq-cat__count { margin-left: auto; font-family: var(--f-mono); font-size: 11px; color: var(--c-muted); }
.faq-item { border-bottom: 1px solid var(--c-line); }
.faq-item__head {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 24px 0;
background: none;
border: 0;
cursor: pointer;
text-align: left;
}
.faq-item__q {
font-family: var(--f-display);
font-size: 19px;
font-weight: 500;
color: var(--c-ink);
letter-spacing: -0.015em;
padding-right: 32px;
}
.faq-item__toggle {
width: 32px; height: 32px;
border-radius: var(--r-md);
background: var(--c-tint);
color: var(--c-ink);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.faq-item.is-open .faq-item__toggle { background: var(--c-ink); color: #fff; }
.faq-item__answer { padding-bottom: 28px; display: none; }
.faq-item.is-open .faq-item__answer { display: block; }
.faq-item__answer p {
font-size: 15.5px;
color: var(--c-ink2);
max-width: 760px;
}
/* Final CTA (navy) */
.final-cta {
padding: 120px 48px;
background: var(--c-primary);
color: #fff;
text-align: center;
}
.final-cta h2 { color: #fff; font-size: 64px; max-width: 880px; margin: 0 auto; }
.final-cta p { color: rgba(255,255,255,0.8); margin: 24px auto 0; font-size: 18px; max-width: 540px; }
.final-cta__actions { display: flex; gap: 12px; justify-content: center; margin-top: 40px; }
/* ================================================================
Klasse B page
================================================================ */
.breadcrumb {
padding: 20px 48px;
border-bottom: 1px solid var(--c-line2);
font-family: var(--f-mono);
font-size: 11px;
color: var(--c-muted);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.breadcrumb__sep { margin: 0 8px; color: var(--c-muted2); }
.breadcrumb__current { color: var(--c-ink); }
.kpi-row {
display: grid;
grid-template-columns: repeat(4, auto);
gap: 32px;
margin-top: 48px;
}
.kpi__k { font-family: var(--f-mono); font-size: 10.5px; color: var(--c-muted); letter-spacing: 0.08em; text-transform: uppercase; }
.kpi__v { font-family: var(--f-display); font-size: 28px; font-weight: 500; color: var(--c-ink); margin-top: 8px; letter-spacing: -0.025em; }
.kpi__s { font-family: var(--f-body); font-size: 12.5px; color: var(--c-muted); margin-top: 2px; }
.price-table {
background: #fff;
border: 1px solid var(--c-line);
border-radius: var(--r-lg);
overflow: hidden;
}
.price-table__row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 24px;
border-bottom: 1px solid var(--c-line2);
}
.price-table__row:last-child { border-bottom: 0; }
.price-table__row.is-muted { background: var(--c-tint); color: var(--c-muted); }
.price-table__row.is-muted .price-table__label { color: var(--c-muted); }
.price-table__label { font-family: var(--f-body); font-size: 14px; color: var(--c-ink); }
.price-table__amount {
font-family: var(--f-display);
font-size: 16px;
font-weight: 500;
color: var(--c-ink);
letter-spacing: -0.01em;
}
.price-table__mark {
font-family: var(--f-mono);
font-size: 10px;
margin-left: 8px;
color: var(--c-muted2);
}
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li {
display: flex;
gap: 16px;
padding: 18px 0;
border-bottom: 1px solid var(--c-line2);
}
.checklist li:last-child { border-bottom: 0; }
.checklist__icon {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--c-primary-bg);
color: var(--c-primary-dk);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.checklist__icon svg { width: 14px; height: 14px; }
.checklist li > span {
font-family: var(--f-body);
font-size: 16px;
color: var(--c-ink);
padding-top: 4px;
}
.reqtable {
background: #fff;
border: 1px solid var(--c-line);
border-radius: var(--r-lg);
}
.reqtable__head {
display: grid;
grid-template-columns: 1.6fr 1fr 2fr;
padding: 14px 28px;
border-bottom: 1px solid var(--c-line);
background: var(--c-tint);
font-family: var(--f-mono);
font-size: 10.5px;
color: var(--c-muted);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.reqtable__row {
display: grid;
grid-template-columns: 1.6fr 1fr 2fr;
padding: 22px 28px;
align-items: center;
border-bottom: 1px solid var(--c-line2);
}
.reqtable__row:last-child { border-bottom: 0; }
.reqtable__k { font-family: var(--f-display); font-size: 18px; color: var(--c-ink); font-weight: 500; letter-spacing: -0.01em; }
.reqtable__v { font-family: var(--f-display); font-size: 18px; color: var(--c-primary); font-weight: 500; letter-spacing: -0.01em; }
.reqtable__n { font-family: var(--f-body); font-size: 14px; color: var(--c-muted); }
.notice {
padding: 24px;
background: #fff;
border: 1px solid var(--c-primary-bg);
border-radius: var(--r-md);
display: flex;
gap: 16px;
}
.notice__tag {
font-family: var(--f-mono);
font-size: 11px;
color: var(--c-primary);
letter-spacing: 0.08em;
white-space: nowrap;
padding-top: 2px;
}
.timeline-cards {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 4px;
}
.timeline-card {
background: #fff;
border: 1px solid var(--c-line);
border-radius: var(--r-md);
padding: 20px;
border-top: 3px solid var(--c-primary);
}
.timeline-card--ink { border-top-color: var(--c-ink); }
.timeline-card--success { border-top-color: var(--c-success); }
.timeline-card__w { font-family: var(--f-mono); font-size: 10px; color: var(--c-muted); letter-spacing: 0.06em; text-transform: uppercase; }
.timeline-card__t {
font-family: var(--f-display);
font-size: 15.5px;
color: var(--c-ink);
font-weight: 500;
margin-top: 8px;
letter-spacing: -0.01em;
}
.instructor-tile {
background: #fff;
border: 1px solid var(--c-line);
border-radius: var(--r-md);
padding: 14px;
text-align: center;
}
.instructor-tile .photo { height: 140px; }
.instructor-tile .name {
font-family: var(--f-display);
font-size: 15px;
font-weight: 500;
color: var(--c-ink);
margin-top: 12px;
letter-spacing: -0.01em;
}
.instructor-tile .langs {
font-family: var(--f-mono);
font-size: 10.5px;
color: var(--c-muted);
margin-top: 4px;
}
/* ================================================================
Preise page · Kostenrechner
================================================================ */
.kostenrechner { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; }
.kostenrechner__head {
padding: 24px 32px;
border-bottom: 1px solid var(--c-line);
display: flex;
justify-content: space-between;
align-items: center;
background: var(--c-tint);
}
.kostenrechner__body { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; }
.kostenrechner__controls { padding: 32px; border-right: 1px solid var(--c-line); }
.kostenrechner__result { padding: 32px; background: var(--c-ink); color: #fff; }
.field-label {
font-family: var(--f-mono);
font-size: 10.5px;
color: var(--c-muted);
letter-spacing: 0.08em;
text-transform: uppercase;
display: block;
}
.choice-row { display: grid; gap: 6px; margin-top: 12px; }
.choice-row.cols-4 { grid-template-columns: repeat(4, 1fr); }
.choice-row.cols-2 { grid-template-columns: 1fr 1fr; }
.choice-row.cols-5 { grid-template-columns: repeat(5, 1fr); }
.choice {
padding: 14px 8px;
border-radius: var(--r-md);
background: #fff;
color: var(--c-ink);
border: 1px solid var(--c-line);
font-family: var(--f-body);
font-size: 13px;
font-weight: 500;
}
.choice[aria-pressed="true"] { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }
.choice[data-variant="blue"][aria-pressed="true"] {
background: var(--c-primary-bg);
color: var(--c-primary-dk);
border-color: var(--c-primary);
}
.range-row {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.range-row .val {
font-family: var(--f-display);
font-size: 28px;
font-weight: 500;
letter-spacing: -0.025em;
}
input[type="range"] { width: 100%; accent-color: var(--c-primary); margin-top: 16px; }
.range-legend {
display: flex;
justify-content: space-between;
font-family: var(--f-mono);
font-size: 11px;
color: var(--c-muted);
margin-top: 8px;
}
.range-legend .mid { color: var(--c-primary); }
.result-total {
font-family: var(--f-display);
font-size: 56px;
font-weight: 500;
letter-spacing: -0.035em;
line-height: 1;
}
.result-breakdown { margin-top: 28px; display: flex; flex-direction: column; gap: 10px; font-family: var(--f-mono); font-size: 12px; }
.result-row { display: flex; justify-content: space-between; padding: 4px 0; color: rgba(255,255,255,0.7); }
.result-rate-box {
margin-top: 28px;
padding: 16px;
background: rgba(255,255,255,0.06);
border-radius: var(--r-md);
}
.priceboard {
background: #fff;
border: 1px solid var(--c-line);
border-radius: var(--r-lg);
overflow: hidden;
}
.priceboard__head {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr 60px;
padding: 16px 28px;
background: var(--c-tint);
border-bottom: 1px solid var(--c-line);
font-family: var(--f-mono);
font-size: 10.5px;
color: var(--c-muted);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.priceboard__head span:not(:first-child) { text-align: right; }
.priceboard__row {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr 60px;
padding: 20px 28px;
align-items: center;
border-bottom: 1px solid var(--c-line2);
}
.priceboard__row:last-child { border-bottom: 0; }
.priceboard__name {
font-family: var(--f-display);
font-size: 17px;
font-weight: 500;
letter-spacing: -0.015em;
}
.priceboard__sub { font-family: var(--f-body); font-size: 12.5px; color: var(--c-muted); margin-top: 2px; }
.priceboard__cell {
text-align: right;
font-family: var(--f-mono);
font-size: 14px;
}
.priceboard__cell.is-muted { color: var(--c-muted2); }
.priceboard__total {
text-align: right;
font-family: var(--f-display);
font-size: 16px;
font-weight: 500;
letter-spacing: -0.01em;
}
.raten-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.raten-card { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 28px; position: relative; }
.raten-card--pop { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }
.raten-card__mo { font-family: var(--f-mono); font-size: 11px; color: var(--c-muted); letter-spacing: 0.08em; text-transform: uppercase; }
.raten-card--pop .raten-card__mo { color: rgba(255,255,255,0.6); }
.raten-card__rate { font-family: var(--f-display); font-size: 36px; font-weight: 500; margin-top: 12px; letter-spacing: -0.03em; }
.raten-card__rate small { font-family: var(--f-body); font-size: 13px; color: var(--c-muted); font-weight: 400; margin-left: 4px; }
.raten-card--pop .raten-card__rate small { color: rgba(255,255,255,0.6); }
.raten-card__foot {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--c-line2);
font-family: var(--f-body);
font-size: 13px;
color: var(--c-muted);
}
.raten-card--pop .raten-card__foot { border-top-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.7); }
.raten-card__badge {
position: absolute;
top: 16px; right: 16px;
background: var(--c-primary);
color: #fff;
border: 0;
}
/* ================================================================
Ablauf page · timeline
================================================================ */
.timeline { position: relative; }
.timeline::before {
content: '';
position: absolute;
left: 39px;
top: 0; bottom: 0;
width: 1px;
background: var(--c-line);
}
.timeline-step {
display: grid;
grid-template-columns: 80px 1fr;
gap: 32px;
margin-bottom: 48px;
}
.timeline-step:last-child { margin-bottom: 0; }
.timeline-step__num {
width: 80px;
height: 80px;
border-radius: 50%;
background: #fff;
border: 1px solid var(--c-line);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--f-mono);
font-size: 14px;
color: var(--c-ink);
position: relative;
z-index: 1;
}
.timeline-step__card {
background: #fff;
border: 1px solid var(--c-line);
border-radius: var(--r-lg);
padding: 32px;
margin-top: 4px;
}
.timeline-step__head {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
gap: 16px;
}
.timeline-step__meta { display: flex; flex-direction: column; gap: 14px; align-items: flex-end; text-align: right; min-width: 150px; }
.timeline-step__foot {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid var(--c-line2);
display: grid;
gap: 24px;
}
.timeline-step__foot.has-tip { grid-template-columns: 1fr 1fr; }
.timeline-tip {
background: var(--c-primary-bg);
padding: 10px 14px;
border-radius: var(--r-md);
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
}
.timeline-tip .eyebrow { white-space: nowrap; flex-shrink: 0; }
.timeline-tip .body { font-size: 13.5px; margin-top: 0; line-height: 1.45; }
/* ================================================================
Team page filters + cards
================================================================ */
.filter-row { display: flex; gap: 12px; margin-top: 40px; flex-wrap: wrap; }
.filter-chip {
padding: 8px 14px;
border-radius: var(--r-pill);
background: #fff;
color: var(--c-ink2);
border: 1px solid var(--c-line);
font-family: var(--f-body);
font-size: 13px;
font-weight: 500;
}
.filter-chip[aria-pressed="true"] { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }
.team-page-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.team-page-card { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; }
.team-page-card .photo { height: 320px; border-radius: 0; }
.team-female-badge {
position: absolute;
top: 12px; left: 12px;
background: rgba(255,255,255,0.95);
color: var(--c-ink2);
padding: 4px 8px;
border-radius: var(--r-sm);
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.05em;
}
.team-class-pills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 16px; }
.team-class-pill {
font-family: var(--f-mono);
font-size: 10.5px;
padding: 3px 7px;
background: var(--c-tint);
color: var(--c-ink2);
border: 1px solid var(--c-line);
border-radius: var(--r-sm);
letter-spacing: 0.04em;
}
.team-langs { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.team-langs span {
font-family: var(--f-mono);
font-size: 11px;
color: var(--c-primary-dk);
letter-spacing: 0.04em;
}
/* ================================================================
Booking page · calendar
================================================================ */
.booking-hero {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 64px;
align-items: flex-end;
margin-bottom: 48px;
}
.booking-grid {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 48px;
align-items: flex-start;
}
.booking-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 32px;
}
@media (max-width: 1100px) {
.booking-hero { grid-template-columns: 1fr; gap: 24px; align-items: flex-start; }
}
@media (max-width: 760px) {
.booking-row { grid-template-columns: 1fr; }
}
.stepper {
display: flex;
align-items: center;
padding-bottom: 24px;
border-bottom: 1px solid var(--c-line);
}
.stepper__item { display: flex; align-items: center; gap: 10px; }
.stepper__dot {
width: 28px; height: 28px;
border-radius: 50%;
background: #fff;
border: 1px solid var(--c-line);
color: var(--c-muted);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--f-mono);
font-size: 12px;
font-weight: 500;
}
.stepper__item.is-done .stepper__dot,
.stepper__item.is-current .stepper__dot {
background: var(--c-ink);
color: #fff;
border-color: var(--c-ink);
}
.stepper__label {
font-family: var(--f-body);
font-size: 14px;
color: var(--c-muted);
}
.stepper__item.is-current .stepper__label { color: var(--c-ink); font-weight: 500; }
.stepper__divider { flex: 1; height: 1px; background: var(--c-line); margin: 0 16px; }
.calendar {
background: #fff;
border: 1px solid var(--c-line);
border-radius: var(--r-lg);
padding: 28px;
}
.calendar__head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.calendar__nav { display: flex; gap: 6px; }
.calendar__nav button {
width: 32px; height: 32px;
border-radius: var(--r-md);
border: 1px solid var(--c-line);
background: #fff;
display: flex;
align-items: center;
justify-content: center;
color: var(--c-muted);
}
.calendar__days, .calendar__grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
}
.calendar__day-label {
text-align: center;
font-family: var(--f-mono);
font-size: 10.5px;
color: var(--c-muted);
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 8px 0;
}
.calendar__cell {
aspect-ratio: 1;
border-radius: var(--r-md);
border: 1px solid var(--c-line);
background: #fff;
color: var(--c-ink);
font-family: var(--f-body);
font-size: 14px;
position: relative;
}
.calendar__cell.is-weekend { color: var(--c-muted); }
.calendar__cell.is-disabled { background: var(--c-tint); color: var(--c-muted2); cursor: not-allowed; }
.calendar__cell.is-past { text-decoration: line-through; }
.calendar__cell.is-selected { background: var(--c-ink); color: #fff; border-color: var(--c-ink); font-weight: 500; }
.calendar__cell.is-booked-mark::after {
content: '';
position: absolute;
bottom: 4px; left: 50%;
transform: translateX(-50%);
width: 3px; height: 3px;
border-radius: 1.5px;
background: var(--c-muted2);
}
.calendar__legend {
display: flex;
gap: 16px;
margin-top: 20px;
font-family: var(--f-mono);
font-size: 10.5px;
color: var(--c-muted);
letter-spacing: 0.04em;
}
.calendar__legend-dot { width: 10px; height: 10px; border-radius: 2px; border: 1px solid var(--c-line); display: inline-block; vertical-align: middle; margin-right: 6px; }
.timeslot-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 16px; }
.timeslot {
padding: 12px 0;
border-radius: var(--r-md);
background: #fff;
color: var(--c-ink);
border: 1px solid var(--c-line);
font-family: var(--f-mono);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.02em;
}
.timeslot[aria-pressed="true"] {
background: var(--c-primary);
color: #fff;
border-color: var(--c-primary);
}
.timeslot.is-taken { background: var(--c-tint); color: var(--c-muted2); text-decoration: line-through; cursor: not-allowed; }
.summary-card {
background: var(--c-ink);
color: #fff;
padding: 28px;
border-radius: var(--r-lg);
margin-bottom: 20px;
}
.summary-card__row {
display: flex;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.summary-card__row:last-child { border-bottom: 0; }
.summary-card__label { font-family: var(--f-body); font-size: 13px; color: rgba(255,255,255,0.6); }
.summary-card__value { font-family: var(--f-body); font-size: 13.5px; color: #fff; font-weight: 500; }
.form-card {
background: #fff;
border: 1px solid var(--c-line);
padding: 28px;
border-radius: var(--r-lg);
}
.form-stack { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.form-stack label {
display: block;
font-family: var(--f-mono);
font-size: 10.5px;
color: var(--c-muted);
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: 6px;
}
.form-stack input, .form-stack select, .form-stack textarea {
width: 100%;
padding: 11px 12px;
border: 1px solid var(--c-line);
border-radius: var(--r-md);
font-family: var(--f-body);
font-size: 14px;
color: var(--c-ink);
background: #fff;
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.form-stack input:hover, .form-stack select:hover, .form-stack textarea:hover {
border-color: var(--c-ink2);
}
.form-stack input:focus, .form-stack select:focus, .form-stack textarea:focus {
outline: none;
border-color: var(--c-primary);
box-shadow: 0 0 0 3px var(--c-primary-bg);
}
/* Custom select styling — clean chevron, matches design system */
select.select-input,
.form-stack select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding-right: 42px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 16px 16px;
cursor: pointer;
}
select.select-input:focus,
.form-stack select:focus {
background-image: url("data:image/svg+xml;utf8,");
}
/* Standalone .select-input (outside form-stack) — used for the booking page service dropdown */
select.select-input {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 100%;
padding: 16px 48px 16px 18px;
border: 1px solid var(--c-line);
border-radius: var(--r-md);
font-family: var(--f-display);
font-size: 15px;
font-weight: 500;
letter-spacing: -0.01em;
color: var(--c-ink);
background-color: #fff;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 16px center;
background-size: 18px 18px;
line-height: 1.3;
cursor: pointer;
transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}
select.select-input:hover {
border-color: var(--c-ink2);
background-color: #fafafb;
}
select.select-input:focus {
outline: none;
border-color: var(--c-primary);
box-shadow: 0 0 0 3px var(--c-primary-bg);
background-image: url("data:image/svg+xml;utf8,");
}
.select-input optgroup {
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--c-muted);
font-weight: 400;
padding-top: 8px;
background: var(--c-tint);
}
.select-input option {
font-family: var(--f-body);
font-weight: 500;
font-size: 14px;
color: var(--c-ink);
padding: 8px 10px;
background: #fff;
}
/* Custom listbox — wraps the native