/* Theme Name: PLC Wien Theme URI: https://gelugwien.at Author: Jochum Media, Andreas Jochum Author URI: https://www.jmx.at Description: Eigenstaendiges Theme fuer das Panchen Losang Chogyen Gelug-Zentrum Wien. Ohne Seitenbaukasten, ohne jQuery. Termine stehen im Zentrum: serverseitig gerenderter Kalender, Terminlisten und Terminseiten mit strukturierten Daten. Auf Performance und auf eine Redaktion ausgelegt, in der sich auch Laien nicht verlaufen koennen. Version: 1.1.0 Requires at least: 6.5 Tested up to: 7.1 Requires PHP: 8.1 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html Update URI: false Text Domain: plc Tags: custom-menu, featured-images, accessibility-ready */ /* ========================================================================== 1. Design-Tokens Eine Quelle fuer Farbe, Schrift, Abstand. Wer das Erscheinungsbild aendern will, aendert hier - nicht in den Komponenten weiter unten. ========================================================================== */ :root { /* Farben. Das Maroon ist die Leitfarbe (Ordensfarbe der Gelug-Tradition), Gold der Akzent. Alle Textfarben sind gegen ihren Grund auf mindestens 4.5:1 geprueft. */ --c-ground: #FAF8F5; --c-surface: #FFFFFF; --c-sunk: #F2EDE8; --c-ink: #1F1A18; --c-ink-2: #574C49; /* #857873 erreichte nur 4,02:1 auf --c-ground. Alle fuenf Verwendungsstellen stehen bei 13 px, es gilt also 4,5:1. */ --c-ink-3: #6E625E; --c-ink-3-invers: #A79B96; /* 6,37:1 auf dem dunklen Fussgrund */ --c-rule: #E5DCD5; --c-rule-strong: #CBBBB1; /* Nur fuer die Kontur von Bedienelementen (Eingabefelder, .btn--ghost, .nav-toggle): WCAG 1.4.11 verlangt dort 3:1, --c-rule-strong schafft 1,86:1 auf Weiss (D-14). Gerechnet: 3,58:1 auf --c-surface, 3,38:1 auf --c-ground, 3,08:1 auf --c-sunk - der dritte Wert entscheidet, weil die Kalender-Blaetterknoepfe auf /termin/ in einem section--sunk stehen. Karten-Hover und Trennlinien bleiben bei --c-rule-strong. */ --c-rule-ctrl: #95847B; --c-maroon: #7A2430; --c-maroon-dark: #5E1A24; --c-maroon-soft: #F5E7E6; --c-gold: #8A6718; --c-gold-soft: #F7F0DD; --c-ok: #2C6349; --c-ok-soft: #E6F0EA; /* ---------------------------------------------------------------------- Schrift: ZWEI Familien, SECHS Groessen, ZWEI Schnitte. Bewusst wenig. Hierarchie entsteht hier nicht durch immer neue Schriftgroessen, sondern durch Familie, Schnitt, Farbe und Abstand - das haelt die Seiten untereinander ruhig. Wer eine siebte Groesse braucht, hat meist ein Abstandsproblem. Systemschriften: kein externer Request, kein Layoutsprung beim Laden, auf jedem Geraet sofort da. ---------------------------------------------------------------------- */ /* Georgia statt eines unbestimmten Stapels. "Iowan Old Style" ist unter Windows nicht installiert - dort landete der Stapel auf Palatino Linotype, auf dem Mac auf Iowan, auf Android auf Noto Serif. Der Entwurf existierte also gar nicht als festes Objekt. Entscheidend ist der Fettschnitt: Palatino Bold laeuft nur +2,5 % breiter als sein Regular und ist kaum als Bold erkennbar, Georgia Bold +15,6 % (aus der hmtx-Tabelle gemessen). */ --f-display: Georgia, "Times New Roman", serif; --f-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Nur fuer code/kbd/pre - dort ist gleiche Zeichenbreite inhaltlich richtig. Gestalterisch zaehlt sie nicht als dritte Schrift. */ --f-mono: ui-monospace, SFMono-Regular, Consolas, monospace; /* Groessen: fluid zwischen Mobil und Desktop, ohne Media Query. hero - nur der Aufmacher der Startseite xl - Seitenueberschrift (H1) und Abschnittsueberschrift (H2) lg - H3, Kartentitel, Terminnamen, Vorspann base - Fliesstext sm - Metazeilen, Bildunterschriften, Schaltflaechen xs - Kicker, Datumsmarken, Etiketten */ /* --fs-md kommt hinzu, --fs-hero entfaellt als Token: es hatte genau eine Verwendung (.hero__title) und gehoert damit an seine Stelle, nicht in die Skala. Die Zahl bleibt bei sechs. Warum --fs-md noetig ist: h3 trug bisher --fs-base, also exakt die Fliesstextgroesse. Weil die Serife eine kleinere x-Hoehe hat als die Grundschrift (Georgia 0,4814 gegen Segoe UI 0,5000 em), erschien die H3 OPTISCH KLEINER als der Absatz, den sie ueberschreibt. Auf UEBER UNS betraf das 38 Ueberschriften - die Seite hatte unterhalb der H2 keine sichtbare Gliederung mehr. */ --fs-xl: clamp(1.55rem, 1.2rem + 1.7vw, 2.3rem); /* 36,8 px h1 */ --fs-lg: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem); /* 22,4 px h2 */ --fs-md: 1.1875rem; /* 19 px h3 */ --fs-base: 1.0625rem; /* 17 px Text */ --fs-sm: 0.9375rem; /* 15 px Meta */ --fs-xs: 0.8125rem; /* 13 px Etiketten */ /* Zwei Schnitte. Mehr braucht es nicht, und Systemschriften haben ohnehin selten mehr als diese beiden verlaesslich. */ --fw-normal: 400; --fw-bold: 600; /* Ziffern in Tabellen, Zeiten und Datumsmarken gleich breit - dafuer braucht es keine eigene Schreibmaschinenschrift. */ --num: tabular-nums; /* Zeilenhoehen. Vorher standen sieben verschiedene Zahlen hart in den Komponenten - der einzige typografische Wert ohne Skala. */ --lh-tight: 1.18; /* Ueberschriften ab 22 px */ --lh-snug: 1.35; /* mehrzeilige Titel in Listen und Karten */ /* 1.60 statt 1.65: sobald die Lesebreite wirklich greift, fallen die Absaetze bei 1,65 auseinander statt Bloecke zu bilden. */ --lh-text: 1.60; /* Fliesstext */ /* Kein neuer Gestaltungswert, sondern eine Rechnung: 17 x 1,60 = 27,2 px. Ab hier werden die Abstaende im Fliesstext aus der Zeile abgeleitet, statt frei aus der --s-Skala gegriffen. */ --lead: calc(var(--fs-base) * var(--lh-text)); /* Abstaende: eine Skala, damit Abstaende nicht beliebig werden. */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; /* War 68ch - zwei Fehler in einem Wert. Schriftabhaengig: ch ist die Vorbreite der Null. Daraus entstanden DREI rechte Kanten in einer Spalte (h2 761, Absatz 623, h3 578 px). Und zu breit: an 20.000 Zeichen echtem Text dieser Website gemessen traegt die 623-px-Spalte 80,4 Zeichen, nicht 68. 33rem = 528 px ergibt gemessene 68,1 Zeichen. */ --measure: 33rem; /* Lesebreite Fliesstext, 528 px */ --wide: 1180px; /* Inhaltsbreite */ --narrow: 780px; /* Breite fuer Textseiten */ --radius: 3px; /* Laufweite der 13-px-Versalzeilen. Fuenf Stellen hatten dafuer vier verschiedene Werte (.1 / .1 / .08 / .06 / .04em). */ --track-caps: .08em; --shadow-1: 0 1px 2px rgba(31, 26, 24, .06), 0 2px 8px rgba(31, 26, 24, .04); --shadow-2: 0 2px 4px rgba(31, 26, 24, .07), 0 8px 24px rgba(31, 26, 24, .07); /* Bewusst nur hell. Bordeaux und Gold auf Warmweiss SIND der Entwurf; ein zweiter Token-Satz fuer Dunkel waere eine eigene Gestaltungs- leistung, die niemand beauftragt hat. Ohne diese Zeile zeichnen Browser mit Systemvorgabe "dunkel" Formularfelder, Scrollbalken und
-Pfeile in ihrer Dunkelvariante auf den hellen Grund (D-23). */ color-scheme: light; } /* ========================================================================== 2. Grundlagen ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; /* * Die Kopfzeile klebt oben und misst je nach Breite 73 bis 109 px. * Ohne diesen Abstand landet jedes Sprungziel - der Sprunglink auf * #inhalt, die Gruppen bei den Lehrenden, #kalender - genau darunter. * Der unguenstigste Fall, aufgerundet: zu weit zu springen faellt * niemandem auf, zu wenig schon. */ scroll-padding-top: calc(112px + var(--s-4)); } body { margin: 0; background: var(--c-ground); color: var(--c-ink); font-family: var(--f-body); font-size: var(--fs-base); line-height: var(--lh-text); /* -webkit-font-smoothing und text-rendering bewusst entfernt: das erste tut unter Windows nichts und duennt den Satz auf dem Mac aus - es verschaerft genau die Plattformdifferenz, die der Schriftwechsel beseitigt. */ } h1, h2, h3, h4, h5, h6 { font-family: var(--f-display); font-weight: var(--fw-bold); line-height: var(--lh-tight); /* Laufweite und Umbruch stehen im Abschnitt "Satzbild": negative Laufweite ist eine Korrektur fuer Displaygroessen und hat bei 17 px nichts zu suchen. */ margin: 0 0 var(--s-4); color: var(--c-ink); } /* Ueberschriften: siehe Abschnitt "Satzbild" weiter unten. */ p { margin: 0 0 var(--s-4); } /* * Ohne diese Regel erbt den Browserwert 700 - und innerhalb einer * Ueberschrift (die schon 600 traegt) sogar 900. Auf UEBER UNS waren das * 55 beziehungsweise 11 Vorkommen: zwei zusaetzliche Schriftschnitte, die * niemand vorgesehen hat. */ strong, b { font-weight: var(--fw-bold); } h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong, h1 b, h2 b, h3 b, h4 b, h5 b, h6 b { font-weight: inherit; } a { color: var(--c-maroon); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--c-maroon-dark); } /* Sichtbarer Fokus - Pflicht, nicht Geschmackssache. Wird nur bei Tastaturbedienung gezeigt, damit Mausklicks keinen Rahmen hinterlassen. */ :focus-visible { outline: 2px solid var(--c-maroon); outline-offset: 2px; border-radius: 2px; } img, picture, svg, video { max-width: 100%; height: auto; display: block; } figure { margin: 0 0 var(--s-5); } figcaption { font-size: var(--fs-sm); color: var(--c-ink-2); padding-top: var(--s-2); } hr { border: 0; border-top: 1px solid var(--c-rule); margin: var(--s-7) 0; } blockquote { margin: 0 0 var(--s-5); padding: var(--s-2) 0 var(--s-2) var(--s-5); border-left: 3px solid var(--c-maroon); font-family: var(--f-display); font-size: var(--fs-lg); color: var(--c-ink-2); } code, kbd, pre { font-family: var(--f-mono); font-size: var(--fs-sm); } pre { background: var(--c-sunk); padding: var(--s-4); overflow-x: auto; border-radius: var(--radius); } table { border-collapse: collapse; width: 100%; } /* Breite Inhalte scrollen in sich, nie die ganze Seite. */ .table-wrap { overflow-x: auto; margin-bottom: var(--s-5); } /* ========================================================================== 2b. SATZBILD Aus der Begutachtung durch Typografie, Grafik und Lesbarkeitspruefung. Jede Regel hier ersetzt eine, die vorher an anderer Stelle stand - es kommt nichts additiv dazu. ========================================================================== */ /* ========================================================================== A. SATZSPIEGEL — das ist der eigentliche Eingriff Ersetzt style.css:248-258 vollstaendig. Gemessen auf /uber-uns/: von rund 40.000 Zeichen Fliesstext stehen 37.544 (94 %) in 14
-Bloecken. Der bisherige Selektor `.prose > p` ist ein Kind-Kombinator und erreicht Enkel nicht - diese Bloecke liefen ungedeckelt ueber 1116 px, die laengste Zeile mit rund 115 Zeichen. Das ist der groesste Einzeleffekt auf dieser Website. ========================================================================== */ /* * .not-prose: Bauteile im Fliesstext. * * Kalender, Lehrende, Downloads und Formulare werden per Shortcode IN * .prose gerendert (inc/shortcodes.php huellt jede Ausgabe in *
). Jede .prose-Regel schliesst deshalb aus, was * in diesem Umschlag steht - sonst bekommt der Monatsname des Kalenders * eine Linie und 528 px Lesebreite, und die Gruppenkoepfe der Lehrenden * zwei Linien uebereinander (gemessen auf /kalender/ und /lehrerinnen/, * Pruefbericht D-02). * * :not(:where(...)) statt :not(...): :where hat keine Spezifitaet, die * Regeln behalten also exakt ihr bisheriges Gewicht in der Kaskade. Ein * blosses :not(.not-prose *) haette jede Regel um eine Klasse angehoben * und still Bauteilregeln geschlagen, die heute gewinnen (etwa * .wp-block-column > :first-child oder .section-head h2 { margin: 0 }). */ .prose :is(p, ul, ol, dl, blockquote, summary, h1, h2, h3, h4, h5, h6):not(:where(.not-prose *)) { max-width: var(--measure); } /* Medien duerfen weiter ueber die volle Containerbreite laufen. */ .prose :is(figure, table, .table-wrap, .wp-block-gallery, .wp-block-embed, .gallery, .alignwide, .alignfull):not(:where(.not-prose *)) { max-width: none; } /* ZWINGEND. Die Redaktion legt Bilder nicht in
, sondern in

und an fuenf Stellen sogar in Ueberschriften: auf /uber-uns/ allein 48 Absaetze mit , dazu zwei Galerien in

. Ohne diese Zeile schrumpfen die Bildstrecken der 14 Rueckblicke von 1116 auf 528 px - derselbe Fehler wie vorher, nur andersherum. */ .prose :is(p, h1, h2, h3, h4, h5, h6):has(img, iframe, video, .gallery):not(:where(.not-prose *)) { max-width: none; } /* TEXTRAHMEN MITTIG, TEXT LINKSBUENDIG (einspaltige Seiten) Auf Seiten, Programmen, Beitraegen, Personen und Downloads steht die 528-px-Lesespalte unter einem 1116 px breiten Aufmacher. Linksbuendig im Umschlag blieben rechts 588 px leer - die Seite sah aus, als fehle dort etwas (Rueckmeldung Andreas, 21.09.2026). Nicht die Absaetze einzeln zentrieren (margin-inline: auto): dann stuenden umflossene Bilder (figure.alignleft) am Rand des Umschlags, weit weg vom Text, und wuerden nicht mehr umflossen. Stattdessen bekommt der Textcontainer einen symmetrischen Innenabstand, so gross wie der Platz neben der Lesespalte. Alles, was heute breiter laufen darf (Medienliste oben, Bausteine, Spaltensatz), tritt mit demselben Mass als negativem Rand wieder heraus - nichts davon wird schmaler. Das Mass kommt aus Container-Einheiten: 100cqw ist die Breite des Umschlags (.wrap bzw. .wrap--narrow), fuer Container und Kinder dieselbe Bezugsgroesse. Unter 528 px wird der Abstand 0, die Mobilansicht aendert sich nicht. Die Terminseite ist zweispaltig und bleibt aussen vor - dort gibt die Spalte das Mass. Einzelne Bilder bleiben IM Rahmen: ein Bild allein in einem Absatz oder ein Bild-Block richtet sich an der Lesespalte aus und wird hoechstens 528 px breit (Rad des Lebens auf /kalender/: 529 -> 528). Links liegende Einzelbilder neben einer mittigen Spalte sahen aus wie verrutscht. Heraus treten nur Dinge, die die Breite brauchen: Bildstrecken (mehrere Bilder in einem Absatz), Galerien, Videos, Tabellen, Spaltensatz, Bausteine und alles mit "weite Breite". */ .page-article > .wrap { container-type: inline-size; } .page-article .prose { --prose-rand: max(0px, calc((100cqw - var(--measure)) / 2)); padding-inline: var(--prose-rand); } /* Auch eine Ebene tiefer: die 14 Rueckblicke auf /uber-uns/ liegen in

, und dort stehen die Bildstrecken und Videos. Das
selbst bleibt in der Spalte (Titelzeile buendig mit dem Text), seine breiten Kinder treten mit demselben Mass heraus. */ :is(.page-article .prose, .page-article .prose > details) > :is(table, .table-wrap, .wp-block-gallery, .wp-block-embed, .video-facade, .gallery, .alignwide, .alignfull, .wp-block-columns, .not-prose, .shortcode-block):not(.alignleft, .alignright), :is(.page-article .prose, .page-article .prose > details) > figure:not(.wp-block-image, .alignleft, .alignright), :is(.page-article .prose, .page-article .prose > details) > :is(p, h1, h2, h3, h4, h5, h6):has(iframe, video, .gallery, img ~ img) { margin-inline: calc(-1 * var(--prose-rand)); } /* Eine herausgetretene Bildstrecke, die schmaler ist als der Umschlag, steht mittig unter der mittigen Spalte - sonst haengt sie links wie vorher der Text. Inline gesetzte Bilder richtet text-align aus, als Block gesetzte (Gutenberg-Bildblock, Bild in Ueberschrift) der automatische Rand. Galerien und Tabellen bleiben aussen vor: die Galerie ist ein Flex-Raster, in Tabellen wuerde text-align die Zellen zentrieren. */ :is(.page-article .prose, .page-article .prose > details) > :is(p, h1, h2, h3, h4, h5, h6):has(iframe, video, .gallery, img ~ img) { text-align: center; } :is(.page-article .prose, .page-article .prose > details) > :is(p, h1, h2, h3, h4, h5, h6):has(img ~ img) > img, :is(.page-article .prose, .page-article .prose > details) > :is(p, h1, h2, h3, h4, h5, h6):has(img ~ img) > a > img { margin-inline: auto; /* Ein alignleft aus der Elementor-Zeit inmitten einer Bildstrecke liesse genau dieses eine Bild links haengen (/uber-uns/, Rueckblick mit 300er-Bild plus 225er-Bild). In einer Strecke gibt es nichts zu umfliessen. */ float: none; } /* Der Akkordeon-Titel ist die Zeile, an der der Leser die Seite ueberfliegt. 14 Stueck, bisher 17 px im Fliesstextschnitt auf 1116 px Breite. */ .prose summary:not(:where(.not-prose *)) { font-family: var(--f-display); font-size: var(--fs-md); font-weight: var(--fw-bold); line-height: var(--lh-snug); cursor: pointer; } /* ========================================================================== B. VERTIKALER RHYTHMUS Ersetzt p { margin: 0 0 var(--s-4) } fuer den Fliesstext und .prose > h2/h3 { margin-top: ... } (style.css:167, 257-258). Gemessen war: H2 oben 48 px, H2 unten 16 px, Absatz zu Absatz 16 px. Die Ueberschrift stand also von IHREM Text genauso weit entfernt wie zwei fremde Absaetze voneinander - sie gehoerte optisch zu niemandem. Ab jetzt ist der Abstand unter einer Ueberschrift immer kleiner als der Absatzabstand, und alle Werte sind Vielfache der Zeile (27,2 px). ========================================================================== */ .prose :is(p, ul, ol, dl, blockquote, figure, table):not(:where(.not-prose *)) { margin-block: 0 calc(var(--lead) * .60); /* 16,3 px */ } .prose h2:not(:where(.not-prose *)) { margin-block: calc(var(--lead) * 1.75) calc(var(--lead) * .35); } /* 47,6 / 9,5 */ .prose h3:not(:where(.not-prose *)) { margin-block: calc(var(--lead) * 1.20) calc(var(--lead) * .30); } /* 32,6 / 8,2 */ .prose :is(h4,h5,h6):not(:where(.not-prose *)) { margin-block: calc(var(--lead) * .95) calc(var(--lead) * .25); } /* 25,8 / 6,8 */ /* Bindet JEDE Ueberschrift an ihren Folgeabsatz, nicht nur h2 und h3. */ /* * Dieselbe Geste wie .section-head im Template, eine Stufe leiser. * "Über uns" hat 18 H2 und keinerlei Gliederung, "Programm" zwoelf. * Die Startseite enthaelt .prose kein einziges Mal - nachgezaehlt im * ausgelieferten HTML, nicht angenommen. */ .prose h2:not(:where(.not-prose *)) { padding-bottom: var(--s-2); border-bottom: 1px solid var(--c-rule); } /* Sicherheitsnetz fuer maßlose SVG im Fliesstext. Ein ohne width und height und ohne CSS-Groesse skaliert auf die Breite seines Containers. Auf "Seminare & Retreats" wurden aus acht 16-Pixel-Pfeilen so acht bildschirmbreite Keile. Die Reste sind entfernt, aber jeder Einbaucode, den die Redaktion kuenftig irgendwo hineinkopiert, bringt dasselbe Problem mit. Ein Symbol im Fliesstext ist zeilenhoch - mehr braucht es nicht. */ .prose svg:not([width]):not([height]):not(:where(.not-prose *)) { width: 1em; height: 1em; vertical-align: -0.125em; } /* Auch das Bauteil selbst (.not-prose) ausnehmen, nicht nur seine Kinder: auf /kalender/ folgt der Kalender-Umschlag auf eine H6 mit den Messenger-Links, und diese Regel nahm ihm den oberen Rand - der Monatskopf klebte an der Linkzeile (F-02). Ein Bauteil bringt seinen Abstand mit (9d), eine Ueberschrift darueber aendert das nicht. */ .prose :is(h1,h2,h3,h4,h5,h6) + *:not(:where(.not-prose, .not-prose *)) { margin-top: 0; } .prose :is(ul, ol):not(:where(.not-prose *)) { padding-left: 1.4em; } .prose li + li:not(:where(.not-prose *)) { margin-top: calc(var(--lead) * .25); } .prose > :first-child { margin-top: 0; } .prose > :last-child { margin-bottom: 0; } /* ========================================================================== C. UEBERSCHRIFTEN — ersetzt style.css:130-165 ========================================================================== */ h1, h2, h3, h4, h5, h6 { font-family: var(--f-display); font-weight: var(--fw-bold); line-height: var(--lh-tight); margin: 0 0 var(--s-4); color: var(--c-ink); /* Negative Laufweite ist eine Korrektur fuer Displaygroessen. Pauschal auf sechs Ebenen gelegt traf sie auch die 34 Elemente, die auf /uber-uns/ bei 17 px stehen: -0,204 px pro Zeichen, in einer Grotesk bei Textgroesse schlicht falsch. Sie wird unten gezielt wieder vergeben. */ letter-spacing: normal; /* Notnagel gegen deutsche Komposita in schmalen Kaesten. */ overflow-wrap: break-word; /* Getrennte Ueberschriften sind unschoen, und zusammen mit text-wrap: balance waeren es zwei Eingriffe in denselben Umbruch. */ hyphens: manual; } h1 { font-size: var(--fs-xl); } h2 { font-size: var(--fs-lg); } h3 { font-size: var(--fs-md); line-height: var(--lh-snug); } /* h4 bis h6 nach dem Redaktionslauf. Sie standen auf Schnitt 400 und gedaempfter Farbe, weil 202 der 983 Elemente dieser Ebenen falsch ausgezeichnet waren: 158 Absaetze mit ueber 120 Zeichen, 12 blosse Bildhuellen, 32 leere. Halbfett waeren daraus graue Kloetze geworden. Diese 202 sind inzwischen zu Absaetzen geworden (siehe Skript h456_bereinigen.php). Nachgezaehlt sind jetzt 100 Prozent der 781 verbliebenen Elemente kuerzer als 120 Zeichen, also echte Ueberschriften. Sie duerfen deshalb wieder aussehen wie welche - vorher waren sie von einem Absatz nicht zu unterscheiden: gleiche Groesse, gleicher Schnitt, gleiche Familie. Keine neuen Werte: --fs-base und --fs-sm sind gesetzt, --fw-bold ist der zweite und letzte Schnitt. Weiterhin BEWUSST OHNE VERSALIEN - 221 dieser Ueberschriften sind zwischen 60 und 120 Zeichen lang, das waere eine Wand. */ h4 { font-family: var(--f-body); font-size: var(--fs-base); font-weight: var(--fw-bold); line-height: var(--lh-snug); color: var(--c-ink); } h5, h6 { font-family: var(--f-body); font-size: var(--fs-sm); font-weight: var(--fw-bold); line-height: var(--lh-snug); color: var(--c-ink-2); } /* Ausnahme fuer die Abschnittskoepfe: H1-Groesse und die Laufweite der grossen Grade. Der Seitentitel .page-header__title traegt dieselben Werte - sie stehen bei seiner Bauteildefinition in Abschnitt 10b, damit jeder Selektor genau EINE Definition hat (vorher stand er hier, in Abschnitt I und in 10b, und die letzte Fassung gewann still, D-11). */ .section-head :is(h1, h2) { font-size: var(--fs-xl); letter-spacing: -0.012em; } /* --fs-hero ist kein Token mehr. Der Wert steht unveraendert an seiner einzigen Verwendungsstelle (.hero__title, Abschnitt 6) - dort auch die negative Laufweite -0.018em: eine Korrektur fuer Displaygroessen, die nur dorthin gehoert, wo tatsaechlich gross gesetzt wird. */ h2, .card__title, .event-row__title { letter-spacing: -0.008em; } /* text-wrap: balance ist die beste einzelne Zeile im Stylesheet - aber nur dort, wo sie greift. Browser schalten oberhalb von rund sechs Zeilen ab, auf einem 1030-Zeichen-h6 tut sie nichts. .hero__title, .page-header__title und .next-event__title tragen die Zeile in ihrer eigenen Definition. */ h1, h2, h3, .card__title, .event-row__title { text-wrap: balance; } h4, h5, h6 { text-wrap: initial; } /* ========================================================================== D. SILBENTRENNUNG UND NOTNAEGEL steht bereits korrekt auf allen Seiten - die halbe Voraussetzung war erfuellt, im Stylesheet stand zu hyphens bisher nichts. Ehrlich eingeordnet: hyphens: auto haengt am Trennwoerterbuch des Systems und greift nicht ueberall. Es ist Vorsorge, kein Fix - deshalb kommt der Notnagel dazu, der IMMER wirkt. ========================================================================== */ .prose :is(p, li, dd, blockquote, summary):not(:where(.not-prose *)) { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 7 4 3; overflow-wrap: break-word; /* faengt E-Mail-Adressen und URLs ab, die hyphens: auto nicht trennt */ } :is(.card__title, .kategorie__name, .site-brand__name, .download-row__title, .event-row__title, dd, td, th) { overflow-wrap: break-word; } /* Einzelne Woerter in der Absatzendzeile - kostet nichts, reiner Fallback in Browsern, die es nicht koennen. */ .prose :is(p, li):not(:where(.not-prose *)), .card__excerpt { text-wrap: pretty; } /* .hero__lead und .page-header__lead tragen text-wrap: pretty in ihrer eigenen Definition (Abschnitte 6 und 10b). */ /* ========================================================================== E. ZIFFERN — die Voreinstellung dreht sich um Segoe UI setzt ohne Zutun tabellarisch (alle zehn Ziffern 0,5391 em). Im Fliesstext heisst das: "1. Jaenner 2026" mit einer ueberbreiten Eins, die mitten im Wortbild ein Loch reisst. Die 9 Stellen mit --num schalten weiterhin bewusst auf tabellarisch zurueck - sie bewirken jetzt erstmals etwas. ========================================================================== */ body { font-variant-numeric: proportional-nums; } :is(table, .calendar, .bank-details, time, .next-event__when, .event-row__meta, .kategorie__zahl) { font-variant-numeric: var(--num); } /* ========================================================================== F. GLAETTUNG — zwei Zeilen ersatzlos streichen (style.css:126-127) -webkit-font-smoothing: antialiased tut unter Windows nichts und duennt den Satz auf dem Mac aus - es verschaerft also genau die Plattformdifferenz, die der Schriftwechsel beseitigen soll. Bei einer Serifenschrift ist das der Unterschied zwischen zart und kraftlos. text-rendering: optimizeLegibility ist in heutigen Browsern folgenlos bis teuer. ========================================================================== */ body { font-family: var(--f-body); font-size: var(--fs-base); line-height: var(--lh-text); /* -webkit-font-smoothing und text-rendering entfernt */ } h1, h2, h3 { font-kerning: normal; } /* ========================================================================== G. DIE ZWEI SEITEN, DIE KEIN .prose HABEN /download/ und /termin/ werden von allem oben nicht erreicht. Auf der Mediathek rendern 175 Blattelemente in vier Groessen (76x 13, 65x 15, 33x 17, 1x 36,6 px) - und der Kategoriename stand mit 15 px KLEINER als der Dateititel mit 17 px darunter. Die Navigationsebene war schwaecher ausgezeichnet als die Inhaltsebene. Mit --fs-md ist das ohne neue Stufe geloest. Die Werte selbst stehen bei den Bauteilen: .kategorie__name und .kategorie__zahl in Abschnitt 9b, .site-footer__bottom in Abschnitt 12. Sie standen hier ein zweites Mal, und weil die Bauteile spaeter im Stylesheet kommen, gewann deren alte Fassung still: der Kategoriename war wieder 15 px, das Copyright stand mit --c-ink-3 bei 2,93:1 statt der gerechneten 6,37:1 (Pruefbericht D-03, D-11). .download-row__title bleibt bei --fs-base und bleibt in der Grundschrift - die Zeile soll unter der Kachel stehen, nicht neben ihr. Unveraendert. ========================================================================== */ /* ========================================================================== H. KOPFZEILE AUF DEM TELEFON Bei 375 px laesst sich jede Seite um 146 px seitlich wegschieben, der Menueknopf liegt teilweise ausserhalb. Ursache ist rein typografisch: .site-brand steht auf flex: none, und der 36 Zeichen lange Vereinsname (326 px in Palatino Bold, 361 px in Georgia Bold bei 17 px) darf nicht brechen. Mit Georgia wird die Korrektur von optional zu zwingend: min-width: 0 an .site-brand__text - es steht bei der Bauteildefinition in Abschnitt 5, hier nur die Begruendung. ========================================================================== */ /* ========================================================================== I. KANTEN IM SEITENKOPF Bisher drei Breiten, keine davon mit der Textspalte geteilt: .page-header__title 24ch in Palatino 36,8 px = 441 px, .page-header__lead 54ch in Segoe UI 22,4 px = 638 px, Absatzspalte 623 px. Jetzt teilen alle drei dieselbe Bezugsgroesse: Titel calc(var(--measure) * .82) = 433 px, Vorspann var(--measure) = 528 px - eingetragen an den Bauteilen in Abschnitt 10b, damit jeder Selektor genau eine Definition hat. Der siebte Breitenwert im Stylesheet (46ch am .hero__lead) faellt damit auch weg. Bei 899 px Viewport hat er tatsaechlich gegriffen - ein Deckel ist also noetig, nur nicht in ch. 554 px entspricht der heutigen Hero-Spalte von 552 px, der Aufmacher bricht unveraendert: calc(var(--measure) * 1.05), eingetragen in Abschnitt 6. ========================================================================== */ /* ========================================================================== J. NETZ GEGEN DIE MIGRATIONSRESTE Geprueft am ausgelieferten HTML von /uber-uns/: 6 Absaetze

und 6 Absaetze, die nur ein geschuetztes Leerzeichen enthalten, dazu rund 7 leere Ueberschriften. Jeder davon traegt seinen vollen Vorschub - deshalb stehen zwischen zusammengehoerenden Absaetzen mal 16, mal 44, mal 92 px. Das ist die zweite Ursache des zerfallenden Rhythmus, und kein CSS-Eingriff an den Abstaenden repariert sie. (Eine Begutachtung nannte 62 leere Absaetze. Nachgezaehlt: 48 davon enthalten ein Bild und sind nicht leer. Die belastbare Zahl ist 12.) Die Regel ist ein Netz, keine Loesung - die Elemente gehoeren im Editor geloescht. ========================================================================== */ .prose p:empty:not(:where(.not-prose *)), .prose :is(h1,h2,h3,h4,h5,h6):empty:not(:where(.not-prose *)) { display: none; } /*

 

ist nicht :empty - die 6 Stueck muss die Redaktion von Hand entfernen. */ /* ========================================================================== K. EMOJI IN UEBERSCHRIFTEN — vorbereitet, aber nicht aktiv Ausgezaehlt im ausgelieferten HTML: Startseite 30 von 49 Ueberschriften mit Emoji, 79 Emoji-Zeichen; /termin/ aehnlich; /uber-uns/ 8 von 57; /download/ null. Sie rendern aus Segoe UI Emoji - einer dritten, vollfarbigen Familie, die in keinem Token steht. Keine dieser Ueberschriften beginnt optisch dort, wo der Text darunter beginnt, weil die Emojibreite die Startkante verschiebt. Das ist eine Redaktionsentscheidung, keine CSS-Entscheidung, und deshalb ist hier nichts aktiv. Wenn die Emoji bleiben sollen, loest der Template-Weg das Satzproblem, ohne den Inhalt zu aendern: in inc/template-tags.php das fuehrende Emoji per preg_match aus dem Titel loesen und als eigenes Element davorsetzen. Dann steht die linke Textkante, und das Piktogramm laeuft nicht mehr auf Ueberschriftengroesse mit. ========================================================================== */ /* .titel-marke { float: left; width: 1.4em; margin-left: -1.6em; font-size: .78em; line-height: inherit; text-align: left; } @media (max-width: 899px) { .titel-marke { float: none; margin-left: 0; margin-right: .2em; } } */ /* ========================================================================== 3. Layout ========================================================================== */ .wrap { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: var(--s-5); } @media (min-width: 640px) { .wrap { padding-inline: var(--s-6); } } .wrap--narrow { max-width: var(--narrow); } /* Satzspiegel und Rhythmus: siehe Abschnitt "Satzbild" weiter unten. Nur die Bildregel bleibt hier. */ .prose img:not(:where(.not-prose *)) { border-radius: var(--radius); margin-block: var(--s-5); } /* * ... aber NICHT fuer Bilder in Bauteilen. * * Die Regel darueber gilt freistehenden Bildern im Fliesstext. Bauteile * wie die Personenkachel oder die Video-Vorschau werden jedoch per * Shortcode IN den Inhalt gerendert und stehen damit ebenfalls in * .prose. Sie haben feste Rahmen mit overflow: hidden - ein Rand von * 24 Pixeln schiebt das Bild darin nach unten, oben bleibt der * Hintergrund stehen und unten wird abgeschnitten. * * Gemessen, bevor das hier stand: 28 Portraets auf der Lehrenden-Seite * und 26 Standbilder in der Mediathek sassen 24 Pixel zu tief. Bei * einem Kreis von 148 Pixeln ist das ein Sechstel. * * Wer einen fuenften Rahmen baut, traegt ihn hier nach. Es sind * dieselben Rahmen, die in plc_fokus_rahmen() stehen. */ .prose :is(.person__photo, .card__media, .event-row__thumb, .page-figure, .video-facade) img:not(:where(.not-prose *)) { margin-block: 0; } .section { padding-block: var(--s-8); } .section--tight { padding-block: var(--s-7); } .section--sunk { background: var(--c-sunk); } .section--surface { background: var(--c-surface); } .section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-3) var(--s-5); /* --s-7 wie .page-header: vom Kopf zum Inhalt derselbe Abstand, egal ob Band oder Abschnittskopf (D-15). */ margin-bottom: var(--s-7); padding-bottom: var(--s-3); border-bottom: 2px solid var(--c-ink); } .section-head :is(h1, h2) { margin: 0; } .section-head .section-more { font-size: var(--fs-sm); font-weight: var(--fw-bold); white-space: nowrap; } /* Der Abschnittskopf traegt dieselben drei Zeilen wie das Band .page-header (Kicker, Titel, Vorspann - plc_seitenkopf() in inc/template-tags.php gibt beide Stile aus) mit denselben Abstaenden: Kicker zum Titel --s-3, Titel zum Vorspann --s-4, Kopf zum Inhalt --s-7. Vorspann und Kicker nehmen die volle Zeile, sonst setzte sie der Flex-Umschlag neben den Titel. */ .section-head :is(.kicker, .page-header__kicker, .page-header__lead) { flex-basis: 100%; } /* Der Kicker benennt den Abschnitt, ohne eine Ueberschriftenebene zu verbrauchen - so bleibt die H-Struktur sauber. */ /* * Ein Etikett, eine Definition. Vorher stand dieselbe Auszeichnung drei * Mal getrennt im Stylesheet (.kicker, .subpages__title, .site-footer h2) * mit je eigener Laufweite - solche Kopien driften beim naechsten * Feinschliff auseinander. */ .kicker, .page-header__kicker, .subpages__title, .site-footer h2 { font-family: var(--f-body); font-size: var(--fs-xs); font-weight: var(--fw-bold); line-height: var(--lh-snug); letter-spacing: var(--track-caps); text-transform: uppercase; } .kicker, .page-header__kicker { color: var(--c-maroon); margin: 0 0 var(--s-3); } /* Auf Einzelseiten ist der Kicker der Rueckweg (Termin -> "Termine", Person -> "Lehrer*innen", D-15/UX-13): ein Link in der Farbe des Etiketts, ohne Dauerunterstreichung - die kaeme bei 13 px Versalien der Kopflinie in die Quere. Der Strich erscheint beim Zeigen und beim Tastaturfokus. Weil die Farbe allein kein Hinweis ist (GUT-D-04: ein verlinkter Kicker sah exakt aus wie ein unverlinkter), steht ein Pfeil nach links davor - das Zeichen fuer "zurueck", ohne die Kopflinie zu beruehren. Die zweite content-Deklaration mit dem Schraegstrich und leerem Alternativtext nimmt den Pfeil aus dem Vorlesetext (Screenreader sagen sonst "Pfeil nach links Termine"); Browser ohne diese Syntax behalten die erste Deklaration und lesen den Pfeil mit - unschoen, nicht falsch. */ :is(.kicker, .page-header__kicker) a { color: inherit; text-decoration: none; } :is(.kicker, .page-header__kicker) a::before { content: "\2190\00a0"; content: "\2190\00a0" / ""; } :is(.kicker, .page-header__kicker) a:hover, :is(.kicker, .page-header__kicker) a:focus-visible { color: var(--c-maroon-dark); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .grid { display: grid; gap: var(--s-5); } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); } /* auto-fill statt auto-fit: auto-fit zieht eine unvolle letzte Reihe auseinander, wodurch der Abstand zwischen zwei Portraets je nach Gruppengroesse zwischen 80 und 422 px sprang. .grid--3 bleibt auf auto-fit - es steht nur auf der Startseite und endet dort buendig. */ /* 150 statt 200 px Mindestbreite: bei 390 px Viewport (342 px innen) passte genau EINE Spalte, und 27 Lehrende standen auf rund 5.800 px untereinander. Zwei Kreise zu 148 px plus 24 px Luecke = 320 px haben Platz. Ergibt 2 Spalten ab ~340 px, unveraendert 5-6 auf dem Desktop (D-17). */ .grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); } /* ========================================================================== 4. Sprunglink Er existiert, er zeigt auf ein Ziel das es gibt, und er wird bei Tastaturfokus sichtbar. display:none wuerde ihn der Tastatur nehmen. ========================================================================== */ .skip-link { position: absolute; left: var(--s-4); top: var(--s-4); z-index: 200; transform: translateY(-200%); background: var(--c-maroon); color: #fff; padding: var(--s-3) var(--s-5); border-radius: var(--radius); font-weight: var(--fw-bold); text-decoration: none; transition: transform .15s ease; } .skip-link:focus { transform: translateY(0); color: #fff; } /* Fuer Screenreader da, visuell nicht. */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ========================================================================== 5. Kopfbereich und Navigation ========================================================================== */ /* ========================================================================== TITELBAND GANZ OBEN Der Vereinsname, in der Linkfarbe hinterlegt. Bewusst keine neue Farbe: Weiss auf --c-maroon ist im Haus schon gesetzt, siehe die Terminkarte .next-event auf der Startseite. Es scrollt mit weg - klebrig ist nur die Kopfzeile darunter, und zwei uebereinander klebende Baender fraessen auf dem Telefon ein Fuenftel der Hoehe. ========================================================================== */ .site-titelband { background: var(--c-maroon); color: #fff; } .site-titelband__titel { margin: 0; padding-block: var(--s-2); text-align: center; font-family: var(--f-display); font-size: var(--fs-base); font-weight: var(--fw-bold); line-height: var(--lh-snug); letter-spacing: -0.01em; } @media (max-width: 599px) { /* Eine Stufe kleiner, damit der 36 Zeichen lange Name in eine Zeile passt. Gemessen bei 375 px: mit 17 px zwei Zeilen und 62 px Band, mit 15 px eine Zeile und 39 px. */ .site-titelband__titel { font-size: var(--fs-sm); } } .site-header { background: var(--c-surface); border-bottom: 1px solid var(--c-rule); position: sticky; top: 0; z-index: 100; } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); min-height: 72px; padding-block: var(--s-3); } /* Der Seitenkopf ist ein Link, keine Ueberschrift. Genau deshalb entsteht hier keine zweite H1. */ .site-brand { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; color: var(--c-ink); /* * flex: none, seit der Vereinsname im Titelband oben steht und hier * nur noch das Logo haengt. Dazwischen stand hier eine Zeit lang * flex: 1 1 auto, weil der 36 Zeichen lange Name nicht umbrechen * durfte und die Kopfzeile bei 375 px um 182 px nach rechts schob. * Mit dem Namen ist auch der Grund weggefallen - und flex: 1 1 auto * liess die Marke 376 statt 51 Pixel breit werden, wodurch beide * Menuehaelften umbrachen. */ flex: none; min-width: 0; } .site-brand img { width: auto; height: 48px; } .site-brand__text { display: flex; flex-direction: column; line-height: var(--lh-tight); min-width: 0; } /* min-width: siehe Abschnitt H */ .site-brand__name { font-family: var(--f-display); font-size: var(--fs-base); font-weight: var(--fw-bold); letter-spacing: -0.01em; } .site-brand__sub { font-size: var(--fs-xs); color: var(--c-ink-3); } @media (max-width: 599px) { /* 15 statt 17 px: sonst bricht der Vereinsname auf drei Zeilen und die Kopfzeile waechst von 78 auf 105 px. */ .site-brand__name { font-size: var(--fs-sm); } .site-brand__sub { display: none; } } .nav-toggle { display: inline-flex; align-items: center; gap: var(--s-2); background: none; border: 1px solid var(--c-rule-ctrl); border-radius: var(--radius); padding: var(--s-2) var(--s-3); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--c-ink); cursor: pointer; } .nav-toggle:hover { border-color: var(--c-ink-3); } .nav-toggle__bars { display: block; width: 18px; height: 2px; background: currentColor; position: relative; } .nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; } .nav-toggle__bars::before { top: -6px; } .nav-toggle__bars::after { top: 6px; } /* Lupe in der Kopfzeile: ein Link auf die Suchseite, kein Aufklappfeld. Masse wie der Menueknopf, damit beide auf einer Linie sitzen - 40 px sind zugleich das Mindestmass fuer eine Tippflaeche. */ .site-search { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid transparent; border-radius: var(--radius); color: var(--c-ink); text-decoration: none; } .site-search:hover { background: var(--c-sunk); color: var(--c-maroon); } .site-search__symbol { width: 20px; height: 20px; display: block; } /* Auf der Suchseite selbst zeigt die Lupe, wo man ist. */ .search .site-search { color: var(--c-maroon); } /* * Unter 600 px wird es in der Kopfzeile eng, und die Lupe hat den * Platz weiter verknappt. * * Gemessen bei 375 px, Kopfzeilenhoehe und Breite fuer den * Vereinsnamen: * mit Text am Knopf 112 px Name 149 px, fuenf Zeilen * Abstand auf 12 px 112 px Name 173 px * Knopf nur als Symbol 77 px Name 196 px * beides 77 px Name 220 px * * Vor der Lupe waren es 78 px. Der Knopf ohne Beschriftung holt das * also vollstaendig zurueck - das Hamburgersymbol ist verstanden, und * der Text bleibt fuer Screenreader im Quelltext stehen. */ @media (max-width: 599px) { .site-header__inner { gap: var(--s-3); } .nav-toggle { /* 40 px bleibt das Mindestmass fuer eine Tippflaeche, auch ohne Text. */ min-width: 40px; min-height: 40px; justify-content: center; padding: var(--s-2); } .nav-toggle__text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } .main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-1); } .main-nav a { display: block; padding: var(--s-2) var(--s-3); border-radius: var(--radius); text-decoration: none; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--c-ink); } .main-nav a:hover { background: var(--c-sunk); } .main-nav .current-menu-item > a, .main-nav .current_page_item > a, .main-nav .current-menu-parent > a { color: var(--c-maroon); font-weight: var(--fw-bold); box-shadow: inset 0 -2px 0 var(--c-maroon); } /* -------------------------------------------------------------------------- KOPFZEILE MIT LOGO IN DER MITTE Drei Menuepunkte, Logo, drei Menuepunkte, dann die Lupe. EIN