/* ==========================================================================
   AXR-Systems — KI-Potenzial-Check: Assistent und Auswertung.
   Nutzt bewusst dieselben Bausteine wie der Sichtbarkeits-Check
   (.ax-sc-cat-*, .ax-sc-prio-*, .ax-sc-cta), damit beide Werkzeuge als ein
   System gelesen werden. Liegt als eigene Datei vor, weil sie nur auf der
   Check-Seite geladen wird — main.css ist ohnehin zu groß.
   ========================================================================== */
.ax-kic{margin:0 0 1.6rem}
.ax-kic-stage{background:var(--surface);border:1px solid var(--line);
  border-radius:calc(var(--r) + 6px);padding:1.8rem 1.9rem;
  box-shadow:0 24px 60px -44px rgba(2,6,23,.5)}

/* Statischer Fallback ohne JavaScript */
.ax-kic-static-note{margin:0 0 1rem;color:var(--ink-2)}
.ax-kic-qlist{margin:0;padding-left:1.2rem}
.ax-kic-qtext{font-family:var(--font-head);font-weight:600;color:var(--ink);margin:.9rem 0 .3rem}

/* Fortschritt */
.ax-kic-progress{display:flex;align-items:center;gap:.9rem;margin-bottom:1.3rem}
.ax-kic-progress-track{flex:1;height:7px;border-radius:99px;overflow:hidden;
  background:color-mix(in srgb,var(--line) 70%,transparent)}
.ax-kic-progress-track i{display:block;height:100%;border-radius:99px;background:var(--brand-grad);
  transition:width .45s var(--ease)}
.ax-kic-progress-txt{font-size:.78rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap}

/* Frage und Antworten */
.ax-kic-q{font-size:clamp(1.15rem,2.2vw,1.5rem);line-height:1.35;margin:0 0 1.1rem;
  letter-spacing:-.01em;outline:none}
.ax-kic-answers{display:grid;gap:.6rem}
.ax-kic-answer{display:flex;align-items:flex-start;gap:.75rem;width:100%;text-align:left;
  padding:.95rem 1.1rem;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  font:inherit;color:var(--ink-2);cursor:pointer;
  opacity:1;transform:none;animation:axKicIn .38s cubic-bezier(.22,1,.36,1) backwards;
  animation-delay:calc(var(--i,0)*55ms);
  transition:border-color .18s,background .18s,transform .18s cubic-bezier(.22,1,.36,1)}
.ax-kic-answer:hover{border-color:color-mix(in srgb,var(--brand-2) 45%,var(--line));
  background:color-mix(in srgb,var(--brand-1) 4%,var(--surface));transform:translateX(3px)}
.ax-kic-answer:focus-visible{outline:3px solid var(--brand-2);outline-offset:2px}
.ax-kic-radio{flex:none;width:19px;height:19px;border-radius:50%;margin-top:.12em;
  border:2px solid color-mix(in srgb,var(--line) 88%,var(--ink));position:relative;
  transition:border-color .18s,background .18s}
.ax-kic-answer.is-picked{border-color:var(--brand-2);
  background:color-mix(in srgb,var(--brand-1) 8%,var(--surface));color:var(--ink)}
