/* ==========================================================================
   Haushelden — Design System & Components
   Reines statisches CSS. Mobile-first, responsive.
   ========================================================================== */

/* ----------  Design Tokens  ---------- */
:root {
  /* Farben */
  --navy: #1f2a4d;
  --navy-soft: #2b3a63;
  --ink: #5a6478;
  --ink-light: #8a93a6;
  --purple: #7b5cff;
  --purple-dark: #6a49f2;
  --purple-soft: #efeaff;
  --yellow: #f7b500;
  --yellow-dark: #e5a800;
  --green: #38b26b;
  --green-soft: #e5f6ec;
  --blue: #4a90e2;
  --pink: #ff8ab0;
  --white: #ffffff;

  /* Section-Tints */
  --bg-lavender: #f5f3ff;
  --bg-mint: #eefaf3;
  --bg-peach: #fff6ec;
  --bg-blue: #eef4ff;
  --hero-grad: linear-gradient(180deg, #eaf1ff 0%, #f3eeff 45%, #ffffff 100%);

  /* Karten & Effekte */
  --card-bg: #ffffff;
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 26px;
  --radius-pill: 999px;
  --shadow-sm: 0 4px 14px rgba(31, 42, 77, 0.06);
  --shadow: 0 10px 30px rgba(31, 42, 77, 0.08);
  --shadow-lg: 0 24px 60px rgba(31, 42, 77, 0.14);
  --border: 1px solid #ececf3;

  /* Layout */
  --container: 1180px;
  --gutter: 24px;

  /* Fonts */
  --font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Fredoka', 'Nunito', system-ui, sans-serif;
}

/* ----------  Reset  ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--navy);
  line-height: 1.12;
  margin: 0 0 .5em;
  font-weight: 600;
}
p { margin: 0 0 1em; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
[hidden] { display: none !important; }   /* schlägt .btn { display:inline-flex } */

/* ----------  Layout Helpers  ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.section { padding: 72px 0; }
.section--tight { padding: 48px 0; }
.section--lavender { background: var(--bg-lavender); }
.section--mint { background: var(--bg-mint); }
.section--blue { background: var(--bg-blue); }
.text-purple { color: var(--purple); }
.text-center { text-align: center; }
.section-title {
  font-size: clamp(1.6rem, 3.2vw, 2.15rem);
  text-align: center;
  margin-bottom: 8px;
}
.section-sub {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 44px;
  color: var(--ink);
}
.section-note {
  text-align: center;
  color: var(--purple);
  font-weight: 700;
  font-size: .88rem;
  margin: 0 0 32px;
}

/* ----------  Buttons  ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1rem;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  transition: transform .12s ease, box-shadow .12s ease, background .15s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--yellow);
  color: var(--navy);
  box-shadow: 0 8px 20px rgba(247, 181, 0, .35);
}
.btn-primary:hover { background: var(--yellow-dark); }
.btn-outline {
  background: var(--white);
  color: var(--navy);
  border-color: #e2e4ee;
}
.btn-outline:hover { border-color: var(--purple); color: var(--purple); }
.btn-purple {
  background: var(--purple);
  color: #fff;
  box-shadow: 0 8px 20px rgba(123, 92, 255, .32);
}
.btn-purple:hover { background: var(--purple-dark); }
.btn-block { width: 100%; }
.btn-lg { padding: 16px 32px; font-size: 1.05rem; }

/* ----------  Navbar  ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid rgba(31, 42, 77, .06);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 74px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--navy);
}
.brand img { height: 38px; width: auto; }
.nav__panel { display: contents; }  /* transparent on desktop, dropdown on mobile */
.nav__links {
  display: flex;
  align-items: center;
  gap: 30px;
  margin: 0 auto;
}
.nav__links a {
  font-weight: 700;
  color: var(--navy-soft);
  font-size: .98rem;
}
.nav__links a:hover { color: var(--purple); }
.nav__actions { display: flex; align-items: center; gap: 12px; }
.nav__actions .btn { padding: 10px 22px; }

/* Sprachumschalter DE | EN – zwei Segmente, das aktive ist kein Link */
.lang-switch {
  display: inline-flex;
  align-items: center;
  flex: none;
  border: 1px solid #e2e4ee;
  border-radius: 999px;
  overflow: hidden;
  background: var(--white);
  font-size: .82rem;
  font-weight: 800;
  line-height: 1;
}
.lang-switch > * {
  padding: 8px 12px;
  color: var(--navy-soft);
  letter-spacing: .02em;
}
.lang-switch a:hover { color: var(--purple); background: var(--purple-soft); }
.lang-switch [aria-current="true"] {
  background: var(--purple);
  color: #fff;
  cursor: default;
}
.nav__toggle {
  display: none;
  background: none;
  border: none;
  padding: 8px;
}
.nav__toggle span {
  display: block;
  width: 26px;
  height: 3px;
  border-radius: 3px;
  background: var(--navy);
  margin: 5px 0;
  transition: .2s;
}

/* ----------  Hero  ---------- */
.hero { background: var(--hero-grad); overflow: hidden; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--purple-soft);
  color: var(--purple-dark);
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .3px;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  margin-bottom: 18px;
}
.eyebrow svg { width: 16px; height: 16px; }
.hero__inner {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 40px;
  align-items: center;
  padding: 56px 0 40px;
}
.hero h1 {
  font-size: clamp(2.3rem, 5vw, 3.4rem);
  letter-spacing: -.5px;
}
.hero__lead {
  font-size: 1.15rem;
  max-width: 480px;
  margin-bottom: 22px;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin: 26px 0 18px; }
.hero__note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--ink-light);
  font-size: .92rem;
  font-weight: 700;
}
.hero__note .ico { flex: none; margin-top: 2px; color: var(--ink-light); }
.hero__badges { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 16px; }
.hero__badges span {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-weight: 700;
  color: var(--navy-soft);
  font-size: .92rem;
}
.hero__art { position: relative; }
.hero__art img { width: 100%; height: auto; }
.hero__art-main { filter: drop-shadow(0 24px 40px rgba(31,42,77,.14)); }
.hero__art-phone {
  position: absolute;
  width: 27% !important;
  left: 2%;
  bottom: -6%;
  filter: drop-shadow(0 18px 30px rgba(31,42,77,.22));
}
.hero__art-card {
  position: absolute;
  width: 60% !important;
  right: -2%;
  bottom: -10%;
  filter: drop-shadow(0 18px 30px rgba(31,42,77,.22));
}
/* Holzschild, in die Hero-Illustration eingesetzt */
.hero__art-sign {
  position: absolute;
  width: 30% !important;
  right: -1%;
  bottom: 2%;
  filter: drop-shadow(0 14px 26px rgba(31, 42, 77, .22));
}
@media (max-width: 560px) {
  .hero__art { margin-bottom: 40px; }
  .hero__art-phone { bottom: -12%; }
  .hero__art-card { bottom: -18%; }
}

/* ----------  Hero, zentrierte Variante (z. B. jugend.html)  ---------- */
.hero--centered {
  background: linear-gradient(180deg, #cfe3ff 0%, #e8f0ff 50%, #ffffff 100%);
}
.hero--centered .container { padding-top: 56px; padding-bottom: 0; }
.hero__text-centered {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}
.hero--centered .eyebrow { margin-left: auto; margin-right: auto; }
.hero--centered .hero__lead { margin-left: auto; margin-right: auto; }
.hero--centered .hero__cta,
.hero--centered .hero__badges { justify-content: center; }
.hero__art--full {
  max-width: 920px;
  margin: 40px auto 0;
}
.hero__art--full img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
@media (max-width: 900px) {
  .hero__art--full { margin-top: 32px; }
}

/* ----------  Check-Liste  ---------- */
.checklist { display: grid; gap: 12px; margin: 20px 0; }
.checklist li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  color: var(--navy-soft);
}
.check-ico {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green);
  display: grid;
  place-items: center;
}
.check-ico svg { width: 15px; height: 15px; }

