/* automatisier.de – gemeinsames Aussehen aller Seiten
   Farben/Schriften kommen aus assets/brand/automatisier.css (= design/brands/automatisier/tokens.css) */

/* ENTWURF – fehlende Werte, noch nicht in tokens.css (Cecilio fragen, dann dorthin verschieben) */
:root {
  --radius-card: 24px;
  --radius-md: 14px;
  --max-width: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page-dark);
  color: var(--text-on-dark);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: var(--body-leading);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  line-height: var(--heading-leading);
  margin: 0;
}
p { margin: 0; }
::selection { background: var(--brand); color: var(--logo-white); }
:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 3px; border-radius: 6px; }

.wrap {
  width: 100%;
  max-width: calc(var(--max-width) + 2 * var(--pad-x-desktop));
  margin: 0 auto;
  padding: 0 var(--pad-x-desktop);
}
@media (max-width: 760px) { .wrap { padding: 0 var(--pad-x-mobile); } }

/* Hintergrund-Leuchten */
.glow-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.glow-bg::before {
  content: ""; position: absolute; left: 50%; top: -30%;
  width: 1100px; height: 900px; transform: translateX(-50%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--brand) 32%, transparent), transparent);
  filter: blur(20px);
}
.grid-bg {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(var(--line-on-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-on-dark) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: .25;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, var(--page-dark) 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, var(--page-dark) 20%, transparent 75%);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 0 8px 0 24px;
  border-radius: var(--radius-pill); border: 1px solid transparent;
  font-family: var(--font-body); font-weight: 600; font-size: 16px;
  cursor: pointer; white-space: nowrap;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.btn .btn-arrow {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; flex: none;
  transition: transform .25s ease;
}
.btn:hover .btn-arrow { transform: rotate(45deg); }
.btn-light { background: var(--text-on-dark); color: var(--ink); }
.btn-light .btn-arrow { background: var(--ink); color: var(--text-on-dark); }
.btn-light:hover { transform: translateY(-2px); box-shadow: 0 12px 40px -10px color-mix(in srgb, var(--brand-2) 70%, transparent); }
.btn-brand { background: var(--brand-gradient); color: var(--logo-white); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--logo-white) 25%, transparent); }
.btn-brand .btn-arrow { background: color-mix(in srgb, var(--logo-white) 18%, transparent); }
.btn-brand:hover { transform: translateY(-2px); box-shadow: 0 14px 44px -10px var(--brand); }
.btn-ghost { background: transparent; color: var(--text-on-dark); border-color: var(--line-on-dark); padding: 0 24px; }
.btn-ghost:hover { border-color: var(--brand-2); background: color-mix(in srgb, var(--brand) 12%, transparent); }
.btn-sm { min-height: 44px; font-size: 15px; padding: 0 20px; }
.btn-block { width: 100%; justify-content: space-between; }

.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--line-on-dark);
  background: color-mix(in srgb, var(--card-dark) 70%, transparent);
  font-size: 14px; font-weight: 500; color: var(--text-muted-on-dark);
}
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-2); box-shadow: 0 0 10px var(--brand-2); animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: .35; } }

.tag-platzhalter {
  display: inline-block; padding: 3px 9px; border-radius: var(--radius-pill);
  border: 1px dashed var(--brand-soft); color: var(--brand-soft);
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
}

/* ---------- Kopfzeile ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding-top: env(safe-area-inset-top);
  transition: background .3s ease, border-color .3s ease;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: color-mix(in srgb, var(--page-dark) 78%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--line-on-dark);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 24px; }
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-heading); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; min-height: 44px; }
.logo img { width: 32px; height: 32px; }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a { white-space: nowrap; padding: 10px 12px; border-radius: var(--radius-pill); font-size: 15px; font-weight: 500; color: var(--text-muted-on-dark); transition: color .2s, background .2s; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--text-on-dark); background: color-mix(in srgb, var(--text-on-dark) 6%, transparent); }
.nav-cta { display: flex; align-items: center; gap: 8px; }
.burger { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line-on-dark); background: transparent; cursor: pointer; place-items: center; }
.burger span { display: block; width: 18px; height: 2px; background: var(--text-on-dark); border-radius: 2px; position: relative; transition: .25s; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: inherit; border-radius: 2px; transition: .25s; }
.burger span::before { top: -6px; } .burger span::after { top: 6px; }
.menu-open .burger span { background: transparent; }
.menu-open .burger span::before { top: 0; transform: rotate(45deg); background: var(--text-on-dark); }
.menu-open .burger span::after { top: 0; transform: rotate(-45deg); background: var(--text-on-dark); }
.mobile-menu { display: none; }

@media (max-width: 1200px) {
  .nav-links, .nav-cta .btn-ghost { display: none; }
  .burger { display: grid; }
  .nav { height: 64px; }
  .mobile-menu {
    display: flex; flex-direction: column; gap: 4px;
    position: fixed; inset: 0; z-index: 49;
    padding: calc(80px + env(safe-area-inset-top)) var(--pad-x-mobile) calc(24px + env(safe-area-inset-bottom));
    background: var(--page-dark);
    opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
  }
  .menu-open .mobile-menu { opacity: 1; visibility: visible; }
  .mobile-menu a:not(.btn) { font-family: var(--font-heading); font-size: 28px; font-weight: 600; padding: 12px 0; border-bottom: 1px solid var(--line-on-dark); }
  .mobile-menu .btn { margin-top: 24px; }
  .menu-open { overflow: hidden; }
}
@media (max-width: 400px) { .nav-cta .btn-brand { display: none; } }

/* ---------- Abschnitte ---------- */
section { position: relative; }
.section { padding: 120px 0; }
@media (max-width: 760px) { .section { padding: 80px 0; } }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-soft); margin-bottom: 18px; }
.eyebrow::before { content: ""; width: 20px; height: 1px; background: currentColor; }
.h2 { font-size: clamp(34px, 5vw, 56px); }
.h2 em { font-style: normal; background: linear-gradient(90deg, var(--brand-2), var(--brand-soft)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { font-size: 18px; color: var(--text-muted-on-dark); max-width: 620px; margin-top: 18px; }
.section-head { max-width: 760px; margin-bottom: 56px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .lead { margin-left: auto; margin-right: auto; }
.section-head.center .eyebrow::after { content: ""; width: 20px; height: 1px; background: currentColor; }

/* Karten */
.card {
  position: relative; border-radius: var(--radius-card);
  background: linear-gradient(180deg, color-mix(in srgb, var(--text-on-dark) 4%, transparent), transparent 60%), var(--card-dark);
  border: 1px solid var(--line-on-dark);
  overflow: hidden;
}
.card.spot::before { /* Licht folgt der Maus */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--brand) 22%, transparent), transparent 60%);
}
.card.spot:hover::before { opacity: 1; }
.icon-box {
  width: 48px; height: 48px; border-radius: var(--radius-md); flex: none;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--brand) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-2) 35%, transparent);
  color: var(--brand-soft);
}
.icon-box svg { width: 24px; height: 24px; }

