/* =================================================================== NXTLYR – Redesign-Entwurf (Startseite) Design-System: "Werkstatt bei Nacht" – warmes Anthrazit-Dunkel mit glühendem Industrial-Orange als Markenanker. Typografie: Outfit (Headings) + Work Sans (Body) – unverändert zur Marke. =================================================================== */ /* ---------- Webfonts (self-hosted) ---------- */ @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/outfit-v15-latin-500.woff2') format('woff2'); } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/outfit-v15-latin-600.woff2') format('woff2'); } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/outfit-v15-latin-700.woff2') format('woff2'); } @font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/work-sans-v24-latin-regular.woff2') format('woff2'); } @font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/work-sans-v24-latin-500.woff2') format('woff2'); } @font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/work-sans-v24-latin-600.woff2') format('woff2'); } /* ---------- Design Tokens ---------- */ :root { /* Primitive colors – warmes, dunkles Anthrazit statt reinem Schwarz */ --c-bg-950: #14110d; --c-bg-900: #1a1611; --c-bg-800: #221c16; --c-bg-700: #2b241c; --c-line: rgba(255, 255, 255, 0.08); --c-line-strong: rgba(255, 255, 255, 0.16); --c-text: #f7f3ec; --c-text-muted: #b3aa9e; --c-text-faint: #7d7468; --c-orange-600: #c2410c; --c-orange-500: #ea580c; --c-orange-400: #f97316; --c-orange-300: #fb923c; --c-orange-wash: #2c1e14; /* Semantic tokens */ --color-bg: var(--c-bg-950); --color-surface: var(--c-bg-900); --color-surface-alt: var(--c-bg-800); --color-surface-hover: var(--c-bg-700); --color-text: var(--c-text); --color-text-muted: var(--c-text-muted); --color-text-faint: var(--c-text-faint); --color-border: var(--c-line); --color-border-strong: var(--c-line-strong); --color-accent: var(--c-orange-500); --color-accent-strong: var(--c-orange-400); --color-accent-soft: var(--c-orange-wash); --color-on-accent: #17110a; --color-focus-ring: var(--c-orange-400); --color-success: #4ade80; --color-danger: #f87171; /* Typography */ --font-heading: "Outfit", "Segoe UI", system-ui, sans-serif; --font-body: "Work Sans", "Segoe UI", system-ui, sans-serif; /* Spacing scale */ --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2rem; --space-5: 3rem; --space-6: 4rem; --space-7: 6rem; --space-8: 8rem; /* Layout */ --container-width: 1180px; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 24px; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.35); --shadow-lg: 0 32px 64px rgba(0, 0, 0, 0.45); --shadow-glow: 0 0 0 1px rgba(234, 88, 12, 0.35), 0 20px 60px -12px rgba(234, 88, 12, 0.35); --transition-fast: 150ms cubic-bezier(0.22, 0.61, 0.36, 1); --transition-base: 320ms cubic-bezier(0.22, 0.61, 0.36, 1); /* Theme-Hilfsvariablen (werden im hellen Theme unten überschrieben) */ --color-header-bg: rgba(20, 17, 13, 0.72); --color-header-bg-scrolled: rgba(20, 17, 13, 0.92); --color-panel-icon-bg: rgba(255, 255, 255, 0.08); /* Fixe helle Textfarbe für dunkle Bild-Badges/Bildunterschriften – bleibt in beiden Themes gleich, weil diese Elemente immer auf Fotos liegen, nicht auf dem Seitenhintergrund. */ --color-chip-text: #f7f3ec; } /* ---------- Helles Theme ---------- Wird gesetzt, sobald data-theme="light" auf steht (siehe theme-init.js). theme-init.js setzt dieses Attribut automatisch anhand der Betriebssystem-Einstellung (prefers-color-scheme) oder – falls vorhanden – anhand der manuell gespeicherten Wahl. */ :root[data-theme="light"] { --c-bg-950: #f7f2ea; --c-bg-900: #ffffff; --c-bg-800: #f0e8db; --c-bg-700: #e6dbc9; --c-line: rgba(20, 17, 13, 0.10); --c-line-strong: rgba(20, 17, 13, 0.18); --c-text: #1f1a14; --c-text-muted: #5c5346; --c-text-faint: #8a8175; /* Kräftigeres Orange für Text auf hellem Grund (Kontrast-Anforderung AA) */ --color-accent-strong: var(--c-orange-600); --color-accent-soft: #fbe4d5; --color-focus-ring: var(--c-orange-600); --color-success: #15803d; --color-danger: #b91c1c; --color-header-bg: rgba(255, 255, 255, 0.72); --color-header-bg-scrolled: rgba(255, 255, 255, 0.92); --color-panel-icon-bg: rgba(20, 17, 13, 0.06); --shadow-sm: 0 1px 2px rgba(20, 17, 13, 0.10); --shadow-md: 0 12px 32px rgba(20, 17, 13, 0.10); --shadow-lg: 0 32px 64px rgba(20, 17, 13, 0.14); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 600; line-height: 1.12; margin: 0 0 0.5em; letter-spacing: -0.01em; } h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); font-weight: 700; } h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); } h3 { font-size: 1.15rem; } p { margin: 0 0 1em; } .lead { font-size: 1.15rem; color: var(--color-text-muted); } ul { margin: 0; padding: 0; list-style: none; } button { font: inherit; } .container { max-width: var(--container-width); margin: 0 auto; padding: 0 var(--space-3); } .skip-link { position: absolute; left: -999px; top: 0; background: var(--color-accent); color: var(--color-on-accent); padding: 0.75em 1.2em; border-radius: 0 0 var(--radius-sm) 0; z-index: 200; font-weight: 600; } .skip-link:focus { left: 0; } :focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 3px; border-radius: 4px; } /* ---------- Reveal-on-scroll ---------- */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--transition-base), transform var(--transition-base); } .reveal.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } } /* ---------- Eyebrow ---------- */ .eyebrow { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--font-heading); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-strong); margin: 0 0 var(--space-2); } .eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--color-accent); border-radius: 1px; } /* ---------- Header / Nav ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--color-header-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color var(--transition-base), background var(--transition-base); } .site-header.is-scrolled { border-bottom-color: var(--color-border); background: var(--color-header-bg-scrolled); } .nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); height: 78px; } .logo { display: inline-flex; align-items: center; gap: 0.6em; font-family: var(--font-heading); font-weight: 700; font-size: 1.15rem; color: var(--color-text); } .logo img { width: 30px; height: 30px; } .logo-tagline { display: block; font-family: var(--font-body); font-weight: 400; font-size: 0.68rem; color: var(--color-text-faint); letter-spacing: 0.03em; } .nav-links { display: flex; align-items: center; gap: var(--space-4); } .nav-links a:not(.btn) { font-size: 0.92rem; font-weight: 500; color: var(--color-text-muted); position: relative; padding: 0.3em 0; transition: color var(--transition-fast); } .nav-links a:not(.btn):hover, .nav-links a:not(.btn)[aria-current="page"] { color: var(--color-text); } .nav-links a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px; background: var(--color-accent); border-radius: 1px; transition: right var(--transition-base); } .nav-links a:not(.btn):hover::after, .nav-links a:not(.btn)[aria-current="page"]::after { right: 0; } .nav-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: transparent; color: var(--color-text); cursor: pointer; } .nav-toggle svg { width: 22px; height: 22px; } .nav-actions { display: flex; align-items: center; gap: var(--space-1); } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: transparent; color: var(--color-text); cursor: pointer; transition: border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); } .theme-toggle:hover { border-color: var(--color-accent); color: var(--color-accent-strong); } .theme-toggle:active { transform: scale(0.92); } .theme-toggle svg { width: 20px; height: 20px; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } :root[data-theme="light"] .theme-toggle .icon-sun { display: block; } :root[data-theme="light"] .theme-toggle .icon-moon { display: none; } /* Sanfter Übergang beim Umschalten zwischen hell/dunkel */ body, .site-header, .stat-panel, .portfolio-item, .card, .usp-item .icon, input, textarea, select, .faq, .journal-card, .legal-content { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 0.6em; padding: 0.95em 1.7em; min-height: 48px; border-radius: var(--radius-sm); font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem; border: 1px solid transparent; cursor: pointer; transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); white-space: nowrap; } .btn svg { width: 1.1em; height: 1.1em; flex: none; transition: transform var(--transition-fast); } .btn:hover svg { transform: translateX(3px); } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--color-accent); color: var(--color-on-accent); box-shadow: 0 8px 24px -8px rgba(234, 88, 12, 0.6); } .btn-primary:hover { background: var(--color-accent-strong); box-shadow: 0 12px 32px -8px rgba(234, 88, 12, 0.75); transform: translateY(-2px); } .btn-outline { background: transparent; color: var(--color-text); border-color: var(--color-border-strong); } .btn-outline:hover { border-color: var(--color-accent); color: var(--color-accent-strong); transform: translateY(-2px); } .btn-dark { background: var(--c-bg-950); color: var(--color-text); border-color: var(--color-border-strong); } /* ---------- Hero ---------- */ .hero { position: relative; padding: var(--space-7) 0 var(--space-6); overflow: hidden; } .hero::before { content: ""; position: absolute; inset: -20% -10% auto -10%; height: 620px; background: radial-gradient(60% 60% at 78% 20%, rgba(234, 88, 12, 0.22), transparent 70%), radial-gradient(40% 50% at 15% 10%, rgba(234, 88, 12, 0.10), transparent 70%); pointer-events: none; } .hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-6); align-items: center; } .hero h1 { margin-bottom: var(--space-3); } .hero h1 .accent-word { color: var(--color-accent-strong); } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0 var(--space-5); } .hero-stats { display: flex; gap: var(--space-5); padding-top: var(--space-3); border-top: 1px solid var(--color-border); } .hero-stat strong { display: block; font-family: var(--font-heading); font-size: 1.6rem; font-weight: 700; color: var(--color-text); } .hero-stat span { font-size: 0.82rem; color: var(--color-text-muted); } /* Hero visual: stacked print-layer motif echoing the logo mark */ .hero-visual { position: relative; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; } .layer-stack { position: relative; width: 100%; max-width: 420px; aspect-ratio: 1/1; } .layer-stack svg { width: 100%; height: 100%; overflow: visible; } .layer-stack .layer { transform-origin: center; opacity: 0; animation: layer-rise 700ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards; } .layer-stack .layer:nth-child(1) { animation-delay: 60ms; } .layer-stack .layer:nth-child(2) { animation-delay: 160ms; } .layer-stack .layer:nth-child(3) { animation-delay: 260ms; } .layer-stack .layer:nth-child(4) { animation-delay: 360ms; } .layer-stack .layer:nth-child(5) { animation-delay: 460ms; } .layer-stack .layer:nth-child(6) { animation-delay: 560ms; } @keyframes layer-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .layer-stack .layer { animation: none; opacity: 1; transform: none; } } .layer-stack .layer-top { filter: drop-shadow(0 18px 40px rgba(234, 88, 12, 0.45)); } .hero-visual-ring { position: absolute; inset: 6% ; border: 1px dashed var(--color-border-strong); border-radius: 50%; animation: spin-slow 60s linear infinite; } @keyframes spin-slow { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .hero-visual-ring { animation: none; } } .hero-portrait { position: relative; width: 100%; max-width: 420px; aspect-ratio: 1/1; border-radius: 50%; overflow: hidden; border: 1px solid var(--color-border-strong); } .hero-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ---------- Sections ---------- */ .section { padding: var(--space-7) 0; } .section-alt { background: var(--color-surface); } .section-head { max-width: 640px; margin: 0 0 var(--space-5); } .section-head.center { margin-left: auto; margin-right: auto; text-align: center; } .section-head .eyebrow.center-eyebrow::before { display: none; } .grid { display: grid; gap: var(--space-3); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } /* ---------- Cards ---------- */ .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); transition: transform var(--transition-base), border-color var(--transition-base), background var(--transition-base); } .card:hover { transform: translateY(-4px); border-color: var(--color-border-strong); background: var(--color-surface-alt); } .card .icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-sm); background: var(--color-accent-soft); color: var(--color-accent-strong); margin-bottom: var(--space-3); } .card .icon svg { width: 24px; height: 24px; } .card h3 { margin-bottom: 0.3em; } .card p { color: var(--color-text-muted); font-size: 0.92rem; margin: 0; } .more-link { margin-top: var(--space-4); display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--font-heading); font-weight: 600; color: var(--color-text); transition: gap var(--transition-fast), color var(--transition-fast); } .more-link svg { width: 1.1em; height: 1.1em; transition: transform var(--transition-fast); } .more-link:hover { color: var(--color-accent-strong); } .more-link:hover svg { transform: translateX(4px); } /* ---------- Portfolio teaser ---------- */ .portfolio-grid { grid-template-columns: repeat(3, 1fr); } .portfolio-item { position: relative; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--color-border); background: var(--color-surface); } .portfolio-thumb { aspect-ratio: 1/1; overflow: hidden; background: var(--color-surface-alt); } .portfolio-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1); } .portfolio-item:hover .portfolio-thumb img { transform: scale(1.06); } .portfolio-item-body { padding: var(--space-3); } .portfolio-item-body .tag { display: inline-block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-accent-strong); margin-bottom: 0.5em; } .portfolio-item-body h3 { font-size: 1.05rem; margin-bottom: 0.3em; } .portfolio-item-body p { font-size: 0.88rem; color: var(--color-text-muted); margin: 0; } /* ---------- Warum NXTLYR / split ---------- */ .split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-6); align-items: start; } .usp-list { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); } .usp-item { display: flex; gap: var(--space-2); align-items: flex-start; } .usp-item .icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--radius-sm); background: var(--color-accent-soft); color: var(--color-accent-strong); } .usp-item .icon svg { width: 21px; height: 21px; } .usp-item h3 { margin-bottom: 0.15em; font-size: 1rem; } .usp-item p { margin: 0; color: var(--color-text-muted); font-size: 0.9rem; } .stat-panel { position: relative; background: linear-gradient(155deg, var(--c-bg-800) 0%, var(--c-bg-950) 78%); border: 1px solid rgba(234, 88, 12, 0.28); border-radius: var(--radius-lg); padding: var(--space-5); overflow: hidden; box-shadow: var(--shadow-glow); } .stat-panel::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 100% 0%, rgba(234, 88, 12, 0.18), transparent 70%); pointer-events: none; } .stat-panel > * { position: relative; } .stat-panel .eyebrow { color: var(--color-accent-strong); } .stat-panel h3 { margin-bottom: var(--space-3); } .stat-panel .usp-item .icon { background: var(--color-panel-icon-bg); color: var(--c-text); } .stat-panel .usp-item h3 { font-size: 0.98rem; } /* ---------- CTA band ---------- */ .cta-band { position: relative; text-align: center; padding: var(--space-6) var(--space-4); border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--c-orange-600), var(--c-orange-500) 55%, var(--c-orange-400)); color: var(--color-on-accent); overflow: hidden; } .cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 80% at 20% 0%, rgba(255,255,255,0.25), transparent 60%); pointer-events: none; } .cta-band > * { position: relative; } .cta-band .eyebrow { color: rgba(23, 17, 10, 0.75); justify-content: center; } .cta-band .eyebrow::before { background: rgba(23, 17, 10, 0.5); } .cta-band h2 { max-width: 680px; margin-left: auto; margin-right: auto; } .cta-band p { color: rgba(23, 17, 10, 0.82); max-width: 520px; margin-left: auto; margin-right: auto; } .cta-tagline { font-family: var(--font-heading); font-weight: 700; font-size: 1.2rem; margin-top: var(--space-3); } .cta-actions { margin-top: var(--space-4); display: flex; justify-content: center; } .cta-band .btn-primary { background: var(--c-bg-950); color: var(--c-text); box-shadow: var(--shadow-md); } .cta-band .btn-primary:hover { background: var(--c-bg-800); } /* ---------- Footer ---------- */ .site-footer { background: var(--c-bg-950); border-top: 1px solid var(--color-border); padding: var(--space-6) 0 var(--space-3); } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-5); padding-bottom: var(--space-5); } .footer-logo { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--font-heading); font-weight: 700; margin-bottom: var(--space-2); } .footer-logo img { width: 26px; height: 26px; } .footer-grid p { color: var(--color-text-muted); font-size: 0.9rem; max-width: 32ch; } .footer-grid h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-faint); margin-bottom: var(--space-2); } .footer-grid ul { display: flex; flex-direction: column; gap: 0.6em; } .footer-grid a { color: var(--color-text-muted); font-size: 0.92rem; transition: color var(--transition-fast); } .footer-grid a:hover { color: var(--color-accent-strong); } .footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--color-border); font-size: 0.82rem; color: var(--color-text-faint); } .footer-bottom a { color: var(--color-text-faint); } .footer-bottom a:hover { color: var(--color-accent-strong); } /* ---------- Page intro (innere Seiten) ---------- */ .page-intro { padding: var(--space-7) 0 var(--space-5); } .page-intro .lead { margin-top: var(--space-2); } /* ---------- Grid-3 (Leistungen-Karten) ---------- */ @media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } } .grid-2 { grid-template-columns: repeat(2, 1fr); } /* ---------- Numbered steps (Ablauf-Timeline) ---------- */ .timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); } @media (max-width: 860px) { .timeline { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .timeline { grid-template-columns: 1fr; } } .steps { counter-reset: step; } .step { position: relative; padding-left: 3.4rem; } .step::before { counter-increment: step; content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 0; font-family: var(--font-heading); font-weight: 700; font-size: 0.85rem; color: var(--color-accent-strong); background: var(--color-accent-soft); border: 1px solid rgba(234, 88, 12, 0.28); width: 2.5rem; height: 2.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .step h3 { font-size: 1rem; margin-bottom: 0.25em; } .step p { margin: 0; color: var(--color-text-muted); font-size: 0.92rem; } /* ---------- Portfolio filter ---------- */ .filter-bar { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-4); } .filter-chip { padding: 0.6em 1.2em; border-radius: 999px; border: 1px solid var(--color-border-strong); background: transparent; color: var(--color-text-muted); font-family: var(--font-heading); font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); } .filter-chip[aria-pressed="true"] { background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); } .filter-chip:hover:not([aria-pressed="true"]) { border-color: var(--color-accent); color: var(--color-text); } /* ---------- Scan-Prozess-Figur ---------- */ .scan-process-figure { margin: 0; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--color-border); background: var(--color-surface); } .scan-process-figure img { width: 100%; height: auto; display: block; } .scan-process-figure figcaption { padding: var(--space-2) var(--space-3); font-size: 0.85rem; color: var(--color-text-muted); text-align: center; } .scan-process-figure-small { max-width: 340px; margin-left: auto; margin-right: auto; } /* ---------- Portfolio-Carousel (Detailstufen-Vergleich) ---------- */ .portfolio-carousel { position: relative; aspect-ratio: 1/1; overflow: hidden; background: var(--color-surface-alt); } .portfolio-carousel-track { position: relative; width: 100%; height: 100%; } .portfolio-carousel-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 0.7s ease; } .portfolio-carousel-slide.is-active { opacity: 1; } .portfolio-carousel-slide img { width: 100%; height: 100%; object-fit: cover; display: block; } .portfolio-carousel-slide figcaption { position: absolute; left: var(--space-2); bottom: var(--space-2); background: rgba(20, 17, 13, 0.82); color: var(--color-chip-text); font-family: var(--font-heading); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.25em 0.65em; border-radius: var(--radius-sm); } .portfolio-carousel-dots { position: absolute; right: var(--space-2); bottom: var(--space-2); display: flex; gap: 6px; z-index: 2; } .portfolio-carousel-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); transition: background 0.3s ease, transform 0.15s ease; cursor: pointer; } .portfolio-carousel-dots span:hover { transform: scale(1.25); } .portfolio-carousel-dots span.is-active { background: var(--color-accent); } .ai-badge { position: absolute; top: var(--space-2); right: var(--space-2); z-index: 3; display: inline-flex; align-items: center; gap: 4px; background: rgba(20, 17, 13, 0.82); color: var(--color-chip-text); font-family: var(--font-heading); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.3em 0.6em; border-radius: var(--radius-sm); pointer-events: none; } .ai-badge svg { width: 12px; height: 12px; flex: none; } a.portfolio-item { display: block; transition: border-color var(--transition-base), transform var(--transition-base); } a.portfolio-item:hover { border-color: var(--color-accent); transform: translateY(-3px); } /* ---------- FAQ (native details/summary) ---------- */ .faq { display: grid; gap: var(--space-2); max-width: 760px; } .faq-item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 0 var(--space-3); transition: border-color var(--transition-base); } .faq-item:hover { border-color: var(--color-border-strong); } .faq-item summary { cursor: pointer; list-style: none; padding: var(--space-3) 0; font-family: var(--font-heading); font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary .chevron { transition: transform var(--transition-base); flex: none; width: 20px; height: 20px; color: var(--color-accent-strong); } .faq-item[open] summary .chevron { transform: rotate(180deg); } .faq-item p { padding-bottom: var(--space-3); color: var(--color-text-muted); margin: 0; } /* ---------- Contact page ---------- */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); } @media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } } .contact-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); } .contact-method { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); } .contact-method:last-child { border-bottom: none; } .contact-method .icon { width: 42px; height: 42px; flex: none; border-radius: 50%; background: var(--color-accent-soft); color: var(--color-accent-strong); display: flex; align-items: center; justify-content: center; } .contact-method .icon svg { width: 20px; height: 20px; } .contact-method a, .contact-method span.value { font-weight: 600; color: var(--color-text); } .contact-method .label { display: block; font-size: 0.8rem; color: var(--color-text-muted); } /* ---------- Legal pages ---------- */ .legal-content { max-width: 760px; } .legal-content h2 { margin-top: var(--space-5); font-size: 1.3rem; } .legal-content h2:first-child { margin-top: 0; } .legal-content p, .legal-content li { color: var(--color-text-muted); } .legal-content ul { list-style: disc; padding-left: 1.3em; display: grid; gap: 0.4em; margin-bottom: var(--space-3); } .legal-content a { color: var(--color-accent-strong); } .legal-content a:hover { text-decoration: underline; } .legal-note { background: var(--color-accent-soft); border: 1px solid rgba(234, 88, 12, 0.28); border-radius: var(--radius-md); padding: var(--space-3); font-size: 0.9rem; color: var(--color-text-muted); margin-bottom: var(--space-5); } /* ---------- Journal / Artikel ---------- */ .article-content { max-width: 760px; } .article-content h2 { margin-top: var(--space-5); font-size: 1.3rem; } .article-content h2:first-child { margin-top: 0; } .article-content p { color: var(--color-text-muted); margin-bottom: var(--space-3); } .article-content .lead { color: var(--color-text); font-size: 1.1rem; } .article-back { display: inline-flex; align-items: center; gap: 0.4em; font-size: 0.9rem; font-weight: 600; color: var(--color-text-muted); margin-bottom: var(--space-3); transition: color var(--transition-fast); } .article-back svg { width: 16px; height: 16px; } .article-back:hover { color: var(--color-accent-strong); } .media-placeholder { aspect-ratio: 4/3; border-radius: var(--radius-md); border: 1px dashed var(--color-border-strong); background: var(--color-surface); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); color: var(--color-text-muted); font-size: 0.85rem; text-align: center; padding: var(--space-2); } .media-placeholder svg { width: 28px; height: 28px; opacity: 0.6; } .media-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin: var(--space-4) 0; } @media (max-width: 700px) { .media-gallery { grid-template-columns: 1fr; } } .media-placeholder-solo { max-width: 320px; } .scan-text-figure { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-4); align-items: start; margin-bottom: var(--space-3); } .scan-text-figure p { margin-bottom: 0; } .scan-text-figure .scan-process-figure { margin: 0; } @media (max-width: 700px) { .scan-text-figure { grid-template-columns: 1fr; } } .mesh-viewer-wrap { position: relative; aspect-ratio: 1/1; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--color-border); background: var(--c-bg-950); margin: var(--space-4) 0 0; } .mesh-viewer-wrap model-viewer { width: 100%; height: 100%; --poster-color: transparent; } .mesh-viewer-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); text-align: center; padding: var(--space-3); } .mesh-viewer-load-btn:disabled { opacity: 0.75; cursor: default; transform: none; } .mesh-viewer-placeholder-hint { color: var(--color-text-faint); font-size: 0.8rem; } .mesh-viewer-badge { position: absolute; left: var(--space-2); bottom: var(--space-2); background: rgba(20, 17, 13, 0.82); color: var(--color-chip-text); font-family: var(--font-heading); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.25em 0.65em; border-radius: var(--radius-sm); pointer-events: none; z-index: 2; } .mesh-viewer-caption { font-size: 0.85rem; color: var(--color-text-muted); text-align: center; margin: var(--space-1) 0 var(--space-4); } .article-figure-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); margin: var(--space-4) 0; } @media (max-width: 700px) { .article-figure-row { grid-template-columns: 1fr; } } .order-box { background: var(--color-accent-soft); border: 1px solid rgba(234, 88, 12, 0.28); border-radius: var(--radius-md); padding: var(--space-4); margin-top: var(--space-5); } .order-box h3 { margin-bottom: 0.5em; } .order-box ul { list-style: none; padding: 0; margin: 0 0 var(--space-3); display: grid; gap: 0.4em; } .order-box ul li { color: var(--color-text-muted); font-size: 0.95rem; } .order-box ul li strong { color: var(--color-text); } .order-box .order-note { font-size: 0.85rem; color: var(--color-text-muted); margin-top: var(--space-2); margin-bottom: 0; } .order-box .cta-actions { margin-top: var(--space-3); } /* ---------- Responsive ---------- */ @media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } .hero-visual { max-width: 360px; margin: 0 auto; } .split { grid-template-columns: 1fr; } .grid-4 { grid-template-columns: repeat(2, 1fr); } .portfolio-grid { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 700px) { .nav-links { display: none; } .nav-links.is-open { display: flex; position: absolute; top: 78px; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-3); background: var(--c-bg-900); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-md); } .nav-links.is-open .btn { width: 100%; justify-content: center; margin-top: var(--space-1); } .nav-toggle { display: inline-flex; } .grid-4 { grid-template-columns: 1fr; } .portfolio-grid { grid-template-columns: 1fr; } .hero-stats { flex-wrap: wrap; gap: var(--space-3); } .footer-grid { grid-template-columns: 1fr; } .cta-band { padding: var(--space-5) var(--space-3); } } /* ---------- WhatsApp Floating-Button ---------- */ .whatsapp-float { position: fixed; right: 20px; bottom: 20px; z-index: 90; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #25d366; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); transition: transform var(--transition-base), box-shadow var(--transition-base); } .whatsapp-float:hover, .whatsapp-float:focus-visible { transform: translateY(-3px) scale(1.05); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.42); } .whatsapp-float svg { width: 30px; height: 30px; fill: #fff; } @media (max-width: 640px) { .whatsapp-float { right: 16px; bottom: 16px; width: 52px; height: 52px; } .whatsapp-float svg { width: 28px; height: 28px; } } @media (prefers-reduced-motion: reduce) { .whatsapp-float { transition: none; } } /* ---------- Angebot anfragen (Startseiten-Formular) ---------- */ .quote-form-wrap { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-6); align-items: start; } .quote-form { display: flex; flex-direction: column; gap: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-md); } .form-row { display: flex; flex-direction: column; gap: 0.45em; } .form-row label { font-family: var(--font-heading); font-weight: 600; font-size: 0.92rem; color: var(--color-text); } .form-optional { font-weight: 400; color: var(--color-text-muted); font-size: 0.85em; } .quote-form input[type="email"], .quote-form input[type="text"], .quote-form input[type="file"], .quote-form textarea { width: 100%; padding: 0.85em 1em; border-radius: var(--radius-sm); border: 1px solid var(--color-border-strong); background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 0.95rem; } .quote-form textarea { resize: vertical; min-height: 100px; } .quote-form input[type="email"]:focus-visible, .quote-form input[type="text"]:focus-visible, .quote-form input[type="file"]:focus-visible, .quote-form textarea:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; border-color: var(--color-accent); } .quote-form input[type="file"] { padding: 0.65em 1em; font-size: 0.88rem; color: var(--color-text-muted); } .quote-form input[type="file"]::file-selector-button { font-family: var(--font-heading); font-weight: 600; font-size: 0.85rem; color: var(--color-on-accent); background: var(--color-accent); border: none; border-radius: var(--radius-sm); padding: 0.6em 1em; margin-right: var(--space-2); cursor: pointer; transition: background var(--transition-fast); } .quote-form input[type="file"]::file-selector-button:hover { background: var(--color-accent-strong); } .form-hint { margin: 0; font-size: 0.82rem; color: var(--color-text-faint); } .form-row-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .form-row-consent { margin: 0; } .form-checkbox-label { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.82rem; line-height: 1.45; color: var(--color-text-muted); cursor: pointer; } .form-checkbox-label input[type="checkbox"] { flex-shrink: 0; width: 1.2rem; height: 1.2rem; margin-top: 0.1rem; accent-color: var(--color-accent-strong); cursor: pointer; } .form-checkbox-label a { color: var(--color-accent-strong); text-decoration: underline; } .quote-form .btn { align-self: flex-start; } .quote-form .btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none !important; } .form-status { margin: 0; font-size: 0.9rem; min-height: 1.2em; } .form-status[data-state="success"] { color: var(--color-success); } .form-status[data-state="error"] { color: var(--color-danger); } @media (max-width: 900px) { .quote-form-wrap { grid-template-columns: 1fr; } } @media (max-width: 640px) { .quote-form { padding: var(--space-4); } }