@charset "UTF-8"; /* _basis.css – Grundgerüst für alle Module. --------------------------------------------------------------- Was jedes Modul braucht: Seitenbreite, Knöpfe, Grundwerte. Was ein einzelnes Modul braucht, steht in dessen eigener modul.css. Diese Datei wird beim Veröffentlichen mit ausgeliefert und in der Vorschau geladen - eine Quelle für beides. Vorher lag alles in layouter_vorschau.php, und die veröffentlichte Seite wäre ohne Gestaltung geblieben. */ /* Grundwerte ZUERST, die Token der Vorlage überschreiben sie danach. Umgekehrt wäre die Vorlage wirkungslos. */ :root{ --grund: #ffffff; --flaeche: #f6f6f4; --text: #1b1f23; --akzent: #2e6f4e; --radius: 6px; /* Rückfall, wenn im Editor keine Schrift gewählt ist. NICHT im Vorlagen-Manifest: Dort stand einmal eine eigene Schrift, die aber nie ausgeliefert wurde - die Seite fiel dann still auf die Systemschrift zurück, und niemand fand den Grund. Eine Quelle für die Schriftwahl, und das ist der Editor. */ --schrift_titel: system-ui, -apple-system, sans-serif; --schrift_text: system-ui, -apple-system, sans-serif; /* Schnitt und Maßstab - beide werden im Editor gewählt und vom Token-Block überschrieben. Rückfall hier, damit eine Website ohne Wahl aussieht wie bisher: fette Überschriften, normaler Fließtext, Maßstab 1. */ --schrift_titel_gewicht: 700; --schrift_text_gewicht: 400; --schrift_skala: 1; } /* Der Maßstab greift an der Wurzel, nicht am Fließtext. Die Module rechnen in rem - Überschriften, Abstände, Knöpfe. Über die Wurzelschrift wächst und schrumpft damit alles gleichmäßig. Ein fester Pixelwert auf body hätte nur den Text verändert und die Proportionen zerrissen. 16px als Grundlage statt 100%: Ein Prozentwert bezöge sich auf die Browsereinstellung des Besuchers, und der Maßstab würde bei jemandem mit vergrößerter Standardschrift doppelt wirken. */ html{ font-size:calc(16px * var(--schrift_skala, 1)); } /* ══ Farbflächen ═════════════════════════════════════════════════ Ein Satz Klassen für alle Module, die ihren Hintergrund färben können - Störer, Zeitstrahl, und was noch kommt. WARUM HIER UND NICHT JE MODUL: Dieselbe Verlaufsformel stand zuletzt an drei Stellen - in layout_publizieren.php für die Kopfleiste, in stoerer/modul.css und in zeitstrahl/modul.css. Und an jeder Stelle nicht nur der Verlauf, sondern auch die Folgen: Linienfarbe, gedämpfter Text, Symbolfarbe auf dunklem Grund. Beim vierten Modul repariert man einen Farbfehler an vier Stellen und übersieht die fünfte. WIE ES BENUTZT WIRD: Die Klasse setzt Hintergrund, Textfarbe und drei Variablen. Das Modul greift nur noch auf die Variablen zu und weiß nichts von der Farbe: .lt-modul__linie{background:var(--auf-flaeche-linie)} .lt-modul__text {color:var(--auf-flaeche-schwach)} .lt-modul__titel{color:var(--auf-flaeche-stark)} Die Vorgaben im :root gelten für Bausteine OHNE Fläche - dort mischen sie wie bisher gegen die normale Textfarbe. */ :root{ --auf-flaeche-stark: var(--text); --auf-flaeche-schwach: color-mix(in srgb, var(--text) 62%, transparent); --auf-flaeche-linie: color-mix(in srgb, var(--text) 14%, transparent); /* Der Grundton HINTER der Fläche - für Elemente, die sich freistellen müssen, etwa ein Punkt auf einer Linie. */ --auf-flaeche-grund: var(--grund); /* Was in der Akzentfarbe stehen soll: Jahreszahlen, Symbole, Hervorhebungen. Auf einer Akzentfläche kann das nicht die Akzentfarbe sein - dort zeigt die Variable auf die Gegenfarbe. */ --auf-flaeche-akzent: var(--akzent); /* Marken mit eigener Fläche - eine Jahreszahl im Kreis, ein Zahlenfeld. Zwei Werte, weil sie zusammengehören. */ --auf-flaeche-marke: var(--akzent); --auf-flaeche-marke-text: var(--auf-akzent,#fff); /* Knöpfe sind NICHT dasselbe wie Marken, auch wenn beide eine Fläche haben. Auf dunklem Grund darf eine Jahreszahl in der Hausfarbe stehen - sie ist Schmuck. Ein Knopf muss dort weiß sein, weil er angeklickt werden will und als Erstes auffallen soll. Ein gemeinsamer Wert hätte einen der beiden Fälle verdorben. */ --auf-flaeche-knopf: var(--akzent); --auf-flaeche-knopf-text: var(--auf-akzent,#fff); /* Rahmen auf der Fläche - zarter als eine Linie. */ --auf-flaeche-rand: color-mix(in srgb, var(--text) 10%, transparent); } /* Akzent, sehr zart: getönte Fläche mit Rand, Text bleibt normal. Der Kasten des Störers nutzt genau das - eine volle Akzentfläche wäre dort zu laut, weil er mitten im Text steht. */ .lt-flaeche--akzent-zart{ background:color-mix(in srgb, var(--akzent) 12%, transparent); --auf-flaeche-rand: color-mix(in srgb, var(--akzent) 40%, transparent); } /* Leicht abgesetzt - dieselbe Fläche wie Karten und Formulare. */ .lt-flaeche--flaeche{ background:color-mix(in srgb, var(--text) 4%, var(--grund)); } /* Akzent, zart: Ein Hauch Farbe, Text bleibt wie auf der Seite. */ .lt-flaeche--akzent{ background:color-mix(in srgb, var(--akzent) 8%, var(--grund)); } /* Akzent, kräftig: Die Fläche IST die Farbe. Alles darauf richtet sich nach --auf-akzent, nicht nach der Textfarbe der Seite. */ .lt-flaeche--akzent-voll{ background:var(--akzent); color:var(--auf-akzent,#fff); --auf-flaeche-stark: var(--auf-akzent,#fff); --auf-flaeche-schwach: color-mix(in srgb, var(--auf-akzent,#fff) 75%, transparent); --auf-flaeche-linie: color-mix(in srgb, var(--auf-akzent,#fff) 28%, transparent); --auf-flaeche-akzent: var(--auf-akzent,#fff); /* Umgedreht: Die Marke wird hell, ihr Text nimmt die Hausfarbe. */ --auf-flaeche-marke: var(--auf-akzent,#fff); --auf-flaeche-marke-text: var(--akzent); --auf-flaeche-knopf: var(--auf-akzent,#fff); --auf-flaeche-knopf-text: var(--akzent); --auf-flaeche-rand: color-mix(in srgb, var(--auf-akzent,#fff) 35%, transparent); } /* Akzent mit Verlauf - dieselben Stufen wie Kopfleiste und Fußzeile. Aufgehellt, reiner Akzent in der Mitte, abgedunkelt: So bleibt erkennbar, dass es EINE Farbe ist. oklab statt srgb, sonst wird ein kräftiges Gelb auf dem Weg zu Schwarz schmutzig-grün. */ .lt-flaeche--akzent-verlauf{ background:linear-gradient(135deg, color-mix(in oklab, var(--akzent) 62%, #fff) 0%, var(--akzent) 42%, color-mix(in oklab, var(--akzent) 52%, #000) 100%); color:var(--auf-akzent,#fff); --auf-flaeche-stark: var(--auf-akzent,#fff); --auf-flaeche-schwach: color-mix(in srgb, var(--auf-akzent,#fff) 75%, transparent); --auf-flaeche-linie: color-mix(in srgb, var(--auf-akzent,#fff) 28%, transparent); --auf-flaeche-akzent: var(--auf-akzent,#fff); --auf-flaeche-marke: var(--auf-akzent,#fff); --auf-flaeche-marke-text: var(--akzent); --auf-flaeche-knopf: var(--auf-akzent,#fff); --auf-flaeche-knopf-text: var(--akzent); --auf-flaeche-rand: color-mix(in srgb, var(--auf-akzent,#fff) 35%, transparent); } /* Dunkel: fester Ton, nicht aus dem Akzent gerechnet - er soll unter jeder Hausfarbe gleich aussehen. */ .lt-flaeche--dunkel{ background:#1b1f26; color:#f4f6f8; --auf-flaeche-stark: #fff; --auf-flaeche-schwach: rgba(255,255,255,.62); --auf-flaeche-linie: rgba(255,255,255,.14); /* Die Hausfarbe aufgehellt: Ein dunkles Ziegelrot ist auf #1b1f26 nicht mehr zu erkennen, ein aufgehelltes schon - und es bleibt dieselbe Farbe. */ --auf-flaeche-akzent: color-mix(in oklab, var(--akzent) 62%, #fff); /* Weißer Knopf auf Dunkel - die Hausfarbe wäre dort zu leise. */ --auf-flaeche-knopf: #fff; --auf-flaeche-knopf-text: #1b1f26; --auf-flaeche-rand: rgba(255,255,255,.18); } /* Dunkel mit Verlauf: ein Hauch Akzent an der Ecke, sonst wären es zwei Grautöne und das sieht nach Fehler aus. */ .lt-flaeche--dunkel-verlauf{ background:linear-gradient(135deg, #2b313b 0%, #1b1f26 50%, color-mix(in oklab, var(--akzent) 45%, #1b1f26) 100%); color:#f4f6f8; --auf-flaeche-stark: #fff; --auf-flaeche-schwach: rgba(255,255,255,.62); --auf-flaeche-linie: rgba(255,255,255,.14); /* Die Hausfarbe aufgehellt: Ein dunkles Ziegelrot ist auf #1b1f26 nicht mehr zu erkennen, ein aufgehelltes schon - und es bleibt dieselbe Farbe. */ --auf-flaeche-akzent: color-mix(in oklab, var(--akzent) 62%, #fff); /* Weißer Knopf auf Dunkel - die Hausfarbe wäre dort zu leise. */ --auf-flaeche-knopf: #fff; --auf-flaeche-knopf-text: #1b1f26; --auf-flaeche-rand: rgba(255,255,255,.18); } /* Hinter einem Verlauf gibt es keinen einen Grundton - dort ist durchsichtig richtiger als ein fester Wert, der nur an einer Stelle des Streifens passt. */ .lt-flaeche--dunkel-verlauf, .lt-flaeche--akzent-verlauf{--auf-flaeche-grund:transparent} .lt-flaeche--dunkel{--auf-flaeche-grund:#1b1f26} .lt-flaeche--akzent-voll{--auf-flaeche-grund:var(--akzent)} /* Kein waagerechter Überlauf. Ein einzelnes Element, das ein paar Pixel zu breit ist - ein Bild ohne max-width, eine Tabelle, ein negativer Rand -, erzeugt eine Bildlaufleiste über die ganze Seite. Auf dem Handy heißt das: Man wischt versehentlich zur Seite und sieht einen leeren Streifen. overflow-x an HTML UND body: Am body allein greift es nicht zuverlässig, weil der Browser das Scrollen dann an html weiterreicht. Bewusst "clip" statt "hidden", wo möglich: hidden macht den Kasten zu einem Scrollbereich, und darin funktioniert position:sticky nicht mehr - die Kopfleiste bliebe nicht stehen. clip hat diese Nebenwirkung nicht. */ html{ overflow-x:clip; } @supports not (overflow:clip){ html{overflow-x:hidden} } body{ margin:0; background:var(--grund); color:var(--text); font-family:var(--schrift_text); font-weight:var(--schrift_text_gewicht, 400); line-height:1.6; overflow-x:clip; /* Zusätzlich die Breite begrenzen: Sperrt man nur den Überlauf, bleibt der Inhalt trotzdem zu breit und wird abgeschnitten - hiermit bricht er stattdessen um. */ max-width:100%; } /* Bilder und Medien nie breiter als ihr Platz. Der häufigste Grund für waagerechten Überlauf: ein Bild mit fester Breite aus einem eingefügten HTML-Schnipsel. */ img, video, iframe, table, pre{ max-width:100%; } img, video{ height:auto; } /* Lange Wörter umbrechen statt überstehen lassen - eine E-Mail-Adresse oder eine ungetrennte Zusammensetzung sprengt sonst jede Spalte. */ p, li, h1, h2, h3, h4, h5, h6, td, th{ overflow-wrap:break-word; } /* Alle Ebenen, nicht nur die ersten drei: Seit der Textblock h3 bis h5 nutzt, stünden h4 und h5 sonst in der Textschrift und mit den Browser-Vorgaben. */ h1,h2,h3,h4,h5,h6{font-family:var(--schrift_titel); /* Der gewählte Schnitt statt der Browser-Vorgabe. Wichtig, dass hier ein Wert steht, den die Schrift wirklich mitbringt: Sonst rechnet der Browser sich ein fettes Gewicht selbst zurecht, und das sieht bei jeder Schrift anders und bei keiner gut aus. Deshalb bietet der Editor nur die Schnitte an, die zu der Schrift geholt wurden. */ font-weight:var(--schrift_titel_gewicht, 700); line-height:1.25;margin:0 0 .5em} /* ═══════════════════════════════════════════════════════════════ EIN MASS FÜR ALLE BAUSTEINE Außenbreite 1080px, Textbreite 44rem, Abstand 64px oben und unten. Die Abstände lagen zwischen 46 und 64 Pixeln - jeder Wert für sich vertretbar, untereinander gestapelt aber unruhig: Zwischen zwei Bausteinen entstand mal eine Lücke von 92, mal von 128 Pixeln, und die Seite wirkte ungleichmäßig gesetzt, ohne dass man sagen konnte warum. Der Abstand zwischen Überschrift und Inhalt: 32px. Auch der lag zwischen 24 und 56 - bei sechs Bausteinen untereinander sechs verschiedene Werte für dieselbe Sache. Wer ein neues Modul baut, nimmt diese Werte. Abweichungen nur mit Grund und Kommentar - etwa der Zeitstrahl, dessen Liste bei 820px bleibt, weil der Zusammenhang zwischen Punkt und Text sonst verlorengeht. Merkzettel: Außenbreite 1080px (.lt-wrap) Seitenrand 22px (.lt-wrap) Textbreite 44rem (__kopf) Abstand außen 64px oben und unten Kopf zu Inhalt 32px */ .lt-wrap{max-width:1080px;margin:0 auto;padding:0 22px} /* ── Knöpfe ─────────────────────────────────────────────────── */ /* Text auf der Akzentfläche. --auf-akzent wird berechnet, nicht gesetzt: Bei Gelb oder Türkis muss die Schrift schwarz sein, bei Dunkelblau weiß. Ein festes #fff war bei jedem hellen Kundenton unlesbar. Der Rückfall #fff greift nur, wenn kein Akzent gesetzt ist - dann gilt der dunkelgrüne Vorgabewert. */ .lt-btn{ display:inline-block; padding:12px 24px; /* Eigener Radius: Bei "Rund" wird der Knopf zur Pille, während Karten und Bilder 3 rem tragen. Rückfall auf --radius, damit ältere Seiten ohne das neue Token nichts verlieren. */ border-radius:var(--radius-knopf, var(--radius)); background:var(--akzent); color:var(--auf-akzent, #fff); text-decoration:none; font-weight:700; /* Der Schatten trägt die Akzentfarbe in sich, nicht neutrales Grau - ein bunter Knopf mit grauem Schatten sieht aufgeklebt aus. Rückfallwert in der Klammer: Fehlt das Token, weil eine ältere _basis.css im Ordner liegt, greift trotzdem etwas. Ohne ihn wäre box-shadow leer und man sucht in der falschen Datei. */ box-shadow:var(--schatten-knopf, 0 2px 4px rgba(15,20,28,.12), 0 8px 20px color-mix(in srgb, var(--akzent,#2e6f4e) 35%, transparent)); transition:transform .15s ease-out, box-shadow .15s ease-out, background-color .15s ease-out; } .lt-btn:hover{ transform:translateY(-1px); /* Leicht abgedunkelt statt einer zweiten Farbe: color-mix nimmt den Akzent und mischt 12 % Schwarz dazu. So passt der Hover-Ton zu jeder Kundenfarbe, ohne dass jemand einen zweiten Wert pflegt. */ background:color-mix(in srgb, var(--akzent,#2e6f4e) 88%, #000); box-shadow:var(--schatten-knopf-hover, 0 4px 8px rgba(15,20,28,.14), 0 12px 28px color-mix(in srgb, var(--akzent,#2e6f4e) 45%, transparent)); } .lt-btn:active{transform:translateY(0)} @media(prefers-reduced-motion:reduce){ .lt-btn{transition:none} .lt-btn:hover{transform:none} } .lt-btn:hover{filter:brightness(1.08)} .lt-btn--linie{ background:transparent; color:inherit; box-shadow:inset 0 0 0 2px currentColor; } .lt-btn:focus-visible{outline:3px solid var(--akzent);outline-offset:3px} /* ── Ausrichtung im Fließtext ─────────────────────────────────── Als Klasse, nicht als style-Attribut: Ein Attribut überstimmt jede Vorlage und lässt sich bei einem Wechsel nicht mitnehmen. In _basis.css, weil jedes Modul mit Fließtext sie braucht - nicht nur der Textblock. */ /* Einfache Klassen, ein Wort Spezifität. Damit sie gegen die Blockvorgabe gewinnen, ist DIESE schwächer gemacht: Die Regeln der Module stehen in :where() und zählen deshalb null. Siehe modul.css von Textblock und Header. Die Richtung ist wichtig: Die Vorgabe gibt die Richtung, die Feineinstellung am einzelnen Absatz muss sie überstimmen können - nicht andersherum. */ /* Doppelt notiert, damit sie eine Stufe stärker zählen. Die Vorgabe des Blocks steht in :where() und zählt eine Klasse. Bei gleichem Gewicht gewänne die spätere Regel - und die Module laden NACH _basis.css. Mit .lt-mitte.lt-mitte zählen es zwei, damit gewinnt der einzelne Absatz unabhängig von der Reihenfolge. Der Trick ist üblich und ehrlicher als !important: Er verschiebt das Gewicht, ohne jede spätere Regel unmöglich zu machen. */ .lt-links.lt-links {text-align:left} .lt-mitte.lt-mitte {text-align:center} .lt-rechts.lt-rechts{text-align:right} /* Bilder und Knöpfe folgen der Ausrichtung mit. Ohne das stünde ein zentrierter Absatz mittig, das Bild darin aber weiter links. */ .lt-mitte > img, .lt-mitte .lt-figur img{margin-left:auto;margin-right:auto} .lt-rechts > img, .lt-rechts .lt-figur img{margin-left:auto} /* ── Links im Fließtext ───────────────────────────────────────── Farbe und Gewicht kommen aus Token, die sich nach der Helligkeit des Akzents richten: Bei einem hellen Ton (Gelb, Türkis) wäre ein farbiger Link auf weißem Grund unlesbar - dann steht er schwarz und fett. Bei dunklem Akzent trägt die Farbe wie gewohnt. Unterstrichen in beiden Fällen: Ein Link, den man nur an der Farbe erkennt, ist für Menschen mit Farbsehschwäche keiner. */ a{ color:var(--link, var(--akzent)); font-weight:var(--link-gewicht, inherit); text-decoration:underline; text-underline-offset:2px; } /* Ein