/* =====================================================================
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');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('../fonts/Inter-variable.woff2') format('woff2');
}
@font-face {
font-family: 'Atkinson Hyperlegible';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/AtkinsonHyperlegible-Regular.woff2') format('woff2');
}
@font-face {
font-family: 'Atkinson Hyperlegible';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/AtkinsonHyperlegible-Bold.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;
/* Textschrift - hier wird umgeschaltet, sonst nirgends.
Zur Wahl stehen: 'Inter' | 'Source Sans 3' | 'Atkinson Hyperlegible' */
--mk-font-text: 'Inter', 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;
}
/* ---- Textschrift auf den Bausteinen -------------------------------------
Steht bewusst VOR allen Komponenten: Bausteine wie .mk-claim__text oder
.mk-h2 setzen ihre Auszeichnungsschrift weiter unten und gewinnen bei
gleicher Spezifitaet von selbst. Stuende die Regel am Dateiende, muesste
eine Ausnahmeliste gepflegt werden - und die waere beim naechsten neuen
Baustein wieder unvollstaendig.
Was body, Ashe und die Elementor-Widgets angeht, steht in
meku-schrift.css. Die wird nur auf der Hauptseite und im Katalog
geladen, damit die 240 Kuenstlerseiten unberuehrt bleiben.
--------------------------------------------------------------------- */
[class*="mk-"] {
font-family: var(--mk-font-text);
}
/* 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%; }
/* Vergleichstabelle (Mitmachen, Oktober 2026): Auf dem Telefon lag die dritte Spalte
ausserhalb des Bildes - wer nicht wusste, dass man schieben kann, sah Premium Plus
gar nicht. Unter 600px steht die Leistung deshalb als Zeile ueber den beiden Werten,
Premium und Premium Plus bleiben nebeneinander. Kein Schieben noetig. */
.mk-table__plus { color: var(--mk-accent); }
/* Ashe (Hauptseite) rahmt jede Zelle dunkel ein - hier nur die hellen Trennlinien des Design-Systems */
.mk-table--vergleich, .mk-table--vergleich tr { border: 0; }
.mk-table--vergleich th, .mk-table--vergleich td { border: 0; border-bottom: 1px solid var(--mk-line); }
.mk-table__fuer td + td { font-size: 14px; line-height: 1.45; font-style: italic; color: var(--mk-ink-soft); }
@media (max-width: 600px) {
.mk-table--vergleich, .mk-table--vergleich tbody { display: block; border: 1px solid var(--mk-line); }
.mk-table--vergleich tbody { border: 0; }
.mk-table--vergleich thead { display: block; position: sticky; top: 0; z-index: 1; background: var(--mk-paper-2); }
.mk-table--vergleich tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--mk-line); }
.mk-table--vergleich th, .mk-table--vergleich td { padding: 0; border: 0; }
.mk-table--vergleich th:first-child { display: none; }
.mk-table--vergleich th { font-size: var(--mk-fs-lg); }
.mk-table--vergleich td:first-child { grid-column: 1 / -1; width: auto; margin-bottom: 4px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mk-ink-faint); }
}
.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); }
/* Titelbild im Mock (Premium Plus) und Mock als Link auf die Beispiel-Galerie */
.mk-mock__titelbild { width: 100%; height: auto; aspect-ratio: 3 / 1; object-fit: cover; display: block; border-bottom: 1px solid var(--mk-line); }
a.mk-mock { display: block; color: inherit; text-decoration: none; }
a.mk-mock:hover .mk-mock__rahmen { box-shadow: 0 14px 48px rgba(0, 0, 0, 0.2); }
.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; }
}
/* ─── Bewerben-Leiste (Handy/Tablet, nur /mitmachen/) ─────────────────────
Bleibt am unteren Rand stehen, sobald der erste Bildschirm verlassen ist und
kein anderer Bewerben-Knopf im Bild ist. Steuerung: Kurzcode
[meku_bewerben_leiste] in plugins/menschkunst/MeKu_Plugin.php (Oktober 2026). */
.mk-leiste { display: none; }
@media (max-width: 1024px) {
.mk-leiste {
display: block;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 9990;
padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
background: var(--mk-surface);
border-top: 1px solid var(--mk-line);
box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
transform: translateY(110%);
visibility: hidden;
transition: transform 0.25s ease, visibility 0s linear 0.25s;
}
.mk-leiste.ist-sichtbar {
transform: none;
visibility: visible;
transition: transform 0.25s ease;
}
/* Platz am Seitenende, damit der Fuss nicht unter der Leiste verschwindet */
body.mk-leiste-aktiv { padding-bottom: 76px; }
}
@media (prefers-reduced-motion: reduce) {
.mk-leiste, .mk-leiste.ist-sichtbar { transition: none; }
}
/* ---- Kuenstlerliste "Die Kuenstler*innen" (26.10.2026) ----------------------
Kompaktes Portraet-Raster statt grosser Bootstrap-Karten: Desktop 6, Tablet 4,
Handy 3 Spalten; Suchfeld filtert sofort (Skript in center_members.tpl). */
.mk-mitglieder__kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin: 0 0 28px; }
.mk-mitglieder__suche { flex: 1 1 260px; max-width: 420px; }
.mk-mitglieder__zahl { margin: 0; font-size: var(--mk-fs-sm); color: var(--mk-ink-soft); }
.mk-mitglieder .mk-mitglieder__raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px 20px; }
.mk-mitglied { position: relative; margin: 0; padding: 0; text-align: center; list-style: none; }
.mk-mitglieder__raster > .mk-mitglied::before, .mk-mitglieder__raster > .mk-mitglied::marker { content: none; display: none; }
.mk-mitglied[hidden] { display: none; }
.mk-mitglied__bildlink { display: block; }
.mk-mitglied__bild { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 25%; background: var(--mk-surface); border: 1px solid var(--mk-line); }
.mk-mitglied__bildlink:hover .mk-mitglied__bild { box-shadow: var(--mk-shadow); }
.mk-mitglied__zeile { margin: 10px 0 0; line-height: 1.25; }
.mk-mitglieder a.mk-mitglied__name { font-family: var(--mk-font-display); font-size: 16px; color: var(--mk-ink); text-decoration: none; overflow-wrap: anywhere; }
.mk-mitglieder a.mk-mitglied__name:hover { color: var(--mk-accent); }
.mk-mitglied .mk-haken { margin-left: 4px; vertical-align: -2px; }
@media (max-width: 1000px) { .mk-mitglieder .mk-mitglieder__raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 600px) {
.mk-mitglieder .mk-mitglieder__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 10px; }
.mk-mitglieder a.mk-mitglied__name { font-size: 13px; }
.mk-mitglieder__suche { max-width: none; }
}
/* Haken "Verifizierte Kuenstleranschrift" (PLUS) - wie im Katalog (.mk-haken in katalog.css) und in den Galerien */
.mk-haken { position: relative; display: inline-flex; vertical-align: middle; margin-left: 0.3em; color: #2e7d4f; outline: none; text-decoration: none; }
a.mk-haken, a.mk-haken:hover, a.mk-haken:focus, a.mk-haken:visited { color: #2e7d4f; text-decoration: none; }
.mk-haken svg { width: 15px; height: 15px; }
.mk-haken__info {
position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); z-index: 50;
display: flex; flex-direction: column; gap: 2px; width: max-content; max-width: 260px; padding: 9px 12px;
background: #2c2c2c; color: #fff; font: 400 12px/1.4 var(--mk-font-text); letter-spacing: 0; text-transform: none; text-align: left; white-space: normal;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2); opacity: 0; visibility: hidden; transition: opacity .15s; pointer-events: none;
}
.mk-haken__info strong { font-weight: 600; font-size: 13px; }
.mk-haken__info span { color: rgba(255, 255, 255, 0.8); white-space: nowrap; }
.mk-haken__info em { font-style: normal; color: #8fd3aa; margin-top: 3px; }
.mk-haken:hover .mk-haken__info, .mk-haken:focus .mk-haken__info { opacity: 1; visibility: visible; }