@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans Tamil";
  src: url("/assets/fonts/noto-sans-tamil-400-900.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  unicode-range: U+0964-0965, U+0B82-0BFA, U+200C-200D, U+20B9, U+25CC;
}

:root {
  --color-page: #f7f8f6;
  --color-surface: #ffffff;
  --color-soft: #eef4ef;
  --color-ink: #17231c;
  --color-muted: #667269;
  --color-primary: #195b3a;
  --color-primary-dark: #10442a;
  --color-accent: #c59b4a;
  --color-accent-soft: #fff6df;
  --color-border: #dce4de;
  --color-danger: #9d2f2f;
  --color-warning: #9a6510;
  --color-success: #1f6c42;
  --color-paper: #ffffff;
  --color-graphite: #17231c;
  --color-black-22: rgba(0, 0, 0, 0.22);
  --color-badge-accent-soft: rgba(124, 58, 237, 0.32);
  --shadow-soft: 0 18px 42px rgba(24, 55, 37, 0.08);
  --shadow-panel: 0 24px 58px rgba(16, 68, 42, 0.18);
  --radius: 8px;
  --container: 1180px;
  --duration-base: 180ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --section-y: clamp(58px, 5.4vw, 86px);
  --section-y-tight: clamp(26px, 3vw, 42px);
  --section-y-mobile: 56px;
  --font-sans: Inter, "Noto Sans Tamil", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-tamil: "Noto Sans Tamil", Inter, ui-sans-serif, system-ui, sans-serif;
  --weight-regular: 400;
  --weight-medium: 520;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 780;
  --leading-body: 1.62;
  --leading-tight: 1.08;
  --leading-dark: 1.68;
  --text-caption: 0.8rem;
  --text-small: 0.9rem;
  --text-body: 1rem;
  --text-lead: 1.1rem;
  --text-card: 1.24rem;
  --text-panel: clamp(2.15rem, 3vw, 3rem);
  --text-section: clamp(2rem, 2.7vw, 2.7rem);
  --text-page: clamp(3rem, 5vw, 4.35rem);
  --text-hero: clamp(3.6rem, 6.2vw, 5.35rem);
}

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

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

body {
  margin: 0;
  background: var(--color-page);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  font-kerning: normal;
  font-optical-sizing: auto;
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
}

.page--ta {
  font-family: var(--font-tamil);
  line-height: 1.72;
}

body.has-nav-open {
  overflow: hidden;
}

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

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid rgba(197, 155, 74, 0.9);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100;
  transform: translateY(-140%);
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--color-primary-dark);
  color: #fff;
  font-weight: var(--weight-bold);
  transition: transform var(--duration-base) var(--ease-out);
}

.skip-link:focus {
  transform: translateY(0);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.visually-hidden input {
  width: 1px;
  min-height: 1px;
  padding: 0;
  border: 0;
}

.container {
  width: min(calc(100% - clamp(24px, 4vw, 48px)), var(--container));
  margin-inline: auto;
}

.container--narrow {
  max-width: 820px;
}

.container--form {
  max-width: 900px;
}

.section {
  padding: var(--section-y) 0;
}

.section--first {
  padding-top: var(--section-y-tight);
}

.page-hero + .section--first {
  padding-top: var(--section-y);
  background: color-mix(in srgb, var(--color-soft) 90%, var(--color-primary) 10%);
  border-top: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
}

.section--soft {
  background: var(--color-soft);
}

/* Align the second section so it doesn't sit too far below the first on subpages */
.page--topic .section--first + .section--soft {
  padding-top: var(--section-y-tight);
}

/* Disclaimer split-band sections (entwickeln, investieren) need more top room */
.page--topic .section--first + .section--soft:has(.split-band) {
  padding-top: calc(var(--section-y-tight) * 2);
}

.section--closing-cta {
  padding-top: 0;
}

/* A closing CTA after a colored section needs matching top room (wissen, kaufen) */
.section--first + .section--closing-cta,
.section--soft + .section--closing-cta {
  padding-top: var(--section-y);
}

.section-head {
  max-width: 760px;
  margin-bottom: clamp(30px, 4vw, 52px);
}

.section-head h2,
.page-hero h1,
.hero h1,
.cta-band h2,
.split-band h2 {
  margin: 0;
  line-height: var(--leading-tight);
  font-weight: var(--weight-black);
  letter-spacing: 0;
  overflow-wrap: normal;
  text-wrap: balance;
}

.hero h1 {
  max-width: 780px;
  font-size: var(--text-hero);
  line-height: 1.02;
}

.page-hero h1 {
  max-width: 820px;
  font-size: var(--text-page);
  overflow-wrap: anywhere;
}

.section-head h2,
.cta-band h2,
.split-band h2 {
  font-size: var(--text-section);
}

.section-head p,
.page-hero p,
.hero p,
.split-band p,
.cta-band p {
  max-width: 68ch;
  margin: 14px 0 0;
  color: var(--color-muted);
  font-size: var(--text-lead);
  line-height: 1.68;
  text-wrap: pretty;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  color: var(--color-primary);
  font-size: var(--text-small);
  font-weight: var(--weight-bold);
  line-height: 1.15;
  margin-bottom: 12px;
}

.icon {
  display: inline-block;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The two-house icon is scaled up past its viewBox to fill the badge; allow it to show */
.icon--houses {
  overflow: visible;
}

.button {
  position: relative;
  min-height: 46px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 18px;
  font-weight: var(--weight-bold);
  line-height: 1.1;
  text-align: center;
  /* Cap-trim the label so it centers on its cap height and aligns with the icon,
     consistently across engines (Safari included). */
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  transition: background var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}

.button:hover {
  transform: translateY(-1px);
}

.button:active {
  transform: translateY(0) scale(0.985);
}

.button.is-loading {
  color: transparent;
  pointer-events: none;
}

.button.is-loading::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(25, 91, 58, 0.24);
  border-top-color: var(--color-primary);
  border-radius: 999px;
  animation: veedu-spin 720ms linear infinite;
}

.button--primary.is-loading::after {
  border-color: rgba(255, 255, 255, 0.28);
  border-top-color: var(--color-surface);
}

.button.is-success {
  animation: veedu-button-confirm 420ms var(--ease-out-expo);
}

.button.is-error {
  animation: veedu-button-error 280ms var(--ease-out);
}

.button--primary {
  background: var(--color-primary);
  color: var(--color-surface);
  box-shadow: 0 14px 28px rgba(25, 91, 58, 0.18);
}

.button--primary:hover,
.button--primary:focus-visible {
  background: var(--color-primary-dark);
  color: var(--color-surface);
}

.button--secondary {
  background: var(--color-surface);
  color: var(--color-ink);
  border-color: var(--color-border);
}

.button--secondary:hover,
.button--secondary:focus-visible {
  background: var(--color-soft);
  border-color: color-mix(in srgb, var(--color-primary) 44%, var(--color-border) 56%);
  color: var(--color-primary-dark);
}

.button--light {
  background: var(--color-surface);
  color: var(--color-primary-dark);
}

.button--light:hover,
.button--light:focus-visible {
  background: var(--color-accent-soft);
  color: var(--color-primary-dark);
}

.button--sm {
  padding: 10px 14px;
  min-height: 46px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(247, 248, 246, 0.94);
  border-bottom: 1px solid rgba(220, 228, 222, 0.9);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  transform: translateY(0);
  transition:
    transform 240ms var(--ease-out),
    background-color var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
  will-change: transform;
}

.site-header--hidden {
  transform: translateY(calc(-100% - 1px));
}

.site-header:focus-within,
body.has-nav-open .site-header {
  transform: translateY(0);
}

.site-header__inner {
  min-height: 76px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
}

/* Tamil nav labels are long — collapse the inline nav into the menu button at all
   widths (the lang switcher + CTA button stay). */
.page--ta .site-header__inner {
  grid-template-columns: auto 1fr;
}
.page--ta .site-nav {
  display: none;
}
.page--ta .nav-toggle {
  display: inline-grid;
  place-items: center;
}
/* The mobile-nav panel styling normally lives inside the max-width:1250px media
   query. On Tamil pages the nav is collapsed at ALL widths, so the panel must be
   able to render on desktop too — replicate the panel rules unscoped by width. */
.page--ta .mobile-nav {
  position: fixed;
  left: 16px;
  right: 16px;
  top: 86px;
  max-height: calc(100svh - 104px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: grid;
  gap: 8px;
  padding: 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, -10px, 0) scale(0.985);
  transform-origin: top right;
  visibility: hidden;
  will-change: opacity, transform;
  transition:
    opacity 220ms var(--ease-out),
    transform 280ms var(--ease-out),
    visibility 0s linear 280ms;
}
.page--ta .mobile-nav[hidden] {
  display: none;
}
.page--ta .mobile-nav.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
  visibility: visible;
  transition:
    opacity 180ms var(--ease-out),
    transform 280ms var(--ease-out),
    visibility 0s linear 0s;
}
.page--ta .mobile-nav a {
  min-height: 46px;
  display: flex;
  align-items: center;
  border-radius: var(--radius);
  padding: 10px 8px;
  font-weight: var(--weight-bold);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  min-width: 0;
  transition: color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}

