/* ===========================================================
   VMEK GmbH – Design-System
   =========================================================== */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/manrope-var.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/manrope-var.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/manrope-var.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/manrope-var.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/manrope-var.woff2") format("woff2");
}

:root {
  /* Farben */
  --color-ink: #2b2f31;
  --color-ink-soft: #3a3f42;
  --color-slate: #63686c;
  --color-slate-light: #646a6e;
  --color-line: #e4e0d8;
  --color-paper: #faf8f5;
  --color-paper-alt: #f2ede4;
  --color-white: #ffffff;
  --color-gold: #e69a12;
  --color-gold-dark: #c17f0a;
  --color-gold-light: #fdb62e;
  --color-gold-tint: #fbead0;
  --color-gold-text: #8f5c00; /* dunklerer Goldton für kleinen Text (Kontrast ≥ 4,5:1) */ 

  /* Typografie */
  --font-base: "Manrope", "Segoe UI", system-ui, sans-serif;
  --lh-tight: 1.15;
  --lh-normal: 1.6;

  /* Spacing / Radius / Shadow */
  --radius-s: 8px;
  --radius-m: 16px;
  --radius-l: 28px;
  --shadow-s: 0 2px 10px rgba(43, 47, 49, 0.06);
  --shadow-m: 0 12px 32px rgba(43, 47, 49, 0.1);
  --container: 1180px;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

body {
  margin: 0;
  font-family: var(--font-base);
  font-size: 17px;
  line-height: var(--lh-normal);
  color: var(--color-ink-soft);
  background: var(--color-paper);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

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

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4 {
  font-weight: 800;
  overflow-wrap: break-word;
  hyphens: auto;
  line-height: var(--lh-tight);
  color: var(--color-ink);
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(2.2rem, 4vw + 1rem, 3.6rem);
}

h2 {
  font-size: clamp(1.7rem, 2vw + 1rem, 2.4rem);
}

h3 {
  font-size: 1.25rem;
}

p {
  margin: 0 0 1em;
}

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

section {
  padding: 72px 0;
}

@media (max-width: 720px) {
  section {
    padding: 56px 0;
  }
}

.eyebrow {
  display: inline-block;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold-text);
  margin-bottom: 14px;
}

.section-head {
  max-width: 640px;
  margin-bottom: 48px;
}

.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-head.large {
  max-width: 720px;
}

.section-head.large h2 {
  font-size: clamp(2.1rem, 3vw + 1rem, 3rem);
}

.lead {
  font-size: 1.15rem;
  color: var(--color-slate);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.98rem;
  border: 2px solid transparent;
  cursor: pointer;
  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(--color-gold);
  color: var(--color-ink);
  box-shadow: var(--shadow-s);
}

.btn-primary:hover {
  background: var(--color-gold-dark);
  box-shadow: var(--shadow-m);
}

.btn-dark {
  background: var(--color-ink);
  color: var(--color-white);
}

.btn-dark:hover {
  background: #17191a;
  box-shadow: var(--shadow-m);
}

.btn-ghost {
  border-color: var(--color-line);
  color: var(--color-ink);
  background: transparent;
}

.btn-ghost:hover {
  border-color: var(--color-ink);
}

.btn-ghost.on-dark {
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--color-white);
}

.btn-ghost.on-dark:hover {
  border-color: var(--color-white);
}

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

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 248, 245, 0.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--color-line);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  height: 84px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--color-ink);
}

/* Without flex-shrink:0, this image (the flex item's only child) was being
   compressed width-wise by the surrounding flex layout while its explicit
   height held firm, rendering the logo squashed down to a sliver. */
.brand img {
  height: 52px;
  width: auto;
  flex-shrink: 0;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.main-nav a {
  position: relative;
  padding: 10px 4px;
  margin: 0 7px;
  font-weight: 600;
  font-size: 0.96rem;
  color: var(--color-ink-soft);
  white-space: nowrap;
  transition: color 0.15s ease;
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 2px;
  background: var(--color-gold);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}

.main-nav a:hover,
.main-nav a[aria-current="page"] {
  color: var(--color-ink);
}

.main-nav a:hover::after,
.main-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
  padding-left: 24px;
  border-left: 1px solid rgba(230, 154, 18, 0.35);
}

.header-phone-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 18px;
  border-right: 1px solid rgba(230, 154, 18, 0.35);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--color-ink-soft);
  white-space: nowrap;
  transition: color 0.15s ease;
}

.header-phone-link:hover {
  color: var(--color-ink);
}

.header-phone-link svg {
  width: 18px;
  height: 18px;
  stroke: var(--color-gold-dark);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.header-email-btn {
  padding: 10px 18px;
  font-size: 0.88rem;
  white-space: nowrap;
}

.header-email-btn svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--color-line);
  background: var(--color-white);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-ink);
  position: relative;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle span::before {
  position: absolute;
  top: -6px;
}

.nav-toggle span::after {
  position: absolute;
  top: 6px;
}

@media (max-width: 1240px) {
  /* .site-header uses backdrop-filter, which makes it the containing block for
     fixed-position descendants (per spec) — so this panel is positioned relative
     to the 84px-tall header, not the viewport. top:100% lands it right below the
     header regardless, and height:100vh (a viewport unit, unaffected by the
     containing-block change) guarantees it's tall enough to cover the screen. */
  .main-nav {
    position: fixed;
    top: 100%;
    left: 0;
    right: 0;
    height: 100vh;
    background: var(--color-paper);
    flex-direction: column;
    align-items: stretch;
    padding: 18px 24px 32px;
    gap: 4px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
    overflow-y: auto;
  }

  .main-nav a {
    padding: 14px 16px;
    margin: 0;
    border-bottom: 1px solid var(--color-line);
  }

  .main-nav a::after {
    display: none;
  }

  body.nav-open .main-nav {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .header-phone-link,
  .header-email-btn span {
    display: none;
  }

  .header-email-btn {
    padding: 12px;
  }

  .nav-toggle {
    display: inline-flex;
  }

  body.nav-open .nav-toggle span {
    background: transparent;
  }

  body.nav-open .nav-toggle span::before {
    top: 0;
    transform: rotate(45deg);
  }

  body.nav-open .nav-toggle span::after {
    top: 0;
    transform: rotate(-45deg);
  }
}

/* ---------- Hero (photo background) ---------- */
.hero-photo {
  position: relative;
  overflow: hidden;
  color: #fff;
}

.hero-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--hero-img);
  background-size: cover;
  background-position: center;
}

.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(20, 22, 23, 0.94) 0%, rgba(20, 22, 23, 0.88) 34%, rgba(20, 22, 23, 0.6) 62%, rgba(20, 22, 23, 0.3) 100%);
}

.hero-photo .container {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
  gap: 48px;
  align-items: end;
  padding-top: 108px;
  padding-bottom: 88px;
  min-height: 480px;
}

.hero-photo .eyebrow {
  color: var(--color-gold-light);
}

.hero-photo h1 {
  color: #fff;
}

.hero-photo .lead {
  color: rgba(255, 255, 255, 0.82);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.google-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--color-white);
  box-shadow: var(--shadow-s);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--color-ink);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.google-badge:hover {
  box-shadow: var(--shadow-m);
  transform: translateY(-2px);
}

.google-badge .stars {
  font-size: 0.85rem;
  color: var(--color-gold);
  letter-spacing: 1px;
}

@media (max-width: 900px) {
  .hero-photo .container {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 64px;
    padding-bottom: 48px;
    min-height: auto;
  }
}

/* ---------- Startseite: Hero, Zahlen-Streifen, VEMA-Band ---------- */
.hero-photo.hero-home .container {
  grid-template-columns: minmax(0, 1fr);
  padding: 120px 24px 104px;
}

.hero-photo.hero-home h1 {
  max-width: 820px;
  font-size: clamp(2.5rem, 4.6vw + 0.6rem, 4.2rem);
  margin-bottom: 22px;
}

.hero-photo.hero-home .lead {
  max-width: 640px;
}

@media (max-width: 720px) {
  .hero-photo.hero-home .container {
    padding: 72px 24px 64px;
  }
}

.stats-band {
  background: var(--color-white);
  padding: 56px 0;
  border-bottom: 1px solid var(--color-line);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  text-align: center;
}

.stats-grid > div {
  padding: 0 8px;
}

.stats-grid > div + div {
  border-left: 1px solid var(--color-line);
}

.stats-grid strong {
  display: block;
  font-size: clamp(2.4rem, 2.6vw + 1rem, 3.7rem);
  font-weight: 800;
  line-height: 1.05;
  color: var(--color-gold-dark);
  margin-bottom: 8px;
}

.stats-grid > div > span {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-ink);
}

.stats-grid small {
  display: block;
  margin-top: 6px;
  font-size: 0.85rem;
  color: var(--color-slate);
}

.stats-grid small span {
  font-size: inherit;
  font-weight: 700;
  color: var(--color-slate);
}

@media (max-width: 900px) {
  .stats-grid {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 36px;
  }

  .stats-grid > div:nth-child(4) {
    border-left: 0;
  }
}

@media (max-width: 560px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats-grid > div {
    border-left: 0 !important;
  }

  .stats-grid > div:last-child {
    grid-column: 1 / -1;
  }
}

