/* ============================================================================
Bereichsseiten - Bausteine aus Tims Mockup V7, umgesetzt in unserem Design
Ergaenzt css/stil.css und nutzt dessen Token.
Gilt fuer programm.html, ueber-mich.html und zahlen-und-fakten.html.
========================================================================= */
.bs-raum{max-width:1120px;margin:0 auto;padding:0 22px}
.bs-schmal{max-width:760px;margin:0 auto}
/* Von 132 auf 92 Pixel gekuerzt: beim Ankommen auf einer
Nebenseite soll sofort Inhalt zu sehen sein, nicht erst Leerraum. Die
feste Kopfleiste ist etwa 78 Pixel hoch, darunter bleibt also noch Luft. */
.bs-kopf{padding:92px 0 6px;text-align:center}
.bs-kopf .kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);
font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--violet);
font-weight:600;margin:0 0 18px}
.bs-kopf .kicker::before,.bs-kopf .kicker::after{content:"";width:26px;height:1px;background:var(--violet-hell)}
.bs-kopf h1{font-family:var(--serif);font-size:clamp(31px,5vw,50px);line-height:1.14;
letter-spacing:-.012em;color:var(--ink);margin:0 auto 18px;font-weight:600;max-width:19ch}
/* Überschriften mit hartem Umbruch (Programm-Seite).
Zwei Zeilen statt drei. Die zweite Zeile ist mit 37 Zeichen deutlich länger
als die 19ch der Standardfassung, deshalb fällt die Breitenbegrenzung hier
weg. Zusätzlich wächst die Schrift langsamer mit dem Fenster (4.6vw statt
5vw): bei voller Größe braucht die zweite Zeile 930px, das ist knapp unter
der verfügbaren Breite, und ohne diesen Puffer bräche sie bei mittleren
Fenstern doch wieder um. Ab 1000px Fensterbreite sind beide Fassungen
gleich groß (50px), ein Größenunterschied zur Seite "Über mich" entsteht
also nur im mittleren Bereich. Unter 700px ist für eine Zeile kein Platz
mehr, dort fällt der harte Umbruch weg und der Satz bricht normal um. */
.bs-kopf h1.h1-zweizeilig{max-width:none;font-size:clamp(31px,4.6vw,50px)}
@media(max-width:700px){
.bs-kopf h1.h1-zweizeilig{max-width:19ch;font-size:clamp(31px,5vw,50px)}
.bs-kopf h1.h1-zweizeilig br{display:none}
}
.bs-kopf .lead{font-size:18px;line-height:1.7;color:var(--ink-soft);max-width:62ch;margin:0 auto}
/* Die Zeile unter der Ueberschrift auf "Ueber mich": eine Stufe
kleiner, kraeftiger und im dunklen Ton der uebrigen Belegzeilen, damit sie
als Einordnung liest und nicht als zweiter Absatz. Derselbe Satz wie im
Shift ("98 von 100 Unternehmen...") und in der Kennzahlen-Zeile. */
.bs-kopf .lead--beleg{font-size:15px;font-weight:600;color:var(--ink)}
/* Breitere Textsäule im Kopf: Der Satz läuft über längere
Zeilen, dadurch braucht er weniger davon und der Seitenanfang wird flacher.
Nur dort eingesetzt, wo der Kopf auf hellem Grund steht, im Bild-Hero
bleiben die Zeilen kürzer, weil sich das über einem Motiv besser liest. */
.bs-kopf--breit .lead{max-width:80ch}
.bs-kopf--breit{padding-bottom:2px}
/* ---------- Kicker über einer Abschnitts-Überschrift ----------
Seit dem 18.08. traegt "Das operative System" den Eyebrow, der vorher im
Hero stand. Der Kicker-Stil hing bis dahin an ".bs-kopf" und griff
innerhalb eines Abschnitts nicht. Gleiche Bauart wie im Kopf, nur auf
hellem Grund: die Haarlinien tragen dort das kraeftigere Violett, das
hellere waere auf Weiss zu schwach. */
.bs-abschnitt .kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);
font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--violet);
font-weight:600;margin:0 0 14px}
.bs-abschnitt .kicker::before,.bs-abschnitt .kicker::after{content:"";width:26px;height:1px;
background:var(--violet);opacity:.55}
.bs-abschnitt .kicker.mitte{margin-left:auto;margin-right:auto;display:flex;width:fit-content}
.bs-abschnitt{padding:64px 0}
.bs-abschnitt.getoent{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bs-abschnitt h2{font-family:var(--serif);font-size:clamp(24px,3.4vw,34px);line-height:1.22;
letter-spacing:-.01em;color:var(--ink);margin:0 0 14px;font-weight:600;max-width:22ch}
.bs-abschnitt h2.mitte{margin-left:auto;margin-right:auto;text-align:center}
/* Überschrift mit hartem Umbruch. Die Breitenbegrenzung von
22 Zeichen muss hier weg, sonst bricht der Satz zusätzlich zum gesetzten
Umbruch. Auf schmalen Schirmen fällt der harte Umbruch weg und die
Begrenzung greift wieder. */
.bs-abschnitt h2.h2-zweizeilig{max-width:none}
@media(max-width:620px){
.bs-abschnitt h2.h2-zweizeilig{max-width:22ch}
.bs-abschnitt h2.h2-zweizeilig br{display:none}
}
.bs-abschnitt .einleitung{font-size:16.5px;line-height:1.72;color:var(--ink-soft);max-width:64ch;margin:0 0 34px}
.bs-abschnitt .einleitung.mitte{margin-left:auto;margin-right:auto;text-align:center}
/* Am Rechner laufen die Einleitungen ueber breitere Zeilen. Aus fuenf Zeilen werden vier, aus vier
drei. Der begrenzende Container ".bs-schmal" muss dafuer mitwachsen, sonst
greift die groessere Breite nicht. Ueberschriften bleiben unberuehrt, sie
haben ihre eigene Zeilenbreite. */
@media(min-width:981px){
.bs-schmal{max-width:920px}
.bs-abschnitt .einleitung{max-width:88ch}
}
/* ---------- Raster ----------
Abstand zwischen den Karten von 18 auf 24 Pixel: Die Karten
standen zu dicht beieinander und wirkten wie eine Fläche statt wie drei
Einheiten. Bewusst nur ein Schritt, nicht mehr, sonst zerfällt die Gruppe. */
.bs-drei{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.bs-zwei{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
@media(max-width:860px){.bs-drei{grid-template-columns:1fr}.bs-zwei{grid-template-columns:1fr}}
/* ---------- Schnitt innerhalb eines Abschnitts ----------
Für Gruppen, die im selben Abschnitt stehen, aber eine eigene Frage
beantworten: die drei Ergebnis-Karten unter dem Ist/Ziel-Vergleich und der
Zwischenkopf "Gute Führung ist messbar". Beide standen vorher mit
Inline-Werten von 34 und 52 Pixeln zu dicht an dem, was darüber lag. */
.bs-schnitt{margin-top:64px}
.bs-zwischenkopf{margin:76px auto 0;font-family:var(--serif);font-size:24px;
line-height:1.3;font-weight:600;color:var(--ink);text-align:center}
/* ---------- Karte ---------- */
.bs-karte{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:26px 24px}
.bs-karte .nr{display:block;font-family:var(--serif);font-size:15px;color:var(--violet);margin-bottom:9px}
.bs-ico{display:block;width:30px;height:30px;margin-bottom:14px;color:var(--violet)}
.bs-ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round}
.bs-karte h3{font-family:var(--serif);font-size:19px;line-height:1.3;color:var(--ink);
margin:0 0 8px;font-weight:600}
.bs-karte p{margin:0;font-size:15px;line-height:1.62;color:var(--ink-soft)}
/* Die acht Essentials verhalten sich jetzt wie die drei Stufen-Karten auf der
Startseite:
Karte hebt sich beim Überfahren, darunter wächst der Farbbalken auf. Die
Icon-Animationen laufen unverändert weiter. Nur im Essentials-Raster, damit
die übrigen Karten der Bereichsseiten ruhig bleiben. */
.bs-vier .bs-karte{display:flex;flex-direction:column;
transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.bs-vier .bs-karte:hover,.bs-vier .bs-karte:focus-within{transform:translateY(-3px);
border-color:#DCCFE4;box-shadow:0 16px 36px -20px rgba(52,44,49,.45)}
.bs-vier .bs-karte .balken{display:block;height:3px;border-radius:3px;margin-top:auto;
padding-top:0;background:linear-gradient(90deg,var(--violet),var(--flame));
transform:scaleX(0);transform-origin:left;
transition:transform .55s cubic-bezier(.22,1,.36,1)}
.bs-vier .bs-karte p{margin-bottom:20px}
.bs-vier .bs-karte:hover .balken,.bs-vier .bs-karte:focus-within .balken{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){
.bs-vier .bs-karte{transition:none}
.bs-vier .bs-karte .balken{transform:scaleX(1)}
}
/* ---------- Phasen (Tag 1, Tag 30 ...) ---------- */
.bs-phase{border:1px solid var(--line);border-radius:14px;padding:26px 24px;background:var(--paper)}
.bs-phase-text{font-size:15px;line-height:1.65;color:var(--ink-soft);margin:0}
/* ---------- Der ganze Weg, vier Stationen ----------
Vier Karten mit je einem vollen Absatz. Nebeneinander waeren die Spalten zu
schmal fuer den Text, deshalb ein Zweierraster. Grundzustand ist eine
Spalte, das Raster kommt erst ab 861 Pixel dazu: Unter 820 uebernimmt die
Wischreihe aus stil.css, und ein Grundwert ohne Fensterabfrage kann von ihr
nicht ueberschrieben werden, was sonst zum den Fall fuehrt. */
.bs-weg{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:861px){.bs-weg{grid-template-columns:repeat(2,1fr)}}
/* LinkedIn-Knopf unter dem Portraetblock. Die Stationen mit Haken darueber
sind am 18.08. gestrichen, der Knopf braucht deshalb selbst Abstand. */
.linkedin-zeile{margin:24px 0 0}
/* ---------- Die beiden Jahresphasen untereinander ----------
Nebeneinander stand Phase 2 als lange Kolonne aus sechs Absätzen neben
einer halb leeren Phase 1 und wirkte überladen. Jetzt stehen sie
untereinander, dieselbe Menge Inhalt, halb so hoch.
Beide Karten sind seit dem 15.08. gleich breit: Phase 1 stand
vorher auf 72 Prozent und lief links bündig, rechts aber 286 Pixel vor der
Karte darunter aus. Als Treppe gedacht, gelesen wurde es als abgeschnittene
Karte. Zwei gleich breite Karten übereinander sind die ruhigere Lösung, die
Abstufung leisten Kopfzeile und Inhalt. */
.bs-phasen-paar{display:grid;grid-template-columns:1fr;gap:24px;
max-width:1020px;margin:0 auto}
.bs-phase--breit .bs-liste{grid-template-columns:1fr 1fr;gap:14px 34px}
@media(max-width:860px){
.bs-phase--breit .bs-liste{grid-template-columns:1fr;gap:11px}
}
/* Die Stufentrennung darunter laenglicher und flacher: breiter
als das Phasen-Paar, dafuer mit knapperem Innenpolster. */
.bs-abschnitt .dreher--breit{max-width:1020px;margin-top:26px}
.bs-abschnitt .dreher--breit .abkoppeln{padding:26px 30px 40px;gap:20px;
grid-template-columns:44px 1fr}
.bs-abschnitt .dreher--breit .txt{max-width:none}
.bs-phase-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
flex-wrap:wrap;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.bs-phase-name{font-family:var(--serif);font-size:19px;color:var(--ink);font-weight:600}
.bs-phase-zeit{font-family:var(--sans);font-size:13px;color:var(--faint);white-space:nowrap}
.bs-schritt{display:flex;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.bs-schritt:last-child{border-bottom:0;padding-bottom:0}
.bs-schritt .marke{flex-shrink:0;font-family:var(--sans);font-size:12.5px;font-weight:600;
color:var(--violet);min-width:58px;padding-top:2px}
.bs-schritt .text{font-size:15px;line-height:1.6;color:var(--ink-soft)}
/* ---------- Haken- und Kreuzlisten ---------- */
.bs-liste{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.bs-liste li{position:relative;padding-left:30px;font-size:15.5px;line-height:1.6;color:var(--ink-soft)}
.bs-liste li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;
background:no-repeat center/contain}
.bs-liste.haken li::before{background-image:url("data:image/svg+xml;utf8,")}
.bs-liste.kreuz li::before{background-image:url("data:image/svg+xml;utf8,")}
/* ---------- Duo-Karten ----------
Loesen die frueheren Vergleichstabellen ab: zwei eigenstaendige Karten,
die beim Scrollen nacheinander hereinfahren. Zustaende kommen aus
js/seite.js als data-duo-stand: "aus" (nichts sichtbar), "eins" (nur die
linke Karte, mittig gerueckt), "beide" (beide nebeneinander als Gruppe).
Bewegt werden nur transform und opacity. */
/* Pflicht: solange die Karten ausserhalb des Bildes warten, wuerden sie die
Seite verbreitern und Querscrollen ausloesen. Hier ist ausschliesslich clip
richtig, NICHT hidden: hidden macht den Abschnitt zum Scroll-Behaelter und
das klebende Element darin wuerde nicht mehr am Fenster haften. */
.bs-duo-abschnitt{overflow-x:clip}
/* ---------- Die klebende Buehne ist entfallen ----------
Vorher hielt eine klebende Buehne die Seite an: erst fuhr die linke Karte
allein mittig herein, nach 240 Pixeln Scrollweg folgte die rechte. Tim
empfand das als hektisch, und der Scrollweg war immer auch ein Stueck leere
Flaeche. Jetzt fahren beide Karten gleichzeitig herein, jede aus ihrer
Richtung, in einer Bewegung. Damit entfaellt der Scrollweg ersatzlos. */
.bs-duo{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:stretch;
max-width:980px;margin:0 auto}
.bs-duokarte{background:var(--paper);border:1px solid var(--line);border-radius:16px;
padding:28px 26px 26px;box-shadow:0 1px 2px rgba(52,44,49,.04),0 16px 44px rgba(52,44,49,.07)}
.bs-duokopf{font-family:var(--sans);font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;
color:var(--faint);font-weight:600;margin:0 0 18px;padding-bottom:14px;
border-bottom:1px solid var(--line)}
.bs-duoliste{list-style:none;margin:0;padding:0;display:grid;gap:0}
.bs-duoliste li{font-size:15px;line-height:1.6;color:var(--ink-soft);
padding:13px 0;border-bottom:1px solid var(--line)}
.bs-duoliste li:last-child{border-bottom:0;padding-bottom:0}
/* ---------- Zeilenpaare ----------
Die beiden Karten stellen einander Punkt für Punkt gegenüber: links der
Ist-Zustand, rechts das Ziel derselben Zeile. Bisher hatte jede Karte ihr
eigenes Zeilenraster. Weil die linken Sätze länger sind und über zwei
Zeilen laufen, standen die Paare versetzt und die Trennlinien liefen
treppenartig auseinander.
Jetzt liegen beide Karten in einem gemeinsamen Raster: das äußere Grid gibt
die Zeilen vor, Karte und Liste übernehmen sie über "subgrid". Damit hat
jedes Paar links und rechts dieselbe Höhe, die Linien laufen waagerecht
durch, und die Zuordnung ist ohne Erklärung zu sehen.
Die Anzahl der Punkte steht als "--zeilen" am Element im HTML, weil sie sich
je Karte unterscheidet (sechs beim Umfang, fünf beim Ist/Ziel).
Browser ohne subgrid (vor 2023) bekommen unverändert das alte Verhalten,
die Karten stehen dann nur wieder versetzt. */
@supports (grid-template-rows: subgrid){
@media(min-width:861px){
/* row-gap muss auf 0: der Abstand von 28 Pixeln ist für die Lücke
ZWISCHEN den beiden Karten gedacht. Sobald das Raster mehrere Zeilen
hat, würde er auch zwischen den Zeilen wirken und die Karte innen
auseinanderziehen (gemessen: 46 statt 18 Pixel unter der Kopfzeile).
Den Zeilenrhythmus machen weiter das Polster der Punkte und die
Haarlinien. */
.bs-duo--paare{grid-template-rows:auto repeat(var(--zeilen,5),auto);
column-gap:28px;row-gap:0}
.bs-duo--paare .bs-duokarte{display:grid;grid-template-rows:subgrid;
grid-row:1 / -1;align-content:start}
.bs-duo--paare .bs-duokarte:first-child{grid-column:1}
.bs-duo--paare .bs-duokarte:last-child{grid-column:2}
.bs-duo--paare .bs-duoliste{grid-row:2 / -1;grid-template-rows:subgrid}
/* Der Punkt füllt jetzt eine Zeile fester Höhe. Ohne diese Zeile klebte
der kürzere Text am oberen Rand seiner Zelle und die Trennlinie stand
weit darunter. Mittig gesetzt liegen beide Sätze eines Paares auf
derselben Achse. */
.bs-duo--paare .bs-duoliste li{display:flex;align-items:center}
}
}
/* Ruhezustand vor dem Hereinfahren. Ohne JavaScript bleibt data-duo-stand
leer, dann greift keine dieser Regeln und beide Karten stehen normal da. */
@media(prefers-reduced-motion:no-preference){
/* Kurzer Weg statt weitem Flug: 26 Prozent der eigenen Breite reichen, damit
die Richtung erkennbar ist. Vorher waren es 60 Prozent, das war die
Bewegung, die Tim als hektisch empfunden hat. */
.bs-duo[data-duo-stand] .bs-duokarte{
transition:transform .58s cubic-bezier(.22,1,.36,1),opacity .42s ease}
.bs-duo[data-duo-stand="aus"] .bs-duokarte:first-child{opacity:0;transform:translateX(-26%)}
.bs-duo[data-duo-stand="aus"] .bs-duokarte:last-child{opacity:0;transform:translateX(26%)}
.bs-duo[data-duo-stand="beide"] .bs-duokarte{opacity:1;transform:none}
}
@media(max-width:860px){
.bs-duo{grid-template-columns:1fr;gap:16px}
}
/* ---------- Zeilenpaare auch auf dem Telefon ----------
Bis dahin galt das gemeinsame Zeilenraster erst ab 861 Pixeln. Auf dem
Telefon liegen die beiden Karten in einer Wischreihe, dort hatte jede
wieder ihr eigenes Raster: Die Trennlinien lagen auf unterschiedlichen
Hoehen und die Karten waren unterschiedlich hoch. Beim Wischen sprang das
Bild, und der angeschnittene Nachbar zeigte versetzte Linien.
Die Reihe ist deshalb kein Flex-Streifen mehr, sondern ein Raster mit
Spaltenfluss: dieselben Zeilen fuer beide Karten, jede Spalte so breit wie
das Sichtfeld. Damit ist beides erfuellt, was verlangt hat: die Linien
laufen auf gleicher Hoehe, und aendert sich eine Karte, nimmt die Nachbarin
dieselbe Groesse an. Das Wischen bleibt unveraendert, scroll-snap wirkt auf
Rasterfelder genauso wie auf Flex-Elemente.
Browser ohne subgrid (vor 2023) behalten den Flex-Streifen von vorher. */
@supports (grid-template-rows: subgrid){
@media(max-width:820px){
/* "grid-template-columns:none" muss stehen: Aus der Regel weiter oben
traegt .bs-duo auf dem Telefon noch "1fr" als ausdrueckliche Spalte.
Die erste Karte landete darin und schrumpfte auf ihre Mindestbreite
(gemessen 177 statt 350 Pixel), nur die zweite bekam die volle Breite.
Ohne ausdrueckliche Spalte sind beide Spalten implizit und beide
bekommen die 100 Prozent aus grid-auto-columns. */
[data-schieber] > .bs-duo--paare.spur{
display:grid;grid-auto-flow:column;
grid-template-columns:none;grid-auto-columns:100%;
grid-template-rows:auto repeat(var(--zeilen,5),auto);
column-gap:24px;row-gap:0;align-items:stretch}
[data-schieber] > .bs-duo--paare.spur > .bs-duokarte{
display:grid;grid-template-rows:subgrid;grid-row:1 / -1;align-content:start}
[data-schieber] > .bs-duo--paare.spur .bs-duoliste{
grid-row:2 / -1;grid-template-rows:subgrid}
/* Mittig in der Zeile: Ohne das klebt der kuerzere der beiden Saetze am
oberen Rand seines Feldes und die Trennlinie steht weit darunter. */
[data-schieber] > .bs-duo--paare.spur .bs-duoliste li{display:flex;align-items:center}
}
}
/* Auf dem Telefon liegen die Karten im Wisch-Schieber (13.08.). Dort darf
nichts mehr verschoben oder ausgeblendet werden: Eine Karte mit
opacity:0 wäre im Schieber eine leere Seite, und ein transform verschiebt
sie aus ihrem Schnappunkt. Die Einfahr-Regeln gelten deshalb erst ab 821.
Wichtig sind die beiden Selektoren mit:first-child und:last-child. Ohne
sie ist die Regel schwächer als die Einfahr-Regeln darüber und wird von
ihnen überstimmt, die Karten blieben also trotz dieser Korrektur unsichtbar
im Schieber stehen (gemessen am 15.08.). Familie. */
@media(max-width:820px){
.bs-duo[data-duo-stand] .bs-duokarte,
.bs-duo[data-duo-stand="aus"] .bs-duokarte:first-child,
.bs-duo[data-duo-stand="aus"] .bs-duokarte:last-child{
opacity:1;transform:none;transition:none}
}
/* ---------- Kennzahlen ---------- */
/* Kleiner und mittig: die Belegzahlen sollen den Abschnitt stützen,
nicht dominieren. Gruppe auf 840 px begrenzt und zentriert, Inhalt der Karten
mittig, Wert eine Stufe kleiner. */
.bs-kennzahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px;
max-width:840px;margin:0 auto}
.bs-kennzahl{border:1px solid var(--line);border-radius:14px;padding:22px 18px;background:var(--paper);
text-align:center}
/* Kennzahlen in der Grotesk wie im Shift auf der Startseite:
gleich breite Ziffern, keine Serifen-Versalien, damit Zahlen ueber alle
Seiten hinweg gleich aussehen. */
.bs-kennzahl .wert{display:block;font-family:var(--sans);font-size:clamp(26px,3.1vw,33px);
line-height:1;letter-spacing:-.02em;color:var(--violet);font-weight:600;
font-variant-numeric:tabular-nums;margin-bottom:10px}
/* Prozentzeichen kleiner und leicht abgesetzt, identisch zum Shift */
.bs-kennzahl .wert .pz{font-size:.52em;font-weight:600;letter-spacing:0;margin-left:.08em;
vertical-align:.06em}
.bs-kennzahl .bezeichnung{display:block;font-size:14.5px;line-height:1.55;color:var(--ink-soft)}
/* Der Beleg steht seit dem 15.08. einmal unter der Gruppe statt in jeder
Karte, Klasse ".quelle" aus stil.css, wie bei den Gallup-Zahlen der
Startseite. Die Karten werden dadurch schlanker, der Beleg bleibt am Ort.
Etwas mehr Luft als dort, weil hier Karten mit Rahmen darüber stehen. */
.bs-kennzahlen + .quelle{margin-top:14px}
/* ---------- Abgrenzung "Wann das Programm nicht passt" ----------
Bewusst kleiner als die Hauptabschnitte und mittig gesetzt:
ein ruhiger Schlussgedanke, der die Seite nicht noch einmal aufmacht.
Die Listenpunkte bleiben linksbuendig, zentrierte Aufzaehlungen mit
Symbolen davor sind schwer zu lesen. */
.bs-abgrenzung{max-width:620px;margin:44px auto 0;text-align:center}
.bs-abgrenzung h3{font-family:var(--serif);font-size:19px;color:var(--ink);
font-weight:600;margin:0 0 16px}
.bs-abgrenzung .bs-liste{text-align:left;display:inline-grid;gap:9px;margin:0 auto}
.bs-abgrenzung .bs-liste li{font-size:14.5px;line-height:1.55;padding-left:26px}
.bs-abgrenzung .bs-liste li::before{width:15px;height:15px;top:3px}
/* Deutlicher Schnitt vor dem Kernsatz: davor steht, wann das
Programm NICHT passt, danach, fuer wen es gemacht ist. Zwei Gedanken, die
sich thematisch unterscheiden, deshalb mehr Luft und eine Haarlinie. */
.bs-abgrenzung .kernsatz{margin:34px 0 0;padding-top:30px;
border-top:1px solid var(--line);
font-weight:600;font-size:15.5px;line-height:1.6;color:var(--ink)}
.bs-abgrenzung .nachsatz{margin:10px 0 0;font-size:14.5px;line-height:1.65;color:var(--faint)}
/* Seit die Ausschluss-Liste in der FAQ steht, trennt die Linie
nichts mehr, sie käme direkt unter der Drehkarte zu stehen. Muss hinter der
Grundregel stehen, sonst gewinnt diese bei gleicher Spezifität. */
.bs-abgrenzung--kurz{margin-top:38px}
.bs-abgrenzung--kurz .kernsatz{padding-top:0;border-top:none;margin-top:0}
/* Das Band steht als einziger Inhalt der Sektion, sein eigener oberer Abstand
käme zum Abstand der Sektion hinzu. */
#einstiege .testband{margin-top:0}
/* ---------- Aussage-Block: Ueberschrift links, Text rechts ----------
Haelt lange Textabschnitte flach, statt sie als schmale Saeule zu stapeln. */
.bs-satz{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(28px,5vw,64px);align-items:start}
.bs-satz h2{margin-bottom:0;max-width:none}
.bs-satz .einleitung{margin-bottom:0;max-width:none}
@media(max-width:820px){.bs-satz{grid-template-columns:1fr;gap:20px}}
/* ---------- Haeufige Fragen ---------- */
/* Abstand zur Ueberschrift. Stand bisher als style="margin-top:26px" direkt
im HTML der Programm-Seite, auf der FAQ-Seite waeren daraus fuenf gleiche
Wiederholungen geworden. Gleicher Wert, deshalb aendert sich dort nichts. */
.bs-faq{margin-top:26px}
.bs-faq{border-top:1px solid var(--line)}
/* ---------- Themen-Sprungmarken der FAQ-Seite ----------
Fuenf Themenbloecke sind zu viel zum Blinddurchscrollen. Bewusst schlichte
Textverweise in der Sans, keine zweite Knopf-Ebene neben dem Aufruf oben
rechts in der Kopfleiste. */
.bs-faq-themen{padding-top:22px;padding-bottom:0}
.bs-marken{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
justify-content:center;gap:12px 28px}
.bs-marken a{font-family:var(--sans);font-size:14px;color:var(--ink-soft)}
.bs-marken a:hover,.bs-marken a:focus-visible{color:var(--violet)}
/* Die Kopfleiste klebt 104 Pixel hoch ueber der Seite. Ohne diesen Abstand
verschwindet die angesprungene Ueberschrift darunter. */
.bs-abschnitt[id]{scroll-margin-top:124px}
.bs-faq details{border-bottom:1px solid var(--line)}
.bs-faq summary{cursor:pointer;list-style:none;display:flex;align-items:flex-start;gap:14px;
padding:19px 0;font-family:var(--serif);font-size:18px;line-height:1.4;color:var(--ink);font-weight:600}
.bs-faq summary::-webkit-details-marker{display:none}
.bs-faq summary::before{content:"+";flex-shrink:0;width:22px;height:22px;margin-top:2px;
border:1.5px solid var(--line);border-radius:6px;display:flex;align-items:center;
justify-content:center;font-family:var(--sans);font-size:16px;line-height:1;color:var(--violet)}
.bs-faq details[open] summary::before{content:"\2013"}
.bs-faq summary:focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:6px}
.bs-faq .antwort{padding:0 0 20px 36px;font-size:15.5px;line-height:1.68;color:var(--ink-soft);max-width:70ch}
/* ---------- Abschluss-Aufruf ----------
Trägt seit dem 14.08. denselben Nachthimmel wie das Kontakt-Band der
Startseite. Vorher war
es eine einfarbige Fläche. Drei Schichten wie dort: Bild, Verlauf, Inhalt.
isolation:isolate hält die Stapelung im Block, overflow:clip schneidet das
Bild an den abgerundeten Ecken ab (nicht hidden, das bricht sticky).
Der Verlauf liegt dicht hinter dem Text und öffnet sich zu den Rändern:
Mit gleichmäßigem Schleier lagen einzelne helle Sterne genau hinter der
Überschrift und drückten den Kontrast dort unter 4,5:1, während der
Mittelwert unauffällig blieb. Der Block ist flacher als das Kontakt-Band
der Startseite, deshalb sitzt der dichte Kern hier höher und breiter. */
.bs-schluss{position:relative;isolation:isolate;overflow:clip;
background:var(--nacht);border-radius:18px;padding:48px 44px;text-align:center;color:#fff}
.bs-schluss .kt-bild{position:absolute;inset:0;z-index:0;width:100%;height:100%;
object-fit:cover;object-position:50% 34%;opacity:.82}
.bs-schluss .kt-schleier{position:absolute;inset:0;z-index:1;
background:
radial-gradient(70% 78% at 50% 44%, hsla(282 30% 11% / .80) 0%, hsla(282 30% 11% / .46) 62%, hsla(282 30% 11% / .12) 100%),
linear-gradient(180deg, var(--nacht) 0%, hsla(282 30% 11% / .34) 30%, hsla(282 30% 11% / .38) 70%, var(--nacht) 100%)}
.bs-schluss-inhalt{position:relative;z-index:2}
.bs-schluss h2{color:#fff;margin-left:auto;margin-right:auto}
/* Der kursive Akzent steht hier auf dunklem Grund. Das normale Violett käme auf
2,1:1 und wäre unlesbar, deshalb dieselbe helle Fassung wie in den dunklen
Bändern der Startseite (gerechnet 8,5:1). */
.bs-schluss h2 em{color:var(--violet-hell)}
.bs-schluss p{color:#D9CFE0;font-size:16.5px;line-height:1.7;max-width:56ch;margin:0 auto 26px}
/* ---------- Abschluss-Band ueber die ganze Breite ----------
Tim zum bisherigen Kasten: "sieht komisch aus, warum nicht einfach wieder
lila Bereich wie oben ueber ganze Breite". Der Block laeuft jetzt randlos
von Kante zu Kante wie der Hero, ohne Radius und ohne Aussenabstand. Der
Inhalt bleibt in der Textbreite mittig. Die Sektion selbst traegt Bild und
Verlauf, deshalb faellt ihr eigenes Polster weg: die Werte stehen hier.
Bewusst hoeher gesetzt als der Kasten (72 statt 48 Pixel), sonst wirkt ein
randloses Band gequetscht. */
/* Höhe an das Kontakt-Band der Startseite angeglichen. Dort trägt der Block mehr Text und kommt auf 476
Pixel, die Abschluss-Bänder der Unterseiten lagen bei 358 bis 441. Da der
Inhalt kürzer ist, muss das Polster die Differenz tragen. */
.bs-abschnitt--band{position:relative;isolation:isolate;overflow:clip;
background:var(--nacht);border-top:none;border-bottom:none;
padding:clamp(56px,8.5vw,114px) 0;text-align:center;color:#fff}
.bs-abschnitt--band .kt-bild{position:absolute;inset:0;z-index:0;width:100%;height:100%;
object-fit:cover;object-position:50% 34%;opacity:.82}
.bs-abschnitt--band .kt-schleier{position:absolute;inset:0;z-index:1;
background:
radial-gradient(62% 74% at 50% 44%, hsla(282 30% 11% / .80) 0%, hsla(282 30% 11% / .46) 62%, hsla(282 30% 11% / .12) 100%),
linear-gradient(180deg, var(--nacht) 0%, hsla(282 30% 11% / .34) 30%, hsla(282 30% 11% / .38) 70%, var(--nacht) 100%)}
.bs-abschnitt--band .bs-schluss-inhalt{position:relative;z-index:2}
.bs-abschnitt--band h2{color:#fff;margin-left:auto;margin-right:auto;max-width:26ch}
.bs-abschnitt--band h2 em{color:var(--violet-hell);font-style:italic}
.bs-abschnitt--band p{color:#D9CFE0;font-size:16.5px;line-height:1.7;max-width:56ch;margin:0 auto 26px}
.bs-abschnitt--band .knopfzeile{margin-bottom:0}
@media(max-width:640px){
.bs-schluss{padding:32px 22px;border-radius:14px}
/* Die frueheren 88 Pixel Kopf-Polster sind am 23.08. entfallen. Sie wurden
ohnehin vom spaeteren Block "max-width:820px" ueberschrieben und standen
nur noch als toter Wert da. */
.bs-abschnitt{padding:46px 0}
.bs-abschnitt--band{padding:46px 0}
}
/* ---------- Portraet ----------
Bild und Text beginnen auf derselben Hoehe und enden auch dort.
Bis zum 23.08. war das Bild quadratisch und damit 300 Pixel hoch, waehrend
die Textspalte durch die neue Haken-Liste auf ueber 500 Pixel wuchs. Die
Liste ragte unter dem Bild heraus und rechts unten stand eine leere Ecke.
Loesung ist NICHT ein breiteres Bild: Bei quadratischem Zuschnitt muesste es
ueber 500 Pixel breit werden und haette der Textspalte die Lesebreite
genommen. Stattdessen fuellt es jetzt die Zeilenhoehe und wird dabei zum
Hochformat. "align-items:stretch" (Vorgabe im Raster) plus "height:100%"
uebernehmen das, die feste Seitenverhaeltnis-Angabe muss dafuer weg, sonst
rechnet sie gegen die Hoehe. Der Zuschnitt sitzt weiterhin auf 22 Prozent
von oben, damit das Gesicht im Bild bleibt.
Die Spalte ist von 300 auf 340 Pixel gewachsen: Bei 300 Pixel Breite und
rund 560 Pixel Hoehe waere das Bild sehr schmal geworden. 340 zu 560 liegt
nahe am klassischen Hochformat 2:3 und laesst der Textspalte weiterhin
genug Breite. */
.bs-portrait{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:40px;
align-items:stretch;max-width:980px;margin:0 auto}
.bs-portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;
border-radius:16px;display:block}
/* Die Textspalte ist auf Lesebreite begrenzt: sonst laufen die
Zeilen so weit, dass der Text kuerzer ist als das Bild und rechts unten
eine leere Ecke bleibt. Schmaler heisst mehr Zeilen, damit reicht der Text
bis zur Bildunterkante. */
.bs-portrait-text{max-width:none}
.bs-portrait-text p{font-size:16.5px;line-height:1.72;color:var(--ink-soft);margin:0 0 16px}
.bs-portrait-text p:first-child{margin-top:-4px} /* Schriftlinie auf Bildkante */
.bs-portrait-text p:last-child{margin-bottom:0}
/* Die Stationen stehen als eine Spalte mittig unter Bild und Text, der
LinkedIn-Knopf darunter ebenfalls mittig. */
.bs-fakten{margin-top:38px;padding-top:32px;border-top:1px solid var(--line);
max-width:660px;margin-left:auto;margin-right:auto}
.bs-fakten .btn{display:flex;width:fit-content;margin:0 auto}
@media(max-width:820px){
/* Auf der Karte "Cognizant" brach die Zeile um, die Angabe
"Geschaeftsleitungsmitglied · 2013 bis 2018" ist mit 253 Pixeln die
laengste der vier. Gemessen bei 390 Pixel Fensterbreite: 89 + 14 + 253 =
356 Pixel bei 308 verfuegbaren.
Vorgabe: eine Zeile, notfalls kleinere Schrift, dann aber auf JEDER
Karte. Deshalb gilt der kleinere Grad hier fuer alle vier Stationen und
nicht nur fuer die eine. Neu gerechnet: 75 + 10 + 214 = 299 Pixel.
"flex-wrap:nowrap" haelt beide Teile zusammen, "min-width:0" erlaubt dem
Namen zur Not zu schrumpfen statt die Zeile aufzubrechen. */
.bs-phase-kopf{flex-wrap:nowrap;column-gap:10px}
.bs-phase-name{font-size:16px;min-width:0}
.bs-phase-zeit{font-size:11px}
.bs-portrait{grid-template-columns:1fr;gap:24px}
/* Tim 23.08.: Foto mittig. Es stand linksbuendig unter einer mittig
gesetzten Ueberschrift und wirkte dadurch verrutscht.
Auf dem Telefon stehen Bild und Text untereinander, es gibt also keine
gemeinsame Zeilenhoehe mehr, an der sich das Bild ausrichten koennte.
Deshalb hier zurueck auf das Quadrat: "height:100%" haette sonst keinen
Bezugswert und das Bild waere in sich zusammengefallen. */
.bs-portrait img{max-width:300px;margin-left:auto;margin-right:auto;
height:auto;aspect-ratio:1}
.bs-portrait-text p:first-child{margin-top:0}
}
/* ---------- Vierer-Raster fuer die acht Essentials ----------
Abstand wie bei den uebrigen Rastern von 18 auf 24 Pixel */
.bs-vier{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media(max-width:1024px){.bs-vier{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.bs-vier{grid-template-columns:1fr}}
/* ---------- Bewegte Icons der acht Essentials ----------
Ausgeloest wird ueber die ganze Karte, nicht ueber das kleine Icon:
der Zeiger muss nichts treffen. Nur transform, opacity und
stroke-dashoffset, damit nichts neu umbricht.
Der Ausloeser ist die Klasse "ico-laeuft" statt:hover.
js/seite.js setzt sie beim Betreten und nimmt sie erst zurueck, wenn die
Animation durchgelaufen ist. Mit:hover brach sie ab, sobald die Maus die
Karte verliess, und das sah nach einem Fehler aus. Die Tastatur-Fassung
ueber:focus-within bleibt daneben bestehen.
Der ganze Block ist in "keine reduzierte Bewegung" gekapselt. */
@media(prefers-reduced-motion:no-preference){
/* 1 · Wachstumsplan: die Rakete fliegt oben rechts raus und kommt von
links unten wieder herein. Der Sprung passiert im unsichtbaren Zustand,
deshalb wirkt es wie eine Runde statt wie ein Zuruecksetzen. */
.bs-karte.ico-laeuft .bs-ico--rakete .flieger,
.bs-karte:focus-within .bs-ico--rakete .flieger{animation:bs-raketenflug .95s cubic-bezier(.5,0,.3,1)}
/* 2 und 3 · Menschen und Meetings: die Figur wackelt */
.bs-ico--wackeln svg{transform-origin:50% 85%}
.bs-karte.ico-laeuft .bs-ico--wackeln svg,
.bs-karte:focus-within .bs-ico--wackeln svg{animation:bs-wackeln .62s ease}
/* 4 · Vertrieb: das Flaechendiagramm zeichnet sich, im Tempo des Wackelns */
.bs-ico--zeichnen svg > *{stroke-dasharray:1}
.bs-karte.ico-laeuft .bs-ico--zeichnen svg > *,
.bs-karte:focus-within .bs-ico--zeichnen svg > *{animation:bs-zeichnen .78s ease forwards}
/* 5 · Finanzen: nur die Kurve im Blatt entwickelt sich */
.bs-ico--kurve .kurve{stroke-dasharray:1}
.bs-karte.ico-laeuft .bs-ico--kurve .kurve,
.bs-karte:focus-within .bs-ico--kurve .kurve{animation:bs-zeichnen .78s ease forwards}
/* 6 · Technologie: der Bildschirm klappt hoch, bewusst gemaechlich */
.bs-ico--laptop .schirm{transform-box:fill-box;transform-origin:50% 100%}
.bs-karte.ico-laeuft .bs-ico--laptop .schirm,
.bs-karte:focus-within .bs-ico--laptop .schirm{animation:bs-klappen .95s cubic-bezier(.34,1.1,.4,1)}
/* 7 · Prozesse: die drei Pfeile erscheinen nacheinander */
.bs-karte.ico-laeuft .bs-ico--pfeile path,
.bs-karte:focus-within .bs-ico--pfeile path{animation:bs-auftauchen .42s ease backwards}
.bs-karte.ico-laeuft .bs-ico--pfeile path:nth-child(2),
.bs-karte:focus-within .bs-ico--pfeile path:nth-child(2){animation-delay:.18s}
.bs-karte.ico-laeuft .bs-ico--pfeile path:nth-child(3),
.bs-karte:focus-within .bs-ico--pfeile path:nth-child(3){animation-delay:.36s}
/* 8 · Beziehungen: die drei bauen sich nacheinander auf, erst die vordere
Person, dann die linke, dann die rechte. */
.bs-ico--gruppe g{transform-box:fill-box;transform-origin:50% 100%}
.bs-karte.ico-laeuft .bs-ico--gruppe g,
.bs-karte:focus-within .bs-ico--gruppe g{animation:bs-dazukommen .46s cubic-bezier(.22,1,.36,1) backwards}
.bs-karte.ico-laeuft .bs-ico--gruppe .p-links,
.bs-karte:focus-within .bs-ico--gruppe .p-links{animation-delay:.3s}
.bs-karte.ico-laeuft .bs-ico--gruppe .p-rechts,
.bs-karte:focus-within .bs-ico--gruppe .p-rechts{animation-delay:.6s}
}
@keyframes bs-wackeln{
0%,100%{transform:rotate(0)}
22%{transform:rotate(-9deg)}
48%{transform:rotate(7deg)}
74%{transform:rotate(-4deg)}
}
@keyframes bs-zeichnen{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes bs-klappen{from{transform:scaleY(.06)}to{transform:scaleY(1)}}
@keyframes bs-auftauchen{from{opacity:0;transform:translateX(-4px)}to{opacity:1;transform:none}}
/* Raketenflug: oben rechts aus dem Bild, unsichtbar nach links unten
umsetzen, von dort wieder herein auf den Ausgangsplatz. */
@keyframes bs-raketenflug{
0%{transform:none;opacity:1}
36%{transform:translate(190%,-190%);opacity:0}
37%{transform:translate(-190%,190%);opacity:0}
52%{opacity:1}
100%{transform:none;opacity:1}
}
/* Eine Person taucht auf: waechst aus dem Boden ins Bild */
@keyframes bs-dazukommen{
from{opacity:0;transform:scale(.55) translateY(2px)}
to{opacity:1;transform:none}
}
/* ---------- Zwei kleinere Einstiege (Klarheits-Workshop, Wachstumstest) ---------- */
.bs-karte--einstieg{display:flex;flex-direction:column}
.bs-karte--einstieg h3{font-size:22px}
.bs-karte--einstieg .bs-liste{margin:16px 0}
.bs-karte--einstieg .bs-anrechnung{font-size:13.5px;color:var(--faint);margin:0 0 20px}
.bs-karte--einstieg .btn{margin-top:auto;align-self:flex-start}
/* ===========================================================================
Kompakter Rhythmus auf dem Telefon, Gegenstück zum Block in
stil.css. Inhalt bleibt vollständig, nur enger gesetzt.
=========================================================================== */
@media (max-width:820px){
.bs-abschnitt{padding:42px 0}
.bs-raum{padding:0 20px}
/* Zwischen Kopfleiste und Seitenkopf standen 80 Pixel. Auf dem
Telefon ist das eine halbe Bildschirmhoehe, bevor der erste Inhalt kommt.
Jetzt derselbe Wert wie seitlich (20 Pixel, siehe.bs-raum darueber), der
Seitenkopf steht also gleich weit von oben wie von den Raendern.
Betrifft alle Seiten mit ".bs-kopf": Ueber mich, Haeufige Fragen,
Impressum und Datenschutz. Seiten mit Bild-Hero sind nicht betroffen,
dort schiebt sich der Hero bewusst unter die Kopfleiste.
Der Wert gehoert AN DIESE Stelle und nicht in einen eigenen Block weiter
oben: Die Regel hier steht spaeter in der Datei und haette einen frueheren
Versuch bei gleicher Staerke wieder ueberschrieben (Familie). */
.bs-kopf{padding:20px 0 4px}
.bs-abschnitt .kicker{font-size:11px;margin-bottom:12px}
.bs-kopf h1{font-size:clamp(26px,6.8vw,34px);line-height:1.2}
.bs-kopf .lead{font-size:16px;line-height:1.6;margin-top:14px}
.bs-abschnitt h2.mitte{font-size:clamp(24px,6.2vw,30px)}
.bs-abschnitt .einleitung{font-size:15.5px;line-height:1.6}
.bs-abschnitt h2{margin-bottom:14px}
/* Karten im Schieber: einheitlich knapperes Polster, sonst wird der
Schieber so hoch wie die längste Karte plus deren Luft. */
.bs-karte,.bs-duokarte,.bs-phase{padding:22px 20px}
.bs-duoliste li{padding:11px 0;font-size:14.5px}
.bs-kennzahl{padding:18px 16px}
.bs-satz{gap:16px}
.bs-schluss{padding:30px 20px}
.bs-abgrenzung--kurz{margin-top:26px}
/* Der Schnitt bleibt sichtbar, faellt aber in den kompakten Rhythmus:
42 Pixel wie ein Abschnitt, sonst steht auf dem Telefon eine Luecke von
ueber 90 Pixeln zwischen zwei Karten-Gruppen.
Korrektur 19.08.: Ueber dem Schnitt
steht auf dem Telefon die Punktanzeige der Wischreihe davor, die selbst
20 Pixel Abstand mitbringt. Gemessen waren es dadurch 62 statt 42 Pixel,
also mehr Luft als zwischen zwei ganzen Abschnitten. Der Wert traegt
jetzt nur noch die Differenz. */
.bs-schnitt{margin-top:22px}
/* Dasselbe unter dem Zwischenkopf: auch ueber ihm steht eine Punktanzeige. */
.bs-zwischenkopf{margin-top:30px;font-size:21px}
/* Und darunter, vor der naechsten Wischreihe, stand der Abstand aus dem
HTML (22 Pixel) unmittelbar ueber den Karten. Das ist stimmig, bleibt. */
}
/* Auf dem Telefon gibt es kein Überfahren, der Balken bliebe unsichtbar und
wäre totes Gewicht. Hier steht er dauerhaft und setzt unten den Farbakzent. */
@media (max-width:820px){
.bs-vier .bs-karte .balken{transform:scaleX(1)}
.bs-vier .bs-karte p{margin-bottom:16px}
}
/* ===========================================================================
Rechtstexte: Impressum und Datenschutzerklärung
Seit dem 23.08. echte Seiten im Seitendesign statt Platzhaltern. Reine
Fließtext-Seiten, deshalb nur Typografie und Abstände, keine Karten.
Lesebreite läuft über ".bs-schmal" am Elternteil.
=========================================================================== */
.rechtstext{max-width:74ch}
.rechtstext h2{font-size:clamp(23px,2.6vw,28px);margin:44px 0 0}
.rechtstext > h2:first-child{margin-top:0}
.rechtstext h3{font-size:18px;margin:28px 0 0;color:var(--ink)}
.rechtstext p{margin:12px 0 0;font-size:16px;line-height:1.72;color:var(--ink-soft)}
.rechtstext p b{color:var(--ink);font-weight:600}
/* Anschriften stehen als Block und tragen keinen zusätzlichen Zeilenabstand,
sonst wirken vier kurze Zeilen wie vier Absätze. */
.rechtstext .rt-anschrift{line-height:1.6;color:var(--ink);font-weight:500}
/* Tippflaeche: Ein Verweis im Fliesstext ist bei 16 Pixel Schrift nur 22 Pixel
hoch, gefordert sind 24 (WCAG 2.2 AA, 2.5.8). Senkrechtes Polster an einem
Inline-Element vergroessert die Trefferflaeche auf 26 Pixel, ohne die
Zeilenhoehe zu veraendern: Es verschiebt also nichts im Satz. */
.rechtstext a{color:var(--violet);text-decoration:underline;text-underline-offset:2px;
padding-top:2px;padding-bottom:2px}
.rechtstext a:hover{color:var(--flame)}
/* Lange Adressen dürfen umbrechen, sonst schiebt eine einzelne URL die ganze
Seite auf dem Telefon seitlich heraus. */
.rechtstext a[href^="http"]{word-break:break-word}
.rechtstext code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
font-size:14.5px;background:var(--paper-2);border:1px solid var(--line);
border-radius:5px;padding:1px 6px;color:var(--ink);word-break:break-word}
@media (max-width:820px){
.rechtstext h2{margin-top:34px;font-size:22px}
.rechtstext h3{margin-top:22px;font-size:17px}
.rechtstext p{font-size:15.5px;line-height:1.68}
}