.brand:hover,
.brand:focus-visible {
  transform: translateY(-1px);
}

.brand:hover .brand__name,
.brand:focus-visible .brand__name {
  color: var(--color-primary-dark);
}

.brand:hover .brand__tag,
.brand:focus-visible .brand__tag {
  color: var(--color-primary);
}

.brand:hover .brand__mark,
.brand:focus-visible .brand__mark {
  background: var(--color-primary-dark);
  box-shadow: 0 14px 30px rgba(25, 91, 58, 0.26);
}

.brand__mark {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  background: var(--color-primary);
  color: #fff;
  font-weight: var(--weight-black);
  font-size: 1.05rem;
  box-shadow: 0 10px 24px rgba(25, 91, 58, 0.2);
  transition: background var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}

/* The box is centered (via .brand align-items:center) against the full two-line
   wordmark block (VEEDU + tagline). Both lines are cap/leading-trimmed so the
   block's height is the real glyph extent — identical in every engine. */
.brand__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Trim the wordmark and the box's V to their cap height so vertical position is
   derived from the font's cap metric (identical in every engine), not each
   engine's line-box/leading interpretation — fixes the few-px-high drift in
   macOS Safari (Core Text) vs Chrome, for both the wordmark and the V. */
.brand__name {
  font-size: 1.16rem;
  font-weight: var(--weight-black);
  line-height: 1;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.brand__mark-glyph {
  line-height: 1;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* Fallback for engines without text-box-trim (Firefox, older Safari/Chrome):
   capsize-style leading-trim via collapsed table margins. */
@supports not (text-box-edge: cap alphabetic) {
  .brand__name::before,
  .brand__tag::before,
  .brand__mark-glyph::before {
    content: "";
    display: table;
    margin-bottom: -0.142em;
  }
  .brand__name::after,
  .brand__tag::after,
  .brand__mark-glyph::after {
    content: "";
    display: table;
    margin-top: -0.142em;
  }
}

.brand__tag {
  margin-top: 6px;
  color: var(--color-muted);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  line-height: 1;
  white-space: nowrap;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* Tamil uses a non-Latin script: the Latin cap-height trim doesn't apply, and the
   brand shows only the Tamil wordmark (வீடு) with no tagline line beneath it.
   Disable the cap trim so the Tamil glyphs center naturally against the box. */
.page--ta .brand__tag {
  display: none;
}
.page--ta .brand__name,
.page--ta .brand__mark-glyph {
  text-box-trim: none;
  text-box-edge: auto;
}
@supports not (text-box-edge: cap alphabetic) {
  .page--ta .brand__name::before,
  .page--ta .brand__name::after,
  .page--ta .brand__mark-glyph::before,
  .page--ta .brand__mark-glyph::after {
    content: none;
  }
}

.site-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  min-width: max-content;
  font-size: 0.91rem;
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

.site-nav a,
.mobile-nav a,
.language-switcher a {
  white-space: nowrap;
  transition:
    color var(--duration-base) var(--ease-out),
    background-color var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
}

.site-nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius);
  padding: 0.38rem 0.4rem;
  color: var(--color-ink);
}

.site-nav a:hover,
.site-nav a:focus-visible {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  color: var(--color-primary-dark);
}

.site-nav a.is-active {
  color: var(--color-primary);
}

.site-header__actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  white-space: nowrap;
}

.site-header__actions .button--sm {
  min-height: 52px;
  padding-block: 0;
}

.language-switcher {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.language-switcher a {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  padding: 5px 8px;
  color: var(--color-muted);
  font-size: 0.82rem;
  font-weight: var(--weight-bold);
}

.language-switcher a:hover,
.language-switcher a:focus-visible {
  background: var(--color-soft);
  color: var(--color-primary-dark);
}

.language-switcher a.is-active {
  color: var(--color-surface);
  background: var(--color-primary);
}

.language-switcher a.is-active:hover,
.language-switcher a.is-active:focus-visible {
  color: var(--color-surface);
  background: var(--color-primary-dark);
}

.nav-toggle {
  display: none;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-ink);
  padding: 0;
  place-items: center;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

.nav-toggle:hover,
.nav-toggle:focus-visible {
  background: var(--color-soft);
  border-color: color-mix(in srgb, var(--color-primary) 44%, var(--color-border) 56%);
  color: var(--color-primary-dark);
  transform: translateY(-1px);
}

.nav-toggle__lines {
  position: relative;
  width: 22px;
  height: 16px;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}

.nav-toggle__line {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: center;
  transition:
    opacity 160ms var(--ease-out),
    transform 240ms var(--ease-out);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.2);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.mobile-nav {
  display: none;
}

.mobile-nav a:not(.button):hover,
.mobile-nav a:not(.button):focus-visible {
  background: var(--color-soft);
  color: var(--color-primary-dark);
}

body.reveal-ready [data-reveal] {
  --reveal-y: 14px;
  --reveal-scale: 1;
  opacity: 0;
  transform: none;
}

body.reveal-ready [data-reveal="drop"] {
  --reveal-y: -12px;
}

body.reveal-ready [data-reveal="panel"],
body.reveal-ready [data-reveal="card"] {
  --reveal-y: 22px;
}

body.reveal-ready [data-reveal].is-visible {
  opacity: 1;
  animation: veedu-reveal-in 560ms var(--ease-out-expo) both;
  will-change: opacity, transform;
}

body.reveal-ready [data-reveal].is-visible.reveal-done {
  transition-delay: 0ms;
  will-change: auto;
}

@keyframes veedu-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes veedu-reveal-in {
  from {
    opacity: 0;
    transform: translate3d(0, var(--reveal-y), 0) scale(var(--reveal-scale));
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes veedu-button-confirm {
  0% {
    transform: translateY(0) scale(1);
  }
  45% {
    transform: translateY(-1px) scale(1.025);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes veedu-button-error {
  0%,
  100% {
    transform: translateX(0);
  }
  28% {
    transform: translateX(-3px);
  }
  58% {
    transform: translateX(3px);
  }
}

.hero {
  padding: clamp(62px, 7.8vw, 110px) 0 clamp(58px, 7vw, 88px);
}

.hero__grid > *,
.calculator > *,
.split-band > *,
.cta-band > *,
.inquiry-layout > *,
.form-grid > *,
.card-grid > *,
.process-steps > * {
  min-width: 0;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  align-items: stretch;
  gap: clamp(42px, 6vw, 86px);
}

.hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: clamp(26px, 3.4vw, 38px) 0 var(--space-4);
}

.hero__highlight {
  color: var(--color-primary);
  font-weight: var(--weight-black);
}

.language-note {
  margin: 0;
  color: var(--color-muted);
  font-weight: var(--weight-semibold);
}

.hero-panel {
  min-height: min(43vw, 520px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(22px, 2.8vw, 34px);
  padding: clamp(30px, 3.6vw, 50px);
  border-radius: var(--radius);
  background: linear-gradient(150deg, var(--color-primary-dark), var(--color-primary));
  color: #fff;
  box-shadow: var(--shadow-panel);
}

.panel-kicker {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.12);
  font-weight: var(--weight-bold);
  line-height: 1.1;
}

.hero-panel h2 {
  margin: 0;
  max-width: 480px;
  font-size: var(--text-panel);
  line-height: 1.12;
  letter-spacing: 0;
  text-wrap: balance;
}

.check-list {
  display: grid;
  gap: 11px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.check-list li {
  display: flex;
  gap: 10px;
  line-height: var(--leading-dark);
}

.check-list li::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-top: 0.55em;
  border-radius: 99px;
  background: var(--color-accent);
  flex: 0 0 auto;
}

.page-hero {
  padding: clamp(52px, 6vw, 86px) 0 clamp(26px, 3.2vw, 42px);
  background: var(--color-page);
}

.page-hero--compact {
  padding-bottom: var(--space-5);
}

.page-hero .hero__actions {
  margin-bottom: 0;
}

.breadcrumb {
  margin: 0 0 16px;
  color: color-mix(in srgb, var(--color-muted) 86%, var(--color-ink) 14%);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.42rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li {
  display: inline-flex;
  align-items: center;
}

.breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: 1.45rem;
  margin: -0.08rem -0.28rem;
  padding: 0.08rem 0.28rem;
  border-radius: 6px;
  color: inherit;
  text-decoration: none;
  transition:
    color var(--duration-base) var(--ease-out),
    background-color var(--duration-base) var(--ease-out);
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
  background: color-mix(in srgb, var(--color-primary) 7%, transparent);
  color: var(--color-primary-dark);
}

.breadcrumb__separator {
  color: color-mix(in srgb, var(--color-muted) 44%, transparent);
  font-weight: var(--weight-semibold);
}

.breadcrumb [aria-current="page"] {
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
}

.card-grid {
  display: grid;
  gap: clamp(18px, 2.2vw, 28px);
}

.card-grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
}

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

.card-grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.goal-card,
.feature-card,
.topic-card,
.partner-card,
.knowledge-card,
.form-card,
.legal-copy {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 12px 26px rgba(26, 58, 39, 0.045);
}

.goal-card,
.feature-card,
.topic-card,
.partner-card,
.knowledge-card {
  padding: clamp(22px, 2.2vw, 30px);
}

.goal-card {
  display: flex;
  flex-direction: column;
  min-height: 280px;
  transition:
    border-color var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

.partner-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.partner-card__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  color: var(--color-primary);
  font-size: var(--text-caption);
  font-weight: var(--weight-black);
  letter-spacing: 0.055em;
  line-height: 1;
  text-transform: uppercase;
}

.partner-card__eyebrow::after {
  content: "";
  width: 22px;
  height: 1px;
  background: color-mix(in srgb, currentColor 38%, transparent);
}

.partner-card .button {
  margin-top: auto;
}

.goal-card:hover,
.goal-card:focus-visible,
.feature-card:hover,
.topic-card:hover,
.partner-card:hover,
.knowledge-card:hover {
  border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border) 70%);
}

.goal-card:hover,
.goal-card:focus-visible {
  box-shadow: 0 18px 36px rgba(26, 58, 39, 0.09);
  transform: translateY(-2px);
}

.goal-card:hover .card-icon,
.goal-card:focus-visible .card-icon {
  background: var(--color-primary);
  color: var(--color-surface);
}

.goal-card h3,
.feature-card h3,
.topic-card h3,
.partner-card h2,
.knowledge-card h2,
.feature-card h2,
.topic-card h2 {
  margin: 0 0 10px;
  font-size: var(--text-card);
  line-height: 1.18;
  font-weight: var(--weight-bold);
  text-wrap: balance;
}

.goal-card p,
.feature-card p,
.topic-card p,
.partner-card p,
.knowledge-card p {
  margin: 0 0 18px;
  color: var(--color-muted);
  line-height: 1.65;
  text-wrap: pretty;
}

.goal-card strong {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: 100%;
  margin-top: auto;
  color: var(--color-primary);
  font-weight: var(--weight-bold);
  transition:
    color var(--duration-base) var(--ease-out),
    gap var(--duration-base) var(--ease-out);
}

/* Underline only the label text, never the arrow */
.goal-card strong span {
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
  transition: text-decoration-color var(--duration-base) var(--ease-out);
}

.goal-card strong::after {
  content: "→";
  display: inline-block; /* keeps the hover underline on the text only, not the arrow */
  font-size: 1.05em;
  line-height: 1;
  transition: transform var(--duration-base) var(--ease-out);
}

.goal-card:hover strong,
.goal-card:focus-visible strong {
  color: var(--color-primary-dark);
}

.goal-card:hover strong span,
.goal-card:focus-visible strong span {
  text-decoration-color: currentColor;
}

.goal-card:hover strong::after,
.goal-card:focus-visible strong::after {
  transform: translateX(2px);
}

.card-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin-bottom: var(--space-5);
  border-radius: var(--radius);
  background: var(--color-soft);
  color: var(--color-primary);
  transition:
    background-color var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out);
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(24px, 4vw, 54px);
}

