/*
 * CRO-Leistungsseite — portiert aus dem Mockup ~/nonoise-mockups/cro-v1.html.
 *
 * ABWEICHUNG von der Projektkonvention „ein Pattern = eine CSS-Datei" (Abschnitt 8):
 * genau wie bei SEO/GEO und Tracking & Analytics 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-cro 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-cro 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/cro.js angesprochen werden, sind cro-* -präfigiert (croCheckList
 * etc., analog zu seoCheck- bzw. trackCheck-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/cro-cta.php).
 *
 * Große Screens (ab ca. 1900px, z. B. 2560×1440): alle clamp()-Obergrenzen und die
 * .wrap-Maximalbreite wurden gegenüber dem Mockup angehoben (--wrap 1760px→2200px,
 * H1 92px→116px usw.), der vw/vh-Koeffizient blieb dabei jeweils unverändert. Dadurch
 * wächst die Seite über den Punkt hinaus weiter, an dem die alten, engeren Obergrenzen
 * bereits griffen (H1 z. B. ab ~1483px Breite), statt auf sehr breiten Screens frühzeitig
 * einzufrieren und ringsum Leerraum stehen zu lassen — ohne Sprung im Verlauf, weil nur die
 * Obergrenze selbst verschoben wurde, nicht die Formel.
 */


/* ==========================================================================
   TOKENS
   ========================================================================== */
.nn-cro {
  --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);

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

  html:not([data-theme="light"]) .nn-cro {
    --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);
  }

}
html[data-theme="dark"] .nn-cro {
  --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);
}

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



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

.nn-cro h1, .nn-cro h2, .nn-cro h3 {font-weight:900;letter-spacing:-.03em;line-height:1.03;margin:0}
.nn-cro 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 ai-automatisierungen.css/leistungen-hub.css). */
@media (max-width:700px) {
  .nn-cro h1 {font-size:1.75rem}
}
.nn-cro h2 {font-size:clamp(2rem,4.5vw,4.75rem);text-transform:uppercase}
.nn-cro h3 {font-size:clamp(1.15rem,2vw,2.1rem);letter-spacing:-.02em}
.nn-cro p {margin:0}

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

