/* ============================================================
   eviflow — shared stylesheet
   Design system derived from the "Elements" spec + final layouts
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Euclid Circular B";
  src: url("../fonts/EuclidCircularB-Regular.woff2") format("woff2"),
       url("../fonts/EuclidCircularB-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Euclid Circular B";
  src: url("../fonts/EuclidCircularB-Semibold.woff2") format("woff2"),
       url("../fonts/EuclidCircularB-Semibold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
  /* Teal scale (Grundfarbe = --teal) */
  --teal-press: #348F82;
  --teal-hover: #3EAA99;
  --teal:       #47B9A6;
  --teal-300:   #72CCBD;
  --teal-200:   #A7DDD4;
  --teal-100:   #CBEDE7;
  --teal-50:    #E4F6F3;

  /* Dark / slate scale (Grundfarbe = --ink) */
  --ink-darker: #002A33;
  --ink:        #003641;
  --slate-700:  #1A4A54;
  --slate-500:  #4D7078;
  --slate-300:  #99AEB3;
  --slate-200:  #CCD7D9;
  --slate-100:  #E6EBEC;

  /* Neutral scale */
  --sand-500:  #BEB5B2;
  --sand-400:  #CFC9C7;
  --sand-300:  #DEDAD9;
  --sand-200:  #ECE9E8;
  --beige:     #F1EFEE;   /* footer bg */
  --offwhite:  #F6F4F4;   /* cards / hero band */
  --near-white:#FAF9F9;
  --white:     #ffffff;

  --text:       #003641;
  --text-muted: #8A9699;

  --container: 1192px;
  --col: 780px;           /* centred text column on content pages */
  --gutter: clamp(20px, 5vw, 40px);
  --radius-pill: 999px;

  --shadow-card: 0 18px 40px rgba(0, 42, 51, .10);

  font-synthesis: none;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Euclid Circular B", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400;
  color: var(--text);
  background: var(--white);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-weight: 600; line-height: 1.1; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: clamp(38px, 5.2vw, 58px); }
.prose > h1 { margin-bottom: 30px; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* centred narrow text column used on content pages */
.prose { max-width: var(--col); margin-inline: auto; }
.prose > *:first-child { margin-top: 0; }

/* inline text link */
.textlink { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.textlink:hover { color: var(--teal-hover); }

/* section spacing */
.section { padding-block: clamp(56px, 8vw, 104px); }
.section--tight { padding-block: clamp(40px, 6vw, 72px); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  font-family: inherit;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  line-height: 1;
  padding: 17px 34px;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.btn--primary { background: var(--teal); color: #fff; }
.btn--primary:hover { background: var(--teal-hover); }
.btn--primary:active { background: var(--teal-press); }
.btn--outline { background: transparent; color: var(--teal); border-color: var(--teal); }
.btn--outline:hover { background: var(--teal-50); }
.btn--outline:active { background: var(--teal-100); }
.btn--lg { padding: 19px 40px; }

@media (max-width: 640px) {
  .btn { white-space: normal; line-height: 1.3; max-width: 100%; padding-inline: 24px; }
  .btn--lg { padding-inline: 26px; }
}

/* text-only underlined link (e.g. "Alle ansehen") */
.link-underline {
  display: inline-block;
  font-weight: 600;
  padding-bottom: 4px;
  border-bottom: 2px solid currentColor;
}

/* ---------- Cookie consent banner ---------- */
.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  padding: 20px var(--gutter);
  background: #fff;
  border-top: 1px solid var(--slate-100);
  box-shadow: 0 -12px 40px rgba(0, 42, 51, .12);
  transform: translateY(100%);
  transition: transform .35s ease;
}
.cookie-banner.is-visible { transform: translateY(0); }
.cookie-banner__inner {
  max-width: var(--container);
  margin-inline: auto;
  display: flex; align-items: center; gap: 28px;
  flex-wrap: wrap; justify-content: space-between;
}
.cookie-banner__text { font-size: 15px; line-height: 1.55; color: var(--ink); max-width: 70ch; margin: 0; }
.cookie-banner__actions { display: flex; gap: 12px; flex-shrink: 0; }
.cookie-banner__btn { padding: 12px 24px; font-size: 14px; }
@media (max-width: 680px) {
  .cookie-banner__inner { flex-direction: column; align-items: stretch; gap: 16px; }
  .cookie-banner__actions { justify-content: stretch; }
  .cookie-banner__btn { flex: 1; }
}

/* ---------- Header / nav ---------- */
.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 40;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 30px;
}
.site-header__logo img { height: 46px; width: auto; }
.site-header__logo .logo--light { display: none; }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.4vw, 40px);
}
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.4vw, 40px);
}
.nav__links a {
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
  white-space: nowrap;
  transition: color .15s ease;
}
.nav__links a:hover { color: var(--slate-300); }
.nav__links a.is-active { color: var(--teal); }
/* smaller register button in the top nav (tighter padding, same text size) */
.nav .btn--primary { padding: 11px 24px; }