.process-step {
  position: relative;
  min-height: auto;
  padding: 20px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--color-border) 72%, var(--color-primary) 28%);
}

.process-step__number {
  position: static;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin-bottom: var(--space-4);
  border-radius: var(--radius);
  background: var(--color-primary);
  color: #fff;
  font-weight: var(--weight-black);
  font-size: 1.25rem;
  line-height: 1;
}

.process-step h3 {
  margin: 0 0 8px;
  font-size: 1.08rem;
  font-weight: var(--weight-bold);
  line-height: 1.22;
  text-wrap: balance;
}

.process-step p {
  margin: 0;
  color: var(--color-muted);
  line-height: 1.64;
  text-wrap: pretty;
}

.calculator {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.86fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}

.form-card {
  padding: clamp(24px, 2.8vw, 36px);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--space-5);
}

.field {
  display: grid;
  align-content: start;
  gap: 8px;
}

.field--full {
  grid-column: 1 / -1;
}

.field--inline span,
.field label {
  color: var(--color-ink);
  font-size: var(--text-small);
  font-weight: var(--weight-bold);
  line-height: 1.25;
  text-wrap: balance;
}

.field small {
  color: var(--color-muted);
  font-size: var(--text-small);
  line-height: 1.45;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 50px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 13px 14px;
  background: color-mix(in srgb, var(--color-surface) 78%, var(--color-soft) 22%);
  color: var(--color-ink);
  font-size: 1rem;
  font-weight: var(--weight-regular);
  line-height: 1.35;
  transition:
    border-color var(--duration-base) var(--ease-out),
    background-color var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}

.field select {
  height: 50px;
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-muted) 50%),
    linear-gradient(135deg, var(--color-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) 50%,
    calc(100% - 14px) 50%;
  background-repeat: no-repeat;
  background-size: 6px 6px, 6px 6px;
  padding-right: 42px;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: color-mix(in srgb, var(--color-primary) 28%, var(--color-border) 72%);
  background: var(--color-surface);
}

.field input::placeholder,
.field textarea::placeholder {
  color: color-mix(in srgb, var(--color-muted) 72%, var(--color-surface) 28%);
}

.field textarea {
  min-height: 168px;
  line-height: 1.55;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(25, 91, 58, 0.09);
  outline: none;
}

.field .is-invalid,
.field input.is-invalid,
.field select.is-invalid,
.field textarea.is-invalid {
  border-color: var(--color-danger);
}

.form-error {
  margin: 0;
  color: var(--color-danger);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
}

.form-error:empty {
  display: none;
}

.form-actions,
.form-submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.form-submit p {
  max-width: 360px;
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-small);
  line-height: 1.52;
}

.checkbox {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  min-height: 44px;
  margin-top: 20px;
  color: var(--color-muted);
  font-size: var(--text-small);
  line-height: 1.55;
}

.checkbox input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--color-primary);
}

.checkbox a {
  color: var(--color-primary);
  font-weight: var(--weight-bold);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--color-primary) 38%, transparent);
  transition:
    color var(--duration-base) var(--ease-out),
    text-decoration-color var(--duration-base) var(--ease-out);
}

.checkbox a:hover,
.checkbox a:focus-visible {
  color: var(--color-primary-dark);
  text-decoration-color: var(--color-accent);
}

.form-status,
.form-success {
  margin: 16px 0 0;
  font-weight: var(--weight-bold);
  line-height: 1.45;
}

.form-success {
  color: var(--color-success);
}

.result-card {
  position: sticky;
  top: 104px;
  padding: clamp(28px, 3vw, 40px);
  border-radius: var(--radius);
  background: var(--color-primary-dark);
  color: #fff;
  box-shadow: var(--shadow-panel);
  line-height: var(--leading-dark);
}

.result-card__kicker {
  margin: 0 0 7px;
  color: rgba(255, 255, 255, 0.74);
  font-size: var(--text-small);
  font-weight: var(--weight-bold);
}

.result-card h3 {
  margin: 0;
  font-size: 1.42rem;
  font-weight: var(--weight-bold);
  line-height: 1.2;
  text-wrap: balance;
}

.result-list {
  display: grid;
  gap: 13px;
  margin: clamp(24px, 3vw, 34px) 0;
}

.result-list div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  font-variant-numeric: tabular-nums;
}

.result-list span {
  color: rgba(255, 255, 255, 0.74);
  line-height: 1.35;
}

.result-list strong {
  text-align: right;
  white-space: nowrap;
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

.result-status {
  margin: 0 0 18px;
  padding: 13px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.12);
  font-weight: var(--weight-bold);
  line-height: 1.48;
  text-wrap: pretty;
}

.note {
  margin: clamp(22px, 3vw, 36px) 0 0;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--color-accent) 48%, var(--color-border) 52%);
  border-radius: var(--radius);
  background: var(--color-accent-soft);
  color: #5d4a25;
  line-height: 1.58;
  text-wrap: pretty;
}

.split-band,
.cta-band {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(260px, 0.7fr);
  gap: clamp(22px, 3.2vw, 42px);
  padding: clamp(30px, 4vw, 50px);
  border-radius: var(--radius);
}

.split-band {
  align-items: start;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.split-band p + .button {
  margin-top: var(--space-5);
}

/* Investieren: button is its own column — center it vertically against the text */
.split-band > .button {
  align-self: center;
}

.cta-band {
  align-items: center;
  background: var(--color-primary);
  color: #fff;
}

.cta-band p {
  color: rgba(255, 255, 255, 0.76);
  line-height: var(--leading-dark);
}

.partner-toolbar {
  display: grid;
  grid-template-columns: minmax(230px, 0.8fr) minmax(260px, 1fr) minmax(230px, 0.8fr);
  align-items: end;
  gap: var(--space-4);
  margin-bottom: clamp(24px, 3vw, 36px);
}

.partner-filter {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.partner-filter > span {
  color: var(--color-ink);
  font-size: var(--text-small);
  font-weight: var(--weight-bold);
  line-height: 1.25;
}

.partner-filter__options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 50px;
}

.partner-filter__option {
  min-height: 38px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--color-surface) 78%, var(--color-soft) 22%);
  color: var(--color-muted);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  line-height: 1.1;
  transition:
    background-color var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