/* ----------  Feature-Cards Grid  ---------- */
.grid {
  display: grid;
  gap: 22px;
}
.grid--6 { grid-template-columns: repeat(6, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

.feature {
  background: var(--card-bg);
  border: var(--border);
  border-radius: var(--radius);
  padding: 26px 20px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease;
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.icon-circle {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
}
.icon-circle svg { width: 30px; height: 30px; }
.icon-circle img { width: 30px; height: 30px; object-fit: contain; }
.ic-purple { background: var(--purple-soft); color: var(--purple); }
.ic-yellow { background: #fff3d6; color: var(--yellow-dark); }
.ic-green  { background: var(--green-soft); color: var(--green); }
.ic-blue   { background: #e4efff; color: var(--blue); }
.ic-pink   { background: #ffe7f0; color: var(--pink); }
.feature h3 { font-size: 1.05rem; margin-bottom: 0; }
/* Nur die Karten der Startseite haben eine Erläuterung unter der Überschrift. */
.feature p { font-size: .9rem; color: var(--ink-light); margin: 8px 0 0; }

/* ----------  Steps  ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  position: relative;
}
.steps--3 { grid-template-columns: repeat(3, 1fr); }
.step { text-align: center; position: relative; padding: 0 8px; }
.step__num {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  display: grid;
  place-items: center;
  margin: 0 auto 10px;
  position: relative;
  z-index: 2;
}
.step__ico {
  width: 46px;
  height: 46px;
  margin: 0 auto 14px;
  color: var(--navy-soft);
}
.step h4 { font-size: 1rem; margin-bottom: 4px; }
.step p { font-size: .92rem; margin: 0; }
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 27px;
  left: 60%;
  width: 80%;
  border-top: 2px dashed #cfd4e4;
  z-index: 1;
}
.n-purple { background: var(--purple); }
.n-yellow { background: var(--yellow); color: var(--navy); }
.n-green  { background: var(--green); }
.n-blue   { background: var(--blue); }

/* ----------  Device / Mockup block  ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: center;
}
.split--rev .split__media { order: -1; }
.split__media img { width: 100%; height: auto; }
.mini-list { display: grid; gap: 14px; margin-top: 10px; }
.mini-list li { display: flex; gap: 12px; align-items: flex-start; }
.mini-list .n {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--purple-soft);
  color: var(--purple);
  font-weight: 800;
  display: grid; place-items: center;
  font-size: .95rem;
}
.mini-list strong { color: var(--navy); display: block; }
.mini-list span { font-size: .95rem; }

/* PWA info box */
.info-box {
  background: var(--bg-lavender);
  border: var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-top: 8px;
}
.info-box h4 { margin-bottom: 14px; font-size: 1.05rem; }
.info-box li { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; font-weight: 700; color: var(--navy-soft); font-size: .96rem; }
.info-box li .ico { color: var(--purple); flex: none; }

/* ----------  Benefit row (icon + text)  ---------- */
.benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.benefit {
  background: var(--card-bg);
  border: var(--border);
  border-radius: var(--radius);
  padding: 22px;
  display: flex;
  gap: 14px;
  align-items: center;
  box-shadow: var(--shadow-sm);
}
.benefit .icon-circle { margin: 0; width: 54px; height: 54px; flex: none; }
.benefit .icon-circle svg { width: 26px; height: 26px; }
.benefit p { margin: 0; font-weight: 800; color: var(--navy); font-size: .98rem; }

/* ----------  Testimonials  ---------- */
.testimonial {
  background: var(--card-bg);
  border: var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}
.stars { color: var(--yellow); letter-spacing: 2px; font-size: 1.05rem; margin-bottom: 10px; }
.testimonial blockquote { margin: 0 0 12px; font-weight: 700; color: var(--navy); font-size: 1.02rem; }
.testimonial cite { font-style: normal; color: var(--ink-light); font-weight: 700; font-size: .92rem; }

/* ----------  Pricing  ---------- */
.pricing { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
.plan {
  position: relative;
  background: var(--card-bg);
  border: 1px solid #e7e8f0;
  border-radius: var(--radius-lg);
  padding: 34px 30px;
  box-shadow: var(--shadow-sm);
}
.plan--featured { border: 2px solid var(--purple); box-shadow: var(--shadow); }
.plan__badge {
  position: absolute;
  top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--purple);
  color: #fff;
  font-weight: 800;
  font-size: .82rem;
  padding: 6px 18px;
  border-radius: var(--radius-pill);
}
.plan h3 { text-align: center; font-size: 1.5rem; margin-bottom: 4px; }
.plan--featured h3 { color: var(--purple); }
.plan__price { text-align: center; margin-bottom: 6px; }
.plan__price b { font-family: var(--font-display); font-size: 2.1rem; color: var(--navy); }
.plan__price span { color: var(--ink-light); font-weight: 700; }
.plan__note { text-align: center; margin-bottom: 14px; }
.plan__compare {
  text-align: center;
  color: var(--ink-light);
  font-size: .88rem;
  margin: 0 0 4px;
  line-height: 1.5;
}
.plan__compare b { color: var(--purple); font-weight: 800; }
.plan__tag {
  display: inline-flex; gap: 6px; align-items: center;
  background: var(--green-soft); color: var(--green);
  font-weight: 800; font-size: .82rem;
  padding: 4px 12px; border-radius: var(--radius-pill);
}
.plan__treat {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 220px;
  margin: 6px auto 20px;
}
.plan ul.features { display: grid; gap: 12px; margin: 0 0 24px; }
.plan ul.features li { display: flex; gap: 10px; align-items: flex-start; font-weight: 700; color: var(--navy-soft); font-size: .96rem; }
.plan ul.features li .ico { flex: none; color: var(--green); margin-top: 2px; }
.plan--featured ul.features li .ico { color: var(--purple); }

/* ----------  4-Card row (Jugend value props)  ---------- */
.value-card {
  background: var(--card-bg);
  border: var(--border);
  border-radius: var(--radius);
  padding: 28px 22px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.value-card .icon-circle { width: 60px; height: 60px; }
.value-card h3 { font-size: 1.15rem; margin-bottom: 8px; }
.value-card p { font-size: .95rem; margin: 0; }

/* ----------  Konzept-Seite  ---------- */
.goal-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--card-bg);
  border: var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow);
  max-width: 480px;
}
.goal-card .icon-circle { margin: 0; width: 52px; height: 52px; flex: none; }
.goal-card .icon-circle svg { width: 24px; height: 24px; }
.goal-card strong { color: var(--navy); font-size: 1.05rem; display: block; margin-bottom: 4px; }
.goal-card p { margin: 0; font-size: .96rem; }
.icon-circle--photo { overflow: hidden; }
.goal-card .icon-circle--photo { width: 72px; height: 72px; }
.icon-circle--photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.goal-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 820px; margin: 40px auto 0; }
.goal-row .goal-card { max-width: none; }

.col3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.pillar { text-align: left; }
.pillar .icon-circle { margin: 0 0 14px; }
.pillar h3 { font-size: 1.1rem; }
.pillar p { font-size: .96rem; }

.progression {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 14px;
  align-items: start;
}
.progression .arrow { align-self: center; color: var(--ink-light); font-size: 1.6rem; }
.prog-step img { border-radius: var(--radius); width: 100%; height: auto; box-shadow: var(--shadow-sm); }
.prog-step h4 { margin: 14px 0 6px; font-size: 1.02rem; }
.prog-step p { font-size: .92rem; margin: 0; }

.stark-card {
  background: var(--card-bg);
  border: var(--border);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow-sm);
}
.stark-card h4 { margin-bottom: 16px; }
.stark-card li { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; font-weight: 700; color: var(--navy-soft); font-size: .96rem; }
.stark-card li .ico { flex: none; color: var(--green); margin-top: 2px; }

.reward-icons { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.reward {
  background: var(--card-bg);
  border: var(--border);
  border-radius: var(--radius);
  padding: 22px 12px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.reward .icon-circle { width: 58px; height: 58px; }
.reward span { font-weight: 800; color: var(--navy); font-size: .92rem; }

.beforeafter { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; }
.beforeafter img { border-radius: var(--radius); box-shadow: var(--shadow-sm); width: 100%; height: auto; }
.beforeafter figcaption { text-align: center; font-weight: 800; color: var(--navy); margin-top: 10px; font-size: .95rem; }
.beforeafter .arrow { color: var(--blue); font-size: 1.6rem; }

.didaktik-motivation {
  display: grid;
  grid-template-columns: 2.1fr 1fr;
  gap: 34px;
  align-items: center;
}
.didaktik-teens {
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr;
  gap: 32px;
  align-items: center;
}
.didaktik-teens .dt-text h2 { font-size: 1.5rem; }
@media (max-width: 900px) {
  .didaktik-motivation { grid-template-columns: 1fr; }
  .didaktik-teens { grid-template-columns: 1fr; }
}

/* Fließtext-Blöcke (Konzept-Argumentation) */
.prose { max-width: 760px; margin: 0 auto; }
.prose--center { text-align: center; }
.prose p:last-child { margin-bottom: 0; }
.text-navy { color: var(--navy); }

/* Zitat-Karte (Gründer-Statement im Hero) */
.quote-card {
  margin: 0;
  background: var(--card-bg);
  border: var(--border);
  border-left: 4px solid var(--purple);
  border-radius: var(--radius);
  padding: 22px 26px;
  box-shadow: var(--shadow);
  max-width: 520px;
}
.quote-card p { margin: 0; font-size: .98rem; }

/* Ablauf-Kette: Schritt → Schritt → Ziel */
.flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.flow__item {
  background: var(--card-bg);
  border: var(--border);
  border-radius: var(--radius-pill);
  padding: 12px 22px;
  font-weight: 800;
  color: var(--navy-soft);
  font-size: .96rem;
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.flow__item--goal { background: var(--purple); border-color: var(--purple); color: #fff; }
.flow__arrow { color: var(--ink-light); font-size: 1.3rem; font-weight: 800; }

/* Große Kernaussage */
.statement {
  max-width: 780px;
  margin: 44px auto;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--navy);
  font-size: clamp(1.15rem, 2.6vw, 1.55rem);
  line-height: 1.35;
  background: var(--card-bg);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  box-shadow: var(--shadow-sm);
}

/* Gegenüberstellung alte / neue Frage */
.contrast { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 32px; }
.contrast__card {
  background: var(--card-bg);
  border: var(--border);
  border-radius: var(--radius);
  padding: 24px 26px;
  box-shadow: var(--shadow-sm);
}
.contrast__card p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--navy);
  line-height: 1.3;
}
.contrast__label {
  display: inline-block;
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .4px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.contrast__card--before { opacity: .8; }
.contrast__card--before .contrast__label { color: var(--ink-light); }
.contrast__card--after { border-left: 4px solid var(--green); }
.contrast__card--after .contrast__label { color: var(--green); }

/* Breite Merkmal-Karte (zentriert unter einer Sektion) */
.stark-card--wide { max-width: 760px; margin: 36px auto 0; }

/* Schlagwort-Chips im Abschlussbereich */
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.chips li {
  background: var(--card-bg);
  border: var(--border);
  border-radius: var(--radius-pill);
  padding: 10px 22px;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--navy);
  font-size: 1rem;
}

/* Freigestellte Illustrationen – ohne Kartenrahmen/Schatten, damit die Transparenz wirkt */
.illu { width: 100%; height: auto; margin-inline: auto; }
.illu--sm { max-width: 150px; }
.illu--md { max-width: 260px; }
.illu--lg { max-width: 340px; }
.illu--portrait { max-width: 180px; }
.illu--sign { max-width: 300px; }
/* Feste Bildhöhe, damit die drei Überschriften auf einer Linie sitzen */
.pillar__img { width: auto; max-width: 130px; height: 96px; object-fit: contain; object-position: left bottom; margin-bottom: 12px; }

/* Bau-Etappen: Fundament → Rohbau → fertiges Haus */
.stages { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 18px; align-items: end; }
.stages figure { margin: 0; }
.stages img { width: 100%; max-width: 230px; height: auto; margin-inline: auto; border-radius: var(--radius); }
.stages figcaption { text-align: center; font-weight: 800; color: var(--navy); font-size: .95rem; margin-top: 12px; }
.stages .arrow { color: var(--ink-light); font-size: 1.6rem; padding-bottom: 34px; }
@media (max-width: 760px) {
  .stages { grid-template-columns: 1fr; align-items: center; }
  .stages .arrow { transform: rotate(90deg); justify-self: center; padding: 0; }
}

/* ----------  Karten-Raster der Konzept-Seite  ---------- */
.panel {
  background: var(--card-bg);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 30px;
  box-shadow: var(--shadow-sm);
}
.panel--mint { background: var(--bg-mint); }
.panel--peach { background: var(--bg-peach); }
.panel--blue { background: var(--bg-blue); }
.panel--lavender { background: var(--bg-lavender); }
.panel h2 { font-size: 1.3rem; margin-bottom: 14px; }
.panel h3 { font-size: 1.02rem; }
.panel p { font-size: .95rem; }
.panel > *:last-child { margin-bottom: 0; }

.panel-grid { display: grid; gap: 24px; margin-top: 24px; align-items: start; }
.panel-grid--3 { grid-template-columns: repeat(3, 1fr); }
/* Zweispaltige Reihen auf gleiche Kartenhöhe ziehen */
.panel-grid--2 { grid-template-columns: repeat(2, 1fr); align-items: stretch; }
.panel-grid--wide { grid-template-columns: 1.3fr 1fr; align-items: stretch; }
.panel-grid--2 .ministep img, .panel-grid--wide .ministep img { height: 76px; max-width: 120px; }

/* Bild links, Text rechts („Was Kinder lernen") */
.learn { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.learn__item { display: grid; grid-template-columns: 68px 1fr; gap: 16px; align-items: start; }
.learn__item img { width: 68px; height: 68px; object-fit: contain; object-position: center top; }
.learn__item h3 { margin-bottom: 6px; }
.learn__item p { font-size: .9rem; margin: 0; }

/* Häkchen-Liste innerhalb einer Karte */
.stark-card__list { list-style: none; display: grid; gap: 11px; margin: 12px 0 0; padding: 0; }
.stark-card__list li { display: flex; gap: 10px; align-items: flex-start; font-weight: 700; color: var(--navy-soft); font-size: .92rem; }
.stark-card__list .ico { flex: none; color: var(--green); margin-top: 2px; }

/* Abschlussband mit Maskottchen */
.closing-band { display: grid; grid-template-columns: 110px 1fr; gap: 22px; align-items: center; }
.closing-band img { width: 110px; height: auto; }
.closing-band h2 { font-size: 1.3rem; margin-bottom: 14px; }
.panel .chips { justify-content: flex-start; }
.panel .chips li { font-size: .84rem; padding: 8px 16px; }
@media (max-width: 560px) {
  .closing-band { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .panel .chips { justify-content: center; }
}

/* Kleine Schrittkette mit Icon/Bild + Beschriftung */
.ministeps { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 8px; }
.ministep { display: grid; justify-items: center; gap: 8px; width: 96px; text-align: center; }
.ministep img { height: 52px; width: auto; max-width: 88px; object-fit: contain; }
.ministep .icon-circle { width: 46px; height: 46px; margin: 0; }
.ministep .icon-circle svg { width: 22px; height: 22px; }
.ministep span { font-size: .78rem; font-weight: 800; color: var(--navy-soft); line-height: 1.25; }
.ministeps .arrow { color: var(--ink-light); align-self: center; margin-top: 12px; }
/* Nur solange die Karten wirklich dreispaltig stehen, muss die Kette einzeilig bleiben.
   Darunter ist die Karte volle Breite und darf normal umbrechen. */
@media (min-width: 1025px) {
  .panel-grid--3 .ministeps { gap: 4px; flex-wrap: nowrap; }
  .panel-grid--3 .ministep { width: 70px; }
  .panel-grid--3 .ministep img { height: 40px; max-width: 66px; }
  .panel-grid--3 .ministep .icon-circle { width: 38px; height: 38px; }
  .panel-grid--3 .ministep .icon-circle svg { width: 18px; height: 18px; }
  .panel-grid--3 .ministep span { font-size: .72rem; }
}

/* Wochenleiste Mo–So */
.weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 16px; }
.weekdays .day { display: grid; justify-items: center; gap: 6px; }
.weekdays .day b { font-size: .78rem; font-weight: 800; color: var(--navy-soft); }
.weekdays .dot {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--green); color: #fff;
  display: grid; place-items: center;
}
.weekdays .dot svg { width: 15px; height: 15px; }
.weekdays .dot--open { background: transparent; border: 2px dashed #e6c3d2; }

/* Sprechblasen-Gegenüberstellung */
.bubbles { display: grid; gap: 14px; }
.bubble {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center;
  border-radius: var(--radius); padding: 14px 18px;
}
.bubble img { width: 58px; height: 76px; object-fit: contain; object-position: center bottom; }
.bubble p { margin: 0; font-size: .92rem; font-weight: 700; color: var(--navy); }
.bubble--before { background: #fdf1f4; }
.bubble--after { background: var(--bg-mint); }

/* Hinweiszeile innerhalb einer Karte */
.panel-note {
  display: flex; gap: 12px; align-items: flex-start;
  background: rgba(255, 255, 255, .72);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-top: 18px;
  font-size: .9rem;
}
.panel-note .ico { flex: none; color: var(--purple); margin-top: 2px; }
.panel-note p { margin: 0; font-size: .9rem; }
.panel-note--green { background: var(--green-soft); }
.panel-note--green .ico { color: var(--green); }
.panel-note--blue { background: var(--bg-blue); }
.panel-note--blue .ico { color: var(--blue); }

/* Kernaussage innerhalb einer Karte */
.claim {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--navy);
  font-size: 1.02rem;
  line-height: 1.35;
}

/* Kompakte Auswahlliste (Konsum / Sparen / Aufbau) */
.choices { display: grid; gap: 12px; margin: 16px 0 0; }
.choices li { display: grid; grid-template-columns: 12px 1fr; gap: 12px; align-items: start; font-size: .92rem; }
.choices .bullet { width: 12px; height: 12px; border-radius: 50%; margin-top: 6px; }
.choices b { color: var(--navy); display: block; }

/* Belohnungs-Chips */
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tags li {
  background: rgba(255, 255, 255, .8); border: var(--border);
  border-radius: var(--radius-pill); padding: 7px 14px;
  font-weight: 800; font-size: .82rem; color: var(--navy-soft);
}

@media (max-width: 1024px) {
  .panel-grid--3 { grid-template-columns: 1fr; }
  .learn { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .panel-grid--2, .panel-grid--wide { grid-template-columns: 1fr; }
  .panel { padding: 24px 22px; }
}

/* Hinweis-Kasten */
.note-box {
  max-width: 720px;
  margin: 34px auto 0;
  background: var(--card-bg);
  border: var(--border);
  border-left: 4px solid var(--purple);
  border-radius: var(--radius);
  padding: 18px 22px;
  text-align: left;
  font-size: .95rem;
}

@media (max-width: 760px) {
  .contrast { grid-template-columns: 1fr; }
  .flow__arrow { transform: rotate(90deg); }
  .flow { flex-direction: column; }
  .flow__item { width: 100%; }
}

/* ----------  CTA banner (Jugend)  ---------- */
.cta-banner {
  background: var(--bg-blue);
  border-radius: var(--radius-lg);
  padding: 32px 40px;
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}
/* height:auto ist hier zwingend, nicht kosmetisch: Tragen die Bilder width-/
   height-Attribute (für CLS), wirken die als Darstellungsvorgabe. Das CSS
   überschreibt dann nur die Breite, die Höhe bliebe beim Attributwert stehen
   und das Bild wird gestreckt. Bei SVGs fällt das nicht auf, weil sie ihr
   Seitenverhältnis selbst wahren – beim Wechsel auf WebP schlug es sofort zu. */
.cta-banner img.helmet { width: 72px; height: auto; flex: none; }
.cta-banner .cta-text { flex: 1 1 320px; }
.cta-banner h2 { margin-bottom: 4px; font-size: 1.6rem; }
.cta-banner p { margin: 0; }
.cta-banner img.monster { width: 90px; height: auto; flex: none; margin-left: auto; }

/* ----------  Closing line  ---------- */
.closing {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--purple);
  font-size: clamp(1.2rem, 2.6vw, 1.5rem);
  padding: 40px 0 8px;
}

/* ----------  "Unser Ziel" card / testimonial aside layouts ---------- */
.aside-split { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; }

/* ----------  Footer  ---------- */
.footer { background: #fbfbfe; border-top: 1px solid #edeef4; padding: 54px 0 28px; }
.footer__grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr;
  gap: 30px;
}
.footer .brand { margin-bottom: 12px; }
.footer__about { color: var(--ink); font-size: .95rem; max-width: 280px; }
.footer__social { display: flex; gap: 12px; margin-top: 14px; }
.footer__social a {
  width: 38px; height: 38px; border-radius: 50%;
  background: #fff; border: var(--border);
  display: grid; place-items: center; color: var(--navy-soft);
}
.footer__social a:hover { color: var(--purple); border-color: var(--purple); }
.footer__col h4 { font-size: 1rem; margin-bottom: 14px; color: var(--navy); }
.footer__col a { display: block; color: var(--ink); font-weight: 600; font-size: .95rem; margin-bottom: 10px; }
.footer__col a:hover { color: var(--purple); }
.footer__bottom {
  text-align: center;
  color: var(--ink-light);
  font-size: .88rem;
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid #edeef4;
}

/* ----------  FAQ-Accordion  ---------- */
.faq { max-width: 820px; margin: 36px auto 0; display: grid; gap: 14px; }
.faq details {
  background: var(--card-bg);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.faq details[open] { border-color: var(--purple-soft); box-shadow: var(--shadow); }
.faq summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 20px 58px 20px 24px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--navy);
  line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 24px; top: 26px;
  width: 14px; height: 14px;
  border-right: 3px solid var(--purple);
  border-bottom: 3px solid var(--purple);
  transform: rotate(45deg);
  transition: transform .15s ease;
}
.faq details[open] summary::after { transform: rotate(225deg); top: 30px; }
.faq summary:hover { color: var(--purple); }
.faq summary:focus-visible { outline: 3px solid var(--purple); outline-offset: -3px; border-radius: var(--radius); }
.faq__body { padding: 0 24px 22px; font-size: .97rem; }
.faq__body p:last-child { margin-bottom: 0; }
.faq__body a { color: var(--purple); font-weight: 700; }
.faq__body a:hover { text-decoration: underline; }

/* ----------  Blog  ---------- */
.blog-hero {
  position: relative;
  overflow: hidden;
  padding-top: 44px;
}
.blog-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.blog-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 120px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 92%);
  z-index: 1;
  pointer-events: none;
}
.blog-hero__inner { position: relative; z-index: 2; padding-bottom: 120px; }
.blog-hero__panel {
  display: inline-block;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(2px);
  border-radius: var(--radius-lg);
  padding: 18px 28px;
}
.blog-hero__panel h1 { font-size: clamp(2rem, 4.5vw, 2.7rem); margin-bottom: 4px; }
.blog-hero__panel p { color: var(--purple-dark); font-weight: 800; margin: 0; }

.blog-cat-nav { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 32px; }
.blog-cat-nav a {
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  font-weight: 800;
  font-size: .92rem;
  border: 2px solid #e2e4ee;
  color: var(--navy);
  background: #fff;
}
.blog-cat-nav a:hover { border-color: var(--purple); color: var(--purple); }
.blog-cat-nav a.is-active { background: var(--purple); border-color: var(--purple); color: #fff; }

.blog-featured {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 24px;
  background: var(--bg-lavender);
  border-radius: var(--radius-lg);
  padding: 40px 44px;
  margin: -84px 0 44px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.blog-featured__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--yellow);
  color: var(--navy);
  font-weight: 800;
  font-size: .82rem;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 14px;
}
.blog-featured h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: 10px; }
.blog-featured p { color: var(--ink); margin-bottom: 20px; }
.blog-featured .btn { margin-bottom: 14px; }
.blog-featured__meta { display: block; color: var(--ink-light); font-size: .86rem; font-weight: 700; }
.blog-featured__media { position: relative; aspect-ratio: 4 / 3; }
.blog-featured__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}
/* Das Motiv ist höher als das 4:3-Feld (1024×864 bei width:92% ergäbe 77,6 %
   der Containerbreite an Höhe gegenüber 75 % verfügbarer Höhe). Mit einer
   reinen Breitenangabe ragte es oben heraus und wurde vom overflow:hidden des
   Elternelements abgeschnitten – die Köpfe fehlten. object-fit:contain passt
   das Bild in beide Richtungen ein, ohne es zu verzerren. */