.nav__toggle, .nav__close { display: none; background: none; border: 0; padding: 0; cursor: pointer; }
.nav__toggle img, .nav__close img { height: 34px; width: 34px; }
.nav__toggle .ham--light { display: none; }
.site-header--on-dark .nav__toggle .ham--dark { display: none; }
.site-header--on-dark .nav__toggle .ham--light { display: inline; }

/* header variant over the dark hero video */
.site-header--on-dark .site-header__logo .logo--dark { display: none; }
.site-header--on-dark .site-header__logo .logo--light { display: block; }
.site-header--on-dark .nav__links a { color: #fff; }
.site-header--on-dark .nav__links a:hover { color: var(--teal-100); }
.site-header--on-dark .nav__links a.is-active { color: var(--teal); }

/* mobile overlay menu */
.nav__panel { display: contents; }

@media (max-width: 900px) {
  .nav__toggle { display: inline-flex; }
  .nav__panel {
    display: flex;
    position: fixed;
    inset: 0;
    background: #fff;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 34px;
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: transform .32s ease, opacity .32s ease, visibility .32s;
    z-index: 60;
  }
  body.menu-open .nav__panel { transform: translateY(0); opacity: 1; visibility: visible; }
  body.menu-open { overflow: hidden; }
  .nav__close { display: inline-flex; position: absolute; top: 26px; right: var(--gutter); }
  .nav__links {
    flex-direction: column;
    gap: 30px;
  }
  .nav__links a,
  .site-header--on-dark .nav__links a { color: var(--ink); font-size: 26px; }
  .nav .btn { font-size: 15px; }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--beige);
  padding-block: clamp(56px, 7vw, 90px) 40px;
  color: var(--ink);
}
.site-footer__logo img { height: 42px; width: auto; margin-bottom: 44px; }
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 32px;
}
.site-footer__col h4 { font-size: 18px; margin-bottom: 20px; }
.site-footer__col p, .site-footer__col li { font-size: 18px; line-height: 1.55; }
.site-footer__col address { font-style: normal; }
.site-footer__col ul li { margin-bottom: 10px; }
.site-footer__col a:hover { color: var(--teal); }
.site-footer__bottom {
  margin-top: 56px;
  display: flex;
  gap: 40px;
  align-items: center;
  font-size: 16px;
  color: var(--slate-500);
  flex-wrap: wrap;
}
.site-footer__bottom a:hover { color: var(--teal); }

