/* ═══════════════════════════════════════════════════════════════════ EM STANDARD · EIN MENUE, EIN FUSS, EIN LOGOBAND, EINE BEWEGUNG 25.08.2026 Murat: "menue und footer soll immer das gleiche sein, das logoband auch sodass wir es nicht immer wieder neu machen muessen / Startseite ist der Standard und alle anderen seiten muessen genau so sein. wir koennen nicht jede seite anders machen" Dieses Blatt haengt SITE-WEIT im Kopf. Jede Seite bekommt damit dieselben Werte, egal welches Markup sie historisch traegt. Die Site hat naemlich vier gewachsene Navigationen: .em-nav Startseite ← der Standard, wird hier gelesen .dg-nav Beratung, Check .navbar Impressum, Datenschutz, Kontakt, Termin, Danke .gk die fuenf GEO-Seiten (heute neu gebaut) #em-nav Karriere (per JavaScript gebaut) Alle Zahlen unten sind an der Startseite ABGELESEN, nicht gesetzt: Nav aussen padding 16px · gescrollt 13px Nav-Schale max-width 1340 · radius 100px · padding 11/12/11/22 gescrollt: rgba(10,12,16,.72) + blur(22px) saturate(1.5) hell: rgba(255,255,255,.82) Fuss padding 63px 0 40px · Grund #050505 · 4 Spalten · gap 30 Logoband Bildhoehe 29px · opacity .6 auf dunklem Grund zusaetzlich filter grayscale(1) brightness(1.85) Bewegung opacity + transform · 0,8s cubic-bezier(.16,1,.3,1) · Versatz 16px VORHER gemessen (die Abweichungen, die es zu schliessen galt): Nav Beratung 20px statt 16px aussen, gescrollt 12 statt 13 Fuss Beratung #0b0c0e statt #050505 Band Beratung 24px statt 29px, kein Filter, opacity .5 statt .6 Reveal Beratung 0,76s statt 0,8s; Versatz 18px (.dg-rv) und 14px (.dg-auf) statt 16px WICHTIG fuer den naechsten, der hier arbeitet: das ist die Zwischenstufe. Die Endstufe waere, dass alle Seiten dieselbe Webflow-KOMPONENTE fuer Kopf und Fuss benutzen (es gibt bereits "Navbar" und "Footer" mit je 12 Instanzen, sie tragen aber die alte Fassung). Bis dahin gilt: neue Seiten bekommen .gk / .gf, und dieses Blatt haelt alles auf einem Stand. ═══════════════════════════════════════════════════════════════════ */ /* ── 1 · NAVIGATION ─────────────────────────────────────────────────── */ /* Aussenmass wie die Startseite. */ body nav.dg-nav{padding-top:16px;padding-bottom:16px} body nav.dg-nav.dg-scr{padding-top:13px;padding-bottom:13px} body .gk .gk-in{padding-top:16px;padding-bottom:16px} /* Die alten Seiten haben keine Pillen-Schale im Markup - .navbar-contents uebernimmt die Rolle. Kein Scroll-Zustand noetig: der Balken traegt den Zustand dauerhaft, wie die Startseiten-Nav nach dem ersten Scrollen. */ body .navbar{padding-top:16px;padding-bottom:16px} body .navbar .container{max-width:1340px; padding-left:clamp(20px,4.6vw,72px); padding-right:clamp(20px,4.6vw,72px)} body .navbar .navbar-contents{ border-radius:100px;padding:11px 12px 11px 22px; background:rgba(10,12,16,.72); backdrop-filter:blur(22px) saturate(1.5); -webkit-backdrop-filter:blur(22px) saturate(1.5); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12), 0 18px 44px -26px rgba(0,0,0,.9)} /* ── 2 · FUSS ───────────────────────────────────────────────────────── */ body footer.dg-fuss{background:#050505} body footer.gf{background:#050505;padding:63px 0 40px} /* ── 3 · LOGOBAND ───────────────────────────────────────────────────── */ /* Gleiche Groesse und Deckkraft ueberall. Der Aufhell-Filter gilt nur auf dunklem Grund - auf Weiss wuerde er die Logos ausloeschen. Das ist kein Sonderweg, sondern derselbe Baustein in zwei Zustaenden. */ body .dg-kopfband img{height:29px;width:auto;opacity:.6} body .dg-kopfband img{filter:grayscale(1)} body .dg-kopfband{padding:26px 0 30px} /* ── 4 · BEWEGUNG ───────────────────────────────────────────────────── */ /* Ein Timing fuer die ganze Site. Die Startseite ist der Standard: 0,8s, cubic-bezier(.16,1,.3,1), 16px Versatz von unten. Die Ruhezustaende der einzelnen Systeme (.rv/.dg-rv/.dg-auf/.kxt-anim) bleiben unangetastet - hier wird nur vereinheitlicht, WIE sie laufen. */ body .dg-rv,body .dg-auf,body .kxt-anim > *{ transition-property:opacity,transform; transition-duration:.8s; transition-timing-function:cubic-bezier(.16,1,.3,1)} body .dg-rv:not(.dg-da),body .dg-auf:not(.dg-da){transform:translateY(16px)} body .kxt-anim > *:not(.kxt-in){transform:translateY(16px)} /* Gestaffelter Einsatz wie auf der Startseite: jedes weitere Kind startet 60 ms spaeter. Ohne die Staffelung wirkt ein Block, als wuerde er "umklappen" statt aufzugehen. */ body .dg-laeuft .dg-a2{transition-delay:.06s} body .dg-laeuft .dg-a3{transition-delay:.12s} body .dg-laeuft .dg-a4{transition-delay:.18s} body .dg-laeuft .dg-a5{transition-delay:.24s} @media (prefers-reduced-motion:reduce){ body .dg-rv,body .dg-auf,body .kxt-anim > *{ transition:none;transform:none;opacity:1} } /* Nachtrag zur Spezifitaet: jeder Selektor hier traegt ein fuehrendes "body" bzw. den Elementnamen. Grund: dieses Blatt haengt im SITE-Kopf und laedt damit VOR den Seitenblaettern (dg_beratung_v26.css, startseite_gesamt_v1.css). Bei gleicher Spezifitaet gewaenne das spaetere Blatt - body .dg-rv (0,1,1) schlaegt dessen .dg-rv (0,1,0). Kein einziges !important noetig. Die Startseite selbst wird bewusst NICHT angefasst: sie ist der Standard, aus dem die Werte stammen. */ /* ── 5 · FAQ: die Antwort darf nicht am Ruhezustand haengenbleiben ────── W4 aus dem Pruefprotokoll: vier Antworten auf der Startseite standen dauerhaft auf opacity 0. Ursache ist der Flachklopfer: aus `details[open] .a` wurde die Klasse `.f-details-open-a`, und die haengt seitdem STATISCH an jeder Antwort - samt `animation:faqauf .42s both`. Mit `both` haelt die Animation ihren ANFANGSzustand (opacity 0), solange sie nicht laeuft. Und laufen tut sie nicht, weil `.ruht` (seit 15.08.) Animationen ausserhalb des Bildes anhaelt. Also: geschlossen kein Effekt, offen die Animation - die echte Zustandslogik, wiederhergestellt. */ body details .f-details-open-a, body details[open] .f-details-open-a{animation:none;opacity:1;transform:none} /* Nachtrag nach der Live-Messung: die [open]-Regel oben hatte die Animation fuer den geoeffneten Eintrag WIEDER eingeschaltet - und damit genau den Fehler reproduziert (gemessen: drei Antworten auf 1, die geoeffnete weiter auf 0). Solange `.ruht` Animationen anhaelt, ist jede Animation mit fill-mode `both` ein Sichtbarkeitsrisiko. Der Aufgang faellt weg, die Antwort ist da - das ist der richtige Tausch. */ /* ── 6 · Kontrast der Mikrotexte ──────────────────────────────────────── W8: keine der 13 Seiten kam ohne Kontrastfehler durch. Die schlechtesten Werte sassen alle bei sehr kleinen, sehr blassen Beschriftungen - gemessen 1,67 bis 2,73 gegen die Norm 4,5:1 fuer Fliesstext. Auf #050505 liefert rgba(255,255,255,.78) rund 11:1, auf Weiss rgba(11,12,14,.72) rund 9:1. Groesse und Sperrung bleiben, nur die Deckkraft steigt - die Optik aendert sich kaum, die Lesbarkeit deutlich. */ body .rmeta,body .rmeta span{color:rgba(255,255,255,.78)} body .karkicker,body .karkicker-t,body .karkicker-n{color:rgba(255,255,255,.78)} body .em-nav-links a{color:rgba(255,255,255,.78)} body .dg-vn-alt,body .dg-vn-vorher{color:rgba(11,12,14,.72)} body .eg-idx{color:rgba(255,255,255,.72)} body .eg-light .eg-idx{color:rgba(11,12,14,.62)} body .fn-micro{color:rgba(255,255,255,.72)} /* ═══════════════════════════════════════════════════════════════════ GEO-SEITEN · KOPF UND FUSS (25.08.2026) Befund: die fuenf GEO-Seiten (/ki-recruiting, /social-media-agentur- karlsruhe, /video-agentur-karlsruhe, /recruiting-agentur-karlsruhe, /social-recruiting-karlsruhe) hatten LIVE weder Navigation noch Fuss. Damit fehlte auf ihnen auch jeder Weg zum Impressum - das ist nicht nur Murats Einheitlichkeits-Punkt, sondern die Anbieterkennzeichnung nach § 5 DDG, die von jeder Seite aus erreichbar sein muss. Der einzige Rechtslink kam bisher vom Consent-Banner (Datenschutz). Dazu: .wrap stand hier auf 1180px/26px, auf der Startseite auf 1340px/clamp(20px,4.6vw,72px). Beides ist unten angeglichen, ebenso die Kopf-Typografie (h1 und Kicker). Eigene Praefixe gk-/gf-, weil wiederverwendete Klassennamen in diesem Projekt schon zweimal fremde Werte geerbt haben (.dg-gleis, .dg-marke). ═══════════════════════════════════════════════════════════════════ */ /* ── Breite wie die Startseite ──────────────────────────────────────── */ .hero .wrap, section .wrap, .wrap{ max-width:1340px; padding-left:clamp(20px,4.6vw,72px); padding-right:clamp(20px,4.6vw,72px)} /* ── Kopf ───────────────────────────────────────────────────────────── */ .gk{position:sticky;top:0;z-index:80;background:rgba(8,10,14,.92); backdrop-filter:blur(22px) saturate(1.5); -webkit-backdrop-filter:blur(22px) saturate(1.5); border-bottom:1px solid rgba(255,255,255,.10)} .gk-in{max-width:1340px;margin:0 auto; padding:14px clamp(20px,4.6vw,72px); display:flex;align-items:center;gap:24px} .gk-marke{display:flex;align-items:center;line-height:0;flex:none} .gk-logo{height:30px;width:auto;display:block} .gk-mitte{display:flex;gap:26px;margin-left:auto; font-size:.9rem;font-weight:500;color:rgba(255,255,255,.62)} .gk-mitte a{color:inherit;text-decoration:none;transition:color .2s} .gk-mitte a:hover{color:#fff} .gk-tel{font-size:.9rem;font-weight:500;color:rgba(255,255,255,.62); text-decoration:none;white-space:nowrap} .gk-tel:hover{color:#fff} .gk-cta{background:#fff;color:#0B0C0E;border-radius:100px; padding:11px 20px;font-size:.9rem;font-weight:600; text-decoration:none;white-space:nowrap;transition:background .2s} .gk-cta:hover{background:rgba(255,255,255,.86)} @media (max-width:860px){ .gk-mitte,.gk-tel{display:none} .gk-in{gap:14px;justify-content:space-between} .gk-cta{margin-left:auto} } /* ── Fuss ───────────────────────────────────────────────────────────── */ .gf{background:#050505;color:rgba(255,255,255,.62); border-top:1px solid rgba(255,255,255,.10); padding:clamp(44px,6vh,72px) 0 clamp(26px,4vh,38px);font-size:.9rem} .gf-in{max-width:1340px;margin:0 auto; padding:0 clamp(20px,4.6vw,72px); display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:34px} .gf a{color:inherit;text-decoration:none;transition:color .2s} .gf a:hover{color:#fff} .gf-marke{display:block;line-height:0;margin-bottom:14px} .gf-logo{height:30px;width:auto;display:block} .gf-z{font-size:.84rem;color:rgba(255,255,255,.45);line-height:1.6} .gf-nav,.gf-r{display:flex;flex-direction:column;gap:9px} .gf-h{font-size:.7rem;font-weight:600;letter-spacing:.16em; text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:5px} .gf-bot{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px 26px; justify-content:space-between;align-items:center; margin-top:clamp(24px,3vh,36px);padding-top:20px; border-top:1px solid rgba(255,255,255,.10); font-size:.82rem;color:rgba(255,255,255,.45)} .gf-rechts{display:flex;gap:20px} @media (max-width:760px){ .gf-in{grid-template-columns:1fr 1fr} .gf-l{grid-column:1/-1} } /* ── Kopf-Typografie wie die Startseite ─────────────────────────────── */ .hero h1{font-size:clamp(2.3rem,1rem + 4.2vw,4rem)!important; line-height:.98!important;letter-spacing:-.05em!important; font-weight:600!important} .hero .status{font-size:.7rem!important;font-weight:600!important; letter-spacing:.16em!important;text-transform:uppercase!important} /* ── Reihenfolge: Kopf oben, Fuss unten ───────────────────────────────── Gemessen nach dem ersten Ausrollen: der Fuss stand DIREKT UNTER der Navigation, noch vor dem Kopfbereich. Grund: der gesamte Seiteninhalt dieser fuenf Seiten liegt gar nicht als Webflow-Elemente vor, sondern im Fuss-Freiraumcode der Seite - im Webflow-Baum haengen unter NUR die beiden hier eingefuegten Bausteine. "append an den Body" setzt den Fuss also hinter das letzte WEBFLOW-Element und damit trotzdem vor den ausgelieferten Inhalt. Deshalb ordnet der Body die drei Bloecke selbst: Kopf, Inhalt, Fuss. Kein JavaScript - ein per Skript verschobener Fuss blitzte sonst bei jedem Aufruf kurz oben auf. */ body{display:flex;flex-direction:column;min-height:100vh} body > *{order:1} body > .gk{order:0} body > .gf{order:9;margin-top:auto} /* Der Grund hinter der Leiste. Gemessen: body stand auf Weiss, die Leiste mit .72 Deckkraft darueber ergab einen hellgrauen Balken ueber dem sonst tiefschwarzen Kopf. Zwei Riegel, damit es in jedem Fall stimmt: die Leiste selbst deckt jetzt zu .92, und der Body faerbt sich - aber NUR auf Seiten, die diese Leiste wirklich tragen. Das Blatt haengt site-weit im Kopf, ein pauschales body{background} wuerde sonst auch die hellen Seiten einfaerben. */ body:has(> nav.gk){background:#050505} /* Nebenfund am 26.08. beim Einbau der Kundenstimmen: der Fuss der GEO-Seiten steht bei 390 px 7 px ueber (gemessen scrollWidth 397). Es sind ausschliesslich Fuss-Elemente - gf-l, gf-marke, gf-z, gf-r, gf-bot. Ursache ist die Zweispaltigkeit unter 760 px zusammen mit Inhalten, die nicht schmaler werden koennen. Unter 480 px daher eine Spalte, und min-width:0 erlaubt das Schrumpfen ueberhaupt erst (Grid-Kinder haben per Voreinstellung min-width:auto). */ @media (max-width:480px){ .gf-in{grid-template-columns:1fr} .gf-in > *{min-width:0} .gf-bot{flex-direction:column;align-items:flex-start;gap:10px} } .emg{--bg:#050609;--bg2:#0a0c11;--surface:#0f1218;--surface2:#141821;--line:rgba(255,255,255,.09);--text:#fff;--muted:#a4a8b2;--muted2:#6a6f7b;--accent:#0095ff;--accent-2:#57bcff;--accent-soft:rgba(0,149,255,.13);--ok:#38d39f;--warn:#ffb020;--lbg:#f4f5f7;--ltext:#0b0b0e;--lmuted:#565961;--lline:rgba(0,0,0,.10);--maxw:1180px;--r:16px;--sans:"Generalsans Medium","General Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--mono:"SFMono-Regular",ui-monospace,"JetBrains Mono","Menlo","Consolas",monospace;background:var(--bg);color:var(--text);font-family:var(--sans);font-weight:500;line-height:1.55;-webkit-font-smoothing:antialiased;}.emg *{box-sizing:border-box;margin:0;padding:0}.emg .eg-wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}.emg section{padding:94px 0;position:relative}.emg h1,.emg h2,.emg h3{color:#fff;font-weight:600;line-height:1.07;letter-spacing:-.025em;text-wrap:balance}.emg h1{font-size:clamp(2.2rem,4.4vw,3.5rem)}.emg h2{font-size:clamp(1.75rem,3.4vw,2.6rem);margin-bottom:18px}.emg h3{font-size:1.14rem;letter-spacing:-.015em;margin-bottom:8px}.emg p{color:var(--muted);font-size:1.05rem}.emg .eg-lead{font-size:1.18rem;line-height:1.5;color:#d6d8de}.emg .eg-lbl{font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}.emg .eg-idx{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;color:var(--muted2)}.emg .eg-accent{color:var(--accent)}.emg .eg-mono{font-family:var(--mono)}.emg .eg-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);display:inline-block;box-shadow:0 0 0 0 rgba(56,211,159,.55);animation:pulse 2.4s infinite;flex:0 0 auto}@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(56,211,159,.5)}70%{box-shadow:0 0 0 6px rgba(56,211,159,0)}100%{box-shadow:0 0 0 0 rgba(56,211,159,0)}}.emg .eg-grid-tex{background-image:radial-gradient(rgba(255,255,255,.04) 1px,transparent 1px);background-size:24px 24px}.emg svg{display:block}.emg .eg-ic svg{fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.emg .eg-btn{display:inline-flex;align-items:center;gap:10px;background:#fff;color:#050609;font-weight:600;font-size:1rem;padding:15px 26px;border-radius:100px;text-decoration:none;transition:transform .18s,box-shadow .18s;border:1px solid #fff}.emg .eg-btn:hover{transform:translateY(-2px);box-shadow:0 16px 44px rgba(0,149,255,.3)}.emg .eg-btn .eg-ar{transition:transform .18s}.emg .eg-btn:hover .eg-ar{transform:translateX(4px)}.emg .eg-btn.eg-ghost{background:transparent;color:#fff;border-color:var(--line)}.emg .eg-btn.eg-ghost:hover{border-color:#fff;box-shadow:none}.emg .eg-hero{padding-top:104px;padding-bottom:60px;overflow:hidden}.emg .eg-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 520px at 78% 8%,rgba(0,149,255,.22),transparent 60%),radial-gradient(700px 500px at 10% 30%,rgba(0,149,255,.08),transparent 55%);pointer-events:none}.emg .eg-hgrid{display:grid;grid-template-columns:0.92fr 1.08fr;gap:52px;align-items:center;position:relative}.emg .eg-status{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.71rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:100px;padding:8px 14px;background:rgba(255,255,255,.02)}.emg .eg-hero h1{margin:22px 0 0}.emg .eg-hero .eg-lead{margin:20px 0 30px;max-width:520px}.emg .eg-hbtns{display:flex;gap:12px;flex-wrap:wrap}.emg .eg-htrust{display:flex;gap:22px;margin-top:28px;flex-wrap:wrap}.emg .eg-htrust div{display:flex;flex-direction:column;gap:2px}.emg .eg-htrust b{font-size:1.35rem;letter-spacing:-.02em}.emg .eg-htrust small{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted2)}.emg .eg-os{position:relative;border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,var(--surface2),var(--surface));box-shadow:0 40px 120px -30px rgba(0,149,255,.35),0 20px 60px -20px rgba(0,0,0,.7);overflow:hidden}.emg .eg-os::after{content:"";position:absolute;inset:0;border-radius:20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06);pointer-events:none}.emg .eg-os-top{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}.emg .eg-os-top .eg-t{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:#dfe2e8}.emg .eg-os-top .eg-tag{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted2);border:1px solid var(--line);border-radius:6px;padding:4px 8px}.emg .eg-os-body{display:grid;grid-template-columns:1fr .62fr;gap:0}.emg .eg-os-funnel{padding:20px 20px 18px;border-right:1px solid var(--line)}.emg .eg-os-funnel .eg-h{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted2);margin-bottom:14px}.emg .eg-fr{display:grid;grid-template-columns:104px 1fr auto;align-items:center;gap:12px;margin-bottom:11px}.emg .eg-fr .eg-fl{font-size:.82rem;color:var(--muted)}.emg .eg-fr .eg-ft{height:24px;border-radius:6px;background:rgba(255,255,255,.04);overflow:hidden}.emg .eg-fr .eg-fb{height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,rgba(0,149,255,.55),var(--accent));transition:width 1.1s cubic-bezier(.3,.7,.3,1)}.emg .eg-fr.eg-win .eg-fb{background:linear-gradient(90deg,rgba(56,211,159,.5),var(--ok))}.emg .eg-fr .eg-fn{font-family:var(--mono);font-size:.86rem;color:#fff;font-variant-numeric:tabular-nums;text-align:right;min-width:52px}.emg .eg-fr.eg-win .eg-fn{color:var(--ok)}.emg.eg-reveal-on .eg-os.eg-in .eg-fb{width:var(--w)}.emg:not(.eg-reveal-on) .eg-os .eg-fb{width:var(--w)}.emg .eg-os-side{display:flex;flex-direction:column}.emg .eg-kpi{padding:16px 18px;border-bottom:1px solid var(--line)}.emg .eg-kpi small{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted2);display:block;margin-bottom:5px}.emg .eg-kpi b{font-size:1.5rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}.emg .eg-kpi .eg-up{color:var(--ok)}.emg .eg-kpi .eg-g{color:var(--ok)}.emg .eg-kpi:last-child{border-bottom:none}.emg .eg-os-feed{border-top:1px solid var(--line);padding:13px 18px 15px;background:rgba(255,255,255,.015)}.emg .eg-os-feed .eg-fh{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted2);margin-bottom:6px}.emg .eg-os-feed .eg-track{overflow:hidden;position:relative}.emg .eg-fi{display:flex;align-items:center;gap:9px;font-size:.8rem;color:#c7cad2;padding:5px 0}.emg .eg-fi .eg-mono{color:var(--muted2);font-size:.72rem;margin-left:auto}@keyframes marq{0%{transform:translateY(0)}100%{transform:translateY(-50%)}}.emg .eg-integ{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;margin-top:56px}.emg .eg-integ .eg-row{display:flex;align-items:center;gap:30px;flex-wrap:wrap;justify-content:center}.emg .eg-integ .eg-k{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted2)}.emg .eg-integ .eg-p{font-weight:600;color:#c9ccd3;letter-spacing:-.01em;font-size:1.02rem}.emg .eg-shead{max-width:730px}.emg .eg-shead.eg-mid{margin:0 auto;text-align:center}.emg .eg-shead .eg-lbl{display:block;margin-bottom:14px}.emg .eg-grid{display:grid;gap:16px;margin-top:42px}.emg .eg-g3{grid-template-columns:repeat(3,1fr)}.emg .eg-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:28px 26px;transition:transform .2s,border-color .2s,box-shadow .2s}.emg .eg-card::before{content:"";position:absolute;left:26px;right:26px;top:0;height:1px;background:linear-gradient(90deg,var(--accent),transparent);opacity:0;transition:opacity .2s}.emg .eg-card:hover{transform:translateY(-4px);border-color:rgba(0,149,255,.42)}.emg .eg-card:hover::before{opacity:1}.emg .eg-card .eg-ic{width:44px;height:44px;border-radius:11px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;margin-bottom:18px}.emg .eg-card .eg-ic svg{width:22px;height:22px}.emg .eg-card .eg-idx{position:absolute;top:26px;right:26px}.emg .eg-card p{font-size:.98rem}.emg .eg-card.eg-hl{background:linear-gradient(160deg,rgba(0,149,255,.17),rgba(0,149,255,.03));border-color:rgba(0,149,255,.35);display:flex;flex-direction:column;justify-content:center}.emg .eg-card.eg-hl h3{color:#fff}.emg .eg-card.eg-hl p{color:#c9e4ff}.emg .eg-pipe{display:grid;grid-template-columns:repeat(4,1fr);margin-top:42px;border:1px solid var(--lline);border-radius:var(--r);overflow:hidden}.emg .eg-stepc{padding:30px 24px;border-right:1px solid var(--lline)}.emg .eg-stepc:last-child{border-right:none}.emg .eg-stepc .eg-num{font-family:var(--mono);font-size:.78rem;color:var(--accent);letter-spacing:.06em;margin-bottom:16px;display:flex;align-items:center;gap:8px}.emg .eg-stepc .eg-num::after{content:"";height:1px;flex:1;background:var(--lline)}.emg .eg-stepc h3{font-size:1.05rem}.emg .eg-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:12px}.emg .eg-stat{border:1px solid var(--line);border-radius:var(--r);padding:30px 22px;background:var(--surface)}.emg .eg-stat b{display:block;font-size:2.5rem;font-weight:600;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}.emg .eg-stat span{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;color:var(--muted);text-transform:uppercase;margin-top:6px;display:block}.emg .eg-quote{margin-top:22px;border:1px solid var(--line);border-radius:var(--r);padding:36px;background:var(--surface)}.emg .eg-quote .eg-mk{font-family:var(--mono);color:var(--accent);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase}.emg .eg-quote p{font-size:1.24rem;color:#e9e9ee;margin-top:14px;line-height:1.45}.emg .eg-quote .eg-who{margin-top:18px;font-family:var(--mono);font-size:.82rem;color:var(--muted)}.emg .eg-ph{color:var(--accent)}.emg details{border:1px solid var(--lline);border-radius:12px;margin-top:12px;background:#fff;overflow:hidden}.emg summary{cursor:pointer;padding:20px 24px;font-weight:600;font-size:1.06rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}.emg summary::-webkit-details-marker{display:none}.emg summary::after{content:"+";font-family:var(--mono);color:var(--accent);font-size:1.4rem;line-height:1}.emg details[open] summary::after{content:"-"}.emg details p{padding:0 24px 22px;font-size:1rem}.emg .eg-light{background:var(--lbg);color:var(--ltext)}.emg .eg-light h1,.emg .eg-light h2,.emg .eg-light h3{color:var(--ltext)}.emg .eg-light p{color:var(--lmuted)}.emg .eg-light .eg-lead{color:#33353c}.emg .eg-light .eg-card{background:#fff;border-color:var(--lline);box-shadow:0 1px 2px rgba(0,0,0,.04)}.emg .eg-light .eg-card:hover{border-color:rgba(0,149,255,.4);box-shadow:0 12px 34px rgba(0,0,0,.07)}.emg .eg-light .eg-card .eg-idx{color:#a4a6ac}.emg .eg-final{text-align:center}.emg .eg-final .eg-box{position:relative;border:1px solid var(--line);border-radius:24px;padding:64px 34px;background:var(--surface);overflow:hidden}.emg .eg-final .eg-box::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 320px at 50% 120%,rgba(0,149,255,.24),transparent 60%)}.emg .eg-final .eg-box>*{position:relative}.emg .eg-micro{margin-top:16px;font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;color:var(--muted2)}.emg .eg-note{max-width:var(--maxw);margin:0 auto;padding:13px 26px;color:var(--muted2);font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;border-bottom:1px solid var(--line);text-align:center}.emg .eg-rv{transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}.emg.eg-reveal-on .eg-rv{opacity:0;transform:translateY(22px)}.emg.eg-reveal-on .eg-rv.eg-in{opacity:1;transform:none}@media(prefers-reduced-motion:reduce){.emg.eg-reveal-on .eg-rv{opacity:1;transform:none;transition:none}.emg .eg-dot{animation:none}.emg .eg-feedwrap{animation:none}}@media(max-width:940px){.emg .eg-hgrid{grid-template-columns:1fr;gap:38px}.emg .eg-g3,.emg .eg-stats{grid-template-columns:1fr}.emg .eg-stats{grid-template-columns:repeat(2,1fr)}.emg .eg-pipe{grid-template-columns:1fr}.emg .eg-stepc{border-right:none;border-bottom:1px solid var(--lline)}.emg .eg-stepc:last-child{border-bottom:none}.emg section{padding:64px 0}}@media(max-width:560px){.emg .eg-os-body{grid-template-columns:1fr}.emg .eg-os-funnel{border-right:none;border-bottom:1px solid var(--line)}.emg .eg-fr{grid-template-columns:84px 1fr auto}} /* ── STIMMEN (26.08.2026) ──────────────────────────────────────────────── Murat: "Fuege die Kundenkommentare von der alten Startseite bei den GEO- Seiten ein, wo leere Kundenstimmen sind." Am 25.08. waren dort Platzhalter-Stimmen entfernt worden - jetzt stehen die drei ECHTEN Referenzen der Startseite dort, wortgleich. .eg-quote gab es schon (dunkler Grund, heller Text). Neu ist nur die helle Variante und das Dreier-Raster - der Block steht hinter dem FAQ und damit auf hellem Grund. */ .emg .eg-stimmen{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px} .emg .eg-stimmen .eg-quote{margin-top:0;display:flex;flex-direction:column;padding:30px 28px} .emg .eg-light .eg-quote{background:#fff;border-color:var(--lline); box-shadow:0 1px 2px rgba(0,0,0,.04)} .emg .eg-light .eg-quote p{color:#22242a;font-size:1.02rem} .emg .eg-light .eg-quote .eg-who{color:#6b6d75;margin-top:auto;padding-top:18px} .emg .eg-light .eg-quote .eg-mk{color:var(--accent)} .emg .eg-stimmen .eg-who b, .emg .eg-stimmen .eg-who s, .emg .eg-stimmen .eg-wer{display:block;color:#0b0c0e;text-decoration:none; font-family:var(--sans,inherit);font-size:.9rem;letter-spacing:0;margin-bottom:2px} @media (max-width:900px){ .emg .eg-stimmen{grid-template-columns:1fr} } /* Der Import verschluckt ein , wenn es das ERSTE Kind eines Blocks ist - es bleibt nur die Textmarke ##INLINE0## stehen (gemessen 26.08.: das Label und das erste eg-mk fielen weg, die beiden folgenden nicht). ueberlebt dagegen ueberall. Deshalb tragen die Beschriftungen im Stimmen-Block ein - und brauchen hier die Abschaltung des Durchstrichs. */ .emg .eg-stimmen .eg-mk, .emg .eg-shead .eg-lbl{text-decoration:none} /* ═══════════════════════════════════════════════════════════════════ BERATUNG · KOPF: ANORDNUNG EXAKT WIE DIE STARTSEITE, GRUND HELL 25.08.2026 Murat: "hero bei startseite und beratung ist nicht genau gleich von der anordnung / beratungsseite hero kann weissen background haben. aber halt text usw platzierung alles gleich identisch" Gemessen bei 1440 px, VORHER: Startseite Wrap x=43 b=1340 Text x=109 Beratung Wrap x=262 b=901 Text x=328 ← 219 px daneben Der Grund war nicht die Breitenangabe, sondern eine Flexbox-Regel: .dg-h traegt margin:0 auto, und in einem flex-direction:column- Container schlaegt ein auto-Rand das voreingestellte stretch. Das Element schrumpft dann auf seine INHALTSbreite und zentriert sich. Deshalb width:100% - das ist der eigentliche Fix. Alle Werte unten sind an der Startseite abgelesen, nicht geschaetzt: Hero padding 120px 0 40px · min-height 100svh · justify center Linie 1px · rgba(...,.12) · margin-bottom 36px Kicker 11,2px · 600 · letter-spacing .16em · margin-bottom 27px H1 clamp(2.6rem,1rem + 5vw,4.6rem) · line-height .94 · -.055em Lead 17,6px · line-height 1,55 · max-width 44ch · margin-top 36px Aktion margin-top 36px · gap 18px Knopf padding 15px 26px · 15,04px · radius 3px (NICHT die Pille - die traegt nur der Nav-Knopf) Grafik right = --rand · width clamp(360px,44vw,660px) · top 50% ZWEI DINGE, DIE MAN HIER WISSEN MUSS: 1. Der Kopf traegt wieder .dg-hell-kopf. Das ist Absicht: dg_beratung_v8.js schaltet die Navigation ueber genau dieser Klasse auf hell - auf weissem Grund ist das jetzt richtig. 2. Jeder Selektor ist mit "header." praefixiert. Dieses Blatt haengt im SITE-Kopf und laedt damit VOR dem Seitenkopf, in dem dg_beratung_v26.css mit seinen eigenen .dg-hell-kopf-Regeln steht (Serifen, kursiv, 22ch). Bei gleicher Spezifitaet gewaenne das spaetere Blatt. header.dg-hell-kopf (0,1,1) schlaegt .dg-hell-kopf (0,1,0) - ohne ein einziges !important. Der Seitenkopf selbst ist nicht beschreibbar: set_page_freeform_code antwortet dort seit heute Abend mit HTTP 406. ═══════════════════════════════════════════════════════════════════ */ header.dg-hell-kopf{ background:#fff;color:#0B0C0E; position:relative;overflow:hidden; min-height:100svh; display:flex;flex-direction:column;justify-content:center; padding:120px 0 40px} header.dg-hell-kopf > .dg-h{ position:relative;z-index:3; width:100%;max-width:1340px;margin:0 auto; padding:0 clamp(20px,4.6vw,72px)} /* Die Linie ueber dem Kicker - auf der Startseite ein eigenes Element (.rule), hier als Pseudo-Element, damit kein Markup noetig ist. */ header.dg-hell-kopf > .dg-h::before{ content:"";display:block;height:1px; background:rgba(11,12,14,.12);margin-bottom:36px} header.dg-hell-kopf .dg-eyebrow{ font-size:11.2px;font-weight:600;letter-spacing:.16em; text-transform:uppercase;line-height:1.5; color:rgba(11,12,14,.55);margin-bottom:27px} header.dg-hell-kopf h1{ font-family:var(--sans);font-weight:600;font-style:normal; font-size:clamp(2.6rem,1rem + 5vw,4.6rem); line-height:.94;letter-spacing:-.055em; color:#0B0C0E;max-width:15ch} header.dg-hell-kopf h1 s{ font-style:normal;font-weight:600;text-decoration:none; color:rgba(11,12,14,.34)} header.dg-hell-kopf .dg-lead{ color:rgba(11,12,14,.62);max-width:44ch; margin-top:36px;font-size:17.6px;line-height:1.55} header.dg-hell-kopf .dg-aktion{margin-top:36px;gap:14px 18px} header.dg-hell-kopf .dg-knopf{ background:#0B0C0E;color:#fff; padding:15px 26px;font-size:15.04px;border-radius:3px} header.dg-hell-kopf .dg-knopf:hover{background:#22262d;color:#fff} header.dg-hell-kopf .dg-still-link{ color:rgba(11,12,14,.5);border-bottom-color:rgba(11,12,14,.18)} header.dg-hell-kopf .dg-still-link:hover{ color:#0B0C0E;border-bottom-color:#0B0C0E} /* Die Kurve sitzt jetzt an derselben Stelle wie der Radar der Startseite. Farben bleiben die Originale des hellen Entwurfs - die dunkle Umfaerbung von vorhin faellt mit der Klasse .dg-dkopf weg. */ header.dg-hell-kopf .dg-vn{ right:clamp(20px,4.6vw,72px); width:clamp(360px,44vw,660px); top:50%;transform:translateY(-50%)} /* Das Logoband haengt nicht mehr im Kopf, sondern steht als eigener Block darunter - so wie das Trustband auf der Startseite auch nicht im Hero sitzt. */ .dg-akt1 > .dg-kopfband{ margin-top:0;border-top:1px solid rgba(11,12,14,.10); padding:26px 0 30px;background:#fff} @media (max-width:900px){ header.dg-hell-kopf{min-height:auto;display:block;padding:118px 0 40px} header.dg-hell-kopf h1{max-width:none} header.dg-hell-kopf .dg-lead{max-width:52ch} /* Gemessen in einem echten 390-px-Rahmen: die Kurve lag auf dem Knopf (Aktion y=658..781, Kurve y=735). Die Bestandsregel setzt sie unter 900 px in den Fluss - aber die Desktop-Regel oben ist spezifischer und hat top/transform/right weiter mitgeschleppt. Deshalb hier ausdruecklich zurueck in den Fluss. */ header.dg-hell-kopf .dg-vn{position:relative;right:auto;top:auto; transform:none;width:100%;margin-top:clamp(30px,6vw,44px)} }