/* ==========================================================================
   Plapperegg 2026 — modern marketing site styles
   Builds on top of colors_and_type.css
   ========================================================================== */

/* ----- Type pairing (Bricolage Grotesque + Plus Jakarta Sans) ----- */
/* Fonts are loaded by colors_and_type.css via @import.
   We still expose alternate pairings as body classes below. */
:root {
  --ff-bricolage:  'Bricolage Grotesque', system-ui, sans-serif;
  --ff-jakarta:    'Plus Jakarta Sans', system-ui, sans-serif;
  --ff-nunito:     'Nunito', system-ui, sans-serif;
  --ff-sourcesans: 'Source Sans 3', system-ui, sans-serif;

  --ff-display-active: var(--ff-nunito);
  --ff-body-active:    var(--ff-sourcesans);

  --nav-h: 88px;
  --section-pad: clamp(64px, 9vw, 120px);
}

body {
  font-family: var(--ff-body-active);
  background: var(--c-paper);
  color: var(--c-ink);
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--ff-display-active);
  letter-spacing: -0.008em;
  font-weight: 600;
}

.plpg-pill {
  font-family: var(--ff-display-active);
  font-weight: 500;
  letter-spacing: 0;
}

/* ===== HEADER — centered logo nav ===== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(16px, 4vw, 48px);
  transition: background 280ms var(--ease-out), backdrop-filter 280ms var(--ease-out), height 280ms var(--ease-out), box-shadow 280ms var(--ease-out);
}
.nav::before {
  content: '';
  position: absolute; inset: 0;
  background: color-mix(in oklab, var(--c-paper) 80%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  opacity: 0;
  transition: opacity 320ms var(--ease-out);
  pointer-events: none;
}
.nav.is-scrolled {
  height: 72px;
  box-shadow: 0 1px 0 color-mix(in oklab, var(--c-ink) 6%, transparent);
}
.nav.is-scrolled::before { opacity: 1; }

.nav__inner {
  width: 100%;
  max-width: 1320px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
  position: relative;
  z-index: 1;
}

.nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
}
.nav__list--left  { justify-content: flex-end; }
.nav__list--right { justify-content: flex-start; }

.nav__link {
  white-space: nowrap;
  font-family: var(--ff-body-active);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.005em;
  color: var(--c-ink);
  text-decoration: none;
  padding: 8px 4px;
  position: relative;
  transition: color 200ms var(--ease-out);
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 4px; right: 4px;
  bottom: 2px;
  height: 1.5px;
  background: var(--c-lavender);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 280ms var(--ease-out);
}
.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--c-lavender-hover); }
.nav__caret { margin-left: 4px; opacity: 0.6; transition: transform 200ms; }
.nav__has-sub:hover .nav__caret { transform: rotate(180deg); }

.nav__has-sub { position: relative; }

.nav__sub {
  position: absolute;
  top: 100%;
  min-width: 320px;
  padding-top: 12px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.nav__sub--left { left: 0; }
.nav__sub--right { right: 0; }
.nav__sub.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.nav__sub-inner {
  background: var(--c-paper);
  border: 1px solid color-mix(in oklab, var(--c-ink) 8%, transparent);
  border-radius: 20px;
  padding: 12px;
  box-shadow: 0 12px 40px rgba(43,43,51,.10);
  display: flex; flex-direction: column; gap: 2px;
}
.nav__sub-item {
  display: flex; flex-direction: column;
  padding: 12px 14px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--c-ink);
  transition: background 180ms;
}
.nav__sub-item:hover { background: var(--c-peach-soft); }
.nav__sub-title { font-family: var(--ff-display-active); font-weight: 500; font-size: 16px; letter-spacing: -0.01em; }
.nav__sub-desc { font-size: 12.5px; color: color-mix(in oklab, var(--c-ink) 60%, transparent); margin-top: 2px; }

.mobile-sheet__sublist { list-style: none; padding: 0 0 0 16px; margin: 4px 0 12px; display: flex; flex-direction: column; gap: 2px; }
.mobile-sheet__sublink { display: block; padding: 10px 0; font-size: 16px; color: color-mix(in oklab, var(--c-ink) 75%, transparent); text-decoration: none; }

.footer__socials { display: flex; gap: 12px; margin-top: 16px; }
.footer__socials a {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-peach-soft);
  color: var(--c-ink);
  text-decoration: none;
  transition: background 180ms;
}
.footer__socials a:hover { background: var(--c-lavender-soft); }

/* ===== PAGE HERO (sub-pages) ===== */
.pagehero {
  padding: calc(var(--nav-h) + 64px) clamp(20px, 4vw, 48px) clamp(56px, 7vw, 96px);
  position: relative;
  overflow: hidden;
}
.pagehero--peach    { background: var(--c-peach-soft); }
.pagehero--lavender { background: var(--c-lavender-soft); }
.pagehero--green    { background: var(--c-green-soft); }
.pagehero--teal     { background: var(--c-teal-soft); }
.pagehero--yellow   { background: var(--c-yellow-soft); }
.pagehero--coral    { background: var(--c-coral-soft); }

.pagehero__inner {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 880px) {
  .pagehero__inner { grid-template-columns: 1fr; gap: 32px; }
  .pagehero__mascot { order: -1; max-width: 200px; }
}
.pagehero__title {
  font-family: var(--ff-display-active);
  font-size: clamp(40px, 6vw, 88px);
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 400;
  margin: 16px 0 24px;
  color: var(--c-ink);
}
.pagehero__title em { font-style: italic; font-weight: 300; color: var(--c-lavender); animation: wort-auf 1.4s .5s both cubic-bezier(.16,.84,.24,1); }
@media (prefers-reduced-motion: reduce) { .pagehero__title em { animation: none; } }
.pagehero__lede {
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.55;
  color: color-mix(in oklab, var(--c-ink) 80%, transparent);
  max-width: 56ch;
  margin: 0 0 24px;
}
.pagehero__mascot { display: flex; justify-content: flex-end; }
.pagehero__mascot img { width: 100%; max-width: 360px; height: auto; filter: drop-shadow(0 18px 32px rgba(40,30,60,.14)); }

/* Hero-Layouts — je Seitentyp ein anderer Einstieg, gleiches System */
.pagehero--center .pagehero__inner,
.pagehero--bar .pagehero__inner { grid-template-columns: 1fr; }
.pagehero--center .pagehero__copy { max-width: 46ch; margin-inline: auto; text-align: center; }
.pagehero--center .pagehero__lede { margin-inline: auto; }
.pagehero--center .crumbs { justify-content: center; }

.pagehero--bar { padding-top: calc(var(--nav-h) + 40px); padding-bottom: 40px; }
.pagehero--bar .pagehero__title { font-size: clamp(32px, 3.6vw, 52px); margin: 12px 0 16px; }
.pagehero--bar .pagehero__lede { font-size: 17px; max-width: 62ch; margin-bottom: 16px; }

.pagehero--quiet { position: relative; overflow: hidden; }
.pagehero--quiet .pagehero__inner { grid-template-columns: 1fr; }
.pagehero--quiet .pagehero__copy { max-width: 40ch; position: relative; z-index: 1; }
.pagehero__bleed { position: absolute; right: -4%; bottom: -16%; width: min(46vw, 620px); opacity: .5; pointer-events: none; }
.pagehero__bleed img { width: 100%; height: auto; display: block; }
@media (max-width: 880px) { .pagehero__bleed { right: -18%; bottom: -10%; width: 74vw; opacity: .34; } }

.pagehero--wide .pagehero__inner { grid-template-columns: 1fr; gap: 24px; }
.pagehero--wide .pagehero__title { font-size: clamp(44px, 7vw, 104px); }
.pagehero__cols { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: end; }
.pagehero--wide .pagehero__cols:not(:has(.pagehero__side)) { grid-template-columns: minmax(0, 62ch); }
@media (max-width: 880px) { .pagehero__cols { grid-template-columns: 1fr; gap: 20px; } }
.pagehero__side { display: flex; flex-direction: column; gap: 12px; }

