/* ==================================================================
   AiNemix Unterseiten - gemeinsames Gerüst
   ------------------------------------------------------------------
   Eine Stildatei für alle 12 Unterseiten. Übernimmt die Ruhe der
   Startseite: dunkler Grund, Cyan als einzige Akzentfarbe, dieselben
   Schriften - und drei Eckenradien (12px klein, 16px Karten, 999px nur
   für den Kicker) statt der sechs, die vorher nebeneinander liefen.

   Gemessen war das Problem nicht die Farbe (nur 17 sichtbare Farben,
   überwiegend Weißabstufungen), sondern die Menge: 19 Überschriften
   und 20 Absätze auf 4.899px. Deshalb liegt der Hebel im Gerüst,
   nicht in der Palette.

   Navigation und Fußzeile der Seiten bleiben unberührt - hier wird
   ausschließlich der Mittelteil gestaltet (.ax-s*).
   ================================================================== */

/* Dieselben Schriften wie die Startseite. Sie lagen bisher nur dort, deshalb
   fielen die Unterseiten auf Outfit zurueck und wirkten wie eine andere Website.
   Die Dateien liegen im selben Ordner wie dieses Stylesheet. */
@font-face{ font-family:'Space Grotesk'; font-style:normal; font-weight:300 700;
  font-display:swap; src:url('space-grotesk-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:'Space Grotesk'; font-style:normal; font-weight:300 700;
  font-display:swap; src:url('space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:'JetBrains Mono'; font-style:normal; font-weight:100 800;
  font-display:swap; src:url('jetbrains-mono-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

.ax-main{
  --cy:#2CE6F5; --bl:#1183E3;
  --txt:#C6D2E0; --dim:#8FA1B6; --leise:#5E7086;
  --grund:#060F1E; --karte:rgba(255,255,255,.035);
  --kante:rgba(255,255,255,.08);
  --r:16px;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --serif:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --sans:'Manrope',ui-sans-serif,system-ui,-apple-system,sans-serif;
  background:var(--grund); color:var(--txt);
  display:block;
}
.ax-main *{ box-sizing:border-box; }

/* Die Altseiten setzen die Schrift ueber eine ID-Regel (#ainx-page-… *), die
   jede Klassenregel schlaegt. Nur deshalb steht hier !important - ohne das
   bliebe der ganze Mittelteil auf der alten Schrift. */
.ax-main, .ax-main p, .ax-main a, .ax-main li, .ax-main dd, .ax-main dt,
.ax-main label, .ax-main input, .ax-main textarea, .ax-main button,
.ax-main figcaption{ font-family:var(--sans) !important; }
.ax-main h1, .ax-main h2, .ax-main h3, .ax-main h4{ font-family:var(--serif) !important; }
.ax-main .ax-kick, .ax-main .ax-ico, .ax-main .ax-nr{ font-family:var(--mono) !important; }

/* ---------- Abschnitt und Behälter -------------------------------- */
.ax-sec{ position:relative; padding:clamp(56px,8vw,104px) 24px; }
.ax-sec + .ax-sec{ border-top:1px solid rgba(255,255,255,.055); }
.ax-in{ max-width:1080px; margin:0 auto; }
.ax-eng{ max-width:720px; }

/* Genau EIN Verlauf auf der Seite, im Kopfbereich - danach ruhige Fläche.
   Vorher lagen mehrere Verläufe und sechs schwebende Flecken übereinander. */
.ax-hero{ background:
  radial-gradient(120% 78% at 50% -10%, rgba(17,131,227,.16), transparent 68%); }

/* ---------- Kopfbereich ------------------------------------------- */
.ax-kick{ display:inline-block; font-family:var(--mono); font-size:11px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--cy);
  padding:6px 13px; border-radius:999px;
  background:rgba(44,230,245,.09); border:1px solid rgba(44,230,245,.26);
  margin-bottom:20px; }
.ax-h1{ font-family:var(--serif); font-size:clamp(29px,4.6vw,50px); line-height:1.1;
  letter-spacing:-.02em; color:#fff; margin:0 0 18px; max-width:15ch; }
/* Deutsche Komposita sind laenger als die Spalte: "Leistungsverzeichnisse"
   allein ist breiter als 15ch bei 50px. Ohne Trennung ragt das Wort heraus. */
.ax-h1, .ax-h2, .ax-karte h3, .ax-schritt h3{
  overflow-wrap:break-word; -webkit-hyphens:auto; hyphens:auto; }
.ax-h1.weit{ max-width:20ch; }
.ax-lead{ font-size:clamp(16px,1.5vw,19px); line-height:1.62; color:var(--dim);
  margin:0; max-width:60ch; }

/* ---------- Schaltflächen ----------------------------------------- */
.ax-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.ax-btn{ display:inline-flex; align-items:center; gap:9px;
  min-height:50px; padding:0 24px; border-radius:12px;
  font-family:var(--sans); font-size:15px; font-weight:700;
  text-decoration:none; white-space:nowrap;
  transition:transform .18s ease, box-shadow .25s ease, background .25s ease;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.ax-btn.haupt{ color:#04101F !important;
  background:linear-gradient(94deg, var(--cy), var(--bl));
  box-shadow:0 12px 30px -14px rgba(44,230,245,.75); }
.ax-btn.neben{ color:#fff !important;
  background:rgba(255,255,255,.05); border:1px solid var(--kante); }
.ax-btn:hover{ transform:translateY(-1px); }
.ax-btn.haupt:hover{ box-shadow:0 16px 38px -14px rgba(44,230,245,.9); }
.ax-btn.neben:hover{ background:rgba(255,255,255,.09); }

/* ---------- Überschrift eines Abschnitts -------------------------- */
.ax-h2{ font-family:var(--serif); font-size:clamp(23px,3vw,34px); line-height:1.18;
  letter-spacing:-.015em; color:#fff; margin:0 0 14px; max-width:22ch; }
.ax-sub{ font-size:16px; line-height:1.6; color:var(--dim); margin:0 0 34px;
  max-width:62ch; }

/* ---------- Karten ------------------------------------------------ */
.ax-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.ax-grid.zwei{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.ax-karte{ padding:24px; border-radius:var(--r);
  background:var(--karte); border:1px solid var(--kante); }
.ax-karte h3{ font-family:var(--serif); font-size:18px; line-height:1.3;
  color:#fff; margin:0 0 9px; }
.ax-karte p{ font-size:14.5px; line-height:1.62; color:var(--dim); margin:0; }
.ax-ico{ display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:12px; margin-bottom:14px;
  background:rgba(44,230,245,.10); border:1px solid rgba(44,230,245,.22);
  color:var(--cy); font-family:var(--mono); font-size:13px; font-weight:700; }

/* ---------- Ablauf ------------------------------------------------ */
.ax-schritte{ display:grid; gap:1px; background:var(--kante);
  border:1px solid var(--kante); border-radius:var(--r); overflow:hidden; }
.ax-schritt{ display:grid; grid-template-columns:52px minmax(0,1fr);
  gap:18px; align-items:start; padding:20px 22px; background:#080F1D; }
.ax-nr{ font-family:var(--mono); font-size:12px; font-weight:700; color:var(--cy);
  padding-top:2px; letter-spacing:.06em; }
.ax-schritt h3{ font-family:var(--serif); font-size:16.5px; color:#fff;
  margin:0 0 5px; line-height:1.3; }
.ax-schritt p{ font-size:14.5px; line-height:1.6; color:var(--dim); margin:0; }

/* ---------- Abschluss --------------------------------------------- */
.ax-schluss{ text-align:center; padding:clamp(40px,5vw,60px) 28px;
  border-radius:var(--r); border:1px solid rgba(44,230,245,.20);
  background:linear-gradient(168deg, rgba(44,230,245,.07), rgba(9,20,38,.6) 70%); }
.ax-schluss .ax-h2{ margin-left:auto; margin-right:auto; max-width:24ch; }
.ax-schluss .ax-sub{ margin-left:auto; margin-right:auto; margin-bottom:26px; }
.ax-schluss .ax-cta{ justify-content:center; margin-top:0; }

/* ---------- Zahlenzeile ------------------------------------------- */
.ax-fakten{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px; margin-top:34px; }
.ax-fakt{ padding:20px 22px; border-radius:var(--r);
  background:var(--karte); border:1px solid var(--kante); }
.ax-fakt b{ display:block; font-family:var(--serif); font-size:26px; color:#fff;
  line-height:1; margin-bottom:7px; }
.ax-fakt span{ font-size:13.5px; line-height:1.5; color:var(--dim); }

/* ---------- Beleg-Bild (echter Screenshot des Werkzeugs) ---------- */
.ax-figur{ margin:0; border-radius:var(--r); overflow:hidden;
  border:1px solid var(--kante); background:var(--karte); }
/* Ein 16:9-Foto ueber die volle Spaltenbreite waere fast 600px hoch und
   schoebe alles Folgende weit nach unten. Gedeckelt und mittig beschnitten
   bleibt die Bildwirkung, ohne die Seite zu strecken. Screenshots werden
   NICHT beschnitten - dort ist der Inhalt der Zweck. */
.ax-figur img{ display:block; width:100%; height:auto;
  max-height:400px; object-fit:cover; object-position:center; }
.ax-figur.voll img{ max-height:none; object-fit:fill; }
.ax-figur figcaption{ padding:13px 18px; font-size:13.5px; color:var(--leise);
  border-top:1px solid var(--kante); }

/* ---------- Kontakt: Formular neben den Angaben ------------------- */
.ax-split{ display:grid; grid-template-columns:1.05fr .95fr; gap:16px;
  align-items:start; }

/* Die Formularfelder tragen weiter ihre alten Klassennamen, damit die
   bestehende Absendelogik unveraendert greift. Hier bekommen sie nur das
   ruhigere Aussehen - zwei Klassen tief, damit es die Regeln aus dem
   Seiten-<style> sicher schlaegt. */
.ax-main .field{ margin:0 0 14px; }
.ax-main .field label{ display:block; font-size:13px; font-weight:700;
  color:var(--dim); margin-bottom:7px; }
.ax-main .input, .ax-main .textarea{
  width:100%; min-height:50px; padding:13px 15px; border-radius:12px;
  background:rgba(0,0,0,.26); border:1px solid var(--kante); color:#fff;
  font-family:var(--sans); font-size:15px; font-weight:500; outline:none;
  transition:border-color .18s ease, box-shadow .18s ease; }
.ax-main .textarea{ min-height:132px; resize:vertical; line-height:1.55; }
.ax-main .input::placeholder, .ax-main .textarea::placeholder{ color:var(--leise); }
.ax-main .input:focus, .ax-main .textarea:focus{
  border-color:rgba(44,230,245,.55); box-shadow:0 0 0 3px rgba(44,230,245,.13); }
.ax-main .hint{ font-size:12.5px; color:var(--leise); margin-top:6px; line-height:1.5; }
.ax-main .btn-main{ width:100%; min-height:52px; margin-top:6px;
  border:0; border-radius:12px; cursor:pointer;
  font-family:var(--sans); font-size:15px; font-weight:700; color:#04101F;
  background:linear-gradient(94deg, var(--cy), var(--bl));
  box-shadow:0 12px 30px -14px rgba(44,230,245,.75);
  touch-action:manipulation; }
.ax-main .btn-main[disabled]{ opacity:.65; cursor:wait; }
.ax-main .status{ display:none; margin-top:14px; padding:12px 14px;
  border-radius:12px; font-size:14px; line-height:1.5; }
.ax-main .status.show{ display:block; }
.ax-main .status.ok{ background:rgba(44,230,245,.10);
  border:1px solid rgba(44,230,245,.34); color:#CFF7FB; }
.ax-main .status.err{ background:rgba(255,92,92,.10);
  border:1px solid rgba(255,92,92,.34); color:#FFD2D2; }

.ax-zeilen{ margin:0 0 20px; display:grid; grid-template-columns:88px minmax(0,1fr);
  gap:9px 14px; font-size:14.5px; line-height:1.55; }
.ax-zeilen dt{ color:var(--leise); font-size:13px; font-weight:700; padding-top:1px; }
.ax-zeilen dd{ margin:0; color:var(--dim); }
/* E-Mail und Telefon werden am Handy angetippt, nicht angeklickt - als reine
   Textzeile waren sie 20px hoch. */
.ax-zeilen a{ display:inline-flex; align-items:center; min-height:44px;
  color:var(--cy); text-decoration:none; touch-action:manipulation; }
.ax-zeilen a:hover{ text-decoration:underline; }

.ax-termin{ padding:18px; border-radius:12px; margin-bottom:16px;
  background:rgba(44,230,245,.05); border:1px solid rgba(44,230,245,.18); }
.ax-termin h4{ font-family:var(--serif); font-size:16px; color:#fff; margin:0 0 5px; }
.ax-termin p{ font-size:14px; line-height:1.55; color:var(--dim); margin:0 0 12px; }
.calendly-inline-widget{ min-height:320px; border-radius:12px; overflow:hidden; }

.ax-karte-map{ border-radius:12px; overflow:hidden; border:1px solid var(--kante); }
.ax-map{ display:block; width:100%; height:220px; border:0; }
.ax-maplink{ display:block; padding:12px 15px; font-size:13.5px; font-weight:700;
  color:var(--cy); text-decoration:none; border-top:1px solid var(--kante);
  background:rgba(255,255,255,.02); }
.ax-maplink:hover{ background:rgba(255,255,255,.05); }

/* ---------- Problem gegen Lösung ----------------------------------
   Übernimmt die Argumentationslinie der Startseite ("Warum viele KI-Projekte
   verpuffen" → "Die AiNemix Lösung"), damit Unter- und Startseite dieselbe
   Geschichte erzählen. */
.ax-gegen{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.ax-spalte{ padding:24px; border-radius:var(--r); border:1px solid var(--kante); }
.ax-spalte.problem{ background:rgba(255,255,255,.025); }
.ax-spalte.loesung{ background:linear-gradient(168deg, rgba(44,230,245,.06), rgba(9,20,38,.5) 70%);
  border-color:rgba(44,230,245,.20); }
.ax-spalte h3{ font-size:16px; color:#fff; margin:0 0 14px; display:flex;
  align-items:center; gap:9px; }
.ax-spalte h3::before{ content:""; width:7px; height:7px; border-radius:50%; flex:none; }
.ax-spalte.problem h3::before{ background:#7A8AA0; }
.ax-spalte.loesung h3::before{ background:var(--cy); }
.ax-punkte{ margin:0; padding:0; list-style:none; display:grid; gap:11px; }
.ax-punkte li{ font-size:14.5px; line-height:1.6; color:var(--dim);
  padding-left:20px; position:relative; }
.ax-punkte li::before{ content:"–"; position:absolute; left:0; color:var(--leise); }
.ax-spalte.loesung .ax-punkte li::before{ content:"→"; color:var(--cy); font-size:12px; top:1px; }

/* ---------- Schema (Ablauf als Kette) -----------------------------
   Als Flexbox statt als Grafik: am Handy stapeln sich dieselben Stationen
   untereinander, statt seitlich aus dem Bild zu laufen. */
.ax-schema{ padding:26px 22px; border-radius:var(--r);
  background:var(--karte); border:1px solid var(--kante); }
.ax-kette{ display:flex; align-items:stretch; gap:10px; margin:0; padding:0;
  list-style:none; }
.ax-station{ flex:1 1 0; min-width:0; padding:15px 14px; border-radius:12px;
  background:rgba(255,255,255,.04); border:1px solid var(--kante);
  display:flex; flex-direction:column; justify-content:center; text-align:center; }
.ax-station b{ display:block; font-family:var(--serif) !important; font-size:14.5px;
  color:#fff; line-height:1.25; margin-bottom:5px;
  overflow-wrap:break-word; -webkit-hyphens:auto; hyphens:auto; }
.ax-station span{ font-size:12px; line-height:1.45; color:var(--dim); }
.ax-pfeil{ flex:none; display:flex; align-items:center; color:var(--cy);
  font-size:17px; line-height:1; }
.ax-schema figcaption{ margin-top:14px; font-size:13px; color:var(--leise); line-height:1.55; }

@media (max-width:760px){
  .ax-kette{ flex-direction:column; gap:8px; }
  .ax-station{ text-align:left; }
  .ax-pfeil{ justify-content:center; transform:rotate(90deg); font-size:15px; }
}

/* ---------- Praxisbeispiel ---------------------------------------- */
.ax-fall{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:16px; align-items:start; }
.ax-fall-text{ padding:24px; border-radius:var(--r);
  background:var(--karte); border:1px solid var(--kante); }
.ax-fall-text h3{ font-size:17px; color:#fff; margin:0 0 10px; }
.ax-fall-text p{ font-size:14.5px; line-height:1.65; color:var(--dim); margin:0 0 10px; }
.ax-fall-text p:last-child{ margin-bottom:0; }
.ax-marken{ display:grid; gap:10px; }
.ax-marke{ padding:15px 17px; border-radius:12px;
  background:rgba(44,230,245,.05); border:1px solid rgba(44,230,245,.16); }
.ax-marke b{ display:block; font-family:var(--serif) !important; font-size:15px;
  color:#fff; margin-bottom:3px; }
.ax-marke span{ font-size:13px; line-height:1.5; color:var(--dim); }

/* ---------- Abgrenzung -------------------------------------------- */
.ax-nicht{ padding:24px; border-radius:var(--r);
  background:rgba(255,255,255,.022); border:1px dashed var(--kante); }
.ax-nicht h3{ font-size:16px; color:#fff; margin:0 0 12px; }

/* ---------- Häufige Fragen ---------------------------------------- */
.ax-fragen{ display:grid; gap:1px; background:var(--kante);
  border:1px solid var(--kante); border-radius:var(--r); overflow:hidden; }
.ax-frage{ background:#080F1D; }
.ax-frage summary{ cursor:pointer; list-style:none; padding:18px 22px;
  font-family:var(--serif) !important; font-size:15.5px; color:#fff; line-height:1.4;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  min-height:56px; touch-action:manipulation; }
.ax-frage summary::-webkit-details-marker{ display:none; }
.ax-frage summary::after{ content:"+"; color:var(--cy); font-size:19px; flex:none;
  font-family:var(--mono) !important; transition:transform .2s ease; }
.ax-frage[open] summary::after{ transform:rotate(45deg); }
.ax-frage summary:hover{ background:rgba(255,255,255,.03); }
.ax-frage p{ margin:0; padding:0 22px 20px; font-size:14.5px; line-height:1.68;
  color:var(--dim); max-width:70ch; }

@media (max-width:900px){
  .ax-gegen{ grid-template-columns:minmax(0,1fr); }
  .ax-fall{ grid-template-columns:minmax(0,1fr); }
  .ax-spalte, .ax-fall-text, .ax-nicht{ padding:20px; }
  .ax-schema{ padding:18px 14px; }
  .ax-frage summary{ padding:16px 18px; font-size:15px; }
  .ax-frage p{ padding:0 18px 18px; }
}

/* ---------- Rechtstexte (Impressum, Datenschutz) ------------------
   Diese beiden Seiten behalten ihr Markup Zeichen für Zeichen - an
   Rechtstexten wird nicht umformuliert. Angeglichen wird nur der Rahmen,
   indem die vorhandenen Klassen (.hero, .con, .box, .kicker, .lead, .toc)
   hier zwei Klassen tief überschrieben werden. */
.ax-recht section{ padding:clamp(56px,8vw,96px) 24px; background:
  radial-gradient(120% 60% at 50% -10%, rgba(17,131,227,.14), transparent 66%); }
.ax-recht .con{ max-width:820px; margin:0 auto; padding:0; }
.ax-recht .kicker{ display:inline-block; font-family:var(--mono) !important;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--cy);
  padding:6px 13px; border-radius:999px; margin-bottom:20px;
  background:rgba(44,230,245,.09); border:1px solid rgba(44,230,245,.26); }
/* !important, weil die Altseiten Groesse und Farbe ueber eine ID-Regel setzen
   (#ainx-page-… h1) - die schlaegt jede Klassenregel. Ohne das bliebe die
   Ueberschrift bei 60px und der Text auf der alten Graustufe. */
.ax-recht h1{ font-size:clamp(28px,4vw,42px) !important; line-height:1.12 !important;
  letter-spacing:-.02em; color:#fff; margin:0 0 16px; }
.ax-recht .lead{ font-size:16px !important; line-height:1.62; color:var(--dim) !important;
  margin:0 0 26px; max-width:62ch; }

.ax-recht .toc{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 26px; }
.ax-recht .toc a{ display:inline-flex; align-items:center; min-height:44px;
  padding:0 14px; border-radius:12px; font-size:13.5px; font-weight:600;
  color:var(--dim); text-decoration:none;
  background:var(--karte); border:1px solid var(--kante); }
.ax-recht .toc a:hover{ color:#fff; background:rgba(255,255,255,.07); }

.ax-recht .box{ padding:24px; border-radius:var(--r); margin:0 0 16px;
  background:var(--karte); border:1px solid var(--kante); }
.ax-recht .box h2{ font-size:19px; line-height:1.3; color:#fff; margin:0 0 12px; }
.ax-recht .box h3{ font-size:16px; line-height:1.35; color:#fff; margin:18px 0 8px; }
.ax-recht p{ font-size:15px !important; line-height:1.7; color:var(--dim) !important;
  margin:0 0 12px; }
.ax-recht p:last-child{ margin-bottom:0; }
.ax-recht ul, .ax-recht ol{ margin:0 0 12px; padding-left:20px; }
.ax-recht li{ font-size:15px !important; line-height:1.7; color:var(--dim) !important;
  margin-bottom:6px; }
.ax-recht strong{ color:#E6EEF7; font-weight:700; }
/* Hinweis auf die verbindliche Sprachfassung - bewusst leiser als der Text
   selbst, aber nicht versteckt. */
.ax-hinweis{ margin:20px 0 0; padding:14px 16px; border-radius:12px;
  font-size:13.5px !important; line-height:1.6; color:var(--leise) !important;
  background:rgba(255,255,255,.02); border:1px solid var(--kante); }
.ax-recht a{ color:var(--cy); }
.ax-recht .box a{ word-break:break-word; }

@media (max-width:900px){
  .ax-recht section{ padding:clamp(44px,7vw,64px) 20px; }
  .ax-recht .box{ padding:20px; }
}

/* ---------- Fußbereich --------------------------------------------
   Der Fußbereich ist auf allen Seiten derselbe, seine Rasterregeln lagen
   aber nur im <style> der Startseite. Auf den Unterseiten fiel das Raster
   deshalb auf vier automatische Spalten und lief bei 375px um 25px über -
   ausgerechnet die Spalte mit Impressum und Datenschutz stand draußen.
   Die drei Regeln sind unverändert von der Startseite übernommen. */
.ainx-g-footer > *{ min-width:0; }
@media (max-width:1024px){
  .ainx-g-footer{ grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:28px !important; }
}
@media (max-width:560px){
  .ainx-g-footer{ grid-template-columns:minmax(0,1fr) !important; }
}

/* ---------- Sanftes Erscheinen ------------------------------------ */
.ax-auf{ opacity:0; transform:translateY(14px);
  transition:opacity .5s cubic-bezier(.22,1,.28,1),
             transform .5s cubic-bezier(.22,1,.28,1); }
.ax-auf.da{ opacity:1; transform:none; }

/* ---------- Gestaffeltes Erscheinen innerhalb eines Blocks --------
   Ein ganzer Block, der auf einmal erscheint, wirkt wie ein Schnitt.
   Erscheinen die Teile nacheinander, liest das Auge die Reihenfolge mit -
   dieselbe Idee wie beim Datenströme-Modul der Startseite, nur leiser.

   Wichtig: die Kinder hängen an der `.da`-Klasse ihres Elternblocks. Der
   greift auch die Notbremse des Skripts (nach 2 s wird alles sichtbar),
   also kann hier nichts dauerhaft unsichtbar bleiben. */
.ax-kette > *, .ax-schritte .ax-schritt, .ax-gegen .ax-punkte li,
.ax-marken .ax-marke, .ax-fakten .ax-fakt{
  opacity:0; transform:translateY(9px);
  transition:opacity .42s cubic-bezier(.22,1,.28,1),
             transform .42s cubic-bezier(.22,1,.28,1); }
.ax-schema.da .ax-kette > *, .ax-schritte.da .ax-schritt,
.ax-gegen.da .ax-punkte li, .ax-fall.da .ax-marke, .ax-fakten.da .ax-fakt{
  opacity:1; transform:none; }

/* Verzögerung je Position. Neun Stufen reichen: mehr Teile hat kein Block. */
.ax-schema.da .ax-kette > *:nth-child(1),
.ax-schritte.da .ax-schritt:nth-child(1),
.ax-gegen.da .ax-punkte li:nth-child(1),
.ax-fall.da .ax-marke:nth-child(1),
.ax-fakten.da .ax-fakt:nth-child(1){ transition-delay:.02s; }
.ax-schema.da .ax-kette > *:nth-child(2),
.ax-schritte.da .ax-schritt:nth-child(2),
.ax-gegen.da .ax-punkte li:nth-child(2),
.ax-fall.da .ax-marke:nth-child(2),
.ax-fakten.da .ax-fakt:nth-child(2){ transition-delay:.09s; }
.ax-schema.da .ax-kette > *:nth-child(3),
.ax-schritte.da .ax-schritt:nth-child(3),
.ax-gegen.da .ax-punkte li:nth-child(3),
.ax-fall.da .ax-marke:nth-child(3),
.ax-fakten.da .ax-fakt:nth-child(3){ transition-delay:.16s; }
.ax-schema.da .ax-kette > *:nth-child(4),
.ax-schritte.da .ax-schritt:nth-child(4),
.ax-gegen.da .ax-punkte li:nth-child(4){ transition-delay:.23s; }
.ax-schema.da .ax-kette > *:nth-child(5),
.ax-schritte.da .ax-schritt:nth-child(5){ transition-delay:.30s; }
.ax-schema.da .ax-kette > *:nth-child(6){ transition-delay:.36s; }
.ax-schema.da .ax-kette > *:nth-child(7){ transition-delay:.42s; }
.ax-schema.da .ax-kette > *:nth-child(8){ transition-delay:.48s; }
.ax-schema.da .ax-kette > *:nth-child(9){ transition-delay:.54s; }

/* Der Pfeil zeichnet sich beim Erscheinen kurz nach vorn - so liest sich
   die Kette als Bewegung und nicht als Aufzählung. */
.ax-kette .ax-pfeil{ transform:translateX(-6px); }
.ax-schema.da .ax-kette .ax-pfeil{ transform:none; }
@media (max-width:760px){
  .ax-kette .ax-pfeil{ transform:rotate(90deg) translateX(-6px); }
  .ax-schema.da .ax-kette .ax-pfeil{ transform:rotate(90deg); }
}

/* ---------- Echter Scroll-Effekt, wo der Browser ihn kann ---------
   `animation-timeline: view()` koppelt die Animation an die Scrollposition
   statt an die Zeit: das Bild bewegt sich beim Vorbeiscrollen wirklich mit.
   Ältere Browser überspringen den Block und behalten das ruhige Erscheinen -
   deshalb steht hier nichts, worauf die Lesbarkeit angewiesen wäre. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width:761px) {
    /* Die Vergrößerung ist kein Effekt, sondern Vorrat: ohne sie schöbe die
       Bewegung das Bild aus seinem Rahmen und am Rand entstünde ein Spalt.
       Gemessen: 12 % von 400px sind 24px Überhang je Seite, die Bewegung
       nutzt davon 12px. Bei 8 % blieben am unteren Ende nur 3px übrig -
       zu knapp, sobald ein Bild andere Proportionen hat. */
    @keyframes ax-heben{
      from{ transform:translateY(12px) scale(1.12); }
      to  { transform:translateY(-12px) scale(1.12); }
    }
    /* Nur beschnittene Fotos wandern mit. Screenshots (.voll) bleiben ruhig -
       dort ist der Inhalt der Zweck, und sie haben keinen Überhang. */
    .ax-figur:not(.voll) img{
      animation:ax-heben linear both;
      animation-timeline:view();
      animation-range:entry 0% exit 100%;
      will-change:transform;
    }
    /* Der Abschlussblock wächst beim Hereinscrollen leicht auf. */
    @keyframes ax-naeher{
      from{ transform:scale(.97); opacity:.72; }
      to  { transform:none; opacity:1; }
    }
    .ax-schluss{
      animation:ax-naeher linear both;
      animation-timeline:view();
      animation-range:entry 10% cover 42%;
    }
  }
}

/* ---------- Schmale Schirme --------------------------------------- */
@media (max-width:900px){
  .ax-sec{ padding:clamp(44px,7vw,64px) 20px; }
  .ax-grid, .ax-grid.zwei, .ax-fakten{ grid-template-columns:minmax(0,1fr); }
  .ax-h1{ max-width:18ch; }
  .ax-karte{ padding:20px; }
  .ax-schritt{ grid-template-columns:40px minmax(0,1fr); gap:14px; padding:17px 18px; }
  .ax-btn{ width:100%; justify-content:center; }
  .ax-cta{ gap:10px; }
  .ax-split{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:520px){
  .ax-h1{ max-width:none; }
  .ax-lead{ font-size:15.5px; }
  .ax-fakt b{ font-size:23px; }
}
@media (prefers-reduced-motion: reduce){
  /* Wer reduzierte Bewegung eingestellt hat, bekommt den fertigen Zustand -
     nicht die Animation in schnell. Das gilt auch für die gestaffelten
     Teile, sonst blieben sie unsichtbar. */
  .ax-auf, .ax-kette > *, .ax-schritte .ax-schritt, .ax-gegen .ax-punkte li,
  .ax-marken .ax-marke, .ax-fakten .ax-fakt{
    opacity:1 !important; transform:none !important;
    transition:none !important; animation:none !important; }
  .ax-kette .ax-pfeil{ transform:none !important; }
  .ax-figur img, .ax-schluss{ animation:none !important; }
  .ax-btn{ transition:none; }
}
@media (prefers-reduced-motion: reduce) and (max-width:760px){
  .ax-kette .ax-pfeil{ transform:rotate(90deg) !important; }
}