.vema-band {
  padding: 24px 0 88px;
}

.vema-card {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 56px;
  align-items: center;
  background: var(--color-ink);
  color: #fff;
  border-radius: var(--radius-l);
  padding: 56px 60px;
  box-shadow: var(--shadow-m);
}

.vema-logo {
  height: 34px;
  width: auto;
  display: block;
  margin-bottom: 24px;
}

.vema-card .eyebrow {
  color: var(--color-gold-light);
}

.vema-card h2 {
  color: #fff;
  font-size: clamp(1.7rem, 2.2vw + 0.9rem, 2.4rem);
  margin-bottom: 16px;
}

.vema-card p {
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 20px;
}

.vema-card .card-link {
  color: var(--color-gold-light);
}

.vema-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.vema-points li {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-m);
  padding: 18px 22px;
}

.vema-points strong {
  display: block;
  color: #fff;
  font-size: 1.1rem;
}

.vema-points span {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
}

@media (max-width: 900px) {
  .vema-card {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 40px 28px;
  }
}

.hero-photo.hero-simple .container {
  grid-template-columns: minmax(0, 1fr);
  padding-top: 84px;
  padding-bottom: 64px;
  min-height: auto;
  text-align: center;
}

.hero-photo.hero-simple .lead {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

.hero-photo.hero-simple .eyebrow {
  display: block;
}

/* ---------- Cards / Grid ---------- */
.grid {
  display: grid;
  gap: 24px;
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 980px) {
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 620px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

.card {
  background: var(--color-white);
  border: none;
  box-shadow: var(--shadow-s);
  border-radius: var(--radius-m);
  padding: 32px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover {
  box-shadow: var(--shadow-m);
  transform: translateY(-3px);
}

.card .icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--color-gold-tint);
  color: var(--color-gold-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  font-size: 1.4rem;
}

/* ---------- Icon system (inline SVG, no emoji) ---------- */
.icon svg {
  width: 26px;
  height: 26px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon svg circle[fill="currentColor"] {
  fill: currentColor;
}

.card ul {
  margin-top: 14px;
}

.card ul li {
  position: relative;
  padding-left: 18px;
  color: var(--color-slate);
  font-size: 0.95rem;
  margin-bottom: 6px;
}

.card ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-gold);
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-weight: 700;
  color: var(--color-ink);
  font-size: 0.94rem;
}

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--color-ink);
  color: var(--color-white);
  border-radius: var(--radius-l);
  padding: 56px;
}

.cta-band.cta-photo {
  position: relative;
  overflow: hidden;
  background: var(--color-ink);
}

.cta-band.cta-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--cta-img);
  background-size: cover;
  background-position: center;
  opacity: 0.55;
}

.cta-band.cta-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(20, 22, 23, 0.95) 0%, rgba(20, 22, 23, 0.75) 55%, rgba(20, 22, 23, 0.4) 100%);
}

.cta-band.cta-photo .cta-band-inner {
  position: relative;
  z-index: 2;
}

.cta-band h2 {
  color: var(--color-white);
}

.cta-band .lead {
  color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 720px) {
  .cta-band {
    padding: 36px 24px;
    border-radius: var(--radius-m);
  }
}

.cta-band-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

/* ---------- Service CTA grid (Kontakt page) ---------- */
.service-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

@media (max-width: 980px) {
  .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .service-grid {
    grid-template-columns: 1fr;
  }
}

.service-card .btn { white-space: normal; text-align: center; padding-left: 12px; padding-right: 12px; font-size: 0.9rem; }

.service-card {
  background: var(--color-white);
  border: none;
  box-shadow: var(--shadow-s);
  border-radius: var(--radius-m);
  padding: 28px 24px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.service-card:hover {
  box-shadow: var(--shadow-m);
  transform: translateY(-3px);
}

.service-card .icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--color-gold-tint);
  color: var(--color-gold-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}

.service-card h3 {
  margin-bottom: 0;
}

.service-card p {
  color: var(--color-slate);
  font-size: 0.94rem;
  margin-bottom: 0;
  flex-grow: 1;
}

/* ---------- FAQ (Akkordeon mit details/summary) ---------- */
.faq .eyebrow {
  display: block;
  margin-bottom: 10px;
}

.faq h2 {
  margin: 44px 0 16px;
  font-size: 1.35rem;
}

.faq-item {
  background: var(--color-white);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-s);
  margin-bottom: 12px;
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  font-weight: 700;
  color: var(--color-ink);
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-gold-tint);
  color: var(--color-gold-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  line-height: 1;
}

.faq-item[open] summary::after {
  content: "–";
}

.faq-item summary:focus-visible {
  outline: 2px solid var(--color-gold-dark);
  outline-offset: 2px;
  border-radius: var(--radius-m);
}

.faq-answer {
  padding: 0 22px 18px;
  color: var(--color-slate);
}

.faq-answer p:last-child {
  margin-bottom: 0;
}

.faq-cta {
  margin-top: 48px;
  padding: 32px 28px;
  text-align: center;
  background: var(--color-white);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-s);
}

.faq-cta h2 {
  margin-top: 0;
}

/* Breite Leiste „Daten ändern“ unter den Service-Karten */
.service-bar {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 20px;
  padding: 24px 28px;
  background: var(--color-white);
  box-shadow: var(--shadow-s);
  border-radius: var(--radius-m);
}

.service-bar .icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--color-gold-tint);
  color: var(--color-gold-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-bar-text {
  flex: 1 1 auto;
  min-width: 0;
}

.service-bar-text h3 {
  margin-bottom: 4px;
}

.service-bar-text p {
  margin: 0;
  color: var(--color-slate);
  font-size: 0.94rem;
}

.service-bar .btn {
  flex: 0 0 auto;
}

@media (max-width: 720px) {
  .service-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 24px;
  }
  .service-bar .btn {
    width: 100%;
    text-align: center;
  }
}

/* ---------- Timeline coverflow (vertical, current milestone enlarged) ---------- */
.timeline-coverflow {
  position: relative;
  max-width: 720px;
  margin: 40px auto 0;
}

.timeline-viewport {
  overflow: hidden;
  height: 620px;
}

.timeline-track {
  display: flex;
  flex-direction: column;
  will-change: transform;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.timeline-slide {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 20px;
  padding: 20px 26px;
  margin: 7px 0;
  border-radius: var(--radius-m);
  cursor: pointer;
  transform: scale(calc(1 - var(--dist, 0) * 0.1));
  opacity: calc(1 - var(--dist, 0) * 0.3);
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.55s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.timeline-slide.is-active {
  background: var(--color-white);
  box-shadow: var(--shadow-m);
  cursor: default;
}

.timeline-slide.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.timeline-slide .tl-year {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 2px;
}

.timeline-slide .tl-year span {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-gold);
  color: var(--color-ink);
  font-weight: 800;
  font-size: 0.86rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-s);
}

.timeline-slide .tl-content h3 {
  margin-bottom: 6px;
}

.timeline-slide .tl-content p {
  color: var(--color-slate);
  font-size: 0.95rem;
  margin-bottom: 0;
}

.tl-vema-logo {
  height: 34px;
  width: auto;
  margin-top: 12px;
  display: block;
}

@media (max-width: 620px) {
  .timeline-viewport {
    height: 480px;
  }

  .timeline-slide {
    grid-template-columns: 48px 1fr;
    gap: 14px;
    padding: 16px 18px;
  }

  .timeline-slide .tl-year span {
    width: 44px;
    height: 44px;
    font-size: 0.76rem;
  }
}

/* ---------- Team ---------- */
/* ---------- Team photo card (modern, no cropped circles) ---------- */
.team-photo-card {
  background: var(--color-white);
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: var(--shadow-s);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}

.team-photo-card:focus-visible {
  outline: 2px solid var(--color-gold-dark);
  outline-offset: 3px;
}

.team-photo-card:hover {
  box-shadow: var(--shadow-m);
  transform: translateY(-3px);
}

.team-photo-card .photo {
  position: relative;
  aspect-ratio: 700 / 780;
  overflow: hidden;
  background: var(--color-ink);
}

.team-photo-card .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
  display: block;
  position: relative;
  z-index: 0;
  filter: grayscale(35%) sepia(6%) contrast(1.04) brightness(1.04);
  transition: filter 0.3s ease, transform 0.4s ease;
}

.team-photo-card:hover .photo img {
  filter: grayscale(15%) sepia(3%) contrast(1.03) brightness(1.06);
  transform: scale(1.04);
}

/* Duotone wash so the differing source backgrounds (studio grey vs. plain white)
   read as one consistent tone instead of standing out against each other. Multiply
   blend pulls bright backgrounds down toward the brand tone while leaving already-dark
   backgrounds roughly where they are. */
.team-photo-card .photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(165deg, rgba(51, 56, 60, 0.15) 0%, rgba(20, 22, 23, 0.12) 55%, rgba(20, 22, 23, 0.18) 100%);
  mix-blend-mode: multiply;
}

.team-photo-card .photo.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-photo-card .photo.placeholder .avatar-icon {
  width: 42%;
  height: auto;
  color: var(--color-gold-light);
  opacity: 0.9;
}

