/* ========================================================================== SHNY DESIGN SYSTEM v1.0 Gemeinsame Grundlage für SHNY OS, SHNY Detailing und alle künftigen Branchenlösungen. Diese Datei ist die einzige Quelle für Farben, Typografie, Abstände und Komponenten -- siehe SHNY_Designsystem.md für Nutzungsregeln. Rückwärtskompatibel: die Token-Namen (--pink, --ink, --paper, --r-md, ...) entsprechen exakt dem, was bereits in index.html / preise/index.html verwendet wird. Bestehende Seiten können diese Datei per einbinden, ohne dass sich am bestehenden Layout etwas ändert. ========================================================================== */ :root{ /* ---------- 1. FARBEN -------------------------------------------------- */ /* Primärfarben -- die Markenfarben, als Verlauf gedacht, nicht einzeln */ --pink:#FF2594; --violet:#8C33F2; --cyan:#21D9FA; --grad: linear-gradient(135deg,var(--pink),var(--violet),var(--cyan)); --grad-soft: linear-gradient(135deg,var(--pink),var(--violet)); /* Sekundärfarben -- Ink-Skala (dunkle Flächen: Hero, Footer, CTA, Sidebar) */ --ink:#0B0B0E; --ink-surface:#17171C; --ink-raised:#1F1F26; --ink-border:#2A2A32; --ink-text:#F5F5F7; --ink-text-muted:#9C9CA6; --ink-text-faint:#5E5E68; /* Sekundärfarben -- Paper-Skala (helle Flächen: Content, App-Hintergrund) */ --paper:#F7F6F3; --paper-raised:#FFFFFF; --paper-border:#E7E4DE; --text:#111114; --text-muted:#63636C; --text-faint:#96969C; /* Statusfarben -- je eine Text- und eine Hintergrundvariante, hell/dunkel */ --success:#0F9D6B; --success-bg:#E7F7F0; --success-bg-dark:rgba(15,157,107,.16); --warning:#B4740E; --warning-bg:#FBF0DD; --warning-bg-dark:rgba(216,152,34,.16); --danger:#D62C4B; --danger-bg:#FBE9EC; --danger-bg-dark:rgba(214,44,75,.16); --info:#2563C7; --info-bg:#E9F0FC; --info-bg-dark:rgba(37,99,199,.16); /* Hintergrundfarben -- semantische Zuordnung für App-Kontexte */ --bg-page:var(--paper); --bg-page-dark:var(--ink); --bg-sidebar:var(--ink); --bg-app-shell:var(--paper-raised); /* Karten */ --card-bg:var(--paper-raised); --card-bg-dark:var(--ink-raised); --card-border:var(--paper-border); --card-border-dark:var(--ink-border); /* Rahmen (generisch, für Inputs/Trenner außerhalb von Karten) */ --border:var(--paper-border); --border-dark:var(--ink-border); /* Hover -- konsistente Hover-Wirkung statt beliebiger Werte pro Komponente */ --hover-lift:-4px; /* Karten heben sich leicht an */ --hover-overlay-light:rgba(17,17,20,.04); /* dezenter Hover auf hellem Grund */ --hover-overlay-dark:rgba(255,255,255,.06);/* dezenter Hover auf dunklem Grund */ --hover-shadow:0 20px 40px rgba(0,0,0,.06); /* Dark Mode -- SHNY nutzt bewusst KEIN globales Farbschema-Umschalten. Dunkel/Hell ist immer bewusst gewählt: Hero/CTA/Footer/Sidebar sind dauerhaft dunkel (Markenauftritt), Content-Flächen dauerhaft hell (Lesbarkeit, "nicht düster"). Umsetzung über die Utility-Klassen .on-dark / .on-light -- siehe Abschnitt 4. Für ein zukünftiges, echtes App-Dark-Mode (z. B. SHNY OS Dashboard bei Nacht) ist die Struktur vorbereitet: data-theme="dark" auf spiegelt die Paper-Variablen auf die Ink-Variablen (siehe unten), sodass keine einzige Komponente umgeschrieben werden muss, sobald das gebraucht wird. */ --r-sm:10px; --r-md:16px; --r-lg:26px; --r-full:999px; --maxw:1180px; --maxw-narrow:760px; } /* Vorbereitete, noch nicht aktive Umschaltung für Abschnitt "Dark Mode" oben. */ html[data-theme="dark"]{ --bg-page:var(--ink); --card-bg:var(--ink-raised); --card-border:var(--ink-border); --text:var(--ink-text); --text-muted:var(--ink-text-muted); --text-faint:var(--ink-text-faint); --border:var(--ink-border); } /* ---------- 2. TYPOGRAFIE ------------------------------------------------ */ :root{ --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; /* Display -- Hero-Headlines, max. 1x pro Seite */ --fs-display: clamp(2.3rem,6vw,4rem); --lh-display: 1.1; --ls-display: -0.025em; --fw-display: 700; /* Headlines -- Section-Titel (h2) */ --fs-h1: clamp(1.9rem,4.4vw,2.8rem); --fs-h2: clamp(1.7rem,3.6vw,2.4rem); --fs-h3: 1.25rem; --fs-h4: 1rem; --lh-headline: 1.25; --ls-headline: -0.015em; --fw-headline: 700; /* Subheadline -- der erklärende Satz direkt unter einer Headline */ --fs-subheadline: 1.0625rem; /* 17px */ --lh-subheadline: 1.7; --fw-subheadline: 400; /* Body -- Fließtext */ --fs-body-lg: 1rem; /* 16px */ --fs-body: 0.90625rem; /* 14.5px, entspricht bestehenden Karten/Listen */ --fs-body-sm: 0.8125rem; /* 13px */ --lh-body: 1.6; --fw-body: 400; /* Labels -- Eyebrows, Badges, Tabellen-Header, Formular-Labels */ --fs-label: 0.75rem; /* 12px */ --ls-label: 0.1em; --fw-label: 600; /* Buttons */ --fs-button: 0.90625rem; /* 14.5px */ --fw-button: 600; } .text-display{font-family:var(--font-sans);font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--ls-display);font-weight:var(--fw-display);margin:0;} .text-h1{font-size:var(--fs-h1);line-height:var(--lh-headline);letter-spacing:var(--ls-headline);font-weight:var(--fw-headline);margin:0;} .text-h2{font-size:var(--fs-h2);line-height:var(--lh-headline);letter-spacing:var(--ls-headline);font-weight:var(--fw-headline);margin:0;} .text-h3{font-size:var(--fs-h3);line-height:var(--lh-headline);font-weight:var(--fw-headline);margin:0;} .text-h4{font-size:var(--fs-h4);line-height:var(--lh-headline);font-weight:700;margin:0;} .text-subheadline{font-size:var(--fs-subheadline);line-height:var(--lh-subheadline);font-weight:var(--fw-subheadline);color:var(--text-muted);margin:0;} .text-body-lg{font-size:var(--fs-body-lg);line-height:var(--lh-body);margin:0;} .text-body{font-size:var(--fs-body);line-height:var(--lh-body);margin:0;} .text-body-sm{font-size:var(--fs-body-sm);line-height:var(--lh-body);color:var(--text-muted);margin:0;} .text-label{font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;font-weight:var(--fw-label);margin:0;} .eyebrow{font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;font-weight:var(--fw-label);margin:0 0 16px;} .eyebrow.on-dark{color:var(--ink-text-faint);} .eyebrow.on-light{color:var(--text-faint);} .grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;} /* ---------- 3. SPACING / GRID / RADIUS / SHADOWS ------------------------- */ :root{ /* 4px-Basisraster -- jeder Abstand im System ist ein Vielfaches davon */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px; --shadow-sm:0 2px 8px rgba(0,0,0,.05); --shadow-md:0 20px 40px rgba(0,0,0,.06); --shadow-lg:0 30px 70px rgba(0,0,0,.12); --shadow-xl:0 40px 90px rgba(0,0,0,.5); /* für dunkle Flächen / Device-Mockups */ --ease-premium: cubic-bezier(.16,1,.3,1); --dur-fast:.18s; --dur-base:.4s; --dur-slow:.8s; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{margin:0;padding:0;background:var(--bg-page);color:var(--text);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;} img{max-width:100%;display:block;} a{color:inherit;} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;} .wrap-narrow{max-width:var(--maxw-narrow);margin:0 auto;padding:0 24px;} section{padding:var(--space-9) 0;} section.tight{padding:var(--space-7) 0;} @media (max-width:760px){ section{padding:var(--space-8) 0;} section.tight{padding:var(--space-6) 0;} } .on-dark{background:var(--ink);color:var(--ink-text);} .on-light{background:var(--paper);color:var(--text);} /* ---------- 4. ANIMATIONEN ------------------------------------------------ Grundsatz: leicht, hochwertig, zurückhaltend. Animation bestätigt eine Aktion oder lenkt den Blick -- sie unterhält nicht. Kein Bouncing, kein Spielerisches, keine dekorativen Dauerschleifen außer einem einzigen, bewusst eingesetzten "live"-Puls (siehe .pulse-dot). Jede Animation respektiert prefers-reduced-motion. --------------------------------- */ .reveal{opacity:0;transform:translateY(20px);transition:opacity var(--dur-slow) var(--ease-premium), transform var(--dur-slow) var(--ease-premium);} .reveal.in{opacity:1;transform:translateY(0);} @keyframes fadein{from{opacity:0;}to{opacity:1;}} @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,37,148,.3);}50%{box-shadow:0 0 0 8px rgba(255,37,148,0);}} .pulse-dot{animation:pulse 2.4s ease-in-out infinite;} @media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none;} .pulse-dot{animation:none;} } /* ---------- 5. KOMPONENTEN ------------------------------------------------ */ /* -- Buttons -------------------------------------------------------------- Primary = die eine werbliche Handlung pro Ansicht (Verlauf, Gewicht). Dark/Light = neutrale Zweit-Handlung, je nach Flächenfarbe. Secondary = Handlung innerhalb einer App-Fläche (Formular, Dialog). Ghost = dritte Priorität, z. B. "Abbrechen". Danger = destruktive Aktion (löschen, stornieren). */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:15px 28px;border-radius:var(--r-full);font-size:var(--fs-button);font-weight:var(--fw-button); text-decoration:none;cursor:pointer;border:1px solid transparent; transition:transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease, background var(--dur-fast) ease;} .btn:active{transform:scale(.97);} .btn:disabled{opacity:.45;cursor:not-allowed;} .btn-sm{padding:9px 18px;font-size:var(--fs-body-sm);} .btn-lg{padding:18px 34px;font-size:1rem;} .btn-primary{background:var(--grad-soft);color:#fff;box-shadow:0 10px 30px rgba(255,37,148,.22);} .btn-primary:hover{box-shadow:0 14px 38px rgba(255,37,148,.32);} .btn-dark{background:var(--ink);color:#fff;} .btn-dark:hover{background:#000;} .btn-outline-dark{background:rgba(255,255,255,.05);border-color:var(--ink-border);color:var(--ink-text);backdrop-filter:blur(8px);} .btn-outline-dark:hover{background:rgba(255,255,255,.09);} .btn-outline-light{background:transparent;border-color:var(--paper-border);color:var(--text);} .btn-outline-light:hover{background:var(--paper-raised);} .btn-secondary{background:var(--paper-raised);border-color:var(--paper-border);color:var(--text);} .btn-secondary:hover{background:var(--paper);} .btn-ghost{background:transparent;color:var(--text-muted);} .btn-ghost:hover{color:var(--text);background:var(--hover-overlay-light);} .btn-danger{background:var(--danger);color:#fff;} .btn-danger:hover{background:#b8203d;} /* -- Cards ------------------------------------------------------------- */ .card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--r-md);padding:var(--space-5); transition:transform var(--dur-base) ease, box-shadow var(--dur-base) ease, border-color var(--dur-base) ease;} .card-interactive:hover{transform:translateY(var(--hover-lift));box-shadow:var(--hover-shadow);border-color:#d8d4cc;} .card-dark{background:var(--card-bg-dark);border-color:var(--card-border-dark);color:var(--ink-text);} .card-lg{border-radius:var(--r-lg);padding:var(--space-6);} .card-sm{border-radius:var(--r-sm);padding:var(--space-4);} /* -- Inputs / Selects ---------------------------------------------------- */ .field{display:flex;flex-direction:column;gap:6px;} .field label{font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;font-weight:var(--fw-label);color:var(--text-muted);} .input,.select,textarea.input{width:100%;padding:12px 16px;border-radius:var(--r-sm);border:1px solid var(--paper-border); background:var(--paper-raised);color:var(--text);font-size:var(--fs-body-lg);font-family:var(--font-sans); transition:border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;} .input::placeholder{color:var(--text-faint);} .input:focus,.select:focus,textarea.input:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(140,51,242,.14);} .input.has-error{border-color:var(--danger);} .field-error{font-size:var(--fs-body-sm);color:var(--danger);} .select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2363636C' stroke-width='1.5' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 16px center;padding-right:40px;} /* -- Badges (Status-Pills) ------------------------------------------------ */ .badge{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:var(--r-full); font-size:var(--fs-body-sm);font-weight:600;} .badge-success{background:var(--success-bg);color:var(--success);} .badge-warning{background:var(--warning-bg);color:var(--warning);} .badge-danger{background:var(--danger-bg);color:var(--danger);} .badge-info{background:var(--info-bg);color:var(--info);} .badge-neutral{background:var(--paper);color:var(--text-muted);border:1px solid var(--paper-border);} .badge-brand{background:var(--grad-soft);color:#fff;} /* -- Dialoge -------------------------------------------------------------- Ein Dialog unterbricht bewusst. Immer mit Overlay, immer zentriert, immer mit einem klaren primären und einem ghost/sekundären Button. */ .dialog-overlay{position:fixed;inset:0;background:rgba(11,11,14,.5);backdrop-filter:blur(3px); display:flex;align-items:center;justify-content:center;padding:24px;z-index:100;} .dialog{background:var(--paper-raised);border-radius:var(--r-lg);padding:var(--space-6);max-width:440px;width:100%; box-shadow:var(--shadow-lg);animation:fadein var(--dur-base) var(--ease-premium);} .dialog h3{margin:0 0 8px;} .dialog p{color:var(--text-muted);margin:0 0 24px;font-size:var(--fs-body);} .dialog-actions{display:flex;justify-content:flex-end;gap:10px;} /* -- Tabellen ------------------------------------------------------------- Für Listen (Aufträge, Kunden, Rechnungen). Kein Zebra-Streifen -- ein feiner Trenner zwischen Zeilen wirkt hochwertiger als Streifenmuster. */ .table{width:100%;border-collapse:collapse;font-size:var(--fs-body);} .table th{text-align:left;font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase; font-weight:var(--fw-label);color:var(--text-faint);padding:0 var(--space-4) var(--space-3);border-bottom:1px solid var(--paper-border);} .table td{padding:var(--space-4);border-bottom:1px solid var(--paper-border);} .table tbody tr{transition:background var(--dur-fast) ease;} .table tbody tr:hover{background:var(--hover-overlay-light);} .table tbody tr:last-child td{border-bottom:none;} /* -- KPIs / Stat Cards ----------------------------------------------------- */ .stat-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--r-md);padding:var(--space-5);} .stat-card .stat-label{font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-faint);font-weight:var(--fw-label);margin:0 0 10px;} .stat-card .stat-value{font-size:2rem;font-weight:700;letter-spacing:-0.02em;margin:0;} .stat-card .stat-delta{font-size:var(--fs-body-sm);font-weight:600;margin-top:6px;display:inline-flex;align-items:center;gap:4px;} .stat-delta.up{color:var(--success);} .stat-delta.down{color:var(--danger);} .stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4);} @media (max-width:900px){ .stat-grid{grid-template-columns:1fr 1fr;} } @media (max-width:520px){ .stat-grid{grid-template-columns:1fr;} } /* -- Navigation (Marketing-Header) ----------------------------------------- */ header.site{position:sticky;top:0;z-index:50;background:rgba(11,11,14,.7);backdrop-filter:blur(14px);border-bottom:1px solid var(--ink-border);} header.site nav.wrap{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;} header.site nav .logo img{height:24px;width:auto;} header.site nav .links{display:flex;gap:30px;font-size:var(--fs-body);color:var(--ink-text-muted);} header.site nav .links a{text-decoration:none;transition:color var(--dur-fast) ease;} header.site nav .links a:hover{color:var(--ink-text);} header.site nav .cta{display:flex;gap:10px;} /* -- Mobile Navigation ------------------------------------------------------ */ .menu-btn{display:none;background:none;border:none;color:var(--ink-text);font-size:22px;cursor:pointer;} .mobile-menu{display:none;flex-direction:column;gap:2px;padding:6px 24px 18px;border-bottom:1px solid var(--ink-border);} .mobile-menu.open{display:flex;} .mobile-menu a{padding:12px 0;color:var(--ink-text-muted);text-decoration:none;font-size:15px;border-bottom:1px solid var(--ink-border);} .mobile-menu a:last-child{border-bottom:none;} @media (max-width:900px){ header.site nav .links, header.site nav .cta{display:none;} .menu-btn{display:block;} } /* -- Sidebar (für SHNY OS als App, künftig) -------------------------------- Dunkel wie Hero/Footer -- die Sidebar ist Markenfläche, nicht nur Navigation. Aktiver Eintrag über Verlaufsbalken links, kein Farbfüllen der ganzen Zeile (wirkt sonst schnell wie ein 08/15-Admin-Template). */ .sidebar{background:var(--ink);color:var(--ink-text);width:240px;min-height:100vh;display:flex;flex-direction:column;padding:var(--space-5) 0;flex-shrink:0;} .sidebar .brand{padding:0 var(--space-5) var(--space-6);} .sidebar .brand img{height:22px;} .sidebar nav{display:flex;flex-direction:column;gap:2px;} .sidebar nav a{display:flex;align-items:center;gap:12px;padding:11px var(--space-5);color:var(--ink-text-muted); text-decoration:none;font-size:var(--fs-body);border-left:2px solid transparent;transition:.15s ease;} .sidebar nav a:hover{color:var(--ink-text);background:var(--hover-overlay-dark);} .sidebar nav a.active{color:var(--ink-text);border-left-color:var(--pink);background:var(--hover-overlay-dark);font-weight:600;} /* ---------- 6. ICONS ------------------------------------------------------ Strategie statt Zufallssammlung: EIN stroke-basiertes Icon-Set (empfohlen: Lucide -- konsistent, offen lizenziert, bereits im FOX-Ökosystem im Einsatz). Keine Emoji als UI-Icons ("📵🖼️✍️") -- Emoji rendern je nach Betriebssystem unterschiedlich und wirken nicht hochwertig. Raster: 20px im Fließtext/Formular, 24px in Navigation/ Cards, 32px in großen Feature-Blöcken. Stroke-Breite 1.5px, Farbe immer currentColor, damit Icons Textfarbe und Hover automatisch mitgehen. */ .icon{display:inline-block;width:20px;height:20px;stroke:currentColor;stroke-width:1.5;fill:none;vertical-align:-4px;} .icon-md{width:24px;height:24px;} .icon-lg{width:32px;height:32px;} .icon-tile{width:36px;height:36px;border-radius:10px;background:var(--grad-soft);display:flex;align-items:center;justify-content:center;flex-shrink:0;} .icon-tile .icon{stroke:#fff;}