@media (max-width: 760px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
}
@media (max-width: 460px) {
  .site-footer__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Page title block (content pages)
   ============================================================ */
.page-head { padding-top: clamp(120px, 14vw, 180px); }
/* Where the head is the only section (AGB, Datenschutz, Impressum) nothing
   follows to provide bottom spacing, so the content would end flush against
   the footer. Pages with further sections get their spacing from those. */
#main > .page-head:last-child { padding-bottom: clamp(56px, 8vw, 104px); }
.page-head h1 {
  font-size: clamp(38px, 5.2vw, 58px);
  margin-bottom: 34px;
}
.lead {
  font-size: clamp(19px, 1.4vw, 21px);
  line-height: 1.5;
  max-width: 44ch;
}

/* generic content section heading */
.h2 { font-size: clamp(26px, 2.6vw, 32px); margin-bottom: 22px; }
.block { margin-top: clamp(48px, 6vw, 76px); }

/* ============================================================
   HERO (home)
   ============================================================ */
.hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: #fff;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* The header clip is landscape (2560x1350); on narrow/portrait screens object-fit:cover
   crops it hard. The subject (person + phone) sits on the right of the frame, so shift the
   focal point rightward on smaller screens to keep her in view instead of the empty room. */
@media (max-width: 900px) {
  .hero__media video, .hero__media img { object-position: 66% center; }
}
@media (max-width: 560px) {
  .hero__media video, .hero__media img { object-position: 72% center; }
}
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,20,25,.35) 0%, rgba(0,20,25,0) 30%, rgba(0,20,25,.15) 100%);
}
.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: clamp(56px, 8vw, 96px);
  padding-top: 160px;
}
.hero__badge {
  width: 168px; height: 168px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 17px; line-height: 1.35;
  margin-bottom: 34px;
  padding: 10px;
  text-decoration: none;
  transition: background-color .15s ease;
}
a.hero__badge:hover { background: var(--teal-hover); }
.hero h1 {
  font-size: clamp(40px, 6vw, 70px);
  line-height: 1.06;
  max-width: 15ch;
}

/* intro paragraph under hero */
.intro {
  text-align: center;
  font-weight: 600;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.45;
  max-width: 820px;
  margin-inline: auto;
}

/* ============================================================
   Media 16:9 block with play button
   ============================================================ */
.media-16x9 {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  background: var(--offwhite);
  overflow: hidden;
}
.media-16x9 img { width: 100%; height: 100%; object-fit: cover; }
.play-btn {
  position: absolute; inset: 0; margin: auto;
  width: 92px; height: 92px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 30px rgba(0,0,0,.18);
  transition: transform .18s ease;
}
.play-btn:hover { transform: scale(1.06); }
.play-btn::before {
  content: "";
  width: 0; height: 0;
  border-style: solid;
  border-width: 15px 0 15px 26px;
  border-color: transparent transparent transparent var(--teal);
  margin-left: 6px;
}

/* ============================================================
   Beratungs-Flows carousel (dark teal section, home)
   ============================================================ */
.flows-band { background: var(--ink); color: #fff; }
.flows-band__title { text-align: center; font-size: clamp(28px, 3vw, 36px); margin-bottom: 48px; }
.flow-carousel {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--teal) transparent;
}
.flow-carousel::-webkit-scrollbar { height: 6px; }
.flow-carousel::-webkit-scrollbar-thumb { background: var(--teal); border-radius: 3px; }
.flow-carousel > * { scroll-snap-align: start; flex: 0 0 82%; }
@media (min-width: 620px) { .flow-carousel > * { flex: 0 0 46%; } }
@media (min-width: 992px) { .flow-carousel > * { flex: 0 0 calc((100% - 56px) / 3 - 20px); } }
.flows-band__more { text-align: center; margin-top: 44px; }
.flows-band__more a { color: #fff; }

/* flow card */
.flow-card {
  background: var(--offwhite);
  color: var(--ink);
  padding: 44px 34px 38px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 100%;
}
.flow-card__title { font-size: 26px; line-height: 1.15; margin-bottom: 26px; min-height: 2.3em; display: flex; align-items: center; }
.flow-card__icon { width: clamp(104px, 12vw, 124px); height: clamp(104px, 12vw, 124px); margin-bottom: 30px; }
.flow-card__icon img { width: 100%; height: 100%; object-fit: contain; }
.flow-card__text { font-size: 17px; line-height: 1.5; margin-bottom: 30px; flex: 1 0 auto; }
.flow-card .btn { margin-top: auto; }
/* status label for non-available flows: looks like the Details button but outlined + non-interactive */
.flow-card__status {
  margin-top: auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; line-height: 1;
  padding: 15px 26px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--teal);
  color: var(--teal);
  background: transparent;
  white-space: nowrap;
}
/* "Weitere Flows" placeholder card */
.flow-card--more { background: transparent; border: 1px dashed var(--slate-200); }
.flow-card__icon--more { display: flex; align-items: center; justify-content: center; font-size: 72px; font-weight: 300; line-height: 1; color: var(--teal); }

/* flow grid variant (Flows page — light cards on white) */
.flow-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 900px) { .flow-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .flow-grid { grid-template-columns: 1fr; } }
/* Flows page: equal-height boxes; 5 cards flow 3 + 2 across three columns */
@media (min-width: 621px) { .flow-grid--all { grid-auto-rows: 1fr; } }

/* ============================================================
   Partner / collaboration strip
   ============================================================ */
.collab { text-align: center; }
.collab img { height: 62px; width: auto; margin: 0 auto 26px; }
.collab p { max-width: 620px; margin-inline: auto; color: var(--ink); }

/* ============================================================
   Mehrwert (value) — cards over image
   ============================================================ */
.value {
  position: relative;
  background-size: cover;
  background-position: center;
}
.value__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0); }
.value__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding-block: clamp(60px, 8vw, 120px);
}
.value-card {
  background: #fff;
  padding: 44px 46px;
  box-shadow: var(--shadow-card);
}
.value-card__kicker { font-size: 26px; font-weight: 600; margin-bottom: 2px; color: var(--ink); }
.value-card__sub { font-size: 26px; font-weight: 600; color: var(--teal); margin-bottom: 26px; }
.value-card ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 12px;
  font-size: 18px;
  line-height: 1.45;
}
.value-card ul li::before { content: "–"; position: absolute; left: 0; color: var(--ink); }
@media (max-width: 820px) {
  .value__grid { grid-template-columns: 1fr; gap: 24px; }
  .value-card { padding: 32px 28px; }
}

/* ============================================================
   Product visual block + CTA (home)
   ============================================================ */