.partner-filter__option:hover,
.partner-filter__option:focus-visible {
  border-color: color-mix(in srgb, var(--color-primary) 32%, var(--color-border) 68%);
  background: var(--color-surface);
  color: var(--color-primary-dark);
}

.partner-filter__option.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-surface);
}

.partner-filter__option:active {
  transform: scale(0.98);
}

.partner-card[hidden] {
  display: none;
}

.partner-meta,
.knowledge-card > span {
  color: var(--color-primary);
  font-weight: var(--weight-bold);
}

.inquiry-section {
  padding-top: clamp(30px, 3.5vw, 52px);
  background:
    linear-gradient(180deg, rgba(238, 244, 239, 0.9), rgba(238, 244, 239, 0.7) 78%),
    var(--color-soft);
  border-top: 1px solid color-mix(in srgb, var(--color-border) 78%, transparent);
}

.inquiry-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr);
  align-items: start;
  gap: clamp(24px, 4vw, 42px);
}

.inquiry-card,
.contact-panel {
  border: 1px solid color-mix(in srgb, var(--color-border) 86%, var(--color-primary) 14%);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--color-surface) 92%, var(--color-soft) 8%);
  box-shadow: 0 24px 54px rgba(24, 55, 37, 0.08);
}

.inquiry-card {
  padding: clamp(28px, 3.3vw, 44px);
}

.inquiry-card__head {
  max-width: 650px;
  margin-bottom: clamp(24px, 3vw, 34px);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.inquiry-card__head h2 {
  margin: 0 0 10px;
  font-size: clamp(1.75rem, 2.2vw, 2.15rem);
  line-height: 1.12;
  font-weight: var(--weight-black);
  text-wrap: balance;
}

.inquiry-card__head p {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-body);
  line-height: 1.62;
  text-wrap: pretty;
}

.inquiry-form {
  padding: 0;
}

.inquiry-form .field input,
.inquiry-form .field select,
.inquiry-form .field textarea {
  background-color: var(--color-page);
}

.inquiry-form .field input:hover,
.inquiry-form .field select:hover,
.inquiry-form .field textarea:hover {
  border-color: color-mix(in srgb, var(--color-border) 54%, var(--color-primary) 46%);
  background-color: var(--color-surface);
}

.inquiry-form .checkbox {
  align-items: start;
  margin-top: 24px;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-soft);
}

.inquiry-form .form-submit {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.legal-copy {
  padding: clamp(28px, 3.3vw, 44px);
  font-size: 1.02rem;
  line-height: 1.72;
}

.legal-copy address,
.contact-panel address,
.site-footer__contact {
  font-style: normal;
}

.legal-copy a,
.contact-panel a,
.site-footer__contact a {
  color: var(--color-primary);
  font-weight: var(--weight-bold);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--color-primary) 38%, transparent);
  text-underline-offset: 3px;
  transition:
    color var(--duration-base) var(--ease-out),
    text-decoration-color var(--duration-base) var(--ease-out);
}

.legal-copy a:hover,
.legal-copy a:focus-visible,
.contact-panel a:hover,
.contact-panel a:focus-visible {
  color: var(--color-primary-dark);
  text-decoration-color: var(--color-accent);
}

.legal-copy h2 {
  max-width: 32ch;
  margin: 34px 0 12px;
  font-size: 1.45rem;
  line-height: 1.18;
  font-weight: var(--weight-bold);
  text-wrap: balance;
}

.legal-copy p,
.legal-copy li,
.legal-copy address {
  max-width: 72ch;
  text-wrap: pretty;
}

.legal-copy p,
.legal-copy ul,
.legal-copy address {
  margin-top: 0;
  margin-bottom: 1rem;
}

.legal-copy ul {
  padding-left: 1.25rem;
}

.legal-copy li + li {
  margin-top: 0.38rem;
}

.contact-panel {
  position: sticky;
  top: 106px;
  display: grid;
  gap: var(--space-6);
  padding: clamp(28px, 3vw, 38px);
}

.contact-panel h2 {
  margin: 0 0 10px;
  font-size: clamp(1.75rem, 2.1vw, 2.05rem);
  line-height: 1.12;
  font-weight: var(--weight-black);
  text-wrap: balance;
}

.contact-panel p {
  margin: 0;
  color: var(--color-muted);
  line-height: 1.62;
  text-wrap: pretty;
}

.contact-panel address {
  padding-top: 22px;
  border-top: 1px solid var(--color-border);
  color: var(--color-ink);
  line-height: 1.72;
}

.contact-panel__note {
  margin: 0;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--color-soft);
  color: var(--color-muted);
  font-size: var(--text-small);
  line-height: 1.58;
}

.language-shell {
  min-height: calc(100svh - 76px);
  display: grid;
  place-items: center;
  padding: clamp(64px, 8vw, 112px) 0;
}

.language-shell__inner {
  width: min(calc(100vw - clamp(24px, 4vw, 48px)), 760px);
  max-width: 760px;
  min-width: 0;
  text-align: center;
}

.language-shell__mark {
  margin: 0 auto 22px;
}

