/* Diese Datei laedt bewusst VOR main.css.
Sie hat dieselbe Spezifitaet wie Bricks eigene Blockregel und gewinnt
ueber die Reihenfolge; main.css laedt danach und behaelt damit bei jeder
Eigenschaft das letzte Wort. Stuende sie hinter main.css, wuerde sie
deren Deklarationen ueberstimmen - etwa .logo{flex-direction:column}. */
/* ══════════════════════════════════════════════════════════════════════════
Bricks' Blockvorgaben zuruecknehmen — die wichtigste Regel dieser Datei.
Bricks gibt JEDEM Block vier Eigenschaften mit:
.brxe-block{ align-items:flex-start; display:flex;
flex-direction:column; width:100%; flex-wrap:wrap }
main.css deklariert bei ihren Containern nur, was vom CSS-Standard
abweicht — eine waagerechte Leiste steht dort als "display:flex" ohne
flex-direction, weil row ohnehin der Standard ist. Unter Bricks greifen
dessen Vorgaben genau in diese Luecken: 93 Regeln in main.css setzen
display:flex ohne Richtung und stuenden damit senkrecht.
Darum hier die CSS-Standardwerte wiederherstellen — display eingeschlossen.
Auch das ist noetig: main.css setzt display nur, wo es vom Standard
abweicht. Ein Aufklappfeld wie .nav-drop-panel ist im Original ein
gewoehnlicher Block, in der Regel steht also gar kein display — Bricks'
display:flex hat dort nichts, was es ueberstimmen koennte. Die Karte darin
wurde dadurch zum Flex-Element und schrumpfte auf Inhaltsbreite, statt die
620 px des Elternelements zu fuellen.
Spezifitaet ist identisch zu Bricks' eigener Regel, diese Datei laedt
spaeter und gewinnt; jede Regel in main.css ist mindestens gleich stark
und behaelt damit das letzte Wort — jedes display:flex und display:grid
dort setzt sich also durch.
Folge fuer den Baukasten: ein neu angelegter Block verhaelt sich wie ein
normaler div statt als Flex-Spalte. Richtung und Ausrichtung werden dort
bewusst gesetzt. Das ist der Preis dafuer, dass main.css die Autoritaet
bleibt — und er ist deutlich kleiner als hunderte Einzeleinstellungen.
══════════════════════════════════════════════════════════════════════════ */
/* Dieselbe Vorgabe trifft nicht nur Bloecke, sondern auch Sektionen und
Container — mit eigenen Werten:
.brxe-section { align-items:center; display:flex; flex-direction:column; width:100% }
.brxe-container{ align-items:flex-start; display:flex; flex-direction:column; width:1100px }
Bei der Sektion kostet das die volle Breite der Seite: .wrap darin wird zum
Flex-Element und schrumpft auf Inhaltsbreite — aus 1240 px wurden 711.
Beim Container kaeme zusaetzlich eine harte Breite von 1100 px dazu, die
jede eigene Maximalbreite ueberstimmt. */
.brxe-block,
.brxe-section,
.brxe-container {
display: block;
flex-direction: row;
align-items: normal;
flex-wrap: nowrap;
width: auto;
}
/* Bricks deckelt zusaetzlich JEDES Element auf die Breite des Elternelements:
[class*="brxe-"]{ max-width:100% }
Das trifft alles, was bewusst ueberhaengt. Das Aufklapp-Panel der Navigation
ist 620 px breit und absolut positioniert, sein Elternelement aber nur der
187 px schmale Menuepunkt — der Deckel gewann, und aus 620 px wurden 187.
Dasselbe gilt fuer vollbreite Baender, negative Aussenabstaende und jedes
Element, das aus seinem Container ausbricht.
Der Deckel bleibt dort erhalten, wo er hingehoert: die Regel img{max-width:
100%} ist davon unberuehrt, denn ein ![]()
traegt keine brxe-Klasse. */
[class*="brxe-"] {
max-width: none;
}
/* display:block oben ist fuer Listenelemente zu grob: ein ist im
Ausgangsdokument display:list-item. Ohne diese Zeile verliert die mobile
Navigation ihre Listensemantik. main.css ist mindestens gleich stark und
laedt spaeter, behaelt also auch hier das letzte Wort. */
li.brxe-block { display: list-item; }
/* ══════════════════════════════════════════════════════════════════════════
Die Groessenbasis zuruecksetzen — zweite tragende Regel dieser Datei.
Bricks setzt in seiner Reset-Schicht:
html{ font-size:62.5% } → 1rem sind dort 10px statt 16px
body{ font-size:15px }
main.css rechnet aber in der Basis des Browsers. 13 ihrer Regeln bemessen
Schriftgroessen in rem, darunter die groessten Ueberschriften der Website:
.rd-title{ font-size:clamp(2.2rem, 3.6vw + 1rem, 3.4rem) }
Bei 1440 px ergibt das im Original 54,4 px — unter Bricks' Basis 34 px.
Gemessen an der Roboterseite betraf das die Ueberschrift (54,4 → 34 px),
den Einordnungssatz (16,8 → 10,5 px) und die Eckdatenleiste
(29,6 → 18,5 px). Keine dieser Regeln ist defekt; ihnen fehlt nur die
Basis, auf die sie sich beziehen.
Darum hier die Basis des Browsers wiederherstellen. body bekommt 1rem
statt 16px, damit eine spaetere Aenderung an der Wurzel durchschlaegt. */
html { font-size: 100%; line-height: normal; }
body { font-size: 1rem; }
/* Bricks macht den Seitenkoerper zu einer Flex-Spalte (fuer sein
Boxed-Layout). Im Original ist er ein gewoehnlicher Block; alles darin
rechnet mit normalem Flussverhalten. */
body { display: block; }
/* Ueberschriftengroessen: Bricks vergibt eigene Werte (h1 2.4em, h2 2.1em,
h3 1.8em, h4 1.6em, h5 1.3em, h6 1.1em, Zeilenhoehe durchweg 1.4).
main.css setzt bei h1-h4 nur Schriftart, Gewicht, Laufweite und Farbe —
die Groesse kommt dort ueberall aus den Komponentenklassen oder, wo keine
greift, aus der Vorgabe des Browsers. Der Schlusstext der Roboterseite
zeigte das: 24 px im Original gegen 31,5 px unter Bricks. */
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.17em; }
h4 { font-size: 1em; }
h5 { font-size: .83em; }
h6 { font-size: .67em; }
/* Zeilenhoehe geerbt, nicht "normal": die Vorgabe des Browsers setzt bei
Ueberschriften gar keine Zeilenhoehe, sie erben also die 1.6 des Koerpers.
Mit "normal" fiel der Schlusstext der Roboterseite auf 24 px * ~1.2 statt
* 1.6 - die Ueberschrift sass zu eng. */
h1, h2, h3, h4, h5, h6 { line-height: inherit; }
/* Zitate bekommen von Bricks einen linken Balken, Georgia und 1.3em.
main.css gestaltet Zitate ueber .article-pull-quote blockquote und setzt
dort weder Rahmen noch Innenabstand zurueck — der Balken bliebe stehen. */
blockquote { border: none; padding: 0; margin: 1em 40px; font-family: inherit; font-size: inherit; }