.product-visual-wrap { position: relative; }
.product-visual {
  position: relative;
  background: var(--sand-300);
  aspect-ratio: 1400 / 620;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.product-visual img { width: 100%; height: 100%; object-fit: cover; }
.product-visual__badge { position: absolute; top: -42px; left: 7%; margin: 0; z-index: 3; }
@media (max-width: 640px) {
  .product-visual__badge { width: 130px; height: 130px; font-size: 15px; top: -30px; left: 20px; }
}
.cta-center { text-align: center; margin-top: clamp(40px, 6vw, 64px); }

/* ============================================================
   Abonnemente (pricing)
   ============================================================ */
.pricing { position: relative; }
.pricing__head {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: 24px 32px;
  text-align: center;
  margin-bottom: 56px;
}
.pricing__head h2 { font-size: clamp(28px, 3vw, 36px); }
.pricing__badge {
  flex: none;
  width: 168px; height: 168px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 14px;
  line-height: 1.28;
}
.pricing__badge strong { font-size: 26px; font-weight: 600; }
.pricing__badge span { font-size: 13px; }
.pricing__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.price-card { display: flex; flex-direction: column; text-align: center; }
.price-card__head { padding: 22px; font-size: 26px; font-weight: 600; }
.price-card--1 .price-card__head { background: var(--slate-200); color: var(--ink); }
.price-card--2 .price-card__head { background: var(--slate-500); color: #fff; }
.price-card--3 .price-card__head { background: var(--ink); color: #fff; }
.price-card__body { background: var(--offwhite); padding: 40px 30px 44px; flex: 1; display: flex; flex-direction: column; }
.price-card__num { font-size: clamp(46px, 5vw, 64px); font-weight: 600; color: var(--teal); line-height: 1; }
.price-card__unit { font-size: 18px; font-weight: 600; color: var(--teal); margin-bottom: 22px; }
.price-card__desc { font-size: 17px; line-height: 1.5; margin-bottom: 28px; flex: 1; }
.price-card__action { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-press); font-weight: 600; margin-bottom: 6px; }
.price-card__price { font-size: 30px; font-weight: 600; color: var(--ink); }
.price-card__regular { font-size: 18px; color: var(--slate-300); margin-top: 4px; }
.price-card__regular s { text-decoration: line-through; }
.pricing__note { text-align: center; max-width: 900px; margin: 44px auto 0; color: var(--slate-500); font-size: 17px; line-height: 1.5; }
.pricing__custom { text-align: center; max-width: 820px; margin: 20px auto 0; color: var(--text); font-size: 17px; line-height: 1.5; }
.pricing__custom .textlink { color: var(--teal-press); }
/* setup page: video-card bullet list + muted "coming soon" list */
.video-card__list { list-style: disc; margin: 4px 0 0; padding-left: 20px; }
.video-card__list li { font-size: 16px; line-height: 1.5; margin-bottom: 4px; }
.stack-list--muted li { color: var(--slate-500); }
@media (max-width: 860px) {
  .pricing__grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .pricing__head { gap: 20px; margin-bottom: 40px; }
}

/* ============================================================
   Accordion (FAQ / Einrichten)
   ============================================================ */
.acc-group { margin-bottom: 56px; }
.acc-group__title { color: var(--teal); font-size: 22px; font-weight: 600; margin-bottom: 14px; }
.acc {
  border-top: 1.5px solid var(--teal-300);
}
.acc__item { border-bottom: 1.5px solid var(--teal-300); }
.acc__btn {
  width: 100%;
  background: none; border: 0; cursor: pointer;
  font-family: inherit;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 4px;
  text-align: left;
  color: var(--ink);
  font-size: 19px; font-weight: 600;
}
.acc__btn .chev {
  flex: none;
  width: 22px; height: 22px;
  transition: transform .25s ease;
  background: url("../img/Right_Arrow_30x30.svg") no-repeat center / contain;
}
.acc__item.is-open .acc__btn .chev { transform: rotate(90deg); }
.acc__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height .3s ease;
}
.acc__panel-inner { padding: 0 4px 24px; font-size: 18px; line-height: 1.6; max-width: 62ch; }
.acc__panel-inner p { margin: 0 0 12px; }
.acc__panel-inner p:last-child { margin-bottom: 0; }
.acc__panel-inner ul { margin: 0 0 12px; padding-left: 22px; list-style: disc; }
.acc__panel-inner li { margin-bottom: 8px; }
.acc__panel-inner li:last-child { margin-bottom: 0; }

/* ============================================================
   Downloads list (Einrichten)
   ============================================================ */
.downloads { display: flex; flex-direction: column; gap: 14px; }
.download-row {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: var(--offwhite);
  padding: 22px 26px;
  color: var(--teal);
  font-weight: 600;
  transition: background-color .15s ease;
}
.download-row:hover { background: var(--sand-200); }
.download-row img { width: 26px; height: 26px; }

/* ============================================================
   Branded video card (Einrichten "Ablauf")
   ============================================================ */
.video-card {
  border: 1.5px solid var(--slate-200);
  padding: 40px 44px;
  position: relative;
}
.video-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.video-card__top img { height: 34px; width: auto; }
.video-card__brandline { color: var(--teal-300); font-weight: 600; text-align: right; font-size: 18px; line-height: 1.25; }
.video-card__play {
  width: 46px; height: 46px; margin: 40px auto;
  display: block;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.video-card__play::before {
  content: ""; display: block; margin: 0 auto;
  width: 0; height: 0; border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent var(--teal);
}
.video-card__kicker { color: var(--teal); font-weight: 600; margin-bottom: 6px; }
.video-card__title { font-size: 30px; font-weight: 600; color: var(--ink); line-height: 1.15; }
.video-card + .video-card { margin-top: 26px; }
/* video card with a real designed thumbnail (logo/brandline/title baked into the image) */
.video-card__cover { position: relative; border-radius: 10px; overflow: hidden; line-height: 0; }
.video-card__cover img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.video-card__cover .video-card__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0;
  width: 66px; height: 66px; border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 18px rgba(0, 54, 65, .22);
}
.video-card__cover .video-card__play::before { margin: 0; border-width: 11px 0 11px 18px; }
.video-card__cover + .video-card__list { margin-top: 22px; }

/* ============================================================
   Team grid (Über uns)
   ============================================================ */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px 30px;
}
.team-card__photo { aspect-ratio: 3 / 4; background: var(--sand-300); overflow: hidden; margin-bottom: 20px; }
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card__name { font-size: 24px; font-weight: 600; color: var(--ink); }
.team-card__role { font-size: 18px; font-weight: 600; color: var(--teal); }
.team-grid .team-card--center { grid-column: 2; }
@media (max-width: 820px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid .team-card--center { grid-column: auto; }
}
@media (max-width: 520px) { .team-grid { grid-template-columns: 1fr; max-width: 340px; margin-inline: auto; } }

