/** * Tycoon CMS – Custom Styles * * Ergänzende Styles zum Tailwind CSS Framework. * Hier werden projektspezifische Anpassungen und Animationen definiert. */ /* ============================================================ Basis-Resets & Globals ============================================================ */ :root { --color-primary: #52525b; --color-primary-dark: #3f3f46; --transition-base: 200ms ease; } /* Smooth Scrolling */ html { scroll-behavior: smooth; } /* Focus-Styles für Barrierefreiheit (WCAG 2.4.7 / 1.4.11). Der Ring muss auf HELLEM und DUNKLEM Grund sichtbar sein – das Frontend hat beides (heller Body, dunkler Footer/Hero). Ein einzelner grauer Ring (die Marke ist Zinc) verschwindet auf dunklem Grund. Deshalb zwei Konturen: eine dunkle Outline für helle Flächen, ein heller box-shadow-Ring, der sie von dunklen Flächen abhebt. Diese Kombination steht auf jedem Hintergrund. */ :focus-visible { outline: 2px solid #18181b; /* dunkel – Kontrast auf hell */ outline-offset: 2px; box-shadow: 0 0 0 4px #fafafa; /* hell – Kontrast auf dunkel */ border-radius: 2px; } /* Auf dunklen Flächen dreht sich das Verhältnis um: helle Outline, dunkler Trennring. */ .bg-secondary-900 :focus-visible, .bg-secondary-800 :focus-visible, footer :focus-visible { outline-color: #fafafa; box-shadow: 0 0 0 4px #18181b; } /* Reduzierte Bewegung respektieren (WCAG 2.3.3 / vestibuläre Beschwerden). Wer im Betriebssystem „Bewegung reduzieren“ aktiviert, bekommt keine Animationen und kein sanftes Scrollen. Deckt fadeIn/slideUp/pulse-soft, alle transition-*-Utilities und das scroll-smooth im ab. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Skip-Link „Zum Inhalt springen“ (WCAG 2.4.1): erstes fokussierbares Element, normalerweise ausgeblendet, bei Tastatur-Fokus sichtbar oben links. Ohne ihn müsste ein Tastatur-/Screenreader-Nutzer auf JEDER Seite erst durch die komplette Navigation. */ .skip-link { position: absolute; top: -3rem; left: 0.75rem; z-index: 100; padding: 0.6rem 1rem; background: #18181b; color: #ffffff; font-weight: 600; border-radius: 0 0 0.5rem 0.5rem; transition: top 150ms ease; } .skip-link:focus { top: 0; } /* ============================================================ Content-Base-Typografie (die „grobe Vorlage" wie Bootstrap-Reboot) ------------------------------------------------------------ Tailwinds Preflight (in tailwind.css UND jeder theme.css) setzt Überschriften und Absätze bewusst auf Fließtext zurück – ideal für die utility-first-Shell, aber im redaktionellen Inhalt sollen KLASSENLOSE Elemente von sich aus lesbar sein. Dann kann ein Redakteur reines HTML schreiben, ohne jede Zeile zu beklassen; die KI setzt zusätzlich Utilities, wo sie feiner steuern will. Auf #content gescopt – dem Inhaltscontainer des Frontend-Layouts (
, Ziel des Skip-Links). Zwei Gründe: 1) Spezifität: #content :where(h1) ergibt (1,0,0) und schlägt Preflight h1 (0,0,1) UNABHÄNGIG von der Ladereihenfolge (Preflight lädt später). Ein blankes h1 { } würde gegen Preflight VERLIEREN. 2) Abgrenzung: die Theme-Shell (Header/Footer, utility-first) bleibt unberührt; das Cockpit nutzt
ohne #content und ist ebenfalls außen vor. :where() hält die Spezifität bei (1,0,0) – gerade so viel, dass Preflight verliert, aber jede Utility (#content .klasse = 1,1,0 aus dem content_css) und jede Theme-Regel mühelos gewinnt. Größen als Design-Tokens (var(--text-*)), damit die Basis zum Typenraster des aktiven Themes passt. ============================================================ */ /* In @layer base: Vorrang jetzt über die Cascade-Layer, nicht über „unlayered". Ungelayerte Regeln schlugen bisher JEDE gelayerte Utility – deshalb überstimmte diese Basis das theme.css (`@layer utilities`) und die Utility-Klassen des Inhalts (h-full/object-cover, text-6xl, no-underline …). Als base-Layer verliert sie sauber gegen utilities (Layer-Ordnung), schlägt aber weiter Preflight (ebenfalls @layer base) – dort gewinnt die höhere `#content`-Spezifität. content_css (inline/ungelayert) und damit der Editor bleiben ohnehin oben auf. Isolation via `#content` unverändert. */ @layer base { #content :where(h1, h2, h3, h4, h5, h6) { font-weight: 700; line-height: 1.2; text-wrap: balance; } #content :where(h1) { font-size: var(--text-4xl); line-height: 1.1; margin-block: 0 .5em; } #content :where(h2) { font-size: var(--text-3xl); margin-block: 1.4em .5em; } #content :where(h3) { font-size: var(--text-2xl); margin-block: 1.2em .4em; } #content :where(h4) { font-size: var(--text-xl); margin-block: 1em .35em; } #content :where(h5) { font-size: var(--text-lg); margin-block: 1em .35em; } #content :where(h6) { font-size: var(--text-base); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-block: 1em .35em; } #content :where(p) { margin-block: 0 1em; line-height: 1.7; } #content :where(ul, ol) { margin-block: 0 1em; padding-inline-start: 1.5em; } #content :where(ul) { list-style: disc; } #content :where(ol) { list-style: decimal; } #content :where(li) { margin-block: .25em 0; } #content :where(a) { text-decoration: underline; text-underline-offset: 2px; } #content :where(blockquote) { margin-block: 1em; padding-inline-start: 1em; border-inline-start: 3px solid currentColor; } #content :where(hr) { margin-block: 2em; border: 0; border-top: 1px solid currentColor; opacity: .15; } #content :where(img) { max-width: 100%; height: auto; } #content :where(table) { width: 100%; border-collapse: collapse; margin-block: 1em; } #content :where(th, td) { border: 1px solid currentColor; padding: .5em .75em; text-align: start; } #content :where(th) { font-weight: 600; } } /* ============================================================ Animationen ============================================================ */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse-soft { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } .animate-fade-in { animation: fadeIn 0.5s ease forwards; } .animate-slide-up { animation: slideUp 0.6s ease forwards; } /* ============================================================ Komponenten ============================================================ */ /* Button-Base */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.625rem 1.5rem; font-weight: 600; border-radius: 0.75rem; transition: all var(--transition-base); cursor: pointer; border: none; text-decoration: none; } .btn-primary { background-color: var(--color-primary); color: white; } .btn-primary:hover { background-color: var(--color-primary-dark); box-shadow: 0 10px 25px -5px rgba(82, 82, 91, 0.3); } /* Card */ .card { background: white; border-radius: 1rem; padding: 1.5rem; border: 1px solid #e2e8f0; transition: all var(--transition-base); } .card:hover { box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.1); border-color: #d4d4d8; } /* Flash-Message Transitions */ .flash-message { animation: slideUp 0.3s ease forwards; }