/* XPONext: gemeinsames Stylesheet aller Seiten (seit Relaunch Oktober 2026).
   Farben und Schrift wie im Logo: Grün #1B6B45, Inter (selbst gehostet).
   Kopf- und Fußzeile kommen aus _content/layout.py, siehe README. */

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

:root {
  --green: #1B6B45;
  --green-dark: #134D32;
  --green-ink: #0F3A26;
  --green-50: #EFF6F2;
  --green-100: #DCEDE3;
  --ink: #0D0D0D;
  --text: #374151;
  --muted: #5F6670;
  --line: #E5E7EB;
  --soft: #F6F7F5;
  --dark: #0E1712;
  --radius: 14px;
  --radius-lg: 22px;
  --gutter: 20px;
  --max: 1160px;
  --section: clamp(4rem, 8vw, 6.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 4px; }
.offer--dark :focus-visible, .cta-band :focus-visible, .site-footer :focus-visible { outline-color: #fff; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; background: var(--ink); color: #fff; padding: 0.6rem 1rem; border-radius: 8px; z-index: 300; }
.skip-link:focus { top: 12px; }

/* ── Typografie ─────────────────────────────────────────── */
h1, h2, h3, h4 { color: var(--ink); line-height: 1.12; letter-spacing: -0.02em; overflow-wrap: break-word; hyphens: manual; }
@media (max-width: 480px) { h1, h2 { hyphens: auto; } }
h1 { font-size: clamp(2.3rem, 5.4vw, 4.1rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.03; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); font-weight: 780; letter-spacing: -0.03em; }
h3 { font-size: 1.22rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
h1 em, h2 em { font-style: normal; color: var(--green); }
p + p { margin-top: 1em; }
strong { color: var(--ink); font-weight: 650; }
.eyebrow { display: inline-block; font-size: 0.8rem; font-weight: 650; letter-spacing: 0.09em; text-transform: uppercase; color: var(--green); margin-bottom: 1rem; }
.lead { font-size: clamp(1.08rem, 1.6vw, 1.22rem); line-height: 1.6; color: var(--text); max-width: 40rem; }
.muted { color: var(--muted); }
.small { font-size: 0.9rem; }

/* ── Layout ─────────────────────────────────────────────── */
.container { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(760px + 2 * var(--gutter)); }
.section { padding-block: var(--section); }
.section--soft { background: var(--soft); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.section-head p { margin-top: 1rem; }
.split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split--top { align-items: start; }
.split > *, .contact-grid > *, .with-aside > *, .hero__grid > *, .cta-band__grid > * { min-width: 0; }
.section-head + p + .ph, p + .ph--block { margin-top: 1rem; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split--wide-left { grid-template-columns: 1.15fr 0.85fr; } }

/* ── Buttons ────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.9rem 1.5rem; border-radius: 10px; font-weight: 650; font-size: 1rem; line-height: 1.2; border: 1.5px solid transparent; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; text-align: center; }
.btn--primary { background: var(--green); color: #fff; }
.btn--primary:hover { background: var(--green-dark); }
.btn--secondary { background: #fff; color: var(--ink); border-color: #D1D5DB; }
.btn--secondary:hover { border-color: var(--green); color: var(--green); }
.btn--light { background: #fff; color: var(--green-ink); }
.btn--light:hover { background: var(--green-50); }
.btn--ghost-light { color: #fff; border-color: rgba(255,255,255,0.35); }
.btn--ghost-light:hover { border-color: #fff; }
.btn--sm { padding: 0.6rem 1rem; font-size: 0.92rem; border-radius: 8px; min-height: 44px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; }
.cta-note { font-size: 0.88rem; color: var(--muted); margin-top: 0.9rem; }
.text-link { color: var(--green); font-weight: 650; display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; }
.text-link:hover { color: var(--green-dark); text-decoration: underline; text-underline-offset: 3px; }
.inline-link { color: var(--green); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(27,107,69,0.35); text-underline-offset: 3px; }

/* ── Kopfzeile ──────────────────────────────────────────── */
.site-header a { color: inherit; opacity: 1; }
.site-header .btn--primary { color: #fff; }
.site-header.nav-open { z-index: 10000; }
.site-header .header-phone, .site-header .brand { color: var(--ink); }
.site-header .header-phone:hover { color: var(--green); }
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.96); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--line); }
.site-header__inner { display: flex; align-items: center; gap: 1.5rem; min-height: 68px; }
.brand { display: inline-flex; align-items: center; min-height: 44px; gap: 0.55rem; font-size: 1.18rem; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; flex-shrink: 0; }
.brand svg { width: 32px; height: 32px; }
.brand em { font-style: normal; font-weight: 400; color: var(--green); }
.site-nav { margin-left: auto; }
.site-nav > ul { list-style: none; display: flex; gap: 0.3rem; align-items: center; }
.site-nav > ul > li { position: relative; }
.site-nav > ul > li > a { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.55rem 0.8rem; border-radius: 8px; font-size: 0.96rem; font-weight: 550; color: var(--ink); }
.site-nav > ul > li > a:hover { background: var(--soft); }
.site-nav a[aria-current="page"] { color: var(--green); }
.site-nav .caret { width: 10px; height: 10px; transition: transform 0.15s; }
.site-nav .sub { display: none; position: absolute; top: calc(100% + 6px); left: -0.5rem; width: 520px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 18px 40px rgba(13,13,13,0.10); padding: 1.1rem; grid-template-columns: 1fr 1fr; gap: 1rem; }
.site-nav .sub::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.site-nav .has-sub:hover .sub, .site-nav .has-sub:focus-within .sub { display: grid; }
.site-nav .has-sub:hover .caret { transform: rotate(180deg); }
.sub__group-title { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 0.2rem 0.6rem 0.4rem; }
.sub a { display: block; padding: 0.5rem 0.6rem; border-radius: 8px; color: var(--ink); font-size: 0.94rem; font-weight: 550; }
.sub a span { display: block; font-size: 0.82rem; font-weight: 400; color: var(--muted); margin-top: 0.1rem; }
.sub a:hover { background: var(--green-50); }
.sub__all { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 0.6rem; }
.sub__all a { color: var(--green); font-weight: 650; }
.site-header__actions { display: flex; align-items: center; gap: 0.9rem; }
.header-phone { font-size: 0.92rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
.header-phone:hover { color: var(--green); }
.nav-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 1px; transition: transform 0.2s, opacity 0.2s; }
.site-nav__mobile { display: none; }

@media (max-width: 1080px) {
  .header-phone { display: none; }
}
@media (max-width: 900px) {
  .site-header__inner { gap: 0.75rem; min-height: 62px; }
  .nav-toggle { display: inline-flex; }
  .site-header__actions { margin-left: auto; }
  .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 16px 30px rgba(13,13,13,0.08); max-height: calc(100vh - 62px); overflow-y: auto; padding: 0.5rem var(--gutter) 1.5rem; }
  .nav-open .site-nav { display: block; }
  .site-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav > ul > li > a { display: flex; padding: 0.95rem 0; border-radius: 0; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
  .site-nav > ul > li > a:hover { background: none; }
  .site-nav .caret { display: none; }
  .site-nav .sub, .site-nav .has-sub:hover .sub { display: block; position: static; width: auto; border: 0; box-shadow: none; padding: 0.4rem 0 0.6rem; }
  .sub__group-title { padding-left: 0; padding-top: 0.6rem; }
  .sub a { padding-left: 0; display: flex; align-items: center; min-height: 44px; }
  .sub a span { display: none; }
  .sub__all { border-top: 0; padding-top: 0; }
  .site-nav__mobile { display: grid; gap: 0.7rem; margin-top: 1.2rem; }
  .nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
@media (max-width: 420px) {
  .site-header__actions .btn { padding: 0.55rem 0.75rem; font-size: 0.86rem; }
  .brand { font-size: 1.08rem; }
  .brand svg { width: 28px; height: 28px; }
}

/* ── Hero (Startseite) ──────────────────────────────────── */
.hero { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 5.5rem); }
.hero__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 960px) {
  .hero__grid { grid-template-columns: 1.2fr 0.8fr; }
  .hero h1 { font-size: clamp(2.9rem, 4.3vw, 3.6rem); }
  .hero h1 em { white-space: nowrap; }
}
.hero h1 { margin-bottom: 1.4rem; }
/* 3D-Logo (js/hero-logo-3d.js). Statisches Logo, bis das 3D-Bild steht */
.hero-logo3d { position: relative; width: clamp(76px, 8vw, 104px); aspect-ratio: 1; margin: 0 0 1.1rem -6px; }
.hero-logo3d__static { position: absolute; inset: 13%; width: 74%; height: 74%; transition: opacity 0.3s; }
.hero-logo3d__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.3s; }
.hero-logo3d.is-3d .hero-logo3d__static { opacity: 0; }
.hero-logo3d.is-3d .hero-logo3d__canvas { opacity: 1; }
.hero .lead { margin-bottom: 2rem; }
.trust-row { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; margin-top: 1.8rem; font-size: 0.92rem; color: var(--muted); }
.trust-row li { display: inline-flex; align-items: center; gap: 0.45rem; }
.trust-row svg { width: 18px; height: 18px; color: var(--green); flex-shrink: 0; }
.trust-row img { width: 22px; height: 22px; }
.badge-icon { display: inline-block; width: 22px; height: 22px; flex-shrink: 0; background: url('../assets/google-ads-badge.webp') center / contain no-repeat; }
/* Freisteller (transparentes WebP) auf Weiß: heller Schimmer hinter den Personen, damit die weißen
   Hemden nicht im Hintergrund verschwinden; unten weich ausgeblendet; schwebt ganz leicht */