/* icon hero band (flow detail) */
.icon-band {
  background: var(--offwhite);
  display: flex; align-items: center; justify-content: center;
  padding-block: clamp(70px, 10vw, 130px);
}
.icon-band img { width: clamp(120px, 16vw, 190px); height: auto; }
/* Eckdaten (key facts) box — full-width block within the flow content */
.facts-box {
  background: var(--offwhite);
  border-radius: 14px;
  padding: clamp(24px, 3vw, 32px);
  margin: 8px 0 40px;
}
.facts-box__title { font-size: 20px; font-weight: 600; color: var(--ink); margin: 0 0 18px; }
.facts-box__dl { font-size: 16px; gap: 12px 32px; }
.facts-box__dl dt { font-weight: 600; }
@media (max-width: 520px) {
  .facts-box__dl { grid-template-columns: 1fr; gap: 2px 0; }
  .facts-box__dl dd { margin-bottom: 12px; }
  .facts-box__dl dd:last-child { margin-bottom: 0; }
}

/* legal pages (Datenschutz / Impressum) */
.legal { max-width: 820px; }
.legal__version { color: var(--slate-500); font-size: 15px; margin: 0 0 8px; }
.legal h2.h2 { margin-top: 44px; font-size: clamp(21px, 2.2vw, 26px); }
.legal h3.h3 { font-size: 19px; font-weight: 600; color: var(--ink); margin: 26px 0 8px; }
.legal p { font-size: 16px; line-height: 1.65; margin: 12px 0; }
.legal ul { margin: 12px 0; padding-left: 22px; list-style: disc; }
.legal li { font-size: 16px; line-height: 1.6; margin-bottom: 8px; }
.legal address { font-style: normal; line-height: 1.6; margin: 12px 0; font-size: 16px; }

/* definition list (Rechtliches / Flow-Details) */
.dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 28px; font-size: 18px; }
.dl dt { color: var(--ink); }
.dl dd { margin: 0; color: var(--ink); }
.stack-list li { margin-bottom: 6px; font-size: 18px; }

