/*
 * Google Ads & ChatGPT Ads-Leistungsseite — portiert aus dem Mockup
 * ~/nonoise-mockups/google-chatgpt-ads-v1.html.
 *
 * ABWEICHUNG von der Projektkonvention „ein Pattern = eine CSS-Datei" (Abschnitt 8):
 * genau wie bei SEO/GEO, Tracking & Analytics, CRO und AI/Automatisierungen 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-gads gescopt. Die Klassennamen aus dem Mockup (.section, .wrap,
 * .compare …) sind bewusst generisch geblieben, damit ein Abgleich mit dem Mockup möglich
 * bleibt — sie gelten aber ausschließlich innerhalb von .nn-gads 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/google-ads.js angesprochen werden, sind nnGads-präfigiert
 * (nnGadsCanvasGrain, nnGadsCompareCaption etc.): 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/google-ads-cta.php). Diese Seite hat KEINEN
 * Selbst-Check (anders als die vier vorherigen Leistungsseiten).
 *
 * Große Screens (ab ca. 1900px, z. B. 2560×1440): für alle Bauteile, die es strukturell
 * schon auf der CRO-Seite gab (.wrap, h1/h2/h3, .kicker, .lede, .section, .anchors, .hero,
 * .pullquote, .svc, .steps, .pairs, .proof-band, .faq), wurden die bereits abgestimmten
 * Obergrenzen aus assets/css/cro.css 1:1 übernommen — die Mockup-eigenen Basiswerte dieser
 * Seite entsprechen exakt den Vor-Skalierungs-Werten von CRO, der vw/vh-Koeffizient blieb
 * jeweils unverändert. Für die beiden neuen Bauteile ohne Vorbild (.compare, .status-box)
 * wurde dieselbe Technik selbst angewendet: nur die dritte clamp()-Zahl (Obergrenze) wurde
 * um ca. 30 % angehoben, min und vw/vh-Koeffizient blieben unangetastet. Dadurch wächst die
 * Seite über den Punkt hinaus weiter, an dem die alten, engeren Obergrenzen bereits griffen,
 * 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-gads {
  --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/google-ads.js misst die echte Höhe und überschreibt den Wert. */
  --nav-h:97px;
}
/* .nn-gads ist DOM-Nachbar des fixierten Headers (.nn-nav, aus dem Fluss genommen) und
   dadurch das optisch erste Element im Fluss — WP-Core hängt seinem "is-layout-flow"-
   Default-Blockgap-CSS deshalb 32px margin-top an (blockGap:"0" im Template regelt nur den
   Abstand zwischen den Patterns INNERHALB dieses Wrappers, nicht seinen eigenen margin-top).
   Fehlte hier bislang (anders als .nn-seo in seo-geo.css) und schob den kompletten
   Hero-Bereich zusätzlich zum bereits auf die Nav-Höhe abgestimmten padding-top nach unten
   — Nutzer-Feedback: "Info-Box zu weit unten, Button passt nicht ins First View". */
