/*
 * AI/Automatisierungen-Leistungsseite — portiert aus dem Mockup
 * ~/nonoise-mockups/ai-automatisierungen-v1.html.
 *
 * ABWEICHUNG von der Projektkonvention „ein Pattern = eine CSS-Datei" (Abschnitt 8):
 * genau wie bei SEO/GEO, Tracking & Analytics und CRO bedient diese eine Datei alle
 * Patterns der Seite, weil sie sich ein durchgehendes Gerüst teilen (.section, .wrap,
 * .section-head, .kicker, .btn, die Farb-Tokens).
 *
 * ALLE Regeln sind unter .nn-ai gescopt. Die Klassennamen aus dem Mockup (.section, .wrap,
 * .card …) sind bewusst generisch geblieben, damit ein Abgleich mit dem Mockup möglich
 * bleibt — sie gelten aber ausschließlich innerhalb von .nn-ai und können deshalb nicht in
 * andere Patterns lecken (siehe Scoping-Konvention in CLAUDE.md).
 *
 * Light/Dark folgt der Theme-Konvention: Hell unbedingt, Dunkel als einzige bewachte
 * Variante (siehe Kommentarblock in assets/css/nav.css).
 *
 * IDs, die von assets/js/ai-automatisierungen.js angesprochen werden, sind ai-* -präfigiert
 * (aiCheckList etc., analog zu seoCheck-/trackCheck-/croCheck-IDs): alle JS-Dateien laden
 * site-weit auf jeder Seite, gleichlautende IDs auf einer anderen Leistungsseite würden
 * sonst von zwei Skripten gleichzeitig bedient (siehe Stolperstein in CLAUDE.md Abschnitt 8).
 *
 * Nav-, Footer- und Theme-Switcher-CSS des Mockups wurde NICHT übernommen — dafür sorgen
 * die echten Template Parts (parts/header.html, parts/footer.html). Die .cta-Sektion des
 * Mockups wurde ebenfalls nicht übernommen — die Seite nutzt stattdessen das echte,
 * theme-weite .nn-cta-band (siehe patterns/ai-automatisierungen-cta.php).
 *
 * Große Screens (ab ca. 1900px, z. B. 2560×1440): direkt von Anfang an mit angehobenen
 * clamp()-Obergrenzen gebaut (nicht erst nachträglich wie bei den ersten drei
 * Leistungsseiten) — Werte 1:1 von der bereits fertig abgestimmten CRO-Seite übernommen,
 * da beide Seiten dieselbe Grundstruktur (.wrap 1760px, svc, steps, pairs, proof-band,
 * check, faq) und dasselbe Ausgangs-clamp()-Set aus dem Mockup teilen. Der Hero selbst
 * ist seit 2026-09-01 kein Teil dieser gemeinsamen Grundstruktur mehr — er wurde auf die
 * Poster-Architektur von SEO/GEO/CRO/Tracking & Analytics umgestellt, siehe eigener
 * Kommentar am Hero-Abschnitt weiter unten. Die DATENFLUSS/„Verbunden"-Regler-Sektion
 * übernimmt die bereits abgestimmten Werte von assets/css/tracking-analytics.css (dort
 * dasselbe Bauteil unter anderem Namen). Die Ankernavigation nutzt bewusst deutlich
 * größere vw-Koeffizienten als der reine Text/Abstand-Faktor woanders — ein zu kleiner
 * Koeffizient (wie ursprünglich bei CRO) bleibt bei kleinen Basiswerten bis weit über
 * 2560px wirkungslos, siehe CLAUDE.md Abschnitt 8.
 */


/* ==========================================================================
   TOKENS
   ========================================================================== */
.nn-ai {
  --jade-light:#b7e5ba;
  --jade-mid:#5ca87c;
  --jade:#288760;
  --jade-dark:#1a5140;

  --bg:#ffffff;
  --paper:#f7f9f7;
  --ink:#12211a;
  --ink-muted:#5c6d64;
  --line:#dfe8e2;
  --card:#ffffff;
  --grain-blend:overlay;

  --jade-accent:#288760;

  --serp-chip:#eef3ef;
  --shadow:0 1px 2px rgba(18,33,26,.04), 0 8px 24px rgba(18,33,26,.06);
  /* gestrichelte Leitlinie der Verbunden-Grafik, wird im Canvas ausgelesen */
  --flow-line:rgba(18,33,26,.20);

  /* Fallback-Höhe der fixierten Theme-Nav (.nn-nav), an der die Ankerleiste
     klebt. assets/js/ai-automatisierungen.js misst die echte Höhe und überschreibt
     den Wert. */
  --nav-h:97px;
}
@media (prefers-color-scheme:dark) {

  html:not([data-theme="light"]) .nn-ai {
    --bg:#0b0c0c;
    --paper:#0f1512;
    --ink:#e7e9ec;
    --ink-muted:#b0b5bf;
    --line:#22362c;
    --card:#111815;
    --jade-accent:#5ca87c;
    --serp-chip:#16211c;
    --grain-blend:soft-light;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
    --flow-line:rgba(231,233,236,.22);
  }

}
html[data-theme="dark"] .nn-ai {
  --bg:#0b0c0c;
  --paper:#0f1512;
  --ink:#e7e9ec;
  --ink-muted:#b0b5bf;
  --line:#22362c;
  --card:#111815;
  --jade-accent:#5ca87c;
  --serp-chip:#16211c;
  --grain-blend:soft-light;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --flow-line:rgba(231,233,236,.22);
}

.nn-ai, .nn-ai *, .nn-ai *::before, .nn-ai *::after {box-sizing:border-box}



/* 2026-09-02 (Nutzer-Wunsch, Seitenangleichung): 2550px statt 2200px — 1:1 der SEO/GEO-Wert,
   damit alle Leistungsseiten auf großen Screens (2560×1440) gleich viel Fläche nutzen. */
.nn-ai .wrap {width:min(2550px,100% - clamp(2rem,10vw,13rem));margin-inline:auto}

