/* =============================================================
   LP E-Learning erstellen lassen — styles.css
   Design System "Kuratiertes Licht", Markenstand courseticket.com 11/2026.

   REGELN
   - Alles unter .ai-page gescoped. Kein :root, kein bares body/h1.
     (Einzige Ausnahme: @font-face und @keyframes.)
   - Keine :is()/:where()-Listen (der Paket-Validator trennt an Kommas).
   - Jede Eigenschaft, die ein Host-Reset veraendern koennte (Raender,
     Listen, Rahmen, Schriftgroessen), ist hier ausdruecklich gesetzt.
   ============================================================= */

/* ---------- Poppins, lokal gebuendelt (SIL OFL 1.1). Inter liefert das CMS. ---------- */
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;
  src:url("https://ctprdct-statamic-cms.s3.eu-west-1.amazonaws.com/assets/ai-pages/3d64a229-98f8-4e73-8b25-da07270d2063/assets/fonts/poppins-400-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:"Poppins";font-style:normal;font-weight:400;font-display:swap;
  src:url("https://ctprdct-statamic-cms.s3.eu-west-1.amazonaws.com/assets/ai-pages/3d64a229-98f8-4e73-8b25-da07270d2063/assets/fonts/poppins-400-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:"Poppins";font-style:normal;font-weight:500;font-display:swap;
  src:url("https://ctprdct-statamic-cms.s3.eu-west-1.amazonaws.com/assets/ai-pages/3d64a229-98f8-4e73-8b25-da07270d2063/assets/fonts/poppins-500-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:"Poppins";font-style:normal;font-weight:500;font-display:swap;
  src:url("https://ctprdct-statamic-cms.s3.eu-west-1.amazonaws.com/assets/ai-pages/3d64a229-98f8-4e73-8b25-da07270d2063/assets/fonts/poppins-500-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:"Poppins";font-style:normal;font-weight:600;font-display:swap;
  src:url("https://ctprdct-statamic-cms.s3.eu-west-1.amazonaws.com/assets/ai-pages/3d64a229-98f8-4e73-8b25-da07270d2063/assets/fonts/poppins-600-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:"Poppins";font-style:normal;font-weight:600;font-display:swap;
  src:url("https://ctprdct-statamic-cms.s3.eu-west-1.amazonaws.com/assets/ai-pages/3d64a229-98f8-4e73-8b25-da07270d2063/assets/fonts/poppins-600-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;}

/* ---------- Tokens (auf .ai-page, nie :root) ---------- */
.ai-page {
  --navy-deep: #111828;
  --surface-slate: #1F2938;
  --signal-blue: #289CE2;
  --depth-blue: #0069AA;
  --depth-blue-hover: #005A92;
  --ice-cyan: #94EFFF;
  --blue-soft: #52B7FF;
  --paper: #F8FAFB;
  --white: #FFFFFF;
  --gradient-signature: linear-gradient(90deg, #289CE2, #94EFFF);

  --text-body: #111828;
  --text-muted: #4B5567;
  --text-body-dark: #F8FAFB;
  --text-muted-dark: #9CA5B0;
  --border-hairline: #D1D7DE;
  --border-hairline-dark: rgba(148,239,255,0.16);
  --ok: #3DD68C;

  /* Standardwerte von courseticket.com (ct-lead-dark, ct-link, ct-btn), gemessen 05.11.2026 */
  --ct-text-dark: #D1D7DE;
  --ct-link-hover: #00518F;
  --ct-link-dark: #74D2FF;
  --ct-btn-dark-hover: #0082C6;

  --glass-surface: linear-gradient(160deg, rgba(148,239,255,0.07), rgba(31,41,56,0.62) 40%);
  --glass-glow: 0 -1px 0 rgba(148,239,255,0.22) inset, 0 22px 60px -22px rgba(40,156,226,0.38);
  --shadow-card: 0 1px 2px rgba(17,24,40,0.05), 0 8px 24px rgba(17,24,40,0.07);
  --shadow-card-hover: 0 2px 4px rgba(17,24,40,0.06), 0 14px 36px rgba(17,24,40,0.11);

  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 9999px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --font-head: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Hoehe der klebenden Website-Kopfzeile; script.js misst sie nach. */
  --ai-kopf: 0px;

  display: block;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--white);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.62;
  color: var(--text-body);
  text-align: left;
  -webkit-text-size-adjust: 100%;
}

/* ---------- Grundzustand, unabhaengig vom Reset der Website ---------- */
.ai-page *,
.ai-page *::before,
.ai-page *::after { box-sizing: border-box; }

.ai-page h1,
.ai-page h2,
.ai-page h3,
.ai-page h4,
.ai-page p,
.ai-page ul,
.ai-page ol,
.ai-page li,
.ai-page dl,
.ai-page dt,
.ai-page dd,
.ai-page figure,
.ai-page table { margin: 0; padding: 0; }

.ai-page ul,
.ai-page ol { list-style: none; }

.ai-page h1,
.ai-page h2,
.ai-page h3,
.ai-page h4 { font-family: var(--font-head); font-weight: 600; color: inherit; text-wrap: balance; }

.ai-page a { color: inherit; text-decoration: none; }
.ai-page strong,
.ai-page b { font-weight: 600; }
.ai-page em { font-style: normal; }
.ai-page svg { display: block; overflow: visible; }
.ai-page code { font-family: var(--font-mono); font-size: 0.92em; }

.ai-page button {
  margin: 0; padding: 0; border: 0; border-radius: 0; background: none;
  font: inherit; color: inherit; text-align: inherit; line-height: inherit;
  cursor: pointer; -webkit-appearance: none; appearance: none;
}

.ai-page table { border-collapse: collapse; border-spacing: 0; width: 100%; }
.ai-page th,
.ai-page td { padding: 0; border: 0; text-align: left; vertical-align: top; font-weight: 400; }

.ai-page [hidden] { display: none !important; }

/* Nur fuer Screenreader */
.ai-page .ai-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- Fokus ---------- */
.ai-page a:focus-visible,
.ai-page button:focus-visible,
.ai-page summary:focus-visible,
.ai-page [tabindex]:focus-visible { outline: 3px solid var(--depth-blue); outline-offset: 3px; }
.ai-page a,
.ai-page button,
.ai-page summary,
.ai-page [tabindex] { scroll-margin-top: calc(var(--ai-kopf) + 16px); scroll-margin-bottom: 16px; }
.ai-page .ai-sek--navy a:focus-visible,
.ai-page .ai-sek--navy button:focus-visible,
.ai-page .ai-sek--navy [tabindex]:focus-visible { outline-color: var(--blue-soft); }

/* ---------- Sektionen ---------- */
.ai-page .ai-sek { position: relative; padding: 96px 0; }
.ai-page .ai-sek--weiss { background: var(--white); color: var(--text-body); }
.ai-page .ai-sek--paper { background: var(--paper); color: var(--text-body); }
.ai-page .ai-sek--navy { background-color: var(--navy-deep); color: var(--text-body-dark); }
/* Standard: max-w-7xl mit px-6, ab 1024 px px-8; FAQ max-w-4xl */
.ai-page .ai-wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.ai-page .ai-wrap--schmal { max-width: 944px; }

/* ---------- Typografie: Standard von courseticket.com (ct-eyebrow, ct-h1, ct-h2, ct-lead, ct-muted) ---------- */
.ai-page .ai-eyebrow {
  display: inline-flex; align-items: center; vertical-align: top; margin: 0; padding: 4px 12px;
  border-radius: var(--radius-pill); background: rgba(0,105,170,0.05); box-shadow: inset 0 0 0 1px rgba(0,105,170,0.15);
  font-family: var(--font-head); font-size: 13px; font-weight: 600; line-height: 20px; color: var(--depth-blue);
}
.ai-page .ai-sek--navy .ai-eyebrow {
  background: rgba(116,210,255,0.1); box-shadow: inset 0 0 0 1px rgba(116,210,255,0.25); color: var(--ct-link-dark);
}

.ai-page h1 { font-size: 30px; line-height: 1.08; letter-spacing: -0.03em; }
.ai-page h2 { max-width: 672px; margin-top: 8px; font-size: 26px; line-height: 1.15; letter-spacing: -0.025em; }
.ai-page h3 { font-size: 18px; line-height: 28px; letter-spacing: -0.025em; }
.ai-page h4 { font-size: 17px; line-height: 1.35; }
.ai-page .ai-sek--navy h1,
.ai-page .ai-sek--navy h2 { color: #FFFFFF; }

.ai-page .ai-lead,
.ai-page .ai-text { max-width: 672px; font-size: 17px; line-height: 28px; color: var(--text-muted); text-wrap: pretty; }
.ai-page h2 + .ai-lead,
.ai-page h2 + .ai-text { margin-top: 24px; }
.ai-page .ai-text + .ai-text { margin-top: 14px; }
.ai-page .ai-sek--navy .ai-lead,
.ai-page .ai-sek--navy .ai-text { color: var(--ct-text-dark); }
.ai-page .ai-klein { font-size: 14px; line-height: 24px; color: var(--text-muted); }
.ai-page .ai-sek--navy .ai-klein { color: var(--text-muted-dark); }

/* Link im Fliesstext wie auf der Website */
.ai-page .ai-link { color: var(--depth-blue); text-decoration: underline; transition: color .15s ease; }
.ai-page .ai-link:hover { color: var(--ct-link-hover); }
.ai-page .ai-sek--navy .ai-link { color: var(--ct-link-dark); }
.ai-page .ai-sek--navy .ai-link:hover { color: var(--ice-cyan); }
/* Alleinstehender Link (ct-link) */
.ai-page .ai-skills-fuss .ai-link,
.ai-page .ai-herz-hinweis .ai-link {
  display: inline-flex; align-items: center; column-gap: 4px; font-size: 15px; font-weight: 600; line-height: 24px; text-decoration: none;
}

/* ---------- Buttons: Standard von courseticket.com (ct-btn-primary-dark, ct-btn-secondary-dark) ---------- */
.ai-page .ai-btn {
  display: inline-flex; align-items: center; justify-content: center; column-gap: 8px;
  padding: 12px 20px; border-radius: var(--radius-pill);
  font-family: var(--font-head); font-size: 15px; font-weight: 600; line-height: 20px;
  text-decoration: none; cursor: pointer;
  transition: color .2s cubic-bezier(0.4, 0, 0.2, 1), background-color .2s cubic-bezier(0.4, 0, 0.2, 1);
}
.ai-page .ai-btn--primaer { background: var(--depth-blue); color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15), 0 1px 2px rgba(0,0,0,0.05); }
.ai-page .ai-btn--primaer:hover { background: var(--ct-btn-dark-hover); }
.ai-page .ai-btn--geist { background: transparent; color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2); }
.ai-page .ai-btn--geist:hover { background: rgba(255,255,255,0.1); }
.ai-page .ai-sek--navy a.ai-btn:focus-visible,
.ai-page .ai-sek--navy button.ai-btn:focus-visible { outline-width: 2px; outline-offset: 2px; }
.ai-page .ai-sek--navy a.ai-btn--geist:focus-visible,
.ai-page .ai-sek--navy button.ai-btn--geist:focus-visible { outline-color: #FFFFFF; }
.ai-page .ai-btn-pfeil { flex: none; width: 16px; height: 16px; }
.ai-page .ai-btn-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 40px; }

/* ---------- Reveals (erst aktiv, wenn script.js .ai-anim setzt) ---------- */
.ai-page [data-ar] { transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.ai-page.ai-anim [data-ar] { opacity: 0; transform: translateY(22px); }
.ai-page.ai-anim [data-ar].ist-da { opacity: 1; transform: none; }

/* =============================================================
   1 · HERO
   ============================================================= */
/* Standard-Hero. Den Abstand fuer die Kopfzeile setzt das CMS selbst (::before am ersten Kind). */
.ai-page .ai-hero {
  padding: 40px 0 64px;
  background-image: radial-gradient(90% 40% at 50% 20%, rgba(82,183,255,0.22), rgba(0,0,0,0));
}
.ai-page .ai-hero-text { max-width: 672px; margin: 0 auto; }
.ai-page .ai-hero .ai-eyebrow { margin-top: 32px; }
.ai-page .ai-hero h1 { margin-top: 16px; }
.ai-page .ai-hero .ai-lead { max-width: 576px; margin-top: 20px; }
.ai-page .ai-fakten { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.ai-page .ai-fakten li {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px;
  border: 1px solid var(--border-hairline-dark); border-radius: var(--radius-pill);
  background: rgba(31,41,56,0.55);
  font-family: var(--font-head); font-size: 13px; font-weight: 500; line-height: 1.4; color: #E3EAF0;
}
.ai-page .ai-fakten svg { width: 15px; height: 15px; flex: none; color: var(--blue-soft); }
.ai-page .ai-hero-bild {
  max-width: 672px; margin: 64px auto 0;
  border: 1px solid var(--border-hairline-dark); border-radius: var(--radius-lg);
  background: var(--glass-surface); box-shadow: var(--glass-glow); padding: 14px;
}
.ai-page .ai-wege-nav { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin-top: 24px; }
.ai-page .ai-wege-nav-titel { font-size: 13px; color: var(--text-muted-dark); margin-right: 4px; }
.ai-page .ai-wege-nav a,
.ai-page .ai-wege-nav span.ai-weg-hier {
  display: inline-flex; align-items: center; min-height: 34px; padding: 5px 13px; border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,0.42); font-size: 13px; font-weight: 500; line-height: 1.4; color: #D5DEE6;
}
.ai-page .ai-wege-nav a:hover { border-color: var(--blue-soft); color: #FFFFFF; }
.ai-page .ai-wege-nav span.ai-weg-hier { border-color: var(--blue-soft); background: rgba(40,156,226,0.16); color: #FFFFFF; }

/* =============================================================
   2 · AUSGANGSLAGE + DREI WEGE
   ============================================================= */
.ai-page .ai-zahlen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 40px; }
.ai-page .ai-zahl { padding: 20px 22px; border: 1px solid var(--border-hairline); border-radius: var(--radius-md); background: var(--paper); }
.ai-page .ai-zahl-wert { display: block; font-family: var(--font-head); font-size: 24px; font-weight: 600; line-height: 1.25; color: var(--text-body); }
.ai-page .ai-zahl-was { display: block; margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--text-muted); }

.ai-page .ai-block { margin-top: 64px; }
.ai-page .ai-block h3 { margin-bottom: 18px; }
.ai-page .ai-tabelle-wrap { overflow-x: auto; border: 1px solid var(--border-hairline); border-radius: var(--radius-md); background: #FFFFFF; box-shadow: var(--shadow-card); }
.ai-page .ai-tabelle { min-width: 760px; font-size: 15px; line-height: 1.55; }
.ai-page .ai-tabelle caption { caption-side: top; padding: 0; text-align: left; }
.ai-page .ai-tabelle thead th {
  padding: 14px 18px; background: var(--navy-deep); color: #FFFFFF;
  font-family: var(--font-head); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.ai-page .ai-tabelle tbody th,
.ai-page .ai-tabelle tbody td { padding: 18px; border-top: 1px solid var(--border-hairline); color: var(--text-muted); }
.ai-page .ai-tabelle tbody th { width: 24%; color: var(--text-body); font-family: var(--font-head); font-weight: 600; }
.ai-page .ai-tabelle tbody th span { display: block; margin-top: 3px; font-family: "Inter", ui-sans-serif, system-ui, sans-serif; font-size: 13px; font-weight: 400; color: var(--text-muted); }
.ai-page .ai-tabelle tr.ist-hier th,
.ai-page .ai-tabelle tr.ist-hier td { background: #EEF7FD; color: var(--text-body); }
.ai-page .ai-tabelle tr.ist-hier th { box-shadow: inset 4px 0 0 var(--depth-blue); }

.ai-page .ai-def {
  margin-top: 40px; padding: 26px 28px; border-radius: var(--radius-md);
  border: 1px solid var(--border-hairline); border-left: 4px solid var(--depth-blue); background: var(--paper);
}
.ai-page .ai-def h3 { margin-bottom: 8px; }
.ai-page .ai-def p { font-size: 16px; line-height: 28px; color: var(--text-muted); max-width: 78ch; }

/* =============================================================
   3 · HERZSTUECK — Produktion in sechs Szenen
   ============================================================= */
.ai-page .ai-herz {
  background-image:
    radial-gradient(900px 520px at 88% -8%, rgba(40,156,226,0.20), rgba(40,156,226,0) 62%),
    radial-gradient(700px 480px at -6% 104%, rgba(148,239,255,0.08), rgba(148,239,255,0) 60%);
  /* Beispielmarke: Standard "Website" */
  --m-prim: #0E7C6B; --m-akz: #F2B84B; --m-fl: #F1FAF7; --m-tx: #12332D; --m-auf: #FFFFFF; --m-rad: 7px;
}
.ai-page .ai-herz[data-look="booklet"] { --m-prim: #B4532A; --m-akz: #2B3A4A; --m-fl: #FBF5EF; --m-tx: #2A1E17; --m-auf: #FFFFFF; --m-rad: 2px; }
.ai-page .ai-herz[data-look="lms"]     { --m-prim: #5B3FD6; --m-akz: #FF7A59; --m-fl: #F5F2FF; --m-tx: #1F1747; --m-auf: #FFFFFF; --m-rad: 12px; }
.ai-page .ai-herz[data-look="kit"]     { --m-prim: #1D4ED8; --m-akz: #0EA5A4; --m-fl: #F1F5FD; --m-tx: #0F1B3D; --m-auf: #FFFFFF; --m-rad: 16px; }

.ai-page .ai-herz-kopf { max-width: 672px; }
.ai-page .ai-herz-hinweis { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin-top: 22px; }
.ai-page .ai-herz-raster { display: block; margin-top: 40px; }
.ai-page .ai-buehne { display: none; }

/* Szene: gestapelt (mobil, ohne JS, reduzierte Bewegung) */
.ai-page .ai-szene {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px;
  padding: 48px 0; border-top: 1px solid var(--border-hairline-dark);
  scroll-margin-top: calc(var(--ai-kopf) + 16px);
}
.ai-page .ai-klappe {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px;
  font-family: var(--font-head); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue-soft);
}
.ai-page .ai-klappe-nr {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 8px; border: 1px solid rgba(82,183,255,0.5); background: rgba(40,156,226,0.14);
  font-size: 13px; letter-spacing: 0; color: #FFFFFF;
}
.ai-page .ai-szene h3 { margin-bottom: 14px; color: #FFFFFF; }
/* Herzstueck ist ein individuelles Element: Es behaelt seine eigene Typografie. */
.ai-page .ai-szene h3,
.ai-page .ai-fazit h3 { font-size: clamp(20px, 2.2vw, 26px); line-height: 1.28; letter-spacing: -0.005em; }
.ai-page .ai-sek--navy .ai-szene-text .ai-text { max-width: 68ch; font-size: 16.5px; line-height: 1.62; color: #C9D3DC; text-wrap: wrap; }
.ai-page .ai-szene-text .ai-text + .ai-text { margin-top: 14px; }
.ai-page .ai-sek--navy .ai-szene-text .ai-link,
.ai-page .ai-tabelle .ai-link { font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ai-page .ai-sek--navy .ai-szene-text .ai-link { color: var(--blue-soft); }
.ai-page .ai-sek--navy .ai-szene-text .ai-link:hover { color: var(--ice-cyan); text-decoration-thickness: 2px; }
.ai-page .ai-tabelle .ai-link:hover { color: var(--depth-blue-hover); text-decoration-thickness: 2px; }
.ai-page .ai-sek--navy .ai-wahl .ai-klein { line-height: 1.55; }
.ai-page .ai-szene-bild {
  position: relative; align-self: start; justify-self: center; width: 100%; max-width: 560px;
  border: 1px solid var(--border-hairline-dark); border-radius: var(--radius-lg);
  background: var(--glass-surface); box-shadow: var(--glass-glow); padding: 10px;
}
.ai-page .ai-art { width: 100%; height: auto; }
.ai-page .ai-art-marke {
  position: absolute; right: 16px; bottom: 12px; margin: 0;
  font-size: 11px; line-height: 1.3; color: var(--text-muted-dark);
}

/* Entscheidung (Regiepult) */
.ai-page .ai-wahl {
  margin-top: 24px; padding: 20px; border-radius: var(--radius-md);
  border: 1px solid rgba(82,183,255,0.32); background: rgba(31,41,56,0.6);
}
.ai-page .ai-wahl-frage {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
  font-family: var(--font-head); font-size: 15px; font-weight: 600; line-height: 1.4; color: #FFFFFF;
}
.ai-page .ai-wahl-nr {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px;
  border-radius: 50%; background: var(--signal-blue); font-size: 13px; color: var(--navy-deep);
}
.ai-page .ai-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ai-page .ai-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 15px;
  border: 1px solid rgba(255,255,255,0.46); border-radius: var(--radius-pill); background: rgba(17,24,40,0.5);
  font-family: var(--font-head); font-size: 14px; font-weight: 500; line-height: 1.35; color: #E7EDF3;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .15s var(--ease-out);
}
.ai-page .ai-chip:hover { border-color: var(--blue-soft); color: #FFFFFF; }
.ai-page .ai-chip:active { transform: scale(0.97); }
.ai-page .ai-chip-marke {
  position: relative; flex: none; width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.5);
}
.ai-page .ai-chips--mehr .ai-chip-marke { border-radius: 4px; }
.ai-page .ai-chip[aria-pressed="true"] { border-color: var(--blue-soft); background: rgba(40,156,226,0.24); color: #FFFFFF; }
.ai-page .ai-chip[aria-pressed="true"] .ai-chip-marke { border-color: var(--ice-cyan); background: var(--ice-cyan); }
.ai-page .ai-chip[aria-pressed="true"] .ai-chip-marke::after {
  content: ""; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px;
  border: solid var(--navy-deep); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.ai-page .ai-chip[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

/* Beschreibungen der Optionen: ohne JS alle sichtbar, mit JS nur die gewaehlte */
.ai-page .ai-opt { display: grid; gap: 10px; }
.ai-page .ai-opt-punkt { padding-left: 14px; border-left: 2px solid rgba(82,183,255,0.4); }
.ai-page .ai-opt dt { font-family: var(--font-head); font-size: 14px; font-weight: 600; color: #FFFFFF; }
.ai-page .ai-opt dd { font-size: 15px; line-height: 1.55; color: #C9D3DC; }
.ai-page.ai-js .ai-herz:not([data-material="pdf"])   .ai-opt-punkt[data-fuer="pdf"],
.ai-page.ai-js .ai-herz:not([data-material="ppt"])   .ai-opt-punkt[data-fuer="ppt"],
.ai-page.ai-js .ai-herz:not([data-material="video"]) .ai-opt-punkt[data-fuer="video"],
.ai-page.ai-js .ai-herz:not([data-material="quiz"])  .ai-opt-punkt[data-fuer="quiz"],
.ai-page.ai-js .ai-herz:not([data-look="website"])   .ai-opt-punkt[data-fuer="website"],
.ai-page.ai-js .ai-herz:not([data-look="booklet"])   .ai-opt-punkt[data-fuer="booklet"],
.ai-page.ai-js .ai-herz:not([data-look="lms"])       .ai-opt-punkt[data-fuer="lms"],
.ai-page.ai-js .ai-herz:not([data-look="kit"])       .ai-opt-punkt[data-fuer="kit"] { display: none; }
.ai-page.ai-js .ai-opt dt { display: none; }

/* Regieanweisungen: Liste mit Zustand */
.ai-page .ai-regie-liste { display: grid; gap: 9px; margin-top: 4px; }
.ai-page .ai-regie-liste li { position: relative; padding-left: 28px; font-size: 15px; line-height: 1.55; color: #C9D3DC; }
.ai-page .ai-regie-liste strong { color: #FFFFFF; }
.ai-page .ai-regie-liste li::before {
  content: ""; position: absolute; left: 0; top: 5px; width: 15px; height: 15px; border-radius: 4px;
  border: 1.5px solid rgba(255,255,255,0.4);
}
.ai-page.ai-js .ai-herz[data-regie~="quiz"]       .ai-regie-liste li[data-punkt="quiz"]::before,
.ai-page.ai-js .ai-herz[data-regie~="schwelle"]   .ai-regie-liste li[data-punkt="schwelle"]::before,
.ai-page.ai-js .ai-herz[data-regie~="navi"]       .ai-regie-liste li[data-punkt="navi"]::before,
.ai-page.ai-js .ai-herz[data-regie~="fortschritt"] .ai-regie-liste li[data-punkt="fortschritt"]::before,
.ai-page.ai-js .ai-herz[data-regie~="a11y"]       .ai-regie-liste li[data-punkt="a11y"]::before,
.ai-page.ai-js .ai-herz[data-regie~="sprache"]    .ai-regie-liste li[data-punkt="sprache"]::before,
.ai-page.ai-js .ai-herz[data-regie~="szenario"]   .ai-regie-liste li[data-punkt="szenario"]::before,
.ai-page.ai-js .ai-herz[data-regie~="kino"]       .ai-regie-liste li[data-punkt="kino"]::before,
.ai-page.ai-js .ai-herz[data-regie~="untertitel"] .ai-regie-liste li[data-punkt="untertitel"]::before,
.ai-page.ai-js .ai-herz[data-regie~="kibilder"]   .ai-regie-liste li[data-punkt="kibilder"]::before {
  border-color: var(--ice-cyan);
  background: var(--ice-cyan) linear-gradient(var(--ice-cyan), var(--ice-cyan));
  box-shadow: inset 0 0 0 3px var(--navy-deep);
}
/* Untertitel-Navigation gibt es nur mit Video */
.ai-page.ai-js .ai-herz:not([data-material="video"]) .ai-nur-video { display: none; }

/* Schritte des Agenten */
.ai-page .ai-schritte { display: grid; gap: 8px; margin-top: 18px; counter-reset: schritt; }
.ai-page .ai-schritte li {
  position: relative; padding: 2px 0 2px 38px; font-size: 15px; line-height: 1.55; color: #C9D3DC; counter-increment: schritt;
}
.ai-page .ai-schritte li::before {
  content: counter(schritt); position: absolute; left: 0; top: 1px; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(82,183,255,0.45); font-family: var(--font-head); font-size: 12px; font-weight: 600; color: var(--blue-soft);
}
.ai-page .ai-schritte strong { color: #FFFFFF; }
/* Gleichlauf mit dem Protokoll in der Grafik (setzt script.js) */
.ai-page .ai-schritte li { transition: opacity .3s ease; }
.ai-page .ai-schritte li::before { transition: background-color .25s ease, border-color .25s ease, color .25s ease; }
.ai-page .ai-schritte li.ist-fertig::before { border-color: var(--ok); background: var(--ok); color: var(--navy-deep); }
.ai-page .ai-schritte li.ist-dran::before { border-color: var(--ice-cyan); background: var(--signal-blue); color: var(--navy-deep); }
.ai-page .ai-wenn { font-size: 13px; color: var(--text-muted-dark); }
.ai-page.ai-js .ai-wenn { display: none; }
.ai-page.ai-js .ai-herz:not([data-regie~="sprache"])    .ai-schritte li[data-wenn="sprache"],
.ai-page.ai-js .ai-herz:not([data-regie~="a11y"])       .ai-schritte li[data-wenn="a11y"],
.ai-page.ai-js .ai-herz:not([data-regie~="szenario"])   .ai-schritte li[data-wenn="szenario"],
.ai-page.ai-js .ai-herz:not([data-material="video"])    .ai-schritte li[data-wenn="video"],
.ai-page.ai-js .ai-herz:not([data-regie~="kibilder"])   .ai-nur-ki,
.ai-page.ai-js .ai-herz[data-regie~="kibilder"]         .ai-ohne-ki { display: none; }

/* Zusammenfassung "Ihr Regiebuch" */
.ai-page .ai-fazit {
  margin-top: 40px; padding: 30px; border-radius: var(--radius-lg);
  border: 1px solid rgba(82,183,255,0.4); background: var(--glass-surface); box-shadow: var(--glass-glow);
  scroll-margin-top: calc(var(--ai-kopf) + 24px);
}
.ai-page .ai-fazit h3 { color: #FFFFFF; margin-bottom: 10px; }
.ai-page .ai-fazit-satz { font-size: 18px; line-height: 1.6; color: #E7EDF3; max-width: 72ch; }
.ai-page .ai-fazit-code {
  margin-top: 16px; padding: 14px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border-hairline-dark);
  background: rgba(17,24,40,0.7); font-family: var(--font-mono); font-size: 13.5px; line-height: 1.7; color: var(--ice-cyan);
  overflow-wrap: anywhere;
}
.ai-page .ai-fazit .ai-btn-zeile { align-items: stretch; margin-top: 22px; }
.ai-page .ai-fazit .ai-btn { min-height: 46px; padding: 12px 22px; line-height: 1.4; transition: transform .15s var(--ease-out), background-color .2s ease, box-shadow .2s ease; }
.ai-page .ai-fazit .ai-btn:active { transform: scale(0.97); }
.ai-page .ai-fazit .ai-btn--primaer:hover { background: var(--depth-blue-hover); }
.ai-page .ai-fazit .ai-btn--geist { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.48); }
.ai-page .ai-fazit .ai-btn--geist:hover { background: rgba(255,255,255,0.08); }
.ai-page .ai-sek--navy .ai-fazit a.ai-btn:focus-visible,
.ai-page .ai-sek--navy .ai-fazit button.ai-btn:focus-visible { outline: 3px solid var(--blue-soft); outline-offset: 3px; }
.ai-page .ai-kopiert { margin-top: 10px; min-height: 22px; font-size: 14px; color: var(--ok); }

/* ---------- Buehnenmodus (ab 1024 px, wenn script.js ihn einschaltet) ---------- */
.ai-page .ai-herz.ist-buehne .ai-herz-raster {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: start; margin-top: 8px;
}
.ai-page .ai-herz.ist-buehne .ai-buehne {
  display: block; position: sticky; top: calc(var(--ai-kopf) + 22px);
  width: 100%; max-width: min(660px, calc((100vh - var(--ai-kopf) - 150px) * 1.2)); margin-left: auto;
}
.ai-page .ai-herz.ist-buehne .ai-szene {
  display: block; min-height: 92vh; padding: 16vh 0 8vh; border-top: 0;
}
.ai-page .ai-herz.ist-buehne .ai-szene[data-szene="premiere"] { min-height: 110vh; }
.ai-page .ai-herz.ist-buehne .ai-szene-text {
  opacity: 0.62; transition: opacity .45s var(--ease-out);
}
.ai-page .ai-herz.ist-buehne .ai-szene.ist-aktiv .ai-szene-text { opacity: 1; }
/* Buehne: Schrittliste und Protokoll laufen an der Leselinie gemeinsam. Mehr Abstand gibt jedem
   Schritt Scrollweg, die Markierung zeigt, welcher Schritt rechts gerade laeuft. */
.ai-page .ai-herz.ist-buehne .ai-schritte { gap: 20px; margin-top: 24px; }
.ai-page .ai-herz.ist-buehne .ai-schritte li {
  padding: 8px 10px 8px 46px; border: 1px solid transparent; border-radius: 10px;
  transition: background-color .25s ease, border-color .25s ease;
}
.ai-page .ai-herz.ist-buehne .ai-schritte li::before { left: 10px; top: 9px; }
.ai-page .ai-herz.ist-buehne .ai-schritte li.ist-dran { background: rgba(40,156,226,0.16); border-color: rgba(148,239,255,0.4); }

.ai-page .ai-buehne-rahmen {
  border: 1px solid var(--border-hairline-dark); border-radius: var(--radius-lg);
  background: var(--glass-surface); box-shadow: var(--glass-glow); overflow: hidden;
}
.ai-page .ai-buehne-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 16px; border-bottom: 1px solid var(--border-hairline-dark); background: rgba(17,24,40,0.55);
}
.ai-page .ai-buehne-titel {
  font-family: var(--font-head); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #E7EDF3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ai-page .ai-buehne-titel b { color: var(--blue-soft); font-weight: 600; }
.ai-page .ai-film { display: flex; gap: 5px; flex: none; }
.ai-page .ai-film button {
  position: relative; width: 30px; height: 26px; border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.48); background: rgba(255,255,255,0.05);
  font-family: var(--font-head); font-size: 12px; font-weight: 600; line-height: 1; color: #C9D3DC; text-align: center;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.ai-page .ai-film button::before,
.ai-page .ai-film button::after {
  content: ""; position: absolute; left: 4px; right: 4px; height: 2px;
  background-image: linear-gradient(90deg, rgba(255,255,255,0.45) 50%, rgba(255,255,255,0) 50%); background-size: 6px 2px;
}
.ai-page .ai-film button::before { top: 2px; }
.ai-page .ai-film button::after { bottom: 2px; }
.ai-page .ai-film button:hover { border-color: var(--blue-soft); color: #FFFFFF; }
.ai-page .ai-film button.ist-durch { border-color: rgba(82,183,255,0.6); color: #FFFFFF; }
.ai-page .ai-film button.ist-aktiv { border-color: var(--ice-cyan); background: var(--signal-blue); color: var(--navy-deep); }
.ai-page .ai-buehne-flaeche { position: relative; aspect-ratio: 6 / 5; }
.ai-page .ai-herz.ist-buehne .ai-buehne-flaeche .ai-szene-bild {
  position: absolute; left: 0; top: 0; width: 100%; max-width: none; height: 100%;
  margin: 0; padding: 6px 8px; border: 0; border-radius: 0; background: none; box-shadow: none;
  opacity: 0; visibility: hidden; transition: opacity .4s var(--ease-out), visibility 0s linear .4s;
}
.ai-page .ai-herz.ist-buehne .ai-buehne-flaeche .ai-szene-bild.ist-aktiv {
  opacity: 1; visibility: visible; transition: opacity .4s var(--ease-out), visibility 0s linear 0s;
}
.ai-page .ai-buehne-fuss {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 16px; border-top: 1px solid var(--border-hairline-dark); background: rgba(17,24,40,0.55);
  font-size: 12px; line-height: 1.4; color: var(--text-muted-dark);
}
.ai-page .ai-buehne-balken { flex: 1 1 auto; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.12); overflow: hidden; }
.ai-page .ai-buehne-balken span { display: block; width: 100%; height: 100%; background: var(--gradient-signature); transform: scaleX(0); transform-origin: 0 50%; }

/* ---------- Grafik-Bausteine (SVG) ---------- */
.ai-page .ai-art text { font-family: var(--font-head); }
.ai-page .ai-art .a-mono { font-family: var(--font-mono); }
.ai-page .ai-art .a-glas { fill: rgba(255,255,255,0.045); stroke: rgba(148,239,255,0.22); stroke-width: 1; }
.ai-page .ai-art .a-glas-2 { fill: rgba(17,24,40,0.72); stroke: rgba(148,239,255,0.2); stroke-width: 1; }
.ai-page .ai-art .a-papier { fill: #F8FAFB; }
.ai-page .ai-art .a-papier-2 { fill: #E4EAF0; }
.ai-page .ai-art .a-zeile { fill: #C3CCD6; }
.ai-page .ai-art .a-zeile-d { fill: #8E99A6; }
.ai-page .ai-art .a-hell { fill: #F1F5F8; }
.ai-page .ai-art .a-txt { fill: #EEF3F7; }
.ai-page .ai-art .a-txt-m { fill: #A9B4C0; }
.ai-page .ai-art .a-txt-d { fill: #111828; }
.ai-page .ai-art .a-txt-dm { fill: #4B5567; }
.ai-page .ai-art .a-blau { fill: var(--signal-blue); }
.ai-page .ai-art .a-blau-s { fill: none; stroke: var(--signal-blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ai-page .ai-art .a-soft { fill: var(--blue-soft); }
.ai-page .ai-art .a-cyan { fill: var(--ice-cyan); }
.ai-page .ai-art .a-cyan-s { fill: none; stroke: var(--ice-cyan); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ai-page .ai-art .a-ok { fill: var(--ok); }
.ai-page .ai-art .a-ok-s { fill: none; stroke: var(--ok); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ai-page .ai-art .a-strich { fill: none; stroke: rgba(148,239,255,0.35); stroke-width: 1.5; stroke-linecap: round; }
.ai-page .ai-art .a-strich-d { fill: none; stroke: rgba(148,239,255,0.35); stroke-width: 1.5; stroke-dasharray: 4 5; stroke-linecap: round; }
.ai-page .ai-art .a-navy { fill: var(--navy-deep); }
.ai-page .ai-art .a-slate { fill: var(--surface-slate); }
.ai-page .ai-art .a-kein { fill: none; }
/* Beispielmarke */
.ai-page .ai-art .m-prim { fill: var(--m-prim); }
.ai-page .ai-art .m-akz { fill: var(--m-akz); }
.ai-page .ai-art .m-fl { fill: var(--m-fl); }
.ai-page .ai-art .m-tx { fill: var(--m-tx); }
.ai-page .ai-art .m-auf { fill: var(--m-auf); }
.ai-page .ai-art .m-prim-s { fill: none; stroke: var(--m-prim); stroke-width: 2; }
.ai-page .ai-art .m-kn { rx: var(--m-rad); }
/* Skill-Karte im Agenten-Bild */
.ai-page .ai-art .a-skill rect { fill: rgba(255,255,255,0.04); stroke: rgba(148,239,255,0.2); stroke-width: 1; transition: fill .3s ease, stroke .3s ease; }
.ai-page .ai-art .a-skill text { fill: #A9B4C0; transition: fill .3s ease; }
.ai-page .ai-art .a-skill.ist-an rect { fill: rgba(40,156,226,0.26); stroke: var(--ice-cyan); }
.ai-page .ai-art .a-skill.ist-an text { fill: #FFFFFF; }
.ai-page .ai-art .a-skill.ist-aus { opacity: 0.38; }

/* Varianten nach Auswahl. Der Standard steht als Attribut im HTML,
   deshalb greifen diese Regeln auch ohne JavaScript. */
.ai-page .ai-herz:not([data-material="pdf"])   .v-pdf,
.ai-page .ai-herz:not([data-material="ppt"])   .v-ppt,
.ai-page .ai-herz:not([data-material="video"]) .v-video,
.ai-page .ai-herz:not([data-material="quiz"])  .v-quiz,
.ai-page .ai-herz:not([data-look="website"])   .v-website,
.ai-page .ai-herz:not([data-look="booklet"])   .v-booklet,
.ai-page .ai-herz:not([data-look="lms"])       .v-lms,
.ai-page .ai-herz:not([data-look="kit"])       .v-kit,
.ai-page .ai-herz:not([data-regie~="quiz"])        .r-quiz,
.ai-page .ai-herz:not([data-regie~="schwelle"])    .r-schwelle,
.ai-page .ai-herz:not([data-regie~="navi"])        .r-navi,
.ai-page .ai-herz:not([data-regie~="fortschritt"]) .r-fortschritt,
.ai-page .ai-herz:not([data-regie~="a11y"])        .r-a11y,
.ai-page .ai-herz:not([data-regie~="sprache"])     .r-sprache,
.ai-page .ai-herz:not([data-regie~="szenario"])    .r-szenario,
.ai-page .ai-herz:not([data-regie~="kino"])        .r-kino,
.ai-page .ai-herz:not([data-regie~="untertitel"])  .r-untertitel,
.ai-page .ai-herz:not([data-regie~="kibilder"])    .r-kibilder,
.ai-page .ai-herz[data-regie~="kibilder"]          .n-kibilder,
.ai-page .ai-herz[data-regie~="navi"]              .n-navi,
.ai-page .ai-herz[data-regie~="kino"]              .n-kino,
.ai-page .ai-herz[data-regie~="szenario"]          .n-szenario,
.ai-page .ai-herz[data-regie~="quiz"]              .n-quiz { display: none; }
/* Untertitel-Zeile im Regiebuch nur mit Video */
.ai-page .ai-herz:not([data-material="video"]) .r-untertitel { display: none; }

/* =============================================================
   4 · WAS SIE BEKOMMEN
   ============================================================= */
.ai-page .ai-karten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 40px; }
.ai-page .ai-karte {
  padding: 28px; border: 1px solid var(--border-hairline); border-radius: var(--radius-md); background: #FFFFFF;
  box-shadow: var(--shadow-card); transition: transform .25s var(--ease-out), box-shadow .25s ease, border-color .25s ease;
}
.ai-page .ai-karte:hover { transform: translateY(-4px); border-color: rgba(0,105,170,0.35); box-shadow: var(--shadow-card-hover); }
.ai-page .ai-karte-icon {
  display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-bottom: 18px;
  border-radius: 13px; border: 1px solid rgba(40,156,226,0.35); background: rgba(40,156,226,0.1); color: var(--depth-blue);
}
.ai-page .ai-karte-icon svg { width: 24px; height: 24px; }
.ai-page .ai-karte h3 { margin-bottom: 8px; }
.ai-page .ai-karte p { font-size: 14px; line-height: 24px; color: var(--text-muted); }

/* =============================================================
   5 · SKILLS
   ============================================================= */
.ai-page .ai-skills { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 40px; }
.ai-page .ai-skill {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start;
  padding: 22px; border: 1px solid var(--border-hairline); border-radius: var(--radius-md); background: #FFFFFF;
}
.ai-page .ai-skill-icon {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px;
  background: var(--navy-deep); color: var(--ice-cyan);
}
.ai-page .ai-skill-icon svg { width: 22px; height: 22px; }
.ai-page .ai-skill h3 { font-family: var(--font-mono); font-size: 15.5px; font-weight: 600; line-height: 1.4; letter-spacing: 0; color: var(--text-body); overflow-wrap: anywhere; }
.ai-page .ai-skill p { margin-top: 4px; font-size: 14px; line-height: 24px; color: var(--text-muted); }
.ai-page .ai-skills-fuss { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 28px; }

/* =============================================================
   6 · ERFAHRUNG & QUALITAET
   ============================================================= */
.ai-page .ai-trust { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 40px; }
.ai-page .ai-trust-punkt {
  padding: 26px; border: 1px solid var(--border-hairline-dark); border-radius: var(--radius-md);
  background: var(--glass-surface);
}
.ai-page .ai-trust-gross { display: block; margin-bottom: 8px; font-family: var(--font-head); font-size: 26px; font-weight: 600; line-height: 1.2; color: #FFFFFF; }
.ai-page .ai-trust-punkt h3 { margin-bottom: 8px; color: #FFFFFF; }
.ai-page .ai-trust-punkt p { font-size: 14px; line-height: 24px; color: var(--text-muted-dark); }
.ai-page .ai-pruef { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ai-page .ai-pruef li {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-hairline-dark); font-size: 13.5px; line-height: 1.4; color: #E3EAF0;
}
.ai-page .ai-pruef svg { width: 14px; height: 14px; flex: none; color: var(--ok); }

/* =============================================================
   7 · FAQ
   ============================================================= */
/* Standard-FAQ der Website, technisch weiter details/summary (funktioniert ohne JS) */
.ai-page .ai-faq { margin-top: 64px; }
.ai-page .ai-faq details { padding: 24px 0; }
.ai-page .ai-faq details:first-child { padding-top: 0; }
.ai-page .ai-faq details:last-child { padding-bottom: 0; }
.ai-page .ai-faq details + details { border-top: 1px solid rgba(17,24,40,0.1); }
.ai-page .ai-faq summary { display: flex; align-items: flex-start; justify-content: space-between; list-style: none; cursor: pointer; color: var(--text-body); }
.ai-page .ai-faq summary::-webkit-details-marker { display: none; }
.ai-page .ai-faq summary h3 {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif; font-size: 18px; font-weight: 600; line-height: 28px; letter-spacing: normal; color: var(--text-body); text-wrap: wrap;
}
.ai-page .ai-faq-pfeil { flex: none; width: 24px; height: 24px; margin: 2px 0 0 24px; transition: transform .3s ease; }
.ai-page .ai-faq details[open] .ai-faq-pfeil { transform: rotate(180deg); }
.ai-page .ai-faq-antwort { margin-top: 16px; padding-right: 48px; font-size: 16px; line-height: 28px; color: var(--text-muted); }

/* =============================================================
   8 · ABSCHLUSS
   ============================================================= */
.ai-page .ai-schluss { text-align: center; }
.ai-page .ai-schluss h2 { margin-left: auto; margin-right: auto; }
.ai-page .ai-schluss .ai-lead { margin-left: auto; margin-right: auto; }
.ai-page .ai-schluss .ai-btn-zeile { justify-content: center; }

/* ---------- Abstaende (statt Inline-Styles) ---------- */
.ai-page .ai-oben-s { margin-top: 14px; }
.ai-page .ai-oben-m { margin-top: 18px; }

/* ---------- Grafik: Zusatz ---------- */
.ai-page .ai-art .a-token { fill: rgba(82,183,255,0.2); stroke: var(--blue-soft); stroke-width: 1; }
.ai-page .ai-art .m-rand { stroke: var(--m-prim); }
/* Nur waehrend der Bewegung sichtbar (script.js blendet sie ein und wieder aus) */
.ai-page .ai-art .s1-scan,
.ai-page .ai-art .s2-punkt { opacity: 0; }

/* Szene 4: Zustand einer Protokollzeile. Ohne Klasse = erledigt (Endzustand). */
.ai-page .ai-art .s4-zeile { transition: opacity .3s ease; }
.ai-page .ai-art .s4-punkt { fill: var(--ok); stroke: var(--ok); stroke-width: 1.5; transition: fill .25s ease, stroke .25s ease; }
.ai-page .ai-art .s4-haken { fill: none; stroke: #111828; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: opacity .2s ease; }
.ai-page .ai-art .s4-zeile.ist-offen { opacity: 0.3; }
.ai-page .ai-art .s4-zeile.ist-offen .s4-punkt { fill: transparent; stroke: #7C8896; }
.ai-page .ai-art .s4-zeile.ist-dran .s4-punkt { fill: rgba(148,239,255,0.25); stroke: var(--ice-cyan); }
.ai-page .ai-art .s4-zeile.ist-offen .s4-haken,
.ai-page .ai-art .s4-zeile.ist-dran .s4-haken { opacity: 0; }

/* Szene 6: ohne Navigation rueckt der Inhalt in die Mitte */
.ai-page .ai-herz:not([data-regie~="navi"]) .ai-art .s6-inhalt { transform: translate(-38px, 0); }
/* Transkript statt Fliesstext nur bei Video mit Untertitel-Navigation */
.ai-page .ai-herz[data-material="video"][data-regie~="untertitel"] .ai-art .n-untertitel-fallback { display: none; }
/* Cineastische Buehne: dunkles Modul */
.ai-page .ai-herz[data-regie~="kino"] .ai-art .s6-bg { fill: #0E1422; }
.ai-page .ai-herz[data-regie~="kino"] .ai-art .s6-zeile,
.ai-page .ai-herz[data-regie~="kino"] .ai-art .s6-wort { fill: #FFFFFF; }
.ai-page .ai-herz[data-regie~="kino"] .ai-art .s6-rahmen { stroke: #6B7888; }
.ai-page .ai-herz[data-regie~="kino"] .ai-art .s6-wahl { fill: rgba(255,255,255,0.1); }

/* Buehne: kurzes Aufleuchten nach einer Auswahl */
@keyframes ai-klappe {
  0%   { border-color: rgba(148,239,255,0.16); }
  25%  { border-color: rgba(148,239,255,0.95); }
  100% { border-color: rgba(148,239,255,0.16); }
}
.ai-page .ai-buehne-rahmen.ist-klappe { animation: ai-klappe .7s ease-out 1; }

/* =============================================================
   BREAKPOINTS
   ============================================================= */
@media (min-width: 640px) {
  .ai-page .ai-sek { padding: 128px 0; }
  .ai-page .ai-hero { padding: 40px 0 96px; }
  .ai-page .ai-hero .ai-eyebrow { margin-top: 48px; }
  .ai-page .ai-hero-bild { margin-top: 96px; }
  .ai-page h1 { font-size: 40px; }
  .ai-page h2 { font-size: 32px; }
  .ai-page .ai-zahlen,
  .ai-page .ai-karten,
  .ai-page .ai-skills,
  .ai-page .ai-trust,
  .ai-page .ai-herz-raster { margin-top: 64px; }
  .ai-page .ai-zahlen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ai-page .ai-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ai-page .ai-skills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ai-page .ai-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .ai-page .ai-szene { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 52px; padding: 64px 0; }
}
@media (min-width: 1024px) {
  .ai-page .ai-wrap { padding: 0 32px; }
  .ai-page .ai-wrap--schmal { max-width: 960px; }
  .ai-page .ai-sek--faq { padding: 160px 0; }
  .ai-page .ai-hero {
    padding: 96px 0;
    background-image: radial-gradient(30% 70% at 20% 30%, rgba(82,183,255,0.22), rgba(0,0,0,0));
  }
  .ai-page .ai-hero-raster { display: flex; align-items: center; min-height: 672px; }
  .ai-page .ai-hero-text { flex: 0 1 672px; min-width: 0; margin: 0; }
  .ai-page .ai-hero .ai-eyebrow { margin-top: 0; }
  .ai-page .ai-hero-bild { flex: 1 1 380px; min-width: 0; max-width: none; margin: 0 0 0 40px; }
  .ai-page h1 { font-size: 46px; }
  .ai-page h2 { font-size: 36px; }
  .ai-page .ai-karten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ai-page .ai-skills { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .ai-page .ai-hero-bild { margin-left: 64px; }
}
@media (max-width: 639px) {
  .ai-page .ai-wahl { padding: 16px; }
  .ai-page .ai-fazit { padding: 22px 18px; }
  .ai-page .ai-fazit .ai-btn { width: 100%; }
}

/* =============================================================
   BEWEGUNG REDUZIEREN
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .ai-page *,
  .ai-page *::before,
  .ai-page *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .ai-page [data-ar] { opacity: 1 !important; transform: none !important; }
  .ai-page .ai-karte:hover { transform: none; }
}

@media print {
  .ai-page .ai-buehne,
  .ai-page .ai-chips,
  .ai-page .ai-btn-zeile { display: none !important; }
  .ai-page .ai-sek--navy { background: #FFFFFF; color: #111828; }
}