.nn-cro .section {padding:clamp(4.5rem,11vh,12rem) 0;position:relative}
.nn-cro .section--paper {background:var(--paper)}
.nn-cro .section-head {margin-bottom:clamp(2.25rem,5vh,5rem)}
.nn-cro .section-head .kicker {margin-bottom:.75rem}
.nn-cro .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-cro .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-cro .btn:hover, .nn-cro .btn:focus-visible {background:#2f9c6f;transition:background .2s ease}
.nn-cro .btn--ghost {background:transparent;color:var(--ink);border:1px solid var(--line)}
.nn-cro .btn--ghost:hover, .nn-cro .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-cro .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-cro .crumbs li {display:flex;align-items:center;gap:.45rem}
.nn-cro .crumbs a {color:var(--ink-muted);text-decoration:none}
.nn-cro .crumbs a:hover, .nn-cro .crumbs a:focus-visible {color:var(--jade-accent);transition:color .2s ease}
.nn-cro .crumbs [aria-current="page"] {color:var(--ink);font-weight:600}
.nn-cro .crumbs__sep {opacity:.45}

/* ==========================================================================
   ANKERNAVIGATION
   ========================================================================== */
.nn-cro .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-cro .anchors.is-stuck {
  background:var(--bg);
}
.nn-cro .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-cro .anchors__inner::-webkit-scrollbar {display:none}
/* Schrift/Innenabstand als clamp() statt fester rem-Werte: auf sehr breiten Screens
   (ab ca. 1900px) darf die Ankernavigation mitwachsen, damit sie bei 2560px+ nicht
   unverhältnismäßig klein neben dem größer skalierten restlichen Inhalt wirkt. */
.nn-cro .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-cro .anchors a:hover, .nn-cro .anchors a:focus-visible {color:var(--jade-accent);transition:color .2s ease}
.nn-cro .anchors a b {
  font-weight:900;font-size:clamp(.72rem,.58vw,.88rem);color:var(--jade-accent);
  font-variant-numeric:tabular-nums;
}
.nn-cro .anchors a.is-active {
  color:var(--ink);background:var(--serp-chip);border-color:var(--line);
}
.nn-cro .anchors__bar {height:2px;background:var(--jade);width:0;transition:width .15s linear}

/* ==========================================================================
   HERO — TYPOGRAFISCHES POSTER
   2026-08-31: 1:1 auf die SEO/GEO-Architektur umgestellt (Nutzer-Wunsch "genau gleich
   gestalten") — kein Canvas-Farbfeld/Box-Grid mehr. Ausführliche Begründung der
   Komposition (Masthead spiegelt Zeilen-Ausrichtung, ein einziger CTA, reine
   CSS-Atmosphäre statt Canvas) steht im Kopf von patterns/seo-geo-hero.php bzw. den
   analogen Regeln in seo-geo.css — hier nur mit den .nn-cro-Tokens übernommen.
   ========================================================================== */
.nn-cro .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 (nicht-maximiertes Fenster auf einem 13"-MacBook, effektiv oft
   nur 700-800px hoch): das vh-basierte Innenpolster oben/unten schrumpft mit der Fenster-
   höhe zwar automatisch mit, der clamp()-Mindestwert (2rem/32px je Seite) blieb aber
   fest — bei sehr kurzen Fenstern zusätzlich verkleinert, damit mehr von der knappen
   Höhe dem eigentlichen Inhalt (H1, Lede, CTA) zugutekommt statt dem Rand. */
@media (max-height:820px) {
  .nn-cro .hero {padding:calc(var(--nav-h) + 1.25rem) 0 1.5rem}
}
.nn-cro .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-cro .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-cro .hero .wrap {position:relative;z-index:3;margin-top:0}

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

/* Kleinerer vw-Koeffizient/Deckel als bei SEO/GEO (9.6vw/9.5rem dort): Zeile 2 hier
   ("Anfragen bleiben aus.") ist länger als SEO/GEOs "Zitiert von der KI." und würde bei
   deren Werten schon im Bereich eines 13"-MacBooks (~1512px) selbst umbrechen (die
   Zeile ist bei 9.6vw dort ca. 1610px breit, der Wrap hat an der Stelle aber nur etwa
   1360px Platz). 8vw/8rem hält beide Zeilen bis weit in den Tablet-/Laptop-Bereich
   hinein einzeilig UND senkt nebenbei die Gesamthöhe der zweizeiligen H1 — Teil der
   "alles im First View, auch auf 13"-MacBooks"-Vorgabe. Auf echten Großbildschirmen
   (Nutzer-Feedback zu 2560×1440: die H1 wirkte dort zu klein) hätte dieser gedeckelte
   8rem-Wert die Schrift aber ab 1600px Breite komplett einfrieren lassen, während der
   Viewport noch massiv weiterwächst — siehe die eigene min-width:1600px-Regel weiter
   unten, die dort nahtlos an dieser Obergrenze weiterwächst (kein Sprung am Breakpoint,
   da 7vw bei 1600px selbst noch unter 8rem liegt) und bis knapp unter die Breite
   ausreizt, bei der die Zeile den Wrap (max. 2200px bei .nn-cro .wrap) sprengen würde. */
/* 2026-09-03 (Nutzer-Wunsch, Nachschärfung): Koeffizient/Deckel nochmal von 8vw/8rem auf
   7.1vw/7.1rem gesenkt (Faktor ~0,884) — bei 8vw/8rem lag "Anfragen bleiben aus." auf einem
   13"-MacBook-Air (1440px) nur ca. 9,5 % unter der Wrap-Breite (live per
   getBoundingClientRect gemessen, nicht geschätzt); auf echten Geräten reichte das je nach
   Font-Rendering nicht (Nutzer-Feedback zu Google Ads/Social Ads mit demselben Muster, dort
   war der Puffer noch knapper). Jetzt ca. 20 % Puffer bei 1440px. */
.nn-cro .hero__poster-heading {
  margin:clamp(1rem,2.5vh,2rem) 0 0;
  font-size:clamp(2.6rem,7.1vw,7.1rem);font-weight:900;
  letter-spacing:-.045em;line-height:.92;
}
.nn-cro .hero__line {display:block;max-width:100%}
.nn-cro .hero__line--a {text-align:left;color:var(--ink)}
/* Zeile 2 rechtsbündig UND in --jade-accent: erfüllt die Nutzer-Vorgabe "Anfragen soll
   grün geschrieben sein" direkt über die Zeilenfarbe, ohne eine zusätzliche Inline-Span-
   Färbung mitten im Satz zu brauchen. */
.nn-cro .hero__line--b {
  text-align:right;color:var(--jade-accent);
  margin-top:clamp(.2rem,1vw,.7rem);
}
/* Tablet/kleine Laptop-Fenster (z. B. iPad quer, ein schmaleres Browserfenster auf einem
   13"-MacBook): Bottom-Zeile (Lede+CTA links, Blick-Box rechts) bricht hier auf zwei
   Zeilen um (siehe .hero__bottom-Kommentar unten) — die H1 bekommt eine eigene,
   etwas kompaktere Zwischenstufe, statt bis 640px bei voller Desktop-Größe zu bleiben
   und dann abrupt auf die Mobile-Größe zu springen. */
@media (max-width:900px) {
  .nn-cro .hero__poster-heading {font-size:clamp(2.4rem,6.6vw,4rem)}
}
@media (max-width:640px) {
  .nn-cro .hero__poster-heading {font-size:clamp(2rem,10.5vw,2.6rem)}
  .nn-cro .hero__line--b {text-align:left}
}
/* Große Screens (ab 1600px, z. B. 2560×1440): die Basisregel oben deckelt bei 8rem, damit
   Zeile 2 auf 13"-MacBook-Breiten (~1512px) nicht umbricht (siehe Kommentar dort) — auf
   echten Großbildschirmen ist an dieser Stelle aber reichlich Platz übrig, und 8rem wirkt
   dort im Vergleich zum riesigen Viewport klein (Nutzer-Feedback zu 2560×1440). Eigene,
   flacher wachsende Formel (7vw statt 8vw) übernimmt hier nahtlos, sobald sie die 8rem-
   Untergrenze überschreitet (bei 1600px selbst liefert 7vw erst 7rem, also kein Sprung am
   Breakpoint), und wächst bis 11.5rem (184px) weiter — bewusst unter SEO/GEOs 12.5rem-
   Deckel, weil .nn-cro .wrap mit max. 2200px schmaler bleibt als SEO/GEOs 2550-2950px
   (siehe Kopfkommentar dieser Datei) und die längere Zeile 2 bei vollen 12.5rem selbst
   dort noch umbrechen würde. */
@media (min-width:1600px) {
  .nn-cro .hero__poster-heading {font-size:clamp(7.1rem,6.19vw,10.2rem)}
}

.nn-cro .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);
}
/* 30ch statt der SEO/GEO-üblichen 46ch: die gekürzte Lede (siehe Docblock in
   patterns/cro-hero.php) ist bewusst kurz genug, um bei 30ch in 2 statt 4 Zeilen zu
   stehen — weniger Breite hier lässt der Blick-Box daneben mehr Luft, bevor das Grid bei
   .hero__bottom-Wrap umbricht (siehe Media Query darunter), und hält die Bottom-Zeile
   auch auf 13"-MacBook-Fensterbreiten in einer Reihe. */