/* Einblenden beim Scrollen */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Hero ---------- */
.hero { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 120px 0 64px; overflow: hidden; }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; }
.hero h1 { font-size: clamp(40px, 5.2vw, 68px); margin-top: 24px; }
.hero h1 .accent { background: linear-gradient(100deg, var(--brand-2) 10%, var(--brand-soft) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lead { font-size: 19px; margin-top: 24px; max-width: 540px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 32px; font-size: 14px; color: var(--text-muted-on-dark); }
.hero-trust span { display: inline-flex; align-items: center; gap: 8px; }
.hero-trust svg { width: 16px; height: 16px; color: var(--brand-2); }

.hero-visual { position: relative; height: 600px; }
#hero3d { position: absolute; inset: -60px -40px; width: calc(100% + 80px); height: calc(100% + 120px); }
.hero-visual .fallback-logo { position: absolute; left: 50%; top: 45%; width: 220px; transform: translate(-50%, -50%); filter: drop-shadow(0 0 60px var(--brand)); }
.webgl .hero-visual .fallback-logo { display: none; }

.float-card {
  position: absolute; z-index: 2;
  padding: 14px 16px; border-radius: 18px;
  background: color-mix(in srgb, var(--card-dark) 80%, transparent);
  border: 1px solid var(--line-on-dark);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  display: flex; align-items: center; gap: 12px;
  font-size: 14px; box-shadow: 0 20px 50px -20px var(--page-dark);
  animation: floaty 6s ease-in-out infinite;
}
.float-card .icon-box { width: 38px; height: 38px; border-radius: 11px; }
.float-card .icon-box svg { width: 19px; height: 19px; }
.float-card b { display: block; font-weight: 600; }
.float-card small { color: var(--text-muted-on-dark); font-size: 13px; }
.fc-1 { top: 8%; left: -2%; }
.fc-2 { top: 40%; right: -4%; animation-delay: -2s; }
.fc-3 { bottom: 6%; left: 6%; animation-delay: -4s; }
@keyframes floaty { 50% { transform: translateY(-12px); } }

@media (max-width: 960px) {
  .hero { min-height: 0; padding: 120px 0 40px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { height: 420px; margin-top: 10px; }
  .fc-1 { left: 0; } .fc-2 { right: 0; } .fc-3 { left: 4%; }
}
@media (max-width: 480px) {
  .hero .lead { font-size: 17px; }
  .hero-actions .btn { width: 100%; justify-content: space-between; }
  .hero-actions .btn-ghost { justify-content: center; }
  .hero-visual { height: 360px; }
  .float-card { padding: 10px 12px; font-size: 13px; }
  .fc-2 { top: 44%; }
}

/* ---------- Logo-Leiste ---------- */
.tools { padding: 40px 0 20px; }
.tools-title { text-align: center; color: var(--text-muted-on-dark); font-size: 15px; margin-bottom: 28px; }
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, var(--page-dark) 12%, var(--page-dark) 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, var(--page-dark) 12%, var(--page-dark) 88%, transparent); }
.marquee-track { display: flex; gap: 14px; width: max-content; animation: marquee 40s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.tool {
  display: flex; align-items: center; gap: 12px; flex: none;
  padding: 12px 20px 12px 12px; border-radius: 18px;
  border: 1px solid var(--line-on-dark); background: var(--card-dark);
  font-weight: 600; font-size: 15px;
}
.tool img, .tool .tool-ph { width: 40px; height: 40px; border-radius: 11px; }
.tool .tool-ph { display: grid; place-items: center; border: 1px dashed var(--line-on-dark); color: var(--text-muted-on-dark); font-family: var(--font-heading); font-size: 15px; }

/* ---------- Engpässe ---------- */
.pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pain { padding: 28px; display: flex; flex-direction: column; gap: 18px; min-height: 230px; }
.pain h3 { font-size: 21px; }
.pain p { color: var(--text-muted-on-dark); font-size: 16px; }
.pain .pain-foot { margin-top: auto; display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--brand-soft); }
.pain .pain-foot svg { width: 16px; height: 16px; }
@media (max-width: 960px) { .pain-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .pain-grid { grid-template-columns: 1fr; } .pain { min-height: 0; padding: 24px; } }

/* ---------- So funktioniert's (Ablauf-Animation) ---------- */
.flow { padding: 40px; }
.flow-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 36px; }
.flow-tab {
  min-height: 44px; padding: 0 18px; border-radius: var(--radius-pill); cursor: pointer;
  border: 1px solid var(--line-on-dark); background: transparent; font-size: 15px; font-weight: 500; color: var(--text-muted-on-dark);
  transition: .2s;
}
.flow-tab[aria-selected="true"] { background: var(--text-on-dark); color: var(--ink); border-color: var(--text-on-dark); }
.flow-steps { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 56px; position: relative; }
.flow-line { position: absolute; top: 44px; left: 12%; right: 12%; height: 2px; background: var(--line-on-dark); overflow: hidden; }
.flow-line::after {
  content: ""; position: absolute; top: 0; left: -30%; width: 30%; height: 100%;
  background: linear-gradient(90deg, transparent, var(--brand-2), var(--brand-soft), transparent);
  animation: travel 2.6s linear infinite;
}
@keyframes travel { to { left: 100%; } }
.flow-step { position: relative; text-align: center; }
.flow-node {
  width: 88px; height: 88px; margin: 0 auto 22px; border-radius: 26px;
  display: grid; place-items: center; position: relative;
  background: var(--card-dark); border: 1px solid var(--line-on-dark);
  color: var(--brand-soft);
}
.flow-node svg { width: 34px; height: 34px; }
.flow-step.ai .flow-node { background: var(--brand-gradient); color: var(--logo-white); border-color: transparent; box-shadow: 0 0 60px -6px var(--brand); }
.flow-step.ai .flow-node::before { content: ""; position: absolute; inset: -10px; border-radius: 32px; border: 1px solid color-mix(in srgb, var(--brand-2) 50%, transparent); animation: ring 2.6s ease-out infinite; }
@keyframes ring { from { opacity: 1; transform: scale(.9); } to { opacity: 0; transform: scale(1.25); } }
.flow-step small { display: block; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-soft); margin-bottom: 8px; }
.flow-step h3 { font-size: 20px; margin-bottom: 8px; }
.flow-step p { color: var(--text-muted-on-dark); font-size: 15px; }
.flow-panel { transition: opacity .3s; }
.flow-panel.fade { opacity: 0; }
.flow-result { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line-on-dark); display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: center; color: var(--text-muted-on-dark); font-size: 15px; }
.flow-result b { color: var(--text-on-dark); }
@media (max-width: 760px) {
  .flow { padding: 24px 20px; }
  .flow-steps { grid-template-columns: 1fr; gap: 28px; }
  .flow-line { top: 44px; bottom: 44px; left: 43px; right: auto; width: 2px; height: auto; }
  .flow-line::after { left: 0; top: -30%; width: 100%; height: 30%; background: linear-gradient(180deg, transparent, var(--brand-2), transparent); animation-name: travel-y; }
  @keyframes travel-y { to { top: 100%; } }
  .flow-step { text-align: left; display: grid; grid-template-columns: 88px 1fr; gap: 18px; align-items: center; }
  .flow-node { margin: 0; }
}