.nn-ai h1, .nn-ai h2, .nn-ai h3 {font-weight:900;letter-spacing:-.03em;line-height:1.03;margin:0}
.nn-ai h1 {font-size:clamp(2.4rem,6.2vw,7.25rem)}
/* Zweizeilige H1 mit <br> plus die flache clamp()-Untergrenze (2.4rem) sind auf sehr
   schmalen Screens (~375px) zusammen zu breit — der zweite <br>-Textblock bricht dann
   selbst nochmal um, macht 4 statt 2 Zeilen. Nur hier verkleinert, bleibt bei max. 3
   Zeilen (siehe Analogregel in cro.css/leistungen-hub.css). */
@media (max-width:700px) {
  .nn-ai h1 {font-size:1.75rem}
}
/* overflow-wrap:break-word als Sicherheitsnetz: die Selbst-Check-Überschrift "Wie
   automatisierungsbereit bist du?" enthält mit "automatisierungsbereit" (23 Zeichen) ein
   einzelnes, nicht trennbares Wort, das bei 375px Breite und der 2rem-Mindestgröße nicht
   in die Spalte passt (Wrap ca. 338px, Wort ca. 435px) — ohne Bruchstelle lief die
   Überschrift dadurch seitlich über und zog per Kettenreaktion die ganze Seite (inkl.
   fixierter Hauptnav) auf ca. 454px Layout-Viewport-Breite: der rechts positionierte
   Kontakt-Button der Hauptnav landete dadurch jenseits der echten 375px-Bildschirmkante
   und wirkte "abgeschnitten" (Nutzer-Wunsch, Screenshot-Beleg). break-word bricht das
   Wort jetzt notfalls mitten durch statt die Seite zu sprengen — greift nur dann, wenn
   eine Überschrift tatsächlich nicht passt, ändert an allen anderen (passenden)
   Überschriften nichts. */
.nn-ai h2 {font-size:clamp(2rem,4.5vw,4.75rem);text-transform:uppercase;overflow-wrap:break-word}
.nn-ai h3 {font-size:clamp(1.15rem,2vw,2.1rem);letter-spacing:-.02em}
.nn-ai p {margin:0}

.nn-ai .kicker {
  font-size:clamp(.8rem,.45vw,1rem);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--jade-accent);margin:0;
}
.nn-ai .lede {font-size:clamp(1rem,1.35vw,1.5rem);color:var(--ink-muted);max-width:62ch;text-wrap:pretty}
.nn-ai .lede--wide {max-width:70ch}

.nn-ai .section {padding:clamp(4.5rem,11vh,12rem) 0;position:relative}
.nn-ai .section--paper {background:var(--paper)}
.nn-ai .section-head {margin-bottom:clamp(2.25rem,5vh,5rem)}
.nn-ai .section-head .kicker {margin-bottom:.75rem}
.nn-ai .section-head p.lede {margin-top:1.25rem}

/* text-align:center zusätzlich zu align-items:center: Letzteres zentriert nur die eine
   Flex-Box (Icon+Text zusammen) vertikal — bricht der Text bei langen Labels auf zwei
   Zeilen um, blieb die zweite Zeile ohne text-align links hängen statt mittig unter der
   ersten zu stehen. */