.nn-cro .hero__bottom-main {max-width:34ch}
.nn-cro .hero__lede {margin:0;font-size:clamp(1rem,1.35vw,1.35rem);color:var(--ink)}
.nn-cro .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,
   ohne dass eine Seite unlesbar schmal wird (die Box hat selbst eine Mindestbreite von
   22rem, siehe .hero__blick-trigger) — hier bewusst gestapelt statt weiter zu
   schrumpfen, mit kleinerem Abstand zwischen den beiden Blöcken. */
@media (max-width:900px) {
  .nn-cro .hero__bottom {flex-direction:column;align-items:stretch;gap:1.25rem}
  .nn-cro .hero__bottom-main {max-width:none}
  .nn-cro .hero__blick {margin-left:0}
}
@media (max-width:640px) {
  .nn-cro .hero {min-height:0}
}
/* Kurze Browserfenster (z. B. ein nicht-maximiertes Fenster auf einem 13"-MacBook,
   effektive Höhe oft nur 700-800px): dieselbe min-height:0-Entspannung wie auf Mobile,
   nur nach Höhe statt nach Breite gefragt — verhindert, dass der Hero durch die
   100svh-Untergrenze höher gezogen wird, als der Inhalt selbst braucht, und drückt
   dadurch unnötig Content unter die Kante. */
