/* ============================================================
MFB UPLIFT — Senior Frontend Layer · 2026-06-25
Additiv (nach barth_mediadesign.css geladen). Verfeinert das
bestehende mf-*-System: Markenkohärenz, Tiefe, Detail, Icon-System,
Info-Boxen. Rollback: includeCSS-Zeile 'upliftStyles' entfernen.
============================================================ */
:root{
--u-green:#1a3c34; --u-green-d:#15332b; --u-green-dd:#0e211c; --u-green-m:#15463b; --u-green-l:#2d6b5f;
--u-gold:#c4a86b; --u-gold-l:#d8c290; --u-gold-soft:#f1e9d8; --u-gold-antique:#9a7b3f;
--u-cream:#f5f2ed; --u-cream-d:#ece6dc; --u-warm-white:#fbf8f2; --u-ink:#22302b; --u-muted:#5c6b66;
--u-line:rgba(26,60,52,.10); --u-line-strong:#afb5ac; --u-line-on-dark:rgba(216,194,143,.16);
--u-radius:16px; --u-band-overhang:90px;
--u-grad-green-depth:linear-gradient(160deg,#15332b 0%,#11271f 45%,#0e211c 100%);
--u-grad-gold-sheen:linear-gradient(105deg,#9a7b3f 0%,#c4a86b 38%,#e4d2a6 52%,#c4a86b 66%,#9a7b3f 100%);
--u-grad-card-light:linear-gradient(180deg,#fbf8f2 0%,#f5f2ed 100%);
--u-sh-sm:0 1px 2px rgba(15,41,34,.05), 0 3px 10px rgba(15,41,34,.05);
--u-sh-md:0 6px 18px rgba(15,41,34,.08), 0 18px 40px rgba(15,41,34,.07);
--u-sh-lg:0 10px 28px rgba(15,41,34,.12), 0 30px 70px rgba(15,41,34,.10);
--u-ease:cubic-bezier(.22,1,.36,1);
}
/* ── 1) MARKENKOHÄRENZ: dunkle Flächen Navy → British Racing Green ───────── */
.mf-stats-bar{ background:linear-gradient(135deg,var(--u-green) 0%,var(--u-green-d) 58%,var(--u-green-dd) 100%)!important; }
.mf-cta-section{ background:linear-gradient(150deg,var(--u-green) 0%,var(--u-green-d) 55%,var(--u-green-dd) 100%)!important; }
.mf-hero-umsetzung{ background:linear-gradient(150deg,var(--u-green) 0%,var(--u-green-d) 60%,var(--u-green-dd) 100%)!important; }
.mf-home-hero,.mf-page-hero,.frame-mischke-hero{ background-color:var(--u-green-d)!important; }
.mf-home-hero{ background:#13211c!important; } /* abgedunkeltes Grün statt Navy */
.mf-compare-table thead th{ background:var(--u-green-d)!important; }
.mf-compare-table thead th.highlight{ background:var(--u-green)!important; }
.mf-stats-bar__num,.mf-stat-num{ font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
/* grüne strong-Akzente auf dunklem Grund → Gold (Kontrast) */
.mf-cta-section h2 strong,.mf-hero-umsetzung h1 strong,.mf-stats-bar strong,
.mf-stat-num strong,[class*="hero"] h1 strong em{ color:var(--u-gold)!important; }
/* ── 2) TIEFE: mehrlagige, grün-getönte Schatten + sanftere Hover ─────────── */
.mf-intro-card,.mf-service-card,.mf-process-card,.mf-card-featured,.mf-compare-table,
.card,.mischke-card,.mf-pillars .mf-pillar,.mf-contact__card,.mf-fall-card,.mf-schwerpunkt-card{
box-shadow:var(--u-sh-sm)!important; transition:transform .4s var(--u-ease),box-shadow .4s var(--u-ease),border-color .3s var(--u-ease)!important;
}
.mf-intro-card:hover,.mf-service-card:hover,.mf-process-card:hover,.card:hover,
.mischke-card:hover,.mf-fall-card:hover,.mf-schwerpunkt-card:hover{
transform:translateY(-6px)!important; box-shadow:var(--u-sh-lg)!important; border-color:rgba(196,168,107,.45)!important;
}
/* ── 3) SIDE-STRIPE-BORDERS entfernen (Impeccable) → Top-Akzent/Tint ──────── */
.mf-alert{ border-left:none!important; border-radius:14px!important; }
.frame-bg-secondary blockquote,.bg-light blockquote{ border-left:none!important; padding-left:0!important; }
.step-card,.frame-step-cards .step-card{ border-left:none!important; border-top:3px solid var(--u-gold)!important; }
.mf-intro-card{ border-top:3px solid var(--u-green)!important; }
.mf-card-featured{ border-top:3px solid var(--u-gold)!important; }
/* ── 4) ICON-SYSTEM: Chips verfeinert, Gold-Hover, konsistent ─────────────── */
.mf-sc-icon,.mf-intro-card-icon,.mf-icon-chip{
background:linear-gradient(135deg,var(--u-cream) 0%,#fff 100%)!important;
border:1px solid var(--u-line); color:var(--u-green)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 2px 6px rgba(15,41,34,.06);
transition:background .35s var(--u-ease),color .35s var(--u-ease),transform .35s var(--u-ease);
}
.mf-service-card:hover .mf-sc-icon,.mf-intro-card:hover .mf-intro-card-icon{
background:linear-gradient(135deg,var(--u-green) 0%,var(--u-green-m) 100%)!important; color:var(--u-gold-l)!important; transform:rotate(-4deg) scale(1.05);
}
.mf-icon-chip{ width:48px;height:48px;border-radius:13px;display:inline-flex;align-items:center;justify-content:center;font-size:1.35rem; }
.mf-icon-chip--gold{ background:linear-gradient(135deg,var(--u-gold-soft),#fff)!important; color:#a8842f!important; }
/* ── 5) INFO-/CALLOUT-BOXEN (aktiviert, kein Side-Stripe) ─────────────────── */
.mf-alert,.mf-callout{
display:flex; gap:14px; align-items:flex-start;
background:var(--u-cream); border:1px solid var(--u-line); border-radius:14px;
padding:18px 20px; font-size:.95rem; color:var(--u-ink); line-height:1.65; margin:1.25rem 0;
}
.mf-callout::before,.mf-alert::before{
content:"\F431"; font-family:"bootstrap-icons"; font-size:1.15rem; line-height:1.4;
color:var(--u-green); flex:0 0 auto;
width:34px;height:34px;border-radius:9px;background:#fff;border:1px solid var(--u-line);
display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(15,41,34,.06);
}
.mf-callout--tipp{ background:var(--u-gold-soft); border-color:rgba(196,168,107,.35); }
.mf-callout--tipp::before{ content:"\F6F0"; color:#a8842f; border-color:rgba(196,168,107,.3); }
.mf-callout--wichtig{ background:#fbf3ef; border-color:rgba(176,90,60,.22); }
.mf-callout--wichtig::before{ content:"\F33A"; color:#b0563c; }
.mf-callout strong,.mf-alert strong{ color:var(--u-green); }
.mf-callout__title{ display:block; font-weight:700; color:var(--u-green); margin-bottom:2px; letter-spacing:.01em; }
/* ── 6) TYPOGRAFIE-DETAIL: Lead, Drop-Cap, Label-Haarlinie, Maße ──────────── */
.mf-section-lead,.mf-lead{ max-width:62ch; }
.mf-lead{ font-size:clamp(1.1rem,1.6vw,1.32rem); line-height:1.65; color:var(--u-ink); font-weight:400; }
.mf-lead--dropcap::first-letter{
font-family:'Cormorant Garamond',Georgia,serif; font-size:3.4em; line-height:.82; font-weight:600;
color:var(--u-green); float:left; margin:.06em .12em 0 0;
}
.mf-section-label{ display:inline-flex!important; align-items:center; gap:.6rem; color:var(--u-gold)!important; }
.mf-section-label::before{ content:""; width:26px; height:1px; background:var(--u-gold); display:inline-block; opacity:.8; }
/* Fließtext-Maß gegen Textwüste (zentrierte Lauftext-Absätze) */
.mf-section .container > p:not([class]),.frame-type-text .ce-bodytext p{ max-width:68ch; }
.text-center .mf-section-lead,.text-center.mf-lead{ margin-inline:auto; }
/* ── 7) ELEGANTE SECTION-DIVIDER ──────────────────────────────────────────── */
.mf-divider{ display:flex; align-items:center; justify-content:center; gap:14px; margin:0 auto; max-width:120px; padding:8px 0; }
.mf-divider::before,.mf-divider::after{ content:""; height:1px; flex:1; background:linear-gradient(90deg,transparent,var(--u-gold)); }
.mf-divider::after{ background:linear-gradient(90deg,var(--u-gold),transparent); }
.mf-divider i,.mf-divider span{ color:var(--u-gold); font-size:.8rem; }
/* ── 8) PULL-QUOTE-BAND verfeinern (weniger dominant, Gold-Quote) ─────────── */
.mf-image-break{ min-height:380px!important; }
.mf-image-break__overlay{ background:linear-gradient(160deg,rgba(9,27,22,.55) 0%,rgba(9,27,22,.30) 45%,rgba(9,27,22,.62) 100%)!important; }
.mf-image-break__content{ position:relative; }
.mf-image-break__content::before{
content:"\201C"; font-family:'Cormorant Garamond',Georgia,serif; font-size:5rem; line-height:.5;
color:var(--u-gold); opacity:.85; display:block; margin-bottom:.2rem;
}
.mf-image-break blockquote{ font-size:clamp(1.2rem,2.2vw,1.65rem)!important; }
.mf-image-break cite{ letter-spacing:.14em; font-size:.72rem!important; text-transform:uppercase; }
/* ── 9) BUTTONS differenzieren (Primär Gold-Hover, Ghost klar) ───────────── */
.btn-mf,.btn-mf-gold,.btn-primary{ letter-spacing:.01em; transition:transform .25s var(--u-ease),box-shadow .25s var(--u-ease),background .25s var(--u-ease)!important; }
.btn-mf-gold{ box-shadow:0 4px 14px rgba(196,168,107,.28); }
.btn-mf-gold:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(196,168,107,.40); }
.btn-mf-outline,.btn-mf-outline-light,.btn-outline-primary{ position:relative; }
.btn-mf-outline:hover,.btn-outline-primary:hover{ background:var(--u-green)!important; color:#fff!important; border-color:var(--u-green)!important; }
/* ── 10) STAT-BAND & STAT-CARDS verfeinert ───────────────────────────────── */
.mf-stats-bar{ position:relative; }
.mf-stats-bar .mf-stat-item:not(:last-child)::after{
content:""; position:absolute; top:50%; right:0; transform:translateY(-50%); height:42px; width:1px;
background:linear-gradient(transparent,rgba(196,168,107,.35),transparent);
}
.mf-stats-bar .mf-stat-item{ position:relative; }
.mf-stat-num,.mf-stats-bar__num{ background:linear-gradient(180deg,#fff,#e8e1d2); -webkit-background-clip:text; background-clip:text; }
.mf-stat-lbl,.mf-stats-bar__label{ letter-spacing:.08em; text-transform:uppercase; font-size:.72rem!important; }
/* ── 11) KEY-POINTS (Icon-Grid) + Checklist refined ──────────────────────── */
.mf-keypoints{ list-style:none; padding:0; margin:1.25rem 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; }
.mf-keypoints li{ display:flex; gap:13px; align-items:flex-start; padding:14px 16px; background:#fff; border:1px solid var(--u-line); border-radius:12px; box-shadow:var(--u-sh-sm); }
.mf-keypoints li i{ color:var(--u-gold); font-size:1.25rem; flex:0 0 auto; margin-top:1px; }
.mf-keypoints li strong{ display:block; color:var(--u-green); font-size:.98rem; }
.mf-checklist li i{ color:var(--u-gold)!important; }
/* ── 12) SEO-Schlusstext gestalterisch fassen (letzter Lauftext-Block) ────── */
.mf-section.mf-seo-region,.frame-mf-seo-section{ background:var(--u-cream); }
.mf-seo-region .container,.frame-mf-seo-section .ce-bodytext{
max-width:760px; margin-inline:auto; padding:26px 30px; background:#fff;
border:1px solid var(--u-line); border-radius:16px; box-shadow:var(--u-sh-sm);
font-size:.92rem; color:var(--u-muted);
}
/* ── 13) Hover-Link Underline-Grow (Detail) ──────────────────────────────── */
.mf-section-lead a,.ce-bodytext a:not(.btn){ background-image:linear-gradient(var(--u-gold),var(--u-gold)); background-size:0% 1.5px; background-repeat:no-repeat; background-position:0 100%; transition:background-size .3s var(--u-ease); padding-bottom:1px; }
.mf-section-lead a:hover,.ce-bodytext a:not(.btn):hover{ background-size:100% 1.5px; }
/* ── 14) Reduced Motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
.mf-intro-card,.mf-service-card,.mf-process-card,.card,.btn-mf-gold,.mf-sc-icon{ transition:none!important; }
.mf-intro-card:hover,.mf-service-card:hover,.card:hover{ transform:none!important; }
}
/* ── 15) KARTEN-GRIDS aufwerten: Editorial-Nummern, Gold-Akzent, Hover, Variation ── */
.card-group-element{ counter-reset:mfcard; }
.card-group-element-item{ position:relative; }
.card-group-element-item .card{
border:1px solid var(--u-line)!important; border-top:3px solid transparent!important;
background:#fff!important; height:100%;
transition:transform .4s var(--u-ease),box-shadow .4s var(--u-ease),border-color .35s var(--u-ease)!important;
}
.card-group-element-item .card .card-body{ padding:1.7rem 1.55rem!important; }
.card-group-element-item .card::before{
counter-increment:mfcard; content:counter(mfcard,decimal-leading-zero);
position:absolute; top:16px; right:18px; z-index:1;
font-family:'Cormorant Garamond',Georgia,serif; font-size:1.55rem; font-weight:600;
color:var(--u-gold); opacity:.5; line-height:1; pointer-events:none;
}
.card-group-element-item .card .card-title{
position:relative; padding:0 1.8rem .55rem 0; margin-bottom:.7rem;
font-size:1.3rem!important; font-weight:600!important; color:var(--u-green)!important;
}
.card-group-element-item .card .card-title::after{
content:""; position:absolute; left:0; bottom:0; width:26px; height:2px;
background:var(--u-gold); transition:width .4s var(--u-ease);
}
.card-group-element-item .card .card-body p,
.card-group-element-item .card .card-body li{ font-size:.92rem; line-height:1.62; color:var(--u-muted); }
.card-group-element-item .card:hover{
transform:translateY(-6px)!important; box-shadow:var(--u-sh-lg)!important; border-top-color:var(--u-gold)!important;
}
.card-group-element-item .card:hover::before{ opacity:.8; }
.card-group-element-item .card:hover .card-title::after{ width:52px; }
/* Sektions-Variation: Karten in Creme-Sektionen leicht abheben */
.frame-bg-secondary .card-group-element-item .card{ box-shadow:var(--u-sh-md)!important; }
/* Karten-Themen-Icon-Chip (per JS injiziert) */
.mf-card-ico{
display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:13px;
margin-bottom:1rem; background:linear-gradient(135deg,var(--u-cream) 0%,#fff 100%);
border:1px solid var(--u-line); box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 2px 6px rgba(15,41,34,.06);
transition:background .35s var(--u-ease),border-color .35s var(--u-ease),transform .35s var(--u-ease);
}
.mf-card-ico .bi{ font-size:1.4rem; color:var(--u-green); line-height:1; }
.card-group-element-item .card:hover .mf-card-ico{ background:linear-gradient(135deg,var(--u-green) 0%,var(--u-green-m) 100%); border-color:var(--u-green); transform:rotate(-4deg); }
.card-group-element-item .card:hover .mf-card-ico .bi{ color:var(--u-gold-l); }
/* Home/semantische Karten: Chip-Spacing + Hover spiegeln (JS injiziert .mf-card-ico als erstes Kind) */
.mf-schwerpunkt-card .mf-card-ico,.mf-mitnehmen-card .mf-card-ico,.mf-fall-card .mf-card-ico{ margin-bottom:1.1rem; }
.mf-schwerpunkt-card:hover .mf-card-ico,.mf-mitnehmen-card:hover .mf-card-ico,.mf-fall-card:hover .mf-card-ico{ background:linear-gradient(135deg,var(--u-green) 0%,var(--u-green-m) 100%); border-color:var(--u-green); transform:rotate(-4deg); }
.mf-schwerpunkt-card:hover .mf-card-ico .bi,.mf-mitnehmen-card:hover .mf-card-ico .bi,.mf-fall-card:hover .mf-card-ico .bi{ color:var(--u-gold-l); }
/* Buttons in Karten dezenter (kein zweiter lauter CTA je Karte) */
.card-group-element-item .card .btn,.card-group-element-item .card a.card-cta{
font-size:.82rem!important; padding:.4rem 0!important; background:transparent!important; border:none!important;
color:var(--u-green)!important; font-weight:600; display:inline-flex; align-items:center; gap:.4rem;
}
@media (max-width:575px){
.mf-image-break{ min-height:300px!important; }
.mf-keypoints{ grid-template-columns:1fr; }
.card-group-element-item .card::before{ font-size:1.3rem; top:14px; right:14px; }
}
/* ============================================================
WAVE 2 — Editorial Cream + Green/Gold (recherchiert, Judge-Synthese)
Pillars → Standout-Cards · Schwerpunkt → Image-Led-Cards · Parallax-Bänder
============================================================ */
/* ---- PILLARS: premium standout editorial cards (CSS-only, parent-scoped) ---- */
.mf-pillars .row{ align-items:stretch; }
.mf-pillars .mf-pillar{
position:relative;
display:flex!important; flex-direction:column!important; gap:0!important;
height:100%;
padding:2.4rem 2rem 1.6rem!important;
background:var(--u-grad-card-light)!important;
border:1px solid var(--u-line)!important; border-top:0!important;
border-radius:var(--u-radius)!important;
box-shadow:var(--u-sh-md)!important;
overflow:hidden; isolation:isolate;
transition:transform .45s var(--u-ease),box-shadow .45s var(--u-ease)!important;
}
.mf-pillars .mf-pillar::before{
content:""; position:absolute; top:0; left:50%;
width:44px; height:3px; transform:translateX(-50%);
background:var(--u-grad-gold-sheen); border-radius:0 0 3px 3px;
transition:width .5s var(--u-ease);
}
.mf-pillars .mf-pillar:hover{ transform:translateY(-6px)!important; box-shadow:var(--u-sh-lg)!important; }
.mf-pillars .mf-pillar:hover::before{ width:88px; }
.mf-pillars .mf-pillar__num{
font-family:'Cormorant Garamond',Georgia,serif!important;
font-size:3rem!important; font-weight:600!important; line-height:.9!important;
color:var(--u-green)!important;
min-width:0!important; padding:0 0 .7rem 0!important; margin-bottom:1.1rem; position:relative;
}
.mf-pillars .mf-pillar__num::after{ content:""; position:absolute; left:2px; bottom:0; width:38px; height:1px; background:var(--u-gold); }
.mf-pillars .mf-pillar__body{ gap:.55rem!important; flex:1 1 auto; }
.mf-pillars .mf-pillar__title{
font-family:'Cormorant Garamond',Georgia,serif;
font-size:1.5rem!important; font-weight:600!important; line-height:1.18!important; color:var(--u-green)!important;
}
.mf-pillars .mf-pillar__lead{ font-size:.98rem!important; line-height:1.62!important; color:var(--u-muted)!important; max-width:34ch; }
.mf-pillars .mf-pillar__arrow{
align-self:flex-start!important; margin-top:1.4rem;
font-size:1.15rem!important; color:var(--u-gold-antique)!important; opacity:.85;
transition:transform .35s var(--u-ease),color .35s var(--u-ease);
}
.mf-pillars .mf-pillar:hover .mf-pillar__arrow{ color:var(--u-gold)!important; transform:translateX(6px)!important; }
/* SIMPLE variant: .mf-leistungen-overview .mf-pillar = bare +
(Klarheit/Substanz/Ruhe) */
.mf-leistungen-overview .mf-pillar{
position:relative; display:flex; flex-direction:column; height:100%;
padding:2.4rem 2rem 2rem!important;
background:var(--u-grad-card-light)!important;
border:1px solid var(--u-line)!important; border-top:0!important;
border-radius:var(--u-radius)!important; box-shadow:var(--u-sh-md)!important;
overflow:hidden; isolation:isolate;
transition:transform .45s var(--u-ease),box-shadow .45s var(--u-ease)!important;
}
.mf-leistungen-overview .mf-pillar::before{
content:""; position:absolute; top:0; left:50%; width:44px; height:3px; transform:translateX(-50%);
background:var(--u-grad-gold-sheen); border-radius:0 0 3px 3px; transition:width .5s var(--u-ease);
}
.mf-leistungen-overview .mf-pillar:hover{ transform:translateY(-6px)!important; box-shadow:var(--u-sh-lg)!important; }
.mf-leistungen-overview .mf-pillar:hover::before{ width:88px; }
.mf-leistungen-overview .mf-pillar > h3{
position:relative; margin:0 0 .8rem; padding-bottom:.7rem;
font-family:'Cormorant Garamond',Georgia,serif; font-weight:600; font-size:1.5rem; line-height:1.18; color:var(--u-green)!important;
}
.mf-leistungen-overview .mf-pillar > h3::after{
content:""; position:absolute; left:0; bottom:0; width:30px; height:2px; background:var(--u-gold); transition:width .4s var(--u-ease);
}
.mf-leistungen-overview .mf-pillar:hover > h3::after{ width:58px; }
.mf-leistungen-overview .mf-pillar > p{ margin:0; font-size:.98rem; line-height:1.62; color:var(--u-muted)!important; }
/* ---- SCHWERPUNKT: image-led editorial cards (media = first child, server-side) ---- */
.mf-schwerpunkt-card{
position:relative; display:flex; flex-direction:column; height:100%;
background:var(--u-warm-white)!important;
border:1px solid var(--u-line)!important; border-top:3px solid var(--u-gold)!important;
border-radius:var(--u-radius)!important;
overflow:hidden; padding:0!important;
box-shadow:var(--u-sh-md)!important; isolation:isolate;
transition:transform .4s var(--u-ease),box-shadow .4s var(--u-ease),border-color .35s var(--u-ease)!important;
}
.mf-schwerpunkt-card:hover{ transform:translateY(-6px)!important; box-shadow:var(--u-sh-lg)!important; }
.mf-schwerpunkt-card .mf-card-media ~ .mf-card-ico{ display:none!important; }
.mf-card-media{ position:relative; width:100%; align-self:stretch; aspect-ratio:16/10; background:var(--u-cream); overflow:hidden; margin:0; }
.mf-card-media img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .6s var(--u-ease); }
.mf-schwerpunkt-card:hover .mf-card-media img{ transform:scale(1.04); }
.mf-card-media::after{
content:""; position:absolute; inset:0; pointer-events:none;
box-shadow:inset 0 -26px 34px -30px rgba(14,33,28,.5);
border-bottom:1px solid rgba(196,168,107,.55);
}
.mf-schwerpunkt-card > *:not(.mf-card-media){ padding-inline:2.35rem; }
.mf-schwerpunkt-card > h3{
position:relative; padding-top:2rem; margin:0 0 .95rem; padding-bottom:.75rem;
font-family:'Cormorant Garamond',Georgia,serif; font-weight:600; font-size:1.55rem; line-height:1.18; color:var(--u-green)!important;
}
.mf-schwerpunkt-card > h3::after{ content:""; position:absolute; left:2.35rem; bottom:0; width:30px; height:2px; background:var(--u-gold); transition:width .4s var(--u-ease); }
.mf-schwerpunkt-card:hover > h3::after{ width:58px; }
.mf-schwerpunkt-card .mf-card-lead{
font-family:'Cormorant Garamond',Georgia,serif; font-style:italic;
font-size:1.18rem; line-height:1.4; color:var(--u-green-m)!important; margin:0 0 .9rem;
}
.mf-schwerpunkt-card > p:not(.mf-card-lead){ font-size:.96rem; line-height:1.62; color:var(--u-muted)!important; margin:0 0 1.1rem; }
.mf-schwerpunkt-card .mf-check-list{ list-style:none; padding-block:0; margin:0 0 1.5rem; display:grid; gap:.55rem; } /* padding-inline kommt aus dem >*:not-Regel (2.35rem / mobil 1.5rem) */
.mf-schwerpunkt-card .mf-check-list li{ position:relative; padding-left:1.7rem; font-size:.92rem; line-height:1.5; color:var(--u-ink)!important; }
.mf-schwerpunkt-card .mf-check-list li::before{ content:"\F26E"; font-family:"bootstrap-icons"; position:absolute; left:0; top:.04em; color:var(--u-gold); font-size:.95rem; }
/* deutlicher Pill-Button + Stretched-Link (ganze Karte klickbar) */
.mf-schwerpunkt-card .btn-mf-outline{
position:static!important; /* damit der Stretched-::before an der KARTE ankert, nicht am Button */
margin-top:auto!important; align-self:flex-start; margin-bottom:2.15rem; margin-left:2.35rem;
background:transparent!important; border:1.5px solid var(--u-green)!important; border-radius:999px!important;
padding:.64rem 1.45rem!important;
color:var(--u-green)!important; font-weight:600; font-size:.86rem; letter-spacing:.02em;
display:inline-flex!important; align-items:center; gap:.5rem;
transition:background .35s var(--u-ease),color .35s var(--u-ease),border-color .35s var(--u-ease),box-shadow .35s var(--u-ease);
}
.mf-schwerpunkt-card .btn-mf-outline::before{ content:""; position:absolute; inset:0; z-index:3; } /* stretched link → ganze Karte klickbar */
.mf-schwerpunkt-card .btn-mf-outline::after{ content:"\F138"; font-family:"bootstrap-icons"; font-size:.9em; transition:transform .3s var(--u-ease); }
.mf-schwerpunkt-card:hover .btn-mf-outline{ background:var(--u-green)!important; color:var(--u-warm-white)!important; border-color:var(--u-green)!important; box-shadow:0 6px 16px rgba(15,41,34,.18); }
.mf-schwerpunkt-card:hover .btn-mf-outline::after{ transform:translateX(4px); }
/* ---- QUOTE BANDS: green/gold parallax (layer auto-erzeugt durch JS aus Inline-Bg) ---- */
.mf-image-break{
position:relative; overflow:hidden; isolation:isolate;
min-height:clamp(300px,40vh,420px)!important;
display:grid; place-items:center;
--u-band-overhang:90px;
background:var(--u-green-dd)!important;
}
.mf-image-break__bg{
position:absolute; left:0; right:0;
top:calc(var(--u-band-overhang) * -1); bottom:calc(var(--u-band-overhang) * -1);
background-size:cover; background-position:center; background-repeat:no-repeat;
transform:translate3d(0,0,0); backface-visibility:hidden; z-index:0;
}
.mf-image-break__overlay{
position:absolute; inset:0; z-index:1; pointer-events:none;
background:
linear-gradient(160deg,rgba(14,33,28,.58) 0%,rgba(21,51,43,.34) 45%,rgba(14,33,28,.66) 100%),
radial-gradient(120% 90% at 50% 50%,rgba(21,51,43,.18) 0%,rgba(14,33,28,.55) 100%)!important;
}
.mf-image-break__content{ position:relative; z-index:2; text-align:center; max-width:min(92%,1000px); margin:0 auto; padding:2.6rem 1.5rem!important; }
.mf-image-break__content::after{ content:""; display:block; width:56px; height:1px; margin:1.6rem auto 0; background:var(--u-grad-gold-sheen); }
.mf-image-break blockquote{
font-family:'Cormorant Garamond',Georgia,serif; font-weight:500; font-style:normal;
font-size:clamp(1.5rem,1rem + 1.9vw,2.5rem)!important; line-height:1.3; letter-spacing:.01em; text-wrap:balance;
color:var(--u-cream)!important; border:0; padding:0; margin:0;
}
.mf-image-break cite{
display:block; margin-top:1.1rem;
font-family:'Inter',system-ui,sans-serif; font-style:normal; font-weight:500;
font-size:.76rem!important; letter-spacing:.16em; text-transform:uppercase; color:var(--u-gold-l)!important;
}
@media (prefers-reduced-motion:reduce){
.mf-pillars .mf-pillar,.mf-leistungen-overview .mf-pillar,.mf-schwerpunkt-card,.mf-card-media img{ transition:none!important; }
.mf-pillars .mf-pillar:hover,.mf-leistungen-overview .mf-pillar:hover,.mf-schwerpunkt-card:hover{ transform:none!important; }
.mf-pillars .mf-pillar:hover::before,.mf-leistungen-overview .mf-pillar:hover::before{ width:44px; }
.mf-pillars .mf-pillar:hover .mf-pillar__arrow{ transform:none!important; }
.mf-schwerpunkt-card:hover .mf-card-media img{ transform:none!important; }
.mf-schwerpunkt-card:hover .btn-mf-outline::after{ transform:none; }
.mf-image-break__bg{ inset:0!important; top:0!important; bottom:0!important; transform:none!important; will-change:auto!important; }
}
@media (max-width:575px){
.mf-pillars .mf-pillar,.mf-leistungen-overview .mf-pillar{ padding:1.9rem 1.5rem 1.4rem!important; }
.mf-pillars .mf-pillar__num{ font-size:2.5rem!important; }
.mf-pillars .mf-pillar__title,.mf-leistungen-overview .mf-pillar > h3{ font-size:1.3rem!important; }
.mf-schwerpunkt-card > *:not(.mf-card-media){ padding-inline:1.5rem; }
.mf-schwerpunkt-card > h3::after{ left:1.5rem; }
.mf-schwerpunkt-card .btn-mf-outline{ margin-bottom:1.6rem; margin-left:1.5rem; }
.mf-image-break{ min-height:320px!important; }
}
/* ============================================================
LEISTUNGSTHEMEN („Wobei ich besonders oft unterstütze") —
raus aus full-width: 3-Spalten-Grid (3+2 zentriert) + Gold-Themen-Icon.
Markup: … (bereits Card-styled)
============================================================ */
.mf-pillars-list{
display:grid!important; grid-template-columns:repeat(6,1fr)!important;
gap:1.4rem!important; list-style:none!important; padding:0!important; margin:0!important;
}
.mf-pillars-item{ list-style:none!important; grid-column:span 2; display:flex; }
.mf-pillars-item::marker{ content:""; }
.mf-pillars .mf-pillar{ padding:2.05rem 1.85rem 1.7rem!important; width:100%; }
@media (min-width:992px){ /* 5 Items: untere Reihe (4+5) mittig */
.mf-pillars-item:nth-child(4){ grid-column:2 / span 2; }
.mf-pillars-item:nth-child(5){ grid-column:4 / span 2; }
}
@media (max-width:991px){ .mf-pillars-list{ grid-template-columns:repeat(2,1fr)!important; } .mf-pillars-item{ grid-column:span 1!important; } }
@media (max-width:575px){ .mf-pillars-list{ grid-template-columns:1fr!important; } .mf-pillars-item{ grid-column:span 1!important; } }
/* Gold-Themen-Icon top-right (per JS injiziert) */
.mf-pillar__ico{
position:absolute; top:1.7rem; right:1.7rem; z-index:2; line-height:1;
font-size:1.55rem; color:var(--u-gold); opacity:.92;
transition:transform .4s var(--u-ease),color .35s var(--u-ease);
}
.mf-pillars .mf-pillar:hover .mf-pillar__ico{ color:var(--u-gold-antique); transform:translateY(-2px) scale(1.06); }
/* Titel etwas Platz vom Icon lassen */
.mf-pillars .mf-pillar__title{ padding-right:2.2rem; }
/* ---- Image-led Leistungsthemen-Cards (Foto-Header; .mf-pillar--media) ---- */
.mf-pillars .mf-pillar--media{ padding:0!important; border-top:3px solid var(--u-gold)!important; }
.mf-pillars .mf-pillar--media::before{ display:none!important; } /* zentrale Gold-Haarlinie raus → Top-Border ersetzt sie */
.mf-pillar--media .mf-pillar__num{ display:none!important; } /* Foto ersetzt die Nummer */
.mf-pillar--media .mf-pillar__ico{ display:none!important; } /* Foto ersetzt das Themen-Icon */
.mf-pillar--media .mf-pillar__media{ position:relative; display:block; width:100%!important; align-self:stretch!important; aspect-ratio:16/10; overflow:hidden; background:var(--u-cream); margin:0; }
.mf-pillar--media .mf-pillar__media img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--u-ease); }
.mf-pillars .mf-pillar--media:hover .mf-pillar__media img{ transform:scale(1.04); }
.mf-pillar--media .mf-pillar__media::after{ content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 -26px 34px -30px rgba(14,33,28,.5); border-bottom:1px solid rgba(196,168,107,.55); }
.mf-pillar--media .mf-pillar__body{ padding:1.5rem 1.7rem .2rem!important; gap:.5rem!important; }
.mf-pillar--media .mf-pillar__title{ padding-right:0!important; position:relative; padding-bottom:.6rem; }
.mf-pillar--media .mf-pillar__title::after{ content:""; position:absolute; left:0; bottom:0; width:30px; height:2px; background:var(--u-gold); transition:width .4s var(--u-ease); }
.mf-pillars .mf-pillar--media:hover .mf-pillar__title::after{ width:58px; }
.mf-pillar--media .mf-pillar__arrow{ padding:0 1.7rem 1.5rem!important; margin-top:1.1rem!important; }
/* ============================================================
MITNEHMEN- & FALL-CARDS — Rahmen/Fassung (User: „fliegen im Raum" / „fehlt Padding")
============================================================ */
.mf-mitnehmen-card,.mf-fall-card{
position:relative; height:100%; display:flex; flex-direction:column;
background:var(--u-warm-white)!important;
border:1px solid var(--u-line)!important; border-top:3px solid var(--u-gold)!important;
border-radius:var(--u-radius)!important;
box-shadow:var(--u-sh-sm)!important;
transition:transform .4s var(--u-ease),box-shadow .4s var(--u-ease),border-color .35s var(--u-ease)!important;
}
.mf-mitnehmen-card{ padding:1.7rem 1.6rem 1.55rem!important; }
.mf-fall-card{ padding:1.9rem 1.75rem 1.7rem!important; }
.mf-mitnehmen-card:hover,.mf-fall-card:hover{ transform:translateY(-5px)!important; box-shadow:var(--u-sh-md)!important; }
/* Typografie */
.mf-mitnehmen-card h3,.mf-fall-card h3{
font-family:'Cormorant Garamond',Georgia,serif!important; font-weight:600; line-height:1.2; color:var(--u-green)!important; margin:0 0 .6rem;
}
.mf-mitnehmen-card h3{ font-size:1.3rem; }
.mf-fall-card h3{ font-size:1.4rem; }
.mf-mitnehmen-card p,.mf-fall-card p{ font-size:.93rem; line-height:1.6; color:var(--u-muted)!important; margin:0; }
.mf-mitnehmen-card .mf-card-ico{ margin-bottom:.95rem; }
/* Fall-Label als Gold-Eyebrow */
.mf-fall-label{
display:inline-block; align-self:flex-start; margin-bottom:.7rem;
font-family:'Inter',system-ui,sans-serif; font-size:.68rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
color:var(--u-gold-antique)!important;
}
.mf-fall-card h3{ flex:0 0 auto; }
/* ---- Heidelberg-Banner in der SEO-Schluss-Sektion (uid 8692) ---- */
.mf-heidelberg{ margin:.4rem 0 2rem; }
.mf-heidelberg img{
display:block; width:100%; height:auto;
border-radius:var(--u-radius); border:1px solid var(--u-line);
box-shadow:var(--u-sh-md);
}
.mf-heidelberg figcaption{
text-align:center; padding-top:.75rem;
font-family:'Inter',system-ui,sans-serif; font-weight:500;
font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
color:var(--u-gold-antique);
}
/* ---- Hero-Loop-Video (max. Kompatibilität; ersetzt das Hintergrund-Bild) ---- */
.mf-home-hero{ position:relative; }
.mf-home-hero video.mf-home-hero__video,
.mf-home-hero img.mf-home-hero__video{
position:absolute; inset:0; width:100%; height:100%;
object-fit:cover; object-position:center 28%; z-index:0;
background:var(--u-green-dd);
}
.mf-home-hero video.mf-home-hero__video{ pointer-events:none; }
@media (prefers-reduced-motion:reduce){
/* Bewegung reduziert → Standbild (JS pausiert zusätzlich, Poster bleibt sichtbar) */
.mf-home-hero video.mf-home-hero__video{ filter:none; }
}
/* ---- card_group-Karten mit Foto-Header (JS .has-media, z.B. /leistungen) ---- */
.card-group-element-item .card.has-media{ overflow:hidden; }
.card-group-element-item .card.has-media::before{ display:none!important; } /* Editorial-Nummer raus (Foto übernimmt) */
.card-group-element-item .card.has-media .mf-card-ico{ display:none!important; }
.card-group-element-item .card .mf-card-media{
position:relative; width:100%; aspect-ratio:16/10; overflow:hidden;
background:var(--u-cream); border-bottom:1px solid rgba(196,168,107,.5);
}
.card-group-element-item .card .mf-card-media img{
display:block; width:100%; height:100%; object-fit:cover; object-position:center center;
transition:transform .6s var(--u-ease);
}
.card-group-element-item .card.has-media:hover .mf-card-media img{ transform:scale(1.04); }
.card-group-element-item .card.has-media .card-body{ padding-top:1.4rem!important; }
/* ---- Hero: mehr vertikales Padding (site-weit, User-Wunsch) ---- */
.mf-hero-umsetzung{ padding-top:clamp(8.5rem,13vh,11.5rem)!important; padding-bottom:clamp(7rem,10vh,9rem)!important; }
/* ---- Section-Head (Eyebrow + H2 + Lead) — LINKSBÜNDIG mit Akzent (Varianz 8) ---- */
.mf-section-head{ margin-bottom:2.7rem; text-align:left; max-width:820px; }
.mf-section-head .mf-section-label{ margin-bottom:.9rem; justify-content:flex-start; }
.mf-section-head h2{ margin:0 0 1rem; }
.mf-section-head .mf-section-lead{ margin-inline:0; max-width:64ch; }
/* ---- SEO-Meta-Zeile (bundesweit/persönlich) ---- */
.mf-services-meta{ display:flex; flex-wrap:wrap; gap:.8rem 1.8rem; justify-content:center; align-items:center; margin:1.5rem 0 .5rem; font-size:.95rem; font-weight:500; color:var(--u-muted); }
.mf-services-meta i{ color:var(--u-gold); margin-right:.45rem; }
.frame-mf-seo-section .mf-keypoints li strong{ font-family:'Cormorant Garamond',Georgia,serif; font-size:1.12rem; }
/* ── Dezent-edle Scroll-Reveals (Taste-Skill: Motion ~4-5, gestaffelt) ──
Gate via html.mf-reveal-on (von JS gesetzt) → ohne JS bleibt alles sichtbar. */
@media (prefers-reduced-motion:no-preference){
html.mf-reveal-on .mf-reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--u-ease),transform .7s var(--u-ease); }
html.mf-reveal-on .mf-reveal.is-in{ opacity:1; transform:none; }
}
/* ---- Leistungen-Hero: Julia-Porträt statt Stat-Badge ---- */
.mf-hero-umsetzung .mf-hero-portrait{ margin:0; width:100%; max-width:430px; }
.mf-hero-umsetzung .mf-hero-portrait img{
display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:center 18%;
border-radius:calc(var(--u-radius) + 4px); border:1px solid var(--u-line-on-dark);
box-shadow:0 22px 60px rgba(0,0,0,.38);
}
/* ---- BENTO: Themen-Gruppe „Wobei ich Sie konkret unterstütze" (Varianz 8) ----
Statt 3-Spalten-Raster: Reihe 1 = 2 breite Tiles (50/50), Reihe 2 = 3 Tiles (33/33/33). */
@media (min-width:992px){
.frame-mf-specialized-services .card-group-element{ grid-template-columns:repeat(6,1fr)!important; }
.frame-mf-specialized-services .card-group-element-item{ grid-column:span 2; }
.frame-mf-specialized-services .card-group-element-item:nth-child(1),
.frame-mf-specialized-services .card-group-element-item:nth-child(2){ grid-column:span 3; } /* Reihe 1: 2 breite Tiles */
/* breite Tiles: Foto cinematischer (flacher) für mehr Aspekt-Varianz */
.frame-mf-specialized-services .card-group-element-item:nth-child(-n+2) .mf-card-media{ aspect-ratio:21/9; }
}
/* ---- Section-Padding-Fix: „Wenn Ihr Thema…" & gleichartige CTA-Text-Sektionen (Button klebt) ---- */
.frame-mf-individual-consultation{ padding-top:clamp(3rem,6vh,4.5rem); padding-bottom:clamp(3.5rem,7vh,5.5rem); }
.frame-mf-individual-consultation .btn-mf,.frame-mf-individual-consultation a[class*="btn"]{ margin-top:.4rem; }
/* ============================================================
MFB UPLIFT — WAVE 3 (Rollout, Art-Director-Playbook)
Additiv, nach mfb_uplift.css geladen. Rollback: includeCSS-Zeile
upliftWave3 in setup.typoscript entfernen.
Aktiv sofort: CTA-Padding-Fixes (existierende Klassen) + Hero-Portrait-Helper.
Bento-Scopes inert bis Scope-Klassen gesetzt werden (Tier C).
============================================================ */
/* ---- Hero-Portrait-Helper (Badge -> Foto-Figure im Hero) ---- */
.mf-hero-portrait{max-width:430px;width:100%;margin-inline:auto;}
.mf-hero-portrait img{width:100%;height:auto;display:block;border-radius:16px;
box-shadow:var(--u-sh-md,0 18px 48px rgba(26,60,52,.18));
border:1px solid rgba(196,168,107,.45);/* Gold-Hairline */}
.mf-hero-portrait figcaption{margin-top:.6rem;font-size:.82rem;letter-spacing:.02em;
color:var(--u-warm-white,#fbf8f2);opacity:.72;text-align:center;}
/* ================= PADDING-FIXES (Final-CTA, Stats-Bar) — aktiv ================= */
/* Final-CTA: Gold-Button soll nicht am Sektionsrand kleben — seitenuebergreifend */
.frame-mf-cta-final,.mf-cta-final{padding-block:clamp(3.5rem,6vw,6rem);}
.mf-cta-final .mf-cta-card{padding-block:clamp(2.5rem,5vw,4rem);}
.mf-cta-section{padding-block:clamp(3.5rem,7vw,6rem)!important;}
.mf-cta-section .mf-cta-trust-row{margin-top:2.4rem;}
.frame-mf-individual-consultation{padding-block:clamp(3.5rem,7vh,5.5rem);}
/* ---- Eyebrow-Hairline-Fix: Inline-color-Override im Hero neutralisieren ---- */
.mf-hero-umsetzung .mf-section-label[style]{color:var(--u-gold,#C4A86B)!important;}
/* ================= BENTO-FOUNDATION (inert bis Scope-Klasse gesetzt — Tier C) ================= */
.mf-bento .card_group{display:grid;grid-template-columns:1fr;gap:1.5rem;}
@media (min-width:992px){.mf-bento .card_group{grid-template-columns:repeat(6,1fr);grid-auto-rows:1fr;}}
.mf-themen .card_group,.frame-mf-themen .card_group{display:grid;grid-template-columns:1fr;gap:1.5rem;}
@media (min-width:992px){
.mf-themen .card_group,.frame-mf-themen .card_group{grid-template-columns:repeat(6,1fr);}
.mf-themen .card_group>*:nth-child(1),.mf-themen .card_group>*:nth-child(2){grid-column:span 3;}
.mf-themen .card_group>*:nth-child(n+3){grid-column:span 3;}
.mf-themen .card_group>*:nth-child(1) .mf-card-media,
.mf-themen .card_group>*:nth-child(2) .mf-card-media{aspect-ratio:21/9;}
}
@media (min-width:1200px){.mf-themen .card_group>*:nth-child(n+3){grid-column:span 2;}}
/* ============================================================
WAVE 3.1 — User-Feinschliff (2026-06-25)
============================================================ */
/* (1) Card-Body-Text generell ~25% größer (≈0.92rem/14.7px → 1.15rem/18.4px) */
.card-group-element .card-body p,
.card-group-element .card-body .card-text,
.card-group-element-item .card .card-body p{
font-size:1.2rem;
line-height:1.6;
}
/* (2) FAQ-Accordion: bold, Gold-Schrift auf British-Racing-Green */
.accordion{
--bs-accordion-btn-color:#ffffff;
--bs-accordion-btn-bg:#1A3C34;
--bs-accordion-active-color:#ffffff;
--bs-accordion-active-bg:#15332b;
--bs-accordion-border-color:rgba(196,168,107,.30);
--bs-accordion-btn-focus-border-color:rgba(196,168,107,.45);
--bs-accordion-btn-focus-box-shadow:0 0 0 .2rem rgba(196,168,107,.35);
}
.accordion .accordion-item .accordion-button{
background-color:var(--u-green,#1A3C34)!important;
color:#fff!important;
font-weight:700!important;
font-size:1.22rem;
line-height:1.35;
padding-left:1.5rem!important;
/* Cormorant Garamond endet bei 700 -> faux-bold für sichtbar fetteren Titel */
-webkit-text-stroke:.32px currentColor;
text-stroke:.32px currentColor;
}
.accordion .accordion-item .accordion-button:not(.collapsed){
background-color:var(--u-green-d,#15332b)!important;
color:#fff!important;
box-shadow:none;
}
.accordion .accordion-item .accordion-button:focus{
border-color:rgba(196,168,107,.45);
box-shadow:0 0 0 .2rem rgba(196,168,107,.35);
}
/* Chevron in Gold (überschreibt Bootstrap-Default-Icon, collapsed + aktiv) */
.accordion .accordion-item .accordion-button::after{
background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23C4A86B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5l6 6 6-6'/%3e%3c/svg%3e")!important;
}
/* FAQ-Antworttext: größer/lesbarer + Einzug links (Flucht mit Button) + Luft nach oben */
.accordion .accordion-item .accordion-body{
padding-left:1.5rem!important;
padding-right:1.5rem!important;
padding-top:1.25rem!important;
font-size:1.05rem;
line-height:1.7;
}
.accordion .accordion-item .accordion-body p{ font-size:1.05rem; line-height:1.7; }
/* ============================================================
WAVE 3.2 — Infokasten (.mf-infobox): hervorgehobener Beratungs-/Ansatz-Block
Gold-Akzent OBEN (kein Side-Stripe), 3 Punkte mit Icons. Additiv.
============================================================ */
.mf-infobox{
position:relative; overflow:hidden;
background:linear-gradient(160deg,#ffffff 0%, var(--u-cream,#f6f1e7) 100%);
border:1px solid rgba(196,168,107,.42);
border-radius:18px;
padding:clamp(1.5rem,3vw,2.4rem);
margin:1.6rem 0;
box-shadow:0 18px 44px rgba(26,60,52,.10);
}
.mf-infobox::before{ /* dezenter Gold-Akzent oben (full-width, kein Side-Stripe) */
content:""; position:absolute; left:0; right:0; top:0; height:3px;
background:linear-gradient(90deg,var(--u-gold,#C4A86B),rgba(196,168,107,.25));
}
.mf-infobox__lead{
font-size:clamp(1.05rem,1.5vw,1.22rem); line-height:1.6; color:var(--u-ink,#2c2c2c);
max-width:64ch; margin:.15rem 0 1.5rem;
}
.mf-infobox__lead strong{ color:var(--u-green,#1A3C34); }
.mf-infobox__points{
list-style:none; margin:0; padding:0;
display:grid; gap:1.15rem; grid-template-columns:1fr;
}
@media (min-width:840px){ .mf-infobox__points{ grid-template-columns:repeat(3,1fr); gap:1.5rem; } }
.mf-infobox__points li{ display:flex; gap:.85rem; align-items:flex-start; }
.mf-infobox__points li > i{
flex:0 0 auto; width:42px; height:42px; border-radius:11px;
display:flex; align-items:center; justify-content:center;
background:#fff; border:1px solid rgba(196,168,107,.4);
color:var(--u-gold,#C4A86B); font-size:1.25rem;
box-shadow:0 4px 12px rgba(26,60,52,.08);
}
.mf-infobox__points li strong{ display:block; color:var(--u-green,#1A3C34); font-size:1.04rem; margin-bottom:.22rem; font-weight:700; }
.mf-infobox__points li div{ font-size:.95rem; line-height:1.55; color:var(--u-ink,#3a3a3a); }
@media (min-width:840px){ .mf-infobox__points li{ flex-direction:column; gap:.55rem; } }
/* ============================================================
S1 Quick-Wins (Sprint 1, 2026-07-02) — Audit A#4/6/10/11/12 + 404
============================================================ */
:root{ --u-gold-text:#9a7b3f; }
/* A#6 — WCAG: Gold-Labels auf hellen Flaechen abdunkeln, auf dunklen Gold behalten */
.mf-section-label{ color:var(--u-gold-text) !important; font-weight:600; }
.mf-section-label::before{ background:var(--u-gold-text); }
.frame-bg-secondary .mf-section-label,
.mfv-formcta-side .mf-section-label{ color:var(--u-gold,#C4A86B) !important; }
.frame-bg-secondary .mf-section-label::before,
.mfv-formcta-side .mf-section-label::before{ background:var(--u-gold,#C4A86B); }
.mf-fall-label, .mf-heidelberg figcaption{ font-size:.8rem; font-weight:600; }
.mf-hero-portrait figcaption{ color:var(--u-gold-text); font-size:.82rem; font-weight:600; }
/* Formular-Step-Tabs: inaktive Tabs kontraststaerker */
.powermail_multistep_navigation .btn{ color:rgba(26,60,52,.78); }
/* A#10 — Trust-Pill-Haekchen: Alt-Palette #c8d99d -> Gold */
.mf-trust-pill i, .mf-trust-pill .bi-check-circle-fill,
.mf-contact__btn--primary i{ color:var(--u-gold,#C4A86B) !important; }
/* A#4 — Nav-Overflow bei 1440px: Abstaende straffen, externen Seminare-CTA erst ab 1550px zeigen */
@media (min-width:992px){
.navbar-nav .nav-link{ padding-left:.6rem; padding-right:.6rem; }
}
@media (min-width:992px) and (max-width:1549.98px){
.nav-seminare-btn{ display:none !important; }
}
/* A#12 — Mobile: fehlender Gutter der row-column-Raster */
@media (max-width:575.98px){
.row.row-column{ margin-left:0 !important; margin-right:0 !important; }
.row.row-column > .col,
.row.row-column > [class*="col-"]{ padding-left:20px !important; padding-right:20px !important; }
}
/* A#11 — SEO-Schlussbloecke: Lesebreite statt Volltextzeilen (.ce-bodytext existiert nicht) */
.frame-mf-seo-section p{ max-width:70ch; }
.frame-mf-seo-section h2, .frame-mf-seo-section h3{ max-width:30ch; }
/* Task 1.4 — 404-Seite */
.mf-404{ max-width:720px; margin:0 auto; padding:7rem 1.5rem 6rem; text-align:center; }
.mf-404 .mf-section-label{ justify-content:center; }
.mf-404 h1{ margin:0 0 1rem; }
.mf-404 p{ margin:0 0 1.4rem; }
.mf-404-links{ display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; justify-content:center; margin-bottom:2.2rem; }
.mf-404-links a{ color:var(--u-green,#1A3C34); text-decoration:underline; text-underline-offset:3px; }
/* === S2 Danke-Seite === */
.mf-danke{ text-align:left; max-width:640px; }
.mf-danke .mf-section-label{ justify-content:flex-start; }
.mf-danke h1{ margin-bottom:1.2rem; }
.mf-danke .mf-process-list{ margin:1.6rem 0 2rem; }
.mf-danke-more{ color:var(--u-ink-soft,#4A473E); }
/* === S2 A11y (Audit A#6-Rest, A#53, B13, B73) === */
.mfv-imgselect-fieldset{ border:0; padding:0; margin:0; min-width:0; }
legend.mfv-imgselect-legend{ float:none; width:auto; padding:0; margin-bottom:.6rem; font-size:inherit; line-height:inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
outline:2px solid var(--u-gold,#C4A86B); outline-offset:2px;
}
.mfv-chip, .powermail_multistep_navigation .btn{ min-height:44px; }
input[type=range]{ min-height:44px; }
/* === S4 Band-Mobil: Overhang 0 (Parallax statisch, voller bgpos-Spielraum) === */
@media (max-width:576px){ .mf-image-break{ --u-band-overhang:0px; } }
/* ============================================================
S4b — Content-Figuren (4.4) + Tablet-Feinschliff (B12)
============================================================ */
.mf-figure{ margin:2.6rem auto; max-width:940px; }
.mf-figure img{ display:block; width:100%; height:auto; border-radius:var(--u-radius,14px);
border-top:2px solid var(--u-gold,#C4A86B); box-shadow:0 18px 44px -22px rgba(16,42,34,.45); }
.mf-figure figcaption{ margin-top:.7rem; font-family:'Cormorant Garamond',Georgia,serif;
font-size:1.08rem; line-height:1.5; color:var(--u-ink-soft,#4A473E); max-width:60ch; }
.mf-figure__label{ display:block; font-family:inherit; font-size:.72rem; font-weight:600;
letter-spacing:.16em; text-transform:uppercase; color:var(--u-gold-text,#9a7b3f); margin-bottom:.25rem; }
@media (max-width:575px){ .mf-figure{ margin:1.8rem auto; } .mf-figure figcaption{ font-size:1rem; } }
/* ---- Tablet t820 (768–991px): zu enge Grids entzerren ---- */
@media (min-width:768px) and (max-width:991.98px){
/* 4-up-Grids (exakt col-md-3: Stat-Leisten/Infobox) → 2-up bei Tablet */
[class~="col-md-3"]:not(nav *):not(footer *){ flex:0 0 auto !important; width:50% !important; max-width:50% !important; }
/* verwaiste letzte Einzelkarte in 2er-Reihe zentrieren */
.card-group-element-columns-3 > .card-group-element-item:last-child:nth-child(odd),
.card-group-element-columns-4 > .card-group-element-item:last-child:nth-child(odd){ margin-inline:auto; }
/* Content-Figur etwas schmaler halten */
.mf-figure{ max-width:88%; }
}
/* Kapitalanlage: Legal-Hinweis */
.mf-legal-note{ max-width:70ch; margin:1.2rem auto 0; color:var(--u-ink-soft,#4A473E); font-style:italic; }
/* === Hero-CE Full-Bleed (html-CE in colPos 0 bricht aus dem Frame-Container aus) === */
.frame-container-default .mf-hero-umsetzung{
width:100vw !important; max-width:100vw !important;
margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important;
}
.frame-container-default:has(> .frame-inner > .mf-hero-umsetzung),
.frame-container-default:has(.mf-hero-umsetzung) > .frame-inner{ overflow:visible !important; }
/* === P2.1 No-JS/reduced-motion-Fallback fuer Scroll-Reveals (B14) === */
html:not(.mfb-js) .fade-up, html:not(.mfb-js) .reveal{ opacity:1 !important; transform:none !important; }
@media (prefers-reduced-motion: reduce){ .fade-up, .reveal{ opacity:1 !important; transform:none !important; transition:none !important; } }
/* === P3/B3: MyFirstMillion-Stat-Karte (Markup existierte, Styling fehlte) === */
.mf-myff__card{ background:#FBF9F4; border:1px solid #E5DFD2; border-top:2px solid var(--u-gold,#C4A86B);
border-radius:var(--u-radius,14px); padding:1.9rem 1.7rem; box-shadow:0 18px 44px -26px rgba(16,42,34,.35);
display:flex; flex-direction:column; gap:1.25rem; max-width:380px; margin-inline:auto; }
.mf-myff__stat{ display:flex; flex-direction:column; gap:.15rem; padding-bottom:1.1rem; border-bottom:1px solid rgba(26,60,52,.08); }
.mf-myff__stat:last-child{ padding-bottom:0; border-bottom:0; }
.mf-myff__num{ font-family:'Cormorant Garamond',Georgia,serif; font-size:1.9rem; line-height:1.1; color:var(--u-green,#1A3C34); }
.mf-myff__lbl{ font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--u-gold-text,#9a7b3f); }
/* === Pillars 3x2 bei 6 Karten: 5er-Zentrierung (nth-child 4/5) aufheben === */
@media (min-width:992px){
.mf-pillars-item:nth-child(4):nth-last-child(3){ grid-column:span 2 !important; }
.mf-pillars-item:nth-child(5):nth-last-child(2){ grid-column:span 2 !important; }
}
/* === S5: FAL-Baender — picture/img fuellt die __bg-Ebene (statt CSS-background) === */
.mf-image-break--fal .mf-image-break__bg picture,
.mf-image-break--fal .mf-image-break__bg img{
position:absolute; inset:0; width:100%; height:100%;
object-fit:cover; object-position:var(--mfb-pos-d,center 30%);
}
@media (max-width:576px){
.mf-image-break--fal .mf-image-break__bg img{ object-position:var(--mfb-pos-m,var(--mfb-pos-d,center 30%)); }
}
/* ============================================================
MFB UPLIFT — WAVE 4 (mf-viz): interaktive Diagramme/Infografiken
Additiv, nach wave3 geladen. 3 Primitive: STEPPER · TABS · CHART.
Motion: Jakub-Politur (opacity+translateY+blur, var(--u-ease)),
nur transform/opacity/filter, kein Loop, prefers-reduced-motion = Endzustand.
Rollback: includeCSS/JS upliftWave4 in setup.typoscript entfernen.
============================================================ */
:root{ --mfv-ease: var(--u-ease, cubic-bezier(.22,1,.36,1)); }
/* Anker-Resolver: Sticky-Header-Offset für angesprungene Sektionen */
.mfv-anchor-target{ scroll-margin-top:6rem; }
/* ============ 1) STEPPER / TIMELINE (hydratisiert ol.mf-process-list) ============ */
.mf-process-list.mfv-stepper{
list-style:none; margin:1.75rem 0 0; padding:0; position:relative;
}
.mf-process-list.mfv-stepper::before{ /* Verbindungslinie */
content:""; position:absolute; left:18px; top:14px; bottom:14px; width:2px;
background:linear-gradient(to bottom, var(--u-gold,#C4A86B), var(--u-green,#1A3C34));
transform:scaleY(0); transform-origin:top center;
transition:transform .7s var(--mfv-ease);
}
.mf-process-list.mfv-stepper.mfv-in::before{ transform:scaleY(1); }
.mf-process-list.mfv-stepper > li{
position:relative; list-style:none; margin:0 0 1.5rem; padding:.15rem 0 .15rem 3.5rem;
min-height:38px; outline:none;
opacity:0; transform:translateY(14px); filter:blur(6px);
transition:opacity .52s var(--mfv-ease), transform .52s var(--mfv-ease), filter .52s var(--mfv-ease);
transition-delay:calc(var(--i, 0) * 70ms);
}
.mf-process-list.mfv-stepper.mfv-in > li{ opacity:1; transform:none; filter:none; }
.mf-process-list.mfv-stepper > li:last-child{ margin-bottom:.25rem; }
.mfv-num{
position:absolute; left:0; top:0; width:38px; height:38px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
background:var(--u-warm-white,#fbf8f2); color:var(--u-green,#1A3C34);
border:2px solid var(--u-gold,#C4A86B); font-family:var(--font-display,"Cormorant Garamond",serif);
font-weight:700; font-size:1.15rem; line-height:1; z-index:1;
box-shadow:var(--u-sh-md,0 10px 28px rgba(26,60,52,.14));
transition:transform .3s var(--mfv-ease), background-color .3s var(--mfv-ease), color .3s var(--mfv-ease);
}
.mf-process-list.mfv-stepper > li strong{ display:block; color:var(--u-green,#1A3C34); font-size:1.08rem; margin-bottom:.15rem; }
.mf-process-list.mfv-stepper > li:hover .mfv-num,
.mf-process-list.mfv-stepper > li:focus-visible .mfv-num{
transform:scale(1.07); background:var(--u-green,#1A3C34); color:var(--u-gold,#C4A86B);
}
.mf-process-list.mfv-stepper > li:focus-visible{ box-shadow:0 0 0 2px rgba(196,168,107,.4); border-radius:12px; }
/* ============ 2) TABS / PHASE-SELECTOR (Chip-Filter aus card_group) ============ */
.mfv-tabs{ margin-top:1.5rem; }
.mfv-chips{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1.6rem; }
.mfv-chip{
appearance:none; cursor:pointer; font:inherit; font-size:.94rem; line-height:1.2;
padding:.62rem 1.15rem; border-radius:999px;
background:var(--u-warm-white,#fbf8f2); color:var(--u-green,#1A3C34);
border:1px solid rgba(26,60,52,.18);
transition:background-color .22s var(--mfv-ease), color .22s var(--mfv-ease), transform .12s var(--mfv-ease), box-shadow .22s var(--mfv-ease);
}
.mfv-chip:hover{ box-shadow:var(--u-sh-md,0 8px 22px rgba(26,60,52,.12)); }
.mfv-chip:active{ transform:scale(.97); }
.mfv-chip[aria-selected="true"]{
background:var(--u-green,#1A3C34); color:#fff; border-color:var(--u-green,#1A3C34);
font-weight:600;
}
.mfv-chip:focus-visible{ outline:none; box-shadow:0 0 0 2px rgba(196,168,107,.45); }
.mfv-panel[hidden]{ display:none; }
.mfv-panel{
background:var(--u-warm-white,#fbf8f2); border-radius:var(--u-radius,16px);
padding:1.7rem 1.9rem; box-shadow:var(--u-sh-md,0 14px 36px rgba(26,60,52,.10));
opacity:0; transform:translateY(10px); filter:blur(4px);
animation:mfv-panel-in .36s var(--mfv-ease) forwards;
}
.mfv-panel > :first-child{ margin-top:0; }
.mfv-panel > :last-child{ margin-bottom:0; }
@keyframes mfv-panel-in{ to{ opacity:1; transform:none; filter:none; } }
/* ============ 3) CHART (Zinseszins / Kurven) ============ */
.mfv-chart{ margin:1.5rem 0; }
.mfv-chart__grid{ display:grid; gap:1.6rem; grid-template-columns:1fr; }
@media (min-width:860px){ .mfv-chart__grid{ grid-template-columns:1.4fr 1fr; align-items:center; } }
.mfv-chart figure{ margin:0; }
.mfv-chart svg{ width:100%; height:auto; display:block; overflow:visible; }
.mfv-chart .mfv-area-cap{ fill:var(--u-green,#1A3C34); opacity:.92; }
.mfv-chart .mfv-area-int{ fill:var(--u-gold,#C4A86B); opacity:.85; }
.mfv-chart .mfv-line{ fill:none; stroke:var(--u-green,#1A3C34); stroke-width:2.5; }
.mfv-chart .mfv-axis{ stroke:rgba(26,60,52,.25); stroke-width:1; }
.mfv-chart .mfv-axis-lbl{ fill:rgba(26,60,52,.6); font-size:11px; font-family:Inter,system-ui,sans-serif; }
/* Reveal-Draw der Flächen/Linie (einmalig, kein Loop) */
.mfv-chart .mfv-draw{ opacity:0; transition:opacity .6s var(--mfv-ease); }
.mfv-chart.mfv-in .mfv-draw{ opacity:1; }
.mfv-chart .mfv-line{ stroke-dasharray:var(--mfv-len,1200); stroke-dashoffset:var(--mfv-len,1200); transition:stroke-dashoffset .9s var(--mfv-ease); }
.mfv-chart.mfv-in .mfv-line{ stroke-dashoffset:0; }
.mfv-chart__controls{ display:flex; flex-direction:column; gap:1.1rem; }
.mfv-control label{ display:block; font-size:.9rem; font-weight:600; color:var(--u-green,#1A3C34); margin-bottom:.35rem; }
.mfv-control .mfv-val{ color:var(--u-antique,#9a7b3f); font-variant-numeric:tabular-nums; }
.mfv-chart input[type=range]{ width:100%; accent-color:var(--u-green,#1A3C34); cursor:pointer; }
.mfv-out{ display:flex; flex-wrap:wrap; gap:1.4rem; margin-top:.4rem; }
.mfv-out > div{ flex:1 1 8rem; }
.mfv-out .mfv-out-num{ font-family:var(--font-display,"Cormorant Garamond",serif); font-size:1.7rem; font-weight:700; color:var(--u-green,#1A3C34); font-variant-numeric:tabular-nums; }
.mfv-out .mfv-out-num.is-gold{ color:var(--u-antique,#9a7b3f); }
.mfv-out .mfv-out-lbl{ font-size:.82rem; color:rgba(26,60,52,.7); }
.mfv-legend{ display:flex; gap:1.2rem; margin-top:.8rem; font-size:.82rem; color:rgba(26,60,52,.75); }
.mfv-legend span{ display:inline-flex; align-items:center; gap:.4rem; }
.mfv-legend i{ width:.85rem; height:.85rem; border-radius:3px; display:inline-block; }
.mfv-cap{ font-size:.78rem; color:rgba(26,60,52,.6); margin-top:1rem; font-style:italic; }
.mfv-a11y-table{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* ============ REDUCED MOTION — Endzustand sofort, keine Bewegung ============ */
@media (prefers-reduced-motion: reduce){
.mf-process-list.mfv-stepper::before{ transform:scaleY(1); transition:none; }
.mf-process-list.mfv-stepper > li{ opacity:1; transform:none; filter:none; transition:none; }
.mfv-num{ transition:none; }
.mfv-panel{ animation:none; opacity:1; transform:none; filter:none; }
.mfv-chart .mfv-draw{ opacity:1; transition:none; }
.mfv-chart .mfv-line{ stroke-dashoffset:0; transition:none; }
.mfv-chip{ transition:none; }
}
/* ============ 5) FEHLER / LÖSUNG — globaler 2-Zustand-Umschalter über card_group ============ */
.mfv-fl-toggle{ margin-bottom:1.6rem; }
.mf-fl__tag{
display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
padding:.22rem .65rem; border-radius:999px; margin-bottom:.6rem;
}
.mf-fl--fehler .mf-fl__tag{ color:#b0563c; background:rgba(176,90,60,.1); }
.mf-fl--loesung .mf-fl__tag{ color:var(--u-green,#1A3C34); background:rgba(26,60,52,.09); }
@keyframes mf-fl-in{ from{ opacity:0; transform:translateY(7px); } to{ opacity:1; transform:none; } }
.frame-type-card_group.mf-fl-on .mf-fl:not([hidden]){ animation:mf-fl-in .34s var(--mfv-ease,ease); }
@media (prefers-reduced-motion: reduce){
.frame-type-card_group.mf-fl-on .mf-fl:not([hidden]){ animation:none; }
}
/* ============================================================
MFB UPLIFT — WAVE 5: Powermail-CTA-Formular (3-Step, Conversion)
Additiv. Icon-Auswahl-Karten + Multistep + CI-Form. Scope: .powermail_form / .mfv-formcta-head.
Rollback: includeCSS upliftWave5 + Datei entfernen.
============================================================ */
/* ---- 2-Spalten-CTA: FULL-BLEED grünes Band; Inhalt auf Container-Breite, Gold-Linie oben + Footer-Abstand ---- */
/* FULL-BLEED grünes Band NUR fürs CTA via ::before (100vw hinter der eingerückten row) */
.row:has(.mfv-formcta-side){
position:relative; isolation:isolate;
padding-block:clamp(2.6rem,5vw,4.2rem);
margin-bottom:clamp(3rem,6vw,5rem); /* cremefarbener Abstand zum Footer */
}
.row:has(.mfv-formcta-side)::before{
content:''; position:absolute; inset-block:0; left:50%; width:100vw; transform:translateX(-50%);
background:var(--u-green,#1A3C34); border-top:3px solid var(--u-gold,#C4A86B); z-index:-1;
}
.row:has(.mfv-formcta-side) > *{ position:relative; z-index:1; }
/* Symmetrische Außen-Paddings im Inhalt: Text-links == Formular-rechts */
[class*="col-lg-5"]:has(.mfv-formcta-side){
display:flex; flex-direction:column; justify-content:center;
padding-left:clamp(2rem,4vw,3rem); padding-right:clamp(1.4rem,3vw,2.2rem);
}
[class*="col-lg-5"]:has(.mfv-formcta-side) + [class*="col-lg-7"]{
padding-left:clamp(1.4rem,3vw,2.2rem); padding-right:clamp(2rem,4vw,3rem);
}
@media (max-width:991.98px){
[class*="col-lg-5"]:has(.mfv-formcta-side){ text-align:center; }
[class*="col-lg-5"]:has(.mfv-formcta-side) .mf-section-label,
[class*="col-lg-5"]:has(.mfv-formcta-side) .mf-trust-pills{ justify-content:center; }
}
/* CTA-Panel auf Seiten-Containerbreite einrücken (statt full-bleed) — fluchtet mit dem übrigen Inhalt */
.row:has(.mfv-formcta-side){ margin-inline:auto!important; }
@media (min-width:576px){ .row:has(.mfv-formcta-side){ max-width:540px; } }
@media (min-width:768px){ .row:has(.mfv-formcta-side){ max-width:720px; } }
@media (min-width:992px){ .row:has(.mfv-formcta-side){ max-width:960px; } }
@media (min-width:1200px){ .row:has(.mfv-formcta-side){ max-width:1140px; } }
@media (min-width:1400px){ .row:has(.mfv-formcta-side){ max-width:1320px; } }
.mfv-formcta-side{ color:var(--u-warm-white,#fbf8f2); }
.mfv-formcta-side .mf-section-label{ color:var(--u-gold,#C4A86B); }
.mfv-formcta-side h2{ color:#fff; margin:.45rem 0 .7rem; }
.mfv-formcta-side .mf-section-lead{ color:rgba(255,255,255,.86); }
.mfv-formcta-side .mf-trust-pills{ margin-top:1.4rem; }
[class*="col-lg-5"]:has(.mfv-formcta-side) + [class*="col-lg-7"] .frame-type-powermail_pi1{ background:transparent; margin:0; padding:0; }
.powermail_form{
background:var(--u-warm-white,#fbf8f2); border-radius:var(--u-radius,16px);
box-shadow:0 18px 44px rgba(0,0,0,.18); border:1px solid rgba(196,168,107,.30);
margin:0; width:100%; max-width:none; padding:clamp(1.5rem,3vw,2.4rem);
}
/* Frame-/Powermail-Wrapper-Paddings in beiden CTA-Spalten neutralisieren → Inhalt sitzt am Spalten-Padding */
[class*="col-lg-5"]:has(.mfv-formcta-side) .frame-container,
[class*="col-lg-5"]:has(.mfv-formcta-side) .frame-inner,
[class*="col-lg-5"]:has(.mfv-formcta-side) + [class*="col-lg-7"] .frame-container,
[class*="col-lg-5"]:has(.mfv-formcta-side) + [class*="col-lg-7"] .frame-inner{ padding:0; }
[class*="col-lg-5"]:has(.mfv-formcta-side) + [class*="col-lg-7"] .container-fluid{ padding:0; max-width:none; width:100%; }
.powermail_form .powermail_fieldwrap{ margin-bottom:1.1rem; }
/* Mobile: gestapelt (Container-Spalten brechen via Bootstrap col-md) */
@media (max-width:767.98px){ .mfv-formcta-side{ margin-bottom:1.6rem; text-align:center; } .mfv-formcta-side .mf-section-label,.mfv-formcta-side .mf-trust-pills{ justify-content:center; } .mfv-formcta-side .mf-section-lead{ margin-inline:auto; } }
/* ---- Multistep: Step-Tabs (Powermail btn-group) als Fortschritt ---- */
.powermail_multistep_navigation{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1.8rem; }
.powermail_multistep_navigation .btn{
flex:1 1 8rem; appearance:none; cursor:pointer; font:inherit; font-size:.84rem; font-weight:600; line-height:1.25;
padding:.62rem .7rem; border-radius:999px; background:var(--u-warm-white,#fbf8f2);
color:rgba(26,60,52,.55); border:1px solid rgba(26,60,52,.16);
transition:background-color .2s var(--u-ease,ease), color .2s var(--u-ease,ease), border-color .2s var(--u-ease,ease);
}
.powermail_multistep_navigation .btn:hover{ border-color:var(--u-gold,#C4A86B); }
.powermail_multistep_navigation .btn.active{ background:var(--u-green,#1A3C34); color:#fff; border-color:var(--u-green,#1A3C34); }
/* Weiter / Zurück / Submit */
.powermail_form button[type=submit], .powermail_form input[type=submit], .powermail_form button.powermail_next, .powermail_form button.powermail_prev{
appearance:none; cursor:pointer; font:inherit; font-weight:700; border-radius:999px; padding:.9rem 1.8rem;
border:1px solid var(--u-gold,#C4A86B); background:var(--u-gold,#C4A86B); color:var(--u-green,#1A3C34);
transition:transform .12s var(--u-ease,ease), box-shadow .22s var(--u-ease,ease);
}
.powermail_form button.powermail_prev{ background:transparent; border-color:var(--u-green,#1A3C34); color:var(--u-green,#1A3C34); }
.powermail_form [type=submit]:hover, .powermail_form button.powermail_next:hover{ box-shadow:0 10px 26px rgba(26,60,52,.18); }
.powermail_form [type=submit]:active, .powermail_form button.powermail_next:active, .powermail_form button.powermail_prev:active{ transform:scale(.97); }
.powermail_form .powermail_buttons{ display:flex; gap:.8rem; justify-content:flex-end; flex-wrap:wrap; margin-top:1.6rem; }
/* ---- Icon-Auswahl-Karten (Radio-Override) ---- */
.mfv-imgselect{ display:grid; grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr)); gap:.8rem; }
.mfv-imgselect__opt{ position:relative; }
.mfv-imgselect__input{ position:absolute; opacity:0; width:1px; height:1px; }
.mfv-imgselect__card{
display:flex; flex-direction:column; align-items:center; gap:.55rem; text-align:center; cursor:pointer;
height:100%; padding:1.15rem .8rem; border-radius:var(--u-radius,16px);
background:#fff; border:1px solid rgba(26,60,52,.16); color:var(--u-green,#1A3C34);
font-size:.92rem; line-height:1.25; transition:border-color .2s var(--u-ease,ease), box-shadow .2s var(--u-ease,ease), transform .12s var(--u-ease,ease), background-color .2s var(--u-ease,ease);
}
.mfv-imgselect__card .bi{ font-size:1.7rem; color:var(--u-gold,#C4A86B); transition:color .2s var(--u-ease,ease); }
.mfv-imgselect__card:hover{ box-shadow:0 10px 24px rgba(26,60,52,.12); border-color:rgba(196,168,107,.55); }
.mfv-imgselect__input:checked + .mfv-imgselect__card{ background:var(--u-green,#1A3C34); color:#fff; border-color:var(--u-green,#1A3C34); }
.mfv-imgselect__input:checked + .mfv-imgselect__card .bi{ color:var(--u-gold,#C4A86B); }
.mfv-imgselect__input:focus-visible + .mfv-imgselect__card{ outline:none; box-shadow:0 0 0 2px rgba(196,168,107,.5); }
/* ---- Inputs / Labels / Textarea ---- */
.powermail_form label.powermail_label{ display:block; font-size:.9rem; font-weight:600; color:var(--u-green,#1A3C34); margin-bottom:.35rem; text-transform:none; }
.powermail_form input[type=text], .powermail_form input[type=email], .powermail_form input[type=tel], .powermail_form input[type=date], .powermail_form input[type="datetime-local"], .powermail_form input[type=time], .powermail_form .powermail_date, .powermail_form textarea, .powermail_form select{
width:100%; font:inherit; padding:.8rem 1rem; border-radius:12px; border:1px solid rgba(26,60,52,.22);
background:#fff; color:var(--u-green,#1A3C34); transition:border-color .2s var(--u-ease,ease), box-shadow .2s var(--u-ease,ease);
}
.powermail_form input:focus, .powermail_form textarea:focus, .powermail_form select:focus{ outline:none; border-color:var(--u-gold,#C4A86B); box-shadow:0 0 0 3px rgba(196,168,107,.2); }
.powermail_form textarea{ min-height:7rem; resize:vertical; }
.powermail_field_error_container{ color:#9a3324; font-size:.82rem; margin-top:.3rem; }
/* ---- Datenschutz-Hinweis (Text-Feld) ---- */
.powermail_fieldwrap_type_text{ font-size:.82rem; color:rgba(26,60,52,.7); margin-top:.4rem; }
.powermail_fieldwrap_type_text a{ color:var(--u-antique,#9a7b3f); text-decoration:underline; }
/* ---- Bestätigungs-/Danke-Meldung ---- */
.powermail_confirmation, .tx-powermail .powermail_message, .powermail_form .powermail_message{ color:var(--u-green,#1A3C34); }
@media (prefers-reduced-motion: reduce){
.mfv-imgselect__card, button.powermail_next, button.powermail_prev, .powermail_form [type=submit]{ transition:none; }
}
/* ============================================================
S8 — Konsistenz-Paket (Kundin-Feedback 2026-07-13)
(1) Mobil: two_columns-/Split-Sektionen rendern .section > .row
OHNE .container — der Bootstrap-Negativ-Margin der row lief
bis an den Viewport-Rand (Text klebte links/rechts bündig).
Margin nullen, Spalten-Padding (20/24px) bleibt erhalten.
(2) Rechner-Datentabellen (Zinseszins/Tilgung) ragten mobil
134–164px über den rechten Rand -> horizontal scrollbar.
(3) Schriftgrößen-Angleichung gleicher Wertigkeiten
(Kennzahlen-Labels, Keypoint-Titel, Home-Karten, Leads,
Captions, Tabs-Panel, Video-Hero mobil).
============================================================ */
@media (max-width: 991.98px){
.section > .row{ margin-left: 0; margin-right: 0; }
}
@media (max-width: 767.98px){
table.mfv-a11y-table{ display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
/* (3a) Kennzahlen-Labels: helle Leiste an dunkles Band angleichen (11.5px -> 16px) */
.mf-stats-bar__label,
.mf-stat-lbl,
.mf-stat-label{ font-size: .82rem !important; text-transform: uppercase; letter-spacing: .08em; }
/* (3b) Keypoint-Titel einheitlich (15.7px vs 17.9px je Kontext) */
.mf-keypoints li strong{ font-size: 1.12rem; }
/* (3c) Home-Karten auf Site-Standard (Kartentitel 1.3rem/600, Button .94rem, Text 1rem) */
.mf-schwerpunkt-card h3,
.mf-fall-card h3{ font-size: 1.3rem; }
.mf-schwerpunkt-card .btn-mf{ font-size: .94rem; }
.mf-mitnehmen-card p{ font-size: 1rem; }
/* (3d) Bootstrap-.lead an Sektions-Lead angleichen (20px/300 -> 16.8px/400) */
p.lead{ font-size: 1.05rem; font-weight: 400; }
/* (3e) SEO-Intro /leistungen (21.1px -> Lead-Standard) */
p.mf-lead{ font-size: 1.05rem; }
/* (3f) Porträt-Caption /ueber-mich im Caption-Stil der übrigen Bild-Unterschriften */
figure.mf-portrait figcaption{ font-size: .82rem; font-weight: 600; }
/* (3g) Tabs-Panel-Kartentitel (Lebensphasen) auf Karten-Standard */
.mfv-panel .card-title{ font-size: 1.3rem; font-weight: 600; }
/* (3h) Video-Hero mobil: H1 an mfb_hero-Köpfe angleichen (35.2/200 -> 32/300) */
@media (max-width: 991.98px){
.mf-home-hero h1{ font-size: 2rem; font-weight: 300; }
}
/* ============================================================
S10 — Home-Feinschliff (Taste-Pass 2026-07-14)
Heidelberg-Sektion als Editorial-Split: Text links (linksbündige
Serif-H2, Eyebrow), Panorama rechts über volle Spaltenhöhe mit
Gold-Hairline, Verlaufs-Blende und Caption-Overlay. Mobil steht
das Bild als Einstieg über dem Text.
============================================================ */
.mf-hd-split{ display:grid; gap:1.5rem; }
.mf-hd-split__text h2{ text-align:left; max-width:19ch; margin:.45rem 0 1.35rem; }
.mf-hd-split__text p{ max-width:58ch; }
.mf-hd-split__media{ margin:0; position:relative; overflow:hidden; border-radius:18px;
box-shadow:0 24px 48px -20px rgba(26,60,52,.30); }
.mf-hd-split__media::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px;
background:linear-gradient(90deg,#C4A86B,rgba(196,168,107,.12)); z-index:2; }
.mf-hd-split__media img{ display:block; width:100%; height:100%; object-fit:cover; }
.mf-hd-split__media::after{ content:""; position:absolute; inset:auto 0 0 0; height:42%;
background:linear-gradient(to top,rgba(15,36,30,.58),rgba(15,36,30,0)); pointer-events:none; }
.mf-hd-split__media figcaption{ position:absolute; left:1.2rem; bottom:1rem; z-index:2;
color:#fff; font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
@media (max-width:991.98px){
.mf-hd-split__media{ order:-1; min-height:230px; }
}
@media (min-width:992px){
.mf-hd-split{ grid-template-columns:minmax(0,1.02fr) minmax(0,1fr); gap:3.4rem; align-items:stretch; }
.mf-hd-split__media{ min-height:480px; }
}
/* parseFunc-Artefakte im text-CE neutralisieren (leere p als Grid-Kind, img-in-p ohne Hoehe) */
.mf-hd-split > p{ display:none; }
.mf-hd-split__media p{ margin:0; height:100%; max-width:none; }
/* ============================================================
S11 — /faelle: „Was sich wiederholt" als nummerierter
Dreier-Flow (Serif-Ziffern, Gold-Chevrons, Akzent-Finale)
============================================================ */
.mf-logic-flow{ display:grid; gap:1.5rem; margin-top:2.4rem; }
.mf-logic-flow__step{ position:relative; background:#fff; border:1px solid rgba(196,168,107,.35);
border-radius:16px; padding:1.9rem 1.7rem 1.75rem;
box-shadow:0 18px 36px -22px rgba(26,60,52,.18); }
.mf-logic-flow__num{ display:block; font-family:'Cormorant Garamond',Georgia,serif;
font-size:2.6rem; line-height:1; color:var(--u-gold,#C4A86B); }
.mf-logic-flow__num::after{ content:""; display:block; width:2.2rem; height:2px;
background:linear-gradient(90deg,#C4A86B,rgba(196,168,107,.15)); margin:.55rem 0 1.05rem; }
.mf-logic-flow__step h3{ font-size:1.3rem; font-weight:600; margin:0 0 .55rem; color:var(--u-green,#1A3C34); }
.mf-logic-flow__step p{ margin:0; font-size:1rem; line-height:1.6; color:#5B6F69; max-width:none; }
.mf-logic-flow__step--accent{ background:var(--u-green,#1A3C34); border-color:rgba(196,168,107,.55); }
.mf-logic-flow__step--accent h3{ color:#fff; }
.mf-logic-flow__step--accent p{ color:rgba(255,255,255,.78); }
@media (min-width:768px){
.mf-logic-flow{ grid-template-columns:repeat(3,1fr); gap:2.6rem; }
.mf-logic-flow__step:not(:first-child)::before{ content:""; position:absolute; top:50%;
left:-1.92rem; width:1.15rem; height:1.15rem; border-top:2.5px solid #C4A86B;
border-right:2.5px solid #C4A86B; transform:translateY(-50%) rotate(45deg); opacity:.8; }
}
@media (max-width:767.98px){
.mf-logic-flow__step:not(:first-child){ margin-top:.4rem; }
.mf-logic-flow__step:not(:first-child)::before{ content:""; position:absolute; top:-1.15rem;
left:2.4rem; width:.95rem; height:.95rem; border-bottom:2.5px solid #C4A86B;
border-right:2.5px solid #C4A86B; transform:rotate(45deg); opacity:.8; }
}
/* ============================================================
S13 — Ultrawide-Konsistenz + Sektions-Feinschliff (2026-07-14)
(a) Containerlose section-rows liefen auf breiten Monitoren
ungedeckelt (Text am Viewport-Rand, überlange Zeilen,
Sektionen unterschiedlich breit) -> auf Containerbreite
deckeln und zentrieren (Desktop-Pendant zum S8-Mobilfix).
(b) Full-bleed-Elemente (Heros, Zitatbänder, Kennzahlen-Bänder)
brechen kontextunabhängig auf volle Viewportbreite aus.
(c) .btn-mf-outline Basisdefinition (fehlte ausserhalb der
Schwerpunkt-Karten -> Links wirkten als nackter Text).
============================================================ */
@media (min-width: 992px){
.section > .row{ max-width: 1280px; margin-left: auto; margin-right: auto; }
}
.mf-hero-umsetzung, .mf-home-hero, .mf-image-break, .mf-stats-bar{
width: 100vw; max-width: 100vw;
margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
.btn-mf-outline{
border: 1.5px solid var(--u-green, #1A3C34);
color: var(--u-green, #1A3C34);
background: transparent;
}
/* S13b — Nachbefunde: Callout-Label als eigene Zeile (klebte am Text, site-weit),
helle Trust-Pill-Variante im SEO-Kontext, mischke-quote von BP-Border befreit,
Anführungszeichen inline in Gold */
.mf-callout__label{ display:block; margin-bottom:.4rem; }
.frame-mf-seo-section .mf-trust-pills{ margin:1.6rem 0 .4rem; }
.frame-mf-seo-section .mf-trust-pill{ color:var(--u-green,#1A3C34); background:#fff;
border:1px solid rgba(196,168,107,.55); }
.frame-mf-seo-section .mf-trust-pill .bi{ color:var(--u-gold-text,#A98D57); }
.frame-mischke-quote, .frame-mischke-quote blockquote{ border:0; }
.frame-mischke-quote blockquote{ padding:0; }
.frame-mischke-quote blockquote::before,
.frame-mischke-quote blockquote::after{ content:none; }
.frame-mischke-quote blockquote p::before{ content:'\201E'; font-family:Georgia,serif; font-style:normal;
color:var(--u-gold,#C4A86B); font-size:2.1rem; line-height:0; vertical-align:-0.5rem; margin-right:.3rem; }
.frame-mischke-quote blockquote p:last-of-type::after{ content:'\201C'; font-family:Georgia,serif; font-style:normal;
color:var(--u-gold,#C4A86B); font-size:2.1rem; line-height:0; vertical-align:-0.5rem; margin-left:.3rem; }
/* ===== S17 (2026-07-15): Anker-Sprungkarten ("Direkt zu") — CI-Gruen, weisse Schrift/Icons, kein Underline ===== */
.mf-keypoints li:has(a[href^="#"]){ background:var(--u-green,#1a3c34); border-color:var(--u-green,#1a3c34);
transition:background-color .18s ease; }
.mf-keypoints li:has(a[href^="#"]) i{ color:#fff; }
.mf-keypoints li:has(a[href^="#"]) strong{ color:#fff; }
.mf-keypoints li:has(a[href^="#"]) a{ color:#fff; text-decoration:none; }
.mf-keypoints li:has(a[href^="#"]) a:hover,
.mf-keypoints li:has(a[href^="#"]) a:focus{ color:#fff; text-decoration:none; }
.mf-keypoints li:has(a[href^="#"]):hover{ background:var(--u-green-l,#2d6b5f); }
.mf-keypoints li:has(a[href^="#"]) a:focus-visible{ outline:2px solid var(--u-gold,#c4a86b); outline-offset:3px; border-radius:4px; }
/* ===== S18 (2026-07-15): /ueber-mich Design-Uplift ===== */
/* Full-bleed Creme-Sektionen (lagen als 1280px-Box im gedeckelten Row) */
.mf-warum-section.bg-light,
.mf-qualifikation.bg-light{
width:100vw; margin-left:calc(50% - 50vw);
background:#f5f2ed!important;
padding-top:4.25rem!important; padding-bottom:4.25rem!important;
}
.mf-warum-section .container,
.mf-qualifikation .container{ max-width:1280px; }
/* Personal-Note (8208): die persoenliche Geschichte als Herzstueck */
.mf-personal-note{ background:#f3ebdd; border-top:2px solid var(--u-gold,#c4a86b); border-radius:14px;
padding:1.9rem 2.1rem; box-shadow:var(--u-sh-sm,0 6px 18px rgba(26,60,52,.06)); }
.mf-personal-note__label{ display:block; font-size:.72rem; font-weight:700; letter-spacing:.14em;
text-transform:uppercase; color:var(--u-gold-antique,#9a7b3f); margin-bottom:.7rem; }
.mf-personal-note p{ font-family:'Cormorant Garamond',Georgia,serif; font-size:1.22rem; line-height:1.62;
color:var(--u-green,#1a3c34); margin:0; }
/* Warum-Karten (8210): weisses/dunkles Duo auf Creme */
.mf-warum-card{ background:#fff; border:1px solid var(--u-line,rgba(26,60,52,.10)); border-radius:14px;
padding:1.9rem 2.1rem; box-shadow:var(--u-sh-sm,0 6px 18px rgba(26,60,52,.06)); }
.mf-warum-card h3{ font-size:1.32rem; margin-bottom:.7rem; }
.mf-warum-card p{ margin:0; }
.mf-warum-card--accent{ background:var(--u-green,#1a3c34); border-color:var(--u-green,#1a3c34); }
.mf-warum-card--accent h3{ color:var(--u-gold-l,#d8c290); }
.mf-warum-card--accent p{ color:rgba(255,255,255,.92); }
/* Qualifikation (8216): Gold-Hairline zwischen den Spalten */
@media (min-width:992px){
.mf-qualifikation .row > .col-lg-6:first-child{ border-right:1px solid rgba(196,168,107,.4); padding-right:3.5rem; }
.mf-qualifikation .row > .col-lg-6:last-child{ padding-left:3.5rem; }
}
@media (max-width:991px){
.mf-qualifikation .row > .col-lg-6:last-child{ border-top:1px solid rgba(196,168,107,.4); padding-top:2rem; margin-top:.5rem; }
}
/* ===== S18b (2026-07-15): Review-Feinschliff /ueber-mich ===== */
/* Einheitliche Container-Flucht (1280) fuer alle Editorial-Sektionen der Seite */
.mf-personal-intro .container,
.mf-mensch-section .container,
.mf-werte-triptych .container{ max-width:1280px; }
/* Serif-H2s ohne Einwort-Hurenkinder */
.mf-section-head h2,
.mf-warum-section h2, .mf-qualifikation h2, .mf-mensch-section h2,
.mf-werte-triptych h2, .mf-personal-intro h2, .mfv-formcta-side h2{ text-wrap:balance; }
/* Lesbare Zeilenlaengen in den 7er-Textspalten */
.mf-mensch-section .col-lg-7 p,
.mf-personal-intro .col-lg-7 p{ max-width:66ch; }
/* Licht-auf-dunkel-Politur der Akzentkarten */
.mf-warum-card--accent, .mf-logic-flow__step--accent{ -webkit-font-smoothing:antialiased; }
/* Robustheit der Reveals: Print zeigt immer alles */
@media print{ .fade-up{ opacity:1!important; transform:none!important; } }
/* Scroll-to-top mobil ueber die fixe Kontaktleiste heben */
@media (max-width:991px){ .scroll-top{ bottom:84px; } }
/* /ueber-mich: Zitatband schliesst buendig an die Creme-Qualifikation an */
.page-11 .section:has(.mf-image-break-row){ padding-bottom:0; }
/* Mensch-Sektion mobil: Gutter und Panel-Padding verdichten */
@media (max-width:991px){
.mf-mensch-section .row.g-5{ --bs-gutter-x:1.5rem; --bs-gutter-y:1.75rem; }
.mf-personal-note{ padding:1.4rem 1.5rem; }
.mf-personal-note p{ font-size:1.1rem; }
}
/* ===== S18c (2026-07-15): einheitliche Editorial-Flucht — weisse Sektionen brechen wie die Creme-Sektionen aus dem Row-Deckel aus */
.mf-personal-intro, .mf-mensch-section, .mf-werte-triptych{
width:100vw; margin-left:calc(50% - 50vw);
}
/* ===== S26 (2026-07-15): Transparenz-Vergütung als grüner Full-Width-Balken + Lead-Breite /absicherung ===== */
/* Task B: mf-transparency-section = Tanne-Balken, weiße Schrift, viel Padding */
.frame-mf-transparency-section{
background:linear-gradient(135deg,var(--u-green,#1a3c34) 0%,var(--u-green-d,#15332b) 60%,var(--u-green-dd,#0e211c) 100%);
padding-block:4.5rem;
}
.frame-mf-transparency-section .frame-inner{ max-width:1280px; margin-inline:auto; padding-inline:24px; }
.frame-mf-transparency-section .element-header{
color:#fff; position:relative; padding-top:1.5rem; margin-bottom:1.1rem;
}
.frame-mf-transparency-section .element-header::before{
content:""; position:absolute; top:0; left:0; width:52px; height:2px; background:var(--u-gold,#c4a86b);
}
.frame-mf-transparency-section p{ color:rgba(255,255,255,.9); max-width:70ch; }
.frame-mf-transparency-section p strong{ color:var(--u-gold-l,#d8c290); }
.frame-mf-transparency-section :is(h1,h2,h3,h4){ color:#fff; }
/* Task C: langer Lead auf /absicherung ("Worum es dabei oft konkret geht") nach rechts ausweiten */
#c8394 .mf-section-lead{ max-width:820px; }
/* ===== S29 (2026-07-15): Callout-Text lesbar (Callout liegt in grüner mf-transparency-section) + Stats-Einzel-Statement ===== */
.mf-callout, .mf-callout > div, .mf-callout p{ color:#2E4A42 !important; }
.mf-callout .mf-callout__title{ color:#1A3C34 !important; }
.mf-stats-claim{ font-family:'Cormorant Garamond',Georgia,serif; font-size:2.5rem; line-height:1.2; text-align:center; color:#FFFFFF; margin:0; padding:.4rem 0; letter-spacing:.005em; }
.mf-stats-claim::after{ content:""; display:block; width:66px; height:2px; background:var(--u-gold,#C4A86B); margin:1.1rem auto 0; }
@media (max-width:575px){ .mf-stats-claim{ font-size:1.75rem; } }
/* ===== S34b (2026-07-22): Kapitalanlage „Ihr Vermögen"-Schaubild (CE 9217) über volle Content-Breite ===== */
#c9217 .mf-figure{ max-width:100%; }
/* ===== S35 (2026-07-22): Immo „Finanzierung im Fokus"-Schaubild (CE 9046) volle Content-Breite ===== */
#c9046 .mf-figure{ max-width:860px; }
/* ==== S46 — Von-Frau-zu-Frau Lebenslagen (#c8636): Weißraum Überschrift->Tabs reduzieren ==== */
#c8636{ padding-top:0 !important; }
#c8634 .mfv-tabs{ margin-top:1.1rem !important; }
/* ==========================================================================
MFB — KUNDENSTIMMEN-CAROUSEL (Google-Rezensionen) · 2026-07-27
3 Karten Desktop / 2 Tablet / 1 Mobil. Nativer Scroll-Snap-Track
(funktioniert ohne JS + Touch-Swipe), JS ergaenzt Pfeile, Dots, Tastatur.
========================================================================== */
.mf-reviews{ padding:clamp(3.5rem,7vw,5.5rem) 0; background:var(--u-creme,#F7F4EE); position:relative; }
.mf-reviews--plain{ background:#fff; }
.mf-reviews__inner{ max-width:1280px; margin:0 auto; padding:0 clamp(1rem,4vw,2rem); }
/* Kopf */
.mf-reviews__head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1.25rem; margin-bottom:2.25rem; }
.mf-reviews__headline{ max-width:640px; }
.mf-reviews__eyebrow{ display:inline-flex; align-items:center; gap:.6rem; color:var(--u-gold,#A98D57);
font-weight:700; letter-spacing:.2em; font-size:.74rem; text-transform:uppercase; margin-bottom:.7rem; }
.mf-reviews__eyebrow::before{ content:""; width:26px; height:1px; background:currentColor; opacity:.8; }
.mf-reviews h2.mf-reviews__title{ font-family:Georgia,'Times New Roman',serif; color:var(--u-tanne,#1A3C34);
font-size:clamp(1.7rem,3.4vw,2.5rem); line-height:1.18; margin:0; font-weight:400; }
.mf-reviews__score{ display:flex; align-items:center; gap:.7rem; flex:0 0 auto; }
.mf-reviews__score-num{ font-family:Georgia,serif; font-size:2.4rem; line-height:1; color:var(--u-tanne,#1A3C34); }
.mf-reviews__score-meta{ font-size:.82rem; color:#5B6F69; line-height:1.45; }
.mf-reviews__score-meta .bi{ color:#C4A86B; }
/* Track */
.mf-reviews__viewport{ position:relative; }
.mf-reviews__track{ display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 2*1.5rem)/3);
gap:1.5rem; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
padding:.25rem .25rem 1.25rem; margin:-.25rem -.25rem 0; -ms-overflow-style:none; scrollbar-width:none; }
.mf-reviews__track::-webkit-scrollbar{ display:none; }
@media (max-width:991px){ .mf-reviews__track{ grid-auto-columns:calc((100% - 1.25rem)/2); gap:1.25rem; } }
@media (max-width:640px){ .mf-reviews__track{ grid-auto-columns:88%; gap:1rem; } }
/* Karte */
.mf-rev{ scroll-snap-align:start; background:#fff; border:1px solid rgba(26,60,52,.10); border-radius:14px;
padding:1.9rem 1.75rem 1.6rem; display:flex; flex-direction:column; position:relative; overflow:hidden;
box-shadow:0 14px 34px -26px rgba(26,60,52,.45); transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s; }
.mf-rev::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px;
background:linear-gradient(90deg,#C4A86B,#A98D57); }
.mf-rev:hover{ transform:translateY(-3px); box-shadow:0 20px 44px -24px rgba(26,60,52,.5); }
.mf-rev__quote{ position:absolute; top:.35rem; right:1.1rem; font-family:Georgia,serif; font-size:5.5rem;
line-height:1; color:#C4A86B; opacity:.14; pointer-events:none; user-select:none; }
.mf-rev__stars{ color:#C4A86B; font-size:.92rem; letter-spacing:.15em; margin-bottom:1rem; }
.mf-rev__text{ font-family:Georgia,'Times New Roman',serif; font-size:1.02rem; line-height:1.72;
color:#26251F; margin:0 0 1.5rem; flex:1 1 auto; }
.mf-rev__foot{ display:flex; align-items:center; gap:.75rem; border-top:1px solid rgba(26,60,52,.09); padding-top:1rem; }
.mf-rev__avatar{ flex:0 0 auto; width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
background:var(--u-tanne,#1A3C34); color:#fff; font-family:Georgia,serif; font-size:1rem; letter-spacing:.02em; }
.mf-rev__who{ min-width:0; }
.mf-rev__name{ font-weight:600; color:var(--u-tanne,#1A3C34); font-size:.95rem; line-height:1.3; }
.mf-rev__meta{ font-size:.78rem; color:#7A8A85; display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; }
.mf-rev__gicon{ font-weight:700; font-family:Arial,sans-serif; letter-spacing:-.02em; }
.mf-rev__gicon i:nth-child(1){ color:#4285F4; } .mf-rev__gicon i:nth-child(2){ color:#EA4335; }
/* Steuerung */
.mf-reviews__controls{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:.4rem; }
.mf-reviews__dots{ display:flex; gap:.45rem; }
.mf-reviews__dot{ width:7px; height:7px; border-radius:50%; border:0; padding:0; cursor:pointer;
background:rgba(26,60,52,.22); transition:width .3s, background .3s; }
.mf-reviews__dot[aria-current="true"]{ width:22px; border-radius:4px; background:var(--u-gold,#A98D57); }
.mf-reviews__nav{ display:flex; gap:.5rem; }
.mf-reviews__btn{ width:42px; height:42px; border-radius:50%; border:1px solid rgba(26,60,52,.18);
background:#fff; color:var(--u-tanne,#1A3C34); display:grid; place-items:center; cursor:pointer;
transition:background .25s, color .25s, border-color .25s, transform .12s; }
.mf-reviews__btn:hover:not(:disabled){ background:var(--u-tanne,#1A3C34); color:#fff; border-color:var(--u-tanne,#1A3C34); }
.mf-reviews__btn:active:not(:disabled){ transform:scale(.94); }
.mf-reviews__btn:disabled{ opacity:.32; cursor:default; }
.mf-reviews__all{ display:inline-flex; align-items:center; gap:.45rem; font-size:.86rem; color:#5B6F69;
text-decoration:none; border-bottom:1px solid rgba(26,60,52,.2); padding-bottom:1px; }
.mf-reviews__all:hover{ color:var(--u-tanne,#1A3C34); border-color:var(--u-gold,#A98D57); }
@media (max-width:640px){
.mf-reviews__head{ flex-direction:column; align-items:flex-start; }
.mf-reviews__controls{ flex-direction:column-reverse; align-items:flex-start; gap:.9rem; }
}
@media (prefers-reduced-motion:reduce){
.mf-reviews__track{ scroll-behavior:auto; }
.mf-rev{ transition:none; } .mf-rev:hover{ transform:none; }
}
/* Fix 2026-07-27: Bootstrap-Package-blockquote-Styling in der Karte neutralisieren
(fremder grauer Randstrich + Einrueckung) und Nav ausblenden, wenn alles auf eine Seite passt. */
.mf-rev blockquote.mf-rev__text{ border:0; border-left:0; padding:0; margin:0 0 1.5rem; background:none; font-style:normal; }
.mf-rev blockquote.mf-rev__text::before, .mf-rev blockquote.mf-rev__text::after{ content:none; }
.mf-reviews__nav[hidden]{ display:none !important; }