/* ========================================================================== SCL — Core-Blöcke im Kleid der Schulseiten Getrennt von scl-blocks.css, und das mit Absicht: jenes Stylesheet sagt in seinem Kopf zu, ausschließlich .scl- Klassen anzufassen. Hier passiert das Gegenteil — es werden Blöcke aus dem WordPress-Kern gestaltet, die niemand aus diesem Plugin ausliefert. Wer das rückgängig machen will, hängt diese eine Datei ab; die eigenen Blöcke bleiben davon unberührt. SPEZIFITÄT: Alle Regeln stehen hinter `:is( .entry-content, .editor-styles-wrapper )`. Das ist kein Zierrat, sondern nötig — die Kernstile des Accordions liegen bei (0,3,0), und ein Gleichstand hinge an der Ladereihenfolge. Wo der Kern selbst einen längeren Selektor benutzt, wird er hier vollständig nachgebildet und um dieses Präfix erweitert. Die betroffene Stelle ist unten vermerkt. Die zwei Wurzeln stehen für die zwei Orte, an denen dieselben Blöcke erscheinen: `.entry-content` ist der Inhaltsbereich der fertigen Seite, `.editor-styles-wrapper` der Blockeditor. Ohne die zweite sähe die Redaktion beim Schreiben etwas anderes als die Besucher hinterher. `:is()` erbt die Spezifität seines stärksten Arguments — hier also (0,1,0) wie eine einzelne Klasse, die Rechnung oben bleibt gültig. Die Tokens (--scl-orange und Geschwister) kommen aus scl-blocks.css. Jede Regel führt trotzdem einen Ersatzwert mit, damit die Gestaltung nicht in Schwarz auf Weiß zusammenfällt, falls die Dateien einmal getrennt laden. ========================================================================== */ /* -------------------------------------------------------------------------- Akkordeon (core/accordion) Die Leitziele stehen als neun EINZELNE Accordion-Blöcke untereinander, nicht als neun Einträge in einem. Deshalb kann die Liste ihre Linien nicht innen ziehen: jeder Block bekommt eine Oberlinie, und derjenige, auf den kein weiterer folgt, zusätzlich eine untere. `:has()` statt `:last-of-type`, weil Letzteres bricht, sobald hinter dem Akkordeon ein anderer Block steht. -------------------------------------------------------------------------- */ :is( .entry-content, .editor-styles-wrapper ) .wp-block-accordion { border-top: 1px solid var( --scl-line, #e3ded7 ); } /* Der Abstand fällt nur ZWISCHEN den Blöcken weg, damit sie als eine Liste zusammenrücken. Vor dem ersten und nach dem letzten bleibt der Abstand des Containers stehen — sonst klebte die Liste am vorangehenden Absatz und am folgenden Block. */ :is( .entry-content, .editor-styles-wrapper ) .wp-block-accordion + .wp-block-accordion { margin-block-start: 0; } :is( .entry-content, .editor-styles-wrapper ) .wp-block-accordion:not( :has( + .wp-block-accordion ) ) { border-bottom: 1px solid var( --scl-line, #e3ded7 ); } :is( .entry-content, .editor-styles-wrapper ) .wp-block-accordion-heading { margin: 0; } /* Der Knopf trägt die ganze Zeile, damit die Klickfläche bis zum Zeichen reicht und nicht nur die Schrift selbst anfassbar ist. */ :is( .entry-content, .editor-styles-wrapper ) .wp-block-accordion-heading__toggle { width: 100%; display: flex; align-items: center; gap: 1.5rem; padding: 1.15rem 0; background: none; border: 0; text-align: left; cursor: pointer; } :is( .entry-content, .editor-styles-wrapper ) .wp-block-accordion-heading__toggle-title { flex: 1; font-family: var( --scl-serif, Georgia, serif ); font-weight: 500; font-size: clamp( 1.2rem, 2vw, 1.5rem ); line-height: 1.3; color: var( --scl-navy, #14304a ); transition: color 0.18s ease; } /* Das Zeichen wird gezeichnet, nicht gesetzt: der Kern legt ein „+" als Text in den Knopf und tauscht es beim Öffnen NICHT aus. Zwei Striche aus Pseudoelementen lassen sich dagegen sauber überblenden und sitzen unabhängig von der Schrift genau mittig. Der Textknoten verschwindet über font-size: 0; die Striche hängen an einer Box fester Größe und ragen deshalb nicht über die rechte Kante hinaus. */ :is( .entry-content, .editor-styles-wrapper ) .wp-block-accordion-heading__toggle-icon { flex: none; position: relative; width: 0.95rem; height: 0.95rem; font-size: 0; color: var( --scl-orange, #E8521A ); } :is( .entry-content, .editor-styles-wrapper ) .wp-block-accordion-heading__toggle-icon::before, :is( .entry-content, .editor-styles-wrapper ) .wp-block-accordion-heading__toggle-icon::after { content: ''; position: absolute; left: 0; top: 50%; width: 100%; height: 1.5px; background: currentColor; transform: translateY( -50% ); transition: transform 0.2s ease, opacity 0.2s ease; } :is( .entry-content, .editor-styles-wrapper ) .wp-block-accordion-heading__toggle-icon::after { transform: translateY( -50% ) rotate( 90deg ); } /* Aus dem Plus wird ein Minus: der senkrechte Strich dreht sich in die Waagerechte und blendet dabei aus. */ :is( .entry-content, .editor-styles-wrapper ) .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon::after { transform: translateY( -50% ) rotate( 0deg ); opacity: 0; } /* NACHGEBILDETER KERNSELEKTOR: Der Kern dreht das Zeichen im offenen Zustand um 45 Grad, macht aus dem Plus also ein Kreuz. Das ist die Geste zum Schließen eines Dialogs, nicht die zum Zuklappen eines Abschnitts — und sie würde unseren waagerechten Strich schräg stellen. Seine Regel lautet `.wp-block-accordion-item.is-open > .wp-block-accordion-heading .…__toggle-icon` und liegt bei (0,3,0); erst mit `.entry-content` davor gewinnt diese hier. */ :is( .entry-content, .editor-styles-wrapper ) .wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon { transform: none; } :is( .entry-content, .editor-styles-wrapper ) .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title, :is( .entry-content, .editor-styles-wrapper ) .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-title { color: var( --scl-orange, #E8521A ); } /* Der Knopf hat keinen eigenen Grund und keinen Rahmen — ohne sichtbaren Fokusring wäre er mit der Tastatur nicht auffindbar. */ :is( .entry-content, .editor-styles-wrapper ) .wp-block-accordion-heading__toggle:focus-visible { outline: 2px solid var( --scl-orange, #E8521A ); outline-offset: 3px; } /* Die Zeilenlänge wird begrenzt, weil der Fließtext sonst über die volle Containerbreite läuft — bei 1200 px sind das über 150 Zeichen je Zeile. */ :is( .entry-content, .editor-styles-wrapper ) .wp-block-accordion-panel { padding: 0 0 1.75rem; max-width: 46rem; } :is( .entry-content, .editor-styles-wrapper ) .wp-block-accordion-panel > :first-child { margin-top: 0; } :is( .entry-content, .editor-styles-wrapper ) .wp-block-accordion-panel > :last-child { margin-bottom: 0; } @media ( prefers-reduced-motion: reduce ) { :is( .entry-content, .editor-styles-wrapper ) .wp-block-accordion-heading__toggle-title, :is( .entry-content, .editor-styles-wrapper ) .wp-block-accordion-heading__toggle-icon::before, :is( .entry-content, .editor-styles-wrapper ) .wp-block-accordion-heading__toggle-icon::after { transition: none; } } /* -------------------------------------------------------------------------- Tabelle (core/table) Vorbild sind die Tabellen der Entwurfsseiten: Kopfzeile auf schwarzem Grund in kleiner Versal-Monospace, feine Trennlinien im Rumpf, Zeilen heben sich beim Überfahren zart in Orange ab. Was der Kern anders macht und hier korrigiert wird: - Das `figure` trägt `overflow-x: auto`. Die Beschriftung liegt darin und wandert beim seitlichen Scrollen aus dem Bild. Sie wird deshalb an den linken Rand geheftet. - Zellen bringen eigene Rahmen mit, die sich mit unseren Trennlinien doppeln. Was die Oberfläche des Kerns NICHT kann und deshalb offenbleibt: eine Zelle zum Zeilenkopf machen (`th scope="row"`) und Zellen verbinden (colspan). Das Datenmodell speichert beides, nur bietet der Editor keinen Weg dorthin. Wer es braucht, setzt es im Code-Editor oder wir bauen einen eigenen Block. Alle Farben laufen über die --scl-tab-* Variablen weiter unten. Der Grund steht bei „Tabelle im dunklen Abschnitt": ein Abschnitt auf schwarzem Grund braucht dieselbe Tabelle mit anderen Werten, nicht eine zweite Tabelle. -------------------------------------------------------------------------- */ :is( .entry-content, .editor-styles-wrapper ) .wp-block-table { border: 1px solid var( --scl-tab-rahmen, var( --scl-line, #e3ded7 ) ); background: var( --scl-tab-grund, var( --scl-white, #ffffff ) ); } /* border: 0 ist nicht überflüssig: Die Tabelle bringt einen eigenen 1px-Rahmen in hellem Grau mit, der ZUSÄTZLICH zu dem des figure steht. Zwischen Außenkante und schwarzem Tabellenkopf blitzt dadurch ein heller Streifen durch, als fehle dem Kopf an jeder Seite ein Pixel. */ :is( .entry-content, .editor-styles-wrapper ) .wp-block-table table { width: 100%; border-collapse: collapse; border: 0; } /* Eine leere Zelle hinter einer verbundenen ist überzählig — sie schöbe eine zusätzliche Spalte in die Tabelle. Der Fall entsteht, wenn jemand `colspan` im Code-Editor ergänzt und die Zelle stehen lässt, die dadurch wegfällt. Sichtbar wurde er als vierte, leere Spalte in der Säulentabelle. */ :is( .entry-content, .editor-styles-wrapper ) .wp-block-table [colspan] ~ td:empty, :is( .entry-content, .editor-styles-wrapper ) .wp-block-table [colspan] ~ th:empty { display: none; } :is( .entry-content, .editor-styles-wrapper ) .wp-block-table thead th { background: var( --scl-tab-kopf, var( --scl-ink, #1a1a1a ) ); color: #fff; text-align: left; font-weight: 500; font-family: var( --scl-mono, monospace ); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.9rem 1.2rem; border: 0; } /* Die Kopfzeile ist durch Versalien, Laufweite und den dunklen Grund schon abgesetzt. Wer die Beschriftung im Editor zusätzlich fett setzt, bekäme hier 700 statt 500 — die Kopfzeilen zweier Tabellen sähen dann verschieden aus, je nachdem, wer sie angelegt hat. */ :is( .entry-content, .editor-styles-wrapper ) .wp-block-table thead th strong, :is( .entry-content, .editor-styles-wrapper ) .wp-block-table thead th b { font-weight: inherit; } /* border: 0 zuerst, dann nur die untere Linie — sonst stehen die Zellrahmen des Kerns neben unserer Trennlinie und die Tabelle bekommt ein Gitter. */ :is( .entry-content, .editor-styles-wrapper ) .wp-block-table tbody th, :is( .entry-content, .editor-styles-wrapper ) .wp-block-table tbody td { padding: 0.95rem 1.2rem; border: 0; border-bottom: 1px solid var( --scl-tab-linie, var( --scl-line, #e3ded7 ) ); font-size: 0.94rem; line-height: 1.6; vertical-align: top; text-align: left; } :is( .entry-content, .editor-styles-wrapper ) .wp-block-table tbody th { font-weight: 500; color: var( --scl-tab-kopfzelle, var( --scl-ink, #1a1a1a ) ); } :is( .entry-content, .editor-styles-wrapper ) .wp-block-table tbody tr:last-child th, :is( .entry-content, .editor-styles-wrapper ) .wp-block-table tbody tr:last-child td { border-bottom: 0; } :is( .entry-content, .editor-styles-wrapper ) .wp-block-table tbody tr:hover { background: var( --scl-tab-hover, var( --scl-orange-soft, rgba( 232, 82, 26, 0.08 ) ) ); } /* Rufnummern und Adressen in Tabellen sind fast immer Links. Ohne eigene Regel erbt die Zelle Astras Linkfarbe samt Unterstreichung — auf dunklem Grund ein dunkles Rot mit 2,5:1, also unter jeder Lesbarkeitsschwelle. */ :is( .entry-content, .editor-styles-wrapper ) .wp-block-table tbody a { color: var( --scl-tab-link, var( --scl-orange-dark, #c4431a ) ); text-decoration: none; border-bottom: 1px solid var( --scl-tab-link-linie, var( --scl-line-strong, #cfc8bf ) ); } :is( .entry-content, .editor-styles-wrapper ) .wp-block-table tbody a:hover { color: var( --scl-tab-link-hover, var( --scl-orange, #E8521A ) ); border-bottom-color: currentColor; } /* An den linken Rand geheftet: Das figure scrollt seitlich, die Beschriftung soll dabei stehen bleiben statt mit der Tabelle davonzulaufen. */ :is( .entry-content, .editor-styles-wrapper ) .wp-block-table figcaption { position: sticky; left: 0; margin: 0; padding: 0.75rem 1.2rem; font-size: 0.86rem; line-height: 1.65; color: var( --scl-tab-caption, var( --scl-muted, #6f6a62 ) ); text-align: left; border-top: 1px solid var( --scl-tab-linie, var( --scl-line, #e3ded7 ) ); } /* -------------------------------------------------------------------------- Tabelle im dunklen Abschnitt Auf schwarzem Grund kippt die helle Tabelle: Der weiße Grund des `figure` blitzt unter der letzten Zeile als Streifen durch, der schwarze Tabellenkopf verschwindet im Abschnitt, und die hellen Trennlinien werden zum Gitter, das lauter ist als der Inhalt. Deshalb tauscht der dunkle Abschnitt nur die Werte: transparenter Grund, Linien aus Weiß mit wenig Deckung, ein Kopf, der sich als heller Streifen absetzt statt als schwarzer Block. Zwei Wege führen hierher, und das mit Absicht: - `.scl-dunkel` als zusätzliche CSS-Klasse am Spectra-Container. Der verlässliche Weg, er wirkt auch im Editor. - ein dunkler Abschnittskopf als direktes Geschwister. Damit sehen die bestehenden Seiten ohne Nacharbeit richtig aus. Beide stehen in einem :is(), damit die Regel in Browsern ohne :has() nicht komplett ausfällt, sondern nur den zweiten Weg verliert. Der Abschnitt setzt keine Farben, nur Variablen — die Tabellenregeln oben bleiben die einzige Stelle, an der Rahmen, Kopf und Linien beschrieben sind. -------------------------------------------------------------------------- */ :is( .entry-content, .editor-styles-wrapper ) :is( .scl-dunkel, :has( > .scl-abschnittskopf--dunkel ) ) { --scl-tab-grund: transparent; --scl-tab-rahmen: rgba( 255, 255, 255, 0.22 ); --scl-tab-kopf: rgba( 255, 255, 255, 0.1 ); --scl-tab-linie: rgba( 255, 255, 255, 0.16 ); --scl-tab-kopfzelle: #fff; --scl-tab-hover: rgba( 255, 255, 255, 0.06 ); --scl-tab-link: #fff; --scl-tab-link-linie: rgba( 243, 161, 131, 0.55 ); --scl-tab-link-hover: #f3a183; --scl-tab-caption: rgba( 255, 255, 255, 0.6 ); } /* Der Zellentext folgt der Textfarbe des Abschnitts. Wer im Editor am Tabellenblock eine Textfarbe setzt, überschreibt das mit !important — die Angabe ist dort also nicht nötig und stiftet nur Verwirrung, wenn der Abschnitt später eine andere Grundfarbe bekommt. */ :is( .entry-content, .editor-styles-wrapper ) :is( .scl-dunkel, :has( > .scl-abschnittskopf--dunkel ) ) .wp-block-table tbody td { color: rgba( 255, 255, 255, 0.92 ); } /* -------------------------------------------------------------------------- Blockstil „Zeitplan" — für Tabellen, deren Zellen Uhrzeiten enthalten. Im Editor unter „Stile" auswählbar, registriert in scl-blocks.php. Die Zeiten stehen in Monospace mit Tabellenziffern, damit die Doppelpunkte und Bindestriche der Spalten untereinander stehen. `white-space: nowrap` verhindert, dass „6.00 – 7.25" mitten in der Spanne umbricht — genau das drückt aber bei automatischer Spaltenverteilung die Textspalte zusammen. Deshalb bekommt die Tabelle eine Mindestbreite und darf seitlich scrollen, und die erste Spalte eine Mindestbreite für die Beschriftungen. -------------------------------------------------------------------------- */ :is( .entry-content, .editor-styles-wrapper ) .wp-block-table.is-style-zeitplan table { min-width: 46rem; table-layout: auto; } :is( .entry-content, .editor-styles-wrapper ) .wp-block-table.is-style-zeitplan tbody tr > :first-child { min-width: 14rem; } :is( .entry-content, .editor-styles-wrapper ) .wp-block-table.is-style-zeitplan tbody td { font-family: var( --scl-mono, monospace ); font-size: 0.84rem; white-space: nowrap; color: var( --scl-orange-dark, #c4431a ); font-weight: 500; font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- Blockstil „Vergleich" — für Tabellen, die ein Merkmal je Zeile gegen mehrere Spalten stellen: links die Benennung, rechts Fließtext je Stufe oder Gruppe. Im Editor unter „Stile" auswählbar, registriert in scl-blocks.php. Der Gegenentwurf zu „Zeitplan": Dort stehen kurze Zeitangaben, die nicht umbrechen dürfen; hier stehen ganze Sätze, die umbrechen müssen. Wer den Zeitplan-Stil auf eine Texttabelle legt, schiebt die Sätze in einer einzigen langen Zeile aus dem Bild. Die erste Spalte wird als Benennung gesetzt, weil die Oberfläche des Kerns keine Zeilenköpfe (`th scope="row"`) anbietet. Das ist Optik, kein Ersatz: Für Screenreader bleibt es eine gewöhnliche Zelle. -------------------------------------------------------------------------- */ :is( .entry-content, .editor-styles-wrapper ) .wp-block-table.is-style-vergleich tbody tr > :first-child { font-weight: 700; color: var( --scl-ink, #1a1a1a ); width: 12rem; } :is( .entry-content, .editor-styles-wrapper ) .wp-block-table.is-style-vergleich tbody td { font-family: inherit; white-space: normal; }