.ax-kic-answer.is-picked .ax-kic-radio{border-color:var(--brand-2);background:var(--brand-grad)}
.ax-kic-answer.is-picked .ax-kic-radio::after{content:"";position:absolute;inset:3px;
  border-radius:50%;background:#fff}
.ax-kic-nav{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}
.ax-kic-nav.is-result{margin-top:1.4rem;justify-content:center}
@keyframes axKicIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Ergebnis */
.ax-kic-top{display:flex;flex-wrap:wrap;align-items:center;gap:1.6rem;margin-bottom:1.6rem}
.ax-kic-gauge{position:relative;width:132px;height:132px;flex:none}
.ax-kic-gauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.ax-kic-track{fill:none;stroke:color-mix(in srgb,var(--line) 75%,transparent);stroke-width:9}
.ax-kic-arc{fill:none;stroke:var(--brand-2);stroke-width:9;stroke-linecap:round;
  transition:stroke-dashoffset .1s linear}
.ax-kic-score{position:absolute;inset:0;display:grid;place-content:center;text-align:center;line-height:1}
.ax-kic-num{font-family:var(--font-head);font-weight:700;font-size:2.3rem;letter-spacing:-.03em;color:var(--ink)}
.ax-kic-of{display:block;margin-top:.2rem;font-size:.68rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.ax-kic-summary{flex:1 1 300px;min-width:0}
.ax-kic-eyebrow{display:block;font-size:.7rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--brand-2);margin-bottom:.3rem}
.ax-kic-level{margin:0 0 .4rem;font-family:var(--font-head);font-weight:700;
  font-size:clamp(1.25rem,2.6vw,1.7rem);letter-spacing:-.02em;line-height:1.25;outline:none}
.ax-kic-level.is-a{color:#047857}
.ax-kic-level.is-b{color:#B45309}
.ax-kic-level.is-c{color:#B45309}
.ax-kic-level.is-d{color:var(--ink-2)}
.ax-kic-leveltext{margin:0;color:var(--ink-2);line-height:1.68;font-size:.96rem}
.ax-kic-areas{margin-top:1.8rem}

/* Ring in der Farbe der Stufe. Hoher Wert heißt hier „viel zu holen" — deshalb
   bleibt Blau die Grundfarbe und nur die unterste Stufe wird zurückgenommen. */
.ax-kic-gauge.is-c .ax-kic-arc{stroke:#d97706}
.ax-kic-gauge.is-d .ax-kic-arc{stroke:color-mix(in srgb,var(--muted) 80%,transparent)}
/* Weicher Schein hinter dem Ring — gibt dem Ergebnis Gewicht, ohne zu blinken. */
.ax-kic-gauge::before{content:"";position:absolute;inset:-14%;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--brand-2) 22%,transparent) 0%,transparent 68%);
  opacity:1;animation:axKicGlow .9s .25s ease backwards;pointer-events:none}
.ax-kic-gauge.is-c::before{background:radial-gradient(circle,rgba(217,119,6,.2) 0%,transparent 68%)}
.ax-kic-gauge.is-d::before{background:radial-gradient(circle,color-mix(in srgb,var(--muted) 16%,transparent) 0%,transparent 68%)}
@keyframes axKicGlow{from{opacity:0}to{opacity:1}}

/* Ergebnisblöcke laufen nacheinander ein. */
.ax-kic-block{opacity:1;transform:none;
  animation:axKicBlock .5s cubic-bezier(.22,1,.36,1) backwards;
  animation-delay:calc(var(--b,0)*90ms)}
@keyframes axKicBlock{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Zwei abgeleitete Kennzahlen neben der Stufe. */
.ax-kic-facts{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.ax-kic-fact{flex:1 1 190px;min-width:0;padding:.7rem .85rem;border:1px solid var(--line);
  border-radius:var(--r-sm,10px);background:color-mix(in srgb,var(--line) 22%,transparent)}
.ax-kic-fact-n{display:block;font-family:var(--font-head);font-weight:700;font-size:1.5rem;
  line-height:1.1;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.ax-kic-fact-n.is-txt{font-size:1rem;line-height:1.3;letter-spacing:-.01em}
.ax-kic-fact-l{display:block;margin-top:.25rem;font-size:.72rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted)}
.ax-kic-fact-l i{display:block;margin-top:.15rem;font-style:normal;font-weight:600;
  letter-spacing:0;text-transform:none;font-size:.78rem;color:var(--ink-2)}

/* Vertrauenszeile unter dem Ergebnis. */
.ax-kic-trust{list-style:none;margin:1.4rem 0 0;padding:.9rem 1rem;display:grid;gap:.5rem;
  border:1px dashed color-mix(in srgb,var(--line) 95%,transparent);border-radius:var(--r-sm,10px);
  background:color-mix(in srgb,var(--line) 16%,transparent)}
/* Das Häkchen vor jedem Punkt kommt aus dem Fließtext-Stil des Themes
   (li::after im Inhaltsbereich) — hier wird nur enger gesetzt. */
.ax-kic-trust li{font-size:.87rem;line-height:1.55;color:var(--ink-2);margin:0}

/* --------------------------------------------------------------------------
   Bereichskarten — gemeinsam genutzt von KI-Check und DSGVO-Check.
   Beide Werkzeuge laden diese Datei, deshalb steht der Baustein hier und nicht
   doppelt. Die Akzentfarbe kommt über --area-ton, damit jedes Werkzeug seine
   eigene Logik behalten kann: Beim KI-Check ist ein hoher Wert eine Chance,
   beim DSGVO-Check ein Risiko — dieselbe Karte, andere Bedeutung.
   -------------------------------------------------------------------------- */
.ax-arealist{display:grid;gap:.55rem}
.ax-area{--area-ton:var(--brand-2);
  padding:.95rem 1.1rem;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);border-left:3px solid var(--area-ton);
  box-shadow:0 12px 34px -30px rgba(2,6,23,.55);
  /* Ruhezustand SICHTBAR. Vorher stand hier opacity:0, und die Sichtbarkeit
     hing daran, dass die Animation auch wirklich läuft. Tut sie das nicht —
     im Hintergrundtab friert die Zeitachse ein, ebenso beim Drucken und bei
     erzwungenen Farben —, blieben die Karten DAUERHAFT unsichtbar: Der
     Besucher sah „Ergebnis nach Bereichen" und darunter leere Fläche. Jetzt
     blendet die Animation nur von unsichtbar heran (backwards); fällt sie
     aus, steht der Inhalt einfach da. */
  opacity:1;transform:none;
  animation:axAreaIn .42s cubic-bezier(.22,1,.36,1) backwards;
  animation-delay:calc(var(--i,0)*70ms);
  transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s,border-color .2s}
.ax-area:hover{transform:translateY(-2px);box-shadow:0 20px 44px -30px rgba(2,6,23,.6)}
@keyframes axAreaIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ax-area.is-good{--area-ton:#059669}
.ax-area.is-warn{--area-ton:#d97706}
.ax-area.is-bad{--area-ton:color-mix(in srgb,var(--muted) 80%,transparent)}
[data-theme="dark"] .ax-area.is-good{--area-ton:#34d399}
[data-theme="dark"] .ax-area.is-warn{--area-ton:#fbbf24}
.ax-area-top{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;margin-bottom:.5rem}
.ax-area-name{font-weight:650;color:var(--ink);font-size:.96rem;line-height:1.3}
.ax-area-vals{display:flex;align-items:baseline;gap:.55rem;flex:none}
.ax-area-pct{font-size:1.02rem;font-weight:800;font-variant-numeric:tabular-nums;color:var(--area-ton)}
.ax-area-w{font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap}
.ax-area-bar{height:7px;border-radius:99px;overflow:hidden;
  background:color-mix(in srgb,var(--line) 65%,transparent)}
.ax-area-bar span{display:block;height:100%;width:0;border-radius:99px;background:var(--area-ton);
  transition:width .9s cubic-bezier(.22,1,.36,1)}
.ax-area-rec{display:block;margin-top:.55rem;font-size:.84rem;line-height:1.6;color:var(--ink-2);
  padding-left:.8rem;border-left:2px solid color-mix(in srgb,var(--line) 90%,transparent)}

/* --------------------------------------------------------------------------
   „Ihre nächsten Schritte" im KI-Check.
   Die Liste stammt aus dem Sichtbarkeits-Check, wo Rot für einen Mangel steht.
   Hier bedeutet ein hoher Wert das Gegenteil: viel Potenzial. Derselbe Bereich
   stünde oben grün und unten rot — deshalb bekommt die Liste hier den
   Markenakzent statt der Ampel. Es sind Schritte, keine Fehler.
   -------------------------------------------------------------------------- */
.ax-kic-result .ax-sc-prio{margin-top:1.9rem}
.ax-kic-result .ax-sc-prio-item.is-bad,
.ax-kic-result .ax-sc-prio-item.is-warn{
  border-left-color:var(--brand-2);
  background:linear-gradient(90deg,color-mix(in srgb,var(--brand-1) 6%,transparent),transparent 42%)}
.ax-kic-result .ax-sc-prio-item.is-bad .ax-sc-prio-n,
.ax-kic-result .ax-sc-prio-item.is-warn .ax-sc-prio-n{background:var(--brand-grad)}

@media(max-width:620px){
  .ax-kic-stage{padding:1.2rem 1.1rem}
  .ax-kic-top{gap:1.1rem}
  .ax-kic-gauge{width:108px;height:108px}
  .ax-kic-num{font-size:1.9rem}
  /* Auf dem Telefon steht der Ring über dem Text statt daneben. Links
     angeschlagen wirkte er wie ein versehentlich verrutschtes Bild —
     zentriert ist er das, was er sein soll: die Überschrift des Ergebnisses.
     Der Fließtext bleibt linksbündig, zentrierte Absätze lesen sich schlecht. */
  .ax-kic-top{flex-direction:column;align-items:stretch}
  .ax-kic-gauge{align-self:center}
  .ax-kic-summary{text-align:left}
  .ax-kic-eyebrow,.ax-kic-level{text-align:center}
  /* Kennzahlen untereinander statt zweispaltig gequetscht. */
  .ax-kic-fact{flex:1 1 100%}
  .ax-area{padding:.8rem .9rem}
  /* Auf schmalen Geräten bricht die Kopfzeile der Karte, sonst wird der
     Bereichsname auf zwei Zeichen pro Zeile zusammengedrückt. */
  .ax-area-top{flex-wrap:wrap;gap:.3rem .6rem}
  .ax-area-name{flex:1 1 100%}
}
@media(prefers-reduced-motion:reduce){
  .ax-kic-answer,.ax-kic-block,.ax-area{animation:none;opacity:1;transform:none}
  .ax-kic-answer:hover,.ax-area:hover{transform:none}
  .ax-area-bar span{transition:none}
  .ax-kic-gauge::before{animation:none;opacity:1}
}

/* ------------------------------------------------------------------
   Kopf des Werkzeugs (Eyebrow + H1 + Lead) — gleiche Optik wie beim
   Sichtbarkeits-Check, damit beide Werkzeugseiten identisch wirken.
   ------------------------------------------------------------------ */
/* Fließtext, deshalb Lesebreite statt eigener Pixelzahl: Sonst liefe der
   Vorspann bei 1500px Seitenbreite anders aus als der des Sichtbarkeits-
   Checks, obwohl beide Werkzeugseiten gleich wirken sollen. */
.ax-kic-lead{max-width:var(--measure);margin-inline:auto}


/* ------------------------------------------------------------------
   Sicherheitsnetz. Das Skript setzt diese Klasse anderthalb Sekunden
   nach dem Aufbau des Ergebnisses. Sollte eine Animation aus welchem
   Grund auch immer nicht gelaufen sein, steht danach garantiert alles
   sichtbar da — ein Ergebnis, das man nicht sieht, ist kein Ergebnis.
   ------------------------------------------------------------------ */
.ax-anim-fertig .ax-kic-answer,
.ax-anim-fertig .ax-kic-block,
.ax-anim-fertig .ax-area,
.ax-anim-fertig .ax-kic-gauge::before{animation:none;opacity:1;transform:none}

/* Nach dem Auswerten springt der Fokus programmgesteuert auf die Stufe, damit
   Screenreader das Ergebnis vorlesen. Ein Rahmen um eine Überschrift, die
   niemand bedienen kann, ist dort nur Grafik — die Ansage übernimmt ohnehin
   das aria-live der Bühne. */
.ax-kic-level:focus { outline: none; }