.team-photo-card .photo.placeholder .avatar-icon circle,
.team-photo-card .photo.placeholder .avatar-icon path {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.team-photo-card .body {
  padding: 14px 20px 16px;
  text-align: left;
}

.team-photo-card .body h3 {
  margin-bottom: 9px;
  font-size: 1.3rem;
}

.team-contact {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.team-contact .tc-line {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-slate);
  text-decoration: none;
}

.team-contact .tc-line:hover {
  color: var(--color-ink);
}

.team-contact .tc-line svg {
  width: 14px;
  height: 14px;
  stroke: var(--color-gold-dark);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.hover-hint {
  color: var(--color-gold-light);
  font-size: 0.86rem;
  font-weight: 700;
  margin: 10px 0 0;
}

/* Hard facts only, always visible: name + role. Full bio lives in the hover overlay below. */
.team-photo-card .team-role {
  margin-bottom: 0;
  font-size: 0.84rem;
  line-height: 1.35;
}

.team-photo-card .bio-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  padding: 22px;
  background: linear-gradient(180deg, rgba(20, 22, 23, 0) 35%, rgba(20, 22, 23, 0.94) 100%);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.team-photo-card .bio-overlay p {
  color: rgba(255, 255, 255, 0.94);
  font-size: 0.87rem;
  line-height: 1.5;
  margin: 0;
}

.hard-facts {
  width: 100%;
}

.hard-facts .hf-role {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.hard-facts .hf-line {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  margin-bottom: 6px;
}

.hard-facts .hf-line:last-child {
  margin-bottom: 0;
}

.hard-facts .hf-line svg {
  width: 15px;
  height: 15px;
  stroke: var(--color-gold-light);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.team-photo-card:hover .bio-overlay,
.team-photo-card:focus-within .bio-overlay {
  opacity: 1;
  transform: translateY(0);
}

@media (hover: none) {
  .team-photo-card .bio-overlay {
    opacity: 1;
    transform: none;
  }
}

.team-role {
  color: var(--color-gold-text);
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 10px;
  display: block;
}

/* ---------- Testimonial ---------- */
.testimonial {
  background: var(--color-white);
  border: none;
  box-shadow: var(--shadow-m);
  border-radius: var(--radius-l);
  padding: 48px;
  position: relative;
}

.testimonial .stars {
  color: var(--color-gold);
  font-size: 1.1rem;
  letter-spacing: 3px;
  margin-bottom: 18px;
}

.testimonial blockquote {
  margin: 0 0 20px;
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--color-ink);
  font-weight: 500;
}

.testimonial cite {
  font-style: normal;
  color: var(--color-slate);
  font-size: 0.92rem;
}

@media (max-width: 620px) {
  .testimonial {
    padding: 28px;
  }
}

/* ---------- Split section ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr;
  }
}

/* ---------- Info blocks (Kontakt) ---------- */
.info-block {
  display: flex;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-line);
}

.info-block:last-child {
  border-bottom: none;
}

.info-block .icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--color-paper-alt);
  color: var(--color-gold-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.info-block h3 {
  font-size: 1rem;
  margin-bottom: 4px;
}

.info-block p {
  margin-bottom: 0;
  color: var(--color-slate);
  font-size: 0.95rem;
}

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--color-ink);
  color: rgba(255, 255, 255, 0.72);
  padding: 64px 0 32px;
  margin-top: 40px;
  border-top: 3px solid var(--color-gold);
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(560px circle at 90% -10%, rgba(230, 154, 18, 0.16), transparent 60%),
    radial-gradient(480px circle at 2% 105%, rgba(230, 154, 18, 0.08), transparent 55%);
}

.site-footer > .container {
  position: relative;
  z-index: 1;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-grid > div + div {
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  padding-left: 28px;
}

@media (max-width: 820px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-grid > div + div {
    border-left: none;
    padding-left: 0;
  }
}

@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

.site-footer h4 {
  position: relative;
  color: var(--color-white);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 18px;
  padding-bottom: 12px;
}

.site-footer h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--color-gold-light), var(--color-gold-dark));
}

/* Deliberately not underlining this wrapper: the logo sits before "VMEK GMBH"
   on the same row, but the h4's own underline (identical to the other three
   column headings, just further right) is what should read as "part of the
   same row of headings" — so the h4 keeps its normal margin/padding/::after
   below, and only the logo is aligned to it via flex-start. */
.footer-brand {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.footer-brand img {
  height: 26px !important;
}

.footer-grid p strong {
  color: var(--color-white);
}

.site-footer a:hover {
  color: var(--color-white);
}

.site-footer li {
  margin-bottom: 10px;
  font-size: 0.94rem;
}

.footer-grid .footer-nav-list a,
.footer-grid .footer-legal-list a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.footer-grid .footer-nav-list a::before,
.footer-grid .footer-legal-list a::before {
  content: "→";
  display: inline-block;
  color: var(--color-gold-light);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.footer-grid .footer-nav-list a:hover::before,
.footer-grid .footer-legal-list a:hover::before {
  opacity: 1;
  transform: translateX(0);
}

.footer-contact {
  margin: 0;
}

.footer-contact li {
  margin-bottom: 12px;
}

.footer-contact-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.footer-contact-line svg {
  width: 16px;
  height: 16px;
  margin-top: 1px;
  flex-shrink: 0;
  stroke: var(--color-gold-light);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 24px;
  font-size: 0.85rem;
}

/* ---------- Legal pages ---------- */
.legal {
  max-width: 780px;
  margin: 0 auto;
}

.legal h2 {
  margin-top: 2em;
  font-size: 1.35rem;
}

.legal h3 {
  margin-top: 1.6em;
  font-size: 1.05rem;
}

.legal p,
.legal li {
  color: var(--color-slate);
  font-size: 0.98rem;
}

.legal ul {
  padding-left: 1.2em;
  list-style: disc;
  margin-bottom: 1em;
}

.legal li {
  margin-bottom: 0.4em;
}

/* ---------- Utilities ---------- */
.mt-0 { margin-top: 0; }
.text-center { text-align: center; }
.bg-alt { background: var(--color-paper-alt); }

/* Soft brand-color gradient blobs for otherwise flat sections */
.bg-pattern {
  position: relative;
  overflow: hidden;
}

.bg-pattern::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.bg-pattern-1::before {
  background:
    radial-gradient(620px circle at 12% 15%, rgba(230, 154, 18, 0.12), transparent 62%),
    radial-gradient(520px circle at 88% 85%, rgba(43, 47, 49, 0.07), transparent 60%);
}

.bg-pattern-2::before {
  background:
    radial-gradient(560px circle at 90% 10%, rgba(230, 154, 18, 0.1), transparent 60%),
    radial-gradient(640px circle at 8% 90%, rgba(43, 47, 49, 0.06), transparent 62%);
}

.bg-pattern > .container {
  position: relative;
  z-index: 1;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--color-ink);
  color: var(--color-white);
  padding: 12px 20px;
  border-radius: 8px;
  z-index: 200;
}

.skip-link:focus {
  left: 24px;
  top: 12px;
}

/* ---------- Photo card (image header + overlapping icon badge) ---------- */
.photo-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: var(--shadow-s);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.photo-card:hover {
  box-shadow: var(--shadow-m);
  transform: translateY(-3px);
}

.photo-card .photo {
  position: relative;
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
}

.photo-card .photo .badge {
  position: absolute;
  left: 24px;
  bottom: -26px;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--color-ink);
  color: var(--color-gold-light);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-s);
}

.photo-card .body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 44px 28px 28px;
}

.photo-card .body h3 {
  min-height: 2.9rem;
}

.photo-card .body p {
  flex-grow: 1;
}

.photo-card .body ul {
  margin-top: 14px;
}

.photo-card .body .card-link {
  margin-top: auto;
}

/* ---------- Photo frame (single image, links through to a detail page) ---------- */
.photo-frame {
  position: relative;
  z-index: 1;
  display: block;
  text-decoration: none;
}

.photo-frame-hint {
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 2;
  background: rgba(24, 27, 28, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--radius-s);
  padding: 10px 18px;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.photo-frame:hover .photo-frame-hint,
.photo-frame:focus-visible .photo-frame-hint {
  opacity: 1;
  transform: translateY(0);
}

@media (hover: none) {
  .photo-frame-hint {
    opacity: 1;
    transform: none;
  }
}

.photo-frame img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1400 / 820;
  object-fit: cover;
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-m);
  display: block;
  position: relative;
  z-index: 1;
}

.photo-frame::before {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  background: var(--color-gold);
  border-radius: var(--radius-l);
  z-index: 0;
}

@media (max-width: 620px) {
  .photo-frame::before {
    inset: 12px -12px -12px 12px;
  }
}

.experience-badge {
  display: inline-block;
  font-size: 0.98rem;
  color: var(--color-slate);
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  padding: 12px 24px;
  box-shadow: var(--shadow-s);
}

.experience-badge strong {
  color: var(--color-gold-dark);
  font-weight: 800;
}

.persona-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gold-light);
  border: 1px solid rgba(230, 154, 18, 0.4);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 14px;
}

/* ---------- Spotlight banner (e.g. Start-ups & Gründer) ---------- */
.spotlight {
  background: var(--color-ink);
  color: rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-l);
  padding: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.spotlight h2,
