/* =========================================================
Fahrschule Palme — Schwarz / Rot / Grün (Logo-Farben)
Hintergrund SCHWARZ · Schrift ROT (primär) & GRÜN (Akzentwort)
Gold NUR als feiner Akzent (Linien, Ränder, Details)
Orange ausschließlich als Sonnenuntergang im Footer
Headlines im Logo-Brush-Script (Kaushan Script)
MOBILE-FIRST (Basis = Handy, min-width skaliert hoch)
---------------------------------------------------------
Schriften werden lokal ausgeliefert -> css/fonts.css (im separat verlinkt)
========================================================= */
:root {
--ink: #000000; /* Schwarz */
--night: #080808;
--panel: #0d0d0d; /* Karten */
--panel-2: #141414;
--gold: #e0bd63; /* nur Akzent */
--gold-hi: #fbe9a6;
--gold-lo: #9c7526;
--red: #d92b21; /* "Fahrschule"-Rot */
--red-hi: #f04a3e;
--red-lo: #9c1710;
--green: #3a9a45; /* "Palme"-Grün */
--green-hi: #57c765;
--green-ink:#04170a; /* Schrift auf Grünflächen */
--orange: #e2811d; /* Sonnenuntergang – nur unten */
--cream: #f2efe8; /* Fließtext */
--muted: #b7ae9f;
--faint: #8a8377; /* Platzhalter-Text, min. 4.5:1 auf Schwarz */
--line: rgba(224,189,99,.22); /* Gold-Haarlinie (Akzent) */
--line-hi: rgba(224,189,99,.5);
--gold-grad: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-lo));
--ff-script: "Kaushan Script", "Brush Script MT", cursive;
--ff-impact: "Anton", "Arial Narrow", sans-serif;
--ff-label: "Oswald", "Helvetica Neue", sans-serif;
--ff-body: "Barlow", system-ui, -apple-system, sans-serif;
--maxw: 1180px;
--pad: clamp(1.1rem, 5vw, 2.4rem);
--radius: 16px;
--header-h: 4.6rem;
/* Motion: kräftige Kurven, kurze Dauern */
--ease-out: cubic-bezier(.22, 1, .36, 1);
--ease-io: cubic-bezier(.65, 0, .35, 1);
--t-fast: .16s;
--t-base: .24s;
--t-slow: .5s;
}
/* ---------- Reset ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html {
-webkit-text-size-adjust: 100%;
scroll-padding-top: calc(var(--header-h) + 1rem);
scrollbar-color: var(--gold-lo) #000;
}
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
body {
font-family: var(--ff-body);
color: var(--cream);
background: #000;
line-height: 1.6;
overflow-x: hidden;
font-size: 16px;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
/* Browser-Oberflächen mitgestalten */
::selection { background: var(--red); color: #fff; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: var(--gold-lo); border: 3px solid #000; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }
:focus-visible {
outline: 2px solid var(--gold-hi);
outline-offset: 3px;
border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }
/* Sprungmarke für Tastatur & Screenreader */
.skip {
position: absolute; left: 50%; top: 0; z-index: 300;
transform: translate(-50%, -120%);
background: var(--gold); color: #241703;
font-family: var(--ff-label); font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
font-size: .8rem; padding: .7rem 1.2rem; border-radius: 0 0 10px 10px;
transition: transform var(--t-base) var(--ease-out);
}
.skip:focus { transform: translate(-50%, 0); }
/* Feines Filmkorn über allem – fix, nie im Scroll-Repaint */
body::after {
content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9999;
opacity: .035; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Logo-Schriftzug als Hintergrund-Wasserzeichen (Rot/Grün) */
.bg-script {
position: fixed; inset: -10vh -25vw; z-index: -1; pointer-events: none; user-select: none;
font-family: var(--ff-script); color: var(--red);
font-size: clamp(3.4rem, 12vw, 8rem); line-height: 1.05;
opacity: .05; transform: rotate(-16deg);
overflow: hidden; word-break: break-word;
}
.bg-script span:nth-child(2n) { color: var(--green); }
.bg-script span:nth-child(5n) { color: var(--gold); }
/* ---------- Helfer ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.visually-hidden {
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
/* Logo-Banner als transparentes Hintergrund-Motiv für Passagen */
.logo-bg { position: relative; overflow: hidden; }
.logo-bg::before {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background-image: url("../img/logo-banner-1400.jpg");
background-image: image-set(url("../img/logo-banner-1400.webp") type("image/webp"),
url("../img/logo-banner-1400.jpg") type("image/jpeg"));
background-position: center; background-size: cover; background-repeat: no-repeat;
opacity: .14;
-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 72%, transparent 100%);
mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 72%, transparent 100%);
}
.logo-bg > * { position: relative; z-index: 1; }
/* Große Hintergrund-Schrift (wie Logo) für eine Passage */
.has-script { position: relative; overflow: hidden; }
.has-script::before {
content: "Palme"; position: absolute; inset: 0; z-index: 0; pointer-events: none;
display: flex; align-items: center; justify-content: center;
font-family: var(--ff-script); font-size: clamp(7rem, 30vw, 24rem); line-height: 1.2;
color: var(--red); opacity: .16; white-space: nowrap;
-webkit-text-stroke: 1px rgba(224,189,99,.25);
}
.has-script > * { position: relative; z-index: 1; }
.kicker {
font-family: var(--ff-label); font-weight: 600; text-transform: uppercase;
letter-spacing: .28em; font-size: .72rem; color: var(--green-hi);
display: inline-flex; align-items: center; gap: .6rem;
}
.kicker::before { content: ""; width: 26px; height: 2px; background: var(--gold-grad); }
/* Headlines im Logo-Brush-Script — ROT primär.
line-height mit Luft, damit die Unterlängen des Scripts (g, y, p) nicht abgeschnitten werden. */
h1, h2 {
font-family: var(--ff-script); font-weight: 400;
line-height: 1.18; letter-spacing: .01em; color: var(--red);
padding-bottom: .08em;
text-wrap: balance;
}
h3 { font-family: var(--ff-label); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; line-height: 1.15; }
h1 { font-size: clamp(2.6rem, 9.5vw, 4.6rem); }
h2 { font-size: clamp(2.2rem, 7.5vw, 3.6rem); }
h3 { font-size: clamp(1.25rem, 4vw, 1.7rem); }
/* Akzentwort — GRÜN (wie "Palme") */
.gold-text { color: var(--green-hi); }
.serif { font-family: var(--ff-script); color: var(--green-hi); }
.lead { font-size: clamp(1.02rem, 2.6vw, 1.2rem); color: var(--cream); max-width: 62ch; opacity: .92; }
/* Gold-Pinstripe (Akzent) */
.pinstripe { height: 0; border: none; border-top: 2px solid var(--gold); position: relative; opacity: .7; }
.pinstripe::after { content: ""; position: absolute; left: 0; right: 0; top: 3px; border-top: 1px solid var(--gold-lo); }
/* [hidden] muss stärker sein als das display der Komponenten darunter */
[hidden] { display: none !important; }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
font-family: var(--ff-label); font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
font-size: 1rem; padding: .9rem 1.5rem; border-radius: 999px; white-space: nowrap;
background: linear-gradient(180deg, var(--red) 0%, var(--red-lo) 100%); color: #fff;
border: 1px solid var(--line-hi);
box-shadow: 0 10px 24px -12px rgba(217,40,31,.7), inset 0 1px 0 rgba(255,255,255,.22);
cursor: pointer;
transition: transform var(--t-fast) var(--ease-out),
box-shadow var(--t-base) var(--ease-out),
filter var(--t-base) var(--ease-out),
background-color var(--t-base) ease,
border-color var(--t-base) ease,
color var(--t-base) ease;
}
.btn:active { transform: scale(.97); }
.btn--ghost { background: transparent; color: var(--cream); border: 1.5px solid var(--gold); box-shadow: none; }
.btn--red { background: linear-gradient(180deg, var(--red) 0%, var(--red-lo) 100%); color: #fff; }
.btn--green {
background: linear-gradient(180deg, var(--green-hi) 0%, var(--green) 100%);
color: var(--green-ink); border-color: var(--line-hi);
}
@media (hover: hover) and (pointer: fine) {
.btn:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 16px 32px -14px rgba(217,40,31,.85); }
.btn:hover:active { transform: translateY(-2px) scale(.97); }
.btn--ghost:hover { background: rgba(224,189,99,.1); color: var(--gold-hi); filter: none; box-shadow: none; }
}
/* ---------- Header ---------- */
.site-header {
position: fixed; inset: 0 0 auto 0; z-index: 100;
display: flex; align-items: center; justify-content: space-between;
padding: .7rem var(--pad); border-bottom: 1px solid transparent;
transition: border-color var(--t-base) ease, opacity var(--t-base) ease;
}
/* Wichtig: backdrop-filter liegt auf einem Pseudo-Element, nicht auf dem Header selbst.
Ein Filter auf dem Header würde einen neuen Bezugsrahmen aufspannen – die mobile
Navigation (position: fixed) wäre dann nur so hoch wie der Header. */
.site-header::before {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background: rgba(0,0,0,.92); backdrop-filter: blur(10px);
opacity: 0; transition: opacity var(--t-base) ease;
}
.site-header.scrolled::before { opacity: 1; }
.site-header.scrolled { border-bottom-color: var(--gold); }
.site-header.scrolled .brand img { transform: scale(.82); }
.site-header.scrolled .brand b { transform: scale(.94); }
.site-header > * { position: relative; z-index: 1; }
.brand { display: flex; align-items: center; gap: .6rem; }
.brand img {
width: 50px; height: 50px; object-fit: contain;
filter: drop-shadow(0 3px 6px rgba(0,0,0,.6));
transform-origin: left center;
transition: transform var(--t-base) var(--ease-out);
}
.brand b {
font-family: var(--ff-script); font-weight: 400; font-size: 1.5rem; color: var(--red); line-height: 1.3;
transform-origin: left center;
transition: transform var(--t-base) var(--ease-out);
}
.brand b span { color: var(--green-hi); }
.nav { display: flex; align-items: center; gap: 1.4rem; }
.nav a {
font-family: var(--ff-label); font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
font-size: .82rem; color: var(--cream); position: relative; padding: .2rem 0;
transition: color var(--t-base) ease;
}
.nav a::after {
content: ""; position: absolute; left: 0; bottom: -3px; height: 2px; width: 100%;
background: var(--gold-grad);
transform: scaleX(0); transform-origin: left center;
transition: transform var(--t-base) var(--ease-out);
}
.nav a.active { color: var(--red-hi); }
.nav a.active::after { transform: scaleX(1); }
.nav .btn { padding: .55rem 1.1rem; font-size: .8rem; }
.nav .btn::after { display: none; }
@media (hover: hover) and (pointer: fine) {
.nav a:hover { color: var(--red-hi); }
.nav a:hover::after { transform: scaleX(1); }
.nav .btn:hover { color: #fff; }
}
.nav-toggle {
display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
background: none; border: 0; cursor: pointer; width: 44px; height: 44px;
}
.nav-toggle span {
display: block; width: 24px; height: 2.5px; background: var(--gold); margin: 0 auto;
transition: transform var(--t-base) var(--ease-out), opacity var(--t-fast) ease;
}
/* ---------- Hero ---------- */
.hero {
position: relative; min-height: 100svh; display: flex; align-items: center;
padding: 5.6rem 0 3.4rem; overflow: hidden; background: #000;
border-bottom: 1px solid var(--gold);
}
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; filter: saturate(1.05) contrast(1.02) brightness(.9); }
.hero__scrim {
position: absolute; inset: 0; z-index: 1; pointer-events: none;
background:
radial-gradient(120% 55% at 50% 116%, rgba(226,129,29,.6) 0%, rgba(226,129,29,.16) 34%, transparent 60%),
linear-gradient(180deg, rgba(0,0,0,.74) 0%, rgba(0,0,0,.52) 38%, rgba(0,0,0,.86) 84%, rgba(0,0,0,.6) 100%),
radial-gradient(60% 45% at 50% 44%, rgba(0,0,0,0) 0%, rgba(0,0,0,.32) 100%);
}
.hero__glow {
position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .35;
background: conic-gradient(from 210deg at 50% 46%, transparent 0deg, rgba(224,189,99,.10) 6deg, transparent 12deg, transparent 34deg, rgba(224,189,99,.07) 40deg, transparent 46deg);
mix-blend-mode: screen;
}
.hero::before, .hero::after {
content: ""; position: absolute; bottom: -4px; z-index: 2; width: 150px; height: 210px;
background: url("../img/palm.svg") no-repeat bottom/contain; opacity: .8; pointer-events: none;
}
.hero::before { left: -30px; transform: scaleX(-1); }
.hero::after { right: -26px; }
.hero__inner { position: relative; z-index: 3; display: grid; gap: 1.6rem; width: 100%; text-align: center; }
.hero__content { max-width: 46rem; margin-inline: auto; }
.hero h1 { color: var(--red); margin: .3rem 0 .1rem; text-shadow: 0 4px 24px rgba(0,0,0,.8); }
.hero__sub {
font-family: var(--ff-script); color: var(--green-hi);
font-size: clamp(1.3rem, 5vw, 2.3rem); line-height: 1.3; margin-bottom: .7rem;
text-shadow: 0 4px 24px rgba(0,0,0,.8);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.3rem; justify-content: center; }
.hero__cta .btn { width: 100%; }
.hero__badge-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: 1.5rem; }
.hero__badge { padding: .7rem .6rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(0,0,0,.55); backdrop-filter: blur(4px); text-align: center; }
.hero__badge b { display: block; font-family: var(--ff-impact); font-size: 1.35rem; color: var(--gold); line-height: 1.2; }
.hero__badge span { font-family: var(--ff-label); font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); line-height: 1.3; display: block; }
.hero__logo-wrap { position: relative; display: grid; place-items: center; order: -1; }
.hero__logo-wrap::before {
content: ""; position: absolute; width: 128%; aspect-ratio: 1; border-radius: 50%;
background: conic-gradient(from 0deg, transparent, rgba(224,189,99,.35), transparent 22%, transparent 50%, rgba(224,189,99,.22), transparent 72%);
animation: spin 24s linear infinite;
}
.hero__logo-wrap img { position: relative; width: min(210px, 54vw); height: auto; filter: drop-shadow(0 24px 44px rgba(0,0,0,.85)); }
@keyframes spin { to { transform: rotate(360deg); } }
/* ---------- Sections ---------- */
section { position: relative; }
.sec { padding-block: clamp(3rem, 11vw, 6rem); }
.sec__head { max-width: 62ch; margin-bottom: 2.2rem; }
.sec__head h2 { margin: .4rem 0 .8rem; color: var(--red); }
.sec__head .kicker + h2 { margin-top: .7rem; }
.sec--alt { background: #070707; border-block: 1px solid var(--line); }
/* Vertrauen: Haarlinien-Raster statt vier gleicher Kästen */
.trust { display: grid; gap: 0; border-top: 1px solid var(--line); }
.trust__item {
display: grid; grid-template-columns: 40px 1fr; align-items: start; gap: .3rem 1.1rem;
padding: 1.4rem .2rem; border-bottom: 1px solid var(--line);
}
.trust__item .ic { grid-row: span 2; width: 34px; height: 34px; color: var(--gold); margin-top: .15rem; }
.trust__item b { font-family: var(--ff-label); font-weight: 700; font-size: 1.05rem; text-transform: uppercase; color: var(--green-hi); line-height: 1.2; }
.trust__item span { color: var(--muted); font-size: .92rem; }
/* Karten */
.cards { display: grid; gap: 1.2rem; }
.card {
position: relative; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.7rem 1.5rem 1.9rem;
overflow: hidden; background: var(--panel); box-shadow: 0 16px 40px -24px #000;
transition: transform var(--t-base) var(--ease-out), border-color var(--t-base) ease, box-shadow var(--t-base) ease;
}
.card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, var(--red), var(--gold) 50%, var(--green)); }
.card .cls { font-family: var(--ff-impact); font-size: 3.4rem; line-height: 1; color: var(--red); opacity: .16; position: absolute; top: .6rem; right: 1.1rem; }
.card__ic { width: 44px; height: 44px; color: var(--gold); margin-bottom: .9rem; position: relative; }
.card h3 { position: relative; color: var(--red); }
.card h3 span { display: block; font-family: var(--ff-script); text-transform: none; font-size: 1.15em; color: var(--green-hi); letter-spacing: 0; margin-top: .1em; line-height: 1.35; }
.card p { color: var(--muted); margin: .7rem 0 1rem; position: relative; }
.card ul { list-style: none; display: grid; gap: .45rem; margin-bottom: 1.2rem; position: relative; }
.card li { display: flex; gap: .6rem; font-size: .94rem; align-items: baseline; }
.card li::before {
content: ""; flex: none; width: .55em; height: .55em; margin-top: .1em; background: var(--gold);
-webkit-mask: var(--ic-chevron) center/contain no-repeat; mask: var(--ic-chevron) center/contain no-repeat;
}
.card .more { font-family: var(--ff-label); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: .84rem; color: var(--green-hi); display: inline-flex; gap: .4rem; position: relative; transition: color var(--t-base) ease; }
@media (hover: hover) and (pointer: fine) {
.card:hover { transform: translateY(-5px); border-color: var(--line-hi); box-shadow: 0 30px 60px -30px #000; }
.card .more:hover { color: var(--red-hi); }
}
/* Ikonen als Masken (gleiche Strichstärke wie die SVG-Familie) */
:root {
--ic-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
--ic-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 6'/%3E%3C/svg%3E");
}
/* Split */
.split { display: grid; gap: 1.6rem; align-items: center; }
.split__media { position: relative; aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: 0 20px 50px -28px #000; }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.ph { display: grid; place-items: center; text-align: center; height: 100%; color: var(--muted);
background: repeating-linear-gradient(45deg, #0d0d0d, #0d0d0d 12px, #141414 12px, #141414 24px); }
.ph small { display: block; margin-top: .4rem; font-family: var(--ff-label); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.ph .ic { width: 40px; height: 40px; color: var(--gold); opacity: .5; }
/* Ablauf: durchgehende Gold-Schiene statt vier gleicher Kästen */
.steps { display: grid; gap: 0; counter-reset: s; position: relative; }
.step { position: relative; padding: 0 0 2rem 3.4rem; }
.step::before {
counter-increment: s; content: counter(s, decimal-leading-zero);
position: absolute; left: 0; top: -.1rem; z-index: 2;
width: 2.3rem; height: 2.3rem; display: grid; place-items: center;
font-family: var(--ff-impact); font-size: 1.05rem; line-height: 1;
color: var(--gold-hi); background: var(--ink);
border: 1px solid var(--line-hi); border-radius: 50%;
}
.step::after {
content: ""; position: absolute; left: calc(1.15rem - .5px); top: 2.4rem; bottom: -.1rem;
width: 1px; background: linear-gradient(180deg, var(--gold-lo), rgba(224,189,99,.12));
}
.step:last-child { padding-bottom: 0; }
.step:last-child::after { display: none; }
.step h3 { font-size: 1.15rem; margin-bottom: .3rem; color: var(--red); padding-top: .25rem; }
.step p { color: var(--muted); font-size: .94rem; max-width: 46ch; }
/* CTA-Band */
.cta-band {
position: relative; overflow: hidden; text-align: center; padding-block: clamp(3rem, 10vw, 5rem);
background: radial-gradient(100% 80% at 50% 128%, rgba(226,129,29,.42), rgba(226,129,29,.1) 42%, transparent 64%), #060606;
border-block: 1px solid var(--gold);
}
.cta-band::before, .cta-band::after { content: ""; position: absolute; bottom: -4px; width: 120px; height: 170px; background: url("../img/palm.svg") no-repeat bottom/contain; opacity: .8; }
.cta-band::before { left: -24px; transform: scaleX(-1); }
.cta-band::after { right: -22px; }
.cta-band h2 { color: var(--red); margin-bottom: .7rem; position: relative; }
.cta-band p { color: var(--cream); opacity: .92; max-width: 50ch; margin: 0 auto 1.6rem; position: relative; }
.cta-band .btn { margin: .35rem; position: relative; }
/* Team */
.team { display: grid; gap: 1.2rem; }
.member { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); transition: transform var(--t-base) var(--ease-out), border-color var(--t-base) ease; }
.member__img { aspect-ratio: 3/3.3; }
.member__img img { width: 100%; height: 100%; object-fit: cover; }
.member__body { padding: 1.1rem 1.3rem 1.4rem; }
.member__body b { font-family: var(--ff-script); font-weight: 400; font-size: 1.7rem; color: var(--red); display: block; line-height: 1.35; }
.member__body .role { font-family: var(--ff-label); color: var(--green-hi); font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: .6rem; }
.member__body p { color: var(--muted); font-size: .92rem; }
@media (hover: hover) and (pointer: fine) {
.member:hover { transform: translateY(-4px); border-color: var(--line-hi); }
}
/* Hall of Fame */
.hof-note { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--ff-label); font-weight: 600; font-size: .8rem; color: var(--green-hi); text-transform: uppercase; letter-spacing: .1em; }
.hof-month {
font-family: var(--ff-label); font-weight: 700; text-transform: uppercase; letter-spacing: .14em;
font-size: 1rem; color: var(--gold); margin-bottom: 1.1rem;
display: flex; align-items: center; gap: .9rem;
}
.hof-month::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--gold-lo), transparent); }
.hof-month small { font-family: var(--ff-body); font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); font-size: .82rem; }
.hof { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .8rem; }
.hof__img {
display: block; position: relative; overflow: hidden; cursor: zoom-in;
aspect-ratio: 3/4; border: 1px solid var(--line); border-radius: 12px; background: var(--panel);
transition: transform var(--t-base) var(--ease-out), border-color var(--t-base) ease;
}
.hof__img img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
.hof__img:hover { transform: translateY(-4px); border-color: var(--line-hi); }
}
.hof__img:active { transform: scale(.98); }
.hof__img:active picture { opacity: .9; }
/* Preise */
.pricing { display: grid; gap: 1.2rem; align-items: start; }
.price { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.9rem 1.6rem 1.7rem; background: var(--panel); position: relative; }
.price.featured { border-color: var(--gold); box-shadow: 0 24px 60px -30px rgba(224,189,99,.35); }
.price .tag {
position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
background: var(--red); color: #fff; font-family: var(--ff-label); font-weight: 600;
font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; padding: .25rem .9rem; border-radius: 999px;
white-space: nowrap;
}
.price .tag--green { background: var(--green-hi); color: var(--green-ink); }
.price h3 { color: var(--green-hi); }
.price .sub { color: var(--muted); font-size: .9rem; margin-bottom: .8rem; }
.price .amount { font-family: var(--ff-impact); font-size: 2.6rem; margin: .5rem 0 .2rem; color: var(--red); line-height: 1.1; }
.price .amount del { color: var(--muted); font-size: .46em; margin-right: .4rem; }
.price .amount small { font-family: var(--ff-label); font-size: .3em; color: var(--muted); letter-spacing: .04em; }
.price ul { list-style: none; display: grid; gap: .55rem; margin: 1.1rem 0 1.5rem; }
.price li { display: flex; gap: .6rem; color: var(--muted); font-size: .94rem; align-items: baseline; }
.price li::before {
content: ""; flex: none; width: .7em; height: .7em; background: var(--green-hi);
-webkit-mask: var(--ic-check) center/contain no-repeat; mask: var(--ic-check) center/contain no-repeat;
}
/* Preis-Aufschlüsselung je Paket */
.price-list { list-style: none; display: grid; gap: 0; margin: .3rem 0 1.1rem; }
.price-list li { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; padding: .55rem 0; border-bottom: 1px dashed var(--line); }
.price-list li::before { content: none; }
.price-list span { color: var(--cream); font-size: .95rem; line-height: 1.25; }
.price-list span small { display: block; color: var(--muted); font-size: .76rem; }
.price-list b { color: var(--gold); font-family: var(--ff-label); font-weight: 600; white-space: nowrap; }
.fineprint { list-style: none; display: grid; gap: .3rem; margin: .1rem 0 1.3rem; }
.fineprint li { color: var(--muted); font-size: .8rem; padding-left: 1rem; position: relative; }
.fineprint li::before { content: "*"; position: absolute; left: 0; color: var(--gold); }
/* Einzelpreise: Karten statt Tabellenzeilen */
.rate-grid { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.rate-card { padding: 1.1rem 1.2rem 1.2rem; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.rate-card b { display: block; font-family: var(--ff-impact); font-size: 1.9rem; color: var(--gold); line-height: 1.15; }
.rate-card span { display: block; font-family: var(--ff-label); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: .84rem; color: var(--cream); margin-top: .2rem; }
.rate-card small { color: var(--muted); font-size: .78rem; }
.note-box { border: 1.5px dashed var(--gold); border-radius: var(--radius); padding: 1.2rem 1.4rem; background: rgba(224,189,99,.06); color: var(--muted); display: flex; gap: .9rem; align-items: flex-start; }
.note-box .ic { color: var(--gold); width: 26px; height: 26px; flex: none; }
.note-box b { color: var(--cream); }
.note-box a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
/* Info / FAQ */
.info-grid { display: grid; gap: 1rem; }
.info { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; background: var(--panel); }
.info .ic { width: 30px; height: 30px; color: var(--gold); margin-bottom: .6rem; }
.info b { font-family: var(--ff-label); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--green-hi); display: block; margin-bottom: .3rem; }
.info a, .info p { color: var(--muted); }
.info a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-hi); transition: color var(--t-base) ease; }
@media (hover: hover) and (pointer: fine) { .info a:hover { color: var(--gold-hi); } }
.faq { display: grid; gap: .8rem; max-width: 820px; }
.faq details { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.faq summary { list-style: none; cursor: pointer; padding: 1.1rem 1.3rem; font-family: var(--ff-label); font-weight: 600; font-size: 1.02rem; color: var(--cream); display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 1rem; height: 1rem; background: var(--gold);
-webkit-mask: var(--ic-plus) center/contain no-repeat; mask: var(--ic-plus) center/contain no-repeat;
transition: transform var(--t-base) var(--ease-out), background-color var(--t-base) ease; }
.faq details[open] summary::after { transform: rotate(135deg); background: var(--red-hi); }
.faq p { padding: 0 1.3rem 1.2rem; color: var(--muted); }
.faq p a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
:root { --ic-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
/* Formular */
.form { display: grid; gap: 1rem; max-width: 760px; }
.form .row { display: grid; gap: 1rem; }
.form label { font-family: var(--ff-label); font-weight: 600; font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--green-hi); display: block; margin-bottom: .35rem; }
.form input, .form textarea, .form select {
width: 100%; background: #0a0a0a; border: 1px solid var(--line); border-radius: 12px;
padding: .8rem 1rem; color: var(--cream); font: inherit; font-size: .95rem;
transition: border-color var(--t-base) ease, box-shadow var(--t-base) ease;
}
.form input::placeholder, .form textarea::placeholder { color: var(--faint); opacity: 1; }
.form input:focus, .form textarea:focus, .form select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(224,189,99,.16); }
.form input:focus-visible, .form textarea:focus-visible, .form select:focus-visible { outline: none; }
.form input[aria-invalid="true"], .form textarea[aria-invalid="true"] { border-color: var(--red-hi); }
.form .hint { color: var(--muted); font-size: .78rem; margin-top: .35rem; }
.form .err { color: var(--red-hi); font-size: .78rem; margin-top: .35rem; min-height: 0; }
.form .check, .step-q .check {
display: flex; gap: .6rem; align-items: flex-start;
font-family: var(--ff-body); font-weight: 400; font-size: .86rem;
text-transform: none; letter-spacing: 0; line-height: 1.5;
color: var(--muted); margin-bottom: 0;
}
.form .check input, .step-q .check input { width: 1.15rem; height: 1.15rem; flex: none; margin-top: .15rem; accent-color: var(--green); }
.form .check a, .step-q .check a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.hp { position: absolute !important; left: -9999px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden; }
.form-status {
display: none; gap: .7rem; align-items: flex-start;
border: 1px solid var(--line-hi); border-radius: 12px; padding: .95rem 1.1rem;
background: rgba(224,189,99,.07); color: var(--cream); font-size: .92rem;
}
.form-status.is-visible { display: flex; }
.form-status.is-error { border-color: var(--red-hi); background: rgba(217,40,31,.1); }
.form-status .ic { flex: none; width: 22px; height: 22px; color: var(--gold); margin-top: .1rem; }
.form-status.is-error .ic { color: var(--red-hi); }
.form-status a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
/* Sub-Hero */
.subhero {
padding: 8.5rem 0 3.2rem; text-align: center; border-bottom: 1px solid var(--gold); position: relative; overflow: hidden;
background: radial-gradient(80% 70% at 50% 0%, rgba(217,40,31,.14), transparent 62%), #000;
}
.subhero h1 { color: var(--red); font-size: clamp(2.4rem, 10vw, 4.4rem); }
.subhero p { color: var(--muted); max-width: 58ch; margin: .8rem auto 0; }
.crumbs { font-family: var(--ff-label); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: .8rem; }
.crumbs a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-hi); transition: color var(--t-base) ease; }
@media (hover: hover) and (pointer: fine) { .crumbs a:hover { color: var(--gold); } }
/* Prose */
.prose { max-width: 78ch; }
.prose h2 { font-size: clamp(1.8rem, 5vw, 2.3rem); margin: 2.4rem 0 .7rem; color: var(--red); }
.prose h3 { font-size: 1.15rem; margin: 1.6rem 0 .5rem; color: var(--green-hi); }
.prose p, .prose li { color: var(--muted); margin-bottom: .8rem; }
.prose ul { padding-left: 1.2rem; }
.prose a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.prose hr { border: none; border-top: 1px solid var(--line); margin: 3rem 0; }
/* ---------- Footer ---------- */
/* Kompletter Footer als Sonnenuntergang (dunkel oben -> orange ganz unten).
Die hellen Stops liegen bewusst erst im untersten Achtel, damit der Text
darüber jederzeit den Kontrast hält. */
.site-footer {
position: relative; overflow: hidden; border-top: 1px solid var(--gold);
padding: clamp(2.4rem, 8vw, 4rem) 0 0;
background:
radial-gradient(38% 26% at 50% 100%, rgba(255,216,138,.72), rgba(226,129,29,.25) 46%, transparent 74%),
linear-gradient(180deg, #000 0%, #050302 46%, #180a04 66%, #4d1f0d 82%, #9a4a1c 92%, #ea8322 100%);
}
.site-footer::before, .site-footer::after {
content: ""; position: absolute; bottom: -4px; z-index: 1; width: 155px; height: 200px;
background: url("../img/palm.svg") no-repeat bottom/contain; pointer-events: none;
}
.site-footer::before { left: -14px; transform: scaleX(-1); }
.site-footer::after { right: -12px; }
.footer-sea {
position: absolute; left: 0; right: 0; bottom: 0; height: 70px; z-index: 1; pointer-events: none;
background: linear-gradient(180deg, transparent 0%, rgba(120,60,25,.35) 30%, rgba(226,129,29,.5) 100%);
mix-blend-mode: screen;
}
.site-footer .container, .site-footer .footer-bottom { position: relative; z-index: 2; }
.footer-grid { display: grid; gap: 1.8rem; padding-bottom: 180px; }
.footer-grid h4 { font-family: var(--ff-label); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .9rem; color: var(--green-hi); margin-bottom: .9rem; }
.footer-grid a, .footer-grid p { color: var(--cream); opacity: .88; font-size: .9rem; display: block; margin-bottom: .45rem; text-shadow: 0 1px 5px rgba(0,0,0,.85); transition: color var(--t-base) ease, opacity var(--t-base) ease; }
@media (hover: hover) and (pointer: fine) { .footer-grid a:hover { color: var(--red-hi); opacity: 1; } }
.footer-brand img { width: 76px; height: auto; margin-bottom: .9rem; filter: drop-shadow(0 4px 8px rgba(0,0,0,.6)); }
.footer-brand p { max-width: 36ch; }
.footer-bottom {
padding: 1.1rem var(--pad); display: grid; gap: .5rem; text-align: center;
color: var(--cream); font-size: .8rem;
background: rgba(0,0,0,.75); backdrop-filter: blur(2px);
}
.footer-bottom a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(242,239,232,.35); }
.footer-bottom .made a { color: var(--gold); text-decoration-color: var(--line-hi); }
/* Kontakt-Passage mit vollflächigem Foto-Hintergrund */
.sec--photo { position: relative; overflow: hidden; }
.sec--photo::before {
content: ""; position: absolute; inset: 0; z-index: 0; background-color: #0a0a0a;
background-image:
linear-gradient(180deg, rgba(0,0,0,.74), rgba(0,0,0,.82) 55%, rgba(0,0,0,.74)),
url("../img/form-bg-1200.jpg");
background-image:
linear-gradient(180deg, rgba(0,0,0,.74), rgba(0,0,0,.82) 55%, rgba(0,0,0,.74)),
image-set(url("../img/form-bg-1200.webp") type("image/webp"), url("../img/form-bg-1200.jpg") type("image/jpeg"));
background-position: center; background-size: cover; background-repeat: no-repeat;
}
.sec--photo > * { position: relative; z-index: 1; }
.sec--photo .form, .sec--photo .wizard { background: rgba(8,8,8,.66); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.4rem, 5vw, 2.2rem); backdrop-filter: blur(3px); }
.sec--photo .info { background: rgba(8,8,8,.68); backdrop-filter: blur(3px); }
/* ---------- Vinyl-Musikplayer ---------- */
.hero__logo-wrap.is-player { cursor: pointer; }
.hero__logo-wrap.is-player::after {
content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
z-index: 4; width: 72px; height: 72px;
background: rgba(0,0,0,.5) var(--ic-play) center/28px no-repeat;
border: 2px solid var(--gold); border-radius: 50%;
transition: opacity var(--t-base) ease; pointer-events: none;
}
.music-on .hero__logo-wrap.is-player::after { opacity: 0; }
.music-on .hero__logo-wrap.is-player img { animation: spin 5.5s linear infinite; }
:root {
--ic-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M8 5.2v13.6a1 1 0 0 0 1.53.85l10.6-6.8a1 1 0 0 0 0-1.7L9.53 4.35A1 1 0 0 0 8 5.2z'/%3E%3C/svg%3E");
--ic-pause: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Crect x='6.5' y='4.5' width='3.8' height='15' rx='1.2'/%3E%3Crect x='13.7' y='4.5' width='3.8' height='15' rx='1.2'/%3E%3C/svg%3E");
}
.music-player { position: fixed; left: 16px; bottom: 16px; z-index: 200; display: flex; align-items: center; gap: .6rem; }
.music-vinyl {
position: relative; width: 60px; height: 60px; border-radius: 50%; padding: 0; cursor: pointer;
border: 2px solid var(--gold); background: #000; overflow: hidden; box-shadow: 0 8px 22px rgba(0,0,0,.6);
transition: transform var(--t-fast) var(--ease-out);
}
.music-vinyl:active { transform: scale(.94); }
.music-vinyl img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; animation: spin 3.2s linear infinite; animation-play-state: paused; }
.music-player.playing .music-vinyl img { animation-play-state: running; }
.music-ico {
position: absolute; inset: 0; background: rgba(0,0,0,.45) var(--ic-play) center/20px no-repeat;
transition: opacity var(--t-base) ease;
}
.music-player.playing .music-ico { background-image: var(--ic-pause); opacity: 0; }
@media (hover: hover) and (pointer: fine) {
.music-player.playing .music-vinyl:hover .music-ico { opacity: 1; }
}
.music-label { font-family: var(--ff-script); color: var(--gold); font-size: 1.3rem; line-height: 1.3; text-shadow: 0 2px 6px #000; }
@media (max-width: 560px) { .music-label { display: none; } .music-vinyl { width: 52px; height: 52px; } .music-player { left: 12px; bottom: 12px; } }
/* ---------- Lightbox (reines CSS, per :target) ---------- */
.lb-group { position: static; }
.lb { position: fixed; inset: 0; z-index: 300; display: none; align-items: center; justify-content: center; }
.lb:target { display: flex; }
.lb__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.93); cursor: zoom-out; }
.lb__fig { position: relative; z-index: 2; display: flex; max-width: 86vw; max-height: 86vh; }
.lb__fig img { max-width: 100%; max-height: 86vh; width: auto; height: auto; object-fit: contain; border: 3px solid var(--gold); border-radius: 8px; box-shadow: 0 24px 70px rgba(0,0,0,.8); }
.lb__close, .lb__nav {
position: absolute; z-index: 3; display: grid; place-items: center;
background: var(--gold); color: var(--ink); border: 2px solid var(--ink);
box-shadow: 0 6px 16px rgba(0,0,0,.5);
font-family: var(--ff-label); font-weight: 700; line-height: 1;
transition: background-color var(--t-base) ease, transform var(--t-fast) var(--ease-out);
}
.lb__close { top: 16px; right: 18px; width: 46px; height: 46px; border-radius: 50%; font-size: 1.5rem; }
.lb__nav { top: 50%; transform: translateY(-50%); width: 54px; height: 54px; border-radius: 50%; font-size: 1.9rem; }
.lb__prev { left: 2.5vw; }
.lb__next { right: 2.5vw; }
.lb__close:active, .lb__nav:active { transform: scale(.94); }
.lb__nav:active { transform: translateY(-50%) scale(.94); }
@media (hover: hover) and (pointer: fine) { .lb__close:hover, .lb__nav:hover { background: var(--gold-hi); } }
@media (max-width: 560px) { .lb__nav { width: 46px; height: 46px; font-size: 1.5rem; } .lb__prev { left: 4px; } .lb__next { right: 4px; } .lb__fig { max-width: 94vw; } }
/* Bei offener Lightbox tritt der Header zurück, sonst überlagern sich
Menü-Button und Schließen-Kreuz in derselben Ecke. */
body:has(.lb:target) .site-header { opacity: 0; pointer-events: none; }
body:has(.lb:target) { overflow: hidden; }
/* ---------- Reveal ----------
Nur wenn JavaScript läuft: sonst bleibt der Inhalt sichtbar. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--t-slow) ease, transform var(--t-slow) var(--ease-out); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal[data-d="1"] { transition-delay: .06s; }
.js .reveal[data-d="2"] { transition-delay: .12s; }
.js .reveal[data-d="3"] { transition-delay: .18s; }
/* =========================================================
MIN-WIDTH BREAKPOINTS (Mobile-First hochskaliert)
========================================================= */
@media (min-width: 560px) {
.hero__cta .btn { width: auto; }
.hero__badge-row { gap: .7rem; margin-top: 2rem; }
.hero__badge { padding: .9rem 1rem; border-radius: var(--radius); text-align: left; }
.hero__badge b { font-size: 1.7rem; }
.hero__badge span { font-size: .7rem; letter-spacing: .1em; }
.trust { grid-template-columns: repeat(2, 1fr); column-gap: 2.4rem; }
.cards { grid-template-columns: repeat(2, 1fr); }
.team { grid-template-columns: repeat(2, 1fr); }
.pricing { grid-template-columns: repeat(3, 1fr); }
.info-grid { grid-template-columns: repeat(3, 1fr); }
.form .row { grid-template-columns: 1fr 1fr; }
.hof { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
.footer-bottom { grid-template-columns: 1fr auto 1fr; align-items: center; text-align: left; }
.footer-bottom > :nth-child(1) { justify-self: start; }
.footer-bottom > :nth-child(2) { justify-self: center; text-align: center; }
.footer-bottom > :nth-child(3) { justify-self: end; text-align: right; }
}
@media (min-width: 860px) {
body { font-size: 17px; }
.nav { gap: 1.7rem; }
.nav-toggle { display: none; }
.hero { padding-top: 7.5rem; padding-bottom: 4.5rem; }
.hero__inner { grid-template-columns: 1.1fr .9fr; text-align: left; align-items: center; gap: 2.6rem; }
.hero__content { margin-inline: 0; }
.hero__cta { justify-content: flex-start; }
.hero__badge-row { margin-top: 2.4rem; }
.hero__logo-wrap { order: 0; }
.hero__logo-wrap img { width: min(380px, 32vw); }
.hero::before, .hero::after { width: 200px; height: 280px; opacity: .7; }
.trust { grid-template-columns: repeat(4, 1fr); column-gap: 2rem; }
.cards { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.steps { grid-template-columns: repeat(2, 1fr); column-gap: 3rem; }
.team { grid-template-columns: repeat(3, 1fr); }
.split { grid-template-columns: 1fr 1fr; gap: 3rem; }
.split--reverse .split__media { order: -1; }
.sec__head { margin-bottom: 3rem; }
.footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2.2rem; }
}
@media (min-width: 1100px) {
.steps { grid-template-columns: repeat(4, 1fr); column-gap: 2rem; }
.step { padding-bottom: 0; }
.step::after { display: none; }
.steps::before {
content: ""; position: absolute; left: 1.15rem; right: 1.15rem; top: 1.1rem; height: 1px;
background: linear-gradient(90deg, var(--gold-lo), rgba(224,189,99,.45) 50%, rgba(224,189,99,.12));
}
}
@media (max-width: 859px) {
.nav {
position: fixed; inset: 0 0 0 auto; width: min(320px, 84%);
flex-direction: column; justify-content: center; gap: 1.6rem;
background: #0a0a0a; border-left: 1px solid var(--gold);
transform: translateX(100%); visibility: hidden; z-index: 110;
transition: transform var(--t-base) var(--ease-out), visibility 0s linear var(--t-base);
}
.nav.open { transform: none; visibility: visible; transition: transform var(--t-base) var(--ease-out), visibility 0s; }
.nav a { font-size: 1.05rem; }
.nav-toggle { z-index: 120; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
body.nav-open { overflow: hidden; }
}
/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
.js .reveal { opacity: 1; transform: none; }
.hero__logo-wrap::before { animation: none; }
}
/* ---------- Druck ---------- */
@media print {
.site-header, .nav-toggle, .music-player, .bg-script, .hero__video, .hero__glow,
.cta-band, .lb, .skip, .footer-sea { display: none !important; }
body { background: #fff; color: #000; font-size: 11pt; }
body::after { display: none; }
.site-footer { background: none; border-top: 1px solid #999; padding-bottom: 0; }
.site-footer::before, .site-footer::after { display: none; }
.footer-grid { padding-bottom: 0; }
.footer-grid a, .footer-grid p, .footer-bottom { color: #000; text-shadow: none; background: none; }
h1, h2, h3, .price .amount, .rate-card b, .hero__badge b { color: #000; }
.card, .price, .info, .note-box, .rate-card, .trust__item { border-color: #999; background: none; break-inside: avoid; }
.card p, .price li, .info p, .trust__item span, .step p, .lead { color: #222; }
a { text-decoration: underline; }
.prose a::after, .footer-grid a::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; }
.js .reveal { opacity: 1 !important; transform: none !important; }
}
/* =========================================================
OFFENE ANGABEN
Alles, was die Fahrschule vor dem Go-Live noch liefert, ist
einheitlich markiert – so ist auf einen Blick sichtbar, was fehlt.
Nach dem Eintragen: … durch den Wert ersetzen.
========================================================= */
.todo {
display: inline-block;
font-family: var(--ff-label); font-weight: 600; font-size: .78em;
text-transform: uppercase; letter-spacing: .06em;
color: var(--gold-hi); background: rgba(224,189,99,.09);
border: 1px dashed var(--gold-lo); border-radius: 6px;
padding: .1em .5em; line-height: 1.5;
}
@media print { .todo { color: #000; border-color: #999; background: none; } }
/* =========================================================
KARTE — Zwei-Klick-Lösung (DSGVO)
Vor dem Klick geht keine einzige Anfrage an Google. Erst wenn
die Besucherin bewusst zustimmt, wird der iframe eingesetzt.
========================================================= */
.map {
position: relative; overflow: hidden;
border: 1px solid var(--line); border-radius: var(--radius);
background: var(--panel); aspect-ratio: 16/10;
}
.map__consent {
position: absolute; inset: 0; display: grid; place-content: center;
gap: .9rem; text-align: center; padding: clamp(1.4rem, 5vw, 2.4rem);
background:
radial-gradient(90% 70% at 50% 0%, rgba(217,40,31,.12), transparent 65%),
repeating-linear-gradient(45deg, #0b0b0b, #0b0b0b 14px, #101010 14px, #101010 28px);
}
.map__consent .ic { width: 40px; height: 40px; color: var(--gold); margin: 0 auto; }
.map__consent b {
display: block; font-family: var(--ff-label); font-weight: 700;
text-transform: uppercase; letter-spacing: .06em; color: var(--green-hi); font-size: 1rem;
}
.map__consent p { color: var(--muted); font-size: .88rem; max-width: 46ch; margin-inline: auto; line-height: 1.55; }
.map__consent .btn { justify-self: center; }
.map__direct {
font-family: var(--ff-label); font-weight: 600; text-transform: uppercase;
letter-spacing: .08em; font-size: .78rem; color: var(--gold);
text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-hi);
transition: color var(--t-base) ease;
}
@media (hover: hover) and (pointer: fine) { .map__direct:hover { color: var(--gold-hi); } }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.map.is-loaded .map__consent { display: none; }
@media (min-width: 860px) { .map { aspect-ratio: 21/9; } }
@media print { .map { display: none; } }
/* =========================================================
SOCIAL MEDIA
========================================================= */
.social { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1.1rem; }
.social a, .social span.social__todo {
display: inline-grid; place-items: center; width: 42px; height: 42px;
border: 1px solid var(--line-hi); border-radius: 50%;
color: var(--cream); background: rgba(0,0,0,.35);
transition: transform var(--t-fast) var(--ease-out), border-color var(--t-base) ease,
color var(--t-base) ease, background-color var(--t-base) ease;
}
.social svg { width: 20px; height: 20px; }
.social a:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
.social a:hover { color: var(--gold-hi); border-color: var(--gold); background: rgba(224,189,99,.12); transform: translateY(-2px); }
}
.social span.social__todo { color: var(--gold-lo); border-style: dashed; }
.footer-grid .social a, .footer-grid .social span { margin-bottom: 0; }
/* =========================================================
BESUCHEN — Karte und Öffnungszeiten nebeneinander
========================================================= */
.visit { display: grid; gap: 1.2rem; margin-bottom: 2.2rem; align-items: stretch; }
.visit .map { aspect-ratio: 16/11; height: 100%; }
.hours {
border: 1px solid var(--line); border-radius: var(--radius);
padding: 1.5rem 1.5rem 1.6rem; background: rgba(8,8,8,.68); backdrop-filter: blur(3px);
}
.hours h3 { color: var(--green-hi); font-size: 1.05rem; margin-bottom: 1rem; }
.hours dl { display: grid; grid-template-columns: auto 1fr; gap: 0; }
.hours dt, .hours dd {
padding: .5rem 0; border-bottom: 1px dashed var(--line);
font-size: .95rem; line-height: 1.3;
}
.hours dt { color: var(--cream); padding-right: 1rem; }
.hours dd { color: var(--gold); font-family: var(--ff-label); font-weight: 600; text-align: right; white-space: nowrap; }
.hours dt.is-closed, .hours dd.is-closed { color: var(--muted); font-weight: 400; }
.hours dt:last-of-type, .hours dd:last-of-type { border-bottom: none; }
.hours__note { color: var(--muted); font-size: .84rem; margin-top: 1rem; line-height: 1.5; }
.hours__note a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
/* Telefon und E-Mail sollen in den Kontaktkarten herausstechen */
.info .contact-link {
display: inline-block; font-family: var(--ff-label); font-weight: 600;
font-size: 1.02rem; color: var(--cream); letter-spacing: .01em;
text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-hi);
transition: color var(--t-base) ease, text-decoration-color var(--t-base) ease;
}
@media (hover: hover) and (pointer: fine) {
.info .contact-link:hover { color: var(--gold-hi); text-decoration-color: var(--gold); }
}
@media (min-width: 860px) {
.visit { grid-template-columns: 1.55fr 1fr; gap: 1.5rem; }
.visit .map { aspect-ratio: auto; min-height: 340px; }
}
@media print {
.hours { border-color: #999; background: none; }
.hours dd { color: #000; }
}
/* =========================================================
ANFRAGE-ASSISTENT — eine Frage pro Schritt
Ohne JavaScript liegen alle Schritte untereinander und das
Formular funktioniert als ganz normales POST-Formular.
========================================================= */
.wizard { display: grid; gap: 1.2rem; max-width: 760px; margin-inline: auto; }
/* Fortschritt */
.wizard__bar { height: 3px; border-radius: 99px; background: rgba(224,189,99,.16); overflow: hidden; }
.wizard__fill {
display: block; height: 100%; width: 20%; border-radius: 99px;
background: var(--gold-grad); transform-origin: left center;
transition: width var(--t-slow) var(--ease-out);
}
.wizard__count {
font-family: var(--ff-label); font-weight: 600; text-transform: uppercase;
letter-spacing: .14em; font-size: .7rem; color: var(--muted); margin-top: -.6rem;
}
.wizard__count b { color: var(--gold); font-weight: 600; }
/* Der Rahmen wächst mit dem Schritt, statt zu springen.
Bewusste Ausnahme von der Regel "nur transform und opacity animieren":
Die Schritte sind unterschiedlich hoch, dafür gibt es keine Entsprechung
in transform. Die Animation läuft einmal pro Schrittwechsel auf einem
kleinen Teilbaum, nicht fortlaufend – der Reflow ist vertretbar,
ein springender Kasten wäre es nicht. */
.wizard__track { position: relative; transition: height var(--t-slow) var(--ease-out); }
.step-q { border: 0; padding: 0; margin: 0; display: grid; gap: .5rem; }
.step-q legend {
font-family: var(--ff-script); font-weight: 400; color: var(--red);
font-size: clamp(1.6rem, 5.5vw, 2.3rem); line-height: 1.25; padding: 0 0 .1em;
}
.step-q__hint { color: var(--muted); font-size: .92rem; margin-bottom: .7rem; max-width: 52ch; }
.step-q label {
font-family: var(--ff-label); font-weight: 600; font-size: .74rem;
text-transform: uppercase; letter-spacing: .08em; color: var(--green-hi); display: block;
}
.step-q .opt { color: var(--muted); text-transform: none; letter-spacing: 0; font-weight: 400; }
.step-q input[type="text"], .step-q input[type="email"], .step-q input[type="tel"], .step-q textarea {
width: 100%; background: #0a0a0a; border: 1px solid var(--line); border-radius: 12px;
padding: .95rem 1.1rem; color: var(--cream); font: inherit; font-size: 1rem;
transition: border-color var(--t-base) ease, box-shadow var(--t-base) ease;
}
.step-q input::placeholder, .step-q textarea::placeholder { color: var(--faint); opacity: 1; }
.step-q input:focus, .step-q textarea:focus {
outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(224,189,99,.16);
}
.step-q input:focus-visible, .step-q textarea:focus-visible { outline: none; }
.step-q[data-invalid] input, .step-q[data-invalid] textarea { border-color: var(--red-hi); }
.step-q__err { color: var(--red-hi); font-size: .86rem; min-height: 1.2em; }
/* Auswahlkacheln */
.choices { display: grid; gap: .7rem; grid-template-columns: repeat(2, 1fr); }
.step-q .choices .choice {
position: relative; display: grid; justify-items: center; gap: .15rem;
padding: 1.2rem .8rem 1rem; cursor: pointer; text-align: center;
border: 1px solid var(--line); border-radius: 14px; background: var(--panel);
text-transform: none; letter-spacing: 0; color: var(--cream);
transition: border-color var(--t-base) ease, background-color var(--t-base) ease,
transform var(--t-fast) var(--ease-out);
}
.step-q .choices .choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.step-q .choices .choice svg { width: 32px; height: 32px; color: var(--gold); margin-bottom: .4rem; }
.step-q .choices .choice b { font-family: var(--ff-label); font-weight: 700; text-transform: uppercase; font-size: .95rem; color: var(--cream); letter-spacing: .02em; }
.step-q .choices .choice span { font-family: var(--ff-body); font-size: .8rem; color: var(--muted); text-transform: none; letter-spacing: 0; }
.step-q .choices .choice:active { transform: scale(.97); }
.step-q .choices .choice:has(input:focus-visible) { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
.step-q .choices .choice:has(input:checked) { border-color: var(--gold); background: rgba(224,189,99,.09); }
.step-q .choices .choice:has(input:checked) svg { color: var(--gold-hi); }
.step-q .choices .choice:has(input:checked) b { color: var(--gold-hi); }
@media (hover: hover) and (pointer: fine) {
.step-q .choices .choice:hover { border-color: var(--line-hi); background: var(--panel-2); }
}
/* Zusammenfassung im letzten Schritt */
.summary { display: grid; grid-template-columns: auto 1fr; gap: 0; margin-bottom: 1.2rem; }
.summary dt, .summary dd { padding: .55rem 0; border-bottom: 1px dashed var(--line); font-size: .93rem; }
.summary dt {
font-family: var(--ff-label); font-weight: 600; text-transform: uppercase;
letter-spacing: .06em; font-size: .72rem; color: var(--green-hi); padding-right: 1.2rem; align-self: center;
}
.summary dd { color: var(--cream); text-align: right; overflow-wrap: anywhere; }
.summary dd.is-empty { color: var(--faint); }
/* Navigation */
.wizard__nav { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; }
.wizard__nav .btn { flex: 1 1 auto; }
.wizard__nav [data-back] { flex: 0 0 auto; }
.wizard.is-busy [data-send] { opacity: .6; pointer-events: none; }
/* Nur mit JavaScript: ein Schritt sichtbar, weich geschoben */
/* Der abgehende Schritt verschwindet schneller als der neue kommt, und
ein Hauch Unschärfe überbrückt die Überblendung. Ohne das sieht man
für einen Moment zwei Fragen übereinander. */
.js .wizard__track > .step-q {
position: absolute; inset: 0 0 auto 0;
opacity: 0; visibility: hidden;
transform: translateX(24px);
filter: blur(3px);
transition: opacity .14s var(--ease-out),
transform .14s var(--ease-out),
filter .14s var(--ease-out),
visibility 0s linear .14s;
}
.js .wizard__track > .step-q.is-active {
position: relative; opacity: 1; visibility: visible; transform: none; filter: none;
transition: opacity .34s var(--ease-out) .09s,
transform .34s var(--ease-out) .09s,
filter .34s var(--ease-out) .09s,
visibility 0s;
}
.js .wizard.is-back .wizard__track > .step-q { transform: translateX(-24px); }
.js .wizard.is-back .wizard__track > .step-q.is-active { transform: none; }
/* Der Assistent setzt JavaScript voraus: die Rechenaufgabe gegen Spam
laeuft im Browser. Ohne JavaScript blendet ein