.nn-gads {margin-top:0}
@media (prefers-color-scheme:dark) {

  html:not([data-theme="light"]) .nn-gads {
    --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-gads {
  --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-gads, .nn-gads *, .nn-gads *::before, .nn-gads *::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-gads .wrap {width:min(2550px,100% - clamp(2rem,10vw,13rem));margin-inline:auto}

.nn-gads h1, .nn-gads h2, .nn-gads h3 {font-weight:900;letter-spacing:-.03em;line-height:1.03;margin:0}
.nn-gads h1 {font-size:clamp(2.4rem,6.2vw,7.25rem)}
.nn-gads h2 {font-size:clamp(2rem,4.5vw,4.75rem);text-transform:uppercase}
.nn-gads h3 {font-size:clamp(1.15rem,2vw,2.1rem);letter-spacing:-.02em}
.nn-gads p {margin:0}

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

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

/* ==========================================================================
   ANKERNAVIGATION
   ========================================================================== */
.nn-gads .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-gads .anchors.is-stuck {
  background:var(--bg);
}
.nn-gads .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-gads .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-gads .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-gads .anchors a:hover, .nn-gads .anchors a:focus-visible {color:var(--jade-accent);transition:color .2s ease}
.nn-gads .anchors a b {
  font-weight:900;font-size:clamp(.72rem,.58vw,.88rem);color:var(--jade-accent);
  font-variant-numeric:tabular-nums;
}
.nn-gads .anchors a.is-active {
  color:var(--ink);background:var(--serp-chip);border-color:var(--line);
}
.nn-gads .anchors__bar {height:2px;background:var(--jade);width:0;transition:width .15s linear}

/* ==========================================================================
   HERO — TYPOGRAFISCHES POSTER
   2026-09-02 (Nutzer-Wunsch, Seitenangleichung): auf dieselbe Architektur wie SEO/GEO und
   die übrigen Leistungsseiten umgestellt — diese Seite lief bis dahin noch auf der alten,
   eigenständigen vh-/rem-Formel (min-height:min(100svh,80rem), eigener min-width:1900px-
   Sonderfall) statt der gemeinsamen, nav-höhen-basierten Formel; das machte den First View
   auf großen Screens (2560×1440) spürbar kleiner als bei den übrigen Seiten (Nutzer-
   Feedback). Jetzt 1:1 die SEO/GEO-Formel, siehe dortiger Kommentar in seo-geo.css.
   ========================================================================== */
.nn-gads .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-gads .hero {padding:calc(var(--nav-h) + 1.25rem) 0 1.5rem}
}

/* Atmosphäre statt Canvas-Farbfeld — ersetzt das frühere animierte Blob-Farbfeld
   (assets/js/google-ads.js), das hinter der fixierten Nav einen sichtbar hartkantigen
   Farbblock hinterließ. Siehe Begründung im Kopf von patterns/seo-geo-hero.php und
   assets/css/seo-geo.css (identische Lösung dort zuerst eingeführt). */
.nn-gads .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-gads .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-gads .hero .wrap {position:relative;z-index:3;margin-top:0}

/* Masthead-Zeile: Brotkrümel links, rotierendes Marken-Badge rechts — wie bei
   patterns/seo-geo-hero.php (Architektur D "The Typographic Poster"), siehe dortiger
   CSS-Kommentar in seo-geo.css für die volle Begründung von Layout/Badge/Animation. */
.nn-gads .hero__top {
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.75rem 1.5rem;
}
.nn-gads .hero__top .crumbs {margin-bottom:0}

/* 2026-09-03 (Nutzer-Wunsch, Nachschärfung): Koeffizient/Deckel nochmal von 6.7vw/8.75rem auf
   5.9vw/8rem gesenkt (Faktor ~0,879) — bei 6.7vw/8.75rem lag "Google Ads. ChatGPT Ads." auf
   einem 13"-MacBook-Air (1440px) nur ca. 9 % unter der Wrap-Breite (live per
   getBoundingClientRect gemessen, nicht geschätzt — die frühere "geprüft bis 2560px"-Notiz
   war offenbar knapper kalibriert, als der Name vermuten ließ). Auf Geräten mit leicht
   abweichendem Font-Rendering reichte das nicht (Nutzer-Feedback, Screenshot zeigte
   umgebrochene Zeile 1 + weit abgesetzte Zeile 2). Jetzt ca. 20 % Puffer bei 1440px. */
.nn-gads .hero__poster-heading {
  margin:clamp(1rem,2.5vh,2.9rem) 0 0;
  font-size:clamp(3rem,5.9vw,8rem);font-weight:900;
  letter-spacing:-.045em;line-height:.92;
}
.nn-gads .hero__line {display:block;max-width:100%}
.nn-gads .hero__line--a {text-align:left;color:var(--ink)}
/* Zeile 2 ("Ergebnisse.") in --jade-accent statt --ink — Nutzer-Vorgabe. */
.nn-gads .hero__line--b {
  text-align:right;color:var(--jade-accent);
  margin-top:clamp(.2rem,1vw,.87rem);
}
@media (max-width:640px) {
  .nn-gads .hero__poster-heading {font-size:clamp(2rem,10.5vw,2.6rem)}
  .nn-gads .hero__line--b {text-align:left}
}
/* 2026-09-02 (Nutzer-Wunsch, Seitenangleichung): Großbildschirm-Stufe ergänzt (fehlte bisher
   komplett) — ohne sie fror die Überschrift bereits ab ca. 2090px Breite bei 8.75rem ein und
   wirkte auf einem 2560×1440-Screen klein neben dem riesigen Viewport (genau das
   Nutzer-Feedback "Header zu klein bei großen Screens"). 2026-09-03 nachgeschärft: Breakpoint
   auf 2200px verschoben und Werte an die neue, sichere Basisformel (5.9vw/8rem) angepasst —
   die Basisformel selbst erreicht ihren 8rem-Deckel erst bei ca. 2169px, ein Breakpoint bei
   1600px hätte hier also einen sichtbaren Sprung erzeugt (Basisformel läge dort erst bei
   ca. 5.9rem). Bei 2200px liegt die Basisformel bereits sicher am Deckel (8rem), die
   Großbildschirm-Stufe (5.82vw, knapp unter dem alten Koeffizienten) übernimmt dort nahtlos
   und wächst bis 10rem weiter. */
@media (min-width:2200px) {
  .nn-gads .hero__poster-heading {font-size:clamp(8rem,5.82vw,10rem)}
}

/* Untere Zeile: Lede+CTAs links, "Was ist...?"-Box rechts — dieselbe Links/Rechts-Achse
   wie H1 und Masthead. */
.nn-gads .hero__bottom {
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;
  gap:clamp(1.5rem,4vw,3.48rem);
  margin-top:clamp(1.5rem,3.5vh,4.05rem);
}
/* Breiter als bei SEO/GEO (46ch): der Lede-Text dieser Seite ist länger, bei 46ch lief er
   auf viele kurze Zeilen und wirkte dadurch gestreckt/lang (Nutzer-Feedback). 58ch passt
   bei 1152px Wrap-Breite weiterhin bequem neben die "Was ist...?"-Box (Rest siehe
   .hero__bottom-Kommentar oben). */
.nn-gads .hero__bottom-main {max-width:58ch}
.nn-gads .hero__lede {margin:0;font-size:clamp(1rem,1.35vw,1.5rem);color:var(--ink)}
.nn-gads .hero__actions {display:flex;flex-wrap:wrap;gap:.85rem;margin-top:clamp(1.5rem,2.5vh,2.6rem)}

/* "Was ist Google Ads & ChatGPT Ads?"-Trigger + "Auf einen Blick"-Popover — 1:1 aus
   seo-geo.css portiert (dort ausführlich begründet: natives <details>/<summary> statt JS,
   damit der Erklärtext Crawlern immer im HTML zur Verfügung steht, das Panel klappt rein
   über CSS grid-template-rows auf/zu). Eigener Keyframe-Name (nn-gads-blick-bounce statt
   nn-seo-blick-bounce) — @keyframes sind global, alle Leistungsseiten-CSS-Dateien laden
   site-weit (CLAUDE.md Abschnitt 8). */
.nn-gads .hero__blick {
  position:relative;
  margin-left:auto;
}
.nn-gads .hero__blick-trigger {
  cursor:pointer;list-style:none;
  display:flex;flex-direction:column;gap:.35rem;
  width:min(clamp(26rem,10vw + 21rem,36rem),88vw);
  padding:clamp(1rem,.5vw + .85rem,1.5rem) clamp(1.25rem,.6vw + 1.05rem,1.75rem);
  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-gads-blick-bounce 1s ease 1s 1;
}
@keyframes nn-gads-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-gads .hero__blick-trigger {animation:none}
}
.nn-gads .hero__blick-trigger::-webkit-details-marker {display:none}
.nn-gads .hero__blick-trigger::marker {content:""}
.nn-gads .hero__blick-trigger-label {
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  font-size:clamp(.85rem,.5vw + .7rem,1.35rem);font-weight:900;color:var(--ink);
}
.nn-gads .hero__blick-trigger-icon {
  flex:none;
  width:clamp(1.2rem,.35vw + 1.1rem,1.7rem);height:clamp(1.2rem,.35vw + 1.1rem,1.7rem);
  border-radius:50%;
  display:grid;place-items:center;font-size:clamp(.72rem,.25vw + .65rem,1rem);font-weight:900;
  background:var(--jade-accent);color:var(--card);
}
.nn-gads .hero__blick-trigger-preview {
  font-size:clamp(.8rem,.35vw + .68rem,1.05rem);color:var(--ink-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.nn-gads .hero__blick:hover .hero__blick-trigger,
.nn-gads .hero__blick-trigger:focus-visible {
  border-color:var(--jade-accent);box-shadow:0 16px 36px -14px rgba(18,33,26,.3);
}
.nn-gads .hero__blick-panel {
  position:absolute;right:0;bottom:calc(100% + .85rem);z-index:20;
  width:min(clamp(26rem,10vw + 21rem,36rem),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-gads .hero__blick[open] .hero__blick-panel,
.nn-gads .hero__blick:hover .hero__blick-panel {
  grid-template-rows:1fr;opacity:1;visibility:visible;transform:translateY(0);
}
.nn-gads .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-gads .hero__blick-kicker {
  display:flex;align-items:center;gap:.5rem;
  margin:0;padding:clamp(1.4rem,.6vw + 1.2rem,2.2rem) clamp(1.6rem,.7vw + 1.35rem,2.5rem) 0;
  font-size:clamp(.78rem,.3vw + .68rem,1.1rem);font-weight:900;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-muted);
}
.nn-gads .hero__blick-dot {
  flex:none;width:clamp(.5rem,.15vw + .45rem,.7rem);height:clamp(.5rem,.15vw + .45rem,.7rem);
  border-radius:50%;background:var(--jade-accent);
}
.nn-gads .hero__blick-text {
  margin:0;padding:.75rem clamp(1.6rem,.7vw + 1.35rem,2.5rem) clamp(1.5rem,.6vw + 1.3rem,2.3rem);
  font-size:clamp(.92rem,.4vw + .8rem,1.3rem);line-height:1.65;color:var(--ink);text-align:left;
}
@media (max-width:640px) {
  .nn-gads .hero__blick-panel {right:auto;left:0}
  .nn-gads .hero {min-height:0}
  .nn-gads .hero__bottom {align-items:flex-start}
}
@media (max-height:820px) {
  .nn-gads .hero {min-height:0}
}

.nn-gads .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-gads .btn--hero {font-size:.85rem;padding:.85rem 1.5rem}
}

/* ==========================================================================
   HERO — ROTIERENDES MARKEN-BADGE (1:1 aus seo-geo.css portiert, eigener
   Keyframe-Name nn-gads-badge-spin statt nn-seo-badge-spin)
   ========================================================================== */
.nn-gads .hero__badge {
  flex:none;position:relative;
  width:clamp(4.5rem,6.5vw,8.7rem);aspect-ratio:1;
  display:grid;place-items:center;color:var(--jade-accent);
}
.nn-gads .hero__badge-ring {
  width:100%;height:100%;animation:nn-gads-badge-spin 16s linear infinite;
}
.nn-gads .hero__badge-ring text {
  font-size:8.6px;fill:currentColor;opacity:.75;
  font-weight:700;text-transform:uppercase;
}
.nn-gads .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-gads-badge-spin {to {transform:rotate(360deg)}}
@media (max-width:480px) {
  .nn-gads .hero__badge {width:clamp(3.5rem,11vw,4.5rem)}
}
@media (prefers-reduced-motion:reduce) {
  .nn-gads .hero__badge-ring {animation:none}
}

/* ==========================================================================
   HERO — EINTRITTS-ANIMATION
   2026-09-02 (Nutzer-Wunsch, Seitenangleichung): fehlte bisher komplett auf dieser Seite —
   identisch zu allen übrigen Leistungsseiten ergänzt.
   ========================================================================== */
@keyframes nn-gads-hero-in {
  from {opacity:0;transform:translateY(18px);filter:blur(6px)}
  to {opacity:1;transform:none;filter:blur(0)}
}
.nn-gads .hero .wrap > * {
  animation:nn-gads-hero-in .8s cubic-bezier(.16,1,.3,1) both;
}
.nn-gads .hero .wrap > *:nth-child(1) {animation-delay:0s}
.nn-gads .hero .wrap > *:nth-child(2) {animation-delay:.16s}
.nn-gads .hero .wrap > *:nth-child(3) {animation-delay:.34s}
@media (prefers-reduced-motion:reduce) {
  .nn-gads .hero .wrap > * {animation:none}
}

.nn-gads .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;
}
/* ==========================================================================
   ROAS — Wenn-dann-Gegenüberstellung, zwei unabhängige Paare nebeneinander.
   ========================================================================== */
.nn-gads .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-gads .pair__if {font-weight:700;color:var(--ink);font-size:clamp(1rem,1.35vw,1.5rem)}
.nn-gads .pair__arrow {color:var(--jade-accent);font-weight:900;flex:none}
.nn-gads .pair__then {color:var(--ink-muted);font-size:clamp(1rem,1.35vw,1.5rem)}

/* ROAS-Sektion: zwei Spalten, je Spalte ein Absatz mit seinem passenden .pair direkt
   darunter (ersetzt das volle-Breite-Absatz+.pairs-Layout aus dem Mockup, siehe Kommentar
   im Pattern). .lede darf hier ihre volle max-width (62/70ch) behalten, die Spaltenbreite
   begrenzt die Zeilenlänge ohnehin ausreichend. */
.nn-gads .roas__cols {
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.5rem);
  margin-top:clamp(1.75rem,4vw,3.75rem);
}
.nn-gads .roas__col {display:flex;flex-direction:column;gap:1.1rem}
.nn-gads .roas__col .pair {margin-top:auto}
@media (max-width:900px) {
  .nn-gads .roas__cols {grid-template-columns:1fr;gap:2rem}
  .nn-gads .roas__col .pair {margin-top:0}
}

/* ==========================================================================
   VERGLEICH — Google Ads vs. ChatGPT Ads. Zwei Mockups (Suchergebnis und
   Chat-Antwort) nebeneinander, plus vier klickbare Vergleichspunkte, die in
   BEIDEN Mockups synchron die passende Stelle hervorheben. Kein Vorbild bei
   CRO/SEO-GEO/Tracking/AI-Automatisierungen — Obergrenzen daher selbst um
   ca. 30 % angehoben (Begründung siehe Dateikopf), min/vw-Koeffizient
   unverändert aus dem Mockup übernommen.
   ========================================================================== */
.nn-gads .compare {
  border:1px solid var(--line);border-radius:24px;background:var(--card);
  box-shadow:var(--shadow);padding:clamp(1.75rem,4vw,3.9rem);
  margin-top:clamp(2rem,5vh,3.9rem);
}
.nn-gads .compare__toggles {display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:clamp(1.5rem,3vw,2.9rem)}
.nn-gads .ctog {
  border:1px solid var(--line);background:transparent;color:var(--ink-muted);
  font-family:inherit;font-weight:700;font-size:.9rem;
  padding:.5rem 1.1rem;border-radius:999px;cursor:pointer;
}
.nn-gads .ctog:hover {border-color:var(--jade-accent);color:var(--jade-accent);transition:color .2s ease,border-color .2s ease}
.nn-gads .ctog.is-active {background:var(--jade);border-color:var(--jade);color:#06110c}

.nn-gads .compare__grid {display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3vw,3.25rem)}
@media (max-width:760px) {.nn-gads .compare__grid {grid-template-columns:1fr}}
.nn-gads .compare__panel-label {
  display:block;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-muted);margin-bottom:.75rem;
}

