/* === Selbst-gehostete Fonts (Marcellus + Hanken Grotesk), Google-Verbindung entfernt 2026-06-09 === */
/* cyrillic-ext */
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/gf-1.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/gf-2.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/gf-3.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/gf-4.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/gf-1.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/gf-2.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/gf-3.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/gf-4.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(../fonts/gf-1.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(../fonts/gf-2.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(../fonts/gf-3.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(../fonts/gf-4.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(../fonts/gf-1.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(../fonts/gf-2.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(../fonts/gf-3.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(../fonts/gf-4.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Marcellus';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/gf-17.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Marcellus';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/gf-18.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* =====================================================
DJ Alex Maus — Premium-Variante (nach v3-Skill + NG-Pattern)
Stack: vanilla HTML/CSS/JS, Bebas Neue + Inter
Section-Reihenfolge: Hero → Trust → Probleme → Methode → Leistungen → Ablauf → Party → About (spät) → FAQ → CTA-Final → Footer
===================================================== */
:root {
/* === EVENT-THEME Default (Dark warm-schwarz mit Champagner-Akzent, NICHT Bling-Gold) === */
/* v111: Graustufen beruhigt — kleine Deltas, kein hartes Section-Springen. Tiefe via Fotos + Gold. */
/* v116: tiefes warmes Fast-Schwarz statt totem Mittel-Grau — Club-Look, Gold-Glows + Fotos poppen */
--c-bg: #0f0e0c; /* tiefe warme Basis (Nightlife, nicht grau-tot) */
--c-bg-1: #131210; /* Hauch ueber Base */
--c-bg-2: #1d1b17; /* Card-/Surface-Flaeche, leicht angehoben (premium „raised") */
--c-bg-3: #161410; /* Akzent-Section: dezent, Identitaet via Glow/Linie/Silhouette */
--c-gold: #d4a574; /* gedämpftes Champagner */
--c-gold-bright: #ddb287;
--c-gold-dim: #8a7558;
--c-brown: #a68455;
--c-text: #f0ede5;
--c-text-soft: #c8c2b6; /* zwischen text und text-2 fuer Body-Lead */
--c-text-2: #b8b3aa;
--c-text-3: #8a8780;
--c-line: rgba(212, 165, 116, 0.22);
--c-line-soft: rgba(255, 255, 255, 0.10);
/* Opacity-Hierarchie nach Skill */
--o-100: 1;
--o-87: 0.87;
--o-70: 0.70;
--o-50: 0.50;
/* Fonts — Elegante Display-Serife (DM Serif Display, Jazmín-Richtung) + Inter Body */
--font-head: 'Marcellus', Georgia, 'Times New Roman', serif;
--font-body: 'Hanken Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
/* Layout */
--container: 1320px;
--container-narrow: 880px;
--pad-x: clamp(20px, 4vw, 56px);
--section-y: clamp(72px, 7vw, 140px);
--frame-inset: clamp(20px, 3vw, 44px);
/* Easing */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease: cubic-bezier(0.25, 1, 0.5, 1);
--t-fast: 180ms var(--ease);
--t: 280ms var(--ease);
}
/* === HOCHZEIT-THEME (Brandboard Alex Maus: heller Off-White Bg + Beige als Accent) === */
body.theme-hochzeit {
--c-bg: #ffffff; /* reines Weiß als Hauptfläche — crisp, editorial */
--c-bg-1: #faf9f6; /* v115: kaum vom Weiß zu unterscheiden — beendet das Weiß/Creme-Zebra */
--c-bg-2: #efe9df; /* Cream NUR für Card-/Accent-Surface, nicht für ganze Sektionen */
--c-bg-3: #4a342a; /* Brandboard tiefes Schokobraun (dunkle Akzent-Sektionen) */
--c-gold: #4a342a; /* TIEFES SCHOKOBRAUN als primärer Akzent (CTA, Underlines, Stats, Bullets) */
--c-gold-bright: #b2967d; /* Brandboard Tabak für Hover/Highlights */
--c-gold-dim: #b7a996; /* mittel Beige für subtle Akzente */
--c-brown: #4a342a; /* Brandboard tiefes Braun */
--c-text: #000000; /* Schwarz nur als Body-Text-Farbe */
--c-text-2: #4a342a; /* tiefes Braun für Sekundärtext */
--c-text-3: #8a7f70; /* gedämpfter Beige-Grau für Caption */
--c-line: rgba(74, 52, 42, 0.25);
/* Dark-Section-Tokens (für rhythmische Section-Wechsel innerhalb Hochzeit) */
--c-dark-bg: #4a342a; /* tiefes Schokobraun für dunkle Sektionen */
--c-dark-text: #d9d2c9; /* helles Beige für Text auf Dark */
--c-dark-muted: #b7a996;
--c-dark-line: rgba(178, 150, 125, 0.30);
--c-line-soft: rgba(31, 26, 20, 0.08);
}
/* =========== Reset =========== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
background: var(--c-bg);
color: var(--c-text);
font-family: var(--font-body);
font-weight: 400;
font-size: 16px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: clip;
position: relative;
min-height: 0;
overscroll-behavior-y: none;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--c-gold-bright); }
ul, ol { list-style: none; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
.skip-link {
position: absolute;
left: -9999px;
padding: 12px 16px;
background: var(--c-gold);
color: var(--c-bg);
z-index: 999;
}
.skip-link:focus { left: 16px; top: 16px; }
/* =========== Vergleichs-Toggle (Premium / PDF) =========== */
.version-toggle {
position: fixed;
top: 14px;
left: 50%;
transform: translateX(-50%);
z-index: 200;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px;
background: rgba(15, 15, 15, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(196, 164, 132, 0.3);
border-radius: 100px;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
}
.version-toggle-label {
font-family: var(--font-body);
font-weight: 600;
font-size: 10px;
letter-spacing: 1.8px;
text-transform: uppercase;
color: var(--c-text-3);
padding: 0 10px 0 12px;
}
.version-toggle-btn {
display: inline-flex;
align-items: center;
padding: 7px 16px;
font-family: var(--font-body);
font-weight: 700;
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--c-text-2);
border-radius: 100px;
transition: all var(--t-fast);
}
.version-toggle-btn:hover {
color: var(--c-gold);
}
.version-toggle-btn.is-active {
background: var(--c-gold);
color: var(--c-bg);
}
@media (max-width: 640px) {
.version-toggle { top: 8px; padding: 3px; }
.version-toggle-label { display: none; }
.version-toggle-btn { padding: 6px 12px; font-size: 10px; }
}
/* =========== Anlass-Switch als Segmented-Pill =========== */
.kicker-switch {
display: inline-flex;
align-items: stretch;
margin-bottom: 26px;
padding: 5px;
background: rgba(0, 0, 0, 0.35);
border: 1px solid var(--c-gold);
border-radius: 999px;
position: relative;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
body.theme-hochzeit .kicker-switch {
background: rgba(255, 255, 255, 0.55);
border-color: var(--c-gold);
box-shadow: 0 8px 24px rgba(106, 74, 44, 0.12);
}
.kicker-sep { display: none; }
.kicker-btn {
font-family: var(--font-body);
font-weight: 700;
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--c-text-2);
background: transparent;
border: 0;
padding: 9px 22px;
cursor: pointer;
border-radius: 999px;
transition: color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
white-space: nowrap;
}
.kicker-btn:hover { color: var(--c-gold-bright); }
.kicker-btn.is-active {
color: #0c0c0e;
background: linear-gradient(180deg, var(--c-gold-bright), var(--c-gold));
box-shadow: 0 4px 14px rgba(167, 131, 72, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
body.theme-hochzeit .kicker-btn.is-active {
color: #f5efe5;
background: linear-gradient(180deg, var(--c-gold), var(--c-brown));
box-shadow: 0 4px 14px rgba(106, 74, 44, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
@media (max-width: 600px) {
.kicker-btn { padding: 8px 16px; font-size: 11px; letter-spacing: 1.5px; }
}
/* =========== Globale Page-Frame (entfernt) =========== */
.page-frame-global,
.pf-line,
.pf-line-l,
.pf-line-r,
.pf-dot,
.pf-dot-tl,
.pf-dot-tr,
.pf-dot-bl,
.pf-dot-br { display: none !important; }
/* =========== Container & Section =========== */
.container {
width: 100%;
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--pad-x);
position: relative;
}
.section {
position: relative;
padding: var(--section-y) 0;
background: var(--c-bg);
}
/* =========== Typografie =========== */
h1, h2, h3 {
font-family: var(--font-head);
font-weight: 400; /* DM Serif Display hat nur einen Schnitt (400) — kein Fake-Fett */
line-height: 1.04;
letter-spacing: -0.005em; /* Serife wirkt mixed-case am edelsten, kein Uppercase mehr */
text-transform: none;
text-wrap: balance;
}
h1 { font-size: clamp(36px, 4.8vw, 64px); letter-spacing: -0.01em; line-height: 1.02; }
h2 { font-size: clamp(28px, 3.4vw, 50px); letter-spacing: -0.008em; line-height: 1.08; }
h3 { font-size: clamp(21px, 1.9vw, 28px); letter-spacing: 0; line-height: 1.2; }
/* h4 bleibt Sans-Label (kleine Caps), nicht Serife */
h4 { font-family: var(--font-body); font-weight: 700; font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; }
/* DM Serif Display = single-weight: Display-Zahlen/Akzent-Headlines auf 400 statt Fake-600 */
.counter-num, .vorteile-intro h2, .vorteile-title, .marquee-track > span,
.methode-row-num, .timeline-step-num, .mix-card-genre, .dest-editorial-title,
.trust-stat b, .trust-grid b, .konzept-num, .warum-num, .step-num,
.soundbite-quote p, .parallax-quote-text q { font-weight: 400; }
/* Logo-Wortmarke bleibt klare Sans (Serife-Caps mit Tracking wirkt fummelig) */
.logo-text, .logo-stack { font-family: var(--font-body); font-weight: 700; }
p { color: var(--c-text-2); margin-bottom: 14px; text-wrap: pretty; }
strong {
color: var(--c-text);
font-weight: 600;
background-image: linear-gradient(120deg, transparent 0%, rgba(196, 164, 132, 0.18) 60%, transparent 100%);
background-repeat: no-repeat;
background-size: 100% 0.45em;
background-position: 0 88%;
}
/* Hell-Theme: kräftigere Gold-Highlight-Spur damit sie auf Cream sichtbar bleibt */
body.theme-hochzeit strong {
background-image: linear-gradient(120deg, transparent 0%, rgba(138, 106, 62, 0.28) 60%, transparent 100%);
}
.lead strong,
.hero-lead strong {
background-size: 100% 0.4em;
}
/* v131 Alex: in FAQ-Antworten nur fett, KEIN brauner Highlight-Strich.
Höhere Spezifität nötig, sonst gewinnt `body.theme-hochzeit strong` (0,1,2). */
.faq-answer strong,
body.theme-hochzeit .faq-answer strong {
background-image: none;
}
.kicker {
display: inline-block;
font-family: var(--font-body);
font-weight: 700;
font-size: 12px;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--c-gold);
margin-bottom: 18px;
position: relative;
padding-left: 38px;
}
.kicker::before {
content: ""; position: absolute;
left: 0; top: 50%;
width: 28px; height: 1px;
background: var(--c-gold);
}
.kicker-on-image {
background: transparent;
padding: 0;
text-shadow: 0 2px 8px rgba(0,0,0,0.55);
}
/* Inline-CTA zwischen Sektionen */
.inline-cta {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
margin-top: clamp(40px, 5vw, 64px);
padding: 28px 32px;
border: 1px solid rgba(196, 164, 132, 0.22);
background: rgba(196, 164, 132, 0.04);
flex-wrap: wrap;
text-align: center;
}
.inline-cta p {
font-family: var(--font-body);
font-weight: 500;
font-size: clamp(16px, 1.2vw, 19px);
color: var(--c-text);
margin: 0;
}
.lead {
font-family: var(--font-body);
font-weight: 300;
font-size: clamp(16px, 1.15vw, 18.5px);
line-height: 1.55;
color: var(--c-text-2);
margin-bottom: 20px;
margin-top: 14px;
text-wrap: pretty;
}
/* =========== Section-Head =========== */
.section-head {
max-width: 760px;
margin-bottom: 56px;
}
.section-head-center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
/* =========== Logo =========== */
.logo {
display: inline-flex;
align-items: center;
gap: 12px;
color: var(--c-gold);
}
.logo svg { width: 64px; height: auto; }
.logo-text {
font-family: var(--font-head);
font-size: 24px;
letter-spacing: 3.5px;
color: var(--c-gold);
text-transform: uppercase;
line-height: 1;
}
.logo-vertical { flex-direction: column; gap: 8px; align-items: center; }
.logo-vertical svg { width: 72px; }
.logo-stack {
font-family: var(--font-head);
font-size: 18px;
letter-spacing: 2.5px;
color: var(--c-gold);
text-align: center;
line-height: 1.1;
text-transform: uppercase;
}
/* =========== Buttons =========== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 28px;
font-family: var(--font-body);
font-weight: 700;
font-size: 13px;
letter-spacing: 1.8px;
text-transform: uppercase;
border: 1px solid transparent;
cursor: pointer;
transition: all var(--t-fast);
background: transparent;
color: var(--c-text);
border-radius: 0;
min-height: 44px;
text-decoration: none;
}
.btn .arrow { transition: transform var(--t-fast); }
.btn:hover .arrow { transform: translateX(4px); }
.btn-primary {
background: var(--c-gold);
color: var(--c-bg); /* Theme-aware: hell auf dunkel-Akzent / dunkel auf hell-Akzent */
border-color: var(--c-gold);
}
.btn-primary:hover {
background: var(--c-gold-bright);
border-color: var(--c-gold-bright);
color: var(--c-bg);
}
.btn-ghost {
border-color: var(--c-gold);
color: var(--c-text);
}
.btn-ghost:hover {
background: var(--c-gold);
color: var(--c-bg);
}
.btn-large { padding: 18px 40px; font-size: 16px; }
.btn-header {
padding: 10px 22px;
font-size: 13px;
letter-spacing: 2px;
border: 1px solid var(--c-gold);
color: var(--c-text);
}
.btn-header:hover { background: var(--c-gold); color: var(--c-bg); }
/* =====================================================
NAV — sticky
===================================================== */
.nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 18px clamp(56px, 6vw, 88px);
background: linear-gradient(to bottom, rgba(5,5,5,0.85) 0%, rgba(5,5,5,0.45) 70%, rgba(5,5,5,0) 100%);
backdrop-filter: blur(2px);
transition: background var(--t), padding var(--t);
}
body.theme-hochzeit .nav {
background: linear-gradient(to bottom, rgba(245,239,229,0.92) 0%, rgba(245,239,229,0.55) 70%, rgba(245,239,229,0) 100%);
}
.nav.is-scrolled {
background: rgba(5,5,5,0.95);
padding-top: 12px;
padding-bottom: 12px;
box-shadow: 0 1px 0 rgba(255,255,255,0.06);
}
body.theme-hochzeit .nav.is-scrolled {
background: rgba(250,246,239,0.96);
box-shadow: 0 1px 0 var(--c-line-soft);
}
.nav { transition: background var(--t), padding var(--t), box-shadow var(--t); }
.nav-links {
display: flex;
align-items: center;
gap: 28px;
margin-left: auto;
margin-right: 24px;
}
.nav-links a {
font-family: var(--font-body);
font-weight: 600;
font-size: 13px;
letter-spacing: 1.5px;
line-height: 1;
color: var(--c-text);
text-transform: uppercase;
position: relative;
}
.nav-links a::after {
content: "";
position: absolute;
left: 0; bottom: -6px;
width: 0; height: 1px;
background: var(--c-gold);
transition: width var(--t-fast);
}
.nav-links a:hover { color: var(--c-text); }
.nav-links a:hover::after { width: 100%; }
.nav-links a.nav-current { color: var(--c-gold); }
.nav-links a.nav-current::after {
width: 100%;
background: var(--c-gold);
}
/* Dropdown "Weitere Services" — Hover Desktop / Tap Mobile */
.nav-dropdown { position: relative; display: inline-flex; align-items: center; }
.nav-dropdown-toggle {
font-family: var(--font-body);
font-weight: 600;
font-size: 13px;
letter-spacing: 1.5px;
line-height: 1;
color: var(--c-text);
text-transform: uppercase;
background: transparent;
border: 0;
padding: 0;
margin: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
position: relative;
vertical-align: baseline;
}
.nav-dropdown-toggle::after {
content: "";
position: absolute;
left: 0; bottom: -6px;
width: 0; height: 1px;
background: var(--c-gold);
transition: width var(--t-fast);
}
.nav-dropdown:hover .nav-dropdown-toggle::after,
.nav-dropdown.is-open .nav-dropdown-toggle::after { width: 100%; }
.nav-dropdown-arrow {
font-size: 9px;
transition: transform var(--t-fast);
}
.nav-dropdown:hover .nav-dropdown-arrow,
.nav-dropdown.is-open .nav-dropdown-arrow { transform: rotate(180deg); }
.nav-dropdown-menu {
position: absolute;
top: calc(100% + 18px);
left: 50%;
transform: translateX(-50%) translateY(-4px);
min-width: 220px;
background: rgba(12, 12, 14, 0.96);
backdrop-filter: blur(10px);
border: 1px solid rgba(196, 164, 132, 0.35);
border-radius: 4px;
padding: 10px 0;
opacity: 0;
visibility: hidden;
transition: opacity .22s, visibility .22s, transform .22s;
z-index: 110;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
body.theme-hochzeit .nav-dropdown-menu {
background: rgba(250, 246, 239, 0.98);
border-color: rgba(168, 132, 92, 0.35);
box-shadow: 0 12px 32px rgba(106, 74, 44, 0.18);
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.nav-dropdown-menu a {
display: block;
font-family: var(--font-body);
font-weight: 600;
font-size: 13px;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--c-text);
padding: 11px 22px;
white-space: nowrap;
transition: background .15s, color .15s;
text-align: left;
}
.nav-dropdown-menu a::after { display: none; }
.nav-dropdown-menu a:hover {
background: rgba(196, 164, 132, 0.10);
color: var(--c-gold);
}
.nav-dropdown-menu a.nav-current {
color: var(--c-gold);
}
/* Burger-CTA nur in Mobile-Drawer sichtbar, Desktop hat den .btn-header rechts */
.nav-cta-mobile { display: none; }
/* =========== Theme-Switch im Header (Desktop) + im Drawer (Mobile) =========== */
.nav-switch-wrap {
display: inline-flex;
align-items: center;
gap: 10px;
margin-right: 16px;
}
.nav-switch-label {
font-family: var(--font-body);
font-weight: 700;
font-size: 11px;
letter-spacing: 2.2px;
text-transform: uppercase;
color: var(--c-gold-bright);
white-space: nowrap;
}
body.theme-hochzeit .nav-switch-label {
color: var(--c-gold);
}
.nav-switch {
position: relative;
display: inline-flex;
align-items: stretch;
padding: 4px;
background: rgba(0,0,0,0.42);
border: 1px solid rgba(196, 164, 132, 0.55);
border-radius: 999px;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
cursor: pointer;
}
body.theme-hochzeit .nav-switch {
background: rgba(255,255,255,0.55);
border-color: rgba(168, 132, 92, 0.45);
box-shadow: 0 4px 14px rgba(106,74,44,0.10), inset 0 1px 0 rgba(255,255,255,0.6);
}
/* Sliding-Thumb (der goldene Hintergrund, slidet zwischen den Buttons) */
.nav-switch-thumb {
position: absolute;
top: 4px;
bottom: 4px;
left: 4px;
width: calc(50% - 4px);
border-radius: 999px;
background: linear-gradient(180deg, var(--c-gold-bright), var(--c-gold));
box-shadow: 0 3px 10px rgba(167,131,72,0.45), inset 0 1px 0 rgba(255,255,255,0.30);
transition: transform 320ms var(--ease-out, cubic-bezier(.2,.8,.2,1));
pointer-events: none;
z-index: 0;
}
body.theme-hochzeit .nav-switch-thumb {
background: linear-gradient(180deg, var(--c-gold), var(--c-brown));
box-shadow: 0 3px 10px rgba(106,74,44,0.30), inset 0 1px 0 rgba(255,255,255,0.18);
}
.nav-switch[data-active="event"] .nav-switch-thumb { transform: translateX(100%); }
.nav-switch-btn {
position: relative;
z-index: 1;
flex: 1 1 0;
min-width: 96px;
text-align: center;
font-family: var(--font-body);
font-weight: 700;
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--c-text-2);
background: transparent;
border: 0;
padding: 7px 16px;
cursor: pointer;
border-radius: 999px;
white-space: nowrap;
text-decoration: none;
display: inline-block;
transition: color 220ms ease, transform 180ms ease;
}
a.nav-switch-btn:hover, a.nav-switch-btn:focus { text-decoration: none; }
.nav-switch-btn:hover { color: var(--c-text); transform: translateY(-1px); }
.nav-switch-btn.is-active { color: #0c0c0e; }
body.theme-hochzeit .nav-switch-btn.is-active { color: #f5efe5; }
.nav-switch:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.08); }
body.theme-hochzeit .nav-switch:hover { box-shadow: 0 6px 18px rgba(106,74,44,0.18), inset 0 1px 0 rgba(255,255,255,0.6); }
/* 1x dezenter Pulse beim Page-Load, damit Auge den Switch findet */
@keyframes nav-switch-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(196,164,132,0.55), inset 0 1px 0 rgba(255,255,255,0.05); }
50% { box-shadow: 0 0 0 8px rgba(196,164,132,0), inset 0 1px 0 rgba(255,255,255,0.05); }
}
.nav-switch { animation: nav-switch-pulse 2.4s ease-out 0.8s 2; }
@media (prefers-reduced-motion: reduce) {
.nav-switch { animation: none; }
.nav-switch-thumb { transition: none; }
}
/* Subpage-Hero: min-height nur für Mainpage-H1 mit 4-Zeilen-Switch, hier ohne */
.subpage .hero-content h1 .hero-accent { display: block; margin-top: 2px; }
.hero-subpage { min-height: 68vh; padding: 130px 0 64px; }
/* =========== Auslandshochzeit-Teaser auf Hauptseite =========== */
.section-teaser-ausland { padding: var(--section-y) 0 calc(var(--section-y) * 1.4); background: var(--c-bg); }
.teaser-card {
display: grid;
grid-template-columns: 1.4fr 1.1fr;
align-items: stretch;
background: var(--c-bg-1);
border: 1px solid var(--c-line);
border-right: 4px solid var(--c-gold);
border-left: 0;
overflow: hidden;
text-decoration: none;
color: inherit;
transition: transform var(--t), box-shadow var(--t), border-color var(--t);
position: relative;
}
.teaser-card .teaser-card-body { order: 1; }
.teaser-card .teaser-card-img { order: 2; }
.teaser-card:hover {
transform: translateY(-3px);
box-shadow: 0 14px 40px rgba(106,74,44,0.14);
border-right-color: var(--c-gold-bright);
}
.teaser-card-img {
position: relative;
min-height: 280px;
overflow: hidden;
}
.teaser-card-img img {
width: 100%; height: 100%;
object-fit: cover;
object-position: 50% 30%;
transition: transform var(--t);
}
.teaser-card:hover .teaser-card-img img { transform: scale(1.04); }
.teaser-card-body {
padding: clamp(28px, 3vw, 48px);
display: flex;
flex-direction: column;
justify-content: center;
gap: 14px;
}
.teaser-card-body h3 {
font-size: clamp(28px, 2.6vw, 40px);
color: var(--c-text);
margin: 0;
}
.teaser-card-body p {
color: var(--c-text-2);
font-size: 15.5px;
line-height: 1.55;
margin: 0;
}
.teaser-card-link {
margin-top: 6px;
font-family: var(--font-body);
font-weight: 600;
font-size: 13px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--c-gold);
display: inline-flex;
align-items: center;
gap: 8px;
}
.teaser-card-link .arrow { transition: transform var(--t-fast); }
.teaser-card:hover .teaser-card-link .arrow { transform: translateX(4px); }
@media (max-width: 720px) {
.teaser-card { grid-template-columns: 1fr; }
.teaser-card-img { min-height: 220px; }
}
/* =========== Subpage-Spezifisches (z.B. /auslandshochzeit/) =========== */
.hero-subpage .hero-media img.hero-img {
width: 100%; height: 100%; object-fit: cover;
object-position: 50% 30%;
}
.hero-subpage { min-height: 72vh; }
.section-destinations { background: var(--c-bg-1); }
.dest-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
margin-top: 32px;
}
.dest-card {
background: var(--c-bg);
border: 1px solid var(--c-line-soft);
border-left: 3px solid var(--c-gold);
padding: 28px 26px;
border-radius: 4px;
transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.dest-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(106,74,44,0.10);
border-left-color: var(--c-gold-bright);
}
.dest-card h3 {
font-size: clamp(22px, 2vw, 30px);
color: var(--c-text);
margin-bottom: 10px;
}
.dest-card p { color: var(--c-text-2); font-size: 15px; line-height: 1.55; }
.dest-card-ghost {
background: transparent;
border-style: dashed;
border-left-style: dashed;
}
@media (max-width: 900px) {
.dest-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 560px) {
.dest-grid { grid-template-columns: 1fr; }
}
/* Destinations als Editorial-Statement (kein Cards-Grid) */
.section-destinations-editorial {
background: var(--c-bg);
padding: clamp(120px, 14vw, 200px) 0;
position: relative;
overflow: hidden;
}
.section-destinations-editorial::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: clamp(400px, 60vw, 880px);
height: clamp(400px, 60vw, 880px);
border-radius: 50%;
border: 1px solid var(--c-gold);
opacity: 0.08;
pointer-events: none;
}
.section-destinations-editorial::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: clamp(220px, 36vw, 520px);
height: clamp(220px, 36vw, 520px);
border-radius: 50%;
border: 1px solid var(--c-gold);
opacity: 0.05;
pointer-events: none;
}
.dest-editorial {
position: relative;
z-index: 2;
max-width: 880px;
margin: 0 auto;
text-align: center;
}
.dest-editorial .kicker {
margin-bottom: 36px;
padding-left: 0;
}
.dest-editorial .kicker::before { display: none; }
.dest-editorial-title {
font-family: var(--font-head);
font-size: clamp(54px, 8.5vw, 140px);
line-height: 0.95;
letter-spacing: -0.5px;
margin: 0 0 32px;
text-transform: uppercase;
color: var(--c-text);
}
.dest-editorial-title br + * { display: inline; }
.dest-editorial-sub {
font-family: var(--font-head);
font-size: clamp(20px, 2.4vw, 32px);
line-height: 1.25;
letter-spacing: 0.5px;
color: var(--c-gold);
text-transform: uppercase;
margin: 0 auto 40px;
max-width: 720px;
}
.dest-editorial-note {
font-family: var(--font-body);
font-size: 15px;
line-height: 1.6;
color: var(--c-text-3);
font-style: italic;
max-width: 520px;
margin: 0 auto;
}
/* Paket-Section (Auslandshochzeit) — eine kohärente Card mit Aside */
.section-paket { background: var(--c-bg-1); }
.paket-frame {
display: grid;
grid-template-columns: 1.7fr 1fr;
gap: 0;
margin-top: 40px;
max-width: 1080px;
margin-left: auto;
margin-right: auto;
background: var(--c-bg);
border: 1px solid var(--c-line-soft);
border-top: 4px solid var(--c-gold);
overflow: hidden;
box-shadow: 0 18px 50px rgba(106,74,44,0.08);
}
.paket-main {
padding: clamp(28px, 3vw, 48px);
}
.paket-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
}
.paket-list li {
position: relative;
padding: 16px 0 16px 38px;
border-bottom: 1px solid var(--c-line-soft);
color: var(--c-text-2);
font-size: 15.5px;
line-height: 1.55;
}
.paket-list li:last-child { border-bottom: 0; }
.paket-list li strong {
display: inline;
color: var(--c-text);
font-weight: 700;
}
.paket-list li::before {
content: "";
position: absolute;
left: 8px;
top: 22px;
width: 16px;
height: 1px;
background: var(--c-gold);
}
.paket-aside {
background: linear-gradient(180deg, var(--c-bg-1) 0%, var(--c-bg-2) 100%);
padding: clamp(28px, 3vw, 48px);
border-left: 1px solid var(--c-line-soft);
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.paket-aside-label {
display: inline-block;
font-family: var(--font-body);
font-weight: 700;
font-size: 11px;
letter-spacing: 2.4px;
text-transform: uppercase;
color: var(--c-gold);
margin-bottom: 18px;
}
.paket-tags {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.paket-tags li {
padding: 9px 14px;
background: var(--c-bg);
border: 1px solid var(--c-line);
color: var(--c-text-2);
font-size: 13.5px;
letter-spacing: 0.2px;
transition: border-color var(--t-fast), color var(--t-fast);
}
.paket-tags li:hover { border-color: var(--c-gold); color: var(--c-text); }
.paket-note {
margin: 24px auto 0;
text-align: center;
font-style: italic;
color: var(--c-text-3);
font-size: 14px;
max-width: 620px;
}
@media (max-width: 820px) {
.paket-frame { grid-template-columns: 1fr; }
.paket-aside { border-left: 0; border-top: 1px solid var(--c-line-soft); }
}
/* Sticky Mini-Switch im Header — erscheint nur wenn Hero-Switch out of view */
.nav-mini-switch {
display: inline-flex;
align-items: center;
margin-right: 14px;
opacity: 0;
transform: translateY(-6px);
pointer-events: none;
transition: opacity 280ms var(--ease-out, ease), transform 280ms var(--ease-out, ease);
}
.nav-mini-switch.is-visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.nav-switch-mini { padding: 4px; }
.nav-switch-mini .nav-switch-btn {
font-size: 10.5px;
letter-spacing: 1.4px;
padding: 7px 16px;
min-width: 82px;
}
@media (max-width: 960px) {
.nav-mini-switch { display: none; }
}
/* Hero-Switch (über H1) — prominenter als Header-Variante */
.nav-switch-wrap.hero-switch {
display: flex;
margin-right: 0;
margin-bottom: 22px;
gap: 12px;
}
.hero-kicker { display: block; }
.nav-switch-wrap.hero-switch .nav-switch-label {
font-size: 12px;
letter-spacing: 2.4px;
}
.nav-switch-wrap.hero-switch .nav-switch { padding: 5px; }
.nav-switch-wrap.hero-switch .nav-switch-btn {
font-size: 12px;
letter-spacing: 1.8px;
padding: 9px 22px;
min-width: 110px;
}
@media (max-width: 600px) {
.nav-switch-wrap.hero-switch { gap: 10px; margin-bottom: 18px; }
.nav-switch-wrap.hero-switch .nav-switch-label { font-size: 11px; letter-spacing: 2px; }
.nav-switch-wrap.hero-switch .nav-switch-btn {
font-size: 11px; padding: 8px 16px; min-width: 96px; letter-spacing: 1.5px;
}
}
/* =====================================================
HERO — Tom-Kova-Pattern (Bild rechts full-bleed + Gradient-Fade)
===================================================== */
.hero {
position: relative;
min-height: 82vh;
display: flex;
align-items: center;
padding: 120px 0 80px;
overflow: hidden;
background: var(--c-bg);
}
.hero-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
gap: clamp(32px, 4vw, 64px);
align-items: center;
position: relative;
z-index: 2;
}
.hero-content {
max-width: 620px;
padding-right: clamp(0px, 2vw, 24px);
position: relative;
z-index: 3;
}
.hero-content h1 {
font-size: clamp(40px, 5.6vw, 76px);
line-height: 1.02;
letter-spacing: 0.5px;
margin-bottom: 22px;
text-wrap: balance;
}
.hero-accent {
display: block;
margin-top: 2px;
color: var(--c-gold);
/* v131 Alex: kein Kursiv mehr — Marcellus hat keine echte Italic, Faux-Italic wirkte billig */
/* Alex-Vorgabe 25.05.: kein Gradient, flat Akzentfarbe */
}
.hero-lead {
font-family: var(--font-body);
font-weight: 400;
font-size: clamp(17px, 1.45vw, 21px);
color: var(--c-text);
line-height: 1.5;
margin-bottom: 28px;
max-width: 540px;
}
.hero-checks {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 30px;
}
.hero-checks li {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: clamp(15px, 1.05vw, 17px);
color: var(--c-text);
line-height: 1.45;
}
.hero-checks .check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px; height: 22px;
border-radius: 50%;
background: var(--c-gold-bright); /* Tabak statt Braun — wärmer, lebendiger */
color: var(--c-bg);
font-weight: 700;
font-size: 13px;
flex-shrink: 0;
margin-top: 2px;
}
/* Tom-Kova-Pattern: Bild RECHTS full-bleed
Width 58% — genug um Alex gross zu zeigen, klein genug damit Text-Spalte links sicher Platz hat */
.hero-media {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%; /* full-bleed Video wie Alex es will */
z-index: 1;
overflow: hidden;
}
.hero-media img,
.hero-media .hero-video {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 25%;
display: block;
/* Mask entfernt — Video läuft jetzt edge-to-edge in voller Breite */
}
.hero-media-fade {
position: absolute;
inset: 0;
/* Übergang Video zu Background — von Ruben gewünscht reaktiviert.
Farbe matched body-bg im Hochzeit-Theme (Brandboard Beige). */
background: linear-gradient(to right,
var(--c-bg) 0%,
rgba(255, 255, 255, 0.92) 8%,
rgba(255, 255, 255, 0.65) 20%,
rgba(255, 255, 255, 0.38) 36%,
rgba(255, 255, 255, 0.14) 55%,
transparent 78%);
}
body:not(.theme-hochzeit) .hero-media-fade {
/* Event-Theme: dunkler Fade */
background: linear-gradient(to right,
var(--c-bg) 0%,
rgba(26, 26, 26, 0.92) 8%,
rgba(26, 26, 26, 0.65) 20%,
rgba(26, 26, 26, 0.38) 36%,
rgba(26, 26, 26, 0.14) 55%,
transparent 78%);
}
/* =====================================================
TRUST-BAR
===================================================== */
.trust-bar {
background: var(--c-bg-1);
padding: 32px 0;
border-top: 1px solid var(--c-line-soft);
border-bottom: 1px solid var(--c-line-soft);
}
.trust-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
align-items: center;
gap: 18px;
}
.trust-grid > div {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
text-align: center;
}
.trust-grid b {
font-family: var(--font-head);
font-size: clamp(20px, 2vw, 28px);
font-weight: 400;
color: var(--c-gold);
letter-spacing: 1.5px;
line-height: 1;
}
.trust-grid span {
font-size: 10.5px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--c-text-2);
line-height: 1.4;
}
/* =====================================================
PROBLEME — Bento-Grid (1 Featured + 5 normal)
===================================================== */
.section-probleme {
background: var(--c-bg);
}
.probleme-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(180px, auto);
gap: 16px;
}
.problem {
background: var(--c-bg-2);
border: 1px solid rgba(255,255,255,0.04);
padding: 28px 24px;
position: relative;
transition: border-color var(--t), background var(--t), transform var(--t);
overflow: hidden;
}
.problem::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 0; height: 2px;
background: var(--c-gold);
transition: width 400ms var(--ease-out);
}
.problem:hover {
border-color: var(--c-gold-dim);
background: var(--c-bg-3);
transform: translateY(-3px);
}
.problem:hover::before { width: 100%; }
.problem-icon {
width: 38px; height: 38px;
border-radius: 50%;
background: rgba(196, 164, 132, 0.12);
border: 1px solid var(--c-gold-dim);
color: var(--c-gold);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-head);
font-size: 22px;
margin-bottom: 16px;
}
.problem h3 {
margin-bottom: 12px;
color: var(--c-text);
}
.problem p {
font-size: 15px;
margin: 0 0 8px;
color: var(--c-text-2);
line-height: 1.6;
}
/* =====================================================
PHOTO-BG — echte Hochzeitsfotos als dezente Section-Texturen
Sektionen mit .has-photo-bg bekommen ein gefadetes Hintergrund-Foto
in Schwarzweiß mit Goldton-Overlay. Premium-Look statt Icon-SVGs.
===================================================== */
.section.has-photo-bg {
position: relative;
isolation: isolate;
overflow: hidden;
}
.section.has-photo-bg::before {
content: "";
position: absolute;
inset: 0;
background-image: var(--photo-bg);
background-size: cover;
background-position: var(--photo-pos, center);
background-repeat: no-repeat;
opacity: 0.18;
filter: grayscale(100%) brightness(0.6) contrast(1.1);
z-index: -2;
}
.section.has-photo-bg::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at center, transparent 30%, var(--c-bg) 95%),
linear-gradient(180deg, rgba(196, 164, 132, 0.04) 0%, transparent 40%, transparent 60%, rgba(196, 164, 132, 0.04) 100%);
z-index: -1;
pointer-events: none;
}
.section.has-photo-bg > .container {
position: relative;
z-index: 1;
}
/* Methode: Lichtshow als Atmosphäre-BG */
.section-methode.has-photo-bg {
--photo-bg: url('https://risesezter98.github.io/alex-maus-assets/images/alex-013.webp');
--photo-pos: center 30%;
}
/* FAQ: Disco-Kugeln-Atmosphäre */
.section-faq.has-photo-bg {
--photo-bg: url('https://risesezter98.github.io/alex-maus-assets/images/alex-002.webp');
--photo-pos: center;
}
/* Stimmen (Event): volle Tanzfläche als gefadete Atmosphäre — setzt die
Sektion gegen die benachbarten Hörprobe/Über-mich-Flächen ab */
.section-stimmen.has-photo-bg {
--photo-bg: url('https://risesezter98.github.io/alex-maus-assets/images/alex-011.webp');
--photo-pos: center 35%;
}
/* =====================================================
GLOBAL GRAIN — sehr dezente Noise-Texture für Premium Dark
===================================================== */
body::after {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 200;
opacity: 0.035;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 200px 200px;
}
/* Auf Hell-Theme: Noise stark reduzieren (sonst Korn-Look auf Cream) */
body.theme-hochzeit::after { opacity: 0.015; mix-blend-mode: multiply; }
@media (prefers-reduced-motion: reduce) {
body::after { display: none; }
}
/* =====================================================
METHODE — 3 Pillar-Karten (mit echten Bildern, kein Icon)
===================================================== */
.section-methode {
background: var(--c-bg-1);
}
/* Zickzack-Editorial-Layout — alternierende Seiten, große Nummer, klares Bild */
.methode-rows {
display: flex;
flex-direction: column;
gap: clamp(48px, 5vw, 80px);
}
.methode-row {
display: grid;
grid-template-columns: 100px 1fr 1.1fr;
gap: clamp(24px, 3vw, 56px);
align-items: center;
position: relative;
}
.methode-row-reverse {
grid-template-columns: 1.1fr 1fr 100px;
}
.methode-row-reverse .methode-row-num { order: 3; }
.methode-row-reverse .methode-row-text { order: 2; text-align: right; }
.methode-row-reverse .methode-row-img { order: 1; }
.methode-row-num {
font-family: var(--font-head);
font-size: clamp(64px, 7vw, 120px);
color: var(--c-gold);
line-height: 0.9;
letter-spacing: -2px;
opacity: 0.85;
}
.methode-row-text { max-width: 480px; }
.methode-row-reverse .methode-row-text { margin-left: auto; }
.methode-label {
display: inline-block;
font-family: var(--font-body);
font-weight: 700;
font-size: 12px;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--c-gold);
margin-bottom: 14px;
}
.methode-row-text h3 { margin-bottom: 14px; }
.methode-row-text p { font-size: 16px; color: var(--c-text-2); margin: 0; line-height: 1.65; }
.methode-row-img {
aspect-ratio: 5/4;
overflow: hidden;
position: relative;
box-shadow: 0 18px 40px rgba(0,0,0,0.18);
}
.methode-polaroid { display: none; }
.methode-row-img img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 1000ms var(--ease);
}
.methode-row:hover .methode-row-img img { transform: scale(1.04); }
.methode-row-img::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 65%, rgba(0,0,0,0.25) 100%);
pointer-events: none;
}
/* =====================================================
LEISTUNGEN — 3 gleich große Cards
===================================================== */
.section-leistungen {
background: var(--c-bg);
}
.leistungen-grid {
display: grid;
grid-template-columns: 1fr;
grid-auto-rows: 1fr;
gap: 28px;
max-width: 1080px;
margin: 0 auto;
}
.card-event .leistung-card-img img { object-position: 50% 22%; }
/* Hochzeits-spezifische Inhalte: auf Event-Theme ausblenden */
body.theme-event .hochzeit-only { display: none; }
/* Card-Reihenfolge: Hochzeit → Destination → Event (uniform überall) */
.leistungen-grid { display: grid; }
.card-hochzeit { order: 1; }
.card-destination { order: 2; }
.card-event { order: 3; }
body.theme-hochzeit .card-hochzeit,
body.theme-event .card-event {
border-color: var(--c-gold);
box-shadow: 0 8px 28px rgba(167,131,72,0.10);
}
body.theme-hochzeit .card-event,
body.theme-event .card-hochzeit {
opacity: 0.96;
}
.leistung-card {
background: var(--c-bg-1);
border: 1px solid var(--c-line);
display: grid;
grid-template-columns: 1.1fr 1fr;
overflow: hidden;
transition: border-color var(--t), transform var(--t), box-shadow var(--t);
position: relative;
}
.leistung-card::before {
content: "";
position: absolute;
top: 24px; left: 24px;
width: 28px; height: 1px;
background: var(--c-gold);
z-index: 2;
}
.leistung-card:hover {
border-color: var(--c-gold-dim);
transform: translateY(-3px);
box-shadow: 0 18px 40px rgba(0,0,0,0.18);
}
body.theme-hochzeit .leistung-card:hover {
box-shadow: 0 18px 40px rgba(90, 63, 37, 0.15);
}
.leistung-card-img {
overflow: hidden;
min-height: 280px;
height: 100%;
position: relative;
}
.leistung-card-img img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 800ms var(--ease);
}
.leistung-card:hover .leistung-card-img img { transform: scale(1.05); }
.leistung-card-body {
padding: clamp(28px, 4vw, 48px) clamp(26px, 3.5vw, 44px);
display: flex;
flex-direction: column;
gap: 14px;
justify-content: center;
}
.leistung-card-body h3 {
margin: 0;
font-size: clamp(24px, 2.4vw, 36px);
line-height: 1.1;
}
.leistung-card-body p {
font-size: 16px;
color: var(--c-text-2);
margin: 0;
line-height: 1.65;
}
.leistung-card-body .btn {
align-self: flex-start;
margin-top: 6px;
}
.card-bullets {
list-style: none;
padding: 0;
margin: 4px 0 8px;
display: flex;
flex-direction: column;
gap: 7px;
}
.card-bullets li {
position: relative;
padding-left: 22px;
font-size: 14.5px;
color: var(--c-text-2);
line-height: 1.5;
}
.card-bullets li::before {
content: "";
position: absolute;
left: 0; top: 9px;
width: 12px; height: 1px;
background: var(--c-gold);
}
@media (max-width: 760px) {
.leistung-card { grid-template-columns: 1fr; }
.leistung-card-body { padding: 26px 24px 30px; }
}
/* =====================================================
ABLAUF — Timeline mit vertikaler Linie + Punkten
===================================================== */
.section-ablauf {
background: var(--c-bg-1); /* heller Sand, dezenter Wechsel zur Hauptfläche */
}
/* Ablauf — Bild links, 3 Schritte rechts. Ruhig, premium, Hochzeit-Vibe. */
.ablauf-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(40px, 6vw, 96px);
align-items: center;
margin: clamp(48px, 6vw, 80px) 0 0;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.ablauf-img {
aspect-ratio: 4/5;
overflow: hidden;
box-shadow: 0 24px 56px rgba(0,0,0,0.18);
position: relative;
}
.ablauf-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.steps {
display: flex;
flex-direction: column;
gap: clamp(28px, 3vw, 44px);
margin: 0;
padding: 0;
list-style: none;
position: relative;
}
.step {
display: block;
position: relative;
padding: 0;
border: 0;
}
.step + .step {
border-top: 1px solid var(--c-line);
padding-top: clamp(28px, 3vw, 44px);
}
.step::before { display: none; }
.step-num {
font-family: var(--font-body);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.22em;
color: var(--c-gold-bright);
text-transform: uppercase;
line-height: 1;
margin: 0 0 10px;
display: block;
background: transparent;
border: 0;
border-radius: 0;
width: auto;
height: auto;
opacity: 1;
text-align: left;
}
.step-body { padding: 0; max-width: 520px; }
.step-body h3 {
font-family: var(--font-head);
font-size: clamp(26px, 2.6vw, 38px);
line-height: 1.05;
margin-bottom: 12px;
letter-spacing: 0;
color: var(--c-text);
}
.step-body p {
font-size: 16px;
color: var(--c-text-2);
margin: 0;
line-height: 1.65;
}
@media (max-width: 880px) {
.ablauf-layout {
grid-template-columns: 1fr;
gap: 32px;
}
.ablauf-img { aspect-ratio: 5/4; max-height: 480px; }
}
/* =====================================================
PARTY SHOWCASE — Vinyl-Centerpiece
===================================================== */
.section-party-showcase {
background: var(--c-bg);
position: relative;
overflow: hidden;
}
/* Subtle radiale Vignette nur auf dunklem Event-Theme */
body.theme-event .section-party-showcase {
background: radial-gradient(ellipse at 30% 50%, var(--c-bg-1) 0%, var(--c-bg) 60%);
}
.party-glow {
position: absolute;
top: 50%; left: 25%;
width: 700px; height: 700px;
transform: translate(-50%, -50%);
background: radial-gradient(circle, rgba(196,164,132,0.08) 0%, transparent 65%);
pointer-events: none;
z-index: 0;
}
body.theme-hochzeit .party-glow { display: none; }
.party-showcase-grid {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(56px, 7vw, 120px);
align-items: center;
max-width: 1280px;
margin-inline: auto;
}
.party-showcase-grid .party-content { order: 1; }
/* Headline in der schmalen Spalte kleiner, damit die 2 Zeilen NICHT nochmal umbrechen */
.party-showcase-grid .party-content h2 { font-size: clamp(24px, 2.7vw, 36px); }
.party-showcase-grid .vinyl-stage,
.party-showcase-grid .party-video-stage { order: 2; }
/* Party Visual Stage — pro Theme unterschiedlich (Video Event, Foto Hochzeit) */
.party-video-stage {
position: relative;
width: 100%;
aspect-ratio: 3/2;
max-width: 600px;
margin: 0 auto;
overflow: hidden;
box-shadow: 0 30px 70px rgba(0,0,0,0.5);
}
body.theme-hochzeit .party-video-stage {
box-shadow: 0 22px 50px rgba(90, 63, 37, 0.18);
}
.party-video-stage::before {
content: "";
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
border: 1px solid var(--c-gold);
opacity: 0.5;
}
.party-video,
.party-still {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
position: absolute;
inset: 0;
}
/* Theme-Switch: Hochzeit zeigt Foto, Event zeigt Video */
body.theme-hochzeit .party-video { display: none; }
body.theme-event .party-still { display: none; }
/* Vinyl Stage (legacy — falls anderswo noch genutzt) */
.vinyl-stage {
position: relative;
width: 100%;
aspect-ratio: 1;
max-width: 520px;
margin: 0 0 0 -8%;
}
.vinyl-disc {
position: absolute;
inset: 6%;
border-radius: 50%;
overflow: hidden;
box-shadow: 0 30px 80px rgba(0,0,0,0.55);
animation: vinylSpin 32s linear infinite;
}
body.theme-event .vinyl-disc {
box-shadow: 0 30px 80px rgba(0,0,0,0.65), 0 0 0 1px rgba(196,164,132,0.35), 0 0 60px rgba(196,164,132,0.18);
}
body.theme-hochzeit .vinyl-disc {
box-shadow: 0 24px 60px rgba(90, 63, 37, 0.28);
}
.vinyl-svg { width: 100%; height: 100%; display: block; }
.vinyl-tonearm {
position: absolute;
inset: 0;
width: 100%; height: 100%;
pointer-events: none;
filter: drop-shadow(0 8px 18px rgba(0,0,0,0.5));
}
body.theme-hochzeit .vinyl-tonearm {
filter: drop-shadow(0 6px 14px rgba(90, 63, 37, 0.18));
}
@keyframes vinylSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.vinyl-disc { animation: none; }
}
/* Content right */
.party-content { max-width: 580px; }
.party-content h2 {
font-size: clamp(28px, 3.2vw, 50px);
margin: 14px 0 18px;
}
.party-content .lead { font-size: 16px; line-height: 1.6; }
.party-content > p { font-size: 15px; line-height: 1.6; color: var(--c-text-2); }
.live-badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 14px 8px 12px;
border: 1px solid var(--c-gold);
background: rgba(196,164,132,0.08);
color: var(--c-gold);
font-family: var(--font-body);
font-weight: 700;
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 18px;
}
body.theme-hochzeit .live-badge {
background: rgba(168,132,92,0.10);
color: var(--c-brown);
border-color: var(--c-gold);
}
.live-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--c-gold);
box-shadow: 0 0 0 0 rgba(196,164,132,0.55);
animation: livePulse 1.6s ease-out infinite;
}
@keyframes livePulse {
0% { box-shadow: 0 0 0 0 rgba(196,164,132,0.55); }
70% { box-shadow: 0 0 0 10px rgba(196,164,132,0); }
100% { box-shadow: 0 0 0 0 rgba(196,164,132,0); }
}
.genre-rail {
display: grid;
grid-template-columns: repeat(3, 1fr); /* v109: 3 nebeneinander, 2 Reihen */
gap: 10px;
margin-top: 28px;
}
.genre-pill {
font-family: var(--font-body);
font-weight: 600;
font-size: 11.5px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--c-text-2);
padding: 11px 14px;
border: 1px solid rgba(196,164,132,0.55);
background: rgba(255,255,255,0.02);
border-radius: 2px;
transition: all var(--t-fast);
cursor: default;
white-space: nowrap;
text-align: center;
}
@media (max-width: 600px) {
.genre-rail { grid-template-columns: repeat(2, 1fr); }
.genre-pill { font-size: 10.5px; letter-spacing: 1px; padding: 10px 8px; }
}
body.theme-hochzeit .genre-pill {
border-color: var(--c-gold);
background: rgba(255,255,255,0.4);
color: var(--c-text);
}
/* Genre-Pills sind reine Labels (kein Klick-Ziel) -> KEIN Hover-Effekt,
sonst wirken sie klickbar (Ruben 2026-06-09). */
/* =====================================================
TESTIMONIALS — 3-spaltig: Featured + Standard + Stats
===================================================== */
.section-stimmen {
background: var(--c-bg);
border-top: 1px solid var(--c-line-soft);
border-bottom: 1px solid var(--c-line-soft);
/* v136 Ruben: bewusste Ausnahme — etwas mehr Luft als Standard, damit das hohe
9/16-Video genug Raum hat und komplett zur Geltung kommt. */
padding: calc(var(--section-y) * 1.2) 0;
}
/* === Stimmen-Grid: 3 Cards links, Video rechts (gleiche Höhe) === */
.stimmen-grid {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
gap: clamp(20px, 2.5vw, 32px);
align-items: stretch;
}
.stimmen-cards {
display: flex;
flex-direction: column;
gap: 16px;
}
.stimmen-cards .testimonial { flex: 1; }
/* Video-Spalte rechts: füllt komplette Höhe, Player nimmt den Hauptteil */
.video-testimonial {
display: flex;
flex-direction: column;
padding: 18px;
background: linear-gradient(135deg, rgba(196,164,132,0.1) 0%, var(--c-bg-2) 100%);
border: 1px solid rgba(196,164,132,0.22);
position: relative;
min-height: 0;
}
.video-testimonial::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 80px; height: 2px;
background: var(--c-gold);
}
.video-badge {
align-self: flex-start;
padding: 7px 12px;
background: var(--c-gold);
color: var(--c-bg);
font-family: var(--font-body);
font-weight: 700;
font-size: 10px;
letter-spacing: 1.5px;
text-transform: uppercase;
margin-bottom: 14px;
}
.video-testimonial-player {
position: relative;
flex: 1;
min-height: 240px;
overflow: hidden;
background: #000;
box-shadow: 0 12px 32px rgba(0,0,0,0.5);
margin-bottom: 16px;
}
.video-testimonial-player video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.video-play-btn {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 90px; height: 90px;
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
z-index: 2;
transition: transform var(--t-fast), opacity var(--t-fast);
}
.video-play-btn svg { width: 100%; height: 100%; display: block; }
.video-play-btn:hover { transform: translate(-50%, -50%) scale(1.08); }
.video-testimonial-player.is-playing .video-play-btn {
opacity: 0;
pointer-events: none;
}
.video-quote {
font-family: var(--font-body);
font-size: 14px;
line-height: 1.5;
color: var(--c-text);
font-weight: 300;
margin: 0;
}
.video-quote strong { font-weight: 600; }
.video-quote .quote-mark {
font-family: var(--font-head);
font-size: 1.15em;
color: var(--c-gold);
vertical-align: -0.05em;
}
.testimonials-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 0.85fr;
gap: 18px;
align-items: stretch;
}
.testimonial {
background: var(--c-bg-2);
border: 1px solid rgba(255,255,255,0.05);
padding: 32px 28px;
display: flex;
flex-direction: column;
gap: 18px;
position: relative;
transition: border-color var(--t), transform var(--t);
}
.testimonial:hover {
border-color: var(--c-gold-dim);
transform: translateY(-3px);
}
.testimonial-feature {
background: linear-gradient(135deg, var(--c-bg-3) 0%, var(--c-bg-2) 100%);
border-color: rgba(196, 164, 132, 0.30);
padding: 36px 32px;
position: relative;
}
.testimonial-feature::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 40%; height: 2px;
background: var(--c-gold);
}
.stars {
color: var(--c-gold);
font-size: 16px;
letter-spacing: 3px;
}
.testimonial blockquote {
font-family: var(--font-body);
font-weight: 400;
font-size: 16px;
line-height: 1.6;
color: var(--c-text);
flex: 1;
font-style: normal;
margin: 0;
position: relative;
}
.testimonial blockquote strong {
color: var(--c-text);
font-weight: 600;
border-bottom: 2px solid var(--c-gold-dim);
padding-bottom: 1px;
}
.testimonial blockquote mark {
background: rgba(196, 164, 132, 0.15);
color: var(--c-gold-bright);
padding: 2px 4px;
font-weight: 500;
}
.testimonial-feature blockquote {
font-size: clamp(17px, 1.5vw, 20px);
line-height: 1.5;
font-weight: 300;
}
.testimonial blockquote .quote-mark {
font-family: var(--font-head);
font-size: 1.4em;
color: var(--c-gold);
line-height: 0;
vertical-align: -0.1em;
margin: 0 2px;
}
.testimonial footer {
display: flex;
flex-direction: column;
gap: 4px;
border-top: 1px solid var(--c-line-soft);
padding-top: 14px;
margin-top: auto;
}
.testimonial cite {
font-family: var(--font-body);
font-weight: 700;
font-style: normal;
font-size: 13px;
letter-spacing: 1.5px;
color: var(--c-text);
text-transform: uppercase;
}
.testimonial footer span {
font-size: 11px;
letter-spacing: 1.2px;
color: var(--c-text-3);
text-transform: uppercase;
}
/* Stats-Card als 3. Spalte */
.testimonial-stats {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: center;
gap: 18px;
padding: 32px 24px;
}
.trust-stat {
display: flex;
flex-direction: column;
gap: 2px;
}
.trust-stat b {
font-family: var(--font-head);
font-size: clamp(36px, 4vw, 56px);
color: var(--c-gold);
letter-spacing: 1px;
line-height: 1;
}
.trust-stat span {
font-size: 11px;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--c-text-2);
}
.testimonial-stats p {
font-size: 12px;
color: var(--c-text-3);
margin: 0;
line-height: 1.4;
letter-spacing: 0.5px;
}
/* =====================================================
ABOUT — Editorial-Layout (kommt SPÄT)
===================================================== */
.section-about {
background: var(--c-bg-1);
}
.about-grid {
display: grid;
grid-template-columns: 1.1fr 1.4fr;
gap: clamp(40px, 6vw, 80px);
align-items: center;
}
.about-portrait {
position: relative;
}
.about-portrait-main {
width: 100%;
aspect-ratio: 3/4;
object-fit: cover;
object-position: 50% 50%;
display: block;
}
.about-portrait-side {
position: absolute;
bottom: -36px;
right: -36px;
width: 45%;
aspect-ratio: 4/3;
object-fit: cover;
border: 8px solid var(--c-bg-1);
filter: grayscale(100%);
transition: filter 400ms var(--ease);
}
.about-portrait:hover .about-portrait-side { filter: grayscale(0%); }
.about-portrait-tag {
position: absolute;
top: 24px;
left: -12px;
background: var(--c-gold);
color: var(--c-bg);
padding: 10px 16px;
font-family: var(--font-body);
font-weight: 700;
font-size: 11px;
letter-spacing: 1.8px;
text-transform: uppercase;
z-index: 2;
}
.about-text h2 { font-size: clamp(28px, 3.2vw, 50px); margin-bottom: 6px; }
.about-cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-top: 12px;
}
.about-cols p { font-size: 15px; color: var(--c-text-2); margin: 0; }
.about-quote {
margin-top: 28px;
padding: 20px 24px;
border-left: 2px solid var(--c-gold);
background: var(--c-bg-2);
font-size: clamp(16px, 1.25vw, 18px);
line-height: 1.55;
color: var(--c-text);
}
.about-cols p { font-size: 15.5px; line-height: 1.65; }
.about-text > .lead { font-size: clamp(17px, 1.4vw, 20px); }
/* =====================================================
FAQ — Akkordeon mit grid-template-rows trick
===================================================== */
.section-faq {
background: var(--c-bg);
}
/* FAQ-Section auf Subpages: dunklerer Background für klare Trennung von vorherigen Sections */
.section-faq-subpage {
background: var(--c-bg-2);
border-top: 1px solid var(--c-line-soft);
}
.faq-container {
max-width: var(--container-narrow);
}
.faq-list {
display: flex;
flex-direction: column;
border-top: 1px solid var(--c-line-soft);
}
.faq-item {
border-bottom: 1px solid var(--c-line-soft);
}
.faq-item summary {
padding: 24px 0;
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
cursor: pointer;
list-style: none;
font-family: var(--font-head);
/* v139: untere Grenze runter, damit FAQ-Fragen auf dem Handy nicht zu gross sind */
font-size: clamp(16.5px, 4.4vw, 26px);
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--c-text);
transition: color var(--t-fast);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--c-gold); }
.faq-item summary i {
display: block;
width: 24px; height: 24px;
position: relative;
flex-shrink: 0;
}
.faq-item summary i::before,
.faq-item summary i::after {
content: "";
position: absolute;
background: var(--c-gold);
transition: transform var(--t-fast);
}
.faq-item summary i::before {
top: 50%; left: 0;
width: 100%; height: 1px;
transform: translateY(-50%);
}
.faq-item summary i::after {
left: 50%; top: 0;
height: 100%; width: 1px;
transform: translateX(-50%);
}
.faq-item[open] summary i::after { transform: translateX(-50%) scaleY(0); }
.faq-answer {
padding: 0 0 24px;
}
.faq-answer p {
font-size: 16px;
color: var(--c-text-2);
margin: 0;
max-width: 760px;
line-height: 1.65;
}
/* =====================================================
CTA-FINAL
===================================================== */
.cta-final {
background: var(--c-bg-1);
padding: clamp(80px, 10vw, 140px) 0;
position: relative;
overflow: hidden;
}
.cta-final::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(to right, transparent, var(--c-gold), transparent);
}
.cta-final-inner {
text-align: center;
max-width: 760px;
margin: 0 auto;
}
.cta-final h2 {
font-size: clamp(28px, 3.2vw, 50px);
margin-bottom: 20px;
}
/* Lange CTA-Headline (Event): v109 groesser + 2 Zeilen via
+ breiter Container. */
.cta-final h2.cta-h2-long {
font-size: clamp(26px, 3vw, 42px);
line-height: 1.12;
max-width: none;
margin-left: auto;
margin-right: auto;
}
body.theme-event .cta-final-inner {
max-width: 1000px;
}
@media (max-width: 600px) {
.cta-final h2.cta-h2-long {
font-size: clamp(21px, 5.6vw, 27px);
}
/* Auf Mobile
ignorieren -> natuerlicher Umbruch statt zwei lange Zeilen */
.cta-final h2.cta-h2-long br { display: none; }
}
.cta-final p {
font-size: clamp(16px, 1.3vw, 18.5px);
color: var(--c-text);
margin-bottom: 32px;
}
/* =====================================================
FOOTER
===================================================== */
.footer {
background: var(--c-bg);
border-top: 1px solid rgba(255,255,255,0.05);
padding: 60px 0 30px;
position: relative;
z-index: 5;
}
.footer-grid {
display: grid;
grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr;
gap: 36px;
margin-bottom: 36px;
}
.footer-col h4 {
font-family: var(--font-body);
font-weight: 700;
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--c-gold);
margin-bottom: 14px;
}
.footer-col p {
font-size: 14px;
color: var(--c-text-2);
margin-bottom: 6px;
}
.footer-bottom {
border-top: 1px solid var(--c-line-soft);
padding-top: 20px;
text-align: center;
font-size: 12px;
color: var(--c-text-3);
letter-spacing: 0.5px;
}
/* =====================================================
BURGER (Mobile)
===================================================== */
.nav-burger {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 38px; height: 38px;
padding: 8px;
background: transparent;
border: 0;
cursor: pointer;
z-index: 100;
position: relative;
}
.nav-burger span {
display: block;
width: 100%; height: 2px;
background: var(--c-text);
border-radius: 2px;
transition: transform var(--t-fast), opacity var(--t-fast);
}
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* =====================================================
RESPONSIVE
===================================================== */
/* === Große Bildschirme (24"-27"): Hero atmen lassen === */
@media (min-width: 1600px) {
:root { --container: 1440px; }
.hero { min-height: 86vh; padding: 130px 0 90px; }
.hero-content { max-width: 600px; }
.hero-content h1 { font-size: clamp(58px, 4.4vw, 80px); }
.hero-lead { font-size: clamp(18px, 1.3vw, 22px); max-width: 540px; }
.hero-checks li { font-size: 17px; }
.btn-large { padding: 18px 36px; font-size: 13px; }
.hero-media { width: 100%; }
.hero-media img { object-position: 60% 40%; }
}
@media (min-width: 2000px) {
:root { --container: 1560px; }
.hero { min-height: 88vh; }
.hero-content h1 { font-size: 86px; }
.hero-content { max-width: 580px; }
.hero-media { width: 100%; }
.hero-media img { object-position: 60% 45%; }
}
@media (max-width: 1100px) {
.probleme-grid { grid-template-columns: repeat(2, 1fr); }
.leistungen-grid { grid-template-columns: 1fr; }
.methode-row, .methode-row-reverse {
grid-template-columns: 70px 1fr;
gap: 18px 28px;
}
.methode-row .methode-row-img,
.methode-row-reverse .methode-row-img {
grid-column: 1 / -1;
order: 3;
aspect-ratio: 16/10;
}
.methode-row-reverse .methode-row-num { order: 1; }
.methode-row-reverse .methode-row-text { order: 2; text-align: left; margin-left: 0; }
}
/* Tighter Header zwischen 961 und 1440px (14" MacBook) — sonst wrappt es in 2 Zeilen */
@media (min-width: 961px) and (max-width: 1440px) {
.nav { padding: 14px clamp(20px, 2.4vw, 40px); gap: 12px; }
.nav-links { gap: 14px; margin-right: 10px; }
.nav-links a { font-size: 11.5px; letter-spacing: 1.1px; }
.btn-header { padding: 8px 14px; font-size: 11.5px; letter-spacing: 1.4px; }
.nav-mini-switch { margin-right: 8px; }
.nav-switch-mini .nav-switch-btn { min-width: 58px; padding: 5px 8px; font-size: 9.5px; letter-spacing: 1px; }
.logo-header svg { width: 44px; height: auto; }
.logo-text { font-size: 20px; letter-spacing: 2.8px; }
}
@media (max-width: 960px) {
.btn-header { display: none; }
.nav-burger { display: flex; }
.nav { padding: 14px 22px; }
.nav-links {
position: fixed;
top: 0; right: 0;
/* v139: margin-right vom Desktop-Header (24px) auf 0 — sonst sitzt der Drawer
nicht buendig an der rechten Kante ("rechts noch Platz"). */
margin: 0;
width: min(320px, 84vw);
height: 100vh;
background: var(--c-bg-1);
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 8px;
padding: 84px 32px 36px;
transform: translateX(110%);
transition: transform 320ms var(--ease-out);
z-index: 99;
box-shadow: none;
}
.nav-links.is-open { transform: translateX(0); box-shadow: -20px 0 50px rgba(0,0,0,0.5); }
.nav-links a {
font-size: 17px;
letter-spacing: 1.5px;
padding: 14px 0;
border-bottom: 1px solid var(--c-line-soft);
}
/* Dropdown auf Mobile flach gelistet — kein Hover-Popover */
.nav-dropdown { display: contents; }
/* v139: "Weitere Services" als erkennbares Gruppen-Label (statt unsichtbar/flach),
darunter eingerueckt die zwei Unterlinks. */
.nav-dropdown-toggle {
display: block;
width: 100%;
text-align: left;
background: transparent;
border: 0;
border-bottom: 1px solid var(--c-line-soft);
padding: 14px 0 6px;
margin-top: 6px;
font-family: var(--font-body);
font-size: 11px;
font-weight: 700;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--c-text-3);
pointer-events: none;
}
.nav-dropdown-toggle .nav-dropdown-arrow { display: none; }
.nav-dropdown-menu a { padding-left: 14px !important; }
.nav-dropdown-menu {
position: static;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
background: transparent;
border: 0;
padding: 0;
box-shadow: none;
min-width: 0;
display: contents;
}
.nav-dropdown-menu a {
font-size: 17px;
letter-spacing: 1.5px;
padding: 14px 0;
border-bottom: 1px solid var(--c-line-soft);
background: transparent !important;
color: var(--c-text);
text-align: left;
}
.nav-dropdown-menu a.nav-current { color: var(--c-gold); }
.nav-cta-mobile {
display: block;
margin-top: 14px;
background: var(--c-gold);
color: var(--c-bg) !important;
text-align: center;
border-bottom: 0 !important;
padding: 14px 18px !important;
}
/* Hero — Bild oben, Text drunter (NG-Pattern) */
.hero {
padding: 80px 0 32px;
min-height: auto;
display: flex;
flex-direction: column;
align-items: stretch;
}
.hero-grid {
grid-template-columns: 1fr;
gap: 0;
}
.hero-content {
max-width: 100%;
/* v137 Mobile-Fix B2: weniger Abstand Video->Text (war 28px) */
padding: 8px 0 0;
}
.hero-content h1 {
font-size: clamp(28px, 7.4vw, 40px);
line-height: 1.05;
margin-bottom: 14px;
}
.hero-lead {
font-size: 15px;
margin-bottom: 16px;
line-height: 1.45;
}
.hero-checks { gap: 6px; margin-bottom: 20px; }
.hero-checks li { font-size: 14px; }
.kicker { font-size: 11px; margin-bottom: 12px; }
.hero-media {
position: relative;
inset: auto;
/* Full-bleed bis zum Viewport-Rand, Frame-Linien laufen drüber */
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
height: auto;
aspect-ratio: 4/3;
max-height: 56vh;
}
.hero-media img,
.hero-media .hero-video {
mask-image: none;
-webkit-mask-image: none;
object-position: 50% 30%;
}
.hero-media-fade,
body.theme-hochzeit .hero-media-fade {
/* v156: noch weicherer Uebergang Video->Sektion (frueher beginnen, mehr Stops,
sanfter Schatten-Verlauf statt hastigem Schnitt). */
background: linear-gradient(to bottom,
transparent 0%, transparent 12%,
color-mix(in srgb, var(--c-bg) 8%, transparent) 34%,
color-mix(in srgb, var(--c-bg) 24%, transparent) 52%,
color-mix(in srgb, var(--c-bg) 48%, transparent) 68%,
color-mix(in srgb, var(--c-bg) 74%, transparent) 84%,
color-mix(in srgb, var(--c-bg) 92%, transparent) 94%,
var(--c-bg) 100%);
}
/* v156: Hero-H1 ist die HAUPT-Headline -> muss mobil groesser sein als Section-H2
(vorher auf 36px gedeckelt, dadurch kleiner als h2 mit max 44). */
.hero:not(.hero-subpage) .hero-content h1 {
font-size: clamp(31px, 8.4vw, 46px) !important;
line-height: 1.04 !important;
}
/* v137 Mobile-Fix B1: Heller Theme (Hochzeit/Destination) — Hero-Text sitzt unter
dem Video auf hellem BG. Weisser Text war unsichtbar -> dunkel, ohne Schatten. */
body.theme-hochzeit .hero:not(.hero-subpage) .hero-content,
body.theme-hochzeit .hero:not(.hero-subpage) .hero-content h1 {
color: var(--c-text) !important;
text-shadow: none !important;
}
body.theme-hochzeit .hero:not(.hero-subpage) .hero-content .hero-kicker { color: var(--c-gold) !important; }
body.theme-hochzeit .hero:not(.hero-subpage) .hero-content h1 .hero-accent { color: var(--c-gold) !important; }
body.theme-hochzeit .hero:not(.hero-subpage) .hero-content .hero-lead {
color: var(--c-text-2) !important;
text-shadow: none !important;
}
body.theme-hochzeit .hero:not(.hero-subpage) .hero-checks li,
body.theme-hochzeit .hero:not(.hero-subpage) .hero-checks li span,
body.theme-hochzeit .hero:not(.hero-subpage) .hero-checks li strong {
color: var(--c-text-2) !important;
}
/* v139: Strong-Woerter im Lead waren noch weiss (Desktop-Regel) -> dunkel auf hell */
body.theme-hochzeit .hero:not(.hero-subpage) .hero-content .hero-lead strong {
color: var(--c-text) !important;
}
/* v139: Hero-Button war weiss auf weiss. Auf hellem Theme = Marken-CTA: brauner Fill
(var(--c-gold) ist hier Schokobraun) + HELLER Text. Klar sichtbar auf Cream. */
body.theme-hochzeit .hero:not(.hero-subpage) .hero-content .btn-primary {
background: var(--c-gold) !important;
color: #fff !important;
border-color: var(--c-gold) !important;
}
/* v139: Gold-Akzent ("wo immer ihr feiert") war auf Cream kaum erkennbar -> tieferes Gold */
body.theme-hochzeit .hero:not(.hero-subpage) .hero-content h1 .hero-accent {
color: #a86f2c !important;
}
/* v156: Haupt-Headline muss groesser sein als Section-H2 (max 40). War auf 30 gedeckelt
-> kleiner als h2. Jetzt dominant, aber gebaendigt damit nicht zu viele Zeilen. */
body.theme-hochzeit .hero:not(.hero-subpage) .hero-content h1 {
font-size: clamp(28px, 7.8vw, 40px) !important;
}
.trust-grid {
grid-template-columns: 1fr 1fr;
gap: 22px 14px;
}
.trust-grid b { font-size: 22px; }
.trust-grid span { font-size: 10px; letter-spacing: 1.2px; }
.about-grid,
.party-showcase-grid {
grid-template-columns: 1fr;
gap: 32px;
}
/* v139 Mobile: Text zuerst, dann Bild — Bild kompakter + naeher (war riesig + Gap 60px).
(Die alten vinyl-stage/party-video-stage-Regeln liefen ins Leere, HTML nutzt .party-image.) */
.party-showcase-grid .party-content { order: 1; }
.party-showcase-grid .party-image { order: 2; max-width: 300px; }
.party-glow { left: 50%; width: 500px; height: 500px; }
.stimmen-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.video-testimonial { padding: 14px; }
.video-testimonial-player {
max-width: 100%;
width: 100%;
aspect-ratio: 9/16;
min-height: 0;
margin: 0 auto 14px;
}
.video-play-btn { width: 72px; height: 72px; }
.about-portrait-side { width: 50%; right: -16px; bottom: -24px; }
.about-cols { grid-template-columns: 1fr; gap: 16px; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
.testimonials-grid {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
gap: 14px;
}
}
@media (max-width: 640px) {
body { font-size: 15px; overflow-x: hidden; }
/* Frame-Linien auf Mobile komplett raus — engen das Layout ein, Bild geht so bis zum Rand */
.pf-line-l, .pf-line-r,
.pf-dot-tl, .pf-dot-tr, .pf-dot-bl, .pf-dot-br { display: none; }
/* Mobile: Sections kompakter, Headlines runter */
:root { --section-y: 56px; }
.section-head { margin-bottom: 32px; }
h1 { letter-spacing: 0.5px; }
h2 { letter-spacing: 0.5px; }
/* CTA-Final: Container kompakt damit alles auf einen Bildschirm passt */
.cta-final { padding: 60px 0 64px; }
.cta-final h2 { font-size: clamp(24px, 7vw, 38px); margin-bottom: 14px; }
.cta-final p { font-size: 14px; margin-bottom: 22px; }
.cta-final .btn-large { padding: 13px 22px; font-size: 12.5px; }
/* Footer kompakter + v156 aufgeraeumt: Brand oben full-width zentriert, Links als sauberes 2x2 */
.footer { padding: 40px 0 24px; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; margin-bottom: 26px; text-align: center; justify-items: center; }
.footer-brand { grid-column: 1 / -1; margin-bottom: 6px; }
.footer-brand .logo { justify-content: center; }
.footer-socials { justify-content: center; }
.footer-col h4 { font-size: 11px; margin-bottom: 8px; }
.footer-col p { font-size: 13px; margin-bottom: 4px; }
.footer-bottom { font-size: 11px; padding-top: 14px; }
/* v156 Header-Logo mobil kleiner (war zu wuchtig) */
.logo-header svg { width: 34px; }
.logo-header .logo-text { font-size: 16px; letter-spacing: 2.4px; }
/* v156 Hero-CTA mobil kleiner — `body`-Prefix fuer hoehere Spezifitaet als der
spaetere Desktop-Override (.hero:not(.hero-subpage) .hero-content .btn.btn-large). */
body .hero:not(.hero-subpage) .hero-content .btn.btn-large {
padding: 11px 20px !important; font-size: 12px !important; letter-spacing: 1.6px;
}
/* Stimmen Mobile etwas straffer */
.testimonial { padding: 22px 20px; gap: 14px; }
.testimonial-feature { padding: 24px 22px; }
/* Trust-Bar Mobile */
.trust-bar { padding: 22px 0; }
.btn-large { padding: 14px 22px; font-size: 12.5px; letter-spacing: 1.4px; }
.step-body p, .methode-row-text p, .leistung-card-body p,
.testimonial blockquote, .faq-answer p, .about-quote, .about-cols p { font-size: 13.5px; line-height: 1.55; }
/* H3 bleibt einheitlich bei 20px (clamp-floor) — keine Sonderbehandlung pro Section */
.genre-pill { font-size: 10px; padding: 6px 11px; letter-spacing: 1px; }
.lead { font-size: 13.5px; }
.testimonial-feature blockquote { font-size: 14.5px; }
.party-content .lead, .party-content > p { font-size: 13.5px; line-height: 1.55; }
:root {
--frame-inset: 14px;
--pad-x: 22px;
--section-y: 64px;
}
.pf-dot { width: 7px; height: 7px; }
.pf-dot-tl { top: calc(var(--frame-inset) - 3px); left: calc(var(--frame-inset) - 3px); }
.pf-dot-tr { top: calc(var(--frame-inset) - 3px); right: calc(var(--frame-inset) - 3px); }
.pf-dot-bl { bottom: calc(var(--frame-inset) - 3px); left: calc(var(--frame-inset) - 3px); }
.pf-dot-br { bottom: calc(var(--frame-inset) - 3px); right: calc(var(--frame-inset) - 3px); }
h1 { font-size: clamp(26px, 7vw, 52px); letter-spacing: 0.5px; }
h2 { font-size: clamp(24px, 6.2vw, 40px); letter-spacing: 0.5px; } /* v156: unter der Hero-H1 halten */
/* Card-Headlines kleiner als die Sektion-Haupt-Headline (h2=24px).
Vorher hatte .konzept-headline keinen Mobile-Override -> war 28px > h2 = verkehrte Hierarchie.
Haupt-h2 bewusst NICHT vergroessert (Ueberlauf-Sicherheit bei langen Headlines). */
.konzept-headline { font-size: clamp(20px, 5.4vw, 22px); }
.kicker { font-size: 11px; letter-spacing: 3px; padding-left: 30px; }
.kicker::before { width: 22px; }
.probleme-grid { grid-template-columns: 1fr; }
.vinyl-stage, .party-video-stage { max-width: 320px; }
/* v156: Footer 2x2 statt 1-spaltig gestapelt (Brand bleibt full-width via .footer-brand) */
.footer-grid { grid-template-columns: 1fr 1fr; text-align: center; }
}
/* =====================================================
FRAGEN — Editorial Q+A
===================================================== */
.section-fragen {
position: relative;
background: var(--c-bg-1);
padding: clamp(72px, 9vw, 120px) 0;
}
body.theme-event .section-fragen {
background: #15151a;
}
.fragen-list {
max-width: 1080px;
margin: clamp(40px, 5vw, 64px) auto 0;
display: flex;
flex-direction: column;
}
.fragen-item {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: clamp(28px, 4vw, 64px);
padding: clamp(36px, 4.5vw, 60px) 0;
border-top: 1px solid var(--c-line-soft);
align-items: start;
}
.fragen-item:first-child { border-top: 0; padding-top: 0; }
.fragen-item:last-child { padding-bottom: 0; }
.fragen-item:nth-child(even) {
grid-template-columns: 1fr 1.05fr;
}
.fragen-item:nth-child(even) .fragen-q { order: 2; }
.fragen-item:nth-child(even) .fragen-a { order: 1; }
.fragen-q {
position: relative;
padding-left: clamp(48px, 5vw, 72px);
}
.fragen-num {
position: absolute;
left: 0;
top: -2px;
font-family: var(--font-head);
font-size: clamp(18px, 1.6vw, 22px);
letter-spacing: 1px;
color: var(--c-gold);
line-height: 1;
}
.fragen-num::after {
content: "";
position: absolute;
left: 0;
top: calc(100% + 8px);
width: clamp(28px, 3vw, 38px);
height: 1px;
background: var(--c-gold);
}
.fragen-q h3 {
font-family: var(--font-head);
font-weight: 400;
font-size: clamp(22px, 2.4vw, 34px);
line-height: 1.15;
letter-spacing: 0.3px;
text-transform: none;
color: var(--c-text);
}
.fragen-a p {
font-family: var(--font-body);
font-size: clamp(15px, 1.15vw, 17px);
line-height: 1.6;
color: var(--c-text-2);
margin: 0;
max-width: 52ch;
}
@media (max-width: 900px) {
.fragen-item,
.fragen-item:nth-child(even) {
grid-template-columns: 1fr;
gap: 16px;
padding: 32px 0;
}
.fragen-item:nth-child(even) .fragen-q { order: 1; }
.fragen-item:nth-child(even) .fragen-a { order: 2; }
.fragen-q { padding-left: 44px; }
.fragen-q h3 { font-size: 21px; }
.fragen-a p { font-size: 14.5px; }
}
/* =========== Footer Social-Icon =========== */
.footer-socials { margin-top: 6px; }
.footer-social-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border: 1px solid rgba(196,164,132,0.4);
border-radius: 50%;
color: var(--c-text-2);
transition: color .2s, border-color .2s, transform .2s;
}
.footer-social-icon svg { width: 16px; height: 16px; }
.footer-social-icon:hover {
color: var(--c-gold);
border-color: var(--c-gold);
transform: translateY(-2px);
}
/* =====================================================
HÖRPROBE — Mixcloud-Sets, Editorial dark
===================================================== */
.section-mixe {
position: relative;
background: var(--c-bg); /* v115: war hartcodiert #0a0a0c (kuehler Block) — jetzt durchgehende Basis */
color: var(--c-text);
padding: clamp(72px, 9vw, 120px) 0;
overflow: hidden;
}
.section-mixe::before {
content: "";
position: absolute;
top: -20%;
left: 50%;
transform: translateX(-50%);
width: 150%;
height: 130%;
/* v117: viel groesser + weicher, keine abrupte Glow-Kante mehr */
background: radial-gradient(ellipse at center 30%, rgba(196,164,132,0.05), transparent 72%);
pointer-events: none;
z-index: 0;
}
.section-mixe > .container { position: relative; z-index: 1; }
.section-mixe .section-head h2 { color: var(--c-text); }
.section-mixe .section-head .lead { color: var(--c-text-2); }
.mixe-grid {
display: grid;
grid-template-columns: 1.35fr 1fr;
gap: 24px;
margin-top: clamp(36px, 4.5vw, 56px);
}
.mixe-side {
display: grid;
grid-template-rows: 1fr 1fr;
gap: 24px;
min-height: 0;
}
.mix-card {
position: relative;
border-radius: 4px;
overflow: hidden;
isolation: isolate;
border: 1px solid rgba(196,164,132,0.22);
background: #0c0c0e;
cursor: pointer;
transition: transform .4s var(--ease-out, cubic-bezier(.2,.8,.2,1)),
border-color .4s, box-shadow .4s;
min-height: 320px;
}
.mix-card-featured { min-height: 540px; }
.mix-card:hover {
transform: translateY(-3px) rotate(-0.4deg);
border-color: var(--c-gold);
box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 0 1px var(--c-gold);
}
.mix-card-bg {
position: absolute; inset: 0;
background-size: cover;
background-position: center 35%;
transition: transform .9s ease;
z-index: 0;
filter: saturate(1.05);
}
.mix-card:hover .mix-card-bg { transform: scale(1.05); }
.mix-card-overlay {
position: absolute; inset: 0;
background: linear-gradient(180deg,
rgba(8,8,10,0.30) 0%,
rgba(8,8,10,0.55) 45%,
rgba(8,8,10,0.95) 100%);
z-index: 1;
}
.mix-card-content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: flex-end;
height: 100%;
padding: 26px 24px 40px;
}
.mix-card-genre {
font-family: var(--font-head);
font-size: clamp(26px, 3.2vw, 44px);
line-height: 0.95;
letter-spacing: 1px;
margin-bottom: 14px;
text-transform: uppercase;
color: var(--c-text);
}
.mix-card-featured .mix-card-genre { font-size: clamp(38px, 4.4vw, 64px); margin-bottom: 16px; }
.mix-card-meta {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-body);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 2.4px;
text-transform: uppercase;
color: var(--c-gold);
margin-bottom: 16px;
}
.mix-card-meta::before, .mix-card-meta::after {
content: ""; width: 20px; height: 1px; background: var(--c-gold);
}
.mix-card-title {
font-family: var(--font-body);
font-size: 13.5px;
color: var(--c-text-2);
margin-bottom: 18px;
line-height: 1.45;
max-width: 32ch;
}
.mix-play-pill {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 11px 20px;
background: var(--c-gold);
color: #0c0c0e;
font-family: var(--font-body);
font-weight: 700;
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
border-radius: 999px;
align-self: flex-start;
transition: background .2s, transform .2s;
}
.mix-card:hover .mix-play-pill { background: var(--c-gold-bright); transform: translateX(2px); }
.mix-play-pill svg { width: 10px; height: 10px; fill: currentColor; }
/* Player: schiebt sich unten in die Karte rein, Cover bleibt sichtbar */
.mix-iframe-wrap {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 0;
overflow: hidden;
z-index: 4;
background: #0c0c0e;
border-top: 1px solid var(--c-gold);
transition: height .35s var(--ease-out, cubic-bezier(.2,.8,.2,1));
}
.mix-card.is-playing .mix-iframe-wrap { height: 80px; }
.mix-card.is-playing .mix-card-content { padding-bottom: 96px; }
.mix-iframe-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }
/* DSGVO-Hinweis auf der Karte vor Klick */
.mix-card-consent {
position: absolute;
bottom: 10px; left: 24px; right: 24px;
font-family: var(--font-body);
font-size: 10.5px;
letter-spacing: 0.5px;
color: rgba(240, 237, 229, 0.55);
text-align: left;
z-index: 3;
pointer-events: none;
line-height: 1.4;
}
.mix-card.is-playing .mix-card-consent { display: none; }
.mix-card-consent a {
color: rgba(240, 237, 229, 0.75);
text-decoration: underline;
pointer-events: auto;
}
.mixe-link-more-wrap { text-align: center; margin-top: 36px; }
.mixe-link-more {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-body);
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--c-gold);
padding: 8px 0;
border-bottom: 1px solid rgba(196,164,132,0.35);
transition: color .2s, border-color .2s;
}
.mixe-link-more:hover { color: var(--c-gold-bright); border-color: var(--c-gold-bright); }
@media (max-width: 900px) {
.mixe-grid { grid-template-columns: 1fr; gap: 16px; }
.mixe-side { grid-template-rows: auto auto; gap: 16px; }
.mix-card { min-height: 300px; }
.mix-card-featured { min-height: 360px; }
/* v137 Mobile-Fix B5: mehr Bottom-Padding, damit der REINHOEREN-Button den
absolut positionierten Datenschutz-Hinweis (kann 2-zeilig sein) NICHT ueberlappt. */
.mix-card-content { padding: 22px 20px 58px; }
.mix-card-consent { left: 20px; right: 20px; bottom: 14px; }
}
/* =========== Reduced Motion =========== */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
* { transition: none !important; animation: none !important; }
}
/* =========== Focus Visible =========== */
:focus-visible {
outline: 2px solid var(--c-gold);
outline-offset: 3px;
}
/* =====================================================
MODERN-LAYER 2026 — Agency-Premium Patterns
Section: Vorteile, Marquee, Sticky-Funktionen, Counter
Inspiriert von jasminhuber.com, andreasbaulig.de, webaesthetik.de
===================================================== */
/* === Lenis Smooth Scroll === */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }
/* === Sektion Vorteile (Big-Type, Numerated) === */
.section-vorteile {
padding: var(--section-y) 0;
background: var(--c-bg);
position: relative;
}
.section-vorteile .container { max-width: var(--container); margin-inline: auto; padding-inline: var(--pad-x); }
.vorteile-intro {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: clamp(32px, 6vw, 120px);
align-items: end;
margin-bottom: clamp(64px, 8vw, 140px);
}
.vorteile-intro .kicker {
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--c-text-3);
}
.vorteile-intro h2 {
font-family: var(--font-head);
font-weight: 400;
font-size: clamp(48px, 7vw, 120px);
line-height: 0.95;
letter-spacing: -0.01em;
color: var(--c-text);
text-transform: uppercase;
}
.vorteile-intro h2 em {
font-style: normal;
color: var(--c-gold);
}
.vorteile-intro p {
font-size: clamp(16px, 1.4vw, 19px);
line-height: 1.6;
color: var(--c-text-2);
max-width: 52ch;
}
.vorteile-list { display: flex; flex-direction: column; gap: 0; }
.vorteile-item {
display: grid;
grid-template-columns: 80px 1fr 1fr;
gap: clamp(20px, 4vw, 64px);
align-items: start;
padding: clamp(40px, 6vw, 88px) 0;
border-top: 1px solid var(--c-line);
position: relative;
opacity: 0;
transform: translateY(40px);
transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
}
.vorteile-item:last-child { border-bottom: 1px solid var(--c-line); }
.vorteile-item.is-visible { opacity: 1; transform: translateY(0); }
.vorteile-num {
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.1em;
color: var(--c-gold);
padding-top: clamp(8px, 1vw, 18px);
}
.vorteile-title {
font-family: var(--font-head);
font-weight: 400;
font-size: clamp(32px, 4.5vw, 72px);
line-height: 1.0;
letter-spacing: -0.005em;
color: var(--c-text);
text-transform: uppercase;
}
.vorteile-body {
font-size: clamp(15px, 1.2vw, 17px);
line-height: 1.65;
color: var(--c-text-2);
padding-top: clamp(10px, 1.4vw, 22px);
max-width: 46ch;
}
@media (max-width: 880px) {
.vorteile-intro { grid-template-columns: 1fr; gap: 32px; }
.vorteile-item {
grid-template-columns: 56px 1fr;
gap: 16px 20px;
}
.vorteile-body { grid-column: 1 / -1; padding-top: 0; }
}
/* === Section-Modifier: --dark (für rhythmische Section-Wechsel im Hochzeit-Theme) === */
.section--dark {
background: var(--c-dark-bg, #1a1814);
color: var(--c-dark-text, #f2eee8);
border-color: var(--c-dark-line, rgba(201, 125, 79, 0.28));
}
.section--dark .kicker { color: var(--c-gold); }
.section--dark h2,
.section--dark h3 { color: var(--c-dark-text, #f2eee8); }
.section--dark p { color: var(--c-dark-muted, #b8b3aa); }
/* === Marquee Locations (Default: dark für Energie-Wechsel) === */
.section-marquee {
background: var(--c-dark-bg, #1a1814);
padding: clamp(40px, 5vw, 72px) 0;
border-block: 1px solid var(--c-dark-line, rgba(201, 125, 79, 0.28));
overflow: hidden;
position: relative;
}
.marquee-track {
display: flex;
gap: clamp(48px, 6vw, 96px);
width: max-content;
animation: marquee-scroll 50s linear infinite;
will-change: transform;
}
.marquee-track > span {
font-family: var(--font-head);
font-weight: 400;
font-size: clamp(40px, 6vw, 92px);
line-height: 1;
letter-spacing: 0.01em;
color: var(--c-dark-text, #f2eee8);
text-transform: uppercase;
white-space: nowrap;
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: clamp(48px, 6vw, 96px);
}
.marquee-track > span::after {
content: "✦";
color: var(--c-gold);
font-size: 0.5em;
display: inline-block;
}
.section-marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.marquee-track { animation: none; }
}
/* === Counter Sektion (Big-Number-Statement) === */
.section-counter {
padding: clamp(80px, 10vw, 180px) 0;
background: var(--c-bg);
text-align: center;
}
.counter-num {
font-family: var(--font-head);
font-weight: 400;
font-size: clamp(120px, 18vw, 280px);
line-height: 0.9;
letter-spacing: -0.02em;
color: var(--c-gold);
display: block;
margin-bottom: clamp(16px, 2vw, 32px);
}
.counter-label {
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--c-text-3);
}
/* === 27"-Spezifika: Container max, Section-Y atmen lassen aber nicht überdimensioniert === */
@media (min-width: 1920px) {
:root {
--container: 1680px;
--section-y: clamp(100px, 5vw, 160px);
}
}
/* =====================================================
BRUTALIST RUNNING-TEXT TICKER (Editorial-Pop zwischen Sections)
===================================================== */
.ticker-band {
position: relative;
width: 100%;
background: #0a0a0a;
color: #f5f2ec;
padding: 12px 0;
overflow: hidden;
border-top: 1px solid #0a0a0a;
border-bottom: 1px solid #0a0a0a;
}
body.theme-hochzeit .ticker-band {
background: var(--c-bg-2);
color: var(--c-text-2);
border-top-color: rgba(74, 52, 42, 0.10);
border-bottom-color: rgba(74, 52, 42, 0.10);
}
body.theme-hochzeit .ticker-item.is-outline {
-webkit-text-stroke-color: var(--c-text-2);
}
body.theme-hochzeit .ticker-item::after {
color: var(--c-gold-bright);
}
/* Event-Ticker: dezenter Grauton aus den Theme-Tokens statt hartem Schwarz */
body.theme-event .ticker-band {
background: var(--c-bg-2);
color: var(--c-text-2);
border-top-color: rgba(212, 165, 116, 0.10);
border-bottom-color: rgba(212, 165, 116, 0.10);
}
body.theme-event .ticker-item.is-outline {
-webkit-text-stroke-color: var(--c-text-2);
}
.ticker-track {
display: flex;
gap: 0;
animation: ticker-scroll 70s linear infinite;
white-space: nowrap;
width: max-content;
}
.ticker-band:hover .ticker-track { animation-play-state: paused; }
.ticker-item {
font-family: var(--font-display);
font-size: clamp(16px, 2vw, 30px);
font-weight: 400;
letter-spacing: 0.02em;
text-transform: uppercase;
line-height: 1;
display: inline-flex;
align-items: center;
gap: 32px;
/* fester Abstand AN jedem Item statt flex-gap zwischen Items -> nahtloser Loop bei -50% */
margin-right: 32px;
}
.ticker-item::after {
content: "●";
font-size: 0.4em;
color: var(--c-gold-bright);
display: inline-block;
}
.ticker-item.is-outline {
color: transparent;
-webkit-text-stroke: 1.5px #f5f2ec;
}
@keyframes ticker-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.ticker-track { animation: none; }
}
/* =====================================================
RGB-GLITCH-HOVER (Brutalist Editorial Pop auf Bildern)
===================================================== */
.glitch-hover {
position: relative;
overflow: hidden;
}
.glitch-hover img {
transition: transform 600ms var(--ease), filter 220ms var(--ease);
}
/* RGB-Glitch deaktiviert — flackern auf Bildern war zu unruhig */
.glitch-hover:hover img {
transform: scale(1.03);
}
@keyframes rgb-glitch {
0% { filter: contrast(1) saturate(1); transform: translate(0,0) scale(1); }
20% { filter: drop-shadow(2px 0 0 rgba(255,0,80,0.6)) drop-shadow(-2px 0 0 rgba(0,180,255,0.5)); transform: translate(-1px, 1px) scale(1.02); }
40% { filter: drop-shadow(-3px 0 0 rgba(255,0,80,0.5)) drop-shadow(3px 0 0 rgba(0,180,255,0.55)); transform: translate(2px, -1px) scale(1.025); }
60% { filter: drop-shadow(1px 0 0 rgba(255,0,80,0.4)) drop-shadow(-1px 0 0 rgba(0,180,255,0.4)); transform: translate(0, 1px) scale(1.03); }
100% { filter: contrast(1.05) saturate(1.08); transform: translate(0,0) scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
.glitch-hover:hover img { animation: none; transform: scale(1.02); }
}
/* Mono-Caption-Stil für Editorial-Tags (Bild-Ort/Datum) */
.mono-caption {
font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--c-text-3);
display: inline-block;
padding: 4px 0;
border-top: 1px solid var(--c-line);
margin-top: 8px;
}
/* =====================================================
ABLAUF — Vinyl-Setlist (5 drehende Schallplatten)
===================================================== */
/* =====================================================
ABLAUF — Editorial-Timeline mit echten Fotos
(Vinyl-Setlist verworfen — Foto-First wirkt premium ohne kitschig)
===================================================== */
.timeline-steps {
position: relative;
margin: clamp(48px, 5vw, 72px) 0 0;
display: flex;
flex-direction: column;
gap: clamp(48px, 5vw, 80px);
}
.timeline-step {
display: grid;
grid-template-columns: 90px 1fr 1.1fr;
gap: clamp(20px, 3vw, 48px);
align-items: center;
position: relative;
}
.timeline-step-reverse {
grid-template-columns: 1.1fr 1fr 90px;
}
.timeline-step-reverse .timeline-step-num { order: 3; }
.timeline-step-reverse .timeline-step-text { order: 2; text-align: right; }
.timeline-step-reverse .timeline-step-img { order: 1; }
.timeline-step-num {
font-family: var(--font-head);
font-size: clamp(56px, 6vw, 96px);
color: var(--c-gold);
line-height: 0.9;
letter-spacing: -2px;
opacity: 0.85;
position: relative;
text-align: center;
}
/* Dünne goldene Vertikallinie zum nächsten Step */
.timeline-step:not(:last-child) .timeline-step-num::after {
content: "";
position: absolute;
top: calc(100% + 6px);
left: 50%;
width: 1px;
height: clamp(48px, 5vw, 96px);
background: linear-gradient(to bottom, var(--c-gold) 0%, rgba(196,164,132,0.1) 100%);
transform: translateX(-50%);
}
.timeline-step-text { max-width: 480px; }
.timeline-step-reverse .timeline-step-text { margin-left: auto; }
.timeline-step-label {
display: inline-block;
font-family: var(--font-body);
font-weight: 700;
font-size: 12px;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--c-gold);
margin-bottom: 14px;
}
.timeline-step-text h3 {
font-family: var(--font-head);
font-size: clamp(28px, 2.6vw, 40px);
line-height: 1.05;
letter-spacing: -0.5px;
margin: 0 0 12px;
}
.timeline-step-text p {
font-size: 16px;
color: var(--c-text-2);
margin: 0;
line-height: 1.65;
}
.timeline-step-img {
aspect-ratio: 5/4;
overflow: hidden;
position: relative;
box-shadow: 0 18px 40px rgba(0,0,0,0.18);
max-width: 520px;
}
.timeline-step-reverse .timeline-step-img { margin-left: auto; }
.timeline-step-img img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 900ms var(--ease);
}
.timeline-step:hover .timeline-step-img img { transform: scale(1.03); }
.timeline-step-img::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 70%, rgba(0,0,0,0.20) 100%);
pointer-events: none;
}
@media (max-width: 880px) {
.timeline-step,
.timeline-step-reverse {
grid-template-columns: 70px 1fr;
gap: 18px;
}
.timeline-step-reverse .timeline-step-num { order: 1; }
.timeline-step-reverse .timeline-step-text { order: 2; text-align: left; margin-left: 0; }
.timeline-step-img {
grid-column: 1 / -1;
max-width: 100%;
margin-top: 4px;
}
.timeline-step-reverse .timeline-step-img { margin-left: 0; }
.timeline-step-num { font-size: 48px; text-align: left; }
.timeline-step:not(:last-child) .timeline-step-num::after { display: none; }
}
body.theme-hochzeit .section-ablauf { background: var(--c-bg); }
/* =====================================================
SOUNDBITE — Trenner zwischen Ablauf (Vinyl-Setlist) und Party (Vinyl-Stage)
bricht Vinyl-Loop, Editorial Pull-Quote + 2 echte Foto-Thumbs
===================================================== */
.section-soundbite {
background: #1a1208;
color: #f5efe5;
padding: clamp(80px, 8vw, 140px) 0;
position: relative;
overflow: hidden;
}
body.theme-event .section-soundbite { background: var(--c-bg); }
.soundbite {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: clamp(24px, 4vw, 64px);
align-items: center;
max-width: 1200px;
margin: 0 auto;
}
.soundbite-thumb {
position: relative;
aspect-ratio: 4/5;
overflow: hidden;
box-shadow: 0 20px 50px rgba(0,0,0,0.45);
}
.soundbite-thumb img {
width: 100%; height: 100%;
object-fit: cover;
filter: saturate(0.92) contrast(1.04);
transition: transform 700ms var(--ease);
}
.soundbite-thumb:hover img { transform: scale(1.04); }
.soundbite-thumb-l { transform: translateY(-24px) rotate(-1.5deg); }
.soundbite-thumb-r { transform: translateY(24px) rotate(1.5deg); }
.soundbite-thumb figcaption {
font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
font-size: 10.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(245,239,229,0.75);
display: block;
padding: 8px 0 0;
margin-top: 6px;
border-top: 1px solid rgba(196,164,132,0.3);
white-space: nowrap;
}
.soundbite-quote {
text-align: center;
margin: 0;
padding: 0 clamp(12px, 2vw, 32px);
}
.soundbite-quote .kicker {
font-family: var(--font-body);
font-weight: 700;
font-size: 11px;
letter-spacing: 2.5px;
text-transform: uppercase;
color: #c4a484;
display: block;
margin-bottom: 18px;
}
.soundbite-quote p {
font-family: var(--font-head);
font-size: clamp(28px, 4vw, 58px);
line-height: 1.05;
letter-spacing: -0.5px;
color: #f5efe5;
margin: 0;
position: relative;
}
.soundbite-quote p::before,
.soundbite-quote p::after {
content: "„";
color: #c4a484;
display: inline-block;
margin-right: 6px;
opacity: 0.7;
}
.soundbite-quote p::after { content: "\""; margin-left: 4px; margin-right: 0; }
.soundbite-meta {
display: inline-flex;
gap: 18px;
margin-top: 24px;
font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(245,239,229,0.6);
}
.soundbite-meta span::before {
content: "●";
color: #c4a484;
margin-right: 8px;
font-size: 0.6em;
vertical-align: middle;
}
@media (max-width: 880px) {
.soundbite { grid-template-columns: 1fr; gap: 32px; }
.soundbite-thumb-l, .soundbite-thumb-r { transform: none; max-width: 60%; margin: 0 auto; }
.soundbite-thumb { aspect-ratio: 5/4; }
}
/* Methode-Bilder: Editorial-Versatz nur vertikal, keine Rotation (wirkt sonst wackelig) */
.section-methode .methode-row:nth-child(1) .methode-row-img { transform: translateY(-32px); }
.section-methode .methode-row:nth-child(2) .methode-row-img { transform: translateY(28px); }
.section-methode .methode-row:nth-child(3) .methode-row-img { transform: translateY(-32px); }
/* Row 3 braucht extra margin-top, sonst kommt der visuelle Abstand 02↔03 kleiner als 01↔02
(weil R2 +28 und R3 -32 visuell die Bilder zueinanderziehen). */
.section-methode .methode-row:nth-child(3) { margin-top: clamp(60px, 6vw, 120px); }
@media (max-width: 880px) {
.section-methode .methode-row:nth-child(n) .methode-row-img { transform: none; }
.section-methode .methode-row:nth-child(3) { margin-top: 0; }
}
/* =====================================================
HOCHZEIT-THEME Overrides für Hörprobe & Stimmen
raus aus Schwarz-Ton, rein in helle Brandboard-Welt
===================================================== */
/* Hörprobe: reinweiß-Welt, Bilder ungefiltert, Overlay nur sanfter Schatten unten */
body.theme-hochzeit .section-mixe {
background: #ffffff; /* reinweiß, kein Beige */
color: var(--c-text);
}
body.theme-hochzeit .section-mixe::before {
background: radial-gradient(ellipse at center, rgba(178,150,125,0.10), transparent 65%);
}
body.theme-hochzeit .mix-card {
background: var(--c-bg);
border-color: rgba(74, 52, 42, 0.18);
}
body.theme-hochzeit .mix-card:hover {
border-color: var(--c-gold);
box-shadow: 0 24px 60px rgba(74, 52, 42, 0.22), 0 0 0 1px var(--c-gold);
}
/* Overlay nur unten als sanfter Schatten — Foto oben unverwischt */
body.theme-hochzeit .mix-card-overlay {
background: linear-gradient(180deg,
rgba(255,255,255,0) 0%,
rgba(20,15,10,0.05) 50%,
rgba(20,15,10,0.62) 100%);
}
body.theme-hochzeit .mix-card-bg {
filter: none; /* keine Shader, Foto authentisch */
}
/* Reinhören-Button: heller BG, dunkler Text — klar lesbar auf Hochzeit-Theme */
body.theme-hochzeit .mix-play-pill {
background: #ffffff;
color: #1c1410;
box-shadow: 0 4px 14px rgba(0,0,0,0.22);
}
body.theme-hochzeit .mix-card:hover .mix-play-pill {
background: var(--c-gold-bright);
color: #ffffff;
transform: translateX(2px);
}
body.theme-hochzeit .mix-card-genre {
color: #f5efe5; /* hell auf braun-bottom */
}
body.theme-hochzeit .mix-card-meta { color: rgba(245,239,229,0.85); }
body.theme-hochzeit .mix-card-title { color: rgba(245,239,229,0.92); }
body.theme-hochzeit .mix-card-consent { color: rgba(245,239,229,0.7); }
body.theme-hochzeit .mixe-link-more {
color: var(--c-gold);
border-color: var(--c-gold);
}
body.theme-hochzeit .mixe-link-more:hover { color: var(--c-gold-bright); }
/* Stimmen: Container weniger beige — Off-White statt mittlerem Cream */
body.theme-hochzeit .testimonial {
background: var(--c-bg); /* reines Weiß */
border: 1px solid rgba(74, 52, 42, 0.12);
}
body.theme-hochzeit .testimonial-feature {
background: var(--c-bg-1); /* Off-White, kein dunkler Brown-Gradient */
border-color: rgba(74, 52, 42, 0.20);
}
body.theme-hochzeit .video-testimonial {
background: var(--c-bg-1);
border-color: rgba(74, 52, 42, 0.15);
}
/* =====================================================
PARALLAX-QUOTE — Full-bleed Bild + zentriertes Statement
Trenner zwischen Sektionen, ohne Name, ohne Brand
===================================================== */
.parallax-quote {
position: relative;
height: clamp(60vh, 80vh, 720px);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
}
.parallax-quote-bg {
position: absolute;
top: -30%;
left: 0;
right: 0;
bottom: -30%;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
z-index: 0;
will-change: transform;
transform: translate3d(0, 0, 0);
transition: transform 100ms linear;
}
/* Video statt Bild im Parallax-BG (erbt den Scroll-Transform vom Eltern-Div) */
.parallax-quote-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.parallax-quote::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.40) 0%, rgba(0,0,0,0.55) 100%);
z-index: 1;
}
.parallax-quote-text {
position: relative;
z-index: 2;
max-width: 1000px;
padding: 0 clamp(20px, 4vw, 56px);
text-align: center;
}
.parallax-quote-text q {
font-family: var(--font-head);
font-size: clamp(32px, 5vw, 72px);
line-height: 1.08;
letter-spacing: -0.5px;
color: #f5efe5;
display: block;
text-shadow: 0 4px 24px rgba(0,0,0,0.4);
quotes: "„" """;
}
.parallax-quote-text q::before { content: open-quote; }
.parallax-quote-text q::after { content: close-quote; }
@media (max-width: 880px) {
.parallax-quote { height: 60vh; }
}
/* =====================================================
SPLASH-HUB — Startseite kurz: Slideshow + Switch + Quote + Galerie
===================================================== */
body.is-splash {
background: #ffffff;
color: #1a1410;
}
body.is-splash .nav {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(74, 52, 42, 0.10);
box-shadow: 0 2px 18px rgba(0, 0, 0, 0.04);
}
/* Explizite dunkle Farben — der Header sitzt auf weißem Splash-Hintergrund */
body.is-splash .nav .logo,
body.is-splash .nav .logo-text,
body.is-splash .nav-links a,
body.is-splash .nav-burger span {
color: #1a1410 !important;
}
body.is-splash .nav .logo svg { fill: #1a1410; }
body.is-splash .nav-links a {
font-weight: 600;
opacity: 1;
}
body.is-splash .nav-links a:hover { color: #4a342a !important; }
body.is-splash .btn-header {
background: #1a1410;
color: #ffffff !important;
border-color: #1a1410;
}
body.is-splash .btn-header:hover {
background: #4a342a;
border-color: #4a342a;
}
/* Splash Hero — Slideshow mittig */
.splash-hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
padding: 120px 0 60px;
}
.splash-slides {
position: absolute;
inset: 0;
z-index: 0;
}
.splash-slide {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 1600ms ease-in-out;
}
.splash-slide.is-active { opacity: 1; }
.splash-hero::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.55) 100%);
z-index: 1;
}
.splash-hero-content {
position: relative;
z-index: 2;
text-align: center;
max-width: 920px;
padding: 0 clamp(20px, 4vw, 56px);
color: #f5efe5;
}
.splash-hero-content .kicker {
color: rgba(245, 239, 229, 0.85);
margin-bottom: 18px;
}
.splash-hero-content h1 {
font-family: var(--font-head);
font-size: clamp(40px, 6vw, 88px);
line-height: 1.02;
letter-spacing: -1px;
margin-bottom: 24px;
color: #f5efe5;
text-shadow: 0 4px 24px rgba(0,0,0,0.35);
}
.splash-hero-content .lead {
font-size: clamp(16px, 1.4vw, 20px);
line-height: 1.55;
color: rgba(245, 239, 229, 0.92);
margin: 0 auto 40px;
max-width: 640px;
}
.splash-switch {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 28px;
}
.splash-switch .btn {
min-width: 220px;
padding: 18px 36px;
font-size: 14px;
}
.splash-hint {
font-size: 13px;
color: rgba(245, 239, 229, 0.7);
margin: 0;
}
.splash-hint a {
color: #f5efe5;
text-decoration: underline;
text-underline-offset: 4px;
}
.splash-hint a:hover { color: var(--c-gold-bright); }
/* Splash Galerie */
.splash-gallery {
padding: clamp(72px, 8vw, 120px) 0;
background: #fff;
}
.splash-gallery-grid {
display: grid;
grid-template-columns: 1.1fr 1.4fr 1fr;
grid-template-rows: clamp(220px, 28vw, 340px) clamp(220px, 28vw, 340px);
gap: 14px;
max-width: 1320px;
margin: 0 auto;
padding: 0 clamp(20px, 3vw, 40px);
}
.splash-gallery-item {
overflow: hidden;
background: #f0ece5;
position: relative;
display: block;
}
.splash-gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 800ms var(--ease);
}
.splash-gallery-item:hover img { transform: scale(1.04); }
.splash-gallery-item:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
.splash-gallery-item:nth-child(2) { grid-column: 2 / 4; grid-row: 1; }
.splash-gallery-item:nth-child(3) { grid-column: 2; grid-row: 2; }
.splash-gallery-item:nth-child(4) { grid-column: 3; grid-row: 2; }
@media (max-width: 760px) {
.splash-gallery-grid {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
aspect-ratio: auto;
}
.splash-gallery-item:nth-child(n) { grid-column: auto; grid-row: auto; }
.splash-gallery-item { aspect-ratio: 4/5; }
}
/* =====================================================
SPLASH SPLIT — 2 Hälften (Hochzeit / Event)
===================================================== */
.splash-split {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: calc(100vh - 80px);
gap: 0;
}
.splash-split.splash-split-three {
grid-template-columns: 1fr 1fr 1fr;
}
/* Label kleiner bei 3-Spalten-Variante (sonst zu breit für die schmaleren Drittel) */
.splash-split-three .splash-half-label {
/* v145: ALLE drei Labels gleich gross UND auf die kleinere Corporate-Groesse getunt
(Ruben: Corporate sah auf dem MacBook richtig aus, Hochzeit/Destination waren zu gross).
Werte = die frueheren Corporate-Werte, jetzt fuer alle drei. Kein Event-Override mehr. */
font-size: clamp(22px, 3.6vw, 60px);
text-align: center;
line-height: 1.0;
padding: 0 12px;
}
.splash-half {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
isolation: isolate;
background: #050505;
padding-top: clamp(60px, 7vh, 80px);
}
.splash-half-bg {
position: absolute;
top: clamp(60px, 7vh, 80px);
right: 0;
bottom: 0;
left: 0;
background-size: cover;
background-repeat: no-repeat;
transition: transform 1400ms var(--ease);
z-index: 0;
}
/* Splash Footer hell (sonst zieht body.is-splash das dunkle Default-Theme) */
body.is-splash .footer {
background: #ffffff;
color: #1a1410;
}
body.is-splash .footer-col h4 { color: #4a342a; }
body.is-splash .footer-col p,
body.is-splash .footer-col a { color: #4a342a; }
body.is-splash .footer-bottom {
border-top-color: rgba(74,52,42,0.15);
color: #8a7f70;
}
.splash-half:hover .splash-half-bg { transform: scale(1.05); }
/* Splash-Half-Stacked: 2 Bilder nebeneinander (vertikale Streifen) pro Hälfte.
Tiles starten UNTER dem Header damit Köpfe nicht verdeckt werden.
splash-half-stacked background = nav.is-scrolled background (#050505)
damit kein sichtbarer Übergang zwischen Header und Tile-Anfang. */
.splash-half-stacked {
background: #050505;
}
.splash-half-stacked .splash-half-tile {
position: absolute;
top: clamp(60px, 7vh, 80px);
bottom: 0;
width: 50%;
background-size: cover;
background-repeat: no-repeat;
transition: transform 1400ms var(--ease);
z-index: 0;
}
.splash-half-stacked .splash-half-tile-left { left: 0; }
.splash-half-stacked .splash-half-tile-right { right: 0; }
.splash-half-stacked:hover .splash-half-tile { transform: scale(1.04); }
/* Box-shadow vom Header auf Splash weg — sonst sichtbarer Strich am Header-Bottom */
body.is-splash .nav.is-scrolled { box-shadow: none; }
.splash-half::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.50) 100%);
transition: background 500ms;
z-index: 1;
}
.splash-half:hover::after {
background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.30) 100%);
}
.splash-half-label {
position: relative;
z-index: 2;
font-family: var(--font-head);
font-size: clamp(64px, 12vw, 180px);
color: #ffffff;
letter-spacing: 1px;
line-height: 0.92;
text-shadow: 0 6px 32px rgba(0,0,0,0.55);
text-transform: uppercase;
transition: transform 500ms var(--ease), letter-spacing 500ms var(--ease);
}
.splash-half:hover .splash-half-label {
transform: scale(1.04);
letter-spacing: 2px;
}
.splash-bottom-hint {
text-align: center;
padding: 28px 20px;
font-size: 14px;
color: var(--c-text-2, #4a342a);
background: #ffffff;
margin: 0;
letter-spacing: 0.04em;
}
.splash-bottom-hint a {
color: #1a1410;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 4px;
}
.splash-bottom-hint a:hover { color: var(--c-gold-bright, #b2967d); }
@media (max-width: 760px) {
.splash-split { grid-template-columns: 1fr; min-height: auto; }
.splash-split.splash-split-three { grid-template-columns: 1fr; }
.splash-half { min-height: 60vh; }
.splash-split-three .splash-half { min-height: 40vh; }
/* v139: gestapelte Kacheln — Bild deckt die ganze Kachel, kein schwarzes Band oben
(der 60-80px Top-Offset war fuer die Desktop-Nav, mobil erzeugt er Striche). */
.splash-half { padding-top: 0; }
.splash-half-bg { top: 0; }
}
/* Party-Image — ersetzt Vinyl-Disc in "Eure Party" Sektion */
.party-image {
position: relative;
aspect-ratio: 4/5;
overflow: hidden;
box-shadow: 0 24px 56px rgba(0,0,0,0.30);
max-width: 480px;
width: 100%;
margin: 0 auto;
}
.party-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* =====================================================
STIMMEN — Video Hochkant + Quote-Text daneben (Editorial)
===================================================== */
/* Einzel-Testimonial (event + auslandshochzeit nutzen weiter diese Klasse) */
.stimmen-vertical {
display: grid;
grid-template-columns: minmax(280px, 360px) minmax(360px, 480px);
gap: clamp(32px, 5vw, 64px);
align-items: center;
justify-content: center;
max-width: 980px;
margin: clamp(48px, 6vw, 80px) auto 0;
}
/* Doppel-Testimonial (Hochzeitsseite, 2 gespiegelte Paare) */
.stimmen-duo {
display: flex;
flex-direction: column;
gap: clamp(56px, 8vw, 110px);
max-width: 980px;
margin: clamp(48px, 6vw, 80px) auto 0;
}
.stimmen-pair {
display: grid;
grid-template-columns: minmax(280px, 360px) minmax(360px, 480px);
gap: clamp(32px, 5vw, 64px);
align-items: center;
justify-content: center;
}
/* Zweites Testimonial gespiegelt: Text links, Video rechts */
.stimmen-pair-reverse {
grid-template-columns: minmax(360px, 480px) minmax(280px, 360px);
}
.stimmen-pair-reverse .stimmen-video { order: 2; }
.stimmen-pair-reverse .stimmen-text { order: 1; }
.stimmen-video {
margin: 0;
position: relative;
aspect-ratio: 9/16;
overflow: hidden;
background: #0a0a0a;
box-shadow: 0 32px 72px rgba(0,0,0,0.30), 0 8px 18px rgba(0,0,0,0.18);
border: 1px solid rgba(196, 164, 132, 0.20);
}
.stimmen-video video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.stimmen-video .video-badge {
position: absolute;
top: 16px;
left: 16px;
z-index: 3;
padding: 7px 14px;
background: rgba(255, 255, 255, 0.95);
color: #1c1410;
font-family: var(--font-body);
font-weight: 700;
font-size: 10px;
letter-spacing: 1.8px;
text-transform: uppercase;
}
.stimmen-video .video-testimonial-player {
position: absolute;
inset: 0;
/* globale .video-testimonial-player-Regel hat margin-bottom:16px -> schrumpft
den absoluten Player um ~16px = schwarzer Streifen unten. Hier zuruecksetzen. */
margin: 0;
min-height: 0;
}
.stimmen-video .video-play-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
z-index: 2;
background: transparent;
border: 0;
cursor: pointer;
transition: transform 300ms var(--ease);
}
.stimmen-video .video-play-btn:hover { transform: translate(-50%, -50%) scale(1.08); }
.stimmen-video .video-play-btn svg { width: 100%; height: 100%; }
.stimmen-text {
max-width: 540px;
}
.stimmen-mono-tag {
display: inline-block;
font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--c-gold-bright, #b2967d);
margin-bottom: 20px;
padding: 6px 0;
border-top: 1px solid var(--c-line, rgba(74,52,42,0.25));
}
body.theme-event .stimmen-mono-tag {
color: #c4a484;
border-top-color: rgba(196,164,132,0.30);
}
.stimmen-quote-large {
margin: 0 0 22px;
font-family: var(--font-head);
font-size: clamp(28px, 3.4vw, 48px);
line-height: 1.08;
letter-spacing: -0.5px;
color: var(--c-text);
position: relative;
}
.stimmen-quote-large::before {
content: "„";
display: block;
font-family: var(--font-head);
font-size: clamp(48px, 5vw, 80px);
line-height: 0.5;
color: var(--c-gold-bright, #b2967d);
margin-bottom: 16px;
opacity: 0.85;
}
.stimmen-attribution {
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--c-text-2, #4a342a);
margin: 0;
}
body.theme-event .stimmen-attribution { color: rgba(245,239,229,0.7); }
@media (max-width: 760px) {
.stimmen-vertical,
.stimmen-pair,
.stimmen-pair-reverse {
grid-template-columns: 1fr;
gap: 32px;
}
.stimmen-pair-reverse .stimmen-video,
.stimmen-pair-reverse .stimmen-text { order: 0; }
.stimmen-video {
/* v137 Mobile-Fix: ohne width kollabierte die 9/16-Box durch margin:auto auf ~2px.
width:100% gibt der aspect-ratio eine Basis -> Video gross + klickbar. */
width: 100%;
max-width: 230px;
margin: 0 auto;
aspect-ratio: 9/16;
}
}
/* Parallax-Quote Author (klein unter dem Quote) */
.parallax-quote-author {
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(245, 239, 229, 0.75);
margin: 28px 0 0;
}
.parallax-quote-text q {
/* leicht kleiner, damit lange Sätze gut atmen */
font-size: clamp(26px, 3.8vw, 56px);
}
/* =====================================================
HERO v29 — Full-Bleed-BG mit zentrierter Headline
(gilt für Hochzeit + Event Hero, NICHT Subpage-Hero)
===================================================== */
.hero:not(.hero-subpage) .hero-media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.50) 50%, rgba(0,0,0,0.65) 100%);
z-index: 2;
pointer-events: none;
}
.hero:not(.hero-subpage) .hero-media-fade { display: none; }
.hero:not(.hero-subpage) .hero-grid {
grid-template-columns: 1fr;
text-align: center;
justify-items: center;
align-items: center;
min-height: 84vh;
}
.hero:not(.hero-subpage) .hero-content {
max-width: 820px;
margin: 0 auto;
text-align: center;
padding-right: 0;
position: relative;
z-index: 3;
color: #fff;
}
.hero:not(.hero-subpage) .hero-content .hero-kicker {
color: rgba(255, 255, 255, 0.85);
}
.hero:not(.hero-subpage) .hero-content h1 {
font-size: clamp(38px, 4.6vw, 64px) !important;
color: #ffffff !important;
text-shadow: 0 4px 28px rgba(0,0,0,0.55);
line-height: 1.06;
max-width: 24ch;
margin-left: auto;
margin-right: auto;
}
.hero:not(.hero-subpage) .hero-content h1 br { display: none; }
.hero:not(.hero-subpage) .hero-content .hero-accent {
color: #f5d8a8 !important;
display: inline !important;
margin: 0 !important;
}
/* v133 Ruben: Auf Hochzeit + Destination Akzent in eigene Zeile (der versteckte
klebte sonst "Hochzeit,wo"). Event bleibt bewusst einzeilig ("Sound. Timing. Energy."). */
body.theme-hochzeit .hero:not(.hero-subpage) .hero-content h1 .hero-accent {
display: block !important;
margin-top: 4px !important;
}
.hero:not(.hero-subpage) .hero-content .hero-lead {
color: rgba(255, 255, 255, 0.92) !important;
max-width: 620px;
margin: 0 auto 28px;
text-shadow: 0 2px 14px rgba(0,0,0,0.45);
}
.hero:not(.hero-subpage) .hero-content .hero-lead strong {
color: #ffffff !important;
}
.hero:not(.hero-subpage) .hero-checks {
align-items: center;
max-width: 560px;
margin-left: auto;
margin-right: auto;
}
.hero:not(.hero-subpage) .hero-checks li,
.hero:not(.hero-subpage) .hero-checks li span,
.hero:not(.hero-subpage) .hero-checks li strong {
color: rgba(255, 255, 255, 0.96) !important;
text-shadow: 0 2px 10px rgba(0,0,0,0.4);
justify-content: center;
}
.hero:not(.hero-subpage) .hero-content .btn-primary {
margin: 0 auto;
background: #ffffff;
color: #1a1410;
border-color: #ffffff;
}
.hero:not(.hero-subpage) .hero-content .btn-primary:hover {
background: var(--c-gold-bright, #b2967d);
color: #ffffff;
border-color: var(--c-gold-bright, #b2967d);
}
/* =====================================================
POLISH v29 — Stimmen-Decoration, Eure Party Bild rechts, Hörprobe-Trennung
===================================================== */
/* Eure Party Bild rechts, Text links */
.party-image { order: 2; }
.party-showcase-grid .party-content { order: 1; }
/* Stimmen-Block: dekorativer großer Quote-Mark + Wave + warmer Akzent */
.stimmen-text { position: relative; padding-top: 8px; }
.stimmen-quote-mark {
display: block;
font-family: var(--font-head);
font-size: clamp(80px, 8vw, 140px);
line-height: 0.4;
color: var(--c-gold-bright, #b2967d);
opacity: 0.45;
margin-bottom: 8px;
user-select: none;
}
body.theme-event .stimmen-quote-mark { color: #c4a484; opacity: 0.55; }
.stimmen-wave {
display: block;
width: 240px;
max-width: 100%;
height: 24px;
margin-top: 28px;
color: var(--c-gold-bright, #b2967d);
opacity: 0.55;
}
body.theme-event .stimmen-wave { color: #c4a484; }
/* Hörprobe deutlicher trennen von Eure Party */
body.theme-hochzeit .section-mixe {
background: var(--c-bg-1, #f5f2ec); /* Off-White statt reinweiß → Wechsel sichtbar */
border-top: 1px solid rgba(74, 52, 42, 0.08);
}
body.theme-hochzeit .section-mixe .section-head {
padding-top: clamp(20px, 3vw, 40px);
}
/* Hero auf Subpages — Mobile ist Spalten-Layout (Video oben, Text drunter):
v137 keine feste Grid-Hoehe mehr, sonst zentriert sie den Text und reisst einen
grossen Abstand Video->Text auf (Rubens "zu viel Abstand"). */
@media (max-width: 760px) {
.hero:not(.hero-subpage) .hero-grid { min-height: 0; }
}
/* =====================================================
INSTAGRAM-SEKTION v29
===================================================== */
.section-instagram {
background: var(--c-bg, #fff);
padding: clamp(72px, 8vw, 120px) 0;
border-top: 1px solid rgba(74, 52, 42, 0.06);
}
body.theme-hochzeit .section-instagram {
background: var(--c-bg-1, #f5f2ec);
}
body.theme-event .section-instagram {
background: var(--c-bg);
border-top-color: rgba(196, 164, 132, 0.12);
}
.instagram-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
max-width: 1100px;
margin: clamp(40px, 5vw, 64px) auto;
}
.instagram-tile {
position: relative;
aspect-ratio: 1;
overflow: hidden;
background: #1a1410;
display: block;
text-decoration: none;
}
.instagram-tile img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 700ms var(--ease), filter 500ms var(--ease);
}
.instagram-tile:hover img {
transform: scale(1.06);
filter: brightness(0.7);
}
.instagram-tile-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 400ms;
z-index: 2;
}
.instagram-tile:hover .instagram-tile-overlay { opacity: 1; }
.instagram-icon {
width: 36px;
height: 36px;
color: #ffffff;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
}
.instagram-cta {
text-align: center;
margin-top: clamp(32px, 4vw, 56px);
}
.instagram-hint {
margin: 16px 0 0;
font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
font-size: 11px;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--c-text-3, #8a7f70);
}
body.theme-event .instagram-hint { color: rgba(245, 239, 229, 0.55); }
@media (max-width: 720px) {
.instagram-grid { grid-template-columns: 1fr 1fr; }
}
/* =====================================================
BILD-FARB-HARMONIE v29
Kühle Bilder (kalt-rotes Bühnenlicht, dunkles Setting) bekommen
subtilen Sepia-Tint im Hochzeit-Theme, damit sie sich nicht beißen.
===================================================== */
body.theme-hochzeit .party-image img,
body.theme-hochzeit .parallax-quote-bg {
filter: sepia(0.18) saturate(0.92) brightness(1.02);
}
/* Instagram Embed Grid — echte instgrm-Embeds, 4 Spalten Desktop */
.instagram-embed-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
max-width: 1200px;
margin: clamp(40px, 5vw, 64px) auto;
}
.instagram-embed-grid .instagram-media {
margin: 0 !important;
min-width: 0 !important;
max-width: 100% !important;
width: 100% !important;
}
@media (max-width: 980px) {
.instagram-embed-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
.instagram-embed-grid { grid-template-columns: 1fr; }
}
/* =====================================================
POLISH v31 — Hero-Kicker Strich rechts, Reels-Grid
===================================================== */
/* Hero-Kicker: Linie LINKS vom Text */
.hero:not(.hero-subpage) .hero-kicker {
padding-left: 38px !important;
padding-right: 0 !important;
display: inline-block;
position: relative;
}
.hero:not(.hero-subpage) .hero-kicker::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 28px;
height: 1px;
background: currentColor;
display: block !important;
}
.hero:not(.hero-subpage) .hero-kicker::after { display: none !important; }
/* Hero-CTA kleiner auf Desktop */
.hero:not(.hero-subpage) .hero-content .btn.btn-large {
padding: 14px 28px !important;
font-size: 13px !important;
letter-spacing: 2px;
}
/* Event Instagram-Sektion: tiefes Anthrazit-Schwarz, passend zum Event-Theme */
body.theme-event .section-instagram {
background: var(--c-bg) !important;
border-top-color: rgba(196, 164, 132, 0.12) !important;
}
/* Hochzeit Instagram ↔ Über-mich klare Trennung */
body.theme-hochzeit .section-about {
background: #ffffff;
border-top: 1px solid rgba(74, 52, 42, 0.10);
}
/* Instagram Reels Grid — 5 lokale Videos, kein Branding */
.ig-reels-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 14px;
max-width: 1200px;
margin: clamp(40px, 5vw, 64px) auto;
}
.ig-reel {
position: relative;
width: 100%;
aspect-ratio: 9/16;
background: #000;
display: block;
border: 0;
border-radius: 4px;
overflow: hidden;
cursor: pointer;
box-shadow: 0 12px 32px rgba(0,0,0,0.18);
transition: transform 400ms var(--ease), box-shadow 400ms var(--ease);
text-decoration: none;
}
.ig-reel img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 600ms var(--ease), filter 400ms var(--ease);
}
.ig-reel-play {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
z-index: 2;
}
.ig-reel-play svg {
width: 48px;
height: 48px;
filter: drop-shadow(0 4px 16px rgba(0,0,0,0.45));
opacity: 0.92;
transition: transform 300ms var(--ease), opacity 300ms var(--ease);
}
.ig-reel:hover {
transform: translateY(-3px);
box-shadow: 0 18px 40px rgba(0,0,0,0.28);
}
.ig-reel:hover img { transform: scale(1.04); filter: brightness(1.05); }
.ig-reel:hover .ig-reel-play svg { transform: scale(1.1); opacity: 1; }
@media (max-width: 960px) {
.ig-reels-grid { grid-template-columns: repeat(3, 1fr); }
/* v137 Mobile-Fix: Desktop-Versatz raus, sonst wirken die Reels versetzt/"uebereinander" */
.ig-reels-grid .ig-reel:nth-child(even) { transform: none; }
}
@media (max-width: 600px) {
.ig-reels-grid { grid-template-columns: repeat(2, 1fr); }
/* v139: letztes (5.) Reel allein in der Reihe — voll ueber beide Spalten, mittig,
auf eine Spaltenbreite begrenzt. Vorher span2+60%+auto -> wirkte ueberlappend/versetzt. */
.ig-reel:last-child { grid-column: 1 / -1; max-width: 48%; margin-inline: auto; }
}
/* =====================================================
AUSLANDSHOCHZEIT — Destination-Slider-Grid (4 Länder)
4 Karten 2x2, jede mit Bilder-Slider (Pfeile + Dots)
===================================================== */
.section-destinations {
background: var(--c-bg);
padding: clamp(64px, 8vw, 120px) 0;
position: relative;
}
.dest-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
margin-top: clamp(40px, 5vw, 64px);
}
.dest-card {
position: relative;
min-height: 520px;
overflow: hidden;
isolation: isolate;
border: 1px solid var(--c-line);
background: #0a0a0a;
transition: transform var(--t), box-shadow var(--t);
}
.dest-card:hover {
transform: translateY(-4px);
box-shadow: 0 22px 60px rgba(0,0,0,0.22);
}
/* Slide-Stack */
.dest-slider { position: absolute; inset: 0; z-index: 0; }
.dest-slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 600ms ease;
pointer-events: none;
}
.dest-slide.is-active {
opacity: 1;
pointer-events: auto;
}
.dest-slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Lesbarkeits-Gradient — staerker unten damit Text auf solider Abdeckung sitzt */
.dest-card::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0.15) 35%,
rgba(0,0,0,0.55) 60%,
rgba(0,0,0,0.92) 100%);
z-index: 1;
pointer-events: none;
}
/* Gold-Border on Hover */
.dest-card::after {
content: "";
position: absolute;
inset: 0;
border: 1px solid rgba(196,164,132,0);
transition: border-color var(--t);
z-index: 4;
pointer-events: none;
}
.dest-card:hover::after { border-color: var(--c-gold); }
/* Overlay-Text unten */
.dest-overlay {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: 28px 28px 56px;
z-index: 2;
color: #f5efe5;
pointer-events: none;
}
.dest-name {
display: block;
font-family: var(--font-head);
font-size: clamp(46px, 5.5vw, 84px);
line-height: 0.92;
letter-spacing: 1px;
color: #ffffff;
margin: 0 0 10px;
text-shadow: 0 2px 12px rgba(0,0,0,0.7), 0 4px 24px rgba(0,0,0,0.45);
}
.dest-card .dest-sub,
span.dest-sub {
display: block;
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--c-gold-bright);
margin: 0 0 14px;
text-shadow: 0 2px 8px rgba(0,0,0,0.85), 0 1px 3px rgba(0,0,0,0.7);
}
.dest-card .dest-note,
p.dest-note {
display: block;
font-family: var(--font-body);
font-size: 14.5px;
line-height: 1.55;
color: #ffffff;
margin: 0;
max-width: 38ch;
text-shadow: 0 2px 8px rgba(0,0,0,0.85), 0 1px 3px rgba(0,0,0,0.7);
}
/* Pfeile */
.dest-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 5;
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(10,10,10,0.55);
color: #f5efe5;
border: 1px solid rgba(245,239,229,0.35);
font-size: 22px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
transition: opacity 240ms ease, background 240ms ease, border-color 240ms ease;
font-family: var(--font-body);
-webkit-user-select: none;
user-select: none;
}
.dest-card:hover .dest-arrow,
.dest-card:focus-within .dest-arrow { opacity: 1; }
.dest-arrow:hover {
background: rgba(10,10,10,0.85);
border-color: var(--c-gold-bright);
}
.dest-prev { left: 18px; }
.dest-next { right: 18px; }
/* Dots */
.dest-dots {
position: absolute;
left: 0; right: 0; bottom: 20px;
z-index: 5;
display: flex;
gap: 8px;
justify-content: center;
pointer-events: auto;
}
.dest-dot {
width: 8px;
height: 8px;
border-radius: 50%;
border: 1px solid rgba(245,239,229,0.6);
background: transparent;
padding: 0;
cursor: pointer;
transition: background 200ms ease, transform 200ms ease;
}
.dest-dot.is-active {
background: var(--c-gold-bright);
border-color: var(--c-gold-bright);
transform: scale(1.2);
}
.dest-grid-foot {
margin-top: clamp(32px, 4vw, 48px);
text-align: center;
font-family: var(--font-body);
font-size: 15px;
color: var(--c-text-2);
max-width: 620px;
margin-left: auto;
margin-right: auto;
line-height: 1.6;
}
@media (max-width: 900px) {
.dest-grid { grid-template-columns: 1fr; gap: 14px; }
.dest-card { min-height: 440px; }
.dest-arrow { opacity: 1; width: 42px; height: 42px; font-size: 18px; }
.dest-prev { left: 12px; }
.dest-next { right: 12px; }
.dest-overlay { padding: 22px 22px 50px; }
}
@media (max-width: 600px) {
.dest-card { min-height: 380px; }
}
/* =====================================================
DUO-PORTRAITS — 2 Portrait-Bilder nebeneinander
(Nach Hero, vor Methode; auch mobile nebeneinander)
===================================================== */
.section-duo-portraits {
background: var(--c-bg);
padding: clamp(48px, 6vw, 96px) 0;
}
.duo-portraits-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(10px, 1.2vw, 18px);
max-width: 1200px;
margin: 0 auto;
padding: 0 clamp(16px, 3vw, 48px);
}
.duo-portrait {
aspect-ratio: 2/3;
overflow: hidden;
position: relative;
background: #0a0a0a;
}
.duo-portrait img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 1200ms var(--ease);
}
.duo-portrait:hover img { transform: scale(1.03); }
body.theme-event .section-duo-portraits { background: #0e0e0c; }
@media (max-width: 600px) {
.duo-portraits-grid { gap: 6px; padding: 0 8px; }
.section-duo-portraits { padding: 28px 0; }
}
/* =====================================================
ABOUT — Variante A: Editorial 1-spaltig zentriert
===================================================== */
.section-about-editorial {
background: var(--c-bg-1);
padding: clamp(80px, 10vw, 140px) 0;
text-align: center;
}
.container-narrow {
max-width: 760px;
margin: 0 auto;
padding: 0 24px;
}
.about-portrait-circle {
width: clamp(160px, 22vw, 240px);
aspect-ratio: 1;
margin: 0 auto 32px;
overflow: hidden;
border-radius: 50%;
border: 4px solid var(--c-bg);
box-shadow: 0 20px 60px rgba(0,0,0,0.18);
}
.about-portrait-circle img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 30%;
display: block;
}
.section-about-editorial .kicker { display: inline-block; margin-bottom: 12px; }
.section-about-editorial h2 {
font-size: clamp(32px, 4vw, 56px);
line-height: 1.1;
margin: 0 0 20px;
}
.section-about-editorial .lead {
font-size: clamp(18px, 1.5vw, 22px);
line-height: 1.5;
color: var(--c-text);
margin: 0 auto 32px;
max-width: 580px;
}
.about-editorial-body {
text-align: left;
max-width: 620px;
margin: 0 auto;
}
.about-editorial-body p {
font-size: 16px;
line-height: 1.75;
color: var(--c-text-2);
margin: 0 0 20px;
}
.about-editorial-body p:last-child { margin-bottom: 0; }
.about-quote-large {
margin: 48px auto 0;
max-width: 620px;
font-family: var(--font-display, var(--font-heading));
font-size: clamp(22px, 2.2vw, 30px);
line-height: 1.35;
color: var(--c-text);
position: relative;
padding: 24px 0 24px 36px;
border-left: 3px solid var(--c-gold);
text-align: left;
font-style: italic;
}
.about-quote-large span {
position: absolute;
left: -10px;
top: -8px;
font-size: 56px;
line-height: 1;
color: var(--c-gold);
font-style: normal;
}
/* =====================================================
ABOUT — Variante B: Portrait gross rechts, Text links
===================================================== */
.section-about-magazine {
background: var(--c-bg);
padding: clamp(80px, 10vw, 140px) 0;
border-top: 1px solid var(--c-line);
}
.about-magazine-grid {
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: clamp(40px, 5vw, 80px);
align-items: start;
}
.about-magazine-grid .about-text { max-width: 100%; }
.about-magazine-grid h2 {
font-size: clamp(30px, 3.6vw, 50px);
line-height: 1.1;
margin: 6px 0 16px;
}
.about-magazine-grid .lead {
font-size: clamp(15.5px, 1.05vw, 17px);
line-height: 1.65;
color: var(--c-text-soft);
margin: 0 0 22px;
font-weight: 400;
}
.about-body-single {
max-width: 580px;
}
.about-body-single p {
font-size: 15.5px;
line-height: 1.7;
color: var(--c-text-2);
margin: 0 0 18px;
}
.about-portrait-large {
position: sticky;
top: 120px;
aspect-ratio: 4/5;
overflow: hidden;
}
.about-portrait-large img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 30%;
display: block;
}
@media (max-width: 900px) {
.about-magazine-grid { grid-template-columns: 1fr; gap: 32px; }
/* v139: Hochformat (4/5) statt 4/3 behalten + Fokus hoeher, sonst wurde der Kopf abgeschnitten */
.about-portrait-large { position: static; aspect-ratio: 4/5; max-width: 360px; margin: 0 auto; }
.about-portrait-large img { object-position: 50% 20%; }
}
/* Hochzeit: Sticky-Scroll-Effekt am Über-mich-Portrait raus (Ruben: zu nervig) */
body.theme-hochzeit .about-portrait-large { position: static; top: auto; }
/* v139 Mobile: Sektions-Abstaende vereinheitlichen. Diese Sektionen haben eigene,
groessere clamp-Paddings (min 72-96px) bzw. *1.2 — auf dem Handy zu viel/ungleich.
Einheitlich auf --section-y, damit oben/unten ueberall gleich ist. */
@media (max-width: 640px) {
.section-stimmen,
.section-mixe,
.section-about-magazine,
.section-leistungen,
.section-instagram,
.section-warum,
.section-party-showcase {
padding-top: var(--section-y);
padding-bottom: var(--section-y);
}
/* v139: Sektionswechsel auf hellem Theme sichtbar machen (sonst "weiss auf weiss weiter").
Dezente Hairline oben an Inhalts-Sektionen (Hero + Foto-BG-Sektionen ausgenommen). */
body.theme-hochzeit main > section:not(.hero):not(.has-photo-bg) {
border-top: 1px solid rgba(74, 52, 42, 0.08);
}
}
/* =====================================================
MID-PAGE CTA — schmaler Banner, eingestreut zwischen Sections
===================================================== */
.cta-mid {
background: var(--c-bg-2);
padding: clamp(48px, 6vw, 80px) 0;
border-top: 1px solid var(--c-line);
border-bottom: 1px solid var(--c-line);
}
.cta-mid-inner {
display: grid;
grid-template-columns: 1fr auto;
gap: clamp(24px, 4vw, 56px);
align-items: center;
}
.cta-mid-text .kicker { display: block; margin-bottom: 8px; }
.cta-mid-text h2 {
font-size: clamp(24px, 2.4vw, 34px);
line-height: 1.15;
margin: 0 0 8px;
}
.cta-mid-text p {
font-size: clamp(14px, 1.1vw, 16px);
color: var(--c-text-2);
margin: 0;
}
@media (max-width: 720px) {
.cta-mid-inner { grid-template-columns: 1fr; text-align: left; }
.cta-mid-inner .btn { justify-self: start; }
}
/* Event/Destination Theme-Anpassung */
body.theme-event .cta-mid { background: #0e0e0c; border-color: rgba(255,255,255,0.08); }
body.subpage-auslandshochzeit .cta-mid { background: var(--c-bg-1); }
/* Simpler zentrierter CTA am Ende der Ablauf-Section */
.ablauf-cta {
display: flex;
justify-content: center;
margin-top: clamp(40px, 5vw, 64px);
}
/* =====================================================
EVENT — LEISTUNGEN (Editorial Big-Type-Liste)
Split-Layout: Header links sticky, Liste rechts
===================================================== */
.section-leistungen {
background: var(--c-bg-3);
color: var(--c-text);
padding: clamp(96px, 11vw, 160px) 0;
position: relative;
overflow: hidden;
border-top: 1px solid rgba(221, 178, 135, 0.18);
border-bottom: 1px solid rgba(221, 178, 135, 0.18);
}
.section-leistungen::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(221, 178, 135, 0.65) 50%, transparent 100%);
pointer-events: none;
z-index: 3;
}
.section-leistungen::after {
content: "";
position: absolute;
bottom: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(221, 178, 135, 0.65) 50%, transparent 100%);
pointer-events: none;
z-index: 3;
}
.leistungen-silhouette {
position: absolute;
inset: 0;
background-image: url('https://risesezter98.github.io/alex-maus-assets/images/crowd-brick-bogen-sw.webp');
background-size: cover;
background-position: center;
opacity: 0.06;
mix-blend-mode: luminosity;
filter: blur(3px);
pointer-events: none;
z-index: 0;
}
.section-leistungen .container {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: clamp(40px, 6vw, 96px);
align-items: start;
position: relative;
z-index: 2;
}
.leistungen-head {
position: sticky;
top: 120px;
}
.leistungen-head .kicker {
color: var(--c-gold-bright);
margin-bottom: 18px;
display: inline-block;
}
.leistungen-head h2 {
color: #f5efe5;
margin: 0 0 24px;
font-size: clamp(38px, 4.6vw, 64px);
line-height: 1;
letter-spacing: -0.01em;
}
.leistungen-lead {
color: rgba(245,239,229,0.7);
font-family: var(--font-body);
font-size: 17px;
line-height: 1.55;
max-width: 36ch;
margin: 0;
}
.leistungen-list {
list-style: none;
padding: 0;
margin: 0;
border-top: 1px solid rgba(245,239,229,0.18);
}
.leistungen-list li {
display: flex;
align-items: baseline;
gap: clamp(20px, 3vw, 40px);
padding: clamp(18px, 2.4vw, 28px) 0;
border-bottom: 1px solid rgba(245,239,229,0.18);
position: relative;
transition: padding-left 320ms cubic-bezier(0.2, 0.7, 0.2, 1), color 240ms ease;
}
.leistungen-list li::before {
content: "";
position: absolute;
left: 0;
bottom: -1px;
height: 1px;
width: 0;
background: var(--c-gold-bright);
transition: width 360ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.leistungen-list li:hover { padding-left: 18px; }
.leistungen-list li:hover::before { width: 100%; }
.leistungen-num {
flex-shrink: 0;
font-family: var(--font-body);
font-size: 13px;
letter-spacing: 2px;
color: var(--c-gold-bright);
width: 36px;
font-feature-settings: "tnum";
}
.leistungen-name {
font-family: var(--font-display);
font-size: clamp(32px, 4.2vw, 60px);
line-height: 1;
letter-spacing: 0.01em;
text-transform: uppercase;
color: #f5efe5;
font-weight: 400;
}
.leistungen-list li:nth-child(even) .leistungen-name {
color: transparent;
-webkit-text-stroke: 1.2px #f5efe5;
}
.leistungen-list li:hover .leistungen-name {
color: var(--c-gold-bright);
-webkit-text-stroke: 0;
}
@media (max-width: 900px) {
.section-leistungen .container {
grid-template-columns: 1fr;
gap: 48px;
}
.leistungen-head { position: static; }
}
@media (max-width: 520px) {
.leistungen-list li { gap: 16px; }
.leistungen-num { width: 28px; font-size: 12px; }
}
/* =====================================================
EVENT — VERTRAUT VON (Referenz-Logos, monochrom dezent)
===================================================== */
.section-trustlogos {
background: var(--c-bg);
/* dicht unter die About-Section gezogen (vorher riesiger Abstand durch beider Paddings) */
margin-top: clamp(-100px, -8vw, -56px);
/* v136 Ruben: Unten-Abstand = Standard-Sektions-Padding, damit der Abstand zur naechsten
Sektion gleichmaessig zu den uebrigen ist (vorher zu klein). */
padding: 0 0 var(--section-y);
text-align: center;
}
.trustlogos-kicker {
font-family: var(--font-head);
font-size: 12px;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--c-text-3);
margin-bottom: clamp(28px, 3.5vw, 44px);
}
.trustlogos-row {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: clamp(28px, 5vw, 64px);
}
.trustlogo {
height: clamp(26px, 3vw, 34px);
width: auto;
/* v152: komplett WEISS (Ruben) — brightness(0) macht jede Quellfarbe schwarz, invert(1) -> weiss */
filter: brightness(0) invert(1);
transition: filter var(--t);
}
.trustlogo--ferrero { height: clamp(16px, 1.9vw, 20px); }
/* v149: neue Logos visuell auf Mercedes/Ferrero-Gewicht angeglichen */
.trustlogo--wella { height: clamp(20px, 2.3vw, 26px); }
.trustlogo--vilavita { height: clamp(34px, 3.8vw, 46px); } /* gestapelt (Krone + 2 Worte) -> mehr Hoehe */
.trustlogo--ffh { height: clamp(30px, 3.2vw, 38px); } /* gestapelt (Hit Radio / FFH) */
.trustlogo--planetradio { height: clamp(34px, 3.8vw, 46px); } /* Planet + Schriftzug, fast quadratisch */
.trustlogo--dvag { height: clamp(20px, 2.2vw, 26px); } /* Emblem + breite Wortmarke */
.trustlogo--sparkasse { height: clamp(22px, 2.4vw, 30px); } /* S-Symbol + Wortmarke */
.trustlogo:hover { filter: brightness(0) invert(1); }
.trustlogo--text {
font-family: var(--font-head);
font-weight: 600;
font-size: clamp(18px, 2vw, 24px);
letter-spacing: 0.5px;
text-transform: uppercase;
color: #ffffff; /* v152: weiss wie die Logos */
line-height: 1;
white-space: nowrap;
transition: color var(--t);
}
.trustlogo--text:hover { color: #ffffff; }
.trustlogo-sep {
width: 1px;
height: 28px;
background: var(--c-line-soft);
}
@media (max-width: 640px) {
.trustlogos-row { gap: 26px 36px; }
}
/* ===== Logo-Marquee (v152) — langsamer Endlos-Lauf ===== */
.trustlogos-marquee {
overflow: hidden;
/* weiche Rand-Fades links/rechts, damit Logos nicht hart abgeschnitten erscheinen */
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.trustlogos-track {
display: flex;
align-items: center;
width: max-content;
gap: clamp(34px, 5vw, 64px);
/* von links nach rechts: Start -50% (zweites Set links), Ende 0 -> Bewegung nach rechts */
animation: trust-marquee 55s linear infinite;
will-change: transform;
}
.trustlogos-track:hover { animation-play-state: paused; }
@keyframes trust-marquee {
from { transform: translateX(-50%); }
to { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
/* kein Lauf -> statisch umbrechen wie zuvor */
.trustlogos-track {
animation: none;
width: auto;
flex-wrap: wrap;
justify-content: center;
gap: clamp(28px, 5vw, 64px);
}
}
/* =====================================================
EVENT — WARUM (Cards mit Drop-Shadow + Silhouette-BG)
===================================================== */
.section-warum {
background: var(--c-bg-3);
padding: clamp(96px, 11vw, 160px) 0;
position: relative;
overflow: hidden;
border-top: 1px solid rgba(221, 178, 135, 0.18);
border-bottom: 1px solid rgba(221, 178, 135, 0.18);
}
.section-warum::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(221, 178, 135, 0.65) 50%, transparent 100%);
pointer-events: none;
z-index: 3;
}
/* Silhouette-Background: dezentes Crowd-Bild als atmosphaerischer Layer */
.warum-silhouette {
position: absolute;
inset: 0;
background-image: url('https://risesezter98.github.io/alex-maus-assets/images/crowd-brick-bogen-sw.webp');
background-size: cover;
background-position: center;
opacity: 0.08;
mix-blend-mode: luminosity;
pointer-events: none;
filter: blur(2px);
z-index: 1;
}
.section-warum::after {
content: "";
position: absolute;
bottom: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(221, 178, 135, 0.65) 50%, transparent 100%);
pointer-events: none;
z-index: 3;
}
.section-warum .container {
max-width: 1100px;
position: relative;
z-index: 2;
}
.warum-head {
text-align: center;
margin: 0 auto clamp(48px, 6vw, 80px);
max-width: 640px;
}
.warum-head .kicker {
color: var(--c-gold-bright);
margin-bottom: 18px;
display: inline-block;
}
.warum-head h2 {
color: var(--c-text);
margin: 0 0 20px;
font-size: clamp(38px, 4.6vw, 60px);
line-height: 1;
letter-spacing: -0.01em;
}
.warum-lead {
color: var(--c-text-soft);
font-family: var(--font-body);
font-size: 16.5px;
line-height: 1.6;
margin: 0;
}
.warum-grid-v2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(40px, 5vw, 72px) clamp(48px, 5.5vw, 88px);
}
.warum-item {
padding: clamp(18px, 2vw, 24px) 0 0;
border-top: 1px solid rgba(245,239,229,0.18);
}
.warum-num {
display: block;
font-family: var(--font-head);
font-size: clamp(40px, 4.6vw, 58px);
line-height: 0.9;
letter-spacing: 0.02em;
color: var(--c-gold-bright);
opacity: 0.75;
font-feature-settings: "tnum";
font-weight: 400;
margin-bottom: 14px;
}
.warum-rule {
display: block;
width: 32px;
height: 1px;
background: var(--c-gold-bright);
opacity: 0.55;
margin-bottom: 18px;
}
.warum-title {
font-family: var(--font-head);
font-size: clamp(22px, 2.2vw, 26px);
line-height: 1.2;
letter-spacing: -0.005em;
color: var(--c-text);
margin: 0 0 12px;
font-weight: 500;
}
.warum-desc {
font-family: var(--font-body);
font-size: 15.5px;
line-height: 1.65;
color: var(--c-text-soft);
margin: 0;
max-width: 42ch;
}
@media (max-width: 720px) {
.warum-grid-v2 {
grid-template-columns: 1fr;
gap: 36px;
}
}
/* =====================================================
EVENT — KONZEPT (Bento 3+2, 5 Cards SOUND/LIVE/...)
3 Typo-Statement-Cards + 2 Photo-Cards
===================================================== */
.section-konzept {
background: var(--c-bg);
padding: clamp(72px, 9vw, 120px) 0;
position: relative;
}
.konzept-grid {
margin: clamp(48px, 6vw, 80px) 0 0;
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 14px;
}
/* Row 1: 3 Cards à 2 Spalten */
.konzept-card:nth-child(1) { grid-column: span 2; }
.konzept-card:nth-child(2) { grid-column: span 2; }
.konzept-card:nth-child(3) { grid-column: span 2; }
/* Row 2: 2 Cards à 3 Spalten */
.konzept-card:nth-child(4) { grid-column: span 3; }
.konzept-card:nth-child(5) { grid-column: span 3; }
.konzept-card {
position: relative;
min-height: 400px;
padding: clamp(28px, 3vw, 40px);
display: flex;
flex-direction: column;
justify-content: flex-end;
overflow: hidden;
isolation: isolate;
border: none;
background: var(--c-bg-2);
box-shadow:
0 14px 36px rgba(0,0,0,0.28),
0 2px 6px rgba(0,0,0,0.14),
inset 0 1px 0 rgba(255,255,255,0.04);
transition: transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 320ms ease;
}
.konzept-card:hover {
transform: translateY(-4px);
box-shadow:
0 22px 60px rgba(0,0,0,0.40),
0 4px 12px rgba(0,0,0,0.18),
inset 0 1px 0 rgba(255,255,255,0.06);
}
/* v109 Cleanup: .konzept-card-typo + -accent entfernt (alle Cards sind jetzt -photo). */
/* Variante 3: Photo-BG */
.konzept-card-photo {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: var(--c-text);
}
.konzept-card-photo::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(20,20,20,0.22) 0%, rgba(20,20,20,0.58) 55%, rgba(20,20,20,0.93) 100%);
z-index: 1;
}
.konzept-card-photo > * { position: relative; z-index: 2; }
.konzept-card-photo .konzept-headline { text-shadow: 0 4px 24px rgba(0,0,0,0.4); }
.konzept-card-photo .konzept-headline-em { color: var(--c-gold-bright); }
/* Foto-Karten haben dunklen Overlay → Text IMMER hell, egal ob helles oder dunkles Seiten-Theme */
.konzept-card-photo .konzept-headline { color: #fff; }
.konzept-card-photo .konzept-body { color: rgba(255,255,255,0.90); text-shadow: 0 1px 12px rgba(0,0,0,0.55); }
/* Inhalt */
.konzept-num {
font-family: var(--font-body);
font-size: 12px;
letter-spacing: 3px;
color: var(--c-gold-bright);
font-feature-settings: "tnum";
margin-bottom: 14px;
position: relative;
z-index: 2;
opacity: 0.7;
}
.konzept-label {
font-family: var(--font-body);
font-size: 15px;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--c-gold-bright);
margin-bottom: 20px;
position: relative;
z-index: 2;
display: block;
}
.konzept-headline {
font-family: var(--font-head);
font-size: clamp(28px, 3.1vw, 42px);
line-height: 1.05;
letter-spacing: -0.01em;
margin: 0 0 18px;
font-weight: 500;
position: relative;
z-index: 2;
}
.konzept-headline-em {
display: inline;
font-style: normal; /* v108: Kursiv raus — wirkte schwach/zierlich */
font-weight: 500;
color: var(--c-gold-bright);
}
.konzept-body {
font-family: var(--font-body);
font-size: 15px;
line-height: 1.6;
color: var(--c-text-2);
margin: 0;
max-width: 36ch;
position: relative;
z-index: 2;
}
/* Tablet: 2-Spalten-Grid */
@media (max-width: 960px) {
.konzept-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
.konzept-card:nth-child(1),
.konzept-card:nth-child(2),
.konzept-card:nth-child(3),
.konzept-card:nth-child(4),
.konzept-card:nth-child(5) { grid-column: span 1; }
.konzept-card:nth-child(5) { grid-column: span 2; }
}
/* Mobile: 1 Spalte */
@media (max-width: 600px) {
.konzept-grid { grid-template-columns: 1fr; }
.konzept-card:nth-child(5) { grid-column: span 1; }
.konzept-card { min-height: 320px; }
}
/* =====================================================
GLOBALE UTILITY-KLASSEN — Visual-Grammatik v88
Gradient-Fades, Hairlines, Scroll-Reveal
===================================================== */
/* --- Scroll-Reveal --- */
.reveal {
opacity: 0;
transform: translateY(24px);
transition:
opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
will-change: opacity, transform;
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
.reveal-stagger > * {
opacity: 0;
transform: translateY(20px);
transition:
opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.reveal-stagger.is-visible > * {
opacity: 1;
transform: translateY(0);
}
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 100ms; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 200ms; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 300ms; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 400ms; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 500ms; }
/* v139: Anlaesse-Liste hat 8 Items — Delays bis 10, sonst erscheinen 7+8 ohne Delay gleichzeitig ("backen rein") */
.reveal-stagger.is-visible > *:nth-child(7) { transition-delay: 600ms; }
.reveal-stagger.is-visible > *:nth-child(8) { transition-delay: 700ms; }
.reveal-stagger.is-visible > *:nth-child(9) { transition-delay: 800ms; }
.reveal-stagger.is-visible > *:nth-child(10) { transition-delay: 900ms; }
@media (prefers-reduced-motion: reduce) {
.reveal, .reveal-stagger > * {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* =====================================================
EVENT — FEATURED Pull-Statement (ersetzt Stimmen)
===================================================== */
/* v109 Cleanup: komplette .section-featured / .featured-* Sektion entfernt
(Featured Pull-Quote war verworfen, nirgends mehr im HTML). */
/* =====================================================
EVENT — KONZEPT Card-Akzente (entfernt v94)
Cards bleiben pur — Premium durch Typo + Spacing, nicht durch Effects.
Card 02 LIVE behaelt ihren Gold-Top-Border-Strich (.konzept-card-accent::before).
===================================================== */
/* =====================================================
v98 POLISH — Bullet-Alignment Fix, About-Quote Redesign,
Hochzeit-Lead-Kontrast, Konzept-Bento Editorial-Refresh
===================================================== */
/* --- Sub-Page-Heros (Hochzeit/Event/Auslandshochzeit) nutzen den ZENTRIERTEN
Full-Bleed-Hero (.hero:not(.hero-subpage), siehe Block ~Z4121: "gilt für
Hochzeit + Event Hero"). Headline/Lead/Button sind mittig — die Bullets
sollen als zentrierter BLOCK sitzen: alle Haken auf EINER senkrechten Linie,
Text linksbuendig, der Block mittig unter der Headline.
Trick: ul auf width:fit-content + margin auto -> schrumpft auf den breitesten
Bullet und zentriert sich. li linksbuendig -> alle Haken gleich weit links.
KEIN Stair-Step, KEIN per-Bullet-Padding (sah auf zentriertem Layout zackig aus). */
.hero[data-page="sub"] .hero-checks {
width: fit-content;
max-width: 100%;
margin-left: auto;
margin-right: auto;
align-items: flex-start;
text-align: left;
}
.hero[data-page="sub"] .hero-checks li {
justify-content: flex-start;
text-align: left;
}
/* .check ist selbst ein mit inline-flex (Gold-Kreis). Der li-Override darf
das innere SVG NICHT nach links ziehen -> Haken explizit mittig im Kreis halten. */
.hero[data-page="sub"] .hero-checks .check {
justify-content: center;
text-align: center;
margin-top: 0;
}
/* --- About-Quote: weg von grauer Box mit Strich, hin zu Editorial-Signature --- */
.about-quote {
margin-top: 36px;
padding: 28px 0 0;
background: none;
border: none;
position: relative;
font-family: var(--font-head);
font-size: clamp(20px, 1.8vw, 28px);
line-height: 1.35;
letter-spacing: 0.005em;
color: var(--c-text);
}
.about-quote::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 56px;
height: 1px;
background: var(--c-gold);
}
.about-quote strong {
color: var(--c-gold-bright);
font-weight: 700;
}
/* --- Hochzeit-Lead-Kontrast (helles Theme): Lead wird kraeftiger ---
Auf dunklem Event-Theme bleibt es soft (dort funktioniert die Daempfung). */
body.theme-hochzeit .about-magazine-grid .lead {
color: var(--c-text);
font-weight: 500;
font-size: clamp(17px, 1.15vw, 19px);
}
/* --- Konzept-Bento Editorial-Refresh: 3 obere Cards mit grossem Gold-Counter,
Hairline, Border-System, Card-Shadow weg --- */
/* Box-Shadow weg (Memory: Drop-Shadow wirkt billig auf Premium-Cards).
v109: Border ENTFERNT — bei Foto-Cards verursachte der 1px-Border einen
hellen Streifen (Overlay::after inset:0 deckt nur padding-box, Bild lief bis
border-box). Ohne Border deckt das Overlay die ganze Card sauber. */
.konzept-card {
box-shadow: none;
border: none;
}
.konzept-card:hover {
box-shadow: none;
}
/* v108: Alle 5 Konzept-Cards = Foto-BG, einheitlich. Counter gross & Editorial
mit Gold-Hairline drunter — gilt jetzt fuer ALLE Cards (alle sind photo). */
.konzept-card .konzept-num {
font-family: var(--font-head);
font-size: clamp(48px, 5vw, 72px);
letter-spacing: 0;
color: var(--c-gold-bright);
opacity: 1;
margin-bottom: 0;
line-height: 1;
display: block;
position: relative;
padding-bottom: 18px;
text-shadow: 0 2px 16px rgba(0,0,0,0.5);
}
.konzept-card .konzept-num::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 48px;
height: 1px;
background: var(--c-gold);
opacity: 0.7;
}
.konzept-card .konzept-label {
margin-top: 18px;
margin-bottom: 16px;
font-size: 13px;
letter-spacing: 0.25em;
color: var(--c-gold-bright);
font-weight: 600;
text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
/* =====================================================
v98 Polish Round 2 — Auslandshochzeit FAQ + CTA dezenter
===================================================== */
/* FAQ-Section auf Auslandshochzeit: weg vom starken Cream (`--c-bg-2`)
hin zu Off-White (`--c-bg-1`) — Beige-Ton zurueckgeschraubt. */
body.subpage-auslandshochzeit .section-faq-subpage {
background: var(--c-bg-1);
}
/* v133 Ruben: einheitliches Foto-System — FOTO sitzt in der FAQ, CTA bleibt schlicht.
CTA-Final auf Auslandshochzeit ohne Foto (wie Hochzeit/Event), nur Gold-Hairlines + Display-Headline. */
body.subpage-auslandshochzeit .cta-final {
background: var(--c-bg-1);
position: relative;
}
/* Destination-FAQ bekommt das Pool-Foto (verschoben aus dem CTA), gleicher dezenter
Atmosphaere-Look wie die Konfetti-FAQ auf Hochzeit (opacity 0.30 via theme-hochzeit-Regel). */
body.subpage-auslandshochzeit .section-faq.section-faq-subpage.has-photo-bg {
--photo-bg: url('https://risesezter98.github.io/alex-maus-assets/images/destination-pool-mediterranean-opt.webp');
--photo-pos: center 45%;
}
body.subpage-auslandshochzeit .cta-final::before {
background: linear-gradient(to right, transparent, var(--c-gold-bright), transparent);
opacity: 0.7;
}
body.subpage-auslandshochzeit .cta-final::after {
content: "";
position: absolute;
bottom: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(to right, transparent, var(--c-gold-bright), transparent);
opacity: 0.7;
}
body.subpage-auslandshochzeit .cta-final-inner {
max-width: 720px;
}
body.subpage-auslandshochzeit .cta-final .kicker {
letter-spacing: 0.28em;
font-size: 12px;
color: var(--c-gold);
}
body.subpage-auslandshochzeit .cta-final h2 {
font-family: var(--font-head);
font-size: clamp(34px, 4vw, 60px);
line-height: 1.02;
letter-spacing: -0.01em;
margin-bottom: 24px;
}
body.subpage-auslandshochzeit .cta-final p {
font-size: clamp(15.5px, 1.2vw, 17.5px);
line-height: 1.6;
max-width: 520px;
margin-left: auto;
margin-right: auto;
margin-bottom: 36px;
}
/* --- Hochzeit-Theme: FAQ + Methode Photo-BG auf helle Hochzeitsmotive ---
Vorher: alex-002 (Discokugel-Vibe, dunkel) auf FAQ + alex-013 auf Methode.
Beides passte nicht zur hellen Hochzeit-Stimmung. Neu: helle Brautpaar/
Tanzflaechen-Motive, die zum warmen Off-White-BG harmonieren. */
body.theme-hochzeit .section-methode.has-photo-bg {
--photo-bg: url('https://risesezter98.github.io/alex-maus-assets/images/hero-008-funken.webp');
--photo-pos: center 40%;
}
body.theme-hochzeit .section-faq.has-photo-bg {
--photo-bg: url('https://risesezter98.github.io/alex-maus-assets/images/hero-konfetti-dip.webp');
--photo-pos: center 35%;
}
/* Filter weicher auf Hochzeit-Theme: keine starke Graustufen-Reduktion,
stattdessen leichte Sepia/Warm-Tonung damit Bilder zur Cream-Palette passen. */
body.theme-hochzeit .section.has-photo-bg::before {
opacity: 0.14;
filter: grayscale(40%) brightness(1.05) contrast(0.95) sepia(15%);
}
/* v131 Alex: FAQ-Konfetti-Foto deutlicher sichtbar (war kaum erkennbar bei 0.14) */
body.theme-hochzeit .section-faq.has-photo-bg::before {
opacity: 0.30;
}
/* --- Hero-Check: SVG-Haken garantiert mittig im Gold-Kreis ---
Vorher: Text-✓ Glyph hatte font-metric-Offset → sass links / oben. */
.hero-checks .check svg {
display: block;
width: 12px;
height: 12px;
stroke: var(--c-bg);
fill: none;
}
/* --- Event-Hero: Bullets in 2-Spalten-Grid statt monoton untereinander ---
Wirkt lebendiger und bekommt mehr Inhalt sauber auf die Flaeche unter. */
.hero-checks.hero-checks-grid {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 28px;
row-gap: 10px;
max-width: 680px;
}
.hero-checks.hero-checks-grid li {
margin: 0;
}
@media (max-width: 720px) {
.hero-checks.hero-checks-grid {
grid-template-columns: 1fr;
row-gap: 8px;
}
}
/* ===== v118: Vertrauen Video-BG + Glas-Kacheln · Anlaesse ohne Zahlen · versetzte Reels ===== */
.section-warum { position: relative; overflow: hidden; background: var(--c-bg); }
.warum-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; opacity: 0.8; }
.warum-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(rgba(10,9,8,0.66), rgba(10,9,8,0.84)); }
.section-warum .warum-silhouette { display: none; }
.section-warum .container { position: relative; z-index: 2; }
.section-warum .warum-grid-v2 { grid-template-columns: repeat(3, 1fr); gap: 14px; }
.section-warum .warum-item { background: rgba(13,12,10,0.62); border: 1px solid rgba(212,165,116,0.22); border-radius: 6px; padding: clamp(22px,2.2vw,32px); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: none; }
.section-warum .warum-num { font-style: italic; font-size: clamp(28px,2.6vw,42px); color: var(--c-gold); }
.section-warum .warum-rule { display: none; }
.section-warum .warum-title { font-size: clamp(19px,1.8vw,24px); margin: 8px 0; }
.section-warum .warum-desc { font-size: 14.5px; }
@media (max-width: 760px) { .section-warum .warum-grid-v2 { grid-template-columns: 1fr; } }
/* Anlaesse: Nummern raus */
.leistungen-num { display: none; }
.leistungen-list li { gap: 0; }
/* Instagram: versetzte Reels */
.ig-reels-grid .ig-reel:nth-child(even) { transform: translateY(34px); }
.ig-reel { transition: transform 0.4s var(--ease, ease); }
.ig-reel:hover { transform: scale(1.04); }
.ig-reels-grid .ig-reel:nth-child(even):hover { transform: translateY(34px) scale(1.04); }
/* =====================================================
ABLAUF — Collage (diagonale Offset-Stapelung + Slide-in)
"So läuft's ab" auf Event + Hochzeit. Klasse: .ablauf-collage (v122)
===================================================== */
#ablauf.ablauf-collage { padding-block: clamp(64px, 9vw, 130px); overflow: clip; }
/* Intro-Block über den Schritten (SEO-Copy Hochzeit) */
.ablauf-collage .ablauf-intro {
max-width: 640px;
margin: clamp(26px, 4vw, 44px) auto 0;
text-align: center;
}
.ablauf-collage .ablauf-intro .lead {
font-family: var(--font-head);
font-size: clamp(21px, 2.5vw, 32px);
line-height: 1.18;
color: var(--c-text);
margin: 0 0 18px;
}
.ablauf-collage .ablauf-intro p {
font-size: clamp(15px, 1.05vw, 17px);
line-height: 1.64;
color: var(--c-text-2);
margin: 0;
}
/* Sub-Zeile unter einer Schritt-Headline */
.ablauf-collage .co-text .co-sub {
font-family: var(--font-head);
font-size: clamp(17px, 1.6vw, 22px);
line-height: 1.2;
color: var(--c-gold);
margin: 0 0 14px;
max-width: 40ch;
}
/* Abschluss-Absatz unter den Schritten (SEO-Copy Hochzeit) */
.ablauf-collage .ablauf-outro {
max-width: 680px;
margin: clamp(40px, 6vw, 72px) auto 0;
text-align: center;
font-size: clamp(15px, 1.05vw, 17px);
line-height: 1.64;
color: var(--c-text-2);
}
.ablauf-collage .collage {
position: relative; display: flex; flex-direction: column;
gap: clamp(48px, 8vw, 110px); margin-top: clamp(40px, 6vw, 80px);
max-width: 1160px; margin-inline: auto;
}
.ablauf-collage .collage::before {
content: ''; position: absolute; left: 50%; top: 7%; bottom: 7%; width: 1px;
background: linear-gradient(transparent, rgba(212,165,116,.28) 18%, rgba(212,165,116,.28) 82%, transparent);
transform: translateX(-50%); z-index: 0;
}
.ablauf-collage .co-row {
position: relative; z-index: 1;
display: grid; grid-template-columns: 1fr 1fr;
gap: clamp(24px, 5vw, 64px); align-items: center;
}
.ablauf-collage .co-row.co-reverse .co-img { order: 2; }
.ablauf-collage .co-row.co-reverse .co-text { order: 1; }
.ablauf-collage .co-img {
margin: 0; border-radius: 3px; overflow: hidden;
border: 1px solid rgba(212,165,116,.12);
box-shadow: 0 26px 70px -42px rgba(0,0,0,.85);
}
.ablauf-collage .co-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Alle Reihen gleiche Bildhoehe (einheitliches Querformat) */
.ablauf-collage .co-img img { aspect-ratio: 4 / 3; }
.ablauf-collage .co-num {
font-family: var(--font-head); font-weight: 400; font-size: clamp(22px, 2.4vw, 30px);
color: var(--c-gold); line-height: 1; display: block; margin-bottom: 12px;
}
.ablauf-collage .co-text h3 {
font-family: var(--font-head); font-weight: 400; text-transform: none;
font-size: clamp(23px, 2.7vw, 31px); line-height: 1.12; margin: 0 0 14px; color: var(--c-text);
}
.ablauf-collage .co-text p {
font-size: clamp(15px, 1.05vw, 17px); line-height: 1.64; color: var(--c-text-2);
max-width: 46ch; margin: 0;
}
/* Text-Block symmetrisch zur Mittellinie: gleicher Gutter-Abstand wie das Bild gegenueber */
.ablauf-collage .co-text { max-width: 50ch; justify-self: start; }
.ablauf-collage .co-row.co-reverse .co-text { justify-self: end; }
.ablauf-collage .ablauf-cta { margin-top: clamp(48px, 7vw, 84px); text-align: center; }
.ablauf-collage .reveal-left { opacity: 0; transition: opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1); transform: translateX(-52px); }
.ablauf-collage .reveal-right { opacity: 0; transition: opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1); transform: translateX(52px); }
.ablauf-collage .is-in { opacity: 1 !important; transform: translateY(0) translateX(0) !important; }
.ablauf-collage .co-row-1 .co-img.is-in { transform: translateY(-18px) !important; }
.ablauf-collage .co-row-2 .co-img.is-in { transform: translateY(26px) !important; }
.ablauf-collage .co-row-3 .co-img.is-in { transform: translateY(-10px) !important; }
@media (max-width: 760px) {
.ablauf-collage .collage::before { display: none; }
.ablauf-collage .co-row { grid-template-columns: 1fr; gap: 18px; }
.ablauf-collage .co-row.co-reverse .co-img { order: 1; }
.ablauf-collage .co-row.co-reverse .co-text { order: 2; }
.ablauf-collage .co-text,
.ablauf-collage .co-row.co-reverse .co-text { justify-self: start; max-width: 100%; }
.ablauf-collage .co-row-1 .co-img, .ablauf-collage .co-row-2 .co-img, .ablauf-collage .co-row-3 .co-img,
.ablauf-collage .co-row-1 .co-img.is-in, .ablauf-collage .co-row-2 .co-img.is-in, .ablauf-collage .co-row-3 .co-img.is-in { transform: none !important; }
.ablauf-collage .reveal-left, .ablauf-collage .reveal-right { transform: translateY(30px); }
}
@media (prefers-reduced-motion: reduce) {
.ablauf-collage .reveal-left, .ablauf-collage .reveal-right { opacity: 1; transform: none; }
}
/* =====================================================
STIMMEN-ZITAT (v154) — benanntes Testimonial, HELLES beiges Band.
Dunkler Serif-Text + Gold auf Beige (fuegt sich ins helle Theme,
kein dunkler Block beim Scrollen). Variante --photo legt ein
DEZENTES S/W-Party-Foto als Textur drunter (nur Hochzeit).
===================================================== */
.section-voices {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: clamp(80px, 11vw, 150px) 24px;
background: var(--c-bg-2, #efe9df); /* helles Beige-Band */
border-top: 1px solid rgba(74, 52, 42, 0.07);
border-bottom: 1px solid rgba(74, 52, 42, 0.07);
isolation: isolate;
}
/* nur --photo: dezentes S/W-Foto + heller Schleier drueber */
.voices-bg {
position: absolute; inset: 0; z-index: -2;
background-size: cover; background-position: center 40%;
filter: grayscale(1);
}
.section-voices--photo::after {
content: ""; position: absolute; inset: 0; z-index: -1;
background: linear-gradient(180deg, rgba(243,237,226,0.80) 0%, rgba(243,237,226,0.86) 100%);
}
.voices-inner { max-width: 900px; width: 100%; }
.voices-mark {
display: block; font-family: var(--font-head);
font-size: clamp(54px, 6vw, 92px); line-height: 0.5; color: var(--c-gold, #c79a5b); margin-bottom: 16px;
}
.voices-q {
font-family: var(--font-head); font-weight: 400;
font-size: clamp(26px, 3.4vw, 44px); line-height: 1.2; letter-spacing: -0.3px;
color: var(--c-text, #241a12);
max-width: 18ch; margin: 0 auto;
}
.voices-by {
margin-top: 24px; font-family: var(--font-body); font-weight: 700;
font-size: 12.5px; letter-spacing: 2px; text-transform: uppercase; color: #a8702c;
}
.voices-by::before { content: ""; display: inline-block; width: 26px; height: 1px; background: var(--c-gold, #c79a5b); vertical-align: middle; margin-right: 12px; transform: translateY(-2px); }
@media (max-width: 600px) { .voices-q { font-size: clamp(23px, 6vw, 29px); max-width: none; } }
/* Destination (ohne Foto): v155 — weicher Übergang + Leben statt hartem Beige-Block.
Gradient läuft oben in Weiß (Destinations) und unten ins Off-White (FAQ) aus,
helleres Beige, dazu dezente Crowd-Silhouette + warmer Gold-Schimmer. */
.section-voices:not(.section-voices--photo) {
background: linear-gradient(180deg, #ffffff 0%, #f4efe6 26%, #f4efe6 74%, #faf9f6 100%);
border-top: 0;
border-bottom: 0;
}
.section-voices:not(.section-voices--photo)::after {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: radial-gradient(ellipse 62% 72% at 50% 44%, rgba(199,154,91,0.13), transparent 72%);
}
.voices-silhouette {
position: absolute; inset: 0; z-index: -2; pointer-events: none;
background: url('https://risesezter98.github.io/alex-maus-assets/images/crowd-brick-bogen-sw.webp') center/cover;
opacity: 0.06; mix-blend-mode: multiply; filter: blur(1px);
}
/* Visuell ausgeblendet, aber fuer Screenreader + SEO lesbar (z.B. H1 auf Splash) */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* === Trust-Leiste: Erfahrungs-Zahlen (statisch, direkt unter Hero) === */
/* Variante A (12.06. v2): Reihe nebeneinander, eng gruppiert (schmaler Container),
groessere Zahlen, Zahl+Label dicht beieinander (KEIN doppelter Abstand), Label einzeilig. */
.trust-stats {
background: var(--c-bg);
padding: clamp(18px, 2.3vw, 30px) 0; /* kompakter — war zu hoch/luftig */
border-top: 1px solid var(--c-line); /* Linie ueber den Werten — auf dunklem Event sichtbar
(Hochzeit hat den Hell/Dunkel-Uebergang stattdessen) */
border-bottom: 1px solid var(--c-line-soft);
}
.trust-stats-inner {
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
text-align: center;
max-width: 1080px; /* breiter -> Werte verteilen sich, Platz liegt ZWISCHEN ihnen statt aussen */
}
.trust-stat {
position: relative;
display: flex;
flex-direction: column;
gap: 3px; /* Zahl + Label dicht als eine Einheit */
padding: 4px clamp(8px, 2vw, 20px);
}
/* kurzer, vertikal zentrierter Gold-Hairline zwischen den Werten */
.trust-stat + .trust-stat::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
height: 44px;
width: 1px;
background: rgba(184, 142, 88, 0.32);
}
/* .trust-stats-Prefix: schlaegt die alte generische Regel `.trust-stat span {font-size:11px}`
(Z.2176) — sonst werden Zahl UND Label auf 11px festgenagelt. */
.trust-stats .trust-stat-num {
font-family: var(--font-body);
font-weight: 700;
font-size: clamp(42px, 6.4vw, 66px);
line-height: 1;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums lining-nums;
color: var(--c-gold);
}
.trust-stats .trust-stat-label {
font-family: var(--font-body);
font-weight: 600;
font-size: clamp(10px, 1.15vw, 12px);
letter-spacing: 0.14em;
text-transform: uppercase;
white-space: nowrap; /* nie umbrechen ("Jahre Erfahrung") */
color: var(--c-text-2);
margin-top: 0; /* doppelter Abstand entfernt */
}
@media (max-width: 600px) {
.trust-stats { padding: 24px 0; }
.trust-stat { padding: 2px 3px; gap: 2px; }
.trust-stats .trust-stat-num { font-size: clamp(30px, 9vw, 42px); }
.trust-stat + .trust-stat::before { height: 34px; }
.trust-stats .trust-stat-label { font-size: 8.7px; letter-spacing: 0.04em; line-height: 1.2; }
}