/* Schriften selbst gehostet statt ueber fonts.googleapis.com/fonts.gstatic.com geladen (08.09.2026, DSGVO-Fund) - eine externe Google-Fonts-CDN-Einbindung uebertraegt die Besucher-IP an Google ohne Einwilligung, was laut LG Muenchen I (Az. 3 O 17493/20) einen DSGVO-Verstoss darstellt und dem selbst gesetzten Anspruch "keine externen Tracking-Skripte, cookie-banner-frei" (Roadmap_Level3_Website_CRM_ProjektS) widersprach. Dateien liegen lokal unter assets/fonts/, analog zum bereits selbst gehosteten Poppins-Muster in 41. Projekt S/11. Website/styles.css. WOFF2 (13.09.2026, BUG-04 Website-Audit): TTF durch WOFF2 abgeloest - per fontTools auf tatsaechlich vorkommende Zeichen (Latin-1 + deutsche Sonderzeichen, Anfuehrungs- zeichen/Gedankenstriche, Euro-Zeichen) subgesetzt, ca. 73% kleiner (~583KB -> ~155KB ueber alle 10 Dateien). TTF bleibt als Fallback-Format fuer Browser ohne WOFF2- Unterstuetzung im src-Fallback stehen, wird von modernen Browsern nicht geladen. */ @font-face { font-family: "Sora"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/sora-400.woff2") format("woff2"), url("fonts/sora-400.ttf") format("truetype"); } @font-face { font-family: "Sora"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/sora-500.woff2") format("woff2"), url("fonts/sora-500.ttf") format("truetype"); } @font-face { font-family: "Sora"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/sora-600.woff2") format("woff2"), url("fonts/sora-600.ttf") format("truetype"); } @font-face { font-family: "Sora"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/sora-700.woff2") format("woff2"), url("fonts/sora-700.ttf") format("truetype"); } @font-face { font-family: "Sora"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/sora-800.woff2") format("woff2"), url("fonts/sora-800.ttf") format("truetype"); } @font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/instrument-serif-400-italic.woff2") format("woff2"), url("fonts/instrument-serif-400-italic.ttf") format("truetype"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/jetbrains-mono-400.woff2") format("woff2"), url("fonts/jetbrains-mono-400.ttf") format("truetype"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/jetbrains-mono-500.woff2") format("woff2"), url("fonts/jetbrains-mono-500.ttf") format("truetype"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/jetbrains-mono-600.woff2") format("woff2"), url("fonts/jetbrains-mono-600.ttf") format("truetype"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/jetbrains-mono-700.woff2") format("woff2"), url("fonts/jetbrains-mono-700.ttf") format("truetype"); } /* Design-System 1:1 aus hub_static/index.html uebernommen (Projekt-7-Marke). Dark ist die Standard-/Markenvariante; Light-Mode (08.09.2026, Pflicht-Anforderung analog Everlast) ueberschreibt dieselben Tokens per [data-theme="light"] am , umgeschaltet per theme-toggle.js unten. */ /* ---- Typografie-Skala (15.09.2026, Runde 4 - Konsistenz-Root-Cause-Fix) ---- Vor dieser Skala hatte jede Session eigene Einzelwerte gesetzt (mal Gewicht 700, mal 400; mal 12px, mal 10.5px) ohne Abstimmung - das war die Ursache fuer "manche Sachen sehen gut aus, manche nicht" (Imad-Feedback ueber mehrere Runden). Jedes neue kleine Text-/Label-Element wird gegen DIESE Skala geprueft, nicht neu gewuerfelt: - Label/Chip/Badge (Mono, uppercase): 12-12.5px, Gewicht 700 (.eyebrow, .mod-chip, .founding-badge-text b, .sys-node .k) - Nav/UI-Text (Sora): 14px, Gewicht 600-700 (.site-nav-links a) - Body-Fliesstext (Sora): 16px, Gewicht 400 (body) - Subhead/Card-Titel (Sora): 15.5-16px, Gewicht 700-800 (.trust-card h3, analoge Karten-Titel) - Section-h2: clamp(26px,3.6vw,38px), Gewicht 800 Footer/Fusszeilen-Text (12-12.5px/400) ist bewusst die unterste, separate Stufe - keine Card-/Nav-Rolle, daher nicht Teil dieser Skala. */ :root { --bg: #08090b; --bg-tint: #0d0f12; --surface: rgba(255,255,255,0.035); --surface-strong: rgba(255,255,255,0.065); --border: rgba(255,255,255,0.09); --text: #f5f7f6; --text-muted: #c9d2ce; --text-faint: #7c8783; --accent: #59e8c8; --accent-soft: rgba(89,232,200,0.1); --sev-kritisch: #ff6b6b; --sev-hoch: #ffa94d; --sev-mittel: #7fb8e6; } html[data-theme="light"] { --bg: #f6f9f8; --bg-tint: #eef3f1; --surface: rgba(8,12,10,0.04); --surface-strong: rgba(8,12,10,0.065); --border: rgba(8,12,10,0.11); --text: #0c1210; --text-muted: #3c4a45; --text-faint: #67766f; --accent: #0d9c7f; --accent-soft: rgba(13,156,127,0.1); } * { box-sizing: border-box; } html, body { background: var(--bg); transition: background 0.15s ease; } /* Globale Dot-Grid-Textur (Teil 2.1, Feinschliff 15.09.2026): sehr dezentes, dezentes Punktraster laeuft unter der GESAMTEN Seite durch, nicht nur im Hero - behebt den Kern des "eintoenig/flaechig"-Eindrucks in beiden Themes (Nutzer- Feedback nach Go-Live), ohne wie ein zusaetzliches Element zu wirken. BEWUSST OHNE `background-attachment: fixed` (erster Versuch, wieder verworfen): fixierte Hintergruende erzwingen bei jedem Scroll ein Repaint des kompletten Viewports - in der Verifikation fuehrte das zu sichtbar leeren/weissen Screenshots waehrend des Scrollens (reproduzierbar), auf echten Mobilgeraeten waere das raendernde Rucklen beim Scrollen. Scrollt jetzt regulaer mit dem Inhalt - visuell bei einem so feinen, sich wiederholenden Muster kein wahrnehmbarer Unterschied. */ body { margin: 0; color: var(--text); font-family: "Sora", system-ui, sans-serif; font-size: 16px; line-height: 1.6; background-image: radial-gradient(color-mix(in srgb, var(--accent) 6%, transparent) 1px, transparent 1px); background-size: 28px 28px; } .mono { font-family: "JetBrains Mono", monospace; } a { color: inherit; } img, svg { max-width: 100%; } .wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; } /* Sichtbar nur für Screenreader (BUG-03, Website-Audit 13.09.2026) */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Header — sticky (UX-01, Website-Audit 13.09.2026): Kontakt-CTA bleibt beim Scrollen erreichbar statt nach der Hero-Sektion aus dem Bild zu verschwinden. Liegt seit 15.09.2026 (Feinschliff, Sticky-Bugfix) AUSSERHALB jedes .wrap-Divs - braucht deshalb die Zentrierung/Innenabstaende jetzt selbst (vorher von .wrap geerbt). */ header.site { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } /* Innerer Wrap uebernimmt nur die Breiten-Zentrierung (wie ueberall sonst auf der Seite) - der aeussere header.site bleibt dadurch echte volle Breite, Hintergrund/ Blur/Trennlinie gehen von Kante zu Kante statt in der Mitte zu schweben. */ header.site .wrap { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; flex-wrap: wrap; gap: 12px; } .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; } .brand svg { width: 26px; height: 26px; flex-shrink: 0; } /* Echtes Logo-Mark als PNG (10.09.2026, ersetzt Platzhalter-SVG) - Theme-Swap analog .theme-toggle .icon-sun/.icon-moon: helle Variante auf dunklem Grund, dunkle auf hellem. */ /* Header-Vorschlaege "Variante 2" (15.09.2026, Kritikpunkt "Header wirkt zu leer"): Canvas-Bounding-Box-Messung der echten PNGs ergab, dass der sichtbare Logo-Inhalt nur ca. 81% der Bildhoehe fuellt (848x302px Datei, 684x244px Inhalt) - die Marke wirkte dadurch kleiner als sie eigentlich ist. Hoehe direkt erhoeht (kein CSS-transform:scale, das haette bei nur 12px Flex-Gap die Wortmarke ueberlappt). */ .brand-logo { height: 24px; width: auto; flex-shrink: 0; } .brand-logo-light { display: none; } html[data-theme="light"] .brand-logo-dark { display: none; } html[data-theme="light"] .brand-logo-light { display: block; } .brand-word { font-family: "JetBrains Mono", monospace; font-weight: 700; letter-spacing: 0.13em; font-size: 15px; color: var(--text); } .cta-pill { font-family: "JetBrains Mono", monospace; font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--bg); background: var(--accent); border: none; border-radius: 100px; padding: 10px 20px; text-decoration: none; display: inline-block; cursor: pointer; white-space: nowrap; } .cta-pill:hover { opacity: 0.9; } @media (max-width: 400px) { .cta-pill { font-size: 11.5px; padding: 9px 15px; } } .header-actions { display: flex; align-items: center; gap: 10px; } /* Header-Umbruch behoben (Tiefenanalyse 13.09.2026, Befund 01/02/03): Logo + Nav-Links (ab 761px) + Dunkelmodus-Button + CTA-Text passten gemeinsam erst ab ~950-1000px in eine Zeile - auf jedem Handy und den meisten Tablets brach der Header in zwei Zeilen um. Der Header-CTA-Button ist ausserdem inhaltsgleich mit der mobilen Leiste unten (Befund 02) - beide gleichzeitig sichtbar war eine echte Dopplung. Fix: Header-CTA verschwindet dort, wo die mobile Leiste dieselbe Funktion übernimmt (<=900px, exakt auf deren Breakpoint abgestimmt) - ohne ihn passen Logo+Nav-Links+Toggle in jedem getesteten Breitenschritt (360/414/560/780/900px) sicher in eine Zeile. */ @media (max-width: 900px) { .header-cta { display: none; } } /* Header-CTA erst sichtbar, sobald der primaere Hero-CTA (.cta-primary) aus dem Sichtfeld gescrollt ist (15.09.2026, Kritikpunkt "Announcement-Bar startet zu frueh") - vermeidet zwei identische CTAs gleichzeitig on-screen, JS togglet .is-visible per IntersectionObserver (siehe index.html). Ohne JS/bei reduced-motion bleibt der Button dauerhaft sichtbar (kein Funktionsverlust). */ @media (min-width: 901px) { html.js-reveal .header-cta { opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; } html.js-reveal .header-cta.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } @media (prefers-reduced-motion: reduce) { html.js-reveal .header-cta { opacity: 1; transform: none; pointer-events: auto; transition: none; } } } .theme-toggle { width: 36px; height: 36px; flex-shrink: 0; border-radius: 100px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; } .theme-toggle:hover { color: var(--accent); border-color: var(--accent); } .theme-toggle svg { width: 17px; height: 17px; } .theme-toggle .icon-sun { display: none; } html[data-theme="light"] .theme-toggle .icon-moon { display: none; } html[data-theme="light"] .theme-toggle .icon-sun { display: block; } /* Eyebrow / badge (Hub-Muster) */ .eyebrow { display: inline-flex; align-items: center; gap: 7px; font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); border-radius: 100px; padding: 6px 14px; } .eyebrow.is-centered { display: flex; margin: 0 auto 8px; width: fit-content; } .block h2.is-centered { text-align: center; margin-left: auto; margin-right: auto; } /* Hero — zentriert wie Entwurf 4 (.hero{text-align:center;align-items:center}), nicht linksbuendiges SaaS-Layout (Korrektur 09.09.2026, siehe Entscheidungen_Log.md). */ .hero { padding: 76px 0 56px; text-align: center; display: flex; flex-direction: column; align-items: center; } .hero h1 { font-size: clamp(32px, 5vw, 52px); font-weight: 800; letter-spacing: -0.02em; margin: 20px 0 18px; text-wrap: balance; max-width: 16ch; } .hero h1 em { font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400; color: var(--accent); font-size: 1.05em; } .hero .lede { color: var(--text-muted); font-size: 18px; max-width: 52ch; margin-bottom: 30px; } .cta-primary { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; background: var(--accent); color: var(--bg); border: none; border-radius: 100px; padding: 14px 26px; text-decoration: none; cursor: pointer; } .cta-primary .line1 { font-weight: 700; font-size: 15px; } .cta-primary .line2 { font-family: "JetBrains Mono", monospace; font-size: 10.5px; font-weight: 500; letter-spacing: 0.02em; opacity: 0.75; } /* Header-Nav-Links (Entwurf 4, 09.09.2026) */ .site-nav-links { display: flex; align-items: center; gap: 4px; margin-right: 6px; } .site-nav-links a { font-size: 14px; font-weight: 700; color: var(--text-faint); text-decoration: none; padding: 9px 14px; border-radius: 100px; white-space: nowrap; } .site-nav-links a:hover { color: var(--text); } @media (max-width: 760px) { .site-nav-links { display: none; } } /* Hero-CTA-Zeile mit Sekundaer-Button + animiertem Headline-Wortwechsel (Entwurf 4) */ .cta-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; } @media (max-width: 640px) { .cta-row { flex-direction: column; width: 100%; } .cta-primary, .cta-secondary { justify-content: center; width: 100%; } .hero-price-strip { flex-direction: column; gap: 8px; align-items: center; } } .cta-secondary { display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; border-radius: 100px; font-weight: 600; font-size: 14px; color: var(--text); border: 1px solid var(--border); background: var(--surface); text-decoration: none; cursor: pointer; } .cta-secondary:hover { border-color: var(--accent); color: var(--accent); } .swap-wrap { display: inline-grid; vertical-align: bottom; overflow: hidden; padding-bottom: 0.08em; } .swap { grid-row: 1; grid-column: 1; font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400; color: var(--accent); opacity: 0; animation: swapCycle 5s infinite; } .swap:nth-child(1) { animation-delay: 0s; } .swap:nth-child(2) { animation-delay: 2.5s; } /* BUG-01 (Website-Audit 13.09.2026): urspruengliche Timings liessen zwischen zwei Woertern ein Fenster von >1s, in dem KEINES sichtbar war - reproduzierbar per Screenshot bestaetigt. Jetzt so berechnet, dass das Ausblenden eines Worts exakt dort endet, wo das naechste Wort zu erscheinen beginnt - nie beide gleichzeitig auf 0 Opazitaet. Tiefenanalyse 13.09.2026 (Befund 16): von 3 auf 2 Woerter reduziert ("Sekunden" gestrichen, reine Redundanz zu "Minuten"/"Echtzeit") - Zyklus/Delay/Keyframe-Prozente entsprechend von 3x2.5s auf 2x2.5s umgerechnet, gleiche absolute Fade-/Halte-Dauer wie vorher (~0.25s ein, ~1.95s halten, ~0.3s aus) je Slot. */ @keyframes swapCycle { 0%, 100% { opacity: 0; transform: translateY(8px); } 5% { opacity: 1; transform: translateY(0); } 44% { opacity: 1; transform: translateY(0); } 50% { opacity: 0; transform: translateY(-8px); } } @media (prefers-reduced-motion: reduce) { .swap { animation: none; opacity: 0; } .swap:first-child { opacity: 1; } } .hero-price-strip { font-family: "JetBrains Mono", monospace; font-size: 12px; margin-top: 24px; display: flex; gap: 22px; color: var(--text-faint); font-variant-numeric: tabular-nums; } .hero-price-strip b { color: var(--text); font-size: 14px; } /* Section shell */ section.block { padding: 56px 0; border-top: 1px solid var(--border); } .block h2 { font-size: clamp(26px, 3.6vw, 38px); font-weight: 800; letter-spacing: -0.015em; margin: 14px 0 10px; } .block h2 em { font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400; color: var(--accent); font-size: 1.05em; } .block .lede { color: var(--text-muted); font-size: 15px; max-width: 60ch; margin-bottom: 34px; } /* Scroll-Reveal (Teil 2.5, Feinschliff 15.09.2026): Section-Header/Karten-Grids blenden beim ersten Sichtbarwerden sanft ein. WICHTIG: per Default (ohne JS, ohne das html.js-reveal-Flag) bleibt .reveal voll sichtbar - der ausgeblendete Startzustand wird NUR gesetzt, wenn ein frueh im laufendes Inline-Script bestaetigt hat, dass JS wirklich laeuft (verhindert, dass ein blockiertes/ fehlerhaftes Script oder ein nie feuernder Observer echten Content dauerhaft unsichtbar haelt - reines CSS-Verstecken ohne diese Absicherung waere ein echtes Robustheitsrisiko auf einer Lead-Gen-Seite). */ html.js-reveal .reveal { opacity: 0.001; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; } /* Muss spezifischer sein als die Regel oben (sonst gewinnt bei gesetztem js-reveal-Flag faelschlich immer der versteckte Zustand, auch mit .is-visible - realer Bug, live in der Verifikation aufgefallen: Sections blieben nach dem Scroll-Reveal dauerhaft leer/unsichtbar). */ html.js-reveal .reveal.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { html.js-reveal .reveal { opacity: 1; transform: none; transition: none; } } /* Alternierender Rhythmus (Struktur A, 15.09.2026): Loesung/Angebot leicht abgesetzt statt jede Section identisch auf --bg - bricht die zuvor monotone Section-Abfolge, ohne einen zweiten Farbstrang einzufuehren (--bg-tint ist aus --bg abgeleitet). */ section.block.tint { background: var(--bg-tint); position: relative; overflow: hidden; } /* Hero-Raster-Motiv fortgefuehrt (Teil 2.2, Feinschliff 15.09.2026): dasselbe Linienraster wie .hero-grid, aber sehr schwach und nur oben in der Section - zieht den "technischen" Look, der vorher nur im Hero existierte, als roten Faden durch die Seite statt ihn auf einen Moment zu beschraenken. */ section.block.tint::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(color-mix(in srgb, var(--accent) 16%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--accent) 16%, transparent) 1px, transparent 1px); background-size: 38px 38px; -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 55%); mask-image: linear-gradient(180deg, #000 0%, transparent 55%); opacity: 0.35; } section.block.tint > .wrap { position: relative; z-index: 1; } /* ROI-Rechner */ .roi { margin-top: 40px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 26px 26px 22px; } .roi-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; flex-wrap: wrap; gap: 8px; } .roi-head label { font-weight: 600; font-size: 14.5px; } .roi-head .val { font-family: "JetBrains Mono", monospace; color: var(--accent); font-weight: 700; font-size: 14.5px; } input[type="range"] { width: 100%; accent-color: var(--accent); margin: 10px 0 22px; } .roi-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--border); } .roi-stat { background: var(--bg); padding: 16px 18px; } .roi-stat .num { font-family: "JetBrains Mono", monospace; font-size: 26px; font-weight: 700; color: var(--accent); letter-spacing: -0.01em; } .roi-stat .lbl { font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 4px; } .roi-note { margin-top: 14px; font-size: 12px; color: var(--text-faint); } /* Runde 4, Punkte 6+7: Proof-Signal (echte, bereits belegte Kennzahl aus der Problem-Section) + Reciprocity-Hinweis (bereits existierender DSGVO-Report, bisher nur im Footer verlinkt) direkt vor dem Kontaktformular - kein neuer Inhalt, nur Zweitplatzierung von bereits Vorhandenem/Belegtem naeher an der finalen CTA. */ .contact-proof-line { margin: -10px 0 24px; font-size: 13px; color: var(--text-muted); } .contact-proof-line b { color: var(--accent); font-family: "JetBrains Mono", monospace; } .contact-proof-line a { color: var(--text); text-decoration: underline; } .contact-proof-line a:hover { color: var(--accent); } /* Kontaktformular */ .contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 640px; } @media (max-width: 620px) { .contact-form { grid-template-columns: 1fr; } } .contact-form .full { grid-column: 1 / -1; } .contact-form label { display: block; font-size: 12.5px; color: var(--text-muted); margin-bottom: 6px; } .contact-form input, .contact-form textarea { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; color: var(--text); font-family: "Sora", system-ui, sans-serif; font-size: 14px; } .contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--accent); } .contact-form textarea { resize: vertical; min-height: 90px; } .form-msg { font-size: 13.5px; margin-top: 4px; min-height: 18px; } .form-msg.ok { color: #43d17a; } .form-msg.err { color: #ff6b5e; } .submit-row { margin-top: 4px; } /* Honeypot (15.09.2026, Security-Haertung) - fuer Menschen unsichtbar/nicht erreichbar, aber im DOM vorhanden (kein display:none, das ueberspringen manche Bots gezielt). Position ausserhalb des sichtbaren Viewports statt Groesse 0, damit auch ein Screenreader es ignoriert (aria-hidden auf dem Wrapper) und kein Fokus-Ring je sichtbar wird. */ .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Trust-Sektion (Fast-Follow Task 12, 07.09.2026 - nur die statischen 2 von 4 geplanten Sektionen, Stack-Finder/Tear-Down-Slider bewusst zurueckgestellt, siehe TASKS.md) - gleiches Card-Badge-Muster wie team-card, keine erfundenen Beweise/Testimonials, nur bereits an anderer Stelle belegte Fakten. */ .trust-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } @media (max-width: 620px) { .trust-grid { grid-template-columns: 1fr; } } /* Runde 4 (15.09.2026), Punkt 10: dezenter Tiefenlayer statt reiner 1px-Outline - "Glanz"-Fund aus der Best-Practice-Recherche (moderne SaaS-Karten nutzen Schatten/ Hover-Lift statt flacher Umrisse). Sehr gedaempft gehalten, kein neues Farbsystem, in beiden Themes ueber rgba(0,0,0,..) mit niedriger Deckkraft. */ .trust-card, .stat-tile, .problem-tile, .ladder-step { box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 14px rgba(0,0,0,.03); transition: transform .2s ease, box-shadow .2s ease; } .trust-card:hover, .stat-tile:hover, .problem-tile:hover, .ladder-step:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 10px 22px rgba(0,0,0,.06); } @media (prefers-reduced-motion: reduce) { .trust-card, .stat-tile, .problem-tile, .ladder-step { transition: none; } .trust-card:hover, .stat-tile:hover, .problem-tile:hover, .ladder-step:hover { transform: none; } } .trust-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 20px 20px; display: flex; gap: 14px; align-items: flex-start; } .trust-card .icon { flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); display: flex; align-items: center; justify-content: center; color: var(--accent); font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 14px; } .trust-card h3 { font-size: 15.5px; font-weight: 700; margin: 0 0 4px; letter-spacing: -0.01em; } .trust-card p { font-size: 13.5px; color: var(--text-muted); margin: 0; } /* Einstiegs-Leiter (15.09.2026, Struktur A): ersetzt Pilot-Panel + Offer-Grid, die beide dieselbe "was kostet das/wie steigen wir ein"-Frage separat beantwortet hatten - jetzt eine einzige 3-stufige Leiter, Preisfrage nur noch an dieser einen Stelle beantwortet (FAQ verweist hierher statt den Text zu wiederholen). Weiterhin keine konkreten Betraege (Imad-Entscheidung 13.09.2026 bleibt gueltig). */ .ladder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } @media (max-width: 860px) { .ladder { grid-template-columns: 1fr; } } .ladder-step { border: 1px solid var(--border); border-radius: 16px; padding: 22px 20px; background: var(--surface); } .ladder-step.is-mid { border-color: color-mix(in srgb, var(--accent) 32%, transparent); background: var(--accent-soft); } .ladder-step .step-k { font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); } .ladder-step.is-mid .step-k { color: var(--accent); } .ladder-step h4 { font-size: 15.5px; font-weight: 800; margin: 8px 0 8px; } .ladder-step p { font-size: 13px; color: var(--text-muted); margin: 0 0 14px; min-height: 58px; } .ladder-step .price { font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 14px; } .ladder-note { font-size: 12px; color: var(--text-faint); margin: 20px 0 0; text-align: center; } /* Problem-Sektion (15.09.2026, Struktur A): ersetzt die vorherige Sticky-2-Spalten- Sektion (.problems-layout) - dieselben Fakten/Quellen, aber ohne eigenes Scroll-Verhalten, das bei nur noch 7 Sections nicht mehr gebraucht wird. */ .problem-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 30px; } @media (max-width: 640px) { .problem-stats { grid-template-columns: 1fr; } } .stat-tile { border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px; background: var(--surface); } .stat-tile b { font-family: "JetBrains Mono", monospace; font-size: 30px; color: var(--accent); display: block; margin-bottom: 6px; } .stat-tile span { font-size: 13.5px; color: var(--text-muted); } .stat-tile em { display: block; font-style: normal; font-size: 11px; color: var(--text-faint); margin-top: 8px; } .stat-tile em a { color: var(--text-faint); text-decoration: underline; } .problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } @media (max-width: 860px) { .problem-grid { grid-template-columns: 1fr; } } .problem-tile { border: 1px solid var(--border); border-radius: 14px; padding: 20px 20px 18px; background: var(--surface); } .problem-tile .sev { display: inline-block; font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 100px; margin-bottom: 12px; } .sev-kritisch { color: var(--sev-kritisch); background: color-mix(in srgb, var(--sev-kritisch) 14%, transparent); } .sev-hoch { color: var(--sev-hoch); background: color-mix(in srgb, var(--sev-hoch) 14%, transparent); } .sev-mittel { color: var(--sev-mittel); background: color-mix(in srgb, var(--sev-mittel) 14%, transparent); } .problem-tile p.title { font-weight: 700; font-size: 15.5px; margin: 0 0 6px; } .problem-tile p.desc { font-size: 13px; color: var(--text-muted); margin: 0; } /* Domain-Scan-Widget */ .scan-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 26px; margin: 30px auto 0; max-width: 560px; width: 100%; text-align: left; } .scan-row { display: flex; gap: 10px; flex-wrap: wrap; } .scan-row input { flex: 1; min-width: 200px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; color: var(--text); font-family: "JetBrains Mono", monospace; font-size: 13.5px; } .scan-row input:focus { outline: none; border-color: var(--accent); } .scan-msg { font-size: 12.5px; margin-top: 10px; min-height: 16px; } .scan-msg.err { color: #ff6b5e; } .scan-result { margin-top: 18px; display: none; } .scan-result.show { display: block; } .scan-score-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; } .scan-score-row .score { font-family: "JetBrains Mono", monospace; font-size: 40px; font-weight: 700; color: var(--accent); } .scan-score-row .score-lbl { font-size: 13px; color: var(--text-muted); max-width: 32ch; } .scan-signals { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; } .scan-signal { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; font-size: 12.5px; } .scan-signal .lbl { color: var(--text-faint); font-family: "JetBrains Mono", monospace; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.03em; } .scan-signal .val { margin-top: 4px; font-weight: 600; } .scan-signal .val.good { color: var(--accent); } .scan-signal .val.gap { color: #ff9f5e; } .scan-signal .detail { font-size: 10px; color: var(--text-faint); margin-top: 2px; } .scan-cta { margin: 16px 0; } .scan-cta:empty { display: none; } .scan-cta .cta-pill { width: 100%; text-align: center; padding: 13px 20px; font-size: 13.5px; } .scan-cta .cta-hint { display: block; margin-top: 6px; font-size: 11px; color: var(--text-faint); text-align: center; } .scan-note { font-size: 11.5px; color: var(--text-faint); margin-top: 16px; } footer.site { border-top: 1px solid var(--border); padding: 26px 0 40px; margin-top: 20px; font-size: 12.5px; color: var(--text-faint); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; } footer.site a { color: var(--text-muted); text-decoration: none; } footer.site a:hover { color: var(--accent); } /* Legal-Seiten (Impressum/Datenschutz) - schmalerer Lesefluss als die Marketing-Seite, bewusst eigene .wrap-Breite statt der 1080px-Website-Spalte (09.09.2026, site.css-Extraktion). */ .legal-wrap { max-width: 720px; margin: 0 auto; padding: 0 24px 96px; } .legal-header { padding: 22px 0 34px; border-bottom: 1px solid var(--border); margin-bottom: 34px; } .legal-back { display: inline-block; margin-bottom: 28px; font-size: 13.5px; text-decoration: none; color: var(--text-muted); } .legal-back:hover { color: var(--accent); } .legal-wrap h1 { font-size: 28px; font-weight: 800; margin: 0 0 28px; } .legal-wrap h2 { font-size: 16.5px; font-weight: 700; margin: 32px 0 8px; } .legal-wrap p { color: var(--text-muted); margin: 0 0 6px; } .legal-wrap a { color: var(--accent); } /* Report-Landingpage (dsgvo-report.html) - schmalerer .wrap als die Marketing-Seite, 09.09.2026 auf site.css konsolidiert (vorher eigenes Inline-