/* ═══════════════════════════════════════════════════════════════════════════ * ⚠⚠ ZU JEDER BREITENREGEL IN DIESER DATEI * * Elementor setzt Breiten seinerseits mit `!important`. Eine Breitenregel ohne * `!important` bleibt hier wirkungslos — auch mit drei Klassen Spezifitaet. * Das ist in dieser Uebertragung viermal passiert (Lesespalte, Geschichten- * Rahmen, Teaser-Baender, Textspalte der Startseite) und sieht jedes Mal wie * ein Selektorfehler aus: die Klasse steht im HTML, die Regel steht in der * Datei, der berechnete Wert bleibt Elementors eigener. * * Zwei weitere Fallstricke, die dabei Zeit gekostet haben: * · `calc(100% - X)` rechnet gegen den Elternteil, der oft schon Elementors * boxed_width traegt. Fuer Fensterbreiten `100vw` nehmen. * · `.e-con-inner` ist nicht immer Kind: in Schleifen-Elementen liegt der * Band-Behaelter dazwischen, ein `>` laesst die Regel ins Leere laufen. * ═══════════════════════════════════════════════════════════════════════════ */ /* Theme Name: Kriegsdienstverweigerer. Unsere Geschichten Theme URI: https://www.kriegsdienstverweigerer-geschichten.de Description: Child theme for www.kriegsdienstverweigerer-geschichten.de (Frieden wagen e.V.). Marker kdv per docs/adr/0015 — an exception to the TLD-suffix convention of docs/adr/0003. The design follows the Gestaltungskatalog derived from the Jimdo original, NOT the .org/.net design system. Author: Achim Rosenhagen Author URI: https://achimrosenhagen.de Template: hello-elementor Version: 0.1.0 Text Domain: frieden-wagen-kdv Requires PHP: 8.4 License: GPL-2.0-or-later */ /* --------------------------------------------------------------------------- * Kopfbalken: das Logo darf nicht schrumpfen * * Unter 774 px steht der Klappknopf neben dem Logo. Der Behaelter ist * flex/nowrap, und Elementors Bild-Widget traegt flex-shrink: 1 — gemessen bei * 375 px schrumpfte das Logo dadurch auf 158x30 statt der im Bestand * gemessenen 233x44; das Bild folgt per max-width: 100%. * * Die Einstellung _flex_shrink im Widget-JSON greift nicht, deshalb steht die * Regel hier — Gestaltung gehoert ohnehin ins Theme. * ------------------------------------------------------------------------- */ .elementor-location-header .elementor-widget-image { flex-shrink: 0; } /* --------------------------------------------------------------------------- * Hauptnavigation: der aktive Eintrag ist unterstrichen * * Im Bestand traegt der Eintrag der gerade gezeigten Seite eine Unterstreichung * (im Bildschirmabzug von / deutlich an „Startseite" zu sehen). Elementors * Menue-Widget setzt sie nicht; WordPress markiert den Eintrag aber korrekt mit * current-menu-item. * * ⚠ Dazu der Fokuszustand, den der Bestand NICHT hat: er setzt * `outline-style: none` und ist damit mit der Tastatur unbedienbar. Das ist eine * gewollte Abweichung (Gestaltungskatalog 6a, Punkt 6) und gehoert in die * Abweichungsliste, nicht wegoptimiert. * ------------------------------------------------------------------------- */ .elementor-location-header .elementor-nav-menu .current-menu-item > a { text-decoration: underline; } .elementor-location-header .elementor-nav-menu a:focus-visible { outline: 2px solid #ffffff; outline-offset: -4px; } /* --------------------------------------------------------------------------- * Uebersichtstitel der drei Archivseiten * * Der Titel kommt aus dem Shortcode kdv_archivtitel (nicht aus Elementors * theme-archive-title, das den Taxonomienamen voranstellt). Der Shortcode gibt * nur das Markup aus — die Gestaltung steht hier, gemessen am Bestand: * Playfair Display 700, lila auf weissem Grund, zentriert, 44 px. * ------------------------------------------------------------------------- */ .kdv-uebersichtstitel { margin: 0; color: #581462; font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: 44px; line-height: 1.3; text-align: center; /* Der Bestand trennt den Titel („Kriegs-/dienstverweigerern"); ohne Silbentrennung bricht er eine Zeile spaeter und an anderer Stelle. */ hyphens: auto; } @media (max-width: 1280px) { .kdv-uebersichtstitel { font-size: 28px; } } /* --------------------------------------------------------------------------- * Bilder in den zweispaltigen Baendern der Startseite * * Gemessen am Bestand bei 1900 px: das Bild fuellt seine halbe Spalte randlos * (x=0, Breite 950) UND deren volle Hoehe (1044 px), es wird dabei beschnitten * — object-fit: cover. Ohne diese Regel behaelt das Bild sein eigenes * Seitenverhaeltnis, endet nach 535 px und laesst darunter Lila stehen. * ------------------------------------------------------------------------- */ .kdv-spaltenbild, .kdv-spaltenbild .elementor-widget-container, .kdv-spaltenbild figure, .kdv-spaltenbild figure > a { height: 100%; width: 100%; margin: 0; } /* ⚠⚠ Das Bild wird absolut gestellt, damit es die Hoehe der Spalte NICHT mitbestimmt. Mit `height: 100%` im Fluss traegt ein hochformatiges Bild seine eigene Hoehe in das Band: das zugeschnittene 467x1500-Bild der Startseite dehnte seine Spalte auf 3017 px statt der im Bestand gemessenen 1041 — und riss den Text daneben mit auf. Die Hoehe kommt aus der Textspalte, das Bild fuellt, was da ist, und wird beschnitten. */ .kdv-spaltenbild .elementor-widget-container, .kdv-spaltenbild figure { position: relative; overflow: hidden; } .kdv-spaltenbild img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; } /* --------------------------------------------------------------------------- * Geschichten-Detailseiten: Grundtypografie * * Diese Seiten laufen NICHT ueber Elementor, sondern als Beitragsinhalt durch * hello-elementors single-Vorlage. Das Theme setzte dafuer nichts — gemessen am * 31.08.2026 lief der Fliesstext in `-apple-system` mit 16 px statt in Mukta mit * 20 px, und die Ueberschrift stand in `rgb(51,51,51)` statt im Lila des * Bestands. Die Marken lagen die ganze Zeit in tokens.css, nur wandte sie * niemand auf den Inhalt an. * * Gemessen am Bestand bei 1900 px Fensterbreite: * Rahmen 1440 px, zentriert (x=230) * Ueberschrift 1320 px breit (x=290), Playfair Display 700, #581462, 32 px * Fliesstext 730 px breit (x=585), Mukta 400, #323335, 20/32 px * * Der Anker ist die Beitragsart am
; Elementor-Seiten tragen sie nicht * und bleiben unberuehrt. * ------------------------------------------------------------------------- */ /* ⚠⚠ `max-width` braucht hier `!important`: hello-elementor setzt die Breite des
seinerseits staerker, und die Regel blieb wirkungslos. Sichtbar war das nur an EINEM Wert — der Innenabstand griff (1140 - 120 = 1020), die Breite nicht (1140 statt 1440). Eine halb wirkende Regel sieht aus wie eine wirkende. Derselbe Befund wie bei .kdv-lesespalte. Der Bestand staffelt die Breite: gemessen 1280 bei 1440 px Fensterbreite und 1440 bei 1900 px, der Titel darin jeweils 120 px schmaler (1160 bzw. 1320). Das ist `Fenster - 160`, gedeckelt bei 1440 — kein fester Wert. */ .kdv_geschichte.site-main { /* Der Bestand setzt 80 px zwischen Kopfbalken und Titel; ohne das klebt der Titel am Balken — gemessen 8 px, die aus dem margin-top der Ueberschrift stammen. Der Abstand gehoert an den Rahmen, nicht an die Ueberschrift: sonst haengt er davon ab, womit die Seite beginnt. */ padding-block-start: 80px; width: calc(100% - 160px) !important; max-width: 1440px !important; margin-inline: auto; padding-inline: 60px; box-sizing: border-box; font-family: var(--kdv-schrift-text); color: var(--kdv-text-auf-hell); } .kdv_geschichte .page-content > *:not(.kdv-schlussband) { /* Die Lesespalte ist schmaler als der Rahmen und sitzt mittig darin. ⚠ Das Schlussband ist ausgenommen: es laeuft ueber die volle Fensterbreite und traegt die Lesespalte in sich. Ohne die Ausnahme begrenzte diese Regel das Band auf 730 px, der Text darin wurde auf Breite 0 gequetscht und das Band 6097 statt 752 px hoch. */ max-width: 730px; margin-inline: auto; } .kdv_geschichte .page-content p, .kdv_geschichte .page-content li { font-family: var(--kdv-schrift-text); font-weight: var(--kdv-staerke-text); font-size: 20px; line-height: 32px; color: var(--kdv-text-auf-hell); } /* Absatzabstand * * Der Bestand kennt keine Absatzabstaende: gemessen `margin: 0px/0px` bei sechs *

und 89
. Sein ganzer Weissraum steckt in Leerzeilen, eine davon ist * genau eine Zeilenhoehe = 32 px. Der uebertragene Text hat stattdessen 34 * echte Absaetze — richtig so, denn
als Gestaltungsmittel ist weder * zugaenglich noch pflegbar —, aber mit 14,4 px Abstand standen sie deutlich * enger als im Bestand: die Seite war 5778 statt 6880 px hoch. * * Die Uebertragung tauscht also die Technik und behaelt das Mass. */ .kdv_geschichte .page-content p { margin-block: 0 32px; } .kdv_geschichte .page-content p:last-child { margin-bottom: 0; } .kdv_geschichte .page-content h1, .kdv_geschichte .page-content h2, .kdv_geschichte .page-content h3, .kdv_geschichte .page-content h4 { /* ⚠ NUR der Seitentitel laeuft ueber den ganzen Rahmen. Die Zwischenueberschriften im Text („Musterung", „Antrag auf KDV" …) stehen im Bestand in derselben 730er Lesespalte wie der Absatz darunter — gemessen x=585 b=730 gegen x=290 b=1320. Pauschal auf Rahmenbreite gesetzt standen 41 Zwischenueberschriften auf 22 Seiten falsch, und zwar breiter als der Text, den sie ueberschreiben. Der Titel wird ueber :first-child unterschieden — er ist im ausgelieferten Markup das erste Kind von .page-content. */ max-width: 730px; margin-inline: auto; font-family: var(--kdv-schrift-ueberschrift); font-weight: var(--kdv-staerke-ueberschrift); color: var(--kdv-lila); line-height: var(--kdv-zeilenhoehe-ueberschrift); } .kdv_geschichte .page-content h1 { font-size: 44px; } .kdv_geschichte .page-content h2 { font-size: 36px; } .kdv_geschichte .page-content h3 { font-size: 32px; } .kdv_geschichte .page-content h4 { font-size: 24px; } /* Der Titel laeuft ueber den vollen Rahmen — und er kann ZWEIZEILIG sein: „Martin Hoefflin-Gluenkin (geb. 1955):" und der Untertitel darunter stehen im Bestand beide mit 1320 px, erst die naechste Ueberschrift („Nachbemerkung") steht in der 730er Lesespalte. Mit nur :first-child stand die zweite Titelzeile 590 px zu schmal. */ .kdv_geschichte .page-content > :is(h1, h2, h3, h4):first-child, .kdv_geschichte .page-content > :is(h1, h2, h3, h4):first-child + :is(h1, h2, h3, h4) { max-width: none; } @media (max-width: 1280px) { .kdv_geschichte.site-main { padding-inline: 20px; } .kdv_geschichte .page-content p, .kdv_geschichte .page-content li { font-size: 18px; line-height: 28px; } .kdv_geschichte .page-content h1 { font-size: 28px; } .kdv_geschichte .page-content h2 { font-size: 24px; } .kdv_geschichte .page-content h3 { font-size: 22px; } } /* --------------------------------------------------------------------------- * Textseiten ohne Elementor (Datenschutzerklaerung aus build-rechtstexte.php) * Massstab ist das Impressum (Elementor-Seite aus dem Bestand). * ------------------------------------------------------------------------- */ .site-main.type-page { padding-block: 80px; } .site-main.type-page > .page-header, .site-main.type-page > .page-content { max-width: var(--kdv-textspalte); margin-inline: auto; } .site-main.type-page .entry-title, .site-main.type-page .page-content :is(h2, h3, h4) { font-family: var(--kdv-schrift-ueberschrift); font-weight: var(--kdv-staerke-ueberschrift); line-height: var(--kdv-zeilenhoehe-ueberschrift); color: var(--kdv-lila); hyphens: auto; } .site-main.type-page .entry-title { font-size: var(--kdv-h1); margin-block: 0 0.5em; } .site-main.type-page .page-content h2 { font-size: var(--kdv-h2); margin-block: 1.5em 0.5em; } .site-main.type-page .page-content :is(h3, h4) { font-size: var(--kdv-h3); margin-block: 1.2em 0.4em; } .site-main.type-page .page-content :is(p, li) { font-family: var(--kdv-schrift-text); font-weight: var(--kdv-staerke-text); font-size: var(--kdv-p); line-height: var(--kdv-zeilenhoehe-text); color: var(--kdv-text-auf-hell); } .site-main.type-page .page-content :is(p, ul, ol) { margin-block: 0 1em; } .site-main.type-page .page-content :is(ul, ol) { padding-inline-start: 1.25em; } .site-main.type-page .page-content li { line-height: var(--kdv-zeilenhoehe-liste); margin-block-end: 0.4em; } .site-main.type-page .page-content a { color: var(--kdv-text-auf-hell); text-decoration: underline; overflow-wrap: anywhere; } @media (max-width: 1280px) { .site-main.type-page { padding-inline: 20px; } } /* --------------------------------------------------------------------------- * Lesespalte der Inhaltsseiten * * Gemessen am Bestand bei 1900 px (/hintergruende/): der Rahmen ist 1320 px * breit, der Fliesstext darin nur 1190 und mittig gesetzt. Der Innenabstand des * Elementor-Containers stellt das nicht her — er wirkt am boxed-Behaelter nicht, * derselbe Befund wie bei den Teaser-Baendern. * ------------------------------------------------------------------------- */ /* ⚠⚠ Ohne `!important` bleibt die Regel wirkungslos, auch mit drei Klassen Spezifitaet: Elementor setzt die Breite seinerseits mit `!important`. Die Klasse stand im HTML, der berechnete Wert blieb `max-width: 100%` und die Spalte 1320 px breit — das sieht wie ein Selektorfehler aus und ist keiner. */ .elementor-element.elementor-widget.kdv-lesespalte { max-width: 1190px !important; margin-inline: auto; width: 100%; } /* --------------------------------------------------------------------------- * Klappmenue der Hauptnavigation * * Gemessen am Bestand bei 1900 px mit geoeffnetem Klappmenue: der Kasten ist * 211 px breit (x=156) und die Eintraege brechen darin um — „Wehr- bzw. * Waffendienstverweigerer DDR" ist 92 px hoch, also dreizeilig. Ohne die * Breitenbegrenzung laeuft der Eintrag einzeilig ueber die halbe Fensterbreite. * * Die Unterstreichung des gezeigten Eintrags ist aus dem Bildschirmabzug * ABGELESEN, nicht gemessen: das Bestands-CSS liegt extern und ist im Abzug * nicht enthalten, der Zeigezustand daher nicht nachmessbar. * ------------------------------------------------------------------------- */ .elementor-location-header .elementor-nav-menu--dropdown { width: 211px; min-width: 211px; /* Der Bestand setzt den Kasten mit einem weichen Schlagschatten unter das Kopfband. Die Schattenwerte sind ABGELESEN, nicht gemessen — das Bestands-CSS liegt extern und ist im Abzug nicht enthalten. */ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); } .elementor-location-header .elementor-nav-menu--dropdown > ul, .elementor-location-header .elementor-nav-menu--dropdown ul { /* Ohne das ragte der weisse Kasten oben in das lila Kopfband hinein; im Bestand beginnt er an dessen Unterkante. */ margin-top: 0; padding-block: 8px; } .elementor-location-header .elementor-nav-menu--dropdown a { white-space: normal; line-height: 1.5; } /* ⚠⚠ Elementors eigener Zeigezustand faerbt den Eintrag dunkelgrau ein — auch dann, wenn `background_color_dropdown_hover` auf Weiss steht: der Wert im Baum wird von Elementors Vorgabe ueberschrieben. Der Bestand laesst den Grund weiss und zieht stattdessen eine Linie unter den ganzen Eintrag. Deshalb `!important`; ohne das bleibt der graue Kasten. */ .elementor-location-header .elementor-nav-menu--dropdown a:hover, .elementor-location-header .elementor-nav-menu--dropdown a:focus, .elementor-location-header .elementor-nav-menu--dropdown a.elementor-item-active, .elementor-location-header .elementor-nav-menu--dropdown a.highlighted { background-color: #ffffff !important; color: #581462 !important; border-bottom: 1px solid #323335; text-decoration: none; } .elementor-location-header .elementor-nav-menu--dropdown a { border-bottom: 1px solid transparent; } /* --------------------------------------------------------------------------- * Bildausschnitt abweichend von der Bildmitte * * Der Bestand setzt object-position; gemessen auf der Startseite „43% 8%" beim * zugeschnittenen dritten Bild. Elementor kennt dafuer keinen Einstellungs- * schluessel — ein erfundener faellt still weg —, deshalb eine Klasse je * gemessener Position. build-kdv-startseite.php warnt, wenn eine Position * auftaucht, fuer die hier keine Regel steht. * ------------------------------------------------------------------------- */ .kdv-bildpos-43-8 img { object-position: 43% 8%; } /* --------------------------------------------------------------------------- * Hoehe der Vollbreitenbaender * * ⚠⚠ Elementors `min_height` am Behaelter kommt nicht in der erzeugten CSS an. * Der Wert steht im Baum (min_height: 433px), das Band war trotzdem 0 px * hoch, sobald das Bild absolut gestellt ist und keine Hoehe mehr beitraegt. * * Die Hoehen sind am Bestand gemessen und FEST, nicht proportional: bei 1440 * wie bei 1900 px Fensterbreite dieselben Werte. build-kdv-startseite.php warnt, * wenn eine Hoehe auftaucht, fuer die hier keine Regel steht. * ------------------------------------------------------------------------- */ .kdv-bandhoehe-400 { min-height: 400px; } .kdv-bandhoehe-433 { min-height: 433px; } .kdv-bandhoehe-497 { min-height: 497px; } .kdv-bandhoehe-1000 { min-height: 1000px; } /* ⚠ `height: 100%` am Bild-Widget hilft hier NICHT: sein Behaelter hat nur eine Mindesthoehe, und auf `min-height` bezieht sich kein Prozentwert. Das Band blieb dadurch 0 px hoch, obwohl die Klasse dran war und die Regel griff. Gestreckt wird deshalb ueber Flex — das kennt keine solche Einschraenkung. */ [class*="kdv-bandhoehe-"] { display: flex; align-items: stretch; } [class*="kdv-bandhoehe-"] > * { flex: 1 1 auto; min-height: inherit; } /* --------------------------------------------------------------------------- * Absatzabstand in den Elementor-Textfeldern * * Derselbe Befund wie bei den Geschichten-Detailseiten, hier fuer die ueber * Elementor gebauten Seiten: der Bestand kennt keine Absatzabstaende * (`margin: 0px/0px`, gemessen), sein Weissraum steckt in Leerzeilen — eine * davon ist genau eine Zeilenhoehe, 32 px. Die uebertragenen Texte haben echte * Absaetze, standen mit Elementors 14,4 px aber deutlich enger. * * Auf der Startseite verkuerzte das die Textspalte und damit das Band: die * Bildspalte daneben war 894 statt der im Bestand gemessenen 1041 px hoch, und * weil das Bild sie mit object-fit: cover fuellt, war ein anderer Ausschnitt zu * sehen. Ein Absatzabstand, der einen Bildausschnitt verschiebt. * ------------------------------------------------------------------------- */ .elementor-widget-text-editor p { margin-block: 0 32px; } .elementor-widget-text-editor p:last-child { margin-bottom: 0; } /* --------------------------------------------------------------------------- * Gestaffelte Rahmenbreiten der Uebersichtsseiten * * ⚠⚠ Der Bestand arbeitet RELATIV, nicht mit festen Pixeln. Am Bestand * gemessen (Ueberschrift / Fliesstext): * * 1280 px Fenster -> 860 / 650 * 1440 px -> 1160 / 1030 * 1680 px -> 1320 / 1190 * 1900 px -> 1320 / 1190 * * Also min(Fenster - 280, 1320) fuer die Ueberschrift und 130 px weniger * fuer den Text. Elementors `boxed_width` kann nur einen festen Wert — mit * 1160/1030 stimmte die Seite bei 1440 px exakt und lag bei 1900 px um * 160 px daneben. Das ist die Falle hinter mehreren „exakten" Treffern * dieser Uebertragung: gemessen wurde bei EINER Breite. * * `!important`, weil Elementor die Breite seinerseits so setzt. * ------------------------------------------------------------------------- */ @media (min-width: 1281px) { .elementor-location-archive .elementor-element-kdvarchivk > .e-con-inner, .kdv-startband > .e-con-inner { /* ⚠ 100vw, NICHT 100%: der Elternteil traegt schon Elementors boxed_width, die Rechnung liefe sonst gegen einen bereits begrenzten Wert — gemessen 1040 statt 1160 bei 1440 px. */ width: calc(100vw - 280px) !important; max-width: 1320px !important; } /* ⚠ KEIN Kind-Kombinator: .e-con-inner ist Enkel von .e-loop-item, nicht Kind — dazwischen liegt der Band-Behaelter. Mit „>" blieb die Regel wirkungslos und 22 Teaser standen weiter 80 px zu weit rechts. Die Baender der Dachseite tragen dieselbe Lesespalte wie die Teaser (1190), nicht den breiteren Rahmen des Archivkopfs (1320): gemessen Ueberschrift x=355 b=1190 und Knopf x=1409. */ .elementor-loop-container .e-loop-item .e-con-inner, .kdv-dachband > .e-con-inner { width: calc(100vw - 410px) !important; max-width: 1190px !important; } /* Die schmale Lesespalte der Artikelseiten: am Bestand gemessen x=585 b=730 bei 1900 px — dort steht durchgehender Fliesstext, keine Teaser. */ .elementor-element.elementor-widget.kdv-lesespalte-schmal { max-width: 730px !important; margin-inline: auto; width: 100%; } } /* --------------------------------------------------------------------------- * Textausrichtung IM Knopf * * Der Bestand setzt `text-align: start`, Elementor `center`. Bei einzeiligen * Beschriftungen ist das unsichtbar — beim mehrzeiligen „Zurueck zur Uebersicht * persoenlicher Geschichten" nicht. Angeglichen statt in der Befundliste * stehengelassen: ein Unterschied, den man nur auf einer von 37 Seiten sieht, * ist trotzdem einer. * * ⚠ Das ist NICHT die Lage des Knopfes im Band — die steuert Elementors * `align` und ist davon unberuehrt. * ------------------------------------------------------------------------- */ .elementor-widget-button .elementor-button { text-align: start; } /* Knopfmasse: gemessen am Bestand 142x50 („Mitmachen!") und 136x50 * („Mehr lesen"); Elementors Vorgabe lieferte 128 bzw. 122 px Breite. */ .elementor-widget-button .elementor-button { padding-block: 15px; padding-inline: 31px; } /* --------------------------------------------------------------------------- * Textspalte der zweispaltigen Baender (Startseite) * * Am Bestand an vier Breiten gemessen (Spaltenbreite ist die halbe * Fensterbreite): * * Fenster Spalte Text * 1440 720 600 * 1680 840 720 * 1900 950 730 <- gedeckelt * * Also min(Spalte - 120, 730). Ohne den Deckel waechst der Text mit dem Fenster * weiter — gemessen 821 statt 730 px bei 1900 px, und weil das Band dadurch * flacher wird, aendert sich auch der sichtbare Ausschnitt des Bildes daneben. * ------------------------------------------------------------------------- */ @media (min-width: 1281px) { .kdv-textspalte > .e-con-inner, .kdv-textspalte > * { /* ⚠ `width: 100%` gehoert dazu: ohne das schrumpfen Ueberschrift und Knopf auf ihre Inhaltsbreite und werden dann von `margin: auto` mittig gesetzt — gemessen „Ueber diese Seite" 325 statt 730 px und beide Knoepfe um ueber 200 px verschoben. Die Regel machte die Seite an drei Stellen schlechter, waehrend sie die vierte richtigstellte. */ width: 100%; max-width: 730px !important; margin-inline: auto; } } /* --------------------------------------------------------------------------- * Knopf „Mehr lesen" auf den Hintergrundseiten * * Er sitzt rechtsbuendig — aber am Rand der 1190er Lesespalte, nicht am Rand * des 1320er Rahmens. Gemessen x=1409 gegen x=1474: 65 px, genau die halbe * Differenz der beiden Rahmenbreiten. * ------------------------------------------------------------------------- */ @media (min-width: 1281px) { .kdv-hgband .elementor-widget-button { width: calc(100vw - 410px); max-width: 1190px; margin-inline: auto; } } /* --------------------------------------------------------------------------- * Verlinkte Überschriften * * Auf der Dachseite /geschichten/ sind die Bandüberschriften Links und im * Bestand unterstrichen; auf /hintergruende/ sind dieselben Überschriften keine * Links und ohne Unterstreichung. Die Regel hängt deshalb am , nicht an der * Seite — so trifft sie genau die verlinkten und keine anderen. * * Elementors Überschriften-Widget setzt von sich aus keine Unterstreichung, * auch wenn ein Link hinterlegt ist. Der Link war da, man sah ihn nur nicht. * ------------------------------------------------------------------------- */ .elementor-widget-heading .elementor-heading-title > a, .elementor-widget-heading a .elementor-heading-title { text-decoration: underline; text-underline-offset: 0.12em; } /* --------------------------------------------------------------------------- * Links im Fließtext * * ⚠⚠ Elementors Standard-Linkfarbe ist rgb(204, 51, 102) — auf dem Lila dieser * Site ein miserabler Kontrast und stellenweise kaum zu lesen. Sie stand auf * jeder Seite, deren Textfeld keine eigene Linkfarbe mitbringt: die * Hintergrundseiten und die Geschichten. Keine der gemessenen Größen zeigt * das an — Position, Breite, Schriftgröße stimmten. * * Der Bestand färbt Links wie den umgebenden Text und unterstreicht sie: * * heller Grund (/impressum/) rgb(50, 51, 53), underline * dunkler Grund (/hintergruende/…, Geschichten) rgb(255, 255, 255), underline * * Beides zusammen ist `color: inherit` — deshalb steht hier eine Regel und * keine zwei Farben. Knöpfe und Navigation sind ausgenommen; sie bringen ihre * eigenen Farben mit. * ------------------------------------------------------------------------- */ .elementor-widget-text-editor a:not(.elementor-button), .kdv_geschichte .page-content a:not(.elementor-button), .elementor-widget-theme-post-content a:not(.elementor-button) { color: inherit; text-decoration: underline; text-underline-offset: 0.12em; } /* Absatzabstand nicht in Aufzählungen: die 32 px sind für Absätze im Fließtext * gedacht. In einer Liste stehen sie zwischen den Punkten und ziehen die * Aufzählung auseinander — im Bestand stehen die Punkte dicht. */ .elementor-widget-text-editor li p, .kdv_geschichte .page-content li p { margin-block: 0; } /* --------------------------------------------------------------------------- * Violettes Schlussband der Geschichten * * Der Bestand gliedert jede Geschichte in zwei Bänder: den Haupttext auf Weiß * und einen Schlussteil auf Violett mit Kurzbiografie, Veröffentlichungen, * Weblinks und dem Knopf „Zurück zur Übersicht". Gemessen bei Michael Schmid: * rgb(103, 58, 183), 752 px hoch. * * ⚠ Fünf der 22 Geschichten haben im Bestand KEIN solches Band — dort steht der * Schlussteil auf Weiß. Der Bestand ist an dieser Stelle uneinheitlich; das * Band wird deshalb je Beitrag gesetzt (bin/build-kdv-schlussband.php) und * nicht pauschal über alle. * * Das Band läuft über die volle Fensterbreite, sein Inhalt bleibt in der * Lesespalte — deshalb der negative Außenabstand. * ------------------------------------------------------------------------- */ .kdv-schlussband { margin-block: 60px 0; margin-inline: calc(50% - 50vw); padding-block: 60px; padding-inline: calc(50vw - 365px); background-color: var(--kdv-akzent-violett); color: var(--kdv-text-auf-lila); } /* ⚠⚠ Die Spezifitaet muss ueber der Grundtypografie liegen: `.kdv_geschichte .page-content p` sind drei Selektoren, `.kdv-schlussband p` nur zwei — die Bandfarbe wurde deshalb von der Textfarbe des Haupttextes ueberschrieben und der Text stand dunkelgrau auf Violett. Gemessen rgb(50,51,53) gegen die rgb(255,255,255) des Bestands. Schon wieder eine meiner eigenen Regeln, die die spaeter dazugestellte schlaegt. */ .kdv_geschichte .page-content .kdv-schlussband :is(p, li, h1, h2, h3, h4, strong, em) { color: var(--kdv-text-auf-lila); max-width: none; } /* Verweise IM Text des Bandes sind weiss wie der Text drumherum. */ .kdv_geschichte .page-content .kdv-schlussband a:not(.wp-block-button__link):not(.elementor-button) { color: var(--kdv-text-auf-lila); } /* Der Zurueck-Knopf ist WEISS mit dunkler Schrift — gemessen am Bestand rgb(50,51,53) auf rgb(255,255,255). Die Vorgabe lieferte das Gegenteil: weisse Schrift auf rgb(50,55,60). ⚠⚠ Diese Regel MUSS dieselbe Spezifitaet haben wie die Linkregel darueber, sonst gewinnt jene und faerbt auch den Knopftext weiss — weiss auf weiss, der Knopf war unsichtbar. Beim ersten Anlauf genau so passiert: eine Korrektur, die eine Stelle richtigstellt und die naechste ausloescht. */ .kdv_geschichte .page-content .kdv-schlussband :is(.wp-block-button__link, .elementor-button, .wp-element-button, .wp-block-button a) { background-color: var(--kdv-grund-hell); color: var(--kdv-text-auf-hell); text-decoration: none; } @media (max-width: 1280px) { .kdv-schlussband { padding-inline: 20px; } } /* Der Abstand zum Kopfbalken kommt vom Rahmen (padding-block-start), nicht vom * ersten Element — dessen eigener Aussenabstand wuerde sich addieren. */ .kdv_geschichte .page-content > *:first-child { margin-top: 0; } /* --------------------------------------------------------------------------- * Weißer Streifen zwischen Navigation und Inhalt * * ⚠⚠ Elementors Seiten-Wrapper (`div.elementor-`) bringt 16 px Innenabstand * oben mit. Auf Seiten, deren erstes Band lila ist, steht dieser Abstand als * weißer Streifen unter der Navigation — gemessen auf /hintergruende/texte/: * der Bestand hat dort direkt unter dem Kopf rgb(88,20,98), der Neubau * rgb(255,255,255). * * Auf Seiten mit weißem Titelband fiel es nicht auf, weil der Streifen dort * dieselbe Farbe hat wie das Band darunter. Ein Fehler, der nur auf einem Teil * der Seiten sichtbar ist — und deshalb im Einzelvergleich durchrutscht. * ------------------------------------------------------------------------- */ /* ⚠ Der Selektor muss die Klasse direkt treffen und `!important` tragen — Elementor setzt den Abstand selbst so. Ein Nachfahren-Selektor ueber

griff nicht, weil der Wrapper dort nicht direktes Kind ist. */ div.elementor.elementor-bc-flex-widget { padding-top: 0 !important; } /* --------------------------------------------------------------------------- * Silbentrennung in Überschriften * * Der Bestand setzt `hyphens: auto` — gemessen an der Bandüberschrift „Artikel * zur Wehrpflicht und Kriegsdienstverweigerung in der Bundesrepublik * Deutschland": dort 125 px hoch (drei Zeilen), bei `hyphens: manual` nur 83 * (zwei). Die langen Komposita dieser Site brechen ohne Trennung deutlich * später um, und das verschiebt jede Bandhöhe darunter. * * ⚠ Das ist kein Abstandsfehler, obwohl es sich als Höhendifferenz zeigt: die * Innenabstände waren exakt (21 px oben, 91 px unten), nur die Überschrift * war eine Zeile kürzer. * ------------------------------------------------------------------------- */ .elementor-widget-heading .elementor-heading-title, .kdv_geschichte .page-content :is(h1, h2, h3, h4), .kdv-uebersichtstitel { hyphens: auto; }