/* ========================================================================== VISARO — DESIGN TOKENS -------------------------------------------------------------------------- Einzige Quelle für Designwerte im gesamten Projekt. REGEL: Kein Hexwert, keine Pixelzahl, keine Dauer und keine Easing-Kurve steht irgendwo sonst im Theme. Alles referenziert die Tokens von hier. Herkunft der Werte: · docs/design-system/VISAROWEBDESIGNSYSTEMv2.html (maßgeblich) · docs/design-system/VISARODESIGNCONCEPTv1.md Kap. 28 (Token-Referenz) · docs/brand/Logopaket.pdf (Corporate-Farben) Bei Abweichungen zwischen v2 und Concept v1 gilt laut CLAUDE.md v2. Die betroffenen Stellen sind unten einzeln gekennzeichnet. theme.json spiegelt die redaktionell nutzbare Teilmenge dieser Werte. Ein Abgleich in inc/token-audit.php meldet Abweichungen im Backend. ========================================================================== */ :root { /* ══ BRAND ═══════════════════════════════════════════════════════════ Purple ist Akzent, nicht Fläche. Auf hellem Grund ist purple-500 nicht textsicher — für Text purple-600 verwenden. */ --vis-purple-50: #F3EBFF; --vis-purple-100: #E2CCFF; --vis-purple-200: #CDA8FF; --vis-purple-400: #BF8FFF; --vis-purple-500: #A259FF; /* VISARO Purple — Corporate Design */ --vis-purple-600: #8629FF; /* textsichere Variante */ --vis-purple-700: #6A00F5; --vis-purple-900: #2C0066; /* ══ INK ═════════════════════════════════════════════════════════════ */ /* Navy ersetzt Schwarz als dominierende Markenfläche (Auftrag 06.10.2026): Navy RGB 23/33/58 = #17213A. Die Ink-Skala ist deshalb blau gestimmt — alle dunklen Flächen, Texte und Linien folgen ihr, ohne dass eine Komponente angefasst werden muss. Kontrast auf Weiß: 950 16,0:1 · 600 7,5:1 · 500 5,7:1. */ --vis-ink-950: #17213A; /* VISARO Navy — verbindlich */ --vis-navy: var(--vis-ink-950); --vis-ink-900: #1D2947; --vis-ink-800: #263352; --vis-ink-700: #364465; --vis-ink-600: #4A5470; --vis-ink-500: #5D6680; /* auch auf Papier #F2EEE7 noch 4,9:1 */ --vis-ink-400: #9AA0B1; --vis-ink-300: #D4D4DC; --vis-ink-200: #E4E4EA; --vis-ink-100: #EDEDED; /* Light Grey — Corporate Design */ --vis-surface: #F4F4F5; --vis-off-white: #FAFAF8; --vis-white: #FFFFFF; /* Paper — die Anti-SaaS-Farbe, nur editorial. v2 — Concept v1 nennt #F5F3EF / #EBE7DF, v2 gilt. */ --vis-paper: #F2EEE7; /* ══ VERLÄUFE ════════════════════════════════════════════════════════ Navy → tiefes Violett, Lila nur als Lichtakzent. Für Hero, dunkle Bänder und Abschluss — nicht für Knöpfe und nicht für Text. */ --vis-violet-deep: #2A1B5C; --vis-grad-navy: linear-gradient(135deg, #131B31 0%, var(--vis-navy) 38%, #221D4D 72%, var(--vis-violet-deep) 100%); --vis-grad-band: linear-gradient(180deg, var(--vis-navy) 0%, #1A2042 100%); --vis-light-lilac: radial-gradient(closest-side, rgba(162, 89, 255, 0.30), rgba(162, 89, 255, 0) 100%); /* ══ FUNCTIONAL ══════════════════════════════════════════════════════ Die -text-Varianten sind auf hellem Grund kontraststark genug; die Basisfarben sind für Flächen und Icons gedacht. */ --vis-ok: #1F9D55; --vis-ok-text: #157347; --vis-ok-bg: #EDF7F1; --vis-warn: #F0A020; --vis-warn-text: #9A5A00; --vis-warn-bg: #FFF7E8; --vis-err: #E5484D; --vis-err-text: #D02B2B; --vis-err-bg: #FDEDED; --vis-info: #3B6FB6; --vis-info-text: #2A5590; --vis-info-bg: #EEF3FA; /* ══ SEMANTIK ════════════════════════════════════════════════════════ Komponenten verwenden diese Rollen, nicht die Farbwerte direkt. Dadurch lassen sich Shopwelten und dunkle Bänder umschalten, ohne jede Komponente anzufassen. */ --vis-text: var(--vis-ink-950); --vis-text-2: var(--vis-ink-600); --vis-text-3: var(--vis-ink-500); --vis-text-disabled: var(--vis-ink-400); --vis-text-on-dark: var(--vis-white); --vis-bg: var(--vis-white); --vis-bg-subtle: var(--vis-off-white); --vis-bg-surface: var(--vis-surface); --vis-bg-dark: var(--vis-ink-950); --vis-border: var(--vis-ink-200); --vis-border-strong: var(--vis-ink-300); --vis-border-subtle: var(--vis-ink-100); --vis-border-dark: var(--vis-ink-700); --vis-accent: var(--vis-purple-500); --vis-accent-text: var(--vis-purple-600); /* Fläche hinter weißer Schrift (Hauptknopf). Weiß auf #A259FF erreicht nur 3,9:1 und fällt unter AA für normale Schrift; auf purple-600 sind es 5,6:1. #A259FF bleibt Akzent für Linien, Marker und Licht. */ --vis-accent-fill: var(--vis-purple-600); /* ══ SHOPWELT ════════════════════════════════════════════════════════ Feuerwehr, Vereine, Sport und Textil überschreiben diese drei Werte auf einem Wrapper-Element. Alles andere bleibt gleich — gemeinsame UX, getrennte Identität. */ --vis-world-accent: var(--vis-purple-500); --vis-world-accent-text: var(--vis-purple-600); --vis-world-ground: var(--vis-white); /* Akzentfarben der vier Shopwelten. Sie sind Markenidentität, kein Inhalt — deshalb hier und nicht im Backend. Feuerwehr: Vorschlag aus Design Concept Kap. 29 (F9, noch offen). */ --vis-world-feuerwehr: #E03A2F; /* Feuerwehr: zwei Werte, weil einer nicht reicht. `--vis-world-feuerwehr` ist das Signal (Marken, dünne Akzente), `…-strong` trägt Text und Flächen: Weiß auf dem hellen Rot erreicht nur 4,0:1 und fällt damit unter die Grenze für Fließtext, der dunklere Ton kommt auf 6,5:1. Beide sind **vorläufig** (offener Punkt O4): Ein verbindlicher Feuerwehr-Rotton ist nicht beschlossen. Er wird hier geändert — an genau einer Stelle —, sobald er feststeht. */ --vis-world-feuerwehr-strong: #B4271E; --vis-world-verein: var(--vis-purple-500); --vis-world-sport: #0B7285; --vis-world-textil: var(--vis-purple-500); /* ── Feuerwehr Shop — eigene Brandwelt ─────────────────────────────── Eine Shopwelt darf anders aussehen (Non-Negotiable 12). Die Werte stehen trotzdem hier: tokens.css ist die einzige Quelle (E20), auch für eine Welt, die sich vom Corporate Design löst. Sie gelten ausschließlich in der Shopwelt Feuerwehr. Corporate, der allgemeine Shop und die noch nicht gebauten Welten sehen davon nichts. Kontrast (WCAG AA, gegen --vis-fire-black bzw. --vis-fire-paper): ember auf schwarz 6,4:1 schwarz auf ember 6,4:1 red auf schwarz 4,7:1 schwarz auf red 4,7:1 red-ink auf paper 5,9:1 Der helle Rotton trägt deshalb keine weiße Schrift, der Ember-Ton trägt schwarze — nicht umgekehrt. */ --vis-fire-black: #08090A; --vis-fire-900: #101113; --vis-fire-800: #191A1D; --vis-fire-700: #24262A; --vis-fire-600: #34373D; --vis-fire-line: #2A2C31; --vis-fire-smoke: #B9BCC2; --vis-fire-ash: #7E828A; --vis-fire-paper: #F4F1EC; --vis-fire-paper-2: #E8E3DB; --vis-fire-red: #E6382E; --vis-fire-red-ink: #B32419; --vis-fire-ember: #FF5A1F; /* Schriften der Brandwelt. Display: **Inter Tight**, Variable 400–800, SIL Open Font License, selbst gehostet wie DM Sans. Eine moderne, leicht schmalere Grotesk mit ruhigen Versalien — hochwertig statt plakativ. Die vorher hier stehende Notlösung (DM Sans in Versalien mit enger Laufweite) las sich wie ein Motorsportplakat; das ist nicht die Marke. Body: DM Sans, unverändert. Zwei Schriftfamilien in einer Shopwelt sind genug — die dritte wäre Dekoration. Getauscht wird an genau diesen zwei Zeilen. */ --vis-font-fire-display: "Inter Tight", "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --vis-font-fire-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; /* Maße der Brandwelt. */ --vis-fire-head: 72px; --vis-fire-head-small: 60px; --vis-fire-utility: 34px; --vis-fire-radius: 4px; --vis-fire-radius-lg: 14px; --vis-fire-pill: 999px; --vis-fire-hero: 88vh; --vis-fire-hero-mobile: 82svh; --vis-fire-glow: 520px; /* ══ TYPOGRAFIE ══════════════════════════════════════════════════════ Zwei Familien, mehr nicht. DM Sans ist ein Variable Font (400–700). Zahlen, Maße und Labels stehen in DM Mono. */ --vis-font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --vis-font-mono: "DM Mono", ui-monospace, "SF Mono", Consolas, "Liberation Mono", monospace; --vis-fw-regular: 400; --vis-fw-medium: 500; --vis-fw-bold: 700; /* Fluid-Skala. Zwischenwerte sind nicht vorgesehen. Die Grenzwerte stehen exakt in rem (16 px Basis). Das Design Concept Kap. 28 nennt dieselben Werte auf zwei Nachkommastellen gerundet — 2.13rem statt 2.125rem. Hier gilt der exakte Wert, damit theme.json und tokens.css maschinell abgleichbar bleiben. */ --vis-fs-display-xl: clamp(2.75rem, 1.20rem + 6.20vw, 6rem); /* 44 → 96 */ --vis-fs-display-l: clamp(2.375rem, 1.20rem + 4.70vw, 4.5rem); /* 38 → 72 */ --vis-fs-h1: clamp(2.125rem, 1.25rem + 3.50vw, 3.5rem); /* 34 → 56 */ --vis-fs-h2: clamp(1.75rem, 1.25rem + 2.00vw, 2.5rem); /* 28 → 40 */ --vis-fs-h3: clamp(1.375rem, 1.10rem + 1.10vw, 1.75rem); /* 22 → 28 */ --vis-fs-h4: clamp(1.125rem, 1.00rem + 0.50vw, 1.3125rem); /* 18 → 21 */ --vis-fs-body-l: clamp(1.0625rem, 1.00rem + 0.30vw, 1.25rem); /* 17 → 20 */ --vis-fs-body: clamp(1rem, 0.96rem + 0.16vw, 1.0625rem); /* 16 → 17 */ --vis-fs-body-s: 0.9375rem; /* 15 */ --vis-fs-caption: 0.8125rem; /* 13 */ --vis-fs-label: 0.75rem; /* 12 */ --vis-lh-display: 1.05; --vis-lh-heading: 1.15; --vis-lh-snug: 1.35; --vis-lh-body: 1.6; --vis-ls-display: -0.02em; --vis-ls-heading: -0.01em; --vis-ls-body: 0; --vis-ls-label: 0.08em; /* ══ SPACING ═════════════════════════════════════════════════════════ Basis 4 px. Andere Werte sind nicht erlaubt. Innerhalb von Komponenten 1–6, zwischen Komponenten 8–12, zwischen Sektionen 16 und größer. */ --vis-space-1: 4px; --vis-space-2: 8px; --vis-space-3: 12px; --vis-space-4: 16px; --vis-space-5: 20px; --vis-space-6: 24px; --vis-space-8: 32px; --vis-space-10: 40px; --vis-space-12: 48px; --vis-space-16: 64px; --vis-space-20: 80px; --vis-space-24: 96px; --vis-space-30: 120px; --vis-space-40: 160px; --vis-space-50: 200px; /* ══ CONTAINER ═══════════════════════════════════════════════════════ */ --vis-container-narrow: 720px; /* Fließtext, Case-Study-Body, Legal */ --vis-container-content: 1320px; /* Standard-Seiteninhalt */ --vis-container-wide: 1560px; /* Projektraster, Mega-Menü */ --vis-container-bleed: 1920px; /* Deckel für Full-Bleed-Medien */ /* ══ RASTER ══════════════════════════════════════════════════════════ Seitenabstand und Spalten wachsen mit dem Viewport. Die Stufen stehen weiter unten in den Media Queries. */ --vis-gutter: 24px; --vis-grid-columns: 4; --vis-grid-gap: 16px; --vis-grid-gap-media: 16px; /* Bildraster bekommt ab 1440 mehr Luft */ /* ══ SEKTIONSABSTAND ═════════════════════════════════════════════════ Mobile Basiswerte. Kollaps-Regel: Zwei Sektionen mit gleichem Hintergrund teilen sich den Abstand; bei Hintergrundwechsel bleiben beide Paddings stehen. */ --vis-section-s: 48px; --vis-section-m: 64px; --vis-section-l: 80px; --vis-section-xl: 96px; --vis-section-hero: 120px; /* ══ RADIUS ══════════════════════════════════════════════════════════ */ --vis-radius-xs: 4px; --vis-radius-sm: 6px; --vis-radius-md: 10px; --vis-radius-lg: 16px; --vis-radius-full: 999px; /* ══ GEOMETRIE ═══════════════════════════════════════════════════════ Die 60°-Kante ist das Markenzeichen. Die Höhe eines Schnitts ergibt sich aus Breite / tan(60°) — deshalb der Tangens als Token. */ --vis-angle: 60deg; --vis-tan60: 1.7320508; --vis-cut: 88px; /* Standard */ --vis-cut-sm: 40px; /* mobil */ --vis-cut-lg: 120px; /* Hero */ /* ══ SCHATTEN ════════════════════════════════════════════════════════ Sehr sparsam. Kein Glow, kein Glassmorphism. */ --vis-shadow-hover: 0 8px 24px -12px rgba(23, 33, 58, 0.16); --vis-shadow-menu: 0 24px 48px -24px rgba(23, 33, 58, 0.20); --vis-shadow-modal: 0 32px 64px -24px rgba(23, 33, 58, 0.28); /* ══ MOTION ══════════════════════════════════════════════════════════ Bewegung erklärt, sie dekoriert nicht. */ --vis-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --vis-ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --vis-ease-sharp: cubic-bezier(0.4, 0, 1, 1); --vis-duration-micro: 160ms; /* Hover, Fokus, Icon */ --vis-duration-ui: 220ms; /* Menü, Akkordeon, Tab */ --vis-duration-content: 480ms; /* Reveal, Sektionswechsel */ --vis-duration-cinematic: 900ms; /* Hero, Maskenwisch */ --vis-duration-ambient: 9s; /* Licht im Hero, atmet langsam */ /* ══ KOMPONENTENMASSE ════════════════════════════════════════════════ Nur globale Maße, die mehrere Komponenten teilen. Komponenteneigene Werte entstehen ab Phase 3B. */ /* Header. Das Phase-4-Briefing nennt 76–84 px initial und 68–72 px gescrollt; Design Concept Kap. 14.3 nennt 80 und 64. Gewählt: 80 und 68 — im Rahmen beider Vorgaben. Mobil flacher, siehe unten. */ --vis-header-height: 80px; --vis-header-height-scrolled: 68px; --vis-header-height-mobile: 64px; --vis-nav-row-height: 40px; --vis-tap-target-min: 44px; --vis-drawer-width: 270px; /* Navigation. Werte aus Design Concept Kap. 14.3, 15.3 und 17.2. */ --vis-logo-height: 28px; --vis-logo-height-scrolled: 24px; --vis-logo-height-mobile: 24px; --vis-burger-width: 20px; --vis-burger-height: 14px; --vis-burger-line: 2px; --vis-burger-gap: 6px; --vis-mega-row: 40px; /* Zeilenhöhe im Mega-Menü, touch-sicher */ --vis-drawer-row: 64px; /* Hauptzeile im Drawer */ --vis-drawer-row-sm: 56px; /* Unterzeile im Drawer */ /* Wortmarke im Footer. Der Weg war 1320 → 960 → 800 → 360 → 220: Sie ist Markenanker, nicht Hauptelement. Bei 220 px ist sie rund 40 px hoch — eineinhalbmal das Logo im Header, klar erkennbar, ohne den Abschluss zu übernehmen. Auf schmalen Geräten greift zusätzlich eine prozentuale Grenze, siehe footer.css. */ --vis-footer-wordmark-max: 220px; /* ══ HERO ════════════════════════════════════════════════════════════ Der Stapel auf der Startseite. Fünf Flächen in einer Perspektive; die Schrittweiten sagen, wie weit jede Fläche gegenüber der vorherigen nach rechts, nach oben und nach hinten rückt. Die Werte sind aufeinander abgestimmt: Bei 900 px Perspektive und 64 px Tiefe pro Stufe steht die hinterste Fläche rund 256 px hinter der vordersten — genug für sichtbare Staffelung, wenig genug, dass sie nicht in die Unschärfe kippt. Hier stehen die Werte für schmale Geräte; 768 und 1024 vergrößern sie weiter unten. Entscheidend ist, dass Plattenbreite plus viermal Schrittweite in die Spalte passt — sonst schiebt sich die hinterste Fläche aus dem Bild. */ /* Vorschau im Abschnitt „Was hast du vor?" und Bildverhältnis der großen Leistungsblöcke. Die Vorschau ist bewusst klein: Sie begleitet den Zeiger, sie übernimmt nicht die Seite. */ --vis-intents-preview-w: 280px; --vis-intents-preview-h: 190px; /* Deckel für bildschirmhohe Bühnen. vh allein wird auf sehr hohen Fenstern absurd, ein fester Wert allein auf niedrigen zu hoch — deshalb min() aus beidem. */ --vis-stage-height-max: 760px; --vis-stage-height-soon: 640px; --vis-services-media-ratio: 16 / 10; --vis-services-media-height: 320px; --vis-services-media-ratio-wide: 21 / 9; /* Projekte, Produktion, Kette. Zwei Bildformate im Projektraster — zwei gleiche Formate nebeneinander wären wieder ein Raster. */ --vis-project-ratio-wide: 16 / 10; --vis-project-ratio-lead: 21 / 9; --vis-production-lead-ratio: 4 / 3; --vis-production-tile-ratio: 1 / 1; --vis-chain-plate: 80px; /* Über VISARO, Team, Abschluss. Beide Bildformate wechseln mit der Spaltenzahl: solange der Text darüber steht, liegt das Bild breit; erst wenn es neben dem Text steht, wird es hochkant. Ein festes 21/9-Teamfoto wäre auf 375 px ein Briefschlitz. Die Porträts bleiben quadratisch — gleiche Kachel für alle. */ --vis-story-ratio: 4 / 5; --vis-team-group-ratio: 4 / 3; --vis-team-portrait: 1 / 1; /* Unterseiten. Das Kopfbild der Leistungsseiten steht neben dem Text und ist deshalb hochkant; das Titelbild einer Projektseite läuft über die ganze Breite und ist entsprechend flach. */ --vis-page-media-ratio: 4 / 5; --vis-project-cover-ratio: 16 / 9; --vis-chip-height: 36px; /* ── Shop ──────────────────────────────────────────────────────────── Produktbilder sind hochkant: Textil trägt sich besser im Hochformat, und eine Reihe gleich hoher Kacheln braucht ein festes Verhältnis, damit vor dem Laden nichts springt. 4:5 statt 3:4, seit die Bilder vollständig sichtbar sein müssen: Ein freigestelltes Kleidungsstück ist meist höher als breit, und in 3:4 blieb links und rechts Luft, oben und unten nicht. */ --vis-product-ratio: 4 / 5; /* Luft um das Produkt innerhalb seiner Fläche. Produktfotos kommen aus vielen Quellen und mit sehr verschiedenen Rändern. Ohne diesen Abstand steht ein knapp beschnittenes Foto randlos in der Kachel und ein großzügig beschnittenes verloren in der Mitte — nebeneinander sehen sie aus wie zwei verschiedene Shops. Mit gemeinsamem Abstand und `contain` wirken sie gleich groß. */ --vis-media-pad: 8%; --vis-shophead-height: 72px; --vis-shophead-top: 36px; --vis-filters-width: 260px; --vis-qty-height: 44px; /* Werkstattblick. Das Leitmotiv liegt breit, daneben ein Hochformat und ein quadratisches Detail — die drei Formate zusammen ergeben dieselbe Höhe, ohne dass irgendwo eine Pixelzahl steht. */ --vis-shot-lead-ratio: 4 / 3; --vis-shot-tall-ratio: 3 / 4; --vis-shot-macro-ratio: 1 / 1; --vis-shot-strip-ratio: 4 / 3; /* Format der Bildbühne. Zusammen mit der Spaltenteilung 1,5 zu 1 ergibt 2:1 ein Hauptmotiv von rund 5:4 und Nebenmotive von rund 16:10 — beide angenehm, keines extrem. Steht nur ein Motiv auf der Bühne, liegt es breiter. */ --vis-shots-stage: 2 / 1; --vis-shots-stage-wide: 16 / 9; --vis-hero-perspective: 1400px; /* Höhe der Shirt-Bühne im Hero (E259). Breite ist immer die Spalte; das Modell richtet seine Kamera selbst darauf aus. Auf dem Telefon höchstens so hoch wie breit plus ein Zehntel, damit Text und Knöpfe darüber nicht aus dem ersten Bild rutschen. */ --vis-hero-shirt-height: min(460px, 122vw); /* Steuerelemente. Die Höhen decken die im Briefing genannten Bereiche ab: Standard 48–52 px, Large 56–60 px. */ --vis-control-height-sm: 40px; --vis-control-height: 48px; --vis-control-height-lg: 56px; --vis-input-height: 52px; --vis-button-height: var(--vis-control-height); /* Rahmenstärken. Zwei Werte genügen: Haarlinie und betont. */ --vis-border-width: 1px; --vis-border-width-strong: 2px; /* Fokusring — an einer Stelle definiert, überall gleich. */ --vis-focus-width: 2px; /* Kleinstwerte, die keiner Spacing-Stufe entsprechen, aber mehrfach gebraucht werden. Sie stehen hier, damit sie nicht als Magic Number in Komponenten wandern. */ --vis-nudge: 3px; /* Pfeilversatz beim Hover */ --vis-accent-bar: 3px; /* Akzentkante unter der Shop-Karte */ --vis-toggle-gap: 2px; /* Luft im Umschalter */ --vis-card-shop-min: 260px; /* Mindesthöhe der Shopwelt-Kachel */ --vis-focus-offset: 2px; /* ── Shopkonto ────────────────────────────────────────────────────── Das Konto ist schmaler als eine Produktseite. Es ist ein Verwaltungsbereich: Adressen, Bestellungen, Kontodaten — Listen und Formulare, keine Bildflächen. Auf 1560 px zerfiele eine Bestellzeile in drei weit auseinanderliegende Enden. Die Navigationsspalte ist **schmaler als die Filterspalte** des Sortiments (260 px): Dort stehen Filtergruppen mit Zählern, hier sechs kurze Wörter mit Symbol. Die Anmeldekarte ist bewusst eng. Ein Formular mit zwei Feldern über die halbe Bildschirmbreite zu ziehen macht es nicht bequemer, sondern nur schwerer zu überblicken. */ --vis-account-max: 1180px; --vis-account-nav: 228px; --vis-auth-max: 480px; /* ══ EBENEN ══════════════════════════════════════════════════════════ Technische Ergänzung, nicht aus dem Designsystem. Verhindert, dass später willkürliche z-index-Werte entstehen. */ --vis-z-base: 0; --vis-z-raised: 10; --vis-z-sticky: 100; --vis-z-header: 200; --vis-z-drawer: 300; --vis-z-overlay: 400; --vis-z-modal: 500; --vis-z-toast: 600; --vis-z-skiplink: 700; /* ══ BREAKPOINTS ═════════════════════════════════════════════════════ Custom Properties funktionieren in Media Queries nicht — die Werte unten stehen dort literal. Diese Tokens existieren, damit JavaScript dieselben Schwellen lesen kann statt eigene zu raten (etwa 1024 als Grenze zwischen Drawer und Mega-Menü). */ /* ── Textilkonfigurator ──────────────────────────────────────────── Die Bühne ist so breit, wie ein Kleidungsstück sein muss, damit man ein Brustlogo beurteilen kann — und die Werkzeugspalte so schmal, dass sie eine Spalte bleibt und keine zweite Seite wird. `--vis-cfg-grip` ist die Kantenlänge der Anfasser am Motiv. Sie ist kleiner als das übliche Tippziel von 44 px: Ein Anfasser, der so groß ist wie ein Knopf, verdeckt genau das, was man beurteilen will. Dafür ist die Trefferfläche über ein Pseudoelement größer als der sichtbare Punkt. */ --vis-cfg-tools: 380px; --vis-cfg-stage-max: 720px; --vis-cfg-grip: 14px; --vis-cfg-grip-hit: 40px; --vis-cfg-swatch: 34px; --vis-cfg-panel-gap: var(--vis-space-6); --vis-bp-xs: 375px; --vis-bp-sm: 430px; --vis-bp-md: 768px; --vis-bp-lg: 1024px; --vis-bp-xl: 1280px; --vis-bp-2xl: 1440px; --vis-bp-3xl: 1920px; } /* ══════════════════════════════════════════════════════════════════════════ RESPONSIVE STUFEN Nur Tokens werden umgeschaltet, keine Komponenten. Dadurch reagiert das gesamte System auf eine einzige Änderung. ══════════════════════════════════════════════════════════════════════════ */ /* 768 — Tablet hoch: 8 Spalten, mehr Seitenabstand */ @media (min-width: 768px) { :root { --vis-gutter: 32px; --vis-grid-columns: 8; --vis-grid-gap: 20px; --vis-grid-gap-media: 20px; --vis-section-s: 56px; --vis-section-m: 80px; --vis-section-l: 104px; --vis-section-xl: 128px; --vis-section-hero: 160px; --vis-story-ratio: 16 / 10; --vis-page-media-ratio: 16 / 10; --vis-team-group-ratio: 16 / 9; --vis-hero-perspective: 1500px; --vis-hero-shirt-height: 540px; } } /* 1024 — ab hier 12 Spalten, Mega-Menü, Hover-Effekte */ @media (min-width: 1024px) { :root { --vis-gutter: 40px; --vis-grid-columns: 12; --vis-grid-gap: 24px; --vis-grid-gap-media: 24px; --vis-section-s: 64px; --vis-section-m: 96px; --vis-section-l: 128px; --vis-section-xl: 160px; --vis-section-hero: 200px; --vis-intents-preview-w: 340px; --vis-intents-preview-h: 230px; --vis-services-media-height: 340px; --vis-story-ratio: 4 / 5; --vis-page-media-ratio: 4 / 5; --vis-team-group-ratio: 21 / 9; --vis-hero-perspective: 1600px; --vis-hero-shirt-height: clamp(540px, 48vw, 740px); } } /* 1440 — großer Desktop: mehr Luft zwischen Bildern */ @media (min-width: 1440px) { :root { --vis-gutter: 48px; --vis-grid-gap-media: 32px; --vis-services-media-height: 380px; } } /* Mobil ist die 60°-Kante flacher, sonst frisst sie den Inhalt */ @media (max-width: 767.98px) { :root { --vis-cut: var(--vis-cut-sm); --vis-header-height: var(--vis-header-height-mobile); --vis-header-height-scrolled: 56px; } } /* ══════════════════════════════════════════════════════════════════════════ REDUCED MOTION Design Concept Kap. 23.5: Bewegung wird nicht entfernt, sondern auf das Nötigste reduziert. Opazitätswechsel bleiben, Bewegung im Raum nicht. ══════════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { :root { --vis-duration-micro: 1ms; --vis-duration-ui: 1ms; --vis-duration-content: 1ms; --vis-duration-cinematic: 1ms; --vis-duration-ambient: 1ms; } } /* Firewear: supplied identity, 11 October 2026. */ :root { --vis-firewear-yellow: #FFF90D; --vis-firewear-navy: #05052A; }