/* ---------- Leistungen ---------- */
.serv-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.serv { padding: 30px; display: flex; flex-direction: column; gap: 14px; grid-column: span 2; }
.serv.wide { grid-column: span 3; }
.serv h3 { font-size: 22px; margin-top: 6px; }
.serv p { color: var(--text-muted-on-dark); }
.serv ul { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.serv ul.serv-links li { padding: 0; }
.serv ul.serv-links li:hover { border-color: var(--brand-2); }
.serv-links a { display: flex; align-items: center; min-height: 44px; padding: 0 16px; color: inherit; text-decoration: none; }
.serv-links a:hover { color: var(--text-on-dark); }
.serv li { font-size: 13px; padding: 5px 11px; border-radius: var(--radius-pill); border: 1px solid var(--line-on-dark); color: var(--text-muted-on-dark); }
@media (max-width: 960px) { .serv, .serv.wide { grid-column: span 3; } }
@media (max-width: 620px) { .serv-grid { grid-template-columns: 1fr; } .serv, .serv.wide { grid-column: auto; padding: 24px; } }

/* ---------- Referenzen ---------- */
.case { display: grid; grid-template-columns: 1fr 1.1fr; gap: 0; margin-bottom: 16px; }
.case-body { padding: 44px; display: flex; flex-direction: column; gap: 18px; }
.case-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.case h3 { font-size: clamp(26px, 3vw, 34px); }
.case p { color: var(--text-muted-on-dark); }
.case-list { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 10px; }
.case-list li { display: flex; gap: 12px; align-items: flex-start; }
.case-list svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--brand-2); }
.case-visual { position: relative; min-height: 380px; background: radial-gradient(circle at 70% 30%, color-mix(in srgb, var(--brand) 30%, transparent), transparent 60%), color-mix(in srgb, var(--brand-dim) 40%, var(--card-dark)); border-left: 1px solid var(--line-on-dark); overflow: hidden; perspective: 1200px; }
.mock {
  position: absolute; left: 40px; top: 48px; right: -40px; bottom: -40px;
  border-radius: 16px; background: var(--page-dark); border: 1px solid var(--line-on-dark);
  box-shadow: 0 40px 80px -30px var(--page-dark);
  transform: rotateY(-10deg) rotateX(6deg); transform-origin: left center;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
  display: grid; grid-template-columns: 120px 1fr; overflow: hidden; font-size: 12px;
}
.case:hover .mock { transform: rotateY(-4deg) rotateX(2deg); }
.mock-side { border-right: 1px solid var(--line-on-dark); padding: 14px 10px; display: grid; gap: 6px; align-content: start; }
.mock-side i { display: block; height: 22px; border-radius: 7px; background: color-mix(in srgb, var(--text-on-dark) 6%, transparent); }
.mock-side i:nth-child(3) { background: color-mix(in srgb, var(--brand) 40%, transparent); }
.mock-main { padding: 18px; display: grid; gap: 12px; align-content: start; }
.mock-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mock-kpi { border: 1px solid var(--line-on-dark); border-radius: 10px; padding: 10px; }
.mock-kpi span { color: var(--text-muted-on-dark); font-size: 11px; }
.mock-kpi b { display: block; font-family: var(--font-heading); font-size: 18px; margin-top: 2px; }
.mock-row { display: grid; grid-template-columns: 1.4fr 1fr .7fr; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 9px; border: 1px solid var(--line-on-dark); }
.mock-row i { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--text-on-dark) 14%, transparent); }
.mock-row i:last-child { height: 18px; border-radius: 9px; background: color-mix(in srgb, var(--brand) 35%, transparent); }
.mock-bars { display: flex; align-items: flex-end; gap: 8px; height: 90px; border: 1px solid var(--line-on-dark); border-radius: 10px; padding: 12px; }
.mock-bars i { flex: 1; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, var(--brand-2), var(--brand-deep)); }
@media (max-width: 960px) {
  .case { grid-template-columns: 1fr; }
  .case-visual { min-height: 300px; border-left: 0; border-top: 1px solid var(--line-on-dark); }
}
@media (max-width: 620px) { .case-body { padding: 26px 22px; } .mock { left: 22px; top: 30px; grid-template-columns: 70px 1fr; } }

/* ---------- Eigenes Produkt: Sprechauftrag (eigene Marke!) ---------- */
.produkt { padding: 0; display: grid; grid-template-columns: 1.1fr 1fr; background: var(--surface); border-color: var(--line-strong); }
.produkt-body { padding: 48px; display: flex; flex-direction: column; gap: 20px; font-family: var(--font); }
.produkt-body h3 { font-family: var(--font); letter-spacing: var(--tracking-tight); font-size: clamp(30px, 3.6vw, 44px); color: var(--text-strong); }
.produkt-body h3 span { color: var(--brand); }
.produkt-body p { color: var(--text-muted); font-size: 17px; }
.produkt-logo { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 18px; color: var(--text-strong); }
.produkt-logo img { width: 40px; height: 40px; border-radius: 11px; }
.produkt-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); }
.produkt .btn-sa { align-self: flex-start; background: var(--brand); color: var(--on-brand); font-family: var(--font); }
.produkt .btn-sa .btn-arrow { background: var(--on-brand); color: var(--brand); }
.produkt .btn-sa:hover { background: var(--brand-hover); box-shadow: 0 14px 44px -10px var(--brand-glow); transform: translateY(-2px); }
.produkt-visual { position: relative; display: grid; place-items: center; min-height: 360px; background: radial-gradient(circle at 50% 50%, var(--brand-glow), transparent 60%), var(--surface-2); border-left: 1px solid var(--line); }
.wave { display: flex; align-items: center; gap: 6px; height: 120px; }
.wave i { width: 6px; border-radius: 6px; background: var(--brand); animation: wave 1.2s ease-in-out infinite; animation-delay: calc(var(--i) * -0.09s); height: 20%; }
@keyframes wave { 50% { height: 100%; } }
.produkt-bubble { position: absolute; padding: 12px 16px; border-radius: 16px; background: var(--surface-3); border: 1px solid var(--line-strong); color: var(--text); font-family: var(--font); font-size: 14px; max-width: 240px; box-shadow: 0 20px 40px -20px var(--page-dark); animation: floaty 6s ease-in-out infinite; }
.produkt-bubble.b1 { top: 14%; left: 8%; }
.produkt-bubble.b2 { bottom: 12%; right: 8%; animation-delay: -3s; }
.produkt-bubble b { color: var(--brand); font-weight: 600; }
@media (max-width: 960px) { .produkt { grid-template-columns: 1fr; } .produkt-visual { border-left: 0; border-top: 1px solid var(--line); min-height: 300px; } }
@media (max-width: 620px) { .produkt-body { padding: 28px 22px; } .produkt .btn-sa { width: 100%; justify-content: space-between; } }

/* ---------- Ablauf ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: s; }
.step { padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.step-num { font-family: var(--font-heading); font-size: 56px; font-weight: 700; line-height: 1; background: linear-gradient(180deg, var(--brand-2), transparent); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 18px; }
.step h3 { font-size: 21px; }
.step p { color: var(--text-muted-on-dark); font-size: 16px; }
@media (max-width: 960px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } .step-num { font-size: 44px; margin-bottom: 6px; } }

/* ---------- Bewertungen ---------- */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.review { padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.stars { display: flex; gap: 3px; color: var(--brand-2); }
.stars svg { width: 18px; height: 18px; }
.review blockquote { margin: 0; font-size: 17px; line-height: 1.55; }
.review-who { margin-top: auto; display: flex; align-items: center; gap: 12px; }
.avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-gradient); font-family: var(--font-heading); font-weight: 700; }
.review-sum { align-items: center; justify-content: center; text-align: center; gap: 12px; }
.review-score { font-family: var(--font-heading); font-size: 56px; line-height: 1; }
.review-sum p { color: var(--text-muted-on-dark); margin: 0 0 8px; }
.review-who b { display: block; } .review-who small { color: var(--text-muted-on-dark); font-size: 14px; }
@media (max-width: 960px) { .reviews { grid-template-columns: 1fr; } }

