/* ═══════════════════════════════════════════════════════════
   FastLane Solutions – KI-Potenzialanalyse (/ki-analyse)
   Nutzt die CSS-Variablen der Hauptseite (--green, --paper, …)
   ═══════════════════════════════════════════════════════════ */

.fla-page { min-height: 100vh; padding: 9rem 4rem 6rem; max-width: 1060px; margin: 0 auto; }

.fla-eyebrow {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--green); margin-bottom: 1.25rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.fla-eyebrow::before { content: ''; width: 24px; height: 2.5px; background: var(--green); border-radius: 2px; flex-shrink: 0; }

/* ── Intro ── */
.fla-intro { max-width: 720px; animation: flaFadeUp 0.5s ease both; }
.fla-intro h1 {
  font-family: var(--head); font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; color: var(--ink);
}
.fla-intro h1 em { font-style: normal; color: var(--green); }
.fla-intro-sub { font-size: 1.1rem; color: var(--gray); line-height: 1.7; margin-top: 1.5rem; max-width: 620px; }
.fla-intro-points { list-style: none; margin: 2.5rem 0 0; border-top: 2px solid var(--ink); }
.fla-intro-points li {
  display: flex; align-items: baseline; gap: 1.5rem; flex-wrap: wrap;
  padding: 1.1rem 0; border-bottom: 1.5px solid var(--gray-lt);
}
.fla-intro-points strong { font-family: var(--head); font-size: 1.05rem; font-weight: 800; color: var(--ink); min-width: 210px; }
.fla-intro-points span { font-size: 0.92rem; color: var(--gray); flex: 1; min-width: 220px; }
.fla-intro-actions { margin-top: 2.5rem; }
.fla-start { font-size: 1.05rem; padding: 1.1rem 2.4rem; }
.fla-privacy-note { font-size: 0.8rem; color: var(--gray-md); margin-top: 1rem; max-width: 480px; line-height: 1.6; }
.fla-noscript { margin-top: 2rem; font-size: 0.95rem; color: var(--gray); }
.fla-noscript a { color: var(--green); }

/* ── Frage-Karte ── */
.fla-shell { max-width: 760px; margin: 0 auto; animation: flaFadeUp 0.45s ease both; }
.fla-card {
  background: var(--white); border: 1.5px solid var(--gray-lt); border-radius: 20px;
  overflow: hidden;
}
.fla-progress { height: 4px; background: var(--gray-lt); }
.fla-progress-bar { height: 100%; width: 0; background: var(--green); transition: width 0.5s ease; border-radius: 0 2px 2px 0; }
.fla-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 2.25rem 0;
}
.fla-back {
  background: none; border: none; padding: 0.35rem 0; cursor: pointer;
  font-family: var(--body); font-size: 0.85rem; font-weight: 600; color: var(--gray-md);
  transition: color 0.2s;
}
.fla-back:hover, .fla-back:focus-visible { color: var(--ink); outline: none; }
.fla-back[disabled] { visibility: hidden; }
.fla-meta { font-size: 0.78rem; font-weight: 600; color: var(--gray-md); white-space: nowrap; }
.fla-meta strong { color: var(--green); font-weight: 700; }

.fla-q { padding: 1.5rem 2.25rem 2.25rem; }
.fla-q-section {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--green); margin-bottom: 0.6rem;
}
.fla-q h2 {
  font-family: var(--head); font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink);
}
.fla-q-sub { font-size: 0.92rem; color: var(--gray); line-height: 1.6; margin-top: 0.6rem; }

