/* =====================================================================
MenschKunst Design-System (Richtung A „Galerie auf Papier“, 14.09.2026)
---------------------------------------------------------------------
Eine Datei für alle Oberflächen: Root-Site (Elementor), Kunstkatalog,
Art-Wall, Künstler-Sites (wpartiststheme). Enthält NUR Tokens,
Schriften und wiederverwendbare Komponenten. Keine Seiten-Hacks.
Einbindung:
WordPress: wp_enqueue_style( 'meku-design-system', '/assets/css/meku-design-system.css' )
Smarty:
Farbwerte stammen aus katalog/katalog.css (Stand 08/2026), Schriften
Newsreader + Source Sans 3 (SIL Open Font License 1.1, selbst gehostet
unter /assets/fonts/). Konzept: Abschnitt 3.2, Ticket T1.1.
===================================================================== */
/* ---- Schriften (variable Fonts, Latin) ------------------------------ */
@font-face {
font-family: 'Newsreader';
font-style: normal;
font-weight: 200 800;
font-display: swap;
src: url('../fonts/Newsreader-variable.woff2') format('woff2');
}
@font-face {
font-family: 'Newsreader';
font-style: italic;
font-weight: 200 800;
font-display: swap;
src: url('../fonts/Newsreader-italic.woff2') format('woff2');
}
@font-face {
font-family: 'Source Sans 3';
font-style: normal;
font-weight: 200 900;
font-display: swap;
src: url('../fonts/SourceSans3-variable.woff2') format('woff2');
}
@font-face {
font-family: 'Source Sans 3';
font-style: italic;
font-weight: 200 900;
font-display: swap;
src: url('../fonts/SourceSans3-italic.woff2') format('woff2');
}
/* ---- Tokens ---------------------------------------------------------- */
:root {
/* Farben (hell) */
--mk-paper: #fafaf8; /* Seitengrund */
--mk-paper-2: #f3f0e9; /* Flächen, Panels, Footer */
--mk-surface: #ffffff; /* Karten, Formulare */
--mk-ink: #2c2c2c; /* Text, Titel */
--mk-ink-soft: #666666; /* Nebentext */
--mk-ink-faint: #999999; /* Labels, Hinweise */
--mk-line: #e8e4de; /* Linien, Rahmen */
--mk-accent: #b8860b; /* Gold: Links, Buttons, Preise */
--mk-accent-hover: #9a6f08;
--mk-accent-strong: #96690a; /* gefuellte Flaechen: Weiss darauf = 4,9:1 (WCAG AA) */
--mk-accent-soft: #f1e7cf;
--mk-sold: #8c2f39; /* „Privatbesitz“ */
--mk-on-accent: #ffffff;
/* Schrift */
--mk-font-display: 'Newsreader', Georgia, 'Book Antiqua', Palatino, serif;
--mk-font-text: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
--mk-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
/* Typo-Skala */
--mk-fs-xs: 12px;
--mk-fs-sm: 14px;
--mk-fs-md: 16px;
--mk-fs-lg: 18px;
--mk-fs-xl: 22px;
--mk-fs-2xl: 28px;
--mk-fs-3xl: 36px;
--mk-fs-4xl: 48px;
--mk-lh-tight: 1.1;
--mk-lh-text: 1.55;
/* Abstände */
--mk-sp-1: 4px;
--mk-sp-2: 8px;
--mk-sp-3: 12px;
--mk-sp-4: 16px;
--mk-sp-5: 24px;
--mk-sp-6: 32px;
--mk-sp-7: 48px;
--mk-sp-8: 64px;
--mk-sp-9: 80px;
/* Form */
--mk-radius: 0; /* bewusst eckig, wie der Katalog */
--mk-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
--mk-shadow-lg: 0 6px 24px rgba(0, 0, 0, 0.14);
--mk-frame: 8px solid #ffffff; /* „Passepartout“ um Werkbilder */
--mk-container: 1312px;
--mk-gutter: 64px;
}
/* Dunkles Schema.
BEWUSST NICHT ueber prefers-color-scheme: die Root-Site, der Katalog und die
Art-Wall sind immer hell. Ashe Pro bringt einen eigenen Dunkelmodus mit, den
Besucher per Klick einschalten (Klasse ashe-dark-mode am body, gespeichert in
localStorage). Eine automatische Umschaltung nach Systemeinstellung wuerde die
Komponenten dunkel faerben, waehrend die Seite ringsum hell bleibt.
Deshalb nur zwei ausdrueckliche Schalter: das Attribut data-theme und Ashe. */
:root[data-theme="dark"],
body.ashe-dark-mode {
--mk-paper: #171614;
--mk-paper-2: #1f1d1a;
--mk-surface: #232120;
--mk-ink: #ece8df;
--mk-ink-soft: #b3ada2;
--mk-ink-faint: #8a847a;
--mk-line: #33302a;
--mk-accent: #d9a441;
--mk-accent-hover: #e6b85c;
--mk-accent-strong: #d9a441;
--mk-accent-soft: #2e2718;
--mk-sold: #d46a76;
--mk-on-accent: #171614;
--mk-frame: 8px solid #2b2926;
--mk-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
--mk-shadow-lg: 0 6px 24px rgba(0, 0, 0, 0.6);
}
/* ---- Basis (nur innerhalb .mk-scope, damit nichts Fremdes umgefärbt wird) --- */
.mk-scope {
background: var(--mk-paper);
color: var(--mk-ink);
font-family: var(--mk-font-text);
font-size: var(--mk-fs-md);
line-height: var(--mk-lh-text);
-webkit-font-smoothing: antialiased;
}
/* :where() haelt die Spezifitaet niedrig, damit Komponenten (.mk-btn, .mk-chip, .mk-wordmark) ihre eigene Farbe behalten */
:where(.mk-scope) a { color: var(--mk-accent-strong); text-decoration: none; }
:where(.mk-scope) a:hover, :where(.mk-scope) a:focus-visible { color: var(--mk-accent-hover); }
.mk-scope :focus-visible { outline: 2px solid var(--mk-accent); outline-offset: 2px; }
/* ---- Typografie ------------------------------------------------------- */
.mk-display, .mk-h1, .mk-h2, .mk-h3 {
font-family: var(--mk-font-display);
font-weight: 500;
line-height: var(--mk-lh-tight);
letter-spacing: -0.01em;
color: var(--mk-ink);
margin: 0;
text-wrap: balance;
}
.mk-h1 { font-size: clamp(34px, 4vw, 58px); line-height: 1.05; }
.mk-h2 { font-size: clamp(26px, 2.6vw, 34px); }
.mk-h3 { font-size: var(--mk-fs-xl); font-weight: 600; }
.mk-lead { font-size: var(--mk-fs-lg); color: var(--mk-ink-soft); max-width: 34em; }
.mk-eyebrow {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--mk-ink-soft);
}
.mk-eyebrow--accent { color: var(--mk-accent-strong); }
.mk-muted { color: var(--mk-ink-soft); }
.mk-faint { color: var(--mk-ink-faint); }
.mk-tabular { font-variant-numeric: tabular-nums; }
/* ---- Layout ------------------------------------------------------------ */
.mk-container { max-width: var(--mk-container); margin-inline: auto; padding-inline: var(--mk-gutter); }
.mk-section { padding-block: var(--mk-sp-9) 0; display: flex; flex-direction: column; gap: var(--mk-sp-5); }
.mk-section__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--mk-sp-5); }
.mk-section__head > div { display: flex; flex-direction: column; gap: 6px; }
.mk-grid { display: grid; gap: var(--mk-sp-6) var(--mk-sp-5); align-items: start; }
.mk-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mk-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mk-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Karten gleicher Hoehe: nur dort einsetzen, wo Kaesten nebeneinander stehen. */
.mk-grid--stretch { align-items: stretch; }
.mk-grid--stretch > * { height: 100%; }
.mk-rule { height: 1px; background: var(--mk-line); border: 0; margin: 0; }
@media (max-width: 1024px) {
:root { --mk-gutter: 32px; }
.mk-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
:root { --mk-gutter: 20px; }
.mk-grid--3, .mk-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mk-grid--2 { grid-template-columns: minmax(0, 1fr); }
.mk-section { padding-block: var(--mk-sp-7) 0; }
.mk-section__head { flex-direction: column; align-items: flex-start; }
}
/* ---- Buttons ----------------------------------------------------------- */
.mk-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 48px;
padding: 0 24px;
font-family: var(--mk-font-text);
font-size: var(--mk-fs-xs);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
border: 1px solid var(--mk-accent);
border-radius: var(--mk-radius);
color: var(--mk-accent);
background: transparent;
cursor: pointer;
white-space: nowrap;
text-decoration: none;
transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.mk-btn:hover, .mk-btn:focus-visible { background: var(--mk-accent-soft); color: var(--mk-accent-hover); }
.mk-btn--primary { background: var(--mk-accent-strong); color: var(--mk-on-accent); border-color: var(--mk-accent-strong); }
.mk-btn--primary:hover, .mk-btn--primary:focus-visible { background: var(--mk-accent-hover); color: var(--mk-on-accent); border-color: var(--mk-accent-hover); }
/* Gegen Theme-Linkfarben absichern, siehe Kommentar oben. */
.mk-btn.mk-btn { color: var(--mk-accent-strong); }
.mk-btn.mk-btn:hover, .mk-btn.mk-btn:focus-visible { color: var(--mk-accent-hover); }
.mk-btn--primary.mk-btn--primary,
.mk-btn--primary.mk-btn--primary:hover,
.mk-btn--primary.mk-btn--primary:focus-visible { color: var(--mk-on-accent); }
.mk-link.mk-link { color: var(--mk-accent-strong); }
.mk-link.mk-link:hover, .mk-link.mk-link:focus-visible { color: var(--mk-accent-hover); }
.mk-btn--ink { border-color: var(--mk-ink); color: var(--mk-ink); }
.mk-btn--ink:hover { background: var(--mk-ink); color: var(--mk-paper); }
.mk-btn--sm { min-height: 38px; padding: 0 16px; }
.mk-btn--block { width: 100%; }
.mk-link {
font-size: var(--mk-fs-xs);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 8px;
}
/* ---- Badges, Chips, Preise -------------------------------------------- */
.mk-badge {
display: inline-flex;
align-items: center;
flex-shrink: 0;
white-space: nowrap;
height: 20px;
padding: 0 8px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
border: 1px solid var(--mk-accent);
color: var(--mk-accent);
white-space: nowrap;
}
.mk-badge--sold { border-color: var(--mk-sold); color: var(--mk-sold); }
.mk-chip {
display: inline-flex;
align-items: center;
min-height: 32px;
padding: 0 14px;
font-size: 13px;
border: 1px solid var(--mk-line);
background: var(--mk-surface);
color: var(--mk-ink);
text-decoration: none;
}
.mk-chip:hover { border-color: var(--mk-ink-soft); color: var(--mk-ink); }
.mk-chip--on, .mk-chip[aria-current="true"] { border-color: var(--mk-ink); background: var(--mk-ink); color: var(--mk-paper); }
.mk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mk-price {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--mk-accent-strong); /* 13px fett: braucht 4,5:1 */
white-space: nowrap;
flex-shrink: 0;
font-variant-numeric: tabular-nums;
}
.mk-price--request { color: var(--mk-ink-soft); font-weight: 400; font-style: italic; }
.mk-price--sold { color: var(--mk-sold); }
.mk-price--lg { font-family: var(--mk-font-display); font-size: var(--mk-fs-3xl); font-weight: 500; letter-spacing: 0; }
/* ---- Werk-Karte ---------------------------------------------------------
Das Bild behält sein Seitenverhältnis (kein Beschnitt). */
.mk-work { display: flex; flex-direction: column; gap: 10px; color: var(--mk-ink); text-decoration: none; }
.mk-work__img { width: 100%; height: auto; display: block; border: 1px solid var(--mk-line); background: var(--mk-surface); }
.mk-work__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.mk-work__title { font-family: var(--mk-font-display); font-size: var(--mk-fs-lg); line-height: 1.25; color: var(--mk-ink); }
.mk-work__artist { font-size: var(--mk-fs-sm); color: var(--mk-ink-soft); }
.mk-work:hover .mk-work__img { box-shadow: var(--mk-shadow); }
.mk-work:hover .mk-work__title { color: var(--mk-accent); }
/* Gleich hohe Vorschaubilder fuer Reihen nebeneinander, etwa die
Referenz-Galerien. Ohne das richtet sich jede Karte nach dem
Seitenverhaeltnis ihres Bildes und die Reihe franst aus. */
.mk-work--fix .mk-work__img { aspect-ratio: 4 / 3; height: auto; object-fit: cover; }
.mk-work--hoch .mk-work__img { aspect-ratio: 3 / 4; height: auto; object-fit: cover; }
/* Werkbild mit Passepartout (Hero, Werkseite) */
.mk-frame { border: var(--mk-frame); box-shadow: var(--mk-shadow-lg); display: block; max-width: 100%; height: auto; }
/* ---- Künstler-Karte ----------------------------------------------------- */
.mk-artist {
display: flex;
gap: 20px;
align-items: flex-start;
padding: var(--mk-sp-5);
border: 1px solid var(--mk-line);
background: var(--mk-surface);
}
.mk-artist__photo { width: 96px; height: 96px; object-fit: cover; flex: 0 0 96px; }
.mk-artist__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mk-artist__name { display: flex; gap: 10px; align-items: center; font-family: var(--mk-font-display); font-size: var(--mk-fs-xl); }
.mk-artist__line { font-size: var(--mk-fs-sm); color: var(--mk-ink-soft); }
.mk-artist__meta { font-size: 13px; color: var(--mk-ink-faint); }
/* ---- Vertrauensleiste --------------------------------------------------- */
.mk-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--mk-line); border-bottom: 1px solid var(--mk-line); }
.mk-trust__item { display: flex; gap: 14px; align-items: flex-start; padding: 20px 24px; border-left: 1px solid var(--mk-line); }
.mk-trust__item:first-child { border-left: 0; }
.mk-trust__icon { color: var(--mk-accent); display: inline-flex; margin-top: 2px; flex-shrink: 0; }
.mk-trust__title { font-weight: 700; font-size: var(--mk-fs-sm); }
.mk-trust__text { font-size: 13px; color: var(--mk-ink-soft); }
@media (max-width: 900px) {
.mk-trust { grid-template-columns: minmax(0, 1fr); }
.mk-trust__item { border-left: 0; padding: 12px 0; }
}
/* ---- Hinweisbox (z. B. „Anfrage geht direkt an den Künstler“) ----------- */
.mk-note { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; background: var(--mk-paper-2); font-size: var(--mk-fs-sm); color: var(--mk-ink-soft); }
.mk-note__row { display: flex; gap: 10px; align-items: center; }
.mk-note__row svg { color: var(--mk-accent); flex-shrink: 0; }
/* ---- Formulare ----------------------------------------------------------- */
.mk-field { display: flex; flex-direction: column; gap: 6px; }
.mk-field__label { font-size: var(--mk-fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mk-ink-soft); }
.mk-input, .mk-scope input[type="text"], .mk-scope input[type="email"], .mk-scope input[type="url"], .mk-scope input[type="search"], .mk-scope textarea, .mk-scope select {
font-family: var(--mk-font-text);
font-size: 15px;
color: var(--mk-ink);
border: 1px solid var(--mk-line);
border-radius: var(--mk-radius);
background: var(--mk-surface);
padding: 12px 14px;
width: 100%;
box-sizing: border-box;
min-height: 48px;
}
.mk-input:focus, .mk-scope input:focus, .mk-scope textarea:focus { border-color: var(--mk-accent); outline: none; }
.mk-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--mk-ink-soft); }
.mk-check input { width: 18px; height: 18px; margin: 2px 0 0; flex-shrink: 0; }
/* ---- Tabellen (Vergleich, Werkdaten) -------------------------------------- */
.mk-table { border-collapse: collapse; width: 100%; font-size: 15px; }
.mk-table th, .mk-table td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--mk-line); vertical-align: top; }
.mk-table th { font-family: var(--mk-font-display); font-size: var(--mk-fs-xl); font-weight: 500; }
.mk-table td:first-child { color: var(--mk-ink-soft); width: 34%; }
.mk-facts { display: flex; flex-direction: column; border-bottom: 1px solid var(--mk-line); }
.mk-facts__row { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--mk-line); font-size: 15px; }
.mk-facts__row > span:first-child { color: var(--mk-ink-soft); }
/* ---- Navigation, Header, Footer ------------------------------------------ */
.mk-header { display: flex; align-items: center; justify-content: space-between; min-height: 76px; padding-inline: var(--mk-gutter); border-bottom: 1px solid var(--mk-line); background: var(--mk-paper); gap: var(--mk-sp-5); }
.mk-wordmark { font-family: var(--mk-font-display); font-size: 26px; letter-spacing: 0.02em; color: var(--mk-ink); text-decoration: none; }
.mk-wordmark sup { font-size: 12px; }
.mk-nav { display: flex; gap: 32px; align-items: center; }
.mk-nav a { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--mk-ink); text-decoration: none; }
.mk-nav a:hover, .mk-nav a[aria-current="page"], .mk-nav a.mk-nav--on { color: var(--mk-accent); }
.mk-topbar { min-height: 30px; background: var(--mk-ink); color: rgba(255, 255, 255, 0.75); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; display: flex; align-items: center; justify-content: space-between; padding-inline: var(--mk-gutter); }
.mk-topbar a { color: inherit; }
.mk-footer { padding: 56px var(--mk-gutter) 40px; border-top: 1px solid var(--mk-line); background: var(--mk-paper-2); display: flex; flex-direction: column; gap: 40px; }
.mk-footer__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.mk-footer__col { display: flex; flex-direction: column; gap: 10px; }
.mk-footer__col a { color: var(--mk-ink-soft); font-size: var(--mk-fs-sm); }
.mk-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 13px; color: var(--mk-ink-faint); flex-wrap: wrap; }
@media (max-width: 720px) {
.mk-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ---- Bruecke zu Elementor -------------------------------------------------
Elementor setzt eigene Klassen auf die HUELLE eines Bausteins, nicht auf das
Element darin. Traegt die Huelle eine Typo-Klasse des Design-Systems, soll
die Ueberschrift oder der Text darin sie uebernehmen. */
/* Die zusaetzliche Klasse .elementor-widget erhoeht die Gewichtung auf 0,3,0.
Elementor selbst setzt ".elementor-widget-heading .elementor-heading-title"
mit 0,2,0 und weiter hinten im Dokument; ohne die Erhoehung gewinnt Elementor.
Der eigentliche Weg bleibt Ticket T1.2: die globalen Elementor-Einstellungen
auf die Tokens des Design-Systems setzen. Dann faellt diese Bruecke weg. */
.elementor-widget.mk-h1 .elementor-heading-title,
.elementor-widget.mk-h2 .elementor-heading-title,
.elementor-widget.mk-h3 .elementor-heading-title,
.elementor-widget.mk-display .elementor-heading-title {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
letter-spacing: inherit;
color: inherit;
text-wrap: inherit;
margin: 0;
}
.elementor-widget.mk-lead .elementor-widget-container,
.elementor-widget.mk-lead .elementor-widget-container p {
font-size: inherit;
color: inherit;
margin: 0;
}
/* ---- Abschluss-Aufruf ------------------------------------------------------ */
/* Textblock links, Schaltflaechen rechts; auf schmalen Schirmen untereinander. */
.mk-cta {
display: grid;
grid-template-columns: 1fr auto;
gap: 32px 48px;
align-items: center;
padding: 44px 48px;
border: 1px solid var(--mk-accent);
background: var(--mk-surface);
}
.mk-cta__text { display: flex; flex-direction: column; gap: 10px; }
.mk-cta__text p { margin: 0; max-width: 52ch; }
.mk-cta__lead { font-size: var(--mk-fs-md); color: var(--mk-ink-soft); }
.mk-cta__note { font-size: 13px; color: var(--mk-ink-faint); margin-top: 6px; }
.mk-cta__actions { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
/* ---- Zahlenkasten ---------------------------------------------------------- */
.mk-stats {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 26px 20px;
padding: 30px 32px;
border: 1px solid var(--mk-line);
background: var(--mk-surface);
}
.mk-stats__value { font-family: var(--mk-font-display); font-size: 34px; line-height: 1; color: var(--mk-accent); }
.mk-stats__label { font-size: 13px; color: var(--mk-ink-soft); margin-top: 6px; }
/* ---- Bausteine fuer Seiteninhalte -------------------------------------------
Diese Klassen ersetzen Inline-Angaben in den Elementor-HTML-Bausteinen.
Grund: WordPress 6.9 entfernt "display" aus style-Attributen (kses,
safecss_filter_attr); erst 7.1 erlaubt es. Live laeuft 6.9.8, Test 7.1 --
Raster und Flex-Zeilen fielen auf Live deshalb auseinander. Im Stylesheet
greift kses nicht, also gehoert das hierher und nicht in die Seite. */
.mk-actions { display: flex; flex-direction: row; flex-wrap: wrap; gap: 14px; align-items: center; }
/* Waagerechter Scroller, etwa fuer breite Tabellen auf schmalen Schirmen. */
.mk-scroll-x { overflow-x: auto; }
.mk-card {
display: flex;
flex-direction: column;
gap: 10px;
padding: 24px;
border: 1px solid var(--mk-line);
background: var(--mk-surface);
}
.mk-card__text { font-size: var(--mk-fs-sm); color: var(--mk-ink-soft); }
/* Zweigeteilter Kasten: Titel links, Text rechts, auf schmalen Schirmen
untereinander. Heisst bewusst NICHT .mk-note -- den Namen gibt es oben
schon fuer einen anderen Baustein, und die alte Regel setzte
flex-direction: column, was die Basiswerte hier zu Hoehen machte. */
.mk-split {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 8px 24px;
align-items: baseline;
padding: 22px 26px;
background: var(--mk-paper-2);
}
.mk-split__titel { flex: 1 1 220px; }
.mk-split__text { flex: 3 1 380px; font-size: var(--mk-fs-sm); color: var(--mk-ink-soft); }
.mk-steps { display: flex; flex-direction: column; gap: 22px; }
.mk-step { display: flex; flex-direction: row; gap: 18px; align-items: flex-start; }
.mk-step__nr { font-family: var(--mk-font-display); font-size: 40px; line-height: 1; color: var(--mk-accent); }
.mk-step__text { font-size: var(--mk-fs-sm); color: var(--mk-ink-soft); margin-top: 4px; }
.mk-prose { display: flex; flex-direction: column; gap: 14px; font-size: 15px; color: var(--mk-ink-soft); }
.mk-prose p { margin: 0; }
.mk-prose__klein { font-size: 13px; color: var(--mk-ink-faint); }
/* Kleingedrucktes, das aus dem Seitenaufbau kommt: Fussnoten, Hinweise,
Zusaetze unter Preisen. Als Klasse statt im style-Attribut, damit die
Handy-Regel weiter unten sie erreichen kann. */
.mk-klein { font-size: 13px; color: var(--mk-ink-faint); }
.mk-faq__item { display: flex; flex-direction: column; gap: 6px; padding: 18px 0; border-top: 1px solid var(--mk-line); }
.mk-faq__antwort { font-size: 15px; color: var(--mk-ink-soft); }
/* Nachbildung eines Browserfensters mit einer echten Mitglieder-Galerie. */
.mk-mock { position: relative; max-width: 620px; margin-inline: auto; }
.mk-mock__rahmen { border: 1px solid var(--mk-line); background: var(--mk-surface); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.14); }
.mk-mock__leiste {
display: flex; align-items: center; gap: 6px;
height: 30px; padding: 0 12px;
background: var(--mk-paper-2); border-bottom: 1px solid var(--mk-line);
}
.mk-mock__punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--mk-line); }
.mk-mock__adresse { margin-left: 12px; font-size: 11px; color: var(--mk-ink-faint); }
.mk-mock__kopf {
display: flex; justify-content: space-between; align-items: center; gap: 12px;
padding: 12px 20px; border-bottom: 1px solid var(--mk-line);
}
.mk-mock__nav { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mk-ink-soft); }
.mk-mock__raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 16px 20px 20px; }
.mk-mock__raster img { width: 100%; height: auto; display: block; border: 1px solid var(--mk-line); }
.mk-mock__bu { text-align: center; font-size: 13px; color: var(--mk-ink-faint); margin-top: 12px; }
@media (max-width: 720px) { .mk-mock__nav { display: none; } }
/* ---- Platzbelegung --------------------------------------------------------- */
.mk-plaetze {
display: flex;
flex-direction: column;
gap: 10px;
padding: 22px 26px;
border: 1px solid var(--mk-line);
background: var(--mk-surface);
}
.mk-plaetze__kopf {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
gap: 4px 16px;
}
.mk-plaetze__titel { font-family: var(--mk-font-display); font-size: var(--mk-fs-xl); }
.mk-plaetze__zahl { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--mk-accent-strong); font-variant-numeric: tabular-nums; }
.mk-plaetze__balken { height: 6px; background: var(--mk-paper-2); overflow: hidden; }
.mk-plaetze__balken > span { display: block; height: 100%; background: var(--mk-accent-strong); }
.mk-plaetze__text { font-size: var(--mk-fs-sm); color: var(--mk-ink-soft); margin: 0; }
@media (max-width: 720px) { .mk-plaetze { padding: 18px 20px; } }
/* ---- Belegbare Aussage ----------------------------------------------------- */
/* Fuer Kernaussagen, die sich aus eigenen Daten belegen lassen. Bewusst kein
Zitat: braucht keine Einwilligung und ist nachpruefbar. */
.mk-claim {
display: flex;
flex-direction: column;
gap: 12px;
padding: 44px 48px;
background: var(--mk-paper-2);
border-left: 3px solid var(--mk-accent);
}
.mk-claim__text {
font-family: var(--mk-font-display);
font-size: clamp(24px, 2.8vw, 38px);
line-height: 1.25;
color: var(--mk-ink);
margin: 0;
max-width: 34ch;
}
.mk-claim__note { font-size: 13px; color: var(--mk-ink-faint); margin: 0; }
@media (max-width: 720px) { .mk-claim { padding: 28px 22px; } }
/* ---- Zitat eines Mitglieds ------------------------------------------------- */
.mk-quote {
display: grid;
grid-template-columns: 96px 1fr;
gap: 28px;
align-items: center;
padding: 40px 48px;
background: var(--mk-paper-2);
}
.mk-quote__text { font-family: var(--mk-font-display); font-size: var(--mk-fs-2xl); line-height: 1.3; }
.mk-quote__by { font-size: 13px; color: var(--mk-ink-soft); margin-top: 10px; }
@media (max-width: 720px) {
.mk-cta { grid-template-columns: minmax(0, 1fr); padding: 28px 22px; gap: 24px; }
.mk-quote { grid-template-columns: minmax(0, 1fr); padding: 28px 22px; gap: 18px; }
.mk-stats { padding: 24px 22px; }
.mk-btn { white-space: normal; text-align: center; }
}
/* ---- Lange Woerter ---------------------------------------------------------
Domainnamen wie agnes-kreutzberger.menschkunst.de sind 33 Zeichen lang und
damit breiter als eine Spalte auf dem Telefon -- sie traten aus ihren
Kaesten heraus. Seit die Schrift dort groesser ist, faellt es mehr auf.
overflow-wrap: break-word bricht ein Wort NUR, wenn es sonst ueberlaufen
wuerde; im Fliesstext aendert sich dadurch nichts. Die Silbentrennung
kommt nur auf schmalen Schirmen dazu, fuer Komposita wie
"Premium-Plus-Mitgliedschaft". Sie setzt lang="de" am Dokument voraus,
das ist gegeben. */
.mk-card, .mk-card__text,
.mk-split__titel, .mk-split__text,
.mk-step__text, .mk-prose, .mk-prose__klein,
.mk-faq__item, .mk-faq__antwort,
.mk-trust__title, .mk-trust__text,
.mk-claim__text, .mk-claim__note,
.mk-cta__lead, .mk-cta__note,
.mk-klein, .mk-lead,
.mk-work__title, .mk-work__artist,
.mk-stats__label, .mk-plaetze__text,
.mk-table td, .mk-table th {
overflow-wrap: break-word;
}
/* Ueberschriften nicht. Sie erben den Umbruch sonst von der Karte, und
aus "Ausgewaehlte Nachbarschaft" wird "Ausgewaehlt / e / Nachbarsch /
aft". Bei Bedarf trennt der Browser stattdessen nach Silben. */
.mk-display, .mk-h1, .mk-h2, .mk-h3 { overflow-wrap: normal; }
@media (max-width: 720px) {
.mk-card__text,
.mk-split__text,
.mk-step__text,
.mk-prose,
.mk-faq__antwort,
.mk-claim__text,
.mk-cta__lead {
hyphens: auto;
}
}
/* ---- Textkarten auf dem Telefon --------------------------------------------
Das Kartenraster ging bei 720px auf zwei Spalten. Auf einem 390 Pixel
breiten Telefon bleiben davon 165 Pixel je Karte, abzueglich Innenabstand
117 Pixel Text -- rund vierzehn Zeichen je Zeile. Lesbar sind 45 bis 75.
Weniger Innenabstand haette zwei Zeichen gebracht, eine Spalte bringt
zweiundzwanzig.
Betroffen ist nur das Raster der Textkarten (.mk-grid--stretch). Werk- und
Galeriebilder duerfen weiter zweispaltig stehen, Bilder brauchen keine
Zeilenlaenge. */
@media (max-width: 560px) {
.mk-grid--stretch { grid-template-columns: minmax(0, 1fr); }
.mk-card { padding: 20px; }
.mk-h3 { hyphens: auto; }
}
/* ---- Lesbarkeit auf schmalen Schirmen --------------------------------------
Bis hierher gilt ueberall dieselbe Groesse, auf dem 27-Zoll-Schirm wie auf
dem Telefon. Auf dem Schreibtisch traegt der Abstand zum Auge die kleinen
Groessen; in der Hand nicht. iOS und Android setzen Fliesstext auf 16px,
13px liest sich dagegen wie Kleingedrucktes.
Angehoben wird nur, was Fliesstext ist. Beschriftungen, Bildunterschriften
und die Browser-Nachbildung bleiben klein, sie sollen klein wirken. */
@media (max-width: 720px) {
:root {
--mk-fs-xs: 13px; /* war 12 */
--mk-fs-sm: 15px; /* war 14 */
}
.mk-trust__text,
.mk-claim__note,
.mk-cta__note,
.mk-prose__klein,
.mk-stats__label,
.mk-quote__by { font-size: 14px; }
.mk-prose,
.mk-faq__antwort,
.mk-table,
.mk-facts__row { font-size: 16px; }
.mk-plaetze__zahl { font-size: 14px; }
/* Fuer Inhalte, die aus dem Seitenaufbau kommen und sonst eine feste
Groesse im style-Attribut truegen. */
.mk-klein { font-size: 14px; }
}
/* ---- Barrierefreiheit ------------------------------------------------------ */
.mk-skip { position: absolute; left: -9999px; top: 0; padding: 12px 16px; background: var(--mk-ink); color: var(--mk-paper); z-index: 1000; }
.mk-skip:focus { left: 16px; top: 16px; }
.mk-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
.mk-scope *, .mk-scope *::before, .mk-scope *::after { transition: none !important; animation: none !important; }
}