).
*
* 1px-Linien, klare Kopfzeile in Mono, horizontaler Scroll auf schmalen
* Viewports. Der Wrapper ist per tabindex fokussierbar, sobald er scrollt
* (siehe navigation.js: keine Änderung nötig, Browser vergeben den Fokus
* für scrollbare Regionen selbst); dekoratives Markup wird nicht ergänzt.
*/
.table-scroll {
margin: var(--space-6) 0;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border: var(--border-hairline);
background-color: var(--color-surface);
}
.table-scroll table,
.table {
width: 100%;
min-width: 32rem;
margin: 0;
border-collapse: collapse;
font-size: var(--text-small);
line-height: var(--leading-tight);
}
.table-scroll th,
.table-scroll td,
.table th,
.table td {
padding: var(--space-3) var(--space-4);
border-bottom: var(--border-hairline);
text-align: left;
vertical-align: top;
}
.table-scroll th,
.table th {
font-family: var(--font-mono);
font-size: var(--text-label);
font-weight: var(--weight-medium);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--color-text-muted);
background-color: var(--color-background);
border-bottom: var(--border-strong);
white-space: nowrap;
}
.table-scroll tbody tr:last-child td,
.table tbody tr:last-child td {
border-bottom: 0;
}
.table-scroll td code {
white-space: nowrap;
}
/* Ausrichtung aus der Markdown-Tabelle (align-Attribut) respektieren. */
.table-scroll th[align="right"],
.table-scroll td[align="right"] {
text-align: right;
}
.table-scroll th[align="center"],
.table-scroll td[align="center"] {
text-align: center;
}
/* --- components/media.css --- */
/*
* Abbildungen und Medien-Provenienz.
*
*
*
* Bildunterschrift
*
*
* Das Provenienz-Label ist reiner Text im HTML (serverseitig lokalisiert) und
* liegt als Overlay unten rechts im Bildrahmen - damit bezieht es sich
* unmissverständlich auf das Bild, nicht auf den Beitrag. CSS gestaltet nur:
* Ink-Fläche, Mono-Versalien, scharfe Kanten, kein Schatten, kein Glow,
* kein ::before/::after mit Inhalt, keine Icons.
*/
.figure {
margin: var(--space-8) 0;
max-width: 100%;
}
/* Bildrahmen: Bezugsrahmen für das Overlay-Label. */
.figure__frame {
position: relative;
display: block;
max-width: 100%;
}
.figure img {
display: block;
width: 100%;
height: auto;
border: var(--border-hairline);
background-color: var(--color-surface);
}
.figure__caption {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--space-2) var(--space-4);
padding: var(--space-3) 0;
border-bottom: var(--border-hairline);
font-family: var(--font-mono);
font-size: var(--text-meta);
color: var(--color-text-muted);
}
.figure__caption strong {
color: var(--color-ink);
font-weight: var(--weight-medium);
}
.media-provenance {
display: inline-block;
padding: var(--space-1) var(--space-2);
border: 0;
border-radius: 0;
background-color: var(--color-ink-surface);
color: var(--color-on-ink);
font-family: var(--font-mono);
font-size: var(--text-label);
line-height: 1.3;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
text-align: right;
white-space: normal;
}
/* Im Bildrahmen: Overlay unten rechts mit Inset, bricht bei Bedarf um, läuft nie aus dem Bild. */
.figure__frame .media-provenance {
position: absolute;
right: var(--space-3);
bottom: var(--space-3);
max-width: calc(100% - 2 * var(--space-3));
}
@media (max-width: 575.98px) {
.figure__frame .media-provenance {
right: var(--space-2);
bottom: var(--space-2);
max-width: calc(100% - 2 * var(--space-2));
}
}
/* Portrait-Ausnahme des Design Freeze: Autorportraits dürfen rund sein. */
.portrait {
border-radius: var(--radius-portrait);
object-fit: cover;
}
/* --- components/cards.css --- */
/*
* Teaser, Listen, Seitenköpfe, Brotkrumen, Themenindex, Empty State.
*
* Teaser sind Editorial-Karten mit 1px-Linie (keine Card-Shadows):
* Kicker/Kategorie in Mono, Titel in Inter, Description gedämpft,
* Metadaten unten in Mono.
*/
/* --- Seitenkopf ---------------------------------------------------------- */
.page-header {
max-width: var(--width-reading);
margin-bottom: var(--space-10);
}
.page-header__kicker {
display: block;
margin-bottom: var(--space-3);
}
.page-header__title {
margin-bottom: var(--space-4);
/* Lange Einzelwörter (z. B. "Architekturentscheidung") bei 375px sauber trennen statt über die Spalte hinauslaufen. */
overflow-wrap: anywhere;
hyphens: auto;
}
.page-header__intro {
margin-bottom: 0;
}
/* --- Brotkrumen ---------------------------------------------------------- */
.breadcrumb {
margin-bottom: var(--space-6);
}
.breadcrumb__list {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin: 0;
padding: 0;
list-style: none;
font-family: var(--font-mono);
font-size: var(--text-label);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--color-text-muted);
}
.breadcrumb__item + .breadcrumb__item::before {
content: "/";
margin-right: var(--space-2);
color: var(--color-border);
}
.breadcrumb__link {
color: var(--color-text-muted);
text-decoration: none;
}
.breadcrumb__link:hover {
color: var(--color-ink);
text-decoration: underline;
}
.breadcrumb__current {
color: var(--color-accent);
}
/* --- Teaser -------------------------------------------------------------- */
.teaser {
display: flex;
flex-direction: column;
height: 100%;
background-color: var(--color-surface);
border: var(--border-hairline);
}
.teaser__media {
display: block;
border-bottom: var(--border-hairline);
}
.teaser__media .figure {
margin: 0;
}
.teaser__media .figure img {
border: 0;
aspect-ratio: 16 / 9;
object-fit: cover;
}
.teaser__media .figure__frame {
height: 100%;
}
.teaser__body {
display: flex;
flex-direction: column;
flex: 1 1 auto;
padding: var(--space-5);
}
@media (min-width: 992px) {
.teaser__body {
padding: var(--space-6);
}
}
.teaser__kicker {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin: 0 0 var(--space-3);
}
.teaser__title {
margin: 0 0 var(--space-3);
font-size: var(--text-h3);
line-height: var(--leading-heading);
}
.teaser__link {
color: var(--color-ink);
text-decoration: none;
}
.teaser__link:hover {
color: var(--color-accent);
text-decoration: underline;
text-decoration-thickness: 2px;
}
.teaser__description {
margin: 0 0 var(--space-4);
color: var(--color-text-muted);
font-size: var(--text-small);
max-width: none;
}
.teaser__meta {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-4);
margin: auto 0 0;
padding-top: var(--space-3);
border-top: var(--border-hairline);
font-family: var(--font-mono);
}
/* Featured: großer Titel, breite Beschreibung. */
.teaser--featured .teaser__title {
font-size: var(--text-h2);
}
.teaser--featured .teaser__description {
font-size: var(--text-body-lg);
max-width: 60ch;
}
@media (min-width: 992px) {
.teaser--featured {
flex-direction: row-reverse;
}
.teaser--featured .teaser__media {
flex: 0 0 45%;
border-bottom: 0;
border-left: var(--border-hairline);
}
/* Formatfüllend wie im Referenzscreen: Bild füllt die Medienspalte in
* voller Höhe (object-fit: cover), das Provenienz-Label bleibt darunter.
* Keine Bildmaße nötig. */
.teaser--featured .teaser__media .figure {
height: 100%;
}
.teaser--featured .teaser__media .figure img {
flex: 1 1 auto;
min-height: 0;
height: 100%;
aspect-ratio: auto;
}
.teaser--featured .teaser__body {
padding: var(--space-10);
}
}
/* Kompakt: Zeile ohne Bild (Related, Serienteile). */
.teaser--compact {
border: 0;
border-bottom: var(--border-hairline);
background: none;
}
.teaser--compact .teaser__body {
padding: var(--space-4) 0;
}
.teaser--compact .teaser__title {
font-size: var(--text-h4);
}
.teaser--compact .teaser__meta {
border-top: 0;
padding-top: 0;
}
/* --- Listen -------------------------------------------------------------- */
.teaser-list {
margin: 0;
padding: 0;
list-style: none;
}
.teaser-list--grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--grid-gap);
}
@media (min-width: 768px) {
.teaser-list--grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 992px) {
.teaser-list--grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.teaser-list--list {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-6);
max-width: var(--width-wide);
}
.teaser-list--list .teaser {
flex-direction: column;
}
@media (min-width: 768px) {
.teaser-list--list .teaser {
flex-direction: row;
}
.teaser-list--list .teaser__media {
flex: 0 0 18rem;
border-bottom: 0;
border-right: var(--border-hairline);
}
.teaser-list--list .teaser__media .figure {
height: 100%;
}
.teaser-list--list .teaser__media .figure img {
flex: 1 1 auto;
min-height: 0;
height: 100%;
aspect-ratio: auto;
}
}
.teaser-list--compact {
display: block;
border-top: var(--border-hairline);
}
.dossier__list {
margin: 0;
padding: 0;
list-style: none;
border-top: var(--border-hairline);
counter-reset: dossier;
}
.dossier__item {
display: grid;
grid-template-columns: 3rem minmax(0, 1fr);
gap: var(--space-4);
counter-increment: dossier;
}
.dossier__item::before {
content: counter(dossier, decimal-leading-zero);
padding-top: var(--space-5);
font-family: var(--font-mono);
font-size: var(--text-meta);
color: var(--color-accent);
}
.dossier__parts-heading {
margin-top: var(--space-10);
}
.dossier__body {
margin-bottom: var(--space-10);
}
.empty-state {
padding: var(--space-6);
border: var(--border-hairline);
background-color: var(--color-surface);
color: var(--color-text-muted);
max-width: var(--width-reading);
}
/* --- Themenindex --------------------------------------------------------- */
.topic-index {
display: grid;
grid-template-columns: minmax(0, 1fr);
margin: 0;
padding: 0;
list-style: none;
border: var(--border-hairline);
background-color: var(--color-surface);
}
@media (min-width: 768px) {
.topic-index {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 992px) {
.topic-index {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.topic-index__item {
display: flex;
flex-direction: column;
gap: var(--space-3);
min-height: 6rem;
padding: var(--space-5);
border-bottom: var(--border-hairline);
border-right: var(--border-hairline);
}
.topic-index__link,
.topic-index__name {
font-weight: var(--weight-semibold);
color: var(--color-ink);
text-decoration: none;
}
.topic-index__link:hover {
color: var(--color-accent);
text-decoration: underline;
}
/* --- Startseite ---------------------------------------------------------- */
.home-intro__title {
max-width: 14ch;
margin-bottom: var(--space-6);
}
/* --- components/hero.css --- */
/*
* Startseite: Hero mit Positionierung und technischem Themenpanel,
* technische Praxis (Engineering Case Study) mit Architekturpanel,
* Autorensektion. Editorial Precision: Mono-Labels, 1px-Linien, Ink-Flächen,
* keine SaaS-Hero-Optik, keine CTA-Wand.
*/
.hero__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-8);
align-items: center;
}
@media (min-width: 992px) {
.hero__grid {
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
gap: var(--space-12);
}
}
.hero__kicker {
margin-bottom: var(--space-5);
}
.hero__title {
max-width: 16ch;
margin-bottom: var(--space-5);
/* "Softwareentwicklung." ist bei 375px breiter als die Spalte: sauber trennen statt überlaufen. */
overflow-wrap: anywhere;
hyphens: auto;
}
.hero__lead {
max-width: 56ch;
margin-bottom: var(--space-4);
}
.hero__note {
font-family: var(--font-mono);
color: var(--color-text-muted);
margin-bottom: var(--space-6);
}
.hero__link {
margin: 0;
}
/* --- Technisches Panel ---------------------------------------------------- */
.hero-panel {
background-color: var(--color-ink-surface);
color: var(--color-on-ink);
border: 1px solid var(--color-border-on-ink);
font-family: var(--font-mono);
}
.hero-panel__bar {
display: flex;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--color-border-on-ink);
}
.hero-panel__bar--bottom {
border-bottom: 0;
border-top: 1px solid var(--color-border-on-ink);
}
.hero-panel__label {
font-size: var(--text-label);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--color-on-ink-muted);
}
.hero-panel__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1px;
margin: 0;
padding: 0;
list-style: none;
background-color: var(--color-border-on-ink);
}
.hero-panel__cell {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-4);
background-color: var(--color-ink-surface);
}
.hero-panel__index {
font-size: var(--text-label);
letter-spacing: var(--tracking-label);
color: var(--color-accent);
}
.hero-panel__topic {
font-family: var(--font-sans);
font-size: var(--text-small);
font-weight: var(--weight-medium);
color: var(--color-on-ink);
}
/* --- Technische Praxis --------------------------------------------------- */
.practice {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-8);
align-items: start;
}
@media (min-width: 992px) {
.practice {
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
gap: var(--space-12);
}
}
.practice__title {
max-width: 24ch;
}
.practice__text {
max-width: 60ch;
margin: 0;
}
.practice__link {
margin: var(--space-5) 0 0;
}
.practice-panel {
border: var(--border-hairline);
background-color: var(--color-surface);
padding: var(--space-5);
}
.practice-panel__label {
margin-bottom: var(--space-4);
}
.practice-panel__list {
display: flex;
flex-direction: column;
gap: var(--space-4);
margin: 0;
}
.practice-panel__row {
padding-top: var(--space-3);
border-top: var(--border-hairline);
}
.practice-panel__key {
font-family: var(--font-mono);
font-size: var(--text-label);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--color-text-muted);
margin-bottom: var(--space-1);
}
.practice-panel__value {
margin: 0;
color: var(--color-text);
}
/* --- Autor & Editorial ---------------------------------------------------- */
.author-section {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-6) var(--space-8);
align-items: start;
}
@media (min-width: 768px) {
.author-section {
grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr);
}
}
/* Reales Portrait im Hochformat (3:4) - kein runder Crop als Hauptdarstellung. */
.author-section__media {
max-width: 15rem;
}
.author-section__portrait {
display: block;
width: 100%;
height: auto;
aspect-ratio: 3 / 4;
object-fit: cover;
border: var(--border-hairline);
}
.author-section__body {
min-width: 0;
}
.author-section__links {
margin-block: var(--space-5);
}
.author-section__more {
margin: 0;
}
.author-section__text {
max-width: 60ch;
}
/* --- components/social.css --- */
/*
* Profil-/Netzwerk-Links (Autorensektion, About-Seite): kompakte Zeile aus
* lokalem Icon und sichtbarem Label, Touch-Ziel 44px, sichtbarer Fokus über
* die globale :focus-visible-Regel. Keine Pill-Optik, kein Marketing.
*/
.social-links__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-6);
}
.social-links__link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-height: var(--touch-target);
font-size: var(--text-small);
font-weight: var(--weight-medium);
color: var(--color-ink);
text-decoration: none;
}
.social-links__link:hover {
color: var(--color-accent);
text-decoration: underline;
text-decoration-thickness: 1px;
}
.social-links__icon {
width: 1rem;
height: 1rem;
flex: none;
}
/* In der Seitenleiste (About) als vertikale Liste mit Hairline-Rahmen wie die Autorenbox. */
.social-links--aside {
padding: var(--space-5) var(--space-6);
border: var(--border-hairline);
background-color: var(--color-surface);
}
.social-links--aside .social-links__list {
flex-direction: column;
gap: 0;
}
/* --- components/consent.css --- */
/*
* Consent-Region (Google Analytics): feste Leiste am unteren Rand, Surface-
* Fläche mit starker Oberkante, scharfe Geometrie, kein Modal, kein Overlay.
* Beide Entscheidungen sind gleichwertige Buttons (Touch-Ziel 44px). Light/
* Dark ausschließlich über die semantischen Tokens. Ohne JavaScript bleibt die
* Region hidden (Attribut) und damit unsichtbar.
*/
.consent {
position: fixed;
inset: auto 0 0 0;
z-index: 30;
background-color: var(--color-surface);
color: var(--color-text);
border-top: var(--border-strong);
}
.consent__inner {
display: flex;
flex-direction: column;
gap: var(--space-4);
padding-block: var(--space-5);
}
.consent__heading {
font-size: var(--text-h4);
font-weight: var(--weight-semibold);
color: var(--color-ink);
margin: 0 0 var(--space-2);
}
.consent__heading:focus {
outline: none;
}
.consent__text {
margin: 0;
max-width: 70ch;
font-size: var(--text-small);
color: var(--color-text);
}
.consent__link {
color: var(--color-accent);
text-decoration: underline;
text-decoration-thickness: 1px;
}
.consent__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
}
.consent__button {
min-height: var(--touch-target);
flex: 1 1 12rem;
}
@media (min-width: 768px) {
.consent__inner {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: var(--space-8);
}
.consent__button {
flex: 0 0 auto;
}
}
/* --- components/article.css --- */
/*
* Artikel, Inhaltsverzeichnis, Seriennavigation, Autorenbox, Projekt- und
* About-Seiten. Desktop: Seitenleiste (TOC) links, Lesespalte rechts.
*/
.article__header {
border-bottom: var(--border-hairline);
}
/*
* Artikelkopf: Wrapper, Titel, Lead, Meta und Tags nutzen in jeder Breite die
* volle innere Containerbreite. Die globale .text-lead-Regel (60ch) gilt
* weiterhin auf anderen Seiten; im Artikelkopf wird sie gezielt aufgehoben.
* Die Lesespalte des Bodys (760px) bleibt unverändert.
*/
.article__intro {
width: 100%;
max-width: none;
}
.article__header .article__title,
.article__header .article__lead {
width: 100%;
max-width: none;
}
.article__kicker {
margin-bottom: var(--space-3);
}
.article__title {
margin-bottom: var(--space-5);
}
.article__lead {
margin-bottom: var(--space-6);
}
.article__meta {
display: flex;
flex-direction: column;
gap: var(--space-4);
padding-top: var(--space-5);
border-top: var(--border-hairline);
}
.article__layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-8);
}
.article__layout > * {
min-width: 0;
}
@media (min-width: 992px) {
.article__layout {
grid-template-columns: var(--width-sidebar) minmax(0, 1fr);
gap: var(--space-12);
align-items: start;
}
.article__aside {
position: sticky;
top: var(--space-6);
}
}
.article__body {
max-width: var(--width-reading);
}
.figure--hero {
margin-top: 0;
max-width: var(--width-reading);
}
/* --- Inhaltsverzeichnis ------------------------------------------------- */
.toc__list {
margin: 0;
padding: 0;
list-style: none;
}
.toc__item {
border-top: var(--border-hairline);
}
.toc__item--level-3 {
padding-left: var(--space-4);
border-top: 0;
}
.toc__link {
display: block;
padding: var(--space-2) 0;
color: var(--color-text);
font-size: var(--text-small);
text-decoration: none;
}
.toc__item--level-3 .toc__link {
font-size: var(--text-meta);
color: var(--color-text-muted);
}
.toc__link:hover {
color: var(--color-accent);
text-decoration: underline;
}
.toc__heading {
margin-bottom: var(--space-3);
}
/* Desktop-TOC in der Seitenleiste, Mobile-TOC als
. */
.toc--desktop {
display: none;
}
.toc--mobile {
border: var(--border-hairline);
background-color: var(--color-surface);
padding: 0 var(--space-4);
}
.toc__summary {
display: flex;
align-items: center;
min-height: var(--touch-target);
cursor: pointer;
list-style: none;
}
.toc__summary::-webkit-details-marker {
display: none;
}
.toc__summary::before {
content: "+";
margin-right: var(--space-2);
}
.toc--mobile[open] .toc__summary::before {
content: "\2212";
}
.toc--mobile .toc__list {
padding-bottom: var(--space-3);
}
@media (min-width: 992px) {
.toc--desktop {
display: block;
padding: var(--space-5);
border: var(--border-hairline);
background-color: var(--color-surface);
}
.toc--mobile {
display: none;
}
}
/* --- Seriennavigation (Editorial Dossier) ------------------------------- */
.series-nav {
border: var(--border-hairline);
background-color: var(--color-surface);
}
.series-nav__head {
padding: var(--space-5);
border-bottom: var(--border-hairline);
}
.series-nav__label {
margin-bottom: var(--space-2);
}
.series-nav__title {
margin: 0;
font-size: var(--text-h4);
font-weight: var(--weight-semibold);
}
.series-nav__title a {
color: var(--color-ink);
text-decoration: none;
}
.series-nav__title a:hover {
text-decoration: underline;
}
.series-nav__links {
display: grid;
grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) {
.series-nav__links {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.series-nav__link--next {
text-align: right;
border-left: var(--border-hairline);
}
.series-nav__link--next:only-child {
grid-column: 2;
}
}
.series-nav__link {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-5);
color: var(--color-ink);
text-decoration: none;
border-bottom: var(--border-hairline);
}
.series-nav__link:hover {
background-color: var(--color-background);
color: var(--color-accent);
}
.series-nav__link-title {
font-weight: var(--weight-medium);
}
.series-nav__overview {
margin: 0;
padding: var(--space-4) var(--space-5);
}
/* --- Verwandte Beiträge, Autor, EicDevCon-Slot -------------------------- */
/* Projektseite: verwandte Beiträge folgen direkt auf den Fließtext - Abstand wie zwischen Abschnitten. */
.project__body + .related {
margin-top: var(--space-10);
}
.related__heading {
font-size: var(--text-h3);
margin-bottom: var(--space-2);
}
.author-box {
display: flex;
gap: var(--space-5);
padding: var(--space-6);
border: var(--border-hairline);
background-color: var(--color-surface);
}
.author-box__portrait {
flex: none;
width: 6rem;
height: 6rem;
}
.author-box__label {
margin-bottom: var(--space-2);
}
.author-box__name {
margin: 0 0 var(--space-1);
font-size: var(--text-h4);
font-weight: var(--weight-semibold);
color: var(--color-ink);
}
.author-box__bio {
margin: var(--space-3) 0 0;
font-size: var(--text-small);
color: var(--color-text-muted);
}
.professional-note {
padding: var(--space-5) var(--space-6);
border-top: var(--border-strong);
border-bottom: var(--border-hairline);
}
.professional-note__label {
margin-bottom: var(--space-2);
}
.professional-note__text {
margin: 0;
font-size: var(--text-small);
color: var(--color-text-muted);
}
.article-meta {
margin: 0;
}
/* --- Suche ---------------------------------------------------------------- */
.search-form {
margin-bottom: var(--space-6);
}
.search-form__label {
display: block;
margin-bottom: var(--space-2);
}
.search-form__row {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
}
.search-form__input {
flex: 1 1 16rem;
min-height: var(--touch-target);
padding: 0 var(--space-4);
border: var(--border-strong);
background-color: var(--color-surface);
color: var(--color-text);
font-family: var(--font-sans);
font-size: var(--text-body);
-webkit-appearance: none;
appearance: none;
}
.search-form__input:focus-visible {
outline: var(--focus-ring);
outline-offset: 0;
border-color: var(--color-accent);
}
.search-status {
min-height: 1.5em;
margin-bottom: var(--space-8);
font-family: var(--font-mono);
font-size: var(--text-meta);
color: var(--color-text-muted);
}
.search-status:empty {
margin-bottom: 0;
}
/* Fehlerseite */
.error-page .page-header__kicker {
display: block;
margin-bottom: var(--space-3);
}
/* --- Markenhinweis (About-Seitenleiste): nüchterne Publisher-Info -------- */
.trademark-note {
padding: var(--space-5) var(--space-6);
border: var(--border-hairline);
background-color: var(--color-surface);
}
.trademark-note__label {
margin-bottom: var(--space-2);
}
.trademark-note__text {
margin: 0;
font-size: var(--text-small);
}
.trademark-note__meta {
margin: var(--space-2) 0 0;
color: var(--color-text-muted);
}
/* Projektseite: Link zur offiziellen Projekt-Website im Faktenpanel. */
.project__website {
margin: var(--space-4) 0 0;
}