.spotlight h3 {
  color: var(--color-white);
}

.spotlight .lead {
  color: rgba(255, 255, 255, 0.68);
}

.spotlight ul li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
  font-size: 0.98rem;
}

.spotlight ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(230, 154, 18, 0.18);
  border: 1px solid var(--color-gold-light);
}

.spotlight ul li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 0.6em;
  width: 6px;
  height: 3px;
  border-left: 2px solid var(--color-gold-light);
  border-bottom: 2px solid var(--color-gold-light);
  transform: rotate(-45deg);
}

@media (max-width: 900px) {
  .spotlight {
    grid-template-columns: 1fr;
    padding: 36px 24px;
    border-radius: var(--radius-m);
  }
}

/* ---------- Coverflow carousel (center slide enlarged) ---------- */
.coverflow {
  position: relative;
}

/* During a loop-wrap reset, freeze all animation so the track jump and the
   slide resize happen in the same instant instead of visibly drifting apart. */
.coverflow.is-jumping .coverflow-track,
.coverflow.is-jumping .coverflow-slide {
  transition: none !important;
}

.coverflow-band {
  padding: 52px 0;
}

.coverflow-band.photo-bg {
  position: relative;
  background-image:
    linear-gradient(180deg, rgba(20, 22, 23, 0.5) 0%, rgba(20, 22, 23, 0.62) 100%),
    var(--quality-img);
  background-size: cover;
  background-position: center 30%;
}

.coverflow-band.photo-bg .eyebrow {
  color: var(--color-gold-light);
}

.coverflow-band.photo-bg h2 {
  color: var(--color-white);
}

/* The frosted-glass look lives on a ::before layer (not the slide box itself)
   because Chromium clips backdrop-filter to the border-radius unreliably when
   the same element also carries a transform:scale — with the blur split onto
   an absolutely-positioned pseudo-element, the slide's own overflow:hidden +
   border-radius always does the clipping, so the corners stay round at any scale. */
.coverflow-band.photo-bg .coverflow-slide {
  position: relative;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow: none;
}

.coverflow-band.photo-bg .coverflow-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.coverflow-band.photo-bg .coverflow-slide > * {
  position: relative;
  z-index: 1;
}

.coverflow-band.photo-bg .coverflow-slide.is-active {
  border-color: rgba(230, 154, 18, 0.55);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.32);
}

.coverflow-band.photo-bg .coverflow-slide.is-active::before {
  background: linear-gradient(155deg, rgba(230, 154, 18, 0.32), rgba(20, 22, 23, 0.42));
}

.coverflow-band.photo-bg .coverflow-slide h3 {
  color: var(--color-white);
}

.coverflow-band.photo-bg .coverflow-slide p {
  color: rgba(255, 255, 255, 0.85);
}

.coverflow-band.photo-bg .coverflow-slide .slide-icon {
  background: rgba(255, 255, 255, 0.16);
  color: var(--color-gold-light);
}

.coverflow-viewport {
  overflow: hidden;
  padding: 40px 0;
}

.coverflow-track {
  display: flex;
  align-items: center;
  will-change: transform;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.coverflow-slide {
  /* Box = Größe der aktiven Karte; nur kleiner skaliert (nie größer), damit der Text
     der aktiven Karte nicht hochgerechnet und damit unscharf wird. */
  flex: 0 0 475px;
  height: 375px;
  margin: 0 -28px;
  background: var(--color-white);
  box-shadow: var(--shadow-s);
  border-radius: var(--radius-m);
  padding: 40px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  transform: translateX(var(--shift, 0px)) scale(calc(1 - var(--dist, 0) * 0.44));
  opacity: calc(1 - var(--dist, 0) * 0.5);
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.55s ease, box-shadow 0.55s ease, background 0.3s ease;
}

.coverflow-slide.is-active {
  cursor: default;
  border: 1px solid rgba(230, 154, 18, 0.4);
  box-shadow: var(--shadow-m);
}

.coverflow-slide.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.coverflow-slide .slide-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 15px;
  background: rgba(230, 154, 18, 0.12);
  color: var(--color-gold);
}

.coverflow-slide .slide-icon svg {
  width: 25px;
  height: 25px;
}

.coverflow-slide h3 {
  font-size: 1.44rem;
  margin-bottom: 10px;
}

.coverflow-slide p {
  color: var(--color-slate);
  font-size: 1.18rem;
  margin-bottom: 0;
}

.coverflow-slide {
  --quote-scale: 1;
}

.coverflow-slide .stars {
  margin-bottom: calc(12px * var(--quote-scale));
  font-size: calc(1.25rem * var(--quote-scale));
}

.coverflow-slide blockquote {
  border: none;
  padding: 0;
  margin: 0 0 calc(15px * var(--quote-scale));
  font-size: calc(1.25rem * var(--quote-scale));
  line-height: 1.5;
  font-style: normal;
  color: var(--color-ink);
}

.coverflow-slide cite {
  font-size: calc(1.03rem * var(--quote-scale));
  color: var(--color-slate-light);
  font-style: normal;
}

@media (max-width: 720px) {
  .coverflow-slide {
    flex-basis: 92vw;
    height: 340px;
    margin: 0 -6vw;
    padding: 30px;
  }
}

.carousel-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
}

.carousel-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-line);
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-ink);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.carousel-btn:hover {
  border-color: var(--color-ink);
  background: var(--color-paper-alt);
}

.carousel-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Process steps ---------- */
.process-steps {
  display: flex;
  align-items: stretch;
  gap: 20px;
}

.process-step {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  position: relative;
  background: var(--color-white);
  border: 1px solid transparent;
  border-radius: var(--radius-l);
  padding: 40px 28px 32px;
  box-shadow: var(--shadow-s);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.process-step:hover {
  transform: translateY(-8px);
  border-color: rgba(230, 154, 18, 0.45);
  box-shadow: 0 20px 44px rgba(43, 47, 49, 0.16);
}

.process-step:hover .num {
  transform: scale(1.08);
}

.process-step .step-index {
  position: absolute;
  top: 20px;
  right: 24px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--color-line);
}

.process-step .num {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold-dark));
  color: var(--color-ink);
  font-weight: 800;
  font-size: 1.1rem;
  box-shadow: var(--shadow-s);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.process-step .num svg {
  width: 24px;
  height: 24px;
}

.process-step h3 {
  font-size: 1.15rem;
  margin: 0;
}

.process-step p {
  font-size: 1.02rem;
  color: var(--color-slate);
  margin-bottom: 0;
  flex-grow: 1;
  display: flex;
  align-items: center;
}

.process-arrow {
  flex-shrink: 0;
  align-self: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  color: var(--color-gold-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}

.process-arrow svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 900px) {
  .process-steps {
    flex-direction: column;
    gap: 28px;
  }

  .process-arrow {
    display: none;
  }
}

/* ---------- Team member modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.modal.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.25s ease;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 22, 23, 0.72);
}

.modal-dialog {
  position: relative;
  background: var(--color-white);
  border-radius: var(--radius-l);
  width: 100%;
  max-width: 700px;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: var(--shadow-m);
  transform: translateY(16px) scale(0.98);
  transition: transform 0.25s ease, max-width 0.35s ease;
}

.modal.is-open .modal-dialog {
  transform: none;
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(24, 27, 28, 0.6);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.modal-close svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* Layout: [photo + name/role/bio] [contact links] and, on demand, [full profile]. */
.modal-layout {
  display: grid;
  grid-template-columns: 290px 250px;
  grid-template-rows: auto 1fr;
  column-gap: 34px;
  align-items: start;
  padding: 38px 40px 40px;
}

.modal-dialog.is-panel-open .modal-layout {
  grid-template-columns: 290px 250px minmax(0, 1fr);
}

.modal-person {
  grid-column: 1;
  grid-row: 1;
}

.modal-photo {
  aspect-ratio: 700 / 780;
  overflow: hidden;
  border-radius: var(--radius-m);
}

.modal-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
  display: block;
}

.modal-person-text {
  padding-top: 20px;
}

.modal-person-text h3 {
  margin: 0 0 6px;
  font-size: 1.55rem;
}

.modal-person-text .team-role {
  font-size: 0.95rem;
  margin-bottom: 12px;
}

.modal-person-text p {
  margin: 0;
  color: var(--color-slate);
  font-size: 0.95rem;
  line-height: 1.6;
}

.modal-actions {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 4px;
}

.modal-actions .btn {
  width: 100%;
  justify-content: flex-start;
  padding: 14px 20px;
  font-size: 0.95rem;
}

.modal-actions .btn[hidden] {
  display: none;
}

.modal-actions .btn svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.modal-panel {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: stretch;
  border-left: 1px solid var(--color-line);
  padding: 6px 28px 0 34px;
  animation: modal-panel-in 0.35s ease;
}