.pagehero__aside { display: grid; gap: 12px; }
.herofact { background: var(--c-paper-2); border-radius: var(--r-lg); padding: 20px 24px; box-shadow: var(--sh-1); display: grid; gap: 4px; }
.herofact strong { font-family: var(--ff-display-active); font-size: 20px; font-weight: 600; color: var(--c-ink); }
.herofact span { font-size: 14.5px; color: color-mix(in oklab, var(--c-ink) 65%, transparent); }

/* ===== ANFRAGEFORMULAR ===== */
.af { background: var(--c-paper-2); padding: clamp(56px, 7vw, 96px) clamp(20px, 4vw, 48px); }
.af__inner { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 64px; align-items: start; }
@media (max-width: 900px) { .af__inner { grid-template-columns: 1fr; gap: 32px; } }
.af__intro { position: sticky; top: calc(var(--nav-h) + 32px); }
@media (max-width: 900px) { .af__intro { position: static; } }
.af__intro h2 { margin: 16px 0 12px; font-size: clamp(28px, 3vw, 40px); }
.af__intro p { color: color-mix(in oklab, var(--c-ink) 72%, transparent); }
.af__alt { font-size: 15px; }
.af__form { display: grid; gap: 28px; }
.af__block { border: none; border-top: 1px solid var(--c-line); margin: 0; padding: 24px 0 0; display: grid; gap: 16px; }
.af__block:first-child { border-top: none; padding-top: 0; }
.af__block legend { font-family: var(--ff-display-active); font-weight: 600; font-size: 18px; color: var(--c-ink); padding: 0 0 4px; }
.af__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .af__grid { grid-template-columns: 1fr; } }
.af__feld { display: grid; gap: 6px; }
.af__feld--wide { grid-column: 1 / -1; }
.af__label { font-size: 13.5px; font-weight: 600; color: color-mix(in oklab, var(--c-ink) 72%, transparent); }
.af__hint { font-size: 14px; color: color-mix(in oklab, var(--c-ink) 70%, transparent); }
.af input, .af select, .af textarea { font-family: var(--ff-body-active); font-size: 16px; color: var(--c-ink); background: var(--c-paper); border: 1px solid color-mix(in oklab, var(--c-ink) 16%, transparent); border-radius: var(--r-md); padding: 12px 14px; width: 100%; min-height: 48px; }
.af textarea { resize: vertical; line-height: 1.5; }
.af input:focus, .af select:focus, .af textarea:focus { outline: none; border-color: var(--c-lavender); box-shadow: 0 0 0 3px var(--c-focus-ring); }
.af__radios { display: flex; flex-wrap: wrap; gap: 8px; }
.af__chip { font-family: var(--ff-body-active); font-size: 14px; font-weight: 600; min-height: 44px; padding: 8px 18px; border-radius: var(--r-pill); border: 1px solid color-mix(in oklab, var(--c-ink) 16%, transparent); background: var(--c-paper); color: var(--c-ink); cursor: pointer; transition: background 180ms, border-color 180ms, color 180ms; }
.af__chip:hover { border-color: var(--c-lavender); }
.af__chip.is-on { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-paper); }
.af__notice { background: var(--c-yellow-soft); border-radius: var(--r-lg); padding: 18px 22px; }
.af__notice strong { display: block; font-family: var(--ff-display-active); font-size: 16px; margin-bottom: 4px; }
.af__notice p { margin: 0; font-size: 15px; line-height: 1.55; }
.af__notice--tip { background: color-mix(in oklab, var(--c-teal) 14%, var(--c-paper)); margin-top: 18px; }
.af__foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.af__fortschritt { flex: 1 1 220px; display: grid; gap: 6px; min-width: 200px; }
.af__balken { height: 8px; border-radius: var(--r-pill); background: color-mix(in oklab, var(--c-ink) 10%, transparent); overflow: hidden; }
.af__balken i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--c-teal); transition: width 300ms var(--ease-out); }
.af__fortschritt small { font-size: 13px; color: color-mix(in oklab, var(--c-ink) 58%, transparent); }
.af__foot small { color: color-mix(in oklab, var(--c-ink) 55%, transparent); max-width: 34ch; }

/* ===== PROSE (long-form content) ===== */
.prose-section {
  padding: clamp(56px, 7vw, 96px) clamp(20px, 4vw, 48px);
}
.prose {
  max-width: 680px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.65;
  color: color-mix(in oklab, var(--c-ink) 88%, transparent);
}
.prose h2 {
  font-size: clamp(24px, 2.2vw, 30px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 56px 0 16px;
  font-weight: 400;
}
.prose h2:first-child { margin-top: 0; }
.prose h2 { padding-top: 28px; border-top: 1px solid color-mix(in oklab, var(--c-ink) 10%, transparent); }
.prose h2:first-child { padding-top: 0; border-top: none; }
.prose h3 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 32px 0 8px;
}
.prose p { margin: 0 0 18px; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 24px; display: grid; gap: 10px; }
.prose li { margin-bottom: 0; }
.prose strong { font-weight: 600; color: var(--c-ink); }
.prose a { color: var(--c-link); }

.callout {
  background: var(--c-yellow-soft);
  border-radius: 20px;
  padding: 24px 28px;
  margin: 32px 0;
  display: flex; gap: 16px;
  align-items: flex-start;
}
.callout__icon {
  width: 32px; height: 32px;
  flex-shrink: 0;
  background: var(--c-yellow);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-ink);
  font-weight: 600;
  font-family: var(--ff-display-active);
}
.callout p { margin: 0; font-size: 16px; }
.callout__titel { display: block; margin-bottom: 4px; font-family: var(--ff-display-active); font-size: 17px; }

/* breadcrumb */
.crumbs {
  font-size: 13px;
  color: color-mix(in oklab, var(--c-ink) 60%, transparent);
  display: flex; gap: 8px; align-items: center;
  margin-bottom: 8px;
}
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--c-ink); }
.crumbs span { opacity: 0.5; }

/* next-up card at bottom of subpages */
.nextup {
  background: var(--c-ink);
  color: var(--c-paper);
  border-radius: 28px;
  padding: 48px;
  margin: 0 auto;
  max-width: 1120px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
}
@media (max-width: 760px) { .nextup { grid-template-columns: 1fr; padding: 32px; } }
.nextup > div { min-width: 0; }
@media (max-width: 600px) { .nextup { padding: 28px 22px; border-radius: 22px; } }
.nextup h3 { font-family: var(--ff-display-active); font-size: clamp(28px, 3vw, 40px); font-weight: 400; letter-spacing: -0.02em; margin: 0 0 8px; color: var(--c-paper); text-wrap: pretty; overflow-wrap: break-word; }
.nextup p { color: color-mix(in oklab, var(--c-paper) 75%, transparent); margin: 0; }
/* Coral-CTA leicht aufgehellt: dunkle Ink-Schrift auf Coral erreicht sonst nur
   4,29:1. Aufgehellt liegt der Text-Kontrast im Ruhe- UND Hover-Zustand ≥4,5:1;
   Coral-Charakter bleibt. */
.nextup .btn--primary { background: color-mix(in oklab, var(--c-coral) 86%, white); color: var(--c-ink); }
.nextup .btn--primary:hover, .nextup .btn--primary:focus-visible { background: color-mix(in oklab, var(--c-coral) 74%, white); color: var(--c-ink); }

