/* ── icons-subset.css ── */ /* ══════════════════════════════════════════ Font Awesome: kleine Schrift zuerst, volle als Rückfall ────────────────────────────────────────── Die Seite lädt auf JEDER Seite fa-solid-900.woff2 (133 KB) und fa-brands-400.woff2 (114 KB) — für 54 Icons aus rund 2.500. Das sind 247 KB, und anders als bei CSS und JSON hilft die Kompression nichts: woff2 ist schon gepackt. Die Subsets wiegen zusammen rund 18 KB. Der Kern ist die Reihenfolge in der font-family-Liste. Schrift-Rückfall gilt im Browser PRO ZEICHEN: steht ein Icon im Subset, kommt es aus der kleinen Datei; steht es nicht drin, lädt der Browser die volle Schrift nach — aber nur auf der Seite, wo dieses Icon vorkommt. Das ist der Unterschied zwischen dieser Lösung und einem stumpfen Subset. Icons werden im Panel als Freitext eingetragen. Wer morgen `fa-tent` tippt, hätte sonst ein leeres Kästchen und würde es nicht merken. So kann nichts still kaputtgehen, und niemand muss daran denken, das Skript zu starten. Wer es startet, macht die Seite schneller — wer nicht, macht nichts kaputt. Erzeugt von scripts/icons-subset.py. Muss NACH fontawesome.min.css geladen werden, sonst gewinnt deren font-family-Regel. ══════════════════════════════════════════ */ @font-face { font-family: "FA6 Solid Subset"; font-style: normal; font-weight: 900; font-display: block; src: url("/webfonts/fa-solid-900-subset.woff2") format("woff2"); } @font-face { font-family: "FA6 Brands Subset"; font-style: normal; font-weight: 400; font-display: block; src: url("/webfonts/fa-brands-400-subset.woff2") format("woff2"); } /* Dieselben Selektoren wie in fontawesome.min.css, nur mit dem Subset davor. .fa-regular und .far stehen bewusst NICHT dabei: fa-regular wird nirgends benutzt, und die Schrift dazu lädt der Browser deshalb auch nie. */ .fa-classic, .fa-solid, .fas { font-family: "FA6 Solid Subset", "Font Awesome 6 Free"; } .fa-brands, .fab { font-family: "FA6 Brands Subset", "Font Awesome 6 Brands"; } /* ── themes.css ── */ /* ══════════════════════════════════════════ DPSG DV Limburg — Dunkles Design ══════════════════════════════════════════ Das helle Design ist der :root-Default in css/teil-*.css. Hier lebt NUR das dunkle Pendant: [data-theme="dunkel"] (dunkles Navy, DPSG-Rot als CTA, gleiche Struktur). Umgeschaltet wird per Sonne/Mond-Button (js/theme-switcher.js). ══════════════════════════════════════════ */ /* Die Dunkel-TOKENS (html[data-theme="dunkel"] { --… }) stehen in css/tokens.css. Hier nur noch Bauteil-Regeln fuer den Dunkelmodus. */ /* ── Struktur-Anpassungen (Spiegelung der hellen Basiswerte) ── */ [data-theme="dunkel"] header { box-shadow: 0 1px 0 rgba(var(--weiss-rgb), .06); } /* Laufband: die Flaeche ist im Dunkelmodus --primary (#6FA8D2) bzw. der helle Akzent der Seite. Weisse Schrift kam darauf auf 2,56:1. Dieselbe Loesung wie beim gefuellten Button (DESIGN-SYSTEM.md §6): Farbe bleibt, Schrift wird dunkel. */ [data-theme="dunkel"] .mq-item::before { filter: brightness(0); opacity: .45; } /* --on-accent (#14222E) kam auf dem dunklen --primary (#5A87A9) nur auf 4,22:1, die Zeile ist Fließtextgröße. --bg (#0A1820) hat 4,7:1 (Messung 12.11.2026). */ [data-theme="dunkel"] .mq-item { color: var(--bg); } [data-theme="dunkel"] .marquee-scroll:focus-visible { outline-color: var(--on-accent); } /* DV-Logo (navy) auf dunklem Header → weiß */ [data-theme="dunkel"] header .logo-dv { filter: brightness(0) invert(1); opacity: .92; } /* Logo-Wortmarke: Farben kommen jetzt aus css/teil-01-basis.css (--text = neutral, --primary = blau) und passen sich hell/dunkel selbst an → „DPSG" hell-neutral, „Limburg" hellblau. */ /* Chips: Dunkelwerte stehen als --chip-x in css/tokens.css */ /* Flächen & Linien, die in der Basis feste dunkle rgba-Werte haben */ [data-theme="dunkel"] .dl-btn { background: rgba(var(--weiss-rgb), .07); } /* Gefüllte Buttons auf getönten Seiten (Stufen/AKs): EXAKT der Akzentton der Seite — eine Farbe pro Stufe, kein zweiter Sonderton daneben. Weiße Schrift reicht auf den aufgehellten Dunkelmodus-Tönen nicht (1,5–3,4 statt 4,5), also dunkle Schrift; derselbe Weg wie bei der aktiven Stufen-Kachel. --sc statt --sc-btn, damit auch ein gesetztes --friedenslicht-fill hier nicht durchkommt. Hover geht deshalb HELLER: abdunkeln würde den Kontrast zur dunklen Schrift wieder zerstören (Rover läge bei 3,36). */ [data-theme="dunkel"] .tinted :is(.btn-fire, .dl-btn-primary) { background: var(--sc); color: var(--on-accent); } [data-theme="dunkel"] .tinted :is(.btn-fire, .dl-btn-primary):hover, [data-theme="dunkel"] .tinted a.bleed-card:is(:hover, :focus-visible) .btn-fire { background: color-mix(in srgb, var(--sc) 85%, #fff); box-shadow: 0 8px 28px color-mix(in srgb, var(--sc) 35%, transparent); } /* Dasselbe fuer Bloecke mit eigener Akzentfarbe: im Dunkelmodus sind alle Akzente aufgehellt, nur --cta bleibt tief (dort traegt Weiss). */ [data-theme="dunkel"] .btn-fire.btn-akzent:not([data-akzent="cta"]) { color: var(--on-accent); } [data-theme="dunkel"] .btn-fire.btn-akzent:not([data-akzent="cta"]):hover { background: color-mix(in srgb, var(--ac) 85%, #fff); } /* Aktive Biber-Kachel: --stufe-biber ist im Dunkelmodus das helle Braun. Mit 65 % gemischt kam Weiss darauf nur auf 4,44:1. */ [data-theme="dunkel"] .stufe-nav [data-stufe="biber"] { --snc-fill: color-mix(in srgb, var(--snc) 55%, #16242e); } /* Kontakt-Knopf in Kopfleiste und Handy-Menue: auf getoenten Seiten dieselbe Regel wie fuer gefuellte Knoepfe oben. Vorher weiss auf dem aufgehellten Akzent, Praevention 2,65:1. */ [data-theme="dunkel"] body.tinted .nav-cta { background: var(--sc); color: var(--on-accent) !important; } [data-theme="dunkel"] body.tinted .nav-cta:hover { background: color-mix(in srgb, var(--sc) 85%, #fff) !important; } /* Im Handy-Menue ist der Knopf auch ungetoent in --primary gefuellt, im Dunkelmodus also hellblau: auch dort dunkle Schrift (vorher 2,56:1). */ [data-theme="dunkel"] .mobile-nav .nav-cta { color: var(--on-accent) !important; } [data-theme="dunkel"] .event-row { border-bottom-color: rgba(var(--weiss-rgb), .06); } [data-theme="dunkel"] .event-row:first-child { border-top-color: rgba(var(--weiss-rgb), .06); } [data-theme="dunkel"] .quick-grid { background: rgba(var(--weiss-rgb), .03); border-color: rgba(var(--weiss-rgb), .06); } [data-theme="dunkel"] .sidebar-box { border-color: var(--border-card); } [data-theme="dunkel"] .ak-info-card { border-color: var(--border-card); } [data-theme="dunkel"] .ak-info-row { border-bottom-color: rgba(var(--weiss-rgb), .07); } [data-theme="dunkel"] .article-share { border-top-color: rgba(var(--weiss-rgb), .09); border-bottom-color: rgba(var(--weiss-rgb), .09); } [data-theme="dunkel"] .kl { border-right-color: rgba(var(--weiss-rgb), .06); } [data-theme="dunkel"] .kl-divider { background: rgba(var(--weiss-rgb), .07); } [data-theme="dunkel"] .kl-row:hover { background: rgba(var(--weiss-rgb), .07); } [data-theme="dunkel"] .ak-member-cta { border-color: rgba(var(--weiss-rgb), .16); } [data-theme="dunkel"] .ak-cta-icon { border-color: rgba(var(--weiss-rgb), .22); } /* Eingaben & Filter */ [data-theme="dunkel"] .f-field input, [data-theme="dunkel"] .f-field textarea, [data-theme="dunkel"] .nl-input, [data-theme="dunkel"] .stamm-search { background: rgba(var(--weiss-rgb), .07); border-color: rgba(var(--weiss-rgb), .12); } /* Select separat: Farbe + Pfeil in EINER background-Angabe. (Ein nacktes background:-Shorthand würde repeat/position des Chevrons zurücksetzen -> der Pfeil kachelt als Muster.) */ [data-theme="dunkel"] .f-field select { background: rgba(var(--weiss-rgb), .07) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239DB6C8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 16px center; border-color: rgba(var(--weiss-rgb), .12); } [data-theme="dunkel"] .nf-chip, [data-theme="dunkel"] .ev-view-btn { border-color: rgba(var(--weiss-rgb), .18); } /* Wasserzeichen-Lilie: hell auf dunklem Grund */ [data-theme="dunkel"] .pg-header::after { filter: brightness(0) invert(1); opacity: .06; } /* Fotos auf dunklem Grund leicht dimmen (Editorial-Look) */ [data-theme="dunkel"] .news-img img { opacity: .8; } /* ── teil-01-basis.css ── */ /* ══════════════════════════════════════════ DPSG DV Limburg — Editorial, DPSG-CD-basiert ────────────────────────────────────────── :root = HELLES Design (Default). Dunkles Design: [data-theme="dunkel"] in themes.css. Farben nach DPSG CD: Blau #003056 (Marke/Struktur), Rot #810A1A→web (CTA), Gelb/Cyan als warme Akzente. ══════════════════════════════════════════ */ /* themes.css steht im Stylesheet-Bündel (plugins/dpsg-buendel) direkt vor dieser Datei, mit derselben Version wie alle anderen. Als @import trug sie (wie früher custom-icons.css) ein festes ?v=, und Änderungen am Dunkelmodus kamen bei wiederkehrenden Besuchern ein Jahr lang nicht an (Code-Review #37). */ /* ── A11y-Basics: Skip-Link + Screenreader-Utility ────────── Der Skip-Link ist das erste fokussierbare Element (components.js setzt ihn vor den
), springt zu
und ist nur bei Tastatur- Fokus sichtbar. Farben aus var(--text)/var(--bg) → garantiert kontrastreich in hell UND dunkel. z-index über dem festen Kopf (1000) und dem Cookie-Banner (1100), unter Suche und Dialogen. Bis 11.11.2026 stand er auf 1000 wie der Kopf, der im DOM später kommt und ihn deshalb verdeckte (WCAG 2.4.1, 2.4.7). */ .skip-link { position: fixed; top: -60px; left: 12px; z-index: 1150; background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: var(--radius-sm); font-family: var(--font-ui); font-weight: 700; text-decoration: none; transition: top .18s ease; } .skip-link:focus { top: 12px; } main:focus { outline: none; } /* programmatischer Sprungfokus → kein sichtbarer Ring */ .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Die Tokens (:root) stehen in css/tokens.css, geladen vor dieser Datei. */ *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; } html { scroll-behavior: smooth; scroll-padding-top: 108px; } /* Anker-Sprünge stoppen unter der fixen Navbar → Eyebrow + Überschrift bleiben sichtbar */ @media (max-width: 560px) { html { scroll-padding-top: 84px; } } /* Transitions während des initialen Theme-Ladens deaktivieren → kein FOUC */ html.no-transition *, html.no-transition *::before, html.no-transition *::after { transition: none !important; } body { background: var(--bg); color: var(--text); font-family: var(--font-ui); line-height: 1.5; /* clip statt hidden: hidden macht body zu einem eigenen Scrollbereich, und an dem hängen dann die scroll-gesteuerten Animationen der Doodles (animation-timeline: view()). Er scrollt nie, also standen sie still. */ overflow-x: clip; } a { color: inherit; text-decoration: none; } /* [hidden] muss stärker sein als jede eigene display-Regel. Der Browser setzt [hidden] auf display:none, aber das steht in SEINEM Stylesheet und verliert gegen jede Regel von uns. `.blog-post` steht auf display:block — damit lief das `c.hidden = true` in js/neuigkeiten-liste.js ins Leere und der Themenfilter blendete nichts aus: „wenn ich Info auswähle, werden trotzdem die Newsletter angezeigt." Die Falle betrifft jedes Element mit eigener display-Regel, das per .hidden = true versteckt wird. Deshalb einmal global statt einzeln. */ [hidden] { display: none !important; } /* ── GRAIN OVERLAY ── `top: 60px` statt `inset: 0` ist keine Gestaltungsfrage. Diese Schicht war die Ursache des Streifens über der Navbar auf iPhones, und zwar belegt: Safari 26 färbt die Fläche um die Statusleiste nach der `background-color` eines fixierten Elements im 4px-Band am oberen Rand. Diese Schicht liegt dort, ist volle Breite, hat z-index 9997 über allem — und hat gar keine `background-color`. Safari tastet also eine durchsichtige Fläche ab, und die Statusleiste zeigt den Seiteninhalt. Zwei Messreihen am Gerät (Janis, 06.08.) tragen das: · Ein Kandidat mit `opacity: .97` HAT gefärbt. `opacity` unter 1 disqualifiziert also nicht — die 3 % hier ändern nichts daran, dass diese Schicht ein vollwertiger Kandidat ist. Genau das hatte ich zwischendurch falsch angenommen und den Fix zurückgenommen. · Auf einer Testseite mit Navbar-Nachbau färbte schon die Navbar allein. Dort gibt es dieses Overlay nicht. Es ist der einzige Unterschied. Ein erster Versuch stand auf `top: 4px`, also genau AUF der Bandgrenze, und war damit wirkungslos. 60 px sind klar draußen. Bei 3 % Deckkraft sieht niemand, dass die obersten 60 px kein Korn tragen — dort liegt ohnehin die deckende Kopfzeile darüber. NICHT auf `inset: 0` zurückdrehen. Es waren sieben Anläufe. */ body::before { content: ''; position: fixed; top: 60px; right: 0; bottom: 0; left: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: .03; pointer-events: none; z-index: 9997; } /* Auf Touch-Geräten ohne Korn: Bei 3 % sieht man es auf dem Handy nicht, aber Safari muss eine bildschirmgroße Ebene über allem bei jedem Scroll-Frame mitverrechnen (06.10.2026). Das löst nebenbei auch das Statusleisten-Problem oben für immer: kein fixiertes Element, kein Abtasten. */ @media (pointer: coarse) { body::before { content: none; } } /* ══════════════════════════════════════════ LANGE WÖRTER BRECHEN, STATT AUSZULAUFEN ────────────────────────────────────────── Deutsche Komposita sind der Dauerbrenner: „Stammesvorständekonferenz" lief aus der Termin-Karte, „Pfadfindertechniken" schob die Modul-Zeile unter den Aufklapp-Pfeil. Beides dieselbe Ursache — ein Wort ohne Trennstelle ist die kleinste unteilbare Einheit einer Zeile, und ist die breiter als der Kasten, laeuft sie hinaus. BEIDES zusammen, und die Reihenfolge im Kopf behalten: hyphens:auto trennt nach Silben und setzt dabei einen Bindestrich („Stammesvorstände-konferenz"), und genau so gehört es im Deutschen. Das braucht , das steht in default.php. overflow-wrap:break-word ist nur der Rückfall für Wörter, für die der Browser keine Trennstelle kennt — dort bricht es ohne Strich, was hässlich, aber immer noch besser als ein Überlauf ist. break-word statt anywhere: es greift NUR, wenn ein Wort sonst überliefe. Bei allem anderen bleibt der Umbruch unverändert, die Regel ist also unsichtbar, bis sie gebraucht wird. Mindestens drei Buchstaben vor und nach dem Strich (02.10.2026): Ohne die Grenze trennte Chrome „Arbeitskrei-se" und „Gruppen-stunde" nur deshalb verschieden, weil die Breite zufaellig passte. Mit 3/3 bleibt kein Zwei-Buchstaben-Rest am Zeilenanfang stehen. Safari kennt nur die alten Einzelwerte, deshalb beide Schreibweisen. Getrennt werden nur Wörter ab zehn Buchstaben, mit vier vor und nach dem Strich (11.11.2026): „ande-ren" in „Kurse in anderen Diözesen" brach am Desktop, obwohl das Wort in jede Zeile passt. Gemeint ist die Regel für lange Komposita, nicht für Alltagswörter. ══════════════════════════════════════════ */ :is(h1, h2, h3, h4, h5, h6, .sec-title, .kl-value, .ev-modal-title, .ev-modal-desc, .card-popup-body) { overflow-wrap: break-word; hyphens: auto; hyphenate-limit-chars: 10 4 4; -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4; } /* Icons nie trennen. Mit hyphens:auto sucht Chrome im Icon-Font den Trennstrich, findet ihn im Subset nicht und lädt dafür die volle fa-solid-900.woff2 (134 KB) nach. Jedes Icon in einer Überschrift tat das. */ :is(.fa-solid, .fas, .fa-classic, .fa-brands, .fab) { hyphens: manual; -webkit-hyphens: manual; } /* ── HEADER ── */ header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 22px 52px; /* env(...) liefert seit dem 03.08.2026 überall 0: der Viewport steht wieder auf Vorgabe, ohne viewport-fit=cover. Die Fläche unter der Dynamic Island legt damit Safari selbst an und färbt sie nach theme-color, statt dass wir sie bemalen (Begründung in snippets/head.php). Die Zeile bleibt, weil sie dann wieder greift, falls cover je zurückkommt. */ padding-top: calc(22px + env(safe-area-inset-top)); display: flex; justify-content: space-between; align-items: center; background: rgba(var(--hbg), .97); backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(var(--tinte-rgb), .09); transition: background .4s; } header.solid { background: rgba(var(--hbg), .97); backdrop-filter: blur(14px); } /* Touch/Safari: backdrop-filter auf fixed = Repaint-Lag beim Scrollen (Navbar „schwebt"/scheint durch). Auf Touch-Geräten deshalb voll deckend, ohne Blur. Seit Safari 26 hat das einen zweiten, wichtigeren Grund: Der Browser färbt die Statusleiste nach dem obersten fixierten Element und liest dabei `background-color` UND `backdrop-filter`. Durchscheinend plus Weichzeichner heißt für Safari „Glas", und dann kommt dort Seiteninhalt durch. Deckend und ohne Weichzeichner ist also Pflicht, nicht Geschmack. Dasselbe gilt für die Mobilnavigation: sie ist fixed über den ganzen Schirm und würde im geöffneten Zustand abgetastet. */ @media (pointer: coarse) { header, header.solid { background: rgb(var(--hbg)); -webkit-backdrop-filter: none; backdrop-filter: none; transition: none; } .mobile-nav { background: rgb(var(--hbg)); -webkit-backdrop-filter: none; backdrop-filter: none; } } /* ── LILIE LOGO ── */ .logo-lilie { display: block; width: 18px; height: 18px; filter: brightness(0) invert(1); object-fit: contain; transform: translateY(12%); } .logo { display: flex; align-items: center; gap: 11px; cursor: pointer; text-decoration: none; } /* DV-Limburg-Logo (Gebietsumriss mit Lilie) — ersetzt das alte Hex-Placeholder-Logo */ .logo-dv { height: 38px; width: auto; display: block; flex-shrink: 0; transition: transform .35s cubic-bezier(.34,1.56,.64,1); } .logo:hover .logo-dv { transform: scale(1.05); } /* Wortmarke im Navbar-Kleid: gleiche Schrift/Versalien/Sperrung wie die Nav-Links */ .logo-text { font-family: var(--font-heading); font-weight: 700; font-size: 1.04rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text); } .logo-text span { font-weight: 400; color: var(--sc, var(--primary)); white-space: nowrap; } /* bei 320px brach es als „DPSG DV“ / „LIMBURG“ */ nav { display: flex; gap: 2px; align-items: center; } nav a { color: var(--text-secondary); font-size: 1rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; padding: 8px 14px; cursor: pointer; text-decoration: none; transition: color .25s; position: relative; white-space: nowrap; } /* Kein Strich unter den Menüpunkten, auch kein aufziehender (Janis, 05.11.2026): Hover und die aktuelle Seite stehen in der Seitenfarbe. */ /* Ohne Seitenfarbe (--sc, nur auf AK- und Stufenseiten) das DPSG-Rot des Kontakt-Knopfs: Blau war von der graublauen Navi-Schrift kaum zu unterscheiden, die aktuelle Seite fiel nicht auf (Janis, 07.11.2026). */ /* --ziel: Ton der Seite, auf die der Link führt (plugins/dpsg-farben, dpsg_zielton) */ nav a:hover { color: var(--ziel, var(--sc, var(--cta-text))); } /* Der markierte Bereich zeigt den Ton der Seite, auf der man steht: auf dem Jupfi-AK leuchtet „Unser DV“ blau, nicht im Rot von /unser-dv (Janis, 15.11.2026). */ nav a.active { color: var(--sc, var(--cta-text)); } .nav-cta { /* Akzentfarbe der Seite: auf AK- und Stufenseiten setzt das Template --sc-btn am , ohne Tint bleibt das rote --cta. */ background: var(--sc-btn, var(--cta)); color: var(--on-fill) !important; padding: 9px 20px !important; border-radius: 2px; margin-left: 10px; } .nav-cta::after { display: none !important; } .nav-cta:hover { background: var(--cta-hover) !important; } /* Getönte Seiten dunkeln aus der Akzentfarbe ab, statt --cta-hover zu nehmen. Zwei Gründe: --cta-hover ist ein Rotton und würde die Akzentfarbe beim Hover wegwischen, und --sc-btn-hover taugt nicht (nur für 2 der 9 Tints definiert, sonst identisch mit der Füllung = kein sichtbarer Hover). Über .tinted getrennt, damit ungetönte Seiten ihren aufhellenden Rot-Hover behalten. */ body.tinted .nav-cta:hover { background: color-mix(in srgb, var(--sc-btn, var(--cta)) 84%, #000) !important; } /* Mobile hamburger */ .nav-toggle { display: none; background: none; border: none; color: var(--text); font-size: 1.4rem; cursor: pointer; padding: 8px; z-index: 1001; } /* Suche + Hell/Dunkel sichtbar neben dem Burger (nur mobil) */ .nav-actions-mobile { display: none; align-items: center; gap: 8px; } .mobile-nav { display: none; position: fixed; inset: 0; z-index: 1002; background: rgba(var(--hbg), .98); backdrop-filter: blur(20px); flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 4px; /* Die Safe-Area muss IN die Kurzschreibweise. Vorher stand darüber ein eigenes padding-top: env(...), das die Zeile hier stillschweigend überschrieben hat — mit viewport-fit=cover liefe das Menü sonst unter die Statusleiste. */ overflow-y: auto; padding: calc(72px + env(safe-area-inset-top)) clamp(28px, 9vw, 80px) 28px; } /* Spacer oben/unten: zentriert, wenn alles passt — scrollt sauber, wenn nicht */ .mobile-nav::before, .mobile-nav::after { content: ''; margin: auto; flex-shrink: 0; } .mobile-nav.open { display: flex; } .mobile-nav-close { position: fixed; top: 22px; right: 24px; } /* Seite hinter offenem Menü nicht mitscrollen */ /* Scroll-Sperre: Mobil-Menue (nav-locked), Termin-Popup (modal-locked) und Lightbox (lb-locked) nutzen getrennte Klassen, damit das Schliessen des einen nicht die Sperre der anderen aufhebt. Gesperrt wird, sobald eine aktiv ist. */ /* Scrollen sperren, ohne dass die Seite breiter wird: Fiel die Scrollleiste weg, verschob sich alles um ihre Breite, und jeder Filzstift-Rahmen und jedes Doodle zeichnete sich neu. Das war das Flackern hinter der Suche (Janis, 10.11.2026), dasselbe bei Menü, Popup, Lightbox. --sbw (Breite der Scrollleiste) misst js/components.js; scrollbar-gutter greift hier nicht, weil html overflow-x: clip trägt. */ html.nav-locked, html.modal-locked, html.lb-locked, html.suche-locked { overflow: hidden; padding-right: var(--sbw, 0px); } /* ── LIGHTBOX (globale Bildansicht) ── */ .lb-zoomable { cursor: zoom-in; } /* Vergrößerbare Bilder sind Tab-Halte (js/lightbox.js). Der Ring liegt innen, weil Rahmen und Karussells überstehende Ränder abschneiden. */ .lb-zoomable:focus-visible { outline: 3px solid var(--sc, var(--primary)); outline-offset: -3px; } /* In den Karussells ist das Bild größer als sein Rahmen (Zoom, Verschiebung), ein Ring am Bild läge außerhalb. Dort zeichnet der Rahmen den Ring. */ .gallery .lb-zoomable:focus-visible, .acx-viewport .lb-zoomable:focus-visible { outline: none; } .acx-viewport:has(.lb-zoomable:focus-visible) { position: relative; } .gallery:has(.lb-zoomable:focus-visible)::after, .acx-viewport:has(.lb-zoomable:focus-visible)::after { content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; border: 3px solid var(--sc, var(--primary)); border-radius: inherit; } .lightbox { position: fixed; inset: 0; z-index: 3000; display: none; align-items: center; justify-content: center; padding: 5vmin; background: rgba(8,16,22,.93); opacity: 0; transition: opacity .2s ease; } .lightbox.is-open { display: flex; opacity: 1; } .lightbox img { max-width: 92vw; max-height: 86vh; width: auto; height: auto; object-fit: contain; border-radius: 6px; box-shadow: 0 14px 50px rgba(var(--schwarz-rgb), .55); } /* top rechnet die Safe-Area mit, sonst liegt die Leiste auf iPhones mit Dynamic Island teilweise darunter. Gilt fuer beide Lightboxen, sie teilen sich diese Klassen. */ .lb-actions { position: fixed; top: calc(16px + env(safe-area-inset-top)); right: 16px; display: flex; gap: 10px; z-index: 3001; } .lb-btn { width: 46px; height: 46px; border-radius: 50%; border: none; background: rgba(var(--weiss-rgb), .15); color: var(--on-photo); font-size: 1.05rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; transition: background .2s ease, transform .2s ease; } .lb-btn:hover, .lb-btn:focus-visible { background: rgba(var(--weiss-rgb), .32); transform: translateY(-2px); } .lb-btn:focus-visible { outline: 2px solid var(--on-photo); outline-offset: 2px; } /* Lightbox-Blaettern (nur bei Bildgruppen: Collage, Karussell, Material-Grid) */ .lb-nav { position: fixed; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(var(--weiss-rgb), .25); background: rgba(var(--weiss-rgb), .15); color: var(--on-photo); font-size: 1.1rem; display: grid; place-items: center; cursor: pointer; transition: background .2s ease; z-index: 3001; } .lb-nav:hover, .lb-nav:focus-visible { background: rgba(var(--weiss-rgb), .34); } .lb-nav:focus-visible { outline: 2px solid var(--on-photo); outline-offset: 2px; } .lb-prev { left: clamp(12px, 3vw, 34px); } .lb-next { right: clamp(12px, 3vw, 34px); } .lb-nav[hidden] { display: none; } .lb-count { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); color: rgba(var(--weiss-rgb), .82); font-family: var(--font-ui); font-size: .92rem; z-index: 3001; } .lb-count[hidden] { display: none; } /* Fotograf*in, unten links und leiser als die Bildzahl in der Mitte */ .lb-credit { position: fixed; bottom: 24px; left: 24px; color: rgba(var(--weiss-rgb), .7); font-family: var(--font-ui); font-size: .85rem; z-index: 3001; max-width: calc(50vw - 60px); } .lb-credit[hidden] { display: none; } /* ── Zurueck-nach-oben-Button (js/to-top.js), unten rechts in der Ecke ── */ .to-top { position: fixed; right: 20px; bottom: 24px; z-index: 200; width: 50px; height: 50px; border: none; border-radius: 50%; cursor: pointer; /* Akzentfarbe der Seite, wie .btn-fire und .dl-btn-primary: auf AK- und Stufenseiten setzt das Template --sc-btn am , sonst greift das rote --cta. Der Button hängt per position:fixed am body, erbt also mit. */ background: var(--sc-btn, var(--cta)); color: var(--on-fill); display: grid; place-items: center; box-shadow: 0 10px 26px rgba(var(--schwarz-rgb), .24); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .25s ease, transform .25s ease, visibility .25s ease, background .2s ease; } .to-top.is-visible { opacity: 1; visibility: visible; transform: none; } /* Hover NICHT über --sc-btn-hover, siehe .dl-btn-primary weiter unten: die Variable ist nur für 2 der 9 Tints definiert und fiele sonst auf die Füllfarbe zurück, also gar kein sichtbarer Hover. Abdunkeln klappt überall. */ .to-top:hover { background: color-mix(in srgb, var(--sc-btn, var(--cta)) 84%, #000); } .to-top:focus-visible { outline: 2px solid var(--sc, var(--primary)); outline-offset: 3px; } .to-top .wz { width: 26px; height: 26px; transform: rotate(-90deg); } @media (max-width: 768px) { .to-top { width: 46px; height: 46px; bottom: 20px; } } @media (prefers-reduced-motion: reduce) { .to-top { transition: opacity .2s ease, visibility .2s ease; transform: none; } } /* ── „Seite bearbeiten“ (snippets/bearbeiten.php), nur für Angemeldete ── Unten links, gegenüber dem Nach-oben-Knopf. Rahmen in der Tinte, kein Akzent: Das ist Werkzeug, nicht Teil der Seite. */ .bearbeiten-stift { position: fixed; left: 20px; bottom: 24px; z-index: 200; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--bg-mid); color: var(--text); border: 1px solid color-mix(in srgb, var(--text) 28%, transparent); box-shadow: 0 10px 26px rgba(var(--schwarz-rgb), .18); font-family: var(--font-ui); font-size: .95rem; text-decoration: none; transition: background .2s ease; } .bearbeiten-stift:hover { background: color-mix(in srgb, var(--text) 8%, var(--bg-mid)); } .bearbeiten-stift:focus-visible { outline: 2px solid var(--sc, var(--primary)); outline-offset: 3px; } @media (max-width: 768px) { .bearbeiten-stift { bottom: 20px; padding: 0; width: 46px; height: 46px; justify-content: center; } .bearbeiten-stift span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } @media print { .bearbeiten-stift { display: none; } } @media (prefers-reduced-motion: reduce) { .lightbox, .lb-btn { transition: none; } } /* ── Wegzeichen-Lightbox (Zeichen groß anzeigen, js/wegzeichen.js) ── */ .wz-item { cursor: pointer; } .wz-item:focus-visible { outline: 2px solid var(--sc, var(--primary)); outline-offset: 4px; border-radius: 8px; } /* Das Zeichen wächst beim Überfahren leicht, wie die Icons in Linkkarten. Kein Wackeln mehr (Janis, 05.11.2026). Sitzt auf dem Rahmen, nicht auf dem SVG: die Hintergrund-Doodles bringen eigene transform-Animationen mit, die sich sonst gegenseitig überschreiben. */ .wz-item .wz-item-sign { transition: transform .3s ease; } .wz-item:is(:hover, :focus-visible) .wz-item-sign { transform: scale(1.08); } /* Ein Doodle in der Lightbox: .dood-svg ist für den Hintergrund gebaut (absolut positioniert, eigene Farbe über --dood-c) und muss hier die Fläche füllen und die Farbe der Lightbox erben. */ .wz-lb-sign .dood-svg { position: static; width: 100%; height: 100%; color: inherit; opacity: 1; } .wz-lightbox { position: fixed; inset: 0; z-index: 3000; display: none; align-items: center; justify-content: center; padding: 7vmin; background: rgba(8,16,22,.93); opacity: 0; transition: opacity .2s ease; } .wz-lightbox.is-open { display: flex; opacity: 1; } /* Bedienelemente: die Wegzeichen-Lightbox nutzt seit dem 03.08. dieselben Klassen wie die Bilder-Lightbox (.lb-actions, .lb-btn, .lb-nav, siehe oben). Vorher standen hier eigene Regeln mit denselben Werten in Kopie — eine Doodle-Regel hat dann position:relative daruebergelegt und alle drei Knoepfe aus ihrer Verankerung gerissen. Zwei Stellen fuer dieselbe Sache, das war die eigentliche Ursache. */ .wz-lb-inner { text-align: center; color: var(--on-photo); max-width: 440px; } .wz-lb-sign { width: min(64vw, 300px); height: min(64vw, 300px); margin: 0 auto 20px; color: var(--on-photo); } .wz-lb-sign .wz { width: 100%; height: 100%; } .wz-lb-name { display: block; font-family: var(--font-heading); font-size: 1.5rem; margin-bottom: 6px; } .wz-lb-hint { color: rgba(var(--weiss-rgb), .82); font-family: var(--font-ui); font-size: 1.02rem; line-height: 1.5; } @media (prefers-reduced-motion: reduce) { .wz-lightbox { transition: none; } } /* Theme-Anpassung: Light-Mode = helle Flaeche + Navy-Zeichen, Dark-Mode = dunkel + weiss */ html:not([data-theme="dunkel"]) .wz-lightbox { background: rgba(var(--papier-rgb), .96); } html:not([data-theme="dunkel"]) .wz-lb-inner { color: var(--text); } html:not([data-theme="dunkel"]) .wz-lb-sign { color: var(--sc, var(--primary)); } html:not([data-theme="dunkel"]) .wz-lb-name { color: var(--text); } html:not([data-theme="dunkel"]) .wz-lb-hint { color: var(--text-secondary); } /* Im Hellmodus ist die Lightbox-Fläche hell, die geteilten .lb-Knöpfe sind aber auf Weiß-auf-Dunkel ausgelegt. Deshalb hier umgedreht — inklusive der Umrandung von .lb-nav, die sonst weiß auf hell und damit unsichtbar wäre. */ html:not([data-theme="dunkel"]) .wz-lightbox :is(.lb-btn, .lb-nav) { background: rgba(0,32,58,.1); color: var(--text); border-color: rgba(0,32,58,.22); } html:not([data-theme="dunkel"]) .wz-lb-close, html:not([data-theme="dunkel"]) .wz-lb-nav, html:not([data-theme="dunkel"]) .wz-lb-dl { background: rgba(0,32,58,.1); color: var(--text); } html:not([data-theme="dunkel"]) .wz-lb-close:hover, html:not([data-theme="dunkel"]) .wz-lb-close:focus-visible, html:not([data-theme="dunkel"]) .wz-lb-nav:hover, html:not([data-theme="dunkel"]) .wz-lb-nav:focus-visible, html:not([data-theme="dunkel"]) .wz-lb-dl:hover, html:not([data-theme="dunkel"]) .wz-lb-dl:focus-visible { background: rgba(0,32,58,.18); } .mobile-nav a { color: var(--text-secondary); font-size: 1.125rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; padding: 11px 0; text-decoration: none; transition: color .25s; } .mobile-nav a:hover { color: var(--text); } .mobile-nav a.active { color: var(--sc, var(--cta-text)); } /* wie in der Navbar oben (07.11.2026) */ /* Unterseiten-Gruppe: eingerückt mit Führungslinie */ .mnav-group { display: flex; flex-direction: column; } .mnav-subs { display: flex; flex-direction: column; margin: 0 0 6px 4px; padding-left: 16px; border-left: 2px solid color-mix(in srgb, var(--text) 16%, transparent); } .mobile-nav .nav-cta { background: var(--sc, var(--primary)); color: var(--on-accent); padding: 13px 26px; border-radius: 2px; margin: 14px 0 0; align-self: flex-start; } /* ── teil-02-geruest.css ── */ /* ── PAGE SYSTEM ── */ .page { display: none; min-height: 100vh; animation: pfIn .45s ease both; } .page.active { display: block; } @keyframes pfIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } /* ── SCROLL REVEAL ── Verstecken nur wenn JS aktiv ist (html.js wird im -Inline-Script gesetzt). Ohne JS bleiben alle .reveal-Inhalte sichtbar → kein "leerer" Inhalt bei JS-Fehler. */ /* Kurz und knapp (06.10.2026): vorher .55 s plus bis zu .3 s Verzögerung, 24px Weg. Beim zügigen Scrollen kam der Inhalt fast eine Sekunde nach dem Daumen, und die Seite wirkte langsam. js/reveal.js löst dazu etwas VOR dem Rand aus. */ .js .reveal { opacity: 0; transform: translateY(10px); transition: opacity .3s ease-out, transform .3s ease-out; } .js .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: .05s; } .reveal-delay-2 { transition-delay: .1s; } .reveal-delay-3 { transition-delay: .15s; } @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } } /* ── UTILITY ── */ /* iOS/Safari bläht Text in breiten Blöcken (z.B. Marquee) automatisch auf → aus */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } .wrap { max-width: 1240px; margin: 0 auto; padding: 0 52px; } /* 90px waren zu viel: auf /ak/ausbildung/woodbadge summierten sich die Sektionspolster auf 1710px, also 21% der Seitenhöhe, und damit auf mehr als alle neun Trennlinien zusammen. Die 72px hier wirken auf allen 97 Seiten; für die 74 ohne Kasten-Abschnitt sind sie am Desktop die einzige Änderung, denn dort erreicht das clamp() der Trennlinie fast wieder ihre alte Größe. Tablet (60px) und Handy (48px) bleiben, wie sie sind: dort war es nie zu luftig, und die Trennlinie ist mobil schon von 114 auf 64px geschrumpft. */ .sec { padding: 72px 0 48px; } /* unten 48 (Janis, 10.11.2026: Abstände ein Drittel kleiner), siehe --abschnitt-abstand */ /* Ein Kasten, den der Satz davor ankündigt, gehört an diesen Satz. Ohne das standen 90px Polster, eine Trennlinie und noch einmal 90px dazwischen, die doodles.js zum Zentrieren setzt — rund 300 Pixel zwischen einem Doppelpunkt und dem, worauf er zeigt. :has() greift auf den VORIGEN Abschnitt zu, deshalb keine negativen Außenabstände. */ .sec:has(+ .sec--anschluss) { padding-bottom: 28px; } .sec--anschluss { padding-top: 0; } /* Oben ohne Polster, sonst wie .sec. Für neue Abschnitte statt style="padding-top:0" (scripts/inline-check.mjs zählt Inline-Styles). */ .sec-oben-buendig { padding-top: 0; } .sec-sm { padding: 60px 0; } /* ── ANBAU: ein Abschnitt, der nur aus einem Kasten besteht ────────────────── Ein solcher Abschnitt macht kein neues Thema auf, er hängt an dem, was darüber steht. Die volle Zeremonie — 90px Polster, Trennlinie, 90px Polster — behandelt ihn aber wie eines. Auf /ak/ausbildung/woodbadge standen fünf davon hintereinander: 213 Wörter auf 2380px, also fast drei Bildschirme. Gemessen am 29.08.2026, dieselbe Seite kam auf 8027px bei 1440×900. Seit 05.11.2026 gibt es keine Trennlinien mehr, Abschnitte trennt Luft (doodles.css, „ABSCHNITTE OHNE WELLEN“). Dort steht dieselbe Bedingung noch einmal, damit ein solcher Kasten nicht die volle Luft bekommt. Ob ein Kasten wirklich am Thema darüber hängt, weiß nur, wer den Text geschrieben hat. Deshalb ist es im Panel einstellbar (fields/naehe.yml): `.sec--thema` nimmt den Abschnitt hier wieder heraus und holt die Linie zurück. „Häufige Fragen" gefolgt von „Das Friedenslicht" ist so ein Fall. Das !important ist nötig und nicht bequem: die Block-Snippets schreiben `style="padding-top:0"` direkt ins Markup, damit ein Block oben anstößt. Bisher hat doodles.js das beim Setzen der Trennlinie wieder hochgezogen — fällt die Linie weg, fällt auch der Ausgleich weg, und der Kasten klebte am vorigen Abschnitt. Im CSS gelöst hält es auch ohne JavaScript. */ .sec:not(.sec--thema):has(> .wrap > .bleed-card:only-child) { padding-top: 34px !important; } /* Aufruf ohne Box (blocks/cta.php, bg „divider“), heute auf /ak, /staemme und /wegzeichen jeweils der letzte Block: Er steht mittig zwischen dem Inhalt darüber und dem Footer. Oben stehen der Abschnittsabstand und die 48px Unterkante des Abschnitts davor, unten bekommt er dasselbe (Janis, 16.11.2026; vorher 44px zusätzlich oben und nur 48px unten). */ .sec.sec--abschluss { padding-bottom: calc(var(--abschnitt-abstand, var(--section-space, clamp(64px, 8vw, 96px))) + 48px); } /* Nach unten wird nur da eng, wo direkt der nächste Kasten folgt. Steht danach ein neues Thema, kommt dort wieder eine Trennlinie, und die braucht ihren Anlauf — sonst spart man am falschen Ende. Der Nachbarschafts- Selektor erledigt das von selbst: liegt eine Trennlinie dazwischen, ist die nächste Sektion nicht mehr der direkte Nachbar und die Regel greift nicht. */ .sec:not(.sec--thema):has(> .wrap > .bleed-card:only-child):has(+ .sec:not(.sec--thema) > .wrap > .bleed-card:only-child) { padding-bottom: 34px; } /* ── BREADCRUMBS ("Du bist hier", injiziert von components.js) ── Die a-Overrides neutralisieren die globale nav-a-Regel (uppercase/ bold/padding/Unterstrich-Animation) — sonst sähen die Links anders aus als die aktuelle Seite. */ .breadcrumbs { font-family: var(--font-ui); font-size: .9rem; margin-bottom: 20px; } /* Im Seitenkopf mehr Luft zwischen Krume und Titel: 20px wirkten gedrängt, und weil .page-hero seine Höhe aus dem Inhalt zieht (min-height ist nur die Untergrenze), bekommt das Hero-Foto dadurch gleich mehr Fläche. Skaliert mit, damit es auf dem Handy nicht auseinanderfällt. */ :is(.page-hero, .ak-hero, .pg-header) .breadcrumbs { margin-bottom: clamp(26px, 3vw, 38px); } .breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; padding: 0; } .breadcrumbs li { display: inline-flex; align-items: center; gap: 10px; color: var(--text-muted); } /* „Freund/Feind"-Wegzeichen rahmen verspielte Seiten ein: Spielbeginn oben, Spielende unten. Dezente, mittige Kreide-Marke. */ .wz-frame { text-align: center; padding: 12px 0 2px; } .wz-frame .wz { width: 44px; height: 44px; opacity: .38; color: var(--text-muted); } .wz-frame-end { padding: 26px 0 12px; } /* KEINE eigene Farbe: der Pfeil ist ein Wegzeichen-SVG und zeichnet mit currentColor. Setzte er hier --text-muted (#566A7D, ein Schieferblau), erbte er NICHT das Weiss, das .page-hero .breadcrumbs li setzt — auf dem dunklen Hero-Foto stand dann ein blauer Pfeil zwischen weissen Woertern, mit entsprechend schlechtem Kontrast. So nimmt er immer die Farbe des
  • , also dieselbe wie das Wort links davon. */ .breadcrumbs .bc-sep { display: inline-flex; align-items: center; } /* Kein opacity-Abschlag: der Pfeil erbt die Farbe des
  • und war mit .55 dunkler als die Wegmarken, zwischen denen er steht — er sah aus wie ein deaktiviertes Element statt wie ein Trennzeichen. */ .breadcrumbs .bc-wz { width: 16px; height: 16px; } .breadcrumbs a { color: inherit; text-decoration: none; transition: color .2s; text-transform: none; font-weight: 400; font-size: inherit; letter-spacing: 0; padding: 0; } .breadcrumbs a::after { display: none; } .breadcrumbs a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; } .breadcrumbs [aria-current="page"] { color: var(--text-secondary); font-weight: 700; } /* ── Schmale Schirme: Mitte einklappen ────────────────────────────────────── Sichtbar bleiben Start, die direkte Elternebene und die aktuelle Seite. Was dazwischen liegt, steckt hinter einem „…"-Knopf — antippen zeigt den ganzen Pfad. Der Trenner sitzt IM
  • , verschwindet also mit seiner Krume und hinterlässt kein einzelnes Wegzeichen in der Luft. */ .breadcrumbs .bc-more { display: none; } .breadcrumbs .bc-more button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0 4px; line-height: 1; letter-spacing: .06em; } .breadcrumbs .bc-more button:hover { color: var(--text); } @media (max-width: 560px) { /* Beides ist Kleinschrift in Grossbuchstaben mit weiter Laufweite — auf dem Handy zusammen mit dem geringeren Kontrast von Grau auf Foto zu wenig. Ein Schritt hoch, nicht zwei: die Brotkrume soll die h1 nicht bedraengen. */ .breadcrumbs { font-size: 1rem; } .hero-tag { font-size: .9rem; letter-spacing: .12em; } .breadcrumbs .bc-wz { width: 18px; height: 18px; } .breadcrumbs:not(.bc-offen) .bc-mid { display: none; } .breadcrumbs:not(.bc-offen) .bc-more { display: inline-flex; } /* Lange Titel (Beitragsüberschriften) kappen statt umbrechen — der voll- ständige Titel steht direkt darunter als Überschrift. */ .breadcrumbs [aria-current="page"] { max-width: 58vw; } .breadcrumbs [aria-current="page"] > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* Auf Foto-/Farb-Heroes hell (page-hero UND ak-hero) */ .page-hero .breadcrumbs li, .ak-hero .breadcrumbs li { color: rgba(var(--weiss-rgb), .9); } .page-hero .breadcrumbs a:hover, .ak-hero .breadcrumbs a:hover { color: var(--on-photo); } .page-hero .breadcrumbs [aria-current="page"], .ak-hero .breadcrumbs [aria-current="page"] { color: rgba(var(--weiss-rgb), .95); } /* Typo-Skala: h1 (Seitentitel) klar über h2 (Abschnittstitel) — Unterseiten sollen ruhig wirken, nicht jede Sektion gleich laut. */ h1.sec-title { font-family: var(--font-heading); font-size: clamp(2.4rem,4.6vw,3.6rem); color: var(--text); line-height: 1.06; margin-bottom: 14px; } h2.sec-title { font-family: var(--font-heading); font-size: clamp(1.55rem,2.6vw,2.15rem); color: var(--text); line-height: 1.14; margin-bottom: 12px; } /* Hervorhebung heißt immer kursiv UND eingefärbt, nie eins ohne das andere (Janis, 15.11.2026). Farbe: Seitenton, sonst --akzent (website-tokens.css). */ .sec-title em { color: var(--sc, var(--akzent)); font-style: italic; } main :is(p, li, dd, td, blockquote, figcaption, .sec-sub) em { color: var(--sc, var(--akzent)); font-style: italic; } .ak-hero .sec-title em { color: inherit; } /* Foto-Hero: Akzent = Titelweiß statt grellem Ton auf Dunkel */ .sec-sub { color: var(--text-secondary); font-size: 1rem; line-height: 1.72; max-width: 560px; margin-bottom: 44px; } /* Die 44px sind fuer einen echten Abschnittswechsel gedacht: Vorspann, dann Karten, Listen oder ein Termin-Gitter. Folgt darauf aber nur WEITERER Text, liest sich der Abstand wie zwei Leerzeilen mitten im Absatz — der Vorspann ist dann optisch vom Text abgeschnitten, zu dem er gehoert. In dem Fall der normale Absatzabstand (18px, wie .article-prose p). */ .sec-sub:has(+ .article-prose) { margin-bottom: 18px; } /* Und derselbe Fall braucht auch denselben Satzspiegel. Der Vorspann brach bei 560px um, der Absatz direkt darunter erst bei 1136 — eine Spalte, zwei Zeilenlaengen, und der Text sprang beim Weiterlesen nach rechts weg. Auf /spiritualitaet gemeldet (Janis, 07.08.2026), betrifft sechs Abschnitte plus den AK-Vorspann. Abschnitte OHNE Vorspann bleiben so breit wie bisher. Breite 720 statt 560px (Janis, 04.11.2026): Auf großen Bildschirmen stand die gemeinsame Spalte schmal und verloren neben breiten Kästen. 720px sind gut 80 Zeichen, die Obergrenze für bequemes Lesen. */ .sec-sub:has(+ .article-prose), .sec-sub + .article-prose, .sec-sub + .article-prose.is-narrow { max-width: 720px; } /* Die schmale Variante des Fliesstext-Blocks. Stand vorher als inline-style im Snippet und haette jede Regel hier ueberstimmt — auch die Zeile darueber. */ .article-prose.is-narrow { max-width: 780px; } /* Lesespalte des Fließtext-Blocks (snippets/blocks/richtext.php). Innen füllen Einleitung und Text die Spalte, damit beide dieselbe Zeilenlänge haben. Linksbündig an der Kante der Überschriften darüber und darunter: mittig gesetzt stand die Spalte eingeschoben zwischen linksbündigen Abschnitten (Janis, 04.11.2026, auf /ak/praevention). */ .lesespalte { max-width: 780px; } .lesespalte .sec-sub, .lesespalte .article-prose, .lesespalte .article-prose.is-narrow { max-width: none; } .btn { display: inline-flex; align-items: center; gap: 9px; padding: 13px 26px; border-radius: var(--button-radius); font-family: var(--font-ui); font-weight: 700; font-size: 1rem; letter-spacing: .04em; cursor: pointer; /* Durchsichtiger Rahmen statt keinem: .btn-outline hat 1px Rahmen, .btn-fire hatte keinen. Bei gleicher Polsterung war der gefuellte Knopf dadurch 2px niedriger (50 gegen 52, klein 42 gegen 44), und nebeneinander sassen die Kanten versetzt. */ border: 1px solid transparent; transition: all .25s; text-transform: uppercase; text-decoration: none; /* Zeilenhöhe MUSS hier stehen, sonst sind und