.language-shell h1 {
  margin: 0;
  font-size: clamp(2.8rem, 5.2vw, 4rem);
  line-height: 1.08;
  font-weight: var(--weight-black);
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.language-shell p {
  color: var(--color-muted);
  font-size: var(--text-lead);
  line-height: 1.68;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.site-footer {
  padding: clamp(48px, 6vw, 76px) 0 28px;
  background: #112119;
  color: #e9f0eb;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(260px, 1.45fr) repeat(3, minmax(150px, 1fr));
  gap: clamp(28px, 4vw, 54px);
}

.site-footer h2 {
  margin: 0 0 12px;
  color: #fff;
  font-size: 1rem;
  font-weight: var(--weight-bold);
  line-height: 1.2;
}

.site-footer nav {
  display: grid;
  align-content: start;
  justify-items: start;
}

.site-footer p,
.site-footer a {
  color: #b8c6bc;
  line-height: 1.58;
}

.site-footer nav a,
.site-footer__contact a {
  display: flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  margin: 8px 0;
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
  transition:
    color var(--duration-base) var(--ease-out),
    text-decoration-color var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

.site-footer nav a:hover,
.site-footer nav a:focus-visible,
.site-footer__contact a:hover,
.site-footer__contact a:focus-visible {
  color: #f4faf6;
  text-decoration-color: rgba(197, 155, 74, 0.82);
  transform: translateX(3px);
}

.brand--footer:hover .brand__name,
.brand--footer:focus-visible .brand__name {
  color: var(--color-surface);
}

.brand--footer:hover .brand__tag,
.brand--footer:focus-visible .brand__tag {
  color: color-mix(in srgb, var(--color-surface) 82%, var(--color-soft) 18%);
}

.brand--footer {
  display: inline-flex;
  color: #fff;
}

.brand--footer .brand__tag {
  color: #b8c6bc;
}

.site-footer__contact {
  margin-top: 16px;
  color: #b8c6bc;
}

.site-footer__contact a {
  color: #e9f0eb;
}

.site-footer__bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.site-footer__copy {
  margin: 0;
  font-size: var(--text-small);
}

.site-footer__badge {
  --badge-orbit-duration: 6.8s;
  --badge-orbit-thickness: 2px;
  --badge-trace-length: 8;
  --badge-trace-opacity: 0.67;
  --badge-rail: color-mix(in srgb, var(--color-paper) 90%, var(--color-ink) 10%);
  position: relative;
  display: inline-flex;
  justify-self: start;
  align-items: center;
  width: max-content;
  max-width: 100%;
  padding: 0.24rem;
  border: 0;
  border-radius: calc(0.52rem - 2px);
  background: transparent;
  box-shadow: 0 0.45rem 1.3rem -0.65rem var(--color-black-22);
  isolation: isolate;
  overflow: visible;
  transition: transform var(--duration-base) var(--ease-out);
}
.site-footer__badge-orbit {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.site-footer__badge-orbit-fill {
  fill: var(--color-paper);
}
.site-footer__badge-orbit-rail,
.site-footer__badge-orbit-trace {
  fill: none;
  vector-effect: non-scaling-stroke;
}
.site-footer__badge-orbit-rail {
  stroke: var(--badge-rail);
  stroke-width: 1;
}
.site-footer__badge-orbit-trace {
  stroke: rgb(124, 58, 237);
  stroke-width: var(--badge-orbit-thickness);
  stroke-linecap: round;
  opacity: 0;
  filter: drop-shadow(0 0 1px var(--color-badge-accent-soft));
}
.site-footer__badge-orbit.is-ready .site-footer__badge-orbit-trace {
  opacity: var(--badge-trace-opacity);
}
.site-footer__badge-core {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.18em;
  min-height: 1.32rem;
  padding: 0.18rem 0.55rem;
  border-radius: calc(0.28rem - 2px);
  background: transparent;
  color: var(--color-graphite);
  font-size: 0.76rem;
  line-height: 1;
  letter-spacing: 0.035em;
  font-weight: 500;
  text-transform: none;
  white-space: nowrap;
  transition: color var(--duration-base) var(--ease-out);
}
.site-footer__badge-core strong {
  font-weight: 600;
}
.site-footer__badge:hover,
.site-footer__badge:focus-visible {
  transform: translateY(-2px);
}

@media (min-width: 860px) {
  .site-footer__badge { justify-self: end; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }

  body.reveal-ready [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (max-width: 1250px) {
  .site-header__inner {
    grid-template-columns: auto 1fr;
  }

  .site-nav {
    display: none;
  }

  .nav-toggle {
    display: inline-grid;
    place-items: center;
  }

  .mobile-nav {
    position: fixed;
    left: 16px;
    right: 16px;
    top: 86px;
    max-height: calc(100svh - 104px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    display: grid;
    gap: 8px;
    padding: 18px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0, -10px, 0) scale(0.985);
    transform-origin: top right;
    visibility: hidden;
    will-change: opacity, transform;
    transition:
      opacity 220ms var(--ease-out),
      transform 280ms var(--ease-out),
      visibility 0s linear 280ms;
  }

  .mobile-nav[hidden] {
    display: none;
  }

  .mobile-nav.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) scale(1);
    visibility: visible;
    transition:
      opacity 180ms var(--ease-out),
      transform 280ms var(--ease-out),
      visibility 0s linear 0s;
  }

  .mobile-nav a {
    min-height: 46px;
    display: flex;
    align-items: center;
    border-radius: var(--radius);
    padding: 10px 8px;
    font-weight: var(--weight-bold);
    opacity: 0;
    transform: translate3d(0, 8px, 0);
    transition:
      opacity 180ms var(--ease-out),
      transform 260ms var(--ease-out),
      color var(--duration-base) var(--ease-out),
      background-color var(--duration-base) var(--ease-out),
      border-color var(--duration-base) var(--ease-out);
  }

  .mobile-nav.is-open a {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  .mobile-nav.is-open a:nth-child(1) {
    transition-delay: 35ms;
  }

  .mobile-nav.is-open a:nth-child(2) {
    transition-delay: 55ms;
  }

  .mobile-nav.is-open a:nth-child(3) {
    transition-delay: 75ms;
  }

  .mobile-nav.is-open a:nth-child(4) {
    transition-delay: 95ms;
  }

  .mobile-nav.is-open a:nth-child(5) {
    transition-delay: 115ms;
  }

  .mobile-nav.is-open a:nth-child(6) {
    transition-delay: 135ms;
  }

  .mobile-nav.is-open a:nth-child(7) {
    transition-delay: 155ms;
  }
}

@media (max-width: 1080px) {
  .hero__grid,
  .inquiry-layout,
  .calculator,
  .split-band,
  .cta-band {
    grid-template-columns: 1fr;
  }

  .contact-panel {
    position: static;
  }

  .process-steps,
  .card-grid--4,
  .card-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .result-card {
    position: static;
  }
}

@media (max-width: 820px) {
  .hero h1 {
    font-size: 3.6rem;
  }

  .page-hero h1,
  .language-shell h1 {
    font-size: 3rem;
  }

  .section-head h2,
  .cta-band h2,
  .split-band h2 {
    font-size: 2rem;
  }

  .hero-panel {
    min-height: auto;
  }

  .hero {
    padding: 48px 0 40px;
  }

  .partner-toolbar,
  .contact-panel,
  .site-footer__grid,
  .site-footer__bottom {
    grid-template-columns: 1fr;
  }

  .site-footer__bottom {
    justify-items: start;
  }
}

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

@media (max-width: 640px) {
  .container {
    width: min(calc(100% - 24px), var(--container));
  }

  .section {
    padding: var(--section-y-mobile) 0;
  }

  .section--first {
    padding-top: 28px;
  }

  .section--closing-cta {
    padding-top: 0;
  }

  .section--first + .section--closing-cta,
  .section--soft + .section--closing-cta {
    padding-top: var(--section-y-mobile);
  }

  .page-hero {
    padding: 42px 0 28px;
  }

  .page-hero--compact {
    padding-bottom: 20px;
  }

  .inquiry-section {
    padding-top: 30px;
  }

  .site-header__inner {
    min-height: 70px;
    gap: 12px;
  }

  .brand__name {
    overflow-wrap: normal;
  }

  .site-header__actions .button {
    display: none;
  }

  .language-switcher a {
    min-width: 44px;
    padding-inline: 6px;
  }

  .hero h1 {
    font-size: 2.72rem;
  }

  .hero {
    padding: 60px 0 46px;
  }

  .hero__grid {
    gap: 36px;
  }

  .hero__actions {
    align-items: stretch;
    flex-direction: column;
    margin: 22px 0 14px;
  }

  .hero__actions > .button,
  .form-actions > .button,
  .form-submit > .button,
  .partner-card .button,
  .knowledge-card .button,
  .cta-band .button {
    width: 100%;
  }

  .form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .breadcrumb a {
    min-height: 44px;
  }

  .legal-copy address a,
  .contact-panel address a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .site-footer nav a,
  .site-footer__contact a {
    min-height: 44px;
    margin: 1px 0;
  }

  .page-hero h1,
  .language-shell h1 {
    font-size: 2.2rem;
    -webkit-hyphens: auto; hyphens: auto;
    overflow-wrap: break-word;
    word-break: normal;
  }

  .section-head h2,
  .topic-card h2,
  .partner-card h2,
  .knowledge-card h2,
  .cta-band h2,
  .split-band h2,
  .split-band h3,
  .result-card h3 {
    -webkit-hyphens: auto; hyphens: auto;
    overflow-wrap: anywhere;
  }

  .hero-panel,
  .split-band,
  .cta-band,
  .form-card,
  .inquiry-card,
  .contact-panel,
  .legal-copy {
    padding: 22px;
  }

  .hero-panel {
    padding: 22px;
    gap: 26px;
  }

  .split-band {
    gap: 20px;
  }

  .hero-panel .panel-kicker {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: color-mix(in srgb, var(--color-surface) 86%, var(--color-primary-glow) 14%);
    font-size: var(--text-small);
    line-height: 1.25;
    white-space: normal;
  }

  .hero-panel h2 {
    font-size: 1.45rem;
    line-height: 1.12;
  }

  .inquiry-card__head {
    margin-bottom: 22px;
    padding-bottom: 20px;
  }

  .card-grid--4,
  .process-steps,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .goal-card {
    min-height: auto;
  }

  .field--full {
    grid-column: auto;
  }

  .result-list div {
    display: grid;
    gap: 4px;
  }

  .result-list strong {
    text-align: left;
    white-space: normal;
  }
}

@media (max-width: 380px) {
  .page-hero h1,
  .language-shell h1 {
    font-size: 2.04rem;
  }
}

/* Home: distinguish hero from the first section with the same tinted band used on subpages */
.hero + .section--first {
  padding-top: var(--section-y);
  background: color-mix(in srgb, var(--color-soft) 90%, var(--color-primary) 10%);
  border-top: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
}

/* COMPONENT 12: Freebie download */
.freebie {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: clamp(26px, 3.4vw, 48px);
}

.freebie__body .eyebrow {
  display: block;
  margin-bottom: 10px;
}

.freebie__body h2 {
  margin: 0 0 12px;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  line-height: var(--leading-tight);
  font-weight: var(--weight-black);
  text-wrap: balance;
}

.freebie__lead {
  margin: 0 0 18px;
  color: var(--color-muted);
  line-height: 1.65;
  max-width: 60ch;
  text-wrap: pretty;
}

.freebie__list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 11px;
}

.freebie__list li {
  position: relative;
  padding-left: 22px;
  color: var(--color-ink);
  line-height: 1.5;
}

.freebie__list li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%; /* round bullet, not a square checkbox */
  background: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-soft);
}

.freebie__action {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.freebie__meta {
  color: var(--color-muted);
  font-size: var(--text-small);
}

/* Language dropdown (replaces the inline DE/EN/TA toggle) */
.lang-menu {
  position: relative;
}

.lang-menu__current {
  list-style: none;
  cursor: pointer;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: 0.91rem;
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

.lang-menu__current::-webkit-details-marker {
  display: none;
}

.lang-menu__current .icon {
  transition: transform var(--duration-base) var(--ease-out);
}

.lang-menu[open] .lang-menu__current .icon {
  transform: rotate(180deg);
}

.lang-menu__list {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 60;
  min-width: 172px;
  display: grid;
  gap: 2px;
  padding: 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
}

.lang-menu__list a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 6px;
  color: var(--color-ink);
  font-size: 0.9rem;
  font-weight: var(--weight-bold);
}

.lang-menu__list a:hover,
.lang-menu__list a:focus-visible {
  background: var(--color-soft);
  color: var(--color-primary-dark);
}

.lang-menu__list a.is-active {
  background: var(--color-primary);
  color: #fff;
}

/* Numbered 1–6 flow (Kaufen) — visually distinct from the card grids */
.flow-steps {
  border-top: 1px solid var(--color-border);
}

.flow-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(16px, 2.6vw, 30px);
  align-items: center;
  padding: clamp(20px, 2.4vw, 30px) 0;
  border-bottom: 1px solid var(--color-border);
}

.flow-step__num {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: var(--color-primary);
  color: #fff;
  font-weight: var(--weight-black);
  font-size: 1.3rem;
  line-height: 1;
}

.flow-step h3 {
  margin: 6px 0 7px;
  font-size: var(--text-card);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  text-wrap: balance;
}

.flow-step p {
  margin: 0;
  color: var(--color-muted);
  line-height: 1.6;
  max-width: 70ch;
  text-wrap: pretty;
}

/* Pills (Fachpartner: Standort + Sprachen) */
.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0 16px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-soft);
  color: var(--color-primary-dark);
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  line-height: 1.25;
}

