/* ==========================================================================
   VaultAI Business. Textlastiger als die Startseite: hier entscheidet
   nicht das Bild, sondern ob die Angaben belastbar wirken.
   ========================================================================== */

/* --- Hero --------------------------------------------------------------- */
.b-hero{padding:calc(52px + clamp(48px,7vw,88px)) 0 clamp(56px,7vw,84px)}
.b-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,68px);align-items:center}
.b-hero h1{font-size:clamp(2.4rem,5vw,3.95rem);font-weight:730;letter-spacing:-.038em;line-height:1.04}
.b-hero .lead{margin-top:20px;max-width:44ch}
.b-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* Faktenpanel statt Dekobild. Einer der drei erlaubten Glas-Einsaetze. */
.b-panel{
  padding:clamp(24px,3vw,34px);border-radius:var(--r-lg);
  background:var(--glass);border:1px solid var(--border-2);
  box-shadow:inset 0 1px 0 var(--glass-edge);
  backdrop-filter:saturate(160%) blur(16px);
  -webkit-backdrop-filter:saturate(160%) blur(16px);
}
@media (prefers-reduced-transparency: reduce){
  .b-panel{background:var(--bg-2);backdrop-filter:none;-webkit-backdrop-filter:none}
}
.b-panel h2{
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-dim);margin-bottom:18px;
}
.b-panel dl{display:flex;flex-direction:column;gap:15px}
.b-panel div{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.b-panel dt{font-size:var(--fs-sm);color:var(--text-muted)}
.b-panel dd{font-size:var(--fs-sm);font-weight:600;text-align:right}
@media (max-width:880px){ .b-hero-grid{grid-template-columns:1fr} }

/* --- Szenario ----------------------------------------------------------- */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);margin-top:clamp(34px,4vw,50px);align-items:start}
.case{padding-top:22px;border-top:2px solid var(--border-2)}
.case h3{font-size:1.05rem;margin-bottom:9px}
.case p{font-size:var(--fs-sm);color:var(--text-muted);line-height:1.6}
/* Der loesende Ausgang gewinnt sichtbar: eine angehobene weisse Karte zwischen
   zwei flachen Textspalten. Die Hierarchie traegt das Argument, nicht neue Deko. */
.case.good{
  margin-top:-20px;padding:26px 24px;border-top:0;border-radius:var(--r-card);
  background:var(--bg-2);box-shadow:0 26px 54px -30px rgba(27,54,93,.42);
}
.case.good h3{color:var(--accent-text)}
@media (max-width:760px){ .cases{grid-template-columns:1fr;gap:26px} .case.good{margin-top:0} }

/* --- Leistungen (Sticky-Szene: Kapitel-Kopf steht, Zeilen laufen) -------- */
.b-services{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(32px,5vw,80px);align-items:start}
.b-services-head{position:sticky;top:112px;margin-bottom:0}
.rows{border-top:1px solid var(--border)}
.row{
  display:grid;grid-template-columns:minmax(160px,.85fr) 1.6fr;gap:clamp(16px,2.4vw,36px);
  padding:26px 0;border-bottom:1px solid var(--border);align-items:start;
}
.row h3{font-size:1.08rem;transition:color .3s var(--ease);hyphens:auto;-webkit-hyphens:auto}
.row p{font-size:var(--fs-sm);color:var(--text-muted);line-height:1.65;max-width:60ch}
/* Aktive Zeile: nur die Ueberschrift nimmt die Akzentfarbe an. Vorher wurden
   alle anderen Zeilen auf opacity .6 gedimmt - das schob laufenden Text unter
   den AA-Kontrast, nur um Fortschritt anzuzeigen. */
.rows .row.active h3{color:var(--accent-text)}
@media (max-width:880px){
  .b-services{grid-template-columns:1fr;gap:8px}
  .b-services-head{position:static}
}
@media (max-width:720px){ .row{grid-template-columns:1fr;gap:8px;padding:22px 0} }

/* --- Datenschutzband (der eine bewusste Dunkel-Moment, siehe DESIGN.md) -- */
.privacy{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,4vw,60px);align-items:start}
.privacy-intro{position:sticky;top:112px}
@media (max-width:820px){ .privacy-intro{position:static} }
.privacy ul{list-style:none;display:flex;flex-direction:column;gap:17px}
.privacy li{display:flex;gap:13px;font-size:.97rem;color:var(--text-muted);line-height:1.6}
.privacy li strong{color:var(--text);font-weight:600}
.privacy svg{width:17px;height:17px;flex:0 0 auto;margin-top:4px;color:var(--accent-text)}
@media (max-width:820px){ .privacy{grid-template-columns:1fr} }

/* --- Anfrage ------------------------------------------------------------ */
.ask{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(32px,5vw,64px);align-items:start}
.ask-form{display:flex;flex-direction:column;gap:16px}
.ask-side{
  padding:clamp(22px,2.6vw,30px);border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--border);
}
.ask-side h2{font-size:1.02rem;margin-bottom:16px}
.ask-steps{list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:15px;margin-bottom:26px}
.ask-steps li{
  counter-increment:s;position:relative;padding-left:32px;
  font-size:var(--fs-sm);color:var(--text-muted);line-height:1.55;
}
.ask-steps li::before{
  content:counter(s);position:absolute;left:0;top:-1px;
  display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--accent-weak);color:var(--accent-text);
  font-size:11px;font-weight:600;
}
.ask-contact{display:flex;flex-direction:column;gap:9px;padding-top:22px;border-top:1px solid var(--border)}
.ask-contact a{font-size:var(--fs-sm);color:var(--text-muted)}
.ask-contact a:hover{color:var(--text)}
.ask-priv{font-size:var(--fs-xs);color:var(--text-dim);line-height:1.55}
.ask-priv a{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px}
@media (max-width:880px){ .ask{grid-template-columns:1fr} }