@keyframes modal-panel-in {
  from {
    opacity: 0;
    transform: translateX(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.modal-steckbrief h4 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-ink);
  margin: 30px 0 10px;
}

.modal-steckbrief h4:first-child {
  margin-top: 0;
}

.modal-steckbrief p {
  color: var(--color-slate);
  line-height: 1.7;
  margin: 0 0 4px;
}

.modal-steckbrief .sb-tags {
  color: var(--color-gold-text);
  font-weight: 700;
}

.modal-steckbrief ul {
  margin: 0;
  padding-left: 20px;
  list-style: disc;
  color: var(--color-slate);
}

.modal-steckbrief ul li {
  margin-bottom: 6px;
  line-height: 1.5;
}

.modal-dialog.is-panel-open {
  max-width: 1160px;
}

/* Medium screens: profile drops below the photo/contact row instead of beside it. */
@media (max-width: 1000px) {
  .modal-dialog.is-panel-open {
    max-width: 680px;
  }

  .modal-dialog.is-panel-open .modal-layout {
    grid-template-columns: 290px 250px;
  }

  .modal-panel {
    grid-row: 2;
    grid-column: 1 / -1;
    border-left: 0;
    border-top: 1px solid var(--color-line);
    margin-top: 30px;
    padding: 26px 0 0;
  }
}

body.modal-open {
  overflow: hidden;
}

@media (max-width: 560px) {
  .modal {
    padding: 0;
  }

  .modal-dialog {
    max-width: none;
    max-height: 100vh;
    height: 100%;
    border-radius: 0;
  }

  .modal-dialog.is-panel-open {
    max-width: none;
  }

  .modal-layout,
  .modal-dialog.is-panel-open .modal-layout {
    grid-template-columns: 1fr;
    padding: 64px 22px 32px;
  }

  .modal-layout > *,
  .modal-panel {
    grid-column: 1;
    grid-row: auto;
  }

  .modal-layout,
  .modal-dialog.is-panel-open .modal-layout {
    grid-template-rows: none;
  }

  .modal-photo {
    max-width: 240px;
  }

  .modal-actions {
    margin-top: 24px;
  }

}

/* ---------- Team: Hinweis zum zentralen Posteingang ---------- */
.team-intake {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  max-width: 880px;
  margin: 0 auto 48px;
  padding: 26px 30px;
  background: var(--color-white);
  border-radius: var(--radius-m);
  border-left: 4px solid var(--color-gold);
  box-shadow: var(--shadow-s);
}

.team-intake-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--color-gold-tint);
  color: var(--color-gold-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-intake-icon svg {
  width: 26px;
  height: 26px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.team-intake h3 {
  font-size: 1.15rem;
  margin: 2px 0 8px;
}

.team-intake p {
  margin: 0;
  color: var(--color-slate);
  line-height: 1.6;
}

.team-intake a {
  font-weight: 700;
  color: var(--color-ink);
}

@media (max-width: 560px) {
  .team-intake {
    flex-direction: column;
    gap: 14px;
    padding: 22px;
  }
}

/* ---------- Modal: Steckbrief-Symbol (Platzhalter für den Steckbrief-Button) ---------- */
.modal-actions {
  align-self: stretch;
}

.steckbrief-tile {
  margin-top: auto;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.steckbrief-tile[hidden] {
  display: none;
}

.steckbrief-tile:focus-visible {
  outline: 2px solid var(--color-gold-dark);
  outline-offset: 6px;
  border-radius: 8px;
}

.sb-sheet {
  position: relative;
  width: 86%;
  aspect-ratio: 4 / 4.7;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 22px 22px 20px;
  background: linear-gradient(180deg, #fffaf0 0%, #f6ebd3 100%);
  border: 2px solid var(--color-gold-dark);
  border-radius: 6px;
  box-shadow: inset 0 0 0 6px #fffaf0, inset 0 0 0 7px rgba(193, 127, 10, 0.45), 0 12px 26px rgba(43, 47, 49, 0.16);
  transform: rotate(-3deg);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.steckbrief-tile:hover .sb-sheet,
.steckbrief-tile[aria-expanded="true"] .sb-sheet {
  transform: rotate(0deg) translateY(-3px);
  box-shadow: inset 0 0 0 6px #fffaf0, inset 0 0 0 7px rgba(193, 127, 10, 0.6), 0 16px 32px rgba(193, 127, 10, 0.28);
}

.sb-title {
  width: 100%;
  text-align: center;
  font-weight: 800;
  font-size: 0.98rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-ink);
  padding: 4px 0 8px;
  border-bottom: 2px solid var(--color-ink);
}

.sb-portrait {
  width: 40%;
  flex-shrink: 0;
  padding: 6px;
  background: var(--color-gold-tint);
  border: 2px solid var(--color-ink);
  stroke: var(--color-ink);
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sb-lines {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 2px;
}

.sb-lines i {
  display: block;
  height: 5px;
  border-radius: 3px;
  background: rgba(43, 47, 49, 0.22);
}

.sb-lines i:nth-child(2) {
  width: 88%;
}

.sb-lines i:nth-child(3) {
  width: 66%;
}

.sb-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 0.98rem;
  color: var(--color-ink);
}

.sb-action svg {
  width: 18px;
  height: 18px;
  stroke: var(--color-gold-dark);
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
}

.steckbrief-tile:hover .sb-action svg {
  transform: translateX(4px);
}

@media (max-width: 560px) {
  .steckbrief-tile {
    margin-top: 22px;
  }

  .sb-sheet {
    width: 70%;
    max-width: 200px;
  }
}

/* ---------- Expand group (3-way click-to-expand accordion, Kapitalanlage) ---------- */
.expand-group {
  display: flex;
  align-items: stretch;
  gap: 20px;
}

.expand-item {
  flex: 0 0 220px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-s);
  overflow: hidden;
  cursor: pointer;
  contain: layout style;
  transition: flex-grow 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), flex-basis 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.3s ease;
}

.expand-item.is-active {
  flex: 1 1 0%;
  cursor: default;
  box-shadow: var(--shadow-m);
}

.expand-photo {
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

.expand-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px 0;
}

.expand-item:not(.is-active) .expand-header {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.expand-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold-dark));
  color: var(--color-ink);
  font-weight: 800;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.expand-header h3 {
  margin: 0;
  font-size: 1.1rem;
  min-width: 0;
  overflow-wrap: break-word;
  opacity: 1;
  transition: opacity 0.2s ease;
}

.expand-body {
  padding: 14px 24px 26px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.expand-teaser {
  color: var(--color-slate);
  margin-bottom: 0;
  opacity: 1;
  transition: opacity 0.2s ease;
}

.expand-detail {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.4s ease;
}

.expand-detail p {
  color: var(--color-slate);
}

.expand-item.is-active .expand-detail {
  max-height: 640px;
  opacity: 1;
  margin-top: 14px;
}

.expand-hint {
  margin-top: auto;
  padding-top: 14px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-gold-text);
  opacity: 1;
  transition: opacity 0.2s ease;
}

.expand-item.is-active .expand-hint {
  display: none;
}

/* While a panel's width is animating, remove the text from layout entirely
   (display:none, not just opacity:0) — see the JS-set .is-resizing class.
   Re-wrapping text on every frame of the resize is real reflow work, not just
   a visual distraction, and was the main cause of the animation feeling
   janky; skipping layout for it during the resize is what actually fixes
   that, not merely hiding the result. */
.expand-item.is-resizing .expand-header h3,
.expand-item.is-resizing .expand-teaser,
.expand-item.is-resizing .expand-hint,
.expand-item.is-resizing .expand-detail {
  display: none !important;
}

@media (max-width: 860px) {
  .expand-group {
    flex-direction: column;
  }

  .expand-item,
  .expand-item.is-active {
    flex: 0 0 auto;
  }

  .expand-item:not(.is-active) .expand-header {
    flex-direction: row;
    align-items: center;
  }

  .expand-photo {
    aspect-ratio: 21 / 9;
  }
}

/* ---------- Team: Hinweis-Buttons + Themen-Marker im Fenster ---------- */
.team-intake-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.team-intake-actions .btn {
  padding: 11px 22px;
  font-size: 0.95rem;
}

.team-intake-actions .btn svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* Lesezeichen auf den Team-Karten: Themen-Emblem(e) wie auf den Startseiten-Kacheln */
.theme-corner {
  position: absolute;
  top: 0;
  left: 16px;
  z-index: 3;
  width: 34px;
  height: 44px;
  padding-top: 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: var(--color-ink);
  color: var(--color-gold-light);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
}

.theme-corner-2 {
  height: 72px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%);
}

.theme-corner svg {
  box-sizing: content-box;
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  padding: 3px;
  border: 1.5px solid currentColor;
  border-radius: 7px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Themen im Fenster: rechts über dem Steckbrief-Symbol */
.modal-themes {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.modal-themes[hidden] {
  display: none;
}

.modal-themes a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 4px 14px 4px 4px;
  border-radius: 999px;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow-s);
  color: var(--color-ink);
  font-size: 0.85rem;
  font-weight: 800;
}