.fla-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem; margin-top: 1.75rem; }
.fla-opts.cols-1 { grid-template-columns: 1fr; }
.fla-opt {
  position: relative;
  background: var(--paper); border: 1.5px solid var(--gray-lt); border-radius: 12px;
  padding: 0.95rem 2.6rem 0.95rem 1.15rem; font-family: var(--body); font-size: 0.94rem; font-weight: 500;
  color: var(--ink); cursor: pointer; text-align: left; line-height: 1.4;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.fla-opt small { display: block; font-size: 0.78rem; font-weight: 400; color: var(--gray); margin-top: 0.15rem; }
.fla-opt:hover, .fla-opt:focus-visible {
  border-color: var(--green); background: var(--white); transform: translateY(-1px); outline: none;
}
.fla-opt:focus-visible { box-shadow: 0 0 0 3px var(--green-light); }
.fla-opt::after {
  content: ''; position: absolute; top: 50%; right: 1rem; transform: translateY(-50%) scale(0.6);
  width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--gray-lt); background: var(--white);
  transition: all 0.15s; opacity: 0.7;
}
.fla-opt.sel { border-color: var(--green); background: var(--green-light); }
.fla-opt.sel::after {
  transform: translateY(-50%) scale(1); opacity: 1;
  border-color: var(--green); background: var(--green);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 12.5 4 4 9-9.5'/%3E%3C/svg%3E");
  background-size: 12px; background-position: center; background-repeat: no-repeat;
}
.fla-q-foot { display: flex; align-items: center; gap: 1.25rem; margin-top: 1.75rem; flex-wrap: wrap; }
.fla-next { padding: 0.9rem 1.9rem; font-size: 0.95rem; }
.fla-next[disabled] { opacity: 0.4; cursor: not-allowed; transform: none; }
.fla-next[disabled]:hover { background: var(--green); }
.fla-skip {
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: var(--body); font-size: 0.85rem; font-weight: 500; color: var(--gray-md);
  text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s;
}
.fla-skip:hover, .fla-skip:focus-visible { color: var(--gray); outline: none; }
.fla-hint { font-size: 0.8rem; color: var(--gray-md); }

/* Sanfter Fragenwechsel */
.fla-q.enter { animation: flaQIn 0.32s ease both; }
@keyframes flaQIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes flaFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* Ermutigung zwischendurch */
.fla-boost {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1rem;
  font-size: 0.82rem; font-weight: 600; color: var(--green);
  animation: flaQIn 0.4s ease both;
}
.fla-boost::before { content: '✓'; font-weight: 800; }

/* ── Auswertungs-Animation ── */
.fla-computing {
  background: var(--navy); border-radius: 20px; padding: 3.5rem 2.5rem;
  max-width: 620px; margin: 0 auto; animation: flaFadeUp 0.45s ease both;
}
.fla-computing h2 { font-family: var(--head); font-size: 1.5rem; font-weight: 800; color: var(--white); letter-spacing: -0.02em; }
.fla-computing-sub { font-size: 0.9rem; color: rgba(255,255,255,0.6); margin-top: 0.5rem; }
.fla-comp-steps { list-style: none; margin: 2.25rem 0 0; display: flex; flex-direction: column; gap: 0.75rem; }
.fla-comp-steps li {
  display: flex; align-items: center; gap: 0.85rem;
  font-size: 0.92rem; font-weight: 500; color: rgba(255,255,255,0.4);
  transition: color 0.4s ease;
}
.fla-comp-steps li .dot {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 800; color: transparent;
  transition: all 0.35s ease;
}
.fla-comp-steps li.done { color: var(--white); }
.fla-comp-steps li.done .dot { background: #5ddf9a; border-color: #5ddf9a; color: var(--navy); }
.fla-comp-steps li.active { color: rgba(255,255,255,0.85); }
.fla-comp-steps li.active .dot { border-color: #5ddf9a; animation: flaPulse 1.2s infinite; }
@keyframes flaPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(93,223,154,0.35); } 50% { box-shadow: 0 0 0 6px rgba(93,223,154,0.08); } }

/* ── Ergebnis ── */
.fla-result { animation: flaFadeUp 0.5s ease both; }
.fla-r-head { text-align: left; margin-bottom: 2rem; }
.fla-r-head h1 {
  font-family: var(--head); font-size: clamp(1.9rem, 4vw, 2.8rem);
  font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: var(--ink);
  max-width: 700px;
}
.fla-r-head h1 em { font-style: normal; color: var(--green); }
.fla-r-sub { font-size: 1rem; color: var(--gray); margin-top: 0.9rem; max-width: 620px; line-height: 1.7; }

