/* =====================================================================
   /ai-builders/: Landingpage der Skool-Community AI Builders.
   Bewusst dunkel im Look der Skool-Grafiken und Videos: Violett-Verlauf,
   Karo-Raster, 3D-Glasobjekte, Strom-Rahmen, Blitz. Die ganze Seite ist
   ein Theme (Kopfzeile und Fuss werden hier ebenfalls dunkel).
   Radien wie start.css: Knoepfe 8 px, Karten 14 px, grosse Flaechen 20 px.
   ===================================================================== */

.seite-ai {
  --ab-tief: #17102B;
  --ab-nacht: #120b22;
  --ab-flaeche: rgba(255, 255, 255, .06);
  --ab-rand: rgba(217, 183, 255, .18);
  --ab-text: #CFC8DD;
  --ab-cyan: #4DE8FF;
  --ab-lila: #B98BFF;
  --ab-verlauf:
    radial-gradient(ellipse 60% 70% at 100% 100%, rgba(138, 85, 247, .55) 0, transparent 60%),
    radial-gradient(ellipse 50% 50% at 0% 0%, rgba(108, 43, 242, .3) 0, transparent 70%),
    linear-gradient(150deg, #17102B 0%, #22103f 58%, #2e1466 100%);
  color-scheme: dark;
  background: #0e0620;
  color: var(--ab-text);
}
.seite-ai #seite { background: #0e0620; }
.seite-ai h1, .seite-ai h2, .seite-ai h3 { color: #fff; }
.seite-ai :focus-visible { outline-color: var(--accent-soft); }

/* ---------- Kopfzeile und KI-Hinweis dunkel ---------- */
.seite-ai .kihinweis { background: #0d0819; color: rgba(207, 200, 221, .75); }
.seite-ai .kihinweis a { color: var(--accent-soft); }
.seite-ai .kopf { background: rgba(18, 11, 34, .78); border-bottom-color: rgba(255, 255, 255, .07); }
.seite-ai .kopf-nav > a, .seite-ai .mm-knopf { color: var(--ab-text); }
.seite-ai .kopf-nav > a:hover, .seite-ai .mm-knopf:hover, .seite-ai .mm-knopf[aria-expanded="true"] { color: #fff; background: rgba(255, 255, 255, .07); }
.seite-ai .menue-knopf { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: #fff; }
.seite-ai .kopf--lp { position: absolute; left: 0; right: 0; top: 0; z-index: 20; background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.kopf--lp > .wrap { display: flex; justify-content: space-between; align-items: center; height: 88px; }
.kopf--lp .kopf-rechts { display: flex; }
/* Logo: TN-Zeichen als Glasobjekt plus weisser Schriftzug */
.marke--glas { gap: 12px; }
.seite-ai .marke--glas .marke-zeichen { width: 46px; height: 46px; filter: drop-shadow(0 4px 14px rgba(124, 77, 255, .65)); }
.seite-ai .marke--glas .marke-wort { height: 21px; width: auto; }
.seite-ai .fuss-marke .marke--glas .marke-zeichen { width: 52px; height: 52px; }
.seite-ai .fuss-marke .marke--glas .marke-wort { height: 24px; }

/* ---------- Gemeinsame Bausteine ---------- */
/* Band: jede zweite Sektion etwas dunkler, Raender laufen weich in den Grund; das Raster wirkt darauf staerker */
.ab-band.ab-raster::before { background-image: linear-gradient(to right, rgba(255, 255, 255, .08) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, .08) 1px, transparent 1px); -webkit-mask-image: radial-gradient(ellipse 70% 80% at 0% 0%, #000 35%, transparent 85%); mask-image: radial-gradient(ellipse 70% 80% at 0% 0%, #000 35%, transparent 85%); }
.ab-preis.ab-raster::before { -webkit-mask-image: radial-gradient(ellipse 90% 95% at 20% 30%, #000 40%, transparent 90%); mask-image: radial-gradient(ellipse 90% 95% at 20% 30%, #000 40%, transparent 90%); }
.ab-band.ab-raster--rechts::before { -webkit-mask-image: radial-gradient(ellipse 70% 80% at 100% 0%, #000 35%, transparent 85%); mask-image: radial-gradient(ellipse 70% 80% at 100% 0%, #000 35%, transparent 85%); }
.ab-band { position: relative; isolation: isolate; }
.ab-band > .wrap { position: relative; z-index: 1; padding: 0 clamp(20px, 4.5vw, 64px); }
/* Panels: Kapitel als grosse runde Flaechen, eingerueckt vom Rand, mit Lila-Verlauf, Raster und Lichtrand */
.ab-band { width: calc(100% - 2 * clamp(12px, 3vw, 40px)); max-width: var(--maxw); margin: 0 auto; border-radius: clamp(24px, 3vw, 40px); overflow: clip;
  background: radial-gradient(ellipse 60% 70% at 100% 100%, rgba(138, 85, 247, .55) 0, transparent 60%), radial-gradient(ellipse 50% 50% at 0% 0%, rgba(108, 43, 242, .3) 0, transparent 70%), linear-gradient(150deg, #1d0f3c 0%, #2b1356 58%, #3f169a 100%);
  box-shadow: inset 0 1px 0 rgba(217, 183, 255, .22), 0 0 0 1px rgba(217, 183, 255, .1), 0 60px 120px -60px rgba(0, 0, 0, .8); }
.ab-band + .ab-band, .ab-band + section, section + .ab-band { margin-top: 0; }
/* Panels heben sich beim Hereinscrollen leicht an */
@supports (animation-timeline: view()) {
  .ab-band { animation: ab-panel linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
  @keyframes ab-panel { from { transform: translateY(50px) scale(.975); } to { transform: none; } }
}
.ab-dunkel { position: relative; isolation: isolate; overflow: hidden; }
.ab-ruhig { position: relative; isolation: isolate; background: radial-gradient(ellipse 45% 38% at 50% 50%, rgba(108, 43, 242, .12) 0, transparent 70%); }
/* Ein durchgehender Lila-Grund fuer die ganze Seite: keine harten Kanten zwischen Sektionen */
.seite-ai main { background: #120a24; }
.ab-raster::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(to right, rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 140px), radial-gradient(ellipse 70% 80% at 0% 10%, #000 35%, transparent 85%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0, #000 140px), radial-gradient(ellipse 70% 80% at 0% 10%, #000 35%, transparent 85%);
  mask-composite: intersect;
}
.ab-raster--rechts::before {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 140px), radial-gradient(ellipse 70% 80% at 100% 10%, #000 35%, transparent 85%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 140px), radial-gradient(ellipse 70% 80% at 100% 10%, #000 35%, transparent 85%);
}
.seite-ai .abschnitt h2 { max-width: 16em; }
.ab-lila { color: var(--accent-soft); }
.ab-lead { max-width: 36em; margin-top: 16px; font-size: 17px; color: var(--ab-text); }
.ab-glas { position: absolute; pointer-events: none; filter: drop-shadow(0 30px 40px rgba(10, 4, 30, .55)) drop-shadow(0 0 30px rgba(168, 85, 247, .4)); }
.ab-glas--weich { filter: blur(4px) drop-shadow(0 0 24px rgba(168, 85, 247, .35)); opacity: .7; }

/* Handschrift-Notiz mit Pfeil (eine pro Sektion) */
.ab-notiz { position: absolute; font: 600 clamp(24px, 2.4vw, 32px)/1 Caveat, cursive; color: var(--accent-soft); white-space: nowrap; transform: rotate(-5deg); }
.ab-notiz svg { position: absolute; width: 56px; height: 46px; overflow: visible; }
.ab-notiz path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ist-da .ab-notiz path, .ab-notiz.ist-da path { animation: kritzeln .9s var(--ease) .5s forwards; }
.ist-da .ab-notiz .spitze, .ab-notiz.ist-da .spitze { animation-delay: 1.3s; animation-duration: .35s; }

/* Strom-Rahmen: zwei Lichtpunkte laufen um eine Flaeche (wie in den Videos) */
.strom { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.strom rect { fill: none; }
.strom .bahn { stroke: rgba(255, 255, 255, .16); stroke-width: 1; }
.strom .s1, .strom .s2 { stroke-width: 2.5; stroke-linecap: round; animation: ab-umlauf 6.4s linear infinite; }
.strom .s1 { stroke: var(--ab-cyan); stroke-dasharray: 12 88; filter: drop-shadow(0 0 4px rgba(77, 232, 255, .95)); }
.strom .s2 { stroke: var(--ab-lila); stroke-dasharray: 8 92; animation-delay: -3.2s; filter: drop-shadow(0 0 4px rgba(199, 125, 255, .95)); }
@keyframes ab-umlauf { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }

.ab-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.seite-ai .btn-ghost { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .2); color: #fff; }
.seite-ai .btn-ghost:hover { background: rgba(255, 255, 255, .12); border-color: var(--accent-soft); }
.seite-ai .btn-primary { box-shadow: var(--btn-face), 0 12px 40px -10px rgba(108, 43, 242, .9); }
.btn-gross { min-height: 54px; padding: 0 28px; font-size: 16px; }

/* ---------- 1. Hero: 3D-Halle wie im Video-Intro ----------
   Bodenraster in Perspektive laeuft auf den Betrachter zu, Horizont leuchtet,
   TN-Zeichen aus Glas auf Lichtsockel mit Spiegelung, Glasobjekte auf einer
   echten Umlaufbahn (vorne gross und scharf, hinten klein und weich). */
.ab-hero { display: flex; align-items: center; min-height: min(100dvh, 940px); padding: clamp(110px, 9vw, 140px) 0 clamp(72px, 8vw, 110px); overflow: hidden; text-align: left; }
.ab-hero::before { display: none; }
.ab-hero { background: radial-gradient(ellipse 70% 60% at 70% 45%, rgba(108, 43, 242, .35) 0, transparent 70%), linear-gradient(180deg, #1d0f3c 0%, #1a0d36 70%, #120a24 100%); }
.ab-hero > .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 560px; align-items: center; gap: 24px; }
.ab-hero .brotkrumen, .ab-hero .kicker { justify-content: flex-start; }
.ab-hero .kicker { color: var(--accent-soft); display: inline-flex; align-items: center; gap: 10px; letter-spacing: .08em; }
.ab-hero .kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ab-cyan); box-shadow: 0 0 10px var(--ab-cyan); animation: ab-puls 2.4s ease-in-out infinite; }
@keyframes ab-puls { 50% { box-shadow: 0 0 2px var(--ab-cyan); opacity: .6; } }
.ab-hero h1 { margin: 0; max-width: none; font-size: clamp(42px, 5.6vw, 80px); line-height: 1; letter-spacing: -.05em; }
.ab-zeile { display: block; white-space: nowrap; }
.ab-kicker { position: relative; }
.ab-kicker-notiz { position: relative; display: inline-flex; align-items: flex-end; margin-left: 70px; font: 600 30px/1 Caveat, cursive; letter-spacing: 0; text-transform: none; color: var(--accent-soft); transform: rotate(-5deg) translateY(-10px); white-space: nowrap; }
.ab-kicker-notiz svg { position: absolute; right: 100%; bottom: 2px; width: 58px; height: 28px; margin-right: 6px; overflow: visible; }
.ab-kicker-notiz path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: kritzeln .9s var(--ease) 1.1s forwards; }
.ab-kicker-notiz .spitze { animation-delay: 1.9s; animation-duration: .35s; }
/* Woerter steigen einzeln aus einer Maske */
.wz { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0 .03em .22em; margin-bottom: -.22em; }
.wz > span { display: inline-block; transform: translateY(108%); animation: ab-wort 1s var(--ease) forwards; animation-delay: calc(var(--w) * 80ms + 150ms); }
@keyframes ab-wort { to { transform: none; } }
.ab-verlauf { background: linear-gradient(100deg, #e9dcff 0%, #c77dff 45%, #8a55f7 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.ab-hero .lead { margin: 26px 0 34px; max-width: 30em; font-size: clamp(17px, 1.35vw, 19px); color: var(--ab-text); text-align: left; }
/* Hauptknopf: ein Lichtstreif laeuft in Abstaenden darueber */
.ab-cta { position: relative; overflow: hidden; isolation: isolate; }
.ab-cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%); transform: translateX(-120%); animation: ab-glanz 4.5s var(--ease) 1.6s infinite; }
@keyframes ab-glanz { 0% { transform: translateX(-120%); } 30%, 100% { transform: translateX(120%); } }

/* Halle */
.ab-halle { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 84%, transparent 100%); mask-image: linear-gradient(to bottom, #000 84%, transparent 100%); }
.ab-horizont { position: absolute; left: 0; right: 0; top: 52%; height: 70%; translate: 0 -50%; filter: blur(40px); opacity: .85; background: radial-gradient(ellipse 55% 40% at 68% 50%, rgba(138, 85, 247, .6) 0, rgba(108, 43, 242, .2) 45%, transparent 70%), radial-gradient(ellipse 30% 14% at 68% 50%, rgba(77, 232, 255, .18) 0, transparent 70%); }
.ab-boden { position: absolute; left: -80%; right: -80%; bottom: 0; height: 220%; transform-origin: 50% 100%; transform: perspective(700px) rotateX(60deg); overflow: hidden;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .8) 30%, transparent 62%); mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .8) 30%, transparent 62%); }
/* Rasterflaeche gleitet per transform (kein Neuzeichnen pro Bild, kein Flimmern) */
.ab-boden-raster { position: absolute; left: 0; right: 0; top: -72px; bottom: 0;
  background-image: linear-gradient(to right, rgba(192, 165, 251, .34) 1.5px, transparent 1.5px), linear-gradient(to bottom, rgba(192, 165, 251, .34) 1.5px, transparent 1.5px);
  background-size: 72px 72px; }
@keyframes ab-fahrt { to { transform: translate3d(0, 72px, 0); } }

/* Buehne: feste Innenmasse (600 px), skaliert in Stufen */
.ab-buehne { position: relative; width: 600px; height: 600px; justify-self: end; margin-right: -56px; perspective: 1200px; }
.ab-buehne-kipp { width: 600px; height: 600px; transform: rotateX(var(--kx, 0deg)) rotateY(var(--ky, 0deg)); transition: transform .6s var(--ease); transform-style: preserve-3d; }
.ab-orbit { position: relative; width: 600px; height: 600px; }
.ab-strahlen { position: absolute; left: 50%; top: 44%; width: 760px; height: 760px; translate: -50% -50%; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(192, 165, 251, .22) 0deg 3deg, transparent 3deg 16deg); -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .35) 32%, transparent 64%); mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .35) 32%, transparent 64%); filter: blur(5px); mix-blend-mode: screen; animation: ab-drehen 60s linear infinite; }
@keyframes ab-drehen { to { rotate: 360deg; } }
.ab-sockel { position: absolute; left: 50%; top: 77%; width: 420px; height: 110px; translate: -50% -50%; border-radius: 50%; background: radial-gradient(ellipse at 50% 50%, rgba(220, 200, 255, .55) 0, rgba(138, 85, 247, .45) 30%, rgba(108, 43, 242, .12) 60%, transparent 72%); filter: blur(22px); opacity: .7; }
.ab-tn { position: absolute; left: 50%; top: 44%; width: 300px; translate: -50% -50%; z-index: 3; filter: drop-shadow(0 30px 40px rgba(10, 4, 30, .55)) drop-shadow(0 0 70px rgba(168, 85, 247, .6)); animation: ab-schwebe-tn 6s ease-in-out infinite; }
@keyframes ab-schwebe-tn { 50% { transform: translateY(-16px); } }
.ab-tn-spiegel { position: absolute; left: 50%; top: 82%; width: 300px; translate: -50% 0; z-index: 2; transform: scaleY(-.55); transform-origin: 50% 0; opacity: .28; filter: blur(3px); -webkit-mask-image: linear-gradient(to bottom, transparent 30%, #000 100%); mask-image: linear-gradient(to bottom, transparent 30%, #000 100%); }

/* Umlaufbahn: Ellipse um das Zeichen, sechs Objekte gleichmaessig verteilt */
.ab-orbit-item { position: absolute; left: 0; top: 0; width: 96px; height: 96px;
  offset-path: path("M300,410 A270,86 0 1,1 300,238 A270,86 0 1,1 300,410"); offset-rotate: 0deg; offset-anchor: 50% 50%;
  animation: ab-umlaufbahn 24s linear infinite, ab-tiefe 24s linear infinite; animation-delay: calc(var(--o) * -4s);
  filter: drop-shadow(0 18px 24px rgba(10, 4, 30, .55)) drop-shadow(0 0 20px rgba(168, 85, 247, .45)); }
@keyframes ab-umlaufbahn { from { offset-distance: 0%; } to { offset-distance: 100%; } }
/* vorne (0 %) gross, scharf und vor dem Zeichen, hinten (50 %) klein, weich und dahinter */
@keyframes ab-tiefe {
  0%, 100% { scale: 1.25; opacity: 1; z-index: 5; }
  25% { scale: .85; opacity: .9; z-index: 4; }
  26% { z-index: 1; }
  50% { scale: .55; opacity: .55; z-index: 1; }
  74% { z-index: 1; }
  75% { scale: .85; opacity: .9; z-index: 4; }
}
/* Kommentar-Blasen schweben am Rand */
.ab-bubble { position: absolute; z-index: 6; padding: 10px 14px; border-radius: 14px; background: linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06)); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 20px 40px -20px rgba(5, 2, 15, .9); font: 500 15px/1.3 Manrope, sans-serif; color: #fff; white-space: nowrap; opacity: 0; animation: ab-bubble-rein .8s var(--ease) forwards, ab-schwebe-tn 7s ease-in-out infinite; }
.ab-bubble b { display: block; font-size: 12px; font-weight: 700; color: var(--accent-soft); }
.ab-bubble--a { left: 2%; top: 8%; animation-delay: 1.4s, 1.4s; }
.ab-bubble--b { right: -4%; top: 78%; animation-delay: 2.2s, 2.2s; }
@keyframes ab-bubble-rein { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }

/* Beim Runterscrollen fliegt die Buehne auf den Betrachter zu und blendet aus */
@supports (animation-timeline: view()) {
  .ab-buehne-weg { animation: ab-wegflug linear both; animation-timeline: view(); animation-range: exit 0% exit 90%; }
  @keyframes ab-wegflug { to { transform: translateY(-80px) scale(1.18); opacity: 0; } }
}

@media (max-width: 1199px) {
  .ab-hero > .wrap { grid-template-columns: minmax(0, 1fr) 450px; }
  .ab-buehne { width: 480px; height: 480px; margin-right: -30px; }
  .ab-buehne-kipp { scale: .8; transform-origin: 0 0; }
}
@media (max-width: 959px) {
  .ab-hero { min-height: 0; padding-top: 96px; }
  .ab-hero > .wrap { grid-template-columns: minmax(0, 1fr); }
  .ab-buehne { order: -1; width: 360px; height: 360px; margin: 0 auto -20px; justify-self: center; }
  .ab-buehne-kipp { scale: .6; }
  .ab-bubble { display: none; }
}
@media (max-width: 599px) {
  .ab-kicker-notiz { margin-left: 50px; font-size: 24px; }
  .ab-kicker-notiz svg { width: 42px; }
  .ab-hero .ab-btns { flex-direction: column; }
  .ab-hero .ab-btns .btn { width: 100%; justify-content: center; }
  .kopf--lp > .wrap { height: 72px; }
  .seite-ai .kopf--lp .marke-zeichen { width: 40px; height: 40px; }
  .seite-ai .kopf--lp .marke-wort { height: 18px; }
  .kopf--lp .kopf-rechts { display: none; }
  .kopf--lp > .wrap { justify-content: center; }
  .ab-aussage .ab-glas { display: none; }
  .ab-foto-glas { width: 64px; }
  .ab-foto-glas--1 { right: -10px; }
  .ab-foto-glas--2 { left: -12px; }
  .ab-foto-glas--3 { right: -6px; }
  .ab-euro { display: none; }
  .ab-blitz { display: none; }
  .ab-hero h1 { font-size: clamp(32px, 9.2vw, 44px); }
  .ab-zeile { white-space: normal; }
  .ab-buehne { width: 300px; height: 300px; }
  .ab-buehne-kipp { scale: .5; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-kicker-notiz path { animation: none; stroke-dashoffset: 0; }
  .wz > span { animation: none; transform: none; }
  .ab-strahlen, .ab-tn, .ab-cta::after, .ab-hero .kicker::before { animation: none; }
  .ab-orbit-item { animation: none; offset-distance: calc(var(--o) * 16.66%); }
  .ab-bubble { animation: none; opacity: 1; }
  .ab-buehne-weg { animation: none; }
}

/* ---------- 2. Video: Kino-Buehne ----------
   Das Video liegt gekippt im Raum und richtet sich beim Scrollen auf.
   Bildschirmlicht faellt nach unten, darunter eine weiche Spiegelung. */
.ab-video { overflow: hidden; padding-bottom: clamp(48px, 6vw, 80px); }
.ab-video h2 { text-align: center; margin: 0 auto; max-width: 18em; font-size: clamp(34px, 4.4vw, 58px); }
.ab-kino { position: relative; max-width: 1080px; margin: clamp(40px, 5vw, 64px) auto 0; perspective: 1600px; }
.ab-kino-licht { position: absolute; left: 50%; top: 40%; width: 130%; height: 120%; translate: -50% -40%; background: radial-gradient(ellipse 50% 45% at 50% 50%, rgba(138, 85, 247, .45) 0, rgba(77, 232, 255, .08) 40%, transparent 70%); filter: blur(20px); pointer-events: none; }
.ab-player { position: relative; padding: 10px; border-radius: 26px; background: rgba(255, 255, 255, .05); border: 1px solid var(--ab-rand); box-shadow: 0 80px 140px -50px rgba(5, 2, 15, .95), 0 0 120px rgba(124, 77, 255, .35); transform-origin: 50% 100%; }
@supports (animation-timeline: view()) {
  .ab-player { animation: ab-aufrichten linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  @keyframes ab-aufrichten { from { transform: rotateX(28deg) scale(.86); opacity: .4; } to { transform: none; opacity: 1; } }
}
.ab-player video { width: 100%; aspect-ratio: 16 / 9; border-radius: 18px; background: #0d0819; filter: blur(2px) brightness(.9); transition: filter .4s var(--ease); }
.ab-player { overflow: hidden; }
.ab-player.laeuft video { filter: none; }
.ab-player .strom { z-index: 2; }
.ab-play { position: absolute; left: 50%; top: 50%; width: 15%; height: auto; aspect-ratio: 1; max-width: 150px; min-width: 72px; translate: -50% -50%; display: grid; place-items: center; border-radius: 22%; cursor: pointer;
  background: linear-gradient(150deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .08)); border: 1px solid rgba(255, 255, 255, .4);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 30px 60px -20px rgba(5, 2, 15, .8), 0 0 60px rgba(168, 85, 247, .55), inset 0 1px 0 rgba(255, 255, 255, .4);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.ab-play svg { width: 40%; height: 40%; margin-left: 0; transform: translateX(4%); fill: #fff; filter: drop-shadow(0 6px 12px rgba(10, 4, 30, .5)); }
.ab-play::before { content: ""; position: absolute; inset: -8%; border-radius: 26%; border: 1px solid rgba(192, 165, 251, .35); animation: ab-play-puls 2.6s var(--ease) infinite; }
@keyframes ab-play-puls { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.25); opacity: 0; } }
.ab-play:hover { transform: scale(1.06); box-shadow: 0 30px 60px -20px rgba(5, 2, 15, .8), 0 0 90px rgba(168, 85, 247, .8), inset 0 1px 0 rgba(255, 255, 255, .4); }
.ab-player.laeuft .ab-play, .ab-player.laeuft .ab-notiz { opacity: 0; pointer-events: none; transition: opacity .3s; }
.ab-player .ab-notiz { right: -12px; top: -58px; }
.ab-player .ab-notiz svg { left: -60px; top: 20px; transform: scaleX(-1) rotate(20deg); }
.ab-kino-spiegel { height: 120px; margin: 0 6% 0; background: radial-gradient(ellipse 50% 60% at 50% 0%, rgba(138, 85, 247, .35) 0, transparent 70%); filter: blur(10px); }

/* ---------- 3. Problem: Reel im iPhone, Kommentare kommen hoch ---------- */
.ab-problem .wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.ab-problem h2 { font-size: clamp(38px, 5vw, 64px); }
.ab-pkarten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: 32px; }
.ab-pkarte { --f: #c084fc; position: relative; isolation: isolate; padding: 24px 24px 26px; border-radius: 18px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .025));
  border: 1px solid rgba(217, 183, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 30px 60px -36px rgba(5, 2, 15, .9); }
/* weiches Leuchten hinter dem Icon, in der Farbe des Icons */
.ab-pkarte::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(160px 130px at 52px 52px, color-mix(in srgb, var(--f) 26%, transparent) 0, color-mix(in srgb, var(--f) 8%, transparent) 45%, transparent 100%); pointer-events: none; }
.ab-pkarte img { width: 64px; height: 64px; margin: -6px 0 10px -6px; filter: drop-shadow(0 12px 18px rgba(10, 4, 30, .55)) drop-shadow(0 0 16px rgba(168, 85, 247, .45)); }
.ab-pkarte h3 { font-size: 20px; }
.ab-pkarte p { margin-top: 6px; font-size: 15px; line-height: 1.55; }

/* iPhone-Rahmen (Titan, Dynamic Island) mit Reel und Kommentar-Blatt */
.ab-handy-buehne { position: relative; justify-self: center; padding: 20px; }
.ab-handy-buehne::before { content: ""; position: absolute; inset: -10% -20%; z-index: -1; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(138, 85, 247, .55), transparent 70%); filter: blur(20px); }
.ab-handy { width: 310px; padding: 11px; border-radius: 52px; background: linear-gradient(140deg, #5d5670 0%, #2a2537 22%, #18141f 50%, #3a3448 78%, #6b6380 100%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 60px 120px -40px rgba(5, 2, 15, .95), 0 0 80px rgba(124, 77, 255, .35); transform: rotate(-3deg); }
.ab-handy-schirm { position: relative; aspect-ratio: 9 / 19.5; border-radius: 42px; overflow: hidden; clip-path: inset(0 round 42px); isolation: isolate; background: #000; }
.ab-handy-reel { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.ab-insel { position: absolute; left: 50%; top: 11px; width: 92px; height: 27px; translate: -50% 0; border-radius: 16px; background: #000; }
.ab-blatt { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 14px 26px; border-radius: 22px 22px 42px 42px; background: rgba(28, 24, 38, .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.ab-blatt::before { content: ""; display: block; width: 36px; height: 4px; margin: 0 auto 8px; border-radius: 4px; background: rgba(255, 255, 255, .3); }
.ab-blatt-kopf { text-align: center; font: 700 13px/1 Manrope, sans-serif; color: #fff; margin-bottom: 10px; }
.ab-k-liste { display: grid; gap: 12px; }
.ab-k { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.ab-k-av { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #211838; border: 2px solid var(--f); font: 700 12px/1 Outfit, sans-serif; color: var(--f); }
.ab-k b { font: 700 12px/1.2 Manrope, sans-serif; color: rgba(255, 255, 255, .75); }
.ab-k p { font: 500 13.5px/1.3 Manrope, sans-serif; color: #fff; }
.ab-k-herz { display: grid; justify-items: center; font: 600 10.5px/1 Manrope, sans-serif; color: rgba(255, 255, 255, .6); }
.ab-k-herz svg { width: 16px; height: 16px; fill: #f0abfc; }
.ab-handy-buehne .ab-notiz { left: -110px; top: 30%; }
.ab-handy-buehne .ab-notiz svg { left: 100%; top: 6px; width: 50px; height: 36px; margin-left: 4px; }
.ab-handy-buehne .ab-notiz path { stroke-width: 2.2; }
/* Blatt schiebt sich hoch, Kommentare kommen nacheinander */
.js .ab-blatt { transform: translateY(100%); transition: transform .9s var(--ease) .2s; }
.js .ab-handy-buehne.ist-da .ab-blatt { transform: none; }
.js .ab-k { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(.9s + var(--i) * .55s); }
.js .ab-handy-buehne.ist-da .ab-k { opacity: 1; transform: none; }
/* leichte Neigung folgt dem Scrollen */
@supports (animation-timeline: view()) {
  .ab-handy { animation: ab-handy-kipp linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  @keyframes ab-handy-kipp { from { transform: rotate(-7deg) translateY(40px); } to { transform: rotate(2deg) translateY(-30px); } }
}

/* ---------- 4. Verstaerken: grosse Aussage ---------- */
.ab-aussage { text-align: center; padding: clamp(80px, 11vw, 150px) 0; }
.ab-aussage p { max-width: 21em; margin: 0 auto; font: 500 clamp(30px, 4.4vw, 58px)/1.08 var(--head); letter-spacing: -.035em; color: #fff; text-wrap: balance; }
.ab-aussage .ab-glas { width: clamp(90px, 11vw, 150px); }
/* Woerter leuchten beim Scrollen nacheinander auf (nur wo der Browser es kann) */
@supports (animation-timeline: view()) {
  .ab-aussage .w { opacity: .22; animation: ab-aufleuchten linear both; animation-timeline: view(); animation-range: cover 18% cover 48%; }
  @keyframes ab-aufleuchten { to { opacity: 1; } }
}

/* ---------- 5. Kurse als Roadmap ---------- */
.ab-kurse h2 { max-width: 14em; }
.ab-weg { position: relative; margin-top: clamp(40px, 5vw, 64px); }
.ab-weg-linie { position: absolute; left: 0; right: 0; top: 9px; height: 4px; border-radius: 4px; background: rgba(192, 165, 251, .22); }
.ab-weg-linie i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--ab-cyan), #8a55f7); box-shadow: 0 0 18px rgba(77, 232, 255, .7); transform-origin: 0 50%; transform: scaleX(1); }
@supports (animation-timeline: view()) {
  .ab-weg-linie i { animation: ab-fuellen linear both; animation-timeline: view(); animation-range: cover 15% cover 70%; }
  @keyframes ab-fuellen { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
.ab-kursliste { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.ab-kurs { position: relative; display: flex; flex-direction: column; gap: 14px; }
.ab-kurs .ab-kurs-punkt { margin-bottom: 14px; }
.ab-kurs img { width: 100%; border-radius: 14px; border: 1px solid var(--ab-rand); box-shadow: 0 30px 60px -30px rgba(5, 2, 15, .9); }
.ab-kurs-punkt { width: 22px; height: 22px; border-radius: 50%; border: 4px solid var(--ab-cyan); background: var(--ab-tief); box-shadow: 0 0 16px rgba(77, 232, 255, .7); }
.ab-kurs h3 { font-size: 21px; }
.ab-kurs p { font-size: 15px; line-height: 1.55; }
.ab-weiter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: clamp(36px, 4vw, 52px); }
.ab-weiter .ab-notiz { position: static; margin-right: 10px; }
.ab-chip { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px 9px 9px; border-radius: 12px; background: var(--ab-flaeche); border: 1px solid var(--ab-rand); font: 600 15px/1 Manrope, sans-serif; color: #fff; }
.ab-chip img { width: 30px; height: 30px; }

/* ---------- 6. Was du bekommst: Karten wie im PDF "Der Plan" ----------
   Aussenrahmen, getoente Innenflaeche in der Farbe des Inhalts, das Glasobjekt
   sitzt unten rechts und ragt ueber die Kante der Innenflaeche. */
.ab-bento { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; margin-top: clamp(32px, 4vw, 52px); }
.ab-zelle { --licht: #8a55f7; position: relative; padding: 8px; border-radius: 24px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(217, 183, 255, .2); box-shadow: 0 40px 80px -40px rgba(5, 2, 15, .9); }
.ab-zelle-innen { position: relative; min-height: 190px; padding: 30px 170px 30px 30px; border-radius: 17px; overflow: hidden;
  background: radial-gradient(ellipse 70% 90% at 100% 100%, color-mix(in srgb, var(--licht) 30%, transparent) 0, transparent 70%), linear-gradient(160deg, color-mix(in srgb, var(--licht) 14%, rgba(255, 255, 255, .04)), rgba(255, 255, 255, .02)); }
.ab-zelle h3 { font-size: 24px; }
.ab-zelle p { margin-top: 10px; font-size: 16px; max-width: 26em; }
.ab-zelle .ab-glas { position: absolute; right: 22px; bottom: -22px; width: 150px; z-index: 2; filter: drop-shadow(0 26px 30px rgba(10, 4, 30, .6)) drop-shadow(0 0 30px color-mix(in srgb, var(--licht) 55%, transparent)); }

/* ---------- 7. Wer dahinter steckt ---------- */
.ab-ich .wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.ab-foto { position: relative; border-radius: 20px; }
.ab-foto .ab-foto-bild { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 20px; }
.ab-foto .ab-notiz { left: -8px; bottom: -48px; }
.ab-foto .ab-notiz svg { left: 100%; top: -30px; transform: rotate(-30deg); }
.ab-ich p { margin-top: 16px; font-size: 17px; max-width: 34em; }
.ab-belege { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 30px; }
.ab-beleg { border-radius: 18px; overflow: hidden; background: rgba(255, 255, 255, .05); border: 1px solid rgba(217, 183, 255, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 40px 70px -40px rgba(5, 2, 15, .9); }
/* Buehne: eigene Lila-Flaeche mit Raster, Objekt steht frei darauf */
.ab-beleg-buehne { position: relative; aspect-ratio: 16 / 11; overflow: hidden; isolation: isolate;
  background: radial-gradient(ellipse 70% 70% at 50% 60%, rgba(138, 85, 247, .55) 0, transparent 70%), linear-gradient(160deg, #1d0f3c, #33157a); }
.ab-beleg-buehne::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(to right, rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 40%, #000 30%, transparent 85%); mask-image: radial-gradient(ellipse 80% 80% at 50% 40%, #000 30%, transparent 85%); }
.ab-browser { position: absolute; left: 12%; top: 16%; width: 84%; border-radius: 10px; overflow: hidden; background: #fff; transform: rotate(-3deg); box-shadow: 0 30px 50px -20px rgba(5, 2, 15, .8), 0 0 40px rgba(124, 77, 255, .35); }
.ab-browser-leiste { display: flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; background: #f1edf8; border-bottom: 1px solid #e4def0; }
.ab-browser-leiste i { width: 7px; height: 7px; border-radius: 50%; background: #d4cce4; }
.ab-browser-leiste i:nth-child(1) { background: #ff5f57; } .ab-browser-leiste i:nth-child(2) { background: #febc2e; } .ab-browser-leiste i:nth-child(3) { background: #28c840; }
.ab-browser-leiste b { margin-left: 10px; font: 600 9.5px/1 Manrope, sans-serif; color: #6b6379; }
.ab-browser img { display: block; width: 100%; height: auto; }
.ab-pdf { position: absolute; left: 50%; top: 13%; width: 40%; translate: -50% 0; border-radius: 6px; transform: rotate(4deg); box-shadow: 0 30px 50px -18px rgba(5, 2, 15, .85), 0 0 40px rgba(124, 77, 255, .35); }
.ab-beleg-glas { position: absolute; z-index: 2; filter: drop-shadow(0 14px 18px rgba(10, 4, 30, .55)) drop-shadow(0 0 16px rgba(168, 85, 247, .5)); animation: ab-schwebe-tn 6s ease-in-out infinite; }
.ab-beleg-glas--1 { width: 22%; left: 8%; top: 46%; }
.ab-beleg-glas--2 { width: 18%; right: 10%; top: 18%; animation-delay: -3s; }
.ab-beleg figcaption { padding: 16px 18px 18px; font-size: 14px; color: var(--ab-text); }
.ab-beleg figcaption b { display: block; margin-top: 8px; font: 600 18px/1.3 var(--head); color: #fff; }
.ab-beleg-pille { display: inline-flex; padding: 5px 9px; border-radius: 7px; background: rgba(192, 165, 251, .12); border: 1px solid rgba(192, 165, 251, .25); font: 700 11px/1 Manrope, sans-serif; letter-spacing: .04em; color: var(--accent-soft); }

/* ---------- 8. Preis ---------- */
.ab-preis .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.ab-preiskarte { position: relative; padding: clamp(28px, 3.5vw, 44px); border-radius: 22px; background: linear-gradient(160deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04)); border: 1px solid rgba(255, 255, 255, .2); box-shadow: 0 60px 120px -50px rgba(5, 2, 15, .95), 0 0 80px rgba(124, 77, 255, .3); }
.ab-preiskarte .pille { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 12px; background: rgba(77, 232, 255, .1); border: 1px solid rgba(77, 232, 255, .3); color: var(--ab-cyan); font: 700 13px/1 Manrope, sans-serif; }
.ab-betrag { display: flex; align-items: baseline; gap: 16px; margin-top: 18px; }
.ab-betrag strong { font: 500 clamp(64px, 7vw, 96px)/1 var(--head); letter-spacing: -.05em; color: #fff; }
.ab-betrag s { font: 500 32px/1 var(--head); color: rgba(207, 200, 221, .5); text-decoration-color: var(--accent-soft); text-decoration-thickness: 3px; }
.ab-betrag span { font-size: 16px; }
.ab-preiskarte .ab-hinweis { margin-top: 6px; font-size: 15px; }
.ab-haken { display: grid; gap: 10px; margin: 26px 0 28px; }
.ab-haken li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; color: #fff; font-size: 16px; }
.ab-haken svg { width: 22px; height: 22px; color: #86efac; margin-top: 2px; }
.ab-preiskarte .btn { width: 100%; }
.ab-preiskarte .ab-notiz { right: -10px; top: -42px; }
.ab-preiskarte .ab-notiz svg { left: -58px; top: 22px; transform: scaleX(-1) rotate(10deg); }

/* ---------- 9. FAQ ---------- */
.ab-faq .wrap { max-width: 900px; }
.ab-fragen { margin-top: 32px; display: grid; gap: 10px; }
.ab-fragen details { border-radius: 14px; background: var(--ab-flaeche); border: 1px solid var(--ab-rand); }
.ab-fragen summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; cursor: pointer; list-style: none; font: 500 18px/1.35 var(--head); color: #fff; }
.ab-fragen summary::-webkit-details-marker { display: none; }
.ab-fragen summary svg { width: 18px; height: 18px; flex: none; transition: transform .25s var(--ease); }
.ab-fragen details[open] summary svg { transform: rotate(180deg); }
.ab-fragen details p { padding: 0 20px 20px; font-size: 16px; max-width: 46em; }

/* ---------- 10. Schluss ---------- */
.ab-schluss { text-align: center; padding: clamp(80px, 10vw, 140px) 0; }
.ab-schluss .tn { width: clamp(120px, 13vw, 170px); margin: 0 auto 26px; filter: drop-shadow(0 0 50px rgba(168, 85, 247, .6)); animation: ab-schweben 6s ease-in-out infinite; }
.ab-schluss h2 { margin: 0 auto; font-size: clamp(40px, 5.2vw, 68px); }
.ab-schluss p { margin: 16px auto 32px; max-width: 30em; font-size: 17px; }
.ab-schluss .ab-btns { justify-content: center; }

/* ---------- Blitze (wie tobias.social): kurz zucken, dann Ruhe ---------- */
.ab-blitz { position: absolute; z-index: 0; width: min(18vw, 260px); height: auto; overflow: visible; pointer-events: none; opacity: 0; animation: ab-zucken 5s steps(1) infinite; }
.ab-blitz path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ab-blitz .kern { stroke: #fff; stroke-width: .9; }
.ab-blitz .schein { stroke-width: 2.4; }
.ab-blitz--l { left: 0; top: 64%; }
.ab-blitz--l .schein { stroke: var(--ab-cyan); filter: drop-shadow(0 0 4px var(--ab-cyan)); }
.ab-blitz--r { right: 0; top: 20%; transform: scaleX(-1); animation-delay: 2.5s; }
.ab-blitz--r .schein { stroke: var(--ab-lila); filter: drop-shadow(0 0 4px var(--ab-lila)); }
@keyframes ab-zucken { 0% { opacity: .9; } 2% { opacity: .2; } 4% { opacity: .8; } 6% { opacity: 0; } 100% { opacity: 0; } }

/* Parallaxe: Glasobjekte ziehen beim Scrollen unterschiedlich schnell vorbei */
@supports (animation-timeline: view()) {
  .ab-par { animation: ab-par linear both; animation-timeline: view(); }
  .ab-par--1 { --par: -120px; }
  .ab-par--2 { --par: 90px; }
  .ab-par--3 { --par: -60px; }
  @keyframes ab-par { from { translate: 0 calc(var(--par) * -1); } to { translate: 0 var(--par); } }
}
.ab-aussage { overflow: visible; z-index: 2; background: none; }
.seite-ai main { overflow-x: clip; }
.ab-aussage .wrap { position: relative; z-index: 1; }

/* ---------- Preiskarte: umlaufender Lichtrand ---------- */
@property --ab-winkel { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.ab-preiskarte { isolation: isolate; }
.ab-lichtrand { position: absolute; inset: -2px; z-index: -1; border-radius: 24px; padding: 2px; background: conic-gradient(from var(--ab-winkel), transparent 0deg, var(--ab-cyan) 50deg, transparent 110deg, transparent 180deg, var(--ab-lila) 230deg, transparent 290deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: ab-rand 6s linear infinite; filter: drop-shadow(0 0 8px rgba(77, 232, 255, .6)); }
@keyframes ab-rand { to { --ab-winkel: 360deg; } }
.ab-preiskarte .strom { display: none; }
.ab-betrag strong { font-size: clamp(76px, 8vw, 120px); line-height: 1.1; padding: 0 .04em .08em 0; letter-spacing: -.04em; white-space: nowrap; background: linear-gradient(180deg, #fff 30%, #c9b5ff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 30px rgba(168, 85, 247, .45)); }

.ab-preis .wrap > div:first-child { position: relative; }
.ab-fakten { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.ab-fakten li { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 12px; background: var(--ab-flaeche); border: 1px solid var(--ab-rand); font: 600 15px/1 Manrope, sans-serif; color: #fff; }
.ab-fakten img { width: 34px; height: 34px; }
.ab-euro { position: absolute; right: -70px; top: -140px; width: 140px; z-index: 0; filter: drop-shadow(0 30px 40px rgba(10, 4, 30, .55)) drop-shadow(0 0 40px rgba(168, 85, 247, .55)); pointer-events: none; animation: ab-schwebe-tn 6s ease-in-out infinite; }

/* ---------- Kurse: Glasrahmen, leicht versetzt schwebend ---------- */
.ab-kurse h2 { font-size: clamp(36px, 4.6vw, 60px); }
.ab-kurs img { padding: 6px; background: rgba(255, 255, 255, .06); border-radius: 18px; box-shadow: 0 40px 70px -34px rgba(5, 2, 15, .95), 0 0 50px rgba(124, 77, 255, .22); }
.ab-kurs h3 { font-size: 22px; margin-top: 6px; }
.ab-weiter { justify-content: flex-start; }

/* ---------- Ueber mich: Glasobjekte kreisen ums Foto ---------- */
.ab-foto-glas { position: absolute; width: 96px; z-index: 2; filter: drop-shadow(0 18px 24px rgba(10, 4, 30, .55)) drop-shadow(0 0 22px rgba(168, 85, 247, .5)); animation: ab-schwebe-tn 6s ease-in-out infinite; pointer-events: none; }
.ab-foto-glas--1 { right: -40px; top: 8%; }
.ab-foto-glas--2 { left: -44px; top: 46%; width: 84px; animation-delay: -2s; }
.ab-foto-glas--3 { right: -30px; bottom: 10%; width: 80px; animation-delay: -4s; }
.ab-foto .ab-foto-bild { box-shadow: 0 60px 110px -40px rgba(5, 2, 15, .95), 0 0 80px rgba(124, 77, 255, .3); }
.ab-ich h2 { font-size: clamp(36px, 4.4vw, 58px); }

/* ---------- FAQ mit Seitenkarte ---------- */
.ab-faq .wrap { max-width: var(--maxw); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: stretch; }
.ab-faq-kopf { display: flex; flex-direction: column; }
.ab-faq-kopf .ab-frage-karte { flex: 1; align-content: start; }
.ab-faq-kopf .ab-frage-karte .btn { align-self: end; }
.ab-frage-fakten { grid-column: 1 / -1; display: grid; gap: 10px; margin: 18px 0 4px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .08); }
.ab-frage-fakten li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: #fff; }
.ab-frage-fakten svg { width: 18px; height: 18px; color: #86efac; flex: none; }
.ab-faq-kopf h2 { margin-top: -.12em; }
.ab-faq-kopf .ab-lead { margin-top: 12px; }
.ab-faq .ab-fragen { margin-top: 0; }
.ab-frage-karte { margin-top: 32px; padding: 24px; border-radius: 20px; text-align: left; display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; gap: 4px 16px; align-items: center; background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)); border: 1px solid var(--ab-rand); }
.ab-frage-foto { grid-row: span 2; width: 64px; height: 64px; margin: 0; border-radius: 50%; object-fit: cover; padding: 3px; background: conic-gradient(from 200deg, var(--ab-cyan), #C0A5FB, #6C2BF2, var(--ab-cyan)); }
.ab-frage-titel { font: 500 24px/1.2 var(--head); color: #fff; }
.ab-frage-titel { font-size: 21px !important; }
.ab-frage-karte p:not(.ab-frage-titel) { margin: 0; font-size: 15px; }
.ab-frage-karte .btn { grid-column: 1 / -1; justify-self: start; margin-top: 14px; }

/* ---------- Schluss: Raster als Decke, Karte mit Strom-Rahmen ---------- */
.ab-schluss { position: relative; isolation: isolate; overflow: hidden; padding: clamp(120px, 14vw, 200px) 0 clamp(90px, 10vw, 140px); text-align: center; }
.ab-decke-halle { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.ab-decke { position: absolute; left: -80%; right: -80%; top: 0; height: 200%; transform-origin: 50% 0; transform: perspective(700px) rotateX(-60deg);
  background-image: linear-gradient(to right, rgba(192, 165, 251, .32) 1.5px, transparent 1.5px), linear-gradient(to bottom, rgba(192, 165, 251, .32) 1.5px, transparent 1.5px); background-size: 72px 72px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .9) 5%, rgba(0, 0, 0, .45) 14%, transparent 30%); mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .9) 5%, rgba(0, 0, 0, .45) 14%, transparent 30%); }
.ab-schluss-licht { position: absolute; left: 50%; top: 58%; width: 900px; height: 520px; translate: -50% -50%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(138, 85, 247, .5) 0, rgba(108, 43, 242, .16) 45%, transparent 70%); filter: blur(30px); }
.ab-schluss > .wrap { position: relative; z-index: 1; }
.ab-schluss-karte { position: relative; max-width: 980px; margin: 0 auto; padding: clamp(56px, 6vw, 80px) clamp(24px, 5vw, 64px) clamp(44px, 5vw, 64px); border-radius: 28px; background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 80px 140px -60px rgba(5, 2, 15, .95), 0 0 100px rgba(124, 77, 255, .3); }
.ab-schluss-tn { position: absolute; left: 50%; top: 0; width: 120px; translate: -50% -58%; filter: drop-shadow(0 20px 30px rgba(10, 4, 30, .6)) drop-shadow(0 0 40px rgba(168, 85, 247, .7)); animation: ab-schwebe-tn 6s ease-in-out infinite; }
.ab-schluss h2 { margin: 0 auto; max-width: none; font-size: clamp(30px, 4.2vw, 60px); letter-spacing: -.045em; white-space: nowrap; }
@media (max-width: 759px) { .ab-schluss h2 { white-space: normal; } }
.ab-schluss p { margin: 16px auto 30px; max-width: 30em; font-size: 17px; }
.ab-schluss .ab-btns { justify-content: center; }

/* ---------- Eigener Fuss der Landingpage ---------- */
.ab-fuss { position: relative; overflow: hidden; padding: 40px 0 0; background: linear-gradient(180deg, #120a24 0, #0e0620 60%); color: var(--ab-text); font-size: 15px; }
.ab-fuss-karte { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 32px; padding: 28px 32px; border-radius: 22px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)); border: 1px solid rgba(217, 183, 255, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 40px 80px -50px rgba(0, 0, 0, .9); }
.ab-fuss-karte p { line-height: 1.55; }
.ab-fuss-aktionen { display: flex; gap: 10px; align-items: center; }
.ab-fuss-insta { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .16); color: #fff; font-weight: 600; transition: border-color .2s var(--ease), background .2s var(--ease); }
.ab-fuss-insta:hover { border-color: var(--accent-soft); background: rgba(255, 255, 255, .05); }
.ab-fuss-insta .ic { width: 18px; height: 18px; }
.ab-fuss-unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding: 22px 6px 0; font-size: 14px; color: rgba(207, 200, 221, .65); }
.ab-fuss-unten nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.ab-fuss-unten a, .ab-fuss-unten button { color: inherit; background: none; border: 0; font: inherit; cursor: pointer; padding: 0; }
.ab-fuss-unten a:hover, .ab-fuss-unten button:hover { color: #fff; }
.ab-fuss .marke-zeichen { width: 46px; height: 46px; }
.ab-fuss .marke-wort { height: 21px; width: auto; }
/* Grosser Schriftzug, mit Raster gefuellt, laeuft nach unten aus */
.ab-fuss-wort { margin: 18px auto -.22em; padding: 0 var(--gutter); max-width: var(--maxw); text-align: center; white-space: nowrap; user-select: none; pointer-events: none;
  font: 600 clamp(64px, 15vw, 220px)/1 var(--head); letter-spacing: -.05em;
  background: linear-gradient(180deg, rgba(14, 6, 32, 0) 15%, #0e0620 90%), linear-gradient(to right, rgba(192, 165, 251, .3) 1px, transparent 1px) 0 0 / 16px 16px, linear-gradient(to bottom, rgba(192, 165, 251, .3) 1px, transparent 1px) 0 0 / 16px 16px, #2c1660;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
@media (max-width: 959px) {
  .ab-fuss-karte { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 24px; }
  .ab-fuss-aktionen { flex-wrap: wrap; }
}

/* ---------- Fuss dunkel ---------- */
.seite-ai .fuss {
  --ink: #fff; --ink-2: var(--ab-text); --ink-3: rgba(207, 200, 221, .7); --paper: rgba(255, 255, 255, .06);
  --line: rgba(255, 255, 255, .07); --line-mid: rgba(255, 255, 255, .12);
  background: linear-gradient(180deg, #1a0c36 0%, #120926 100%); border-top: 0;
}
.seite-ai .fuss.kariert::before { background-image: linear-gradient(to right, rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, .06) 1px, transparent 1px); }
.seite-ai .fuss-hoch, .seite-ai .randnotiz { color: var(--accent-soft); }
.seite-ai .fuss-bereich > span { background: color-mix(in srgb, var(--farbe) 22%, #120b22); border-color: color-mix(in srgb, var(--farbe) 40%, #120b22); color: color-mix(in srgb, var(--farbe) 60%, #fff); }
.seite-ai .fuss-wortmarke {
  background:
    linear-gradient(180deg, rgba(18, 9, 38, 0) 20%, #120926 92%),
    linear-gradient(to right, rgba(192, 165, 251, .22) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(to bottom, rgba(192, 165, 251, .22) 1px, transparent 1px) 0 0 / 16px 16px,
    #2a1a4d;
  -webkit-background-clip: text; background-clip: text;
}

/* ---------- Mobil ---------- */
@media (max-width: 959px) {
  .ab-kurs .ab-kurs-punkt { display: none; }
  .ab-problem .wrap, .ab-ich .wrap, .ab-preis .wrap { grid-template-columns: minmax(0, 1fr); }
  .ab-kursliste { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ab-kurs:nth-child(even) { margin-top: 0; }
  .ab-kurs:last-child { grid-column: 1 / -1; }
  .ab-weg-linie { display: none; }
  .ab-foto { max-width: 420px; }
  .ab-faq .wrap { grid-template-columns: minmax(0, 1fr); }
  .ab-faq-kopf { position: static; }
}
@media (max-width: 599px) {
  .ab-kursliste, .ab-bento, .ab-belege { grid-template-columns: minmax(0, 1fr); }
  .ab-bento { gap: 30px; }
  .ab-pkarten { grid-template-columns: minmax(0, 1fr); }
  .ab-handy { width: 270px; }
  .ab-handy-buehne .ab-notiz { display: none; }
  .ab-player .ab-notiz, .ab-preiskarte .ab-notiz { position: static; display: block; margin: 0 0 10px; }
  .ab-player .ab-notiz svg, .ab-preiskarte .ab-notiz svg, .ab-foto .ab-notiz svg { display: none; }
  .ab-foto .ab-notiz { position: static; display: block; margin-top: 14px; }
  .ab-zelle-innen { padding: 24px 24px 90px; }
  .ab-zelle .ab-glas { width: 110px; right: 14px; bottom: -18px; }
  .ab-preis .ab-glas { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ab-schluss-tn, .strom .s1, .strom .s2, .ab-play::before, .ab-player { animation: none; }
  .ab-aussage .w { animation: none; opacity: 1; }
  .ab-weg-linie i { animation: none; transform: none; }
  .ab-blitz { animation: none; opacity: 0; }
  .ab-euro, .ab-band, .ab-par, .ab-lichtrand, .ab-kurs img, .ab-foto-glas, .ab-beleg-glas { animation: none; }
  .js .ab-blatt, .js .ab-k { opacity: 1; transform: none; transition: none; }
  .ab-handy { animation: none; }
}

/* ---------- Cookie-Banner nur auf dieser Seite: dunkler Glas-Look ----------
   Gleiche Funktion und Struktur wie der TN-Standard (Ablehnen gleich gross wie Annehmen). */
.seite-ai .tn-cc__card { background: linear-gradient(160deg, #23124a 0%, #1a0d38 100%) !important; border: 1px solid rgba(217, 183, 255, .18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 40px 100px -30px rgba(0, 0, 0, .9), 0 0 80px rgba(124, 77, 255, .25) !important; color: #CFC8DD; }
.seite-ai .tn-cc__icon { width: 64px !important; height: 64px !important; background: url("/assets/images/ai-builders/cookie-glas.webp") center / contain no-repeat !important; filter: drop-shadow(0 10px 16px rgba(10, 4, 30, .6)) drop-shadow(0 0 18px rgba(168, 85, 247, .55)); }
.seite-ai .tn-cc__icon svg { display: none; }
.seite-ai .tn-cc__title { color: #fff !important; font-family: var(--head); font-weight: 500 !important; }
.seite-ai .tn-cc__text, .seite-ai .tn-cc__desc { color: #CFC8DD !important; }
.seite-ai .tn-cc__text a, .seite-ai .tn-cc__foot a { color: #C0A5FB !important; }
.seite-ai .tn-cc__cat { background: rgba(255, 255, 255, .06) !important; border: 1px solid rgba(217, 183, 255, .12); }
.seite-ai .tn-cc__name { color: #fff !important; }
.seite-ai .tn-cc__row, .seite-ai .tn-cc__chev { color: #CFC8DD !important; }
.seite-ai .tn-cc__btn--nein { background: rgba(255, 255, 255, .06) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .22) !important; }
.seite-ai .tn-cc__btn--nein:hover { background: rgba(255, 255, 255, .12) !important; }
.seite-ai .tn-cc__btn--ja { background: #6C2BF2 !important; color: #fff !important; box-shadow: 0 12px 30px -10px rgba(108, 43, 242, .9); }
.seite-ai .tn-cc__btn--speichern { background: rgba(255, 255, 255, .06) !important; color: #fff !important; }
.seite-ai .tn-cc__foot { border-top-color: rgba(255, 255, 255, .1) !important; }
.seite-ai .tn-cc__sw span { background: rgba(255, 255, 255, .18) !important; }
.seite-ai .tn-cc__sw input:checked + span { background: #6C2BF2 !important; }
.seite-ai .tn-cc__sw input:disabled + span { background: rgba(192, 165, 251, .45) !important; }

/* AI-Builders-Wuerfel nur im Schluss-CTA (Hauptlogo bleibt Tobias Nase) */
.ab-schluss-tn--wuerfel { width: 130px; translate: -50% -66%; z-index: 3; }
.ab-schluss-karte .strom { z-index: 1; }
.ab-schluss-notiz { left: calc(50% + 150px); top: -78px; z-index: 3; font-size: clamp(26px, 2.4vw, 32px); }
.ab-schluss-notiz svg { right: 100%; top: 8px; width: 64px; height: 38px; margin-right: 10px; filter: drop-shadow(0 0 6px rgba(192, 165, 251, .6)); }
.ab-schluss-notiz path { stroke-width: 3; }
@media (max-width: 599px) { .ab-schluss-notiz { left: calc(50% + 70px); top: -40px; font-size: 22px; } .ab-schluss-notiz svg { width: 36px; } }

/* ---------- Stimmen: echte Screenshots als helle Karten auf dunklem Grund ---------- */
.ab-stimmen h2 { text-align: center; margin: 0 auto; }
.ab-stimmen .ab-lead { text-align: center; margin: 14px auto 0; }
.ab-stimmen-raster { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 22px; align-items: start; max-width: 1040px; margin: clamp(36px, 5vw, 56px) auto 0; }
.ab-stimmen-spalte { display: grid; gap: 22px; }
.ab-stimme { position: relative; margin: 0; padding: 10px; border-radius: 22px; background: rgba(255, 255, 255, .06); border: 1px solid var(--ab-rand); box-shadow: 0 40px 80px -40px rgba(5, 2, 15, .95), 0 0 60px rgba(124, 77, 255, .2); }
.ab-stimme img { display: block; width: 100%; height: auto; border-radius: 14px; background: #fff; }
.ab-stimme--hoch { transform: rotate(-1.5deg); }
.ab-stimmen-spalte .ab-stimme:first-child { transform: rotate(1deg); }
.ab-stimme .ab-notiz { left: -40px; bottom: -46px; z-index: 2; }
.ab-stimme .ab-notiz svg { left: 100%; top: -30px; transform: rotate(-30deg); }
.ab-stimme .ab-notiz--zwei { left: auto; right: -20px; bottom: -48px; }
.ab-stimme .ab-notiz--zwei svg { left: auto; right: 100%; transform: scaleX(-1) rotate(-30deg); }
@media (max-width: 759px) {
  .ab-stimmen-raster { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .ab-stimme, .ab-stimme--hoch, .ab-stimmen-spalte .ab-stimme:first-child { transform: none; }
  .ab-stimme .ab-notiz, .ab-stimme .ab-notiz--zwei { position: static; display: block; margin: 12px 0 0 4px; }
  .ab-stimme .ab-notiz svg { display: none; }
}