/* Theme Name: Schneider-Gedenkstiftung Theme URI: https://schneider-stiftung.org Author: Isabel Kriegel Description: Massgeschneidertes Theme fuer die Sylvia und Hubert Schneider-Gedenkstiftung. Klassisches Theme: Layout liegt in den PHP-Vorlagen, die Redaktion pflegt ausschliesslich Inhalte. Version: 0.24.18 Requires at least: 6.0 Tested up to: 7.0 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: schneider */ /* Ab hier unveraendert die konsolidierte style.css aus den HTML-Entwuerfen. Aenderungen am Aussehen passieren dort und werden hierher gespiegelt. */ /* ========================================================================== Schneider-Gedenkstiftung — gemeinsames Stylesheet Zusammengeführt am 2026-08-05 aus 21 einzelnen Inline-Blöcken (267 KB). Grundlage: „Modul-Inventur Website.md", Regeln: „Design-Patterns Website.md". ========================================================================== */ /* --- 0 Schriften (lokal) ------------------------------------------------- Eingebunden am 2026-08-06. Vorher wurden Plus Jakarta Sans und Inter von fonts.googleapis.com nachgeladen; das ist in Deutschland ohne Einwilligung unzulässig (LG München I, 20.01.2022, Az. 3 O 17493/20) und stünde im Widerspruch zur Datenschutzerklärung dieser Seite. Dateien liegen in „Schriften/". Der Ordner enthält bewusst mehr Schnitte als hier eingebunden sind (Reserve). Nicht eingebundene Dateien werden nicht geladen; beim Bau des WordPress-Themes wandern nur die sieben unten deklarierten mit. font-display:swap = Text erscheint sofort in der Ersatzschrift und wird nachträglich ersetzt, statt beim Laden unsichtbar zu bleiben. --------------------------------------------------------------------------- */ /* Plus Jakarta Sans — Überschriften und Auszeichnungen (--display) */ @font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap; src:url('Schriften/plus-jakarta-sans-v12-latin/plus-jakarta-sans-v12-latin-500.woff2') format('woff2')} @font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap; src:url('Schriften/plus-jakarta-sans-v12-latin/plus-jakarta-sans-v12-latin-600.woff2') format('woff2')} @font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap; src:url('Schriften/plus-jakarta-sans-v12-latin/plus-jakarta-sans-v12-latin-700.woff2') format('woff2')} @font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap; src:url('Schriften/plus-jakarta-sans-v12-latin/plus-jakarta-sans-v12-latin-800.woff2') format('woff2')} /* Inter — Fließtext (--sans) */ @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap; src:url('Schriften/inter-v20-latin/inter-v20-latin-regular.woff2') format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap; src:url('Schriften/inter-v20-latin/inter-v20-latin-500.woff2') format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap; src:url('Schriften/inter-v20-latin/inter-v20-latin-600.woff2') format('woff2')} /* --- 1 Tokens ----------------------------------------------------------- */ :root{ --bg:#ffffff; --ink:#20281e; --pine:#275141; --pine-deep:#013220; --moss:#5b7552; --fresh:#dce8d2; --copy:#49503f; --soft:#727669; --line:#e8e6de; --display:'Plus Jakarta Sans',Arial,sans-serif; --sans:'Inter',-apple-system,"Segoe UI",Helvetica,Arial,sans-serif; --r-xs:8px; --r-sm:14px; --r-md:20px; --r-lg:28px; --r-pill:999px; /* Schatten-System (19.08.2026). Drei Stufen, mehr gibt es nicht. Vorher standen 21 Werte einzeln im Stylesheet, darunter ein Ausreisser 0 18px 40px .16 bei figure.photo und den .duo-Bildern, der alle drei Stufen mischte. Wer eine vierte Stufe braucht, braucht in Wahrheit keine. --sh-1 ruhende Flaechen: Kaesten, Submenue, Bildrahmen --sh-2 Hover auf Kacheln und Knoepfen --sh-3 grosse Flaechen, die traegt: Hero, Lightbox, Nach-oben-Knopf */ --sh-1:0 12px 32px rgba(0,0,0,.08); --sh-2:0 16px 40px rgba(0,0,0,.12); --sh-3:0 20px 48px rgba(0,0,0,.16); --sec-pt:clamp(48px,7vw,88px); --sec-pb:clamp(48px,7vw,88px); --p-mb:0; /* Abstände zwischen Modulen im Inhaltsbereich (24.08.2026). Drei Stufen, mehr gibt es nicht — dieselbe Regel wie beim Schatten-System. Wer eine vierte braucht, braucht in Wahrheit keine. --luft-m Standardabstand zwischen zwei Modulen. Stand vorher als Literal zweimal in den Ausbrecher-Regeln und heißt jetzt so, damit es überall derselbe Wert ist. --luft-l Wenn ein Modul für sich stehen soll. --luft-s Wenn zwei Dinge zusammengehören, aber nicht kleben sollen. Warum das nötig wurde: Der Grundabstand galt nur für Blöcke mit „Breite Breite". Zwei normal breite Module hintereinander — etwa Infokasten und Kachelreihe auf der Danke-Seite — klebten aneinander, und die Redaktion hatte kein Mittel dagegen außer Leerabsätzen. (Isa, 24.08.2026.) */ --luft-s:clamp(20px,2.5vw,32px); --luft-m:clamp(40px,6vw,72px); --luft-l:clamp(64px,9vw,112px); --hdr-z:10; --h1-size:clamp(34px,5.2vw,60px); --h2-size:clamp(26px,3.6vw,40px); --h2-lh:1.1; --h2-ls:-.015em; --pagehead-h1:clamp(38px,6vw,66px); /* Fließtextgröße, site-weit EIN Wert (eingeführt 2026-08-08, Isa). Stand vorher als Literal an mehreren Stellen und driftete auseinander — `.way p` lief auf festen 15,5px, der Einstiegsabsatz daneben auf Lead-Größe. Neue Textmodule binden `var(--text-size)`, keine eigenen Pixelwerte. */ --text-size:clamp(15.5px,1.7vw,17.5px); --lead-w:60ch; --prose-w:68ch; --narrow-w:760px; --grid-min:250px; --grid-gap:24px; --aside-w:320px; } /* --- 2 Seitentyp-Modifikatoren ------------------------------------------ Sieben Typen statt 21 Einzelseiten. Überschrieben werden nur Tokens, die Regeln darunter bleiben je genau eine. */ /* h2-Skala: drei Stufen (Entscheidung Isa, 05.08.2026). Dokument clamp(20px,2.4vw,26px) — dichte Rechtstexte, elf Überschriften je Seite Standard clamp(26px,3.6vw,40px) — alles dazwischen Startseite clamp(30px,4.4vw,52px) — eine Überschrift je großer Sektion Zuvor sieben Werte, deren Unterschiede teils zwei Pixel betrugen. */ body.t-front { --sec-pt:clamp(52px,8vw,96px); --sec-pb:clamp(52px,8vw,96px); --h2-size:clamp(30px,4.4vw,52px); --h2-lh:1.06; --lead-w:56ch } body.t-chronik, body.t-news{ --sec-pt:0; --sec-pb:clamp(48px,7vw,80px) } body.t-single { --prose-w:66ch } body.t-text { --lead-w:56ch } body.t-legal { --sec-pt:clamp(40px,6vw,72px); --sec-pb:clamp(40px,6vw,72px); --p-mb:12px; --hdr-z:20; --h2-size:clamp(20px,2.4vw,26px); --h2-lh:1.15; --h2-ls:-.01em; --h1-size:clamp(34px,5.2vw,58px); --narrow-w:720px } body.t-contact{ --sec-pt:clamp(46px,7vw,84px); --sec-pb:clamp(46px,7vw,84px); --hdr-z:20 } body.t-donate { --sec-pt:clamp(46px,7vw,84px); --sec-pb:clamp(46px,7vw,84px); --hdr-z:20 } /* Die Danke-Seite steht ohnehin schon in der schmalen Spalte (`wrap narrow`, 760px). Eine zweite Begrenzung darin — `.prose` mit 68ch, rund 590px — macht den Kasten schmaler als im Entwurf und laesst rechts einen Streifen frei, den niemand erklaeren kann. Hier zaehlt deshalb nur die aeussere Breite. Gilt bewusst nur fuer diesen Seitentyp: Auf Textseiten ist die 68ch-Grenze richtig, dort steht Fliesstext, und der wird ab etwa 75 Zeichen je Zeile schwer zu lesen. Ein Kasten mit vier Zeilen ist kein Fliesstext. (24.08.2026, Isas Befund beim Nachbau der Seite in WordPress.) */ body.t-danke { --prose-w:100% } /* --- 3 Basis ------------------------------------------------------------ */ h1{font-family:var(--display);font-size:var(--h1-size);font-weight:800;line-height:1.03;letter-spacing:-.02em;color:var(--pine-deep)} h2{font-family:var(--display);font-size:var(--h2-size);font-weight:700;line-height:var(--h2-lh);letter-spacing:var(--h2-ls);color:var(--pine-deep)} p{color:var(--copy);margin-bottom:var(--p-mb)} body.t-legal .doc h2{margin:38px 0 12px} section{padding:var(--sec-pt) 0 var(--sec-pb)} .narrow{max-width:var(--narrow-w)} .lead{font-size:clamp(16px,1.8vw,19px);color:var(--copy);max-width:var(--lead-w)} .pagehead{text-align:center} /* Wiederhergestellt 05.08.: Diese Abstände waren beim Zusammenführen verloren gegangen, weil .pagehead in zehn Dateien zweimal deklariert war und mein Parser nur die letzte Deklaration behielt. */ body.t-text .pagehead, body.t-legal .pagehead{padding:clamp(48px,7vw,84px) 0 clamp(48px,6vw,72px)} body.t-contact .pagehead, body.t-donate .pagehead{padding-top:clamp(48px,7vw,88px);padding-bottom:clamp(48px,6vw,72px)} body.t-chronik .pagehead,body.t-news .pagehead{padding:clamp(48px,7vw,84px) 0 clamp(38px,4.5vw,52px)} .pagehead h1{font-family:var(--display);font-size:var(--pagehead-h1);font-weight:800;line-height:1.02;letter-spacing:-.025em;color:var(--pine-deep);margin-bottom:clamp(24px,3vw,32px)} body.t-chronik .pagehead h1,body.t-news .pagehead h1{--pagehead-h1:clamp(38px,6vw,68px);line-height:1} .pagehead .lead{margin-left:auto;margin-right:auto} body.t-chronik .pagehead .lead,body.t-news .pagehead .lead{max-width:56ch} body.t-contact .pagehead .lead, body.t-donate .pagehead .lead{margin-top:clamp(24px,3vw,32px)} .prose{max-width:var(--prose-w);margin-left:auto;margin-right:auto;text-align:left} body.t-single .prose{font-size:17px;color:var(--copy)} .prose p{margin-bottom:1.1em;color:var(--copy);font-size:var(--text-size)} body.t-single .prose p{margin-bottom:20px;font-size:inherit} /* Kein hervorgehobener erster Absatz. Der Dek unter der H1 leistet den Einstieg bereits; ein zweiter, größerer Absatz direkt darunter setzt eine dritte Textgröße auf dieselbe Seite. Entscheidung vom 2026-08-04 (Detailseiten), bei der CSS-Zusammenlegung wieder hereingerutscht, am 2026-08-07 endgültig für alle Fließtexte entfernt (Isa). Nicht wieder einführen. */ .prose h3{font-family:var(--display);font-size:19px;font-weight:700;color:var(--pine-deep);margin:26px 0 8px} .prose em{font-style:italic;color:var(--pine-deep)} /* Aufzaehlungen und Nummerierungen im Fliesstext (12.08.2026). Vorher gab es dazu keine einzige Regel, deshalb griff der globale Reset aus Abschnitt 3: `padding:0` zieht die Aufzaehlungszeichen aus dem Kasten heraus, die Liste steht dann wie ein Absatz ohne Struktur da. Bekannte Luecke aus der Modul-Inventur, aufgefallen beim ersten Text im WordPress-Editor. */ .prose ul,.prose ol{margin:0 0 1.1em;padding-left:1.35em;color:var(--copy);font-size:var(--text-size)} .prose ul{list-style:disc} .prose ol{list-style:decimal} .prose li{margin-bottom:.5em;line-height:1.65} .prose li:last-child{margin-bottom:0} .prose li::marker{color:var(--moss)} .prose li>ul,.prose li>ol{margin:.5em 0 0} /* --- Inhaltsfluss der WordPress-Seitenvorlagen (12.08.2026) --------------- Problem: Im Editor entsteht ein durchgehender Strom von Bloecken. Die meisten gehoeren in die schmale Textspalte, einige sollen breiter sein (Zweispalter) oder ueber die ganze Fensterbreite laufen (CTA-Band). Loesung: Der Behaelter `.inhalt` hebt die eigene Breitenbegrenzung auf und gibt sie an jedes Kind einzeln weiter. Wer `alignwide` oder `alignfull` traegt, bricht aus. `overflow-x:clip` faengt die Scrollleisten-Differenz der 100vw-Rechnung ab; anders als `hidden` bricht `clip` kein sticky. */ .inhalt>.alignwide,.inhalt>.alignfull, .inhalt>.is-style-breit{max-width:none;margin-left:50%;transform:translateX(-50%)} .inhalt>.alignwide, .inhalt>.is-style-breit{width:min(1140px,100vw - 56px)} .inhalt>.alignfull{width:100vw} /* `.is-style-breit` ist die zweite Laufweite fuer Fliesstext, waehlbar im Editor unter „Stile → Breite Textspalte" (siehe `inc/textbreite.php`). Sie laeuft bewusst auf derselben Spur wie „Breite Breite": Ein Vorspann ueber einer Kachelreihe soll an derselben Kante beginnen und enden wie die Reihe darunter. Ein Wert, zwei Anwender — wer ihn aendert, aendert ihn hier fuer beide. (Isas Anforderung, 25.08.2026.) */ /* Der Zweispalter kommt im Editor als Spaltenblock. Dessen eigene Regeln stellen auf flex; diese Zeile stellt sicher, dass unser Raster gewinnt. */ .duo.wp-block-columns{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,60px);align-items:center} @media(max-width:900px){.duo.wp-block-columns{grid-template-columns:1fr}} /* Der Spaltenblock setzt `align-items:normal!important` auf den Behaelter. Dagegen kommt keine Regel am Behaelter an, deshalb zentrieren die Kinder sich selbst. */ /* Bild und Textspalte stehen zueinander mittig, egal welche Seite hoeher ist. Der obere Abstand des ersten Elements muss dabei weg: `.prose h2` bringt 36px mit, die den Textblock optisch nach unten zogen und das Bild schweben liessen. (Isa, 13.08.2026) */ .duo.wp-block-columns>*{align-self:center} .duo .wp-block-column>*:first-child{margin-top:0} /* Das Bild bekommt den Look von `figure.photo`. Rahmen und Schatten sitzen auf dem Bild selbst, nicht auf der Figur: Andernfalls liegt die Bildunterschrift innerhalb des abgerundeten Kastens und erscheint als weisser Streifen im Bild. */ .duo .wp-block-image{margin:0} .duo .wp-block-image img{width:100%;height:auto;display:block;border-radius:22px;box-shadow:var(--sh-3)} .duo .wp-block-image figcaption{font-size:10px;color:var(--soft);margin-top:6px;text-align:left} /* Die Hinweiszeile stand in `.prose` wie ein normaler Absatz da: `.prose p` wiegt (0,1,1), `.hint` nur (0,1,0). Mit dem Element davor gewinnt sie. (Isa, 13.08.2026) */ .prose p.hint,.doc p.hint{font-size:13.5px;color:var(--soft);line-height:1.55} /* Luft um die Ausbrecher. Ohne diese Zeilen klebt ein Absatz, der auf ein Band folgt, direkt an dessen Unterkante: Der Absatz bringt nur einen Abstand nach unten mit, keinen nach oben. (Isa, 12.08.2026) */ .inhalt>.alignwide,.inhalt>.alignfull{margin-top:var(--luft-m)} .inhalt>.alignwide+*,.inhalt>.alignfull+*{margin-top:var(--luft-m)} .inhalt>.alignwide:first-child,.inhalt>.alignfull:first-child{margin-top:0} /* --- Abstand zwischen Modulen (24.08.2026) -------------------------------- Bis hierher bekamen nur die Ausbrecher oben einen Modulabstand. Zwei normal breite Module hintereinander — Infokasten, dann Kachelreihe — standen dagegen so eng wie zwei Absätze. Das ist kein Redaktionsfehler, sondern eine Lücke im Stylesheet: Ein Modul ist kein Absatz und darf nicht so behandelt werden. Die Klasse `.modul` markiert, was als eigener Baustein gilt. Sie steht in den Bausteinen selbst, damit die Redaktion nichts auswählen muss. Die bekannten Modul-Klassen sind mit aufgeführt, damit auch ältere Inhalte ohne `.modul` richtig atmen. Bewusst nur `margin-top`, nie beides: Zwei Module untereinander brächten sonst jeweils einen halben Abstand mit, und die Summe wäre eine andere als zwischen Modul und Absatz. Ein Abstand gehört an eine Kante, nicht an zwei. (Lehre aus dem gestapelten Abstand vom 18.08., der aus drei Quellen auf 204px anwuchs.) */ .inhalt>.modul, .inhalt>.infobox, .inhalt>.memorial, .inhalt>.timeline, .inhalt>.cardgrid, .inhalt>.duo{margin-top:var(--luft-m)} .inhalt>.modul+*, .inhalt>.infobox+*, .inhalt>.memorial+*, .inhalt>.timeline+*, .inhalt>.cardgrid+*, .inhalt>.duo+*{margin-top:var(--luft-m)} /* --- Luft auf Zuruf ------------------------------------------------------ Zwei Block-Stile, im Editor unter „Stile" wählbar (siehe `inc/abstaende.php`). Gedacht für den Einzelfall, in dem der Grundabstand nicht passt — nicht als Ersatz dafür. Kein Abstandshalter-Block: Der verlangt eine Pixelzahl, die niemand kennen kann, erzeugt ein leeres Element im Inhalt und driftet nach drei Seiten auseinander. Ein Stil hängt am Block, den es betrifft, und kennt nur die Stufen, die es im Designsystem gibt. */ .inhalt>.is-style-luft-s{margin-top:var(--luft-s)} .inhalt>.is-style-luft-m{margin-top:var(--luft-m)} .inhalt>.is-style-luft-l{margin-top:var(--luft-l)} /* Auch das erste Element bleibt bündig — ein Stil soll den Seitenanfang nicht nach unten schieben. */ .inhalt>.is-style-luft-s:first-child, .inhalt>.is-style-luft-m:first-child, .inhalt>.is-style-luft-l:first-child{margin-top:0} /* --- Kästen halten ihren Innenabstand selbst ------------------------------ HARTE REGEL, entstanden aus drei Anläufen am selben Tag. Jeder Kasten bringt seinen Innenabstand als `padding` mit. Was darin steht, darf keinen eigenen Abstand nach außen hinzufügen — sonst addieren sich zwei Werte, und der Kasten sieht oben anders aus als unten. Warum das im Entwurf nie auffiel und in WordPress dreimal: In den HTML- Entwürfen stehen die Kästen außerhalb von `.prose`. In WordPress stehen sie im Inhaltsstrom, also innerhalb — und dort erben Überschriften und Absätze `.prose h2{margin-top:36px}`, `.prose h3{margin-top:26px}` und `.prose p{margin-bottom:1.1em}`. Die drei Anläufe waren: Infokasten (Überschrift saß 52px statt 26px tief), Modulkopf („Solange Sie hier sind" bis zu 108px zu tief), Kachel (Überschrift rund 58px statt 24px tief). Immer dieselbe Ursache, immer einzeln nachgebessert. Hier steht sie jetzt einmal für alle. Zwei Ebenen, weil das Theme keine `theme.json` hat und WordPress in jeden Gruppen-Block einen zusätzlichen Behälter schiebt — siehe die Regel beim Infokasten weiter oben. NEUE KÄSTEN GEHÖREN IN DIESE LISTE. Wer einen Kasten baut und ihn hier vergisst, bekommt denselben Fehler ein viertes Mal. */ .infobox>:first-child, .org>:first-child, .card>:first-child, .card>.body>:first-child, .memorial>:first-child, .modul>:first-child, .infobox>.wp-block-group__inner-container>:first-child, .memorial>.wp-block-group__inner-container>:first-child, .modul>.wp-block-group__inner-container>:first-child{margin-top:0} /* VIERTES MAL, 25.08.2026 (Isas Befund auf „Ueber uns"): Bei der Kachel mit Bild ist das erste Kind der Kasten `.thumb`, nicht die Ueberschrift — die steckt eine Ebene tiefer in `.body`. `.card>:first-child` traf also das Bild, das ohnehin keinen Abstand hat, und die h3 behielt ihre 26px aus `.prose h3`. Sichtbar als zu grosse Luecke zwischen Bildunterkante und Ueberschrift. Bei `.org` (Kachel ohne Bild) fiel es nie auf, dort ist die Ueberschrift wirklich das erste Kind. MERKE: Hat ein Kasten eine Innenhuelle, gehoert sie mit in die Liste. */ .infobox>:last-child, .org>:last-child, .card>:last-child, .memorial>:last-child, .infobox>.wp-block-group__inner-container>:last-child, .memorial>.wp-block-group__inner-container>:last-child{margin-bottom:0} /* --- Überschrift über einem Modul ---------------------------------------- `.modul-kopf` gehört auf eine Überschrift, die unmittelbar vor einem Modul steht. Sie loest zwei Dinge auf einmal: 1. Der Abstand nach unten kommt aus genau einer Quelle: der Ueberschrift. Das Modul darunter gibt seinen eigenen dafuer ab, sonst staenden zwei Werte uebereinander. KORRIGIERT 25.08.2026 (Isas Befund auf „Ueber uns"): Die Fassung davor setzte beide Seiten auf 0 — die Ueberschrift gab ihren Abstand ab und das Modul gab seinen auch ab. Uebrig blieb nichts. Damit klebte jede Modulueberschrift auf dem, was sie ueberschreibt: „Lernen Sie uns kennen" auf den Kacheln, „Von 2013 bis heute" auf dem Zeitstrahl, „Unser Auftrag" auf dem Absatz darunter. Der Kommentar behauptete schon damals, das Modul bringe seinen Abstand mit — die Regel drei Zeilen tiefer nahm ihn ihm wieder weg. Wer diese Stelle anfasst: Genau ein Wert darf ungleich 0 sein. 2. Nach oben traegt sie den vollen Modulabstand — und das folgende Modul gibt seinen dafuer ab. So wandert der Abstand an die Kante, an die er gehoert: vor die Ueberschrift, nicht zwischen sie und ihr Modul. ERSTE FASSUNG WAR FALSCH (24.08.2026): Da setzte `.modul-kopf` schlicht `margin-top:0`. Das stimmte nur, solange das Modul den Abstand mitbrachte — stand die Ueberschrift aber allein im Textfluss, klebte sie am Absatz davor. Genau so ist es auf der Ueber-uns-Seite passiert. Eine Klasse, die einen Abstand wegnimmt, muss sagen, wer ihn stattdessen traegt. */ .prose h2.modul-kopf{margin-top:var(--luft-m);margin-bottom:14px} /* NACHGESCHAERFT 25.08.2026 (Isas Befund auf „Stiftungsphilosophie"): Der volle Modulabstand nach unten gilt nur, wenn unmittelbar ein Modul folgt. Steht dazwischen noch ein Absatz — „Unser Auftrag", dann ein Vorspann, dann erst die Kachelreihe —, ist die Ueberschrift keine Modulueberschrift mehr, sondern eine gewoehnliche h2, und bekommt deren 14px. Die Liste unten ist dieselbe wie die der Module, die ihren eigenen Abstand abgeben; beide gehoeren zusammen und werden zusammen gepflegt. */ .prose h2.modul-kopf:has(+.modul), .prose h2.modul-kopf:has(+.infobox), .prose h2.modul-kopf:has(+.cardgrid), .prose h2.modul-kopf:has(+.navcards), .prose h2.modul-kopf:has(+.timeline), .prose h2.modul-kopf:has(+.memorial){margin-bottom:var(--luft-s)} .prose .modul-kopf+.modul, .prose .modul-kopf+.infobox, .prose .modul-kopf+.cardgrid, .prose .modul-kopf+.timeline, .prose .modul-kopf+.memorial{margin-top:0} .inhalt>.modul-kopf:first-child{margin-top:0} /* --- Dasselbe ohne Klasse, fuer alles, was die Redaktion selbst anlegt ---- `.modul-kopf` kommt aus den Importdateien. Wer eine Ueberschrift im Editor neu anlegt, hat die Klasse nicht — und bekam den vollen Modulabstand zwischen Ueberschrift und Modul: 14px von der h2 plus bis zu 72px vom Modul. Fast neunzig Pixel zwischen einer Ueberschrift und dem, was sie ueberschreibt. (Isas Befund auf „Stiftungsphilosophie", 25.08.2026.) Eine Ueberschrift, auf die unmittelbar ein Modul folgt, IST eine Modulueberschrift — das steht im Aufbau und muss nicht ausgewaehlt werden. Deshalb kein zweiter Block-Stil, den man kennen und treffen muss, sondern `:has()`. Der Grundabstand ist Sache des Stylesheets, nicht der Redaktion. Bewusst NUR der Abstand nach unten. Nach oben bleibt alles, wie es ist — sonst wuerde diese Regel die Block-Stile „Mehr/Viel Luft darueber" ueberstimmen, und eine Einstellung, die man sichtbar getroffen hat, waere wirkungslos. Wer oben mehr Luft will, waehlt sie weiterhin selbst. Kann ein Browser `:has()` nicht, steht der alte, groessere Abstand da; kaputt ist nichts. */ .prose h2:has(+.modul), .prose h2:has(+.infobox), .prose h2:has(+.cardgrid), .prose h2:has(+.navcards), .prose h2:has(+.timeline), .prose h2:has(+.memorial){margin-bottom:var(--luft-s)} .prose h2+.modul, .prose h2+.infobox, .prose h2+.cardgrid, .prose h2+.navcards, .prose h2+.timeline, .prose h2+.memorial{margin-top:0} /* --- Kacheln sind nie unterstrichen -------------------------------------- `.card` und `.org` tragen ihre Absage an die Unterstreichung schon in der Grundregel, aber nur mit einer Klasse Gewicht. WordPress liefert eigene Grundstile aus (`:root :where(a…)`), die spaeter geladen werden und bei Gleichstand gewinnen. Mit dem Element davor ist die Sache entschieden. Betrifft ausschliesslich Kachel-Links. Jeder andere Link behaelt seine Unterstreichung — die gehoert im Fliesstext dazu. */ a.card,a.card:visited,a.card:hover, a.org,a.org:visited,a.org:hover{text-decoration:none;color:inherit} /* Ohne diese Zeile sitzt die erste Ueberschrift 36px tiefer als der Kasten daneben — `.prose h2` bringt den Abstand mit. (Isa, 13.08.2026) */ .inhalt>*:first-child{margin-top:0} /* --- Kachelreihen im Inhaltsstrom brechen immer aus ----------------------- Eine Kachelreihe ist kein Fliesstext. In den Entwuerfen steht sie ohne Ausnahme in `.wrap` — volle 1140px, drei bis vier Kacheln nebeneinander. Landet sie im Inhaltsstrom, begrenzt `.prose` sie auf Textbreite: Aus vier Kacheln werden zwei, und die Seite wirkt eng, obwohl daneben Platz ist. Die Regel greift unabhaengig davon, ob jemand „Breite Breite" gesetzt hat. Das ist Absicht: Fuer eine Kachelreihe gibt es keinen Fall, in dem Textbreite richtig waere, also soll niemand daran denken muessen. Gilt fuer beide Reihen — `.navcards` (mit Bild) und `.cardgrid` (ohne) — und fuer die Ueberschrift darueber, damit sie ueber derselben Breite zentriert steht und nicht ueber der schmaleren Textspalte. `:has()` erfasst zusaetzlich die Huelle `.modul`, in der die Bausteine ihre Reihe mitbringen. Kann ein Browser das nicht, bricht die Reihe selbst aus und die Huelle bleibt stehen — dann sitzt der Abstand etwas anders, aber nichts ist kaputt. (24.08.2026, Isas Befund auf der Ueber-uns-Seite.) */ .inhalt .navcards, .inhalt .cardgrid, .inhalt>.modul:has(.navcards), .inhalt>.modul:has(.cardgrid), .inhalt>.modul-kopf:has(+.modul .navcards), .inhalt>.modul-kopf:has(+.modul .cardgrid){ max-width:none; width:min(1140px,100vw - 56px); margin-left:50%; transform:translateX(-50%); } /* Die Reihe steckt schon in einer ausgebrochenen Huelle — zweimal ausbrechen wuerde sie um die halbe Breite nach rechts schieben. */ .inhalt>.modul:has(.navcards) .navcards, .inhalt>.modul:has(.cardgrid) .cardgrid{ width:auto;margin-left:0;transform:none; } /* Alleinstehende Links und Links in Hinweiszeilen bekommen das Aussehen von `.textlink`: Dunkelgruen mit hellem Balken darunter. Im Editor laesst sich einem Link keine Klasse zuweisen, deshalb ueber den Aufbau erkannt. DIE :not()-KETTE IST HIER KEIN BEIWERK, SIE TRAEGT DAS GEWICHT. Erste Fassung stand mit zwei Ausnahmen da (`.btn`, `.wp-block-button__link`) und damit bei fuenf Klassen. Als die Sammelregel fuer Fliesstext-Links am 24.08. um `.org` und `.card` wuchs, kam sie auf sechs — und uebernahm die Unterstreichung zurueck. Ergebnis auf der Spendenseite: heller Balken UND Unterstreichung an denselben zwei Links („Zu unserer Spendenseite bei Betterplace", „wir in unserem Ratgeber"). Gefunden von Isa, 25.08.2026. Beide Regeln fuehren jetzt dieselben fuenf Ausnahmen — die Strukturregel liegt damit sicher darueber und bleibt es auch, wenn die Kette waechst. WER DIE SAMMELREGEL UNTEN ERWEITERT, ERWEITERT DIESE HIER MIT. */ .prose.inhalt p>a:only-child:not(.btn):not(.textlink):not(.wp-block-button__link):not(.org):not(.card), .prose.inhalt p.hint a:not(.btn):not(.textlink):not(.wp-block-button__link):not(.org):not(.card){ display:inline-block;color:var(--pine);font-weight:600;text-decoration:none; border-bottom:2px solid var(--fresh);padding-bottom:2px;transition:border-color .2s } .prose.inhalt p>a:only-child:not(.btn):not(.textlink):not(.wp-block-button__link):not(.org):not(.card):hover, .prose.inhalt p.hint a:not(.btn):not(.textlink):not(.wp-block-button__link):not(.org):not(.card):hover{border-color:var(--pine)} body{overflow-x:clip} /* Der Zitatblock des Editors legt einen Absatz in das Zitat. Ohne diese Zeile ueberschreibt `.prose p` die Gestaltung des Gedenk-Kastens. */ .memorial blockquote p{font:inherit;color:inherit;margin:0} /* Die Jahreszahl im Zeitstrahl ist im Editor ein Absatz, im Entwurf ein div. */ .tl p.y{margin-top:0} /* Der Knopf des Editors traegt eigene Klassen. Statt die Redaktion mit HTML zu behelligen, bekommt er hier das Aussehen von `.btn`. */ .wp-block-button__link{display:inline-flex;align-items:center;gap:8px;background:var(--pine-deep);color:var(--fresh);padding:13px 26px;border-radius:var(--r-sm);text-decoration:none;font-size:15px;font-weight:600;border:0;cursor:pointer;transition:transform .2s,box-shadow .2s} .wp-block-button__link:hover{transform:translateY(-2px);box-shadow:var(--sh-2)} .wp-block-buttons{display:flex;gap:14px;flex-wrap:wrap;justify-content:center} body.t-single .prose ul,body.t-single .prose ol{font-size:inherit} /* Hinweis-Absatz. Ersetzt .note und .sidenote (zwei Namen für dasselbe). */ /* Hinweis-Absatz. Steht als eigener Gedanke nach dem Fließtext, deshalb mit eigenem Abstand nach oben (Isa, 05.08.). */ .hint{font-size:13.5px;color:var(--soft);line-height:1.55;margin-top:clamp(20px,2.5vw,28px)} /* Hilfsklasse. Ersetzt das seitenlokale .gc-center auf „Geschichte". `text-align:center` allein reicht nicht: Blöcke mit eigener `max-width` — hier der Zeitstrahl — bleiben ohne `margin:auto` am linken Rand kleben, während die Überschrift darüber mittig steht. Beim Umbenennen von `.gc-center` auf `.center` (CSS-Zusammenlegung 05.08.) sind die Auto-Margin-Zeilen liegengeblieben, der alte `.gc-center`-Block stand danach unbenutzt im Stylesheet. Wiederhergestellt 2026-08-08 (Isa). */ .center{text-align:center} .center .lead,.center .prose,.center .timeline{margin-left:auto;margin-right:auto} /* Einzige Ausnahme: Beim Zeitstrahl wird die Position zentriert, nicht der Satz. Er hat eine senkrechte Linie mit Punkten an der linken Kante, an der die Jahres- zahlen hängen — zentrierte Zeilen würden von dieser Kante wegwandern. Der Gedenk-Kasten bringt seine Zentrierung selbst mit, siehe `.memorial`. */ .center .timeline{text-align:left} /* Filterzeile der Archivseiten (Pillen, echte Links — Lehre aus B19). Auf schmalen Bildschirmen quer scrollbar statt vierzeilig umbrechend. */ .filterbar{display:flex;gap:9px;justify-content:center;flex-wrap:wrap; margin:0 0 clamp(28px,4vw,40px)} .filter{display:inline-flex;align-items:center;font-family:var(--display);font-size:13.5px;font-weight:700; letter-spacing:-.01em;text-decoration:none;padding:8px 17px;border-radius:var(--r-pill); background:transparent;color:var(--pine-deep);border:1.5px solid var(--line); transition:border-color .2s,background .2s,color .2s} .filter[aria-current="page"]{background:var(--pine-deep);color:var(--fresh);border-color:var(--pine-deep)} @media(max-width:620px){ .filterbar{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start; scrollbar-width:none;padding-bottom:2px; margin-left:calc(clamp(18px,4vw,28px) * -1);margin-right:calc(clamp(18px,4vw,28px) * -1); padding-left:clamp(18px,4vw,28px);padding-right:clamp(18px,4vw,28px)} .filterbar::-webkit-scrollbar{display:none} .filter{flex:none} } /* Bezugspunkt für die Bildnachweise (.credit liegt absolut). Ohne position:relative springt der Nachweis an den nächsten positionierten Vorfahren. Wiederhergestellt 05.08. */ .thumb,.imgbox,.photo,.featured .img,.hero .img,figure.photo{position:relative} /* --- 4 Raster: drei Familien ------------------------------------------- auto-fill statt auto-fit, damit Kacheln ihre Größe behalten, wenn weniger da sind als Spalten passen. Die alten Klassennamen bleiben vorerst als Gruppe; Umbenennung auf .cards beim Bau des Themes. */ .cards,.postgrid,.cardgrid,.navcards,.people{ display:grid; grid-template-columns:repeat(auto-fill,minmax(var(--grid-min),1fr)); gap:var(--grid-gap); } /* Inhaltskarten stehen immer im Dreier (harte Regel, Design-Patterns). 280px ergeben bei 1140px Contentbreite genau drei Spalten. */ .cardgrid{--grid-min:280px} .cardgrid,.navcards{margin-top:36px} .people{margin-bottom:clamp(40px,6vw,64px)} .split,.grid2,.artBody .grid{display:grid;grid-template-columns:1fr;gap:clamp(30px,5vw,64px);align-items:start} .split.has-aside,.artBody .grid.has-aside{grid-template-columns:1fr var(--aside-w)} /* `.grid2` ist bewusst NICHT an `--aside-w` gebunden (korrigiert 2026-08-08, Isa). Zwei verschiedene Dinge stehen hier nebeneinander: - Infokasten (`.split.has-aside`, `.artBody .grid.has-aside`, `.sidebar`): begleitet einen Fließtext, bleibt bei festen 320px schmal und tritt zurück. - Handlungskasten (`.grid2`): Spendenkonto und Direktkontakt. Er trägt die Angaben, wegen derer die Seite überhaupt aufgerufen wird — IBAN, BIC, Telefon, Adresse —, und steht deshalb gleichrangig neben dem Text, nicht als Randnotiz daneben. Auf 320px brechen IBAN und BIC zudem um. Bei der CSS-Zusammenlegung am 05.08. war `.grid2` in die Infokasten-Regel gerutscht; beide Kästen schrumpften dadurch von rund 435px auf 320px. Ein Wert für beide Seiten statt der früheren 1.15fr/.85fr (Spenden) und 1.1fr/.9fr (Kontakt) — die Differenz war gewachsen, nicht entschieden. */ .grid2{grid-template-columns:1.15fr .85fr} @media(max-width:900px){ .split.has-aside,.grid2,.artBody .grid.has-aside{grid-template-columns:1fr} .sidebar{position:static;order:2} } .duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,60px);align-items:center} /* --- 5 Module und Seitenregeln (automatisch übernommen) ----------------- */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.65;-webkit-font-smoothing:antialiased} img{max-width:100%;display:block} .wrap{max-width:1140px;margin:0 auto;padding:0 clamp(22px,4vw,28px)} a:focus-visible,button:focus-visible{outline:3px solid var(--pine);outline-offset:3px;border-radius:var(--r-xs)} .eyebrow{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--moss);margin-bottom:14px} .btn{display:inline-flex;align-items:center;gap:8px;background:var(--pine-deep);color:var(--fresh);padding:13px 26px;border-radius:var(--r-sm);text-decoration:none;font-size:15px;font-weight:600;border:0;cursor:pointer;transition:transform .2s,box-shadow .2s} .btn:hover{transform:translateY(-2px);box-shadow:var(--sh-2)} .btn.ghost{background:transparent;color:var(--pine-deep);border:1.5px solid var(--pine-deep)} body.t-donate .btn.ghost{background:#fff;color:var(--pine-deep);border:1.5px solid var(--line)} .btn.ghost:hover{background:var(--pine-deep);color:var(--fresh)} .textlink{display:inline-block;color:var(--pine);font-weight:600;text-decoration:none;border-bottom:2px solid var(--fresh);padding-bottom:2px;transition:border-color .2s} .textlink:hover{border-color:var(--pine)} .textlink.secondary{font-size:15px;color:var(--ink)} /* Deckkraft 0,82 (vorher 0,92, Isa 07.08.): Der Inhalt darf beim Scrollen sichtbar durchscheinen, ohne dass die Leiste zum Glaseffekt wird. Der Weichzeichner steigt mit auf 14px — er trägt die Lesbarkeit, nicht die Deckkraft. Weiter runter als 0,78 kippt die Navigation über dunklen Bildern in den Kontrast. */ header{position:sticky;top:0;z-index:var(--hdr-z);background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);transition:box-shadow .25s} /* Browser ohne backdrop-filter bekommen die alte, fast deckende Fläche — ohne Weichzeichner wäre der Text sonst über Bildern nicht mehr sicher lesbar. */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ header{background:rgba(255,255,255,.96)} } header.scrolled{box-shadow:var(--sh-1)} .navbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px clamp(18px,4vw,28px);max-width:1140px;margin:0 auto} .brand{display:flex;align-items:center;gap:12px;text-decoration:none} /* Seit 08/2026 traegt die Bild-Text-Marke den Stiftungsnamen selbst, der getippte Schriftzug daneben ist entfallen. Der Name steckt im alt-Text des Bildes und bleibt so fuer Screenreader und Suchmaschinen lesbar. 58px ist die kleinste Hoehe, bei der die Handschriftzeile „Sylvia & Hubert" noch sauber steht; darunter franst sie aus. Unter 560px waere die komplette Marke neben Spenden-Knopf und Burger zu schmal — dort uebernimmt das -Element die reine Bildmarke. Der Umschaltpunkt lag bis 10.08. bei 480px. Mit der groesseren Schrift (Dateien -3) ist die Marke 271 statt 220px breit und stiess schon bei rund 500px an den Spenden-Knopf. */ .brand .logo{display:block;flex:none;line-height:0} .brand .logo img{display:block;height:58px;width:auto} nav ul{list-style:none;display:flex;gap:clamp(14px,2.4vw,30px);align-items:baseline} nav a{color:var(--ink);text-decoration:none;font-size:15px;font-weight:500;padding:4px 0;border-bottom:2px solid transparent;transition:border-color .2s;cursor:pointer} nav a:hover{border-color:var(--fresh)} nav a.home{padding:4px 0;border-bottom:2px solid transparent;color:var(--pine-deep)} /* Ohne diese Zeile bleibt das Haus beim Zeigen ohne Strich: `nav a:hover` und `nav a.home` wiegen beide (0,1,2), und die spaeter notierte Regel gewinnt. Gefunden von Isa am 12.08.2026 beim Theme-Spike. */ nav a.home:hover{border-color:var(--fresh)} nav a.home svg{width:16px;height:13.5px;flex:none;fill:none;stroke:currentColor;stroke-width:1.97;stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:baseline;transition:stroke-width .2s} nav a.home .homelabel{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} nav a.active,nav a[aria-current="page"],nav .has-sub>a.active{border-color:var(--fresh);color:var(--pine-deep);font-weight:600} nav a.home.active svg,nav a.home[aria-current="page"] svg{stroke-width:2.5} .has-sub{position:relative} .submenu{list-style:none;position:absolute;top:100%;left:-14px;min-width:230px;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--sh-1);padding:8px;display:none;flex-direction:column;gap:0} .submenu li{width:100%} .submenu a{display:block;padding:5px 14px;border-radius:var(--r-xs);border:0;font-size:14.5px;white-space:nowrap} .submenu a:hover{background:var(--fresh);border:0} .has-sub:hover .submenu,.has-sub:focus-within .submenu{display:flex} .navmeta{display:flex;align-items:center;gap:18px} .burger{display:none} .burger-label{display:none;cursor:pointer;padding:8px;border-radius:var(--r-xs)} .burger-label span{display:block;width:24px;height:2.5px;background:var(--pine-deep);margin:5px 0;border-radius:var(--r-pill);transition:.25s} .featured{display:grid;grid-template-columns:1.1fr .9fr;gap:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff;box-shadow:var(--sh-1);text-decoration:none;color:inherit;transition:transform .25s,box-shadow .25s} .featured:hover{transform:translateY(-5px);box-shadow:var(--sh-3)} .featured .img.ph{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#eef5e6,#dcebd0)} /* position:static ist Pflicht: .featured .img img setzt weiter unten position:absolute, damit ein echtes Foto die Flaeche fuellt. Bleibt das stehen, faellt die Libelle aus dem Flex-Fluss und klebt oben links statt mittig. (Gefunden von Isa, behoben 2026-08-06.) */ .featured .img.ph img{position:static;width:min(34%,170px);height:auto;object-fit:contain;opacity:.85} .featured .img{position:relative;min-height:320px;overflow:hidden} .featured .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s} .featured:hover .img img{transform:scale(1.04)} .featured .txt{padding:clamp(26px,4vw,48px);display:flex;flex-direction:column;justify-content:center;gap:14px} /* Weiterlese-Link im Highlight-Teaser: kleiner als der Fliesstext und am unteren Kachelrand statt direkt unter dem Absatz (Isa, 06.08.). margin-top:auto verbraucht den freien Raum und schiebt ihn nach unten; dadurch rueckt der Textblock darueber nach oben, was hier gewollt ist. Stand vorher als Inline-Style in beiden Dateien, jetzt an einer Stelle. */ .featured .txt .textlink{font-size:14.5px;align-self:flex-start;width:fit-content;margin-top:auto} .featured .cat{font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--moss)} .featured h2{font-size:clamp(24px,3vw,34px)} .featured p{color:var(--copy);font-size:16px} .post{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s;text-decoration:none;color:inherit} .post:hover{transform:translateY(-6px);box-shadow:var(--sh-2)} .post .thumb{aspect-ratio:3/2;overflow:hidden;position:relative} .thumb .credit{position:absolute;bottom:8px;right:2px;z-index:2;margin:0;writing-mode:vertical-rl; font-family:var(--sans);font-size:8px;font-weight:500;line-height:1;letter-spacing:.02em; color:#fff;opacity:.55;text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 8px rgba(0,0,0,.5);pointer-events:none} /* Derselbe Nachweis noch einmal, nur mit drei Klassen statt zwei. Der Grund ist kein Schoenheitsfehler, sondern ein echter Konflikt: Weiter unten stehen `body.t-chronik .credit`, `body.t-news .credit` und `body.t-front .credit` fuer die grossen Bilder. Sie treffen aber jeden `.credit` auf diesen Seiten, also auch den auf der Kachel, und sie wiegen mit zwei Klassen plus einem Element schwerer als `.thumb .credit`. Ergebnis: Auf der Chronik gewann die Regel fuer grosse Bilder — 10px, 12px vom Rand, volle z-index — waehrend `writing-mode:vertical-rl` als einzige Eigenschaft stehen blieb, weil sie dort nirgends zurueckgesetzt wird. Der Nachweis stand dann senkrecht in Grossbildgroesse quer durchs Motiv. Drei Klassen gewinnen unabhaengig von der Reihenfolge im Stylesheet. Gefunden von Isa am 18.08.2026 im Livebetrieb, im Entwurf lag der Fehler seit dem 04.08. unbemerkt. Sollvorgabe: [[Design-Patterns Website]], Abschnitt „Bildnachweis-Marker“ — Teaserkacheln 8px senkrecht, opacity .55. Zweiter Anlauf am selben Tag: Der erste Versuch setzte nur die Eigenschaften, die sichtbar falsch waren, und liess den Rest den schwaecheren Regeln. Das ging schief, weil `body.t-chronik .post p` — die Regel fuer den TEASERTEXT der Kachel — mit (0,2,2) schwerer wiegt als jede Nachweis-Regel und dem Nachweis `color:var(--copy)` verpasste. Der Nachweis stand grau statt weiss und war auf hellen Fotos praktisch unsichtbar. Lehre: Ein Baustein, der gegen fremde Regeln verteidigt werden muss, setzt ALLE seine Eigenschaften selbst. Teilweise Ueberschreibung laesst genau die Luecken offen, die man nicht im Blick hatte. */ .post .thumb .credit,.card .thumb .credit{position:absolute;bottom:8px;right:2px;z-index:2;margin:0; writing-mode:vertical-rl;font-family:var(--sans);font-size:8px;font-weight:500;line-height:1; letter-spacing:.02em;color:#fff;opacity:.55; text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 8px rgba(0,0,0,.5);pointer-events:none} .post .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s} .post:hover .thumb img{transform:scale(1.05)} .post .body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:7px;flex:1} body.t-chronik .post .body,body.t-news .post .body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1} .post .meta{font-size:11.5px;color:var(--moss);letter-spacing:.09em;text-transform:uppercase;font-weight:600} .post h3{font-family:var(--display);font-size:17px;font-weight:700;line-height:1.3;color:var(--pine-deep)} body.t-chronik .post h3,body.t-news .post h3{font-family:var(--display);font-size:18.5px;font-weight:700;line-height:1.3;color:var(--pine-deep)} .post p{font-size:14px;color:var(--copy);flex:1} body.t-chronik .post p,body.t-news .post p{font-size:14.5px;color:var(--copy);flex:1} .bloggrid{margin-top:clamp(30px,4vw,44px);grid-template-columns:repeat(auto-fill,minmax(280px,1fr))} a.post .facts::after{content:"Mehr dazu →";margin-left:auto;font-size:12px;font-weight:600;color:var(--pine);white-space:nowrap} a.post .body:not(:has(.facts))::after{content:"Mehr dazu →";display:block;text-align:right;margin-top:auto;padding-top:22px;font-size:12px;font-weight:600;color:var(--pine)} .pagination{display:flex;justify-content:center;gap:12px;margin-top:clamp(38px,6vw,56px)} .ctaband{background:var(--fresh);text-align:center;padding:clamp(48px,7vw,80px) 0} /* Steht das Band am Ende einer Seite, stoesst Hellgruen direkt an das Dunkelgruen des Fussbereichs — kein weisser Streifen dazwischen. (Isas Vorgabe, 25.08.2026, gesehen auf „Schwerpunkt Tierschutz".) Der Streifen war die Grundpolsterung der Sektion (`--sec-pb`, bis 88px). Sie unter dem Band wegzunehmen ist richtig: Das Band bringt seine eigene Polsterung mit (bis 80px) und traegt eine Flaechenfarbe. Ein farbiger Abschluss endet an der naechsten Farbe, nicht auf halbem Weg. Gilt nur fuer `.ctaband` als letztes Element im Inhaltsstrom. Ein anderer Block ueber die volle Breite behaelt den Abstand — dort ist Weiss die Seitenfarbe und keine Luecke. Kann ein Browser `:has()` nicht, bleibt der Streifen stehen; nichts anderes aendert sich. */ section:has(.inhalt>.ctaband:last-child){padding-bottom:0} .ctaband h2{color:var(--pine-deep);margin-bottom:12px} .ctaband p{color:var(--copy);max-width:52ch;margin:0 auto 26px;font-size:clamp(16px,1.8vw,18px)} footer{background:var(--pine-deep);color:var(--fresh)} footer .brandline{display:flex;align-items:center;gap:12px;margin-bottom:14px;text-decoration:none;padding:0;opacity:1} /* Weisse Fassung, weil die dunkle Datei exakt den Footer-Ton #013220 traegt und dort unsichtbar waere. Gleiche Hoehe wie oben: beide Dateien teilen Zeichenflaeche und Schriftposition, 58px ergibt denselben Schriftgrad. Der Markenblock steht im Footer ueber die volle Breite, deshalb bleibt hier auch auf dem Handy die komplette Marke stehen. */ footer .foot-logo{display:block;height:58px;width:auto;flex:none} footer p{color:#cfe6c2;max-width:34ch;font-size:14.5px} footer a{color:#fff;font-size:14px;text-decoration:none;display:block;padding:5px 0;opacity:.9} footer a:hover{opacity:1;text-decoration:underline} footer a.brandline:hover{text-decoration:none} footer a.social{display:inline-flex;width:auto;margin-top:6px;opacity:.95} footer a.social svg{display:block;width:20px;height:20px} footer a.social:hover{opacity:1;text-decoration:none} .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease} .reveal.in{opacity:1;transform:none} .band .eyebrow,.ctaband .eyebrow,.konto .eyebrow,.memorial .eyebrow,.heart .eyebrow,.info .eyebrow, .band .meta,.ctaband .meta,.konto .meta,.memorial .meta,.heart .meta,.info .meta, .band .cat,.ctaband .cat,.konto .cat,.memorial .cat,.heart .cat,.info .cat, .band .role,.ctaband .role,.konto .role,.memorial .role,.heart .role,.info .role, .kontorow .k{color:var(--pine)} .to-top{position:fixed;right:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px);z-index:200; width:50px;height:50px;display:grid;place-items:center;border:0;cursor:pointer; border-radius:var(--r-pill);background:var(--pine-deep);color:var(--fresh); box-shadow:var(--sh-3); opacity:0;visibility:hidden;transform:translateY(12px); transition:opacity .25s,transform .25s,visibility .25s,background .2s} .to-top.show{opacity:1;visibility:visible;transform:none} .to-top:hover{background:var(--pine)} .to-top svg{width:22px;height:22px} .artHead{padding:clamp(40px,6vw,64px) 0 clamp(24px,4vw,36px)} .backlink{display:inline-flex;align-items:center;gap:8px;color:var(--soft);font-size:14px;text-decoration:none;margin-bottom:clamp(36px,4.5vw,52px)} .backlink:hover{color:var(--pine)} .artHead .eyebrow,.artHead h1,.artHead .dek{text-align:center} .artHead h1{font-family:var(--display);font-weight:800;color:var(--pine-deep);font-size:clamp(32px,5vw,54px);line-height:1.06;letter-spacing:-.02em;max-width:20ch;margin:0 auto 20px} body.t-single .artHead h1{font-family:var(--display);font-weight:800;color:var(--pine-deep);font-size:clamp(32px,5vw,54px);line-height:1.06;letter-spacing:-.02em;max-width:22ch;margin:0 auto 20px} .artHead .dek{font-size:clamp(17px,2vw,20px);color:var(--copy);max-width:62ch;margin:0 auto} .artImg{padding:0 0 clamp(30px,5vw,48px)} .artImg .imgbox{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/8.5;box-shadow:var(--sh-1)} body.t-single .artImg .imgbox{position:relative;cursor:pointer;border:0;padding:0;display:block;width:100%;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/8.5;box-shadow:var(--sh-1)} body.t-single .artImg .imgbox{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/8.5;box-shadow:var(--sh-1)} .artImg .imgbox img{background:#eef3e6;width:100%;height:100%;object-fit:cover} body.t-single .artImg .imgbox img{background:#eef3e6;transition:transform .4s} .artImg .imgbox.ph{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#eef5e6,#dcebd0);box-shadow:none} .artImg .imgbox.ph img{width:min(30%,190px);height:auto;object-fit:contain;opacity:.85} .artImg .cap{font-size:12.5px;color:var(--soft);margin-top:10px} .artBody{padding:0 0 clamp(48px,7vw,72px)} /* „Veröffentlicht am/im …" am Ende jeder Beitragsdetailseite. Größe und Farbe wie der Rechtshinweis am Ende des Testament-Ratgebers (Isa, 2026-08-08): beides sind Fußnoten am Textende und sollen gleich laut sein. ACHTUNG, hier steckte ein stiller Fehler: `.pubdate` (0,1,0) stand zwar auf 13px und `--soft`, der Absatz liegt aber in `.prose` — und `.prose p` (0,1,1) sowie auf den Beitragsseiten zusätzlich `body.t-single .prose p` (0,2,2) schlagen die Klasse über die Spezifität. Sichtbar war deshalb Fließtextgröße in `--copy`, nicht 13px in `--soft`. Die Werte in `.pubdate` waren reine Dekoration im Stylesheet. Deshalb die zweite, schwerere Variante: `body.t-single .prose p.pubdate` wiegt (0,3,2) und gewinnt. Wer `.pubdate` künftig anfasst, muss beide Zeilen anfassen. */ .pubdate{font-size:14px;color:var(--soft);border-top:1px solid var(--line);padding-top:16px;margin-top:8px} .prose p.pubdate,body.t-single .prose p.pubdate{font-size:14px;color:var(--soft)} .sidebar{display:flex;flex-direction:column;gap:22px;position:sticky;top:96px} /* Farbig gefuellte Kaesten tragen keinen Rahmen (Isa, 06.08.). Der Rahmen bleibt dort, wo eine weisse Flaeche gegen einen weissen Hintergrund abgegrenzt werden muss: .org, .card, .mini, .pw-schutz. Fuellung leicht angehoben von #f6f9f1 auf #eef5e6, weil der Kasten ohne Rahmen sonst fast verschwindet. */ .infobox{background:#eef5e6;border-radius:var(--r-md);padding:26px} /* Die frueher hier stehende Sonderregel fuer `.infobox` ist am 24.08.2026 in die Sammelregel „Kaesten halten ihren Innenabstand selbst" aufgegangen (weiter oben im Abschnitt Inhaltsfluss). Eine Regel, zwei Stellen — das war genau die Doppelpflege, die dieses Stylesheet vermeiden soll. */ .infobox .eyebrow{margin-bottom:10px} .infobox h3{font-family:var(--display);font-size:18px;font-weight:700;color:var(--pine-deep);margin-bottom:10px} .infobox p{font-size:14px;color:var(--copy);margin-bottom:14px} /* Ohne eigenen Hintergrund (Isa, 18.08.2026). Der hellgruene Ton trennte den Bereich staerker vom Artikel ab, als er es verdient — es sind Weiterlese-Vorschlaege, kein eigenes Kapitel. Die Trennung leistet der Abstand. */ .related{padding:clamp(48px,7vw,72px) 0} .related h2{font-size:clamp(22px,2.8vw,28px);margin-bottom:28px} .post .thumb.ph{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#eef5e6,#dcebd0)} /* Motivgröße auf den Maßstab von `Platzhalter.webp` gebracht (2026-08-06): vorher min(42%,120px) bei opacity .85. In der Chronik stehen 66 Platzhalter gegen nur 6 echte Fotos — in der Größe übernahm der Platzhalter die Seite. 52 px / .55 ist derselbe Wert wie beim generischen `.thumb.ph img`, die Platzhalter der Website sind damit durchgehend gleich laut. Die Regel bleibt trotz identischer Werte als eigener Block stehen: `.post .thumb img` setzt `width:100%;object-fit:cover` bei gleicher Spezifität, ohne diesen Override entschiede allein die Reihenfolge im Stylesheet. */ .post .thumb.ph img{width:52px;height:52px;object-fit:contain;opacity:.55} body.t-single .post .thumb.ph img{width:46px;height:46px;object-fit:contain;opacity:.55} blockquote.pull{margin:32px 0;padding:6px 0 6px 26px;border-left:3px solid var(--fresh);} body.t-text blockquote.pull{margin:32px 0;padding:6px 0 6px 26px;border-left:3px solid var(--fresh)} blockquote.pull p{font-family:var(--display);font-size:clamp(16px,1.6vw,18px);font-weight:600;line-height:1.4;color:var(--pine-deep);letter-spacing:-.01em;margin-bottom:10px} blockquote.pull cite{font-size:13.5px;color:var(--soft);font-style:normal} .artImg .imgbox:hover img{transform:scale(1.02)} /* ========================================================================== Einzelbild im Fliesstext (seit 2026-08-18) ========================================================================== Das Gegenstueck zum Bildband: ein Bild dort, wo der Text es braucht. Beide Bausteine bleiben nebeneinander bestehen — das Band fuer Strecken am Artikelende, das Einzelbild fuer Bilder, die etwas erklaeren. Die frueher hier stehende Dreierreihe (Galerie als Raster im Text) ist am 18.08.2026 entfallen. Sie verlaengerte die Seite und zerriss den Artikel; das Band leistet dasselbe, ohne beides. Entscheidungsgrundlage: `Galerie-Varianten.html`. -------------------------------------------------------------------------- */ /* Bezugspunkt fuer den Nachweis. Gilt fuer JEDE Bild-Figur, nicht nur die in der Textspalte: Fehlt er, liegt der Nachweis absolut zum naechsten Vorfahren mit Position — im Zweifel dem Seitenrand. (Lehre vom 06.08.2026.) */ figure.wp-block-image{position:relative} /* --- Bild im Text (`.sgs-textbild`, 20.08.2026) --------------------------- Anlass: Juergen hat auf der Projektseite „Naturschutz-Hotspot: Pumpstation" Bilder in den Fliesstext gesetzt. Sie kamen in der Groesse der Datei heraus, ohne Rundung und ohne Nachweis. Die Klasse setzt `inc/textbild.php` an jede Bild-Figur; dort steht auch die Begruendung. ES WIRD UEBER DIE KLASSE SELEKTIERT, NIE UEBER DEN ORT IM BAUM. Die erste Fassung hing an `.prose figure.wp-block-image` und ist noch am selben Tag gescheitert: Die Bilder sassen eine Ebene tiefer, die Regel passte nicht, und der Nachweis fiel auf die schwaechste `.credit`-Regel zurueck — `position:absolute` ohne Bezugspunkt. Ergebnis: alle Nachweise oben rechts neben dem Aufmacherbild. Dieselbe Familie wie die Libelle vom 06.08. und der graue Bandnachweis vom 18.08. `.credit` ist achtfach belegt; eine Regel, die nicht sicher trifft, ist hier keine Regel. Ausrichtung: linksbuendig an der Textkante, nicht zentriert (Isa, 20.08.2026). Ein zentriertes Bild in einer linksbuendigen Textspalte liest sich als eingeschobener Kasten; buendig gesetzt gehoert es zum Text. Zwei Masse je Groesse, weil ein hochkantes Bild bei gleicher Breite doppelt so hoch wird wie ein querformatiges. Ohne Ausrichtungsklasse — bei SVG etwa, wo keine Masse in der Mediathek stehen — gilt der vorsichtigere Wert fuer Hoch. Lieber ein Bild zu klein als eine gesprengte Seite. */ figure.sgs-textbild{ --tb-quer:100%; --tb-hoch:380px; display:grid; max-width:var(--tb-hoch); margin:clamp(24px,2.8vw,32px) 0} figure.sgs-textbild.sgs-quer{max-width:var(--tb-quer)} figure.sgs-textbild.is-style-sgs-klein {--tb-quer:250px;--tb-hoch:190px} figure.sgs-textbild.is-style-sgs-mittel{--tb-quer:390px;--tb-hoch:280px} figure.sgs-textbild.is-style-sgs-gross {--tb-quer:100%;--tb-hoch:380px} /* `.tb-rahmen` umschliesst NUR das Bild und ist der Bezugspunkt fuer den Nachweis. Gesetzt wird er in PHP (`inc/textbild.php`), und zwar aus einem Grund, der zwei gescheiterte Anlaeufe gekostet hat: Vorher war die `figure` der Bezugspunkt, und deren Unterkante liegt UNTER der Bildunterschrift. Der Nachweis konnte also gar nicht im Bild sitzen, sobald eine Unterschrift da war — genau das war am 20.08.2026 auf der Pumpstation-Seite zu sehen. */ /* `position:relative` als Nachfahren-Regel, die Rasterzelle nur fuers direkte Kind: Schaltet die Redaktion an einem Bild „Beim Klicken vergroessern" ein, legt WordPress noch eine Huelle um das Bild, und der Rahmen sitzt eine Ebene tiefer. Der Bezugspunkt muss dann trotzdem stehen. */ figure.sgs-textbild .tb-rahmen{position:relative;display:block} figure.sgs-textbild > .tb-rahmen{grid-area:1/1} figure.sgs-textbild > img, figure.sgs-textbild > a{grid-area:1/1;display:block} figure.sgs-textbild img{ /* `!important` gegen die Breite, die WordPress bei „is-resized" als Inline-Stil ans Bild schreibt. Die Groesse kommt aus den drei Stilen, nicht aus dem Ziehen am Anfasser im Editor. */ width:100%!important;height:auto!important; display:block;border-radius:var(--r-md)} figure.sgs-textbild.is-resized{width:auto!important} /* Masse wie unter dem Aufmacherbild (`.artImg .cap`), damit eine Bildunterschrift auf der Seite ueberall gleich aussieht. */ figure.sgs-textbild figcaption{ grid-area:2/1; font-size:12.5px;color:var(--soft);text-align:left; margin:10px 0 0;background:none;padding:0} /* Der Nachweis im Bild. Eigener Klassenname, kommt im ganzen Stylesheet genau einmal vor — im Gegensatz zu `.credit`, das achtfach belegt ist und deshalb zweimal an der falschen Stelle gelandet ist (20.08.2026). **Stand seit 0.17.4 (Isa, 20.08.2026): senkrecht am rechten Bildrand wie auf den Kacheln, aber in der Groesse des Nachweises am Aufmacherbild.** Die Zwischenfassung stand waagerecht unten links und in 12 px. Zwei Gruende dagegen, beide von Isa an der fertigen Seite gesehen: 1. Sie war groesser als der Nachweis am Aufmacherbild darueber. Ein kleineres Bild mit groesserer Beschriftung dreht die Rangfolge um. 2. Unten links steht sie direkt ueber der Bildunterschrift und liest sich wie deren erste Zeile. Senkrecht am rechten Rand kann sie damit nicht verwechselt werden — genau deshalb steht sie auf den Kacheln so. Werte: Ort wie `.thumb .credit` (senkrecht, rechts unten), Schriftgroesse, Deckkraft und Schatten wie `.credit` am Aufmacherbild. Nichts Eigenes. */ figure.sgs-textbild .tb-nachweis{ position:absolute;right:5px;bottom:10px;z-index:2; writing-mode:vertical-rl; font-family:var(--sans);font-size:10px;font-weight:500;line-height:1.2;letter-spacing:.01em; color:#fff;opacity:.62; text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 9px rgba(0,0,0,.55); transition:opacity .2s;pointer-events:none} figure.sgs-textbild:hover .tb-nachweis{opacity:1} /* Rueckfall, falls der Umbau in PHP einmal nicht greift — etwa bei einer Vorlage, die den Inhalt an `sgs_textbild_nachweis_ins_bild()` vorbeischickt. Dann steht der Nachweis als schlichte Zeile unter der Bildunterschrift. Nicht schoen, aber lesbar und vorhanden: Ein fehlender Nachweis waere ein Rechtsproblem, ein schlicht gesetzter ist nur eine Schoenheitsfrage. */ figure.sgs-textbild p.credit{ position:static;justify-self:start;margin:4px 0 0; writing-mode:horizontal-tb; font-family:var(--sans);font-size:12px;font-weight:400;line-height:1.3; color:var(--soft);opacity:1;text-shadow:none} /* Ausnahme: Im Zweispalter `.duo` fuellt das Bild seine Spalte. */ .duo figure.sgs-textbild{display:block;max-width:none;margin:0} .duo figure.sgs-textbild img{border-radius:22px;box-shadow:var(--sh-3)} /* ========================================================================== Bildband (seit 2026-08-18) ========================================================================== Waagerechtes Band am Artikelende, zum Wischen. Ersetzt die Loesung mit „5 Fotos"-Badge auf dem Herobild und die Galerie als Dreierreihe. Warum ein Band: Es verlaengert die Seite nicht. Bei kurzem Text und vielen Bildern zerreisst eine Galerie im Fliesstext den Artikel; das Band haengt sich hinten an und stoert das Lesen nicht. Gestaltung: kein Kasten, kein Rahmen, direkt auf dem weissen Seitengrund. Breite wie das Beitragsbild, nicht wie das Fenster — voll ueber die Seite laufen nur die farbigen Baender. Die Pfeile sind nur Spitzen ohne Strich. (Isa, 18.08.2026. Entscheidungsgrundlage: `Galerie-Varianten.html`.) Das Band steht INNERHALB der Artikelsektion und bringt deshalb nur einen eigenen Abstand nach oben mit — den nach unten liefert die Sektion. Vorher stapelten sich drei Abstaende auf bis zu 204 px: `.artBody` unten, die `section`-Grundregel oben und die eigene Marge. -------------------------------------------------------------------------- */ .bildband{--bb-luecke:14px;--bb-blick:88px;margin:clamp(34px,4vw,46px) 0 0} .bildband .bb-innen{position:relative} .bildband h2{font-size:clamp(19px,2vw,23px);margin-bottom:14px} .bildband .bb-spur, .bildband .wp-block-gallery.has-nested-images{ display:flex;flex-wrap:nowrap;gap:var(--bb-luecke); overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x mandatory;scroll-behavior:smooth; padding-block:2px 4px;margin:0; scrollbar-width:none} .bildband .bb-spur::-webkit-scrollbar, .bildband .wp-block-gallery.has-nested-images::-webkit-scrollbar{display:none} /* Die Bildbreite wird gerechnet, nicht gesetzt: drei ganze Bilder plus ein festgelegter Ausblick auf das vierte. Vorher stand hier eine feste Breite, und was uebrig blieb, war Zufall — bei 1140 px genau 36 px, also 11 % eines Bildes. Das sah aus wie ein Darstellungsfehler und nicht wie eine Einladung weiterzuschauen. Jetzt sind es bei jeder Fensterbreite dieselben 88 px. (Isas Einwand 18.08.2026.) */ /* ACHTUNG beim Selektor: `.wp-block-gallery` ist SELBST ein `
` und enthaelt weitere `
`. Ein schlichtes `.bildband figure` trifft also beide Ebenen — die aeussere bekam dadurch Flex-Breite, Radius und den hellgruenen Grund, und die Bilder darin schrumpften auf einen Bruchteil. Genau das war am 18.08.2026 im Livebetrieb zu sehen. Deshalb ausdruecklich nur die Kinder der Spur. */ .bildband .bb-spur > figure, .bildband .wp-block-gallery.has-nested-images > figure.wp-block-image{ position:relative;margin:0; flex:0 0 calc((100% - 2 * var(--bb-luecke) - var(--bb-blick)) / 3); width:auto;max-width:none; border-radius:var(--r-md);overflow:hidden;scroll-snap-align:start; background:var(--fresh);cursor:zoom-in;border:0;padding:0;display:block} /* Bewusst OHNE `>` vor dem Bild: WordPress legt je nach Einstellung noch eine Huelle um das Bild. Mit Kind-Zeichen griffe die Regel dann nicht mehr. */ .bildband .bb-spur > figure img, .bildband .wp-block-gallery > figure.wp-block-image img{ display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover; transition:transform .5s; /* Siehe „Weicher Bildrand" weiter unten. */ transform:translateZ(0);backface-visibility:hidden} .bildband .bb-spur > figure:hover img, .bildband .wp-block-gallery > figure.wp-block-image:hover img{transform:translateZ(0) scale(1.04)} /* Eine solche Huelle darf die Figur nicht auseinanderdruecken. */ .bildband .wp-block-gallery figure.wp-block-image > div{display:block;width:100%;margin:0} .bildband .bb-spur > figure:focus-visible, .bildband .wp-block-gallery > figure.wp-block-image:focus-visible{outline:3px solid var(--pine);outline-offset:3px} /* Die aeussere Galerie-Figur ist nur die Spur. Kein Rahmen, kein Grund, keine eigene Breite — sonst liegt hinter den Bildern eine gruene Flaeche. */ .bildband .wp-block-gallery{background:none;border-radius:0;border:0;padding:0;max-width:none} /* Die Bildunterschrift der Galerie hat im Band keinen Platz. Sie steht in der Vergroesserung, dort ist Raum dafuer. */ .bildband figcaption{display:none} /* Bildnachweis wie auf den Kacheln: senkrecht am rechten Bildrand, 8px. Drei Klassen, weil `body.t-single .prose p` mit (0,2,2) schwerer wiegt als ein schlichtes `.bildband .credit` (0,2,0) — der Nachweis stand deshalb in Fliesstextgroesse quer ueber dem Bild. Dieselbe Fehlerklasse wie bei den Kacheln am 18.08.2026: Ein Baustein, der sich gegen fremde Regeln behaupten muss, setzt ALLE seine Eigenschaften selbst und mit genug Gewicht. */ .bildband .bb-spur .credit, .bildband .wp-block-gallery .credit{ position:absolute;bottom:8px;right:2px;z-index:2;margin:0;writing-mode:vertical-rl; font-family:var(--sans);font-size:8px;font-weight:500;line-height:1;letter-spacing:.02em; color:#fff;opacity:.55;text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 8px rgba(0,0,0,.5); pointer-events:none;max-width:none;text-align:left} /* Pfeilspitzen. Kein Kreis, kein Kasten — nur die Spitze, weiss mit Schatten, damit sie auf hellen wie dunklen Motiven liest. Sie liegen im Bild, nicht daneben: Platz neben der Spur gibt es nicht, seit sie buendig steht. */ .bildband .bb-pfeil{ position:absolute;top:50%;transform:translateY(-50%);z-index:3; border:0;background:none;padding:12px 8px;cursor:pointer; color:#fff;opacity:.72;transition:opacity .2s; filter:drop-shadow(0 1px 3px rgba(0,0,0,.6)) drop-shadow(0 0 8px rgba(0,0,0,.4))} .bildband .bb-pfeil:hover{opacity:1} .bildband .bb-pfeil:focus-visible{outline:3px solid var(--pine);outline-offset:2px;border-radius:var(--r-xs)} .bildband .bb-pfeil svg{width:26px;height:26px;display:block} .bildband .bb-pfeil[hidden]{display:none} .bildband .bb-vor{right:4px} .bildband .bb-zurueck{left:4px} /* Schmalere Fenster zeigen weniger ganze Bilder, der Ausblick bleibt. Zwei statt drei ab Tablet, eins plus Ausblick auf dem Handy — ein Bild unter 230 px erkennt man nicht mehr. */ @media (max-width:860px){ .bildband{--bb-blick:72px} .bildband .bb-spur > figure, .bildband .wp-block-gallery.has-nested-images > figure.wp-block-image{ flex-basis:calc((100% - var(--bb-luecke) - var(--bb-blick)) / 2)} } @media (max-width:560px){ .bildband{--bb-blick:56px} .bildband .bb-spur > figure, .bildband .wp-block-gallery.has-nested-images > figure.wp-block-image{ flex-basis:calc(100% - var(--bb-blick))} } @media (prefers-reduced-motion:reduce){ .bildband .bb-spur, .bildband .wp-block-gallery.has-nested-images{scroll-behavior:auto} .bildband figure img{transition:none} /* translateZ bleibt: Es ist keine Bewegung, sondern haelt die Rasterung stabil. Ohne wuerde das Bild beim Darueberfahren neu gezeichnet. */ .bildband figure:hover img{transform:translateZ(0)} } /* ========================================================================== Weicher Bildrand und ruckelnde Vergroesserung (behoben 2026-08-18) ========================================================================== Symptom (Isa): Bilder im Band haben einen weichen unteren Rand. Faehrt man mit der Maus darueber, wird das Bild schlagartig scharf. In der Vergroesserung war es immer scharf. Dazu ruckelte die Hover-Bewegung, auch auf den Kacheln. Ursache: `transition:transform` kuendigt dem Browser eine Bewegung an. Er zeichnet das Bild deshalb auf eine eigene Ebene — aber erst beim ersten Hover in voller Aufloesung. Vorher liegt eine grob gerasterte Fassung darin, und deren Unterkante faellt bei gebrochenen Pixelhoehen weich aus. Die Bildhoehe ist hier zwangslaeufig gebrochen: Die Breite entsteht aus `calc((100% - 2*14px - 88px)/3)`, die Hoehe daraus ueber 3:2. Behebung: `translateZ(0)` legt die Ebene von Anfang an an, statt erst beim Hover. `backface-visibility:hidden` haelt die Rasterung stabil. Beides kostet nichts und ist seit Jahren das uebliche Mittel dagegen. **Wichtig beim Aendern:** Der Grundzustand traegt jetzt selbst ein `transform`. Ein Hover-Zustand darf ihn deshalb nicht schlicht ueberschreiben, sondern muss `translateZ(0)` mitfuehren — sonst springt das Bild beim Darueberfahren um Bruchteile. -------------------------------------------------------------------------- */ .post .thumb img,.card .thumb img,.featured .img img,.slide .imgbox img, .artImg .imgbox img{ transform:translateZ(0);backface-visibility:hidden} .artImg .imgbox:hover img{transform:translateZ(0) scale(1.02)} .post:hover .thumb img,.card:hover .thumb img{transform:translateZ(0) scale(1.05)} .featured:hover .img img{transform:translateZ(0) scale(1.04)} .gallery-badge{position:absolute;right:18px;bottom:18px;display:inline-flex;align-items:center;gap:7px;background:rgba(0,0,0,.82);backdrop-filter:blur(4px);color:var(--fresh);font-size:13px;font-weight:600;padding:8px 15px;border-radius:var(--r-pill)} .gallery-badge svg{width:16px;height:16px} .lightbox{position:fixed;inset:0;z-index:300;background:rgba(32,40,30,.94);display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,48px)} .lightbox[hidden]{display:none} /* Der Abstand gilt zwischen Bild und Textblock. Innerhalb des Textblocks ruecken Unterschrift, Nachweis und Zaehler eng zusammen — sie gehoeren zusammen und sollen nicht wie drei getrennte Angaben wirken. (Isa, 18.08.2026.) */ .lightbox .lb-figure{max-width:min(920px,92vw);max-height:88vh;display:flex;flex-direction:column;align-items:center;gap:14px} .lightbox .lb-cap + .lb-credit{margin-top:-8px} .lightbox .lb-credit + .lb-counter{margin-top:-10px} .lightbox .lb-img{max-width:100%;max-height:74vh;width:auto;height:auto;object-fit:contain;border-radius:var(--r-sm);box-shadow:var(--sh-3)} .lightbox .lb-cap{color:#e7ecdd;font-size:14px;text-align:center;max-width:70ch} /* Der Nachweis steht in der Vergroesserung normal lesbar, nicht als Mikro-Overlay wie im Band. Hier ist Platz dafuer, und § 13 UrhG verlangt die Nennung bei jeder Nutzung — die Vergroesserung ist eine. (Isa, 18.08.2026.) */ .lightbox .lb-credit{color:#a9c79a;font-size:12.5px;margin:0;text-align:center} .lightbox .lb-cap:empty,.lightbox .lb-credit:empty{display:none} .lightbox .lb-counter{color:#a9c79a;font-size:12.5px;letter-spacing:.06em} .lightbox button{position:absolute;border:0;cursor:pointer;background:rgba(255,255,255,.1);color:#fff;border-radius:var(--r-pill);display:grid;place-items:center;transition:background .2s} .lightbox button:hover{background:rgba(255,255,255,.22)} .lightbox .lb-close{top:clamp(14px,3vw,28px);right:clamp(14px,3vw,28px);width:44px;height:44px} .lightbox .lb-close svg{width:20px;height:20px} .lightbox .lb-prev,.lightbox .lb-next{top:50%;transform:translateY(-50%);width:52px;height:52px} .lightbox .lb-prev{left:clamp(6px,2vw,24px)} .lightbox .lb-next{right:clamp(6px,2vw,24px)} .lightbox .lb-prev svg,.lightbox .lb-next svg{width:24px;height:24px} .credit{position:absolute;right:11px;bottom:8px;z-index:2;margin:0;font-family:var(--sans);font-size:10px;font-weight:500;line-height:1.2;letter-spacing:.01em;color:#fff;opacity:.62;text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 9px rgba(0,0,0,.55);transition:opacity .2s} body.t-chronik .credit,body.t-news .credit{position:absolute;right:12px;bottom:10px;z-index:3;margin:0;font-family:var(--sans); font-size:10px;font-weight:500;line-height:1.2;letter-spacing:.01em;color:#fff;opacity:.62; text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 9px rgba(0,0,0,.55);transition:opacity .2s;pointer-events:none} body.t-front .credit{position:absolute;right:12px;bottom:10px;z-index:3;margin:0;font-family:var(--sans); font-size:10px;font-weight:500;line-height:1.2;letter-spacing:.01em;color:#fff;opacity:.62; text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 9px rgba(0,0,0,.55);transition:opacity .2s;pointer-events:none} .imgbox:hover .credit,.imgbox:focus-within .credit{opacity:1} .prose h2{margin:36px 0 14px} body.t-single .prose h2{font-family:var(--display);font-size:clamp(22px,2.6vw,28px);font-weight:700;line-height:1.2;letter-spacing:-.01em;color:var(--pine-deep);margin:40px 0 14px} .todo{background:#fff5d6;color:#7a5a00;border-radius:var(--r-xs);padding:1px 7px;font-weight:600;font-size:.94em} .infobox .facts{font-size:13px;color:var(--copy);padding-top:20px;margin-bottom:0} body.t-single .infobox .facts{font-size:13px;color:var(--copy);padding-top:20px;margin-bottom:14px} .infobox .facts div{margin-bottom:6px} body.t-single .infobox .facts div{margin-bottom:4px} .infobox .facts b{color:var(--pine)} .doc p,.doc address{max-width:66ch} address{font-style:normal;color:var(--copy);line-height:1.7} strong{color:var(--pine-deep)} .pagehead .subnav{justify-content:center} .prose p:last-child{margin-bottom:0} .prose b{color:var(--pine-deep)} figure.photo{position:relative;border-radius:22px;overflow:hidden;box-shadow:var(--sh-3)} figure.photo img{width:100%;height:100%;object-fit:cover;display:block} .cap{font-size:10px;color:var(--soft);margin-top:6px} .timeline{max-width:720px;margin-top:36px;position:relative;padding-left:34px} .timeline::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:var(--line);border-radius:var(--r-pill)} .tl{position:relative;padding-bottom:30px} .tl:last-child{padding-bottom:0} .tl::before{content:"";position:absolute;left:-31px;top:7px;width:12px;height:12px;border-radius:var(--r-pill);background:var(--moss);border:3px solid #fff;box-shadow:0 0 0 2px var(--moss)} .tl .y{font-family:var(--display);font-weight:800;font-size:17px;color:var(--pine-deep)} .tl p{color:var(--copy);font-size:15.5px;margin-top:3px;max-width:58ch} /* Gedenk-Kasten. Seit 2026-08-08 gibt es nur noch EINE Variante (Isa): einfacher Block, Überschrift bzw. Zitat oben, Text darunter. Auf beiden Seiten identisch. Vorgeschichte, damit die Zweispalter nicht zurückkehrt: Team hatte ein rundes Kürzel-Bild „HS" links neben dem Text, dafür stand eine Grid-Definition mit `grid-template-columns:auto 1fr`. Sie hing an `body.t-text` — den tragen aber Team UND Geschichte, weshalb dort Zitat und Absatz nebeneinander in halbe Breite rutschten. Das Kürzel-Bild ist mit derselben Entscheidung entfallen, damit auch die Grid-Regel und die zugehörigen Umbruch-Regeln bei 600px. `.memorial .avatar` steht bewusst nicht mehr im Stylesheet. */ /* Banner-Regel: Überschrift zentriert, Text zentriert. Der Kasten bringt die Zentrierung selbst mit und hängt nicht am `.center` der Sektion — sonst wäre er auf Team (kein `.center`) anders als auf Geschichte. */ .memorial{background:var(--fresh);border-radius:var(--r-lg);padding:clamp(34px,5.5vw,60px);text-align:center} .memorial blockquote,.memorial h3,.memorial p{margin-left:auto;margin-right:auto} .memorial blockquote{font-family:var(--display);font-size:clamp(20px,2.8vw,30px);font-weight:700;line-height:1.3;letter-spacing:-.01em;color:var(--pine-deep);max-width:36ch} .memorial p{color:var(--copy);margin-top:18px;max-width:62ch;font-size:clamp(15px,1.7vw,17px)} figure.photo .credit{position:absolute;bottom:8px;right:2px;z-index:2;margin:0;writing-mode:vertical-rl; font-family:var(--sans);font-size:8px;font-weight:500;line-height:1;letter-spacing:.02em; color:#fff;opacity:.55;text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 8px rgba(0,0,0,.5);pointer-events:none} a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--pine);outline-offset:3px;border-radius:var(--r-xs)} form{display:grid;gap:18px} .row{display:grid;grid-template-columns:1fr 1fr;gap:18px} label{display:block;font-size:14px;font-weight:600;color:var(--pine-deep);margin-bottom:7px} input,textarea{width:100%;font-family:var(--sans);font-size:15.5px;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;transition:border-color .2s} input:focus,textarea:focus{border-color:var(--moss);outline:none} textarea{min-height:150px;resize:vertical} .consent{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;color:var(--copy)} .consent input{width:18px;height:18px;flex:none;margin-top:2px} .consent a{color:var(--pine);font-weight:600} .formnote{font-size:12.5px;color:var(--soft)} .info{background:var(--fresh);border-radius:var(--r-lg);padding:clamp(26px,4vw,38px)} /* Wie der Kontokasten: keine Trennlinien, gleiche Luft unter der Ueberschrift (Isa, 13.08.2026). */ .info h2{font-size:24px;margin-bottom:clamp(30px,4vw,38px)} .info .contactline{display:flex;gap:14px;align-items:flex-start;padding:10px 0} .info .contactline:first-of-type{padding-top:0} /* Das Facebook-Zeichen ist eine Flaeche, die uebrigen Symbole sind Striche. */ .info .ic svg.fb{fill:var(--pine-deep);stroke:none} .info .ic{flex:none;width:24px;height:40px;display:flex;align-items:center;justify-content:flex-start} .info .ic svg{width:20px;height:20px;stroke:var(--pine-deep);fill:none;stroke-width:1.9} .info .ic img{width:20px;height:20px;object-fit:contain;display:block} .info .k{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--pine);font-weight:700;margin-bottom:3px} .info .v{color:var(--pine-deep);font-weight:600;font-size:15.5px;line-height:1.45} .info .v a{color:var(--pine-deep);text-decoration:none;border-bottom:2px solid rgba(0,0,0,.2)} .org{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(24px,3.5vw,32px);display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s} .org:hover{transform:translateY(-4px);box-shadow:var(--sh-2)} .org h3{font-family:var(--display);font-size:20px;font-weight:700;color:var(--pine-deep);line-height:1.3;margin-bottom:10px} .org p{font-size:14.5px;color:var(--copy);flex:1} .artHead h1,.artHead .dek{text-align:center} .infobox .why{margin-top:14px;padding-top:12px} .infobox .whylabel{display:block;font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--pine);margin-bottom:6px} .infobox .why p{font-size:13.5px;color:var(--copy);margin-bottom:0} /* Die Stichpunkte stehen seit 2026-08-10 im .why-Block der einen Infobox und nicht mehr in einem zweiten Kasten. Der Abstand nach oben kommt dort schon von .why, deshalb faellt das eigene padding-top weg. */ .infobox .enables{list-style:none;font-size:13.5px;color:var(--copy);padding-top:20px} .infobox .why .enables{padding-top:6px} .infobox .enables li{position:relative;padding-left:18px;margin-bottom:7px} .infobox .enables li:last-child{margin-bottom:0} .infobox .enables li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:var(--r-pill);background:var(--moss)} .featured .meta-row b{color:var(--pine)} .yeargroup{display:grid;grid-template-columns:130px 1fr;gap:clamp(18px,3vw,40px);margin-top:clamp(34px,5vw,56px)} /* Sprungmarke #jahr-2025 (ab 0.24.3): Der Kopf der Seite klebt oben und ist rund 80 px hoch. Ohne Abstand landete die Jahreszahl darunter. */ .yeargroup[id]{scroll-margin-top:110px} .yearmark .y{position:sticky;top:96px;font-family:var(--display);font-size:clamp(38px,4.6vw,58px);font-weight:800;color:var(--pine-deep);line-height:1;letter-spacing:-.02em} .post .facts{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px;margin-top:auto;font-size:13px;color:var(--copy);padding-top:22px} .post .facts b{color:var(--pine)} .post.static{cursor:default} .post.static:hover{transform:none;box-shadow:none} .thumb.ph{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#eef5e6,#dcebd0)} .thumb.ph img{width:52px;height:52px;object-fit:contain;opacity:.55} .hero:hover .credit,.featured:hover .credit{opacity:1} /* Aufmacher auf Projekte und Aktuelles: Nachweis senkrecht am rechten Bildrand wie auf den Kacheln, aber in der bisherigen Groesse (10px, opacity .62). Isa, 28.09.2026, ab 0.24.4. Alle Eigenschaften stehen hier vollstaendig, und die Regel wiegt mit (0,3,1) mehr als `body.t-chronik .credit`/`body.t-news .credit` (0,2,1) und `.featured p` (0,1,1). Grund: siehe die Lehre bei `.post .thumb .credit` weiter oben — teilweise Ueberschreibung laesst Luecken. */ .featured .img p.credit{position:absolute;top:auto;left:auto;bottom:10px;right:3px;z-index:3;margin:0;writing-mode:vertical-rl;font-family:var(--sans);font-size:10px;font-weight:500;line-height:1.2;letter-spacing:.01em;color:#fff;opacity:.62;text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 9px rgba(0,0,0,.55);transition:opacity .2s;pointer-events:none} .featured:hover .img p.credit,.featured:focus-visible .img p.credit{opacity:1} h3{font-family:var(--display);font-size:19px;font-weight:700;color:var(--pine-deep);line-height:1.3} .konto{background:var(--fresh);border-radius:var(--r-lg);padding:clamp(28px,4vw,40px);position:sticky;top:96px} .copybtn{position:absolute;right:0;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.75);color:var(--pine-deep);border:0;border-radius:var(--r-xs);padding:0;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer; opacity:0;visibility:hidden;transition:opacity .18s,visibility .18s,background .18s} .copybtn svg{width:14px;height:14px} .kontorow:hover .copybtn,.kontorow:focus-within .copybtn{opacity:1;visibility:visible} .copybtn:hover{background:#fff} /* Kuerzere Blende und ein sichtbarer Druckpunkt (Isa, 13.08.2026). Vorher blieb der Knopf nach dem Klick stehen, weil der Fokus auf ihm lag und `:focus-within` ihn sichtbar hielt — dadurch waren mehrere gleichzeitig zu sehen. Das Skript nimmt den Fokus nach dem Kopieren jetzt wieder weg. */ .copybtn{transition:opacity .12s,visibility .12s,background .18s,transform .1s} .copybtn:active{transform:translateY(-50%) scale(.9)} .copybtn.kopiert{background:#fff;color:var(--moss)} /* Kontokasten neu gefasst (Isa, 13.08.2026): Die duennen Trennlinien wirkten altmodisch und zerhackten den Kasten. Der Abstand allein trennt gut genug. Der Bankname stand vorher als eigene Zwischenzeile in anderer Schrift ueber der Aufstellung; das las sich wie eine Ueberschrift, ohne eine zu sein. Er ist jetzt eine normale Zeile „Bank“ innerhalb der Aufstellung. Dazu mehr Luft unter der Ueberschrift. */ .konto h2{font-size:26px;margin-bottom:clamp(30px,4vw,38px)} .kontorow{display:flex;justify-content:space-between;gap:14px;padding:10px 0;position:relative} .kontorow:first-of-type{padding-top:0} .kontorow .k{color:var(--pine);font-size:13px;letter-spacing:.04em;text-transform:uppercase;padding-top:2px} .kontorow .v{color:var(--pine-deep);font-weight:600;text-align:right;padding-right:34px} .kontorow .v .mono{font-family:var(--sans);font-variant-numeric:tabular-nums;letter-spacing:.02em} .konto .note{margin-top:18px;font-size:13.5px;color:var(--copy)} /* „Wie Sie uns unterstützen können" auf der Spenden-Seite. Folgt den Textmodul-Regeln von `.prose` (Über uns, Unsere Geschichte), Stand 2026-08-08 (Isa): alles Fließtext in `var(--text-size)`, Zwischenüberschriften wie `.prose h3`. Vorher liefen in dieser einen Spalte drei Größen übereinander — Einstiegsabsatz auf Lead-Größe (19px), die `.way`-Absätze auf festen 15,5px, der Hinweis auf 13,5px. Der Einstiegsabsatz trug dafür `class="lead"`, war aber nie ein Dek: `.lead` steht unter der H1 einer Seite, nicht als Einstieg in ein Modul. */ .way-intro{font-size:var(--text-size);color:var(--copy);max-width:52ch;margin-top:14px} .way{margin-top:clamp(26px,3.2vw,34px)} .way h3{font-family:var(--display);font-size:19px;font-weight:700;color:var(--pine-deep);margin-bottom:8px} .way p{font-size:var(--text-size);color:var(--copy);max-width:52ch} .way .textlink{margin-top:10px} .sidenote a{font-style:normal} .band{background:var(--fresh)} .band h2{margin-bottom:14px} .zustiftung{background:var(--bg)} .mini{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(24px,3.5vw,32px)} .mini h3{margin-bottom:8px} .mini p{font-size:14.5px} /* „Wohin Ihr Beitrag fließt" — durchgehend zentriert (Isa, 2026-08-08). Überschrift, Fließtext und die vier Punkte stehen mittig, die Punkte einspaltig untereinander statt vorher zweispaltig. */ .trust{text-align:center} .trust .lead{margin-left:auto;margin-right:auto} .trust ul{list-style:none;margin-top:22px;display:grid;grid-template-columns:1fr;gap:14px;justify-items:center} /* `width:fit-content` ist der Kern: Ohne die Angabe wäre jedes `li` so breit wie die Spalte, der Punkt säße über `left:0` ganz außen am Rand und nicht am Text. So ist das `li` nur so breit wie sein Inhalt, wird als Ganzes zentriert und der Punkt bleibt direkt davor. `padding-left` hält ihm den Platz frei. */ .trust li{position:relative;width:fit-content;padding-left:30px;color:var(--copy);font-size:15.5px} .trust li::before{content:"";position:absolute;left:0;top:7px;width:16px;height:16px;border-radius:var(--r-pill);background:var(--moss)} .trust li strong{color:var(--pine-deep)} .closing{text-align:center} .closing .wrap{max-width:720px} .closing p{font-size:clamp(17px,2vw,21px);margin:0 auto 26px} .heroWrap{padding:clamp(12px,2vw,20px) clamp(12px,2vw,20px) 0} .hero{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:min(88vh,820px);display:flex;align-items:flex-end;background:var(--pine-deep);box-shadow:var(--sh-3)} .hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 48%;z-index:0} /* Cinemagraph im Titelbild (seit 2026-08-07). Das Video liegt deckungsgleich über dem Standbild und trägt denselben Bildausschnitt (`object-position`), sonst springt das Motiv beim Einblenden. Es startet unsichtbar und wird erst sichtbar, wenn genug gepuffert ist — dadurch bleibt das Standbild das LCP-Element und die Ladezeit ändert sich nicht. Gleiche z-Ebene wie das Standbild (0): Es gewinnt allein über die Reihenfolge im Dokument, damit Scrim (1) und Text (2) unangetastet bleiben. */ .hero video.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 48%;z-index:0;opacity:0;transition:opacity .9s ease} .hero video.bg.ready{opacity:1} /* Anhalten-Schalter. WCAG 2.2.2 verlangt eine Pausiermöglichkeit für Bewegung, die von selbst startet und länger als fünf Sekunden läuft — der Loop läuft endlos, also greift die Regel. Optisch bewusst wie das Dreh-Icon der Team-Kachel (`.flip-front .flip-hint`), nicht wie die Slider-Pfeile: Es sitzt auf einem Foto, nicht auf hellem Grund. Steht per `hidden` im Markup und wird nur eingeblendet, wenn das Video tatsächlich läuft. Fläche bewusst dunkel statt hell (korrigiert 2026-08-07): Seit der Scrim nicht mehr das ganze Bild abdunkelt, liegt die obere rechte Ecke bei Luma 232, also heller Himmel. Ein weißer Schalter auf Weiß wäre unsichtbar gewesen. */ .motion-toggle{position:absolute;top:clamp(14px,2vw,20px);right:clamp(14px,2vw,20px);z-index:3; width:34px;height:34px;border:0;border-radius:var(--r-pill);cursor:pointer; background:rgba(14,21,16,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); color:#fff;display:grid;place-items:center;padding:0; transition:background .2s} .motion-toggle[hidden]{display:none} .motion-toggle:hover{background:rgba(14,21,16,.62)} .motion-toggle:focus-visible{outline:2px solid #fff;outline-offset:3px} .motion-toggle svg{width:15px;height:15px;fill:currentColor} /* Scrim, neu gesetzt 2026-08-07. Vorher lagen zwei dunkle Verläufe übereinander: ein diagonaler von links (bis .60) und ein vertikaler (bis .86). Unten links ergab das zusammen rund 94 % Schwarz — der halbe Himmel wurde grau, die Grüns olivfarben. Jetzt trägt nur noch eine gezielte Wanne unten links den Text, der Rest des Bildes bleibt offen. Die Lesbarkeit kommt zum zweiten Teil aus dem festeren Textschatten weiter unten, nicht mehr aus einer Fläche über allem. Reihenfolge: Die Wanne liegt über dem vertikalen Verlauf. Farbe bleibt neutral dunkel (`rgba(9,14,10,…)`), nicht `--pine-deep`: Grünstich auf Fotos war schon 2026-07-29 Isas Kritikpunkt. */ .hero .scrim{position:absolute;inset:0;z-index:1;background: radial-gradient(85% 100% at 2% 105%,rgba(9,14,10,.72) 0%,rgba(9,14,10,.34) 45%,rgba(9,14,10,0) 100%), linear-gradient(180deg,rgba(10,15,11,.08) 0%,rgba(10,15,11,0) 45%,rgba(10,15,11,.34) 75%,rgba(9,14,10,.70) 100%)} /* Vier Werte statt zwei (2026-08-07, Isas Wunsch): Der Abstand unter dem Button ist jetzt derselbe wie der zum linken Rand, an jeder Fensterbreite und nicht nur am oberen Ende des `clamp`. Oben bleibt es beim größeren Wert — dort grenzt der Header an, nicht der Bildrand. */ .heroText{position:relative;z-index:2;padding:clamp(32px,5.5vw,68px) clamp(26px,5vw,64px) clamp(26px,5vw,64px);max-width:800px} /* Zwei Schatten je Zeile statt einem: ein weiter Hof trägt die Fläche, ein enger Saum die Buchstabenkante. Der frühere einzelne 30-px-Schatten bei .38 war zu diffus, um allein zu tragen — deshalb musste der Scrim das ganze Bild abdunkeln. Nachgemessen über den tatsächlichen Buchstabenflächen: H1 kommt im ungünstigsten Fall auf 5,8:1, der Lead auf 6,0:1. Der alte Stand lag bei 6,0:1 und 7,2:1, das Bild dafür 20 Luminanzpunkte dunkler. */ .hero h1{font-family:var(--display);font-weight:800;color:#fff;font-size:clamp(46px,8.6vw,104px);line-height:.98;letter-spacing:-.03em;margin-bottom:12px;text-shadow:0 2px 44px rgba(0,0,0,.55),0 1px 7px rgba(0,0,0,.42)} /* Zeilenabstand 1,45 statt der 1,65 aus dem Body (2026-08-07, Isas Wunsch). Der Lead steht in großer Schrift über wenige Zeilen, da wirkt der Body-Wert auseinandergezogen. Nebeneffekt, gewollt: Der Textblock ist unten verankert, durch die kürzeren Zeilen rücken H1 und Lead zusätzlich nach unten. */ .hero p{font-size:clamp(16px,2vw,21px);line-height:1.45;color:#f1eee3;max-width:46ch;text-shadow:0 1px 22px rgba(0,0,0,.55),0 1px 5px rgba(0,0,0,.38)} /* Der Button liegt seit 0.22.3 leicht durchscheinend auf dem Bild (Isas Wunsch): Das Cinemagraph soll auch hinter der Fläche weiterlaufen, sonst wirkt der Button wie ein aufgeklebtes Rechteck im bewegten Bild. `--fresh` (#dce8d2) steht hier als rgba, weil sich eine CSS-Variable nicht ohne Weiteres mit einem Alphawert versehen lässt. 0,68 ist keine Geschmacksentscheidung, sondern die Untergrenze des Vertretbaren: Wie dunkel das Video hinter dem Button gerade ist, weiß niemand — es läuft im Loop, und die untere linke Ecke wandert je nach Motiv. Deshalb ist der ungünstigste Fall gerechnet, Schwarz hinter dem Button. Dann bleibt von #dce8d2 die Mischfarbe #969e8f, und der Text (--pine-deep) kommt darauf auf 5,1:1 — über den 4,5:1 der WCAG AA. Bei 0,55 wären es 3,9:1 gewesen. Wer den Wert weiter senkt, verliert die Lesbarkeit in genau den Sekunden, in denen das Video dunkel wird. Kein `backdrop-filter`: Ein Weichzeichner würde die Bewegung glattbügeln, also genau das entfernen, worum es hier geht. */ .btn.onphoto{margin-top:clamp(22px,3vw,32px);background:rgba(220,232,210,.68);color:var(--pine-deep);padding:14px 30px;font-size:16px} /* Beim Zeigen und bei Tastaturfokus wird die Fläche fester. Zwei Gründe: Der Button quittiert die Berührung sichtbar, und im Moment des Klickens steht die Lesbarkeit nicht mehr am Rand des Erlaubten. */ .btn.onphoto:hover,.btn.onphoto:focus-visible{background:rgba(220,232,210,.9);box-shadow:var(--sh-2)} .statement .wrap{text-align:center} .statement p{font-family:var(--display);font-size:clamp(19px,2.6vw,29px);font-weight:600;line-height:1.4;letter-spacing:-.01em;color:var(--pine);max-width:36ch;margin:0 auto} .statement p b{color:var(--pine-deep)} .heart{background:var(--fresh)} .projects{padding-top:0} .sechead{display:flex;align-items:end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:8px} .sechead .lead{margin-top:12px} .card{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s;text-decoration:none;color:inherit} .card:hover{transform:translateY(-6px);box-shadow:var(--sh-2)} .thumb{aspect-ratio:3/2;overflow:hidden;position:relative} body.t-text .thumb{aspect-ratio:3/2;overflow:hidden} .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s} .card:hover .thumb img{transform:translateZ(0) scale(1.05)} .card .body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1} .card .meta{font-size:11.5px;color:var(--moss);letter-spacing:.09em;text-transform:uppercase;margin-bottom:7px;font-weight:600} .card h3{font-family:var(--display);font-size:19px;font-weight:700;margin-bottom:8px;line-height:1.3;color:var(--pine-deep)} .card p{font-size:14.5px;color:var(--copy)} body.t-text .card p{font-size:14.5px;color:var(--copy);flex:1} .card .facts{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px;margin-top:auto;padding-top:22px;font-size:13px;color:var(--copy)} .card .facts b{color:var(--pine)} a.card .facts::after{content:"Mehr dazu →";margin-left:auto;font-size:12px;font-weight:600;color:var(--pine);white-space:nowrap} /* Automatisches „Mehr dazu →" entfällt, sobald die Karte einen eigenen Weiterlink (.go) mitbringt — sonst stünden zwei Links in derselben Kachel (Fall „Lernen Sie uns kennen" auf Stiftung Überblick, Isa 07.08.). Karten ohne .go behalten das Standardlabel. */ a.card .body:not(:has(.facts)):not(:has(.go))::after{content:"Mehr dazu →";display:block;text-align:right;margin-top:auto;padding-top:22px;font-size:12px;font-weight:600;color:var(--pine)} .heart .wrap{text-align:center;max-width:880px} .heart blockquote{font-family:var(--display);font-size:clamp(24px,3.6vw,40px);font-weight:700;line-height:1.25;letter-spacing:-.015em;color:var(--pine-deep);max-width:26ch;margin:0 auto 16px} .heart cite{font-size:14px;color:var(--soft);font-style:normal;letter-spacing:.06em} .heart .origin{margin:34px auto 0;max-width:54ch;color:var(--copy);font-size:clamp(15px,1.7vw,17px)} .heart .origin a{margin-left:6px} .impact{background:#fff;padding-bottom:clamp(16px,2.4vw,28px)} .viewport{position:relative;margin:20px 0 -26px;overflow:hidden;padding:24px 0 58px} .track{display:flex;align-items:stretch;will-change:transform} .track.no-anim .slide{transition:none} .slide{position:relative;z-index:1;flex:0 0 auto;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden; display:grid;grid-template-columns:48% 1fr; opacity:.28;transform:scale(.93);transform-origin:center center; box-shadow:none; transition:opacity .5s ease,transform .5s cubic-bezier(.3,.7,.3,1),box-shadow .3s ease; pointer-events:none} .slide.is-active{z-index:2;opacity:1;transform:scale(1);pointer-events:auto} .slide.is-active:hover{box-shadow:var(--sh-2)} .slide .imgbox{overflow:hidden;background:var(--fresh)} .slide .imgbox.ph{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#eef5e6,#dcebd0)} .slide .imgbox.ph img{width:min(46%,150px);height:auto;object-fit:contain;opacity:.85} .slide .imgbox img{width:100%;height:100%;object-fit:cover;transition:transform .5s} .slide.is-active:hover .imgbox img{transform:translateZ(0) scale(1.05)} .slide .body{padding:clamp(24px,2.8vw,36px) clamp(26px,3.2vw,42px);display:flex;flex-direction:column;min-height:290px} .slide .meta{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--moss)} .slide h3{font-family:var(--display);font-size:clamp(19px,2vw,25px);font-weight:700;line-height:1.24;color:var(--pine-deep);margin-top:10px;letter-spacing:-.015em; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .slide p{margin-top:10px;color:var(--copy);font-size:15.5px;line-height:1.6; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .slide .more{margin-top:auto;padding-top:18px;font-family:var(--display);font-weight:700;font-size:15px;color:var(--pine)} .slide .cardlink{position:absolute;inset:0;z-index:1;text-decoration:none} .slide .imgbox,.slide .body{position:relative} /* Bildnachweis auf den Folien des Bandes (27.08.2026, Isa). Dieselben Werte wie auf den Kacheln (`.post .thumb .credit`): senkrecht am rechten Bildrand, weiß, gedämpft. Nichts Eigenes erfunden — die Folie ist eine Querkachel, sie soll ihren Nachweis nicht anders tragen als die anderen. Die drei Klassen sind kein Zufall. Auf der Startseite gilt `body.t-front .credit` (0,2,1) und setzt den Nachweis waagerecht unten rechts; `.slide .imgbox .credit` wiegt mit drei Klassen (0,3,0) schwerer und gewinnt. Dieselbe Falle wie 06.08. bei den Kacheln — `.credit` ist achtfach belegt, und wer hier mit zwei Klassen antritt, verliert lautlos. `pointer-events:none` ist Pflicht, nicht Vorsicht: Über der Folie liegt `a.cardlink` als Klickfläche. Ohne die Zeile schluckt der Nachweis den Klick genau dort, wo er sitzt, und die Folie öffnet sich nicht. Bewusst kein Aufhellen beim Darüberfahren. `.imgbox:hover .credit` wiegt gleich schwer (0,3,0) und steht früher im Stylesheet, wird hier also überstimmt. Das ist gewollt: Auf den Kacheln bleibt der Nachweis gedämpft, und die Folie ist eine Kachel. Das Aufhellen bleibt den großen Artikelbildern, für die es gebaut wurde. */ .slide .imgbox .credit{ position:absolute;bottom:8px;right:2px;z-index:2;margin:0; writing-mode:vertical-rl; font-family:var(--sans);font-size:8px;font-weight:500;line-height:1;letter-spacing:.02em; color:#fff;opacity:.55; text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 8px rgba(0,0,0,.5); pointer-events:none} .arrow{position:absolute;top:50%;transform:translate(-50%,-50%);z-index:5; width:40px;height:40px;border:0;border-radius:var(--r-pill);cursor:pointer; background:rgba(32,40,30,.07);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px); color:rgba(32,40,30,.62);display:grid;place-items:center; transition:background .2s,color .2s} .arrow:hover{background:rgba(32,40,30,.15);color:var(--pine-deep)} .arrow:focus-visible{outline:2px solid var(--pine-deep);outline-offset:3px;color:var(--pine-deep)} .arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .arrow.prev{left:6%} .arrow.next{left:94%} .dots{display:flex;gap:8px;justify-content:center;margin-top:clamp(20px,2.4vw,28px)} .dot{width:8px;height:8px;padding:0;border:0;border-radius:var(--r-pill);background:#bcc9b3;cursor:pointer;transition:width .25s,background .25s} .dot[aria-current="true"]{width:24px;background:var(--pine)} .dot:focus-visible{outline:2px solid var(--pine-deep);outline-offset:3px} .donate{border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(38px,6vw,64px);text-align:center;background:#fff;box-shadow:var(--sh-1)} .donate .eyebrow{color:var(--moss)} .donate h2{margin-bottom:14px} .donate .lead{margin:0 auto 28px} .card .go{margin-top:auto;padding-top:22px;font-weight:600;color:var(--pine);font-size:14px} .groupline{display:flex;align-items:baseline;gap:14px;margin:0 0 22px} .groupline h2{font-size:clamp(22px,3vw,32px)} .groupline .hint{font-size:13.5px;color:var(--soft)} .person{border:1px solid var(--line);border-radius:var(--r-md);padding:26px;background:#fff;display:flex;flex-direction:column;gap:6px} .person .avatar{width:52px;height:52px;border-radius:var(--r-pill);background:var(--fresh);color:var(--pine-deep);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:17px;margin-bottom:10px} .person h3{font-family:var(--display);font-size:19px;font-weight:700;color:var(--pine-deep);line-height:1.25} .person .role{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--moss)} .person p{font-size:14.5px;color:var(--copy);margin-top:6px} .person.flip{padding:0;border:0;background:transparent;gap:0} .flip-card{position:relative;width:100%;aspect-ratio:4/5;-webkit-perspective:1600px;perspective:1600px} .flip-trigger{all:unset;display:block;position:relative;width:100%;height:100%;cursor:pointer;border-radius:var(--r-md)} .flip-inner{display:block;position:relative;width:100%;height:100%; -webkit-transform-style:preserve-3d;transform-style:preserve-3d; transition:transform .7s cubic-bezier(.4,.2,.2,1)} .flip-card.flipped .flip-inner{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)} .flip-front,.flip-back{position:absolute;inset:0;border-radius:var(--r-md);overflow:hidden; -webkit-backface-visibility:hidden;backface-visibility:hidden; opacity:1;visibility:visible;pointer-events:auto; transition:opacity .7s ease,visibility 0s linear 0s} .flip-back{-webkit-transform:rotateY(180deg);transform:rotateY(180deg); opacity:0;visibility:hidden;pointer-events:none; transition:opacity .7s ease,visibility 0s linear .7s; background:#fff;border:1px solid var(--line);box-sizing:border-box; padding:28px;display:flex;flex-direction:column;justify-content:center;gap:6px;text-align:left} .flip-card.flipped .flip-front{opacity:0;visibility:hidden;pointer-events:none; transition:opacity .7s ease,visibility 0s linear .7s} .flip-card.flipped .flip-back{opacity:1;visibility:visible;pointer-events:auto; transition:opacity .7s ease,visibility 0s linear 0s} .flip-front{background:var(--fresh)} .flip-front img{width:100%;height:100%;object-fit:cover;display:block} .flip-front::after{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(to top,rgba(10,10,10,.82) 0%,rgba(10,10,10,.28) 40%,rgba(10,10,10,0) 62%)} .flip-front .cap{position:absolute;left:0;right:0;bottom:0;padding:22px 24px;text-align:left;z-index:2} .flip-front h3{color:#fff} .flip-front .role{color:var(--fresh)} .flip-hint{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:var(--r-pill); display:flex;align-items:center;justify-content:center;z-index:2} .flip-front .flip-hint{background:rgba(255,255,255,.18);backdrop-filter:blur(6px);color:#fff} .flip-back .flip-hint{background:var(--fresh);color:var(--pine-deep)} .flip-hint svg{width:14px;height:14px} /* Rückseiten-Typografie (2026-08-06). Die Rückseite hat exakt so viel Platz wie die Vorderseite — 4:5, sonst bricht der Flip. Sie erbte aber die Werte der alten, frei wachsenden Textkachel (p 14,5 px, Zeilenhöhe 1,65 aus dem Body). Das passte nur, solange die Kachel nach Inhalt wachsen durfte. Enger gesetzt, damit mehr Text hineingeht: Zeilenhöhe 1,5 statt 1,65, Innenabstand 22 px statt 28, Name und Funktion eine Stufe kleiner. Alle vier Selektoren tragen bewusst das führende `.person`: Damit schlagen sie `.person h3`, `.person .role` und `.person p` über die Spezifität und nicht über die Reihenfolge im Stylesheet. */ .person .flip-back{padding:22px} .person .flip-back h3{font-size:15.5px} .person .flip-back .role{font-size:10.5px} .person .flip-back p{font-size:13px;line-height:1.5;margin-top:2px} /* Vorderseiten-Typografie (2026-08-07). Name und Funktion standen auf der Vorderseite noch auf den Werten der alten Textkachel (19 px / 12,5 px) und wirkten auf dem Foto zu groß. Jetzt auf derselben Stufe wie die Rückseite, damit dieselbe Person beim Drehen nicht die Schriftgröße wechselt. Führendes `.person` wieder aus Spezifitätsgründen (siehe Kommentar oben). */ .person .flip-front h3{font-size:15.5px} .person .flip-front .role{font-size:10.5px} /* Kachel ohne Rückseite (kein Text vorhanden): kein Button, kein Dreh-Icon, kein Zeiger. */ .flip-card.static{cursor:default} /* Für den Platzhalter gibt es bewusst KEINE Sonderregel mehr (Stand 2026-08-06). Zwischenzeitlich existierte eine `.flip-front.ph`-Variante mit abgeschaltetem Verlauf und dunkelgrüner Schrift auf hellem Grund. Sie ist entfallen: Das Platzhalterbild ist jetzt selbst dunkel (Fläche `--pine`, Figur `--fresh`), damit greifen Verlauf, weißer Name und salbeigrüne Funktion unverändert wie bei jedem Foto. Ziel ist, dass Name und Funktion auf allen Kacheln gleich aussehen — auch ohne Porträt und ohne Flip. Wer den Platzhalter künftig ändert, muss ihn dunkel halten, sonst wird die weiße Schrift unlesbar. */ .memorial h3{font-family:var(--display);font-size:clamp(19px,2.4vw,24px);font-weight:700;color:var(--pine-deep);margin-bottom:6px} .cta{border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(34px,5vw,54px);text-align:center;background:#fff;box-shadow:var(--sh-1)} .cta .lead{margin:12px auto 26px} .org .link{margin-top:16px} /* --- 6 Breakpoints ---------------------------------------------------- */ @media(max-width:860px){ nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:10px 22px 20px} nav ul{flex-direction:column;align-items:flex-start;gap:4px} nav a{font-size:17px;padding:9px 0;display:block} nav a.home{padding:9px 0} nav a.home .homelabel{position:static;width:auto;height:auto;margin:0 0 0 10px;overflow:visible;clip:auto;font-size:17px} .burger:checked ~ nav{display:block} .burger-label{display:block} .burger{display:block;position:absolute;width:1px;height:1px;opacity:0} .burger:focus-visible~.navmeta .burger-label{outline:3px solid var(--pine);outline-offset:3px} .submenu{position:static;display:flex;box-shadow:none;border:0;padding:2px 0 6px 14px;min-width:0} .has-sub>a::after{content:""} .submenu a{font-size:15.5px;padding:7px 0} .submenu a:hover{background:transparent} .featured{grid-template-columns:1fr} .featured .img{min-height:230px} } @media(max-width:480px){ .navmeta .btn{padding:9px 16px;font-size:14px} } @media(prefers-reduced-motion:reduce){ /* Doppelt abgesichert: Das Skript lädt das Video hier gar nicht erst. Sollte es je auf anderem Weg hineinkommen, bleibt es unsichtbar. */ .hero video.bg,.hero video.bg.ready{display:none} .reveal{opacity:1;transform:none;transition:none} .post,.featured,.btn,.thumb img{transition:none} .post,.btn,.thumb img{transition:none} .btn{transition:none} .org,.btn{transition:none} .track,.slide{transition:none} .card,.btn,.thumb img{transition:none} .flip-inner{transition:none} .flip-front,.flip-back{transition:none} } @media (prefers-reduced-motion:reduce){ .to-top{transition:opacity .01s,visibility .01s} .copybtn{transition:none} } @media(max-width:900px){ .artBody .grid{grid-template-columns:1fr} .sidebar{position:static} .slide{grid-template-columns:1fr;opacity:1;transform:none} .slide:not(.is-active){opacity:0} .slide .imgbox{aspect-ratio:16/8.5} .slide .body{min-height:0;padding-bottom:28px} .arrow{background:rgba(255,255,255,.55);color:rgba(32,40,30,.75)} .arrow.prev{left:38px} .arrow.next{left:auto;right:38px;transform:translate(50%,-50%)} } @media(max-width:600px){ .lightbox .lb-prev,.lightbox .lb-next{width:42px;height:42px} } /* --- Links im Fliesstext (seit 2026-08-06) ------------------------------ Vorher gab es dafuer gar keine Regel, deshalb griff der Browser-Standard: Blau fuer unbesucht, Lila fuer besucht. Beides passt nicht zur Marke. Besucht wird bewusst NICHT weggelassen, sondern nur leiser gesetzt: gleiche Farbfamilie, gedaempft. Wer schon irgendwo war, soll es sehen. Unterstrichen bleibt es, weil Farbe allein kein ausreichendes Merkmal ist (WCAG 1.4.1). Die Linie sitzt tiefer und duenner als der Browser-Standard, damit sie Unterlaengen nicht durchschneidet. Ausgenommen sind Navigation, Footer, Knoepfe und Kacheln, die eigene Regeln mit hoeherer Spezifitaet tragen. ------------------------------------------------------------------------- */ /* Kachel-Links sind ausgenommen (24.08.2026). Ein `a.org` umschliesst eine ganze Kachel; die Sammelregel darunter gilt aber Links im Fliesstext und gab ihm Unterstreichung und Besucht-Farbe. Im Entwurf fiel das nie auf, dort steht die Kachelreihe ausserhalb von `.prose`. Die Ausnahme steht bewusst in der `:not()`-Kette und nicht als Gegenregel: Nur so ist sie spezifisch genug, ohne dass irgendwo ein `!important` noetig wird. Betrifft ausschliesslich Links mit der Klasse `.org`, also Kacheln — jeder andere Link auf jeder anderen Seite bleibt unveraendert. */ .prose a:not(.btn):not(.textlink):not(.wp-block-button__link):not(.org):not(.card),.doc a:not(.btn):not(.textlink):not(.wp-block-button__link):not(.org):not(.card),.hint a:not(.btn):not(.textlink):not(.wp-block-button__link):not(.org):not(.card),.infobox a:not(.btn):not(.textlink):not(.wp-block-button__link):not(.org):not(.card),.lead a:not(.btn):not(.textlink):not(.wp-block-button__link):not(.org):not(.card),.formnote a:not(.btn):not(.textlink):not(.wp-block-button__link):not(.org):not(.card),.artBody a:not(.btn):not(.textlink):not(.wp-block-button__link):not(.org):not(.card),.pw-schutz a:not(.btn):not(.textlink):not(.wp-block-button__link):not(.org):not(.card){ color:var(--pine); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:rgba(39,81,65,.42); transition:color .2s,text-decoration-color .2s; } .prose a:not(.btn):not(.textlink):not(.wp-block-button__link):not(.org):not(.card):visited,.doc a:not(.btn):not(.textlink):not(.wp-block-button__link):not(.org):not(.card):visited,.hint a:not(.btn):not(.textlink):not(.wp-block-button__link):not(.org):not(.card):visited,.infobox a:not(.btn):not(.textlink):not(.wp-block-button__link):not(.org):not(.card):visited,.lead a:not(.btn):not(.textlink):not(.wp-block-button__link):not(.org):not(.card):visited, .formnote a:not(.btn):not(.textlink):not(.wp-block-button__link):not(.org):not(.card):visited,.artBody a:not(.btn):not(.textlink):not(.wp-block-button__link):not(.org):not(.card):visited,.pw-schutz a:not(.btn):not(.textlink):not(.wp-block-button__link):not(.org):not(.card):visited{ color:var(--moss); text-decoration-color:rgba(91,117,82,.42); } .prose a:not(.btn):not(.textlink):not(.wp-block-button__link):not(.org):not(.card):hover,.doc a:not(.btn):not(.textlink):not(.wp-block-button__link):not(.org):not(.card):hover,.hint a:not(.btn):not(.textlink):not(.wp-block-button__link):not(.org):not(.card):hover,.infobox a:not(.btn):not(.textlink):not(.wp-block-button__link):not(.org):not(.card):hover,.lead a:not(.btn):not(.textlink):not(.wp-block-button__link):not(.org):not(.card):hover, .formnote a:not(.btn):not(.textlink):not(.wp-block-button__link):not(.org):not(.card):hover,.artBody a:not(.btn):not(.textlink):not(.wp-block-button__link):not(.org):not(.card):hover,.pw-schutz a:not(.btn):not(.textlink):not(.wp-block-button__link):not(.org):not(.card):hover{ color:var(--pine-deep); text-decoration-color:currentColor; } /* --- 14 Systemseiten (seit 2026-08-06) --------------------------------- 404, Suchergebnisse, Danke-Seite, Wartungsseite, Passwortschutz. Bewusst aus vorhandenen Bausteinen zusammengesetzt: .pagehead, .cardgrid, .org, .infobox, .ctaband. Neu sind nur Suchfeld, Blaetterleiste und die Wartungsseite, weil es dafuer bisher nichts gab. ------------------------------------------------------------------------- */ /* Nur fuer Screenreader. Beschriftungen, die sichtbar redundant waeren, duerfen nicht einfach weggelassen werden: ein Eingabefeld ohne Label ist fuer Screenreader stumm. display:none hilft nicht, das entfernt es auch aus dem Accessibility-Baum. */ .visuell-versteckt{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* Suchfeld. Zwei Groessen: dezent im Footer, gross auf 404 und Suchseite. */ .suche{display:flex;gap:10px;align-items:stretch} .suche input[type=search]{flex:1;min-width:0;-webkit-appearance:none;appearance:none} .suche .btn{flex:none;white-space:nowrap} .suche-gross input[type=search]{font-size:17px;padding:15px 18px} .suche-gross .btn{padding:0 26px} /* Blaetterleiste. Gebraucht, sobald die Chronik ihre 72 Eintraege ausgibt. */ .blaettern{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;margin-top:clamp(32px,4vw,48px)} .blaettern .seite{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;font-family:var(--display);font-size:15px;font-weight:600;color:var(--pine-deep);text-decoration:none;transition:border-color .2s,background .2s} .blaettern a.seite:hover{border-color:var(--moss);background:#fbfdf9} /* Die aktuelle Seite ist kein Link. Sie bekommt aria-current="page" und wird nur farblich abgesetzt, nicht zusaetzlich als Knopf verkleidet. */ .blaettern .jetzt{background:var(--pine-deep);border-color:var(--pine-deep);color:#fff;cursor:default} .blaettern .weiter{gap:8px} .blaettern .luecke{min-width:auto;border:0;background:none;color:var(--soft);padding:0 4px} /* Wartungsseite. Einzige Seite ohne Navigation und ohne Footer. */ body.t-wartung{background:linear-gradient(160deg,#f6f9f1,#e4efd8);min-height:100vh;display:flex;align-items:center;justify-content:center} .wartung{max-width:560px;padding:clamp(32px,6vw,56px) 24px;text-align:center} /* margin:0 auto ist noetig, weil img global auf display:block steht und text-align:center Blockelemente nicht zentriert (Isa, 06.08.). */ .wartung-logo{width:104px;height:104px;object-fit:contain;margin:0 auto 26px} .wartung h1{font-size:clamp(30px,5vw,44px);margin-bottom:4px} .wartung .eyebrow{margin-bottom:8px} .wartung-sub{font-size:16px;color:var(--pine);margin-bottom:clamp(24px,3vw,32px)} .wartung-text{font-size:16.5px;color:var(--copy);line-height:1.65;margin-bottom:22px} .wartung-kontakt{font-size:15px;color:var(--copy)} .wartung-kontakt a{color:var(--pine-deep);font-weight:600} /* Passwortgeschuetzte Seite. Die Funktion wird nicht aktiv genutzt, das Feld gibt WordPress aber immer aus. Ungestaltet saehe es aus wie ein Fremdkoerper, deshalb hier mitgenommen (entschieden 06.08.). */ .pw-schutz{max-width:520px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(26px,4vw,36px)} .pw-schutz h2{font-size:22px;margin-bottom:10px} .pw-schutz p{font-size:15px;color:var(--copy);margin-bottom:20px} .pw-schutz .zeile{display:flex;gap:10px;align-items:stretch} .pw-schutz .zeile .btn{flex:none;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border-radius:var(--r-sm)} .pw-schutz .zeile .btn svg{width:20px;height:20px} /* Karten, die als Ganzes ein Link sind. NICHT .cardlink verwenden, das ist absolut positioniert und nur fuer Carousel-Folien gedacht. */ a.org{text-decoration:none;color:inherit} @media(max-width:820px){ .duo{grid-template-columns:1fr} .grid2{grid-template-columns:1fr} .yeargroup{grid-template-columns:1fr;gap:14px} .yearmark .y{position:static;font-size:34px} .konto{position:static} } @media(max-width:560px){ .row{grid-template-columns:1fr} } /* Die fruehere Regel „Kopierknopf auf Touch-Geraeten immer sichtbar" ist seit 0.24.14 entfallen: Dort gibt es den Knopf nicht mehr (siehe unten). */ @media(max-width:640px){ .hero{min-height:min(90vh,680px)} } /* Aktuelles fuehrt zu einem Text, nicht zu einem Projekt (Isa, 05.08.). */ body.t-news a.post .facts::after, body.t-news a.post .body:not(:has(.facts))::after{content:"Weiterlesen →"} /* ========================================================================== Mobil-Korrekturen (Isa, 05.08.2026) ========================================================================== */ /* Menüpunkt „Spenden": nur im aufgeklappten Menü, dort hervorgehoben. */ .only-mobile{display:none} @media(max-width:860px){ .only-mobile{display:block} .navmeta .btn{display:none} /* rutschte sonst ins Logo */ .nav-donate{display:inline-block;background:var(--pine-deep);color:var(--fresh); border-radius:var(--r-sm);padding:10px 20px;margin-top:10px;font-weight:600} .nav-donate:hover{background:var(--pine)} /* Menü: kompakter, Haus-Icon raus, Unterstrich näher am Wort */ nav ul{gap:0} nav a{font-size:15.5px;padding:7px 0;border-bottom:2px solid transparent; width:fit-content;line-height:1.25} nav a.home{padding:7px 0} nav a.home svg{display:none} nav a.home .homelabel{margin:0;font-size:15.5px} .submenu{padding:0 0 4px 12px} .submenu a{font-size:14px;padding:5px 0} } @media(max-width:900px){ /* Beikasten steht unter dem Artikel, nicht daneben. */ .split.has-aside,.grid2,.artBody .grid.has-aside{grid-template-columns:1fr} .sidebar{position:static;order:2} /* Carousel: Pfeile auf Höhe des Bildes statt der ganzen Kachel. */ .arrow{top:calc(24px + (100vw - 56px) * 0.2656)} .slide .body{min-height:0} .slide .more{margin-top:14px} } @media(max-width:600px){ /* Sektionslink unter die Karten: „Alle Projekte" und „Alle Beiträge". */ .projects .wrap,.impact .wrap{display:flex;flex-direction:column} .projects .sechead,.impact .sechead{display:contents} .projects .sechead>div,.impact .sechead>div{order:1} .projects .cardgrid{order:2} .impact .viewport{order:2} .impact .dots{display:none} .projects .sechead .textlink{order:3;margin-top:22px;align-self:flex-start} .impact .sechead .textlink{order:4;margin-top:18px;align-self:flex-start} /* CTA-Kasten braucht Luft zum Bildschirmrand. */ .cta{margin-left:clamp(22px,4vw,28px);margin-right:clamp(22px,4vw,28px)} /* Filterzeile: kleiner, ohne über den Rand zu laufen. */ .filterbar{margin-left:0;margin-right:0;padding-left:0;padding-right:0} .filter{font-size:12.5px;padding:6px 13px} } @media(max-width:560px){ /* Ab 0.24.15 greift hier die Marke mit Schriftzug in der Fassung -3 (Isa, 30.09.2026; vorher nur die quadratische Bildmarke, 48 px). Sie fuellt den Platz bis zu Lupe und Burger und wird hoechstens so gross wie am Rechner (271 px breit = 58 px hoch). Gemessen: 320 px Bildschirm → 39 px hoch, 360 → 48, 390 → 54. Unter den 58 px, ab denen die Handschriftzeile laut Kommentar oben ausfranst; auf Handy-Bildschirmen mit doppelter bis dreifacher Pixeldichte blieb sie im Test sauber. */ .brand{flex:1 1 auto;min-width:0} .brand .logo{flex:1 1 auto;min-width:0} .brand .logo img{height:auto;width:100%;max-width:271px} .suche{flex-direction:column} .suche .btn{width:100%} .blaettern .seite{min-width:40px;height:40px;padding:0 11px;font-size:14px} } /* --- 15 Footer (Variante D, seit 2026-08-06) ---------------------------- Vier Spalten: Marke, zwei Linklisten, Suche. Loest den fruehereren Aufbau mit repeat(auto-fit) ab, bei dem alle Spalten gleich breit waren und die Linklisten unnoetig weit auseinandertrieben. Entschieden mit Isa am 06.08. anhand von "Footer-Varianten.html". ------------------------------------------------------------------------- */ /* Drei Spalten: Marke, zwei Linklisten (ab 0.24.9). Bis 0.24.8 stand als vierte Spalte die Suche hier, sie sitzt jetzt in der Kopfleiste. Die Marke nimmt den freien Platz, die Listen stehen rechts. */ footer .wrap{ display:grid; grid-template-columns:minmax(238px,1fr) max-content max-content; column-gap:clamp(22px,3.4vw,56px); row-gap:32px; align-items:start; padding:52px clamp(22px,2.4vw,26px); } /* Zusaetzlicher Abstand NUR zwischen den beiden Linklisten (Isa, 08.08.). Bewusst als Innenabstand der zweiten Liste und nicht ueber `column-gap`: Der Gap gilt fuer alle vier Spalten, ein groesserer Wert haette auch Marke und Suche mit auseinandergezogen. Gilt in jeder Breite, denn die beiden Listen stehen auch nach dem Umbruch bei 820px nebeneinander. */ footer .wrap>div:nth-child(3){padding-left:clamp(12px,1.8vw,30px)} /* Feste 58px wie in der Kopfleiste. Die alte mitwachsende Hoehe stammt aus der Zeit, als neben dem Logo noch drei Textzeilen standen und der Platz knapp war. Die Marke traegt den Schriftzug jetzt selbst und steht im Footer ueber die volle Breite, deshalb passt sie auch auf dem Handy. Ein mitwachsender Wert haette den Footer-Schriftzug bei 1140px auf 52px gedrueckt und damit kleiner gemacht als oben. */ footer .brandline{margin-bottom:0} /* Facebook und betterplace sitzen nebeneinander als dritter Eintrag in der zweiten Linkspalte, damit beide Spalten gleich lang sind (ab 0.24.9). 16 px Abstand: knapp eine Symbolbreite, so lesen sich die beiden als Paar und kleben trotzdem nicht aneinander. */ .social-zeile{display:flex;align-items:center;gap:16px} .fb-zeile{display:inline-flex;padding:5px 0;opacity:.85} .fb-zeile:hover{opacity:1} /* betterplace als Maske ueber der PNG-Datei, Farbe aus currentColor (weiss wie Facebook). 19 px hoch wie das Facebook-Symbol; die Bildmarke ist hoeher als breit, deshalb wirkt sie mit `contain` so gross wie der Kreis. */ .bp-logo{display:block;width:19px;height:19px;background:currentColor; -webkit-mask:url('Bilder/betterplace-logo.png') center/contain no-repeat; mask:url('Bilder/betterplace-logo.png') center/contain no-repeat} .bp-zeile:hover{text-decoration:none} /* Schlusszeile: Copyright links, Rechtslinks rechts, durch feine Linie getrennt. */ .schluss{border-top:1px solid rgba(255,255,255,.15);padding:20px clamp(22px,2.4vw,26px) 30px} .schluss-innen{max-width:1140px;margin:0 auto;display:flex;flex-wrap:wrap;gap:8px 26px;align-items:center;font-size:13px;color:rgba(255,255,255,.62)} .schluss-innen a{display:inline;font-size:13px;color:rgba(255,255,255,.62);padding:0;text-decoration:none} .schluss-innen a:hover{color:#fff;text-decoration:underline} .schluss-innen .rechts{margin-left:auto;display:flex;gap:22px} /* Umbruch: Die Marke bekommt die volle Breite, die beiden Linkspalten behalten ihre gemeinsame Zeile. Sie stehen in jeder Breite nebeneinander. */ @media(max-width:820px){ footer .wrap{grid-template-columns:max-content max-content;column-gap:clamp(28px,7vw,64px)} footer .wrap>div:first-child{grid-column:1/-1} } @media(max-width:420px){ footer .wrap{column-gap:32px;padding:44px 22px} /* Unter ~350 px ist die 303 px breite Fussmarke breiter als der Platz und ragte 5 px ueber den Rand (gemessen bei 320 px, 30.09.2026). */ /* Breite ausdruecklich setzen, Hoehe folgt dem Seitenverhaeltnis. `height:auto` allein geht hier nicht: Die SVG-Datei traegt width="100%" und hat damit keine eigene Breite, das Logo schrumpfte auf 163 px. */ footer .foot-logo{width:min(303px, calc(100vw - 44px));height:auto} .schluss-innen .rechts{margin-left:0} } /* --- Boilerplate (ab 0.24.0) --------------------------------------------- „Über …"-Absätze am Ende einer Pressemitteilung, Baustein „Boilerplate". Kleiner und grauer als der Text, durch eine feine Linie abgesetzt. Mehrere hintereinander bilden einen Block: nur der erste trägt die Linie. Die Schriftgröße sitzt am Behälter, weil `body.t-single .prose p` die Absätze auf `inherit` setzt und mit (0,2,2) jede schwächere Regel schlägt. Deshalb auch `body` vor den Absatzregeln: gleiche Spezifität, später im Stylesheet, gewinnt. (Isa, 28.09.2026) */ .prose .boilerplate{font-size:14px;line-height:1.6;color:var(--soft);margin-top:40px;padding-top:22px;border-top:1px solid var(--line)} .prose .boilerplate+.boilerplate{margin-top:18px;padding-top:0;border-top:0} body .prose .boilerplate p{font-size:inherit;color:inherit;line-height:inherit;margin:0 0 .6em} body .prose .boilerplate p:last-child{margin-bottom:0} .prose .boilerplate h3{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--copy);margin:0 0 4px;letter-spacing:0} /* --- Suche in der Kopfleiste (ab 0.24.9) ---------------------------------- Wunsch des Gremiums: Suche besser auffindbar. Entwurf „Wireframe Suche Navigation v2", entschieden mit Isa am 30.09.2026 (Variante „Lupe fährt aus"). Verhalten in js/theme.js, Abschnitt „Suche in der Leiste". Rechner: Lupe links neben Spenden, das Feld faehrt nach links auf, das Menue blendet waehrenddessen aus. Handy: Lupe neben dem Burger, das Feld klappt als Band unter der Leiste auf. --------------------------------------------------------------------------- */ :root{--ease-such:cubic-bezier(.2,.8,.2,1);--dauer-such:.38s} /* Das Theme setzt `form{display:grid;gap:18px}` fuer das Kontaktformular. Im Kopf wuerde dieser Abstand Symbol und Text auseinanderschieben. */ .sucher form{gap:0} .sucher input,.suchband input{width:auto;-webkit-appearance:none;appearance:none} .sucher input::-webkit-search-cancel-button,.suchband input::-webkit-search-cancel-button{display:none} /* Lupe: gleiche gerenderte Strichstaerke wie das Haus (1,4 px). 18 px Anzeige bei viewBox 24 → stroke-width 24 × 1,4 ÷ 18 ≈ 1.87 */ .lupe{flex:none;display:inline-flex;align-items:center;justify-content:center; width:40px;height:40px;padding:0;border:0;border-radius:var(--r-pill); background:transparent;color:var(--pine-deep);cursor:pointer;transition:background .2s} .lupe svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.87;stroke-linecap:round;stroke-linejoin:round;display:block} .lupe:hover,.lupe[aria-expanded="true"]{background:var(--fresh)} .lupe:focus-visible,.zu:focus-visible{outline:3px solid var(--pine);outline-offset:2px} .zu{flex:none;display:none;align-items:center;justify-content:center;width:30px;height:30px; border:0;border-radius:var(--r-pill);background:transparent;color:var(--soft);cursor:pointer;padding:0} .zu svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round} .zu:hover{color:var(--pine-deep);background:rgba(1,50,32,.06)} /* Rechner: Feld faehrt aus der Lupe nach links. Rechte Kante bleibt stehen, die Breite setzt theme.js als --suchbreite (bis kurz vor das Logo, max. 420). */ .sucher{position:relative;flex:none;width:40px;height:40px} .sucher form{position:absolute;right:0;top:0;height:40px;width:40px;display:flex;align-items:center; border-radius:var(--r-pill);border:1.5px solid transparent;background:transparent; transition:width var(--dauer-such) var(--ease-such),background .25s,border-color .25s,box-shadow .25s} .sucher input{flex:0 1 0;width:0;min-width:0;border:0;background:transparent;padding:0;height:37px;font-size:15px;opacity:0;visibility:hidden;transition:opacity .2s} .sucher input:focus{outline:none} .sucher .lupe{width:37px;height:37px;margin-left:auto} .navbar.such-offen .sucher form{width:var(--suchbreite,400px);background:#fff;border-color:var(--moss);box-shadow:var(--sh-1)} .navbar.such-offen .sucher input{flex:1 1 auto;padding:0 0 0 18px;opacity:1;visibility:visible;transition-delay:.12s} .navbar.such-offen .sucher .zu{display:inline-flex} .navbar.such-offen .sucher .lupe{background:transparent} .navbar.such-offen .sucher .lupe:hover{background:var(--fresh)} nav{transition:opacity .22s,visibility .22s} .navbar.such-offen nav{opacity:0;visibility:hidden} /* Logo darf nie gestaucht werden, Menuewoerter brechen nicht um. Ohne diese Zeilen zog die Lupe zwischen 861 und ~900 px das Logo zusammen und „Über uns" rutschte zweizeilig (gemessen 30.09.2026). */ /* Ab 561 px: Unterhalb waechst das Logo bewusst mit (0.24.15, Regel bei 560 px weiter oben). Ohne diese Grenze haette diese spaeter notierte Regel die Handy-Regel gleicher Spezifitaet ueberschrieben. */ @media(min-width:561px){.brand{flex:none}} nav a{white-space:nowrap} @media(min-width:861px) and (max-width:960px){ .navbar{gap:12px} nav ul{gap:14px} .navmeta{gap:10px} } /* Such-Band (Handy). Liegt ueber dem Inhalt statt ihn zu verschieben, mit eigener Glasflaeche wie der Kopf. */ .mlupe{display:none} .suchband{position:absolute;left:0;right:0;top:100%;display:grid;grid-template-rows:0fr; transition:grid-template-rows var(--dauer-such) var(--ease-such); background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4)} .suchband>.innen{overflow:hidden;min-height:0} /* Abstand oben und unten ausbalanciert (Isa, 30.09.2026). Unten etwas weniger als oben, weil die Links 4 px Unterstrich-Luft mitbringen. */ .suchband .zeile{max-width:1140px;margin:0 auto;padding:18px clamp(18px,4vw,28px) 16px; opacity:0;transform:translateY(-6px);transition:opacity .25s,transform var(--dauer-such) var(--ease-such)} header.band-offen .suchband{grid-template-rows:1fr;box-shadow:0 18px 30px -18px rgba(0,0,0,.18)} header.band-offen .suchband .zeile{opacity:1;transform:none;transition-delay:.08s} .suchband form{display:flex;gap:10px;align-items:center} .suchband input{flex:1 1 auto;min-width:0;font-size:17px;padding:14px 18px;border-radius:var(--r-pill);background:#fff} .suchband .btn{flex:none;border-radius:var(--r-pill)} /* Haeufig gesucht als schlichte Textlinks statt heller Pillen (Isa, 30.09.2026). Unterstrich beim Zeigen hellgruen wie in der Hauptnavigation. */ .suchband .haeufig{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin-top:12px;font-size:13px;color:var(--soft)} .suchband .haeufig span{margin-right:-4px} .suchband .haeufig a{color:var(--pine-deep);text-decoration:none;font-weight:600;padding:2px 0;border-bottom:2px solid transparent;transition:border-color .2s} .suchband .haeufig a:hover,.suchband .haeufig a:focus-visible{border-color:var(--fresh)} @media(max-width:860px){ .navmeta{gap:4px} .sucher{display:none} .mlupe{display:inline-flex} .navbar.such-offen nav{opacity:1;visibility:visible} /* Schrift 16 px: darunter zoomt das iPhone beim Antippen in die Seite. */ .suchband .zeile{padding:14px 22px 12px} .suchband input{font-size:16px;padding:12px 16px} .suchband .btn{padding:12px 18px} } @media(prefers-reduced-motion:reduce){ .sucher form,.suchband,.suchband .zeile,nav{transition:none!important} } /* --- Handy-Anpassungen Chronik und Aktuelles (ab 0.24.11) ----------------- Isa, 30.09.2026. Grenze 860 px wie die Kopfleiste: Ab dort steht der Aufmacher untereinander und sieht aus wie eine Kachel. --------------------------------------------------------------------------- */ .nur-handy{display:none} .nach-aufmacher{padding-top:0} @media(max-width:860px){ /* Aufmacher auf Chronik und Aktuelles nur am Rechner. Auf Aktuelles steht der Beitrag dafuer als Kachel an seinem zeitlichen Platz (.nur-handy). */ .nur-rechner{display:none} .nur-handy{display:contents} .nach-aufmacher{padding-top:var(--sec-pt)} } /* Jahreszahl der Chronik bleibt auf dem Handy oben stehen, wie am Rechner. Sie klebt unter der Kopfleiste, bis ihre Jahresgruppe zu Ende ist; dann schiebt die naechste Gruppe ihre Zahl nach. Die Hoehe der Kopfleiste setzt theme.js als --kopf-h, weil sie mit dem Logo zwischen 560 und 860 px wechselt. Leiste ueber die volle Breite mit derselben Glasflaeche wie der Kopf, damit die Kacheln darunter durchlaufen, ohne den Text zu stoeren. */ @media(max-width:820px){ .yearmark{position:sticky;top:var(--kopf-h,78px);z-index:3; margin-inline:calc(-1 * clamp(22px,4vw,28px));padding:10px clamp(22px,4vw,28px); background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4)} .yearmark .y{font-size:28px} .yeargroup[id]{scroll-margin-top:calc(var(--kopf-h,78px) + 8px)} } /* --- Team & Gremien auf dem Handy (ab 0.24.12) --------------------------- Isa, 30.09.2026, Entwurf „Wireframe Team Handy v1", Variante 2. Bis 860 px zwei Karten je Reihe. Die Karte dreht nicht, ein Tipp oeffnet unter der Reihe eine Sprechblase mit dem Kurztext (theme.js). Am Rechner bleibt die Klappkarte unveraendert. --------------------------------------------------------------------------- */ .m-plus,.sprechblase{display:none} @media(max-width:860px){ /* Zeilenabstand ueber die Karten statt ueber `gap`: Eine geschlossene Sprechblase ist eine eigene Rasterzeile, und `gap` wuerde an ihr doppelt greifen (24 statt 12 px zwischen den Reihen, gemessen im Entwurf). */ .people{grid-template-columns:1fr 1fr;column-gap:12px;row-gap:0} .people>.person{margin-bottom:12px} .flip-card{perspective:none} .flip-front,.flip-card .flip-front{border-radius:14px} .person .flip-front .cap{padding:12px 12px 11px} .person .flip-front h3{font-size:14px;line-height:1.2} .person .flip-front .role{font-size:9.5px;letter-spacing:.09em;line-height:1.3;margin-top:3px} .flip-front .flip-hint{display:none} .m-plus{position:absolute;top:9px;right:9px;z-index:2;width:26px;height:26px;border-radius:var(--r-pill); background:rgba(1,50,32,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff; display:flex;align-items:center;justify-content:center;transition:transform .3s cubic-bezier(.2,.8,.2,1)} .m-plus svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round} .person.blase-offen .m-plus{transform:rotate(45deg);background:rgba(1,50,32,.7)} /* Kein Rahmen um die offene Karte (Isa, 30.09.2026: wirkte zu schwer). Welche Person offen ist, zeigen das × und der Pfeil der Sprechblase. Auch das graue Aufblitzen beim Antippen in Safari bleibt weg. */ .flip-trigger{-webkit-tap-highlight-color:transparent} /* Die Karte dreht auf dem Handy nie, auch wenn die Klasse haengen bliebe. */ .flip-card.flipped .flip-inner{transform:none} .flip-card.flipped .flip-front{opacity:1;visibility:visible;pointer-events:auto} .flip-card.flipped .flip-back{opacity:0;visibility:hidden} .sprechblase{display:grid;grid-column:1/-1;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.2,.8,.2,1)} .sprechblase>div{overflow:hidden;min-height:0} .sprechblase.offen{grid-template-rows:1fr} .blase-text{position:relative;background:#f4f8f0;border-radius:14px;padding:16px 16px 18px;margin:8px 0 12px;font-size:14px;line-height:1.55;color:var(--copy)} .blase-text::before{content:"";position:absolute;top:-8px;left:var(--pfeil,25%);width:16px;height:16px;background:#f4f8f0;transform:translateX(-50%) rotate(45deg);border-radius:3px} .blase-text h3{position:relative;font-family:var(--display);font-size:16px;font-weight:700;color:var(--pine-deep);line-height:1.25} .blase-text .role{display:block;margin:3px 0 8px;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--moss)} .blase-text p{margin:0} } @media(max-width:860px) and (prefers-reduced-motion:reduce){ .sprechblase,.m-plus{transition:none} } /* --- Spendenkasten auf dem Handy ohne Kopierknoepfe (ab 0.24.14) ---------- Isa, 30.09.2026: Auf dem Handy markiert man den Text einfach selbst. Gilt bis 860 px und auf allen Touch-Geraeten ohne Maus (auch Tablets). `user-select:all`: Ein Tippen markiert den ganzen Wert. Ohne das griffe das Handy bei der IBAN nur einen Vierer-Block zwischen zwei Leerzeichen. */ @media (max-width:860px), (hover:none){ .kontorow .copybtn{display:none} .kontorow .v{padding-right:0} .kontorow .v,.kontorow .v .mono{-webkit-user-select:all;user-select:all} } /* --- Hellgruene Unterstreichung naeher am Wort (ab 0.24.16) -------------- Isa, 30.09.2026: Ueberall, wo der hellgruene Strich unter einem Wort steht, sass er zu weit weg. Ursache: Diese Links sind Inline-Bloecke und erben die Zeilenhoehe des Fliesstexts (1,65). Unter der Schrift liegt dadurch ein halber Zeilenabstand, dazu kam der Innenabstand. Der Strich ist ein unterer Rahmen und sitzt am Ende dieses Kastens, nicht an der Schrift. Jetzt: enge Zeilenhoehe und 2 px Innenabstand, gemessen rund 2 bis 3 px zwischen Schrift und Strich statt vorher 4 bis 7 px. Der Abstand zwischen den Menuepunkten bleibt gleich, er wandert in den Aussenabstand. Gilt fuer: Textlinks („Mehr dazu →"), einzeln stehende Links im Text, Hauptnavigation am Rechner und im Handy-Menue, „Haeufig gesucht". */ .textlink, .prose.inhalt p>a:only-child:not(.btn):not(.textlink):not(.wp-block-button__link):not(.org):not(.card), .prose.inhalt p.hint a:not(.btn):not(.textlink):not(.wp-block-button__link):not(.org):not(.card){line-height:1.25;padding-bottom:2px} nav a,nav a.home{line-height:1.25;padding:4px 0 2px;margin-bottom:2px} .submenu a{margin-bottom:0} .suchband .haeufig a{line-height:1.25;padding:0 0 2px} @media(max-width:860px){ nav a,nav a.home{padding:7px 0 2px;margin-bottom:5px} .submenu a{padding:5px 0;margin-bottom:0} }