.fla-scoreboard {
  display: grid; grid-template-columns: 300px 1fr; gap: 0;
  background: var(--white); border: 2px solid var(--ink); border-radius: 20px; overflow: hidden;
}
.fla-gauge-box {
  background: var(--navy); padding: 2.5rem 2rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.fla-gauge { position: relative; width: 190px; height: 190px; }
.fla-gauge svg { transform: rotate(-90deg); }
.fla-gauge .track { fill: none; stroke: rgba(255,255,255,0.12); stroke-width: 12; }
.fla-gauge .val { fill: none; stroke: #5ddf9a; stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset 1.4s cubic-bezier(0.22, 1, 0.36, 1); }
.fla-gauge-num {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.fla-gauge-num strong { font-family: var(--head); font-size: 3rem; font-weight: 800; color: var(--white); letter-spacing: -0.04em; line-height: 1; }
.fla-gauge-num span { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-top: 0.35rem; }
.fla-gauge-label {
  margin-top: 1.25rem; font-family: var(--head); font-size: 1.05rem; font-weight: 800; color: var(--white);
}
.fla-gauge-bench { margin-top: 0.5rem; font-size: 0.8rem; color: rgba(255,255,255,0.6); line-height: 1.55; max-width: 230px; }
.fla-gauge-bench strong { color: #5ddf9a; font-weight: 700; }

.fla-cats { padding: 2rem 2.25rem; display: flex; flex-direction: column; justify-content: center; gap: 1.15rem; }
.fla-cat { }
.fla-cat-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.4rem; }
.fla-cat-name { font-size: 0.92rem; font-weight: 600; color: var(--ink); }
.fla-cat-val { font-family: var(--head); font-size: 1.05rem; font-weight: 800; color: var(--ink); white-space: nowrap; }
.fla-cat-val small { font-family: var(--body); font-size: 0.72rem; font-weight: 600; color: var(--gray-md); margin-left: 0.4rem; }
.fla-cat-bar { height: 8px; background: var(--paper); border: 1px solid var(--gray-lt); border-radius: 100px; overflow: hidden; }
.fla-cat-fill { height: 100%; width: 0; border-radius: 100px; background: var(--green); transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1); }
.fla-cat-fill.mid { background: var(--green-bright); opacity: 0.75; }
.fla-cat-fill.low { background: var(--gray-md); }
.fla-cats-note { font-size: 0.76rem; color: var(--gray-md); margin-top: 0.35rem; line-height: 1.55; }

/* Potenzial-Zahlen */
.fla-nums { margin-top: 3.5rem; }
.fla-nums-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 1.5rem; }
.fla-num-card {
  background: var(--white); border: 1.5px solid var(--gray-lt); border-radius: 16px; padding: 1.75rem 1.5rem;
  transition: border-color 0.2s;
}
.fla-num-card:hover { border-color: var(--green); }
.fla-num-card strong {
  font-family: var(--head); font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 800;
  color: var(--green); letter-spacing: -0.03em; display: block; line-height: 1.15; white-space: nowrap;
}
.fla-num-card span { display: block; font-size: 0.88rem; font-weight: 600; color: var(--ink); margin-top: 0.5rem; }
.fla-num-card p { font-size: 0.8rem; color: var(--gray); line-height: 1.55; margin-top: 0.35rem; }
.fla-nums-legal { font-size: 0.78rem; color: var(--gray-md); line-height: 1.6; margin-top: 1rem; max-width: 720px; }

.fla-h3 { font-family: var(--head); font-size: clamp(1.4rem, 2.8vw, 1.9rem); font-weight: 800; letter-spacing: -0.025em; color: var(--ink); line-height: 1.15; }
.fla-h3 em { font-style: normal; color: var(--green); }
.fla-sec-sub { font-size: 0.95rem; color: var(--gray); margin-top: 0.6rem; max-width: 620px; line-height: 1.7; }

/* Empfehlungen */
.fla-recs { margin-top: 3.5rem; }
.fla-rec-list { margin-top: 1.75rem; display: flex; flex-direction: column; gap: 1rem; }
.fla-rec {
  display: grid; grid-template-columns: 56px 1fr auto; gap: 1.5rem; align-items: start;
  background: var(--white); border: 1.5px solid var(--gray-lt); border-radius: 16px; padding: 1.75rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.fla-rec:hover { border-color: var(--green); box-shadow: 0 10px 32px rgba(26,122,74,0.08); }
.fla-rec.first { border: 2px solid var(--green); }
.fla-rec-n {
  font-family: var(--head); font-size: 2rem; font-weight: 800; color: var(--gray-lt);
  letter-spacing: -0.04em; line-height: 1; padding-top: 0.1rem;
}
.fla-rec.first .fla-rec-n { color: var(--green); }
.fla-rec-main h4 { font-family: var(--head); font-size: 1.15rem; font-weight: 800; color: var(--ink); line-height: 1.25; }
.fla-rec-phase {
  display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  background: var(--green-light); color: var(--green); padding: 0.25rem 0.7rem; border-radius: 100px;
  margin-bottom: 0.6rem;
}
.fla-rec.first .fla-rec-phase { background: var(--green); color: var(--white); }
.fla-rec-why { font-size: 0.92rem; color: var(--gray); line-height: 1.65; margin-top: 0.5rem; }
.fla-rec-why strong { color: var(--ink); font-weight: 600; }
.fla-rec-impact {
  text-align: right; white-space: nowrap; padding-top: 0.1rem;
}
.fla-rec-impact strong { display: block; font-family: var(--head); font-size: 1.1rem; font-weight: 800; color: var(--green); letter-spacing: -0.02em; }
.fla-rec-impact span { font-size: 0.72rem; color: var(--gray-md); font-weight: 600; }

/* CTA */
.fla-cta { margin-top: 3.5rem; background: var(--green); border-radius: 20px; overflow: hidden; }
.fla-cta-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; padding: 3rem; align-items: center; }
.fla-cta h3 { font-family: var(--head); font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; color: var(--white); letter-spacing: -0.025em; line-height: 1.12; }
.fla-cta-sub { font-size: 0.98rem; color: rgba(255,255,255,0.85); line-height: 1.7; margin-top: 1rem; }
.fla-cta-points { list-style: none; margin-top: 1.5rem; }
.fla-cta-points li { display: flex; gap: 0.7rem; padding: 0.45rem 0; font-size: 0.92rem; font-weight: 500; color: rgba(255,255,255,0.92); }
.fla-cta-points li::before { content: '✓'; color: #aef0cd; font-weight: 800; flex-shrink: 0; }
.fla-cta-form { background: var(--white); border-radius: 14px; padding: 2rem 1.75rem; }
.fla-cta-form h4 { font-family: var(--head); font-size: 1.15rem; font-weight: 800; color: var(--ink); }
.fla-cta-form .fla-form-note { font-size: 0.82rem; color: var(--gray); margin: 0.3rem 0 1.4rem; }
.fla-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.fla-fg { margin-bottom: 0.7rem; }
.fla-fg label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--ink); margin-bottom: 0.3rem; }
.fla-fg input {
  width: 100%; padding: 0.75rem 0.95rem;
  background: var(--paper); border: 1.5px solid var(--gray-lt); border-radius: 8px;
  font-family: var(--body); font-size: 0.93rem; color: var(--ink);
  outline: none; transition: border-color 0.2s;
}
.fla-fg input:focus { border-color: var(--green); }
.fla-check { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0.9rem 0 1.1rem; cursor: pointer; }
.fla-check input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--green); cursor: pointer; flex-shrink: 0; }
.fla-check span { font-size: 0.83rem; color: var(--gray); line-height: 1.5; }
.fla-submit {
  width: 100%; padding: 0.95rem; background: var(--green); color: var(--white);
  border: none; border-radius: 8px; font-family: var(--body); font-size: 0.98rem; font-weight: 700;
  cursor: pointer; transition: background 0.2s;
}
.fla-submit:hover { background: var(--ink); }
.fla-submit[disabled] { opacity: 0.6; cursor: wait; }
.fla-form-legal { font-size: 0.73rem; color: var(--gray-md); text-align: center; margin-top: 0.7rem; line-height: 1.5; }
.fla-form-error { font-size: 0.85rem; font-weight: 600; color: var(--red); margin-top: 0.7rem; text-align: center; }