/* utilities */
.center { text-align: center; }
.mt-lg { margin-top: clamp(40px, 6vw, 64px); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   Language switch (dropdown)
   ============================================================ */
.lang-switch { position: relative; }
.lang-switch__btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; cursor: pointer; font-family: inherit;
  font-weight: 500; font-size: 15px; letter-spacing: .04em; color: var(--ink);
  padding: 6px 2px;
}
.lang-switch__chev {
  width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); margin-top: -3px;
  transition: transform .22s ease;
}
.lang-switch.is-open .lang-switch__chev { transform: rotate(-135deg); margin-top: 2px; }
.lang-switch__menu {
  position: absolute; top: calc(100% + 10px); left: 0; right: auto;
  background: #fff; border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0, 42, 51, .16);
  padding: 6px; min-width: 92px; margin: 0; list-style: none;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 70;
}
.lang-switch.is-open .lang-switch__menu { opacity: 1; visibility: visible; transform: none; }
.lang-switch__menu a {
  display: block; padding: 9px 14px; border-radius: 8px;
  font-weight: 600; font-size: 15px; color: var(--ink); cursor: pointer;
}
.lang-switch__menu a:hover { background: var(--offwhite); }
.lang-switch__menu a.is-active { color: var(--teal); }
.site-header--on-dark .lang-switch__btn { color: #fff; }

@media (max-width: 900px) {
  .lang-switch { margin-top: 6px; }
  .lang-switch__btn, .site-header--on-dark .lang-switch__btn { color: var(--ink); font-size: 20px; }
  .lang-switch__menu { left: 50%; right: auto; transform: translate(-50%, -6px); }
  .lang-switch.is-open .lang-switch__menu { transform: translate(-50%, 0); }
  .lang-switch__menu a { font-size: 18px; }
}

/* ============================================================
   "So funktioniert's" steps
   ============================================================ */
.steps-section { background: var(--offwhite); }
.steps-head { text-align: center; }
.steps-head .kicker { color: var(--teal); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: 14px; margin-bottom: 12px; }
.steps-head h2 { font-size: clamp(26px, 3vw, 34px); }
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px;
  margin-top: 56px;
}
.step { text-align: center; }
.step__num {
  width: 66px; height: 66px; border-radius: 50%;
  background: var(--teal); color: #fff;
  font-size: 28px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 24px;
}
.step__title { font-size: 22px; margin-bottom: 12px; color: var(--ink); }
.step p { font-size: 17px; line-height: 1.55; max-width: 34ch; margin-inline: auto; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; gap: 40px; } }

/* scroll reveal */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.steps .step.reveal:nth-child(2) { transition-delay: .12s; }
.steps .step.reveal:nth-child(3) { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Spin-off logo (asset has transparent top/bottom margins -> crop) ---------- */
.collab img.collab__spinoff { width: 230px; height: 121px; object-fit: cover; object-position: center; margin: 0 auto 22px; }
.spinoff-logo { margin: 40px 0 30px; }
.spinoff-logo img { width: 250px; height: 132px; object-fit: cover; object-position: center; }

/* pricing "up to" qualifier above the number */
.price-card__upto { font-size: 15px; font-weight: 600; color: var(--slate-300); letter-spacing: .02em; margin-bottom: 2px; }

/* pricing tier descriptor (replaces exact consultation count) */
.price-card__tier { font-size: clamp(30px, 3.4vw, 40px); font-weight: 600; color: var(--teal); line-height: 1.05; }
.price-card .price-card__unit { color: var(--slate-300); }

/* pricing: price is the hero, consultation count sits at the bottom */
.price-card__price { font-size: clamp(34px, 3.8vw, 46px); line-height: 1; }
.price-card__regular { margin-bottom: 26px; }
.price-card__count { font-size: 17px; font-weight: 600; color: var(--teal); margin-top: auto; }

/* footer secondary heading (e.g. Login under Kontakt) */
.site-footer__subhead { margin-top: 30px; }

/* click-to-load video (poster facade) */
.video-player { background: var(--offwhite); }
.video-player__poster { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-player__el { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.video-player.is-playing .video-player__poster,
.video-player.is-playing .play-btn { display: none; }

/* video tutorial cards: framed 16:9 thumbnail (click-to-play) */
.video-card__media { border-radius: 10px; margin-bottom: 22px; }