.nn-ai .btn {
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  background:var(--jade);color:#06110c;
  font-weight:700;font-size:1rem;text-align:center;
  padding:.85rem 1.6rem;border-radius:999px;
  text-decoration:none;border:0;cursor:pointer;
  font-family:inherit;
}
.nn-ai .btn:hover, .nn-ai .btn:focus-visible {background:#2f9c6f;transition:background .2s ease}
.nn-ai .btn--ghost {background:transparent;color:var(--ink);border:1px solid var(--line)}
.nn-ai .btn--ghost:hover, .nn-ai .btn--ghost:focus-visible {background:transparent;border-color:var(--jade-accent);color:var(--jade-accent);transition:color .2s ease,border-color .2s ease}

/* ==========================================================================
   BREADCRUMB
   ========================================================================== */
/* Abstand Breadcrumb→H1 als clamp() statt fixer 1.5rem: die vier vertikalen Abstaende im
   First View (Breadcrumb→H1→Lede→Buttons→Button-Notiz) waren durchgehend feste rem-Werte,
   waehrend H1/Lede selbst per clamp() mitwuchsen — auf 2560px stand dadurch sehr grosse
   Schrift in unveraendert engen Abstaenden. Alle vier wachsen jetzt mit, mit Koeffizienten,
   die ihren Minimalwert erst ab ca. 1300-1400px ueberschreiten (darunter aendert sich also
   praktisch nichts, siehe Koeffizienten-Stolperstein CLAUDE.md Abschnitt 8). */
.nn-ai .crumbs {
  display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;
  list-style:none;margin:0 0 clamp(1.5rem,1.9vw,3.5rem);padding:0;
  font-size:.85rem;color:var(--ink-muted);
}
.nn-ai .crumbs li {display:flex;align-items:center;gap:.45rem}
.nn-ai .crumbs a {color:var(--ink-muted);text-decoration:none}
.nn-ai .crumbs a:hover, .nn-ai .crumbs a:focus-visible {color:var(--jade-accent);transition:color .2s ease}
.nn-ai .crumbs [aria-current="page"] {color:var(--ink);font-weight:600}
.nn-ai .crumbs__sep {opacity:.45}

/* ==========================================================================
   ANKERNAVIGATION
   ========================================================================== */
.nn-ai .anchors {
  position:sticky;top:var(--nav-h);z-index:30;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nn-ai .anchors.is-stuck {
  background:var(--bg);
}
.nn-ai .anchors__inner {
  display:flex;gap:.3rem;padding:clamp(.55rem,.5vw,.8rem) 0;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  scroll-snap-type:x proximity;
}
.nn-ai .anchors__inner::-webkit-scrollbar {display:none}
.nn-ai .anchors a {
  flex:none;scroll-snap-align:start;
  display:inline-flex;align-items:center;gap:.5rem;
  padding:clamp(.45rem,.5vw,.65rem) clamp(.9rem,.75vw,1.25rem);border-radius:999px;
  border:1px solid transparent;
  font-size:clamp(.87rem,.65vw,1.05rem);font-weight:700;white-space:nowrap;
  color:var(--ink-muted);text-decoration:none;
}
.nn-ai .anchors a:hover, .nn-ai .anchors a:focus-visible {color:var(--jade-accent);transition:color .2s ease}
.nn-ai .anchors a b {
  font-weight:900;font-size:clamp(.72rem,.58vw,.88rem);color:var(--jade-accent);
  font-variant-numeric:tabular-nums;
}
.nn-ai .anchors a.is-active {
  color:var(--ink);background:var(--serp-chip);border-color:var(--line);
}
.nn-ai .anchors__bar {height:2px;background:var(--jade);width:0;transition:width .15s linear}

/* ==========================================================================
   HERO — TYPOGRAFISCHES POSTER
   2026-09-01: auf dieselbe Architektur wie SEO/GEO, CRO und Tracking & Analytics
   umgestellt (Nutzer-Wunsch "genau so gestalten wie SEO/GEO") — kein Canvas-Farbfeld,
   keine dreispaltige Grid/Box-Optik mehr. Ausführliche Begründung der Komposition steht
   im Kopf von patterns/seo-geo-hero.php, die Rechnung zur eigenen (gegenüber CRO nochmal
   etwas konservativeren) H1-Formel im Kopf von patterns/ai-automatisierungen-hero.php.
   ========================================================================== */
.nn-ai .hero {
  position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:center;overflow:hidden;isolation:isolate;
  padding:calc(var(--nav-h) + clamp(2rem,4vh,4.64rem)) 0 clamp(2rem,4vh,4.64rem);
}
/* Kurze Browserfenster (z. B. ein nicht-maximiertes Fenster auf einem 13"-MacBook,
   effektive Höhe oft nur 700-800px): dieselbe Regel wie in assets/css/cro.css. */
@media (max-height:820px) {
  .nn-ai .hero {padding:calc(var(--nav-h) + 1.25rem) 0 1.5rem}
}
.nn-ai .hero__atmo {
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(52% 48% at 80% 40%, color-mix(in srgb,var(--jade) 34%,transparent) 0%, transparent 70%),
    radial-gradient(46% 40% at 16% 84%, color-mix(in srgb,var(--jade-mid) 30%,transparent) 0%, transparent 70%),
    radial-gradient(36% 32% at 12% 8%, color-mix(in srgb,var(--jade-light) 28%,transparent) 0%, transparent 72%),
    var(--bg);
}
.nn-ai .hero__grain {position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:.18;mix-blend-mode:var(--grain-blend);image-rendering:pixelated;pointer-events:none}
.nn-ai .hero .wrap {position:relative;z-index:3;margin-top:0}

.nn-ai .hero__top {
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.75rem 1.5rem;
}
.nn-ai .hero__top .crumbs {margin-bottom:0}

/* Zeile 1 ("KI-Automatisierung, die", 24 Zeichen) ist länger als CROs bislang längste
   Poster-Zeile ("Anfragen bleiben aus.", 21 Zeichen) — Koeffizient/Deckel deshalb noch
   etwas niedriger als dort (7vw/7rem statt 8vw/8rem), sonst dieselbe Logik: hält beide
   Zeilen bis weit in den Tablet-/Laptop-Bereich einzeilig, die eigene
   min-width:1600px-Regel weiter unten übernimmt nahtlos für große Screens. */
.nn-ai .hero__poster-heading {
  margin:clamp(1rem,2.5vh,2rem) 0 0;
  font-size:clamp(2.4rem,7vw,7rem);font-weight:900;
  letter-spacing:-.045em;line-height:.92;
}
.nn-ai .hero__line {display:block;max-width:100%;overflow-wrap:break-word}
.nn-ai .hero__line--a {text-align:left;color:var(--ink)}
/* Zeile 2 rechtsbündig UND in --jade-accent: erfüllt die Nutzer-Vorgabe "entlastet soll
   grün geschrieben sein" direkt über die Zeilenfarbe, ohne eine zusätzliche Inline-Span-
   Färbung mitten im Satz zu brauchen. */
.nn-ai .hero__line--b {
  text-align:right;color:var(--jade-accent);
  margin-top:clamp(.2rem,1vw,.7rem);
}
@media (max-width:900px) {
  .nn-ai .hero__poster-heading {font-size:clamp(2.2rem,6.8vw,4rem)}
}
/* 2026-09-01 (Nutzer-Wunsch): Headline soll auf Mobile zweizeilig stehen ("KI‑Automatisierung,
   die" komplett auf einer Zeile, "wirklich entlastet." auf der zweiten) statt wie zuvor
   dreizeilig (Zeile 1 brach selbst nochmal um) — "Schrift darf dafür gerne etwas kleiner
   sein" (Nutzer-Vorgabe). Eigene, additive Formel (A + B·vw statt reinem B·vw) statt der
   SEO/GEO-üblichen 10.5vw/2.6rem-Mobile-Formel: "KI‑Automatisierung, die" (mit geschütztem
   Bindestrich, siehe Docblock in patterns/ai-automatisierungen-hero.php) ist als GANZE
   Zeile bei 375px Breite und der SEO/GEO-Größe (39.4px) rechnerisch ca. 440px breit, der
   Wrap hat dort aber nur ca. 338px Platz. Auf ca. 27px bei 375px gesenkt (mit spürbarer
   Reserve, bei der die ganze Zeile bequem in die 338px passt), UND so kalibriert, dass die
   Formel bei genau 640px nahtlos an den 6.8vw-Wert der 900px-Stufe direkt darüber
   anschließt (beide Stufen ergeben bei 640px ca. 43.5px) — kein Sprung am Breakpoint. */
@media (max-width:640px) {
  .nn-ai .hero__poster-heading {font-size:clamp(1.4rem,.225rem + 6.23vw,2.72rem)}
  .nn-ai .hero__line--b {text-align:left}
}
/* Große Screens (ab 1600px, z. B. 2560×1440): dieselbe Anhebung wie bei CRO, siehe
   dortiger Kommentar in assets/css/cro.css — 6.2vw statt CROs 7vw, proportional zum
   niedrigeren Basis-Deckel oben, wächst bis 10rem (160px) statt CROs 11.5rem weiter. */
@media (min-width:1600px) {
  .nn-ai .hero__poster-heading {font-size:clamp(7rem,6.2vw,10rem)}
}

.nn-ai .hero__bottom {
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;
  gap:clamp(1.5rem,4vw,3rem);
  margin-top:clamp(1.5rem,3.5vh,3.5rem);
}
/* 46ch statt CROs kompakteren 34ch: die Lede ist hier (Nutzer-Wunsch) wieder der volle,
   ungekürzte Text (~350 statt ~185 Zeichen) — bei CROs schmalerer 34ch-Spalte würde das
   in unnötig viele, schmale Zeilen umbrechen. 46ch ist 1:1 der SEO/GEO- und Tracking &
   Analytics-Wert (siehe .nn-track .hero__bottom-main in assets/css/tracking-analytics.css). */
.nn-ai .hero__bottom-main {max-width:46ch}
.nn-ai .hero__lede {margin:0;font-size:clamp(1rem,1.35vw,1.35rem);color:var(--ink)}
.nn-ai .hero__bottom-main .btn {margin-top:clamp(1.25rem,2vh,1.9rem)}

/* Unter ~900px reicht die Breite nicht mehr für Lede+CTA UND Blick-Box nebeneinander
   (die Box hat selbst eine Mindestbreite von 22rem, siehe .hero__blick-trigger) — hier
   gestapelt statt weiter zu schrumpfen, dieselbe Regel wie in assets/css/cro.css. */
@media (max-width:900px) {
  .nn-ai .hero__bottom {flex-direction:column;align-items:stretch;gap:1.25rem}
  .nn-ai .hero__bottom-main {max-width:none}
  .nn-ai .hero__blick {margin-left:0}
}
@media (max-width:640px) {
  .nn-ai .hero {min-height:0}
  .nn-ai .hero__bottom {align-items:flex-start}
}
@media (max-height:820px) {
  .nn-ai .hero {min-height:0}
}

.nn-ai .btn--hero {
  font-size:.98rem;letter-spacing:.04em;text-transform:uppercase;
  padding:1.05rem 2.1rem;
}
/* Nutzer-Wunsch: CTA im First View soll auf Mobile etwas kompakter wirken — kleinere
   Schrift/Innenabstand statt der Desktop-Größe, dieselbe max-width:640px-Stufe wie bei
   der Headline. */
@media (max-width:640px) {
  .nn-ai .btn--hero {font-size:.85rem;padding:.85rem 1.5rem}
}

/* ==========================================================================
   HERO — "AUF EINEN BLICK"-POPOVER, identisch zu SEO/GEO/CRO/Tracking & Analytics
   (siehe dortige Begründung in seo-geo.css: natives <details>/<summary> statt JS,
   damit der Erklärtext auch geschlossen im HTML steht).
   ========================================================================== */
.nn-ai .hero__blick {
  position:relative;
  margin-left:auto;
}
.nn-ai .hero__blick-trigger {
  cursor:pointer;list-style:none;
  display:flex;flex-direction:column;gap:.35rem;
  width:min(clamp(22rem,10vw + 18rem,30rem),88vw);
  padding:clamp(1rem,.5vw + .85rem,1.35rem) clamp(1.25rem,.6vw + 1.05rem,1.5rem);
  background:var(--card);border:1px solid var(--line);border-radius:1.25rem;
  box-shadow:0 12px 30px -14px rgba(18,33,26,.2);
  transition:box-shadow .2s ease,border-color .2s ease;
  animation:nn-ai-blick-bounce 1s ease 1s 1;
}
@keyframes nn-ai-blick-bounce {
  0%,20%,50%,80%,100% {transform:translateY(0)}
  10% {transform:translateY(-10px)}
  35% {transform:translateY(0)}
  65% {transform:translateY(-10px)}
}
@media (prefers-reduced-motion:reduce) {
  .nn-ai .hero__blick-trigger {animation:none}
}
.nn-ai .hero__blick-trigger::-webkit-details-marker {display:none}
.nn-ai .hero__blick-trigger::marker {content:""}
.nn-ai .hero__blick-trigger-label {
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  font-size:clamp(.85rem,.5vw + .7rem,1.15rem);font-weight:900;color:var(--ink);
}
.nn-ai .hero__blick-trigger-icon {
  flex:none;
  width:clamp(1.2rem,.35vw + 1.1rem,1.5rem);height:clamp(1.2rem,.35vw + 1.1rem,1.5rem);
  border-radius:50%;
  display:grid;place-items:center;font-size:clamp(.72rem,.25vw + .65rem,.9rem);font-weight:900;
  background:var(--jade-accent);color:var(--card);
}
.nn-ai .hero__blick-trigger-preview {
  font-size:clamp(.8rem,.35vw + .68rem,.95rem);color:var(--ink-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.nn-ai .hero__blick:hover .hero__blick-trigger,
.nn-ai .hero__blick-trigger:focus-visible {
  border-color:var(--jade-accent);box-shadow:0 16px 36px -14px rgba(18,33,26,.3);
}
.nn-ai .hero__blick-panel {
  position:absolute;right:0;bottom:calc(100% + .85rem);z-index:20;
  width:min(clamp(22rem,10vw + 18rem,30rem),88vw);
  display:grid;grid-template-rows:0fr;
  opacity:0;visibility:hidden;
  transform:translateY(6px);
  transition:grid-template-rows .3s ease,opacity .3s ease,transform .3s ease,visibility .3s ease;
}
.nn-ai .hero__blick[open] .hero__blick-panel,
.nn-ai .hero__blick:hover .hero__blick-panel {
  grid-template-rows:1fr;opacity:1;visibility:visible;transform:translateY(0);
}
.nn-ai .hero__blick-panel > div {
  overflow:hidden;
  background:var(--card);border:1px solid var(--line);border-radius:1.25rem;
  box-shadow:0 20px 45px -12px rgba(18,33,26,.25);
}
.nn-ai .hero__blick-kicker {
  display:flex;align-items:center;gap:.5rem;
  margin:0;padding:clamp(1.4rem,.6vw + 1.2rem,1.9rem) clamp(1.6rem,.7vw + 1.35rem,2.1rem) 0;
  font-size:clamp(.78rem,.3vw + .68rem,.95rem);font-weight:900;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-muted);
}
.nn-ai .hero__blick-dot {
  flex:none;width:clamp(.5rem,.15vw + .45rem,.6rem);height:clamp(.5rem,.15vw + .45rem,.6rem);
  border-radius:50%;background:var(--jade-accent);
}
.nn-ai .hero__blick-text {
  margin:0;padding:.75rem clamp(1.6rem,.7vw + 1.35rem,2.1rem) clamp(1.5rem,.6vw + 1.3rem,2rem);
  font-size:clamp(.92rem,.4vw + .8rem,1.1rem);line-height:1.65;color:var(--ink);text-align:left;
}
@media (max-width:640px) {
  .nn-ai .hero__blick-panel {right:auto;left:0}
}

/* ==========================================================================
   HERO — ROTIERENDES MARKEN-BADGE, identisch zu SEO/GEO/CRO/Tracking & Analytics, nur
   mit "KI-AUTOMATISIERUNG · SALZBURG" als Ringtext.
   ========================================================================== */
.nn-ai .hero__badge {
  flex:none;position:relative;
  width:clamp(4.5rem,6.5vw,7rem);aspect-ratio:1;
  display:grid;place-items:center;color:var(--jade-accent);
}
.nn-ai .hero__badge-ring {
  width:100%;height:100%;animation:nn-ai-badge-spin 16s linear infinite;
}
.nn-ai .hero__badge-ring text {
  font-size:8.6px;fill:currentColor;opacity:.75;
  font-weight:700;text-transform:uppercase;
}
.nn-ai .hero__badge-spark {
  position:absolute;font-size:1.15rem;line-height:1;
  filter:drop-shadow(0 0 8px color-mix(in srgb,var(--jade) 55%,transparent));
}
@keyframes nn-ai-badge-spin {to {transform:rotate(360deg)}}
@media (max-width:480px) {
  .nn-ai .hero__badge {width:clamp(3.5rem,11vw,4.5rem)}
}
@media (prefers-reduced-motion:reduce) {
  .nn-ai .hero__badge-ring {animation:none}
}

/* ==========================================================================
   HERO — EINTRITTS-ANIMATION, identisch zu SEO/GEO/CRO/Tracking & Analytics.
   ========================================================================== */
@keyframes nn-ai-hero-in {
  from {opacity:0;transform:translateY(18px);filter:blur(6px)}
  to {opacity:1;transform:none;filter:blur(0)}
}
.nn-ai .hero .wrap > * {
  animation:nn-ai-hero-in .8s cubic-bezier(.16,1,.3,1) both;
}
.nn-ai .hero .wrap > *:nth-child(1) {animation-delay:0s}
.nn-ai .hero .wrap > *:nth-child(2) {animation-delay:.16s}
.nn-ai .hero .wrap > *:nth-child(3) {animation-delay:.34s}
@media (prefers-reduced-motion:reduce) {
  .nn-ai .hero .wrap > * {animation:none}
}

.nn-ai .pullquote {
  margin-top:clamp(2rem,5vh,4.5rem);
  padding-left:1.4rem;border-left:3px solid var(--jade);
  font-size:clamp(1.15rem,2.2vw,2.1rem);font-weight:700;letter-spacing:-.01em;
  color:var(--ink);max-width:56ch;text-wrap:pretty;
}
.nn-ai .pullquote--center {margin-inline:auto}

/* ==========================================================================
   STAT-CARD — große Kennzahl links, Erklärung rechts, darunter ein Balken,
   der den Anteil visuell gegen den Rest setzt statt ihn nur zu behaupten.
   Marker sitzt exakt auf dem gefüllten Anteil.
   ========================================================================== */
.nn-ai .stat-card {
  border:1px solid var(--line);border-radius:24px;background:var(--card);
  padding:clamp(1.75rem,4vw,4.15rem);box-shadow:var(--shadow);
  margin-top:clamp(2rem,5vh,4.5rem);
}
.nn-ai .stat-card__num {
  display:grid;grid-template-columns:auto 1fr;gap:clamp(1.25rem,3vw,3.75rem);
  align-items:center;
}
@media (max-width:700px) {
  .nn-ai .stat-card__num {grid-template-columns:1fr}
}
.nn-ai .stat-card__value {
  font-size:clamp(4rem,11vw,11rem);font-weight:900;letter-spacing:-.05em;line-height:1;
  color:var(--ink);white-space:nowrap;
}
.nn-ai .stat-card__pct {color:var(--jade-accent);font-size:.55em}
.nn-ai .stat-card__label {color:var(--ink-muted);font-size:clamp(1rem,1.35vw,1.5rem);text-wrap:pretty}

.nn-ai .stat-card__bar {
  position:relative;height:10px;border-radius:99px;background:var(--line);
  margin-top:clamp(1.75rem,4vw,3.75rem);overflow:visible;
}
.nn-ai .stat-card__fill {
  position:absolute;left:0;top:0;height:100%;width:33%;
  background:var(--jade);border-radius:99px;
}
.nn-ai .stat-card__marker {
  position:absolute;left:33%;top:-1.9rem;transform:translateX(-50%);
  font-size:.78rem;font-weight:700;color:var(--jade-accent);
  white-space:nowrap;
}
.nn-ai .stat-card__marker::after {
  content:"";position:absolute;left:50%;top:calc(100% + 2px);
  transform:translateX(-50%);width:1px;height:.9rem;background:var(--jade-accent);
}

/* ==========================================================================
   FLOW-PIN — fixiert Section-Head + .flow gemeinsam für die Dauer eines
   kurzen Scroll-Abschnitts und übersetzt vertikales Scrollen in den
   Regler-Wert, statt dass der Nutzer selbst ziehen MUSS (manuelles Ziehen
   bleibt zusätzlich möglich, siehe assets/js/ai-automatisierungen.js).
   1:1 dieselbe Technik wie .nn-seo .morph-pin / .nn-track .flow-pin (siehe
   dortiger Kommentar für die volle Begründung).
   ========================================================================== */
.nn-ai .flow-pin {position:relative}
.nn-ai .flow-pin.is-pinned {height:240svh}
.nn-ai .flow-pin__sticky {padding:clamp(.75rem,2vh,1.5rem) 0}
.nn-ai .flow-pin.is-pinned .flow-pin__sticky {
  position:sticky;top:calc(var(--nav-h) + 3.25rem);
  display:flex;flex-direction:column;justify-content:center;
  min-height:calc(100svh - var(--nav-h) - 3.25rem);
  padding:clamp(1rem,3vh,2rem) 0;
}

/* ==========================================================================
   VERBUNDEN — Regler legt den Weg der Aufgaben von Hand auf den direkten
   Anschluss über n8n und MCP um. Werte 1:1 vom identischen Bauteil in
   assets/css/tracking-analytics.css (dort „Datenfluss") übernommen.
   ========================================================================== */
.nn-ai .flow {
  border:1px solid var(--line);border-radius:24px;background:var(--card);
  box-shadow:var(--shadow);overflow:hidden;
}
.nn-ai .flow__bar {
  display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;
  padding:1.1rem clamp(1.1rem,3vw,2.6rem);border-bottom:1px solid var(--line);
  background:var(--paper);
}
.nn-ai .flow__label {font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);white-space:nowrap}
.nn-ai .flow__label--on {color:var(--jade-accent)}
.nn-ai .flow__slider {flex:1;min-width:180px;appearance:none;height:4px;border-radius:99px;background:var(--line);outline:none;cursor:grab}
.nn-ai .flow__slider:active {cursor:grabbing}
.nn-ai .flow__slider::-webkit-slider-thumb {
  appearance:none;width:26px;height:26px;border-radius:50%;
  background:var(--jade);border:3px solid var(--card);box-shadow:0 2px 10px rgba(40,135,96,.45);cursor:grab;
}
.nn-ai .flow__slider::-moz-range-thumb {
  width:26px;height:26px;border-radius:50%;
  background:var(--jade);border:3px solid var(--card);box-shadow:0 2px 10px rgba(40,135,96,.45);cursor:grab;
}
.nn-ai .flow__slider:focus-visible {outline:2px solid var(--jade-accent);outline-offset:6px}

.nn-ai .flow__stage {position:relative;height:clamp(300px,38vh,460px);overflow:hidden}
.nn-ai .flow__canvas {position:absolute;inset:0;width:100%;height:100%;display:block}

.nn-ai .node {
  position:absolute;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;gap:.15rem;
  padding:.7rem 1rem;border-radius:14px;
  border:1px solid var(--line);background:var(--card);
  box-shadow:var(--shadow);white-space:nowrap;text-align:center;
}
.nn-ai .node__title {font-weight:900;font-size:.9rem;letter-spacing:-.01em}
.nn-ai .node__sub {font-size:.78rem;color:var(--ink-muted)}
.nn-ai .node__sub b {color:var(--jade-accent);font-weight:900;font-variant-numeric:tabular-nums}
.nn-ai .node--source {left:11%;top:34%}
.nn-ai .node--target {left:89%;top:34%}
.nn-ai .node--server {
  left:50%;top:84%;
  border-color:var(--jade);
  background:color-mix(in srgb,var(--jade) 12%,var(--card));
}

.nn-ai .gate {
  position:absolute;transform:translate(-50%,-50%);top:34%;
  font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-muted);
  border:1px dashed var(--line);border-radius:999px;
  padding:.3rem .7rem;background:var(--bg);
}
.nn-ai #aiGate1 {left:32%}
.nn-ai #aiGate2 {left:50%}
.nn-ai #aiGate3 {left:68%}

.nn-ai .flow__caption {
  padding:1rem clamp(1.1rem,3vw,2.6rem) .25rem;border-top:1px solid var(--line);
  background:var(--paper);font-size:clamp(1rem,1.35vw,1.5rem);color:var(--ink-muted);
}
.nn-ai .flow__caption b {color:var(--ink)}
.nn-ai .flow__disclaimer {
  padding:0 clamp(1.1rem,3vw,2.6rem) 1rem;background:var(--paper);
  font-size:.8rem;color:var(--ink-muted);opacity:.75;
}

@media (max-width:700px) {
  .nn-ai .flow__stage {height:clamp(400px,62vh,480px)}
  .nn-ai .node {padding:.5rem .7rem;border-radius:11px}
  .nn-ai .node__title {font-size:.78rem}
  .nn-ai .node__sub {font-size:.7rem}
  .nn-ai .node--source {left:30%;top:12%}
  .nn-ai .node--target {left:30%;top:88%}
  .nn-ai .node--server {left:72%;top:50%}
  .nn-ai .gate {font-size:.6rem;padding:.24rem .5rem;letter-spacing:.02em}
  .nn-ai #gate1 {left:30%;top:30%}
  .nn-ai #gate2 {left:30%;top:50%}
  .nn-ai #gate3 {left:30%;top:70%}
}

/* ==========================================================================
   LEISTUNGEN
   ========================================================================== */
.nn-ai .svc {border-top:1px solid var(--line)}
.nn-ai .svc:last-of-type {border-bottom:1px solid var(--line)}
.nn-ai .svc__btn {
  width:100%;display:grid;grid-template-columns:4.5rem 1fr 1fr 3rem;align-items:center;gap:1rem;
  background:none;border:0;cursor:pointer;text-align:left;font-family:inherit;color:var(--ink);
  padding:clamp(1.25rem,3vh,2.8rem) 0;
}
.nn-ai .svc__num {font-weight:900;font-size:.9rem;color:var(--ink-muted);font-variant-numeric:tabular-nums}
.nn-ai .svc__name {font-weight:900;font-size:clamp(1.15rem,2.3vw,2.5rem);letter-spacing:-.02em;line-height:1.15}
.nn-ai .svc__hint {
  color:var(--ink-muted);font-size:clamp(1rem,1.35vw,1.5rem);
  transition:opacity .25s ease, visibility .25s ease;
}
.nn-ai .svc[open] .svc__hint {opacity:0;visibility:hidden}
.nn-ai .svc__toggle {
  justify-self:end;width:2.6rem;height:2.6rem;border-radius:50%;
  border:1px solid var(--line);display:grid;place-items:center;
  color:var(--jade-accent);font-size:1.3rem;font-weight:400;line-height:1;
}
.nn-ai .svc__btn:hover .svc__name, .nn-ai .svc__btn:focus-visible .svc__name {color:var(--jade-accent);transition:color .2s ease}
.nn-ai .svc__btn:hover .svc__toggle, .nn-ai .svc__btn:focus-visible .svc__toggle {background:var(--jade);color:#fff;border-color:var(--jade);transition:background .2s ease,color .2s ease}
.nn-ai .svc__panel {
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .35s ease;
}
.nn-ai .svc[open] .svc__panel {grid-template-rows:1fr}
.nn-ai .svc__panel > div {overflow:hidden}
.nn-ai .svc {--svc-indent:5.5rem}
.nn-ai .svc__panel p {
  color:var(--ink-muted);
  font-size:clamp(1rem,1.35vw,1.5rem);
  padding:0 var(--svc-indent) clamp(1.25rem,3vh,3rem);
}
.nn-ai .svc[open] .svc__toggle {background:var(--jade);color:#fff;border-color:var(--jade);transform:rotate(45deg)}

@media (max-width:760px) {
  .nn-ai .svc__btn {grid-template-columns:3rem 1fr 2.4rem}
  .nn-ai .svc__hint {display:none}
  .nn-ai .svc {--svc-indent:4rem}
  .nn-ai .svc__panel p {padding-right:0}
}

/* Beim Portieren ins Theme: natives <details>/<summary> statt Button+JS-Klasse, siehe
   Begründung in patterns/seo-geo-leistungen.php. */
.nn-ai .svc > summary {list-style:none;cursor:pointer;}
.nn-ai .svc > summary::-webkit-details-marker {display:none;}

/* ==========================================================================
   ABLAUF
   ========================================================================== */
.nn-ai .steps {display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;counter-reset:s}
@media (max-width:900px) {
  .nn-ai .steps {grid-template-columns:1fr 1fr}
}
@media (max-width:520px) {
  .nn-ai .steps {grid-template-columns:1fr}
}
.nn-ai .step {
  position:relative;padding:clamp(1.4rem,3vw,3rem);border-radius:20px;
  border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow);
}
.nn-ai .step__n {
  display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;
  background:var(--jade);color:#06110c;font-weight:900;font-size:.95rem;margin-bottom:1rem;
}
.nn-ai .step h3 {font-size:1.1rem;margin-bottom:.5rem}
.nn-ai .step p {color:var(--ink-muted);font-size:clamp(1rem,1.35vw,1.5rem)}

/* ==========================================================================
   WARUM WIR — Zwei unabhängige Paare statt einer Kette.
   ========================================================================== */
.nn-ai .pairs {
  display:grid;grid-template-columns:1fr 1fr;gap:1rem;
  margin-top:clamp(1.75rem,4vw,3.75rem);
}
@media (max-width:700px) {
  .nn-ai .pairs {grid-template-columns:1fr}
}
.nn-ai .pair {
  border:1px solid var(--line);border-radius:16px;background:var(--card);
  box-shadow:var(--shadow);padding:1.1rem 1.4rem;
  display:flex;align-items:center;flex-wrap:wrap;gap:.6rem .85rem;
}
.nn-ai .pair__if {font-weight:700;color:var(--ink);font-size:clamp(1rem,1.35vw,1.5rem)}
.nn-ai .pair__arrow {color:var(--jade-accent);font-weight:900;flex:none}
.nn-ai .pair__then {color:var(--ink-muted);font-size:clamp(1rem,1.35vw,1.5rem)}

.nn-ai .proof-band {
  display:grid;grid-template-columns:repeat(3,1fr);
  border:1px solid var(--line);border-radius:24px;
  background:var(--card);box-shadow:var(--shadow);
  margin:clamp(2rem,5vh,4.5rem) 0;overflow:hidden;
}
.nn-ai .proof {
  padding:clamp(1.5rem,3vw,3.4rem);
  display:flex;flex-direction:column;gap:.5rem;
  border-right:1px solid var(--line);
}
.nn-ai .proof:last-child {border-right:0}
.nn-ai .proof__num {font-size:clamp(2.25rem,5vw,4.75rem);font-weight:900;letter-spacing:-.04em;line-height:1;color:var(--ink)}
.nn-ai .proof__label {color:var(--ink-muted);font-size:clamp(1rem,1.35vw,1.5rem);text-wrap:pretty}
@media (max-width:760px) {
  .nn-ai .proof-band {grid-template-columns:1fr}
  .nn-ai .proof {border-right:0;border-bottom:1px solid var(--line)}
  .nn-ai .proof:last-child {border-bottom:0}
}

/* ==========================================================================
   SELBST-CHECK
   ========================================================================== */
.nn-ai .check {
  border:1px solid var(--line);border-radius:24px;background:var(--card);
  box-shadow:var(--shadow);overflow:hidden;
}
.nn-ai .check__head {padding:clamp(1.5rem,3vw,3.4rem);border-bottom:1px solid var(--line)}
.nn-ai .check__head p {color:var(--ink-muted);font-size:clamp(1rem,1.35vw,1.5rem);margin-top:.75rem;max-width:60ch}
.nn-ai .check__list {padding:clamp(.75rem,2vw,1.4rem) clamp(1.5rem,3vw,3.4rem)}
.nn-ai .check__item {
  display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;
  padding:1.1rem 0;border-bottom:1px solid var(--line);
}
.nn-ai .check__item:last-child {border-bottom:0}
.nn-ai .check__item p {font-weight:600;flex:1;min-width:220px}
.nn-ai .check__toggle {display:flex;gap:.4rem;flex:none}
.nn-ai .qbtn {
  border:1px solid var(--line);background:transparent;color:var(--ink-muted);
  font-family:inherit;font-weight:700;font-size:.9rem;
  padding:.45rem 1.1rem;border-radius:999px;cursor:pointer;
}
.nn-ai .qbtn:hover {border-color:var(--jade-accent);color:var(--jade-accent);transition:color .2s ease,border-color .2s ease}
.nn-ai .qbtn.is-on {background:var(--jade);border-color:var(--jade);color:#06110c}
.nn-ai .check__result {
  padding:clamp(1.5rem,3vw,3.4rem);border-top:1px solid var(--line);
  background:var(--paper);display:none;
}
.nn-ai .check__result.is-visible {display:block}
.nn-ai .check__score {font-size:clamp(1.35rem,2.6vw,2.75rem);font-weight:900;letter-spacing:-.02em}
.nn-ai .check__result p.sub {color:var(--ink-muted);font-size:clamp(1rem,1.35vw,1.5rem);margin:.65rem 0 1.5rem;max-width:60ch}
.nn-ai .meter {height:6px;border-radius:99px;background:var(--line);overflow:hidden;margin-bottom:1.5rem;max-width:420px}
.nn-ai .meter__fill {height:100%;background:var(--jade);width:0;border-radius:99px;transition:width .5s ease}

/* ==========================================================================
   FAQ
   ========================================================================== */
/* Zweispaltig wie google-ads.css (siehe dessen FAQ-Kommentarblock für die Begründung der
   festen faq__photo-Höhe) — .faq verliert dabei sein altes max-width:900px/margin-inline:auto
   (einspaltig zentriert), weil die Breite jetzt von .faq-row's Grid-Spalte kommt. */
.nn-ai .faq-row {
  display:grid;
  grid-template-columns:1fr 0.7fr;
  gap:clamp(1.5rem,3.5vw,2.75rem);
  align-items:center;
}
.nn-ai .faq__photo {
  width:100%;
  max-width:none;
  aspect-ratio:4 / 3;
  height:460px;
  object-fit:cover;
  border-radius:20px;
  display:block;
  margin-inline:auto;
}
@media (max-width:900px) {
  .nn-ai .faq-row {grid-template-columns:1fr}
  .nn-ai .faq__photo {display:none}
  .nn-ai .faq__h2 {max-width:100%}
}

.nn-ai .faq {
  --faq-inset:2rem;
}
.nn-ai .faq details {border-bottom:1px solid var(--line)}
.nn-ai .faq details:first-of-type {border-top:1px solid var(--line)}

.nn-ai .faq summary {
  list-style:none;cursor:pointer;position:relative;
  padding:1.4rem var(--faq-inset) 1.4rem 0;
  font-weight:900;font-size:clamp(1.02rem,1.8vw,1.7rem);letter-spacing:-.01em;
}
.nn-ai .faq summary::-webkit-details-marker {display:none}
.nn-ai .faq summary::after {
  content:"+";position:absolute;right:.5rem;top:50%;transform:translateY(-50%);
  font-size:1.5rem;font-weight:400;color:var(--jade-accent);
}
.nn-ai .faq details[open] summary::after {content:"−"}
.nn-ai .faq summary:hover {color:var(--jade-accent);transition:color .2s ease}

.nn-ai .faq__a {
  padding:0 var(--faq-inset) 1.6rem 0;
  font-size:clamp(1rem,1.35vw,1.5rem);
  color:var(--ink-muted);
}

@media (prefers-reduced-motion:reduce) {

  .nn-ai, .nn-ai * {animation-duration:.001ms !important;transition-duration:.001ms !important}

}

/* Ersetzt inline style-Attribute aus dem Mockup. Als Klassen statt inline, damit sie eine
   Bearbeitung im Editor überstehen und hier an einer Stelle änderbar bleiben. */
.nn-ai .section-head--center { text-align: center; }
/* margin-inline:auto entfernt (2026-08-30): .faq__h2 sitzt jetzt in der linksbündigen
   section-head statt der zentrierten section-head--center (siehe FAQ-Kommentarblock oben),
   auto-Margin hätte die Überschrift dadurch mittig statt linksbündig gezogen. */
.nn-ai .faq__h2 { max-width: 24ch; }
.nn-ai .warum__h2 { max-width: 28ch; margin-inline: auto; }
.nn-ai .warum__lede--center { margin-inline: auto; text-align: center; }
.nn-ai .warum__outro--center { margin: 2rem auto 0; text-align: center; }

/* CTA-Band: siehe Begründung in assets/css/tracking-analytics.css — der Kicker der
   wiederverwendeten .nn-cta-band braucht dieselbe Anhebung über den Canvas/Scrim. */
.nn-ai .nn-cta-band .kicker {
  position: relative; z-index: 2;
  margin-bottom: .75rem;
}
.nn-ai .nn-cta-band > p:not(.kicker):not(.wp-block-heading) {
  position: relative; z-index: 2;
  color: var(--hero-ink); opacity: .75;
  max-width: 52ch; margin: 0 auto 2.25rem;
}