/* feature row used on Über uns and What-is pages */
.featuregrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 48px 0;
}
@media (max-width: 760px) { .featuregrid { grid-template-columns: 1fr; } }
.feature {
  background: var(--c-paper);
  border: 1px solid color-mix(in oklab, var(--c-ink) 8%, transparent);
  border-radius: 22px;
  padding: 24px;
}
.feature__mascot { width: 64px; height: 64px; margin-bottom: 12px; }
.feature h3 { font-family: var(--ff-display-active); font-size: 20px; font-weight: 500; letter-spacing: -0.01em; margin: 0 0 6px; }
.feature p { margin: 0; font-size: 16px; line-height: 1.5; color: color-mix(in oklab, var(--c-ink) 75%, transparent); }

/* cost table */
.costtable {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--c-ink) 10%, transparent);
  margin: 24px 0 32px;
}
.costtable__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid color-mix(in oklab, var(--c-ink) 8%, transparent);
  background: var(--c-paper);
}
.costtable__row:last-child { border-bottom: none; }
.costtable__row--head { background: var(--c-peach-soft); color: color-mix(in oklab, var(--c-ink) 70%, transparent); font-family: var(--ff-body-active); font-weight: 600; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
.costtable__label { font-weight: 600; }
.costtable__sub { font-size: 13px; color: color-mix(in oklab, var(--c-ink) 60%, transparent); margin-top: 2px; }
.costtable__value { font-family: var(--ff-display-active); font-weight: 500; }

.nav__logo {
  display: block;
  position: relative;
  height: 56px;
  transition: height 280ms var(--ease-out);
}
.nav.is-scrolled .nav__logo { height: 44px; }
.nav__logo img {
  height: 100%;
  width: auto;
  display: block;
}
/* Der Bogen unter den «gg» wird aus dem Basisbild herausgeschnitten und von der zweiten
   Ebene getragen — sonst läge beim Animieren eine verschobene Kopie über dem Original.
   Ab 76,5 % Höhe enthält die Datei ausschliesslich diesen Bogen. */
.nav__logo img:not(.logo__mund) { clip-path: inset(0 0 23.5% 0); }
/* Lächeln: Kopie des Logos, beschnitten auf den Bogen. Ruhezustand ist exakt deckungsgleich
   mit dem Original, deshalb ist im Normalfall nichts zu sehen. */
.logo__mund {
  position: absolute; left: 0; top: 0;
  clip-path: inset(76.5% -3% -8% 78%);
  transform-origin: 88% 76.5%;
  will-change: transform;
  pointer-events: none;
}
.logo__gruebchen {
  position: absolute; width: 2.4%; padding-top: 2.4%; height: 0;
  border-radius: 50%; background: rgb(160,156,205);
  opacity: 0; pointer-events: none;
}
/* knapp neben den beiden Enden des Bogens, nicht darauf */
.logo__gruebchen--l { left: 74.2%; top: 74%; }
.logo__gruebchen--r { left: 99.2%; top: 66%; }
.nav__logo.is-laechelt .logo__mund { animation: logo-mund 980ms cubic-bezier(.4,0,.3,1) both; }
.nav__logo.is-laechelt .logo__gruebchen { animation: logo-gruebchen 980ms cubic-bezier(.4,0,.3,1) both; }
@keyframes logo-mund {
  0% { transform: none; }
  46% { transform: scaleY(1.15) scaleX(1.02); }
  100% { transform: none; }
}
@keyframes logo-gruebchen {
  0%, 12% { opacity: 0; transform: scale(.6); }
  46% { opacity: .34; transform: scale(1); }
  84%, 100% { opacity: 0; transform: scale(.85); }
}
@media (prefers-reduced-motion: reduce) {
  .nav__logo.is-laechelt .logo__mund, .nav__logo.is-laechelt .logo__gruebchen { animation: none; }
}

.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--c-ink);
  color: var(--c-paper);
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--ff-body-active);
  font-weight: 500;
  font-size: 14px;
  transition: background 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.nav__cta:hover { background: var(--c-lavender-hover); color: var(--c-paper); }
.nav__cta:active { transform: scale(0.97); }

.nav__burger { display: none; }

@media (max-width: 1080px) {
  .nav__list { display: none; }
  .nav__inner { grid-template-columns: auto 1fr auto; }
  .nav__burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border: none;
    background: transparent;
    color: var(--c-ink);
    cursor: pointer;
    border-radius: 12px;
  }
  .nav__burger:hover { background: color-mix(in oklab, var(--c-ink) 6%, transparent); }
  .nav__cta-wrap { justify-self: end; }
}

/* mobile sheet */
.mobile-sheet {
  position: fixed; inset: 0;
  background: var(--c-paper);
  z-index: 200;
  display: flex;
  flex-direction: column;
  padding: 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-100%);
  transition: transform 320ms var(--ease-out), visibility 320ms step-end;
}
.mobile-sheet.is-open { transform: translateY(0); visibility: visible; pointer-events: auto; transition: transform 320ms var(--ease-out), visibility 0s; }
.mobile-sheet__top {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 48px;
}
.mobile-sheet__close {
  width: 44px; height: 44px;
  border: none; background: transparent; cursor: pointer;
  border-radius: 12px; color: var(--c-ink);
}
.mobile-sheet__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.mobile-sheet__link {
  display: block;
  padding: 16px 0;
  font-family: var(--ff-display-active);
  font-size: 32px;
  font-weight: 500;
  color: var(--c-ink);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--c-ink) 8%, transparent);
}

/* ===== HERO ===== */
.hero {
  min-height: 100vh;
  padding: calc(var(--nav-h) + 40px) clamp(20px, 4vw, 48px) 80px;
  position: relative;
  overflow: hidden;
  background: var(--c-peach-soft);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
}

.hero__blob {
  position: absolute;
  pointer-events: none;
  filter: blur(60px);
  opacity: 0.55;
  border-radius: 50%;
  will-change: transform;
}
.hero__blob--1 { background: var(--c-lavender); width: 520px; height: 520px; top: -120px; right: -120px; animation: drift-1 22s ease-in-out infinite; }
.hero__blob--2 { background: var(--c-coral);    width: 380px; height: 380px; bottom: -80px; left: -100px; opacity: 0.35; animation: drift-2 28s ease-in-out infinite; }
.hero__blob--3 { background: var(--c-teal);     width: 280px; height: 280px; top: 40%; left: 38%; opacity: 0.25; animation: drift-3 34s ease-in-out infinite; }

@keyframes drift-1 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-40px, 30px, 0) scale(1.08); }
}
@keyframes drift-2 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(60px, -40px, 0) scale(1.12); }
}
@keyframes drift-3 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(-50px, -30px, 0) scale(0.92); }
  66%      { transform: translate3d(40px, 50px, 0) scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__blob { animation: none !important; }
}

.hero__inner {
  max-width: 1320px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  position: relative;
  z-index: 1;
}
@media (max-width: 880px) {
  .hero__inner { grid-template-columns: 1fr; gap: 40px; }
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  background: color-mix(in oklab, var(--c-paper) 80%, transparent);
  border: 1px solid color-mix(in oklab, var(--c-ink) 8%, transparent);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-ink);
  margin-bottom: 32px;
  backdrop-filter: blur(8px);
}
.hero__eyebrow-dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--c-green);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px;
  color: var(--c-ink);
}