.modal-themes a svg {
  box-sizing: content-box;
  width: 18px;
  height: 18px;
  padding: 6px;
  border-radius: 50%;
  background: var(--color-ink);
  color: var(--color-gold-light);
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.modal-themes a {
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.modal-themes a:hover,
.modal-themes a:focus-visible {
  border-color: var(--color-gold-dark);
  box-shadow: var(--shadow-m);
  transform: translateX(3px);
}

.modal-themes:not([hidden]) + .steckbrief-tile {
  margin-top: 22px;
}

@media (max-width: 1000px) {
  .modal-themes {
    margin-top: 8px;
  }
}

/* Hinweis unter der Adresse (Homeoffice, Termine nur nach Vereinbarung) */
.address-note {
  margin-top: 14px;
  padding: 12px 16px;
  border-left: 3px solid var(--color-gold);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  background: var(--color-gold-tint);
  color: var(--color-ink);
  font-size: 0.92rem;
  line-height: 1.55;
}


/* ---------- Handy (z. B. 360 px): Überschriften & Carousel-Karten ---------- */
@media (max-width: 480px) {
  h1,
  .hero-photo h1,
  .hero-photo.hero-home h1 {
    font-size: clamp(1.7rem, 8vw, 2.2rem);
  }

  h2 {
    font-size: clamp(1.5rem, 6.6vw, 1.9rem);
  }

  .hero-photo .eyebrow {
    letter-spacing: 0.1em;
  }

  .coverflow-track {
    align-items: stretch;
  }

  .coverflow-slide {
    height: auto;
    min-height: 300px;
    padding: 24px;
  }

  .coverflow-slide .slide-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 12px;
  }

  .coverflow-slide .slide-icon svg {
    width: 20px;
    height: 20px;
  }

  .coverflow-slide h3 {
    font-size: 1.2rem;
  }

  .coverflow-slide p {
    font-size: 1rem;
    line-height: 1.5;
  }

  .coverflow-slide blockquote {
    font-size: calc(1.05rem * var(--quote-scale));
  }

  .coverflow-slide cite {
    font-size: calc(0.9rem * var(--quote-scale));
  }

  .coverflow-slide .stars {
    font-size: calc(1.05rem * var(--quote-scale));
  }
}

/* Raster-/Split-Spalten dürfen schmaler werden als ihr längstes Wort (sonst läuft Text rechts raus) */
.split,
.grid-2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 980px) {
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 620px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: minmax(0, 1fr);
  }
}

.split > *,
.grid > * {
  min-width: 0;
}

/* Zeitstrahl: oben/unten angeschnittene Punkte weich ausblenden statt hart abschneiden */
.timeline-viewport {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
}

/* Platzhalter-Avatar (dunkel): Lesezeichen etwas heller, damit es sich abhebt */
.team-photo-card .photo.placeholder .theme-corner {
  background: #454b4e;
}

/* Handy: lange Wörter trennen statt über den Kartenrand laufen; Hero-Text auf dem Foto besser lesbar */
@media (max-width: 720px) {
  /* Fließtext: keine automatische Silbentrennung; nur im Notfall (sehr langes Wort) wird umgebrochen */
  p,
  li,
  blockquote,
  cite {
    overflow-wrap: break-word;
    hyphens: manual;
  }

  /* Carousel-Fenster bis zum Bildschirmrand ziehen, damit die Karten (92 % Breite) nicht seitlich abgeschnitten werden */
  .coverflow-viewport {
    margin-left: -24px;
    margin-right: -24px;
  }

  .hero-photo::after {
    background: linear-gradient(180deg, rgba(20, 22, 23, 0.82) 0%, rgba(20, 22, 23, 0.74) 100%);
  }
}

/* ---------- Startseite: dunkler Abschnitt „Unsere Lösungen“ ---------- */
.section-dark {
  background: linear-gradient(180deg, #2b2f31 0%, #343a3d 100%);
  color: #fff;
}

.section-dark .eyebrow {
  color: var(--color-gold-light);
}

.section-dark h2 {
  color: #fff;
}

/* Gruppenfoto mit Hinweis darunter */
.photo-wrap {
  min-width: 0;
}

.photo-caption {
  margin: 14px 0 0;
  text-align: center;
  font-size: 0.88rem;
  color: var(--color-slate);
}

/* Zeitstrahl: Textspalte darf schmaler werden als das längste Wort (sonst läuft die Kachel auf dem Handy über) */
.timeline-slide {
  grid-template-columns: 64px minmax(0, 1fr);
}

.timeline-slide .tl-content,
.timeline-slide .tl-content p,
.timeline-slide .tl-content h3 {
  min-width: 0;
  overflow-wrap: break-word;
}

@media (max-width: 620px) {
  .timeline-slide {
    grid-template-columns: 48px minmax(0, 1fr);
  }
}

/* Weiße Karten im dunklen Abschnitt: Text nicht weiß vererben */
.section-dark .photo-card,
.section-dark .photo-card h3 {
  color: var(--color-ink);
}

.section-dark .photo-card p {
  color: var(--color-slate);
}

/* ---------- Hilfsklasse: nur für Screenreader sichtbar ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Beratungsprozess: Desktop drei gleich hohe Karten, Handy wischbarer Slider ---------- */
.process-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.process-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-s);
  padding: 36px 32px 32px;
  border-top: 3px solid var(--color-gold);
}

.process-card .process-num {
  position: absolute;
  top: 20px;
  right: 26px;
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
  color: rgba(230, 154, 18, 0.28);
}

.process-card .slide-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  background: rgba(230, 154, 18, 0.12);
  color: var(--color-gold);
}

.process-card .slide-icon svg {
  width: 25px;
  height: 25px;
}

.process-card h3 {
  font-size: 1.35rem;
  margin-bottom: 10px;
}

.process-card p {
  margin: 0;
  color: var(--color-slate);
  font-size: 1.02rem;
}

.process-controls {
  display: none;
}

.process-track:focus-visible {
  outline: 2px solid var(--color-gold-dark);
  outline-offset: 4px;
  border-radius: var(--radius-m);
}

@media (max-width: 860px) {
  .process-track {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -24px;
    padding: 6px 24px 18px;
    scroll-padding: 0 24px;
  }

  .process-track::-webkit-scrollbar {
    display: none;
  }

  .process-card {
    flex: 0 0 84%;
    scroll-snap-align: center;
    padding: 30px 24px 26px;
  }

  .process-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 4px;
  }

  .process-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 72px;
  }

  .process-dots {
    display: flex;
    gap: 8px;
  }

  .process-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(43, 47, 49, 0.22);
    transition: background 0.2s ease, transform 0.2s ease;
  }

  .process-dot.is-active {
    background: var(--color-gold-dark);
    transform: scale(1.25);
  }

  .process-position {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-slate);
  }

  .process-controls .carousel-btn:disabled {
    opacity: 0.35;
    cursor: default;
  }
}

/* Karussells: deaktivierte Pfeile am Anfang/Ende deutlich erkennbar */
.carousel-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ---------- Anspruch: zwei Textkarten ---------- */
.approach-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  align-items: stretch;
}

.approach-card {
  background: var(--color-white);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-s);
  padding: 36px 36px 32px;
}

.approach-card h3 {
  font-size: 1.4rem;
  margin-bottom: 14px;
}

.approach-card p {
  color: var(--color-slate);
}

.approach-card p:last-child {
  margin-bottom: 0;
}

@media (max-width: 860px) {
  .approach-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .approach-card {
    padding: 28px 24px 26px;
  }
}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .coverflow-track {
    transition: none !important;
  }
}

/* ---------- Kontakt & Kundenservice: zwei Bereiche ---------- */
.service-group + .service-group {
  margin-top: 64px;
}

.service-group .section-head {
  margin-bottom: 28px;
}

.service-group .section-head h2 {
  margin-bottom: 8px;
}

.service-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 980px) {
  .service-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .service-grid-3 {
    grid-template-columns: minmax(0, 1fr);
  }
}

.service-note {
  margin: 20px 0 0;
  font-size: 0.9rem;
  color: var(--color-slate);
  text-align: center;
}

/* ---------- Kapitalanlage: gut sichtbarer Risikohinweis ---------- */
.risk-note {
  max-width: 860px;
  margin: 36px auto 0;
  padding: 20px 24px;
  background: var(--color-white);
  border-left: 4px solid var(--color-gold);
  border-radius: var(--radius-s, 10px);
  box-shadow: var(--shadow-s);
  font-size: 0.95rem;
  color: var(--color-ink-soft);
}

.risk-note a {
  text-decoration: underline;
}

