/* MK Marketing & Consulting — gemeinsames Stylesheet für alle Seiten */
/* Schriften lokal, seit 09.10.2026. Vorher von Google-Servern geladen, das
uebertraegt die IP-Adresse jedes Besuchers an Google (LG Muenchen I,
3 O 17493/20). Variable Schriften, je eine Datei fuer alle Staerken,
lateinischer Zeichensatz (deckt Umlaute, ss, Euro und Anfuehrungszeichen ab).
Lizenz beider Schriften: SIL Open Font License 1.1. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/inter-latin.woff2') format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/playfair-display-latin.woff2') format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400 700; font-display: swap; src: url('fonts/playfair-display-italic-latin.woff2') format('woff2'); }
:root {
--bg: #fbf8f3;
--bg-2: #f3ede1;
--bg-3: #ffffff;
--gold: #b8863a;
--gold-light: #c9a45c;
--gold-dim: rgba(184, 134, 58, 0.28);
--cream: #f5f1e8;
--ink: #201c14;
--text: #2a241c;
--text-muted: #79725f;
--border: rgba(184, 134, 58, 0.18);
--dark: #17140f;
--radius: 14px;
--shadow: 0 20px 50px rgba(32, 28, 20, 0.10);
--maxw: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
h1, h2, h3, .serif {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 600;
line-height: 1.15;
margin: 0;
color: var(--ink);
}
p { margin: 0 0 1em; color: var(--text-muted); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container {
max-width: var(--maxw);
margin: 0 auto;
padding: 0 28px;
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
font-weight: 600;
}
.eyebrow::before {
content: "";
width: 26px;
height: 1px;
background: var(--gold);
}
.gold { color: var(--gold); }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 15px 30px;
border-radius: 999px;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
border: 1px solid transparent;
transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
white-space: nowrap;
}
.btn-primary {
background: linear-gradient(120deg, var(--gold-light), var(--gold));
color: #ffffff;
box-shadow: 0 10px 26px rgba(184, 134, 58, 0.28);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(184, 134, 58, 0.38); }
.btn-ghost {
background: transparent;
color: var(--ink);
border-color: rgba(32, 28, 20, 0.18);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }
.btn-sm { padding: 10px 20px; font-size: 0.85rem; }
.nav-cta .btn svg { width: 15px; height: 15px; flex-shrink: 0; } /* Telefonhoerer vor der Nummer, 10.10.2026 */
/* Ghost-Buttons auf dunklen Flächen (z. B. CTA-Banner) brauchen helle Schrift */
.cta-banner .btn-ghost { color: var(--cream); border-color: rgba(245, 241, 232, 0.3); }
.cta-banner .btn-ghost:hover { border-color: var(--gold-light); color: var(--gold-light); }
/* ---------- Header ---------- */
.site-header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
padding: 22px 0;
transition: background 0.35s ease, padding 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
background: rgba(251, 248, 243, 0.86);
backdrop-filter: blur(14px);
padding: 14px 0;
border-bottom-color: var(--border);
box-shadow: 0 8px 30px rgba(32, 28, 20, 0.05);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; }
.logo { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; gap: 4px; } /* flex-start: sonst streckt der Kasten das Logobild auf Textbreite (10.10.2026) */
.logo-mark {
font-family: 'Playfair Display', serif;
font-size: 1.9rem;
font-weight: 700;
letter-spacing: -0.02em;
background: linear-gradient(120deg, var(--gold-light), var(--gold) 60%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Echtes Logo des Kunden seit 10.10.2026 (assets/logos/), die Textfassung darunter bleibt als Rueckfall */
.logo-bild { display: block; height: 42px; width: auto; align-self: flex-start; }
.logo-bild-fuss { height: 44px; }
.logo-fuss { align-items: flex-start; }
.logo-sub-hell { color: rgba(245, 241, 232, 0.72); }
@media (max-width: 760px) { .logo-bild { height: 34px; } }
/* Kopfzeile am Handy (11.10.2026): Logo fest zweizeilig, Knopf nur "Erstgespraech", sonst passten Logo,
Telefonknopf, Knopf und Menue nicht in 319 px und das Logo brach dreizeilig um */
.logo-umbruch { display: none; }
@media (max-width: 980px) {
.logo-umbruch { display: inline; }
.site-header .logo-sub { white-space: nowrap; }
}
@media (max-width: 480px) { .nav-cta .nur-breit { display: none; } }
.logo-sub {
font-size: 0.6rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--text-muted);
}
.nav { display: flex; align-items: center; gap: 40px; }
.nav-links { display: flex; gap: 34px; font-size: 0.92rem; font-weight: 500; }
.nav-links a { position: relative; color: var(--ink); opacity: 0.8; transition: opacity 0.2s ease, color 0.2s ease; }
.nav-links a::after {
content: "";
position: absolute; left: 0; bottom: -6px;
width: 0; height: 1px;
background: var(--gold);
transition: width 0.25s ease;
}
.nav-links a:hover, .nav-links a.active { opacity: 1; color: var(--gold); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-cta { display: flex; align-items: center; gap: 22px; }
.menu-toggle {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 6px;
}
.menu-toggle span { width: 24px; height: 2px; background: var(--ink); transition: transform 0.25s ease, opacity 0.25s ease; }
/* Offenes Mobilmenue: Kopfzeile ueber dem dunklen Grund hell, Symbol wird zum X (11.10.2026) */
html.menue-offen { overflow: hidden; }
html.menue-offen .site-header { background: transparent !important; box-shadow: none !important; border-color: transparent !important; backdrop-filter: none !important; }
html.menue-offen .site-header .logo, html.menue-offen .site-header .nav-cta { visibility: hidden; }
html.menue-offen .menu-toggle { position: relative; z-index: 101; }
html.menue-offen .menu-toggle span { background: var(--cream); }
html.menue-offen .menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
html.menue-offen .menu-toggle span:nth-child(2) { opacity: 0; }
html.menue-offen .menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ---------- Seitenhintergrund (Scroll-Bildfolge) ---------- */
/* Die Bildfolge haengt jetzt fest hinter der ganzen Startseite (position:
fixed, ausserhalb des normalen Seitenflusses), nicht mehr nur im Hero.
Sichtbar wird sie nur dort, wo ein Abschnitt bewusst durchsichtig ist
(Klasse .video-bereich, siehe unten bei "Abschnitte"). Verfahren:
Zweitgehirn/wissen/scroll-film-bildfolge.md, gleiches Grundprinzip wie bei
Beier Automobile (assets/js/buehne.js dort), hier aber seitenweit statt
nur im Hero-Abschnitt. */
.seiten-video {
position: fixed;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.seiten-video canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
.buehne-ersatz {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Verstaerkt am 14.09.2026: die Bildfolge laeuft jetzt hinter fuenf
Abschnitten statt nur dem Hero, mit ganz unterschiedlichem Text (Fliesstext
in --text-muted, nicht nur dunkle Ueberschriften) und ohne dass jede Stelle
ueber eine eigene Karte mit Hintergrund verfuegt (z. B. die Abschnitts-Kopf-
zeilen). Der alte, nur links starke Verlauf liess einen Streifen in der
Bildmitte fast unverschleiert, dort war Text je nach Bildinhalt kaum noch
zu lesen. Jetzt ueberall mindestens ~45-55% helle Abdeckung, links weiterhin
staerker fuer die Textspalte im Hero. */
.buehne-verlauf {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
linear-gradient(100deg, rgba(251,248,243,0.94) 0%, rgba(251,248,243,0.78) 42%, rgba(251,248,243,0.62) 68%, rgba(251,248,243,0.55) 100%),
linear-gradient(180deg, rgba(251,248,243,0.55) 0%, rgba(251,248,243,0.4) 25%, rgba(251,248,243,0.4) 75%, rgba(251,248,243,0.8) 100%);
}
.buehne-laden {
position: absolute; left: 0; right: 0; top: 0;
height: 3px; z-index: 3;
background: rgba(184, 134, 58, 0.15);
transition: opacity 0.5s ease;
}
.buehne-laden i { display: block; height: 100%; width: 0%; background: var(--gold); transition: width 0.2s linear; }
/* ---------- Hero ---------- */
.hero {
position: relative;
min-height: 100vh;
padding: 140px 0 100px;
background: transparent;
display: flex;
align-items: center;
}
.hero-block {
position: relative;
z-index: 2;
width: 100%;
}
.hero-block .container { position: relative; width: 100%; }
.hero-inner { position: relative; z-index: 2; max-width: 760px; }
.hero-inner[data-parallax] { will-change: transform; }
.hero h1 {
font-size: clamp(2.4rem, 5vw, 4.1rem);
margin: 22px 0 24px;
}
.hero h1 .underline-gold {
position: relative;
color: var(--gold);
font-style: italic;
}
.hero h1 .underline-gold::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 2px;
height: 6px;
background: var(--gold);
opacity: 0.3;
z-index: -1;
transform: scaleX(0);
transform-origin: left;
animation: growLine 1.2s 0.6s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes growLine { to { transform: scaleX(1); } }
.hero p.lead { font-size: 1.15rem; max-width: 560px; margin-bottom: 34px; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 60px; }
.hero-pillars {
display: flex;
gap: 34px;
flex-wrap: wrap;
padding-top: 30px;
border-top: 1px solid var(--border);
}
.hero-pillar { display: flex; align-items: center; gap: 10px; font-size: 0.88rem; color: var(--text-muted); }
.hero-pillar svg { width: 18px; height: 18px; stroke: var(--gold); flex-shrink: 0; }
/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1.is-visible { transition-delay: 0.1s; }
.reveal-delay-2.is-visible { transition-delay: 0.22s; }
.reveal-delay-3.is-visible { transition-delay: 0.34s; }
/* Karten fliegen beim Scrollen herein, statt nur einzublenden. Laeuft ueber
dieselbe .is-visible-Logik wie .reveal (IntersectionObserver in script.js),
braucht also kein eigenes JavaScript. Die Kurve hat einen leichten
Ueberschwinger, dadurch wirkt es wie "hereinfliegen und einrasten" statt wie
ein simples Verschieben. */
.reveal.fly-left,
.reveal.fly-right,
.reveal.fly-up {
transition:
opacity 0.7s ease,
transform 0.85s cubic-bezier(0.22, 1.35, 0.42, 1);
}
.reveal.fly-left { transform: translate3d(-90px, 18px, 0) scale(0.95); }
.reveal.fly-right { transform: translate3d(90px, 18px, 0) scale(0.95); }
.reveal.fly-up { transform: translate3d(0, 70px, 0) scale(0.95); }
/* Gegenrichtung: ist die Box oben aus dem Fenster gescrollt, kommt sie beim
Hochscrollen auch von oben wieder herein statt von unten. Die Klasse setzt
script.js beim Verlassen des Fensters. Diese Regeln muessen VOR den
.is-visible-Regeln stehen, sie haben dieselbe Gewichtung, es entscheidet
die Reihenfolge. */
.reveal.fly-left.von-oben { transform: translate3d(-90px, -18px, 0) scale(0.95); }
.reveal.fly-right.von-oben { transform: translate3d(90px, -18px, 0) scale(0.95); }
.reveal.fly-up.von-oben { transform: translate3d(0, -70px, 0) scale(0.95); }
.reveal.fly-left.is-visible,
.reveal.fly-right.is-visible,
.reveal.fly-up.is-visible { transform: translate3d(0, 0, 0) scale(1); }
/* Handy (11.10.2026): seitliches Hereinfliegen schob die Elemente vor dem Einblenden 90 px aus dem Bild,
das Handy machte die Seite dadurch 55 px breiter und schnitt das Menuesymbol an. Am Handy kommen
deshalb alle von unten. KEIN overflow-x am html: dann wird der body (overflow-x: hidden) selbst zum
Scrollbereich und die feste Buehne klebt nicht mehr (gemessen 11.10.2026, Stage scrollte mit). */
@media (max-width: 760px) {
.reveal.fly-left, .reveal.fly-right { transform: translate3d(0, 40px, 0) scale(0.97); }
.reveal.fly-left.von-oben, .reveal.fly-right.von-oben { transform: translate3d(0, -40px, 0) scale(0.97); }
.reveal.fly-left.is-visible, .reveal.fly-right.is-visible { transform: translate3d(0, 0, 0) scale(1); }
}
/* Wer Bewegung reduziert haben will, bekommt nur das Einblenden, kein Fliegen. */
@media (prefers-reduced-motion: reduce) {
.compare-card.good { animation: none; border-color: var(--gold); }
.pricing-card.is-highlight { animation: none; }
.process-step.is-visible .process-num { animation: none; background: var(--gold); color: #fff; border-color: var(--gold); }
.process::after { transition: none; }
.reveal,
.reveal.fly-left,
.reveal.fly-right,
.reveal.fly-up { transform: none; transition: opacity 0.4s ease; }
}
/* ---------- Sections ---------- */
/* Jeder Abschnitt ist standardmaessig blickdicht (deckt den fixierten
Seitenhintergrund/die Bildfolge zu). Nur Abschnitte mit .video-bereich
werden bewusst durchsichtig, damit die Bildfolge dort durchscheint, siehe
.seiten-video weiter oben. So bleibt die Bildfolge auf die ersten fuenf
Abschnitte begrenzt (Hero bis "So laeuft's ab"), rund die Haelfte der
Startseite, alles danach deckt sie normal zu. */
section { position: relative; padding: 110px 0; background: var(--bg); }
.section-head { max-width: 620px; margin-bottom: 60px; }
.section-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); margin: 16px 0 18px; }
.section-alt { background: var(--bg-2); }
.video-bereich { background: transparent; }
/* Letzter durchsichtiger Abschnitt: die Bildfolge laeuft weich in die Cremeflaeche aus,
statt mit einer geraden Kante zu enden (Tim, 10.10.2026, Bildschirmfoto). */
.video-bereich.video-ausblenden { padding-bottom: 200px; }
.video-bereich.video-ausblenden::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 320px;
background: linear-gradient(180deg, rgba(251, 248, 243, 0) 0%, rgba(251, 248, 243, 0.45) 40%, rgba(251, 248, 243, 0.85) 72%, var(--bg) 100%);
pointer-events: none; z-index: 0;
}
.video-bereich.video-ausblenden > .container { position: relative; z-index: 1; }
/* Fliesstext ist normalerweise var(--text-muted), ein bewusst helles Grau,
das auf der flachen Cremeseite gerade noch gut genug lesbar ist. Ueber der
Bildfolge reicht das nicht mehr, sobald der Text keine eigene Karte mit
festem Hintergrund hat (Abschnitts-Einleitung, Hero-Lead, Prozess-Schritte).
Dort auf den dunkleren --text wechseln, das ist der konkrete Fehler hinter
der Rueckmeldung "Texte heben sich nicht mehr ab". Text INNERHALB von
Karten mit eigenem Hintergrund (Pillar-, Profil-Karten) bleibt unveraendert. */
.video-bereich .section-head p,
.hero .lead,
.video-bereich .process-step p { color: var(--text); }
/* Zufall vs Struktur */
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.compare-card {
border-radius: var(--radius);
padding: 34px 32px;
border: 1px solid var(--border);
}
/* Vorher rgba(32,28,20,0.03), also praktisch kein Hintergrund: auf der flachen
Cremeseite reichte das, ueber der Bildfolge stand der Text quasi frei im
Bild. Jetzt eine echte, helle Karte, damit sie unabhaengig vom gerade
gezeigten Bild lesbar bleibt, weiterhin dezenter als die "gute" Karte. */
.compare-card.bad { background: rgba(251, 248, 243, 0.88); }
.compare-card.good {
background:
linear-gradient(160deg, rgba(184, 134, 58, 0.14), rgba(184, 134, 58, 0.03)),
rgba(255, 255, 255, 0.9);
border-color: var(--gold-dim);
box-shadow: var(--shadow);
/* Pulsierender Goldrand, 2,5 s pro Atemzug (Tim, 10.10.2026: erst 4,8 s, dann auf 2,5 s gestellt) */
animation: goldrand-puls 2.5s ease-in-out infinite;
}
@keyframes goldrand-puls {
0%, 100% { border-color: var(--gold-dim); box-shadow: var(--shadow), 0 0 0 0 rgba(184, 134, 58, 0), 0 0 0 0 rgba(184, 134, 58, 0); }
50% { border-color: var(--gold-light); box-shadow: var(--shadow), 0 0 0 3px rgba(184, 134, 58, 0.6), 0 0 40px 8px rgba(184, 134, 58, 0.45); }
}
.compare-card h3 { font-size: 1.25rem; margin-bottom: 18px; }
.compare-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.compare-card li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.95rem; color: var(--text-muted); }
.compare-card.good li { color: var(--text); }
.compare-card .mark { flex-shrink: 0; margin-top: 3px; }
.compare-card.bad .mark { color: #9a9284; }
.compare-card.good .mark { color: var(--gold); }
/* Pillars / Services */
.pillar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.pillar-card {
background: var(--bg-3);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 38px 30px;
box-shadow: 0 2px 16px rgba(32, 28, 20, 0.04);
transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.pillar-card:hover { transform: translateY(-6px); border-color: var(--gold-dim); box-shadow: var(--shadow); }
.pillar-icon {
width: 52px; height: 52px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(140deg, rgba(184,134,58,0.2), rgba(184,134,58,0.05));
margin-bottom: 22px;
}
.pillar-icon svg { width: 24px; height: 24px; stroke: var(--gold); }
.pillar-card h3 { font-size: 1.2rem; margin-bottom: 12px; }
.pillar-card p { margin-bottom: 18px; font-size: 0.94rem; }
.pillar-card .link-more { font-size: 0.85rem; color: var(--gold); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.pillar-card .link-more svg { width: 14px; height: 14px; transition: transform 0.25s ease; }
.pillar-card:hover .link-more svg { transform: translateX(4px); }
/* Process / funnel steps */
.process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.process::before {
content: "";
position: absolute;
top: 26px; left: 6%; right: 6%;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold-dim), var(--gold-dim), transparent);
}
.process-step { text-align: center; padding: 0 16px; position: relative; }
.process-num {
width: 54px; height: 54px;
margin: 0 auto 22px;
border-radius: 50%;
border: 1px solid var(--gold-dim);
background: var(--bg-3);
box-shadow: 0 4px 16px rgba(32, 28, 20, 0.06);
display: flex; align-items: center; justify-content: center;
font-family: 'Playfair Display', serif;
font-size: 1.15rem;
color: var(--gold);
position: relative; z-index: 2;
}
/* Nummernkreise leuchten nacheinander auf, sobald die Schritte ins Bild kommen (Tim, 10.10.2026).
Haengt an .is-visible aus dem IntersectionObserver, laeuft also bei jedem Vorbeiscrollen neu. */
.process-num { transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; }
.process-step.is-visible .process-num { animation: nummer-leuchten 1s cubic-bezier(0.22, 1, 0.36, 1) forwards; animation-delay: 0.45s; }
.process-step.reveal-delay-1.is-visible .process-num { animation-delay: 0.9s; }
.process-step.reveal-delay-2.is-visible .process-num { animation-delay: 1.35s; }
.process-step.reveal-delay-3.is-visible .process-num { animation-delay: 1.8s; }
@keyframes nummer-leuchten {
0% { background: var(--bg-3); color: var(--gold); border-color: var(--gold-dim); box-shadow: 0 4px 16px rgba(32, 28, 20, 0.06); transform: scale(1); }
45% { background: var(--gold); color: #fff; border-color: var(--gold); box-shadow: 0 0 0 12px rgba(184, 134, 58, 0.22), 0 8px 26px rgba(184, 134, 58, 0.45); transform: scale(1.12); }
100% { background: var(--gold); color: #fff; border-color: var(--gold); box-shadow: 0 6px 18px rgba(184, 134, 58, 0.32); transform: scale(1); }
}
/* Die Verbindungslinie zieht sich goldfarben von links nach rechts durch, im Takt der Kreise */
.process::after {
content: ""; position: absolute; top: 26px; left: 6%; right: 6%; height: 1px;
background: linear-gradient(90deg, transparent, var(--gold), var(--gold), transparent);
transform: scaleX(0); transform-origin: left center; transition: transform 1.9s ease 0.5s;
}
.process:has(.process-step.is-visible)::after { transform: scaleX(1); }
.process-step h3 { font-size: 1.02rem; margin-bottom: 10px; }
.process-step p { font-size: 0.88rem; }
/* Platzhalter- / Hinweis-Flags */
.draft-flag {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.72rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #93600f;
background: rgba(224, 169, 68, 0.15);
border: 1px solid rgba(224, 169, 68, 0.4);
padding: 5px 12px;
border-radius: 999px;
margin-bottom: 18px;
}
.draft-flag.warning {
color: #a13a2a;
background: rgba(217, 112, 79, 0.12);
border-color: rgba(217, 112, 79, 0.4);
}
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.testi-grid.vier { grid-template-columns: repeat(2, 1fr); } /* vier Google-Bewertungen, 10.10.2026 */
/* Wischleisten am Handy (Tim, 11./12.10.2026, Vorbild dog-emporio.de): Bewertungen, die drei Pakete und die zwei
Beratungsangebote. Eine Karte zur Zeit, die naechste gleitet von rechts herein, Wischen geht jederzeit, Punkte
darunter zeigen die Position. Steuerung: wischLeisten() in script.js. Am Desktop bleiben es normale Raster. */
.wisch-punkte { display: none; }
/* Bewertungen auch am Desktop als Karussell (Tim, 12.10.2026): eine Karte zur Zeit, mittig, lesbare Breite */
@media (min-width: 761px) {
.testi-grid.wisch-leiste[data-ueberall] { display: flex !important; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
max-width: 760px; margin-left: auto; margin-right: auto; padding: 4px 0 8px; scrollbar-width: none; }
.testi-grid.wisch-leiste[data-ueberall]::-webkit-scrollbar { display: none; }
.testi-grid.wisch-leiste[data-ueberall] > * { flex: 0 0 100%; min-width: 0; scroll-snap-align: center; background: rgba(255, 255, 255, 0.9); }
.testi-grid.wisch-leiste[data-ueberall] .testi-card { padding: 34px 38px; }
.testi-grid.wisch-leiste[data-ueberall] .testi-card p.quote { font-size: 1.05rem; }
.testi-grid.wisch-leiste[data-ueberall] + .wisch-punkte, .wisch-huelle + .wisch-punkte { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.wisch-huelle + .wisch-punkte button, .testi-grid.wisch-leiste[data-ueberall] + .wisch-punkte button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(184, 134, 58, 0.3); cursor: pointer; transition: background 0.3s ease, width 0.3s ease; }
.wisch-huelle + .wisch-punkte button.aktiv, .testi-grid.wisch-leiste[data-ueberall] + .wisch-punkte button.aktiv { background: var(--gold); width: 22px; border-radius: 4px; }
}
@media (max-width: 760px) {
.wisch-leiste { display: flex !important; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
margin-left: -28px !important; margin-right: -28px !important; padding: 4px 28px 6px; max-width: none;
scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.wisch-leiste::-webkit-scrollbar { display: none; }
.wisch-leiste > * { flex: 0 0 100%; min-width: 0; scroll-snap-align: center; }
.testi-grid.wisch-leiste .testi-card { background: rgba(255, 255, 255, 0.9); }
/* Pakete: Luft oben fuer die Plakette "Empfehlung" und den Goldrand, sonst schneidet die Leiste sie ab */
.pricing-grid.wisch-leiste { padding-top: 18px; padding-bottom: 14px; align-items: stretch; }
.pricing-grid.wisch-leiste .pricing-card:hover { transform: none; }
.wisch-punkte { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.wisch-punkte button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(184, 134, 58, 0.3); cursor: pointer; transition: background 0.3s ease, width 0.3s ease; }
.wisch-punkte button.aktiv { background: var(--gold); width: 22px; border-radius: 4px; }
}
.testi-card {
border: 1px dashed rgba(184, 134, 58, 0.35);
border-radius: var(--radius);
padding: 30px 26px;
background: rgba(32, 28, 20, 0.02);
}
.testi-card p.quote { font-style: italic; color: var(--text); font-size: 0.95rem; }
.testi-name { font-size: 0.85rem; color: var(--gold); font-weight: 600; }
/* Über mich / Profil */
.profile-card {
display: grid;
grid-template-columns: auto 1fr;
gap: 36px;
align-items: center;
background: var(--bg-3);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 42px;
box-shadow: 0 2px 16px rgba(32, 28, 20, 0.04);
}
.profile-avatar {
width: 108px; height: 108px;
border-radius: 50%;
flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(140deg, rgba(184,134,58,0.18), rgba(184,134,58,0.05));
border: 1px solid var(--gold-dim);
}
.profile-avatar span {
font-family: 'Playfair Display', serif;
font-size: 2.1rem;
font-weight: 700;
background: linear-gradient(120deg, var(--gold-light), var(--gold) 60%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.profile-name { font-size: 1.5rem; margin-bottom: 4px; }
.profile-role { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 16px; }
.profile-credentials { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.credential-pill {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.8rem;
font-weight: 600;
color: var(--gold);
background: rgba(184, 134, 58, 0.1);
border: 1px solid var(--gold-dim);
padding: 7px 14px;
border-radius: 999px;
}
.profile-card p.profile-bio { margin-bottom: 0; }
/* WhatsApp-Knopf beim Profil (Tim, 12.10.2026): hier entsteht laut Persona-Pruefung das Vertrauen, bisher ohne Knopf */
.profile-aktion { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 22px; }
.profile-aktion .btn svg { flex-shrink: 0; }
.profile-aktion-hinweis { font-size: 0.82rem; color: var(--text-muted); }
@media (max-width: 620px) { .profile-aktion { flex-direction: column; align-items: stretch; gap: 8px; } .profile-aktion .btn { width: 100%; min-width: 0; box-sizing: border-box; justify-content: center; white-space: normal; text-align: center; font-size: 0.9rem; padding-left: 14px; padding-right: 14px; } }
@media (max-width: 620px) {
.profile-card { grid-template-columns: 1fr; text-align: center; }
.profile-avatar { margin: 0 auto; }
.profile-credentials { justify-content: center; }
/* Abschluesse am Handy zwei nebeneinander, untereinander wirkte der Block gestreckt (Tim, 12.10.2026).
Bleibt eine Plakette allein, steht sie mittig ueber beide Spalten. */
.profile-credentials { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.profile-card { padding: 28px 18px; }
.credential-pill { justify-content: center; text-align: center; font-size: 0.7rem; line-height: 1.3; padding: 7px 6px; border-radius: 14px; min-height: 40px; min-width: 0; hyphens: manual; overflow-wrap: break-word; } /* feste Trennstellen per im HTML, hyphens: auto greift nicht in jedem Browser */
.credential-pill:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; min-width: 50%; }
}
/* Hero-Wachstums-Widget: animierte Beispielzahlen, Positionierung jetzt
relativ zu .hero-block .container (siehe oben bei .hero-block) */
.hero-visual {
position: absolute;
top: 54%;
right: 8px;
transform: translateY(-50%);
width: 264px;
z-index: 2;
background: rgba(255, 255, 255, 0.74);
backdrop-filter: blur(16px);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 22px 22px 18px;
box-shadow: var(--shadow);
}
.hero-visual-head {
display: flex; align-items: center; gap: 8px;
font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--text-muted); margin-bottom: 16px;
}
.hero-visual-dot {
width: 7px; height: 7px; border-radius: 50%;
background: #3a8c4a; box-shadow: 0 0 0 3px rgba(58, 140, 74, 0.18);
animation: pulseDot 2s ease-in-out infinite;
}
@keyframes pulseDot { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.growth-chart { width: 100%; height: auto; display: block; margin-bottom: 16px; }
.growth-line { stroke-dasharray: 340; stroke-dashoffset: 340; }
.hero-visual.is-visible .growth-line { animation: drawLine 1.8s ease forwards; }
@keyframes drawLine { to { stroke-dashoffset: 0; } }
.growth-stats { display: flex; flex-direction: column; gap: 10px; }
.growth-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.growth-num { font-family: 'Playfair Display', serif; font-size: 1.15rem; color: var(--gold); font-weight: 700; }
.growth-stat-label { font-size: 0.76rem; color: var(--text-muted); }
.hero-visual .draft-flag { margin: 14px 0 0; font-size: 0.6rem; padding: 4px 9px; }
@media (max-width: 1260px) { .hero-visual { display: none; } }
/* Leistungen: Preis-Pakete */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-bottom: 34px; }
.pricing-card {
background: var(--bg-3);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 36px 30px;
display: flex; flex-direction: column; gap: 16px;
box-shadow: 0 2px 16px rgba(32, 28, 20, 0.04);
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
position: relative;
}
.pricing-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--gold-dim); }
.pricing-card.is-highlight {
border-color: var(--gold);
background: linear-gradient(165deg, rgba(184, 134, 58, 0.08), rgba(184, 134, 58, 0.01));
box-shadow: var(--shadow);
animation: goldrand-puls 2.5s ease-in-out infinite; /* gleicher Puls wie die Vergleichsbox auf der Startseite (Tim, 10.10.2026) */
}
.pricing-badge {
position: absolute; top: -13px; left: 30px;
background: linear-gradient(120deg, var(--gold-light), var(--gold));
color: #fff; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
padding: 5px 14px; border-radius: 999px; box-shadow: 0 6px 16px rgba(184, 134, 58, 0.35);
}
.pricing-card h3 { font-size: 1.3rem; }
.pricing-price { font-size: 0.95rem; color: var(--text-muted); margin: 0; }
.pricing-price strong { font-family: 'Playfair Display', serif; font-size: 2rem; font-weight: 600; color: var(--text); margin-right: 6px; line-height: 1; }
.pricing-ca { font-size: 0.85rem; color: var(--text-muted); margin-right: 5px; }
.pricing-kurz { font-size: 0.92rem; color: var(--text-muted); margin: 0; }
.pricing-hinweis { font-size: 0.86rem; color: var(--text-muted); max-width: 820px; margin: 0 0 54px; }
.pricing-grid.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; }
.beratung-kopf { max-width: 640px; margin-bottom: 26px; }
.beratung-kopf h3 { font-size: 1.6rem; margin: 6px 0 10px; }
.beratung-kopf p { color: var(--text-muted); margin: 0; }
.reel-tabelle-huelle { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-3); margin-bottom: 18px; }
.reel-tabelle { width: 100%; border-collapse: collapse; font-size: 0.92rem; min-width: 640px; }
.reel-tabelle th, .reel-tabelle td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.reel-tabelle th { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.reel-tabelle tbody tr:last-child td { border-bottom: 0; }
.reel-tabelle td strong { font-family: 'Playfair Display', serif; font-size: 1.15rem; color: var(--text); }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
@media (max-width: 760px) { .pricing-grid.zwei { grid-template-columns: 1fr; } }
.pricing-card .service-list { grid-template-columns: 1fr; gap: 10px; margin: 0; flex: 1; }
/* Hinweisbox auf den Partner MEYNEXA Marktus, steht direkt unter den Paketen
(leistungen.html#zusatzleistungen). Gleiche Bauform wie .pricing-custom
daneben, nur mit Goldton, damit sie als Zusatz erkennbar ist und die Pakete
von MK selbst optisch die Hauptrolle behalten. */
.zusatz-paket {
display: flex; justify-content: space-between; align-items: center;
gap: 34px; flex-wrap: wrap;
margin-top: 22px; padding: 32px 34px;
background: linear-gradient(140deg, rgba(184, 134, 58, 0.10), rgba(184, 134, 58, 0.02)), var(--bg-3);
border: 1px solid var(--gold-dim);
border-radius: var(--radius);
}
.zusatz-paket > div:first-child { max-width: 700px; }
.zusatz-paket h3 { font-size: 1.3rem; margin: 10px 0 12px; }
.zusatz-paket p { margin-bottom: 0; }
.zusatz-inhalt { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 34px; margin-top: 20px; }
.zusatz-inhalt h4 {
font-family: 'Playfair Display', Georgia, serif;
font-size: 0.98rem; font-weight: 600; margin: 0 0 11px; color: var(--ink);
}
.zusatz-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 0.91rem; }
.zusatz-liste li { display: flex; align-items: flex-start; gap: 8px; }
.zusatz-liste .mark { color: var(--gold); flex-shrink: 0; }
.zusatz-fuss { font-size: 0.82rem; color: var(--text-muted); margin-top: 16px !important; }
.zusatz-aktion { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
@media (max-width: 860px) { .zusatz-paket { padding: 26px 24px; } }
@media (max-width: 620px) { .zusatz-inhalt { grid-template-columns: 1fr; } }
.pricing-card > .btn { margin-top: auto; align-self: flex-start; }
.pricing-custom {
display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
border: 1px dashed var(--gold-dim);
border-radius: var(--radius);
padding: 30px 34px;
background: rgba(184, 134, 58, 0.05);
}
.pricing-custom h3 { font-size: 1.15rem; margin-bottom: 6px; }
.pricing-custom p { margin: 0; max-width: 480px; }
/* Referenzen / Bewertungs-Zusammenfassung, Google-Bewertungen-ready */
.rating-summary {
display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
margin-bottom: 34px; padding: 16px 22px;
border: 1px solid var(--border); border-radius: 999px;
background: var(--bg-3);
font-size: 0.92rem;
}
.rating-stars, .testi-stars { color: var(--gold); letter-spacing: 2px; font-size: 0.95rem; }
.testi-stars { margin-bottom: 10px; display: block; }
.rating-summary strong { color: var(--ink); font-size: 1.05rem; }
/* Einblick in die Arbeit / Behind the scenes */
.bts-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.bts-item { display: flex; flex-direction: column; gap: 10px; }
.bts-placeholder {
position: relative;
aspect-ratio: 9 / 16;
border-radius: var(--radius);
background:
radial-gradient(circle at 30% 20%, rgba(184, 134, 58, 0.22), transparent 55%),
radial-gradient(circle at 75% 80%, rgba(184, 134, 58, 0.14), transparent 55%),
linear-gradient(155deg, #f0e8d8 0%, #e4d7bd 100%);
border: 1px solid var(--border);
overflow: hidden;
display: flex; align-items: center; justify-content: center;
}
.bts-placeholder::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.4) 50%, transparent 70%);
background-size: 200% 100%;
animation: shimmer 3.2s ease-in-out infinite;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.bts-image .bts-placeholder { aspect-ratio: 4 / 5; }
.bts-play {
position: relative; z-index: 1;
width: 52px; height: 52px; border-radius: 50%;
background: rgba(255, 255, 255, 0.85);
display: flex; align-items: center; justify-content: center;
color: var(--gold); font-size: 1.05rem;
box-shadow: 0 8px 20px rgba(32, 28, 20, 0.15);
}
.bts-caption { font-size: 0.78rem; color: var(--text-muted); text-align: center; }
.bts-media-frame {
position: relative;
aspect-ratio: 9 / 16;
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--border);
background: var(--bg-2);
box-shadow: 0 2px 16px rgba(32, 28, 20, 0.06);
}
.bts-image .bts-media-frame { aspect-ratio: 9 / 16; }
.bts-media-frame video, .bts-media-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bts-media-frame .bts-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0.9;
border: 0; padding: 0 0 0 3px; cursor: pointer; font-family: inherit; transition: opacity 0.2s ease, transform 0.2s ease; }
.bts-video .bts-media-frame { cursor: pointer; }
/* Hinweis an den beiden KI-Videos im Einblick (Tim, 14.10.2026: "Hinweis Beispiel reicht") */
.bts-media-frame .bts-beispiel { position: absolute; top: 10px; left: 10px; z-index: 2; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); background: rgba(251, 248, 243, 0.92); border: 1px solid rgba(184, 134, 58, 0.45); border-radius: 999px; padding: 4px 9px; pointer-events: none; }
.bts-media-frame .bts-play:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* Waehrend das Video laeuft, ist der Knopf weg (13.10.2026) */
.bts-media-frame.spielt .bts-play { opacity: 0; transform: translate(-50%, -50%) scale(0.8); pointer-events: none; }
/* CTA banner — bewusst dunkel als Kontrastfläche */
.cta-banner {
border-radius: 20px;
padding: 64px 56px;
background: linear-gradient(135deg, #241f16, var(--dark) 60%);
border: 1px solid var(--gold-dim);
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
flex-wrap: wrap;
position: relative;
overflow: hidden;
}
.cta-banner::after {
content: "";
position: absolute; inset: 0;
pointer-events: none; z-index: 0; /* lag ueber den Knoepfen und fing jeden Klick ab (12.10.2026) */
background: radial-gradient(circle at 85% 20%, rgba(201,164,92,0.22), transparent 55%);
}
.cta-banner h2 { color: var(--cream); font-size: clamp(1.6rem, 3vw, 2.2rem); max-width: 480px; position: relative; z-index: 1; }
.cta-banner .cta-actions { position: relative; z-index: 1; display: flex; gap: 14px; flex-wrap: wrap; }
/* Footer — bewusst dunkel als Abschluss */
/* position/z-index sind hier Pflicht, nicht Kosmetik: der Seitenhintergrund
(.seiten-video) ist "position: fixed" und wird damit ueber allen normalen,
nicht positionierten Bloecken gezeichnet. Die Abschnitte haben ohnehin
"position: relative" und liegen deshalb darueber, der Footer hatte das
nicht, dadurch lag die Bildfolge ueber dem Footer und war am unteren
Seitenende sichtbar. */
footer {
position: relative;
z-index: 1;
padding: 70px 0 34px;
background: var(--dark);
color: var(--cream);
}
footer p { color: rgba(245, 241, 232, 0.62); }
.footer-grid { display: grid; grid-template-columns: 1.3fr 0.8fr 0.8fr 1fr; gap: 40px; margin-bottom: 50px; }
.footer-links { display: flex; flex-direction: column; gap: 12px; font-size: 0.92rem; }
.footer-links a:hover { color: var(--gold-light); }
.footer-title { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 18px; }
.footer-bottom {
display: flex; justify-content: space-between; align-items: center;
font-size: 0.8rem; color: rgba(245, 241, 232, 0.5);
padding-top: 26px; border-top: 1px solid rgba(245, 241, 232, 0.12);
flex-wrap: wrap; gap: 10px;
}
.footer-bottom a:hover { color: var(--gold-light); }
/* Gestalter-Hinweis: bewusst zurueckhaltend, die Seite gehoert dem Kunden. */
.footer-credit { letter-spacing: 0.02em; }
.footer-credit strong {
font-weight: 600;
letter-spacing: 0.08em;
color: rgba(245, 241, 232, 0.78);
}
.contact-inline { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; margin-bottom: 12px; }
.contact-inline svg { width: 17px; height: 17px; stroke: var(--gold-light); flex-shrink: 0; }
/* Page hero (Leistungen / Kontakt / Rechtstexte) */
.page-hero {
position: relative;
overflow: hidden;
padding: 170px 0 80px;
background: linear-gradient(160deg, #ffffff 0%, #f5efe1 100%);
border-bottom: 1px solid var(--border);
}
.page-hero > .container { position: relative; z-index: 2; }
.page-hero-bg-img {
position: absolute; inset: 0; z-index: 0;
width: 100%; height: 100%;
object-fit: cover;
opacity: 0.4;
mix-blend-mode: multiply;
pointer-events: none;
}
.page-hero .hero-canvas { opacity: 0.55; }
.page-hero-fade {
position: absolute; inset: 0; z-index: 1;
background: radial-gradient(ellipse 65% 70% at 30% 40%, transparent 25%, #fbf8f3 100%);
pointer-events: none;
}
/* Leistungsseite: Kopf und Pakete liegen ueber dem Scroll-Film (10.10.2026) */
.page-hero.ueber-film { background: transparent; border-bottom: 0; }
.page-hero.ueber-film p { color: var(--text); }
.page-hero.ueber-film > .container { transition: opacity 0.22s linear; }
/* Buehne nach dem Themahund-Muster (10.10.2026): jeder Block eine Bildschirmhoehe, Inhalt mittig,
der Film bleibt stehen, der Block blendet beim Eintreten ein (.reveal) und scrollt danach weg. */
.buehne-block { min-height: 100vh; display: flex; align-items: center; }
/* Feste Buehne: der Stage-Kasten klebt eine Fensterhoehe lang, die Ebenen liegen uebereinander
und werden von buehnePin() nach Scrollfortschritt ein- und ausgeblendet (10.10.2026). */
.buehne-pin { position: relative; height: 720vh; } /* fuenf Ebenen: Hero, Pakete, Beratung, Kombinierbar, MEYNEXA-Zusatz (Tim, 11.10.2026) */ /* drei Ebenen: Hero-Text, Pakete, Beratung (Tim, 10.10.2026) */
.buehne-hero h1 { font-size: clamp(2.1rem, 4vw, 3rem); margin: 16px 0 18px; }
/* Kartenebenen kompakter, damit sie ohne starke Verkleinerung zwischen Leiste und Rand passen */
.buehne-pin-stage .buehne-ebene .section-head, .buehne-pin-stage .buehne-ebene .beratung-kopf { margin-bottom: 8px; }
.buehne-pin-stage .buehne-ebene .section-head p, .buehne-pin-stage .buehne-ebene .beratung-kopf p { margin-bottom: 0; }
.buehne-pin-stage .buehne-ebene .pricing-grid { margin-top: 18px !important; margin-bottom: 12px; }
.buehne-pin-stage .buehne-ebene .pricing-card { padding: 26px 24px; }
.buehne-pin-stage .buehne-ebene .pricing-hinweis { margin: 0; }
/* Die zwei Beratungskarten genau so breit wie eine der drei Paketkarten, damit die Pakete nicht kleiner
wirken als die Beratung (Tim, 10.10.2026: "die Pakete sind ja das, was verkauft werden soll") */
@media (min-width: 901px) {
/* Kopf kompakt, damit die Paketebene in die Fensterhoehe passt und nicht verkleinert wird. Breite und
Schrift bleiben wie auf der restlichen Seite (Tim, 10.10.2026: "viel zu gross, passt nicht zum Verhaeltnis") */
/* Ueberschrift einzeilig ueber die volle Breite, Text darunter (Tim, 10.10.2026: "sollte doch unter der Ueberschrift stehen") */
.buehne-pin-stage .buehne-ebene .section-head { max-width: none; }
.buehne-pin-stage .buehne-ebene .section-head h2 { margin: 10px 0 8px; font-size: clamp(1.9rem, 3vw, 2.5rem); }
.buehne-pin-stage .buehne-ebene .section-head p { margin: 0; max-width: 720px; }
.buehne-pin-stage .pricing-grid.zwei { grid-template-columns: repeat(2, calc((100% - 52px) / 3)); justify-content: center; max-width: none; }
}
.buehne-hero p { max-width: 560px; font-size: 1.05rem; color: var(--text); }
/* Startseite in der Buehne (11.10.2026): der Hero-Block ist eine Ebene ohne eigene Abschnittshoehe, Massstab 1 */
.buehne-ebene.hero { min-height: 0; padding: 0; display: block; }
/* Nummernkreise und Linie des Ablaufs leuchten, sobald die Ablauf-Ebene aktiv ist (statt per IntersectionObserver) */
.buehne-ebene.aktiv .process-step .process-num { animation: nummer-leuchten 1s cubic-bezier(0.22, 1, 0.36, 1) forwards; animation-delay: 0.45s; }
.buehne-ebene.aktiv .process-step:nth-child(2) .process-num { animation-delay: 0.9s; }
.buehne-ebene.aktiv .process-step:nth-child(3) .process-num { animation-delay: 1.35s; }
.buehne-ebene.aktiv .process-step:nth-child(4) .process-num { animation-delay: 1.8s; }
.buehne-ebene.aktiv .process::after { transform: scaleX(1); }
.buehne-pin-stage .buehne-ebene .process { margin-top: 24px; }
.buehne-pin-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.buehne-ebene { position: absolute; left: 50%; top: 50%; width: 100%; transform: translate(-50%, -50%); opacity: 0; pointer-events: none; transition: opacity 0.22s linear; }
.buehne-ebene.aktiv { pointer-events: auto; }
.buehne-ebene .pricing-grid { margin-bottom: 18px; }
@media (max-width: 900px) {
.buehne-pin { height: auto; }
.buehne-pin-stage { position: static; height: auto; overflow: visible; }
/* Handy (11.10.2026): Ebenen im normalen Fluss, Seitenraender des Containers bleiben (vorher nahm
"padding: 50px 0" die 28 px weg und der Text lief bis an den Rand). Jede Ebene blendet ein, sobald sie
ins Bild kommt (IntersectionObserver in buehnePin), ohne JavaScript bleibt alles sichtbar. */
.buehne-ebene { position: static; transform: none !important; pointer-events: auto; padding-top: 48px; padding-bottom: 48px; opacity: 1; }
html.js-buehne .buehne-ebene { opacity: 0; transition: opacity 0.7s ease; }
html.js-buehne .buehne-ebene.sichtbar { opacity: 1; }
.buehne-ebene.hero { padding: 120px 0 36px; }
.hero-pillars { gap: 14px 22px; padding-top: 22px; }
.hero-actions { margin-bottom: 40px; }
.buehne-hero { padding-top: 130px; }
/* Hero fuellt am Handy den ganzen Bildschirm, sonst lugte "Drei Pakete, ein Ansprechpartner" halb ins Bild (Tim, 11.10.2026) */
.buehne-ebene.buehne-hero { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: 110px; padding-bottom: 40px; box-sizing: border-box; }
}
/* In den Buehnenbloecken nur ein- und ausblenden, kein Hochschieben (Tim, 10.10.2026: "nicht von unten hoch kommen") */
.buehne-block .reveal { transform: none; transition: opacity 1.1s ease; }
.buehne-block .reveal.is-visible { transform: none; }
.buehne-block .reveal-delay-1.is-visible { transition-delay: 0.18s; }
.buehne-block .reveal-delay-2.is-visible { transition-delay: 0.36s; }
.page-hero.ueber-film.buehne-block { padding: 120px 0 80px; }
.page-hero.ueber-film.buehne-block > .container { width: 100%; }
#pakete-bereich { padding-top: 0; }
#pakete-bereich .buehne-block { flex-direction: column; justify-content: center; align-items: stretch; padding: 70px 24px; }
#pakete-bereich .buehne-block .pricing-grid { margin-bottom: 18px; }
@media (max-width: 760px) { .buehne-block { min-height: 0; } #pakete-bereich .buehne-block { padding: 50px 20px; } }
.video-bereich .pricing-card { background: rgba(255, 255, 255, 0.96); }
/* "Alles kombinierbar" ueber dem Film: fast deckend und mit durchgezogenem Goldrand, sonst zu durchsichtig (Tim, 11.10.2026) */
.video-bereich .pricing-custom { background: linear-gradient(140deg, rgba(184, 134, 58, 0.10), rgba(184, 134, 58, 0.03)), rgba(255, 255, 255, 0.96); border: 1px solid var(--gold-dim); box-shadow: 0 2px 16px rgba(32, 28, 20, 0.06); }
/* Leistungsseite, "Vom Plan zum Post" (10.10.2026): Szene rechts, Text links frei */
.plan-hero { min-height: 560px; display: flex; align-items: center; }
.plan-canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.plan-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 60%; pointer-events: none; opacity: 0.95; }
.plan-hero .page-hero-fade { background: linear-gradient(90deg, #fbf8f3 0%, rgba(251, 248, 243, 0.94) 40%, rgba(251, 248, 243, 0.35) 56%, rgba(251, 248, 243, 0) 68%); }
.plan-hero > .container { width: 100%; max-width: 1180px; } /* als Flex-Kind sonst nur so breit wie der Text und mittig */ /* der Kopf-Container ist sonst schmal und mittig, hier Text links, Szene rechts */
.plan-hero h1 { max-width: 520px; }
@media (max-width: 1099px) {
.plan-hero { min-height: 92vh; align-items: flex-start; padding-top: 140px; }
.plan-hero h1 { max-width: 640px; }
.plan-hero .page-hero-fade { background: linear-gradient(180deg, #fbf8f3 0%, rgba(251, 248, 243, 0.9) 42%, rgba(251, 248, 243, 0.2) 56%, rgba(251, 248, 243, 0) 70%); }
}
@media (max-width: 760px) {
.plan-hero { padding-top: 120px; }
.plan-hero .page-hero-fade { background: linear-gradient(180deg, #fbf8f3 0%, rgba(251, 248, 243, 0.9) 42%, rgba(251, 248, 243, 0.2) 56%, rgba(251, 248, 243, 0) 70%); }
}
.page-hero h1 { font-size: clamp(2.1rem, 4vw, 3rem); margin: 16px 0 18px; }
.page-hero p { max-width: 560px; font-size: 1.05rem; }
/* Leistungen: service detail cards */
.service-detail {
display: grid;
grid-template-columns: 0.9fr 1.4fr;
gap: 50px;
padding: 60px 0;
border-bottom: 1px solid var(--border);
align-items: start;
}
.service-detail:last-child { border-bottom: none; }
.service-detail .num { font-family: 'Playfair Display', serif; font-size: 3.2rem; color: var(--gold-dim); line-height: 1; }
.service-detail h3 { font-size: 1.6rem; margin: 10px 0 14px; }
.service-list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.service-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.93rem; color: var(--text); }
.service-list .mark { color: var(--gold); flex-shrink: 0; margin-top: 2px; }
/* Kontakt page */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; }
.contact-card {
background: var(--bg-3);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 34px;
box-shadow: 0 2px 16px rgba(32, 28, 20, 0.04);
display: flex;
flex-direction: column;
gap: 22px;
}
.contact-method {
display: flex;
align-items: center;
gap: 16px;
padding: 16px 18px;
border-radius: 12px;
border: 1px solid var(--border);
transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
}
.contact-method:hover { border-color: var(--gold-dim); transform: translateX(4px); background: rgba(184,134,58,0.06); }
.contact-method .icon-wrap {
width: 44px; height: 44px;
border-radius: 50%;
background: rgba(184,134,58,0.14);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.contact-method .icon-wrap svg { width: 20px; height: 20px; stroke: var(--gold); }
.contact-method .label { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.contact-method .value { font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.steps-list { display: flex; flex-direction: column; gap: 26px; }
.steps-list .step { display: flex; gap: 18px; }
.steps-list .step .dot {
width: 32px; height: 32px; border-radius: 50%;
border: 1px solid var(--gold-dim);
background: var(--bg-3);
display: flex; align-items: center; justify-content: center;
font-family: 'Playfair Display', serif; font-size: 0.9rem; color: var(--gold);
flex-shrink: 0;
}
.steps-list .step h3 { font-size: 1rem; margin-bottom: 6px; }
.steps-list .step p { font-size: 0.9rem; margin-bottom: 0; }
/* ---------- Rechtstexte (Impressum / Datenschutz / AGB) ---------- */
.legal-content { max-width: 760px; }
.legal-content h2 { font-size: 1.4rem; margin: 46px 0 14px; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 { font-size: 1.05rem; margin: 26px 0 10px; }
.legal-content p, .legal-content li { color: var(--text-muted); font-size: 0.96rem; }
.legal-content ul { padding-left: 20px; margin: 0 0 1em; }
.legal-content li { margin-bottom: 6px; }
.legal-content a.inline-link { color: var(--gold); text-decoration: underline; }
.legal-content strong { color: var(--text); }
.placeholder-field {
display: inline-block;
background: rgba(217, 112, 79, 0.14);
border: 1px dashed rgba(217, 112, 79, 0.5);
color: #a13a2a;
padding: 1px 8px;
border-radius: 6px;
font-style: normal;
font-weight: 600;
font-size: 0.9em;
}
.legal-callout {
border: 1px solid rgba(217, 112, 79, 0.4);
background: rgba(217, 112, 79, 0.08);
border-radius: var(--radius);
padding: 22px 26px;
margin-bottom: 50px;
}
.legal-callout p { color: #7a3323; margin-bottom: 0; font-size: 0.92rem; }
.legal-callout strong { color: #7a3323; }
/* Responsive */
@media (max-width: 980px) {
.nav-links { display: none; }
/* Kein Weichzeichner hinter der Kopfzeile am Handy: ueber laufenden Videos muss er sonst jedes Bild neu
rechnen (12.10.2026). Dafuer ein fast deckender Hintergrund, optisch kaum ein Unterschied. */
.site-header.is-scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(251, 248, 243, 0.97); }
/* Telefon in der Kopfzeile bleibt am Handy als runder Knopf mit Symbol (Persona-Durchgang 11.10.2026: Nummer fehlte oben) */
.nav-cta .btn-ghost { display: inline-flex; width: 40px; height: 40px; padding: 0; gap: 0; justify-content: center; align-items: center; border-radius: 50%; font-size: 0; line-height: 0; }
.nav-cta .btn-ghost svg { margin: 0; flex: 0 0 auto; }
.nav-cta .btn-ghost svg { width: 17px; height: 17px; }
.nav-cta { gap: 10px; }
.menu-toggle { display: flex; }
/* Kontaktseite am Handy (Tim, 11.10.2026): erst Nummer und Mail, dann Calendly, dann Formular, dann "Und dann?".
Die linke Spalte loest sich dafuer auf (display: contents), ihre Kaesten werden einzeln sortiert. */
.contact-grid { gap: 28px; }
.contact-grid > div:first-child { display: contents; }
.contact-grid > div:first-child > * { min-width: 0; }
.contact-grid > div:first-child > .contact-card:not(.kalender-karte) { order: 1; }
.contact-grid > div:first-child > .kalender-karte { order: 2; margin-top: 0 !important; }
.contact-grid > #formular { order: 3; }
.contact-grid > div:first-child > div:last-child { order: 4; margin-top: 12px !important; }
.pillar-grid, .testi-grid, .pricing-grid { grid-template-columns: 1fr; }
.process::after { display: none; } /* Linie durch die Kreise nur, wenn sie nebeneinander stehen (Tim, 11.10.2026) */
.process { grid-template-columns: 1fr 1fr; gap: 40px 0; }
.process::before { display: none; }
.footer-grid { grid-template-columns: 1fr; gap: 30px; }
.service-detail, .contact-grid { grid-template-columns: 1fr; }
.service-list { grid-template-columns: 1fr; }
.bts-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
/* Abschnitte am Handy enger, 110 px Luft oben und unten machten die Startseite 14.600 px lang (11.10.2026) */
section { padding: 64px 0; }
.video-bereich.video-ausblenden { padding-bottom: 110px; }
.section-head { margin-bottom: 36px; }
.nav-cta .btn-primary.btn-sm { padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 620px) {
.process { grid-template-columns: 1fr; }
.cta-banner { padding: 44px 28px; }
.hero { padding-top: 110px; }
.bts-grid { grid-template-columns: 1fr 1fr; gap: 12px; } /* Einblick 2 x 2 (Tim, 11.10.2026) */
.bts-caption { font-size: 0.72rem; }
.pricing-custom { flex-direction: column; align-items: flex-start; }
/* Vergleich "Ohne Struktur / Mit MK" bleibt nebeneinander, dafuer kompakter */
.compare-grid { gap: 10px; }
.compare-card { padding: 18px 13px; }
.compare-card h3 { font-size: 0.98rem; margin-bottom: 12px; }
.compare-card ul { gap: 9px; }
.compare-card li { font-size: 0.8rem; gap: 6px; line-height: 1.4; }
}
/* ---------- Form ---------- */
.form-card {
background: var(--bg-3);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 38px;
box-shadow: 0 2px 16px rgba(32, 28, 20, 0.04);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { margin-bottom: 20px; display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 0.82rem; color: var(--text-muted); letter-spacing: 0.02em; }
.field label .req { color: var(--gold); }
.field input,
.field select,
.field textarea {
background: rgba(32, 28, 20, 0.035);
border: 1px solid var(--border);
border-radius: 10px;
padding: 13px 15px;
color: var(--text);
font-family: inherit;
font-size: 0.95rem;
transition: border-color 0.25s ease, background 0.25s ease;
width: 100%;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
outline: none;
border-color: var(--gold);
background: rgba(184, 134, 58, 0.06);
}
.field select {
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 16px;
padding-right: 40px;
}
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea { border-color: #d9704f; }
.field-hint { font-size: 0.78rem; color: var(--text-muted); }
.field-toggle {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.4s ease;
margin-bottom: 0;
}
.field-toggle.is-shown { max-height: 140px; opacity: 1; margin-bottom: 20px; }
.honeypot-field { position: absolute; left: -9999px; opacity: 0; height: 0; }
.form-submit {
width: 100%;
justify-content: center;
margin-top: 4px;
position: relative;
}
.form-submit .spinner {
width: 16px; height: 16px;
border-radius: 50%;
border: 2px solid rgba(255,255,255,0.4);
border-top-color: #ffffff;
display: none;
animation: spin 0.7s linear infinite;
}
.form-submit.is-loading .spinner { display: inline-block; }
.form-submit.is-loading .btn-label { opacity: 0.75; }
@keyframes spin { to { transform: rotate(360deg); } }
.form-message {
margin-top: 18px;
padding: 14px 18px;
border-radius: 10px;
font-size: 0.9rem;
display: none;
align-items: flex-start;
gap: 10px;
}
.form-message.is-visible { display: flex; }
.form-message.success {
background: rgba(58, 140, 74, 0.1);
border: 1px solid rgba(58, 140, 74, 0.35);
color: #276b34;
}
.form-message.error {
background: rgba(217, 112, 79, 0.1);
border: 1px solid rgba(217, 112, 79, 0.4);
color: #a13a2a;
}
.form-message a { text-decoration: underline; }
.privacy-note { font-size: 0.78rem; color: var(--text-muted); margin-top: 14px; }
@media (max-width: 620px) {
.form-row { grid-template-columns: 1fr; }
.form-card { padding: 26px; }
/* Kontaktkarten: 34 px Innenabstand plus nicht umbrechende Mailadresse ergaben 360 px Breite (11.10.2026) */
.contact-grid { grid-template-columns: minmax(0, 1fr); }
.contact-grid > * { min-width: 0; }
.contact-card { padding: 24px 20px; }
.contact-method span { min-width: 0; overflow-wrap: anywhere; }
}
/* FAQ */
.faq-list { max-width: 760px; display: flex; flex-direction: column; gap: 14px; }
.faq-item {
background: var(--bg-3);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 0 26px;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.faq-item[open] { border-color: var(--gold-dim); box-shadow: var(--shadow); }
.faq-item summary {
list-style: none;
cursor: pointer;
padding: 20px 0;
display: flex; align-items: center; justify-content: space-between; gap: 16px;
font-family: 'Playfair Display', serif; font-size: 1.06rem; color: var(--ink); font-weight: 600;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: "+";
flex-shrink: 0;
width: 28px; height: 28px; border-radius: 50%;
border: 1px solid var(--gold-dim);
display: flex; align-items: center; justify-content: center;
font-size: 1.2rem; color: var(--gold); font-family: 'Inter', sans-serif; font-weight: 400;
}
.faq-item[open] summary::after { content: "–"; }
.faq-item .faq-answer { padding: 0 0 22px; font-size: 0.95rem; color: var(--text-muted); }
.faq-item .faq-answer strong { color: var(--text); }
/* Kennenlernen-Kasten am Ende der Startseite, ersetzt den Newsletter (10.10.2026) */
.kennenlern-card {
display: grid;
grid-template-columns: 1.3fr 0.7fr;
gap: 48px;
align-items: center;
background: var(--bg-3);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 46px;
box-shadow: 0 2px 16px rgba(32, 28, 20, 0.04);
}
.kennenlern-card h2 { margin-top: 10px; }
.kennenlern-punkte { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.kennenlern-punkte li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.94rem; color: var(--text); }
.kennenlern-punkte .mark { color: var(--gold); flex-shrink: 0; margin-top: 2px; }
.kennenlern-wege { display: flex; flex-direction: column; gap: 12px; }
.kennenlern-wege .btn { width: 100%; justify-content: center; }
.kennenlern-hinweis { margin: 6px 0 0; font-size: 0.9rem; color: var(--text-muted); text-align: center; }
@media (max-width: 980px) {
.kennenlern-card { grid-template-columns: 1fr; padding: 34px 28px; gap: 30px; }
}
/* Newsletter / Lead-Magnet */
.newsletter-card {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 48px;
align-items: center;
background: var(--bg-3);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 46px;
box-shadow: 0 2px 16px rgba(32, 28, 20, 0.04);
}
.newsletter-perks { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.newsletter-perks li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.94rem; color: var(--text); }
.newsletter-perks .mark { color: var(--gold); flex-shrink: 0; margin-top: 2px; }
.newsletter-form { display: flex; flex-direction: column; }
.newsletter-submit { width: 100%; justify-content: center; }
@media (max-width: 980px) {
.newsletter-card { grid-template-columns: 1fr; padding: 34px 28px; gap: 30px; }
}
/* Cookie-Hinweis */
.cookie-banner {
position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 200;
max-width: 640px; margin: 0 auto;
background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--radius);
box-shadow: var(--shadow); padding: 24px 28px;
display: flex; flex-direction: column; gap: 16px;
transform: translateY(160%);
transition: transform 0.4s ease;
}
.cookie-banner.is-visible { transform: translateY(0); }
.cookie-banner p { font-size: 0.86rem; margin: 0; }
.cookie-banner .cookie-actions { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 620px) { .cookie-banner { left: 12px; right: 12px; bottom: 12px; padding: 20px; } }
/* Mobile nav panel — bewusst dunkel als Vollbild-Overlay */
.mobile-nav {
position: fixed; inset: 0;
background: var(--dark);
z-index: 99;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 30px;
transform: translateY(-100%);
transition: transform 0.4s ease;
}
.mobile-nav.is-open { transform: translateY(0); }
.mobile-nav a { font-family: 'Playfair Display', serif; font-size: 1.6rem; color: var(--cream); }
.mobile-nav a:hover { color: var(--gold-light); }
/* Telefon und WhatsApp im Mobilmenue (11.10.2026) */
.mobile-nav-kontakt { display: flex; gap: 12px; margin-top: 4px; }
.mobile-nav .mobile-nav-kontakt a { font-family: 'Inter', sans-serif; font-size: 0.95rem; font-weight: 600; color: var(--cream); border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; padding: 10px 18px; display: inline-flex; align-items: center; gap: 8px; }
.mobile-nav .mobile-nav-kontakt a svg { width: 16px; height: 16px; stroke: var(--gold-light); }
/* ---------- Vertrauensband unter dem Hero ---------- */
/* Vorbild: Logobalken bei exec-design.de. Dort dunkel, hier hell, weil die
MK-Optik hell ist (siehe Brand Kit, keine dunklen Grundflaechen ausser
CTA-Banner, Footer und mobilem Menue).
Die Kaesten sind Platzhalter aus Text, bis die echten Logodateien samt
Nutzungserlaubnis vorliegen. Dann ersetzt je ein ![]()
den Inhalt, das
Raster bleibt unveraendert. */
.vertrauensband { padding: 54px 0 58px; }
/* Dunklere Textfarbe als sonst ueblich: die Zeile liegt ueber der laufenden
Bildfolge, --text-muted bricht dort im Kontrast ein (gleiche Lehre wie am
14.09. bei den Abschnitts-Einleitungen). */
.vertrauen-zeile {
text-align: center;
font-size: 0.95rem;
color: var(--text);
margin: 0 0 30px;
}
.vertrauen-reihe {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
gap: 16px;
}
.vertrauen-marke {
/* 210 statt 230: der Container ist innen 915 px breit, vier Karten plus drei
Luecken passen damit in EINE Reihe, sonst bricht die vierte allein um. */
flex: 0 1 210px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
text-align: center;
padding: 20px 22px;
border: 1px solid var(--border);
border-radius: var(--radius);
/* Voll deckend, nicht durchscheinend: die Karten liegen ueber dem Scroll-Film,
und ein Vertrauensband muss bei jedem Filmbild sofort lesbar sein. */
background: #ffffff;
box-shadow: 0 2px 14px rgba(32, 28, 20, 0.05);
}
.vertrauen-name {
font-family: 'Playfair Display', Georgia, serif;
font-size: 1.02rem;
color: var(--ink);
letter-spacing: 0.01em;
}
.vertrauen-name strong { color: var(--gold); font-weight: 700; }
.vertrauen-zusatz {
font-size: 0.74rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
}
.vertrauensband .draft-flag { display: block; width: fit-content; margin: 26px auto 0; }
@media (max-width: 620px) {
.vertrauen-marke { flex: 1 1 100%; }
}
/* Symbole in den Vertrauenskarten. Strichstil wie die uebrigen Icons der Seite
(24er Raster, stroke-width 1.6), Gold als Linienfarbe, darueber ein heller
Goldkreis als Flaeche. Sie ersetzen KEIN Logo, sie stehen nur dafuer, dass
die Karte nicht reiner Text ist, solange die echten Logodateien fehlen. */
.vertrauen-icon {
width: 42px; height: 42px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
margin-bottom: 4px;
background: linear-gradient(140deg, rgba(184,134,58,0.16), rgba(184,134,58,0.05));
}
/* Dunkel wie die Logos daneben, damit die vier Karten eine Einheit sind.
Der goldene Kreis darunter bleibt als Markenakzent erhalten. */
.vertrauen-icon svg { width: 21px; height: 21px; stroke: #1A1A1A; }
/* Echte Logodateien in den ersten beiden Vertrauenskarten, seit 03.10.2026.
Quellen: willkommen.saarland (offizielle Datei des Portals) und
saarland.ihk.de (eingebettetes Logo der Kammer-Website).
Seit 07.10.2026 einfarbig in Graustufe (#1A1A1A, helle Flaeche #D9D9D9)
statt in den Originalfarben, damit das Band eine Einheit bildet.
WARUM NICHT GOLD: Die Nutzungsvereinbarung der BSA-Akademie erlaubt nur den
Originalzustand, "einzige Ausnahme ist eine Nutzung in Schwarz/Weiss". Fuer
IHK-Logos gilt sinngemaess dasselbe. Eine Goldfassung war am 07.10.2026 kurz
gebaut und auf dieser Grundlage wieder verworfen, Entscheidung von Tim.
Deshalb neutrale Graustufe und nicht die getoente Tinte der Seite
(#201C14), damit es zweifelsfrei unter die erlaubte Ausnahme faellt.
Form und Groessenverhaeltnisse unveraendert, Originaldateien liegen daneben.
Details und die offenen Punkte in CLAUDE.md, Abschnitt Logorechte.
Die Hoehen sind bewusst verschieden: das Saarland-Zeichen ist fast quadratisch
(98x78), das IHK-Logo breit und flach (260x69). Gleiche Hoehe wuerde das eine
winzig und das andere riesig wirken lassen, deshalb optisch ausgeglichen. */
.vertrauen-logo { width: auto; max-width: 100%; display: block; margin-bottom: 4px; }
.vertrauen-logo.logo-hoch { height: 52px; }
.vertrauen-logo.logo-breit { height: 36px; } /* 30 war neben der Saarland-Marke zu klein */
/* Seit 07.10.2026 auch in den hinteren beiden Karten echte Logos statt der
gezeichneten Zeichen. Hoehen so gewaehlt, dass alle vier optisch gleich
schwer wirken: das BSA-Logo ist mit 550 x 130 sehr breit, die IHK-Dachmarke
mit 200 x 100 fast quadratisch. */
/* BSA so breit wie die Karte zulaesst: die Nutzungsvereinbarung nennt 60 mm
Mindestbreite (Print), hier sind bei 210 px Kartenbreite rund 49 mm
erreichbar. Punkt steht in CLAUDE.md, muss bei der Freigabe mit. */
.vertrauen-logo.logo-bsa { width: 100%; max-width: 186px; height: auto; }
.vertrauen-logo.logo-ihk { height: 46px; }
/* Schutzzone: die Vereinbarung verlangt 5 mm rundum, das sind rund 19 px.
Der Standardabstand von 4 px haette den Zusatztext zu nah herangeholt. */
.vertrauen-logo.logo-bsa, .vertrauen-link { margin-bottom: 19px; }
/* Breite 100 Prozent, sonst schrumpft der Link in der Flex-Spalte auf die
Inhaltsbreite und das Bild darin kann nicht wachsen. */
.vertrauen-link { display: block; width: 100%; margin-bottom: 4px; transition: opacity 0.25s ease; }
.vertrauen-link:hover { opacity: 0.68; }
/* Karten als Links, Logo in Originalfarbe beim Ueberfahren (Tim, 14.10.2026). Das Farblogo liegt deckungsgleich ueber
der Graustufenfassung und blendet bei Maus oder Tastaturfokus ein; ohne Ueberfahren bleibt das Band einfarbig
(Entscheidung 07.10.2026). Zulaessig nach der BSA-Vereinbarung: Original oder Schwarz/Weiss, beides unveraendert.
Die ganze Karte verlinkt, damit ist auch die BSA-Pflichtverlinkung erfuellt; der Einzellink .vertrauen-link
wird nicht mehr verwendet. */
a.vertrauen-marke { color: inherit; text-decoration: none; cursor: pointer; transition: border-color 0.3s ease, box-shadow 0.3s ease; }
a.vertrauen-marke:hover, a.vertrauen-marke:focus-visible { border-color: rgba(184, 134, 58, 0.45); box-shadow: 0 8px 26px rgba(32, 28, 20, 0.1); }
a.vertrauen-marke:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.vertrauen-logobox { position: relative; display: block; line-height: 0; margin-bottom: 4px; }
.vertrauen-logobox .vertrauen-logo { margin-bottom: 0; transition: opacity 0.35s ease; }
.vertrauen-logobox .logo-farbe { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; }
.vertrauen-logobox.logo-bsa { width: 100%; max-width: 186px; margin-bottom: 19px; }
a.vertrauen-marke:hover .logo-farbe, a.vertrauen-marke:focus-visible .logo-farbe { opacity: 1; }
a.vertrauen-marke:hover .vertrauen-logo:not(.logo-farbe), a.vertrauen-marke:focus-visible .vertrauen-logo:not(.logo-farbe) { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .vertrauen-logobox .vertrauen-logo { transition: none; } }
/* Story-Seite (story.html): Mensch, Weg, Studio, Haltung */
.story-intro { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.story-bild { margin: 0; border-radius: 20px; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow); }
.story-bild img { width: 100%; height: 100%; display: block; object-fit: cover; }
.story-text h2 { margin: 8px 0 18px; }
.story-text p { margin-bottom: 16px; }
.story-zitat {
margin: 28px 0 0; padding: 22px 26px;
border-left: 3px solid var(--gold);
background: var(--bg-3); border-radius: 0 var(--radius) var(--radius) 0;
font-family: 'Playfair Display', serif; font-size: 1.35rem; color: var(--text); line-height: 1.35;
}
.story-zitat span { display: block; margin-top: 8px; font-family: 'Inter', sans-serif; font-size: 0.82rem; color: var(--text-muted); }
.story-stationen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.story-station { background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 26px; position: relative; }
.story-station-nr { font-family: 'Playfair Display', serif; font-size: 1.1rem; color: var(--gold); letter-spacing: 0.04em; display: block; margin-bottom: 10px; }
.story-station h3 { font-size: 1.05rem; margin-bottom: 10px; }
.story-station p { font-size: 0.92rem; margin: 0; }
.story-galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.story-galerie figure { margin: 0; }
.story-galerie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: var(--radius); border: 1px solid var(--border); }
.story-galerie figcaption { font-size: 0.84rem; color: var(--text-muted); margin-top: 10px; }
@media (max-width: 980px) {
.story-intro { grid-template-columns: 1fr; gap: 32px; }
.story-stationen, .story-galerie { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
.story-galerie { grid-template-columns: 1fr; }
/* Sieben Abschluesse zwei nebeneinander, einspaltig war zu viel zum Scrollen (Tim, 11.10.2026) */
.story-stationen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.story-station { padding: 16px 13px; }
.story-station:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 5px); } /* siebte Karte mittig wie bei den Plaketten */
.story-station-nr { font-size: 0.95rem; margin-bottom: 6px; }
.story-station h3 { font-size: 0.88rem; margin-bottom: 6px; hyphens: auto; overflow-wrap: anywhere; }
.story-station p { font-size: 0.78rem; line-height: 1.45; }
.story-zitat { font-size: 1.15rem; }
}
/* Story-Seitenkopf: Foto im Hintergrund, blendet sich beim Scrollen ein (script.js, storyHeroBild) */
.page-hero.story-hero { min-height: 62vh; min-height: 62svh; display: flex; align-items: flex-end; padding-bottom: 72px; background: #efe8da; border-bottom: 0; } /* 72vh bis 11.10.2026, dann wie Leistungen angehoben (Tim: "auf allen Seiten") */
/* Gleiche Textanordnung wie der Story-Kopf auch auf Kontakt (Tim, 11.10.2026: "nur Texte", Hintergrund bleibt) */
@media (max-width: 760px) { br.nur-desktop { display: none; } } /* Zeilenumbruch nur am Desktop (Tim, 11.10.2026) */
.page-hero.hero-unten { min-height: 62vh; min-height: 62svh; display: flex; align-items: flex-end; padding-bottom: 72px; } /* gleicher Wert wie story-hero */
/* Der Story-Kopf ist der Massstab (Tim, 11.10.2026): dort schrumpft der Textkasten auf 560 px Inhalt und steht
mittig, der Text beginnt also bei Fenstermitte minus 280 px. Kontakt und Leistungen werden genau dort verankert,
duerfen nach rechts aber breiter werden, weil ihre Ueberschriften laenger sind. */
.page-hero.hero-unten .hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; } /* ohne Breite ragte das Canvas am Handy 14 px ueber den Rand, gemessen 11.10.2026 */ /* lag als Flex-Kind im Fluss und schob den Text 110 px nach rechts */
@media (min-width: 901px) {
.page-hero.hero-unten > .container { margin: 0 0 0 calc(50% - 308px); width: auto; max-width: calc(50% + 258px); }
.buehne-ebene.buehne-hero { left: calc(50% - 308px); width: auto; max-width: calc(50% + 258px); }
}
@media (max-width: 760px) { .page-hero.hero-unten { min-height: 78vh; min-height: 78svh; } }
.story-hero-bild {
position: absolute; inset: 0; z-index: 0;
width: 100%; height: 100%; object-fit: cover; object-position: 62% 30%;
opacity: 1; transform: scale(1); /* verblasst beim Scrollen, siehe storyHeroBild() */
transition: opacity 0.25s linear, transform 0.25s linear;
will-change: opacity, transform;
}
.story-hero-schleier {
position: absolute; inset: 0; z-index: 1; pointer-events: none;
background:
linear-gradient(90deg, rgba(251,248,243,0.96) 0%, rgba(251,248,243,0.86) 34%, rgba(251,248,243,0.35) 58%, rgba(251,248,243,0) 78%),
linear-gradient(180deg, rgba(251,248,243,0.55) 0%, rgba(251,248,243,0) 30%, rgba(251,248,243,0) 70%, #fbf8f3 100%);
}
.page-hero.story-hero .container { position: relative; z-index: 2; }
@media (max-width: 760px) {
.page-hero.story-hero { min-height: 78vh; min-height: 78svh; }
.story-hero-bild { object-position: 58% 20%; }
.story-hero-schleier { background:
linear-gradient(180deg, rgba(251,248,243,0.4) 0%, rgba(251,248,243,0.2) 35%, rgba(251,248,243,0.82) 62%, #fbf8f3 100%); }
}
@media (prefers-reduced-motion: reduce) { .story-hero-bild { opacity: 0.85; transform: none; transition: none; } }
/* Newsletter: Einwilligung als Haken (Double-Opt-in), 09.10.2026 */
.einwilligung { display: flex; align-items: flex-start; gap: 10px; margin: 2px 0 18px; font-size: 0.86rem; color: var(--text); line-height: 1.5; cursor: pointer; }
.einwilligung input[type="checkbox"] { width: 18px; height: 18px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--gold); cursor: pointer; }
.einwilligung .req { color: var(--gold); }
/* Cookie-Hinweis: Details zum Aufklappen, beide Knoepfe gleich gewichtet, 09.10.2026 */
.cookie-details { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 10px 0; }
.cookie-details summary { cursor: pointer; font-size: 0.84rem; font-weight: 600; color: var(--gold); list-style: none; }
.cookie-details summary::-webkit-details-marker { display: none; }
.cookie-details summary::before { content: "+ "; }
.cookie-details[open] summary::before { content: "– "; }
.cookie-details-inhalt { margin-top: 10px; max-height: 38vh; overflow-y: auto; }
.cookie-gruppe { display: flex; justify-content: space-between; gap: 10px; font-size: 0.82rem !important; margin: 10px 0 4px !important; color: var(--text) !important; }
.cookie-gruppe span { color: var(--text-muted); font-size: 0.76rem; }
.cookie-details dl { margin: 0; font-size: 0.8rem; }
.cookie-details dt { font-weight: 600; color: var(--ink); margin-top: 6px; }
.cookie-details dd { margin: 2px 0 0; color: var(--text-muted); }
.cookie-links { font-size: 0.78rem !important; color: var(--text-muted); }
/* Calendly auf der Kontaktseite, 09.10.2026 */
.kalender-knoepfe { display: flex; gap: 12px; flex-wrap: wrap; }
.kalender-hinweis { font-size: 0.8rem; color: var(--text-muted); margin: 0; }
.kalender-einbettung.is-geladen { margin-top: 6px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: #fff; }
.kalender-einbettung iframe { display: block; width: 100%; height: 720px; border: 0; }
@media (max-width: 620px) { .kalender-einbettung iframe { height: 900px; } }
/* Contact Form 7 (WordPress-Fassung), gleiche Optik wie das statische Formular */
.wpcf7-form-control-wrap { display: block; }
.wpcf7-form .honeypot-field, .wpcf7-form .wpcf7-form-control-wrap[data-name="webseite"] { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.wpcf7-not-valid-tip { display: block; margin-top: 6px; font-size: 0.8rem; color: #a13a2a; }
.wpcf7-form .wpcf7-not-valid { border-color: #d9704f !important; }
.wpcf7-response-output { margin: 18px 0 0 !important; padding: 14px 18px !important; border-radius: 10px; font-size: 0.9rem; border: 1px solid var(--border) !important; }
.wpcf7-form.sent .wpcf7-response-output { background: #e9f5ec; border-color: #7cbf8b !important; color: #1f5f2c; font-weight: 600; line-height: 1.5;
position: relative; padding-left: 48px !important; animation: bestaetigung-ein 0.45s ease-out both; transition: opacity 0.6s ease, transform 0.6s ease; }
/* Haekchen vor der Erfolgsmeldung (12.10.2026) */
.wpcf7-form.sent .wpcf7-response-output::before { content: ""; position: absolute; left: 16px; top: 15px; width: 20px; height: 20px; border-radius: 50%;
background: #2e8b47 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat; }
.wpcf7-form.sent .wpcf7-response-output.ausgeblendet { opacity: 0; transform: translateY(-6px); }
/* bewusst ohne opacity: laeuft die Animation einmal nicht (Hintergrund-Tab), bleibt die Meldung trotzdem sichtbar */
@keyframes bestaetigung-ein { from { transform: translateY(8px); box-shadow: 0 0 0 7px rgba(46, 139, 71, 0.25); } to { transform: none; box-shadow: 0 0 0 0 rgba(46, 139, 71, 0); } }
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output { background: rgba(217, 112, 79, 0.1); border-color: rgba(217, 112, 79, 0.4) !important; color: #a13a2a; }
.wpcf7-spinner { margin-left: 10px; }
.wpcf7-form input.form-submit { width: 100%; justify-content: center; }
/* Sprungziele nicht unter der klebenden Kopfzeile verstecken, wenn innerhalb der Seite gesprungen wird
(z. B. Knopf "Formular" auf der Kontaktseite), 12.10.2026 */
#formular, #kalender-slot, #kennenlernen, #bewertungen, #zusatzleistungen, section[id] { scroll-margin-top: 100px; }
/* Zwischenueberschriften der Kontaktseite (SEO, 12.10.2026), gleiche Optik wie die bisherige Formular-Ueberschrift */
.kontakt-h2 { font-size: 1.4rem; color: var(--ink); margin: 0 0 18px; }
.form-card .kontakt-h2 { margin-bottom: 6px; }
@media (max-width: 980px) { .contact-grid > div:first-child > .kontakt-h2 { order: 0; margin-bottom: -10px; } }
/* Pfeile am Bewertungskarussell (Tim, 12.10.2026): nur am Desktop, am Handy wird gewischt */
.wisch-huelle { position: relative; }
.wisch-pfeil { display: none; }
@media (min-width: 761px) {
.wisch-huelle { max-width: 880px; margin: 0 auto; padding: 0 60px; }
.wisch-huelle > .testi-grid.wisch-leiste[data-ueberall] { max-width: none; }
.wisch-pfeil { display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; transform: translateY(-50%);
width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--gold-dim); background: #fff; color: var(--gold);
box-shadow: 0 4px 16px rgba(32, 28, 20, 0.08); cursor: pointer; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; z-index: 2; }
.wisch-pfeil:hover { background: var(--gold); color: #fff; }
.wisch-pfeil:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.wisch-pfeil-links { left: 0; }
.wisch-pfeil-rechts { right: 0; }
}
/* Kontaktweg Telefon oder E-Mail als zwei Auswahlflaechen (Tim, 12.10.2026). Deckt das statische Formular
und das Markup von Contact Form 7 ab (span.wpcf7-list-item > label > input + span). */
.kontaktweg-feld .feld-titel { display: block; font-size: 0.85rem; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.kontaktweg-wahl, .kontaktweg-wahl .wpcf7-radio { display: flex; gap: 10px; flex-wrap: wrap; }
.kontaktweg-wahl .wpcf7-list-item { margin: 0; }
.kontaktweg-wahl label { display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px; border: 1px solid var(--border); border-radius: 10px;
background: #fff; cursor: pointer; font-size: 0.95rem; color: var(--ink); transition: border-color 0.2s ease, background 0.2s ease; }
.kontaktweg-wahl label:hover { border-color: var(--gold-dim); }
.kontaktweg-wahl input[type="radio"] { accent-color: var(--gold); width: 17px; height: 17px; margin: 0; }
.kontaktweg-wahl label:has(input:checked) { border-color: var(--gold); background: rgba(184, 134, 58, 0.08); }
.kontaktweg-feld { margin-bottom: 18px; }
@media (max-width: 620px) { .kontaktweg-wahl label { flex: 1 1 0; justify-content: center; } }
/* Wunschzeitraum seit 12.10.2026 bei jedem Anliegen sichtbar, kein Klappbereich mehr */
.termin-feld { margin-bottom: 20px; }
.termin-feld .field { margin-bottom: 0; }
/* Ladesymbol von Contact Form 7 nur waehrend des Absendens (12.10.2026): es drehte sich unsichtbar pausenlos weiter,
der Formularbereich wurde dadurch staendig neu gezeichnet und ein offenes Auswahlmenue flackerte (Tim, Windows). */
.wpcf7 form:not(.submitting) .wpcf7-spinner { display: none; }
.wpcf7 form.submitting .wpcf7-spinner { display: inline-block; }
/* Social-Icons im Fuß, 15.10.2026: LinkedIn verlinkt, Instagram und Facebook ohne Funktion bis die Profile stehen */
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.social-icon { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(245, 241, 232, 0.25); color: var(--cream, #F5F1E8); transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease; }
.social-icon svg { width: 17px; height: 17px; }
a.social-icon:hover, a.social-icon:focus-visible { background: #B8863A; border-color: #B8863A; color: #fff; }
.social-inaktiv { opacity: 0.35; cursor: default; }