/* ProBit Rechtsseiten — Impressum (Slug: impressum). Gestaltete Info-Karte für Herausgeber/Firmendaten. Nutzt tokens + subpages. Text-Farben mit `body:not(.home) .entry-content`-Prefix (schlägt Theme-Regeln). */ .pb-legal__intro { color: var(--pb-text-muted); margin: 0 0 1.1rem; } .pb-legal-card { position: relative; background: var(--pb-surface); border: 1px solid var(--pb-card-border); border-radius: var(--pb-radius-lg); padding: clamp(1.5rem, 3vw, 2.2rem); box-shadow: var(--pb-shadow-sm); max-width: 640px; overflow: hidden; } .pb-legal-card__bit { position: absolute; top: 16px; right: 16px; width: 12px; height: 12px; background: var(--pb-cyan); transform: rotate(-15deg); } body:not(.home) .entry-content .pb-legal-card__company { margin: 0 0 1.1rem; font-size: var(--pb-fs-md); font-weight: 600; color: var(--pb-navy); line-height: var(--pb-lh-snug); } body:not(.home) .entry-content .pb-legal-card__company span { font-size: var(--pb-fs-sm); font-weight: 400; color: var(--pb-text-muted); } .pb-legal-card__list { list-style: none; margin: 0 0 1.3rem; padding: 0; } body:not(.home) .entry-content .pb-legal-card__list li { display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 0.55rem; padding: 0; color: var(--pb-text); font-size: var(--pb-fs-base); } body:not(.home) .entry-content .pb-legal-card__list li::marker { content: none; } .pb-legal-card__list li svg { flex: none; margin-top: 3px; color: var(--pb-cyan-ink); } body:not(.home) .entry-content .pb-legal-card__list a { color: var(--pb-navy); text-decoration: none; } body:not(.home) .entry-content .pb-legal-card__list a:hover, body:not(.home) .entry-content .pb-legal-card__list a:focus-visible { color: var(--pb-cyan-ink); text-decoration: underline; } .pb-legal-card__facts { margin: 0; display: grid; gap: 0.55rem; border-top: 1px solid var(--pb-line); padding-top: 1.2rem; } .pb-legal-card__facts > div { display: flex; flex-wrap: wrap; gap: 0.2rem 0.8rem; } body:not(.home) .entry-content .pb-legal-card__facts dt { margin: 0; color: var(--pb-text-muted); font-size: var(--pb-fs-sm); min-width: 168px; } body:not(.home) .entry-content .pb-legal-card__facts dd { margin: 0; color: var(--pb-navy); font-size: var(--pb-fs-sm); font-weight: 600; } .pb-legal__credits { margin-top: clamp(1.8rem, 4vw, 2.6rem); } body:not(.home) .entry-content .pb-legal__credits h2 { font-size: var(--pb-fs-lg); color: var(--pb-navy); margin: 0 0 0.6rem; display: inline-flex; align-items: center; gap: 0.5rem; } body:not(.home) .entry-content .pb-legal__credits h2::before { content: ""; width: 10px; height: 10px; background: var(--pb-cyan); transform: rotate(-15deg); flex: none; } body:not(.home) .entry-content .pb-legal__credits p { color: var(--pb-text-muted); font-size: var(--pb-fs-sm); line-height: 1.9; margin: 0; } /* ===================================================================== RECHTSTEXTE AUF DAS SEITENMASS (Tag 11, User-Wunsch) Gemessen @1440 vorher: Datenschutz-Inhalt 145-825 (Lesespalte 680), Impressum-Karte 145-785 (gekappt auf 640) - waehrend der Karriere-Block auf beiden Seiten von 145 bis 1281 laeuft. Dadurch stand der Text als schmale Saeule am linken Rand. `#page`-Prefix ist Pflicht, sonst schlaegt `body:not(.home) .entry-content > p` aus subpages.css bei gleicher Spezifitaet ueber die Ladereihenfolge. ===================================================================== */ body.page-datenschutz #page .entry-content > p, body.page-datenschutz #page .entry-content > ul, body.page-datenschutz #page .entry-content > ol, body.page-datenschutz #page .entry-content > h2, body.page-impressum #page .entry-content > p, body.page-impressum #page .entry-content > h2 { max-width: none; } /* Volle Breite bei 19px waeren ~118 Zeichen je Zeile gewesen. Eine Stufe groesser (Lede) bringt das auf das Mass, das site-weit ohnehin gilt. */ body.page-datenschutz #page .entry-content > p, body.page-datenschutz #page .entry-content > ul li { font-size: var(--pb-fs-lede); line-height: 1.55; } /* --- Impressum: Karte ueber die volle Breite, Inhalt zweispaltig ------- */ body.page-impressum .pb-legal-card { max-width: none; } @media (min-width: 900px) { body.page-impressum .pb-legal-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(2rem, 5vw, 4rem); align-items: start; } body.page-impressum .pb-legal-card__company { grid-area: 1 / 1 / 2 / 2; } body.page-impressum .pb-legal-card__list { grid-area: 2 / 1 / 3 / 2; margin-bottom: 0; } /* Die Trennlinie wandert von oben nach links - im Nebeneinander trennt sie die Spalten, nicht mehr die Zeilen. */ body.page-impressum .pb-legal-card__facts { grid-area: 1 / 2 / 3 / 3; align-self: center; border-top: none; border-left: 1px solid var(--pb-line); padding-top: 0; padding-left: clamp(1.5rem, 3vw, 2.5rem); } } /* ===================================================================== IMPRESSUM-KARTE: TYPOGRAFIE BERUHIGT (Tag 11, User-Befund) Gemessen war es NICHT eine zweite Schriftart - alles ist Barlow. Unruhig machten es die Varianten auf engem Raum: 3 Groessen 19,2 / 18 / 15 px 3 Gewichte 400 / 600 / 700 3 Farben Navy / #1a1a1a / #565656 Dazu zwei echte Fehler: 1. Das Etikett (dt, 700) wog SCHWERER als sein Wert (dd, 600) - das dreht die Hierarchie um; ein Label gehoert leichter als die Angabe. 2. Die beiden Kartenspalten liefen mit 18px links gegen 15px rechts nebeneinander - der Groessensprung war die eigentliche Unruhe. Und der Firmenname sollte laut Regel `--pb-fs-md` (21,6px) sein, kam aber mit 19,2px an: `#page p{font-size:1.2rem}` schlaegt die Klasse. Jetzt: eine Groesse fuer beide Spalten, Label leichter als Wert, und der Firmenname auf derselben Stufe wie die "Fotocredits"-Ueberschrift. ===================================================================== */ #page .pb-legal-card__company { font-size: var(--pb-fs-lg); font-weight: 700; line-height: 1.3; color: var(--pb-navy); } body:not(.home) .entry-content .pb-legal-card__company span { display: block; margin-top: 0.15rem; font-size: var(--pb-fs-sm); font-weight: 400; line-height: 1.4; color: var(--pb-text-muted); } /* Beide Spalten auf eine Groesse und einen Zeilenabstand. */ body:not(.home) .entry-content .pb-legal-card__list li, body:not(.home) .entry-content .pb-legal-card__facts dt, body:not(.home) .entry-content .pb-legal-card__facts dd { font-size: var(--pb-fs-base); line-height: 1.55; } body:not(.home) .entry-content .pb-legal-card__facts dt { font-weight: 400; /* war 700 - schwerer als der Wert */ color: var(--pb-text-muted); min-width: 190px; /* 168px reichte bei 18px nicht mehr */ } body:not(.home) .entry-content .pb-legal-card__facts dd { font-weight: 600; color: var(--pb-navy); }