/* ---------- Feinschliff schmale Handys (320 px) ---------- */
.spotlight {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.spotlight > *,
.spotlight li {
  min-width: 0;
  overflow-wrap: break-word;
}

@media (max-width: 900px) {
  .spotlight {
    grid-template-columns: minmax(0, 1fr);
    padding: 36px 24px;
  }
}

.btn {
  max-width: 100%;
}

@media (max-width: 480px) {
  .btn {
    white-space: normal;
    text-align: center;
  }
}

.faq-item summary {
  overflow-wrap: anywhere;
  min-width: 0;
}

/* Desktop-Kopfzeile: bei mittleren Breiten (längere Menü-Bezeichnung „Kontakt & Service“) etwas kompakter */
@media (min-width: 1241px) and (max-width: 1500px) {
  .main-nav {
    gap: 2px;
  }
  .main-nav a {
    margin: 0 4px;
    font-size: 0.9rem;
  }
  .header-actions {
    gap: 10px;
  }
}

/* Beratungsprozess-Slider: Bezugspunkt für die Positionsberechnung */
.process-track {
  position: relative;
}

/* =====================================================================
   v65 – Feinschliff: einheitliche Silbentrennung, Textumbruch, Layout
   ===================================================================== */

/* Silbentrennung: nirgends automatisch. Nur Soft-Hyphens (­) in sehr langen Wörtern werden bei Bedarf genutzt.
   So sieht die Seite in jedem Browser (mit oder ohne Trennwörterbuch) gleich aus. */
html {
  -webkit-hyphens: manual;
  hyphens: manual;
}

h1,
h2,
h3,
h4,
.eyebrow,
.btn,
.card-link,
.persona-tag,
.stats-grid,
.process-card h3,
.photo-card h3,
.service-card h3,
.approach-card h3,
.vema-points,
.header-actions,
.main-nav,
.site-footer h4 {
  -webkit-hyphens: none;
  hyphens: none;
}

/* Überschriften ausgewogen umbrechen (keine einzelnen Wörter in der letzten Zeile), Fließtext ohne Waisen */
h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

p,
li,
blockquote,
.lead {
  text-wrap: pretty;
}

.nowrap {
  white-space: nowrap;
}

/* ---------- Startseite: Hero kompakter ---------- */
.hero-photo.hero-home .container {
  min-height: 0;
  padding: 96px 24px 84px;
}

@media (max-width: 720px) {
  .hero-photo.hero-home .container {
    padding: 64px 24px 56px;
  }
}

/* ---------- Zahlenband: gleich breite, bündige Spalten ---------- */
.stats-grid {
  align-items: start;
}

.stats-grid > div {
  padding: 0 6px;
  min-width: 0;
}

.stats-grid strong {
  font-size: clamp(2rem, 1.2vw + 1.5rem, 3rem);
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}

.stats-grid > div > span:not(.visually-hidden) {
  text-wrap: balance;
}

/* ---------- Unser Anspruch: farbige Akzente, bündige Zeilen ---------- */
.approach-section {
  padding-top: 24px;
}

.approach-section .section-head {
  margin-bottom: 36px;
}

.approach-grid {
  align-items: stretch;
  row-gap: 0;
}

.approach-card {
  position: relative;
  overflow: hidden;
  border-top: 4px solid var(--color-gold);
  background: linear-gradient(180deg, #fffaf0 0%, var(--color-white) 140px);
  padding: 30px 36px 34px;
}

.approach-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--color-gold-tint);
  color: var(--color-gold-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.approach-icon svg {
  width: 26px;
  height: 26px;
}

.approach-card h3 {
  margin-bottom: 14px;
}

.approach-card p:first-of-type {
  color: var(--color-ink-soft);
}

@supports (grid-template-rows: subgrid) {
  .approach-card {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  .approach-card > * {
    margin-top: 0;
  }
  .approach-card p {
    margin-bottom: 14px;
  }
  .approach-card p:last-child {
    margin-bottom: 0;
  }
  .approach-grid {
    gap: 28px;
    row-gap: 0;
  }
}

@media (max-width: 860px) {
  .approach-grid {
    row-gap: 24px;
  }
  @supports (grid-template-rows: subgrid) {
    .approach-grid {
      row-gap: 24px;
    }
    .approach-card {
      grid-row: auto;
      grid-template-rows: none;
      display: block;
    }
    .approach-card p {
      margin-bottom: 1em;
    }
    .approach-card p:last-child {
      margin-bottom: 0;
    }
  }
  .approach-card {
    padding: 26px 24px 28px;
  }
}

/* ---------- Karussells: Überschriften mittig ---------- */
.coverflow-band .section-head.center {
  margin-bottom: 8px;
}

.coverflow-band .carousel-controls {
  justify-content: center;
}

/* ---------- Kontakt: Karten je Bereich in einer Reihe ---------- */
.service-card {
  position: relative;
}

.anchor-target {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  overflow: hidden;
}

.service-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.service-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1000px) {
  .service-grid-3,
  .service-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .service-grid-3,
  .service-grid-4 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Gewerbe: Gründer-Feld ohne Stichwortliste ---------- */
.spotlight-note {
  border-left: 3px solid var(--color-gold-light);
  padding-left: 28px;
}

.spotlight-note h3 {
  font-size: 1.35rem;
  margin-bottom: 10px;
}

.spotlight-note p {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.05rem;
}

/* ---------- Abschlussband: keine einzelnen Wörter in der letzten Zeile ---------- */
.cta-band h2,
.cta-band .lead {
  text-wrap: balance;
}

.stats-grid > div > span:not(.visually-hidden) {
  font-size: 0.94rem;
}

/* Zahlenband Tablet: 3 Werte oben, 2 Werte mittig darunter (symmetrisch) */
@media (min-width: 561px) and (max-width: 900px) {
  .stats-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .stats-grid > div {
    grid-column: span 2;
  }
  .stats-grid > div:nth-child(n + 4) {
    grid-column: span 3;
  }
}

/* ---------- Zeitstrahl: Bilder / Logos rechts neben dem Textkasten ---------- */
.timeline-coverflow {
  max-width: 860px;
}

.timeline-slide {
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
}

.timeline-slide .tl-year {
  align-self: start;
}

.timeline-slide.no-media .tl-content {
  grid-column: 2 / -1;
}

.tl-media {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: flex-end;
  gap: 8px;
  width: 104px;
}

.tl-media-2 {
  width: 124px;
}

.tl-photo {
  display: block;
  width: 104px;
  height: auto;
  aspect-ratio: 240 / 267;
  object-fit: cover;
  object-position: center top;
  border-radius: 12px;
  background: var(--color-paper-alt);
  box-shadow: var(--shadow-s);
}

.tl-media-2 .tl-photo {
  width: 58px;
  border-radius: 10px;
}

.tl-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 104px;
  padding: 8px;
  background: var(--color-white);
  border-radius: 12px;
  box-shadow: var(--shadow-s);
  border: 1px solid var(--color-line);
}

.tl-media-2 .tl-logo {
  width: 58px;
  padding: 5px;
  border-radius: 10px;
}

.tl-media-2 .tl-logo.tl-logo-wide {
  width: 124px;
  padding: 6px 8px;
}

.tl-logo img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 620px) {
  .timeline-slide {
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: start;
  }
  .timeline-slide .tl-media {
    grid-column: 2;
    grid-row: 2;
    justify-content: flex-start;
    width: auto;
    margin-top: 2px;
  }
  .tl-photo {
    width: 76px;
  }
  .tl-media-2 {
    width: auto;
  }
  .tl-media-2 .tl-photo {
    width: 52px;
  }
  .tl-logo {
    width: 76px;
  }
  .tl-media-2 .tl-logo {
    width: 52px;
  }
  .tl-media-2 .tl-logo.tl-logo-wide {
    width: 104px;
  }
  .timeline-viewport {
    height: 540px;
  }
}

/* ---------- Startseite: Logo im Hero (rechts neben dem Text, links vom hellen Ärmel) ---------- */
.hero-photo.hero-home .container {
  position: relative;
}

.hero-logo {
  display: none;
}

@media (min-width: 1040px) {
  .hero-logo {
    display: block;
    position: absolute;
    left: 712px;
    bottom: 84px;
    width: 236px;
    padding: 18px 22px;
    background: rgba(255, 255, 255, 0.94);
    border-radius: 18px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35);
  }
  .hero-logo img {
    display: block;
    width: 100%;
    height: auto;
  }
}

/* ---------- VEMA-Karte: längerer Text ---------- */
.vema-card p {
  margin-bottom: 14px;
}

.vema-card .card-link {
  display: inline-block;
  margin-top: 8px;
}

.vema-points li {
  padding: 16px 22px;
}

.vema-points span {
  display: block;
  margin-top: 4px;
  line-height: 1.5;
}

/* ---------- Qualitätsversprechen: ausführliche Texte ---------- */
.coverflow-quality .coverflow-slide {
  flex-basis: 600px;
  height: 470px;
  padding: 34px 42px;
  margin: 0 -40px;
  justify-content: center;
}

.coverflow-quality .coverflow-slide h3 {
  font-size: 1.4rem;
  margin-bottom: 12px;
}

.coverflow-quality .coverflow-slide p {
  font-size: 1.02rem;
  line-height: 1.55;
  margin-bottom: 0.7em;
}

.coverflow-quality .coverflow-slide p:last-child {
  margin-bottom: 0;
}

@media (max-width: 720px) {
  .coverflow-quality .coverflow-slide {
    flex-basis: 92vw;
    height: auto;
    min-height: 0;
    margin: 0 -6vw;
    padding: 24px;
  }
  .coverflow-quality .coverflow-slide p {
    font-size: 0.95rem;
  }
}

.coverflow-quality .coverflow-slide {
  margin: 0 -105px;
}

.coverflow-quality .coverflow-slide.is-active {
  z-index: 2;
}

@media (max-width: 720px) {
  .coverflow-quality .coverflow-slide {
    margin: 0 -6vw;
  }
}

/* VEMA-Karte: Text breiter, Infokarten oben ausgerichtet */
.vema-card {
  grid-template-columns: 1.9fr 1fr;
  gap: 48px;
  align-items: start;
}