.blog-featured__figure {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 16px 26px rgba(31,42,77,.25));
}

.blog-section-heading { font-size: 1.3rem; margin: 0 0 20px; }

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.blog-card__link-wrap { display: flex; flex-direction: column; flex: 1; }
.blog-card__cover { aspect-ratio: 16 / 10; background: var(--bg-lavender); overflow: hidden; }
.blog-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card__body { padding: 20px 22px 8px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.blog-card__meta-row { display: flex; align-items: center; gap: 7px; color: var(--ink-light); font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; }
.blog-card__dot { opacity: .6; }
.blog-card__title { font-size: 1.15rem; margin: 0; line-height: 1.3; }
.blog-card__excerpt { color: var(--ink); font-size: .93rem; margin: 0; flex: 1; }
.blog-card__cta { margin-top: 6px; color: var(--purple); font-weight: 800; font-size: .92rem; }
.blog-card__tag-row { padding: 0 22px 20px; }
.blog-card__kategorie {
  display: inline-flex;
  background: var(--purple-soft);
  color: var(--purple);
  font-weight: 800;
  font-size: .78rem;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
}
.blog-card__kategorie:hover { background: var(--purple); color: #fff; }

.blog-tip {
  display: flex;
  gap: 20px;
  align-items: center;
  background: var(--purple-soft);
  border-radius: var(--radius-lg);
  padding: 26px 30px;
  margin-top: 44px;
}
.blog-tip img { width: 92px; height: auto; flex: none; }
.blog-tip__label { display: block; color: var(--purple); font-weight: 800; font-size: .82rem; text-transform: uppercase; letter-spacing: .3px; margin-bottom: 4px; }
.blog-tip h3 { font-size: 1.1rem; margin-bottom: 4px; }
.blog-tip p { margin: 0; color: var(--ink); font-size: .95rem; }

.blog-empty {
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
  background: var(--bg-lavender);
  border-radius: var(--radius-lg);
  padding: 44px 32px;
}
.blog-empty h3 { font-size: 1.2rem; margin-bottom: 10px; }
.blog-empty p { color: var(--ink); margin: 0; }

.blog-article { max-width: 720px; margin: 0 auto; }
.blog-article__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--purple);
  font-weight: 800;
  font-size: .92rem;
  margin-bottom: 22px;
}
.blog-article__back:hover { text-decoration: underline; }
.blog-article__cover {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-bottom: 28px;
}
.blog-article__cover img { width: 100%; height: auto; display: block; }
.blog-article__meta { color: var(--ink-light); font-size: .9rem; font-weight: 800; margin-bottom: 8px; }
.blog-article h1 { font-size: clamp(1.9rem, 4vw, 2.5rem); margin-bottom: 28px; }
.blog-article__body { font-size: 1.03rem; line-height: 1.75; }
.blog-article__body h2 { font-size: 1.4rem; margin: 1.6em 0 .5em; }
.blog-article__body h3 { font-size: 1.15rem; margin: 1.4em 0 .5em; }
.blog-article__body p { margin: 0 0 1.1em; }
.blog-article__body ul,
.blog-article__body ol {
  list-style: revert;
  margin: 0 0 1.1em 1.3em;
  padding: 0;
  display: block;
}
.blog-article__body li { margin-bottom: .45em; }
.blog-article__body blockquote {
  border-left: 4px solid var(--purple);
  background: var(--purple-soft);
  color: var(--navy);
  font-weight: 700;
  font-size: 1.05rem;
  padding: 18px 22px;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 1.8em 0;
}
.blog-article__back + .blog-article__back { margin-top: 10px; }
.blog-figure { margin: 1.8em 0; }
.blog-figure img { width: 100%; height: auto; border-radius: var(--radius); display: block; box-shadow: var(--shadow-sm); }
.blog-figure figcaption { text-align: center; color: var(--ink-light); font-size: .85rem; margin-top: 10px; }