@media (max-height:820px) {
  .nn-cro .hero {min-height:0}
}

.nn-cro .btn--hero {
  font-size:.98rem;letter-spacing:.04em;text-transform:uppercase;
}
/* 2026-09-02 (Nutzer-Wunsch, Seitenangleichung): identisch zu allen übrigen Leistungsseiten. */
@media (max-width:640px) {
  .nn-cro .btn--hero {font-size:.85rem;padding:.85rem 1.5rem}
}

/* ==========================================================================
   HERO — "AUF EINEN BLICK"-POPOVER
   Natives <details>/<summary> statt JS: der Erklärtext liegt dadurch immer im HTML,
   auch geschlossen (Crawler-Anforderung) — siehe Begründung im Kopf von
   patterns/seo-geo-hero.php.
   ========================================================================== */
.nn-cro .hero__blick {
  position:relative;
  margin-left:auto;
}
.nn-cro .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-cro-blick-bounce 1s ease 1s 1;
}
@keyframes nn-cro-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-cro .hero__blick-trigger {animation:none}
}
.nn-cro .hero__blick-trigger::-webkit-details-marker {display:none}
.nn-cro .hero__blick-trigger::marker {content:""}
.nn-cro .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-cro .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-cro .hero__blick-trigger-preview {
  font-size:clamp(.8rem,.35vw + .68rem,.95rem);color:var(--ink-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.nn-cro .hero__blick:hover .hero__blick-trigger,
.nn-cro .hero__blick-trigger:focus-visible {
  border-color:var(--jade-accent);box-shadow:0 16px 36px -14px rgba(18,33,26,.3);
}
.nn-cro .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-cro .hero__blick[open] .hero__blick-panel,
.nn-cro .hero__blick:hover .hero__blick-panel {
  grid-template-rows:1fr;opacity:1;visibility:visible;transform:translateY(0);
}
.nn-cro .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-cro .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-cro .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-cro .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-cro .hero__blick-panel {right:auto;left:0}
}

/* ==========================================================================
   HERO — ROTIERENDES MARKEN-BADGE, identisch zu SEO/GEO (siehe dortige Begründung
   in seo-geo.css), nur mit "CRO AGENTUR · SALZBURG" als Ringtext.
   ========================================================================== */
.nn-cro .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-cro .hero__badge-ring {
  width:100%;height:100%;animation:nn-cro-badge-spin 16s linear infinite;
}
.nn-cro .hero__badge-ring text {
  font-size:8.6px;fill:currentColor;opacity:.75;
  font-weight:700;text-transform:uppercase;
}
.nn-cro .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-cro-badge-spin {to {transform:rotate(360deg)}}
@media (max-width:480px) {
  .nn-cro .hero__badge {width:clamp(3.5rem,11vw,4.5rem)}
}
@media (prefers-reduced-motion:reduce) {
  .nn-cro .hero__badge-ring {animation:none}
}

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

.nn-cro .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-cro .pullquote--center {margin-inline:auto}

/* ==========================================================================
   7-EBENEN-MODELL — Trichter statt Browser-Wireframe, in Anlehnung an das
   klassische Funnel-Schaubild von André Morys: sieben Segmente, oben voll
   breit, unten ein schmaler gerader Auslauf, in unserer Jade-Skala statt der
   Regenbogenfarben des Originals.
   ========================================================================== */
.nn-cro .model {
  display:grid;grid-template-columns:.95fr 1.05fr;
  gap:clamp(1.5rem,4vw,4.5rem);align-items:start;
  margin-top:clamp(2rem,5vh,4.5rem);
}
@media (max-width:820px) {
  .nn-cro .model {grid-template-columns:1fr}
}

.nn-cro .funnel {
  display:flex;flex-direction:column;
  width:100%;max-width:32rem;margin-inline:auto;
}
.nn-cro .funnel__level {
  display:flex;align-items:center;justify-content:center;
  border:0;padding:.6rem .5rem;height:3.4rem;
  font-family:inherit;font-weight:900;letter-spacing:-.01em;
  white-space:nowrap;
  cursor:pointer;position:relative;
  transition:filter .15s ease;
}
.nn-cro .funnel__level:hover {filter:brightness(1.08)}
.nn-cro .funnel__level.is-active {
  box-shadow:inset 0 0 0 3px var(--card);
  filter:brightness(1.1);
}
.nn-cro .funnel__level--1 {
  background:var(--jade-light);color:#0a1410;font-size:1.05rem;
  clip-path:polygon(0% 0,100% 0,100% 100%,0% 100%);border-radius:18px 18px 0 0;
}
.nn-cro .funnel__level--2 {
  background:color-mix(in srgb,var(--jade-light) 83%,var(--jade-dark));color:#0a1410;font-size:1.05rem;
  clip-path:polygon(0% 0,100% 0,95% 100%,5% 100%);
}
.nn-cro .funnel__level--3 {
  background:color-mix(in srgb,var(--jade-light) 67%,var(--jade-dark));color:#0a1410;font-size:1rem;
  clip-path:polygon(5% 0,95% 0,88% 100%,12% 100%);
}
.nn-cro .funnel__level--4 {
  background:color-mix(in srgb,var(--jade-light) 50%,var(--jade-dark));color:#f7f9f7;font-size:.95rem;
  clip-path:polygon(12% 0,88% 0,81% 100%,19% 100%);
}
.nn-cro .funnel__level--5 {
  background:color-mix(in srgb,var(--jade-light) 33%,var(--jade-dark));color:#f7f9f7;font-size:.88rem;
  clip-path:polygon(19% 0,81% 0,73% 100%,27% 100%);
}
.nn-cro .funnel__level--6 {
  background:color-mix(in srgb,var(--jade-light) 17%,var(--jade-dark));color:#f7f9f7;font-size:.82rem;
  clip-path:polygon(27% 0,73% 0,65% 100%,35% 100%);
}
.nn-cro .funnel__level--7 {
  background:var(--jade-dark);color:#f7f9f7;font-size:.78rem;
  width:30%;margin-inline:auto;height:2.4rem;
  border-radius:0 0 10px 10px;
}

.nn-cro .model__detail {
  border:1px solid var(--line);border-radius:20px;background:var(--card);
  box-shadow:var(--shadow);padding:clamp(1.5rem,3vw,3rem);
}
.nn-cro .model__detail-num {font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--jade-accent)}
.nn-cro .model__detail-name {margin-top:.5rem;font-weight:900;font-size:clamp(1.3rem,2.5vw,2.5rem);letter-spacing:-.02em}
.nn-cro .model__detail-desc {margin-top:.85rem;color:var(--ink-muted);font-size:clamp(1rem,1.35vw,1.5rem);text-wrap:pretty}

