/* ============================================================ PRÜFMAGAZIN — BASIS (Ebene 2) Die Klassen, die auf JEDER Seite gleich sind. Bis jetzt lagen sie als Kopie in jeder einzelnen Seite — das war die Ursache für unsichtbare Texte, fehlende Abstände und tote Animationen, sobald eine Kopie entfernt wurde. LADEREIHENFOLGE (zwingend): 1. pm-fundament.css nur Variablen 2. pm-basis.css diese Datei 3. pm.css Header, Footer, Komponenten 4. Seiten-CSS inline im Block, nur Einzelstücke GRUNDREGEL Basisklassen legen KEINE Farbe fest, sie lesen den Kontext: .pm-h2{ color:var(--text); } Die Sektion setzt den Kontext. Dunkle Sektion = eine Klasse (.pm-dark), alles darin stimmt automatisch. Nie wieder eine Überschrift, die in ihrem eigenen Hintergrund verschwindet. ============================================================ */ /* ---------- 1 · Kontext --------------------------------------- Hell ist Standard. .pm-dark kippt den ganzen Kontext um. Weitere Kontexte (z. B. Akzentflächen) kommen hier dazu — nicht in den Seiten. */ .pm{ --text:var(--blau); /* Überschriften, kräftiger Text */ --text-2:var(--grau); /* Fließtext, Lead */ --text-3:var(--schwach); /* Kleintext, Beschriftungen */ --kicker:var(--akzent); /* Eyebrow */ --regel:var(--linie); /* Trennlinien */ } .pm .pm-dark, .pm.pm-dark{ --text:#fff; --text-2:#AEB9CC; --text-3:#9AA6BC; --kicker:var(--akzent-hell); --regel:rgba(255,255,255,.14); } /* ---------- 2 · Rahmen und Reset ------------------------------ */ .pm{ font-family:var(--f,"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif); color:var(--text); background:#fff; -webkit-font-smoothing:antialiased; /* Stand bisher in pm.css. Der alte Divi-Aufbruch (width:100vw;left:50%;margin-left:-50vw) ging von einer schmalen Divi-Spalte als Elternelement aus und schob unter Astra die ganze Seite nach links. */ width:100%; position:relative; /* clip statt hidden: "hidden" erzeugt einen Scroll-Container und macht damit jedes position:sticky im Inneren wirkungslos — genau daran blieb das Inhaltsverzeichnis der Beitraege oben haengen. "clip" schneidet genauso ab, ohne diesen Nebeneffekt. */ overflow-x:clip; } /* RESET-REGEL, verbindlich: Der Reset greift nur auf Elemente OHNE Klasse (:not([class])). Damit schlaegt er die Theme-Vorgaben von Astra, laesst aber jede unserer Klassen unberuehrt. Beide Fehler der Vorfassungen sind damit ausgeschlossen: - ".pm p{margin:0}" hatte alle Absatzabstaende der Seiten geloescht - ":where(...)" hatte Spezifitaet 0 und verlor gegen Astra, wodurch Footer- und Menuelisten wieder Theme-Abstaende bekamen */ .pm *{box-sizing:border-box;} .pm h1,.pm h2,.pm h3,.pm h4,.pm p,.pm li,.pm span,.pm a{ hyphens:none;-webkit-hyphens:none;-ms-hyphens:none; overflow-wrap:normal;word-break:normal; } .pm h1:not([class]),.pm h2:not([class]),.pm h3:not([class]), .pm h4:not([class]),.pm h5:not([class]){font-family:inherit;padding:0;margin:0;} .pm p:not([class]){margin:0;} /* Listen und Bilder OHNE :not() — sie brauchen den Reset immer, sonst schlagen Astras Listenabstaende und Bildgroessen durch (Header-Logo und Footer-Spalten). Nur bei p und h1-h5 ist die Einschraenkung noetig, weil dort unsere Klassen die Abstaende setzen. */ .pm ul{list-style:none;padding-left:0;margin:0;} .pm ul li{list-style:none;margin:0;} .pm ul li::marker{content:"";} .pm img{max-width:100%;height:auto;display:block;} .pm a,.pm a:link,.pm a:visited{color:inherit;text-decoration:none;} .pm a h1,.pm a h2,.pm a h3,.pm a h4{color:inherit;} /* ---------- 3 · Astra neutralisieren -------------------------- Astra greift in .entry-content ein und unterstreicht jeden Link und legt einen Schatten um jedes Bild. Beides zerstört unsere Buttons und freigestellten Grafiken. Hier einmal zentral aus, statt auf jeder Seite dagegen anzukämpfen. */ .entry-content .pm a, .ast-single-post .entry-content .pm a{text-decoration:none;} .ast-article-single .pm img, .ast-article-single .pm figure{box-shadow:none;} /* Astra gibt jedem