/* ---------- Guide (PDF) ---------- */
.guide { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: center; padding: 64px; }
.book-stage { perspective: 1400px; display: grid; place-items: center; min-height: 420px; }
.book {
  position: relative; width: 270px; height: 360px; transform-style: preserve-3d;
  transform: rotateY(-24deg) rotateX(8deg); transition: transform .2s ease-out;
}
.book-cover, .book-pages, .book-back {
  position: absolute; inset: 0; border-radius: 6px 16px 16px 6px;
}
.book-cover {
  transform: translateZ(18px);
  background: radial-gradient(circle at 70% 25%, color-mix(in srgb, var(--brand-2) 70%, transparent), transparent 55%), linear-gradient(160deg, var(--brand-dim), var(--page-dark));
  border: 1px solid color-mix(in srgb, var(--brand-2) 40%, transparent);
  padding: 26px; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: inset 6px 0 0 color-mix(in srgb, var(--logo-white) 8%, transparent);
}
.book-cover .bc-logo { display: flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-weight: 700; font-size: 14px; }
.book-cover .bc-logo img { width: 22px; height: 22px; }
.book-cover svg.net { width: 160px; height: 160px; margin: 26px auto 10px; color: var(--brand-soft); }
.book-cover h4 { font-size: 30px; margin-top: auto; }
.book-cover small { color: var(--text-muted-on-dark); font-size: 13px; margin-top: 6px; }
.book-pages { transform: translateX(8px) translateZ(4px); background: repeating-linear-gradient(90deg, var(--text-muted-on-dark) 0 1px, var(--text-on-dark) 1px 3px); right: -6px; width: 100%; height: 96%; top: 2%; border-radius: 4px 12px 12px 4px; }
.book-back { transform: translateZ(-18px); background: var(--brand-deep); box-shadow: 30px 40px 80px -20px var(--page-dark); }
.guide h2 { font-size: clamp(32px, 4.4vw, 50px); }
.guide-list { list-style: none; padding: 0; margin: 28px 0 32px; display: grid; gap: 14px; }
.guide-list li { display: flex; gap: 14px; align-items: flex-start; font-size: 17px; }
.check { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 25%, transparent); color: var(--brand-soft); }
.check svg { width: 14px; height: 14px; }
.guide-note { margin-top: 14px; font-size: 14px; color: var(--text-muted-on-dark); }
@media (max-width: 960px) { .guide { grid-template-columns: 1fr; padding: 40px 28px; gap: 24px; } .book-stage { min-height: 380px; } }
@media (max-width: 480px) { .guide { padding: 32px 20px; } .book { width: 220px; height: 294px; } .book-cover svg.net { width: 120px; height: 120px; margin-top: 16px; } .book-cover h4 { font-size: 24px; } .book-stage { min-height: 330px; } .guide .btn { width: 100%; justify-content: space-between; } }

/* ---------- Termin ---------- */
.termin { text-align: center; padding: 80px 40px; overflow: hidden; }
.termin h2 { font-size: clamp(34px, 5vw, 60px); max-width: 820px; margin: 0 auto; }
.termin .lead { margin: 20px auto 0; }
.termin-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }
.termin-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin-top: 32px; font-size: 15px; color: var(--text-muted-on-dark); }
.termin-facts span { display: inline-flex; gap: 8px; align-items: center; }
.termin-facts svg { width: 18px; height: 18px; color: var(--brand-2); }
.termin .glow-bg::before { top: 20%; }
@media (max-width: 620px) { .termin { padding: 56px 20px; } .termin-actions .btn { width: 100%; justify-content: space-between; } .termin-actions .btn-ghost { justify-content: center; } }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.faq details { border: 1px solid var(--line-on-dark); border-radius: 18px; background: var(--card-dark); transition: border-color .2s; }
.faq details[open] { border-color: color-mix(in srgb, var(--brand-2) 50%, transparent); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 24px; min-height: 64px; font-family: var(--font-heading); font-weight: 600; font-size: 18px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { width: 32px; height: 32px; flex: none; border-radius: 50%; border: 1px solid var(--line-on-dark); position: relative; transition: transform .3s; }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: var(--text-on-dark); transform: translate(-50%, -50%); }
.faq summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq details[open] summary i { transform: rotate(45deg); }
.faq details p { padding: 0 24px 22px; color: var(--text-muted-on-dark); }

/* ---------- Fußzeile ---------- */
.site-footer { border-top: 1px solid var(--line-on-dark); padding: 64px 0 calc(32px + env(safe-area-inset-bottom)); margin-top: 40px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.foot-grid h4 { font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted-on-dark); margin-bottom: 14px; font-family: var(--font-body); font-weight: 600; }
.foot-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.foot-grid ul a { display: inline-flex; align-items: center; min-height: 40px; color: var(--text-on-dark); opacity: .85; }
.foot-grid ul a:hover { opacity: 1; color: var(--brand-soft); }
.foot-about { color: var(--text-muted-on-dark); margin-top: 16px; max-width: 320px; font-size: 15px; }
.socials { display: flex; gap: 8px; margin-top: 22px; }
.socials a { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; border: 1px solid var(--line-on-dark); color: var(--text-muted-on-dark); transition: .2s; }
.socials a:hover { color: var(--text-on-dark); border-color: var(--brand-2); background: color-mix(in srgb, var(--brand) 14%, transparent); }
.socials svg { width: 19px; height: 19px; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line-on-dark); font-size: 14px; color: var(--text-muted-on-dark); }
.foot-bottom nav { display: flex; gap: 20px; }
.foot-bottom a { min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-grid > div:first-child { grid-column: 1 / -1; } }

/* ---------- Formular-Fenster (Guide anfordern) ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; padding-bottom: calc(20px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--page-dark) 75%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: .25s; }
.modal.open { opacity: 1; visibility: visible; }
.modal-box { width: 100%; max-width: 460px; max-height: 100%; overflow: auto; padding: 32px; border-radius: var(--radius-card); background: var(--card-dark); border: 1px solid var(--line-on-dark); box-shadow: 0 40px 100px -30px var(--page-dark); transform: translateY(20px) scale(.98); transition: .3s cubic-bezier(.2,.7,.2,1); position: relative; }
.modal.open .modal-box { transform: none; }
.modal-close { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-on-dark); background: transparent; cursor: pointer; display: grid; place-items: center; }
.modal-close svg { width: 18px; height: 18px; }
.modal h3 { font-size: 26px; margin: 14px 0 8px; padding-right: 40px; }
.modal-box > p { color: var(--text-muted-on-dark); font-size: 15px; }
.form { display: grid; gap: 12px; margin-top: 22px; }
.field label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; color: var(--text-muted-on-dark); }
.field input { width: 100%; min-height: 52px; padding: 0 16px; border-radius: var(--radius-md); border: 1px solid var(--line-on-dark); background: var(--page-dark); color: var(--text-on-dark); font: inherit; font-size: 16px; transition: border-color .2s, box-shadow .2s; }
.field input:focus { outline: none; border-color: var(--brand-2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 25%, transparent); }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--text-muted-on-dark); cursor: pointer; margin-top: 4px; }
.consent input { width: 22px; height: 22px; flex: none; margin: 1px 0 0; accent-color: var(--brand); }
.consent a { text-decoration: underline; }
.hp { position: absolute; left: -9999px; }
.form-error { color: var(--danger-soft); font-size: 14px; min-height: 0; }
.form-done { text-align: center; padding: 20px 0 4px; }
.form-done .check { width: 64px; height: 64px; margin: 0 auto 16px; }
.form-done .check svg { width: 28px; height: 28px; }

/* ---------- News ---------- */
.page-hero { padding: 160px 0 56px; overflow: hidden; }
.page-hero h1 { font-size: clamp(40px, 6vw, 72px); position: relative; z-index: 1; }
.page-hero .lead { position: relative; z-index: 1; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.news { display: flex; flex-direction: column; transition: transform .3s, border-color .3s; }
.news:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--brand-2) 50%, transparent); }
.news-img { aspect-ratio: 16 / 9; display: grid; place-items: center; color: var(--brand-soft); border-bottom: 1px solid var(--line-on-dark); background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--brand) 45%, transparent), transparent 60%), color-mix(in srgb, var(--brand-dim) 40%, var(--card-dark)); }
.news-img svg { width: 56px; height: 56px; opacity: .9; }
.news-body { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.news-meta { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--text-muted-on-dark); flex-wrap: wrap; }
.news-meta b { color: var(--brand-soft); font-weight: 600; }
.news h3 { font-size: 20px; }
.news p { color: var(--text-muted-on-dark); font-size: 15px; }
.news .more { margin-top: auto; padding-top: 8px; font-weight: 600; font-size: 15px; display: inline-flex; gap: 8px; align-items: center; }
.news.featured { grid-column: span 3; display: grid; grid-template-columns: 1.2fr 1fr; }
.news.featured .news-img { aspect-ratio: auto; min-height: 320px; border-bottom: 0; border-right: 1px solid var(--line-on-dark); }
.news.featured h3 { font-size: clamp(24px, 3vw, 34px); }
.news.featured .news-body { padding: 40px; justify-content: center; }
.news[hidden] { display: none; }
@media (max-width: 960px) { .news-grid { grid-template-columns: 1fr 1fr; } .news.featured { grid-column: span 2; } }
@media (max-width: 620px) { .news-grid { grid-template-columns: 1fr; } .news.featured { grid-column: auto; grid-template-columns: 1fr; } .news.featured .news-img { min-height: 200px; border-right: 0; border-bottom: 1px solid var(--line-on-dark); } .news.featured .news-body { padding: 24px; } }

