/* AI Solutions (ai-services.html DE+EN), 2026-09-30, Yusuf:
   Hero schwarz, Grün = Schild-Grün, Buttons grün statt Navy.
   Grün auf Weiß #1b5e20 (8,9:1), auf Schwarz #3f9a44 (dunkler, 2026-09-30). */
:root { --ai-green: #1b5e20; --ai-green-dark: #12461a; --ai-green-on-dark: #3f9a44; }

/* Hero kompakt (2026-09-30): statt vier Kacheln Sprungmarken zu den Sektionen, Welle unten als Band */
main > section.ai-leistungen-dark { padding: 72px 0 150px; background: #0a0a0c; } /* schwarz, bewusste Ausnahme von Navy+Weiß (Yusuf 16.10.2026) */
.ai-leistungen-dark .lead { max-width: 620px; }
.ai-hero-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.ai-hero-jump a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 18px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; color: #fff; font-size: 15px; font-weight: 600; text-decoration: none; background: rgba(10,10,12,.55); transition: border-color .2s, background .2s; }
.ai-hero-jump a:hover { border-color: #3f9a44; background: rgba(63,154,68,.14); }
.ai-hero-jump a:focus-visible { outline: 2px solid #3f9a44; outline-offset: 2px; }
#branchen { scroll-margin-top: 90px; }
@media (max-width: 680px) {
  main > section.ai-leistungen-dark { padding: 48px 0 110px; }
  .ai-hero-jump { margin-top: 24px; gap: 8px; }
  .ai-hero-jump a { font-size: 14px; padding: 0 14px; }
}

/* Überschriften-Akzente: inline im <head> der Seite (#3f9a44 / #1b5e20) */

/* Buttons: auf Weiß dunkles AI-Grün, auf Schwarz weiß */
body.sub-ai:not(.is-home) main .btn-primary { background: var(--ai-green) !important; border-color: var(--ai-green) !important; color: #fff !important; }
body.sub-ai:not(.is-home) main .btn-primary:hover { background: var(--ai-green-dark) !important; border-color: var(--ai-green-dark) !important; }
body.sub-ai:not(.is-home) main .ai-leistungen-dark .btn-primary { background: #fff !important; border-color: #fff !important; color: #0a0a0c !important; }
body.sub-ai:not(.is-home) main .btn-ghost { color: var(--ai-green); border-color: var(--ai-green); }


/* =====================================================================
   2026-09-30 (Yusuf): Bausteine + Branchen .aib-*/.aix-*, AI-Test-Grafik .ata-* / .ata2-*,
   Eigene Modelle .aim-* (+ css/gad-flow.css). Bilder images/ai/neu-2026-09-30/.
   ===================================================================== */
/* Inhalts-Sektionen liegen als Kacheln (.gad-sheet, site-navy.css) auf hellem Grund */
main > section.ai-sol-section, main > section#ai-test, main > section.aim-section { background: #fff; padding: 88px 0; scroll-margin-top: 70px; }

/* --- #ai-solutions: sechs Bausteine (.aib-*) + Branchen-Tabs (.aix-*), 2026-09-30 v2 --- */
.aib-grid { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.aib-card { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; background: #fff; border: 1px solid #e3e6e9; border-radius: 18px; transition: border-color .25s, box-shadow .25s; }
@media (hover: hover) { .aib-card:hover { border-color: #b9d3bc; box-shadow: 0 14px 34px rgba(20, 40, 30, .08); } }
.aib-gfx { display: block; width: 100%; height: auto; box-sizing: border-box; padding: 12px 16px; margin-bottom: 8px; background: #f5f7f5; border-radius: 12px; overflow: visible; }
.aib-box { fill: #fff; stroke: #d3dad5; stroke-width: 1.4; }
.aib-box--end { fill: #eaf3eb; stroke: #1b5e20; }
.aib-ico { fill: none; stroke: #1b5e20; stroke-linecap: round; stroke-linejoin: round; }
.aib-ico * { stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.aib-base { fill: none; stroke: #dfe3e6; stroke-width: 2; }
.aib-dash { fill: none; stroke: #3f9a44; stroke-width: 1.6; stroke-dasharray: 3 7; stroke-linecap: round; }
.aib-dot { fill: #1b5e20; opacity: 0; }
.aib-ring { fill: none; stroke: #2e7d32; stroke-width: 1.6; opacity: 0; transform-box: fill-box; transform-origin: center; }
.aib-card h3 { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: 18px; line-height: 1.3; color: #0b1f2a; letter-spacing: -.01em; }
.aib-n { font-size: 12px; font-weight: 700; color: #1b5e20; font-variant-numeric: tabular-nums; }
.aib-card p { margin: 0; font-size: 14.5px; line-height: 1.55; color: #4a5560; }
.aib-card .aib-flow { font-size: 13px; font-weight: 600; color: #1b5e20; }
.aib-card .aib-tech { margin-top: auto; padding-top: 10px; border-top: 1px solid #eceef0; font-size: 13px; color: #5f6673; }
.aib-tech b { color: #1d1d1f; }
@media (prefers-reduced-motion: no-preference) {
  .aib-dash { animation: aibDash 1.1s linear infinite; }
  .aib-dot { animation: aibDot 2.4s ease-in-out infinite; }
  .aib-dot2 { animation-delay: 1.2s; }
  .aib-ring { animation: aibRing 2.4s ease-out infinite 1s; }
  .aib-grid:not(.is-in) .aib-gfx * { animation-play-state: paused; }
}
@keyframes aibDash { to { stroke-dashoffset: -20; } }
@keyframes aibDot { 0% { opacity: 0; transform: none; } 15% { opacity: 1; } 70% { opacity: 1; transform: translateX(36px); } 85%, 100% { opacity: 0; transform: translateX(36px); } }
@keyframes aibRing { 0% { opacity: .7; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.3); } }

.aix { margin-top: 72px; }
.aix-h { margin: 0 0 8px; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.2; color: #0b1f2a; letter-spacing: -.015em; }
.aix-lead { margin: 0; max-width: 640px; font-size: 16px; line-height: 1.55; color: #4a5560; }
.aix-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 18px; }
.aix-tabs[hidden], .aix-panel[hidden] { display: none; }
.aix-tabs [role="tab"] { min-height: 44px; padding: 0 18px; border: 1px solid #d3dad5; border-radius: 999px; background: #fff; color: #1d1d1f; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.aix-tabs [role="tab"]:hover { border-color: #1b5e20; }
.aix-tabs [role="tab"][aria-selected="true"] { background: #1b5e20; border-color: #1b5e20; color: #fff; }
.aix-tabs [role="tab"]:focus-visible, .aix-panel:focus-visible { outline: 2px solid #1b5e20; outline-offset: 2px; }
.aix-panel { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 8px 32px; align-items: start; padding: 22px; background: #fff; border: 1px solid #e3e6e9; border-radius: 20px; }
.aix:not(.aix--tabs) .aix-panel { margin-top: 16px; }
.aix-media { position: relative; margin: 0; border-radius: 14px; overflow: hidden; background: #eef0ee; }
.aix-media img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.aix-media::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(to top, rgba(8, 16, 12, .78), transparent); }
.aix-name { position: absolute; left: 14px; bottom: 12px; z-index: 1; color: #fff; font-size: 17px; font-weight: 700; }
.aix-list { list-style: none; margin: 0; padding: 0; counter-reset: aix; }
.aix-list li { position: relative; padding: 14px 0 14px 46px; border-bottom: 1px solid #eceef0; counter-increment: aix; }
.aix-list li:first-child { padding-top: 2px; }
.aix-list li:first-child::before { top: 0; }
.aix-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.aix-list li::before { content: counter(aix); position: absolute; left: 0; top: 12px; width: 30px; height: 30px; border-radius: 9px; background: #eaf3eb; color: #1b5e20; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.aix-list h4 { margin: 0 0 4px; font-size: 17.5px; line-height: 1.3; color: #0b1f2a; }
.aix-list p { margin: 0; font-size: 14.5px; line-height: 1.55; color: #4a5560; }
.aix-list .aix-used { margin-top: 6px; font-size: 13px; color: #5f6673; }
.aix-used span { font-weight: 700; color: #1b5e20; }
.aix-more { grid-column: 2; margin: 10px 0 0; padding: 12px 16px; border-radius: 12px; background: #eef4ef; color: #12461a; font-size: 14.5px; font-weight: 600; line-height: 1.45; }
.aix-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; margin-top: 28px; padding: 26px 30px; border-radius: 20px; background: #eef4ef; }
.aix-cta h3 { margin: 0 0 4px; font-size: 20px; color: #0b1f2a; }
.aix-cta p { margin: 0; max-width: 560px; font-size: 15px; line-height: 1.5; color: #4a5560; }
.aix-cta-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; flex: 0 0 auto; }
.aix-cta .btn-primary { min-height: 48px; display: inline-flex; align-items: center; }
.aix-cta-link { min-height: 44px; display: inline-flex; align-items: center; color: #1b5e20; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.aix-cta-link:hover { color: #12461a; }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .aib-grid:not(.is-in) .aib-card, .aix:not(.is-in) { opacity: 0; translate: 0 18px; }
  .aib-grid.is-in .aib-card, .aix.is-in { transition: opacity .6s ease, translate .6s cubic-bezier(.16,1,.3,1), border-color .25s, box-shadow .25s; }
  .aib-grid.is-in .aib-card:nth-child(2) { transition-delay: .06s; }
  .aib-grid.is-in .aib-card:nth-child(3) { transition-delay: .12s; }
  .aib-grid.is-in .aib-card:nth-child(4) { transition-delay: .18s; }
  .aib-grid.is-in .aib-card:nth-child(5) { transition-delay: .24s; }
  .aib-grid.is-in .aib-card:nth-child(6) { transition-delay: .30s; }
}
@media (max-width: 1024px) { .aib-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .aix-panel { grid-template-columns: 220px minmax(0, 1fr); } }
@media (max-width: 680px) {
  main > section.ai-sol-section, main > section#ai-test, main > section.aim-section { padding: 56px 0; }
  .aib-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 28px; }
  .aib-gfx { padding: 8px 44px; }
  .aix { margin-top: 48px; }
  .aix-panel { grid-template-columns: 1fr; gap: 16px; padding: 14px 16px 18px; }
  .aix-media img { aspect-ratio: 5 / 2; }
  .aix-more { grid-column: 1; }
  .aix-cta { flex-direction: column; align-items: flex-start; padding: 22px 20px; }
}

/* --- AI-Test-Grafik (Stil wie RedMentis #wie, hell) --- */
.ata-figure { margin: 20px auto 0; max-width: 1000px; }
.ata-viz { display: block; width: 100%; height: auto; overflow: visible; font-family: inherit; }
.ata-viz--m { display: none; max-width: 420px; margin: 0 auto; }
@media (max-width: 700px) { .ata-viz--d { display: none; } .ata-viz--m { display: block; } }
.ata-box { fill: #f4f6f5; stroke: #d3dad5; stroke-width: 1.4; }
.ata-box--start { fill: #fff; stroke: #9aa3ad; }
.ata-box--end { fill: #eaf3eb; stroke: #1b5e20; }
.ata-ico { fill: none; stroke: #1b5e20; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ata-box--start + .ata-ico { stroke: #4a5560; }
.ata-ico--w { stroke: #fff; }
.ata-hit { fill: none; stroke: #2e7d32; stroke-width: 2.5; opacity: 0; }
.ata-lbl { font-size: 13px; font-weight: 600; fill: #1d1d1f; }
.ata-cap { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; fill: #5f6673; }
.ata-name { font-size: 14px; font-weight: 800; fill: #0b1f2a; letter-spacing: .02em; }
.ata-sub { font-size: 11.5px; font-weight: 500; fill: #5f6673; }
.ata-base { stroke: #dfe3e6; stroke-width: 2; fill: none; }
.ata-prog { stroke: #2e7d32; stroke-width: 3; fill: none; stroke-linecap: round; }
.ata-beam { stroke: #8fb996; stroke-width: 1.6; stroke-dasharray: 3 7; fill: none; stroke-linecap: round; }
.ata-pulse { fill: none; stroke: #2e7d32; stroke-width: 1.4; opacity: 0; }
.ata-orbit-ring { fill: none; stroke: #c9d3cc; stroke-width: 1.2; stroke-dasharray: 3 4; }
.ata-orbit circle { fill: #3f9a44; }
.ata-ok circle { fill: #2e7d32; stroke: #fff; stroke-width: 2.5; }
.ata-ok path { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ata-pill rect { fill: #eaf3eb; stroke: #b9d3bc; }
.ata-pill circle { fill: #1b5e20; }
.ata-pill path { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ata-pilltxt { font-size: 13px; font-weight: 700; fill: #12461a; }
.ata-token-core { fill: #1b5e20; stroke: #fff; stroke-width: 2; }
.ata-token-ring { fill: none; stroke: rgba(46,125,50,.45); stroke-width: 2; }
.ata-ok, .ata-pill, .ata-pulse, .ata-token { transform-box: fill-box; transform-origin: center; }
/* Standbild (auch bei reduzierter Bewegung): alle Prüfungen bestanden, Pille sichtbar */
.ata-token { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .ata-prog { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ataDraw 10s linear infinite; }
  .ata-token { animation: ataTokX 10s linear infinite; }
  .ata-viz--m .ata-token { animation-name: ataTokY; }
  .ata-hit { animation: ataHit 10s linear infinite; animation-delay: var(--d); }
  .ata-ok1 { animation: ataOk1 10s cubic-bezier(.16,1,.3,1) infinite; }
  .ata-ok2 { animation: ataOk2 10s cubic-bezier(.16,1,.3,1) infinite; }
  .ata-ok3 { animation: ataOk3 10s cubic-bezier(.16,1,.3,1) infinite; }
  .ata-ok4 { animation: ataOk4 10s cubic-bezier(.16,1,.3,1) infinite; }
  .ata-pill { animation: ataPill 10s ease-out infinite; }
  .ata-beam { animation: ataBeam 1.2s linear infinite; }
  .ata-pulse { animation: ataPulse 3.2s ease-out infinite; }
  .ata-orbit { animation: ataSpin 14s linear infinite; transform-box: view-box; }
}
@keyframes ataDraw { 0%, 4% { stroke-dashoffset: 1; } 56% { stroke-dashoffset: 0; } 94% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes ataTokX { 0% { opacity: 0; transform: none; } 4% { opacity: 1; transform: none; } 56% { opacity: 1; transform: translateX(var(--dist)); } 62%, 100% { opacity: 0; transform: translateX(var(--dist)); } }
@keyframes ataTokY { 0% { opacity: 0; transform: none; } 4% { opacity: 1; transform: none; } 56% { opacity: 1; transform: translateY(var(--dist)); } 62%, 100% { opacity: 0; transform: translateY(var(--dist)); } }
@keyframes ataHit { 0% { opacity: 0; } 2% { opacity: 1; } 9%, 100% { opacity: 0; } }
/* Haken erscheinen, wenn der Punkt die Station erreicht (14 / 25 / 35 / 46 % von 10 s) */
@keyframes ataOk1 { 0%, 14% { opacity: 0; transform: scale(.3); } 17% { opacity: 1; transform: scale(1.15); } 19%, 94% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
@keyframes ataOk2 { 0%, 25% { opacity: 0; transform: scale(.3); } 28% { opacity: 1; transform: scale(1.15); } 30%, 94% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
@keyframes ataOk3 { 0%, 35% { opacity: 0; transform: scale(.3); } 38% { opacity: 1; transform: scale(1.15); } 40%, 94% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
@keyframes ataOk4 { 0%, 46% { opacity: 0; transform: scale(.3); } 49% { opacity: 1; transform: scale(1.15); } 51%, 94% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
@keyframes ataPill { 0%, 58% { opacity: 0; transform: translateY(6px); } 64% { opacity: 1; transform: none; } 94% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes ataBeam { to { stroke-dashoffset: -20; } }
@keyframes ataPulse { 0% { opacity: .8; transform: scale(1); } 60%, 100% { opacity: 0; transform: scale(1.7); } }
@keyframes ataSpin { to { transform: rotate(360deg); } }

.ata2-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 44px; }
.ata2-card { padding: 22px 22px 20px; border: 1px solid #e3e6e9; border-radius: 16px; background: #fff; display: flex; flex-direction: column; gap: 10px; }
.ata2-ico, .aim-ico { width: 42px; height: 42px; border-radius: 12px; background: #eef4ef; color: var(--ai-green); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.ata2-ico svg, .aim-ico svg { width: 22px; height: 22px; }
.ata2-card h3 { font-size: 18px; margin: 4px 0 0; color: #0b1f2a; }
.ata2-card p { margin: 0; font-size: 14.5px; line-height: 1.55; color: #4a5560; }
.ata2-card .ata2-res { margin-top: auto; padding-top: 10px; border-top: 1px solid #eceef0; color: #1d1d1f; font-weight: 600; }
.ata2-res b { color: var(--ai-green); }
@media (max-width: 900px) { .ata2-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 32px; } }

/* --- Eigene Modelle --- */
.aim-top { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.aim-text .lead { margin-bottom: 18px; }
.aim-note { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 16px; border-radius: 12px; background: #eef4ef; color: #12461a; font-size: 14.5px; font-weight: 600; line-height: 1.45; }
.aim-note svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; }
.aim-img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 20px; box-shadow: 0 24px 60px rgba(20, 40, 30, .12); }
.aim-ex-h { margin: 56px 0 18px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #5f6673; }
.aim-ex { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.aim-ex li { display: flex; gap: 14px; align-items: flex-start; padding: 20px; border: 1px solid #e3e6e9; border-radius: 16px; }
.aim-ex h4 { margin: 0 0 6px; font-size: 16.5px; color: #0b1f2a; }
.aim-ex p { margin: 0; font-size: 14px; line-height: 1.55; color: #4a5560; }
.aim-flow { --gf-a: #2e7d32; --gf-ok: #1b5e20; --gf-num: #1b5e20; --gf-line: #e1e6e2; margin-top: 56px; }
.aim-flow .gf-fill { background: linear-gradient(90deg, #8fb996, #1b5e20); }
@media (max-width: 900px) {
  .aim-top { grid-template-columns: 1fr; gap: 28px; }
  .aim-ex { grid-template-columns: 1fr; gap: 12px; }
  .aim-ex-h { margin-top: 40px; }
  .aim-flow { margin-top: 40px; }
}
.ata-name--m { font-size: 12px; }

/* Handy 2026-10-01: Sprung-Chips und Branchen-Reiter als eine Wischzeile statt drei Zeilen */
@media (max-width: 680px) {
  .ai-hero-jump, .aix-tabs {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--mb, 24px)); padding: 4px var(--mb, 24px); scroll-padding-inline: var(--mb, 24px);
  }
  .ai-hero-jump::-webkit-scrollbar, .aix-tabs::-webkit-scrollbar { display: none; }
  .ai-hero-jump > a, .aix-tabs > [role="tab"] { flex: 0 0 auto; white-space: nowrap; }
}

/* =====================================================================
   Handy 2026-10-02 (Mobil-UX Runde 2)
   ===================================================================== */
@media (hover: none) {
  body.sub-ai .ai-orbit-side .ai-orbit-pill:hover { transform: none; }
}
@media (max-width: 680px) {
  /* Bausteine-Wischreihe: keine Einblend-Verschiebung in der Reihe (Karten sprangen beim Wischen),
     Grafik volle Kartenbreite, Text lesbar */
  .aib-grid.mswipe .aib-card { opacity: 1 !important; translate: none !important; transition: none !important; }
  .aib-gfx { padding: 6px 28px; }
  .aib-card { padding: 16px 18px 18px; }
  .aib-card p { font-size: 15px; }
  .aib-card .aib-flow { font-size: 13.5px; }
  .aib-n { font-size: 13px; }
  .ata-viz--m .ata-cap { font-size: 12px; }
  .ata2-card p { font-size: 15px; }
  .aim-ex p { font-size: 15px; }
  .aim-cta .btn { width: 100%; justify-content: center; }
}