.pill .icon {
  opacity: 0.8;
}

.pill--lang {
  background: var(--color-surface);
}

/* ===================================================================
   CONTENT KIT — components for the content revision (June 2026).
   Built strictly on existing VEEDU tokens. No brand/style change.
   =================================================================== */

/* Generic info card (text badge + heading + copy + small link-cue) */
.card{ display:flex; flex-direction:column; padding:clamp(22px,2.2vw,30px); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius); box-shadow:0 12px 26px rgba(26,58,39,.045); }
.card h3{ margin:0 0 8px; font-size:var(--text-card); font-weight:var(--weight-bold); line-height:1.2; text-wrap:balance; }
.card p{ margin:0; color:var(--color-muted); line-height:1.6; text-wrap:pretty; }
.card small{ display:block; margin-top:12px; color:var(--color-primary); font-weight:var(--weight-bold); font-size:var(--text-small); }
a.card{ transition:border-color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); }
a.card:hover,a.card:focus-visible{ border-color:color-mix(in srgb,var(--color-primary) 30%, var(--color-border) 70%); transform:translateY(-2px); box-shadow:0 18px 36px rgba(26,58,39,.09); }

/* Text badge (small square marker; replaces prototype text "icons") */
.badge{ width:44px; height:44px; flex:0 0 auto; margin-bottom:var(--space-4); display:grid; place-items:center; border-radius:var(--radius); background:var(--color-soft); color:var(--color-primary); font-weight:var(--weight-black); font-size:.95rem; line-height:1; }
.badge--sm{ width:38px; height:38px; font-size:.85rem; }

/* simple equal-column grids */
.grid-2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(18px,2.2vw,28px); }
.grid-3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.2vw,28px); }
.grid-4{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(16px,2vw,24px); }
.grid-2>*,.grid-3>*,.grid-4>*{ min-width:0; }
@media(max-width:1080px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:760px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

.lead{ max-width:68ch; color:var(--color-muted); font-size:var(--text-lead); line-height:1.68; text-wrap:pretty; }

/* numbered flow line (label + description) */
.flowline{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(14px,1.6vw,22px); }
.flowline__item{ display:flex; flex-direction:column; gap:6px; padding-top:14px; border-top:2px solid color-mix(in srgb,var(--color-primary) 32%, var(--color-border) 68%); }
.flowline__item strong{ font-weight:var(--weight-bold); }
.flowline__item span{ color:var(--color-muted); font-size:var(--text-small); line-height:1.5; }
@media(max-width:900px){ .flowline{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:520px){ .flowline{ grid-template-columns:1fr; } }

/* framed content card */
.visual-card{ padding:clamp(24px,3vw,40px); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius); box-shadow:var(--shadow-soft); }
.visual-card+.visual-card{ margin-top:24px; }
.visual-title{ margin:0 0 6px; font-size:clamp(1.3rem,2vw,1.7rem); font-weight:var(--weight-black); line-height:1.2; text-wrap:balance; }
.visual-lead{ margin:0 0 20px; max-width:74ch; color:var(--color-muted); line-height:1.65; text-wrap:pretty; }

/* sub-heading between blocks */
.split-title{ margin:clamp(34px,4vw,52px) 0 18px; font-size:clamp(1.3rem,2vw,1.7rem); font-weight:var(--weight-black); line-height:1.2; text-wrap:balance; }

/* data table */
.table-wrap{ overflow-x:auto; border:1px solid var(--color-border); border-radius:var(--radius); -webkit-overflow-scrolling:touch; }
.data-table{ width:100%; border-collapse:collapse; font-size:var(--text-small); }
.data-table th,.data-table td{ padding:12px 14px; text-align:left; border-bottom:1px solid var(--color-border); vertical-align:top; line-height:1.5; }
.data-table thead th{ background:var(--color-soft); font-weight:var(--weight-bold); color:var(--color-ink); }
.data-table tbody tr:last-child td{ border-bottom:0; }
.data-table strong{ font-weight:var(--weight-bold); }

/* mini calc rows */
.mini-calc{ display:grid; margin:16px 0; border:1px solid var(--color-border); border-radius:var(--radius); overflow:hidden; }
.mini-calc-row{ display:flex; justify-content:space-between; gap:16px; padding:11px 14px; border-bottom:1px solid var(--color-border); }
.mini-calc-row:last-child{ border-bottom:0; }
.mini-calc-row span{ color:var(--color-muted); }
.mini-calc-row strong{ font-weight:var(--weight-bold); white-space:nowrap; font-variant-numeric:tabular-nums; }

/* comparison boxes */
.comparison{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2vw,24px); margin-top:8px; }
.comparison>*{ min-width:0; }
.compare-box{ padding:clamp(20px,2.4vw,28px); background:var(--color-surface); border:1px solid var(--color-border); border-left:4px solid var(--color-border); border-radius:var(--radius); }
.compare-box h3{ margin:0 0 8px; font-size:var(--text-card); font-weight:var(--weight-bold); }
.compare-box p{ margin:0 0 10px; color:var(--color-muted); line-height:1.6; }
.compare-box p:last-child{ margin-bottom:0; }
.compare-box--ok{ border-left-color:var(--color-success); }
.compare-box--warn{ border-left-color:var(--color-warning); }
@media(max-width:760px){ .comparison{ grid-template-columns:1fr; } }

/* checklists */
.check-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,24px); }
.check-grid>*{ min-width:0; }
.checklist{ padding:clamp(20px,2.2vw,26px); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius); }
.checklist h3{ margin:0 0 12px; font-size:1.05rem; font-weight:var(--weight-bold); }
.checklist ul{ margin:0; padding:0; list-style:none; display:grid; gap:9px; }
.checklist li{ position:relative; padding-left:24px; color:var(--color-muted); line-height:1.5; }
.checklist li::before{ content:""; position:absolute; left:2px; top:.5em; width:8px; height:8px; border-radius:50%; background:var(--color-accent); box-shadow:0 0 0 2px var(--color-accent-soft); }
@media(max-width:900px){ .check-grid{ grid-template-columns:1fr; } }

/* articles (2-col prose) */
.article-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(20px,3vw,40px); margin-top:8px; }
.article-grid>*{ min-width:0; }
.article h3{ margin:0 0 10px; font-size:var(--text-card); font-weight:var(--weight-bold); }
.article h4{ margin:18px 0 6px; font-size:1.02rem; font-weight:var(--weight-bold); color:var(--color-primary-dark); }
.article p{ margin:0 0 12px; color:var(--color-muted); line-height:1.65; }
.article p:last-child{ margin-bottom:0; }
@media(max-width:760px){ .article-grid{ grid-template-columns:1fr; } }

/* scenario boxes */
.scenario-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2vw,24px); margin-top:20px; }
.scenario-grid>*{ min-width:0; }
.scenario-box{ padding:clamp(20px,2.4vw,28px); background:var(--color-soft); border:1px solid var(--color-border); border-radius:var(--radius); }
.scenario-box h3{ margin:0 0 12px; font-size:var(--text-card); font-weight:var(--weight-bold); }
.scenario-box p{ margin:12px 0 0; color:var(--color-muted); line-height:1.6; }
@media(max-width:760px){ .scenario-grid{ grid-template-columns:1fr; } }