.hero__title {
  font-family: var(--ff-display-active);
  font-size: clamp(34px, 5vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 400;
  margin: 0 0 28px;
  color: var(--c-ink);
}
.hero__title em {
  font-style: italic;
  font-weight: 300;
  color: var(--c-coral);
}
.hero__rotator {
  display: inline-block;
  position: relative;
  height: 1em;
  vertical-align: baseline;
  overflow: hidden;
  min-width: 5ch;
}
.hero__rotator span {
  display: block;
  font-style: italic;
  font-weight: 300;
  color: var(--c-lavender);
}
.hero__rotator span.is-out { transform: translateY(-100%); opacity: 0; transition: transform 460ms var(--ease-out), opacity 280ms; }
.hero__rotator span.is-in  { transform: translateY(0);     opacity: 1; transition: transform 460ms var(--ease-out), opacity 280ms; }
.hero__rotator span.is-pre { transform: translateY(100%); opacity: 0; }

/* Headline in fünf Sprachen — gestapelt, weiches Wechseln */
.hero__title { position: relative; }
.hero__phrase { display: block; opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease-out), transform .6s var(--ease-out); }
.hero__phrase:not(:first-child) { position: absolute; inset: 0; }
.hero__phrase.is-in { opacity: 1; transform: none; }
.hero__phrase em { font-style: normal; color: var(--c-lavender); }
.hero__l1 { white-space: nowrap; }
/* das Marken-Wort kommt ein Stück später, wie ein zögerndes erstes Wort */
.hero__phrase.is-in em { animation: wort-auf 1.4s .5s both cubic-bezier(.16,.84,.24,1); }
@keyframes wort-auf { from { opacity: 0; transform: translateY(.14em); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@media (prefers-reduced-motion: reduce) { .hero__phrase.is-in em { animation: none; } }
.hero__langs { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 24px; }
.hero__lang { font-family: var(--ff-body-active); font-size: 13px; font-weight: 600; padding: 6px 14px; min-height: 44px; border: 1px solid color-mix(in oklab, var(--c-ink) 14%, transparent); background: transparent; color: color-mix(in oklab, var(--c-ink) 62%, transparent); border-radius: var(--r-pill); cursor: pointer; transition: background 200ms, color 200ms, border-color 200ms; }
.hero__lang:hover { border-color: var(--c-lavender); color: var(--c-ink); }
.hero__lang.is-on { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-paper); }

.hero__lede {
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.5;
  color: color-mix(in oklab, var(--c-ink) 78%, transparent);
  max-width: 52ch;
  margin: 0 0 40px;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 999px;
  font-family: var(--ff-body-active);
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 200ms var(--ease-out), transform 200ms var(--ease-out), color 200ms var(--ease-out);
}
.btn--primary { background: var(--c-ink); color: var(--c-paper); }
.btn--primary:hover, .btn--primary:focus-visible { background: var(--c-lavender-hover); color: var(--c-ink); transform: translateY(-1px); }
.btn--primary:active { background: var(--c-lavender-hover); color: var(--c-ink); }
.btn--ghost { background: transparent; color: var(--c-ink); border: 1.5px solid color-mix(in oklab, var(--c-ink) 18%, transparent); }
.btn--ghost:hover { background: var(--c-paper-2); border-color: var(--c-ink); }
.btn__arrow {
  display: inline-flex;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--c-coral);
  align-items: center; justify-content: center;
  color: var(--c-ink);
}

/* hero visual — collage */
.hero__visual {
  position: relative;
  transform: translateX(-18%);
  aspect-ratio: 1 / 1;
  width: 100%;
  justify-self: end;
  max-width: 420px;
  margin-left: auto;
}
.hero__card {
  position: absolute;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--sh-2);
}
.hero__card--main {
  inset: 0;
  justify-content: flex-start;
  background: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  display: flex; align-items: flex-end; justify-content: center;
}
.hero__ele { position: relative; width: 88%; max-height: 88%; transform-origin: 50% 100%; animation: ele-an 1.2s cubic-bezier(.2,.7,.2,1) both, ele-atem 11s 1.4s ease-in-out infinite; }
.hero__ele img { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 32px rgba(40,30,60,.16)); }
.hero__ohr { position: absolute; inset: 0; filter: none !important; transform-origin: 28.6% 27.2%; }
.hero__ruessel { position: absolute; inset: 0; filter: none !important; transform-origin: 82% 62%; }
.hero__face { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero__eye { transform-box: fill-box; transform-origin: 50% 92%; transition: transform .14s cubic-bezier(.4,0,.6,1); }
.hero__cheek { transform-box: fill-box; transform-origin: 50% 50%; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.hero__face.is-blink .hero__eye { transform: scaleY(.14); }
.hero__face.is-blink .hero__cheek { transform: scale(1.09); }
@keyframes ele-an { from { opacity: 0; transform: scale(.98) translateY(10px); } to { opacity: 1; transform: none; } }
/* Atmen: wenige Pixel, sehr langsam, fast unmerklich */
@keyframes ele-atem { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(.35deg); } }
/* ab hier übernimmt motion.js: Atmen, Maus-Trägheit und Klick-Impuls in einem transform */
.hero__card--main.is-live .hero__ele { animation: none; }
@media (prefers-reduced-motion: reduce) { .hero__ele { animation: none; transform: none; } .hero__eye, .hero__cheek { transition: none; } }
.hero__card--badge {
  position: absolute;
  bottom: -20px; left: -20px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: var(--c-paper);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 20px;
  box-shadow: var(--sh-2);
  font-family: var(--ff-display-active);
}
.hero__card--badge strong {
  font-size: 38px;
  font-weight: 500;
  color: var(--c-coral);
  line-height: 1;
  display: block;
}
.hero__card--badge span {
  font-size: 13px;
  font-weight: 400;
  color: var(--c-ink);
  margin-top: 6px;
  font-family: var(--ff-body-active);
}
.hero__card--small {
  position: absolute;
  top: -16px; right: -16px;
  width: 140px;
  background: var(--c-yellow-soft);
  padding: 16px;
  border-radius: 22px;
  box-shadow: var(--sh-2);
  font-size: 13px;
  color: var(--c-ink);
  line-height: 1.4;
}
.hero__card--small em {
  font-style: italic;
  display: block;
  margin-top: 6px;
  color: color-mix(in oklab, var(--c-ink) 70%, transparent);
}

/* spinning sticker */
.sticker {
  position: absolute;
  top: 50%; right: -32px;
  width: 130px; height: 130px;
  border-radius: 50%;
  background: var(--c-coral);
  color: var(--c-paper);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-display-active);
  font-size: 14px;
  text-align: center;
  animation: spin 22s linear infinite;
}
.sticker svg { width: 100%; height: 100%; position: absolute; inset: 0; }
.sticker__center {
  position: absolute;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--c-paper);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  color: var(--c-coral);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* hero stats row */
.hero__stats {
  position: relative;
  margin: 172px auto 0;
  width: max-content; max-width: 100%;
  display: flex; flex-wrap: wrap; gap: 20px 40px; justify-content: center;
  z-index: 2;
  background: color-mix(in oklab, var(--c-paper) 70%, transparent);
  backdrop-filter: blur(12px);
  padding: 16px 32px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--c-ink) 6%, transparent);
}
.hero__stat { text-align: center; }
.hero__stat strong {
  font-family: var(--ff-display-active);
  font-size: 19px;
  font-weight: 700;
  color: var(--c-ink);
  display: block;
  line-height: 1.15;
  margin-bottom: 3px;
}
.hero__stat span {
  font-size: 13px;
  color: color-mix(in oklab, var(--c-ink) 52%, transparent);
}
@media (max-width: 880px) {
  .hero__stats { gap: 16px 24px; padding: 14px 20px; border-radius: var(--r-lg); }
  .hero__stat strong { font-size: 22px; }
}

/* ===== MARQUEE ===== */
.marquee {
  background: var(--c-ink);
  color: var(--c-paper);
  overflow: hidden;
  padding: 13px 0;
  position: relative;
}
.marquee__track {
  display: flex;
  gap: 40px;
  animation: marquee 32s linear infinite;
  white-space: nowrap;
  width: max-content;
}
.marquee__item {
  font-family: var(--ff-display-active);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: 40px;
}
.marquee__item::after {
  content: '✦';
  color: var(--c-coral);
  font-size: 13px;
}
@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* ===== SECTION SCAFFOLD ===== */
.section {
  padding: var(--section-pad) clamp(20px, 4vw, 48px);
  position: relative;
}
.section__inner { max-width: 1320px; margin: 0 auto; }