.fla-cta-success { text-align: center; padding: 1.5rem 0.5rem; }
.fla-cta-success .big { width: 54px; height: 54px; border-radius: 50%; background: var(--green-light); color: var(--green); font-size: 1.5rem; font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; }
.fla-cta-success h4 { font-family: var(--head); font-size: 1.2rem; font-weight: 800; color: var(--ink); }
.fla-cta-success p { font-size: 0.9rem; color: var(--gray); line-height: 1.65; margin-top: 0.6rem; }

/* Sekundäre Aktionen unter dem Ergebnis */
.fla-r-actions { display: flex; align-items: center; gap: 1.75rem; margin-top: 2rem; flex-wrap: wrap; }
.fla-ghost {
  background: none; border: 1.5px solid var(--gray-lt); border-radius: 100px;
  padding: 0.6rem 1.3rem; font-family: var(--body); font-size: 0.85rem; font-weight: 600;
  color: var(--gray); cursor: pointer; transition: border-color 0.2s, color 0.2s;
}
.fla-ghost:hover, .fla-ghost:focus-visible { border-color: var(--ink); color: var(--ink); outline: none; }
.fla-r-privacy { font-size: 0.76rem; color: var(--gray-md); line-height: 1.55; }

/* Druckkopf (nur im PDF/Druck sichtbar) */
.fla-print-head { display: none; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .fla-page { padding: 8rem 2.5rem 5rem; }
}
@media (max-width: 860px) {
  .fla-scoreboard { grid-template-columns: 1fr; }
  .fla-gauge-box { padding: 2.25rem 1.5rem; }
  .fla-nums-grid { grid-template-columns: 1fr; gap: 0.85rem; }
  .fla-cta-grid { grid-template-columns: 1fr; gap: 2rem; padding: 2rem 1.5rem; }
  .fla-rec { grid-template-columns: 40px 1fr; }
  .fla-rec-n { font-size: 1.5rem; }
  .fla-rec-impact { grid-column: 2; text-align: left; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1.5px solid var(--gray-lt); width: 100%; }
}
@media (max-width: 680px) {
  .fla-page { padding: 6.5rem 1.25rem 4rem; }
  .fla-opts { grid-template-columns: 1fr; }
  .fla-card-head { padding: 1rem 1.25rem 0; }
  .fla-q { padding: 1.25rem 1.25rem 1.75rem; }
  .fla-intro-points strong { min-width: 0; width: 100%; }
  .fla-intro-points li { gap: 0.2rem; flex-direction: column; }
  .fla-start { width: 100%; text-align: center; }
  .fla-computing { padding: 2.5rem 1.5rem; }
  .fla-cats { padding: 1.5rem 1.25rem; }
  .fla-rec { padding: 1.25rem; }
  .fla-cta-form { padding: 1.5rem 1.25rem; }
  .fla-form-row { grid-template-columns: 1fr; }
  .fla-q-foot { gap: 0.9rem; }
  .fla-next { width: 100%; text-align: center; }
}