@media (max-width: 900px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-featured { grid-template-columns: 1fr; margin: -60px 0 40px; padding: 32px; }
  .blog-featured__media { order: -1; max-width: 360px; margin: 0 auto; }
}
@media (max-width: 700px) {
  .blog-hero__inner { padding-bottom: 90px; }
  .blog-hero__panel { padding: 14px 20px; }
}
@media (max-width: 560px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-tip { flex-direction: column; text-align: center; }
}

/* ----------  Rechtliche Seiten (Impressum, Datenschutz)  ---------- */
.legal { max-width: 780px; margin: 0 auto; }
.legal h1 { font-size: clamp(1.9rem, 4vw, 2.4rem); margin-bottom: 10px; }
.legal__lead { color: var(--ink-light); font-size: .95rem; margin-bottom: 44px; }
.legal section { margin-bottom: 38px; }
.legal section:last-child { margin-bottom: 0; }
.legal h2 { font-size: 1.25rem; margin-bottom: 12px; }
.legal h3 { font-size: 1.02rem; margin: 22px 0 8px; }
.legal p { font-size: .97rem; }
.legal a { color: var(--purple); font-weight: 700; }
.legal a:hover { text-decoration: underline; }
.legal address {
  font-style: normal;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.7;
  margin-bottom: 1em;
}
.legal__list { display: grid; gap: 10px; margin: 0 0 1em; }
.legal__list li { position: relative; padding-left: 20px; font-size: .97rem; }
.legal__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--purple);
}
.legal__toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 44px; }
.legal__toc a {
  background: var(--purple-soft);
  color: var(--purple);
  border-radius: var(--radius-pill);
  padding: 7px 15px;
  font-size: .85rem;
  font-weight: 800;
}
.legal__toc a:hover { background: var(--purple); color: #fff; text-decoration: none; }
.legal table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
  margin-bottom: 1em;
}
.legal th, .legal td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid #ececf3;
  vertical-align: top;
}
.legal th { color: var(--navy); font-weight: 800; background: var(--bg-lavender); }
.legal__meta {
  background: var(--bg-lavender);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin-bottom: 1em;
}
.legal__meta p:last-child { margin-bottom: 0; }
.legal__meta b { color: var(--navy); }
.legal code {
  background: var(--purple-soft);
  color: var(--purple);
  border-radius: 6px;
  padding: 1px 6px;
  font-size: .88em;
}
.legal .btn { margin: 0 10px 10px 0; }