.section--peach    { background: var(--c-peach-soft); }
.section--lavender { background: var(--c-lavender-soft); }
.section--green    { background: var(--c-green-soft); }
.section--paper    { background: var(--c-paper); }
.section--ink      { background: var(--c-ink); color: var(--c-paper); }
.section--ink h1, .section--ink h2 { color: var(--c-paper); }

.section__head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 48px;
  align-items: end;
  margin-bottom: clamp(48px, 6vw, 80px);
}
@media (max-width: 760px) {
  .section__head { grid-template-columns: 1fr; gap: 16px; }
}
.section__eyebrow {
  font-family: var(--ff-body-active);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  /* 74 % statt 60 %: kleine Schrift braucht ≥ 4,5:1 Kontrast auf Papier (Oktober 2026) */
  color: color-mix(in oklab, var(--c-ink) 74%, transparent);
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 10px;
}
.section__eyebrow::before {
  content: ''; width: 28px; height: 1.5px; background: currentColor;
}
.section__title {
  font-size: clamp(40px, 5.4vw, 80px);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0;
  font-weight: 400;
}
.section__title em { font-style: italic; font-weight: 300; color: var(--c-lavender); }
.section__lede {
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.5;
  color: color-mix(in oklab, var(--c-ink) 75%, transparent);
  max-width: 48ch;
  justify-self: end;
}

/* ===== ANGEBOT ===== */
.services {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
.service {
  grid-column: span 6;
  border-radius: 28px;
  padding: 32px;
  position: relative;
  overflow: hidden;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 280ms var(--ease-out);
  cursor: pointer;
  text-decoration: none;
  color: var(--c-ink);
}
.service:hover { transform: translateY(-4px); }
.service:nth-child(1) { background: var(--c-lavender-soft); grid-column: span 7; }
.service:nth-child(2) { background: var(--c-coral-soft);    grid-column: span 5; }
.service:nth-child(3) { background: var(--c-teal-soft);     grid-column: span 5; }
.service:nth-child(4) { background: var(--c-yellow-soft);   grid-column: span 7; }
@media (max-width: 880px) {
  .service { grid-column: span 12 !important; }
}

.service__num {
  font-family: var(--ff-body-active);
  font-size: 13px;
  font-weight: 500;
  color: color-mix(in oklab, var(--c-ink) 55%, transparent);
}
.service__title {
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 16px 0 12px;
  font-weight: 400;
}
.service__desc {
  font-size: 15px;
  line-height: 1.5;
  color: color-mix(in oklab, var(--c-ink) 78%, transparent);
  max-width: 42ch;
  margin: 0;
}
.service__foot {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-top: 32px;
  gap: 16px;
}
.service__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--c-paper);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-ink);
  text-decoration: none;
}
.service__mascot {
  width: 96px; height: 96px;
  flex-shrink: 0;
}
.service__mascot img { width: 100%; height: 100%; object-fit: contain; }

/* ===== TEAM ===== */
.team {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px 16px;
}
@media (max-width: 880px) { .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.member {
  text-align: left;
}
.member__photo {
  aspect-ratio: 4 / 5;
  border-radius: 24px;
  overflow: hidden;
  background: var(--c-lavender-soft);
  display: flex; align-items: flex-end; justify-content: center;
  margin-bottom: 16px;
  position: relative;
  transition: transform 280ms var(--ease-out);
}
.member:hover .member__photo { transform: translateY(-3px); }
/* Startseiten-Teaser: quadratische Karten (Freigabe 11.09.2026), nur hier — das
   vollständige Team-Raster (.team-circle) auf ueber-uns.html bleibt unberührt. */
.team--teaser .member__photo { aspect-ratio: 1 / 1; }
.member__photo--coral    { background: var(--c-coral-soft); }
.member__photo--green    { background: var(--c-green-soft); }
.member__photo--teal     { background: var(--c-teal-soft); }
.member__photo--pink     { background: color-mix(in oklab, var(--c-pink) 22%, var(--c-paper)); }
.member__photo--yellow   { background: var(--c-yellow-soft); }
.member__photo--peach    { background: var(--c-peach); }
.member__photo img.member__mascot {
  width: 78%; max-height: 90%; object-fit: contain;
}
.member__placeholder {
  font-family: var(--ff-display-active);
  font-size: 96px;
  color: var(--c-ink);
  opacity: 0.25;
  line-height: 1;
  margin-bottom: 24px;
}
.member__role {
  font-size: 12px;
  color: color-mix(in oklab, var(--c-ink) 60%, transparent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
  margin-bottom: 4px;
}
.member__name {
  font-family: var(--ff-display-active);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
}
.member__badge {
  position: absolute; top: 12px; left: 12px;
  background: var(--c-paper); color: var(--c-ink);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
}

/* ===== ELTERNINFO / FAQ ===== */
.faq {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 880px) { .faq { grid-template-columns: 1fr; gap: 32px; } }

.faq__sticky {
  position: sticky;
  top: calc(var(--nav-h) + 40px);
}
.faq__quote {
  font-family: var(--ff-display-active);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-style: italic;
  font-weight: 300;
  color: var(--c-ink);
  margin: 0 0 24px;
}
.faq__quote-author {
  font-family: var(--ff-body-active);
  font-style: normal;
  font-size: 13px;
  font-weight: 500;
  color: color-mix(in oklab, var(--c-ink) 60%, transparent);
  display: block;
  margin-top: 16px;
}

.faq__list {
  display: flex; flex-direction: column;
}
.faq__item {
  border-top: 1px solid color-mix(in oklab, var(--c-ink) 12%, transparent);
  padding: 24px 0;
  cursor: pointer;
}
.faq__item:last-child { border-bottom: 1px solid color-mix(in oklab, var(--c-ink) 12%, transparent); }
.faq__q {
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px;  font-family: var(--ff-display-active);
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--c-ink);
}
.faq__plus {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--c-paper);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  color: var(--c-ink);
  transition: transform 280ms var(--ease-out), background 200ms;
}
.faq__item.is-open .faq__plus { transform: rotate(45deg); background: var(--c-coral); color: var(--c-paper); }
.faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 360ms var(--ease-out), margin 280ms;
  font-size: 15px;
  line-height: 1.6;
  color: color-mix(in oklab, var(--c-ink) 80%, transparent);
}
.faq__item.is-open .faq__a { max-height: 600px; margin-top: 16px; }
.faq__a-en { display: block; font-size: 15px; color: color-mix(in oklab, var(--c-ink) 55%, transparent); }
.faq__lang { font-size: 11px; font-weight: 600; color: color-mix(in oklab, var(--c-ink) 45%, transparent); text-transform: uppercase; letter-spacing: 0.06em; display: block; margin: 18px 0 4px; }