/* ── Reduzierte Bewegung ── */
@media (prefers-reduced-motion: reduce) {
  .fla-intro, .fla-shell, .fla-result, .fla-computing, .fla-boost { animation: none; }
  .fla-q.enter { animation: none; }
  .fla-opt, .fla-cat-fill, .fla-gauge .val, .fla-progress-bar { transition: none; }
  .fla-comp-steps li.active .dot { animation: none; }
}

/* ── Druck / PDF-Export ── */
@media print {
  nav, footer, .fla-cta, .fla-r-actions, .mob-btn { display: none !important; }
  body { background: #fff; font-size: 12pt; }
  .fla-page { padding: 1rem 0; max-width: 100%; }
  .fla-print-head {
    display: flex; justify-content: space-between; align-items: baseline;
    border-bottom: 2px solid #0d0d0d; padding-bottom: 0.75rem; margin-bottom: 1.5rem;
  }
  .fla-print-head .logo { font-family: var(--head); font-weight: 800; font-size: 1.1rem; color: #0d0d0d; }
  .fla-print-head .logo em { font-style: normal; color: #1a7a4a; }
  .fla-print-head .meta { font-size: 0.75rem; color: #5a5a5a; }
  .fla-scoreboard { border-color: #0d0d0d; break-inside: avoid; }
  .fla-gauge-box { background: #1c2b3a !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .fla-rec, .fla-num-card { break-inside: avoid; box-shadow: none !important; }
  .fla-result { animation: none; }
}