/* ----------  Consent-Banner (§ 25 TDDDG)  ---------- */
.consent {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 200;
  width: calc(100% - 32px);
  max-width: 680px;
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 24px 26px;
}
.consent h2 { font-size: 1.15rem; margin-bottom: 8px; }
.consent p { font-size: .92rem; margin-bottom: 16px; }
.consent a { color: var(--purple); font-weight: 700; }
.consent a:hover { text-decoration: underline; }
.consent__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.consent__actions .btn { flex: 1 1 160px; justify-content: center; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .grid--6 { grid-template-columns: repeat(3, 1fr); }
  .footer__grid { grid-template-columns: repeat(4, 1fr); }
  .footer__about { grid-column: 1 / -1; max-width: none; }
}

@media (max-width: 900px) {
  .section { padding: 56px 0; }
  .hero__inner { grid-template-columns: 1fr; text-align: center; }
  .hero__lead, .hero .checklist, .hero .quote-card { margin-left: auto; margin-right: auto; }
  .hero .quote-card { text-align: left; }
  .hero__cta, .hero__badges, .hero__note { justify-content: center; }
  .hero .checklist li { justify-content: center; }
  .hero__art { order: -1; max-width: 560px; margin: 0 auto; }
  .split { grid-template-columns: 1fr; gap: 28px; }
  .split--rev .split__media { order: 0; }
  .aside-split { grid-template-columns: 1fr; }
  .goal-row { grid-template-columns: 1fr; }
  .col3 { grid-template-columns: 1fr; gap: 24px; }
  .benefits { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .reward-icons { grid-template-columns: repeat(3, 1fr); }
  .progression { grid-template-columns: 1fr; }
  .progression .arrow { transform: rotate(90deg); justify-self: center; }
  .beforeafter { grid-template-columns: 1fr; }
  .beforeafter .arrow { transform: rotate(90deg); justify-self: center; }
  .pricing { grid-template-columns: 1fr; }
  .plan--featured { order: -1; }
  .goal-card { max-width: none; }
}

@media (max-width: 760px) {
  /* Nav → Hamburger */
  .nav__toggle { display: block; }
  .nav__inner { position: relative; flex-wrap: wrap; }
  .nav__links, .nav__actions { display: none; }
  .nav__panel {                 /* dropdown wrapper revealed when open */
    display: none;
    position: absolute;
    top: 74px; left: 0; right: 0;
    background: #fff;
    padding: 20px 24px 24px;
    border-bottom: 1px solid #eee;
    box-shadow: var(--shadow);
  }
  .nav.is-open .nav__panel { display: block; }
  .nav.is-open .nav__panel .nav__links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    margin: 0 0 18px;
  }
  .nav.is-open .nav__panel .nav__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  /* Im aufgeklappten Menü bleibt der Umschalter waagerecht statt sich wie
     die Buttons über die volle Breite zu strecken. */
  .nav.is-open .nav__panel .lang-switch { align-self: flex-start; }
  .nav.is-open .nav__panel .nav__actions .btn { width: 100%; }
  .steps, .steps--3 { grid-template-columns: 1fr; gap: 26px; }
  .step:not(:last-child)::after { display: none; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .section { padding: 44px 0; }
  /* Lange Button-Beschriftungen dürfen auf dem Handy umbrechen statt zu überlaufen */
  .btn { white-space: normal; text-align: center; line-height: 1.25; max-width: 100%; }
  .btn-lg { padding: 15px 24px; font-size: 1rem; }
  .grid--6, .grid--4, .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .benefits { grid-template-columns: 1fr; }
  .reward-icons { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .cta-banner { padding: 26px 22px; }
  .cta-banner img.monster { margin: 0 auto; }
  /* Der laengste Haekchen-Punkt fuellte die Zeile bis an beide Kanten aus. Auf dem
     Handy stehen die Punkte deshalb linksbuendig untereinander, der Block als
     Ganzes bleibt mittig. Kein fit-content: das waere max-content und wuerde den
     Umbruch verhindern, statt Luft zu schaffen. */
  .hero .checklist { max-width: 320px; }
  .hero .checklist li { justify-content: flex-start; text-align: left; }
}

/* ==========================================================================
   Installations-Assistent (installieren.html / en/install.html)
   Ohne JavaScript sind alle Plattformen und Schritte sichtbar und lesbar;
   js/install-guide.js setzt .is-enhanced und macht daraus den Schritt-für-
   Schritt-Ablauf. Deshalb steht die Wizard-Logik komplett unter .is-enhanced.
   ========================================================================== */

.guide-intro { max-width: 720px; margin: 0 auto 8px; text-align: center; }
.guide-intro p { color: var(--ink); }

/* ---- Plattformauswahl ---- */
.guide-pick {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 860px;
  margin: 32px auto 0;
}
.guide-pick__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 26px 18px;
  background: var(--card-bg);
  border: 2px solid #ececf3;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 800;
  color: var(--navy);
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, transform .15s;
}
.guide-pick__btn:hover { border-color: var(--purple); transform: translateY(-2px); }
.guide-pick__btn[aria-pressed="true"] { border-color: var(--purple); background: var(--purple-soft); }
.guide-pick__btn svg { width: 34px; height: 34px; color: var(--purple); }
.guide-pick__btn small { display: block; font-weight: 700; color: var(--ink-light); font-size: .84rem; }

/* ---- Fortschritt ---- */
.guide__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.guide__count { font-weight: 800; color: var(--ink-light); font-size: .9rem; }
.guide__bar { height: 8px; border-radius: var(--radius-pill); background: #ececf3; overflow: hidden; }
.guide__bar i { display: block; height: 100%; width: 0; background: var(--purple); border-radius: inherit; transition: width .25s; }

/* ---- Ein Schritt ---- */
.guide-step {
  background: var(--card-bg);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 30px 32px;
  margin-top: 20px;
}
.guide-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--purple);
  color: #fff;
  font-weight: 800;
  margin-bottom: 14px;
}
.guide-step h3 { font-size: 1.25rem; margin-bottom: 10px; }
.guide-step > p { color: var(--ink); }
.guide-step__hint {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--bg-blue);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-top: 14px;
  font-size: .94rem;
  color: var(--navy-soft);
}
.guide-step__hint svg { flex: none; width: 18px; height: 18px; color: var(--blue); margin-top: 2px; }

