/* * rte-content.css — Typografie für Rich-Text-Inhalte (Textblock) * * WICHTIG: Diese Datei ist die *einzige* Quelle für das Aussehen von * Editor-Texten und wird an ZWEI Stellen geladen: * 1. Frontend: im Layout, Wrapper trägt die Klasse `.rte` * 2. TinyMCE: als `content_css`, der iframe- trägt `body_class: 'rte'` * * Dadurch sieht der Text im Editor exakt so aus wie im Frontend (echtes WYSIWYG). * Alle Regeln daher auf `.rte` scopen und keine Tailwind-@apply verwenden – * TinyMCE lädt reines CSS ohne Tailwind-Build. * * Die --color-primary-* Variablen kommen im Frontend aus globals.css/ebu.css; * im Editor-iframe sind sie nicht vorhanden, daher überall mit Fallback nutzen. */ .rte { color: var(--text-color); /* Basis-Schriftgröße des Rich-Text-Bereichs = 14px (0.875 × 16px Root). Bewusst in rem, damit der Seiten-Zoom aus dem Barrierefreiheitsmenü weiter greift. Alle Überschriften skalieren in em relativ zu diesen 14px, sodass 14px hier die effektive „1rem"-Basis der Rich-Text-Typografie ist. */ font-size: 0.875rem; line-height: 1.7; word-wrap: break-word; } /* Überschriften ---------------------------------------------------------- */ .rte h1, .rte h2, .rte h3, .rte h4, .rte h5, .rte h6 { color: var(--text-color); font-weight: 700; line-height: 1.25; margin-top: 1.75em; margin-bottom: 0.6em; } /* Größen relativ zur 14px-Basis (em), Pixelwerte als Kommentar */ .rte h1 { font-size: 2.25em; } /* ~31.5px */ .rte h2 { font-size: 1.75em; } /* ~24.5px */ .rte h3 { font-size: 1.375em; } /* ~19px */ .rte h4 { font-size: 1.125em; } /* ~16px */ .rte h5 { font-size: 1em; } /* 14px */ .rte h6 { font-size: 0.875em; text-transform: uppercase; letter-spacing: 0.05em; } /* ~12px */ /* Erstes Element ohne oberen Abstand, damit der Block bündig oben sitzt */ .rte > *:first-child { margin-top: 0; } .rte > *:last-child { margin-bottom: 0; } /* Fließtext ------------------------------------------------------------- */ .rte p { margin-top: 0; margin-bottom: 1.15em; } .rte strong, .rte b { font-weight: 700; } .rte em, .rte i { font-style: italic; } .rte u { text-decoration: underline; } .rte s, .rte strike, .rte del { text-decoration: line-through; } .rte small { font-size: 0.875em; } .rte sub, .rte sup { font-size: 0.75em; line-height: 0; } /* Links ------------------------------------------------------------------ */ .rte a { color: var(--color-primary-blue, #0f6681); text-decoration: underline; text-underline-offset: 2px; transition: color 200ms ease-in-out; } .rte a:hover { color: var(--color-primary-green, #5d8f20); } /* Listen ----------------------------------------------------------------- */ .rte ul, .rte ol { margin-top: 0; margin-bottom: 1.15em; padding-left: 1.6em; } .rte ul { list-style: disc; } .rte ol { list-style: decimal; } .rte li { margin-top: 0.35em; margin-bottom: 0.35em; } .rte li > ul, .rte li > ol { margin-top: 0.35em; margin-bottom: 0.35em; } /* Zitat ------------------------------------------------------------------ */ .rte blockquote { margin: 1.5em 0; padding-left: 1em; border-left: 4px solid var(--color-primary-blue, #0f6681); color: #4b5563; /* gray-600 */ font-style: italic; } /* Code ------------------------------------------------------------------- */ .rte code { background: #f3f4f6; /* gray-100 */ padding: 0.15em 0.35em; border-radius: 0.25rem; font-size: 0.875em; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .rte pre { background: #1f2937; /* gray-800 */ color: #f9fafb; padding: 1em; border-radius: 0.5rem; overflow-x: auto; margin: 1.5em 0; } .rte pre code { background: transparent; padding: 0; color: inherit; } /* Trenner ---------------------------------------------------------------- */ .rte hr { border: 0; border-top: 1px solid #e5e7eb; /* gray-200 */ margin: 2em 0; } /* Bilder ----------------------------------------------------------------- */ .rte img { max-width: 100%; height: auto; border-radius: 0.5rem; } /* Tabellen --------------------------------------------------------------- */ .rte table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 0.9375em; /* ~13px, relativ zur 14px-Basis */ } .rte th, .rte td { border: 1px solid #e5e7eb; /* gray-200 */ padding: 0.5em 0.75em; text-align: left; vertical-align: top; } .rte th { background: #f9fafb; /* gray-50 */ font-weight: 700; }