@media (max-width: 900px) {
  .vema-card {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
   v68
   ===================================================================== */

/* Hero-Logo: freigestellt (helle Version), größer, ohne Kasten */
.hero-logo {
  display: none;
}

@media (min-width: 1100px) {
  .hero-logo {
    display: block;
    position: absolute;
    left: 700px;
    bottom: 92px;
    width: 300px;
    padding: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
    filter: drop-shadow(0 6px 22px rgba(0, 0, 0, 0.55));
  }
  .hero-logo img {
    display: block;
    width: 100%;
    height: auto;
  }
}

/* Qualitätsversprechen: Überschrift neben dem Symbol, kompaktere Karten, fette Stichworte */
.coverflow-quality .slide-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.coverflow-quality .slide-head .slide-icon {
  width: 46px;
  height: 46px;
  margin-bottom: 0;
}

.coverflow-quality .slide-head h3 {
  margin: 0;
  font-size: 1.3rem;
  line-height: 1.2;
}

.coverflow-quality .coverflow-slide {
  flex-basis: 540px;
  height: 430px;
  padding: 28px 34px;
  margin: 0 -95px;
}

.coverflow-quality .coverflow-slide p {
  font-size: 1rem;
}

.coverflow-quality .coverflow-slide p strong {
  color: #fff;
  font-weight: 700;
}

@media (max-width: 720px) {
  .coverflow-quality .coverflow-slide {
    flex-basis: 92vw;
    height: auto;
    margin: 0 -6vw;
    padding: 22px;
  }
  .coverflow-quality .slide-head h3 {
    font-size: 1.15rem;
  }
}

/* Zeitstrahl: zweites Bild mittig unter dem breiten Logo */
.tl-media-center {
  justify-content: center;
}

/* VEMA auf der Startseite wieder kompakt; Volltext auf „Über uns“ */
.vema-card {
  grid-template-columns: 1.5fr 1fr;
  align-items: center;
}

@media (max-width: 900px) {
  .vema-card {
    grid-template-columns: 1fr;
  }
}

.vema-fulltext {
  margin: 8px 0 24px;
}

.vema-fulltext p {
  color: var(--color-slate);
  margin-bottom: 14px;
}

/* =====================================================================
   v69
   ===================================================================== */

/* Hero-Logo auf die gewünschte Größe */
@media (min-width: 1100px) {
  .hero-logo {
    left: 685px;
    bottom: 80px;
    width: 364px;
  }
}

/* Unser Anspruch: nur Überschrift und Symbol zeilengleich, Absätze rücken eng zusammen */
@supports (grid-template-rows: subgrid) {
  .approach-card {
    grid-row: span 3;
  }
}

.approach-text p {
  margin-bottom: 14px;
}

.approach-text p:last-child {
  margin-bottom: 0;
}

/* Fettdruck für Schlagwörter in längeren Texten */
.approach-card p strong,
.process-card p strong,
.vema-fulltext p strong {
  color: var(--color-ink);
  font-weight: 700;
}

.vema-card p strong {
  color: #fff;
  font-weight: 700;
}

/* Hinweis auf die häufigen Fragen */
.faq-hint {
  margin: 28px 0 0;
  text-align: center;
  color: var(--color-slate);
  font-size: 0.98rem;
}

.faq-hint a {
  font-weight: 700;
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Über uns, VEMA: Logo nach oben, darunter die drei Punkte */
#vema-eg .split {
  align-items: start;
}

.vema-side {
  display: grid;
  gap: 8px;
  margin-top: 22px;
}

.vema-side .testimonial {
  margin: 0 0 8px;
}

@media (max-width: 900px) {
  .vema-side {
    margin-top: 0;
  }
}

/* ---------- Über uns, VEMA: rechte Spalte so hoch wie der Text links ---------- */
#vema-eg .split {
  align-items: stretch;
}

.vema-side {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0;
  margin-top: 0;
}

.vema-siegel {
  display: block;
  width: 100%;
  max-width: 440px;
  height: auto;
  margin: 0 auto;
  mix-blend-mode: multiply;
}

.vema-side .info-block {
  padding: 28px 0;
  gap: 22px;
}

.vema-side .info-block:last-child {
  padding-bottom: 8px;
}

.vema-side .info-block .icon {
  width: 56px;
  height: 56px;
}

.vema-side .info-block .icon svg {
  width: 28px;
  height: 28px;
}

.vema-side .info-block h3 {
  font-size: 1.2rem;
  margin-bottom: 6px;
}

.vema-side .info-block p {
  font-size: 1.02rem;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .vema-siegel {
    max-width: 300px;
    margin-bottom: 8px;
  }
}

/* =====================================================================
   v71 – Über uns, VEMA: Kopfzeile mit Siegel, Text in zwei Spalten, drei Punkte nebeneinander
   ===================================================================== */
.vema-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 56px;
  align-items: center;
  margin-bottom: 32px;
}

.vema-head .lead {
  margin-bottom: 0;
}

.vema-siegel {
  display: block;
  width: 300px;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 22px;
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--shadow-s);
  mix-blend-mode: normal;
}

.vema-fulltext {
  column-count: 2;
  column-gap: 56px;
  margin: 0 0 40px;
}

.vema-fulltext p {
  color: var(--color-slate);
  margin-bottom: 14px;
  orphans: 3;
  widows: 3;
}

.vema-points-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.vema-points-row .info-block {
  background: var(--color-white);
  border: none;
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-s);
  padding: 24px;
  gap: 16px;
  align-items: flex-start;
}

.vema-points-row .info-block h3 {
  font-size: 1.1rem;
  margin-bottom: 6px;
}

.vema-points-row .info-block p {
  font-size: 0.98rem;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .vema-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .vema-siegel {
    width: 260px;
  }
  .vema-fulltext {
    column-count: 1;
  }
  .vema-points-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}

/* =====================================================================
   v72 – VEMA: Überschrift über beiden Spalten, rechts Siegel + drei Boxen (1/3), links Text (2/3)
   ===================================================================== */
.vema-title {
  margin-bottom: 28px;
}

.vema-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 48px;
  align-items: stretch;
}

.vema-text .lead {
  margin-bottom: 20px;
}

.vema-fulltext {
  column-count: 1;
  column-gap: normal;
  margin: 0;
}

.vema-fulltext p {
  margin-bottom: 14px;
  orphans: 2;
  widows: 2;
}

.vema-fulltext p:last-child {
  margin-bottom: 0;
}

.vema-side {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 14px;
  margin-top: 0;
}

.vema-side .vema-siegel {
  width: 100%;
  max-width: none;
  padding: 20px;
  margin: 0;
}

.vema-side .info-block {
  flex: 1 1 auto;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: var(--color-white);
  border: none;
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-s);
}

.vema-side .info-block:last-child {
  padding-bottom: 16px;
}

.vema-side .info-block .icon {
  width: 44px;
  height: 44px;
}

.vema-side .info-block .icon svg {
  width: 22px;
  height: 22px;
}

.vema-side .info-block h3 {
  font-size: 1.02rem;
  margin-bottom: 4px;
}

.vema-side .info-block p {
  font-size: 0.92rem;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .vema-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .vema-side .vema-siegel {
    width: 260px;
  }
}

/* ---------- Zeitstrahl: beginnt mit 2016 oben, Platz oben/unten für die Ausblendung ---------- */
.timeline-track {
  padding: 56px 0;
}

.timeline-viewport {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
}

@media (max-width: 620px) {
  .timeline-viewport {
    height: 660px;
  }
  .timeline-track {
    padding: 40px 0;
  }
}

/* =====================================================================
   v73 – VEMA: Logo-Box oben bündig mit der Überschrift, größere Boxen rechts;
         Startseite: Mitglieds-Siegel statt drei Boxen; Über-uns-Überschrift ohne Einzelwort
   ===================================================================== */
.vema-grid {
  align-items: stretch;
  gap: 56px;
}

.vema-text .vema-title {
  margin-bottom: 22px;
}

.vema-side {
  gap: 18px;
}

.vema-side .vema-siegel {
  padding: 30px 28px;
  box-sizing: border-box;
  background: #fff;
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-s);
}

.vema-side .info-block {
  gap: 16px;
  padding: 22px 24px;
}

.vema-side .info-block:last-child {
  padding-bottom: 22px;
}

.vema-side .info-block .icon {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
}

.vema-side .info-block .icon svg {
  width: 24px;
  height: 24px;
}

.vema-side .info-block h3 {
  font-size: 1.1rem;
  margin-bottom: 5px;
}

.vema-side .info-block p {
  font-size: 0.97rem;
  line-height: 1.55;
}

.vema-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: var(--radius-m);
  padding: 28px;
  box-shadow: var(--shadow-s);
}

.vema-badge img {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
}

.vema-card {
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}

@media (max-width: 900px) {
  .vema-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .vema-badge {
    max-width: 320px;
    padding: 22px;
  }
  .vema-side .vema-siegel {
    width: 100%;
    max-width: 340px;
  }
}

@media (min-width: 760px) {
  .h1-wide {
    margin-left: -110px;
    margin-right: -110px;
  }
  .nowrap-lg {
    white-space: nowrap;
  }
}

@media (min-width: 901px) {
  .vema-side {
    margin-top: 10px;
  }
}

@media (max-width: 900px) {
  .vema-badge {
    margin-left: auto;
    margin-right: auto;
  }
  .vema-side .vema-siegel {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 759px) {
  .h1-wide {
    font-size: 6.6vw;
  }
}