/* ---- Hilfe-Ausklapper je Schritt ---- */
.guide-help { margin-top: 18px; border-top: 1px dashed #e2e4ee; padding-top: 14px; }
.guide-help > p { font-weight: 800; color: var(--navy); font-size: .95rem; margin-bottom: 8px; }
.guide-help details {
  border: var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  background: #fcfcff;
}
.guide-help summary {
  cursor: pointer;
  padding: 11px 14px;
  font-weight: 700;
  color: var(--navy-soft);
  font-size: .94rem;
  list-style: none;
}
.guide-help summary::-webkit-details-marker { display: none; }
.guide-help summary::before { content: '?'; display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-right: 9px; border-radius: 50%;
  background: var(--purple-soft); color: var(--purple); font-size: .78rem; font-weight: 800; }
.guide-help details[open] summary { color: var(--purple); }
.guide-help div { padding: 0 14px 13px 41px; color: var(--ink); font-size: .94rem; }
.guide-help div p + p { margin-top: 8px; }

/* ---- Navigation zwischen den Schritten ---- */
.guide__nav { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 22px; }
.guide__back {
  background: none; border: none; padding: 0;
  font-family: inherit; font-weight: 800; font-size: .95rem;
  color: var(--ink-light); cursor: pointer;
}
.guide__back:hover { color: var(--purple); }

/* ---- Abschluss ---- */
.guide-done { text-align: center; padding: 40px 32px; }
.guide-done img { width: 120px; height: auto; margin: 0 auto 18px; }
.guide-done h3 { font-size: 1.5rem; margin-bottom: 10px; }
.guide-done p { color: var(--ink); max-width: 460px; margin: 0 auto 20px; }

/* ---- Nur mit JavaScript: echter Assistent ---- */
.is-enhanced .guide-platform { display: none; }
.is-enhanced .guide-platform.is-active { display: block; }
.is-enhanced .guide-step { display: none; }
.is-enhanced .guide-step.is-current { display: block; }
.is-enhanced .guide-done { display: none; }
.is-enhanced .guide-done.is-current { display: block; }
/* Ohne JS braucht es keine Fortschrittsanzeige und keine Weiter-Knöpfe. */
.guide__head, .guide__nav { display: none; }
.is-enhanced .guide__head { display: flex; }
.is-enhanced .guide__nav { display: flex; }
.is-enhanced .guide-platform__all { display: none; }

@media (max-width: 860px) {
  .guide-pick { grid-template-columns: 1fr; max-width: 420px; }
  .guide-step { padding: 24px 20px; }
  .guide-help div { padding-left: 14px; }
}

/* ---- Kita & Schule: Einsatzorte und Geräteansicht ---- */
.place-card__img {
  width: 100%;
  height: 150px;
  object-fit: contain;
  object-position: center bottom;
  margin-bottom: 16px;
}
/* Tablet und Handy nebeneinander, das Handy überlappt leicht – wie im Entwurf.
   Beide Bilder bekommen feste Anteile, damit nichts verzerrt oder überläuft. */
.kita-devices { display: flex; align-items: flex-end; gap: 0; }
.kita-devices img:first-child { width: 74%; height: auto; }
.kita-devices img:last-child { width: 26%; height: auto; margin-left: -4%; }
@media (max-width: 860px) {
  .place-card__img { height: 130px; }
}

/* ---- Hinweisband: Konzept-Seite -> Kita & Schule ---- */
.promo-band {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: 36px;
  background: var(--card-bg);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 34px 38px;
  overflow: hidden;
}
.promo-band__img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}
.promo-band h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); margin-bottom: 10px; }
.promo-band p { color: var(--ink); }
.promo-band__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 0 0 20px;
}
.promo-band__list li {
  background: var(--purple-soft);
  color: var(--purple-dark);
  font-weight: 800;
  font-size: .84rem;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
}
@media (max-width: 860px) {
  .promo-band { grid-template-columns: 1fr; padding: 26px 22px; gap: 22px; }
}