.hero__media { position: relative; width: 88%; justify-self: center; padding-top: 1rem; background: radial-gradient(ellipse 58% 52% at 50% 50%, var(--green-50) 0%, rgba(239, 246, 242, 0.55) 48%, rgba(255, 255, 255, 0) 74%); }
.hero__media img { width: 100%; height: auto; -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 98%); mask-image: linear-gradient(to bottom, #000 70%, transparent 98%); animation: hero-schweben 9s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes hero-schweben { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-8px) scale(1.012); } }
@media (prefers-reduced-motion: reduce) { .hero__media img { animation: none; } }
.hero__caption { position: relative; margin-top: -2.2rem; border: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: rgba(255,255,255,0.95); border-radius: 12px; padding: 0.85rem 1rem; font-size: 0.9rem; color: var(--text); }
.hero__caption strong { display: block; font-size: 0.95rem; }
.hero__caption a { color: var(--green); font-weight: 650; white-space: nowrap; }
@media (max-width: 480px) { .hero__caption { flex-direction: column; align-items: flex-start; gap: 0.3rem; } }
/* Handy: Porträtzeile statt großem Teamfoto, damit der Hero in den ersten Bildschirm passt */
.hero__team-mini { display: none; }
@media (max-width: 599px) {
  .hero__media { display: none; }
  .hero__team-mini { display: flex; align-items: center; gap: 0.75rem; margin: -0.6rem 0 1.4rem; }
  .hero__face { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; background: var(--soft) center 20% / cover no-repeat; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); }
  .hero__face--tim { background-image: url('../assets/team/tim.webp'); }
  .hero__face--simon { background-image: url('../assets/team/simon.webp'); margin-left: -1.1rem; }
  .hero__team-mini span { font-size: 0.88rem; color: var(--muted); line-height: 1.35; }
  .hero__team-mini strong { display: block; font-size: 0.92rem; }
  .hero .lead { margin-bottom: 1.4rem; }
  .trust-row { margin-top: 1.2rem; gap: 0.4rem 1rem; font-size: 0.86rem; }
}

