/* ==========================================================================
   AXR-Systems — Werkzeugseiten: Feinschliff, Leistungs-Block, Mobil.

   Diese Datei wird auf allen vier Werkzeugseiten geladen (Sichtbarkeits-Check,
   KI-Potenzial-Check, ROI-Rechner, DSGVO-Check) und liegt bewusst NACH den
   werkzeugeigenen Stilvorlagen.

   Warum eine eigene Datei und keine Änderung an main.css: main.css ist über
   1600 Zeilen groß und wird auf jeder Seite geladen. Korrekturen, die nur vier
   Seiten betreffen, gehören dort nicht hinein — und eine separate Datei lässt
   sich gefahrlos zurücknehmen, wenn eine Regel doch zu weit greift.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) Passende Leistungen — der Block, der aus einer Diagnose ein Angebot macht
   -------------------------------------------------------------------------- */
.ax-tl-grid {
  display: grid; gap: .8rem; margin: 1.4rem 0 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.ax-tl-card {
  position: relative; display: flex; flex-direction: column; gap: .35rem;
  padding: 1.15rem 1.2rem 1.05rem; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); color: var(--ink-2); text-decoration: none;
  box-shadow: 0 12px 30px -26px rgba(2, 6, 23, .55);
  transition: transform .22s var(--ease), box-shadow .22s, border-color .22s;
}
.ax-tl-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--tl-2) 55%, var(--line));
  box-shadow: 0 22px 44px -28px color-mix(in srgb, var(--tl-1) 70%, rgba(2, 6, 23, .5));
}
.ax-tl-card:focus-visible { outline: 3px solid var(--tl-2); outline-offset: 3px; }
.ax-tl-bar {
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--tl-1), var(--tl-2));
  transform: scaleX(.35); transform-origin: left;
  transition: transform .35s var(--ease);
}
.ax-tl-card:hover .ax-tl-bar { transform: scaleX(1); }
.ax-tl-name {
  font-family: var(--font-head); font-weight: 700; font-size: 1rem;
  color: var(--ink); letter-spacing: -.01em;
}
.ax-tl-text { font-size: .88rem; line-height: 1.6; }
.ax-tl-more {
  margin-top: .35rem; font-size: .8rem; font-weight: 700;
  color: var(--tl-1); display: inline-flex; align-items: center; gap: .3rem;
}
[data-theme="dark"] .ax-tl-more { color: var(--tl-2); }
.ax-tl-more i { font-style: normal; transition: transform .22s var(--ease); }
.ax-tl-card:hover .ax-tl-more i { transform: translateX(4px); }
.ax-tl-fuss {
  max-width: var(--measure); font-size: .9rem; color: var(--muted);
  border-left: 3px solid var(--line); padding-left: .9rem; margin: 0 0 .4rem;
}

/* --------------------------------------------------------------------------
   2) Mobil: Zentrierung, Abstände, Trefferflächen
   Grundlage ist eine Prüfung der vier Werkzeug-Stilvorlagen; jede Regel hier
   behebt einen konkret belegten Defekt unter 640px.
   -------------------------------------------------------------------------- */

/* Ergebniskopf des Sichtbarkeits-Checks lief über: harte Mindestbreite. */
.ax-sc-summary { min-width: 0; }

/* --------------------------------------------------------------------------
   Empfehlungs-Überzeile über dem Abbinder.
   Sie macht aus dem Angebot sichtbar eine Empfehlung — und erscheint nur dort,
   wo das Ergebnis eine hergibt. Bei einem sauberen Ergebnis fehlt sie bewusst.
   -------------------------------------------------------------------------- */
.ax-sc-cta-emp {
  display: inline-block; margin-bottom: .35rem;
  font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand-2);
}
.ax-sc-cta-emp::after {
  content: ""; display: block; width: 26px; height: 2px; margin-top: .3rem;
  border-radius: 2px; background: var(--brand-grad);
}

/* Der Textblock der Ergebnis-CTA. .ax-sc-cta ist eine Zeile mit
   „space-between" und braucht genau zwei Kinder: diesen Block und die
   Schaltflächen. Liegen Überzeile, Überschrift und Text stattdessen einzeln
   darin, schiebt der Browser sie über die ganze Breite auseinander. */
.ax-sc-cta-txt { max-width: 62ch; }