.nn-gads .mock {border:1px solid var(--line);border-radius:16px;background:var(--paper);overflow:hidden}
.nn-gads .mock--search {padding:1rem}
.nn-gads .mock__bar {
  display:flex;align-items:center;gap:.6rem;
  background:var(--bg);border:1px solid var(--line);border-radius:999px;
  padding:.6rem 1rem;font-size:.85rem;color:var(--ink-muted);margin-bottom:1rem;
  transition:box-shadow .2s ease,border-color .2s ease;
}
.nn-gads .mock__dot {width:8px;height:8px;border-radius:50%;background:var(--jade);flex:none}
.nn-gads .mock__ad {
  display:flex;flex-direction:column;gap:.2rem;
  padding:.9rem 1rem;border:1px solid var(--line);border-radius:12px;background:var(--card);
  margin-bottom:.75rem;transition:box-shadow .2s ease,border-color .2s ease;
}
.nn-gads .mock__ad-tag {
  align-self:flex-start;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--jade-accent);border:1px solid var(--jade-accent);border-radius:4px;
  padding:.05rem .4rem;margin-bottom:.25rem;
}
.nn-gads .mock__ad-title {font-weight:700;color:var(--ink);font-size:.98rem}
.nn-gads .mock__ad-url {font-size:.78rem;color:var(--jade-accent)}
.nn-gads .mock__ad-desc {font-size:.85rem;color:var(--ink-muted)}
.nn-gads .mock__organic {font-size:.8rem;color:var(--ink-muted);opacity:.5;padding:.5rem 1rem}

