/* ===================================================================== FINFLUENT – Landingpage · styles.css --------------------------------------------------------------------- Schlanke Zusatz-Styles. Das meiste Layout/Spacing macht Tailwind (siehe index.html ). Hier liegen nur: 1) Design-Tokens als CSS-Variablen (zentrale Farb-Wahrheit) 2) Die Finfluent-„Signatur"-Utilities (Glow-Border, Etched-Ring) 3) Kleine UI-Details (Akkordeon, Modal, Cookie-Banner, Motion) Quelle der Farben/Effekte: FPA_Model/frontend/app/globals.css Stil: „Light, messerscharf" – Hierarchie über Hairline-Borders, Schatten nur auf schwebenden Ebenen (Modal/Popover). ===================================================================== */ /* --------------------------------------------------------------------- 0) SCHRIFTEN – lokal gehostet (kein Google-Fonts-CDN, DSGVO-freundlich) Variable Fonts: eine Datei pro Subset deckt alle Schnitte (100–900) ab. Dateien liegen in assets/fonts/. „latin" = Standard inkl. deutscher Umlaute (ä ö ü ß) und €; „latin-ext" für weitere europäische Zeichen. --------------------------------------------------------------------- */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('assets/fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('assets/fonts/inter-latinext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('assets/fonts/intertight-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('assets/fonts/intertight-latinext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* --------------------------------------------------------------------- 1) DESIGN-TOKENS (zentrale Farb-Wahrheit) Wenn du eine Farbe ändern willst: HIER und im tailwind.config-Block in index.html anpassen. System „Clean Surfaces": Hauptseiten + Panels = reines Weiß, Sunken/Inset-Flächen = #f7f8f8, Trennung über feine Hairlines + präzise, mehrschichtige Schatten (statt Glow-Ränder). Akzent: Buttons = Ink (schwarz), Links/Icons = Steel Blue, Cyan nur Deko. Steel-Blue-Ramp gemäß FPA_Model/frontend/DESIGN.md (verbindlicher Token-Vertrag des Produkts — Landingpage folgt dem Produkt-Design). --------------------------------------------------------------------- */ :root { --background: #ffffff; /* Seiten-/Section-Hintergrund (reines Weiß) */ --foreground: #15181b; /* Ink – Primärtext */ --card: #ffffff; /* Panels/Karten */ --surface-2: #f7f8f8; /* Sunken/Board/Inset Off-White */ --muted-foreground: #5b6571; /* Sekundärtext */ /* Hairlines (Borders über Transparenz, damit sie auf jeder Fläche passen) */ --hairline: rgba(0, 0, 0, 0.05); /* Standard-Hairline 1px */ --hairline-strong: rgba(0, 0, 0, 0.08); /* Inputs, Modal-Kanten */ /* Akzent-Ramp = Steel Blue (AA-lesbar auf Weiß). Token heißt weiter „brand". */ --brand: #33648f; /* Links/aktiv/Icons (Steel Blue) */ --brand-strong: #2c5577; /* Hover/Pressed */ --brand-emphasis: #4682b4; /* Fills, Fokus-Ring (Steel Blue hell) */ --brand-subtle: #eaf1f8; /* Chip-/Auswahl-Hintergrund */ /* Ink-Buttons */ --ink: #15181b; /* Primär-Button-Fläche */ --ink-hover: #2a2e33; /* Button-Hover */ --cyan: #7df9ff; /* NUR dekorativ: Orb-Aura, Logo-Punkt */ --ring: #4682b4; /* Fokus-Ring = Steel Blue (sichtbar) */ --radius: 0.375rem; /* 6px */ } /* --------------------------------------------------------------------- 2) BASIS --------------------------------------------------------------------- */ html { scroll-behavior: smooth; } /* sanftes Anker-Scrollen */ body { background-color: var(--background); color: var(--foreground); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Headings: kompaktes Tracking wie im Design-System */ h1, h2, h3, h4 { letter-spacing: -0.02em; } /* Zahlen immer tabellarisch ausrichten */ .tabular-nums { font-variant-numeric: tabular-nums; } /* Sichtbarer, markentreuer Fokus-Ring für Tastatur-Navigation (A11y) */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 4px; } /* Anker-Sprünge nicht unter den Sticky-Header springen lassen */ [id] { scroll-margin-top: 5rem; } /* --------------------------------------------------------------------- 3) PRÄZISE, MEHRSCHICHTIGE SCHATTEN (ersetzen den früheren Glow-Rand) Zwei Lagen: ein harter, extrem dünner Kontaktschatten + ein extrem weicher, weit gestreuter Umgebungsschatten. Karten/Panels liegen damit sauber „schwebend" auf der weißen Fläche. --------------------------------------------------------------------- */ .shadow-precise { box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), /* harter, dünner Kontaktschatten */ 0px 8px 24px rgba(0, 0, 0, 0.03); /* weicher, weit gestreuter Umgebungsschatten */ } /* Dezente Vertiefung beim Hovern (für interaktive Karten) */ .shadow-precise-hover { transition: box-shadow 0.2s ease, transform 0.2s ease; } .shadow-precise-hover:hover { box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.06), 0px 12px 32px rgba(0, 0, 0, 0.05); } /* Etched-Ring: feine gravierte Kante (Chips, Schritt-Nummern) – jetzt Hairline */ .ring-etched { box-shadow: 0 0 0 1px var(--hairline), inset 0 1px 0 rgba(255, 255, 255, 0.9); } /* Dünner Cyan-Akzent für hervorgehobene Panels (statt Glow-Rand). Linke Kante in Cyan-Teal als ruhiger Marken-Akzent. */ .accent-edge { border-left: 2px solid var(--brand-emphasis); } /* Ablauf-Rail (CFO OS): Connector-Linie überbrückt die Spalten-Lücke und wird am Ende jeder 3er-Reihe ausgeblendet. Nur ab lg sichtbar. */ @media (min-width: 1024px) { .flow-line { margin-right: -2rem; } /* = gap-x-8, überbrückt die Lücke */ .flow-item:nth-child(3n) .flow-line { display: none; } } /* Testimonial: weicher Cyan-Verlauf, der von der rechten Bildschirmseite hereinleuchtet. */ .testimonial-glow { position: absolute; inset: 0; pointer-events: none; /* dezenter Cyan-Blob am rechten Rand, läuft nach oben, unten & links vollständig zu transparent aus (keine harten Kanten an den Sektionsrändern) */ background: radial-gradient(46% 55% at 100% 50%, rgba(125, 249, 255, 0.30), rgba(125, 249, 255, 0) 65%); } /* Bild rahmenlos, untere Kante verblasst weich zum Sektions-Hintergrund. Genutzt für das About-Foto und die App-Screenshots im Vergleichsbereich. */ .fade-bottom { -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%); mask-image: linear-gradient(to bottom, #000 70%, transparent 100%); } /* ===================================================================== 3c) KREIS-MOTIV: .orb-mini + CFO-OS-ORBIT .orb-mini = kleiner schwarzer Kreis mit Cyan-Schatten (wiederverwendbar: Orbit-Satelliten + Timeline-Tag-Nodes). Zahl/Text weiß, zentriert. ===================================================================== */ .orb-mini { width: 64px; height: 64px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #000; color: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 12px 30px -10px rgba(0, 0, 0, 0.45), 0 0 38px -4px rgba(125, 249, 255, 0.55); /* Cyan-Schatten */ transition: transform 0.25s ease, box-shadow 0.25s ease; } /* --- Orbit (CFO Operating System) --- */ /* Mobile-first: lesbare vertikale Liste (Kreis + Titel + Beschreibung). */ .orbit { display: grid; gap: 1.5rem; } .orbit-hub { display: none; } /* Zentrum nur im Desktop-Orbit */ .orbit-sat { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: center; } .orbit-sat .orb-mini { grid-row: 1 / 3; } .sat-title { grid-column: 2; align-self: end; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.8rem; color: var(--foreground); } .sat-tip { grid-column: 2; align-self: start; margin-top: 0.15rem; font-size: 0.875rem; color: var(--muted-foreground); } /* Desktop-Orbit: Hub zentral, 6 Satelliten ringsum (Radius 235px). */ @media (min-width: 1024px) { .orbit { position: relative; display: block; height: 640px; } /* dezenter Orbit-Ring hinter den Satelliten */ .orbit::before { content: ""; position: absolute; left: 50%; top: 50%; width: 470px; height: 470px; transform: translate(-50%, -50%); border: 1px dashed var(--hairline-strong); border-radius: 50%; pointer-events: none; } .orbit-hub { display: flex; align-items: center; justify-content: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: clamp(150px, 18vw, 176px); height: clamp(150px, 18vw, 176px); border-radius: 50%; background: radial-gradient(120% 120% at 35% 25%, #b9fcff, #7df9ff 70%); box-shadow: 0 0 0 1px rgba(125, 249, 255, 0.6), 0 18px 50px -14px rgba(125, 249, 255, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.6); color: var(--foreground); font-weight: 800; letter-spacing: -0.01em; font-size: 1.25rem; z-index: 2; } .orbit-sat { position: absolute; display: block; width: 104px; transform: translate(-50%, -50%); } .orbit-sat .orb-mini { width: 104px; height: 104px; font-size: 1.35rem; } /* Titel immer sichtbar unter dem Kreis */ .sat-title { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 0.6rem; white-space: nowrap; text-align: center; } /* Beschreibung als Tooltip über dem Kreis (nur bei Hover) */ .sat-tip { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin: 0 0 0.7rem 0; width: 210px; text-align: center; padding: 0.55rem 0.8rem; border-radius: var(--radius); /* weich, randlos, halbtransparent */ background: hsl(0 0% 100% / 0.7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 8px 28px -14px rgba(20, 23, 26, 0.18); opacity: 0; transition: opacity 0.2s ease; pointer-events: none; z-index: 3; } .orbit-sat:hover { z-index: 4; } .orbit-sat:hover .orb-mini { transform: scale(1.14); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 16px 36px -10px rgba(0, 0, 0, 0.5), 0 0 60px 0 rgba(125, 249, 255, 0.85); } .orbit-sat:hover .sat-tip { opacity: 1; } /* 6 Positionen (Winkel −90/−30/30/90/150/210°, R=235, x=203, y=117) */ .sat-1 { left: 50%; top: calc(50% - 235px); } .sat-2 { left: calc(50% + 203px); top: calc(50% - 117px); } .sat-3 { left: calc(50% + 203px); top: calc(50% + 117px); } .sat-4 { left: 50%; top: calc(50% + 235px); } .sat-5 { left: calc(50% - 203px); top: calc(50% + 117px); } .sat-6 { left: calc(50% - 203px); top: calc(50% - 117px); } } /* ===================================================================== 3b) INTERAKTIVER ORB (zentrales Hero-Element, Vercel-inspiriert) Schwarzer Kreis, IMMER komplett schwarz. Die „Aura" ist ein variabler, cyanfarbener Schatten, den der Kreis wirft: er wird beim Hovern stärker (--intensity) und verschiebt sich leicht entgegen der Maus (--sx/--sy) – so, als wäre der Mauszeiger die Lichtquelle. app.js: siehe initOrb(). ===================================================================== */ #hero { --intensity: 0.45; /* Ruhe-Grundhelligkeit der Aura (Hero-Hover 0.7, Kreis-Hover 1.1) */ --sx: 0px; /* horizontaler Schatten-Versatz (folgt der Maus) */ --sy: 0px; /* vertikaler Schatten-Versatz */ } .orb { width: clamp(126px, 23vw, 230px); /* nochmals 10% kleiner (255 → 230) */ aspect-ratio: 1; border-radius: 50%; background: #000; /* immer komplett schwarz */ box-shadow: /* Cyan-Aura – größer & intensiver; Blur/Spread/Deckkraft wachsen mit --intensity */ var(--sx) var(--sy) calc(80px + 150px * var(--intensity)) calc(10px + 50px * var(--intensity)) rgba(125, 249, 255, calc(0.8 * var(--intensity))), /* dunkle Erdung darunter */ 0 26px 55px -18px rgba(0, 0, 0, 0.42); transition: box-shadow 0.35s ease, transform 0.35s ease; } /* Klick-Puls: Cyan-Schatten kurz hell aufleuchten + Orb minimal größer */ #hero.is-pulsing .orb { animation: orb-pulse 0.6s ease-out; } @keyframes orb-pulse { 0% { box-shadow: var(--sx) var(--sy) calc(80px + 150px * var(--intensity)) calc(10px + 50px * var(--intensity)) rgba(125, 249, 255, calc(0.8 * var(--intensity))), 0 26px 55px -18px rgba(0, 0, 0, 0.42); transform: scale(1); } 35% { box-shadow: 0 0 280px 100px rgba(125, 249, 255, 1), 0 26px 55px -18px rgba(0, 0, 0, 0.42); transform: scale(1.06); } 100% { box-shadow: var(--sx) var(--sy) calc(80px + 150px * var(--intensity)) calc(10px + 50px * var(--intensity)) rgba(125, 249, 255, calc(0.8 * var(--intensity))), 0 26px 55px -18px rgba(0, 0, 0, 0.42); transform: scale(1); } } /* --------------------------------------------------------------------- 4) FAQ-AKKORDEON --------------------------------------------------------------------- */ .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .faq-item.is-open .faq-answer { max-height: 320px; } /* groß genug für längste Antwort */ .faq-item .faq-icon { transition: transform 0.2s ease; } .faq-item.is-open .faq-icon { transform: rotate(45deg); } /* „+" wird zu „×" */ /* --------------------------------------------------------------------- 5) MODAL (Starter-Kit) + COOKIE-BANNER --------------------------------------------------------------------- */ .modal-overlay { opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; } .modal-overlay.is-open { opacity: 1; visibility: visible; } .modal-panel { transform: translateY(8px) scale(0.99); transition: transform 0.2s ease; } .modal-overlay.is-open .modal-panel { transform: translateY(0) scale(1); } #cookie-banner { transform: translateY(120%); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); } #cookie-banner.is-visible { transform: translateY(0); } /* ===================================================================== 7) FINFLUENT-OS-MOCKUPS (nur finfluent-os.html + Startseiten-Teaser) Handgebaute HTML/CSS-Interface-Mockups im eigenen Namensraum .osm-*, damit nichts mit den bestehenden Klassen kollidiert. Aufbau: .osm-frame – App-Fenster (Fensterleiste + Inhalt) .osm-side – Sidebar mit Modul-Navigation .osm-kpi – KPI-Karte mit Ampel + Delta .osm-table – Finanztabelle (tabellarische Zahlen, Summenzeile) .osm-bar – animierter Fortschritts-/Zielerreichungs-Balken .osm-loop – Decision-Loop (Kreis mit wanderndem Punkt) .osm-excel – Excel-Parodie für die Schmerz-Sektion Alle Animationen laufen rein in CSS und werden über die globale prefers-reduced-motion-Regel (Abschnitt „Motion-Reduktion") deaktiviert. ===================================================================== */ /* --- App-Fenster ----------------------------------------------------- */ .osm-frame { border: 1px solid var(--hairline-strong); border-radius: 0.625rem; background: var(--card); overflow: hidden; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 24px 60px -18px rgba(0, 0, 0, 0.12); font-size: 0.72rem; /* Mockup-Grundgröße – bewusst klein */ line-height: 1.35; color: var(--foreground); text-align: left; } .osm-titlebar { display: flex; align-items: center; gap: 0.45rem; padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--hairline); background: var(--surface-2); } .osm-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(0,0,0,0.12); } .osm-url { margin-left: 0.6rem; padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--card); border: 1px solid var(--hairline); color: var(--muted-foreground); font-size: 0.66rem; } /* --- Fenster-Layout: Sidebar + Hauptbereich -------------------------- */ .osm-body { display: grid; grid-template-columns: 148px 1fr; min-height: 0; } .osm-side { border-right: 1px solid var(--hairline); background: var(--surface-2); padding: 0.7rem 0.55rem; display: flex; flex-direction: column; gap: 0.12rem; } .osm-side-group { margin: 0.55rem 0 0.25rem 0.45rem; font-size: 0.58rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-foreground); } .osm-side-group:first-child { margin-top: 0; } .osm-side-item { padding: 0.28rem 0.45rem; border-radius: 0.3rem; color: var(--muted-foreground); white-space: nowrap; } .osm-side-item.is-active { background: var(--card); color: var(--foreground); font-weight: 600; box-shadow: 0 0 0 1px var(--hairline), 0 1px 2px rgba(0, 0, 0, 0.04); } .osm-main { padding: 0.85rem 0.95rem; min-width: 0; } /* Sidebar auf sehr schmalen Screens ausblenden, Mockup bleibt lesbar */ @media (max-width: 560px) { .osm-body { grid-template-columns: 1fr; } .osm-side { display: none; } } /* --- KPI-Karten ------------------------------------------------------- */ .osm-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.55rem; } .osm-kpi { border: 1px solid var(--hairline); border-radius: 0.45rem; padding: 0.55rem 0.65rem; background: var(--card); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); } .osm-kpi-label { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; font-size: 0.62rem; color: var(--muted-foreground); } .osm-kpi-value { margin-top: 0.15rem; font-family: 'Inter Tight', Inter, sans-serif; font-weight: 700; font-size: 1.02rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .osm-delta { font-size: 0.62rem; font-weight: 600; font-variant-numeric: tabular-nums; } .osm-delta.is-up { color: #047857; } .osm-delta.is-down { color: #be123c; } /* Ampel-Punkt (grün pulsiert dezent) */ .osm-ampel { width: 7px; height: 7px; flex: none; border-radius: 50%; } .osm-ampel.is-green { background: #059669; animation: osm-ampel-pulse 2.6s ease-in-out infinite; } .osm-ampel.is-yellow { background: #d97706; } .osm-ampel.is-red { background: #e11d48; } @keyframes osm-ampel-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.35); } 50% { box-shadow: 0 0 0 4px rgba(5, 150, 105, 0); } } /* Breite Tabellen scrollen innerhalb des Mockups, nie die Seite */ .osm-scroll { overflow-x: auto; min-width: 0; } .osm-frame { min-width: 0; } /* --- Finanztabellen ---------------------------------------------------- */ .osm-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .osm-table th { padding: 0.3rem 0.45rem; font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-foreground); border-bottom: 1px solid var(--hairline-strong); text-align: right; white-space: nowrap; } .osm-table th:first-child, .osm-table td:first-child { text-align: left; } .osm-table td { padding: 0.32rem 0.45rem; border-bottom: 1px solid var(--hairline); text-align: right; white-space: nowrap; color: var(--foreground); } .osm-table .is-muted { color: var(--muted-foreground); } .osm-table .is-indent { padding-left: 1.1rem; } .osm-table tr.is-total td { font-weight: 700; border-top: 1px solid var(--hairline-strong); border-bottom: none; } .osm-table .is-pos { color: #047857; font-weight: 600; } .osm-table .is-neg { color: #be123c; font-weight: 600; } /* --- Karten/Panels im Mockup ------------------------------------------ */ .osm-panel { border: 1px solid var(--hairline); border-radius: 0.45rem; background: var(--card); padding: 0.65rem 0.75rem; } .osm-h { font-family: 'Inter Tight', Inter, sans-serif; font-weight: 700; font-size: 0.82rem; letter-spacing: -0.01em; } .osm-sub { font-size: 0.62rem; color: var(--muted-foreground); } .osm-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.12rem 0.5rem; border-radius: 999px; font-size: 0.6rem; font-weight: 600; background: var(--brand-subtle); color: var(--brand-strong); } .osm-chip.is-neutral { background: var(--surface-2); color: var(--muted-foreground); } /* --- Zielerreichungs-Balken (Decision P&L) ----------------------------- */ .osm-bar { position: relative; height: 7px; border-radius: 999px; background: var(--surface-2); overflow: hidden; } .osm-bar-fill { position: absolute; inset: 0; width: var(--w, 60%); border-radius: 999px; background: var(--brand-emphasis); transform-origin: left center; animation: osm-grow 1.1s cubic-bezier(0.22, 1, 0.36, 1) both; } .osm-bar-fill.is-full { background: #059669; } .osm-bar-fill.is-low { background: #d97706; } @keyframes osm-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* --- Mini-Area-Chart (SVG wird im HTML geliefert, CSS animiert) -------- */ .osm-chart-line { fill: none; stroke: var(--brand-emphasis); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 320; stroke-dashoffset: 320; animation: osm-draw 1.6s ease-out 0.3s forwards; } .osm-chart-line.is-baseline { stroke: var(--muted-foreground); stroke-width: 1.5; stroke-dasharray: 4 4; animation: none; } .osm-chart-fill { fill: var(--brand-subtle); opacity: 0.7; } @keyframes osm-draw { to { stroke-dashoffset: 0; } } /* --- Decision-Loop: Kreis mit vier Stationen + wanderndem Punkt -------- */ .osm-loop { position: relative; width: 100%; max-width: 300px; aspect-ratio: 1; margin: 0 auto; } .osm-loop-ring { position: absolute; inset: 12%; border: 1.5px dashed var(--hairline-strong); border-radius: 50%; } /* Kreisbahn: rotierender Wrapper, der Punkt sitzt oben auf dem Ring */ .osm-loop-orbit { position: absolute; inset: 12%; border-radius: 50%; animation: osm-orbit 9s linear infinite; } .osm-loop-dot { position: absolute; left: calc(50% - 6px); top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--brand-emphasis); box-shadow: 0 0 0 4px var(--brand-subtle); } @keyframes osm-orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .osm-loop-node { position: absolute; transform: translate(-50%, -50%); padding: 0.3rem 0.65rem; border-radius: 999px; background: var(--card); border: 1px solid var(--hairline-strong); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); font-size: 0.66rem; font-weight: 600; white-space: nowrap; z-index: 1; } .osm-loop-node.is-accent { background: var(--ink); color: #fff; border-color: var(--ink); } .osm-loop-node.n1 { left: 50%; top: 12%; } .osm-loop-node.n2 { left: 88%; top: 50%; } .osm-loop-node.n3 { left: 50%; top: 88%; } .osm-loop-node.n4 { left: 12%; top: 50%; } /* --- Modulkette „Alles an einem Ort" (Showcase-Intro) ------------------- */ .osm-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.78rem; } .osm-chain-node { display: inline-flex; align-items: center; padding: 0.35rem 0.8rem; border-radius: 999px; background: var(--card); border: 1px solid var(--hairline-strong); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); font-weight: 600; white-space: nowrap; } .osm-chain-node.is-accent { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), 0 0 24px -6px rgba(125, 249, 255, 0.5); } .osm-chain .sep { color: var(--muted-foreground); } .osm-chain .loopback { color: var(--brand); font-weight: 700; font-size: 1rem; } /* --- Quick-Sim: Fake-Slider (Szenarien-Mockup) -------------------------- */ .osm-sim-row { display: grid; /* feste Spalten, damit die Tracks aller Zeilen gleich lang sind */ grid-template-columns: 84px 1fr 58px; align-items: center; column-gap: 0.6rem; } .osm-sim-row + .osm-sim-row { margin-top: 0.55rem; } .osm-sim-label { font-size: 0.64rem; color: var(--muted-foreground); white-space: nowrap; } .osm-sim-value { font-size: 0.66rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; } .osm-sim-track { position: relative; height: 5px; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--hairline); } .osm-sim-fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w, 50%); border-radius: 999px; background: var(--brand-emphasis); transform-origin: left center; animation: osm-grow 1.1s cubic-bezier(0.22, 1, 0.36, 1) both; } .osm-sim-thumb { position: absolute; left: var(--w, 50%); top: 50%; width: 11px; height: 11px; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; border: 1.5px solid var(--brand-emphasis); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); } /* --- Excel-Parodie (Schmerz-Sektion) ----------------------------------- */ .osm-excel { border: 1px solid var(--hairline-strong); border-radius: 0.45rem; overflow: hidden; font-size: 0.66rem; font-variant-numeric: tabular-nums; background: var(--card); } .osm-excel-formula { display: flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.55rem; border-bottom: 1px solid var(--hairline); background: var(--surface-2); color: var(--muted-foreground); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.6rem; overflow: hidden; white-space: nowrap; min-width: 0; } /* Der (absichtlich überlange) Formeltext wird abgeschnitten statt zu drücken */ .osm-excel-formula-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .osm-excel-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; } .osm-excel-grid > span { padding: 0.3rem 0.55rem; border-bottom: 1px solid var(--hairline); border-right: 1px solid var(--hairline); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; /* erlaubt Schrumpfen in der Grid-Spalte (sonst Overflow auf Mobile) */ } .osm-excel-grid > span:nth-child(3n) { border-right: none; text-align: right; } .osm-excel-grid > span:nth-child(3n-1) { text-align: right; } .osm-excel .is-err { color: #be123c; font-weight: 700; background: rgba(190, 18, 60, 0.06); } /* --- Schmerz-Karten: Datei-Kette --------------------------------------- */ .osm-filechain { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; font-size: 0.66rem; } .osm-file { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.55rem; border-radius: 0.3rem; border: 1px solid var(--hairline-strong); background: var(--surface-2); font-weight: 500; white-space: nowrap; } .osm-filechain .sep { color: var(--muted-foreground); } /* --- „What / So what / Now what"-Strip --------------------------------- */ .osm-step { border: 1px solid var(--hairline); border-radius: 0.5rem; background: var(--surface-2); padding: 1.4rem 1.5rem; } .osm-step.is-accent { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 18px 44px -14px rgba(0, 0, 0, 0.4), 0 0 44px -6px rgba(125, 249, 255, 0.45); } .osm-step.is-accent .osm-step-sub { color: rgba(255, 255, 255, 0.72); } .osm-step-sub { margin-top: 0.45rem; font-size: 0.9rem; color: var(--muted-foreground); } /* --------------------------------------------------------------------- 6) MOTION-REDUKTION (A11y): Animationen für empfindliche Nutzer aus --------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }