/* ==========================================================================
   Mike Mühlhoff – Finanzberatung
   Design-Standard: 00 Kontext/Branding.md, 03 Bereiche/Personal Branding/Design-Standard.md
   ========================================================================== */


/* Selbst gehostete Marken-Fonts, DSGVO-sicher (kein externer Google-Request).
   Open Sans (SIL OFL 1.1) + Roboto (Apache 2.0), Variable Fonts, Subsets latin + latin-ext. */
@font-face {
  font-family: 'Open Sans';
  font-style: normal; font-weight: 300 800; font-display: optional;
  src: url('../fonts/opensans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal; font-weight: 300 800; font-display: optional;
  src: url('../fonts/opensans-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal; font-weight: 100 900; font-display: optional;
  src: url('../fonts/roboto-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal; font-weight: 100 900; font-display: optional;
  src: url('../fonts/roboto-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --dark-blue: #005579;
  --dark-blue-2: #003f5c;
  --turquoise: #64b0c2;
  --light-blue: #b3d6de;
  --light-blue-2: #eaf3f5;
  --gray: #c3c4c3;
  --gold: #c4ab2b;
  --ink: #1c2b30;
  --ink-soft: #52666c;
  --white: #ffffff;
  --off-white: #f7f9fa;
  --radius: 14px;
  --shadow: 0 20px 45px -20px rgba(0, 40, 60, 0.25);
  --container: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Open Sans", Arial, sans-serif;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: "Roboto", Arial, sans-serif;
  color: var(--dark-blue);
  line-height: 1.15;
  margin: 0 0 0.5em;
  font-weight: 700;
}

p { line-height: 1.7; color: var(--ink-soft); margin: 0 0 1em; }

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }
/* <picture> layout-transparent: das innere <img> verhält sich exakt wie vorher */
picture { display: contents; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Roboto", Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #2a7286;
  margin-bottom: 14px;
}

.eyebrow::before {
  content: "";
  width: 9px;
  height: 9px;
  background: var(--gold);
  transform: rotate(45deg);
  display: inline-block;
}

section { position: relative; padding: 96px 0; }
section.tight { padding: 72px 0; }

/* ---------- Raute (diamond) accents, per Design-Standard ---------- */
.raute {
  position: absolute;
  border: none;
  transform: rotate(45deg);
  z-index: 0;
  pointer-events: none;
}
.raute.fill-light   { background: var(--light-blue); opacity: 0.55; }
.raute.fill-turq    { background: var(--turquoise);  opacity: 0.28; }
.raute.fill-gold    { background: var(--gold);       opacity: 0.35; }
.raute.outline      { background: transparent; border: 2px solid var(--light-blue); opacity: 0.8; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 999px;
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 700;
  font-size: 0.98rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }

.btn-primary {
  background: var(--dark-blue);
  color: #fff;
  box-shadow: 0 14px 30px -12px rgba(0, 85, 121, 0.55);
}
.btn-primary:hover { background: var(--dark-blue-2); }

.btn-secondary {
  background: var(--white);
  color: var(--dark-blue);
  border-color: var(--gray);
}
.btn-secondary:hover { border-color: var(--dark-blue); }

.btn-ghost-light {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border-color: rgba(255,255,255,0.4);
}
.btn-ghost-light:hover { background: rgba(255,255,255,0.18); }

.btn-whatsapp {
  background: #128033;
  color: #fff;
}
.btn-whatsapp:hover { background: #0e6a2a; }

.btn-block { width: 100%; justify-content: center; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.98);
  border-bottom: 1px solid #eceeee;
}
.site-header .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  max-width: var(--container);
  margin: 0 auto;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--dark-blue);
}
.brand img { height: 38px; width: 38px; flex-shrink: 0; object-fit: contain; }
.brand .brand-sub {
  display: block;
  font-family: "Open Sans", Arial, sans-serif;
  font-weight: 400;
  font-size: 0.72rem;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

.main-nav { display: flex; align-items: center; gap: 24px; }
.main-nav a {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.main-nav a:hover { color: var(--dark-blue); border-color: var(--turquoise); }
.main-nav a.active { color: var(--dark-blue); font-weight: 700; border-color: var(--gold); }

.header-cta { display: flex; align-items: center; gap: 12px; }
.header-cta .short { display: none; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--dark-blue);
  margin: 5px 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* ---------- Hero ---------- */
.hero {
  overflow: hidden;
  background: linear-gradient(180deg, var(--off-white) 0%, var(--white) 100%);
  padding: 64px 0 80px;
}
.hero .raute.r1 { width: 140px; height: 140px; top: -40px; right: 8%; }
.hero .raute.r2 { width: 70px; height: 70px; top: 30%; left: 2%; }
.hero .raute.r3 { width: 100px; height: 100px; bottom: -20px; left: 20%; }

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}

.hero-copy { text-align: center; }
.rating-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border: 1px solid #e7ebec;
  box-shadow: var(--shadow);
  border-radius: 999px;
  padding: 9px 18px 9px 9px;
  font-family: "Roboto", Arial, sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 28px;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}
.rating-pill .avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--white);
  box-shadow: 0 0 0 1px var(--gray);
}
.rating-pill .avatar img { width: 100%; height: 100%; object-fit: cover; }
.rating-pill .stars { color: var(--gold); letter-spacing: 1px; }
.rating-pill .muted { color: var(--ink-soft); font-weight: 400; }

.hero h1 {
  font-size: clamp(2.2rem, 4vw, 3.1rem);
  margin-bottom: 22px;
}
.hero h1 .accent { color: var(--turquoise); }

.hero-lead { font-size: 1.08rem; max-width: 46ch; margin-bottom: 34px; margin-left: auto; margin-right: auto; }

.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; justify-content: center; }

.hero-trust {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  padding-top: 22px;
  border-top: 1px solid #eceeee;
  justify-content: center;
  text-align: center;
}
.hero-trust .stat { }
.hero-trust .stat strong {
  display: block;
  font-family: "Roboto", Arial, sans-serif;
  font-size: 1.5rem;
  color: var(--dark-blue);
}
.hero-trust .stat span { font-size: 0.85rem; color: var(--ink-soft); }

.hero-media { position: relative; }
.hero-media .frame {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 5;
}
.hero-media .frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.hero-media .badge {
  position: absolute;
  bottom: -22px;
  left: -22px;
  background: var(--dark-blue);
  color: #fff;
  border-radius: var(--radius);
  padding: 16px 20px;
  box-shadow: var(--shadow);
  font-family: "Roboto", Arial, sans-serif;
  max-width: 230px;
  text-align: center;
}
.hero-media .badge strong { display: block; font-size: 1rem; margin-bottom: 2px; }
.hero-media .badge span { font-size: 0.8rem; opacity: 0.85; font-family: "Open Sans", Arial, sans-serif; }
.hero-media .badge span strong { display: inline; font-size: inherit; }

/* ---------- Mission ---------- */
.mission { background: var(--off-white); }
.mission .raute.r1 { width: 90px; height: 90px; top: 40px; right: 6%; }
.mission-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
.mission h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.checklist { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 16px; }
.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 600;
  color: var(--ink);
  font-size: 0.98rem;
}
.checklist li .mark {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--turquoise);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  margin-top: 2px;
}