.nn-gads .mock--chat {padding:1rem;display:flex;flex-direction:column;gap:.6rem}
.nn-gads .mock__bubble {border-radius:14px;padding:.7rem 1rem;font-size:.9rem;transition:box-shadow .2s ease,border-color .2s ease}
.nn-gads .mock__bubble--user {align-self:flex-end;background:var(--jade);color:#06110c;font-weight:600;border:1px solid transparent;max-width:85%}
.nn-gads .mock__bubble--ai {background:var(--card);border:1px solid var(--line);color:var(--ink-muted)}
.nn-gads .mock__sponsored {
  margin-top:.75rem;padding:.75rem;border:1px dashed var(--jade-accent);border-radius:10px;
  background:color-mix(in srgb,var(--jade) 8%,var(--card));
  display:flex;flex-direction:column;gap:.2rem;
  transition:box-shadow .2s ease,border-color .2s ease;
}

.nn-gads .compare__since {
  margin-top:.85rem;font-size:clamp(1rem,1.35vw,1.5rem);color:var(--ink-muted);
  border-radius:10px;transition:color .2s ease,font-weight .2s ease;
}

/* !important, weil sowohl .mock__bar, .mock__ad, .mock__sponsored als auch
   .mock__bubble bereits eigene border-Regeln mitbringen — der Hervorhebungs-
   Zustand muss sie unabhängig vom jeweiligen Bauteil überstimmen. */
.nn-gads [data-hl].is-highlighted {box-shadow:0 0 0 3px var(--jade) !important;border-color:var(--jade) !important}
.nn-gads .compare__since.is-highlighted {color:var(--ink);font-weight:700}

.nn-gads .compare__caption {
  margin-top:clamp(1.5rem,3vw,2.9rem);padding-top:clamp(1.5rem,3vw,2.9rem);
  border-top:1px solid var(--line);font-size:clamp(1rem,1.35vw,1.5rem);color:var(--ink-muted);text-wrap:pretty;
}
.nn-gads .compare__caption b {color:var(--ink)}

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

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

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

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

/* ==========================================================================
   FAQ
   ========================================================================== */
.nn-gads .faq-row {
  display:grid;
  grid-template-columns:1fr 0.7fr;
  gap:clamp(1.5rem,3.5vw,2.75rem);
  align-items:center;
}
.nn-gads .faq__photo {
  width:100%;
  max-width:none;
  aspect-ratio:4 / 3;
  height:460px;
  object-fit:cover;
  border-radius:20px;
  display:block;
  /* fixed height = FAQ area height when first detail is open; never resizes when
     opening/closing FAQ entries, keeping it stable against the accordion's changing height.
     margin-inline:auto centers it horizontally within its column */
  margin-inline:auto;
}
@media (max-width:900px) {
  .nn-gads .faq-row {grid-template-columns:1fr}
  .nn-gads .faq__photo {display:none}
  .nn-gads .faq__h2 {width:auto;max-width:100%}
}

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

.nn-gads .faq summary {
  list-style:none;cursor:pointer;position:relative;
  padding:1rem var(--faq-inset) 1rem 0;
  font-weight:900;font-size:clamp(0.95rem,1.5vw,1.45rem);letter-spacing:-.01em;
}
.nn-gads .faq summary::-webkit-details-marker {display:none}
.nn-gads .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-gads .faq details[open] summary::after {content:"−"}
.nn-gads .faq summary:hover {color:var(--jade-accent);transition:color .2s ease}

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

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

  .nn-gads, .nn-gads * {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-gads .section-head--center { text-align: center; }
.nn-gads .faq__h2 { width: 24ch; }
.nn-gads .warum__h2 { max-width: 26ch; margin-inline: auto; }
.nn-gads .warum__lede--center { margin-inline: auto; text-align: center; }
/* Interne Verlinkung (Tracking/CRO) im Fließtext — gleiche Konvention wie
   .foundation__link auf SEO/GEO bzw. .traffic__link auf CRO: eigene Klasse pro
   Section, überschreibt nur die Farbe mit dem Akzent-Grün, Rest (Unterstrich)
   bleibt der Browser-Default für <a>. */
.nn-gads .warum__link { color: var(--jade-accent); }
.nn-gads .pullquote--center-margin { margin-inline: auto; }

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