/* NeXifyAI -- Grundregeln fuer alle ausgelieferten Dokumente. 08.09.2026, Europe/Berlin. NEXIFYAI-PP-2026-09-00002, AP-22. Anlass: Auf der Startseite ragte der Inhalt bei 390 CSS-Pixeln um 6 px und bei 320 px um 42 px ueber den Rand hinaus, auf Impressum und Datenschutz bei 320 px um 5 bzw. 8 px. Die Seite liess sich dadurch waagrecht schieben -- der haeufigste und laestigste Mobilfehler. Ursache, gemessen statt vermutet: lange deutsche Komposita ("Unternehmenswebsites", "Verbraucherstreitbeilegungsstelle", "Datenschutzerklaerung") sind breiter als die Spalte, in der sie stehen, und Text bricht standardmaessig nicht innerhalb eines Wortes. Warum zwei Regeln und nicht eine: * overflow-wrap: break-word bricht ein zu langes Wort erst, wenn die Zeile sonst ueberliefe -- es aendert aber die intrinsische Mindestbreite eines Kastens NICHT. Das genuegt fuer Fliesstext (Impressum, Datenschutz), nicht fuer eine Ueberschrift in einer Rasterzelle fester Breite. * overflow-wrap: anywhere senkt zusaetzlich die Mindestbreite. Global waere das zu grob -- es kann Raster- und Flexkaesten schrumpfen lassen. Deshalb steht es nur dort, wo Text in einem Kasten fester Breite sitzt: Ueberschriften und Beschriftungen in Schaltflaechen. Gegengeprueft bei 320 / 390 / 768 / 1280 px, jeweils vorher und nachher: bei 768 und 1280 px aendert sich NICHTS (Schaltflaeche 350x136 bzw. 297x172, identisch), bei 390 px bleibt die Hoehe gleich und nur die Textbreite faellt von 170 auf 111 px, bei 320 px waechst die Schaltflaeche von 260 auf 297 px Hoehe -- der Text bricht jetzt statt herauszuragen. Waagrechtes Scrollen: auf allen drei Seiten und allen vier Breiten beseitigt. */ html, body { overflow-wrap: break-word; } button strong, button span, h1, h2, h3 { overflow-wrap: anywhere; } /* WCAG 2.2, Erfolgskriterium 2.5.8 (Zielgroesse, Minimum, Stufe AA). 08.09.2026: Die vier Sprungmarken im Wissenshub massen 240x14 px bei 8 px Abstand -- zusammen 22 px und damit unter den geforderten 24. min-height wirkt nur auf Elemente, die nicht inline sind; Verweise im Fliesstext bleiben deshalb unberuehrt (fuer sie gilt ohnehin die Ausnahme "inline"). Gegengemessen auf Start, Shop und Wissenshub: keine Verschiebung im Layout. */ a[href^="#"] { min-height: 24px; } /* 08.09.2026, Europe/Berlin. Cloudflare ersetzt E-Mail-Adressen im Text durch und setzt die Adresse per JavaScript ein. Dieser Verweis erbt KEINE Farbe aus dem Umfeld, sondern bekommt die Vorgabefarbe des Browsers -- auf den dunklen Foliendokumenten stand dadurch Blau (#0000EE) auf #0E1315: 1,99:1, praktisch unlesbar (gemessen). Der Verweis soll die Farbe seines Umfelds tragen; das ist ueberall die Farbe, die der Entwurf fuer Text an dieser Stelle vorsieht. */ a.__cf_email__, a[href*="email-protection"] { color: inherit; } /* ========================================================================== NeXify AI — Designsystem-Verfeinerung "Tiefe & Hochwertigkeit" 12.09.2026 (Europe/Berlin), Pascal-Auftrag "Designsystem optimieren". Additiv zu den ausgelieferten Dokumenten: keine Layout-Aenderung, nur globale Politur + wiederverwendbare Tiefe-Tokens. Die .dc.html schreiben ihre Werte weiterhin inline; diese Variablen sind die kanonische Laufzeit-Quelle und liegen 1:1 in design/tokens-nexifyai.css. ========================================================================== */ :root { /* Flaechen — Kanonwerte aus design/tokens-nexifyai.json */ --nx-bg: #F2F3EF; --nx-surface: #FFFFFF; --nx-surface-2: #FAFBF8; --nx-ink: #14191C; --nx-ink-2: #3D454A; --nx-ink-3: #5F686D; --nx-border: #E2E4E0; --nx-border-strong: #D5D8D2; --nx-accent: #C8F04B; --nx-accent-deep: #4A5C10; --nx-accent-tint: #E9F6C9; /* Tiefe — dreistufiges Schatten-System statt pauschal "1px Rahmen + 2px Schatten" */ --nx-shadow-1: 0 1px 2px rgba(14,19,21,.05); --nx-shadow-2: 0 2px 8px -1px rgba(14,19,21,.06), 0 1px 2px rgba(14,19,21,.04); --nx-shadow-3: 0 24px 60px -24px rgba(14,19,21,.28), 0 8px 20px -8px rgba(14,19,21,.12); --nx-ring: 0 0 0 4px rgba(200,240,75,.38); /* Radien — eine Handvoll bewusster Stufen */ --nx-radius-sm: 10px; --nx-radius-md: 14px; --nx-radius-lg: 20px; --nx-radius-xl: 28px; /* Bewegung */ --nx-ease-out: cubic-bezier(.22,.7,.3,1); --nx-ease-spring: cubic-bezier(.16,1,.3,1); --nx-ease-snap: cubic-bezier(.77,0,.175,1); /* Z-Index — dokumentiert statt willkuerlich */ --nx-z-base: 1; --nx-z-sticky: 40; --nx-z-overlay: 80; --nx-z-skip: 200; } /* Sanftes Scrollen; respektiert die Reduzierte-Bewegung-Einstellung. */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Markentext-Auswahl: Lime-Hintergrund, dunkle Schrift. */ ::selection { background: #C8F04B; color: #14191C; } ::-moz-selection { background: #C8F04B; color: #14191C; } /* Konsistenter Fokus-Ring als Fallback. Seiten mit eigenem Fokus-Stil ueberschreiben diesen wegen hoeherer Spezifitaet — kein Doppel-Ring. */ :focus-visible { outline: 2px solid #4A5C10; outline-offset: 2px; border-radius: 4px; } /* Feine Laufleiste — dezent statt System-Grau. */ @supports (scrollbar-width: thin) { html { scrollbar-width: thin; scrollbar-color: #C6CAC2 #F2F3EF; } } html::-webkit-scrollbar { width: 11px; height: 11px; } html::-webkit-scrollbar-track { background: #F2F3EF; } html::-webkit-scrollbar-thumb { background: #C6CAC2; border-radius: 99px; border: 3px solid #F2F3EF; } html::-webkit-scrollbar-thumb:hover { background: #AEB3AA; } /* Korn-/Rausch-Overlay: verleiht Flaechen Waerme und Tiefe, ohne Farben oder Kontrast zu veraendern (kein Blend-Mode, sehr niedrige Deckkraft). Als erstes Kind des Seitenwrappers einfuegen: */ .nx-grain { position: fixed; inset: 0; z-index: 2147483647; pointer-events: none; opacity: .04; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 200px 200px; } /* Reduzierte Bewegung: Animationen/uebergaenge stilllegen (Konsistenz). */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* Globales Korn-Overlay (body::after): verleiht jeder Seite Tiefe, ohne HTML-Aenderung. pointer-events:none, Deckkraft .04, entsaettigtes Rauschen. Greift auf allen 20 Dokumenten automatisch; pro Element weiterhin via .nx-grain moeglich. */ body::after { content: ""; position: fixed; inset: 0; z-index: 2147483647; pointer-events: none; opacity: .04; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 200px 200px; }