/* ==========================================================================
   Startseite. Nur seitenspezifisches CSS, alles Gemeinsame in base.css.

   Aufbau: farbige Vollflaechen (blau / blaugrau) wechseln streng mit dem
   weissgrauen Grund. Jede Sektion hat eine andere Layout-Familie - zwei
   gleichfoermige Kartenraster hintereinander waren der Template-Eindruck,
   den diese Seite vorher hatte.
   ========================================================================== */

/* --- 1. HERO (signalblaue Vollflaeche) --------------------------------- */
.hero{padding:calc(72px + clamp(48px,6vw,88px)) 0 clamp(64px,8vw,104px);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}
.hero h1{font-size:clamp(2.9rem,6.6vw,5rem);font-weight:780;letter-spacing:-.05em;line-height:1.0}
.hero .lead{margin-top:22px;max-width:46ch;color:#EAF0FA}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero-facts{
  display:flex;flex-wrap:wrap;gap:12px 26px;
  margin-top:clamp(34px,5vw,44px);padding-top:26px;
  border-top:1px solid var(--border);
}
.hero-facts span{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--text-muted)}
.hero-facts svg{width:15px;height:15px;color:var(--accent-text);flex:0 0 auto}

/* Phone im Hero: freigestelltes Geraet auf weichem hellen Boden. */
.hero-stage{position:relative;justify-self:center;width:min(340px,82vw)}
.hero-stage::after{
  content:'';position:absolute;z-index:0;left:50%;bottom:4%;
  width:74%;height:16%;transform:translateX(-50%);
  background:radial-gradient(60% 100% at 50% 50%, rgba(233,240,249,.5), transparent 72%);
  filter:blur(30px);
}
.hero-stage .shot{position:relative;z-index:1}
.hero-stage .shot img{width:100%;filter:drop-shadow(0 30px 50px rgba(9,20,38,.42))}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;text-align:center}
  .hero .lead{margin-inline:auto}
  .hero-actions,.hero-facts{justify-content:center}
  .hero-stage{margin-top:8px}
}

/* Pruefstand-Moment: freischwebende Ergebnis-Karten am Hero-Phone. Erzaehlen
   die Kernbewegung der App - oben, was du einfuegst; unten, das Urteil. Glas
   ist hier einer der drei erlaubten Einsaetze (DESIGN.md), Semantikfarbe steht
   nur im Ergebnis. Die Karten tragen ihre eigenen hellen Werte, damit sie auf
   dem blauen Hero lesbar bleiben. */
