/* ========================================================= MOVE2 — "Neon Blueprint" design system Static site. No framework, no build step. Sections: 1. Fonts & tokens 11. Trust bar & floating badges 2. Reset & base 12. Section head 3. Layout utilities 13. Diff / before-after 4. Buttons 14. Service list 5. Icons 15. Chip row (Branchen) 6. Nav 16. Process list 7. Blueprint background 17. Word-reveal line 8. Scroll progress bar 18. Demo / referenzen cards 9. Hero 19. Pricing cards 10. Live Build panel 20. FAQ accordion 21. CTA band 22. Footer 23. Legal / todo-note 24. Forms (Kontakt) 25. Scroll reveal 26. Responsive 27. Reduced motion 28. Prozess-Schritte 29. Leistungs-Abschnitte 30. Oberflächen-Ebenen + Nähte 31. Fokus-Ring (generisch) 32. Team-Sektion 33. Mobile Kontaktleiste ========================================================= */ /* --------------------------------------------------------- 1. Fonts & tokens --------------------------------------------------------- */ /* Schriften kommen lokal aus assets/fonts/, NICHT mehr von fonts.googleapis.com. Grund: jede Verbindung zu Google beim Seitenaufruf überträgt die IP des Besuchers, in Deutschland ein bekanntes DSGVO-Thema, und die Regeln in claude.md-files verlangen ausdrücklich "Web-Fonts lokal gehostet". Wer hier wieder einen externen @import einsetzt, macht die Seite einwilligungspflichtig. Herkunft und Lizenzen: assets/fonts/README.md */ @import url('../fonts/fonts.css'); :root{ /* base — Farbschema von Test Webseite 1 übernommen (siehe CLAUDE.md) */ --bg: #07090D; --bg-2: #0A0D13; --surface: #11151D; --elevated: #161B25; /* text */ --text: #EEF1F6; --text-2: #B4BCCB; --text-3: #8A93A6; /* war #7C8598 — riss auf --surface-raised mit 4.28:1, jetzt 5.14:1. Auf --surface-deep 6.46:1, weiterhin dezent genug für Fußnoten-Text. */ /* accent — v1s zurückhaltendes Indigo statt Neon-Teal/Violet */ --accent: #8B93FF; --accent-rgb: 139,147,255; --accent-2: #B28EFF; --accent-2-rgb: 178,142,255; /* diff — bleiben rot/grün, semantisch unabhängig vom Markenakzent */ --diff-add: #34D399; --diff-remove: #FB7185; /* Oberflächen-Ebenen (Redesign-Pass: Sektionen voneinander abheben) */ --surface-deep: #07090D; /* = --bg, unverändert, Raster bleibt sichtbar */ --surface-raised: #1B2233; /* deckend, blockt das Raster */ --surface-light: #A2AEDE; /* deckend, vierte Verdunklungsstufe auf Kundenwunsch (war #B0BDEE) */ /* Textfarben ausschließlich für die direkte Prosa auf surface-light — bewusst eigene Namen statt --text/--accent lokal zu überschreiben, s. CLAUDE.md: eingebettete dunkle Karten (.price-card, .talk-bubble …) sollen dunkle Inseln bleiben und dürfen NICHT mitkippen. Werte gegen die reale --surface-light gemessen (sRGB relative luminance) — bei jeder weiteren Verdunklung von --surface-light hier neu nachmessen, die Marge wird mit jeder Stufe kleiner. */ --ink: #14151D; /* 8.35:1 auf --surface-light (gemessen) */ --ink-2: #2C2F3C; /* 6.11:1 — klar dunkler als zuvor (#484B5D war nur 4.66:1, Fließtext auf dem hellen Blau schwer lesbar) */ --accent-ink: #2E2680; /* 5.66:1 auf --surface-light, 5.05:1 auf der getönten compare-Spalte (war #4337B4) */ /* --ink-3 entfernt (Pass 3, Teil A1): war #494C5F, nur 1 Hex-Schritt von --ink-2 entfernt, keine echte dritte Stufe. Alle vier Verwendungen (.lcaption, .price-note, .concept-label, .compare-hint) laufen jetzt über --ink-2. Falls hier wieder eine dritte, sichtbar hellere/dunklere Stufe gebraucht wird: neu und mit echtem Abstand ansetzen, nicht denselben Fehler wiederholen. */ --slant: clamp(2.5rem, 5vw, 4.5rem); /* structure */ --border: rgba(238,241,246,.10); --border-strong: rgba(238,241,246,.18); --grid-line: rgba(139,147,255,.08); /* Glas — nur für die Buttons (Abschnitt 4), 1:1 aus v1 übernommen */ --glass: rgba(255,255,255,0.055); --blur: 16px; --hairline: rgba(255,255,255,0.075); --hairline-strong: rgba(255,255,255,0.14); --r-full: 999px; --p-cyan: 120,225,255; --p-blue: 122,162,255; --p-violet: 178,142,255; --p-pink: 255,158,206; /* fonts */ --font-display: "Space Grotesk", "Segoe UI", sans-serif; --font-body: "Manrope", "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", "Consolas", monospace; --font-accent: "Instrument Serif", Georgia, serif; /* motion */ --ease: cubic-bezier(.22,1,.36,1); --ease-out: cubic-bezier(.16,1,.3,1); --t-fast: 160ms; --t-med: 320ms; --t-slow: 640ms; --radius: 14px; --radius-sm: 8px; --container: 1240px; } /* --------------------------------------------------------- 2. Reset & base --------------------------------------------------------- */ *, *::before, *::after{ box-sizing: border-box; margin: 0; padding: 0; } html{ background: var(--bg); scroll-behavior: smooth; /* Reserviert die Breite der Scrollbar dauerhaft (auf fast jeder Seite hier ohnehin da, da die Seiten höher als der Viewport sind). Dadurch springt nichts, wenn das mobile Menü den Hintergrund per .nav-locked sperrt. */ scrollbar-gutter: stable; /* Blaues Antipp-Rechteck auf Mobile/WebKit weg. Kein Ersatz für Fokus: Tastaturnutzer bekommen ihren Ring weiterhin über :focus-visible unten, das hier betrifft ausschliesslich die Touch-Antipp-Markierung. */ -webkit-tap-highlight-color: transparent; } a, button, [role="button"], input, select, textarea, label, summary{ -webkit-tap-highlight-color: transparent; } .nav-locked{ overflow: hidden; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } } /* Ersatz-Feedback fürs fehlende Antipp-Rechteck: dezentes Abdunkeln beim Drücken. .btn ausgenommen -- die Glas-Buttons haben mit .btn-wrap:active .btn{ transform: scale(.985) } (Abschnitt 4) bereits ihr eigenes Press-Feedback, zusätzliches Abdunkeln würde sich damit beißen. */ a:not(.btn):active, button:not(.btn):active, [role="button"]:not(.btn):active, summary:active{ opacity: .72; transition: opacity 100ms var(--ease); } body{ background: transparent; /* html carries the background — see CLAUDE.md */ color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; position: relative; } img, svg, canvas{ display: block; max-width: 100%; } a{ color: inherit; text-decoration: none; } ul, ol{ list-style: none; } button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } input, textarea{ font: inherit; color: inherit; background: none; border: 0; } h1, h2, h3, h4{ font-family: var(--font-display); font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; hyphens: auto; overflow-wrap: break-word; } h1{ font-size: clamp(2.6rem, 5vw + 1rem, 4.6rem); font-weight: 700; } h2{ font-size: clamp(1.9rem, 2.6vw + 1rem, 2.9rem); } h3{ font-size: 1.25rem; } p{ color: var(--text-2); } .lede{ font-size: 1.15rem; color: var(--text-2); max-width: 46ch; } .prose-link{ color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .grad-word{ background: linear-gradient(100deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .accent-serif{ font-family: var(--font-accent); font-style: italic; font-weight: 400; color: var(--accent); letter-spacing: 0; } /* --------------------------------------------------------- 3. Layout utilities --------------------------------------------------------- */ /* Ankerziele der Startseite (Leistungen/Prozess/Referenzen/Preise): Abstand zur festen Nav, damit die Überschrift beim Sprung nicht darunter verschwindet. */ #leistungen, #prozess, #referenzen, #preise{ scroll-margin-top: 84px; } .container{ max-width: var(--container); margin-inline: auto; padding-inline: 1.5rem; } main > section{ --section-pad: clamp(4rem, 8vw, 7rem); padding-block: var(--section-pad); } .split-head{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; } /* --------------------------------------------------------- 4. Buttons — Glaskörper, 1:1 aus Test Webseite 1 übernommen (deren CLAUDE.md, Abschnitt "Glass buttons"). Vierschichtiger Aufbau, bewusst nicht zusammengelegt: .btn-wrap Positionsrahmen, isoliert den Stapel .btn der Glaskörper (backdrop-filter, volle Rundung) ::before spektraler Kantenring (wandert langsam, @property) ::after wandernde Lichtwelle beim Hover .btn-text Beschriftung — bleibt hier im Mono-Font der Seite, ::before Glanzlicht in der oberen Hälfte das ist bewusst .btn-shadow Schlagschatten als EIGENES Element keine v1-Kopie .btn-shadow liegt bewusst nicht als box-shadow am Button: zusammen mit backdrop-filter gibt das Artefakte an der Rundung, und als eigene, frei weichgezeichnete Ebene kann der Schatten beim Hover unabhängig vom Glaskörper wandern. JEDER Button braucht darum die volle Struktur `…` — ein bloßes `` verliert Glanz, Schatten und Rand. --------------------------------------------------------- */ @property --shine-angle{ syntax: ''; initial-value: 135deg; inherits: false; } @keyframes rimLight{ to{ --shine-angle: 495deg; } } /* align-self: flex-start verhindert, dass .btn-wrap sich in einem Flex-Column-Elternteil (z. B. .price-card, .contact-form) auf dessen volle Breite streckt — sonst berechnet .btn-shadow seine prozentualen Insets von dieser zu breiten Box statt vom sichtbaren Button, und der Schatten sitzt größer und versetzt neben statt hinter dem Button. */ .btn-wrap{ display: inline-flex; align-self: flex-start; position: relative; isolation: isolate; border-radius: var(--r-full); } .btn{ position: relative; display: inline-flex; align-items: center; gap: .5rem; border-radius: var(--r-full); overflow: hidden; isolation: isolate; transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease); } .btn:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; } /* Spektrale Kante — dieselbe Mask-Composite-Technik wie in v1 */ .btn::before{ content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient(var(--shine-angle), rgba(255,255,255,0.70) 0%, rgba(var(--p-cyan), 0.55) 16%, rgba(255,255,255,0.10) 32%, rgba(var(--p-violet), 0.52) 50%, rgba(var(--p-pink), 0.40) 64%, rgba(255,255,255,0.14) 80%, rgba(var(--p-blue), 0.50) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: .55; transition: opacity var(--t-med) var(--ease); animation: rimLight 22s linear infinite; } .btn:hover::before{ opacity: 1; } /* Lichtwelle beim Hover */ .btn::after{ content: ''; position: absolute; inset: -1px; z-index: 2; border-radius: inherit; pointer-events: none; background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,0.34) 43%, rgba(var(--p-cyan), 0.26) 47%, rgba(var(--p-violet),0.24) 51%, rgba(var(--p-pink), 0.20) 55%, transparent 68%); transform: translateX(-115%); opacity: 0; transition: transform 980ms cubic-bezier(.38,.12,.32,1), opacity var(--t-med) var(--ease); } .btn:hover::after{ transform: translateX(115%); opacity: 1; } .btn-text{ position: relative; z-index: 3; display: inline-flex; align-items: center; padding: .85rem 1.5rem; font-family: var(--font-mono); font-size: .9rem; font-weight: 500; letter-spacing: -0.01em; } /* Glanzlicht in der oberen Hälfte, hinter der Schrift */ .btn-text::before{ content: ''; position: absolute; inset: 1px 1px 42% 1px; z-index: -1; border-radius: var(--r-full); pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,0.30), rgba(255,255,255,0)); opacity: .7; transition: opacity var(--t-med) var(--ease); } .btn:hover .btn-text::before{ opacity: 1; } /* Schlagschatten als eigenes, frei bewegliches Element */ /* Pass 3, Teil C: war eine inset+filter-Transition. inset ist ein Layout- Shorthand (top/right/bottom/left) und filter zählt explizit zu den verbotenen Properties — beide erzwingen Layout- bzw. teure Paint-Arbeit, auf JEDEM Button der Seite bei jedem Hover. Jetzt fester Blur (Mittelwert der alten zwei Werte), das Wachsen/Sinken kommt aus scaleX + translateY, beides reine Compositor-Arbeit. Die Zielgeometrie (94% Breite, 8% tiefer) ist aus den alten inset-Werten zurückgerechnet, sieht also identisch aus. */ .btn-shadow{ position: absolute; z-index: -1; inset: 14% 6% -14% 6%; border-radius: var(--r-full); background: rgba(0,0,0,.6); filter: blur(17px); opacity: .7; pointer-events: none; transform: translateY(0) scaleX(1); transition: transform var(--t-med) var(--ease), opacity var(--t-med) var(--ease); } .btn-wrap:hover .btn-shadow{ transform: translateY(8%) scaleX(1.07); opacity: .85; } .btn-wrap:hover .btn{ transform: translateY(-2px); } .btn-wrap:active .btn{ transform: translateY(0) scale(.985); } /* primär: heller Glaskörper, auf Dunkel ist Licht der Kontrastanker */ .btn-primary{ background: linear-gradient(180deg, rgba(255,255,255,.97) 0%, rgba(223,229,240,.9) 100%); backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%); box-shadow: inset 0 1px 0 rgba(255,255,255,1), inset 0 -1px 1px rgba(140,150,175,.35); } .btn-primary .btn-text{ color: #080A0F; font-weight: 600; } .btn-primary .btn-text::before{ background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,0)); } .btn-wrap:hover .btn-primary{ background: linear-gradient(180deg, #fff 0%, rgba(232,237,246,.95) 100%); } .btn-wrap:hover .btn-primary ~ .btn-shadow{ background: rgba(150,165,220,.45); } /* sekundär: dunkles Glas, zurückhaltender */ .btn-ghost{ background: var(--glass); backdrop-filter: blur(var(--blur)) saturate(170%) brightness(1.1); -webkit-backdrop-filter: blur(var(--blur)) saturate(170%) brightness(1.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px var(--hairline); } .btn-ghost .btn-text{ color: var(--text); } .btn-wrap:hover .btn-ghost{ background: rgba(255,255,255,.1); } .btn-sm .btn-text{ padding: .6rem 1.1rem; font-size: .82rem; } .btn-lg .btn-text{ padding: 1.05rem 1.9rem; font-size: 1rem; } @media (prefers-reduced-motion: reduce){ .btn::before{ animation: none; } } /* --------------------------------------------------------- 5. Icons --------------------------------------------------------- */ .icon-svg{ width: 20px; height: 20px; flex-shrink: 0; } /* --------------------------------------------------------- 6. Nav --------------------------------------------------------- */ .nav-shell{ position: sticky; top: 0; z-index: 65; /* Höher als .nav-sheet (z-index 60): sonst deckt das geöffnete Mobile-Menü die Kopfzeile samt Burger/X-Button komplett zu und lässt sich nicht mehr schließen (genau das war auf Android der Fall, s. Mobile-Optimierung). */ /* Fest statt beim Scrollen zu schrumpfen (Pass 3, Teil C): das schrumpfte vorher per padding-Transition, eine der explizit verbotenen Layout- Properties, bei jedem Über-/Unterschreiten der Scroll-Schwelle. Nav bleibt jetzt bei konstanter Höhe, nur Hintergrund/Rahmen blenden noch ein — beides unverändert erlaubt, da reine Paint-Properties. */ padding-block: .9rem; transition: background var(--t-med) var(--ease), border-color var(--t-med) var(--ease); border-bottom: 1px solid transparent; } /* Am Seitenanfang ist der Nav transparent (Hintergrund kommt erst mit .is-scrolled) — genau dort liegt aber die Shader-Fahne dahinter. Derselbe Verlauf wie unter dem Hero, nur weiter nach rechts gezogen, weil die Nav- Zeile näher am hellen Kern sitzt. Über den Links bleibt die Deckkraft nicht unter .70; damit halten sie selbst im hellstmöglichen Frame des Rauschens 6.1:1 (gerechnet gegen die hellste Farbe, die der Shader ausgeben kann). Rechts läuft er aus: dort steht nur der deckende "Projekt starten"-Button. */ .nav-shell::before{ content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(100deg, rgba(7,9,13,.95) 0%, rgba(7,9,13,.92) 45%, rgba(7,9,13,.72) 66%, rgba(7,9,13,0) 88%); } .nav-shell.is-scrolled{ background: rgba(7,11,13,.82); border-bottom-color: var(--border); } .nav{ max-width: var(--container); margin-inline: auto; padding-inline: 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .brand{ display: inline-flex; align-items: center; gap: .55rem; } /* Neues MOVE2-Logo (weiss/transparentes PNG, nur auf dunklem Grund verwendet). Nav: M2-Monogramm + Firmenname als Text. Footer: das gestapelte Logo mit Schriftzug. */ .brand-logo{ height: 30px; width: auto; display: block; } .brand-lockup{ height: 46px; width: auto; display: block; } .brand-name{ font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: .04em; color: var(--text); line-height: 1; white-space: nowrap; } .nav-links{ display: flex; align-items: center; gap: 2rem; } .nav-links a{ font-size: .92rem; color: var(--text-2); position: relative; transition: color var(--t-fast) var(--ease); } .nav-links a::after{ content:""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--t-med) var(--ease-out); } .nav-links a:hover{ color: var(--text); } .nav-links a:hover::after{ transform: scaleX(1); } .nav-right{ display: flex; align-items: center; gap: 1rem; } /* Preis-Chip in der Kopfzeile, nur Mobil (index.html) -- am Desktop gibt es dafür bereits den Nav-Punkt "Preise". Bleibt visuell klein/kompakt (soll nicht auffälliger als das Logo wirken); die geforderte 44×44px-Trefferfläche kommt über ein unsichtbares ::before, nicht über die sichtbare Chip-Größe selbst (gleiches Muster wie beim Vorher/Nachher-Griff). */ .nav-price-chip{ display: none; /* per Media Query unten eingeblendet */ position: relative; align-items: center; flex-shrink: 0; padding: .35rem .7rem; border-radius: var(--r-full); border: 1px solid rgba(var(--accent-rgb), .4); background: rgba(var(--accent-rgb), .12); color: var(--accent); font-family: var(--font-mono); font-size: .74rem; font-weight: 600; white-space: nowrap; transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); } .nav-price-chip::before{ content: ""; position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: max(100%, 44px); height: max(100%, 44px); } .nav-price-chip:hover{ background: rgba(var(--accent-rgb), .2); border-color: rgba(var(--accent-rgb), .6); } .nav-price-chip .npc-short{ display: none; } @media (max-width: 768px){ .nav-price-chip{ display: inline-flex; } } /* Ab hier reicht der Platz neben Logo und Burger nicht mehr für "ab 990 €" -- kürzerer Chip-Text, ohne dass Logo/Burger gequetscht werden. */ @media (max-width: 380px){ .nav-price-chip{ padding: .35rem .55rem; } .nav-price-chip .npc-full{ display: none; } .nav-price-chip .npc-short{ display: inline; } } .nav-burger{ display: none; position: relative; width: 24px; height: 18px; } .nav-burger i, .nav-burger i::before, .nav-burger i::after{ content:""; position: absolute; left: 0; right: 0; height: 2px; background: var(--text); transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease); } .nav-burger i{ top: 8px; } .nav-burger i::before{ top: -8px; } .nav-burger i::after{ top: 8px; } .nav-burger[aria-expanded="true"] i{ background: transparent; } .nav-burger[aria-expanded="true"] i::before{ transform: translateY(8px) rotate(45deg); } .nav-burger[aria-expanded="true"] i::after{ transform: translateY(-8px) rotate(-45deg); } .nav-sheet{ position: fixed; inset: 0; z-index: 60; /* Overlay statt Ersatz: die Seite bleibt durch Verdunkelung + Weichzeichner hindurch schemenhaft sichtbar, statt komplett durch eine deckende Fläche ersetzt zu wirken (das las sich auf Android wie ein Seitenwechsel). */ background: rgba(7,9,13,.55); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1.6rem; padding: 2rem 1.75rem; transform: translateY(-8px) scale(.98); opacity: 0; visibility: hidden; transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease), visibility var(--t-med); } .nav-sheet.is-open{ opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .nav-sheet a{ font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; } /* Damit die Links auf dem jetzt durchscheinenden, unruhigen Hintergrund trotzdem sicher lesbar bleiben, auch mitten in einer Verlaufsfarbe. */ .nav-sheet a{ text-shadow: 0 2px 16px rgba(7,9,13,.6); } /* --------------------------------------------------------- 7. Blueprint background — Shader-Fahne + CSS-Raster + Circuit-Canvas Drei gestapelte Ebenen, von hinten nach vorn: -3 .hero-shader WebGL-Plasma, nur oben, scrollt mit (absolute) -2 .blueprint-grid Rasterlinien, fix im Viewport -1 .circuit-canvas driftende Knotenpunkte, fix im Viewport Der Shader ist deckend und trifft in den dunklen Zonen exakt --bg, deshalb entsteht an seiner Unterkante trotz Maske keine sichtbare Naht. --------------------------------------------------------- */ .hero-shader{ position: absolute; top: 0; left: 0; width: 100%; height: 118vh; z-index: -3; pointer-events: none; mask-image: linear-gradient(to bottom, #000 0%, #000 48%, transparent 97%); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 48%, transparent 97%); } .blueprint-grid{ position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; background-image: repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px 88px), repeating-linear-gradient(0deg, var(--grid-line) 0 1px, transparent 1px 88px); mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 90%); } .circuit-canvas{ position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .55; } /* --------------------------------------------------------- 8. Scroll progress bar --------------------------------------------------------- */ /* Reiner Positionsrahmen, unskaliert -- die eigentliche Leiste UND der Leucht-Punkt sind eigene Pseudo-Elemente, die von main.js ausschliesslich ueber die Custom Property --progress (0..1) gesteuert werden, per transform/opacity statt left/width -- kein Layout-Trigger pro Scroll-Event. .scroll-progress selbst nie transformieren: sonst wuerde ::after (der Punkt) mit skaliert und aus einem Kreis eine Ellipse werden. */ .scroll-progress{ position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 70; pointer-events: none; } /* Der "Kometenschweif": am Seitenanfang (links) transparent/blass, an der Spitze (rechts -- durch transform-origin:left bleibt die Spitze bei jedem Fortschritt exakt der 100%-Stop des Verlaufs) hell/leuchtend. */ .scroll-progress::before{ content: ""; position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--progress, 0)); background: linear-gradient(90deg, rgba(var(--accent-rgb), 0) 0%, var(--accent) 45%, var(--accent-2) 80%, #fff 100%); } /* Leuchtender Punkt exakt an der Fortschritts-Spitze. translateX ueber 100vw statt left/width, damit er wie die Leiste selbst nur ueber transform bewegt wird; opacity folgt --progress, damit bei 0 (Seitenanfang, noch nicht gescrollt) kein Punkt sichtbar ist. */ .scroll-progress::after{ content: ""; position: absolute; top: 50%; left: 0; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px 2px rgba(var(--accent-rgb), .9), 0 0 14px 4px rgba(var(--accent-rgb), .5); opacity: var(--progress, 0); transform: translate(calc(var(--progress, 0) * 100vw - 4px), -50%); } /* --------------------------------------------------------- 9. Hero --------------------------------------------------------- */ /* Lesbarkeits-Abdunkler über der Shader-Fahne. Der Shader ist animiert: eine Kontrastmessung an einem einzelnen Frame sagt nichts über den nächsten. Statt die Fahne so weit zu dämpfen, dass sie in jedem denkbaren Frame passt (dann wäre der Effekt weg), liegt hier ein weicher Verlauf unter der Textspalte — links deckend, ab ~68 % transparent. Damit ist der Kontrast unabhängig vom Animationsstand garantiert und die Fahne bleibt rechts, wo kein Fließtext steht, voll sichtbar. Gemessen: ohne diesen Verlauf fiel die Eyebrow auf website-erstellung.html auf 3.79:1. */ .hero, .page-hero{ position: relative; } .hero::before, .page-hero::before{ content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(100deg, rgba(7,9,13,.93) 0%, rgba(7,9,13,.78) 34%, rgba(7,9,13,.35) 55%, rgba(7,9,13,0) 72%); } .hero{ padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(3rem, 6vw, 5rem); } /* Eigener, etwas breiterer Max-width als .container (1240px), nur fuer den Hero-Inhalt: verhindert, dass Headline und Live-Build-Panel auf sehr breiten Bildschirmen zu weit auseinandergezogen wirken. */ .hero-grid{ display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; max-width: 87.5rem; } .hero-grid > *{ min-width: 0; } .eyebrow{ display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: .82rem; letter-spacing: .02em; color: var(--accent); margin-bottom: 1rem; } .eyebrow::before{ content:"// "; opacity: .8; } .hero-copy h1{ margin-bottom: 1.1rem; } .hero-copy .lede{ margin-bottom: 1.8rem; } .hero-actions{ display: flex; gap: 1rem; flex-wrap: wrap; } /* Preiszeile zwischen Lede und Buttons: bewusst kleiner als der Fließtext und ohne eigenes Gewicht (keine Karte, kein Button) -- nur der Preis-Teil ist als Link zur #preise-Sektion hervorgehoben. margin-top übernimmt das .lede-margin-bottom (1.8rem) darüber, margin-bottom hier hält denselben Abstand zu den Buttons darunter. */ .hero-price-note{ font-size: .92rem; color: var(--text-3); margin-bottom: 1.8rem; } .hero-price-link{ color: var(--accent); font-weight: 700; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color var(--t-fast) var(--ease); } .hero-price-link:hover{ text-decoration-color: currentColor; } /* page hero — subpages */ .page-hero{ padding-block: clamp(6rem, 10vw, 8.5rem) clamp(2.5rem, 5vw, 4rem); } .page-hero .container{ max-width: 760px; } .page-hero .lede{ max-width: 60ch; } /* --------------------------------------------------------- 10. Live Build panel — hero centerpiece --------------------------------------------------------- */ .live-build{ position: relative; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; min-width: 0; } .live-build::before{ content:""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .12); } .lb-code{ padding: 1.1rem 1.2rem; border-right: 1px solid var(--border); background: var(--bg-2); min-width: 0; overflow-x: hidden; } .lb-bar{ display: flex; align-items: center; gap: .5rem; margin-bottom: .9rem; } .lb-bar .dot{ width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); } .lb-bar .file{ margin-left: .6rem; font-family: var(--font-mono); font-size: .72rem; color: var(--text-3); } .lb-lines{ font-family: var(--font-mono); font-size: .78rem; line-height: 1.75; } .lb-line{ display: flex; align-items: flex-start; gap: .7rem; opacity: 0; } .lb-line .ln{ color: var(--text-3); opacity: .5; user-select: none; width: 1.2em; text-align: right; flex-shrink: 0; } /* War white-space:pre + overflow-x:auto auf .lb-code (Guardrail gegen einen wachsenden Grid-Track, s. CLAUDE.md) -- lief bei der laengsten Zeile (6, "Modern gestaltet, schnell geladen.") sichtbar über den Rand und zeigte eine horizontale Scrollbar. pre-wrap erhaelt die Einrueckungs-Leerzeichen, bricht aber lange Zeilen sauber um; .lb-code braucht overflow-x darum nicht mehr, min-width:0 (Guardrail) bleibt trotzdem stehen. */ .lb-line .code{ white-space: pre-wrap; overflow-wrap: break-word; } .lb-line .tag{ color: var(--accent-2); } .lb-line .attr{ color: var(--accent); } .lb-line .str{ color: #FFD479; } .lb-line .plain{ color: var(--text-2); } .lb-line.is-in{ opacity: 1; } .lb-preview{ position: relative; padding: 1.1rem; display: flex; flex-direction: column; gap: .7rem; background: var(--bg); } .lb-preview .ph-nav{ height: 10px; border-radius: 4px; background: var(--border-strong); width: 55%; opacity: 0; transform: translateY(6px); transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out); } .lb-preview .ph-h{ height: 20px; border-radius: 4px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); width: 78%; opacity: 0; transform: translateY(6px); transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out); margin-top: .5rem; } .lb-preview .ph-p{ height: 8px; border-radius: 4px; background: var(--border-strong); opacity: 0; transform: translateY(6px); transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out); } .lb-preview .ph-p.w1{ width: 90%; } .lb-preview .ph-p.w2{ width: 65%; } .lb-preview .ph-btn{ margin-top: .75rem; width: 108px; height: 34px; border-radius: 7px; background: var(--accent); opacity: 0; transform: translateY(6px) scale(.9); transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out); box-shadow: 0 0 0 0 rgba(var(--accent-rgb),0); } .lb-preview .is-in{ opacity: 1; transform: translateY(0) scale(1); } .lb-preview .ph-btn.is-in{ box-shadow: 0 0 24px 0 rgba(var(--accent-rgb),.45); } /* --------------------------------------------------------- 11. Trust bar & floating badges --------------------------------------------------------- */ .trust-bar{ border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding-block: 1.5rem; } .trust-row{ display: flex; flex-wrap: wrap; gap: 2rem 2.5rem; justify-content: center; font-size: .88rem; color: var(--text-3); } .trust-row b{ color: var(--text); } .badge-field{ position: relative; min-height: 160px; display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; justify-content: center; align-items: center; padding-block: 1rem; } .chip-float{ display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.05rem; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); font-size: .85rem; color: var(--text-2); animation: floaty 6s ease-in-out infinite; } .chip-float .spark{ width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px 1px rgba(var(--accent-rgb),.7); } .chip-float:nth-child(2n){ animation-duration: 7.5s; animation-delay: -1.5s; } .chip-float:nth-child(3n){ animation-duration: 5.2s; animation-delay: -3s; } .chip-float:nth-child(4n){ animation-duration: 8.5s; animation-delay: -.6s; } @keyframes floaty{ 0%, 100%{ transform: translateY(0) rotate(0deg); } 50%{ transform: translateY(-10px) rotate(-1.2deg); } } /* --------------------------------------------------------- 12. Section head --------------------------------------------------------- */ .section-head{ max-width: 660px; margin-bottom: 2.6rem; } .section-head.center{ margin-inline: auto; text-align: center; } .section-head h2{ margin-bottom: .75rem; } /* --------------------------------------------------------- 13. Click-Reveal — Cursor klickt eine Beispielseite an und lässt sie neu erstrahlen. Ersetzt die frühere Wisch-Diff-Vorschau: eine einzelne Seite statt zwei nebeneinander, ein Cursor statt eines Schnitts. Wichtig: das Grundlayout (keine Modifier-Klasse) IST bereits der neue, fertige Zustand — das ist der Ruhezustand ohne JS/bei Reduced-Motion. `.is-old` wird nur von JS gesetzt, kurz bevor die Animation losläuft, und beschreibt den GEDRÄNGTEN Vorher-Zustand, aus dem heraus animiert wird. Der Cursor selbst startet unsichtbar (opacity 0) und wird nur von JS sichtbar gemacht, wenn er auch wirklich bewegt wird. --------------------------------------------------------- */ .click-reveal{ position: relative; padding-block: 1.5rem 2.5rem; } /* Schein, der über .cr-frame hinaus in den Sektionshintergrund ausstrahlt. Der bisherige .cr-flash saß NUR innerhalb des Rahmens (overflow:hidden), der Klick wirkte dadurch zu lokal auf ein kleines Rechteck begrenzt statt spürbar auf den ganzen Bereich. Liegt als eigenes Element hinter dem Rahmen, dessen deckender Hintergrund deckt die Mitte des Glows ab — sichtbar bleibt nur der Teil, der über den Rahmen hinausreicht. Mittelpunkt ist seit dem Wellen-Umbau die MITTE DES RAHMENS (live-build.js setzt --click-x/--click-y auf den Rahmenmittelpunkt), nicht mehr der links sitzende .cr-cta-mock: der Klick ist nur der Auslöser, der Aufschlagpunkt der Welle liegt mittig auf der Fläche. */ .cr-ambient{ position: absolute; inset: -22% -12%; z-index: 0; pointer-events: none; background: radial-gradient(circle at var(--click-x, 50%) var(--click-y, 50%), rgba(var(--accent-rgb), .5), transparent 62%); filter: blur(34px); opacity: 0; } /* Läuft bewusst so lang wie die Welle selbst und wächst leicht mit: der Schein ist das, was von der Welle nach außen in die Sektion abstrahlt. */ .click-reveal.is-flashing .cr-ambient{ animation: crambient 1.5s var(--ease-out); } @keyframes crambient{ 0%{ opacity: 0; transform: scale(.72); } 22%{ opacity: 1; } 100%{ opacity: 0; transform: scale(1.08); } } .cr-frame{ position: relative; z-index: 1; max-width: 640px; margin-inline: auto; border: 1px solid rgba(var(--accent-rgb), .35); border-radius: var(--radius); background: var(--bg-2); overflow: hidden; box-shadow: 0 20px 60px -24px rgba(var(--accent-rgb), .35); transition: border-color var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease); } .click-reveal.is-old .cr-frame{ border-color: var(--border-strong); box-shadow: none; } /* Sichtbarer "Druck": der Rahmen wird beim Klick kurz eingedrückt und federt danach leicht über die Ausgangsgröße zurück, statt nur farblich umzuschalten. */ .click-reveal.is-flashing .cr-frame{ animation: crpress var(--t-slow) var(--ease-out); } @keyframes crpress{ 0%{ transform: scale(1); } 20%{ transform: scale(.965); } 55%{ transform: scale(1.012); } 100%{ transform: scale(1); } } .cr-bar{ display: flex; align-items: center; gap: .45rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--border); } .cr-bar span{ width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); flex-shrink: 0; } /* Adressleiste bewusst als reine Form ohne Text: macht den Rahmen als Browserfenster lesbar, ohne eine Domain zu behaupten, die es nicht gibt. */ .cr-url{ flex: 1; max-width: 58%; height: 10px; margin-left: .45rem; border-radius: 999px; border: 1px solid var(--border); background: rgba(236,245,243,.08); transition: border-radius var(--t-med) var(--ease), background var(--t-slow) var(--ease); } .click-reveal.is-old .cr-url{ border-radius: 2px; background: rgba(236,245,243,.04); } .cr-body{ padding: 1.6rem 1.8rem 1.9rem; display: flex; flex-direction: column; gap: .7rem; } /* Kopfzeile der Beispielseite: Logo-Kachel links, drei Menüpunkte rechts. Vorher war das ein einzelner grauer Balken. */ .cr-nav{ display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; } .cr-logo{ width: 22px; height: 22px; flex-shrink: 0; border-radius: 7px; background: linear-gradient(140deg, var(--accent), var(--accent-2)); box-shadow: 0 0 14px rgba(var(--accent-rgb), .40); transition: background var(--t-slow) var(--ease), border-radius var(--t-med) var(--ease), box-shadow var(--t-slow) var(--ease); } .click-reveal.is-old .cr-logo{ background: rgba(236,245,243,.12); border-radius: 2px; box-shadow: none; } .cr-menu{ display: flex; gap: .5rem; margin-left: auto; } .cr-menu i{ width: 26px; height: 6px; border-radius: 3px; background: rgba(236,245,243,.16); transition: border-radius var(--t-med) var(--ease), background var(--t-slow) var(--ease); } .cr-menu i:nth-child(2){ width: 34px; } .click-reveal.is-old .cr-menu i{ border-radius: 1px; background: rgba(236,245,243,.07); } .cr-hero{ position: relative; overflow: hidden; min-height: 78px; padding: .9rem 1.05rem; display: flex; flex-direction: column; justify-content: center; gap: .4rem; border-radius: 9px; background: linear-gradient(100deg, var(--accent), var(--accent-2)); box-shadow: 0 0 26px rgba(var(--accent-rgb), .30); transition: background var(--t-slow) var(--ease), border-radius var(--t-med) var(--ease), box-shadow var(--t-slow) var(--ease); } /* Diagonaler Glanz, dasselbe Mittel wie über dem Laptop-Screenshot in den Referenzen (.showcase-screen::after) — gibt der Fläche Tiefe. */ .cr-hero::after{ content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(118deg, rgba(255,255,255,.20) 0%, transparent 44%); transition: opacity var(--t-slow) var(--ease); } .cr-hl{ height: 8px; border-radius: 4px; background: rgba(7,9,13,.42); transition: border-radius var(--t-med) var(--ease), background var(--t-slow) var(--ease); } .cr-hl.a{ width: 56%; } .cr-hl.b{ width: 36%; height: 6px; background: rgba(7,9,13,.26); } .cr-hpill{ margin-top: .3rem; width: 64px; height: 15px; border-radius: 999px; background: rgba(255,255,255,.58); transition: border-radius var(--t-med) var(--ease), background var(--t-slow) var(--ease); } .click-reveal.is-old .cr-hero{ background: rgba(236,245,243,.08); border-radius: 4px; box-shadow: none; } .click-reveal.is-old .cr-hero::after{ opacity: 0; } .click-reveal.is-old .cr-hl{ background: rgba(236,245,243,.10); border-radius: 1px; } .click-reveal.is-old .cr-hl.b{ background: rgba(236,245,243,.07); } .click-reveal.is-old .cr-hpill{ background: rgba(236,245,243,.12); border-radius: 2px; } .cr-line{ height: 7px; border-radius: 4px; background: rgba(236,245,243,.17); transition: background var(--t-slow) var(--ease), border-radius var(--t-med) var(--ease); } .cr-line.w1{ width: 90%; } .cr-line.w2{ width: 64%; } .click-reveal.is-old .cr-line{ background: rgba(236,245,243,.07); border-radius: 2px; } .cr-row{ display: flex; gap: .7rem; margin-top: .3rem; } .cr-card{ flex: 1; min-height: 64px; padding: .6rem .65rem; border-radius: 8px; display: flex; flex-direction: column; gap: .34rem; border: 1px solid var(--border); background: rgba(236,245,243,.045); transition: border-radius var(--t-med) var(--ease), border-color var(--t-slow) var(--ease), background var(--t-slow) var(--ease); } .cr-ic{ width: 15px; height: 15px; border-radius: 5px; margin-bottom: .1rem; background: rgba(var(--accent-rgb), .55); transition: border-radius var(--t-med) var(--ease), background var(--t-slow) var(--ease); } .cr-cl{ height: 5px; border-radius: 3px; background: rgba(236,245,243,.15); transition: border-radius var(--t-med) var(--ease), background var(--t-slow) var(--ease); } .cr-cl.a{ width: 86%; } .cr-cl.b{ width: 58%; } .click-reveal.is-old .cr-card{ border-radius: 2px; border-color: rgba(236,245,243,.07); background: rgba(236,245,243,.03); } .click-reveal.is-old .cr-ic{ border-radius: 1px; background: rgba(236,245,243,.12); } .click-reveal.is-old .cr-cl{ border-radius: 1px; background: rgba(236,245,243,.07); } /* Fußzeile der Beispielseite: schließt das Mockup unten sauber ab, statt dass es nach dem CTA einfach aufhört. */ .cr-foot{ display: flex; align-items: center; gap: .5rem; margin-top: .8rem; padding-top: .75rem; border-top: 1px solid var(--border); } .cr-foot span{ height: 5px; border-radius: 3px; background: rgba(236,245,243,.11); transition: border-radius var(--t-med) var(--ease), background var(--t-slow) var(--ease); } .cr-foot span:nth-child(1){ width: 66px; } .cr-foot span:nth-child(2){ width: 42px; } .cr-foot span:nth-child(3){ width: 30px; margin-left: auto; } .click-reveal.is-old .cr-foot span{ border-radius: 1px; background: rgba(236,245,243,.06); } .cr-cta-mock{ align-self: flex-start; margin-top: .5rem; width: 118px; height: 26px; border-radius: 6px; background: var(--accent); box-shadow: 0 0 18px rgba(var(--accent-rgb), .4); transition: background var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease), border-radius var(--t-med) var(--ease); } .click-reveal.is-old .cr-cta-mock{ background: rgba(236,245,243,.12); box-shadow: none; border-radius: 3px; } /* Aufschlag: kurzer Lichtkern im Moment des "Eintauchens", sitzt mittig auf der Fläche (50% 50%) und nicht mehr am links liegenden .cr-cta-mock. Kurz und klein gehalten — die eigentliche Wirkung tragen die Wellen. */ .cr-flash{ position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(circle at 50% 50%, rgba(var(--accent-rgb),.70), transparent 54%); opacity: 0; } .click-reveal.is-flashing .cr-flash{ animation: crflash 900ms var(--ease-out); } @keyframes crflash{ 0%{ opacity: 0; transform: scale(.35); } 16%{ opacity: 1; } 100%{ opacity: 0; transform: scale(1); } } /* --- Wellen wie ein Tropfen, der auf Wasser aufschlägt --------------------- Drei Ringe laufen nacheinander aus der Mitte der Mockup-Fläche nach außen: eine kräftige Bugwelle plus zwei schwächere Nachläufer. Bewusst KEIN skalierter border-Kreis: ein Rahmen wächst beim Skalieren mit, der Ring würde nach außen hin immer fetter — echte Wasserwellen werden dünner und schwächer. Stattdessen wandert über eine registrierte @property ein schmales, gleich dickes Helligkeitsband im radial-gradient nach außen. Falle: Farbstopps dürfen nicht negativ werden, sonst ist der ganze Gradient ungültig und es wird gar nichts gezeichnet. Deshalb startet --cr-wave bei 7% statt 0% — die halbe Bandbreite (max. 6%) passt darunter. Optisch ist das sogar näher am Vorbild: ein Tropfen erzeugt einen kleinen Kranz, keinen mathematischen Punkt. */ @property --cr-wave{ syntax: ''; initial-value: 7%; inherits: false; } .cr-ripple{ position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: screen; } .cr-ripple span{ position: absolute; inset: 0; opacity: 0; background: radial-gradient(circle at 50% 50%, transparent calc(var(--cr-wave) - 4%), rgba(var(--accent-rgb), .55) var(--cr-wave), transparent calc(var(--cr-wave) + 4%)); } /* Nachläufer: später, breiter, schwächer — die Energie nimmt ab */ .cr-ripple span:nth-child(2){ background: radial-gradient(circle at 50% 50%, transparent calc(var(--cr-wave) - 5%), rgba(var(--accent-rgb), .34) var(--cr-wave), transparent calc(var(--cr-wave) + 5%)); } .cr-ripple span:nth-child(3){ background: radial-gradient(circle at 50% 50%, transparent calc(var(--cr-wave) - 6%), rgba(var(--accent-rgb), .20) var(--cr-wave), transparent calc(var(--cr-wave) + 6%)); } .click-reveal.is-flashing .cr-ripple span{ animation: crwave 1.5s var(--ease-out); } .click-reveal.is-flashing .cr-ripple span:nth-child(2){ animation-delay: 150ms; } .click-reveal.is-flashing .cr-ripple span:nth-child(3){ animation-delay: 310ms; } @keyframes crwave{ 0%{ --cr-wave: 7%; opacity: 0; } 10%{ opacity: 1; } 100%{ --cr-wave: 98%; opacity: 0; } } .cr-cursor{ position: absolute; top: 0; left: 0; z-index: 5; width: 26px; height: 26px; opacity: 0; pointer-events: none; filter: drop-shadow(0 3px 6px rgba(0,0,0,.45)); transition: opacity var(--t-med) var(--ease); } .cr-cursor.is-visible{ opacity: 1; } .cr-cursor.is-clicking{ animation: crclick var(--t-med) var(--ease-out); } @keyframes crclick{ 0%{ transform: scale(1); } 45%{ transform: scale(.78); } 100%{ transform: scale(1); } } /* Der frühere .cr-ring (kleiner Klick-Ping) ist am 20.09.2026 ersatzlos entfernt worden. Er war kaputt und fiel erst mit der neuen Welle auf: fireClick() setzte per Inline-Style ein transform: translate(x,y) auf die CTA-Position, seine Keyframes setzten aber selbst transform: scale(...) — und das überschreibt das translate vollständig. Der Ring poppte dadurch immer in der linken oberen Ecke von .click-reveal auf, direkt unter der letzten Überschriftenzeile, statt am Klickpunkt. Das Klick-Feedback tragen jetzt der Cursor-Stauch-Effekt und die Welle; wer so einen Ping wieder einbaut, muss die Verschiebung IN die Keyframes schreiben (translate(...) scale(...)), nicht daneben. */ .diff-block{ border: 1px solid var(--border); border-radius: var(--radius); padding: 1.75rem; background: var(--surface); } .diff-block.is-old{ border-color: var(--border); } .diff-block.is-new{ border-color: rgba(var(--accent-rgb),.35); } .diff-title{ font-family: var(--font-mono); font-size: .85rem; color: var(--text-3); margin-bottom: 1rem; } .diff-block.is-new .diff-title{ color: var(--accent); } .diff-block li{ display: flex; gap: .7rem; padding-block: .5rem; border-top: 1px solid var(--border); font-size: .92rem; } .diff-block li:first-child{ border-top: 0; } .diff-block .mark{ font-family: var(--font-mono); flex-shrink: 0; width: 1em; } .diff-block.is-old .mark{ color: var(--diff-remove); } .diff-block.is-new .mark{ color: var(--diff-add); } .diff-block.is-old .txt{ color: var(--text-3); } /* --------------------------------------------------------- 14. Service list — corner-bracket rows --------------------------------------------------------- */ .service-list{ display: flex; flex-direction: column; } .service-row{ position: relative; display: grid; grid-template-columns: 1fr auto; gap: 1rem 2rem; align-items: start; padding: 1.6rem 1.4rem; border-top: 1px solid var(--border); transition: background var(--t-fast) var(--ease); } .service-list li:last-child{ border-bottom: 1px solid var(--border); } .service-row::before, .service-row::after{ content:""; position: absolute; width: 14px; height: 14px; opacity: 0; transition: opacity var(--t-fast) var(--ease); } .service-row::before{ top: -1px; left: 0; border-top: 1px solid var(--accent); border-left: 1px solid var(--accent); } .service-row::after{ bottom: -1px; right: 0; border-bottom: 1px solid var(--accent); border-right: 1px solid var(--accent); } .service-row:hover{ background: rgba(var(--accent-rgb),.04); } .service-row:hover::before, .service-row:hover::after{ opacity: 1; } .service-copy h3{ font-size: 1.15rem; margin-bottom: .4rem; } .service-copy h3 a{ transition: color var(--t-fast) var(--ease); } .service-copy h3 a:hover{ color: var(--accent); } .service-copy p{ max-width: 52ch; } .service-tag{ justify-self: start; font-family: var(--font-mono); font-size: .72rem; color: var(--accent); border: 1px solid rgba(var(--accent-rgb),.35); border-radius: 999px; padding: .3rem .7rem; height: fit-content; white-space: nowrap; } .service-row.no-tag{ grid-template-columns: 1fr; } .service-row.no-tag h3{ font-size: 1.15rem; margin-bottom: .4rem; } .service-row.no-tag p{ max-width: 52ch; } /* --------------------------------------------------------- 15. Chip row (Branchen) --------------------------------------------------------- */ .chip-row{ display: flex; flex-wrap: wrap; gap: .8rem; } .chip{ padding: .6rem 1.1rem; border-radius: 999px; border: 1px solid var(--border-strong); font-size: .88rem; color: var(--text-2); background: var(--surface); } /* Branchen-Statement: bewusst kein Klassifizierungsraster mehr, ein kurzer, einladender Satz statt einer Liste, in der man erst die eigene Branche suchen muss. */ .industries-statement{ text-align: center; max-width: 720px; margin-inline: auto; } .industries-statement h2{ margin-bottom: .6rem; } .industries-statement .lede{ margin-inline: auto; } /* --------------------------------------------------------- 16. Process list — numbered, mono --------------------------------------------------------- */ .process-list{ display: flex; flex-direction: column; } .process-item{ display: grid; grid-template-columns: 88px 1fr; gap: 1.5rem; padding-block: 1.7rem; border-top: 1px solid var(--border); } .process-list > *:first-child{ border-top: 0; } .process-num{ font-family: var(--font-mono); font-size: 2.2rem; font-weight: 500; color: transparent; -webkit-text-stroke: 1px var(--border-strong); line-height: 1; } .process-item h3{ margin-bottom: .4rem; } .process-item p{ max-width: 56ch; } /* --------------------------------------------------------- 17. Word-reveal line --------------------------------------------------------- */ .word-reveal .w{ display: inline-block; opacity: .25; filter: blur(3px); } /* --------------------------------------------------------- 18. Demo / referenzen cards --------------------------------------------------------- */ .demo-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .demo-card{ position: relative; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); transition: border-color var(--t-fast) var(--ease); } .demo-card::before, .demo-card::after{ content:""; position: absolute; width: 16px; height: 16px; opacity: 0; transition: opacity var(--t-fast) var(--ease); z-index: 2; } .demo-card::before{ top: 10px; left: 10px; border-top: 1px solid var(--accent); border-left: 1px solid var(--accent); } .demo-card::after{ bottom: 10px; right: 10px; border-bottom: 1px solid var(--accent); border-right: 1px solid var(--accent); } .demo-card:hover{ border-color: rgba(var(--accent-rgb),.3); } .demo-card:hover::before, .demo-card:hover::after{ opacity: 1; } .demo-thumb{ position: relative; padding: 1.75rem; background: var(--bg-2); border-bottom: 1px solid var(--border); } .demo-body{ padding: 1.4rem; } .kicker{ font-family: var(--font-mono); font-size: .72rem; color: var(--accent); } .demo-body h3{ font-size: 1.05rem; margin-block: .5rem .5rem; } /* --------------------------------------------------------- 19. Pricing cards Optik nach dem 21st.dev-"Aurora"-Muster, auf Neon Blueprint übertragen: weich blurrender Farbverlauf-Schein hinter jeder Karte (Ruhezustand dezent, auf Hover kräftiger), grosse Mono-Preiszahl, Haken in getönten Kreisen, Hover hebt die Karte an (translateY). Bewusst NICHT übernommen: der Monats/Jahres-Umschalter samt "-20 %" — unser Modell ist Einmalpreis plus optionale Monatsbetreuung, nicht Abo. Der Schein ist ein dekoratives ::before mit filter: blur(), KEIN backdrop-filter; die Kartenfläche selbst bleibt undurchsichtig (Glas gibt es auf dieser Seite nur an den Buttons). --------------------------------------------------------- */ .pricing-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: stretch; } .price-card{ position: relative; z-index: 0; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem; background: var(--surface); } /* Aurora-Schein hinter der Karte. Der weiche Rand kommt aus dem blur, -1 hält ihn hinter der undurchsichtigen Kartenfläche — er tritt also nur als Halo an den gerundeten Kanten aus, nicht über die Schrift. Gilt auch für .care-tier-card, damit die Betreuungsstufen optisch zur selben Kartenfamilie gehören wie die drei Paketkarten darüber. */ .price-card::before, .care-tier-card::before{ content: ""; position: absolute; inset: -14px; z-index: -1; border-radius: calc(var(--radius) + 12px); background: linear-gradient(120deg, var(--accent), var(--accent-2), var(--accent)); background-size: 300% 300%; filter: blur(28px); opacity: .13; transition: opacity .5s var(--ease-out); animation: price-aurora 14s ease infinite; } .price-card.is-highlight, .care-tier-card.is-highlight{ border-color: var(--accent); box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.25), 0 20px 60px -20px rgba(var(--accent-rgb),.35); } .price-card.is-highlight::before, .care-tier-card.is-highlight::before{ opacity: .27; } @keyframes price-aurora{ 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .price-badge{ position: absolute; top: -12px; right: 1.5rem; left: auto; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; background: var(--accent); color: #0a0b12; padding: .32rem .7rem; border-radius: 999px; box-shadow: 0 6px 18px -6px rgba(var(--accent-rgb), .6); } .price-sub{ color: var(--text-3); font-size: .88rem; margin-bottom: 1.2rem; } .price-value{ font-family: var(--font-mono); font-size: 1.6rem; color: var(--text); margin-bottom: 1.4rem; } .price-value span{ font-size: .8rem; color: var(--text-3); font-weight: 400; } /* Grosse Preiszahl in den drei Paketkarten (eigene, noch größere Stufe unten bei .care-tier-card .price-value, dort bewusst kleiner gehalten als hier). */ .price-card .price-value{ display: flex; align-items: baseline; white-space: nowrap; font-size: clamp(1.85rem, 1.25rem + 1.5vw, 2.2rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.08; } .price-card .price-value span{ letter-spacing: 0; margin-left: .35rem; } .price-list{ display: flex; flex-direction: column; gap: .7rem; margin-bottom: 1.6rem; flex: 1; } /* Inklusive-Zeile (3 Monate Betreuung) unter der Haken-Liste. Bewusst als deutlich sichtbarer Baustein, kein leiser Fußnoten-Hinweis: das ist einer der Gründe, warum das Angebot attraktiv wirken soll, also Icon in getöntem Kreis (wie die Haken-Icons, aber Geschenk-Motiv statt Haken, damit "Bonus" statt "Standard-Leistung" gelesen wird), kräftigerer Akzent-Rahmen + -Hintergrund, größere Schrift, zweifarbige Auszeichnung. */ .price-included{ display: flex; align-items: center; gap: .7rem; margin-bottom: 1.6rem; padding: .8rem 1rem; border-radius: var(--radius-sm); background: rgba(var(--accent-rgb), .16); border: 1px solid rgba(var(--accent-rgb), .4); color: var(--text-2); font-size: .88rem; line-height: 1.4; } .price-included svg{ flex-shrink: 0; box-sizing: border-box; width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: rgba(var(--accent-rgb), .22); color: var(--accent); } .price-included .lead{ color: var(--accent); font-weight: 700; } .price-included b{ color: var(--text); font-weight: 700; } .price-list li{ display: flex; align-items: center; gap: .6rem; font-size: .88rem; color: var(--text-2); } /* Haken im getönten Kreis (Aurora-Muster: CheckCircle) — nur CSS, die 15 Inline-SVGs bleiben unangetastet. */ .price-list li svg{ box-sizing: border-box; width: 20px; height: 20px; padding: 3.5px; border-radius: 50%; background: rgba(var(--accent-rgb), .14); color: var(--accent); flex-shrink: 0; } /* Hover-Anhebung: Karte fährt hoch (translateY, Aurora-Muster whileHover y:-10) und skaliert leicht, die Leistungsliste "atmet", der Schein wird kräftiger. Nur echte Maus-Hover, sonst bliebe der Zustand auf Touch hängen. */ @media (hover: hover) and (pointer: fine){ .price-card{ transform-origin: center; transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); } .price-list{ transition: gap .3s cubic-bezier(.25, .8, .25, 1); } .price-card:hover{ transform: translateY(-10px) scale(1.02); z-index: 1; } .price-card.is-highlight:hover{ transform: translateY(-10px) scale(1.015); } .price-card:hover::before{ opacity: .32; } .price-card.is-highlight:hover::before{ opacity: .44; } .price-card:hover .price-list{ gap: .85rem; } .care-tier-card{ transform-origin: center; transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); } .care-tier-card:hover{ transform: translateY(-6px); } .care-tier-card:hover::before{ opacity: .24; } .care-tier-card.is-highlight:hover::before{ opacity: .36; } } @media (prefers-reduced-motion: reduce){ .price-card{ transition: none; } .price-list{ transition: none; } .care-tier-card{ transition: none; } .price-card::before, .care-tier-card::before{ animation: none; } } .price-note{ color: var(--text-3); } /* Betreuungsstufen (Basis/Standard/Premium) — drei schmale Karten in derselben Kartenfamilie wie die Pakete (Rahmen, Radius, Aurora-Schein identisch zu .price-card), aber ohne Button: die Stufe wird im Erstgespräch gewählt, nicht direkt hier gebucht. Kopfblock (Überschrift/Erklärsatz/Hinweis) steht direkt auf der hellen #preise-Fläche, deshalb eigene Ink-Farben unten unter "surface-light" statt der dunklen Kartentexte. */ .care-tiers-head{ text-align: center; max-width: 46ch; margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; } .care-tiers-head h3{ font-size: clamp(1.3rem, 1vw + 1.05rem, 1.6rem); margin-block: .5rem .5rem; } .care-tiers-head p{ font-size: .96rem; line-height: 1.55; } .care-tiers-hint{ display: block; margin-top: .6rem; font-family: var(--font-mono); font-size: .78rem; } .surface-light .care-tiers-head .eyebrow{ color: var(--accent-ink); } .surface-light .care-tiers-head h3{ color: var(--ink); } .surface-light .care-tiers-head p, .surface-light .care-tiers-hint{ color: var(--ink-2); } .care-tier-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; align-items: stretch; margin-top: 2.5rem; } .care-tier-card{ position: relative; z-index: 0; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; background: var(--surface); } .care-tier-card h4{ font-size: 1rem; margin-bottom: .3rem; } .care-tier-card .price-value{ font-size: clamp(1.5rem, 1.1rem + 1.1vw, 1.9rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.08; margin-bottom: 1rem; } .care-tier-card .price-list{ margin-bottom: 0; gap: .6rem; } .care-tier-card .price-list li{ font-size: .85rem; } .care-tiers-cta{ display: flex; justify-content: center; margin-top: 2rem; } @media (max-width: 760px){ .care-tier-card.is-highlight{ margin-top: 1.75rem; } } /* --------------------------------------------------------- 20. FAQ accordion --------------------------------------------------------- */ .faq-list{ display: flex; flex-direction: column; border-top: 1px solid var(--border); } .faq-item{ border-bottom: 1px solid var(--border); } .faq-q{ width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.3rem; text-align: left; font-size: 1.02rem; font-weight: 500; } .faq-q .plus{ font-family: var(--font-mono); flex-shrink: 0; color: var(--accent); transition: transform var(--t-fast) var(--ease); } .faq-q .plus::before{ content: "+"; } .faq-item.is-open .faq-q .plus{ transform: rotate(45deg); } .faq-a{ max-height: 0; overflow: hidden; transition: max-height var(--t-med) var(--ease-out); } .faq-a p{ padding-bottom: 1.3rem; font-family: var(--font-mono); font-size: .88rem; line-height: 1.7; max-width: 62ch; } /* --------------------------------------------------------- 21. CTA band --------------------------------------------------------- */ .cta-band{ border: 1px solid var(--border-strong); border-radius: var(--radius); padding: clamp(2.5rem, 5vw, 4rem); text-align: center; background: radial-gradient(ellipse 80% 100% at 50% 0%, rgba(var(--accent-rgb),.08), transparent 70%), var(--surface); } .cta-band h2{ margin-block: .75rem 1rem; } .cta-band .lede{ margin-inline: auto; margin-bottom: 1.8rem; } .cta-band .hero-actions{ justify-content: center; } /* Bild-Banner (ersetzt den frueheren surface-light-CTA "Wir sagen Ihnen ehrlich"). Muster von der Referenz-Demo beckmanns-krug-nachher.html (.band): Foto als Hintergrund, dunkler Verlauf drueber fuer Textkontrast, Inhalt zentriert. Verlauf oben/unten dunkler (blendet in #unterschied bzw. #referenzen), in der Mitte plus ein radialer Abdunkler hinter dem Textblock. Kein background-attachment:fixed (ruckelt auf Mobil). */ .banner{ position: relative; padding: clamp(4.5rem, 10vw, 8rem) 1.5rem; text-align: center; color: var(--text); background-color: var(--bg); background-image: radial-gradient(ellipse 68% 62% at 50% 50%, rgba(7,9,13,.5), transparent 78%), linear-gradient(180deg, rgba(7,9,13,.93), rgba(7,9,13,.62) 40%, rgba(7,9,13,.68) 66%, rgba(7,9,13,.97)), url("../img/beratung-banner.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; } .banner-inner{ max-width: 44rem; margin-inline: auto; } .banner-inner h2{ margin-block: .8rem 1.5rem; } .banner-inner .hero-actions{ justify-content: center; } .banner-credit{ position: absolute; right: .8rem; bottom: .55rem; font-family: var(--font-mono); font-size: .6rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: rgba(238,241,246,.42); } /* ab 1100px sitzt rechts die .section-rail (fixed) — Credit weiter nach innen */ @media (min-width: 1100px){ .banner-credit{ right: 4.2rem; } } /* --------------------------------------------------------- 22. Footer --------------------------------------------------------- */ .site-footer{ border-top: 1px solid var(--border); padding-block: 3.5rem 2rem; } .footer-grid{ display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; margin-bottom: 2.5rem; } .footer-brand p{ margin-top: .9rem; font-size: .88rem; max-width: 32ch; } .footer-col h3{ font-family: var(--font-mono); font-size: .78rem; color: var(--text-3); font-weight: 500; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: .04em; } .footer-col ul{ display: flex; flex-direction: column; gap: .65rem; } .footer-col a, .footer-col li{ font-size: .9rem; color: var(--text-2); } .footer-col a:hover{ color: var(--accent); } .footer-bottom{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 1.6rem; border-top: 1px solid var(--border); font-size: .82rem; color: var(--text-3); } .footer-bottom a:hover{ color: var(--accent); } /* --------------------------------------------------------- 23. Legal / todo-note --------------------------------------------------------- */ .legal-content{ max-width: 760px; } .legal-content h2{ font-size: 1.4rem; margin-block: 2.2rem .8rem; } .legal-content h3{ font-size: 1.15rem; margin-block: 1.8rem .6rem; } .legal-content h4{ font-size: 1rem; margin-block: 1.3rem .5rem; } .legal-content h5{ font-size: .95rem; font-weight: 600; margin-block: 1rem .4rem; } .legal-content p, .legal-content li{ font-size: .95rem; margin-bottom: .8rem; } .legal-content ul{ padding-left: 1.2rem; list-style: disc; } .todo-note{ display: flex; gap: .8rem; border: 1px dashed rgba(var(--accent-2-rgb),.5); background: rgba(var(--accent-2-rgb),.06); border-radius: var(--radius-sm); padding: 1rem 1.2rem; margin-block: 1rem 1.6rem; font-size: .85rem; color: var(--text-2); } .todo-note .tag{ font-family: var(--font-mono); font-size: .72rem; color: var(--accent-2); flex-shrink: 0; } /* --------------------------------------------------------- 24. Forms (Kontakt) --------------------------------------------------------- */ .contact-form{ display: flex; flex-direction: column; gap: 1.3rem; max-width: 560px; } .form-field{ display: flex; flex-direction: column; gap: .5rem; } .form-field label{ font-family: var(--font-mono); font-size: .78rem; color: var(--text-3); } .form-field select{ border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); padding: .85rem 1rem; font-size: .95rem; transition: border-color var(--t-fast) var(--ease); appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2386A19C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; } .form-field select:focus-visible{ outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.15); } .form-field input, .form-field textarea{ border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); padding: .85rem 1rem; font-size: .95rem; transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } .form-field input:focus-visible, .form-field textarea:focus-visible{ outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.15); } .form-field textarea{ min-height: 140px; resize: vertical; } .form-status{ font-family: var(--font-mono); font-size: .85rem; padding: .9rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); display: none; } .form-status.is-visible{ display: block; } /* Erfolg und Fehler auch farblich unterscheiden, nicht nur im Text: die Farbe ist dabei die Zugabe, die Aussage steht im Text selbst. */ .form-status.is-ok{ border-color: rgba(52,211,153,.5); color: var(--diff-add); } .form-status.is-error{ border-color: rgba(251,113,133,.5); color: var(--diff-remove); } /* Custom-Select ("Was benötigen Sie?"): ersetzt das native mit demselben name="need" wie vorher das