.nn-cro .model__note {margin-top:1.25rem;font-size:.85rem;color:var(--ink-muted);opacity:.85}

/* ==========================================================================
   LEISTUNGEN
   ========================================================================== */
.nn-cro .svc {border-top:1px solid var(--line)}
.nn-cro .svc:last-of-type {border-bottom:1px solid var(--line)}
.nn-cro .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-cro .svc__num {font-weight:900;font-size:.9rem;color:var(--ink-muted);font-variant-numeric:tabular-nums}
.nn-cro .svc__name {font-weight:900;font-size:clamp(1.15rem,2.3vw,2.5rem);letter-spacing:-.02em;line-height:1.15}
.nn-cro .svc__hint {
  color:var(--ink-muted);font-size:clamp(1rem,1.35vw,1.5rem);
  transition:opacity .25s ease, visibility .25s ease;
}
.nn-cro .svc[open] .svc__hint {opacity:0;visibility:hidden}
.nn-cro .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-cro .svc__btn:hover .svc__name, .nn-cro .svc__btn:focus-visible .svc__name {color:var(--jade-accent);transition:color .2s ease}
.nn-cro .svc__btn:hover .svc__toggle, .nn-cro .svc__btn:focus-visible .svc__toggle {background:var(--jade);color:#fff;border-color:var(--jade);transition:background .2s ease,color .2s ease}
.nn-cro .svc__panel {
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .35s ease;
}
.nn-cro .svc[open] .svc__panel {grid-template-rows:1fr}
.nn-cro .svc__panel > div {overflow:hidden}
.nn-cro .svc {--svc-indent:5.5rem}
.nn-cro .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-cro .svc[open] .svc__toggle {background:var(--jade);color:#fff;border-color:var(--jade);transform:rotate(45deg)}

@media (max-width:760px) {
  .nn-cro .svc__btn {grid-template-columns:3rem 1fr 2.4rem}
  .nn-cro .svc__hint {display:none}
  .nn-cro .svc {--svc-indent:4rem}
  .nn-cro .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-cro .svc > summary {list-style:none;cursor:pointer;}
.nn-cro .svc > summary::-webkit-details-marker {display:none;}

/* ==========================================================================
   ABLAUF
   ========================================================================== */
.nn-cro .steps {display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;counter-reset:s}
@media (max-width:900px) {
  .nn-cro .steps {grid-template-columns:1fr 1fr}
}
@media (max-width:520px) {
  .nn-cro .steps {grid-template-columns:1fr}
}
.nn-cro .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-cro .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-cro .step h3 {font-size:1.1rem;margin-bottom:.5rem}
.nn-cro .step p {color:var(--ink-muted);font-size:clamp(1rem,1.35vw,1.5rem)}

/* ==========================================================================
   PAIRS — Wenn-dann-Gegenüberstellung, zwei unabhängige Paare nebeneinander.
   ========================================================================== */
.nn-cro .pairs {
  display:grid;grid-template-columns:1fr 1fr;gap:1rem;
  margin-top:clamp(1.75rem,4vw,3.75rem);
}
@media (max-width:700px) {
  .nn-cro .pairs {grid-template-columns:1fr}
}
.nn-cro .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-cro .pair__if {font-weight:700;color:var(--ink);font-size:clamp(1rem,1.35vw,1.5rem)}
.nn-cro .pair__arrow {color:var(--jade-accent);font-weight:900;flex:none}
.nn-cro .pair__then {color:var(--ink-muted);font-size:clamp(1rem,1.35vw,1.5rem)}

/* TRAFFIC-Sektion: zwei gleich formatierte Textspalten, die zwei .pair-Boxen folgen
   darunter als eigene Zeile (.pairs). */
.nn-cro .traffic__cols {
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.5rem);
  align-items:start;
  margin-top:clamp(1.75rem,4vw,3.75rem);
}
.nn-cro .traffic__col {display:flex;flex-direction:column;gap:1.1rem}
@media (max-width:900px) {
  .nn-cro .traffic__cols {grid-template-columns:1fr;gap:2rem}
}

.nn-cro .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-cro .proof {
  padding:clamp(1.5rem,3vw,3.4rem);
  display:flex;flex-direction:column;gap:.5rem;
  border-right:1px solid var(--line);
}
.nn-cro .proof:last-child {border-right:0}
.nn-cro .proof__num {font-size:clamp(2.25rem,5vw,4.75rem);font-weight:900;letter-spacing:-.04em;line-height:1;color:var(--ink)}
.nn-cro .proof__label {color:var(--ink-muted);font-size:clamp(1rem,1.35vw,1.5rem);text-wrap:pretty}
@media (max-width:760px) {
  .nn-cro .proof-band {grid-template-columns:1fr}
  .nn-cro .proof {border-right:0;border-bottom:1px solid var(--line)}
  .nn-cro .proof:last-child {border-bottom:0}
}

/* ==========================================================================
   SELBST-CHECK
   ========================================================================== */
.nn-cro .check {
  border:1px solid var(--line);border-radius:24px;background:var(--card);
  box-shadow:var(--shadow);overflow:hidden;
}
.nn-cro .check__head {padding:clamp(1.5rem,3vw,3.4rem);border-bottom:1px solid var(--line)}
.nn-cro .check__head p {color:var(--ink-muted);font-size:clamp(1rem,1.35vw,1.5rem);margin-top:.75rem;max-width:60ch}
.nn-cro .check__list {padding:clamp(.75rem,2vw,1.4rem) clamp(1.5rem,3vw,3.4rem)}
.nn-cro .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-cro .check__item:last-child {border-bottom:0}
.nn-cro .check__item p {font-weight:600;flex:1;min-width:220px}
.nn-cro .check__toggle {display:flex;gap:.4rem;flex:none}
.nn-cro .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-cro .qbtn:hover {border-color:var(--jade-accent);color:var(--jade-accent);transition:color .2s ease,border-color .2s ease}
.nn-cro .qbtn.is-on {background:var(--jade);border-color:var(--jade);color:#06110c}
.nn-cro .check__result {
  padding:clamp(1.5rem,3vw,3.4rem);border-top:1px solid var(--line);
  background:var(--paper);display:none;
}
.nn-cro .check__result.is-visible {display:block}
.nn-cro .check__score {font-size:clamp(1.35rem,2.6vw,2.75rem);font-weight:900;letter-spacing:-.02em}
.nn-cro .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-cro .meter {height:6px;border-radius:99px;background:var(--line);overflow:hidden;margin-bottom:1.5rem;max-width:420px}
.nn-cro .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-cro .faq-row {
  display:grid;
  grid-template-columns:1fr 0.7fr;
  gap:clamp(1.5rem,3.5vw,2.75rem);
  align-items:center;
}
.nn-cro .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-cro .faq-row {grid-template-columns:1fr}
  .nn-cro .faq__photo {display:none}
  .nn-cro .faq__h2 {max-width:100%}
}

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

.nn-cro .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-cro .faq summary::-webkit-details-marker {display:none}
.nn-cro .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-cro .faq details[open] summary::after {content:"−"}
.nn-cro .faq summary:hover {color:var(--jade-accent);transition:color .2s ease}

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

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

  .nn-cro, .nn-cro * {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-cro .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-cro .faq__h2 { max-width: 22ch; }
.nn-cro .warum__h2 { max-width: 26ch; margin-inline: auto; }
.nn-cro .warum__lede--center { margin-inline: auto; text-align: center; }
/* SEO/Ads verlinken auf die jeweilige Leistungsseite, innerhalb des zentrierten Fließtexts —
   gleiche Farb-/Hover-Konvention wie .why__link auf SEO/GEO und Tracking/Analytics. */
.nn-cro .warum__link { color: var(--jade-accent); font-weight: 700; }
.nn-cro .warum__link:hover, .nn-cro .warum__link:focus-visible { text-decoration: underline; }
.nn-cro .traffic__outro { margin-top: 2rem; }
.nn-cro .traffic__link { color: var(--jade-accent); }

/* 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-cro .nn-cta-band .kicker {
  position: relative; z-index: 2;
  margin-bottom: .75rem;
}
.nn-cro .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;
}