/* ===== STANDORTE ===== */
.locations {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 880px) { .locations { grid-template-columns: 1fr; } }
.location {
  background: var(--c-paper);
  border-radius: 28px;
  padding: 36px;
  border: 1px solid color-mix(in oklab, var(--c-ink) 8%, transparent);
}
.location__name {
  font-family: var(--ff-display-active);
  font-size: 36px;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.location__name .location__zusatz { font-weight: 400; }
.location__addr {
  font-size: 15px;
  line-height: 1.5;
  color: color-mix(in oklab, var(--c-ink) 78%, transparent);
  margin-bottom: 24px;
}
.location__hours { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.location__hours div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px dashed color-mix(in oklab, var(--c-ink) 12%, transparent); }
.location__hours div:last-child { border-bottom: none; }
.location__hours strong { font-weight: 500; }

/* ===== CONTACT ===== */
.contact {
  background: var(--c-ink);
  color: var(--c-paper);
  border-radius: 32px;
  padding: clamp(48px, 6vw, 96px);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 880px) { .contact { grid-template-columns: 1fr; gap: 40px; padding: 40px; } }
.contact h2 { color: var(--c-paper); }
.contact__lede { color: color-mix(in oklab, var(--c-paper) 80%, transparent); font-size: 16px; margin: 0 0 32px; max-width: 40ch; }
.contact__form { display: flex; flex-direction: column; gap: 12px; }
.contact__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.contact__field {
  background: color-mix(in oklab, var(--c-paper) 8%, transparent);
  border: 1px solid color-mix(in oklab, var(--c-paper) 12%, transparent);
  color: var(--c-paper);
  border-radius: 16px;
  padding: 16px 20px;
  font-family: var(--ff-body-active);
  font-size: 15px;
  transition: border-color 200ms;
}
.contact__field::placeholder { color: color-mix(in oklab, var(--c-paper) 50%, transparent); }
.contact__field:focus { outline: none; border-color: var(--c-coral); }
textarea.contact__field { min-height: 140px; resize: vertical; }
.contact__submit {
  align-self: flex-start;
  background: var(--c-coral);
  color: var(--c-ink);
  padding: 16px 28px;
  border-radius: 999px;
  border: none;
  font-family: var(--ff-body-active);
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
  margin-top: 8px;
  display: inline-flex; align-items: center; gap: 10px;
}
.contact__submit:hover { background: var(--c-coral-hover); }

/* ===== FOOTER ===== */
.footer {
  background: var(--c-paper);
  padding: 64px clamp(20px, 4vw, 48px) 32px;
}
.footer__inner { max-width: 1320px; margin: 0 auto; }
.footer__top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid color-mix(in oklab, var(--c-ink) 12%, transparent);
}
@media (max-width: 880px) { .footer__top { grid-template-columns: 1fr 1fr; gap: 32px; } }
.footer__logo { height: 48px; margin-bottom: 16px; }
.footer__ig { display: inline-block; margin-top: 14px; font-size: 15px; color: var(--c-ink); text-decoration: none; border-bottom: 1px solid color-mix(in oklab, var(--c-ink) 25%, transparent); }
.footer__ig:hover { border-bottom-color: currentColor; }
.footer__col h4 { font-family: var(--ff-display-active); font-size: 14px; font-weight: 500; margin: 0 0 16px; color: color-mix(in oklab, var(--c-ink) 74%, transparent); letter-spacing: 0.04em; text-transform: uppercase; }
.footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer__col a { color: var(--c-ink); text-decoration: none; font-size: 15px; display: inline-flex; align-items: center; min-height: 24px; }
.footer__col a:hover { color: var(--c-lavender-hover); }
.footer__bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 24px;
  font-size: 13px;
  color: color-mix(in oklab, var(--c-ink) 74%, transparent);
}

/* footer link reset */
.footer__col a, .nav__link, .nav__cta, .nav__logo, .btn, .service__more, .mobile-sheet__link {
  text-decoration: none;
}

/* Auf dieser Seite — Inhaltsverzeichnis für lange Elternseiten */
.toc{margin:0 0 44px;padding:20px 24px;background:var(--c-paper-2);border:1px solid var(--c-line);border-radius:var(--r-lg)}
.toc__title{font-family:var(--ff-body-active);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in oklab,var(--c-ink) 72%,transparent);margin:0 0 12px}
.toc__list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.toc__list a{font-family:var(--ff-body-active);font-size:15.5px;color:var(--c-ink);text-decoration:none;border-bottom:1px solid transparent}
.toc__list a:hover{border-bottom-color:var(--c-teal)}

/* font-pair toggle (driven by tweaks) */
body.fonts-bricolage,
body.fonts-modern {
  --ff-display-active: var(--ff-bricolage);
  --ff-body-active: var(--ff-jakarta);
}
body.fonts-bricolage h1,
body.fonts-bricolage h2,
body.fonts-bricolage h3,
body.fonts-bricolage .section__title,
body.fonts-bricolage .hero__title,
body.fonts-bricolage .pagehero__title,
body.fonts-modern h1, body.fonts-modern h2, body.fonts-modern h3,
body.fonts-modern .section__title, body.fonts-modern .hero__title, body.fonts-modern .pagehero__title {
  font-weight: 600;
  letter-spacing: -0.035em;
}
body.fonts-bricolage h1 em,
body.fonts-bricolage .section__title em,
body.fonts-bricolage .hero__title em,
body.fonts-bricolage .pagehero__title em,
body.fonts-modern h1 em, body.fonts-modern .section__title em,
body.fonts-modern .hero__title em, body.fonts-modern .pagehero__title em {
  font-style: italic;
  font-weight: 400;
}

body.fonts-classic {
  --ff-display-active: 'Caviar Dreams', sans-serif;
  --ff-body-active: 'Source Sans Pro', sans-serif;
}

/* ruhige Paarung — Nunito + Source Sans 3 (Standard) */
body.fonts-ruhig{--ff-display-active:var(--ff-nunito);--ff-body-active:var(--ff-sourcesans)}
body.fonts-ruhig h1,body.fonts-ruhig h2,body.fonts-ruhig h3,body.fonts-ruhig h4,
body.fonts-ruhig .section__title,body.fonts-ruhig .hero__title,body.fonts-ruhig .pagehero__title{font-weight:600;letter-spacing:-0.01em}
body.fonts-ruhig .hero__title,body.fonts-ruhig .pagehero__title{line-height:1.06}
body.fonts-ruhig h1 em,body.fonts-ruhig .section__title em,body.fonts-ruhig .hero__title em,body.fonts-ruhig .pagehero__title em{font-style:normal;font-weight:400;color:color-mix(in oklab,var(--c-ink) 68%,var(--c-teal))}
body.fonts-ruhig .marquee__item{font-weight:500;letter-spacing:0}
/* Inpage-Anker: Ziel landet nie unter dem Sticky Header (global, Desktop + Mobile) */
[id]{scroll-margin-top:calc(var(--nav-h) + 26px)}
body.fonts-ruhig .faq__quote{font-weight:400;letter-spacing:-0.005em}

/* nav layout variants */
body.nav-pill .nav__inner {
  background: var(--c-paper);
  border: 1px solid color-mix(in oklab, var(--c-ink) 8%, transparent);
  border-radius: 999px;
  padding: 8px 24px;
  box-shadow: var(--sh-1);
}
body.nav-pill .nav::before { display: none; }
body.nav-pill .nav { padding-top: 16px; }

body.nav-underline .nav__link::after { background: var(--c-coral); height: 2px; }

/* Recruiting-Hinweis in der Navigation */
.nav__recruit{display:inline-flex;align-items:center;gap:7px}
.nav__recruit-dot{width:6px;height:6px;border-radius:50%;background:var(--c-teal);animation:recruit-puls 3.6s ease-out infinite}
@keyframes recruit-puls{0%,70%{box-shadow:0 0 0 0 color-mix(in oklab,var(--c-teal) 55%,transparent)}86%{box-shadow:0 0 0 5px color-mix(in oklab,var(--c-teal) 0%,transparent)}100%{box-shadow:0 0 0 0 color-mix(in oklab,var(--c-teal) 0%,transparent)}}
@media (prefers-reduced-motion:reduce){.nav__recruit-dot{animation:none}}

.team__label{font-family:var(--ff-display-active);font-size:15px;font-weight:600;letter-spacing:.02em;color:color-mix(in oklab,var(--c-ink) 55%,transparent);margin:8px 0 14px}
.team__label + .team{margin-bottom:40px}