/* Rechtstexte */
.legal { max-width: 760px; }
.legal h2 { font-size: 24px; margin: 40px 0 12px; }
.legal p { color: var(--text-muted-on-dark); margin-bottom: 12px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}
.grad { background: linear-gradient(90deg, var(--brand-2), var(--brand-soft)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.page-hero .glow-bg, .page-hero .grid-bg, .hero .glow-bg { mask-image: linear-gradient(180deg, var(--page-dark) 50%, transparent); -webkit-mask-image: linear-gradient(180deg, var(--page-dark) 50%, transparent); }

/* ---------- Startseite: Guide ganz oben ---------- */
.hero-guide .hero-grid { grid-template-columns: 1fr 460px; gap: 64px; }
.hero-guide .guide-list { margin: 32px 0 0; }
.guide-side { position: relative; padding-top: 190px; }
.book-hero { position: absolute; top: -20px; right: -10px; min-height: 0; width: 220px; height: 240px; z-index: 2; }
.book-hero .book { transform: rotateY(-24deg) rotateX(8deg) scale(.62); }
.guide-form { padding: 28px; position: relative; z-index: 1; box-shadow: 0 40px 100px -40px var(--brand); }
.guide-form-title { font-size: 22px; padding-right: 150px; }
.guide-form .form { margin-top: 18px; }
.guide-form .form-done { padding: 28px 0 12px; }
@media (max-width: 960px) {
  .hero-guide .hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .guide-side { max-width: 520px; width: 100%; }
}
@media (max-width: 480px) {
  .guide-side { padding-top: 150px; }
  .book-hero { width: 180px; height: 200px; right: -20px; }
  .book-hero .book { transform: rotateY(-24deg) rotateX(8deg) scale(.5); }
  .guide-form { padding: 22px 20px; }
  .guide-form-title { padding-right: 110px; font-size: 20px; }
}

/* ---------- Startseite: Was wir machen (3D) ---------- */
.intro { overflow: hidden; }
.intro .hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; }
.intro .accent { background: linear-gradient(100deg, var(--brand-2) 10%, var(--brand-soft) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.intro .lead { max-width: 540px; }
@media (max-width: 960px) { .intro .hero-grid { grid-template-columns: 1fr; } }

/* ---------- Startseite: Vorschau-Karten ---------- */
.teaser-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.teaser { padding: 28px; display: flex; flex-direction: column; gap: 14px; min-height: 260px; transition: transform .3s, border-color .3s; }
.teaser:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--brand-2) 50%, transparent); }
.teaser h3 { font-size: 22px; margin-top: 6px; }
.teaser p { color: var(--text-muted-on-dark); }
.teaser-more { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; color: var(--brand-soft); }
.teaser-more svg { width: 16px; height: 16px; transition: transform .25s; }
.teaser:hover .teaser-more svg { transform: translateX(4px); }
@media (max-width: 1100px) { .teaser-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .teaser-grid { grid-template-columns: 1fr; } .teaser { min-height: 0; padding: 24px; } }

/* ---------- Sprechauftrag-Seite: 3 Schritte (eigene Marke) ---------- */
.sa-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sa-feat { padding: 28px; background: var(--surface); border-color: var(--line-strong); font-family: var(--font); display: flex; flex-direction: column; gap: 10px; }
.sa-feat h3 { font-family: var(--font); letter-spacing: var(--tracking-tight); font-size: 22px; color: var(--text-strong); }
.sa-feat p { color: var(--text-muted); }
.sa-num { font-family: var(--font-mono); font-size: 13px; color: var(--brand); letter-spacing: .1em; margin-bottom: 8px; }
@media (max-width: 760px) { .sa-feats { grid-template-columns: 1fr; } }

/* ---------- Startseite: Förderung ---------- */
.foerder-band { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; padding: 56px; overflow: hidden; transition: border-color .3s; }
.foerder-band:hover { border-color: color-mix(in srgb, var(--brand-2) 50%, transparent); }
.foerder-band .glow-bg::before { top: -40%; left: 85%; width: 700px; height: 600px; }
.fb-text, .fb-visual { position: relative; z-index: 1; }
.fb-text .h2 { margin-top: 20px; font-size: clamp(30px, 4vw, 46px); }
.fb-list { list-style: none; padding: 0; margin: 24px 0 30px; display: grid; gap: 12px; }
.fb-list li { display: flex; gap: 12px; align-items: center; font-size: 16px; }
.fb-visual { display: grid; place-items: center; min-height: 320px; perspective: 1000px; }
.fb-doc { width: 100%; max-width: 330px; padding: 22px; border-radius: 20px; background: var(--page-dark); border: 1px solid var(--line-on-dark); box-shadow: 0 40px 80px -30px var(--brand); transform: rotateY(-12deg) rotateX(6deg); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.foerder-band:hover .fb-doc { transform: rotateY(-4deg) rotateX(2deg); }
.fb-doc-head { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-heading); font-weight: 600; margin-bottom: 14px; }
.fb-doc-head b { font-size: 12px; font-family: var(--font-body); padding: 4px 10px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--brand) 25%, transparent); color: var(--brand-soft); }
.fb-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-top: 1px solid var(--line-on-dark); font-size: 15px; color: var(--text-muted-on-dark); }
.fb-row .ok { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-gradient); color: var(--logo-white); opacity: 0; transform: scale(.4); transition: .4s cubic-bezier(.3,1.6,.5,1); }
.fb-row .ok svg { width: 13px; height: 13px; }
.reveal.in .fb-row .ok { opacity: 1; transform: none; }
.reveal.in .fb-row:nth-child(3) .ok { transition-delay: .5s; } .reveal.in .fb-row:nth-child(4) .ok { transition-delay: .8s; } .reveal.in .fb-row:nth-child(5) .ok { transition-delay: 1.1s; }
.reveal.in .fb-row:nth-child(2) .ok { transition-delay: .2s; }
.fb-stamp { position: absolute; right: 4%; bottom: 8%; padding: 12px 16px; border-radius: 14px; border: 2px solid var(--brand-2); color: var(--brand-soft); font-family: var(--font-heading); font-weight: 700; font-size: 14px; line-height: 1.2; text-align: center; transform: rotate(-8deg); background: color-mix(in srgb, var(--page-dark) 70%, transparent); animation: floaty 6s ease-in-out infinite; }
@media (max-width: 960px) { .foerder-band { grid-template-columns: 1fr; padding: 40px 28px; } .fb-visual { min-height: 280px; } }
@media (max-width: 480px) { .fb-stamp { bottom: -2%; right: -2%; } .foerder-band { padding: 32px 20px; } .foerder-band .btn { width: 100%; justify-content: space-between; } }

/* ---------- Förderung: Programme ---------- */
.prog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.prog { padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.prog-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.prog-tag { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-soft); }
.prog h3 { font-size: 22px; }
.prog p { color: var(--text-muted-on-dark); }
.steps-3 { grid-template-columns: repeat(3, 1fr); }
.hinweis { margin-top: 24px; padding: 20px 24px; border-radius: var(--radius-md); border: 1px solid var(--line-on-dark); background: color-mix(in srgb, var(--brand) 8%, transparent); color: var(--text-muted-on-dark); font-size: 15px; }
.hinweis b { color: var(--text-on-dark); }
@media (max-width: 760px) { .prog-grid, .steps-3 { grid-template-columns: 1fr; } .prog { padding: 24px; } }