.verdict{position:absolute;z-index:4;text-align:left}
.verdict-in{left:-7%;top:9%;width:min(214px,58vw)}
.verdict-out{right:-13%;bottom:10%;width:min(202px,54vw)}
.v-card{
  border-radius:var(--r);padding:13px 15px;
  background:var(--glass);border:1px solid rgba(255,255,255,.92);
  box-shadow:0 24px 48px -22px rgba(15,30,55,.6), inset 0 1px 0 rgba(255,255,255,.95);
  backdrop-filter:saturate(170%) blur(16px);
  -webkit-backdrop-filter:saturate(170%) blur(16px);
  color:#16233A;
}
@media (prefers-reduced-transparency: reduce){
  .v-card{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
}
.v-tag{
  display:block;font-size:.68rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:#5A667C;margin-bottom:6px;
}
.v-snip{font-size:.9rem;line-height:1.36;color:#16233A;font-weight:500}
.v-snip b{font-weight:700;color:var(--danger)}
.v-verdict{display:flex;align-items:center;gap:10px}
.v-dot{
  width:32px;height:32px;flex:0 0 auto;border-radius:var(--r-sm);display:grid;place-items:center;
  background:color-mix(in srgb,var(--danger) 15%,#fff);color:var(--danger);
}
.v-dot svg{width:18px;height:18px}
.v-verdict b{display:block;font-size:1rem;font-weight:700;color:var(--danger);letter-spacing:-.012em;line-height:1.14}
.v-verdict small{display:block;font-size:.8rem;color:#47536A;margin-top:2px;line-height:1.3}
/* Sanfter Ambient-Float, entkoppelt vom reveal-Transform des Wrappers. */
@media (prefers-reduced-motion: no-preference){
  .v-float{animation:vfloat 7.5s var(--ease) infinite}
  .verdict-out .v-float{animation-duration:8.6s;animation-delay:-2.4s}
}
@keyframes vfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media (max-width:900px){
  .verdict-in{left:-2%;top:5%;width:min(200px,44vw)}
  .verdict-out{right:-2%;bottom:12%;width:min(190px,42vw)}
}
@media (max-width:520px){
  .verdict-in{left:-3%;top:3%;width:46vw}
  .verdict-out{right:-3%;bottom:10%;width:44vw}
  .v-card{padding:11px 12px}
  .v-snip{font-size:.82rem}
  .v-verdict b{font-size:.9rem}
  .v-verdict small{font-size:.74rem}
}

/* --- 2. TRUST-BAND / LAUFBAND ------------------------------------------ */
.trust{padding-block:clamp(30px,4vw,44px)}
.trust-label{text-align:center;font-size:var(--fs-sm);font-weight:600;color:var(--text-muted);margin-bottom:20px}
.ticker-mask{
  position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ticker-track{display:flex;gap:12px;width:max-content}
@media (prefers-reduced-motion: no-preference){
  .ticker-track{animation:ticker 58s linear infinite}
  .ticker-mask:hover .ticker-track{animation-play-state:paused}
}
@keyframes ticker{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion: reduce){
  .ticker-mask{overflow-x:auto;scrollbar-width:none}
  .ticker-mask::-webkit-scrollbar{display:none}
}
.trust .chip{
  display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  padding:10px 17px;border-radius:var(--r-pill);
  background:var(--bg-2);border:1px solid var(--border);
  font-size:var(--fs-sm);font-weight:500;color:var(--text-muted);
}
.trust .chip svg{width:14px;height:14px;color:var(--accent-text)}

/* --- 3. KONTROLLE (Split: Titel links, Feature-Liste rechts) ----------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,72px);align-items:center}
@media (max-width:860px){ .split{grid-template-columns:1fr;gap:36px} }
.feature-list{list-style:none;display:flex;flex-direction:column;gap:20px}
.feature-list li{display:flex;gap:14px;font-size:1.02rem;line-height:1.5}
.feature-list .fi{
  display:grid;place-items:center;width:26px;height:26px;flex:0 0 auto;margin-top:1px;
  border-radius:var(--r-sm);background:var(--accent-weak);color:var(--accent-text);
}
.feature-list .fi svg{width:15px;height:15px}
/* Der Gegenpol - was VaultAI bewusst nicht tut. Neutral gehalten: danger
   gehoert laut DESIGN.md ausschliesslich ins Pruefergebnis. */
.feature-list .fi.no{background:var(--surface-2);color:var(--text-dim)}
.feature-list li strong{font-weight:650}

/* --- 4. SCANNER (grosse Bloecke + Dreier-Kacheln) ---------------------- */
.scan-ic{
  display:grid;place-items:center;width:46px;height:46px;margin-bottom:18px;
  border-radius:var(--r-sm);background:var(--accent-weak);color:var(--accent-text);
}
.scan-ic svg{width:23px;height:23px}
.scan-duo{display:flex;flex-direction:column;gap:16px}
.scan-block{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center;
  background:var(--bg-2);border-radius:var(--r-card);padding:clamp(28px,4vw,56px);
}
.scan-block h3{font-size:1.6rem;letter-spacing:-.03em;margin-bottom:12px;line-height:1.12}
.scan-block .scan-text p{color:var(--text-muted);line-height:1.62;max-width:46ch}
.scan-media{position:relative;justify-self:center;width:min(232px,58vw)}
.scan-media .shot img{filter:drop-shadow(0 24px 40px rgba(27,54,93,.26))}
.scan-block.reverse .scan-text{order:2}
.scan-block.reverse .scan-media{order:1}
@media (max-width:820px){
  .scan-block{grid-template-columns:1fr;gap:30px}
  .scan-block.reverse .scan-text{order:1}
  .scan-block.reverse .scan-media{order:2}
  .scan-media{width:min(220px,56vw)}
}
.scan-tri{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.scan-card{
  display:flex;flex-direction:column;background:var(--bg-2);border-radius:var(--r-card);
  padding:clamp(24px,2.6vw,34px);
  transition:transform .22s var(--ease-out), box-shadow .22s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .scan-card:hover{transform:translateY(-4px);box-shadow:0 26px 50px -30px rgba(27,54,93,.42)}
}
.scan-card .scan-ic{width:42px;height:42px;margin-bottom:16px}
.scan-card .scan-ic svg{width:21px;height:21px}
.scan-card h3{font-size:1.2rem;margin-bottom:9px;hyphens:auto;-webkit-hyphens:auto}
.scan-card p{font-size:var(--fs-sm);color:var(--text-muted);line-height:1.6}
@media (max-width:820px){ .scan-tri{grid-template-columns:1fr} }
.scan-more{margin-top:clamp(26px,3vw,36px)}

/* --- 5. ABLAUF (Sticky-Szene) ------------------------------------------ */
.flow{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(32px,5vw,84px);align-items:start}
.flow-media{position:sticky;top:120px;justify-self:center;width:min(300px,74vw)}
.flow-stack{position:relative;aspect-ratio:1000/2028}
.flow-shot{position:absolute;inset:0;opacity:0;transition:opacity .55s var(--ease)}
.flow-shot img{filter:drop-shadow(0 24px 40px rgba(27,54,93,.24))}
.flow-shot.active{opacity:1}
@media (prefers-reduced-motion: reduce){ .flow-shot{transition:none} }
.flow-steps{list-style:none;display:flex;flex-direction:column;gap:clamp(28px,4vw,52px)}
.step{position:relative;padding-left:70px}
.flow-steps .step::before{
  content:'';position:absolute;left:21px;top:48px;bottom:calc(-1 * clamp(28px,4vw,52px));
  width:1.5px;background:var(--border-2);
}
.flow-steps .step:last-child::before{display:none}
.step-n{
  position:absolute;left:0;top:0;z-index:1;display:grid;place-items:center;
  width:44px;height:44px;border-radius:50%;
  background:var(--bg-2);border:1px solid var(--border-2);
  font-size:.97rem;font-weight:650;color:var(--text-dim);font-variant-numeric:tabular-nums;
  transition:color .3s var(--ease), border-color .3s var(--ease),
             background .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.step h3{font-size:var(--fs-h3);margin-bottom:10px}
.step p{font-size:var(--fs-sm);color:var(--text-muted);line-height:1.6;max-width:46ch}
/* Der aktive Schritt wird durch die Ziffer markiert, nicht dadurch, dass die
   anderen Schritte abgedunkelt werden. Text auf opacity:.5 faellt unter AA -
   Fortschritt anzuzeigen darf nicht bedeuten, Text unlesbar zu machen. */
.flow-steps .step.active .step-n{
  background:var(--blue);border-color:var(--blue);color:#fff;
  box-shadow:0 10px 24px -8px var(--accent-glow);transform:scale(1.06);
}
@media (max-width:820px){
  .flow{grid-template-columns:1fr;gap:44px}
  .flow-media{position:static;order:-1}
}

/* --- 6. PRUEFBERICHT ---------------------------------------------------
   Der Prueflings-Moment der Seite: kein Screenshot, sondern der Bericht
   selbst, in HTML gesetzt. Er zeigt, was sonst nirgends zu sehen ist -
   Eingabe, Urteil, Begruendung, Rat in einem Stueck. Semantikfarbe ist hier
   erlaubt und richtig, denn das hier ist ein Pruefergebnis. */
.report-scene{display:grid;grid-template-columns:.88fr 1.12fr;gap:clamp(34px,5vw,76px);align-items:center}
@media (max-width:900px){ .report-scene{grid-template-columns:1fr;gap:38px} }
.report-copy .lead{margin-top:18px}
.report-copy .note{
  margin-top:26px;padding-top:20px;border-top:1px solid var(--border);
  font-size:var(--fs-sm);color:var(--text-muted);line-height:1.62;max-width:46ch;
}
.report-copy .link-arrow{margin-top:22px}

.report{
  background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-card);
  box-shadow:0 30px 70px -34px rgba(27,54,93,.42);
  overflow:hidden;max-width:520px;width:100%;justify-self:center;
}
.rep-row{padding:clamp(18px,2.4vw,24px) clamp(20px,2.6vw,28px);border-top:1px solid var(--border)}
.rep-row:first-child{border-top:0}
.rep-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-block:14px;background:var(--surface);
}
.rep-head b,.rep-head span{
  font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.rep-head b{color:var(--text)}
.rep-head span{color:var(--text-dim);font-weight:600;font-variant-numeric:tabular-nums}
.rep-label{
  display:block;font-size:.7rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-dim);margin-bottom:11px;
}
.rep-quote{
  margin:0;padding:15px 17px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--border);
  font-size:.99rem;line-height:1.55;color:var(--text);
}
.rep-quote b{font-weight:700;color:var(--danger);overflow-wrap:anywhere}

.rep-verdict{display:flex;align-items:center;gap:14px}
.rep-mark{
  display:grid;place-items:center;width:42px;height:42px;flex:0 0 auto;border-radius:var(--r);
  background:color-mix(in srgb,var(--danger) 13%,#fff);color:var(--danger);
}
.rep-mark svg{width:23px;height:23px}
.rep-verdict b{font-size:1.22rem;font-weight:700;letter-spacing:-.02em;color:var(--danger);line-height:1.15}
.rep-verdict small{display:block;font-size:.85rem;color:var(--text-muted);margin-top:2px}
.rep-score{margin-left:auto;text-align:right;flex:0 0 auto}
.rep-score b{
  display:block;font-size:1.5rem;font-weight:750;letter-spacing:-.03em;
  color:var(--danger);line-height:1;font-variant-numeric:tabular-nums;
}
.rep-score small{display:block;font-size:.76rem;color:var(--text-dim);margin-top:5px}
/* Der eine gestaltete Bewegungsmoment dieser Sektion: der Balken laeuft
   einmal auf seinen Wert, wenn die Karte ins Bild kommt. */
.rep-meter{margin-top:16px;height:6px;border-radius:var(--r-pill);background:var(--surface-2);overflow:hidden}
.rep-meter i{
  display:block;height:100%;border-radius:inherit;background:var(--danger);
  transform:scaleX(.92);transform-origin:0 50%;
}
@media (prefers-reduced-motion: no-preference){
  .js .report .rep-meter i{transform:scaleX(0);transition:transform 1.1s var(--ease) .25s}
  .js .report.in .rep-meter i{transform:scaleX(.92)}
}

.rep-why{list-style:none;display:flex;flex-direction:column;gap:12px}
.rep-why li{
  position:relative;padding-left:20px;
  font-size:var(--fs-sm);color:var(--text-muted);line-height:1.58;
}
.rep-why li::before{
  content:'';position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:2px;
  background:color-mix(in srgb,var(--danger) 55%,transparent);
}
.rep-why b{color:var(--text);font-weight:650}

.rep-do{display:flex;gap:13px;align-items:flex-start;background:var(--surface)}
.rep-do svg{width:19px;height:19px;flex:0 0 auto;margin-top:2px;color:var(--accent-text)}
.rep-do p{font-size:var(--fs-sm);color:var(--text-muted);line-height:1.6}
.rep-do b{display:block;color:var(--text);font-weight:650;margin-bottom:3px}

/* --- 7. DATENSCHUTZ (blaues Split-Panel) ------------------------------- */
.why-list{display:flex;flex-direction:column}
.why-item{display:flex;gap:16px;padding:22px 0;border-top:1px solid var(--border)}
.why-item:first-child{border-top:0;padding-top:0}
.why-ic{
  display:grid;place-items:center;width:38px;height:38px;flex:0 0 auto;
  border-radius:var(--r-sm);background:var(--surface);color:var(--accent-text);
}
.why-ic svg{width:19px;height:19px}
.why-item h3{font-size:1.05rem;margin-bottom:7px;hyphens:auto;-webkit-hyphens:auto}
.why-item p{font-size:var(--fs-sm);color:var(--text-muted);line-height:1.6}

/* --- 8. PREIS ---------------------------------------------------------- */
.price{text-align:center;max-width:640px;margin-inline:auto}
.price-num{
  font-size:clamp(4.5rem,13vw,8rem);font-weight:780;letter-spacing:-.05em;line-height:.9;
  margin-block:22px 20px;color:var(--blue-deep);font-variant-numeric:tabular-nums;
}
.price-facts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:30px}
.price-facts span{
  padding:9px 16px;border-radius:var(--r-pill);
  background:var(--surface);border:1px solid var(--border);
  font-size:var(--fs-sm);color:var(--text-muted);
}

/* --- 9. BUSINESS (dunkle abgerundete Karte) ---------------------------- */
.biz{
  display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(28px,4vw,56px);align-items:center;
  border-radius:var(--r-card);padding:clamp(34px,5vw,64px);
}
.biz h2{font-size:clamp(1.7rem,3.2vw,2.3rem);letter-spacing:-.03em;margin-bottom:14px}
.biz p{color:var(--text-muted);line-height:1.6;max-width:46ch}
.biz-points{list-style:none;display:flex;flex-direction:column;gap:13px}
.biz-points li{display:flex;gap:11px;font-size:var(--fs-sm);color:var(--text-muted);line-height:1.5}
.biz-points svg{width:16px;height:16px;flex:0 0 auto;margin-top:3px;color:var(--accent-text)}
@media (max-width:820px){ .biz{grid-template-columns:1fr} }

/* --- 10. FAQ ----------------------------------------------------------- */
.qa-list{max-width:760px}
.qa{border-bottom:1px solid var(--border)}
.qa summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:22px 0;cursor:pointer;list-style:none;
  font-size:1.05rem;font-weight:600;line-height:1.45;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary .chev{width:19px;height:19px;flex:0 0 auto;margin-top:3px;color:var(--text-dim);transition:transform .26s var(--ease)}
.qa[open] summary .chev{transform:rotate(180deg)}
.qa-a{padding:0 0 24px;max-width:64ch;font-size:.98rem;color:var(--text-muted);line-height:1.68}
.qa-a a{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px}
@media (hover:hover) and (pointer:fine){ .qa summary:hover{color:var(--accent-text)} }

/* --- 11. DOWNLOAD / FINALER CTA (weisse Karte) ------------------------- */
.final-cta{text-align:center;max-width:860px;margin-inline:auto}
.final-cta .h2{max-width:18ch;margin-inline:auto}
.stores{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:34px}
.store{
  display:inline-flex;align-items:center;gap:12px;
  padding:14px 26px;border-radius:var(--r);
  border:1px solid var(--border-2);background:var(--bg-2);
  transition:border-color .2s ease, transform .12s var(--ease-out);
}
.store:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){ .store:hover{border-color:var(--blue)} }
.store svg{width:24px;height:24px;flex:0 0 auto}
.store span{display:block;text-align:left;line-height:1.25}
.store small{display:block;font-size:var(--fs-xs);color:var(--text-dim)}
.store b{display:block;font-size:.97rem;font-weight:650}
.store-soon{cursor:default;background:var(--surface);border-style:dashed}
.store-soon:active{transform:none}
.store-soon svg,.store-soon small{color:var(--text-dim)}
.store-soon b{color:var(--text-muted)}
@media (hover:hover) and (pointer:fine){ .store-soon:hover{border-color:var(--border-2)} }
.store-note{margin-top:20px;font-size:var(--fs-xs);color:var(--text-dim)}
/* QR zum App Store, fuer Desktop-Besucher die am Handy laden wollen. Selbst
   gehostetes SVG (CSP: img-src 'self'), per Hairline abgetrennt statt in eine
   zweite Karte gesetzt. Auf schmalen Screens ausgeblendet - wer schon am Handy
   ist, tippt den Button. */
.qr-download{
  margin-top:clamp(30px,4vw,44px);padding-top:clamp(28px,3.5vw,38px);
  border-top:1px solid var(--border);
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.qr-download a{display:block;line-height:0;border-radius:var(--r-sm)}
.qr-download a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.qr-download img{width:148px;height:148px}
.qr-download p{margin:0;max-width:26ch;font-size:var(--fs-sm);font-weight:600;color:var(--text-muted);line-height:1.45}
@media (max-width:560px){ .qr-download{display:none} }