/* ── Kunden und Branchen ────────────────────────────────── */
.clients { border-block: 1px solid var(--line); padding-block: 2.2rem; }
.clients__label { font-size: 0.85rem; color: var(--muted); margin-bottom: 1.2rem; }
.logo-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.8rem; }
.logo-row > * { min-height: 64px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.4rem; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; padding: 0.4rem 0.95rem; border-radius: 99px; background: var(--soft); border: 1px solid var(--line); font-size: 0.88rem; font-weight: 550; color: var(--ink); }
a.chip:hover { border-color: var(--green); color: var(--green); }
.chip-row__label { font-size: 0.88rem; color: var(--muted); margin-right: 0.3rem; }

/* ── Zwei Angebote ──────────────────────────────────────── */
.offers { display: grid; gap: 1.2rem; }
@media (min-width: 900px) { .offers { grid-template-columns: 1fr 1fr; } }
.offer { border-radius: var(--radius-lg); padding: clamp(1.6rem, 3.5vw, 2.6rem); border: 1px solid var(--line); background: #fff; display: flex; flex-direction: column; }
.offer--dark { background: var(--green-ink); border-color: var(--green-ink); color: #D7E6DD; }
.offer--dark h3, .offer--dark strong { color: #fff; }
.offer--dark .eyebrow { color: #8FD3AE; }
.offer h3 { font-size: clamp(1.5rem, 2.6vw, 1.95rem); letter-spacing: -0.025em; margin-bottom: 0.9rem; }
.offer > p { margin-bottom: 1.4rem; }
.checklist { list-style: none; display: grid; gap: 0.65rem; margin-bottom: 1.6rem; }
.checklist li { position: relative; padding-left: 1.8rem; }
.checklist li::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--green-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%231B6B45' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.8rem no-repeat; }
.offer--dark .checklist li::before { background-color: rgba(255,255,255,0.12); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%238FD3AE' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.service-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.offer--dark .service-links { border-top-color: rgba(255,255,255,0.14); }
.service-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.9rem; font-weight: 600; padding: 0.35rem 0.9rem; border-radius: 99px; border: 1px solid var(--line); color: var(--ink); }
.service-links a:hover { border-color: var(--green); color: var(--green); }
.offer--dark .service-links a { border-color: rgba(255,255,255,0.22); color: #fff; }
.offer--dark .service-links a:hover { border-color: #8FD3AE; color: #8FD3AE; }

/* ── Fallstudien ────────────────────────────────────────── */
.cases { display: grid; gap: 1.2rem; }
@media (min-width: 760px) { .cases { grid-template-columns: repeat(3, 1fr); } }
.case { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.case__media { aspect-ratio: 16 / 10; background: var(--soft); }
.case__body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.case__tag { font-size: 0.78rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--green); }
.case__metric { font-size: 2rem; font-weight: 800; color: var(--ink); letter-spacing: -0.03em; line-height: 1; margin-top: 0.4rem; }
.case__metric small { display: block; font-size: 0.85rem; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-top: 0.35rem; }
.case blockquote { font-size: 0.95rem; border-left: 3px solid var(--green-100); padding-left: 0.8rem; color: var(--text); margin-top: auto; }

/* ── Schritte ───────────────────────────────────────────── */
.steps { list-style: none; display: grid; gap: 1.2rem; counter-reset: step; }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li { counter-increment: step; padding: 1.6rem; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); }
.steps li::before { content: counter(step); display: inline-flex; width: 2.2rem; height: 2.2rem; align-items: center; justify-content: center; border-radius: 50%; background: var(--green); color: #fff; font-weight: 700; margin-bottom: 1rem; }
.steps h3 { margin-bottom: 0.5rem; }
.steps p { font-size: 0.98rem; }
.steps .meta { display: block; font-size: 0.85rem; color: var(--muted); margin-top: 0.8rem; }

/* ── Umschalter (Tabs) ──────────────────────────────────── */
.tabs__list { display: inline-flex; gap: 0.3rem; padding: 0.3rem; border-radius: 12px; background: var(--soft); border: 1px solid var(--line); margin-bottom: 1.5rem; flex-wrap: wrap; }
.tabs__tab { min-height: 44px; padding: 0.55rem 1.1rem; border: 0; border-radius: 9px; background: transparent; font-weight: 650; font-size: 0.98rem; color: var(--text); cursor: pointer; }
.tabs__tab[aria-selected="true"] { background: var(--green); color: #fff; }
.tabs__tab:hover:not([aria-selected="true"]) { background: #fff; }
.tabs__fallback { font-size: 1.1rem; margin: 0 0 1rem; }
.js-tabs .tabs__fallback { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.js-tabs .tabs__panel[hidden] { display: none; }
.tabs:not(.js-tabs) .tabs__list { display: none; }
.tabs:not(.js-tabs) .tabs__panel + .tabs__panel { margin-top: 2rem; }
@media (min-width: 640px) { .steps--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .steps--4 { grid-template-columns: repeat(4, 1fr); } }
.steps .when { display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--green); margin-bottom: 0.4rem; }
.steps--4 li::before { margin-bottom: 0.8rem; }

/* ── Zeitstrahl (Ablauf auf der Startseite) ─────────────── */
.timeline { border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; padding: clamp(1.2rem, 3vw, 2rem); }
.timeline__axis, .timeline__row { display: grid; grid-template-columns: 280px 1fr; gap: 1.5rem; align-items: center; }
.timeline__axis { padding-bottom: 0.8rem; border-bottom: 1px solid var(--line); }
.timeline__axis-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.timeline__ticks { display: grid; grid-template-columns: repeat(12, 1fr); font-size: 0.82rem; font-weight: 650; color: var(--muted); font-variant-numeric: tabular-nums; }
.timeline__ticks span { text-align: center; }
.timeline__rows { list-style: none; }
.timeline__row { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.timeline__row:last-child { border-bottom: 0; padding-bottom: 0.4rem; }
.timeline__label strong { display: block; color: var(--ink); font-size: 1.02rem; }
.timeline__label .when { display: block; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--green); margin: 0.15rem 0 0.3rem; }
.timeline__label p { font-size: 0.92rem; line-height: 1.5; color: var(--text); }
.timeline__track { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); align-items: center; height: 28px; background-image: linear-gradient(to right, var(--line) 1px, transparent 1px); background-size: calc(100% / 12) 100%; }
.timeline__bar { grid-column: var(--from) / var(--end); height: 14px; margin: 0 3px; border-radius: 99px; background: var(--green); transform-origin: left center; }
.timeline__bar--ongoing { background: linear-gradient(90deg, var(--green) 70%, rgba(27,107,69,0.25)); }
.timeline__bar--light { background: repeating-linear-gradient(90deg, var(--green-100) 0 10px, #fff 10px 14px); box-shadow: inset 0 0 0 1.5px var(--green); }
.timeline__mark { grid-column: var(--from); justify-self: center; width: 16px; height: 16px; background: var(--green-ink); transform: rotate(45deg); border-radius: 3px; }
.timeline__note { font-size: 0.86rem; color: var(--muted); margin-top: 1rem; }
.timeline.is-scroll .timeline__bar { transform: scaleX(var(--p, 0)); transition: transform 0.15s linear; }
.timeline.is-scroll .timeline__mark { opacity: var(--p, 0); transform: rotate(45deg) scale(calc(0.4 + var(--p, 0) * 0.6)); transition: opacity 0.15s linear, transform 0.15s linear; }
@media (max-width: 760px) {
  .timeline__axis, .timeline__row { grid-template-columns: 1fr; gap: 0.6rem; }
  .timeline__axis-label { display: none; }
  .timeline__axis { position: sticky; top: 62px; background: #fff; z-index: 1; }
}

/* ── Team ───────────────────────────────────────────────── */
/* wie .hero__media: Freisteller auf hellem Grund, unten ausgeblendet */
.team-photo { position: relative; width: 92%; justify-self: center; background: radial-gradient(ellipse 58% 52% at 50% 50%, var(--green-50) 0%, rgba(239, 246, 242, 0.55) 48%, rgba(255, 255, 255, 0) 74%); }
.team-photo img { width: 100%; height: auto; -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 98%); mask-image: linear-gradient(to bottom, #000 70%, transparent 98%); animation: hero-schweben 9s ease-in-out infinite; transform-origin: 50% 100%; }
@media (prefers-reduced-motion: reduce) { .team-photo img { animation: none; } }
.people { display: grid; gap: 1rem; margin-top: 1.6rem; }
@media (min-width: 560px) { .people { grid-template-columns: 1fr 1fr; } }
.person { display: flex; gap: 0.9rem; align-items: center; }
.person img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; flex-shrink: 0; }
.person strong { display: block; font-size: 1rem; }
.person span { font-size: 0.88rem; color: var(--muted); }

.person-card { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.person-card__img { aspect-ratio: 1 / 1; overflow: hidden; background: var(--soft); }
.person-card__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
/* Freisteller (transparentes Bild): ganz zeigen, unten bündig, auf hellem Schimmer wie im Hero */
.person-card__img--frei { background: radial-gradient(ellipse 60% 55% at 50% 55%, var(--green-50) 0%, var(--soft) 75%); }
.person-card__img--frei { display: flex; justify-content: center; align-items: flex-end; }
.person-card__img--frei img { width: auto; height: 90%; object-fit: initial;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(to bottom, #000 72%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(to bottom, #000 72%, transparent 100%);
  mask-composite: intersect; }
.person-card__body { padding: 1.5rem; display: grid; gap: 0.6rem; }
.person-card__role { color: var(--green); font-weight: 650; font-size: 0.92rem; }
.person-grid { display: grid; gap: 1.2rem; }
@media (min-width: 760px) { .person-grid { grid-template-columns: 1fr 1fr; } }

/* ── Werte-Liste / Fakten ───────────────────────────────── */
.facts { display: grid; gap: 1.2rem; }
@media (min-width: 760px) { .facts { grid-template-columns: repeat(3, 1fr); } }
.fact { padding-top: 1.1rem; border-top: 2px solid var(--ink); }
.fact h3 { margin-bottom: 0.45rem; }
.fact p { font-size: 0.98rem; }

/* ── FAQ ────────────────────────────────────────────────── */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.25rem 0; font-size: 1.08rem; font-weight: 650; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex-shrink: 0; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 4v12M4 10h12' stroke='%230D0D0D' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 0.85rem no-repeat; transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .answer { padding: 0 0 1.4rem; max-width: 46rem; }
.faq .answer ul { margin: 0.8rem 0 0 1.2rem; display: grid; gap: 0.4rem; }

/* ── Kontakt ────────────────────────────────────────────── */
.contact-grid { display: grid; gap: 1.2rem; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 0.9fr 1.1fr; align-items: start; } }
.contact-ways { display: grid; gap: 0.9rem; }
.contact-way { display: flex; gap: 1rem; align-items: flex-start; padding: 1.2rem 1.3rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.contact-way svg { width: 24px; height: 24px; color: var(--green); flex-shrink: 0; margin-top: 0.15rem; }
.contact-way strong { display: block; font-size: 1.02rem; }
.contact-way a { color: var(--green); font-weight: 650; display: inline-flex; align-items: center; min-height: 44px; }
.contact-way p { font-size: 0.94rem; margin-top: 0.2rem; }
.form-card { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.4rem, 3vw, 2rem); background: #fff; }
.form-card h3 { margin-bottom: 0.4rem; }
.form-card > p { font-size: 0.95rem; margin-bottom: 1.2rem; }
.contact-form { display: grid; gap: 0.8rem; }
.contact-form label { display: grid; gap: 0.35rem; font-size: 0.9rem; font-weight: 600; color: var(--ink); }
.contact-form input, .contact-form textarea { width: 100%; font: inherit; font-size: 1rem; padding: 0.8rem 0.9rem; border: 1px solid #D1D5DB; border-radius: 10px; background: #fff; color: var(--ink); }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--green); }
.contact-form input:focus-visible, .contact-form textarea:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.contact-form textarea { min-height: 120px; resize: vertical; }
.contact-form .row-2 { display: grid; gap: 0.8rem; }
@media (min-width: 560px) { .contact-form .row-2 { grid-template-columns: 1fr 1fr; } }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-status { margin-top: 1rem; padding: 0.9rem 1rem; border-radius: 10px; background: var(--green-50); color: var(--green-ink); font-weight: 550; }
.form-status.is-error { background: #FEF2F2; color: #991B1B; }
.form-legal { font-size: 0.82rem; color: var(--muted); }
.form-legal a { text-decoration: underline; }

/* ── CTA-Band ───────────────────────────────────────────── */
.cta-band { background: var(--green-ink); color: #D7E6DD; padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.cta-band h2 { color: #fff; max-width: 40rem; }
.cta-band h2 em { color: #8FD3AE; }
.cta-band p { margin-top: 1rem; max-width: 36rem; }
.cta-band .btn-row { margin-top: 2rem; }
.cta-band .cta-note { color: #A9C4B4; }
.cta-band__grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .cta-band__grid { grid-template-columns: 1.3fr 0.7fr; } }
.cta-band__person { display: flex; gap: 1rem; align-items: center; background: rgba(255,255,255,0.07); border-radius: var(--radius); padding: 1rem 1.1rem; }
.cta-band__person img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.cta-band__person strong { color: #fff; display: block; }
.cta-band__person a { color: #8FD3AE; font-weight: 650; display: inline-flex; align-items: center; min-height: 44px; }

/* ── Unterseiten-Kopf ───────────────────────────────────── */
.page-hero { padding-block: clamp(2.2rem, 5vw, 4rem) clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--soft), #fff); }
.page-hero h1 { font-size: clamp(2rem, 4.4vw, 3.3rem); max-width: 50rem; margin-bottom: 1.1rem; }
.page-hero .lead { max-width: 44rem; }
.page-hero .btn-row { margin-top: 1.8rem; }
.breadcrumb { font-size: 0.86rem; color: var(--muted); margin-bottom: 1.4rem; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.breadcrumb li + li::before { content: "/"; margin-right: 0.3rem; color: #C4C8CE; }
.breadcrumb li { display: flex; align-items: center; }
.breadcrumb a, .breadcrumb [aria-current] { display: inline-flex; align-items: center; min-height: 44px; }
.breadcrumb a:hover { color: var(--green); }
.breadcrumb { margin-bottom: 0.6rem; margin-top: -0.75rem; }
.breadcrumb li + li::before { margin-right: 0.3rem; }
.breadcrumb [aria-current] { color: var(--ink); font-weight: 600; }

/* ── Fließtext (Leistungs-, Blog-, Rechtsseiten) ────────── */
.prose { max-width: 46rem; }
.prose > * + * { margin-top: 1.1rem; }
.prose h2 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); margin-top: 2.6rem; }
.prose h3 { margin-top: 1.8rem; }
.prose ul, .prose ol { padding-left: 1.3rem; display: grid; gap: 0.5rem; }
.prose a { color: var(--green); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(27,107,69,0.3); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: var(--green); }
.capsule { background: var(--green-50); border-left: 4px solid var(--green); border-radius: 12px; padding: 1.3rem 1.5rem; color: var(--ink); font-size: 1.08rem; }
.sources { font-size: 0.88rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 2.4rem !important; }
.table-wrap { overflow-x: auto; }
.content-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.content-table th, .content-table td { border-bottom: 1px solid var(--line); padding: 0.75rem 0.8rem; text-align: left; vertical-align: top; }
.content-table th { font-weight: 700; color: var(--ink); background: var(--soft); }
.page-meta { font-size: 0.86rem; color: var(--muted); margin-top: 1rem; }
/* Tabellen, die auf dem Handy als Karten erscheinen (td mit data-label) */
@media (max-width: 599px) {
  .content-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .content-table--stack, .content-table--stack tbody, .content-table--stack tr, .content-table--stack td { display: block; width: 100%; }
  .content-table--stack tr { border: 1px solid var(--line); border-radius: 12px; padding: 0.4rem 0.9rem; margin-bottom: 0.7rem; background: #fff; }
  .content-table--stack td { border: 0; padding: 0.35rem 0; }
  .content-table--stack td::before { content: attr(data-label); display: block; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
}

.related { margin-top: 3rem; }
.related h2 { font-size: 1.2rem; margin-bottom: 1rem; }
.related-grid { display: grid; gap: 0.7rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.related-grid a { display: block; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 12px; font-weight: 600; color: var(--ink); font-size: 0.95rem; }
.related-grid a:hover { border-color: var(--green); color: var(--green); }

/* ── Seite mit Randspalte (Leistungsseiten) ─────────────── */
.with-aside { display: grid; gap: 3rem; }
@media (min-width: 1000px) { .with-aside { grid-template-columns: minmax(0, 46rem) 1fr; gap: 4rem; align-items: start; } }
.aside-card { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.5rem; background: #fff; display: grid; gap: 1rem; }
@media (min-width: 1000px) { .aside-card { position: sticky; top: 92px; } }
.aside-card .person img { width: 52px; height: 52px; }
.aside-card h2 { font-size: 1.15rem; }
.aside-card ul a { display: flex; align-items: center; min-height: 44px; }
.aside-card ul { list-style: none; display: grid; gap: 0; font-size: 0.94rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.aside-card ul a:hover { color: var(--green); }
.aside-card ul a[aria-current] { color: var(--green); font-weight: 650; }

/* ── Leistungsübersicht ─────────────────────────────────── */
.pillar { padding-block: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--line); }
.pillar:first-of-type { border-top: 0; }
.pillar__head { display: grid; gap: 1rem; margin-bottom: 2rem; }
@media (min-width: 900px) { .pillar__head { grid-template-columns: 1fr 1fr; align-items: end; } }
.service-grid { display: grid; gap: 1rem; }
@media (min-width: 760px) { .service-grid { grid-template-columns: repeat(2, 1fr); } }
.service-card { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; transition: border-color 0.15s; }
.service-card:hover { border-color: var(--green); }
.service-card h3 { font-size: 1.15rem; }
.service-card p { font-size: 0.97rem; }
.service-card ul { list-style: none; display: grid; gap: 0.3rem; font-size: 0.92rem; color: var(--muted); }
.service-card ul li { position: relative; padding-left: 0.9rem; }
.service-card ul li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
.service-card .text-link { margin-top: auto; padding-top: 0.6rem; }
.tool-cards { display: grid; gap: 1rem; }
@media (min-width: 760px) { .tool-cards { grid-template-columns: 1fr 1fr; } }

/* ── Zeitwert-Rechner (KI-Automatisierung) ──────────────── */
.calc { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.3rem, 3vw, 1.8rem); background: #fff; margin-top: 2rem; }
.calc h2 { margin-top: 0 !important; font-size: 1.35rem; }
.calc__grid { display: grid; gap: 0.5rem 1.5rem; margin: 1.2rem 0; }
.calc__grid label { display: flex; justify-content: space-between; font-weight: 600; color: var(--ink); font-size: 0.95rem; margin-top: 0.6rem; }
.calc__grid output { font-variant-numeric: tabular-nums; color: var(--green); font-weight: 700; }
.calc input[type=range] { width: 100%; accent-color: var(--green); height: 44px; }
.calc__result { font-size: 1.1rem; color: var(--ink); background: var(--green-50); border-radius: 10px; padding: 0.9rem 1rem; }
.calc__result strong { color: var(--green-ink); font-size: 1.25rem; }

/* ── Situationen (Landingpages) ─────────────────────────── */
.situations { display: grid; gap: 1rem; }
@media (min-width: 820px) { .situations { grid-template-columns: repeat(3, 1fr); } }
.situation { padding: 1.5rem; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); }
.situation h3 { font-size: 1.08rem; margin-bottom: 0.5rem; }
.situation p { font-size: 0.97rem; }
.tags { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1rem; }
.tag { font-size: 0.85rem; padding: 0.3rem 0.7rem; border-radius: 8px; background: var(--soft); border: 1px solid var(--line); color: var(--ink); }
.objections { display: grid; gap: 1rem; }
@media (min-width: 820px) { .objections { grid-template-columns: repeat(3, 1fr); } }
.objection { padding-top: 1rem; border-top: 2px solid var(--green); }
.objection h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.objection p { font-size: 0.96rem; }

/* ── Platzhalter (vor dem Livegang ersetzen oder entfernen) ── */
.ph { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem; border: 2px dashed #C9A227; border-radius: 12px; background: repeating-linear-gradient(135deg, #FFFBEB, #FFFBEB 10px, #FEF3C7 10px, #FEF3C7 20px); color: #78590A; font-size: 0.82rem; font-weight: 600; line-height: 1.4; min-height: 64px; }
.ph::before { content: "Platzhalter"; position: absolute; top: 6px; left: 8px; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; }
.ph--block { display: block; text-align: left; padding: 1.6rem 1.2rem 1.2rem; }
.case__media.ph, .person-card__img.ph { border-radius: 0; border-width: 0 0 2px 0; }

/* ── Fußzeile ───────────────────────────────────────────── */
.site-footer { background: var(--dark); color: #A7B3AC; padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; font-size: 0.94rem; }
.site-footer a { color: inherit; }
.site-footer p, .site-footer li, .site-footer address { color: inherit; margin: 0; }
.site-footer ul { margin: 0; padding: 0; color: inherit; }
.footer-brand p { margin-top: 0; }
.footer-brand address { margin-top: 1rem; }
.site-footer a:hover { color: #fff; }
.footer-brand address a { color: #fff; display: inline-flex; align-items: center; min-height: 44px; }
.footer-brand address { line-height: 1.5; }
.footer-grid { display: grid; gap: 2.2rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.footer-brand { grid-column: 1 / -1; max-width: 26rem; }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } .footer-brand { grid-column: auto; } }
.footer-brand .brand { color: #fff; margin-bottom: 1rem; }
.footer-brand .brand em { color: #8FD3AE; }
.footer-brand address { font-style: normal; margin-top: 1rem; line-height: 1.7; }
.footer-brand address a { color: #fff; }
.footer-col h2 { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #fff; margin-bottom: 0.9rem; }
.footer-col ul { list-style: none; display: grid; gap: 0; }
.footer-col ul a, .footer-bottom ul a, .footer-bottom .cookie-reopen { display: inline-flex; align-items: center; min-height: 44px; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 2.8rem; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,0.1); font-size: 0.86rem; }
.footer-bottom ul { list-style: none; display: flex; flex-wrap: wrap; gap: 1.2rem; }
.cookie-reopen { background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font-size: inherit; }
.cookie-reopen:hover { color: #fff; }

/* ── Bewegung reduzieren ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ── Live-Stand (Branch website-live) ───────────────────────────
   Gelbe Platzhalter sind ausgeblendet, Abschnitte ohne Inhalt tragen das Attribut hidden.
   Beim Einsetzen echter Inhalte: Platzhalter ersetzen und hidden am Abschnitt entfernen.
   Ganze Liste: python3 _content/build_all.py */
.ph { display: none !important; }
/* Zweispaltiger Abschnitt mit einer ausgeblendeten Spalte: übrige Spalte allein, gut lesbar breit */
.split:has(> [hidden]) { grid-template-columns: 1fr; max-width: 52rem; }

/* ── Kampagnenseiten (/fuer/…, aufbau: kampagne) ───────────
   Ruhiger und feiner als die Startseite: kleinere, leichtere Überschriften, weniger Abstand, alles soll
   abschnittsweise auf einen Bildschirm passen. */
.kampagne .hero { padding-block: clamp(1.8rem, 3.5vw, 2.8rem) clamp(2rem, 4vw, 3rem); }
.kampagne .hero h1 { font-size: clamp(1.8rem, 2.8vw, 2.3rem); font-weight: 680; letter-spacing: -0.02em; line-height: 1.12; margin-bottom: 1rem; -webkit-hyphens: manual; hyphens: manual; }
.kampagne .hero .lead { font-size: 1rem; margin-bottom: 1.4rem; max-width: 36rem; }
.kampagne .hero-logo3d { width: 56px; margin-bottom: 0.8rem; }
.kampagne .hero__media { width: 76%; }
.kampagne .hero__caption { font-size: 0.84rem; padding: 0.7rem 0.9rem; flex-direction: column; align-items: flex-start; gap: 0.2rem; }
.kampagne .hero__caption strong { font-size: 0.88rem; }
.kampagne .eyebrow { font-size: 0.72rem; margin-bottom: 0.7rem; }
.kampagne .btn { padding: 0.72rem 1.2rem; font-size: 0.94rem; border-radius: 9px; }
.kampagne .cta-note { font-size: 0.84rem; }
.kampagne .trust-row { font-size: 0.84rem; margin-top: 1.2rem; }
.kampagne .section { padding-block: clamp(2.2rem, 4vw, 3.2rem); }
.kampagne h2 { font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 650; letter-spacing: -0.015em; }
.kampagne .section-head { margin-bottom: 1.3rem; }
.kampagne .section-head .lead { font-size: 0.95rem; margin-top: 0.5rem; }
.kampagne .offer { padding: clamp(1.2rem, 2.2vw, 1.6rem); border-radius: 12px; }
.kampagne .offer h3 { font-size: 1.1rem; font-weight: 650; margin-bottom: 0.45rem; }
.kampagne .offer > p { font-size: 0.93rem; margin-bottom: 0.9rem; }
.kampagne .checklist { gap: 0.35rem; margin-bottom: 1rem; font-size: 0.9rem; }
.kampagne .checklist li { padding-left: 1.6rem; }
.kampagne .checklist li::before { width: 1rem; height: 1rem; }
.kampagne .service-links { padding-top: 0.8rem; }
.kampagne .service-links a { min-height: 38px; font-size: 0.84rem; padding: 0.25rem 0.8rem; }
.kampagne .faq summary { font-size: 0.95rem; font-weight: 600; padding: 0.85rem 0; }
.kampagne .faq .answer p { font-size: 0.93rem; }
.kampagne .cta-band { padding-block: clamp(2.2rem, 4vw, 3.2rem); }
.kampagne .cta-band p { font-size: 0.95rem; }

/* Video im Hero */
.hero__media--video { width: 100%; padding-top: 0; background: none; }
.kampagne .hero__media--video { width: 100%; }
.video-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius); background: var(--green-ink); }
.video-frame--leer { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.9rem; color: #A9C4B4; font-size: 0.9rem; }
.video-frame__play { width: 64px; height: 64px; border-radius: 50%; background: #fff; position: relative; }
.video-frame__play::after { content: ""; position: absolute; left: 25px; top: 20px; border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent var(--green-ink); }
.hero__media--video .hero__caption { margin-top: 0.8rem; }
@media (max-width: 599px) { .hero__media--video { display: block; } }

/* Kacheln wie in den Konzepten */
.kacheln { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.kachel { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 0.85rem 1rem; }
.kachel strong { display: block; font-size: 1.2rem; font-weight: 650; color: var(--green-ink); letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 0.3rem; }
.kachel span { display: block; font-size: 0.86rem; line-height: 1.5; color: var(--text); }
.kacheln__quelle { font-size: 0.8rem; color: var(--muted); margin-top: 0.6rem; }

/* Feld für GEO-Check und Website-Check */
.check-feld { margin-top: 1.2rem; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem; }
.kacheln + .check-feld, .kacheln__quelle + .check-feld { margin-top: 1.2rem; }
.section-head + .check-feld { margin-top: 0; }
.check-feld__label { display: block; font-size: 0.85rem; font-weight: 650; color: var(--ink); margin-bottom: 0.5rem; }
.check-feld__zeile { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.check-feld__eingabe { flex: 1 1 260px; min-height: 44px; padding: 0.6rem 0.9rem; font: inherit; font-size: 0.95rem; border: 1.5px solid #D1D5DB; border-radius: 10px; background: #fff; color: var(--ink); }
.check-feld__eingabe:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-100); }
.check-feld__hinweis { font-size: 0.82rem; color: var(--muted); margin-top: 0.6rem; }
@media (max-width: 599px) { .check-feld__zeile .btn { width: 100%; } }

/* Zeitersparnis-Rechner (js/rechner.js) */
.rechner { display: grid; gap: 1rem; }
@media (min-width: 860px) { .rechner { grid-template-columns: 1.25fr 0.75fr; align-items: stretch; } }
.rechner__felder { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.2rem; display: grid; gap: 0.85rem; }
.rechner__feld label { display: flex; align-items: baseline; gap: 0.6rem; font-size: 0.88rem; font-weight: 600; color: var(--ink); }
.rechner__feld label span:first-child { flex: 1; }
.rechner__feld output { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--green); }
.rechner__einheit { font-weight: 600; color: var(--green); margin-left: -0.35rem; }
.rechner__hinweis { display: block; font-size: 0.8rem; color: var(--muted); margin-top: 0.1rem; }
.rechner__feld input[type="range"] { width: 100%; margin-top: 0.45rem; accent-color: var(--green); min-height: 28px; }
.rechner__ergebnis { background: var(--green-ink); color: #D7E6DD; border-radius: 12px; padding: 1.2rem 1.3rem; display: flex; flex-direction: column; }
.rechner__ergebnis .eyebrow { color: #8FD3AE; margin-bottom: 0.6rem; }
.rechner__gross { font-size: clamp(1.8rem, 3vw, 2.2rem); font-weight: 680; color: #fff; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.rechner__unter { margin-top: 0.2rem; font-size: 0.95rem; }
.rechner__zahlen { margin-top: 1.2rem; display: grid; gap: 0.5rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.14); }
.rechner__zahlen div { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.88rem; }
.rechner__zahlen dt { color: #A9C4B4; }
.rechner__zahlen dd { color: #fff; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.rechner__fuss { margin-top: auto; padding-top: 1rem; font-size: 0.8rem; color: #A9C4B4; line-height: 1.5; }

/* Schritte der Zusammenarbeit in einer Zeile, wie in den Konzepten */
.schritte { list-style: none; display: grid; gap: 0.8rem; counter-reset: schritt; }
@media (min-width: 760px) { .schritte { grid-template-columns: repeat(var(--n, 4), 1fr); } }
.schritte li { counter-increment: schritt; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 0.85rem 1rem 0.95rem; }
.schritte li::before { content: counter(schritt); display: inline-flex; width: 1.5rem; height: 1.5rem; align-items: center; justify-content: center; border-radius: 50%; background: var(--green); color: #fff; font-size: 0.82rem; font-weight: 700; margin-bottom: 0.6rem; }
.schritte .when { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--green); }
.schritte strong { display: block; font-size: 0.95rem; font-weight: 650; margin: 0.15rem 0 0.25rem; }
.schritte p { font-size: 0.86rem; line-height: 1.5; }
.schritte li.is-zusage { background: var(--green-50); border-color: var(--green-100); }
.schritte li.is-zusage::before { background: var(--green-ink); }