/* ---------- Förder-Check (Schritte) ---------- */
.fcheck { padding: 56px; overflow: hidden; }
.check-head, .stepper, .fcheck .form-done { position: relative; z-index: 1; }
.check-head { max-width: 640px; margin-bottom: 32px; }
.check-head h2 { font-size: clamp(30px, 4vw, 46px); margin-top: 20px; }
.fcheck .glow-bg::before { top: -50%; }
.stepper { max-width: 760px; }
.stepper-bar { list-style: none; padding: 0; margin: 0 0 28px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; counter-reset: st; }
.stepper-bar li { counter-increment: st; font-size: 13px; font-weight: 600; color: var(--text-muted-on-dark); padding-top: 12px; border-top: 3px solid var(--line-on-dark); transition: .3s; }
.stepper-bar li::before { content: counter(st) ". "; }
.stepper-bar li.on { color: var(--text-on-dark); border-top-color: var(--brand-2); }
.pane { display: none; border: 0; padding: 0; margin: 0; min-width: 0; }
.pane.on { display: grid; gap: 14px; animation: paneIn .35s ease; }
@keyframes paneIn { from { opacity: 0; transform: translateX(16px); } }
.pane legend { font-family: var(--font-heading); font-weight: 600; font-size: 22px; margin-bottom: 8px; padding: 0; }
.pane-hint { color: var(--text-muted-on-dark); font-size: 15px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.field select, .field textarea { width: 100%; min-height: 52px; padding: 14px 16px; border-radius: var(--radius-md); border: 1px solid var(--line-on-dark); background: var(--page-dark); color: var(--text-on-dark); font: inherit; font-size: 16px; }
.field select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-muted-on-dark) 50%), linear-gradient(135deg, var(--text-muted-on-dark) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.field textarea { resize: vertical; }
.field select:focus, .field textarea:focus { outline: none; border-color: var(--brand-2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 25%, transparent); }
.pick-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pick { position: relative; cursor: pointer; }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--radius-pill); border: 1px solid var(--line-on-dark); font-size: 15px; color: var(--text-muted-on-dark); transition: .2s; }
.pick input:checked + span { background: color-mix(in srgb, var(--brand) 22%, transparent); border-color: var(--brand-2); color: var(--text-on-dark); }
.pick input:focus-visible + span { outline: 2px solid var(--brand-2); outline-offset: 2px; }
.stepper-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; }
.stepper-nav [data-next], .stepper-nav [type=submit] { margin-left: auto; }
.stepper-nav [hidden] { display: none; }
.fcheck .form-done { text-align: left; padding: 8px 0; }
.fcheck .form-done .check { width: 64px; height: 64px; padding: 0; margin: 0 0 16px; }
.fcheck .form-done h3 { font-size: 26px; }
@media (max-width: 620px) {
  .fcheck { padding: 32px 20px; }
  .grid2 { grid-template-columns: 1fr; }
  .stepper-bar li { font-size: 0; } .stepper-bar li::before { font-size: 13px; content: counter(st); }
  .stepper-nav .btn { flex: 1; justify-content: space-between; } .stepper-nav [data-back] { justify-content: center; flex: 0 0 auto; }
}

/* ---------- Tool-Raster (wie Sprechauftrag) ---------- */
.tool-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tool-card { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 30px 18px 18px; border-radius: var(--radius-card); border: 1px solid var(--line-on-dark); background: var(--card-dark); transition: border-color .3s, transform .3s; }
.tool-card:hover { border-color: color-mix(in srgb, var(--brand-2) 50%, transparent); transform: translateY(-3px); }
.tool-card img { height: 64px; width: auto; }
.tool-card img.rounded { border-radius: 22%; }
.tool-card span { width: 100%; text-align: center; padding: 12px 10px; border-radius: 16px; border: 1px solid var(--line-on-dark); font-weight: 600; font-size: 15px; }
@media (max-width: 860px) { .tool-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .tool-grid { gap: 12px; } .tool-card { padding: 22px 12px 12px; gap: 16px; } .tool-card img { height: 52px; } .tool-card span { font-size: 14px; padding: 10px 6px; } }

/* ---------- Social-Media-Karten ---------- */
.social-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 48px; flex-wrap: wrap; margin-bottom: 36px; }
.social-head .lead { margin-top: 0; max-width: 420px; }
.social-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.social-card { display: flex; align-items: center; gap: 16px; padding: 22px 24px; border-radius: var(--radius-card); transition: border-color .3s, transform .3s; }
.social-card:hover { border-color: color-mix(in srgb, var(--brand-2) 50%, transparent); transform: translateY(-3px); }
.sc-icon img, .sc-icon svg { width: 40px; height: 40px; flex: none; }
.sc-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.sc-text b { font-family: var(--font-heading); font-size: 19px; font-weight: 600; }
.sc-text small { color: var(--text-muted-on-dark); font-size: 15px; }
.sc-arrow { width: 22px; height: 22px; color: var(--brand-2); flex: none; transition: transform .25s; }
.social-card:hover .sc-arrow { transform: translate(2px, -2px); }

/* ---------- Startseite kompakt: oberster Bereich + Tools auf den ersten Blick ---------- */
.hero.hero-guide, .hero.intro { min-height: 0; padding: 100px 0 8px; }
.hero-guide .hero-grid { grid-template-columns: 1fr 440px; gap: 56px; }
.hero-guide h1, .intro h1 { font-size: clamp(34px, 4.2vw, 54px); margin-top: 18px; }
.hero-guide .lead { font-size: 17px; margin-top: 16px; }
.hero-guide .guide-list { margin: 22px 0 0; gap: 10px; }
.hero-guide .guide-list li { font-size: 16px; }
.guide-side { padding-top: 84px; }
.book-hero { top: -24px; right: -6px; width: 150px; height: 170px; }
.book-hero .book { transform: rotateY(-24deg) rotateX(8deg) scale(.42); }
.guide-form { padding: 22px 24px; }
.guide-form-title { font-size: 19px; padding-right: 120px; }
.guide-form .form { margin-top: 14px; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.guide-form .form > :not(.field), .guide-form .form > .field:nth-of-type(3) { grid-column: 1 / -1; }
.guide-form .field label { font-size: 13px; margin-bottom: 4px; }
.guide-form .field input { min-height: 46px; }
.guide-form .consent { font-size: 13px; }
.guide-form .form-error:empty { display: none; }
.tools { padding: 20px 0 8px; }
.tools-title { margin-bottom: 16px; font-size: 14px; }
.tool { padding: 8px 16px 8px 8px; border-radius: 14px; font-size: 14px; }
.tool img, .tool .tool-ph { width: 32px; height: 32px; border-radius: 9px; }
.tool img.rounded { border-radius: 22%; }
.tool .tool-ph { font-size: 13px; }
.marquee-track { gap: 10px; animation-duration: 70s; }
@media (max-width: 960px) {
  .hero-guide .hero-grid { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 480px) {
  .hero.hero-guide, .hero.intro { padding-top: 88px; }
  .guide-side { padding-top: 92px; }
  .book-hero { width: 140px; height: 160px; right: -2px; }
  .book-hero .book { transform: rotateY(-24deg) rotateX(8deg) scale(.4); }
  .guide-form { padding: 20px; }
  .guide-form-title { padding-right: 100px; }
  .guide-form .form { grid-template-columns: 1fr; }
}

/* ---------- Startseite: Guide per Button (Formular im Fenster) ---------- */
@media (min-width: 961px) { .hero-guide .hero-grid { grid-template-columns: 1.2fr .8fr; } }
.hero-guide .hero-actions { margin-top: 28px; }
.hero-guide .guide-side { padding-top: 0; }
.book-big { min-height: 400px; }
@media (max-width: 960px) { .book-big { min-height: 380px; } }
@media (max-width: 480px) {
  .hero-guide .hero-actions .btn { width: 100%; justify-content: space-between; }
  .book-big { min-height: 270px; }
  .book-big .book { scale: .66; }
}

/* ---------- Weicher Übergang beim 3D-Bereich ---------- */
.intro .glow-bg::before { top: 50%; transform: translate(-50%, -50%); }
.intro .glow-bg, .intro .grid-bg {
  mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, var(--page-dark) 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, var(--page-dark) 30%, transparent 100%);
}

/* ---------- Tool-Leiste: alle Logos einfarbig und gleich groß ---------- */
.tool { gap: 10px; padding: 0 18px; min-height: 48px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--card-dark) 80%, transparent); color: var(--text-muted-on-dark); font-weight: 500; transition: color .2s, border-color .2s; }
.tool:hover { color: var(--text-on-dark); border-color: color-mix(in srgb, var(--brand-2) 50%, transparent); }
.tool-logo { width: 22px; height: 22px; flex: none; background: currentColor; -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }

/* ---------- Guide-Button unter dem Buch ---------- */
.hero-guide .guide-side { display: flex; flex-direction: column; align-items: center; }
.hero-guide .book-big { min-height: 360px; width: 100%; }
.hero-guide .guide-cta { margin-top: 20px; justify-content: center; }
.hero-guide .guide-side .guide-note { text-align: center; }
@media (max-width: 480px) { .hero-guide .book-big { min-height: 270px; } .hero-guide .guide-cta { width: 100%; } }
/* Desktop: Buch + Button genauso hoch wie der Text links */
@media (min-width: 961px) { .hero-guide .book-big { min-height: 256px; height: 256px; display: flex; align-items: center; justify-content: center; } .hero-guide .book-big .book { scale: .68; } }

/* ---------- KI-News: Grafiken + Lese-Fenster ---------- */
.news-img { position: relative; overflow: hidden; }
.news-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.news:hover .news-cover { transform: scale(1.04); }
.news .more { background: none; border: 0; padding: 8px 0 0; min-height: 44px; cursor: pointer; color: var(--text-on-dark); }
.news-box { max-width: 680px; padding: 0 0 28px; }
.news-box .news-img { aspect-ratio: 16 / 7; border-bottom: 1px solid var(--line-on-dark); }
.news-box .news-meta, .news-box h3, .news-box p { margin-left: 28px; margin-right: 28px; }
.news-box .news-meta { margin-top: 22px; }
.news-box h3 { font-size: 26px; margin-top: 8px; padding: 0; }
.news-box p { color: var(--text-muted-on-dark); margin-top: 14px; font-size: 16px; }
.news-box .news-quelle { font-size: 14px; padding-top: 14px; border-top: 1px solid var(--line-on-dark); }
.news-box .news-quelle a { color: var(--brand-soft); text-decoration: underline; }
.news-box .modal-close { z-index: 2; background: color-mix(in srgb, var(--page-dark) 60%, transparent); }
@media (max-width: 480px) { .news-box .news-meta, .news-box h3, .news-box p { margin-left: 20px; margin-right: 20px; } .news-box h3 { font-size: 22px; } }
.news-img svg.news-cover { width: 100%; height: 100%; opacity: 1; }

/* Fußzeile mit 4 Spalten + Logo-Spalte */
.foot-grid { grid-template-columns: 1.3fr repeat(5, 1fr); }
@media (max-width: 1100px) { .foot-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .foot-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Kopfzeile mit 3 Buttons ---------- */
.btn-app { gap: 8px; }
.btn-app svg { flex: none; }
@media (max-width: 1320px) {
  .nav-links, .nav-cta .btn-ghost { display: none; }
  .burger { display: grid; }
  .mobile-menu {
    display: flex; flex-direction: column; gap: 4px;
    position: fixed; inset: 0; z-index: 49;
    padding: calc(80px + env(safe-area-inset-top)) var(--pad-x-mobile) calc(24px + env(safe-area-inset-bottom));
    background: var(--page-dark); overflow-y: auto;
    opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
  }
  .menu-open .mobile-menu { opacity: 1; visibility: visible; }
  .mobile-menu a:not(.btn) { font-family: var(--font-heading); font-size: 26px; font-weight: 600; padding: 10px 0; border-bottom: 1px solid var(--line-on-dark); }
  .mobile-menu .btn { margin-top: 20px; }
}
@media (min-width: 761px) and (max-width: 1320px) { .mobile-menu { padding-left: var(--pad-x-desktop); padding-right: var(--pad-x-desktop); } }

/* ---------- Kunden-App: Handy-Ansicht ---------- */
.phone { position: relative; width: 300px; max-width: 100%; aspect-ratio: 9 / 18.5; margin: 0 auto; padding: 12px; border-radius: 44px; background: var(--card-dark); border: 1px solid var(--line-on-dark); box-shadow: 0 50px 100px -40px var(--brand), inset 0 0 0 6px color-mix(in srgb, var(--text-on-dark) 4%, transparent); transform: rotate(-3deg); animation: floaty 7s ease-in-out infinite; }
.phone-notch { position: absolute; top: 20px; left: 50%; width: 80px; height: 22px; transform: translateX(-50%); border-radius: 12px; background: var(--page-dark); z-index: 2; }
.phone-screen { height: 100%; border-radius: 34px; background: radial-gradient(circle at 80% 0%, color-mix(in srgb, var(--brand) 40%, transparent), transparent 55%), var(--page-dark); padding: 46px 16px 16px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.ph-top { display: flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-weight: 600; font-size: 14px; }
.ph-top img { width: 22px; height: 22px; }
.ph-top .tag-platzhalter { margin-left: auto; font-size: 9px; font-style: normal; }
.ph-hello { font-size: 13px; color: var(--text-muted-on-dark); }
.ph-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ph-kpi { padding: 12px; border-radius: 16px; background: var(--card-dark); border: 1px solid var(--line-on-dark); display: flex; flex-direction: column; gap: 2px; }
.ph-kpi:first-child { background: var(--brand-gradient); border-color: transparent; }
.ph-kpi span, .ph-kpi small { font-size: 10px; color: var(--text-muted-on-dark); }
.ph-kpi:first-child span, .ph-kpi:first-child small { color: var(--brand-soft); }
.ph-kpi b { font-family: var(--font-heading); font-size: 24px; line-height: 1.1; }
.ph-chart { padding: 12px; border-radius: 16px; background: var(--card-dark); border: 1px solid var(--line-on-dark); }
.ph-chart span { font-size: 10px; color: var(--text-muted-on-dark); }
.ph-bars { display: flex; align-items: flex-end; gap: 6px; height: 70px; margin-top: 8px; }
.ph-bars i { flex: 1; height: 0; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, var(--brand-2), var(--brand-deep)); transition: height 1s cubic-bezier(.2,.7,.2,1); }
.reveal.in .ph-bars i, .in .ph-bars i { height: var(--h); }
.ph-bars i:last-child { background: linear-gradient(180deg, var(--brand-soft), var(--brand)); }
.ph-list { display: grid; gap: 6px; }
.ph-list div { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 12px; background: var(--card-dark); border: 1px solid var(--line-on-dark); font-size: 11px; }
.ph-list b { margin-left: auto; font-family: var(--font-heading); }
.ph-list .ok { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-2); box-shadow: 0 0 8px var(--brand-2); animation: pulse 2s infinite; }
.phone-sm { width: 250px; }