/* ---- Blog: Empfehlungszeile "unbedingt lesen" ---- */
.blog-section-heading--must {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 44px;
}
.blog-must-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--navy);
  font-size: .9rem;
  line-height: 1;
}

/* ==========================================================================
   Kita & Schule: Preis und Einstieg in den Finanzierungshelfer
   ========================================================================== */

/* ---- Preis ---- */
.price-card {
  max-width: 460px;
  margin: 0 auto;
  background: var(--card-bg);
  border: 2px solid var(--purple-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 32px 34px;
  text-align: center;
}
.price-card__label { font-weight: 800; color: var(--purple); margin-bottom: 6px; }
.price-card__price { font-family: var(--font-display); color: var(--navy); margin-bottom: 4px; }
.price-card__price b { font-size: 2.6rem; line-height: 1; }
.price-card__price span { color: var(--ink-light); font-weight: 700; font-size: 1rem; }
.price-card__note { color: var(--ink-light); font-size: .88rem; margin-top: 14px; }
.price-card .features { text-align: left; margin: 22px 0; }
.price-card__actions { display: grid; gap: 10px; }

/* ---- Finanzierung: Einstiegskarte mit Mini-Formular ---- */
.financing-start {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: start;
  background: var(--card-bg);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 32px 36px;
}
.financing-form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 800; color: var(--navy); font-size: .92rem; }
.field select,
.field input {
  font-family: inherit;
  font-size: 1rem;
  color: var(--navy);
  background: var(--white);
  border: 2px solid #e2e4ee;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  width: 100%;
}
.field select:focus,
.field input:focus { outline: 3px solid var(--purple-soft); border-color: var(--purple); }
.field__hint { color: var(--ink-light); font-size: .84rem; }

/* ---- Ergebnis nach dem Absenden ---- */
.financing-result {
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-top: 20px;
  border-left: 5px solid var(--purple);
  background: var(--bg-lavender);
}
.financing-result--ready { border-left-color: var(--green); background: var(--green-soft); }
.financing-result--pending { border-left-color: var(--yellow); background: var(--bg-peach); }
.financing-result--soon { border-left-color: var(--blue); background: var(--bg-blue); }
.financing-result h3 { font-size: 1.1rem; margin-bottom: 6px; }
.financing-result p { color: var(--ink); margin-bottom: 14px; }
.financing-result p:empty { display: none; }
.financing-result__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.financing-result__actions:empty { display: none; }

/* ---- Vorschau auf den Finanzierungshelfer ---- */
.financing-preview {
  max-width: 560px;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: var(--border);
  background: var(--white);
}
.financing-preview__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f1f2f8;
  padding: 10px 14px;
}
.financing-preview__bar i {
  width: 10px; height: 10px; border-radius: 50%;
  background: #d5d8e6; display: block;
}
.financing-preview__body { padding: 24px 26px; }
.financing-preview__meta {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;
}
.financing-preview__meta span {
  background: var(--purple-soft); color: var(--purple-dark);
  font-weight: 800; font-size: .82rem;
  padding: 5px 12px; border-radius: var(--radius-pill);
}
.financing-preview__steps { display: grid; gap: 10px; margin: 16px 0 0; }
.financing-preview__steps li {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; color: var(--navy-soft); font-size: .95rem;
}
.financing-preview__steps .mark {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 800;
  background: #ececf3; color: var(--ink-light);
}
.financing-preview__steps .is-done .mark { background: var(--green); color: #fff; }
.financing-preview__caption {
  text-align: center; color: var(--ink-light);
  font-size: .84rem; margin-top: 14px;
}

/* ---- Dezenter Hinweis ---- */
.financing-disclaimer {
  max-width: 720px; margin: 26px auto 0;
  text-align: center; color: var(--ink-light); font-size: .84rem;
}

@media (max-width: 860px) {
  .financing-start { grid-template-columns: 1fr; padding: 24px 20px; gap: 22px; }
  .price-card { padding: 26px 22px; }
  .price-card__price b { font-size: 2.2rem; }
}

/* Die Häkchenliste war nur für .plan gestylt. Ohne diese Regeln steht das
   SVG durch die globale Regel img,svg{display:block} über dem Text statt
   daneben. */
.price-card ul.features { display: grid; gap: 12px; margin: 22px 0; text-align: left; }
.price-card ul.features li {
  display: flex; gap: 10px; align-items: flex-start;
  font-weight: 700; color: var(--navy-soft); font-size: .96rem;
}
.price-card ul.features li .ico { flex: none; color: var(--green); margin-top: 2px; }
.price-card__per {
  font-weight: 800; color: var(--purple);
  margin: 2px 0 0;
}

/* ---- Preis: Rechenbeispiele ---- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.price-examples__title { text-align: center; margin: 44px 0 18px; font-size: 1.25rem; }
.price-table-wrap { max-width: 620px; margin: 0 auto; overflow-x: auto; }
.price-table {
  width: 100%; border-collapse: collapse;
  background: var(--card-bg);
  border: var(--border); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm);
}
.price-table th, .price-table td {
  padding: 13px 16px; text-align: left;
  border-bottom: 1px solid #ececf3; font-size: .95rem;
}
.price-table thead th {
  background: var(--bg-lavender); color: var(--navy);
  font-family: var(--font-display); font-weight: 600;
}
.price-table tbody th { font-weight: 700; color: var(--navy-soft); }
.price-table td { color: var(--ink); }
.price-table td:last-child, .price-table th:last-child { text-align: right; white-space: nowrap; }
.price-table tbody tr:last-child th, .price-table tbody tr:last-child td { border-bottom: 0; }
.price-table b { color: var(--navy); }
.price-table__mark { color: var(--purple); font-weight: 800; }
.price-examples__note {
  max-width: 620px; margin: 14px auto 0;
  text-align: center; color: var(--ink-light); font-size: .86rem; line-height: 1.6;
}
.addon { display: flex; gap: 18px; align-items: flex-start; }
.addon .icon-circle { flex: none; }
.addon h3 { font-size: 1.15rem; margin-bottom: 8px; }
@media (max-width: 560px) {
  .addon { flex-direction: column; gap: 12px; }
  .price-table th, .price-table td { padding: 11px 12px; font-size: .9rem; }
}

/* ---- Preisbereich mit drei Tarifen ---- */
.pricing--3 { grid-template-columns: repeat(3, 1fr); gap: 22px; }
.plan__icon {
  width: 92px; height: 92px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--purple-soft);
  display: flex; align-items: center; justify-content: center;
}
.plan__icon img { width: 64px; height: auto; }
.plan--featured .plan__icon { background: #fff3d6; }
.plan__sub {
  text-align: center; color: var(--ink);
  font-size: .95rem; margin-bottom: 16px; min-height: 2.6em;
}
/* Die Tarifbilder liegen als 3:2 vor. Eine feste Höhe ergab ein deutlich
   breiteres Kästchen (rund 1,76:1), weshalb object-fit: cover oben und unten
   abgeschnitten hat. Mit aspect-ratio passt der Ausschnitt exakt. */
.plan__photo {
  width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover;
  border-radius: var(--radius); margin-bottom: 18px;
}
/* price-jugend.webp ist als einziges quadratisch und würde im 3:2-Kästchen
   oben und unten beschnitten. Der Ausschnitt sitzt tiefer, damit Kopf und
   Oberkörper vollständig im Bild bleiben. */
.plan__photo[src$="price-jugend.webp"] { object-position: center 30%; }
.plan__hint {
  display: flex; gap: 10px; align-items: flex-start;
  background: #fff8e6; border-radius: var(--radius-sm);
  padding: 10px 12px; margin-bottom: 12px;
}
.plan__hint img { width: 32px; height: auto; flex: none; }
.plan__hint b { display: block; color: var(--navy); font-size: .93rem; }
.plan__hint span { color: var(--ink); font-size: .86rem; }
.plan__bonus {
  display: flex; gap: 12px; align-items: center;
  background: var(--bg-peach); border-radius: var(--radius-sm);
  padding: 11px 14px; margin: 16px 0;
}
.plan__bonus img { width: 34px; height: auto; flex: none; }
.plan__bonus small { display: block; color: var(--ink-light); font-weight: 700; font-size: .82rem; }
.plan__bonus b { color: var(--navy); font-size: .95rem; }
.plan__permonth { text-align: center; color: var(--ink-light); font-size: .88rem; margin-bottom: 16px; }

/* Vertrauenszeile unter den Tarifen */
.trust-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 18px; margin-top: 28px;
}
/* Nur die Karten selbst, nicht jedes div darin: ohne den Kindselektor traf
   diese Regel auch .icon-circle und verpasste dem Symbolkreis Polsterung,
   weissen Grund und eckige Ecken - das Symbol schrumpfte auf einen Punkt. */