.nav__recruit-tag{font-family:var(--ff-body-active);font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--c-ink);background:color-mix(in oklab,var(--c-teal) 26%,var(--c-paper));border-radius:var(--r-pill);padding:2px 7px;line-height:1.4}
.nav__recruit:hover .nav__recruit-tag{color:var(--c-ink);background:color-mix(in oklab,var(--c-teal) 34%,var(--c-paper))}

/* kleine zweite Benefit-Ebene auf der Recruiting-Seite */
.jobfacts{list-style:none;margin:22px 0 8px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.jobfacts li{font-family:var(--ff-body-active);font-size:14px;color:var(--c-ink);background:var(--c-paper-2);border:1px solid var(--c-line);border-radius:var(--r-pill);padding:7px 14px}

/* Angebot: drei nächste Schritte */
.schritte{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,28px)}
@media (max-width:900px){.schritte{grid-template-columns:1fr}}
.faden{position:absolute;left:4%;right:4%;top:-52px;width:92%;height:120px;pointer-events:none;overflow:visible}
.faden path{fill:none;stroke:var(--c-lavender);stroke-width:2;stroke-linecap:round;opacity:.34;stroke-dasharray:1400;stroke-dashoffset:1400;transition:stroke-dashoffset 2.6s cubic-bezier(.3,.7,.2,1)}
.faden.is-in path{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){.faden path{transition:none;stroke-dashoffset:0}}
@media (max-width:900px){.faden{display:none}}
.schritt{display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:320px;padding:clamp(22px,2.2vw,32px);border-radius:var(--r-lg);background:var(--c-paper-2);border:1px solid var(--c-line);text-decoration:none;color:var(--c-ink);transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease}
.schritt:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.schritt__title{font-family:var(--ff-display-active);font-size:clamp(24px,2vw,30px);font-weight:600;margin:0 0 4px}
.schritt__kicker{font-family:var(--ff-display-active);font-size:17px;color:var(--c-lavender);margin:0 0 12px}
.schritt__desc{font-size:15.5px;line-height:1.6;color:color-mix(in oklab,var(--c-ink) 78%,transparent);margin:0}
.schritt__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.schritt__more{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600}
.schritt__mascot img{width:64px;height:64px;object-fit:contain}
.online-note{margin-top:36px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;border-radius:var(--r-lg);background:color-mix(in oklab,var(--c-teal) 12%,var(--c-paper));border:1px solid var(--c-line)}
.online-note h3{font-family:var(--ff-display-active);font-size:19px;font-weight:600;margin:0 0 4px}
.online-note p{margin:0;font-size:15px;max-width:64ch;color:color-mix(in oklab,var(--c-ink) 76%,transparent)}
.online-note__link{font-size:15px;font-weight:600;white-space:nowrap}

/* Angebot-Hero: jeder der beiden Sätze auf einer Zeile */
.pagehero--lavender.pagehero--wide .pagehero__title{font-size:clamp(30px,4.3vw,62px);max-width:30ch;text-wrap:balance}
/* Verdichtung (03.09.2026): Lede direkt unter die H1, Spalten oben ausgerichtet,
   grosszügige Luft zur Begleitfigur. Feintuning 03.09.2026: Lede ~10px näher
   (Inner-Gap 12→3, Lede-margin 2→0), Papagei minimal näher an die Textgruppe
   (margin-left 2%→0, Höhe -72→-70) ohne H1-Überlappung. Nur Angebots-Hero. */
.pagehero--lavender.pagehero--wide .pagehero__inner{gap:3px}
.pagehero--lavender.pagehero--wide .pagehero__cols{align-items:start;gap:52px}
.pagehero--lavender.pagehero--wide .pagehero__lede{margin-top:0;max-width:38ch}
@media (max-width:880px){.pagehero--lavender.pagehero--wide .pagehero__cols{gap:20px}}
/* «Drei mögliche nächste Schritte.» bleibt H2, aber zurückgenommen, damit sie
   nicht mit der Hero-H1 konkurriert. Nur auf der Angebotsseite (page-angebot),
   damit der eingefrorene Startseiten-Angebotsblock unberührt bleibt. */
.page-angebot #angebot .section__title{font-size:clamp(27px,3.1vw,42px)}
/* Online-Hinweis auf der Angebotsseite: kompaktere innere Breite, damit der CTA
   auf grossen Desktopbreiten näher am Textblock sitzt und das Band nicht leer
   wirkt. Nur angebot.html (page-angebot); Startseiten-Band bleibt unberührt. */
.page-angebot .online-note{max-width:820px}

.team__mehr{display:inline-block;margin-top:26px;font-family:var(--ff-display-active);font-size:16px;font-weight:600}

/* Recruiting: offene Stellen */
.stellen{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:20px 0 8px}
.stelle{padding:20px 22px;border-radius:var(--r-lg);background:var(--c-paper-2);border:1px solid var(--c-line)}
.stelle h3{font-family:var(--ff-display-active);font-size:19px;font-weight:600;margin:0 0 12px}
.stelle dl{margin:0 0 14px;display:grid;gap:6px}
.stelle dl div{display:flex;gap:8px;font-size:14.5px}
.stelle dt{color:color-mix(in oklab,var(--c-ink) 55%,transparent);min-width:74px}
.stelle dd{margin:0}
.stelle a{font-size:14.5px;font-weight:600}
/* Benefit-Chips: ruhiger Grundzustand, sanfter Wash bei Hover */
.jobfacts li{transition:background .28s ease,transform .28s cubic-bezier(.2,.7,.2,1),border-color .28s ease}
.jobfacts li:hover{background:color-mix(in oklab,var(--c-teal) 14%,var(--c-paper));border-color:color-mix(in oklab,var(--c-teal) 30%,var(--c-line));transform:translateY(-2px)}

.af__offen{font-size:13.5px;color:color-mix(in oklab,var(--c-ink) 58%,transparent)}

/* ============ Korrekturrunde ============ */

/* 3. Faktenleiste im Hero: näher am Inhalt, klarer gegliedert, ohne Box-Optik */
.hero__stats{margin-top:118px;padding:20px 8px;gap:14px 0;background:color-mix(in oklab,var(--c-paper) 82%,transparent);border-color:color-mix(in oklab,var(--c-ink) 8%,transparent)}
.hero__stat{padding:2px 34px;max-width:34ch}
.hero__stat + .hero__stat{border-left:1px solid color-mix(in oklab,var(--c-ink) 12%,transparent)}
.hero__stat strong{font-size:21px;color:var(--c-ink);margin-bottom:5px}
.hero__stat span{font-size:14px;line-height:1.4;display:block;color:color-mix(in oklab,var(--c-ink) 62%,transparent)}
.hero__stat span b{display:inline-block;margin-top:3px;font-weight:600;color:color-mix(in oklab,var(--c-ink) 88%,transparent)}
@media (max-width:880px){.hero__stats{margin-top:72px;padding:16px 18px}.hero__stat{padding:2px 0;max-width:none}.hero__stat + .hero__stat{border-left:0;border-top:1px solid color-mix(in oklab,var(--c-ink) 10%,transparent);padding-top:12px}.hero__stat strong{font-size:19px}}

/* 4. Hero "Für Eltern": ruhigere Proportion, Bär als Charakter statt Fläche */
.pagehero--quiet .pagehero__title{font-size:clamp(34px,4.9vw,72px);line-height:1.12;max-width:16ch}
.pagehero--quiet .pagehero__lede{margin-top:14px}
.pagehero--quiet .pagehero__bleed{width:min(34vw,470px);right:1%;bottom:-8%;opacity:.62}
.pagehero--quiet .mo-peek{opacity:.5}
@media (max-width:880px){.pagehero--quiet .pagehero__bleed{right:-8%;bottom:-6%;width:58vw;opacity:.4}}