.app-hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.app-hero h1 { font-size: clamp(36px, 4.6vw, 60px); }
.btn-soon { gap: 10px; padding: 0 24px; cursor: default; opacity: .9; }
.btn-soon:hover { transform: none; box-shadow: none; }
.app-feats .serv { grid-column: span 3; }
.install-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.install { padding: 28px; }
.install h3 { font-size: 22px; margin-bottom: 14px; }
.install ol { margin: 0; padding-left: 22px; display: grid; gap: 10px; color: var(--text-muted-on-dark); }
.install b { color: var(--text-on-dark); }
.app-band { display: grid; grid-template-columns: 1.2fr .8fr; gap: 32px; align-items: center; padding: 48px 56px; overflow: hidden; transition: border-color .3s; }
.app-band:hover { border-color: color-mix(in srgb, var(--brand-2) 50%, transparent); }
.app-band-text, .app-band-visual { position: relative; z-index: 1; }
.app-band .h2 { margin: 20px 0 0; font-size: clamp(30px, 4vw, 46px); }
.app-band .btn { margin-top: 28px; }
.app-band-visual { height: 340px; overflow: visible; }
.app-band-visual .phone { margin-top: -10px; }
@media (max-width: 960px) {
  .app-hero-grid, .app-band, .install-grid { grid-template-columns: 1fr; }
  .app-band { padding: 36px 24px 0; }
  .app-band-visual { height: 300px; overflow: hidden; }
}
@media (max-width: 620px) { .app-feats .serv { grid-column: auto; } .phone { width: 270px; } .app-hero .btn { width: 100%; justify-content: center; } .app-band .btn { width: 100%; justify-content: space-between; } }
/* Kopfzeile kompakter, damit 7 Menüpunkte + 3 Buttons Platz haben */
@media (min-width: 1321px) {
  .nav { gap: 16px; }
  .nav-links a { padding: 10px 9px; font-size: 14.5px; }
  .nav-cta .btn-sm { padding: 0 14px; font-size: 14px; }
}
.ph-kpi b { white-space: nowrap; font-size: 22px; }

/* ---------- Kopfzeile: 5 Menüpunkte, ☰ erst unter 1200px ---------- */
@media (min-width: 1201px) and (max-width: 1320px) {
  .nav-links { display: flex; } .nav-cta .btn-ghost { display: inline-flex; } .burger { display: none; }
  .mobile-menu { display: none; }
}

/* ---------- Referenzen ---------- */
.ref { padding: 40px; margin-bottom: 16px; display: grid; gap: 28px; }
.ref-head { display: flex; gap: 20px; align-items: center; }
.ref-head h3 { font-size: clamp(24px, 3vw, 34px); margin-top: 12px; }
.ref-logo { width: 80px; height: 80px; flex: none; border-radius: 20px; background: var(--card-light); display: grid; place-items: center; overflow: hidden; box-shadow: 0 10px 30px -12px var(--page-dark); }
.ref-logo img { width: 76px; height: 76px; }
.ref-logo-sa { background: transparent; box-shadow: none; }
.ref-logo-txt { background: var(--brand-gradient); font-family: var(--font-heading); font-weight: 700; font-size: 36px; }
.ref-logo-sa img { width: 80px; height: 80px; }
.ref-body { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; align-items: center; }
.ref-text { display: flex; flex-direction: column; gap: 18px; }
.ref-text p { color: var(--text-muted-on-dark); }
.ref-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.browser { margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--line-on-dark); background: var(--page-dark); box-shadow: 0 40px 80px -40px var(--brand); transform: perspective(1400px) rotateY(-6deg); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.ref:hover .browser { transform: perspective(1400px) rotateY(0); }
.browser-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; border-bottom: 1px solid var(--line-on-dark); background: var(--card-dark); }
.browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-on-dark); }
.browser-bar span { margin-left: 10px; font-size: 12px; color: var(--text-muted-on-dark); }
.browser-shot { width: 100%; height: auto; transition: opacity .2s; }
.browser figcaption { padding: 8px 14px; font-size: 12px; color: var(--text-muted-on-dark); border-top: 1px solid var(--line-on-dark); }
.ref-sa { background: var(--surface); border-color: var(--line-strong); }
.ref-sa h3 { font-family: var(--font); letter-spacing: var(--tracking-tight); color: var(--text-strong); }
.ref-sa h3 span { color: var(--brand); }
.ref-sa .ref-text p, .ref-sa .sa-steps { color: var(--text-muted); font-family: var(--font); }
.ref-sa .chip { font-family: var(--font); }
.sa-steps { margin: 0; padding-left: 22px; display: grid; gap: 10px; }
.sa-steps b { color: var(--text-strong); }
.ref-sa .btn-sa { align-self: flex-start; background: var(--brand); color: var(--on-brand); font-family: var(--font); }
.ref-sa .btn-sa .btn-arrow { background: var(--on-brand); color: var(--brand); }
.ref-sa .btn-sa:hover { background: var(--brand-hover); box-shadow: 0 14px 44px -10px var(--brand-glow); transform: translateY(-2px); }
.sa-shot { margin: 0; display: grid; place-items: center; border-radius: 20px; overflow: hidden; background: radial-gradient(circle at 50% 40%, var(--brand-glow), transparent 65%), var(--surface-2); border: 1px solid var(--line); }
.sa-shot img { width: 100%; max-width: 520px; height: auto; }
@media (max-width: 960px) { .ref-body { grid-template-columns: 1fr; } .browser { transform: none; } }
@media (max-width: 620px) { .ref { padding: 24px 20px; } .ref-head { align-items: flex-start; } .ref-logo { width: 60px; height: 60px; border-radius: 16px; } .ref-logo img { width: 56px; height: 56px; } .ref-logo-sa img { width: 60px; height: 60px; } .ref-logo-txt { font-size: 28px; } .ref-sa .btn-sa { width: 100%; justify-content: space-between; } }
.sa-combo { margin: 0; position: relative; }
.sa-combo .browser { box-shadow: 0 40px 80px -40px var(--brand-glow); }
.sa-combo .browser-bar { background: var(--surface-3); border-color: var(--line); }
.sa-combo .browser img { width: 100%; height: auto; }
.wrap.legal { max-width: calc(var(--max-width) + 2 * var(--pad-x-desktop)); }
.legal > * { max-width: 760px; }
.legal a { color: var(--brand-soft); text-decoration: underline; }

/* Erster Bildschirm: Guide + Tool-Leiste genau bildschirmhoch */
.erster-blick { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.erster-blick .hero { flex: 1; }
.erster-blick .tools { padding-bottom: 32px; }

/* ---------- Guide-Seite (/guide): Formular direkt sichtbar ---------- */
.guide-page .guide-form-title { padding-right: 0; }

/* ---------- Guide-Fenster (zweispaltig, kommt automatisch) ---------- */
.modal-box.modal-guide { max-width: 900px; padding: 0; display: grid; grid-template-columns: 340px 1fr; }
.mg-side { position: relative; overflow: hidden; border-right: 1px solid var(--line-on-dark); background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--brand) 35%, transparent), transparent 65%), var(--page-dark); display: grid; place-items: center; }
.mg-side .book-stage { min-height: 0; transform: scale(.85); }
.mg-main { padding: 36px 36px 32px; }
.modal .mg-main h3 { font-size: 28px; line-height: 1.15; margin: 14px 0 12px; padding-right: 48px; }
.mg-main h3 .accent { background: linear-gradient(100deg, var(--brand-2) 10%, var(--brand-soft) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mg-lead { color: var(--text-muted-on-dark); font-size: 15px; }
.mg-list { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
.mg-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.45; }
.mg-list li span { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-family: var(--font-heading); font-weight: 700; font-size: 13px; background: color-mix(in srgb, var(--brand) 30%, transparent); color: var(--brand-soft); }
.modal-guide .form { grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.modal-guide .form > * { grid-column: 1 / -1; }
.modal-guide .form > .field:nth-of-type(1), .modal-guide .form > .field:nth-of-type(2) { grid-column: auto; }
.modal-guide .consent { font-size: 13px; }
@media (max-width: 860px) {
  .modal-box.modal-guide { grid-template-columns: 1fr; }
  .mg-side { display: none; }
}
@media (max-width: 620px) {
  .mg-main { padding: 28px 20px 24px; }
  .modal .mg-main h3 { font-size: 23px; }
  .mg-list { gap: 8px; }
  .mg-list li { font-size: 15px; }
  .modal-guide .form > .field:nth-of-type(1), .modal-guide .form > .field:nth-of-type(2) { grid-column: 1 / -1; }
}