/* formula box */
.formula{ margin-top:20px; padding:clamp(20px,2.4vw,28px); background:var(--color-primary-dark); color:#fff; border-radius:var(--radius); }
.formula strong{ display:block; font-size:1.12rem; font-weight:var(--weight-bold); }
.formula p{ margin:10px 0 0; color:rgba(255,255,255,.82); line-height:1.6; }
.formula b{ color:#fff; }

/* financing-split bar */
.bar-block{ margin:18px 0; }
.bar-head{ display:flex; justify-content:space-between; gap:12px; margin-bottom:8px; font-weight:var(--weight-bold); font-size:var(--text-small); }
.bar{ display:flex; overflow:hidden; border-radius:var(--radius); min-height:62px; }
.seg{ display:flex; align-items:center; justify-content:center; padding:8px; text-align:center; font-size:var(--text-small); font-weight:var(--weight-bold); color:#fff; line-height:1.2; }
.seg--hard{ background:var(--color-accent); flex:1 1 10%; color:#3a2c0c; }
.seg--soft{ background:color-mix(in srgb,var(--color-accent) 50%, var(--color-surface) 50%); flex:1 1 10%; color:#3a2c0c; }
.seg--mortgage{ background:var(--color-primary); flex:8 1 80%; }
.seg--first{ background:var(--color-primary); flex:2 1 66%; }
.seg--second{ background:var(--color-primary-dark); flex:1 1 17%; }

/* rank / Schuldbrief visual */
.rank-box{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(18px,2.4vw,30px); margin-top:8px; }
.rank-box>*{ min-width:0; }
.rank-title{ margin:0 0 12px; font-weight:var(--weight-bold); }
.rank-stack{ display:grid; gap:8px; }
.rank-row{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:12px 14px; background:var(--color-soft); border:1px solid var(--color-border); border-radius:var(--radius); font-size:var(--text-small); }
.rank-row span{ color:var(--color-muted); }
.rank-pill{ display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px; background:var(--color-primary); color:#fff; font-size:var(--text-caption); font-weight:var(--weight-bold); white-space:nowrap; }
.rank-pill--gold{ background:var(--color-accent); color:#3a2c0c; }
.rank-pill--soft{ background:var(--color-muted); }
.info-panel{ align-self:start; }
.info-panel h3{ margin:0 0 10px; font-size:var(--text-card); font-weight:var(--weight-bold); }
.info-panel p{ margin:0 0 10px; color:var(--color-muted); line-height:1.6; }
.info-panel p:last-child{ margin-bottom:0; }
@media(max-width:820px){ .rank-box{ grid-template-columns:1fr; } }

/* highlighted explainer box */
.simple-box{ margin-top:18px; padding:clamp(20px,2.4vw,28px); background:var(--color-soft); border:1px solid var(--color-border); border-radius:var(--radius); }
.simple-box h3{ margin:0 0 10px; font-size:var(--text-card); font-weight:var(--weight-bold); }
.simple-box p{ margin:0 0 10px; color:var(--color-ink); line-height:1.62; }
.simple-box p:last-child{ margin-bottom:0; }

/* FAQ accordion */
.faq{ display:grid; gap:10px; }
.faq details{ border:1px solid var(--color-border); border-radius:var(--radius); background:var(--color-surface); overflow:hidden; }
.faq summary{ list-style:none; cursor:pointer; padding:16px 18px; font-weight:var(--weight-bold); display:flex; justify-content:space-between; gap:12px; align-items:center; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--color-primary); font-weight:var(--weight-black); font-size:1.25rem; line-height:1; }
.faq details[open] summary::after{ content:"\2013"; }
.faq details>p{ margin:0; padding:0 18px 18px; color:var(--color-muted); line-height:1.65; }

/* clean check list */
.list-clean{ margin:0; padding:0; list-style:none; display:grid; gap:9px; }
.list-clean li{ position:relative; padding-left:22px; color:var(--color-muted); line-height:1.55; }
.list-clean li::before{ content:"\2713"; position:absolute; left:0; top:0; color:var(--color-primary); font-weight:var(--weight-bold); }

/* notes */
.source-note{ margin:12px 0 0; color:var(--color-muted); font-size:var(--text-small); line-height:1.55; }
.risk-note{ margin-top:clamp(20px,2.6vw,32px); padding:16px 18px; border:1px solid color-mix(in srgb,var(--color-warning) 40%, var(--color-border) 60%); border-left:4px solid var(--color-warning); border-radius:var(--radius); background:color-mix(in srgb,var(--color-warning) 7%, var(--color-surface) 93%); color:var(--color-ink); line-height:1.6; }

/* second soft section tint */
.section--soft2{ background:color-mix(in srgb,var(--color-soft) 55%, var(--color-page) 45%); }

/* 7-calculator grid */
.calc-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(18px,2.2vw,26px); }
.calc-grid>*{ min-width:0; }
.calc-card{ display:flex; flex-direction:column; padding:clamp(22px,2.4vw,30px); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius); box-shadow:0 12px 26px rgba(26,58,39,.045); }
.calc-card h3{ margin:0 0 4px; font-size:var(--text-card); font-weight:var(--weight-bold); }
.calc-card>p{ margin:0 0 16px; color:var(--color-muted); font-size:var(--text-small); line-height:1.5; }
.calc-card .field{ margin-bottom:12px; }
.calc-card .button{ align-self:flex-start; margin-top:4px; }
.calc-out{ margin-top:16px; padding:16px; border-radius:var(--radius); background:var(--color-primary-dark); color:#fff; line-height:1.6; font-size:var(--text-small); }
.calc-out p{ margin:0; color:rgba(255,255,255,.82); }
.calc-out p+p{ margin-top:8px; }
.calc-out strong{ display:block; margin-bottom:6px; font-size:1.05rem; color:#fff; }
@media(max-width:900px){ .calc-grid{ grid-template-columns:1fr; } }

/* Steuern entry band (reusable) */
.steuer-band{ display:grid; grid-template-columns:1.3fr .7fr; gap:clamp(20px,3vw,40px); align-items:center; padding:clamp(28px,3.4vw,44px); border:1px solid var(--color-border); border-radius:var(--radius); background:var(--color-soft); }
.steuer-band h2{ margin:0; font-size:var(--text-section); font-weight:var(--weight-black); line-height:1.12; text-wrap:balance; }
.steuer-band p{ margin:12px 0 0; color:var(--color-muted); line-height:1.6; max-width:60ch; }
.steuer-band .button{ justify-self:start; }
@media(max-width:820px){ .steuer-band{ grid-template-columns:1fr; } }

/* Quellenstand source cards */
.source-card{ display:flex; flex-direction:column; padding:clamp(22px,2.2vw,28px); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius); transition:border-color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); }
.source-card:hover,.source-card:focus-visible{ border-color:color-mix(in srgb,var(--color-primary) 30%, var(--color-border) 70%); transform:translateY(-2px); }
.source-card h3{ margin:0 0 8px; font-size:var(--text-card); font-weight:var(--weight-bold); }
.source-card p{ margin:0 0 14px; color:var(--color-muted); line-height:1.6; }
.source-card small{ margin-top:auto; color:var(--color-primary); font-weight:var(--weight-bold); }

/* ===================================================================
   Revision round 2 — spacing, Steuern band, button parity, smooth FAQ
   =================================================================== */

/* generous vertical rhythm between content blocks (premium feel) */
.mt-block{ margin-top: clamp(46px, 5.5vw, 74px); }

/* keep text badge + icon box spacing identical inside content cards */
.card .card-icon{ margin-bottom: var(--space-4); }

/* Steuern entry band: white card sitting on a soft, contrasting section */
.steuer-band{ background: var(--color-surface); box-shadow: 0 14px 30px rgba(24,55,37,.06); }
/* Steuern button width matches the Projektanfrage (CTA) button below it */
.steuer-band .button,
.cta-band .button{ min-width: 248px; }
@media (max-width: 560px){
  .steuer-band .button,
  .cta-band .button{ width: 100%; min-width: 0; }
}

/* Even rhythm for the Freebie -> Steuern -> CTA tail (no doubled padding) */
.section--steuer{ padding-top: 0; }
.section--steuer + .section--closing-cta,
.section--soft.section--steuer + .section--closing-cta{ padding-top: 0; }

/* Smooth, cross-browser FAQ accordion (height animated by JS) */
.faq__body{ overflow: hidden; }
.faq__body--anim{ transition: height .3s var(--ease-out); will-change: height; }
@media (prefers-reduced-motion: reduce){ .faq__body--anim{ transition-duration: .001ms; } }
/* keep FAQ answer padding when content is wrapped for animation */
.faq__body > p{ margin: 0; padding: 0 18px 18px; color: var(--color-muted); line-height: 1.65; }

/* Steuern + CTA form one zone: the closing CTA after the soft Steuern section
   shares the same soft background and keeps normal top padding. */
.section--soft + .section--closing-cta{ background: var(--color-soft); }

/* Disclaimer / extra-info boxes all use the calm gold .note style (no colored side border) */
.risk-note{
  margin-top: clamp(24px, 3.2vw, 40px);
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--color-accent) 48%, var(--color-border) 52%);
  border-left-width: 1px;
  border-radius: var(--radius);
  background: var(--color-accent-soft);
  color: #5d4a25;
  line-height: 1.58;
}

/* Home hero headline is now a three-part statement — scale it down for a cleaner, calmer hero */
.hero h1{ font-size: clamp(2.45rem, 4.3vw, 3.7rem); line-height: 1.1; }

/* Unified page tail: Freebie + Steuern + CTA share ONE soft section with equal gaps;
   the gap between the boxes equals the gap from the last box to the footer. */
.page-tail{ padding-bottom: clamp(34px, 4.2vw, 58px); }
.page-tail__stack{ display: grid; gap: clamp(34px, 4.2vw, 58px); }

/* A numbered step row of 5 stays on one line on desktop */
.process-steps:has(.process-step:nth-child(5)){ grid-template-columns: repeat(5, minmax(0,1fr)); gap: clamp(16px, 1.8vw, 30px); }
@media (max-width: 1000px){ .process-steps:has(.process-step:nth-child(5)){ grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(20px,3vw,32px); } }
@media (max-width: 560px){ .process-steps:has(.process-step:nth-child(5)){ grid-template-columns: 1fr; } }

/* Quellenstand: distinct background band */
.section--paper{ background: var(--color-surface); }

/* Steuern button matches the Projektanfrage (CTA) button width exactly:
   identical 2-column grid + stretch the button to fill its column (as the CTA does). */
.steuer-band{ grid-template-columns: minmax(0, 1.3fr) minmax(260px, 0.7fr); }
.steuer-band .button{ justify-self: stretch; min-width: 0; }

/* Steuern band matches the CTA band exactly (padding + gap) so the buttons are identical,
   and stacks at the same breakpoint as the CTA band on smaller screens. */
.steuer-band{ padding: clamp(30px,4vw,50px); gap: clamp(22px,3.2vw,42px); }
@media (max-width: 1080px){ .steuer-band{ grid-template-columns: 1fr; } }

/* ===== Clean mobile layouts for content components (desktop unchanged) ===== */
@media (max-width: 680px){
  /* Data tables -> stacked, clearly labeled rows (no horizontal scroll) */
  .table-wrap{ overflow: visible; }
  .data-table thead{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  .data-table, .data-table tbody, .data-table tr, .data-table td{ display: block; width: 100%; }
  .data-table tr{ padding: 14px 16px; border-bottom: 1px solid var(--color-border); }
  .data-table tbody tr:last-child{ border-bottom: 0; }
  .data-table td{ display: flex; justify-content: space-between; gap: 16px; padding: 5px 0; border: 0; text-align: right; }
  .data-table td::before{ content: attr(data-label); flex: 0 0 44%; text-align: left; font-weight: var(--weight-bold); color: var(--color-ink); }
  .data-table td:first-child{ display: block; text-align: left; font-size: 1.02rem; font-weight: var(--weight-bold); margin-bottom: 6px; }
  .data-table td:first-child::before{ content: none; }

  /* Financing bars -> full-width labeled rows */
  .bar{ flex-direction: column; min-height: 0; }
  .seg{ width: 100%; flex: none; min-height: 44px; justify-content: flex-start; text-align: left; padding: 11px 14px; }
}

@media (max-width: 480px){
  /* mini-calc rows: label over value */
  .mini-calc-row{ flex-direction: column; align-items: flex-start; gap: 2px; }
  .mini-calc-row strong{ text-align: left; }
  /* rank rows: status drops below */
  .rank-row{ grid-template-columns: auto 1fr; row-gap: 4px; }
  .rank-row > strong:last-child{ grid-column: 1 / -1; justify-self: start; color: var(--color-muted); font-weight: var(--weight-semibold); }
}

/* Home hero headline: always exactly three lines (one sentence each), responsive on all widths.
   Each sentence is its own non-wrapping line; font scales so the longest line always fits. */
.hero h1{ text-wrap: normal; max-width: none; font-size: clamp(1.4rem, 6.5vw, 3.5rem); line-height: 1.12; letter-spacing: -0.005em; }
.hero h1 span{ display: block; white-space: nowrap; }

/* Lower the hero floor so the longest line always keeps side margin on the narrowest phones */
.hero h1{ font-size: clamp(1.2rem, 6vw, 3.5rem); }

/* English hero copy runs longer than German — stack the hero one breakpoint (~100px) earlier */
@media (max-width: 1180px){
  html[lang="en"] .hero__grid{ grid-template-columns: 1fr; }
}

/* Tamil hero sentences are much longer — allow each one to wrap onto more lines instead of
   overflowing (which caused the overlap), and calm the size for a balanced hero. */
html[lang="ta"] .hero h1{ font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.3; text-wrap: balance; }
html[lang="ta"] .hero h1 span{ white-space: normal; }

/* Mobile data tables: clean single column — row title, then each value as a labeled block (heading + subtext) */
@media (max-width: 680px){
  .data-table td{ display: block; width: 100%; text-align: left; padding: 0; border: 0; }
  .data-table td::before{ content: none; }
  .data-table td:first-child{ font-size: 1.05rem; font-weight: var(--weight-bold); margin-bottom: 8px; }
  .data-table td:not(:first-child)::before{ content: attr(data-label); display: block; font-size: var(--text-caption); font-weight: var(--weight-bold); color: var(--color-muted); margin: 10px 0 2px; }
}

/* Constrain the page-tail cards to the container width (no overflow on narrow phones) */
.page-tail__stack{ grid-template-columns: minmax(0, 1fr); }
/* On mobile, hide the table head entirely (labels come from data-label) to avoid any overflow */
@media (max-width: 680px){ .data-table thead{ display: none; } }

/* Rank rows on mobile: clean vertical stack (pill, then description, then status) */
@media (max-width: 560px){
  .rank-row{ display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
  .rank-row > strong:last-child{ color: var(--color-muted); font-weight: var(--weight-semibold); }
}

/* FINAL: tail bands collapse to one column on tablet/mobile (matches CTA breakpoint),
   buttons go full width. Placed last so it always wins the cascade. */
@media (max-width: 1080px){
  .steuer-band{ grid-template-columns: 1fr; }
  .steuer-band > div{ min-width: 0; }
  .steuer-band .button{ width: 100%; min-width: 0; justify-self: stretch; }
}

/* Rank rows on mobile: small vertical connector line between the steps */
@media (max-width: 560px){
  .rank-row{ position: relative; }
  .rank-row:not(:last-child)::after{ content: ""; position: absolute; left: 26px; bottom: -9px; width: 2px; height: 9px; background: color-mix(in srgb, var(--color-primary) 38%, var(--color-border) 62%); }
}

/* Rank rows on mobile: pill │ status │ description in a row with thin vertical dividers */
@media (max-width: 560px){
  .rank-row{ display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0; }
  .rank-row .rank-pill{ order: 1; margin-right: 12px; }
  .rank-row > strong:last-child{ order: 2; padding-left: 12px; border-left: 2px solid color-mix(in srgb, var(--color-primary) 32%, var(--color-border) 68%); color: var(--color-muted); font-weight: var(--weight-semibold); }
  .rank-row span{ order: 3; flex: 1 1 140px; margin-left: 12px; padding-left: 12px; border-left: 2px solid color-mix(in srgb, var(--color-primary) 32%, var(--color-border) 68%); }
  .rank-row:not(:last-child)::after{ content: none; }
}

/* Rank rows on mobile: clean, no divider lines — pill + status on one line, description below */
@media (max-width: 560px){
  .rank-row{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
  .rank-row .rank-pill{ order: 1; margin: 0; }
  .rank-row > strong:last-child{ order: 2; padding: 0; border: 0; margin: 0; color: var(--color-muted); font-weight: var(--weight-semibold); }
  .rank-row span{ order: 3; flex: 1 1 100%; padding: 0; border: 0; margin: 0; }
  .rank-row:not(:last-child)::after{ content: none; }
}

/* Rank rows on mobile: restore the clean single-column stack (pill, description, status), no lines */
@media (max-width: 560px){
  .rank-row{ display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
  .rank-row .rank-pill{ order: 0; margin: 0; }
  .rank-row span{ order: 0; flex: none; padding: 0; border: 0; margin: 0; }
  .rank-row > strong:last-child{ order: 0; padding: 0; border: 0; margin: 0; color: var(--color-muted); font-weight: var(--weight-semibold); }
  .rank-row:not(:last-child)::after{ content: none; }
}

/* Mobile: scale the Steuern band heading down so long compound words fit; break-safety on headings */
@media (max-width: 560px){
  .steuer-band h2{ font-size: clamp(1.4rem, 6.2vw, 1.95rem); }
  .steuer-band h2, .visual-title, .split-title, .card h3, .compare-box h3, .scenario-box h3, .freebie__body h2{ overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
}

/* Slightly smaller headline inside the green hero panel (only this one) */
.hero-panel h2{ font-size: clamp(1.75rem, 2.4vw, 2.45rem); }

/* Subpage (page-hero) headings use the same size curve as the home hero */
.page-hero h1{ font-size: clamp(1.2rem, 6vw, 3.5rem); }

/* --- Heading & spacing consistency pass --- */
/* Number badges (20% / 10%) a touch smaller */
.badge{ font-size: 0.825rem; }
/* Rank label matches the info-panel heading next to it */
.rank-title{ font-size: var(--text-card); }
/* Section/block headings all use the general section-heading size */
.split-title, .visual-title{ font-size: var(--text-section); }
.split-title{ margin-top: clamp(42px, 4.5vw, 64px); }
#renovieren h1{ font-size: var(--text-section); }
/* tighter gap for closely-related blocks */
.mt-sm{ margin-top: clamp(22px, 2.8vw, 34px); }

/* A touch more breathing room above section sub-headings */
.split-title{ margin-top: clamp(50px, 5.2vw, 76px); }
/* Scenario boxes are white cards (not tinted) */
.scenario-box{ background: var(--color-surface); }

/* Mobile headings: wrap at spaces, never auto-hyphenate words that would otherwise fit */
@media (max-width: 760px){
  .section-head h2, .page-hero h1, .steuer-band h2, .visual-title, .split-title,
  .card h3, .compare-box h3, .scenario-box h3, .freebie__body h2,
  .topic-card h2, .knowledge-card h2, .cta-band h2, .split-band h2, .split-band h3{
    hyphens: manual;
    -webkit-hyphens: manual;
    overflow-wrap: break-word;
  }
}