/* ==========================================================================
MOHAMMAD BREJAWI AUTOSERVICE — Awwwards-Style Experience
Carbon Black / Silver / Neon Orange · Broken Grid · Vanilla CSS only
========================================================================== */
/* --------------------------------------------------------------------------
0. SELF-HOSTED DISPLAY FONT — Space Grotesk (SIL Open Font License)
Einmalig von Google Fonts heruntergeladen und lokal abgelegt unter
assets/fonts/ — kein CDN-Request zur Laufzeit, unabhängig ladbar.
-------------------------------------------------------------------------- */
@font-face {
font-family: 'Space Grotesk';
src: url('../fonts/SpaceGrotesk-Variable.woff2') format('woff2-variations');
font-weight: 300 700;
font-display: swap;
}
/* --------------------------------------------------------------------------
1. RESET
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; scroll-padding-top: calc(var(--nav-height) + 1.5rem); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
address { font-style: normal; }
/* --------------------------------------------------------------------------
2. DESIGN TOKENS
-------------------------------------------------------------------------- */
:root {
--color-bg: #0A0A0A;
--color-bg-elevated: #121212;
--color-fg: #F5F5F0;
--color-fg-muted: #9A9A94;
--color-silver: #C9CDD3;
--color-accent: #D32F2F;
--color-border: rgba(245, 245, 240, 0.09);
--font-display: 'Space Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
--font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;
--font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
--ease-lux: cubic-bezier(0.16, 1, 0.3, 1);
--dur-fast: 0.4s;
--dur-med: 0.9s;
--dur-slow: 1.4s;
--container: min(1400px, 92vw);
--nav-height: 128px;
--bottom-nav-height: 0px;
}
/* --------------------------------------------------------------------------
3. BASE
-------------------------------------------------------------------------- */
body {
background: var(--color-bg);
color: var(--color-fg);
font-family: var(--font-body);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
padding-bottom: var(--bottom-nav-height);
}
.mono { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; }
.eyebrow {
display: block;
font-size: 0.72rem;
color: var(--color-accent);
margin-bottom: 1.25rem;
}
/* Auf der Startseite etwas größer, auf Nutzerwunsch. */
.page-home .eyebrow { font-size: 0.88rem; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; }
h1, h2 {
font-size: clamp(2.2rem, 5vw, 4rem);
line-height: 1.02;
margin-bottom: 1.5rem;
max-width: 16ch;
}
h3 { font-size: 1.15rem; margin-bottom: 0.75rem; }
p { color: var(--color-fg-muted); }
.skip-link {
position: absolute;
left: -999px;
top: 0;
background: var(--color-accent);
color: #0A0A0A;
padding: 1rem 1.5rem;
z-index: 1000;
font-family: var(--font-mono);
}
.skip-link:focus { left: 1rem; top: 1rem; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
section { position: relative; padding: clamp(4rem, 10vw, 8rem) 0; }
.section-head { width: var(--container); margin: 0 auto 3rem; }
/* --------------------------------------------------------------------------
3a. AMBIENT BACKGROUND — fixierte, driftende Farbglut
Liegt als Kind von vor allem anderen Content im DOM und bekommt
z-index:-2, damit sie im Root-Stacking-Context hinter jedem normal
positionierten Element (z-index:auto) bleibt — auch hinter Sections mit
eigenem position:relative, die selbst keinen neuen Stacking-Context mit
höherer Priorität aufmachen. position:fixed hält sie unabhängig vom
Scroll immer im Viewport sichtbar, gegen die durchgehend flache
Carbon-Black-Fläche.
-------------------------------------------------------------------------- */
.ambient-bg {
position: fixed;
inset: 0;
z-index: -2;
overflow: hidden;
pointer-events: none;
}
.ambient-blob {
position: absolute;
border-radius: 50%;
filter: blur(90px);
will-change: transform;
}
.ambient-blob--accent {
width: min(900px, 80vw);
height: min(900px, 80vw);
top: -18%;
left: -14%;
background: radial-gradient(closest-side, rgba(211, 47, 47, 0.24), transparent 72%);
animation: ambient-drift-a 28s ease-in-out infinite alternate;
}
.ambient-blob--cool {
width: min(760px, 70vw);
height: min(760px, 70vw);
bottom: -16%;
right: -12%;
background: radial-gradient(closest-side, rgba(80, 130, 210, 0.18), transparent 72%);
animation: ambient-drift-b 34s ease-in-out infinite alternate;
}
.ambient-blob--accent2 {
width: min(560px, 55vw);
height: min(560px, 55vw);
top: 42%;
left: 58%;
background: radial-gradient(closest-side, rgba(211, 47, 47, 0.1), transparent 75%);
animation: ambient-drift-c 40s ease-in-out infinite alternate;
}
@keyframes ambient-drift-a {
0% { transform: translate(0, 0) scale(1); }
100% { transform: translate(10%, 14%) scale(1.15); }
}
@keyframes ambient-drift-b {
0% { transform: translate(0, 0) scale(1); }
100% { transform: translate(-12%, -10%) scale(1.12); }
}
@keyframes ambient-drift-c {
0% { transform: translate(0, 0) scale(1); }
100% { transform: translate(-16%, 10%) scale(1.2); }
}
/* --------------------------------------------------------------------------
4. FILMKORN / NOISE OVERLAY
Reines CSS/SVG-Rauschmuster, keine externe Bilddatei nötig.
-------------------------------------------------------------------------- */
.noise-overlay {
position: fixed;
inset: 0;
z-index: 9998;
pointer-events: none;
opacity: 0.05;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
/* --------------------------------------------------------------------------
6. HEADER
-------------------------------------------------------------------------- */
.site-header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 500;
display: flex;
flex-direction: column;
transition: transform var(--dur-med) var(--ease-lux);
}
.site-header.is-condensed { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35); }
.site-header.is-hidden { transform: translateY(-100%); }
/* Obere, etwas graue Utility-Zeile: Logo · Öffnungszeiten/CTA · Kontakt */
.header-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
padding: 1rem var(--container-pad, 4vw);
background: rgba(46, 46, 48, 0.94);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid var(--color-border);
}
.logo { display: flex; align-items: center; gap: 0.75rem; }
.logo-img {
display: block;
height: 48px;
width: auto;
}
.site-header .logo-img { height: 96px; }
.header-info { display: none; flex-direction: column; align-items: flex-end; gap: 0.5rem; }
.header-info-row { display: flex; align-items: center; gap: 1.25rem; }
.header-hours { display: flex; gap: 1.1rem; font-size: 0.68rem; color: var(--color-silver); }
.header-hours > div { display: flex; gap: 0.35rem; }
.header-hours dt { opacity: 0.6; }
.header-hours dd { color: var(--color-fg); }
.header-book-btn { padding: 0.65rem 1.35rem; font-size: 0.72rem; gap: 0.6rem; }
/* Schmaler, schräger Akzent-Trenner zwischen den beiden Info-Zeilen —
bewusst kein durchgehender Strich, sondern ein kurzes, leicht
gekipptes Segment, das rechtsbündig zur restlichen Spalte sitzt. */
.header-info-divider {
align-self: flex-end;
width: 46px;
height: 1px;
margin: 0.3rem 0.4rem 0.3rem 0;
background: linear-gradient(90deg, transparent, rgba(211, 47, 47, 0.6) 65%, rgba(211, 47, 47, 0.6));
transform: rotate(-13deg);
}
.header-info-label { color: var(--color-fg-muted); opacity: 0.75; }
.header-phone {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.74rem;
color: var(--color-fg-muted);
opacity: 0.85;
transition: color var(--dur-fast) var(--ease-lux), opacity var(--dur-fast) var(--ease-lux);
}
.header-phone:hover { opacity: 1; color: var(--color-accent); }
.header-phone svg { width: 14px; height: 14px; flex-shrink: 0; }
.header-email {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.74rem;
color: var(--color-fg-muted);
opacity: 0.85;
transition: color var(--dur-fast) var(--ease-lux), opacity var(--dur-fast) var(--ease-lux);
}
.header-email:hover { opacity: 1; color: var(--color-accent); }
.header-email svg { width: 14px; height: 14px; flex-shrink: 0; }
/* Untere Navigationszeile: eigene Reihe mit weißem Hintergrund.
Die vertikale Zeilen-Höhe kommt bewusst aus dem Padding der Links
selbst (nicht aus dem Container) und align-items:stretch sorgt dafür,
dass jedes Nav-Item (inkl. .nav-dropdown) die volle Zeilenhöhe
einnimmt — sonst bleibt zwischen dem vertikal zentrierten
Dropdown-Trigger und dem darunter aufklappenden Menü eine tote Zone,
in der der Hover abbricht, bevor man die Unterpunkte erreicht. */
.desktop-nav {
display: none;
align-items: stretch;
justify-content: center;
gap: 2.5rem;
font-size: 0.95rem;
background: var(--color-fg);
padding: 0 var(--container-pad, 4vw);
}
.desktop-nav a {
position: relative;
display: flex;
align-items: center;
padding: 1.15rem 0;
color: var(--color-bg);
font-family: var(--font-display);
font-weight: 600;
letter-spacing: -0.01em;
transition: color var(--dur-fast) var(--ease-lux);
}
.desktop-nav a[hidden] { display: none; }
.desktop-nav a::after {
content: '';
position: absolute; left: 0; right: 100%; bottom: 0;
height: 2px; background: var(--color-accent);
transition: right var(--dur-med) var(--ease-lux);
}
.desktop-nav a:hover { color: var(--color-accent); }
.desktop-nav a:hover::after { right: 0; }
.desktop-nav a.is-active { color: var(--color-accent); }
.desktop-nav a.is-active::after { right: 0; }
/* Dropdown für "Leistungen" — öffnet per Hover/Tastaturfokus, der Link
selbst bleibt klickbar und führt weiter auf leistungen.php. */
.nav-dropdown { position: relative; display: flex; align-items: center; align-self: stretch; }
.nav-dropdown-trigger { display: inline-flex; align-items: center; gap: 0.35rem; }
.nav-dropdown-caret { width: 11px; height: 11px; transition: transform var(--dur-fast) var(--ease-lux); }
.nav-dropdown:hover .nav-dropdown-caret,
.nav-dropdown:focus-within .nav-dropdown-caret { transform: rotate(180deg); }
.nav-dropdown-menu {
position: absolute;
top: 100%;
left: 50%;
min-width: 250px;
margin: 0;
padding: 0.6rem;
list-style: none;
background: var(--color-bg-elevated);
border: 1px solid var(--color-border);
border-radius: 14px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translate(-50%, -6px);
transition: opacity var(--dur-fast) var(--ease-lux), transform var(--dur-fast) var(--ease-lux), visibility var(--dur-fast);
z-index: 20;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translate(-50%, 0);
}
.desktop-nav .nav-dropdown-menu a {
display: block;
padding: 0.6rem 0.75rem;
border-radius: 8px;
font-family: var(--font-body);
font-weight: 400;
font-size: 0.85rem;
letter-spacing: normal;
color: var(--color-fg-muted);
white-space: nowrap;
}
.desktop-nav .nav-dropdown-menu a::after { content: none; }
.desktop-nav .nav-dropdown-menu a:hover { background: rgba(211, 47, 47, 0.1); color: var(--color-accent); }
/* Drei-Balken-Menü — nur auf Mobile/Tablet sichtbar (< 1024px), ersetzt
dort die frühere Bottom-Nav. Klappt unterhalb der einzeiligen
Mobile-Headerzeile auf; die Position folgt --nav-height, das
syncNavHeight() in script.js laufend an die reale Header-Höhe anpasst. */
.mobile-nav-toggle {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 2.75rem;
height: 2.75rem;
flex-shrink: 0;
}
.mobile-nav-toggle-bar {
display: block;
width: 22px;
height: 2px;
background: var(--color-fg);
border-radius: 2px;
transition: transform var(--dur-fast) var(--ease-lux), opacity var(--dur-fast) var(--ease-lux);
}
.mobile-nav-toggle[aria-expanded="true"] .mobile-nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-nav-toggle[aria-expanded="true"] .mobile-nav-toggle-bar:nth-child(2) { opacity: 0; }
.mobile-nav-toggle[aria-expanded="true"] .mobile-nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-nav {
display: none;
position: fixed;
top: var(--nav-height);
left: 0; right: 0; bottom: 0;
z-index: 490;
flex-direction: column;
gap: 0.15rem;
padding: 1.25rem var(--container-pad, 4vw) 2.5rem;
overflow-y: auto;
background: rgba(10, 10, 10, 0.98);
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
border-top: 1px solid var(--color-border);
}
.mobile-nav.is-open {
display: flex;
animation: mobile-nav-in 0.22s var(--ease-lux);
}
.mobile-nav > a {
padding: 0.95rem 0.15rem;
border-bottom: 1px solid var(--color-border);
font-family: var(--font-display);
font-size: 1.05rem;
font-weight: 600;
color: var(--color-fg);
}
.mobile-nav > a[hidden] { display: none; }
.mobile-nav > a.is-active { color: var(--color-accent); }
.mobile-nav-contact {
display: flex;
flex-direction: column;
gap: 0.9rem;
margin-top: 1.4rem;
}
.mobile-nav-contact-item {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-size: 0.85rem;
color: var(--color-fg-muted);
}
.mobile-nav-contact-item svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--color-accent); }
.mobile-nav-book-btn { margin-top: 1.5rem; width: 100%; justify-content: center; }
@keyframes mobile-nav-in {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
@media (min-width: 1024px) {
.header-info, .desktop-nav { display: flex; }
.mobile-nav-toggle, .mobile-nav { display: none; }
:root { --nav-height: 178px; }
}
/* Rückt den gesamten Seiteninhalt unter den fixierten (mehrzeiligen) Header —
sonst startet die erste Section jeder Unterseite bei y=0 und ihre
Überschrift wird vom Header überdeckt/abgeschnitten. Der Hero auf der
Startseite ist die einzige Ausnahme: Er ist bewusst Vollbild-Hintergrund
und hebt diesen Versatz per negativem margin-top wieder auf (siehe unten). */
#main { padding-top: var(--nav-height); }
/* --------------------------------------------------------------------------
7. HERO — 3D-Layering-Effekt
-------------------------------------------------------------------------- */
.hero {
position: relative;
min-height: 100svh;
margin-top: calc(var(--nav-height) * -1);
padding-top: var(--nav-height);
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
}
/* Porsche-Foto als abgedunkeltes Vollbild-Hintergrund. Der Wrapper ist
oben/unten über die Sektionsgrenze hinaus vergrößert (inset -10%), damit
die JS-Parallax (siehe script.js) das Bild verschieben kann, ohne dass
am Rand eine Lücke sichtbar wird. Die Lade-Animation läuft auf dem ![]()
selbst — getrennt vom Parallax-transform des Wrappers, keine Kollision. */
.hero-media {
position: absolute;
z-index: 0;
inset: -10% 0;
overflow: hidden;
pointer-events: none;
}
.hero-media-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 55%;
filter: grayscale(0.2) contrast(1.1) brightness(0.55);
animation: hero-media-in 1.9s var(--ease-lux) both;
}
.hero-media-scrim {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 70% 60% at 50% 46%, transparent 0%, rgba(10, 10, 10, 0.55) 78%),
linear-gradient(180deg, rgba(10, 10, 10, 0.85) 0%, rgba(10, 10, 10, 0.25) 28%, rgba(10, 10, 10, 0.35) 68%, rgba(10, 10, 10, 0.92) 100%);
}
@keyframes hero-media-in {
from { opacity: 0; transform: scale(1.1); }
to { opacity: 1; transform: scale(1); }
}
/* H1 liegt über dem Hintergrundfoto */
.hero-title {
position: relative;
z-index: 1;
width: 100%;
margin-top: clamp(1.5rem, 6vw, 4rem);
text-align: center;
font-size: clamp(3rem, 15vw, 11rem);
line-height: 0.86;
letter-spacing: -0.03em;
text-transform: uppercase;
text-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
pointer-events: none;
}
.hero-title .line {
display: block;
animation: hero-line-in 1.1s var(--ease-lux) both;
}
.hero-title .line:nth-child(1) { animation-delay: 0.1s; }
.hero-title .line:nth-child(2) { animation-delay: 0.28s; }
.hero-title .line:nth-child(3) { animation-delay: 0.46s; }
.hero-title .line--outline {
color: transparent;
-webkit-text-stroke: 1.5px var(--color-fg-muted);
animation-name: hero-line-in-outline;
}
@keyframes hero-line-in {
from { opacity: 0; transform: translateX(-10vw); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes hero-line-in-outline {
from { opacity: 0; transform: translateX(-10vw); }
to { opacity: 0.6; transform: translateX(0); }
}
.hero-tag {
position: relative;
z-index: 3;
text-align: center;
font-size: 0.68rem;
color: var(--color-fg-muted);
margin-top: 2rem;
animation: hero-fade-up 1s var(--ease-lux) both 0.75s;
}
.hero-footer {
position: relative;
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
text-align: center;
margin-top: 2.5rem;
padding: 0 6vw;
animation: hero-fade-up 1s var(--ease-lux) both 0.9s;
}
.hero-sub { max-width: 42ch; font-size: 1rem; }
@keyframes hero-fade-up {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: translateY(0); }
}
.scroll-cue {
position: absolute;
bottom: calc(var(--bottom-nav-height) + 2rem);
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.6rem;
z-index: 3;
}
.scroll-cue-line {
width: 1px; height: 44px;
background: linear-gradient(var(--color-fg-muted), transparent);
animation: scroll-cue 2.2s var(--ease-lux) infinite;
}
.scroll-cue-text { font-size: 0.6rem; color: var(--color-fg-muted); }
@keyframes scroll-cue {
0% { transform: scaleY(0); transform-origin: top; }
50% { transform: scaleY(1); transform-origin: top; }
50.1% { transform-origin: bottom; }
100% { transform: scaleY(0); transform-origin: bottom; }
}
@media (min-width: 1024px) {
.hero-footer { flex-direction: row; justify-content: space-between; align-items: flex-end; padding: 0 var(--container-pad, 4vw); text-align: left; }
.hero-sub { text-align: left; }
}
/* --------------------------------------------------------------------------
8. BUTTONS / MAGNETIC
-------------------------------------------------------------------------- */
.btn {
position: relative;
z-index: 0;
overflow: hidden;
display: inline-flex;
align-items: center;
gap: 0.85rem;
padding: 1.1rem 1.9rem 1.1rem 2.2rem;
font-size: 0.85rem;
letter-spacing: 0.02em;
border-radius: 999px;
white-space: nowrap;
}
.btn--primary {
background: var(--color-fg);
color: var(--color-bg);
transition: color var(--dur-fast) var(--ease-lux);
}
/* Sweep füllt von links statt die Farbe hart umzuschalten */
.btn--primary::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: var(--color-accent);
transform: translateX(-100%);
transition: transform var(--dur-med) var(--ease-lux);
}
.btn--primary:hover { color: var(--color-fg); }
.btn--primary:hover::before { transform: translateX(0); }
.btn-arrow {
display: inline-flex;
width: 15px;
height: 15px;
flex-shrink: 0;
transition: transform var(--dur-med) var(--ease-lux);
}
.btn-arrow svg { width: 100%; height: 100%; }
.btn--primary:hover .btn-arrow { transform: translateX(4px); }
/* --------------------------------------------------------------------------
9. SCROLL-REVEAL (Intersection Observer + gestaffelte Animation)
-------------------------------------------------------------------------- */
[data-reveal] {
opacity: 0;
transform: translateY(36px);
transition: opacity var(--dur-slow) var(--ease-lux), transform var(--dur-slow) var(--ease-lux);
transition-delay: calc(var(--reveal-delay, 0) * 90ms);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
/* Automatische Staffelung für wiederholte Grid-/Listen-Items, ohne dass
jedes einzelne data-delay im Markup gesetzt werden muss. */
.services-list .service-row:nth-child(1), .process-list li:nth-child(1), .reviews-grid li:nth-child(1), .gutachten-list li:nth-child(1) { --reveal-delay: 0; }
.services-list .service-row:nth-child(2), .process-list li:nth-child(2), .reviews-grid li:nth-child(2), .gutachten-list li:nth-child(2) { --reveal-delay: 1; }
.services-list .service-row:nth-child(3), .process-list li:nth-child(3), .reviews-grid li:nth-child(3), .gutachten-list li:nth-child(3) { --reveal-delay: 2; }
.services-list .service-row:nth-child(4), .process-list li:nth-child(4) { --reveal-delay: 3; }
.services-list .service-row:nth-child(5) { --reveal-delay: 4; }
.services-list .service-row:nth-child(6) { --reveal-delay: 5; }
/* --------------------------------------------------------------------------
10. AI CONTEXT BLOCK ("Über unsere Expertise")
-------------------------------------------------------------------------- */
.expertise { position: relative; width: var(--container); margin: 0 auto; }
.expertise::before {
content: '';
position: absolute;
z-index: -1;
top: -4rem;
right: -10%;
width: min(700px, 80vw);
height: min(700px, 80vw);
background: radial-gradient(closest-side, rgba(211, 47, 47, 0.07), transparent 72%);
pointer-events: none;
}
.expertise .lede {
font-size: clamp(1.1rem, 2vw, 1.5rem);
color: var(--color-fg);
max-width: 68ch;
line-height: 1.55;
margin-bottom: 1.25rem;
}
.expertise .lede:last-of-type { margin-bottom: 3.5rem; }
.expertise .lede strong { color: var(--color-accent); font-weight: 500; }
.expertise-tagline { margin: -0.75rem 0 3.5rem; font-size: 0.78rem; color: var(--color-fg-muted); letter-spacing: 0.04em; }
.expertise-grid { display: grid; gap: 3rem; align-items: center; }
.expertise-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.photo-placeholder {
position: relative;
margin: 0;
aspect-ratio: 3 / 4;
border: 1px dashed var(--color-border);
background: var(--color-bg-elevated);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.75rem;
color: var(--color-fg-muted);
}
.photo-placeholder--tall { aspect-ratio: 3 / 5; }
.photo-placeholder--wide { aspect-ratio: 4 / 3; }
.photo-placeholder-icon { width: 32px; height: 32px; }
.photo-placeholder-icon svg { width: 100%; height: 100%; }
.photo-placeholder figcaption { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.04em; text-align: center; line-height: 1.5; }
.photo-placeholder--filled { border-style: solid; overflow: hidden; padding: 0; }
.photo-placeholder--filled img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-placeholder--filled figcaption {
position: absolute; left: 0; right: 0; bottom: 0;
padding: 1.4rem 0.85rem 0.75rem;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.75) 55%, transparent 100%);
color: #FFFFFF;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
@media (min-width: 900px) {
.expertise-grid { grid-template-columns: 1.15fr 0.85fr; }
}
/* Marken, mit denen wir arbeiten — direkt unter der Expertise-Section.
Logos werden per mask-image statt ![]()
+ Filter eingefärbt: die
Quell-SVGs haben stark unterschiedliche (teils fast schwarze)
Füllfarben, auf denen ein Graustufen/Brightness-Filter nichts
aufhellen kann — das Ergebnis waren auf dem dunklen Hintergrund
praktisch unsichtbare, "leere" Kästchen. Die Maske ignoriert die
Originalfarbe komplett und färbt nur die Silhouette ein, dadurch
sehen alle Marken gleich "gewichtig" aus. Feste Breite/Höhe auf
.brand-logo sorgt zusätzlich für einheitlich große Kästchen,
unabhängig vom Seitenverhältnis des jeweiligen Logos. */
.brands { width: var(--container); margin: 0 auto; }
.brands-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 1rem; }
.brand-logo {
display: flex;
align-items: center;
justify-content: center;
height: 4.5rem;
padding: 0.9rem 1.25rem;
border: 1px solid var(--color-border);
transition: border-color var(--dur-fast) var(--ease-lux);
}
.brand-logo:hover { border-color: var(--color-accent); }
.brand-mark {
display: block;
width: 100%;
height: 100%;
background-color: var(--color-fg-muted);
opacity: 0.75;
-webkit-mask-image: var(--logo);
mask-image: var(--logo);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
transition: background-color var(--dur-fast) var(--ease-lux), opacity var(--dur-fast) var(--ease-lux), color var(--dur-fast) var(--ease-lux);
}
.brand-logo:hover .brand-mark { background-color: var(--color-fg); opacity: 1; }
/* Ford: die Quelldatei ist nur eine einfarbige Ellipse ohne
ausgeschnittenen Schriftzug, deshalb als Maske unbrauchbar. Statt
der externen Datei zeichnen wir Oval + "Ford" als Inline-SVG. */
.brand-mark--ford { background: none; mask-image: none; -webkit-mask-image: none; color: var(--color-fg-muted); }
.brand-mark--ford svg { display: block; width: 100%; height: 100%; }
.brand-logo:hover .brand-mark--ford { background: none; color: var(--color-fg); }
/* Marken ohne hinterlegte Logo-Datei: reiner Schriftzug statt Maske,
gleiche optische Gewichtung wie die echten Logos daneben. */
.brand-mark--text {
background: none;
mask-image: none;
-webkit-mask-image: none;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.03em;
color: var(--color-fg-muted);
}
.brand-logo:hover .brand-mark--text { color: var(--color-fg-muted); }
/* BMW ist die einzige Marke, deren Wiedererkennbarkeit von internem
Farbkontrast (blau/weiße Viertel) statt von Transparenz abhängt —
als Maske würde sie zu einer einfarbigen Kreisfläche verschmelzen.
Sie bleibt daher ein normales ![]()
, per Graustufen-Filter an den
gedeckten Look der übrigen Marken angeglichen. */
.brand-photo {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
filter: grayscale(1);
opacity: 0.85;
transition: filter var(--dur-fast) var(--ease-lux), opacity var(--dur-fast) var(--ease-lux);
}
.brand-logo:hover .brand-photo { filter: none; opacity: 1; }
/* --------------------------------------------------------------------------
10a. SO SIEHT UNSERE ARBEIT AUS — Bildergalerie
-------------------------------------------------------------------------- */
.work { width: var(--container); margin: 0 auto; padding: clamp(4rem, 10vw, 8rem) 0 0; }
/* Feste (statt auto-fit) Spaltenzahl, damit die im Admin-Panel auf
maximal 18 Bilder begrenzte Galerie zuverlässig in vollen Reihen passt. */
.work-gallery, .cars-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
@media (min-width: 900px) {
.work-gallery, .cars-gallery { grid-template-columns: repeat(3, 1fr); }
}
.work-photo, .car-photo {
position: relative;
margin: 0;
aspect-ratio: 4 / 3;
overflow: hidden;
border: 1px solid var(--color-border);
background: var(--color-bg-elevated);
cursor: zoom-in;
}
.work-photo img, .car-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.work-photo figcaption {
position: absolute; left: 0; right: 0; bottom: 0;
padding: 1.4rem 0.85rem 0.75rem;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.75) 55%, transparent 100%);
color: #FFFFFF;
font-family: var(--font-mono);
font-size: 0.78rem;
line-height: 1.4;
letter-spacing: 0.02em;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
/* Lightbox — vergrößerte Ansicht eines Galeriefotos, kein echtes Vollbild */
.lightbox-overlay {
position: fixed;
inset: 0;
z-index: 10000;
display: none;
align-items: center;
justify-content: center;
padding: 4rem 1.5rem;
background: rgba(10, 10, 10, 0.9);
animation: lightbox-fade 0.18s ease;
}
.lightbox-overlay.is-open { display: flex; }
@keyframes lightbox-fade { from { opacity: 0; } to { opacity: 1; } }
.lightbox-box {
position: relative;
max-width: min(860px, 90vw);
border: 1px solid var(--color-border);
background: var(--color-bg-elevated);
}
.lightbox-box img { display: block; max-width: 100%; max-height: 78vh; width: auto; height: auto; }
.lightbox-box figcaption {
padding: 0.7rem 1rem;
color: var(--color-fg);
font-family: var(--font-mono);
font-size: 0.75rem;
letter-spacing: 0.02em;
border-top: 1px solid var(--color-border);
}
.lightbox-close {
position: absolute;
top: -2.6rem;
right: 0;
width: 2.2rem;
height: 2.2rem;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--color-border);
background: var(--color-bg-elevated);
color: var(--color-fg);
cursor: pointer;
line-height: 1;
font-size: 1.3rem;
}
.lightbox-close:hover { color: var(--color-accent); border-color: var(--color-accent); }
/* --------------------------------------------------------------------------
10b. UNSERE AUTOS — Fahrzeugliste + Detailseite
-------------------------------------------------------------------------- */
.cars { width: var(--container); margin: 0 auto; padding: clamp(4rem, 10vw, 8rem) 0; }
.cars-empty { color: var(--color-fg-muted); max-width: 60ch; }
.cars-empty a { color: var(--color-accent); text-decoration: underline; }
.cars-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 700px) { .cars-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .cars-grid { grid-template-columns: repeat(3, 1fr); } }
.car-card {
display: flex;
flex-direction: column;
border: 1px solid var(--color-border);
background: linear-gradient(160deg, var(--color-bg-elevated), transparent);
transition: transform var(--dur-fast) var(--ease-lux), border-color var(--dur-fast) var(--ease-lux);
}
.car-card:hover { transform: translateY(-6px); border-color: var(--color-fg-muted); }
.car-card-photo { aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-bg-elevated); display: flex; align-items: center; justify-content: center; }
.car-card-photo img { width: 100%; height: 100%; object-fit: cover; }
.car-card-photo-icon { width: 40px; height: 40px; color: var(--color-fg-muted); }
.car-card-photo-icon svg { width: 100%; height: 100%; }
.car-card-body { padding: 1.5rem 1.5rem 1.75rem; flex: 1; display: flex; flex-direction: column; }
.car-card-body h3 { font-size: 1.15rem; margin-bottom: 0.6rem; }
.car-card-body p { font-size: 0.88rem; margin-bottom: 1.25rem; flex: 1; }
.car-card-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-top: auto;
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-accent);
}
.car-card-link .btn-arrow { width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease-lux); }
.car-card:hover .car-card-link .btn-arrow { transform: translateX(4px); }
/* Detailseite */
.car-detail { width: var(--container); margin: 0 auto; padding: clamp(4rem, 10vw, 8rem) 0; }
.car-detail-back {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1.5rem;
font-family: var(--font-mono);
font-size: 0.75rem;
letter-spacing: 0.03em;
color: var(--color-fg-muted);
}
.car-detail-back svg { width: 16px; height: 16px; }
.car-detail-back:hover { color: var(--color-accent); }
.car-detail-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; margin-top: 3rem; align-items: start; }
@media (min-width: 1024px) {
.car-detail-grid { grid-template-columns: 1fr 380px; }
}
.car-detail-info h3 { font-size: 1.1rem; margin-bottom: 0.85rem; }
.car-detail-info h3:not(:first-child) { margin-top: 2.25rem; }
.car-detail-description { color: var(--color-fg); line-height: 1.65; max-width: 65ch; }
.car-features { display: grid; gap: 0.6rem; }
.car-features li {
position: relative;
padding-left: 1.5rem;
color: var(--color-fg);
font-size: 0.92rem;
}
.car-features li::before {
content: '';
position: absolute;
left: 0; top: 0.5em;
width: 8px; height: 8px;
background: var(--color-accent);
border-radius: 50%;
}
.car-inquiry {
border: 1px solid var(--color-border);
background: var(--color-bg-elevated);
padding: 1.75rem;
}
@media (min-width: 1024px) {
.car-inquiry { position: sticky; top: calc(var(--nav-height, 96px) + 2rem); }
}
.car-inquiry h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.car-inquiry-sub { color: var(--color-fg-muted); font-size: 0.85rem; margin-bottom: 1.5rem; }
.car-inquiry .contact-form { max-width: none; }
.car-inquiry .form-field { margin-bottom: 1.1rem; }
.car-inquiry .form-footer { flex-direction: column-reverse !important; align-items: stretch !important; }
.car-inquiry .btn--primary { width: 100%; justify-content: center; }
.car-inquiry-divider { border-top: 1px solid var(--color-border); margin: 1.75rem 0; }
.car-inquiry-contact h4 { font-size: 0.95rem; margin-bottom: 0.85rem; }
.car-inquiry-contact a[href^="mailto"] {
display: block;
margin-bottom: 1rem;
font-family: var(--font-mono);
font-size: 0.85rem;
color: var(--color-fg);
}
.car-inquiry-contact a[href^="mailto"]:hover { color: var(--color-accent); }
.car-inquiry-contact .btn--primary { width: 100%; justify-content: center; }
/* --------------------------------------------------------------------------
11. LEISTUNGEN — Statische Icon-Liste, alles direkt sichtbar (kein Klick)
-------------------------------------------------------------------------- */
.services-list { width: var(--container); margin: 0 auto; border-top: 1px solid var(--color-border); }
.service-row {
padding: 1.75rem 0.5rem;
border-bottom: 1px solid var(--color-border);
}
.service-row-head {
display: grid;
grid-template-columns: 2.75rem 2.5rem 1fr;
align-items: center;
gap: 1rem;
margin-bottom: 0.85rem;
}
.service-row-index { font-size: 0.8rem; color: var(--color-fg-muted); }
.service-row-icon { width: 26px; height: 26px; }
.service-row-icon svg { width: 100%; height: 100%; stroke: var(--color-fg-muted); }
.service-row-name {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.1rem, 2.6vw, 1.6rem);
letter-spacing: -0.01em;
}
.service-row-desc {
font-size: 0.95rem;
max-width: 62ch;
}
.service-row--accent .service-row-index,
.service-row--accent .service-row-icon svg { stroke: var(--color-accent); color: var(--color-accent); }
.service-row-includes { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.5rem; max-width: 62ch; }
.service-row-includes li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.86rem; color: var(--color-fg-muted); }
.service-row-includes li svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 0.2rem; stroke: var(--color-accent); }
.services-cta { width: var(--container); margin: 0 auto; text-align: center; }
@media (min-width: 900px) {
.service-row { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; align-items: start; gap: 2rem; padding: 2rem 0.5rem; }
.service-row-head { margin-bottom: 0; }
.service-row-desc { padding-top: 0.2rem; }
.service-row-includes { grid-column: 2; }
}
@media (max-width: 640px) {
.service-row-head { grid-template-columns: 2.25rem 2.1rem 1fr; }
}
/* --------------------------------------------------------------------------
11b. PREISE — Richtpreis-Liste (im Admin-Panel gepflegt)
-------------------------------------------------------------------------- */
.price-list { width: var(--container); margin: 0 auto; border-top: 1px solid var(--color-border); }
.price-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1.5rem;
padding: 1.35rem 0.5rem;
border-bottom: 1px solid var(--color-border);
}
.price-row-name {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1rem, 2.2vw, 1.3rem);
}
.price-row-value {
display: flex;
align-items: baseline;
gap: 0.4rem;
font-family: var(--font-mono);
font-size: 1.1rem;
color: var(--color-accent);
white-space: nowrap;
}
.price-row-note { color: var(--color-fg-muted); font-size: 0.68rem; }
.price-list-hint { width: var(--container); margin: 1.75rem auto 0; font-size: 0.72rem; color: var(--color-fg-muted); }
/* --------------------------------------------------------------------------
10c. LEISTUNGEN-KURZÜBERSICHT — kompakte Icon-Reihe direkt unter dem Hero
-------------------------------------------------------------------------- */
.services-strip { width: var(--container); margin: 0 auto; padding: clamp(3rem, 7vw, 5rem) 0 0; }
.services-strip-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem 1rem;
text-align: center;
}
.services-strip-list li { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.services-strip-icon {
display: flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
border: 1px solid var(--color-border);
border-radius: 50%;
color: var(--color-accent);
}
.services-strip-icon svg { width: 22px; height: 22px; }
.services-strip-list span:last-child { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.01em; color: var(--color-fg-muted); }
@media (min-width: 640px) {
.services-strip-list { grid-template-columns: repeat(4, 1fr); }
}
/* --------------------------------------------------------------------------
11a. ONLINE-TERMIN — Promo-Block für die Online-Buchung
-------------------------------------------------------------------------- */
.booking-promo { width: var(--container); margin: 0 auto; }
.booking-promo-grid { display: grid; gap: 3rem; align-items: center; }
.booking-promo-text p {
font-size: clamp(1.05rem, 2vw, 1.25rem);
color: var(--color-fg);
max-width: 46ch;
line-height: 1.55;
margin-bottom: 2.25rem;
}
.booking-promo-media { max-width: 280px; margin: 0 auto; }
.booking-graphic-svg { width: 100%; height: auto; display: block; overflow: visible; }
.booking-graphic-glow {
opacity: 0.16;
filter: blur(26px);
transform-box: fill-box;
transform-origin: center;
animation: booking-glow-pulse 5s ease-in-out infinite;
}
.booking-graphic-ping {
transform-box: fill-box;
transform-origin: center;
animation: booking-ping 2.4s ease-out infinite;
}
.booking-graphic-check {
stroke-dasharray: 28;
stroke-dashoffset: 28;
animation: booking-check-draw 4s ease-in-out infinite;
}
@keyframes booking-glow-pulse { 0%, 100% { opacity: 0.14; transform: scale(1); } 50% { opacity: 0.28; transform: scale(1.08); } }
@keyframes booking-ping { 0% { transform: scale(0.6); opacity: 0.7; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes booking-check-draw {
0% { stroke-dashoffset: 28; opacity: 0; }
12% { opacity: 1; }
45% { stroke-dashoffset: 0; opacity: 1; }
78% { stroke-dashoffset: 0; opacity: 1; }
92% { opacity: 0; }
100% { stroke-dashoffset: 28; opacity: 0; }
}
@media (min-width: 900px) {
.booking-promo-grid { grid-template-columns: 1.15fr 0.85fr; }
.booking-promo-media { margin: 0; }
}
/* --------------------------------------------------------------------------
11c. TRUST — Google-Bewertungsschnitt + Vertrauens-Pillars
-------------------------------------------------------------------------- */
.trust { position: relative; width: var(--container); margin: 0 auto; padding: clamp(4rem, 10vw, 8rem) 0; }
.trust::before {
content: '';
position: absolute;
z-index: -1;
top: 10%;
left: -12%;
width: min(650px, 75vw);
height: min(650px, 75vw);
background: radial-gradient(closest-side, rgba(211, 47, 47, 0.06), transparent 72%);
pointer-events: none;
}
/* Badge-Card: Google-Branding + Sternschnitt in einem eigenständigen,
akzentuierten Rahmen statt einer bloßen Text-/Zahlenzeile */
.trust-badge {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 2rem;
padding: 2.25rem clamp(1.5rem, 4vw, 3rem);
margin-bottom: 3.5rem;
border: 1px solid var(--color-border);
border-top: 2px solid var(--color-accent);
background: linear-gradient(160deg, var(--color-bg-elevated), transparent);
}
.trust-badge-main {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 2rem;
}
.trust-badge-brand {
display: flex;
align-items: center;
gap: 0.85rem;
padding-right: 2rem;
border-right: 1px solid var(--color-border);
}
.trust-google-logo { width: 30px; height: 30px; flex-shrink: 0; }
.trust-badge-brand-text { font-size: 0.75rem; line-height: 1.4; color: var(--color-fg); }
.trust-badge-score { display: flex; align-items: center; gap: 1rem; }
.trust-badge-number { font-family: var(--font-display); font-size: 2.75rem; line-height: 1; letter-spacing: -0.02em; }
.trust-badge-score-detail { display: flex; flex-direction: column; gap: 0.4rem; }
.trust-stars { display: flex; gap: 0.25rem; }
.trust-stars svg { width: 16px; height: 16px; fill: var(--color-accent); }
.trust-badge-caption { font-size: 0.78rem; color: var(--color-fg-muted); }
.trust-badge-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.75rem;
padding-bottom: 0.3rem;
border-bottom: 1px solid var(--color-border);
white-space: nowrap;
transition: border-color var(--dur-fast) var(--ease-lux), color var(--dur-fast) var(--ease-lux), gap var(--dur-fast) var(--ease-lux);
}
.trust-badge-link svg { width: 15px; height: 15px; transition: transform var(--dur-fast) var(--ease-lux); }
.trust-badge-link:hover { border-color: var(--color-accent); color: var(--color-accent); gap: 0.75rem; }
.trust-badge-link:hover svg { transform: translateX(3px); }
.reviews-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 2rem;
}
.review-card { border-left: 1px solid var(--color-border); padding-left: 1.25rem; }
.review-card .trust-stars { margin-bottom: 1rem; }
.review-quote { font-size: 0.92rem; line-height: 1.55; color: var(--color-fg); margin-bottom: 0.85rem; }
.review-author { font-size: 0.72rem; color: var(--color-fg-muted); }
.reviews-cta { margin-top: 3rem; text-align: center; }
@media (max-width: 640px) {
.trust-badge-brand { border-right: none; padding-right: 0; padding-bottom: 1.5rem; border-bottom: 1px solid var(--color-border); width: 100%; }
}
.accent { color: var(--color-accent); }
/* --------------------------------------------------------------------------
12. PROZESS
-------------------------------------------------------------------------- */
.process {
background: radial-gradient(closest-side, rgba(245, 245, 240, 0.035), transparent 70%) no-repeat -10% 0% / min(650px, 70vw) min(650px, 70vw);
}
.process-list {
width: var(--container);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
}
.process-step {
padding: 2rem 1.75rem;
border: 1px solid var(--color-border);
background: linear-gradient(160deg, var(--color-bg-elevated), transparent);
transition: border-color var(--dur-fast) var(--ease-lux), transform var(--dur-med) var(--ease-lux);
}
.process-step:hover { border-color: var(--color-fg-muted); transform: translateY(-6px); }
.process-icon { display: block; width: 28px; height: 28px; margin-bottom: 1.5rem; }
.process-icon svg { width: 100%; height: 100%; stroke: var(--color-accent); }
.process-index { display: block; font-size: 0.75rem; color: var(--color-fg-muted); margin-bottom: 0.75rem; }
.process-step h3 { font-size: 1.05rem; margin-bottom: 0.6rem; }
.process-step p { font-size: 0.9rem; }
@media (min-width: 640px) {
.process-list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.process-list { grid-template-columns: repeat(4, 1fr); }
}
/* --------------------------------------------------------------------------
13. FAQ ACCORDION
-------------------------------------------------------------------------- */
.faq { background: linear-gradient(180deg, transparent, var(--color-bg-elevated) 50%, transparent); }
.accordion { width: var(--container); margin: 0 auto; border-top: 1px solid var(--color-border); }
.accordion-item { border-bottom: 1px solid var(--color-border); }
.accordion-trigger {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
padding: 1.75rem 0;
text-align: left;
font-family: var(--font-display);
font-size: clamp(1.05rem, 2vw, 1.4rem);
}
.accordion-icon {
position: relative;
flex: 0 0 auto;
width: 22px; height: 22px;
}
.accordion-icon::before, .accordion-icon::after {
content: '';
position: absolute;
top: 50%; left: 50%;
background: var(--color-fg);
transition: transform var(--dur-fast) var(--ease-lux);
}
.accordion-icon::before { width: 100%; height: 1px; transform: translate(-50%, -50%); }
.accordion-icon::after { width: 1px; height: 100%; transform: translate(-50%, -50%); }
.accordion-trigger[aria-expanded="true"] .accordion-icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.accordion-trigger[aria-expanded="true"] .accordion-icon::before { background: var(--color-accent); }
/* Höhen-Animation via Grid-Rows-Trick — kein JS-Measuring des Panels nötig */
.accordion-panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows var(--dur-med) var(--ease-lux);
}
.accordion-panel[data-open] { grid-template-rows: 1fr; }
.accordion-panel-inner { overflow: hidden; }
.accordion-panel-inner p { padding-bottom: 1.75rem; max-width: 62ch; font-size: 0.98rem; }
/* --------------------------------------------------------------------------
13a. GUTACHTEN & TÜV
-------------------------------------------------------------------------- */
.gutachten { width: var(--container); margin: 0 auto; }
.gutachten-lede {
font-size: clamp(1rem, 1.8vw, 1.25rem);
color: var(--color-fg);
max-width: 62ch;
line-height: 1.55;
margin-bottom: 3rem;
}
.gutachten-lede strong { color: var(--color-accent); font-weight: 500; }
.gutachten-list {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
}
.gutachten-list li {
padding: 2rem 1.75rem;
border: 1px solid var(--color-border);
background: linear-gradient(160deg, var(--color-bg-elevated), transparent);
transition: border-color var(--dur-fast) var(--ease-lux), transform var(--dur-med) var(--ease-lux);
}
.gutachten-list li:hover { border-color: var(--color-fg-muted); transform: translateY(-6px); }
.gutachten-icon { display: block; width: 28px; height: 28px; margin-bottom: 1.5rem; }
.gutachten-icon svg { width: 100%; height: 100%; stroke: var(--color-accent); }
.gutachten-list h3 { font-size: 1.05rem; margin-bottom: 0.6rem; }
.gutachten-list p { font-size: 0.9rem; }
@media (min-width: 640px) {
.gutachten-list { grid-template-columns: repeat(3, 1fr); }
}
/* --------------------------------------------------------------------------
13b. KARRIERE — offene Stellen (werden per assets/js/jobs.js aus
api/jobs.php geladen; Section bleibt hidden, solange keine aktiven
Stellen vorhanden bzw. im Admin-Panel deaktiviert sind)
-------------------------------------------------------------------------- */
.jobs { width: var(--container); margin: 0 auto; padding: clamp(4rem, 10vw, 8rem) 0 0; }
.jobs-list { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.job-card {
padding: 2rem 1.75rem;
border: 1px solid var(--color-border);
background: linear-gradient(160deg, var(--color-bg-elevated), transparent);
}
.job-badge {
display: inline-block;
padding: 0.3rem 0.8rem;
margin-bottom: 1.25rem;
border: 1px solid var(--color-accent);
border-radius: 999px;
color: var(--color-accent);
font-size: 0.68rem;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.job-card h3 { font-size: 1.3rem; margin-bottom: 1rem; }
.job-text { font-size: 0.95rem; color: var(--color-fg); white-space: pre-line; max-width: 65ch; margin-bottom: 1.25rem; }
.job-req-label { display: block; font-size: 0.68rem; color: var(--color-fg-muted); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 0.6rem; }
.job-apply { margin-top: 0.25rem; }
@media (min-width: 900px) {
.jobs-list { grid-template-columns: repeat(2, 1fr); }
}
/* --------------------------------------------------------------------------
14. KONTAKT
-------------------------------------------------------------------------- */
.contact-grid {
width: var(--container);
margin: 0 auto;
display: grid;
gap: 3rem;
}
.contact-info address { font-size: 1.1rem; margin: 0 0 1.25rem; color: var(--color-fg); }
.contact-brand { font-size: 1.2rem; margin: 1.5rem 0 1rem; }
.contact-locations { margin-bottom: 1.5rem; }
.contact-location-label { font-size: 0.68rem; color: var(--color-accent); }
.contact-list { margin-bottom: 2rem; }
.contact-list a { font-family: var(--font-mono); font-size: 1rem; display: inline-block; padding: 0.3rem 0; border-bottom: 1px solid transparent; transition: border-color var(--dur-fast) ease; }
.contact-list a:hover { border-color: var(--color-accent); }
.hours { margin-bottom: 2.5rem; }
.hours-row { display: flex; justify-content: space-between; max-width: 280px; padding: 0.5rem 0; border-bottom: 1px solid var(--color-border); font-family: var(--font-mono); font-size: 0.82rem; }
.contact-map {
position: relative;
min-height: 520px;
border: 1px solid var(--color-border);
background: var(--color-bg-elevated);
overflow: hidden;
}
.map-grid {
position: absolute; inset: 0;
background-image:
linear-gradient(var(--color-border) 1px, transparent 1px),
linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
background-size: 40px 40px;
}
.map-pin {
position: absolute; top: 50%; left: 50%;
width: 14px; height: 14px;
transform: translate(-50%, -50%);
border-radius: 50%;
background: var(--color-accent);
box-shadow: 0 0 0 6px rgba(211, 47, 47, 0.18);
}
.map-pin::after {
content: '';
position: absolute; inset: -18px;
border: 1px solid var(--color-accent);
border-radius: 50%;
animation: map-ping 2.4s var(--ease-lux) infinite;
}
@keyframes map-ping { 0% { transform: scale(0.6); opacity: 0.8; } 100% { transform: scale(2.4); opacity: 0; } }
/* Zustimmungs-Platzhalter, bevor die echte Google-Maps-Karte geladen wird */
.map-consent {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}
.map-consent-card {
position: relative;
z-index: 1;
max-width: 280px;
text-align: center;
padding: 1.5rem;
}
.map-consent-text { font-size: 0.85rem; color: var(--color-fg-muted); margin-bottom: 1.1rem; }
.map-consent-btn { padding: 0.7rem 1.5rem; font-size: 0.8rem; margin: 0 auto; }
.map-consent-privacy-link { display: block; margin-top: 0.85rem; font-size: 0.7rem; color: var(--color-fg-muted); text-decoration: underline; }
.map-embed { position: absolute; inset: 0; }
.map-embed iframe { width: 100%; height: 100%; border: 0; filter: grayscale(0.4) brightness(0.92) contrast(1.08); }
.map-directions {
position: absolute;
top: 1rem; right: 1rem;
z-index: 2;
padding: 0.6rem 1.1rem;
font-size: 0.75rem;
gap: 0.5rem;
}
.map-directions-secondary {
position: absolute;
top: 3.6rem; right: 1rem;
z-index: 2;
font-size: 0.68rem;
color: var(--color-fg);
background: rgba(10, 10, 10, 0.72);
padding: 0.5rem 0.9rem;
border: 1px solid var(--color-border);
}
.map-directions-secondary:hover { border-color: var(--color-accent); color: var(--color-accent); }
@media (min-width: 1024px) {
.contact-grid { grid-template-columns: 1fr 1fr; align-items: start; }
.contact-map { min-height: 740px; }
}
/* Kontaktformular */
.contact-form-wrap {
width: var(--container);
margin: 4rem auto 0;
padding-top: 3rem;
border-top: 1px solid var(--color-border);
}
.contact-form-heading { font-size: clamp(1.3rem, 2.6vw, 1.75rem); margin-bottom: 0.75rem; }
.contact-form-sub { color: var(--color-fg-muted); max-width: 60ch; margin-bottom: 2.5rem; }
.contact-form { max-width: 720px; }
.form-row { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.form-field { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.5rem; }
.form-field label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-fg-muted); }
.form-optional { text-transform: none; letter-spacing: normal; }
.form-field input,
.form-field select,
.form-field textarea {
width: 100%;
padding: 0.85rem 0;
background: transparent;
border: none;
border-bottom: 1px solid var(--color-border);
color: var(--color-fg);
font-family: var(--font-body);
font-size: 0.98rem;
transition: border-color var(--dur-fast) var(--ease-lux);
}
.form-field select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 0.2rem center;
background-size: 16px;
}
.form-field select option { background: var(--color-bg-elevated); color: var(--color-fg); }
.form-field textarea { resize: vertical; min-height: 6rem; font-family: var(--font-body); }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
outline: none;
border-color: var(--color-accent);
}
.form-field input:invalid:not(:placeholder-shown) { border-color: rgba(211, 47, 47, 0.5); }
.form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-footer {
display: flex;
flex-direction: column-reverse;
align-items: flex-start;
gap: 1rem;
}
.form-status { font-size: 0.85rem; min-height: 1.2em; }
.form-status[data-state="success"] { color: #4CAF50; }
.form-status[data-state="error"] { color: var(--color-accent); }
@media (min-width: 640px) {
.form-row { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.form-footer { flex-direction: row; align-items: center; justify-content: space-between; }
}
/* --------------------------------------------------------------------------
14a. AUTOHANDEL
-------------------------------------------------------------------------- */
.autohandel-hero { width: var(--container); margin: 0 auto; }
.autohandel-hero .lede {
font-size: clamp(1.05rem, 1.8vw, 1.3rem);
color: var(--color-fg);
max-width: 70ch;
line-height: 1.6;
}
.autohandel-hero .lede strong { color: var(--color-accent); font-weight: 500; }
.autohandel-features { width: var(--container); margin: 0 auto; }
.autohandel-features-list {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
.autohandel-feature {
display: flex;
flex-direction: column;
padding: 1.5rem 1.5rem 1.75rem;
border: 1px solid var(--color-border);
background: var(--color-bg-elevated);
transition: border-color var(--dur-fast) var(--ease-lux);
}
.autohandel-feature:hover, .autohandel-feature.is-open { border-color: var(--color-accent); }
/* Bewusst kleiner und mit Radius, statt randabschneidend wie in der
Galerie-Sektion — soll dort nicht wie eine zweite Bildergalerie wirken. */
.autohandel-feature-photo {
width: 60%;
max-width: 11rem;
aspect-ratio: 1 / 1;
margin: 0 0 1.25rem;
border-radius: 999px;
overflow: hidden;
}
.autohandel-feature-photo img {
width: 100%; height: 100%; object-fit: cover;
transition: transform var(--dur-med) var(--ease-lux);
}
.autohandel-feature:hover .autohandel-feature-photo img,
.autohandel-feature.is-open .autohandel-feature-photo img { transform: scale(1.06); }
.autohandel-feature-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
width: 100%;
padding: 0 0 0.6rem;
text-align: left;
cursor: pointer;
}
.autohandel-feature-title { font-size: 1.08rem; font-weight: 500; color: var(--color-fg); }
.autohandel-feature-arrow {
width: 18px; height: 18px; flex-shrink: 0;
color: var(--color-accent);
transition: transform var(--dur-fast) var(--ease-lux);
}
.autohandel-feature:hover .autohandel-feature-arrow,
.autohandel-feature.is-open .autohandel-feature-arrow { transform: rotate(180deg); }
.autohandel-feature-teaser { font-size: 0.9rem; color: var(--color-fg-muted); line-height: 1.5; }
/* Höhen-Animation via Grid-Rows-Trick, wie beim FAQ-Accordion — öffnet
sowohl per Hover (Maus) als auch per Klick/Tastatur (.is-open). */
.autohandel-feature-panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows var(--dur-med) var(--ease-lux);
}
.autohandel-feature:hover .autohandel-feature-panel,
.autohandel-feature.is-open .autohandel-feature-panel { grid-template-rows: 1fr; }
.autohandel-feature-panel-inner { overflow: hidden; }
.autohandel-feature-panel p { padding-top: 0.6rem; font-size: 0.88rem; line-height: 1.55; color: var(--color-fg-muted); }
@media (min-width: 640px) {
.autohandel-features-list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.autohandel-features-list { grid-template-columns: repeat(3, 1fr); }
}
.autohandel-contact { width: var(--container); margin: 0 auto; }
.autohandel-contact-card {
max-width: 32rem;
padding: 2.5rem;
border: 1px solid var(--color-border);
background: var(--color-bg-elevated);
}
.autohandel-contact-card > .mono { display: block; font-size: 0.72rem; color: var(--color-fg-muted); margin-bottom: 1.75rem; }
.autohandel-contact-card .contact-list { margin: 0 0 2rem; font-size: 0.95rem; }
.autohandel-contact-card .contact-list li { margin-bottom: 0.5rem; }
.autohandel-contact-card .contact-list em { font-style: normal; color: var(--color-fg-muted); }
.autohandel-contact-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
/* --------------------------------------------------------------------------
15. FOOTER
-------------------------------------------------------------------------- */
.site-footer { width: var(--container); margin: 0 auto; padding: 4rem 0 3rem; border-top: 1px solid var(--color-border); }
/* Kontaktblock: Logo mittig oben, darunter Standorte links / Aktionen rechts */
.footer-contact { display: flex; flex-direction: column; align-items: center; gap: 2.5rem; margin-bottom: 3rem; padding-bottom: 3rem; border-bottom: 1px solid var(--color-border); }
.footer-contact-logo { justify-content: center; }
.footer-contact-logo .logo-img { height: 64px; }
.footer-contact-grid { display: grid; gap: 2.5rem; width: 100%; text-align: center; }
.footer-locations { display: flex; flex-direction: column; gap: 1.5rem; }
.footer-location address { font-size: 0.95rem; color: var(--color-fg); margin-top: 0.4rem; }
.footer-location-label { font-size: 0.65rem; color: var(--color-accent); }
.footer-actions { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.footer-action { display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; color: var(--color-fg-muted); }
.footer-action svg { width: 18px; height: 18px; flex-shrink: 0; }
.footer-action:hover { color: var(--color-accent); }
.footer-top { display: flex; flex-direction: column; gap: 2rem; margin-bottom: 3rem; }
.footer-top nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; font-size: 0.85rem; color: var(--color-fg-muted); }
.footer-top nav a.is-active { color: var(--color-accent); }
.footer-bottom p { font-size: 0.62rem; color: var(--color-fg-muted); margin-bottom: 0.5rem; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 1rem; font-size: 0.62rem; }
.footer-legal a, .footer-legal button { color: var(--color-fg-muted); text-decoration: underline; }
.footer-legal a:hover, .footer-legal button:hover { color: var(--color-accent); }
@media (min-width: 640px) {
.footer-contact-grid { grid-template-columns: 1fr 1fr; text-align: left; }
.footer-locations { text-align: left; }
.footer-actions { align-items: flex-start; }
}
@media (min-width: 768px) {
.footer-top nav { justify-content: space-between; }
}
/* --------------------------------------------------------------------------
16a. COOKIE-BANNER — siehe assets/js/cookie-consent.js
-------------------------------------------------------------------------- */
.cookie-banner {
position: fixed;
left: 50%;
bottom: calc(var(--bottom-nav-height) + 1rem);
transform: translateX(-50%);
z-index: 9997;
width: min(560px, calc(100vw - 2rem));
}
.cookie-banner-card {
background: rgba(14, 14, 14, 0.97);
border: 1px solid var(--color-border);
border-left: 3px solid var(--color-accent);
border-radius: 16px;
padding: 1.6rem 1.75rem;
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
.cookie-banner-eyebrow { display: block; font-size: 0.68rem; color: var(--color-accent); margin-bottom: 0.75rem; }
.cookie-banner-text { font-size: 0.86rem; color: var(--color-fg); margin-bottom: 1rem; }
.cookie-banner-text a { color: var(--color-fg); text-decoration: underline; }
.cookie-banner-details-toggle {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.75rem;
color: var(--color-fg-muted);
text-decoration: underline;
margin-bottom: 1.1rem;
}
.cookie-banner-details-toggle:hover { color: var(--color-fg); }
.cookie-banner-details-icon {
width: 8px; height: 8px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg);
transition: transform var(--dur-fast) var(--ease-lux);
}
.cookie-banner-details-toggle[aria-expanded="true"] .cookie-banner-details-icon { transform: rotate(225deg); }
.cookie-banner-details {
display: flex;
flex-direction: column;
gap: 1.1rem;
margin-bottom: 1.25rem;
padding-top: 1.1rem;
border-top: 1px solid var(--color-border);
}
.cookie-category-head { display: flex; align-items: center; gap: 0.75rem; justify-content: space-between; }
.cookie-category-name { font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; }
.cookie-category-state { font-size: 0.62rem; color: var(--color-fg-muted); }
.cookie-category-desc { font-size: 0.76rem; color: var(--color-fg-muted); margin-top: 0.5rem; }
.cookie-category-desc a { color: var(--color-fg-muted); text-decoration: underline; }
.cookie-category-desc a:hover { color: var(--color-accent); }
/* Toggle-Switch für die einzeln zuschaltbare externe Kategorie (Google Maps) */
.cookie-toggle { position: relative; display: inline-flex; flex-shrink: 0; }
.cookie-toggle input {
position: absolute;
inset: 0;
opacity: 0;
margin: 0;
cursor: pointer;
}
.cookie-toggle-track {
position: relative;
display: block;
width: 38px; height: 22px;
border-radius: 999px;
background: var(--color-border);
transition: background var(--dur-fast) var(--ease-lux);
}
.cookie-toggle-track::after {
content: '';
position: absolute;
top: 2px; left: 2px;
width: 18px; height: 18px;
border-radius: 50%;
background: var(--color-fg-muted);
transition: transform var(--dur-fast) var(--ease-lux), background var(--dur-fast) var(--ease-lux);
}
.cookie-toggle input:checked + .cookie-toggle-track { background: rgba(211, 47, 47, 0.35); }
.cookie-toggle input:checked + .cookie-toggle-track::after { transform: translateX(16px); background: var(--color-accent); }
.cookie-toggle input:focus-visible + .cookie-toggle-track { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.cookie-banner-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.cookie-banner-actions button {
flex: 1 1 auto;
padding: 0.8rem 1.25rem;
border-radius: 999px;
font-family: var(--font-display);
font-weight: 600;
font-size: 0.84rem;
text-align: center;
transition: opacity var(--dur-fast) ease;
}
#cookie-accept { background: var(--color-accent); color: var(--color-fg); }
#cookie-reject { background: transparent; border: 1px solid var(--color-border); color: var(--color-fg); }
.cookie-banner-save { background: var(--color-fg); color: var(--color-bg); }
#cookie-accept:hover, #cookie-reject:hover, .cookie-banner-save:hover { opacity: 0.82; }
/* --------------------------------------------------------------------------
17. ACCESSIBILITY — reduzierte Bewegung
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.scroll-cue-line, .map-pin::after, .ambient-blob { animation: none; }
.booking-graphic-glow, .booking-graphic-ping, .booking-graphic-check { animation: none; }
.booking-graphic-glow { opacity: 0.16; }
.booking-graphic-ping { opacity: 0; }
.booking-graphic-check { stroke-dashoffset: 0; opacity: 1; }
[data-reveal] { opacity: 1; transform: none; transition: none; }
.hero-title .line, .hero-media-img, .hero-tag, .hero-footer {
animation: none;
opacity: 1;
transform: none;
}
}
/* --------------------------------------------------------------------------
18. CONTAINER PADDING HELPER
-------------------------------------------------------------------------- */
@media (min-width: 640px) { :root { --container-pad: 5vw; } }
@media (min-width: 1440px) { :root { --container-pad: max(3vw, calc((100vw - 1400px) / 2)); } }
/* --------------------------------------------------------------------------
19. TERMIN BUCHEN — öffentliche Buchungsseite (termin.php)
Bewusst ein eigener, einfacher Header statt des mehrzeiligen .site-header
der Hauptseiten — diese Seite ist ein reduzierter Buchungs-Deeplink ohne
Navigation, daher unabhängig von --nav-height (dessen Wert per JS auf die
Höhe des mehrzeiligen Haupt-Headers eingemessen wird, siehe script.js).
-------------------------------------------------------------------------- */
.booking-page-header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 500;
height: 84px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 var(--container-pad, 4vw);
background: rgba(10, 10, 10, 0.7);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid var(--color-border);
}
.booking-back-link { font-size: 0.78rem; color: var(--color-fg-muted); transition: color var(--dur-fast) var(--ease-lux); }
.booking-back-link:hover { color: var(--color-accent); }
.booking-page { padding-top: 84px; min-height: 100vh; }
.booking-hero { width: var(--container); margin: 0 auto; padding: clamp(3rem, 8vw, 6rem) 0 3rem; text-align: center; }
.booking-hero h1, .booking-hero h2 { font-size: clamp(2rem, 5vw, 3.5rem); margin: 1rem 0; }
.booking-hero-sub { color: var(--color-fg-muted); max-width: 50ch; margin: 0 auto; }
.booking-form-section { width: var(--container); max-width: 760px; margin: 0 auto; padding-bottom: 6rem; }
.booking-step { margin-bottom: 2.5rem; }
.booking-step-label { display: block; font-size: 0.72rem; color: var(--color-accent); margin-bottom: 0.85rem; }
#bf-service, #bf-date {
width: 100%;
padding: 1rem 0;
background: transparent;
border: none;
border-bottom: 1px solid var(--color-border);
color: var(--color-fg);
font-family: var(--font-display);
font-size: 1.3rem;
transition: border-color var(--dur-fast) var(--ease-lux);
}
#bf-service:focus, #bf-date:focus { outline: none; border-color: var(--color-accent); }
#bf-service option { background: var(--color-bg-elevated); }
.slot-date-label { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; margin-bottom: 0.85rem; min-height: 1.3em; }
.slot-grid { display: flex; flex-wrap: wrap; gap: 0.6rem; min-height: 3rem; align-items: center; }
.slot-hint { color: var(--color-fg-muted); font-size: 0.9rem; }
.slot-btn {
padding: 0.6rem 1.1rem;
border: 1px solid var(--color-border);
border-radius: 999px;
background: transparent;
color: var(--color-fg);
font-family: var(--font-mono);
font-size: 0.85rem;
cursor: pointer;
transition: border-color var(--dur-fast) var(--ease-lux), background var(--dur-fast) var(--ease-lux), color var(--dur-fast) var(--ease-lux);
}
.slot-btn:hover { border-color: var(--color-fg-muted); }
.slot-btn.is-selected { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-fg); }
.slot-btn:disabled { opacity: 0.4; cursor: not-allowed; }
/* --------------------------------------------------------------------------
20. POPUP-HINWEIS — Abwesenheiten & Ankündigungen
-------------------------------------------------------------------------- */
.notice-popup {
position: fixed;
z-index: 700;
left: 1.5rem;
bottom: calc(var(--bottom-nav-height) + 1.5rem);
width: min(380px, calc(100vw - 3rem));
opacity: 0;
transform: translateY(16px);
transition: opacity var(--dur-med) var(--ease-lux), transform var(--dur-med) var(--ease-lux);
pointer-events: none;
}
.notice-popup.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.notice-popup-card {
position: relative;
padding: 1.5rem 2.5rem 1.5rem 1.5rem;
background: rgba(18, 18, 18, 0.85);
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
border: 1px solid var(--color-border);
border-left: 2px solid var(--color-accent);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.notice-popup-eyebrow { display: block; font-size: 0.65rem; color: var(--color-accent); margin-bottom: 0.6rem; }
.notice-popup-title { font-size: 1.1rem; margin-bottom: 0.5rem; }
.notice-popup-message { font-size: 0.88rem; color: var(--color-fg-muted); margin: 0; }
.notice-popup-close {
position: absolute;
top: 1rem;
right: 1rem;
width: 22px;
height: 22px;
color: var(--color-fg-muted);
transition: color var(--dur-fast) var(--ease-lux);
}
.notice-popup-close svg { width: 100%; height: 100%; }
.notice-popup-close:hover { color: var(--color-fg); }
@media (min-width: 1024px) {
.notice-popup { bottom: 1.5rem; }
}
/* --------------------------------------------------------------------------
21. LEGAL PAGES — Impressum & Datenschutzerklärung
-------------------------------------------------------------------------- */
.legal-page { padding-bottom: 6rem; }
.legal-content { width: min(72ch, var(--container)); margin: 0 auto; }
.legal-content h3 { font-size: 1.05rem; margin: 2.25rem 0 0.75rem; }
.legal-content h3:first-child { margin-top: 0; }
.legal-content p, .legal-content ul { margin-bottom: 1rem; font-size: 0.92rem; }
.legal-content ul { padding-left: 1.25rem; }
.legal-content li { margin-bottom: 0.4rem; }
.legal-content a { text-decoration: underline; }
.legal-content a:hover { color: var(--color-accent); }
.legal-updated { font-size: 0.7rem; margin-top: 2rem; }
/* Minimale Rechtslinks auf der reduzierten Buchungsseite (termin.php) */
.booking-page-legal {
width: var(--container);
margin: 0 auto;
padding: 0 0 3rem;
justify-content: center;
}
/* --------------------------------------------------------------------------
22. TERMIN-BUCHUNG POPUP — global verfügbares Buchungsformular, per
[data-open-booking] aus Header/Hero/Kontaktseite/etc. aufrufbar, siehe
assets/js/booking-modal.js. Inhalt/Klassen (.booking-hero,
.booking-form-section, …) identisch zur eigenständigen Seite termin.php,
nur die Breiten/Abstände werden hier auf die Popup-Box skaliert.
-------------------------------------------------------------------------- */
.booking-modal-overlay {
position: fixed;
inset: 0;
z-index: 9990;
display: none;
align-items: flex-start;
justify-content: center;
overflow-y: auto;
padding: clamp(1.5rem, 8vw, 6rem) 1.25rem;
background: rgba(10, 10, 10, 0.85);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
animation: lightbox-fade 0.18s ease;
}
.booking-modal-overlay.is-open { display: flex; }
.booking-modal-box {
position: relative;
width: 100%;
max-width: 780px;
margin: auto 0;
background: var(--color-bg);
border: 1px solid var(--color-border);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
padding: clamp(2rem, 5vw, 3rem) clamp(1.25rem, 5vw, 3rem) clamp(2.5rem, 6vw, 3.5rem);
}
.booking-modal-close {
position: absolute;
top: 1.1rem;
right: 1.1rem;
z-index: 1;
width: 2.2rem;
height: 2.2rem;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-fg-muted);
border: 1px solid var(--color-border);
border-radius: 50%;
transition: color var(--dur-fast) var(--ease-lux), border-color var(--dur-fast) var(--ease-lux);
}
.booking-modal-close svg { width: 16px; height: 16px; }
.booking-modal-close:hover { color: var(--color-accent); border-color: var(--color-accent); }
.booking-modal-box .booking-hero { width: auto; padding: 0 0 2.5rem; }
.booking-modal-box .booking-hero h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); }
.booking-modal-box .booking-form-section { width: auto; max-width: none; padding-bottom: 0; }