/* Self-gehostete Schriften (Google Fonts, OFL – Lizenzen als OFL-*.txt im Schriftverzeichnis): Inter Tight als variable Datei für alle Gewichte, Instrument Serif als statischer Italic-Akzent. Keine Requests an die Google-Fonts-CDN – alles von der eigenen Domain (Datenschutz-Konvention). */ /* font-display:optional — verhindert Layout-Shift beim Font-Swap (CLS auf /website-relaunch/); Fonts sind klein (15/45 KB) und werden im preloadd */ @font-face { font-family:'Inter Tight'; font-style:normal; font-weight:100 900; font-display:optional; src:url('/assets/fonts/inter-tight-var-100-900.woff2') format('woff2'); } @font-face { font-family:'Instrument Serif'; font-style:italic; font-weight:400; font-display:optional; src:url('/assets/fonts/instrument-serif-italic-400.woff2') format('woff2'); } #goerdes-preview, html { color-scheme:only light; } html { background:#f6f4ef; } #goerdes-preview { --g-accent:#ea4b66; --g-accent-deep:#bc4458; --g-ink:#312f2c; --g-paper:#f6f4ef; --g-line:#d7d3cc; --g-muted:#66615a; --g-sans:'Inter Tight',Arial,Helvetica,sans-serif; --g-serif:'Instrument Serif',Georgia,serif; width:100%; margin:auto; container-type:inline-size; font-family:var(--g-sans); color:var(--g-ink); background:var(--g-paper); } #goerdes-preview * { box-sizing:border-box; } #goerdes-preview h1,#goerdes-preview h2,#goerdes-preview h3,#goerdes-preview p { margin:0; } #goerdes-preview a { color:inherit; text-decoration:none; } #goerdes-preview button,#goerdes-preview summary { font:inherit; } #goerdes-preview .g-pad { padding-left:5.8%; padding-right:5.8%; } /* Contentbegrenzung ab 1440px: Inhalt zentriert auf 1440px (83px Innenabstand), Hintergrundbaender (Hero, Uber-mich) bleiben randlos — Padding beschneidet die Flaechen nicht (Nutzerentscheidung 29.10.). */ @media (min-width:1440px) { #goerdes-preview .g-pad { padding-left:calc((100% - 1440px) / 2 + 83px); padding-right:calc((100% - 1440px) / 2 + 83px); } } #goerdes-preview .g-top { background:#252522; color:#f6f4ef; } #goerdes-preview .g-header { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-top:27px; padding-bottom:27px; border-bottom:1px solid #ffffff24; } #goerdes-preview .g-logo { display:block; width:153px; height:auto; } #goerdes-preview .g-darklogo { display:none; } #goerdes-preview .g-nav { display:flex; align-items:center; gap:28px; font-size:13px; } #goerdes-preview .g-nav a { padding:12px 0; } #goerdes-preview .g-nav a:last-child { border-bottom:1px solid var(--g-accent); } #goerdes-preview .g-menu { display:none; } /* ---------- Startseiten-Hero (g-hero2): Split aus Copy und animierter Suchmaschinen-Karte (SERP). Header und Hero füllen gemeinsam den Falz (100svh), der Herofoot schließt unten ab – ohne :has-Unterstützung bleibt der Hero kompakt statt kaputt. ---------- */ #goerdes-preview .g-top:has(> .g-hero2) { display:flex; flex-direction:column; min-height:100svh; } #goerdes-preview .g-hero2 { flex:1; display:flex; flex-direction:column; padding-top:56px; padding-bottom:36px; } #goerdes-preview .g-hero2-main { flex:1; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(32px,5vw,80px); align-items:center; } #goerdes-preview .g-hero2 h1 { font-size:clamp(40px,6.2cqw,90px); line-height:1.02; font-weight:500; letter-spacing:-3.5px; } #goerdes-preview .g-hero2 h1 em { display:block; font-family:var(--g-serif,Georgia,serif); font-style:italic; font-weight:400; color:var(--g-accent); letter-spacing:-1.5px; font-size:1.08em; margin-top:.06em; } #goerdes-preview .g-hero2-sub { max-width:34em; font-size:15px; line-height:1.75; color:#d1cec8; margin-top:clamp(24px,3vw,40px); } #goerdes-preview .g-hero2-sub strong { color:#f6f4ef; font-weight:500; } #goerdes-preview .g-actions { display:flex; gap:24px; align-items:center; flex-wrap:wrap; } /* Kontrast >=5:1 — Button-Text fast schwarz statt dunkelgrau (WCAG 4.5 bei 13px) */ #goerdes-preview .g-button { display:inline-flex; align-items:center; justify-content:space-between; gap:28px; min-height:48px; padding:14px 20px; background:var(--g-accent); color:#141310; font-weight:600; font-size:13px; } #goerdes-preview .g-link { display:inline-flex; align-items:center; gap:14px; min-height:44px; font-size:13px; border-bottom:1px solid currentColor; position:relative; } /* Link-Akzent: bei Hover/Fokus zeichnet sich eine Akzentlinie von links über die bestehende Unterstreichung (deckt den 1px-Border exakt ab). */ #goerdes-preview .g-link::after { content:''; position:absolute; left:0; bottom:-1px; width:0; height:1px; background:var(--g-accent); transition:width .3s ease; } #goerdes-preview .g-link:hover::after,#goerdes-preview .g-link:focus-visible::after { width:100%; } /* Box-Variante im Hero hat vollständigen Rahmen statt Unterstreichung — kein Draw-Effekt. */ #goerdes-preview .g-hero2 .g-link::after { content:none; } #goerdes-preview .g-hero2 .g-actions { margin-top:36px; } #goerdes-preview .g-hero2 .g-button,#goerdes-preview .g-hero2 .g-link { min-width:220px; justify-content:space-between; gap:28px; } #goerdes-preview .g-hero2 .g-link { min-height:48px; padding:14px 20px; border:1px solid #ffffff4d; background:#ffffff14; } #goerdes-preview .g-hero2 .g-link:hover { border-color:var(--g-accent); } #goerdes-preview .g-button:hover { filter:brightness(1.08); } #goerdes-preview .g-herofoot { display:flex; justify-content:space-between; gap:20px; margin-top:55px; padding-top:20px; border-top:1px solid #ffffff24; font-size:11px; letter-spacing:.3px; color:#c4c0b9; } #goerdes-preview .g-section { padding-top:64px; padding-bottom:64px; } #goerdes-preview .g-sectionhead { display:flex; justify-content:space-between; align-items:end; gap:26px; margin-bottom:28px; } #goerdes-preview .g-sectionhead .g-lead { max-width:46em; margin:0; } #goerdes-preview h2 { font-size:clamp(30px,4.2cqw,46px); font-weight:500; letter-spacing:-1.6px; line-height:1.12; } /* Sektions-Überschriften: ein Schlüsselwort pro H2 als Serif-Kursiv- Akzent, inline in der Zeile (anders als der Hero, dessen em als eigener Block steht). Unterseiten haben derzeit keine h2-em. */ /* Serif-Italic-Akzent in H2: tiefe Akzentvariante — accent allein schafft auf getoenten Baendern (z.B. .g-about #e9e5dd) keine 3:1 */ #goerdes-preview main h2 em { font-family:var(--g-serif,Georgia,serif); font-style:italic; font-weight:400; color:var(--g-accent-deep); letter-spacing:-.5px; font-size:1.02em; } #goerdes-preview .g-label { font-size:12px; letter-spacing:1.7px; text-transform:uppercase; color:var(--g-muted); margin-bottom:15px; display:block; } #goerdes-preview .g-reference-link { display:inline-flex; align-items:center; min-height:44px; font-size:12px; border-bottom:1px solid var(--g-line); flex-shrink:0; } #goerdes-preview .g-services { border-top:1px solid var(--g-line); } #goerdes-preview .g-about { background:#e9e5dd; display:grid; grid-template-columns:.8fr 1.4fr; gap:64px; align-items:center; } #goerdes-preview .g-portrait { min-height:245px; border:1px solid #cbc5b9; display:flex; align-items:center; justify-content:center; color:#70695d; font-size:12px; } /* Porträt: freigestellt (Alphakanal), steht direkt auf der Sektionsfläche */ #goerdes-preview .g-portrait-wrap { position:relative; margin:0; } #goerdes-preview img.g-portrait { display:block; width:100%; height:auto; border:0; } #goerdes-preview .g-about p { font-size:15px; line-height:1.8; margin:23px 0; color:var(--g-muted); max-width:none; } #goerdes-preview .g-process { display:grid; grid-template-columns:repeat(4,1fr); gap:25px; margin-top:36px; } #goerdes-preview .g-process div { border-top:1px solid var(--g-line); padding-top:20px; } #goerdes-preview .g-process h3 { font-size:17px; font-weight:500; margin:0 0 10px; } #goerdes-preview .g-process p { font-size:12px; line-height:1.8; color:var(--g-muted); } #goerdes-preview .g-contact { background:#252522; color:#f6f4ef; display:grid; grid-template-columns:1.2fr .8fr; gap:42px; } #goerdes-preview .g-contact .g-label { color:#c4c0b9; } #goerdes-preview .g-contact h2 { font-size:clamp(35px,5.5cqw,59px); } #goerdes-preview .g-contact p { color:#c4c0b9; font-size:14px; line-height:1.8; margin:20px 0 24px; } #goerdes-preview .g-contact .g-actions { align-self:end; justify-content:flex-start; } #goerdes-preview .g-contact .g-link { color:#f6f4ef; } #goerdes-preview .g-contact .g-button { border:0; } #goerdes-preview .g-contactform { grid-column:1/-1; border-top:1px solid #ffffff30; padding-top:25px; } #goerdes-preview .g-fields { display:grid; grid-template-columns:1fr 1fr; gap:18px; } #goerdes-preview label { font-size:13px; display:block; } #goerdes-preview input,#goerdes-preview textarea { display:block; width:100%; font:inherit; font-size:16px; margin-top:8px; padding:12px; color:#f6f4ef; border:1px solid #7a756e; background:#31312d; border-radius:0; } #goerdes-preview .g-message { grid-column:1/-1; } #goerdes-preview .g-contactform p { font-size:12px; } #goerdes-preview .g-contactform button { border:0; } #goerdes-preview .g-footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; align-items:center; padding-top:28px; padding-bottom:28px; background:#252522; color:#c4c0b9; border-top:1px solid #ffffff24; } #goerdes-preview .g-footerbrand { display:flex; flex-direction:column; align-items:flex-start; gap:12px; } #goerdes-preview .g-footer .g-logo { width:112px; } #goerdes-preview .g-footer p { font-size:11px; } #goerdes-preview [hidden] { display:none!important; } #goerdes-preview[data-light='true'] .g-top { background:var(--g-paper); color:var(--g-ink); } #goerdes-preview[data-light='true'] .g-top .g-header,#goerdes-preview[data-light='true'] .g-herofoot { border-color:var(--g-line); } #goerdes-preview[data-light='true'] .g-herofoot { color:var(--g-muted); } #goerdes-preview[data-light='true'] .g-hero2-sub { color:var(--g-muted); } #goerdes-preview[data-light='true'] .g-hero2-sub strong { color:var(--g-ink); } #goerdes-preview[data-light='true'] .g-hero2 .g-link { border-color:var(--g-line); background:#312f2c0d; } #goerdes-preview[data-light='true'] .g-toast { background:var(--g-paper); color:var(--g-ink); border-color:var(--g-line); } #goerdes-preview[data-light='true'] .g-toast span { color:var(--g-muted); } #goerdes-preview[data-light='true'] .g-top .g-whitelogo { display:none; } #goerdes-preview[data-light='true'] .g-top .g-darklogo { display:block; } @container (max-width:620px) { #goerdes-preview .g-header { padding-top:20px; padding-bottom:20px; flex-wrap:wrap; } #goerdes-preview .g-logo { width:125px; } #goerdes-preview .g-nav { display:none; } #goerdes-preview .g-menu { display:block; border:1px solid #77736c; color:inherit; background:transparent; padding:10px 13px; min-height:44px; } #goerdes-preview .g-nav.g-expanded { display:flex; width:100%; flex-wrap:wrap; gap:18px; } #goerdes-preview .g-hero2 { padding-top:40px; } #goerdes-preview .g-hero2 h1 { letter-spacing:-2.2px; font-size:clamp(38px,10.6cqw,62px); } #goerdes-preview .g-hero2 .g-button,#goerdes-preview .g-hero2 .g-link { min-width:0; width:100%; } #goerdes-preview .g-hero2 .g-actions { width:100%; } #goerdes-preview .g-hero2-sub { font-size:14px; } #goerdes-preview .g-herofoot { margin-top:35px; flex-direction:column; gap:10px; } #goerdes-preview .g-section { padding-top:40px; padding-bottom:40px; } #goerdes-preview .g-sectionhead { align-items:start; flex-direction:column; } #goerdes-preview .g-about,#goerdes-preview .g-contact { grid-template-columns:1fr; gap:28px; } #goerdes-preview .g-about .g-portrait { min-height:220px; } #goerdes-preview .g-process { grid-template-columns:1fr 1fr; gap:25px; } #goerdes-preview .g-fields { grid-template-columns:1fr; } } #goerdes-preview .g-reference-link { display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-height:44px;border:1px solid var(--g-line);color:var(--g-ink);flex-shrink:0; } #goerdes-preview .g-reference-link:hover { background:var(--g-accent);border-color:var(--g-accent); } #goerdes-preview .g-detail h1 {font-size:clamp(32px,4.8cqw,50px);line-height:1.13;letter-spacing:-1.5px;font-weight:500;margin:28px 0;max-width:800px;} #goerdes-preview .g-detail h2 {font-size:25px;line-height:1.3;letter-spacing:-.5px;margin:38px 0 14px;max-width:690px;} #goerdes-preview .g-detail p {margin:0 0 17px;} #goerdes-preview .g-detail ol {padding-left:24px;max-width:690px;} #goerdes-preview .g-detail li {margin-bottom:14px;} #goerdes-preview .g-detail .g-button {margin:10px 0 22px;max-width:100%;text-align:left;} #goerdes-preview .g-related {display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:24px;padding-top:20px;border-top:1px solid var(--g-line);} #goerdes-preview .g-related .g-link {text-align:left;} #goerdes-preview .g-detail {max-width:900px;margin:auto;} /* 404-Seite: riesige Serif-Zahl als Blickfang, Karten-Einstiege darunter */ #goerdes-preview .g-detail p.g-err404 { font-family:var(--g-serif); font-style:italic; font-weight:400; color:var(--g-accent); font-size:clamp(110px,18cqw,240px); line-height:.85; letter-spacing:-6px; margin:8px 0 14px; } #goerdes-preview .g-err404grid { margin-top:52px; } #goerdes-preview .g-err404-alt { margin:18px 0 0; font-size:14px; color:var(--g-muted); } #goerdes-preview .g-vb-lead { font-size:17px; line-height:1.75; color:var(--g-muted); max-width:34em; margin-top:16px; } #goerdes-preview .g-detail h2 {margin:28px 0;} #goerdes-preview .g-detail h3 {font-size:22px;font-weight:500;margin:30px 0 12px;} #goerdes-preview .g-detail p,#goerdes-preview .g-detail li {font-size:16px;line-height:1.8;max-width:690px;} #goerdes-preview .g-detail .g-button {margin-top:28px;border:0;} #goerdes-preview .g-detail .g-link {background:none;border:0;border-bottom:1px solid;color:inherit;} #goerdes-preview .g-detail ul {padding-left:22px;} #goerdes-preview .g-faq {border-top:1px solid var(--g-line);} #goerdes-preview .g-faq h2 {margin-bottom:28px;} #goerdes-preview .g-faq details {border-bottom:1px solid var(--g-line);padding:18px 0;} #goerdes-preview .g-faq summary {font-size:18px;min-height:44px;} #goerdes-preview .g-faq p {max-width:700px;font-size:15px;line-height:1.8;padding:10px 0;} #goerdes-preview .g-detailshot {display:block;width:100%;height:auto;margin:26px 0;} #goerdes-preview[data-view='detail'] .g-hero2,#goerdes-preview[data-view='detail'] main>section:not(.g-detailhost) {display:none;} #goerdes-request { color-scheme:only light; --q-accent:#ea4b66; --q-ink:#312f2c; --q-paper:#f6f4ef; background:var(--q-paper); color:var(--q-ink); font-family:'Inter Tight',Arial,Helvetica,sans-serif; width:100%; max-width:1080px; margin:auto; padding:38px 6%; container-type:inline-size; } #goerdes-request * {box-sizing:border-box;} #goerdes-request h2,#goerdes-request p {margin:0;} #goerdes-request .q-brand {display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:32px;} #goerdes-request .q-brand img {width:135px;height:auto;} #goerdes-request .q-brand span {font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#69625a;} #goerdes-request .q-progress {display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:0;margin:0 0 34px;list-style:none;} #goerdes-request .q-progress li {border-top:3px solid #ded9d0;padding-top:12px;font-size:12px;color:#756e64;line-height:1.5;} #goerdes-request .q-progress li[aria-current='step'] {border-color:var(--q-accent);color:var(--q-ink);font-weight:600;} #goerdes-request .q-progress li.q-done {border-color:#312f2c;color:#312f2c;} #goerdes-request .q-step-label {font-size:11px;text-transform:uppercase;letter-spacing:1.6px;color:#766c60;margin-bottom:10px;} #goerdes-request h2 {font-size:clamp(29px,5cqw,42px);font-weight:500;letter-spacing:-1.3px;line-height:1.15;} #goerdes-request .q-intro {font-size:14px;line-height:1.7;color:#69625a;margin-top:13px;margin-bottom:24px;} #goerdes-request fieldset {border:0;margin:0;padding:0;min-width:0;} #goerdes-request legend {font-size:14px;font-weight:600;margin-bottom:12px;} #goerdes-request .q-choices {display:grid;grid-template-columns:1fr 1fr;gap:12px;} #goerdes-request .q-choice {display:flex;align-items:flex-start;gap:12px;padding:19px 17px;border:1px solid #d4cec4;background:#fffdf9;min-height:90px;} #goerdes-request .q-choice:has(input:checked) {border-color:#8a3040;background:#fae8ec;box-shadow:inset 0 0 0 1px #8a3040;} #goerdes-request .q-choice input {accent-color:#9f3045;width:18px;height:18px;flex-shrink:0;margin:2px 0 0;} #goerdes-request .q-choice strong {display:block;font-size:15px;font-weight:600;line-height:1.4;} #goerdes-request .q-choice small {display:block;font-size:12px;line-height:1.6;color:#69625a;margin-top:4px;} #goerdes-request .q-fields {display:grid;grid-template-columns:1fr 1fr;gap:18px;} #goerdes-request .q-field {display:block;font-size:13px;line-height:1.6;} #goerdes-request .q-field input,#goerdes-request textarea,#goerdes-request select {display:block;width:100%;margin-top:7px;padding:13px;border:1px solid #c8c1b6;border-radius:0;background:#fffdf9;color:#312f2c;font:inherit;font-size:16px;} #goerdes-request textarea {resize:vertical;min-height:105px;} #goerdes-request .q-field small {font-size:12px;color:#69625a;} #goerdes-request .q-full {grid-column:1/-1;} #goerdes-request .q-summary {border-left:3px solid var(--q-accent);padding:14px 18px;margin-bottom:23px;background:#ebe7df;font-size:13px;line-height:1.8;} #goerdes-request .q-summary strong {font-weight:600;} #goerdes-request .q-summary div {overflow-wrap:anywhere;white-space:pre-wrap;} #goerdes-request .q-edit {border:0;background:transparent;color:#853447;text-decoration:underline;margin-left:12px;min-height:44px;} #goerdes-request .q-error {color:#952b3f;font-size:13px;line-height:1.6;margin-top:16px;} #goerdes-request [aria-invalid='true'] {border-color:#952b3f!important;} #goerdes-request .q-nav {display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:25px;margin-top:28px;border-top:1px solid #d4cec4;} #goerdes-request button {font:inherit;font-size:13px;min-height:46px;} #goerdes-request .q-next {border:0;background:var(--q-accent);color:#141310;padding:14px 23px;font-weight:600;display:inline-flex;gap:35px;align-items:center;} #goerdes-request .q-back {border:0;background:transparent;color:#504a43;padding:12px 0;text-decoration:underline;text-underline-offset:5px;} #goerdes-request .q-back:disabled {opacity:.4;text-decoration:none;} #goerdes-request .q-foot {display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:22px;color:#69625a;font-size:11px;line-height:1.6;} #goerdes-request .q-foot a {color:inherit;} #goerdes-request .q-review {margin-top:20px;color:#69625a;font-size:12px;line-height:1.7;} #goerdes-request .q-success {padding:12px 0;} #goerdes-request .q-success h2 {margin-bottom:20px;} #goerdes-request .q-success p {font-size:14px;line-height:1.8;color:#69625a;margin-bottom:20px;} #goerdes-request .q-log {margin-top:25px;border-top:1px solid #d4cec4;padding-top:15px;font-size:12px;} #goerdes-request .q-log summary {min-height:44px;display:flex;align-items:center;} #goerdes-request .q-log ol {margin:0;padding-left:22px;line-height:1.8;overflow-wrap:anywhere;} #goerdes-request [hidden] {display:none!important;} /* Panel-Wechsel im Fragebogen: blendet einen Schritt sanft ein, sobald [hidden] entfernt wird. Die Animation beginnt automatisch, weil das Panel von display:none auf sichtbar springt — auch beim Erfolgs- abschnitt. Reines CSS, kein JS. */ #goerdes-request .q-panel,#goerdes-request .q-success { animation:g-q-in .38s ease; } @keyframes g-q-in { from { opacity:0; transform:translateY(10px); } } @media (prefers-reduced-motion:reduce) { #goerdes-request .q-panel,#goerdes-request .q-success { animation:none; } } @container (max-width:480px) { #goerdes-request .q-choices,#goerdes-request .q-fields {grid-template-columns:1fr;} #goerdes-request .q-choice {min-height:74px;padding:15px;} #goerdes-request .q-brand {margin-bottom:25px;} #goerdes-request .q-brand img {width:110px;} #goerdes-request .q-brand span {font-size:10px;letter-spacing:.4px;} #goerdes-request .q-progress {gap:7px;} #goerdes-request .q-progress li {font-size:11px;} #goerdes-request .q-next {gap:17px;padding:14px 18px;} } /* ---------- Produktion: Mehrseiten-Navigation, Rechtliches, Honeypot ---------- */ html { scroll-behavior: smooth; } body { margin:0; background:#f6f4ef; font-family:'Inter Tight',Arial,Helvetica,sans-serif; color:#312f2c; } a { cursor:pointer; } :focus-visible { outline:2px solid var(--g-accent,#ea4b66); outline-offset:2px; } .g-skip { position:absolute; left:-9999px; top:0; background:#252522; color:#f6f4ef; padding:10px 16px; z-index:50; } .g-skip:focus { left:0; } /* Dropdown „Leistungen“ – abgerundete Karte mit Chevron */ .g-navitem { position:relative; } .g-navbtn { font:inherit; font-size:13px; background:none; border:0; padding:12px 0; color:inherit; cursor:pointer; display:inline-flex; align-items:center; gap:8px; } .g-navbtn::after { content:''; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform .15s ease; } .g-navitem.g-open .g-navbtn::after, .g-navitem:hover .g-navbtn::after { transform:rotate(225deg) translateY(-1px); } .g-navitem .g-drop { display:none; position:absolute; top:calc(100% + 10px); left:-16px; margin:0; padding:8px; list-style:none; background:#2b2b28; min-width:264px; z-index:40; border:1px solid rgba(255,255,255,.08); border-radius:10px; box-shadow:0 18px 44px rgba(0,0,0,.38); } /* Unsichtbare Bruecke ueber die Luecke zwischen Menuepunkt und Karte, damit die Maus den :hover beim Ueberfahren nicht verliert */ .g-navitem .g-drop::before { content:''; position:absolute; top:-12px; left:0; right:0; height:12px; } #goerdes-preview .g-navitem .g-drop a { display:block; padding:10px 14px; font-size:13px; white-space:nowrap; border-radius:6px; line-height:1.45; border-bottom:0; } .g-navitem .g-drop a:hover, .g-navitem .g-drop a:focus { background:rgba(255,255,255,.09); color:#fff; } .g-navitem .g-drop a[aria-current="page"] { background:rgba(234,75,102,.14); color:#fff; } .g-navitem:hover .g-drop, .g-navitem:focus-within .g-drop, .g-navitem.g-open .g-drop { display:block; } /* Kopf-CTA als Button (ersetzt den Unterstrich-Link des Prototyps) */ #goerdes-preview .g-nav a.g-nav-cta, #goerdes-preview .g-nav > a:last-child { border-bottom:0; padding:10px 18px; margin-left:18px; background:var(--g-accent,#ea4b66); color:#252522; font-weight:600; border-radius:6px; } .g-nav a.g-nav-cta:hover, .g-nav > a:last-child:hover { background:#f05d77; color:#252522; } .g-nav a.g-nav-cta[aria-current="page"], .g-nav > a:last-child[aria-current="page"] { outline:2px solid rgba(246,244,239,.75); outline-offset:-4px; } .g-nav > a[aria-current="page"]:not(.g-nav-cta) { border-bottom:1px solid var(--g-accent,#ea4b66); } /* Leistungsseiten: großzügiger Rahmen im Rhythmus der Startseite */ .g-detailhost { padding-top:58px; padding-bottom:70px; } .g-detail > .g-link:first-child, .g-detail > a:first-child { display:inline-block; font-size:11px; letter-spacing:1.7px; text-transform:uppercase; color:var(--g-muted,#69625a); border-bottom:0; margin:0 0 6px; } .g-detail > .g-link:first-child:hover { color:#312f2c; } .g-detail .g-related { margin-top:44px; padding-top:26px; } .g-detail .g-related .g-link { font-size:14px; } @media (max-width:760px) { .g-nav.g-expanded { flex-direction:column; align-items:center; gap:0; } .g-navitem { width:100%; text-align:center; } .g-navitem .g-navbtn { width:100%; justify-content:center; } .g-nav > a { padding:12px 0; } .g-nav a.g-nav-cta, .g-nav > a:last-child { margin-left:0; margin-top:10px; display:inline-block; } .g-navitem .g-drop { position:static; display:none; background:transparent; padding:0 0 6px; border:0; border-radius:0; box-shadow:none; min-width:0; text-align:center; } .g-navitem .g-drop::before { display:none; } .g-navitem .g-drop a { padding:8px 0; border-radius:0; } .g-navitem .g-drop a:hover, .g-navitem .g-drop a:focus { background:transparent; color:#fff; } .g-navitem:hover .g-drop, .g-navitem:focus-within .g-drop { display:none; } .g-navitem.g-open .g-drop { display:block; } /* iOS haengt :hover nach dem Tap an (sticky hover) – der Chevron darf darum mobil nur an g-open haengen, nicht am hover-Zustand. */ .g-navitem:hover .g-navbtn::after { transform:rotate(45deg) translateY(-2px); } .g-navitem.g-open .g-navbtn::after { transform:rotate(225deg) translateY(-1px); } .g-detailhost { padding-top:34px; padding-bottom:44px; } } /* Rechtliche Seiten im Detail-Look */ .g-legal h1 { margin:18px 0 22px; } .g-legal h2 { margin:34px 0 12px; } .g-legal p, .g-legal li { font-size:15px; line-height:1.8; max-width:690px; } .g-legal address { font-style:normal; } /* Honeypot */ .q-hp { position:absolute; left:-9999px; height:1px; overflow:hidden; } /* Datenschutz-Banner (erscheint nur, wenn eine GA-ID konfiguriert ist) */ .g-consent { position:fixed; left:0; right:0; bottom:0; z-index:60; background:#252522; color:#f6f4ef; display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding:16px 5.8%; border-top:3px solid var(--g-accent,#ea4b66); box-shadow:0 -10px 30px rgba(0,0,0,.25); } .g-consent p { flex:1 1 340px; margin:0; font-size:13px; line-height:1.7; } .g-consent p a { color:#f6f4ef; text-decoration:underline; } .g-consent-yes { border:0; background:var(--g-accent,#ea4b66); color:#252522; font:inherit; font-size:13px; font-weight:600; min-height:44px; padding:12px 22px; border-radius:6px; cursor:pointer; } .g-consent-no { border:0; background:transparent; color:#c4c0b9; font:inherit; font-size:13px; min-height:44px; padding:12px 8px; text-decoration:underline; cursor:pointer; } .g-consent-yes:hover { background:#f05d77; } .g-consent-no:hover { color:#f6f4ef; } .g-consent-open { border:0; background:none; color:#c4c0b9; font:inherit; font-size:11px; padding:0; text-decoration:underline; cursor:pointer; } /* Direkte Anfrage auf der Kontaktseite */ .q-page-intro { max-width:1080px; margin:0 auto; padding:36px 6% 0; } .q-page-intro h1 { font-size:clamp(30px,5cqw,46px); font-weight:500; letter-spacing:-1.2px; margin:10px 0 12px; } .q-page-intro p { font-size:15px; line-height:1.8; color:#69625a; max-width:640px; margin:0 0 8px; } /* Detailseiten: Zurück-Link oben */ @media (prefers-reduced-motion:reduce) { #goerdes-preview .g-link::after { transition:none; } } /* Platzhalter kommender Projekte */ #goerdes-preview .g-coming { color:var(--g-muted); } #goerdes-preview .g-soon { font-size:11px; letter-spacing:1.2px; text-transform:uppercase; color:var(--g-muted); border:1px solid var(--g-line); padding:5px 9px; flex-shrink:0; } /* ============================================================ Leistungs-Unterseiten: Hero (grosse H1 mit serif-italic- Akzent), Key-Facts-Band (fluchtet mit der H1 auf 900px), Detail-Inhalt linksbuendig, FAQ als Accordion. ============================================================ */ #goerdes-preview .g-vb-hero { padding-top:44px; padding-bottom:36px; } #goerdes-preview .g-vb-hero h1 { font-size:clamp(40px,7.4cqw,84px); line-height:1.02; letter-spacing:-3.4px; font-weight:500; max-width:900px; margin:18px 0 20px; } #goerdes-preview .g-vb-hero h1 em { color:var(--g-accent); font-family:var(--g-serif,Georgia,serif); font-style:italic; font-weight:400; letter-spacing:-1.5px; } #goerdes-preview .g-vb-hero p { font-size:16px; line-height:1.7; max-width:560px; } #goerdes-preview .g-vb-hero p + p { margin-top:12px; } #goerdes-preview .g-vb-hero .g-button { margin-top:28px; } /* Key-Facts-Band direkt unter dem Hero - in der Typo-Spur (fluchtet mit der H1) */ #goerdes-preview .g-vb-facts { display:grid; grid-template-columns:repeat(3,1fr); gap:0 26px; max-width:900px; border-top:1px solid var(--g-line); border-bottom:1px solid var(--g-line); } #goerdes-preview .g-vb-facts div { padding:22px 0; } #goerdes-preview .g-vb-facts div + div { border-left:1px solid var(--g-line); padding-left:26px; } #goerdes-preview .g-vb-facts strong { display:block; font-size:15px; font-weight:500; letter-spacing:-.2px; } #goerdes-preview .g-vb-facts small { display:block; margin-top:6px; font-size:12px; letter-spacing:1.2px; text-transform:uppercase; color:var(--g-muted); } /* Inhaltskoerper unter dem Hero: bündig links statt zentriert, gewohnte Detail-Typografie */ #goerdes-preview .g-vb-body { max-width:none; margin:0; padding-top:46px; } #goerdes-preview .g-vb-body > h2:first-child { margin-top:0; } #goerdes-preview .g-vb-back { display:inline-block; margin-bottom:22px; } #goerdes-preview .g-vb-faq details { border-bottom:1px solid var(--g-line); } #goerdes-preview .g-vb-faq details:first-child { border-top:1px solid var(--g-line); } #goerdes-preview .g-vb-faq summary { min-height:56px; display:flex; align-items:center; font-size:17px; font-weight:700; letter-spacing:-.2px; cursor:pointer; list-style:none; } #goerdes-preview .g-vb-faq summary::-webkit-details-marker { display:none; } #goerdes-preview .g-vb-faq summary:after { content:'+'; margin-left:auto; padding-left:28px; font-family:var(--g-serif,Georgia,serif); font-size:24px; color:#aca598; } #goerdes-preview .g-vb-faq details[open] summary:after { content:'−'; } #goerdes-preview .g-vb-faq p { max-width:640px; padding:10px 0 26px; } @container (max-width:880px) { #goerdes-preview .g-vb-facts { grid-template-columns:1fr; } #goerdes-preview .g-vb-facts div + div { border-left:0; border-top:1px solid var(--g-line); padding-left:0; } } /* ============================================================ Leistungsseiten: Zahlen-Karten + Checklisten (Sketch 003-C, 30.10.2026). Drei Karten im Kosten-Karten-Idiom (#fffdf9, 2px Border, 18px Ecken, Hover-Border-Aufhellung) als Ersatz des alten g-vb-facts-Bands auf den sechs Leistungsseiten — die g-vb-facts-Regeln oberhalb bleiben unberuehrt, weil /ueber-mich/ sie weiternutzt. Checklisten im g-vb-body nach dem Vorbild der g-pricelist der Kosten-Seite (Checks in Akzentfarbe, Off-Punkte gegraut und durchgestrichen). ============================================================ */ #goerdes-preview .g-vb-factcards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2.4cqw,24px); max-width:900px; margin-top:44px; } #goerdes-preview .g-vb-factcard { background:#fffdf9; border:2px solid var(--g-line); border-radius:18px; padding:24px 26px; transition:border-color .6s cubic-bezier(0.3,0,0.3,1); } #goerdes-preview .g-vb-factcard:hover { border-color:var(--g-muted); } #goerdes-preview .g-vb-factcard em { display:block; font-family:var(--g-serif,Georgia,serif); font-style:italic; font-weight:400; color:var(--g-accent); font-size:clamp(30px,3.2cqw,42px); line-height:1.1; letter-spacing:-.5px; } #goerdes-preview .g-vb-factunit { display:block; margin-top:4px; font-size:17px; font-weight:500; letter-spacing:-.2px; } #goerdes-preview .g-vb-factcard small { display:block; margin-top:10px; font-size:13px; line-height:1.6; color:var(--g-muted); } #goerdes-preview .g-vb-checks { list-style:none; padding:0; margin:20px 0 26px; max-width:560px; font-size:15px; line-height:1.7; display:grid; gap:12px; } #goerdes-preview .g-vb-checks li { display:flex; gap:12px; align-items:flex-start; } #goerdes-preview .g-vb-checks svg { flex:none; margin-top:4px; color:var(--g-accent); } #goerdes-preview .g-vb-checks .g-vb-checks-off { color:var(--g-muted); } #goerdes-preview .g-vb-checks .g-vb-checks-off svg { color:var(--g-muted); } #goerdes-preview .g-vb-checks .g-vb-checks-off span { text-decoration:line-through; } @container (max-width:700px) { #goerdes-preview .g-vb-factcards { grid-template-columns:1fr; } } @media (prefers-reduced-motion:reduce) { #goerdes-preview .g-vb-factcard { transition:none; } } /* SEO-Politur 23.10.2026: Tap-Targets, Projekte-Layout */ #goerdes-preview .g-footer p a { display:inline-flex; align-items:center; min-height:44px; } #goerdes-preview .g-nav a { min-height:44px; display:inline-flex; align-items:center; } #goerdes-preview .g-lead { font-size:15px; line-height:1.8; color:var(--g-muted); max-width:560px; margin:-6px 0 26px; } @container (max-width:620px) { #goerdes-preview .g-vb-hero { padding-top:0; } } /* ============================================================ Startseiten-Hero, rechte Seite: animierte Suchmaschinen-Karte (hell, SERP-Zitat). Suchschlitz mit blinkendem Caret, Profil- karte mit Karte/Pin, Name, 4,9 Sterne und den Aktions-Chips „Anrufen“/„Website“, unten links der Toast „Neue Anfrage“. Rein dekorativ (Stage ist aria-hidden), Loop per JS, bei prefers-reduced-motion steht der erste Job statisch dar. ============================================================ */ #goerdes-preview .g-hero2-stage { position:relative; width:100%; max-width:520px; justify-self:end; } #goerdes-preview .g-serp { background:#fbfaf6; color:#22221e; border-radius:14px; padding:18px; box-shadow:0 30px 60px -20px rgba(0,0,0,.55); min-height:340px; } #goerdes-preview .g-serp-search { display:flex; align-items:center; gap:12px; border:1px solid #dcdad2; border-radius:999px; padding:12px 18px; font-size:1.05rem; } #goerdes-preview .g-serp-search svg { flex:none; color:#5c5a52; } #goerdes-preview .g-serp-q { white-space:nowrap; overflow:hidden; } #goerdes-preview .g-serp-caret { display:inline-block; width:1.5px; height:1.1em; margin-left:1px; vertical-align:-.15em; background:#22221e; animation:g-blink 1s steps(2,start) infinite; } @keyframes g-blink { to { visibility:hidden; } } /* SERP-Simulation: visibility statt opacity-Blend — halbtransparente Zwischen- zustaende drueckten den Textkontrast messbar unter 4.5:1 (WCAG/Lighthouse); die Karte fliegt weiterhin per translateY ein */ #goerdes-preview .g-serp-result { margin-top:18px; border:1px solid #e6e4dc; border-radius:12px; padding:16px; visibility:hidden; transform:translateY(8px); transition:transform .5s; } #goerdes-preview .g-serp-result.show { visibility:visible; transform:none; } #goerdes-preview .g-serp-map { height:84px; border-radius:8px; margin-bottom:14px; background:linear-gradient(115deg,transparent 46%,#fff 46% 50%,transparent 50%),linear-gradient(20deg,transparent 58%,#fff 58% 61%,transparent 61%),#e9e6da; position:relative; } #goerdes-preview .g-serp-map::after { content:''; position:absolute; left:58%; top:30%; width:16px; height:16px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:var(--g-accent); } #goerdes-preview .g-serp-name { font-weight:600; font-size:1.1rem; } #goerdes-preview .g-serp-meta { font-size:.9rem; color:#5c5a52; margin:4px 0 14px; } #goerdes-preview .g-serp-stars { color:#e3a512; letter-spacing:2px; } #goerdes-preview .g-serp-actions { display:flex; gap:10px; } /* background ohne Transition — Blend-Zwischenzustaende der Anruf-Simulation drueckten den Kontrast kurz unter 4.5 (Lighthouse-Fund); beide Endfarben bestehen mit >=5:1 */ #goerdes-preview .g-serp-act { flex:1; text-align:center; padding:11px; border-radius:8px; border:1px solid #dcdad2; font-weight:500; font-size:.95rem; transition:transform .15s; } #goerdes-preview .g-serp-act.call { background:var(--g-accent); border-color:var(--g-accent); color:#141310; font-weight:600; } #goerdes-preview .g-serp-act.pressed { transform:scale(.95); background:#c93a53; } #goerdes-preview .g-toast { position:absolute; left:-24px; bottom:-26px; display:flex; align-items:center; gap:12px; background:#252522; color:#f6f4ef; border:1px solid #ffffff24; border-radius:12px; padding:14px 18px; box-shadow:0 20px 40px -10px rgba(0,0,0,.6); visibility:hidden; transform:translateY(14px); transition:transform .4s; } #goerdes-preview .g-toast.show { visibility:visible; transform:none; } #goerdes-preview .g-toast-dot { width:10px; height:10px; border-radius:50%; background:var(--g-accent); flex:none; } #goerdes-preview .g-toast b { display:block; font-weight:600; font-size:.95rem; } #goerdes-preview .g-toast span { font-size:.85rem; color:#b9b7ae; } /* Gestapelte Hero-Spalten unterhalb 1020px Containerbreite (Container-Query wie im Bestand, keine Media-Query) */ @container (max-width:1020px) { #goerdes-preview .g-hero2-main { grid-template-columns:1fr; } #goerdes-preview .g-hero2-stage { justify-self:start; margin-top:12px; } #goerdes-preview .g-toast { left:12px; } } @media (prefers-reduced-motion:reduce) { #goerdes-preview .g-serp-caret { animation:none; } #goerdes-preview .g-serp-result,#goerdes-preview .g-toast { transition:none; } #goerdes-preview .g-card:hover .g-card-icon,#goerdes-preview .g-card-links a:hover span { transform:none; } } /* ============================================================ Leistungen-Sektion (Startseite #g-services): 6 Karten, 3 Spalten nach Marius' Referenz — flache Karten mit 1px-Rahmen (keine Rundungen, keine Schatten), Linien-Icon oben rechts in Rosa, Titel + Beschreibung, Detail-Links unten. Nur Site-Tokens. ============================================================ */ #goerdes-preview .g-services-head { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(28px,5cqw,72px); align-items:start; } #goerdes-preview .g-services-head h2 { font-size:clamp(30px,4.2cqw,54px); line-height:1.08; letter-spacing:-1.2px; } #goerdes-preview .g-services-head p { font-size:15px; line-height:1.8; color:var(--g-muted); max-width:34em; margin-top:clamp(24px,3cqw,34px); } #goerdes-preview .g-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2.4cqw,28px); margin-top:clamp(40px,5.5cqw,68px); } #goerdes-preview .g-card { display:flex; flex-direction:column; border:1px solid var(--g-line); padding:clamp(20px,2.8cqw,30px); transition:border-color .25s ease; } #goerdes-preview .g-card:hover { border-color:var(--g-accent); } #goerdes-preview .g-card-icon { display:block; width:34px; height:34px; margin-left:auto; margin-bottom:clamp(32px,4.5cqw,52px); color:var(--g-accent); transition:transform .25s ease; } #goerdes-preview .g-card:hover .g-card-icon { transform:rotate(-8deg) scale(1.06); } #goerdes-preview .g-card h3 { font-size:clamp(18px,2cqw,22px); font-weight:500; letter-spacing:-.4px; line-height:1.15; } #goerdes-preview .g-card > p { font-size:15px; line-height:1.7; color:var(--g-muted); margin-top:10px; } #goerdes-preview .g-card-links { display:flex; flex-wrap:wrap; gap:8px 40px; align-items:center; margin-top:auto; padding-top:clamp(28px,4cqw,44px); } #goerdes-preview .g-card-links .g-link { gap:8px; } #goerdes-preview .g-card-links a:hover { color:var(--g-accent); } #goerdes-preview .g-card-links .g-link span { transition:transform .25s ease; } #goerdes-preview .g-card-links a:hover span { transform:translate(2px,-2px); } /* Scroll-Reveal: Versteckzustand greift nur unter der JS-gesetzten Klasse g-reveal-init (ohne JS bleibt alles sichtbar). Stagger per nth-child — Delay ausschliesslich auf opacity/transform, damit die Hover-Border nie verzoegert reagiert. */ #goerdes-preview .g-services.g-reveal-init .g-card { opacity:0; transform:translateY(16px); transition:opacity .5s ease,transform .5s ease,border-color .25s ease; } #goerdes-preview .g-services.g-reveal-init .g-card.g-reveal-in { opacity:1; transform:none; } #goerdes-preview .g-services.g-reveal-init .g-card:nth-child(2) { transition:opacity .5s ease 60ms,transform .5s ease 60ms,border-color .25s ease; } #goerdes-preview .g-services.g-reveal-init .g-card:nth-child(3) { transition:opacity .5s ease 120ms,transform .5s ease 120ms,border-color .25s ease; } #goerdes-preview .g-services.g-reveal-init .g-card:nth-child(4) { transition:opacity .5s ease 180ms,transform .5s ease 180ms,border-color .25s ease; } #goerdes-preview .g-services.g-reveal-init .g-card:nth-child(5) { transition:opacity .5s ease 240ms,transform .5s ease 240ms,border-color .25s ease; } #goerdes-preview .g-services.g-reveal-init .g-card:nth-child(6) { transition:opacity .5s ease 300ms,transform .5s ease 300ms,border-color .25s ease; } @container (max-width:900px) { #goerdes-preview .g-cards { grid-template-columns:repeat(2,minmax(0,1fr)); } } @container (max-width:620px) { #goerdes-preview .g-services-head { grid-template-columns:1fr; gap:18px; } #goerdes-preview .g-services-head p { margin-top:0; } #goerdes-preview .g-cards { grid-template-columns:1fr; gap:14px; margin-top:44px; } #goerdes-preview .g-card { padding:20px; } #goerdes-preview .g-card-icon { margin-bottom:36px; } #goerdes-preview .g-card-links { gap:8px 28px; } } /* ============================================================ Zusammenarbeit-Timeline (Startseite #g-zusammenarbeit): statische senkrechte Linie, vier Schritte untereinander — ohne Sticky-Stage und Scroll-Pinning (Nutzerwunsch 29.10.). Die Akzentlinie steht voll; die Schritte blenden einzeln beim Eintreffen im Viewport ein (.on per IntersectionObserver in site.js). Der Versteckzustand greift nur unter der JS-ge- setzten Klasse g-tl-init — ohne JavaScript bleibt alles sichtbar. Die Prozess-Regeln (website-kosten) bleiben unberührt. ============================================================ */ #goerdes-preview .g-tlwrap { position:relative; display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr); gap:64px; align-items:start; } #goerdes-preview .g-tlhead p { font-size:15px; line-height:1.8; color:var(--g-muted); margin-top:22px; max-width:36em; } #goerdes-preview .g-tlwrap h2 { font-size:clamp(30px,4.2cqw,54px); line-height:1.08; letter-spacing:-1.2px; } #goerdes-preview .g-timeline { position:relative; display:grid; grid-template-columns:1fr; justify-self:end; } /* Stepper-Linie (Referenzbild 29.10.): Track grau, Fuellung waechst mit --tl-p */ #goerdes-preview .g-timeline::before { content:''; position:absolute; top:21px; bottom:21px; right:19px; width:2px; background:var(--g-line); } #goerdes-preview .g-tlfill { position:absolute; top:21px; right:19px; width:2px; height:calc((100% - 42px) * var(--tl-p, 0)); background:var(--g-accent); transition:height .25s linear; } #goerdes-preview .g-tlstep { position:relative; padding:0 60px 38px 0; text-align:right; } #goerdes-preview .g-tlstep:last-child { padding-bottom:0; } #goerdes-preview .g-tlnum { position:absolute; top:0; right:0; width:40px; height:40px; border-radius:50%; background:var(--g-paper); border:2px solid var(--g-line); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; letter-spacing:.02em; color:var(--g-muted); transition:border-color .3s,color .3s; } #goerdes-preview .g-tlstep h3 { font-size:19px; font-weight:500; letter-spacing:-.3px; margin:7px 0 6px; } #goerdes-preview .g-tlstep p { font-size:14px; line-height:1.7; color:var(--g-muted); } /* Reveal nur noch als Bewegung (translateY) — vorherige opacity:.35 drueckte den Textkontrast auf 1.6-2.0:1. Text bleibt jetzt immer voll lesbar; das Erwachen kommt weiter durch Einflug, Akzent-Nummer und die sich fuellende Linie. */ #goerdes-preview .g-tl-init .g-tlstep { transform:translateY(14px); transition:transform .45s ease; } #goerdes-preview .g-tl-init .g-tlstep.on { transform:none; } #goerdes-preview .g-tlstep.on .g-tlnum { border-color:var(--g-accent); color:var(--g-accent-deep); } @media (prefers-reduced-motion:reduce) { #goerdes-preview .g-tlfill { transition:none; } #goerdes-preview .g-tlstep { opacity:1!important; transform:none!important; transition:none; } } @container (max-width:880px) { #goerdes-preview .g-tlwrap { grid-template-columns:1fr; gap:40px; } #goerdes-preview .g-timeline { margin-top:0; justify-self:start; } #goerdes-preview .g-tlstep { padding:0 0 30px 60px; text-align:left; } #goerdes-preview .g-tlnum { right:auto; left:0; } #goerdes-preview .g-timeline::before { right:auto; left:19px; } #goerdes-preview .g-tlfill { right:auto; left:19px; } } /* ============================================================ Kosten-Karten (/website-kosten/, „Die kurze Antwort"): drei Karten nach dem Luique-Pricing-Muster — Struktur und Maße aus der Referenz, Farben ausschließlich Gördes-Tokens. Nur die mittlere Karte trägt das „Beliebt"-Badge (im Markup, nicht CSS-generiert). Rein statisch: kein JS, kein Reveal. ============================================================ */ #goerdes-preview .g-price { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2.4cqw,28px); margin:34px 0 40px; } #goerdes-preview .g-pricecard { position:relative; display:flex; flex-direction:column; padding:30px; border:2px solid var(--g-line); border-radius:18px; background:var(--g-paper); transition:border-color .6s cubic-bezier(0.3,0,0.3,1); } #goerdes-preview .g-pricecard:hover { border-color:var(--g-muted); } /* Mittelkarte kontrastierend: Rahmen in Tinte, Formular-Weiß */ #goerdes-preview .g-pricecard:nth-child(2) { border-color:var(--g-ink); background:#fffdf9; } #goerdes-preview .g-pricecard:nth-child(2):hover { border-color:var(--g-accent); } #goerdes-preview .g-pricecard-badge { position:absolute; top:-12px; right:24px; padding:4px 12px; border-radius:26px; background:var(--g-accent); color:#141310; border:2px solid var(--g-ink); box-shadow:5px 5px 0 rgba(0,0,0,0.2); font-size:13px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; } #goerdes-preview .g-pricecard h3 { font-size:20px; font-weight:500; letter-spacing:-.3px; margin:0 0 14px; } /* Ankerzeile: kleines Präfix/Suffix, Zahlwort als Serif-Italic-Akzent (H2-em-Idiom) */ #goerdes-preview .g-pricecard-anchor { font-size:30px; font-weight:600; letter-spacing:-.5px; line-height:1.15; } #goerdes-preview .g-pricecard-anchor em { font-family:var(--g-serif,Georgia,serif); font-style:italic; font-weight:400; color:var(--g-accent-deep); font-size:1.12em; } #goerdes-preview .g-pricecard-anchor small { font-size:16px; font-weight:400; color:var(--g-muted); letter-spacing:0; } #goerdes-preview .g-pricecard-desc { min-height:72px; font-size:14px; line-height:1.7; color:var(--g-muted); margin:12px 0 0; } #goerdes-preview .g-pricelist { list-style:none; padding:0; margin:18px 0 30px; font-size:15px; line-height:1.7; } #goerdes-preview .g-pricelist li { display:flex; gap:10px; align-items:flex-start; margin-bottom:10px; } #goerdes-preview .g-pricelist svg { flex:none; color:var(--g-accent); margin-top:4px; } #goerdes-preview .g-pricelist-off { color:var(--g-muted); text-decoration:line-through; } #goerdes-preview .g-pricelist-off svg { color:var(--g-muted); } /* CTA vollbreit am unteren Kartenrand (margin-top:auto gleicht ungleich lange Listen aus) */ #goerdes-preview .g-pricecard .g-button { width:100%; margin-top:auto; } @container (max-width:900px) { #goerdes-preview .g-price { grid-template-columns:1fr; } } @media (prefers-reduced-motion:reduce) { #goerdes-preview .g-pricecard { transition:none; } } /* ============================================================ Projekte-Seite: editoriale Liste (Referenz 29.10.2026). Drei Projekt-Zeilen über volle Inhaltsbreite, getrennt durch 1px-Hairlines. Links je Zeile eine flache graue Medien-Card (Radius 24px, kein Border, kein Schatten) mit Marius' eigenen Laptop+Smartphone-Renders und einer riesigen Ghost-Nummer als hellem Wasserzeichen oben links; rechts oben ausgerichtet die Textspalte aus Meta-Zeile (Akzent, uppercase), Titel, Beschrei- bung, drei Leistungs-Pills und dunklem CTA-Button. Rein statisch, kein JS; ausschließlich Gördes-Tokens, abgeleitete Töne per color-mix. ============================================================ */ #goerdes-preview .g-edlist { margin-top:64px; } #goerdes-preview .g-edrow { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); column-gap:clamp(24px,5cqw,64px); row-gap:24px; align-items:start; padding:clamp(32px,5cqw,56px) 0; } #goerdes-preview .g-edrow + .g-edrow { border-top:1px solid var(--g-line); } #goerdes-preview .g-edmedia { position:relative; overflow:hidden; border-radius:24px; background:color-mix(in srgb, var(--g-line) 35%, var(--g-paper)); display:flex; align-items:center; justify-content:center; padding:clamp(24px,4cqw,48px); } /* Ghost-Nummern: --g-line war mit ~1.4:1 unter der 3:1-Large-Text-Schwelle; #817b74 haelt 3:1 auch auf dem color-mix-Kartenhintergrund (~#eae8e3) */ #goerdes-preview .g-ednum { position:absolute; top:0; left:clamp(12px,2cqw,24px); font-size:clamp(72px,9cqw,120px); font-weight:300; line-height:1; color:#817b74; z-index:0; user-select:none; } #goerdes-preview .g-edmedia img { position:relative; z-index:1; display:block; width:75%; height:auto; } #goerdes-preview .g-edbody { min-width:0; } /* Kleine Akzenttexte (13-14px) in der tiefen Akzentvariante — accent allein schafft 4.5:1 nicht */ #goerdes-preview .g-edmeta { font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--g-accent-deep); margin:0; } /* h2 auf /projekte/ (Kartentitel nach H1), h3 auf der Startseite — Selektor deckt beide */ #goerdes-preview .g-edrow h2, #goerdes-preview .g-edrow h3 { font-size:clamp(32px,4cqw,48px); font-weight:600; letter-spacing:-1px; line-height:1.1; margin:14px 0 0; } #goerdes-preview .g-eddesc { font-size:16px; line-height:1.6; color:var(--g-muted); margin:14px 0 0; max-width:34em; } #goerdes-preview .g-edchips { display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; margin:22px 0 0; } #goerdes-preview .g-edchips li { border-radius:999px; padding:8px 16px; font-size:14px; background:color-mix(in srgb, var(--g-line) 25%, var(--g-paper)); } #goerdes-preview .g-edcta { display:inline-flex; align-items:center; gap:10px; margin-top:28px; min-height:52px; padding:16px 28px; border-radius:999px; background:var(--g-ink); color:#fff; font-weight:600; font-size:14px; } /* Hover als sofortiger Farbschlag ohne Transition — kein reduced-motion-Eintrag nötig */ #goerdes-preview .g-edcta:hover { filter:brightness(1.15); } /* Abschluss-Link unter der Startseiten-Projektliste */ #goerdes-preview .g-edmore { margin-top:clamp(44px,5.6cqw,64px); } /* ============================================================ Projekte-Seite: editoriale Liste — Grid-Karten „Weitere Projekte" (Referenz 29.10.2026). Die schlanke Kategorie-Zeile .g-workscat ist die geteilte Basisregel: Sie stammt aus der ersten Fassung der großen Projekt-Darstellung und wird von den Grid-Karten weiter mitgenutzt. ============================================================ */ #goerdes-preview .g-workscat { font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--g-accent-deep); } /* Weitere Projekte: schlanke Grid-Karten (Referenz works-masonry-items) — Kategorie-Zeile + Titel + Pfeil-Link, ohne Bild. Formular-Weiß der Gördes-Welt als Kartengrund (wie die mittlere g-pricecard), Ecken 20px nach Referenz. Kategorie-Zeile als volle Flex-Zeile über dem Titel (flex-wrap), Titel und Pfeil/Pille teilen sich die zweite Zeile. */ #goerdes-preview .g-worksrefs { margin-top:72px; } #goerdes-preview .g-worksrefs>h2, #goerdes-preview .g-worksrefs>h3 { font-size:25px; font-weight:500; letter-spacing:-.5px; margin:0 0 22px; } #goerdes-preview .g-worksgrid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,2cqw,24px); } #goerdes-preview .g-worksmini { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 14px; min-width:0; padding:clamp(20px,2.6cqw,30px); background:#fffdf9; border-radius:20px; } #goerdes-preview .g-worksmini .g-workscat { flex:0 0 100%; } /* h3 auf /projekte/ (unter H2 "Weitere Projekte"), h2 auf der 404-Seite (nach H1) */ #goerdes-preview .g-worksmini h2, #goerdes-preview .g-worksmini h3 { font-size:17px; font-weight:500; line-height:1.4; margin:0; min-width:0; overflow-wrap:anywhere; } /* Dekenter Hover nach Referenz Variante B: nur der Titel schlägt sofort um (keine Transition, kein reduced-motion-Bedarf) */ #goerdes-preview .g-worksmini:hover h2, #goerdes-preview .g-worksmini:hover h3 { color:var(--g-accent); } @container (max-width:1020px) { #goerdes-preview .g-worksgrid { grid-template-columns:repeat(2,minmax(0,1fr)); } } @container (max-width:620px) { #goerdes-preview .g-worksgrid { grid-template-columns:1fr; } } @container (max-width:880px) { #goerdes-preview .g-edlist { margin-top:48px; } #goerdes-preview .g-edrow { grid-template-columns:1fr; } } /* ============================================================ RELAUNCH „Weiche Karten" (31.10.2026): hellgrauer Grund, schwebende Pillen-Navigation, Inhalte in abgerundeten weißen Karten (Bento), zentrierte Abschnittsköpfe mit Label-Pille, schwarze Buttons, Korall als Farbverlauf-Karte und Highlight. Schrift Outfit (self-hosted, OFL). Überschreibt frühere Optik per Reihenfolge; IDs, JS und Fragebogen-Datenfluss bleiben unverändert. ============================================================ */ @font-face { font-family:'Outfit'; font-style:normal; font-weight:400 700; font-display:swap; src:url('/assets/fonts/outfit-var-400-700.woff2') format('woff2'); } html, body { background:#f5f4f3; } body { font-family:'Outfit',system-ui,Arial,sans-serif; color:#1d1a1a; } #goerdes-preview { --g-accent:oklch(0.66 0.2 12); --g-accent-deep:oklch(0.5 0.18 14); --g-on-accent:oklch(0.2 0.02 20); --g-ink:#1d1a1a; --g-paper:#f5f4f3; --g-tint:#fdeff1; --g-line:#e8e5e4; --g-muted:#5c5656; --g-card:#fff; --g-sans:'Outfit',system-ui,Arial,sans-serif; --g-serif:'Outfit',system-ui,sans-serif; --g-ease:cubic-bezier(.2,.7,.1,1); --g-shadow:0 0 0 6px rgba(255,255,255,.65),0 14px 34px -16px rgba(40,20,20,.18); font-size:18px; line-height:1.6; background:var(--g-paper); color:var(--g-ink); } :focus-visible { outline:3px solid #1d1a1a; outline-offset:3px; } /* Typografie */ #goerdes-preview h1, #goerdes-preview h2, #goerdes-preview h3, #goerdes-preview .g-detail h1, #goerdes-preview .g-detail h2 { font-family:var(--g-sans); font-weight:600; text-transform:none; letter-spacing:-.02em; line-height:1.12; text-wrap:balance; } #goerdes-preview h1 em, #goerdes-preview h2 em, #goerdes-preview main h2 em, #goerdes-preview .g-hero2 h1 em, #goerdes-preview .g-vb-hero h1 em, #goerdes-preview .g-pricecard-anchor em { display:inline; font-family:inherit; font-style:normal; font-weight:inherit; letter-spacing:inherit; font-size:1em; color:var(--g-accent-deep); background:none; padding:0; } #goerdes-preview main h2, #goerdes-preview h2, #goerdes-preview .g-services-head h2, #goerdes-preview .g-tlwrap h2, #goerdes-preview .g-about h2 { font-size:clamp(32px,3.8cqw,52px); line-height:1.08; letter-spacing:-.025em; } #goerdes-preview .g-lead, #goerdes-preview .g-services-head p, #goerdes-preview .g-tlhead p, #goerdes-preview .g-about p, #goerdes-preview .g-vb-lead { font-size:18px; line-height:1.6; color:var(--g-muted); } /* Label als Pille */ #goerdes-preview .g-label { display:inline-flex; align-items:center; gap:8px; margin:0 0 18px; padding:7px 16px; border:0; border-radius:999px; background:#fff; box-shadow:0 0 0 1px var(--g-line),0 6px 14px -8px rgba(40,20,20,.2); font-size:14px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--g-ink); } #goerdes-preview .g-label::before { content:''; width:8px; height:8px; border-radius:50%; background:var(--g-accent); } /* Zentrierte Abschnittsköpfe */ #goerdes-preview .g-sectionhead, #goerdes-preview .g-services-head { display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; margin-bottom:0; } #goerdes-preview .g-sectionhead .g-lead, #goerdes-preview .g-services-head p { margin:0 auto; max-width:36em; } #goerdes-preview .g-faq { text-align:center; } #goerdes-preview .g-faq details { text-align:left; } /* Schwebende Navigation */ #goerdes-preview .g-top, #goerdes-preview[data-light='true'] .g-top { display:contents; } #goerdes-preview .g-header { position:sticky; top:14px; z-index:40; margin:14px clamp(12px,2.2vw,28px) 0; padding:10px 12px 10px 22px; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border:0; border-radius:22px; box-shadow:var(--g-shadow); } #goerdes-preview .g-top .g-whitelogo { display:none; } #goerdes-preview .g-top .g-darklogo { display:block; } #goerdes-preview .g-logo { width:128px; } #goerdes-preview .g-nav { font-size:17px; font-weight:400; gap:6px; color:#4a4444; } #goerdes-preview .g-nav > a:not(.g-nav-cta), #goerdes-preview .g-navbtn { padding:8px 14px; border-radius:12px; min-height:44px; } #goerdes-preview .g-nav > a:not(.g-nav-cta):hover, #goerdes-preview .g-navbtn:hover { color:var(--g-ink); background:#f3f1f0; } #goerdes-preview .g-nav > a[aria-current="page"]:not(.g-nav-cta) { border-bottom:0; color:var(--g-ink); background:#f3f1f0; } #goerdes-preview .g-nav a.g-nav-cta, #goerdes-preview .g-nav > a:last-child { margin-left:10px; background:var(--g-ink); color:#fff; font-weight:500; border-radius:14px; padding:11px 22px; box-shadow:0 8px 18px -8px rgba(0,0,0,.5); } #goerdes-preview .g-nav a.g-nav-cta:hover, #goerdes-preview .g-nav > a:last-child:hover { background:var(--g-accent); color:var(--g-on-accent); } .g-navitem .g-drop { background:#fff; border:0; border-radius:18px; box-shadow:var(--g-shadow); top:calc(100% + 14px); } #goerdes-preview .g-navitem .g-drop a { color:var(--g-ink); font-size:16px; border-radius:10px; } .g-navitem .g-drop a:hover, .g-navitem .g-drop a:focus, .g-navitem .g-drop a[aria-current="page"] { background:#f3f1f0; color:var(--g-ink); } #goerdes-preview .g-menu { border:0; border-radius:12px; color:var(--g-ink); background:#f3f1f0; font-weight:500; } /* Buttons und Links */ #goerdes-preview .g-button { background:var(--g-ink); color:#fff; border-radius:16px; font-size:17px; font-weight:500; min-height:54px; padding:12px 14px 12px 24px; gap:18px; box-shadow:0 10px 22px -10px rgba(0,0,0,.55); transition:transform .25s var(--g-ease),background .25s,box-shadow .25s; } #goerdes-preview .g-button span[aria-hidden] { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:10px; background:rgba(255,255,255,.14); font-size:15px; } #goerdes-preview .g-button:hover { filter:none; transform:translateY(-2px); background:var(--g-accent); color:var(--g-on-accent); } #goerdes-preview .g-button:hover span[aria-hidden] { background:rgba(0,0,0,.1); } #goerdes-preview .g-link { font-size:17px; font-weight:500; border-bottom:0; min-height:44px; } #goerdes-preview .g-link::after { display:none; } #goerdes-preview .g-link:hover { color:var(--g-accent-deep); } #goerdes-preview .g-hero2 .g-link, #goerdes-preview[data-light='true'] .g-hero2 .g-link { background:#fff; border:0; border-radius:16px; padding:12px 22px; box-shadow:0 0 0 1px var(--g-line),0 8px 16px -10px rgba(40,20,20,.25); } #goerdes-preview .g-hero2 .g-button, #goerdes-preview .g-hero2 .g-link { min-width:0; } /* Hero: zwei Karten */ #goerdes-preview .g-hero2 { padding-top:18px; padding-bottom:0; display:block; } #goerdes-preview .g-hero2-main { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(14px,1.6vw,22px); align-items:stretch; } #goerdes-preview .g-hero2-copy { order:2; background:#fff; border-radius:28px; box-shadow:var(--g-shadow); padding:clamp(24px,4cqw,56px); display:flex; flex-direction:column; justify-content:center; } #goerdes-preview .g-hero2-copy::before { content:'Webdesign im Kreis Soest'; align-self:flex-start; margin-bottom:22px; padding:7px 16px 7px 30px; border-radius:999px; background:#fff; box-shadow:0 0 0 1px var(--g-line); font-size:14px; font-weight:500; background-image:radial-gradient(circle,var(--g-accent) 4px,transparent 5px); background-repeat:no-repeat; background-position:12px center; } #goerdes-preview .g-hero2 h1 { font-size:clamp(36px,4.6cqw,68px); line-height:1.04; letter-spacing:-.03em; font-weight:600; } #goerdes-preview .g-hero2 h1 em { display:block; } #goerdes-preview .g-hero2-sub, #goerdes-preview[data-light='true'] .g-hero2-sub { color:var(--g-muted); font-size:19px; line-height:1.6; max-width:30em; margin-top:20px; } #goerdes-preview .g-hero2-sub strong, #goerdes-preview[data-light='true'] .g-hero2-sub strong { color:var(--g-ink); font-weight:600; } #goerdes-preview .g-hero2 .g-actions { margin-top:30px; gap:12px; } #goerdes-preview .g-hero2-shot { order:1; margin:0; position:relative; overflow:hidden; border-radius:28px; padding:clamp(20px,3cqw,44px); display:flex; flex-direction:column; justify-content:center; background:radial-gradient(120% 90% at 20% 0%,oklch(0.82 0.12 20) 0%,transparent 60%),linear-gradient(145deg,oklch(0.72 0.17 6),oklch(0.65 0.21 12) 55%,oklch(0.72 0.16 26)); box-shadow:var(--g-shadow); } #goerdes-preview .g-hero2-shot img { display:block; width:100%; height:auto; filter:drop-shadow(0 26px 30px rgba(60,10,20,.35)); } #goerdes-preview .g-hero2-shot figcaption { margin-top:18px; align-self:flex-start; padding:7px 16px; border-radius:999px; background:rgba(255,255,255,.88); font-size:15px; color:var(--g-ink); display:flex; gap:8px; align-items:center; } #goerdes-preview .g-hero2-shot figcaption::before { content:''; width:8px; height:8px; border-radius:50%; background:var(--g-accent); } #goerdes-preview .g-hero2-shot figcaption a { font-weight:600; text-decoration:underline; text-underline-offset:3px; } #goerdes-preview .g-trust { list-style:none; margin:clamp(14px,1.6vw,22px) 0 0; padding:26px clamp(20px,3cqw,40px); background:#fff; border-radius:28px; box-shadow:var(--g-shadow); display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px 28px; } #goerdes-preview .g-trust li { position:relative; padding-left:36px; font-size:16px; line-height:1.4; color:var(--g-muted); } #goerdes-preview .g-trust li::before { content:''; position:absolute; left:0; top:1px; width:24px; height:24px; border-radius:50%; background:var(--g-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23311' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat; } #goerdes-preview .g-trust strong { display:block; font-weight:600; color:var(--g-ink); font-size:17px; } /* Sektionen */ #goerdes-preview .g-section { padding-top:clamp(64px,8vw,128px); padding-bottom:0; } #goerdes-preview .g-section:last-of-type { padding-bottom:0; } #goerdes-preview main { padding-bottom:clamp(16px,2vw,28px); } /* Karten-Grundlage */ #goerdes-preview .g-card, #goerdes-preview .g-whygrid article, #goerdes-preview .g-faq details, #goerdes-preview .g-edrow, #goerdes-preview .g-worksmini, #goerdes-preview .g-pricecard, #goerdes-preview .g-vb-factcard, #goerdes-preview .g-tlstep { background:#fff; border:0; border-radius:28px; box-shadow:var(--g-shadow); } /* Worauf es ankommt */ #goerdes-preview .g-whygrid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.6vw,22px); margin-top:clamp(28px,4cqw,48px); } #goerdes-preview .g-whygrid article { padding:clamp(24px,2.8cqw,36px); display:flex; flex-direction:column; align-items:flex-start; text-align:left; } #goerdes-preview .g-whynum { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:14px; background:var(--g-tint); color:var(--g-accent-deep); font-weight:600; font-size:18px; margin-bottom:22px; } #goerdes-preview .g-whygrid h3 { font-size:26px; margin-bottom:10px; } #goerdes-preview .g-whygrid p { font-size:17px; color:var(--g-muted); margin-bottom:20px; } #goerdes-preview .g-whygrid .g-link { margin-top:auto; padding:0; } /* Projekte: zwei Karten nebeneinander */ #goerdes-preview .g-edlist { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,1.6vw,22px); margin-top:clamp(28px,4cqw,48px); } #goerdes-preview .g-edrow { display:flex; flex-direction:column; gap:0; padding:14px 14px clamp(22px,2.4cqw,32px); } #goerdes-preview .g-edrow + .g-edrow { border-top:0; } #goerdes-preview .g-edmedia { border-radius:18px; background:radial-gradient(110% 100% at 50% 0%,#fff 0%,var(--g-tint) 100%); padding:clamp(18px,3cqw,36px); } #goerdes-preview .g-edmedia img { width:92%; filter:drop-shadow(0 16px 20px rgba(60,10,20,.22)); transition:transform .5s var(--g-ease); } #goerdes-preview .g-edrow:hover .g-edmedia img { transform:scale(1.04); } #goerdes-preview .g-ednum { top:14px; left:16px; font-size:14px; font-weight:500; color:var(--g-muted); background:#fff; padding:3px 12px; border-radius:999px; line-height:1.5; } #goerdes-preview .g-edbody { padding:22px 12px 0; text-align:left; } #goerdes-preview .g-edmeta, #goerdes-preview .g-workscat { font-size:14px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--g-accent-deep); } #goerdes-preview .g-edrow h2, #goerdes-preview .g-edrow h3 { font-size:clamp(26px,2.6cqw,34px); font-weight:600; letter-spacing:-.02em; line-height:1.12; margin-top:8px; } #goerdes-preview .g-eddesc { color:var(--g-muted); font-size:17px; } #goerdes-preview .g-edchips li { background:#f5f4f3; border-radius:999px; font-size:14px; padding:6px 14px; } #goerdes-preview .g-edcta { border-radius:14px; background:var(--g-ink); color:#fff; font-size:16px; font-weight:500; padding:12px 22px; min-height:48px; } #goerdes-preview .g-edcta:hover { filter:none; background:var(--g-accent); color:var(--g-on-accent); } #goerdes-preview .g-edmore { text-align:center; } #goerdes-preview .g-worksgrid { gap:clamp(14px,1.6vw,22px); } #goerdes-preview .g-worksmini { padding:clamp(20px,2.4cqw,28px); } #goerdes-preview .g-worksmini:hover { box-shadow:0 0 0 6px rgba(255,255,255,.65),0 18px 36px -16px rgba(200,40,70,.4); } #goerdes-preview .g-worksmini h2, #goerdes-preview .g-worksmini h3 { font-size:19px; font-weight:600; } #goerdes-preview .g-worksmini:hover h2, #goerdes-preview .g-worksmini:hover h3 { color:var(--g-accent-deep); } @container (max-width:880px) { #goerdes-preview .g-edlist { grid-template-columns:1fr; } } /* Leistungen */ #goerdes-preview .g-cards { gap:clamp(14px,1.6vw,22px); margin-top:clamp(28px,4cqw,48px); } #goerdes-preview .g-card { padding:clamp(24px,2.8cqw,36px); text-align:left; transition:transform .3s var(--g-ease),box-shadow .3s var(--g-ease); } #goerdes-preview .g-card:hover { transform:translateY(-4px); box-shadow:0 0 0 6px rgba(255,255,255,.65),0 22px 40px -18px rgba(200,40,70,.4); } #goerdes-preview .g-card-icon { width:56px; height:56px; padding:14px; margin:0 0 26px; border-radius:16px; background:var(--g-tint); color:var(--g-accent-deep); } #goerdes-preview .g-card:hover .g-card-icon { transform:none; background:var(--g-accent); color:var(--g-on-accent); } #goerdes-preview .g-card h3 { font-size:24px; letter-spacing:-.015em; line-height:1.2; } #goerdes-preview .g-card > p { font-size:17px; color:var(--g-muted); margin-top:10px; } #goerdes-preview .g-card-links { padding-top:26px; } #goerdes-preview .g-card-links .g-link { padding:0; } /* Zusammenarbeit: vier Schritt-Karten */ #goerdes-preview .g-tlwrap { display:flex; flex-direction:column; align-items:center; gap:clamp(28px,4cqw,48px); text-align:center; } #goerdes-preview .g-tlhead p { margin:16px auto 0; max-width:36em; } #goerdes-preview .g-timeline { width:100%; justify-self:stretch; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,1.6vw,22px); } #goerdes-preview .g-timeline::before, #goerdes-preview .g-tlfill { display:none; } #goerdes-preview .g-tlstep { padding:clamp(22px,2.4cqw,32px); text-align:left; } #goerdes-preview .g-tlstep:last-child { padding-bottom:clamp(22px,2.4cqw,32px); } #goerdes-preview .g-tlnum { position:static; width:auto; height:auto; border:0; border-radius:0; background:none; font-size:clamp(38px,3.6cqw,52px); font-weight:600; letter-spacing:-.03em; color:var(--g-accent); margin-bottom:14px; justify-content:flex-start; } #goerdes-preview .g-tlstep.on .g-tlnum { background:none; color:var(--g-accent); } #goerdes-preview .g-tlstep h3 { font-size:22px; margin:0 0 8px; } #goerdes-preview .g-tlstep p { font-size:16px; color:var(--g-muted); } @container (max-width:1020px) { #goerdes-preview .g-timeline { grid-template-columns:repeat(2,minmax(0,1fr)); } } @container (max-width:620px) { #goerdes-preview .g-timeline { grid-template-columns:1fr; } } /* Über mich: Karte mit Porträt links */ #goerdes-preview .g-about { background:#fff; margin:clamp(64px,8vw,128px) clamp(12px,2.2vw,28px) 0; padding:clamp(14px,1.6vw,22px); border-radius:36px; box-shadow:var(--g-shadow); grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(24px,5cqw,72px); align-items:center; } #goerdes-preview .g-portrait-wrap { background:radial-gradient(120% 90% at 20% 0%,oklch(0.86 0.1 18) 0%,transparent 60%),linear-gradient(145deg,oklch(0.72 0.17 6),oklch(0.65 0.21 12) 55%,oklch(0.72 0.16 26)); border-radius:26px; overflow:hidden; padding:clamp(14px,2cqw,28px) clamp(14px,2cqw,28px) 0; } #goerdes-preview .g-about > div { padding:clamp(8px,2cqw,32px) clamp(8px,2cqw,32px) clamp(8px,2cqw,32px) 0; } #goerdes-preview .g-about p { margin:20px 0 28px; max-width:34em; } /* Kosten-Hinweis */ #goerdes-preview .g-costs { padding-top:clamp(64px,8vw,128px); padding-bottom:0; } #goerdes-preview .g-costsbox { display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; background:#fff; border-radius:36px; box-shadow:var(--g-shadow); padding:clamp(28px,4.5cqw,64px); } #goerdes-preview .g-costsbox > div { flex:1 1 380px; } #goerdes-preview .g-costsbox h2 { font-size:clamp(28px,3.2cqw,44px); } #goerdes-preview .g-costsbox p { margin-top:14px; max-width:36em; color:var(--g-muted); font-size:18px; } /* FAQ */ #goerdes-preview .g-faq { border-top:0; } #goerdes-preview .g-faq h2 { margin-bottom:clamp(24px,3.4cqw,40px); } #goerdes-preview .g-faq details { padding:4px clamp(20px,2.4cqw,32px); margin:0 auto 12px; max-width:880px; } #goerdes-preview .g-faq summary, #goerdes-preview .g-vb-faq summary { font-size:19px; font-weight:500; letter-spacing:-.005em; cursor:pointer; font-family:var(--g-sans); text-transform:none; } #goerdes-preview .g-faq summary { display:flex; align-items:center; list-style:none; min-height:64px; } #goerdes-preview .g-faq summary::-webkit-details-marker { display:none; } #goerdes-preview .g-faq summary::after { content:'+'; margin-left:auto; padding-left:24px; font-size:30px; font-weight:300; color:var(--g-accent-deep); transition:transform .3s var(--g-ease); } #goerdes-preview .g-faq details[open] summary::after { transform:rotate(45deg); } #goerdes-preview .g-vb-faq details { border-bottom:1px solid var(--g-line); } #goerdes-preview .g-vb-faq summary:after { font-family:var(--g-sans); color:var(--g-accent-deep); } #goerdes-preview .g-faq p { color:var(--g-muted); font-size:17px; padding-bottom:20px; } /* Kontakt: Farbverlauf-Karte */ #goerdes-preview .g-contact { margin:clamp(64px,8vw,128px) clamp(12px,2.2vw,28px) 0; padding:clamp(36px,6cqw,88px); border-radius:36px; color:var(--g-on-accent); align-items:center; background:radial-gradient(90% 120% at 15% 0%,oklch(0.84 0.1 25) 0%,transparent 55%),linear-gradient(145deg,oklch(0.72 0.17 6),oklch(0.65 0.21 12) 55%,oklch(0.72 0.16 26)); } #goerdes-preview .g-contact .g-label { color:var(--g-ink); } #goerdes-preview .g-contact h2 { font-size:clamp(36px,4.8cqw,68px); color:var(--g-on-accent); } #goerdes-preview .g-contact h2 em { color:#fff; } #goerdes-preview .g-contact p { color:var(--g-on-accent); font-size:19px; line-height:1.55; } #goerdes-preview .g-contact .g-actions { flex-direction:column; align-items:flex-start; gap:12px; justify-self:end; } #goerdes-preview .g-contact .g-button { background:var(--g-ink); color:#fff; } #goerdes-preview .g-contact .g-button:hover { background:#fff; color:var(--g-ink); } #goerdes-preview .g-contact .g-link { color:var(--g-on-accent); } #goerdes-preview .g-contact .g-link:hover { color:#fff; } /* Footer */ #goerdes-preview .g-footer { background:transparent; color:var(--g-muted); border-top:0; margin-top:clamp(40px,5vw,72px); padding-top:0; padding-bottom:40px; font-size:16px; } #goerdes-preview .g-footer p { font-size:15px; } #goerdes-preview .g-footer .g-logo { content:url('/assets/img/logo-dunkel.png'); width:120px; } #goerdes-preview .g-footer a:hover { color:var(--g-accent-deep); } #goerdes-preview .g-footer .g-consent-open, .g-footer .g-consent-open { color:var(--g-muted); font-size:15px; } /* Unterseiten */ #goerdes-preview .g-vb-hero, #goerdes-preview .g-detailhost { padding-top:clamp(36px,5vw,72px); } #goerdes-preview .g-vb-hero h1, #goerdes-preview .g-detail h1 { font-size:clamp(34px,4.4cqw,62px); line-height:1.06; letter-spacing:-.03em; font-weight:600; } #goerdes-preview .g-vb-hero p, #goerdes-preview .g-detail p, #goerdes-preview .g-detail li { font-size:18px; color:var(--g-ink); } #goerdes-preview .g-vb-hero p { color:var(--g-muted); font-size:19px; } #goerdes-preview .g-detail h2 { font-size:clamp(26px,2.8cqw,38px); margin:44px 0 16px; } #goerdes-preview .g-detail h3 { font-size:22px; font-weight:600; } #goerdes-preview .g-vb-facts { border:0; } #goerdes-preview .g-vb-facts small, #goerdes-preview .g-vb-factcard small { font-family:var(--g-sans); letter-spacing:0; text-transform:none; font-size:15px; color:var(--g-muted); } #goerdes-preview .g-vb-factcards { gap:clamp(14px,1.6vw,22px); max-width:none; } #goerdes-preview .g-vb-factcard { padding:clamp(22px,2.6cqw,32px); } #goerdes-preview .g-vb-factcard:hover { border:0; } #goerdes-preview .g-vb-factcard em { color:var(--g-accent-deep); font-weight:600; font-size:clamp(34px,3.4cqw,46px); } #goerdes-preview .g-vb-factunit { font-weight:500; } #goerdes-preview .g-vb-checks svg, #goerdes-preview .g-pricelist svg { color:var(--g-accent-deep); } #goerdes-preview .g-pricecard { padding:clamp(24px,2.6cqw,34px); } #goerdes-preview .g-pricecard:nth-child(2) { background:var(--g-tint); box-shadow:0 0 0 2px var(--g-accent),0 0 0 8px rgba(255,255,255,.65); } #goerdes-preview .g-pricecard-badge { background:var(--g-accent); color:var(--g-on-accent); border:0; box-shadow:none; border-radius:999px; font-size:13px; font-weight:500; text-transform:none; letter-spacing:0; } #goerdes-preview .g-pricecard-anchor { font-size:32px; font-weight:600; letter-spacing:-.02em; } #goerdes-preview .g-pricecard h3 { font-size:22px; } #goerdes-preview .g-related { border-top:1px solid var(--g-line); } #goerdes-preview .g-detail p.g-err404 { font-family:var(--g-sans); font-style:normal; font-weight:600; color:var(--g-accent); letter-spacing:-.04em; } #goerdes-preview .g-detail > .g-link:first-child, .g-detail > a:first-child { font-size:15px; font-family:var(--g-sans); text-transform:none; letter-spacing:0; color:var(--g-muted); } .q-page-intro h1 { font-family:'Outfit',system-ui,sans-serif; font-weight:600; letter-spacing:-.03em; line-height:1.06; font-size:clamp(34px,4.4vw,60px); } .q-page-intro p { color:#5c5656; font-size:18px; } /* Fragebogen: nur Optik */ #goerdes-request { --q-accent:oklch(0.66 0.2 12); --q-ink:#1d1a1a; --q-paper:#fff; font-family:'Outfit',system-ui,Arial,sans-serif; font-size:18px; background:#fff; border-radius:36px; box-shadow:0 0 0 6px rgba(255,255,255,.65),0 14px 34px -16px rgba(40,20,20,.18); margin-top:24px; margin-bottom:40px; } #goerdes-request h2 { font-weight:600; letter-spacing:-.025em; line-height:1.1; font-size:clamp(28px,4.2cqw,44px); } #goerdes-request .q-choice, #goerdes-request .q-field input, #goerdes-request textarea, #goerdes-request select { border:0; box-shadow:inset 0 0 0 1px #e1dddc; border-radius:16px; background:#faf9f8; } #goerdes-request .q-choice:has(input:checked) { background:#fdeff1; box-shadow:inset 0 0 0 2px var(--q-accent); border:0; } #goerdes-request .q-choice input { accent-color:oklch(0.5 0.18 14); } #goerdes-request .q-progress li { border-top:4px solid #ece9e8; border-radius:2px; } #goerdes-request .q-progress li.q-done { border-color:#1d1a1a; } #goerdes-request .q-progress li[aria-current='step'] { border-color:var(--q-accent); } #goerdes-request .q-summary { background:#faf9f8; border-radius:0 16px 16px 0; } #goerdes-request .q-next { background:#1d1a1a; color:#fff; border-radius:16px; font-size:17px; font-weight:500; } #goerdes-request .q-next:hover { background:var(--q-accent); color:oklch(0.2 0.02 20); } #goerdes-request .q-edit { color:oklch(0.5 0.18 14); } /* Cookie-Banner */ .g-consent { background:#1d1a1a; border-top:0; border-radius:20px; left:12px; right:12px; bottom:12px; } .g-consent-yes { border-radius:12px; background:oklch(0.66 0.2 12); color:oklch(0.2 0.02 20); font-weight:500; } /* Feste Aktionsleiste (Smartphone) */ .g-mobilebar { display:none; } @media (max-width:760px) { .g-mobilebar { display:flex; gap:10px; position:fixed; left:10px; right:10px; bottom:10px; z-index:45; padding:8px; background:rgba(255,255,255,.94); backdrop-filter:blur(10px); border-radius:22px; box-shadow:var(--g-shadow,0 10px 30px rgba(0,0,0,.15)); } .g-mobilebar a { flex:1; display:flex; align-items:center; justify-content:center; min-height:48px; border-radius:14px; font:500 17px/1 'Outfit',system-ui,sans-serif; text-decoration:none; } .g-mobilebar .g-mb-call { background:#f3f1f0; color:#1d1a1a; } .g-mobilebar .g-mb-req { background:#1d1a1a; color:#fff; } body { padding-bottom:80px; } } /* Responsiv */ @container (max-width:1020px) { #goerdes-preview .g-trust { grid-template-columns:1fr 1fr; } } @container (max-width:900px) { #goerdes-preview .g-hero2-main { grid-template-columns:1fr; } #goerdes-preview .g-hero2-copy { order:1; } #goerdes-preview .g-hero2-shot { order:2; } #goerdes-preview .g-whygrid { grid-template-columns:1fr; } #goerdes-preview .g-about { grid-template-columns:1fr; } #goerdes-preview .g-contact .g-actions { justify-self:start; } } @container (max-width:620px) { #goerdes-preview .g-hero2 h1 { font-size:clamp(34px,10cqw,46px); } #goerdes-preview main h2, #goerdes-preview h2 { font-size:clamp(28px,8.4cqw,38px); } #goerdes-preview .g-trust { grid-template-columns:1fr; } #goerdes-preview .g-hero2 .g-button, #goerdes-preview .g-hero2 .g-link { width:100%; justify-content:space-between; } #goerdes-preview .g-logo { width:112px; } } @media (max-width:760px) { #goerdes-preview .g-header { flex-wrap:wrap; } .g-navitem .g-drop { background:transparent; box-shadow:none; } #goerdes-preview .g-nav.g-expanded { padding:8px 0 6px; } #goerdes-preview .g-nav a.g-nav-cta, #goerdes-preview .g-nav > a:last-child { margin-left:0; } } @media (prefers-reduced-motion:reduce) { #goerdes-preview .g-button, #goerdes-preview .g-card, #goerdes-preview .g-edmedia img, #goerdes-preview .g-faq summary::after { transition:none; } #goerdes-preview .g-button:hover, #goerdes-preview .g-card:hover, #goerdes-preview .g-edrow:hover .g-edmedia img { transform:none; } } #goerdes-preview .g-top:has(> .g-hero2) { display:contents; min-height:0; } #goerdes-preview .g-top, #goerdes-preview[data-light='true'] .g-top { background:none; color:var(--g-ink); } #goerdes-preview .g-hero2-copy::before { background-size:10px 10px,auto; background-position:12px center; } /* ---------- Bewegung & Politur ---------- */ /* Hero-Karte links: animierte Google-Suche auf Korall-Verlauf */ #goerdes-preview .g-hero2-stage { order:1; position:relative; max-width:none; width:auto; justify-self:stretch; display:flex; align-items:center; justify-content:center; min-height:420px; padding:clamp(24px,4cqw,56px) clamp(20px,4cqw,56px) clamp(40px,5cqw,72px); border-radius:28px; background:radial-gradient(120% 90% at 20% 0%,oklch(0.84 0.1 18) 0%,transparent 60%),linear-gradient(145deg,oklch(0.72 0.17 6),oklch(0.65 0.21 12) 55%,oklch(0.72 0.16 26)); box-shadow:var(--g-shadow); overflow:hidden; } #goerdes-preview .g-hero2-stage::before { content:''; position:absolute; width:340px; height:340px; right:-120px; bottom:-140px; border-radius:50%; background:rgba(255,255,255,.18); filter:blur(30px); } #goerdes-preview .g-hero2-stage .g-serp { position:relative; width:100%; max-width:440px; border-radius:22px; background:#fff; padding:20px; min-height:330px; box-shadow:0 30px 60px -24px rgba(90,10,30,.55); } #goerdes-preview .g-serp-search { border:0; background:#f5f4f3; border-radius:999px; } #goerdes-preview .g-serp-result { border:0; background:#faf9f8; border-radius:18px; } #goerdes-preview .g-serp-map { border-radius:12px; } #goerdes-preview .g-serp-act { border-radius:12px; border:0; background:#f0eeed; } #goerdes-preview .g-serp-act.call { background:var(--g-accent); color:var(--g-on-accent); } #goerdes-preview .g-serp-act.pressed { background:oklch(0.58 0.2 12); } #goerdes-preview .g-hero2-stage .g-toast, #goerdes-preview[data-light='true'] .g-hero2-stage .g-toast { left:clamp(12px,3cqw,40px); bottom:clamp(14px,2.4cqw,28px); background:#1d1a1a; color:#fff; border:0; border-radius:16px; box-shadow:0 18px 30px -12px rgba(0,0,0,.5); } #goerdes-preview .g-hero2-stage .g-toast span, #goerdes-preview[data-light='true'] .g-hero2-stage .g-toast span { color:#cfc9c8; } @container (max-width:900px) { #goerdes-preview .g-hero2-stage { order:2; min-height:380px; } } /* Einblenden beim Laden (Hero) und beim Scrollen (Rest, JS setzt g-rv-init) */ @keyframes g-rise { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:none; } } @keyframes g-pop { from { opacity:0; transform:translateY(16px) scale(.97); } to { opacity:1; transform:none; } } @media (prefers-reduced-motion:no-preference) { #goerdes-preview .g-header { animation:g-pop .7s var(--g-ease) both; } #goerdes-preview .g-hero2-stage { animation:g-pop .9s var(--g-ease) .1s both; } #goerdes-preview .g-hero2-copy { animation:g-pop .9s var(--g-ease) .2s both; } #goerdes-preview .g-hero2-copy h1 { animation:g-rise .8s var(--g-ease) .35s both; } #goerdes-preview .g-hero2-sub { animation:g-rise .8s var(--g-ease) .48s both; } #goerdes-preview .g-hero2-copy .g-actions { animation:g-rise .8s var(--g-ease) .6s both; } #goerdes-preview .g-trust { animation:g-rise .9s var(--g-ease) .75s both; } .g-rv-init .g-rv { opacity:0; transform:translateY(28px); transition:opacity .7s var(--g-ease),transform .7s var(--g-ease); transition-delay:var(--g-rv-d,0ms); } .g-rv-init .g-rv.g-rv-in { opacity:1; transform:none; } #goerdes-preview .g-hero2-stage::before { animation:g-glow 9s ease-in-out infinite alternate; } @keyframes g-glow { to { transform:translate(-60px,-40px) scale(1.15); } } #goerdes-preview .g-contact::after { content:''; position:absolute; } } #goerdes-preview .g-header.g-scrolled { box-shadow:0 0 0 6px rgba(255,255,255,.65),0 20px 40px -14px rgba(40,20,20,.28); } #goerdes-preview .g-contact { position:relative; overflow:hidden; } #goerdes-preview .g-edmedia, #goerdes-preview .g-portrait-wrap { transition:transform .5s var(--g-ease); } #goerdes-preview .g-edrow:hover { box-shadow:0 0 0 6px rgba(255,255,255,.65),0 26px 44px -20px rgba(200,40,70,.35); } #goerdes-preview .g-edrow { transition:box-shadow .4s var(--g-ease),transform .4s var(--g-ease); } #goerdes-preview .g-whygrid article { transition:transform .35s var(--g-ease),box-shadow .35s var(--g-ease); } #goerdes-preview .g-whygrid article:hover { transform:translateY(-4px); box-shadow:0 0 0 6px rgba(255,255,255,.65),0 22px 40px -18px rgba(200,40,70,.35); } /* Weiche Korall-Lichter im Hintergrund der Seite */ #goerdes-preview { background:radial-gradient(60% 380px at 85% 0%,rgba(234,75,102,.10),transparent 70%),radial-gradient(50% 420px at 0% 28%,rgba(255,170,120,.10),transparent 70%),var(--g-paper); } /* ---------- Personenmarke: Porträt im Hero, Projekt-Band, Fakten ---------- */ #goerdes-preview .g-hero2-main { grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); grid-template-rows:auto auto; } #goerdes-preview .g-hero2-portrait { grid-column:1; grid-row:1 / span 2; order:0; margin:0; position:relative; overflow:hidden; border-radius:28px; box-shadow:var(--g-shadow); display:flex; align-items:flex-end; justify-content:center; min-height:420px; background:radial-gradient(120% 90% at 20% 0%,oklch(0.86 0.1 18) 0%,transparent 60%),linear-gradient(145deg,oklch(0.72 0.17 6),oklch(0.65 0.21 12) 55%,oklch(0.72 0.16 26)); animation:g-pop .9s var(--g-ease) .1s both; } #goerdes-preview .g-hero2-portrait img { display:block; width:100%; height:auto; max-height:100%; object-fit:contain; object-position:bottom; position:relative; z-index:1; } #goerdes-preview .g-hero2-portrait figcaption { position:absolute; z-index:2; left:16px; bottom:16px; display:flex; flex-direction:column; padding:10px 18px; border-radius:16px; background:rgba(255,255,255,.92); backdrop-filter:blur(8px); box-shadow:0 12px 24px -12px rgba(60,10,20,.4); line-height:1.25; } #goerdes-preview .g-hero2-portrait figcaption b { font-weight:600; font-size:18px; } #goerdes-preview .g-hero2-portrait figcaption span { font-size:14px; color:var(--g-muted); } #goerdes-preview .g-hero2-copy { grid-column:2; grid-row:1; order:0; } #goerdes-preview .g-hero2-stage { grid-column:2; grid-row:2; order:0; min-height:300px; padding:clamp(20px,3cqw,36px) clamp(20px,3cqw,36px) clamp(36px,4cqw,56px); } #goerdes-preview .g-hero2 h1 { font-size:clamp(34px,4cqw,58px); } @container (max-width:900px) { #goerdes-preview .g-hero2-main { grid-template-columns:1fr; } #goerdes-preview .g-hero2-copy { grid-column:1; grid-row:1; } #goerdes-preview .g-hero2-portrait { grid-column:1; grid-row:2; min-height:0; aspect-ratio:1/1; } #goerdes-preview .g-hero2-stage { grid-column:1; grid-row:3; } } /* Laufband mit Projektnamen */ .g-marquee { overflow:hidden; margin:clamp(40px,5vw,72px) 0 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); } .g-marquee-track { display:flex; gap:12px; width:max-content; padding:6px 0; } .g-marquee span { flex:none; padding:10px 22px; border-radius:999px; background:#fff; box-shadow:0 0 0 1px #e8e5e4; font:500 17px/1.2 'Outfit',system-ui,sans-serif; color:#1d1a1a; } @media (prefers-reduced-motion:no-preference) { .g-marquee-track { animation:g-marq 48s linear infinite; } .g-marquee:hover .g-marquee-track { animation-play-state:paused; } } @keyframes g-marq { to { transform:translateX(calc(-50% - 6px)); } } /* Projekte: erstes Projekt groß */ #goerdes-preview .g-edlist .g-edrow:first-child { grid-column:1 / -1; flex-direction:row; align-items:stretch; gap:clamp(8px,1.6cqw,24px); } #goerdes-preview .g-edlist .g-edrow:first-child .g-edmedia { flex:1.35 1 0; } #goerdes-preview .g-edlist .g-edrow:first-child .g-edbody { flex:1 1 0; display:flex; flex-direction:column; justify-content:center; padding:clamp(12px,2.4cqw,40px); } #goerdes-preview .g-edlist .g-edrow:first-child h3 { font-size:clamp(32px,3.6cqw,52px); } @container (max-width:880px) { #goerdes-preview .g-edlist .g-edrow:first-child { flex-direction:column; } } /* Über mich: Text + Zahlen */ #goerdes-preview .g-about { grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); padding:clamp(28px,5cqw,72px); gap:clamp(28px,5cqw,72px); align-items:center; } #goerdes-preview .g-about > div { padding:0; } #goerdes-preview .g-facts { list-style:none; margin:0; padding:0; display:grid; gap:14px; } #goerdes-preview .g-facts li { display:flex; align-items:center; gap:20px; padding:20px 24px; border-radius:20px; background:var(--g-tint); } #goerdes-preview .g-facts b { flex:none; min-width:92px; font-size:clamp(34px,3.4cqw,48px); font-weight:600; letter-spacing:-.03em; color:var(--g-accent-deep); line-height:1; } #goerdes-preview .g-facts span { font-size:17px; line-height:1.4; color:var(--g-ink); } @container (max-width:900px) { #goerdes-preview .g-about { grid-template-columns:1fr; } } #goerdes-preview .g-hero2-portrait img { position:absolute; inset:0; width:100%; height:100%; max-height:none; object-fit:cover; object-position:50% 12%; } @container (max-width:900px) { #goerdes-preview .g-hero2-portrait img { object-position:50% 0; } } /* ---------- Prozess-Fenster (dunkle Karte) ---------- */ #goerdes-preview .g-flow { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(24px,4cqw,64px); width:100%; align-items:center; text-align:left; background:#1d1a1a; color:#fff; border-radius:36px; padding:clamp(24px,4cqw,56px); box-shadow:0 0 0 6px rgba(255,255,255,.65),0 30px 60px -30px rgba(40,10,20,.6); position:relative; overflow:hidden; } #goerdes-preview .g-flow::before { content:''; position:absolute; width:420px; height:420px; right:-140px; top:-180px; border-radius:50%; background:oklch(0.66 0.2 12 / .35); filter:blur(70px); pointer-events:none; } #goerdes-preview .g-flow .g-timeline { display:grid; grid-template-columns:1fr; gap:6px; position:relative; } #goerdes-preview .g-flow .g-tlstep, #goerdes-preview .g-flow .g-tlstep:last-child { position:relative; background:transparent; box-shadow:none; border-radius:18px; padding:18px 22px 20px 22px; cursor:pointer; transition:background .35s var(--g-ease); overflow:hidden; } #goerdes-preview .g-flow .g-tlstep:hover { background:rgba(255,255,255,.06); } #goerdes-preview .g-flow .g-tlstep.is-active { background:rgba(255,255,255,.09); } #goerdes-preview .g-flow .g-tlnum { font-size:15px; font-weight:500; letter-spacing:.02em; color:rgba(255,255,255,.55); margin:0 0 6px; } #goerdes-preview .g-flow .g-tlstep.is-active .g-tlnum { color:oklch(0.78 0.14 14); } #goerdes-preview .g-flow .g-tlstep h3 { color:#fff; font-size:24px; margin:0 0 6px; } #goerdes-preview .g-flow .g-tlstep p { color:#cfc8c8; font-size:16px; } #goerdes-preview .g-flow .g-tlstep::after { content:''; position:absolute; left:22px; right:22px; bottom:0; height:3px; border-radius:3px; background:var(--g-accent); transform:scaleX(0); transform-origin:left; } #goerdes-preview .g-flow .g-tlstep.is-active::after { animation:g-stepfill 4.2s linear forwards; } #goerdes-preview .g-flow.g-paused .g-tlstep.is-active::after { animation-play-state:paused; } @keyframes g-stepfill { to { transform:scaleX(1); } } #goerdes-preview .g-flow .g-tlstep:focus-visible { outline-color:#fff; } .g-flowwin { position:relative; border-radius:20px; background:#faf9f8; color:#1d1a1a; box-shadow:0 40px 60px -30px rgba(0,0,0,.7); overflow:hidden; } .g-fw-bar { display:flex; align-items:center; gap:7px; padding:12px 16px; background:#efeceb; } .g-fw-bar i { width:11px; height:11px; border-radius:50%; background:#d8d3d2; } .g-fw-bar i:first-child { background:#ee6a73; } .g-fw-bar i:nth-child(2) { background:#f2bf5a; } .g-fw-bar i:nth-child(3) { background:#6cc785; } .g-fw-bar span { margin-left:12px; flex:1; padding:5px 14px; border-radius:999px; background:#fff; font-size:14px; color:#6b6464; } .g-fw-body { position:relative; height:clamp(250px,26vw,330px); } .g-sc { position:absolute; inset:0; padding:clamp(16px,2.4vw,28px); opacity:0; transform:scale(.98); transition:opacity .5s var(--g-ease),transform .5s var(--g-ease); pointer-events:none; } .g-flow[data-step="1"] .g-sc1, .g-flow[data-step="2"] .g-sc2, .g-flow[data-step="3"] .g-sc3, .g-flow[data-step="4"] .g-sc4 { opacity:1; transform:none; } .g-fw-q { font-size:14px; font-weight:500; color:oklch(0.5 0.18 14); margin-bottom:12px; } .g-sc1 ul, .g-fw-checks { list-style:none; margin:0; padding:0; display:grid; gap:12px; } .g-sc1 li, .g-fw-checks li { padding:12px 16px 12px 44px; position:relative; border-radius:14px; background:#fff; box-shadow:0 0 0 1px #ece9e8; font-size:17px; opacity:0; transform:translateX(-14px); } .g-sc1 li::before, .g-fw-checks li::before { content:''; position:absolute; left:14px; top:50%; width:20px; height:20px; margin-top:-10px; border-radius:50%; background:var(--g-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23311' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat; } .g-flow[data-step="1"] .g-sc1 li, .g-flow[data-step="4"] .g-fw-checks li { animation:g-slidein .55s var(--g-ease) forwards; } .g-sc1 li:nth-child(2), .g-fw-checks li:nth-child(2) { animation-delay:.18s !important; } .g-sc1 li:nth-child(3), .g-fw-checks li:nth-child(3) { animation-delay:.36s !important; } .g-sc1 li:nth-child(4) { animation-delay:.54s !important; } @keyframes g-slidein { to { opacity:1; transform:none; } } .g-sc2, .g-sc3 { display:grid; gap:12px; grid-template-rows:auto 1fr auto; } .g-sc .wf { border-radius:14px; } .g-sc2 .nav, .g-sc3 .nav { height:30px; display:flex; align-items:center; justify-content:flex-end; padding:0 10px; } .g-sc2 .nav { border:2px dashed #cfc8c7; } .g-sc2 .hero { border:2px dashed #cfc8c7; padding:18px; display:grid; align-content:center; gap:10px; } .g-sc2 .hero b { height:12px; border-radius:6px; background:#e4dfde; width:70%; } .g-sc2 .hero b + b { width:46%; } .g-sc2 .row { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; height:64px; } .g-sc2 .row i { border:2px dashed #cfc8c7; border-radius:12px; } .g-sc3 .nav { background:#fff; box-shadow:0 0 0 1px #ece9e8; } .g-sc3 .nav u { width:46px; height:10px; border-radius:5px; background:#1d1a1a; } .g-sc3 .hero { background:linear-gradient(145deg,oklch(0.72 0.17 6),oklch(0.65 0.21 12) 55%,oklch(0.72 0.16 26)); padding:20px; display:grid; align-content:center; gap:10px; } .g-sc3 .hero b { height:14px; border-radius:7px; background:rgba(255,255,255,.95); width:64%; } .g-sc3 .hero b + b { width:42%; background:rgba(255,255,255,.6); height:10px; } .g-sc3 .hero s { width:96px; height:28px; border-radius:10px; background:#1d1a1a; margin-top:6px; } .g-sc3 .row { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; height:64px; } .g-sc3 .row i { border-radius:12px; background:#fff; box-shadow:0 0 0 1px #ece9e8; } .g-flow[data-step="2"] .g-sc2 .wf, .g-flow[data-step="3"] .g-sc3 .wf { animation:g-rise .6s var(--g-ease) both; } .g-sc2 .hero, .g-sc3 .hero { animation-delay:.12s !important; } .g-sc2 .row, .g-sc3 .row { animation-delay:.24s !important; } .g-flow[data-step="3"] .g-sc3 .row i { animation:g-pop .5s var(--g-ease) both; } .g-sc3 .row i:nth-child(2) { animation-delay:.4s !important; } .g-sc3 .row i:nth-child(3) { animation-delay:.52s !important; } .g-sc4 { display:grid; align-content:center; gap:18px; } .g-fw-live { justify-self:start; display:inline-flex; align-items:center; gap:10px; padding:8px 18px; border-radius:999px; background:#1d1a1a; color:#fff; font-size:16px; font-weight:500; opacity:0; } .g-fw-live::before { content:''; width:10px; height:10px; border-radius:50%; background:#6cc785; box-shadow:0 0 0 0 rgba(108,199,133,.7); } .g-flow[data-step="4"] .g-fw-live { animation:g-slidein .5s var(--g-ease) .8s forwards; } .g-flow[data-step="4"] .g-fw-live::before { animation:g-ping 1.6s ease-out 1.2s infinite; } @keyframes g-ping { to { box-shadow:0 0 0 12px rgba(108,199,133,0); } } @container (max-width:900px) { #goerdes-preview .g-flow { grid-template-columns:1fr; } } @media (prefers-reduced-motion:reduce) { .g-sc1 li, .g-fw-checks li, .g-fw-live { opacity:1; transform:none; } #goerdes-preview .g-flow .g-tlstep.is-active::after { animation:none; transform:scaleX(1); } } /* ---------- Eigenes Vorhaben ---------- */ #goerdes-preview .g-ownbox { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(24px,4cqw,64px); align-items:center; background:#fff; border-radius:36px; box-shadow:var(--g-shadow); padding:clamp(28px,4.5cqw,64px); } #goerdes-preview .g-ownbox h2 { font-size:clamp(30px,3.4cqw,46px); } #goerdes-preview .g-ownbox p { margin:16px 0 22px; color:var(--g-muted); font-size:18px; } #goerdes-preview .g-ownchips { list-style:none; margin:0 0 28px; padding:0; display:flex; flex-wrap:wrap; gap:10px; } #goerdes-preview .g-ownchips li { padding:8px 16px; border-radius:999px; background:var(--g-tint); font-size:16px; color:var(--g-ink); } #goerdes-preview .g-pipe { display:grid; gap:0; justify-items:center; } #goerdes-preview .g-pipe-node { width:min(100%,320px); padding:16px 20px; border-radius:20px; background:#faf9f8; box-shadow:0 0 0 1px var(--g-line); display:flex; justify-content:space-between; align-items:center; gap:12px; } #goerdes-preview .g-pipe-node b { font-weight:600; font-size:18px; } #goerdes-preview .g-pipe-node span { font-size:14px; color:var(--g-muted); text-align:right; } #goerdes-preview .g-pipe-node.ok { background:var(--g-tint); box-shadow:0 0 0 2px var(--g-accent); } #goerdes-preview .g-pipe-line { position:relative; width:2px; height:38px; background:var(--g-line); } #goerdes-preview .g-pipe-line i { position:absolute; left:-4px; top:0; width:10px; height:10px; border-radius:50%; background:var(--g-accent); } @media (prefers-reduced-motion:no-preference) { #goerdes-preview .g-pipe-line i { animation:g-drop 1.8s var(--g-ease) infinite; } #goerdes-preview .g-pipe-line + .g-pipe-node + .g-pipe-line i { animation-delay:.9s; } @keyframes g-drop { 0% { top:0; opacity:0; } 15% { opacity:1; } 85% { opacity:1; } 100% { top:calc(100% - 10px); opacity:0; } } } @container (max-width:900px) { #goerdes-preview .g-ownbox { grid-template-columns:1fr; } } /* ---------- Mikro-Animationen ---------- */ .g-progress { position:fixed; left:0; top:0; height:3px; width:100%; z-index:60; transform-origin:left; transform:scaleX(var(--p,0)); background:linear-gradient(90deg,oklch(0.72 0.17 6),oklch(0.66 0.2 12)); pointer-events:none; } #goerdes-preview h1 .g-w { display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.12em; margin-bottom:-.12em; } #goerdes-preview h1 .g-w > span { display:inline-block; animation:g-wordup .8s var(--g-ease) backwards; animation-delay:calc(.3s + var(--wi,0) * 90ms); } @keyframes g-wordup { from { transform:translateY(105%); } } #goerdes-preview h1.g-split { animation:none; } @media (prefers-reduced-motion:reduce) { #goerdes-preview h1 .g-w > span { transform:none; animation:none; } } #goerdes-preview .g-card, #goerdes-preview .g-whygrid article, #goerdes-preview .g-edrow, #goerdes-preview .g-facts li, #goerdes-preview .g-worksmini { position:relative; } #goerdes-preview .g-card::after, #goerdes-preview .g-whygrid article::after, #goerdes-preview .g-edrow::after, #goerdes-preview .g-facts li::after, #goerdes-preview .g-worksmini::after { content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .3s; background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),oklch(0.66 0.2 12 / .13),transparent 70%); } #goerdes-preview .g-card:hover::after, #goerdes-preview .g-whygrid article:hover::after, #goerdes-preview .g-edrow:hover::after, #goerdes-preview .g-facts li:hover::after, #goerdes-preview .g-worksmini:hover::after { opacity:1; } /* schwebende Kontakt-Buttons */ .g-fab { position:fixed; right:18px; top:50%; transform:translateY(-50%); z-index:44; display:grid; gap:10px; } .g-fab a { position:relative; display:flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:16px; background:#fff; color:#1d1a1a; box-shadow:0 0 0 1px #e8e5e4,0 14px 26px -12px rgba(40,10,20,.4); transition:transform .3s cubic-bezier(.2,.7,.1,1),background .3s,color .3s; } .g-fab a:hover, .g-fab a:focus-visible { transform:translateX(-4px); background:#1d1a1a; color:#fff; } .g-fab a span { position:absolute; right:calc(100% + 12px); padding:7px 14px; border-radius:12px; background:#1d1a1a; color:#fff; font:500 15px/1.2 'Outfit',system-ui,sans-serif; white-space:nowrap; opacity:0; transform:translateX(8px); pointer-events:none; transition:opacity .25s,transform .25s; } .g-fab a:hover span, .g-fab a:focus-visible span { opacity:1; transform:none; } @media (max-width:1100px) { .g-fab { display:none; } } .g-fw-body { height:clamp(300px,28vw,340px); } /* ---------- Hero neu: Aussage frei auf dem Grund, helle Such-Bühne rechts ---------- */ #goerdes-preview .g-hero2 { padding-top:clamp(28px,4vw,64px); } #goerdes-preview .g-hero2-main { grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); grid-template-rows:auto; gap:clamp(24px,4cqw,64px); align-items:center; } #goerdes-preview .g-hero2-copy { grid-column:1; grid-row:1; background:none; box-shadow:none; border-radius:0; padding:0 0 0 clamp(4px,1cqw,12px); justify-content:center; } #goerdes-preview .g-hero2-copy::before { box-shadow:0 0 0 1px var(--g-line),0 6px 14px -8px rgba(40,20,20,.2); } #goerdes-preview .g-hero2 h1 { font-size:clamp(40px,5.6cqw,84px); line-height:1; letter-spacing:-.035em; } #goerdes-preview .g-hero2 h1 em { display:block; } #goerdes-preview .g-hero2-sub, #goerdes-preview[data-light='true'] .g-hero2-sub { font-size:20px; margin-top:24px; max-width:27em; } #goerdes-preview .g-hero2 .g-actions { margin-top:34px; } #goerdes-preview .g-hero2-stage { grid-column:2; grid-row:1; min-height:480px; background:radial-gradient(90% 70% at 85% 10%,oklch(0.93 0.05 14) 0%,transparent 65%),radial-gradient(70% 60% at 0% 100%,oklch(0.95 0.04 40) 0%,transparent 65%),#fff; box-shadow:var(--g-shadow); } #goerdes-preview .g-hero2-stage::before { background:oklch(0.66 0.2 12 / .22); } #goerdes-preview .g-hero2-stage .g-serp { box-shadow:0 0 0 1px var(--g-line),0 34px 60px -26px rgba(90,20,40,.35); } @container (max-width:900px) { #goerdes-preview .g-hero2-main { grid-template-columns:1fr; } #goerdes-preview .g-hero2-copy { grid-column:1; grid-row:1; padding:0; } #goerdes-preview .g-hero2-stage { grid-column:1; grid-row:2; min-height:380px; } } @container (max-width:620px) { #goerdes-preview .g-hero2 h1 { font-size:clamp(38px,11.5cqw,52px); } } /* ---------- Über mich: Porträt auf heller, neutraler Fläche ---------- */ #goerdes-preview .g-about { grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(24px,5cqw,72px); padding:clamp(14px,1.6vw,22px); align-items:stretch; } #goerdes-preview .g-about-fig { margin:0; border-radius:26px; background:radial-gradient(90% 80% at 50% 30%,#fff 0%,#f1efee 100%); box-shadow:inset 0 0 0 1px #ece9e8; display:flex; align-items:center; justify-content:center; padding:clamp(12px,2cqw,28px); } #goerdes-preview .g-about-fig img { display:block; width:100%; height:auto; max-width:520px; } #goerdes-preview .g-about > div { padding:clamp(12px,3cqw,44px) clamp(12px,3cqw,44px) clamp(12px,3cqw,44px) 0; align-self:center; } #goerdes-preview .g-about p { margin:20px 0 24px; max-width:36em; } #goerdes-preview .g-facts { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0 0 28px; } #goerdes-preview .g-facts li { flex-direction:column; align-items:flex-start; gap:6px; padding:18px 20px; background:#f5f4f3; } #goerdes-preview .g-facts b { min-width:0; font-size:clamp(30px,3cqw,42px); } #goerdes-preview .g-facts span { font-size:15px; } @container (max-width:900px) { #goerdes-preview .g-about { grid-template-columns:1fr; } #goerdes-preview .g-about > div { padding:8px 14px 18px; } #goerdes-preview .g-about-fig img { max-width:360px; } } @container (max-width:520px) { #goerdes-preview .g-facts { grid-template-columns:1fr; } } /* Unterseiten: Inhaltsspalte mittig statt links am Rand */ #goerdes-preview .g-vb-hero, #goerdes-preview .g-vb-body { max-width:1120px; margin-left:auto; margin-right:auto; box-sizing:content-box; } /* Porträt überall auf neutraler, heller Fläche (Über-mich-Seite) */ #goerdes-preview .g-portrait-wrap { background:radial-gradient(90% 80% at 50% 30%,#fff 0%,#f1efee 100%); box-shadow:inset 0 0 0 1px #ece9e8; border-radius:26px; padding:clamp(12px,2cqw,28px); display:flex; align-items:center; justify-content:center; } #goerdes-preview .g-portrait-wrap img.g-portrait { max-width:520px; } /* ============================================================ Feinschliff 31.10.2026: durchgehende Navigation, heller Prozess- Abschnitt, sanftere Hover-Effekte, Kontakt-Raster, Footer mit Inhalt, Klaro!-Banner im Seitenstil ============================================================ */ /* Navigation: normale Leiste über die volle Breite */ #goerdes-preview .g-header { top:0; margin:0; border-radius:0; padding-top:14px; padding-bottom:14px; background:rgba(255,255,255,.92); backdrop-filter:blur(12px); box-shadow:0 1px 0 var(--g-line); } #goerdes-preview .g-header.g-scrolled { box-shadow:0 1px 0 var(--g-line),0 12px 24px -18px rgba(40,20,20,.25); } .g-navitem .g-drop { top:calc(100% + 10px); } #goerdes-preview .g-hero2 { padding-top:clamp(28px,4vw,64px); } /* Prozess: hell statt schwarz */ #goerdes-preview .g-flow { background:#fff; color:var(--g-ink); box-shadow:var(--g-shadow); } #goerdes-preview .g-flow::before { background:oklch(0.66 0.2 12 / .14); filter:blur(80px); } #goerdes-preview .g-flow .g-tlstep:hover { background:#f5f4f3; } #goerdes-preview .g-flow .g-tlstep.is-active { background:var(--g-tint); } #goerdes-preview .g-flow .g-tlnum { color:var(--g-muted); } #goerdes-preview .g-flow .g-tlstep.is-active .g-tlnum { color:var(--g-accent-deep); } #goerdes-preview .g-flow .g-tlstep h3 { color:var(--g-ink); } #goerdes-preview .g-flow .g-tlstep p { color:var(--g-muted); } #goerdes-preview .g-flow .g-tlstep:focus-visible { outline-color:var(--g-ink); } .g-flowwin { background:#faf9f8; box-shadow:0 0 0 1px var(--g-line),0 30px 50px -28px rgba(60,20,30,.3); } /* Hover: leiser, kein Vollrosa */ #goerdes-preview .g-card:hover, #goerdes-preview .g-whygrid article:hover, #goerdes-preview .g-edrow:hover, #goerdes-preview .g-worksmini:hover { box-shadow:0 0 0 6px rgba(255,255,255,.65),0 22px 40px -22px rgba(40,20,20,.22); } #goerdes-preview .g-card:hover .g-card-icon { background:oklch(0.93 0.045 12); color:var(--g-accent-deep); } #goerdes-preview .g-worksmini:hover h2, #goerdes-preview .g-worksmini:hover h3 { color:var(--g-ink); } #goerdes-preview .g-card::after, #goerdes-preview .g-whygrid article::after, #goerdes-preview .g-edrow::after, #goerdes-preview .g-facts li::after, #goerdes-preview .g-worksmini::after { background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),oklch(0.66 0.2 12 / .06),transparent 70%); } #goerdes-preview .g-button:hover, #goerdes-preview .g-edcta:hover, #goerdes-preview .g-nav a.g-nav-cta:hover, #goerdes-preview .g-nav > a:last-child:hover, #goerdes-request .q-next:hover { background:#4a4141; color:#fff; } #goerdes-preview .g-contact .g-button:hover { background:#fff; color:var(--g-ink); } /* Kontakt-Band: Aktionen im sauberen Raster */ #goerdes-preview .g-contact .g-actions { display:grid; grid-template-columns:1fr; gap:12px; width:min(100%,340px); justify-self:end; align-self:center; } #goerdes-preview .g-contact .g-actions > * { width:100%; box-sizing:border-box; min-height:56px; display:flex; align-items:center; justify-content:space-between; margin:0; } #goerdes-preview .g-contact .g-actions .g-link { padding:12px 22px; border:1px solid rgba(255,255,255,.55); border-radius:16px; background:rgba(255,255,255,.2); color:var(--g-on-accent); font-size:17px; } #goerdes-preview .g-contact .g-actions .g-link:hover { background:rgba(255,255,255,.4); color:var(--g-on-accent); } @container (max-width:900px) { #goerdes-preview .g-contact .g-actions { justify-self:start; } } /* Footer */ #goerdes-preview .g-footer { display:block; background:#fff; border-top:0; border-radius:36px 36px 0 0; margin-top:clamp(56px,7vw,104px); padding-top:clamp(40px,5vw,72px); padding-bottom:28px; color:var(--g-ink); font-family:var(--g-sans); text-transform:none; letter-spacing:0; box-shadow:0 -1px 0 var(--g-line); } #goerdes-preview .g-footgrid { display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)); gap:clamp(28px,4cqw,64px); } #goerdes-preview .g-footbrand .g-logo { content:none; width:136px; display:block; } #goerdes-preview .g-footbrand p { margin:18px 0 22px; max-width:28em; font-size:16px; line-height:1.6; color:var(--g-muted); } #goerdes-preview .g-foothead { margin:0 0 16px; font-size:17px; font-weight:600; color:var(--g-ink); } #goerdes-preview .g-footcol ul { list-style:none; margin:0; padding:0; display:grid; gap:4px; } #goerdes-preview .g-footcol a, #goerdes-preview .g-footbar a { display:inline-flex; align-items:center; min-height:36px; font-size:16px; color:var(--g-muted); transition:color .2s; } #goerdes-preview .g-footcol a:hover, #goerdes-preview .g-footbar a:hover, #goerdes-preview .g-footbar .g-consent-open:hover { color:var(--g-accent-deep); } #goerdes-preview .g-footcol address { font-style:normal; font-size:16px; line-height:1.55; color:var(--g-muted); margin-bottom:12px; } #goerdes-preview .g-footarea { margin:14px 0 0; font-size:14px; line-height:1.5; color:var(--g-muted); } #goerdes-preview .g-footbar { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 28px; margin-top:clamp(32px,4vw,56px); padding-top:20px; border-top:1px solid var(--g-line); } #goerdes-preview .g-footbar p { margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:4px 24px; font-size:14px; color:var(--g-muted); } #goerdes-preview .g-footbar .g-consent-open, #goerdes-preview .g-footbar a { font-size:14px; min-height:36px; color:var(--g-muted); background:none; border:0; padding:0; cursor:pointer; font-family:var(--g-sans); text-decoration:none; } @container (max-width:1020px) { #goerdes-preview .g-footgrid { grid-template-columns:1fr 1fr; } #goerdes-preview .g-footbrand { grid-column:1 / -1; } } @container (max-width:520px) { #goerdes-preview .g-footgrid { grid-template-columns:1fr; } } @media (max-width:760px) { #goerdes-preview .g-footer { border-radius:28px 28px 0 0; padding-bottom:96px; } } /* Klaro!: Banner und Dialog im Seitenstil */ .klaro { --font-family:'Outfit',system-ui,Arial,sans-serif; --title-font-family:'Outfit',system-ui,Arial,sans-serif; --font-size:16px; --border-radius:18px; --border-style:none; --border-width:0; --green1:#ea4b66; --green2:#d9435f; --green3:#ea4b66; --blue1:#1d1a1a; --blue2:#4a4141; --blue3:#1d1a1a; --dark1:#fff; --dark2:#f5f4f3; --dark3:#d8d3d2; --light1:#1d1a1a; --light2:#4a4444; --light3:#6b6464; --white1:#1d1a1a; --white2:#4a4444; --white3:#6b6464; --button-text-color:#fff; --notice-max-width:none; --notice-position:fixed; --notice-bottom:12px; --notice-left:12px; --notice-right:12px; } .klaro .cookie-notice:not(.cookie-modal-notice) { border-radius:22px; box-shadow:0 0 0 6px rgba(255,255,255,.65),0 24px 50px -20px rgba(40,20,20,.35); background:#fff; color:#1d1a1a; max-width:1120px; margin:0 auto; left:12px; right:12px; bottom:12px; } .klaro .cookie-notice .cn-body { padding:20px 24px; } .klaro .cookie-notice p, .klaro .cookie-modal p, .klaro .cookie-modal li { color:#4a4444; line-height:1.55; } .klaro .cm-btn { border-radius:12px; font-weight:500; padding:11px 22px; } .klaro .cm-btn.cm-btn-success, .klaro .cm-btn.cm-btn-accept-all { background:#ea4b66; color:#2a1216; } .klaro .cm-btn.cm-btn-success:hover, .klaro .cm-btn.cm-btn-accept-all:hover { background:#f06880; } .klaro .cm-btn.cm-btn-danger, .klaro .cm-btn.cm-btn-decline { background:#f1eeed; color:#1d1a1a; } .klaro .cm-btn.cm-btn-danger:hover, .klaro .cm-btn.cm-btn-decline:hover { background:#e8e5e4; } .klaro .cookie-modal .cm-modal { border-radius:24px; box-shadow:0 0 0 6px rgba(255,255,255,.65),0 30px 70px -20px rgba(40,20,20,.45); } .klaro .cookie-modal .cm-modal .cm-header h1 { font-weight:600; letter-spacing:-.02em; text-transform:none; line-height:1.1; font-size:26px; } .klaro .cookie-notice a, .klaro .cookie-modal a, .klaro .cm-link { color:#b02f4a; } .klaro .cookie-modal .slider, .klaro .cm-list-input:checked + .cm-list-label .slider { background-color:#d8d3d2; } .klaro .cm-list-input:checked + .cm-list-label .slider { background-color:#ea4b66; } .klaro .cm-powered-by a { font-size:12px; } .klaro .cookie-modal .cm-modal .cm-header, .klaro .cookie-modal .cm-modal .cm-footer { border-color:#e8e5e4; } .klaro .cookie-modal .cm-bg { background:rgba(29,26,26,.45); } .klaro .cm-list-label .slider::before { background:#fff; } .klaro .cm-btn.cm-btn-info, .klaro .cm-btn.cn-learn-more.cm-btn-info { background:#1d1a1a; color:#fff; } .klaro .cm-btn.cm-btn-info:hover { background:#4a4141; } .klaro .cookie-modal .cm-purpose .cm-services .cm-caret, .klaro .cookie-modal .cm-caret a { color:#b02f4a; } .klaro .cookie-modal .cm-list-description, .klaro .cookie-modal .cm-service-description, .klaro .cookie-modal .purposes, .klaro .cookie-modal .cm-purpose .cm-list-description, .klaro .cookie-modal .cm-purposes { color:#5c5656; } .klaro .cookie-modal .slider { background-color:#cfc9c8; } .klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider { background-color:#ea4b66; } .klaro .cm-powered-by, .klaro .cm-powered-by a { color:#6b6464; } /* Kontakt-Band: einzelner Button mittig in der rechten Spalte */ #goerdes-preview .g-contact .g-actions { justify-self:center; align-self:center; width:auto; } #goerdes-preview .g-contact .g-actions > .g-button { width:auto; min-width:260px; justify-content:center; gap:18px; } @container (max-width:900px) { #goerdes-preview .g-contact .g-actions { justify-self:start; } } /* Klaro: Schalter-Knopf weiß */ .klaro .cookie-modal .slider::before, .klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider::before, .klaro .cm-list-label .slider::before { background-color:#fff !important; } /* Detailseiten: Zurück-Link in eigener Zeile, Tag darunter */ #goerdes-preview .g-vb-hero .g-vb-back { display:flex; width:fit-content; margin-bottom:22px; } #goerdes-preview .g-vb-hero .g-vb-back + .g-label { display:flex; width:fit-content; margin-top:0; } /* Kontakt-Band: Inhalt beider Spalten mittig in der Karte */ #goerdes-preview .g-contact { align-items:center; } #goerdes-preview .g-contact .g-actions { align-self:center; justify-self:center; } /* Kontakt-Band: gleicher Innenabstand oben und unten (die Regel .g-section:last-of-type setzte unten 0) */ #goerdes-preview .g-contact.g-section, #goerdes-preview .g-contact.g-section:last-of-type { padding-top:clamp(36px,6cqw,88px); padding-bottom:clamp(36px,6cqw,88px); } /* Leistungsseiten: Fakten als Haken-Liste in einer Karte */ #goerdes-preview .g-vb-factcards { display:block; gap:0; max-width:none; margin-top:44px; padding:6px clamp(20px,3cqw,40px); background:#fff; border:0; border-radius:28px; box-shadow:var(--g-shadow); } #goerdes-preview .g-vb-factcard, #goerdes-preview .g-vb-factcard:hover { position:relative; padding:22px 0 22px 46px; background:none; border:0; border-radius:0; box-shadow:none; color:var(--g-ink); } #goerdes-preview .g-vb-factcard + .g-vb-factcard { border-top:1px solid var(--g-line); border-left:0; } #goerdes-preview .g-vb-factcard::before { content:''; position:absolute; left:0; top:25px; width:28px; height:28px; border-radius:50%; background:var(--g-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23311' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/16px no-repeat; } #goerdes-preview .g-vb-factcard em, #goerdes-preview .g-vb-factunit { display:inline; font-family:var(--g-sans); font-style:normal; font-size:20px; font-weight:600; letter-spacing:-.01em; line-height:1.3; color:var(--g-ink); text-transform:none; } #goerdes-preview .g-vb-factcard em::after { content:' '; } #goerdes-preview .g-vb-factcard small { display:block; margin-top:4px; font-size:16px; line-height:1.5; color:var(--g-muted); } #goerdes-preview .g-vb-factcard em { text-transform:capitalize; } /* Navigation: Logo und Anfrage-Button bündig mit dem Seiteninhalt (gleicher Seitenrand wie .g-pad) */ #goerdes-preview .g-header { padding-left:5.8%; padding-right:5.8%; } @media (min-width:1440px) { #goerdes-preview .g-header { padding-left:calc((100% - 1440px) / 2 + 83px); padding-right:calc((100% - 1440px) / 2 + 83px); } } #goerdes-preview .g-nav a.g-nav-cta, #goerdes-preview .g-nav > a:last-child { margin-right:0; } #goerdes-preview .g-hero2-copy { padding-left:0; } /* ---------- Schlankere Startseite: Hero mit Projekt-Wechselfenster ---------- */ #goerdes-preview .g-hero2-copy::before { content:none; } #goerdes-preview .g-hero2 { padding-bottom:0; } #goerdes-preview .g-hero2-stage.g-showcase { flex-direction:column; align-items:stretch; justify-content:center; gap:clamp(16px,2cqw,26px); min-height:0; padding:clamp(22px,3.2cqw,48px); overflow:hidden; } #goerdes-preview .g-showcase .g-sc-frame { position:relative; width:100%; aspect-ratio:2000 / 1045; } #goerdes-preview .g-showcase .g-sc-slide { position:absolute; inset:0; margin:0; opacity:0; transform:translateY(18px) scale(.97); transition:opacity .9s var(--g-ease),transform .9s var(--g-ease); pointer-events:none; } #goerdes-preview .g-showcase .g-sc-slide.is-on { opacity:1; transform:none; pointer-events:auto; } #goerdes-preview .g-showcase .g-sc-slide img { display:block; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 26px 28px rgba(90,20,40,.28)); } #goerdes-preview .g-showcase .g-sc-bar { position:relative; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; } #goerdes-preview .g-showcase .g-sc-chip { display:inline-flex; flex-direction:column; gap:2px; padding:10px 18px; border-radius:16px; background:#fff; box-shadow:0 0 0 1px var(--g-line),0 10px 20px -12px rgba(40,20,20,.3); transition:opacity .22s,transform .22s; } #goerdes-preview .g-showcase .g-sc-chip.is-swap { opacity:0; transform:translateY(4px); } #goerdes-preview .g-showcase .g-sc-name { font-weight:600; font-size:18px; line-height:1.2; } #goerdes-preview .g-showcase .g-sc-meta { font-size:14px; color:var(--g-muted); } #goerdes-preview .g-showcase .g-sc-dots { display:flex; gap:8px; } #goerdes-preview .g-showcase .g-sc-dot { position:relative; width:10px; height:10px; padding:0; border:0; border-radius:50%; background:oklch(0.78 0.04 12); cursor:pointer; transition:width .35s var(--g-ease),background .3s; } #goerdes-preview .g-showcase .g-sc-dot::after { content:''; position:absolute; inset:-17px -5px; } #goerdes-preview .g-showcase .g-sc-dot.is-on { width:30px; border-radius:6px; background:var(--g-accent); } @media (prefers-reduced-motion:reduce) { #goerdes-preview .g-showcase .g-sc-slide { transition:none; } } /* Eigenes Vorhaben: Button und Kosten-Link nebeneinander */ #goerdes-preview .g-ownacts { display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; } #goerdes-preview .g-ownacts .g-link { padding:0; } #goerdes-preview .g-own { padding-bottom:clamp(8px,1vw,16px); } #goerdes-preview .g-detail .g-flow { margin:28px 0 36px; } /* Alte Seite: bewusst unübersichtlich gezeichnet */ /* Hero auf Desktop bildschirmhoch (Kopfzeile + Hero = 100svh), Laufband folgt darunter */ @media (min-width:900px) and (min-height:560px) { #goerdes-preview .g-hero2 { min-height:calc(100svh - 78px); display:flex; flex-direction:column; justify-content:center; padding-top:clamp(24px,3.5vw,56px); padding-bottom:clamp(32px,4.5vw,72px); } #goerdes-preview .g-hero2-main { width:100%; } #goerdes-preview .g-hero2 h1 { font-size:clamp(44px,5.6cqw,92px); } .g-marquee { margin-top:0; } } /* ---------- Hero: Projekte auf Computer und Handy ---------- */ #goerdes-preview .g-hero2-stage.g-v { display:flex; align-items:center; justify-content:center; padding:clamp(20px,3cqw,44px); min-height:480px; overflow:hidden; } /* Desktop + Handy */ #goerdes-preview .g-dh { flex-direction:column; gap:18px; } #goerdes-preview .g-dh-stagebox { position:relative; width:100%; max-width:560px; padding-bottom:42px; } #goerdes-preview .g-dh-win { border-radius:16px; background:#fff; overflow:hidden; box-shadow:0 0 0 1px var(--g-line),0 34px 50px -26px rgba(90,20,40,.4); } #goerdes-preview .g-dh-bar { display:flex; align-items:center; gap:7px; padding:10px 14px; background:#f1eeed; } #goerdes-preview .g-dh-bar i { width:10px; height:10px; border-radius:50%; background:#d8d3d2; } #goerdes-preview .g-dh-bar i:first-child { background:#ee6a73; } #goerdes-preview .g-dh-bar i:nth-child(2) { background:#f2bf5a; } #goerdes-preview .g-dh-bar i:nth-child(3) { background:#6cc785; } #goerdes-preview .g-dh-url { margin-left:10px; flex:1; padding:3px 14px; border-radius:999px; background:#fff; font-size:14px; color:#6b6464; line-height:18px; } #goerdes-preview .g-dh-shots { position:relative; aspect-ratio:1600 / 1000; } #goerdes-preview .g-dh-shots img, #goerdes-preview .g-dh-screen img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; opacity:0; transition:opacity .7s var(--g-ease); } #goerdes-preview .g-dh-shots img.is-on, #goerdes-preview .g-dh-screen img.is-on { opacity:1; } #goerdes-preview .g-dh-phone { position:absolute; right:-14px; bottom:0; width:27%; aspect-ratio:9 / 18.6; border-radius:22px; background:#1d1a1a; padding:5px; box-shadow:0 24px 40px -14px rgba(60,10,30,.55); transform:translateY(40px) scale(.94); opacity:0; transition:transform .7s var(--g-ease),opacity .5s; } #goerdes-preview .g-dh-phone.is-in { transform:none; opacity:1; } #goerdes-preview .g-dh-screen { position:relative; width:100%; height:100%; border-radius:17px; overflow:hidden; background:#fff; } #goerdes-preview .g-dh-bar2 { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; width:100%; max-width:560px; } #goerdes-preview .g-dh-chip { display:inline-flex; flex-direction:column; gap:2px; padding:10px 18px; border-radius:16px; background:#fff; box-shadow:0 0 0 1px var(--g-line),0 10px 20px -12px rgba(40,20,20,.3); } #goerdes-preview .g-dh-name { font-weight:600; font-size:18px; line-height:1.2; } #goerdes-preview .g-dh-meta { font-size:14px; color:var(--g-muted); } #goerdes-preview .g-dh-dots { display:flex; gap:8px; } #goerdes-preview .g-dh-dot { position:relative; width:10px; height:10px; padding:0; border:0; border-radius:50%; background:oklch(0.78 0.04 12); cursor:pointer; transition:width .35s var(--g-ease),background .3s; } #goerdes-preview .g-dh-dot::after { content:''; position:absolute; inset:-17px -5px; } #goerdes-preview .g-dh-dot.is-on { width:30px; border-radius:6px; background:var(--g-accent); } @media (prefers-reduced-motion:reduce) { #goerdes-preview .g-dh-phone { transition:none; } } /* Schwebender Datenschutz-Button: unten rechts, gleicher Randabstand wie die Kontakt-Buttons */ .g-fab.g-fab-priv { top:auto; bottom:18px; transform:none; } @media (max-width:1100px) { .g-fab.g-fab-priv { display:grid; } } @media (max-width:760px) { .g-fab.g-fab-priv { right:14px; bottom:84px; } .g-fab.g-fab-priv a { width:44px; height:44px; border-radius:14px; } .g-fab.g-fab-priv a span { display:none; } } /* Hero-Punkte: Klickfläche mindestens 24 x 24 px (Zielgröße), sichtbarer Punkt per ::before */ #goerdes-preview .g-dh-dots { gap:0; } #goerdes-preview .g-dh-dot { width:24px; height:24px; border-radius:0; background:none; } #goerdes-preview .g-dh-dot::after { display:none; } #goerdes-preview .g-dh-dot::before { content:''; position:absolute; left:50%; top:50%; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; background:oklch(0.78 0.04 12); transition:width .35s var(--g-ease),margin .35s var(--g-ease),background .3s; } #goerdes-preview .g-dh-dot.is-on { width:36px; background:none; border-radius:0; } #goerdes-preview .g-dh-dot.is-on::before { width:30px; margin-left:-15px; border-radius:6px; background:var(--g-accent); } /* Klaro-Banner: Titel nur für Screenreader (zugänglicher Name des Dialogs) */ .klaro .cookie-notice .cn-body > h2 { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* Klaro-Dialog: Hinweislink mit ausreichendem Kontrast */ .klaro .cookie-modal .cm-powered-by a, .klaro .cookie-modal .cm-powered-by a:hover { color:#5c5656 !important; } /* Projekte, erstes Projekt: im gestapelten Layout keine Flex-Basis 0, sonst schrumpft das Bild-Feld auf Padding-Höhe */ @container (max-width:880px) { #goerdes-preview .g-edlist .g-edrow:first-child .g-edmedia, #goerdes-preview .g-edlist .g-edrow:first-child .g-edbody { flex:none; } }