.trust-row > div {
  display: flex; gap: 12px; align-items: center;
  background: var(--card-bg); border: var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 14px 18px;
}
/* margin aus der Basisregel zuruecksetzen - in der schmalen Zeile wuerde
   margin:0 auto 16px das Symbol verschieben. */
.trust-row .icon-circle { flex: none; width: 46px; height: 46px; margin: 0; }
.trust-row .icon-circle svg { width: 24px; height: 24px; stroke-width: 2.2; }
.trust-row b { display: block; color: var(--navy); font-size: .95rem; }
.trust-row span { color: var(--ink-light); font-size: .85rem; }

@media (max-width: 900px) {
  .pricing--3 { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .trust-row { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .plan__sub { min-height: 0; }
}

/* ==========================================================================
   Lernen-Seite
   ========================================================================== */
.lnote {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--card-bg); border: var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 16px 18px; margin: 20px 0 4px; max-width: 480px;
}
.lnote img { width: 34px; height: auto; flex: none; }
.lnote b { display: block; color: var(--navy); font-family: var(--font-display); margin-bottom: 4px; }
.lnote span { color: var(--ink); font-size: .94rem; }

.lstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.lstat {
  text-align: center; background: var(--card-bg); border: var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 22px 16px;
}
.lstat img { width: 40px; height: auto; margin: 0 auto 10px; }
.lstat b { display: block; font-family: var(--font-display); font-size: 1.8rem; color: var(--purple); line-height: 1; }
.lstat strong { display: block; color: var(--navy); font-size: .95rem; margin: 6px 0 2px; }
.lstat span { color: var(--ink-light); font-size: .84rem; }

.lmissions, .lcomp { display: grid; gap: 14px; }
.lmission, .lcomp li { display: flex; gap: 14px; align-items: center; }
.lmission img, .lcomp img { width: 38px; height: auto; flex: none; }
.lmission div, .lcomp div { flex: 1; min-width: 0; }
.lmission b, .lcomp b { display: block; color: var(--navy); font-size: .98rem; }
.lmission span { display: block; color: var(--ink-light); font-size: .86rem; }
.lmission__tag {
  display: inline-block !important; background: var(--purple-soft); color: var(--purple-dark);
  font-size: .74rem; font-weight: 800; padding: 2px 9px; border-radius: var(--radius-pill);
  margin-left: 6px; vertical-align: middle;
}
.lmission__count { flex: none; font-weight: 800; color: var(--navy-soft); font-size: .9rem; }
.lbar { display: block !important; height: 7px; border-radius: 99px; background: #ececf3; margin-top: 7px; overflow: hidden; }
.lbar i { display: block; height: 100%; background: var(--purple); border-radius: inherit; }
.lsub { color: var(--ink-light); font-size: .9rem; margin-bottom: 14px; }

/* „Fokus statt Druck" ist der Blickfang der rechten Spalte, war als flaches
   hellblaues Feld mit kleinem Monster aber kaum zu bemerken. */
.panel--focus {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, #f5f1ff 0%, #eaf1ff 100%);
  border: 1px solid #e2daff;
  text-align: center;
  padding: 32px 26px 28px;
}
/* weicher Lichtschein hinter dem Monster */
.panel--focus::before {
  content: '';
  position: absolute; top: -70px; left: 50%; transform: translateX(-50%);
  width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle, rgba(123, 92, 255, .20) 0%, rgba(123, 92, 255, 0) 70%);
}
.panel--focus > * { position: relative; }
.panel--focus img { width: 170px; height: auto; margin: 0 auto 16px; }
.panel--focus h3 { font-size: 1.35rem; color: var(--purple); margin-bottom: 10px; }
.panel--focus p { font-size: .96rem; }
.panel--focus .focus-badge {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 16px 0 0; padding: 7px 15px;
  background: var(--card-bg); border: 1px solid #e2daff;
  border-radius: var(--radius-pill); box-shadow: var(--shadow-sm);
  font-family: var(--font-display); font-weight: 600; font-size: .84rem;
  color: var(--purple);
}
.panel--focus .focus-badge img { width: 18px; margin: 0; }

.lencourage { display: flex; gap: 20px; align-items: flex-start; }
.lencourage img { width: 70px; height: auto; flex: none; }
.lencourage h3 { font-size: 1.2rem; margin-bottom: 6px; }
.lnote-inline {
  display: flex; gap: 10px; align-items: center;
  background: var(--card-bg); border-radius: var(--radius-sm);
  padding: 10px 14px; margin: 12px 0 0; color: var(--navy-soft); font-weight: 700; font-size: .92rem;
}
.lnote-inline img { width: 24px; height: auto; flex: none; }

/* Das Zitat steht bereits IM Bild. Früher lag zusätzlich ein HTML-Text darüber –
   der Spruch erschien dadurch doppelt. Der Text bleibt im Markup, wird auf
   breiten Schirmen aber ausgeblendet und dient dort nur noch der Zugänglichkeit.
   Auf schmalen Schirmen wäre die eingebrannte Schrift zu klein; dort tauschen
   wir Bild gegen Text. */
.lquote { margin: 28px 0 0; border-radius: var(--radius-lg); overflow: hidden; }
/* Kein object-fit und keine feste Höhe: die beiden Sprachfassungen haben
   unterschiedliche Seitenverhältnisse (DE 1030×168, EN 1500×297). Die
   width/height-Attribute am <img> halten den Platz, height:auto verhindert
   das Strecken. */
.lquote img { width: 100%; height: auto; display: block; }
.lquote blockquote,
.lquote figcaption {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

@media (max-width: 900px) { .lstats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .lstats { grid-template-columns: 1fr; }
  .lencourage { flex-direction: column; gap: 12px; }
  /* Schmaler Schirm: eingebrannte Schrift wäre unlesbar – Bild raus, Text rein. */
  .lquote { background: var(--bg-blue); padding: 22px 20px; text-align: center; }
  .lquote img { display: none; }
  .lquote blockquote {
    position: static; width: auto; height: auto; margin: 0 0 8px; padding: 0;
    overflow: visible; clip-path: none; white-space: normal;
    font-family: var(--font-display); font-size: 1.15rem; color: var(--navy);
  }
  .lquote figcaption {
    position: static; width: auto; height: auto; margin: 0; padding: 0;
    overflow: visible; clip-path: none; white-space: normal;
    color: var(--ink-light); font-weight: 700; font-size: .88rem;
  }
}