/* 6. Informationskarten: im Ruhezustand ruhig, bei Berührung mehr Plapperegg */
.featuregrid .feature{transition:background .35s var(--ease-out),border-color .35s var(--ease-out),transform .35s var(--ease-out)}
.featuregrid .feature:nth-child(4n+1){background:color-mix(in oklab,var(--c-green-soft) 45%,var(--c-paper))}
.featuregrid .feature:nth-child(4n+2){background:color-mix(in oklab,var(--c-peach-soft) 45%,var(--c-paper))}
.featuregrid .feature:nth-child(4n+3){background:color-mix(in oklab,var(--c-yellow-soft) 42%,var(--c-paper))}
.featuregrid .feature:nth-child(4n+4){background:color-mix(in oklab,var(--c-lavender-soft) 45%,var(--c-paper))}
.featuregrid .feature:hover:nth-child(4n+1),.featuregrid .feature:focus-visible:nth-child(4n+1){background:var(--c-green-soft)}
.featuregrid .feature:hover:nth-child(4n+2),.featuregrid .feature:focus-visible:nth-child(4n+2){background:var(--c-peach-soft)}
.featuregrid .feature:hover:nth-child(4n+3),.featuregrid .feature:focus-visible:nth-child(4n+3){background:var(--c-yellow-soft)}
.featuregrid .feature:hover:nth-child(4n+4),.featuregrid .feature:focus-visible:nth-child(4n+4){background:var(--c-lavender-soft)}
.featuregrid .feature:hover,.featuregrid .feature:focus-visible{transform:translateY(-2px);border-color:color-mix(in oklab,var(--c-ink) 14%,transparent)}
.featuregrid .feature__mascot{width:76px;height:76px;transition:transform .4s var(--ease-out)}
.featuregrid .feature:hover .feature__mascot{transform:translateY(-2px) rotate(-2deg) scale(1.04)}
@media (prefers-reduced-motion:reduce){.featuregrid .feature,.featuregrid .feature__mascot{transition:none}.featuregrid .feature:hover{transform:none}.featuregrid .feature:hover .feature__mascot{transform:none}}

/* 7. Recruiting-Hinweis: kleines sekundäres JOBS statt Pille */
.nav__recruit-tag{background:none;padding:0;border-radius:0;font-size:9.5px;letter-spacing:.09em;font-weight:600;color:color-mix(in oklab,var(--c-ink) 45%,transparent);align-self:flex-start;margin-top:1px}
.nav__recruit:hover .nav__recruit-tag{background:none;color:color-mix(in oklab,var(--c-ink) 70%,transparent)}
.nav__recruit{gap:5px}

/* 2. Kosten: die eine Aussage, die sofort sitzen muss */
.kk-klar{margin:8px 0 40px;padding:28px 32px;border-radius:var(--r-lg);background:var(--c-paper-2);border:1px solid color-mix(in oklab,var(--c-ink) 10%,transparent)}
.kk-klar__frage{font-family:var(--ff-display-active);font-size:clamp(24px,2.6vw,34px);font-weight:600;letter-spacing:-0.02em;margin:0 0 8px;color:var(--c-ink)}
.kk-klar__satz{font-size:18px;font-weight:600;margin:0 0 10px;color:var(--c-ink)}
.kk-klar__zusatz{margin:0;font-size:16px;line-height:1.6;color:color-mix(in oklab,var(--c-ink) 70%,transparent)}

/* Zusätzliche Benefits auf Mitplappern: zweispaltige Editorial-Liste statt Pillen.
   Ruhezustand nur ein Hauch Farbe, bei Berührung wird Plapperegg sichtbarer. */
.jobfacts{list-style:none;margin:28px 0 8px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
.jobfacts li{position:relative;display:flex;align-items:baseline;gap:14px;background:none;border:0;border-radius:0;border-top:1px solid color-mix(in oklab,var(--c-ink) 10%,transparent);padding:15px 14px 15px 16px;font-family:var(--ff-body-active);font-size:15.5px;line-height:1.45;color:color-mix(in oklab,var(--c-ink) 88%,transparent);transition:background .32s var(--ease-out),color .32s var(--ease-out),transform .32s var(--ease-out)}
.jobfacts li::before{content:'';flex:none;width:7px;height:7px;border-radius:50%;background:var(--jf-c);opacity:.55;transform:translateY(-2px);transition:opacity .32s var(--ease-out),transform .32s var(--ease-out)}
.jobfacts li:nth-child(1),.jobfacts li:nth-child(2){border-top:0}
.jobfacts li:nth-child(6n+1){--jf-c:var(--c-green)}
.jobfacts li:nth-child(6n+2){--jf-c:var(--c-coral)}
.jobfacts li:nth-child(6n+3){--jf-c:var(--c-peach)}
.jobfacts li:nth-child(6n+4){--jf-c:var(--c-yellow)}
.jobfacts li:nth-child(6n+5){--jf-c:var(--c-lavender)}
.jobfacts li:nth-child(6n+6){--jf-c:var(--c-teal)}
.jobfacts li:hover{background:color-mix(in oklab,var(--jf-c) 12%,transparent);color:var(--c-ink);transform:translateY(-1px);border-radius:10px}
.jobfacts li:hover::before{opacity:1;transform:translateY(-2px) scale(1.18)}
.jobfacts li::after{content:'✦';position:absolute;right:12px;top:11px;font-size:9px;color:var(--jf-c);opacity:0;pointer-events:none}
.jobfacts li:hover::after{animation:jf-funkeln 1.1s var(--ease-out) 1 forwards}
@keyframes jf-funkeln{0%{opacity:0;transform:scale(.6)}35%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.05)}}
@media (max-width:760px){.jobfacts{grid-template-columns:1fr;gap:0}.jobfacts li:nth-child(2){border-top:1px solid color-mix(in oklab,var(--c-ink) 10%,transparent)}}
@media (prefers-reduced-motion:reduce){.jobfacts li,.jobfacts li::before{transition:none}.jobfacts li:hover{transform:none}.jobfacts li:hover::after{animation:none}}

/* Faktenleiste: die Erstberatungs-Karte verlinkt die vollständige Regel. */
a.hero__stat{text-decoration:none;color:inherit;transition:border-color .2s var(--ease-out),background .2s var(--ease-out)}
a.hero__stat:hover{border-color:var(--c-lavender)}
a.hero__stat strong{text-decoration:underline;text-decoration-color:color-mix(in oklab,var(--c-ink) 22%,transparent);text-underline-offset:3px}

/* Kursive Kopfteile als eigener Kasten: liegt der «<em>»-Teil vor einem Zeilenumbruch,
   erzeugt die Inline-Geometrie sonst einen Kasten über beide Zeilen — optisch unsichtbar,
   für Layout-Prüfungen aber eine Scheinkollision. Bricht nichts um, die Teile sind kurz. */
.section__title em,.pagehero__title em,.hero__phrase em{display:inline-block}

/* Touch: Trefferflächen auf mindestens 44 px, ohne die Schriftgrössen zu verändern */
@media (hover:none){
.nav__drop a,.nav__sheet a{min-height:44px;display:flex;align-items:center}
.member__hint{min-height:44px;display:inline-flex;align-items:center}
}

/* Info-Kasten (03.11.2026, Nutzerfreigabe): kleines «i» vor dem Titel, Text darunter über die
   volle Breite. Vorher rückte der ganze Text neben einem grossen Kreis ein und stand nicht
   bündig mit dem übrigen, linksbündigen Seitentext. */
.callout{display:grid;grid-template-columns:auto 1fr;column-gap:10px;row-gap:8px;align-items:center}
.callout>div:not(.callout__icon){display:contents}
.callout__icon{width:24px;height:24px;font-size:14px;grid-column:1;grid-row:1}
.callout__titel{grid-column:2;grid-row:1;margin:0}
.callout p{grid-column:1 / -1}
@media (max-width:640px){.callout{padding:20px}}