/* * SEO/GEO-Leistungsseite — portiert aus dem Mockup ~/nonoise-mockups/seo-geo-v2.html. * * ABWEICHUNG von der Projektkonvention „ein Pattern = eine CSS-Datei" (Abschnitt 8): * Diese eine Datei bedient alle acht Patterns der Seite. Grund: die Sektionen teilen * sich ein durchgehendes Gerüst (.section, .wrap, .section-head, .kicker, .btn, die * Farb-Tokens) — auf acht Dateien aufgeteilt müsste dieses Gerüst achtmal dupliziert * werden. Bei der Über-uns-Seite war das anders: dort hat jede Sektion ihr eigenes, * eigenständiges Layout. * * ALLE Regeln sind unter .nn-seo 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-seo 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). * * Nav-, Footer- und Theme-Switcher-CSS des Mockups wurde NICHT übernommen — dafür * sorgen die echten Template Parts (parts/header.html, parts/footer.html). * * Große Screens (ab ca. 1900px, z. B. 2560×1440): analog zu cro.css wurden alle * clamp()-Obergrenzen, die .wrap-Maximalbreite und die Ankernavigation-Größen * gegenüber den ursprünglichen Werten proportional angehoben (.wrap 1200px→1500px * 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, 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. * * Zweite Anhebung (Angleichung an cro.css/google-ads.css/social-ads.css, die mit * .wrap 2200px deutlich breiter laufen als diese Seite bei ihrer ersten Skalierung * erreichte): .wrap 1500px→2200px, .wrap--wide 1750px→2550px, alle übrigen * clamp()-Obergrenzen um denselben Faktor (~1.467) angehoben — Koeffizient und * Minimum wieder unverändert. Die bereits korrekt austarierte .anchors-Ankerleiste * wurde dabei NICHT angefasst. * * Dritte Anhebung (Nutzer-Feedback: bei echten 2560×1440-Screens nutzte .wrap nur * 2200px von 2560px verfügbarer Breite — 180px toter Rand pro Seite — und die * H1-Schriftgröße hatte ihre clamp()-Obergrenze bereits erreicht, die Seite "fror" * also sichtbar vor dem tatsächlichen Viewport ein): .wrap 2200px→2550px, * .wrap--wide 2550px→2950px, alle übrigen clamp()-Obergrenzen um denselben Faktor * (~1.16) angehoben — Koeffizient und Minimum wie in beiden vorherigen Runden * unverändert. Bewusst etwas Luft über 2560px hinaus gelassen (Ziel liegt knapp * über der 2560px-Marke), damit weder das Layout bei genau 2560px randlos wirkt * noch ein Ultrawide-Screen (z. B. 3440px) sofort wieder an einer neuen, zu * knappen Obergrenze hängen bleibt. Anders als in Runde 2 wurde diesmal AUCH die * .anchors-Ankerleiste mit demselben Faktor mitskaliert: das Ziel dieser Runde ist * explizit 2560px+, und eine unverändert kleine Ankerleiste neben dem jetzt * deutlich größer wachsenden restlichen Inhalt hätte auf sehr breiten Screens * unproportioniert klein gewirkt. */ /* ========================================================================== TOKENS — 1:1 die Werte aus theme.json / den bestehenden Pattern-CSS-Dateien. Light ist die unbedingte Basis, Dark die einzige bewachte Variante — dieselbe Konvention wie im Theme (siehe Kommentarblock in assets/css/nav.css). ========================================================================== */ .nn-seo { --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 ist der theme-abhängige Akzent für Text und Rahmen. --jade bleibt in BEIDEN Schemata fix, weil es als solider Button-Hintergrund mit dunkler Schrift dient — dieselbe Regel wie im Theme dokumentiert. */ --jade-accent:#288760; --serp-chip:#eef3ef; --shadow:0 1px 2px rgba(18,33,26,.04), 0 8px 24px rgba(18,33,26,.06); /* Beide Werte setzt JS aus den echten Element-Höhen (siehe „Höhen messen" unten). Die Startwerte hier sind nur die Notfall-Fallbacks, falls JS nicht läuft — die Nav bricht je nach Viewport auf zwei Zeilen um, ein fixer Wert wäre also zwangsläufig für die Hälfte aller Breiten falsch. */ /* Fallback-Höhe der fixierten Theme-Nav (.nn-nav), an der die Ankerleiste klebt. assets/js/seo-geo.js misst die echte Höhe und überschreibt den Wert — die Nav ist auf Mobile deutlich höher als auf Desktop, ein fixer Wert wäre also zwangsläufig für eine der beiden Breiten falsch. */ --nav-h:97px; } @media (prefers-color-scheme:dark) { html:not([data-theme="light"]) .nn-seo { --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-seo { --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-seo, .nn-seo *, .nn-seo *::before, .nn-seo *::after {box-sizing:border-box} /* WP-Core setzt via theme.json global blockGap (md, 2rem) eine margin-block-start-Regel auf jedes direkte Kind von .wp-site-blocks (":where(.wp-site-blocks) > *"). .nn-seo ist DOM-Nachbar des fixierten Headers (.nn-nav, aus dem Fluss genommen) und dadurch das optisch erste Element im Fluss — sein 32px-margin-top kollabiert nach oben bis zum Seitenanfang und schiebt den gesamten Hero-Bereich zusätzlich zum bereits auf die Nav-Höhe abgestimmten padding-top (siehe .hero weiter unten) nach unten. blockGap:"0" im Template regelt nur den Abstand zwischen den Patterns INNERHALB dieses Wrappers, nicht seinen eigenen margin-top. */ .nn-seo {margin-top:0} /* Gutter-Klammer auf clamp(2rem,10vw,13rem) angeglichen — dieselbe wie bei cro/google-ads/social-ads/ai-automatisierungen/leistungen-hub. Vorher deckelte der Rand hier schon ab 1200px bei nur 96px (6rem), waehrend die anderen Leistungsseiten bis 2080px auf 208px (13rem) weiterwuchsen — der Content stand dadurch im ganzen Bereich dazwischen sichtbar naeher am Bildschirmrand als auf den uebrigen Seiten. */ .nn-seo .wrap {width:min(2550px,100% - clamp(2rem,10vw,13rem));margin-inline:auto} .nn-seo .wrap--wide {width:min(2950px,100% - clamp(2rem,10vw,13rem))} .nn-seo h1, .nn-seo h2, .nn-seo h3 {font-weight:900;letter-spacing:-.03em;line-height:1.03;margin:0} .nn-seo h1 {font-size:clamp(2.4rem,6.2vw,8.4rem)} .nn-seo h2 {font-size:clamp(2rem,4.5vw,7.25rem);text-transform:uppercase} .nn-seo h3 {font-size:clamp(1.15rem,2vw,3.4rem);letter-spacing:-.02em} .nn-seo p {margin:0} .nn-seo .kicker { font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--jade-accent);margin:0; } /* text-wrap:pretty verhindert Schusterjungen — einzelne Wörter, die allein auf der letzten Zeile landen. Der Browser zieht dafür die vorherigen Zeilen etwas enger. Robuster als ein fest gesetzter Umbruch, weil es bei jeder Breite funktioniert statt nur bei der einen, für die man ihn gesetzt hat. */ .nn-seo .lede {font-size:clamp(1rem,1.35vw,1.5rem);color:var(--ink-muted);max-width:62ch;text-wrap:pretty} /* Etwas breiter als der Standard-Lede: der Abschlusssatz der Fundament-Section ist genau so lang, dass bei 62ch „Conversion-Optimierung" allein auf einer dritten Zeile landet. Ab 68ch setzt er sich in zwei Zeilen, 70ch lässt noch etwas Luft, falls sich die Schriftmetrik minimal verschiebt. Bewusst nur hier und nicht global — die übrigen Ledes sollen ihre 62ch behalten. */ .nn-seo .lede--wide {max-width:70ch} .nn-seo .section {padding:clamp(4.5rem,11vh,17.7rem) 0;position:relative} .nn-seo .section--paper {background:var(--paper)} .nn-seo .section-head {margin-bottom:clamp(2.25rem,5vh,7.65rem)} .nn-seo .section-head .kicker {margin-bottom:.75rem} .nn-seo .section-head p.lede {margin-top:1.25rem} /* Kicker→Lede-Abstand ist ein fester rem-Wert, der auf Großbildschirmen (siehe Hero-Regel oben) neben dem stark mitwachsenden Rest der Seite eng wirkt — hier etwas mehr Luft zwischen den Textblöcken. (Die analoge Regel für .why__points sitzt direkt bei deren Basis-Regel weiter unten — Cascade-Reihenfolge, nicht Spezifität, entscheidet hier, siehe Kommentar dort.) */ @media (min-width:1900px) and (min-height:1200px) { .nn-seo .section-head p.lede {margin-top:1.75rem} } /* CTA — identisch zum theme-weiten .nn-cta: fixes Jade mit dunkler Schrift in BEIDEN Schemata, Pill-Form. */ /* 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-seo .btn { display:inline-flex;align-items:center;justify-content:center;gap:.6rem; background:var(--jade);color:#06110c; font-weight:700;font-size:1.1rem;text-align:center; padding:1.05rem 2.1rem;border-radius:999px; text-decoration:none;border:0;cursor:pointer; font-family:inherit; } .nn-seo .btn:hover, .nn-seo .btn:focus-visible { background:#2f9c6f;transform:translateY(-2px);box-shadow:0 8px 22px rgba(18,33,26,.18); transition:background .2s ease,transform .2s ease,box-shadow .2s ease; } .nn-seo .btn:active {transform:translateY(0) scale(.98)} .nn-seo .btn--ghost {background:transparent;color:var(--ink);border:1px solid var(--line)} .nn-seo .btn--ghost:hover, .nn-seo .btn--ghost:focus-visible {background:transparent;border-color:var(--jade-accent);color:var(--jade-accent);transform:translateY(-2px);transition:color .2s ease,border-color .2s ease,transform .2s ease} .nn-seo .btn--ghost:active {transform:translateY(0) scale(.98)} /* ========================================================================== NAV ========================================================================== */ /* ========================================================================== BREADCRUMB Sichtbar im Hero über der Auszeichnung, zusätzlich als BreadcrumbList-JSON-LD im . Beides gehört zusammen: das Markup liefert die Rich-Snippet-Zeile in der Google-Ergebnisliste, die sichtbare Variante die Orientierung auf der Seite. Auf einer SEO-Leistungsseite wäre nur eines von beidem halbe Arbeit. ========================================================================== */ /* 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-seo .crumbs { display:flex;flex-wrap:wrap;align-items:center;gap:.45rem; list-style:none;margin:0 0 clamp(1.5rem,1.9vw,4.05rem);padding:0; font-size:.85rem;color:var(--ink-muted); } .nn-seo .crumbs li {display:flex;align-items:center;gap:.45rem} .nn-seo .crumbs a {color:var(--ink-muted);text-decoration:none} .nn-seo .crumbs a:hover, .nn-seo .crumbs a:focus-visible {color:var(--jade-accent);transition:color .2s ease} .nn-seo .crumbs [aria-current="page"] {color:var(--ink);font-weight:600} .nn-seo .crumbs__sep {opacity:.45} /* ========================================================================== ANKERNAVIGATION Klebt direkt unter der Hauptnav, sobald der Hero durchgescrollt ist. Die aktive Sektion wird per IntersectionObserver markiert, nicht über :target — :target reagiert nur auf Klicks, nicht aufs freie Scrollen. ========================================================================== */ .nn-seo .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); } /* Volldeckend, sobald sie eingerastet ist — gesetzt von assets/js/seo-geo.js (derselbe Scroll-Handler, der auch .nn-nav--solid auf der Hauptnav togglet). Das 88%-Glas darüber ist fürs anfängliche Überlagern mit dem Hero-Farbfeld gedacht; sobald die Leiste klebt und Inhalt darunter durchscrollt, soll sie wie die Nav vollständig blickdicht sein. */ .nn-seo .anchors.is-stuck { background:var(--bg); } /* 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-seo .anchors__inner { display:flex;gap:.3rem;padding:clamp(.55rem,.5vw,.93rem) 0; overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none; scroll-snap-type:x proximity; } .nn-seo .anchors__inner::-webkit-scrollbar {display:none} .nn-seo .anchors a { flex:none;scroll-snap-align:start; display:inline-flex;align-items:center;gap:.5rem; padding:clamp(.45rem,.5vw,.75rem) clamp(.9rem,.75vw,1.45rem);border-radius:999px; border:1px solid transparent; font-size:clamp(.87rem,.65vw,1.22rem);font-weight:700;white-space:nowrap; color:var(--ink-muted);text-decoration:none; } .nn-seo .anchors a:hover, .nn-seo .anchors a:focus-visible {color:var(--jade-accent);transition:color .2s ease} .nn-seo .anchors a b { font-weight:900;font-size:clamp(.72rem,.58vw,1.02rem);color:var(--jade-accent); font-variant-numeric:tabular-nums; } .nn-seo .anchors a.is-active { color:var(--ink);background:var(--serp-chip);border-color:var(--line); } /* Der Fortschrittsbalken zeigt, wie weit man im Seiteninhalt ist — ein zweites, ruhigeres Signal neben der aktiven Pille. */ .nn-seo .anchors__bar {height:2px;background:var(--jade);width:0;transition:width .15s linear} /* ========================================================================== HERO — TYPOGRAFISCHES POSTER Komplettes Redesign (Architektur D des Awwwards-Hero-Skills): keine Karte, keine Chip-Reihe, keine Info-Box mehr — die zweizeilige H1 IST die Grafik. Details zur Kompositionslogik (Masthead oben spiegelt die Zeilen-Ausrichtung, ein einziger CTA) stehen ausführlich im Kopf von patterns/seo-geo-hero.php, hier nur die Umsetzung. ========================================================================== */ /* min-height:100svh bleibt eine UNTERGRENZE (der Hero soll auf großen/leeren Viewports trotzdem raumfüllend wirken), aber justify-content:flex-start statt :center — Zentrieren addierte auf kurzen/breiten Laptop-Viewports (viel Breite, wenig Höhe, z. B. 1440×800 oder 1366×768) automatisch zusätzlichen Leerraum oben UND unten obendrauf auf das ohnehin schon vh-abhängige Padding, wodurch auf genau diesen „Standard"-Bildschirmgrößen einerseits zu viel Luft über der Kopfzeile stand und andererseits der CTA am unteren Rand ins Aus lief (Nutzer-Feedback). padding-top hängt jetzt an der GEMESSENEN Nav-Höhe (--nav-h, siehe assets/js/seo-geo.js) statt an einem geschätzten vh-Wert — garantiert exakt so viel Abstand wie zum Freistellen der fixierten Nav nötig ist, nicht mehr und nicht weniger, unabhängig von der Viewport-Höhe. Ersetzt damit auch die vorherige eigene ≥1900px-Sonderregel (deren Formel war identisch — jetzt der Standardfall für alle Breiten, nicht mehr dupliziert). */ /* Nutzer-Vorgabe: der sichtbare Weißraum zwischen Nav-Unterkante und Text (oben) soll genauso groß sein wie zwischen Text und Ankernavigation (unten). Zwei getrennte Ursachen für die vorherige Schieflage, beide hier behoben: 1) padding-top hatte (jenseits von --nav-h, das ja von der Nav selbst belegt ist, nicht Weißraum) einen ANDEREN Clamp als padding-bottom (1.5rem–3.48rem vs. 2rem–4.64rem) — jetzt derselbe Clamp auf beiden Seiten. 2) justify-content:flex-start ließ bei Inhalt, der die 100svh-Mindesthöhe nicht ausfüllt (z. B. auf sehr großen/hohen Screens), den GESAMTEN Leerraum unten vor der Ankernavigation liegen, nichts davon oben. justify-content:center verteilt diesen Leerraum stattdessen gleichmäßig auf beide Seiten, symmetrisch zum padding oben. */ .nn-seo .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); } /* 2026-09-02 (Nutzer-Wunsch, Seitenangleichung): kurze Browserfenster (z. B. ein nicht- maximiertes Fenster auf einem 13"-MacBook, effektiv oft nur 700-800px hoch) — dieselbe Regel, die zuerst bei CRO/Tracking & Analytics eingeführt wurde, jetzt auch hier, damit ALLE Leistungsseiten inkl. dieser Referenzseite dasselbe Verhalten haben. */ @media (max-height:820px) { .nn-seo .hero {padding:calc(var(--nav-h) + 1.25rem) 0 1.5rem} } /* Atmosphäre statt Canvas-Farbfeld — siehe Begründung im Kopf von patterns/seo-geo-hero.php und assets/js/seo-geo.js (der frühere Canvas-Blob-Effekt hinterließ oben, hinter der Nav, einen sichtbar hartkantigen Farbblock). Drei kräftigere Radial-Verläufe in unterschiedlichen Jade-Tönen (bleibt EINE Farbfamilie, zählt für die Skill-Vorgabe „max. 3 Farbtöne im Hero" also weiterhin als ein Hue neben Ink/Bg) auf dem jeweiligen --bg der Seite: rechts/oben — hinter Zeile 2 der H1 und dem Marken-Badge, der kräftigste Ton; unten links — hinter dem CTA, verbindet Farbe mit der Handlung; oben links — klein und leise als Gegengewicht, verhindert dass die rechte Seite zu einseitig wirkt. Kein Canvas, keine RAF-Schleife, reagiert automatisch auf Light/Dark, weil --bg/--jade* bereits themeabhängige Custom Properties sind (keine eigene Dark-Mode-Regel nötig). */ .nn-seo .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-seo .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} /* margin-top:0 aus demselben Grund wie .nn-seo (siehe Kommentar dort): .wrap ist drittes Kind im Flow von .hero (nach .hero__atmo und .hero__grain), WP-Core haengt seinem "is-layout-flow"-Default-Blockgap-CSS deshalb 32px margin-top an — hier unerwuenscht, .hero steuert den Abstand zur Nav bereits selbst ueber sein eigenes padding-top. */ .nn-seo .hero .wrap {position:relative;z-index:3;margin-top:0} /* Masthead-Zeile: Brotkrümel links, rotierendes Marken-Badge rechts — spiegelt die Links/Rechts-Achse, die die H1 darunter aufmacht, und rahmt den Poster-Block wie eine Zeitschriften-Kopfzeile mit Siegel. */ .nn-seo .hero__top { display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:.75rem 1.5rem; } .nn-seo .hero__top .crumbs {margin-bottom:0} /* Die H1 ist der einzige Fokuspunkt der Section: deutlich größer als die globale .nn-seo-h1-Formel (Poster-Charakter statt normaler Überschrift), nur im Hero-Scope überschrieben — die übrigen H1/H2 der Seite bleiben bei den Basiswerten. */ .nn-seo .hero__poster-heading { margin:clamp(1rem,2.5vh,2.9rem) 0 0; font-size:clamp(3rem,9.6vw,12.5rem);font-weight:900; letter-spacing:-.045em;line-height:.92; } .nn-seo .hero__line {display:block;max-width:100%} .nn-seo .hero__line--a {text-align:left;color:var(--ink)} /* Zeile 2 rechtsbündig UND in --jade-accent statt --ink: die beiden Zeilen visualisieren damit selbst schon die Dualität Google/KI (neutral vs. Markenakzent), ganz ohne zusätzliche Grafik — siehe Pattern-Kopf. */ .nn-seo .hero__line--b { text-align:right;color:var(--jade-accent); margin-top:clamp(.2rem,1vw,.87rem); } /* Mobile (Nutzer-Vorgabe, Screenshot-Referenz): die globale 9.6vw-Formel oben lässt Zeile 2 ("Zitiert von der KI.") auf schmalen Screens selbst umbrechen, plus rechtsbündig wirkt sie dadurch wie ein eigenständiger, abgehängter Block statt Teil derselben Headline. Kleinere, eigene Obergrenze (empirisch ermittelt: bis 42px bleibt Zeile 2 einzeilig, Zeile 1 bricht weiterhin zweizeilig um — genau das dreizeilige Bild aus dem Screenshot) plus linksbündig wie Zeile 1, Farbe (--jade-accent) bleibt unverändert. */ @media (max-width:640px) { .nn-seo .hero__poster-heading {font-size:clamp(2rem,10.5vw,2.6rem)} .nn-seo .hero__line--b {text-align:left} } /* Untere Zeile: Lede+CTA links, Plattform-Liste rechts — dieselbe Links/Rechts-Achse ein drittes Mal, durchgängiges Kompositionsprinzip statt einzeln erfundener Bausteine. align-items:end, weil die rechte Spalte (eine ruhige Fließtext-Zeile) deutlich kürzer ist als die linke und an der Grundlinie der CTA andocken soll, nicht oben. */ .nn-seo .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); } .nn-seo .hero__bottom-main {max-width:46ch} .nn-seo .hero__lede {margin:0;font-size:clamp(1rem,1.35vw,1.5rem);color:var(--ink)} .nn-seo .hero__bottom-main .btn {margin-top:clamp(1.5rem,2.5vh,2.6rem)} /* "Was ist SEO und GEO?"-Trigger + "Auf einen Blick"-Popover (ersetzt die frühere Plattform-Fließtext-Zeile, siehe Docblock-Kommentar in patterns/seo-geo-hero.php). Natives
/ statt JS: der Erklärtext liegt dadurch immer im HTML, auch im geschlossenen Zustand (Crawler-Anforderung), das Ein-/Ausblenden ist reines CSS. position:relative macht .hero__blick zum Verankerungspunkt für das absolut positionierte Panel. */ .nn-seo .hero__blick { position:relative; margin-left:auto; } /* Nutzer-Vorgabe: der Trigger soll schon geschlossen als eigene, auffällige Box wirken (nicht nur unterstrichener Text), plus eine abgeschnittene Vorschau des ersten Satzes ("SEO (Suchmaschinenoptimierung) sorgt dafür, …") signalisiert von selbst, dass hier mehr zu holen ist. Karte statt reinem Text: Rahmen/Hintergrund/Schatten, dieselbe Optik wie .hero__blick-panel darunter, damit Trigger und Panel als EIN zusammengehöriges Element wirken statt zweier unterschiedlicher UI-Bausteine. */ .nn-seo .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; /* Nutzer-Vorgabe: die Box soll nach dem Laden kurz auf sich aufmerksam machen — zweimal leicht "hüpfen", 1s nach dem Laden, damit sie nicht schon im ersten Moment (während noch andere Entry-Animationen laufen) untergeht. animation-delay statt JS/Timeout, läuft dadurch unabhängig von Ladezeit-Schwankungen einfach beim Style-Parse los. Eigener Keyframe-Name (nn-seo-blick-bounce) statt eines generischen — @keyframes sind global, nicht auf .nn-seo gescopt, alle Leistungsseiten-CSS-Dateien laden site-weit (siehe CLAUDE.md Abschnitt 8, derselbe Grund wie bei den JS-IDs). */ animation:nn-seo-blick-bounce 1s ease 1s 1; } @keyframes nn-seo-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-seo .hero__blick-trigger {animation:none} } /* Marker-Dreieck (Chrome/Safari) bzw. ::marker (Firefox) ausblenden — der Trigger trägt sein eigenes "?"-Icon schon im Label, ein zusätzliches UA-Dreieck wäre doppelt gemoppelt. */ .nn-seo .hero__blick-trigger::-webkit-details-marker {display:none} .nn-seo .hero__blick-trigger::marker {content:""} .nn-seo .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-seo .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); } /* Vorschau-Zeile: derselbe Satzanfang wie im Panel, hier abgeschnitten mit "…" — macht sichtbar, dass die Box aufklappbar ist, ohne den vollen Text zweimal komplett auszugeben. */ .nn-seo .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-seo .hero__blick:hover .hero__blick-trigger, .nn-seo .hero__blick-trigger:focus-visible { border-color:var(--jade-accent);box-shadow:0 16px 36px -14px rgba(18,33,26,.3); } /* Panel ist IMMER im Layout (kein display:none) — grid-template-rows:0fr klappt es optisch auf Nullhöhe zusammen (overflow:hidden auf dem inneren div schneidet den Überstand ab), der Text bleibt für Crawler trotzdem vollständig vorhanden. Dieselbe Technik wie bei den
-Akkordeons anderswo im Theme (z. B. .svc__panel in google-ads.css), hier zusätzlich absolut positioniert statt inline, damit daraus ein Popover statt eines Akkordeons wird. */ .nn-seo .hero__blick-panel { position:absolute;right:0;bottom:calc(100% + .85rem);z-index:20; /* Panel-Breite wächst mit derselben clamp()-Logik mit wie der Text darin — sonst würde größere Schrift auf großen Screens innerhalb einer fix schmalen Box nur noch mehr umbrechen, statt tatsächlich besser lesbar zu werden. */ 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-seo .hero__blick[open] .hero__blick-panel, .nn-seo .hero__blick:hover .hero__blick-panel { grid-template-rows:1fr;opacity:1;visibility:visible;transform:translateY(0); } .nn-seo .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-seo .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-seo .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-seo .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-seo .hero__blick-panel {right:auto;left:0} } /* min-height:0 statt der 100svh-Untergrenze aus der Basis-Regel: die volle Viewport-Höhe war als UNTERGRENZE für große/leere Viewports gedacht (siehe Kommentar bei .hero weiter oben), auf Mobile kippt das aber ins Gegenteil — der erzwungene 100svh-Boden ließ zwischen der Plattform-Zeile und dem Hero-Ende einen auffälligen Leerraum stehen (Nutzer-Feedback, zuerst auf der Leistungen-Hub-Seite gefunden, hier derselbe Effekt). Der Hero umschließt seinen Inhalt hier stattdessen einfach eng, mit demselben Innenabstand wie auf breiteren Screens. */ @media (max-width:640px) { .nn-seo .hero {min-height:0} .nn-seo .hero__bottom {align-items:flex-start} } @media (max-height:820px) { .nn-seo .hero {min-height:0} } /* CTA-Variante nur für den Hero: uppercase/getrackt statt der normalen .btn-Groß- /Kleinschreibung anderswo auf der Seite (z. B. im Selbst-Check) — eigenes Modifier statt die gemeinsame Basisklasse zu verändern, damit der Selbst-Check-Button unangetastet bleibt (siehe patterns/seo-geo-check.php). */ .nn-seo .btn--hero { font-size:.98rem;letter-spacing:.04em;text-transform:uppercase; } /* 2026-09-02 (Nutzer-Wunsch, Seitenangleichung): CTA im First View soll auf Mobile kompakter wirken als die Desktop-Größe — zuerst auf der AI/Automatisierungen-Seite so festgelegt, jetzt auf allen Leistungsseiten einheitlich. */ @media (max-width:640px) { .nn-seo .btn--hero {font-size:.85rem;padding:.85rem 1.5rem} } /* ========================================================================== HERO — ROTIERENDES MARKEN-BADGE Ersetzt ein reines Text-Label in der Masthead-Zeile (.hero__top): trägt „SEO/GEO Agentur Salzburg" bereits auf seinem eigenen Ring, dreht sich per reiner CSS-Animation langsam weiter. Sitzt bewusst im normalen Flex-Fluss von .hero__top statt absolut über der Headline zu schweben — bei einer zweizeiligen H1 mit clamp()-Schriftgröße und viewport-abhängigen Umbrüchen lässt sich eine feste Overlay-Position nicht robust berechnen, ohne bei irgendeiner Breite mit dem Headline-Text zu kollidieren. Rein dekorativ (aria-hidden), reine CSS-Rotation auf dem SVG — kein Scroll-Trigger, kein JS. ========================================================================== */ /* Größer als der erste Entwurf (Nutzer-Feedback) und mit einer robusteren Text-Passung. Zwei -Paare im Pattern statt eines einzigen langen Strings: beide tragen denselben Satz „SEO/GEO AGENTUR · SALZBURG", beide mit textLength="120" lengthAdjust="spacingAndGlyphs" (zwingt den Browser, Buchstabenabstand/Glyphenbreite so zu stauchen/strecken, dass der Text exakt 120 Einheiten lang wird — unabhängig von Zeichensatzmetrik-Schätzungen, die sich sonst leicht selbst überlappen, siehe unten), und startOffset 0 bzw. die halbe Kreisbahn (Umfang ≈ 289,03 bei r=46 ⇒ halber Umfang ≈ 144,51). Durch diese Punktsymmetrie sind die beiden Lücken zwischen den Sätzen automatisch gleich groß (je Umfang/2 − 120 ≈ 24,5 Einheiten) — kein Zufallsprodukt einer einzeln geschätzten Zahl, sondern eine geometrische Garantie. Der ursprüngliche Bug war, dass EIN langer String mit geschätzter font-size/letter-spacing zu lang für die Bahn war und sich dadurch selbst überlappte; die erste Korrektur (ein einzelner String mit textLength≈90 % vom Umfang) behob die Überlappung, hinterließ aber eine einzelne, ungleichmäßig sitzende Lücke — das hier ist die endgültige, geometrisch saubere Lösung. */ .nn-seo .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-seo .hero__badge-ring { width:100%;height:100%;animation:nn-seo-badge-spin 16s linear infinite; } .nn-seo .hero__badge-ring text { font-size:8.6px;fill:currentColor;opacity:.75; font-weight:700;text-transform:uppercase; } .nn-seo .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-seo-badge-spin {to {transform:rotate(360deg)}} @media (max-width:480px) { .nn-seo .hero__badge {width:clamp(3.5rem,11vw,4.5rem)} } @media (prefers-reduced-motion:reduce) { .nn-seo .hero__badge-ring {animation:none} } /* ========================================================================== HERO — EINTRITTS-ANIMATION Gestaffeltes Fade+Blur-Up der drei direkten Wrap-Kinder (Masthead+Badge, H1, Bottom-Zeile) statt eines statischen Sofort-Mounts. filter:blur ist wie transform/opacity GPU-kompositierbar, siehe Performance-Hinweis — deshalb hier bewusst mit im Spiel, nicht nur Fade+Move. ========================================================================== */ @keyframes nn-seo-hero-in { from {opacity:0;transform:translateY(18px);filter:blur(6px)} to {opacity:1;transform:none;filter:blur(0)} } .nn-seo .hero .wrap > * { animation:nn-seo-hero-in .8s cubic-bezier(.16,1,.3,1) both; } .nn-seo .hero .wrap > *:nth-child(1) {animation-delay:0s} .nn-seo .hero .wrap > *:nth-child(2) {animation-delay:.16s} .nn-seo .hero .wrap > *:nth-child(3) {animation-delay:.34s} @media (prefers-reduced-motion:reduce) { .nn-seo .hero .wrap > * {animation:none} } /* ========================================================================== MORPH-PIN — fixiert Section-Head + .morph 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/seo-geo.js). Exakt dieselbe Technik wie .nn-hub .spine.is-pinned in leistungen-hub.css: kein echtes Scroll-Hijacking/preventDefault, sondern eine künstlich verlängerte Section (.morph-pin.is-pinned), in der ein position:sticky-Kind (.morph-pin__sticky) fixiert bleibt, bis die Restlänge durchgescrollt ist. .is-pinned kommt ausschließlich per JS dazu (nie CSS-Default) und wird bei prefers-reduced-motion nicht gesetzt — dann bleibt alles normal im Fluss, nur ohne Scroll-Steuerung. Section-Head sitzt bewusst MIT im Sticky-Bereich (nicht davor im normalen Fluss): der Nutzer soll Headline + Regler zusammen im Viewport sehen, sobald die Section ankommt, nicht nur den Regler einzeln oben kleben. justify-content:center zentriert beides vertikal im Rest- Viewport. Top-Offset docken unter Nav UND Ankerleiste an (beide sticky), sonst verschwindet der Block beim Pinnen dahinter. */ .nn-seo .morph-pin {position:relative} .nn-seo .morph-pin.is-pinned {height:240svh} .nn-seo .morph-pin__sticky {padding:clamp(.75rem,2vh,1.5rem) 0} .nn-seo .morph-pin.is-pinned .morph-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; } /* ========================================================================== MORPH — das Herzstück der Seite. Ein Regler, der die klassische Ergebnisliste in eine KI-Antwort überführt. Das ist genau das Thema der Seite, als Bedienelement statt als Absatz. ========================================================================== */ .nn-seo .morph { border:1px solid var(--line);border-radius:24px;background:var(--card); box-shadow:var(--shadow);overflow:hidden; } .nn-seo .morph__bar { display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap; padding:1.1rem clamp(1.1rem,3vw,4.4rem);border-bottom:1px solid var(--line); background:var(--paper); } .nn-seo .morph__label {font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);white-space:nowrap} .nn-seo .morph__label--on {color:var(--jade-accent)} .nn-seo .morph__slider {flex:1;min-width:180px;appearance:none;height:4px;border-radius:99px;background:var(--line);outline:none;cursor:grab} .nn-seo .morph__slider:active {cursor:grabbing} .nn-seo .morph__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-seo .morph__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-seo .morph__slider:focus-visible {outline:2px solid var(--jade-accent);outline-offset:6px} .nn-seo .morph__stage {position:relative;min-height:clamp(340px,46vh,970px);padding:clamp(1.25rem,3vw,4.93rem)} /* Ergebnisliste */ .nn-seo .serp {display:flex;flex-direction:column;gap:.85rem} /* Suchleiste — rein dekorativ (kein input, keine Funktion), stellt den klassischen Google-Stil vor die Ergebnisliste. Im Unterschied zu .serp__title/.serp__text ist der Suchbegriff echter, lesbarer Text, weil hier der Vergleich SEO- vs. GEO-Anfrage tatsächlich gelesen werden soll. */ .nn-seo .serp__searchbar { display:flex;align-items:center;gap:.65rem; border:1px solid var(--line);border-radius:999px; padding:.7rem 1.1rem;background:var(--card);box-shadow:var(--shadow); } .nn-seo .serp__searchbar-icon {flex:none;width:1.15rem;height:1.15rem;color:var(--ink-muted)} .nn-seo .serp__searchbar-text {font-size:.95rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .nn-seo .serp__row { display:flex;gap:1rem;align-items:flex-start; padding:.75rem .9rem;border-radius:12px;background:var(--serp-chip); } .nn-seo .serp__num { font-weight:900;font-size:.85rem;color:var(--ink-muted); min-width:1.6rem;padding-top:.15rem;font-variant-numeric:tabular-nums; } .nn-seo .serp__lines {flex:1;display:flex;flex-direction:column;gap:.45rem} .nn-seo .serp__title {height:9px;border-radius:99px;background:var(--jade-mid);opacity:.75} .nn-seo .serp__text {height:7px;border-radius:99px;background:var(--ink-muted);opacity:.28} .nn-seo .serp__text--short {width:62%} /* KI-Antwort — bewusst an die verbreitete Optik generativer Antwort-Widgets angelehnt (Funken-Icon, hervorgehobene Kernaussage, Quellen als kleine Karten, Eingabezeile darunter), aber weiterhin klar ein eigenständiges Mockup: kein Logo, keine Fremdmarken-Farben, keine echte Funktion — die ganze Box bleibt aria-hidden und unterhalb der SERP-Ebene liegend, genau wie vorher. Der Antworttext selbst ist unverändert, nur die Hülle wurde nachgeschärft. */ .nn-seo .answer {position:absolute;inset:clamp(1.25rem,3vw,4.93rem);display:flex;flex-direction:column;gap:1rem} .nn-seo .answer__head {display:flex;align-items:center;gap:.5rem} .nn-seo .answer__spark { font-size:1rem;line-height:1;color:var(--jade-accent); filter:drop-shadow(0 0 6px color-mix(in srgb,var(--jade) 45%,transparent)); } .nn-seo .answer__badge {font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted)} .nn-seo .answer__body {font-size:clamp(1rem,1.5vw,2.55rem);line-height:1.65;color:var(--ink);max-width:60ch} .nn-seo .answer__body mark {background:color-mix(in srgb,var(--jade) 22%,transparent);color:inherit;padding:.05em .25em;border-radius:4px} .nn-seo .answer__foot {margin-top:auto;display:flex;flex-direction:column;gap:.85rem} /* Quellen als kompakte Karten statt reiner Textchips: die runde Nummer wird zum Mini-Avatar, wie die Icon-Kacheln vor jeder Quelle in einer echten KI-Übersicht. */ .nn-seo .answer__sources {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem} @media (max-width:520px) { .nn-seo .answer__sources {grid-template-columns:1fr} /* .morph__stage's height comes from .serp's normal-flow content (.answer is position:absolute and doesn't contribute) — its clamp() floor (340px) was tuned around the 2-column source grid. Stacking sources to 1 column right above quadruples that block's height, and the answer text itself also wraps to more lines at mobile widths, so the absolutely-positioned .answer overflowed past the stage's bottom edge and got sliced off by .morph's overflow:hidden (the "Frage stellen" row was the visible casualty). Raising the floor gives the taller mobile answer content room to fit. */ .nn-seo .morph__stage {min-height:clamp(600px,46vh,970px)} } .nn-seo .src { display:inline-flex;align-items:center;gap:.5rem;font-size:.82rem;font-weight:600; border:1px solid var(--line);border-radius:12px;padding:.4rem .7rem;color:var(--ink-muted); background:var(--bg);box-shadow:var(--shadow);min-width:0; } .nn-seo .src span:last-child {overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .nn-seo .src--you {border-color:var(--jade);color:var(--jade-accent);background:color-mix(in srgb,var(--jade) 10%,transparent)} .nn-seo .src__i { flex:none;width:1.4rem;height:1.4rem;border-radius:50%; display:grid;place-items:center; font-weight:900;font-size:.62rem;color:var(--card); background:color-mix(in srgb,var(--ink-muted) 55%,var(--jade-mid)); } .nn-seo .src--you .src__i {background:var(--jade)} /* Eingabezeile — rein dekorativ (kein , keine Funktion), rundet die Optik der Box ab, ohne dass irgendwo neuer, sachlicher Text hinzukäme. */ .nn-seo .answer__ask { display:flex;align-items:center;gap:.6rem; border:1px solid var(--line);border-radius:999px; padding:.55rem .6rem .55rem 1rem;background:var(--bg); } .nn-seo .answer__ask-plus { flex:none;width:1.5rem;height:1.5rem;border-radius:50%; display:grid;place-items:center;font-size:1rem;line-height:1; color:var(--ink-muted);border:1px solid var(--line); } .nn-seo .answer__ask-text {flex:1;font-size:.85rem;color:var(--ink-muted)} .nn-seo .answer__ask-mic { flex:none;width:1.9rem;height:1.9rem;border-radius:50%; background:color-mix(in srgb,var(--jade) 12%,transparent); position:relative; } .nn-seo .answer__ask-mic::before { content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:.5rem;height:.8rem;border-radius:999px;background:var(--jade-accent); } .nn-seo .morph__caption { padding:1rem clamp(1.1rem,3vw,4.4rem);border-top:1px solid var(--line); background:var(--paper);font-size:clamp(1rem,1.35vw,1.5rem);color:var(--ink-muted); } .nn-seo .morph__caption b {color:var(--ink)} /* ========================================================================== FUNDAMENT — zwei Bühnen, ein Unterbau ========================================================================== */ .nn-seo .foundation {display:grid;gap:1rem;margin-top:clamp(2rem,5vh,6.6rem)} .nn-seo .foundation__stages {display:grid;grid-template-columns:1fr 1fr;gap:1rem} @media (max-width:640px) { .nn-seo .foundation__stages {grid-template-columns:1fr} } .nn-seo .stage { border:1px solid var(--line);border-radius:20px;padding:clamp(1.25rem,3vw,4.4rem); background:var(--card);box-shadow:var(--shadow); } .nn-seo .stage__tag {font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--jade-accent)} .nn-seo .stage h3 {margin:.6rem 0 .7rem} .nn-seo .stage p {color:var(--ink-muted);font-size:clamp(1rem,1.35vw,1.5rem)} .nn-seo .base { border:1px dashed var(--jade-accent);border-radius:20px; padding:clamp(1.1rem,2.5vw,3.3rem); background:color-mix(in srgb,var(--jade) 7%,transparent); display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;justify-content:space-between; } .nn-seo .base__label {font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--jade-accent)} .nn-seo .base__pillars {display:flex;flex-wrap:wrap;gap:.6rem} .nn-seo .pillar { font-weight:700;font-size:clamp(1rem,1.35vw,1.5rem);color:var(--ink); border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:.5rem 1rem; } /* ========================================================================== LEISTUNGEN — nummerierte Full-Bleed-Zeilen, das Signature-Element der Startseite. Hier zusätzlich aufklappbar, weil jede Leistung einen eigenen Absatz mitbringt. ========================================================================== */ .nn-seo .svc {border-top:1px solid var(--line)} .nn-seo .svc:last-of-type {border-bottom:1px solid var(--line)} .nn-seo .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,4.18rem) 0; } .nn-seo .svc__num {font-weight:900;font-size:.9rem;color:var(--ink-muted);font-variant-numeric:tabular-nums} .nn-seo .svc__name {font-weight:900;font-size:clamp(1.15rem,2.3vw,3.83rem);letter-spacing:-.02em;line-height:1.15} /* Der Untertitel ist die Kurzfassung der Leistung — sobald der volle Text aufgeklappt ist, sagt er nichts Neues mehr und blendet sich aus. visibility statt display:none, damit er auch aus dem Accessibility-Baum verschwindet und trotzdem weich überblenden kann. Die Grid-Spalte bleibt dabei erhalten (Spaltenbreiten kommen aus dem Template, nicht aus dem Inhalt), der Leistungsname springt also nicht. */ .nn-seo .svc__hint { color:var(--ink-muted);font-size:clamp(1rem,1.35vw,1.5rem); transition:opacity .25s ease, visibility .25s ease; } .nn-seo .svc[open] .svc__hint {opacity:0;visibility:hidden} .nn-seo .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-seo .svc__btn:hover .svc__name, .nn-seo .svc__btn:focus-visible .svc__name {color:var(--jade-accent);transition:color .2s ease} .nn-seo .svc__btn:hover .svc__toggle, .nn-seo .svc__btn:focus-visible .svc__toggle {background:var(--jade);color:#fff;border-color:var(--jade);transition:background .2s ease,color .2s ease} .nn-seo .svc__panel { display:grid;grid-template-rows:0fr; transition:grid-template-rows .35s ease; } .nn-seo .svc[open] .svc__panel {grid-template-rows:1fr} .nn-seo .svc__panel > div {overflow:hidden} /* Der Fließtext startet exakt unter dem Leistungsnamen, nicht unter der Nummer. --svc-indent bildet dafür die erste Spalte des Button-Grids nach: Nummernspalte plus Grid-Gap (4.5rem + 1rem). Als Variable statt als fester Wert, damit die Einrückung nicht auseinanderläuft, wenn das Grid einmal geändert wird — beide Stellen stehen direkt untereinander. Rechts derselbe Abstand wie links, der Absatz sitzt also symmetrisch in der Zeile. Keine Begrenzung auf 70ch mehr, die Breite ergibt sich aus den beiden Einrückungen. */ .nn-seo .svc {--svc-indent:5.5rem} .nn-seo .svc__panel p { color:var(--ink-muted); font-size:clamp(1rem,1.35vw,1.5rem); padding:0 var(--svc-indent) clamp(1.25rem,3vh,4.4rem); } .nn-seo .svc[open] .svc__toggle {background:var(--jade);color:#fff;border-color:var(--jade);transform:rotate(45deg)} @media (max-width:760px) { .nn-seo .svc__btn {grid-template-columns:3rem 1fr 2.4rem} .nn-seo .svc__hint {display:none} /* Nummernspalte schrumpft auf 3rem, die Einrückung entsprechend auf 3rem + 1rem. */ .nn-seo .svc {--svc-indent:4rem} /* Rechts hier bewusst NICHT symmetrisch: bei 375px blieben von der Zeile sonst nur rund 215px Textbreite übrig, das sind gut 30 Zeichen pro Zeile. Links bleibt die Ausrichtung unter dem Namen, rechts läuft der Text bis an den Rand. */ .nn-seo .svc__panel p {padding-right:0} } /* ========================================================================== ABLAUF ========================================================================== */ .nn-seo .steps {display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;counter-reset:s} @media (max-width:900px) { .nn-seo .steps {grid-template-columns:1fr 1fr} } @media (max-width:520px) { .nn-seo .steps {grid-template-columns:1fr} } .nn-seo .step { position:relative;padding:clamp(1.4rem,3vw,4.4rem);border-radius:20px; border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow); } .nn-seo .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-seo .step h3 {font-size:1.1rem;margin-bottom:.5rem} .nn-seo .step p {color:var(--ink-muted);font-size:clamp(1rem,1.35vw,1.5rem)} /* ========================================================================== WARUM WIR ========================================================================== */ .nn-seo .why {display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,8.8rem);align-items:start} @media (max-width:900px) { .nn-seo .why {grid-template-columns:1fr} } .nn-seo .why__points {display:flex;flex-direction:column;gap:1.25rem;margin-top:2rem} /* Muss NACH der Basis-Regel stehen: gleiche Spezifität, also entscheidet die Cascade-Reihenfolge im Stylesheet über die Media Query selbst. */ @media (min-width:1900px) and (min-height:1200px) { .nn-seo .why__points {gap:1.75rem} } .nn-seo .why__point {display:flex;gap:1rem;align-items:flex-start} .nn-seo .why__arrow {color:var(--jade-accent);font-weight:900;line-height:1.5;flex:none} .nn-seo .why__point p {color:var(--ink-muted);font-size:clamp(1rem,1.35vw,1.5rem)} .nn-seo .why__point b {color:var(--ink)} /* Tracking/CRO/Google Ads verlinken auf die jeweilige Leistungsseite, bleiben aber fett wie die übrigen hervorgehobenen Begriffe hier — .why__link überschreibt nur die Farbe der Basis-Regel oben (var(--ink)) mit dem Akzent-Grün, denselben Farbwert wie .foundation__link in der Fundament-Sektion dieser Seite. */ .nn-seo .why__link {color:var(--jade-accent)} .nn-seo .why__link:hover, .nn-seo .why__link:focus-visible {text-decoration:underline} .nn-seo .founders { /* Innenabstand als Variable, weil das Foto ihn unten wieder aufheben muss, um randlos bis an die Kartenkanten zu laufen. */ --founders-pad:clamp(1.5rem,3vw,4.93rem); border:1px solid var(--line);border-radius:24px;background:var(--card); padding:var(--founders-pad);box-shadow:var(--shadow); /* clippt das randlose Foto sauber an den abgerundeten unteren Ecken */ overflow:hidden; } .nn-seo .founders__tag {font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--jade-accent)} .nn-seo .founders__num {font-size:clamp(3rem,7vw,10rem);font-weight:900;letter-spacing:-.05em;line-height:1;margin:.5rem 0} .nn-seo .founders p {color:var(--ink-muted);font-size:clamp(1rem,1.35vw,1.5rem)} /* Foto statt Namensliste. Zieht über die negativen Ränder bis an die Kartenkanten und ersetzt die drei Zeilen mit Namen und Schwerpunkten — das Gesicht der drei sagt an dieser Stelle mehr als die Aufzählung. object-position holt den Bildausschnitt auf die Personen: sie sitzen im Originalfoto rechts der Mitte, ein mittiger Crop würde die leere Wand links zeigen. */ /* Beim Portieren ins Theme geändert: Im Mockup lief das Foto randlos bis an die Kartenkanten, wodurch nur die beiden UNTEREN Ecken rund waren (die der Karte). Auf Wunsch sitzt es jetzt als eigenes Feld INNERHALB des Innenabstands — dadurch sind alle vier Ecken sichtbar abgerundet. */ .nn-seo .founders__frame { width:100%; margin:1.5rem 0 0; height:clamp(190px,23vw,620px); border-radius:16px; overflow:hidden; } .nn-seo .founders__photo { display:block;width:100%;height:100%; object-fit:cover; /* Reinzoomen auf die drei Personen. Dasselbe Vorgehen wie beim Team-Foto der Startseite (siehe .nn-team-photo-frame im Theme): das Originalfoto ist weit gefasst, ein reiner cover-Crop zeigt zu viel Raum und zu wenig Gesichter. transform-origin sitzt auf der Gruppe, die rechts der Bildmitte sitzt. */ /* Kein Reinzoomen mehr: Das Foto ist seit dem Tausch (team-seo-geo-founders.jpg) bereits eine Nahaufnahme der drei am Tablet. Der 1.55-fache Zoom des Mockups war für die alte, weit gefasste Aufnahme gedacht und würde hier die Köpfe anschneiden. */ object-position:center 42%; } /* ========================================================================== SELBST-CHECK ========================================================================== */ .nn-seo .check { border:1px solid var(--line);border-radius:24px;background:var(--card); box-shadow:var(--shadow);overflow:hidden; } .nn-seo .check__head {padding:clamp(1.5rem,3vw,4.93rem);border-bottom:1px solid var(--line)} .nn-seo .check__head p {color:var(--ink-muted);font-size:clamp(1rem,1.35vw,1.5rem);margin-top:.75rem;max-width:60ch} .nn-seo .check__list {padding:clamp(.75rem,2vw,2.2rem) clamp(1.5rem,3vw,4.93rem)} .nn-seo .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-seo .check__item:last-child {border-bottom:0} .nn-seo .check__item p {font-weight:600;flex:1;min-width:220px} .nn-seo .check__toggle {display:flex;gap:.4rem;flex:none} .nn-seo .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-seo .qbtn:hover {border-color:var(--jade-accent);color:var(--jade-accent);transition:color .2s ease,border-color .2s ease} .nn-seo .qbtn.is-on {background:var(--jade);border-color:var(--jade);color:#06110c} .nn-seo .check__result { padding:clamp(1.5rem,3vw,4.93rem);border-top:1px solid var(--line); background:var(--paper);display:none; } .nn-seo .check__result.is-visible {display:block} .nn-seo .check__score {font-size:clamp(1.35rem,2.6vw,4.18rem);font-weight:900;letter-spacing:-.02em} .nn-seo .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-seo .meter {height:6px;border-radius:99px;background:var(--line);overflow:hidden;margin-bottom:1.5rem;max-width:420px} .nn-seo .meter__fill {height:100%;background:var(--jade);width:0;border-radius:99px;transition:width .5s ease} /* ========================================================================== FAQ ========================================================================== */ /* Durchgehende Liste, jede Frage eine Zeile mit Trennlinie — bewusst KEINE Karten: die Seite hat mit Fundament, Ablauf und Gründer-Kasten schon genug Kacheln, und die FAQ ist am Seitenende der ruhigste Block. Der rechte Einzug bleibt (siehe --faq-inset unten), der war unabhängig vom Kartenlook nötig. */ .nn-seo .faq { max-width:900px;margin-inline:auto; /* Spalte, die das +/− rechts belegt, plus Abstand. Frage UND Antwort halten sich beide daran — dadurch stehen ihre rechten Kanten bündig untereinander und kein Wort läuft mehr bis an den Rand. */ --faq-inset:3rem; } .nn-seo .faq details {border-bottom:1px solid var(--line)} .nn-seo .faq details:first-of-type {border-top:1px solid var(--line)} .nn-seo .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,2.67rem);letter-spacing:-.01em; } .nn-seo .faq summary::-webkit-details-marker {display:none} .nn-seo .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-seo .faq details[open] summary::after {content:"−"} .nn-seo .faq summary:hover {color:var(--jade-accent);transition:color .2s ease} /* Antwort hält rechts denselben Abstand wie die Frage. */ .nn-seo .faq__a { padding:0 var(--faq-inset) 1.6rem 0; color:var(--ink-muted); font-size:clamp(1rem,1.35vw,1.5rem); } /* ========================================================================== CTA-BAND ========================================================================== */ .nn-seo .cta { position:relative;overflow:hidden;isolation:isolate; background:#0a1410;color:#e7e9ec; padding:clamp(4.5rem,12vh,17.7rem) 0;text-align:center; } .nn-seo .cta__canvas {position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.55} .nn-seo .cta .wrap {position:relative;z-index:1} .nn-seo .cta h2 {max-width:20ch;margin-inline:auto} .nn-seo .cta p {color:#b0b5bf;margin:1.5rem auto 2.25rem;max-width:52ch} .nn-seo .cta .kicker {color:var(--jade-light)} /* ========================================================================== FOOTER (verkürzt — im Mockup nur als Abschluss) ========================================================================== */ @media (prefers-reduced-motion:reduce) { .nn-seo, .nn-seo * {animation-duration:.001ms !important;transition-duration:.001ms !important} } /* Ergänzungen beim Portieren ins Theme — im Mockup standen diese beiden Werte als inline style-Attribute direkt im Markup. Inline styles überleben eine Bearbeitung im Block-Editor nicht zuverlässig und lassen sich nicht theme-abhängig umschalten. */ .nn-seo .foundation__outro { margin-top: 2rem; } .nn-seo .foundation__link { color: var(--jade-accent); } /* Beim Portieren ins Theme: Das Leistungs-Akkordeon war im Mockup ein