@media (max-width: 640px) {
  /* Die Ergebnis-CTAs standen linksbündig, während die Navigation darüber
     zentriert war — auf Mobil wirkt das wie ein Satzfehler. */
  .ax-sc-cta,
  .ax-sc-endcta {
    text-align: center; justify-content: center; gap: .9rem;
    padding: 1.25rem 1.05rem;
  }
  .ax-sc-cta-x { max-width: none; margin-inline: auto; }
  .ax-sc-endcta > div:first-child { max-width: none; }
  .ax-sc-cta-actions { width: 100%; justify-content: center; }
  .ax-sc-cta-actions .btn { flex: 1 1 100%; justify-content: center; }
  .ax-sc-endcta { margin-top: clamp(1.8rem, 1rem + 4vw, 3rem); }

  /* Kopfbereich der Auswertung: gleiche Innenabstände wie die anderen Werkzeuge. */
  .ax-sc-top { padding: 1.1rem; gap: 1.1rem 1.4rem; }
  .ax-sc-scan { padding: clamp(1.4rem, 1rem + 2.5vw, 2.2rem) 1rem; }

  /* Abschnittsabstände im Bericht waren fest gesetzt und fraßen auf kleinen
     Schirmen ein Drittel der Höhe. */
  .ax-sc-h { margin: clamp(1.2rem, .8rem + 2vw, 2rem) 0 .2rem; }
  .ax-sc-group { margin: clamp(1rem, .7rem + 1.5vw, 1.5rem) 0 .5rem; }

  /* Tote Spaltenbreiten in den Stufentabellen. */
  .ax-grades .ax-grade-cell,
  .ax-grades .ax-grade-range { width: auto; }

  /* Empfehlungszeile mittig, wie der Abbinder darunter. */
  .ax-sc-cta-emp { display: block; }
  .ax-sc-cta-emp::after { margin-inline: auto; }

  /* Steuerung der Assistenten: auf dem Telefon mittig statt links angeschlagen,
     damit Kopf, Abbinder und Bedienung auf einer Achse sitzen. */
  .ax-kic-nav { justify-content: center; }
  .ax-kic-nav .btn { flex: 1 1 100%; justify-content: center; }
  .ax-seocheck-form { flex-direction: column; }
  /* Spalten-Falle: In flex-direction:column ist flex-basis die HÖHE. Das
     Eingabefeld trägt aus main.css „flex:1 1 260px" — untereinander gestellt
     wurde daraus eine 260px hohe Pille mit einer 44px hohen Zeile darin, also
     rund 215px Loch zwischen Überschrift und Button. Die Höhe muss sich hier
     nach dem Inhalt richten. */
  .ax-seocheck-input { flex: 0 0 auto; }
  .ax-seocheck-go { width: 100%; justify-content: center; }
  .ax-seocheck-hint { text-align: center; }

  /* Leistungs-Block einspaltig und mit ruhigerem Abstand. */
  .ax-tl-grid { grid-template-columns: 1fr; gap: .65rem; }
  .ax-tl-card { padding: 1rem 1.05rem .95rem; }
  .ax-tl-fuss { border-left: 0; padding-left: 0; text-align: center; }
}

/* --------------------------------------------------------------------------
   3) ROI-Rechner: Mobil
   -------------------------------------------------------------------------- */
/* Der Regler ist das zentrale Bedienelement — 22px Höhe sind als Ziel zu
   klein. Die Bahn wird über Abstände wieder mittig gesetzt. */
.ax-roi2 input[type="range"] { height: 44px; }
.ax-roi2 input[type="range"]::-webkit-slider-runnable-track { margin-block: 19px; }
.ax-roi2 input[type="range"]::-moz-range-track { margin-block: 19px; }

.ax-roi2-methode summary { min-height: 44px; padding: .55rem 0; }

@media (max-width: 620px) {
  .ax-roi2-panel { padding: 1.1rem 1rem; }
  /* Siebenstellige Beträge brachen mitten in der Zahl um, weil der
     Beitragsinhalt overflow-wrap:break-word vererbt. */
  .ax-roi2-heronum { font-size: clamp(1.75rem, 8vw, 2.9rem); overflow-wrap: normal; word-break: keep-all; }
  .ax-roi2-band-row { grid-template-columns: 1fr; }
  .ax-roi2-band-c {
    display: flex; align-items: baseline; justify-content: space-between;
    text-align: left; padding: .55rem .75rem;
  }
  .ax-roi2-band-c span { margin-top: 0; }
  .ax-roi2-ctrl-val { padding: .35rem .6rem; min-height: 44px; }
  .ax-roi2-ctrl-val input { width: 6ch; padding: .35rem 0; }
  /* Die statische Tabelle ohne JavaScript lieber scrollen lassen als brechen. */
  .ax-roi2-static { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ax-roi2-static .ax-grades { min-width: 420px; }
  .ax-roi2-panel, .ax-roi2-inputs { text-align: left; }
  .ax-roi2-hero { text-align: center; }
  .ax-roi2-actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* Bedienelemente des Rechners als Trefferfläche: Szenario-Pillen und der
   Monat/Jahr-Umschalter kommen mit .85rem × 1.65 + 2 × .42rem auf 37px.
   Beide sind Schaltflächen, zentrieren ihren Text also von selbst — es
   genügt die Mindesthöhe, die Breite bleibt unverändert. */
@media (max-width: 640px) {
  .ax-roi .ax-roi-preset,
  .ax-roi .ax-roi-view-btn { min-height: 44px; }
}

/* --------------------------------------------------------------------------
   4) Fließtext-Blöcke der Werkzeugseiten mittig führen
   Die Vorspänne standen teils links, obwohl der Kopf zentriert ist.
   -------------------------------------------------------------------------- */
.ax-kic-lead, .ax-roi-lead { max-width: var(--measure); margin-inline: auto; }

@media (max-width: 640px) {
  .ax-dsg-hinweis { text-align: left; }
  .ax-sc-aside, .ax-sc-prose { text-align: left; }
}