/* ---------- Kooperations-Kreislauf: Vorteile A<->B (Kooperationsseiten, 15.08.2026) ---------- */
.cycle-wrap { max-width:640px; margin:0 auto; }
.cycle-svg { width:100%; height:auto; display:block; }
.cycle-node-box { fill:var(--dark-blue); }
.cycle-node-box.b { fill:var(--turquoise); }
.cycle-node-text { fill:#fff; font-family:"Roboto",Arial,sans-serif; font-weight:700; font-size:19px; text-anchor:middle; }
.cycle-arrow-path { fill:none; stroke:var(--gold); stroke-width:3; }
.cycle-benefits { display:grid; gap:14px; margin-top:22px; }
.cycle-benefit-row { display:flex; align-items:flex-start; gap:12px; background:var(--light-blue-2); border-radius:12px; padding:14px 18px; }
.cycle-benefit-row .cb-arrow { flex:none; width:30px; height:30px; border-radius:50%; background:var(--dark-blue); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1rem; font-weight:700; }
.cycle-benefit-row.reverse .cb-arrow { background:var(--turquoise); }
.cycle-benefit-row p { margin:0; color:var(--ink-strong,#2b3a42); line-height:1.5; font-size:.96rem; padding-top:4px; }
@media (prefers-color-scheme: dark) {
  .cycle-benefit-row { background:rgba(100,176,194,.12); }
  .cycle-benefit-row p { color:var(--ink); }
}
@media (max-width:520px) {
  .cycle-node-text { font-size:22px; }
}

/* ---------- Interaktive Checkliste (checkliste.html, 15.08.2026) ---------- */
.cl-progress-section { padding-top:44px; }
.cl-callout { background:var(--light-blue-2); border-left:4px solid var(--turquoise, #64b0c2); border-radius:0 12px 12px 0; padding:16px 20px; margin-bottom:26px; color:var(--ink-strong,#2b3a42); line-height:1.6; font-size:.95rem; }
.cl-callout strong { color:var(--dark-blue); }
.cl-progress-wrap { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin:0 0 38px; padding:18px 22px; background:var(--light-blue-2); border-radius:14px; border:1px solid rgba(0,85,121,.14); box-shadow:0 10px 24px rgba(0,85,121,.08); }
.cl-progress-text { font-weight:700; color:var(--dark-blue); white-space:nowrap; }
.cl-progress-bar { flex:1 1 160px; height:10px; border-radius:999px; background:rgba(0,85,121,.12); overflow:hidden; min-width:120px; }
.cl-progress-fill { height:100%; width:0%; background:var(--turquoise); border-radius:999px; transition:width .3s ease; }
.cl-reset { margin-left:auto; background:none; border:1px solid var(--dark-blue); color:var(--dark-blue); border-radius:999px; padding:7px 16px; font-size:.85rem; font-weight:600; cursor:pointer; font-family:inherit; }
.cl-reset:hover { background:var(--dark-blue); color:#fff; }
.cl-group { margin-bottom:34px; }
.cl-group-title { font-size:1.15rem; color:var(--dark-blue); margin:0 0 4px; padding-bottom:8px; border-bottom:2px solid var(--gold); }
.cl-group-sub { font-size:.85rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--turquoise); margin:10px 0 8px; }
.cl-items { list-style:none; margin:0; padding:0; }
.cl-item { border-bottom:1px solid #e7eaee; }
.cl-item label { display:flex; align-items:flex-start; gap:12px; padding:12px 2px; cursor:pointer; }
.cl-item input[type="checkbox"] { position:absolute; opacity:0; width:1px; height:1px; }
.cl-item .cl-box { flex:none; width:22px; height:22px; margin-top:1px; border-radius:6px; border:2px solid var(--turquoise); background:#fff; position:relative; transition:background .15s ease, border-color .15s ease; }
.cl-item .cl-box::after { content:""; position:absolute; left:6px; top:2px; width:6px; height:11px; border:solid #fff; border-width:0 2.5px 2.5px 0; transform:rotate(40deg); opacity:0; transition:opacity .1s ease; }
.cl-item input:checked + .cl-box { background:var(--dark-blue); border-color:var(--dark-blue); }
.cl-item input:checked + .cl-box::after { opacity:1; }
.cl-item input:focus-visible + .cl-box { outline:2px solid var(--gold); outline-offset:2px; }
.cl-item .cl-text { color:var(--ink-strong,#2b3a42); line-height:1.5; padding-top:1px; }
.cl-item input:checked ~ .cl-text { color:var(--ink-soft); text-decoration:line-through; text-decoration-color:var(--turquoise); }
.cl-hint { font-size:.85rem; color:var(--ink-soft); margin-top:6px; }
.cl-steps { background:var(--light-blue-2); border-radius:14px; padding:22px 24px; }
.cl-steps .cl-group-title { border-bottom-color:var(--turquoise); }
.cl-steps-list { margin:0; padding-left:22px; color:var(--ink-strong,#2b3a42); line-height:1.65; }
.cl-steps-list li { margin-bottom:8px; }
.cl-steps-list a { color:var(--dark-blue); font-weight:600; }
@media (prefers-color-scheme: dark) {
  .cl-callout { background:rgba(100,176,194,.12); color:var(--ink); }
  .cl-callout strong { color:#8fd0dc; }
  .cl-progress-wrap { background:rgba(100,176,194,.12); border-color:rgba(255,255,255,.12); box-shadow:none; }
  .cl-progress-text { color:#8fd0dc; }
  .cl-reset { border-color:#8fd0dc; color:#8fd0dc; }
  .cl-reset:hover { background:#8fd0dc; color:#0d2530; }
  .cl-group-title { color:#fff; }
  .cl-item { border-bottom-color:rgba(255,255,255,.08); }
  .cl-item .cl-box { background:transparent; }
  .cl-item .cl-text { color:var(--ink); }
  .cl-item input:checked ~ .cl-text { color:var(--ink-soft); }
  .cl-steps { background:rgba(100,176,194,.1); }
  .cl-steps-list { color:var(--ink); }
  .cl-steps-list a { color:#8fd0dc; }
}
@media (max-width:600px) {
  .cl-progress-wrap { gap:10px 14px; }
  .cl-reset { margin-left:0; flex:1 1 100%; }
}

/* ---------- Services ---------- */
.services-head { max-width: 640px; margin: 0 auto 52px; text-align: center; }
.services-head h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.service-card {
  background: var(--white);
  border: 1px solid #eceeee;
  border-radius: var(--radius);
  padding: 30px 26px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.service-card h3 { color: var(--dark-blue); }
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: transparent;
}
/* Kein grauer Tap-/Fokus-Hintergrund nach dem Klick */
.service-card { -webkit-tap-highlight-color: transparent; }
.service-card:focus { outline: none; }
.service-card:focus-visible { outline: 2px solid var(--turquoise); outline-offset: 2px; }
.service-card:active { background: var(--white); }
.service-card.overview-card:active { background: var(--dark-blue); }
.audience-nav button { -webkit-tap-highlight-color: transparent; }
.audience-nav button:focus { outline: none; }
.audience-nav button:focus-visible { outline: 2px solid var(--turquoise); outline-offset: 2px; }
.service-card .icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--light-blue-2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  transform: rotate(0deg);
}
.service-card .icon .raute-mini {
  width: 16px;
  height: 16px;
  background: var(--dark-blue);
  transform: rotate(45deg);
}
.service-card h3 {
  font-size: 1.08rem;
  margin-bottom: 8px;
}
.service-card p { font-size: 0.94rem; margin-bottom: 0; }

.services-foot { text-align: center; margin-top: 40px; }

/* ---------- Process ---------- */
.process { background: var(--off-white); margin-top: 40px; }
.process-head { max-width: 640px; margin: 0 auto 56px; text-align: center; }
.process-head h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }

.process-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.process-steps { display: grid; gap: 26px; }
.process-step { display: flex; gap: 18px; }
.process-step .num {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--dark-blue);
  color: #fff;
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.process-step h3 { font-size: 1.05rem; margin-bottom: 4px; }
.process-step p { font-size: 0.94rem; margin-bottom: 0; }

.process-media { position: relative; }
.process-media .frame {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 3 / 4;
}
.process-media .frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }

/* ---------- Testimonials ---------- */
.testimonials-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 44px;
  flex-wrap: wrap;
}
.testimonials-head h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: 4px; }
.testimonials-score {
  text-align: right;
  font-family: "Roboto", Arial, sans-serif;
}
.testimonials-score .big { font-size: 2rem; font-weight: 700; color: var(--dark-blue); }
.testimonials-score .stars { color: var(--gold); }
.testimonials-score .muted { color: var(--ink-soft); font-size: 0.85rem; font-family: "Open Sans", Arial, sans-serif; }

.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.testi-carousel { overflow: hidden; }
.testi-track { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 4px; margin: -4px; }
.testi-track::-webkit-scrollbar { display: none; }
.testi-track > .testi-card { flex: 0 0 clamp(280px, 32%, 400px); scroll-snap-align: start; }
@media (max-width: 820px){ .testi-track > .testi-card { flex: 0 0 84%; scroll-snap-align: center; } .testi-track { scroll-padding: 0 8%; } }
.testi-card {
  background: var(--white);
  border: 1px solid #eceeee;
  border-radius: var(--radius);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.testi-card .stars { color: var(--gold); font-size: 0.9rem; }
.testi-card p.quote {
  font-family: "Roboto", Arial, sans-serif;
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.6;
  margin: 0;
  flex-grow: 1;
}
.testi-card .who { font-size: 0.85rem; color: var(--ink-soft); }
.testi-card .who strong { color: var(--ink); display: block; font-family: "Roboto", Arial, sans-serif; }

.testimonials-foot { text-align: center; margin-top: 40px; }

/* ---------- About ---------- */
.about { background: var(--off-white); }
.about .raute.r1 { width: 110px; height: 110px; bottom: 30px; left: 4%; }
.about-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: center;
}
.about-media .frame {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 1 / 1;
  max-width: 380px;
}
.about-media .frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }

.about h2 { font-size: clamp(1.8rem, 3vw, 2.3rem); }
.about-facts {
  list-style: none;
  margin: 26px 0 30px;
  padding: 0;
  display: grid;
  gap: 12px;
}
.about-facts li {
  display: flex;
  gap: 10px;
  font-size: 0.94rem;
  color: var(--ink);
}
.about-facts li strong { color: var(--dark-blue); font-family: "Roboto", Arial, sans-serif; min-width: 168px; }

/* ---------- Referral ---------- */
.referral {
  background: var(--dark-blue);
  color: #fff;
  overflow: hidden;
}
.referral .raute.r1 { width: 160px; height: 160px; top: -60px; right: 10%; border-color: rgba(255,255,255,0.25); background: transparent; border: 2px solid rgba(255,255,255,0.25); opacity: 1; }
.referral .raute.r2 { width: 70px; height: 70px; bottom: -20px; left: 8%; background: var(--gold); opacity: 0.5; }
.referral-inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.referral .eyebrow { color: var(--light-blue); }
.referral h2 { color: #fff; font-size: clamp(1.7rem, 3vw, 2.2rem); }
.referral p { color: rgba(255,255,255,0.82); font-size: 1.02rem; }
.referral-ctas { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 26px; }

/* ---------- Contact / CTA banner ---------- */
.contact-cta {
  background: var(--white);
}
.contact-card {
  position: relative;
  background: linear-gradient(135deg, var(--dark-blue) 0%, var(--dark-blue-2) 100%);
  border-radius: 24px;
  padding: 64px 48px;
  color: #fff;
  overflow: hidden;
  text-align: center;
}
.contact-card .raute { border: none; }
.contact-card .raute.r1 { width: 150px; height: 150px; top: -50px; left: -30px; background: var(--turquoise); opacity: 0.25; }
.contact-card .raute.r2 { width: 90px; height: 90px; bottom: -30px; right: 6%; background: var(--gold); opacity: 0.35; }
.contact-card-inner { position: relative; z-index: 1; max-width: 620px; margin: 0 auto; }
.contact-card h2 { color: #fff; font-size: clamp(1.8rem, 3.4vw, 2.5rem); }
.contact-card p { color: rgba(255,255,255,0.85); font-size: 1.05rem; }
.contact-ctas { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 30px; }

.contact-details {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align: center;
}
.contact-details .item { padding: 6px 12px; }
.contact-details .item .label {
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 700;
  color: var(--dark-blue);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.contact-details .item div.value { color: var(--ink-soft); font-size: 0.96rem; }
.contact-details .item a.value { color: var(--ink-soft); }
.contact-details .item a.value:hover { color: var(--dark-blue); }

/* ---------- Footer ---------- */
.site-footer {
  background: #071d24;
  color: rgba(255,255,255,0.75);
  padding: 56px 0 24px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-brand img { height: 34px; width: 34px; object-fit: contain; margin-bottom: 14px; }
.footer-brand p { color: rgba(255,255,255,0.6); font-size: 0.9rem; max-width: 32ch; }
.footer-col h3 {
  color: #fff;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-col a { color: rgba(255,255,255,0.65); font-size: 0.94rem; transition: color 0.15s ease; }
.footer-col a:hover { color: #fff; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 22px;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
}
.footer-bottom a { color: rgba(255,255,255,0.5); }
.footer-bottom a:hover { color: #fff; }
.footer-legal { display: flex; gap: 18px; flex-wrap: wrap; }

/* ---------- WhatsApp floating button ---------- */
.wa-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 28px -8px rgba(0,0,0,0.4);
  transition: transform 0.15s ease;
}
.wa-float:hover { transform: scale(1.06); }
.wa-float svg { width: 28px; height: 28px; }

/* ---------- Responsive ---------- */
@media (max-width: 1040px) {
  /* Mobiles Menue: immer im DOM, rollt beim Oeffnen/Schliessen sauber ein/aus */
  .main-nav {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--white);
    padding: 0 28px;
    max-height: 0; opacity: 0; overflow: hidden;
    transform: translateY(-6px); pointer-events: none;
    border-bottom: 0 solid #eceeee;
    transition: max-height .34s ease, opacity .24s ease, transform .34s ease, padding .3s ease;
  }
  .nav-toggle { display: block; }
  .hero-grid, .mission-grid, .process-grid, .about-grid { grid-template-columns: 1fr; }
  .hero-media { order: -1; max-width: 420px; margin: 0 auto; }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .testi-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .contact-details { grid-template-columns: 1fr; }
  .about-media .frame { margin: 0 auto; }

  .site-header.nav-open .main-nav {
    max-height: 80vh; max-height: 80dvh; opacity: 1; transform: translateY(0);
    padding: 8px 28px 20px; pointer-events: auto;
    border-bottom-width: 1px;
  }
  /* Menüpunkte rollen einzeln ein/aus (unterste zuerst raus, tuckt unter die obere) */
  .main-nav a {
    padding: 12px 0; border-bottom: 1px solid #f1f2f2; width: 100%;
    opacity: 0; transform: translateY(-10px);
    transition: opacity .26s ease, transform .3s cubic-bezier(.22,.61,.36,1);
  }
  .site-header.nav-open .main-nav a { opacity: 1; transform: translateY(0); }
  /* Beim Öffnen von oben nach unten, beim Schließen von unten nach oben (Reihenfolge über Delays) */
  .site-header.nav-open .main-nav a:nth-child(1){ transition-delay:.03s }
  .site-header.nav-open .main-nav a:nth-child(2){ transition-delay:.06s }
  .site-header.nav-open .main-nav a:nth-child(3){ transition-delay:.09s }
  .site-header.nav-open .main-nav a:nth-child(4){ transition-delay:.12s }
  .site-header.nav-open .main-nav a:nth-child(5){ transition-delay:.15s }
  .site-header.nav-open .main-nav a:nth-child(6){ transition-delay:.18s }
  .site-header.nav-open .main-nav a:nth-child(7){ transition-delay:.21s }
  .main-nav a:nth-child(7){ transition-delay:0s }
  .main-nav a:nth-child(6){ transition-delay:.03s }
  .main-nav a:nth-child(5){ transition-delay:.06s }
  .main-nav a:nth-child(4){ transition-delay:.09s }
  .main-nav a:nth-child(3){ transition-delay:.12s }
  .main-nav a:nth-child(2){ transition-delay:.15s }
  .main-nav a:nth-child(1){ transition-delay:.18s }
}

@media (max-width: 640px) {
  section { padding: 64px 0; }
  .service-grid { grid-template-columns: 1fr; }
  .hero-trust { gap: 18px; }
  .contact-card { padding: 44px 24px; }
  .header-cta .long { display: none; }
  .header-cta .short { display: inline; }
  .brand-sub { display: none; }
  .brand { font-size: 0.92rem; gap: 8px; }
  .brand img { height: 30px; width: 30px; }
  .site-header .inner { padding: 12px 16px; }
  .header-cta { gap: 8px; }
  .btn { padding: 13px 18px; font-size: 0.9rem; }
}

/* ============ Leistungs-Unterseiten ============ */
.lp-hero { background: var(--light-blue-2); padding: 118px 0 64px; position: relative; overflow: hidden; }
.lp-hero .container { text-align:center; }
.lp-hero .eyebrow { justify-content:center; }
.lp-hero.coop-hero .eyebrow { justify-content:center; width:100%; text-align:center; }
.lp-hero h1 { font-size: clamp(2rem, 5vw, 3rem); line-height:1.1; margin:10px 0 16px; }
.lp-hero p { max-width: 640px; margin-left:auto; margin-right:auto; color: var(--ink-soft); font-size: 1.08rem; }
.lp-hero .lp-ctas { justify-content:center; }
.lp-ctas { display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.lp-hero .lp-ctas { margin-top: 28px; display:flex; gap:14px; flex-wrap:wrap; }
.lp-hero-trust { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px 9px; margin-top:22px; color:var(--ink-soft); font-size:.92rem; }
.lp-hero-trust strong { color:var(--dark-blue); font-weight:800; }
.lp-hero-trust .lht-stars { color:var(--gold); letter-spacing:1px; }
.lp-hero-trust .lht-sep { color:var(--turquoise); font-weight:700; }
@media (max-width:820px){ .lp-hero .lp-hero-trust { justify-content:center; } }
.lp-section { padding: 64px 0; }
.lp-section h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); margin-bottom: 14px; }
.lp-lead { max-width: 720px; color: var(--ink-soft); font-size: 1.05rem; }
.lp-features { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap:22px; margin-top:38px; }
.lp-features-3col { grid-template-columns: repeat(3, 1fr); }
@media (max-width:900px){ .lp-features-3col { grid-template-columns: repeat(2, 1fr); } }
@media (max-width:600px){ .lp-features.lp-features-3col { grid-template-columns: 1fr; } }
.lp-features-2col { grid-template-columns: repeat(2, 1fr); }
@media (max-width:600px){ .lp-features.lp-features-2col { grid-template-columns: 1fr; } }
.lp-feature.usp-tile { background:var(--dark-blue); border-color:var(--dark-blue); }
.lp-feature.usp-tile .ic { background:rgba(255,255,255,.14); }
.lp-feature.usp-tile .ic svg { stroke:#fff; }
.lp-feature.usp-tile h3, .lp-feature.usp-tile p { color:#fff; }
.lp-feature.usp-tile .lp-more { color:#8fd0dc; }

.cl-upload-tile { text-align:center; }
.cl-upload-tile .ic { margin-left:auto; margin-right:auto; }
.cl-upload-tile .lp-more { margin-left:auto; margin-right:auto; }
.lp-feature.cl-upload-tile { border:2px solid var(--gold); }
@media (min-width:821px) {
  .lp-feature.cl-upload-tile { padding:38px 34px; }
  .cl-upload-tile .ic { width:56px; height:56px; }
  .cl-upload-tile .ic svg { width:28px; height:28px; }
  .cl-upload-tile h3 { font-size:1.25rem; }
  .cl-upload-tile p { font-size:1.02rem; }
}
.lp-feature.usp-tile .usp-tag { display:inline-block; background:var(--gold); color:var(--dark-blue); font-weight:800; font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; padding:3px 10px; border-radius:20px; margin-bottom:10px; }

/* ---------- Themenseiten-Grafiken (Timeline / Vergleichsbalken, 15.08.2026 spät) ---------- */
.topic-diagram { max-width:640px; margin:0 auto 34px; }
.topic-diagram-cap { text-align:center; color:var(--ink-soft); font-size:.85rem; margin-top:10px; }
@media (max-width:820px) {
  .topic-diagram:has(.td-modules) { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .topic-diagram .td-modules { width:640px; max-width:none; }
}
.td-timeline { width:100%; height:auto; display:block; }
.td-tl-line { stroke:var(--gold); stroke-width:3; }
.td-tl-dot { fill:var(--turquoise); stroke:var(--dark-blue); stroke-width:2; }
.td-tl-label { fill:var(--dark-blue); font-family:"Roboto",Arial,sans-serif; font-weight:700; font-size:14px; text-anchor:middle; }
.td-tl-sub { fill:var(--ink-soft,#5b6b74); font-family:"Open Sans",Arial,sans-serif; font-size:11.5px; text-anchor:middle; }
.td-bars { width:100%; height:auto; display:block; }
.td-bar-track { fill:var(--light-blue-2); }
.td-bar-fill-a { fill:var(--turquoise); }
.td-bar-fill-b { fill:var(--dark-blue); }
.td-bar-label { fill:var(--dark-blue); font-family:"Roboto",Arial,sans-serif; font-weight:700; font-size:14px; }
.td-bar-val { fill:#fff; font-family:"Roboto",Arial,sans-serif; font-weight:800; font-size:15px; }
@media (prefers-color-scheme: dark) {
  .td-tl-label, .td-bar-label { fill:#8fd0dc; }
  .td-tl-sub { fill:var(--ink); }
}
.evt-video-placeholder { max-width:560px; margin:0 auto; aspect-ratio:16/9; border-radius:16px; border:2px dashed #cdd8dd; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px; background:#f7fafb; color:#8fa3ac; }
.evt-video-placeholder span { font-size:.95rem; text-align:center; padding:0 20px; }
@media (prefers-color-scheme: dark) {
  .evt-video-placeholder { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.18); color:#9fb0b8; }
}
@media (max-width:520px) {
  .td-tl-label { font-size:11px; }
  .td-bar-label { font-size:15px; }
  .td-tl-sub { font-size:9px; }
}

/* ---------- Themenseiten (Sway-Einzelseiten, 15.08.2026): Fakten-Box + größeres Video ---------- */
.fact-box { display:flex; gap:20px; align-items:flex-start; background:var(--light-blue-2); border-left:4px solid var(--turquoise, #64b0c2); border-radius:0 16px 16px 0; padding:22px 26px; margin:34px 0; max-width:720px; margin-left:auto; margin-right:auto; }
.fact-box .fb-num { font-size:2.1rem; font-weight:800; color:var(--dark-blue); line-height:1.05; white-space:nowrap; flex:none; }
.fact-box .fb-text { color:var(--ink-soft); font-size:.97rem; line-height:1.5; }
.fact-box .fb-text strong { color:var(--dark-blue); }
.fact-box .fb-src { display:block; margin-top:6px; font-size:.8rem; color:var(--ink-soft); opacity:.75; }
@media (max-width:600px){ .fact-box { flex-direction:column; gap:8px; padding:20px 22px; } .fact-box .fb-num { font-size:1.7rem; white-space:normal; overflow-wrap:break-word; } }
@media (prefers-color-scheme: dark) {
  .fact-box { background:var(--light-blue-2); border-left-color:var(--turquoise); }
  .fact-box .fb-num { color:#8fd0dc; }
  .fact-box .fb-text { color:var(--ink); }
  .fact-box .fb-text strong { color:#8fd0dc; }
}
.topic-video-section { padding-top:56px !important; }
.topic-video-section .vid-grid-single { max-width:560px; margin:0 auto; }
.topic-video-section .vid-grid-single .vid-thumb { aspect-ratio:16/9; }
.topic-video-section .vid-card { text-align:center; }
.lp-feature { background:#fff; border:1px solid #e7eaee; border-radius:16px; padding:26px; }
.lp-feature .ic { width:44px;height:44px;border-radius:12px;background:var(--light-blue-2);display:flex;align-items:center;justify-content:center;margin-bottom:14px; }
.lp-feature h3, .lp-feature h2 { font-size:1.1rem; margin-bottom:8px; }
.lp-feature p { color:var(--ink-soft); font-size:.97rem; overflow-wrap:break-word; }
.usp-tile p { color:#fff; }
.calc { background: var(--dark-blue); color:#fff; border-radius:22px; padding: 40px; margin-top: 20px; }
.calc h2 { color:#fff; }
.calc-sub { color:#cfe0e8; max-width:640px; }
.calc-grid { display:grid; grid-template-columns: 1fr 1fr; gap:36px; margin-top:30px; align-items:start; }
.calc-inputs .field { margin-bottom:22px; }
.calc-inputs label { display:flex; justify-content:space-between; font-weight:600; margin-bottom:8px; font-size:.95rem; }
.calc-inputs label span { color:#8fd0dc; }
.calc-inputs input[type=range]{ width:100%; accent-color:#64b0c2; }
.calc-result { background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:16px; padding:26px; }
.calc-big { font-size: clamp(2rem,5vw,2.8rem); font-weight:800; color:#fff; line-height:1; margin:6px 0 4px; }
.calc-row { display:flex; justify-content:space-between; padding:10px 0; border-top:1px solid rgba(255,255,255,.12); font-size:.98rem; }
.calc-row.gold strong { color:#f2d688; }
.calc-note { font-size:.8rem; color:#c0d6de; margin-top:16px; line-height:1.4; }
@media (max-width: 760px){ .calc-grid{ grid-template-columns:1fr; } .calc{ padding:28px; } }
.lp-final { background: var(--dark-blue); color:#fff; text-align:center; padding:70px 0; }
.lp-final h2 { color:#fff; }
.lp-final p { color:#cfe0e8; max-width:560px; margin:12px auto 26px; }
/* Verwandte Themen: kleine Verlinkung zu inhaltlich naheliegenden Themenseiten, direkt unter dem
   Termin-Button auf dem blauen Banner (Mikes Wunsch 24.08.2026). Bewusst dezent (kleine Pills,
   kein zweiter Button), damit der Termin-Button die klare Hauptaktion bleibt. */
.lp-related { margin-top:28px; padding-top:24px; border-top:1px solid rgba(255,255,255,.18); }
.lp-related-label { display:block; font-size:.78rem; letter-spacing:.03em; color:#a9c4d1; margin-bottom:12px; text-transform:uppercase; }
.lp-related-links { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.lp-related-links a { display:inline-block; padding:7px 16px; border:1px solid rgba(255,255,255,.35); border-radius:20px; color:#fff; font-size:.86rem; text-decoration:none; transition:background .15s ease, border-color .15s ease; }
.lp-related-links a:hover { background:rgba(255,255,255,.12); border-color:#fff; }
/* Newsletter-CTA */
.newsletter { background: var(--light-blue-2); }
.newsletter .nl-card { position:relative; overflow:hidden; background:#fff; border:1px solid #e7eaee; border-radius:20px; padding:48px 40px; text-align:center; display:flex; flex-direction:column; align-items:center; }
.newsletter h2 { font-size: clamp(1.4rem,3vw,1.9rem); margin-bottom:10px; }
.newsletter p { color:var(--ink-soft); max-width:560px; margin:0 auto; }
.newsletter .btn { margin-top:24px; }
.newsletter .nl-note { font-size:.9rem; color:var(--ink-soft); margin-top:14px; }
.newsletter .nl-card .raute { top:24px; right:28px; }
.newsletter .nl-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; align-items:stretch; }
.newsletter .nl-grid .nl-card { height:100%; padding:32px 24px; }
/* Vier Kacheln einheitlich: kleinere Headline, Button unten bündig, Fließtext gleich */
.newsletter .nl-grid .nl-card h2 { font-size:1.35rem; margin-bottom:8px; min-height:2.6em; display:flex; align-items:center; justify-content:center; }
.newsletter .nl-grid .nl-card p { font-size:.92rem; }
.newsletter .nl-grid .nl-card .btn { margin-top:auto; align-self:center; }
.newsletter .nl-grid .nl-card .social-icons { margin:16px 0 4px; }
.newsletter .nl-grid .nl-card .nl-note { min-height:0; }
.newsletter .nl-dots { display:none; }
/* Ab 920px: Wisch-Karussell mit Punkten und Auto-Weiterlauf */
@media (max-width:920px){
  .newsletter .nl-grid { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:16px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .newsletter .nl-grid::-webkit-scrollbar { display:none; }
  .newsletter .nl-grid > .nl-card { flex:0 0 100%; scroll-snap-align:center; height:auto; align-self:stretch; }
  .newsletter .nl-dots { display:flex; justify-content:center; gap:2px; margin-top:12px; }
  .newsletter .nl-dots button { appearance:none; border:none; cursor:pointer; width:24px; height:24px; padding:0; background:transparent; position:relative; display:inline-flex; align-items:center; justify-content:center; }
  .newsletter .nl-dots button::before { content:""; width:9px; height:9px; border-radius:999px; background:#b9cdd6; transition:width .2s ease, background .2s ease; }
  .newsletter .nl-dots button.active::before { width:26px; background:var(--dark-blue); }
}
.newsletter .social-icons { display:flex; gap:12px; margin:20px 0 6px; }
.newsletter .social-icons a { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--light-blue-2); color:var(--dark-blue); transition:background .15s ease, color .15s ease, transform .15s ease; }
.newsletter .social-icons a:hover { background:var(--dark-blue); color:#fff; transform:translateY(-2px); }
/* "Mehr erfahren" auf den Leistungskacheln */
.service-card .more { display:inline-block; margin-top:14px; color:var(--dark-blue); font-weight:600; font-size:.95rem; }
.service-card { display:flex; flex-direction:column; }
.service-card .more { margin-top:auto; padding-top:14px; }
.service-card .more::after { content:" →"; transition: margin-left .18s ease; }
.service-card:hover .more::after { margin-left:4px; }

/* Segment-Control (verheiratet / ledig etc.) im Rechner */
.calc .seg { display:inline-flex; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:4px; gap:4px; }
.calc .seg button { appearance:none; border:none; background:transparent; color:#cfe0e8; font:inherit; font-size:.92rem; font-weight:600; padding:8px 16px; border-radius:999px; cursor:pointer; transition:background .15s ease, color .15s ease; }
.calc .seg button.active { background:#fff; color:var(--dark-blue); }
.calc .seg button:hover:not(.active) { color:#fff; }

/* Absicherungs-Check (Chips + Ergebnisliste) */
.calc .chips { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.calc .chip { appearance:none; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22); color:#eaf3f6; font:inherit; font-size:.92rem; padding:10px 16px; border-radius:999px; cursor:pointer; transition:background .15s ease, border-color .15s ease; }
.calc .chip:hover { background:rgba(255,255,255,.16); }
.calc .chip.active { background:#64b0c2; border-color:#64b0c2; color:#04212e; font-weight:600; }
.calc .check-out { margin-top:22px; min-height:64px; display:grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap:12px; }
.calc .check-empty { grid-column:1/-1; color:#c0d6de; font-size:.95rem; background:rgba(255,255,255,.06); border:1px dashed rgba(255,255,255,.2); border-radius:14px; padding:22px; text-align:center; }
.calc .check-card { display:flex; align-items:flex-start; gap:12px; background:#fff; border-radius:14px; padding:14px 16px; }
.calc .check-card .ci { flex:none; width:38px; height:38px; border-radius:10px; background:#e7c35a; display:flex; align-items:center; justify-content:center; }
.calc .check-card .ct { display:flex; flex-direction:column; min-width:0; }
.calc .check-card .ct strong { color:var(--dark-blue); font-size:.98rem; overflow-wrap:break-word; word-break:break-word; hyphens:auto; }
.calc .check-card .ct small { color:#5b7280; font-size:.85rem; margin-top:2px; line-height:1.35; }

/* Benefit-Liste im dunklen Rechner-Block */
.calc .calc-benefits { list-style:none; margin:18px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:12px 26px; }
.calc .calc-benefits li { position:relative; padding-left:30px; color:#eaf3f6; font-size:1rem; line-height:1.5; }
.calc .calc-benefits li::before { content:""; position:absolute; left:0; top:6px; width:16px; height:16px; border-radius:50%; background:#64b0c2; }
.calc .calc-benefits li::after { content:""; position:absolute; left:5px; top:10px; width:6px; height:3px; border-left:2px solid #04212e; border-bottom:2px solid #04212e; transform:rotate(-45deg); }

/* Klickbare Feature-Kachel (Unterseiten-Verlinkung) */
a.lp-feature { text-decoration:none; color:inherit; display:flex; flex-direction:column; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
a.lp-feature:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:transparent; }
.lp-feature .lp-more { margin-top:auto; padding-top:14px; color:var(--dark-blue); font-weight:600; font-size:.95rem; }
.lp-feature .lp-more::after { content:" →"; transition:margin-left .18s ease; }
a.lp-feature:hover .lp-more::after { margin-left:4px; }
/* Mobil: ALLE Kacheln zentriert (Icon, Überschrift, Text mittig) – Desktop bleibt linksbündig */
@media (max-width:720px){
  .lp-feature, .service-card, .contact-tile { text-align:center; }
  .lp-feature .ic, .service-card .icon, .contact-tile .ic { margin-left:auto; margin-right:auto; }
  a.lp-feature, .service-card, .contact-tile { align-items:center; }
  .article-card .ac-body { text-align:center; }
  .article-card .ac-meta { justify-content:center; }
  /* Kennenlernen-in-3-Schritten: Kacheln mobil zentrieren */
  .calc .steps { text-align:center; }
  .calc .step { display:flex; flex-direction:column; align-items:center; }
  /* "Passt gut dazu"-Chips: mobil sauber untereinander mit gleichmäßigem Abstand */
  .related-chips { display:flex; flex-direction:column; align-items:center; gap:14px; }
  .related-chips .btn { padding:11px 22px; font-size:.95rem; }
}

/* Zielgruppen-Umschalter in der Leistungs-Sektion */
.audience-nav { display:inline-flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:22px; background:#eef4f6; border-radius:999px; padding:6px; position:relative; }
/* Liquid-Glass-Hover: gläserne Pille gleitet zur gehoverten Kachel */
.audience-nav .an-glass { position:absolute; top:0; left:0; height:0; border-radius:999px; background:rgba(0,85,121,.10); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); opacity:0; transform:translate(0,0); transition: transform .42s cubic-bezier(.4,.9,.3,1), width .42s cubic-bezier(.4,.9,.3,1), opacity .2s ease; z-index:0; pointer-events:none; }
.audience-nav.glass-on .an-glass { opacity:1; }
.audience-nav a, .audience-nav button { position:relative; z-index:1; }
.audience-nav a, .audience-nav button { appearance:none; border:none; cursor:pointer; font-family:inherit; text-decoration:none; color:var(--dark-blue); font-weight:600; font-size:.95rem; padding:9px 20px; border-radius:999px; transition:background .15s ease, color .15s ease; }
.audience-nav a:not(.active), .audience-nav button:not(.active) { background:transparent; box-shadow:none; }
.audience-nav a.active, .audience-nav button.active { background:var(--dark-blue); color:#fff; }
.audience-nav a:not(.active):hover, .audience-nav button:not(.active):hover { background:transparent; color:var(--turquoise); }
/* Übersichts-Kachel (6. Feld) */
.service-card.overview-card { background:var(--dark-blue); border-color:transparent; color:#fff; justify-content:center; text-align:center; align-items:center; }
.service-card.overview-card .icon { background:rgba(255,255,255,.14); }
.service-card.overview-card h3 { color:#fff; }
.service-card.overview-card p { color:#cfe0e8; }
.service-card.overview-card .more { color:#8fd0dc; }
.service-grid { transition:opacity .18s ease; }
.service-grid.swapping { opacity:0; }

/* Finanzwissen / Artikel */
.article-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap:24px; margin-top:38px; }
.article-card { display:flex; flex-direction:column; background:#fff; border:1px solid #eceeee; border-radius:16px; overflow:hidden; text-decoration:none; color:inherit; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.article-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:transparent; }
.article-card .ac-top { background:var(--dark-blue); height:8px; }
/* Themenfarben (14.08.2026): jede Kategorie bekommt eine feste Markenfarbe,
   damit man das Thema schon am Streifen erkennt, ohne den Text zu lesen. */
.article-card[data-thema="vorsorge"] .ac-top { background:var(--dark-blue); }
.article-card[data-thema="geldanlage"] .ac-top { background:var(--gold); }
.article-card[data-thema="absicherung"] .ac-top { background:var(--turquoise); }
.article-card[data-thema="finanzplanung"] .ac-top { background:var(--light-blue); }
.article-card .ac-body { padding:24px; display:flex; flex-direction:column; flex:1; }
.article-card .ac-cat { font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#2a7286; margin-bottom:10px; }
.article-card h3, .article-card h2 { font-size:1.15rem; margin-bottom:10px; color:var(--dark-blue); line-height:1.25; }
.article-card p { color:var(--ink-soft); font-size:.95rem; }
.article-card .ac-meta { margin-top:auto; padding-top:16px; font-size:.85rem; color:var(--ink-soft); display:flex; gap:12px; }
.article-card .ac-more { color:var(--dark-blue); font-weight:600; }
.article-card.ac-hidden { display:none; }
.article-grid.show-all .article-card.ac-hidden { display:flex; }
.article-more-wrap { text-align:center; margin-top:28px; }

.article-body { max-width:720px; margin:0 auto; }
.article-body .lp-ctas { justify-content:center; }
.article-body .rechner-hinweis { margin-top:14px; text-align:center; }
.article-body .eyebrow { justify-content:flex-start; }
.article-date { float:right; background:var(--light-blue-2); color:var(--dark-blue); font-size:.82rem; font-weight:700; padding:7px 14px; border-radius:999px; margin:0 0 8px 14px; }
.article-body h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); line-height:1.15; margin:10px 0 14px; }
.article-meta { color:var(--ink-soft); font-size:.9rem; margin-bottom:30px; display:flex; gap:14px; flex-wrap:wrap; }
.article-body h2 { font-size:1.4rem; margin:34px 0 12px; color:var(--dark-blue); }
.article-body p { color:var(--ink-strong, #2b3a42); line-height:1.7; margin-bottom:16px; }
.article-body ul { margin:0 0 16px 20px; color:var(--ink-strong, #2b3a42); line-height:1.7; }
.article-body li { margin-bottom:6px; }
.article-body .callout { background:var(--light-blue-2); border-left:4px solid var(--turquoise, #64b0c2); border-radius:0 12px 12px 0; padding:18px 22px; margin:24px 0; }
.article-body .callout strong { color:var(--dark-blue); }
@media (max-width:700px){ .article-body .rechner-hinweis { text-align:center; } }
.article-disclaimer { font-size:.82rem; color:var(--ink-soft); border-top:1px solid #e7eaee; margin-top:34px; padding-top:18px; }
.article-figure { margin:28px 0; background:var(--light-blue-2); border:1px solid #e2ebef; border-radius:16px; padding:24px 22px 16px; }
.article-figure svg { display:block; width:100%; height:auto; }
.article-figure figcaption { font-size:.85rem; color:var(--ink-soft); margin-top:12px; text-align:center; }
.article-figure .fig-title { font-size:.95rem; font-weight:700; color:var(--dark-blue); margin-bottom:14px; text-align:center; }
/* Gruppen-Überschriften für Leistungskacheln */
.lg-title { display:flex; align-items:center; justify-content:center; gap:11px; font-family:"Roboto",Arial,sans-serif; font-weight:800; color:var(--dark-blue); font-size:1.15rem; margin:46px 0 3px; }
.lg-title::before { content:""; width:13px; height:13px; background:var(--gold); transform:rotate(45deg); border-radius:2px; flex:none; }
.lg-title.first { margin-top:26px; }
.lg-sub { color:var(--ink-soft); font-size:.95rem; margin:0 auto 20px; max-width:640px; text-align:center; }
/* Ueberschrift+Lead direkt ueber den Leistungskacheln-Gruppen zentrieren */
.lp-section:has(.lg-group) > .container > h2,
.lp-section:has(.lg-group) > .container > .lp-lead { text-align:center; }
.lp-section:has(.lg-group) > .container > .lp-lead { margin-left:auto; margin-right:auto; }
/* Ueberschrift+Lead direkt ueber Leistungskacheln (.lp-features) zentrieren, site-weit */
.lp-section > .container:has(> .lp-features) > h2,
.lp-section > .container:has(> .lp-features) > .lp-lead { text-align:center; }
.lp-section > .container:has(> .lp-features) > .lp-lead { margin-left:auto; margin-right:auto; }
/* Ueberschrift+Lead ueber Chip-Listen (z.B. Branchen-Auswahl) zentrieren */
.lp-section > .container:has(> .aud-chips) > h2,
.lp-section > .container:has(> .aud-chips) > .lp-lead { text-align:center; }
.lp-section > .container:has(> .aud-chips) > .lp-lead { margin-left:auto; margin-right:auto; }
.lp-section > .container:has(> .aud-chips) > .aud-chips { justify-content:center; }
/* Nur die Ueberschrift der "Was du davon hast"-Vorteilsbox zentrieren, NICHT die echten Rechner
   (die teilen sich die .calc-Klasse, aber Rechner haben kein .calc-benefits) */
.calc:has(.calc-benefits) > h2 { text-align:center; }
/* Leistungs-Gruppen: nur auf dem Handy als Accordion einklappbar */
details.lg-group { margin:0; }
details.lg-group > summary.lg-title { list-style:none; }
details.lg-group > summary.lg-title::-webkit-details-marker { display:none; }
@media (min-width:721px){ details.lg-group > summary.lg-title { pointer-events:none; } }
@media (max-width:720px){
  details.lg-group > summary.lg-title { cursor:pointer; margin:30px 0 3px; }
  details.lg-group > summary.lg-title::after { content:""; flex:none; margin-left:auto; width:11px; height:11px; border-right:2.6px solid var(--dark-blue); border-bottom:2.6px solid var(--dark-blue); transform:rotate(45deg) translateY(-2px); transition:transform .2s ease; }
  details.lg-group[open] > summary.lg-title::after { transform:rotate(-135deg) translateY(2px); }
  details.lg-group + details.lg-group { border-top:1px solid #eceeee; }
}

/* Sport-Icons (Vereinssponsoring) */
.sport-icons { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px; margin-top:34px; }
.sport-icons .si { background:#fff; border:1px solid #eceeee; border-radius:16px; padding:22px 16px; text-align:center; }
.sport-icons .si .ic { width:52px; height:52px; margin:0 auto 12px; border-radius:14px; background:var(--light-blue-2); display:flex; align-items:center; justify-content:center; }
.sport-icons .si span { color:var(--dark-blue); font-weight:600; font-size:.95rem; }

/* Muster-Haushaltsrechnung (Finanzplanung) */
.muster { background:#fff; border:1px solid #e7eaee; border-radius:20px; padding:32px; }
.muster .muster-head { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:8px; margin:18px 0 14px; }
.muster .muster-head span { color:var(--ink-soft); font-size:.95rem; }
.muster .muster-head strong { color:var(--dark-blue); font-size:1.5rem; }
.muster .muster-bar svg { display:block; width:100%; height:auto; }
.muster .muster-legend { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px 24px; margin-top:20px; }
.muster .muster-legend .row { display:flex; align-items:center; gap:10px; font-size:.98rem; }
.muster .muster-legend .row i { width:14px; height:14px; border-radius:4px; flex:none; }
.muster .muster-legend .row .nm { color:var(--ink-strong,#2b3a42); }
.muster .muster-legend .row .amt { margin-left:auto; font-weight:600; color:var(--dark-blue); }

/* Berater-Band (Mike-Foto auf Unterseiten) */
.berater { display:flex; align-items:center; gap:26px; background:var(--light-blue-2); border:1px solid #e2ebef; border-radius:20px; padding:26px 30px; flex-wrap:wrap; }
.berater img { width:96px; height:96px; border-radius:50%; object-fit:cover; object-position:top center; flex:none; box-shadow:0 4px 14px rgba(0,0,0,.1); }
.berater .berater-text { flex:1; min-width:240px; }
.berater .berater-text strong { display:block; color:var(--dark-blue); font-size:1.15rem; }
.berater .berater-text p { color:var(--ink-soft); margin:4px 0 14px; }
.berater .berater-cta { display:flex; gap:12px; flex-wrap:wrap; }
@media (max-width:820px){ .berater { flex-direction:column; align-items:center; text-align:center; } .berater > picture, .berater img { margin-left:auto; margin-right:auto; } .berater .berater-text { min-width:0; } .berater .berater-cta { justify-content:center; } }

/* Empfehlungs-Kette (Empfehlungsseite) */
.refchain { display:flex; align-items:flex-start; justify-content:center; gap:8px; flex-wrap:wrap; background:var(--light-blue-2); border:1px solid #e2ebef; border-radius:20px; padding:34px 24px; }
.refchain .rc-node { display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; width:150px; flex:none; }
.refchain .rc-ic { width:64px; height:64px; border-radius:50%; background:#fff; border:2px solid var(--turquoise, #64b0c2); display:flex; align-items:center; justify-content:center; flex:none; }
.refchain .rc-node.gold .rc-ic { border-color:var(--gold); background:var(--gold); }
.refchain .rc-node span:last-child { color:var(--dark-blue); font-weight:600; font-size:.95rem; }
.refchain .rc-arrow { color:var(--turquoise, #64b0c2); flex:none; margin-top:20px; }
@media (max-width:620px){ .refchain { flex-direction:column; align-items:center; } .refchain .rc-arrow { transform:rotate(90deg); margin-top:0; } }

/* Fakten-Leiste (Hard Facts) */
.fact-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; text-align:center; }
.fact-strip .fact { background:#fff; border:1px solid #eceeee; border-radius:16px; padding:22px 14px; }
.fact-strip .fact strong { display:block; font-size:clamp(1.5rem,3vw,2rem); color:var(--dark-blue); line-height:1; }
.fact-strip .fact span { display:block; margin-top:8px; font-size:.9rem; color:var(--ink-soft); }
@media (max-width:720px){ .fact-strip { grid-template-columns:repeat(2,1fr); } }

/* Bild + Text nebeneinander (Karriere u. a.) */
.split { display:grid; grid-template-columns: 0.9fr 1.1fr; gap:40px; align-items:center; }
.split-media img { width:100%; height:100%; max-height:440px; object-fit:cover; object-position:top center; border-radius:20px; display:block; }
.split-text .eyebrow { justify-content:flex-start; }
@media (max-width:820px){ .split { grid-template-columns:1fr; } .split-media img { max-height:340px; } }

/* Empfehlungsseite: 3 Schritte */
.calc .steps { display:grid; grid-template-columns: repeat(3, 1fr); gap:22px; margin-top:28px; text-align:left; }
.calc .step { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius:16px; padding:24px; }
.calc .step-num { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; background:#64b0c2; color:#04212e; font-weight:800; font-size:1.1rem; margin-bottom:14px; }
.calc .step h3 { color:#fff; font-size:1.05rem; margin-bottom:6px; }
.calc .step p { color:#cfe0e8; font-size:.95rem; }
@media (max-width:760px){ .calc .steps { grid-template-columns:1fr; } }
.calc .steps.steps-4 { grid-template-columns: repeat(4, 1fr); gap:16px; }
.calc .steps.steps-4 .step { padding:20px 18px; }
@media (max-width:900px){ .calc .steps.steps-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width:560px){ .calc .steps.steps-4 { grid-template-columns:1fr; } }

/* Kontaktseite */
.contact-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap:22px; }
.contact-tile { display:block; background:#fff; border:1px solid #eceeee; border-radius:16px; padding:26px; text-decoration:none; color:inherit; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.contact-tile:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:transparent; }
.contact-tile .ic { width:44px;height:44px;border-radius:12px;background:var(--light-blue-2);display:flex;align-items:center;justify-content:center;margin-bottom:14px; }
.contact-tile h3 { font-size:1.1rem; margin-bottom:6px; color:var(--dark-blue); }
.contact-tile p { color:var(--ink-soft); font-size:.95rem; }
.office { display:grid; grid-template-columns: 1fr 1.2fr; gap:40px; align-items:center; }
.office-map iframe { display:block; width:100%; }
.office-map .map-consent { height:380px; border-radius:16px; background:var(--light-blue-2); border:1px solid #e2ebef; display:flex; align-items:center; justify-content:center; text-align:center; padding:26px; }
.office-map .map-consent-inner { max-width:360px; }
.office-map .map-consent p { color:var(--ink-soft); margin:12px 0 18px; font-size:.95rem; }
.office-map .map-alt { display:block; margin-top:14px; color:var(--dark-blue); font-weight:600; font-size:.9rem; }
@media (max-width:820px){ .office { grid-template-columns:1fr; } .office-info { text-align:center; } .office-info .lp-lead { margin-left:auto; margin-right:auto; } }

/* Diagramm im Rechner */

.article-figure .muster-legend svg { width:18px; height:18px; flex:none; }
.calc .calc-chart { margin-top:28px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:16px; padding:20px 18px 10px; }
.calc .calc-chart-title { font-size:.9rem; font-weight:600; color:#cfe0e8; margin-bottom:10px; }
.calc .chart-legend { display:flex; flex-wrap:wrap; gap:16px; margin-top:8px; font-size:.85rem; color:#cfe0e8; }
.calc .chart-legend span { display:inline-flex; align-items:center; gap:7px; }
.calc .chart-legend i { width:14px; height:3px; border-radius:2px; display:inline-block; }
.calc .chart-tip { position:absolute; transform:translate(-50%,0); background:#04212e; color:#fff; border:1px solid rgba(255,255,255,.22); border-radius:8px; padding:7px 10px; font-size:.82rem; line-height:1.35; white-space:nowrap; pointer-events:none; opacity:0; transition:opacity .12s ease; z-index:6; box-shadow:0 4px 14px rgba(0,0,0,.3); }
.calc .chart-tip.on { opacity:1; }
.calc .chart-tip strong { color:#8fd0dc; }
.calc .chart-guide { position:absolute; top:0; width:1px; background:rgba(255,255,255,.45); pointer-events:none; opacity:0; transition:opacity .12s ease; z-index:5; }
.calc .chart-guide.on { opacity:1; }
#chart-rest, #chart-invest { position:relative; cursor:crosshair; }

/* ==========================================================================
   Dark Mode – folgt der System-Einstellung (prefers-color-scheme)
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --white: #141c21;        /* Karten-/Flächenfarbe */
    --off-white: #0e151a;    /* Sektions-Hintergrund */
    --light-blue-2: #17262e; /* heller Akzent -> dunkler Akzent */
    --ink: #e9eff2;          /* Fließtext hell */
    --ink-soft: #a7b8be;
    --gray: #3a464b;
    --shadow: 0 20px 45px -22px rgba(0,0,0,.7);
  }
  body { background: #0b1114; }

  /* Überschriften, Marke, Navigation hell */
  h1, h2, h3, h4 { color: var(--ink); }
  .brand span, .brand span .brand-sub { color: var(--ink); }
  .main-nav a { color: var(--ink); }
  .main-nav a.active { color: #fff; }

  /* Header */
  .site-header { background: rgba(13,19,24,.92); border-bottom-color: rgba(255,255,255,.08); }

  /* Weiße Karten -> dunkle Kartenflächen */
  .service-card, .lp-feature, .testi-card, .article-card, .contact-tile,
  .sport-icons .si, .fact-strip .fact, .muster, .newsletter .nl-card,
  .rating-pill { background: var(--white); }
  .service-card, .lp-feature, .testi-card, .article-card, .contact-tile,
  .sport-icons .si, .fact-strip .fact, .muster, .newsletter .nl-card,
  .refchain, .article-figure, .berater, .review-invite { border-color: rgba(255,255,255,.10); }
  .service-card:active { background: var(--white); }
  .berater, .article-figure, .refchain, .review-invite { background: var(--light-blue-2); }

  /* Icon-Chips hell lassen, damit die dunkelblauen Icons lesbar bleiben */
  .service-card .icon, .lp-feature .ic, .contact-tile .ic,
  .sport-icons .si .ic, .refchain .rc-ic { background: #eaf3f5; }

  /* Überschriften/Zahlen, die fest dunkelblau sind, aufhellen */
  .service-card h3, .article-card h3, .article-card h2, .contact-tile h3, .sport-icons .si span,
  .fact-strip .fact strong, .muster .muster-head strong,
  .muster .muster-legend .row .amt, .muster .muster-legend .row .nm,
  .berater .berater-text strong, .refchain .rc-node span:last-child,
  .article-figure .fig-title { color: var(--ink); }

  /* Buttons */
  .btn-secondary { color: var(--ink); border-color: rgba(255,255,255,.25); background: transparent; }
  .btn-secondary:hover { border-color: var(--turquoise); }

  /* Zielgruppen-Umschalter */
  .audience-nav { background: rgba(255,255,255,.06); }
  .audience-nav a:not(.active), .audience-nav button:not(.active) { color: var(--ink); }

  /* Newsletter Social-Icons */
  .newsletter .social-icons a { background: var(--light-blue-2); color: var(--ink); }

  /* Artikel-Fließtext + Datum */
  .article-body p, .article-body ul, .article-body li { color: var(--ink); }
  .article-date { background: var(--light-blue-2); color: var(--ink); }

  /* feine Linien */
  .site-footer, .footer-bottom, .article-disclaimer { border-color: rgba(255,255,255,.10); }

  /* Neue Komponenten im Dark Mode */
  .faq-item { border-color: rgba(255,255,255,.12); }
  .faq-item summary { color: #8fd0dc; }
  .faq-item[open] { border-color: var(--turquoise); box-shadow: 0 8px 24px rgba(0,0,0,.35); }
  .faq-foot a { color: #8fd0dc; }
}


/* Donut-Legende (farbige, fette Labels, vertikal zentriert) */
.article-figure .donut-legend { display:flex; flex-direction:column; justify-content:center; gap:10px; }
.article-figure .donut-legend .drow { display:flex; align-items:center; gap:9px; font-weight:800; font-size:1.02rem; }
.article-figure .donut-legend .drow::before { content:""; width:12px; height:12px; border-radius:3px; background:currentColor; flex:none; }
.article-figure .donut-legend .drow > span { color:var(--ink); }
.article-figure .donut-legend .drow > span:last-child { margin-left:auto; color:var(--ink-soft); font-weight:700; }

/* Karriereleiter (Nebenberuf -> Hauptberuf) */
.career-ladder { display:flex; flex-direction:column; gap:14px; }
.career-ladder .cl-phase { border-radius:16px; padding:16px 18px 18px; position:relative; text-align:center; }
.career-ladder .cl-haupt { background:var(--light-blue-2); border:1px solid #d7e6ea; }
.career-ladder .cl-neben { background:#f2f7f2; border:1px solid #dce8dc; }
.career-ladder .cl-lbl { display:inline-block; font-family:"Roboto",Arial,sans-serif; font-weight:800; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dark-blue); background:#fff; border-radius:999px; padding:5px 14px; margin-bottom:12px; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.career-ladder .cl-neben .cl-lbl { color:#4a7d2f; }
.career-ladder .cl-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.career-ladder .cl-track { display:flex; flex-direction:column-reverse; gap:8px; }
.career-ladder .cl-h { font-weight:700; color:var(--dark-blue); font-size:.98rem; text-align:center; margin-bottom:2px; }
.career-ladder .cl-s, .career-ladder .cl-entry { background:#fff; border:1px solid #e3ebee; border-radius:10px; padding:9px 12px; text-align:center; font-size:.92rem; color:var(--ink); }
.career-ladder .cl-s:last-child { background:var(--dark-blue); color:#fff; border-color:transparent; font-weight:600; }
.career-ladder .cl-entry { background:#fff; }
.career-ladder .cl-flow { text-align:center; color:var(--gold); font-weight:800; font-size:.85rem; letter-spacing:.08em; margin:2px 0; }
@media (max-width:600px){
  /* Zwei Wege bleiben nebeneinander, damit beide Pfade als Alternative sichtbar sind */
  .career-ladder .cl-phase { padding:14px 10px; }
  .career-ladder .cl-grid { gap:8px; }
  /* Beide Spalten-Überschriften gleich hoch, damit die Pfade zeilengleich (parallel) stehen */
  .career-ladder .cl-h { font-size:.82rem; min-height:2.4rem; display:flex; align-items:flex-end; justify-content:center; margin-bottom:0; }
  .career-ladder .cl-s, .career-ladder .cl-entry { padding:8px 6px; font-size:.78rem; }
  .career-ladder .cl-lbl { font-size:.72rem; padding:5px 11px; }
}

/* Zielgruppen-Chips (Karriere: für wen?) */
.aud-chips { display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 4px; }
.lp-hero .aud-chips { justify-content:center; }
.aud-chips span { background:#fff; border:1px solid #d7e6ea; color:var(--dark-blue); font-weight:600; font-size:.92rem; padding:8px 16px; border-radius:999px; box-shadow:0 2px 8px rgba(0,0,0,.05); }

/* Unternehmens-Ökosystem (Hub + Themen, im dunklen calc-Panel) */
.ecosystem { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:26px; }
.ecosystem .eco-hub { grid-column:1/-1; background:#fff; color:var(--dark-blue); border-radius:14px; padding:18px 20px; font-weight:700; font-size:1.05rem; }
.ecosystem .eco-node { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:14px; padding:18px 12px; text-align:center; color:#eaf3f6; font-weight:600; font-size:.95rem; display:flex; flex-direction:column; align-items:center; gap:10px; }
.ecosystem .eco-node .eic { width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; }
.ecosystem .eco-node.eco-partner { color:#c9d8de; font-weight:600; justify-content:center; }
@media (max-width:640px){ .ecosystem { grid-template-columns:1fr 1fr; } }
/* Interaktives Unternehmens-Ökosystem (Flip-Karten-Hub, radial) */
.eco3 { margin-top:14px; }
.eco3-grid { position:relative; display:grid; grid-template-columns:1fr 1.15fr 1fr; grid-template-rows:repeat(3,138px); gap:18px 26px; max-width:820px; margin:0 auto;
  grid-template-areas:"l1 . r1" "l2 c r2" "l3 . r3"; }
.eco3-lines { position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.eco3-center, .eco3-tile { position:relative; z-index:1; }
.eco3-center { grid-area:c; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:6px; background:#eaf3f5; color:#005579; border-radius:15px; padding:14px 14px; box-shadow:0 6px 18px -10px rgba(0,20,35,.5); }
.eco3-center strong { font-family:"Roboto",Arial,sans-serif; font-weight:800; font-size:1.12rem; line-height:1.15; }
.eco3-center-sub { font-size:.85rem; color:#41616c; line-height:1.35; }
.eco3-tile { border:none; background:none; padding:0; cursor:pointer; perspective:1000px; min-height:138px; -webkit-tap-highlight-color:transparent; }
.eco3-tile:focus { outline:none; }
.eco3-inner { display:block; position:relative; width:100%; height:100%; min-height:138px; transition:transform .55s cubic-bezier(.4,.2,.2,1); transform-style:preserve-3d; }
.eco3-tile:hover .eco3-inner, .eco3-tile.flipped .eco3-inner, .eco3-tile:focus-visible .eco3-inner { transform:rotateY(180deg); }
.eco3-face { position:absolute; inset:0; -webkit-backface-visibility:hidden; backface-visibility:hidden; border-radius:15px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:12px 12px; box-shadow:0 6px 18px -10px rgba(0,20,35,.5); }
.eco3-front { background:var(--tile,#8ea3ab); color:var(--ink,#fff); }
.eco3-ic { display:flex; align-items:center; justify-content:center; margin-bottom:9px; }
.eco3-lbl { font-family:"Roboto",Arial,sans-serif; font-weight:700; font-size:.98rem; line-height:1.2; }
.eco3-back { background:var(--back,#eaf3f5); color:#0d3a4e; transform:rotateY(180deg); font-size:.85rem; line-height:1.4; overflow:hidden; }
.eco3-cue { text-align:center; color:#c0d6de; font-size:.9rem; margin-top:16px; }
@media (max-width:720px){
  .eco3-lines { display:none; }
  .eco3-grid { grid-template-columns:1fr 1fr; grid-template-rows:auto repeat(3,152px); gap:12px; grid-template-areas:"c c" "l1 r1" "l2 r2" "l3 r3"; max-width:none; }
  .eco3-center { padding:16px; }
  .eco3-tile, .eco3-inner { min-height:152px; }
  .eco3-lbl { font-size:.9rem; }
  .eco3-back { font-size:.8rem; line-height:1.32; padding:10px; }
  .eco3-face { padding:10px; }
}
@media (prefers-reduced-motion: reduce){ .eco3-inner { transition:none; } }

.article-figure .muster-legend .row { display:flex; align-items:center; gap:10px; font-size:.98rem; }

/* ===== FAQ (Accordion, nativ per <details>) ===== */
.faq-wrap { max-width: 820px; margin: 0 auto; }
.faq-item { border: 1px solid var(--line, #e2e8ec); border-radius: 14px; background: var(--white, #fff); margin-bottom: 14px; overflow: hidden; transition: box-shadow .18s ease, border-color .18s ease; }
.faq-item[open] { border-color: var(--turquoise); box-shadow: 0 8px 24px rgba(0,85,121,.08); }
.faq-item summary { list-style: none; cursor: pointer; padding: 20px 24px; display: flex; align-items: center; gap: 16px; font-family: "Roboto", Arial, sans-serif; font-weight: 700; font-size: 1.08rem; color: var(--dark-blue); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .faq-plus { margin-left: auto; flex: none; width: 26px; height: 26px; position: relative; transition: transform .2s ease; color: var(--turquoise); }
.faq-item summary .faq-plus::before, .faq-item summary .faq-plus::after { content: ""; position: absolute; background: currentColor; border-radius: 2px; }
.faq-item summary .faq-plus::before { top: 12px; left: 4px; width: 18px; height: 3px; }
.faq-item summary .faq-plus::after { left: 11.5px; top: 4px; width: 3px; height: 18px; transition: transform .2s ease; }
.faq-item[open] summary .faq-plus::after { transform: scaleY(0); }
.faq-item .faq-a { padding: 0 24px 22px 24px; color: var(--ink-soft); line-height: 1.62; font-size: 1rem; }
.faq-item .faq-a a { color: var(--dark-blue); font-weight: 600; }
.faq-foot { text-align: center; margin-top: 30px; color: var(--ink-soft); }
.faq-foot a { color: var(--dark-blue); font-weight: 700; }

/* ===== Bewertungs-Avatare (Initialen) ===== */
.testi-card .who { display: flex; align-items: center; gap: 12px; }
.testi-card .who .avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: "Roboto", Arial, sans-serif; font-weight: 800; font-size: 0.98rem; letter-spacing: 0.5px; color: #fff; }
.testi-card .who .who-meta { display: flex; flex-direction: column; line-height: 1.25; }

/* ===== Micro-Commitment Chips ===== */
.micro-commit { max-width: 720px; margin: 0 auto 30px; text-align: center; }
.micro-commit .mc-q { font-family: "Roboto", Arial, sans-serif; font-weight: 700; color: #fff; font-size: 1.08rem; margin-bottom: 16px; }
.micro-commit .mc-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.micro-commit .mc-chip { appearance: none; cursor: pointer; border: 1.5px solid rgba(255,255,255,0.45); background: rgba(255,255,255,0.08); color: #fff; font-family: "Roboto", Arial, sans-serif; font-weight: 600; font-size: 0.95rem; padding: 10px 20px; border-radius: 999px; transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease; }
.micro-commit .mc-chip:hover { background: rgba(255,255,255,0.18); transform: translateY(-1px); }
.micro-commit .mc-chip.active { background: var(--gold); border-color: var(--gold); color: #04212e; }

/* ===== Dezente, ehrliche Verknappung ===== */
.scarcity-note { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,0.10); color: #eaf3f5; font-size: 0.9rem; font-family: "Open Sans", Arial, sans-serif; }
.scarcity-note .dot { width: 9px; height: 9px; border-radius: 50%; background: #6fcf7f; box-shadow: 0 0 0 4px rgba(111,207,127,0.25); flex: none; }

/* ===== Mobile: Hero-Bereiche & CTAs mittig ziehen (aufgeräumter Look) ===== */
@media (max-width: 640px) {
  /* Startseiten-Hero */
  .hero-copy { text-align: center; min-width: 0; }
  .hero-copy h1, .hero-copy .hero-lead { max-width: 100%; }
  .hero h1 { font-size: clamp(1.8rem, 7.5vw, 2.4rem); }
  .hero-copy .rating-pill { margin-left: auto; margin-right: auto; flex-wrap: wrap; justify-content: center; max-width: 100%; }
  .hero-copy .hero-lead { margin-left: auto; margin-right: auto; }
  .hero-ctas { justify-content: center; }
  .hero-trust { text-align: center; flex-direction: column; gap: 16px; }
  .hero-trust .stat { align-items: center; }

  /* Leistungs-/Themen-Hero (lp-hero) */
  .lp-hero .container { text-align: center; }
  .lp-hero .eyebrow { justify-content: center; }
  .lp-hero p { margin-left: auto; margin-right: auto; }
  .lp-hero .lp-ctas { justify-content: center; }

  /* generische CTA-Reihen zentrieren */
  .lp-ctas, .hero-ctas, .contact-ctas, .referral-ctas, .lp-final .container > a { justify-content: center; }
}

/* ===== Sponsoring: Gewinnspiel/Preise-Grid (responsiv) ===== */
.prize-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; max-width:940px; margin:0 auto; }
@media (max-width:720px){ .prize-grid { grid-template-columns:repeat(2,1fr); } }

/* ===== Referenz-Laufband (Unternehmen: bestehende Kunden) ===== */
.ref-band { background: var(--off-white); border-top:1px solid #eceeee; border-bottom:1px solid #eceeee; padding: 30px 0; overflow:hidden; }
.ref-band .ref-head { text-align:center; color:var(--ink-soft); font-size:.98rem; max-width:820px; margin:0 auto 20px; padding:0 20px; }
.ref-band .ref-head strong { color:var(--dark-blue); }
.ref-marquee { overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.ref-marquee { cursor:grab; touch-action:pan-y; }
.ref-marquee.is-dragging { cursor:grabbing; }
.ref-marquee img { -webkit-user-drag:none; user-select:none; }
.ref-track { display:flex; gap:14px; width:max-content; animation:refscroll 48s linear infinite; }
.ref-marquee:hover .ref-track { animation-play-state:paused; }
.ref-chip { flex:none; background:#fff; border:1px solid #e5e9ec; border-radius:999px; padding:11px 22px; font-family:"Roboto",Arial,sans-serif; font-weight:700; color:var(--dark-blue); font-size:.95rem; white-space:nowrap; box-shadow:0 2px 10px -4px rgba(0,40,60,.10); }
@keyframes refscroll { from{transform:translateX(0);} to{transform:translateX(-50%);} }
@media (prefers-reduced-motion: reduce){ .ref-track{ animation:none; flex-wrap:wrap; justify-content:center; width:auto; } .ref-marquee{ -webkit-mask-image:none; mask-image:none; } }
/* Einheitliche Trust-Chips (Privatkunden-Banner): Icon + Wert + Label, alle gleich groß */
.ref-track.trust-track { gap:16px; align-items:stretch; }
.trust-chip { flex:none; width:212px; display:flex; align-items:center; gap:14px; background:#fff; border:1px solid #e5e9ec; border-radius:16px; padding:15px 18px; box-shadow:0 2px 10px -4px rgba(0,40,60,.10); }
.trust-chip .tc-ico { flex:none; width:42px; height:42px; border-radius:12px; background:var(--light-blue-2); display:flex; align-items:center; justify-content:center; color:var(--dark-blue); }
.trust-chip .tc-txt { text-align:left; line-height:1.15; display:flex; flex-direction:column; }
.trust-chip .tc-val, .trust-chip .tc-lbl { display:block; }
.trust-chip .tc-val { font-family:"Roboto",Arial,sans-serif; font-weight:800; color:var(--dark-blue); font-size:1.12rem; }
.trust-chip .tc-lbl { font-size:.8rem; color:var(--ink-soft); }
/* Einheitliche Logo-Kacheln (Geschäftskunden-Banner): echtes Firmenlogo zentriert, alle gleich groß */
.ref-track.logo-track { gap:16px; align-items:stretch; animation-duration:88s; }
.logo-chip { flex:none; width:200px; height:80px; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid #e5e9ec; border-radius:14px; padding:15px 22px; box-shadow:0 2px 10px -4px rgba(0,40,60,.10); }
.logo-chip img { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; }
.logo-chip--sq { padding:6px 14px; }

/* ===== Arbeitgeberportal-Promo ===== */
.agp { background:var(--dark-blue); color:#fff; border-radius:22px; padding:40px; display:grid; grid-template-columns:1.1fr 1fr; gap:32px; align-items:center; }
.agp h2 { color:#fff; }
.agp p { color:#cfe0e8; }
.agp .agp-points { list-style:none; padding:0; margin:16px 0 0; display:grid; gap:12px; }
.agp .agp-points li { display:flex; align-items:flex-start; gap:12px; color:#eaf3f5; font-size:.98rem; }
.agp .agp-points li svg { flex:none; margin-top:2px; }
.agp .agp-visual { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius:16px; padding:26px; text-align:center; }
.agp .agp-visual .big { font-size:2.4rem; font-weight:800; color:#fff; line-height:1; }
.agp .agp-visual .lbl { color:#cfe0e8; font-size:.95rem; margin-top:6px; }
@media (max-width:820px){ .agp{ grid-template-columns:1fr; padding:30px; } }

/* ===== Breadcrumbs (Unterseiten) ===== */
.breadcrumb { padding:16px 0 0; font-size:.85rem; }
.breadcrumb .container { display:flex; flex-wrap:wrap; gap:7px; align-items:center; }
.breadcrumb a { color:var(--ink-soft); text-decoration:none; }
.breadcrumb a:hover { color:var(--dark-blue); }
.breadcrumb .sep { color:var(--ink-soft); opacity:.55; }
.breadcrumb .cur { color:var(--dark-blue); font-weight:600; }

/* ===== Fixe Aktions-Leiste (nur Handy) ===== */
/* Mobile CTA-Leiste entfernt: Superchat + Termin-Button (Header) sind ohnehin immer sichtbar,
   die Leiste war Dopplung und hat Sichtfeld gekostet. */
.mobile-cta-bar { display:none; }

/* Dark Mode: Rand-Ausblendung der Laufband-Banner deaktivieren (sonst grauer Schmier auf den weißen Kacheln) */
@media (prefers-color-scheme: dark){
  .ref-marquee { -webkit-mask-image:none; mask-image:none; }
}

/* ===== Google-Bewertungs-Band (als Klasse, damit Dark Mode sauber greift) ===== */
.rating-band { background:#fff; border:1px solid #e7eaee; border-radius:16px; padding:22px 26px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:center; text-align:center; box-shadow:var(--shadow); }
.rating-band .rb-stars { color:#c4ab2b; font-size:1.35rem; letter-spacing:2px; }
.rating-band .rb-val { color:var(--dark-blue); font-weight:800; font-family:"Roboto",Arial,sans-serif; font-size:1.15rem; }
.rating-band .rb-sub { color:var(--ink-soft); }

/* Autoritäts-Leiste (Über mich) */
.cred-badges{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px;}
.cred-badges span{display:inline-flex;align-items:center;gap:6px;background:var(--light-blue-2);border:1px solid #e2ebef;color:var(--dark-blue);font-weight:600;font-size:.9rem;padding:7px 14px;border-radius:999px;}
.cred-badges span b{color:#756005;font-weight:800;}

/* Kundenstimmen-Kontext-Tag */
.testi-tag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#2a7286;margin-bottom:8px;}

/* 30-Minuten-Versprechen */
.promise{background:var(--light-blue-2);border:1px solid #e2ebef;border-radius:22px;padding:40px 44px;max-width:900px;margin:0 auto;}
.promise-badge{display:inline-flex;flex-direction:column;align-items:center;gap:1px;background:var(--dark-blue);color:#fff;font-weight:700;font-size:.9rem;padding:8px 18px;border-radius:16px;text-align:center;}
.promise-badge .pb-sub{font-weight:600;font-size:.8rem;opacity:.9;}
.promise-points{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:14px;}
.promise-points li{display:flex;gap:12px;align-items:flex-start;color:var(--ink);}
.promise-points li svg{flex:none;margin-top:3px;}
.promise-reassure{margin-top:22px;padding-top:20px;border-top:1px solid rgba(0,60,90,.12);color:var(--ink-soft);}
@media (max-width:620px){ .promise{padding:30px 22px;} }

/* Empfehlungs-Baustein */
.refer{background:linear-gradient(135deg,#005579,#0a6d94);color:#fff;border-radius:22px;padding:46px 44px;max-width:900px;margin:0 auto;text-align:center;box-shadow:var(--shadow);}
.refer h2{color:#fff;margin:6px 0 0;}
.refer .analogy{font-size:1.12rem;line-height:1.6;max-width:660px;margin:16px auto 0;color:#eaf3f5;}
.refer .analogy strong{color:#ffd764;}
@media (max-width:620px){ .refer{padding:34px 22px;} }

/* Berater + Google-Band als EIN Block */
.trust-cta { background:var(--light-blue-2); border:1px solid #e2ebef; border-radius:20px; overflow:hidden; }
.trust-cta .berater, .trust-cta .rating-band { background:transparent; border:none; border-radius:0; box-shadow:none; }
.trust-cta .rating-band { border-top:1px solid rgba(0,60,90,.12); }

/* ===== Dark-Mode-Korrekturen (helle Insel-Komponenten lesbar machen) ===== */
@media (prefers-color-scheme: dark){
  /* Google-Bewertungs-Band -> dunkle Fläche */
  .rating-band { background:var(--white); border-color:rgba(255,255,255,.10); }
  .rating-band .rb-val { color:var(--ink); }
  .trust-cta { border-color:rgba(255,255,255,.10); }
  .trust-cta .berater, .trust-cta .rating-band { background:transparent; }
  .trust-cta .rating-band { border-top-color:rgba(255,255,255,.12); }
  .cred-badges span { background:var(--light-blue-2); border-color:rgba(255,255,255,.12); color:#e7f0f3; }
  .lp-hero-trust strong { color:#8fd0dc; }
  .cases-dots button::before, .testi-dots button::before { background:#3f5460; }
  .cases-dots button.active::before, .testi-dots button.active::before { background:#8fd0dc; }
  .testimonials-score .big { color:#e7f0f3; }
  .promise { border-color:rgba(255,255,255,.10); }
  .promise-reassure { border-top-color:rgba(255,255,255,.14); }

  /* Karriereleiter */
  .career-ladder .cl-haupt { background:var(--light-blue-2); border-color:rgba(255,255,255,.10); }
  .career-ladder .cl-neben { background:#132018; border-color:rgba(255,255,255,.10); }
  .career-ladder .cl-lbl { background:var(--white); color:var(--ink); box-shadow:none; }
  .career-ladder .cl-neben .cl-lbl { color:#8fce6b; }
  .career-ladder .cl-h { color:var(--ink); }
  .career-ladder .cl-s, .career-ladder .cl-entry { background:var(--white); border-color:rgba(255,255,255,.10); color:var(--ink); }
  .career-ladder .cl-s:last-child { background:var(--turquoise); color:#04212e; }

  /* Zielgruppen-Chips + Ökosystem-Hub + Branchen-Chips */
  .aud-chips span { background:var(--light-blue-2); border-color:rgba(255,255,255,.12); color:var(--ink); box-shadow:none; }
  .ecosystem .eco-hub { background:var(--light-blue-2); color:var(--ink); }

  /* Gold-Aktion-Box (Sponsoring/Gewinnspiel): im Dark Mode gedämpft statt grell-creme */
  .aktion-box { background:#1b222a !important; border-color:rgba(196,171,43,.5) !important; }
  .aktion-box h1, .aktion-box h2, .aktion-box h3 { color:var(--ink); }
  .aktion-box p, .aktion-box .lp-lead { color:var(--ink-soft); }
  .aktion-box .prize-grid > div { background:rgba(255,255,255,.05) !important; border-color:rgba(196,171,43,.28) !important; }
  .aktion-box .prize-grid > div > div { background:rgba(196,171,43,.16) !important; }
  .aktion-box .prize-grid strong { color:var(--ink) !important; }
  .prize-card h3, .prize-card strong, .prize-card span, .prize-card .pc-place { color:var(--ink) !important; }
  /* Helle Flächenfüllung in Grafiken (z.B. Solar-Kurve) im Dark Mode dämpfen */
  .article-figure svg path[fill="#e3f1e9"] { fill:#22352b; }
}

/* Dark Mode: Trust-Chips (Privatkunden-Banner) als dunkle Flächen statt greller weißer Kacheln */
@media (prefers-color-scheme: dark){
  .trust-chip { background:var(--white); border-color:rgba(255,255,255,.10); box-shadow:none; }
  .trust-chip .tc-val { color:var(--ink); }
  .trust-chip .tc-lbl { color:var(--ink-soft); }
  .trust-chip .tc-ico { background:#eaf3f5; } /* hell lassen, damit die dunkelblauen Icons sichtbar bleiben */
  /* Logo-Kacheln bleiben hell (Logos brauchen hellen Grund), nur dezenterer Rahmen */
  .logo-chip { border-color:rgba(255,255,255,.16); box-shadow:none; }
}


/* ================= Praxis-Beispiele (anonyme Fälle) ================= */
.cases { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; gap:24px; margin-top:38px; padding:2px 0 6px; }
.cases::-webkit-scrollbar{ display:none; }
.cases > .case-card{ flex:0 0 calc((100% - 48px)/3); scroll-snap-align:start; }
.case-card { background:#fff; border:1px solid #e7eaee; border-radius:18px; padding:28px; display:flex; flex-direction:column; }
.case-tag { display:inline-flex; align-self:flex-start; align-items:center; gap:8px; background:var(--light-blue-2); color:var(--dark-blue); font-weight:700; font-size:.82rem; padding:7px 14px; border-radius:999px; margin-bottom:16px; }
.case-card h3 { color:var(--dark-blue); font-size:1.12rem; margin-bottom:14px; }
.case-row { margin-bottom:13px; }
.case-row .cr-label { display:block; font-size:.72rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:#2a7286; margin-bottom:3px; }
.case-row p { color:var(--ink-soft); font-size:.95rem; margin:0; line-height:1.5; }
.case-result { margin-top:auto; padding-top:15px; border-top:1px solid #eef1f2; color:var(--dark-blue); font-weight:600; font-size:.97rem; }
.case-result::before { content:"✓ "; color:var(--turquoise); font-weight:800; }
.cases-note { text-align:center; font-size:.85rem; color:var(--ink-soft); margin-top:22px; }
/* Punkte-Navigation (Slider) fuer Praxis-Beispiele und Bewertungen, Desktop + Mobil */
.cases-dots, .testi-dots{ display:flex; justify-content:center; gap:2px; margin-top:14px; }
.cases-dots button, .testi-dots button{ appearance:none; border:none; cursor:pointer; width:24px; height:24px; padding:0; background:transparent; position:relative; display:inline-flex; align-items:center; justify-content:center; }
.cases-dots button::before, .testi-dots button::before{ content:""; width:9px; height:9px; border-radius:999px; background:#b9cdd6; transition:width .2s ease, background .2s ease; }
.cases-dots button.active::before, .testi-dots button.active::before{ width:26px; background:var(--dark-blue); }
@media (max-width:820px){
  /* Praxis-Beispiele: eine Karte pro Ansicht */
  .cases{ gap:14px; scroll-padding:0 7%; }
  .cases > .case-card{ flex:0 0 85%; scroll-snap-align:center; }
}

/* ================= Interaktive Vermögens-Pyramide ================= */
.pyramid-wrap { display:grid; grid-template-columns:1fr 1.05fr; gap:44px; align-items:center; }
.pyramid { display:flex; flex-direction:column; align-items:center; gap:9px; }
.pyr-item { width:100%; display:flex; flex-direction:column; align-items:center; gap:9px; }
.pyr-level { border:none; color:#fff; font-family:"Roboto",Arial,sans-serif; font-weight:700; font-size:.98rem; padding:16px 10px; border-radius:11px; cursor:pointer; transition:transform .16s ease, filter .16s ease, box-shadow .16s ease; -webkit-tap-highlight-color:transparent; }
.pyr-level:hover, .pyr-level[aria-expanded="true"] { transform:translateY(-2px); filter:brightness(1.07); box-shadow:0 10px 24px -10px rgba(0,40,60,.45); }
.pyr-level:focus-visible { outline:3px solid var(--turquoise); outline-offset:3px; }
.pyr-l4 { width:100%; background:var(--dark-blue); }
.pyr-l3 { width:80%; background:#2b7d92; }
.pyr-l2 { width:62%; background:var(--turquoise); color:#04212e; }
.pyr-l1 { width:44%; background:var(--gold); color:#04212e; }
/* Info-Box öffnet direkt unter der Stufe: gleiche Breite und gedämpfte Farbe der Stufe, ohne Überschrift */
.pyr-detail { width:100%; border:none; border-radius:12px; padding:0 18px; box-sizing:border-box; max-height:0; opacity:0; overflow:hidden; transition:max-height .34s ease, opacity .26s ease, padding .34s ease; }
.pyr-detail.open { max-height:360px; opacity:1; padding:14px 18px; }
.pyr-detail[hidden] { display:none; }
.pyr-detail p { color:#2b3a42; font-size:.96rem; line-height:1.5; margin:0; }
.pyr-l1 + .pyr-detail { width:44%; min-width:230px; background:#f1e9cd; }
.pyr-l2 + .pyr-detail { width:62%; min-width:230px; background:#dcecf1; }
.pyr-l3 + .pyr-detail { width:80%; background:#d6e8ed; }
.pyr-l4 + .pyr-detail { width:100%; background:#cddbe4; }
@media (max-width:820px){ .pyramid-wrap{ grid-template-columns:1fr; gap:28px; } }
/* Pyramide: Info erst bei Hover, Puls-Hinweis auf oberster Stufe */
.pyr-info[hidden]{ display:none; }
.pyr-level{ position:relative; }
.pyr-hint{ position:absolute; top:7px; right:9px; width:13px; height:13px; border-radius:50%; background:var(--gold); border:2px solid #fff; box-shadow:0 0 0 0 rgba(196,171,43,.6); animation:pyrpulse 1.8s ease-out infinite; pointer-events:none; }
.pyramid.touched .pyr-hint{ animation:none; opacity:0; }
@keyframes pyrpulse{ 0%{ box-shadow:0 0 0 0 rgba(196,171,43,.6); } 70%{ box-shadow:0 0 0 13px rgba(196,171,43,0); } 100%{ box-shadow:0 0 0 0 rgba(196,171,43,0); } }
.pyr-cue{ margin-top:14px; text-align:center; font-size:.9rem; color:var(--ink-soft); }
@media (prefers-reduced-motion: reduce){ .pyr-hint{ animation:none; } }
/* Hero-Zahlen: kurzer Puls, wenn hochgezählt fertig */
[data-count]{ display:inline-block; }
.count-done{ animation:countpulse .55s ease; }
@keyframes countpulse{ 0%{ transform:scale(1); } 45%{ transform:scale(1.16); } 100%{ transform:scale(1); } }
@media (prefers-reduced-motion: reduce){ .count-done{ animation:none; } }

/* ================= Leadmagnet (Finanz-Check-Liste) ================= */
.leadmagnet { background:var(--dark-blue); border-radius:24px; padding:44px; display:grid; grid-template-columns:1.3fr 1fr; gap:36px; align-items:center; overflow:hidden; position:relative; }
.leadmagnet .lm-eyebrow { color:#8fd0dc; font-size:.82rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin-bottom:10px; }
.leadmagnet h2 { color:#fff; font-size:clamp(1.5rem,3vw,2rem); margin-bottom:12px; }
.leadmagnet p { color:#cfe0e8; max-width:520px; }
.leadmagnet .lm-cta { margin-top:22px; display:flex; gap:14px; flex-wrap:wrap; }
.lm-visual { background:#fff; border-radius:16px; padding:24px; box-shadow:0 20px 45px -20px rgba(0,0,0,.5); }
.lm-visual .lm-title { font-family:"Roboto",Arial,sans-serif; font-weight:800; color:var(--dark-blue); font-size:1.05rem; margin-bottom:14px; }
.lm-check { display:flex; align-items:flex-start; gap:10px; padding:8px 0; color:var(--ink); font-size:.95rem; border-top:1px solid #eef1f2; }
.lm-check:first-of-type { border-top:none; }
.lm-check svg { flex:none; margin-top:2px; }

/* Downloads-Seite: Ratgeber-Karten */
.dl-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:22px; }
.dl-card { background:var(--white); border:1px solid #e5edf0; border-radius:18px; padding:26px 24px; display:flex; flex-direction:column; box-shadow:0 10px 30px -18px rgba(0,40,60,.28); transition:transform .18s ease, box-shadow .18s ease; }
.dl-card:hover { transform:translateY(-4px); box-shadow:0 18px 40px -18px rgba(0,40,60,.36); }
.dl-ic { font-size:2rem; line-height:1; margin-bottom:12px; }
.dl-card h2 { color:var(--dark-blue); font-size:1.22rem; margin:0 0 8px; }
.dl-card p { color:var(--ink-soft); font-size:.95rem; line-height:1.55; margin:0 0 20px; }
.dl-actions { margin-top:auto; display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.dl-actions .btn-whatsapp { align-self:stretch; text-align:center; }
.dl-direct { color:#2a7286; font-weight:600; font-size:.9rem; text-decoration:none; border-bottom:1px solid transparent; }
.dl-direct:hover { border-bottom-color:currentColor; }
.dl-note { text-align:center; color:var(--ink-soft); font-size:.9rem; max-width:640px; margin:30px auto 0; }

/* Kosten des Wartens: ehrlicher Verlust-Frame */
.wait-note { display:flex; gap:18px; align-items:flex-start; background:var(--light-blue-2); border-left:4px solid var(--gold); border-radius:16px; padding:24px 26px; }
.wait-note .wait-ic { font-size:2rem; line-height:1; flex:none; }
.wait-note .wait-body strong { display:block; color:var(--dark-blue); font-size:1.15rem; margin-bottom:6px; }
.wait-note .wait-body p { color:var(--ink-soft); margin:0 0 12px; line-height:1.55; max-width:70ch; }
.wait-note .wait-link { color:#2a7286; font-weight:700; text-decoration:none; }
.wait-note .wait-link:hover { text-decoration:underline; }
@media (prefers-color-scheme: dark){ .wait-note .wait-link { color:#8fd0dc; } }
@media (max-width:600px){ .wait-note { flex-direction:column; padding:20px; gap:10px; } .wait-note .wait-ic { font-size:1.9rem; } }

/* Video-Einbettung (responsiv, exakt 16:9) */
.video-frame { position:relative; aspect-ratio:16 / 9; max-width:860px; margin:0 auto; border-radius:18px; overflow:hidden; box-shadow:0 24px 55px -24px rgba(0,40,60,.5); }
.video-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
/* Fallback fuer sehr alte Browser ohne aspect-ratio */
@supports not (aspect-ratio: 1 / 1){ .video-frame { height:0; padding-top:56.25%; } }

/* Eyebrow zentriert (volle Breite, damit Raute + Text mittig stehen) */
.eyebrow-center { display:flex; justify-content:center; width:100%; text-align:center; }

/* ===== Video-Bibliothek (Facade: laedt Player erst beim Klick) ===== */
.vid-chips { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:0 auto 30px; }
.vid-swipe-hint { display:none; }
@media (max-width:600px){
  .vid-chips { flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; gap:8px; margin:0 -20px 6px; padding:2px 20px 10px; scrollbar-width:none; -webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,#000 82%,transparent); mask-image:linear-gradient(90deg,#000 82%,transparent); }
  .vid-chips::-webkit-scrollbar { display:none; }
  .vid-chip { flex:none; white-space:nowrap; }
  .vid-swipe-hint { display:block; text-align:center; color:var(--ink-soft); font-size:.82rem; margin:0 0 22px; }
}
.vid-chip { appearance:none; cursor:pointer; border:1px solid #d5e2e7; background:var(--white); color:var(--ink); font-size:.92rem; font-weight:600; padding:8px 16px; border-radius:999px; transition:all .15s ease; }
.vid-chip:hover { border-color:var(--turquoise); }
.vid-chip.active { background:var(--dark-blue); border-color:var(--dark-blue); color:#fff; }
.vid-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:24px; }
/* Bleibt bei einer ungeraden Anzahl Videos eine einzelne Karte in der letzten Reihe uebrig,
   wirkt sie links hängend unvollstaendig (Mikes Rueckmeldung 24.08.2026). Über die volle Breite
   spannen, aber die Karte selbst mittig statt gestreckt, dann steht sie wie eine eigene Reihe da. */
.vid-grid .vid-card:last-child:nth-child(odd) { grid-column:1 / -1; justify-self:center; width:100%; }
@media (min-width:640px){ .vid-grid .vid-card:last-child:nth-child(odd) { max-width:calc(50% - 12px); } }
.vid-card { display:flex; flex-direction:column; text-align:left; padding:0; border:1px solid #e5edf0; border-radius:16px; overflow:hidden; background:var(--white); cursor:pointer; box-shadow:0 10px 30px -20px rgba(0,40,60,.3); transition:transform .18s ease, box-shadow .18s ease; }
.vid-card:hover { transform:translateY(-4px); box-shadow:0 18px 40px -20px rgba(0,40,60,.4); }
.vid-thumb { position:relative; aspect-ratio:16 / 9; background:linear-gradient(135deg,var(--dark-blue),var(--turquoise)); overflow:hidden; }
.vid-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.vid-thumb iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.vid-play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:60px; height:60px; border-radius:50%; background:rgba(0,85,121,.92); display:flex; align-items:center; justify-content:center; box-shadow:0 6px 20px rgba(0,0,0,.3); transition:transform .18s ease, background .18s ease; }
.vid-card:hover .vid-play { transform:translate(-50%,-50%) scale(1.08); background:var(--dark-blue); }
.vid-play::after { content:""; border-style:solid; border-width:11px 0 11px 18px; border-color:transparent transparent transparent #fff; margin-left:4px; }
.vid-meta { padding:16px 18px 18px; display:flex; flex-direction:column; gap:6px; }
.vid-cat { font-size:.74rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#2a7286; }
.vid-title { font-family:"Roboto",Arial,sans-serif; font-weight:700; color:var(--dark-blue); font-size:1.08rem; line-height:1.3; }
.vid-card.is-hidden { display:none; }
.vid-empty { text-align:center; color:var(--ink-soft); padding:40px 0; }
/* Lightbox: Video waechst aus der Kachel in die Mitte, Rest abgedunkelt */
.vid-lightbox { position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(2,20,28,0); -webkit-backdrop-filter:blur(0); backdrop-filter:blur(0); transition:background-color .34s ease, backdrop-filter .34s ease; }
.vid-lightbox.open { display:flex; }
.vid-lightbox.shown { background:rgba(2,20,28,.88); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.vid-lb-stage { position:relative; width:min(94vw, 1000px); }
.vid-lb-frame { position:relative; aspect-ratio:16 / 9; border-radius:14px; overflow:hidden; background:#000; box-shadow:0 30px 90px rgba(0,0,0,.6); will-change:transform; }
.vid-lb-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.vid-lb-poster { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.vid-lb-close { position:absolute; top:-48px; right:0; width:40px; height:40px; border:none; border-radius:50%; background:rgba(255,255,255,.16); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; transition:background .15s ease, opacity .25s ease .1s; }
.vid-lightbox.shown .vid-lb-close { opacity:1; }
.vid-lb-close::before { content:"\00d7"; font-size:1.6rem; line-height:1; }
.vid-lb-close:hover { background:rgba(255,255,255,.3); }
.vid-lb-page { display:none; align-items:center; justify-content:center; gap:8px; margin:16px auto 0; padding:12px 22px; width:fit-content; background:var(--gold, #c4ab2b); color:var(--dark-blue, #0d2b45); font-weight:700; font-size:.95rem; text-decoration:none; border-radius:999px; opacity:0; transform:translateY(6px); transition:opacity .25s ease .15s, transform .25s ease .15s; }
.vid-lightbox.shown .vid-lb-page.has-page { display:flex; opacity:1; transform:translateY(0); }
.vid-lb-page:hover { filter:brightness(1.08); }
@media (max-width:600px){ .vid-lb-close { top:-44px; width:36px; height:36px; } .vid-lb-page { font-size:.88rem; padding:10px 18px; } }
@media (prefers-reduced-motion: reduce){ .vid-lightbox, .vid-lb-frame, .vid-lb-close, .vid-lb-page { transition:none; } }
@media (prefers-color-scheme: dark){
  .vid-chip { background:var(--white); border-color:rgba(255,255,255,.16); }
  .vid-card { border-color:rgba(255,255,255,.12); }
  .vid-cat { color:#8fd0dc; }
}

/* Dezenter, dauerhafter Puls fuer wichtige CTAs */
@keyframes btn-pulse { 0%,100%{ box-shadow:0 0 0 0 rgba(196,171,43,.55); } 50%{ box-shadow:0 0 0 12px rgba(196,171,43,0); } }
.btn-pulse { animation:btn-pulse 2.1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){ .btn-pulse { animation:none; } }
@media (prefers-color-scheme: dark){
  .dl-card { border-color:rgba(255,255,255,.12); }
  .dl-direct { color:#8fd0dc; }
}
@media (max-width:820px){ .leadmagnet{ grid-template-columns:1fr; padding:32px 26px; } }

/* ================= Dark-Mode für die neuen Komponenten ================= */
@media (prefers-color-scheme: dark){
  .proc-step h3, .case-card h3, .pyr-detail h3, .lm-visual .lm-title { color:var(--ink); }
  .case-card { background:var(--white); border-color:rgba(255,255,255,.10); }
  .case-tag { background:var(--light-blue-2); color:var(--ink); }
  .case-result { border-top-color:rgba(255,255,255,.10); color:var(--ink); }
  .pyr-detail p { color:#dbe7ec; }
  .pyr-l1 + .pyr-detail { background:#3a3316; }
  .pyr-l2 + .pyr-detail { background:#16323b; }
  .pyr-l3 + .pyr-detail { background:#123039; }
  .pyr-l4 + .pyr-detail { background:#0e2a3a; }
  .lm-visual { background:var(--white); }
  .lm-check { color:var(--ink); border-top-color:rgba(255,255,255,.10); }
  .proc-num { box-shadow:none; }
}

/* Dark-Mode Kontrast-Feinschliff (am Dateiende, damit es die Basisfarben sicher ueberschreibt) */
@media (prefers-color-scheme: dark){
  .faq-item summary { color:#8fd0dc; }
  .service-card .more { color:#8fd0dc; }
  .hero-trust .stat strong { color:#e7f0f3; }
  .about-facts li strong { color:#cfe0e8; }
  .field label { color:#e7f0f3; }
  .contact-details .item .label { color:#e7f0f3; }
}

/* ============================================================
   MOBILE-STANDARD (ab 22.07.2026): ALLE Buttons zentriert
   Gilt fuer die gesamte Website in der mobilen Ansicht (<=820px):
   Button-Reihen, einzelne Buttons, Download-/Termin-/Weiter-Buttons.
   Neue Buttons werden automatisch mittig gesetzt.
   Bewusst AUSGENOMMEN: Header-CTA und die fixe mobile Kontakt-Leiste
   (die liegen ausserhalb von <main> bzw. haben ihr eigenes Layout).
   ============================================================ */
@media (max-width:820px){
  .lp-ctas, .hero-ctas, .contact-ctas, .referral-ctas, .berater .berater-cta,
  .lm-cta, .related-chips, .services-foot, .testimonials-foot, .faq-foot,
  .aud-chips, .chips, .mc-chips, .contact-card .contact-ctas {
    display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:12px;
  }
  /* einzeln stehende Buttons zentrieren (ohne Flex-Reihe drumherum) */
  main .btn:only-child,
  .lp-section .container > .btn,
  .lp-final .container > .btn,
  .about-grid > div > .btn,
  .container > .btn {
    display:block; width:fit-content; margin-left:auto; margin-right:auto;
  }
}

/* ===== Abschnitts-Ueberschriften auf dem Handy zentrieren (Standard 22.07.2026) ===== */
@media (max-width:820px){
  main h2 { text-align:center; }
  main .eyebrow { display:flex; justify-content:center; }
  .testimonials-head { flex-direction:column; align-items:center; text-align:center; }
  .testimonials-score { text-align:center; }
}

/* ===== Promise-Badge auf zwei Zeilen (30 Minuten / kostenlos & unverbindlich) ===== */
/* (Basis-Regel oben; hier nichts weiter noetig) */

/* ===== Partnervereine-Banner (Sponsoring-Seite), statisch ===== */
.verein-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:820px; margin:0 auto; }
.verein-card { background:#fff; border:1px solid #e7eaee; border-radius:18px; padding:24px; display:flex; align-items:center; justify-content:center; min-height:172px; box-shadow:var(--shadow); }
.verein-card img { max-width:150px; max-height:120px; width:auto; height:auto; object-fit:contain; }
@media (prefers-color-scheme: dark){
  .verein-card { background:#c4d2da; border-color:rgba(255,255,255,.14); box-shadow:none; }
}
.verein-empty { flex-direction:column; gap:8px; text-decoration:none; border:2px dashed #c2ccd2; background:var(--light-blue-2); color:var(--dark-blue); text-align:center; transition:border-color .2s ease, transform .2s ease; }
.verein-empty:hover { border-color:var(--turquoise); transform:translateY(-2px); }
.verein-empty .ve-plus { font-size:2rem; font-weight:800; color:var(--turquoise); line-height:1; }
.verein-empty .ve-text { font-weight:700; font-size:1rem; }
@media (max-width:720px){ .verein-grid { grid-template-columns:1fr; max-width:320px; } }
@media (prefers-color-scheme: dark){
  .verein-empty { border-color:rgba(255,255,255,.22); color:#cfe0e8; }
  .verein-empty .ve-plus { color:#8fd0dc; }
}

/* ===== 30-Minuten-Badge auf dem Handy mittig ===== */
@media (max-width:820px){
  .promise-badge { display:flex; width:-moz-fit-content; width:fit-content; margin-left:auto; margin-right:auto; }
}

/* ===== SuperChat-Button auf dem Handy ueber die feste Kontakt-Leiste heben,
   damit er nicht dahinter verschwindet ===== */
@media (max-width:720px){
  #superchat-widget, [id^="superchat"], [class^="superchat"], superchat-messenger, sc-messenger, sc-widget {
    bottom: 94px !important;
    z-index: 950 !important;
  }
}

/* ===== Finanz-Rechner-Hub: Kachel-Grid ===== */
.rechner-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.rechner-tile { display:flex; flex-direction:column; gap:6px; background:#fff; border:1px solid #e7eaee; border-radius:16px; padding:22px; text-decoration:none; color:inherit; box-shadow:var(--shadow); transition:transform .18s ease, border-color .18s ease; appearance:none; -webkit-appearance:none; font:inherit; text-align:left; width:100%; cursor:pointer; }
.rechner-tile:hover { transform:translateY(-3px); border-color:var(--turquoise); }
.rechner-tile .rt-ic { font-size:1.6rem; line-height:1; }
.rechner-tile strong { color:var(--dark-blue); font-size:1.05rem; }
.rechner-tile span:last-child { color:var(--ink-soft); font-size:.92rem; line-height:1.4; }
@media (max-width:900px){ .rechner-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .rechner-grid { grid-template-columns:repeat(2,1fr); gap:10px; } .rechner-tile { padding:14px; } .rechner-tile .rt-ic { font-size:1.4rem; } .rechner-tile strong { font-size:.92rem; } .rechner-tile span:last-child { font-size:.8rem; } }
/* Rechner-Lightbox: Rechner schwingt aus der Kachel in die Mitte, Rest abgedunkelt */
.acc-sec, .rechner-acc-heading { display:none !important; }
.calc-lightbox { position:fixed; inset:0; z-index:1000; display:none; align-items:flex-start; justify-content:center; padding:4vh 16px; overflow-y:auto; background:rgba(2,20,28,0); -webkit-backdrop-filter:blur(0); backdrop-filter:blur(0); transition:background-color .34s ease, backdrop-filter .34s ease; }
.calc-lightbox.open { display:flex; }
.calc-lightbox.shown { background:rgba(2,20,28,.82); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.calc-lb-panel { position:relative; width:min(96vw, 640px); margin:auto; will-change:transform; }
.calc-lb-body > .calc { margin:0; width:100%; max-width:none; }
.calc-lb-close { position:absolute; top:12px; right:12px; z-index:3; width:36px; height:36px; border:none; border-radius:50%; background:rgba(255,255,255,.2); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; transition:background .15s ease, opacity .25s ease .05s; }
.calc-lightbox.shown .calc-lb-close { opacity:1; }
.calc-lb-close::before { content:"\00d7"; font-size:1.5rem; line-height:1; }
.calc-lb-close:hover { background:rgba(255,255,255,.34); }
@media (prefers-reduced-motion: reduce){ .calc-lightbox, .calc-lb-panel { transition:none; } }

@media (prefers-color-scheme: dark){
  .rechner-tile { background:var(--white); border-color:rgba(255,255,255,.10); }
  .rechner-tile strong { color:#e7f0f3; }
}

/* ===== Rechner: Sprung mittig + goldener Rahmen zeichnet sich beim Anwählen einmal herum (ab 12 Uhr) ===== */
@property --calc-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.calc { scroll-margin-top: 90px; position: relative; }
.calc.is-target::after {
  content:""; position:absolute; inset:0; border-radius:inherit; padding:2.5px; pointer-events:none; z-index:3;
  background: conic-gradient(from 0deg, var(--gold) var(--calc-a), transparent var(--calc-a));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: calc-draw 1.15s ease forwards, calc-draw-fade .5s ease 1.35s forwards;
}
@keyframes calc-draw { from { --calc-a:0deg; } to { --calc-a:360deg; } }
@keyframes calc-draw-fade { to { opacity:0; } }
@media (prefers-reduced-motion: reduce){ .calc.is-target::after { animation:none; opacity:0; } }

/* ===== Pyramide auf dem Handy: Form bleibt (getreppt wie Desktop), Infobox = Breite der jeweiligen Stufe ===== */
@media (max-width:620px){
  .pyr-l1 + .pyr-detail, .pyr-l2 + .pyr-detail { min-width:0; }
}

/* ===== Rechner-Akkordeon (zugeklappt, öffnet beim Anwählen) ===== */
.acc-sec { padding:0; }
.calc-acc { border-radius:16px; margin:12px 0; scroll-margin-top:90px; box-shadow:0 14px 34px -20px rgba(0,40,60,.5); }
.calc-acc > .cah { list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px; padding:18px 22px; background:var(--dark-blue); color:#fff; font-family:"Roboto",Arial,sans-serif; font-weight:700; font-size:1.05rem; border-radius:16px; transition:filter .15s ease; }
.calc-acc[open] > .cah { border-radius:16px 16px 0 0; }
.calc-acc > .cah::-webkit-details-marker { display:none; }
.calc-acc > .cah:hover { filter:brightness(1.09); }
.cah-ic { font-size:1.3rem; line-height:1; }
.cah-t { flex:1; }
.cah-x { position:relative; width:18px; height:18px; flex:none; }
.cah-x::before, .cah-x::after { content:""; position:absolute; background:#8fd0dc; border-radius:2px; }
.cah-x::before { top:8px; left:0; width:18px; height:2.5px; }
.cah-x::after { left:8px; top:0; width:2.5px; height:18px; transition:opacity .2s ease; }
.calc-acc[open] .cah-x::after { opacity:0; }
.calc-acc .cab .calc { margin-top:0; border-radius:0 0 16px 16px; }

/* ===== Kontrast-Feinschliff (Eyebrow + Badge-Gold) ===== */
@media (prefers-color-scheme: dark){
  .eyebrow { color:#8fd0dc; }
  .cred-badges span b { color:#e7c35a; }
  .testi-tag, .case-row .cr-label { color:#8fd0dc; }
  .article-card .ac-cat { color:#8fd0dc; }
}

/* ===== Meine Mission (Foto-Band) ===== */
.mission-band { position:relative; overflow:hidden; min-height:520px; display:flex; align-items:center; }
.mission-band .mb-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:26% 20%; }
.mission-band .mb-checks { list-style:none; margin:0 0 22px; padding:0; display:grid; gap:9px; }
.mission-band .mb-checks li { position:relative; padding-left:28px; color:rgba(255,255,255,.94); font-size:1rem; line-height:1.4; }
.mission-band .mb-checks li::before { content:"✓"; position:absolute; left:0; top:0; color:#c4ab2b; font-weight:700; }
.mission-band .mb-overlay { position:absolute; inset:0; background:linear-gradient(100deg, rgba(2,20,28,.28) 0%, rgba(2,20,28,.45) 40%, rgba(0,85,121,.88) 78%); }
.mission-band .mb-wrap { position:relative; width:100%; }
.mission-band .mb-inner { margin-left:auto; max-width:540px; color:#fff; padding:54px 0; }
.mission-band .mb-inner h2 { color:#fff; margin:6px 0 14px; }
.mission-band .mb-inner p { color:rgba(255,255,255,.92); margin:0 0 22px; font-size:1.05rem; line-height:1.6; }
.mission-band .mb-raute { display:inline-block; width:20px; height:20px; background:#c4ab2b; transform:rotate(45deg); margin-bottom:14px; }
@media (max-width:820px){
  .mission-band .mb-overlay { background:linear-gradient(180deg, rgba(2,20,28,.32) 0%, rgba(2,20,28,.55) 38%, rgba(0,85,121,.93) 100%); }
  .mission-band .mb-bg { object-position:32% 16%; }
  .mission-band .mb-inner { max-width:none; text-align:center; padding:240px 0 46px; }
  .mission-band .mb-checks { max-width:330px; margin-left:auto; margin-right:auto; text-align:left; }
}

/* ===== Bewertungs-Einladung (Foto + CTA) ===== */
.review-invite { display:flex; align-items:center; gap:28px; background:var(--light-blue-2); border:1px solid #e2ebef; border-radius:20px; padding:24px 28px; margin-top:34px; flex-wrap:wrap; }
.review-invite .ri-photo { width:184px; height:224px; object-fit:cover; object-position:50% 18%; border-radius:16px; flex:none; box-shadow:0 6px 18px rgba(0,0,0,.14); }
.review-invite .ri-text { flex:1; min-width:260px; }
.review-invite .ri-text .stars { color:#c4ab2b; font-size:1.1rem; letter-spacing:2px; }
.review-invite .ri-text h3 { color:var(--dark-blue); margin:6px 0 8px; font-size:1.3rem; }
.review-invite .ri-text p { color:var(--ink-soft); margin:0 0 16px; }
@media (max-width:640px){ .review-invite { flex-direction:column; text-align:center; } .review-invite .ri-photo { width:170px; height:210px; } }

/* ===== Empfehlungs-Video: Klick öffnet abgedunkelte Lightbox ===== */
.emf-video { position:relative; cursor:pointer; }
.emf-video iframe { pointer-events:none; }
.emf-play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:80px; height:80px; border-radius:50%; background:rgba(0,85,121,.92); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px rgba(0,0,0,.35); transition:transform .18s ease, background .18s ease; pointer-events:none; }
.emf-play svg { margin-left:4px; }
.emf-video:hover .emf-play, .emf-video:focus-visible .emf-play { transform:translate(-50%,-50%) scale(1.08); background:#005579; }

/* ===== Superchat-Widget mobil unten links (Best-Effort-Override) ===== */
@media (max-width: 720px){
  #superchat-widget, .superchat-widget, [id^="superchat"], [class*="superchat"],
  iframe[src*="superchat"], iframe[title*="uperchat"] {
    right: 14px !important; left: auto !important; bottom: 14px !important;
  }
}

/* ===== Social-Reihe in Über-mich ===== */
.about-social { display:flex; align-items:center; gap:14px; margin-top:22px; flex-wrap:wrap; }
.about-social .as-label { color:var(--ink-soft); font-size:.95rem; font-weight:600; }

/* ===== Sponsoring-Hinweis-Banner (dezent, schließbar) ===== */
.spons-toast { position:fixed; left:18px; right:auto; bottom:18px; z-index:900; width:372px; max-width:calc(100vw - 36px);
  background:var(--white); border:1px solid #e2ebef; border-radius:16px; box-shadow:0 16px 44px rgba(2,20,28,.22);
  padding:16px 16px 16px 16px; display:flex; gap:12px; align-items:flex-start;
  transform:translateY(24px); opacity:0; pointer-events:none; transition:transform .4s cubic-bezier(.22,.61,.36,1), opacity .4s ease; }
.spons-wrap.show .spons-toast { transform:translateY(0); opacity:1; pointer-events:auto; }
.spons-toast .st-ico { flex:none; width:44px; height:44px; border-radius:12px; background:var(--light-blue-2); color:var(--dark-blue); display:flex; align-items:center; justify-content:center; }
.spons-toast .st-body { flex:1; min-width:0; }
.spons-toast .st-body strong { display:block; color:var(--dark-blue); font-size:1rem; }
.spons-toast .st-body p { color:var(--ink-soft); font-size:.88rem; margin:3px 0 10px; line-height:1.4; }
.spons-toast .st-body .btn { padding:8px 16px; font-size:.9rem; }
.spons-toast .st-close { position:absolute; top:8px; right:10px; background:none; border:none; color:var(--ink-soft); font-size:1.3rem; line-height:1; cursor:pointer; padding:2px 6px; border-radius:8px; }
.spons-toast .st-close:hover { background:#f1f2f2; color:var(--dark-blue); }
@media (max-width:720px){ .spons-toast { left:12px; right:auto; bottom:88px; width:320px; max-width:calc(100vw - 24px); } }
@media (prefers-color-scheme: dark){ .spons-toast { background:var(--light-blue-2); border-color:rgba(255,255,255,.10); } .spons-toast .st-close:hover { background:rgba(255,255,255,.08); } }

/* ===== Desktop-Nav-Dropdowns (Privatkunden, Geschäftskunden, Finanzwissen) ===== */
.main-nav .nav-item { position:relative; display:inline-flex; align-items:center; }
.nav-dropdown { position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(8px);
  min-width:248px; background:var(--white); border:1px solid #e2ebef; border-radius:14px;
  box-shadow:0 18px 44px rgba(2,20,28,.16); padding:8px; z-index:250;
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .18s ease, transform .22s cubic-bezier(.22,.61,.36,1); }
.nav-dropdown::before { content:""; position:absolute; top:-10px; left:0; right:0; height:10px; }
.main-nav .nav-item:hover .nav-dropdown, .main-nav .nav-item:focus-within .nav-dropdown {
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(2px); }
.nav-dropdown a { display:block !important; width:auto !important; padding:9px 14px !important; border:0 !important;
  border-radius:9px; color:var(--ink); font-size:.95rem; font-weight:500; white-space:nowrap; }
.nav-dropdown a:hover { background:var(--light-blue-2); color:var(--dark-blue); border:0 !important; }
@media (prefers-color-scheme: dark){ .nav-dropdown { background:#0d2530; border-color:rgba(255,255,255,.12); } .nav-dropdown a { color:var(--ink); } .nav-dropdown a:hover { background:rgba(255,255,255,.06); color:#fff; } }
@media (max-width:1040px){
  .nav-dropdown { display:none !important; }
  .main-nav .nav-item { width:100%; display:block; margin:0; }
  .main-nav .nav-item > a { display:block; width:100%; padding:12px 0; border-bottom:1px solid #f1f2f2; }
}
@media (prefers-color-scheme: dark){ .main-nav .nav-item > a { border-bottom-color: rgba(255,255,255,.08); } }

/* ===== Liquid Glass: Navigationsleiste und Dropdowns =====
   Stand 31.07.2026: Die Dropdowns hatten eigene Werte (dichter, weniger
   Sättigung, im Dunkelmodus sogar eine andere Grundfarbe und gar keine
   Sättigung). Jetzt exakt dieselben Werte wie die Leiste darüber, damit
   beim Aufklappen kein Materialbruch entsteht. */
.site-header,
.nav-dropdown {
  background: rgba(255,255,255,0.7) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
          backdrop-filter: blur(16px) saturate(1.5);
}
.nav-dropdown { border-color: rgba(255,255,255,.55); }

@media (prefers-color-scheme: dark){
  .site-header,
  .nav-dropdown {
    background: rgba(13,19,24,0.66) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
            backdrop-filter: blur(16px) saturate(1.4);
  }
  .nav-dropdown { border-color: rgba(255,255,255,.14); }
}

/* Browser ohne backdrop-filter bekommen eine deckende Fläche,
   sonst wäre der Text über hellem Inhalt nicht lesbar. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header, .nav-dropdown { background: rgba(255,255,255,0.97) !important; }
  @media (prefers-color-scheme: dark){
    .site-header, .nav-dropdown { background: rgba(13,19,24,0.97) !important; }
  }
}

/* ===== FAQ-Master: ganzer FAQ-Block erst eingeklappt ===== */
.faq-master { max-width:820px; margin:0 auto; }
.faq-master > summary.faq-master-sum { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:14px;
  padding:17px 26px; border:1px solid var(--line,#e2e8ec); border-radius:14px; background:var(--white);
  font-family:"Roboto",Arial,sans-serif; font-weight:700; font-size:1.1rem; color:var(--dark-blue); transition:box-shadow .18s ease, border-color .18s ease; }
.faq-master > summary.faq-master-sum:hover { border-color:var(--turquoise); box-shadow:0 8px 24px rgba(0,85,121,.08); }
.faq-master > summary::-webkit-details-marker { display:none; }
.faq-master[open] > summary.faq-master-sum { margin-bottom:16px; border-color:var(--turquoise); }
.faq-master-sum .faq-plus { position:relative; flex:none; width:24px; height:24px; color:var(--turquoise); }
.faq-master-sum .faq-plus::before, .faq-master-sum .faq-plus::after { content:""; position:absolute; background:currentColor; border-radius:2px; }
.faq-master-sum .faq-plus::before { top:11px; left:3px; width:18px; height:3px; }
.faq-master-sum .faq-plus::after { left:10.5px; top:3px; width:3px; height:18px; transition:transform .2s ease; }
.faq-master[open] > summary .faq-plus::after { transform:scaleY(0); }
@media (prefers-color-scheme: dark){ .faq-master > summary.faq-master-sum { background:var(--light-blue-2); border-color:rgba(255,255,255,.12); color:#8fd0dc; } }

/* ===== Sponsoring-Banner: größer + präsenter (Brand-Farbe) ===== */
.spons-toast { width:410px; padding:20px 20px 20px 20px; background:linear-gradient(135deg,#005579,#02141c) !important; border:2px solid #c4ab2b !important; box-shadow:0 22px 56px rgba(2,20,28,.4); }
.spons-toast .st-ico { background:rgba(255,255,255,.14); color:#fff; width:50px; height:50px; }
.spons-toast .st-body strong { color:#fff; font-size:1.16rem; }
.spons-toast .st-body p { color:rgba(255,255,255,.9); font-size:.94rem; margin:4px 0 12px; }
.spons-toast .st-body .btn.btn-primary { background:#c4ab2b; color:#02141c; padding:9px 18px; font-size:.94rem; }
.spons-toast .st-body .btn.btn-primary:hover { background:#d8bd35; }
.spons-toast .st-close { color:rgba(255,255,255,.72); }
.spons-toast .st-close:hover { background:rgba(255,255,255,.12); color:#fff; }
@media (max-width:720px){ .spons-toast { width:340px; } }
@media (prefers-color-scheme: dark){ .spons-toast { background:linear-gradient(135deg,#005579,#02141c) !important; } }

/* ===== Über-mich-Modal (per "Lern mich kennen") ===== */
.about-modal { position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; padding:24px;
  background:rgba(2,20,28,0); -webkit-backdrop-filter:blur(0); backdrop-filter:blur(0); transition:background-color .34s ease, backdrop-filter .34s ease; }
.about-modal.open { display:flex; }
.about-modal.shown { background:rgba(2,20,28,.86); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.about-modal .am-card { position:relative; width:min(94vw,940px); max-height:88vh; overflow:auto; background:var(--white); border-radius:20px;
  padding:8px; box-shadow:0 40px 100px rgba(0,0,0,.5); transform:translateY(18px) scale(.985); opacity:0; transition:transform .3s ease, opacity .3s ease; }
.about-modal.shown .am-card { transform:none; opacity:1; }
.about-modal .am-card .about { padding:34px 30px !important; }
.about-modal .am-card .about .raute { display:none; }
.about-modal .am-close { position:absolute; top:12px; right:14px; z-index:2; width:40px; height:40px; border:none; border-radius:50%;
  background:var(--light-blue-2); color:var(--dark-blue); font-size:1.5rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.about-modal .am-close:hover { background:#dbe6ec; }
@media (prefers-color-scheme: dark){ .about-modal .am-card { background:#0d2530; } .about-modal .am-close { background:rgba(255,255,255,.12); color:#fff; } }

/* ===== Mobil: Leistungskacheln kompakter, 2 nebeneinander ===== */
@media (max-width:640px){
  .service-grid { grid-template-columns: repeat(2, 1fr) !important; gap:12px; }
  .service-card { padding:16px 13px; border-radius:14px; text-align:center; }
  .service-card .icon { width:40px; height:40px; margin:0 auto 12px; border-radius:11px; }
  .service-card h3 { font-size:1rem; line-height:1.25; }
  .service-card p { font-size:.83rem; line-height:1.42; margin-top:6px; }
  .service-card .more, .service-card .svc-more { font-size:.85rem; }
  .service-card.overview-card { grid-column:auto; }
}

/* ===== Sponsoring: mobil als gehighlightetes Popup (abgedunkelt, zentriert) ===== */
.spons-overlay { display:none; }
@media (max-width:720px){
  .spons-overlay { display:block; position:fixed; inset:0; z-index:898; background:rgba(2,20,28,0); transition:background-color .4s ease; }
  .spons-wrap.show .spons-overlay { background:rgba(2,20,28,.72); }
  .spons-toast { position:fixed; left:50%; top:50%; right:auto; bottom:auto; width:86vw; max-width:360px;
    transform:translate(-50%,-46%); }
  .spons-wrap.show .spons-toast { transform:translate(-50%,-50%); }
}

/* Mobil: Mission-Titel nicht abschneiden */
@media (max-width:560px){ .mission-band .mb-inner h2 { font-size:1.5rem; line-height:1.2; } }

/* ===== Social-Icons in der Fußzeilen-Leiste ===== */
.footer-bottom { flex-wrap:wrap; gap:14px; }
.footer-bottom .footer-social { gap:10px; }
.footer-bottom .footer-social a { width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.09); color:rgba(255,255,255,.85); display:inline-flex; align-items:center; justify-content:center; transition:background .15s ease, color .15s ease; }
.footer-bottom .footer-social a:hover { background:rgba(255,255,255,.18); color:#fff; }
@media (max-width:640px){ .footer-bottom { justify-content:center; text-align:center; } .footer-bottom .footer-social { order:3; width:100%; justify-content:center; } }

/* ===== Feinschliff 24.07 (b) ===== */
/* A) Kein horizontaler Überlauf (Kacheln liefen mobil nach rechts) */
html { overflow-x: clip; }
body { overflow-x: clip; }
@media (max-width:640px){ #leistungen .service-grid { margin-left:auto; margin-right:auto; } }

/* B) „Lern mich kennen"-Modal: Inhalt zentriert, saubere Ränder (mobil) */
@media (max-width:720px){
  #about-modal .about-grid { text-align:center; padding-left:20px; padding-right:20px; }
  #about-modal .cred-badges { justify-content:center; align-items:center; }
  #about-modal .about-social { justify-content:center; }
  #about-modal .about-facts, #about-modal dl, #about-modal table { max-width:440px; margin-left:auto; margin-right:auto; text-align:left; }
  #about-modal .berater-cta, #about-modal .lp-ctas { justify-content:center; }
}

/* C) Desktop: 30-Minuten-Block Badge + Buttons zentriert */
.promise { text-align:center; }
.promise .promise-badge { margin-left:auto; margin-right:auto; }
.promise > p, .promise .promise-reassure { margin-left:auto; margin-right:auto; }
.promise .promise-points { display:inline-block; text-align:left; margin-left:auto; margin-right:auto; }
.promise .lp-ctas { justify-content:center; }

/* ===== Fix 24.07 (c): echte Ursache – lange Wörter sprengen Grid-Spalten ===== */
@media (max-width:640px){
  #leistungen .service-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .service-card { min-width:0; }
  .service-card h3 { overflow-wrap:anywhere; word-break:break-word; hyphens:auto; }
  .service-card p { overflow-wrap:anywhere; }
}
/* Modal „Lern mich kennen" wirklich zentrieren */
#about-modal .about-grid { grid-template-columns:1fr !important; }
#about-modal .about-grid > div { max-width:560px; margin-left:auto; margin-right:auto; text-align:center; }
#about-modal .about-media, #about-modal .about-media .frame { margin-left:auto; margin-right:auto; }
#about-modal .cred-badges, #about-modal .about-social, #about-modal .berater-cta, #about-modal .lp-ctas { justify-content:center; }
#about-modal .about-facts, #about-modal dl { text-align:left; display:inline-block; margin-left:auto; margin-right:auto; }

/* Top-Rechner hervorheben */
.calc-top-label{ text-align:center; margin:0 0 14px; }
.calc-top-label span{ display:inline-flex; align-items:center; gap:8px; font-weight:700; color:var(--dark-blue); letter-spacing:.02em; }
.rechner-tile.rt-top{ border:2px solid var(--gold); }
/* Mobil sind die Kacheln zweispaltig, deshalb sehen drei goldene Rahmen
   unruhig aus (eine Reihe voll, eine halb). Auf dem Handy daher die ersten
   VIER hervorheben, das ergibt zwei saubere Reihen. Desktop bleibt bei drei. */
@media (max-width:900px){
  .rechner-grid .rechner-tile:nth-child(-n+4){ border:2px solid var(--gold); }
}
/* Downloads Mail-Button */
.dl-actions{ display:flex; flex-wrap:wrap; gap:10px; }
/* Empfehlungslink-Generator-Modal */
.refgen-modal{ position:fixed; inset:0; z-index:1100; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(2,20,28,.72); }
.refgen-modal.open{ display:flex; }
.refgen-modal .rg-card{ position:relative; width:min(94vw,460px); background:var(--white); border-radius:18px; padding:30px 26px; box-shadow:0 30px 80px rgba(0,0,0,.4); text-align:center; }
.refgen-modal h3{ color:var(--dark-blue); margin:0 0 8px; }
.refgen-modal p{ color:var(--ink-soft); font-size:.95rem; margin:0 0 16px; }
.refgen-modal .rg-input{ width:100%; padding:12px 14px; border:1px solid #d5dee4; border-radius:10px; font-size:1rem; margin-bottom:14px; box-sizing:border-box; }
.refgen-modal .rg-out{ display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.refgen-modal .rg-close{ position:absolute; top:10px; right:12px; width:34px; height:34px; border:none; border-radius:50%; background:var(--light-blue-2); font-size:1.3rem; line-height:1; cursor:pointer; color:var(--dark-blue); }
@media (prefers-color-scheme: dark){ .refgen-modal .rg-card{ background:#0d2530; } .refgen-modal .rg-input{ background:#0a1c25; color:#fff; border-color:rgba(255,255,255,.15);} }

/* ===== Brain-Dump-Feinschliff II (24.07) ===== */
/* Downloads: Buttons in den Kacheln zentriert statt links */
.dl-actions{ align-items:center; }
/* Sponsoring-Popup mobil etwas größer */
@media (max-width:720px){
  .spons-toast{ width:92vw; max-width:420px; padding:22px 20px; }
  .spons-toast .st-ico{ width:52px; height:52px; }
  .spons-toast .st-body strong{ font-size:1.2rem; }
  .spons-toast .st-body p{ font-size:1rem; }
  .spons-toast .st-body .btn.btn-primary{ padding:11px 20px; font-size:1rem; }
}
/* Über-mich-Modal mobil: nur Bild + einfacher Text, zentriert, Rest weg */
@media (max-width:640px){
  #about-modal .cred-badges,
  #about-modal .about-facts,
  #about-modal .about-social{ display:none !important; }
  #about-modal .about-grid > div{ text-align:center; }
  #about-modal .about-media{ margin:0 auto 8px; }
  #about-modal .about-grid .btn{ margin-left:auto; margin-right:auto; }
}
/* Refgen: leeres Namensfeld -> rot umrandet + kurz wackeln */
.rg-input.rg-err{ border-color:#e03434 !important; box-shadow:0 0 0 3px rgba(224,52,52,.15); animation:rgShake .4s; }
@keyframes rgShake{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-7px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(3px)} }
/* Karriere-Empfehlung: 3 Einstiegswege */
.kw-paths{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:8px; }
.kw-path{ background:var(--white); border:1px solid #e4e9ec; border-top:4px solid var(--gold); border-radius:16px; padding:26px 24px; display:flex; flex-direction:column; }
.kw-path h3{ font-size:1.24rem; color:var(--dark-blue); margin:4px 0 2px; }
.kw-path .kw-tag{ font-size:.8rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#a8892a; }
.kw-path > p{ color:var(--ink-soft); font-size:.96rem; margin:6px 0 0; }
.kw-path ul{ list-style:none; padding:0; margin:14px 0 0; display:flex; flex-direction:column; gap:9px; }
.kw-path li{ position:relative; padding-left:26px; font-size:.97rem; line-height:1.4; color:var(--ink-soft); }
.kw-path li::before{ content:""; position:absolute; left:0; top:2px; width:17px; height:17px; border-radius:50%; background:var(--light-blue-2); }
.kw-path li::after{ content:""; position:absolute; left:5px; top:6px; width:6px; height:3px; border-left:2px solid var(--dark-blue); border-bottom:2px solid var(--dark-blue); transform:rotate(-45deg); }
@media (max-width:820px){ .kw-paths{ grid-template-columns:1fr; } }
@media (prefers-color-scheme: dark){ .kw-path{ background:#0d2530; border-color:rgba(255,255,255,.1); } }

/* ===== Brain-Dump-Feinschliff III (24.07) ===== */
/* Empfehlungs-Blöcke Startseite: zwei nebeneinander */
.refer-duo{ display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:stretch; }
.refer-duo .refer{ max-width:none; margin:0; padding:34px 30px; height:100%; }
.refer-duo .refer h2{ font-size:1.55rem; }
.refer-duo .refer .analogy{ font-size:1.02rem; }
@media (max-width:820px){ .refer-duo{ grid-template-columns:1fr; } }
/* Refgen: kräftig sichtbarer roter Ring bei leerem Namensfeld */
.rg-input.rg-err{ border:2px solid #e03434 !important; box-shadow:0 0 0 4px rgba(224,52,52,.28) !important; animation:rgShake .4s; }
/* Karriere-Empfehlung: Team-Band */
.team-band{ display:grid; grid-template-columns:minmax(0,300px) 1fr; gap:34px; align-items:center; }
.team-media img{ width:100%; height:auto; border-radius:18px; box-shadow:var(--shadow); display:block; }
.team-text h2{ margin:6px 0 12px; }
.team-text p{ color:var(--ink-soft); line-height:1.6; margin:0 0 12px; }
@media (max-width:760px){ .team-band{ grid-template-columns:1fr; } .team-media{ max-width:320px; margin:0 auto; } .team-text{ text-align:center; } }

/* ===== Brain-Dump-Feinschliff IV (25.07) ===== */
/* Downloads: WhatsApp-Button-Inhalt mittig */
.dl-actions .btn-whatsapp{ display:flex; align-items:center; justify-content:center; text-align:center; }
/* Sponsoring-Popup mobil klar größer */
@media (max-width:720px){
  .spons-toast{ width:94vw !important; max-width:460px !important; padding:24px 22px !important; }
  .spons-toast .st-ico{ width:54px !important; height:54px !important; }
  .spons-toast .st-body strong{ font-size:1.24rem !important; }
  .spons-toast .st-body p{ font-size:1.02rem !important; line-height:1.5 !important; }
  .spons-toast .st-body .btn.btn-primary{ padding:12px 22px !important; font-size:1.02rem !important; }
}
/* Empfehlungs-Duo mobil: Wisch-Karussell mit Punkten + Hinweis */
.refer-hint{ display:none; }
.refer-dots{ display:none; }
@media (max-width:820px){
  .refer-duo{ display:flex; grid-template-columns:none; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; gap:16px; padding-bottom:2px; }
  .refer-duo::-webkit-scrollbar{ display:none; }
  .refer-duo > .refer{ flex:0 0 88%; scroll-snap-align:center; }
  .refer-hint{ display:block; text-align:center; color:var(--ink-soft); font-size:.85rem; margin:16px 0 0; }
  .refer-dots{ display:flex; }
}

/* ===== Scroll-Reveal: Abschnitte, Kacheln und Bilder bauen sich beim Runterscrollen auf ===== */
.reveal{ opacity:0; transform:translateY(26px); }
.reveal-item{ opacity:0; transform:translateY(22px); }
.reveal-left{ opacity:0; transform:translateX(-42px); }
.reveal-right{ opacity:0; transform:translateX(42px); }
.reveal, .reveal-item, .reveal-left, .reveal-right{
  transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}
.reveal.in-view, .reveal-item.in-view, .reveal-left.in-view, .reveal-right.in-view{ opacity:1; transform:none; }
/* Nach der Animation nichts mehr blockieren (Performance) */
.reveal.in-view, .reveal-item.in-view, .reveal-left.in-view, .reveal-right.in-view{ will-change:auto; }
@media (max-width:720px){
  /* Auf dem Handy dezenter und ohne Seitwärts-Bewegung (kein horizontaler Ruckler) */
  .reveal-left, .reveal-right{ transform:translateY(20px); }
}
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-item, .reveal-left, .reveal-right{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ===== Consent-Banner ===== */
.cc-bar{ position:fixed; left:0; right:0; bottom:0; z-index:1200; background:var(--white); border-top:3px solid var(--gold);
  box-shadow:0 -12px 40px rgba(2,20,28,.18); transform:translateY(110%); transition:transform .32s cubic-bezier(.22,.61,.36,1); }
.cc-bar.show{ transform:translateY(0); }
.cc-inner{ max-width:1140px; margin:0 auto; padding:18px 22px; display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.cc-inner p{ flex:1 1 420px; min-width:0; margin:0; font-size:.94rem; line-height:1.5; color:var(--ink-soft); }
.cc-inner p a{ color:var(--dark-blue); font-weight:600; }
.cc-btns{ display:flex; gap:10px; flex-wrap:wrap; }
.cc-btns .btn{ padding:11px 20px; font-size:.95rem; }
@media (max-width:720px){
  .cc-inner{ padding:16px 16px 18px; gap:14px; }
  .cc-inner p{ flex:1 1 100%; font-size:.9rem; }
  .cc-btns{ width:100%; }
  .cc-btns .btn{ flex:1 1 auto; text-align:center; }
  .cc-bar{ bottom:0; padding-bottom:env(safe-area-inset-bottom); }
  body:has(.cc-bar.show) .mobile-cta-bar{ bottom:150px; }
}
@media (prefers-color-scheme: dark){
  .cc-bar{ background:#0d2530; border-top-color:var(--gold); }
  .cc-inner p{ color:#c9d6dd; }
  .cc-inner p a{ color:#8fd0dc; }
}

/* ===== Launch-Vorhang (bis 10.08.2026, 08:00) ===== */
html.veiled, html.veiled body { overflow: hidden !important; }
html.veiled body > *:not(#mm-veil) { filter: blur(11px) saturate(.85); pointer-events: none !important; user-select: none; }
#mm-veil { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(2,20,28,.86); opacity: 0; transition: opacity .4s ease; }
#mm-veil.show { opacity: 1; }
#mm-veil .mv-card { width: min(94vw, 520px); max-height: 92vh; max-height: 92dvh; overflow-y: auto; text-align: center; color: #fff;
  background: linear-gradient(150deg, #02141c, #005579); border: 2px solid var(--gold);
  border-radius: 22px; padding: 40px 32px; box-shadow: 0 30px 90px rgba(0,0,0,.55); }
#mm-veil .mv-logo { width: 96px; height: auto; margin: 0 auto 18px; display: block; }
#mm-veil .mv-eyebrow { color: var(--gold); font-family: 'Roboto', Arial, sans-serif; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; font-size: .8rem; margin-bottom: 10px; }
#mm-veil h2 { color: #fff; font-size: 1.7rem; line-height: 1.25; margin: 0 0 14px; }
#mm-veil p { color: #d3e2e9; font-size: 1rem; line-height: 1.55; margin: 0 0 18px; }
#mm-veil .mv-count { display: flex; justify-content: center; gap: 14px; margin: 0 0 24px; }
#mm-veil .mv-count span { display: flex; flex-direction: column; min-width: 68px; padding: 10px 6px;
  background: rgba(255,255,255,.1); border-radius: 12px; font-size: .78rem; color: #bcd3dc; letter-spacing: .04em; }
#mm-veil .mv-count b { font-family: 'Roboto', Arial, sans-serif; font-size: 1.6rem; color: #fff; }
#mm-veil .mv-label { display: block; font-size: .9rem; color: #bcd3dc; margin-bottom: 8px; }
#mm-veil .mv-input { width: 100%; box-sizing: border-box; padding: 13px 15px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; font-size: 1rem; margin-bottom: 12px; }
#mm-veil .mv-input::placeholder { color: rgba(255,255,255,.5); }
#mm-veil .mv-go { width: 100%; background: var(--gold); color: #02141c; }
#mm-veil .mv-err { color: #ffb4b4; font-size: .9rem; margin: 12px 0 0; }
#mm-veil .mv-links { font-size: .85rem; color: #9fb9c4; margin: 22px 0 0; }
#mm-veil .mv-links a { color: #8fd0dc; }
#mm-veil .mv-shake { border-color: #e03434 !important; box-shadow: 0 0 0 4px rgba(224,52,52,.25); animation: rgShake .4s; }
/* Mobil: Karte klein und mittig, damit oben, unten und seitlich die verschwommene Seite sichtbar bleibt */
@media (max-width: 620px) {
  #mm-veil { padding: 40px 26px; }
  #mm-veil .mv-card { width: min(86vw, 400px); max-height: 76vh; max-height: 76dvh; padding: 26px 20px; border-radius: 20px; }
  #mm-veil .mv-logo { width: 62px; margin-bottom: 12px; }
  #mm-veil .mv-eyebrow { font-size: .68rem; margin-bottom: 7px; }
  #mm-veil h2 { font-size: 1.22rem; margin-bottom: 9px; }
  #mm-veil p { font-size: .87rem; line-height: 1.45; margin-bottom: 13px; }
  #mm-veil .mv-count { gap: 9px; margin-bottom: 16px; }
  #mm-veil .mv-count span { min-width: 52px; padding: 7px 4px; font-size: .62rem; }
  #mm-veil .mv-count b { font-size: 1.15rem; }
  #mm-veil .mv-label { font-size: .8rem; margin-bottom: 6px; }
  #mm-veil .mv-input { padding: 10px 13px; font-size: .95rem; margin-bottom: 9px; }
  #mm-veil .mv-go { padding: 11px 18px; font-size: .95rem; }
  #mm-veil .mv-links { font-size: .74rem; margin-top: 15px; line-height: 1.7; }
  #mm-veil .mv-err { font-size: .8rem; margin-top: 9px; }
}
@media (max-width: 620px) and (max-height: 700px) {
  #mm-veil .mv-logo { display: none; }
  #mm-veil .mv-card { max-height: 82vh; max-height: 82dvh; }
}

/* Rechtsseiten (Impressum/Datenschutz): Überschriften linksbündig wie der Fließtext */
.legal h1, .legal h2, .legal h3 { text-align: left; }

/* ===== Mobile Feinschliff (26.07., gemessen) =====
   Hauptkanal ist das Handy. Vier belegte Probleme behoben:
   1) iOS zoomt automatisch rein, wenn ein Eingabefeld kleiner als 16px Schrift hat
   2) Burger-Menü war nur 38px hoch (Empfehlung: mindestens 44px)
   3) Karussell-Punkte hatten nur 24px Tapfläche
   4) Kleine Fließtexte (Rechner-Hinweise, Labels) waren mobil schwer lesbar */
@media (max-width: 720px) {
  /* 1) Kein Auto-Zoom auf iPhone beim Antippen von Rechner-Feldern */
  input[type="text"], input[type="number"], input[type="tel"], input[type="email"],
  input[type="search"], input[type="password"], select, textarea,
  .calc input, .calc select { font-size: 16px !important; }

  /* 2) Burger-Menü groß genug zum Treffen.
     Wichtig: Spalten-Richtung, sonst legt Flexbox die drei Balken nebeneinander. */
  .nav-toggle { width: 44px; height: 44px; display: flex; flex-direction: column;
                align-items: center; justify-content: center; gap: 5px; padding: 0; }
  .nav-toggle span { margin: 0; }

  /* 3) Karussell-Punkte: gleiche Optik, größere Tapfläche */
  .cases-dots button, .testi-dots button, .refer-dots button { width: 34px; height: 34px; }

  /* 4) Kleine Texte lesbarer (wichtig für ältere Zielgruppen) */
  .calc-note { font-size: .875rem; line-height: 1.5; }
  .eyebrow { font-size: .82rem; }
  .cr-label, .testi-tag, .case-tag, .pb-sub { font-size: .8rem; }
  .brand-sub { font-size: .76rem; }
}

/* ===== Dark-Mode-Korrekturen (26.07., gemessen) =====
   Zwei echte Fehler gefunden:
   1) Die Balken des Burger-Menüs blieben dunkelblau auf dunklem Header (Kontrast 2,4:1, kaum sichtbar)
   2) Die Trennlinien im mobilen Menü blieben fast weiß (#f1f2f2) und wirkten grell */
@media (prefers-color-scheme: dark) {
  .nav-toggle span { background: var(--ink) !important; }
  .site-header.nav-open .nav-toggle span { background: var(--ink) !important; }
  /* Trennlinien NUR im mobilen Klappmenü, siehe eigene Blöcke unten */
  /* Mobiles Menü: klare, aber nicht harte Abgrenzung zum Inhalt */
  .main-nav { border-top-color: rgba(255,255,255,.10); box-shadow: 0 18px 40px rgba(0,0,0,.45); }
}

/* ===== Dark Mode: fest eingebaute Inline-Farben abfangen (28.07., gemessen) =====
   Im HTML stehen an 78 Stellen `background:#fff` und an 86 Stellen `color:var(--dark-blue)`.
   Inline-Stile schlagen normale Regeln, deshalb hier gezielt mit !important abgefangen.
   Ausgenommen sind Buttons: die weißen Buttons auf dunkelblauen Blöcken sollen weiß bleiben. */
@media (prefers-color-scheme: dark) {
  [style*="background:#fff"]:not(.btn) {
    background: #0d2530 !important;
    border-color: rgba(255,255,255,.12) !important;
  }
  [style*="color:var(--dark-blue)"]:not(.btn) { color: #8fd0dc !important; }

  /* Markenblaue Links und Labels, die auf dunklen Karten kaum lesbar waren */
  .lp-more, .ac-more, .map-alt, .calc-top-label span, .cur, .rc-more { color: #8fd0dc !important; }

  /* Helle Rahmen, die im Dunkelmodus grell wirkten */
  .rating-pill, .hero-trust, .review-invite, .map-consent,
  .rechner-tile:not(.rt-top) { border-color: rgba(255,255,255,.12) !important; }
  .rechner-tile.rt-top { border-color: var(--gold) !important; }
}

/* ===== Dark Mode: letzte Restfälle (28.07., einzeln gemessen) =====
   1) Textlinks im Fließtext standen in Markenblau auf dunklem Grund (Kontrast 2,1 bis 2,3)
   2) Einzelne Überschriften (Bewertungs-Block, Empfehlungs-Popup) blieben markenblau
   3) Die Platzierungs-Labels im Gewinnspiel hatten fest eingebaute dunkle Hex-Farben */
@media (prefers-color-scheme: dark) {
  main p a, main li a, .faq-a a, .legal a, .calc-note a, .analogy a,
  .mv-links a, .cc-inner a, .rg-card a:not(.btn) { color: #8fd0dc !important; }

  h1, h2, h3, h4 { color: var(--ink) !important; }
  .refer h2, .lp-final h2, .refer .analogy strong { color: #fff !important; }

  .prize-grid > div > div:first-child { color: #b9cdd6 !important; }
  .prize-grid > div:first-child > div:first-child { color: #e5c95c !important; }
}
/* Fest eingebautes Dunkelgold (#756005) auf dunklem Grund aufhellen */
@media (prefers-color-scheme: dark) {
  [style*="#756005"] { color: #e5c95c !important; }
}
/* Gold-Hervorhebungen (z.B. Platz 1 im Gewinnspiel) behalten ihre Umrandung.
   Spezifität muss über der Regel für weiße Inline-Flächen liegen, sonst gewinnt diese. */
@media (prefers-color-scheme: dark) {
  [style*="solid var(--gold)"]:not(.btn),
  [style*="background:#fff"][style*="var(--gold)"]:not(.btn) { border-color: var(--gold) !important; }
}

/* ===== Dark Mode Navigation, getrennt nach Größe (28.07.) =====
   Wichtig: Die Menüpunkte haben auf dem Desktop einen unsichtbaren 2px-Rahmen als
   Platzhalter für den goldenen Aktiv-Strich. Wird dessen FARBE global gesetzt,
   erscheinen plötzlich Striche unter allen Punkten und Gold wird überschrieben. */
@media (prefers-color-scheme: dark) and (max-width: 1040px) {
  /* Mobiles Klappmenü: dezente Trennlinien sind hier gewollt */
  .main-nav a, .main-nav .nav-item > a { border-bottom-color: rgba(255,255,255,.12) !important; }
}
@media (prefers-color-scheme: dark) and (min-width: 1041px) {
  /* Desktop: kein Strich, außer beim aktiven Punkt (Gold) und beim Überfahren (Türkis) */
  .main-nav a { border-bottom-color: transparent !important; }
  .main-nav a:hover { color: #8fd0dc !important; border-bottom-color: var(--turquoise) !important; }
  .main-nav a.active { color: #fff !important; border-bottom-color: var(--gold) !important; }
}

/* ===== Mobiles Menü: Glas-Optik und sauberes Ein-/Ausklappen (28.07.) =====
   Zwei Fehler behoben:
   1) Das Panel war deckend weiß, die Kopfleiste dagegen Glas. Jetzt identische Optik.
   2) Die Staffelung lief über nth-child auf <a>. Seit die Dropdown-Funktion drei Links
      in <div class="nav-item"> packt, trafen die Verzögerungen die falschen Elemente.
      Jetzt über die direkten Kinder der Navigation, egal ob <a> oder <div>. */
@media (max-width: 1040px) {
  .main-nav {
    background: rgba(255,255,255,.84) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    backdrop-filter: blur(18px) saturate(1.6);
    border-bottom: 1px solid rgba(2,20,28,.06);
    box-shadow: 0 18px 42px rgba(2,20,28,.12);
    /* Einklappen: erst die Punkte hochziehen, dann die Höhe schließen */
    transition: max-height .38s cubic-bezier(.22,.61,.36,1) .16s,
                opacity .26s ease .16s,
                transform .38s ease .16s,
                padding .32s ease .16s;
  }
  /* Ausklappen ohne Verzögerung */
  .site-header.nav-open .main-nav {
    transition: max-height .38s cubic-bezier(.22,.61,.36,1),
                opacity .24s ease,
                transform .38s ease,
                padding .32s ease;
  }
  /* Punkte: gilt für direkte Links UND für die in .nav-item gewrappten */
  .main-nav > a, .main-nav > .nav-item > a {
    opacity: 0; transform: translateY(-12px);
    transition: opacity .24s ease, transform .3s cubic-bezier(.22,.61,.36,1);
  }
  .site-header.nav-open .main-nav > a,
  .site-header.nav-open .main-nav > .nav-item > a { opacity: 1; transform: none; }
  .site-header.nav-open .main-nav > a:nth-child(1),
  .site-header.nav-open .main-nav > .nav-item:nth-child(1) > a { transition-delay: 0.03s; }
  .site-header.nav-open .main-nav > a:nth-child(2),
  .site-header.nav-open .main-nav > .nav-item:nth-child(2) > a { transition-delay: 0.06s; }
  .site-header.nav-open .main-nav > a:nth-child(3),
  .site-header.nav-open .main-nav > .nav-item:nth-child(3) > a { transition-delay: 0.09s; }
  .site-header.nav-open .main-nav > a:nth-child(4),
  .site-header.nav-open .main-nav > .nav-item:nth-child(4) > a { transition-delay: 0.12s; }
  .site-header.nav-open .main-nav > a:nth-child(5),
  .site-header.nav-open .main-nav > .nav-item:nth-child(5) > a { transition-delay: 0.15s; }
  .site-header.nav-open .main-nav > a:nth-child(6),
  .site-header.nav-open .main-nav > .nav-item:nth-child(6) > a { transition-delay: 0.18s; }
  .site-header.nav-open .main-nav > a:nth-child(7),
  .site-header.nav-open .main-nav > .nav-item:nth-child(7) > a { transition-delay: 0.21s; }
  .site-header.nav-open .main-nav > a:nth-child(8),
  .site-header.nav-open .main-nav > .nav-item:nth-child(8) > a { transition-delay: 0.24s; }
  .main-nav > a:nth-child(1),
  .main-nav > .nav-item:nth-child(1) > a { transition-delay: 0.21s; }
  .main-nav > a:nth-child(2),
  .main-nav > .nav-item:nth-child(2) > a { transition-delay: 0.18s; }
  .main-nav > a:nth-child(3),
  .main-nav > .nav-item:nth-child(3) > a { transition-delay: 0.15s; }
  .main-nav > a:nth-child(4),
  .main-nav > .nav-item:nth-child(4) > a { transition-delay: 0.12s; }
  .main-nav > a:nth-child(5),
  .main-nav > .nav-item:nth-child(5) > a { transition-delay: 0.09s; }
  .main-nav > a:nth-child(6),
  .main-nav > .nav-item:nth-child(6) > a { transition-delay: 0.06s; }
  .main-nav > a:nth-child(7),
  .main-nav > .nav-item:nth-child(7) > a { transition-delay: 0.03s; }
  .main-nav > a:nth-child(8),
  .main-nav > .nav-item:nth-child(8) > a { transition-delay: 0.00s; }
}
@media (max-width: 1040px) and (prefers-color-scheme: dark) {
  .main-nav {
    background: rgba(13,19,24,.86) !important;
    border-bottom-color: rgba(255,255,255,.08);
    box-shadow: 0 18px 42px rgba(0,0,0,.5);
  }
}

/* Sicherheitsnetz: Browser ohne Weichzeichner (oder iOS-Einstellung "Transparenz reduzieren")
   bekommen ein fast deckendes Panel, damit die Menüpunkte immer lesbar bleiben. */
@media (max-width: 1040px) {
  @supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    .main-nav { background: rgba(255,255,255,.98) !important; }
  }
}
@media (max-width: 1040px) and (prefers-color-scheme: dark) {
  @supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    .main-nav { background: rgba(13,19,24,.98) !important; }
  }
}
@media (max-width: 1040px) and (prefers-reduced-transparency: reduce) {
  .main-nav { background: rgba(255,255,255,.98) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (max-width: 1040px) and (prefers-reduced-transparency: reduce) and (prefers-color-scheme: dark) {
  .main-nav { background: rgba(13,19,24,.98) !important; }
}

/* ===== Mobiles Menü: hochwertigerer Look (28.07.) =====
   Linksbündig bleibt (beste Lesbarkeit bei 7 Punkten), dafür etwas größere Schrift
   und ein goldener Pfeil als Zeilenabschluss. Gibt Struktur, ohne die Scannbarkeit zu opfern. */
@media (max-width: 1040px) {
  .main-nav > a, .main-nav > .nav-item > a {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 1.05rem; letter-spacing: .005em;
  }
  .main-nav > a::after, .main-nav > .nav-item > a::after {
    content: "›";
    font-family: "Roboto", Arial, sans-serif;
    font-size: 1.35rem; line-height: 1;
    color: var(--gold); opacity: .75;
    margin-left: 12px; flex: none;
    transform: translateY(-1px);
    transition: transform .2s ease, opacity .2s ease;
  }
  .main-nav > a:active::after, .main-nav > .nav-item > a:active::after {
    transform: translate(3px,-1px); opacity: 1;
  }
  /* Aktiver Punkt: Pfeil voll deckend, damit die aktuelle Seite erkennbar bleibt */
  .main-nav > a.active::after, .main-nav > .nav-item > a.active::after { opacity: 1; }
}
@media (max-width: 1040px) and (prefers-color-scheme: dark) {
  .main-nav > a::after, .main-nav > .nav-item > a::after { color: #ddc24f; opacity: .8; }
}

/* ===== Mobil: Kennzahlen-Block sauber zentrieren (28.07.) =====
   .hero-trust ist eine Flex-Zeile mit Umbruch. Ohne justify-content sitzen die Einträge
   je nach Displaybreite links, was auf schmalen Handys unsauber aussieht. */
@media (max-width: 900px) {
  .hero-trust { justify-content: center; text-align: center; row-gap: 20px; }
  .hero-trust .stat { flex: 0 1 auto; min-width: 140px; }
}

/* ===== Einrollen beim Weiterscrollen genauso weich wie beim Antippen (29.07.) =====
   Beim Scroll-Schließen setzt das Skript kurz .nav-closing. Damit bleibt das Panel
   sichtbar über dem Inhalt liegen, während die Punkte nach oben wegrollen, statt
   sofort unter der Scrollbewegung zu verschwinden. */
@media (max-width: 1040px) {
  .site-header.nav-closing:not(.nav-open) .main-nav {
    pointer-events: none;
    box-shadow: 0 18px 42px rgba(2,20,28,.12);
  }
  /* etwas zügiger als beim Öffnen, damit es beim Scrollen nicht nachhinkt */
  .site-header.nav-closing:not(.nav-open) .main-nav > a,
  .site-header.nav-closing:not(.nav-open) .main-nav > .nav-item > a {
    transition: opacity .2s ease, transform .26s cubic-bezier(.22,.61,.36,1);
  }
  .site-header.nav-closing:not(.nav-open) .main-nav {
    transition: max-height .34s cubic-bezier(.22,.61,.36,1) .14s,
                opacity .22s ease .14s,
                transform .34s ease .14s,
                padding .3s ease .14s;
  }
}


/* --- Dunkelmodus: Hervorhebung in Info-Kästen der Artikel ----------------
   Vorher stand dort var(--dark-blue), also dunkelblau auf dunklem Grund.
   Betraf alle Finanzwissen-Artikel ("Mein Tipp:", "Der Unterschied:"). */
@media (prefers-color-scheme: dark) {
  .article-body .callout strong { color: #8fd0dc !important; }
}

/* ===== Anpassungen aus Mikes Prüfung am 30.07.2026 ===================== */

/* 2) Ratgeber-Karten: Symbol auf dem Handy mittig statt linksbündig.
      Das Symbol ist ein Emoji in einem Block über die volle Breite,
      deshalb wirkt hier text-align und nicht align-self. */
@media (max-width:640px){
  .dl-ic { text-align:center; }
}

/* 3) Umgedrehte Kacheln: Rückseite nimmt die Farbe der Vorderseite auf,
      nur aufgehellt. Vorher war sie fast weiß und wirkte wie ein Bruch.
      color-mix wird von allen aktuellen Browsern unterstützt, ältere
      fallen auf den bisherigen --back-Wert zurück. */
@supports (background: color-mix(in srgb, red 50%, white)) {
  .eco3-back { background: color-mix(in srgb, var(--tile, #8ea3ab) 50%, #ffffff);
               color: #08222e; }
}
@media (prefers-color-scheme: dark) {
  @supports (background: color-mix(in srgb, red 50%, white)) {
    .eco3-back { background: color-mix(in srgb, var(--tile, #8ea3ab) 58%, #0d2530);
                 color: #f2f7f9; }
  }
}

/* 4 und 5) Vertrauens- und Logo-Leiste auf dem Handy kompakter,
      sie nahmen dort zu viel Höhe weg */
@media (max-width:640px){
  .trust-chip { width:174px; gap:10px; padding:11px 13px; border-radius:13px; }
  .trust-chip .tc-ico { width:32px; height:32px; border-radius:9px; }
  .trust-chip .tc-ico svg { width:17px; height:17px; }
  .trust-chip .tc-val { font-size:.95rem; }
  .trust-chip .tc-lbl { font-size:.76rem; }
  .ref-track.trust-track { gap:11px; }

  .logo-chip { width:150px; height:60px; padding:10px 15px; border-radius:12px; }
  .logo-chip--sq { padding:5px 10px; }
  .ref-track.logo-track { gap:10px; }
}

/* 1b) Im Dunkelmodus setzt eine ältere Regel alle Kacheln ohne .rt-top
      per !important auf einen hellen Rahmen. Die vierte Kachel auf dem
      Handy muss deshalb ausdrücklich zurückgeholt werden. */
@media (prefers-color-scheme: dark) and (max-width:900px){
  .rechner-grid .rechner-tile:nth-child(-n+4){ border-color: var(--gold) !important; }
}

/* 6) Der Hinweis "seitlich wischen für mehr" ist raus, die Punkte
      unter dem Karussell erklären sich von selbst */
.vid-swipe-hint { display:none !important; }

/* ===== Korrekturen aus Mikes Prüfung am 31.07.2026 ===== */

/* 1) Desktop: Dropdown öffnete sich ÜBER der Navigationsleiste.
   Ursache: top:100% bezieht sich auf das nav-item, und das endet
   14px Padding + 1px Rahmen oberhalb der Header-Unterkante.
   Das Item wird jetzt auf volle Höhe gestreckt, das Menü startet
   exakt an der Unterkante der Leiste. Die ::before-Brücke deckt den
   Weg der Maus ab, damit das Menü beim Runterfahren nicht zuklappt. */
@media (min-width:1041px){
  /* Auch die Navigation selbst strecken. Sie ist sonst nur so hoch wie
     ihre Links, während der Header durch das Logo höher ist. Ohne das
     bliebe eine Restüberlappung von der halben Logo-Differenz. */
  .site-header .inner > .main-nav { align-self: stretch; }
  .main-nav .nav-item { align-self: stretch; }
  .nav-dropdown { top: calc(100% + 15px); transform: translateX(-50%) translateY(6px); }
  .main-nav .nav-item:hover .nav-dropdown,
  .main-nav .nav-item:focus-within .nav-dropdown { transform: translateX(-50%) translateY(0); }
  .nav-dropdown::before { top:-17px; height:17px; }
}

/* 2) Dropdown wirkte klarer als die Leiste, obwohl beide dieselben
   Werte hatten. Grund: Die Leiste sitzt fast immer über hellem Inhalt,
   das Dropdown dagegen über Fotos. Dieselbe Deckkraft sieht dort
   durchsichtiger aus. Deshalb bekommt das Dropdown mehr Unschärfe und
   etwas mehr Deckkraft, damit es gleich WIRKT statt gleich zu MESSEN. */
.nav-dropdown {
  background: rgba(255,255,255,0.82) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
          backdrop-filter: blur(24px) saturate(1.5);
}
@media (prefers-color-scheme: dark){
  .nav-dropdown {
    background: rgba(13,19,24,0.82) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
            backdrop-filter: blur(24px) saturate(1.4);
  }
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .nav-dropdown { background: rgba(255,255,255,0.97) !important; }
  @media (prefers-color-scheme: dark){
    .nav-dropdown { background: rgba(13,19,24,0.97) !important; }
  }
}

/* 3) Fußzeile auf dem Handy komplett mittig, auf allen Seiten:
   Spalten, Überschriften, Links, Logo, Symbole und Copyright. */
@media (max-width:640px){
  .site-footer .footer-grid { text-align: center; }
  .site-footer .footer-brand img { margin-left: auto; margin-right: auto; }
  .site-footer .footer-brand p { margin-left: auto; margin-right: auto; }
  .site-footer .footer-col ul { justify-items: center; }
  .site-footer .footer-col ul li { text-align: center; }
  .site-footer .footer-social { justify-content: center; }
  .footer-bottom { flex-direction: column; align-items: center; gap: 12px; text-align: center; }
  .footer-bottom .footer-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 16px; }
}

/* 4) Gewinnspiel: QR-Code auf dem Handy raus.
   Das Zwei-Spalten-Raster stand direkt im HTML und galt deshalb auch auf
   kleinen Bildschirmen. Der QR-Code wurde in eine schmale Spalte gequetscht
   und dadurch verzerrt. Auf dem Handy ist er ohnehin sinnlos, weil man den
   eigenen Bildschirm nicht scannen kann. Der WhatsApp-Knopf bleibt. */
@media (max-width:900px){
  .office-qr { grid-template-columns: 1fr !important; }
  .office-qr .qr-box { display: none !important; }
  .qr-hinweis { display: none; }
}

/* 5) Gewinnspiel: Treppchen sichtbar machen. Platz 1 hatte Gold,
   Platz 2 und 3 nur einen grauen Standardrahmen. Jetzt Silber und Bronze
   in derselben Stärke, damit die Reihenfolge auf einen Blick erkennbar ist.
   Die Rahmentöne sind bewusst dunkler als echtes Silber/Bronze, sonst
   wären sie auf Weiß kaum zu sehen (Kontrast über 3:1). Die Beschriftungen
   liegen über 5:1 und bleiben damit gut lesbar. */
.prize-grid .platz-2 { border: 2px solid #889199 !important; }
.prize-grid .platz-3 { border: 2px solid #B0763C !important; }
.prize-grid .platz-2 > div:first-child { color: #5A666E !important; }
.prize-grid .platz-3 > div:first-child { color: #8A5A28 !important; }
@media (prefers-color-scheme: dark){
  .prize-grid .platz-2 { border-color: #C2CDD4 !important; }
  .prize-grid .platz-3 { border-color: #D19A5E !important; }
  .prize-grid .platz-2 > div:first-child { color: #C2CDD4 !important; }
  .prize-grid .platz-3 > div:first-child { color: #D19A5E !important; }
}

/* 6) Launch-Vorhang lief auf dem Handy rechts aus dem Bild.
   Ursache: Die Karte war min(94vw, 520px) breit, also 366px auf einem
   390er-Display. Der Vorhang hat aber 24px Innenabstand auf jeder Seite,
   verfügbar waren nur 342px. 100% bezieht sich auf den bereits um das
   Padding verkleinerten Bereich und kann deshalb nicht überlaufen. */
#mm-veil .mv-card { width: min(100%, 520px); }
@media (max-width:420px){
  #mm-veil { padding: 16px; }
  #mm-veil .mv-card { padding: 28px 20px; }
  #mm-veil .mv-count { gap: 8px; }
  #mm-veil .mv-count span { min-width: 0; flex: 1; }
}

/* 7) Dieselbe Überlauf-Falle wie beim Vorhang, an zwei weiteren Stellen:
   Die Video-Lightbox (Container 24px Rand, Inhalt 94vw = 366px bei 390er
   Display, verfügbar aber nur 342px) und die Rechner-Lightbox (16px Rand,
   96vw = 374px, verfügbar 358px). Beide liefen auf dem Handy rechts raus.
   100% bezieht sich auf den bereits verkleinerten Bereich. */
.vid-lb-stage  { width: min(100%, 1000px); }
.calc-lb-panel { width: min(100%, 640px); }

/* ===== Mobile Untermenüs (31.07.2026) =====
   18 Unterseiten waren auf dem Handy nur über Umwege erreichbar. Jetzt klappen
   Privatkunden, Geschäftskunden und Finanzwissen im Burger-Menü auf.
   Tippen auf den Namen führt weiter, tippen auf den Pfeil klappt auf. */
.nav-sub-toggle { display: none; }

@media (max-width: 1040px) {
  .main-nav .nav-item { position: relative; }

  .nav-sub-toggle {
    display: flex; align-items: center; justify-content: center;
    position: absolute; right: 0; top: 0; height: 46px; width: 52px;
    background: none; border: 0; padding: 0; cursor: pointer;
    color: inherit; -webkit-tap-highlight-color: transparent;
  }
  .nav-sub-toggle::before {
    content: ""; width: 9px; height: 9px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: translateY(-3px) rotate(45deg);
    transition: transform .25s cubic-bezier(.22,.61,.36,1);
    opacity: .75;
  }
  .nav-item.sub-open .nav-sub-toggle::before { transform: translateY(1px) rotate(-135deg); opacity: 1; }

  /* Das Untermenü war hier komplett ausgeblendet. Jetzt eingeklappt statt weg,
     damit es sich sanft öffnen kann. */
  .main-nav .nav-dropdown {
    display: block !important;
    position: static; transform: none; width: 100%; min-width: 0;
    opacity: 1; visibility: visible; pointer-events: auto;
    max-height: 0; overflow: hidden;
    padding: 0; margin: 0;
    background: transparent !important; border: 0 !important; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    transition: max-height .32s cubic-bezier(.22,.61,.36,1), padding .28s ease;
  }
  .main-nav .nav-item.sub-open .nav-dropdown { max-height: 340px; padding: 2px 0 6px; }
  .main-nav .nav-dropdown::before { display: none; }

  .main-nav .nav-dropdown a {
    padding: 11px 0 11px 18px !important;
    font-size: .93rem; white-space: normal;
    border-bottom: 1px solid rgba(2,20,28,.07) !important;
    opacity: .88;
  }
  .main-nav .nav-dropdown a:last-child { border-bottom: 0 !important; }
  .main-nav .nav-dropdown a:hover,
  .main-nav .nav-dropdown a:active { background: transparent !important; opacity: 1; }

  /* Wenn zwei Untermenüs offen sind, wird das Menü höher als der Bildschirm.
     Ohne Scrollmöglichkeit wären die unteren Punkte nicht erreichbar. */
  .site-header.nav-open .main-nav { overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

/* Nachtrag zu den mobilen Untermenüs: Bei den drei Aufklapp-Punkten stand
   rechts schon ein Deko-Pfeil „›“ für „führt weiter“. Zusammen mit dem neuen
   Aufklapp-Pfeil waren es zwei Zeichen nebeneinander, die Unterschiedliches
   meinen. Der Deko-Pfeil entfällt dort, der Aufklapp-Pfeil übernimmt die
   Markenfarbe. Der Text bekommt rechts Platz, damit er nicht unter den
   Tippbereich rutscht. */
@media (max-width: 1040px) {
  .main-nav > .nav-item.has-dropdown > a::after { content: none; }
  .main-nav > .nav-item.has-dropdown > a { padding-right: 52px; }
  .nav-sub-toggle::before { border-color: var(--gold); opacity: .85; }
  .nav-item.sub-open .nav-sub-toggle::before { opacity: 1; }
}

/* ===== Fehlerbehebung mobile Untermenüs (01.08.2026) =====
   Die Untermenü-Einträge standen halb außerhalb des Bildschirms.
   Ursache: Auf Touchgeräten löst ein Tipp den Hover-Zustand aus. Damit griff
   die Desktop-Regel `.nav-item:hover .nav-dropdown { transform: translateX(-50%) }`,
   die das Menü unter dem Menüpunkt zentriert. Auf dem Handy verschiebt sie es
   um die halbe Breite nach links aus dem Bild. Meine mobile Regel hatte nur
   `.main-nav .nav-dropdown` und damit die schwächere Spezifität.
   Hier werden alle Zustände (normal, hover, focus-within) gemeinsam neutralisiert. */
@media (max-width: 1040px) {
  .main-nav .nav-dropdown,
  .main-nav .nav-item:hover .nav-dropdown,
  .main-nav .nav-item:focus-within .nav-dropdown,
  .main-nav .nav-item.sub-open .nav-dropdown {
    position: static !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100% !important;
    min-width: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: none !important;
  }
  /* Sichtbarkeit steuert allein die Höhe, nicht opacity oder visibility.
     Sonst blitzt das Untermenü beim Antippen kurz auf. */
  .main-nav .nav-dropdown { max-height: 0; overflow: hidden; }
  .main-nav .nav-item.sub-open .nav-dropdown { max-height: 360px; }
}

/* ===== Einheitliche Pfeile im mobilen Menü (01.08.2026) =====
   Vorher zwei verschiedene Dinge: bei Punkten ohne Untermenü das Textzeichen „›“
   (Strichstärke von der Schrift bestimmt, 1,35rem groß), bei den Aufklapp-Punkten
   ein gezeichneter Winkel aus 2px-Rändern. Dadurch unterschiedlich dick und groß.
   Jetzt beide derselbe gezeichnete Winkel: 9x9px, 2px stark, Markengold,
   gleiche Deckkraft, gleiche Position am rechten Rand. */
@media (max-width: 1040px) {
  .main-nav > a::after,
  .main-nav > .nav-item > a::after {
    content: "" !important;
    width: 9px; height: 9px;
    box-sizing: border-box;
    border: 0;
    border-right: 2px solid var(--gold);
    border-bottom: 2px solid var(--gold);
    transform: rotate(-45deg);
    opacity: .85;
    margin-left: 12px; margin-right: 1px;
    flex: none;
    font-size: 0; line-height: 0;
  }
  /* Aufklapp-Pfeil auf dieselbe Achse wie der Deko-Pfeil bringen,
     sonst stehen sie in unterschiedlichen Abständen vom Rand. */
  .nav-sub-toggle { justify-content: flex-end; padding-right: 1px; }
  .nav-sub-toggle::before {
    width: 9px; height: 9px;
    box-sizing: border-box;
    border: 0;
    border-right: 2px solid var(--gold);
    border-bottom: 2px solid var(--gold);
    opacity: .85;
    transform: translateY(-2px) rotate(45deg);
  }
  .nav-item.sub-open .nav-sub-toggle::before { transform: translateY(2px) rotate(-135deg); opacity: .85; }
}

/* Wichtig: Die Vereinheitlichung oben nutzt `content: "" !important` und hat
   damit die Ausnahme von v128 ausgehebelt, die den Deko-Pfeil bei den drei
   Aufklapp-Punkten entfernt. Sonst stünden dort wieder zwei Pfeile
   nebeneinander. Die Ausnahme braucht dieselbe Stärke. */
@media (max-width: 1040px) {
  .main-nav > .nav-item.has-dropdown > a::after { content: none !important; }
}

/* ===== Gewinnspiel-Treppchen im Dunkelmodus (01.08.2026) =====
   Die drei Karten hatten `background:#fff` direkt im HTML und blieben deshalb
   im Dunkelmodus weiß. Bei Platz 1 fiel es durch das kräftige Gold weniger auf,
   bei Silber und Bronze wirkte es wie ein Fehler.
   Wichtig: Mit dem Hintergrund müssen auch Beträge und Beschriftungen umgestellt
   werden, sie standen in Dunkelblau und wären sonst unlesbar. */
@media (prefers-color-scheme: dark) {
  .prize-grid .platz { background: rgba(255,255,255,.05) !important; }
  .prize-grid .platz strong { color: #eaf2f5 !important; }
  .prize-grid .platz span { color: #bcd3dc !important; }
}

/* ===== Logo-Band bei den Geschäftskunden im Dunkelmodus (01.08.2026) =====
   Die Kacheln blieben reinweiß und leuchteten im Dunkelmodus grell aus der
   Seite. Für den Dunkelmodus war nur der Rahmen angepasst, nicht die Fläche.
   Jetzt derselbe gedämpfte Ton wie die Vereinskarten auf der Sponsoringseite.
   Warum nicht dunkel: Viele Partnerlogos sind dunkel gesetzt und wären auf
   dunklem Grund unsichtbar. Eine gedämpfte helle Fläche ist der Kompromiss,
   den die Sponsoringseite schon nutzt.
   Größe, Abstände und die Laufgeschwindigkeit des Bands bleiben unverändert. */
@media (prefers-color-scheme: dark) {
  .logo-chip { background: #c4d2da !important; }
}

/* ==========================================================================
   Mobile Entschlackung (Mikes Ansage 12.08.2026)
   Gilt ausschliesslich unter 700 px. Die Desktop-Ansicht bleibt unangetastet,
   sie wurde ausdruecklich gelobt. Ziel: weniger Scrollstrecke, weniger
   gleichzeitige Entscheidungen, gleicher Inhalt auf Wunsch abrufbar.
   ========================================================================== */
@media (max-width: 700px) {

  /* 1) Leistungen: nur drei Kacheln plus die Uebersichtskachel.
        Die Uebersichtskachel ist immer die letzte im Gitter, deshalb werden
        gezielt die Positionen 4 und 5 ausgeblendet. Spart zwei Kacheln. */
  .service-grid > .service-card:nth-child(4),
  .service-grid > .service-card:nth-child(5) { display: none; }

  /* 2) Kundenstimmen: Zitat auf drei Zeilen, der Rest auf Tipp.
        Das Karussell bleibt, nur die Hoehe je Karte sinkt deutlich. */
  .testi-card .quote {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .testi-card.offen .quote { -webkit-line-clamp: unset; overflow: visible; }

  /* 3) Praxis-Beispiele: sichtbar bleiben Kategorie, Zitat und Ergebnis.
        Ausgangslage und Massnahme erst auf Tipp. */
  .case-card .case-row { display: none; }
  .case-card.offen .case-row { display: block; }

  /* Gemeinsamer Aufklapp-Knopf fuer 2) und 3) */
  .mm-mehr {
    display: inline-block; margin-top: 8px; padding: 0; border: 0;
    background: none; color: var(--gold); font: inherit; font-size: .86rem;
    font-weight: 700; cursor: pointer; text-align: left;
  }

  /* 4) Die Bewertungs-Einladung nimmt mobil einen ganzen Bildschirm ein,
        ohne einem Erstbesucher zu helfen. Auf dem Handy raus. */
  .review-invite { display: none !important; }

  /* 5) Aufforderungen ausduennen: die WhatsApp-Zweitknoepfe im Inhalt
        entfallen, weil die feste Leiste unten denselben Weg dauerhaft
        anbietet. Der Termin-Hauptknopf bleibt ueberall stehen. */
  .hero-ctas .btn-secondary[href*="wa.me"],
  .lp-ctas .btn-secondary[href*="wa.me"] { display: none; }
}

/* ===== Mobil-Entzerrung Teil 2 (12.08.2026) · nur unter 700px, Desktop unberuehrt ===== */
@media (max-width: 700px) {
  /* 1 · Rechner auf Leistungs- und Unternehmensseiten hinter einen Knopf legen */
  .calc--zu > *:not(.eyebrow):not(h2):not(.calc-sub):not(.calc-toggle) { display: none !important; }
  .calc--zu { padding-bottom: 26px; }
  .calc-toggle {
    display: block; width: 100%; margin-top: 20px; padding: 15px 18px;
    border: 0; border-radius: 14px; background: var(--gold); color: #04212e;
    font: inherit; font-size: 1rem; font-weight: 800; cursor: pointer;
    box-shadow: 0 8px 22px -12px rgba(0,0,0,.55); -webkit-tap-highlight-color: transparent;
  }
  .calc-toggle:active { transform: translateY(1px); }

  /* 2 · Empfehlungskacheln auf die Hoehe von Praxisfaellen und Bewertungen bringen */
  .refer-duo .refer { padding: 22px 20px; }
  .refer-duo .refer h2 { font-size: 1.28rem; }
  .refer-duo .refer .analogy { font-size: .95rem; line-height: 1.5; margin-top: 12px; }
  .refer-duo .refer .analogy + .analogy { display: none; }
  .refer-duo .refer .lp-ctas { margin-top: 16px !important; }
  .refer-duo .refer .lp-ctas .btn { padding: 11px 18px; font-size: .93rem; }

  /* 3 · Leistungskacheln flacher */
  .service-card { padding: 13px 11px; }
  .service-card .icon { width: 34px; height: 34px; border-radius: 10px; margin: 0 auto 9px; }
  .service-card .icon .raute-mini { width: 12px; height: 12px; }
  .service-card h3 { font-size: .95rem; margin-bottom: 5px; }
  .service-card p { font-size: .8rem; line-height: 1.38; margin-top: 4px; }
  .service-card .more, .service-card .svc-more { font-size: .8rem; padding-top: 9px; }
  .lp-features { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-top: 26px; }
  .lp-feature { padding: 14px 12px; border-radius: 14px; }
  .lp-feature .ic { width: 34px; height: 34px; border-radius: 10px; margin-bottom: 9px; }
  .lp-feature h3, .lp-feature h2 { font-size: .95rem; line-height: 1.25; margin-bottom: 5px; overflow-wrap: anywhere; hyphens: auto; }
  .lp-feature p { font-size: .8rem; line-height: 1.38; }
  .lp-feature .lp-more { font-size: .8rem; padding-top: 9px; }
}

/* 30-Minuten-Block mobil kuerzen (12.08.2026) */
@media (max-width: 700px) {
  .promise { padding: 24px 18px; }
  .promise h2 { font-size: 1.28rem; margin: 12px 0 6px !important; }
  .promise > p { font-size: .93rem; line-height: 1.5; }
  .promise-points { gap: 8px; margin-top: 16px; }
  .promise-points li { font-size: .93rem; font-weight: 600; }
  .promise-points li svg { width: 17px; height: 17px; margin-top: 2px; }
  .promise-reassure { display: none; }
  .promise .lp-ctas { margin-top: 16px !important; }
}

/* Fusszeile mobil enger ziehen (12.08.2026) */
@media (max-width: 700px) {
  .site-footer { padding: 30px 0 18px; }
  .site-footer .footer-grid {
    grid-template-columns: 1fr 1fr; gap: 18px 14px; padding-bottom: 20px;
    text-align: left;
  }
  .site-footer .footer-brand { grid-column: 1 / -1; text-align: center; }
  .site-footer .footer-brand p { display: none; }
  .site-footer .footer-brand img { margin-bottom: 0; }
  .site-footer .footer-col h3 { font-size: .76rem; margin-bottom: 8px; }
  .site-footer .footer-col ul { gap: 5px; justify-items: start; }
  /* Navigation nutzt die volle Breite und laeuft zweispaltig, das halbiert die Hoehe */
  .site-footer .footer-grid > .footer-col:nth-child(2) { grid-column: 1 / -1; }
  .site-footer .footer-grid > .footer-col:nth-child(2) ul { grid-template-columns: 1fr 1fr; gap: 5px 14px; }
  .site-footer .footer-col ul li { text-align: left; }
  .site-footer .footer-col a { font-size: .85rem; }
  .footer-bottom { padding-top: 14px; gap: 8px; font-size: .78rem; }
  .footer-bottom .footer-legal { gap: 6px 14px; }
}

/* ===== Hinweistext unter jedem Rechner: eingeklappt, auf Klick sichtbar (12.08.2026) ===== */
.calc-info { margin-top: 18px; border-top: 1px solid rgba(255,255,255,.14); }
.calc-info > summary {
  list-style: none; cursor: pointer; padding: 12px 0 0;
  display: flex; align-items: center; gap: 8px;
  color: #8fd0dc; font-size: .86rem; font-weight: 700;
  -webkit-tap-highlight-color: transparent;
}
.calc-info > summary::-webkit-details-marker { display: none; }
.calc-info > summary::after {
  content: "+"; margin-left: auto; font-size: 1.1rem; line-height: 1;
  opacity: .8; transition: transform .15s ease;
}
.calc-info[open] > summary::after { content: "–"; }
.calc-info > summary:hover { color: #fff; }
.calc-info > summary:focus-visible { outline: 2px solid #8fd0dc; outline-offset: 3px; border-radius: 4px; }
.calc-info .calc-note { margin-top: 10px; }

/* ===== Mobil-Nachbesserung 12.08.2026 (aus der gemessenen Mobil-Analyse) ===== */
@media (max-width: 700px) {
  /* 1 · Überschrift und Text vor das Foto. Vorher lag das Bild per order:-1 davor,
        dadurch begann die erste Aussage erst bei 795 px, also unter der Falzkante. */
  .hero-media { order: 0 !important; }
  .hero-copy { order: -1; }

  /* 2 · Feste Aktionsleiste: von Mike verworfen (12.08.2026, 20:16), bleibt aus.
        Der Termin-Knopf im Kopfbereich und das Superchat-Fenster reichen. */

  /* 3 · Fußzeile: mobil nur Kontakt plus Rechtliches. Navigation und Leistungen
        stehen wortgleich im Menü oben, doppelt gehalten fraß die Fußzeile einen
        ganzen Handybildschirm. Links bleiben im Quelltext, nur unsichtbar. */
  .site-footer { padding: 22px 0 14px; }
  .site-footer .footer-grid { grid-template-columns: 1fr; gap: 14px; padding-bottom: 14px; }
  .site-footer .footer-grid > .footer-col:nth-child(2),
  .site-footer .footer-grid > .footer-col:nth-child(3) { display: none; }
  .site-footer .footer-brand img { height: 28px; width: 28px; }
  .site-footer .footer-col h3 { font-size: .72rem; margin-bottom: 6px; }
  .site-footer .footer-col ul { gap: 0; display: flex; flex-wrap: wrap; justify-content: center; column-gap: 18px; }
  .site-footer .footer-col ul li { text-align: center; }
  .site-footer .footer-col a { display: block; padding: 9px 0; line-height: 1.2; font-size: .86rem; }
  .footer-bottom { padding-top: 10px; gap: 6px; }
  .footer-bottom .footer-legal a { display: inline-block; padding: 7px 0; }

  /* 4 · Schrift in den Leistungskacheln von 12,8 auf 13,5 px */
  .service-card p { font-size: .845rem; }
  .lp-feature p { font-size: .845rem; }
}

/* ===== Abschluss-Block: nur auf dem Handy (12.08.2026) =====
   Grund: die Startseite endete mit „Noch eine Frage offen?", also der schwächsten
   Formulierung an der stärksten Stelle. Am Desktop bleibt alles wie es war. */
.mm-final { display: none; }
@media (max-width: 700px) {
  .mm-final {
    display: block; background: var(--dark-blue); color: #fff;
    text-align: center; padding: 34px 0 38px;
  }
  .mm-final h2 { color: #fff; font-size: 1.42rem; line-height: 1.25; margin: 0 0 10px; }
  .mm-final p { color: #cfe0e8; font-size: .97rem; line-height: 1.55; margin: 0 auto; max-width: 30rem; }
  .mm-final p strong { color: #ffd764; }
  .mm-final-ctas { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
  .mm-final-ctas .btn { min-height: 50px; display: flex; align-items: center; justify-content: center; font-size: .98rem; }
  .mm-final-ctas .btn-primary { background: #fff; color: var(--dark-blue); border-color: #fff; }
  .mm-final-ctas .btn-ghost {
    background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.55);
  }
  .mm-final-note { margin-top: 14px !important; font-size: .84rem !important; color: rgba(255,255,255,.62) !important; }

  /* Die alte Fußzeile unter dem FAQ wird durch den Abschluss-Block ersetzt */
  .faq-foot { display: none; }

  /* Praxis-Beispiele und Kundenstimmen mobil auf je drei.
     Die Karussell-Punkte zählen nur sichtbare Karten (Filter im Seiten-Skript). */
  #cases-track > .case-card:nth-child(n+4),
  #testi-track > .testi-card:nth-child(n+4) { display: none; }
}