/* Atlas Shop - Kunden-Gestaltung (Shop, Statusseite). Heller, ruhiger, bildgetragener Auftritt. Das Admin-Panel bleibt bewusst bei der alten "Blueprint"-Optik (style-admin.css) - hier geht es um Vertrauen und Präsentation für Kund:innen, nicht um Werkzeug-Dichte. */ @font-face { font-family: 'Space Grotesk'; font-weight: 500 700; font-style: normal; font-display: swap; src: url('/fonts/spacegrotesk-var.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/mono400.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-style: normal; font-display: swap; src: url('/fonts/mono500.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Sans'; font-weight: 400 600; font-style: normal; font-display: swap; src: url('/fonts/plexsans.woff2') format('woff2'); } :root { --bg: #fafaf8; --bg-raised: #ffffff; --bg-sunken: #f2f0eb; --ink: #17181a; --ink-dim: #6e7075; --line: #e8e6e0; --line-strong: #d7d4cb; --accent: #c1531b; --on-accent: #ffffff; --ok: #1f7a5c; --ok-bg: rgba(31, 122, 92, 0.1); --warn: #a6740e; --warn-bg: rgba(166, 116, 14, 0.12); --bad: #b23a2c; --bad-bg: rgba(178, 58, 44, 0.1); --display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif; --body: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace; } /* Dunkles Farbschema: greift automatisch nach Systemeinstellung, außer die Person hat über den Umschalter oben rechts explizit "hell" gewählt (dann sitzt data-theme="light" auf und gewinnt gegen die Media Query). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #121211; --bg-raised: #1c1c1a; --bg-sunken: #232220; --ink: #f1efea; --ink-dim: #a3a099; --line: #2e2c29; --line-strong: #403d38; --accent: #e27c3f; --on-accent: #191008; --ok: #5fb39a; --ok-bg: rgba(95, 179, 154, 0.14); --warn: #d8a441; --warn-bg: rgba(216, 164, 65, 0.14); --bad: #e0796a; --bad-bg: rgba(224, 121, 106, 0.14); } } /* Gleiche dunkle Palette, aber erzwungen über den Umschalter - unabhängig vom Systemschema (deckt auch "System ist hell, Person will dunkel" ab). */ :root[data-theme="dark"] { --bg: #121211; --bg-raised: #1c1c1a; --bg-sunken: #232220; --ink: #f1efea; --ink-dim: #a3a099; --line: #2e2c29; --line-strong: #403d38; --accent: #e27c3f; --on-accent: #191008; --ok: #5fb39a; --ok-bg: rgba(95, 179, 154, 0.14); --warn: #d8a441; --warn-bg: rgba(216, 164, 65, 0.14); --bad: #e0796a; --bad-bg: rgba(224, 121, 106, 0.14); } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--display); font-weight: 700; margin: 0; text-wrap: balance; letter-spacing: -0.015em; } p { margin: 0; } a { color: var(--accent); } .wrap { max-width: 1120px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); } .narrow { max-width: 680px; } /* --- Kopfzeile --- */ .topbar { border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 20; } .topbar-row { max-width: 1120px; margin: 0 auto; padding: 16px clamp(20px, 4vw, 48px); display: flex; align-items: center; justify-content: space-between; gap: 20px; } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); } .brand-name { font-family: var(--display); font-weight: 700; font-size: 1.02rem; letter-spacing: 0.01em; white-space: nowrap; } .brand-tag { display: block; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-dim); } .topbar nav { display: flex; gap: 24px; align-items: center; } .topbar nav a { color: var(--ink-dim); text-decoration: none; font-size: 0.92rem; font-weight: 500; } .theme-toggle { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--bg-raised); color: var(--ink); font-size: 1rem; line-height: 1; cursor: pointer; padding: 0; } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); } .topbar nav a:hover { color: var(--accent); } /* --- Abschnitte --- Bewusst ohne Trennlinien zwischen den Abschnitten - passt besser zum "heller, ruhiger" Anspruch oben als harte Regeln, und Hero/USP/Gründer-Notiz sollen ohnehin als ein zusammenhängender Einstieg wirken, nicht als einzelne, hart geschnittene Kapitel. Trennung entsteht rein über Abstand und gelegentlich über --bg-sunken (z.B. die Gründer-Notiz). */ .section { padding: clamp(48px, 7vw, 96px) 0; } /* Hero → USP-Kacheln → Gründer-Notiz gehören zusammen und bekommen absichtlich engere Abstände als die übrigen Kapitel (Werkstatt/Katalog/Bestellen), die den vollen Abschnittsabstand behalten. */ #usp, #founder { padding-top: clamp(8px, 1.5vw, 20px); } #usp { padding-bottom: clamp(8px, 1.5vw, 20px); } .sheet-index { margin-bottom: 28px; } .sheet-index .num { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-dim); } .sheet-index .rule { display: none; } .eyebrow { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; color: var(--accent); } .lede { color: var(--ink-dim); margin-top: 14px; max-width: 58ch; font-size: 1.05rem; } /* --- Buttons --- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--body); font-weight: 600; font-size: 0.94rem; padding: 12px 22px; border-radius: 8px; border: 1px solid transparent; text-decoration: none; cursor: pointer; transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .btn:disabled { opacity: 0.45; cursor: not-allowed; } .btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); } .btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--accent) 55%, transparent); } .btn-ghost { background: var(--bg-raised); color: var(--ink); border-color: var(--line-strong); } .btn-ghost:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); } .btn-sm { padding: 7px 14px; font-size: 0.84rem; border-radius: 6px; } /* --- Karten und Panels --- */ .panel { background: var(--bg-raised); border: 1px solid var(--line); border-radius: 14px; padding: clamp(22px, 3vw, 30px); box-shadow: 0 1px 3px rgba(20, 15, 10, 0.04); } /* --- Gründer-Notiz --------------------------------------------------------- Bewusster Bruch mit dem sonstigen "Sie" der Seite (siehe index.html) - ein eigener Ton statt eines eingefärbten .panel, damit der Wechsel als Absicht statt als Inkonsistenz wirkt: Byline mit Monogramm statt Fließtext-Wand, der LinkedIn-Link als greifbarer Chip statt unauffälliger Inline-Link. */ .founder-note { display: flex; gap: 20px; align-items: flex-start; background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 18px; padding: clamp(20px, 3vw, 28px); } .founder-avatar { flex-shrink: 0; width: 50px; height: 50px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em; } .founder-byline { display: flex; align-items: baseline; gap: 9px; margin-bottom: 8px; flex-wrap: wrap; } .founder-byline .name { font-family: var(--display); font-weight: 700; font-size: 1.08rem; } .founder-byline .role { font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-dim); } .founder-note p { font-size: 0.95rem; line-height: 1.62; color: var(--ink); margin: 0 0 12px; } .founder-note p:last-child { margin-bottom: 0; } .founder-link { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 0.8rem; font-weight: 600; color: var(--accent); text-decoration: none; border: 1px solid var(--line-strong); border-radius: 99px; padding: 6px 14px 6px 9px; transition: border-color 0.15s ease, background-color 0.15s ease; } .founder-link:hover { border-color: var(--accent); background: var(--bg-raised); } .founder-link svg { width: 15px; height: 15px; } @media (max-width: 520px) { .founder-note { flex-direction: column; } } .founder-social { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .founder-social-label { font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-dim); } .founder-social .social-icon { width: 36px; height: 36px; border: 1px solid var(--line-strong); } .founder-social .social-icon svg { width: 17px; height: 17px; } /* --- Hero --- */ /* --- Showcase / fertiges Beispielteil (Robo) - jetzt im Hero verwendet --- */ .showcase-card { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 9 / 16; max-width: 280px; margin: 0 auto; background: linear-gradient(155deg, #20201d 0%, #141412 100%); border: 1px solid var(--line); box-shadow: 0 20px 50px -20px rgba(20, 15, 10, 0.18); } .showcase-card video { display: block; width: 100%; height: 100%; object-fit: cover; } .showcase-badge { position: absolute; top: 12px; left: 12px; z-index: 1; background: rgba(255, 255, 255, 0.16); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* --- Werkstatt / Zeitraffer --- */ .werkstatt-card { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 9; background: linear-gradient(155deg, #20201d 0%, #141412 100%); display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); } .werkstatt-card video { width: 100%; height: 100%; object-fit: cover; display: block; } .werkstatt-placeholder { display: flex; flex-direction: column; align-items: center; gap: 14px; color: #f1efea; text-align: center; padding: 20px; } .werkstatt-placeholder .play-ring { width: 62px; height: 62px; border-radius: 50%; border: 1.5px solid rgba(241, 239, 234, 0.35); display: flex; align-items: center; justify-content: center; } .werkstatt-placeholder .play-ring svg { margin-left: 3px; } .werkstatt-placeholder .label { font-family: var(--display); font-weight: 600; font-size: 1.05rem; } .werkstatt-placeholder .sub { font-size: 0.85rem; color: rgba(241, 239, 234, 0.6); max-width: 34ch; } /* --- Produktraster --- */ .products { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 20px; margin-top: 32px; } .product { background: var(--bg-raised); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; padding: 22px; display: flex; flex-direction: column; gap: 10px; transition: box-shadow 0.18s ease, transform 0.18s ease; } .product:hover { box-shadow: 0 16px 32px -18px rgba(20, 15, 10, 0.22); transform: translateY(-2px); } .product-image { margin: -22px -22px 4px; aspect-ratio: 4 / 3; background: var(--bg-sunken); overflow: hidden; position: relative; } .product-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .product-image-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--ink-dim); font-size: 0.8rem; background: repeating-linear-gradient(135deg, var(--line) 0 1px, transparent 1px 12px); } .product-image-3d { cursor: pointer; } .product-image-3d:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .turntable-badge { position: absolute; bottom: 12px; left: 12px; display: inline-flex; align-items: center; gap: 4px; background: var(--bg-raised); color: var(--ink); font-size: 0.7rem; font-weight: 600; padding: 4px 10px; border-radius: 99px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); pointer-events: none; } .turntable-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(10, 8, 6, 0.72); } .turntable-modal[hidden] { display: none; } .turntable-modal-panel { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 100%; max-height: 100%; } .turntable-modal-inner { position: relative; /* Breite/Seitenverhältnis werden nach dem Laden per JS an die tatsächliche Bildauflösung der jeweiligen Farbvariante angepasst (sizeTurntableModal in index.html) - der Default hier greift nur kurz, bis die erste Datei geladen hat. */ width: min(640px, 90vw); aspect-ratio: 4 / 3; max-height: 80vh; background: #000; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55); } .turntable-modal-inner iframe { width: 100%; height: 100%; border: 0; display: block; } .turntable-modal-colors { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; } .turntable-color-btn { padding: 6px 16px; border-radius: 99px; border: 1px solid var(--line-strong); background: var(--bg-raised); color: var(--ink); font-size: 0.82rem; font-weight: 500; cursor: pointer; } .turntable-color-btn:hover { border-color: var(--accent); } .turntable-color-btn.active { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--bg-raised)); } .turntable-modal-close { position: absolute; top: 10px; right: 10px; z-index: 1; width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 0.95rem; line-height: 1; cursor: pointer; } .turntable-modal-close:hover { background: rgba(0, 0, 0, 0.75); } .soon-badge { position: absolute; top: 12px; right: 12px; background: var(--bg-raised); color: var(--ink); font-size: 0.7rem; font-weight: 600; padding: 4px 10px; border-radius: 99px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); } .product-soon .price { color: var(--ink-dim); } .product-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .product h3 { font-size: 1.08rem; font-weight: 600; } .product .price { font-family: var(--mono); font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; } .product .tagline { color: var(--accent); font-size: 0.86rem; font-weight: 500; } .product .desc { color: var(--ink-dim); font-size: 0.92rem; flex: 1; } .product-specs { display: flex; flex-wrap: wrap; gap: 6px 14px; font-family: var(--mono); font-size: 0.72rem; color: var(--ink-dim); border-top: 1px solid var(--line); padding-top: 12px; } .product-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } /* --- "Benachrichtige mich" (inaktive Produkte) ---------------------------- Ersetzt den deaktivierten Button - eigenes, kompaktes Pill-Feld statt Eingabefeld + Textbutton nebeneinander, die in der schmalen Produktkarte sonst schnell umbrechen. Icon-Button statt Beschriftung spart Breite, das Label darüber trägt den eigentlichen Text. */ .interest-label { font-size: 0.76rem; color: var(--ink-dim); margin-bottom: 6px; } .interest-form { display: flex; width: 100%; border: 1px solid var(--line-strong); border-radius: 99px; overflow: hidden; background: var(--bg-raised); transition: border-color 0.15s ease; } .interest-form:focus-within { border-color: var(--accent); } .interest-form input { flex: 1; min-width: 0; border: none; border-radius: 0; background: transparent; padding: 8px 4px 8px 14px; } .interest-form input:focus { outline: none; } .interest-form button { flex-shrink: 0; width: 36px; height: 36px; margin: 2px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: var(--accent); color: var(--on-accent); cursor: pointer; transition: opacity 0.15s ease; } .interest-form button:hover:not(:disabled) { opacity: 0.85; } .interest-form button:disabled { opacity: 0.5; cursor: default; } .interest-form button svg { width: 15px; height: 15px; } .interest-msg { display: flex; align-items: center; gap: 6px; } select, input, textarea { font-family: var(--body); font-size: 0.92rem; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg-raised); color: var(--ink); width: 100%; } select:focus, input:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; } textarea { resize: vertical; min-height: 80px; } label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 6px; } .field { margin-bottom: 16px; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } } /* --- Warenkorb --- */ .cart-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 0.94rem; } .cart-line:last-of-type { border-bottom: none; } .cart-total { display: flex; justify-content: space-between; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-strong); font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums; } .cart-sub { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.86rem; color: var(--ink-dim); font-variant-numeric: tabular-nums; } /* --- Statusanzeigen --- */ .pill { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; padding: 4px 10px; border-radius: 99px; white-space: nowrap; } .pill-neu { background: var(--warn-bg); color: var(--warn); } .pill-bezahlt { background: var(--ok-bg); color: var(--ok); } .pill-in_warteschlange { background: var(--bg-sunken); color: var(--ink-dim); } .pill-im_druck { background: var(--ok-bg); color: var(--ok); } .pill-fertig { background: var(--ok-bg); color: var(--ok); } .pill-versandt { background: var(--bg-sunken); color: var(--ink-dim); } .pill-storniert { background: var(--bad-bg); color: var(--bad); } .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .dot-live { animation: pulse 1.6s ease-in-out infinite; } @keyframes pulse { 50% { opacity: 0.35; } } @media (prefers-reduced-motion: reduce) { .dot-live { animation: none; } } /* --- Fortschrittsbalken --- */ .progress { height: 6px; background: var(--bg-sunken); border-radius: 99px; overflow: hidden; margin-top: 10px; } .progress > span { display: block; height: 100%; background: var(--accent); transition: width 0.4s ease; } /* --- Tabellen --- */ .table-scroll { overflow-x: auto; } table { width: 100%; border-collapse: collapse; min-width: 640px; } th { text-align: left; font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-dim); font-weight: 600; padding: 0 12px 10px; border-bottom: 1px solid var(--line-strong); } td { padding: 14px 12px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 0.9rem; } tr:last-child td { border-bottom: none; } td.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; } /* --- Meldungen --- */ .msg { padding: 12px 16px; border-radius: 8px; font-size: 0.9rem; margin-bottom: 16px; } .msg-ok { background: var(--ok-bg); color: var(--ok); } .msg-bad { background: var(--bad-bg); color: var(--bad); } .msg-info { background: var(--bg-sunken); color: var(--ink-dim); } .msg-warn { background: var(--warn-bg); color: var(--warn); } /* --- Rechtstexte (Impressum, Datenschutz, Widerruf, AGB) --- */ .legal-text { max-width: 68ch; } .legal-text h2 { font-size: 1.25rem; margin-top: 36px; margin-bottom: 12px; } .legal-text h2:first-of-type { margin-top: 28px; } .legal-text p, .legal-text ul { margin-bottom: 14px; font-size: 0.95rem; } .legal-text ul { padding-left: 20px; } .legal-text address { font-style: normal; } .legal-text .placeholder { color: var(--warn); font-weight: 600; } .hidden { display: none !important; } /* --- Fußzeile --- */ footer { border-top: 1px solid var(--line); margin-top: 40px; } .footer-row { max-width: 1120px; margin: 0 auto; padding: 22px clamp(20px, 4vw, 48px); display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between; align-items: center; font-size: 0.82rem; color: var(--ink-dim); } .social-links { display: flex; gap: 10px; align-items: center; } .social-icon { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; color: var(--ink-dim); } .social-icon:hover { color: var(--accent); background: var(--bg-sunken); } .social-icon svg { width: 16px; height: 16px; } /* ── Kunden-Chat (FINN) ─────────────────────────────────────────────────── */ /* Bewusst als aufklappbare Ecke statt als Vollbild-Overlay: der Katalog ist die Hauptsache, der Assistent hilft nur nach. */ #finnToggle { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px; cursor: pointer; background: var(--accent); color: var(--on-accent); border: 1px solid var(--line-strong); font: inherit; font-weight: 600; box-shadow: 0 6px 24px rgba(0, 0, 0, .28); } #finnToggle:hover { filter: brightness(1.08); } #finnPanel { position: fixed; right: 20px; bottom: 84px; z-index: 60; width: min(380px, calc(100vw - 40px)); max-height: min(560px, calc(100vh - 140px)); display: flex; flex-direction: column; background: var(--bg-raised); border: 1px solid var(--line-strong); border-radius: 16px; overflow: hidden; box-shadow: 0 12px 40px rgba(0, 0, 0, .35); } #finnPanel[hidden] { display: none; } .finn-head { padding: 12px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; } .finn-head strong { font-size: .95rem; } .finn-head small { color: var(--ink-dim); display: block; font-size: .75rem; } .finn-log { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; } .finn-msg { max-width: 88%; padding: 9px 12px; border-radius: 12px; font-size: .88rem; line-height: 1.45; white-space: pre-wrap; } .finn-msg.finn { background: var(--bg-sunken); border: 1px solid var(--line); align-self: flex-start; } .finn-msg.me { background: var(--accent); color: var(--on-accent); align-self: flex-end; } .finn-msg.err { background: var(--bad-bg, var(--bg-sunken)); border: 1px solid var(--bad); align-self: flex-start; } .finn-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); } .finn-form input { flex: 1; min-width: 0; } /* --- Beratungsleistungen & Referenzseite ---------------------------------- */ /* Nutzt durchgehend die vorhandenen Tokens und das .panel-Raster aus .products; hier stehen nur die Ergaenzungen, die es im Warenkatalog nicht gab. */ .service-card { display: flex; flex-direction: column; } .service-name { font-family: var(--display); font-weight: 700; font-size: 1.12rem; line-height: 1.25; margin: 0 0 6px; } .service-tagline { font-size: 0.92rem; color: var(--accent); margin: 0 0 12px; font-weight: 500; } .service-outcomes { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 7px; } .service-outcomes li { position: relative; padding-left: 20px; font-size: 0.88rem; color: var(--ink-dim); line-height: 1.45; } /* Haken statt Aufzaehlungspunkt: Es sind Ergebnisse, keine Merkmale. */ .service-outcomes li::before { content: ""; position: absolute; left: 2px; top: 0.5em; width: 8px; height: 4px; border-left: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); transform: rotate(-45deg); } .service-proof, .service-goodfor { font-size: 0.85rem; color: var(--ink-dim); line-height: 1.5; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); } .service-goodfor { border-top: none; padding-top: 0; margin-top: 8px; } .service-proof .eyebrow, .service-goodfor .eyebrow { display: block; margin-bottom: 3px; } .service-preis { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line-strong); font-size: 0.9rem; display: flex; flex-wrap: wrap; gap: 4px 14px; } .service-preis strong { font-family: var(--mono); font-weight: 600; } /* Ohne Preisfreigabe steht hier ein Satz statt einer Zahl - bewusst ruhiger, damit die Karte nicht wie ein unvollstaendiges Angebot wirkt. */ .service-preis-offen { color: var(--ink-dim); font-style: italic; display: block; } .service-card .product-actions { margin-top: auto; padding-top: 18px; } /* --- Ablauf auf /technik --------------------------------------------------- */ .tech-ablauf { list-style: none; counter-reset: none; padding: 0; margin: 26px 0 0; display: grid; gap: 2px; } .tech-schritt { border-left: 2px solid var(--line-strong); padding: 16px 0 18px 22px; position: relative; } .tech-schritt::before { content: ""; position: absolute; left: -5px; top: 22px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } .tech-schritt:last-child { border-left-color: transparent; } .tech-schritt-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; } .tech-schritt-kopf .num { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-dim); } .tech-schritt-kopf strong { font-family: var(--display); font-size: 1.02rem; } .tech-schritt .desc { margin: 0; } @media (max-width: 760px) { #printerPanel { grid-template-columns: 1fr !important; } #werkstatt-hinweis .panel { grid-template-columns: 1fr !important; } } /* --- Hero mit Video ------------------------------------------------------- */ .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 4vw, 56px); align-items: center; } .hero-video { border-radius: 14px; overflow: hidden; border: 1px solid var(--line-strong); background: var(--bg-sunken); /* Feste Proportion, damit beim Laden nichts springt. */ aspect-ratio: 4 / 3; } .hero-video video { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } .hero-video { aspect-ratio: 16 / 9; } } /* Wer Bewegung reduziert haben will, bekommt das Standbild. */ @media (prefers-reduced-motion: reduce) { .hero-video video { animation: none; } } /* --- Fallstudien auf /systeme --------------------------------------------- */ /* Einspaltig statt im Kartenraster: Die Texte sind laenger als Produktkarten, und nebeneinander wuerde jede Spalte zu schmal zum Lesen. */ .fallstudien { grid-template-columns: 1fr; gap: 18px; } .fallstudie { max-width: 78ch; } .fallstudie .service-outcomes li { font-size: 0.9rem; } /* --- Referenzprojekt-Block mit Zeitraffer --------------------------------- */ .werkstatt-grid { display: grid; grid-template-columns: 1fr 0.85fr; gap: clamp(22px, 3vw, 40px); align-items: center; } .werkstatt-video { border-radius: 12px; overflow: hidden; border: 1px solid var(--line-strong); background: var(--bg-sunken); aspect-ratio: 16 / 9; } .werkstatt-video video { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 820px) { .werkstatt-grid { grid-template-columns: 1fr; } } /* --- Zwei Preiswege je Leistung ------------------------------------------- */ .service-preis-wege { display: grid; gap: 12px; border-top: 1px solid var(--line-strong); padding-top: 14px; margin-top: 16px; } .preis-weg { display: grid; gap: 2px; } .preis-weg-name { font-family: var(--display); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.02em; color: var(--accent); } .preis-weg-betrag { font-size: 0.9rem; } .preis-weg-betrag strong { font-family: var(--mono); font-weight: 600; } .preis-weg-note { font-size: 0.8rem; color: var(--ink-dim); line-height: 1.45; } /* --- Kundenstimmen -------------------------------------------------------- */ .stimme { display: flex; flex-direction: column; gap: 14px; margin: 0; } .stimme blockquote { margin: 0; font-size: 1.02rem; line-height: 1.55; /* Typografische Anfuehrungszeichen kommen aus dem CSS, nicht aus den Daten - so muss niemand beim Eintragen daran denken. */ quotes: "\201E" "\201C"; } .stimme blockquote::before { content: open-quote; } .stimme blockquote::after { content: close-quote; } .stimme figcaption { font-size: 0.85rem; color: var(--ink-dim); padding-top: 12px; border-top: 1px solid var(--line); margin-top: auto; } /* --- Häufige Fragen ------------------------------------------------------- */ .faq-liste { margin-top: 26px; border-top: 1px solid var(--line); } .faq-eintrag { border-bottom: 1px solid var(--line); } .faq-eintrag summary { cursor: pointer; padding: 16px 34px 16px 0; font-family: var(--display); font-weight: 600; font-size: 1rem; line-height: 1.4; position: relative; list-style: none; } .faq-eintrag summary::-webkit-details-marker { display: none; } /* Eigenes Zeichen statt des Browser-Dreiecks, damit es zum Rest passt. */ .faq-eintrag summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: 1.2rem; color: var(--accent); transition: transform 0.15s ease; } .faq-eintrag[open] summary::after { content: "\2212"; } .faq-eintrag summary:hover { color: var(--accent); } .faq-eintrag summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .faq-antwort { padding: 0 34px 18px 0; } .faq-antwort p { margin: 0; color: var(--ink-dim); font-size: 0.94rem; line-height: 1.65; max-width: 62ch; } @media (prefers-reduced-motion: reduce) { .faq-eintrag summary::after { transition: none; } } /* --- Ablauf in vier Schritten --------------------------------------------- */ .ablauf-liste { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 4px; } .ablauf-liste li { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; padding: 18px 0; border-top: 1px solid var(--line); } .ablauf-liste li:last-child { border-bottom: 1px solid var(--line); } .ablauf-num { font-family: var(--mono); font-size: 0.8rem; color: var(--accent); padding-top: 3px; } .ablauf-liste strong { font-family: var(--display); font-size: 1.02rem; display: block; margin-bottom: 4px; } .ablauf-liste .desc { margin: 0; max-width: 64ch; } /* --- Direkte Kontaktwege -------------------------------------------------- */ .kontakt-wege { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; } .kontakt-weg { display: grid; gap: 1px; padding: 12px 18px; border: 1px solid var(--line-strong); border-radius: 10px; text-decoration: none; color: inherit; background: var(--bg-raised); } .kontakt-weg:hover { border-color: var(--accent); } .kontakt-art { font-size: 0.75rem; color: var(--ink-dim); letter-spacing: 0.04em; text-transform: uppercase; } .kontakt-wert { font-family: var(--mono); font-size: 0.95rem; } .kontakt-hinweis { font-size: 0.82rem; color: var(--ink-dim); margin: 10px 0 0; } /* --- Kompakte Leistungskarten (29.08.2026) -------------------------------- Die ganze Karte ist ein . Ohne diese Regeln erbt sie die Linkfarbe und die Unterstreichung und saehe aus wie ein Textlink in Kastenform. */ a.service-card { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; transition: border-color 0.15s ease, transform 0.15s ease; } a.service-card:hover { border-color: var(--line-strong); transform: translateY(-2px); } a.service-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .service-mehr { margin-top: auto; padding-top: 14px; font-size: 0.85rem; font-weight: 500; color: var(--accent); } @media (prefers-reduced-motion: reduce) { a.service-card { transition: none; } a.service-card:hover { transform: none; } } /* Fuenf kurze Karten sollen in einer Reihe stehen. Das Standardraster der Shop-Produkte (min. 290px) laesst dafuer nur drei zu und bricht 3+2 um. */ .products-kompakt { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 14px; } .products-kompakt .service-card { padding: 18px 16px; } .products-kompakt .service-name { font-size: 1rem; } .products-kompakt .service-tagline { font-size: 0.84rem; line-height: 1.45; margin-bottom: 0; } /* --- "Zwei Wege": Text neben die Karten (29.08.2026) ---------------------- Vorher stand alles untereinander - Überschrift, Einleitung, Kartenreihe, Empfehlung - jeweils über die volle Breite. Die Textblöcke sind auf gut 60 Zeichen begrenzt, also blieb rechts daneben viel Leere, während die Sektion in die Höhe lief. Jetzt trägt die linke Spalte den Text, die rechte die beiden Karten; die Sektionshöhe richtet sich nach der längeren Spalte statt nach der Summe. */ .modelle-grid { display: grid; grid-template-columns: minmax(260px, 0.85fr) 1.6fr; gap: 40px; align-items: start; } .modelle-text > * { max-width: 46ch; } .modelle-text h2 { margin-top: 0; } .modelle-text .desc { margin-top: 18px; } .modelle-karten { margin-top: 0; } @media (max-width: 900px) { /* Einspaltig: erst der Text, dann die Karten - die Empfehlung rahmt die Auswahl, bevor man sie sieht, das liest sich auch so richtig herum. */ .modelle-grid { grid-template-columns: 1fr; gap: 28px; } .modelle-text > * { max-width: 62ch; } } /* --- Responsive-Korrekturen (29.08.2026) ---------------------------------- */ /* Sicherheitsnetz: Kein eingebettetes Medium darf breiter werden als sein Container. Fehlte bisher global - die vorhandene Regel galt nur dem Turntable-Fenster. */ img, video, iframe { max-width: 100%; } /* Das Produktraster forderte Spalten von mindestens 290px. Bei 320px Gerätebreite bleiben nach dem Innenabstand nur 280px übrig, die Seite lief also seitlich über. min() lässt die Spalte auf die Containerbreite schrumpfen, ohne auf breiten Schirmen etwas zu ändern. */ .products { grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); } /* Die Kopfzeile hatte zwei Navigationseinträge, inzwischen sind es vier (bzw. drei im Shop, mit langen Beschriftungen). Ohne Umbruch schob das die ganze Seite auf dem Telefon zur Seite. Bewusst als Umbruch statt als Klappmenü: kein JavaScript, alles bleibt sichtbar und mit der Tastatur erreichbar. */ .topbar-row { flex-wrap: wrap; row-gap: 10px; } .topbar nav { flex-wrap: wrap; } @media (max-width: 700px) { .topbar-row { padding-top: 12px; padding-bottom: 12px; } .topbar nav { gap: 16px; width: 100%; justify-content: flex-start; } .topbar nav a { font-size: 0.86rem; } /* Der Umschalter rutscht ans Ende der Zeile statt eine eigene zu belegen. */ .topbar nav .theme-toggle { margin-left: auto; } } /* Tabellen (nur im Admin-Bereich) haben min-width: 640px. Auf dem Telefon - und das Panel ist als App installierbar - muss dafür der Container scrollen, nicht die Seite. */ .table-scroll, .panel > table { display: block; overflow-x: auto; } /* Die Bildmarke steht seit dem 29.08.2026 inline im Markup statt als . Nur so erbt sie über currentColor die Textfarbe und dreht damit im Dunkelmodus mit - als PNG war sie dort fast unsichtbar (#17181A auf #121211). Der Punkt nimmt die Akzentfarbe des jeweiligen Themas. */ .brand-mark { display: block; flex: none; height: 24px; width: auto; }